/* =========================================================================
   Dra. Lorena Stubrin — hoja de estilo única del prototipo.

   Orden del archivo:
     01 · Fuentes            @font-face de las tres tipografías de marca
     02 · Tokens             color, tipografía, espaciado, layout, movimiento
     03 · Base               reset mínimo y elementos
     04 · Roles tipográficos .ls-display / .ls-h1 … / .ml
     05 · Utilidades         .gut .wrap .sec .sec-t
     06 · Componentes        botón, micro-link, slot de video, rótulo de
                             ejemplo, anclas, fila, ficha, campo, marco
     07 · Chrome             barra superior, header, menú mobile, barra fija, pie
     08 · Páginas            un bloque por página, en el orden del sitio
     09 · Responsive         quiebres 1080 / 1024 / 900 / 860 / 640 (ref. 390px)

   Para cambiar color, tipografía o espaciado se toca SOLO el bloque 02.

   OJO con `html{scroll-behavior}` en el bloque 03: va en `auto` a propósito.
   El motivo está ahí y en NOTAS_PROYECTO.md. Ponerlo en `smooth` rompe todas
   las anclas del sitio.
   ========================================================================= */


/* =========================================================================
   01 · FUENTES
   Licencias de escritorio: sirven para el prototipo local. Antes de publicar
   hay que resolver licencia web o migrar a TeX Gyre Adventor.
   ========================================================================= */

@font-face{
  font-family:"Avant Garde LT";
  src:url("../assets/fonts/AvantGardeLT%20Book.TTF") format("truetype");
  font-weight:300 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Avant Garde LT";
  src:url("../assets/fonts/AvantGardeLT%20Demi.TTF") format("truetype");
  font-weight:600 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Sackers Gothic";
  src:url("../assets/fonts/Sackers%20Gothic%20Medium%20AT%20Regular.otf") format("opentype");
  font-weight:400 600;font-style:normal;font-display:swap;
}


/* =========================================================================
   02 · TOKENS
   ========================================================================= */

:root{
  /* --- color: paleta acromática, sin color de acento --- */
  --ls-bone:#E3E0DB;
  --ls-offwhite:#FAFAF8;
  --ls-white:#FFFFFF;
  --ls-black:#1E1E1E;
  --ls-grey:#666663;
  --ls-grey-deep:#5A5A57;

  --surface-page:var(--ls-offwhite);
  --surface-bone:var(--ls-bone);
  --surface-ink:var(--ls-black);
  --surface-media:var(--ls-bone);

  --text-primary:var(--ls-black);
  --text-secondary:var(--ls-grey);
  --text-secondary-on-bone:var(--ls-grey-deep);
  --text-inverse:var(--ls-white);
  --text-inverse-muted:rgba(255,255,255,.66);

  /* líneas: mismo grosor que el trazo del isotipo */
  --line-hairline:rgba(30,30,30,.22);
  --line-strong:var(--ls-black);
  --line-inverse:rgba(255,255,255,.34);

  /* el negro es el único color de acción */
  --action-bg:var(--ls-black);
  --action-fg:var(--ls-white);
  --focus-ring:var(--ls-black);

  /* --- tipografía --- */
  --font-display:"Avant Garde LT","ITC Avant Garde Gothic","TeX Gyre Adventor",-apple-system,sans-serif;
  --font-body:var(--font-display);
  --font-label:"Sackers Gothic","Avant Garde LT",-apple-system,sans-serif;

  --fw-book:400;
  --fw-medium:500;
  --fw-demi:600;

  --fs-display-1:clamp(56px,8.4vw,132px);
  --fs-display-2:clamp(42px,5.6vw,88px);
  --fs-h1:clamp(34px,4vw,60px);
  --fs-h2:clamp(26px,2.6vw,40px);
  --fs-h3:22px;
  --fs-h4:17px;
  --fs-body-lg:18px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-caption:13px;
  --fs-label:11px;

  --lh-display:0.95;
  --lh-heading:1.05;
  --lh-title:1.15;
  --lh-body:1.6;
  --lh-tight:1.35;

  --ls-display:-0.02em;
  --ls-heading:-0.01em;
  --ls-title:0.01em;
  --ls-label:0.26em;
  --ls-label-wide:0.32em;

  --measure:64ch;

  /* --- espaciado: el aire es parte de la identidad, base 4 --- */
  --space-1:4px;  --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px; --space-6:32px;  --space-7:48px;  --space-8:64px;
  --space-9:96px; --space-10:128px;--space-11:160px;--space-12:200px;

  --section-y:clamp(80px,10vw,160px);
  --section-y-tight:clamp(56px,6vw,96px);
  --gutter:clamp(24px,5vw,88px);

  /* --- layout: bordes rectos, sin sombras --- */
  --content-max:1360px;
  --bar-height:52px;
  --header-height:88px;
  --tap-min:44px;

  /* --- movimiento: mínimo, nada elástico --- */
  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:160ms;
  --dur-base:280ms;
  --dur-slow:640ms;
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}
}


/* =========================================================================
   03 · BASE
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}

/* El scroll a las anclas lo anima el JS de partials/footer.php, no el CSS:
   scroll-behavior:smooth no dispara en todos los Chrome y deja el click sin
   efecto. Acá queda en auto para que no compitan las dos cosas. */
html{scroll-behavior:auto}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
img{display:block;max-width:100%}
button{font:inherit}

a{
  color:var(--text-primary);
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-standard),
             opacity var(--dur-fast) var(--ease-standard);
}
a:active{opacity:.82}

:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
::selection{background:var(--ls-black);color:var(--ls-white)}

/* Fotografía: siempre blanco y negro. */
.bn{filter:grayscale(1)}


/* =========================================================================
   04 · ROLES TIPOGRÁFICOS
   Los títulos de sección van en mayúsculas y terminan con punto final.
   ========================================================================= */

.ls-display{font-family:var(--font-display);font-weight:var(--fw-demi);font-size:var(--fs-display-1);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase}
.ls-display-2{font-family:var(--font-display);font-weight:var(--fw-demi);font-size:var(--fs-display-2);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase}
.ls-h1{font-family:var(--font-display);font-weight:var(--fw-demi);font-size:var(--fs-h1);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);text-transform:uppercase}
.ls-h2{font-family:var(--font-display);font-weight:var(--fw-demi);font-size:var(--fs-h2);line-height:var(--lh-title);letter-spacing:var(--ls-heading);text-transform:uppercase}
.ls-h3{font-family:var(--font-display);font-weight:var(--fw-demi);font-size:var(--fs-h3);line-height:var(--lh-title);letter-spacing:var(--ls-title);text-transform:uppercase}
.ls-h4{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-h4);line-height:var(--lh-tight);letter-spacing:.06em;text-transform:uppercase}
.ls-body-lg{font-family:var(--font-body);font-weight:var(--fw-book);font-size:var(--fs-body-lg);line-height:var(--lh-body)}
.ls-body{font-family:var(--font-body);font-weight:var(--fw-book);font-size:var(--fs-body);line-height:var(--lh-body)}
.ls-body-sm{font-family:var(--font-body);font-weight:var(--fw-book);font-size:var(--fs-body-sm);line-height:var(--lh-body)}
.ls-caption{font-family:var(--font-body);font-weight:var(--fw-book);font-size:var(--fs-caption);line-height:var(--lh-tight);color:var(--text-secondary)}

/* Micro-label Sackers: solo mayúsculas, tracking amplio, tamaño chico. */
.ml{font-family:var(--font-label);font-weight:var(--fw-medium);font-size:var(--fs-label);line-height:1;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-primary)}
.ml--muted{color:var(--text-secondary)}
.ml--bone{color:var(--text-secondary-on-bone)}
.ml--inv{color:var(--text-inverse-muted)}
.ml--wide{letter-spacing:var(--ls-label-wide)}

/* Color de texto por superficie. */
.t-muted{color:var(--text-secondary)}
.t-bone{color:var(--text-secondary-on-bone)}
.t-inv{color:var(--text-inverse)}
.t-inv-muted{color:var(--text-inverse-muted)}


/* =========================================================================
   05 · UTILIDADES DE LAYOUT
   ========================================================================= */

