/* =========================================================
   styles.css — Cooperativa Escolar Unión Juvenil
   Motor de estilos ÚNICO y compartido por todas las pantallas
   (inicio, /peques/, /jovenes/).

   Estilo: neobrutalismo escolar. Fondo crema, paleta del logo
   (amarillo / verde / negro) + código de color por edad
   (rojo = menores de 12, azul = 12 o más) manejado con la
   variable --color-tema, que cada pantalla redefine según su
   rama en vez de repetir el color en cada regla.
   ========================================================= */

:root {
  /* Paleta del logo */
  --crema:    #F1E4C6;
  --amarillo: #F5A623;
  --verde:    #4C8B3C;
  --negro:    #12100E;

  /* Código de color por edad */
  --rojo-peques:   #E03A2A;
  --azul-jovenes:  #2F6BE4;

  /* Color de tema activo: cada pantalla lo redefine según su
     rama (ver body[data-rama] más abajo). Todo lo que sigue el
     color de la sección usa var(--color-tema), nunca el hex
     directo. Fallback: verde (pantallas sin rama, ej. inicio). */
  --color-tema: var(--verde);

  /* Bordes, sombras y radios — look neobrutalista */
  --borde: 3px solid var(--negro);
  --radio: 10px;
  --sombra:        4px 4px 0 var(--negro);
  --sombra-hover:  6px 6px 0 var(--negro);
  --sombra-active: 2px 2px 0 var(--negro);

  --nav-alto: 72px;
  --ancho-contenedor: 1100px;

  --fuente-titulo: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-texto:  "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Color de tema por rama — única fuente de verdad para el rojo/azul */
body[data-rama="peques"]  { --color-tema: var(--rojo-peques); }
body[data-rama="jovenes"] { --color-tema: var(--azul-jovenes); }

/* ---------- Reset mínimo ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-width: 320px;
  overflow-x: hidden; /* nunca debe aparecer scroll ni corrimiento horizontal */
}

body {
  font-family: var(--fuente-texto);
  color: var(--negro);
  line-height: 1.45;
  background: var(--crema);
}

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--negro);
  outline-offset: 3px;
}

/* =========================================================
   Utilidad de contenedor centrado — nada pegado al borde
   ========================================================= */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* =========================================================
   Animación de entrada — fade-in + subida suave, escalonada
   ========================================================= */
@keyframes entrada-tarjeta {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.btn-edad,
.item-menu,
.bloque-logo,
.bloque-encabezado,
.bloque-titulo-seccion,
.bloque-placeholder,
.juego-card,
.articulo {
  animation: entrada-tarjeta .5s ease both;
}

.selector-edad .btn-edad:nth-child(1) { animation-delay: .05s; }
.selector-edad .btn-edad:nth-child(2) { animation-delay: .15s; }

.menu-secciones .item-menu:nth-child(1) { animation-delay: .05s; }
.menu-secciones .item-menu:nth-child(2) { animation-delay: .12s; }
.menu-secciones .item-menu:nth-child(3) { animation-delay: .19s; }
.menu-secciones .item-menu:nth-child(4) { animation-delay: .26s; }

.bloque-titulo-seccion { animation-delay: .05s; }
.bloque-placeholder    { animation-delay: .15s; }
.articulo              { animation-delay: .1s; }

/* =========================================================
   PANTALLA DE INICIO — index.html
   ========================================================= */
.pantalla-inicio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  padding: 2rem 1.25rem;
  gap: 2rem;
}

.bloque-logo {
  text-align: center;
}

.logo-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
}

.frase-bienvenida {
  margin-top: 1.25rem;
  font-family: var(--fuente-titulo);
  color: var(--negro);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .01em;
}

.frase-pregunta {
  margin-top: .5rem;
  color: var(--negro);
  font-weight: 700;
  font-size: 1.05rem;
}

@media (min-width: 768px) {
  .logo-img { max-width: 280px; }
  .frase-bienvenida { font-size: 1.7rem; }
  .frase-pregunta { font-size: 1.25rem; }
}

.selector-edad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .selector-edad {
    grid-template-columns: 1fr 1fr;
  }
}

.btn-edad {
  min-height: 200px;
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin: 0;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #ffffff;
  transition: transform .18s ease, box-shadow .18s ease;
}

