/* ================================================================
   YOD LABS · INTERIORES 01 y 02
   «Agentes de IA» (.ag-) y «Posicionamiento GEO» (.pg-)

   Se carga DESPUÉS de yod.css y no redefine ni un token suyo: usa
   --cielo --oro --oro-luz --marfil --texto-c --texto-2 --texto-suave
   --panel --panel-solid --panel-2 --linea --linea-suave --linea-ui
   --linea-oro --verde, y las tres familias (--display sólo titulares,
   --texto cuerpo, --ui dentro de las maquetas, --mono datos y rótulos).

   El revelado (.ag-rev) lo comparten las dos páginas a propósito: es
   el mismo script, copiado al pie de cada una.
   ================================================================ */

/* ================================================================
   MOVIMIENTO · el estado oculto SÓLO existe si el script corrió
   La clase .ag-js la pone el script en el <html>, y el script no la
   pone si hay prefers-reduced-motion o no hay IntersectionObserver.
   Sin JS las dos páginas se ven enteras desde el primer pintado.
   ================================================================ */
.ag-js .ag-rev { opacity: 0; translate: 0 18px; }
.ag-js .ag-rev.ag-on {
  opacity: 1; translate: 0 0;
  transition: opacity .72s cubic-bezier(.2,.7,.2,1) var(--rd, 0s),
              translate .72s cubic-bezier(.2,.7,.2,1) var(--rd, 0s);
}

/* ================================================================
   ANDAMIO COMÚN A LAS DOS PÁGINAS
   ================================================================ */
.ag-sec { padding: clamp(58px, 6.6vw, 96px) 0; position: relative; }
.ag-sec.ag-sec-alta { padding-top: clamp(30px, 3.4vw, 46px); }

.ag-cab { margin-bottom: clamp(30px, 3.8vw, 50px); }
.ag-tag {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro);
}
.ag-tag::before { content: ''; width: 28px; height: 1px; flex: none; background: linear-gradient(90deg, transparent, var(--oro)); }
.ag-cab h2 {
  font-family: var(--texto); font-weight: 500; color: var(--marfil);
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -.022em;
  margin: 17px 0 0; max-width: 21ch; text-wrap: balance;
}
.ag-cab h2 em { font-style: normal; color: var(--oro-luz); }
.ag-cab .ag-lead {
  margin-top: 18px; max-width: 66ch; text-wrap: pretty;
  font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.62; color: var(--texto-c);
}
.ag-cab .ag-lead b { color: var(--marfil); font-weight: 600; }

.ag-plato {
  background: var(--panel); border: 1px solid var(--linea-suave); border-radius: 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); min-width: 0;
}
.ag-pie {
  margin-top: 14px; font-size: 12.5px; line-height: 1.55;
  color: var(--texto-suave); max-width: 72ch; text-wrap: pretty;
}
.ag-pie b { color: var(--texto-c); font-weight: 600; }

/* ================================================================
   AGENTES · EL RECORRIDO DE UNA CONVERSACIÓN
   Un riel vertical de pasos; en el paso de la decisión el riel se
   abre en dos y una de las dos ramas es el argumento de venta.
   ================================================================ */
.ag-riel { list-style: none; margin: 0; padding: 0; }
.ag-paso {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: 30px minmax(0, 1fr);
  column-gap: clamp(13px, 1.6vw, 20px);
  padding-bottom: clamp(26px, 3vw, 40px);
}
/* cada paso dibuja su propio hilo hasta el siguiente: así ninguno
   depende de la altura total ni de dónde termina la lista */
.ag-paso::before {
  content: ''; position: absolute; left: 14px; top: 26px; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(198,161,91,.42), rgba(198,161,91,.16));
}
.ag-paso:last-child { padding-bottom: 0; }
.ag-paso:last-child::before { display: none; }

