/* ESCOLUMNA v9. Clinica profesional: blanco, azul y verde del logo, tipografia formal, mucho aire. Contenido visible por defecto. */
:root{
  color-scheme:light;
  --navy:#201269; --navy-2:#2E1C8F; --blue:#5DA1D3; --teal:#63B0A8;
  --blue-ink:#2A6896; --teal-ink:#26726B;
  --ink:#14113A; --text:#363B58; --muted:#596080;
  --white:#fff; --tint:#F1F7F8; --tint-2:#ECF3FA; --line:#E1E7EF; --line-strong:#C6CFDC;
  --font:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --r:16px; --r-lg:28px; --r-pill:999px;
  --container:1200px; --gutter:clamp(1.25rem,4.5vw,3rem);
  --header-h:76px; --util-h:40px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgb(20 17 58 / .05),0 18px 40px -26px rgb(32 18 105 / .35);
  --shadow-lg:0 2px 6px rgb(20 17 58 / .06),0 36px 70px -36px rgb(32 18 105 / .45);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px);overflow-x:clip}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;color:var(--text);background:var(--white);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--navy);text-underline-offset:.2em}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:80;background:var(--navy);color:#fff;padding:.75rem 1rem;border-radius:10px;text-decoration:none}
.skip-link:focus{top:1rem}
.container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
section[id]{scroll-margin-top:calc(var(--header-h) + 8px)}