.gut{padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap{max-width:var(--content-max);margin:0 auto;width:100%}
.sec{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.sec-t{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}

.s-page{background:var(--surface-page)}
.s-bone{background:var(--surface-bone)}
.s-ink{background:var(--surface-ink);color:var(--text-inverse)}

.row-between{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(32px,4vw,88px);flex-wrap:wrap}
.stack{display:flex;flex-direction:column}
.only-mob{display:none!important}
.no-mob{display:block}


/* =========================================================================
   06 · COMPONENTES COMPARTIDOS
   ========================================================================= */

/* --- Botón: el negro es el único color de acción. Sin radio, sin sombra. --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  font-family:var(--font-display);font-weight:var(--fw-demi);text-transform:uppercase;
  padding:16px 32px;font-size:12px;letter-spacing:.2em;min-height:var(--tap-min);
  background:var(--action-bg);color:var(--action-fg);
  border:1px solid var(--action-bg);border-radius:0;box-shadow:none;
  cursor:pointer;white-space:nowrap;text-align:center;
  transition:opacity var(--dur-fast) var(--ease-standard),
             background-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.btn:hover{opacity:.86}
.btn--sm{padding:10px 20px;font-size:11px;min-height:38px}
.btn--lg{padding:20px 44px;font-size:13px;letter-spacing:.22em;min-height:58px}
.btn--full{width:100%}
/* Sobre fondo oscuro se invierte: papel blanco, tinta negra. */
.btn--inv{background:var(--ls-white);color:var(--ls-black);border-color:var(--ls-white)}
.btn--sec{background:transparent;color:var(--ls-black);border-color:var(--ls-black);font-weight:var(--fw-medium)}
.btn--sec:hover{background:var(--ls-black);color:var(--ls-white);opacity:1}

/* --- Micro-link: label con subrayado fino --- */
.mlink{
  display:inline-block;font-family:var(--font-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--line-hairline);
  transition:border-color var(--dur-fast) ease;
}
.mlink:hover{border-bottom-color:var(--ls-black)}
.mlink--plain{border-bottom-color:transparent}
.mlink--plain:hover{border-bottom-color:var(--ls-black)}
.mlink--inv{color:var(--text-inverse);border-bottom-color:var(--line-inverse)}
.mlink--inv:hover{border-bottom-color:var(--ls-white)}

/* --- Miga de pan --- */
.bcrumb{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* --- Slot de testimonio en video ---
   El marco es vertical 9:16 y ocupa el ancho de su columna: el formato es
   parte del mensaje —vertical, grabado con celular, sin producción—, así que
   no se acuesta ni se recorta. Botón de play centrado y leyenda DEBAJO del
   marco, nunca al costado. Es el mismo objeto en la home y en Casos.
   Deja la tarjeta más alta que las de texto: es esperable, no se compensa. */
.vslot{display:flex;flex-direction:column;gap:var(--space-4)}
.vframe{
  aspect-ratio:9 / 16;border:1px solid var(--line-hairline);
  background:var(--surface-bone);
  display:flex;align-items:center;justify-content:center;
}
.video-play{
  width:64px;height:64px;flex:0 0 auto;border-radius:999px;
  border:1px solid var(--line-hairline);
  display:flex;align-items:center;justify-content:center;
}
.vslot-cap{display:flex;flex-direction:column;gap:var(--space-2)}

/* --- Rótulo de contenido de ejemplo ---
   Sólo para citas y testimonios atribuidos a una persona mientras no sean
   reales. Los datos del sitio (dirección, horarios, redes) NUNCA se rotulan:
   ahí va un placeholder que se lea como dato. Ver CLAUDE.md. */
.pend{
  display:inline-block;border:1px solid var(--line-hairline);
  padding:9px 14px;max-width:44ch;
  font-family:var(--font-label);font-size:10px;line-height:1.7;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-secondary);
}
.pend--bone{color:var(--text-secondary-on-bone)}
.pend--inv{border-color:var(--line-inverse);color:var(--text-inverse-muted)}

/* --- Anclas: el header pegajoso no puede tapar el destino --- */
section[id],.moment[id],.logic[id],.grupo[id]{scroll-margin-top:104px}

/* --- Filas etiqueta + texto --- */
.rows{display:flex;flex-direction:column;gap:clamp(28px,3vw,44px)}
.row{display:flex;flex-direction:column;gap:var(--space-4);border-top:1px solid var(--line-hairline);padding-top:var(--space-5)}
.row--ink{border-top-color:var(--line-inverse)}

/* --- Fichas con línea superior --- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3vw,64px)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{display:flex;flex-direction:column;gap:var(--space-5);border-top:1px solid var(--line-hairline);padding-top:var(--space-6)}
.card--ink{border-top-color:var(--line-inverse)}
.card--strong{border-top-color:var(--ls-black)}

/* --- Dos columnas con encabezado pegajoso --- */
.two{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,120px);align-items:start}
.two--wide{grid-template-columns:1fr 1.15fr}
.sticky-head{position:sticky;top:120px}

/* --- Encabezado de sección: micro-label + título + bajada --- */
.shead{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.shead h1,.shead h2,.shead p{margin:0}
.shead .shead-t{max-width:20ch}
.shead .shead-l{max-width:44ch}
.shead--right{align-items:flex-end;text-align:right}

/* --- Mira: lenguaje de precisión médica --- */
.crosshair{display:block}

/* --- Marco de imagen: B&N, borde recto, sin sombra --- */
.frame{margin:0}
.frame-box{position:relative;background:var(--surface-media);overflow:hidden}
.frame-box img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.frame figcaption{margin-top:var(--space-3)}

/* --- Campo de formulario: línea inferior, sin caja rellena --- */
.field{display:block}
.field > span{
  display:block;margin-bottom:var(--space-2);
  font-family:var(--font-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary);
}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;outline:none;border-radius:0;
  border-bottom:1px solid var(--line-hairline);
  padding:10px 0;font-family:var(--font-body);font-size:var(--fs-body);
  line-height:var(--lh-tight);color:var(--ls-black);resize:vertical;
  transition:border-color var(--dur-fast) var(--ease-standard);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-secondary);opacity:.75}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--ls-black)}
.field--inv > span{color:var(--text-inverse-muted)}
.field--inv input,.field--inv textarea{color:var(--ls-white);border-bottom-color:var(--line-inverse)}
.field--inv input::placeholder,.field--inv textarea::placeholder{color:var(--text-inverse-muted)}
.field--inv input:focus,.field--inv textarea:focus{border-bottom-color:var(--ls-white)}

/* --- Formulario que envía: campo con error, avisos y trampa anti-spam ---
   NO HAY ROJO, y no es un olvido: el sistema no tiene color de acento y el
   negro es el único color de acción. Un campo con error se marca con la línea
   al doble de grosor y en negro, más el texto abajo. Contraste y peso, no
   color, que es la regla del resto del sitio. */
.field--mal input,.field--mal textarea{
  border-bottom-width:2px;border-bottom-color:var(--line-strong)}
.field--mal > span{color:var(--text-primary)}
.field-mal{display:block;margin-top:var(--space-2);font-style:normal;
  font-family:var(--font-body);font-size:var(--fs-body-sm);color:var(--text-primary)}

.form-aviso{margin:0 0 var(--space-6);padding:var(--space-4) var(--space-5);
  font-family:var(--font-body);font-size:var(--fs-body-sm);
  line-height:var(--lh-body);color:var(--text-primary);
  background:var(--surface-bone);border-left:2px solid var(--line-strong)}
.form-aviso--bien{background:var(--surface-ink);color:var(--text-inverse);
  border-left-color:var(--line-inverse)}

/* La trampa: fuera de la pantalla, no display:none, que algunos bots detectan. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Página de confirmación de enviar.php ---
   Es un archivo suelto, sin el header ni el pie del sitio: en la copia
   estática no hay PHP compartido del que colgarse. Lleva el lockup y el
   camino de vuelta, y con JavaScript nadie la ve porque la respuesta queda
   en la misma página. */
.gracias-body{background:var(--surface-bone)}
.gracias{min-height:100vh;display:flex;align-items:center;
  padding-block:clamp(48px,8vw,120px)}
.gracias-logo{display:inline-block;margin-bottom:clamp(40px,6vw,80px)}
.gracias-logo img{height:36px;width:auto;display:block}
.gracias-t{margin:var(--space-5) 0 0;max-width:14ch}
.gracias-l{margin:clamp(24px,3vw,40px) 0 0;max-width:52ch}
.gracias-acts{display:flex;align-items:center;gap:clamp(24px,3vw,48px);
  flex-wrap:wrap;margin-top:clamp(32px,4vw,56px)}
.gracias-form{margin-top:clamp(32px,4vw,56px);max-width:720px}

/* --- Opciones tipo puerta de entrada (selección rápida) --- */
.opts{display:grid;gap:var(--space-3)}
.opt{display:flex;align-items:flex-start;gap:var(--space-4);cursor:pointer;
  border:1px solid var(--line-hairline);padding:var(--space-5);min-height:var(--tap-min)}
.opt input{appearance:none;width:13px;height:13px;margin:3px 0 0;flex:0 0 auto;
  border:1px solid var(--ls-black);background:transparent;border-radius:0}
.opt input:checked{background:var(--ls-black)}
.opt:hover{border-color:var(--ls-black)}
.opt:has(input:checked){border-color:var(--ls-black)}


/* =========================================================================
   07 · CHROME COMPARTIDO — barra superior, header, menú, barra fija, pie
   Definición mobile: design/mobile-header-menu-footer/
   ========================================================================= */

/* --- Barra superior --- */
.topbar{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--space-6);
  min-height:var(--bar-height);padding:0 var(--gutter);
  border-bottom:1px solid var(--line-hairline);background:var(--surface-page);
}
.topbar span{white-space:nowrap}
.tb-social{display:flex;align-items:center;gap:var(--space-4)}
.tb-social a{display:inline-flex;color:var(--text-secondary)}

/* --- Header sticky --- */
.stick{position:sticky;top:0;z-index:40;background:var(--surface-page)}

