/* @cpi 2026-10-19 01:10: landing promocional de la portada (plan SEO, fase G). Todo va bajo #login (el diálogo de acceso,
   que es el que hace scroll) para no tocar el salón. Paleta de la landing actual (ciruela, ámbar) con el rosa neón de las
   filas de máquinas como único acento llamativo. Letra grande y contraste alto: el público ronda los 40–60 años. */
#login.access-landing{--pink:#ff5fa8;--copy:#dccbe3;scroll-behavior:smooth}
#login .promo,#login .hero{--copy:#dccbe3}

/* Hero: titular emotivo, subtítulo, botón al acceso (móvil) e ilustración. */
#login .hero .hero-headline{font:400 clamp(40px,4.3vw,60px)/1.07 Georgia,serif;letter-spacing:-.025em;margin:6px 0 20px;color:var(--text);text-wrap:balance}
#login .hero .hero-copy{font-size:19px;line-height:1.6;max-width:560px;color:var(--copy);margin:0}
#login .hero .hero-cta{display:none}
#login .hero-figure{margin:28px 0 0}
#login .hero-figure img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 0 0 1px #e0b97540,0 28px 60px #0008}
#login .hero-figure figcaption{font:italic 17px/1.4 Georgia,serif;color:var(--muted);margin:12px 4px 0}
#login .access-entry{scroll-margin-top:16px}

/* Contenedor de las secciones nuevas. */
#login .promo{max-width:1250px;margin:0 auto;padding:30px 40px 0;color:var(--text);font-size:18px;line-height:1.6}
#login .promo>section{margin:0 0 110px}
#login .promo h2{font:400 clamp(34px,3.8vw,50px)/1.1 Georgia,serif;letter-spacing:-.02em;color:var(--text);margin:0 0 16px;text-wrap:balance}
#login .promo h3{font:600 21px/1.3 Inter,"Segoe UI",sans-serif;color:var(--text);margin:0 0 6px}
#login .promo p{margin:0;color:var(--copy)}
#login .promo ul,#login .promo ol,#login .promo dl{list-style:none;margin:0;padding:0}
#login .promo-head{max-width:720px;margin-bottom:34px}
#login .promo-head p{font-size:19px}
#login .promo a{color:inherit}
#login .promo a:focus-visible,#login .hero a:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:6px}
#login .promo a.promo-link,#login .promo-more a{color:var(--gold);font-weight:600;text-decoration:none;border-bottom:1px solid #e0b97566}
#login .promo a.promo-link:hover,#login .promo-more a:hover{border-bottom-color:var(--gold)}

/* Así de fácil: tres pasos (es una secuencia, de ahí las monedas numeradas). */
#login .promo-steps{padding-top:40px;border-top:1px solid var(--line)}
#login .promo-steps ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:26px}
#login .promo-steps .coin{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;margin-bottom:18px;font:700 26px Georgia,serif;color:#3a2410;background:radial-gradient(circle at 35% 30%,#fff1c9,#e0b975 55%,#a8782f);box-shadow:inset 0 0 0 4px #c99a4c,0 6px 18px #0006}
#login .promo-steps p{font-size:17.5px}

/* Los de siempre: una fila de máquinas por época sobre un suelo de neón; el rótulo de la época es el único neón. */
#login .shelf{margin-bottom:46px}
#login .shelf:after{content:'';display:block;height:3px;border-radius:2px;background:var(--pink);box-shadow:0 0 6px #ff5fa8,0 6px 22px #ff2d8a80}
#login .shelf-sign{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 22px;margin-bottom:14px}
#login .shelf-sign h3{font:italic 400 34px/1.1 Georgia,serif;color:#ffe3f1;text-shadow:0 0 4px #ff5fa8,0 0 16px #ff2d8aa0,0 0 34px #ff2d8a55;margin:0}
#login .shelf-sign p{font-size:17px;color:var(--muted)}
#login .promo .shelf-row{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:10px 4px 0;scrollbar-width:thin;scrollbar-color:#ff5fa866 transparent}
#login .shelf-row li{flex:1 0 112px;max-width:150px;scroll-snap-align:start}
#login .shelf-row a{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;padding-bottom:16px;border-radius:10px}
#login .shelf-cab{display:flex;align-items:flex-end;justify-content:center;width:100%;height:196px;margin-bottom:12px}
#login .shelf-cab img{width:auto;max-width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 10px 12px #0009);transition:transform .2s}
#login .shelf-row a:hover img,#login .shelf-row a:focus-visible img{transform:translateY(-5px)}
#login .shelf-row b{font-size:16px;line-height:1.25;font-weight:650}
#login .shelf-row small{font-size:15px;color:var(--muted);margin:2px 0 8px}
#login .shelf-row .mode{font-size:13.5px;font-weight:600;line-height:1.2;padding:4px 10px;border-radius:999px;background:#ffffff12;color:var(--copy)}
#login .shelf-row .mode-coop{background:#e0b97526;color:#f3d49b}
#login .shelf-row .mode-versus{background:#ff5fa826;color:#ffc2df}
#login .promo-more{font-size:19px}

/* A dobles, como entonces. */
#login .promo-duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,70px);align-items:center}
#login .promo figure{margin:0}
#login .promo-duo img,#login .room-art img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 0 0 1px #e0b97533,0 26px 56px #0008}
#login .promo .lead{font-size:19px;margin-bottom:24px}
#login .promo-duo dt{font:italic 400 25px/1.2 Georgia,serif;color:var(--gold)}
#login .promo-duo dd{margin:4px 0 18px;color:var(--copy);font-size:17.5px}

