/* ============================================================
   PORTADA «WOW» (2026-10-18) — companion de js/modules/portada-wow.js.
   Monocromo (sigue a --s1/--void: claro y oscuro).
   ============================================================ */
.pw-k{display:block;font:600 10.5px 'Space Grotesk',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--s3,rgba(237,237,235,.55))}

/* ---------- 1. Apertura ---------- */
html.pw-pronto::before{content:'';position:fixed;inset:0;z-index:6000;background:#030305;animation:pw-tapa-fuera .5s 3s forwards}
@keyframes pw-tapa-fuera{to{opacity:0;visibility:hidden}}
html.pw-abriendo,html.pw-abriendo body{overflow:hidden}
.pw-apertura{position:fixed;inset:0;z-index:6001;background:radial-gradient(120% 80% at 50% 30%,#101017,#030305 70%);cursor:pointer;transition:opacity .6s ease,visibility .6s ease}
.pw-apertura.is-saliendo{opacity:0;visibility:hidden}
.pw-apertura-cv{position:absolute;inset:0;width:100%;height:100%}
.pw-apertura-txt{position:absolute;left:0;right:0;top:60%;text-align:center;color:#EDEDEB;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.pw-apertura-txt.is-visible{opacity:1;transform:none}
.pw-apertura-txt.is-saliendo{opacity:0;transform:translateY(-6px)}
.pw-apertura-txt p{margin:0;padding:0 28px;font:300 clamp(22px,5.6vw,34px)/1.25 'Fraunces',Georgia,serif}
.pw-apertura-txt em{font-style:italic}
.pw-apertura-txt small{display:block;margin-top:14px;font:500 11px 'Space Grotesk',sans-serif;letter-spacing:.16em;color:rgba(237,237,235,.5)}
.pw-apertura-saltar{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 28px);text-align:center;font:500 10px 'Space Grotesk',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,237,235,.32)}

/* ---------- 4. Titular de tinta ---------- */
.pw-tinta .pw-palabra{display:inline-block;opacity:0;filter:blur(9px);transform:translateY(.14em);letter-spacing:.06em}
.pw-tinta.is-revelando .pw-palabra{animation:pw-tinta 1.05s calc(var(--i,0) * 85ms) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes pw-tinta{55%{opacity:.85;filter:blur(1.5px)}to{opacity:1;filter:blur(0);transform:none;letter-spacing:inherit}}

/* ---------- 2. Lámina plateada ---------- */
/* 2026-10-22: solo la carta del día. El «levantar» al pasar el ratón va con
   translate (propiedad aparte), así no pisa la inclinación. */
#hero .hero-central.pw-inclinable{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.pw-lamina{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;mix-blend-mode:overlay;opacity:.9;
  background:
    radial-gradient(circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.6),rgba(255,255,255,0) 42%),
    repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 12px,rgba(255,255,255,.09) 16px,rgba(255,255,255,0) 22px),
    conic-gradient(from 200deg at var(--lx,50%) var(--ly,50%),rgba(225,232,242,0),rgba(225,232,242,.35),rgba(242,236,225,0) 30%,rgba(242,236,225,.28) 55%,rgba(225,232,242,0) 72%)}

/* ---------- 8. La carta viaja ---------- */
#hero .hero-central.pw-viaja{z-index:60;animation:pw-viaja .55s cubic-bezier(.55,0,.25,1) forwards}
@keyframes pw-viaja{
  35%{transform:translate(calc(var(--vx) * .3),calc(var(--vy) * .3 - 30px)) rotate(-6deg) scale(1.12);box-shadow:0 0 60px rgba(237,237,235,.45)}
  to{transform:translate(var(--vx),var(--vy)) rotate(0deg) scale(1.6);box-shadow:0 0 120px rgba(237,237,235,.6);filter:brightness(1.25)}}
html.pw-viajando #hero .hero-copy > *,html.pw-viajando #hero .hero-lateral,html.pw-viajando #hero .hero-cielo,html.pw-viajando #hero .hero-pildora,html.pw-viajando #hero .hero-card-caption,html.pw-viajando #nav,html.pw-viajando .app-bottom-nav{opacity:.08;transition:opacity .45s ease}
html.pw-viajando .pw-inclinable{transform:none !important}

/* ---------- 10. Luz suave del cursor (ordenador) ---------- */
#hero > .hero-grid{position:relative;z-index:1}
.pw-luz{position:absolute;left:0;top:0;z-index:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s ease;will-change:transform;
  background:radial-gradient(circle,rgba(237,237,235,.075),rgba(237,237,235,.025) 40%,transparent 68%)}
.pw-luz.is-on{opacity:1}

