/* Brando — páginas simples (gracias, legales, 404). Usa los tokens y la escala de brand.css. */
.p-top { border-bottom: .5px solid var(--b-line-strong); background: var(--b-bg); padding-top: env(safe-area-inset-top, 0px); }
.p-top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.p-top .b-logo svg { height: 26px; }
.p-top a.p-back { display: inline-flex; align-items: center; gap: 2px; min-height: var(--b-tap); padding-inline: 4px 8px; font-size: var(--b-t-callout); font-weight: 500; color: var(--b-link); text-decoration: none; }
.p-top a.p-back:hover { text-decoration: underline; }

/* ---------- Legales ---------- */
.p-doc { padding-block: clamp(40px, 6vw, 96px) clamp(64px, 8vw, 128px); }
.p-doc__in { max-width: 720px; }
.p-doc h1 { font: 700 var(--b-t-title1)/var(--b-lh-title1) var(--b-font-display); font-variation-settings: "wdth" 96, "opsz" 96; margin-bottom: 8px; }
.p-doc .p-meta { font-size: var(--b-t-footnote); line-height: var(--b-lh-footnote); color: var(--b-ink-2); margin-bottom: 32px; }
.p-doc h2 { font: 600 var(--b-t-title3)/var(--b-lh-title3) var(--b-font-body); margin: 48px 0 12px; scroll-margin-top: 24px; }
.p-doc p, .p-doc li { color: color-mix(in srgb, var(--b-ink) 86%, var(--b-bg)); max-width: 68ch; }
.p-doc p + p { margin-top: 16px; }
.p-doc ul, .p-doc ol { padding-left: 1.25em; display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.p-doc strong { color: var(--b-ink); font-weight: 600; }
.p-callout { margin: 24px 0 32px; padding: 16px 20px; border-radius: var(--b-r-md); background: color-mix(in srgb, var(--b-resaltador) 20%, var(--b-surface)); border: 1px solid color-mix(in srgb, var(--b-resaltador) 65%, var(--b-line)); }
.p-callout p { color: var(--b-ink); }
:root[data-theme="dark"] .p-callout { background: color-mix(in srgb, var(--b-resaltador) 9%, var(--b-surface)); border-color: color-mix(in srgb, var(--b-resaltador) 30%, var(--b-line)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-callout { background: color-mix(in srgb, var(--b-resaltador) 9%, var(--b-surface)); border-color: color-mix(in srgb, var(--b-resaltador) 30%, var(--b-line)); } }
/* Índice: lista vertical, sin subrayado */
.p-toc { display: flex; flex-direction: column; padding: 8px 0; border-block: .5px solid var(--b-line-strong); font-size: var(--b-t-callout); margin-bottom: 8px; }
.p-toc a { display: flex; align-items: center; min-height: var(--b-tap); color: var(--b-link); text-decoration: none; }
.p-toc a:hover { text-decoration: underline; }

/* ---------- Pie ---------- */
.p-foot { border-top: 1px solid var(--b-line); padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: var(--b-t-footnote); line-height: var(--b-lh-footnote); color: var(--b-ink-2); background: var(--b-surface); }
.p-foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.p-foot__nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.p-foot a { display: inline-flex; align-items: center; min-height: var(--b-tap); color: var(--b-ink-2); }

/* ---------- Estado (gracias, 404) ---------- */
.p-center { min-height: calc(100dvh - 160px); display: grid; place-items: center; padding-block: 48px; }
.p-center__in { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.p-center h1 { font: 750 2.125rem/1.1765 var(--b-font-display); letter-spacing: -0.005em; font-variation-settings: "wdth" 96, "opsz" 96; }
.p-center h1:focus { outline: none; }
@media (min-width: 768px) { .p-center h1 { font-size: 3rem; line-height: 1.0833; } }
.p-actions { gap: 8px 12px; }
@media (max-width: 480px) { .p-actions { flex-direction: column; align-items: stretch; width: 100%; } .p-actions .b-btn { width: 100%; } }

/* Icono de estado: círculo de 64 con símbolo de trazo (✓ aprobado · ✕ rechazado · reloj pendiente) */
.p-state { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--b-surface-2); color: var(--b-ink-2); }
.p-state > * { grid-area: 1 / 1; display: none; }
.p-state__ic { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.p-state__spin { width: 26px; height: 26px; border-width: 2.5px; }
[data-estado="cargando"] .p-state__spin { display: block; }
[data-estado="aprobado"] .p-state { background: var(--b-bajo-bg); color: var(--b-bajo); }
[data-estado="aprobado"] .p-state__ic--ok { display: block; stroke-dasharray: 20; stroke-dashoffset: 20; animation: p-draw var(--b-dur-slow) 120ms var(--b-spring) forwards; }
[data-estado="rechazado"] .p-state { background: var(--b-alto-bg); color: var(--b-alto); }
[data-estado="rechazado"] .p-state__ic--no { display: block; }
[data-estado="pendiente"] .p-state, [data-estado="desconocido"] .p-state { background: var(--b-medio-bg); color: var(--b-medio); }
[data-estado="pendiente"] .p-state__ic--wait, [data-estado="desconocido"] .p-state__ic--wait { display: block; }
[data-estado="sin-id"] .p-state__ic--info { display: block; }
@keyframes p-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { [data-estado="aprobado"] .p-state__ic--ok { stroke-dashoffset: 0; animation: none; } }

/* Pasos: lista con separadores, no tarjetas */
.p-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; width: 100%; border-block: .5px solid var(--b-line-strong); }
.p-steps li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; padding: 16px 0; color: var(--b-ink-2); }
.p-steps li + li { border-top: .5px solid var(--b-line); }
.p-steps b { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--b-resaltador); color: #0f1233; font: 600 var(--b-t-caption)/1 var(--b-font-body); }
.p-steps strong { color: var(--b-ink); font-weight: 600; }

.p-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--b-t-footnote); line-height: var(--b-lh-footnote); color: var(--b-ink-2); }
.p-ref code { font-size: var(--b-t-footnote); color: var(--b-ink-2); overflow-wrap: anywhere; }
.p-ref .b-btn { margin-left: -4px; }

/* Alias de la versión anterior (por si otra página aún los usa) */
.p-seal { width: 64px; height: 64px; color: var(--b-ink); }
.p-status { display: inline-flex; align-items: center; gap: 8px; }