/* ============================================================================
   CLÍNICA VISIÓN NORTE · Landing de oftalmología — hoja de estilo única
   Demostración de Nansa Studio. Marca, datos y cifras: FICTICIOS.
   Fotografía: Pexels (licencia libre). Ver assets/img/CREDITOS.txt.

   Landing de entrada: una sola página, diseño limpio y directo, motion mínimo
   (solo un fade sutil al aparecer). Tema claro. Tokens en :root.
   Legible y completa sin JS.
   ========================================================================== */

/* ---------- Fuente auto-alojada (Inter, woff2, subconjunto latino) -------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter-400700-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter-400700-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================================
   TOKENS
   ========================================================================== */
:root{
  --paper:#FCFBF8;      /* fondo de página */
  --ivory:#F3EFE6;      /* secciones alternas */
  --cloud:#FFFFFF;      /* tarjetas */
  --mist:#EAF0F6;
  --ink:#16232F;        /* texto */
  --ink-soft:#4B5964;
  --ink-faint:#5E6873;  /* letra pequeña — AA sobre crema y marfil */
  --night:#0B1E38;      /* azul oscuro — sección CTA y footer */
  --night-deep:#081729;
  --clinic:#1C64B4;     /* azul médico — acento */
  --clinic-dark:#164F8F;
  --clinic-tint:#E3EDF7;
  --line:#E4DFD2;
  --line-cool:#E7EAED;

  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --step--1:clamp(.84rem,.81rem + .15vw,.93rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.09rem);
  --step-1:clamp(1.12rem,1.06rem + .3vw,1.28rem);
  --step-2:clamp(1.3rem,1.2rem + .5vw,1.6rem);
  --step-3:clamp(1.55rem,1.35rem + .9vw,2.1rem);
  --step-4:clamp(1.9rem,1.55rem + 1.5vw,2.8rem);

  --wrap:1140px;
  --gutter:clamp(1.15rem,4vw,3rem);
  --section:clamp(3.75rem,2.8rem + 5.5vw,6.5rem);
  --header-h:70px;
  --r-sm:8px; --r:12px; --r-lg:16px;

  --ease:cubic-bezier(.22,1,.36,1);
  --fast:.2s; --med:.4s;
}

/* ============================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);background:var(--paper);color-scheme:light}
body{min-height:100%;background:var(--paper);color:var(--ink);
  font:400 var(--step-0)/1.65 var(--font-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
img{border-style:none;background:var(--mist);color:transparent}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-weight:650;line-height:1.2;letter-spacing:-.015em}
:where(p,li,dd,dt){text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
::selection{background:var(--night);color:#fff}
:focus-visible{outline:2px solid var(--clinic);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}

/* ============================================================================
   ACCESIBILIDAD
   ========================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:.7rem;left:.7rem;z-index:2000;transform:translateY(-160%);
  background:var(--night);color:#fff;padding:.65rem 1rem;border-radius:var(--r-sm);
  font-size:var(--step--1);font-weight:600;transition:transform var(--fast) var(--ease)}
.skip-link:focus-visible{transform:none}

/* ============================================================================
   UTILIDADES
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.eyebrow{display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--step--1);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--clinic);line-height:1.4}
.eyebrow::before{content:"";inline-size:1.6rem;block-size:2px;background:currentColor;flex:none;
  border-radius:2px;opacity:.7}

.faint{color:var(--ink-faint)}

.link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:var(--step--1);
  color:var(--clinic);border-bottom:1px solid transparent;padding-bottom:1px;
  transition:border-color var(--fast)}
.link:hover{border-color:currentColor}

/* ============================================================================
   MOVIMIENTO — un único fade sutil al aparecer
   Solo se oculta si el JS arrancó (html.pe). Si falla, html.reveal-all lo muestra.
   ========================================================================== */
.pe .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.pe .reveal.in{opacity:1;transform:none}
.reveal-all .reveal{opacity:1!important;transform:none!important}

/* ============================================================================
   BOTONES
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.5em;border-radius:var(--r-sm);font-weight:600;font-size:var(--step--1);
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),
    border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--clinic);color:#fff}
.btn--primary:hover{background:var(--clinic-dark)}
.btn--ghost{border:1px solid var(--line-cool);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* ============================================================================
   CABECERA / NAVEGACIÓN
   ========================================================================== */
