/* La portada de Reddu (/). Usa los colores y piezas de reddu.css. */

/* Colores por eje: cualquier bloque con .eje-* recibe su pareja (pastel + saturado) */
.eje-menta { --eje: var(--menta); --eje-pastel: var(--menta-pastel); --eje-texto: var(--menta-texto); }
.eje-magenta { --eje: var(--magenta); --eje-pastel: var(--rosa-pastel); --eje-texto: var(--magenta-texto); }
.eje-amarillo { --eje: var(--amarillo); --eje-pastel: var(--crema-pastel); --eje-texto: var(--amarillo-texto); }
.eje-azul { --eje: var(--azul); --eje-pastel: var(--lavanda-pastel); --eje-texto: var(--azul); }

.antetitulo-menta { background: var(--menta-pastel); color: var(--menta-texto); }
.antetitulo-azul { background: var(--blanco); color: var(--azul); }
.antetitulo-magenta { background: var(--rosa-pastel); color: var(--magenta-texto); }
.antetitulo-oscuro { background: #1d1d1d; color: var(--menta); }
.antetitulo-blanco { background: var(--blanco); color: var(--negro); }
.antetitulo-blanco::before { display: none; }
.antetitulo-blanco img { width: 64px; height: auto; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin: 32px 0 0; }


.franja-centros { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.franja-centros .envoltura { padding: 28px 0; text-align: center; }
.franja-centros p { margin: 0 0 18px; font-size: 15px; color: var(--gris); }
.logos-cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos-pista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 64px; width: max-content; animation: cintaLogos 40s linear infinite; }
@keyframes cintaLogos { to { transform: translateX(calc(-50% - 32px)) } }
.logos-pista img { height: 46px; width: auto; display: block; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.logos-pista li:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logos-pista { flex-wrap: wrap; justify-content: center; width: auto; gap: 28px 40px; } .logos-pista [aria-hidden="true"] { display: none; } .logos-cinta { -webkit-mask-image: none; mask-image: none; } }


/* ---------- 2 · Los juegos ---------- */
.subrayado { background: linear-gradient(transparent 62%, var(--amarillo) 62%, var(--amarillo) 90%, transparent 90%); }
/* El carrusel de los juegos (como el de RevisionDojo): una tarjeta grande por juego que pasa sola,
   con la píldora que se va llenando, flechas, puntos y un Alex asomando por el borde */
.juegos { overflow-x: clip; }
.carrusel { margin-top: 40px; }
.carrusel-pills { display: flex; justify-content: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 16px; }
.carrusel-pills::-webkit-scrollbar { display: none; }
.carrusel-pills button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 0; background: var(--suave); color: var(--negro); font: 600 16px/1 var(--cuerpo); cursor: pointer; transition: background .25s, color .25s; }
.carrusel-pills button:hover { background: #ececea; }
.carrusel-pills button[aria-selected="true"] { background: var(--negro); color: var(--blanco); }
.anillo { width: 18px; height: 18px; transform: rotate(-90deg); display: none; }
.anillo circle { fill: none; stroke-width: 2.6; stroke: rgba(255,255,255,.3); }
.anillo .anillo-progreso { stroke: var(--blanco); stroke-linecap: round; stroke-dasharray: 50.27; stroke-dashoffset: 50.27; }
.carrusel-pills button[aria-selected="true"] .anillo { display: block; }
.carrusel-pills button.corre .anillo-progreso { animation: anillo var(--segundos, 9s) linear forwards; }
.carrusel.en-pausa .anillo-progreso { animation-play-state: paused !important; }
@keyframes anillo { to { stroke-dashoffset: 0; } }
.carrusel-escena { position: relative; margin-top: 28px; }
.carrusel-pista { display: grid; width: min(1120px, 100% - 32px); margin-inline: auto; }
.diapo { --d: 0; grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 72px); border-radius: 40px; background: var(--eje-pastel);
  transform: translateX(calc(var(--d) * (100% + 24px))) scale(var(--escala, 1)); transition: transform .85s cubic-bezier(.65,0,.25,1), opacity .85s; }
