/* Portada (2026-10-30): celeste y blanco, el logo como ilustración, sin barra lateral.
   Referencia: columbuspre-school.com. Todo el texto de la portada anterior se conserva (posiciona). */
.home-portada { position: relative; overflow: hidden; background: var(--color-bg-alt); padding: var(--space-6) 0 8rem; }
.home-burbuja { position: absolute; border-radius: 50%; background: var(--color-primary); opacity: .08; pointer-events: none; }
.home-portada .home-ancho { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-5); align-items: center; }
.home-ancho { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-3); }
.home-etiqueta { display: inline-block; background: #fff; color: var(--color-primary-dark); font-weight: 700; padding: .35em 1em; border-radius: 999px; font-size: var(--font-size-sm); box-shadow: var(--shadow-soft); }
.home-portada h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); margin: var(--space-3) 0 var(--space-2); }
.home-portada h1 span { color: var(--color-primary); }
.home-lema { font-family: var(--font-heading); font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--color-heading); font-weight: 600; margin-bottom: var(--space-2); }
.home-portada p.home-sub { color: var(--color-ink-soft); font-size: 1.1rem; max-width: 36ch; }
.home-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.home-sello { display: flex; align-items: center; gap: .8em; margin-top: var(--space-4); font-weight: 700; font-size: var(--font-size-sm); }
.home-sello img { width: 5.5rem; }
.home-ilustracion { position: relative; display: grid; place-items: center; }
.home-disco { width: min(400px, 88%); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 20px 60px rgba(49, 176, 236, .22); display: grid; place-items: center; position: relative; }
.home-disco::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 3px dashed #C8EAF9; }
.home-disco img { width: 72%; }
.home-nube { position: absolute; background: #fff; border-radius: 999px; padding: .5em 1.1em; box-shadow: var(--shadow-soft); font-family: var(--font-heading); font-weight: 700; color: var(--color-primary-dark); }
.home-nube--1 { top: 6%; left: 0; } .home-nube--2 { bottom: 10%; right: 0; }
.home-ola { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 100px; }

.home-seccion { padding: var(--space-6) 0; }
.home-seccion--cielo { background: var(--color-bg-alt); }
.home-titulo { text-align: center; max-width: 44rem; margin: 0 auto var(--space-5); }
.home-titulo .ante { display: block; font-family: var(--font-heading); font-weight: 600; color: var(--color-primary); font-size: 1.1rem; }
.home-titulo h2 { margin-bottom: var(--space-2); }
.home-titulo p { color: var(--color-ink-soft); }

.home-razones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.home-razon { background: #fff; border: var(--border-w) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); transition: border-color .2s, transform .2s; }
.home-razon:hover { border-color: #C8EAF9; transform: translateY(-4px); }
.home-razon h3 { font-size: 1.35rem; margin-bottom: var(--space-1); }
.home-razon p { color: var(--color-ink-soft); font-size: .98rem; }
.home-icono { width: 3.6rem; height: 3.6rem; border-radius: 18px; background: var(--color-primary-tint); display: grid; place-items: center; margin-bottom: var(--space-2); }
.home-icono svg { width: 1.9rem; height: 1.9rem; stroke: var(--color-primary-dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.home-videos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.home-videos h3 { font-size: 1.3rem; }

.home-nombre { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-5); align-items: start; }
.home-juego { font-family: var(--font-heading); font-weight: 800; font-size: clamp(3rem, 7vw, 5.2rem); color: var(--color-primary); line-height: 1; text-align: center; position: sticky; top: 7rem; }
.home-juego small { display: block; font-size: .3em; color: var(--color-ink-soft); font-weight: 600; margin-top: var(--space-2); }

.home-tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.home-tarjeta { text-decoration: none; color: inherit; font-weight: 400; background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); transition: transform .25s, background .25s; }
.home-tarjeta:hover { transform: translateY(-6px); background: var(--color-primary-tint); color: inherit; }
.home-tarjeta .num { display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #fff; color: var(--color-primary); font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; margin-bottom: var(--space-2); }
.home-tarjeta h3 { font-size: 1.3rem; margin-bottom: .3em; }
.home-tarjeta p { color: var(--color-ink-soft); font-size: .95rem; }
.home-tarjeta .mas { display: inline-block; margin-top: var(--space-2); font-weight: 700; color: var(--color-primary-dark); }

.home-llamada { background: var(--color-primary); color: #fff; text-align: center; border-radius: 36px; padding: var(--space-6) var(--space-3); position: relative; overflow: hidden; }
.home-llamada .home-burbuja { background: #fff; opacity: .12; }
.home-llamada h2 { color: #fff; position: relative; }
.home-llamada p { font-size: 1.12rem; max-width: 46ch; margin: 0 auto var(--space-4); position: relative; }
.home-llamada .home-acciones { justify-content: center; position: relative; margin-top: 0; }
.home-llamada .btn--primary { background: #fff; color: var(--color-primary-dark); box-shadow: none; }
.home-llamada .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }

@media (max-width: 60rem) {
  .home-portada .home-ancho, .home-nombre, .home-videos { grid-template-columns: 1fr; }
  .home-razones, .home-tarjetas { grid-template-columns: 1fr 1fr; }
  .home-juego { position: static; }
}
@media (max-width: 36rem) {
  .home-razones, .home-tarjetas { grid-template-columns: 1fr; }
  .home-portada { padding: var(--space-5) 0 7rem; }
  .home-seccion { padding: var(--space-5) 0; }
}

/* Nana de la portada: botón grande, letra que aparece al sonar y las demás nanas para elegir */
.home-nana { padding: 0 0 var(--space-5); margin-top: -2rem; position: relative; }
.home-nana-caja { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: center; background: #fff; border: var(--border-w) solid var(--color-border); border-radius: 32px; padding: var(--space-4); box-shadow: var(--shadow-soft); max-width: 60rem; }
.home-nana-play { width: 6rem; height: 6rem; border-radius: 50%; border: 0; background: var(--color-primary); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(49, 176, 236, .4); transition: transform .2s, background .2s; position: relative; }
.home-nana-play:hover { transform: scale(1.06); background: var(--color-primary-dark); }
.home-nana-play svg { width: 2.6rem; height: 2.6rem; fill: currentColor; }
.home-nana-play .ico-pausa { display: none; }
.home-nana-play[data-estado="sonando"] .ico-play { display: none; }
.home-nana-play[data-estado="sonando"] .ico-pausa { display: block; }
.home-nana-play::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--color-primary); opacity: 0; }
.is-sonando .home-nana-play::after { animation: home-nana-onda 1.6s ease-out infinite; }
@keyframes home-nana-onda { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .is-sonando .home-nana-play::after { animation: none; } }
.home-nana-texto .ante { font-family: var(--font-heading); font-weight: 600; color: var(--color-primary); font-size: 1.1rem; }
.home-nana-titulo { margin: 0 0 var(--space-2); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.home-nana-elige { display: flex; flex-wrap: wrap; gap: .5rem; }
.home-nana-chip { border: 1.5px solid #C8EAF9; background: #fff; color: var(--color-primary-dark); border-radius: 999px; padding: .35em .9em; font: 700 .9rem var(--font-body); cursor: pointer; transition: background .2s; }
.home-nana-chip:hover { background: var(--color-bg-alt); }
.home-nana-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.home-nana-letras { grid-column: 1 / -1; display: none; }
.is-sonando .home-nana-letras { display: block; }
.home-nana-letra { display: none; columns: 2; column-gap: var(--space-4); background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-3); color: var(--color-heading); font-family: var(--font-heading); font-size: 1.1rem; }
.home-nana-letra.is-active { display: block; }
.home-nana-letra p { margin: 0 0 .2em; break-inside: avoid; }
@media (max-width: 36rem) {
  .home-nana-caja { grid-template-columns: 1fr; text-align: center; padding: var(--space-3); }
  .home-nana-play { margin: 0 auto; }
  .home-nana-elige { justify-content: center; }
  .home-nana-letra { columns: 1; }
}