/* ============================================================
   CSS OBLIGATORIO DE LENIS
   Va primero. Sin estas reglas Lenis deja html y body con altura
   calculada del contenido y el scroll nativo se queda sin recorrido.
============================================================ */
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: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================
   VARIABLES — EDITAR COLORES AQUÍ
============================================================ */
:root {
  --tb-h:       44px;           /* alto de la barra superior de anuncio */
  /* ——— Colores extraídos del logotipo oficial ——— */
  --midnight:   #050D1A;          /* negro profundo */
  --navy:       #1b3658;          /* azul marino — cls-1 del logo */
  --blue:       #1b3658;          /* mismo tono como primary UI */
  --sky:        #3A7BB5;          /* tono medio derivado del navy */
  --red:        #b02d2b;          /* rojo crimson — cls-2 del logo (símbolo) */
  --red-light:  rgba(176,45,43,.10);
  --white:      #FFFFFF;
  --cream:      #F4F2EC;
  --off-white:  #F9F8F5;
  --ink:        #0D1B2A;
  --body:       #3E5166;
  --muted:      #6B7D8F;
  --border:     #DDE3EC;
  --wa:         #3FB5A0;
  --serif:      'Poppins', sans-serif;
  --sans:       'Poppins', sans-serif;
  --ease:       cubic-bezier(.25,.1,.25,1);
  --t:          .28s var(--ease);
  --pad:        clamp(72px,10vw,120px);
  color-scheme: light;
}

/* MODO OSCURO — toggle manual (botón) con el sistema como valor inicial.
   Los colores de marca (navy/red/logo) NO cambian entre claro y oscuro,
   solo se redefinen las superficies/textos (--white = tarjeta, --cream =
   fondo de sección) para mantener contraste sobre fondo oscuro. */
html.dark{
  color-scheme: dark;
  --white:      #16283F;
  --cream:      #0A1420;
  --off-white:  #101F33;
  --ink:        #F2F4F7;
  --body:       #B7C4D6;
  --muted:      #7E90A3;
  --border:     rgba(255,255,255,.12);
}

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-behavior lo maneja Lenis en main.js —
   dejarlo en "smooth" aquí hace que el navegador reanime encima de esa animación */
/* overflow-x va en html, no en body: ponerlo en body vuelve a body su propio
   contenedor de scroll (distinto del viewport) y eso rompe position:sticky
   en todos sus descendientes (ej. el mapa de Sucursales) */
