/* ===========================================================
   drcar.css — Estilos propios del Estudio Dr. CAR y Asoc.
   ===========================================================
   Separado de style.css (el theme heredado de Bootstrap 3 que
   nunca se toca a mano) para que lo nuestro viva en un solo
   lugar, igual criterio que estudio-tema.css en el sistema
   interno. Se linkea DESPUÉS de style.css en base.njk, así que
   cualquier regla de acá puede pisar al theme si hace falta.

   Todo lo nuevo de acá usa la MISMA paleta de siempre (negro,
   dorado, navy) — no se cambian colores, solo se centralizan y
   se arma un layout más prolijo/espaciado. Reglas del theme
   viejo: navy y dorado nunca en la misma forma/panel (lee como
   Boca Juniors).
   =========================================================== */

:root {
  --drcar-gold: #bea34d;
  --drcar-gold-deep: #997938;
  --drcar-navy: #31486f;
  --drcar-black: #000000;
  --drcar-bg-dark: #0b162a;
  --drcar-text-light: #ffffff;
  --drcar-text-dim: #cccccc;
  --drcar-text-faint: #828282;
  --drcar-border-gold: rgba(190, 163, 77, 0.25);
}

/* ---------------------------------------------------------
   Tarjeta numerada — alternativa a .services (más limpia,
   sin ícono grande, el número hace de elemento gráfico).
   Uso: dentro de un .container > .row, una .numbered-grid con
   2 a 4 .numbered-card adentro.
   --------------------------------------------------------- */
.numbered-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 20px;
}
.numbered-card {
  flex: 1 1 240px;
  padding: 32px 28px;
  background: var(--drcar-bg-dark);
  border: 1px solid var(--drcar-border-gold);
  border-radius: 6px;
}
.numbered-card .num {
  display: block;
  font-family: var(--f-txt, "Playfair Display", Georgia, serif);
  font-size: calc(15px * var(--k, 1));
  font-weight: 700;
  color: var(--drcar-gold);
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.numbered-card h3 {
  color: var(--drcar-text-light);
  font-size: calc(20px * var(--k, 1));
  margin-bottom: 12px;
}
.numbered-card p {
  color: var(--drcar-text-dim);
  font-size: calc(15px * var(--k, 1));
  line-height: 1.7;
  margin-bottom: 0;
}
.numbered-card .card-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--drcar-gold);
  font-size: calc(14px * var(--k, 1));
  text-decoration: none;
  font-family: var(--f-txt, "Playfair Display", Georgia, serif);
}
.numbered-card .card-link:hover { color: var(--drcar-text-light); }

/* ---------------------------------------------------------
   Proceso en pasos — "Cómo trabajamos", 3 a 4 pasos numerados
   en círculo dorado. No existía nada así en el sitio.
   --------------------------------------------------------- */
.process-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  margin-top: 40px;
}
.process-step {
  flex: 1 1 220px;
  max-width: 280px;
  text-align: center;
}
.process-step .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border: 2px solid var(--drcar-gold);
  border-radius: 50%;
  color: var(--drcar-gold);
  font-family: var(--f-txt, "Playfair Display", Georgia, serif);
  font-size: calc(20px * var(--k, 1));
  font-weight: 700;
}
.process-step h4 {
  color: var(--drcar-text-light);
  font-size: calc(18px * var(--k, 1));
  margin-bottom: 10px;
}
.process-step p {
  color: var(--drcar-text-dim);
  font-size: calc(14.5px * var(--k, 1));
  line-height: 1.7;
}

/* ---------------------------------------------------------
   FAQ — acordeón nativo <details>/<summary>, sin JS. Mismo
   truco que .archivados-panel en estudio-tema.css.
   --------------------------------------------------------- */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 4px;
  color: var(--drcar-text-light);
  font-family: var(--f-txt, "Playfair Display", Georgia, serif);
  font-size: calc(17px * var(--k, 1));
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  color: var(--drcar-gold);
  font-size: calc(22px * var(--k, 1));
  flex-shrink: 0;
  line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-body {
  padding: 0 4px 20px;
  color: var(--drcar-text-dim);
  font-size: calc(15px * var(--k, 1));
  line-height: 1.8;
}

@media screen and (max-width: 768px) {
  .numbered-card { padding: 24px 20px; }
  .process-steps { gap: 28px; }
  .faq-item summary { font-size: calc(15.5px * var(--k, 1)); padding: 16px 2px; }
}

/* ---------------------------------------------------------
   Tarjeta con foto (Opción C) — para grillas donde cada ítem
   tiene una imagen real propia (ej: Ramas del Derecho en
   index/practice, cada área ya tiene su foto en
   src/images/derechos/*.jpg). No usar donde no hay foto
   dedicada por ítem — para eso está .numbered-card arriba.
   --------------------------------------------------------- */
.photo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 20px;
}
.photo-card {
  border-radius: 8px;
  overflow: hidden;
  background: var(--drcar-bg-dark);
  border: 1px solid var(--drcar-border-gold);
  text-decoration: none;
  display: block;
  transition: 0.3s;
}
.photo-card:hover { transform: translateY(-4px); }
.photo-card .photo-card-img {
  height: 180px;
  background-size: cover;
  background-position: center;
}
.photo-card .photo-card-body { padding: 18px 20px; }
.photo-card .photo-card-tag {
  font-size: calc(11px * var(--k, 1));
  color: var(--drcar-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--f-txt, "Playfair Display", Georgia, serif);
}
.photo-card h3 {
  font-size: calc(17px * var(--k, 1));
  color: var(--drcar-text-light);
  margin: 8px 0 0;
  font-weight: 400;
}

/* ---------------------------------------------------------
   Chips de mini-features — para index.njk, reemplazan los 2
   bloques .third-col diagonales de #colorlib-intro (el look
   navy+dorado enfrentado que las reglas del theme piden
   evitar). No se usan en derecho.njk: ahí el .third-col es
   parte del hero (video + texto), no una sección aparte.
   --------------------------------------------------------- */