.btn-edad[data-edad="peques"] {
  --color-tema: var(--rojo-peques);
  background: var(--color-tema);
}

.btn-edad[data-edad="jovenes"] {
  --color-tema: var(--azul-jovenes);
  background: var(--color-tema);
}

.btn-edad:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--sombra-hover);
}

.btn-edad:active {
  transform: translate(2px, 2px);
  box-shadow: var(--sombra-active);
}

/* =========================================================
   NAV FIJA — barra superior en todas las pantallas internas
   ========================================================= */
.nav-fija {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--nav-alto);
  background: var(--color-tema);
  border-bottom: var(--borde);
}

.nav-fija-contenedor {
  height: 100%;
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.nav-fija .nav-btn {
  flex-shrink: 0;
  min-height: 48px;
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--crema);
  box-shadow: var(--sombra);
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 0 1rem;
  white-space: nowrap;
  color: var(--negro);
  transition: transform .18s ease, box-shadow .18s ease;
}

.nav-fija .nav-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--sombra-hover);
}

.nav-fija .nav-btn:active {
  transform: translate(1px, 1px);
  box-shadow: var(--sombra-active);
}

.nav-fija .nav-btn:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
  box-shadow: var(--sombra);
}

.nav-info {
  flex: 1;
  min-width: 0;
}

/* Todo lo que va debajo de la nav fija necesita este padding */
.con-nav-fija {
  padding-top: var(--nav-alto);
  min-height: 100vh;
  background: var(--crema);
}

/* =========================================================
   MENÚ DE RAMA — /peques/index.html y /jovenes/index.html
   ========================================================= */
.bloque-encabezado {
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1rem;
  text-align: center;
}

.bloque-encabezado .logo-img {
  max-width: 140px;
}

.titulo-rama {
  margin-top: 1rem;
  font-size: 1.5rem;
  color: var(--verde);
}

.menu-secciones {
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .menu-secciones {
    grid-template-columns: 1fr 1fr;
  }

  /* Rama con un único acceso (ej: peques → solo "Jugar") */
  .menu-secciones.menu-secciones--unico {
    grid-template-columns: 1fr;
    max-width: 620px;
  }
}

.item-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background: var(--crema);
  padding: 1.25rem;
  text-align: center;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-tema);
  transition: transform .18s ease, box-shadow .18s ease;
}

.item-menu:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--sombra-hover);
}

.item-menu:active {
  transform: translate(2px, 2px);
  box-shadow: var(--sombra-active);
}

/* JUGAR se destaca del resto: ocupa todo el ancho y usa el
   amarillo del logo (texto negro, nunca blanco sobre amarillo). */
.item-menu[href="jugar.html"] {
  grid-column: 1 / -1;
  min-height: 170px;
  background: var(--amarillo);
  color: var(--negro);
  font-size: 1.55rem;
}

/* =========================================================
   PANTALLA DE SECCIÓN — jugar / proyectos / quienes-somos / contacto
   ========================================================= */
.bloque-titulo-seccion {
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  padding: 2.5rem 1.25rem .5rem;
  text-align: center;
}

.titulo-seccion {
  font-size: 1.75rem;
  color: var(--verde);
}

.bloque-placeholder {
  max-width: var(--ancho-contenedor);
  margin: 1rem auto 3rem;
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background: var(--crema);
  padding: 2.5rem 1.5rem;
}

.placeholder {
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--negro);
  max-width: 560px;
}

/* =========================================================
   GRILLA DE JUEGOS — tarjetas grandes con imagen + descripción,
   una por cada juego disponible en la sección Jugar de la rama.
   ========================================================= */
.juegos-grid {
  max-width: var(--ancho-contenedor);
  margin: 1rem auto 3rem;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .juegos-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

.juego-card {
  display: flex;
  flex-direction: column;
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background: #ffffff;
  overflow: hidden;
  color: var(--negro);
  transition: transform .18s ease, box-shadow .18s ease;
}

.juego-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--sombra-hover);
}

.juego-card:active {
  transform: translate(2px, 2px);
  box-shadow: var(--sombra-active);
}

.juego-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: var(--borde);
}

.juego-card-info {
  padding: 1.25rem 1.25rem 1.5rem;
}

.juego-card-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  color: var(--color-tema);
}

