/* ═══════════════════════════════════════════════════════════════
   NARÄ Equino — portada
   El hero inmersivo: la escena a sangre, los tres medallones y
   la atmósfera. Todo lo demás vive en nara.css.
   ═══════════════════════════════════════════════════════════════ */

.hero{position:relative;min-height:100svh;overflow:hidden;
  background:var(--noche);color:var(--claro);isolation:isolate}

/* ─────────── escena ─────────── */
.escena{position:absolute;inset:0;z-index:0}

/* el fondo de la escena: hoy un degradado, mañana la imagen de NARÄ.
   Para cambiarlo basta meter un <img> dentro de .fondo-escena. */
.fondo-escena{position:absolute;inset:-4%;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(74,92,68,.30), transparent 62%),
    radial-gradient(90% 70% at 50% 110%, rgba(6,10,7,.95), transparent 70%),
    linear-gradient(170deg, #1B2419 0%, #0C110B 78%)}
/* el fondo va desenfocado, como una profundidad de campo real: pone al
   caballo en foco, unifica la escena y disimula que la imagen es
   pequeña para una pantalla grande */
.fondo-escena img{width:100%;height:100%;object-fit:cover;
  filter:blur(3px) contrast(1.04) saturate(1.06) brightness(.74);
  transform:scale(1.06)}
/* y un cierre oscuro para que nunca se lave, se recorte como se recorte */
.fondo-escena::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(82% 68% at 50% 44%,
    transparent 0%, rgba(8,12,9,.22) 58%, rgba(8,12,9,.54) 88%, rgba(8,12,9,.68) 100%)}
.foto-hero{position:absolute;inset:0;opacity:0;
  transition:opacity 1.3s ease;will-change:opacity}
.foto-hero.on{opacity:1}
/* el caballo se acerca hacia el punto elegido: la escala crece y el
   origen de la transformación viaja hasta ese punto */
/* cover: la escena es apaisada, así que llena la pantalla sin bandas.
   En móvil el recorte se queda con el panel central, el del caballo. */
.foto-hero img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.04) saturate(1.1) brightness(1.02);
  transform-origin:var(--fx,50%) var(--fy,50%);
  transform:scale(var(--z,1.05));
  transition:transform 1.9s var(--suave),transform-origin 1.9s var(--suave),
             filter 1.2s ease;
}

.tinte-hero{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(130% 95% at 50% -8%,rgba(201,169,106,.10),transparent 60%),
  radial-gradient(100% 62% at 50% 126%,rgba(7,11,8,.52),transparent 76%),
  linear-gradient(180deg,transparent,rgba(14,20,16,.22))}
.rayos{position:absolute;inset:-30%;mix-blend-mode:screen;transform-origin:50% 0;
  background:repeating-linear-gradient(100deg,rgba(234,246,216,.07) 0,rgba(234,246,216,.07) 2px,
    transparent 2px,transparent 54px);filter:blur(4px);
  animation:vaiven 19s ease-in-out infinite alternate}
.rayos.b{background:repeating-linear-gradient(96deg,rgba(234,246,216,.045) 0,rgba(234,246,216,.045) 1px,
    transparent 1px,transparent 92px);filter:blur(8px);animation-duration:26s;animation-direction:alternate-reverse}
@keyframes vaiven{to{transform:rotate(2deg);opacity:.72}}

.niebla{position:absolute;width:78vw;height:78vh;border-radius:50%;filter:blur(74px);
  mix-blend-mode:screen;pointer-events:none}
.niebla-1{background:radial-gradient(circle,rgba(195,215,175,.12),transparent 66%);
  top:-16%;left:-18%;animation:deriva1 30s ease-in-out infinite alternate}
.niebla-2{background:radial-gradient(circle,rgba(var(--ac),.13),transparent 66%);
  bottom:-22%;right:-16%;transition:background 1.3s ease;
  animation:deriva2 36s ease-in-out infinite alternate}
@keyframes deriva1{to{transform:translate(130px,60px) scale(1.2)}}
@keyframes deriva2{to{transform:translate(-150px,-50px) scale(1.24)}}

.halo-hero{position:absolute;inset:0;pointer-events:none;transition:background 1.3s ease;
  background:radial-gradient(46% 46% at 50% 50%,rgba(var(--ac),.2),transparent 70%)}