/* Iconos */
.ic{width:1.25em;height:1.25em;flex:none;fill:currentColor}
.ic--lg{width:1.6em;height:1.6em}
.tile{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:14px;color:#fff;background:radial-gradient(130% 120% at 108% 50%,var(--teal) 0 54%,transparent 55%),var(--blue);box-shadow:0 10px 20px -12px rgb(42 104 150 / .7)}
.tile .ic{width:26px;height:26px}
.tile--sm{width:44px;height:44px;border-radius:12px}
.tile--sm .ic{width:22px;height:22px}

/* Tipografia */
h1,h2,h3{font-family:var(--display);color:var(--navy);text-wrap:balance;font-weight:600}
h1{font-size:clamp(2.3rem,4.8vw,4rem);line-height:1.06;letter-spacing:-.018em;font-weight:700}
h2{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.12;letter-spacing:-.012em;max-width:20ch}
h3{font-size:1.2rem;line-height:1.3}
p{max-width:62ch;text-wrap:pretty}
.lead{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.6;color:var(--text);max-width:56ch}
.note{margin-top:1.75rem;font-size:.95rem;color:var(--muted)}

/* Botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.7rem 1.5rem;border-radius:var(--r-pill);font:inherit;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;border:2px solid transparent;transition:transform .25s var(--ease),background-color .2s,box-shadow .3s,color .2s,border-color .2s}
.btn .ic{width:1.3em;height:1.3em}
.btn--primary{background:var(--navy);color:#fff;box-shadow:0 14px 26px -16px rgb(32 18 105 / .85)}
.btn--primary:hover{background:var(--navy-2);color:#fff;transform:translateY(-2px);box-shadow:0 20px 32px -16px rgb(32 18 105 / .9)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--navy);background:var(--tint-2)}
.btn--light{background:#fff;color:var(--navy);box-shadow:0 16px 30px -18px rgb(0 0 0 / .55)}
.btn--light:hover{background:var(--tint-2);color:var(--navy);transform:translateY(-2px)}
.btn--lg{min-height:56px;padding-inline:1.75rem}
.btn--sm{min-height:44px;padding:.45rem 1.1rem;font-size:.95rem}
.btn:active{transform:translateY(1px) scale(.985)}
@media (hover:hover){.btn .ic:last-child:not(:first-child){transition:transform .3s var(--ease)}.btn:hover .ic:last-child:not(:first-child){transform:translateX(4px)}}

/* Barra superior y cabecera */
.utility{display:none;background:var(--navy);color:#fff;font-size:.88rem}
.utility__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--util-h)}
.utility a{color:#fff;text-decoration:none}
.utility a:hover{text-decoration:underline}
.utility span,.utility a{display:inline-flex;align-items:center;gap:.5rem}
@media (min-width:900px){.utility{display:block}}
.site-header{position:sticky;top:0;z-index:50;background:rgb(255 255 255 / .96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 10px 30px -20px rgb(20 17 58 / .4)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--navy);min-height:48px}
.brand__mark{width:62px;height:auto;border-radius:6px}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--cond);font-size:1.7rem;font-weight:300;letter-spacing:.04em;color:var(--navy)}
.brand__name b{font-weight:700}
.brand__sub{margin-top:.2rem;font-size:.78rem;font-weight:500;color:var(--muted);letter-spacing:.02em}
.nav-toggle{display:none;align-items:center;gap:.6rem;min-height:46px;padding:0 1.05rem;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:#fff;color:var(--navy);font:inherit;font-weight:600;cursor:pointer}
.nav-toggle__bars{position:relative;width:18px;height:2px;background:currentColor;transition:background .2s}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.nav-toggle__bars::before{top:-6px}.nav-toggle__bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}
.nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem}
.nav-list a:not(.btn){display:flex;align-items:center;min-height:44px;padding:0 .75rem;border-radius:var(--r-pill);text-decoration:none;color:var(--text);font-weight:500;font-size:.95rem;white-space:nowrap;transition:background-color .2s,color .2s}
.nav-list a:not(.btn):hover{background:var(--tint-2);color:var(--navy)}
.nav-list a[aria-current="true"]:not(.btn){color:var(--navy);background:var(--tint-2);font-weight:600}
.nav-list li:last-child{margin-left:.5rem}
html:not(.js) .site-header{position:static}
html:not(.js) .header-in{flex-direction:column;align-items:flex-start;padding-block:.75rem}
@media (max-width:1179px){
  .js .nav-toggle{display:inline-flex}
  .js .site-nav{position:fixed;left:0;right:0;top:var(--header-h);z-index:49;background:#fff;border-bottom:1px solid var(--line);padding:.5rem var(--gutter) 1.25rem;max-height:calc(100dvh - var(--header-h));overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:transform .3s var(--ease),opacity .25s,visibility 0s .3s}
  .js .site-nav.is-open{transform:none;opacity:1;visibility:visible;transition:transform .3s var(--ease),opacity .25s}
  .js .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .js .nav-list a:not(.btn){min-height:54px;font-size:1.05rem;border-radius:0;border-bottom:1px solid var(--line);padding:0 .25rem}
  .js .nav-list li:last-child{margin:1rem 0 0}
  .js .nav-list .btn{width:100%;min-height:54px}
}
.topline{position:fixed;left:0;right:0;top:0;height:3px;z-index:90;background:linear-gradient(90deg,var(--blue),var(--teal));transform-origin:0 50%;transform:scaleX(0)}

/* Secciones */
.sec{padding-block:clamp(4.5rem,9vw,8rem)}
.sec--tint{background:var(--tint)}
@media (min-width:1024px) and (min-height:640px){
  html{scroll-snap-type:y proximity}
  .sec{min-height:min(100svh,880px);display:flex;align-items:center;scroll-snap-align:start}
  .sec>.container{width:100%}
}

/* Hero */
.hero{position:relative;padding-block:clamp(2rem,5vw,3.5rem) clamp(2.5rem,5vw,4rem);background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);overflow:clip}
.hero__grid{display:grid;gap:2.5rem;align-items:center}
.hero__copy h1{max-width:13ch}
.hero__copy .lede{margin-top:1.4rem;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;max-width:34ch;color:var(--text)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__offer{display:flex;align-items:center;gap:.6rem;margin-top:1.5rem;font-size:.97rem;font-weight:500;color:var(--teal-ink)}
.hero__offer .ic{width:1.4em;height:1.4em}
.hero__stage{position:relative;width:min(100%,440px);aspect-ratio:4/5;justify-self:center;margin-top:3.5rem}
.hero__frame{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero__frame svg{width:100%;height:100%}
.f-blue{fill:var(--blue)}.f-teal{fill:var(--teal)}
.hero__dr{position:absolute;left:0;right:0;bottom:0;height:112%;display:flex;align-items:flex-end;justify-content:center;clip-path:inset(-12% -12% 0 -12% round 0 0 var(--r-lg) var(--r-lg))}
.hero__dr img{height:100%;width:auto;max-width:none}
.hero__card{position:absolute;left:-1.25rem;bottom:2rem;display:flex;align-items:center;gap:.8rem;padding:.85rem 1.2rem .85rem .9rem;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-lg);z-index:2}
.hero__card .ic{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--tint-2);color:var(--navy)}
.hero__card b{display:block;font-family:var(--display);font-size:1.35rem;line-height:1.1;color:var(--navy)}
.hero__card span{display:block;font-size:.82rem;line-height:1.3;color:var(--muted);max-width:15ch}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:4rem}
  .hero__stage{justify-self:end;margin-top:0}
}
@media (min-width:1024px) and (min-height:640px){
  .hero{min-height:calc(100svh - var(--header-h) - var(--util-h));display:flex;align-items:center}
  .hero .container{width:100%}
  .hero__stage{width:min(100%,calc(min(66svh,600px) * .8))}
}

