/* =========================================================================
   TYPAGRAFICA — NOTAS.CSS (Nueva Estructura)
   ========================================================================= */

@import '_shared.css';

.edicion-header {
  margin: 2rem auto 0;
}

/* -------------------------------------------------------------------------
   CONTENEDOR PRINCIPAL Y GRID
   ------------------------------------------------------------------------- */
body {
  /* Fondo general del body, aunque el contenido tendrá el mismo o similar */
  background-color: var(--color-bg);
}

.notas-hero {
  /* No necesitamos altura aquí porque las nubes son fijas a la pantalla */
  position: relative;
}

.notas-grid {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0rem auto 8rem;
  padding: 0 var(--page-padding);
  display: flex;
  flex-direction: column;
}

.notas-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* No gap, usamos margen negativo para solapar bordes */
}

/* Clases de columnas (12 cols) */
.notas-col-12 {
  grid-column: span 12;
}

.notas-col-8 {
  grid-column: span 8;
}

.notas-col-4 {
  grid-column: span 4;
}

.notas-col-3 {
  grid-column: span 3;
}

/* Bloque con borde y margen negativo */
.bloque-borde {
  border: 1px solid var(--color-text-main);
  background-color: var(--color-bg);
  margin-top: -1px;
  margin-left: -1px;
  position: relative;
  /* Para que el contenido (mensajes, etc) se posicione */
}

/* Espaciados genéricos */
.p-4 {
  padding: 2rem;
}

.p-juego {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.relativo {
  position: relative;
}

/* -------------------------------------------------------------------------
   COLUMNA 1: CATÁLOGO
   ------------------------------------------------------------------------- */
.titulo-catalogo {
  font-family: var(--font-hero);
  font-size: 3rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text-main);
  margin-bottom: 1rem;
}

.linea-ancha {
  border: none;
  border-top: 1px solid var(--color-text-main);
  margin-bottom: 0.5rem;
}

.catalogo-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Estilos de los items del catálogo inyectados por JS */
.cat-categoria {
  font-family: var(--font-reading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-sub);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.cat-item {
  font-family: var(--font-reading);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-text-sub);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  width: fit-content;
  margin-bottom: 0.25rem;
}

.cat-item:hover {
  transform: translateX(8px);
  opacity: 0.7;
}

/* -------------------------------------------------------------------------
   COLUMNA 2: ANUNCIOS (Dos columnas CSS)
   ------------------------------------------------------------------------- */
.anuncios-contenedor {
  column-count: 2;
  column-gap: 2rem;
  column-rule: 1px solid var(--color-text-main);
}

.anuncios-bloque {
  break-inside: avoid;
  margin-bottom: 2rem;
  text-align: center;
}

.anuncios-titular {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--color-text-main);
  margin-bottom: 1rem;
}

.anuncios-parrafo {
  font-family: var(--font-reading);
  font-size: 1rem;
  color: var(--color-text-sub);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.anuncios-slogan {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-text-sub);
  margin-bottom: 0.25rem;
}

.anuncios-contacto {
  font-family: var(--font-reading);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.anuncios-divisor {
  width: 40px;
  border: none;
  border-top: 1px solid var(--color-text-muted);
  margin: 1rem auto;
}

/* -------------------------------------------------------------------------
   JUEGOS CONCEPTUALES (Fila 2)
   ------------------------------------------------------------------------- */
.juego-titulo {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 0.5rem;
  color: var(--color-text-main);
}

.juego-entradilla {
  font-family: var(--font-reading);
  font-size: 0.95rem;
  text-align: right;
  margin-bottom: 1.5rem;
  color: var(--color-text-sub);
}

/* Mensaje final de los juegos */
.juego-mensaje-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(235, 235, 235, 0.7);
  /* color-bg semitransparente */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10;
}

.juego-mensaje-overlay.completado {
  opacity: 1;
}

