/* ====================================================================
   ALFAMU PLAY — Brandbook
   Componentes compartidos. Blanco dominante, jerarquía de navegación
   explícita, geometría estructurada (sin cápsulas).
   Depende de tokens.css. No declarar valores literales aquí.
   ==================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:120px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--am-blanco);
  color:var(--am-texto);
  font-family:var(--am-f-texto);
  font-size:var(--am-t-cuerpo);
  /* El peso se declara SIEMPRE: la instancia por defecto de Helvena
     variable es 200 (Extralight), no 400. Sin esta línea el documento
     entero se pinta en Extralight y parece un problema de pantalla. */
  font-weight:var(--am-w-book);
  line-height:var(--am-lh-txt);
  /* Corrección de métrica heredada desde la raíz, para que alcance
     también a lo que se pinte después. Ver tokens.css §2.6. */
  word-spacing:var(--am-ws-texto);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Tipografía base -------------------------------------------------
   DISPLAY EN CAJA ALTA Y BAJA. La versal completa que había aquí no la
   aplicó nunca la web: la portada compone «Nadie nace creyendo que no
   puede.» y así se lee. La versal queda para el wordmark y la etiqueta.
   Cada paso lleva su propio interlineado y su propio tracking: Monstral
   tiene la caja 26 % más baja que Helvena y no admite el 1.6 del cuerpo. */
.d0,.d1,.d2,.d3,.d4{
  font-family:var(--am-f-display); font-weight:400;
  word-spacing:var(--am-ws-display);
  margin:0 0 var(--am-s-4); text-wrap:balance;
}
.d0{ font-size:var(--am-t-d0); line-height:var(--am-lh-d0); letter-spacing:var(--am-tr-d0); }
.d1{ font-size:var(--am-t-d1); line-height:var(--am-lh-d1); letter-spacing:var(--am-tr-d1); }
.d2{ font-size:var(--am-t-d2); line-height:var(--am-lh-d2); letter-spacing:var(--am-tr-d2); }
.d3{ font-size:var(--am-t-d3); line-height:var(--am-lh-d3); letter-spacing:var(--am-tr-d3); }
.d4{ font-size:var(--am-t-d4); line-height:var(--am-lh-d4); letter-spacing:var(--am-tr-d4); }

h1{ font-family:var(--am-f-display); font-weight:400; font-size:var(--am-t-d1); line-height:var(--am-lh-d1); letter-spacing:var(--am-tr-d1); word-spacing:var(--am-ws-display); margin:0 0 var(--am-s-4); text-wrap:balance; }
h2{ font-family:var(--am-f-display); font-weight:400; font-size:var(--am-t-d2); line-height:var(--am-lh-d2); letter-spacing:var(--am-tr-d2); word-spacing:var(--am-ws-display); margin:0 0 var(--am-s-4); text-wrap:balance; }
/* h3 y h4 son HELVENA: su interlínea no puede bajar de 1.27 —caja de
   contenido 1.270em— o las líneas se tocan. Token propio, no el de display. */
h3{ font-family:var(--am-f-texto); font-weight:var(--am-w-bold); font-size:var(--am-t-d3); line-height:var(--am-lh-h); letter-spacing:-.005em; margin:0 0 var(--am-s-3); text-wrap:balance; }
h4{ font-family:var(--am-f-texto); font-weight:var(--am-w-semi); font-size:var(--am-t-d4); line-height:var(--am-lh-h); margin:0 0 var(--am-s-2); }

p{ margin:0 0 var(--am-s-4); max-width:var(--am-max-txt); }
ul,ol{ margin:0 0 var(--am-s-4); padding-left:1.15em; max-width:var(--am-max-txt); }
li{ margin-bottom:var(--am-s-2); }
li::marker{ color:var(--am-naranja-700); }
strong{ font-weight:var(--am-w-bold); }
em{ font-style:normal; background:var(--am-lima-50); box-shadow:inset 0 -.42em 0 var(--am-lima-50); padding:0 .1em; }

a{ color:var(--am-acento-texto); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; transition:color var(--am-dur-fast) var(--am-ease); }
a:hover{ color:var(--am-tinta); text-decoration-color:var(--am-naranja); text-decoration-thickness:2px; }

.lead{ font-size:var(--am-t-lead); line-height:var(--am-lh-lead); font-weight:var(--am-w-light); color:var(--am-texto-2); max-width:var(--am-max-txt); }
/* Sobre superficie oscura la entradilla sube a 400: a 17.6 px un peso 300
   se adelgaza por el antialiasing invertido y pierde cuerpo. */
.cover .lead,.foto-head .lead{ font-weight:var(--am-w-book); }
.sec-txt{ font-size:var(--am-t-sm); line-height:var(--am-lh-txt); color:var(--am-texto-2); }
.note{ font-size:var(--am-t-xs); line-height:var(--am-lh-txt); color:var(--am-texto-3); }
.big{ font-family:var(--am-f-display); font-size:var(--am-t-d2); line-height:var(--am-lh-d2); letter-spacing:var(--am-tr-d2); word-spacing:var(--am-ws-display); }

/* Label / eyebrow — MONO, no Helvena. Es la tercera letra del sistema y
   la que la imagen de portada pone sobre el titular: «EMPRESA DE
   DESARROLLO DE JUEGOS Y PRODUCTOS DIGITALES». Un solo tamaño (11 px),
   siempre versal, siempre con tracking abierto a .14em. Nunca cápsula. */
.lbl{
  display:block;
  font-family:var(--am-f-mono);
  font-weight:var(--am-w-book);
  font-size:var(--am-t-lb);
  line-height:var(--am-lh-lb);
  letter-spacing:var(--am-tr-lb);
  text-transform:uppercase;
  word-spacing:normal;          /* la mono ya tiene el avance fijo */
  color:var(--am-texto-3);
  margin-bottom:var(--am-s-3);
}
.lbl--acento{ color:var(--am-naranja-700); }