/* Credenciales */
.trust{border-block:1px solid var(--line);background:#fff}
.trust__in{display:grid;gap:0}
.trust__item{display:flex;align-items:center;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--line)}
.trust__item:first-child{border-top:0}
.trust__item .ic{color:var(--blue-ink)}
.trust__item b{display:block;font-size:1rem;color:var(--ink);line-height:1.3}
.trust__item span{font-size:.9rem;color:var(--muted)}
@media (min-width:800px){
  .trust__in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust__item{padding:1.8rem 1.5rem;border-top:0;border-left:1px solid var(--line)}
  .trust__item:first-child{border-left:0;padding-left:0}
}

/* Sintomas */
.sym__grid{display:grid;gap:3rem}
.sym__head>*+*{margin-top:1.4rem}
.sym{display:grid;gap:0 2.5rem}
.sym__item{display:flex;gap:1.1rem;align-items:flex-start;padding:1.35rem 0;border-top:1px solid var(--line)}
.sym__item:first-child{border-top:0}
.sym__item h3{font-family:var(--font);font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.3}
.sym__item p{margin-top:.3rem;font-size:.96rem;color:var(--muted);line-height:1.5}
@media (min-width:640px){.sym{grid-template-columns:repeat(2,minmax(0,1fr))}.sym__item:nth-child(2){border-top:0}}
@media (min-width:1000px){.sym__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:5rem;align-items:center}}

