/* ===========================================================================
   ALINEA VISIÓN — Hoja de estilos
   ---------------------------------------------------------------------------
     1.  TOKENS                  paleta de marca, única fuente de color
     2.  BASE + UTILIDADES       reset, tipografía, .wrap, foco, skip link
     3.  MOVIMIENTO              tesis: el hero "enfoca"; el resto, discreto
     4.  BOTONES
     5.  LOGO
     6.  NAV                     + menú móvil
     7.  HERO                    + parallax
     8.  CIFRAS                  franja verde de marca
     9.  SECCIONES
     10. PLACEHOLDERS .ph        cajas de foto pendiente
     11. ANTES/DESPUÉS
     12. ESPECIALIDADES
     13. INFORMACIÓN SEO         .seo-grid / .seo-card
     14. DOCTOR
     15. RESPALDO
     16. PROCESO                 .steps / .step
     17. ENFOQUE
     18. DALI
     19. TESTIMONIOS             .tgrid / .tcard  +  .vids
     20. FORMULARIO DE CITAS
     21. FAQ                     .faq-list / .faq
     22. CONTACTO
     23. CIERRE
     24. FOOTER
     25. WhatsApp

   Breakpoints: 1024 · 960 · 860 · 820 · 720 · 640 · 560 px
   Las media queries viven junto al componente que modifican.
   =========================================================================== */


/* ===========================================================================
   1. TOKENS — paleta de marca
   ---------------------------------------------------------------------------
   Los ÚNICOS colores permitidos. Cualquier valor que no salga de aquí es un
   error. Regla del manual: el verde es el protagonista; el teal solo entra
   como acento o degradado, nunca como bloque plano dominante.
   =========================================================================== */

:root {
  /* Verdes */
  --verde-alinea:   #76bc21;   /* principal */
  --verde-oscuro:   #5e9a1a;
  --verde-claro:    #a4d65e;
  --verde-palido:   #eaf5de;   /* fondos */

  /* Neutros */
  --negro-alinea:   #090609;   /* texto */
  --verde-petroleo: #123f3b;   /* web / dark — SOLO acento y degradado */
  --gris-oscuro:    #4a4d47;   /* texto 2º */
  --gris-vision:    #808080;
  --gris-claro:     #c9c9c9;   /* líneas */
  --gris-humo:      #e6e7e3;   /* bordes */
  --gris-fondo:     #f4f5f2;   /* fondos */
  --blanco:         #ffffff;   /* base */

  /* --- Alias semánticos: ninguno introduce un color nuevo --------------- */
  --ink: var(--verde-petroleo);
  --green: var(--verde-alinea);
  --green-d: var(--verde-oscuro);
  --green-soft: var(--verde-palido);
  --white: var(--blanco);
  --muted: var(--gris-oscuro);
  --soft: var(--gris-vision);
  --line: var(--gris-humo);
  --rule: var(--gris-claro);
  --sand: var(--gris-fondo);

  /* Superficie oscura: SIEMPRE degradado teal → negro, nunca teal plano.
     El teal se concentra arriba y cede al negro, así no domina el bloque. */
  --surface-dark: linear-gradient(168deg, #123f3b 0%, #0d2724 46%, #090609 100%);
  --surface-darkest: var(--negro-alinea);
  --on-dark-accent: var(--verde-claro);

  /* Superficie de marca: verde a plena intensidad, con texto oscuro */
  --surface-brand: var(--verde-alinea);
  --on-brand: var(--negro-alinea);

  /* Verde para texto pequeño sobre claro: no existe en el manual.
     El más oscuro (#5E9A1A) da 3.4:1 y AA pide 4.5:1. Los antetítulos y
     etiquetas usan Verde Petróleo (10.4:1); el verde queda para iconos y
     texto grande, donde el mínimo es 3. */
  --green-text: var(--verde-petroleo);

  /* Único valor fuera del manual, deliberado: los errores necesitan un rojo
     y la paleta no define ninguno. Conviene añadirlo al manual. */
  --err: #c0392b;

  --shadow-sm: 0 10px 28px -14px rgba(18, 63, 59, .25);
  --shadow: 0 24px 60px -28px rgba(18, 63, 59, .35);
  --shadow-lg: 0 34px 80px -34px rgba(9, 6, 9, .45);
  --shadow-green: 0 26px 60px -30px rgba(94, 154, 26, .55);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 26px;

  --logo-h: 40px;

  /* REGLA ÚNICA, SIN EXCEPCIONES: el texto de los botones verdes es blanco
     en toda la web, sobre cualquier fondo. No sobrescribir en ninguna
     sección. (Contraste 2.3:1, por debajo del 4.5:1 de AA: decisión de
     diseño tomada y confirmada por el cliente.) */
  --btn-green-text: var(--blanco);
  --btn-green-bg: var(--verde-alinea);

  /* Curva única de todo el sitio: desaceleración natural, sin rebote */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
}


/* ===========================================================================
   2. BASE + UTILIDADES
   =========================================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* la cabecera es fija */
}

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --- Titulares -------------------------------------------------------------
   Tenor Sans es de PESO ÚNICO: solo existe el 400. Pedirle un 600 o un 700
   no carga nada distinto —el ancho del mismo texto es idéntico en los tres—;
   el navegador se limita a emborronar el trazo con un contorno artificial,
   que ensucia las curvas en lugar de engordarlas. Por eso aquí no hay más
   peso que 400, y el cuerpo se consigue por otros medios:

     · -webkit-font-smoothing: auto — el `antialiased` del body adelgaza el
       trazo en macOS. Los titulares se salen de esa regla y recuperan su
       grosor real en Apple, que es donde más flaca se veía la fuente.
     · letter-spacing 0 en los tamaños pequeños — Tenor Sans ya es una fuente
       aireada; el espaciado extra la deshilachaba justo donde menos cuerpo
       tiene.
     · tamaños más generosos en h3 y h4 — es una tipografía de titulares,
       dibujada para lucir en grande. Por debajo de ~26 px se queda sin
       cuerpo por diseño, no por error.                                     */

h1, h2, h3, h4 {
  font-family: 'Tenor Sans', sans-serif;
  font-weight: 400;
  line-height: 1.14;
  color: var(--ink);
  text-wrap: balance;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* --- Escala tipográfica única ---------------------------------------------
   Los tamaños se declaran AQUÍ y en ningún sitio más. Ninguna sección los
   redefine: si un titular necesita otro peso visual, lo que cambia es su
   nivel, no su tamaño. Antes había cuatro tamaños de h2 y seis de h3 (dos
   de ellos en Open Sans), y la web no se leía como una sola pieza.

     h1  40 → 72 px   un único titular, el del hero
     h2  32 → 50 px   cabecera de sección
     h3  28 px        titular de tarjeta o subsección
     h4  20 px        rótulo dentro de una tarjeta                        */

h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); letter-spacing: -.005em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.003em; }
h3 { font-size: 1.75rem; letter-spacing: 0; }
h4 { font-size: 1.25rem; letter-spacing: 0; }

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; display: block; }

strong, b { font-weight: 700; }

/* El respiro lateral de toda la web sale de aquí. El suelo son 20 px: por
   debajo el texto roza el borde de la pantalla y se lee peor, sobre todo en
   móviles estrechos. De 500 px en adelante manda el 4 % del ancho, y a
   partir de 1000 se queda en 40.

   Cualquier bloque que quiera aire lateral debe usar .wrap y NO redefinir
   `padding` con el atajo: eso pone los lados a 0 y anula esta regla, que es
   justo lo que le pasaba al hero. Si hace falta padding vertical propio, va
   con padding-block. */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* --- Foco de teclado ------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* El cierre sale de esta lista: ya tiene fondo claro y un aro blanco ahí
   sería invisible. Le sirve el aro oscuro por defecto. */
.dark :focus-visible,
.on-dark :focus-visible,
.hero :focus-visible {
  outline-color: var(--blanco);
}

/* --- Saltar al contenido -------------------------------------------------- */

.skip {
  position: fixed;
  top: .75rem;
  left: 50%;
  transform: translate(-50%, -180%);
  z-index: 200;
  background: var(--ink);
  color: var(--blanco);
  font-size: .85rem;
  font-weight: 600;
  padding: .7rem 1.3rem;
  border-radius: 40px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease);
}

.skip:focus-visible { transform: translate(-50%, 0); }

/* --- Antetítulos ---------------------------------------------------------- */

.eyebrow,
.champ-mark {
  display: inline-block;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--green-text);
  margin-bottom: .9rem;
}

.champ-mark {
  font-family: 'Tenor Sans', sans-serif;
  font-weight: 400;
  letter-spacing: .3em;
}

.dark .eyebrow,
.dark .champ-mark { color: var(--on-dark-accent); }

/* Antetítulo de las secciones en Verde Pálido, en Verde Oscuro.
   AVISO: sobre #EAF5DE da 3.04:1 y a 11.5px hace falta 4.5:1. Es una
   petición expresa. Con var(--verde-petroleo) subiría a 10.4:1 y seguiría
   siendo verde — una línea. */
.pale .eyebrow { color: var(--verde-oscuro); }

.sec-cta { text-align: center; margin-top: 2.8rem; }


/* ===========================================================================
   3. MOVIMIENTO
   ---------------------------------------------------------------------------
   TESIS: esto es una clínica oftalmológica. El momento autoral es uno solo —
   el hero ENFOCA: entra desenfocado y se resuelve en nitidez, como una lente
   encontrando el punto. El subrayado de "ve el mundo" se traza después, ya
   con la imagen nítida.

   El resto del scroll no compite: una llegada corta y silenciosa. El stagger
   se reserva para lo que de verdad es una lista (tarjetas, pasos, FAQ), con
   el retardo total acotado — no se convierte cada sección en una cascada.
   =========================================================================== */

/* --- Momento autoral: el hero enfoca -------------------------------------- */

@keyframes enfocar {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.985);
    filter: blur(16px);
  }
  55% { filter: blur(3px); }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes enfocar-fondo {
  from { opacity: 0; transform: scale(1.08); filter: blur(20px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

@keyframes trazar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero-bg {
  animation: enfocar-fondo 1.5s var(--ease) backwards;
}

.hero-inner > * {
  animation: enfocar .9s var(--ease) backwards;
}

.hero-inner > .hero-badge   { animation-delay: .10s; }
.hero-inner > h1            { animation-delay: .20s; }
.hero-inner > .lead         { animation-delay: .34s; }
.hero-inner > .hero-actions { animation-delay: .46s; }
.hero-inner > .hero-tags    { animation-delay: .58s; }

/* El trazo se dibuja cuando el titular ya está nítido */
.hero h1 u::after {
  transform-origin: left center;
  animation: trazar .75s var(--ease) 1.05s backwards;
}

/* --- Llegada de sección: corta y silenciosa -------------------------------
   Solo se oculta si el JS está vivo (.js en <html>), de modo que sin
   JavaScript la página se lee entera. */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .62s var(--ease),
    transform .62s var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* --- Stagger: solo donde hay una lista real -------------------------------
   js/main.js escribe --i en cada hijo. El retardo se acota a 6 pasos para
   que una rejilla larga no arrastre una cola perceptible. */

.js .stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .6s var(--ease),
    transform .6s var(--ease);
  transition-delay: calc(min(var(--i, 0), 6) * 70ms);
}

.js .stagger.in > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal,
  .js .stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Los desplazamientos de hover también son movimiento */
  .btn:hover,
  .mot:hover,
  .ba:hover,
  .tcard:hover,
  .seo-card:hover,
  .csoc a:hover,
  .wa:hover,
  .vplayer-cta:hover,
  .vplayer.pulsable:hover .vplayer-cta,
  .step:hover,
  .step:hover .step-ico,
  .vid:hover { transform: none !important; }

  /* El hilo del proceso aparece ya trazado, sin recorrido */
  .js .steps::before,
  .js .steps.in::before { transform: none !important; transition: none !important; }

  .vplayer-cta:hover svg,
  .vplayer.pulsable:hover .vplayer-cta svg { transform: none !important; }

  .mot:hover .ph,
  .mot:hover > img { transform: none !important; }
}


/* ===========================================================================
   4. BOTONES
   =========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .03em;
  padding: .95rem 1.9rem;
  border-radius: 50px;
  cursor: pointer;
  border: none;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform .3s var(--ease),
    box-shadow .3s var(--ease),
    background .25s var(--ease-soft),
    color .25s var(--ease-soft);
}

/* Barrido de luz: nace del punto donde entra el cursor, no del centro fijo */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .28), transparent 62%);
  opacity: 0;
  transition: opacity .35s var(--ease-soft);
}

.btn:hover::after { opacity: 1; }

/* Texto blanco en todos los estados y sobre todos los fondos.
   El :where() no añade especificidad, así que basta con que ninguna regla
   de sección intente cambiarlo — y el color se repite en hover/active/focus
   para que ningún estado se escape. */
