/* inicio.css — la portada de `/`: el cerebro de bronce en el centro y doce cuadros alrededor
 * (P10, 2026-09-28). Spec: docs/noche-2026-09-27/P10-spec-plan.md, § Estetica.
 *
 * Este fichero NO declara tokens: `tokens.css` es su unico origen, y lo comprueba
 * `tests/web/test_inicio_css.py`. Un token sin respaldo no da error, invalida la declaracion
 * entera, y el cuadro se queda sin fondo, sin borde o sin tamano sin que nada lo diga. Por eso
 * aqui no hay ni un hex, ni un color con nombre, ni un `rgb()`.
 *
 * TODO lo que hay aqui cuelga de `#seccion-inicio`, el `id` que pone el marcado. Ni un selector
 * suelto: `/` es a la vez la portada, el chat, la cartera, los escenarios, la biblioteca y la
 * cuenta, y un `h1` global en esta hoja cambiaria el titulo de las cuatrocientas notas de la
 * biblioteca, que usan las mismas clases de prosa. Lo que esta fuera de esa seccion no existe
 * para esta hoja.
 *
 * La piel es la de siempre, la misma que `calc/catalogo.css`: en tema oscuro la elevacion NO es
 * una sombra (un negro sobre negro no se ve), es mas luz de superficie, mas un filete encendido y
 * dos pixeles hacia arriba. Nada de esto inventa un color: lo toma de ahi.
 */

/* ——— la pagina ———
   Contenida y centrada. El hueco que deja la barra fija de abajo al final de `main` lo reserva
   `estilo.css`, y esta hoja no lo duplica. */
#seccion-inicio {
  max-width: 1180px;
  margin-inline: auto;
  padding: var(--ds-seccion) var(--ds-esp-5);
  color: var(--hueso);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
}

/* ——— la cabecera ———
   El titulo es de portada, pero contenido: `--ds-titulo-1` con la caja de lectura acotada, para
   que la linea no se estire de lado a lado en un monitor de 34" y para que no le robe altura al
   anillo, que es lo que tiene que mandar en la pantalla. */
#seccion-inicio .inicio-cab {
  max-width: 760px;
  margin: 0 auto var(--ds-esp-7);
  text-align: center;
}

/* El rotulo: micro-texto en versales espaciadas, el mismo aire que el rotulo del catalogo. */
#seccion-inicio .inicio-antetitulo {
  margin: 0 0 var(--ds-esp-3);
  color: var(--hueso-3);
  font: 600 var(--ds-rotulo)/1 var(--condensada);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}

#seccion-inicio .inicio-titulo {
  margin: 0 0 var(--ds-esp-3);
  color: var(--hueso);
  font: 600 var(--ds-titulo-1)/var(--ds-linea-titulo) var(--condensada);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

#seccion-inicio .inicio-entrada {
  margin: 0;
  color: var(--hueso-2);
  font: 400 var(--ds-cuerpo-grande)/var(--ds-linea-cuerpo) var(--prosa);
}

/* ——— el anillo ———
   Un 4x4 de celdas iguales con UN hueco central de 2x2. La pieza ocupa ese hueco y los doce
   cuadros se colocan solos en el perimetro, por orden de marcado.
   `grid-auto-flow: row dense` es lo que hace que eso funcione: la pieza es un item COLOCADO, y con
   el relleno automatico normal (sparse) el sexto cuadro no busca el hueco libre de la fila 2 —baja
   a la fila 4 y el anillo se descuadra entero, en silencio y sin error de consola. Con `dense` cada
   cuadro se planta en la primera celda libre a partir del cursor. */
#seccion-inicio .inicio-anillo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    ". . . ."
    ". centro centro ."
    ". centro centro ."
    ". . . .";
  /* Cuatro filas iguales: sin esto las dos del centro crecen con la imagen y estiran los cuadros
     laterales. La imagen va en absoluto (abajo) para no imponer altura. */
  grid-template-rows: repeat(4, minmax(10rem, 1fr));
  grid-auto-flow: row dense;
  gap: var(--ds-esp-4);
  margin: 0;
}

