/* dcsapient.com — hoja única. Sin frameworks, sin dependencias externas.
   Marca: dondai-hub/docs/marca.md y sapient/media. Paleta cerrada: no se inventan colores.
   Tres reglas de la hoja:
   1. La mono es la voz de la cita: ids de cápsula, sellos, numerales y las citas al
      manifiesto que lleva cada título del home (el sitio también cita su fuente).
   2. Dos superficies (--noche y --capa) se alternan en bandas a todo el ancho.
   3. El degradado va solo en las marcas, en «dónde estás» y en el motor.
   Texto de menos de 18 px: nunca en --tenue (no pasa AA); --tenue es solo decoración. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrainsmono-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --noche: #0F172A;
  --capa: #151F36;
  --capa-2: #1B2743;
  --linea: #24314F;
  --texto: #E6ECF7;
  --lectura: #D4DCEA;
  --suave: #9AA9C4;
  --tenue: #66758F;
  --azul: #3B82F6;
  --azul-claro: #60A5FA;
  --azul-palido: #93C5FD;
  --ambar: #FBBF24;
  --verde: #34D399;
  --cian: #22D3EE;
  --cielo: #38BDF8;
  --azul-600: #2563EB;
  --hondo: #1E3A8A;
  --degradado: linear-gradient(90deg, #38BDF8, #2563EB 55%, #1E3A8A);

  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --ancho: 78rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--azul-palido); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--texto); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
code, .mono { font-family: var(--mono); font-size: .86em; }
::selection { background: rgba(59, 130, 246, .45); color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; border-radius: 4px; }

.saltar {
  position: absolute; left: -999px; top: .5rem;
  background: var(--texto); color: var(--noche);
  padding: .5rem .9rem; border-radius: 6px; z-index: 50; font-weight: 600;
}
.saltar:focus { left: .75rem; }

.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------ cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15, 23, 42, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.cabecera.con-borde { border-bottom-color: var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--texto); text-decoration: none; font-weight: 650; font-size: 1.12rem; letter-spacing: -.02em; }
.marca img { width: 30px; height: auto; }
.navegacion { display: flex; gap: 1.6rem; margin-left: auto; }
.navegacion a { color: var(--suave); text-decoration: none; font-size: .95rem; padding-block: .3rem; position: relative; }
.navegacion a:hover { color: var(--texto); }
.navegacion a[aria-current="page"] { color: var(--texto); }
.navegacion a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--degradado); }

/* ------------------------------------------------------------ botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .55rem 1.15rem;
  border-radius: 8px; border: 1px solid var(--linea);
  font: 600 .98rem/1.2 var(--sans); letter-spacing: -.005em;
  text-decoration: none; color: var(--texto); background: transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.boton:hover { border-color: var(--suave); color: #fff; }
.boton-lleno { background: var(--azul-600); border-color: var(--azul-600); color: #fff; }
.boton-lleno:hover { background: var(--hondo); border-color: var(--azul-claro); }
.boton-chico { min-height: 2.25rem; padding: .35rem .85rem; font-size: .92rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ------------------------------------------------------------ la cita: la voz mono del sitio */
.cita-ref {
  font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: 0; color: var(--azul-palido);
  background: rgba(59, 130, 246, .14); border-radius: 4px; padding: .08rem .34rem; white-space: nowrap;
  text-decoration: none; vertical-align: .08em;
}
a.cita-ref:hover { background: rgba(59, 130, 246, .3); color: var(--texto); }
h2 .cita-ref { font-size: max(.8rem, .26em); vertical-align: .9em; margin-left: .35em; }