.btn-green,
.btn-green:hover,
.btn-green:active,
.btn-green:focus,
.btn-green:visited,
.dark .btn-green,
.pale .btn-green,
.final .btn-green,
.stbar .btn-green {
  color: var(--btn-green-text);
}

.btn-green {
  background: var(--btn-green-bg);
  box-shadow: 0 12px 26px -12px rgba(118, 188, 33, .7);
}

.btn-green:hover {
  transform: translateY(-2px);
  background: var(--verde-oscuro);
  box-shadow: 0 20px 38px -14px rgba(118, 188, 33, .85);
}

.btn-green:active { transform: translateY(0) scale(.985); }

.btn-ink {
  background: var(--verde-petroleo);
  color: var(--blanco);
}

.btn-ink:hover {
  transform: translateY(-2px);
  background: var(--negro-alinea);
  box-shadow: var(--shadow);
}

.btn-ink:active { transform: translateY(0) scale(.985); }

/* Contorno para fondos oscuros */
.btn-out-l {
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, .45);
  color: var(--blanco);
}

.btn-out-l:hover {
  background: var(--blanco);
  color: var(--verde-petroleo);
  border-color: var(--blanco);
  transform: translateY(-2px);
}

.btn-block { width: 100%; }

.btn-sm { padding: .72rem 1.35rem; font-size: .84rem; }


/* ===========================================================================
   5. LOGO
   ---------------------------------------------------------------------------
   El export original traía viewBox="0 0 300 300" con el dibujo ocupando el
   27 % de la caja, y además le faltaban los dos trazos de la "ó" de "visión"
   (por eso se leía "visi n"). Ambas cosas están corregidas en el <template>.
   =========================================================================== */

.logo-svg {
  height: var(--logo-h);
  width: auto;
}

.logo-slot {
  display: inline-flex;
  align-items: center;
  min-height: 44px;         /* área pulsable cómoda sin agrandar el dibujo */
}

.logo-svg .st0 { fill: var(--negro-alinea); }
.logo-svg .st1 { fill: none; }
.logo-svg .st2 { fill: var(--gris-vision); }
.logo-svg .st3 { fill: var(--verde-alinea); }

/* Sobre fondo oscuro */
.on-dark .st0 { fill: var(--blanco); }
.on-dark .st2 { fill: rgba(255, 255, 255, .72); }
.on-dark .logo-svg { --logo-h: 46px; }

/* El pie conserva class="on-dark" en el marcado pero ya es blanco, así que
   los dos trazos que ahí se pintan en blanco quedarían invisibles: "alinea"
   (.st0) y "visión" (.st2) vuelven al tratamiento de fondo claro, el mismo
   de la cabecera. El ojo (.st3) no se toca: el verde ya contrasta.
   El selector suma `footer` para ganar a las reglas de .on-dark de arriba. */
footer.on-dark .st0 { fill: var(--negro-alinea); }
footer.on-dark .st2 { fill: var(--gris-vision); }


/* ===========================================================================
   6. NAV
   =========================================================================== */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  /* Mismo respiro lateral que .wrap. La barra es una píldora flotante y sin
     esto tocaba los dos bordes de la pantalla en móvil, que era lo único que
     seguía pegado. En escritorio no cambia nada: la píldora tiene su tope de
     1140 px y se queda centrada igual. */
  padding: .9rem clamp(1.25rem, 4vw, 2.5rem);
}

.nav {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--shadow-sm);
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .55rem .45rem 1.4rem;
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}

header.scrolled .nav {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 16px 44px -20px rgba(18, 63, 59, .4);
}

.nav ul {
  display: flex;
  gap: .2rem;
  list-style: none;
}

.nav ul a {
  display: block;
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
  padding: .55rem .85rem;
  border-radius: 40px;
  transition: background .22s var(--ease-soft), color .22s var(--ease-soft);
}

.nav ul a:hover {
  background: var(--verde-palido);
  color: var(--green-text);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.burger {
  display: none;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  min-width: 44px;   /* a 320 px la nav lo encogía a 33: es el único menú */
  height: 44px;
  flex: none;
  padding: 0;
  border-radius: 50%;
}

/* Las tres barras van posicionadas respecto al centro del botón, no en
   flujo. Así la "×" cierra exacta sin depender de márgenes ni del modo de
   layout del contenedor — con translate calculado a ojo quedaba a medias
   y el icono parecía un ">". */
.burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  margin: 0;
  background: var(--ink);
  border-radius: 2px;
  transform: translate(-50%, -50%) translateY(var(--y, 0));
  transition: transform .34s var(--ease), opacity .18s;
}

.burger span:nth-child(1) { --y: -7px; }
.burger span:nth-child(3) { --y: 7px; }

.nav.open .burger span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav.open .burger span:nth-child(2) { opacity: 0; }
.nav.open .burger span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav ul a { padding: .55rem .6rem; font-size: .84rem; }
}

@media (max-width: 960px) {
  .nav {
    border-radius: 22px;
    padding: .45rem .55rem .45rem 1.1rem;
  }

  .burger { display: block; }

  /* Panel desplegable con los mismos enlaces: sin esto, bajo 960px el menú
     era un callejón sin salida (lista oculta y botón sin comportamiento). */
  .nav ul {
    position: absolute;
    top: calc(100% + .55rem);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: .15rem;
    /* Opaco del todo: el panel se despliega sobre el hero y con cualquier
       transparencia el titular se leía por detrás de los enlaces. */
    background: var(--blanco);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: .55rem;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .26s var(--ease), transform .26s var(--ease);
  }

  .nav.open ul {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .nav ul a { padding: .8rem 1rem; font-size: .95rem; }

  /* El botón de cita baja aquí desde la barra (lo mueve js/main.js). A ancho
     completo y separado de los enlaces por un filete, para que se lea como
     el cierre del panel y no como un enlace más. */
  .nav-cta-li {
    margin-top: .45rem;
    padding-top: .55rem;
    border-top: 1px solid var(--line);
  }

  .nav-cta-li .btn {
    width: 100%;
    padding: .85rem 1rem;
    font-size: .88rem;
  }
}

@media (max-width: 420px) {
  :root { --logo-h: 34px; }
  .nav { padding-left: .9rem; }
}


/* ===========================================================================
   7. HERO
   =========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--verde-petroleo);
}

.hero-bg {
  position: absolute;
  inset: -8% 0 -8% 0;    /* holgura para que el parallax no descubra bordes */
  z-index: 0;
  will-change: transform;
}

.hero-bg > * { height: 100%; }

/* <picture> es inline de fabrica: sin esto no llena el hueco y la foto se
   queda a su tamaño natural. */
.hero-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Dos encuadres según el ancho, elegidos en el marcado con <source>:
     escritorio  hero-fondo-01.jpg          1920 × 1080  (16:9, apaisada)
     ≤ 560 px    hero-fondo-responsive.jpg  1080 × 2280  (vertical, 1:2.1)

   El hueco del hero es alto y estrecho en móvil, así que la apaisada se
   recortaba por los lados y dejaba fuera a una de las dos figuras. */
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Degradado de marca sobre la foto: aquí el teal SÍ manda, es su papel.
   Antes caía de .95 a .10 y a partir del 72 % la foto quedaba casi limpia:
   el velo cubría un lado y el otro no. Ahora recorre TODO el fondo y en
   ningún punto baja de .68, así que la imagen se lee entera bajo el mismo
   tono. Conserva la caída diagonal —a la izquierda pesa más, que es donde
   va el titular— pero ya no se abre. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(18, 63, 59, .92) 0%,
      rgba(18, 63, 59, .84) 38%,
      rgba(18, 63, 59, .74) 72%,
      rgba(18, 63, 59, .68) 100%),
    radial-gradient(70% 60% at 8% 12%, rgba(118, 188, 33, .22), transparent 62%);
}

/* padding-block y NO el atajo `padding`. Con `padding: 9rem 0 4.5rem` el 0
   de los lados pisaba el padding horizontal que hereda de .wrap, y en móvil
   el titular, el párrafo, los botones y los chips quedaban pegados al borde
   izquierdo de la pantalla. */
.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: 9rem 4.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .24);
  padding: .45rem 1rem;
  border-radius: 40px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--blanco);
  letter-spacing: .04em;
  margin-bottom: 1.6rem;
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde-alinea);
  box-shadow: 0 0 0 4px rgba(118, 188, 33, .3);
  flex: none;
}

.hero h1 {
  color: var(--blanco);
  max-width: 16ch;
}

.hero h1 u {
  text-decoration: none;
  color: var(--verde-alinea);
  position: relative;
  white-space: nowrap;
}

.hero h1 u::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .08em;
  height: 3px;
  background: var(--verde-alinea);
  opacity: .6;
  border-radius: 3px;
}

.hero .lead {
  color: rgba(255, 255, 255, .86);
  font-size: 1.15rem;
  max-width: 46ch;
  margin: 1.4rem 0 2.2rem;
}

.hero .lead strong { color: var(--blanco); font-weight: 600; }

.hero-actions {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}

.hero-tags {
  display: flex;
  gap: .6rem 1.4rem;
  flex-wrap: wrap;
  margin-top: 2.6rem;
  color: rgba(255, 255, 255, .82);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.hero-tags span {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.hero-tags span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde-alinea);
  flex: none;
}

/* --- El hero en pantallas pequeñas -----------------------------------------
   No tenía ni una media query: usaba los valores de escritorio en todas las
   pantallas y el contenido medía 905 px, más de una pantalla y media en un
   móvil de 640. Aquí se recorta tamaño y aire, sin quitar ninguna pieza: se
   conservan insignia, titular, párrafo, los dos botones y los chips.

   La mayor parte del sobrante era aire: 216 px solo de padding vertical. */

@media (max-width: 860px) {
  .hero-inner { padding-block: 7rem 3rem; }
  .hero h1 { font-size: 2.25rem; }
}

@media (max-width: 560px) {
  .hero-inner { padding-block: 5.5rem 2.5rem; }

  /* La píldora se va en móvil: en una pantalla estrecha parte en dos líneas y
     roba altura al titular, que es lo que de verdad tiene que leerse ahí. Lo
     que dice —especialidad y ubicación— sigue en la meta descripción, en los
     dos bloques de Schema y en la sección de contacto, así que no se pierde
     nada ni para el lector ni para Google.

     Aquí había tres reglas que le achicaban la letra y el padding. Se
     retiraron: con display:none no pintaban nada. */
  .hero-badge { display: none; }

  .hero h1 {
    font-size: 2rem;
    max-width: none;   /* las 16ch de escritorio aquí sobran: manda el ancho */
  }

  .hero .lead {
    font-size: 1rem;
    margin: 1rem 0 1.5rem;
  }

  /* Apilados y a ancho completo. Además de ahorrar alto, da dos zonas
     táctiles grandes en vez de dos botones estrechos que ya envolvían. */
  .hero-actions { flex-direction: column; gap: .7rem; }
  .hero-actions .btn { width: 100%; }

  .hero-tags {
    margin-top: 1.6rem;
    gap: .5rem 1rem;
  }
}


/* ===========================================================================
   8. CIFRAS
   ---------------------------------------------------------------------------
   Franja clara entre el hero oscuro y la sección Resultados. Va en BLANCO y
   no en Gris Fondo porque la sección siguiente (.sand) ya es #F4F5F2: con el
   mismo tono las dos bandas se fundirían en un solo bloque. Así quedan tres
   escalones: oscuro → blanco → gris.

   AVISO DE CONTRASTE: Verde Alinea sobre blanco da 2.34:1. Aun tratándose de
   texto grande, cuyo mínimo es 3:1, no llega. Es una decisión de diseño
   pedida expresamente. Para cumplir, cambiar --cifra-color a
   var(--verde-oscuro) (3.43:1) — una sola línea, el resto no se mueve.
   =========================================================================== */

:root { --cifra-color: var(--verde-alinea); }

.stbar {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-humo);
}

/* padding-block y NO el atajo. Con `padding: clamp(...) 0` el 0 de los lados
   pisaba el padding horizontal que hereda de .wrap y los rótulos arrancaban
   pegados al borde de la pantalla. Es el mismo tropiezo que tenía el hero. */
.stbar-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-block: clamp(2.6rem, 5vw, 3.6rem);
}

.st {
  text-align: center;
  position: relative;
}

.st .n {
  font-family: 'Tenor Sans', sans-serif;
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  color: var(--cifra-color);
  font-variant-numeric: tabular-nums;   /* la cifra no baila al contar */
  letter-spacing: -.01em;
}

.st .n i { font-style: normal; }

.st .l {
  font-size: .78rem;        /* 12.5 px: en versales apretadas 11.5 se leía mal */
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-oscuro);
  margin-top: .6rem;
  font-weight: 700;
  line-height: 1.45;
}

/* Separador: hairline que se desvanece por arriba y por abajo en vez de
   cortar en seco. Sobre fondo blanco una línea dura pesaría demasiado. */