.mini-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.mini-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--drcar-bg-dark);
  border-radius: 8px;
  flex: 0 1 260px;
}
.mini-feature i { color: var(--drcar-gold); font-size: calc(20px * var(--k, 1)); }
.mini-feature span { color: #eee; font-size: calc(13.5px * var(--k, 1)); font-family: Georgia, serif; }

/* Reemplaza el style="color: aliceblue;" repetido a mano en varios títulos
   de sección sobre fondo oscuro (index.njk, derecho.njk, practice.njk). */
.heading-on-dark { color: aliceblue; }

/* ---------------------------------------------------------
   Turnos — reserva propia (2026-10-05), reemplaza Google Calendar.
   Página: src/turnos.njk. Pasos numerados, chips grandes (44 px+),
   una sola columna en el celular.
   --------------------------------------------------------- */
.tw { max-width: 760px; margin: 10px auto 0; padding: 28px; background: rgba(11, 22, 42, 0.72);
  border: 1px solid var(--drcar-border-gold); border-radius: 10px; color: var(--drcar-text-light); text-align: left; }
.tw-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.tw-tit { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: calc(19px * var(--k, 1)); color: var(--drcar-text-light); }
.tw-tit span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--drcar-gold); color: var(--drcar-gold); font-size: calc(14px * var(--k, 1)); font-weight: 700; flex-shrink: 0; }
.tw-chips, .tw-horas { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tw-chip, .tw-hora, .tw-dia { min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent; color: var(--drcar-text-light); font-size: calc(15px * var(--k, 1)); cursor: pointer; transition: border-color .15s, background .15s; }
.tw-chip:hover, .tw-hora:hover:not(:disabled), .tw-dia:hover { border-color: var(--drcar-gold); }
.tw-chip.on, .tw-hora.on, .tw-dia.on { background: var(--drcar-gold); border-color: var(--drcar-gold); color: #0b162a; font-weight: 700; }
.tw-chip:focus-visible, .tw-hora:focus-visible, .tw-dia:focus-visible { outline: 2px solid var(--drcar-gold); outline-offset: 2px; }
.tw-hora { min-width: 84px; font-variant-numeric: tabular-nums; }
.tw-hora:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.tw-dia { flex: 0 0 auto; width: 66px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; line-height: 1.15; scroll-snap-align: start; }
.tw-dia b { font-size: calc(22px * var(--k, 1)); }
.tw-dia small { font-size: calc(12px * var(--k, 1)); text-transform: capitalize; opacity: .85; }
.tw-ayuda, .tw-cargando { margin: 0; color: var(--drcar-text-dim); font-size: calc(15px * var(--k, 1)); }
.tw-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tw-ancho { grid-column: 1 / -1; }
.tw-campo { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: calc(14px * var(--k, 1)); font-weight: 600; color: var(--drcar-text-dim); }
.tw-campo small { font-weight: 400; color: var(--drcar-text-faint); }
.tw-campo input, .tw-campo textarea { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: var(--drcar-text-light); font-size: calc(16px * var(--k, 1)); font-weight: 400; }
.tw-campo input:focus, .tw-campo textarea:focus { outline: none; border-color: var(--drcar-gold); }
.tw-check { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: calc(14px * var(--k, 1)); font-weight: 400; color: var(--drcar-text-dim); cursor: pointer; }
.tw-check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--drcar-gold); }
.tw-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tw-resumen { margin: 24px 0 0; font-size: calc(16px * var(--k, 1)); color: var(--drcar-gold); min-height: 1em; }
.tw-msg { margin: 10px 0 0; color: #ff8a8a; font-size: calc(15px * var(--k, 1)); }
.tw-msg:empty { display: none; }
.tw .tw-enviar { margin-top: 18px; width: 100%; min-height: 52px; }
.tw-listo { text-align: center; }
.tw-listo h3 { color: var(--drcar-gold); margin-top: 0; }
.tw-listo p { color: var(--drcar-text-dim); font-size: calc(17px * var(--k, 1)); }
.tw-listo:focus { outline: none; }
@media (max-width: 600px) {
  .tw { padding: 18px 14px; border-radius: 8px; }
  .tw-campos { grid-template-columns: 1fr; }
  .tw-chip { flex: 1 1 calc(50% - 8px); }
  .tw-hora { flex: 1 1 calc(33% - 8px); min-width: 0; }
}

/* ---------------------------------------------------------
   Servicios legales (2026-10-05) — índice (practice.njk, modelo
   «Índice 1») y página de cada rama (layouts/derecho.njk, modelo
   «Rama 1»). Fondo negro y Playfair como el resto del sitio; el
   texto corrido en sans para que se lea bien. Prefijo .sv-
   --------------------------------------------------------- */
.sv { --sv-oro: #bea34d; --sv-oro-2: #d4bb6a; --sv-txt: #f0f4f8; --sv-mut: #b9c0cb; --sv-card: #0c0f14; --sv-linea: rgba(190, 163, 77, 0.25);
  background: #000; color: var(--sv-txt); font-family: var(--f-txt, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-size: calc(16px * var(--k, 1)); line-height: 1.6; padding-bottom: 72px; }
.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }
.sv [hidden] { display: none !important; }
.sv-ancho { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.sv-bloque { padding-top: 72px; }
.sv-h2, .sv-card-tit, .sv-area-tit, .sv-contacto h3, .sv-num, .sv-sit summary span, .sv-paso h4 { font-family: var(--f-tit, "Playfair Display", Georgia, serif); }
.sv-h2 { font-size: calc(34px * var(--k, 1)); font-weight: 400; line-height: 1.3; color: aliceblue; margin: 0 0 8px; }
.sv-centro { text-align: center; }
.sv-eb { font-size: calc(12px * var(--k, 1)); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-oro); margin-bottom: 10px; }
.sv a { color: var(--sv-oro-2); }
.sv a:hover, .sv a:focus { color: #e6cf86; text-decoration: none; }
.sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 30px; font-size: calc(15px * var(--k, 1)); font-weight: 600;
  white-space: nowrap; cursor: pointer; font-family: inherit; text-decoration: none; transition: background .15s, border-color .15s; }
.sv-btn-p, .sv a.sv-btn-p { background: var(--sv-oro); color: #000; border: 0; }
.sv-btn-p:hover, .sv a.sv-btn-p:hover { background: var(--sv-oro-2); color: #000; }
.sv-btn-s, .sv a.sv-btn-s { background: transparent; border: 1.5px solid rgba(190, 163, 77, .7); color: var(--sv-txt); }
.sv-btn-s:hover, .sv a.sv-btn-s:hover { border-color: var(--sv-oro-2); color: #fff; }
.sv-btn-negro, .sv a.sv-btn-negro { background: #000; color: var(--sv-txt); border: 0; }
.sv a.sv-btn-negro:hover { background: #1a1a1a; color: #fff; }
.sv-btn:focus-visible, .sv-vermas:focus-visible, .sv-tab:focus-visible, .sv-area:focus-visible, .sv-sit summary:focus-visible { outline: 2px solid var(--sv-oro-2); outline-offset: 3px; }
.sv-num { font-size: calc(30px * var(--k, 1)); line-height: 1; color: rgba(190, 163, 77, .75); }

/* ---- Índice ---- */
.sv-indice { padding-top: 48px; }
.sv-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.sv-area { display: flex; flex-direction: column; background: var(--sv-card); border: 1px solid var(--sv-linea); border-radius: 8px; overflow: hidden; color: var(--sv-txt) !important; transition: border-color .15s, transform .15s; }
.sv-area:hover { border-color: rgba(190, 163, 77, .75); transform: translateY(-2px); }
.sv-area img { display: block; width: 100%; height: 190px; object-fit: cover; }
.sv-area-txt { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; flex-grow: 1; }
.sv-area-tit { font-size: calc(22px * var(--k, 1)); font-weight: 700; line-height: 1.25; color: var(--sv-txt); }
.sv-area-res { font-size: calc(15px * var(--k, 1)); line-height: 1.55; color: var(--sv-mut); flex-grow: 1; }
.sv-area-ver { font-size: calc(15px * var(--k, 1)); font-weight: 600; color: var(--sv-oro-2); display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 28px; }
.sv-contacto { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 32px; border-radius: 8px; background: var(--sv-card); border: 1px solid rgba(190, 163, 77, .55); }
.sv-contacto h3 { font-size: calc(27px * var(--k, 1)); font-weight: 700; line-height: 1.2; margin: 12px 0 0; color: var(--sv-txt); }
.sv-contacto p { font-size: calc(15.5px * var(--k, 1)); line-height: 1.6; margin: 10px 0 0; color: var(--sv-mut); }
.sv-contacto-eb { display: flex; align-items: center; gap: 10px; font-size: calc(12px * var(--k, 1)); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sv-oro); }
.sv-contacto .sv-btn { align-self: flex-start; }
.sv-contacto-oro { background: var(--sv-oro); border-color: var(--sv-oro); }
.sv-contacto-oro h3, .sv-contacto-oro .sv-contacto-eb { color: #000; }
.sv-contacto-oro p { color: #1a1a1a; }

/* ---- Página de rama ---- */
.sv-hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; }
.sv-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-hero-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.85) 50%, rgba(0,0,0,.3) 100%); }
.sv-hero-in { position: relative; width: 100%; padding-top: 64px; padding-bottom: 64px; }
.sv-hero-in > * { max-width: 720px; }
.sv-intro { font-size: calc(17px * var(--k, 1)); line-height: 1.7; margin: 18px 0 0; color: #e3e8ee; }
.sv-intro-mas .sv-intro { margin-top: 12px; }
.sv-vermas { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; margin-top: 4px; background: none; border: 0; color: var(--sv-oro-2); font: 600 15px system-ui, sans-serif; cursor: pointer; }
.sv-vermas svg { transition: transform .15s; }
.sv-vermas.abierto svg { transform: rotate(180deg); }
.sv-vermas [data-sv-txt-menos], .sv-vermas.abierto [data-sv-txt-mas] { display: none; }
.sv-vermas.abierto [data-sv-txt-menos] { display: inline; }
.sv-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.sv-sit { margin-top: 16px; max-width: 980px; border-bottom: 1px solid var(--sv-linea); }
.sv-sit-item { border-top: 1px solid var(--sv-linea); }
.sv-sit summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; color: var(--sv-txt); }
.sv-sit summary::-webkit-details-marker { display: none; }
.sv-sit summary span { font-size: calc(22px * var(--k, 1)); line-height: 1.3; }
.sv-sit summary svg { color: var(--sv-oro); flex-shrink: 0; transition: transform .15s; }
.sv-sit-item[open] summary svg { transform: rotate(180deg); }
.sv-sit-cuerpo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 22px; }
.sv-sit-cuerpo p { margin: 0; max-width: 640px; color: var(--sv-mut); font-size: calc(16px * var(--k, 1)); line-height: 1.65; }
.sv-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.sv-tab { min-height: 44px; padding: 0 20px; border-radius: 30px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #d3d8e0; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.sv-tab.on { background: var(--sv-oro); border-color: var(--sv-oro); color: #000; }
.sv-grupo-tit { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(24px * var(--k, 1)); font-weight: 400; color: aliceblue; margin: 28px 0 0; }
.sv-esp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.sv-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 20px; border-radius: 8px; background: var(--sv-card); border: 1px solid rgba(190, 163, 77, .22); }
.sv-card-tit { font-size: calc(21px * var(--k, 1)); font-weight: 700; line-height: 1.3; margin: 0; color: var(--sv-txt); }
.sv-card-txt { font-size: calc(15px * var(--k, 1)); line-height: 1.6; margin: 0; color: var(--sv-mut); flex-grow: 1; overflow-wrap: anywhere; }
.sv-card-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: calc(14px * var(--k, 1)); font-weight: 600; }
.sv-esp-mas { display: flex; justify-content: center; margin-top: 22px; }
.sv-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 20px; }
.sv-paso { border-top: 1px solid var(--sv-linea); padding-top: 18px; }
.sv-paso .sv-num { font-size: calc(38px * var(--k, 1)); color: var(--sv-oro); }
.sv-paso h4 { font-size: calc(19px * var(--k, 1)); margin: 10px 0 0; color: var(--sv-txt); }
.sv-paso p { font-size: calc(15px * var(--k, 1)); line-height: 1.6; margin: 6px 0 0; color: var(--sv-mut); }
.sv-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 44px; border-radius: 8px; border: 1px solid rgba(190, 163, 77, .45); }
.sv-cta p { margin: 6px 0 0; color: var(--sv-mut); }
.sv-cta .sv-ctas { margin-top: 0; }