/* ------------------------------------------------------------ bandas */
.banda { padding-block: clamp(4rem, 9vw, 7.5rem); }
.banda-capa { background: var(--capa); }
.titulo-banda { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.04em; max-width: 17em; margin-bottom: 1.25rem; }
.entrada { font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--suave); max-width: 38em; margin-bottom: 2.75rem; }
.entrada:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ héroe: el lema y el ágora */
.heroe { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); position: relative; overflow: hidden; }
.heroe::before {
  content: ""; position: absolute; inset: auto -10% -30% 35%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(37, 99, 235, .22), rgba(37, 99, 235, 0));
}
.heroe .envoltura { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.lema { font-size: clamp(2.9rem, 5.5vw, 5.4rem); font-weight: 750; letter-spacing: -.055em; line-height: .96; margin-bottom: 1.6rem; }
.lema span { display: block; white-space: nowrap; }
.lema span:nth-child(2) { color: var(--suave); }
.tesis { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--suave); max-width: 30em; margin-bottom: 2rem; }
.tesis strong { color: var(--texto); font-weight: 600; }

/* El ágora del héroe */
.agora {
  background: var(--capa); border: 1px solid var(--linea); border-radius: 16px;
  padding: clamp(1rem, 2vw, 1.4rem); box-shadow: 0 30px 80px -30px rgba(2, 6, 23, .8);
}
.agora-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.agora-cabeza h2 { font-size: 1rem; letter-spacing: -.01em; font-weight: 650; }
.agora-marca { width: 30px; height: auto; flex: none; overflow: visible; }
.agora-marca .trazo { fill: none; stroke: url(#grad-agora); stroke-width: 56; stroke-linecap: round; stroke-linejoin: round; }
.agora-marca .nodo { fill: url(#grad-agora); transition: filter .3s ease; }
.agora.cita .agora-marca .nodo { filter: drop-shadow(0 0 60px #38BDF8); }
.pestanas { display: flex; flex-wrap: wrap; gap: .4rem; width: 100%; margin-top: .2rem; }
.pestana {
  font: 600 .84rem/1.2 var(--sans); color: var(--suave);
  background: transparent; border: 1px solid var(--linea); border-radius: 999px;
  padding: .45rem .8rem; cursor: pointer; min-height: 2.3rem;
}
.pestana:hover { color: var(--texto); border-color: var(--suave); }
.pestana[aria-selected="true"] { color: var(--noche); background: var(--texto); border-color: var(--texto); }

.pregunta { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.025em; font-weight: 650; line-height: 1.25; margin-bottom: .9rem; }
.saber-tira { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: 1rem; font-size: .84rem; color: var(--suave); }
.saber-tira > span { margin-right: .2rem; }
.tira { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.tira li {
  font-family: var(--mono); font-size: .76rem; padding: .22rem .45rem; border-radius: 5px;
  border: 1px solid var(--linea); color: var(--suave); transition: all .25s ease;
}
.tira li.citada { color: var(--texto); background: rgba(59, 130, 246, .22); border-color: var(--azul); }
.tira li.apagada { color: var(--suave); border-style: dotted; text-decoration: line-through; text-decoration-color: var(--suave); }
.tira li.borrador { border-style: dashed; }

.voces-par { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.voz { border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem .95rem 1rem; background: var(--noche); }
.voz header { margin-bottom: .55rem; }
.voz .quien { display: block; font-weight: 650; font-size: .98rem; letter-spacing: -.01em; }
.voz .criterio { display: block; font-size: .8rem; color: var(--suave); line-height: 1.35; }
.voz p { font-size: .92rem; line-height: 1.5; margin: 0; color: var(--lectura); }
.sello { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
.sello span {
  font-family: var(--mono); font-size: .72rem; font-weight: 500; line-height: 1; padding: .32rem .45rem; border-radius: 4px;
  background: var(--capa-2); color: var(--suave);
}
.sello .s-abstiene { color: var(--noche); background: var(--ambar); font-weight: 600; }
.sello .s-cita { color: var(--azul-palido); }
.veredicto { margin: .8rem 0 0; font-size: .88rem; color: var(--suave); line-height: 1.5; }
.veredicto strong { color: var(--texto); font-weight: 600; }
.veredicto .mono { color: var(--azul-palido); }

.bandeja-item {
  margin-top: .8rem; border: 1px solid rgba(251, 191, 36, .5); border-radius: var(--radio);
  padding: .8rem .95rem; background: rgba(251, 191, 36, .06);
}
.bandeja-item .rotulo { display: flex; align-items: center; gap: .45rem; color: var(--ambar); font-family: var(--mono); font-weight: 500; font-size: .76rem; margin-bottom: .3rem; }
.bandeja-item .rotulo::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ambar); }
.bandeja-item .q { font-weight: 650; margin-bottom: .35rem; font-size: .95rem; }
.bandeja-item ol { margin: 0 0 .35rem; padding-left: 1.2rem; font-size: .88rem; color: var(--lectura); }
.bandeja-item li { margin-bottom: .1rem; }
.bandeja-item li::marker { font-family: var(--mono); color: var(--ambar); }
.bandeja-item .meta { font-size: .82rem; color: var(--suave); margin: 0; }

.capsulas-detalle { margin-top: .9rem; font-size: .88rem; }
.capsulas-detalle summary { cursor: pointer; color: var(--azul-palido); padding-block: .3rem; }
.capsulas { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .45rem; }
.capsula { border: 1px solid var(--linea); border-radius: 8px; padding: .6rem .75rem; background: var(--noche); line-height: 1.45; }
.capsula .id { font-family: var(--mono); font-size: .76rem; color: var(--azul-palido); }
.capsula .estado { font-size: .78rem; color: var(--verde); margin-left: .5rem; }
.capsula.borrador .estado { color: var(--suave); }
.capsula blockquote { margin: .25rem 0; color: var(--texto); }
.capsula .fuente { font-family: var(--mono); font-size: .76rem; color: var(--suave); }
.aviso-ilustrativo { margin: .8rem 0 0; font-size: .82rem; color: var(--suave); }

@media (prefers-reduced-motion: no-preference) {
  .panel-demo.entra .voz, .panel-demo.entra .veredicto, .panel-demo.entra .bandeja-item { animation: aparecer .45s cubic-bezier(.2, .7, .3, 1) both; }
  .panel-demo.entra .voz:nth-child(1) { animation-delay: .15s; }
  .panel-demo.entra .voz:nth-child(2) { animation-delay: .55s; }
  .panel-demo.entra .veredicto { animation-delay: .95s; }
  .panel-demo.entra .bandeja-item { animation-delay: 1.3s; }
  .panel-demo.rapido .voz, .panel-demo.rapido .veredicto, .panel-demo.rapido .bandeja-item { animation-duration: .3s; animation-delay: 0s !important; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ la frontera, como imagen */
.frontera-mapa { margin-top: clamp(2rem, 4vw, 3rem); }
.fm-vos {
  display: flex; flex-direction: column; align-items: center; text-align: center; margin-inline: auto;
  width: max-content; max-width: 100%; padding: .8rem 1.6rem; border-radius: 999px;
  border: 1.5px solid var(--texto); background: var(--noche);
}
.fm-vos strong { font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.1; }
.fm-vos span { font-size: .9rem; color: var(--suave); }
.fm-bajadas, .fm-subidas { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr); }
.fm-bajadas { padding-top: 1.4rem; }
.fm-bajadas::before { /* el brazo que sale de «Vos» hacia los dos campos */
  content: ""; position: absolute; top: 1.4rem; left: calc(25% - 2.75rem); right: calc(25% - 2.75rem); border-top: 1.5px solid var(--suave);
}
.fm-bajadas::after { content: ""; position: absolute; top: 0; height: 1.4rem; left: 50%; border-left: 1.5px solid var(--suave); }
.fm-bajada { position: relative; min-height: 4.4rem; }
.fm-bajada:nth-child(2) { grid-column: 3; }
.fm-bajada::before { content: ""; position: absolute; top: 0; bottom: 8px; left: 50%; border-left: 1.5px solid var(--suave); }
.fm-bajada::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 4.25px); border: 5px solid transparent; border-top: 8px solid var(--suave); border-bottom: 0; }
.fm-bajada span {
  position: absolute; top: 50%; left: calc(50% + .7rem); transform: translateY(-50%); max-width: 15rem;
  font-family: var(--mono); font-size: .78rem; line-height: 1.35; color: var(--lectura);
}
.fm-campos { display: grid; grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr); align-items: stretch; }
.fm-campo { border-radius: 16px; padding: clamp(1.2rem, 2.4vw, 1.8rem); border: 1.5px solid rgba(96, 165, 250, .55); background: var(--capa); }
.fm-dondai { border-color: var(--linea); }
.fm-nombre { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 600; color: var(--suave); margin-bottom: .2rem; }
.fm-nombre img { width: 28px; height: auto; }
.fm-verbo { font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 750; letter-spacing: -.055em; line-height: 1; margin-bottom: .8rem; }
.fm-pregunta { font-size: 1.05rem; color: var(--texto); margin-bottom: 1rem; max-width: 22em; }
.fm-piezas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fm-piezas a {
  display: inline-block; font-size: .88rem; color: var(--lectura); text-decoration: none;
  border: 1px solid var(--linea); border-radius: 999px; padding: .32rem .7rem; background: var(--noche);
}
.fm-piezas a:hover { border-color: var(--azul-claro); color: var(--texto); }
.fm-puente { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; padding-inline: .6rem; }
.fm-flecha { position: relative; font-family: var(--mono); font-size: .74rem; line-height: 1.35; color: var(--lectura); text-align: center; padding-bottom: .7rem; }
.fm-flecha::after { content: ""; position: absolute; left: 0; right: 8px; bottom: 0; border-top: 1.5px solid var(--suave); }
.fm-flecha::before { content: ""; position: absolute; right: 0; bottom: -5px; border: 5px solid transparent; border-left: 8px solid var(--suave); border-right: 0; }
.fm-flecha.vuelve::after { left: 8px; right: 0; }
.fm-flecha.vuelve::before { left: 0; right: auto; border-left: 0; border-right: 8px solid var(--suave); }
.fm-motor {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .3rem .9rem; text-align: center;
  border-radius: 999px; padding: .85rem 1.5rem; max-width: 46rem; margin-inline: auto;
  border: 2px solid transparent; background: linear-gradient(var(--noche), var(--noche)) padding-box, var(--degradado) border-box;
}
.fm-motor strong { font-size: 1.2rem; letter-spacing: -.02em; }
.fm-motor span { color: var(--suave); font-size: .95rem; }
.fm-vos-lazos { display: none; text-align: center; font-family: var(--mono); font-size: .78rem; color: var(--lectura); margin: .7rem auto 1.1rem; max-width: 22rem; }
.regla { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 46rem; text-align: center; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--lectura); }
.regla strong { color: var(--texto); }

/* ------------------------------------------------------------ manifiesto en el home */
.epigrafe-grande { margin: 0 0 clamp(3rem, 6vw, 5rem); padding: 0; border: 0; }
.epigrafe-grande p {
  margin: 0; font-size: clamp(2rem, 5.4vw, 4.9rem); line-height: 1.04; letter-spacing: -.05em; text-wrap: balance;
}
.epigrafe-grande .menor { font-weight: 300; color: var(--suave); }
.epigrafe-grande .mayor { font-weight: 750; color: var(--texto); margin-top: .12em; }
.epigrafe-grande .tuya { font-weight: 750; color: var(--azul-palido); }
.principios-grandes { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 6rem); counter-reset: p; }
.principios-grandes li { counter-increment: p; display: grid; grid-template-columns: 3.6rem 1fr; grid-template-rows: auto 1fr; align-content: start; gap: .25rem 1rem; padding-block: 1.3rem; border-top: 1px solid var(--linea); }
.principios-grandes li::before {
  content: counter(p); grid-row: span 2; font-family: var(--mono); font-weight: 500; font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  line-height: 1; color: var(--azul-claro);
}
.principios-grandes a { font-size: clamp(1.25rem, 2.1vw, 1.65rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.2; color: var(--texto); text-decoration: none; }
.principios-grandes a:hover { text-decoration: underline; text-decoration-color: var(--azul-claro); }
.principios-grandes span { color: var(--suave); font-size: .98rem; }

/* ------------------------------------------------------------ los cinco bordes */
.bordes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.anillos { width: 100%; max-width: 32rem; justify-self: center; overflow: visible; }
.anillos .anillo { stroke: var(--noche); stroke-width: 2; transition: filter .2s ease, stroke .2s ease; }
.anillos .a-carta { fill: #172554; }
.anillos .a-mandato { fill: #1B3274; }
.anillos .a-caracter { fill: var(--hondo); }
.anillos .a-saber { fill: #1F49B4; }
.anillos .a-motor { fill: url(#grad-motor); }
.anillos .anillo.activo { stroke: var(--cielo); stroke-width: 3; }
.anillos text { fill: var(--texto); font: 600 12.5px var(--sans); letter-spacing: .01em; }
.anillos text.debajo { fill: var(--azul-palido); font: 500 10.5px var(--mono); letter-spacing: 0; }
.anillos .t-motor { font-size: 15px; font-weight: 700; }
.js .anillos .anillo { opacity: 0; transform: scale(.86); transform-box: fill-box; transform-origin: center; }
.js .anillos text { opacity: 0; }
.js .anillos.visto .anillo, .js .anillos.visto text { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .anillos.visto .a-mandato { transition-delay: .12s; }
.js .anillos.visto .a-caracter { transition-delay: .24s; }
.js .anillos.visto .a-saber { transition-delay: .36s; }
.js .anillos.visto .a-motor { transition-delay: .5s; }
.js .anillos.visto text { transition-delay: .7s; }
.lista-bordes { list-style: none; margin: 0 0 2rem; padding: 0; }
.lista-bordes li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--linea); }
.lista-bordes li:first-child { border-top: 1px solid var(--linea); }
.lista-bordes a { font-weight: 650; color: var(--texto); text-decoration: none; }
.lista-bordes a:hover { color: var(--azul-palido); text-decoration: underline; }
.lista-bordes span { color: var(--suave); font-size: .97rem; }
.donde-vive { display: block; font-family: var(--mono); font-size: .76rem; color: var(--azul-palido); margin-top: .2rem; }

/* ------------------------------------------------------------ casos en el home */
.casos-home { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.caso-destacado h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.03em; margin-bottom: .4rem; }
.caso-destacado .bajada { color: var(--suave); margin-bottom: 1.25rem; max-width: 40em; }
.otros-casos { list-style: none; margin: 0; padding: 0; }
.otros-casos li { border-top: 1px solid var(--linea); }
.otros-casos li:last-child { border-bottom: 1px solid var(--linea); }
.otros-casos a { display: block; padding-block: 1rem; text-decoration: none; color: var(--texto); }
.otros-casos a:hover strong { text-decoration: underline; text-decoration-color: var(--azul-claro); }
.otros-casos strong { display: block; font-size: 1.12rem; letter-spacing: -.02em; font-weight: 650; }
.otros-casos span { display: block; color: var(--suave); font-size: .93rem; margin-top: .15rem; }
.otros-casos .pareja-mini { font-family: var(--mono); font-size: .76rem; color: var(--azul-palido); margin-top: .35rem; }

/* La escena del ágora (home, casos y lab) */
.escena { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; max-width: 50rem; }
.escena li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .85rem 1.05rem; background: var(--capa); border-radius: var(--radio); border: 1px solid transparent; }
.banda-capa .escena li { background: var(--noche); }
.escena .habla { font-weight: 650; font-size: .95rem; line-height: 1.3; }
.escena .habla small { display: block; font-family: var(--mono); font-weight: 400; color: var(--suave); font-size: .74rem; margin-top: .15rem; }
.escena p { margin: 0; color: var(--lectura); font-size: .97rem; }
.escena .humano { background: transparent !important; border-color: var(--linea); }
.escena .decision { background: rgba(251, 191, 36, .06) !important; border-color: rgba(251, 191, 36, .5); }
.escena .decision .habla { color: var(--ambar); }
.escena .verificador .habla { color: var(--azul-palido); }
.nota { font-size: .9rem; color: var(--suave); max-width: 46rem; margin-top: 1rem; }

/* ------------------------------------------------------------ hoy (franja) y llamado */
.franja-hoy { list-style: none; margin: 0 0 clamp(3rem, 6vw, 4.5rem); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--linea); }
.franja-hoy li { padding: 1.2rem clamp(.8rem, 2vw, 1.6rem) 1.3rem; }
.franja-hoy li + li { border-left: 1px solid var(--linea); }
.franja-hoy li:first-child { padding-left: 0; }
.estado-sello { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .76rem; font-weight: 500; color: var(--verde); margin-bottom: .35rem; }
.estado-sello::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--verde); }
.estado-sello.e-parte { color: var(--cian); }
.estado-sello.e-parte::before { background: transparent; border: 2px solid var(--cian); }
.estado-sello.e-camino { color: var(--suave); }
.estado-sello.e-camino::before { background: transparent; border: 1.5px dashed var(--suave); }
.franja-hoy p { margin: 0; color: var(--lectura); font-size: .97rem; }
.franja-hoy a { font-size: .93rem; }
.llamado { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.llamado h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing: -.045em; margin-bottom: 1.25rem; }
.llamado .entrada { margin-bottom: 1.25rem; }
.llamado .acciones { margin-top: 2rem; }
.entregables { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; max-width: 36em; }
.entregables li { position: relative; padding-left: 1.3rem; color: var(--lectura); }
.entregables li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: .5rem; border-radius: 2px; background: var(--azul-claro); }
.entregables .en-camino { color: var(--suave); }
.confianza-corta { background: var(--noche); border: 1px solid var(--linea); border-radius: 14px; padding: clamp(1.25rem, 3vw, 2rem); }
.confianza-corta h3 { font-size: 1.15rem; letter-spacing: -.015em; margin-bottom: 1rem; }
.confianza-corta dl { margin: 0 0 1.25rem; }
.confianza-corta dt { font-weight: 600; font-size: .97rem; }
.confianza-corta dd { margin: .15rem 0 1rem; color: var(--suave); font-size: .94rem; }

/* ------------------------------------------------------------ pie */
.pie { border-top: 1px solid var(--linea); padding-block: 2.5rem 3rem; color: var(--suave); font-size: .9rem; }
.pie .envoltura { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; justify-content: space-between; }
.pie nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.pie a { color: var(--suave); text-decoration: none; }
.pie a:hover { color: var(--texto); text-decoration: underline; }
.pie .firma { margin: 0; }

/* ------------------------------------------------------------ páginas interiores */
.portada { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.portada h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); letter-spacing: -.05em; line-height: 1; margin-bottom: 1.25rem; max-width: 14em; }
.portada .entrada { margin-bottom: 0; }

/* Manifiesto */
.manifiesto-portada { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--linea); }
.manifiesto-portada h1 { font-family: var(--mono); font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--azul-palido); margin-bottom: 1.5rem; }
.manifiesto-portada .epigrafe-grande { margin-bottom: 1.5rem; }
.manifiesto-portada .version { color: var(--suave); margin: 0; }
.manifiesto-cuerpo { display: grid; grid-template-columns: 13rem minmax(0, 42rem); justify-content: center; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); }
.riel { position: sticky; top: 6rem; align-self: start; }
.riel p { font-size: .85rem; color: var(--suave); margin-bottom: .6rem; }
.riel ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linea); }
.riel a { display: grid; grid-template-columns: 1.6rem 1fr; padding: .38rem 0 .38rem .9rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--suave); text-decoration: none; font-size: .92rem; line-height: 1.3; }
.riel a span { font-family: var(--mono); font-size: .8rem; color: var(--azul-palido); }
.riel a:hover { color: var(--texto); }
.riel a[aria-current="true"] { color: var(--texto); border-image: linear-gradient(#38BDF8, #2563EB) 1; }
.lectura h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.035em; margin: 3.5rem 0 1.1rem; }
.lectura > h2:first-child { margin-top: 0; }
.lectura p, .lectura li { font-size: 1.125rem; line-height: 1.7; color: var(--lectura); }
.lectura ol { padding-left: 1.3rem; }
.lectura li { margin-bottom: .6rem; }
.lectura li::marker { color: var(--azul-palido); font-family: var(--mono); font-size: .85em; }
.lectura strong { color: var(--texto); font-weight: 650; }
.principio { margin-top: 3rem; scroll-margin-top: 5.5rem; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: .6rem; }
.principio .n { grid-row: span 3; font-family: var(--mono); font-size: 3rem; font-weight: 500; line-height: .95; color: var(--azul-claro); }
.principio h3 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); letter-spacing: -.035em; margin-bottom: .55rem; }
.principio .bajada { color: var(--texto); font-weight: 600; margin-bottom: .6rem; }
.cierre-lema { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--linea); font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 750; letter-spacing: -.05em; line-height: 1.02; }
.indice-principios { display: none; list-style: none; padding: 0; margin: 2rem 0 0; grid-template-columns: 1fr 1fr; gap: .4rem; }
.indice-principios a { display: flex; gap: .5rem; font-size: .9rem; color: var(--lectura); text-decoration: none; border: 1px solid var(--linea); border-radius: 8px; padding: .5rem .7rem; }
.indice-principios a span { font-family: var(--mono); color: var(--azul-palido); }