/* Cifras — Helvena Black tabular. Los dos tamaños salen de la escala:
   el dato que sostiene un argumento en D3, la cifra de marca en D2.
   `.num--sm` es el índice de un paso o de un compromiso: la misma voz a
   menor escala, y evita el font-size a mano que traía cada capítulo. */
.num{
  display:block;
  font-family:var(--am-f-texto);
  font-weight:var(--am-w-black);
  font-size:var(--am-t-d3);
  line-height:var(--am-lh-r);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--am-tinta);
  margin-bottom:var(--am-s-3);
}
.num--sm{ font-size:var(--am-t-d4); }
.num--display{ font-family:var(--am-f-display); font-weight:400; font-size:var(--am-t-d2); letter-spacing:var(--am-tr-d2); }

/* --- Foco: doble señal, adaptado al contexto de superficie ------------ */
:focus-visible{
  outline:var(--am-focus-w) solid var(--am-i-focus);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--am-i-focus-ring);
  border-radius:var(--am-r-xs);
}

.skip{
  position:absolute; left:-9999px; top:auto; z-index:200;
  background:var(--am-tinta-900); color:var(--am-blanco);
  padding:.7em 1.2em; border-radius:var(--am-r-sm);
  font-weight:var(--am-w-semi); text-decoration:none;
}
.skip:focus{ left:var(--am-s-5); top:var(--am-s-4); }

/* ====================================================================
   NAVEGACIÓN — cuatro niveles jerárquicos
   1 · barra global (marca + capítulo actual)
   2 · índice de capítulos (numerado, indicador de acento)
   3 · sub-navegación de la página (anclas de sección)
   4 · contenido
   ==================================================================== */

/* 1 · Barra global -------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--am-blanco);
  border-bottom:var(--am-borde-1) solid var(--am-n-200);
}
.topbar__in{
  max-width:var(--am-max); margin-inline:auto; padding-inline:var(--am-margin);
  height:56px; display:flex; align-items:center; justify-content:space-between; gap:var(--am-s-5);
}
.topbar__mark{ display:flex; align-items:center; gap:var(--am-s-3); text-decoration:none; }
.topbar__mark:hover{ color:inherit; }
.topbar__meta{
  display:flex; align-items:center; gap:var(--am-s-4);
  font-family:var(--am-f-mono); font-size:var(--am-t-lb);
  letter-spacing:var(--am-tr-lb); text-transform:uppercase; color:var(--am-texto-3);
}
.topbar__meta b{ color:var(--am-tinta); font-weight:var(--am-w-bold); }
@media (max-width:560px){ .topbar__meta span{ display:none; } }

/* 2 · Índice de capítulos ------------------------------------------- */
.chapnav{
  position:sticky; top:56px; z-index:55;
  background:var(--am-blanco);
  border-bottom:var(--am-borde-1) solid var(--am-n-200);
}
.chapnav__in{
  max-width:var(--am-max); margin-inline:auto;
  padding-inline:calc(var(--am-margin) - var(--am-s-3));
  display:flex; gap:0; overflow-x:auto; scrollbar-width:none;
}
.chapnav__in::-webkit-scrollbar{ height:0; }
/* La navegación se compone en MONO y en versal, igual que en la web: es
   señalética, no lectura. El nombre del capítulo no compite con el
   titular porque no comparte familia con él. */
.chapnav a{
  flex:none;
  display:flex; align-items:baseline; gap:.5em;
  padding:var(--am-s-3) var(--am-s-3);
  border-bottom:var(--am-borde-3) solid transparent;
  border-radius:0;                       /* pestañas rectas, sin cápsula */
  font-family:var(--am-f-mono); font-size:var(--am-t-lb);
  letter-spacing:var(--am-tr-lb); text-transform:uppercase;
  color:var(--am-texto-3); text-decoration:none; white-space:nowrap;
  transition:color var(--am-dur-fast) var(--am-ease), border-color var(--am-dur-fast) var(--am-ease), background var(--am-dur-fast) var(--am-ease);
}
.chapnav a span{ font-variant-numeric:tabular-nums; font-weight:var(--am-w-bold); color:var(--am-n-500); letter-spacing:0; }
.chapnav a:hover{ color:var(--am-tinta); background:var(--am-n-50); text-decoration:none; }
.chapnav a:hover span{ color:var(--am-naranja-700); }
.chapnav a[aria-current="page"]{
  color:var(--am-tinta); font-weight:var(--am-w-bold);
  border-bottom-color:var(--am-naranja);
}
.chapnav a[aria-current="page"] span{ color:var(--am-naranja-700); }

/* 3 · Sub-navegación de página (anclas) ------------------------------ */
.subnav{
  border-bottom:var(--am-borde-1) solid var(--am-n-200);
  background:var(--am-n-50);
}
.subnav__in{
  max-width:var(--am-max); margin-inline:auto; padding:var(--am-s-3) var(--am-margin);
  display:flex; flex-wrap:wrap; gap:var(--am-s-2) var(--am-s-5);
  align-items:center;
}
.subnav__lbl{
  font-family:var(--am-f-mono); font-size:var(--am-t-lb);
  letter-spacing:var(--am-tr-lb); text-transform:uppercase; color:var(--am-n-500);
}
.subnav a{
  font-family:var(--am-f-mono); font-size:var(--am-t-lb);
  letter-spacing:var(--am-tr-lb); text-transform:uppercase;
  color:var(--am-texto-2); text-decoration:none;
  padding-bottom:2px; border-bottom:var(--am-borde-2) solid transparent;
}
.subnav a:hover{ color:var(--am-tinta); border-bottom-color:var(--am-naranja); }