.hdr-desk{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  min-height:var(--header-height);padding:0 var(--gutter);
  border-bottom:1px solid var(--line-hairline);background:var(--surface-page);
}
.hdr-desk nav{display:flex;align-items:center;gap:var(--space-7)}
.hdr-desk nav a,.hdr-desk nav span{white-space:nowrap}
.hdr-desk .mlink{border-bottom-color:transparent}
.hdr-desk .mlink.on{border-bottom-color:var(--ls-black)}
/* Casos todavía no existe como página: queda en el menú sin enlace activo. */
.nav-off{
  display:inline-block;font-family:var(--font-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid transparent;
  color:var(--text-secondary);cursor:default;
}

/* Logo oficial: se usa el archivo tal cual, respetando sus proporciones.
   EL LOCKUP VA SIEMPRE COMPLETO. No se recorta al isotipo en ningún ancho.
   flex-shrink:0 en los dos niveles NO es redundante y no se saca: el header es
   un flex container y el .lockup es otro. Sin esto, el navegador le achata la
   imagen a lo ancho mientras le sostiene el alto, y el logo se deforma hasta
   volverse ilegible. Cuando deja de haber lugar no se comprime: se cambia de
   header, y más abajo se baja de tamaño. Ver el bloque 09. */
.lockup{display:flex;align-items:center;border:0;flex-shrink:0}
/* AJUSTE ÓPTICO, NO UNA MEDIDA REDONDA. Estuvo en 36px y se subió a 40 —un
   11%— porque "DRA. LORENA STUBRIN" se leía más chico que CÓMO TRABAJO.
   No es que fuera más chico: medido, la altura de mayúsculas del lockup a 36px
   era 9.2px contra 8.2px del menú, o sea ya un 12% MÁS ALTA. Lo que lo hacía
   retroceder es que el texto del lockup es gris claro y de trazo fino, y el
   menú es tinta y va con 0.26em de tracking. Por eso igualar píxeles no
   alcanzaba y el ajuste es a ojo, no aritmético. */
.lockup img{height:40px;width:auto;flex-shrink:0;max-width:none}

.hdr-mob{display:none!important}
.mob-head{
  align-items:center;justify-content:space-between;height:64px;padding:0 var(--gutter);
  border-bottom:1px solid var(--line-hairline);background:var(--surface-page);
}
/* EL HEADER MOBILE SE QUEDA EN 34px, Y NO ES UN OLVIDO DEL AJUSTE ÓPTICO.
   El ajuste de 36 a 40 es del header DESKTOP: nace de emparejar el lockup con
   los ítems del menú, y en mobile no hay ítems al lado, hay un botón.
   Probado a 38: entre 361 y 375 el lockup queda a 0px del botón MENÚ, contra
   los 16 de aire mínimo que se respetan en todo el sitio. A 34 quedan 53px a
   390 y 25 a 361. */
.mob-head .lockup img{height:34px}
.menu-btn{
  border:0;background:transparent;font-family:var(--font-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;cursor:pointer;
  min-height:var(--tap-min);padding:0;color:var(--ls-black);
}

/* --- Menú desplegado: pantalla completa sobre off-white, sin velo --- */
.drawer{
  position:fixed;inset:0;z-index:60;background:var(--surface-page);
  display:flex;flex-direction:column;padding:20px var(--gutter) 40px;
}
.drawer[hidden]{display:none}
/* La cabecera del menú desplegado: el lockup COMPLETO a la izquierda —enlazado
   a la portada— y el botón de cerrar a la derecha. Antes acá iba el isotipo
   solo y sin enlace: era la única parte del sitio donde el lockup se recortaba,
   y desde el celular no había forma de volver al inicio.
   El `gap` es el aire mínimo contra el botón; el `min-width:0` del lockup deja
   que se achique en vez de empujar al botón fuera del margen. */
.drawer-top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-5);min-height:44px}
.drawer-lockup{min-width:0}
.drawer-top img{height:32px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.drawer-nav{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-9)}
.drawer-nav a,.drawer-nav span{border-bottom:1px solid var(--line-hairline);padding-bottom:var(--space-5)}
.drawer-nav span{color:var(--text-secondary)}
.drawer-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-5)}
.drawer-data{display:flex;flex-direction:column;gap:10px}
.drawer-social{display:flex;align-items:center;gap:var(--space-6)}
.drawer-social a{display:inline-flex;color:var(--text-secondary)}

/* --- Barra fija inferior (mobile) --- */
.bar-fixed{position:fixed;left:0;right:0;bottom:0;z-index:50}
.bar-actions{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border-top:1px solid var(--line-hairline);background:var(--surface-page);
}
.bar-actions a{
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--line-hairline);min-height:var(--tap-min);padding:18px 12px;
  font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ls-black);
}
.bar-actions a+a{
  border-right:0;background:var(--action-bg);color:var(--action-fg);font-weight:var(--fw-demi);
}

/* --- Pie --- */
.foot{background:var(--surface-ink);color:var(--text-inverse)}
.foot-cols{
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:clamp(24px,3vw,56px);
  border-top:1px solid var(--line-inverse);
  padding-top:var(--space-9);padding-bottom:var(--space-9);
}
.foot-col{display:flex;flex-direction:column;gap:var(--space-5)}
.foot-brand{display:flex;flex-direction:column;gap:var(--space-6)}
/* Lockup vertical: más alto que ancho, así que se mide por ancho. */
.foot-brand img{width:132px;max-width:100%;height:auto}
.foot a{color:var(--text-inverse);border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:var(--line-inverse)}
.foot-social{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-4)}
.foot-social a{display:inline-flex;color:var(--text-inverse);border:0}
.foot-end-wrap{border-top:1px solid var(--line-inverse)}
.foot-end{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;
  padding-top:18px;padding-bottom:18px}

/* El bloque de la derecha: copyright arriba, crédito debajo, los dos alineados
   a la derecha. El crédito es micro-label como todo el pie, pero un escalón
   más chico y en el gris más apagado del inverso: tiene que leerse subordinado
   al nombre de la clienta, no al lado de él. Sin logo ni isotipo, sólo texto. */
.foot-firma{display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  text-align:right}
.foot-credito{font-size:10px;letter-spacing:var(--ls-label-wide);
  color:rgba(255,255,255,.42)}
.foot-credito a{color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px;
  transition:color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard)}
.foot-credito a:hover{color:var(--ls-white);border-bottom-color:var(--ls-white)}


/* =========================================================================
   08 · PÁGINAS
   ========================================================================= */

/* ---------- PÁGINA NO ENCONTRADA ------------------------------------- */

/* Sin ilustración de error y sin el número gigante: el isotipo recortado por
   el borde, que es el mismo recurso del inicio, y los accesos del menú. */
.e404{position:relative;overflow:hidden;
  min-height:min(72vh,700px);display:flex;align-items:center}
/* Va con el .e404 adelante para ganarle a .hero-mark, que se define más
   abajo —en el bloque de la home— y con la misma especificidad le pisaba el
   `left`. Sin esto el isotipo se va a la izquierda y queda abajo del texto. */
.e404 .e404-mark{left:auto;right:-12vw;bottom:-22vw;height:54vw;max-height:640px}
.e404-txt{position:relative;z-index:1}
.e404-t{margin:var(--space-6) 0 0;max-width:16ch}
.e404-l{margin:clamp(24px,3vw,40px) 0 0;max-width:52ch}

.e404-nav{display:flex;flex-wrap:wrap;gap:clamp(20px,2.6vw,44px);
  margin-top:clamp(32px,4vw,56px);padding-top:var(--space-6);
  border-top:1px solid var(--line-hairline)}
.e404-link{color:var(--text-secondary-on-bone);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:3px;
  transition:color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard)}
.e404-link:hover{color:var(--text-primary);border-bottom-color:var(--text-primary)}

.e404-acts{display:flex;align-items:center;gap:clamp(24px,3vw,48px);
  flex-wrap:wrap;margin-top:clamp(32px,4vw,56px)}

/* ---------- HOME ---------------------------------------------------- */

.hero{
  display:grid;grid-template-columns:1.06fr .94fr;background:var(--surface-bone);
  position:relative;overflow:hidden;min-height:min(84vh,820px);
}
/* Un hijo de grid trae `min-width:auto`, o sea que NO PUEDE ACHICARSE por
   debajo de su contenido más ancho. Con el botón del héroe en una sola línea,
   eso arrastraba la columna a 346px y el sitio desbordaba a lo ancho a 320px.
   El `min-width:0` deja que la columna se ajuste al viewport; que el botón
   entre lo resuelve la regla de abajo de 360px. */
.hero-txt,.hero-media{min-width:0}
/* El isotipo en gran escala, recortado por el borde, como elemento estructural. */
.hero-mark{position:absolute;left:-14vw;bottom:-24vw;height:58vw;max-height:760px;
  opacity:.11;pointer-events:none;user-select:none}
.hero-txt{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(40px,5vw,80px) var(--gutter) clamp(40px,5vw,72px);
}
.hero-title{margin:clamp(48px,6vw,88px) 0 0;max-width:13ch}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);
  flex-wrap:wrap;margin-top:clamp(40px,5vw,72px)}
.hero-foot p{margin:0;max-width:30ch}
.hero-media{position:relative;background:var(--surface-media);min-height:58vw;max-height:820px}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.hero-cross{position:absolute;left:58%;top:38%}

.doors{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-hairline);
  border-bottom:1px solid var(--line-hairline);
}
.door{
  display:flex;flex-direction:column;gap:var(--space-6);
  padding:clamp(40px,4vw,64px) clamp(28px,3vw,52px) clamp(48px,5vw,72px);
  border-left:1px solid var(--line-hairline);position:relative;
}
.door:first-child{border-left:0}
/* Al pasar el mouse, las líneas de arriba y de abajo se llenan de negro de
   izquierda a derecha. Mismo timing y misma curva que el .mlink, para que se
   lea como el mismo gesto. Las laterales no cambian. */
