/* ═══════════════════════════════════════════════════════════════════════════
   Landings de campaña — sistema visual
   ═══════════════════════════════════════════════════════════════════════════
   Del handoff de diseño (agosto 2026). Las cuatro landings comparten esta hoja:
   la estructura es idéntica y solo cambia el contenido, así que tener el diseño
   en un único sitio evita que se desincronicen con el tiempo.

   Dos decisiones del diseño que conviene no "arreglar" después sin querer:
     · Cero border-radius en toda la página. Es identidad, no descuido: la
       página imita un registro documental.
     · Cero sombras. La jerarquía se construye con bordes de 1px y cambios de
       superficie.

   Solo cara clara. Aunque el visitante tenga el teléfono en modo oscuro, la
   página se ve igual: es decisión del dueño, no un olvido. Por eso también el
   `color-scheme: light` de abajo — sin él, el sistema repinta por su cuenta los
   campos del formulario y la barra de scroll, y el formulario queda a dos aguas.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;   /* el sistema no debe repintar inputs ni scrollbars */
  --base:        #fbf9f4;   /* fondo de página */
  --banda:       #f3efe4;   /* secciones alternas */
  --superficie:  #ffffff;   /* tarjetas, tabla */
  --campo:       #fbf9f4;   /* fondo de los inputs */
  --cabecera:    #eae5d9;   /* cabecera de tabla e isla del formulario */
  --barra:       #1a1712;   /* barra de folio de la ficha */
  --barra-txt:   #f5f2ea;

  --linea:       #e2dccd;   /* borde estándar */
  --linea-2:     #ddd5c2;   /* borde de tarjetas y tabla */
  --linea-3:     #eee7d8;   /* separadores internos */
  --linea-head:  #dcd6c8;   /* divisores del encabezado */
  --linea-punt:  #cfc7b4;   /* borde punteado del captcha */
  --linea-form:  #b3a98f;   /* marco acentuado de la ficha */

  --tinta:       #1a1712;   /* texto primario */
  --suave:       #4a453d;   /* secundario */
  --tenue:       #6f695f;   /* terciario y etiquetas */
  --legal:       #8a8272;   /* notas legales */

  --oro:         #8a6a35;
  --oro-hover:   #6d5329;
  --oro-txt:     #5f4a24;   /* oro legible sobre fondo claro */
  --oro-tenue:   rgba(138,106,53,.08);
  --oro-fondo:   rgba(138,106,53,.12);
  --enfasis:     rgba(138,106,53,.07);

  --cta-fondo:   #1a1712;   /* en la cara clara el CTA es tinta sólida */
  --cta-txt:     #fbf9f4;
  --head-fondo:  rgba(245,242,234,.92);
  --wa:          #25D366;
}

/* ── Acento por area ─────────────────────────────────────────────────────────
   El dorado es la MARCA y no se toca: logo, botones, credenciales, pie. Lo que
   cambia por area es el acento de lectura — rotulos, numeracion, la columna de
   consecuencia de la tabla y los enlaces del texto.

   Los cuatro van desaturados a proposito: la pagina imita un registro
   documental, y un color saturado la volveria corporativa. Contraste sobre el
   papel (#fbf9f4) verificado: los cuatro pasan 4.5:1.                         */
body { --acento: var(--oro); --acento-txt: var(--oro-txt); --acento-suave: var(--enfasis); }

body.area-tributario {          /* dorado, el canonico */
  --acento: #8a6a35; --acento-txt: #5f4a24; --acento-suave: rgba(138,106,53,.07);
}
body.area-penal {               /* pizarra: frio y sobrio */
  --acento: #4a5560; --acento-txt: #39424b; --acento-suave: rgba(74,85,96,.07);
}
body.area-laboral {             /* oliva: sereno, de oficio */
  --acento: #5f6b45; --acento-txt: #495334; --acento-suave: rgba(95,107,69,.07);
}
body.area-negocios {            /* acero: comercial */
  --acento: #445b6b; --acento-txt: #344753; --acento-suave: rgba(68,91,107,.08);
}