@media (max-width: 991px) {
  .sv-grilla, .sv-esp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-pasos { grid-template-columns: 1fr; gap: 18px; }
  .sv-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .sv-ancho { padding: 0 16px; }
  .sv-bloque { padding-top: 44px; }
  .sv-h2 { font-size: calc(26px * var(--k, 1)); }
  .sv-intro { font-size: calc(16px * var(--k, 1)); }
  .sv-hero { min-height: 0; display: block; }
  .sv-hero-foto { position: static; height: 220px; }
  .sv-hero-velo { display: none; }
  .sv-hero-in { padding-top: 16px; padding-bottom: 8px; }
  .sv-ctas { flex-direction: column; }
  .sv-ctas .sv-btn { width: 100%; }
  .sv-grilla, .sv-esp { grid-template-columns: 1fr; gap: 12px; }
  .sv-area { flex-direction: row; min-height: 112px; }
  .sv-area img { width: 112px; height: auto; min-height: 112px; flex-shrink: 0; }
  .sv-area-txt { padding: 14px; justify-content: center; }
  .sv-area-tit { font-size: calc(17px * var(--k, 1)); }
  .sv-area-res { display: none; }
  .sv-contacto { padding: 24px; }
  .sv-contacto .sv-btn { align-self: stretch; }
  .sv-sit summary span { font-size: calc(19px * var(--k, 1)); }
  .sv-sit-cuerpo { flex-direction: column; align-items: stretch; }
  .sv-card { padding: 18px; }
  .sv-cta { padding: 24px 20px; }
  .sv-cta .sv-ctas { width: 100%; }
}

/* ---------------------------------------------------------
   PLACA (2026-10-05) — estándar visual de los títulos del sitio
   (modelo D del lienzo, «Rama — título y botón volver»): marco
   dorado doble, fondo negro translúcido, bajada «Estudio Dr. CAR
   y Asoc.» y título en Playfair. Por ahora en Servicios legales
   (practice.njk y layouts/derecho.njk).
   Uso:  <div class="placa"><div class="placa-in">
           <div class="placa-eb">Estudio Dr. CAR y Asoc.</div>
           <h1 class="placa-tit">Título</h1>
           <p class="placa-sub">Bajada opcional</p>
         </div></div>
   + .btn-volver para volver a la página madre.
   --------------------------------------------------------- */