.juego-card-desc {
  margin-top: .5rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--negro);
}

/* =========================================================
   ARTÍCULO — texto corrido estilo nota de blog, usado en
   Quiénes Somos, Nuestros Proyectos y Contacto. Nada de
   recuadros: son párrafos y subtítulos que fluyen uno debajo
   del otro. Cuando hay foto (ej. un proyecto), va integrada
   junto al párrafo que la describe, no aparte en una grilla.
   ========================================================= */
.subtitulo-seccion {
  margin-top: .5rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--negro);
}

.articulo {
  max-width: 680px;
  margin: 1rem auto 3rem;
  padding: 0 1.25rem;
}

.articulo > * + * {
  margin-top: 1.5rem;
}

.articulo h2 {
  color: var(--color-tema);
  font-size: 1.25rem;
}

.articulo p {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.65;
  word-break: break-word;
}

.articulo p + p {
  margin-top: .9rem;
}

.articulo .pendiente {
  font-style: italic;
  opacity: .6;
}

/* Bloque con foto — la imagen va al lado del texto que describe
   (lado a lado en desktop, apilada arriba en mobile). Alterná el
   lado agregando la clase --invertido en bloques siguientes, para
   que la nota no quede toda alineada para el mismo costado. */
.articulo-bloque {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.articulo-bloque img,
.articulo-bloque video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--negro);
}

.articulo-bloque-texto h2 {
  margin-bottom: .4rem;
}

.articulo-bloque-texto .handle {
  font-weight: 700;
  font-size: .9rem;
  opacity: .6;
}

@media (min-width: 640px) {
  .articulo-bloque {
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
  }

  .articulo-bloque img,
  .articulo-bloque video {
    width: 42%;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
  }

  .articulo-bloque--invertido {
    flex-direction: row-reverse;
  }
}

/* Mini galería — para proyectos con más de una foto (ej. el
   kiosco): van todas juntas debajo del párrafo que las describe,
   no en una sección aparte. */
.articulo-galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-top: 1rem;
}

.articulo-galeria img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: var(--borde);
  border-radius: var(--radio);
}

@media (min-width: 640px) {
  .articulo-galeria {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Variante para logos/avatares (ej. Instagram): la imagen no se
   recorta, entra completa sobre fondo blanco — a diferencia de
   una foto de proyecto, que sí conviene recortar a full-bleed. */
.articulo-bloque--avatar img {
  aspect-ratio: 1 / 1;
  max-width: 140px;
  object-fit: contain;
  background: #ffffff;
  padding: .75rem;
}

@media (min-width: 640px) {
  .articulo-bloque--avatar img {
    width: 140px;
  }
}

/* Cuando el bloque entero es un link (ej. las tarjetas de
   Instagram), alguna señal sutil de que se puede tocar. */
a.articulo-bloque:hover .articulo-bloque-texto h2 {
  text-decoration: underline;
}

a.articulo-bloque:active {
  opacity: .85;
}

/* =========================================================
   UTILIDAD — ocultar elementos vía JS (la usa la trivia para
   alternar entre sus pantallas y estados sin recargar la página)
   ========================================================= */
.oculto { display: none !important; }

/* =========================================================
   TRIVIA COOPERATIVA — /jovenes/trivia.html
   Juego de preguntas de opción múltiple. No inventa estilo
   nuevo: reusa paleta, tipografías, bordes y sombras del resto
   del sitio. El verde y el rojo de "peques" se reciclan acá
   como semántica de correcto/incorrecto, en vez de sumar
   colores nuevos a la paleta.
   ========================================================= */
.pantalla-trivia {
  max-width: 680px;
  margin: 0 auto;
  /* ojo: este <main> también tiene la clase .con-nav-fija, que ya
     define su propio padding-top (altura del nav fijo). Sumamos
     el espacio extra en vez de pisarlo con un padding shorthand. */
  padding: calc(var(--nav-alto) + 1.5rem) 1.25rem 3rem;
}

.trivia-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.trivia-bloque p {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 520px;
}

/* ---------- Botones del juego (misma receta que .btn-edad/.item-menu) ---------- */
.btn-trivia-primario,
.btn-trivia-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 1.75rem;
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .18s ease;
}

.btn-trivia-primario {
  background: var(--amarillo);
  color: var(--negro);
}

.btn-trivia-secundario {
  background: var(--crema);
  color: var(--negro);
}

.btn-trivia-primario:hover,
.btn-trivia-secundario:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--sombra-hover);
}