.ag-nodo { grid-column: 1; height: 26px; display: flex; align-items: center; justify-content: center; }
.ag-nodo i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--cielo); border: 1px solid var(--oro);
  box-shadow: 0 0 0 4px var(--cielo), 0 0 14px rgba(198,161,91,.45);
}
.ag-cuerpo { grid-column: 2; min-width: 0; }
.ag-paso-n {
  height: 26px; display: flex; align-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--oro);
}
.ag-cuerpo h3 {
  font-family: var(--texto); font-weight: 500; color: var(--marfil);
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -.02em;
  margin: 10px 0 10px; max-width: 24ch; text-wrap: balance;
}
.ag-cuerpo > p {
  font-size: 16px; line-height: 1.62; color: var(--texto-c);
  max-width: 62ch; text-wrap: pretty;
}
.ag-cuerpo > p + p { margin-top: 12px; }
.ag-cuerpo b { color: var(--marfil); font-weight: 600; }
.ag-arte { margin-top: clamp(18px, 2.2vw, 26px); }

/* ---- paso 01 · el mensaje que entra ---- */
.ag-entrada {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; font-family: var(--ui);
}
.ag-entrada .ag-canal-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro); border: 1px solid var(--linea-oro); border-radius: 999px; padding: 4px 11px;
}
.ag-entrada .ag-burbuja {
  flex: 1 1 260px; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--linea-ui);
  border-radius: 13px; border-top-left-radius: 4px;
  padding: 11px 14px; font-size: 15px; line-height: 1.5; color: #E7E1D6;
}
.ag-entrada .ag-hora { flex: none; font-family: var(--mono); font-size: 10px; color: var(--texto-suave); }

/* ---- paso 02 · las fuentes que consulta ---- */
.ag-fuentes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--linea-suave); border: 1px solid var(--linea-suave);
  border-radius: 14px; overflow: hidden;
}
.ag-fuente { background: var(--panel-solid); padding: 16px 15px 15px; min-width: 0; }
.ag-fuente .ag-f-ic { width: 26px; height: 26px; color: var(--oro); margin-bottom: 11px; }
.ag-fuente b { display: block; font-size: 14.5px; font-weight: 600; color: var(--marfil); letter-spacing: -.01em; }
.ag-fuente span {
  display: block; margin-top: 6px; font-size: 13px; line-height: 1.5;
  color: var(--texto-2); text-wrap: pretty;
}
.ag-verifica {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 13px; padding: 10px 14px; border-radius: 11px;
  background: rgba(95,214,164,.08); border: 1px solid rgba(95,214,164,.22);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--verde);
}
.ag-verifica i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--verde); box-shadow: 0 0 9px rgba(95,214,164,.8); }
.ag-verifica span { color: var(--texto-2); letter-spacing: .1em; }

/* ---- la decisión · el riel se abre en dos ---- */
.ag-fork { display: block; width: 100%; height: 54px; margin-top: 4px; overflow: visible; }
.ag-fork path { fill: none; stroke-linecap: round; }
.ag-fork .ag-f-a { stroke: rgba(198,161,91,.55); }
.ag-fork .ag-f-b { stroke: var(--oro-luz); }

.ag-ramas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.ag-rama { padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2vw, 24px); position: relative; }
.ag-rama .ag-r-n {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--texto-suave);
}
.ag-rama h4 {
  font-family: var(--texto); font-weight: 500; font-size: clamp(18px, 1.7vw, 21px);
  letter-spacing: -.018em; color: var(--marfil); line-height: 1.24; margin: 11px 0 9px;
}
.ag-rama > p { font-size: 14.8px; line-height: 1.58; color: var(--texto-c); text-wrap: pretty; }
/* MEDIDO, y vale para todas las listas de estas dos páginas: si el
   marcador va como celda de una rejilla, el texto que queda al lado se
   convierte en un ítem ANÓNIMO, y a un ítem anónimo no se le puede
   poner min-width:0 desde CSS — conserva su mínimo de contenido y
   estira la página (a 320px el documento medía 348). El marcador va
   absoluto sobre un bloque normal: eso no desborda a ningún ancho. */
.ag-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ag-lista li {
  position: relative; padding-left: 19px; min-width: 0;
  font-size: 14px; line-height: 1.5; color: var(--texto-2); text-wrap: pretty;
}
.ag-lista li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 9px; height: 1px; background: var(--oro); opacity: .85;
}
/* la rama que vende: la derivación */
.ag-rama-h {
  background: linear-gradient(150deg, rgba(198,161,91,.15), rgba(17,26,40,.80) 58%);
  border-color: var(--linea);
}
.ag-rama-h .ag-r-n { color: var(--oro); }
.ag-rama-h h4 { color: var(--oro-luz); }
.ag-rama-h .ag-lista li::before { background: var(--oro-luz); }