.placa { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 5px; border: 1px solid #bea34d; background: rgba(0, 0, 0, .78); }
.placa-in { box-sizing: border-box; padding: 28px 36px; border: 1px solid rgba(190, 163, 77, .55); text-align: center; }
.placa-eb { font-family: var(--f-txt, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-size: calc(12px * var(--k, 1)); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #bea34d; line-height: 1.4; }
.placa .placa-tit { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(44px * var(--k, 1)); font-weight: 400; line-height: 1.15; margin: 10px 0 0; color: #fff; text-transform: none; letter-spacing: 0; }
.placa .placa-sub { font-family: var(--f-txt, "Playfair Display", Georgia, serif); font-size: calc(19px * var(--k, 1)); line-height: 1.5; margin: 12px 0 0; color: #f0f4f8; }
.placa .placa-sub a { color: #d4bb6a; }
.btn-volver, a.btn-volver { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 4px; background: #bea34d; color: #000;
  font-family: var(--f-txt, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-size: calc(14px * var(--k, 1)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
a.btn-volver:hover, a.btn-volver:focus { background: #d4bb6a; color: #000; text-decoration: none; }
a.btn-volver:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sv-hero-in > .sv-placa { display: block; max-width: 780px; margin-top: 24px; }
@media (max-width: 600px) {
  .placa-in { padding: 18px 16px; }
  .placa .placa-tit { font-size: calc(28px * var(--k, 1)); }
  .placa .placa-sub { font-size: calc(16px * var(--k, 1)); }
  .sv-placa { margin-top: 16px; }
}

/* En las portadas con flexslider de la plantilla, el tema pone los h1 en mayúscula y negrita: la placa manda */
#colorlib-hero .flexslider .slider-text > .slider-text-inner .placa h1.placa-tit { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(44px * var(--k, 1)); font-weight: 400; line-height: 1.15; letter-spacing: 0; text-transform: none; margin: 10px 0 0; color: #fff; }
#colorlib-hero .flexslider .slider-text > .slider-text-inner .placa p.placa-sub { font-size: calc(19px * var(--k, 1)); line-height: 1.5; margin: 12px 0 0; color: #f0f4f8; }
@media (max-width: 600px) { #colorlib-hero .flexslider .slider-text > .slider-text-inner .placa h1.placa-tit { font-size: calc(28px * var(--k, 1)); } #colorlib-hero .flexslider .slider-text > .slider-text-inner .placa p.placa-sub { font-size: calc(16px * var(--k, 1)); } }
/* Portada de Equipo Jurídico (#equipo-hero): el h1 de style.css va en mayúscula y negrita; la placa manda */
#equipo-hero .placa h1.placa-tit { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(44px * var(--k, 1)); font-weight: 400; line-height: 1.15; letter-spacing: 0; text-transform: none; margin: 10px 0 0; color: #fff; }
#colorlib-hero .slider-text-inner > .placa { max-width: 780px; }
@media (max-width: 600px) { #equipo-hero .placa h1.placa-tit { font-size: calc(28px * var(--k, 1)); } #equipo-hero { height: auto; min-height: 300px; } }

/* ---------------------------------------------------------
   Equipo Jurídico, Consultas y Turnos con la estética de Servicios
   (2026-10-05). Usan el mismo envoltorio .sv (fondo negro, oro,
   Playfair en títulos, sans en el texto corrido) y suman:
   .cs-* → Consultas (y la bajada de Turnos) · .eq-* → Equipo
   .sv .tw → el formulario de Turnos (ids y clases tw-* intactos)
   --------------------------------------------------------- */
.sv-eb.sv-centro { text-align: center; }
.sv .sv-bloque > .sv-h2.sv-centro { margin-bottom: 0; }
.cs-bajada { max-width: 760px; margin: 14px auto 0; text-align: center; font-size: calc(17px * var(--k, 1)); line-height: 1.7; color: var(--sv-mut); }

/* Consultas: tarjetas de planes */
.cs-grilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1040px; margin: 32px auto 0; }
.cs-plan { position: relative; gap: 12px; padding: 30px 30px 26px; }
.cs-plan .sv-card-tit { font-size: calc(24px * var(--k, 1)); font-weight: 400; }
.cs-plan .sv-card-txt { flex-grow: 0; }
.cs-dest { border: 1.5px solid var(--sv-oro); box-shadow: 0 0 0 4px rgba(190, 163, 77, .08); }
.cs-cinta { position: absolute; top: -13px; left: 30px; padding: 4px 12px; border-radius: 4px; background: var(--sv-oro); color: #000;
  font-size: calc(11.5px * var(--k, 1)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
.cs-icono { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(190, 163, 77, .55); color: var(--sv-oro); font-size: calc(18px * var(--k, 1)); }
.cs-precio { align-self: flex-start; padding: 6px 14px; border-radius: 4px; background: var(--sv-oro); color: #000; font-size: calc(15px * var(--k, 1)); font-weight: 700; letter-spacing: .02em; }
.cs-precio-libre { background: transparent; color: var(--sv-oro-2); border: 1px solid var(--sv-oro); letter-spacing: .12em; }
.cs-meta { margin: 0; font-size: calc(14.5px * var(--k, 1)); color: var(--sv-mut); }
.cs-meta b { color: var(--sv-txt); font-weight: 600; }
.cs-lista { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--sv-linea); display: flex; flex-direction: column; gap: 9px; flex-grow: 1; }
.cs-lista li { position: relative; padding-left: 24px; font-size: calc(15px * var(--k, 1)); line-height: 1.55; color: #d6dbe2; }
.cs-lista li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--sv-oro); border-bottom: 2px solid var(--sv-oro); transform: rotate(-45deg); }
.cs-btn { align-self: flex-start; margin-top: 10px; }
.cs-abonos { margin-top: 32px; }
.sv .sv-cta .sv-h2 { font-size: calc(28px * var(--k, 1)); }

/* Equipo */
.eq-intro { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: center; }
.eq-escudo { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.eq-txt { margin: 12px 0 0; font-size: calc(17px * var(--k, 1)); line-height: 1.75; color: #d6dbe2; }
.eq-lema { margin: 8px 0 0; font-family: var(--f-txt, "Playfair Display", Georgia, serif); font-style: italic; font-size: calc(18px * var(--k, 1)); color: var(--sv-mut); }
.eq-ficha { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; margin: 32px auto 0; max-width: 1080px; padding: 32px;
  background: var(--sv-card); border: 1px solid rgba(190, 163, 77, .3); border-radius: 8px; }
.eq-foto-col { display: flex; flex-direction: column; gap: 16px; }
.eq-foto { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: 6px; border: 1px solid rgba(190, 163, 77, .45); background: #111; }
.eq-colegios { display: flex; gap: 10px; }
.eq-colegios img { flex: 1 1 0; min-width: 0; height: 64px; object-fit: contain; padding: 6px; background: #fff; border-radius: 4px; }
.eq-ficha-txt { min-width: 0; }
.eq-nombre { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(30px * var(--k, 1)); font-weight: 400; line-height: 1.2; color: var(--sv-txt); margin: 0 0 16px; }
.eq-ficha-txt p { font-size: calc(16px * var(--k, 1)); line-height: 1.7; color: #d6dbe2; margin: 0 0 14px; }
.eq-redes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.sv .eq-redes a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(190, 163, 77, .6); color: var(--sv-oro-2); font-size: calc(18px * var(--k, 1)); transition: background .15s, color .15s; }
.sv .eq-redes a:hover, .sv .eq-redes a:focus { background: var(--sv-oro); color: #000; }
.eq-red { flex-direction: column; align-items: center; text-align: center; gap: 0; }
.eq-red .sv-h2 { max-width: 760px; }
.eq-red > p { max-width: 720px; margin: 8px 0 0; }
.eq-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; padding: 0; }
.eq-chips li { padding: 8px 16px; border: 1px solid rgba(190, 163, 77, .55); border-radius: 30px; font-size: calc(14px * var(--k, 1)); font-weight: 600; color: var(--sv-txt); }
.eq-red-btn { margin-top: 28px; white-space: normal; text-align: center; }

/* Turnos: el formulario dentro de .sv */
.sv .tw { max-width: 820px; margin: 32px auto 0; padding: 32px; background: var(--sv-card); border: 1px solid rgba(190, 163, 77, .35); border-radius: 8px; font-family: inherit; }
.sv .tw-tit { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(21px * var(--k, 1)); font-weight: 400; color: var(--sv-txt); }
.sv .tw-tit span { font-family: var(--f-tit, "Playfair Display", Georgia, serif); width: 32px; height: 32px; font-size: calc(16px * var(--k, 1)); }
.sv .tw-pasos { gap: 30px; }
.sv .tw-paso + .tw-paso { border-top: 1px solid var(--sv-linea); padding-top: 26px; }
.sv .tw-chip, .sv .tw-hora, .sv .tw-dia { font-family: inherit; border-radius: 30px; }
.sv .tw-dia { border-radius: 8px; }
.sv .tw-chip.on, .sv .tw-hora.on, .sv .tw-dia.on { color: #000; }
.sv .tw-campo { color: var(--sv-mut); }
.sv .tw-campo input, .sv .tw-campo textarea { font-size: calc(16px * var(--k, 1)); font-family: inherit; }
.sv .tw .tw-enviar { width: 100%; min-height: 52px; margin-top: 20px; font-size: calc(16px * var(--k, 1)); }
.sv .tw .tw-enviar:disabled { opacity: .6; cursor: wait; }
.sv .tw-listo h3 { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(28px * var(--k, 1)); font-weight: 400; color: var(--sv-oro-2); }

@media (max-width: 991px) {
  .eq-ficha { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .cs-bajada { font-size: calc(16px * var(--k, 1)); }
  .cs-grilla-2 { grid-template-columns: 1fr; gap: 28px; }
  .cs-plan { padding: 26px 18px 20px; }
  .cs-btn { align-self: stretch; }
  .sv .sv-cta .sv-h2 { font-size: calc(23px * var(--k, 1)); }
  .eq-intro { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .eq-escudo { max-width: 150px; }
  .eq-txt { text-align: left; font-size: calc(16px * var(--k, 1)); }
  .eq-ficha { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .eq-foto { aspect-ratio: 1 / 1; }
  .eq-nombre { font-size: calc(25px * var(--k, 1)); }
  .eq-red-btn { width: 100%; }
  .sv .tw { padding: 20px 16px; }
}

/* ---------------------------------------------------------
   Formulario y pie (2026-10-05), modelos «B» del lienzo. En todas
   las páginas públicas (partials/quick-contact-form.njk y footer.njk).
   .cf-*  → formulario: foto de la oficina + formulario en la placa
   .pie-* → pie: tarjetas de contacto + marca, menú y especialidades
   --------------------------------------------------------- */
.cf { --oro: #bea34d; --oro-2: #d4bb6a; display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; background: #000; color: #f0f4f8;
  font-family: var(--f-txt, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); border-top: 1px solid rgba(190, 163, 77, .25); }
.cf *, .cf *::before, .cf *::after { box-sizing: border-box; }
.cf-foto { position: relative; overflow: hidden; }
.cf-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.cf-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.85)); }
.cf-lado { position: relative; display: flex; align-items: center; padding: 72px 72px 72px 0; margin-left: -120px; }
.cf-placa { display: block; width: 100%; max-width: 760px; background: #000; }
.cf-placa .placa-in { text-align: left; padding: 36px 40px; }
.cf-placa .placa-eb { text-align: center; }
.cf .cf-tit { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(32px * var(--k, 1)); font-weight: 400; line-height: 1.25; color: #fff; text-align: center; text-transform: none; letter-spacing: 0; margin: 10px 0 26px; }
.cf-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.cf-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf .cf-campo { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: calc(13.5px * var(--k, 1)); font-weight: 600; color: #b9c0cb; }
.cf-campo small { font-weight: 400; color: #8a93a0; }
.cf .cf-campo input, .cf .cf-campo textarea { width: 100%; min-height: 48px; margin: 0; padding: 11px 14px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .18);
  background: #14181f; color: #f0f4f8; font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: none; }
.cf .cf-campo textarea { min-height: 120px; resize: vertical; }
.cf .cf-campo input::placeholder, .cf .cf-campo textarea::placeholder { color: #6b7480; }
.cf .cf-campo input:focus, .cf .cf-campo textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(190, 163, 77, .2); }
.cf-enviar { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; margin-top: 6px; border: 0; border-radius: 30px;
  background: var(--oro); color: #000; font: 600 15px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; }
.cf-enviar:hover { background: var(--oro-2); }
.cf-enviar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cf-enviar:disabled { opacity: .6; cursor: wait; }
.cf-estado { margin: 0; font-size: calc(15px * var(--k, 1)); line-height: 1.5; color: #b9c0cb; }
.cf-estado:empty { display: none; }
/* Campo trampa contra bots (tarea 36): fuera de la vista, no display:none (algunos bots lo saltean) */
.cf-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-estado.cf-ok { padding: 12px 14px; border-left: 3px solid var(--oro); background: rgba(190, 163, 77, .1); color: #f0f4f8; }
.cf-estado.cf-error { padding: 12px 14px; border-left: 3px solid #e57373; background: rgba(229, 115, 115, .1); color: #ffd2d2; }

.pie { --oro: #bea34d; --oro-2: #d4bb6a; background: #000; color: #f0f4f8; border-top: 1px solid rgba(190, 163, 77, .45); padding: 0;
  font-family: var(--f-txt, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-size: calc(15px * var(--k, 1)); line-height: 1.5; }
.pie *, .pie *::before, .pie *::after { box-sizing: border-box; }
.pie a { color: #b9c0cb; text-decoration: none; }
.pie a:hover, .pie a:focus { color: var(--oro-2); text-decoration: none; }
.pie a:focus-visible { outline: 2px solid var(--oro-2); outline-offset: 2px; }
.pie-ancho { max-width: 1440px; margin: 0 auto; padding: 0 72px; }
.pie > .pie-ancho { padding-top: 64px; padding-bottom: 52px; }
.pie-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pie a.pie-tarjeta { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: #0c0f14; border: 1px solid rgba(190, 163, 77, .35); border-radius: 8px; color: #f0f4f8; transition: border-color .15s; }
.pie a.pie-tarjeta:hover { border-color: var(--oro); color: #f0f4f8; }
.pie-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--oro); color: #000; font-size: calc(20px * var(--k, 1)); flex-shrink: 0; }
.pie-tarjeta small { display: block; font-size: calc(12px * var(--k, 1)); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.pie-tarjeta b { display: block; margin-top: 4px; font-family: var(--f-txt, "Playfair Display", Georgia, serif); font-size: calc(22px * var(--k, 1)); font-weight: 400; color: #f0f4f8; }
.pie-tarjeta b + span { display: block; margin-top: 4px; font-size: calc(13.5px * var(--k, 1)); color: #8a93a0; }
.pie-medio { display: grid; grid-template-columns: 1.2fr .7fr 2fr; gap: 48px; margin-top: 56px; }
.pie-marca-fila { display: flex; align-items: center; gap: 14px; }
.pie-marca-fila img { width: 64px; height: 64px; flex-shrink: 0; }
.pie-nombre { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(20px * var(--k, 1)); color: #f0f4f8; }
.pie a.pie-mail { font-size: calc(13.5px * var(--k, 1)); color: #8a93a0; overflow-wrap: anywhere; }
.pie-blurb { margin: 16px 0 0; font-size: calc(14px * var(--k, 1)); line-height: 1.65; color: #8a93a0; max-width: 360px; }
.pie-redes { display: flex; gap: 10px; margin-top: 18px; }
.pie .pie-redes a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(190, 163, 77, .6); color: var(--oro-2); font-size: calc(18px * var(--k, 1)); }
.pie .pie-redes a:hover { background: var(--oro); color: #000; }
.pie .pie-h { font-family: var(--f-txt, "Playfair Display", Georgia, serif); font-size: calc(19px * var(--k, 1)); font-weight: 400; color: #f0f4f8; margin: 0 0 14px; text-transform: none; letter-spacing: 0; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pie ul.pie-esp { display: block; columns: 2; column-gap: 28px; }
.pie ul.pie-esp li { break-inside: avoid; margin-bottom: 9px; }
.pie li { margin: 0; padding: 0; }
.pie li a { font-size: calc(14.5px * var(--k, 1)); }
.pie-bajo { border-top: 1px solid rgba(255, 255, 255, .08); }
.pie-bajo .pie-ancho { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 18px; font-size: calc(13px * var(--k, 1)); color: #7f8a9c; }
.pie .pie-bajo a { color: #9aa3ae; text-decoration: underline; }

@media (max-width: 991px) {
  .cf-lado { padding: 56px 32px 56px 0; margin-left: -80px; }
  .cf-placa .placa-in { padding: 28px 24px; }
  .pie-ancho { padding: 0 32px; }
  .pie-tarjetas { grid-template-columns: 1fr; gap: 12px; }
  .pie-medio { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .cf { display: block; min-height: 0; }
  .cf-foto { height: 220px; }
  .cf-foto::after { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85)); }
  .cf-lado { display: block; margin: -48px 0 0; padding: 0 16px 48px; }
  .cf-placa .placa-in { padding: 20px 16px; }
  .cf .cf-tit { font-size: calc(24px * var(--k, 1)); margin-bottom: 20px; }
  .cf-fila { grid-template-columns: 1fr; }
  .cf-enviar { align-self: stretch; }
  .pie-ancho { padding: 0 16px; }
  .pie > .pie-ancho { padding-top: 40px; padding-bottom: 32px; }
  .pie-medio { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .pie ul.pie-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .pie ul.pie-esp { columns: 1; }
  .pie ul.pie-esp li { margin-bottom: 0; }
  .pie li a { display: flex; align-items: center; min-height: 44px; font-size: calc(15px * var(--k, 1)); }
  .pie a.pie-mail { display: inline-flex; align-items: center; min-height: 44px; }
  .pie-bajo .pie-ancho { flex-direction: column; gap: 6px; }
}

/* ---------------------------------------------------------
   Header (2026-10-05), modelo «B» del lienzo. partials/nav.njk.
   Barra negra fija (se achica al bajar: .cab-chico), mega menú de
   Servicios con fotos (≥ 1200 px) y menú a pantalla completa en
   celular y tablet (< 1200 px). Prefijo .cab-
   --------------------------------------------------------- */
/* #page tenía overflow-x: hidden (plantilla), que impide la barra fija; clip recorta igual sin romperla */
@supports (overflow: clip) { #page { overflow-x: clip; } }
.cab { --oro: #bea34d; --oro-2: #d4bb6a; position: sticky; top: 0; z-index: 1000; background: #000; border-bottom: 1px solid rgba(190, 163, 77, .3);
  font-family: var(--f-txt, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); }
.cab *, .cab-menu *, .cab *::before, .cab *::after { box-sizing: border-box; }
.cab ul, .cab-menu ul { list-style: none; margin: 0; padding: 0; }
.cab-barra { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; padding: 0 40px; max-width: 1600px; margin: 0 auto; transition: height .2s; }
.cab-chico .cab-barra { height: 60px; }
.cab-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.cab-marca img { width: 52px; height: 52px; transition: width .2s, height .2s; }
.cab-chico .cab-marca img { width: 40px; height: 40px; }
.cab-marca-txt b { display: block; font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-weight: 400; font-size: 20px; line-height: 1.15; color: #f0f4f8; }
.cab-marca-txt b + b { color: var(--oro-2); }
.cab-marca:hover, .cab-marca:focus { text-decoration: none; }
.cab-nav { margin-left: auto; }
.cab-nav > ul { display: flex; align-items: center; gap: 26px; }
.cab-nav > ul > li { display: flex; align-items: center; }
/* El mega menú va dentro del ítem Servicios (orden de tabulación) pero se ubica respecto de toda la barra */
.cab-nav > ul > li.cab-serv { position: static; }
.cab-nav > ul > li > a { position: relative; display: inline-flex; align-items: center; height: 44px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #d6dbe2; text-decoration: none; }
.cab-nav > ul > li > a:hover, .cab-nav > ul > li > a:focus { color: var(--oro-2); text-decoration: none; }
.cab-nav > ul > li > a.on { color: var(--oro-2); }
.cab-nav > ul > li > a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--oro); }
.cab-serv-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 44px; margin-left: 2px; padding: 0; border: 0; background: none; color: #d6dbe2; cursor: pointer; }
.cab-serv-btn svg { transition: transform .15s; }
.cab-serv.abierto .cab-serv-btn { color: var(--oro-2); }
.cab-serv.abierto .cab-serv-btn svg { transform: rotate(180deg); }
.cab-turno { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; border-radius: 30px; background: var(--oro); color: #000;
  font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; flex-shrink: 0; }
.cab-turno:hover, .cab-turno:focus { background: var(--oro-2); color: #000; text-decoration: none; }
.cab a:focus-visible, .cab button:focus-visible, .cab-menu a:focus-visible, .cab-menu button:focus-visible { outline: 2px solid var(--oro-2); outline-offset: 3px; }
.cab-ham { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #f0f4f8; cursor: pointer; flex-shrink: 0; }
.cab-eb { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }

/* Mega menú */
.cab-mega { position: absolute; left: 0; right: 0; top: 100%; background: #050608; border-top: 1px solid rgba(190, 163, 77, .25); border-bottom: 1px solid rgba(190, 163, 77, .45); box-shadow: 0 30px 60px rgba(0, 0, 0, .7); }
.cab-mega[hidden] { display: none; }
.cab-mega-in { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px; max-width: 1600px; margin: 0 auto; padding: 28px 40px 32px; }
.cab .cab-mega-tit { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: 28px; line-height: 1.2; color: #f0f4f8; margin: 10px 0 0; }
.cab .cab-mega-txt { font-size: 14px; line-height: 1.6; color: #8a93a0; margin: 12px 0 18px; }
.cab-vertodos { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--oro-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.cab-vertodos:hover, .cab-vertodos:focus { color: #e6cf86; text-decoration: none; }
.cab-mega-grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cab-rama { display: flex; flex-direction: column; height: 100%; background: #0c0f14; border: 1px solid rgba(190, 163, 77, .25); border-radius: 8px; overflow: hidden; text-decoration: none; transition: border-color .15s, transform .15s; }
.cab-rama:hover, .cab-rama:focus, .cab-rama.on { border-color: var(--oro); text-decoration: none; }
.cab-rama:hover { transform: translateY(-2px); }
.cab-rama img { display: block; width: 100%; height: 92px; object-fit: cover; background: #14181f; }
.cab-rama span { padding: 10px 12px 12px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #f0f4f8; }
.cab-rama-turno { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; height: 100%; min-height: 150px; padding: 14px; border-radius: 8px; background: var(--oro); color: #000; text-decoration: none; }
.cab-rama-turno:hover, .cab-rama-turno:focus { background: var(--oro-2); color: #000; text-decoration: none; }
.cab-rama-turno small { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cab-rama-turno span { font-family: var(--f-txt, "Playfair Display", Georgia, serif); font-size: 20px; line-height: 1.2; }
.cab-rama-turno b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* Menú de celular / tablet */
.cab-menu { --oro: #bea34d; --oro-2: #d4bb6a; position: fixed; inset: 0; z-index: 100000; overflow-y: auto; overscroll-behavior: contain; background: #000; color: #f0f4f8;
  font-family: var(--f-txt, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); }
.cab-menu[hidden] { display: none; }
html.cab-bloq, html.cab-bloq body { overflow: hidden; }
.cab-menu-barra { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 16px; background: #000; border-bottom: 1px solid rgba(190, 163, 77, .3); }
.cab-menu-barra .cab-ham { display: inline-flex; }
.cab-menu-barra > a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.cab-menu-barra img { display: block; width: 40px; height: 40px; }
.cab-hueco { width: 44px; }
.cab-menu-cuerpo { max-width: 640px; margin: 0 auto; padding: 18px 16px 32px; }
.cab-menu-ramas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cab-menu-ramas a { position: relative; display: block; height: 92px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(190, 163, 77, .25); background: #14181f; text-decoration: none; }
.cab-menu-ramas a.on { border-color: var(--oro); }
.cab-menu-ramas img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cab-menu-ramas a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.85)); }
.cab-menu-ramas span { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #fff; }
.cab-menu-ramas a.cab-menu-todos { display: flex; flex-direction: column; justify-content: center; padding: 10px; background: none; border: 1px dashed rgba(190, 163, 77, .6); }
.cab-menu-ramas a.cab-menu-todos::after { display: none; }
.cab-menu-todos b { font-size: 13.5px; color: var(--oro-2); }
.cab-menu-todos small { font-size: 12px; color: #8a93a0; }
.cab-menu-links { margin-top: 18px; }
.cab-menu-links a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 17px; color: #f0f4f8; text-decoration: none; }
.cab-menu-links a svg { color: #6b7480; }
.cab-menu-links a.on { color: var(--oro-2); }
.cab-menu-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.cab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 10px; border-radius: 30px; font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cab-btn-p { background: var(--oro); color: #000; }
.cab-btn-s { border: 1.5px solid rgba(190, 163, 77, .7); color: #f0f4f8; }
.cab-btn-p:hover, .cab-btn-p:focus { color: #000; text-decoration: none; }
.cab-btn-s:hover, .cab-btn-s:focus { color: #fff; text-decoration: none; }
.cab-menu-urg { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 8px; font-size: 14px; color: #b9c0cb; text-decoration: none; }
.cab-menu-urg b { color: #f0f4f8; }

@media (max-width: 1199px) {
  .cab-barra { height: 60px; padding: 0 16px; }
  .cab-ham { display: inline-flex; }
  .cab-nav, .cab-mega { display: none !important; }
  .cab-marca { position: absolute; left: 50%; transform: translateX(-50%); }
  .cab-marca img, .cab-chico .cab-marca img { width: 40px; height: 40px; }
  .cab-marca-txt { display: none; }
  .cab-turno { width: 44px; padding: 0; border-radius: 50%; }
  .cab-turno span { display: none; }
  .cab-barra { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  .cab-barra, .cab-marca img, .cab-rama { transition: none; }
}

/* ---------------------------------------------------------
   Inicio (2026-10-05), modelo «4 · ¿Qué le pasa?» del lienzo.
   index.njk. Carrusel con placas, redes, situaciones, ramas (grilla
   de Servicios), el estudio y cómo empezamos. Prefijo .ini-
   --------------------------------------------------------- */
#contacto-rapido { scroll-margin-top: 70px; }
/* Secciones de Inicio ocultas desde el panel (algunas tienen display propio) */
#iniSecciones > [hidden] { display: none !important; }
/* Antes de que se inicie el carrusel (espera a leer el contenido) se ve la primera diapositiva */
.ini-hero .flexslider:not(.ini-iniciado) .slides > li:first-child { display: block; }
.ini-hero .flexslider .slider-text { opacity: 1 !important; }
.ini-ancho { max-width: 1296px; margin: 0 auto; padding: 0 32px; }
.ini-redes, .ini-sit, .ini-estudio, .ini-modos { --oro: #bea34d; --oro-2: #d4bb6a; color: #f0f4f8; font-family: var(--f-txt, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); }
.ini-redes *, .ini-sit *, .ini-estudio *, .ini-modos *, .ini-hero .ini-ctas * { box-sizing: border-box; }
.ini-eb { font-size: calc(12px * var(--k, 1)); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #bea34d; }
.ini-redes .ini-h2, .ini-sit .ini-h2, .ini-modos .ini-h2 { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(36px * var(--k, 1)); font-weight: 400; line-height: 1.25; color: aliceblue; margin: 8px 0 0; text-transform: none; letter-spacing: 0; }
.ini-h2 em { font-style: italic; color: #e6cf86; }
.ini-txt { font-size: calc(17px * var(--k, 1)); line-height: 1.65; color: #b9c0cb; margin: 12px 0 0; }
.ini-cab { text-align: center; max-width: 760px; margin: 0 auto; }
.ini-centro { text-align: center; margin-top: 28px; }
.ini-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.ini-btn, a.ini-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 24px; border-radius: 30px;
  font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s; }
a.ini-btn-p { background: #bea34d; color: #000; }
a.ini-btn-p:hover, a.ini-btn-p:focus { background: #d4bb6a; color: #000; text-decoration: none; }
a.ini-btn-s { border: 1.5px solid rgba(190, 163, 77, .7); color: #f0f4f8; background: rgba(0, 0, 0, .35); }
a.ini-btn-s:hover, a.ini-btn-s:focus { border-color: #d4bb6a; color: #fff; text-decoration: none; }
a.ini-btn:focus-visible, .ini-chip:focus-visible, .ini-reel:focus-visible, .ini-modo:focus-visible, .ini-perfil:focus-visible { outline: 2px solid #d4bb6a; outline-offset: 3px; }

/* Carrusel: la placa en cada diapositiva (un solo h1; las demás son h2) */
.ini-hero .ini-placa { max-width: 860px; }
.ini-hero .ini-placa .placa-in { padding: 34px 48px; }
#colorlib-hero .flexslider .slider-text > .slider-text-inner .placa .placa-tit { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(50px * var(--k, 1)); font-weight: 400; line-height: 1.12; letter-spacing: 0;
  text-transform: none; margin: 12px 0 0; color: #fff; text-shadow: none; }
#colorlib-hero .flexslider .slider-text > .slider-text-inner .placa .placa-tit em { font-style: italic; color: #e6cf86; }
#colorlib-hero .flexslider .slider-text > .slider-text-inner .placa p.placa-sub { text-shadow: none; }
.ini-hero .flexslider .slides li .overlay-gradient { background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.5)); }
/* Arreglos del Dr. CAR (2026-10-11, tarea 25):
   2) La placa deja ver la foto: fondo negro al 45 % con un leve desenfoque (antes 78 %, tapaba la foto).
   3) En la compu la placa va a la IZQUIERDA y más angosta, para no tapar a quien está en la foto
      (la diapositiva con el Dr. Carlos a la derecha); la sombra más fuerte va del lado del texto.
      En el celular sigue centrada, con la foto más oscura para que se lea. */
.ini-hero .ini-placa { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
#colorlib-hero .flexslider .slider-text > .slider-text-inner .ini-placa .placa-tit, #colorlib-hero .flexslider .slider-text > .slider-text-inner .ini-placa p.placa-sub { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
@media (min-width: 992px) {
  #colorlib-hero.ini-hero .flexslider .slider-text { width: 100%; margin-left: 0; text-align: left; }
  #colorlib-hero.ini-hero .slider-text-inner > .ini-placa { max-width: 560px; }
  .ini-hero .ini-placa .placa-in { text-align: left; padding: 34px 40px; }
  .ini-hero .ini-ctas { justify-content: flex-start; }
  #colorlib-hero .flexslider .slider-text > .slider-text-inner .ini-placa .placa-tit { font-size: calc(44px * var(--k, 1)); }
  .ini-hero .flexslider .slides li .overlay-gradient { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.08) 75%, rgba(0,0,0,.05) 100%); }
}
@media (max-width: 991px) {
  .ini-hero .flexslider .slides li .overlay-gradient { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)); }
}
/* Tarea 31 (pedido del Dr. CAR, 14/10): el carrusel SIN marco. Ni fondo, ni bordes dorados, ni
   desenfoque: la foto se ve entera. El texto se lee por la sombra de las letras y el degradé
   del overlay (más oscuro del lado del texto en la compu, en el medio en el celular).
   Ojo: los degradés de .ini-hero (tarea 25) no se aplicaban porque la regla de style.css lleva
   #colorlib-hero y gana por especificidad; acá van con el #id. */
.ini-hero .ini-placa { background: none; border: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ini-hero .ini-placa .placa-in { border: 0; padding: 0; }
.ini-hero .ini-placa .placa-eb { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
#colorlib-hero .flexslider .slider-text > .slider-text-inner .ini-placa .placa-tit,
#colorlib-hero .flexslider .slider-text > .slider-text-inner .ini-placa p.placa-sub { text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .55); }
@media (min-width: 992px) {
  #colorlib-hero.ini-hero .slider-text-inner > .ini-placa { max-width: 440px; }
  #colorlib-hero.ini-hero .flexslider .slides li .overlay-gradient { background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 38%, rgba(0,0,0,.06) 62%, rgba(0,0,0,0) 100%); }
}
@media (max-width: 991px) {
  #colorlib-hero.ini-hero .flexslider .slides li .overlay-gradient { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.65) 72%, rgba(0,0,0,.35) 100%); }
}
#colorlib-hero.ini-hero .flexslider .flex-control-nav li a { width: 10px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .45); transition: width .2s; }
#colorlib-hero.ini-hero .flexslider .flex-control-nav li a.flex-active { width: 28px; background: #bea34d; }
/* El carrusel ocupa la pantalla menos el header (la plantilla le daba el alto completo de la ventana
   por JS y la parte de abajo —puntitos y flechas— quedaba fuera de vista) */
#colorlib-hero.ini-hero, #colorlib-hero.ini-hero .flexslider, #colorlib-hero.ini-hero .flexslider .slides > li, #colorlib-hero.ini-hero .flexslider .slider-text {
  height: calc(100vh - 76px) !important; min-height: 600px !important; }
@supports (height: 100svh) { #colorlib-hero.ini-hero, #colorlib-hero.ini-hero .flexslider, #colorlib-hero.ini-hero .flexslider .slides > li, #colorlib-hero.ini-hero .flexslider .slider-text { height: calc(100svh - 76px) !important; } }
#colorlib-hero.ini-hero .flexslider .slider-text > .slider-text-inner { min-height: 0; }
/* Flechas a los costados (la plantilla las ocultaba) */
#colorlib-hero.ini-hero .flexslider .flex-direction-nav { display: block; margin: 0; padding: 0; list-style: none; }
#colorlib-hero.ini-hero .flexslider .flex-direction-nav a { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: -26px 0 0; top: 50%; z-index: 1001; opacity: 1;
  border-radius: 50%; border: 1px solid rgba(190, 163, 77, .7); background: rgba(0, 0, 0, .55); font-size: 0; color: transparent; text-shadow: none; overflow: hidden; transition: background .15s, border-color .15s; }
#colorlib-hero.ini-hero .flexslider .flex-direction-nav a::before { content: ""; font-family: inherit; width: 12px; height: 12px; border-left: 2px solid #d4bb6a; border-bottom: 2px solid #d4bb6a; transform: translateX(2px) rotate(45deg); text-shadow: none; }
#colorlib-hero.ini-hero .flexslider .flex-direction-nav a.flex-next::before { transform: translateX(-2px) rotate(-135deg); }
#colorlib-hero.ini-hero .flexslider .flex-direction-nav .flex-prev, #colorlib-hero.ini-hero .flexslider:hover .flex-direction-nav .flex-prev { left: 28px; opacity: 1; }
#colorlib-hero.ini-hero .flexslider .flex-direction-nav .flex-next, #colorlib-hero.ini-hero .flexslider:hover .flex-direction-nav .flex-next { right: 28px; opacity: 1; }
#colorlib-hero.ini-hero .flexslider .flex-direction-nav a:hover, #colorlib-hero.ini-hero .flexslider .flex-direction-nav a:focus { background: #bea34d; border-color: #bea34d; }
#colorlib-hero.ini-hero .flexslider .flex-direction-nav a:hover::before, #colorlib-hero.ini-hero .flexslider .flex-direction-nav a:focus::before { border-color: #000; }
#colorlib-hero.ini-hero .flexslider .flex-direction-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Redes */
.ini-redes { position: relative; overflow: hidden; padding: 88px 0; background: radial-gradient(900px 500px at 8% 0%, rgba(190, 163, 77, .16), transparent 60%), #000;
  border-bottom: 1px solid rgba(190, 163, 77, .2); }
.ini-redes-in { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: center; }
a.ini-perfil { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; color: #f0f4f8; text-decoration: none; }
.ini-perfil-aro { display: inline-flex; padding: 3px; border-radius: 50%; background: conic-gradient(#bea34d, #f3e3a6, #997938, #bea34d); }
.ini-perfil-aro img { display: block; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #000; background: #000; }
.ini-perfil b { display: block; font-size: calc(16px * var(--k, 1)); }
.ini-perfil small { display: block; font-size: calc(13px * var(--k, 1)); color: #8a93a0; }
.ini-redes-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.ini-redes-otras { display: flex; gap: 8px; }
.ini-redes-otras a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(190, 163, 77, .6); color: #d4bb6a; font-size: calc(18px * var(--k, 1)); text-decoration: none; }
.ini-redes-otras a:hover, .ini-redes-otras a:focus { background: #bea34d; color: #000; }
.ini-reels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ini-reels li { margin: 0; }
a.ini-reel { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; border: 1px solid rgba(190, 163, 77, .3); background: #111;
  color: #fff; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
a.ini-reel:hover, a.ini-reel:focus { transform: translateY(-4px); border-color: #bea34d; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); color: #fff; text-decoration: none; }
.ini-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ini-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(0,0,0,.92) 100%); }
.ini-reel-chip { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: rgba(0, 0, 0, .65);
  font-size: calc(11.5px * var(--k, 1)); font-weight: 600; letter-spacing: .04em; }
.ini-reel-chip b { padding: 1px 6px; border-radius: 10px; background: #bea34d; color: #000; font-size: calc(10.5px * var(--k, 1)); text-transform: uppercase; letter-spacing: .08em; }
.ini-reel-play { position: absolute; z-index: 1; left: 50%; top: 46%; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(190, 163, 77, .92); color: #000; transition: transform .2s; }
a.ini-reel:hover .ini-reel-play { transform: scale(1.1); }
.ini-reel-tit { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; font-size: calc(14.5px * var(--k, 1)); font-weight: 600; line-height: 1.35; }

/* ¿Qué le está pasando? */
.ini-sit { padding: 88px 0; background: #07090c; border-bottom: 1px solid rgba(190, 163, 77, .2); }
.ini-sit-cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; margin-top: 40px; }
.ini-sit-chips { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
a.ini-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 30px; border: 1px solid rgba(190, 163, 77, .45); background: transparent;
  font-size: calc(14.5px * var(--k, 1)); line-height: 1.25; color: #e3e8ee; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
a.ini-chip:hover, a.ini-chip:focus { border-color: #d4bb6a; color: #fff; text-decoration: none; }
a.ini-chip.on { background: #bea34d; border-color: #bea34d; color: #000; font-weight: 600; }
a.ini-chip-otra { border-style: dashed; color: #d4bb6a; }
.ini-sit-panel { display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; background: #0c0f14; border: 1px solid #bea34d; border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(190, 163, 77, .07), 0 24px 48px rgba(0, 0, 0, .5); animation: ini-aparece .25s ease-out; }
.ini-sit-panel[hidden] { display: none; }
@keyframes ini-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ini-sit-foto { position: relative; min-height: 100%; }
.ini-sit-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ini-sit-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.85)); }
.ini-sit-foto span { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; font-size: calc(12px * var(--k, 1)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #e6cf86; }
.ini-sit-txt { padding: 28px 30px; }
.ini-sit .ini-sit-txt h3 { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(28px * var(--k, 1)); font-weight: 400; line-height: 1.2; color: #fff; margin: 0; text-transform: none; letter-spacing: 0; }
.ini-sit-txt p { font-size: calc(16.5px * var(--k, 1)); line-height: 1.65; color: #c3c9d2; margin: 12px 0 0; }
.ini-sit-txt .ini-ctas { justify-content: flex-start; }
a.ini-sit-urg { display: block; padding: 12px 0; margin-top: 6px; font-size: calc(14px * var(--k, 1)); line-height: 1.5; color: #b9c0cb; text-decoration: none; }
a.ini-sit-urg svg { color: #bea34d; vertical-align: -3px; margin-right: 4px; }
a.ini-sit-urg b { white-space: nowrap; }
a.ini-sit-urg b { color: #f0f4f8; }
a.ini-sit-urg:hover, a.ini-sit-urg:focus { color: #fff; text-decoration: none; }

/* Ramas (grilla de Servicios) */
.ini-ramas .sv-eb { margin-bottom: 0; }
.sv.ini-ramas { padding-bottom: 88px; }

/* El estudio: placa sobre la foto */
.ini-estudio { position: relative; display: flex; justify-content: center; padding: 110px 32px; overflow: hidden; }
.ini-estudio-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ini-estudio::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .45); }
.ini-estudio-placa { position: relative; z-index: 2; display: block; max-width: 800px; background: rgba(0, 0, 0, .82); }
.ini-estudio .placa-in { padding: 36px 44px; }
.ini-estudio .placa-tit { font-size: calc(34px * var(--k, 1)); }
.ini-estudio .placa-in > p { font-size: calc(17px * var(--k, 1)); line-height: 1.7; color: #f0f4f8; margin: 12px 0 0; }

/* Cómo empezamos */
.ini-modos { padding: 88px 0; background: #000; }
.ini-modos-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
a.ini-modo { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: 8px; background: #0c0f14; border: 1px solid rgba(190, 163, 77, .25);
  color: #f0f4f8; text-decoration: none; transition: border-color .15s, transform .15s; }
a.ini-modo:hover, a.ini-modo:focus { border-color: #bea34d; transform: translateY(-2px); color: #f0f4f8; text-decoration: none; }
a.ini-modo-dest { border: 1.5px solid #bea34d; }
.ini-modo-cinta { position: absolute; top: -12px; left: 26px; padding: 3px 11px; border-radius: 4px; background: #bea34d; color: #000; font-size: calc(11px * var(--k, 1)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ini-modo-tit { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(23px * var(--k, 1)); line-height: 1.25; }
.ini-modo-precio { align-self: flex-start; padding: 5px 12px; border-radius: 4px; background: #bea34d; color: #000; font-size: calc(14px * var(--k, 1)); font-weight: 700; }
.ini-modo-libre { background: transparent; border: 1px solid #bea34d; color: #d4bb6a; }
.ini-modo-txt { font-size: calc(14.5px * var(--k, 1)); line-height: 1.55; color: #b9c0cb; }

@media (max-width: 991px) {
  .ini-redes-in { grid-template-columns: 1fr; gap: 32px; }
  .ini-sit-cuerpo { grid-template-columns: 1fr; }
  .ini-modos-grilla { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 767px) {
  .ini-ancho { padding: 0 16px; }
  .ini-redes .ini-h2, .ini-sit .ini-h2, .ini-modos .ini-h2 { font-size: calc(27px * var(--k, 1)); }
  .ini-txt { font-size: calc(16px * var(--k, 1)); }
  .ini-hero .ini-placa .placa-in { padding: 20px 16px; }
  #colorlib-hero .flexslider .slider-text > .slider-text-inner .placa .placa-tit { font-size: calc(30px * var(--k, 1)); }
  .ini-hero .ini-ctas { flex-direction: column; }
  #colorlib-hero.ini-hero, #colorlib-hero.ini-hero .flexslider, #colorlib-hero.ini-hero .flexslider .slides > li, #colorlib-hero.ini-hero .flexslider .slider-text { height: calc(100vh - 60px) !important; min-height: 640px !important; }
  @supports (height: 100svh) { #colorlib-hero.ini-hero, #colorlib-hero.ini-hero .flexslider, #colorlib-hero.ini-hero .flexslider .slides > li, #colorlib-hero.ini-hero .flexslider .slider-text { height: calc(100svh - 60px) !important; } }
  /* En el celular las flechas van juntas abajo a la izquierda: no tapan la placa ni chocan
     con los botones flotantes (abajo a la derecha) */
  #colorlib-hero.ini-hero .flexslider .flex-direction-nav a { top: auto; bottom: 20px; margin: 0; width: 44px; height: 44px; z-index: 1001; }
  #colorlib-hero.ini-hero .flexslider .flex-direction-nav .flex-prev, #colorlib-hero.ini-hero .flexslider:hover .flex-direction-nav .flex-prev { left: 16px; }
  #colorlib-hero.ini-hero .flexslider .flex-direction-nav .flex-next, #colorlib-hero.ini-hero .flexslider:hover .flex-direction-nav .flex-next { left: 70px; right: auto; }
  #colorlib-hero.ini-hero .flexslider .flex-control-nav { bottom: 40px; width: auto; left: 124px; right: auto; text-align: left; }
  .ini-redes, .ini-sit, .ini-modos { padding: 56px 0; }
  /* Reels: carril que se desliza con el dedo */
  .ini-reels { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ini-reels::-webkit-scrollbar { display: none; }
  .ini-reels li { flex: 0 0 62%; scroll-snap-align: start; }
  /* Situaciones: dos filas que se deslizan, el panel abajo */
  .ini-sit-chips { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; overflow-x: auto; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .ini-sit-chips::-webkit-scrollbar { display: none; }
  .ini-sit-cuerpo { gap: 18px; margin-top: 28px; }
  .ini-sit-panel { grid-template-columns: 1fr; scroll-margin-top: 76px; }
  .ini-sit-foto { height: 140px; min-height: 0; }
  .ini-sit-txt { padding: 20px 18px 22px; }
  .ini-sit .ini-sit-txt h3 { font-size: calc(24px * var(--k, 1)); }
  .ini-sit-txt .ini-ctas { flex-direction: column; }
  .ini-estudio { padding: 56px 16px; }
  .ini-estudio .placa-in { padding: 22px 16px; }
  .ini-estudio .placa-tit { font-size: calc(25px * var(--k, 1)); }
  .ini-estudio .placa-in > p { font-size: calc(15.5px * var(--k, 1)); }
  .ini-estudio .ini-ctas { flex-direction: column; }
  .sv.ini-ramas { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .ini-sit-panel { animation: none; }
  a.ini-reel, a.ini-modo, .ini-reel-play { transition: none; }
}

/* ---------------------------------------------------------
   Estilo de todo el sitio (tarea 32, 2026-10-14): lo elige el Dr. CAR en el panel
   «Página web» → Estilo y queda en <html data-tema data-tam data-marco>
   (js/sitio-global.js). Sin atributo = como estaba. Los font-size y font-family de
   style.css y de este archivo se reescriben en el build para usar estas variables
   (scripts/build/estilo-css.cjs).
   --------------------------------------------------------- */
html[data-tema="tradicional"] { --f-tit: "Libre Baskerville", Georgia, serif; --f-txt: "Source Sans 3", system-ui, sans-serif; }
html[data-tema="elegante"] { --f-tit: "Cormorant Garamond", Georgia, serif; --f-txt: "Lato", system-ui, sans-serif; }
html[data-tema="moderno"] { --f-tit: "DM Serif Display", Georgia, serif; --f-txt: "DM Sans", system-ui, sans-serif; }
html[data-tam="chica"] { --k: .92; }
html[data-tam="grande"] { --k: 1.12; }

/* Recuadro sobre las fotos (todas las placas menos la del formulario, que necesita su caja) */
html[data-marco="sin"] .placa:not(.cf-placa) { background: none; border: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-marco="sin"] .placa:not(.cf-placa) .placa-in { border: 0; padding: 0; }
html[data-marco="sin"] .placa:not(.cf-placa) .placa-eb { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
html[data-marco="sin"] .placa:not(.cf-placa) .placa-tit,
html[data-marco="sin"] .placa:not(.cf-placa) .placa-sub,
html[data-marco="sin"] .placa:not(.cf-placa) .placa-in > p { text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .55); }
html[data-marco="suave"] .placa:not(.cf-placa) { background: rgba(0, 0, 0, .45); border-color: transparent; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
html[data-marco="suave"] .placa:not(.cf-placa) .placa-in { border-color: transparent; }
html[data-marco="dorado"] .placa:not(.cf-placa) { background: rgba(0, 0, 0, .78); border: 1px solid #bea34d; padding: 5px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-marco="dorado"] .placa:not(.cf-placa) .placa-in { border: 1px solid rgba(190, 163, 77, .55); }
/* El carrusel quedó sin caja en la tarea 31: con suave o dorado vuelve a tener aire adentro */
html[data-marco="suave"] .ini-hero .ini-placa, html[data-marco="dorado"] .ini-hero .ini-placa { padding: 5px; }
html[data-marco="suave"] .ini-hero .ini-placa .placa-in, html[data-marco="dorado"] .ini-hero .ini-placa .placa-in { padding: 34px 40px; }
@media (max-width: 767px) {
  html[data-marco="suave"] .ini-hero .ini-placa .placa-in, html[data-marco="dorado"] .ini-hero .ini-placa .placa-in { padding: 20px 16px; }
}

/* ---------------------------------------------------------
   Contacto (tarea 33, 2026-10-14, modelo 1): portada, canales, entrevista, mapa.
   Prefijo .ct-. Los textos y datos salen de sitio/global (panel «Página web» → Contacto).
   --------------------------------------------------------- */
.ct { background: #000; color: #f0f4f8; font-family: var(--f-txt, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); padding-bottom: 72px; }
.ct [hidden] { display: none !important; }
.ct-ancho { max-width: 1180px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.ct-hero { position: relative; min-height: 420px; display: flex; align-items: center; background-size: cover; background-position: center; }
.ct-hero-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, .1) 80%); }
.ct-hero-in { position: relative; width: 100%; padding-top: 56px; padding-bottom: 56px; }
.ct-placa { max-width: 620px; text-align: left; }
.ct-placa .placa-in { text-align: left; }
.ct-placa .placa-tit em { font-style: italic; color: #e6cf86; }
.ct-canales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.ct-canal { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 12px; border: 1px solid #3a3220; background: #0e0d09; }
.ct-canal.ct-urg { border-color: #5a2a2a; background: #120a0a; }
.ct-eb { display: block; font-size: calc(12px * var(--k, 1)); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #bea34d; }
.ct-urg .ct-eb { color: #e59a8e; }
.ct-num { font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(30px * var(--k, 1)); font-weight: 400; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.ct-txt { flex: 1; font-size: calc(15px * var(--k, 1)); line-height: 1.5; color: #b8c0cc; }
a.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: calc(16px * var(--k, 1)); font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; }
a.ct-btn-p { background: #bea34d; color: #111; }
a.ct-btn-p:hover, a.ct-btn-p:focus { background: #d4bb6a; color: #111; text-decoration: none; }
a.ct-btn-s { border: 1.5px solid #bea34d; color: #fff; }
a.ct-btn-u { border: 1.5px solid #e59a8e; color: #fff; }
a.ct-btn-s:hover, a.ct-btn-u:hover, a.ct-btn-s:focus, a.ct-btn-u:focus { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
a.ct-btn:focus-visible { outline: 2px solid #d4bb6a; outline-offset: 3px; }
.ct-entrevista { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 28px; padding: 34px 40px; border-radius: 12px; background: #0b1424; border: 1px solid #1f3352; }
.ct-entrevista p { max-width: 640px; margin: 10px 0 0; font-size: calc(16px * var(--k, 1)); line-height: 1.6; color: #c9d1dc; }
.ct-entrevista a.ct-btn { flex-shrink: 0; }
.ct-h2 { margin: 0; font-family: var(--f-tit, "Playfair Display", Georgia, serif); font-size: calc(30px * var(--k, 1)); font-weight: 400; color: #fff; text-transform: none; letter-spacing: 0; }
.ct-mapa { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 28px; }
.ct-mapa iframe { width: 100%; height: 300px; border: 0; border-radius: 12px; background: #11161f; }
.ct-mapa-datos { display: flex; flex-direction: column; gap: 18px; font-size: calc(15px * var(--k, 1)); line-height: 1.5; color: #c9d1dc; }
.ct-mapa-datos a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: underline; text-decoration-color: #bea34d; overflow-wrap: anywhere; }
@media (max-width: 991px) {
  .ct-canales { grid-template-columns: 1fr; gap: 14px; }
  .ct-mapa { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ct { padding-bottom: 48px; }
  .ct-ancho { padding: 0 16px; }
  .ct-hero { min-height: 320px; align-items: flex-end; }
  .ct-hero-velo { background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .25) 75%); }
  .ct-hero-in { padding-top: 32px; padding-bottom: 28px; }
  .ct-canales { margin-top: 28px; }
  .ct-canal { padding: 18px; gap: 8px; }
  .ct-num { font-size: calc(26px * var(--k, 1)); }
  .ct-entrevista { flex-direction: column; align-items: stretch; padding: 22px 20px; gap: 16px; }
  .ct-h2 { font-size: calc(25px * var(--k, 1)); }
  .ct-mapa iframe { height: 220px; }
}