.btn-trivia-primario:active,
.btn-trivia-secundario:active {
  transform: translate(2px, 2px);
  box-shadow: var(--sombra-active);
}

.btn-trivia-primario:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
  box-shadow: var(--sombra);
}

.trivia-botonera {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ---------- HUD: jugador / progreso / puntaje ---------- */
.trivia-hud {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

.trivia-hud-item {
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--crema);
  box-shadow: var(--sombra);
  padding: .4rem .8rem;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---------- Pregunta y opciones ---------- */
.trivia-pregunta {
  font-size: 1.25rem;
  color: var(--color-tema);
  line-height: 1.35;
}

.trivia-opciones {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}

.trivia-opcion {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 56px;
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background: #ffffff;
  padding: .85rem 1.1rem;
  text-align: left;
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--negro);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.trivia-opcion:hover:not(:disabled) {
  transform: translate(-3px, -3px);
  box-shadow: var(--sombra-hover);
}

.trivia-opcion:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: var(--sombra-active);
}

.trivia-opcion:disabled {
  cursor: default;
}

.trivia-opcion-icono {
  flex-shrink: 0;
  width: 1.2rem;
  font-size: 1.2rem;
  line-height: 1;
  visibility: hidden;
}

/* Correcta: siempre se pinta de verde con ✓, la haya elegido o no,
   para que quien erró vea igual cuál era la buena. */
.trivia-opcion.es-correcta {
  background: var(--verde);
  color: #ffffff;
  transform: none;
}

/* Incorrecta elegida: rojo con ✗. */
.trivia-opcion.es-incorrecta {
  background: var(--rojo-peques);
  color: #ffffff;
  transform: none;
}

.trivia-opcion.es-correcta .trivia-opcion-icono,
.trivia-opcion.es-incorrecta .trivia-opcion-icono {
  visibility: visible;
}

.trivia-explicacion {
  width: 100%;
  border: var(--borde);
  border-left: 8px solid var(--amarillo);
  border-radius: var(--radio);
  background: var(--crema);
  padding: .9rem 1.1rem;
  text-align: left;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.5;
}

/* ---------- Modal: pedir el nombre del jugador ---------- */
.trivia-modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(18, 16, 14, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.trivia-modal {
  width: 100%;
  max-width: 380px;
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background: var(--crema);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.trivia-modal h2 {
  font-size: 1.2rem;
  color: var(--color-tema);
}

.trivia-input-nombre {
  width: 100%;
  min-height: 52px;
  border: var(--borde);
  border-radius: var(--radio);
  padding: 0 1rem;
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: 1rem;
  color: var(--negro);
  background: #ffffff;
}

.trivia-error {
  font-weight: 700;
  font-size: .9rem;
  color: var(--rojo-peques);
}

.trivia-modal-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

/* ---------- Resultados ---------- */
.trivia-puntaje-final {
  font-size: 2.5rem;
  color: var(--color-tema);
}

.trivia-mensaje-final {
  font-weight: 700;
  font-size: 1.1rem;
}

.trivia-repaso {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.trivia-repaso-item {
  border: var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  background: #ffffff;
  padding: 1rem 1.1rem;
}

.trivia-repaso-pregunta {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .5rem;
}

.trivia-repaso-respuesta {
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.5;
}

.trivia-repaso-respuesta .mal  { color: var(--rojo-peques); }
.trivia-repaso-respuesta .bien { color: var(--verde); }

@media (min-width: 640px) {
  .trivia-pregunta { font-size: 1.4rem; }
  .btn-trivia-primario, .btn-trivia-secundario { font-size: 1.1rem; }
}

/* =========================================================
   Accesibilidad — sin movimiento para quien lo pida
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .btn-edad:hover, .btn-edad:active,
  .item-menu:hover, .item-menu:active,
  .nav-fija .nav-btn:hover, .nav-fija .nav-btn:active,
  .trivia-opcion:hover, .trivia-opcion:active,
  .btn-trivia-primario:hover, .btn-trivia-primario:active,
  .btn-trivia-secundario:hover, .btn-trivia-secundario:active {
    transform: none !important;
  }
}