.juego-mensaje-box {
  border: 1px solid var(--color-text-main);
  background-color: var(--color-bg);
  padding: 1rem 1.5rem;
  font-family: var(--font-reading);
  font-size: 1rem;
  color: var(--color-text-main);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* --- 1. Sopa de letras --- */
.sopa-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
  background-color: var(--color-text-main);
  border: 1px solid var(--color-text-main);
  margin: auto;
  width: 100%;
  max-width: 100%;
  container-type: inline-size;
}

.sopa-casilla {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: clamp(0.6rem, 8cqw, 1.2rem);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.sopa-casilla:hover {
  background-color: var(--color-text-muted);
  color: var(--color-bg);
}

.sopa-casilla.selected {
  background-color: var(--color-text-main);
  color: var(--color-bg);
}

/* --- 2. Crucigrama --- */
.crucigrama-pistas {
  font-family: var(--font-reading);
  font-size: 0.875rem;
  color: var(--color-text-sub);
  margin-bottom: 1.5rem;
  /*padding-left: 1rem;*/
}

.crucigrama-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background-color: var(--color-text-main);
  border: 1px solid var(--color-text-main);
  margin: auto;
  width: 100%;
  max-width: 100%;
  container-type: inline-size;
}

.crucigrama-casilla {
  aspect-ratio: 1;
  background-color: var(--color-text-main);
  /* negra inactiva por defecto */
}

.crucigrama-casilla.activa {
  background-color: var(--color-bg);
}

.crucigrama-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(0.6rem, 15cqw, 1.25rem);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text-main);
  outline: none;
  padding: 0;
  min-width: 0;
}

/* --- 3. Siete Diferencias --- */
#juegoDiferencias {
  /* border: none;*/
  background: transparent;
}

.diferencias-img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border: 1px solid #000;
  pointer-events: none;
}

.diferencias-flicker {
  animation: flicker 0.2s ease;
}

@keyframes flicker {
  0% {
    filter: invert(0);
  }

  50% {
    filter: invert(1);
  }

  100% {
    filter: invert(0);
  }
}

/* --- 4. Sudoku --- */
.sudoku-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-text-main);
  border-left: 1px solid var(--color-text-main);
  margin: auto;
  width: 100%;
  container-type: inline-size;
}

.sudoku-casilla {
  border-right: 1px solid var(--color-text-main);
  border-bottom: 1px solid var(--color-text-main);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Separador visual de columnas (3 y 4) */
.sudoku-casilla:nth-child(6n+3) {
  border-right: 2px solid var(--color-text-main);
}

.sudoku-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(0.6rem, 12cqw, 1.25rem);
  font-weight: 500;
  color: var(--color-text-main);
  outline: none;
  padding: 0;
  min-width: 0;
}

.sudoku-casilla.prefilled .sudoku-input {
  background-color: var(--color-text-muted);
  color: var(--color-bg);
  pointer-events: none;
}


/* -------------------------------------------------------------------------
   FILA 3: FOOTER NOTAS (GARABATOS)
   ------------------------------------------------------------------------- */
.footer-notas {
  padding: 4rem 2rem;
  text-align: left;
}

.footer-notas-inner {
  /* max-width: 600px;
  margin: 0 auto;*/
}

.footer-notas-titulo {
  font-family: var(--font-reading);
  font-size: 1.5rem;
  font-weight: 700;
  /* bold */
  color: var(--color-text-main);
  margin-bottom: 0.5rem;
}

.footer-notas-sub {
  font-family: var(--font-reading);
  font-size: 1.125rem;
  font-weight: 400;
  /* regular */
  color: var(--color-text-sub);
  margin-bottom: 3rem;
}

.footer-notas-creditos {
  font-family: var(--font-reading);
  font-size: 1rem;
  color: var(--color-text-main);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {

  .notas-col-8,
  .notas-col-4,
  .notas-col-3 {
    grid-column: span 12;
  }

  .anuncios-contenedor {
    column-count: 1;
  }
}