:root{
  --ink:#2f2241;
  --purple:#7c4dff;
  --pink:#ff4fb3;
  --orange:#ff8a00;
  --yellow:#ffd84d;
  --blue:#31b7ff;
  --green:#49d17d;
  --paper:#fffdf7;
  --cream:#fff5d8;
  --soft:#f4f7ff;
  --card:#ffffff;
  --shadow:0 18px 40px rgba(64,28,108,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:linear-gradient(180deg,#fffaf2,#fff 35%,#f6fbff 100%);color:var(--ink);line-height:1.6;position:relative;overflow-x:hidden}
.bg-page{position:fixed;inset:0;background:url('assets/hero-huaca.png') center/cover no-repeat;opacity:.08;filter:blur(3px) saturate(1.2);z-index:-2}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,251,242,.92) 22%,rgba(255,255,255,.95) 100%);z-index:-1}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:1rem;border-radius:12px;z-index:20}
.header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem max(5vw,20px);background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(124,77,255,.12);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:900;letter-spacing:.09em;font-size:.84rem;color:var(--purple)}
.brand small{display:block;font-size:.62rem;color:var(--pink);letter-spacing:.22em}
.brand-icon{font-size:1.95rem;filter:drop-shadow(0 4px 10px rgba(255,79,179,.25))}
.header nav{display:flex;gap:1.2rem;flex-wrap:wrap}.header a{text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:800;padding:.35rem .7rem;border-radius:999px}.header a:hover{background:#f1ebff;color:var(--purple)}
.hero{min-height:78vh;display:grid;align-items:center;padding:clamp(2rem,4vw,3rem) max(5vw,20px)}
.hero-image{background:url('assets/hero-huaca.png') center/cover no-repeat;position:relative}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(68,27,138,.72) 0%,rgba(255,79,179,.42) 35%,rgba(255,138,0,.16) 100%)}
.hero-inner{position:relative;z-index:1;max-width:720px;padding:clamp(1.2rem,2vw,2rem)}
.colorful-panel{background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.32);border-radius:28px;box-shadow:var(--shadow)}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:900;letter-spacing:.21em;color:#fff7ae;background:rgba(0,0,0,.12);padding:.35rem .7rem;border-radius:999px}
.eyebrow.dark{color:#7d2d00;background:#fff4ca}
h1,h2,h3{line-height:1.15;letter-spacing:-.025em;margin:.35rem 0 1rem}
h1,h2{font-family:Georgia,serif}
h1{font-size:clamp(2.5rem,5vw,5.2rem);color:white;text-shadow:0 3px 15px rgba(0,0,0,.18)}
h1 em{color:#fff6a1;font-weight:400}
h2{font-size:clamp(2rem,3vw,3.1rem)}
h3{font-size:1.25rem}
.hero p{max-width:620px;color:white;font-size:1.05rem}
.hero-actions,.mini-badges{display:flex;gap:.9rem;flex-wrap:wrap}.hero-actions{margin-top:1.4rem}.mini-badges{margin-top:1rem}
.mini-badges span{background:rgba(255,255,255,.88);color:var(--purple);padding:.5rem .75rem;border-radius:999px;font-weight:700;font-size:.88rem}
.btn{border:none;display:inline-flex;justify-content:center;align-items:center;gap:.7rem;border-radius:999px;padding:.9rem 1.35rem;font-weight:900;font-size:.96rem;cursor:pointer;text-decoration:none;box-shadow:0 10px 22px rgba(73,209,125,.15)}
.btn.main{background:linear-gradient(90deg,var(--yellow),#ffb423);color:#532500}
.btn.alt{background:white;color:var(--purple)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,.tab:focus-visible,.answer:focus-visible,.memory-card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.section{max-width:1280px;margin:auto;padding:4.5rem max(5vw,20px)}
.section.soft{max-width:none;background:linear-gradient(180deg,#fffdf4,#f4f8ff)}
.split.two-col{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:2rem;align-items:start}
.align-center{align-items:center}
.section-head{max-width:720px;margin-bottom:1.6rem}.section-head.centered{text-align:center;margin-left:auto;margin-right:auto}
.section-head p{color:#5d5371}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.card{background:linear-gradient(180deg,#fff,#fff5fd);border:1px solid rgba(255,79,179,.18);padding:1.25rem 1.2rem;border-radius:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card::after{content:"";position:absolute;top:-35px;right:-20px;width:110px;height:110px;background:radial-gradient(circle,var(--yellow),transparent 65%);opacity:.28}
.card:hover{transform:translateY(-4px);transition:.25s}
.card .num{color:var(--pink);font-weight:900;letter-spacing:.15em;font-size:.76rem}
.card h3{font-size:1.1rem;color:#4c2f76}
.card p{font-size:.95rem;color:#5d5371}.card .benefit{border-top:1px dashed rgba(124,77,255,.22);padding-top:.8rem;color:#7d3e00;font-weight:600}
.pledges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.pledge{background:linear-gradient(180deg,#fff,#f8fbff);border:2px solid rgba(49,183,255,.14);border-radius:18px;padding:1rem;display:flex;gap:.8rem;cursor:pointer;align-items:start;font-size:.97rem;box-shadow:var(--shadow)}
.pledge:hover{transform:translateY(-2px);transition:.25s}
.pledge input{accent-color:var(--green);width:1.1rem;height:1.1rem;flex-shrink:0;margin-top:.25rem}
.progress{margin-top:1.5rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.progress-bar{height:16px;background:#e4ebff;border-radius:999px;flex:1;overflow:hidden;min-width:170px;box-shadow:inset 0 0 0 1px rgba(124,77,255,.08)}
.progress-bar span{display:block;background:linear-gradient(90deg,var(--green),var(--blue));height:100%;width:0;transition:width .35s}
.game-tabs{display:flex;gap:.6rem;flex-wrap:wrap}
.tab{padding:.85rem 1.15rem;border-radius:18px 18px 0 0;border:1px solid #decfff;background:#f6f0ff;font-weight:900;cursor:pointer;color:#4e3382}
.tab.active{background:linear-gradient(90deg,var(--purple),var(--pink));color:#fff;border-color:transparent}
.game-panel{border:1px solid #e5dbff;border-top:5px solid var(--purple);border-radius:0 20px 20px 20px;padding:clamp(1rem,4vw,2.3rem);background:white;min-height:320px;box-shadow:var(--shadow)}
.answer{display:block;width:100%;padding:.95rem 1rem;background:#fff7ea;border:2px solid #ffe0a8;text-align:left;border-radius:14px;margin:.7rem 0;cursor:pointer;color:var(--ink);font-size:1rem;font-weight:600}
.answer:hover:not(:disabled){background:#fff0cd}.answer.correct{background:#e0ffeb;border-color:#38c172}.answer.wrong{background:#ffe3ea;border-color:#ea5a7d}.answer:disabled{cursor:default}
.feedback{font-weight:800;margin:1rem 0}.muted{color:#6f6882}
.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;max-width:600px;margin:1.5rem auto}.memory-card{height:96px;border-radius:16px;border:2px solid #d7c1ff;background:linear-gradient(180deg,var(--purple),var(--pink));color:white;font-size:1.8rem;cursor:pointer;box-shadow:0 10px 20px rgba(124,77,255,.14)}.memory-card.open,.memory-card.matched{background:#fff6dd;color:#4a2f2f}.memory-card.matched{border-color:#49d17d}
.word-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:560px;margin:1.2rem auto}.word-cell{border:1px solid #e5d6ff;border-radius:8px;text-align:center;background:#fcf9ff;padding:.33rem 0;font-weight:900;font-size:clamp(.75rem,2.5vw,1rem);user-select:none}.word-cell.found{background:#ddffea;border-color:#49d17d}
.word-items{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}.word-pill{padding:.72rem 1rem;border-radius:999px;border:2px solid #ffdc8d;background:#fff8e3;color:#8a4900;font-weight:900;cursor:pointer}.word-pill.done{background:#dff8ea;border-color:#49d17d;color:#21613b}
.section-art{display:flex;justify-content:center;align-items:center}
.art-card{background:linear-gradient(180deg,#fff,#f9f4ff);border:1px solid rgba(124,77,255,.12);padding:1rem;border-radius:28px;box-shadow:var(--shadow)}
.section-art img{width:min(100%,430px);height:auto;display:block}
.closing{margin:2rem 0 0;padding:4rem max(5vw,20px)}
.colorful-band{background:linear-gradient(135deg,#7c4dff,#ff4fb3 55%,#ff8a00);color:white}.colorful-band h2,.colorful-band p{color:white}
.qr-card{display:grid;grid-template-columns:240px 1fr;gap:1.5rem;align-items:center;max-width:900px;margin:0 auto;padding:1.2rem 1.3rem}.qr-image{width:100%;max-width:240px;border-radius:20px;background:white;padding:12px;box-shadow:var(--shadow)}
footer{padding:2rem max(5vw,20px) 3rem;text-align:center;color:#655a79}
.floaty{animation:floaty 4.8s ease-in-out infinite}.bobble{animation:bobble 5.5s ease-in-out infinite}.sway{animation:sway 6.5s ease-in-out infinite}.pulse-soft{animation:pulseSoft 3.6s ease-in-out infinite}.delay-1{animation-delay:.6s}.delay-2{animation-delay:1.2s}.delay-3{animation-delay:1.8s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bobble{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(-1.5deg)}75%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes sway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes pulseSoft{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.diploma{display:none}
@media (max-width:980px){
  .split.two-col,.qr-card{grid-template-columns:1fr}
  .cards,.pledges{grid-template-columns:1fr}
  .section-art{order:-1}
}
@media (max-width:700px){
  .header{padding:.9rem 1rem}.header nav{gap:.4rem}.header a{font-size:.84rem;padding:.32rem .55rem}
  .hero{min-height:auto;padding-top:2rem;padding-bottom:2rem}
  .hero-inner{padding:1rem}
  .mini-badges span{font-size:.82rem}
  .memory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .memory-card{height:86px}
}
@media print{
  body > *:not(.diploma){display:none !important}
  body{background:#fff !important}
  .diploma{display:flex !important;min-height:100vh;justify-content:center;align-items:center;padding:0;margin:0;page-break-inside:avoid;break-inside:avoid;background:#fff !important}
  @page{size:A4 landscape;margin:0}
  .diploma .sheet{width:100%;height:100vh;padding:16mm;border:0;display:flex;align-items:center;justify-content:center}
  .diploma .inner{width:100%;height:100%;border:10px solid #ffb423;border-radius:24px;padding:18mm;background:linear-gradient(180deg,#fffdf4,#fff8dd);text-align:center;display:flex;flex-direction:column;justify-content:center}
  .diploma p:first-child{font-size:13pt;letter-spacing:3px;color:#7c4dff;font-weight:800;margin:0 0 8mm}
  .diploma h1{font-size:28pt;color:#4e3382;text-shadow:none;margin:0 0 7mm}
  .diploma p:nth-child(3){font-size:15pt;color:#574c68;margin:0 0 12mm}
  .diploma p:last-child{font-size:11.5pt;color:#7d3e00;margin:0}
}