/* ——— la pieza ———
   El hueco de 2x2 es suyo. La imagen se dibuja con `object-fit: contain` para que llene el hueco
   sin salirse, y lleva detras el pozo de luz de `#cerebro-marco` de `estilo.css`: el mismo
   lenguaje que el chat, con `--pozo` y nada de halo de color, que en nogal sobre nogal solo
   recortaria. Cero derrame horizontal, por el mismo motivo que alli: el pseudo-elemento se
   desborda por los lados y a 390 px ensancha el documento. */
#seccion-inicio .inicio-pieza {
  grid-area: centro;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

#seccion-inicio .inicio-pieza::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -10% 0;
  background: radial-gradient(ellipse at 50% 44%, var(--pozo), transparent 68%);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity var(--ds-t-media) var(--ds-curva);
}

/* Mientras hay un cuadro apuntado el halo sube un punto de brillo: es la respuesta del cerebro a
   que lo miren, y se apaga al salir (app.js quita `data-mirando`). */
#seccion-inicio .inicio-anillo[data-mirando] .inicio-pieza::before {
  opacity: 1;
}

#seccion-inicio .inicio-pieza img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* «El cerebro mira»: app.js escribe `--mira-x`/`--mira-y` en [-1, 1] al apuntar un cuadro (spec
     P10, § Comportamiento 9). El respaldo `, 0` es lo que mantiene la declaracion viva en reposo:
     un `var(--mira-x)` sin respaldo invalidaria la transformacion entera en cuanto el puntero no
     estuviera encima de nada. La profundidad de 900px es la del `#cerebro` del chat: sin ella la
     inclinacion se lee como una diapositiva, no como un giro. */
  transform: perspective(900px) rotateY(calc(var(--mira-x, 0) * 10deg)) rotateX(calc(var(--mira-y, 0) * -10deg));
  transition: transform var(--ds-t-lenta) var(--ds-curva);
}

/* ——— los cuadros ———
   La misma carta que `.catalogo-tarjeta` de `calc/catalogo.css`: superficie 1, filete, radio
   grande, brillo en el canto y el aire de `--ds-esp-5`. Es lo que hace que la portada y el indice
   de /herramientas/ sean el mismo sitio y no dos. */
#seccion-inicio .inicio-cuadro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "icono  icono"
    "nombre nombre"
    "desc   flecha";
  align-content: start;
  gap: var(--ds-esp-2) var(--ds-esp-3);
  padding: var(--ds-esp-5);
  background: var(--ds-superficie-1);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-l);
  box-shadow: var(--ds-brillo-superior);
  color: var(--hueso);
  text-decoration: none;
  /* La entrada escalonada: los doce suben y aparecen uno detras de otro, en el orden en que los
     lee el teclado. `--i` es el indice que el marcado pone en cada cuadro (`style="--i:0"`), y el
     respaldo `, 0` deja la entrada en marcha si un cuadro se olvidara del atributo. */
  animation: inicio-entra var(--ds-t-lenta) var(--ds-curva) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: background var(--ds-t-media) var(--ds-curva),
              border-color var(--ds-t-media) var(--ds-curva),
              transform var(--ds-t-media) var(--ds-curva);
}

@keyframes inicio-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Al apuntarlo: mas luz, borde encendido y el alzado de `--ds-alzado`, en los dos estados. Nada
   de sombra. */
#seccion-inicio .inicio-cuadro:hover,
#seccion-inicio .inicio-cuadro:focus-visible {
  background: var(--ds-superficie-2);
  border-color: var(--ds-borde-activo);
  transform: translateY(var(--ds-alzado));
}

#seccion-inicio .inicio-cuadro:hover .inicio-flecha,
#seccion-inicio .inicio-cuadro:focus-visible .inicio-flecha {
  color: var(--catodo);
  transform: translateX(var(--ds-esp-1));
}

/* ——— dentro del cuadro ——— */

/* La baldosa del icono: 40px, cuadrada, con el filete y en el oro de la moneda de marca. */
#seccion-inicio .inicio-icono {
  grid-area: icono;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--ds-superficie-3);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-s);
  color: var(--oro);
}

#seccion-inicio .inicio-icono svg {
  width: 20px;
  height: 20px;
  display: block;
}

#seccion-inicio .inicio-nombre {
  grid-area: nombre;
  color: var(--hueso);
  font: 500 var(--ds-titulo-3)/var(--ds-linea-titulo) var(--condensada);
  letter-spacing: var(--tracking-texto);
  text-wrap: balance;
}