/* La cara oscura se retiró por decisión del dueño (2026-08-15): la landing
   va solo en claro por ahora. Los tokens de la versión black están en el
   handoff del diseñador y en el historial, si algún día se reponen. */

/* ── Base ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--base);
  color: var(--tinta);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--oro-hover); }

.zh { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
.cifra { font-variant-numeric: lining-nums tabular-nums; }

/* Conmutación de idioma. Ambos idiomas viven en el DOM y se muestra uno. */
body.lang-es [data-lang="zh"] { display: none !important; }
body.lang-zh [data-lang="es"] { display: none !important; }

.ancho { max-width: 1240px; margin: 0 auto; }
.seccion { padding: 52px 48px; border-bottom: 1px solid var(--linea); }
.seccion--banda { background: var(--banda); }

/* ── Tipografía ──────────────────────────────────────────────────────────── */
.rotulo {                       /* eyebrow */
  margin: 0 0 6px; font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--acento); font-weight: 600;
}
.rotulo.zh { font-size: 11px; letter-spacing: .16em; text-transform: none; font-weight: 500; }

.titular, .titular-2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300; letter-spacing: -.012em;
}
.titular   { margin: 0 0 20px; font-size: clamp(27px, 7vw, 54px); line-height: 1.08; max-width: 30ch; }
.titular-2 { margin: 0 0 28px; font-size: clamp(24px, 5.4vw, 36px); line-height: 1.22; }
/* Los titulares chinos NO usan la serif: van en la pila CJK, un escalón menores
   y con más interlínea. Es del handoff, no una licencia. */
.titular.zh   { font-family: inherit; font-size: clamp(23px, 5.6vw, 40px); font-weight: 500; line-height: 1.34; letter-spacing: 0; max-width: 20ch; }
.titular-2.zh { font-family: inherit; font-size: clamp(21px, 4.6vw, 28px); font-weight: 500; line-height: 1.5; letter-spacing: 0; }

.parrafo   { margin: 0; font-size: 15px; line-height: 1.7; color: var(--suave); }
.parrafo.zh { line-height: 1.95; }
.parrafo--destacado { color: var(--tinta); }

/* ── Encabezado ──────────────────────────────────────────────────────────── */
.cabecera-sitio {
  position: sticky; top: 0; z-index: 50;
  background: var(--head-fondo);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea-head);
}
.cabecera-sitio > .ancho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 48px; height: 64px;
}
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca-logo { font-size: 18px; font-weight: 700; line-height: 1; color: var(--oro); }
.marca-texto { border-left: 1px solid var(--linea-head); padding-left: 12px; line-height: 1.25; }
.marca-nombre { display: block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 500; color: var(--tinta); }
.marca-bajada { display: block; font-size: 10px; margin-top: 2px; color: var(--suave); }

.acciones { display: flex; align-items: center; gap: 16px; }
.idiomas { display: flex; gap: 8px; }
.idiomas button {
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--linea-2); background: var(--superficie);
  color: var(--suave); padding: 9px 16px;
}
.idiomas button[aria-pressed="true"] {
  border-color: var(--oro); background: var(--oro-fondo);
  color: var(--oro-txt); font-size: 12.5px; font-weight: 600;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cta-fondo); color: var(--cta-txt);
  font-size: 12.5px; font-weight: 600; padding: 10px 18px;
  border: 0; font-family: inherit; cursor: pointer;
}
.cta:hover { color: var(--cta-txt); filter: brightness(1.12); }
.cta--ancho { width: 100%; gap: 11px; font-size: 15px; padding: 16px 20px; margin-top: 22px; }
.cta--envio { gap: 10px; font-size: 14.5px; padding: 15px; background: var(--oro); color: #fff; }

.cta-linea {                     /* botón outline del FAQ */
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--oro-txt);
  border: 1px solid var(--oro); background: var(--oro-tenue);
  padding: 12px 20px; transition: background-color .18s;
}
.cta-linea:hover { background: var(--oro-fondo); color: var(--oro-txt); }
.icono-wa { color: var(--wa); flex-shrink: 0; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  border-bottom: 1px solid var(--linea);
  background-color: var(--base);
  background-repeat: no-repeat; background-size: cover; background-position: center;
  /* La foto va de fondo y no como <img> porque es atmosfera, no contenido: no
     aporta informacion que un lector de pantalla deba anunciar. El degradado va
     SIEMPRE encima y es lo que garantiza el contraste del texto — la foto sola
     no lo garantiza en ningun caso. Cada pagina pone su imagen en
     `--hero-fondo`, asi la hoja sigue siendo una sola. */
  background-image:
    linear-gradient(90deg, rgba(251,249,244,.975) 0%, rgba(251,249,244,.93) 46%,
                           rgba(251,249,244,.74) 76%, rgba(251,249,244,.55) 100%),
    var(--hero-fondo, none);
}
body.area-tributario { --hero-fondo: url('/img/landing/bg-tributario-claro.webp'); }
body.area-penal      { --hero-fondo: url('/img/landing/bg-penal-claro.webp'); }
body.area-laboral    { --hero-fondo: url('/img/landing/bg-laboral-claro.webp'); }
body.area-negocios   { --hero-fondo: url('/img/landing/bg-negocios-claro.webp'); }