/* El salón: ilustración grande, qué se hace dentro y captura real enmarcada como una pantalla. */
#login .room-art{margin-bottom:40px}
#login .promo-room{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px 56px;align-items:center}
#login .promo-room>.promo-head,#login .promo-room>.room-art{grid-column:1/-1}
#login .promo-room>.promo-head{margin-bottom:0}
#login .room-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
#login .room-points li{padding-left:18px;border-left:3px solid #e0b97566}
#login .room-points p{font-size:17px}
#login .room-shot img{display:block;width:100%;height:auto;border-radius:12px;border:10px solid #0d0a14;box-shadow:0 0 0 1px #ffffff1f,0 0 40px #ff5fa833,0 24px 50px #0009}
#login .room-shot figcaption{font:italic 17px/1.4 Georgia,serif;color:var(--muted);margin-top:12px;text-align:center}

/* Cierre: la moneda entrando en la ranura y vuelta a la tarjeta de acceso. */
#login .promo-coin{position:relative;border-radius:22px;overflow:hidden;min-height:440px;display:flex;align-items:center;box-shadow:0 0 0 1px #e0b97533}
#login .promo-coin>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
#login .promo-coin>div{position:relative;max-width:560px;padding:48px clamp(28px,5vw,64px);background:linear-gradient(90deg,#140c1cf0 40%,#140c1c00)}
#login .promo-coin h2 em{color:var(--gold)}
#login .promo-coin p{font-size:19px;margin-bottom:28px}
#login .promo a.btn-primary{color:#2a1a0c}
#login .promo-coin .btn{font-size:18px;min-height:54px;padding:14px 26px}

/* Preguntas frecuentes. */
#login .promo-faq{max-width:840px}
#login .promo-faq details{border-bottom:1px solid var(--line)}
#login .promo-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font:400 22px/1.35 Georgia,serif;color:var(--text)}
#login .promo-faq summary::-webkit-details-marker{display:none}
#login .promo-faq summary:after{content:'+';font:300 28px/1 Inter,sans-serif;color:var(--gold);transition:transform .2s}
#login .promo-faq details[open] summary:after{transform:rotate(45deg)}
#login .promo-faq summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#login .promo-faq details p{padding:0 0 22px;font-size:18px}

/* Pie. */
#login .promo-foot{border-top:1px solid var(--line);padding:30px 0 44px}
#login .promo-foot ul{display:flex;flex-wrap:wrap;gap:12px 30px;margin-bottom:16px}
#login .promo-foot a{color:var(--copy);text-decoration:none;font-size:17px}
#login .promo-foot a:hover{color:var(--gold)}
#login .promo-foot p{font-size:14.5px;color:var(--muted)}

/* Un único momento animado: los rótulos de neón de cada época se encienden al entrar en pantalla (sin JavaScript). */
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  #login .shelf-sign h3{animation:neon-on linear both;animation-timeline:view();animation-range:entry 10% entry 70%}
 }
}
@keyframes neon-on{0%{opacity:.25;text-shadow:none}35%{opacity:.9}45%{opacity:.35}60%{opacity:1;text-shadow:0 0 4px #ff5fa8}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){#login.access-landing{scroll-behavior:auto}#login .shelf-cab img,#login .promo-faq summary:after{transition:none}}

@media(max-width:1000px){
 #login .promo-room{grid-template-columns:minmax(0,1fr)}
 #login .promo-duo{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
 #login .hero .hero-headline{font-size:clamp(34px,9.6vw,44px);margin-top:8px}
 #login .hero .hero-copy{font-size:18px;max-width:none}
 #login .hero .hero-cta{display:inline-flex;margin-top:22px;font-size:18px;min-height:52px;padding:12px 24px}
 #login .hero-figure{margin-top:26px}
 #login .hero-figure figcaption{font-size:16px}
 #login .access-entry .login-mascot{margin:30px 0 -1px auto}
 #login .promo{padding:20px 20px 0;font-size:17px}
 #login .promo>section{margin-bottom:76px}
 #login .promo h2{font-size:33px}
 #login .promo-head{margin-bottom:26px}
 #login .promo-head p,#login .promo .lead{font-size:18px}
 #login .promo-steps ol{grid-template-columns:minmax(0,1fr);gap:28px}
 #login .promo-steps li{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:18px}
 #login .promo-steps .coin{grid-row:span 2;margin:0}
 #login .shelf-sign h3{font-size:30px}
 #login .promo .shelf-row{gap:12px;margin:0 -20px;padding:10px 20px 0;scroll-padding-left:20px}
 #login .shelf:after{margin:0 -20px}
 #login .shelf-row li{flex:0 0 118px}
 #login .shelf-cab{height:170px}
 #login .room-points{grid-template-columns:minmax(0,1fr);gap:22px}
 #login .room-shot img{border-width:6px}
 #login .promo-coin{display:block;min-height:0}
 #login .promo-coin>img{position:static;height:220px}
 #login .promo-coin>div{max-width:none;padding:26px 22px 30px;background:#140c1c}
 #login .promo a.btn-primary{color:#2a1a0c}
#login .promo-coin .btn{width:100%}
 #login .promo-faq summary{font-size:20px}
}