/* ====================================================================
   ESTRUCTURA DE PÁGINA
   ==================================================================== */

.wrap{ max-width:var(--am-max); margin-inline:auto; padding-inline:var(--am-margin); }

/* Cabecera de capítulo: blanca, con regla de acento del capítulo */
.pagehead{ background:var(--am-blanco); padding-block:var(--am-s-8) var(--am-s-7); }
.pagehead__rule{ height:var(--am-borde-3); width:72px; background:var(--am-naranja); margin-bottom:var(--am-s-5); }
.pagehead h1{ max-width:16ch; }
.pagehead .lead{ margin-top:var(--am-s-4); }
/* Iba en Monstral a 11 px, y el propio capítulo 05 prohíbe la display por
   debajo de 20 px: a ese cuerpo la geométrica pierde el ojo y se lee peor
   que una mono. Es una etiqueta, y las etiquetas son mono. */
.pagehead__num{
  font-family:var(--am-f-mono); font-size:var(--am-t-lb);
  letter-spacing:var(--am-tr-lb); color:var(--am-n-500);
}

/* Portada: único momento de superficie oscura a página completa */
.cover{ background:var(--am-tinta); color:var(--am-blanco); padding-block:var(--am-s-9) var(--am-s-8); }
.cover h1,.cover .d1{ color:var(--am-blanco); }
.cover .lead{ color:var(--am-azul); font-weight:var(--am-w-light); }
.cover .lbl{ color:var(--am-lima); }

/* Secciones */
.sec{ padding-block:var(--am-s-8); border-top:var(--am-borde-1) solid var(--am-n-200); }
.sec:first-of-type{ border-top:none; }
.sec--alt{ background:var(--am-n-50); border-top:none; }
.sec--alt + .sec{ border-top:none; }
.band{ background:var(--am-n-50); }
.band--azul{ background:var(--am-azul-50); }
.band--menta{ background:var(--am-menta-50); }
.band--lima{ background:var(--am-lima-50); }
.band--violeta{ background:var(--am-violeta-50); }

.sec__head{ margin-bottom:var(--am-s-6); }
.sec__head h2{ margin-bottom:var(--am-s-3); }

/* ====================================================================
   REJILLA
   ==================================================================== */
