/* RehabilitArte — overrides + utilities propias.
   Tailwind via CDN cubre la mayoría. Aquí lo que la CDN no resuelve: tipografía display, components reutilizables,
   animaciones custom y micro-interacciones. */

:root {
  --brand-bg: #ccd6d7;
  --brand-fg: #3a464f;
  --brand-accent-1: #a0a0a0;
  --brand-accent-2: #7e8285;
  --brand-accent-3: #5c646a;
  --pastel-cream: #f7f3ec;
  --pastel-mist: #e2ebec;
  --pastel-blush: #f5e6e0;
  --pastel-sand: #efe7dd;
  --pastel-sage: #dbe5dc;
  --pastel-lilac: #e4dfee;

  /* Hero — TODO tuneable por breakpoint via dev-tuner.
     4 breakpoints:
       mobile      < 640px
       tablet-sm   640-767px
       tablet-lg   768-1023px
       desktop     ≥ 1024px (calibrado por David, locked en el panel)
     Defaults intencionalmente distintos entre bps para visualizar el salto al cambiar viewport.
  */

  /* Valores definitivos tuneados por David con el dev-tuner. Desktop calibrado a mano. */

  /* Logo X (margin-left del fixed logo) */
  --logo-x-mobile:    38px;
  --logo-x-tablet-sm: 49px;
  --logo-x-tablet-lg: 70px;
  --logo-x-desktop:   4rem;

  /* Logo Y (top del fixed logo) — antes era top-3 md:top-4 lg:top-5 (12/16/20px). */
  --logo-y-mobile:    39px;
  --logo-y-tablet-sm: 12px;
  --logo-y-tablet-lg: 16px;
  --logo-y-desktop:   20px;

  /* Tamaño del logo (height del <img> dentro de #page-logo) */
  --logo-size-mobile:    98px;
  --logo-size-tablet-sm: 95px;
  --logo-size-tablet-lg: 96px;
  --logo-size-desktop:   96px;

  /* Eyebrow X (margin-left del wrap del estetoscopio). */
  --eyebrow-x-mobile:    3px;
  --eyebrow-x-tablet-sm: 315px;
  --eyebrow-x-tablet-lg: 299px;
  --eyebrow-x-desktop:   160px;

  /* Eyebrow Y (transform translateY del wrap del estetoscopio). */
  --eyebrow-y-mobile:    102px;
  --eyebrow-y-tablet-sm: 0px;
  --eyebrow-y-tablet-lg: 0px;
  --eyebrow-y-desktop:   0px;

  /* Push-down desde el H1 — empuja H1 + (imagen + lead + CTAs + italic) hacia abajo.
     Se aplica como margin-top al H1. El eyebrow se queda arriba sin moverse. */
  --hero-pushdown-mobile:    94px;
  --hero-pushdown-tablet-sm: 0px;
  --hero-pushdown-tablet-lg: 0px;
  --hero-pushdown-desktop:   0px;

  /* Imagen interior — translate + scale del .hero-img-wrap (dentro del frame).
     X/Y en %, scale numérico. */
  --hero-img-x-mobile:    0%;
  --hero-img-x-tablet-sm: 0%;
  --hero-img-x-tablet-lg: 1%;
  --hero-img-x-desktop:   2%;
  --hero-img-y-mobile:    0%;
  --hero-img-y-tablet-sm: 0%;
  --hero-img-y-tablet-lg: -2%;
  --hero-img-y-desktop:   -3%;
  --hero-img-scale-mobile:    1.05;
  --hero-img-scale-tablet-sm: 1.10;
  --hero-img-scale-tablet-lg: 1.14;
  --hero-img-scale-desktop:   1.18;

  /* Frame de la imagen — translate del wrapper exterior (mueve el card entero). */
  --hero-frame-x-mobile:    0px;
  --hero-frame-x-tablet-sm: 0px;
  --hero-frame-x-tablet-lg: 1px;
  --hero-frame-x-desktop:   0px;
  --hero-frame-y-mobile:    0px;
  --hero-frame-y-tablet-sm: 0px;
  --hero-frame-y-tablet-lg: 0px;
  --hero-frame-y-desktop:   0px;

  /* Quote card flotante "Una segunda etapa..." — offset absolute desde el frame. */
  --hero-quote-x-mobile:    -8px;
  --hero-quote-x-tablet-sm: -8px;
  --hero-quote-x-tablet-lg: -21px;
  --hero-quote-x-desktop:   -24px;
  --hero-quote-y-mobile:    -24px;
  --hero-quote-y-tablet-sm: -24px;
  --hero-quote-y-tablet-lg: -24px;
  --hero-quote-y-desktop:   -24px;

  /* Bloque B (lead + CTAs + italic) — translate del wrapper de la parte inferior del hero. */
  --hero-textb-x-mobile:    0px;
  --hero-textb-x-tablet-sm: 0px;
  --hero-textb-x-tablet-lg: 0px;
  --hero-textb-x-desktop:   0px;
  --hero-textb-y-mobile:    23px;
  --hero-textb-y-tablet-sm: 0px;
  --hero-textb-y-tablet-lg: 43px;
  --hero-textb-y-desktop:   0px;

  /* Velocidad de desvanecimiento del logo por scroll — distancia en px en la que
     el logo pasa de opacity 1 → 0. Más chico = se desvanece más rápido. main.js lee
     --logo-fade-current; el valor de current se elige por @media abajo. */
  --logo-fade-mobile:    20px;
  --logo-fade-tablet-sm: 300px;
  --logo-fade-tablet-lg: 20px;
  --logo-fade-desktop:   600px;
  --logo-fade-current:   var(--logo-fade-mobile);

  /* Especialidades — zoom de imágenes (global × individual) por bp.
     Valores originales que David tuneó VISUALMENTE por posición de card en el grid.
     Como las posiciones #1..#7 visualmente siguen viéndose en mismo orden, los valores se aplican igual. */
  --esp-zoom-global-mobile: 1.76; --esp-zoom-global-tablet-sm: 1.73; --esp-zoom-global-tablet-lg: 1.49; --esp-zoom-global-desktop: 2.03;
  --esp-zoom-1-mobile: 1.08;  --esp-zoom-1-tablet-sm: 1;    --esp-zoom-1-tablet-lg: 1;    --esp-zoom-1-desktop: 0.86;
  --esp-zoom-2-mobile: 1.09;  --esp-zoom-2-tablet-sm: 1;    --esp-zoom-2-tablet-lg: 1.18; --esp-zoom-2-desktop: 0.89;
  --esp-zoom-3-mobile: 0.79;  --esp-zoom-3-tablet-sm: 1;    --esp-zoom-3-tablet-lg: 1;    --esp-zoom-3-desktop: 0.72;
  --esp-zoom-4-mobile: 1;     --esp-zoom-4-tablet-sm: 1;    --esp-zoom-4-tablet-lg: 1;    --esp-zoom-4-desktop: 0.78;
  --esp-zoom-5-mobile: 0.83;  --esp-zoom-5-tablet-sm: 0.81; --esp-zoom-5-tablet-lg: 0.92; --esp-zoom-5-desktop: 0.69;
  --esp-zoom-6-mobile: 0.88;  --esp-zoom-6-tablet-sm: 1;    --esp-zoom-6-tablet-lg: 1;    --esp-zoom-6-desktop: 0.73;
  --esp-zoom-7-mobile: 1.07;  --esp-zoom-7-tablet-sm: 1;    --esp-zoom-7-tablet-lg: 1.17; --esp-zoom-7-desktop: 0.88;
  --esp-zoom-8-mobile: 1.29;  --esp-zoom-8-tablet-sm: 1.32; --esp-zoom-8-tablet-lg: 1.48; --esp-zoom-8-desktop: 1.13;
  --esp-zoom-9-mobile: 0.92;  --esp-zoom-9-tablet-sm: 1;    --esp-zoom-9-tablet-lg: 1.17; --esp-zoom-9-desktop: 0.86;
  --esp-zoom-10-mobile: 1.21; --esp-zoom-10-tablet-sm: 1;   --esp-zoom-10-tablet-lg: 1.29; --esp-zoom-10-desktop: 1;

  /* Especialidades — posición X / Y de cada imagen (individual, en px). Defaults 0. */
  --esp-pos-x-1-mobile: 0px;  --esp-pos-x-1-tablet-sm: 0px;  --esp-pos-x-1-tablet-lg: 0px;  --esp-pos-x-1-desktop: 0px;
  --esp-pos-x-2-mobile: 0px;  --esp-pos-x-2-tablet-sm: 0px;  --esp-pos-x-2-tablet-lg: 0px;  --esp-pos-x-2-desktop: 0px;
  --esp-pos-x-3-mobile: 0px;  --esp-pos-x-3-tablet-sm: 0px;  --esp-pos-x-3-tablet-lg: 0px;  --esp-pos-x-3-desktop: 0px;
  --esp-pos-x-4-mobile: 0px;  --esp-pos-x-4-tablet-sm: 0px;  --esp-pos-x-4-tablet-lg: 0px;  --esp-pos-x-4-desktop: 0px;
  --esp-pos-x-5-mobile: 0px;  --esp-pos-x-5-tablet-sm: 0px;  --esp-pos-x-5-tablet-lg: 0px;  --esp-pos-x-5-desktop: 0px;
  --esp-pos-x-6-mobile: 0px;  --esp-pos-x-6-tablet-sm: 0px;  --esp-pos-x-6-tablet-lg: 0px;  --esp-pos-x-6-desktop: 0px;
  --esp-pos-x-7-mobile: 0px;  --esp-pos-x-7-tablet-sm: 0px;  --esp-pos-x-7-tablet-lg: 0px;  --esp-pos-x-7-desktop: 0px;
  --esp-pos-x-8-mobile: 0px;  --esp-pos-x-8-tablet-sm: 0px;  --esp-pos-x-8-tablet-lg: 0px;  --esp-pos-x-8-desktop: 0px;
  --esp-pos-x-9-mobile: 0px;  --esp-pos-x-9-tablet-sm: 0px;  --esp-pos-x-9-tablet-lg: 0px;  --esp-pos-x-9-desktop: 0px;
  --esp-pos-x-10-mobile: 0px; --esp-pos-x-10-tablet-sm: 0px; --esp-pos-x-10-tablet-lg: 0px; --esp-pos-x-10-desktop: 0px;
  /* Pos-Y: valores originales que David tuneó (sin remap). */
  --esp-pos-y-1-mobile: 11px; --esp-pos-y-1-tablet-sm: 0px;  --esp-pos-y-1-tablet-lg: 0px;  --esp-pos-y-1-desktop: 0px;
  --esp-pos-y-2-mobile: 11px; --esp-pos-y-2-tablet-sm: 0px;  --esp-pos-y-2-tablet-lg: 0px;  --esp-pos-y-2-desktop: 0px;
  --esp-pos-y-3-mobile: 4px;  --esp-pos-y-3-tablet-sm: 0px;  --esp-pos-y-3-tablet-lg: 0px;  --esp-pos-y-3-desktop: 0px;
  --esp-pos-y-4-mobile: 0px;  --esp-pos-y-4-tablet-sm: 0px;  --esp-pos-y-4-tablet-lg: 0px;  --esp-pos-y-4-desktop: 2px;
  --esp-pos-y-5-mobile: 0px;  --esp-pos-y-5-tablet-sm: 0px;  --esp-pos-y-5-tablet-lg: 0px;  --esp-pos-y-5-desktop: 3px;
  --esp-pos-y-6-mobile: 0px;  --esp-pos-y-6-tablet-sm: 0px;  --esp-pos-y-6-tablet-lg: 11px; --esp-pos-y-6-desktop: 2px;
  --esp-pos-y-7-mobile: 11px; --esp-pos-y-7-tablet-sm: 0px;  --esp-pos-y-7-tablet-lg: 10px; --esp-pos-y-7-desktop: 10px;
  --esp-pos-y-8-mobile: 2px;  --esp-pos-y-8-tablet-sm: 0px;  --esp-pos-y-8-tablet-lg: 1px;  --esp-pos-y-8-desktop: 0px;
  --esp-pos-y-9-mobile: 0px;  --esp-pos-y-9-tablet-sm: 0px;  --esp-pos-y-9-tablet-lg: 0px;  --esp-pos-y-9-desktop: 2px;
  --esp-pos-y-10-mobile: 0px; --esp-pos-y-10-tablet-sm: 0px; --esp-pos-y-10-tablet-lg: 4px;  --esp-pos-y-10-desktop: 0px;

  /* Especialidades — popup "Ver más": blur + saturate + brightness + contrast + opacidad bg + opacidad border.
     Defaults reflejan los valores actuales del card-soft. Globales (afectan a TODOS los popups). */
  --esp-popup-blur-mobile:         20;   --esp-popup-blur-tablet-sm:         20;   --esp-popup-blur-tablet-lg:         20;   --esp-popup-blur-desktop:         9;
  --esp-popup-saturate-mobile:     180;  --esp-popup-saturate-tablet-sm:     180;  --esp-popup-saturate-tablet-lg:     180;  --esp-popup-saturate-desktop:     145;
  --esp-popup-brightness-mobile:   105;  --esp-popup-brightness-tablet-sm:   105;  --esp-popup-brightness-tablet-lg:   105;  --esp-popup-brightness-desktop:   96;
  --esp-popup-contrast-mobile:     100;  --esp-popup-contrast-tablet-sm:     100;  --esp-popup-contrast-tablet-lg:     100;  --esp-popup-contrast-desktop:     102;
  --esp-popup-bg-alpha-mobile:     0.40; --esp-popup-bg-alpha-tablet-sm:     0.40; --esp-popup-bg-alpha-tablet-lg:     0.40; --esp-popup-bg-alpha-desktop:     0;
  --esp-popup-border-alpha-mobile: 0.75; --esp-popup-border-alpha-tablet-sm: 0.75; --esp-popup-border-alpha-tablet-lg: 0.75; --esp-popup-border-alpha-desktop: 0;

  /* index.html — Espaciado entre secciones (1→2 … 8→9). Set completo tuneado por David. */
  --hero-pb-mobile:    56px;  --hero-pb-tablet-sm:    38px;  --hero-pb-tablet-lg:    80px;  --hero-pb-desktop:    0px;
  --gap-hero-qs-mobile: 30px; --gap-hero-qs-tablet-sm: 30px; --gap-hero-qs-tablet-lg: 32px; --gap-hero-qs-desktop: 40px;
  --qs-pt-mobile:      48px;  --qs-pt-tablet-sm:      48px;  --qs-pt-tablet-lg:      36px;  --qs-pt-desktop:      68px;

  --qs-pb-mobile:      46px;  --qs-pb-tablet-sm:      46px;  --qs-pb-tablet-lg:      50px;  --qs-pb-desktop:      48px;
  --gap-qs-esp-mobile: 30px;  --gap-qs-esp-tablet-sm: 30px;  --gap-qs-esp-tablet-lg: 34px;  --gap-qs-esp-desktop: 38px;
  --esp-pt-mobile:     40px;  --esp-pt-tablet-sm:     46px;  --esp-pt-tablet-lg:     50px;  --esp-pt-desktop:     52px;

  --esp-pb-mobile:     48px;  --esp-pb-tablet-sm:     46px;  --esp-pb-tablet-lg:     72px;  --esp-pb-desktop:     72px;
  --gap-esp-dr-mobile: 32px;  --gap-esp-dr-tablet-sm: 30px;  --gap-esp-dr-tablet-lg: 34px;  --gap-esp-dr-desktop: 38px;
  --dr-pt-mobile:      52px;  --dr-pt-tablet-sm:      50px;  --dr-pt-tablet-lg:      52px;  --dr-pt-desktop:      54px;

  --dr-pb-mobile:      44px;  --dr-pb-tablet-sm:      42px;  --dr-pb-tablet-lg:      52px;  --dr-pb-desktop:      58px;
  --gap-dr-equipo-mobile: 30px; --gap-dr-equipo-tablet-sm: 30px; --gap-dr-equipo-tablet-lg: 34px; --gap-dr-equipo-desktop: 36px;
  --equipo-pt-mobile:  38px;  --equipo-pt-tablet-sm:  52px;  --equipo-pt-tablet-lg:  54px;  --equipo-pt-desktop:  64px;

  --equipo-pb-mobile:  50px;  --equipo-pb-tablet-sm:  48px;  --equipo-pb-tablet-lg:  46px;  --equipo-pb-desktop:  58px;
  --gap-equipo-casos-mobile: 30px; --gap-equipo-casos-tablet-sm: 30px; --gap-equipo-casos-tablet-lg: 34px; --gap-equipo-casos-desktop: 40px;
  --casos-pt-mobile:   48px;  --casos-pt-tablet-sm:   40px;  --casos-pt-tablet-lg:   52px;  --casos-pt-desktop:   64px;

  --casos-pb-mobile:   44px;  --casos-pb-tablet-sm:   40px;  --casos-pb-tablet-lg:   50px;  --casos-pb-desktop:   48px;
  --gap-casos-prensa-mobile: 30px; --gap-casos-prensa-tablet-sm: 30px; --gap-casos-prensa-tablet-lg: 32px; --gap-casos-prensa-desktop: 38px;
  --prensa-pt-mobile:  42px;  --prensa-pt-tablet-sm:  44px;  --prensa-pt-tablet-lg:  46px;  --prensa-pt-desktop:  64px;

  --prensa-pb-mobile:  46px;  --prensa-pb-tablet-sm:  38px;  --prensa-pb-tablet-lg:  54px;  --prensa-pb-desktop:  64px;
  --gap-prensa-contacto-mobile: 30px; --gap-prensa-contacto-tablet-sm: 30px; --gap-prensa-contacto-tablet-lg: 32px; --gap-prensa-contacto-desktop: 36px;
  --contacto-pt-mobile: 12px; --contacto-pt-tablet-sm: 50px; --contacto-pt-tablet-lg: 48px; --contacto-pt-desktop: 72px;

  --contacto-pb-mobile: 34px; --contacto-pb-tablet-sm: 30px; --contacto-pb-tablet-lg: 44px; --contacto-pb-desktop: 124px;
  --gap-contacto-cierre-mobile: 30px; --gap-contacto-cierre-tablet-sm: 30px; --gap-contacto-cierre-tablet-lg: 36px; --gap-contacto-cierre-desktop: -66px;
  --cierre-pt-mobile:  40px;  --cierre-pt-tablet-sm:  36px;  --cierre-pt-tablet-lg:  48px;  --cierre-pt-desktop:  76px;

  /* Brillo (luminosidad HSL) del fondo del body. Tono cálido fijo (38°, 35%), L variable. */
  --body-bg-l-mobile:    94.5;
  --body-bg-l-tablet-sm: 94.5;
  --body-bg-l-tablet-lg: 94.5;
  --body-bg-l-desktop:   94.5;

  /* Tamaño del logo del footer (height en px) por bp. */
  --footer-logo-size-mobile:    72px;
  --footer-logo-size-tablet-sm: 87px;
  --footer-logo-size-tablet-lg: 81px;
  --footer-logo-size-desktop:   90px;

  /* Footer — paddings internos que controlan la distancia entre la primera parte (logo+nav+contacto)
     y la segunda parte (copyright + tagline). */
  --footer-top-pb-mobile:    64px;
  --footer-top-pb-tablet-sm: 64px;
  --footer-top-pb-tablet-lg: 80px;
  --footer-top-pb-desktop:   24px;

  --footer-bot-pt-mobile:    24px;
  --footer-bot-pt-tablet-sm: 24px;
  --footer-bot-pt-tablet-lg: 24px;
  --footer-bot-pt-desktop:   28px;

  /* Padding inferior del Cierre + Padding superior del Footer (la "distancia" entre ambos). */
  --cierre-pb-mobile:    58px;
  --cierre-pb-tablet-sm: 58px;
  --cierre-pb-tablet-lg: 58px;
  --cierre-pb-desktop:   58px;

  --footer-pt-mobile:    50px;
  --footer-pt-tablet-sm: 52px;
  --footer-pt-tablet-lg: 42px;
  --footer-pt-desktop:   54px;

  /* proposito.html — Padding superior del <main> (distancia entre el logo fijo y el eyebrow "Propósito · Misión · Visión"). */
  --proposito-main-pt-mobile:    120px;
  --proposito-main-pt-tablet-sm: 120px;
  --proposito-main-pt-tablet-lg: 125px;
  --proposito-main-pt-desktop:   130px;
}