.door::before,.door::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:var(--ls-black);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-fast) ease;
}
.door::before{top:-1px}
.door::after{bottom:-1px}
.door:hover::before,.door:hover::after{transform:scaleX(1)}
.door h3{margin:0;max-width:11ch}
.door p{margin:0;max-width:26ch}
.door-go{margin-top:auto;align-self:flex-start}
.door:hover .door-go{border-bottom-color:var(--ls-black)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,72px)}
.step{border-top:1px solid var(--ls-black);padding-top:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-5)}
.step h3{margin:0}
.step p{margin:0}
.step .step-l{max-width:24ch}
.step .step-d{max-width:34ch}

.signature{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px);flex-wrap:wrap;
  border-top:1px solid var(--ls-black);padding-top:var(--space-6);margin-top:clamp(48px,6vw,96px)}
.sig-mark{width:72px;height:72px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-hairline);border-radius:999px;overflow:hidden}
.sig-mark img{height:44px;width:auto}
.sig-txt{display:flex;flex-direction:column;gap:var(--space-3);max-width:46ch}
.signature .mlink{margin-left:auto}

.plans{display:grid;grid-template-columns:1fr 1fr}
.plan{padding:clamp(32px,3vw,56px) clamp(28px,3vw,56px) clamp(40px,4vw,64px);
  border-top:1px solid var(--ls-black)}
.plan:first-child{padding-left:0}
.plan+.plan{border-left:1px solid var(--line-hairline);padding-right:0}
.plan h3{margin:var(--space-6) 0 var(--space-5);max-width:12ch}
.plan p{margin:0;max-width:38ch}

.matrix{display:grid;grid-template-columns:1.1fr 1fr 1fr;column-gap:clamp(24px,3vw,56px)}
.matrix>div{padding:22px 0;border-top:1px solid var(--line-hairline)}

.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px);
  margin-top:clamp(16px,2vw,32px)}
.tcard{display:flex;flex-direction:column;border-top:1px solid var(--line-hairline);
  padding-top:var(--space-5);color:inherit}
.tcard-i{margin-bottom:var(--space-5)}
.tcard h3{margin:0 0 var(--space-3)}
.tcard p{margin:0;max-width:38ch}
.tcard .mlink{margin-top:var(--space-5);align-self:flex-start}

/* Línea con el resto del catálogo, debajo de las cuatro cards. Nombres al
   hilo, de margen a margen, separados por punto medio. Sin cards y sin
   imágenes a propósito: muestra volumen sin pelearle jerarquía a los cuatro
   destacados de arriba.

   TODOS LOS NOMBRES CON EL MISMO PESO Y EL MISMO GRIS. La lista no establece
   jerarquía entre tratamientos: no lleva negritas, ni un ítem destacado, ni
   el "ver todos" metido adentro. Ese link se repite aparte, al pie.

   NO ES MICRO-LABEL, y no es un descuido. En micro-label —11px con 0.26em de
   tracking y en mayúsculas— los veinte nombres ocupaban seis líneas, y se
   pidieron tres de margen a margen. Uppercase y tracking son justamente lo
   que ensancha. Queda entonces la tipografía de cuerpo, en el gris
   secundario: es una lista de nombres, que es contenido, no un rótulo. */
.cat-linea{margin-top:clamp(40px,5vw,72px);padding-top:var(--space-6);
  border-top:1px solid var(--line-hairline)}
.cat-linea-t{display:block;margin-bottom:var(--space-5)}
.cat-linea-l{margin:0;max-width:none;
  font-family:var(--font-body);font-size:var(--fs-body);line-height:2;
  /* Reparte los nombres entre los tres renglones. Sin esto el último cae solo
     en una cuarta línea de un ítem, que se lee como un error de armado.
     Donde el navegador no lo soporte simplemente no lo aplica: no rompe nada,
     y a anchos de celular la lista tiene demasiadas líneas para que actúe. */
  text-wrap:balance}
.cat-par{white-space:nowrap}
/* El ítem que reúne los cinco de Candela es una frase, no un nombre: mide
   demasiado para sostenerlo entero en un renglón y se deja partir. */
.cat-par--grupo{white-space:normal}
.cat-item{color:var(--text-secondary);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard)}
.cat-item:hover{color:var(--text-primary);border-bottom-color:var(--text-primary)}
.cat-sep{color:var(--text-secondary);margin:0 .45em;opacity:.6}

/* En el pie, el mismo cierre que la línea de la home: la columna de
   tratamientos no puede leerse como el catálogo completo. */
.foot-todos{margin-top:var(--space-3);text-decoration:underline;
  text-underline-offset:4px}

/* El slot abre la sección alineado con la primera columna de las citas: misma
   grilla, mismo ancho, para que se lea como una voz más. */
.video-feature{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,72px);
  align-items:start;margin-bottom:clamp(48px,6vw,96px)}
.video-feature > p{margin:0;max-width:30ch}

.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,72px);align-items:start}
.voice{display:flex;flex-direction:column;gap:var(--space-5);
  border-top:1px solid var(--line-hairline);padding-top:var(--space-6)}
.voice-q{margin:0;font-family:var(--font-display);font-weight:var(--fw-book);
  font-size:clamp(20px,1.9vw,26px);line-height:var(--lh-title);letter-spacing:var(--ls-heading)}
.voice-id{display:flex;align-items:center;gap:16px;margin-top:var(--space-4)}
.voice-ph{width:46px;height:46px;border-radius:999px;border:1px solid var(--line-hairline);flex:0 0 auto}

.notes-row{display:grid;grid-template-columns:150px 1.1fr 1fr 130px;align-items:baseline;
  gap:clamp(16px,2vw,40px);padding:32px 0;border-top:1px solid var(--line-hairline);color:inherit}
.notes-row h3{margin:0}
.notes-row p{margin:0;max-width:46ch}
.notes-row:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.note-go{justify-self:end}

.turno{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,120px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-6)}
.form-foot{grid-column:1 / -1;display:flex;align-items:center;gap:var(--space-7);
  flex-wrap:wrap;margin-top:var(--space-4)}
.form-foot p{margin:0;max-width:34ch}

/* ---------- CÓMO TRABAJO -------------------------------------------- */

.apertura-foot{display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(32px,5vw,96px);margin-top:clamp(40px,5vw,72px)}
.apertura-txt{display:flex;flex-direction:column;gap:var(--space-5);max-width:52ch}
/* Los índices de navegación no se numeran. */
.recorrido{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,40px);
  margin-top:clamp(48px,6vw,96px)}
.paso{display:flex;flex-direction:column;gap:var(--space-4);
  border-top:1px solid var(--ls-black);padding-top:var(--space-5)}
.paso-name{display:inline-block;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color var(--dur-fast) ease}
.paso:hover .paso-name{border-bottom-color:var(--ls-black)}
.prose-inv{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);max-width:56ch;
  border-top:1px solid var(--line-inverse);padding-top:var(--space-6)}
.prose-inv p{margin:0}
.control{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,64px);
  margin-top:clamp(40px,5vw,80px)}
.ctrl{display:flex;flex-direction:column;gap:var(--space-5);
  border-top:1px solid var(--ls-black);padding-top:var(--space-6)}
.ctrl h3{margin:0}
.ctrl p{margin:0;max-width:34ch}

/* ---------- PLANES --------------------------------------------------- */

.two-logics{display:grid;grid-template-columns:1fr 1fr}
.logic{display:flex;flex-direction:column;
  padding:var(--space-6) clamp(24px,3vw,56px) clamp(40px,4vw,64px) 0;
  border-top:1px solid var(--ls-black)}
.logic+.logic{padding-left:clamp(24px,3vw,56px);padding-right:0;
  border-left:1px solid var(--line-hairline)}
.logic h2{margin:0 0 var(--space-5);max-width:14ch}
.logic-rule{margin:0;max-width:28ch}
.logic-rows{display:flex;flex-direction:column;gap:clamp(28px,3vw,44px);
  margin-top:clamp(36px,4vw,64px)}
.logic-row{display:flex;flex-direction:column;gap:var(--space-4)}
.logic-row p{margin:0;max-width:42ch}
.logic-row h3{margin:0}
.tlist{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:baseline}
.tlist>.ml{min-width:84px}
.tlist p{margin:0;max-width:40ch;line-height:1.9}
.tlist p a{border-bottom:1px solid var(--line-hairline)}
.tlist p a:hover{border-bottom-color:var(--ls-black)}

.fork{display:flex;flex-direction:column}
.fork-top{display:flex;justify-content:center}
.fork-node{border:1px solid var(--line-hairline);padding:var(--space-6) clamp(28px,4vw,64px);
  text-align:center}
.fork-node .ls-h2{margin-top:var(--space-4);display:block}
.fork-lines{width:100%;height:120px;display:block}
.fork-branches{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,88px)}
.branch{border-top:1px solid var(--ls-black);padding-top:var(--space-6)}
.branch h3{margin:var(--space-5) 0}
.branch-rows{display:grid;grid-template-columns:120px 1fr;gap:var(--space-4) var(--space-5);margin:0}
.branch-rows dt{margin:0}
.branch-rows dd{margin:0;max-width:34ch}

.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
.moment{display:flex;flex-direction:column;gap:var(--space-5);
  border-top:1px solid var(--line-hairline);padding-top:var(--space-6);min-height:220px}