.st + .st::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: linear-gradient(180deg,
      transparent 0%,
      var(--gris-claro) 24%,
      var(--gris-claro) 76%,
      transparent 100%);
  opacity: .75;
}

/* La cifra ENFOCA mientras cuenta, igual que el hero al cargar: es una
   clínica oftalmológica y ese es el gesto de toda la página.

   El desenfoque lo gobierna --enfoque (0 → 1), que js/main.js escribe en el
   MISMO bucle que va subiendo el número. Así la nitidez y la cifra llegan a
   destino a la vez, en lugar de correr en dos relojes independientes.

   Por defecto vale 1: sin JS, o si la animación no llega a arrancar, la
   cifra se ve nítida y a tamaño completo. */
.st .n {
  --enfoque: 1;
  filter: blur(calc((1 - var(--enfoque)) * 9px));
  opacity: calc(.34 + var(--enfoque) * .66);
  transform: translateY(calc((1 - var(--enfoque)) * 8px));
}

@media (max-width: 640px) {
  .stbar-in {
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem 1rem;
  }

  /* El tercer dato abre la segunda fila: ahí el separador sobra */
  .st:nth-child(3)::before { display: none; }

  /* En dos columnas el rótulo llena la celda entera y roza el separador.
     Un poco de aire dentro de la celda y menos espaciado entre letras: en
     versales apretadas es lo que más ancho consume. */
  .st { padding-inline: .5rem; }

  .st .l {
    letter-spacing: .09em;
    margin-top: .5rem;
  }
}


/* ===========================================================================
   9. SECCIONES
   =========================================================================== */

.sec { padding: clamp(4.2rem, 8vw, 7rem) 0; }

.sand { background: var(--sand); }

/* Bloque claro de marca: Verde Pálido del manual. Lo usa "Nuestro enfoque".
   Al ser fondo claro, todo el contenido va en tinta oscura — no hereda nada
   de .dark. Un velo verde en las esquinas le da algo de profundidad sin
   ensuciar el tono. */
.pale {
  background: var(--verde-palido);
  position: relative;
  isolation: isolate;
}

.pale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(54% 58% at 4% -4%, rgba(118, 188, 33, .16), transparent 62%),
    radial-gradient(46% 52% at 104% 104%, rgba(255, 255, 255, .8), transparent 66%);
}

/* Bloque oscuro = degradado teal → negro. Nunca teal plano. */
.dark {
  background: var(--surface-dark);
  color: var(--blanco);
  position: relative;
  isolation: isolate;
}

.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56% 60% at 6% -6%, rgba(118, 188, 33, .2), transparent 64%),
    radial-gradient(48% 54% at 104% 104%, rgba(164, 214, 94, .12), transparent 68%);
}

.dark h2, .dark h3, .dark h4 { color: var(--blanco); }

.sec-head {
  max-width: 660px;
  margin: 0 auto 3.4rem;
  text-align: center;
}

.sec-head h2 { margin-bottom: .7rem; }

.sec-head p {
  color: var(--muted);
  margin-top: 1rem;
}

.dark .sec-head p { color: rgba(255, 255, 255, .82); }

.rule {
  display: inline-block;
  width: 54px;
  height: 1px;
  background: var(--rule);
}

.dark .rule { background: rgba(164, 214, 94, .55); }


/* ===========================================================================
   10. PLACEHOLDERS .ph
   ---------------------------------------------------------------------------
   Cajas de "foto pendiente". Se quedan hasta que lleguen las fotos reales.
   Migradas del <style> inline al design system: sin verdes inventados, con
   Verde Pálido de fondo, Gris Claro de trazo y un icono dibujado (no emoji).
   =========================================================================== */

.ph {
  background:
    linear-gradient(135deg, var(--verde-palido) 0%, var(--gris-fondo) 100%);
  border: 2px dashed var(--gris-claro);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--gris-oscuro);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 1.25rem;
  min-height: 200px;
  width: 100%;
  height: 100%;
  transition: transform .5s var(--ease), border-color .3s;
}

.ph::before {
  content: "";
  width: 30px;
  height: 30px;
  margin-bottom: .55rem;
  background: currentColor;
  opacity: .5;
  -webkit-mask: var(--ico-camara) center / contain no-repeat;
  mask: var(--ico-camara) center / contain no-repeat;
}

.ph small {
  display: block;
  font-weight: 400;
  color: var(--gris-vision);
  margin-top: .4rem;
  font-size: .72rem;
}

:root {
  --ico-camara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}

/* Proporción según el hueco que ocupan. Va aquí y no en un style="" del
   HTML: cada contenedor ya sabe qué forma tiene su foto. */
.ba .s .ph        { aspect-ratio: 3 / 3.4; }
.doc-photo .ph    { aspect-ratio: 4 / 4.6; }
.enfoque-media .ph{ aspect-ratio: 4 / 4.4; }
.vid .ph          { aspect-ratio: 16 / 9; }
.mot .ph          { aspect-ratio: 16 / 10; }

/* Sobre Verde Pálido el placeholder tira a blanco: con el degradado normal
   quedaba verde sobre verde y la caja apenas se distinguía del fondo. */
.pale .ph {
  background: linear-gradient(135deg, var(--blanco) 0%, var(--gris-fondo) 100%);
  border-color: var(--gris-claro);
}

/* Sobre superficie oscura el placeholder invierte */
.dark .ph {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(164, 214, 94, .35);
  color: rgba(255, 255, 255, .82);
}

.dark .ph small { color: rgba(255, 255, 255, .58); }

/* El del hero cubre todo y no lleva marco. Su etiqueta se va a la esquina
   inferior derecha en vez de al centro: centrada chocaba con el titular y
   el párrafo, sobre todo en móvil. Sigue siendo legible como nota. */
.hero .ph {
  border: 0;
  border-radius: 0;
  min-height: 100svh;
  background: linear-gradient(150deg, #123f3b, #0d2724);
  color: rgba(255, 255, 255, .42);
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  padding: 1.4rem 1.6rem 5.5rem;
  font-size: .72rem;
  max-width: 30ch;
  margin-left: auto;
}

.hero .ph::before {
  width: 20px;
  height: 20px;
  margin-bottom: .35rem;
  align-self: flex-end;
}

.hero .ph small { color: rgba(255, 255, 255, .3); font-size: .66rem; }

@media (max-width: 720px) {
  /* En móvil el contenido llega casi al pie del hero: la nota se reduce
     al icono para no competir con nada. */
  .hero .ph { font-size: 0; padding-bottom: 1.4rem; }
  .hero .ph small { display: none; }
  .hero .ph::before { margin-bottom: 0; opacity: .35; }
}


/* ===========================================================================
   11. ANTES / DESPUÉS
   =========================================================================== */

.ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.ba {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 0;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.ba:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

/* --- El comparador -------------------------------------------------------
   Las dos mitades se superponen a tamaño completo; la de "antes" va encima y
   se recorta con clip-path según --x, que escribe js/main.js al arrastrar.
   Recortar el CONTENEDOR y no la imagen permite que dentro haya un <img>
   real o un marcador .ph indistintamente. */

.ba-compare {
  --x: 50%;
  /* Altura fija en vez de aspect-ratio: se quiere una franja con los ojos, no
     el retrato entero. Un solo número para probar otras alturas. */
  --ba-alto: 150px;
  position: relative;
  height: var(--ba-alto);
  overflow: hidden;
  cursor: ew-resize;
  /* pan-y y no none: el arrastre horizontal es nuestro, pero el dedo sigue
     pudiendo desplazar la página en vertical sobre la tarjeta. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  background: var(--gris-fondo);
}

.ba-compare .s {
  position: absolute;
  inset: 0;
}

/* Acepta <img> o .ph: ambos llenan la mitad por igual */
.ba-compare .s > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
  min-height: 0;
  pointer-events: none;   /* el arrastre lo gobierna el contenedor */
}

/* Encuadre independiente de cada mitad.

   Los pares no están tirados desde la misma distancia —y en dos de los tres
   casos una foto es apaisada y la otra vertical—, así que con el centrado por
   defecto la cara salta al arrastrar el tirador y la comparación no se
   entiende. Cada .ba-compare fija su encuadre en el marcado con --pos-antes y
   --pos-despues, elegidos para que los ojos caigan a la misma altura en las
   dos mitades.

   El recuadro es 4:3. Una foto vertical 3:4 solo enseña el 56 % de su alto,
   así que estos valores también deciden qué queda FUERA del recorte. */
.ba-compare .s-antes > *   { object-position: var(--pos-antes, 50% 50%); }
.ba-compare .s-despues > * { object-position: var(--pos-despues, 50% 50%); }

/* "Antes" encima y recortada desde la derecha; "Después" queda de base */
.ba-compare .s-antes {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
}

.ba-compare .s-despues { z-index: 1; }

/* Mientras no haya fotos, los dos marcadores se distinguen entre sí: si
   fueran idénticos el arrastre no se vería y parecería roto. */
.ba-compare .s-antes .ph {
  background: linear-gradient(135deg, var(--gris-humo), var(--gris-claro));
}

/* Cada rótulo se arrima a su lado y deja hueco bajo las píldoras. Centrados
   se pisaban entre sí justo en la línea divisoria, que es donde el recorte
   los parte por la mitad. Con fotos reales esto es indiferente. */
.ba-compare .ph {
  padding: 3.1rem 1rem 1rem;
  font-size: .74rem;
  line-height: 1.4;
}

.ba-compare .ph::before { width: 22px; height: 22px; margin-bottom: .4rem; }

.ba-compare .s-antes .ph {
  align-items: flex-start;
  text-align: left;
  padding-right: 52%;
}

.ba-compare .s-despues .ph {
  align-items: flex-end;
  text-align: right;
  padding-left: 52%;
}

.ba .tag {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 4;
  background: var(--verde-petroleo);
  color: var(--blanco);
  font-size: .72rem;         /* 9.9 px era ilegible; ahora 11.5 */
  font-weight: 700;
  letter-spacing: .1em;
  padding: .32rem .75rem;
  border-radius: 20px;
}

/* Chip "Después" en verde de marca, con texto oscuro */
.ba .tag.a {
  left: auto;
  right: .7rem;
  background: var(--verde-alinea);
  color: var(--negro-alinea);
}

/* Línea divisoria */
.ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 3px;
  margin-left: -1.5px;
  background: var(--blanco);
  box-shadow: 0 0 0 1px rgba(9, 6, 9, .1), 0 0 14px rgba(9, 6, 9, .3);
  z-index: 5;
  pointer-events: none;
}

/* Tirador */
.ba-grip {
  position: absolute;
  top: 50%;
  left: var(--x);
  transform: translate(-50%, -50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--verde-alinea);
  display: grid;
  place-items: center;
  cursor: ew-resize;
  box-shadow: 0 6px 18px -4px rgba(9, 6, 9, .45);
  transition: transform .25s var(--ease), background .25s;
}

.ba-grip svg {
  width: 24px;
  height: 24px;
  fill: var(--blanco);
  pointer-events: none;
}

.ba-compare:hover .ba-grip { transform: translate(-50%, -50%) scale(1.08); }

.ba-grip:active { background: var(--verde-oscuro); }

.ba-grip:focus-visible {
  outline: 3px solid var(--verde-petroleo);
  outline-offset: 3px;
  transform: translate(-50%, -50%) scale(1.08);
}

/* Mientras se arrastra no hay transición: la línea debe pegarse al dedo */
.ba-compare.arrastrando .ba-grip { transition: background .25s; }

.ba .cap {
  padding: 1.1rem 1.2rem;
  text-align: center;
}

.ba .cap b {
  font-family: 'Tenor Sans', sans-serif;
  font-weight: 400;
  color: var(--ink);
  display: block;
  font-size: 1.02rem;
}

.ba .cap span {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .04em;
}

@media (max-width: 860px) {
  .ba-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}


/* ===========================================================================
   12. ESPECIALIDADES
   =========================================================================== */

.motivos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.mot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: var(--blanco);
  background: var(--verde-petroleo);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.mot:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-green);
}

/* La foto (o el marcador, mientras no la haya) hace de fondo de la tarjeta.
   Va velada al 50 % porque encima vive el texto; al pasar el ratón sube un
   poco y se acerca. */
.mot .ph,
.mot > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: 0;
  min-height: 0;
  opacity: .5;
  transition: opacity .45s, transform .6s var(--ease);
}

.mot:hover .ph,
.mot:hover > img { opacity: .62; transform: scale(1.05); }

/* Protección degradada abajo, que es donde vive el texto */
.mot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(18, 63, 59, .28) 0%,
      rgba(18, 63, 59, .8) 55%,
      rgba(9, 6, 9, .94) 100%);
  z-index: 1;
  transition: background .45s var(--ease-soft);
}