.grid{ display:grid; gap:var(--am-s-5); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.g5{ grid-template-columns:repeat(5,1fr); }
.g-2-1{ grid-template-columns:2fr 1fr; }
@media (max-width:1080px){ .g5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .g3,.g4,.g5,.g-2-1{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .g2,.g3,.g4,.g5,.g-2-1{ grid-template-columns:1fr; } }
.span-2{ grid-column:span 2; }
@media (max-width:560px){ .span-2{ grid-column:span 1; } }

/* ====================================================================
   CARDS Y CONTENEDORES — misma lógica geométrica
   ==================================================================== */
.card{
  background:var(--am-blanco);
  border:var(--am-borde-1) solid var(--am-n-200);
  border-radius:var(--am-r-md);
  padding:var(--am-s-5);
}
.card > :last-child{ margin-bottom:0; }
.card--plano{ border:none; background:var(--am-n-50); }
.card--marcada{ border-left:var(--am-borde-3) solid var(--am-naranja); border-radius:var(--am-r-0) var(--am-r-md) var(--am-r-md) var(--am-r-0); }
.card--oscura{ background:var(--am-tinta); border-color:var(--am-tinta); color:var(--am-blanco); }
.card--oscura h3,.card--oscura h4,.card--oscura .num{ color:var(--am-blanco); }
.card--oscura .note,.card--oscura .sec-txt{ color:var(--am-azul); }
.card--oscura .lbl{ color:var(--am-lima); }
.card--oscura a{ color:var(--am-lima); }

.panel{
  background:var(--am-blanco);
  border:var(--am-borde-1) solid var(--am-n-200);
  border-radius:var(--am-r-lg);
  padding:var(--am-s-7);
}
.panel > :last-child{ margin-bottom:0; }

/* Declaración de marca — bloque de énfasis a página completa */
.claim{
  background:var(--am-tinta);
  color:var(--am-blanco);
  border-radius:var(--am-r-lg);
  padding:var(--am-s-8) var(--am-s-7);
}
.claim p{ max-width:34ch; color:var(--am-blanco); }
.claim .lbl{ color:var(--am-lima); }

/* ====================================================================
   CHIPS, TAGS Y SEÑALÉTICA — geometría recta, radio 2px
   ==================================================================== */
.chip{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.32em .7em;
  border-radius:var(--am-r-xs);
  border:var(--am-borde-1) solid transparent;
  font-family:var(--am-f-texto);
  font-size:var(--am-t-label); font-weight:var(--am-w-bold);
  letter-spacing:var(--am-tr-label); text-transform:uppercase;
  line-height:1.4;
}
.chip--listo{  background:var(--am-exito-bg);  color:var(--am-exito);  }
.chip--curso{  background:var(--am-alerta-bg); color:var(--am-alerta); }
.chip--info{   background:var(--am-info-bg);   color:var(--am-info);   }
.chip--alerta{ background:var(--am-error-bg);  color:var(--am-error);  }
.chip--neutro{ background:var(--am-n-100);     color:var(--am-texto-2); border-color:var(--am-n-200); }
.chip--tinta{  background:var(--am-tinta);     color:var(--am-blanco); }
/* Acento: usa la versión de señalética, nunca el naranja puro */
.chip--acento{ background:var(--am-naranja-senal); color:var(--am-sobre-naranja-senal); }
/* Sobre superficie oscura los chips de estado invierten a contraforma */
.cover .chip--acento,.claim .chip--acento,.card--oscura .chip--acento,
.foot .chip--acento,.sobre-tinta .chip--acento{
  background:var(--am-lima); color:var(--am-tinta);
}

/* Tag de palabra — para listados de vocabulario */
.tagset{ display:flex; flex-wrap:wrap; gap:var(--am-s-2); margin-bottom:var(--am-s-4); }
.tag{
  display:inline-block; padding:.34em .7em;
  border-radius:var(--am-r-xs);
  font-size:var(--am-t-note); font-weight:var(--am-w-medium);
  background:var(--am-n-100); color:var(--am-texto-2);
  border:var(--am-borde-1) solid var(--am-n-200);
}
.tag--si{ background:var(--am-menta-50); color:var(--am-menta-800); border-color:transparent; }
.tag--no{ background:var(--am-error-bg); color:var(--am-error); border-color:transparent; text-decoration:line-through; text-decoration-thickness:1px; }

/* Pilares — un color por pilar.
   Señalética = texto pequeño: sobre los cuatro acentos claros va Rich
   Black (4.98:1 a 9.15:1); sobre la familia naranja va blanco sobre la
   versión de señalética (5.37:1), nunca sobre el naranja puro. */
.pilar{
  display:inline-block; padding:.34em .8em;
  border-radius:var(--am-r-xs);
  font-size:var(--am-t-label); font-weight:var(--am-w-bold);
  letter-spacing:var(--am-tr-label); text-transform:uppercase;
  color:var(--am-tinta);
}
.pilar--play{     background:var(--am-naranja-senal); color:var(--am-sobre-naranja-senal); }
.pilar--learn{    background:var(--am-violeta); color:var(--am-sobre-violeta); }
.pilar--create{   background:var(--am-lima);    color:var(--am-sobre-lima);    }
.pilar--discover{ background:var(--am-azul);    color:var(--am-sobre-azul);    }
.pilar--grow{     background:var(--am-menta);   color:var(--am-sobre-menta);   }
.pilar--worlds{   background:var(--am-tinta);   color:var(--am-sobre-tinta);   }
.pilar--labs{     background:var(--am-n-200);   color:var(--am-tinta);         }

/* Superficie de énfasis en naranja puro — solo admite texto display.
   Toda etiqueta o texto pequeño dentro pasa a la versión de señalética. */
.bloque-naranja{
  background:var(--am-naranja); color:var(--am-blanco);
  border-radius:var(--am-r-md); padding:var(--am-s-5);
}
/* Toda etiqueta pequeña dentro baja al peldaño de señalética: 5.37:1 */
.bloque-naranja .lbl{
  color:var(--am-blanco);
  background:var(--am-naranja-700);
  border-radius:var(--am-r-xs);
  padding:.4em .6em;
  display:inline-block;
}
.bloque-naranja .big,.bloque-naranja h2,.bloque-naranja h3{ color:var(--am-blanco); }
.bloque-naranja .note,.bloque-naranja .sec-txt,.bloque-naranja p:not(.big){
  color:var(--am-blanco);
  background:var(--am-naranja-700);
  border-radius:var(--am-r-xs);
  padding:.5em .7em; display:inline-block;
}

/* ====================================================================
   CONTEXTOS DE SUPERFICIE
   Cada superficie remapea los tokens de estado usando su propia pareja
   cromática. Así un hover jamás se funde con el fondo sobre el que
   aparece: sobre Rich Black el hover no puede volverse verde.
   Se aplica automáticamente a los contenedores del sistema y puede
   forzarse con las clases .sobre-*.
   ==================================================================== */

/* Sobre Rich Black → pareja 01: la contraforma es Columbia Blue */
.cover, .claim, .card--oscura, .stage--tinta, .foot, .ui__bar, .sobre-tinta{
  --am-i1-bg:        var(--am-naranja);
  --am-i1-fg:        var(--am-tinta);
  --am-i1-bd:        var(--am-naranja);
  --am-i1-hover-bg:  var(--am-lima);          /* 8.43:1 sobre Rich Black */
  --am-i1-hover-fg:  var(--am-tinta);
  --am-i1-hover-bd:  var(--am-lima);
  --am-i1-active-bg: var(--am-azul);
  --am-i1-active-fg: var(--am-tinta);

  --am-i2-bg:        transparent;
  --am-i2-fg:        var(--am-blanco);
  --am-i2-bd:        var(--am-azul);
  --am-i2-hover-bg:  var(--am-azul);          /* pareja 01 · 7.66:1 */
  --am-i2-hover-fg:  var(--am-tinta);
  --am-i2-hover-bd:  var(--am-azul);
  --am-i2-active-bg: var(--am-blanco);
  --am-i2-active-fg: var(--am-tinta);

  --am-i-off-bg:     rgba(255,255,255,.10);
  --am-i-off-fg:     var(--am-azul);
  --am-i-off-bd:     rgba(255,255,255,.24);
  --am-i-focus:      var(--am-lima);
  --am-i-focus-ring: rgba(255,255,255,.30);
}

/* Sobre Pale Violet o Magic Mint → pareja 02: se intercambian */
.stage--violeta, .sobre-violeta{
  --am-i1-bg:var(--am-tinta); --am-i1-fg:var(--am-blanco); --am-i1-bd:var(--am-tinta);
  --am-i1-hover-bg:var(--am-menta); --am-i1-hover-fg:var(--am-tinta); --am-i1-hover-bd:var(--am-tinta);
  --am-i1-active-bg:var(--am-blanco); --am-i1-active-fg:var(--am-tinta);
  --am-i2-fg:var(--am-tinta); --am-i2-bd:var(--am-tinta);
  --am-i2-hover-bg:var(--am-menta); --am-i2-hover-fg:var(--am-tinta); --am-i2-hover-bd:var(--am-tinta);
  --am-i2-active-bg:var(--am-blanco); --am-i2-active-fg:var(--am-tinta);
}
.stage--menta, .sobre-menta{
  --am-i1-bg:var(--am-tinta); --am-i1-fg:var(--am-blanco); --am-i1-bd:var(--am-tinta);
  --am-i1-hover-bg:var(--am-violeta); --am-i1-hover-fg:var(--am-tinta); --am-i1-hover-bd:var(--am-tinta);
  --am-i1-active-bg:var(--am-blanco); --am-i1-active-fg:var(--am-tinta);
  --am-i2-fg:var(--am-tinta); --am-i2-bd:var(--am-tinta);
  --am-i2-hover-bg:var(--am-violeta); --am-i2-hover-fg:var(--am-tinta); --am-i2-hover-bd:var(--am-tinta);
  --am-i2-active-bg:var(--am-blanco); --am-i2-active-fg:var(--am-tinta);
}

/* Sobre Maximum Green Yellow o Portland Orange → pareja 03 */
.stage--lima, .sobre-lima{
  --am-i1-bg:var(--am-naranja-700); --am-i1-fg:var(--am-blanco); --am-i1-bd:var(--am-naranja-700);
  --am-i1-hover-bg:var(--am-tinta); --am-i1-hover-fg:var(--am-blanco); --am-i1-hover-bd:var(--am-tinta);
  --am-i1-active-bg:var(--am-naranja-800); --am-i1-active-fg:var(--am-blanco);
  --am-i2-fg:var(--am-tinta); --am-i2-bd:var(--am-tinta);
  --am-i2-hover-bg:var(--am-tinta); --am-i2-hover-fg:var(--am-blanco); --am-i2-hover-bd:var(--am-tinta);
  --am-i2-active-bg:var(--am-naranja-800); --am-i2-active-fg:var(--am-blanco);
}
/* Sobre Portland Orange solo Rich Black (3.44:1) y blanco (3.16:1)
   alcanzan la separación de 3:1 frente al fondo. La contraforma Lima
   se queda en 2.45:1, así que aquí el estado se comunica invirtiendo
   claro/oscuro, no cambiando de tono. */
.stage--naranja, .sobre-naranja{
  --am-i1-bg:var(--am-tinta); --am-i1-fg:var(--am-blanco); --am-i1-bd:var(--am-tinta);
  --am-i1-hover-bg:var(--am-blanco); --am-i1-hover-fg:var(--am-tinta); --am-i1-hover-bd:var(--am-tinta);
  --am-i1-active-bg:var(--am-tinta-900); --am-i1-active-fg:var(--am-blanco);
  --am-i2-fg:var(--am-blanco); --am-i2-bd:var(--am-blanco);
  --am-i2-hover-bg:var(--am-blanco); --am-i2-hover-fg:var(--am-tinta); --am-i2-hover-bd:var(--am-blanco);
  --am-i2-active-bg:var(--am-tinta); --am-i2-active-fg:var(--am-blanco);
  --am-i-off-bg:rgba(0,48,38,.16); --am-i-off-fg:var(--am-blanco); --am-i-off-bd:rgba(0,48,38,.32);
  --am-i-focus:var(--am-tinta); --am-i-focus-ring:rgba(255,255,255,.55);
}

/* Sobre Columbia Blue → pareja 01 invertida */
.stage--azul, .sobre-azul{
  --am-i1-bg:var(--am-tinta); --am-i1-fg:var(--am-blanco); --am-i1-bd:var(--am-tinta);
  --am-i1-hover-bg:var(--am-naranja-700); --am-i1-hover-fg:var(--am-blanco); --am-i1-hover-bd:var(--am-naranja-700);
  --am-i1-active-bg:var(--am-tinta-900); --am-i1-active-fg:var(--am-blanco);
  --am-i2-fg:var(--am-tinta); --am-i2-bd:var(--am-tinta);
  --am-i2-hover-bg:var(--am-tinta); --am-i2-hover-fg:var(--am-blanco); --am-i2-hover-bd:var(--am-tinta);
  --am-i2-active-bg:var(--am-tinta-900); --am-i2-active-fg:var(--am-blanco);
}

/* ====================================================================
   BOTONES — rectos, radio 4px, sin cápsula
   Cinco estados obligatorios: default · hover · active · focus · disabled
   Todos los valores vienen de los tokens de contexto de arriba.
   ==================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.72em 1.15em;
  border-radius:var(--am-r-sm);
  border:var(--am-borde-2) solid transparent;
  font-family:var(--am-f-texto);
  font-size:var(--am-t-sec); font-weight:var(--am-w-semi);
  line-height:1.2; text-decoration:none; cursor:pointer;
  transition:background var(--am-dur-fast) var(--am-ease),
             color var(--am-dur-fast) var(--am-ease),
             border-color var(--am-dur-fast) var(--am-ease);
}
.btn:focus-visible{
  outline:var(--am-focus-w) solid var(--am-i-focus);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--am-i-focus-ring);
}

.btn--primario{ background:var(--am-i1-bg); color:var(--am-i1-fg); border-color:var(--am-i1-bd); }
.btn--primario:hover{ background:var(--am-i1-hover-bg); color:var(--am-i1-hover-fg); border-color:var(--am-i1-hover-bd); text-decoration:none; }
.btn--primario:active{ background:var(--am-i1-active-bg); color:var(--am-i1-active-fg); border-color:var(--am-i1-active-bg); }

.btn--secundario{ background:var(--am-blanco); color:var(--am-i2-fg); border-color:var(--am-i2-bd); }
.cover .btn--secundario,.claim .btn--secundario,.card--oscura .btn--secundario,
.stage--tinta .btn--secundario,.stage--naranja .btn--secundario,.foot .btn--secundario,
.sobre-tinta .btn--secundario,.sobre-naranja .btn--secundario{ background:transparent; }
.btn--secundario:hover{ background:var(--am-i2-hover-bg); color:var(--am-i2-hover-fg); border-color:var(--am-i2-hover-bd); text-decoration:none; }
.btn--secundario:active{ background:var(--am-i2-active-bg); color:var(--am-i2-active-fg); border-color:var(--am-i2-active-bg); }

.btn--fantasma{ background:transparent; color:var(--am-i2-fg); border-color:var(--am-borde-control); }
.btn--fantasma:hover{ background:var(--am-i2-hover-bg); color:var(--am-i2-hover-fg); border-color:var(--am-i2-hover-bd); text-decoration:none; }
.btn--fantasma:active{ background:var(--am-i2-active-bg); color:var(--am-i2-active-fg); border-color:var(--am-i2-active-bg); }

/* Deshabilitado — doble señal: color apagado + cursor + aria-disabled */
.btn[disabled],.btn[aria-disabled="true"],.btn--off{
  background:var(--am-i-off-bg) !important;
  color:var(--am-i-off-fg) !important;
  border-color:var(--am-i-off-bd) !important;
  cursor:not-allowed; pointer-events:none;
}
.btn[disabled]::after,.btn[aria-disabled="true"]::after,.btn--off::after{
  content:"·"; opacity:.6;
}

/* Campo de formulario — misma geometría y misma lógica de estados */
.input{
  display:block; width:100%;
  padding:.7em .85em;
  border-radius:var(--am-r-sm);
  border:var(--am-borde-1) solid var(--am-borde-control);
  background:var(--am-blanco); color:var(--am-tinta);
  font-family:var(--am-f-texto); font-size:var(--am-t-body);
  transition:border-color var(--am-dur-fast) var(--am-ease);
}
.input:hover{ border-color:var(--am-tinta); }
.input:focus-visible{
  border-color:var(--am-tinta);
  outline:var(--am-focus-w) solid var(--am-i-focus);
  outline-offset:1px;
  box-shadow:0 0 0 5px var(--am-i-focus-ring);
}
.input[disabled]{ background:var(--am-i-off-bg); color:var(--am-i-off-fg); border-color:var(--am-i-off-bd); cursor:not-allowed; }

/* ====================================================================
   RESALTADO TIPOGRÁFICO — recurso de marca
   Bloque sólido detrás del fragmento clave de un titular.
   box-decoration-break mantiene el padding en cada línea al partirse.
   ==================================================================== */
.mark{
  background:var(--am-mark-bg);
  color:var(--am-mark-fg);
  padding:var(--am-mark-py) var(--am-mark-px);
  border-radius:var(--am-mark-radius);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  font-style:normal;
}
.mark--lima{    --am-mark-bg:var(--am-lima);    --am-mark-fg:var(--am-tinta);  }
.mark--menta{   --am-mark-bg:var(--am-menta);   --am-mark-fg:var(--am-tinta);  }
.mark--azul{    --am-mark-bg:var(--am-azul);    --am-mark-fg:var(--am-tinta);  }
.mark--violeta{ --am-mark-bg:var(--am-violeta); --am-mark-fg:var(--am-tinta);  }
.mark--tinta{   --am-mark-bg:var(--am-tinta);   --am-mark-fg:var(--am-blanco); }
/* Solo en tamaño display: blanco sobre naranja puro es 3.16:1 */
.mark--naranja{ --am-mark-bg:var(--am-naranja); --am-mark-fg:var(--am-blanco); }

/* Titular con resaltado: la interlínea se abre para que los bloques
   de líneas consecutivas no se toquen. */
.titular-mark{ line-height:1.28; }
.titular-mark.d1,.titular-mark.d2{ line-height:1.22; }

/* Sobre fotografía: velo obligatorio bajo el titular */
.foto-head{ position:relative; overflow:hidden; border-radius:var(--am-r-lg); }
.foto-head__velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,48,38,.55), rgba(0,48,38,.82));
}
.foto-head__txt{ position:relative; padding:var(--am-s-8) var(--am-s-7); }