/* la constelación va detrás del caballo: se ve alrededor, no encima */
/* delante de la escena, en screen: la luz suma a la fotografía.
   La máscara despeja la franja de la cabecera: ahí la constelación
   competía con el logotipo y el menú. */
#cielo{position:absolute;inset:0;z-index:3;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 62px,#000 170px);
  mask-image:linear-gradient(180deg,transparent 0,transparent 62px,#000 170px)}
.grano-hero{position:absolute;inset:0;pointer-events:none;opacity:.055;z-index:4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* el foco ya oscurece los bordes; aquí basta un cierre muy suave */
.vineta-hero{position:absolute;inset:0;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 150px 40px rgba(5,9,6,.18)}
.reborde-hero{position:absolute;inset:var(--marco);pointer-events:none;z-index:5;
  border:1px solid rgba(244,238,224,.16)}
.luz{position:absolute;border-radius:50%;background:var(--oro-claro);pointer-events:none}

/* ─────────── puntos de luz ───────────
   El caballo dorado con sus botones: un punto luminoso por guardián,
   como en el diseño original de NARÄ. Sin emblemas encima. */
/* el campo de botones copia exactamente la transformación de la imagen,
   así los puntos quedan pegados a la anatomía del caballo aunque la
   escena se mueva o se acerque */
/* z-index 2: por debajo de la viñeta y del grano, para que la atmósfera
   de la foto pase por encima de los puntos y no floten sobre ella */
.campo{position:absolute;inset:0;z-index:2;
  transform-origin:var(--fx,50%) var(--fy,50%);
  transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--z,1));
  transition:transform 1.9s var(--suave),transform-origin 1.9s var(--suave)}
/* el parallax escribe --tx/--ty para poder convivir con la escala */
/* el parallax escribe --tx/--ty; estas capas usan translate para su
   centrado, así que transform les queda libre para el desplazamiento */
.fondo-escena,.foto-hero,.halo-hero,.columna{
  transform:translate(var(--tx,0px),var(--ty,0px))}
/* JS coloca left/top en píxeles a partir de la posición en la imagen */
.med{position:absolute;transform:translate(-50%,-50%) scale(var(--contra,1));
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
  color:var(--claro);
  transition:transform 1.9s var(--suave)}

/* La luz SUMA a la foto en vez de taparla: con screen, el brillo se
   funde con la bruma dorada que el caballo ya tiene. Sin bordes duros
   ni sombras de caja: solo un degradado que se apaga hacia fuera. */
.disco{position:relative;width:126px;height:126px;display:grid;place-items:center;
  flex:none;mix-blend-mode:screen;isolation:auto}
.disco::after{content:'';width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,250,236,1)   0%,
    rgba(255,242,212,.82) 8%,
    rgba(250,230,180,.48) 18%,
    rgba(var(--ac),.26)   32%,
    rgba(var(--ac),.09)   50%,
    transparent           70%);
  filter:blur(.4px);
  animation:titilar 6.5s ease-in-out infinite;
  transition:transform .9s var(--suave),opacity .7s ease}
/* la luz respira: ninguna llama es perfectamente fija */
@keyframes titilar{
  0%,100%{opacity:.86;transform:scale(.97)}
  50%    {opacity:1;  transform:scale(1.05)}}
.med:nth-child(2) .disco::after{animation-delay:-2.2s}
.med:nth-child(3) .disco::after{animation-delay:-4.4s}

/* en reposo los dos apagados son brasa; el activo, llama */
.med .disco::after{opacity:.7;transform:scale(.82)}
.med.on .disco::after{opacity:1;transform:scale(1)}
.med:hover .disco::after,.med:focus-visible .disco::after{opacity:1;transform:scale(1.12)}

/* la silueta: siempre visible, para que se vea que los tres son
   botones. Al despertar el guardián se aprieta contra la luz. */
.disco::before{content:'';position:absolute;inset:36%;border-radius:50%;
  border:1px solid rgba(246,228,180,.55);opacity:.7;
  transition:inset .9s var(--suave),opacity .7s ease,border-color .7s ease}
.med.on .disco::before{inset:29%;opacity:.95;border-color:rgba(246,228,180,.85)}
.med:hover .disco::before,.med:focus-visible .disco::before{
  inset:25%;opacity:1;border-color:rgba(255,247,226,.9)}

/* el aro que late hacia fuera, como una onda en el agua. Late en los
   tres, para que se vea que los tres son puertas; el activo, más fuerte
   y más rápido. Los desfases evitan que latan a la vez. */
.pulso{position:absolute;inset:35%;border-radius:50%;opacity:0;pointer-events:none;
  border:1.5px solid rgba(var(--ac),.95);
  --pico:.46;
  animation:latir 7.4s ease-out infinite}
.med:nth-child(2) .pulso{animation-delay:-2.5s}
.med:nth-child(3) .pulso{animation-delay:-5s}
.med.on .pulso{--pico:.8;animation-duration:5.2s}
.med:hover .pulso{--pico:.9;animation-duration:3.6s}
@keyframes latir{
  0%  {transform:scale(.55);opacity:var(--pico)}
  70% {opacity:0}
  100%{transform:scale(3.4); opacity:0}}

/* ─────────── pie del hero ─────────── */
.hero-pie{position:relative;display:flex;align-items:center;
  justify-content:space-between;gap:20px;
  background:linear-gradient(180deg,transparent,rgba(8,12,9,.5) 60%);
  padding:clamp(40px,6vh,80px) calc(var(--marco) + clamp(16px,3vw,52px))
          clamp(12px,1.8vh,18px)}
/* ── columna izquierda: el titular ── */
/* ── la banda y el pie, pegados al fondo ── */
.hero-abajo{position:absolute;left:0;right:0;bottom:0;z-index:8}

/* la cinta va la última, pegada al borde inferior, para dejar libre
   al caballo */
.marquesina{position:relative;overflow:hidden;pointer-events:none;
  padding-block:clamp(8px,1.3vh,14px);
  background:rgba(8,12,9,.5);backdrop-filter:blur(3px);
  border-top:1px solid rgba(244,238,224,.18)}
.cinta{display:flex;align-items:center;gap:clamp(20px,3vw,48px);width:max-content;
  /* la frase es larga: el bucle se alarga para que la lectura no corra */
  animation:cinta-corre 62s linear infinite}
.cinta span{font-family:var(--serif);font-weight:400;white-space:nowrap;
  font-size:clamp(1.05rem,2.1vw,1.9rem);line-height:1.2;letter-spacing:.01em;
  color:rgba(248,245,238,.92);text-shadow:0 2px 20px rgba(0,0,0,.75)}
.cinta .sep{font-size:clamp(.55rem,.85vw,.75rem);color:rgb(var(--ac));opacity:.9;
  transition:color .9s ease}
/* el bucle es exacto porque el texto va cuatro veces y se desplaza la mitad */
@keyframes cinta-corre{to{transform:translateX(-50%)}}

.nav-guardianes{display:flex;align-items:center;gap:18px}
.cuenta{font-size:.64rem;letter-spacing:.24em;color:var(--claro-2);
  text-shadow:0 2px 20px rgba(0,0,0,.8)}
.cuenta i{font-style:normal;opacity:.4;margin:0 .3em}
.cuenta span{color:rgb(var(--ac));transition:color .8s ease}

/* ── columna derecha: el guardián activo ── */
.hero-der{position:absolute;right:calc(var(--marco) + clamp(16px,3vw,52px));
  top:50%;transform:translateY(-50%);z-index:7;text-align:right;
  padding:26px 28px;
  max-width:min(24vw,270px);
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 28px rgba(0,0,0,.85);
  pointer-events:none}
.hero-der .cta{pointer-events:auto}
/* un velo suave detrás del texto: la escena tiene zonas muy claras y
   sin esto el rótulo se pierde sobre las margaritas */
.hero-der::before{content:'';position:absolute;inset:-10% -14%;z-index:-1;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(8,12,9,.62),rgba(8,12,9,.28) 62%,transparent);
  filter:blur(14px)}
.hero-der .arriba{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--claro);margin-bottom:5px}
.hero-der .abajo{font-family:var(--serif);font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.05;
  color:var(--claro)}
.hero-der .sub{margin-top:8px;font-size:.58rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgb(var(--ac));transition:color .8s ease}
.hero-der .cta{margin-top:22px;padding:13px 24px;font-size:.66rem}
.hero-der.cambia{opacity:0;transform:translateY(calc(-50% + 8px))}
.hero-der{transition:opacity .45s ease,transform .5s var(--suave)}
.indice{display:flex;gap:8px;align-items:center}
.indice button{width:5px;height:5px;border-radius:99px;background:rgba(244,238,224,.3);
  transition:width .6s var(--suave),background .6s,box-shadow .6s}