/* ---- el relevo · el agente se calla ---- */
.ag-relevo { overflow: hidden; font-family: var(--ui); }
.ag-rel-top {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 11px 15px; border-bottom: 1px solid var(--linea-ui); background: rgba(242,234,219,.02);
}
.ag-rel-top .ag-rel-t { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.ag-estado {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 11px;
  color: var(--oro); border: 1px solid var(--linea-oro); background: rgba(198,161,91,.08);
}
.ag-estado i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--oro-luz); box-shadow: 0 0 8px rgba(232,206,150,.85); }
.ag-estado.ag-pausa { color: var(--texto-2); border-color: var(--linea-ui); background: rgba(242,234,219,.04); }
.ag-estado.ag-pausa i { background: var(--texto-suave); box-shadow: none; }

.ag-hilo { padding: 16px 15px; display: flex; flex-direction: column; gap: 10px; }
.ag-msg {
  max-width: 82%; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; border-radius: 13px;
}
.ag-msg .ag-quien {
  display: block; margin-bottom: 5px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave);
}
.ag-msg.ag-ellos { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--linea-ui); border-bottom-left-radius: 4px; color: #E7E1D6; }
.ag-msg.ag-bot { align-self: flex-end; background: rgba(198,161,91,.13); border: 1px solid rgba(198,161,91,.26); border-bottom-right-radius: 4px; color: #F5EEDF; }
/* el humano llega con otra voz gráfica: marfil, no oro. Se distingue
   de un vistazo quién escribió qué, que es de lo que va la pieza. */
.ag-msg.ag-humano {
  align-self: flex-end; background: rgba(242,234,219,.10); border: 1px solid rgba(242,234,219,.26);
  border-bottom-right-radius: 4px; color: var(--marfil);
}
.ag-msg.ag-humano .ag-quien { color: #CFC6B6; }
.ag-corte {
  align-self: stretch; display: flex; align-items: center; gap: 12px; margin: 6px 0 2px;
}
.ag-corte::before, .ag-corte::after { content: ''; flex: 1 1 0; height: 1px; background: var(--linea-ui); }
.ag-corte span {
  flex: 0 1 auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oro); text-align: center;
}
.ag-silencio {
  align-self: flex-end; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 13px; border-bottom-right-radius: 4px;
  border: 1px dashed var(--linea-ui); background: rgba(7,11,19,.5);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto-suave);
}
.ag-silencio svg { width: 14px; height: 14px; flex: none; }
.ag-rel-pie {
  border-top: 1px solid var(--linea-ui); padding: 12px 15px;
  font-size: 13px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty;
}
.ag-rel-pie b { color: var(--marfil); font-weight: 600; }

/* ================================================================
   AGENTES · REJILLA DE CANALES
   ================================================================ */
.ag-canales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.ag-canal {
  padding: clamp(24px, 2.4vw, 30px) clamp(20px, 2.2vw, 26px);
  display: flex; flex-direction: column;
  transition: transform .34s cubic-bezier(.2,.7,.2,1), border-color .34s ease, box-shadow .34s ease;
}
.ag-canal:hover { transform: translateY(-5px); border-color: var(--linea); box-shadow: 0 22px 48px rgba(0,0,0,.46), 0 0 0 1px rgba(198,161,91,.10); }
.ag-c-ic { width: 38px; height: 38px; color: var(--oro); margin-bottom: 18px; }
.ag-c-ic .ag-hi { color: var(--oro-luz); }
.ag-canal h3 {
  font-family: var(--texto); font-weight: 500; font-size: 21px; letter-spacing: -.02em;
  color: var(--marfil); line-height: 1.2; margin-bottom: 6px;
}
.ag-c-rol { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.ag-canal > p { margin-top: 12px; font-size: 14.8px; line-height: 1.58; color: var(--texto-c); text-wrap: pretty; }
.ag-canal .ag-lista { margin-top: 16px; }
.ag-c-pie {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linea-suave);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texto-suave); line-height: 1.7;
}

/* ================================================================
   AGENTES · LAS GUARDAS, COMO PIEZAS
   ================================================================ */