.mot:hover::after {
  background: linear-gradient(180deg,
      rgba(18, 63, 59, .24) 0%,
      rgba(30, 76, 26, .8) 52%,
      rgba(94, 154, 26, .92) 100%);
}

.mot > h3,
.mot > p,
.mot > .arrow { position: relative; z-index: 2; }

.mot h3 {
  color: var(--blanco);
  margin-bottom: .3rem;
}

.mot p {
  color: rgba(255, 255, 255, .88);
  font-size: .85rem;
  line-height: 1.5;
}

.mot .arrow {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .38);
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background .3s, border-color .3s, transform .4s var(--ease);
}

.mot:hover .arrow,
.mot:focus-visible .arrow {
  background: var(--verde-alinea);
  border-color: var(--verde-alinea);
  transform: rotate(45deg);
}

.mot .arrow svg {
  width: 15px;
  height: 15px;
  stroke: var(--blanco);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.motivos-cta {
  text-align: center;
  margin-top: 2.8rem;
  color: var(--muted);
}

.motivos-cta .btn { margin-top: 1.1rem; }

@media (max-width: 860px) { .motivos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .motivos { grid-template-columns: 1fr; } }


/* ===========================================================================
   13. INFORMACIÓN SEO
   ---------------------------------------------------------------------------
   Migrado del <style> inline. Antes: bordes azulados #e2eef0 y textos
   #566a68, ninguno del manual. Ahora usa Gris Humo y Gris Oscuro.
   =========================================================================== */

.seo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.seo-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.9rem;
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}

/* Filo verde superior que se despliega al pasar por encima */
.seo-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--verde-alinea);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}

.seo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--gris-claro);
}

.seo-card:hover::before { transform: scaleX(1); }

.seo-card h3 { margin-bottom: .6rem; }

.seo-card p {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.65;
}

.seo-card strong { color: var(--ink); }

/* En tablet caben dos: a una sola columna las tres fichas hacían una
   columna de texto larguísima. */
@media (max-width: 1024px) { .seo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .seo-grid { grid-template-columns: 1fr; } }


/* ===========================================================================
   14. DOCTOR
   =========================================================================== */

/* --- El panel ---------------------------------------------------------------
   Sin bandeja gris: el bloque respira sobre el blanco de la página y se
   alinea con el resto de secciones.

   Aquí había un resplandor verde radial en la esquina superior derecha.
   Funcionaba sobre el gris, pero al quitar la bandeja se quedó sin
   superficie y lo único que hacía era teñir de verde la columna de texto.
   Fuera. Si alguna vez vuelve el fondo gris, vuelve con él:

     .doc-panel::before {
       content: ""; position: absolute; inset: 0; z-index: -1;
       pointer-events: none;
       background: radial-gradient(46% 56% at 98% -4%,
                   rgba(118, 188, 33, .10), transparent 68%);
     }                                                                     */

.doc-panel {
  position: relative;
  /* Sin relleno lateral: con fondo transparente indentaría el contenido
     respecto a las demás secciones. El aire vertical sí se conserva. */
  padding: clamp(.5rem, 1.6vw, 1.2rem) 0;
}

.doc {
  display: grid;
  /* Antes .85fr / 1.15fr, pensado para un retrato vertical. Con el vídeo en
     16:9 la columna estrecha lo dejaba diminuto: van a la par. */
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

/* --- Columna izquierda: identidad ----------------------------------------- */

.doc-id .vplayer { margin-top: 1.8rem; }

/* --- Vídeo de presentación ------------------------------------------------
   Fachada: mientras no se pulse play, aquí solo hay un póster. El iframe lo
   inyecta js/main.js, así que la página no arrastra el peso de YouTube en la
   primera carga. Los estilos sirven para las dos fases. */

.vplayer {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--verde-palido);
}

/* El póster entero es zona pulsable: js/main.js marca .pulsable cuando hay
   un vídeo que dar. Una vez reproduciendo manda el cursor de YouTube. */
.vplayer.pulsable { cursor: pointer; }
.vplayer.reproduciendo { cursor: default; }

/* Reserva del 16:9 para navegadores sin aspect-ratio (anteriores a 2021):
   el truco clásico del padding, que aquí solo entra si hace falta. */
@supports not (aspect-ratio: 16 / 9) {
  .vplayer { height: 0; padding-bottom: 56.25%; }
}

.vplayer .ph {
  border-radius: 0;
  border: 0;
  aspect-ratio: auto;      /* el marco ya impone el 16:9 */
  height: 100%;
  min-height: 0;           /* los 200px de serie romperían el 16:9 en móvil */

  /* La etiqueta se va a la esquina superior izquierda. Centrada chocaba con
     el botón de play, que ocupa justo el medio del marco. */
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 1rem 1.1rem;
  font-size: .76rem;
}

.vplayer .ph::before { width: 22px; height: 22px; margin-bottom: .35rem; }
.vplayer .ph small { font-size: .64rem; margin-top: .25rem; }

/* Cuando llegue el póster real basta con cambiar el .ph por un <img>:
   <img src="assets/img/doctor-poster.jpg" alt="" width="1600" height="900"
        loading="lazy" decoding="async"> */
.vplayer > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El iframe que inyecta el JS ocupa el marco entero */
.vplayer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Al arrancar el vídeo el control sale de escena */
.vplayer.reproduciendo .vplayer-cta {
  opacity: 0;
  pointer-events: none;
}

/* Y la portada se retira del todo, sea lo que sea —una foto, un marcador o
   una ilustración—: mientras el reproductor de YouTube se monta podría
   asomar por detrás del iframe. El control se desvanece aparte, por eso
   queda fuera de la regla. */
.vplayer.reproduciendo > :not(iframe):not(.vplayer-cta) { display: none; }

/* --- El control ------------------------------------------------------------
   Antes había un círculo verde en el centro del marco, pero caía justo sobre
   la cara del doctor. Ahora el único control es esta píldora de la esquina:
   un <button> de verdad, con su disco verde de play dentro, así que la foto
   se ve entera y el teclado sigue teniendo dónde entrar. */

.vplayer-cta {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  max-width: calc(100% - 2rem);
  padding: .42rem 1rem .42rem .42rem;
  /* 40 px de alto mínimo: a 34 se quedaba por debajo de lo que un dedo
     acierta con comodidad, y es el control que abre el vídeo. */
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 63, 59, .84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--blanco);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(9, 6, 9, .7);
  transition: opacity .3s var(--ease-soft), transform .3s var(--ease),
              background .25s var(--ease-soft), box-shadow .3s var(--ease);
}

/* El triángulo va dentro de un disco verde: es lo que se lee de un vistazo
   como "esto se reproduce". Blanco sobre verde, la regla de siempre. */
.vplayer-cta svg {
  width: 26px;
  height: 26px;
  flex: none;
  padding: 7px 6px 7px 8px;   /* el triángulo pesa a la izquierda */
  border-radius: 50%;
  background: var(--verde-alinea);
  fill: var(--blanco);
  transition: background .25s var(--ease-soft), transform .3s var(--ease);
}

/* Responde tanto al hover propio como al del marco entero, que también es
   pulsable: así el conjunto se comporta como una sola pieza. */
.vplayer-cta:hover,
.vplayer.pulsable:hover .vplayer-cta {
  background: rgba(18, 63, 59, .94);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -16px rgba(9, 6, 9, .8);
}

.vplayer-cta:hover svg,
.vplayer.pulsable:hover .vplayer-cta svg {
  background: var(--verde-oscuro);
  transform: scale(1.08);
}

.vplayer-cta:active { transform: translateY(0); }

/* El aro de foco por defecto es teal y aquí caería sobre una píldora teal
   encima de una foto: en blanco se ve siempre. */
.vplayer :focus-visible { outline-color: var(--blanco); }

/* --- Identidad ------------------------------------------------------------ */

.doc h2 { margin-bottom: .7rem; }

.doc .role {
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde-oscuro);
  font-weight: 700;
  margin-bottom: .5rem;
}

.doc .credo {
  color: var(--ink);
  font-weight: 700;
  font-size: .96rem;
  margin: 0 0 .7rem;
}

/* Colegiatura: el dato duro del médico. Va destacado con el filete verde a
   la izquierda y en cifras tabulares para que los números no bailen. */
.doc .colegiatura {
  display: inline-block;
  padding: .32rem 0 .32rem .8rem;
  border-left: 4px solid var(--verde-alinea);
  color: var(--ink);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.doc-bio > p {
  color: var(--muted);
  max-width: 54ch;
  margin-bottom: 1.9rem;
}

/* --- Grupos de credenciales ----------------------------------------------
   El encabezado lleva un filete que se come el ancho sobrante, así el grupo
   se lee como una sección y no como otra lista más. */

.cred + .cred { margin-top: 1.7rem; }

/* Estos dos iban en Open Sans a .72rem, con aire de rótulo y no de titular:
   eran los que rompían la escala. Ahora son h3 de verdad —Tenor Sans, 24 px—
   y el filete lateral sigue haciendo el trabajo de agrupar. */
.cred h3 {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .9rem;
  color: var(--verde-oscuro);
}

.cred h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gris-claro), transparent);
}

.doc-bio .btn-green { margin-top: 2rem; }

/* --- Somos miembros de ---------------------------------------------------- */

.doc-miembros {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--gris-humo);
  text-align: center;
}

/* Aquí había una pincelada verde dibujada con una máscara SVG. Sobraba: la
   web ya resuelve esto con .rule, el filete de 54 px que llevan todas las
   cabeceras de sección. Se reutiliza el componente y no hay dos maneras de
   subrayar un título. */
.doc-miembros h3 {
  color: var(--ink);
  margin-bottom: .7rem;
}

.doc-miembros .rule { margin-bottom: 1.7rem; }

.miembros-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 5vw, 3.6rem);
}

.miembros-row img {
  height: 122px;          /* 68 px + 80 % */
  width: auto;
  object-fit: contain;
  /* Los tres sellos vienen en JPG con fondo blanco. En multiply el blanco se
     funde con el fondo de la página y desaparece el recuadro, sin tener que
     recortarlos a PNG. */
  mix-blend-mode: multiply;
  transition: transform .32s var(--ease), filter .32s var(--ease-soft);
}

.miembros-row img:hover {
  transform: translateY(-3px) scale(1.03);
  filter: saturate(1.08);
}

@media (max-width: 860px) {
  /* El vídeo arriba, la biografía debajo. En 16:9 no se le pone tope de
     ancho: recortarlo a 380 px lo dejaría en una tira de 214 px de alto. */
  .doc { grid-template-columns: 1fr; }
  .miembros-row img { height: 108px; }
}

@media (max-width: 560px) {
  /* El botón de cita de la biografía, centrado.

     En escritorio la bio es una columna estrecha y el botón pegado a la
     izquierda cierra bien el bloque. En móvil el texto ocupa todo el ancho y
     el botón se queda descolgado en una esquina, con la mitad del bloque de
     aire a su derecha —282 px de hueco medidos a 561 px de ventana—.

     display:flex y no inline-flex porque margin-inline:auto solo centra
     elementos de nivel bloque. Por dentro el botón no cambia: .btn ya era
     inline-flex y sigue alineando su contenido igual. El width:fit-content
     evita que se estire de lado a lado. */
  .doc-bio > .btn {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }

  /* En 16:9 el marco baja a ~190 px de alto: la píldora se ajusta para no
     comerse el encuadre. El marcador, si vuelve a haberlo, se queda solo
     con el icono. */

  .vplayer .ph {
    font-size: 0;
    padding: .8rem .9rem;
  }

  .vplayer .ph small { display: none; }

  .vplayer-cta {
    bottom: .65rem;
    left: .65rem;
    padding: .34rem .8rem .34rem .34rem;
    font-size: .76rem;
    gap: .45rem;
  }

  .vplayer-cta svg { width: 23px; height: 23px; padding: 6px 5px 6px 7px; }

  /* Dos arriba y uno debajo: a un solo logo por fila quedan enormes y la
     sección se estira sin motivo. */
  .miembros-row { gap: 1rem 1.4rem; }
  .miembros-row img { height: 94px; flex: 0 0 auto; }
}


/* --- Listas con tick: patrón único para doctor, enfoque y formulario ------ */

.doc ul,
.enfoque ul,
.lead-benefits {
  list-style: none;
  display: grid;
  gap: .7rem;
  margin: 1.4rem 0 1.8rem;
}

.doc li,
.enfoque li,
.lead-benefits li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}

.doc li svg,
.enfoque li svg,
.lead-benefits li svg {
  width: 20px;
  height: 20px;
  stroke: var(--verde-oscuro);
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  margin-top: 3px;
}

.dark li { color: var(--blanco); }
.dark li svg { stroke: var(--on-dark-accent); }

/* La formación del doctor es la única lista con negritas dentro. Con los
   600 de serie, un <strong> a 700 apenas se distinguía; el cuerpo baja a
   500 para que la negrita marque de verdad las dos titulaciones. Solo
   afecta a esta lista: #enfoque y el formulario siguen igual. */