/* Cirugia */
.cir__head{display:grid;gap:1.25rem 4rem;align-items:end;margin-bottom:3rem}
@media (min-width:900px){.cir__head{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.pillars{display:grid;gap:2rem}
.pillar{padding-top:1.5rem;border-top:3px solid var(--navy)}
.pillar .tile{margin-bottom:1.1rem}
.pillar h3{font-size:1.45rem;margin-bottom:.6rem}
.pillar p{color:var(--text);max-width:34ch}
@media (min-width:800px){.pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem}}

/* Valoracion */
.val__grid{display:grid;gap:3rem}
.val__head>*+*{margin-top:1.4rem}
.offer{display:grid;gap:1.25rem;padding:1.6rem;border-radius:var(--r-lg);background:var(--navy);color:#fff;max-width:440px;box-shadow:var(--shadow-lg)}
.offer__t{display:flex;align-items:center;gap:.8rem;font-size:1.05rem;line-height:1.35}
.offer__t .ic{color:var(--teal)}
.offer .btn{justify-self:start}
.tl{position:relative;display:grid;gap:1.1rem;padding-left:3.6rem}
.tl::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:0;border-left:2px dashed var(--line-strong)}
.tl::after{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--teal);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .8s var(--ease)}
.tl__item{position:relative}
.tl__node{position:absolute;left:-3.6rem;top:.7rem;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--line-strong);display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--navy);z-index:1;transition:background-color .4s,border-color .4s,color .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.tl__node .tl__ck{position:absolute;width:22px;height:22px;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.tl__item.is-done .tl__node{background:var(--teal);border-color:var(--teal);color:#fff}
.tl__item.is-done .tl__n{opacity:0}
.tl__item.is-done .tl__ck{transform:scale(1)}
.tl__item.is-active .tl__node{border-color:var(--navy);transform:scale(1.08)}
.tl__card{display:flex;gap:1.1rem;align-items:flex-start;padding:1.25rem 1.4rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s}
@media (hover:hover){.tl__card:hover{transform:translateX(4px);box-shadow:var(--shadow-lg)}}
.tl__card h3{font-size:1.15rem;margin-bottom:.25rem}
.tl__card p{font-size:.97rem;color:var(--muted)}
@media (min-width:1000px){.val__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:5rem;align-items:center}}

/* Testimonios: videos 9:16, slider automatico sin barra */
.vwrap{position:relative}
.vrail{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:.3rem 0 .5rem}
.vrail::-webkit-scrollbar{display:none}
.vcard{flex:0 0 min(62vw,240px);scroll-snap-align:start}
.video{position:relative;aspect-ratio:9/16;max-height:62svh;border-radius:var(--r);overflow:hidden;background:#0c0c10;box-shadow:var(--shadow-lg)}
.video__btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.video__btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgb(20 17 58 / .55))}
.video__btn img,.video iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;transition:transform .8s var(--ease)}
@media (hover:hover){.video__btn:hover img{transform:scale(1.05)}}
.video__play{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 16px 32px -12px rgb(0 0 0 / .6);transition:transform .3s var(--ease)}
.video__play .ic{width:24px;height:24px;margin-left:3px}
@media (hover:hover){.video__btn:hover .video__play{transform:scale(1.1)}}
.video__btn:focus-visible{outline-offset:-4px;outline-color:#fff}
.video__fallback{position:absolute;inset:auto 0 0 0;background:var(--navy);color:#fff;padding:.9rem;text-align:center}
.vcard__title{margin-top:.7rem;font-weight:600;color:var(--ink);font-size:.92rem;line-height:1.4}
.vnav{display:none}
.js .vnav{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.vnav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-strong);background:#fff;cursor:pointer;color:var(--navy);display:grid;place-items:center;transition:background-color .2s,color .2s}
.vnav button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.vnav .ic{width:20px;height:20px}
.vnav__pp{display:inline-flex;align-items:center;gap:.4rem;height:46px;padding:0 1rem;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:#fff;color:var(--navy);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.vnav__pp:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.vnav__pp .ic{width:1.1em;height:1.1em}
@media (min-width:640px){.vcard{flex-basis:calc((100% - 2.2rem) / 3)}}
@media (min-width:1000px){.vcard{flex-basis:calc((100% - 3.3rem) / 4)}}
.quotes{display:grid;gap:1.1rem;margin-top:3rem}
.quote{position:relative;padding:1.6rem 1.6rem 1.4rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.qmark{width:34px;height:34px;color:var(--teal);margin-bottom:.8rem}
.quote p{font-family:var(--display);font-size:1.1rem;line-height:1.5;color:var(--ink)}
.quote footer{margin-top:1rem;font-weight:600;font-size:.92rem;color:var(--muted)}
@media (min-width:800px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Doctor */
.dr__grid{display:grid;gap:3rem;align-items:center}
.dr__photo{position:relative;width:min(100%,430px);justify-self:center}
.dr__shape{position:absolute;inset:8% -8% -6% 10%;border-radius:var(--r-lg);background:radial-gradient(130% 120% at 108% 50%,var(--teal) 0 54%,transparent 55%),var(--blue)}
.dr__photo picture{position:relative;display:block}
.dr__photo img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.dr__info>*+*{margin-top:1.5rem}
.dr__quote{font-family:var(--display);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.45;color:var(--ink);max-width:36ch;padding-left:1.25rem;border-left:3px solid var(--teal)}
.creds{display:grid;gap:1rem}
.creds li{display:flex;gap:1rem;align-items:flex-start;color:var(--muted);font-size:.95rem;line-height:1.45}
.creds .ic{color:var(--blue-ink);width:34px;height:34px;padding:7px;border-radius:10px;background:var(--tint-2)}
.creds b{display:block;color:var(--ink);font-size:1rem}
@media (min-width:900px){.dr__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:5rem}}

/* Preguntas */
.faq__grid{display:grid;gap:2.5rem}
.faq__head>*+*{margin-top:1.2rem}
.faq{display:grid;gap:.7rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:border-color .25s,box-shadow .3s}
.faq details[open]{border-color:var(--teal);box-shadow:var(--shadow)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;padding:.7rem 1.1rem .7rem 1.4rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--font);font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.4}
.faq__pm{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--tint-2);color:var(--navy);transition:transform .4s var(--ease),background-color .25s,color .25s}
.faq__pm .ic{width:16px;height:16px}
.faq details[open] .faq__pm{transform:rotate(135deg);background:var(--navy);color:#fff}
.faq .a{padding:0 1.4rem 1.3rem}
.faq .a p{font-size:.98rem}
@media (min-width:1000px){.faq__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:5rem;align-items:center}}

/* Ubicacion: mapa grande con tarjeta */
.loc{position:relative;background:var(--tint)}
.loc__map{width:100%;height:clamp(440px,64svh,620px);border:0;display:block}
.loc__wrap{position:relative;padding-block:0 2.5rem}
.loc__card{position:relative;margin-top:-5rem;max-width:460px;padding:1.8rem;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.loc__card h2{font-size:1.6rem;max-width:18ch;margin-bottom:1.1rem}
.loc__rows{display:grid;gap:1rem}
.loc__rows li{display:flex;gap:.9rem;align-items:flex-start;line-height:1.5;font-size:.97rem}
.loc__rows .ic{width:38px;height:38px;padding:8px;border-radius:11px;background:var(--tint-2);color:var(--blue-ink)}
.loc__rows b{display:block;color:var(--ink)}
.ph{font-variant-numeric:tabular-nums;display:inline !important}
.loc__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
@media (min-width:900px){
  .loc__wrap{position:absolute;inset:0;padding:0;display:flex;align-items:center;pointer-events:none}
  .loc__wrap .loc__card{margin-top:0;pointer-events:auto}
}

/* Cierre */
.cta-band{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding-block:clamp(3.5rem,7vw,5.5rem)}
.cta-band::after{content:"";position:absolute;right:-60px;top:-30%;bottom:-30%;width:min(46%,520px);background:radial-gradient(130% 120% at 108% 50%,var(--teal) 0 54%,transparent 55%),var(--blue);opacity:.9;border-radius:var(--r-lg) 0 0 var(--r-lg);transform:skewX(-6deg)}
.cta-band__in{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.75rem}
.cta-band h2{color:#fff;max-width:none}
.cta-band p{margin-top:.5rem;color:rgb(255 255 255 / .9);font-size:1.1rem}
@media (max-width:700px){.cta-band::after{display:none}}

/* Pie */
.footer{background:#fff;border-top:1px solid var(--line);padding-block:3rem 4.5rem;font-size:.95rem;color:var(--text)}
.footer__in{display:grid;gap:2rem;align-items:center}
.footer__logo{width:180px;height:auto}
.footer__title{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--navy)}
.footer address{font-style:normal;margin-top:.6rem}
.footer__txt p+p{margin-top:.4rem}
.footer__meta{margin-top:1.4rem !important;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
@media (min-width:800px){.footer__in{grid-template-columns:200px minmax(0,1fr);gap:3rem}}

/* Boton flotante de WhatsApp: siempre visible */
.fab-wa{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-width:60px;height:60px;padding:0 1.05rem;border-radius:var(--r-pill);background:#13884A;color:#fff;font-weight:700;font-size:.98rem;text-decoration:none;box-shadow:0 18px 36px -12px rgb(19 136 74 / .7),0 0 0 1px rgb(255 255 255 / .25) inset;transition:transform .3s var(--ease),background-color .2s}
.fab-wa:hover{background:#0F7440;color:#fff;transform:translateY(-3px)}
.fab-wa .ic{width:30px;height:30px}
.fab-wa__label{display:none;white-space:nowrap}
@media (min-width:700px){.fab-wa{right:1.5rem;bottom:1.5rem;padding:0 1.4rem 0 1.15rem}.fab-wa__label{display:inline}}

/* Efectos de aparicion: el contenido es visible por defecto; JS activa .reveal-ready */
.reveal{--tx:0px;--ty:26px;--sc:1}
.reveal[data-fx="left"]{--tx:-46px;--ty:0px}
.reveal[data-fx="right"]{--tx:46px;--ty:0px}
.reveal[data-fx="zoom"]{--ty:22px;--sc:.95}
.reveal[data-fx="clip"]{--ty:0px;--sc:1}
.reveal-ready .reveal:not(.is-in){opacity:0;transform:translate3d(var(--tx),var(--ty),0) scale(var(--sc))}
.reveal-ready .reveal[data-fx="clip"]:not(.is-in){clip-path:inset(0 0 100% 0 round 28px)}
.reveal-ready .reveal{transition:opacity .85s var(--ease),transform .95s var(--ease),clip-path 1.15s var(--ease);transition-delay:var(--d,0s)}
.reveal-ready .reveal.is-in{opacity:1;transform:none}
.reveal-ready .reveal[data-fx="clip"].is-in{clip-path:inset(-12% -12% 0 -12% round 28px)}
.reveal-ready .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.reveal-ready .split .w>span{display:inline-block;transform:translateY(115%);transition:transform .95s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i) * .06s + var(--d,0s))}
.reveal-ready .split.is-in .w>span{transform:none}
.reveal-ready .split.reveal:not(.is-in){opacity:1;transform:none}
html.fx-soft .reveal{--tx:0px;--ty:10px;--sc:1}
html.fx-soft .reveal-ready .reveal[data-fx="clip"]:not(.is-in){clip-path:none}
html.fx-soft .reveal-ready .reveal{transition-duration:.7s,.7s,.01ms}
html.fx-soft .reveal-ready .split .w>span{transform:none;opacity:0;transition:opacity .8s;transition-delay:calc(var(--i) * .05s)}
html.fx-soft .reveal-ready .split.is-in .w>span{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:float 6s ease-in-out infinite alternate}
  @keyframes float{to{transform:translateY(-10px)}}
  .fab-wa::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #13884A;animation:fabping 2.6s var(--ease) infinite;pointer-events:none}
  @keyframes fabping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.3,1.45);opacity:0}}
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .topline{animation:grow linear both;animation-timeline:scroll(root)}
    @keyframes grow{to{transform:scaleX(1)}}
    .hero__dr img{animation:parh linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes parh{to{transform:translateY(34px)}}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.topline{display:none}}


/* ===== v10: componentes 21st.dev portados: Animated Grid, Shimmer Button, Scroll Reveal Content (historia fijada), Us vs Them, Scroll Reveal Image ===== */
:root{--grid:rgb(93 161 211 / .22);--glow:#5DA1D3}

/* Animated Grid (rmahammad): cuadricula CSS que deriva, con resplandor y mascara radial */
.hero__bg,.story__bg,.cta__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 36%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 42%,#000 36%,transparent 80%)}
.grid,.grid__glow{position:absolute}
.grid{inset:-144px;background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);background-size:36px 36px;animation:gridDrift 26s linear infinite}
.grid__glow{inset:0;background:radial-gradient(45% 45% at 50% 42%,color-mix(in oklab,var(--glow) 28%,transparent),transparent 70%);animation:gridPulse 9s ease-in-out infinite}
@keyframes gridDrift{to{background-position:144px 144px}}
@keyframes gridPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.12);opacity:1}}
@media (prefers-reduced-motion:reduce){.grid,.grid__glow{animation:none}}

