:root{
  color-scheme: dark;
  --bg:#120a2e; --ink:#f4f0ff; --muted:#a99fd6;
  --a1:#ff2bd6; --a2:#18e7ff; --a3:#b8ff3c; --a4:#ff8a1f;
  --felt: radial-gradient(120% 90% at 50% 40%, rgba(49,26,120,.82), rgba(20,11,51,.88));
  --felt-border: 1px solid rgba(24,231,255,.35);
  --felt-shadow: 0 0 0 1px rgba(255,43,214,.15), 0 0 40px rgba(24,231,255,.18), inset 0 0 60px rgba(0,0,0,.35);
  --felt-radius: 28px;
  --card-bg:#fbf8ff; --card-ink:#1a1033; --card-radius:8px;
  --card-border: 1px solid rgba(255,255,255,.6);
  --card-shadow: 0 6px 16px rgba(0,0,0,.45);
  --s-h:#ff2b6e; --s-d:#1f7bff; --s-c:#11a85a; --s-s:#1a1033;
  --jk:#b01fd0;
  --back-a: repeating-linear-gradient(45deg,#ff2bd6 0 5px,#9c1a86 5px 10px);
  --back-b: radial-gradient(circle at 50% 50%,#b6f7ff 0 2px,transparent 2.5px) 0 0/8px 8px, #0fb4cc;
  --back-c: linear-gradient(135deg,#b8ff3c 25%,transparent 25%) -5px 0/10px 10px, linear-gradient(225deg,#b8ff3c 25%,transparent 25%) -5px 0/10px 10px, linear-gradient(315deg,#b8ff3c 25%,transparent 25%) 0 0/10px 10px, linear-gradient(45deg,#b8ff3c 25%,#5d8f12 25%) 0 0/10px 10px;
  --back-border: 1.5px solid rgba(255,255,255,.8);
  --panel-bg: rgba(255,255,255,.06); --panel-border: 1px solid rgba(255,255,255,.14); --panel-radius:16px; --panel-blur: 10px;
  --btn-bg: rgba(255,255,255,.08); --btn-ink:#f4f0ff; --btn-border:1px solid rgba(255,255,255,.22); --btn-radius:999px; --btn-shadow:none;
  --btn-on-bg: #ff2bd6; --btn-on-ink:#120a2e;
  --f-display:"Bungee", "Arial Black", system-ui, sans-serif;
  --f-body:"Outfit", system-ui, sans-serif;
  --f-card:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --glow: 0 0 0 2px #18e7ff, 0 0 26px #18e7ff;
  --tag-bg: rgba(0,0,0,.35); --tag-ink:#f4f0ff;
}
body[data-style="papel"]{
  color-scheme: light;
  --bg:#fbe7c8; --ink:#2b1d14; --muted:#7a5a44;
  --a1:#e8412c; --a2:#11a39a; --a3:#f2b31b; --a4:#e6307a;
  --felt: radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1px, transparent 1.5px) 0 0/7px 7px, #129e95;
  --felt-border: 3px solid #2b1d14;
  --felt-shadow: 6px 6px 0 #e6307a;
  --felt-radius: 18px;
  --card-bg:#fffaf0; --card-ink:#2b1d14; --card-radius:6px;
  --card-border: 2px solid #2b1d14;
  --card-shadow: 2px 2px 0 rgba(230,48,122,.85);
  --s-h:#e8412c; --s-d:#2466d8; --s-c:#11875f; --s-s:#2b1d14;
  --jk:#e6307a;
  --back-a: radial-gradient(circle,#fbe7c8 0 2px,transparent 2.5px) 0 0/9px 9px, linear-gradient(#e8412c,#e8412c);
  --back-b: repeating-linear-gradient(90deg,#11a39a 0 4px,#0b746d 4px 8px);
  --back-c: repeating-linear-gradient(-45deg,#f2b31b 0 3px,#fbe7c8 3px 5px,#f2b31b 5px 8px);
  --back-border: 2px solid #2b1d14;
  --panel-bg: #fff6e6; --panel-border: 2px solid #2b1d14; --panel-radius:10px; --panel-blur: 0px;
  --btn-bg:#fff6e6; --btn-ink:#2b1d14; --btn-border:2px solid #2b1d14; --btn-radius:8px; --btn-shadow: 3px 3px 0 #2b1d14;
  --btn-on-bg:#e8412c; --btn-on-ink:#fff6e6;
  --f-display:"Chango", "Arial Black", system-ui, sans-serif;
  --f-body:"Karla", system-ui, sans-serif;
  --f-card:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --glow: 0 0 0 3px #f2b31b, 6px 6px 0 #2b1d14;
  --tag-bg:#2b1d14; --tag-ink:#fbe7c8;
}
body[data-style="memphis"]{
  color-scheme: light;
  --bg:#ffe1ec; --ink:#111; --muted:#4d4d4d;
  --a1:#ff4f79; --a2:#2ec4f1; --a3:#ffd23f; --a4:#7b5cff;
  --felt: #ffd23f;
  --felt-border: 3px solid #111;
  --felt-shadow: 9px 9px 0 #111;
  --felt-radius: 6px;
  --card-bg:#fff; --card-ink:#111; --card-radius:8px;
  --card-border: 2.5px solid #111;
  --card-shadow: 3px 3px 0 #111;
  --s-h:#ff2d55; --s-d:#1f7ae0; --s-c:#00a870; --s-s:#111;
  --jk:#7b5cff;
  --back-a: linear-gradient(135deg,#111 25%,transparent 25%) -6px 0/12px 12px, linear-gradient(225deg,#111 25%,transparent 25%) -6px 0/12px 12px, #ff4f79;
  --back-b: radial-gradient(circle,#111 0 2px,transparent 2.5px) 0 0/9px 9px, #2ec4f1;
  --back-c: conic-gradient(#111 25%,#7b5cff 0 50%,#111 0 75%,#7b5cff 0) 0 0/12px 12px;
  --back-border: 2.5px solid #111;
  --panel-bg:#fff; --panel-border:3px solid #111; --panel-radius:6px; --panel-blur:0px;
  --btn-bg:#fff; --btn-ink:#111; --btn-border:2.5px solid #111; --btn-radius:4px; --btn-shadow:3px 3px 0 #111;
  --btn-on-bg:#2ec4f1; --btn-on-ink:#111;
  --f-display:"Rubik Mono One", "Arial Black", system-ui, sans-serif;
  --f-body:"DM Sans", system-ui, sans-serif;
  --f-card:"Rubik", "Arial Black", system-ui, sans-serif;
  --glow: 0 0 0 4px #2ec4f1, 7px 7px 0 #111;
  --tag-bg:#111; --tag-ink:#fff;
}
body[data-style="aurora"]{
  color-scheme: dark;
  --bg:#0b1026; --ink:#eef3ff; --muted:#aeb8d8;
  --a1:#1fd1c1; --a2:#7a5cff; --a3:#ff7a8a; --a4:#58a6ff;
  --felt: rgba(255,255,255,.07);
  --felt-border: 1px solid rgba(255,255,255,.2);
  --felt-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  --felt-radius: 26px;
  --card-bg:#fdfdff; --card-ink:#1b2140; --card-radius:10px;
  --card-border: 1px solid rgba(255,255,255,.9);
  --card-shadow: 0 8px 22px rgba(10,14,40,.35);
  --s-h:#e8435a; --s-d:#2f6bff; --s-c:#0f9f8a; --s-s:#1b2140;
  --jk:#7a5cff;
  --back-a: repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 5px), linear-gradient(160deg,#1fd1c1,#0c7f86);
  --back-b: radial-gradient(circle,rgba(255,255,255,.45) 0 1.5px,transparent 2px) 0 0/7px 7px, linear-gradient(160deg,#8f74ff,#4a2fc0);
  --back-c: repeating-linear-gradient(60deg,rgba(255,255,255,.28) 0 2px,transparent 2px 7px), linear-gradient(160deg,#ff9aa6,#d9486a);
  --back-border: 1px solid rgba(255,255,255,.7);
  --panel-bg: rgba(255,255,255,.08); --panel-border: 1px solid rgba(255,255,255,.18); --panel-radius:20px; --panel-blur: 18px;
  --btn-bg: rgba(255,255,255,.1); --btn-ink:#eef3ff; --btn-border:1px solid rgba(255,255,255,.22); --btn-radius:14px; --btn-shadow:none;
  --btn-on-bg: #eef3ff; --btn-on-ink:#0b1026;
  --f-display:"Syne", system-ui, sans-serif;
  --f-body:"Manrope", system-ui, sans-serif;
  --f-card:"Manrope", system-ui, sans-serif;
  --glow: 0 0 0 1.5px rgba(31,209,193,.9), 0 0 34px rgba(31,209,193,.55);
  --tag-bg: rgba(255,255,255,.12); --tag-ink:#eef3ff;
}
body[data-style="toy"]{
  color-scheme: light;
  --bg:#d6f0ff; --ink:#3a2c5c; --muted:#6f6391;
  --a1:#ff5f8f; --a2:#3fd6a8; --a3:#ffd84d; --a4:#8f6bff;
  --felt: radial-gradient(circle at 30% 20%, #9debd4, #6fd9ba);
  --felt-border: 4px dashed rgba(255,255,255,.75);
  --felt-shadow: 0 0 0 10px #6fd9ba, 0 14px 0 10px #45b995, 0 26px 40px 10px rgba(58,44,92,.18);
  --felt-radius: 34px;
  --card-bg:#fff; --card-ink:#3a2c5c; --card-radius:14px;
  --card-border: 0;
  --card-shadow: inset -2px -3px 0 rgba(58,44,92,.08), 0 5px 0 #d8cfee, 0 9px 14px rgba(58,44,92,.16);
  --s-h:#ff4f7e; --s-d:#3c7dff; --s-c:#16a877; --s-s:#3a2c5c;
  --jk:#8f6bff;
  --back-a: radial-gradient(circle,rgba(255,255,255,.7) 0 2.5px,transparent 3px) 0 0/10px 10px, #ff5f8f;
  --back-b: repeating-linear-gradient(90deg,#3fd6a8 0 5px,#2bb58c 5px 10px);
  --back-c: repeating-linear-gradient(45deg,#8f6bff 0 5px,#ffd84d 5px 10px);
  --back-border: 3px solid #fff;
  --panel-bg:#fff; --panel-border:0; --panel-radius:24px; --panel-blur:0px;
  --btn-bg:#fff; --btn-ink:#3a2c5c; --btn-border:0; --btn-radius:16px; --btn-shadow: inset 0 -3px 0 rgba(58,44,92,.1), 0 4px 0 #c9bfe6;
  --btn-on-bg:#ff5f8f; --btn-on-ink:#fff;
  --f-display:"Fredoka", system-ui, sans-serif;
  --f-body:"Fredoka", system-ui, sans-serif;
  --f-card:"Fredoka", system-ui, sans-serif;
  --glow: 0 0 0 5px #ffd84d, 0 10px 0 5px #e8b92a;
  --tag-bg:#fff; --tag-ink:#3a2c5c;
}
body[data-colors="2"]{ --s-d: var(--s-h); --s-c: var(--s-s); }

/* Cartas: las comparten la mesa (app.css) y las páginas /acerca y /como-jugar (pages.css). */
.card{ position:relative; flex:none; width:var(--cw); height:var(--ch); background:var(--card-bg); color:var(--card-ink); border:var(--card-border); border-radius:var(--card-radius); box-shadow:var(--card-shadow); font-family:var(--f-card); font-weight:700; user-select:none; -webkit-user-select:none; touch-action:none; }
.card .ix{ position:absolute; left:calc(var(--w) * .07); top:1px; display:flex; flex-direction:column; align-items:center; line-height:.95; font-size:calc(var(--w) * .37); }
.card .ix i{ font-style:normal; font-size:.8em; }
.card .pip{ position:absolute; right:9%; bottom:5%; font-size:calc(var(--w) * .55); line-height:1; }
.card{ --w: var(--cw); }
.card.sm{ --w: var(--mw); width:var(--mw); height:var(--mh); }
.card.pl{ --w: var(--pw); width:var(--pw); height:var(--ph); }
.card.h, .card.d{ color:var(--s-h); } .card.c, .card.s{ color:var(--s-s); }
.card.jk{ color:var(--jk); }
.card .jkix{ font-size:calc(var(--w) * .16); line-height:.92; letter-spacing:0; top:4px; }
.card .jester{ position:absolute; right:6%; bottom:5%; width:66%; height:auto; color:#2b1d14; }
.card.sm .jester{ width:70%; }
.card .as{ position:absolute; z-index:3; left:50%; bottom:-8px; transform:translateX(-50%); font:700 10px/1 var(--f-body); padding:2px 5px; border-radius:5px; background:var(--jk); color:#fff; white-space:nowrap; }

/* /acerca y /como-jugar: capa de página sobre tokens.css + cards.css. Siempre Papel (PLAN-PAGINAS §0.3).
   Port del mockup aprobado (design/paginas.html v4): sus @container pasan a @media con los mismos cortes. */
body.pg{
  --bg-2:#f7dcb4; --card:var(--card-bg); --felt-c:#129e95;
  --ok:#11875f; --bad:#c42f1f;
  --s-d:var(--s-h); --s-c:var(--s-s); /* cartas de 2 colores, fijas (PLAN §4.2) */
  --line:2px solid var(--ink);
  --dots: radial-gradient(circle at 20% 30%, rgba(255,255,255,.1) 0 1px, transparent 1.5px) 0 0/7px 7px;
  --cw:48px; --ch:calc(var(--cw) * 1.42); --mw:36px; --mh:calc(var(--mw) * 1.42); --lw:62px; --lh:calc(var(--lw) * 1.42);
  --hdr:64px;
  margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 var(--f-body); overflow-x:clip;
}
:root{ scroll-behavior:smooth; background:#fbe7c8; color-scheme:light; } /* tokens.css deja la raíz en oscuro (Neón) */
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
.pg button{ font:inherit; color:inherit; cursor:pointer; }
.pg a{ color:inherit; }
.pg :focus-visible{ outline:3px solid var(--a2); outline-offset:2px; }
.pg img{ max-width:100%; height:auto; }
.skip{ position:absolute; left:8px; top:-60px; z-index:30; background:var(--ink); color:var(--bg) !important; padding:8px 14px; border-radius:8px; font-weight:700; }
.skip:focus{ top:8px; }

/* ================= Comunes ================= */
.wrap{ max-width:1180px; margin-inline:auto; padding-inline:32px; }
.hdr{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-bottom:var(--line); }
.hdr .wrap{ display:flex; align-items:center; gap:22px; height:var(--hdr); }
.logo{ font:400 26px/1 var(--f-display); text-decoration:none; color:var(--ink); text-shadow:2px 2px 0 var(--a4); letter-spacing:.01em; }
.hdr nav{ display:flex; gap:18px; margin-left:auto; align-items:center; }
.hdr nav a.nl{ font-weight:700; text-decoration:none; padding-block:4px; border-bottom:3px solid transparent; }
.hdr nav a[aria-current="page"]{ border-color:var(--a3); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:var(--line); border-radius:10px; padding:11px 20px; font:700 16px/1.1 var(--f-body); text-decoration:none; background:var(--card); color:var(--ink); box-shadow:4px 4px 0 var(--ink); transition:transform .12s, box-shadow .12s; }
.btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.pg .btn.red{ background:var(--a1); color:#fffaf0; }
.btn.yel{ background:var(--a3); }
.btn.sm{ padding:8px 14px; font-size:15px; box-shadow:3px 3px 0 var(--ink); }
.eyebrow{ display:inline-block; font:700 13px/1 var(--f-card); letter-spacing:.14em; text-transform:uppercase; background:var(--ink); color:var(--bg); padding:6px 10px; border-radius:4px; }
h2.big{ font:400 clamp(30px, 4vw, 46px)/1.08 var(--f-display); margin:0; text-wrap:balance; }
.lede{ font-size:19px; color:var(--muted); max-width:56ch; margin:0; }
.foot{ border-top:var(--line); padding-block:28px; }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; }
.foot .logo{ font-size:20px; }
.foot nav{ display:flex; flex-wrap:wrap; gap:12px 26px; }
.foot nav a{ font-weight:700; text-underline-offset:4px; }
.foot small{ margin-left:auto; color:var(--muted); }
@keyframes rise{ from{ transform:translateY(22px) rotate(-.6deg); } to{ transform:none; } }
.rv.go{ animation:rise .7s cubic-bezier(.2,.8,.2,1) both; }

/* Cartas en página (dibujo de cards.css): se leen y se scrollea encima. */
.pg .card{ touch-action:auto; user-select:auto; -webkit-user-select:auto; }
.card.lg{ --w:var(--lw); width:var(--lw); height:var(--lh); }
.cards{ display:flex; flex-wrap:wrap; gap:6px; align-items:flex-end; }
.cards.lbl{ padding-bottom:12px; }
.cards.fan{ gap:0; flex-wrap:nowrap; }
.cards.fan .card + .card{ margin-left:-12px; }
.back{ display:inline-block; width:var(--cw); height:var(--ch); border:var(--back-border); border-radius:var(--card-radius); box-shadow:2px 2px 0 rgba(0,0,0,.25); }
.back.a{ background:var(--back-a); } .back.b{ background:var(--back-b); }
.backs{ display:flex; gap:4px; }

/* ================= /acerca ================= */
.hero{ position:relative; overflow:hidden; padding-block:0 64px; border-bottom:var(--line); }
.hero canvas, .cta canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.banner{ position:relative; height:92px; margin-bottom:18px; }
.banner svg.cord{ position:absolute; inset:0 0 auto 0; width:100%; height:40px; }
.flags{ position:absolute; inset:8px 0 auto 0; display:flex; justify-content:space-around; padding-inline:8px; }
.flag{ --w:62px; width:var(--w); height:72px; transform-origin:50% 0; clip-path:polygon(0 0,100% 0,100% 82%,88% 100%,76% 82%,63% 100%,50% 82%,37% 100%,24% 82%,12% 100%,0 82%); display:grid; place-items:center; font-size:30px; color:var(--bg); animation:sway 3.6s ease-in-out infinite alternate; }
.flag:nth-child(4n+1){ background:var(--a1); } .flag:nth-child(4n+2){ background:var(--a2); } .flag:nth-child(4n+3){ background:var(--a3); } .flag:nth-child(4n){ background:var(--a4); }
.flag:nth-child(odd){ animation-delay:-1.4s; }
.flag:nth-child(3n){ animation-duration:4.4s; }
@keyframes sway{ from{ transform:rotate(-3deg); } to{ transform:rotate(3deg); } }
.hero-grid{ position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.hero h1{ font:400 clamp(38px, 4.1vw, 58px)/1.04 var(--f-display); margin:18px 0; text-wrap:balance; }
.hero h1 .w{ display:inline-block; animation:drop .8s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes drop{ from{ transform:translateY(-40px) rotate(-6deg); } to{ transform:none; } }
.hero .lede{ margin-bottom:26px; }
.hero .ctas{ display:flex; flex-wrap:wrap; gap:14px; }
.promise{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; font-weight:700; font-size:15px; }
.promise span{ display:inline-flex; gap:6px; align-items:center; }
.promise span::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--a2); border:2px solid var(--ink); }
.devices{ position:relative; padding:0 9% 44px 0; transition:transform .3s ease-out; }
.laptop{ position:relative; width:100%; border:3px solid var(--ink); border-radius:14px 14px 4px 4px; background:var(--ink); padding:10px 10px 12px; box-shadow:10px 10px 0 var(--a4); }
.laptop img{ display:block; width:100%; height:auto; border-radius:4px; }
.laptop::after{ content:""; position:absolute; left:-7%; right:-7%; bottom:-18px; height:16px; background:var(--ink); border-radius:0 0 18px 18px; }
.phone{ position:absolute; right:0; bottom:0; width:24%; border:3px solid var(--ink); border-radius:26px; background:var(--ink); padding:7px; box-shadow:7px 7px 0 var(--a3); transform:rotate(5deg); }
.phone img{ display:block; width:100%; height:auto; border-radius:19px; }
.phone.h{ position:relative; right:auto; bottom:auto; transform:none; width:100%; }
.tablet{ border:3px solid var(--ink); border-radius:22px; background:var(--ink); padding:12px; box-shadow:9px 9px 0 var(--a2); }
.tablet img{ display:block; width:100%; height:auto; border-radius:8px; }

.sec{ padding-block:88px; }
.sec.alt{ background:var(--bg-2); border-block:var(--line); }
.sec-h{ display:grid; gap:14px; margin-bottom:40px; max-width:760px; justify-items:start; }
.felt{ background:var(--dots), var(--felt-c); color:#fffaf0; border-block:var(--line); }
.felt .lede{ color:#dff6f2; }
.felt .eyebrow{ background:var(--a3); color:var(--ink); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; list-style:none; margin:0; padding:0; }
.step{ background:var(--card); color:var(--ink); border:var(--line); border-radius:14px; padding:18px 18px 22px; box-shadow:6px 6px 0 var(--ink); display:grid; gap:12px; align-content:start; }
.step .n{ width:44px; height:44px; border-radius:50%; border:var(--line); background:var(--a3); display:grid; place-items:center; font:400 22px/1 var(--f-display); }
.step h3{ margin:0; font:400 22px/1.15 var(--f-display); }
.step p{ margin:0; color:var(--muted); }
.step .thumb{ border:var(--line); border-radius:8px; overflow:hidden; aspect-ratio:16/10; background:var(--bg); }
.step .thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.steps-note{ margin:30px 0 0; font-weight:700; font-size:18px; text-align:center; }

.show{ display:grid; gap:90px; }
.show-row{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center; }
.show-row:nth-child(even){ grid-template-columns:1.2fr .8fr; }
.show-row:nth-child(even) .show-txt{ order:2; }
.show-txt h3{ font:400 30px/1.1 var(--f-display); margin:12px 0; text-wrap:balance; }
.show-txt p{ margin:0; font-size:18px; color:var(--muted); max-width:40ch; }
.tag{ font:700 13px/1 var(--f-card); letter-spacing:.12em; text-transform:uppercase; color:var(--a1); }
.pair{ display:grid; grid-template-columns:.42fr 1fr; gap:22px; align-items:end; }
.pair .phone{ position:relative; right:auto; bottom:auto; width:100%; transform:rotate(-3deg); }
.pair .phone.h{ transform:none; }
.browser{ border:3px solid var(--ink); border-radius:12px; overflow:hidden; background:var(--card); box-shadow:9px 9px 0 var(--a1); }
.browser .bar{ display:flex; gap:6px; align-items:center; padding:8px 12px; border-bottom:var(--line); background:var(--bg-2); font:600 12px var(--f-body); color:var(--muted); }
.browser .bar i{ width:10px; height:10px; border-radius:50%; border:1.5px solid var(--ink); background:var(--a1); }
.browser .bar i:nth-child(2){ background:var(--a3); } .browser .bar i:nth-child(3){ background:var(--a2); }
.browser .bar span{ margin-left:10px; background:var(--card); border:1.5px solid var(--ink); border-radius:999px; padding:2px 12px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browser img{ display:block; width:100%; height:auto; }

.modes{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.mode{ border:var(--line); border-radius:14px; background:var(--card); padding:18px; box-shadow:5px 5px 0 var(--ink); display:grid; gap:10px; align-content:start; }
.mode h3{ margin:0; font:400 21px/1.1 var(--f-display); }
.mode p{ margin:0; color:var(--muted); font-size:15px; }
.mtable{ position:relative; aspect-ratio:1; border-radius:50%; background:var(--dots), var(--felt-c); border:var(--line); margin:6px 10px 10px; }
.mtable .seat{ position:absolute; width:24px; height:24px; border-radius:50%; border:var(--line); transform:translate(-50%,-50%); }
.t0{ background:var(--a2); } .t1{ background:var(--a1); } .t2{ background:var(--a4); }
.mtable .bur{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:4px; }
.mtable .bur i{ width:16px; height:22px; border:1.5px solid var(--ink); border-radius:3px; background:repeating-linear-gradient(90deg,#11a39a 0 3px,#0b746d 3px 6px); }
.mode .facts{ font:700 14px/1 var(--f-card); letter-spacing:.06em; text-transform:uppercase; }

.vitrina{ display:grid; grid-template-columns:1.35fr .65fr; gap:40px; align-items:center; }
.vit-img{ position:relative; border:3px solid var(--ink); border-radius:12px; overflow:hidden; box-shadow:10px 10px 0 var(--ink); aspect-ratio:16/10; background:var(--ink); }
.vit-img figure{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .45s; }
.vit-img figure.on{ opacity:1; }
.vit-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.vit-pick{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.vit-pick button{ display:grid; gap:4px; justify-items:center; border:var(--line); border-radius:10px; background:var(--card); padding:6px 6px 5px; font:700 13px var(--f-body); box-shadow:3px 3px 0 var(--ink); }
.vit-pick button[aria-pressed="true"]{ outline:3px solid var(--a3); outline-offset:2px; }
.vit-pick .pv{ display:flex; gap:3px; justify-content:center; align-items:center; width:62px; height:36px; border-radius:6px; }
.vit-pick .pv i{ width:13px; height:20px; border-radius:3px; }
.vit-info h3{ font:400 32px/1 var(--f-display); margin:0 0 10px; }
.vit-info p{ margin:0 0 16px; font-size:18px; color:var(--muted); min-height:3.2em; }
.swatches{ display:flex; gap:8px; margin-bottom:18px; }
.swatches i{ width:30px; height:30px; border-radius:50%; border:var(--line); }

.perks{ display:grid; grid-template-columns:repeat(3,1fr); border:var(--line); border-radius:14px; overflow:hidden; background:var(--card); }
.perk{ padding:26px 24px; display:grid; gap:8px; align-content:start; border-right:var(--line); border-bottom:var(--line); }
.perk:nth-child(3n){ border-right:0; }
.perk:nth-last-child(-n+3){ border-bottom:0; }
.perk svg{ width:40px; height:40px; }
.perk h3{ margin:0; font:700 19px/1.25 var(--f-body); }
.perk p{ margin:0; color:var(--muted); }

.cta{ position:relative; overflow:hidden; text-align:center; padding-block:96px; }
.cta .wrap{ position:relative; }
.cta h2{ font:400 clamp(40px, 6vw, 76px)/1 var(--f-display); margin:0 0 14px; color:#fffaf0; text-shadow:4px 4px 0 var(--ink); }
.cta p{ margin:0 0 28px; font-size:20px; color:#dff6f2; }

/* ================= /como-jugar ================= */
.progress{ position:sticky; top:var(--hdr); z-index:19; height:5px; margin-bottom:-5px; }
.progress i{ display:block; height:100%; width:0; background:var(--a1); border-right:0 solid var(--ink); }
.progress i.on{ border-right-width:2px; }
.rhero{ padding-block:48px 40px; border-bottom:var(--line); background:linear-gradient(180deg, var(--bg) 0 70%, var(--bg-2)); }
.rhero > .wrap:first-child{ display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center; }
.rhero h1{ font:400 clamp(40px, 5.4vw, 68px)/1.02 var(--f-display); margin:14px 0; text-wrap:balance; }
.rhero .fan{ position:relative; height:210px; }
.rhero .fan .card{ position:absolute; left:50%; top:30px; transform-origin:50% 130%; }
.rhero .fan .card:nth-child(1){ transform:translateX(-50%) rotate(-22deg); }
.rhero .fan .card:nth-child(2){ transform:translateX(-50%) rotate(-11deg); }
.rhero .fan .card:nth-child(3){ transform:translateX(-50%); }
.rhero .fan .card:nth-child(4){ transform:translateX(-50%) rotate(11deg); }
.rhero .fan .card:nth-child(5){ transform:translateX(-50%) rotate(22deg); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; z-index:18; }
.chips a{ text-decoration:none; font-weight:700; border:var(--line); border-radius:999px; padding:6px 14px; background:var(--card); box-shadow:2px 2px 0 var(--ink); font-size:15px; white-space:nowrap; }
.chips a.hot{ background:var(--a3); }
.rgrid{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; padding-block:44px 30px; }
.toc{ position:sticky; top:92px; align-self:start; display:grid; gap:2px; font-size:15px; }
.toc b{ font:700 13px/1 var(--f-card); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; }
.toc a{ text-decoration:none; padding:5px 10px; border-left:3px solid transparent; color:var(--muted); font-weight:600; }
.toc a[aria-current="true"]{ border-color:var(--a1); color:var(--ink); background:var(--card); }
.rmain{ max-width:720px; display:grid; gap:26px; min-width:0; }
.rmain > section, .glos > div{ scroll-margin-top:96px; }
.rmain h2{ font:400 34px/1.1 var(--f-display); margin:26px 0 4px; }
.rmain h2 small{ display:block; font:600 17px var(--f-body); color:var(--muted); margin-top:6px; }
.rmain section > h2{ margin-bottom:18px; }
.mt{ margin-top:12px !important; }
.ess{ display:grid; gap:18px; }
.es{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:18px; background:var(--card); border:var(--line); border-radius:14px; padding:20px 22px; box-shadow:5px 5px 0 var(--ink); }
.es .n{ width:52px; height:52px; border-radius:50%; border:var(--line); display:grid; place-items:center; font:400 24px/1 var(--f-display); background:var(--a2); color:#fffaf0; }
.es:nth-child(2) .n{ background:var(--a1); } .es:nth-child(3) .n{ background:var(--a3); color:var(--ink); } .es:nth-child(4) .n{ background:var(--a4); } .es:nth-child(5) .n{ background:var(--ink); }
.es h3{ margin:4px 0 8px; font:400 23px/1.15 var(--f-display); }
.es p{ margin:0 0 10px; }
.vals{ display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:10px 22px; margin-top:10px; }
.vals > div{ display:flex; gap:10px; align-items:center; }
.vals b{ font:700 20px/1 var(--f-card); }
.turn{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:8px; align-items:center; margin:8px 0 12px; }
.ph{ border:var(--line); border-radius:10px; padding:10px 12px; background:var(--bg); text-align:center; transition:background .3s, transform .3s; }
.ph b{ display:block; font:400 18px/1.1 var(--f-display); }
.ph small{ color:var(--muted); font-size:13px; line-height:1.3; display:block; margin-top:3px; }
.ph.on{ background:var(--a3); transform:translateY(-3px); box-shadow:3px 3px 0 var(--ink); }
.arrow{ font:400 22px var(--f-display); color:var(--a1); }
.ready{ background:var(--a3); border:var(--line); border-radius:14px; padding:18px 22px; box-shadow:5px 5px 0 var(--a4); display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; }
.ready b{ font:400 22px/1.1 var(--f-display); }
.ready span{ display:block; }
details.rule{ border:var(--line); border-radius:12px; background:var(--card); box-shadow:4px 4px 0 var(--ink); }
details.rule + details.rule{ margin-top:12px; }
details.rule summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:15px 18px; font:700 18px/1.25 var(--f-body); }
details.rule summary::-webkit-details-marker{ display:none; }
details.rule summary::after{ content:"+"; margin-left:auto; font:400 26px/1 var(--f-display); color:var(--a1); transition:transform .2s; }
details.rule[open] summary::after{ transform:rotate(45deg); }
.rule-b{ padding:0 20px 18px; display:grid; gap:12px; }
.rule-b p, .rule-b ul, .rule-b ol{ margin:0; }
.rule-b ul, .rule-b ol{ padding-left:22px; display:grid; gap:5px; }
.ex{ display:flex; flex-wrap:wrap; gap:12px 28px; }
.ex figure{ margin:0; display:grid; gap:8px; }
.ex figcaption{ font-size:14px; font-weight:700; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pill{ display:inline-block; font:700 12px/1 var(--f-card); letter-spacing:.08em; text-transform:uppercase; padding:4px 7px; border-radius:4px; border:1.5px solid var(--ink); }
.pill.ok{ background:#bfe8d6; color:#0b4f37; } .pill.no{ background:#f7c2b9; color:#7a1c10; }
table.t{ border-collapse:collapse; width:100%; font-size:16px; font-variant-numeric:tabular-nums; }
table.t th, table.t td{ border-bottom:1.5px solid rgba(43,29,20,.18); padding:8px 10px; text-align:left; }
table.t th{ font:700 14px var(--f-card); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
table.t td:last-child, table.t th:last-child{ text-align:right; font-weight:700; white-space:nowrap; }
.tscroll{ overflow-x:auto; }
.sub{ font:700 18px var(--f-body); margin:22px 0 10px; }
.scorecard{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.team{ border:var(--line); border-radius:10px; padding:14px; background:var(--bg); }
.team h4{ margin:0 0 8px; font:400 18px var(--f-display); }
.team .row{ display:flex; justify-content:space-between; gap:10px; font-size:15px; padding-block:3px; font-variant-numeric:tabular-nums; }
.team .row > span:last-child{ white-space:nowrap; }
.team .tot{ border-top:var(--line); margin-top:8px; padding-top:8px; font-weight:700; font-size:18px; }
.neg{ color:var(--bad); }
.note{ margin:12px 0 0; font-size:15px; color:var(--muted); }
.term{ text-decoration:underline dotted 2px; text-underline-offset:3px; text-decoration-color:var(--a2); position:relative; }
@media (hover:hover){
  .term:hover::after, .term:focus-visible::after{ content:attr(data-def); position:absolute; left:0; bottom:calc(100% + 8px); width:min(240px, 70vw); background:var(--ink); color:var(--bg); font:500 14px/1.4 var(--f-body); padding:9px 11px; border-radius:8px; z-index:5; white-space:normal; }
}

.quiz-bar{ position:sticky; top:78px; z-index:6; display:flex; gap:12px; align-items:center; justify-content:space-between; background:var(--ink); color:var(--bg); border-radius:12px; padding:10px 16px; font-weight:700; margin-bottom:14px; }
.quiz-bar .sc{ font:400 20px var(--f-display); color:var(--a3); }
.quiz-bar #scoreMsg{ font-weight:600; font-size:14px; }
.quiz-bar button{ background:transparent; border:1.5px solid var(--bg); border-radius:999px; padding:4px 12px; color:var(--bg); font-size:14px; }
.quiz{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.q{ background:var(--card); border:var(--line); border-radius:12px; padding:16px; display:grid; gap:14px; align-content:start; box-shadow:4px 4px 0 var(--ink); transition:box-shadow .2s; }
.q-n{ margin:0; font:700 14px var(--f-card); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.q-btns{ display:flex; gap:10px; }
.q-btns button{ flex:1; border:var(--line); border-radius:8px; padding:9px; font-weight:700; background:var(--bg); box-shadow:2px 2px 0 var(--ink); }
.q-btns button:hover{ background:var(--bg-2); }
.q-ans{ font-size:15px; border-top:1.5px dashed rgba(43,29,20,.35); padding-top:10px; }
.q-ans > summary{ cursor:pointer; font-weight:700; color:var(--a1); }
.q-ans p{ margin:6px 0 0; }
.q.js .q-ans > summary{ display:none; }
.q.js:not(.done) .q-ans{ display:none; }
.q.js .q-ans p{ margin:0; }
.q.done .q-btns button{ pointer-events:none; opacity:.45; }
.q.done .q-btns button.picked{ opacity:1; }
.q.right{ box-shadow:4px 4px 0 var(--ok); } .q.wrong{ box-shadow:4px 4px 0 var(--bad); }
.q-v{ font-weight:700; }
.q.right .q-v{ color:var(--ok); } .q.wrong .q-v{ color:var(--bad); }
.print-box{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; border:var(--line); border-radius:14px; padding:18px; background:var(--card); }
.print-box .mini{ width:90px; aspect-ratio:210/297; border:var(--line); background:#fff; box-shadow:3px 3px 0 var(--ink); padding:8px; display:grid; gap:4px; align-content:start; }
.print-box .mini i{ height:4px; background:#d9cbb8; border-radius:2px; }
.print-box .mini i:first-child{ height:8px; background:var(--ink); width:70%; }
.print-box p{ margin:0; flex:1; min-width:220px; }
.faq details{ border-bottom:var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:15px 36px 15px 0; font:700 18px/1.3 var(--f-body); position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:12px; font:400 24px/1 var(--f-display); color:var(--a1); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 16px; }
.faq details.var{ background:var(--card); border:var(--line); border-radius:12px; padding-inline:16px; margin-top:12px; }
.glos{ display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; margin:0; }
.glos > div{ border-top:var(--line); padding-top:10px; }
.glos > div:target{ background:var(--a3); }
.glos dt{ font:400 18px var(--f-display); }
.glos dd{ margin:4px 0 0; color:var(--muted); }
.rcta{ background:var(--dots), var(--felt-c); color:#fffaf0; border:var(--line); border-radius:16px; padding:28px; box-shadow:6px 6px 0 var(--ink); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-block:10px 40px; }
.rcta b{ font:400 30px/1.05 var(--f-display); display:block; }
.rcta span{ color:#dff6f2; }
.sheet{ display:none; }

/* ================= Tablet (≤ 1100 px) ================= */
@media (max-width:1100px){
  .wrap{ padding-inline:26px; }
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .devices{ max-width:720px; margin-inline:auto; width:100%; }
  .show-row, .show-row:nth-child(even){ grid-template-columns:1fr; gap:26px; }
  .show-row:nth-child(even) .show-txt{ order:0; }
  .modes{ grid-template-columns:repeat(2,1fr); }
  .vitrina{ grid-template-columns:1fr; }
  .rgrid{ grid-template-columns:1fr; gap:20px; }
  .toc{ display:none; }
  .rmain{ max-width:none; }
  .rhero > .wrap:first-child{ grid-template-columns:1fr .6fr; }
  .chips{ position:sticky; top:var(--hdr); }
}
/* ================= Celular (≤ 700 px) ================= */
@media (max-width:700px){
  body.pg{ --hdr:56px; --cw:42px; }
  .wrap{ padding-inline:16px; }
  .hdr .wrap{ gap:10px; }
  .logo{ font-size:21px; }
  .hdr nav{ gap:10px; }
  .hdr nav a.nl{ display:none; }
  .hdr .btn{ padding:7px 12px; font-size:14px; box-shadow:2px 2px 0 var(--ink); }
  .banner{ height:66px; margin-bottom:6px; }
  .flag{ --w:40px; height:52px; font-size:20px; }
  .flag:nth-child(n+8){ display:none; }
  .hero{ padding-block:0 70px; }
  .hero h1{ font-size:38px; margin-top:12px; }
  .lede{ font-size:17px; }
  .hero .ctas .btn{ flex:1 1 100%; }
  .laptop{ padding:6px 6px 8px; box-shadow:6px 6px 0 var(--a4); }
  .laptop::after{ bottom:-12px; height:10px; }
  .devices{ padding:0 10% 34px 0; }
  .phone{ width:27%; border-radius:16px; padding:4px; }
  .phone img{ border-radius:13px; }
  .sec{ padding-block:60px; }
  .sec-h{ margin-bottom:26px; }
  .steps{ grid-template-columns:1fr; gap:18px; }
  .show{ gap:56px; }
  .show-txt h3{ font-size:25px; }
  .show-txt p{ font-size:17px; }
  .pair{ grid-template-columns:.5fr 1fr; gap:12px; }
  .modes{ grid-template-columns:1fr 1fr; gap:12px; }
  .mode{ padding:12px; }
  .mode h3{ font-size:17px; }
  .mode p{ font-size:14px; }
  .mtable{ margin:4px; }
  .mtable .seat{ width:18px; height:18px; }
  .perks{ grid-template-columns:1fr; }
  .perk{ border-right:0 !important; border-bottom:var(--line) !important; padding:20px 18px; }
  .perk:last-child{ border-bottom:0 !important; }
  .cta{ padding-block:70px; }
  .rhero{ padding-block:30px 26px; }
  .rhero > .wrap:first-child{ grid-template-columns:1fr; }
  .rhero .fan{ height:150px; order:-1; }
  .rhero .fan .card{ top:10px; }
  .rhero h1{ font-size:38px; margin-top:6px; }
  .chips{ position:static; gap:6px; }
  .chips a{ font-size:14px; padding:5px 11px; }
  .rgrid{ padding-top:10px; }
  .rmain h2{ font-size:28px; }
  .es{ grid-template-columns:1fr; gap:10px; padding:16px; }
  .es .n{ width:42px; height:42px; font-size:20px; }
  .vals{ grid-template-columns:repeat(2,auto); }
  .turn{ grid-template-columns:1fr; gap:4px; }
  .turn .arrow{ transform:rotate(90deg); justify-self:center; line-height:1; }
  .scorecard{ grid-template-columns:1fr; }
  .quiz{ grid-template-columns:1fr; }
  .quiz-bar{ top:62px; flex-wrap:wrap; gap:4px 10px; }
  .glos{ grid-template-columns:1fr; }
  .foot small{ margin-left:0; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  :root{ scroll-behavior:auto; }
  .flag, .hero h1 .w, .rv.go{ animation:none !important; }
  .devices, .ph, .vit-img figure{ transition:none; }
}

/* ================= Impresión ================= */
/* Con el botón «Imprimir resumen» (html.print-resumen): sólo la hoja A4. Con Ctrl+P: la página entera, reglas abiertas. */
@media print{
  @page{ size:A4; margin:12mm; }
  :root, body.pg{ background:#fff; }
  .hdr, .progress, .chips, .toc, .foot, .skip, .q-btns, .quiz-bar, .print-box button, .rcta, .rhero .fan{ display:none !important; }
  .es, details.rule, .q, .ready{ box-shadow:none; break-inside:avoid; }
  details::details-content{ content-visibility:visible; display:block; }
  .q-ans{ display:block !important; }
  .rgrid{ display:block; padding:0; }
  html.print-resumen body > *:not(.sheet){ display:none !important; }
  html.print-resumen .sheet{ display:grid; }
  /* Una sola hoja en cualquier navegador (Safari agrega encabezado y pie, y usa Carta): nada fuerza alto ni salto. */
  html.print-resumen, html.print-resumen body{ height:auto !important; min-height:0 !important; overflow:visible !important; margin:0 !important; padding:0 !important; }
  html.print-resumen .sheet{ break-inside:avoid; page-break-inside:avoid; break-after:avoid; page-break-after:avoid; max-height:240mm; overflow:hidden; }
  .sheet{ grid-template-columns:1fr 1fr; gap:16px 26px; align-content:start; color:#111; font:12.5pt/1.4 var(--f-body); }
  .sheet h3{ grid-column:1/-1; margin:0 0 6px; font:400 22pt var(--f-display); }
  .sheet h4{ margin:0 0 4px; font:700 13pt var(--f-card); letter-spacing:.1em; text-transform:uppercase; border-bottom:1.5px solid #111; }
  .sheet ul{ margin:0; padding-left:16px; }
  .sheet table{ width:100%; border-collapse:collapse; }
  .sheet td{ padding:1px 0; }
  .sheet td:last-child{ text-align:right; font-weight:700; }
  .sheet .ft{ grid-column:1/-1; margin:8px 0 0; border-top:1px solid #111; padding-top:6px; font-size:9pt; }
}