.diapo[aria-hidden="true"] { --escala: .94; opacity: .5; pointer-events: none; }
.diapo.lejos { opacity: 0; }
.diapo-movil .movil { width: min(286px, 70vw); transform: rotate(-2deg); transition: transform .6s; }
.diapo:not([aria-hidden="true"]) .diapo-movil .movil:hover { transform: rotate(0); }
.diapo-texto h3 { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.02; color: var(--eje-texto); margin-bottom: 20px; }
.diapo-texto > p { font-size: 18px; max-width: 42ch; color: #1d1d1d; }
.diapo-etiqueta { display: inline-block; margin: 0 0 18px; padding: 8px 14px; border-radius: 12px; background: var(--eje); color: var(--negro); font: 700 14px/1 var(--cuerpo); letter-spacing: .02em; }
.eje-azul .diapo-etiqueta { color: var(--blanco); }
.diapo-pista { margin: 22px 0 0; font-weight: 600; color: var(--eje-texto); font-size: 15px; }
.diapo-pj { position: absolute; top: -64px; right: clamp(24px, 5vw, 64px); width: clamp(110px, 13vw, 170px); pointer-events: none; filter: drop-shadow(0 16px 16px rgba(0,0,0,.18));
  transform: translateY(40px) rotate(6deg); opacity: 0; transition: transform .7s .45s cubic-bezier(.2,1.5,.4,1), opacity .4s .45s; }
.diapo:not([aria-hidden="true"]) .diapo-pj { transform: none; opacity: 1; }
.carrusel-flechas { position: absolute; inset: 0; pointer-events: none; width: min(1200px, 100% - 16px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.flecha { pointer-events: auto; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--negro); background: var(--blanco); box-shadow: 0 4px 0 var(--negro); display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.flecha:hover { transform: translateY(-2px); }
.flecha:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--negro); }
.flecha svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.carrusel-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.carrusel-puntos span { width: 10px; height: 10px; border-radius: 999px; background: #d4d4d4; transition: width .3s, background .3s; }
.carrusel-puntos span.activo { width: 30px; background: var(--negro); }
@media (max-width: 860px) {
  .carrusel-pills { justify-content: flex-start; }
  .diapo { grid-template-columns: 1fr; justify-items: center; padding-top: 56px; }
  .diapo-texto { order: -1; justify-self: stretch; }
  .diapo-pj { top: -44px; right: 12px; width: 96px; }
  .diapo-texto h3 { font-size: 34px; padding-right: 64px; }
  .diapo-pista { display: none; }
  .carrusel-flechas { display: none; }
}
.chips { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 999px; background: var(--blanco); border: 2px solid var(--eje, var(--negro)); font-weight: 600; font-size: 15px; }
.nota-juegos { margin: 36px auto 0; max-width: 64ch; color: #222; }
@media (max-width: 920px) {
  .pestanas-lista { grid-template-columns: repeat(2, 1fr); }
  .panel { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .panel-texto { justify-self: stretch; }
}
@media (max-width: 420px) { .pestanas-lista button { padding: 12px; gap: 10px; } .pt-icono { width: 40px; height: 40px; font-size: 22px; } .pestanas-lista b { font-size: 18px; } }


/* ---------- 4 · Alex ---------- */
.alex { background: var(--blanco); }
.alex-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.alex-figura { position: relative; isolation: isolate; }
.alex-figura::before { content: ""; position: absolute; inset: 8% 6% 4%; border-radius: 50%; background: var(--crema-pastel); z-index: -1; }
.alex-figura img { width: 100%; animation: flotar 7s ease-in-out infinite; }
.bocadillo { position: absolute; background: var(--negro); color: var(--blanco); border: 2px solid #D9D9D9; padding: 12px 16px; font-size: 17px; line-height: 1.3; max-width: 230px; box-shadow: var(--sombra); }
.b1 { top: 6%; right: 0; border-radius: 16px 16px 16px 3px; font-weight: 700; }
.b2 { bottom: 12%; left: 0; border-radius: 3px 16px 16px 16px; }
.js .bocadillo { transform: scale(0); }
.js .aparece.visto .bocadillo { animation: rebote .8s linear forwards; }
.js .aparece.visto .b2 { animation-delay: 1s; }
@keyframes rebote { 0% { transform: scale(0) } 36% { transform: scale(1) } 54% { transform: scale(.88) } 73% { transform: scale(1) } 82% { transform: scale(.97) } 100% { transform: scale(1) } }
.ventajas { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 18px; }
.ventajas li { display: flex; gap: 16px; align-items: flex-start; }
.ventajas b { display: block; font-size: 18px; margin-bottom: 2px; }
.ventajas p { margin: 0; color: #333; }
.v-icono { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--eje-pastel); border: 2px solid var(--eje); }
@media (max-width: 920px) { .alex-in { grid-template-columns: 1fr; } .alex-figura { max-width: 420px; margin-inline: auto; } }

/* ---------- 5 · La ciencia ---------- */
.ciencia { background: var(--lavanda-pastel); }
.ciencia-cabecera { max-width: 820px; }
.ciclo { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: paso; }
.paso { position: relative; background: var(--blanco); border-radius: var(--radio); padding: 28px 24px 24px; border-top: 6px solid var(--eje); box-shadow: var(--sombra); }
.paso:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 34px; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--negro); color: var(--blanco); display: grid; place-items: center; font-weight: 700; }
.paso-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--eje-pastel); color: var(--eje-texto); font: 900 22px/1 var(--titular); margin-bottom: 14px; }
.paso p { margin: 0; color: #2a2a2a; font-size: 16px; }
.ciencia-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.habilidades, .cifras { background: var(--blanco); border-radius: var(--radio); padding: 32px; }
.chips-grandes li { border-color: var(--eje, var(--negro)); background: var(--eje-pastel, var(--blanco)); font-size: 16px; padding: 10px 16px; }
.chips-grandes .chip-mas { border-style: dashed; border-color: #999; background: var(--blanco); }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-content: center; }
.cifra b { font: 900 clamp(48px, 5vw, 72px)/1 var(--titular); }
.cifra span { font: 900 32px/1 var(--titular); }
.cifra p { margin: 8px 0 0; font-size: 15px; color: #2a2a2a; }
.cifras-fuente { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--gris); }
.honestidad { margin-top: 16px; background: var(--blanco); border: 2px solid var(--negro); border-radius: var(--radio); padding: 32px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px 40px; align-items: start; }
.honestidad ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; grid-row: span 2; }
.honestidad li { padding-left: 34px; position: relative; }
.honestidad li::before { content: "✕"; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--rosa-pastel); color: var(--magenta-texto); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.honestidad .enlace-flecha { justify-self: start; }
@media (max-width: 980px) {
  .ciclo { grid-template-columns: 1fr 1fr; }
  .paso:nth-child(2)::after { display: none; }
  .ciencia-rejilla, .honestidad { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .ciclo { grid-template-columns: 1fr; } .paso:not(:last-child)::after { display: none; } .cifras { grid-template-columns: 1fr; } }

/* ---------- 6 · Nubo ---------- */
.nubo { background: var(--azul); color: var(--blanco); }
.nubo .entradilla { color: #f1f4ff; }
.nubo-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.nubo-video { margin: 0; }
.nubo-video video { display: block; width: 100%; border-radius: 28px; background: #001b4d; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); aspect-ratio: 16 / 9; }
.nubo-video figcaption { margin-top: 12px; font-size: 15px; color: #e3e8ff; }
.nubo-casos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.caso { margin: 0; background: var(--blanco); color: var(--negro); border-radius: var(--radio); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.caso p { margin: 0; font-size: 18px; line-height: 1.5; }
.caso p::first-letter { font-family: var(--titular); }
.caso footer { font-size: 15px; color: #333; }
@media (max-width: 920px) { .nubo-in, .nubo-casos { grid-template-columns: 1fr; } }

/* ---------- 7 · Reseñas ---------- */
.resenas { overflow: hidden; }
.cinta { margin-top: 48px; display: grid; gap: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cinta-pista { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; width: max-content; animation: cinta 70s linear infinite; }
.cinta-inversa { animation-direction: reverse; animation-duration: 80s; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(calc(-50% - 8px)) } }
.resena { width: min(400px, 82vw); flex: none; background: var(--eje-pastel); border-radius: var(--radio); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.resena p { margin: 0; font-size: 17px; }
.resena footer { display: flex; gap: 12px; align-items: center; font-size: 14px; color: #333; }
.resena footer b { display: block; font-size: 16px; color: var(--negro); }
.inicial { width: 42px; height: 42px; border-radius: 50%; background: var(--eje); color: var(--negro); display: grid; place-items: center; font: 900 20px/1 var(--titular); flex: none; }
.eje-azul .inicial { color: var(--blanco); }
@media (prefers-reduced-motion: reduce) { .cinta { -webkit-mask-image: none; mask-image: none; } .cinta-pista { flex-wrap: wrap; width: auto; justify-content: center; } .cinta-pista [aria-hidden="true"] { display: none; } }
.historia { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 40px; padding: 18px 26px; border-radius: 20px; border: 2px solid var(--negro); text-decoration: none; box-shadow: 0 4px 0 var(--negro); transition: transform .15s; }
.historia:hover { transform: translateY(-2px); }
.historia-etiqueta { padding: 6px 10px; border-radius: 10px; background: var(--amarillo); font-size: 13px; font-weight: 700; }
.historia b { font-family: var(--titular); font-size: 21px; }

/* ---------- 8 · Las dos puertas ---------- */
.puertas { background: var(--suave); }
.puertas-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.puerta { display: block; text-decoration: none; border-radius: var(--radio-g); padding: clamp(28px, 4vw, 44px); background: var(--blanco); border: 2px solid var(--negro); box-shadow: 0 6px 0 var(--negro); transition: transform .2s, box-shadow .2s; }
.puerta:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--negro); }
.puerta-nubo { background: var(--menta-pastel); }
.puerta-etiqueta { display: inline-block; padding: 6px 12px; border-radius: 10px; background: var(--negro); color: var(--blanco); font-size: 14px; font-weight: 700; }
.puerta-nubo .puerta-etiqueta { background: var(--menta); color: var(--negro); }
.puerta-precio { margin: 20px 0 4px; display: flex; align-items: baseline; gap: 8px; }
.puerta-precio b { font: 900 clamp(52px, 6vw, 76px)/1 var(--titular); }
.puerta-precio span { font-size: 18px; font-weight: 600; }
.puerta-detalle { color: var(--gris); font-size: 15px; }
@media (max-width: 760px) { .puertas-rejilla { grid-template-columns: 1fr; } }

/* ---------- 9 · Preguntas ---------- */
.preguntas-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.preguntas-alex { width: 200px; margin-top: 16px; }
.acordeon details { border-bottom: 2px solid var(--linea); }
.acordeon details:first-child { border-top: 2px solid var(--linea); }
.acordeon summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font: 600 19px/1.35 var(--cuerpo); }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--suave); display: grid; place-items: center; font-size: 22px; transition: transform .25s, background .25s; }
.acordeon details[open] summary::after { transform: rotate(45deg); background: var(--menta); }
.acordeon details p { padding-right: 48px; color: #222; }
@media (max-width: 860px) { .preguntas-in { grid-template-columns: 1fr; } .preguntas-alex { display: none; } }


/* ---------- 4b · El progreso (como «Mi progreso» y «Mi familia» de la app) ---------- */
.progreso { background: var(--blanco); }
.bento { margin-top: 48px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 16px; }
.bento-tarjeta { border-radius: 32px; padding: 28px; background: var(--eje-pastel, var(--suave)); display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.bento-tarjeta h3 { font-size: clamp(22px, 2.2vw, 28px); margin: 0; }
.b-plan { grid-column: span 4; } .b-lectura { grid-column: span 2; }
.b-trampas { grid-column: span 3; } .b-semana { grid-column: span 3; position: relative; }
.b-semana .app-tarjeta { max-width: 72%; }
.b-semana-pj { position: absolute; right: -10px; bottom: -18px; width: 38%; max-width: 210px; filter: drop-shadow(0 12px 14px rgba(0,0,0,.18)); }
.js .aparece .b-semana-pj { transform: translateY(40px) rotate(8deg); opacity: 0; transition: transform .7s .3s cubic-bezier(.2,1.5,.4,1), opacity .4s .3s; }
.js .aparece.visto .b-semana-pj { transform: none; opacity: 1; }
.b-familia { grid-column: span 6; background: var(--negro); color: var(--blanco); display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: center; }
.b-familia-texto h3 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 12px; }
.b-familia p { color: #d6d6d6; margin: 0; }
/* la tarjeta de la app: crema, borde gris y la sombra de abajo, en Lexend */
.app-tarjeta { background: var(--blanco); border: 2px solid #e3e1d8; box-shadow: 0 4px 0 #e3e1d8; border-radius: 18px; padding: 18px 18px 20px; color: var(--negro); display: flex; flex-direction: column; gap: 6px; }
.app-tarjeta small { color: #6b6b6b; font-size: 14px; }
.app-grande { font-size: 24px; line-height: 1.25; font-weight: 500; }
.app-titulo { font-size: 18px; font-weight: 600; }
.casillas { display: grid; grid-template-columns: repeat(26, 1fr); gap: 3px; margin-top: 8px; }
.casillas i { aspect-ratio: .7; border-radius: 3px; background: #efe9d6; }
.casillas i.ok { background: var(--menta); } .casillas i.repasar { background: var(--amarillo); } .casillas i.ahora { background: var(--blanco); outline: 2px solid var(--magenta); outline-offset: -2px; }
.js .aparece .casillas i { transform: scaleY(0); transform-origin: bottom; transition: transform .4s cubic-bezier(.2,1.4,.4,1); }
.js .aparece.visto .casillas i { transform: none; }
.js .aparece.visto .casillas i:nth-child(1) { transition-delay: 0.00s; }
.js .aparece.visto .casillas i:nth-child(2) { transition-delay: 0.04s; }
.js .aparece.visto .casillas i:nth-child(3) { transition-delay: 0.08s; }
.js .aparece.visto .casillas i:nth-child(4) { transition-delay: 0.12s; }
.js .aparece.visto .casillas i:nth-child(5) { transition-delay: 0.16s; }
.js .aparece.visto .casillas i:nth-child(6) { transition-delay: 0.20s; }
.js .aparece.visto .casillas i:nth-child(7) { transition-delay: 0.24s; }
.js .aparece.visto .casillas i:nth-child(8) { transition-delay: 0.28s; }
.js .aparece.visto .casillas i:nth-child(9) { transition-delay: 0.32s; }
.js .aparece.visto .casillas i:nth-child(10) { transition-delay: 0.36s; }
.js .aparece.visto .casillas i:nth-child(11) { transition-delay: 0.40s; }
.js .aparece.visto .casillas i:nth-child(12) { transition-delay: 0.44s; }
.js .aparece.visto .casillas i:nth-child(13) { transition-delay: 0.48s; }
.js .aparece.visto .casillas i:nth-child(14) { transition-delay: 0.52s; }
.js .aparece.visto .casillas i:nth-child(15) { transition-delay: 0.56s; }
.js .aparece.visto .casillas i:nth-child(16) { transition-delay: 0.60s; }
.js .aparece.visto .casillas i:nth-child(17) { transition-delay: 0.64s; }
.js .aparece.visto .casillas i:nth-child(18) { transition-delay: 0.68s; }
.js .aparece.visto .casillas i:nth-child(19) { transition-delay: 0.72s; }
.js .aparece.visto .casillas i:nth-child(20) { transition-delay: 0.76s; }
.js .aparece.visto .casillas i:nth-child(21) { transition-delay: 0.80s; }
.js .aparece.visto .casillas i:nth-child(22) { transition-delay: 0.84s; }
.js .aparece.visto .casillas i:nth-child(23) { transition-delay: 0.88s; }
.js .aparece.visto .casillas i:nth-child(24) { transition-delay: 0.92s; }
.js .aparece.visto .casillas i:nth-child(25) { transition-delay: 0.96s; }
.js .aparece.visto .casillas i:nth-child(26) { transition-delay: 1.00s; }
.leyenda { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #444; }
.leyenda li::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; background: #efe9d6; vertical-align: -1px; }
.leyenda .ok::before { background: var(--menta); } .leyenda .repasar::before { background: var(--amarillo); } .leyenda .ahora::before { background: var(--blanco); outline: 2px solid var(--magenta); outline-offset: -2px; }
.trampa { display: grid; grid-template-columns: 96px 1fr; gap: 2px 14px; align-items: center; padding: 12px 0; border-top: 1px solid #eee; }
.trampa:first-of-type { border-top: 0; }
.trampa > b { font-size: 22px; font-weight: 600; grid-row: span 2; }
.trampa small { grid-column: 2; }
.barras { display: grid; gap: 4px; }
.barras span { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--c) calc(var(--v) * 100%), #f0f0f0 0); }
.barras .antes { --c: #bdbdbd; } .barras .ahora { --c: var(--magenta); }
.barras .ahora[style*="--v:0"] { background: #f0f0f0; position: relative; }
.barras .ahora[style*="--v:0"]::after { content: "0"; position: absolute; left: 0; top: -4px; font-size: 11px; font-weight: 700; color: var(--magenta-texto); }
.ppm { margin: 0; font-size: 18px; } .ppm b { font: 900 clamp(56px, 6vw, 80px)/1 var(--titular); margin-right: 6px; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 6px 0; }
.dias span { height: 40px; border-radius: 10px; background: #efe9d6; display: grid; place-items: end center; padding-bottom: 4px; font-size: 12px; color: #444; }
.dias .si { background: var(--menta); color: var(--negro); }
.dias .hoy { outline: 2px solid var(--negro); outline-offset: -2px; }
.b-familia .app-tarjeta ul { margin: 0 0 8px; padding-left: 18px; font-size: 15px; line-height: 1.45; }
.app-verde { color: var(--menta-texto); font-size: 17px; } .app-rosa { color: var(--magenta-texto); font-size: 17px; }
.bento-nota { margin: 20px 0 0; font-size: 14px; color: var(--gris); }
@media (max-width: 920px) { .bento { grid-template-columns: 1fr; } .bento-tarjeta { grid-column: auto !important; grid-row: auto !important; } .b-familia { grid-template-columns: 1fr; } .b-semana .app-tarjeta { max-width: 100%; } .b-semana { padding-bottom: 150px; } .b-semana-pj { width: 140px; } }

/* ---------- 1 · Portada: la rueda de habilidades (como la de Revision Dojo) ----------
   La portada ocupa justo la pantalla (menos el menú) y la rueda se queda abajo, siempre a la vista.
   El movimiento lo pone inicio.js (GSAP + Lenis, en /vendor). */
:root { --suave-e: cubic-bezier(.16, 1, .3, 1); }
.mano { font: 400 1em/1 var(--mano); color: var(--magenta-texto); display: inline-block; rotate: -2deg; }
.linea-m { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.linea-m > span { display: inline-block; will-change: transform; }
.portada { position: relative; overflow: hidden; background: var(--blanco); text-align: center; display: flex; flex-direction: column;
           height: max(620px, calc(100svh - 74px)); box-sizing: border-box; padding: clamp(18px, 3.5vh, 56px) 0 0; }
.portada::before { content: ""; position: absolute; left: 50%; bottom: -30%; width: 140%; height: 70%; translate: -50% 0; pointer-events: none;
           background: radial-gradient(closest-side, rgba(82,225,199,.16), rgba(82,225,199,0)); }
.portada .antes { display: inline-block; margin: 0; font-size: 14px; font-weight: 600; color: var(--gris); letter-spacing: .02em; }
.portada h1 { font-size: clamp(40px, min(5.6vw, 8vh), 84px); line-height: .96; letter-spacing: -.02em; margin: 10px auto 14px; }
.portada h1 .mano { font-size: .98em; letter-spacing: 0; }
.portada .sub { font-size: clamp(17px, 1.5vw, 20px); color: #333; max-width: 42ch; margin: 0 auto 22px; }
.portada .botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.giro { display: inline-flex; perspective: 600px; }
.giro .letra { display: inline-block; backface-visibility: hidden; transform-origin: 50% 60%; will-change: transform; }

.rueda-h { position: relative; flex: 1 0 240px; margin-top: clamp(12px, 2.5vh, 36px); }
.rueda-centro { position: absolute; left: 50%; top: 0; width: 0; height: 0; }
.carta-h { position: absolute; left: 0; top: 0; width: var(--cw); height: calc(var(--cw) * 1.28); margin-left: calc(var(--cw) / -2);
           --cw: clamp(150px, min(15vw, 23vh), 214px); will-change: transform; }
.carta-h .cara-c { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: var(--c); color: var(--blanco); text-align: left;
           box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 20px 40px -22px rgba(0,0,0,.45); transition: transform .6s var(--suave-e), box-shadow .6s var(--suave-e); }
.carta-h .cara-c::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%); }
.carta-h:hover .cara-c { transform: translateY(-14px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 34px 50px -24px rgba(0,0,0,.5); }
.carta-h .txt { position: absolute; left: 18px; top: 18px; right: 14px; }
.carta-h b { display: block; font: 700 clamp(19px, 1.7vw, 23px)/1.05 var(--titular); letter-spacing: -.01em; }
.carta-h img { position: absolute; left: 50%; top: 27%; width: 84%; height: auto; max-width: none; translate: -50% 0;
           filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); transition: transform .8s var(--suave-e); }
.carta-h:hover img { transform: translateY(-6px) scale(1.04); }
/* sin JS (o en el editor): las cartas en fila, quietas */
html:not(.js) .rueda-centro, .en-editor .rueda-centro { position: static; width: auto; height: auto; display: flex; gap: 14px; justify-content: center; padding-top: 20px; }
html:not(.js) .carta-h, .en-editor .carta-h { position: relative; margin: 0; flex: none; transform: none !important; }

/* ---------- 3 · El mapa de la app, mundo a mundo (la sección se queda fija mientras bajas) ----------
   Copiado de una captura del mapa de la app (casillas en zigzag con su vía, amigos que se colorean reto a reto),
   vestido con el arte de la temporada del Taller de Juguetes. */
.camino { position: relative; background: #FBFAF6; }
.camino-in { height: 100svh; min-height: 680px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr); align-items: center; gap: clamp(24px, 4vw, 64px);
             padding-top: 60px; box-sizing: border-box; }
.pasos-m { position: relative; height: 300px; }
.paso-m { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.paso-m .antes { font-size: 14px; font-weight: 600; color: #C42A20; margin-bottom: 14px; }
.paso-m h2 { font-size: clamp(34px, 3.8vw, 56px); line-height: 1; letter-spacing: -.015em; margin: 0 0 16px; }
.paso-m h2 .mano { color: #E4362B; }
.paso-m p { font-size: 18px; color: #444; max-width: 34ch; margin: 0; }
html:not(.js) .pasos-m, .en-editor .pasos-m { height: auto; }
html:not(.js) .paso-m, .en-editor .paso-m { position: relative; margin-bottom: 28px; opacity: 1 !important; visibility: visible !important; }
.barra-pasos { position: relative; width: 160px; height: 3px; border-radius: 3px; background: #e6e6df; margin-top: 30px; overflow: hidden; }
.barra-pasos i { position: absolute; inset: 0; background: #E4362B; transform-origin: 0 50%; transform: scaleX(0); }

.tel { position: relative; width: 300px; aspect-ratio: 390 / 844; border-radius: 48px; padding: 10px; background: #111; flex: none;
       box-shadow: 0 0 0 2px #2b2b2b inset, 0 50px 80px -40px rgba(0,60,70,.45), 0 20px 30px -20px rgba(0,0,0,.3); }
.tel::before { content: ""; position: absolute; top: 18px; left: 50%; width: 88px; height: 24px; margin-left: -44px; border-radius: 14px; background: #111; z-index: 9; }
.tel-pantalla { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--app-crema); font-family: var(--cuerpo); --mundo: #E4362B; }
.tel-barra { position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 84px; padding: 46px 14px 0; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
             background: var(--app-crema); border-bottom: 1px solid #e4e1d6; font-weight: 600; font-size: 13px; }
.tel-barra span { display: inline-flex; align-items: center; gap: 4px; }
.tel-barra .llama { color: #9a9a9a; margin-right: auto; }
.tel-barra .xp { color: #E8303A; } .tel-barra .xp img { width: 22px; }
.tel-barra .rd { color: var(--app-morado); } .tel-barra .rd i { width: 15px; height: 15px; border-radius: 4px; background: conic-gradient(#FFB223, #ff7a1a, #52E1C7, #4931FF, #FFB223); box-shadow: 0 0 0 2px var(--app-morado-borde) inset; }
.tel-barra .ry { color: #B64BEA; } .tel-barra svg { width: 14px; height: 14px; }
.mapa { position: absolute; left: 0; right: 0; top: 84px; will-change: transform; }
.mundo-card { position: relative; margin: 18px 0 0 12px; display: flex; gap: 8px; }
.mundo-card .mc { width: 196px; height: 64px; border-radius: 16px; background: var(--mundo); box-shadow: 0 4px 0 #cfcdc4; display: flex; align-items: center; overflow: hidden; transition: background .8s; }
.mundo-card .mc img { width: 62px; height: 62px; object-fit: contain; margin: 0 6px 0 4px; }
.mundo-card .mc b { flex: 1; padding-left: 10px; border-left: 2px solid rgba(255,255,255,.9); align-self: stretch; display: flex; align-items: center; color: var(--blanco); font-size: 11px; line-height: 1.25; }
.mundo-card .temp-boton { width: 80px; height: 64px; border-radius: 16px 0 0 16px; background: #F2452B url(/assets/inicio/patron-juguetes.webp) center / 120px; box-shadow: 0 4px 0 #cfcdc4; }
.liga-ficha { position: relative; margin: 14px 0 0 50px; width: 96px; height: 46px; border-radius: 14px; background: linear-gradient(90deg, #4931FF, #C631E8 55%, #FF2C7A); box-shadow: 0 4px 0 #c9c7be; overflow: hidden; }
.liga-ficha img { position: absolute; right: 12px; top: 9px; width: 28px; }
.separa { display: flex; align-items: center; gap: 10px; margin: 26px 0 8px; color: #9a9a9a; font-weight: 600; font-size: 12px; }
.separa::before, .separa::after { content: ""; flex: 1; height: 1px; background: #dedbd0; }
.tramo { position: relative; height: calc(var(--n) * 68px + 8px); }
.amigo { position: absolute; top: 50%; width: 80px; translate: 0 -60%; text-align: center; }
.amigo .fotos { position: relative; width: 80px; height: 82px; }
.amigo .fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.amigo .color { opacity: 0; transition: opacity 1.2s var(--suave-e); }
.amigo.tuyo .color { opacity: 1; }
.amigo .rayos { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.amigo .rayos svg { width: 15px; height: 15px; fill: #D9D9D9; transition: fill .5s, transform .6s var(--suave-e); }
.amigo .rayos svg.si { fill: var(--mundo); transform: scale(1.12); }
.casilla { position: absolute; width: 96px; height: 46px; border-radius: 14px; background: #D9D9D9; box-shadow: 0 4px 0 #bdbdb8; overflow: hidden;
           transition: background .6s var(--suave-e), box-shadow .6s var(--suave-e); }
.casilla .via { position: absolute; top: 0; bottom: 0; left: 58%; width: 26px; background: url(/assets/inicio/camino-juguetes.webp) 50% 0 / 26px auto repeat-y; box-shadow: -1px 0 0 rgba(0,0,0,.12), 1px 0 0 rgba(0,0,0,.12); }
.casilla:not(.abierta) .via { filter: grayscale(1) brightness(1.08); opacity: .8; }
.casilla .ico { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; }
.casilla .ico svg { width: 100%; height: 100%; fill: #A9A9A9; transition: fill .5s; }
.casilla .ico.jugar { width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #A9A9A9; display: grid; place-items: center; transition: background .5s; }
.casilla .ico.jugar svg { width: 11px; height: 11px; fill: var(--blanco); margin-left: 2px; }
.casilla.abierta { background: var(--mundo); box-shadow: 0 4px 0 #c9c7be; }
.casilla.abierta .ico svg { fill: var(--blanco); } .casilla.abierta .ico.jugar { background: var(--blanco); } .casilla.abierta .ico.jugar svg { fill: var(--mundo); }
.siguiente { margin: 34px 0 40px 12px; }
.siguiente .mc { background: #BDBDB8; }
.siguiente.abierta .mc { background: var(--mundo); }
.siguiente .gris { filter: grayscale(1); }
.siguiente .gris, .siguiente .col { transition: opacity 1s var(--suave-e); }
.siguiente .col { position: absolute; left: 4px; top: 1px; opacity: 0; } .siguiente.abierta .col { opacity: 1; } .siguiente.abierta .gris { opacity: 0; }
.premio-fuera { position: relative; justify-self: start; width: 230px; height: 260px; }
.tarjeta-p { position: absolute; left: 0; top: 30px; width: 210px; padding: 16px; border-radius: 24px; background: var(--blanco); text-align: center; box-sizing: border-box;
             box-shadow: 0 30px 60px -30px rgba(0,60,70,.4), 0 0 0 1px rgba(0,0,0,.04); opacity: 0; }
.tarjeta-p img { height: 120px; width: auto; display: block; margin: -56px auto 6px; filter: drop-shadow(0 12px 14px rgba(0,0,0,.18)); }
.tarjeta-p b { display: block; font: 700 18px/1.1 var(--titular); }
.tarjeta-p small { display: block; color: var(--gris); font-size: 13px; margin-top: 3px; }
.tarjeta-p span { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 99px; background: var(--menta-pastel); color: var(--menta-texto); font-size: 13px; font-weight: 600; }

/* ---------- 3b · Una temporada nueva cada dos meses ---------- */
.temps { padding: clamp(80px, 10vw, 130px) 0; background: var(--blanco); text-align: center; overflow: hidden; }
.temps h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1; letter-spacing: -.015em; margin: 0 auto 14px; max-width: 18ch; }
.temps .entr { font-size: 18px; color: var(--gris); margin: 0 auto 52px; max-width: 46ch; }
.temps-fila { display: flex; gap: clamp(14px, 2vw, 28px); justify-content: center; }
.temp-tarjeta { flex: 0 1 250px; text-align: left; }
.temp-tarjeta .marco { overflow: hidden; border-radius: 24px; box-shadow: 0 24px 40px -28px rgba(0,0,0,.5); }
.temp-tarjeta img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--suave-e); }
.temp-tarjeta:hover img { transform: scale(1.05); }
.temp-tarjeta span { display: block; margin-top: 14px; font: 700 18px/1.1 var(--titular); }

/* ---------- 10 · Final: la ola respira y los premios orbitan alrededor de una partida de verdad ---------- */
.final { position: relative; overflow: hidden; background: var(--blanco); text-align: center; padding-top: clamp(80px, 10vw, 130px); }
.final h2 { font-size: clamp(38px, 5vw, 72px); line-height: .98; letter-spacing: -.02em; margin: 0 auto 16px; max-width: 16ch; }
.final .sub { font-size: 18px; color: var(--gris); margin: 0 auto 28px; max-width: 42ch; }
.final .acciones { justify-content: center; margin-top: 0; }
.final-escena { position: relative; height: clamp(560px, 58vw, 740px); margin-top: 40px; }
.final-escena svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; }
.final .movil { position: absolute; left: 50%; bottom: -70px; translate: -50% 0; z-index: 3; width: min(290px, 66vw); }
.orbita { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 2; }
.orbita.delante { z-index: 4; }
.orbita img { position: absolute; left: 0; top: 0; max-width: none; height: auto; will-change: transform; filter: drop-shadow(0 16px 18px rgba(0,60,50,.22)); }

@media (max-width: 960px) {
  .portada { height: auto; min-height: 0; } .rueda-h { flex: none; height: 300px; }
  .carta-h { --cw: 150px; } .carta-h .cara-c { border-radius: 20px; }
  .camino-in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; justify-items: center; padding-top: 76px; gap: 12px; }
  .pasos-m { height: 196px; width: 100%; } .paso-m { text-align: center; align-items: center; }
  .paso-m h2 { font-size: 26px; margin-bottom: 8px; } .paso-m p { font-size: 14px; max-width: 30ch; } .paso-m .antes { margin-bottom: 6px; }
  .barra-pasos { margin: 10px auto 0; }
  .tel { zoom: .76; align-self: start; }
  .premio-fuera { position: absolute; right: 8px; bottom: 40px; width: 150px; justify-self: auto; }
  .tarjeta-p { width: 150px; padding: 10px; top: auto; bottom: 0; }
  .tarjeta-p img { width: 80px; height: auto; margin-top: -40px; } .tarjeta-p b { font-size: 15px; } .tarjeta-p span { font-size: 11px; }
  .temps-fila { justify-content: flex-start; overflow-x: auto; padding: 0 16px 10px; scroll-snap-type: x mandatory; }
  .temp-tarjeta { flex: 0 0 64%; scroll-snap-align: center; }
  .final .movil { width: 220px; bottom: -50px; } .final-escena { height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .carta-h .cara-c, .carta-h img, .temp-tarjeta img { transition: none !important; } }
.en-editor .tarjeta-p { opacity: 1; }