/* ═══════════════════════════════════════════════════════════════
   Sistema de bambino.sopadeletras.art

   Revisado contra el playbook 14 (clichés de IA). Lo que NO hay,
   a propósito:
   · barra translúcida con blur
   · hero centrado simétrico de píldora + título + dos botones
   · rejilla de tres tarjetas iguales
   · degradados, blobs, iconos de línea genéricos, emoji de sección
   · un solo radio y una sola sombra repetidos catorce veces
   · animación de entrada en todo

   Lo que sí: los bloques pesan distinto según lo que dicen, hay tres
   familias con trabajos separados, y el papel y las tintas son los de
   una risográfica, no una paleta de pantalla.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* papel
     Blanco de verdad. Una riso se imprime sobre papel blanco sin estucar y
     el color lo pone la tinta, no el fondo. El beige tibio de plantilla,
     además de gastado, hacía que cada canvas se viera como un rectángulo
     blanco flotando encima. Los grises de esta hoja no son cremas: son la
     tinta negra rebajada, que es lo único que una riso sabe hacer. */
  --papel:      #FFFFFF;
  --papel-2:    #F0F0F2;   /* negro al 6% */
  --blanco:     #FFFFFF;

  /* tintas riso: son tambores que existen, no colores inventados */
  --t-amarillo: #FFE800;
  --t-naranja:  #FF6C2F;
  --t-rosa:     #FF48B0;
  --t-rojo:     #FF665E;
  --t-verde:    #00A95C;
  --t-verdef:   #44D62C;
  --t-azul:     #0078BF;
  --t-federal:  #3D5588;
  --t-aqua:     #00838A;
  --t-violeta:  #765BA7;

  --tinta:      #111113;   /* negro al 93%: el tambor nunca deposita el 100% */
  --apagado:    #6A6A72;   /* negro al 58% */
  --linea:      #D6D6DC;   /* negro al 16% */

  /* dos radios y dos sombras, con trabajos distintos */
  --r-chico: 4px;
  --r-caja: 14px;
  --s-plana: 0 1px 0 var(--linea);
  --s-alzada: 0 2px 0 var(--tinta);

  --e1:4px; --e2:8px; --e3:12px; --e4:16px;
  --e5:24px; --e6:36px; --e7:56px; --e8:88px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Cabinet Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.52;
  -webkit-font-smoothing: antialiased;
}

.marco { max-width: 1120px; margin: 0 auto; padding: 0 var(--e5); }
.medio { max-width: 720px; }

/* ── tipografía: tres familias con trabajos separados ──
   Tanker rotula, Cabinet argumenta, Gambarino cita. */

.rotulo {
  font-family: "Tanker", "Cabinet Grotesk", sans-serif;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: .92;
}
.cita {
  font-family: "Gambarino", Georgia, serif;
  font-weight: 400;
  line-height: 1.24;
}
.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: .04em;
}

h1.titular { font-size: clamp(46px, 9vw, 104px); margin: 0 0 var(--e4); }
h2.seccion { font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 var(--e3); font-weight: 800; letter-spacing: -.025em; }
h3 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 var(--e2); }

p { margin: 0 0 var(--e4); }
p.entrada { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.42; }
.apoyo { color: var(--apagado); font-size: 15.5px; }
.mini { color: var(--apagado); font-size: 13.5px; }

a { color: var(--tinta); text-decoration-color: var(--t-naranja); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--t-naranja); }

/* ── etiqueta de sección: hereda del mundo de las calcomanías ── */
.sello {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  border: 1.5px solid currentColor;
}

/* ── ritmo: los bloques NO respiran igual ──
   El peso lo da lo que dice el bloque, no una regla uniforme. */
.bloque      { padding: var(--e7) 0; border-top: 1.5px solid var(--tinta); }
.bloque-leve { padding: var(--e6) 0; border-top: 1px solid var(--linea); }
.bloque-hondo{ padding: var(--e8) 0; border-top: 3px solid var(--tinta); }

/* ── índice del hub ── */
.indice { display: grid; gap: var(--e1); }
.fila {
  display: grid; grid-template-columns: 2.2fr 3fr auto;
  gap: var(--e4); align-items: baseline;
  padding: var(--e3) 0; border-bottom: 1px solid var(--linea);
  text-decoration: none;
}
.fila:hover { background: var(--papel-2); }
.fila .que { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.fila .dice { color: var(--apagado); font-size: 15px; }
.fila .cuanto { color: var(--apagado); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 680px) {
  .fila { grid-template-columns: 1fr auto; }
  .fila .dice { grid-column: 1 / -1; }
}

/* ── lienzos ── */
.lienzo {
  border: 2px solid var(--tinta);
  border-radius: var(--r-caja);
  overflow: hidden;
  background: var(--blanco);
  position: relative;
}
.lienzo canvas { display: block; width: 100%; height: auto; }

/* ── controles ── */
.mandos { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin: var(--e4) 0; }
.juego { display: flex; flex-wrap: wrap; gap: 2px; border: 1.5px solid var(--tinta); border-radius: 999px; padding: 3px; background: var(--blanco); }
.juego button {
  border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700;
  padding: 8px 15px; border-radius: 999px; cursor: pointer; color: var(--apagado);
  white-space: nowrap;
}
.juego button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.tecla {
  border: 1.5px solid var(--tinta); background: var(--tinta); color: var(--papel);
  font: inherit; font-size: 14px; font-weight: 800; padding: 9px 17px;
  border-radius: 999px; cursor: pointer;
}
.tecla.hueca { background: var(--blanco); color: var(--tinta); }
.tecla:active { transform: translateY(1px); }

select, input[type="text"], input[type="search"] {
  font: inherit; font-size: 14.5px; padding: 8px 12px;
  border: 1.5px solid var(--tinta); border-radius: 999px; background: var(--blanco); color: var(--tinta);
}
input[type="range"] { accent-color: var(--t-naranja); }

/* ── tabla de datos ── */
table.datos { width: 100%; border-collapse: collapse; font-size: 15px; }
table.datos th {
  text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--apagado); padding: 0 var(--e3) var(--e2) 0; font-weight: 800;
}
table.datos td { padding: 9px var(--e3) 9px 0; border-top: 1px solid var(--linea); vertical-align: top; }
table.datos tr:hover td { background: var(--papel-2); }

/* ── barra de conteo ── */
.barra-dato { display: grid; grid-template-columns: 1fr 3fr auto; gap: var(--e3); align-items: center; padding: 5px 0; }
.barra-dato .riel { height: 16px; background: var(--papel-2); border-radius: 2px; overflow: hidden; }
.barra-dato .riel span { display: block; height: 100%; background: var(--t-verde); }
.barra-dato .num { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; }

footer.pie {
  border-top: 1.5px solid var(--tinta);
  padding: var(--e5) 0 var(--e7);
  display: flex; flex-wrap: wrap; gap: var(--e4); justify-content: space-between;
  font-size: 13.5px; color: var(--apagado);
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .marco { padding: 0 var(--e4); }
  .bloque, .bloque-hondo { padding: var(--e6) 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }