/* Barra de navegación, portada (con su entrada animada) y la frase destacada. */

/* ---------- Barra fija (aparece al bajar de la portada) ---------- */
.topnav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:18px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  transform:translateY(-100%);transition:transform .5s var(--ease)}
.topnav.show{transform:none}
.topnav .mono{flex:none;font-family:var(--script);font-size:32px;line-height:1;text-decoration:none;color:var(--ink)}
.topnav .mono span{color:var(--gold-text);font-size:.8em;margin:0 2px}
.topnav nav{flex:1;display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;font-family:var(--caps);font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  mask-image:linear-gradient(90deg,#000 85%,transparent)}
.topnav nav::-webkit-scrollbar{display:none}
.topnav nav a{white-space:nowrap;text-decoration:none;opacity:.7;padding-block:6px;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s}
.topnav nav a:hover,.topnav nav a.active{opacity:1;border-color:var(--gold)}
.topnav .cta{flex:none;min-height:0;padding:9px 16px;font-size:11.5px}
@media (max-width:560px){.topnav .cta{display:none}}

/* ---------- Portada ---------- */
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;padding-block:96px 80px;text-align:center;
  background:radial-gradient(ellipse at 50% 40%,var(--stone) 0%,var(--bg) 70%)}
/* Rosa de los vientos de fondo, girando muy despacio */
.hero::before{content:"";position:absolute;right:-110px;bottom:-90px;width:clamp(280px,42vw,520px);aspect-ratio:1;
  background:var(--compass) center/contain no-repeat;opacity:.1;pointer-events:none}
/* Foto de portada opcional (img/portada.jpg), con zoom lento */
.hero .bgimg{position:absolute;inset:0;background:center 62%/cover no-repeat;opacity:0;transition:opacity 2s var(--ease)}
.hero.con-foto .bgimg{opacity:.85;filter:contrast(1.18) brightness(.94)} /* siluetas bien marcadas (Kike eligió «más contraste») */
/* velo beige sobre la foto para que se integre con la web y el texto se lea bien */
.hero .bgimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 25%,transparent),transparent 25%,transparent 80%,var(--bg))}
.hero.con-foto::before{opacity:.06}
/* con foto, la tarjeta deja ver el fondo un poco (papel translúcido) */
.hero.con-foto .frame{background:color-mix(in srgb,var(--paper) 74%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hero .wrap{position:relative;z-index:1;width:100%}

/* Marco de invitación: papel con doble filete dorado */
.hero .frame{position:relative;padding:clamp(48px,8vw,76px) clamp(18px,4vw,52px) clamp(40px,7vw,64px);
  background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero .frame::before{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:3px;pointer-events:none}

.hero .rings{display:block;width:clamp(100px,22vw,140px);height:auto;margin:0 auto 20px}
.hero .eyebrow{justify-content:center}
.hero .eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.names{font-family:var(--script);font-weight:400;font-size:clamp(78px,19vw,160px);line-height:.95;letter-spacing:0;color:var(--ink)}
.names .amp{display:block;font-family:var(--script);font-size:.45em;color:var(--gold-text);margin:6px 0}
.hero .date{max-width:460px;margin:30px auto 0;padding-top:26px;border-top:1px dashed color-mix(in srgb,var(--gold) 55%,transparent); /* tarjeta de embarque */
  font-family:var(--display);font-size:clamp(18px,3vw,22px);letter-spacing:.06em}
.hero .place{margin-top:8px;font-family:var(--caps);font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-text)}
.countdown{display:flex;justify-content:center;gap:clamp(16px,5vw,46px);margin-top:40px}
.countdown div{min-width:56px}
.countdown b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(30px,6vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.countdown span{font-family:var(--caps);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.hero .btns{justify-content:center;margin-top:40px}

/* Ordenador: tarjeta más ancha y baja para que quepa entera en la pantalla (nombres en una línea) */
@media (min-width:900px){
  .hero{padding-block:72px 56px}
  .hero .wrap{max-width:900px}
  .hero .frame{padding:44px 56px 40px}
  .hero .rings{width:96px;margin-bottom:12px}
  .names{font-size:clamp(84px,8.4vw,124px);line-height:1.05}
  .names .amp{display:inline;font-size:.55em;margin:0 .22em}
  .hero .date{margin-top:18px;padding-top:18px}
  .countdown{margin-top:24px}
  .hero .btns{margin-top:26px}
}
/* Ordenador con foto: la foto ocupa la mitad izquierda (se funde con el fondo) y la tarjeta va a la derecha */
@media (min-width:900px){
  .hero.con-foto .bgimg{right:46%;opacity:1;background-position:center 70%;
    -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
  .hero.con-foto::before{left:-140px;right:auto}
  .hero.con-foto .wrap{max-width:none;padding-left:50%;padding-right:clamp(24px,5vw,80px)}
  .hero.con-foto .frame{max-width:640px;padding-inline:36px}
  .hero.con-foto .names{font-size:clamp(64px,6vw,100px)}
  .hero.con-foto .names .amp{display:block;margin:0}
}
@media (min-width:900px) and (max-height:760px){
  .hero .rings{width:76px}
  .names{font-size:clamp(72px,7vw,104px)}
  .countdown b{font-size:34px}
}

/* ---------- Entrada de la portada, tipo vídeo (empieza cuando el body tiene la clase .lista) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .hero .frame>*{opacity:0;transform:translateY(16px);filter:blur(6px);
    transition:opacity 1.4s var(--ease),transform 1.4s var(--ease),filter 1.4s var(--ease)}
  .js .hero .frame{opacity:0;transform:scale(.985);transition:opacity 1.2s var(--ease),transform 1.6s var(--ease)}
  .lista .hero .frame,.lista .hero .frame>*{opacity:1;transform:none;filter:none}
  .lista .hero .frame>:nth-child(1){transition-delay:.3s}
  .lista .hero .frame>:nth-child(2){transition-delay:.6s}
  .lista .hero .frame>:nth-child(3){transition-delay:.85s;transition-duration:2s} /* los nombres, más lentos */
  .lista .hero .frame>:nth-child(4){transition-delay:1.3s}
  .lista .hero .frame>:nth-child(5){transition-delay:1.45s}
  .lista .hero .frame>:nth-child(6){transition-delay:1.6s}
  .lista .hero .frame>:nth-child(n+7){transition-delay:1.8s}
  /* Los anillos se dibujan solos */
  .js .rings .trazo{stroke-dasharray:190;stroke-dashoffset:190;transition:stroke-dashoffset 2.2s var(--ease) .4s}
  .lista .rings .trazo{stroke-dashoffset:0}
  .js .rings .brillo{opacity:0;transition:opacity 1s ease 2.2s}
  .lista .rings .brillo{opacity:1}
  /* Movimiento lento de fondo */
  .hero::before{animation:girar 180s linear infinite}
  .hero.con-foto .bgimg{animation:acercar 30s ease-in-out infinite alternate}
}
@keyframes girar{to{rotate:360deg}}
@keyframes acercar{from{transform:scale(1)}to{transform:scale(1.08)}}

/* ---------- Frase destacada ---------- */
#frase.band{padding-block:clamp(64px,9vw,104px)}
.big-quote{position:relative;max-width:660px;margin:0 auto;padding:34px 8px;
  font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(24px,4.4vw,34px);line-height:1.4;color:var(--ink)}
.big-quote::before,.big-quote::after{position:absolute;font-family:Georgia,"Times New Roman",serif;font-style:normal;font-size:96px;line-height:1;color:var(--gold-text);opacity:.45}
.big-quote::before{content:"\201C";left:-6px;top:-18px}
.big-quote::after{content:"\201D";right:-6px;bottom:-62px}
/* Pantallas de ordenador bajas: nombres en una línea para que la tarjeta quepa */
@media (min-width:900px) and (max-height:820px){
  .hero{padding-block:56px 40px}
  .hero.con-foto .names .amp{display:inline;margin:0 .2em}
  .hero.con-foto .names{font-size:clamp(56px,5vw,84px)}
  .hero .btns{margin-top:20px}
}