.moment h3{margin:0;max-width:13ch}
.moment p{margin:0}
.moment .mlink{margin-top:auto;align-self:flex-start}

/* ---------- TRATAMIENTOS (catálogo) ---------------------------------- */

.grupos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,96px);align-items:start}
/* Igual que los hijos del héroe: sin el `min-width:0`, la columna del
   catálogo no puede achicarse por debajo del ítem más ancho —el nombre del
   tratamiento más su etiqueta, las dos en una línea— y arrastraba el ancho de
   todo el sitio a 320px. */
.grupo{display:flex;flex-direction:column;gap:clamp(28px,3vw,48px);min-width:0}
.grupo-head{display:flex;flex-direction:column;gap:var(--space-4);
  border-top:1px solid var(--ls-black);padding-top:var(--space-6);background:var(--surface-page)}
.grupo-head h2{margin:0}
.grupo-head p{margin:0}
.subgrupo{display:flex;flex-direction:column;gap:var(--space-4)}
.item{border-top:1px solid var(--line-hairline);padding:14px 0}
.item-link{display:block;color:inherit}
.item-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5)}
.item-name{margin:0 0 4px;display:inline-block;border-bottom:1px solid transparent;
  padding-bottom:2px;transition:border-color var(--dur-fast) ease}
.item-link:hover .item-name{border-bottom-color:var(--ls-black)}
.item-line{margin:0;color:var(--text-secondary);max-width:46ch}
.item-note{margin-top:10px}

/* ---------- FICHA DE TRATAMIENTO ------------------------------------- */

.apertura{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,96px);align-items:start}
.idx{display:flex;flex-direction:column;gap:var(--space-4);margin-top:clamp(40px,5vw,72px);
  border-top:1px solid var(--line-hairline);padding-top:var(--space-6);max-width:34ch}
.idx-link{font-family:var(--font-label);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-secondary-on-bone);padding-bottom:6px;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease}
.idx-link:hover{border-bottom-color:var(--ls-black);color:var(--ls-black)}
.protocolo{display:grid;grid-template-columns:1fr 1fr auto;gap:clamp(24px,4vw,88px);
  align-items:end;border-top:1px solid var(--ls-black);padding-top:var(--space-6)}
.protocolo h2{margin:var(--space-5) 0 0}
.protocolo p{margin:0;max-width:46ch}
/* Título de la ficha. "Fotorejuvenecimiento" son veinte caracteres en una sola
   palabra: a 390px no entra en el ancho de columna a tamaño display y se sale
   de la pantalla. Con lang="es" en el <html>, hyphens:auto lo corta por sílaba
   y con guión. El break-word es la red por si el navegador no tiene el
   diccionario: prefiero un corte feo a un desborde horizontal. */
.ficha-title{hyphens:auto;overflow-wrap:break-word}

/* El bloque de fondo oscuro es siempre el lugar de la negativa o el límite. */
.nocases{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,80px);
  margin-top:clamp(48px,6vw,96px)}
.nocase{display:flex;flex-direction:column;gap:var(--space-5);
  border-top:1px solid var(--line-inverse);padding-top:var(--space-6)}
.nocase h3{margin:0}
.nocase p{margin:0;max-width:44ch}
.combina-row{display:grid;grid-template-columns:1.1fr 160px 1.4fr;gap:clamp(16px,2vw,40px);
  align-items:baseline;border-top:1px solid var(--line-hairline);padding:var(--space-6) 0;color:inherit}
.combina-row h3{margin:0;display:inline-block;border-bottom:1px solid transparent;padding-bottom:2px}
.combina-row:hover h3{border-bottom-color:var(--ls-black)}
.combina-row p{margin:0;max-width:46ch}

/* ---------- CASOS ----------------------------------------------------- */

.casos-open{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);
  align-items:end;margin-top:clamp(40px,5vw,72px)}
.casos-open-txt{display:flex;flex-direction:column;gap:var(--space-5);max-width:50ch}
.casos-open-txt p{margin:0}

/* Registro de antigüedad: la barra mide años en control, no resultados. */
.ledger{display:flex;flex-direction:column;gap:var(--space-5)}
.ledger-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(16px,2vw,28px);border-top:1px solid var(--ls-black);padding-top:var(--space-4)}
.ledger-bar{display:block;height:1px;background:var(--line-hairline)}
.ledger-bar > span{display:block;height:1px;background:var(--ls-black)}
.ledger-años{white-space:nowrap}

.casos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,72px);
  align-items:start}
.caso{display:flex;flex-direction:column;gap:var(--space-5);
  border-top:1px solid var(--line-hairline);padding-top:var(--space-6)}
.caso-quote{margin:0;font-family:var(--font-display);font-weight:var(--fw-book);
  font-size:clamp(20px,1.9vw,26px);line-height:var(--lh-title);letter-spacing:var(--ls-heading)}
.caso-nota{margin:0}
.caso-id{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:var(--space-4)}

.tiempo-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(32px,5vw,96px)}
.tiempo{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,48px);
  margin-top:clamp(48px,6vw,96px)}
.hito{display:flex;flex-direction:column;gap:var(--space-4);
  border-top:1px solid var(--ls-black);padding-top:var(--space-5);position:relative}
.hito::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;
  border-radius:999px;background:var(--ls-black)}
.hito h3{margin:0}
.hito p{margin:0;max-width:30ch}
.tiempo-foot{display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(24px,3vw,64px);margin-top:clamp(40px,5vw,80px)}

/* ---------- LORENA ---------------------------------------------------- */

.apertura--lorena{grid-template-columns:1.15fr .85fr;align-items:center}
.apertura-foto{max-width:440px;width:100%;justify-self:end}
.formacion{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,120px);
  margin-top:clamp(40px,5vw,72px);align-items:start}
.formacion h2{margin:0;max-width:16ch}
.formacion-txt{display:flex;flex-direction:column;gap:var(--space-6);max-width:52ch}
.formacion-txt p{margin:0}
/* La frase de las dos especialidades. Vive debajo del título de "03 —
   Formación y trayectoria", dentro del .shead: estaba sola al pie del bloque
   anterior y quedaba flotando.
   Va un escalón por debajo del título —ls-h3, no ls-h1— para que se lea como
   lo que es, una frase apoyada en el título, y no como un segundo titular
   compitiendo con él. La separa la línea de arriba, y del título la separa el
   gap del propio .shead.

   LAS TRES REGLAS VAN SCOPEADAS CON .shead, Y NO ES PARA ORDENAR:
   `.shead h1,.shead h2,.shead p{margin:0}` tiene más especificidad que una
   clase sola y le gana. Sin el `.shead` adelante, cualquier margen que se
   escriba acá se computa en 0 y no pasa nada — que es exactamente lo que
   pasaba y cuesta un rato encontrar. */
.shead .trayectoria-quote{margin:0;max-width:26ch;
  border-top:1px solid var(--ls-black);padding-top:var(--space-5);
  color:var(--text-primary);text-wrap:balance}
.posicion{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,88px);
  margin-top:clamp(48px,6vw,96px)}
.pos{display:flex;flex-direction:column;gap:var(--space-5);
  border-top:1px solid var(--line-inverse);padding-top:var(--space-6)}
.pos h3{margin:0}
.pos p{margin:0;max-width:46ch}

/* ---------- NOTAS: hub, archivo y artículo ---------------------------- */

.filtro{display:flex;flex-wrap:wrap;gap:var(--space-5) clamp(20px,2.4vw,40px);
  padding-bottom:var(--space-5);border-bottom:1px solid var(--line-hairline)}
.fitem{padding-bottom:6px;border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) ease}
.fitem:hover{border-bottom-color:var(--line-hairline)}
.fitem.on{border-bottom-color:var(--ls-black)}

.lista{display:flex;flex-direction:column;margin-top:clamp(28px,3vw,44px)}
.n-item{display:grid;grid-template-columns:190px 1fr;gap:clamp(16px,3vw,56px);align-items:start;
  padding:clamp(24px,2.6vw,36px) 0;border-top:1px solid var(--line-hairline);color:inherit}
.n-item:last-child{border-bottom:1px solid var(--line-hairline)}
.it-meta{display:flex;flex-direction:column;gap:var(--space-3)}
.it-title{display:inline;border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) ease}
.n-item:hover .it-title{border-bottom-color:var(--ls-black)}
.item-txt{display:flex;flex-direction:column;gap:var(--space-4);max-width:62ch}

