/* ==========================================================================
   Wots · Chief of Agents — pages.css
   Layouts de SUBPÁGINAS (todas menos la home). Requiere base.css antes.
   Bloques: cuerpo de página (columna + aside), cliente
   ancla, métricas label/valor, «Lo que gobierna el Chief of Agents»,
   tabla comparativa, módulos de producto (mock), «Otras industrias», /agentes,
   CTA de cierre, legal (índice + secciones), páginas cortas (gracias), 404.
   ========================================================================== */

/* ---- Cuerpo de página ---- */
.page-body { padding-bottom: var(--space-section); }
.page-body--split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 64px); align-items: start; }
.page-body--split > .prose { min-width: 0; }
.aside { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 16px; }
.aside .card__title { font-size: 1rem; }
.toc { font-size: var(--fs-sm); }
.toc__t { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc ol { display: grid; gap: 2px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; color: var(--muted); transition: color var(--dur-2) var(--ease-out); }
.toc a::before { content: counter(toc, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--muted-2); }
@media (max-width: 1024px) { .page-body--split { grid-template-columns: 1fr; } .aside { position: static; } }
/* El aside es sticky: si el índice + las tarjetas superan el alto útil, las últimas
   quedarían inalcanzables (con .toc a en 44 px pasa en pantallas de 720-800 px de alto).
   Scroll propio dentro del aside, patrón estándar de barra lateral de documentación. */
@media (min-width: 1025px) {
  .page-body--split > .aside { max-height: calc(100dvh - var(--nav-h) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
}

/* ---- Bloques de sección dentro de una subpágina ---- */
.block { padding-block: clamp(28px, 4vw, 56px); }
.block__head { margin-bottom: clamp(18px, 2.5vw, 32px); }
.block__head h2 { font-size: var(--fs-h2-sm); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; max-width: 26ch; }
.block__head .lead { margin-top: 12px; }
.block__foot { margin-top: 24px; }

/* ---- Cliente ancla (logo + hecho) ---- */
.anchor { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.anchor__logo { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 56px; padding: 8px 12px; border-radius: 10px; background: #fff; }
.anchor__logo img { max-height: 36px; width: auto; }
.anchor__t { font-size: var(--fs-h3); font-weight: 700; color: var(--ink); }
.anchor__p { margin-top: 4px; font-size: .9375rem; color: var(--ink-2); }
@media (max-width: 560px) { .anchor { grid-template-columns: 1fr; } }

/* ---- Métricas label/valor (05: cifra + etiqueta + fecha) ---- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--grid-gap); }
.metric { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.metric__v { display: block; font-size: var(--fs-metric); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.metric__v--sm, .prose .metric__v { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.metric__l { display: block; margin-top: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.metric__note { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* ---- «Lo que gobierna el Chief of Agents» (lista con ícono) ---- */
.gov { display: grid; gap: 12px; }
.gov__item { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.gov__t { font-weight: 700; color: var(--ink); }
.gov__p { margin-top: 4px; font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 900px) { .gov--2 { grid-template-columns: repeat(2, 1fr); } }

/* ---- Tabla comparativa (Chatbot / Agente / Plataforma / Chief of Agents) ---- */
.compare .table { min-width: 640px; }
.compare .table th:not(:first-child), .compare .table td:not(:first-child) { text-align: center; width: 18%; }
.compare .table tbody th { width: 28%; }
.compare .table .is-hi { box-shadow: inset 1px 0 0 var(--green-a35), inset -1px 0 0 var(--green-a35); }

/* ---- Módulos de producto ---- */
.module { scroll-margin-top: calc(var(--nav-h) + 16px); padding-block: clamp(32px, 5vw, 64px); border-top: 1px solid var(--line); }
.module__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.module__grid--flip > .module__mock { order: -1; }
.module__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.module__head h2 { font-size: var(--fs-h2-sm); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.module__dl { display: grid; gap: 14px; margin-top: 20px; }
.module__dl dt { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green-2); }
.module__dl dd { margin-top: 4px; font-size: .9375rem; color: var(--ink-2); }
.mock { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg-2); box-shadow: var(--shadow-float); overflow: hidden; }
.mock__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 12px; color: var(--muted); }
.mock__bar::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); box-shadow: 16px 0 0 var(--line-2), 32px 0 0 var(--line-2); margin-right: 32px; flex: none; }
.mock__body { padding: 16px; min-height: 220px; font-size: 13px; color: var(--ink-2); }
.mock__note { position: absolute; right: 12px; bottom: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-deep); }
@media (max-width: 900px) { .module__grid { grid-template-columns: 1fr; } .module__grid--flip > .module__mock { order: 0; } }

/* ---- «Otras industrias» (5 hermanas) ---- */
.others { padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.others__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.others__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.others__list a::after { content: "→"; color: var(--green-2); }

/* ---- CTA de cierre de subpágina (un solo botón sólido) ---- */
.page-cta { padding-block: var(--space-section); }
.page-cta__card { padding: clamp(28px, 4vw, 48px); text-align: center; }
.page-cta__card .display--sm, .page-cta__card h2 { margin-inline: auto; }
.page-cta__card .lead { margin: 14px auto 0; }
.page-cta__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.page-cta__row .mailcap { max-width: 400px; flex: 1 1 300px; }
.page-cta__card .form__msg, .page-cta__card .form__legal { margin-inline: auto; text-align: center; }
.page-cta__human { margin-top: 16px; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 640px) { .page-cta__row { flex-direction: column; align-items: stretch; } .page-cta__row > .btn { width: 100%; } .page-cta__row .mailcap { flex: 0 0 auto; max-width: none; } }

/* ---- /agentes — ESQUELETO DE ESTILOS (ronda 2026-08-30) ------------------------------------
   La página que le habla a las máquinas: qué hay hoy legible por un agente, cómo citar a Wots y
   qué viene. Solo el andamiaje; el contenido y lo específico van en css/page-agentes.css.
   Reutiliza lo que ya existe: .page-header, .block, .prose, .card, .badge (`--green` = disponible,
   sin modificador = en preparación), .callout, .page-cta. Marcado previsto:
     <ul class="ag-res">
       <li class="ag-res__item">
         <code class="ag-res__path">/llms.txt</code>
         <p class="ag-res__d">…</p>
         <span class="badge badge--green badge--dot">Disponible</span>
       </li>
     </ul>
   No hay ninguna clase de formulario acá a propósito: el nivel 3 (que un agente envíe datos)
   quedó descartado, así que esta página no abre ninguna vía de entrada. */
.ag-res { display: grid; gap: 12px; }
.ag-res__item { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto; gap: 8px 22px; align-items: baseline; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ag-res__path { font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.5; color: var(--green-2); overflow-wrap: anywhere; }
.ag-res__d { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.ag-res__item .badge { align-self: center; justify-self: end; }
/* Bloque «cómo citarnos»: la cita es texto normal (indexable, copiable), no una imagen. */
.ag-cite { display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); }
.ag-cite__q { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 62ch; }
.ag-cite__src { font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.ag-cite__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
@media (max-width: 720px) {
  .ag-res__item { grid-template-columns: 1fr; gap: 8px; }
  .ag-res__item .badge { justify-self: start; }
}

/* ---- Legal ---- */
.legal .prose { max-width: 72ch; }
.legal .prose h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); }
.legal .prose h2 a[href^="#"] { color: inherit; text-decoration: none; }
.legal .prose ol { counter-reset: none; }
.legal .prose .table-wrap { margin-top: 1.2em; }

/* ---- Páginas cortas: /gracias ---- */
.thanks { min-height: calc(100dvh - var(--nav-h)); display: grid; place-items: center; text-align: center; padding-block: calc(var(--nav-h) + 40px) 64px; }
.thanks__inner { display: grid; justify-items: center; gap: 18px; max-width: 560px; }
.thanks__inner > .ico-box { width: 56px; height: 56px; border-radius: 50%; }
.thanks__inner > .ico-box .icon { width: 28px; height: 28px; }
.thanks__inner h1 { font-size: var(--fs-h2-sm); }
.thanks__inner .lead { max-width: 44ch; }
.thanks__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

/* ---- 404 ---- */
.nf { min-height: calc(100dvh - var(--nav-h)); display: grid; place-items: center; text-align: center; padding-block: calc(var(--nav-h) + 40px) 64px; }
.nf__inner { display: grid; justify-items: center; gap: 16px; max-width: 600px; }
.nf__code { font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 900; letter-spacing: -.04em; line-height: .9; color: transparent; -webkit-text-stroke: 1px rgba(34,197,94,.45); }
.nf__inner h1 { font-size: var(--fs-h2-sm); }
.nf__inner .lead { max-width: 40ch; }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.nf__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.nf__links a::after { content: "→"; color: var(--green-2); }

@media (hover: hover) and (pointer: fine) {
  .toc a:hover, .nf__links a:hover, .others__list a:hover { color: var(--ink); }
  .nf__links a:hover, .others__list a:hover { border-color: var(--green-a35); }
}