.masthead{position:fixed;inset:0 0 auto;z-index:1000;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:box-shadow var(--med) var(--ease)}
.masthead.is-scrolled{box-shadow:0 1px 0 var(--line),0 10px 24px -20px rgba(11,30,56,.3)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .masthead{background:var(--paper)}
}
.masthead__bar{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;height:var(--header-h)}

.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);position:relative;z-index:3}
.brand__mark{width:28px;height:28px;flex:none;color:var(--clinic)}
.brand__word{font-weight:650;font-size:1.02rem;letter-spacing:-.01em}

.nav{display:flex;align-items:center;gap:1.6rem}
.nav__menu{display:flex;align-items:center;gap:1.6rem}
.nav__list{display:flex;align-items:center;gap:1.5rem}
.nav__list a{position:relative;font-size:var(--step--1);font-weight:500;color:var(--ink-soft);
  padding:.4rem 0;transition:color var(--fast)}
.nav__list a::after{content:"";position:absolute;left:0;bottom:.05rem;width:100%;height:2px;
  background:var(--clinic);transform:scaleX(0);transform-origin:left;transition:transform var(--med) var(--ease)}
.nav__list a:hover,.nav__list a.is-current{color:var(--ink)}
.nav__list a:hover::after,.nav__list a.is-current::after{transform:scaleX(1)}
.nav__cta{padding:.6em 1.2em}
.nav__meta{display:none}

.nav__toggle{display:none}
.nav__toggle-box{position:relative;display:block;width:24px;height:10px}
.nav__toggle-box span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);border-radius:2px;
  transition:transform var(--med) var(--ease),opacity var(--fast)}
