/* leygo.cl
   Idea: la página es un mapa de rutas. El logo (anillo, nodos, línea punteada) es el alfabeto:
   línea continua = cableado fijo, punteada índigo = una delegación en curso, amarillo = tú.
   Tipografía: Overpass, derivada de la señalética vial (Highway Gothic). */

@font-face { font-family: 'Overpass'; src: url('fonts/overpass-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Overpass'; src: url('fonts/overpass-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Overpass Mono'; src: url('fonts/overpass-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Overpass Mono'; src: url('fonts/overpass-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --papel: #F2F3F9;
  --papel-2: #E7E9F4;
  --carta: #FFFFFF;
  --tinta: #1A1840;
  --tinta-2: #4B4970;
  --tinta-3: #7C7AA0;
  --leygo: #5552E8;
  --leygo-suave: rgba(85, 82, 232, .12);
  --marcador: #FFD23F;
  --linea: #D3D5E6;
  --noche: #17153A;
  --noche-2: #221F4D;
  --noche-tinta: #ECEBFA;
  --noche-tinta-2: #B3B1D6;
  --noche-leygo: #A9A7FF;
  --sombra: 0 1px 0 rgba(26, 24, 64, .06), 0 28px 60px -30px rgba(26, 24, 64, .35);

  --f: 'Overpass', system-ui, sans-serif;
  --f-mono: 'Overpass Mono', ui-monospace, monospace;
  --ancho: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #121130;
    --papel-2: #1A1942;
    --carta: #201F4C;
    --tinta: #ECEBFA;
    --tinta-2: #B3B1D6;
    --tinta-3: #8583AE;
    --leygo: #8F8DFF;
    --leygo-suave: rgba(143, 141, 255, .16);
    --linea: #2E2C5E;
    --noche: #0B0A22;
    --noche-2: #17163A;
    --sombra: 0 1px 0 rgba(0, 0, 0, .2), 0 28px 60px -30px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --papel: #121130;
    --papel-2: #1A1942;
    --carta: #201F4C;
    --tinta: #ECEBFA;
    --tinta-2: #B3B1D6;
    --tinta-3: #8583AE;
    --leygo: #8F8DFF;
    --leygo-suave: rgba(143, 141, 255, .16);
    --linea: #2E2C5E;
    --noche: #0B0A22;
    --noche-2: #17163A;
    --sombra: 0 1px 0 rgba(0, 0, 0, .2), 0 28px 60px -30px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
code { font-family: var(--f-mono); font-size: .88em; }
:focus-visible { outline: 3px solid var(--leygo); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--marcador); color: #1A1840; }

.saltar { position: absolute; left: 16px; top: -60px; background: var(--tinta); color: var(--papel); padding: 10px 14px; border-radius: 8px; z-index: 10; }
.saltar:focus { top: 12px; }

/* ─── Marca ─────────────────────────────────────────────── */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo { width: 34px; height: 34px; overflow: visible; }
.logo .l-anillo { fill: none; stroke: var(--tinta); stroke-width: 9; }
.logo .l-vertical, .logo .l-horizontal { stroke: var(--tinta); stroke-width: 11; }
.logo .l-ruta { stroke: var(--leygo); stroke-width: 11; stroke-dasharray: 9 9; }
.logo .l-nodo { fill: var(--tinta); }
.logo .l-nodo-acento { fill: var(--leygo); }
.marca-texto { font-weight: 900; font-size: 30px; letter-spacing: -.035em; line-height: 1; padding-top: 4px; }
.marca-texto::after { content: '.'; color: var(--leygo); }

/* ─── Cabecera ──────────────────────────────────────────── */
.cabecera-fija {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papel) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.cabecera-fija.con-borde { border-bottom-color: var(--linea); }
.cabecera {
  max-width: calc(var(--ancho) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav { display: flex; align-items: center; gap: 28px; font-size: 16px; font-weight: 600; }
.nav a { text-decoration: none; color: var(--tinta-2); }
.nav a:hover, .nav a.activo { color: var(--tinta); }
.nav a.activo:not(.nav-github) { text-decoration: underline; text-decoration-color: var(--leygo); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.tema { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--tinta); cursor: pointer; display: grid; place-items: center; margin: 0 -8px 0 -4px; }
.tema:hover { background: var(--leygo-suave); }
.tema svg { width: 22px; height: 22px; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.t-anillo { fill: none; stroke: currentColor; stroke-width: 2.4; }
.t-mitad { fill: currentColor; }
:root[data-theme="dark"] .tema svg { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tema svg { transform: rotate(180deg); } }
.nav-github { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta) !important; border: 2px solid var(--tinta); padding: 7px 14px 5px; border-radius: 10px; }
.nav-github svg { width: 17px; height: 17px; margin-top: -2px; }
.nav-github:hover { background: var(--tinta); color: var(--papel) !important; }
@media (max-width: 720px) { .nav a:not(.nav-github) { display: none; } }

/* ─── Botones ───────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 17px/1 var(--f); padding: 16px 22px 13px; border-radius: 12px; text-decoration: none;
  border: 2px solid var(--tinta); transition: background-color .15s, color .15s;
}
.boton-primario { background: var(--tinta); color: var(--papel); }
.boton-primario:hover { background: var(--leygo); border-color: var(--leygo); color: #fff; }
.boton-secundario { color: var(--tinta); }
.boton-secundario:hover { background: var(--tinta); color: var(--papel); }

/* ─── Portada ───────────────────────────────────────────── */
.portada { max-width: calc(var(--ancho) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(20px, 4vw, 48px) var(--gutter) 0; }
.portada-texto { display: grid; gap: clamp(24px, 3vw, 40px); }
.titulo {
  font-size: clamp(42px, 6.4vw, 92px);
  line-height: .96;
  font-weight: 800;
  letter-spacing: -.035em;
}
.titulo .linea { display: block; text-wrap: balance; overflow: hidden; padding-bottom: .06em; }
.titulo .linea > span { display: block; }
.portada-lado { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: end; }
.bajada { font-size: 19px; line-height: 1.6; color: var(--tinta-2); max-width: 52ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) {
  .portada-lado { grid-template-columns: 1fr; }
}

/* ─── Demo ──────────────────────────────────────────────── */
.demo {
  margin-top: clamp(32px, 4vw, 56px);
  background:
    radial-gradient(circle at 1px 1px, var(--linea) 1.2px, transparent 1.4px) 0 0 / 22px 22px,
    var(--papel-2);
  border-radius: 24px;
  padding: 18px;
}
.demo-barra { display: flex; align-items: center; gap: 12px; }
.escenas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; padding: 2px; }
.escenas::-webkit-scrollbar { display: none; }
.escena {
  position: relative; flex-shrink: 0;
  font: 600 15px/1 var(--f); color: var(--tinta-2);
  background: transparent; border: 0; border-radius: 9px;
  padding: 11px 14px 9px; cursor: pointer; overflow: hidden;
}
.escena:hover { color: var(--tinta); background: var(--leygo-suave); }
.escena[aria-selected="true"] { background: var(--tinta); color: var(--papel); }
.escena::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--marcador); transform-origin: left; transform: scaleX(var(--avance, 0));
}
.escena[aria-selected="false"]::after { display: none; }
.pausa { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--tinta); background: var(--papel); color: var(--tinta); cursor: pointer; display: grid; place-items: center; }
.pausa[hidden] { display: none; }
.pausa svg { width: 18px; height: 18px; fill: currentColor; }
.pausa .i-play { display: none; }
.pausa[aria-pressed="true"] .i-play { display: block; }
.pausa[aria-pressed="true"] .i-pausa { display: none; }
.pausa:hover { background: var(--tinta); color: var(--papel); }

.demo-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 18px; margin-top: 16px; }

/* Mapa de rutas */
.mapa {
  position: relative; min-height: 440px;
  display: grid; grid-template-columns: .9fr .75fr 1fr .55fr; align-items: center;
  padding: 28px 10px;
}
.mapa-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.columna { position: relative; display: flex; flex-direction: column; gap: 30px; z-index: 1; }
.columna-titulo { position: absolute; top: -30px; font-size: 13px; font-weight: 700; color: var(--tinta-3); }
.col-canales { align-items: flex-end; }
.col-canales .columna-titulo { right: 0; }
.col-coord, .col-tu { align-items: center; }
.col-agentes { align-items: flex-start; }

.nodo { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--tinta-2); transition: color .25s; }
.nodo i { flex-shrink: 0; display: block; border-radius: 50%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s; }
.nodo-canal { flex-direction: row-reverse; }
.nodo-canal i { width: 16px; height: 16px; background: var(--tinta); }
.nodo-agente i { width: 18px; height: 18px; background: var(--leygo); }
.nodo-coord { flex-direction: column; gap: 10px; font-weight: 700; }
.nodo-coord i { width: 64px; height: 64px; border: 7px solid var(--tinta); background: var(--papel); }
.nodo-tu { flex-direction: column; gap: 10px; }
.nodo-tu i { width: 26px; height: 26px; background: var(--marcador); border: 3px solid var(--tinta); }
.nodo.activo { color: var(--tinta); }
.nodo.activo i { transform: scale(1.3); box-shadow: 0 0 0 7px var(--leygo-suave); }
.nodo-coord.activo i { transform: scale(1.08); }
.nodo-tu.activo i { box-shadow: 0 0 0 8px rgba(255, 210, 63, .35); }

.cable { fill: none; stroke: var(--linea); stroke-width: 2; transition: stroke .3s; }
.cable.activo { stroke: var(--tinta); stroke-width: 2.5; }
.ruta { fill: none; stroke: var(--leygo); stroke-width: 3.5; stroke-dasharray: 8 8; opacity: 0; transition: opacity .3s; animation: marchar 1s linear infinite; }
.ruta.activo { opacity: 1; }
@keyframes marchar { to { stroke-dashoffset: -16; } }
.paquete { fill: var(--leygo); stroke: var(--papel-2); stroke-width: 3; }
.paquete.tuyo { fill: var(--marcador); stroke: var(--tinta); stroke-width: 2.5; }

/* Relato de la escena */
.relato { background: var(--carta); border-radius: 18px; padding: 18px; box-shadow: var(--sombra); display: flex; flex-direction: column; min-height: 440px; }
.relato-canal { font-size: 14px; font-weight: 700; color: var(--tinta-3); padding-bottom: 12px; border-bottom: 1px solid var(--linea); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.relato-canal i { width: 10px; height: 10px; border-radius: 50%; background: var(--tinta); }
.relato-lista { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.relato-lista > li { animation: entrar .35s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
.r-msg { max-width: 92%; padding: 11px 14px 9px; border-radius: 16px; font-size: 15.5px; line-height: 1.5; }
.r-msg.de-tu { align-self: flex-end; background: var(--tinta); color: var(--papel); border-bottom-right-radius: 5px; }
.r-msg.de-leygo { align-self: flex-start; background: var(--papel-2); border-bottom-left-radius: 5px; }
.r-msg.de-fuera { align-self: flex-start; background: transparent; border: 2px dashed var(--linea); font-family: var(--f-mono); font-size: 13.5px; }
.r-msg .quien { display: block; font-size: 12.5px; font-weight: 700; opacity: .7; margin-bottom: 2px; }
.r-paso { font-size: 13.5px; color: var(--tinta-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0 2px; }
.r-paso b { color: var(--tinta); font-weight: 700; }
.r-paso svg { width: 26px; height: 8px; flex-shrink: 0; }
.r-paso svg line { stroke: var(--leygo); stroke-width: 3; stroke-dasharray: 4 3; }
.r-ok { align-self: stretch; border: 2px solid var(--tinta); border-radius: 14px; padding: 12px 14px; background: var(--carta); }
.r-ok p { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.r-ok .fila { display: flex; gap: 8px; align-items: center; }
.r-ok button { font: 700 14px/1 var(--f); padding: 9px 12px 7px; border-radius: 9px; border: 2px solid var(--tinta); background: var(--carta); color: var(--tinta); cursor: pointer; }
.r-ok button.si { background: var(--tinta); color: var(--papel); position: relative; overflow: hidden; }
.r-ok button.si::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--marcador); transform-origin: left; transform: scaleX(var(--espera, 0)); }
.r-ok small { font-size: 12.5px; color: var(--tinta-3); margin-left: auto; }
.r-ok.resuelto { border-color: var(--linea); }
.r-ok.resuelto .fila { display: none; }

@media (max-width: 900px) {
  .demo { padding: 12px; border-radius: 18px; }
  .demo-cuerpo { grid-template-columns: 1fr; }
  .relato { min-height: 300px; }
}
@media (max-width: 640px) {
  .mapa { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 34px; min-height: 0; padding: 30px 0 14px; }
  .columna { flex-direction: row; justify-content: space-between; gap: 4px; }
  .columna-titulo { display: none; }
  .col-coord, .col-tu { justify-content: center; }
  .nodo { font-size: 12.5px; text-align: center; line-height: 1.3; }
  .nodo-canal, .nodo-agente { gap: 8px; flex: 1; min-width: 0; }
  .nodo-canal { flex-direction: column-reverse; }
  .nodo-agente { flex-direction: column; }
  .nodo-coord i { width: 52px; height: 52px; border-width: 6px; }
  .nodo-tu { flex-direction: row; }
}

/* ─── Secciones ─────────────────────────────────────────── */
.seccion { max-width: calc(var(--ancho) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(80px, 11vw, 150px) var(--gutter) 0; }
.seccion h2, .instalar h2 { text-wrap: balance; font-size: clamp(34px, 4.6vw, 62px); line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.seccion-cabeza { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 56px; }
.seccion-cabeza p { color: var(--tinta-2); max-width: 44ch; font-size: 19px; }
@media (max-width: 800px) { .seccion-cabeza { grid-template-columns: 1fr; } }

.capacidades { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; }
.capacidades h3 { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: 16px 0 8px; }
.capacidades p { color: var(--tinta-2); font-size: 17px; max-width: 38ch; }
.glifo { width: 48px; height: 48px; }
.g-linea { fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-ruta { fill: none; stroke: var(--leygo); stroke-width: 3; stroke-dasharray: 4 4; }
.g-lleno { fill: var(--tinta); }
.g-acento { fill: var(--leygo); }
@media (max-width: 960px) { .capacidades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .capacidades { grid-template-columns: 1fr; gap: 40px; } }

/* Qué hace: piezas reales */
.piezas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 72px); }
.pieza { display: flex; flex-direction: column; gap: 20px; }
.pieza h3 { font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; margin-bottom: 6px; }
.pieza-texto p { color: var(--tinta-2); font-size: 17px; max-width: 46ch; }
.muestra { background: var(--carta); border-radius: 18px; padding: 18px 20px; box-shadow: var(--sombra); font-size: 15.5px; line-height: 1.5; flex: 1; }
.muestra-mensaje { border-bottom-left-radius: 6px; }
.mm-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.mm-cab small { color: var(--tinta-3); margin-left: auto; }
.mm-avatar { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--tinta); }
.muestra-mensaje p { margin-top: 8px; color: var(--tinta-2); }
.muestra-mensaje p b { color: var(--tinta); }
.muestra-mensaje ul { list-style: none; margin: 6px 0 2px; display: grid; gap: 4px; }
.muestra-mensaje li { display: flex; gap: 10px; flex-wrap: wrap; }
.muestra-mensaje time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; }
.muestra-mensaje em { font-style: normal; font-size: 13px; background: rgba(255, 210, 63, .35); padding: 0 6px; border-radius: 5px; color: var(--tinta); }
.ml-fila { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.ml-quien { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.ml-quien.tuyo { color: var(--leygo); }
.ml-cuando { font-size: 13.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ml-fila.vencido .ml-cuando { color: #D8413B; font-weight: 700; }
.ml-propuesta { margin-top: 14px; background: var(--papel); border-radius: 12px; padding: 12px 14px; }
.ml-propuesta p { color: var(--tinta-2); font-size: 14.5px; }
.ml-propuesta b { color: var(--tinta); }
.ml-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.mini-boton { font-size: 13px; font-weight: 700; padding: 6px 10px 4px; border-radius: 8px; border: 2px solid var(--tinta); }
.mini-boton.si { background: var(--tinta); color: var(--papel); }
.mr-fila { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-3); }
.mr-fila:last-child { border-bottom: 0; }
.mr-origen { font-size: 13px; font-weight: 700; }
.mr-decision { font-size: 13px; }
.mr-fila.aviso { color: var(--tinta); }
.mr-fila.aviso .mr-decision { background: var(--marcador); color: #1A1840; font-weight: 700; padding: 2px 8px 0; border-radius: 6px; }
.muestra-rutina { display: flex; flex-direction: column; gap: 14px; }
.mr-tu { align-self: flex-end; max-width: 88%; background: var(--tinta); color: var(--papel); padding: 10px 14px 8px; border-radius: 16px 16px 5px 16px; }
.mr-tarea { border: 2px dashed var(--leygo); border-radius: 14px; padding: 12px 14px; max-width: 88%; }
.mr-tarea b { display: block; margin-bottom: 6px; }
.mr-tarea dl { display: grid; gap: 3px; font-size: 14.5px; }
.mr-tarea dl div { display: grid; grid-template-columns: 76px 1fr; }
.mr-tarea dt { color: var(--tinta-3); }
@media (max-width: 860px) { .piezas { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ml-fila { grid-template-columns: minmax(0, 1fr) auto; } .ml-quien { grid-column: 1 / -1; } .mr-fila { grid-template-columns: minmax(0, 1fr) auto; } .mr-origen { grid-column: 1 / -1; } }

/* Interfaz */
.vistas { display: flex; flex-wrap: wrap; gap: 6px; }
.vista { font: 600 16px/1 var(--f); color: var(--tinta-2); background: transparent; border: 2px solid var(--linea); border-radius: 10px; padding: 11px 16px 9px; cursor: pointer; }
.vista:hover { border-color: var(--tinta); color: var(--tinta); }
.vista[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.vista-nota { color: var(--tinta-2); font-size: 16px; margin: 14px 0 22px; min-height: 1.6em; max-width: 70ch; }
.marco { border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); border: 1px solid var(--linea); background: var(--carta); }
.marco-barra { display: flex; align-items: center; justify-content: center; padding: 10px 14px; background: var(--papel-2); border-bottom: 1px solid var(--linea); }
.marco-url { font-size: 13.5px; color: var(--tinta-2); background: var(--carta); padding: 4px 16px 2px; border-radius: 999px; }
.marco-url::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2BB673; margin-right: 8px; vertical-align: 1px; }
.marco-pantalla { position: relative; aspect-ratio: 16 / 10; background: var(--papel-2); }
.marco-pantalla img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .3s; }
.marco-pantalla img.cambiando { opacity: 0; }
.solo-oscuro { display: none; }
:root[data-theme="dark"] .solo-oscuro { display: block; }
:root[data-theme="dark"] .solo-claro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .solo-oscuro { display: block; }
  :root:not([data-theme="light"]) .solo-claro { display: none; }
}

/* Portada: hecho con */
.hecho-con { grid-column: 1 / -1; font-size: 15px; color: var(--tinta-2); margin-top: -6px; }
.hecho-con a { color: var(--tinta); font-weight: 700; text-decoration: none; border-bottom: 2px dashed var(--leygo); }
.hecho-con a:hover { color: var(--leygo); }
@media (min-width: 901px) { .hecho-con { text-align: right; } }

/* ADK + A2A */
.seccion-a2a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.seccion-a2a > * { min-width: 0; }
.a2a-texto h2 { margin-bottom: 26px; }
.a2a-texto p { color: var(--tinta-2); max-width: 54ch; margin-top: 14px; }
.a2a-texto a { color: var(--tinta); text-underline-offset: 3px; text-decoration-color: var(--leygo); }
.a2a-texto code { background: var(--papel-2); padding: 1px 6px; border-radius: 5px; color: var(--tinta); }
.a2a-pasos { list-style: none; counter-reset: a2a; display: grid; gap: 16px; margin: 28px 0 8px; }
.a2a-pasos li { counter-increment: a2a; position: relative; padding-left: 48px; color: var(--tinta-2); max-width: 54ch; }
.a2a-pasos li::before { content: counter(a2a); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--tinta); display: grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--tinta); padding-top: 2px; }
.a2a-pasos b { color: var(--tinta); }
.a2a-extra { font-size: 16px; }
.a2a-codigo figcaption { font-size: 14px; color: var(--tinta-3); margin-bottom: 10px; }
.a2a-codigo .terminal { background: var(--noche); color: var(--noche-tinta); max-width: none; box-shadow: var(--sombra); }
.a2a-codigo .copiar { color: var(--noche-tinta); }
.a2a-respuesta { margin-top: 14px; background: var(--carta); border-radius: 16px 16px 16px 5px; padding: 14px 16px; box-shadow: var(--sombra); max-width: 88%; }
.a2a-respuesta span { font-size: 13px; font-weight: 700; color: var(--tinta-3); }
.a2a-respuesta p { margin-top: 2px; font-size: 16px; }
@media (max-width: 900px) { .seccion-a2a { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .a2a-codigo .terminal { padding-top: 48px; padding-right: 18px; } .a2a-codigo .terminal pre { font-size: 13px; } .a2a-respuesta { max-width: 100%; } }

/* Local + túnel */
.tunel { background: radial-gradient(circle at 1px 1px, var(--linea) 1.2px, transparent 1.4px) 0 0 / 22px 22px, var(--papel-2); border-radius: 24px; padding: 18px; }
.tunel-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1 var(--f); color: var(--tinta); background: var(--carta); border: 2px solid var(--tinta); border-radius: 999px; padding: 6px 14px 6px 6px; cursor: pointer; }
.int-pista { width: 42px; height: 24px; border-radius: 999px; background: var(--linea); position: relative; transition: background-color .25s; }
.int-bola { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--tinta); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.interruptor[aria-pressed="true"] .int-pista { background: var(--leygo); }
.interruptor[aria-pressed="true"] .int-bola { transform: translateX(18px); background: #fff; }
.int-texto { padding-top: 2px; }
.proveedor-tunel { display: inline-flex; background: var(--carta); border-radius: 10px; padding: 3px; border: 1px solid var(--linea); }
.proveedor-tunel button { font: 600 14px/1 var(--f-mono); border: 0; background: transparent; color: var(--tinta-2); padding: 8px 12px 6px; border-radius: 7px; cursor: pointer; }
.proveedor-tunel button[aria-checked="true"] { background: var(--tinta); color: var(--papel); }
.tun-repetir { margin-left: auto; font: 600 14px/1 var(--f); background: none; border: 0; color: var(--tinta-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }
.tun-repetir:hover { color: var(--tinta); }

.tun-escenario { position: relative; display: grid; grid-template-columns: 1.1fr 1fr .9fr; grid-template-rows: auto auto auto; gap: 26px 20px; align-items: center; padding: 26px 8px 18px; min-height: 360px; }
.tun-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.tun-caja { grid-column: 1; grid-row: 1 / 4; align-self: stretch; position: relative; border: 2.5px dashed var(--tinta-3); border-radius: 20px; display: grid; place-items: center; padding: 40px 18px; background: color-mix(in srgb, var(--papel) 55%, transparent); }
.tun-caja-titulo { position: absolute; top: 12px; left: 16px; font-size: 13px; font-weight: 700; color: var(--tinta-3); }
.tnodo { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--tinta); }
.tnodo small { display: block; font-size: 12.5px; font-weight: 500; color: var(--tinta-3); }
.tnodo i { display: block; flex-shrink: 0; border-radius: 50%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s, opacity .3s; }
.tn-leygo { flex-direction: column; text-align: center; gap: 8px; }
.tn-leygo i { width: 58px; height: 58px; border: 7px solid var(--tinta); background: var(--papel); }
.tn-servicios { grid-column: 2; grid-row: 1; }
.tn-servicios i { width: 16px; height: 16px; background: var(--tinta); box-shadow: 10px 0 0 -2px var(--tinta-3), 20px 0 0 -4px var(--linea); margin-right: 16px; }
.tn-borde { grid-column: 2; grid-row: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; }
.tn-borde i { width: 22px; height: 22px; border: 3px dashed var(--tinta-3); background: transparent; }
.tn-borde-nombre { font-family: var(--f-mono); font-weight: 600; font-size: 14.5px; color: var(--tinta-3); transition: color .3s; }
.tn-url { grid-column: 1 / -1; justify-self: start; font-family: var(--f-mono); font-size: 12.5px; font-weight: 400; color: var(--tinta); background: var(--marcador); padding: 3px 8px 1px; border-radius: 6px; width: max-content; max-width: 100%; overflow-wrap: anywhere; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; color: #1A1840; }
.tn-otro { grid-column: 3; grid-row: 2; justify-self: end; flex-direction: row-reverse; text-align: right; }
.tn-otro i { width: 20px; height: 20px; background: var(--leygo); }
.tnodo.activo i { transform: scale(1.25); box-shadow: 0 0 0 8px var(--leygo-suave); }
.tn-leygo.activo i { transform: scale(1.06); }
.tunel.abierto .tn-borde i { border-style: solid; border-color: var(--leygo); background: var(--leygo); }
.tunel.abierto .tn-borde-nombre { color: var(--tinta); }
.tunel.abierto .tn-url { opacity: 1; transform: none; }
.t-cable { fill: none; stroke: var(--linea); stroke-width: 2.5; }
.t-cable.activo { stroke: var(--tinta); }
.t-tubo { fill: none; stroke: var(--leygo); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 10 8; opacity: 0; transition: opacity .3s; animation: marchar 1s linear infinite; }
.tunel.abierto .t-tubo { opacity: 1; }
.t-muro { fill: none; stroke: var(--tinta-3); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .7; }
.t-paquete { fill: var(--leygo); stroke: var(--papel-2); stroke-width: 3; }
.t-paquete.rebote { fill: #D8413B; }
.tun-bloqueo { position: absolute; z-index: 3; transform: translate(-50%, -150%); font-size: 13px; font-weight: 700; color: #fff; background: #D8413B; padding: 5px 10px 3px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity .25s; pointer-events: none; }
.tun-bloqueo.visible { opacity: 1; }
.tun-bloqueo::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); z-index: -1; }
.tun-nota { margin: 6px 4px 2px; font-size: 16.5px; color: var(--tinta); min-height: 3.2em; max-width: 70ch; }
@media (max-width: 760px) {
  .tun-escenario { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 30px 14px; min-height: 0; padding-top: 18px; }
  .tn-leygo { flex-direction: row; text-align: left; }
  .tn-url { font-size: 11px; }
  .tunel { padding: 12px; }
  .tn-servicios { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .tun-caja { grid-column: 1 / -1; grid-row: 2; padding: 38px 12px 22px; }
  .tn-borde { grid-column: 2; grid-row: 3; }
  .tn-otro { grid-column: 1; grid-row: 3; justify-self: start; flex-direction: column; align-items: flex-start; text-align: left; }
  .tnodo { font-size: 14px; }
  .tun-repetir { margin-left: 0; }
}

.local-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 56px; margin: 56px 0 8px; }
.local-lista h3 { font-size: 21px; font-weight: 700; margin-bottom: 14px; }
.local-lista ul { list-style: none; display: grid; gap: 10px; }
.local-lista li { position: relative; padding-left: 32px; color: var(--tinta-2); font-size: 17px; }
.local-lista li::before { content: ''; position: absolute; left: 2px; top: .38em; width: 16px; height: 16px; border-radius: 50%; }
.local-lista .si li::before { background: var(--tinta); }
.local-lista .no li::before { border: 3px solid var(--leygo); background: var(--papel); box-shadow: inset 0 0 0 3px var(--papel), inset 0 0 0 8px var(--leygo); }
.local-lista code { background: var(--papel-2); padding: 1px 6px; border-radius: 5px; color: var(--tinta); }
@media (max-width: 760px) { .local-columnas { grid-template-columns: 1fr; } }
.pasos-local { list-style: none; counter-reset: pl; display: grid; gap: 36px; margin-top: 48px; }
.pasos-local > li { counter-increment: pl; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; min-width: 0; }
.pasos-local > li > * { min-width: 0; grid-column: 2; }
.pasos-local > li::before { content: counter(pl); grid-column: 1; grid-row: 1 / span 4; font-size: 44px; line-height: .95; font-weight: 800; color: var(--leygo); letter-spacing: -.04em; }
.pasos-local h3 { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.pasos-local p { color: var(--tinta-2); font-size: 17px; max-width: 64ch; margin-bottom: 12px; }
.pasos-local code { background: var(--papel-2); padding: 1px 6px; border-radius: 5px; color: var(--tinta); }
.pasos-local .terminal { background: var(--noche); color: var(--noche-tinta); }
.pasos-local .terminal code { background: none; padding: 0; color: inherit; }
.pasos-local .copiar { color: var(--noche-tinta); }
.pasos-local .terminal.opciones { padding-right: 18px; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 22px; row-gap: 4px; font-family: var(--f-mono); font-size: 14.5px; line-height: 1.7; }
.pasos-local .opciones .op { display: contents; }
.pasos-local .opciones code { white-space: nowrap; }
.pasos-local .terminal .com { color: var(--noche-tinta); opacity: .55; }
.pasos-local .opciones .com { white-space: nowrap; }
.pasos-local .paso-nota { margin-top: 12px; font-size: 15.5px; }
.pasos-local .paso-sig { margin: 16px 0 10px; }
.pasos-local .aviso-seguridad { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: rgba(216, 65, 59, .09); border-left: 4px solid #D8413B; color: var(--tinta); font-size: 16px; }
.local-avisos { margin-top: 44px; padding: 16px 18px; border-left: 4px solid var(--marcador); background: var(--papel-2); border-radius: 0 12px 12px 0; color: var(--tinta-2); font-size: 16.5px; max-width: 80ch; }
@media (max-width: 800px) { .pasos-local > li { grid-template-columns: minmax(0, 1fr); } .pasos-local > li > *, .pasos-local > li::before { grid-column: 1; } .pasos-local > li::before { grid-row: auto; font-size: 36px; margin-bottom: 6px; } .pasos-local .terminal { padding-top: 48px; padding-right: 18px; } }

/* Modelos: asignación */
.asignacion { margin-top: 40px; max-width: 860px; border-top: 2px solid var(--tinta); }
.as-fila { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; padding: 13px 0 11px; border-bottom: 1px solid var(--linea); font-size: 17px; }
.as-fila span:first-child { font-weight: 700; }
.as-fila span:last-child { color: var(--tinta-2); }
.as-cab { font-size: 14px; color: var(--tinta-3); }
.as-cab span:first-child { font-weight: 400; }
@media (max-width: 640px) { .as-fila { grid-template-columns: 1fr 1fr; } .as-fila span:first-child { grid-column: 1 / -1; } .as-cab { display: none; } }

/* Tu OK */
.seccion-ok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; }
.ok-texto h2 { margin-bottom: 24px; }
.ok-texto p { color: var(--tinta-2); max-width: 50ch; margin-top: 14px; }
.tarjeta-ok { background: var(--carta); border-radius: 20px; padding: 22px; box-shadow: var(--sombra); border: 1px solid var(--linea); transition: border-color .3s; }
.tarjeta-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.tarjeta-logo { width: 40px; height: 40px; padding: 7px; border-radius: 12px; background: var(--papel-2); overflow: visible; }
.tl-anillo { fill: none; stroke: var(--tinta); stroke-width: 12; }
.tl-linea { stroke: var(--tinta); stroke-width: 13; }
.tl-ruta { stroke: var(--leygo); stroke-width: 13; stroke-dasharray: 10 10; }
.tl-nodo { fill: var(--tinta); }
.tl-acento { fill: var(--leygo); }
.tarjeta-cab b { display: block; font-size: 16px; line-height: 1.2; }
.tarjeta-cab small { font-size: 14px; color: var(--tinta-2); }
.tarjeta-datos { display: grid; gap: 6px; font-size: 15px; margin-bottom: 12px; }
.tarjeta-datos div { display: grid; grid-template-columns: 64px 1fr; }
.tarjeta-datos dt { color: var(--tinta-3); }
.tarjeta-datos dd { font-weight: 600; overflow-wrap: anywhere; }
.tarjeta-cuerpo { font-size: 15.5px; line-height: 1.55; padding: 12px 14px; background: var(--papel); border-radius: 12px; color: var(--tinta-2); }
.tarjeta-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.boton-tarjeta { font: 700 16px/1 var(--f); padding: 14px 12px 12px; border-radius: 11px; border: 2px solid var(--tinta); cursor: pointer; background: var(--carta); color: var(--tinta); }
.boton-tarjeta.si { background: var(--tinta); color: var(--papel); }
.boton-tarjeta.si:hover { background: var(--leygo); border-color: var(--leygo); color: #fff; }
.boton-tarjeta.no:hover { background: var(--papel-2); }
.tarjeta-resultado { display: none; margin-top: 16px; font-weight: 600; font-size: 16px; align-items: center; gap: 10px; }
.tarjeta-resultado svg { width: 26px; height: 26px; flex-shrink: 0; }
.tarjeta-resultado .check { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazar .45s .1s ease-out forwards; }
.tarjeta-resultado button { margin-left: auto; font: 600 14px/1 var(--f); background: none; border: 0; color: var(--leygo); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.tarjeta-ok:not([data-estado="esperando"]) .tarjeta-acciones { display: none; }
.tarjeta-ok:not([data-estado="esperando"]) .tarjeta-resultado { display: flex; }
.tarjeta-ok[data-estado="si"] { border-color: var(--leygo); }
.tarjeta-ok[data-estado="si"] .tarjeta-resultado { color: var(--leygo); }
.tarjeta-ok[data-estado="no"] .tarjeta-resultado { color: var(--tinta-2); }
.tarjeta-ok[data-estado="no"] .tarjeta-cuerpo { text-decoration: line-through; text-decoration-color: var(--tinta-3); }
@media (max-width: 900px) { .seccion-ok { grid-template-columns: 1fr; } }

/* Agentes nuevos */
.seccion-agentes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.agentes-texto h2 { margin-bottom: 28px; }
.pedido { font-size: clamp(21px, 2.2vw, 25px); line-height: 1.5; font-weight: 400; font-style: italic; margin-bottom: 28px; }
.pedido::before { content: 'Tú: '; font-style: normal; font-weight: 800; }
.pedido { background: linear-gradient(transparent 58%, rgba(255, 210, 63, .55) 58%, rgba(255, 210, 63, .55) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; }
.puntos { list-style: none; display: grid; gap: 14px; margin-top: 30px; }
.puntos li { padding-left: 30px; position: relative; color: var(--tinta-2); font-size: 17px; }
.puntos li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--leygo); }
.puntos b { color: var(--tinta); }
.manifiesto { background: var(--noche); color: var(--noche-tinta); border-radius: 20px; padding: 18px 20px 22px; box-shadow: var(--sombra); min-height: 470px; }
.manifiesto figcaption { font-family: var(--f-mono); font-size: 13px; color: var(--noche-tinta-2); padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 14px; }
.manifiesto pre { font-family: var(--f-mono); font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.manifiesto .k { color: var(--noche-leygo); }
.manifiesto .s { color: #FFE38A; }
.manifiesto .n { color: #8FE3C4; }
.manifiesto .p { color: #7E7CA8; }
.cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--marcador); animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
@media (max-width: 900px) { .seccion-agentes { grid-template-columns: 1fr; } .manifiesto { min-height: 0; } }

/* Modelos */
.seccion-modelos h2 { margin-bottom: 30px; }
.proveedores { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px 24px; margin-top: 8px; }
.proveedores li { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
.prov-logo { width: 34px; height: 34px; flex-shrink: 0; fill: currentColor; transition: color .2s, transform .25s; }
.proveedores li:hover .prov-logo { color: var(--leygo); transform: scale(1.08); }
.proveedores-nota { margin-top: 26px; color: var(--tinta-2); font-size: 16px; }
@media (max-width: 960px) { .proveedores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .proveedores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .proveedores li { font-size: 18px; } .prov-logo { width: 28px; height: 28px; } }
.modelos-detalle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 48px; }
.modelos-detalle p { color: var(--tinta-2); font-size: 17px; }
.modelos-detalle b { display: block; color: var(--tinta); font-size: 19px; margin-bottom: 4px; }
@media (max-width: 800px) { .modelos-detalle { grid-template-columns: 1fr; } }

/* Instalar */
.instalar { margin-top: clamp(90px, 12vw, 160px); background: var(--noche); color: var(--noche-tinta); }
.instalar-dentro { max-width: calc(var(--ancho) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter); }
.instalar-cabeza { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 56px; }
.instalar-cabeza p { color: var(--noche-tinta-2); font-size: 19px; max-width: 46ch; }
.pasos { list-style: none; counter-reset: paso; display: grid; gap: 44px; }
.pasos > li { counter-increment: paso; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; min-width: 0; }
.pasos > li > * { min-width: 0; }
.pasos > li::before { content: counter(paso); grid-row: span 3; font-size: 56px; line-height: .9; font-weight: 800; color: var(--noche-leygo); letter-spacing: -.04em; }
.pasos h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.pasos p { color: var(--noche-tinta-2); font-size: 17px; max-width: 64ch; margin-bottom: 14px; }
.pasos p code { color: var(--noche-tinta); background: var(--noche-2); padding: 2px 6px; border-radius: 5px; }
.terminal { position: relative; max-width: 100%; background: var(--noche-2); border-radius: 14px; padding: 16px 92px 16px 18px; max-width: 760px; }
.terminal pre { font-family: var(--f-mono); font-size: 14.5px; line-height: 1.7; overflow-x: auto; }
.terminal code { font-size: inherit; }
.terminal code::before { content: ''; }
.copiar { position: absolute; top: 12px; right: 12px; font: 600 13px/1 var(--f); padding: 8px 10px 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: var(--noche-tinta); cursor: pointer; }
.copiar:hover { background: rgba(255, 255, 255, .08); }
.copiar.listo { border-color: var(--marcador); color: var(--marcador); }
.instalar-pie { margin-top: 56px; color: var(--noche-tinta-2); font-size: 17px; }
.instalar-pie a { color: var(--noche-tinta); text-underline-offset: 3px; }
@media (max-width: 800px) {
  .instalar-cabeza { grid-template-columns: 1fr; }
  .pasos > li { grid-template-columns: minmax(0, 1fr); }
  .pasos > li::before { grid-row: auto; font-size: 44px; margin-bottom: 8px; }
  .terminal { padding-right: 18px; padding-top: 48px; }
}

/* Preguntas */
.seccion-preguntas { padding-bottom: clamp(80px, 10vw, 140px); }
.seccion-preguntas h2 { margin-bottom: 36px; }
.preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.preguntas details { border-top: 2px solid var(--tinta); padding: 18px 0 20px; }
.preguntas summary { list-style: none; cursor: pointer; font-size: 21px; font-weight: 700; line-height: 1.3; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 3px solid var(--tinta); transition: background-color .2s, border-color .2s; }
.preguntas details[open] summary::after { background: var(--leygo); border-color: var(--leygo); }
.preguntas details p { color: var(--tinta-2); margin-top: 10px; max-width: 56ch; font-size: 17px; }
@media (max-width: 800px) { .preguntas { grid-template-columns: 1fr; } }

/* Pie */
.pie { border-top: 1px solid var(--linea); }
.pie-dentro { max-width: calc(var(--ancho) + 2 * var(--gutter)); margin: 0 auto; padding: 48px var(--gutter) 56px; display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.pie .logo { width: 28px; height: 28px; }
.pie .marca-texto { font-size: 24px; }
.pie-marca p { color: var(--tinta-2); font-size: 16px; margin-top: 14px; max-width: 34ch; }
.pie-marca .pie-legal { font-size: 13px; color: var(--tinta-3); margin-top: 10px; }
.pie-col { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.pie-col h2 { font-size: 15px; font-weight: 700; color: var(--tinta-3); margin-bottom: 4px; }
.pie-col a { color: var(--tinta-2); text-decoration: none; }
.pie-col a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .pie-dentro { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }

/* ─── Entrada: un solo momento orquestado al cargar ───────── */
.js .cabecera .logo .l-anillo,
.js .cabecera .logo .l-vertical,
.js .cabecera .logo .l-horizontal { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar .6s cubic-bezier(.6, 0, .3, 1) forwards; }
.js .cabecera .logo .l-vertical { animation-delay: .15s; }
.js .cabecera .logo .l-horizontal { animation-delay: .3s; }
.js .cabecera .logo .l-nodo { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: brotar .45s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: .45s; }
.js .cabecera .logo .l-nodo-acento { animation-delay: .75s; }
.js .cabecera .logo .l-ruta { opacity: 0; stroke-dashoffset: 36; animation: aparecer-ruta .6s .6s ease-out forwards; }
@keyframes brotar { to { transform: scale(1); } }
@keyframes aparecer-ruta { to { opacity: 1; stroke-dashoffset: 0; } }
.js .titulo .linea > span { transform: translateY(105%); animation: subir .8s cubic-bezier(.2, .8, .2, 1) forwards; }
.js .titulo .linea:nth-child(1) > span { animation-delay: .25s; }
.js .titulo .linea:nth-child(2) > span { animation-delay: .38s; }
@keyframes subir { to { transform: none; } }
.js .portada-lado, .js .demo { opacity: 0; animation: asomar .7s ease-out forwards; }
.js .portada-lado { animation-delay: .6s; }
.js .demo { animation-delay: .8s; }
@keyframes asomar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ruta { animation: none; }
}
@media (max-width: 800px) { .pasos-local .terminal.opciones { padding-top: 16px; grid-template-columns: minmax(0, 1fr); row-gap: 0; font-size: 13.5px; } .pasos-local .opciones .op { display: flex; flex-direction: column-reverse; padding: 6px 0; } .pasos-local .opciones code { white-space: normal; overflow-wrap: anywhere; } .pasos-local .opciones .com { white-space: normal; } }

/* ─── Portada: palabra que rota (servidor / computador) ──────────── */
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Las dos palabras ocupan la misma celda: el ancho es el de la más larga y la línea no salta.
   El recorte vertical lo hace .linea (overflow: hidden). */
.rota { display: inline-grid; color: var(--leygo); }
.rota-p { grid-area: 1 / 1; transform: translateY(105%); opacity: 0; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; }
.rota-p.activa { transform: none; opacity: 1; }
.rota-p.sale { transform: translateY(-105%); opacity: 0; }

/* ─── Difícil de engañar ─────────────────────────────── */
.seccion-guardia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; }
.guardia-texto > p { color: var(--tinta-2); max-width: 54ch; margin-top: 20px; }
.guardia-texto .guardia-nota { font-size: 15px; color: var(--tinta-3); margin-top: 22px; }
.guardia { background: var(--carta); border: 1px solid var(--linea); border-radius: 20px; padding: 22px; box-shadow: var(--sombra); display: grid; gap: 14px; }
.gd-correo { background: var(--papel); border-radius: 14px; padding: 14px 16px; }
.gd-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.gd-cab small { color: var(--tinta-3); font-size: 13.5px; }
.gd-correo p { color: var(--tinta-2); font-size: 15px; }
.gd-oculto { margin-top: 8px; font-size: 13.5px !important; font-family: var(--f-mono); color: var(--tinta-3) !important; background: rgba(255, 210, 63, .28); border-radius: 6px; padding: 4px 8px; }
.gd-veredicto { display: flex; gap: 12px; align-items: flex-start; }
.gd-veredicto p { color: var(--tinta-2); font-size: 15px; }
.gd-veredicto b { color: var(--tinta); }
.gd-sello { flex-shrink: 0; font-size: 12.5px; font-weight: 700; padding: 4px 9px 2px; border-radius: 8px; background: var(--leygo); color: #fff; font-variant-numeric: tabular-nums; }
.gd-registro { border-top: 1px solid var(--linea); }
@media (max-width: 900px) { .seccion-guardia { grid-template-columns: 1fr; } }
.gd-registro .mr-fila { font-size: 14.5px; }