/* Las páginas de contenido —agentes, entidades, política—. La home y el panel tienen el suyo.
   Los colores y tamaños salen de tokens.css; acá solo va la forma. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1rem/1.6 "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 88rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 3rem); }
h1, h2, h3 { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-weight: 800;
             letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-4); margin: 1.25rem 0 0; }
/* El subrayado verde de la promesa, igual al de la portada (`.promesa em` en index.html). */
h1 em { font-style: normal; padding: 0 .06em;
        background: linear-gradient(transparent 60%, var(--mint) 60%, var(--mint) 93%, transparent 93%); }
h2 { font-size: var(--step-2); margin: 3.5rem 0 1.25rem; }
.eyebrow { font: 500 .6875rem/1.4 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em;
           text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.lead { font-size: var(--step-1); color: var(--ink-muted); max-width: 44rem; margin: 1.25rem 0 0; }
a { color: inherit; }

.top { display: flex; align-items: center; gap: .75rem; padding: 1.375rem 0; border-bottom: 1px solid var(--line); }
.top .marca { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.iso { width: 32px; height: 32px; flex: none; color: var(--mint); }
.iso svg { width: 100%; height: 100%; display: block; }
.brand { font-family: Montserrat, sans-serif; font-weight: 800; font-size: 1.25rem; line-height: 1; color: var(--mint); }
.menu { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
.menu a { text-decoration: none; font-weight: 500; font-size: .9375rem; }
.menu a:hover, .menu a:focus-visible, .menu a[aria-current] {
  text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: .25rem; text-decoration-thickness: 2px; }

.boton { display: inline-block; font: 600 1rem/1 "IBM Plex Sans", sans-serif; text-decoration: none;
         color: var(--on-mint); background: var(--mint); border: 1px solid var(--mint); padding: .9375rem 1.5rem; }
.boton.secundario { background: var(--ground); color: var(--ink); border-color: var(--line); }
.boton:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.caras { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; margin-top: 3rem; }
.caras.cuatro { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cara { border: 1px solid var(--line); padding: 1.375rem 1.5rem 1.5rem; }
.cara h3 { font-size: var(--step-2); line-height: 1.12; }
.cara p { margin: .75rem 0 0; font-size: var(--step-1); color: var(--ink-muted); }
.cara b { color: var(--ink); font-weight: 600; }

.pasos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.pasos .num { font: 500 .6875rem/1 "IBM Plex Mono", monospace; color: var(--mint); display: block; margin-bottom: .5rem; }
.pasos h3 { font: 600 1rem/1.3 "IBM Plex Sans", sans-serif; letter-spacing: 0; }
.pasos p { margin: .25rem 0 0; font-size: .9375rem; color: var(--ink-muted); }

.planes { display: grid; grid-template-columns: minmax(0, 26rem); gap: 1rem; }
.plan { border: 1px solid var(--line); padding: 1.25rem; display: flex; flex-direction: column; }
.plan .precio { font: 800 var(--step-2)/1 Montserrat, sans-serif; margin: .75rem 0 .25rem; }
.plan .cupos { font-weight: 600; margin: 0; }
.plan .precio s { font-size: .5em; font-weight: 600; color: var(--ink-muted); }
.plan .cupos { color: var(--ink-muted); font-weight: 500; font-size: .875rem; }
.plan ul { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .5rem; }
.plan li { padding-left: 1.5rem; position: relative; font-weight: 600; font-size: .9375rem; }
.plan li::before { content: ""; position: absolute; left: 0; top: .3em; width: .75rem; height: .4rem;
  border: solid var(--mint); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.plan .boton { text-align: center; font-size: .875rem; padding: .75rem 1rem; }

.portada-agente { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: center; margin-top: 3rem; }
.portada-agente h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.asi-se-ve { position: relative; margin: 0; border: 1px solid var(--line); padding: 0 0 1.25rem; background: var(--ground);
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / .25); }
.av-portada { height: 9rem; background: center/cover; }
.av-foto { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--ground);
  margin: -2.75rem 0 0 1.25rem; display: block; }
.asi-se-ve > p, .av-cifras { margin-left: 1.25rem; margin-right: 1.25rem; }
.av-nombre { font: 800 1.5rem/1.1 Montserrat, sans-serif; margin-top: .5rem; margin-bottom: 0; }
.av-sello { margin: .25rem 0 .25rem; font-weight: 600; font-size: .875rem; display: flex; align-items: center; gap: .4rem; }
.av-sello::before { content: ""; width: .7rem; height: .4rem; border: solid var(--mint); border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-2px); }
.av-cifras { list-style: none; padding: 1rem 0 0; margin-top: 1rem; border-top: 1px solid var(--line); display: flex; gap: 1.5rem;
  font: 500 .625rem/1.4 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.av-cifras b { display: block; font: 800 1.25rem/1.1 Montserrat, sans-serif; color: var(--ink); letter-spacing: 0; text-transform: none; }
.asi-se-ve .chip { position: absolute; top: .75rem; right: .75rem; font: 500 .625rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em;
  text-transform: uppercase; background: var(--ground); padding: .375rem .5rem; }
.av-logo { position: relative; display: grid; place-items: center; background: var(--mint); color: #070B0A; font: 800 2.25rem/1 Montserrat, sans-serif; }
.av-hoy { margin-top: .5rem; margin-bottom: 0; padding: .625rem .75rem; background: var(--surface); font-size: .875rem; }
.av-cifras + .av-hoy { margin-top: 1rem; }
.av-ver { display: block; margin: 1rem 1.25rem 0; font-weight: 600; font-size: .9375rem; }
.av-ver::after { content: " →"; }
@media (max-width: 56rem) { .portada-agente { grid-template-columns: 1fr; gap: 2rem; } }

.texto { max-width: 46rem; }
.texto h2 { font-size: var(--step-1); margin: 2.25rem 0 .5rem; }
.texto p, .texto li { color: var(--ink); }
.texto ul { padding-left: 1.25rem; }

footer { border-top: 1px solid var(--line); margin-top: 4.5rem; padding: 2.5rem 0 4rem; font-size: .8125rem; color: var(--ink-muted); }
footer p { margin: 0 0 .5rem; }

@media (max-width: 56rem) { .caras, .caras.cuatro, .pasos { grid-template-columns: 1fr; } }
@media (max-width: 34rem) { .menu { gap: .75rem; } .menu a { font-size: .8125rem; } }