.otras{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
.otra{display:flex;flex-direction:column;gap:var(--space-4);
  border-top:1px solid var(--line-hairline);padding-top:var(--space-5);max-width:38ch;color:inherit}
.otra:hover .it-title{border-bottom-color:var(--ls-black)}

.col{max-width:62ch;margin:0 auto;width:100%}
.art-head{max-width:62ch;margin:0 auto;width:100%}
.art-meta{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  border-top:1px solid var(--line-hairline);border-bottom:1px solid var(--line-hairline);
  padding:var(--space-5) 0;margin-top:clamp(32px,4vw,56px)}
.art-meta .sep{width:1px;height:12px;background:var(--line-hairline)}

.body{font-size:19px;line-height:1.75;color:var(--text-primary)}
.body p{margin:0 0 1.35em}
.body p.lead{font-size:23px;line-height:1.6;margin-bottom:1.6em}
.body h2{font-family:var(--font-display);font-weight:var(--fw-demi);text-transform:uppercase;
  font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.01em;
  margin:2.4em 0 .9em;padding-top:var(--space-6);border-top:1px solid var(--line-hairline)}
.body h3{font-family:var(--font-display);font-weight:var(--fw-demi);font-size:19px;
  line-height:1.3;margin:2em 0 .6em}
.body ul{list-style:none;margin:0 0 1.6em;padding:0;display:flex;flex-direction:column;gap:.85em}
.body li{padding-left:1.6em;position:relative}
.body li::before{content:"";position:absolute;left:0;top:.85em;width:14px;height:1px;background:var(--ls-black)}
.body a:not(.mlink){border-bottom:1px solid var(--line-hairline)}
.body a:not(.mlink):hover{border-bottom-color:var(--ls-black)}
.pull{margin:2.6em 0;padding:var(--space-7) 0;
  border-top:1px solid var(--ls-black);border-bottom:1px solid var(--ls-black)}
.pull p{font-family:var(--font-display);font-weight:var(--fw-demi);
  font-size:clamp(24px,2.4vw,32px);line-height:1.2;margin:0}
.fig{margin:2.6em 0}
.fig figcaption{margin-top:var(--space-4)}
/* Tags: se muestran sin enlace hasta que cada archivo por tag tenga volumen. */
.tags{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:baseline}
.tags .tag{font-family:var(--font-label);font-weight:var(--fw-book);font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--text-secondary-on-bone)}

/* ---------- CONTACTO -------------------------------------------------- */

.contacto{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,120px);align-items:start}
.contacto-form{display:grid;gap:var(--space-7)}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7)}
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
.dato{display:flex;flex-direction:column;gap:var(--space-4);
  border-top:1px solid var(--line-hairline);padding-top:var(--space-5)}
.dato p{margin:0}
.mapa{margin-top:clamp(40px,5vw,72px);border:1px solid var(--line-hairline);
  aspect-ratio:16/6;position:relative;overflow:hidden;background:var(--surface-bone)}
.mapa img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.5}
.mapa-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.despues{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px);
  margin-top:clamp(40px,5vw,80px)}


/* =========================================================================
   09 · RESPONSIVE
   Referencia mobile: 390px. La mayor parte del tráfico llega desde celular.
   ========================================================================= */

/* --- Chrome: en 1400 entra el header mobile -----------------------------
   El lockup completo tiene que verse en todos los anchos, así que NO hay un
   estado intermedio de isotipo solo. Cuando el lockup deja de entrar cómodo
   al lado del menú desktop se cambia de header, no de logo.

   Por qué 1400 y no un número más chico: medido sobre el header real, el
   lockup mide 222x36 y el aire que le queda hasta el primer ítem del menú se
   agota a los 1380px. En 1400 todavía quedan ~50px, que es el último ancho
   en el que el logo no se apreta contra el menú. */
@media (max-width:1400px){
  .hdr-desk{display:none!important}
  .hdr-mob{display:flex!important}
  section[id],.moment[id],.logic[id],.grupo[id]{scroll-margin-top:76px}
}

/* --- Chrome: la barra fija inferior es aparte, y entra más abajo --------
   No sigue al header a 1400 a propósito. El header cambia por una razón de
   espacio —el menú no entra—, pero la barra fija de WhatsApp y turno es una
   ayuda para el pulgar: en una notebook de 1366px se comería alto de pantalla
   sin que nadie la vaya a usar con el dedo. Se queda donde estaba. */
@media (max-width:1120px){
  .only-mob{display:block!important}
  body{padding-bottom:64px}
  .protocolo{grid-template-columns:1fr;gap:var(--space-6);align-items:start}
}

@media (max-width:1024px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .voices{grid-template-columns:1fr}
  .notes-row{grid-template-columns:1fr;row-gap:12px}
  .note-go{display:none}
}