.ag-guardas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(13px, 1.5vw, 18px); }
.ag-guarda { padding: clamp(20px, 2.1vw, 25px) clamp(18px, 2vw, 22px); display: flex; flex-direction: column; }
.ag-g-top { display: flex; align-items: center; gap: 10px; }
.ag-g-check {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1px solid rgba(95,214,164,.38); background: rgba(95,214,164,.10);
  display: grid; place-items: center; color: var(--verde);
}
.ag-g-check svg { width: 11px; height: 11px; }
.ag-g-n { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); }
.ag-guarda b {
  display: block; margin: 13px 0 8px; font-family: var(--texto); font-weight: 500;
  font-size: 17.5px; letter-spacing: -.016em; color: var(--marfil); line-height: 1.25;
}
.ag-guarda p { font-size: 14.2px; line-height: 1.56; color: var(--texto-c); text-wrap: pretty; }
.ag-g-falla {
  position: relative; min-width: 0;
  margin-top: auto; padding: 14px 0 0 19px; border-top: 1px solid var(--linea-suave);
  font-size: 13px; line-height: 1.5; color: #D98C7A;   /* 6.8:1 medido sobre la placa */
}
.ag-g-falla::before {
  content: '↳'; position: absolute; left: 0; top: 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
}
.ag-g-falla em { font-style: normal; color: var(--texto-2); }

/* ================================================================
   AGENTES · LAS DOS CIFRAS
   ================================================================ */
.ag-cifras { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(16px, 2vw, 26px); align-items: stretch; }
.ag-cifra { padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; }
.ag-cifra .ag-n {
  font-family: var(--mono); font-weight: 500; font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1; letter-spacing: -.045em; color: var(--oro-luz);
  font-variant-numeric: tabular-nums lining-nums;
}
.ag-cifra .ag-n small { font-size: .42em; letter-spacing: -.01em; color: var(--marfil); padding-left: .18em; }
.ag-cifra .ag-d { margin-top: 14px; font-size: 15.5px; line-height: 1.55; color: var(--texto-c); max-width: 34ch; text-wrap: pretty; }
.ag-cifra .ag-d b { color: var(--marfil); font-weight: 600; }
/* 95 marcas: una por versión desplegada. La última es la de hoy, y no
   es la última: por eso queda encendida y el trazo no cierra. */
.ag-ticks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3px; margin-top: auto; padding-top: 20px; }
.ag-ticks i { width: 3px; height: 13px; border-radius: 1px; flex: none; background: rgba(198,161,91,.34); }
.ag-ticks i:last-child { height: 19px; background: var(--oro-luz); box-shadow: 0 0 9px rgba(232,206,150,.9); }
.ag-ticks-l { margin-top: 11px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }

/* ================================================================
   GEO · LA FICHA DEL CASO (sin nombre)
   ================================================================ */
.pg-ficha { padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.4vw, 30px); }
.pg-ficha-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--linea-suave);
}
.pg-ficha-t { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.pg-ficha-s { font-size: 14px; color: var(--texto-2); }
.pg-ficha-s em { font-style: italic; color: var(--marfil); }
.pg-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: 20px; }
.pg-dato { min-width: 0; }
.pg-dato .c {
  font-family: var(--mono); font-weight: 500; font-size: clamp(25px, 3vw, 38px);
  line-height: 1; letter-spacing: -.04em; color: var(--marfil);
  font-variant-numeric: tabular-nums lining-nums;
}
.pg-dato .l { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }

/* ================================================================
   GEO · SEO / GEO, en dos columnas
   ================================================================ */
.pg-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.pg-vs > div { padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2vw, 24px); }
.pg-vs .pg-vs-k { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-suave); }
.pg-vs h3 {
  font-family: var(--texto); font-weight: 500; font-size: clamp(18px, 1.7vw, 21px);
  letter-spacing: -.018em; color: var(--marfil); line-height: 1.24; margin: 11px 0 9px;
}
.pg-vs p { font-size: 14.8px; line-height: 1.58; color: var(--texto-c); text-wrap: pretty; }
.pg-vs .pg-geo { background: linear-gradient(150deg, rgba(198,161,91,.14), rgba(17,26,40,.80) 58%); border-color: var(--linea); }
.pg-vs .pg-geo .pg-vs-k { color: var(--oro); }
.pg-vs .pg-geo h3 { color: var(--oro-luz); }