/* Casos */
.indice-casos { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.indice-casos a { display: inline-block; color: var(--lectura); text-decoration: none; border: 1px solid var(--linea); border-radius: 999px; padding: .4rem .85rem; font-size: .92rem; }
.indice-casos a:hover { color: var(--texto); border-color: var(--azul-claro); }
.ficha-caso { padding-block: clamp(3.5rem, 7vw, 5.5rem); scroll-margin-top: 4rem; }
.ficha-caso:nth-of-type(even) { background: var(--capa); }
.ficha-caso h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.045em; margin-bottom: .7rem; max-width: 18em; }
.ficha-caso .bajada { font-size: 1.12rem; color: var(--suave); max-width: 44em; margin-bottom: 2.25rem; }
.caso-cuerpo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.caso-cuerpo h3 { font-size: 1.05rem; letter-spacing: -.01em; margin: 0 0 .8rem; }
.caso-cuerpo h3:not(:first-child) { margin-top: 2rem; }
.dolores { margin: 0; padding-left: 1.15rem; color: var(--lectura); }
.dolores li { margin-bottom: .45rem; }
.sapients-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sapients-lista li { border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem .9rem; }
.sapients-lista strong { font-size: 1.02rem; }
.sapients-lista .rol { font-family: var(--mono); font-size: .74rem; color: var(--azul-palido); margin-left: .5rem; }
.sapients-lista .rol.exige { color: var(--ambar); }
.sapients-lista p { margin: .15rem 0 0; color: var(--suave); font-size: .92rem; }
.sapients-lista .mira { color: var(--lectura); }
.cambio-no { margin-top: 1.5rem; font-size: .95rem; color: var(--suave); }
.cambio-no strong { color: var(--texto); }
.reconstruccion { font-family: var(--mono); font-size: .76rem; color: var(--suave); margin-top: 1.25rem; }
.lista-patrones { list-style: none; margin: 0; padding: 0; }
.lista-patrones > li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1rem, 4vw, 4rem); padding-block: 1.6rem; border-top: 1px solid var(--linea); }
.lista-patrones h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.03em; }
.lista-patrones p { color: var(--lectura); margin: 0; }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--linea); }
.pasos li:first-child { border-top: 1px solid var(--linea); }
.pasos li::before { content: counter(paso); font-family: var(--mono); color: var(--azul-claro); font-size: 1.5rem; line-height: 1; }
.pasos strong { display: block; font-size: 1.1rem; letter-spacing: -.015em; }
.pasos span { color: var(--suave); font-size: .97rem; }

