/* Fuentes del diseño "Órbita grafito" (T-56), autoalojadas. Archivos variables, solo subconjunto latino. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-latin.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/outfit-latin.woff2") format("woff2"); }
/* ==========================================================================
   Transitran — hoja de estilos principal · tokens v5 "Órbita grafito" (T-56)
   - Tema oscuro grafito por defecto; tema claro con data-theme="light" (assets/js/theme.js).
   - Tonos de sección: .tone-day (sección clara dentro del tema oscuro, blanca en el claro)
     y .tone-dark (banda que sigue oscura en el tema claro: cierre y pie).
   - Los componentes solo usan tokens semánticos: cambian solos con el tema y el tono.
   - Sin alias heredados: los nombres del sistema anterior (--gold, --night-*, --ivory…) se retiraron en la parte 2.
   Regla: ningún color hexadecimal fuera de este bloque.
   Contrastes (WCAG, texto normal) anotados al lado de cada valor.
   ========================================================================== */

/* --- Tema oscuro (por defecto) y bandas oscuras en el tema claro --- */
:root, :root[data-theme="light"] .tone-dark {
    color-scheme: dark;
    --bg: #121417;            /* grafito */
    --bg-alt: #1A1D21;
    --surface: #1A1D21;       /* tarjetas, píldoras */
    --surface-2: #22262B;
    --glow: #173A35;          /* halo del hero y fondo del cierre */
    --line: #2A3036;          /* bordes y anillos (decorativo) */
    --line-strong: #3B444B;
    --field-line: #6E7A75;    /* bordes de campos: 4,0:1 sobre --bg */
    --text-strong: #E8ECEA;   /* 15,4:1 sobre --bg */
    --text: #DCE2DF;          /* 13,9:1 */
    --text-muted: #A9B3AF;    /* 8,6:1 sobre --bg · 7,9:1 sobre --surface */
    --text-dim: #9AA5A0;      /* 7,2:1 sobre --bg · 6,6:1 sobre --surface */
    --accent: #8FD3C7;        /* acento de texto: 10,8:1 sobre --bg */
    --accent-fill: #3FA796;   /* relleno del botón primario y puntos */
    --accent-fill-hover: #4DB8A6;
    --on-accent: #0E1513;     /* 6,3:1 sobre --accent-fill */
    --accent-soft: rgb(63 167 150 / .14);
    --accent-line: rgb(63 167 150 / .45);
    --numeral: #2F363C;       /* números decorativos grandes (aria-hidden) */
    --glass: rgb(32 36 40 / .55);
    --glass-line: rgb(255 255 255 / .12);
    --menu-bg: rgb(26 29 33 / .94);
    --shade: rgb(0 0 0 / .6);
    --danger: #F0A39A;
    --ok: #86C4A1;
}

