/* ============================================================
   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{background:none;border:0;color:var(--ash-dim);cursor:pointer;font-family:var(--sans);font-weight:500;padding:.2em;transition:color var(--dur) var(--ease)}
.lang button.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}

/* escalón intermedio: el menú en español no cabe holgado por debajo de ~1365px,
   así que se compacta antes de envolverse (envolverse duplicaba el alto del nav a 121px) */
@media(max-width:1365px){
  .nav__links{gap:var(--sp-5)}
  .nav__links a{font-size:.72rem;letter-spacing:.07em}
  .nav__right{gap:var(--sp-4)}
}

@media(max-width:920px){
  .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%}
}