.indice button[aria-current="true"]{width:24px;background:rgb(var(--ac));
  box-shadow:0 0 12px rgba(var(--ac),.8)}

@media (max-width:900px){
  /* en vertical el guardián baja al centro-bajo y la cinta sube */
  .hero-der{position:absolute;left:0;right:0;top:auto;transform:none;
    max-width:none;text-align:center;
    padding-inline:calc(var(--marco) + 20px);
    bottom:clamp(150px,23vh,215px)}
  .hero-der.cambia{transform:translateY(8px)}
  .hero-der .abajo{font-size:clamp(1.15rem,5.4vw,1.6rem)}
  .hero-pie{flex-direction:column;gap:14px;align-items:center}
}
@media (max-width:620px){
  .hero-pie{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .foto-hero img,.rayos,.niebla,.cinta{animation:none}
  .cinta{justify-content:center}
  .foto-hero img{transform:scale(1.05)}
}

/* ─────────── el home es una sola pantalla, sin scroll ─────────── */
body.portal{height:100svh;overflow:hidden}
body.portal .hero{height:100svh;min-height:0}
.credito{display:flex;align-items:center;gap:16px;justify-content:flex-end;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,238,224,.45);text-align:right}
.credito p{max-width:34ch}
.credito a{border-bottom:1px solid rgba(201,169,106,.5);transition:color .4s}
.credito a:hover{color:var(--oro-claro)}
@media (max-width:620px){
  .hero-pie{flex-direction:column;align-items:center;gap:14px}
  .credito{text-align:center}
}

/* ═══════════ foco: la escena se oscurece salvo el punto activo ═══════════
   --px/--py se registran con @property para que la posición del foco
   pueda transicionar; sin soporte, el salto es instantáneo y ya. */
@property --px{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --py{syntax:'<percentage>';inherits:true;initial-value:50%}

.foco{position:absolute;inset:0;z-index:2;pointer-events:none;
  --px:50%; --py:50%;
  background:radial-gradient(circle at var(--px) var(--py),
    rgba(6,10,7,0) 0%, rgba(6,10,7,0) 12%,
    rgba(6,10,7,.06) 40%, rgba(6,10,7,.20) 76%, rgba(6,10,7,.30) 100%);
  transition:--px 1.5s var(--suave), --py 1.5s var(--suave), opacity .9s ease}

/* ═══════════ salida hacia la página interna ═══════════ */
.velo-salida{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%),
    rgba(var(--ac),.5) 0%, rgba(8,12,9,.96) 62%);
  transition:opacity .72s ease}
body.saliendo .velo-salida{opacity:1}
body.saliendo .foto-hero img{transform:scale(1.55);transition:transform .95s cubic-bezier(.5,0,.75,0)}
body.saliendo .campo,body.saliendo .hero-pie,body.saliendo .cabecera{opacity:0;
  transition:opacity .45s ease}

@media (prefers-reduced-motion:reduce){
  .foco,.velo-salida{transition:none}
  body.saliendo .foto-hero img{transform:scale(1.05)}
}

/* ═══════════ geometría dorada sobre la escena ═══════════
   Va en screen: suma luz a la fotografía en vez de taparla, igual que
   los puntos de los guardianes. z-index 3 la deja bajo la viñeta y el
   grano, así que la atmósfera pasa por encima y no flota. */
.geo{position:absolute;inset:0;z-index:3;pointer-events:none;
  mix-blend-mode:screen;color:var(--oro-claro)}

.columna{position:absolute;top:50%;translate:0 -50%;
  width:clamp(30px,3.2vw,52px);height:min(78vh,620px);opacity:.5;
  filter:drop-shadow(0 0 8px rgba(232,210,160,.3)) drop-shadow(0 0 3px rgba(0,0,0,.5))}
.columna svg{width:100%;height:100%}
.columna.izq{left:clamp(10px,2.2vw,44px)}
.columna.der{right:clamp(10px,2.2vw,44px)}

@media (max-width:760px){
  .columna{display:none}                 /* en móvil no hay margen para ellas */
}