@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --grape:#6C5CE7; --grape-d:#5849C4; --coral:#FF7066; --mint:#2EC4B6;
  --sun:#FFD23F; --ink:#2D2A45; --cloud:#F7F6FF; --paper:#FFFDF9; --muted:#6b6a85;
}

body{ font-family:'Nunito',sans-serif; color:var(--ink); background:var(--paper); line-height:1.65; }
.wrap{ max-width:920px; margin:0 auto; padding:0 22px; }
a{ color:var(--grape); }

/* NAV */
nav{ background:#fff; border-bottom:2px solid #eceaf9; position:sticky; top:0; z-index:50; }
nav .wrap{ display:flex; align-items:center; gap:14px; padding:12px 22px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .word{ font-family:'Baloo 2',cursive; font-size:24px; font-weight:800; color:var(--grape); }
.nav-links{ margin-left:auto; display:flex; gap:20px; font-size:15px; font-weight:600; }
.nav-links a{ color:var(--muted); text-decoration:none; }
.nav-links a:hover{ color:var(--grape); }
@media(max-width:680px){ .nav-links{ display:none; } }

.breadcrumb{ font-size:13px; color:var(--muted); padding:14px 0 0; }
.breadcrumb a{ color:var(--muted); text-decoration:none; }

/* HERO */
.hero{ padding:26px 0 36px; display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; }
@media(max-width:760px){ .hero{ grid-template-columns:1fr; gap:22px; } }
h1{ font-family:'Baloo 2',cursive; font-size:clamp(32px,5vw,46px); font-weight:800; line-height:1.1; letter-spacing:-1px; }
h1 .hl{ background:linear-gradient(transparent 58%, #ffd23f88 58%); padding:0 4px; }
.lead{ font-size:18px; color:var(--muted); margin:16px 0 22px; }
.badges{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px; }
.badge{ background:var(--cloud); border:1.5px solid #e6e3f7; border-radius:30px; padding:6px 14px; font-size:13.5px; font-weight:600; }
.cta-big{ display:inline-flex; align-items:center; gap:9px; background:var(--coral); color:#fff; text-decoration:none; font-family:'Baloo 2',cursive; font-size:18px; font-weight:700; padding:15px 30px; border-radius:15px; box-shadow:0 5px 0 #e0564c; transition:all .15s; }
.cta-big:hover{ background:#ff5d52; transform:translateY(-1px); box-shadow:0 6px 0 #e0564c; }
.cta-big:active{ transform:translateY(3px); box-shadow:0 2px 0 #e0564c; }
.cta-sub{ font-size:13px; color:var(--muted); margin-top:9px; }

/* hero preview */
.preview-card{ background:#fff; border:2.5px solid var(--ink); border-radius:14px; padding:16px; box-shadow:8px 8px 0 var(--mint); }
.pc-title{ font-family:'Baloo 2',cursive; font-size:14px; border-bottom:2px solid var(--ink); padding-bottom:4px; margin-bottom:10px; }
.mini-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.mini-domino{ border:2px solid var(--ink); border-radius:4px; overflow:hidden; }
.mini-domino svg{ display:block; width:100%; height:52px; }
.mini-domino .mh:first-child{ border-bottom:1.5px solid var(--ink); }

section{ padding:30px 0; }
h2{ font-family:'Baloo 2',cursive; font-size:27px; font-weight:700; margin-bottom:8px; letter-spacing:-0.5px; }
.intro{ color:var(--muted); font-size:17px; max-width:660px; margin-bottom:6px; }
p{ margin-bottom:12px; }

/* PREVIEW BOX */
.tool{ background:var(--cloud); border-radius:22px; padding:26px; border:2px solid #e6e3f7; }
.sheet-preview{ background:var(--paper); border-radius:12px; padding:16px; box-shadow:inset 0 0 0 2px #e6e3f7; }
.sheet-head{ display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid var(--ink); padding-bottom:4px; margin-bottom:12px; }
.sheet-head .t{ font-family:'Baloo 2',cursive; font-size:16px; }
.sheet-head .n{ font-size:11px; color:#999; }
#sheetGrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
@media(max-width:560px){ #sheetGrid{ grid-template-columns:repeat(2,1fr); } }
.domino{ border:2.5px solid var(--ink); border-radius:5px; overflow:hidden; }
.domino svg{ display:block; width:100%; height:60px; }
.domino .dh:first-child{ border-bottom:1.5px solid var(--ink); }

/* maze grid for preview */
#sheetGrid.maze{ grid-template-columns:repeat(2,1fr); gap:14px; }
.maze-box{ border:2.5px solid var(--ink); border-radius:6px; padding:8px; background:#fff; }
.maze-box svg{ display:block; width:100%; height:auto; }
.maze-label{ font-size:11px; color:#999; font-family:'Baloo 2',cursive; margin-bottom:4px; }

/* benefits */
.benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:680px){ .benefits{ grid-template-columns:1fr; } }
.benefit{ background:var(--cloud); border-radius:16px; padding:20px; }
.benefit .i{ font-size:28px; }
.benefit h3{ font-family:'Baloo 2',cursive; font-size:18px; margin:6px 0 3px; }
.benefit p{ font-size:15px; color:var(--muted); margin:0; }

/* age table */
.age-table{ width:100%; border-collapse:collapse; font-size:15px; }
.age-table th,.age-table td{ text-align:left; padding:12px 15px; border-bottom:1px solid #eceaf9; }
.age-table th{ background:var(--cloud); font-family:'Baloo 2',cursive; }
.age-table td:first-child{ font-weight:700; color:var(--grape); }

/* FAQ */
.faq details{ border:2px solid #eceaf9; border-radius:14px; padding:2px 18px; margin-bottom:10px; }
.faq summary{ font-family:'Baloo 2',cursive; font-size:17px; padding:14px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.faq summary::after{ content:'+'; color:var(--coral); font-size:24px; }
.faq details[open] summary::after{ content:'–'; }
.faq p{ color:var(--muted); padding-bottom:14px; margin:0; }

/* CTA band */
.cta-band{ background:linear-gradient(120deg,var(--grape),#8b7ff0); border-radius:24px; padding:40px 26px; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#fff; opacity:.95; margin:6px 0 20px; }
.cta-band .cta-big{ background:#fff; color:var(--grape); box-shadow:0 5px 0 #0002; }

/* related */
.related{ display:flex; flex-wrap:wrap; gap:10px; }
.related a{ background:#fff; border:2px solid #eceaf9; border-radius:12px; padding:11px 16px; text-decoration:none; color:var(--ink); font-weight:700; font-size:15px; }
.related a:hover{ border-color:var(--mint); }

/* footer */
footer{ background:var(--ink); color:#b9b6d4; padding:34px 0 24px; margin-top:24px; font-size:14px; }
.foot-cols{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:26px; }
@media(max-width:680px){ .foot-cols{ grid-template-columns:1fr 1fr; gap:20px; } }
.foot-h{ font-family:'Baloo 2',cursive; font-size:17px; color:#fff; margin-bottom:10px; }
.foot-col a{ display:block; color:#b9b6d4; text-decoration:none; padding:3px 0; }
.foot-col a:hover{ color:#fff; }
.foot-bottom{ border-top:1px solid #ffffff1a; margin-top:24px; padding-top:16px; color:#8c89ab; font-size:13px; }

/* ---- previews de tipos nuevos ---- */
/* sopa de letras */
.wordsearch{ display:grid; gap:3px; background:#fff; padding:8px; border-radius:6px; max-width:340px; margin:0 auto; }
.wordsearch span{ display:flex; align-items:center; justify-content:center; width:100%; height:26px; font-family:'Baloo 2',cursive; font-weight:600; font-size:14px; color:var(--ink); background:var(--cloud); border-radius:4px; }
.ws-words{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:14px; color:var(--muted); font-weight:700; justify-content:center; }
/* series numericas */
.numrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; border:2px solid #e6e3f7; background:#fff; border-radius:12px; padding:12px 14px; margin-bottom:8px; }
.numcell{ min-width:34px; height:34px; display:grid; place-items:center; background:var(--cloud); border-radius:8px; font-family:'Baloo 2',cursive; font-weight:700; font-size:17px; color:var(--grape); }
.numcell.blank{ background:#fff; border:2px dashed #bbb; color:transparent; }
/* sumas */
.sumrow{ display:flex; align-items:center; gap:12px; border:2px solid #e6e3f7; background:#fff; border-radius:12px; padding:12px 16px; margin-bottom:8px; font-family:'Baloo 2',cursive; font-size:20px; }
.sumdots{ display:inline-flex; gap:3px; }
.sumdots i{ width:13px; height:13px; border-radius:50%; display:inline-block; }
.sumeq{ color:var(--grape); font-weight:700; }
.sumbox{ width:34px; height:34px; border:2px dashed #bbb; border-radius:8px; }
/* repasar lineas */
.lines-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.line-box{ border:2.5px solid var(--ink); border-radius:6px; background:#fff; }
.line-box svg{ display:block; width:100%; height:46px; }
/* relojes */
.clocks-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:560px){ .clocks-grid{ grid-template-columns:repeat(2,1fr); } }
.clock-box{ text-align:center; }
.clock-box svg{ width:100%; height:auto; }
.clock-box .cl-lbl{ margin-top:4px; font-size:11px; color:#999; }
.clock-box .cl-blank{ margin-top:4px; height:18px; border:2px dashed #bbb; border-radius:6px; }

/* ---- home ---- */
.home-hero{ text-align:center; padding:48px 0 30px; }
.home-hero .boo-float{ animation:float 5s ease-in-out infinite; margin-bottom:14px; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.home-hero h1{ max-width:18ch; margin:0 auto; }
.home-hero .lead{ max-width:560px; margin:16px auto 22px; }
.home-hero .badges{ justify-content:center; }
.soon-pill{ display:inline-block; background:var(--sun); color:var(--ink); font-family:'Baloo 2',cursive; font-weight:700; font-size:13px; padding:6px 16px; border-radius:30px; letter-spacing:.5px; margin-bottom:18px; }

/* email capture */
.capture{ background:#fff; border:2px solid #e6e3f7; border-radius:20px; padding:24px; max-width:460px; margin:0 auto; box-shadow:0 10px 30px #6c5ce71a; }
.capture h2{ font-size:21px; margin-bottom:4px; }
.capture .note{ color:var(--muted); font-size:14px; margin-bottom:16px; }
.cap-row{ display:flex; gap:8px; }
@media(max-width:480px){ .cap-row{ flex-direction:column; } }
.cap-row input{ flex:1; border:2px solid #e6e3f7; border-radius:13px; padding:14px 16px; font-family:'Nunito',sans-serif; font-size:15px; color:var(--ink); outline:none; }
.cap-row input:focus{ border-color:var(--grape); }
.cap-row button{ background:var(--coral); color:#fff; border:none; border-radius:13px; padding:14px 22px; font-family:'Baloo 2',cursive; font-size:16px; font-weight:700; cursor:pointer; box-shadow:0 4px 0 #e0564c; white-space:nowrap; }
.cap-row button:active{ transform:translateY(2px); box-shadow:0 2px 0 #e0564c; }
.capture .privacy{ font-size:12px; color:#b3afca; margin-top:12px; margin-bottom:0; }
.capture .success{ display:none; background:#e8f9f6; border:2px solid var(--mint); color:#1d8e82; border-radius:14px; padding:16px; font-weight:700; }
.capture .success.show{ display:block; }

/* home: tarjetas de fichas */
.home-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:760px){ .home-cards{ grid-template-columns:repeat(2,1fr); } }
.home-card{ display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--cloud); border:2px solid #e6e3f7; border-radius:16px; padding:18px 12px; text-decoration:none; color:var(--ink); font-weight:700; font-size:14px; text-align:center; transition:transform .15s, border-color .15s; }
.home-card:hover{ transform:translateY(-3px); border-color:var(--mint); }
.home-card .emoji{ font-size:30px; }
.home-card .card-ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:#fff; color:var(--grape); box-shadow:0 2px 8px #6c5ce71f; transition:background .15s, color .15s; }
.home-card:hover .card-ico{ background:var(--grape); color:#fff; }