@media (max-width:900px){
  .foot-cols{grid-template-columns:1fr 1fr}

  .two,.two--wide{grid-template-columns:1fr;gap:clamp(32px,5vw,56px)}
  /* Apilado, la frase quedaba a la misma distancia del título que del bloque
     de formación: leída así, flota entre los dos. Este margen la despega de
     abajo para que se lea apoyada en el título, que es su lugar. */
  .shead .trayectoria-quote{margin-bottom:var(--space-6)}
  .sticky-head{position:static}
  .cards,.cards--3{grid-template-columns:1fr}

  /* Cómo trabajo */
  .apertura-foot{flex-direction:column;align-items:flex-start;gap:var(--space-7)}
  .recorrido{grid-template-columns:1fr 1fr;gap:var(--space-6)}
  .control{grid-template-columns:1fr}

  /* Planes: al apilarse ninguna lógica queda subordinada a la otra —
     las dos abren con la misma línea negra y el mismo aire. */
  .two-logics{grid-template-columns:1fr;row-gap:clamp(48px,6vw,80px)}
  .logic{padding:var(--space-6) 0 0}
  .logic+.logic{padding-left:0;border-left:0;border-top:1px solid var(--ls-black)}
  .fork-lines{display:none}
  .fork-top{justify-content:flex-start}
  .fork-node{width:100%;text-align:left}
  .fork-branches{grid-template-columns:1fr;row-gap:clamp(32px,5vw,56px);
    margin-top:clamp(32px,5vw,56px)}
  .branch-rows{grid-template-columns:1fr;gap:var(--space-2)}
  .branch-rows dd{margin-bottom:var(--space-4)}
  .moments{grid-template-columns:1fr}
  .moment{min-height:0}

  /* Tratamientos */
  .grupos{grid-template-columns:1fr;gap:clamp(48px,8vw,80px)}
  .grupo-head{position:sticky;top:64px;z-index:20;padding-bottom:var(--space-4)}

  /* Cuando la grilla cae a una columna, el marco vertical se comería la
     pantalla entera: se limita a un ancho de video de celular. */
  .vslot{max-width:340px}

  /* Casos */
  .casos-open{grid-template-columns:1fr;align-items:start;gap:var(--space-8)}
  .ledger-row{grid-template-columns:1fr;row-gap:10px}
  .ledger-bar{display:none}
  .casos-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .tiempo-head{flex-direction:column;align-items:flex-start;gap:var(--space-7)}
  .tiempo{grid-template-columns:1fr;gap:var(--space-6);margin-top:clamp(36px,6vw,64px)}
  .tiempo-foot{flex-direction:column;align-items:flex-start;gap:var(--space-6)}

  /* Ficha */
  .apertura{grid-template-columns:1fr;gap:clamp(32px,5vw,56px)}
  .nocases{grid-template-columns:1fr;gap:clamp(28px,5vw,48px)}
  .combina-row{grid-template-columns:1fr;gap:var(--space-3)}

  /* Lorena */
  .apertura--lorena{grid-template-columns:1fr;gap:clamp(32px,6vw,56px)}
  .apertura-foto{max-width:62%;justify-self:start;order:-1}
  .formacion{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .shead .trayectoria-quote{max-width:none}
  .posicion{grid-template-columns:1fr;gap:clamp(28px,5vw,48px)}

  /* Notas */
  .body{font-size:18px;line-height:1.7}
  .body p.lead{font-size:21px}
  .col,.art-head{max-width:none}
  .n-item{grid-template-columns:1fr;gap:var(--space-4)}
  .otras{grid-template-columns:1fr;gap:var(--space-6)}
  .it-meta{flex-direction:row;gap:var(--space-5)}
  .filtro{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
  .fitem{justify-self:start}

  /* Contacto */
  .contacto{grid-template-columns:1fr;gap:clamp(40px,7vw,64px)}
  .datos,.despues{grid-template-columns:1fr}
  .mapa{aspect-ratio:4/3}
}

@media (max-width:860px){
  .no-mob{display:none!important}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-media{min-height:0;aspect-ratio:4/5;max-height:none}
  .doors{grid-template-columns:1fr}
  .door{border-left:0;border-top:1px solid var(--line-hairline);padding:40px var(--gutter) 48px}
  .door:first-child{border-top:0}
  .steps{grid-template-columns:1fr;gap:var(--space-7)}
  .signature{gap:var(--space-5)}
  .signature .mlink{margin-left:0}
  .plans{grid-template-columns:1fr}
  .plan{padding:32px 0 40px}
  .plan+.plan{border-left:0}
  .matrix{grid-template-columns:1fr;row-gap:0}
  .matrix>div{padding:14px 0}
  .tgrid{grid-template-columns:1fr}
  .video-feature{grid-template-columns:1fr}
  .turno{grid-template-columns:1fr}
  .form-grid,.form-2{grid-template-columns:1fr}
}

/* --- Mobile, referencia 390px ---------------------------------------- */
@media (max-width:640px){

  /* 1 · HEADER
     El lockup COMPLETO, a 34px de alto. No se apila, no se parte y no se
     recorta al isotipo en ningún ancho. El cambio de header ya viene hecho
     desde 1400: acá sólo baja de tamaño.
     Las redes salen del header y viven en el menú y en el pie. */
  .topbar{justify-content:flex-start;min-height:34px}
  .tb-social{display:none!important}
  .mob-head{height:60px}
  .mob-head .menu-btn{padding-left:var(--space-5);margin-right:-4px}

  /* 2 · MENÚ DESPLEGADO
     Pantalla completa sobre off-white, sin velo ni transparencia. */
  .drawer{padding:14px var(--gutter) 28px;overflow-y:auto}
  .drawer-nav{margin-top:var(--space-7);gap:0}
  .drawer-nav a,.drawer-nav span{font-size:26px;line-height:1.05;letter-spacing:-.01em;
    padding:16px 0;border-bottom:1px solid var(--line-hairline)}
  .drawer-nav a:first-child{border-top:1px solid var(--line-hairline)}
  .drawer-foot{gap:var(--space-6);padding-top:var(--space-7)}

  /* 3 · PIE
     Una columna. Orden: marca, contacto, Planes, Tratamientos. */
  .foot-cols{grid-template-columns:1fr!important;gap:0!important;
    padding-top:var(--space-8)!important;padding-bottom:var(--space-8)!important}
  .foot-cols>*{border-top:1px solid var(--line-inverse);padding-top:26px;margin-top:26px;order:3}
  .foot-cols>*:first-child{border-top:0;padding-top:0;margin-top:0}
  .foot-brand{order:1}
  .foot-contact{order:2}
  .foot-brand img{width:112px}
  .foot-end{flex-direction:column;align-items:flex-start;gap:8px}
  .foot-end>*{letter-spacing:.18em;line-height:1.6}
  /* Apilado, el bloque de la firma se alinea a la izquierda con el resto de la
     línea de cierre: mantiene su alineación, que ahí pasa a ser la del margen. */
  .foot-firma{align-items:flex-start;text-align:left;gap:6px}
  .e404{min-height:auto}
  .e404 .e404-mark{right:-34vw;bottom:-40vw;height:90vw}
  .foot-credito{letter-spacing:.18em}

  /* A 390 muchos micro-labels pasan a dos líneas: necesitan interlineado. */
  .ml{line-height:1.5}

  /* El header mobile mide 60px acá: el encabezado pegajoso del catálogo
     se apoya justo debajo, sin dejar una rendija. */
  .grupo-head{top:60px}

  /* Contenido interno */
  .hero-txt{padding:var(--space-7) var(--gutter) var(--space-8)}
  .recorrido{grid-template-columns:1fr}
  .video-feature{margin-bottom:var(--space-8)}
  .sig-mark{width:56px;height:56px}
  .sig-mark img{height:34px}
  .art-meta{gap:var(--space-4)}
  .art-meta .sep{display:none}
  .opt{padding:var(--space-4)}
}

/* --- Chrome: red para pantallas más angostas que la referencia ----------
   A 390px, que es la referencia, el lockup completo mide 210x34 y le quedan
   59px de aire hasta el botón de menú: entra sin tocarlo y no hay que
   achicarlo. Recién a 320px lo toca. Por debajo de 360 baja de tamaño
   manteniendo la proporción — nunca se recorta al isotipo ni se deforma. */
@media (max-width:360px){
  .mob-head .lockup img{height:28px}

  /* EL BOTÓN DEJA DE SER `nowrap`, Y SÓLO ACÁ.
     "PEDIR UNA EVALUACIÓN" en una línea, con 44px de padding y 0.22em de
     tracking, mide 298px: a 320 quedan 272 de columna y el sitio desbordaba.
     Partir la etiqueta en dos líneas no toca la tipografía ni el tracking, que
     es lo que sí se vería. De 361 para arriba el botón sigue en una línea. */
  .btn{white-space:normal;padding-left:var(--space-5);padding-right:var(--space-5)}
  .btn--lg{padding-left:var(--space-6);padding-right:var(--space-6)}

  /* LOS TITULARES SE DEJAN GUIONAR, Y SÓLO ACÁ.
     A 320 la columna da 272 y el display arranca en 34px: "ACOMPAÑAMIENTO." o
     "PROTOCOLOS" no entran enteros y empujaban el ancho de todo el sitio.
     Es el mismo recurso que ya usaba el título de la ficha para
     "Fotorejuvenecimiento", extendido al resto de los titulares: con
     lang="es-AR", Chrome corta por sílaba y con guión.
     Se prefirió guionar antes que bajar la escala tipográfica, que es lo que
     sí se notaría. De 361 para arriba ningún titular se guiona. */
  .ls-display,.ls-display-2,.ls-h1,.ls-h2,.ls-h3{
    hyphens:auto;overflow-wrap:break-word}

  /* El nombre del tratamiento y su etiqueta dejan de compartir renglón: juntos
     no entran, y la etiqueta es `nowrap` por diseño. */
  .item-head{flex-wrap:wrap;gap:var(--space-2)}

  /* Recién acá los nombres del catálogo se dejan partir. Medido: el más
     largo mide 271px y a 320 la columna da 257, así que sin esto el sitio
     desborda a lo ancho. De 360 para arriba entran enteros y no se parten. */
  .cat-par{white-space:normal}
}


/* =========================================================================
   10 · WORDPRESS

   Lo único que se agregó al pasar el sitio a WordPress, y sólo para lo que el
   prototipo no tenía:

     · la paginación del hub y de los archivos de notas, que antes no existía
       porque las doce notas entraban en una sola página;
     · el archivo por tag, que estaba pendiente: los tags se mostraban sin
       enlace;
     · el embed del video vertical de YouTube dentro del marco 9:16 que el
       sitio ya usaba para los testimonios;
     · la confirmación del formulario, que antes vivía en una página aparte.

   No hay acá ni un color, ni una tipografía, ni un espaciado nuevos: todo sale
   de los tokens del bloque 02. Cualquier cambio de diseño se sigue haciendo
   allá arriba.
   ========================================================================= */

/* --- Paginación ---------------------------------------------------------
   Micro-labels, sin cajas y sin color: la página activa lleva el mismo
   subrayado fino que la categoría activa del filtro. Es la misma gramática
   visual, para que no se lea como un widget pegado. */
.paginacion{
  margin-top:clamp(32px,4vw,56px);padding-top:var(--space-6);
  border-top:1px solid var(--line-hairline);
}
.paginacion-items{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--space-4) clamp(16px,2vw,32px);
}
.paginacion a,.paginacion span{
  font-family:var(--font-label);font-weight:var(--fw-book);font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--text-secondary);
  padding-bottom:6px;border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease;
}
.paginacion a:hover{color:var(--text-primary);border-bottom-color:var(--line-hairline)}
.paginacion .current{color:var(--text-primary);border-bottom-color:var(--ls-black)}
.paginacion .dots{border-bottom-color:transparent}

/* --- Tags enlazados -----------------------------------------------------
   Los tags ya no son texto muerto: cada uno lleva a su archivo. Se mantienen
   exactamente igual y sólo suman el subrayado al pasar por encima, como el
   resto de los enlaces del sitio. */
.tags a.tag{
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color var(--dur-fast) ease;
}
.tags a.tag:hover{border-bottom-color:var(--ls-black)}

/* --- Video vertical embebido --------------------------------------------
   Mismo marco que el slot de testimonio: 9:16, línea fina, fondo bone. El
   formato vertical es parte del mensaje, así que no se acuesta ni se recorta.
   El ancho máximo es el del slot en mobile: dentro de la columna de lectura de
   una nota, a ancho completo el video se comería la página. */
.vframe--embed{padding:0;overflow:hidden;position:relative}
.vframe--embed iframe{width:100%;height:100%;border:0;display:block}
.vslot--nota{max-width:340px;margin:clamp(32px,4vw,56px) 0 0}

/* --- El mapa de Google ---------------------------------------------------
   Ocupa el ancho de su columna con una proporción estable, así la página no
   salta mientras el iframe carga. Sin borde y sin sombra, que es lo que se
   pidió: es la única cosa enmarcada del sitio que no lleva la línea fina, y es
   a propósito — el mapa ya trae sus propios bordes de contenido.

   Más alto que el esquema que reemplaza (16/9 contra 16/6): a 16/6 el mapa
   entra pero no se leen los nombres de las calles, que es para lo que está. */
.mapa--google{aspect-ratio:16 / 9;border:0;background:var(--surface-bone)}
.mapa--google iframe{width:100%;height:100%;border:0;display:block}

/* EN GRIS, Y A COLOR AL PASAR POR ENCIMA.
   Es el único elemento con color de la página, y a todo color se lleva la
   atención de una sección que no es sobre el mapa: es sobre a dónde ir y
   cuándo. En gris pesa lo que tiene que pesar, y vuelve a color cuando alguien
   lo está mirando de verdad.

   El mismo recurso que ya usa el sitio en las fotos, que van todas con
   `grayscale(1)`: acá se le suma un punto menos de contraste porque el mapa es
   plano y sin él el gris queda más duro que el de las fotos. */
.mapa--google iframe{
  filter:grayscale(1) contrast(0.9);
  transition:filter var(--dur-fast) var(--ease-standard);
}
.mapa--google:hover iframe,
.mapa--google:focus-within iframe{filter:none}

@media (max-width:640px){
  .mapa--google{aspect-ratio:4 / 3}
}

/* Sin puntero no hay hover: en un celular el mapa se quedaría gris para
   siempre. Ahí va a color de entrada. */
@media (hover:none){
  .mapa--google iframe{filter:none}
}

/* --- Contact Form 7 ------------------------------------------------------
   El formulario lo dibuja CF7, y tiene que verse exactamente igual que el que
   había antes: campo con línea inferior, sin caja rellena, sin bordes
   redondeados, y los errores marcados con peso y contraste, nunca con rojo.

   Todo lo de acá abajo es revestir lo que CF7 agrega por su cuenta. El markup
   propio del formulario —`.field`, `.opts`, `.btn`— ya está escrito con las
   clases del sitio y se estiliza en los bloques 06 y 08; no se repite acá.

   Si algún día se cambia de plugin de formularios, este bloque entero se va. */