/* ====================================================================
   TABLAS
   ==================================================================== */
.tabla-wrap{ overflow-x:auto; border:var(--am-borde-1) solid var(--am-n-200); border-radius:var(--am-r-md); }
table{ width:100%; border-collapse:collapse; font-size:var(--am-t-sec); background:var(--am-blanco); }
caption{
  text-align:left; padding-bottom:var(--am-s-3);
  font-size:var(--am-t-label); font-weight:var(--am-w-bold);
  letter-spacing:var(--am-tr-label); text-transform:uppercase; color:var(--am-texto-3);
}
thead th{
  text-align:left; padding:.8em 1em;
  font-size:var(--am-t-label); font-weight:var(--am-w-bold);
  letter-spacing:var(--am-tr-label); text-transform:uppercase;
  color:var(--am-blanco); background:var(--am-tinta);
  white-space:nowrap;
}
tbody td,tbody th{
  padding:.8em 1em; text-align:left; vertical-align:top;
  border-bottom:var(--am-borde-1) solid var(--am-n-200);
  font-weight:var(--am-w-book);
}
tbody tr:last-child td,tbody tr:last-child th{ border-bottom:none; }
tbody tr:nth-child(even){ background:var(--am-n-50); }
td code,th code{ font-size:.9em; }
.tnum{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ====================================================================
   PARES SÍ / NO
   ==================================================================== */
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--am-s-4); margin-bottom:var(--am-s-4); }
@media (max-width:700px){ .pair{ grid-template-columns:1fr; } }
.si,.no{
  border-radius:var(--am-r-md);
  border:var(--am-borde-1) solid var(--am-n-200);
  border-top:var(--am-borde-3) solid var(--am-n-500);
  padding:var(--am-s-5);
  background:var(--am-blanco);
}
.si{ border-top-color:var(--am-menta-800); }
.no{ border-top-color:var(--am-error); }
.si > :last-child,.no > :last-child{ margin-bottom:0; }
.si .t,.no .t{
  display:block; margin-bottom:var(--am-s-2);
  font-size:var(--am-t-label); font-weight:var(--am-w-bold);
  letter-spacing:var(--am-tr-label); text-transform:uppercase;
}
.si .t{ color:var(--am-menta-800); }
.no .t{ color:var(--am-error); }

