/* ===========================================================
   KIT — recetas abiertas
   Acento propio de seccion (ambar), tomado del mismo sistema
   calido que el resto del sitio. Cero hex fuera de esa familia.

   Reglas de la casa (auditoria de diseno, 25-ago-2026):
   - Tamanos, alturas de linea, espacios y radios SOLO por token del sistema
     (colors_and_type.css). Las unicas excepciones firmadas son los clamp() de
     los titulos fluidos y las medidas de los discos/puntos decorativos; viven
     en herdr/escala_excepciones.txt y las vigila conformidad_escala.py.
   - Tres distancias entre bloques, no una: --kit-pegado (lo que explica a lo
     de arriba), --kit-seccion (un bloque nuevo), --kit-corte (cambio de tema).
   - Todo texto que va SOBRE --accent-soft usa --fg-on-soft / --fg-on-soft-muted:
     --accent-soft invierte de luminosidad entre temas y --accent-fg esta
     calibrado contra el fondo de pagina, no contra esa superficie.
   =========================================================== */

:root {
  --accent:             #A8722C;
  --accent-hover:       #8E5F22;
  --accent-press:       #744D1B;
  --accent-soft:        #7A5E2E;
  --accent-soft-border: #5C4620;
  --accent-fg:          #8E5F22;
  --fg-onaccent:        #F8F4ED;
  --fg-on-soft:         #F8F4ED;   /* sobre --accent-soft (cafe oscuro en claro) */
  --fg-on-soft-muted:   #EFE6D3;   /* secundario sobre --accent-soft: 4.7:1 */
  --accent-solid:       #8E5F22;   /* fondo de boton con texto claro: 5.0:1 (el ambar da 3.75) */
  --accent-solid-hover: #744D1B;
  --selection:          #EBDFC8;
  --grid-line: rgba(168, 114, 44, 0.12);

  --kit-pegado:  var(--space-5);   /* 24 */
  --kit-seccion: var(--space-7);   /* 48 */
  --kit-corte:   var(--space-9);   /* 96 */

  /* Medidas propias del kit, definidas UNA vez (si no, 560px y 3rem se
     repiten sueltos y el chequeo de escala no sabe que son la misma cosa). */
  --kit-demo-ancho: 560px;         /* el video del hero y su pie */
  --kit-libro:      900px;         /* el cuaderno del sandbox */
  --kit-pre-alto:   20rem;         /* alto maximo del prompt antes de hacer scroll */
  --kit-disco:      3rem;          /* disco numerado del mapa de senal */
  --kit-icono:      1.75rem;       /* el redondel del chevron */
}

[data-theme="dark"] {
  --accent:             #D9A961;
  --accent-hover:       #E5BC7E;
  --accent-press:       #C4924A;
  --accent-soft:        #C4A46A;
  --accent-soft-border: #9A7E4A;
  --accent-fg:          #E5BC7E;
  --fg-onaccent:        #12110F;
  --fg-on-soft:         #12110F;   /* oro claro en oscuro: texto oscuro encima */
  --fg-on-soft-muted:   #3A2E1C;
  --accent-solid:       #D9A961;   /* con texto oscuro: 8.8:1 */
  --accent-solid-hover: #E5BC7E;
  --selection:          #3A2E1C;
  --grid-line: rgba(217, 169, 97, 0.16);
}

/* ---------- Kickers (mono, tracking) y etiquetas de tarjeta (sans) ----------
   Un solo recurso usado once veces deja de senalar: el kicker mono en
   mayusculas queda para las SECCIONES; dentro de una tarjeta, la etiqueta es
   sans, pequena y tenue, y la promesa ("Acabas con") lleva peso propio. */
.kit-hero__kicker,
.signal-section__kicker,
.receta__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.ficha__datos dt,
.ficha__donde dt,
.sandbox-label,
.chapter__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
}

/* ---------- Una receta ---------- */

.receta { max-width: 72ch; margin: 0 auto; padding-bottom: var(--kit-corte); }
.receta__head { padding: var(--kit-corte) 0 var(--kit-seccion); }
.receta__eyebrow {
  margin: 0 0 var(--space-4);
  display: flex;
  gap: var(--space-2);
  color: var(--fg-muted);
}
.receta__eyebrow a { color: var(--accent-fg); }
.receta__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-strong);
}
.receta__lead { margin: 0; color: var(--fg-muted); font-size: var(--text-md); line-height: var(--leading-normal); }

/* Ficha tecnica */
.ficha {
  margin: 0 0 var(--kit-seccion);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.ficha__resultado { margin: 0 0 var(--space-4); color: var(--fg-strong); line-height: var(--leading-normal); }
.ficha__etiqueta {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--accent-fg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.ficha__datos { margin: 0; display: grid; gap: var(--space-4); }
.ficha__datos > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4); }
.ficha__datos dt { padding-top: var(--space-1); }
.ficha__datos dd { margin: 0; color: var(--fg); }
.ficha__lista { margin: 0; padding-left: 1.1em; }
.ficha__lista li { margin-bottom: var(--space-1); }

/* "Donde correrla": el argumento de privacidad. Sin caja dentro de la caja:
   un filete lateral y sangria bastan para destacarlo (agy). El grosor del
   filete dice el nivel: libre, cuidado, local. */
.ficha__donde {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 2px solid var(--border-strong);
}
.ficha__donde dt { color: var(--fg-strong); font-weight: var(--weight-semibold); }
.ficha__donde dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.ficha__donde--cuidado { border-left-color: var(--accent-soft-border); }
.ficha__donde--local { border-left: 3px solid var(--accent); }

