/* Colorines — 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);
}

/* ---------- Decoración de fondo ---------- */
.screen--inicio .home-deco { position: absolute; inset: 0; 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; align-items: center; gap: clamp(6px, 1.4vmin, 14px); 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-title {
  margin: 0;
  display: flex;
  font-size: clamp(32px, min(9vw, 9vh), 76px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.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-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-title { font-size: clamp(40px, min(13vw, 7.5vh), 84px); }
  /* 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; }
.screen--inicio .home-card {
  --c1: #ffd76a;
  --c2: #ffb938;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2%;
  padding: 7% 6% 6%;
  border: 4px solid var(--ink);
  border-radius: clamp(20px, 3.6cqmin, 34px);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.55) 0 14%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(rgba(255, 255, 255, 0.22) 18%, transparent 20%) 0 0 / 26px 26px,
    linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 7px 0 rgba(43, 34, 64, 0.22), 0 14px 26px rgba(43, 34, 64, 0.14);
  cursor: pointer;
  outline: none;
  overflow: hidden;
  touch-action: manipulation;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  animation: home-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}
.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; }

.screen--inicio .home-card:active { transform: translateY(5px) scale(0.97); box-shadow: 0 2px 0 rgba(43, 34, 64, 0.22), 0 5px 12px rgba(43, 34, 64, 0.14); }
.screen--inicio .home-card:focus-visible { box-shadow: 0 0 0 5px var(--blue), 0 7px 0 rgba(43, 34, 64, 0.22); }
@media (hover: hover) {
  .screen--inicio .home-card:hover { transform: translateY(-4px) rotate(-1deg); }
  .screen--inicio .home-card:hover .home-art { transform: scale(1.05); }
  .screen--inicio .home-card:active { transform: translateY(5px) scale(0.97); }
}

.screen--inicio .home-art {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  transition: transform 0.25s cubic-bezier(0.2, 1.5, 0.4, 1);
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.35));
}
.screen--inicio .home-label {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0.18em 0.8em 0.22em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 0 rgba(43, 34, 64, 0.16);
  font-size: clamp(14px, 5.2cqmin, 22px);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 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-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-card,
  .screen--inicio .home-minis { animation-duration: 0.01s; }
}

/* ---------- Abajo: "Para familias" y "Ayuda" (para los grandes, 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); }

/* ---------- 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; }
.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; } }