/* --- Tema claro y secciones claras dentro del tema oscuro --- */
:root[data-theme="light"], :root .tone-day {
    color-scheme: light;
    --bg: #F3F5F4;
    --bg-alt: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #EEF1EF;
    --glow: #DDEFEB;
    --line: #DCE2DF;
    --line-strong: #B9C3BF;
    --field-line: #6E7A75;    /* 4,6:1 sobre blanco */
    --text-strong: #121417;   /* 17,1:1 sobre --bg */
    --text: #1F2724;          /* 14,2:1 */
    --text-muted: #4D5753;    /* 6,8:1 sobre --bg · 7,3:1 sobre blanco */
    --text-dim: #56605C;      /* 6,1:1 sobre --bg */
    --accent: #1F6E62;        /* 5,5:1 sobre --bg · 6,0:1 sobre blanco */
    --accent-fill: #1F6E62;
    --accent-fill-hover: #185A50;
    --on-accent: #FFFFFF;     /* 6,0:1 */
    --accent-soft: rgb(31 110 98 / .1);
    --accent-line: rgb(31 110 98 / .4);
    --numeral: #D3DCD8;
    --glass: rgb(255 255 255 / .72);
    --glass-line: rgb(18 20 23 / .12);
    --menu-bg: rgb(255 255 255 / .97);
    --shade: rgb(18 20 23 / .25);
    --danger: #B42318;
    --ok: #1E7A4F;
}
/* En el tema claro, las secciones "día" pasan a blanco para alternar con el gris del fondo. */
:root[data-theme="light"] .tone-day { --bg: #FFFFFF; --bg-alt: #F3F5F4; --surface: #F3F5F4; }
:root .tone-day.tone-paper { --bg: #FFFFFF; --surface: #F3F5F4; }

/* --- Constantes (se declaran en cada tono para que resuelvan con sus valores) --- */
:root, :root .tone-day, :root .tone-dark {
    /* WhatsApp: el verde del diseño (#1E8E5A) da 4,1:1 con blanco; se oscurece a 5,4:1 (AA). */
    --cta: #17794C;
    --cta-hover: #136640;
    --on-cta: #FFFFFF;
    --warn-bg: #FDECEC;
    --warn-ink: #B42318;      /* 5,9:1 sobre --warn-bg */
    --focus-ring: var(--accent);
}

:root {
    /* --- Tipografía --- */
    --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Outfit", "Manrope", system-ui, sans-serif;
    --fs-xs: 1rem;        /* 16: mínimo para etiquetas y letra legal */
    --fs-sm: 1rem;        /* 16 */
    --fs-base: 1.125rem;  /* 18: cuerpo */
    --fs-lg: 1.1875rem;   /* 19: entradillas */
    --fs-xl: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);       /* h3 22 a 28 */
    --fs-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --fs-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);              /* h2 interiores 32 a 48 */
    --fs-4xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);       /* h1 interiores 36 a 56 */
    --fs-section: clamp(2.125rem, 1.2rem + 3.4vw, 3.875rem); /* h2 del inicio 34 a 62 */
    --fs-hero: clamp(2.5rem, 1rem + 5.6vw, 6rem);           /* h1 del inicio 40 a 96 */
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
    --tracking-display: -.02em;
    --tracking-label: .16em;

    /* --- Espaciado --- */
    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem;
    --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem;
    --sp-20: 5rem; --sp-24: 6rem;
    --section-y: clamp(4.5rem, 8vw, 6.875rem);   /* 72 a 110 */
    --gutter: clamp(1rem, 4vw, 3rem);            /* 16 a 48 */
    --shell: 80rem;                              /* 1280 */
    --measure: 68ch;
    --header-h: 5.75rem;                         /* barra flotante 64 + márgenes */
    --tap: 3rem;                                 /* 48 */
    --tap-lg: 3.5rem;                            /* 56 */

    /* --- Radios --- */
    --r-sm: .5rem;     /* 8: etiquetas */
    --r-md: .75rem;    /* 12: campos, opciones de menú */
    --r-lg: 1rem;      /* 16: tarjetas pequeñas, menús */
    --r-xl: 1.25rem;   /* 20: tarjetas */
    --r-2xl: 1.375rem; /* 22: paneles */
    --r-pill: 999px;   /* botones y píldoras */

    /* --- Elevación --- */
    --shadow-hover: 0 20px 36px -26px var(--shade);
    --shadow-float: 0 20px 40px -28px var(--shade);
    --shadow-menu: 0 30px 50px -30px var(--shade);
    --blur-glass: blur(16px) saturate(150%);

    /* --- Capas --- */
    --z-header: 100; --z-actionbar: 90; --z-skip: 400;

    /* --- Movimiento: solo transform / opacity / clip-path / filter --- */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-rise: cubic-bezier(.2, .7, .2, 1);
    --ease-inout: cubic-bezier(.65, 0, .35, 1);
    --dur-fast: 160ms;
    --dur-ui: 240ms;
    --dur-reveal: 600ms;
}

@media (prefers-contrast: more) {
    :root { --line: var(--line-strong); --text-muted: var(--text); --text-dim: var(--text-muted); }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--sp-4));
    accent-color: var(--accent);
    background: var(--bg);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
}

::selection { background: var(--accent); color: var(--on-accent); }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-display);
    line-height: 1.12;
    color: var(--text-strong);
    text-wrap: balance;
}
h1, h2 { font-weight: var(--fw-semibold); }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon.flip { transform: scaleX(-1); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.scroll-sentinel { position: absolute; top: 0; width: 1px; height: var(--sp-2); pointer-events: none; }

.skip-link {
    position: absolute; left: var(--sp-4); top: -3.75rem; z-index: var(--z-skip);
    background: var(--accent); color: var(--on-accent); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    font-weight: var(--fw-medium);
    transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
@media (forced-colors: active) {
    :focus-visible { outline: 2px solid Highlight; }
}

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

/* Etiqueta de sección: texto corto en dorado, sin adornos */
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);           /* 16 (el diseño usa 13: se sube por legibilidad) */
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    line-height: 1.4;
}
.eyebrow { display: inline-block; color: var(--accent); }