.doc li { font-weight: 500; }
.doc li strong { font-weight: 700; }

/* Dentro de un grupo el margen lo pone el propio grupo, no la lista */
.cred ul { margin: 0; gap: .62rem; }


/* ===========================================================================
   15. (libre)
   ---------------------------------------------------------------------------
   Aquí vivía RESPALDO: la franja "Respaldados por trayectoria clínica y
   científica" con las tres sociedades en píldoras de texto. Se retiró porque
   decía lo mismo que "Somos miembros de:" de la sección del doctor, que
   además lo dice con los sellos reales en color. Dos veces la misma prueba
   social, y la de aquí era la más floja.
   =========================================================================== */


/* ===========================================================================
   16. PROCESO — .steps / .step
   ---------------------------------------------------------------------------
   Cuatro tarjetas blancas sobre un hilo punteado verde. El hilo lo dibuja
   .steps::before y va POR DEBAJO de las tarjetas: solo asoma por los huecos,
   que es justo lo que hace que se lea como una línea de tiempo y no como un
   subrayado. Se traza de izquierda a derecha al entrar en pantalla.
   =========================================================================== */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

/* El hilo. Arranca y termina en el centro del primer y del último círculo
   (con 4 columnas, el 12.5 % de cada lado). La altura sale de sumar el
   relleno superior de la tarjeta y el radio del círculo. */
.steps::before {
  content: "";
  position: absolute;
  top: calc(2.2rem + 44px);
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  z-index: 0;
  background: repeating-linear-gradient(90deg,
      rgba(118, 188, 33, .5) 0 7px,
      transparent 7px 15px);
}

/* Se traza al entrar. Solo con JS vivo: sin él la línea está desde el inicio. */
.js .steps::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .95s var(--ease) .12s;
}

.js .steps.in::before { transform: scaleX(1); }

.step {
  position: relative;
  z-index: 1;
  background: var(--blanco);
  border: 1px solid var(--gris-humo);
  border-radius: 20px;
  padding: 2.2rem 1.4rem 1.8rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(18, 63, 59, .06);
  transition: transform .42s var(--ease), box-shadow .42s var(--ease),
              border-color .42s var(--ease);
}

.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -18px rgba(18, 63, 59, .22);
  border-color: var(--gris-claro);
}

/* --- El círculo del icono ---
   Degradado verde → teal: aquí el teal SÍ entra, porque es un degradado y no
   un bloque plano. El icono va en trazo blanco. */

.step-ico {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--verde-alinea), var(--verde-petroleo));
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px -12px rgba(94, 154, 26, .6);
  transition: transform .42s var(--ease), box-shadow .42s var(--ease);
}

.step:hover .step-ico {
  transform: scale(1.06);
  box-shadow: 0 20px 38px -12px rgba(94, 154, 26, .75);
}

.step-ico > svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--blanco);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El número flota en la esquina del círculo, no dentro: así el icono manda
   y el paso se sigue contando de un vistazo. */
.step .num {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blanco);
  border: 2px solid var(--verde-alinea);
  color: var(--verde-oscuro);
  font-family: 'Open Sans', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px -3px rgba(18, 63, 59, .25);
}

.step h4 { margin-bottom: .45rem; }

.step p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}

@media (max-width: 860px) {
  /* En 2×2 un hilo horizontal cruzaría las dos filas a la misma altura y
     mentiría sobre el recorrido: se retira. */
  .steps { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .steps::before { display: none; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }

  /* Apilado, el hilo vuelve como una guía vertical entre tarjeta y tarjeta */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 1.4rem;
    translate: -50% 0;
    background: repeating-linear-gradient(180deg,
        rgba(118, 188, 33, .5) 0 7px,
        transparent 7px 15px);
  }
}


/* ===========================================================================
   17. ENFOQUE
   =========================================================================== */

.enfoque {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.enfoque h2 { margin-bottom: 1.2rem; }

/* Verde Oscuro y no Verde Alinea: sobre Verde Pálido el verde principal se
   queda en 2.1:1 y aquí llega a 3.0:1, que es el mínimo para texto grande
   (este titular mide 32–48 px). */
/* "ve el mundo" iba aquí en Open Sans Light cursiva: era la única palabra de
   un titular en otra tipografía. Tenor Sans no tiene cursiva —fingirla la
   deforma—, así que el énfasis lo lleva el color, igual que en el h1 del
   hero, donde esa misma frase ya va en verde. */
.enfoque h2 i {
  color: var(--verde-oscuro);
  font-style: normal;
}

.enfoque p {
  color: var(--muted);
  max-width: 48ch;
}

.enfoque-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.enfoque-media .ph { border-radius: 0; }

/* La foto llena el hueco 4:4.4. El original es cuadrado, así que el recorte
   es lateral y mínimo: manda la altura.

   height:auto es imprescindible. Los atributos width/height del <img> entran
   como estilo de presentación, y sin anular la altura el navegador aplica el
   height="1000" del marcado: aspect-ratio no llega a intervenir y la foto se
   estira. */
.enfoque-media > img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 860px) {
  .enfoque { grid-template-columns: 1fr; }
  .enfoque-media { max-width: 380px; margin: 0 auto; }
}

@media (max-width: 560px) {
  /* Botón de cita centrado, igual que el de la biografía del doctor. Con la
     rejilla ya apilada el texto ocupa todo el ancho y el botón se quedaba
     descolgado a la izquierda con 116 px de aire a su derecha.

     flex y no inline-flex: margin-inline:auto solo centra elementos de nivel
     bloque. Ver la misma regla en .doc-bio > .btn, sección 17. */
  .enfoque .btn {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}


/* ===========================================================================
   18. DALI
   =========================================================================== */

.dali {
  background: linear-gradient(135deg, var(--verde-palido), var(--white) 62%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 2rem;
  padding: clamp(2rem, 4vw, 3.2rem);
  overflow: hidden;
}

/* Era un h3 sin ningún h2 por encima en su sección: un salto de nivel en el
   esquema del documento. Ahora es el h2 que le corresponde, y de paso
   recupera el peso visual que tenía con su tamaño de antes. */
.dali h2 {
  margin-bottom: .8rem;
  max-width: 20ch;
}

.dali p {
  color: var(--muted);
  max-width: 52ch;
}

/* Sin place-items: center. El reproductor solo tiene hijos absolutos, así que
   su ancho intrínseco es cero; centrado en vez de estirado colapsaba a 0×0 y
   el marco desaparecía. Con el estirado por defecto ocupa la columna. */
.dali-art { display: grid; }

/* La portada del vídeo es ahora la foto del D'Ali real. No necesita reglas
   propias: la recoge .vplayer > img, que ya la estira al marco 16:9.
   Aquí vivían .dali-poster, .croc y @keyframes flotar —el cocodrilo dibujado
   a mano y su flotación—; se retiran para no dejar CSS que ya no pinta nada. */

@media (max-width: 720px) {
  .dali { grid-template-columns: 1fr; text-align: center; }
  .dali h2, .dali p { max-width: none; }
  .dali-art { order: -1; }
}


/* ===========================================================================
   19. TESTIMONIOS — .tgrid / .tcard
   ---------------------------------------------------------------------------
   Migrado del inline. Las estrellas eran caracteres ★ sueltos; se conservan
   como texto porque son contenido, pero con tamaño y color de marca.
   =========================================================================== */

/* --- Marquesina de testimonios -------------------------------------------
   Desfile continuo, sin flechas ni puntos. El bucle no tiene costura porque
   js/main.js duplica las tarjetas hasta cubrir dos veces el ancho visible y
   el recorrido de la animación es exactamente un juego: al terminar, la
   copia siguiente está justo donde estaba la original.

   La velocidad es constante en px/s, no en duración fija: si mañana hay
   quince reseñas en vez de tres, desfilan al mismo ritmo. */

.tmarquee {
  position: relative;
  /* El desplazamiento es scroll NATIVO, no una animación de transform. Así
     el dedo, el trackpad y la rueda funcionan solos, con su inercia, y el
     desfile automático es solo un empujón de scrollLeft por fotograma.
     Con una animación CSS el arrastre habría que reinventarlo entero. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;          /* el smooth global estropearía el desfile */
  overscroll-behavior-x: contain; /* que arrastrar aquí no navegue atrás */
  touch-action: pan-x pan-y;      /* el dedo mueve la fila y también la página */

  /* La barra sobra: la fila se mueve sola y se arrastra */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Los bordes se desvanecen en vez de cortarse a hachazo */
  --difuminado: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: var(--difuminado);
  mask-image: var(--difuminado);
}

.tmarquee::-webkit-scrollbar { display: none; }

/* Mientras se arrastra con el ratón, el cursor lo dice y no se selecciona
   texto sin querer */
.tmarquee.arrastrable { cursor: grab; }
.tmarquee.arrastrando { cursor: grabbing; user-select: none; }
.tmarquee.arrastrando .tcard { pointer-events: none; }

.tmarquee-track {
  display: flex;
  gap: 1.4rem;
  width: max-content;
  /* Sitio para que la elevación de :hover no quede recortada arriba */
  padding: .6rem 0 1.2rem;
}

/* --- Encabezado de los vídeos --------------------------------------------
   Un segundo escalón dentro de la misma sección: las reseñas escritas
   arriba, las grabadas aquí. Mismo patrón que "Somos miembros de:" —h3 con
   el filete .rule debajo— para que la web no tenga dos maneras de presentar
   una subsección. */

.vids-head {
  text-align: center;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}

.vids-head h3 { margin-bottom: .7rem; }

.vids-head p {
  color: var(--muted);
  margin-top: .9rem;
}

.tmarquee .tcard {
  flex: none;
  width: clamp(270px, 27vw, 360px);
}

.tcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.7rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.tcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.tcard .stars {
  color: var(--verde-oscuro);
  font-size: 1rem;
  letter-spacing: 3px;
  margin-bottom: .7rem;
}

.tcard p {
  color: var(--muted);
  font-style: italic;
  line-height: 1.65;
  margin-bottom: 1.2rem;
}

.tcard .who {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.tcard .who .av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--verde-palido);
  display: grid;
  place-items: center;
  color: var(--green-text);
  font-weight: 700;
  font-family: 'Tenor Sans', sans-serif;
  flex: none;
}

.tcard .who b {
  font-family: 'Tenor Sans', sans-serif;
  font-weight: 400;
  color: var(--ink);
  font-size: .95rem;
  display: block;
}

.tcard .who span {
  font-size: .8rem;
  color: var(--muted);
}

@media (max-width: 860px) { .tgrid { grid-template-columns: 1fr; } }

/* --- Miniaturas de vídeo -------------------------------------------------- */

.vids {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.6rem;
}

.vid {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.vid:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.vid .ph { border-radius: 0; border: 0; }

/* Las dos tarjetas son .vplayer además de .vid, así que ya traen el 16:9 y
   el marco. Solo se ajusta la sombra: la del componente es más pesada de lo
   que pide esta rejilla, donde las tarjetas van en pareja. */
.vid.vplayer { box-shadow: var(--shadow-sm); }
.vid.vplayer:hover { box-shadow: var(--shadow); }

@media (max-width: 640px) { .vids { grid-template-columns: 1fr; } }


/* ===========================================================================
   20. FORMULARIO DE CITAS
   =========================================================================== */

.lead-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(1.8rem, 4vw, 2.6rem);
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

/* Beneficios: tick en Verde Alinea y texto en Gris Oscuro, en negrita.
   El manual no tiene un gris más oscuro que #4A4D47; ahí llega a 7.6:1
   sobre Verde Pálido, de sobra. */
.lead-benefits { margin: 0; gap: 1rem; }

.lead-benefits li {
  align-items: center;
  font-size: .98rem;
  font-weight: 700;
  color: var(--gris-oscuro);
}

/* Con `li` en el selector para ganar a la regla común de las listas con
   tick (.doc li svg, .enfoque li svg, .lead-benefits li svg), que pinta en
   Verde Oscuro. Sin él, el verde de marca no llegaba a aplicarse.

   AVISO: Verde Alinea sobre Verde Pálido da 2.07:1 y un icono pide 3:1.
   Es una petición expresa; con var(--verde-oscuro) sube a 3.04:1. */
.lead-benefits li svg {
  width: 22px;
  height: 22px;
  margin-top: 0;
  stroke: var(--verde-alinea);
}

.lead-alt {
  margin-top: 1.7rem;
  color: var(--muted);
  font-size: .9rem;
}

/* Sobre fondo claro el enlace va en Verde Petróleo (10.4:1) con el
   subrayado en Verde Alinea, que al ser decoración no tiene mínimo. */
.lead-alt a {
  display: inline-block;
  /* Es un número de teléfono en móvil: tiene que poder tocarse sin apuntar */
  padding-block: .55rem;
  color: var(--verde-petroleo);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--verde-alinea);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s, color .2s;
}

.lead-alt a:hover {
  color: var(--verde-oscuro);
  text-decoration-color: var(--verde-petroleo);
}

/* Tarjeta blanca: sobre fondo claro basta una sombra suave. La --shadow-lg
   anterior estaba calculada para destacar sobre el degradado oscuro y aquí
   se veía sucia. */
.lead-form {
  background: var(--white);
  border: 1px solid var(--gris-humo);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow);
}