.nav__toggle-box span:first-child{top:0}
.nav__toggle-box span:last-child{bottom:0}
.nav__toggle[aria-expanded="true"] .nav__toggle-box span:first-child{transform:translateY(4px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-box span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media (max-width:860px){
  .nav__toggle{display:inline-flex;align-items:center;position:relative;z-index:3;padding:.6rem;margin:-.6rem;color:var(--ink)}
  .nav__menu{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:flex-start;
    gap:1.3rem;padding:calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;background:var(--paper);
    overflow-y:auto;clip-path:inset(0 0 100% 0);transition:clip-path var(--med) var(--ease);pointer-events:none}
  .nav__menu.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
  .nav__list{flex-direction:column;align-items:flex-start;gap:.4rem}
  .nav__list a{font-size:1.6rem;font-weight:600;color:var(--ink);padding:.3rem 0}
  .nav__list a::after{display:none}
  .nav__cta{font-size:var(--step-0);padding:.9em 1.8em;margin-top:.4rem}
  .nav__meta{display:flex;flex-direction:column;gap:.25rem;margin-top:1rem;
    font-size:var(--step--1);color:var(--ink-faint)}
  .nav__meta a{color:var(--clinic)}
}

/* ============================================================================
   01 · HERO
   ========================================================================== */
.hero{padding-top:calc(var(--header-h) + clamp(1.5rem,5vw,3rem));padding-bottom:var(--section)}
.hero__inner{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.hero__title{font-size:var(--step-4);line-height:1.12;margin:.6rem 0 0;color:var(--ink)}
.hero__sub{margin-top:1.1rem;font-size:var(--step-1);line-height:1.55;color:var(--ink-soft);max-width:46ch}
.hero__actions{margin-top:1.7rem;display:flex;flex-wrap:wrap;gap:.7rem}
.hero__ticks{margin-top:2rem;display:grid;gap:.6rem}
.hero__ticks li{display:flex;align-items:center;gap:.6rem;font-size:var(--step--1);color:var(--ink-soft)}
.hero__ticks svg{width:1.35rem;height:1.35rem;flex:none;color:var(--clinic);
  padding:.22rem;border-radius:100px;background:var(--clinic-tint)}
.hero__figure{border-radius:var(--r-lg);overflow:hidden;background:var(--mist);
  box-shadow:0 30px 60px -40px rgba(11,30,56,.3);aspect-ratio:4/4.4}
.hero__figure img{width:100%;height:100%;object-fit:cover}
@media (min-width:820px){
  .hero__inner{grid-template-columns:1.05fr .95fr}
}

/* ============================================================================
   02 · BARRA DE CONFIANZA
   ========================================================================== */
.trustbar{border-block:1px solid var(--line);background:var(--ivory)}
.trustbar__list{display:grid;gap:.8rem 2rem;grid-template-columns:repeat(2,1fr);
  padding-block:clamp(1.3rem,3vw,1.8rem)}
.trustbar__list li{position:relative;padding-left:1.4rem;font-size:var(--step--1);font-weight:600;
  color:var(--ink)}
.trustbar__list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;
  border-radius:100px;background:var(--clinic)}
@media (min-width:760px){
  .trustbar__list{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================================
   ESTRUCTURA DE SECCIÓN
   ========================================================================== */
.section{padding-block:var(--section)}
.section:nth-of-type(even){}
.section__head{display:grid;gap:.85rem;max-width:44ch;margin-bottom:clamp(2.2rem,5vw,3.5rem)}
.section__title{font-size:var(--step-3);line-height:1.2;color:var(--ink)}
.section__lead{font-size:var(--step-1);line-height:1.55;color:var(--ink-soft);max-width:52ch}

/* ============================================================================
   03 · SERVICIOS
   ========================================================================== */
.services{background:var(--paper)}
.svc-grid{display:grid;gap:clamp(.8rem,2vw,1.1rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.svc-card{display:flex;flex-direction:column;gap:.55rem;background:var(--cloud);
  border:1px solid var(--line-cool);border-radius:var(--r);padding:clamp(1.2rem,2.6vw,1.5rem);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.svc-card:hover{border-color:var(--clinic-tint);box-shadow:0 12px 30px -20px rgba(11,30,56,.22)}
.svc-card__icon{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:var(--r-sm);
  background:var(--clinic-tint);color:var(--clinic);margin-bottom:.35rem}
.svc-card__icon svg{width:1.6rem;height:1.6rem}
.svc-card h3{font-size:var(--step-1);color:var(--ink)}
.svc-card p{font-size:var(--step--1);line-height:1.55;color:var(--ink-soft)}
.services__note{margin-top:clamp(1.6rem,3.5vw,2.2rem);font-size:var(--step--1);color:var(--ink-faint);
  max-width:60ch}

/* ============================================================================
   04 · TECNOLOGÍA
   ========================================================================== */
.feature{background:var(--ivory)}
.feature__grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.feature__media{border-radius:var(--r-lg);overflow:hidden;background:var(--mist);
  box-shadow:0 30px 60px -42px rgba(11,30,56,.28);aspect-ratio:4/3.6}
.feature__media img{width:100%;height:100%;object-fit:cover}
.feature__body > * + *{margin-top:1rem}
.feature__body .section__title{margin-top:.5rem}
.feature__body .section__lead{margin-top:.9rem}
.feature__points{margin-top:1.6rem;display:grid;gap:0;border-top:1px solid var(--line)}
.feature__points li{padding-block:.9rem;border-bottom:1px solid var(--line);
  font-size:var(--step--1);line-height:1.55;color:var(--ink-soft)}
.feature__points b{color:var(--ink)}
@media (min-width:820px){
  .feature__grid{grid-template-columns:.9fr 1.1fr}
}

/* ============================================================================
   05 · CÓMO TRABAJAMOS
   ========================================================================== */
.steps-sec{background:var(--paper)}
.steps{display:grid;gap:1rem}
.step{background:var(--cloud);border:1px solid var(--line-cool);border-radius:var(--r);
  padding:clamp(1.3rem,3vw,1.7rem)}
.step__n{font-size:var(--step--1);font-weight:700;letter-spacing:.06em;color:var(--clinic)}
.step h3{font-size:var(--step-2);color:var(--ink);margin:.5rem 0 .4rem}
.step p{font-size:var(--step--1);line-height:1.6;color:var(--ink-soft)}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================================
   06 · SOBRE LA CLÍNICA
   ========================================================================== */
.about{background:var(--ivory)}
.about__grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.about__body > * + *{margin-top:1rem}
.about__body .section__title{margin-top:.5rem}
.about__body .section__lead{margin-top:.9rem}
.about__list{margin-top:1.5rem;display:grid;gap:0;border-top:1px solid var(--line)}
.about__list li{padding-block:.9rem;border-bottom:1px solid var(--line);
  font-size:var(--step--1);line-height:1.55;color:var(--ink-soft)}
.about__list b{color:var(--ink)}
.about__media{border-radius:var(--r-lg);overflow:hidden;background:var(--mist);
  box-shadow:0 30px 60px -42px rgba(11,30,56,.28);aspect-ratio:4/4.2}
.about__media img{width:100%;height:100%;object-fit:cover}
@media (min-width:820px){
  .about__grid{grid-template-columns:1.05fr .95fr}
  .about__media{order:2}
}

/* ============================================================================
   07 · FAQ
   ========================================================================== */
.faq{background:var(--paper)}
.faq__wrap{max-width:860px}
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item h3{margin:0;font-weight:inherit}
.faq__item [data-faq-q]{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;
  width:100%;text-align:left;padding:clamp(1rem,2.4vw,1.35rem) 0;
  font-size:var(--step-1);font-weight:600;color:var(--ink);transition:color var(--fast)}
.faq__item [data-faq-q]:hover,.faq__item.is-open [data-faq-q]{color:var(--clinic)}
.faq__icon{position:relative;flex:none;width:1.1rem;height:1.1rem;margin-top:.3em}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:currentColor;
  transition:transform var(--med) var(--ease)}
.faq__icon::before{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%)}
.faq__icon::after{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.faq__item.is-open .faq__icon::after{transform:translateX(-50%) scaleY(0)}
.faq__answer{height:0;overflow:hidden;transition:height var(--med) var(--ease)}
.faq__answer-in{padding:0 0 clamp(1rem,2.4vw,1.35rem);max-width:64ch}
.faq__answer p{color:var(--ink-soft);font-size:var(--step-0)}
.faq__answer a{color:var(--clinic);text-decoration:underline;text-underline-offset:2px}
.reveal-all .faq__answer{height:auto!important}

/* ============================================================================
   08 · CTA + FORMULARIO  (sección oscura)
   ========================================================================== */
.closer{background:var(--night);color:#EEF3F9;padding-block:clamp(3.5rem,8vw,6rem)}
.closer__grid{display:grid;gap:clamp(2.2rem,5vw,4rem);align-items:start}
.closer__title{font-size:var(--step-3);line-height:1.2;color:#fff;margin-top:.5rem}
.closer__lead{margin-top:1rem;font-size:var(--step-1);line-height:1.55;color:#AEBED0;max-width:42ch}
.closer__facts{margin-top:1.8rem;display:grid;gap:0;border-top:1px solid rgba(238,243,249,.16)}
.closer__facts > div{display:flex;flex-wrap:wrap;gap:.2rem 1rem;padding-block:.8rem;
  border-bottom:1px solid rgba(238,243,249,.16)}
.closer__facts dt{font-size:var(--step--1);font-weight:600;color:#8FA1BC;min-width:6.5rem}
.closer__facts dd{font-size:var(--step-0);color:#EEF3F9}
.closer__facts dd a:hover{color:#9CC4EE}

.form{display:grid;gap:1rem;background:rgba(238,243,249,.05);border:1px solid rgba(238,243,249,.15);
  border-radius:var(--r);padding:clamp(1.3rem,3.5vw,2rem)}
.form__row{display:grid;gap:.4rem}
.form__two{display:grid;gap:1rem}
.form__row label,.form__consent{font-size:var(--step--1);color:#AEBED0}
.form__req{color:#9CC4EE}
.form__row input,.form__row textarea,.form__select select{width:100%;padding:.8rem .9rem;
  border:1px solid rgba(238,243,249,.22);border-radius:var(--r-sm);
  background:rgba(238,243,249,.06);color:#EEF3F9;font-size:var(--step-0);
  transition:border-color var(--fast),box-shadow var(--fast)}
.form__row textarea{resize:vertical;min-height:5rem}
.form__row input::placeholder,.form__row textarea::placeholder{color:#71849F}
.form__row input:focus,.form__row textarea:focus,.form__select select:focus{outline:none;
  border-color:#7FB4EA;box-shadow:0 0 0 3px rgba(127,180,234,.28)}
.form__row input:user-invalid,.form__row textarea:user-invalid{border-color:#E9727A}
.form__select{position:relative}
.form__select::after{content:"";position:absolute;right:1rem;top:50%;width:.5rem;height:.5rem;
  border-right:2px solid rgba(238,243,249,.6);border-bottom:2px solid rgba(238,243,249,.6);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.form__select select{appearance:none;-webkit-appearance:none;padding-right:2.4rem}
.form__select option{background:#12294a;color:#EEF3F9}
.form__consent{display:flex;gap:.6rem;align-items:flex-start;line-height:1.5}
.form__consent input{margin-top:.15rem;width:1rem;height:1rem;flex:none;accent-color:#7FB4EA}
.form__consent a{color:#EEF3F9;text-decoration:underline;text-underline-offset:2px}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__submit{margin-top:.2rem;justify-self:start;background:#EEF3F9;color:var(--night)}
.form__submit:hover{background:#fff}
.form__submit[disabled]{opacity:.6;pointer-events:none}
.form__status{font-size:var(--step--1);min-height:1.3em;font-weight:500;line-height:1.5;color:#AEBED0}
.form__status.is-ok{color:#8FD0A6}
.form__status.is-error{color:#E9727A}
.form__demo{font-size:var(--step--1);color:#8FA1BC}
.form__demo code{background:rgba(238,243,249,.14);padding:.1em .35em;border-radius:4px}

@media (min-width:600px){ .form__two{grid-template-columns:1fr 1fr} }
@media (min-width:880px){
  .closer__grid{grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,6vw,5rem)}
}

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--night-deep);color:#C6D2E1;padding-block:clamp(3rem,7vw,4.5rem) 1.8rem}
.site-footer .brand{color:#EEF3F9}
.site-footer .brand__mark{color:var(--clinic)}
.site-footer__grid{display:grid;gap:2.2rem}
.site-footer__brand p{margin:.9rem 0 1rem;color:#93A4BB;max-width:34ch;font-size:var(--step--1)}
.site-footer__social a{font-size:var(--step--1);font-weight:600;color:#C6D2E1;
  border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color var(--fast)}
.site-footer__social a:hover{border-color:var(--clinic)}
.site-footer__col h2{font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#8B9DB7;margin-bottom:.9rem}
.site-footer__col ul{display:grid;gap:.5rem}
.site-footer__col a{color:#C6D2E1;font-size:var(--step--1);transition:color var(--fast)}
.site-footer__col a:hover{color:#EEF3F9}
.site-footer__col address{font-style:normal;color:#93A4BB;font-size:var(--step--1);line-height:1.8}
.site-footer__col address a{color:#C6D2E1}
.site-footer__col address a:hover{color:#EEF3F9}
.map{aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;margin-bottom:.8rem;
  border:1px solid rgba(238,243,249,.16);background:#12294a}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.25) contrast(.95) brightness(.95)}
.site-footer__map .link{color:#9CC4EE}
.site-footer__legal{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(238,243,249,.16);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;font-size:var(--step--1);color:#8B9DB7}
.site-footer__legal ul{display:flex;gap:1rem;flex-wrap:wrap}
.site-footer__legal a:hover{color:#EEF3F9}
.site-footer__credit{width:100%}
@media (min-width:860px){
  .site-footer__grid{grid-template-columns:1.6fr 1fr 1.1fr 1.3fr;gap:2.4rem}
}

/* ============================================================================
   FAB — Pedir cita (móvil)
   ========================================================================== */
.fab{position:fixed;right:1rem;bottom:1rem;z-index:900;padding:.85rem 1.3rem;border-radius:100px;
  background:var(--clinic);color:#fff;font-weight:600;font-size:var(--step--1);
  box-shadow:0 14px 30px -12px rgba(11,30,56,.5);
  opacity:0;transform:translateY(130%);pointer-events:none;
  transition:opacity var(--med) var(--ease),transform var(--med) var(--ease)}
.fab.is-visible{opacity:1;transform:none;pointer-events:auto}
@media (min-width:861px){ .fab{display:none} }

/* ============================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .pe .reveal{opacity:1!important;transform:none!important}
}

@media print{
  .masthead,.fab,.form,.nav,.map{display:none!important}
  *{color:#000!important;background:#fff!important;box-shadow:none!important}
}

/* ============================================================================
   PÁGINA MÍNIMA (404)
   ========================================================================== */
.notfound{min-height:74svh;display:grid;place-content:center;text-align:center;gap:1rem;
  padding:calc(var(--header-h) + var(--section)) var(--gutter) var(--section)}
.notfound__code{font-size:clamp(3.5rem,14vw,7rem);font-weight:700;line-height:.9;color:var(--clinic)}
.notfound h1{font-size:var(--step-3)}
.notfound p{color:var(--ink-soft);max-width:40ch;margin-inline:auto}
.notfound .btn{justify-self:center;margin-top:.5rem}

/* ══════════════════════════════════════════════════════════════════════════
   BARRA DE DEMOSTRACIÓN · Nansa Studio
   Añadida al publicar la demo en demo-visionnorte.nansastudio.es.
   ══════════════════════════════════════════════════════════════════════════ */
:root{ --nsd-bar:32px }
@media (max-width:560px){ :root{ --nsd-bar:46px } }

.nsd-demo-bar{
  position:fixed; inset:0 0 auto; height:var(--nsd-bar); z-index:2147483647;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  column-gap:.7em; padding:0 14px;
  background:#0B1E38; color:#fff;
  font:500 12px/1.25 var(--font-sans, system-ui, sans-serif);
  letter-spacing:.01em; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.nsd-demo-bar strong{ font-weight:600 }
.nsd-demo-bar a{ color:#fff; text-decoration:underline; text-underline-offset:2px; white-space:nowrap }
.nsd-demo-bar a:hover{ opacity:.75 }

.masthead{ margin-top:var(--nsd-bar) }
html{ scroll-padding-top:calc(var(--header-h) + var(--nsd-bar) + 1rem) }
.section__head{ scroll-margin-top:calc(var(--header-h) + var(--nsd-bar) + 1rem) }
.notfound{ padding-top:calc(var(--nsd-bar) + 2rem) }
@media (max-width:860px){
  .nav__menu{ top:var(--nsd-bar); inset-block-start:var(--nsd-bar) }
}

/* ── Documentos legales (demo) ── */
.legal{ max-width:50rem; margin-inline:auto;
  padding:calc(var(--header-h) + var(--nsd-bar) + 3rem) var(--gutter, 1.25rem) clamp(4rem,10vw,7rem) }
.legal__kicker{ font:600 .72rem/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--clinic); margin:0 0 .7rem }
.legal h1{ font-size:clamp(1.9rem,1.4rem+2vw,2.7rem); line-height:1.12; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 .4rem }
.legal__meta{ color:var(--ink-faint); font-size:.85rem; margin:0 0 1.6rem }
.legal__nav{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin:0 0 2.4rem; padding-bottom:1.3rem;
  border-bottom:1px solid var(--line, #dfe4e8); font-size:.9rem }
.legal__nav a{ color:var(--ink-soft) } .legal__nav a[aria-current]{ color:var(--clinic); font-weight:600 }
.legal__note{ background:var(--clinic-tint); border:1px solid #cfe0f2; border-radius:8px;
  padding:1rem 1.15rem; font-size:.9rem; color:var(--ink-soft); margin:0 0 2rem }
.legal h2{ font-size:1.25rem; letter-spacing:-.01em; color:var(--ink); margin:2rem 0 .5rem }
.legal p, .legal li{ color:var(--ink-soft); line-height:1.72 }
.legal p{ margin:0 0 1rem } .legal ul{ margin:0 0 1rem; padding-left:1.2rem } .legal li{ margin:.3rem 0 }
.legal a{ color:var(--clinic); text-decoration:underline; text-underline-offset:2px }
.legal strong{ color:var(--ink) }
.legal__back{ display:inline-block; margin-top:2.4rem; font-weight:600; font-size:.85rem; color:var(--clinic) }