/* Segunda escena, solo para el bloque del formulario. Antes se reusaba la
   misma foto del hero con otro recorte; ahora son fotos distintas. */
body.area-tributario  { --form-fondo: url('/img/landing/bg-tributario-form.webp'); }
body.area-penal       { --form-fondo: url('/img/landing/bg-penal-form.webp'); }
body.area-laboral     { --form-fondo: url('/img/landing/bg-laboral-form.webp'); }
body.area-negocios    { --form-fondo: url('/img/landing/bg-negocios-form.webp'); }

/* Version de 2560px para pantallas anchas. La fuente clara solo existe en
   1280x720: estirada a un bloque de 2000px o mas se veia blanda. Esta se
   reescala con lanczos y un enfoque leve, que rinde bastante mejor que el
   escalado del navegador. ⚠️ No es detalle nuevo — para HD de verdad hace falta
   la imagen original en alta, que no esta en el repo. */
@media (min-width: 1400px) {
  body.area-tributario { --hero-fondo: url('/img/landing/bg-tributario-claro-2x.webp'); }
  body.area-penal      { --hero-fondo: url('/img/landing/bg-penal-claro-2x.webp'); }
  body.area-laboral    { --hero-fondo: url('/img/landing/bg-laboral-claro-2x.webp'); }
  body.area-negocios   { --hero-fondo: url('/img/landing/bg-negocios-claro-2x.webp'); }
  body.area-tributario  { --form-fondo: url('/img/landing/bg-tributario-form-2x.webp'); }
  body.area-penal       { --form-fondo: url('/img/landing/bg-penal-form-2x.webp'); }
  body.area-laboral     { --form-fondo: url('/img/landing/bg-laboral-form-2x.webp'); }
  body.area-negocios    { --form-fondo: url('/img/landing/bg-negocios-form-2x.webp'); }
}
.hero > .ancho {
  padding: 76px 48px 60px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: end;
}
.hero .parrafo { font-size: clamp(14.5px, 3.9vw, 16.5px); line-height: 1.72; max-width: 58ch; }
.hero .parrafo.zh { font-size: 15.5px; max-width: 42ch; }

.ficha-abogada { border: 1px solid var(--linea); background: var(--superficie); padding: 9px; }
.ficha-abogada img { display: block; width: 100%; height: auto; }
.ficha-nombre { margin: 12px 3px 3px; font-size: 14px; font-weight: 600; }
.ficha-credencial { margin: 0 3px 8px; font-size: 11px; line-height: 1.6; color: var(--oro); }

