/* Mochi y las Tablas — web de presentación
   Misma familia visual que el juego: pastel, trazo grueso de tinta, sombra «de tope».
   Tipografías alojadas aquí (SIL OFL 1.1), sin pedir nada a terceros. */
@font-face{font-family:"Fredoka";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/fonts/fredoka-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;
  src:url("/assets/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --crema:#FFF6EC; --crema-2:#FFEBDA;
  --fresa:#FF8FA3; --fresa-osc:#E86B85; --rosa-txt:#B8344F;
  --matcha:#7FD3A0; --matcha-osc:#2F8F5B; --cielo:#A8D8FF; --miel:#FFC96B; --lavanda:#C9B6E4;
  --tinta:#4A3B52; --suave:#6E5E78;
  --sombra:0 6px 0 rgba(74,59,82,.16);
  --radio:26px;
  --cjk:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans CJK SC";
  --display:"Fredoka","Trebuchet MS",var(--cjk),system-ui,sans-serif;
  --cuerpo:"Nunito","Trebuchet MS",var(--cjk),system-ui,sans-serif;
  --ancho:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--cuerpo);color:var(--tinta);font-size:17px;line-height:1.6;min-height:100vh;
  background:radial-gradient(circle at 12% 0,#FFE3EC 0,transparent 38%),
             radial-gradient(circle at 92% 6%,#DFF1FF 0,transparent 36%),
             radial-gradient(circle at 50% 100%,#FFF0D6 0,transparent 50%),var(--crema);
  background-attachment:fixed;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:4px solid var(--lavanda);outline-offset:3px;border-radius:8px}

.saltar{position:absolute;left:16px;top:-80px;background:#fff;border:3px solid var(--tinta);border-radius:14px;padding:8px 14px;
  font-family:var(--display);font-weight:600;z-index:100;text-decoration:none}
.saltar:focus{top:12px}

/* ---- cabecera ---- */
.cab{max-width:var(--ancho);margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{display:flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:26px;color:var(--tinta)}
.marca__mochi{width:40px;height:auto}

.idiomas{position:relative}
.idiomas summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;
  background:#fff;border:3px solid var(--tinta);border-radius:16px;padding:4px 12px 4px 8px;box-shadow:0 4px 0 rgba(74,59,82,.16);
  font-family:var(--display);font-weight:600;font-size:15px}
.idiomas summary::-webkit-details-marker{display:none}
.idiomas summary::after{content:"";width:8px;height:8px;border-right:3px solid var(--tinta);border-bottom:3px solid var(--tinta);transform:rotate(45deg) translateY(-2px);margin-left:2px}
.idiomas[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.idiomas ul{list-style:none;margin:8px 0 0;padding:8px;position:absolute;right:0;z-index:30;min-width:210px;
  background:#fff;border:3px solid var(--tinta);border-radius:20px;box-shadow:0 10px 0 rgba(74,59,82,.18)}
.idiomas li a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:12px;text-decoration:none;font-family:var(--display);font-weight:600;font-size:16px}
.idiomas li a:hover{background:var(--crema-2)}
.idiomas li a[aria-current="page"]{background:var(--miel)}
.bnd{width:28px;height:19px;border-radius:4px;box-shadow:0 0 0 1.5px rgba(74,59,82,.35);flex:none;display:block}
@media (max-width:420px){.idiomas__nom{display:none}}

/* sugerencia de idioma (solo si el navegador pide otro) */
.sugerencia{background:var(--tinta);color:#fff;padding:8px 44px 8px 16px;position:relative;text-align:center}
.sugerencia[hidden]{display:none}
.sugerencia a{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--display);font-weight:600;min-height:40px}
.sugerencia a[hidden]{display:none}
.sugerencia__x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer;border-radius:10px}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:12px 30px;
  font-family:var(--display);font-weight:700;font-size:24px;text-decoration:none;color:var(--tinta);
  background:var(--fresa);border:3px solid var(--tinta);border-radius:var(--radio);box-shadow:var(--sombra);
  transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(74,59,82,.16)}
.btn:active{transform:translateY(4px);box-shadow:none}
.btn--sec{background:#fff}

.tiendas{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.tienda{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:8px 18px 8px 14px;text-decoration:none;
  background:var(--tinta);color:#fff;border:3px solid var(--tinta);border-radius:18px;box-shadow:var(--sombra)}
.tienda__txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.tienda small{font-size:12px;font-weight:700;opacity:.9}
.tienda b{font-family:var(--display);font-size:20px;font-weight:600}
.tienda--off{background:#fff;color:var(--suave);border-style:dashed;box-shadow:none}
html[data-os="ios"] .tiendas .apple{order:-1}
html[data-os="android"] .tiendas .google{order:-1}

/* ---- hero ---- */
.hero{position:relative;max-width:var(--ancho);margin:0 auto;padding:28px 16px 56px;display:grid;gap:12px;align-items:center;overflow:hidden}
.hero__txt{position:relative;z-index:2}
.hero h1{font-size:clamp(34px,8.4vw,60px);font-weight:700;color:var(--rosa-txt)}
.lead{font-size:clamp(18px,3.6vw,22px);margin-top:16px;max-width:34em}
.hero__acciones{margin-top:24px}
.nota{margin-top:12px;font-size:15px;color:var(--suave)}
.hero__vis{position:relative;display:grid;place-items:center;min-height:300px}
.hero__mochi{width:min(260px,62vw);height:auto;animation:flotar 5s ease-in-out infinite;filter:drop-shadow(0 8px 0 rgba(74,59,82,.08))}
.num{position:absolute;display:grid;place-items:center;min-width:64px;height:48px;padding:0 14px;background:#fff;border:3px solid var(--tinta);
  border-radius:18px;box-shadow:var(--sombra);font-family:var(--display);font-weight:700;font-size:22px;animation:flotar 6s ease-in-out infinite}
.n1{left:6%;top:14%}
.n2{right:2%;top:30%;background:var(--miel);animation-delay:-2s}
.n3{left:12%;bottom:10%;background:var(--cielo);animation-delay:-4s}
.n4{right:10%;bottom:6%;background:var(--matcha);animation-delay:-1s}
.nube{position:absolute;width:120px;color:#fff;opacity:.7;z-index:1;animation:flotar 8s ease-in-out infinite}
.nube--1{left:-20px;top:30px}
.nube--2{right:-30px;bottom:40px;width:150px;animation-delay:-3s}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

@media (min-width:860px){
  .hero{grid-template-columns:1.1fr .9fr;padding-top:48px;padding-bottom:80px;gap:32px}
  .hero__vis{min-height:380px}
  .hero__mochi{width:min(320px,100%)}
}

/* ---- secciones ---- */
.seccion{max-width:var(--ancho);margin:0 auto;padding:44px 16px}
.seccion h2{font-size:clamp(28px,6vw,40px);font-weight:700;text-align:center}
.seccion__lead{text-align:center;max-width:36em;margin:12px auto 0;font-size:18px}

.pasos{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.paso{position:relative;background:#fff;border:3px solid var(--tinta);border-radius:var(--radio);box-shadow:var(--sombra);padding:26px 22px 22px}
.paso__n{position:absolute;left:18px;top:-18px;width:38px;height:38px;border-radius:50%;background:var(--miel);border:3px solid var(--tinta);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:19px}
.paso h3{font-size:24px}
.paso p{margin-top:6px;color:var(--suave)}

.niveles{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.nivel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:22px 18px 20px;border:3px solid var(--tinta);border-radius:var(--radio);box-shadow:var(--sombra)}
.nivel h3{font-size:24px;margin-top:6px}
.nivel p{max-width:20em}
.nivel--1{background:linear-gradient(160deg,#FFE3EC,#DFF1FF)}
.nivel--2{background:linear-gradient(160deg,#FFC9A0,#FF9EC4)}
.nivel--3{background:linear-gradient(160deg,#4B2E80,#1B2C63);color:#F4ECFF}
.etiqueta{margin-top:10px;display:inline-block;padding:4px 14px;border:3px solid var(--tinta);border-radius:999px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--tinta)}
.etiqueta--gratis{background:var(--matcha)}
.etiqueta--app{background:var(--lavanda)}
.extra{margin:26px auto 0;max-width:36em;text-align:center;font-family:var(--display);font-weight:600;font-size:19px;
  background:#fff;border:3px dashed var(--tinta);border-radius:20px;padding:14px 18px}

.familias{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:16px}
.fam{background:#fff;border:3px solid var(--tinta);border-radius:var(--radio);box-shadow:var(--sombra);padding:20px;display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:start}
.fam__ic{grid-row:span 2;font-size:34px;line-height:1;background:var(--crema-2);border:3px solid var(--tinta);border-radius:16px;width:52px;height:52px;display:grid;place-items:center}
.fam h3{font-size:21px}
.fam p{color:var(--suave);font-size:16px}

.seccion--descarga{text-align:center}
.seccion--descarga .tiendas{justify-content:center}
.seccion--descarga .hero__acciones{margin-top:26px}

@media (min-width:640px){
  .pasos,.niveles{grid-template-columns:repeat(3,1fr)}
  .familias{grid-template-columns:1fr 1fr}
}

/* ---- pie ---- */
.pie{max-width:var(--ancho);margin:24px auto 0;padding:24px 16px calc(32px + env(safe-area-inset-bottom));border-top:3px dashed rgba(74,59,82,.25);font-size:15px;color:var(--suave)}
.pie__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pie__por{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pie__mto{display:block;width:100px;height:auto}
.pie__c{margin-top:12px;font-size:14px}
.pie a{text-underline-offset:3px}

/* ---- texto legal ---- */
.texto{max-width:760px;margin:0 auto;padding:12px 16px 36px}
.texto h1{font-size:clamp(30px,6vw,44px);color:var(--rosa-txt);margin-top:10px}
.texto h2{font-size:24px;margin-top:30px}
.texto p{margin-top:8px}
.texto .nota{margin-top:10px}
.volver{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:600;text-underline-offset:3px}

/* ---- 404 ---- */
.e404{max-width:520px;margin:0 auto;padding:36px 16px;text-align:center;display:grid;justify-items:center;gap:8px}
.e404 h1{font-size:56px;color:var(--rosa-txt)}
.e404__lista{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;width:100%}
.e404__lista a{display:flex;align-items:center;gap:12px;min-height:48px;background:#fff;border:3px solid var(--tinta);border-radius:16px;padding:6px 14px;text-decoration:none;text-align:left}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}