/* ==========================================================================
   wozslop — hoja de estilos única de la portada
   Mobile-first. Sistema oscuro. Sin fuentes externas, sin build.

   Standalone a propósito: los cuatro talleres son submódulos, repos
   independientes que pueden cambiar sin avisar. Nada de @import a
   ffmpeg/style.css ni a ninguno de sus hermanos — el :root que hace falta va
   copiado acá abajo, con los mismos nombres, para que los dos lados sigan
   iguales aunque nadie los sincronice.
   ========================================================================== */

:root {
  /* --- paleta base (oscuro) --- */
  --bg: #0b0d10;
  --bg-raised: #12151a;
  --bg-inset: #0a0c0f;
  --border: #262b33;
  --border-soft: #1c2027;

  --text: #e8ebef;       /* sobre --bg: ratio ~15.8:1 */
  --text-dim: #a7aeb9;   /* sobre --bg: ratio ~7.4:1 */
  --text-faint: #7b828d; /* sobre --bg: ratio ~4.6:1, solo para texto >=18px */

  /* acentos: cian/magenta, guiño al test-pattern / datamoshing */
  --cian: #4fd9e8;       /* sobre --bg: ~10.9:1 */
  --cian-dim: #2a8b96;
  --magenta: #f26fc0;    /* sobre --bg: ~7.6:1 */
  --magenta-dim: #9c3f7e;

  --ok: #6fd88a;         /* sobre --bg: ~10.4:1 */
  --ok-bg: #10251a;
  --warn: #f2836f;       /* sobre --bg: ~7.9:1 */
  --warn-bg: #2a1512;

  /* fondos teñidos para los degradados de las tarjetas. --bg-magenta es el
     mismo #1a1220 que usa la .modulo.destacado del sheet canónico: va acá como
     token en vez de suelto en la regla, así el degradado no queda con un número
     mágico que después nadie sabe de dónde salió. Los otros dos son la versión
     cian y la magenta más profunda del hover, sobre la misma familia. */
  --bg-cian-tint: #101a1d;
  --bg-magenta: #1a1220;
  --bg-magenta-tint: #221528;

  --radius: 10px;
  --radius-sm: 6px;

  /* espaciado en escala de 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max-w: 780px;
  --transition: 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  * , *::before, *::after {
    transition-duration: 0s !important; /* respetar reduce-motion sin listar cada regla */
    animation-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   reset mínimo
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color-scheme: dark;
  /* evita overflow horizontal por elementos que ignoran box-sizing */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: break-word;
  /* NO overflow-x acá: "overflow-x" fuerza "overflow-y: auto" en el cómputo
     (quirk del spec) y convierte a body en su propio contenedor de scroll.
     Con html ya cubriendo el caso, alcanza. Misma decisión que en los cuatro
     talleres, por la misma razón. */
}

a {
  color: var(--cian);
  text-decoration-color: var(--cian-dim);
  text-underline-offset: 2px;
}
a:hover { text-decoration-color: var(--cian); }

:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  color: var(--cian);
  word-break: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 var(--sp-3);
}

strong { color: var(--text); font-weight: 700; }
em { color: var(--text-dim); }

/* --------------------------------------------------------------------------
   layout general
   -------------------------------------------------------------------------- */

header.hero,
main > section,
footer {
  padding-inline: var(--sp-4);
  max-width: var(--max-w);
  margin-inline: auto;
}

main > section { padding-block: var(--sp-7) 0; }
main > section:last-child { padding-bottom: var(--sp-7); }

footer {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-7);
  color: var(--text-dim);
  font-size: 0.9em;
}
footer .fine { color: var(--text-faint); font-size: 0.95em; }

p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.3em; }
li { margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   h2 con número de sección
   -------------------------------------------------------------------------- */

h2 {
  font-size: 1.6rem;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}

h2 .num {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--bg);
  background: var(--cian);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
  flex-shrink: 0;
}

h3 { font-size: 1.25rem; margin-top: var(--sp-6); }
h4 { font-size: 1.05rem; margin-top: var(--sp-5); color: var(--text-dim); }

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */

header.hero {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-6);
}

.kicker {
  font-family: var(--font-mono);
  color: var(--magenta);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  margin: 0 0 var(--sp-3);
}

