/*
 * Veriko Docs — portada del portal (/es y /en).
 *
 * Hoja acotada: TODO selector de este archivo menciona la clase raíz
 * `.docs-home`, para no filtrar nada a la prosa ni al resto del portal.
 * El candado `docs-presentacion.test.ts` lo comprueba.
 *
 * Sin efectos ni transiciones de entrada (decisión del owner): lo único que
 * se mueve es el `hover` que el portal ya tiene.
 *
 * Cero hex propios. La luz del acento se compone con `color-mix()` sobre
 * `--color-primary` —el mismo recurso que ya usan `schemas.css` y
 * `sidebar.css`— y el patrón es la única excepción explicada abajo.
 */

/* ── Patrón del hero ────────────────────────────────────────────────────────
 * `polkaDots` de hero-patterns 2.1.0 (MIT, Alec Lomas), port verbatim del
 * original Hero Patterns (Steve Schoger, CC BY 4.0). Fila en
 * `landing/public/assets/MANIFEST.md`. El agente no dibuja el patrón.
 *
 * Va como `data:` URI dentro de la hoja porque la CSP del portal admite
 * `img-src 'self' data:` pero bloquea `style=""` y los `<style>` de Astro.
 * Un `data:` URI no puede leer una custom property, así que el relleno se
 * escribe con el MISMO valor que ya tiene `--color-text` en cada tema
 * (#171717 claro / #ededed oscuro): no hay ningún hex nuevo en juego.
 */
.docs-home {
  --docs-home-pattern:
    url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3Edots%3C%2Ftitle%3E%3Cg%20fill%3D%22%23171717%22%20fill-opacity%3D%220.07%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  --docs-home-glow:
    radial-gradient(
      ellipse 110% 90% at 8% -10%,
      color-mix(in srgb, var(--color-primary) 16%, transparent),
      transparent 68%
    );
}

[data-theme="dark"] .docs-home {
  --docs-home-pattern:
    url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3Edots%3C%2Ftitle%3E%3Cg%20fill%3D%22%23ededed%22%20fill-opacity%3D%220.07%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  --docs-home-glow:
    radial-gradient(
      ellipse 110% 90% at 8% -10%,
      color-mix(in srgb, var(--color-primary) 30%, transparent),
      transparent 68%
    );
}

/* ── Anchura de la portada ──────────────────────────────────────────────────
 * `.layout-main` centra el contenido en 880 px, que en una celda de ~1160 deja
 * un hueco a cada lado y corta la banda por los dos costados. La portada no es
 * prosa: es una banda y un índice, y los dos quieren el ancho de la celda. Se
 * suelta el tope aquí —el selector nombra la raíz, así que no afecta a ninguna
 * otra página— y la legibilidad se conserva acotando el CONTENIDO, no el
 * contenedor: la entradilla a anchura de prosa y la glosa de cada fila a un
 * ancho de lectura. El tope alto sólo evita que en un monitor muy ancho la
 * línea crezca sin final. */
.layout-main:has(.docs-home) {
  max-width: 1400px;
}

/* ── Hero ── */
.docs-home__hero {
  position: relative;
  isolation: isolate;
}

.docs-home__hero-inner {
  max-width: var(--content-max-width-prose);
}

.docs-home__title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  margin: 0;
}

.docs-home__lead {
  margin: var(--space-4) 0 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.docs-home__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.docs-home__cta:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}

