/* Virgen de Medjugorje · Para niños
   Hoja propia de /ninos, /ninos/cuento, /ninos/juegos y /ninos/mensaje. Se enlaza después de sitio.css.
   Solo tokens de sitio.css y clases con el prefijo .ninos-. No redefine componentes compartidos.
   Dentro de la sección mandan los dibujos a color, la letra es más grande y los enlaces principales
   tienen forma de piedra de río. Movimiento solo cuando el niño toca algo. */

/* ==========================================================================
   Comunes
   ========================================================================== */

.ninos-h2 {
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
}
.ninos-ayuda { max-width: 40rem; margin: 0 0 var(--e-5); font-size: 1.25rem; line-height: 1.55; color: var(--tinta-2); }
.ninos-cabecera .bajada { font-size: 1.375rem; }

/* Íconos de línea y mancha: los colores salen de los tokens, así siguen el día y la noche */
.ninos-ico { fill: none; stroke: var(--tinta-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ninos-ico .m-blanco { fill: var(--superficie); }
.ninos-ico .m-tierra { fill: color-mix(in srgb, var(--piedra) 22%, var(--banda-piedra)); }
.ninos-ico .m-cielo { fill: var(--banda-cielo); }
.ninos-ico .m-vela { fill: color-mix(in srgb, var(--vela) 45%, var(--superficie)); }
.ninos-ico .m-lit { fill: color-mix(in srgb, var(--lit) 30%, var(--superficie)); }
.ninos-ico .m-rosa { fill: color-mix(in srgb, var(--piedra) 35%, var(--superficie)); }

/* ==========================================================================
   /ninos: portada
   ========================================================================== */

.ninos-portada { padding-block: clamp(1.5rem, 4vw, 3rem) var(--e-6); }
.ninos-portada__fila { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 980px) {
  .ninos-portada__fila { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.ninos-portada .migas { margin-bottom: var(--e-5); }
.ninos-portada__titulo {
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: clamp(2.75rem, 1.6rem + 4vw, 4.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.01em;
}
.ninos-portada__bajada { max-width: 30ch; margin: 0; font-size: var(--t-md); line-height: 1.5; color: var(--tinta-2); }
.ninos-portada__dibujo { margin: 0; }
.ninos-portada__dibujo img { width: 100%; height: auto; border-radius: var(--radio); background: var(--banda-cielo); }

/* Las puertas: piedras de río en vez de tarjetas */
.ninos-puertas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Cuatro puertas: dos por fila; tres (sin el mensaje explicado): las tres en una fila */
@media (min-width: 760px) {
  .ninos-puertas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ninos-puertas:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ninos-puerta a {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--e-4);
  align-items: center;
  min-height: 100%;
  padding: 1.25rem 1.75rem 1.25rem 1.25rem;
  color: var(--tinta);
  text-decoration: none;
  background: var(--superficie);
  border: 1.5px solid color-mix(in srgb, var(--piedra) 35%, var(--linea));
  border-radius: 46% 54% 50% 50% / 60% 55% 45% 40%;
  transition: transform var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
}
.ninos-puerta:nth-child(2n) a { border-radius: 55% 45% 52% 48% / 45% 60% 40% 55%; }
.ninos-puerta:nth-child(3n) a { border-radius: 50% 50% 44% 56% / 58% 42% 58% 42%; }
.ninos-puerta a:hover { border-color: var(--piedra); transform: translateY(-2px); }
.ninos-puerta a:focus-visible { outline-offset: 4px; }
.ninos-puerta .ninos-ico { width: 5.5rem; height: 5.5rem; }
.ninos-puerta__titulo { display: block; font-family: var(--f-titulo); font-size: 1.75rem; font-weight: 600; line-height: 1.05; }
.ninos-puerta__desc { display: block; margin-top: var(--e-1); font-size: 1.0625rem; line-height: 1.4; color: var(--tinta-2); }

/* ==========================================================================
   /ninos/cuento: el libro
   ========================================================================== */

.ninos-lamina { padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--linea); }
.ninos-lamina:nth-child(odd) { background: var(--banda-cielo); }
.ninos-lamina__fila { display: grid; gap: clamp(1.25rem, 3vw, 3rem); align-items: center; }
@media (min-width: 980px) {
  .ninos-lamina__fila { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.ninos-lamina__dibujo { margin: 0; }
.ninos-lamina__dibujo img { width: 100%; height: auto; border-radius: var(--radio); background: var(--superficie-2); }
.ninos-lamina__numero {
  margin: 0 0 var(--e-2);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lit);
}
.ninos-lamina__texto p:not([class]) { margin: 0 0 var(--e-4); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.45rem); line-height: 1.6; }
.ninos-pregunta {
  margin: var(--e-2) 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: 1.75rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--piedra-texto);
}
.ninos-lamina__enlace { margin: 0; }

/* Con JavaScript: una página a la vez, como un libro. ninos.js pone .ninos-libro--hojas y hidden. */
.ninos-libro--hojas .ninos-lamina { border-top: 0; background: var(--banda-cielo); }
.ninos-libro__mando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding-block: var(--e-5) var(--e-7);
}
.ninos-libro--hojas .ninos-libro__mando { margin-top: 0; }
.ninos-libro__donde { min-width: 9rem; margin: 0; text-align: center; font-size: 1.125rem; color: var(--tinta-2); }
.ninos-libro__boton { min-width: 8rem; }
.ninos-libro__boton:disabled { opacity: .45; cursor: default; }
.ninos-libro__leer svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) {
  .ninos-libro__leer { margin-left: var(--e-4); }
}
.ninos-fuentes { padding-block: 0 var(--seccion); }

/* ==========================================================================
   /ninos/juegos: colorear
   ========================================================================== */

.ninos-escoger { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-5); }
.ninos-escoger__boton {
  min-height: 2.75rem;
  padding: .5rem 1.15rem;
  border: 1.5px solid var(--borde-campo);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-size: 1.0625rem;
  cursor: pointer;
}
.ninos-escoger__boton[aria-pressed="true"] { border-color: var(--marca); background: var(--marca); color: var(--marca-tinta); }
.ninos-colorear__mesa { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 760px) {
  .ninos-colorear__mesa { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .ninos-paleta { flex-direction: column; position: sticky; top: calc(var(--alto-cabecera) + var(--e-4)); }
}
.ninos-paleta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ninos-paleta__color {
  width: 2.9rem;
  height: 2.9rem;
  border: 2px solid var(--tinta-2);
  border-radius: 50%;
  cursor: pointer;
}
.ninos-paleta__color[aria-pressed="true"] { outline: 3px solid var(--tinta); outline-offset: 3px; }
/* Los colores de la paleta son los de los dibujos del sitio; los mismos valores pinta ninos.js */
.ninos-paleta__color--1 { background: #a9cde6; }
.ninos-paleta__color--2 { background: #f3d48b; }
.ninos-paleta__color--3 { background: #e9b8a3; }
.ninos-paleta__color--4 { background: #a8583a; }
.ninos-paleta__color--5 { background: #7f9a63; }
.ninos-paleta__color--6 { background: #c9d6bb; }
.ninos-paleta__color--7 { background: #245f8f; }
.ninos-paleta__color--8 { background: #9d8bb0; }
.ninos-paleta__color--9 { background: #8a6a4f; }
.ninos-paleta__color--10 { background: #9aa4ad; }
.ninos-paleta__color--11 { background: #ffffff; }
.ninos-lienzos { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.ninos-colorear--activo .ninos-lienzos { grid-template-columns: minmax(0, 36rem); }
.ninos-lienzo { margin: 0; }
.ninos-lienzo__svg { display: block; width: 100%; height: auto; background: #ffffff; border: 1px solid var(--linea); border-radius: var(--radio); }
.ninos-colorear--activo .ninos-lienzo__svg [data-pintable] { cursor: pointer; }
.ninos-lienzo__pie { margin-top: var(--e-3); font-family: var(--f-titulo); font-size: 1.4rem; font-weight: 600; }
.ninos-colorear__borrar { margin: var(--e-5) 0 0; }

/* ==========================================================================
   /ninos/juegos: el rosario de colores
   ========================================================================== */

.ninos-rosario__fila { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 980px) {
  .ninos-rosario__fila { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.ninos-decena { display: block; width: 100%; max-width: 32rem; height: auto; margin: 0 auto; }
.ninos-decena__cordon { fill: none; stroke: color-mix(in srgb, var(--piedra) 40%, var(--linea)); stroke-width: 2; }
.ninos-decena__cuenta,
.ninos-decena__padre { fill: var(--superficie); stroke: var(--tinta-2); stroke-width: 2.5; cursor: pointer; transition: fill var(--dur) var(--curva); }
.ninos-decena__cuenta:focus-visible,
.ninos-decena__padre:focus-visible { outline: none; stroke: var(--foco); stroke-width: 5; }
.ninos-decena__padre[aria-pressed="true"] { fill: color-mix(in srgb, var(--lit) 40%, var(--superficie)); }
.ninos-decena__cuenta[aria-pressed="true"] { fill: #a9cde6; }
.ninos-decena__cuenta[aria-pressed="true"]:nth-of-type(3n) { fill: #f3d48b; }
.ninos-decena__cuenta[aria-pressed="true"]:nth-of-type(3n+1) { fill: #e9b8a3; }
.ninos-decena__num { font: 600 15px var(--f-texto); fill: var(--tinta-3); text-anchor: middle; pointer-events: none; }
.ninos-decena__cuenta[aria-pressed="true"] + .ninos-decena__num { fill: var(--tinta); }
.ninos-decena__cruz { fill: var(--superficie); stroke: var(--tinta-2); stroke-width: 2.5; stroke-linejoin: round; }
.ninos-rosario__cuenta { margin: var(--e-4) 0 0; text-align: center; font-size: 1.25rem; color: var(--tinta-2); }
.ninos-rosario__otra { margin: var(--e-4) 0 0; text-align: center; }

.ninos-oraciones { display: grid; gap: var(--e-4); }
.ninos-oracion {
  padding: var(--e-4) var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 4px solid transparent;
  border-radius: var(--radio);
  transition: border-color var(--dur) var(--curva);
}
.ninos-oracion--ahora { border-left-color: var(--lit); }
.ninos-oracion__titulo { margin: 0 0 var(--e-2); font-family: var(--f-titulo); font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.ninos-oracion p { margin: 0; font-size: 1.15rem; line-height: 1.6; }
.ninos-oraciones__fuente { margin: 0; font-size: var(--t-sm); color: var(--tinta-3); }

/* ==========================================================================
   /ninos/mensaje
   ========================================================================== */

.ninos-explicado { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (min-width: 980px) {
  .ninos-explicado { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.ninos-explicado__hoja {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.ninos-explicado__hoja p { margin: 0 0 var(--e-4); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.45rem); line-height: 1.6; }
.ninos-explicado__hoja .ninos-sello {
  display: inline-block;
  margin-bottom: var(--e-5);
  padding: .3rem .85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lit) 12%, var(--superficie));
  color: var(--lit);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
}
.ninos-explicado__hoja .ninos-explicado__nota {
  margin: var(--e-5) 0 0;
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-3);
}
.ninos-reto {
  padding: var(--e-6) var(--e-5);
  border-radius: 46% 54% 50% 50% / 30% 30% 28% 28%;
  background: var(--banda-piedra);
  border: 1.5px solid color-mix(in srgb, var(--piedra) 35%, var(--linea));
  text-align: center;
}
.ninos-reto__ico { width: 6rem; height: 6rem; margin: 0 auto var(--e-2); }
.ninos-reto__titulo { margin: 0 0 var(--e-2); font-family: var(--f-titulo); font-size: 1.85rem; font-weight: 600; line-height: 1.1; }
.ninos-reto p { margin: 0 0 var(--e-4); font-size: 1.3rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .ninos-puerta a,
  .ninos-decena__cuenta,
  .ninos-decena__padre,
  .ninos-oracion { transition: none; }
  .ninos-puerta a:hover { transform: none; }
}