.field { margin-bottom: 1rem; text-align: left; }

/* El campo de "¿Cuál es el motivo?" nace con el atributo hidden y lo enciende
   js/main.js al elegir "Otro". Hoy .field no declara display, así que el
   display:none del navegador basta; este seguro evita que un display puesto
   aquí más adelante deje el campo visible siempre. */
[hidden] { display: none !important; }

.field label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
}

.field input,
.field select {
  width: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid var(--gris-claro);
  border-radius: var(--r-sm);
  font-family: 'Open Sans', sans-serif;
  font-size: .95rem;
  color: var(--ink);
  background: var(--white);
  transition:
    border-color .28s var(--ease),
    box-shadow .28s var(--ease);
}

.field input::placeholder { color: var(--muted); opacity: .75; }

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--verde-alinea);
  box-shadow: 0 0 0 4px rgba(118, 188, 33, .2);
}

/* El borde verde marca el foco a la vista, pero sobre blanco se queda en
   2.3:1. Para el teclado se añade encima un aro en Verde Oscuro, que sí
   llega al 3:1 que pide un indicador de foco. */
.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--verde-oscuro);
  outline-offset: 1px;
}

.field input[aria-invalid="true"] { border-color: var(--err); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .18); }

.field2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.lead-note {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  margin-top: .8rem;
}

.form-err {
  color: var(--err);
  font-size: .82rem;
  font-weight: 600;
  margin-top: .6rem;
  min-height: 1.2em;
  text-align: center;
}

@media (max-width: 820px) {
  .lead-grid { grid-template-columns: 1fr; }
  .field2 { grid-template-columns: 1fr; }
}


/* ===========================================================================
   21. FAQ — .faq-list / .faq
   ---------------------------------------------------------------------------
   Migrado del inline. Es un <details> nativo, así que funciona sin JS y es
   accesible de fábrica. La apertura se anima con grid-template-rows 0fr→1fr,
   que no toca el layout como haría animar height. El signo + gira a ×.
   js/main.js cierra el resto al abrir uno (un solo panel abierto).
   =========================================================================== */

.faq-list {
  max-width: 840px;
  margin: 0 auto;
  display: grid;
  gap: .8rem;
}

.faq {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}

.faq[open] {
  border-color: var(--gris-claro);
  box-shadow: var(--shadow-sm);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 1.4rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  transition: background .25s;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { background: var(--verde-palido); }

/* El signo se dibuja con dos barras y gira: el "+" se convierte en "×" */
.faq summary::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background:
    linear-gradient(var(--verde-oscuro), var(--verde-oscuro)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--verde-oscuro), var(--verde-oscuro)) center / 2.5px 100% no-repeat;
  transition: transform .4s var(--ease);
}

.faq[open] summary::after { transform: rotate(135deg); }

/* Apertura animada sin tocar el layout */
.faq .a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}

.faq[open] .a { grid-template-rows: 1fr; }

.faq .a > * { overflow: hidden; }

.faq .a {
  padding: 0 1.4rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: .95rem;
}

.faq[open] .a { padding-bottom: 1.25rem; }

/* Las respuestas traen ahora varios párrafos y una lista de síntomas. El
   reset general deja <p> y <ul> sin márgenes ni sangría, así que se los
   devuelve aquí. Nada más: el cuerpo, el color y el interlineado siguen
   siendo los de .faq .a. */
.faq .a p + p { margin-top: .8rem; }

.faq .a ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin: .75rem 0;
  display: grid;
  gap: .28rem;
}


/* ===========================================================================
   22. CONTACTO
   =========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 2.4rem;
  align-items: stretch;
}

.cinfo {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}

.cinfo h3 { margin-bottom: 1.5rem; }

.ci {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}

.ci .ic {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--sand);
  display: grid;
  place-items: center;
  flex: none;
  transition: background .25s;
}

/* Mismo encendido que las redes: verde de marca con el icono en blanco. Los
   dos grupos de iconos de esta columna se comportan igual, que era el
   sentido de unificarlos. */
.ci:hover .ic { background: var(--verde-alinea); }
.ci:hover .ic svg { stroke: var(--blanco); }

.ci .ic svg {
  width: 21px;
  height: 21px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s var(--ease-soft);
}

.ci b {
  font-family: 'Tenor Sans', sans-serif;
  font-weight: 400;
  color: var(--ink);
  font-size: 1.02rem;
  display: block;
  line-height: 1.4;
}

.ci span { color: var(--muted); font-size: .9rem; }

/* --- Redes sociales --------------------------------------------------------
   Calcados a los iconos de contacto de arriba (.ci .ic): mismo tamaño, mismo
   radio, mismo gris de fondo y mismo trazo teal. Antes eran cuadrados verdes
   macizos y cortaban la columna justo al final, como si fueran de otra web.

   La única diferencia es el hover: estos SÍ se pulsan, así que en reposo son
   iguales y al pasar por encima se encienden en verde de marca con el icono
   en blanco. Los de contacto son decorativos y no reaccionan. */

.csoc-tit {
  font-family: 'Tenor Sans', sans-serif;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.4;
  margin-top: 1.8rem;
}

.csoc {
  display: flex;
  gap: .7rem;
  margin-top: .8rem;
}

.csoc a {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--sand);
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease), background .25s, box-shadow .3s;
}

.csoc a:hover,
.csoc a:focus-visible {
  transform: translateY(-3px);
  background: var(--verde-alinea);
  box-shadow: var(--shadow-green);
}

/* El icono cambia con el fondo: blanco sobre el verde, la regla de siempre */
.csoc a:hover svg,
.csoc a:focus-visible svg { stroke: var(--blanco); }

/* Idénticos a .ci .ic svg. El punto del visor de Instagram es un segmento de
   longitud cero con el extremo redondeado: dibuja un círculo sólido sin
   romper la coherencia de trazo del conjunto. */
.csoc svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s var(--ease-soft);
}

.map {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  min-height: 440px;
  background: var(--sand);
}

.map iframe {
  width: 100%;
  height: 100%;
  min-height: 440px;
  border: 0;
  display: block;
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .map, .map iframe { min-height: 320px; }
}


/* ===========================================================================
   23. CIERRE
   =========================================================================== */

/* Verde Pálido de base, pero ya no es lo que se ve: encima van la foto
   (.final-bg) y el velo (::before). Se mantiene como red de seguridad, para
   que el bloque nazca oscuro aunque la foto falte o tarde.

   Sin border-top: era un filete de Gris Humo pensado para separar dos bloques
   claros. Sobre el velo oscuro se lee como una costura clara cruzando el
   remate de la página, y el salto de claro a oscuro ya separa de sobra. */
.final {
  background: var(--verde-palido);
  text-align: center;
  position: relative;
  overflow: hidden;

  /* 700 px de alto en escritorio, para que la foto se vea y no quede reducida
     a una franja.

     La rampa va por ANCHO de ventana, no por alto: un móvil es estrecho, y a
     700 fijos se tragaría la pantalla entera con la foto recortadísima. A
     partir de 1250 px de ancho ya da los 700 clavados.

     El min() de 92vh es el tope de seguridad para portátiles apaisados y
     bajos (1440 × 720 y parecidos): sin él el bloque saldría más alto que la
     propia pantalla. */
  min-height: min(clamp(26rem, 56vw, 700px), 92vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* La foto de fondo, con el mismo montaje que el hero: el recorte lo hace el
   contenedor y encima va el velo. El Verde Pálido de .final sigue de base, así
   que si la foto falta o tarda, el bloque se ve igual de oscuro bajo el velo y
   el texto blanco no se queda nunca sobre claro. */
.final-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.final-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* El velo del hero, con el mismo carácter: diagonal de Verde Petróleo más un
   halo de Verde en la esquina alta. Aquí va más denso que en el hero
   (.93→.84 frente a .92→.68) porque allí el texto grande se conforma con
   3:1 y aquí el párrafo es texto normal y necesita 4.5:1. Medido contra el
   peor caso imaginable —una foto blanca del todo, justo bajo el halo verde—
   el párrafo da 4.79:1 y el titular 5.3:1. Con cualquier foto real sube.

   z-index: 1 no es decorativo: sin él el pseudo-elemento pinta ANTES que
   .final-bg, por orden de árbol, y el velo se quedaría debajo de la foto. */
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(18, 63, 59, .93) 0%,
      rgba(18, 63, 59, .90) 38%,
      rgba(18, 63, 59, .86) 72%,
      rgba(18, 63, 59, .84) 100%),
    radial-gradient(70% 60% at 8% 12%, rgba(118, 188, 33, .18), transparent 62%);
}

/* Anclado en .wrap y no en .in: esa clase del HTML significa "inner", pero
   coincide con la clase de estado del sistema de revelado. Ver js/main.js. */
.final .wrap { position: relative; z-index: 2; }

.final h2 {
  color: var(--blanco);
  max-width: 20ch;
  margin: 0 auto 1rem;
}

/* Mismo blanco rebajado que .hero .lead: el párrafo cede jerarquía al
   titular sin salirse de la paleta. */
.final p {
  color: rgba(255, 255, 255, .86);
  max-width: 46ch;
  margin: 0 auto 2rem;
}

/* Micro-interacción del botón del cierre: además del desplazamiento común,
   una escala mínima. Es la última llamada de la página y conviene que
   responda con algo más de cuerpo, sin llegar a rebotar.

   La ENTRADA usa `translate` y el HOVER usa `transform`, a propósito. Si
   compartieran propiedad, el retardo del escalonado (que la entrada
   necesita) se aplicaría también al pasar el ratón y el botón respondería
   tarde. Separándolas, cada gesto lleva su propio tiempo. */
.js .final .wrap > .btn-green {
  transform: none;
  translate: 0 20px;
}

.js .final .wrap.in > .btn-green { translate: 0 0; }

.final .btn-green {
  transition:
    opacity .62s var(--ease) calc(min(var(--i, 0), 6) * 70ms),
    translate .62s var(--ease) calc(min(var(--i, 0), 6) * 70ms),
    transform .3s var(--ease),
    box-shadow .3s var(--ease),
    background .25s var(--ease-soft);
}

.final .btn-green:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 22px 42px -14px rgba(118, 188, 33, .75);
}

.final .btn-green:active {
  transform: translateY(-1px) scale(.99);
}

@media (prefers-reduced-motion: reduce) {
  .js .final .wrap > .btn-green { translate: 0 0; }
}


/* ===========================================================================
   24. FOOTER
   ---------------------------------------------------------------------------
   El <footer> sigue llevando class="on-dark" en el marcado, pero ya no es una
   superficie oscura. Como el HTML no se toca, esa herencia se neutraliza aquí:
   todos los selectores suman el elemento `footer` para ganar por especificidad
   a las reglas genéricas de .on-dark (fondo, logo y aro de foco).

   El pie cierra la página en blanco, un escalón por debajo del verde pálido
   del cierre: la separación la marca el filete superior, no un bloque oscuro.
   =========================================================================== */

footer.on-dark {
  background: var(--blanco);
  color: var(--gris-oscuro);
  padding: 3.5rem 0 2rem;
  border-top: 1px solid var(--gris-humo);
}

/* El aro de foco genérico de .on-dark es blanco: invisible sobre este fondo */
footer.on-dark :focus-visible { outline-color: var(--ink); }

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;
}

.foot nav {
  display: flex;
  gap: 1.3rem;
  flex-wrap: wrap;
}

/* En cuanto el logo y el menú dejan de caber en una línea, `space-between`
   ya no reparte nada: los apila a la izquierda y el pie queda descolgado
   frente a la línea legal, que sí va centrada. Apilados y centrados. */
@media (max-width: 720px) {
  .foot {
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
  }

  .foot nav {
    justify-content: center;
    gap: .9rem 1.3rem;
  }
}

/* --- Enlaces del pie ------------------------------------------------------
   El subrayado se traza desde la izquierda al pasar por encima. Va en un
   pseudo-elemento y no en text-decoration para poder animar su recorrido, y
   sostiene el estado sin depender solo del color. */

.foot nav a {
  position: relative;
  color: var(--verde-petroleo);
  font-size: .88rem;
  font-weight: 500;
  padding-block: .62rem;   /* 44 px de zona pulsable, no 38 */
  transition: color .22s var(--ease-soft);
}

.foot nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .3rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--verde-alinea);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.foot nav a:hover,
.foot nav a:focus-visible { color: var(--verde-alinea); }

.foot nav a:hover::after,
.foot nav a:focus-visible::after { transform: scaleX(1); }