h1 em, h2 em, h3 em {
    font-style: normal;
    font-weight: inherit;
    color: var(--accent);
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap-lg);
    padding: 0 1.75rem;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.1em; height: 1.1em; }

@media (max-width: 480px) {
    .btn { white-space: normal; text-align: center; padding-block: var(--sp-2); }
}
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6);
    min-height: 3.5rem; padding: var(--sp-5) 0; cursor: pointer; list-style: none;
    font-size: var(--fs-lg); line-height: 1.4; font-weight: var(--fw-medium); color: var(--text-strong);
    transition: color var(--dur-fast) ease;
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 1.25rem; height: 1.25rem; color: var(--text-muted); transition: transform var(--dur-ui) var(--ease-out), color var(--dur-fast) ease; }
.faq-item.is-open summary .icon,
.no-js .faq-item[open] summary .icon { transform: rotate(45deg); color: var(--accent); }
.faq-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-ui) var(--ease-out), opacity var(--dur-ui) ease; }
.faq-item.is-open .faq-body,
.no-js .faq-item[open] .faq-body { grid-template-rows: 1fr; opacity: 1; }
.faq-clip { overflow: hidden; min-height: 0; }
.faq-content { padding-bottom: var(--sp-6); color: var(--text-muted); max-width: var(--measure); display: grid; gap: var(--sp-3); }
.faq-content a { color: var(--accent); text-underline-offset: 3px; }



@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .faq-body { transition: opacity 150ms ease; }
    .btn:active { transform: none; }
}

/* ==========================================================================
   Buscador del sitio (assets/js/search.js)
   ========================================================================== */

.search-dialog {
    width: min(42rem, calc(100vw - 2 * var(--gutter))); max-height: min(36rem, 80dvh);
    margin: 12vh auto auto; padding: 0; overflow: hidden;
    background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); box-shadow: var(--shadow-hover);
}
.search-dialog[open] { display: flex; flex-direction: column; animation: search-in var(--dur-ui) var(--ease-out); }
.search-dialog::backdrop { background: rgb(5 9 16 / .72); backdrop-filter: blur(4px); }
@keyframes search-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.search-dialog__form {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
}
.search-dialog__form .icon { color: var(--accent); flex: none; }
.search-dialog__form input {
    flex: 1; min-width: 0; min-height: var(--tap); border: 0; background: transparent;
    color: var(--text-strong); font: inherit; font-size: var(--fs-lg); outline: none;
}
.search-dialog__close {
    min-height: var(--tap);
    flex: none; padding: 0 var(--sp-3); border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--accent-soft); color: var(--text-muted); font-size: var(--fs-xs);
}
.search-dialog__status { padding: var(--sp-3) var(--sp-5) 0; font-size: var(--fs-sm); color: var(--text-dim); }
.search-dialog__list { overflow-y: auto; padding: var(--sp-2) var(--sp-3) var(--sp-4); list-style: none; }

.search-result {
    display: grid; gap: .15rem; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    color: var(--text); text-decoration: none; border: 1px solid transparent;
}
.search-result:hover, [aria-selected="true"] > .search-result { background: var(--accent-soft); border-color: var(--accent-line); }
.search-result__tipo { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.search-result__titulo { font-weight: var(--fw-semibold); color: var(--text-strong); }
.search-result__texto { font-size: var(--fs-sm); color: var(--text-muted); }

.mobile-search { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.mobile-search input {
    flex: 1; min-width: 0; min-height: var(--tap); padding: 0 var(--sp-3); font: inherit;
    border: 1px solid var(--field-line); border-radius: var(--r-md); background: var(--surface); color: var(--text-strong);
}
.mobile-search button { width: var(--tap); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--accent-soft); color: var(--text-strong); }
@media (max-width: 600px) {
    .search-dialog { margin-top: var(--sp-4); max-height: calc(100dvh - 2 * var(--sp-4)); }
}
@media (prefers-reduced-motion: reduce) { .search-dialog[open] { animation: none; }
}

/* Logo y botón según el tema */
.logo--light { display: none; }
:root[data-theme="light"] .logo--dark { display: none; }
:root[data-theme="light"] .logo--light { display: block; }
:root[data-theme="light"] .site-footer .logo--light { display: none; }
:root[data-theme="light"] .site-footer .logo--dark { display: block; }
.theme-toggle {
    display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none;
    border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--text-muted);
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--accent-line); color: var(--text-strong); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ==========================================================================
   Menús desplegables del nav: qué hay en cada página (assets/js/menu.js)
   ========================================================================== */