.docs-home__cta-arrow {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ── Índice ─────────────────────────────────────────────────────────────────
 * Los grupos van EN HORIZONTAL, uno por columna, y dentro de cada fila el
 * nombre queda sobre su glosa. Antes era al revés —fila horizontal, grupos
 * apilados— y la página entera se leía como una sola tira vertical muy larga.
 * Con tres columnas el índice completo entra de una vez en la primera pantalla
 * y el ancho de la celda se aprovecha sin estirar la línea. */
.docs-home__index {
  margin-block-start: var(--space-12);
  /* Dos columnas arriba —«Empezar» y «Referencia y guías»— y «Conceptos» a
     todo lo ancho debajo. Con los tres grupos en fila, «Conceptos» (siete
     filas, tantas como los otros dos juntos) dejaba una columna al doble de
     alto que las otras; extendido abajo, el índice cierra parejo. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10);
  align-items: start;
}

/* Cada grupo es una tarjeta que FLOTA: superficie elevada y sombra neutra
   difusa, sin contorno. El contorno de 1 px se probó y se descartó —dibuja una
   caja y el grupo se lee como bloque duro, no como algo posado encima—. Sin
   sombras de color ni glass: las dos están en la lista anti-slop del brand
   book.

   La jerarquía no se repite tres veces: «Empezar» es la puerta de entrada —el
   destino del botón del hero— y se eleva un paso más sobre un lavado mínimo
   del acento; «Referencia y guías» y «Conceptos» se posan más abajo, y a
   «Conceptos» lo distingue el ancho entero. */
.docs-home__group {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
}

/* 1 · La puerta de entrada, elevada: lavado mínimo del acento y la sombra
 *     difusa. Es el destino del botón del hero. */
.docs-home__group--start {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  box-shadow: var(--shadow-md);
}

/* 2 · Referencia y guías, posada: la misma superficie, sin elevación. */
.docs-home__group--reference {
  background: var(--color-surface);
}

/* 3 · Conceptos, al ras del papel: ni superficie ni sombra. Ocupa el ancho
 *     entero y son siete filas; darle la misma caja que a las otras dos
 *     repetía el peso tres veces y devolvía la página a tres bloques iguales.
 *     Sólo pierde el relleno lateral, para que sus filetes arranquen donde
 *     arranca el título. */
.docs-home__group--concepts {
  padding-inline: 0;
}

.docs-home__group--concepts {
  grid-column: 1 / -1;
}

.docs-home__group + .docs-home__group {
  margin-block-start: 0;
}

/* «Conceptos» ocupa el ancho entero, así que su fila vuelve a la forma
   horizontal: el nombre a la izquierda y la glosa a su derecha. En dos
   columnas el orden de lectura quedaba en zigzag —la retícula llena por
   filas y la separación entre columnas invita a leer hacia abajo—, y esta
   forma no tiene esa ambigüedad ni depende de cuántos conceptos haya. */
.docs-home__group--concepts .docs-home__link {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-1) var(--space-8);
}

.docs-home__group-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  /* base.css subraya todo `h2`; aquí la línea la pone la lista. */
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0;
}

.docs-home__group-note {
  margin: var(--space-2) 0 0;
  max-width: var(--content-max-width-prose);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.docs-home__links {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}

/* El filete de dentro de la tarjeta pesa la mitad que el del papel: separa las
   filas sin volver a dibujar una caja. */
.docs-home__links > li {
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

.docs-home__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.docs-home__link:hover {
  background: var(--color-bg-hover);
}

.docs-home__link-label {
  color: var(--color-link);
  font-weight: var(--weight-medium);
}

.docs-home__link:hover .docs-home__link-label {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.docs-home__link-label--code {
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

.docs-home__link-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Dos columnas cuando tres dejarían la glosa en palabras sueltas, y una sola
 * en cuanto el shell esconde la barra lateral. */
/* En cuanto el shell esconde la barra lateral, todo a una columna. */
@media (max-width: 768px) {
  .docs-home__index,
  .docs-home__group--concepts .docs-home__link {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Banda del hero ─────────────────────────────────────────────────────────
 * Elección del owner (2026-09-09) sobre render: banda con patrón a ancho de la
 * columna de contenido, con el índice sobre el fondo liso. La banda cancela el
 * relleno de `.layout-main` con márgenes negativos del mismo tamaño; no usa
 * `100vw`, que en un shell con barra lateral desbordaría a lo ancho. */
.docs-home__hero {
  margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) 0;
  padding: var(--space-16) var(--space-8) var(--space-12);
  background-color: var(--color-bg-subtle);
  background-image: var(--docs-home-glow), var(--docs-home-pattern);
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  .docs-home__hero {
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
    padding: var(--space-10) var(--space-4) var(--space-8);
  }
}