/* ---------- 3. La Luna de hoy ---------- */
.pw-luna{display:grid;justify-items:center;text-align:center;gap:6px;padding-top:40px !important}
.pw-luna-cv{width:min(78vw,340px);aspect-ratio:1;height:auto}
.pw-luna-fase{margin:10px 0 0;font:300 clamp(40px,11vw,64px)/1 'Fraunces',Georgia,serif;letter-spacing:-.02em;color:var(--s1)}
.pw-luna-fase em{font-style:italic}
.pw-luna-frase{max-width:380px;margin:12px auto 0;font:400 14px/1.55 'Space Grotesk',sans-serif;color:var(--s3)}
.pw-luna-datos{display:flex;justify-content:center;gap:clamp(18px,6vw,40px);margin:20px 0 24px}
.pw-luna-datos b{display:block;font:400 21px 'Fraunces',Georgia,serif;color:var(--s1)}
.pw-luna-datos small{font:500 9.5px 'Space Grotesk',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--s3)}
@media(min-width:900px){
  .pw-luna{grid-template-columns:1fr 1fr;align-items:center;text-align:left;justify-items:start;max-width:1060px;margin:0 auto}
  .pw-luna-cv{justify-self:center;width:400px}
  .pw-luna-frase{margin-left:0}
  .pw-luna-datos{justify-content:flex-start}
}

/* ---------- 7. El cielo de hoy ---------- */
.pw-cielo{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;justify-items:center;text-align:center;overflow:hidden}
.pw-cielo h2{margin:10px 0 0;font:400 clamp(28px,7vw,44px)/1.15 'Fraunces',Georgia,serif;color:var(--s1)}
.pw-cielo h2 em{font-style:italic}
.pw-cielo-sub{margin:10px 0 0;font:400 13px 'Space Grotesk',sans-serif;color:var(--s3)}
.pw-rueda-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.pw-r-chip{padding:8px 13px;border-radius:999px;border:1px solid color-mix(in srgb,var(--s1) 22%,transparent);background:none;color:var(--s1);font:500 12px 'Space Grotesk',sans-serif;cursor:pointer}
.pw-r-chip.is-on{background:var(--s1);color:var(--void,#08080c);border-color:var(--s1)}
.pw-rueda-info{min-height:44px;max-width:420px;margin:12px auto 0;font:400 13.5px/1.5 'Space Grotesk',sans-serif;color:var(--s3)}
.pw-rueda-info b{display:block;color:var(--s1);font:400 18px 'Fraunces',Georgia,serif;margin-bottom:2px}
.pw-rueda-marco{width:min(560px,100%);aspect-ratio:1;margin-top:6px}
.pw-rueda{width:100%;height:100%;overflow:visible}
.pw-rueda-giro{transform:rotate(-38deg);opacity:0;transition:transform 1.8s cubic-bezier(.2,.8,.2,1),opacity 1s ease}
.pw-cielo.is-lista .pw-rueda-giro{transform:none;opacity:1;animation:pw-deriva 18s 2s ease-in-out infinite alternate}
@keyframes pw-deriva{from{transform:rotate(0)}to{transform:rotate(4deg)}}
.pw-r-borde{fill:none;stroke:color-mix(in srgb,var(--s1) 26%,transparent)}
.pw-r-borde--fino{stroke:color-mix(in srgb,var(--s1) 14%,transparent)}
.pw-r-punteado{fill:none;stroke:color-mix(in srgb,var(--s1) 9%,transparent);stroke-dasharray:2 6}
.pw-r-div{stroke:color-mix(in srgb,var(--s1) 18%,transparent)}
.pw-r-signo{fill:color-mix(in srgb,var(--s1) 70%,transparent);font-size:19px;font-family:'Space Grotesk',system-ui,sans-serif}
.pw-r-rayo{stroke:color-mix(in srgb,var(--s1) 9%,transparent);transition:stroke .3s}
.pw-r-rayo.is-on{stroke:color-mix(in srgb,var(--s1) 55%,transparent)}
.pw-r-planeta{cursor:pointer;outline:none}
.pw-r-planeta circle{fill:var(--void,#08080c);stroke:var(--s1);stroke-width:1;transition:fill .25s}
.pw-r-planeta text{fill:var(--s1);font-size:16px;font-family:'Space Grotesk',system-ui,sans-serif;pointer-events:none}
.pw-r-planeta .pw-r-retro{font-size:9px;font-weight:700}
.pw-r-planeta.is-on circle{fill:var(--s1)}
.pw-r-planeta.is-on text{fill:var(--void,#08080c)}
.pw-r-planeta.is-on .pw-r-retro{fill:var(--s1)}
.pw-r-planeta:focus-visible circle{stroke-width:2.5}
.pw-r-centro{fill:var(--s1)}
@media(min-width:900px){
  .pw-cielo{grid-template-columns:1fr 1fr;align-items:center;text-align:left;justify-items:start;max-width:1100px;margin:0 auto}
  .pw-rueda-chips{justify-content:flex-start}
  .pw-rueda-info{margin-left:0}
  .pw-rueda-marco{width:520px}
}

@media(prefers-reduced-motion:reduce){
  .pw-tinta .pw-palabra{opacity:1;filter:none;transform:none;animation:none}
  .pw-rueda-giro{transform:none;opacity:1;transition:none}
  .pw-cielo.is-lista .pw-rueda-giro{animation:none}
}

/* 2026-10-22: la ilustración ya lleva el nombre de la carta impreso; el rótulo
   encima lo duplicaba en ordenador (en móvil ya estaba oculto). */
#hero .hero-abanico .vcard-name,#hero .hero-abanico .vcard-num{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}