h1 {
  font-size: clamp(1.8rem, 7vw, 3rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  /* único guiño de datamoshing: split cromático sutil, solo en el h1 */
  text-shadow: 1px 0 var(--cian-dim), -1px 0 var(--magenta-dim);
}

.lead {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 34em;
}
.lead strong { color: var(--cian); }

dl.meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
dl.meta > div { display: flex; flex-direction: column; gap: 2px; }
dl.meta dt {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
dl.meta dd { margin: 0; color: var(--text); }

/* --------------------------------------------------------------------------
   .talleres — la grilla de los cuatro talleres, el centro de la página

   auto-fit + minmax hacen todo el trabajo responsive sin un solo media query:
   cuando el contenedor no da para dos pistas de 260px, la grilla colapsa a
   una columna sola. A 390px de viewport quedan 358px útiles, o sea una
   columna; a partir de ~560px entran dos.
   -------------------------------------------------------------------------- */

.talleres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
  padding: 0;
  list-style: none;
}

.taller {
  position: relative; /* ancla del stretched-link de abajo */
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  margin: 0;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

/* La tarjeta entera es clickeable con el patrón stretched-link: un ::after
   del <a> del título que cubre toda la tarjeta. Se hace así y no envolviendo
   la tarjeta en un <a> porque la tarjeta de CDP lleva un segundo enlace
   adentro, y anidar <a> dentro de <a> es markup inválido. */
.taller-tapa {
  color: var(--text);
  text-decoration: none;
}
.taller-tapa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.taller:hover {
  border-color: var(--cian-dim);
  background: linear-gradient(160deg, var(--bg-raised), var(--bg-cian-tint));
  transform: translateY(-2px);
}
.taller:hover .taller-tapa { color: var(--cian); }

/* El foco se dibuja alrededor de la tarjeta completa, no del renglón del
   título: el área clickeable es la tarjeta, así que el anillo tiene que
   coincidir con ella. Si el navegador no soporta :has, el <a> se queda con
   el :focus-visible global de más arriba y el foco sigue siendo visible. */
.taller:has(.taller-tapa:focus-visible) {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
  border-color: var(--cian-dim);
}
.taller:has(.taller-tapa:focus-visible) .taller-tapa { outline: none; }

.taller-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
}

/* mismo badge mono cian que el "01" de los h2, reusado para numerar la trilogía */
.taller-num {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--bg);
  background: var(--cian);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
  flex-shrink: 0;
}

.taller-slug {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.taller h3 {
  margin: var(--sp-1) 0 0;
  font-size: 1.2rem;
}

.taller-material {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 0;
}

.taller-hook {
  margin: var(--sp-2) 0 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.taller-hook strong { color: var(--text); }

/* el tiempo va abajo, alineado al pie de la tarjeta, así las cuatro cierran igual */
.taller-tiempo {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--cian);
  margin: auto 0 0;
  padding-top: var(--sp-3);
}

/* enlace secundario (la parte 2 de CDP): tiene que quedar ARRIBA del
   ::after que cubre la tarjeta, si no el stretched-link se lo come */
.taller-extra {
  position: relative;
  z-index: 1;
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* la tarjeta de CDP: no es parte de la trilogía, se marca en magenta */
.taller.aparte {
  border-color: var(--magenta-dim);
  background: linear-gradient(160deg, var(--bg-raised), var(--bg-magenta));
}
.taller.aparte:hover {
  border-color: var(--magenta);
  background: linear-gradient(160deg, var(--bg-raised), var(--bg-magenta-tint));
}
.taller.aparte:hover .taller-tapa { color: var(--magenta); }
.taller.aparte .taller-num {
  background: var(--magenta);
  color: var(--bg);
}
.taller.aparte .taller-tiempo { color: var(--magenta); }
.taller.aparte:has(.taller-tapa:focus-visible) { border-color: var(--magenta); }

/* --------------------------------------------------------------------------
   .nota — asides
   -------------------------------------------------------------------------- */

.nota {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cian-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  color: var(--text-dim);
}
.nota p:last-child { margin-bottom: 0; }
.nota strong { color: var(--text); }

/* --------------------------------------------------------------------------
   listas con marcado propio, igual que las .razones de los talleres
   -------------------------------------------------------------------------- */

ul.razones {
  list-style: none;
  padding-left: 0;
}
ul.razones > li {
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--bg-inset);
  border-left: 3px solid var(--cian-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --------------------------------------------------------------------------
   #cv — sección todavía vacía. Borde punteado, misma convención que los
   bloques .cmd.salida de los talleres: si está punteado, no está terminado.
   -------------------------------------------------------------------------- */

.pendiente {
  padding: var(--sp-5);
  background: var(--bg-inset);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
}
.pendiente p:last-child { margin-bottom: 0; }

/* ==========================================================================
   breakpoint — uno solo. La grilla de talleres se arregla sola con auto-fit,
   así que lo único que falta arriba de ~700px es aire y una tipografía de
   titular más grande.
   ========================================================================== */

@media (min-width: 700px) {
  header.hero, main > section, footer { padding-inline: var(--sp-5); }
  dl.meta { grid-template-columns: 1fr 1fr; }
  h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
  .lead { font-size: 1.25rem; }
}