.foot-bottom {
  border-top: 1px solid var(--gris-humo);
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: .8rem;
  color: var(--gris-oscuro);
}


/* ===========================================================================
   25. WhatsApp
   =========================================================================== */

.wa {
  position: fixed;
  right: 1.3rem;
  bottom: 1.3rem;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;           /* marca externa de WhatsApp */
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .6);
  z-index: 90;
  transition: transform .3s var(--ease);
  animation: latido 2.8s infinite;
}

.wa:hover { transform: scale(1.08); }

.wa svg { width: 31px; height: 31px; fill: var(--blanco); }

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}


/* ===========================================================================
   26. PÁGINAS INTERNAS — especialidades.html y servicios.html
   ---------------------------------------------------------------------------
   Todo lo de aquí reutiliza los tokens de la sección 1. No hay ni un color
   escrito a mano: si algo se ve raro, el problema está en :root, no aquí.
   =========================================================================== */

/* --- Submenús de la barra -------------------------------------------------
   Dos comportamientos, uno por dispositivo. En escritorio el panel se abre al
   pasar el ratón Y al recibir el foco de teclado —lo segundo es lo que hace
   que se pueda tabular hasta los enlaces de dentro—. En móvil no hay hover:
   el desplegable lo abre el botón de la flecha, y js/main.js le va cambiando
   aria-expanded. */

.nav li.has-sub { position: relative; }

/* El desplegable se abre a .3rem por debajo del item. Esos 5 px eran un hueco
   MUERTO: al bajar el raton el puntero salia del <li>, li:hover pasaba a ser
   falso y el submenu se cerraba antes de que se pudiera pulsar nada.

   Este ::after es un puente transparente que cubre el corredor. Al formar
   parte del <li>, pasar por encima mantiene li:hover y el panel sigue abierto.
   Va solo en escritorio: en movil el submenu no depende del hover. */
@media (min-width: 961px) {
  .nav li.has-sub::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: .6rem;
  }
}

.nav .sub-toggle {
  display: none;          /* en escritorio manda el hover, no hace falta */
  background: none;
  border: 0;
  padding: .55rem;
  cursor: pointer;
  color: inherit;
  line-height: 0;
}

.nav .sub-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .28s var(--ease);
}

.nav ul .sub {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  min-width: 15rem;
  flex-direction: column;
  gap: .1rem;
  background: var(--blanco);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: .45rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
  z-index: 30;
}

.nav li.has-sub:hover > .sub,
.nav li.has-sub:focus-within > .sub {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav ul .sub a {
  display: block;
  white-space: nowrap;
  padding: .6rem .9rem;
  border-radius: 12px;
}

/* --- Hero corto de página ------------------------------------------------
   No es el hero de la home: aquí no hay foto ni velo. Sobre Verde Pálido, con
   el titular en Verde Petróleo, que es su papel en el manual: color de texto,
   nunca bloque plano. El padding de arriba deja sitio a la barra fija. */

.page-hero {
  background: var(--verde-palido);
  padding-block: clamp(8rem, 14vw, 11rem) clamp(3rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(56% 60% at 8% 6%, rgba(118, 188, 33, .20), transparent 62%),
    radial-gradient(46% 52% at 96% 96%, rgba(18, 63, 59, .07), transparent 68%);
}

.page-hero .wrap { position: relative; z-index: 2; }

.page-hero h1 {
  color: var(--verde-petroleo);
  margin: .5rem 0 .9rem;
  max-width: 18ch;
}

.page-hero > .wrap > p {
  color: var(--gris-oscuro);
  max-width: 54ch;
  font-size: 1.06rem;
}

/* --- Hero de página con foto de fondo -------------------------------------
   Variante opcional: .page-hero.con-foto. Sin esa clase el hero sigue siendo
   Verde Pálido con texto oscuro, que es como están el resto de páginas.

   Con foto hay que invertir la tinta: sobre una fotografía el texto oscuro no
   aguanta el contraste por mucho que se aclare el velo. Se reutiliza el mismo
   tratamiento del hero de la home y del bloque de cierre. */

.page-hero.con-foto {
  background: var(--verde-petroleo);
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* El velo sustituye al halo pálido del hero normal. Más denso que el del hero
   de la home (.93→.84 frente a .92→.68) porque aquí hay texto pequeño —la
   miga de pan y la bajada— y el titular no es el único que tiene que leerse.

   z-index: 1 no es decorativo: sin él el pseudo-elemento pinta ANTES que
   .page-hero-bg, por orden de árbol, y el velo se queda debajo de la foto. */
.page-hero.con-foto::before {
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(18, 63, 59, .93) 0%,
      rgba(18, 63, 59, .90) 38%,
      rgba(18, 63, 59, .86) 72%,
      rgba(18, 63, 59, .84) 100%),
    radial-gradient(70% 60% at 8% 12%, rgba(118, 188, 33, .18), transparent 62%);
}

.page-hero.con-foto h1 { color: var(--blanco); }

.page-hero.con-foto > .wrap > p {
  color: rgba(255, 255, 255, .86);
}

.page-hero.con-foto .crumbs { color: rgba(255, 255, 255, .72); }
.page-hero.con-foto .crumbs a { color: var(--verde-alinea); }
.page-hero.con-foto .crumbs a:hover { color: var(--blanco); }
.page-hero.con-foto .crumbs b { color: var(--blanco); }

/* --- Miga de pan --------------------------------------------------------- */

.crumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.crumbs a { color: var(--verde-oscuro); }
.crumbs a:hover { color: var(--verde-alinea); }
.crumbs b { color: var(--verde-petroleo); font-weight: 700; }
.crumbs span { opacity: .5; }

/* --- Destino de los enlaces con ancla -------------------------------------
   La barra es fija y mide 89 px. El html ya lleva scroll-padding-top: 6rem
   (96 px), que basta para no quedar tapado; este scroll-margin añade un
   respiro para que la sección no aterrice pegada al borde de la barra.

   OJO: los dos se SUMAN. Subir mucho este valor deja el titular a media
   pantalla, que es el error contrario y se nota más. */
.anchor,
.proc.anchor { scroll-margin-top: 3rem; }

/* --- Especialidad: texto + foto ------------------------------------------ */

.esp-split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  /* El texto se centra respecto a la foto, igual que en .fundador. Con start
     quedaba colgando arriba y sobraba hueco bajo el ultimo parrafo. */
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.esp-texto h3 {
  color: var(--verde-petroleo);
  margin-bottom: .5rem;
}

.esp-texto h3 + p { margin-bottom: 1.6rem; }
.esp-texto > *:last-child { margin-bottom: 0; }

/* --- Subtítulo de bloque -------------------------------------------------- */

.sub-tit {
  color: var(--verde-petroleo);
  margin: clamp(2rem, 4vw, 2.8rem) 0 1.1rem;
}

/* --- Píldoras de condiciones ---------------------------------------------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
}

.pills li {
  background: var(--verde-palido);
  color: var(--verde-petroleo);
  border: 1px solid var(--gris-humo);
  border-radius: 999px;
  padding: .6rem 1.15rem;
  font-size: .9rem;
  font-weight: 600;
}

.pills-sm li {
  font-size: .8rem;
  padding: .42rem .9rem;
  background: var(--blanco);
}

/* --- Listas con tick, en rejilla ------------------------------------------
   Mismo patrón visual que .enfoque ul y las credenciales del doctor: el check
   en Verde Oscuro, que es el que cumple contraste sobre fondo claro. */

.ticks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .75rem 1.6rem;
}

.ticks-col { grid-template-columns: 1fr; }

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--gris-oscuro);
  line-height: 1.55;
}

.ticks li svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: .15rem;
  fill: none;
  stroke: var(--verde-oscuro);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Proceso en tres pasos ------------------------------------------------ */

.proceso {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.paso {
  background: var(--blanco);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.paso:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-green);
}

.paso-n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--verde-alinea);
  color: var(--btn-green-text);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .9rem;
}

.paso h4 {
  color: var(--verde-petroleo);
  margin: 0;
  line-height: 1.35;
}

/* --- Procedimientos: una ficha por cirugía o examen ---------------------- */

.procs {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2.2rem);
}

.proc {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
  background: var(--blanco);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-sm);
}

/* Alterna el lado de la foto. Seis fichas iguales en fila se leen como una
   plantilla; alternando, el ojo vuelve a enganchar en cada una.

   Las columnas se invierten JUNTO con el orden. Sin la segunda regla, mover la
   foto a la primera posicion le daba la columna de 1.2fr y el texto se quedaba
   con la estrecha: la foto salia un 50 % mas ancha en las fichas pares. Con
   los marcadores grises no se notaba; con fotos reales, mucho. */
.procs .proc:nth-child(even) .proc-media { order: -1; }
.procs .proc:nth-child(even) { grid-template-columns: .8fr 1.2fr; }

.proc h3 {
  color: var(--verde-petroleo);
  margin-bottom: .6rem;
}

.proc-lead {
  color: var(--gris-oscuro);
  margin-bottom: 1.2rem;
}

.proc h4 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.1rem 0 .6rem;
  font-family: 'Open Sans', sans-serif;
}

.proc .ticks { gap: .55rem 1.4rem; }
.proc .pills { margin-top: 1.1rem; }

/* --- Tarjetas de especialidad de la home --------------------------------- */

.esp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2rem);
}

.esp-card {
  background: var(--blanco);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.esp-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-green);
}

.esp-card-body {
  padding: clamp(1.3rem, 3vw, 1.9rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.esp-card h3 {
  color: var(--verde-petroleo);
  margin-bottom: .6rem;
}

.esp-card p {
  color: var(--gris-oscuro);
  margin-bottom: 1.2rem;
  flex: 1;
}

/* Enlace "Ver más": la flecha avanza al pasar el ratón. Es el mismo gesto que
   la flecha de las tarjetas .mot, para que la web tenga un solo idioma. */
.lnk {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  align-self: flex-start;
  font-weight: 700;
  font-size: .92rem;
  color: var(--verde-oscuro);
  padding: .55rem 0;
}

.lnk svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease);
}

.lnk:hover { color: var(--verde-alinea); }
.lnk:hover svg { transform: translateX(4px); }

/* --- Hueco de foto pendiente ---------------------------------------------
   aspect-ratio en el contenedor, no en el marcador: así el hueco se reserva
   antes de que exista la foto y el layout no pega un salto el día que Diego
   la ponga. El .ph de dentro es el mismo de la sección 1. */

.foto-slot {
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
}

.foto-slot .ph { min-height: 0; }

/* Cuando llega la foto real sustituye al .ph y llena el hueco igual: el
   aspect-ratio ya está en el contenedor, así que el layout no se mueve. */
.foto-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.foto-slot .ph b {
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--verde-oscuro);
  margin-bottom: .35rem;
}

.foto-slot .ph .med {
  margin-top: .4rem;
  font-weight: 700;
  font-size: .74rem;
  color: var(--muted);
  letter-spacing: .06em;
}

.esp-card-media .foto-slot { border-radius: 0; }

/* El reproductor dentro de la tarjeta va a sangre: la tarjeta ya recorta con
   su propio overflow, y una segunda esquina redondeada más una sombra dentro
   de otra sombra se ven como una caja metida en otra caja. */
.esp-card-media .vplayer {
  border-radius: 0;
  box-shadow: none;
}

/* --- Respuesta a pantallas pequeñas -------------------------------------- */

@media (max-width: 860px) {
  .esp-split,
  .proc { grid-template-columns: 1fr; }

  /* La regla que invierte las columnas en las fichas pares tiene MAS
     especificidad que la de arriba (0,3,0 contra 0,1,0), asi que sin esta
     linea las pares seguian a dos columnas en movil y la foto se quedaba en
     125 px. Hay que anularla con el mismo selector. */
  .procs .proc:nth-child(even) { grid-template-columns: 1fr; }

  /* Con una sola columna, alternar el lado deja la foto arriba en la mitad de
     las fichas y rompe la lectura. Todas con la foto debajo del texto. */
  .procs .proc:nth-child(even) .proc-media { order: 0; }

  .proceso { grid-template-columns: 1fr; }
  .esp-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .page-hero { padding-block: 7rem 2.6rem; }
  .crumbs { font-size: .72rem; }
  .ticks { grid-template-columns: 1fr; }
}

/* --- Los submenús en móvil ------------------------------------------------
   Aquí no hay hover que valga: el panel lo abre el botón de la flecha. El
   submenú deja de ser flotante y pasa a empujar la lista hacia abajo, que es
   lo que se espera de un desplegable dentro de un menú. */