/* ================================================================
   GEO · QUÉ SE CONSTRUYE, PIEZA POR PIEZA
   ================================================================ */
.pg-piezas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.pg-pieza {
  padding: clamp(24px, 2.5vw, 32px) clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column;
  transition: transform .34s cubic-bezier(.2,.7,.2,1), border-color .34s ease, box-shadow .34s ease;
}
.pg-pieza:hover { transform: translateY(-5px); border-color: var(--linea); box-shadow: 0 22px 48px rgba(0,0,0,.46), 0 0 0 1px rgba(198,161,91,.10); }
.pg-p-n { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.pg-p-ic { width: 50px; height: 50px; margin: 17px 0; color: var(--oro); }
.pg-p-ic .pg-hi { color: var(--oro-luz); }
.pg-p-ic .pg-hi-f { fill: var(--oro-luz); }
.pg-pieza h3 {
  font-family: var(--texto); font-weight: 500; font-size: clamp(19px, 1.8vw, 22px);
  letter-spacing: -.02em; color: var(--marfil); line-height: 1.22; margin-bottom: 10px;
}
.pg-pieza p { font-size: 15px; line-height: 1.58; color: var(--texto-c); text-wrap: pretty; }
.pg-para {
  position: relative; min-width: 0;
  margin-top: auto; padding: 16px 0 0 22px; border-top: 1px solid var(--linea-suave);
  font-size: 14px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty;
}
.pg-para::before {
  content: '→'; position: absolute; left: 0; top: 16px;
  font-family: var(--mono); color: var(--oro); font-size: 13px; line-height: 1.55;
}
.pg-para b { color: var(--marfil); font-weight: 600; }

/* ================================================================
   GEO · LOS DOS RELOJES (esquema de tiempos, no una medición)
   ================================================================ */
.pg-relojes { padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 24px); }
.pg-rel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pg-rel-t { font-size: 15.5px; font-weight: 600; color: var(--marfil); letter-spacing: -.012em; }
.pg-rel-s { margin-top: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.pg-rel-chip {
  flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro); border: 1px solid var(--linea-oro); border-radius: 999px; padding: 4px 11px;
}

.pg-pistas { margin-top: clamp(24px, 3vw, 34px); display: grid; gap: 18px; }
.pg-pista { display: grid; grid-template-columns: clamp(124px, 15vw, 186px) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); align-items: center; }
.pg-pista-n b { display: block; font-size: 14.5px; font-weight: 600; color: var(--marfil); letter-spacing: -.01em; line-height: 1.3; }
.pg-pista-n span { display: block; margin-top: 4px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.pg-carril { position: relative; height: 34px; border-radius: 8px; background: rgba(242,234,219,.045); border: 1px solid var(--linea-suave); overflow: hidden; }
.pg-carril i {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w);
  transform-origin: left center;
}
.pg-carril .pg-busca { background: linear-gradient(90deg, rgba(47,95,216,.75), rgba(47,95,216,.18)); box-shadow: 0 0 22px rgba(47,95,216,.35); }
.pg-carril .pg-recuerda {
  background: repeating-linear-gradient(115deg, rgba(194,161,78,.52) 0 6px, rgba(194,161,78,.12) 6px 13px);
}
/* el rótulo vive DENTRO del carril, encima del rayado: sin la sombra
   dura contra la noche, el marfil sobre las franjas de oro pierde
   filo justo donde hay que leerlo */
.pg-carril b {
  position: absolute; left: var(--x); top: 50%; transform: translateY(-50%);
  margin-left: 13px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--marfil); white-space: nowrap;
  text-shadow: 0 1px 3px rgba(7,11,19,.98), 0 0 10px rgba(7,11,19,.9);
}
.pg-escala { display: grid; grid-template-columns: clamp(124px, 15vw, 186px) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); margin-top: 6px; }
.pg-escala-l { position: relative; height: 16px; }
.pg-escala-l span {
  position: absolute; top: 0; left: var(--x); transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--texto-suave); white-space: nowrap;
}
.pg-escala-l span:first-child { transform: none; }
.pg-escala-l span:last-child { transform: translateX(-100%); }

/* ================================================================
   GEO · LO QUE SE MIDE · tres instrumentos
   ================================================================ */