/* ── Tabla de conciliación ───────────────────────────────────────────────── */
.tabla { border: 1px solid var(--linea-2); background: var(--superficie); }
.tabla-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabla-fila + .tabla-fila { border-top: 1px solid var(--linea-3); }
.tabla-cabecera { background: var(--cabecera); border-bottom: 1px solid var(--linea-2); }
.tabla-cabecera p {
  margin: 0; padding: 13px 22px; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tenue);
}
.tabla-cabecera p:last-child { color: var(--acento); font-weight: 600; }
.tabla-celda { padding: 20px 22px; }
.tabla-fila > *:not(:last-child) { border-right: 1px solid var(--linea-3); }
.tabla-celda p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--suave); }
.tabla-celda--titulo p { font-size: 15px; font-weight: 600; color: var(--tinta); }
.tabla-celda--consecuencia p { color: var(--tinta); }
.tabla-celda--enfasis { background: var(--acento-suave); }
.tabla-celda--enfasis p { font-weight: 500; color: var(--tinta); }

/* ── Lista de riesgo ─────────────────────────────────────────────────────── */
.riesgo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.senales { display: grid; border-top: 1px solid var(--linea-2); }
.senal {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--linea-2);
}
.senal-num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; color: var(--acento); line-height: 1.2; }
.senal p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tinta); }

.tarjeta { border: 1px solid var(--linea-2); background: var(--superficie); padding: 30px 32px; }
.credenciales { margin: 0; display: grid; border-top: 1px solid var(--linea-3); }
.credencial {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--linea-3);
}
.credencial:last-child { border-bottom: 0; }
.credencial dt { font-size: 12px; color: var(--tenue); }
.credencial dd { margin: 0; font-size: 13px; font-weight: 600; text-align: right; color: var(--tinta); }
.credencial dd.cifra { font-size: 15px; color: var(--oro); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq {
  margin: 56px 0; padding: 44px 48px 50px; background: var(--banda);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.faq-cuerpo { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; }
.faq-intro { position: sticky; top: 88px; }
.faq-lista { display: grid; }

details { border-top: 1px solid var(--linea-2); }
details:last-of-type { border-bottom: 1px solid var(--linea-2); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.faq-pregunta {
  display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 16px;
  align-items: center; padding: 19px 0;
  font-size: 16.5px; font-weight: 600; line-height: 1.4;
}
.chev { transition: transform .22s; color: var(--acento); }
details[open] .chev { transform: rotate(180deg); }
.faq-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px;
  background: var(--base); border-left: 2px solid var(--acento);
  padding: 20px 24px; margin-bottom: 18px;
}
.faq-panel p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--tinta); }
.faq-panel .zh { font-size: 14px; line-height: 1.95; }
.faq-accion { border-left: 1px solid var(--linea-2); padding-left: 22px; }
.faq-accion-rotulo {
  margin: 0 0 10px; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oro); font-weight: 600;
}
.faq-accion p { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: var(--suave); }
.faq-accion a { font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--oro); padding-bottom: 2px; }

/* ── Formulario ──────────────────────────────────────────────────────────── */
.isla-form {
  margin: 0 0 56px; padding: 44px 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 48px; align-items: start;
  border-top: 1px solid var(--linea-2); border-bottom: 1px solid var(--linea-2);
  /* La foto del area entra como fondo del bloque, no como franja aparte. El velo
     va encima y es lo que sostiene la legibilidad: a la izquierda hay texto
     directamente sobre la imagen. La ficha del formulario trae superficie propia,
     asi que los campos no dependen de este contraste. */
  background-color: var(--cabecera);
  background-image:
    linear-gradient(rgba(234,229,217,.84), rgba(234,229,217,.93)),
    var(--form-fondo, var(--hero-fondo, none));
  background-size: cover;
  background-position: center 45%;
}
/* min-width: 0 en toda la cadena del formulario. Un elemento dentro de un grid
   trae min-width: auto, o sea que NO encoge por debajo de su contenido:
   basta
   con que UN eslabon lo conserve para que el input de 300px empuje la pagina
   entera, por mucho que el input tenga width 100%. */