.main-nav .nav-item { position: relative; display: flex; align-items: center; gap: .125rem; }

.nav-panel {
    position: absolute; top: calc(100% + .75rem); left: -1rem; z-index: calc(var(--z-header) + 1);
    width: 20rem; padding: var(--sp-5); display: grid; gap: var(--sp-2);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: var(--shadow-hover);
    opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
/* Puente invisible para que el puntero no pierda el panel al bajar */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.875rem; height: .875rem; }
@media (hover: hover) and (pointer: fine) {
    .nav-item:hover > .nav-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
}
.nav-item.is-open > .nav-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.nav-panel ul { display: grid; gap: .125rem; }
.main-nav .nav-panel a {
    display: block; padding: .45rem .6rem; margin-inline: -.6rem; border: 0; border-radius: var(--r-sm);
    color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.35;
}
.main-nav .nav-panel a:hover, .main-nav .nav-panel a:focus-visible { background: var(--accent-soft); color: var(--text-strong); }
.main-nav .nav-panel .nav-panel__all {
    display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-3);
    border-top: 1px solid var(--line); border-radius: 0; color: var(--accent); font-weight: var(--fw-semibold);
}
@media (prefers-reduced-motion: reduce) { .nav-panel { transition: none; transform: none; }
}

/* ==========================================================================
   Componentes v5 "Órbita grafito" (T-56) — reutilizables en todas las páginas.
   Catálogo y uso: docs/01-diseno/DISENO.md §3. Solo tokens; nada de colores en duro.
   ========================================================================== */

/* Tonos de sección: fijan fondo y color; los tokens los redefine el bloque :root */
.tone-day, .tone-dark { background: var(--bg); color: var(--text); }

/* Titular con la fuente de display del diseño (clase .ot del original) */
.ot { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); line-height: 1.05; color: var(--text-strong); }
.ot em, .sec-title em { font-style: normal; color: var(--accent); }

/* Vidrio: barra, insignias, botones secundarios, promesas */
.glass { background: var(--glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border: 1px solid var(--glass-line); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--menu-bg); }
}

/* Secciones */
.sec { position: relative; padding-block: var(--section-y); }
.sec-head { max-width: 47.5rem; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-title { margin-top: .875rem; font-size: var(--fs-section); }
.sec-lead { margin-top: var(--sp-4); max-width: 38rem; font-size: var(--fs-base); line-height: 1.6; color: var(--text-muted); }
.sec-head--center .sec-lead { margin-inline: auto; }

/* Botones del diseño (se combinan con .btn) */
.btn--primary { background: var(--accent-fill); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-fill-hover); }
.btn--wa { background: var(--cta); color: var(--on-cta); }
.btn--wa:hover { background: var(--cta-hover); }
.btn--glass { color: var(--text-strong); font-weight: var(--fw-semibold); }
.btn--glass:hover { border-color: var(--accent-line); }
.btn .icon { width: 1.375rem; height: 1.375rem; }

/* Enlace con flecha subrayado (proceso, tarjetas) */
.link-line {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap);
    color: var(--accent); font-size: var(--fs-base); font-weight: var(--fw-semibold); text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left calc(100% - .55rem) / 100% 1px no-repeat;
}
.link-line .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-line:hover .icon { transform: translateX(3px); }
}

/* Insignia de vidrio con punto de acento */
.badge-dot { display: inline-flex; align-items: center; gap: var(--sp-3); padding: .5rem 1rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.35; color: var(--text-strong); }
.badge-dot::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent-fill); }

/* Píldora decorativa (anillos del hero) */
.pill { display: inline-block; padding: .375rem .75rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--text-muted); font-size: .875rem; font-weight: var(--fw-semibold); white-space: nowrap; }

/* Tarjeta */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.625rem; }
.lift { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease; }
@media (hover: hover) and (pointer: fine) { .lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--accent-line); }
}

/* Número decorativo grande (siempre aria-hidden: su contraste es bajo a propósito) */
.numeral { font-family: var(--font-display); font-weight: var(--fw-medium); line-height: .9; color: var(--numeral); }

/* Etiqueta de alerta ("Plazo crítico") */
.chip-warn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: .4375rem .75rem; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn-ink); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.chip-warn .icon { width: 1rem; height: 1rem; }