.pg-instr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(13px, 1.5vw, 18px); }
.pg-instr > div { padding: clamp(20px, 2.1vw, 26px) clamp(18px, 2vw, 23px); display: flex; flex-direction: column; }
.pg-i-n { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.pg-instr b.pg-i-t {
  display: block; margin: 12px 0 9px; font-family: var(--texto); font-weight: 500;
  font-size: 17.5px; letter-spacing: -.016em; color: var(--marfil); line-height: 1.25;
}
.pg-instr p { font-size: 14.2px; line-height: 1.56; color: var(--texto-c); text-wrap: pretty; }
.pg-i-pie {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea-suave);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texto-suave); line-height: 1.7;
}

/* el reparto de lecturas: UNA barra segmentada (en la portada son
   seis barras; acá interesa el total repartido, no comparar filas) */
.pg-lecturas { padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.4vw, 30px); margin-top: clamp(14px, 1.6vw, 20px); }
.pg-lec-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pg-lec-n {
  font-family: var(--mono); font-weight: 500; font-size: clamp(28px, 3.2vw, 42px); line-height: 1;
  letter-spacing: -.045em; color: var(--oro-luz); font-variant-numeric: tabular-nums lining-nums;
}
.pg-lec-l { display: block; margin-top: 9px; max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.pg-apilada {
  display: flex; height: 22px; margin-top: 22px; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--linea-suave); background: rgba(242,234,219,.05);
}
.pg-apilada i { display: block; flex: var(--f) 0 0%; min-width: 3px; background: var(--c); border-right: 1px solid rgba(7,11,19,.5); }
.pg-apilada i:last-child { border-right: none; }
.pg-ley { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; }
/* el porcentaje pegado a su nombre, no empujado al otro extremo de la
   celda: si la cifra se va lejos, deja de leerse como un par */
.pg-ley li { display: grid; grid-template-columns: auto minmax(0, auto) auto; justify-content: start; gap: 10px; align-items: baseline; min-width: 0; }
.pg-ley i { width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--c); }
.pg-ley span { font-size: 14px; color: var(--texto-c); min-width: 0; }
.pg-ley b { font-family: var(--mono); font-size: 12.5px; color: var(--marfil); font-variant-numeric: tabular-nums; }

/* ================================================================
   GEO · PARA QUIÉN SIRVE Y PARA QUIÉN NO
   ================================================================ */