.ficha { background: var(--superficie); border: 1px solid var(--linea-form); min-width: 0; }
.ficha-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 26px; background: var(--barra); color: var(--barra-txt);
}
.ficha-barra p { margin: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.ficha-folio { font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--oro); }
.ficha-cuerpo { padding: 30px 26px 26px; }
/* La columna se declara explicitamente. Sin grid-template-columns, la columna
   implicita se dimensiona por su contenido, y el input —que sin ancho declarado
   mide unos 300px— fijaba el ancho del formulario entero y desbordaba la
   pantalla en cualquier telefono. Este era el eslabon que faltaba: los min-width
   de .par y .campo no bastan si la COLUMNA de arriba ya se caso con 300px. */
.ficha form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; }

.campo { display: grid; gap: 6px; min-width: 0; }
.campo-rotulo { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.campo input, .campo textarea {
  /* width y min-width son obligatorios: un input SIN ancho declarado usa su
     tamano intrinseco del navegador —unos 300px— y NO encoge. En una pantalla
     de 344px eso empuja el formulario entero fuera de la ventana, y el texto
     aparece cortado por la derecha. Ningun minmax del grid lo arregla, porque
     el que no cede es el campo. */
  width: 100%; min-width: 0;
  background: var(--campo); border: 1px solid var(--linea-2);
  padding: 11px 13px; font-size: 14px; line-height: 1.6;
  font-family: inherit; color: var(--tinta); outline: none;
}
.campo textarea { resize: none; }
.campo input:focus, .campo textarea:focus { border-color: var(--oro); }

.marcas { border: 1px solid var(--linea-2); padding: 16px 16px 14px; margin: 0; }
.marcas legend {
  padding: 0 8px; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oro); font-weight: 600;
}
.marcas-lista { display: grid; gap: 9px; }
.marcas-lista label { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; }
.marcas-lista input { margin: 3px 0 0; accent-color: var(--oro); }

.captcha-hueco { border: 1px dashed var(--linea-punt); color: var(--legal); padding: 13px; text-align: center; font-size: 11px; }
.nota-legal { margin: 0; font-size: 10.5px; line-height: 1.65; color: var(--tenue); }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--linea); padding: 40px 48px; }
.pie-alto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--linea);
}
.pie-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; font-size: 12px; }
.pie-enlaces a { display: inline-flex; align-items: center; gap: 7px; color: var(--suave); }
.pie-enlaces a:hover { color: var(--oro); }
.pie-bajo { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 22px; font-size: 12px; }
.pie-bajo a { color: var(--suave); }
.pie-cierre { margin: 26px 0 0; text-align: center; font-size: 11px; color: var(--legal); }
.pie-disclaimer { margin: 10px auto 0; max-width: 78ch; text-align: center; font-size: 10.5px; line-height: 1.7; color: var(--legal); }
.pie-disclaimer.zh { max-width: 52ch; }

/* ── Franja que ofrece la versión china ──────────────────────────────────── */
#ofrecer-zh {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; flex-wrap: wrap; position: relative;
  padding: .55rem 2.5rem .55rem 1rem;
  background: var(--oro-fondo); border-bottom: 1px solid var(--linea);
  color: var(--oro-txt); font-size: 13px;
}
#ofrecer-zh[hidden] { display: none; }
#ofrecer-zh button {
  font: inherit; cursor: pointer; border: 1px solid var(--oro);
  background: transparent; color: var(--oro-txt); padding: .22rem .85rem;
}
#ofrecer-zh button:hover { background: var(--oro-tenue); }
#ofrecer-zh-no {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  border: 0 !important; background: none !important;
  font-size: 1.2rem; line-height: 1; opacity: .6; padding: 0 .4rem !important;
}
#ofrecer-zh-no:hover { opacity: 1; }