/* Aplicación: index.html — hero padding-bottom + quienes-somos pt/pb/margin-top + especialidades pt/margin-top. */
#inicio { padding-bottom: var(--hero-pb-mobile); }
@media (min-width: 640px)  { #inicio { padding-bottom: var(--hero-pb-tablet-sm); } }
@media (min-width: 768px)  { #inicio { padding-bottom: var(--hero-pb-tablet-lg); } }
@media (min-width: 1024px) { #inicio { padding-bottom: var(--hero-pb-desktop); } }

#quienes-somos {
  margin-top:     var(--gap-hero-qs-mobile);
  padding-top:    var(--qs-pt-mobile);
  padding-bottom: var(--qs-pb-mobile);
}
@media (min-width: 640px)  { #quienes-somos { margin-top: var(--gap-hero-qs-tablet-sm); padding-top: var(--qs-pt-tablet-sm); padding-bottom: var(--qs-pb-tablet-sm); } }
@media (min-width: 768px)  { #quienes-somos { margin-top: var(--gap-hero-qs-tablet-lg); padding-top: var(--qs-pt-tablet-lg); padding-bottom: var(--qs-pb-tablet-lg); } }
@media (min-width: 1024px) { #quienes-somos { margin-top: var(--gap-hero-qs-desktop);   padding-top: var(--qs-pt-desktop);   padding-bottom: var(--qs-pb-desktop); } }

#especialidades { margin-top: var(--gap-qs-esp-mobile); padding-top: var(--esp-pt-mobile); padding-bottom: var(--esp-pb-mobile); }
@media (min-width: 640px)  { #especialidades { margin-top: var(--gap-qs-esp-tablet-sm); padding-top: var(--esp-pt-tablet-sm); padding-bottom: var(--esp-pb-tablet-sm); } }
@media (min-width: 768px)  { #especialidades { margin-top: var(--gap-qs-esp-tablet-lg); padding-top: var(--esp-pt-tablet-lg); padding-bottom: var(--esp-pb-tablet-lg); } }
@media (min-width: 1024px) { #especialidades { margin-top: var(--gap-qs-esp-desktop); padding-top: var(--esp-pt-desktop); padding-bottom: var(--esp-pb-desktop); } }

#doctores { margin-top: var(--gap-esp-dr-mobile); padding-top: var(--dr-pt-mobile); padding-bottom: var(--dr-pb-mobile); }
@media (min-width: 640px)  { #doctores { margin-top: var(--gap-esp-dr-tablet-sm); padding-top: var(--dr-pt-tablet-sm); padding-bottom: var(--dr-pb-tablet-sm); } }
@media (min-width: 768px)  { #doctores { margin-top: var(--gap-esp-dr-tablet-lg); padding-top: var(--dr-pt-tablet-lg); padding-bottom: var(--dr-pb-tablet-lg); } }
@media (min-width: 1024px) { #doctores { margin-top: var(--gap-esp-dr-desktop); padding-top: var(--dr-pt-desktop); padding-bottom: var(--dr-pb-desktop); } }

#equipo { margin-top: var(--gap-dr-equipo-mobile); padding-top: var(--equipo-pt-mobile); padding-bottom: var(--equipo-pb-mobile); }
@media (min-width: 640px)  { #equipo { margin-top: var(--gap-dr-equipo-tablet-sm); padding-top: var(--equipo-pt-tablet-sm); padding-bottom: var(--equipo-pb-tablet-sm); } }
@media (min-width: 768px)  { #equipo { margin-top: var(--gap-dr-equipo-tablet-lg); padding-top: var(--equipo-pt-tablet-lg); padding-bottom: var(--equipo-pb-tablet-lg); } }
@media (min-width: 1024px) { #equipo { margin-top: var(--gap-dr-equipo-desktop); padding-top: var(--equipo-pt-desktop); padding-bottom: var(--equipo-pb-desktop); } }

#casos { margin-top: var(--gap-equipo-casos-mobile); padding-top: var(--casos-pt-mobile); padding-bottom: var(--casos-pb-mobile); }
@media (min-width: 640px)  { #casos { margin-top: var(--gap-equipo-casos-tablet-sm); padding-top: var(--casos-pt-tablet-sm); padding-bottom: var(--casos-pb-tablet-sm); } }
@media (min-width: 768px)  { #casos { margin-top: var(--gap-equipo-casos-tablet-lg); padding-top: var(--casos-pt-tablet-lg); padding-bottom: var(--casos-pb-tablet-lg); } }
@media (min-width: 1024px) { #casos { margin-top: var(--gap-equipo-casos-desktop); padding-top: var(--casos-pt-desktop); padding-bottom: var(--casos-pb-desktop); } }

#prensa { margin-top: var(--gap-casos-prensa-mobile); padding-top: var(--prensa-pt-mobile); padding-bottom: var(--prensa-pb-mobile); }
@media (min-width: 640px)  { #prensa { margin-top: var(--gap-casos-prensa-tablet-sm); padding-top: var(--prensa-pt-tablet-sm); padding-bottom: var(--prensa-pb-tablet-sm); } }
@media (min-width: 768px)  { #prensa { margin-top: var(--gap-casos-prensa-tablet-lg); padding-top: var(--prensa-pt-tablet-lg); padding-bottom: var(--prensa-pb-tablet-lg); } }
@media (min-width: 1024px) { #prensa { margin-top: var(--gap-casos-prensa-desktop); padding-top: var(--prensa-pt-desktop); padding-bottom: var(--prensa-pb-desktop); } }

#contacto { margin-top: var(--gap-prensa-contacto-mobile); padding-top: var(--contacto-pt-mobile); padding-bottom: var(--contacto-pb-mobile); }
@media (min-width: 640px)  { #contacto { margin-top: var(--gap-prensa-contacto-tablet-sm); padding-top: var(--contacto-pt-tablet-sm); padding-bottom: var(--contacto-pb-tablet-sm); } }
@media (min-width: 768px)  { #contacto { margin-top: var(--gap-prensa-contacto-tablet-lg); padding-top: var(--contacto-pt-tablet-lg); padding-bottom: var(--contacto-pb-tablet-lg); } }
@media (min-width: 1024px) { #contacto { margin-top: var(--gap-prensa-contacto-desktop); padding-top: var(--contacto-pt-desktop); padding-bottom: var(--contacto-pb-desktop); } }

#cierre { margin-top: var(--gap-contacto-cierre-mobile); padding-top: var(--cierre-pt-mobile); padding-bottom: var(--cierre-pb-mobile); }
@media (min-width: 640px)  { #cierre { margin-top: var(--gap-contacto-cierre-tablet-sm); padding-top: var(--cierre-pt-tablet-sm); padding-bottom: var(--cierre-pb-tablet-sm); } }
@media (min-width: 768px)  { #cierre { margin-top: var(--gap-contacto-cierre-tablet-lg); padding-top: var(--cierre-pt-tablet-lg); padding-bottom: var(--cierre-pb-tablet-lg); } }
@media (min-width: 1024px) { #cierre { margin-top: var(--gap-contacto-cierre-desktop); padding-top: var(--cierre-pt-desktop); padding-bottom: var(--cierre-pb-desktop); } }

/* Mobile menu — reusa las mismas vars de blur/saturate/brightness/contrast del popup "Ver más"
   para que el fondo del menú hamburguesa tenga el mismo look frosted glass que las descripciones. */
#mobile-menu {
  background: rgba(255, 255, 255, var(--esp-popup-bg-alpha-mobile, 0));
  backdrop-filter:
    blur(calc(var(--esp-popup-blur-mobile, 9) * 1px))
    saturate(calc(var(--esp-popup-saturate-mobile, 145) * 1%))
    brightness(calc(var(--esp-popup-brightness-mobile, 96) * 1%))
    contrast(calc(var(--esp-popup-contrast-mobile, 102) * 1%));
  -webkit-backdrop-filter:
    blur(calc(var(--esp-popup-blur-mobile, 9) * 1px))
    saturate(calc(var(--esp-popup-saturate-mobile, 145) * 1%))
    brightness(calc(var(--esp-popup-brightness-mobile, 96) * 1%))
    contrast(calc(var(--esp-popup-contrast-mobile, 102) * 1%));
  border-color: rgba(255, 255, 255, var(--esp-popup-border-alpha-mobile, 0));
}
@media (min-width: 640px) {
  #mobile-menu {
    background: rgba(255, 255, 255, var(--esp-popup-bg-alpha-tablet-sm, 0));
    backdrop-filter:
      blur(calc(var(--esp-popup-blur-tablet-sm, 9) * 1px))
      saturate(calc(var(--esp-popup-saturate-tablet-sm, 145) * 1%))
      brightness(calc(var(--esp-popup-brightness-tablet-sm, 96) * 1%))
      contrast(calc(var(--esp-popup-contrast-tablet-sm, 102) * 1%));
    -webkit-backdrop-filter:
      blur(calc(var(--esp-popup-blur-tablet-sm, 9) * 1px))
      saturate(calc(var(--esp-popup-saturate-tablet-sm, 145) * 1%))
      brightness(calc(var(--esp-popup-brightness-tablet-sm, 96) * 1%))
      contrast(calc(var(--esp-popup-contrast-tablet-sm, 102) * 1%));
    border-color: rgba(255, 255, 255, var(--esp-popup-border-alpha-tablet-sm, 0));
  }
}
@media (min-width: 768px) {
  #mobile-menu {
    background: rgba(255, 255, 255, var(--esp-popup-bg-alpha-tablet-lg, 0));
    backdrop-filter:
      blur(calc(var(--esp-popup-blur-tablet-lg, 9) * 1px))
      saturate(calc(var(--esp-popup-saturate-tablet-lg, 145) * 1%))
      brightness(calc(var(--esp-popup-brightness-tablet-lg, 96) * 1%))
      contrast(calc(var(--esp-popup-contrast-tablet-lg, 102) * 1%));
    -webkit-backdrop-filter:
      blur(calc(var(--esp-popup-blur-tablet-lg, 9) * 1px))
      saturate(calc(var(--esp-popup-saturate-tablet-lg, 145) * 1%))
      brightness(calc(var(--esp-popup-brightness-tablet-lg, 96) * 1%))
      contrast(calc(var(--esp-popup-contrast-tablet-lg, 102) * 1%));
    border-color: rgba(255, 255, 255, var(--esp-popup-border-alpha-tablet-lg, 0));
  }
}

/* Footer logo size por bp. */
.footer-logo { height: var(--footer-logo-size-mobile); }
@media (min-width: 640px)  { .footer-logo { height: var(--footer-logo-size-tablet-sm); } }
@media (min-width: 768px)  { .footer-logo { height: var(--footer-logo-size-tablet-lg); } }
@media (min-width: 1024px) { .footer-logo { height: var(--footer-logo-size-desktop); } }

/* Footer — paddings internos por bp.
   .footer-top-block: padding-top controla distancia desde la sección Cierre (parametrizado).
                       padding-bottom controla distancia hacia el copyright. */
.footer-top-block { padding-top: var(--footer-pt-mobile); padding-bottom: var(--footer-top-pb-mobile); }
.footer-bot-block { padding-top: var(--footer-bot-pt-mobile); }
@media (min-width: 640px)  { .footer-top-block { padding-top: var(--footer-pt-tablet-sm); padding-bottom: var(--footer-top-pb-tablet-sm); } .footer-bot-block { padding-top: var(--footer-bot-pt-tablet-sm); } }
@media (min-width: 768px)  { .footer-top-block { padding-top: var(--footer-pt-tablet-lg); padding-bottom: var(--footer-top-pb-tablet-lg); } .footer-bot-block { padding-top: var(--footer-bot-pt-tablet-lg); } }
@media (min-width: 1024px) { .footer-top-block { padding-top: var(--footer-pt-desktop);   padding-bottom: var(--footer-top-pb-desktop); }   .footer-bot-block { padding-top: var(--footer-bot-pt-desktop); } }

/* Aplicación: proposito.html — padding-top del <main> con .proposito-main-wrap. */
.proposito-main-wrap { padding-top: var(--proposito-main-pt-mobile); }
@media (min-width: 640px)  { .proposito-main-wrap { padding-top: var(--proposito-main-pt-tablet-sm); } }
@media (min-width: 768px)  { .proposito-main-wrap { padding-top: var(--proposito-main-pt-tablet-lg); } }
@media (min-width: 1024px) { .proposito-main-wrap { padding-top: var(--proposito-main-pt-desktop); } }

/* Selección de --logo-fade-current según breakpoint. */
@media (min-width: 640px)  { :root { --logo-fade-current: var(--logo-fade-tablet-sm); } }
@media (min-width: 768px)  { :root { --logo-fade-current: var(--logo-fade-tablet-lg); } }
@media (min-width: 1024px) { :root { --logo-fade-current: var(--logo-fade-desktop); } }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Lenis maneja el smooth-scroll globalmente — disable nativo para evitar fight */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
html { scroll-behavior: smooth; }
/* Fondo del body — tono cálido fijo (hue 38°, sat 35%), luminosidad parametrizada por bp via dev-tuner. */
html, body { background: hsl(38, 35%, calc(var(--body-bg-l-mobile, 84) * 1%)); color: var(--brand-fg); font-family: 'Numans', system-ui, sans-serif; }
@media (min-width: 640px)  { html, body { background: hsl(38, 35%, calc(var(--body-bg-l-tablet-sm, 84) * 1%)); } }
@media (min-width: 768px)  { html, body { background: hsl(38, 35%, calc(var(--body-bg-l-tablet-lg, 84) * 1%)); } }
@media (min-width: 1024px) { html, body { background: hsl(38, 35%, calc(var(--body-bg-l-desktop, 84) * 1%)); } }
html, body { overflow-x: hidden; } /* cinturón de seguridad: ningún elemento debe causar scroll horizontal */

::selection { background: var(--brand-fg); color: var(--pastel-cream); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(58,70,79,0.22); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(58,70,79,0.4); }

.font-display { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 300; letter-spacing: -0.01em; }

.container-pro { margin-left: auto; margin-right: auto; max-width: 80rem; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 768px) { .container-pro { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) { .container-pro { padding-left: 4rem; padding-right: 4rem; } }

.eyebrow { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.28em; color: var(--brand-accent-2); }
.hairline { display: inline-block; vertical-align: middle; width: 3rem; height: 1px; background: #cfd4d8; margin-right: 0.75rem; }

.display-1 { font-family: 'Montserrat', sans-serif; font-weight: 200; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.015em; color: #2a333a; }
.display-2 { font-family: 'Montserrat', sans-serif; font-weight: 200; font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; color: #2a333a; }
.display-3 { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.15; color: #2a333a; }
.lead { font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.7; color: #454d54; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px; background: #2a333a; color: var(--pastel-cream);
  padding: 0.85rem 1.6rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em;
  transition: background 220ms, transform 180ms, box-shadow 240ms; cursor: pointer; border: none;
}
.btn-primary:hover { background: var(--brand-fg); box-shadow: 0 0 0 1px rgba(58,70,79,0.06), 0 24px 60px -24px rgba(58,70,79,0.25); }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 9999px; background: rgba(255,255,255,0.45); color: var(--brand-fg);
  padding: 0.85rem 1.6rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em;
  border: 1px solid rgba(207,212,216,0.85); backdrop-filter: blur(12px); transition: all 220ms;
}
.btn-ghost:hover { background: rgba(255,255,255,0.8); border-color: #a9b0b8; }
.btn-ghost:active { transform: scale(0.98); }

.section-pad { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 768px) { .section-pad { padding-top: 8rem; padding-bottom: 8rem; } }

.card-soft {
  border-radius: 1.75rem; background: rgba(255,255,255,0.62);
  backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 0 12px 40px -16px rgba(58,70,79,0.18);
}

.badge-soft {
  display: inline-flex; align-items: center;
  border-radius: 9999px; background: rgba(255,255,255,0.7);
  border: 1px solid rgba(207,212,216,0.7); padding: 6px 12px;
  font-size: 11px; letter-spacing: 0.02em; color: var(--brand-fg);
}

/* Navbar pill: el bg + blur viven en el div interno (clases Tailwind).
   En scroll, subimos sutilmente la opacidad del pill. */

.nav-link {
  position: relative; font-family: 'Montserrat', sans-serif; font-size: 0.875rem;
  letter-spacing: 0.02em; color: #5c646a; transition: color 250ms;
  text-decoration: none;
}
.nav-link:hover { color: #2a333a; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 350ms ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: #2a333a; }

.mobile-link {
  display: block; padding: 12px 14px; border-radius: 12px;
  font-family: 'Montserrat', sans-serif; color: #454d54;
  transition: background 220ms;
  text-decoration: none;
}
.mobile-link:hover { background: rgba(255,255,255,0.7); }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field > span { font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: #7e8285; }
.field input, .field select, .field textarea {
  border: 1px solid rgba(207,212,216,0.7);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.7);
  font-family: 'Numans', sans-serif;
  color: var(--brand-fg);
  font-size: 14px;
  transition: border-color 200ms, box-shadow 200ms, background 200ms;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-fg);
  box-shadow: 0 0 0 3px rgba(58,70,79,0.10);
  background: white;
}
.field textarea { resize: vertical; min-height: 80px; }

/* Animaciones */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.04); opacity: 1; }
}
.animate-breathe { animation: breathe 7s ease-in-out infinite; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-floaty { animation: floaty 6s ease-in-out infinite; }

/* Pulse-rotate suave (para sellos como el sparkles del cierre) */
@keyframes pulse-rotate {
  0%   { transform: rotate(0deg) scale(1); opacity: 0.85; }
  50%  { transform: rotate(180deg) scale(1.04); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.85; }
}
.animate-pulse-rotate { animation: pulse-rotate 16s linear infinite; }

/* ========================================================
   Reveal utilities (GSAP las activa cuando entran al viewport)
   - .reveal-up: traslada 40px y aparece
   - .reveal-mask: clip-path reveal — perfecto para títulos display
   - .reveal-stagger > * : cascade automático con offset
   Estado inicial vía CSS para evitar flash; GSAP lo limpia al revelar.
   ======================================================== */
.reveal-up { opacity: 0; transform: translateY(40px); will-change: transform, opacity; }
/* .reveal-mask antes usaba clip-path lateral (agresivo); ahora fade-in suave con blur que se enfoca
   gradualmente y micro-translate vertical. El "degradado" lo produce el filter:blur que se reduce. */
.reveal-mask {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
  will-change: opacity, transform, filter;
}
.reveal-stagger > * { opacity: 0; transform: translateY(28px); }

/* Card hover unificado — aplicar como .card-lift */
.card-lift { transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -24px rgba(58,70,79,0.32); }

/* Botón sheen sweep — barre en hover */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 0%, transparent 35%, rgba(247,243,236,0.18) 50%, transparent 65%, transparent 100%);
  background-size: 250% 100%; background-position: 200% 0;
  transition: background-position 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-primary:hover::before { background-position: -50% 0; }

/* Navbar pill — TODO HARDCODEADO por David (definitivo).
   Normal: blur 36px · bg rgba(255,255,255,0.48).
   Scrolled: blur 7px · bg rgba(255,255,255,0.36).
   La transición suave entre estados se mantiene. */
#navbar { transition: top 300ms ease; }
.navbar-pill {
  background-color: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  transition: background-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
              backdrop-filter 420ms cubic-bezier(0.22, 1, 0.36, 1),
              -webkit-backdrop-filter 420ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
#navbar.scrolled .navbar-pill {
  background-color: rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* Parallax wrapper — imagen leve drift en scroll. Lenis + GSAP la mueve. */
.parallax-img { will-change: transform; }

/* Especialidades — transform combinado (translate + scale) por imagen.
   Dev-tuner setea las tres vars inline en cada .esp-img según bp activo:
   --esp-pos-x-current / --esp-pos-y-current / --esp-zoom-current. */
.esp-img {
  transform: translate(var(--esp-pos-x-current, 0px), var(--esp-pos-y-current, 0px)) scale(var(--esp-zoom-current, 1));
  transform-origin: center center;
}

/* Especialidades — botón "Ver más" + popup flotante con la descripción.
   El popup se posiciona absoluto desde el card y sobresale por debajo, montándose
   sobre la siguiente card del grid sin mover el layout. Glow cálido + scale-up animado. */
.esp-card { z-index: 1; }
.esp-card:has(.esp-popup.open) { z-index: 30; }
.esp-more-icon { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.esp-more[aria-expanded="true"] .esp-more-icon { transform: rotate(180deg); }
.esp-popup {
  /* position fixed seteada en runtime por setupEspMore (top/left/width calculados desde la card).
     Vive fuera del .card-soft para que backdrop-filter funcione sobre el fondo real de la página. */
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  /* bg + 4 filtros (blur/saturate/brightness/contrast) + border parametrizados por bp (dev-tuner). */
  background: rgba(255, 255, 255, var(--esp-popup-bg-alpha-mobile, 0.40));
  backdrop-filter:
    blur(calc(var(--esp-popup-blur-mobile, 20) * 1px))
    saturate(calc(var(--esp-popup-saturate-mobile, 180) * 1%))
    brightness(calc(var(--esp-popup-brightness-mobile, 105) * 1%))
    contrast(calc(var(--esp-popup-contrast-mobile, 100) * 1%));
  -webkit-backdrop-filter:
    blur(calc(var(--esp-popup-blur-mobile, 20) * 1px))
    saturate(calc(var(--esp-popup-saturate-mobile, 180) * 1%))
    brightness(calc(var(--esp-popup-brightness-mobile, 105) * 1%))
    contrast(calc(var(--esp-popup-contrast-mobile, 100) * 1%));
  border: 1px solid rgba(255, 255, 255, var(--esp-popup-border-alpha-mobile, 0.75));
  border-radius: 1.5rem;
  padding: 1.4rem 1.5rem;
  box-shadow:
    0 0 0 1px rgba(58, 70, 79, 0.06),
    0 26px 60px -22px rgba(58, 70, 79, 0.32),
    0 0 60px -8px rgba(245, 230, 224, 0.55); /* glow cálido pastel-blush */
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.esp-popup.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  box-shadow:
    0 0 0 1px rgba(58, 70, 79, 0.08),
    0 32px 72px -20px rgba(58, 70, 79, 0.38),
    0 0 80px -4px rgba(245, 230, 224, 0.75); /* glow más intenso al abrir */
}

/* Overrides por bp para las 6 vars del popup (blur/saturate/brightness/contrast/bg-alpha/border-alpha). */
@media (min-width: 640px) {
  .esp-popup {
    background: rgba(255, 255, 255, var(--esp-popup-bg-alpha-tablet-sm, 0.40));
    backdrop-filter:
      blur(calc(var(--esp-popup-blur-tablet-sm, 20) * 1px))
      saturate(calc(var(--esp-popup-saturate-tablet-sm, 180) * 1%))
      brightness(calc(var(--esp-popup-brightness-tablet-sm, 105) * 1%))
      contrast(calc(var(--esp-popup-contrast-tablet-sm, 100) * 1%));
    -webkit-backdrop-filter:
      blur(calc(var(--esp-popup-blur-tablet-sm, 20) * 1px))
      saturate(calc(var(--esp-popup-saturate-tablet-sm, 180) * 1%))
      brightness(calc(var(--esp-popup-brightness-tablet-sm, 105) * 1%))
      contrast(calc(var(--esp-popup-contrast-tablet-sm, 100) * 1%));
    border-color: rgba(255, 255, 255, var(--esp-popup-border-alpha-tablet-sm, 0.75));
  }
}
@media (min-width: 768px) {
  .esp-popup {
    background: rgba(255, 255, 255, var(--esp-popup-bg-alpha-tablet-lg, 0.40));
    backdrop-filter:
      blur(calc(var(--esp-popup-blur-tablet-lg, 20) * 1px))
      saturate(calc(var(--esp-popup-saturate-tablet-lg, 180) * 1%))
      brightness(calc(var(--esp-popup-brightness-tablet-lg, 105) * 1%))
      contrast(calc(var(--esp-popup-contrast-tablet-lg, 100) * 1%));
    -webkit-backdrop-filter:
      blur(calc(var(--esp-popup-blur-tablet-lg, 20) * 1px))
      saturate(calc(var(--esp-popup-saturate-tablet-lg, 180) * 1%))
      brightness(calc(var(--esp-popup-brightness-tablet-lg, 105) * 1%))
      contrast(calc(var(--esp-popup-contrast-tablet-lg, 100) * 1%));
    border-color: rgba(255, 255, 255, var(--esp-popup-border-alpha-tablet-lg, 0.75));
  }
}
@media (min-width: 1024px) {
  .esp-popup {
    background: rgba(255, 255, 255, var(--esp-popup-bg-alpha-desktop, 0.40));
    backdrop-filter:
      blur(calc(var(--esp-popup-blur-desktop, 20) * 1px))
      saturate(calc(var(--esp-popup-saturate-desktop, 180) * 1%))
      brightness(calc(var(--esp-popup-brightness-desktop, 105) * 1%))
      contrast(calc(var(--esp-popup-contrast-desktop, 100) * 1%));
    -webkit-backdrop-filter:
      blur(calc(var(--esp-popup-blur-desktop, 20) * 1px))
      saturate(calc(var(--esp-popup-saturate-desktop, 180) * 1%))
      brightness(calc(var(--esp-popup-brightness-desktop, 105) * 1%))
      contrast(calc(var(--esp-popup-contrast-desktop, 100) * 1%));
    border-color: rgba(255, 255, 255, var(--esp-popup-border-alpha-desktop, 0.75));
  }
}

/* Card collapse — grid-template-rows trick para animar altura auto sin max-height fijo.
   Las 3 cards de Propósito·Misión·Visión usan este patrón sincronizado (setupCardCollapse en main.js). */
.card-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card-collapse > div { overflow: hidden; min-height: 0; }
.card-collapse.open { grid-template-rows: 1fr; }
.card-toggle .card-toggle-icon { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.card-toggle[aria-expanded="true"] .card-toggle-icon { transform: rotate(180deg); }


/* ========================================================
   Partículas decorativas de fondo (CSS-only).
   Solo se intuyen donde el fondo de la sección es translúcido.
   ======================================================== */
.particle {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.42;
  will-change: transform;
  animation: particle-float 24s ease-in-out infinite;
}

@keyframes particle-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(20px, -28px) scale(1.05); }
  50%      { transform: translate(-18px, 22px) scale(0.97); }
  75%      { transform: translate(24px, 18px) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .particle { animation: none; }
}

@media (max-width: 768px) {
  /* Reducir cantidad en mobile para no saturar */
  #bg-particles .particle:nth-child(n+7) { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================
   Isla: secciones principales como tarjetas que no llegan a los bordes del viewport.
   David — aplicar a: inicio, quiénes somos, especialidades, equipo (doctores), prensa, contacto.
   Misión-visión, casos y cierre quedan full-bleed (separadores visuales).
   ======================================================== */
#inicio, #quienes-somos, #especialidades, #doctores, #equipo, #casos, #prensa, #contacto {
  margin-left: 1rem;
  margin-right: 1rem;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 14px 50px -22px rgba(58,70,79,0.22);
  position: relative;
  isolation: isolate;
}
@media (min-width: 768px) {
  #inicio, #quienes-somos, #especialidades, #doctores, #equipo, #casos, #prensa, #contacto {
    margin-left: 2rem;
    margin-right: 2rem;
    border-radius: 2.5rem;
  }
}
@media (min-width: 1280px) {
  #inicio, #quienes-somos, #especialidades, #doctores, #equipo, #casos, #prensa, #contacto {
    margin-left: 3rem;
    margin-right: 3rem;
    border-radius: 3rem;
  }
}

/* Page logo (fixed top-left, parte de la página y no del header).
   Tamaño bastante mayor que el del navbar anterior. z-0 → queda al fondo,
   las islas pasan por encima al scrollear. */
#page-logo { pointer-events: auto; }
#page-logo img { object-fit: contain; }

/* Hero isla — padding-top adaptativo (clamp) para no scrollear en pantallas chatas.
   El padding-bottom lo controla --hero-pb-{bp} (ver bloque arriba en este archivo). */
#inicio {
  margin-top: 2rem;
  padding-top: clamp(1.5rem, 6vh, 4rem);
}

/* Hero — push-down desde el H1.  margin-top crece la fila/altura del título y arrastra todo lo que sigue. */
#inicio h1.display-1 { margin-top: var(--hero-pushdown-mobile); }
@media (min-width: 640px)  { #inicio h1.display-1 { margin-top: var(--hero-pushdown-tablet-sm); } }
@media (min-width: 768px)  { #inicio h1.display-1 { margin-top: var(--hero-pushdown-tablet-lg); } }
@media (min-width: 1024px) { #inicio h1.display-1 { margin-top: var(--hero-pushdown-desktop); } }

/* Hero eyebrow — toggles dev-tuner (alineación + lado del ícono). Persistentes vía JS. */
.hero-eyebrow-wrap.align-right {
  display: block;
  margin-left: auto !important; /* override del var --eyebrow-x-* cuando el toggle está activo */
  margin-right: 0;
  width: fit-content;
}
.hero-eyebrow-wrap .eyebrow.icon-right {
  flex-direction: row-reverse;
}

/* Hero eyebrow — horizontalidad (margin-left) + verticalidad (translateY) por breakpoint. */
.hero-eyebrow-wrap {
  display: inline-block;
  margin-left: var(--eyebrow-x-mobile);
  transform: translateY(var(--eyebrow-y-mobile));
}
@media (min-width: 640px)  { .hero-eyebrow-wrap { margin-left: var(--eyebrow-x-tablet-sm); transform: translateY(var(--eyebrow-y-tablet-sm)); } }
@media (min-width: 768px)  { .hero-eyebrow-wrap { margin-left: var(--eyebrow-x-tablet-lg); transform: translateY(var(--eyebrow-y-tablet-lg)); } }
@media (min-width: 1024px) { .hero-eyebrow-wrap { margin-left: var(--eyebrow-x-desktop);   transform: translateY(var(--eyebrow-y-desktop)); } }

/* Hero frame de la imagen — 4 border-radius asimétricos + translate tuneable por bp. */
.hero-frame {
  border-top-left-radius:     2.75rem;
  border-top-right-radius:    1.75rem;
  border-bottom-left-radius:  1.5rem;
  border-bottom-right-radius: 3rem;
  transform: translate(var(--hero-frame-x-mobile), var(--hero-frame-y-mobile));
}
@media (min-width: 640px)  { .hero-frame { transform: translate(var(--hero-frame-x-tablet-sm), var(--hero-frame-y-tablet-sm)); } }
@media (min-width: 768px)  { .hero-frame { transform: translate(var(--hero-frame-x-tablet-lg), var(--hero-frame-y-tablet-lg)); } }
@media (min-width: 1024px) { .hero-frame { transform: translate(var(--hero-frame-x-desktop), var(--hero-frame-y-desktop)); } }

/* Wrap interior con encuadre + zoom de la imagen — tuneable por bp. */
.hero-img-wrap {
  transform-origin: center center;
  transform: translate(var(--hero-img-x-mobile), var(--hero-img-y-mobile)) scale(var(--hero-img-scale-mobile));
}
@media (min-width: 640px)  { .hero-img-wrap { transform: translate(var(--hero-img-x-tablet-sm), var(--hero-img-y-tablet-sm)) scale(var(--hero-img-scale-tablet-sm)); } }
@media (min-width: 768px)  { .hero-img-wrap { transform: translate(var(--hero-img-x-tablet-lg), var(--hero-img-y-tablet-lg)) scale(var(--hero-img-scale-tablet-lg)); } }
@media (min-width: 1024px) { .hero-img-wrap { transform: translate(var(--hero-img-x-desktop), var(--hero-img-y-desktop)) scale(var(--hero-img-scale-desktop)); } }

/* Quote card flotante "Una segunda etapa..." — absolute con offsets tuneables. */
.hero-quote-card {
  position: absolute;
  bottom: var(--hero-quote-y-mobile);
  left:   var(--hero-quote-x-mobile);
}
@media (min-width: 640px)  { .hero-quote-card { bottom: var(--hero-quote-y-tablet-sm); left: var(--hero-quote-x-tablet-sm); } }
@media (min-width: 768px)  { .hero-quote-card { bottom: var(--hero-quote-y-tablet-lg); left: var(--hero-quote-x-tablet-lg); } }
@media (min-width: 1024px) { .hero-quote-card { bottom: var(--hero-quote-y-desktop);   left: var(--hero-quote-x-desktop); } }

/* Bloque B del hero (lead + CTAs + italic) — translate tuneable por bp. */
.hero-textb {
  transform: translate(var(--hero-textb-x-mobile), var(--hero-textb-y-mobile));
}
@media (min-width: 640px)  { .hero-textb { transform: translate(var(--hero-textb-x-tablet-sm), var(--hero-textb-y-tablet-sm)); } }
@media (min-width: 768px)  { .hero-textb { transform: translate(var(--hero-textb-x-tablet-lg), var(--hero-textb-y-tablet-lg)); } }
@media (min-width: 1024px) { .hero-textb { transform: translate(var(--hero-textb-x-desktop),   var(--hero-textb-y-desktop)); } }

/* Logo fixed top-left: va al frente (z-40) y se desvanece al scrollear (lógica en main.js,
   distancia leída de --logo-fade-current). Posición + tamaño parametrizados por breakpoint. */
#page-logo {
  will-change: opacity;
  transition: opacity 120ms linear;
  left: var(--logo-x-mobile);
  top:  var(--logo-y-mobile);
}
@media (min-width: 640px)  { #page-logo { left: var(--logo-x-tablet-sm); top: var(--logo-y-tablet-sm); } }
@media (min-width: 768px)  { #page-logo { left: var(--logo-x-tablet-lg); top: var(--logo-y-tablet-lg); } }
@media (min-width: 1024px) { #page-logo { left: var(--logo-x-desktop);   top: var(--logo-y-desktop); } }

#page-logo img { height: var(--logo-size-mobile); width: auto; }
@media (min-width: 640px)  { #page-logo img { height: var(--logo-size-tablet-sm); } }
@media (min-width: 768px)  { #page-logo img { height: var(--logo-size-tablet-lg); } }
@media (min-width: 1024px) { #page-logo img { height: var(--logo-size-desktop); } }