/* ====================================================================
   REGLAS / CALLOUTS
   ==================================================================== */
.rule{
  border-left:var(--am-borde-3) solid var(--am-n-500);
  background:var(--am-n-50);
  border-radius:var(--am-r-0) var(--am-r-md) var(--am-r-md) var(--am-r-0);
  padding:var(--am-s-4) var(--am-s-5);
  margin-block:var(--am-s-4);
}
.rule > :last-child{ margin-bottom:0; }
/* Cada regla debe distinguirse de un vistazo, también en el borde.
   OJO con "clave": antes usaba naranja-50 (#FFEDE8), que es exactamente el mismo
   hex que --am-error-bg, y naranja-700 a un paso de --am-error. Una idea clave
   se pintaba con la paleta de error y se leía como advertencia. Ahora va en
   violeta, el pilar LEARN, que no colisiona con ningún color de estado. */
.rule--siempre{ border-left-color:var(--am-menta-800);  background:var(--am-menta-50); }
.rule--nunca{   border-left-color:var(--am-error);       background:var(--am-error-bg); }
.rule--clave{   border-left-color:var(--am-violeta);     background:var(--am-violeta-50); }
.rule .t{
  display:block; margin-bottom:var(--am-s-2);
  font-size:var(--am-t-label); font-weight:var(--am-w-bold);
  letter-spacing:var(--am-tr-label); text-transform:uppercase;
}
.rule--siempre .t{ color:var(--am-menta-800); }
.rule--nunca .t{ color:var(--am-error); }
.rule--clave .t{ color:var(--am-violeta-800); }   /* 8,49:1 sobre violeta-50 */
.rule--neutra .t{ color:var(--am-texto-3); }

