/* ============================================================
   TRAZO — HOME (nav + hero)
   ============================================================ */

/* ===================== LOADER ===================== */
#loader{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:var(--obsidian);transform:translateY(0);
  transition:transform .85s cubic-bezier(.76,0,.24,1);
  /* failsafe: if JS never runs the exit, fade out on our own */
  animation:loaderFailsafe .5s ease 3.2s forwards}
#loader.is-done{transform:translateY(-101%)}
#loader.is-done .loader__inner{opacity:0;transition:opacity .3s var(--ease)}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden}}
.loader__inner{text-align:center;padding:0 var(--gutter)}
.loader__name{display:block;font-family:var(--serif);font-weight:400;color:var(--ivory);
  font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.1;letter-spacing:.02em;
  opacity:0;clip-path:inset(0 0 110% 0);animation:loaderReveal .9s var(--ease-line) .15s forwards}
@keyframes loaderReveal{from{opacity:0;clip-path:inset(0 0 110% 0)}to{opacity:1;clip-path:inset(0 0 -12% 0)}}
.loader__line{display:block;height:2px;width:min(300px,62vw);margin:20px auto 16px;border-radius:2px;
  background:var(--line-grad);box-shadow:var(--glow);
  transform:scaleX(0);animation:loaderLine 1s var(--ease-line) .55s forwards}
@keyframes loaderLine{to{transform:scaleX(1)}}
.loader__tag{display:block;font-family:var(--sans);font-size:.66rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--ash-dim);
  opacity:0;animation:up .7s var(--ease) 1.05s forwards}
/* while loading: lock scroll + hold the hero entrance so it plays after the wipe */
body.preload{overflow:hidden}
body.preload .hero *{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){#loader{display:none}}

/* ===================== NAV ===================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-5) var(--gutter);transition:background var(--dur) var(--ease),padding var(--dur) var(--ease),border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(8,10,14,.72);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft);padding-block:var(--sp-4)}
.nav__brand{display:flex;align-items:center;gap:var(--sp-3)}
.nav__brand img{width:34px;height:34px;object-fit:contain;filter:brightness(0) invert(.92)} /* ivory logo on dark */
.nav__brand b{font-family:var(--serif);font-weight:500;color:var(--ivory);font-size:1.05rem;letter-spacing:.02em;line-height:1}
.nav__links{display:flex;align-items:center;gap:var(--sp-7)}
.nav__links a{font-size:.78rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);transition:color var(--dur) var(--ease)}
.nav__links a:hover{color:var(--gold-bright)}
.nav__right{display:flex;align-items:center;gap:var(--sp-5)}
.lang{display:inline-flex;gap:.4em;font-size:.72rem;letter-spacing:.1em}
.lang button,.lang a,.lang span{background:none;border:0;color:var(--ash-dim);cursor:pointer;font-family:var(--sans);font-weight:500;padding:.2em;text-decoration:none;transition:color var(--dur) var(--ease)}
.lang a:hover{color:var(--gold-bright)}
.lang button.is-active,.lang .is-active{color:var(--gold)}
.nav__burger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;background:none;border:0;cursor:pointer;justify-content:center}
.nav__burger span{display:block;height:1.5px;width:22px;margin-inline:auto;background:var(--ivory);transition:transform .3s var(--ease),opacity .2s}
.nav.is-menu-open .nav__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.is-menu-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-menu-open .nav__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav__drawer{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(8,10,14,.97);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:var(--sp-5) var(--gutter) var(--sp-6);flex-direction:column;gap:var(--sp-2)}
.nav__drawer a{padding:var(--sp-3) 0;font-size:1.05rem;letter-spacing:.06em;color:var(--ivory);border-bottom:1px solid var(--line-soft);font-family:var(--serif)}
.nav__drawer .btn{margin-top:var(--sp-4)}
.nav.is-menu-open .nav__drawer{display:flex}

/* un ítem del menú nunca debe partirse en dos líneas */
.nav__links a,.nav__right .btn{white-space:nowrap}

/* --- Garantías estructurales ---------------------------------------------
   El nav reparte el espacio con justify-content:space-between, que solo
   distribuye el SOBRANTE. Cuando el sobrante llegaba a cero, «CONTACTO» y el
   selector «ES · EN» quedaban pegados. El gap fija una separación MÍNIMA que
   space-between ya no puede comerse, y flex-shrink:0 impide que la marca, el
   idioma y el botón se compriman: si algo tiene que ceder, cede el menú. */
.nav{gap:var(--sp-4)}
.nav__brand{flex-shrink:0}
.nav__right{flex-shrink:0}
.lang{white-space:nowrap;flex-shrink:0}

/* --- Escalones de compactación -------------------------------------------
   Medidos sobre el menú en español, que es el más largo (7 ítems desde que se
   añadió «Blog»; antes eran 6 y por eso el escalón único de 1365px bastaba).
   Ancho que necesita el nav en cada régimen, con el gap ya incluido:

     régimen normal ...... 1472px  ->  holgado por encima de 1480
     escalón 1 ........... 1244px  ->  cubre 1251–1480
     escalón 2 ........... 1143px  ->  cubre 1151–1250
     hamburguesa .........          ->  1150px hacia abajo

   Cada breakpoint va por encima de lo que necesita el régimen que activa, así
   no queda ninguna banda en la que el menú se apiñe. Verificado con un barrido
   de 1920 a 360px en pasos de 10 en ambos idiomas: separación mínima 53px y
   cero desbordamiento. */