/* Botón redondo (flechas de carrusel) */
.round-btn { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-strong); cursor: pointer; transition: background-color var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.round-btn--fill { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.round-btn:disabled { opacity: .45; cursor: default; }
.round-btn .icon { width: 1.25rem; height: 1.25rem; }

/* Carrusel horizontal con scroll nativo (funciona sin JS; las flechas solo desplazan) */
.hscroll { display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: var(--sp-2) var(--gutter) var(--sp-6); margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; overscroll-behavior-x: contain; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex: 0 0 min(19.375rem, 80vw); }
.hscroll-bar { height: 3px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.hscroll-bar > span { display: block; height: 100%; background: var(--accent-fill); transform-origin: left; transform: scaleX(.0714); transition: transform .6s var(--ease-out); }
.hscroll-count { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }

/* Pestañas en píldora (role=tablist; sin JS se ocultan y se ven todos los paneles) */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.tabs [role="tab"] { min-height: var(--tap); padding: .625rem 1.25rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--text-strong); font-weight: var(--fw-bold); cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.tabs [role="tab"][aria-selected="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.no-js .tabs { display: none; }

/* Tarjeta de cifra (sanciones) */
.stat { border-radius: var(--r-xl); padding: 1.625rem; background: var(--surface); border: 1px solid var(--line); }
.stat--accent { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.stat__k { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.stat--accent .stat__k, .stat--accent .stat__s { color: inherit; }
.stat__v { margin-top: .375rem; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height: 1.15; letter-spacing: var(--tracking-display); color: var(--text-strong); }
.stat--accent .stat__v { color: inherit; }
.stat__s { margin-top: .375rem; font-size: var(--fs-xs); }

/* Línea de tiempo vertical con relleno al hacer scroll */
.tl { position: relative; padding-left: 3rem; }
.tl::before, .tl__fill { content: ""; position: absolute; left: .625rem; top: .75rem; bottom: .75rem; width: 2px; background: var(--line); }
.tl__fill { background: var(--accent); transform-origin: top; transform: scaleY(.34); }
.tl ol { list-style: none; margin: 0; padding: 0; }
.tl__step { position: relative; padding-bottom: 2.875rem; }
.tl__step:last-child { padding-bottom: 0; }
.tl__dot { position: absolute; left: -2.875rem; top: .25rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); box-shadow: 0 0 0 5px var(--bg); }
.tl__step.is-done .tl__dot { background: var(--accent); border-color: var(--accent); }
.tl__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.tl__when { font-size: var(--fs-xs); color: var(--text-muted); }
.tl__title { margin-top: .375rem; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: var(--fw-medium); }
.tl__num { font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem); }
.tl__text { margin-top: var(--sp-3); max-width: 40rem; font-size: var(--fs-base); line-height: 1.7; color: var(--text-muted); }
.tl__step .chip-warn { margin-top: .875rem; }

/* Preguntas en tarjetas (usa el acordeón .faq-item de main.js; aquí solo se anima la opacidad) */
.faq-cards { display: grid; gap: .625rem; border: 0; }
.faq-cards .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .3s ease; }
.faq-cards .faq-item.is-open, .no-js .faq-cards .faq-item[open] { border-color: var(--accent); }
.faq-cards .faq-item summary { padding: 1.25rem 1.375rem; min-height: var(--tap); font-size: 1.0625rem; font-weight: var(--fw-semibold); }
.faq-cards .faq-item summary .icon { box-sizing: content-box; width: 1rem; height: 1rem; padding: .4375rem; border-radius: 50%; background: var(--bg); color: var(--text-strong); }
.faq-cards .faq-item.is-open summary .icon, .no-js .faq-cards .faq-item[open] summary .icon { background: var(--accent); color: var(--surface); }
.faq-cards .faq-body { transition: opacity var(--dur-ui) ease; }
.faq-cards .faq-content { padding: 0 1.375rem 1.25rem; font-size: var(--fs-base); line-height: 1.65; }

/* Movimiento de entrada (solo transform/opacity; nada con movimiento reducido) */
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: no-preference) {
    .r1 { animation: rise-in .9s var(--ease-rise) .1s both; }
    .r2 { animation: rise-in .9s var(--ease-rise) .25s both; }
    .r3 { animation: rise-in .9s var(--ease-rise) .4s both; }
    .fi { animation: fade-in .45s ease both; }
    @supports (animation-timeline: view()) {
        .rv { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
        .tl__fill { animation: grow-y linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
}
}