/* ====================================================================
   MUESTRAS DE COLOR
   ==================================================================== */
.sw{
  border:var(--am-borde-1) solid var(--am-n-200);
  border-radius:var(--am-r-md);
  overflow:hidden; background:var(--am-blanco);
}
.sw i{ display:block; height:104px; }
.sw--alto i{ height:168px; }
.sw .m{ padding:var(--am-s-4); }
.sw .m b{ display:block; font-size:var(--am-t-sec); font-weight:var(--am-w-bold); }
.sw .m code{ display:block; margin-top:.15em; font-size:var(--am-t-note); color:var(--am-texto-3); background:none; padding:0; }
.sw .m .fn{ display:block; margin-top:var(--am-s-2); font-size:var(--am-t-note); color:var(--am-texto-2); }

/* ====================================================================
   WORDMARK Y SELLO
   ==================================================================== */
/* EL WORDMARK ES EL ÚNICO SITIO DONDE LA VERSAL ES OBLIGATORIA. El resto
   del display va en caja alta y baja.
   El word-spacing vuelve a 0 y no hereda la corrección métrica del cuerpo
   (+0.06 em, tokens.css §2.6): esa corrección existe para que un TEXTO se
   lea, y el wordmark no es texto — es una forma dibujada. Heredarla
   separaría «ALFAMU» de «PLAY» un 6 % más y cambiaría la proporción del
   logotipo según el tamaño al que se pinte. */
.wm{
  font-family:var(--am-f-display); font-weight:400;
  letter-spacing:var(--am-tr-d3); text-transform:uppercase;
  word-spacing:0;
  line-height:var(--am-lh-r); margin:0; color:var(--am-tinta);
  font-size:var(--am-t-d4);
}
/* El acento del wordmark es SIEMPRE el naranja puro de marca, en toda
   superficie. Los logotipos están exentos de los umbrales de contraste
   (WCAG 2.2 SC 1.4.3 / 1.4.11): usar un peldaño oscurecido apagaría la
   identidad sin ganar accesibilidad real. */
.wm em{ background:none; box-shadow:none; padding:0; font-style:normal; color:var(--am-logo-acento); }
.wm--claro{ color:var(--am-blanco); }
.wm--claro em{ color:var(--am-logo-acento); }
/* Los dos tamaños del wordmark salen de la escala y no de un clamp propio.
   Traían el suyo —2.5→5.5rem y 1.8→3rem— escrito a mano, que es lo mismo
   que la escala ya resuelve en D1 y D3, y por eso el logotipo crecía con
   una curva distinta a la de los titulares que tenía al lado. */
.wm--xl{ font-size:var(--am-t-d1); }   /* portada */
.wm--lg{ font-size:var(--am-t-d3); }   /* pie, muestras, especímenes */

/* EL SELLO ES UNA MARCA, NO UN ADORNO JUNTO AL WORDMARK. Se usa solo, en
   los sitios donde el wordmark no cabe o no procede: favicon, avatar,
   icono de aplicación, sello de esquina. Nunca acompañando al wordmark.

   Su letra se mide EN PROPORCIÓN A LA CAJA, no con un tamaño escrito a
   mano. Antes cada aparición traía el suyo —1.5, 1.7, 2.4 rem, .9 rem—
   y bastaba cambiar el lado del cuadrado para que la A quedara flotando
   o tocando el borde. Ahora sólo se declara `--s` y todo lo demás sale
   de ahí: la letra al 43 % del lado y el marcador al 18 %. */