@media (max-width: 960px) {
  .nav li.has-sub {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .nav .sub-toggle {
    display: block;
    color: var(--verde-petroleo);
  }

  .nav li.has-sub.abierto .sub-toggle svg { transform: rotate(180deg); }

  .nav ul .sub {
    grid-column: 1 / -1;
    position: static;
    min-width: 0;
    display: block;
    /* Se anima con max-height y no con grid-template-rows: 0fr. Con grid solo
       se declara UNA fila, y el segundo enlace caía en una fila implícita de
       alto automático, así que el submenú "cerrado" seguía enseñando 47 px.
       Con max-height da igual cuántos enlaces tenga. */
    max-height: 0;
    background: var(--gris-fondo);
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    padding: 0 .35rem;
    margin-top: .2rem;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow: hidden;
    transition: max-height .3s var(--ease), padding .3s var(--ease);
  }

  /* El hover de escritorio no debe abrir nada aquí */
  .nav li.has-sub:hover > .sub,
  .nav li.has-sub:focus-within > .sub { max-height: 0; }

  /* 16rem es holgura: los submenús tienen dos enlaces (~94 px). Basta con que
     el tope supere el contenido real sin pasarse mucho, o el final de la
     animación se ve acelerado. */
  .nav li.has-sub.abierto > .sub,
  .nav li.has-sub.abierto:hover > .sub,
  .nav li.has-sub.abierto:focus-within > .sub {
    max-height: 16rem;
    padding: .35rem;
  }
  .nav ul .sub a { padding: .7rem .9rem; font-size: .9rem; }
}


/* ===========================================================================
   27. BLOG — blog.html y articulo.html
   ---------------------------------------------------------------------------
   Sigue sin haber un solo color escrito a mano: todo sale de :root.
   =========================================================================== */

/* --- Ítem activo del menú -------------------------------------------------
   Un filete verde bajo el enlace de la página en la que estás. No se usa
   color para marcarlo: el verde sobre fondo claro no llega a 4.5:1 como texto
   pequeño, así que el indicador es la línea, no la tinta. */

.nav ul > li > a.activo { color: var(--verde-petroleo); font-weight: 700; }

.nav ul > li > a.activo::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--verde-alinea);
  margin-top: .25rem;
}

@media (max-width: 960px) {
  /* En el panel desplegable el filete quedaría suelto bajo un enlace ancho */
  .nav ul > li > a.activo::after { display: none; }
  .nav ul > li > a.activo { background: var(--verde-palido); border-radius: 12px; }
}

/* --- Píldora de categoría ------------------------------------------------- */

.cat {
  display: inline-block;
  background: var(--verde-alinea);
  color: var(--btn-green-text);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
}

/* --- Post destacado -------------------------------------------------------
   Horizontal en escritorio: la portada 1200 × 630 pide anchura, y apilada
   ocuparía media pantalla antes de llegar al titular. */

.post-dest {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  background: var(--blanco);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.post-dest:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-green);
}

.post-dest-media .foto-slot { border-radius: 0; }

.post-dest-body {
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem)
           clamp(1.4rem, 3vw, 2.2rem) 0;
}

.post-dest h3 {
  margin: .7rem 0 .8rem;
  line-height: 1.22;
}

.post-dest h3 a { color: var(--verde-petroleo); }
.post-dest h3 a:hover { color: var(--verde-oscuro); }
.post-dest p { color: var(--gris-oscuro); margin-bottom: 1rem; }

/* --- Rejilla de artículos ------------------------------------------------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.5vw, 1.8rem);
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-green);
}

.post-card-media .foto-slot { border-radius: 0; }

.post-card-body {
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* La píldora es inline-block, pero dentro de un flex en columna los hijos se
   estiran en el eje cruzado y salía a todo el ancho de la tarjeta. */
.post-card-body .cat { align-self: flex-start; }

.post-card h3 {
  font-size: 1.22rem;
  line-height: 1.28;
  margin: .7rem 0 .6rem;
}

.post-card h3 a { color: var(--verde-petroleo); }
.post-card h3 a:hover { color: var(--verde-oscuro); }

/* Dos líneas y corta. Sin esto, un extracto largo estira su tarjeta y
   descuadra la fila entera. */
.post-card p {
  color: var(--gris-oscuro);
  font-size: .92rem;
  margin-bottom: 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  color: var(--muted);
  margin-top: auto;
}

.post-meta span[aria-hidden],
.post-meta > span:not(:last-child) { opacity: .6; }

/* --- Filtros de categoría ------------------------------------------------- */

.cat-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.cat-btn {
  cursor: pointer;
  border: 1px solid var(--gris-humo);
  background: var(--blanco);
  color: var(--verde-petroleo);
  text-transform: none;
  letter-spacing: .01em;
  font-size: .84rem;
  padding: .55rem 1.05rem;
  transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft);
}

.cat-btn:hover { background: var(--verde-palido); border-color: var(--verde-alinea); }

.cat-btn.activa {
  background: var(--verde-alinea);
  border-color: var(--verde-alinea);
  color: var(--btn-green-text);
}

/* --- Aviso del filtro y estado vacío --------------------------------------
   El aviso es un live region: cuenta cuántos artículos quedan tras filtrar.
   Se ve poco a propósito —quien mira la pantalla ya percibe el cambio— pero
   tiene que existir para quien navega con lector. */

.filtro-aviso {
  font-size: .82rem;
  color: var(--muted);
  margin: -1rem 0 1.4rem;
}

.filtro-vacio {
  background: var(--blanco);
  border: 1px dashed var(--gris-claro);
  border-radius: var(--r-md);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--gris-oscuro);
  margin-bottom: 1rem;
}

/* --- Paginación ----------------------------------------------------------- */

.paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.pag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 1rem;
  justify-content: center;
  border: 1px solid var(--gris-humo);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--verde-petroleo);
  font-weight: 600;
  font-size: .9rem;
  /* Son <button>: sin esto heredarían la tipografía del sistema */
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft);
}

.pag:hover:not(:disabled):not(.activa) {
  background: var(--verde-palido);
  border-color: var(--verde-alinea);
}

/* "Siguiente" en la última página: se queda, pero apagado. Quitarlo movería
   los números de sitio en cada cambio de página. */
.pag:disabled {
  opacity: .4;
  cursor: default;
}

.pag.activa {
  background: var(--verde-alinea);
  border-color: var(--verde-alinea);
  color: var(--btn-green-text);
}

.pag svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Artículo ------------------------------------------------------------- */

.art-hero .cat { margin-bottom: .9rem; }
.art-hero h1 { max-width: 22ch; }

.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  color: var(--gris-oscuro);
  font-size: .92rem;
  margin-top: 1rem;
}

.art-meta b { color: var(--verde-petroleo); }
.art-meta span[aria-hidden] { opacity: .5; }

.art-portada {
  max-width: 900px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

/* 68 caracteres por línea es el ancho que se lee sin esfuerzo. Más largo y el
   ojo pierde el comienzo de la línea siguiente. */
.art-cuerpo {
  max-width: 700px;
  margin: 0 auto;
}

.art-cuerpo > p {
  color: var(--gris-oscuro);
  margin-bottom: 1.25rem;
  line-height: 1.75;
}

.art-lead {
  font-size: 1.14rem;
  color: var(--verde-petroleo) !important;
  line-height: 1.6 !important;
}

.art-cuerpo h2 {
  color: var(--verde-petroleo);
  margin: clamp(2.2rem, 4vw, 3rem) 0 .9rem;
}

.art-cuerpo h3 {
  color: var(--verde-petroleo);
  margin: clamp(1.8rem, 3vw, 2.4rem) 0 .7rem;
}

.art-cuerpo .ticks { margin-bottom: 1.6rem; }

.art-cuerpo blockquote {
  border-left: 4px solid var(--verde-alinea);
  background: var(--verde-palido);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.3rem 1.5rem;
  margin: clamp(1.8rem, 3vw, 2.4rem) 0;
}

.art-cuerpo blockquote p {
  margin: 0;
  color: var(--verde-petroleo);
  font-family: 'Tenor Sans', serif;
  font-size: 1.2rem;
  line-height: 1.5;
}

.art-figura { margin: clamp(1.8rem, 3vw, 2.4rem) 0; }

.art-figura .pie {
  margin-top: .6rem;
  font-size: .84rem;
  color: var(--muted);
  text-align: center;
}

/* --- Compartir ------------------------------------------------------------ */

.art-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: clamp(2rem, 4vw, 2.8rem) 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.art-share-tit {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: .3rem;
}

.share {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--gris-humo);
  background: var(--blanco);
  color: var(--verde-petroleo);
  font-family: 'Open Sans', sans-serif;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft);
}

.share:hover { background: var(--verde-palido); border-color: var(--verde-alinea); }

.share svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Caja de autor -------------------------------------------------------- */

.art-autor {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.2rem;
  align-items: start;
  background: var(--gris-fondo);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}

.art-autor-foto .foto-slot {
  width: 96px;
  border-radius: 50%;
}

/* En 96 px no cabe la etiqueta completa: se queda solo el rotulo. La medida
   la lleva el CSS, no hace falta escribirla dentro de un circulo diminuto. */
.art-autor-foto .ph { padding: .4rem; }
.art-autor-foto .ph span { display: none; }
.art-autor-foto .ph b { font-size: .58rem; letter-spacing: .1em; margin: 0; }

.art-autor b {
  display: block;
  color: var(--verde-petroleo);
  font-family: 'Tenor Sans', serif;
  font-size: 1.15rem;
}

.art-autor > div > span {
  display: block;
  color: var(--verde-oscuro);
  font-size: .82rem;
  font-weight: 600;
  margin: .2rem 0 .6rem;
}

.art-autor p {
  margin: 0;
  color: var(--gris-oscuro);
  font-size: .92rem;
}

/* --- Respuesta a pantallas pequeñas -------------------------------------- */

@media (max-width: 1024px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .post-dest { grid-template-columns: 1fr; }
  .post-dest-body { padding: 0 1.4rem 1.6rem; }
}

@media (max-width: 620px) {
  .post-grid { grid-template-columns: 1fr; }

  .art-autor {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .art-cuerpo blockquote p { font-size: 1.08rem; }
}


/* ===========================================================================
   28. NOSOTROS — nosotros.html
   =========================================================================== */

/* --- El fundador ----------------------------------------------------------
   Retrato vertical a un lado y texto al otro. La foto va primero en el
   marcado: en móvil, cuando la rejilla se apila, encabeza el bloque, que es
   lo que pide un homenaje. */

.fundador {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  /* El texto se centra respecto al retrato. Con align-items:start quedaba
     colgando de la parte alta y sobraba un hueco bajo la última línea. */
  align-items: center;
}

.fundador-foto { max-width: 420px; }

.fundador-texto p {
  color: var(--gris-oscuro);
  margin-bottom: 1.15rem;
  line-height: 1.75;
}

.fundador-texto p:last-child { margin-bottom: 0; }
.fundador-texto b { color: var(--verde-petroleo); font-weight: 600; }

/* Entradilla: el primer párrafo pesa más porque presenta al fundador */
.fundador-texto p:first-child {
  font-size: 1.1rem;
  color: var(--verde-petroleo);
}

/* --- El legado ------------------------------------------------------------
   Un solo párrafo centrado, con aire. Sin tarjetas ni cajas: es una nota de
   transición entre la historia y el equipo actual, no una sección con peso
   propio. */

.legado {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}

.legado-lead {
  font-family: 'Tenor Sans', serif;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  color: var(--verde-petroleo);
  margin: 1rem 0 1.2rem;
}

.legado-lead b { font-weight: 400; border-bottom: 2px solid var(--verde-alinea); }

.legado-nota {
  color: var(--muted);
  font-size: .92rem;
}

/* --- Filosofía ------------------------------------------------------------ */

.valores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.5vw, 1.8rem);
}

.valor {
  background: var(--blanco);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.valor:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-green);
}

/* El filete verde sobre el título hace de viñeta sin usar un icono que
   habría que inventar para cada valor. */
.valor h3 {
  color: var(--verde-petroleo);
  font-size: 1.3rem;
  margin-bottom: .7rem;
  padding-top: .9rem;
  position: relative;
}

.valor h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--verde-alinea);
}

.valor p { color: var(--gris-oscuro); margin: 0; }

/* --- El bloque del doctor, reutilizado -----------------------------------
   Se extrae de index.html en tiempo de generación (ver .build/partes.py), así
   que hereda su CSS sin una sola regla nueva. Lo único que cambia es que aquí
   no lleva la franja de cifras encima, y sin ella el panel quedaba pegado al
   borde superior de la sección. */

#dr-claudio { padding-top: clamp(3.4rem, 7vw, 6rem); }

/* --- Respuesta a pantallas pequeñas -------------------------------------- */

@media (max-width: 860px) {
  .fundador { grid-template-columns: 1fr; }

  /* Centrada y con tope: a todo el ancho un retrato vertical de 600 × 750
     ocuparía casi dos pantallas de alto antes de llegar al texto. */
  .fundador-foto {
    max-width: 340px;
    margin: 0 auto;
  }

  .valores { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .legado-lead { font-size: 1.16rem; }
}