@media(max-width:1480px){
  .nav__links{gap:var(--sp-5)}
  .nav__links a{font-size:.72rem;letter-spacing:.07em}
  .nav__right{gap:var(--sp-4)}
}

@media(max-width:1250px){
  .nav{padding-inline:var(--sp-6)}
  .nav__links{gap:var(--sp-4)}
  .nav__links a{font-size:.68rem;letter-spacing:.04em}
  .nav__right{gap:var(--sp-3)}
}

@media(max-width:1150px){
  .nav{padding-inline:var(--gutter)}
  .nav__links{display:none}
  .nav__right .btn{display:none}
  .nav__burger{display:flex}
}

/* ===================== HERO ===================== */
/* padding-block reserva el alto del nav fijo (99px, arriba) y el del indicador de scroll (abajo),
   para que un titular largo —p. ej. el H1 en español— nunca quede debajo de ninguno */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--obsidian);
  padding-block:var(--sp-10) var(--sp-9)}

/* model figure emerging from black, with a warm gold halo behind */
.hero__figure{position:absolute;top:0;right:0;bottom:0;width:48vw;max-width:780px;z-index:1;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden}
.hero__figure img{height:100%;width:auto;max-width:none;object-fit:cover;object-position:50% 26%;
  filter:contrast(1.05) saturate(.95) brightness(.9);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 36%);mask-image:linear-gradient(90deg,transparent 0,#000 36%);
  opacity:0;animation:figFade 1.7s var(--ease) .15s forwards}
/* deepen the photographed background so the portrait melts into the obsidian stage */
.hero__figure::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(135% 78% at 72% 36%, transparent 44%, rgba(8,10,14,.55) 100%)}
.hero__halo{position:absolute;z-index:0;width:46vw;height:46vw;max-width:620px;max-height:620px;right:9%;top:34%;
  transform:translateY(-50%);background:radial-gradient(circle,rgba(112,150,209,.18),transparent 64%);filter:blur(48px);pointer-events:none}
@keyframes figFade{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}

.hero__content{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.hero__inner{max-width:44rem}
.hero__eyebrow{opacity:0;animation:up .9s var(--ease) .25s forwards}
.hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.7rem, 1.3rem + 4.7vw, 6.1rem);line-height:1.04;
  color:var(--ivory);letter-spacing:-.012em;margin:.14em 0 0;max-width:16ch;
  opacity:0;clip-path:inset(0 0 110% 0);animation:reveal 1.1s var(--ease-line) .4s forwards}
.hero__title em{font-style:normal;color:var(--gold-bright)}
.hero__title .dot{color:var(--gold-bright);font-style:normal}
.hero__line{height:30px;margin:.3em 0 1.4rem}
.hero__line svg{width:min(500px,86%);height:100%;overflow:visible}
.hero .hero__line path{animation-delay:1.05s}
.hero__sub{max-width:44ch;color:var(--ash);font-size:var(--fs-lead);font-weight:300;opacity:0;animation:up .9s var(--ease) 1.25s forwards}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6);opacity:0;animation:up .9s var(--ease) 1.45s forwards}
.hero__trust{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-6);opacity:0;animation:up .9s var(--ease) 1.65s forwards}
.hero__trust span{display:inline-flex;align-items:center;gap:.6em;font-size:.78rem;letter-spacing:.06em;color:var(--ash)}
.hero__trust svg{color:var(--gold)}

@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes reveal{from{opacity:0;clip-path:inset(0 0 110% 0)}to{opacity:1;clip-path:inset(0 0 -10% 0)}}

.hero__scroll{position:absolute;left:var(--gutter);bottom:var(--sp-6);z-index:3;display:flex;align-items:center;gap:.8em;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ash-dim);opacity:0;animation:up 1s var(--ease) 2s forwards}
.hero__scroll .l{width:46px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);position:relative;overflow:hidden}
.hero__scroll .l::after{content:"";position:absolute;inset:0;width:14px;background:var(--gold-bright);animation:slide 2.4s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-14px);opacity:0}40%{opacity:1}100%{transform:translateX(46px);opacity:0}}

/* mobile: stack — doctor on top (face clear), text below on black, no overlap */
@media(max-width:920px){
  .hero{flex-direction:column;align-items:stretch;min-height:auto;padding:0}
  .hero::after{display:none}
  .hero__figure{position:relative;inset:auto;order:-1;width:100%;height:56svh;opacity:1;align-items:stretch}
  .hero__figure img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;
    filter:contrast(1.04) saturate(.97) brightness(.96);
    -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 99%);mask-image:linear-gradient(180deg,#000 66%,transparent 99%)}
  .hero__figure::after{display:none}
  .hero__halo{display:none}
  .hero__content{position:relative;z-index:3;margin-top:-8svh;padding:0 var(--gutter) var(--sp-9)}
  .hero__inner{max-width:none}
  .hero__title{font-size:clamp(2.6rem,10vw,4rem)}
  .hero__scroll{display:none}
}
@media(max-width:560px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}