/* Confianza y la puerta */
.puntos-confianza { display: grid; gap: 0; max-width: 56rem; }
.punto { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(1rem, 4vw, 3rem); padding-block: 2rem; border-top: 1px solid var(--linea); scroll-margin-top: 5rem; }
.punto h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.03em; }
.punto p, .punto li { color: var(--lectura); }
.punto ul { padding-left: 1.2rem; margin: 0 0 1em; }
.punto li { margin-bottom: .4rem; }
.direccion { font-family: var(--mono); font-size: .9em; color: var(--azul-palido); background: var(--capa); padding: .1rem .4rem; border-radius: 4px; overflow-wrap: anywhere; }
.puerta { max-width: 40rem; }
.puerta-paso { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: .6rem; counter-reset: pp; }
.puerta-paso li { counter-increment: pp; display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; padding: 1rem 1.1rem; background: var(--capa); border-radius: var(--radio); color: var(--lectura); }
.puerta-paso li::before { content: counter(pp); font-family: var(--mono); font-size: 1.4rem; line-height: 1.1; color: var(--azul-claro); }
.puerta-alerta { border: 1px solid rgba(251, 191, 36, .5); background: rgba(251, 191, 36, .06); border-radius: var(--radio); padding: 1rem 1.1rem; color: var(--lectura); margin-bottom: 2rem; }
.puerta-alerta strong { color: var(--ambar); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .heroe .envoltura { grid-template-columns: 1fr; }
  .agora { max-width: 44rem; }
  .casos-home { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .manifiesto-cuerpo { grid-template-columns: minmax(0, 42rem); }
  .riel { display: none; }
  .indice-principios { display: grid; }
}
@media (max-width: 860px) {
  .bordes, .llamado, .dos-columnas, .caso-cuerpo { grid-template-columns: 1fr; }
  .principios-grandes { grid-template-columns: 1fr; }
  .lista-patrones > li, .punto { grid-template-columns: 1fr; }
  .franja-hoy { grid-template-columns: 1fr; }
  .franja-hoy li, .franja-hoy li:first-child { padding: 1rem 0; }
  .franja-hoy li + li { border-left: 0; border-top: 1px solid var(--linea); }
  /* la frontera se apila */
  .fm-bajadas, .fm-subidas { display: none; }
  .fm-vos { margin-bottom: 0; }
  .fm-campos { grid-template-columns: 1fr; }
  .fm-puente { flex-direction: row; justify-content: center; gap: 1rem; padding: 1rem 0; }
  .fm-flecha { padding: 0 0 0 1.1rem; text-align: left; max-width: 10rem; }
  .fm-flecha::after { left: .3rem; right: auto; top: 0; bottom: 8px; border-top: 0; border-left: 1.5px solid var(--suave); }
  .fm-flecha::before { left: -.02rem; right: auto; bottom: 0; top: auto; border: 5px solid transparent; border-top: 8px solid var(--suave); border-bottom: 0; }
  .fm-flecha.vuelve::after { top: 8px; bottom: 0; left: .3rem; }
  .fm-flecha.vuelve::before { top: 0; bottom: auto; left: -.02rem; border: 5px solid transparent; border-bottom: 8px solid var(--suave); border-top: 0; }
  .fm-vos-lazos { display: block; }
  .fm-motor { margin-top: 1.25rem; border-radius: 16px; }
}
@media (max-width: 720px) {
  .cabecera .envoltura { flex-wrap: wrap; gap: .25rem 1rem; padding-block: .6rem; }
  .navegacion { order: 3; width: 100%; margin-left: 0; gap: .2rem 1.1rem; flex-wrap: wrap; }
  .navegacion a { font-size: .9rem; }
  .cabecera .boton { margin-left: auto; }
  .voces-par { grid-template-columns: 1fr; }
  .escena li { grid-template-columns: 1fr; gap: .3rem; }
  .lista-bordes li { grid-template-columns: 1fr; gap: .2rem; }
  .principio { grid-template-columns: 1fr; }
  .principio .n { grid-row: auto; font-size: 2.2rem; margin-bottom: .4rem; }
  .lema { font-size: clamp(2.6rem, 13vw, 3.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

@media print {
  body { background: #fff; color: #000; }
  .cabecera, .pie, .acciones, .riel { display: none; }
}