/* Aprendi2 — pantalla de inicio (#inicio). Todo bajo .screen--inicio. */

.screen--inicio {
  background:
    radial-gradient(120% 80% at 50% 0%, #fffaf0 0%, rgba(255, 250, 240, 0) 60%),
    radial-gradient(90% 70% at 100% 100%, #ffe3b0 0%, rgba(255, 227, 176, 0) 70%),
    var(--bg);
}

/* El inicio baja: la primera parte (logo, tarjetas y pie) ocupa el alto de la pantalla menos una franja donde asoma
   el texto de abajo (así se nota que hay más), y debajo va la explicación de la app (.home-about). */
.screen--inicio {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.screen--inicio .home-fold {
  flex: 0 0 auto;
  height: calc(100% - var(--peek));
  min-height: 300px;
  display: flex;
  flex-direction: column;
}
.screen--inicio { --peek: clamp(30px, 6vh, 52px); }

/* ---------- Decoración de fondo ---------- */
/* Sólo detrás de la primera parte (logo y tarjetas): al bajar, no se mete en el texto de la explicación. */
.screen--inicio .home-deco { position: absolute; top: 0; left: 0; right: 0; height: calc(100% - var(--peek)); pointer-events: none; z-index: 0; overflow: hidden; }
.screen--inicio .deco { position: absolute; opacity: 0.42; animation: home-float 7s ease-in-out infinite; }
.screen--inicio .deco.d1 { width: 46px; top: 6%; left: 4%; }
.screen--inicio .deco.d2 { width: 70px; top: 14%; right: 12%; animation-delay: -1.5s; }
.screen--inicio .deco.d3 { width: 90px; bottom: -22px; left: -18px; opacity: 0.28; animation-delay: -3s; }
.screen--inicio .deco.d4 { width: 44px; bottom: 7%; right: 5%; animation-delay: -2s; }
.screen--inicio .deco.d5 { width: 34px; top: 46%; left: 1.5%; animation-delay: -4s; }
.screen--inicio .deco.d6 { width: 48px; top: 52%; right: 1.5%; animation-delay: -5s; }
.screen--inicio .deco.d7 { width: 30px; bottom: 16%; left: 42%; opacity: 0.3; animation-delay: -2.6s; }
.screen--inicio .deco.d8 { width: 110px; top: -30px; right: -26px; opacity: 0.3; animation-delay: -6s; }
@keyframes home-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(8deg); }
}

/* ---------- Encabezado: logo + sonido ---------- */
.screen--inicio .home-top {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vh, 20px) calc(var(--btn) + var(--gap) * 2) 0;
  min-height: calc(var(--btn) + var(--gap) * 2);
}
.screen--inicio .home-sound { position: absolute; top: var(--gap); right: var(--gap); }
.screen--inicio .home-logo { display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 0.8vh, 8px); min-width: 0; }
.screen--inicio .home-icon {
  width: clamp(40px, min(11vw, 11vh), 84px);
  height: clamp(40px, min(11vw, 11vh), 84px);
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 0 rgba(43, 34, 64, 0.14));
  animation: home-wobble 5s ease-in-out infinite;
}
.screen--inicio .home-logo-img {
  display: block;
  height: clamp(60px, 17vh, 150px);
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 4px 0 rgba(43, 34, 64, 0.14));
  animation: home-bob 4.5s ease-in-out infinite;
  -webkit-user-drag: none;
  user-select: none;
}
.screen--inicio .home-title {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.3em;
  font-size: clamp(22px, min(5vw, 6.2vh), 58px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.screen--inicio .home-line,
.screen--inicio .home-word { display: flex; }
.screen--inicio .home-line { column-gap: 0.3em; }
.screen--inicio .home-letter {
  display: inline-block;
  /* contorno oscuro + sombra "caramelo" para que se lea sobre el crema */
  -webkit-text-stroke: 0.045em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.07em 0 rgba(43, 34, 64, 0.22);
  animation: home-hop 2.6s ease-in-out infinite;
}
.screen--inicio .home-letter:nth-child(odd) { transform: rotate(-4deg); }
.screen--inicio .home-letter:nth-child(even) { transform: rotate(4deg); }
@keyframes home-hop {
  0%, 70%, 100% { translate: 0 0; }
  80% { translate: 0 -0.12em; }
  90% { translate: 0 0.02em; }
}
@keyframes home-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes home-wobble {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* Celulares parados (bien altos): logo apilado y más grande, así el encabezado luce y no queda aire. */
@media (max-aspect-ratio: 2 / 3) {
  .screen--inicio .home-top { padding: clamp(14px, 4vh, 40px) var(--gap) 0; }
  .screen--inicio .home-logo { align-items: center; }
  .screen--inicio .home-logo { flex-direction: column; gap: 4px; }
  .screen--inicio .home-icon { width: clamp(64px, min(22vw, 11vh), 120px); height: clamp(64px, min(22vw, 11vh), 120px); }
  .screen--inicio .home-logo-img { height: clamp(90px, min(30vw, 13vh), 180px); }
  .screen--inicio .home-title { flex-direction: column; font-size: clamp(28px, min(10vw, 4.8vh), 62px); line-height: 1.02; }
  /* el garabato rosa caería justo detrás del nombre: lo pasamos al costado izquierdo */
  .screen--inicio .deco.d2 { top: 13%; right: auto; left: 3%; width: 52px; }
}

/* ---------- Tarjetas ---------- */
.screen--inicio .home-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vmin, 24px);
  padding-top: clamp(6px, 1.4vmin, 16px);
  container-type: size;
}
.screen--inicio .home-grid {
  --g: clamp(10px, 2.4cqmin, 26px);
  /* Parada o casi cuadrada: 2 + 2 + 1 (la última al medio). Tarjetas tan grandes como entren, sin
     deformarse demasiado. Grilla de 4 columnas: cada tarjeta ocupa 2. */
  --cw: min(calc((100cqw - var(--g)) / 2), calc((100cqh - var(--g) * 2) / 3 * 1.35), 400px);
  --ch: min(calc((100cqh - var(--g) * 2) / 3), calc(var(--cw) * 1.6));
  display: grid;
  grid-template-columns: repeat(4, calc((var(--cw) - var(--g)) / 2));
  grid-template-rows: repeat(3, var(--ch));
  gap: var(--g);
}
.screen--inicio .home-cell { grid-column: span 2; }
.screen--inicio .home-cell:nth-child(5) { grid-column: 2 / span 2; }
/* Apaisada (tablet, compu): 3 + 2, en una grilla de 6 columnas. */
@container (min-aspect-ratio: 11 / 10) {
  .screen--inicio .home-grid {
    --cw: min(calc((100cqw - var(--g) * 2) / 3), calc((100cqh - var(--g)) / 2 * 1.35), 360px);
    --ch: min(calc((100cqh - var(--g)) / 2), calc(var(--cw) * 1.6));
    grid-template-columns: repeat(6, calc((var(--cw) - var(--g)) / 2));
    grid-template-rows: repeat(2, var(--ch));
  }
  .screen--inicio .home-cell:nth-child(4) { grid-column: 2 / span 2; }
  .screen--inicio .home-cell:nth-child(5) { grid-column: 4 / span 2; }
}
/* Pantallas bien apaisadas (compu ancha, celular acostado): las 5 en fila. */
@container (min-aspect-ratio: 19 / 10) {
  .screen--inicio .home-grid {
    --cw: min(calc((100cqw - var(--g) * 4) / 5), calc(100cqh * 0.95), 320px);
    --ch: min(100cqh, calc(var(--cw) * 1.42));
    grid-template-columns: repeat(5, var(--cw));
    grid-template-rows: var(--ch);
  }
  .screen--inicio .home-cell:nth-child(n) { grid-column: auto; }
}

.screen--inicio .home-cell { position: relative; min-width: 0; min-height: 0; }
/* La tarjeta es AP.ui.card (core.css): acá, su tamaño (el de la celda), el redondeo, el espacio y la letra. */
.screen--inicio .home-card {
  --card-r: clamp(20px, 3.6cqmin, 34px);
  --card-gap: 2%;
  --card-font: clamp(14px, 5.2cqmin, 22px);
  width: 100%;
  height: 100%;
}
.screen--inicio .home-card--colorear { --c1: #ffe07a; --c2: #ffb938; }
.screen--inicio .home-card--pizarra { --c1: #7fe6bd; --c2: #2bc48a; }
.screen--inicio .home-card--juegos { --c1: #a6e6ff; --c2: #45b6f2; }
.screen--inicio .home-card--subir { --c1: #c3b1ff; --c2: #8f78ff; }
.screen--inicio .home-card--obras { --c1: #ffb3cf; --c2: #ff7fa9; }

/* Pequeñas animaciones dentro de las ilustraciones */
.screen--inicio .hm-crayon { animation: home-color 2.4s ease-in-out infinite; }
.screen--inicio .hm-slider { animation: home-slide 3.2s ease-in-out infinite; }
.screen--inicio .hm-flash { animation: home-blink 1.8s ease-in-out infinite; }
.screen--inicio .hm-star { animation: home-star 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.screen--inicio .hm-ball { animation: home-bounce 1.7s ease-in-out infinite; }
@keyframes home-color {
  0%, 100% { translate: 0 0; }
  50% { translate: -5px -3px; }
}
@keyframes home-slide {
  0%, 100% { translate: 0 0; }
  50% { translate: 54px 0; }
}
@keyframes home-blink {
  0%, 60%, 100% { opacity: 0; }
  70%, 85% { opacity: 1; }
}
@keyframes home-star {
  0%, 100% { rotate: -8deg; scale: 1; }
  50% { rotate: 8deg; scale: 1.08; }
}

@keyframes home-bounce {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@keyframes home-pop {
  from { opacity: 0; transform: translateY(18px) scale(0.86); }
  to { opacity: 1; transform: none; }
}

/* Accesos a Neón y Fuegos arriba a la derecha de la tarjeta de la pizarra */
.screen--inicio .home-minis {
  position: absolute;
  top: clamp(6px, 1.4cqmin, 12px);
  right: clamp(6px, 1.4cqmin, 12px);
  z-index: 2;
  display: flex;
  gap: 6px;
  animation: home-pop 0.5s 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}
.screen--inicio .home-mini { border: 3px solid var(--ink); }
.screen--inicio .home-mini .icon { width: 74%; height: 74%; }

@media (prefers-reduced-motion: reduce) {
  .screen--inicio .deco,
  .screen--inicio .home-icon,
  .screen--inicio .home-logo-img,
  .screen--inicio .home-letter,
  .screen--inicio .hm-crayon,
  .screen--inicio .hm-slider,
  .screen--inicio .hm-star,
  .screen--inicio .hm-ball { animation: none; }
  .screen--inicio .hm-flash { animation: none; opacity: 0; }
  .screen--inicio .home-minis { animation-duration: 0.01s; }
}

/* ---------- Para los grandes: "Para familias", "Ayuda" y la ruedita (discretos) ---------- */
.screen--inicio .home-foot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 18px);
  padding: 0 var(--gap) clamp(6px, 1.6vh, 14px);
}
.screen--inicio .home-foot-btn {
  height: 46px;
  padding: 0 16px 0 7px;
  gap: 6px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 3px 0 rgba(43, 34, 64, 0.14);
}
.screen--inicio .home-foot-btn .icon { width: 34px; height: 34px; }
.screen--inicio .home-foot-btn .btn-text { font-size: 1.02rem; color: var(--ink-soft); }
/* Sin mouse (celular y tablet) van arriba: "Para familias" y "Ayuda" redondos y sin texto (el nombre queda para el
   lector de pantalla), la ruedita al lado del sonido. Al abrir la app en pantalla completa, Android muestra unos
   segundos sus botones sobre la franja de abajo y tocar ahí te saca de la app: esa franja queda libre (es donde
   asoma el texto de .home-about, que no tiene nada para tocar). Con mouse o touchpad (la compu) siguen abajo.
   Es (hover: none) y no (pointer: coarse): Chrome en Android da "fine" si el aparato tiene lápiz (S Pen). Es la
   misma pregunta que U.noMouse (ns.js), que elige la cámara de "Subir foto". */
@media (hover: none) {
  .screen--inicio .home-foot {
    position: absolute;
    z-index: 2;
    top: calc(var(--safe-t) + var(--gap) + (var(--btn) - 46px) / 2);
    left: calc(var(--safe-l) + var(--gap));
    right: calc(var(--safe-r) + var(--gap));
    gap: 8px;
    justify-content: flex-start;
    padding: 0;
    pointer-events: none; /* la fila cruza todo el ancho: que no tape el botón de sonido */
  }
  .screen--inicio .home-foot > * { pointer-events: auto; }
  .screen--inicio .home-foot-btn { width: 46px; padding: 0; justify-content: center; }
  .screen--inicio .home-foot-btn .btn-text { display: none; }
  .screen--inicio .home-foot > .home-gear { margin-left: auto; margin-right: calc(var(--btn) + 8px); }
  .screen--inicio .home-stage { margin-bottom: clamp(6px, 1.6vh, 14px); }
}

/* ---------- Explicación de la app (debajo de las tarjetas) ---------- */
.screen--inicio .home-about {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 4px clamp(16px, 4vw, 32px) calc(28px + var(--safe-b, 0px));
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}
.screen--inicio .home-about h2 {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 4.4vw, 1.9rem);
  line-height: 1.15;
  text-align: center;
}
.screen--inicio .home-about h3 { margin: 18px 0 6px; font-size: 1.2rem; line-height: 1.2; }
.screen--inicio .home-about p { margin: 0 0 10px; }
.screen--inicio .home-about ul { margin: 0 0 14px; padding-left: 1.3em; }
.screen--inicio .home-about li { margin: 5px 0; }
.screen--inicio .home-about strong { font-weight: 600; }
.screen--inicio .home-about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0 4px;
}
.screen--inicio .home-about-card {
  padding: 14px 16px 12px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 4px 0 rgba(43, 34, 64, 0.16);
}
.screen--inicio .home-about-card h3 { margin: 0 0 4px; }
.screen--inicio .home-about-card p { margin: 0; font-size: 0.98rem; }
.screen--inicio .home-about-card--mate { --c1: #e6f7ff; --c2: #bfe9ff; }
.screen--inicio .home-about-card--ingles { --c1: #fff6d6; --c2: #ffe39a; }
.screen--inicio .home-about-card--pizarra { --c1: #e2fbef; --c2: #b8f0d6; }
.screen--inicio .home-about .hm-yt { margin: 18px 0 14px; }
.screen--inicio .home-about-safe { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Ventanas "Para familias" y "Ayuda" (van en el body, no dentro de la pantalla) ---------- */
.modal-back.home-modal .modal {
  width: min(94vw, 720px);
  border: 4px solid var(--ink);
  border-radius: 30px;
}
.modal-back.home-modal .modal-body { padding: 22px 24px 26px; }
.hm-info { font-size: 1.05rem; line-height: 1.45; }
.hm-info h2 { margin: 4px 60px 10px 0; font-size: 1.6rem; line-height: 1.15; }
.hm-info h3 { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font-size: 1.2rem; line-height: 1.2; }
.hm-info h3 .icon { width: 32px; height: 32px; flex: 0 0 auto; }
.hm-info p { margin: 0 0 8px; }
.hm-info ul { margin: 0 0 8px; padding-left: 1.3em; }
.hm-info li { margin: 4px 0; }
.hm-info strong { font-weight: 600; }
.hm-info-head { display: flex; align-items: center; gap: 14px; margin-right: 60px; }
.hm-info-head h2 { margin: 0; }
.hm-info-logo { width: 66px; height: 66px; flex: 0 0 auto; }
.hm-info-site { color: var(--ink-soft); font-weight: 500; }
.hm-help-us {
  margin-top: 20px;
  padding: 12px 16px 16px;
  border: 3px dashed rgba(43, 34, 64, 0.25);
  border-radius: 22px;
  background: #fff3cc;
}
.hm-help-us h3 { margin-top: 4px; }
.hm-help-us .hm-share { margin-top: 6px; }
/* "Instalar Colorines": sólo si el navegador deja instalarla (Chrome, Edge) o es un iPhone/iPad. */
.hm-install {
  margin-top: 18px;
  padding: 12px 16px 16px;
  border: 3px solid rgba(43, 196, 138, 0.35);
  border-radius: 22px;
  background: #eafaf2;
}
.hm-install h3 { margin-top: 4px; }
.hm-install .hm-install-btn { margin-top: 6px; }
.hm-info .hm-version { margin: 14px 0 0; font-size: 0.85rem; color: var(--ink-soft); text-align: right; }
.hm-info .hm-version:empty { display: none; }
.hm-sec { margin-top: 14px; padding-top: 4px; border-top: 3px dashed rgba(43, 34, 64, 0.12); }
.hm-row { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0; }
.hm-row > .icon { width: 40px; height: 40px; flex: 0 0 auto; }
.hm-row p { margin: 7px 0 0; }
@media (max-width: 600px) {
  .modal-back.home-modal .modal-body { padding: 18px 16px 20px; }
  .hm-info { font-size: 1rem; }
  .hm-info h2 { font-size: 1.35rem; }
  .hm-info-logo { width: 52px; height: 52px; }
  .hm-row > .icon { width: 34px; height: 34px; }
  .hm-row p { margin-top: 4px; }
}

/* Ruedita de configuración (antes pregunta el año de nacimiento, como "Para familias") */
.screen--inicio .home-gear {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 3px 0 rgba(43, 34, 64, 0.14);
}
.screen--inicio .home-gear > .icon { width: 74%; height: 74%; }

/* Ventana de configuración: idioma con bandera */
.hm-info .hm-set-title { display: flex; align-items: center; gap: 10px; }
.hm-info .hm-set-title .icon { width: 42px; height: 42px; flex: 0 0 auto; }
.hm-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 14px; }
.hm-lang {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px;
  border: 3px solid rgba(43, 34, 64, 0.22);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(43, 34, 64, 0.14);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}
.hm-lang.active { border-color: var(--ink); background: #fff3cc; }
.hm-lang:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(43, 34, 64, 0.14); }
.hm-lang:focus-visible { box-shadow: 0 0 0 4px var(--blue); }
.hm-flag { width: 60px; height: 40px; flex: 0 0 auto; border-radius: 6px; box-shadow: 0 0 0 2px var(--ink); }
.hm-info .hm-note { color: var(--ink-soft); font-size: 0.95rem; }

/* Pregunta para grandes: año de nacimiento con teclado de números (antes de familias y configuración) */
.modal-back.home-modal.home-gate .modal { width: min(92vw, 380px); max-height: 96vh; }
.modal-back.home-modal.home-gate .modal-body { padding: 20px 20px 22px; }
.hm-gate { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.4vh, 18px); }
.hm-gate-q { margin: 6px 44px 0; font-size: clamp(1.2rem, 3.4vh, 1.5rem); line-height: 1.2; text-align: center; }
.hm-gate-slots { display: flex; gap: 10px; }
.hm-gate-slots.shake { animation: hm-shake 0.42s ease-in-out; }
@keyframes hm-shake {
  20%, 60% { transform: translateX(-9px); }
  40%, 80% { transform: translateX(9px); }
}
.hm-gate-slot {
  display: grid;
  place-items: center;
  width: clamp(44px, 8vh, 54px);
  height: clamp(50px, 9vh, 62px);
  border: 3px solid rgba(43, 34, 64, 0.22);
  border-radius: 14px;
  background: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
}
.hm-gate-slot.on { border-color: var(--blue); }
.hm-gate-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.6vh, 12px); width: 100%; }
.hm-gate-key {
  display: grid;
  place-items: center;
  height: clamp(46px, 9.5vh, 64px);
  border: 3px solid rgba(43, 34, 64, 0.22);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(43, 34, 64, 0.14);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}
.hm-gate-key:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(43, 34, 64, 0.14); }
.hm-gate-key:focus-visible { box-shadow: 0 0 0 4px var(--blue); }
.hm-gate-key > .icon { width: 38px; height: 38px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .hm-gate-slots.shake { animation: none; }
}
@media (max-width: 480px) { .hm-langs { grid-template-columns: 1fr; } }