.sello{
  --s:56px;
  width:var(--s); height:var(--s); flex:none;
  border-radius:var(--am-r-sm);          /* nunca circular */
  background:var(--am-tinta);
  display:grid; place-items:center; position:relative;
}
.sello span{
  font-family:var(--am-f-display); font-weight:400; color:var(--am-blanco);
  font-size:calc(var(--s) * .43); line-height:var(--am-lh-r);
  letter-spacing:var(--am-tr-d4); word-spacing:0;
}
/* El marcador es la unidad X de la zona de seguridad (capítulo 03): si su
   lado se escribiera a mano, la zona de seguridad dejaría de ser
   proporcional al sello y la construcción no se sostendría. */
.sello::after{
  content:""; position:absolute;
  top:calc(var(--s) * .107); right:calc(var(--s) * .107);
  width:calc(var(--s) * .18); height:calc(var(--s) * .18);
  border-radius:1px;                            /* marcador cuadrado */
  background:var(--am-logo-acento);
}
.sello--sm{ --s:32px; border-radius:var(--am-r-xs); }
.sello--lg{ --s:88px; border-radius:var(--am-r-md); }

/* ====================================================================
   CÓDIGO Y TOKENS
   ==================================================================== */
pre{
  background:var(--am-tinta-900); color:var(--am-azul);
  border-radius:var(--am-r-md); padding:var(--am-s-5);
  overflow-x:auto; font-family:var(--am-f-mono); font-size:var(--am-t-note); line-height:1.7;
  margin-block:var(--am-s-4);
}
pre b{ color:var(--am-lima); font-weight:400; }
code{ font-family:var(--am-f-mono); }
:not(pre) > code{
  background:var(--am-n-100); color:var(--am-tinta);
  padding:.12em .38em; border-radius:var(--am-r-xs); font-size:.88em;
}

/* ====================================================================
   ESCENARIOS DE MUESTRA (logotipo, ejemplos de aplicación)
   ==================================================================== */
.stage{
  border-radius:var(--am-r-lg);
  border:var(--am-borde-1) solid var(--am-n-200);
  min-height:180px; display:grid; place-items:center;
  padding:var(--am-s-7);
}
.stage--blanco{ background:var(--am-blanco); }
.stage--n50{    background:var(--am-n-50); }
.stage--tinta{  background:var(--am-tinta);   border-color:var(--am-tinta); }
.stage--naranja{background:var(--am-naranja); border-color:var(--am-naranja); }
.stage--azul{   background:var(--am-azul);    border-color:var(--am-azul); }
.stage--lima{   background:var(--am-lima);    border-color:var(--am-lima); }
.stage--menta{  background:var(--am-menta);   border-color:var(--am-menta); }
.stage--violeta{background:var(--am-violeta); border-color:var(--am-violeta); }

/* Maqueta de interfaz para ejemplos de aplicación */
.ui{
  border:var(--am-borde-1) solid var(--am-n-200);
  border-radius:var(--am-r-md); overflow:hidden; background:var(--am-blanco);
}
.ui__bar{
  background:var(--am-tinta); color:var(--am-blanco);
  padding:var(--am-s-3) var(--am-s-4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--am-s-3);
  font-size:var(--am-t-note); font-weight:var(--am-w-semi);
}
.ui__body{ padding:var(--am-s-5); }
.bar{ height:8px; border-radius:var(--am-r-xs); background:var(--am-n-200); overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--am-naranja); border-radius:var(--am-r-xs); }

/* ====================================================================
   PIE
   ==================================================================== */
.foot{
  background:var(--am-tinta-900); color:var(--am-azul);
  padding-block:var(--am-s-8) var(--am-s-6); margin-top:var(--am-s-9);
}
.foot .wm{ margin-bottom:var(--am-s-4); }
.foot a{ color:var(--am-lima); }
.foot a:hover{ color:var(--am-blanco); }
/* Mismo caso que .pagehead__num: era Monstral a 15 px, por debajo del suelo
   de 20 px que fija el capítulo 05. Como firma en versal, es mono. */
.foot__claim{
  font-family:var(--am-f-mono); text-transform:uppercase;
  letter-spacing:var(--am-tr-lb); color:var(--am-lima); font-size:var(--am-t-lb);
  margin-bottom:var(--am-s-6);
}
.foot__meta{
  display:flex; flex-wrap:wrap; gap:var(--am-s-4); justify-content:space-between;
  padding-top:var(--am-s-5); border-top:var(--am-borde-1) solid rgba(255,255,255,.14);
  font-size:var(--am-t-note);
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:var(--am-s-2) var(--am-s-5); margin-bottom:var(--am-s-6); }
.foot__nav a{ font-size:var(--am-t-note); text-decoration:none; }
.foot__nav a:hover{ text-decoration:underline; }

/* ====================================================================
   UTILIDADES
   ==================================================================== */
.flex{ display:flex; gap:var(--am-s-4); align-items:center; flex-wrap:wrap; }
.flex--top{ align-items:flex-start; }
.between{ justify-content:space-between; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.mb-5{ margin-bottom:var(--am-s-5); }
.mb-6{ margin-bottom:var(--am-s-6); }
.mt-6{ margin-top:var(--am-s-6); }
.mt-5{ margin-top:var(--am-s-5); }
.w-txt{ max-width:var(--am-max-txt); }
.center{ text-align:center; }
.full{ max-width:none; }

@media print{
  .topbar,.chapnav,.subnav,.skip{ display:none !important; }
  .cover,.foot,.card--oscura,.claim,thead th{ background:none !important; color:#000 !important; }
  a{ color:#000; }
  .sec{ break-inside:avoid; }
}