@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');
:root{--wine:#780d18;--red:#a71622;--gold:#d89d25;--ink:#251b1c;--cream:#fbf4e9;--paper:#fffdf8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}.site-header{height:86px;padding:8px clamp(16px,5vw,72px);background:#fffaf1;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand img{width:118px;height:68px;object-fit:contain}.header-copy{display:flex;flex-direction:column;text-align:center;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:#8e7666}.header-copy strong{font-size:.88rem;letter-spacing:.19em;color:var(--wine)}.level-link{font-weight:700;color:var(--wine);text-decoration:none;border-bottom:1px solid #d6b16a;padding-bottom:3px}.hero{min-height:555px;position:relative;display:grid;align-items:center;overflow:hidden;background:#531016;color:white}.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(65,6,14,.94) 0%,rgba(81,8,18,.79) 42%,rgba(71,8,14,.15) 100%),url('assets/roleplay-atmosphere.jpg') center/cover;opacity:.97}.hero-content{position:relative;padding:72px clamp(24px,9vw,132px);max-width:720px}.eyebrow{margin:0 0 14px;color:var(--gold);font-size:.72rem;letter-spacing:.2em;font-weight:700;text-transform:uppercase}.hero h1,.coming-soon h1{font:700 clamp(3.4rem,7vw,6.4rem)/.9 'Playfair Display',serif;letter-spacing:-.055em;margin:0}.hero h1 em{color:#e6b044}.intro{max-width:520px;font-size:1.05rem;line-height:1.7;margin:26px 0 34px;color:#fae9de}.button{display:inline-flex;align-items:center;gap:18px;padding:15px 22px;text-decoration:none;background:var(--wine);color:#fff;border:0;font:700 .78rem 'DM Sans';letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.button-light{background:#f7e3bf;color:var(--wine)}.game-section{padding:84px clamp(18px,8vw,112px);background:radial-gradient(circle at 20% 50%,#f2dfc5 0,transparent 26%),var(--cream)}.section-heading{max-width:650px}.section-heading h2{font:700 clamp(2.1rem,4.5vw,3.8rem)/1 'Playfair Display',serif;margin:0 0 15px;letter-spacing:-.04em}.section-heading>p:not(.eyebrow){line-height:1.65;color:#655650}.game-layout{display:grid;grid-template-columns:minmax(230px,.82fr) minmax(320px,1.18fr);gap:clamp(28px,7vw,100px);align-items:center;max-width:1000px;margin:55px auto 0}.deck-area{text-align:center;position:relative;padding:32px}.deck-glow{position:absolute;inset:15%;background:#eab34c;filter:blur(55px);opacity:.35}.deck{position:relative;width:230px;aspect-ratio:3/4;border:6px solid #f2cf7d;box-shadow:12px 14px 0 #4e0610,0 20px 35px #4c171842;background:linear-gradient(135deg,#b91f2a,#700b16 54%,#3f0610);color:#f5d388;border-radius:9px;cursor:pointer;overflow:hidden}.deck:before,.deck:after{content:'';position:absolute;border:1px solid #f4d58c;border-radius:50%;width:150px;height:150px;left:35px;top:68px;opacity:.7}.deck:after{transform:rotate(45deg) scale(.72)}.deck span{position:relative;z-index:1;display:block}.deck-small{font-size:.63rem;letter-spacing:.2em;margin-top:27px}.deck-main{font:700 6rem/1 'Playfair Display';margin-top:28px}.deck-label{font-size:.65rem;line-height:1.45;letter-spacing:.13em;font-weight:700;margin-top:24px}.deck-note{position:relative;font-size:.75rem;color:#79655d;margin:27px 0 0}.deck.draw{animation:draw .55s ease}@keyframes draw{50%{transform:rotate(-7deg) translateY(-16px)}100%{transform:none}}.challenge-card{background:var(--paper);box-shadow:0 17px 45px #6d3e2624;display:grid;grid-template-columns:.9fr 1.1fr;min-height:330px;transition:opacity .18s,transform .18s}.challenge-card.changing{opacity:.2;transform:translateY(8px)}.card-image{background:center/cover;min-height:230px;background-image:linear-gradient(135deg,#c88b28,#7a0b17)}.is-empty .card-image{background:linear-gradient(135deg,#d39a35,#83101b)}.card-content{padding:32px}.card-number{font-size:.67rem;color:var(--red);font-weight:700;letter-spacing:.16em}.card-content h3{font:700 clamp(1.8rem,3vw,2.6rem)/1.05 'Playfair Display';margin:15px 0}.card-content>p{font-size:.92rem;line-height:1.65;color:#5d5050}.tip{border-top:1px solid #eadbc8;margin-top:22px;padding-top:15px;font-size:.78rem;line-height:1.4;color:#765942}.tip span{color:var(--gold);font-size:1.1rem}.how-it-works{padding:82px clamp(20px,8vw,112px);background:#710c17;color:#fff}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:1060px;margin:30px auto 0}.steps div{border-top:1px solid #bd7476;padding-top:18px}.steps b{color:#e7b64c;font:600 1.3rem 'Playfair Display'}.steps h3{font:600 1.3rem 'Playfair Display';margin:10px 0}.steps p{color:#f2d7ca;font-size:.9rem;margin:0}footer{padding:29px 20px;background:#fdf9f1;text-align:center;color:#7d6b61;font-size:.72rem}footer img{width:86px;height:49px;object-fit:contain;display:block;margin:auto}.level-page{min-height:100vh;display:flex;flex-direction:column}.level-page main{flex:1;display:grid;place-items:center;background:linear-gradient(120deg,#f8eddc,#eed5b0)}.coming-soon{text-align:center;padding:70px 22px;max-width:600px}.coming-soon h1{color:var(--wine);font-size:clamp(5rem,14vw,9rem)}.coming-soon h2{font:700 2.5rem 'Playfair Display';margin:0}.coming-soon p:not(.eyebrow){color:#735e56;line-height:1.6;margin:14px auto 28px;max-width:380px}.sun{font-size:3rem;color:var(--gold);margin:5px}@media(max-width:680px){.site-header{height:72px}.brand img{width:92px;height:54px}.header-copy{display:none}.hero{min-height:570px}.hero-content{padding-top:120px;padding-bottom:72px}.hero h1{font-size:3.5rem}.game-section{padding-top:62px}.game-layout{grid-template-columns:1fr;margin-top:34px}.deck-area{order:2;padding:10px}.deck{width:176px}.deck-main{font-size:4.7rem;margin-top:22px}.deck-label{margin-top:13px}.challenge-card{grid-template-columns:1fr;min-height:0}.card-image{min-height:210px}.card-content{padding:25px}.steps{grid-template-columns:1fr;gap:25px}.how-it-works{padding-top:58px}.level-link{font-size:.85rem}}

/* Card-selection motion */
.deck:disabled { cursor: wait; filter: saturate(.72); }
.challenge-card.is-rolling { box-shadow: 0 17px 45px #6d3e2624, 0 0 0 2px #d89d2555; }
.challenge-card.card-swap { animation: card-swap .19s ease-out; }
.challenge-card.is-selected { animation: card-selected .44s cubic-bezier(.2,.75,.22,1.2); }
@keyframes card-swap { 0% { opacity:.2; transform:translateX(16px) scale(.985); } 100% { opacity:1; transform:none; } }
@keyframes card-selected { 0% { opacity:.35; transform:translateY(12px) scale(.98); } 65% { transform:translateY(-4px) scale(1.012); } 100% { opacity:1; transform:none; } }
/* Site-wide motion system */
body { overflow-x: hidden; }
.site-header { position: relative; z-index: 10; transition: box-shadow .35s ease, background-color .35s ease; }
.site-header:hover { box-shadow: 0 8px 28px #5b171313; }
.brand, .level-link, .button, .deck { -webkit-tap-highlight-color: transparent; }
.brand { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.brand:hover { transform: rotate(-2deg) scale(1.04); }
.level-link { transition: color .25s ease, transform .25s ease, border-color .25s ease; }
.level-link:hover { color: var(--gold); border-color: var(--gold); transform: translateX(4px); }
.hero { isolation: isolate; }
.hero::after { content:''; position:absolute; z-index:0; width:28rem; height:28rem; border-radius:50%; background:radial-gradient(circle, #e7b64c38 0, #d59a2230 22%, transparent 68%); right:-10rem; top:-11rem; pointer-events:none; animation: hero-glow 8s ease-in-out infinite; }
.hero-photo { z-index:0; transform: translate(var(--mx, 0px), var(--my, 0px)) scale(1.035); transition: transform .8s cubic-bezier(.2,.75,.25,1); }
.hero-content { z-index:1; }
.hero-content .eyebrow { animation: eyebrow-in .85s .1s both; }
.hero-content h1 { animation: hero-title .85s .18s both; }
.hero-content .intro { animation: hero-title .85s .28s both; }
.hero-content .button { animation: hero-title .85s .38s both; }
@keyframes hero-glow { 0%,100% { transform:translate3d(0,0,0) scale(.92); opacity:.55; } 50% { transform:translate3d(-30px,40px,0) scale(1.12); opacity:1; } }
@keyframes eyebrow-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes hero-title { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.button { position:relative; overflow:hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background-color .25s ease; }
.button::before { content:''; position:absolute; inset:0; background:linear-gradient(110deg, transparent 20%, #fff8 50%, transparent 80%); transform:translateX(-130%); transition:transform .65s ease; }
.button:hover { transform:translateY(-4px); box-shadow:0 11px 24px #510a1d38; }
.button:hover::before { transform:translateX(130%); }
.button:active, .deck:active { transform:translateY(1px) scale(.98); }
.game-section { position:relative; overflow:hidden; }
.game-section::after { content:''; position:absolute; width:26rem; height:26rem; right:-14rem; bottom:-16rem; border:1px solid #d89d254d; border-radius:50%; box-shadow:0 0 0 34px #d89d250c, 0 0 0 68px #d89d2507; pointer-events:none; animation: orbit 13s linear infinite; }
@keyframes orbit { to { transform:rotate(360deg); } }
.deck-area { transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.deck-area:hover { transform:translateY(-7px); }
.deck { transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease; }
.deck:hover { transform:rotate(-2deg) translateY(-8px); box-shadow:16px 21px 0 #4e0610,0 27px 42px #4c171856; filter:brightness(1.08); }
.challenge-card { overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.challenge-card:hover { transform:translateY(-7px); box-shadow:0 27px 55px #6d3e2633; }
.card-image { transition:transform .7s cubic-bezier(.2,.75,.25,1); }
.challenge-card:hover .card-image { transform:scale(1.06); }
.steps > div { transition:transform .3s ease, border-color .3s ease; }
.steps > div:hover { transform:translateY(-7px); border-color:#e9bc5a; }
.steps b { display:inline-block; transition:transform .35s ease; }
.steps > div:hover b { transform:rotate(-12deg) scale(1.16); }
footer img { transition:transform .5s ease; } footer:hover img { transform:scale(1.07); }
.has-motion .reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease var(--reveal-delay, 0ms), transform .75s cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms); }
.has-motion .reveal.is-visible { opacity:1; transform:none; }
.pointer-orb { position:fixed; z-index:100; width:30px; height:30px; border:1px solid #d89d25aa; border-radius:50%; background:#d89d2515; pointer-events:none; transition:transform .14s ease-out, width .25s ease, height .25s ease; mix-blend-mode:multiply; }
@media (hover:none) { .hero-photo { transform:scale(1.025); } .deck-area:active { transform:translateY(-5px) scale(.99); } .challenge-card:hover { transform:none; } .challenge-card:active { transform:scale(.99); } .button:active { box-shadow:0 5px 14px #510a1d30; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
/* Branded page transition */
.page-transition { position:fixed; z-index:999; inset:0; pointer-events:none; background:linear-gradient(135deg, #570710 0%, #8b101c 52%, #d89d25 140%); clip-path:circle(0% at 100% 0%); transition:clip-path .42s cubic-bezier(.7,0,.25,1); }
.page-transition::before { content:'EL MUNDO HISPANO'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-8deg); color:#f9dfae; font:600 clamp(.75rem,2vw,1.15rem) 'DM Sans',sans-serif; letter-spacing:.45em; white-space:nowrap; opacity:0; transition:opacity .22s ease .2s; }
.page-transition.is-leaving { clip-path:circle(150% at 100% 0%); pointer-events:auto; }
.page-transition.is-leaving::before { opacity:.85; }
.page-transition.is-entering { clip-path:circle(150% at 0% 100%); }
@media (max-width:680px) { .page-transition::before { letter-spacing:.28em; } }
/* Mobile game order and image sizing */
@media (max-width:680px) {
  .game-layout .deck-area { order:0; }
  .challenge-card .card-image { min-height:0; height:54vw; max-height:205px; }
}/* Full-picture card frame: the whole photo stays visible over a blurred copy of itself */
.card-image { position:relative; isolation:isolate; overflow:hidden; min-height:380px; background:#2b0a0f; cursor:zoom-in; outline:none; }
.card-image::before { content:''; position:absolute; inset:-30px; z-index:-1; background:var(--img, linear-gradient(135deg,#c88b28,#7a0b17)) center/cover; filter:blur(22px) saturate(1.2) brightness(.62); transform:scale(1.08); }
.card-image::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, transparent 55%, #25060b66 100%); }
.card-photo { position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:contain; filter:drop-shadow(0 14px 26px #16030699); transition:transform .7s cubic-bezier(.2,.75,.25,1), opacity .3s ease; }
.challenge-card:hover .card-image { transform:none; }
.challenge-card:hover .card-photo { transform:scale(1.035); }
.card-image.is-zoomed .card-photo { opacity:0; }
.card-image:focus-visible { box-shadow:inset 0 0 0 3px var(--gold); }
.zoom-hint { position:absolute; z-index:2; right:14px; bottom:14px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#fffaf1e6; box-shadow:0 6px 18px #25060b55; color:var(--wine); transition:transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s ease, color .3s ease; }
.zoom-hint svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.card-image:hover .zoom-hint { transform:scale(1.12); background:var(--gold); color:#fff; }
.is-empty .card-image, .is-rolling .card-image { cursor:default; }
.is-empty .card-image::before { background:linear-gradient(135deg,#d39a35,#83101b); filter:none; transform:none; }
.is-empty .card-photo, .is-empty .zoom-hint, .is-rolling .zoom-hint { display:none; }
/* Lightbox */
.lightbox { position:fixed; z-index:500; inset:0; display:grid; place-items:center; padding:clamp(16px,4vw,48px); }
.lightbox[hidden] { display:none; }
.lightbox-backdrop { position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, #5a0c16c7, #1c0408eb 75%); -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1); opacity:0; transition:opacity .45s ease; }
.lightbox.is-open .lightbox-backdrop { opacity:1; }
.lightbox-figure { position:relative; margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:100%; max-height:100%; }
.lightbox-img { display:block; width:auto; height:auto; max-width:min(92vw, 720px); max-height:calc(100vh - 130px); max-height:calc(100dvh - 130px); border-radius:10px; box-shadow:0 30px 80px #0d0204b3, 0 0 0 1px #f2cf7d40; cursor:default; transform-origin:center; will-change:transform; }
.lightbox-caption { color:#f9dfae; font:600 clamp(1.15rem,2.6vw,1.6rem) 'Playfair Display',serif; letter-spacing:.01em; text-align:center; opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.lightbox.is-open .lightbox-caption { opacity:1; transform:none; transition-delay:.25s; }
.lightbox-close { position:absolute; z-index:2; top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); width:48px; height:48px; border:1px solid #f2cf7d66; border-radius:50%; background:#fffaf114; color:#f9dfae; cursor:pointer; -webkit-tap-highlight-color:transparent; opacity:0; transform:scale(.7) rotate(-90deg); transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1), background-color .25s ease; }
.lightbox.is-open .lightbox-close { opacity:1; transform:none; transition-delay:.15s; }
.lightbox-close:hover, .lightbox-close:focus-visible { background:var(--gold); color:#fff; outline:none; }
.lightbox-close span, .lightbox-close span::before { position:absolute; left:50%; top:50%; width:18px; height:2px; background:currentColor; border-radius:2px; transform:translate(-50%,-50%) rotate(45deg); }
.lightbox-close span::before { content:''; transform:translate(-50%,-50%) rotate(90deg); }
html.lightbox-open, html.lightbox-open body { overflow:hidden; }
html.lightbox-open .pointer-orb { opacity:0; }
@media (max-width:680px) {
  .challenge-card .card-image { height:auto; max-height:none; min-height:0; aspect-ratio:4/5; }
  .card-photo { inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); }
  .lightbox-img { max-width:calc(100vw - 32px); max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px); }
}

/* ========== Shared: extra buttons, card-back art, footer ========== */
.button-ghost { background:transparent; color:var(--wine); box-shadow:inset 0 0 0 1.5px var(--wine); }
.button-gold { background:linear-gradient(135deg,#ecbd55,#c98a1c); color:#2a070c; }
.button-ghost-light { background:transparent; color:#f9dfae; box-shadow:inset 0 0 0 1.5px #f2cf7d80; }
.button:disabled { opacity:.55; cursor:wait; transform:none; box-shadow:none; }
.level-link { white-space:nowrap; }
.stairs-hero h1, .hero-a12 h1, .hero-conv h1 { font:700 clamp(3.2rem,7vw,6.2rem)/.92 'Playfair Display',serif; letter-spacing:-.055em; margin:0; }
.stairs-hero h1 em, .hero-a12 h1 em, .hero-conv h1 em { color:#e6b044; }
.fan-card, .pc-back, .stage-back {
  background:
    radial-gradient(circle at 50% 50%, transparent 31%, #f4d58c66 31.6%, transparent 32.8%),
    radial-gradient(circle at 50% 50%, transparent 21%, #f4d58c4d 21.6%, transparent 22.8%),
    linear-gradient(135deg,#b91f2a,#700b16 54%,#3f0610);
  color:#f5d388;
}

.site-footer { padding:0; background:#fdf9f1; color:#7d6b61; font-size:.8rem; }
.site-footer:hover img { transform:none; }
.footer-apps { padding:58px clamp(18px,6vw,80px) 46px; background:linear-gradient(180deg,#f5e8d4,#fdf9f1); text-align:center; }
.footer-apps h2 { font:700 clamp(1.5rem,3.4vw,2.2rem)/1.1 'Playfair Display',serif; color:var(--ink); margin:0 0 30px; letter-spacing:-.02em; }
.app-list { list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,150px)); justify-content:center; gap:clamp(8px,3vw,30px); }
.app-list a { display:flex; flex-direction:column; align-items:center; gap:11px; padding:16px 6px; border-radius:16px; color:var(--ink); text-decoration:none; font-weight:600; font-size:.82rem; line-height:1.25; transition:background-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); -webkit-tap-highlight-color:transparent; }
.site-footer .app-list img { display:block; width:64px; height:64px; margin:0; border-radius:17px; object-fit:cover; box-shadow:0 10px 22px #5b17132e, 0 0 0 1px #0000000d; transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.app-list a:hover, .app-list a:focus-visible { background:#fffaf1; outline:none; }
.site-footer .app-list a:hover img, .site-footer .app-list a:focus-visible img { transform:translateY(-5px) rotate(-4deg) scale(1.05); box-shadow:0 16px 28px #5b171340; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:14px 22px; flex-wrap:wrap; padding:20px clamp(18px,6vw,80px); border-top:1px solid #eadbc8; }
.footer-bottom p { margin:0; flex:1; text-align:center; }
.site-footer .footer-brand img { width:86px; height:49px; object-fit:contain; display:block; margin:0; transition:transform .5s ease; }
.site-footer .footer-brand:hover img { transform:scale(1.07); }
.instagram-link { display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 7px; border-radius:999px; color:var(--wine); text-decoration:none; font-weight:700; box-shadow:inset 0 0 0 1px #d6b16a; transition:background-color .3s ease, color .3s ease, transform .3s ease; }
.instagram-link svg { width:32px; height:32px; padding:6px; border-radius:50%; background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 62%,#285aeb 95%); fill:none; stroke:#fff; stroke-width:2; }
.instagram-link svg .dot { fill:#fff; stroke:none; }
.instagram-link:hover, .instagram-link:focus-visible { background:var(--wine); color:#fff; transform:translateY(-2px); outline:none; }
@media (max-width:680px) {
  .footer-apps { padding:44px 12px 34px; }
  .app-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .app-list a { padding:12px 2px; font-size:.7rem; gap:9px; }
  .site-footer .app-list img { width:54px; height:54px; border-radius:14px; }
  .footer-bottom { flex-direction:column; text-align:center; padding:24px 16px 28px; }
}

/* ========== Home: level staircase ========== */
.stairs-hero { position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); align-items:end; gap:clamp(24px,5vw,72px); min-height:calc(100vh - 86px); min-height:calc(100svh - 86px); padding:clamp(60px,7vw,100px) clamp(20px,7vw,112px) 0; background:#4a0b12; color:#fff; }
.stairs-photo { position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(65,6,14,.9),rgba(81,8,18,.74) 48%,rgba(38,4,9,.97)),url('assets/roleplay-atmosphere.jpg') center/cover; transform:scale(1.04); }
.stairs-hero::before { content:''; position:absolute; z-index:-1; width:34rem; height:34rem; border-radius:50%; right:-8rem; top:-12rem; background:radial-gradient(circle,#e7b64c47 0,#d59a2230 25%,transparent 68%); animation:hero-glow 8s ease-in-out infinite; pointer-events:none; }
.stairs-hero::after { content:''; position:absolute; z-index:-1; width:26rem; height:26rem; border-radius:50%; left:-12rem; bottom:-12rem; background:radial-gradient(circle,#a7162266 0,transparent 65%); filter:blur(10px); pointer-events:none; }
.stairs-copy { align-self:center; padding-bottom:clamp(40px,6vw,96px); max-width:560px; }
.stairs-copy .eyebrow { animation:eyebrow-in .85s .1s both; }
.stairs-copy h1 { animation:hero-title .85s .18s both; }
.stairs-copy .intro { animation:hero-title .85s .28s both; }
.stairs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; height:clamp(380px,46vw,520px); padding-top:18px; }
.stair { position:relative; display:flex; flex-direction:column; gap:6px; padding:clamp(18px,2vw,26px); color:#fff; text-decoration:none; background:linear-gradient(180deg,#a11a26 0%,#6d0c17 45%,#3f060e 100%); box-shadow:inset -10px 0 18px #2a03084d, inset 0 1px 0 #f7d98f; transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease, box-shadow .35s ease; animation:stair-rise .95s cubic-bezier(.2,.8,.2,1) backwards; -webkit-tap-highlight-color:transparent; }
.stair::before { content:''; position:absolute; left:0; right:0; top:-14px; height:14px; background:linear-gradient(180deg,#f7d98f,#d89d25); transform:skewX(-40deg); transform-origin:bottom left; }
.stair::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,#fff3 0%,transparent 35%); opacity:0; transition:opacity .35s ease; pointer-events:none; }
.stair-1 { height:44%; animation-delay:.25s; }
.stair-2 { height:69%; animation-delay:.4s; }
.stair-3 { height:94%; animation-delay:.55s; }
.stair-step { font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.stair strong { font:700 clamp(2rem,3.4vw,3rem)/1 'Playfair Display',serif; letter-spacing:-.03em; }
.stair-3 strong { font-size:clamp(1.35rem,2.3vw,2.05rem); }
.stair-name { font-size:.84rem; color:#f5d9cd; line-height:1.35; }
.stair-meta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#f9dfae; }
.stair-meta b { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#f7e3bf; color:var(--wine); font-size:1rem; transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s ease; }
.stair:hover, .stair:focus-visible { transform:translateY(-12px); filter:brightness(1.12); box-shadow:inset -10px 0 18px #2a03084d, inset 0 1px 0 #f7d98f, 0 24px 40px #1a030799, 0 0 0 1px #f2cf7d88; outline:none; z-index:2; }
.stair:hover::after, .stair:focus-visible::after { opacity:1; }
.stair:hover .stair-meta b, .stair:focus-visible .stair-meta b { transform:translateX(4px); background:var(--gold); color:#fff; }
@keyframes stair-rise { from { opacity:0; transform:translateY(70px); } to { opacity:1; transform:none; } }
@media (max-width:760px) {
  .stairs-hero { grid-template-columns:1fr; align-items:start; min-height:0; padding:52px 16px 0; gap:10px; }
  .stairs-copy { padding-bottom:28px; }
  .stairs-hero h1 { font-size:3.1rem; }
  .stairs { display:flex; flex-direction:column-reverse; align-items:stretch; height:auto; padding-top:26px; }
  .stair { height:auto; min-height:118px; }
  .stair-1 { margin-right:22%; }
  .stair-2 { margin-left:11%; margin-right:11%; }
  .stair-3 { margin-left:22%; }
  .stair strong, .stair-3 strong { font-size:1.75rem; }
  .stair:hover, .stair:focus-visible { transform:translateY(-6px); }
}

/* ========== A1.2: banner ========== */
.hero-a12 { position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:24px; min-height:570px; padding:0 clamp(24px,8vw,120px); background:#3d0710; color:#fff; }
.a12-photo { position:absolute; inset:0; z-index:-2; background:linear-gradient(100deg,rgba(55,5,12,.96) 0%,rgba(92,10,21,.84) 46%,rgba(62,6,14,.5) 100%),url('assets/banner-a12.jpg') center/cover; transform:scale(1.03); }
.hero-a12::before, .hero-a12::after { content:''; position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); pointer-events:none; }
.hero-a12::before { width:30rem; height:30rem; right:4%; top:50%; margin-top:-15rem; background:#d89d2559; animation:blob-drift 10s ease-in-out infinite; }
.hero-a12::after { width:22rem; height:22rem; left:-6rem; bottom:-8rem; background:#a7162299; animation:blob-drift 12s ease-in-out infinite reverse; }
@keyframes blob-drift { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(-40px,30px,0) scale(1.15); } }
.a12-copy { padding:80px 0; max-width:600px; }
.a12-copy .eyebrow { animation:eyebrow-in .85s .1s both; }
.a12-copy h1 { animation:hero-title .85s .18s both; }
.a12-copy .intro { animation:hero-title .85s .28s both; }
.a12-copy .button { animation:hero-title .85s .38s both; }
.a12-fan { position:relative; height:400px; }
.fan-card { position:absolute; left:50%; bottom:34px; width:180px; aspect-ratio:2/3; margin-left:-90px; border:5px solid #f2cf7d; border-radius:12px; box-shadow:inset 0 0 0 5px #700b16, inset 0 0 0 6px #f4d58c88, 0 22px 44px #1a0307aa; transform-origin:50% 125%; transform:rotate(var(--r)); animation:fan-in 1.1s cubic-bezier(.2,.8,.2,1) both; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.fan-card::after { content:'¿?'; position:absolute; inset:0; display:grid; place-items:center; font:700 3.6rem 'Playfair Display',serif; color:#f5d388; }
.fan-card:nth-child(1) { --r:-26deg; --r2:-36deg; animation-delay:.35s; }
.fan-card:nth-child(2) { --r:-13deg; --r2:-18deg; animation-delay:.45s; }
.fan-card:nth-child(3) { --r:0deg; --r2:0deg; animation-delay:.55s; }
.fan-card:nth-child(4) { --r:13deg; --r2:18deg; animation-delay:.65s; }
.fan-card:nth-child(5) { --r:26deg; --r2:36deg; animation-delay:.75s; }
.a12-fan:hover .fan-card { transform:rotate(var(--r2)) translateY(-10px); }
.fan-card:nth-child(3)::before { content:''; position:absolute; inset:0; border-radius:6px; background:linear-gradient(115deg,transparent 35%,#fff6 50%,transparent 65%); background-size:250% 100%; animation:card-glint 4.5s 1.6s ease-in-out infinite; }
@keyframes fan-in { from { opacity:0; transform:rotate(0deg) translateY(80px); } to { opacity:1; transform:rotate(var(--r)); } }
@keyframes card-glint { 0%,60% { background-position:120% 0; } 100% { background-position:-120% 0; } }
@media (max-width:760px) {
  .hero-a12 { grid-template-columns:1fr; min-height:0; padding:0 16px 10px; gap:0; }
  .a12-copy { padding:64px 0 10px; }
  .hero-a12 h1 { font-size:3.3rem; }
  .a12-fan { height:250px; }
  .fan-card { width:118px; margin-left:-59px; bottom:14px; border-width:4px; }
  .fan-card::after { font-size:2.4rem; }
}

/* ========== A1.2: card table ========== */
.cards-section { position:relative; overflow:hidden; padding:84px clamp(16px,8vw,112px); background:radial-gradient(circle at 85% 12%,#f2dfc5 0,transparent 30%),var(--cream); }
.cards-toolbar { max-width:1040px; margin:34px auto 26px; display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap; }
.cards-count { margin:0; font-size:.88rem; font-weight:600; color:#79655d; }
.cards-actions { display:flex; gap:10px; flex-wrap:wrap; }
.card-table { max-width:1040px; margin:0 auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,2vw,22px); }
.play-card { position:relative; aspect-ratio:2/3; padding:0; border:0; background:none; border-radius:12px; cursor:pointer; perspective:1000px; transition:transform .5s cubic-bezier(.2,.8,.2,1); -webkit-tap-highlight-color:transparent; }
.pc-inner { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.pc-face { position:absolute; inset:0; overflow:hidden; border-radius:12px; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.pc-back { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:4px solid #f2cf7d; box-shadow:inset 0 0 0 4px #700b16, inset 0 0 0 5px #f4d58c77, 5px 6px 0 #4e0610, 0 12px 24px #4c171833; }
.back-small { font-size:.56rem; font-weight:700; letter-spacing:.22em; }
.back-main { font:700 clamp(2rem,4.6vw,3.4rem)/1 'Playfair Display',serif; }
.pc-front { transform:rotateY(180deg); background:#2b0a0f; border:3px solid #f2cf7d; box-shadow:0 12px 24px #4c171833; }
.pc-front img { width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(.9); }
.pc-num { position:absolute; left:10px; bottom:8px; font:700 1.25rem 'Playfair Display',serif; color:#f9dfae; }
.pc-check { position:absolute; top:8px; right:8px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--gold); color:#fff; font-size:.72rem; font-weight:700; }
.play-card.is-revealed .pc-inner { transform:rotateY(180deg); }
.play-card:hover { transform:translateY(-9px) rotate(-1.5deg); }
.play-card:hover .pc-back { filter:brightness(1.1); }
.play-card:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.play-card.is-lifted { visibility:hidden; }
.card-table.is-gathering .play-card { transform:translate(var(--gx),var(--gy)) rotate(var(--gr)); transition-delay:calc(var(--i) * 12ms); }
.card-table.no-transition .play-card { transition:none; }
.card-table.is-waiting .play-card { opacity:0; }
.card-table.is-dealing .play-card { animation:deal-in .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms) both; }
@keyframes deal-in { from { opacity:0; transform:translateY(-70px) rotate(-12deg) scale(.9); } to { opacity:1; transform:none; } }
@media (max-width:680px) {
  .cards-section { padding:60px 14px 70px; }
  .cards-toolbar { flex-direction:column; align-items:stretch; text-align:center; }
  .cards-actions { display:grid; grid-template-columns:1fr 1fr; }
  .cards-actions .button { justify-content:center; padding:14px 10px; gap:10px; }
  .card-table { grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
  .back-small { font-size:.45rem; letter-spacing:.16em; }
  .pc-back { border-width:3px; box-shadow:inset 0 0 0 3px #700b16, inset 0 0 0 4px #f4d58c77, 3px 4px 0 #4e0610; }
  .play-card:hover { transform:none; }
}

/* ========== A1.2: the flipped card on stage ========== */
.card-stage { position:fixed; z-index:400; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:16px; }
.card-stage[hidden] { display:none; }
.stage-backdrop { position:absolute; inset:0; background:radial-gradient(circle at 50% 40%,#5a0c16c7,#1c0408eb 75%); -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1); opacity:0; transition:opacity .45s ease; }
.card-stage.is-open .stage-backdrop { opacity:1; }
.stage-card { position:relative; width:min(410px, calc(100vw - 32px), calc((100vh - 140px) / 1.5)); width:min(410px, calc(100vw - 32px), calc((100dvh - 140px) / 1.5)); aspect-ratio:2/3; perspective:1800px; }
.stage-inner { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateY(180deg); will-change:transform; }
.stage-face { position:absolute; inset:0; overflow:hidden; border-radius:16px; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.stage-back { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border:8px solid #f2cf7d; box-shadow:inset 0 0 0 8px #700b16, inset 0 0 0 9px #f4d58c88, 0 30px 70px #0d0204b3; }
.stage-back .back-small { font-size:.8rem; }
.stage-back .back-main { font-size:7rem; }
.back-label { font-size:.75rem; font-weight:700; letter-spacing:.3em; }
.stage-front { transform:rotateY(180deg); background:#1e0509; box-shadow:0 30px 80px #0d0204b3, 0 0 0 1px #f2cf7d66; }
.face-photo { position:absolute; inset:0; cursor:zoom-in; outline:none; }
.face-photo img { display:block; width:100%; height:100%; object-fit:cover; filter:brightness(.8) saturate(.95); transition:transform .8s cubic-bezier(.2,.75,.25,1); }
.face-photo::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(22,3,7,.28) 0%,transparent 22%,transparent 38%,rgba(24,4,8,.72) 62%,rgba(20,3,6,.97) 100%); }
.face-photo:hover img { transform:scale(1.03); }
.face-photo:focus-visible { box-shadow:inset 0 0 0 3px var(--gold); }
.face-photo .zoom-hint { top:14px; bottom:auto; }
.face-photo:hover .zoom-hint { transform:scale(1.12); background:var(--gold); color:#fff; }
.face-photo.is-zoomed img { opacity:0; }
.face-text { position:absolute; left:0; right:0; bottom:0; padding:clamp(18px,6%,28px); color:#fff; pointer-events:none; }
.face-num { font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.face-text h3 { margin:9px 0 12px; font:700 clamp(1.3rem,5.6vw,1.8rem)/1.14 'Playfair Display',serif; letter-spacing:-.01em; text-wrap:balance; }
.face-question { margin:0; padding-top:12px; border-top:1px solid #f2cf7d59; color:#f9dfae; font-size:clamp(.95rem,3.8vw,1.08rem); font-weight:600; line-height:1.45; }
.stage-controls { position:relative; opacity:0; transform:translateY(14px); transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.card-stage.is-open .stage-controls { opacity:1; transform:none; transition-delay:.6s; }
.card-stage.is-open .stage-close { opacity:1; transform:none; transition-delay:.15s; }
html.stage-open, html.stage-open body { overflow:hidden; }
html.stage-open .pointer-orb { opacity:0; }

/* ========== Conversación ========== */
.hero-conv { position:relative; overflow:hidden; isolation:isolate; display:grid; place-items:center; min-height:600px; padding:90px 20px; text-align:center; background:#1d070b; color:#fff; }
.conv-photo-bg { position:absolute; inset:-40px; z-index:-2; background:url('assets/banner-conv.jpg') center/cover; filter:blur(4px) brightness(.5) saturate(1.1); transform:scale(1.05); }
.hero-conv::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 14% 18%,rgba(216,157,37,.28),transparent 36%),radial-gradient(circle at 86% 82%,rgba(167,22,34,.5),transparent 42%),radial-gradient(ellipse at 50% 55%,rgba(120,13,24,.35),transparent 62%),linear-gradient(180deg,rgba(29,7,11,.5),rgba(29,7,11,.93)); }
.hero-conv::after { content:''; position:absolute; z-index:-1; left:50%; top:50%; width:min(640px,130vw); aspect-ratio:1; border-radius:50%; border:1px dashed #f2cf7d40; transform:translate(-50%,-50%); animation:ring-spin 60s linear infinite; pointer-events:none; }
@keyframes ring-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.conv-hero-copy { max-width:720px; }
.conv-hero-copy .eyebrow { animation:eyebrow-in .85s .1s both; }
.conv-hero-copy h1 { animation:hero-title .85s .18s both; }
.conv-hero-copy .intro { margin:18px auto 32px; animation:hero-title .85s .36s both; }
.conv-hero-copy .button { animation:hero-title .85s .46s both; }
.voice-wave { display:flex; justify-content:center; align-items:center; gap:5px; height:56px; margin:28px 0 0; animation:hero-title .85s .28s both; }
.voice-wave span { width:4px; height:100%; border-radius:4px; background:linear-gradient(180deg,#f7d98f,#d89d25); transform:scaleY(.2); animation:wave 1.05s ease-in-out infinite alternate; }
.voice-wave span:nth-child(3n) { animation-duration:.8s; }
.voice-wave span:nth-child(3n+1) { animation-duration:1.3s; }
.voice-wave span:nth-child(4n) { animation-delay:-.4s; }
.voice-wave span:nth-child(5n+2) { animation-delay:-.75s; }
.voice-wave span:nth-child(7n+1) { animation-delay:-.2s; }
.voice-wave span:first-child, .voice-wave span:last-child { opacity:.5; }
@keyframes wave { from { transform:scaleY(.15); } to { transform:scaleY(1); } }

.conv-section { position:relative; overflow:hidden; padding:84px clamp(16px,7vw,100px) 100px; background:radial-gradient(circle at 8% 0%,#5a0c1673,transparent 42%),radial-gradient(circle at 92% 100%,#d89d2521,transparent 42%),#1d070b; color:#fff; }
.conv-section .section-heading h2 { color:#fff; }
.conv-section .section-heading > p:not(.eyebrow) { color:#d9c2b8; }
.conv-tiles { max-width:1040px; margin:40px auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.conv-tile { position:relative; overflow:hidden; aspect-ratio:4/3; padding:0; border:0; border-radius:14px; background:#2b0a0f; color:#fff; text-align:left; cursor:pointer; box-shadow:0 0 0 1px #f2cf7d33; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; -webkit-tap-highlight-color:transparent; }
.conv-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.45) saturate(.85); transition:filter .35s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
.conv-tile::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,#1d070bd9); }
.tile-num, .conv-tile strong { position:absolute; z-index:1; left:14px; }
.tile-num { bottom:40px; font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.conv-tile strong { bottom:12px; font:700 1.3rem 'Playfair Display',serif; }
.conv-tile:hover img, .conv-tile:focus-visible img { filter:brightness(.7); transform:scale(1.06); }
.conv-tile:focus-visible { outline:none; box-shadow:0 0 0 2px var(--gold); }
.conv-tile.is-spinning { box-shadow:0 0 0 2px var(--gold), 0 0 30px #d89d2566; transform:translateY(-4px); }
.conv-tile.is-spinning img { filter:brightness(.85) saturate(1); }
.conv-tile.is-active { box-shadow:0 0 0 2px var(--gold), 0 14px 30px #0006; transform:translateY(-6px); }
.conv-tile.is-active img { filter:brightness(.8) saturate(1); }
.conv-spin { text-align:center; margin:30px 0 38px; }
.conv-stage { max-width:1040px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); overflow:hidden; border:1px solid #f2cf7d2e; border-radius:20px; background:linear-gradient(135deg,#2c0b11,#170407); box-shadow:0 30px 70px #0000006b; }
.conv-stage.is-new { animation:card-selected .55s cubic-bezier(.2,.75,.22,1.2); }
.conv-photo { position:relative; isolation:isolate; overflow:hidden; min-height:470px; background:#2b0a0f; cursor:zoom-in; outline:none; }
.conv-photo::before { content:''; position:absolute; inset:-30px; z-index:-1; background:var(--img, linear-gradient(135deg,#83101b,#2b0a0f)) center/cover; filter:blur(22px) saturate(1.2) brightness(.55); transform:scale(1.08); }
.conv-photo::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,transparent 55%,#25060b80 100%); }
.conv-photo:hover .card-photo { transform:scale(1.035); }
.conv-photo:hover .zoom-hint { transform:scale(1.12); background:var(--gold); color:#fff; }
.conv-photo.is-zoomed .card-photo { opacity:0; }
.conv-photo:focus-visible { box-shadow:inset 0 0 0 3px var(--gold); }
.conv-stage.is-empty .conv-photo { cursor:default; }
.conv-stage.is-empty .conv-photo::before { filter:none; transform:none; background:radial-gradient(circle at 50% 45%,#d89d2540,transparent 45%),linear-gradient(135deg,#83101b,#2b0a0f); }
.conv-stage.is-empty .conv-photo .card-photo, .conv-stage.is-empty .zoom-hint { display:none; }
.conv-stage.is-empty .conv-photo::after { content:'¿?'; display:grid; place-items:center; font:700 7rem 'Playfair Display',serif; color:#f5d38880; background:none; }
.conv-body { padding:clamp(24px,4vw,46px); display:flex; flex-direction:column; }
.conv-num { font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.conv-body h3 { margin:14px 0 16px; font:700 clamp(2rem,3.6vw,2.9rem)/1.05 'Playfair Display',serif; letter-spacing:-.02em; }
.conv-questions { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.conv-questions li { position:relative; padding-left:26px; font-size:1.05rem; line-height:1.5; color:#f3dccf; }
.conv-questions li::before { content:'✦'; position:absolute; left:0; top:0; color:var(--gold); }
.timer { display:flex; align-items:center; gap:24px; margin-top:auto; padding-top:26px; border-top:1px solid #f2cf7d2e; transition:opacity .3s ease; }
.conv-questions + .timer { margin-top:30px; }
.conv-stage.is-empty .timer { opacity:.4; pointer-events:none; }
.timer-ring { position:relative; flex:none; width:124px; height:124px; }
.timer-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-track, .ring-progress { fill:none; stroke-width:7; }
.ring-track { stroke:#ffffff1a; }
.ring-progress { stroke:var(--gold); stroke-linecap:round; transition:stroke-dashoffset .12s linear; filter:drop-shadow(0 0 6px #d89d2566); }
.timer-time { position:absolute; inset:0; display:grid; place-items:center; font:700 1.8rem 'Playfair Display',serif; }
.timer.is-running .timer-ring { animation:timer-breathe 1.6s ease-in-out infinite; }
.timer.is-done .timer-time { color:var(--gold); animation:timer-done .6s ease 3; }
@keyframes timer-breathe { 50% { transform:scale(1.04); } }
@keyframes timer-done { 50% { transform:scale(1.2); } }
.timer-side { flex:1; min-width:0; }
.timer-lengths { display:flex; gap:8px; }
.timer-lengths button { padding:7px 14px; border:1px solid #f2cf7d59; border-radius:999px; background:transparent; color:#f9dfae; font:600 .78rem 'DM Sans',sans-serif; cursor:pointer; transition:background-color .25s ease, color .25s ease; }
.timer-lengths button[aria-pressed="true"] { background:var(--gold); border-color:var(--gold); color:#2a070c; }
.timer-buttons { display:flex; gap:10px; margin:14px 0 12px; }
.timer-buttons .button { padding:13px 20px; }
.timer-note { margin:0; font-size:.85rem; line-height:1.45; color:#d9c2b8; }
@media (max-width:760px) {
  .hero-conv { min-height:540px; padding:70px 16px; }
  .hero-conv h1 { font-size:3.4rem; }
  .conv-section { padding:60px 14px 72px; }
  .conv-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:30px; }
  .conv-tile strong { font-size:1.12rem; }
  .conv-stage { grid-template-columns:1fr; border-radius:16px; }
  .conv-photo { min-height:0; aspect-ratio:4/5; }
  .conv-body { padding:24px 20px 26px; }
  .timer { gap:16px; }
  .timer-ring { width:104px; height:104px; }
  .timer-time { font-size:1.5rem; }
}

/* ========== Header navigation (desktop) + side menu (phone) ========== */
.site-header { display:grid; grid-template-columns:1fr auto 1fr; }
.site-header .brand { justify-self:start; }
.site-nav, .menu-toggle { grid-column:3; grid-row:1; justify-self:end; }
.site-nav { display:flex; align-items:center; gap:4px; padding:5px; border-radius:999px; background:#f4e7d3; box-shadow:inset 0 0 0 1px #e6d2b3; }
.site-nav a { position:relative; padding:9px 15px; border-radius:999px; color:#6d4b44; text-decoration:none; font-size:.78rem; font-weight:700; letter-spacing:.06em; white-space:nowrap; transition:color .25s ease, background-color .25s ease, box-shadow .25s ease; -webkit-tap-highlight-color:transparent; }
.site-nav a:hover, .site-nav a:focus-visible { color:var(--wine); background:#fffaf1; outline:none; }
.site-nav a[aria-current="page"] { color:#fff; background:linear-gradient(135deg,#a71622,#780d18); box-shadow:0 6px 14px #780d1838; }
.menu-toggle { display:none; }
html.menu-open, html.menu-open body, html.stage-open, html.stage-open body, html.lightbox-open, html.lightbox-open body { overflow:hidden; }
html.menu-open body, html.stage-open body, html.lightbox-open body { padding-right:var(--scrollbar, 0px); }
.side-menu { display:none; }
@media (max-width:1100px) {
  .site-header { grid-template-columns:auto 1fr; }
  .site-header .header-copy { display:none; }
  .site-nav, .menu-toggle { grid-column:2; }
}
@media (max-width:760px) {
  .site-nav { display:none; }
  .menu-toggle { display:grid; align-content:center; justify-items:end; gap:5px; width:46px; height:46px; padding:0 11px; border:0; border-radius:50%; background:#f4e7d3; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color .25s ease; }
  .menu-toggle span { display:block; height:2px; border-radius:2px; background:var(--wine); transition:width .3s ease; }
  .menu-toggle span:nth-child(1) { width:22px; }
  .menu-toggle span:nth-child(2) { width:15px; }
  .menu-toggle span:nth-child(3) { width:19px; }
  .menu-toggle:hover span, .menu-toggle:focus-visible span { width:22px; }
  .menu-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .side-menu { display:block; position:fixed; z-index:450; inset:0; }
  .side-menu[hidden] { display:none; }
  .side-backdrop { position:absolute; inset:0; background:#1c0408a6; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; transition:opacity .4s ease; }
  .side-panel { position:absolute; top:0; right:0; bottom:0; width:min(86vw,350px); display:flex; flex-direction:column; padding:18px 20px 28px; overflow-y:auto; color:#fff; background:radial-gradient(circle at 100% 0%,#d89d2533,transparent 45%),radial-gradient(circle at 0% 100%,#a7162266,transparent 50%),linear-gradient(160deg,#6e0c17,#3a060d 70%); box-shadow:-20px 0 50px #0d020466; transform:translateX(104%); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
  .side-menu.is-open .side-backdrop { opacity:1; }
  .side-menu.is-open .side-panel { transform:none; }
  .side-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
  .side-top img { width:86px; height:50px; object-fit:contain; padding:4px 8px; border-radius:10px; background:#fffaf1; }
  .side-close { position:relative; width:44px; height:44px; border:1px solid #f2cf7d66; border-radius:50%; background:#fffaf114; color:#f9dfae; cursor:pointer; }
  .side-close span, .side-close span::before { position:absolute; left:50%; top:50%; width:17px; height:2px; border-radius:2px; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); }
  .side-close span::before { content:''; transform:translate(-50%,-50%) rotate(90deg); }
  .side-links { display:grid; gap:8px; margin-top:4px; }
  .side-links a { display:flex; align-items:center; gap:14px; padding:14px; border-radius:14px; color:#fff; text-decoration:none; background:#ffffff0d; box-shadow:inset 0 0 0 1px #f2cf7d26; opacity:0; transform:translateX(30px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), background-color .25s ease; transition-delay:calc(.12s + var(--k) * 60ms); -webkit-tap-highlight-color:transparent; }
  .side-menu.is-open .side-links a { opacity:1; transform:none; }
  .side-links a:active { background:#ffffff1f; }
  .side-links a[aria-current="page"] { background:linear-gradient(135deg,#f2cf7d,#d89d25); color:#2a070c; box-shadow:none; }
  .menu-num { flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid #f2cf7d66; color:var(--gold); font:700 .95rem 'Playfair Display',serif; }
  .side-links a[aria-current="page"] .menu-num { border-color:#2a070c55; color:#2a070c; }
  .menu-label { flex:1; display:grid; gap:2px; }
  .menu-label strong { font:700 1.3rem/1.1 'Playfair Display',serif; }
  .menu-label small { font-size:.74rem; color:#f3d6c9; }
  .side-links a[aria-current="page"] small { color:#4a1a14; }
  .side-links b { color:var(--gold); }
  .side-links a[aria-current="page"] b { color:#2a070c; }
  .side-instagram { margin-top:auto; padding-top:24px; color:#f9dfae; font-size:.82rem; font-weight:700; text-decoration:none; letter-spacing:.04em; }
}
html.menu-open .pointer-orb { opacity:0; }

/* A1.2 banner: give the two title lines room to breathe */
.hero-a12 h1 { line-height:1.06; }
.hero-a12 h1 em { display:inline-block; margin-top:.08em; }

/* ========== Home: games and features ========== */
.games-intro { position:relative; overflow:hidden; padding:96px clamp(18px,8vw,112px); background:radial-gradient(circle at 90% 8%,#f2dfc5 0,transparent 30%),var(--cream); }
.game-feature { max-width:1060px; margin:64px auto 0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,6vw,80px); align-items:center; }
.game-feature.is-reversed .feature-photo { order:2; }
.feature-photo { position:relative; overflow:hidden; aspect-ratio:4/5; max-height:520px; border-radius:18px; cursor:zoom-in; box-shadow:0 26px 60px #5b17133a, 0 0 0 1px #f2cf7d55; outline:none; }
.feature-photo img { width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.75,.25,1); }
.feature-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,#25060b66); pointer-events:none; }
.feature-photo:hover img, .feature-photo:focus-visible img { transform:scale(1.05); }
.feature-photo.is-zoomed img { opacity:0; }
.feature-num { font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--red); }
.feature-copy h3 { margin:12px 0 14px; font:700 clamp(2rem,3.6vw,3rem)/1.02 'Playfair Display',serif; letter-spacing:-.03em; }
.feature-copy > p { margin:0; color:#655650; line-height:1.7; }
.feature-copy ul { list-style:none; margin:22px 0 28px; padding:0; display:grid; gap:10px; }
.feature-copy li { position:relative; padding-left:26px; color:#4b3c38; font-weight:500; }
.feature-copy li::before { content:'✦'; position:absolute; left:0; color:var(--gold); }
.site-features { padding:90px clamp(18px,8vw,112px); background:linear-gradient(180deg,#f5e8d4,var(--cream)); }
.feature-grid { max-width:1060px; margin:44px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature-grid > div { padding:28px; border-radius:16px; background:#fffdf8; box-shadow:0 14px 34px #6d3e261a, 0 0 0 1px #eadbc8; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.feature-grid > div:hover { transform:translateY(-6px); box-shadow:0 22px 44px #6d3e2626, 0 0 0 1px #e3c58e; }
.feature-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#a71622,#780d18); color:#f7d98f; font-size:1.3rem; box-shadow:0 10px 20px #780d1833; }
.feature-grid h3 { margin:18px 0 8px; font:700 1.35rem 'Playfair Display',serif; }
.feature-grid p { margin:0; color:#6b5a52; font-size:.92rem; line-height:1.6; }
.home-cta { position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; padding:70px clamp(20px,8vw,112px); background:linear-gradient(120deg,#4a0710,#8c101d); color:#fff; }
.home-cta::before { content:''; position:absolute; z-index:-1; width:28rem; height:28rem; right:-8rem; top:-12rem; border-radius:50%; background:radial-gradient(circle,#d89d2566,transparent 65%); animation:hero-glow 8s ease-in-out infinite; }
.home-cta h2 { margin:0 0 10px; font:700 clamp(2rem,4.4vw,3.4rem)/1 'Playfair Display',serif; letter-spacing:-.03em; }
.home-cta p:not(.eyebrow) { margin:0; color:#f6dfcf; max-width:520px; line-height:1.6; }
.cta-actions { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:760px) {
  .games-intro, .site-features { padding:64px 16px; }
  .game-feature { grid-template-columns:1fr; margin-top:46px; gap:22px; }
  .game-feature.is-reversed .feature-photo { order:0; }
  .feature-photo { aspect-ratio:4/3; }
  .feature-grid { grid-template-columns:1fr; gap:12px; }
  .feature-grid > div { display:grid; grid-template-columns:48px 1fr; column-gap:16px; padding:20px; }
  .feature-grid > div .feature-icon { grid-row:span 2; }
  .feature-grid h3 { margin:2px 0 4px; font-size:1.2rem; }
  .home-cta { padding:56px 16px; }
  .cta-actions { width:100%; display:grid; grid-template-columns:1fr; }
  .cta-actions .button { justify-content:space-between; }
}

/* ========== Account ========== */
.account-hero { position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:clamp(56px,7vw,96px) clamp(20px,8vw,112px); background:#3d0710; color:#fff; }
.account-hero::before, .admin-hero::before { content:''; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 85% 20%,#d89d2559,transparent 40%),radial-gradient(circle at 5% 100%,#a7162299,transparent 45%),linear-gradient(120deg,#4a0710,#7a0d18 60%,#5a0912); }
.account-hero::after, .admin-hero::after { content:''; position:absolute; z-index:-1; width:30rem; height:30rem; right:-10rem; top:-14rem; border-radius:50%; background:radial-gradient(circle,#e7b64c40,transparent 65%); filter:blur(10px); animation:hero-glow 9s ease-in-out infinite; }
.account-copy h1 { margin:0; font:700 clamp(3rem,7vw,5.6rem)/.95 'Playfair Display',serif; letter-spacing:-.05em; animation:hero-title .85s .15s both; }
.account-copy h1 em { color:#e6b044; }
.account-email { margin:18px 0 26px; color:#f6dfcf; word-break:break-all; }
.account-actions { display:flex; gap:10px; flex-wrap:wrap; }
.account-ring { position:relative; flex:none; width:170px; height:170px; }
.account-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.account-ring .ring-progress { transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.account-ring > span { position:absolute; inset:0; display:grid; place-content:center; text-align:center; font:700 1.1rem 'Playfair Display',serif; color:#f9dfae; }
.account-ring strong { font-size:3rem; line-height:1; color:#fff; }
.account-ring small { display:block; max-width:96px; margin-top:6px; font:600 .64rem/1.3 'DM Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#f3d6c9; }
.account-levels { padding:80px clamp(16px,8vw,112px) 96px; background:radial-gradient(circle at 10% 10%,#f2dfc5 0,transparent 30%),var(--cream); }
.account-message, .admin-note { min-height:1.2em; margin:16px 0 0; color:#8a5a4c; font-size:.88rem; }
.level-grid { max-width:1060px; margin:22px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.level-card { display:flex; flex-direction:column; overflow:hidden; border-radius:18px; background:#fffdf8; color:inherit; text-decoration:none; box-shadow:0 16px 36px #6d3e261f, 0 0 0 1px #eadbc8; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; -webkit-tap-highlight-color:transparent; }
.level-card:hover, .level-card:focus-visible { transform:translateY(-8px); box-shadow:0 26px 50px #6d3e2633, 0 0 0 2px var(--gold); outline:none; }
.level-photo { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; }
.level-photo img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.75,.25,1); }
.level-card:hover .level-photo img { transform:scale(1.06); }
.level-body { flex:1; display:flex; flex-direction:column; gap:8px; padding:22px 22px 20px; }
.level-kicker { font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.level-body strong { font:700 1.55rem/1.08 'Playfair Display',serif; }
.level-desc { color:#6b5a52; font-size:.9rem; line-height:1.5; }
.level-foot { margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid #eadbc8; }
.level-state { padding:5px 11px; border-radius:999px; background:#f4e7d3; color:#7a5d4f; font-size:.72rem; font-weight:700; }
.level-card.is-started .level-state { background:#fbe8bf; color:#8a5a12; }
.level-card.is-completed .level-state { background:#dcefd7; color:#2f6b2a; }
.level-go { display:inline-flex; align-items:center; gap:8px; color:var(--wine); font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }
.level-go b { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--wine); color:#fff; transition:transform .3s ease; }
.level-card:hover .level-go b { transform:translateX(4px); }
@media (max-width:760px) {
  .account-hero { flex-direction:column; align-items:flex-start; padding:52px 16px 56px; }
  .account-ring { align-self:center; width:150px; height:150px; }
  .account-actions { width:100%; display:grid; }
  .account-levels { padding:56px 14px 70px; }
  .level-grid { grid-template-columns:1fr; gap:14px; }
  .level-card { flex-direction:row; }
  .level-photo { flex:none; width:34%; aspect-ratio:auto; }
  .level-body { padding:16px; }
  .level-body strong { font-size:1.25rem; }
  .level-desc { font-size:.82rem; }
  .level-go span, .level-go { font-size:.72rem; }
}

/* ========== Admin ========== */
.admin-hero { position:relative; overflow:hidden; isolation:isolate; padding:clamp(52px,6vw,84px) clamp(20px,6vw,80px); color:#fff; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:end; }
.admin-hero h1 { margin:0; font:700 clamp(2.8rem,6vw,5rem)/.95 'Playfair Display',serif; letter-spacing:-.05em; }
.admin-hero h1 em { color:#e6b044; }
.admin-hero .intro { margin:16px 0 0; }
.admin-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.admin-stats div { min-width:120px; padding:16px 18px; border-radius:14px; background:#ffffff12; box-shadow:inset 0 0 0 1px #f2cf7d33; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.admin-stats strong { display:block; font:700 2rem/1 'Playfair Display',serif; color:#fff; }
.admin-stats span { display:block; margin-top:6px; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#f3d6c9; }
.admin-main { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:22px; align-items:start; padding:40px clamp(14px,5vw,64px) 80px; background:var(--cream); }
.admin-main[hidden] { display:none; }
.admin-side { display:grid; gap:22px; position:sticky; top:16px; }
.admin-panel { padding:24px; border-radius:18px; background:#fffdf8; box-shadow:0 14px 34px #6d3e261a, 0 0 0 1px #eadbc8; }
.admin-panel h2 { margin:0; font:700 1.6rem 'Playfair Display',serif; }
.admin-panel .eyebrow { margin-bottom:6px; color:var(--red); }
.panel-head { display:flex; align-items:end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.panel-tools { display:flex; gap:8px; flex:1; justify-content:flex-end; min-width:220px; }
.admin-search, .admin-panel input, .admin-dialog input { width:100%; padding:11px 14px; border:1px solid #e2d3c2; border-radius:10px; background:#fff; color:var(--ink); font:500 .92rem 'DM Sans',sans-serif; outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
.admin-search { max-width:280px; }
.admin-search:focus, .admin-panel input:focus, .admin-dialog input:focus { border-color:var(--gold); box-shadow:0 0 0 4px #d89d2522; }
.icon-button { flex:none; width:42px; height:42px; border:0; border-radius:10px; background:#f4e7d3; color:var(--wine); font-size:1.15rem; cursor:pointer; }
.icon-button.is-spinning { animation:spin-once .6s ease; }
@keyframes spin-once { to { transform:rotate(360deg); } }
.student-list { display:grid; gap:10px; }
.student-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; grid-template-areas:'avatar info actions' 'avatar progress actions'; gap:6px 14px; align-items:center; padding:14px 16px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px #efe2d0; transition:box-shadow .25s ease; }
.student-row:hover { box-shadow:0 0 0 1px #e3c58e, 0 10px 22px #6d3e2614; }
.student-row.is-disabled { opacity:.6; }
.student-avatar { grid-area:avatar; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#a71622,#780d18); color:#f7d98f; font:700 1.1rem 'Playfair Display',serif; }
.student-info { grid-area:info; display:grid; gap:2px; min-width:0; }
.student-info strong { font-size:.98rem; }
.student-info span { color:#6b5a52; font-size:.84rem; overflow-wrap:anywhere; }
.student-info small { color:#9a857a; font-size:.74rem; }
.badge { margin-left:6px; padding:2px 8px; border-radius:999px; background:#f1dcdc; color:#8a1f22; font-style:normal; font-size:.66rem; }
.student-progress { grid-area:progress; display:flex; gap:6px; flex-wrap:wrap; }
.chip { padding:3px 10px; border-radius:999px; background:#f2ece4; color:#9a857a; font-size:.7rem; font-weight:700; }
.chip.is-started { background:#fbe8bf; color:#8a5a12; }
.chip.is-completed { background:#dcefd7; color:#2f6b2a; }
.student-actions { grid-area:actions; display:flex; flex-direction:column; gap:6px; }
.mini-button { padding:7px 12px; border:0; border-radius:8px; background:#f4e7d3; color:var(--wine); font:700 .74rem 'DM Sans',sans-serif; cursor:pointer; white-space:nowrap; transition:background-color .2s ease, color .2s ease; }
.mini-button:hover, .mini-button:focus-visible { background:#ecd9bc; outline:none; }
.mini-button.is-danger, .button.is-danger { background:#f6dede; color:#9b1c1f; }
.mini-button.is-danger:hover, .button.is-danger:hover { background:#9b1c1f; color:#fff; }
#addForm { display:grid; gap:12px; margin-top:16px; }
#addForm label { display:grid; gap:6px; font-size:.78rem; font-weight:700; color:#4b3c38; }
.password-row { display:flex; gap:8px; }
#addForm .button { justify-content:space-between; margin-top:4px; }
.credentials { margin-top:14px; padding:14px; border-radius:12px; background:#fbf1e1; box-shadow:inset 0 0 0 1px #ecd5ad; }
.credentials p { margin:0 0 8px; font-size:.8rem; font-weight:700; color:#6d4b44; }
.credentials pre { margin:0 0 10px; white-space:pre-wrap; font:500 .82rem/1.5 'DM Sans',sans-serif; color:var(--ink); user-select:all; }
.live-dot { width:10px; height:10px; border-radius:50%; background:#3fa44a; box-shadow:0 0 0 0 #3fa44a88; animation:live-pulse 1.8s infinite; }
@keyframes live-pulse { 70% { box-shadow:0 0 0 10px #3fa44a00; } 100% { box-shadow:0 0 0 0 #3fa44a00; } }
.activity-feed { list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:520px; overflow:auto; }
.activity-feed li { display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:10px 6px; border-bottom:1px solid #f1e6d6; font-size:.86rem; color:#4b3c38; }
.activity-feed time { color:#9a857a; font-size:.72rem; white-space:nowrap; }
.feed-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#f4e7d3; color:var(--wine); font-size:.8rem; }
.feed-completed .feed-icon { background:#dcefd7; color:#2f6b2a; }
.feed-started .feed-icon { background:#fbe8bf; color:#8a5a12; }
.activity-feed .feed-empty { display:block; color:#9a857a; border:0; }
.admin-dialog { width:min(440px,calc(100vw - 32px)); padding:28px; border:0; border-radius:18px; background:#fffdf8; color:var(--ink); box-shadow:0 30px 80px #1c040866; }
.admin-dialog::backdrop { background:#1c0408a6; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.admin-dialog[open] { animation:card-selected .4s cubic-bezier(.2,.75,.22,1.2); }
.admin-dialog .eyebrow { margin-bottom:6px; color:var(--red); }
.admin-dialog h3 { margin:0 0 10px; font:700 1.6rem/1.1 'Playfair Display',serif; }
.admin-dialog p:not(.eyebrow) { margin:0 0 14px; color:#6b5a52; line-height:1.55; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.dialog-actions .button { padding:13px 18px; }
@media (max-width:1000px) {
  .admin-hero { grid-template-columns:1fr; }
  .admin-main { grid-template-columns:1fr; }
  .admin-side { position:static; order:-1; }
}
@media (max-width:760px) {
  .admin-hero { padding:48px 16px; }
  .admin-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-stats div { min-width:0; }
  .admin-main { padding:20px 10px 60px; gap:14px; }
  .admin-panel { padding:18px 14px; }
  .admin-search { max-width:none; }
  .student-row { grid-template-columns:40px minmax(0,1fr); grid-template-areas:'avatar info' 'progress progress' 'actions actions'; }
  .student-actions { flex-direction:row; flex-wrap:wrap; }
  .student-actions .mini-button { flex:1; }
  .activity-feed li { grid-template-columns:28px 1fr; }
  .activity-feed time { grid-column:2; }
  .dialog-actions { display:grid; grid-template-columns:1fr 1fr; }
}
.ring-count { display:block; font-weight:700; }

/* ========== Account banner: framed photo ========== */
.account-hero { min-height:520px; }
.account-hero::before { background:linear-gradient(105deg,#3d0710f2 0%,#5e0a15e0 45%,#4a0710b3 100%),radial-gradient(circle at 80% 20%,#d89d2559,transparent 45%); }
.account-hero-bg { position:absolute; z-index:-2; inset:-40px; background:url('assets/banner-account.jpg') center/cover; filter:blur(18px) saturate(1.15) brightness(.7); transform:scale(1.05); }
.account-copy { position:relative; max-width:560px; }
.account-frame { position:relative; flex:none; width:min(460px,42vw); margin:0 24px 0 0; transform:rotate(2.5deg); animation:frame-in 1.1s .2s cubic-bezier(.2,.8,.2,1) both; }
.account-frame img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border:8px solid #fbf4e9; border-radius:6px; box-shadow:0 30px 60px #1a030799, 0 0 0 1px #f2cf7d88; }
.account-frame::before { content:''; position:absolute; inset:-14px; border:1px solid #f2cf7d66; border-radius:10px; transform:rotate(-4deg); pointer-events:none; }
.account-frame .account-ring { position:absolute; left:-46px; bottom:-40px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,#5e0a15 0%,#3d0710 70%); box-shadow:0 18px 40px #1a030799; transform:rotate(-2.5deg); }
@keyframes frame-in { from { opacity:0; transform:rotate(8deg) translateY(40px) scale(.94); } to { opacity:1; transform:rotate(2.5deg); } }
@media (max-width:760px) {
  .account-hero { min-height:0; padding-bottom:110px; }
  .account-frame { width:calc(100% - 30px); align-self:center; margin:18px 0 0; }
  .account-frame .account-ring { left:auto; right:-14px; bottom:-56px; width:124px; height:124px; }
  .account-frame .account-ring strong { font-size:2.3rem; }
}

/* ========== Admin banner: cinematic panorama ========== */
.admin-hero { min-height:440px; }
.admin-hero::before { background:linear-gradient(90deg,#2c040bf5 0%,#4a0710d9 38%,#4a071073 70%,#2c040b99 100%),linear-gradient(0deg,#2c040bcc 0%,transparent 55%); }
.admin-hero-photo { position:absolute; z-index:-2; inset:0; background:url('assets/banner-admin.jpg') center/cover; animation:ken-burns 24s ease-in-out infinite alternate; }
.admin-hero .admin-hero-copy { position:relative; }
.admin-hero .admin-hero-copy::before { content:''; display:block; width:56px; height:3px; margin-bottom:20px; border-radius:3px; background:linear-gradient(90deg,#f7d98f,#d89d25); }
.admin-stats div { background:#1c04084d; box-shadow:inset 0 0 0 1px #f2cf7d4d, 0 14px 30px #0d020455; }
@keyframes ken-burns { from { transform:scale(1.02) translate(0,0); } to { transform:scale(1.12) translate(-2%,-1%); } }
@media (max-width:760px) { .admin-hero { min-height:0; } .admin-hero::before { background:linear-gradient(180deg,#2c040bcc 0%,#4a0710e6 60%,#2c040bf5 100%); } }
@media (prefers-reduced-motion:reduce) { .admin-hero-photo { animation:none; } }
[hidden] { display:none !important; }

/* ========== Answer box (A1.1 card, A1.2 sheet, Conversación) ========== */
.answer-box { display:grid; gap:8px; margin-top:20px; padding-top:18px; border-top:1px solid #eadbc8; }
.answer-box label { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.answer-box label small { font-weight:600; letter-spacing:0; text-transform:none; color:#9a857a; }
.answer-box textarea { width:100%; min-height:84px; padding:12px 14px; border:1px solid #e2d3c2; border-radius:10px; background:#fff; color:var(--ink); font:500 .95rem/1.5 'DM Sans',sans-serif; resize:vertical; outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
.answer-box textarea:focus { border-color:var(--gold); box-shadow:0 0 0 4px #d89d2522; }
.answer-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.answer-status { font-size:.8rem; color:#6b7d3a; }
.answer-box .button { flex:none; padding:12px 18px; gap:12px; }
.answer-box.is-saved textarea { border-color:#6aa45c; box-shadow:0 0 0 4px #6aa45c22; }
.is-rolling .answer-box, .is-empty .answer-box { display:none; }
.conv-body .answer-box { margin-top:24px; border-top-color:#f2cf7d2e; }
.conv-body .answer-box label { color:var(--gold); }
.conv-body .answer-box label small, .conv-body .answer-status { color:#d9c2b8; }
.conv-body .answer-box textarea { background:#ffffff0d; border-color:#f2cf7d40; color:#fff; }
.conv-body .answer-box textarea::placeholder { color:#c9b2a8; }
.conv-body .answer-box .button { background:linear-gradient(135deg,#ecbd55,#c98a1c); color:#2a070c; }
.answer-sheet { position:absolute; z-index:3; left:50%; bottom:16px; width:min(460px,calc(100vw - 24px)); padding:16px 18px 18px; border-radius:16px; background:#fffdf8; box-shadow:0 24px 60px #0d020499; transform:translate(-50%,30px); opacity:0; transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.answer-sheet.is-open { transform:translate(-50%,0); opacity:1; }
.sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sheet-head strong { font:700 1.15rem/1.25 'Playfair Display',serif; color:var(--ink); }
.sheet-close { flex:none; width:34px; height:34px; border:0; border-radius:50%; background:#f4e7d3; color:var(--wine); font-size:1.2rem; cursor:pointer; }
.answer-sheet .answer-box { margin-top:10px; padding-top:0; border-top:0; }
.stage-controls { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ========== Scores and answers (account + admin) ========== */
.level-score { display:flex; align-items:center; gap:10px; margin-top:6px; }
.score-bar { flex:1; height:7px; overflow:hidden; border-radius:999px; background:#f1e6d6; }
.score-bar i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d89d25,#a71622); transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.score-text { font:700 .9rem 'Playfair Display',serif; color:var(--wine); white-space:nowrap; }
.answers-panel { max-width:1060px; margin:56px auto 0; }
.answers-head h2 { margin:0 0 8px; font:700 clamp(2rem,4vw,2.8rem)/1 'Playfair Display',serif; letter-spacing:-.03em; }
.answers-head p:not(.eyebrow) { margin:0; color:#6b5a52; }
.answer-filters { display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 16px; }
.answer-filters button { padding:8px 16px; border:1px solid #e3cfb2; border-radius:999px; background:#fffdf8; color:#6d4b44; font:700 .78rem 'DM Sans',sans-serif; cursor:pointer; transition:background-color .2s ease, color .2s ease; }
.answer-filters button[aria-pressed="true"] { background:var(--wine); border-color:var(--wine); color:#fff; }
.answer-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.answer-list li { padding:18px 20px; border-radius:14px; background:#fffdf8; box-shadow:0 10px 26px #6d3e2614, 0 0 0 1px #eadbc8; }
.answer-meta { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.72rem; }
.answer-game { font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.answer-meta time { color:#9a857a; }
.answer-prompt { margin:8px 0 10px; color:#6b5a52; font-size:.88rem; line-height:1.5; }
.answer-list blockquote { margin:0; padding:10px 14px; border-left:3px solid var(--gold); border-radius:0 10px 10px 0; background:#fbf1e1; color:var(--ink); font-size:.98rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.answer-list .answer-empty { color:#9a857a; box-shadow:none; background:none; padding:4px 0; }
.student-row { cursor:pointer; }
.student-row.is-open { box-shadow:0 0 0 2px var(--gold), 0 12px 26px #6d3e261f; }
.student-detail { grid-column:1 / -1; display:grid; gap:14px; margin-top:8px; padding-top:14px; border-top:1px solid #efe2d0; cursor:default; }
.detail-scores { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.detail-scores div { padding:12px; border-radius:12px; background:#fbf6ee; }
.detail-scores span { display:block; margin-bottom:6px; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8a5a4c; }
.student-detail .answer-list li { padding:12px 14px; box-shadow:0 0 0 1px #efe2d0; }
.student-detail h4 { margin:0; font:700 1.05rem 'Playfair Display',serif; }
@media (max-width:760px) { .detail-scores { grid-template-columns:1fr; } .answers-panel { margin-top:40px; } }
.card-stage.is-answering .stage-controls { opacity:0; pointer-events:none; }
.answer-sheet { position:fixed; bottom:max(12px, env(safe-area-inset-bottom)); }

/* Recommended apps: six icons — one row on desktop, three per row on tablets and phones */
.app-list { grid-template-columns:repeat(6,minmax(0,140px)); }
.app-list a span { text-align:center; text-wrap:balance; }
@media (max-width:900px) { .app-list { grid-template-columns:repeat(3,minmax(0,160px)); row-gap:6px; } }
@media (max-width:680px) {
  .app-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 4px; }
  .app-list a { padding:12px 4px; font-size:.72rem; }
}
@media (max-width:340px) { .app-list a { font-size:.66rem; } .site-footer .app-list img { width:48px; height:48px; } }