html{overflow-x:hidden}
body{font-family:var(--sans);color:var(--body);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
ul{list-style:none}

/* ACCESIBILIDAD — foco de teclado visible + skip link */
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.skip-link{position:absolute;top:-100px;left:12px;z-index:9999;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:8px;font-weight:600;font-size:.9rem;transition:top .2s var(--ease)}
.skip-link:focus{top:12px}

/* TYPE */
h1{font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:800;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(1.55rem,3vw,2.35rem);font-weight:700;line-height:1.16;letter-spacing:-.016em}
h3{font-size:clamp(.95rem,1.6vw,1.12rem);font-weight:600;line-height:1.3}
p{font-size:1rem;line-height:1.72}

/* LAYOUT */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.wrap--sm{max-width:820px;margin:0 auto;padding:0 24px}

/* EYEBROW */
.ey{display:inline-flex;align-items:center;gap:10px;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
html.dark .ey{color:#EF6B63}
.ey-line{display:inline-block;width:26px;height:1.5px;background:currentColor;flex-shrink:0}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:9px;font-size:.88rem;font-weight:600;letter-spacing:.02em;line-height:1;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t),opacity var(--t);white-space:nowrap;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--wa{background:var(--wa);color:#04332E;box-shadow:0 4px 16px rgba(63,181,160,.28)}
.btn--wa:hover{box-shadow:0 6px 22px rgba(63,181,160,.4)}
.btn--dark{background:var(--ink);color:var(--white);box-shadow:0 4px 14px rgba(8,15,28,.25)}
.btn--dark:hover{background:#1a3050}
.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.75)}
.btn--outline{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn--outline:hover{background:var(--blue);color:var(--white)}
html.dark .btn--outline{color:#6FA8D8;border-color:#6FA8D8}
html.dark .btn--outline:hover{background:#6FA8D8;color:#0A1420}
.btn--lg{padding:16px 34px;font-size:1rem;border-radius:12px}

/* REVEAL ANIMATIONS — el contenido es VISIBLE por defecto; la animación de
   entrada solo se reproduce al añadir .on (scroll). Así, si el observer o el
   scroll no disparan (previews, Lenis, JS lento), el diseño nunca queda oculto. */
[data-r]{opacity:1}
[data-r].on{animation:revealUp .7s cubic-bezier(.33,1,.68,1) both}
[data-r="l"].on{animation-name:revealLeft}
[data-r="r"].on{animation-name:revealRight}
@keyframes revealUp{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes revealLeft{from{opacity:0;transform:translate3d(-14px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes revealRight{from{opacity:0;transform:translate3d(14px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* Divisor de sección: línea fina con degradado de marca y shimmer sutil */
.hr-grad{height:1px;border:0;max-width:1160px;margin:0 auto;
  background:linear-gradient(90deg,transparent 4%,var(--navy),var(--red),var(--sky),transparent 96%);
  background-size:200% 100%;opacity:.4;animation:hrShift 7s linear infinite}
@keyframes hrShift{0%{background-position:0 50%}100%{background-position:200% 50%}}
@media(prefers-reduced-motion:reduce){.hr-grad{animation:none}}

/* ============================================================
   HEADER
============================================================ */
#hd{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background var(--t),box-shadow var(--t)}
#hd > .wrap{padding-top:18px;padding-bottom:18px;transition:padding var(--t)}
#hd.scrolled{background:rgba(255,255,255,.97);box-shadow:0 1px 0 rgba(0,0,0,.08)}
#hd.scrolled > .wrap{padding-top:11px;padding-bottom:11px}
html.dark #hd.scrolled{background:rgba(10,20,32,.92)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Logo */
.logo{display:flex;align-items:center;gap:11px}
.logo-mark{width:38px;height:38px;border:2px solid rgba(255,255,255,.6);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color var(--t)}
#hd.scrolled .logo-mark{border-color:var(--navy)}
.logo-mark svg{color:rgba(255,255,255,.9);transition:color var(--t)}
#hd.scrolled .logo-mark svg{color:var(--navy)}
.logo-txt{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-size:1.08rem;font-weight:800;letter-spacing:-.01em;color:rgba(255,255,255,.95);transition:color var(--t)}
.logo-sub{font-size:.65rem;color:rgba(255,255,255,.45);font-weight:400;letter-spacing:.04em;transition:color var(--t)}
#hd.scrolled .logo-name{color:var(--ink)}
#hd.scrolled .logo-sub{color:var(--muted)}

/* Logo SVG — wordmark oficial */
.logo-svg{height:36px;width:auto;display:block;flex-shrink:0}
.logo-svg .cls-1{fill:rgba(255,255,255,.92)}
.logo-svg .cls-2{fill:var(--red)}
#hd.scrolled .logo-svg .cls-1{fill:var(--navy)}
#hd.scrolled .logo-svg .cls-2{fill:var(--red)}
html.dark #hd.scrolled .logo-svg .cls-1{fill:rgba(255,255,255,.92)}
.footer-logo{height:30px;width:auto;display:block}
.footer-logo .cls-1{fill:rgba(255,255,255,.65)}
.footer-logo .cls-2{fill:var(--red)}
@media(max-width:640px){.logo-svg{height:28px}.footer-logo{height:24px}}

/* Nav */
.nav{display:flex;align-items:center;gap:2px}
.nav a{padding:7px 12px;border-radius:6px;font-size:.84rem;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.78);transition:background var(--t),color var(--t)}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff}
#hd.scrolled .nav a{color:var(--body)}
#hd.scrolled .nav a:hover{background:var(--off-white);color:var(--ink)}

.hd-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hd-cta{padding:10px 20px;font-size:.86rem}

/* Hamburger */
.ham{display:none;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:40px;height:40px;border-radius:7px;transition:background var(--t)}
.ham:hover{background:rgba(255,255,255,.12)}
#hd.scrolled .ham:hover{background:var(--off-white)}
.hb{display:block;width:21px;height:2px;background:rgba(255,255,255,.9);border-radius:2px;transition:transform var(--t),opacity var(--t)}
#hd.scrolled .hb{background:var(--ink)}
.ham.open .hb:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open .hb:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.open .hb:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Theme toggle (dark/light) */
.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;flex-shrink:0;transition:background var(--t)}
.theme-toggle:hover{background:rgba(255,255,255,.12)}
#hd.scrolled .theme-toggle:hover{background:var(--off-white)}
.theme-toggle svg{width:20px;height:20px;stroke:rgba(255,255,255,.9);transition:stroke var(--t)}
#hd.scrolled .theme-toggle svg{stroke:var(--ink)}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
html.dark .theme-toggle .i-sun{display:block}
html.dark .theme-toggle .i-moon{display:none}

/* Botón de búsqueda en el menú (escritorio) */
.nav-search{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;flex-shrink:0;transition:background var(--t)}
.nav-search:hover{background:rgba(255,255,255,.12)}
#hd.scrolled .nav-search:hover{background:var(--off-white)}
.nav-search svg{stroke:rgba(255,255,255,.9);transition:stroke var(--t)}
#hd.scrolled .nav-search svg{stroke:var(--ink)}

/* Mobile nav */
.mob-ov{display:none;position:fixed;inset:0;background:rgba(8,15,28,.65);backdrop-filter:blur(4px);z-index:998}
.mob-ov.open{display:block}
.mob-nav{position:fixed;top:0;right:-100%;width:min(280px,86vw);height:100vh;background:var(--white);z-index:999;padding:calc(80px + var(--tb-h)) 26px 32px;display:flex;flex-direction:column;gap:4px;transition:right .3s var(--ease);box-shadow:-4px 0 36px rgba(0,0,0,.14)}
.mob-nav.open{right:0}
.mob-nav a{padding:12px 14px;border-radius:8px;font-size:.97rem;font-weight:500;color:var(--ink);transition:background var(--t)}
.mob-nav a:hover{background:var(--off-white)}
.mob-nav .mob-search{display:flex;align-items:center;gap:9px;background:var(--cream);border:1.5px solid var(--border);font-weight:600;margin-bottom:8px}
.mob-nav .mob-search svg{stroke:var(--red);flex-shrink:0}
.mob-nav .mob-search:hover{background:var(--cream);border-color:var(--sky)}
.mob-nav .btn{width:100%;justify-content:center;margin-top:12px}
.mob-nav .btn--wa{color:#04332E}

/* ============================================================
   HERO
============================================================ */
#hero{position:relative;min-height:100vh;min-height:100dvh;background:var(--midnight);display:flex;align-items:center;overflow:hidden}
/* el .wrap es item flex: sin esto crece con su contenido y se sale en celular */
#hero > .wrap{width:100%;min-width:0}

/* Diagonal cut at bottom — cleaner than waves */
.h-cut{position:absolute;bottom:0;left:0;right:0;z-index:2}

.hero-body{position:relative;z-index:3;width:100%;padding:calc(clamp(110px,15vw,160px) + var(--tb-h)) 0 clamp(90px,12vw,130px)}
.hero-pre{display:flex;align-items:center;gap:13px;margin-bottom:26px}
.hero-preline{display:block;width:36px;height:1.5px;background:var(--red)}
.hero-prelabel{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}

/* THE headline — serif, large, emotional */
.hero-q{font-family:var(--sans);font-size:clamp(2.4rem,5vw,4.2rem);font-weight:300;line-height:1.12;letter-spacing:-.01em;color:#fff;margin-bottom:20px}
.hero-q em{font-style:italic;font-weight:300;color:rgba(255,255,255,.82)}

.hero-sub{font-size:clamp(.97rem,1.6vw,1.12rem);color:rgba(255,255,255,.6);max-width:min(520px,100%);line-height:1.78;margin-bottom:36px}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:56px}

/* Stat bar */
.hero-stats{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);padding-top:28px}
.hstat{padding-right:36px;margin-right:36px;border-right:1px solid rgba(255,255,255,.1)}
.hstat:last-child{border-right:none;margin-right:0;padding-right:0}
.hstat-n{font-size:1.75rem;font-weight:900;color:#fff;line-height:1;letter-spacing:-.03em}
.hstat-l{font-size:.72rem;color:rgba(255,255,255,.42);margin-top:6px;font-weight:500}

/* ============================================================
   SECTION 02 — EL PROBLEMA
============================================================ */
#prob{background:var(--cream);padding:var(--pad) 0}
.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}

/* Left: big editorial serif quote */
.prob-left{position:relative;overflow:visible}
.prob-quote{font-family:var(--sans);font-size:clamp(1.75rem,3.4vw,2.8rem);font-weight:300;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin-bottom:20px;position:relative;z-index:1}
/* Fondo con foto de la sección "Cuidar tu salud" (sutil, con velo) */
#prob{position:relative;overflow:hidden}
#prob .wrap{position:relative;z-index:1}
.prob-bg{position:absolute;inset:0;background:url('../img/prob-bg.jpg') center/cover no-repeat;opacity:.10;pointer-events:none}
.prob-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--cream),rgba(244,242,236,.35) 45%,var(--cream))}
html.dark .prob-bg{opacity:.16}
html.dark .prob-bg::after{background:linear-gradient(180deg,rgba(10,20,32,.72),rgba(10,20,32,.35) 45%,rgba(10,20,32,.8))}
.prob-quote strong{font-weight:700;color:var(--navy)}
html.dark .prob-quote strong{color:#6FA8D8}
.prob-sub{color:var(--body);max-width:380px;font-size:.95rem;position:relative;z-index:1}

/* Right: reason list — editorial, no icons */
.reasons{display:flex;flex-direction:column}
.reason{position:relative;display:flex;align-items:flex-start;gap:16px;padding:26px 0;border-bottom:1px solid var(--border);transition:transform .4s var(--ease)}
.reason::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;width:0;background:var(--red);transition:width .5s var(--ease)}
.reason:hover{transform:translateX(6px)}
.reason:hover::after{width:100%}
.reason:first-child{border-top:1px solid var(--border)}
.reason-n{font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.06em;padding-top:2px;flex-shrink:0;width:18px;font-variant-numeric:tabular-nums;transition:color .4s var(--ease)}
.reason:hover .reason-n{color:var(--red)}
.reason-ico{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--red-light);color:var(--red);transition:transform .4s var(--ease),background .4s var(--ease)}
.reason-ico svg{width:20px;height:20px}
.reason:hover .reason-ico{transform:scale(1.08)}
.reason-body strong{display:block;font-size:.95rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.reason-body span{display:block;font-size:.83rem;color:var(--muted);line-height:1.55}

/* ============================================================
   SECTION 03 — SIALAB INTRO
============================================================ */
#intro{background:var(--cream);padding:var(--pad) 0;position:relative;overflow:hidden}
.intro-body{position:relative;z-index:1;max-width:780px}
.intro-ey{display:flex;align-items:center;gap:10px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:22px}
.intro-ey-line{width:26px;height:1.5px;background:var(--red)}
.intro-h{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:700;color:var(--ink);line-height:1.14;letter-spacing:-.018em;margin-bottom:18px}
.intro-h span{color:var(--red)}
.intro-p{font-size:1.06rem;color:var(--body);line-height:1.8;margin-bottom:34px;max-width:620px}
.intro-p strong{color:var(--navy)}
html.dark .intro-p strong{color:#6FA8D8}
.intro-cta{display:flex;gap:12px;flex-wrap:wrap}
#intro .btn--ghost{color:var(--navy);border-color:rgba(27,54,88,.35)}
#intro .btn--ghost:hover{background:rgba(27,54,88,.06);border-color:var(--navy)}
html.dark #intro .btn--ghost{color:#6FA8D8;border-color:rgba(111,168,216,.35)}
html.dark #intro .btn--ghost:hover{background:rgba(111,168,216,.1);border-color:#6FA8D8}
#cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.38)}
#cta .btn--ghost:hover{background:rgba(255,255,255,.10);border-color:#fff}

/* ============================================================
   SECTION 05 — ESTUDIOS
============================================================ */
#estudios{background:var(--cream);padding:var(--pad) 0}
.est-hd{margin-bottom:38px}
.est-hd h2{color:var(--ink)}

/* Search */
.s-wrap{position:relative;margin-bottom:22px}
.s-wrap input{width:100%;padding:14px 18px 14px 46px;border:1.5px solid var(--border);border-radius:8px;font-size:.95rem;font-family:var(--sans);color:var(--ink);background:var(--white);outline:none;transition:border-color var(--t),box-shadow var(--t)}
.s-wrap input::placeholder{color:var(--muted)}
.s-wrap input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,54,88,.1)}
.s-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}

/* Filter pills */
.filter-group{margin-bottom:14px}
.filter-group--last{margin-bottom:28px}
.filter-lb{display:block;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.pills{display:flex;gap:7px;flex-wrap:wrap}
.pill{padding:6px 14px;border-radius:50px;font-size:.78rem;font-weight:600;border:1.5px solid var(--border);color:var(--body);background:transparent;cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t)}
.pill:hover,.pill.on{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* Study cards */
.e-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.e-card{border:1.5px solid var(--border);border-radius:16px;overflow:hidden;background:var(--white);display:flex;flex-direction:column;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.e-card:hover{border-color:var(--sky);box-shadow:0 6px 24px rgba(27,54,88,.1),0 12px 40px rgba(58,123,181,.2),0 0 0 1px rgba(58,123,181,.28);transform:translateY(-3px)}
/* Accent top bar per category */
.e-card::before{content:'';display:block;height:3.5px;width:100%;flex-shrink:0}
.e-card[data-cat="sangre"]::before{background:linear-gradient(90deg,#C53030,#FC8181)}
.e-card[data-cat="hormonas"]::before{background:linear-gradient(90deg,#6B21A8,#C084FC)}
.e-card[data-cat="infeccion"]::before{background:linear-gradient(90deg,#64748B,#B6C2D1)}
.e-card[data-cat="orina"]::before{background:linear-gradient(90deg,#CA8A04,#FACC15)}
.e-card[data-cat="cultivos"]::before{background:linear-gradient(90deg,#0E7C6B,#3FB5A0)}
.e-card[data-cat="perfiles"]::before{background:linear-gradient(90deg,#1b3658,#3A7BB5)}
.e-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.e-card.hide{display:none}

/* Ítem compacto del catálogo completo (fila: nombre + subcategoría + chevron) */
.e-item::before{display:none}
.e-item{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%;border-left-width:3px}
.e-item[data-cat="sangre"]{border-left-color:#D96060}
.e-item[data-cat="hormonas"]{border-left-color:#9D5AD6}
.e-item[data-cat="infeccion"]{border-left-color:#7C8B9E}
.e-item[data-cat="orina"]{border-left-color:#D9A227}
.e-item[data-cat="cultivos"]{border-left-color:#2FB59D}
.e-item[data-cat="perfiles"]{border-left-color:#3A7BB5}
.e-item .e-item-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.e-item .e-name{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.25}
.e-item .e-sub{font-size:.68rem;color:var(--muted);letter-spacing:.02em}
.e-item .e-item-ico{color:var(--muted);flex-shrink:0;transition:color var(--t),transform var(--t)}
.e-item:hover .e-item-ico{color:var(--sky);transform:translateX(2px)}
.e-name{font-size:.96rem;font-weight:700;color:var(--ink)}
.e-desc{font-size:.8rem;color:var(--muted);flex:1;line-height:1.58}
.e-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:#E6F7F4;color:#0B4A42;border:1.5px solid rgba(63,181,160,.32);border-radius:7px;padding:9px 14px;font-size:.79rem;font-weight:700;cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t)}
html.dark .e-btn{background:rgba(63,181,160,.16);color:#6FE0CC}
.e-btn:hover{background:var(--wa);color:#04332E;border-color:var(--wa)}
.no-r{grid-column:1/-1;text-align:center;padding:48px;color:var(--muted);display:none}

/* Catálogo completo — encabezado + acordeón por categoría (<details>) */
.cat-head{margin:52px 0 18px;text-align:center}
.cat-head h3{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.cat-head p{color:var(--body);font-size:.9rem;margin-top:6px;max-width:520px;margin-left:auto;margin-right:auto}
.cat-hint{color:var(--muted);font-size:.82rem;margin:0 0 16px;text-align:center}
#catalogo{display:flex;flex-direction:column;gap:10px}
.cat-acc{border:1.5px solid var(--border);border-radius:14px;background:var(--white);overflow:hidden;transition:border-color var(--t)}
.cat-acc[open]{border-color:var(--sky)}
.cat-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 20px;user-select:none}
.cat-sum::-webkit-details-marker{display:none}
.cat-sum::marker{content:''}
.cat-ico{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(58,123,181,.12);color:var(--sky)}
.cat-ico svg{width:19px;height:19px}
.cat-acc[data-cat="sangre"] .cat-ico{background:rgba(217,96,96,.14);color:#D96060}
.cat-acc[data-cat="hormonas"] .cat-ico{background:rgba(157,90,214,.16);color:#9D5AD6}
.cat-acc[data-cat="infeccion"] .cat-ico{background:rgba(100,116,139,.16);color:#64748B}
html.dark .cat-acc[data-cat="infeccion"] .cat-ico{color:#AEBCCC}
.cat-acc[data-cat="orina"] .cat-ico{background:rgba(202,138,4,.16);color:#B8860B}
html.dark .cat-acc[data-cat="orina"] .cat-ico{color:#E8B93E}
.cat-acc[data-cat="cultivos"] .cat-ico{background:rgba(47,181,157,.16);color:#2FB59D}
.cat-acc[data-cat="perfiles"] .cat-ico{background:rgba(58,123,181,.16);color:#3A7BB5}
.cat-name{flex:1;min-width:0;font-size:1rem;font-weight:700;color:var(--ink)}
.cat-count{font-size:.74rem;font-weight:600;color:var(--muted);background:var(--cream);border:1px solid var(--border);border-radius:50px;padding:3px 11px;white-space:nowrap;flex-shrink:0}
.acc-chev{color:var(--muted);flex-shrink:0;transition:transform var(--t)}
.cat-acc[open] .acc-chev{transform:rotate(180deg)}
.cat-grid{padding:2px 16px 18px}
/* el display:grid de .e-grid en un hijo directo de <details> anula el colapso nativo;
   forzar el ocultado cuando la categoría está cerrada */
.cat-acc:not([open]) .cat-grid{display:none}

/* ============================================================
   FAQ — Preguntas frecuentes (acordeón nativo <details>)
============================================================ */
#faq{background:var(--cream);padding:var(--pad) 0}
.faq-hd{margin-bottom:36px;text-align:center}
.faq-hd .ey{justify-content:center}
.faq-hd h2{color:var(--ink)}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{border:1.5px solid var(--border);border-radius:14px;background:var(--white);overflow:hidden;transition:border-color var(--t)}
.faq-item[open]{border-color:var(--sky)}
.faq-q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:17px 22px;font-weight:700;color:var(--ink);font-size:.98rem;line-height:1.4;user-select:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:''}
.faq-q .acc-chev{margin-left:auto;flex-shrink:0;color:var(--muted);transition:transform var(--t)}
.faq-item[open] .faq-q .acc-chev{transform:rotate(180deg)}
.faq-a{padding:0 22px 20px}
.faq-item:not([open]) .faq-a{display:none}
.faq-a p{color:var(--body);font-size:.92rem;line-height:1.7;margin:0}

/* ============================================================
   SECTION 06 — SUCURSALES
============================================================ */
#suc{background:var(--cream);padding:var(--pad) 0}
.suc-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.bl{display:flex;flex-direction:column;gap:14px}
.bc-tel{color:inherit;text-decoration:none}
.bc-tel:hover{color:var(--sky);text-decoration:underline}

.bc{background:var(--white);border-radius:16px;border:1.5px solid var(--border);padding:22px;cursor:pointer;transition:border-color var(--t),box-shadow var(--t)}
.bc:hover{border-color:var(--sky);box-shadow:0 4px 18px rgba(27,54,88,.08),0 10px 32px rgba(58,123,181,.16),0 0 0 1px rgba(58,123,181,.22)}
.bc--active{border-color:var(--sky);box-shadow:inset 0 0 0 2px var(--sky),0 8px 28px rgba(58,123,181,.18)}
.btn--soft{background:var(--cream);color:var(--ink);border:1.5px solid var(--border)}
.btn--soft:hover{border-color:var(--sky);color:var(--sky)}
.bc-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.bc-num{width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--white);font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bc-name{font-size:.97rem;font-weight:700;color:var(--ink)}
.bc-addr{font-size:.8rem;color:var(--muted);margin-top:3px}
.bc-meta{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;padding-left:46px}
.bc-row{display:flex;align-items:center;gap:7px;font-size:.79rem;color:var(--muted)}
.bc-row svg{color:var(--sky);flex-shrink:0}
.bc-btns{display:flex;gap:8px;flex-wrap:wrap;padding-left:46px}
.bc-btns .btn{font-size:.79rem;padding:8px 14px;border-radius:6px}

/* Columna izquierda: mapa + buscador agrupados como una sola tarjeta sticky.
   El sticky va en el grupo entero (no solo en el mapa) para que el buscador
   no se encime sobre el mapa al hacer scroll. */
.suc-side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:16px}

/* Map */
.map-ph{overflow:hidden;height:430px;background:#D0DEE9;border:1.5px solid var(--border);border-radius:16px;box-shadow:0 4px 18px rgba(27,54,88,.06)}
html.dark .map-ph{background:#1A2C40}
.map-ph iframe{width:100%;height:100%}

/* Buscador de sucursal más cercana por código postal — tarjeta propia, separada del mapa */
.cp-finder{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 4px 18px rgba(27,54,88,.06)}
.cp-lb{font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:12px}
.cp-result{font-size:.8rem;color:var(--muted);margin-top:10px;min-height:18px}
.cp-result.on{color:var(--navy);font-weight:700}
html.dark .cp-result.on{color:#6FA8D8}
.cp-result.err{color:#b3413a}
html.dark .cp-result.err{color:#FF8A83}
.bc.bc--near{border-color:var(--blue);box-shadow:0 4px 18px rgba(27,54,88,.14)}

/* ============================================================
   SECTION 07 — CONFIANZA
============================================================ */
#trust{background:var(--cream);padding:var(--pad) 0;position:relative;overflow:hidden}
.trust-in{position:relative;z-index:1}
.trust-hd{max-width:540px;margin-bottom:60px}
.trust-hd .ey{color:var(--red)}
.trust-hd h2{color:var(--ink)}
.trust-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border);padding-top:44px}
.ts{padding-right:32px;margin-right:32px;border-right:1px solid var(--border)}
.ts:last-child{border-right:none;margin-right:0;padding-right:0}
.ts-n{font-size:clamp(2.4rem,4.2vw,3.6rem);font-weight:900;background:linear-gradient(145deg,var(--navy) 0%,var(--red) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:10px;letter-spacing:-.04em}
html.dark .ts-n{background-image:linear-gradient(145deg,#6FA8D8 0%,var(--red) 100%)}
.ts-n sup{font-size:.52em;vertical-align:super;background:linear-gradient(145deg,#3FB5A0,#8FEEDD);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ts-l{font-size:.83rem;color:var(--body);line-height:1.55}

.trust-resp{margin-top:36px;display:inline-flex;align-items:center;gap:14px;
  background:var(--white);border:1px solid var(--border);border-radius:12px;padding:14px 20px}
.tr-badge{width:38px;height:38px;border-radius:50%;background:var(--red-light);
  color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tr-txt{display:flex;flex-direction:column;gap:2px;font-size:.83rem}
.tr-txt strong{color:var(--ink);font-weight:700}
.tr-txt span{color:var(--muted);font-size:.78rem}

/* ============================================================
   SECTION 08 — CTA FINAL
============================================================ */
#cta{background:var(--midnight);padding:var(--pad) 0;position:relative;overflow:hidden}
.cta-bg{position:absolute;inset:0;background:url('../img/cta-bg.jpg') center/cover no-repeat;pointer-events:none}
.cta-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,13,26,.82),rgba(5,13,26,.9))}
.cta-in{text-align:center;max-width:680px;margin:0 auto;position:relative;z-index:1}
.cta-in .ey{justify-content:center;color:#7FB4E0}
.cta-h{font-family:var(--sans);font-size:clamp(1.9rem,4vw,3.2rem);font-weight:300;line-height:1.14;letter-spacing:-.01em;color:#fff;margin-bottom:18px}
.cta-h em{font-style:italic;font-weight:300;color:rgba(255,255,255,.62)}
.cta-sub{color:rgba(255,255,255,.82);font-size:1.02rem;margin-bottom:40px;line-height:1.82;max-width:540px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
============================================================ */
footer{background:#03080F;padding:58px 0 26px;color:#fff}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px}
.f-lg{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.f-mk{width:36px;height:36px;border:1.5px solid rgba(255,255,255,.2);border-radius:7px;display:flex;align-items:center;justify-content:center}
.f-mk svg{color:rgba(255,255,255,.8)}
.f-bn{font-size:1.04rem;font-weight:800;color:#fff}
.f-ds{font-size:.83rem;color:rgba(255,255,255,.38);line-height:1.7;margin-bottom:18px}
.f-wa-btn{display:inline-flex;align-items:center;gap:7px;background:var(--wa);color:#04332E;padding:9px 18px;border-radius:7px;font-size:.83rem;font-weight:700;transition:opacity var(--t)}
.f-wa-btn:hover{opacity:.88}
.fc h4{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:16px}
.fc ul{display:flex;flex-direction:column;gap:9px}
.fc a{font-size:.83rem;color:rgba(255,255,255,.42);transition:color var(--t)}
.fc a:hover{color:#3FB5A0}
.ft-note{background:rgba(63,181,160,.08);border:1px solid rgba(63,181,160,.2);border-radius:8px;padding:12px 16px;display:flex;gap:9px;align-items:flex-start;font-size:.76rem;color:rgba(255,255,255,.4);line-height:1.62;margin-bottom:26px}
.ft-note svg{color:#3FB5A0;flex-shrink:0;margin-top:1px}
.ft-bot{border-top:1px solid rgba(255,255,255,.07);padding-top:22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.ft-bot p,.ft-bot a{font-size:.74rem;color:rgba(255,255,255,.28)}
.ft-bot a:hover{color:#3FB5A0}
/* Crédito de autoría */
.ft-credit{margin-top:14px;text-align:center;font-size:.72rem;color:rgba(255,255,255,.32)}
.ft-credit a{color:rgba(255,255,255,.5);font-weight:600;transition:color var(--t)}
.ft-credit a:hover{color:#3FB5A0}

/* ============================================================
   SCROLL PROGRESS BAR
============================================================ */
#scroll-prog{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--navy),var(--red),var(--navy));background-size:200% 100%;z-index:2001;transform-origin:left center;transform:scaleX(0);pointer-events:none;animation:progGrad 3s linear infinite}
@keyframes progGrad{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ============================================================
   PARALLAX DECORATIVE ELEMENTS (real DOM nodes, JS-animated)
============================================================ */
.prob-deco{position:absolute;top:-50px;left:-8px;font-family:var(--serif);font-size:clamp(8rem,14vw,13rem);line-height:1;color:rgba(27,54,88,.07);pointer-events:none;user-select:none;z-index:0;will-change:transform}
.intro-wm{position:absolute;right:-40px;bottom:-60px;font-size:clamp(12rem,22vw,22rem);font-weight:900;line-height:1;color:rgba(27,54,88,.05);letter-spacing:-.06em;pointer-events:none;user-select:none;font-family:var(--sans);will-change:transform}

/* ============================================================
   HERO — CAPA FOTOGRÁFICA (muy tenue, da profundidad)
============================================================ */
.h-img{position:absolute;inset:-3%;opacity:.78;pointer-events:none;will-change:transform;z-index:1}
/* Carrusel del hero: la 1a foto siempre debajo (se ve aunque la animación no corra);
   la 2a aparece y desaparece encima. 7 s cada una con fundido de 1 s. */
.h-slide{position:absolute;inset:0;background:url('../img/hero-bg.jpg?v=3') center center/cover no-repeat}
.h-slide + .h-slide{background-image:url('../img/hero-bg-2.jpg?v=1');opacity:0;animation:heroSwap 14s ease-in-out infinite}
@keyframes heroSwap{0%,43%{opacity:0}50%,93%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.h-slide + .h-slide{animation:none}}

/* Velo parejo en todo el hero para que se vea todo el equipo por igual.
   La legibilidad del texto se cuida con sombra, no oscureciendo un lado. */
.h-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background-color:rgba(5,13,26,.5);
  background-image:linear-gradient(180deg,rgba(5,13,26,.45) 0%,transparent 24%)}
/* Sombra suave para que el copy se lea sin oscurecer la foto de un lado */
.hero-q,.hero-p,.hero-in p{text-shadow:0 2px 14px rgba(3,9,18,.7),0 1px 3px rgba(3,9,18,.55)}
.hstat-n,.hstat-l{text-shadow:0 2px 10px rgba(3,9,18,.65)}

/* Glow de malla tecnológico (sutil) sobre los fondos oscuros — hero y CTA */
#hero::after,#cta::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(42% 55% at 16% 28%,rgba(58,123,181,.30),transparent 60%),
             radial-gradient(40% 52% at 84% 74%,rgba(176,45,43,.22),transparent 62%);
  background-size:170% 170%;animation:meshDrift 20s ease-in-out infinite alternate}
#hero::after{z-index:2}
#cta::after{z-index:0}
@keyframes meshDrift{0%{background-position:0% 0%}100%{background-position:100% 100%}}
@media(prefers-reduced-motion:reduce){#hero::after,#cta::after{animation:none}}

/* ============================================================
   GALERÍA SWIPER
============================================================ */
#galeria{background:var(--cream);overflow:hidden}
.gal-hd{text-align:center;padding:clamp(64px,9vw,100px) 0 44px}
.gal-hd .ey{justify-content:center;color:var(--red)}
.gal-hd h2{color:var(--ink)}
.gal-hd p{color:var(--body);margin-top:10px;font-size:.96rem;max-width:500px;margin-left:auto;margin-right:auto}
.gal-outer{overflow:hidden;padding-bottom:clamp(52px,7vw,80px)}
.gal-swiper{overflow:visible!important}
.swiper-slide.gal-slide{border-radius:14px;overflow:hidden;aspect-ratio:16/9;position:relative}
.gal-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.gal-slide:hover img{transform:scale(1.04)}
.gal-cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(8,15,28,.82));padding:32px 22px 20px;font-size:.83rem;font-weight:600;color:rgba(255,255,255,.88);opacity:0;transition:opacity .32s var(--ease)}
.gal-slide:hover .gal-cap{opacity:1}
/* Swiper overrides — midnight theme */
#galeria .swiper-pagination{bottom:0!important}
#galeria .swiper-pagination-bullet{background:rgba(13,42,82,.18);opacity:1;width:8px;height:8px}
html.dark #galeria .swiper-pagination-bullet{background:rgba(255,255,255,.22)}
#galeria .swiper-pagination-bullet-active{background:var(--red);width:22px;border-radius:4px}
#galeria .swiper-button-next,
#galeria .swiper-button-prev{color:var(--navy);width:44px;height:44px;background:var(--white);border-radius:50%;border:1px solid var(--border);box-shadow:0 4px 14px rgba(13,42,82,.12)}
#galeria .swiper-button-next::after,
#galeria .swiper-button-prev::after{font-size:14px;font-weight:800}
#galeria .swiper-button-next:hover,
#galeria .swiper-button-prev:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}

/* ============================================================
   INTRO — 2 columnas con foto
============================================================ */
.intro-2col{display:grid;grid-template-columns:1fr 360px;gap:72px;align-items:center;position:relative;z-index:1}
.intro-photo{border-radius:18px;overflow:hidden;position:relative;flex-shrink:0}
.intro-photo img{width:100%;height:100%;object-fit:cover;display:block;min-height:420px;will-change:transform}
.intro-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(27,54,88,.18) 0%,transparent 55%);pointer-events:none}
.intro-photo-badge{position:absolute;bottom:20px;left:20px;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 6px 20px rgba(13,42,82,.12)}
.ipb-ico{width:32px;height:32px;border-radius:8px;background:rgba(63,181,160,.28);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ipb-txt{font-size:.72rem;color:var(--ink);font-weight:600;line-height:1.4}
.ipb-txt span{display:block;color:#3FB5A0;font-size:.65rem;font-weight:500;margin-top:1px}
@media(max-width:1100px){.intro-2col{grid-template-columns:1fr;gap:40px}.intro-photo{min-height:0}.intro-photo img{min-height:260px;max-height:340px}}
@media(max-width:768px){.intro-photo{display:none}}

/* ============================================================
   TRUST — capa fotográfica de fondo
============================================================ */
.trust-bg-photo{position:absolute;inset:0;background:url('../img/trust-bg.jpg') center/cover no-repeat;opacity:.2;mix-blend-mode:multiply;filter:grayscale(.15);pointer-events:none}
html.dark .trust-bg-photo{mix-blend-mode:soft-light;opacity:.3;filter:grayscale(.15) brightness(1.15)}

/* ============================================================
   WHATSAPP FLOAT
============================================================ */
.waf{position:fixed;bottom:24px;right:24px;z-index:900;width:56px;height:56px;border-radius:50%;background:#3FB5A0;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(63,181,160,.48);animation:waf 3.5s ease-in-out infinite;transition:transform var(--t),box-shadow var(--t)}
.waf:hover{transform:scale(1.1)!important;animation:none;box-shadow:0 8px 26px rgba(63,181,160,.58)}
@keyframes waf{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.waf-tip{position:absolute;right:62px;background:var(--white);color:var(--ink);padding:6px 12px;border-radius:7px;font-size:.76rem;font-weight:600;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.1);opacity:0;transform:translateX(6px);transition:opacity var(--t),transform var(--t);pointer-events:none}
.waf:hover .waf-tip{opacity:1;transform:translateX(0)}

/* ============================================================
   SECTION 03.5 — HISTORIA (línea de tiempo)
============================================================ */
#historia{background:var(--cream);position:relative;overflow:hidden}
#historia .wrap{position:relative;z-index:1}
.hist-bg{position:absolute;inset:0;background:url('../img/historia-bg.jpg') center/cover no-repeat;opacity:.14;pointer-events:none}
.hist-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,242,236,.55),rgba(244,242,236,.15) 45%,rgba(244,242,236,.75))}
html.dark .hist-bg::after{background:linear-gradient(180deg,rgba(10,20,32,.6),rgba(10,20,32,.2) 45%,rgba(10,20,32,.82))}
.historia-hd{max-width:640px;margin-bottom:52px}
.historia-hd h2{color:var(--ink)}
.historia-lead{color:var(--body);margin-top:14px;font-size:1rem;font-style:italic;line-height:1.75}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;border-top:1px solid var(--border);padding-top:34px}
.tl::before{content:'';position:absolute;top:-1px;left:0;width:80px;height:1px;background:var(--red)}
.tl-item{padding-right:28px;transition:transform var(--t)}
.tl-item:last-child{padding-right:0}
.tl-item:hover{transform:translateY(-4px)}
.tl-yr{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;color:var(--red);letter-spacing:-.02em;margin-bottom:10px;font-variant-numeric:tabular-nums;transition:color var(--t)}
.tl-item:hover .tl-yr{color:var(--ink)}
.tl-item p{font-size:.85rem;color:var(--body);line-height:1.65}

/* Carrusel del equipo */
.eq-wrap{margin:0 0 44px}
.eq-swiper{overflow:hidden;border-radius:18px}
.eq-slide{position:relative;border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 6px 22px rgba(27,54,88,.09)}
.eq-slide img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.eq-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px;font-size:.82rem;font-weight:600;color:#fff;background:linear-gradient(180deg,transparent,rgba(8,16,28,.82))}
.eq-pag{position:static!important;margin-top:16px;display:flex;justify-content:center;gap:7px}
.eq-pag .swiper-pagination-bullet{width:7px;height:7px;background:var(--navy);opacity:.22;transition:opacity var(--t),width var(--t)}
.eq-pag .swiper-pagination-bullet-active{opacity:1;width:22px;border-radius:4px;background:var(--red)}
html.dark .eq-pag .swiper-pagination-bullet{background:rgba(255,255,255,.35)}
html.dark .eq-pag .swiper-pagination-bullet-active{background:var(--red)}

/* Texto de historia */
.hist-txt{max-width:680px;margin:0 0 48px}
.hist-txt p{color:var(--body);line-height:1.8;font-size:.98rem;margin-bottom:14px}
.hist-txt p:last-child{margin-bottom:0}

/* Misión y visión */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
.mv-card{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:26px 26px 28px;transition:border-color var(--t),box-shadow var(--t)}
.mv-card:hover{border-color:var(--sky);box-shadow:0 6px 24px rgba(27,54,88,.09)}
.mv-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--red-light);color:var(--red);margin-bottom:14px}
.mv-card h3{color:var(--ink);font-size:1.05rem;font-weight:700;margin-bottom:9px}
.mv-card p{color:var(--body);font-size:.92rem;line-height:1.75}

/* Valores */
.val{margin-top:34px;text-align:center}
.val-lb{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.val-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.val-pills span{font-size:.78rem;font-weight:600;color:var(--body);background:var(--white);border:1.5px solid var(--border);border-radius:50px;padding:6px 15px}

/* ============================================================
   SANI — el compañero de los niños
============================================================ */
#sani{background:var(--off-white);padding:var(--pad) 0}
.sani-grid{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:center}
.sani-art{display:flex;align-items:center;justify-content:center}
.saly-stack{position:relative;width:100%;max-width:250px;aspect-ratio:436/620;margin:0 auto;
  filter:drop-shadow(0 14px 26px rgba(27,54,88,.18));animation:salyFloat 4.5s ease-in-out infinite}
.saly-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:salyCycle 7.5s infinite}
/* La primera usa un ciclo que ARRANCA visible, para que Saly se vea aunque el
   navegador congele las animaciones (batería baja, pestaña en segundo plano). */
.saly-stack img:nth-child(1){opacity:1;animation-name:salyCycleFirst}
.saly-stack img:nth-child(2){animation-delay:2.5s}
.saly-stack img:nth-child(3){animation-delay:5s}
@keyframes salyCycleFirst{0%{opacity:1}30%{opacity:1}38%{opacity:0}95%{opacity:0}100%{opacity:1}}
@keyframes salyCycle{0%{opacity:0}4%{opacity:1}30%{opacity:1}38%{opacity:0}100%{opacity:0}}
@keyframes salyFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-11px) rotate(1.2deg)}}
@media(prefers-reduced-motion:reduce){
  .saly-stack{animation:none}
  .saly-stack img{animation:none;opacity:0}
  .saly-stack img:nth-child(1){opacity:1}
}
.sani-body h2{color:var(--ink);margin-bottom:16px}
.sani-body p{color:var(--body);line-height:1.8;font-size:.98rem;margin-bottom:13px}
.sani-body strong{color:var(--ink)}
.sani-note{font-style:italic;color:var(--muted)!important}
.sani-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 16px}
.sani-chips span{font-size:.78rem;font-weight:600;color:#8A5A22;background:rgba(201,138,75,.16);border:1.5px solid rgba(201,138,75,.3);border-radius:50px;padding:6px 15px}
html.dark .sani-chips span{color:#E5B579;background:rgba(201,138,75,.2);border-color:rgba(201,138,75,.4)}
.sani-foot{font-size:.86rem!important;color:var(--muted)!important;border-left:3px solid var(--red);padding-left:14px;margin-bottom:0!important}

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:1024px){
  .prob-grid{grid-template-columns:1fr;gap:48px}
  .suc-grid{grid-template-columns:1fr}
  .suc-side{position:static}
  .map-ph{height:270px}
  .trust-stats{grid-template-columns:repeat(2,1fr);gap:36px 0;padding-top:36px}
  .ts{border-right:none;padding-right:0;margin-right:0;padding-bottom:28px;border-bottom:1px solid var(--border)}
  .ts:nth-child(odd){border-right:1px solid var(--border);padding-right:32px;margin-right:32px}
  .ts:nth-child(3),.ts:nth-child(4){border-bottom:none;padding-bottom:0}
  .ft{grid-template-columns:1fr 1fr;gap:32px}
  .tl{grid-template-columns:1fr 1fr;row-gap:28px}
  .tl-item{padding-right:0}
  .tl-item:nth-child(odd){padding-right:28px}
}
@media(max-width:768px){
  .nav,.hd-cta{display:none}
  .ham{display:flex}
  .hero-cta{flex-direction:column;align-items:flex-start}
  .hero-cta .btn{width:100%;justify-content:center}
  .e-grid{grid-template-columns:1fr 1fr}
  .tl{grid-template-columns:1fr;row-gap:24px}
  .tl-item{padding-right:0}
  .cta-btns{flex-direction:column;align-items:center}
  .cta-btns .btn{width:100%;justify-content:center}
  /* Footer compacto en celular: 2 columnas de enlaces y menos aire */
  .ft{grid-template-columns:1fr 1fr;gap:22px 18px;margin-bottom:26px}
  .ft > div:first-child{grid-column:1/-1}
  .ft-bot{flex-direction:column;text-align:center}

  /* Misión/visión y Sani apilados */
  .mv{grid-template-columns:1fr;gap:14px;margin-top:36px}
  .sani-grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .saly-stack{max-width:180px}
  .sani-chips,.sani-body .ey{justify-content:center}
  .sani-foot{text-align:left}
}
@media(max-width:480px){
  /* Footer más corto en celular: sin descripción larga ni aviso, menos alto */
  footer{padding:30px 0 16px}
  .f-ds,.ft-note{display:none}
  .ft{gap:16px 14px;margin-bottom:18px}
  .f-wa-btn{width:100%;justify-content:center;margin-top:2px}
  .fc ul{gap:6px}
  .fc h4{margin-bottom:9px;font-size:.62rem}
  .fc a{font-size:.79rem}
  .footer-logo{height:20px}
  /* En celular, la columna de Estudios deja solo lo esencial */
  .ft > div:nth-child(2) li:nth-child(4),
  .ft > div:nth-child(2) li:nth-child(5){display:none}
  .ft-bot{padding-top:14px;gap:6px}
  .ft-bot p,.ft-bot a{font-size:.7rem}

  .hero-stats{flex-direction:column;gap:14px}
  .hstat{border-right:none;padding-right:0;margin-right:0;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
  .hstat:last-child{border-bottom:none;padding-bottom:0}
  .e-grid{grid-template-columns:1fr}
  .trust-stats{grid-template-columns:1fr}
  .ts:nth-child(odd){border-right:none;padding-right:0;margin-right:0}
  .ts{border-bottom:1px solid var(--border);padding-bottom:24px;margin-bottom:24px}
  .ts:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
  .bc-meta,.bc-btns{padding-left:0}
}

/* ============================================================
   MOBILE EXTRA — tacto, galería, cards
============================================================ */
@media(max-width:640px){
  /* Pills: scroll horizontal en lugar de romper en múltiples filas */
  .pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pills::-webkit-scrollbar{display:none}
  .pill{flex-shrink:0}

  /* Acordeón del catálogo: encabezado compacto (nombre en una línea, sin filas altas) */
  .cat-sum{gap:9px;padding:13px 14px}
  .cat-ico{width:30px;height:30px}
  .cat-ico svg{width:16px;height:16px}
  .cat-name{font-size:.84rem;line-height:1.25}
  .cat-count{font-size:.6rem;padding:2px 8px}
  .cat-grid{padding:0 12px 14px}
  .faq-q{padding:15px 16px;font-size:.9rem}
  .faq-a{padding:0 16px 18px}

  /* Botones de sucursal: apilados full-width */
  .bc-btns{flex-direction:column}
  .bc-btns .btn{width:100%;justify-content:center;font-size:.85rem}

  /* Galería: proporción 4:3 en móvil (más alto, más impactante) */
  .swiper-slide.gal-slide{aspect-ratio:4/3}
  .gal-hd{padding-top:52px;padding-bottom:32px}

  /* Hero: menos espacio vertical, headline más ajustado */
  .hero-body{padding-top:calc(clamp(90px,22vw,130px) + var(--tb-h));padding-bottom:clamp(60px,14vw,90px)}
  .hero-q{font-size:clamp(2.1rem,9.5vw,3rem)}
  .hero-sub{font-size:.93rem}
  .hero-pre{margin-bottom:18px}
  .hero-cta{margin-bottom:36px}

  /* Floating WhatsApp: un poco más grande para toque fácil */
  .waf{width:60px;height:60px;bottom:18px;right:18px}

  /* CTA section headline más compacto */
  .cta-h{font-size:clamp(1.8rem,8vw,2.4rem)}
  .cta-sub{font-size:.92rem}

  /* Prob: quote más pequeño */
  .prob-quote{font-size:clamp(1.6rem,6.5vw,2.2rem)}
  .prob-deco{font-size:clamp(5rem,20vw,8rem)}

  /* Intro watermark: más pequeño */
  .intro-wm{font-size:clamp(7rem,28vw,14rem)}

  /* Trust numbers: un poco más compactos */
  .ts-n{font-size:clamp(2rem,8vw,2.8rem)}

  /* Estudios: una columna con tarjetas más compactas */
  .e-card-body{padding:14px 16px 16px}
  .e-name{font-size:.92rem}

  /* Sucursales: más espacio entre botones */
  .bc-btns{gap:10px}

  /* Footer: columna única más compacta — */
  .ft-bot{gap:6px}
}

/* ============================================================
   CURSOR DOT — desktop only (pointer:fine)
============================================================ */
#cursor-dot{position:fixed;top:0;left:0;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(176,45,43,.55) 0%,rgba(176,45,43,.18) 55%,transparent 72%);
  filter:blur(14px);opacity:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:opacity .4s ease,width .4s var(--ease),height .4s var(--ease);will-change:left,top;display:none}
@media(hover:hover) and (pointer:fine){#cursor-dot{display:block}}
#cursor-dot.show{opacity:1}
#cursor-dot.expand{width:130px;height:130px}

/* ============================================================
   ACTIVE NAV HIGHLIGHT
============================================================ */
.nav a{position:relative}
.nav a.active{color:#fff!important}
.nav a.active::after{content:'';position:absolute;bottom:2px;left:12px;right:12px;height:2px;background:var(--red);border-radius:2px}
#hd.scrolled .nav a.active{color:var(--ink)!important}

/* ============================================================
   REDUCED MOTION — respeta la preferencia del sistema
============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-r]{opacity:1!important;transform:none!important}
}

/* ============================================================
   BARRA SUPERIOR (utility / announcement bar)
   Degradado de marca navy a rojo con un brillo que cruza cada 7s.
   Igual en claro y oscuro.
============================================================ */
.tb{position:relative;overflow:hidden;height:var(--tb-h);color:#fff;font-size:.84rem;
  background:linear-gradient(100deg,#0B1E38 0%,#1b3658 48%,#7a2433 78%,#b02d2b 100%)}
.tb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);
  transform:translateX(-100%);animation:tbShine 7s ease-in-out infinite}
@keyframes tbShine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.tb-in{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.tb-msg{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;font-size:inherit;line-height:1}
.tb-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:99px;background:#fff;color:var(--red);
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0}
.tb-dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;animation:tbPulse 2s infinite}
@keyframes tbPulse{0%{box-shadow:0 0 0 0 rgba(176,45,43,.55)}70%{box-shadow:0 0 0 6px rgba(176,45,43,0)}100%{box-shadow:0 0 0 0 rgba(176,45,43,0)}}
.tb-txt{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tb-xtra{font-weight:400;color:rgba(255,255,255,.8)}
.tb-link{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;flex-shrink:0;
  background:var(--wa);color:#04332E;font-weight:700;font-size:.76rem;transition:transform var(--t),box-shadow var(--t)}
.tb-link:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(63,181,160,.45)}
.tb-arr{transition:transform var(--t)}
.tb-link:hover .tb-arr{transform:translateX(3px)}
.tb-side{display:flex;gap:18px;flex-shrink:0}
.tb-side a{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.88);font-weight:500;transition:color var(--t)}
.tb-side a:hover{color:#fff}
.bc-new{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 8px;border-radius:99px;background:var(--red);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* celular y tablet: dos renglones, anuncio arriba y contacto abajo */
@media(max-width:900px){:root{--tb-h:72px}.tb-in{flex-direction:column;justify-content:center;gap:6px}.tb-side{gap:18px;font-size:.92em}
  .tb{background:linear-gradient(160deg,#0B1E38 0%,#1b3658 55%,#8a2632 100%)}}
/* celular: renglón 1 = aviso completo tocable (sin botón aparte); renglón 2 = contacto separado */
@media(max-width:640px){:root{--tb-h:80px}.tb{font-size:.76rem}.tb-xtra,.tb-link{display:none}.tb-in{padding:0 12px;gap:10px}
  .tb-msg{gap:9px;justify-content:center;cursor:pointer}
  .tb-badge{padding:4px 9px 4px 7px;font-size:.62rem}
  .tb-txt::after{content:"\203A";margin-left:6px;color:var(--wa);font-weight:800;font-size:1.15em}
  .tb-side{gap:0;font-size:.95em}
  .tb-side a + a{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.28)}}
@media(prefers-reduced-motion:reduce){.tb-dot,.tb::after{animation:none}}