/* ── Responsive: dos cortes, como el handoff ─────────────────────────────── */
@media (max-width: 1100px) {
  .faq-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* Con 520px fijos al lado del texto, entre 900 y 1100 quedaba muy justo. */
  .isla-form { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .faq-intro { position: static; }
}

@media (max-width: 900px) {
  /* ── Orden del bloque movil ────────────────────────────────────────────────
     En el telefono todo cae a una columna, y sin esto tres cosas quedaban
     desalineadas: el texto de la banda pegado al borde izquierdo, la ficha de la
     abogada estirada a todo el ancho, y el encabezado repartido a los lados al
     hacer wrap. Se centran las tres.                                          */

  /* La banda va a sangre —eso estaba bien—, pero su texto no tenia respiro
     lateral y arrancaba tocando el borde. */
  .banda-respiro { padding: 62px 0; }
  .banda-respiro .ancho { padding: 0 24px; }
  .banda-respiro .frase,
  .banda-respiro .firma { text-align: center; margin-left: auto; margin-right: auto; }
  .banda-respiro .frase { font-size: 25px; max-width: 20ch; }
  .banda-respiro .frase.zh { font-size: 21px; max-width: 17ch; }

  /* La ficha de la abogada: ancho contenido y centrada, en vez de estirada. */
  .ficha-abogada { max-width: 260px; margin: 0 auto; }
  .ficha-nombre, .ficha-credencial { text-align: center; }

  /* Encabezado: arriba queda SOLO la marca. Los idiomas y el boton de cita
     bajan a una barra fija, que es donde el pulgar llega sin estirarse y donde
     no le comen media pantalla al titular. Se MUEVEN los mismos elementos con
     CSS: no hay marcado duplicado que mantener en dos sitios. */
  .cabecera-sitio > .ancho { justify-content: center; gap: 12px; }
  .marca { justify-content: center; }

  /* ⚠️ El desenfoque del encabezado TIENE que salir en movil. La propiedad
     backdrop-filter crea un bloque contenedor para los descendientes con
     position: fixed, asi que
     la barra de abajo —que vive dentro del encabezado— se anclaba al pie DEL
     ENCABEZADO y no al de la pantalla: quedaba flotando a 69px del borde
     superior. Sin desenfoque, el fondo pasa a ser solido y la barra se ancla a
     la ventana, que es lo que se busca. */
  .cabecera-sitio {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--banda);
  }

  .acciones {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; gap: 8px;
    margin: 0; padding: 9px 12px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    background: var(--head-fondo);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--linea-head);
  }
  /* Los idiomas van pequenos: son un interruptor, no una llamada a la accion. */
  .idiomas { gap: 6px; flex-shrink: 0; }
  .idiomas button { font-size: 11.5px; padding: 7px 11px; }
  .idiomas button[aria-pressed="true"] { font-size: 11.5px; }
  /* El de cita manda, pero ocupando lo que queda: destacado sin ser enorme. */
  .acciones .cta { flex: 1; justify-content: center; font-size: 13.5px; padding: 12px 14px; }

  /* Sitio para la barra, o taparia el pie y el boton de enviar. La barra mide
     63px: con 66 el pie quedaba a 3px de ella, tocandose. 84 deja aire real. */
  body { padding-bottom: 84px; }

  .seccion { padding: 40px 22px; }
  .cabecera-sitio > .ancho { padding: 14px 20px; height: auto; flex-wrap: wrap; }
  .hero > .ancho { padding: 44px 22px 40px; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero {
    /* Las fotos de telefono ya son VERTICALES (2:3), asi que `cover` vuelve a
       ser lo correcto: la imagen tiene la orientacion del hueco y no hay que
       ampliarla. Antes eran apaisadas (960x540) y hubo que anclarlas arriba sin
       ampliar para que se vieran algo; ese parche ya no hace falta. */
    background-size: cover;
    background-position: center top;
    background-image:
      linear-gradient(180deg, rgba(251,249,244,.72) 0%, rgba(251,249,244,.62) 30%,
                              rgba(251,249,244,.90) 62%, rgba(251,249,244,.99) 100%),
      var(--hero-fondo, none);
  }
  body.area-tributario { --hero-fondo: url('/img/landing/bg-tributario-claro-movil.webp'); }
  body.area-penal      { --hero-fondo: url('/img/landing/bg-penal-claro-movil.webp'); }
  body.area-laboral    { --hero-fondo: url('/img/landing/bg-laboral-claro-movil.webp'); }
  body.area-negocios   { --hero-fondo: url('/img/landing/bg-negocios-claro-movil.webp'); }
  .ficha-abogada { max-width: 300px; }
  .titular { font-size: 34px; }
  .titular.zh { font-size: 28px; }
  .titular-2 { font-size: 26px; }
  .titular-2.zh { font-size: 23px; }
  .tabla-fila { grid-template-columns: minmax(0, 1fr); }
  .tabla-fila > * { border-right: 0 !important; }
  .tabla-fila > * + * { border-top: 1px solid var(--linea-3); }
  .riesgo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq { padding: 36px 22px 40px; }
  .faq-panel { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .faq-accion { border-left: 0; border-top: 1px solid var(--linea-2); padding-left: 0; padding-top: 16px; }
  .isla-form { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px 22px; }
  .par { grid-template-columns: minmax(0, 1fr); }
  .pie { padding: 32px 22px; }
}

/* ── Textura y ritmo ─────────────────────────────────────────────────────────
   Lo que hacia que la pagina se sintiera plana no era la falta de fotos: era que
   todas las superficies son color liso. Estas cuatro reglas le dan cuerpo sin
   pedir un solo archivo nuevo, salvo la textura de la banda.                  */

/* Grano de papel. Se genera en el navegador, asi que no pesa ni hay que
   versionar nada. Va fijo y sin capturar clics: es piel, no capa de contenido. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: .30;
  mix-blend-mode: multiply;
}

/* La seccion alterna se distinguia SOLO por color. Una trama de 1px la separa
   mejor y sigue siendo registro documental, no decoracion. */
.seccion--banda {
  background-image: repeating-linear-gradient(
    45deg, transparent 0 7px, rgba(138,106,53,.038) 7px 8px);
}

/* Banda de respiro: corta la monotonia del beige entre dos bloques largos.
   🔑 No contradice la decision de «solo cara clara». Esa decision se tomo porque
   el hanzi de 15px en negativo se empasta (halation) en TEXTO CORRIDO; aca hay
   una sola frase de 34px, tamano en el que el efecto no ocurre. */
.banda-respiro {
  padding: 92px 0; background-color: #14120f;
  background-image: linear-gradient(rgba(20,18,15,.86), rgba(20,18,15,.86)),
                    url('/img/landing/textura-banda.webp');
  background-size: cover; background-position: center;
  border-top: 1px solid var(--linea-2); border-bottom: 1px solid var(--linea-2);
}
.banda-respiro .ancho { max-width: 860px; }
.banda-respiro .frase {
  margin: 0; color: #f2ede2; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 34px; line-height: 1.34; letter-spacing: -.01em; max-width: 24ch;
}
.banda-respiro .frase.zh { font-size: 27px; line-height: 1.62; max-width: 20ch; }
.banda-respiro .firma {
  /* max-width: none — sin esto hereda las 24ch de la frase y la firma se parte
     en tres lineas. */
  margin: 18px 0 0; max-width: none; font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase; color: #b99a63;
}

/* ── Pantallas angostas ──────────────────────────────────────────────────────
   Pensado para plegables cerrados y telefonos chicos (320-400 px), sin nombrar
   ninguno: son reglas por proporcion, no por dispositivo.                     */
@media (max-width: 430px) {
  /* El retrato se limita por ALTO, que es lo que escasea, y no por ancho. */
  .ficha-abogada { max-width: min(260px, 64vw); }
  .ficha-abogada img { max-height: 34vh; object-fit: cover; object-position: center 18%; }

  .seccion { padding: 34px 18px; }
  .hero > .ancho { padding: 32px 18px 30px; }
  .isla-form { padding: 30px 18px; }
  .banda-respiro { padding: 48px 0; }
  .banda-respiro .ancho { padding: 0 18px; }

  /* La barra de abajo no puede desbordar en 320px. */
  .acciones { gap: 6px; padding: 8px 10px; }
  .idiomas button { font-size: 11px; padding: 6px 9px; }
  /* En una linea: partido en dos, el boton principal se lee como un parrafo. */
  .acciones .cta { font-size: 12.5px; padding: 11px 8px; white-space: nowrap; }
  .acciones .cta svg { flex-shrink: 0; }
}