/* Descargas — el producto de la seccion. Sigue arriba, pero ya no es un
   monolito marron que pesa mas que el titulo y el video juntos (agy): una
   superficie con filete de acento y filas separadas por hairline. */
.descargas {
  margin: 0 0 var(--kit-seccion);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--fg);
}
.descargas__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--fg-strong);
}
.descargas__nota { margin: 0 0 var(--space-3); color: var(--fg-muted); font-size: var(--text-sm); }
.descargas__lista { margin: 0; padding: 0; list-style: none; }
.descarga { border-top: 1px solid var(--hairline); }
.descarga__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--fg-strong);
}
.descarga__link:hover { color: var(--accent-fg); }
.descarga__link svg { flex: none; color: var(--accent-fg); }
.descarga__nombre { flex: 1 1 auto; min-width: 0; }
.descarga__peso {
  flex: none;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}

/* Pie */
.receta__pie {
  margin-top: var(--kit-corte);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
.receta__volver {
  display: inline-block;
  margin-top: var(--space-4);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

@media (max-width: 640px) {
  .ficha__datos > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .descargas { padding: var(--space-4); }
}

/* ---------- El video de una receta ---------- */
.receta__demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--kit-seccion) 0;
}
.receta__demo video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--bg-subtle);
}
/* El microcaso vive DENTRO de la prosa, no en la cabecera: cae donde el texto
   explica la trampa que la pieza corrige. Respira lo mismo que un bloque. */
.receta__demo--micro { margin: var(--kit-seccion) 0; }

/* Microcaso en dos temas: se ensena el video del tema activo (la escena se
   rendio dos veces, con cada paleta). Sin atributo manda prefers-color-scheme. */
.receta__demo--dos-temas .micro-oscuro { display: none; }
[data-theme="dark"] .receta__demo--dos-temas .micro-claro { display: none; }
[data-theme="dark"] .receta__demo--dos-temas .micro-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .receta__demo--dos-temas .micro-claro { display: none; }
  :root:not([data-theme="light"]) .receta__demo--dos-temas .micro-oscuro { display: block; }
}

/* Pies en sans: la mono es para codigo y columnas, no para tres lineas de
   prosa a 12 px (agy). Dentro de .prose gana `.prose figcaption` de blog.css
   (centrado, para el blog); aqui se le gana con la misma especificidad + 1. */
.receta__demo-cap,
.prose .receta__demo .receta__demo-cap {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  text-align: left;
  margin: 0;
}

/* ---------- Portada /kit/: direccion A, "catalogo de artefactos" ----------
   Ritmo: hero -corte- galeria -corte- como se construye. Ni mapa de senal, ni
   sandbox, ni banda de agentes: el producto se ve, no se explica (agy, 29-ago). */

.kit-landing { padding: var(--kit-seccion) 0 var(--kit-corte); }

.kit-portada { max-width: 62ch; padding-bottom: var(--kit-corte); }
.kit-portada__kicker { margin: 0 0 var(--space-4); color: var(--accent-fg); }
.kit-portada__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-strong);
}
.kit-portada__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.kit-portada__note {
  margin: 0;
  max-width: 50ch;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

/* La galeria: dos columnas; cada pieza es su ventana (video o poster) y su
   texto. Los niveles la dividen con una linea y una etiqueta corta. */
.galeria { padding-bottom: var(--kit-corte); }
.galeria__nivel {
  margin: var(--space-8) 0 var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-fg);
}
.galeria__lista + .galeria__lista,
.galeria__lista + .galeria__nivel { margin-top: var(--space-8); }
/* El kicker de la destacada no lleva la linea de arriba: abre la galeria. */
.galeria__nivel--primera { margin-top: 0; padding-top: 0; border-top: 0; }
.galeria__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-7);
}
.pieza { display: flex; flex-direction: column; gap: var(--space-4); }
.pieza__ventana {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  box-shadow: var(--shadow-md);
}
.pieza__ventana video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pieza__sin-video {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.pieza__texto { display: grid; gap: var(--space-2); }
.pieza__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-fg);
}
.pieza__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}
.pieza__title a { color: inherit; }
.pieza__title a:hover { color: var(--accent-fg); }
.pieza__que {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.pieza__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.pieza__meta > span + span::before { content: "\00B7"; margin-right: var(--space-2); color: var(--fg-faint); }
.pieza__link {
  width: fit-content;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--accent-fg);
}
.pieza__link:hover { color: var(--accent); }

/* La destacada y los grupos de una sola pieza van a lo ancho: ventana a la
   izquierda, texto a la derecha. Nada queda huerfano. */
.pieza--ancha {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
}

/* Como se construye: tres pasos en una linea. */
.como { padding: var(--kit-seccion) 0 0; border-top: 1px solid var(--border); }
.como__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  color: var(--fg-strong);
}
.como__pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.como__pasos li {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.como__pasos b {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--accent-fg);
}

@media (max-width: 900px) {
  .galeria__lista { grid-template-columns: 1fr; gap: var(--space-7); }
  .pieza--ancha { display: flex; }
  .como__pasos { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 640px) {
  .kit-landing { padding: var(--space-4) 0 var(--kit-seccion); }
  .kit-portada { padding-bottom: var(--kit-seccion); }
  .galeria { padding-bottom: var(--kit-seccion); }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}