#seccion-inicio .inicio-desc {
  grid-area: desc;
  color: var(--hueso-2);
  font: 400 var(--ds-pie)/var(--ds-linea-cuerpo) var(--prosa);
  text-wrap: pretty;
}

/* La flecha, abajo a la derecha, en el hueco que le deja la rejilla. */
#seccion-inicio .inicio-flecha {
  grid-area: flecha;
  align-self: end;
  justify-self: end;
  color: var(--hueso-3);
  font: 400 var(--ds-cuerpo)/1 var(--condensada);
  transition: color var(--ds-t-media) var(--ds-curva),
              transform var(--ds-t-media) var(--ds-curva);
}

/* El buzon es un `<button>` con la misma piel que los `<a>`: sin `font: inherit` sale con la
   tipografia del sistema y es el unico cuadro que no parece de esta pagina. */
#seccion-inicio button.inicio-cuadro {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

/* ——— el foco ———
   `:focus-visible` y no `:focus`: con `outline: none` + `:focus` el contorno tambien aparece al
   pinchar con el raton, y en una rejilla de doce cuadros eso es un recuadro fantasma en la carta
   que el visitante acaba de tocar. Aqui el foco sale con el teclado, que es la primera forma de
   recorrer la portada. */
#seccion-inicio .inicio-cuadro:focus-visible {
  outline: 2px solid var(--catodo);
  outline-offset: 3px;
}

/* ——— la valvula del movimiento ———
   Reduce el movimiento, no el contenido: el cuadro sigue encendiendo al apuntarlo, lo que se
   apaga es el travel. Sin este bloque, quien ha pedido que el sitio no se mueve ve doce cuadros
   que saltan dos pixeles en cada paso del raton, el cerebro inclinandose y la flecha corriendose,
   y eso no es decoracion para quien no lo ha pedido. */
@media (prefers-reduced-motion: reduce) {
  #seccion-inicio *,
  #seccion-inicio *::before,
  #seccion-inicio *::after {
    transition: none !important;
    animation: none !important;
  }
  #seccion-inicio .inicio-pieza img {
    transform: none;
  }
  #seccion-inicio .inicio-cuadro {
    transform: none;
  }
}

/* ——— 600 a 1199: la pieza arriba y tres columnas ———
   Por debajo de 1200 el 4x4 con el hueco central se descuadra (las celdas quedan de 170px utiles
   y un nombre de tres palabras ya no cabe), asi que la pieza sale del centro y se abre a todo el
   ancho con una altura contenida, y los cuadros pasan a tres columnas: cuatro filas de tres, que
   es lo que cabe sin partir la descripcion en un palmo de palabras. */
@media (max-width: 1199px) {
  #seccion-inicio .inicio-anillo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas: none;
  }
  #seccion-inicio .inicio-pieza {
    grid-area: auto;
    grid-column: 1 / -1;
    width: 320px;
    height: 320px;
    margin-inline: auto;
  }
}

/* ——— menos de 600: la pieza mas baja y dos columnas ———
   Dos columnas son 170px utiles a 390; la descripcion SE QUEDA (es lo que explica la funcion) pero
   con letra mas pequena, que es la unica forma de que quepa. La pieza baja a 240px para que los
   cuadros de la primera fila aparezcan sin hacer scroll. */
@media (max-width: 599px) {
  #seccion-inicio {
    padding: var(--ds-esp-6) var(--ds-esp-4);
  }
  #seccion-inicio .inicio-cab {
    margin-bottom: var(--ds-esp-6);
  }
  #seccion-inicio .inicio-anillo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-esp-3);
  }
  /* Se repite el `grid-area: auto` y el `grid-column` a proposito, en vez de confiar en que la
     franja de 1199 ya los puso: `grid-area: centro` de la regla base apunta a un area que aqui ya
     no existe, y esa declaracion se invalidaria SOLO al calcular valores, sin avisar. Declarar la
     salida del centro aqui lo deja dicho en las dos franjas. */
  #seccion-inicio .inicio-pieza {
    grid-area: auto;
    grid-column: 1 / -1;
    width: 240px;
    height: 240px;
  }
  #seccion-inicio .inicio-cuadro {
    padding: var(--ds-esp-4);
  }
  #seccion-inicio .inicio-desc {
    font: 400 var(--ds-rotulo)/var(--ds-linea-cuerpo) var(--prosa);
  }
}