/* CF7 envuelve cada campo en un span en línea. Sin `display:block` el
   `width:100%` del input se resuelve contra un ancho de contenido y el campo
   sale angosto. */
.wpcf7-form-control-wrap{display:block}

/* El formulario no lleva márgenes propios: el aire lo pone la grilla. */
.wpcf7-form{display:grid;gap:var(--space-7)}
.wpcf7-form > p:empty,.wpcf7-form > .screen-reader-response{display:none}
.wpcf7 .hidden-fields-container{border:0;padding:0;margin:0}

/* Campo con error. NO HAY ROJO, igual que en el resto del sitio: la línea pasa
   a 2px y negra, y el motivo va abajo en cuerpo chico. */
.wpcf7 .wpcf7-not-valid{border-bottom-width:2px;border-bottom-color:var(--line-strong)}
.wpcf7-not-valid-tip{
  display:block;margin-top:var(--space-2);
  font-family:var(--font-body);font-size:var(--fs-body-sm);
  line-height:var(--lh-body);color:var(--text-primary);
}

/* El aviso de respuesta, con la misma forma que tenía el del formulario
   anterior: fondo bone y una barra negra a la izquierda. El de enviado va en
   negativo, que es como el sitio marca lo que se resolvió. */
.wpcf7 .wpcf7-response-output{
  margin:0;padding:var(--space-4) var(--space-5);
  border:0;border-left:2px solid var(--line-strong);border-radius:0;
  font-family:var(--font-body);font-size:var(--fs-body-sm);
  line-height:var(--lh-body);color:var(--text-primary);
  background:var(--surface-bone);
}
.wpcf7 form.sent .wpcf7-response-output{
  background:var(--surface-ink);color:var(--text-inverse);
  border-left-color:var(--line-inverse);
}

/* Las opciones de "en qué momento estás": el mismo recuadro con línea fina que
   tenían antes. CF7 las dibuja como spans con margen propio, que se resetea. */
.opts-set{border:0;padding:0;margin:0}
.opts-set legend{margin-bottom:var(--space-4);padding:0}
.opts-opcional{
  letter-spacing:0;text-transform:none;
  font-family:var(--font-body);font-size:13px;color:var(--text-secondary);
}
.opts .wpcf7-radio,.opts .wpcf7-checkbox{display:grid;gap:var(--space-3)}
.opts .wpcf7-list-item{margin:0}
.opts .wpcf7-list-item label{
  display:flex;align-items:flex-start;gap:var(--space-4);cursor:pointer;
  border:1px solid var(--line-hairline);padding:var(--space-5);
  min-height:var(--tap-min);
  transition:border-color var(--dur-fast) ease;
}
.opts .wpcf7-list-item label:hover{border-color:var(--ls-black)}
.opts .wpcf7-list-item label:has(input:checked){border-color:var(--ls-black)}
.opts .wpcf7-list-item input{
  appearance:none;width:13px;height:13px;margin:3px 0 0;flex:0 0 auto;
  border:1px solid var(--ls-black);background:transparent;border-radius:0;
}
.opts .wpcf7-list-item input:checked{background:var(--ls-black)}
.opts .wpcf7-list-item-label{
  font-family:var(--font-body);font-size:var(--fs-body-sm);
  line-height:var(--lh-body);color:var(--text-primary);
}

/* El botón ya lleva las clases del sitio; sólo hay que ganarle a lo que CF7
   le pone encima. */
.wpcf7 input.wpcf7-submit.btn{
  width:auto;border-radius:0;box-shadow:none;
  background:var(--action-bg);color:var(--action-fg);border:1px solid var(--action-bg);
}
.wpcf7 input.wpcf7-submit.btn:hover{opacity:.86}

/* El indicador de envío: un punto del gris del sistema, sin animación de
   color. CF7 lo trae en amarillo. */
.wpcf7-spinner{background-color:var(--text-secondary);margin:0 0 0 var(--space-4)}

/* --- Confirmación del formulario ----------------------------------------
   La clase la usaba el formulario propio del tema, que ya no está. Se deja
   porque el aviso de CF7 puede necesitar el mismo remate si alguna vez se
   arma una página de gracias aparte. */
.enviado{border-top:1px solid var(--ls-black);padding-top:var(--space-7)}

/* --- Foto en el círculo de un testimonio --------------------------------
   El círculo existía vacío en el prototipo, esperando la foto. Cuando la hay,
   la recorta sin deformarla. */
.voice-ph{overflow:hidden}
.voice-ph img{width:100%;height:100%;object-fit:cover;display:block}

/* --- El isotipo de la firma de la home NO se toca ------------------------
   Acá había una regla `.sig-mark img{max-width:100%;height:auto}` puesta por
   precaución, y pisaba el `height:44px` del bloque 08: el isotipo salía a su
   tamaño natural, más grande, y descentrado dentro del círculo de 72px.
   El tamaño del isotipo lo fija el bloque 08 y lo ajusta el 09 a 34px abajo de
   640. No agregar reglas de `.sig-mark img` en este bloque. */

/* --- Botón flotante de WhatsApp -------------------------------------------
   VA EN EL NEGRO DEL SISTEMA, con el glifo en blanco.

   El sistema es estrictamente acromático: el negro es el único color de acción
   y la jerarquía se resuelve con contraste, escala y espacio. Se probó con el
   verde de WhatsApp —que es el código de color de la aplicación, no una
   decisión estética del sitio— y se volvió al negro.

   El color vive en una sola variable, y el verde quedó comentado al lado: es
   un cambio de línea, sin tocar el markup.

   El botón de enviar del globo usa el `.btn` del sistema, así que acompaña
   solo. */
:root{
  /* EL VERDE ESTÁ ACÁ ABAJO, COMENTADO: volver a él es cambiar de línea.
     --wa-bg:#25D366;  --wa-fg:#FFFFFF;   ← el verde de WhatsApp */
  --wa-bg:#1E1E1E;
  --wa-fg:#FFFFFF;
  --wa-anillo:var(--ls-white);
  --wa-size:56px;
  --wa-aire:clamp(20px,3vw,32px);
  /* Alto de la barra fija inferior. Es 0 mientras la barra no existe. */
  --wa-barra:0px;
}

.wa{
  position:fixed;right:var(--wa-aire);
  bottom:calc(var(--wa-aire) + var(--wa-barra));
  /* Por encima de la barra fija (50) y por debajo del menú desplegado (60):
     con el menú abierto el botón queda tapado, que es lo correcto. */
  z-index:55;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-4);
}

/* El disco. Es lo único redondo del sitio, por el mismo motivo que el verde:
   es la forma con la que se reconoce este botón en cualquier sitio. */
.wa-btn{
  position:relative;
  width:var(--wa-size);height:var(--wa-size);flex:0 0 auto;
  border:0;border-radius:999px;padding:0;cursor:pointer;
  background:var(--wa-bg);color:var(--wa-fg);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-fast) ease;
}
.wa-btn:hover{transform:scale(1.04)}
.wa-btn svg{display:block}

/* EL ANILLO BLANCO, Y POR QUÉ ESTÁ.
   El botón es fijo y pasa por encima de todo lo que scrollea abajo. Sobre el
   pie y sobre los bloques de fondo oscuro quedaba un círculo negro sobre negro:
   se veía el glifo flotando solo. El anillo lo recorta.

   Sobre los fondos claros —off-white y bone— es casi imperceptible, que es lo
   que se busca: no es un adorno, es lo que hace que el botón exista sobre el
   negro.

   VA POR FUERA DEL CÍRCULO, en un pseudo-elemento con `inset:-1px`. No es un
   `border`, que comería área del botón, ni un `box-shadow`, que sería una
   sombra. El botón mantiene sus 56px de área táctil y no se mueve un pixel.

   1px, que es el grosor del trazo del isotipo y el de todas las líneas del
   sitio. */
.wa-btn::after{
  content:"";position:absolute;inset:-1px;
  border:1px solid var(--wa-anillo);border-radius:999px;
  pointer-events:none;
}

/* El globo: cuadrado y con la línea fina del sistema, como cualquier otro
   marco del sitio. Sin sombra y sin punta. */
.wa-globo{
  background:var(--surface-page);
  border:1px solid var(--line-hairline);
  padding:var(--space-5);
  width:max-content;
  max-width:min(280px, calc(100vw - var(--wa-aire) * 2));
  display:flex;flex-direction:column;gap:var(--space-5);
}
.wa-globo[hidden]{display:none}
.wa-saludo{margin:0}
.wa-enviar{text-align:center;justify-content:center}

/* Abajo de 1120 aparece la barra fija de WhatsApp y turno, y el flotante se
   levanta por encima de ella con su propio aire. Sin esto se superponen. */
@media (max-width:1120px){
  :root{--wa-barra:64px}
}
@media (max-width:640px){
  :root{--wa-size:52px}
}

/* --- Admin bar -----------------------------------------------------------
   La barra de WordPress es fija arriba y tapaba el header pegajoso al estar
   logueado. Sólo afecta a quien administra, nunca a quien visita. */
body.admin-bar .stick{top:32px}
@media (max-width:782px){
  body.admin-bar .stick{top:46px}
}