/* Shimmer Button (magicui): destello que recorre el perimetro */
.btn--shimmer{isolation:isolate;overflow:hidden;--sh:#8FD6CC;--bg:var(--navy)}
.btn--light.btn--shimmer{--sh:#5DA1D3;--bg:#fff}
.btn--shimmer::before{content:"";position:absolute;inset:-160% -30%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 72%,var(--sh) 86%,transparent 100%);animation:shimSpin 3.4s linear infinite}
.btn--shimmer::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:inherit;background:var(--bg);box-shadow:inset 0 -8px 12px rgb(255 255 255 / .10)}
.btn--light.btn--shimmer::after{box-shadow:inset 0 -8px 12px rgb(32 18 105 / .06)}
@keyframes shimSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn--shimmer::before{animation:none;opacity:.5}}

/* Hero: tarjetas flotantes y fondo */
.hero{isolation:isolate}
.hero__bg{z-index:-1}
.hero__card--b{left:auto;right:-1.25rem;top:2.5rem;bottom:auto}
@media (prefers-reduced-motion:no-preference){.hero__card--b{animation:float 7s ease-in-out -2s infinite alternate}}
@media (max-width:640px){.hero__card--a{left:-.4rem}.hero__card--b{right:-.4rem}}

/* Cifras */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.stat{padding:1.8rem 1.25rem;border-top:1px solid var(--line)}
.stat:nth-child(-n+2){border-top:0}
.stat:nth-child(even){border-left:1px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:600;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.stat .stat__txt{font-size:clamp(1.7rem,3vw,2.3rem);padding-top:.35rem}
.stat span{display:block;margin-top:.55rem;font-size:.93rem;line-height:1.4;color:var(--muted);max-width:24ch}
@media (min-width:900px){
  .stats__in{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stat{padding:2.4rem 1.75rem;border-top:0;border-left:1px solid var(--line)}
  .stat:first-child{border-left:0;padding-left:0}
}

/* Fondos de seccion */
.sec--dots{position:relative}
.sec--dots::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgb(93 161 211 / .28) 1.3px,transparent 1.3px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse at 20% 30%,#000 0,transparent 62%);mask-image:radial-gradient(ellipse at 20% 30%,#000 0,transparent 62%);pointer-events:none}
.sec--dots>.container{position:relative}
.sec--tint{border-radius:clamp(26px,4vw,56px);margin-inline:clamp(0px,1.5vw,20px)}

/* Sintomas con silueta */
.sym__grid{display:grid;gap:2.5rem}
.body{margin:0;display:grid;gap:1rem;justify-items:center}
.body__card{position:relative;width:min(100%,360px);padding:1.6rem 1rem 1rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);background-image:radial-gradient(rgb(93 161 211 / .18) 1.2px,transparent 1.2px);background-size:20px 20px}
.body__svg{width:100%;max-width:300px;height:auto;margin-inline:auto}
.body__fig *{fill:#D9E7F3}
.body__spine rect{fill:#fff;stroke:#9DBBD6;stroke-width:1.5}
.body__spine .hot{fill:var(--navy);stroke:none}
.body__path{fill:none;stroke:url(#gpain);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.body__dot{fill:#fff;stroke:var(--navy);stroke-width:3.5}
.body__tag{position:absolute;padding:.3rem .7rem;border-radius:var(--r-pill);background:var(--navy);color:#fff;font-size:.78rem;font-weight:600;white-space:nowrap;box-shadow:0 10px 18px -10px rgb(32 18 105 / .7)}
.body__tag--a{left:.4rem;top:42%}
.body__tag--b{right:.2rem;top:52%}
.body__tag--c{right:.2rem;top:79%}
.body figcaption{max-width:34ch;text-align:center;font-size:.93rem;color:var(--muted)}
.reveal-ready .body:not(.is-in) .body__path{stroke-dashoffset:1}
.reveal-ready .body .body__path{transition:stroke-dashoffset 2.2s var(--ease) .6s}
.reveal-ready .body:not(.is-in) .body__dot,.reveal-ready .body:not(.is-in) .body__tag{opacity:0}
.reveal-ready .body .body__dot,.reveal-ready .body .body__tag{transition:opacity .6s .9s}
@media (prefers-reduced-motion:no-preference){
  .body__dot{transform-box:fill-box;transform-origin:center;animation:dotPulse 2.2s ease-in-out infinite}
  .body__dot--b{animation-delay:.5s}.body__dot--c{animation-delay:1s}
  @keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
}
@media (min-width:1000px){.sym__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:5rem;align-items:center}.sym__main>*+*{margin-top:1.75rem}}
.sym__main h2{max-width:18ch}
.sym__main .sym{margin-top:1.75rem}

/* Historia fijada: ¿Que es una hernia de disco? (Scroll Reveal Content, abui) */
.story{position:relative;background:var(--navy);color:#fff;--grid:rgb(255 255 255 / .09);--glow:#63B0A8;isolation:isolate}
.story__bg{z-index:-1}
.story__wrap{display:flex;align-items:flex-start}
.story__stage{position:sticky;top:var(--header-h);flex:1;min-width:0;height:calc(100svh - var(--header-h));display:flex;align-items:center}
.story__spacer{flex:none;width:1px;height:300svh}
.story__spacer i{display:block;height:100svh}
.story__in{display:grid;gap:1rem;align-items:center;width:100%}
.story__text h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.9rem)}
.story__steps{display:grid;gap:1.1rem;margin-top:1.6rem}
.story__step{display:flex;gap:1rem;opacity:.38;transition:opacity .5s}
.story__step.is-on,.story__step.is-done{opacity:1}
.story__bar{position:relative;flex:none;width:3px;border-radius:3px;overflow:hidden;background:rgb(255 255 255 / .2)}
.story__bar i{position:absolute;inset:0;background:var(--teal);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease)}
.story__step.is-on .story__bar i,.story__step.is-done .story__bar i{transform:scaleY(1)}
.story__step h3{color:#fff;font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:.3rem}
.story__step p{color:rgb(255 255 255 / .84);font-size:clamp(.96rem,1.2vw,1.08rem);max-width:40ch}
.story__art{display:grid;place-items:center}
.disc__svg{width:min(100%,500px);max-height:66svh;height:auto;filter:drop-shadow(0 24px 40px rgb(0 0 0 / .28))}
.disc__svg .vert{fill:#DCEBF7}
.disc__svg .disc__base{fill:var(--blue);transition:fill .6s}
.disc__svg .disc__bulge{fill:var(--blue);transform-box:fill-box;transform-origin:left center;transform:scale(0);transition:transform .8s cubic-bezier(.34,1.3,.64,1),fill .6s}
.disc__nerve path{fill:none;stroke:#E6F2F9;stroke-width:7;stroke-linecap:round;transition:opacity .7s}
.disc__nerve .n-hit{opacity:0;stroke:#8FD6CC}
.disc__pain circle{fill:none;stroke:#8FD6CC;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
.story[data-step="2"] .disc__bulge,.story[data-step="3"] .disc__bulge{transform:scale(1);fill:var(--teal)}
.story[data-step="2"] .n-ok,.story[data-step="3"] .n-ok{opacity:0}
.story[data-step="2"] .n-hit,.story[data-step="3"] .n-hit{opacity:1}
.story[data-step="3"] .disc__pain circle{opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .story[data-step="3"] .disc__pain circle{animation:painRing 2.4s ease-out infinite}
  .story[data-step="3"] .disc__pain circle:nth-child(2){animation-delay:.5s}
  .story[data-step="3"] .disc__pain circle:nth-child(3){animation-delay:1s}
  @keyframes painRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.15);opacity:0}}
}
@media (min-width:900px){
  .story__in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:4rem}
  .disc__svg{max-height:62svh;width:min(100%,420px)}
}

/* Us vs Them (olewandowski1) */
.vs{display:grid;gap:1.1rem;margin-top:3.5rem}
.vs__card{position:relative;padding:1.8rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.vs__card header{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.vs__card h3{font-size:1.35rem}
.vs__badge{padding:.2rem .7rem;border-radius:var(--r-pill);background:var(--tint-2);color:var(--navy);font-size:.76rem;font-weight:700;letter-spacing:.04em}
.vs__card ul{display:grid;gap:.9rem}
.vs__card li{display:flex;gap:.8rem;align-items:flex-start;line-height:1.45}
.vs__card li .ic{width:24px;height:24px;padding:5px;border-radius:50%;margin-top:.05em}
.vs__card--us{border:2px solid var(--teal);box-shadow:var(--shadow-lg)}
.vs__card--us li .ic{background:var(--teal);color:#fff}
.vs__card--us .btn{margin-top:1.6rem}
.vs__card--them{background:rgb(255 255 255 / .6);color:var(--muted)}
.vs__card--them h3{color:var(--muted)}
.vs__card--them li .ic{background:var(--line);color:var(--muted)}
.vs__card--them p{margin-top:1.4rem;font-size:.92rem}
@media (min-width:860px){.vs{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:stretch}}

/* Cierre con tarjeta que se expande al entrar (Scroll Reveal Image) */
.cta{padding:2rem clamp(.75rem,2vw,1.5rem) clamp(3rem,6vw,5rem);background:#fff}
.cta__card{position:relative;overflow:hidden;isolation:isolate;max-width:1360px;margin-inline:auto;border-radius:clamp(28px,4vw,56px);background:var(--navy);color:#fff;padding-block:clamp(3.5rem,8vw,6rem);--grid:rgb(255 255 255 / .09);--glow:#5DA1D3}
.cta__bg{z-index:-1}
.cta__in{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.75rem}
.cta__txt h2{color:#fff;max-width:none;font-size:clamp(2rem,4.2vw,3.4rem)}
.cta__txt p{margin-top:.6rem;color:rgb(255 255 255 / .9);font-size:1.15rem}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cta__card{animation:ctaGrow linear both;animation-timeline:view();animation-range:entry 5% entry 95%}
    @keyframes ctaGrow{from{transform:scale(.9);border-radius:64px}to{transform:scale(1)}}
  }
}
.cta-band{display:none}

/* v10.1: mas aire entre secciones y bloques */
.sec{padding-block:clamp(6rem,12vw,11rem)}
.cir__head{margin-bottom:clamp(3.5rem,6vw,5rem)}
.sym__grid{gap:clamp(3rem,6vw,6rem)}
.sym__item{padding-block:1.6rem}
.sym__main>*+*{margin-top:2.25rem}
.pillars{gap:clamp(2.5rem,4vw,4rem)}
.vs{margin-top:clamp(4rem,7vw,6rem);gap:1.6rem}
.vs__card{padding:2.2rem}
.val__grid{gap:clamp(3.5rem,6vw,6rem)}
.tl{gap:1.5rem}
.tl__card{padding:1.5rem 1.6rem}
.quotes{margin-top:clamp(3.5rem,6vw,5rem);gap:1.5rem}
.quote{padding:2rem}
.vwrap{margin-top:.5rem}
.dr__grid{gap:clamp(3.5rem,6vw,6rem)}
.dr__info>*+*{margin-top:2rem}
.creds{gap:1.35rem}
.faq__grid{gap:clamp(3rem,6vw,6rem)}
.faq{gap:1rem}
.faq summary{min-height:72px}
.stat{padding-block:2.2rem}
.cta{padding-top:clamp(3rem,6vw,5rem)}
.hero__grid{gap:clamp(3rem,6vw,6rem)}

/* v10.2 ilustracion del disco: mas grande, con rotulos */
.disc__svg .vert--p{fill:#BFD9EC}.disc__lbl text{font:600 15px "Public Sans",system-ui,sans-serif;fill:rgb(255 255 255 / .92);letter-spacing:.04em}.disc__lbl .lbl-n{fill:#8FD6CC}.story__spacer{height:240svh}.story__art{padding:1rem 0}
.story__spacer i{height:80svh}
.disc__lbl .lbl-v{fill:#201269}.disc__lbl .lbl-d{fill:#fff;font-size:17px}

/* v10.3 hero: foto del Dr. entra rapido; tarjeta no tapa la cara */
.hero__card--b{top:auto;bottom:7.5rem;right:-1.5rem}
.reveal-ready #inicio .reveal[data-fx="clip"]{transition-duration:.6s,.8s,.8s}
@media (max-width:640px){.hero__card--b{bottom:6.5rem;right:-.4rem}}

/* v10.4 controles del slider: centrados y boton Pausar en pastilla */
.js .vnav{justify-content:center;gap:.75rem;margin-top:1.5rem}
.vnav button.vnav__pp{width:auto;min-width:0;height:46px;padding:0 1.25rem;border-radius:999px;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;line-height:1}
.vnav button.vnav__pp .ic{width:18px;height:18px;flex:none}
.vnav button.vnav__pp:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* v10.5 cifras grandes (el span interno heredaba el tamano del texto chico) */
.stat b{font-size:clamp(3.6rem,6.4vw,5.4rem);font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.stat b span,.stat b>span{display:inline;margin:0;max-width:none;font:inherit;color:inherit;letter-spacing:inherit}
.stat b:not(.stat__txt)::after{content:"";display:block;width:2.5rem;height:4px;border-radius:4px;margin-top:.8rem;background:linear-gradient(90deg,var(--blue),var(--teal))}
.stat .stat__txt{font-size:clamp(2rem,3.4vw,2.8rem)}
.stat>span{margin-top:.9rem;font-size:1rem}