.pg-quien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.pg-q { padding: clamp(24px, 2.5vw, 32px) clamp(20px, 2.3vw, 28px); }
.pg-q-t { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--linea-suave); }
.pg-q-t b { font-family: var(--texto); font-weight: 500; font-size: clamp(18px, 1.7vw, 21px); letter-spacing: -.018em; color: var(--marfil); line-height: 1.25; }
.pg-q-mk { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.pg-q-mk svg { width: 12px; height: 12px; }
.pg-si .pg-q-mk { border: 1px solid rgba(198,161,91,.42); background: rgba(198,161,91,.12); color: var(--oro-luz); }
.pg-no .pg-q-mk { border: 1px solid rgba(217,140,122,.38); background: rgba(217,140,122,.10); color: #D98C7A; }
.pg-q ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 15px; }
.pg-q li {
  position: relative; padding-left: 22px; min-width: 0;
  font-size: 15px; line-height: 1.58; color: var(--texto-c); text-wrap: pretty;
}
.pg-q li::before { content: ''; position: absolute; left: 0; top: 12px; width: 10px; height: 1px; }
.pg-si li::before { background: var(--oro-luz); }
.pg-no li::before { background: #D98C7A; opacity: .8; }
.pg-q li b { color: var(--marfil); font-weight: 600; }
.pg-si { background: linear-gradient(150deg, rgba(198,161,91,.12), rgba(17,26,40,.80) 58%); border-color: var(--linea); }

/* ================================================================
   MOVIMIENTO DE LAS PIEZAS · sólo con .ag-js puesto
   ================================================================ */
.ag-js .ag-ticks i { opacity: 0; }
.ag-js .ag-on .ag-ticks i { animation: agTick .5s ease both; animation-delay: calc(var(--rd, 0s) + var(--i, 0) * 9ms); }
@keyframes agTick { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }

.ag-js .pg-apilada { clip-path: inset(0 100% 0 0); }
.ag-js .ag-on .pg-apilada { animation: agRevela 1.05s cubic-bezier(.22,1,.36,1) .2s both; }
.ag-js .pg-carril i { transform: scaleX(0); }
.ag-js .ag-on .pg-carril i { animation: agCarril .95s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, .2s); }
.ag-js .pg-carril b { opacity: 0; }
.ag-js .ag-on .pg-carril b { animation: agFade .6s ease both; animation-delay: calc(var(--d, .2s) + .5s); }
@keyframes agRevela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes agCarril { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes agFade { from { opacity: 0; } to { opacity: 1; } }

/* La bifurcación entra por opacidad, NO trazándose con stroke-dasharray.
   MEDIDO: con vector-effect:non-scaling-stroke el guion se mide en
   píxeles de pantalla mientras pathLength normaliza la longitud en
   unidades del viewBox. Las dos cuentas no coinciden, así que el
   trazo terminaba partido en pedazos y los tramos verticales no se
   dibujaban nunca: se veían dos arcos sueltos flotando. */
.ag-js .ag-fork { opacity: 0; }
.ag-js .ag-on .ag-fork { animation: agFade .8s ease .22s both; }

/* ================================================================
   RESPONSIVE · de 320 a 2560 sin desbordes
   ================================================================ */
@media (max-width: 1080px) {
  .ag-fuentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-guardas, .pg-instr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-ley { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ag-canales { grid-template-columns: minmax(0, 1fr); }
  .ag-cifras { grid-template-columns: minmax(0, 1fr); }
  .pg-piezas { grid-template-columns: minmax(0, 1fr); }
  .pg-quien { grid-template-columns: minmax(0, 1fr); }
  .pg-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
}

@media (max-width: 760px) {
  /* el riel se abre de pie: la bifurcación deja de ser un dibujo y
     pasa a ser dos placas apiladas, cada una con su propio empalme */
  .ag-fork { display: none; }
  .ag-ramas { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 18px; }
  .ag-rama::before {
    content: ''; position: absolute; left: 26px; top: -19px; width: 1px; height: 14px;
    background: linear-gradient(180deg, rgba(198,161,91,.1), rgba(198,161,91,.6));
  }
  .ag-rama-h::before { background: linear-gradient(180deg, rgba(232,206,150,.14), var(--oro-luz)); }
  .ag-guardas, .pg-instr, .pg-vs { grid-template-columns: minmax(0, 1fr); }
  .ag-msg { max-width: 90%; }
  .pg-pista { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .pg-escala { grid-template-columns: minmax(0, 1fr); }
  .pg-carril b { font-size: 9.5px; margin-left: 11px; }
}

@media (max-width: 560px) {
  .ag-fuentes { grid-template-columns: minmax(0, 1fr); }
  .pg-ley { grid-template-columns: minmax(0, 1fr); }
  .ag-entrada { gap: 10px; }
  .ag-entrada .ag-hora { display: none; }
  .pg-lec-top { gap: 12px; }
}

@media (max-width: 440px) {
  .ag-paso { grid-template-columns: 22px minmax(0, 1fr); column-gap: 11px; }
  .ag-paso::before { left: 10px; }
  .ag-rama::before { left: 20px; }
  .pg-datos { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .pg-dato { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: baseline; }
  .pg-dato .l { margin-top: 0; }
  .ag-ticks { gap: 2px; }
  .ag-ticks i { width: 2.5px; }
  .ag-msg { max-width: 96%; font-size: 14px; }
  .ag-verifica { font-size: 9.5px; letter-spacing: .1em; }
}

@media (min-width: 1600px) {
  .ag-cuerpo > p, .pg-pieza p { font-size: 16.5px; }
}

/* ================================================================
   QUIEN PREFIERE MENOS MOVIMIENTO, NO LO TIENE
   (el script ya evita poner .ag-js; esto es el cinturón)
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .ag-js .ag-rev, .ag-js .ag-rev.ag-on,
  .ag-js .ag-ticks i, .ag-js .pg-carril b {
    opacity: 1 !important; translate: none !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
  .ag-js .pg-apilada { clip-path: none !important; animation: none !important; }
  .ag-js .pg-carril i { transform: none !important; animation: none !important; }
  .ag-js .ag-fork { opacity: 1 !important; animation: none !important; }
  .ag-canal:hover, .pg-pieza:hover { transform: none; }
}