/* Tokens del Design System ABC (versión 1), tema claro. Generado por _fuente/generar.py: no editar a mano. */
:root {
  --bg-app: var(--color-neutral-50);
  --bg-surface: var(--color-neutral-100);
  --bg-surface-raised: var(--color-neutral-50);
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-disabled: var(--color-neutral-400);
  --border-default: var(--color-neutral-200);
  --border-strong: var(--color-neutral-400);
  --btn-bg: var(--color-primary-600);
  --btn-bg-hover: var(--color-primary-700);
  --btn-bg-active: var(--color-primary-800);
  --btn-bg-disabled: var(--color-primary-300);
  --btn-fg: #ffffff;
  --input-focus: var(--color-primary-500);
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #dcdee1;
  --color-neutral-200: #bfc2c8;
  --color-neutral-300: #a3a8ae;
  --color-neutral-400: #888d95;
  --color-neutral-500: #6f747c;
  --color-neutral-600: #575c63;
  --color-neutral-700: #40444a;
  --color-neutral-800: #2b2e32;
  --color-neutral-900: #181a1c;
  --color-neutral-950: #070708;
  --color-primary-50: #fff0ee;
  --color-primary-100: #fcd0ca;
  --color-primary-200: #f2afa8;
  --color-primary-300: #e69087;
  --color-primary-400: #d67168;
  --color-primary-500: #c4524b;
  --color-primary-600: #af332f;
  --color-primary-700: #9b1419;
  --color-primary-800: #790001;
  --color-primary-900: #5b0000;
  --color-primary-950: #3d0000;
  --color-secondary-50: #bcffff;
  --color-secondary-100: #91e7ff;
  --color-secondary-200: #67cfff;
  --color-secondary-300: #3ab6f9;
  --color-secondary-400: #0ea5e9;
  --color-secondary-500: #0085c2;
  --color-secondary-600: #006ea1;
  --color-secondary-700: #00577f;
  --color-secondary-800: #05405d;
  --color-secondary-900: #0d2b3d;
  --color-secondary-950: #0e171d;
  --color-success-50: #d9ffdf;
  --color-success-100: #afeeb9;
  --color-success-200: #85da96;
  --color-success-300: #5cc475;
  --color-success-400: #16a34a;
  --color-success-500: #00953f;
  --color-success-600: #007b31;
  --color-success-700: #006226;
  --color-success-800: #08481e;
  --color-success-900: #0f3017;
  --color-success-950: #0f1911;
  --color-warning-50: #ffe8bd;
  --color-warning-100: #ffca91;
  --color-warning-200: #ffac67;
  --color-warning-300: #ef903d;
  --color-warning-400: #d97706;
  --color-warning-500: #ba6100;
  --color-warning-600: #9a4e00;
  --color-warning-700: #7a3e00;
  --color-warning-800: #5a2f04;
  --color-warning-900: #3b210b;
  --color-warning-950: #1d140d;
  --color-danger-50: #ffefeb;
  --color-danger-100: #ffc9be;
  --color-danger-200: #ffa494;
  --color-danger-300: #ff7e6d;
  --color-danger-400: #f25747;
  --color-danger-500: #df2a1f;
  --color-danger-600: #d20000;
  --color-danger-700: #a10000;
  --color-danger-800: #7c0000;
  --color-danger-900: #570000;
  --color-danger-950: #320000;
  --color-info-50: #fcf2f2;
  --color-info-100: #ebd6d6;
  --color-info-200: #d9baba;
  --color-info-300: #c69fa0;
  --color-info-400: #b38586;
  --color-info-500: #9f6c6d;
  --color-info-600: #8b5456;
  --color-info-700: #763c3f;
  --color-info-800: #61262a;
  --color-info-900: #460913;
  --color-info-950: #340006;
  --color-color-mura0l47-50: #eff7f8;
  --color-color-mura0l47-100: #cce0e4;
  --color-color-mura0l47-200: #abc9d0;
  --color-color-mura0l47-300: #8bb2bb;
  --color-color-mura0l47-400: #6c9ca6;
  --color-color-mura0l47-500: #4d8692;
  --color-color-mura0l47-600: #2f707c;
  --color-color-mura0l47-700: #0e5b68;
  --color-color-mura0l47-800: #004450;
  --color-color-mura0l47-900: #002f3a;
  --color-color-mura0l47-950: #001c24;
  --color-color-mura1ahl-50: #fcf2f2;
  --color-color-mura1ahl-100: #ebd6d6;
  --color-color-mura1ahl-200: #d9baba;
  --color-color-mura1ahl-300: #c69fa0;
  --color-color-mura1ahl-400: #b38586;
  --color-color-mura1ahl-500: #9f6c6d;
  --color-color-mura1ahl-600: #8b5456;
  --color-color-mura1ahl-700: #763c3f;
  --color-color-mura1ahl-800: #61262a;
  --color-color-mura1ahl-900: #460913;
  --color-color-mura1ahl-950: #340006;
  --color-color-mura1mdd-50: #f5f5f4;
  --color-color-mura1mdd-100: #dcdcdb;
  --color-color-mura1mdd-200: #c3c3c2;
  --color-color-mura1mdd-300: #aaaaa9;
  --color-color-mura1mdd-400: #9d9d9c;
  --color-color-mura1mdd-500: #7c7c7b;
  --color-color-mura1mdd-600: #656565;
  --color-color-mura1mdd-700: #50504f;
  --color-color-mura1mdd-800: #3b3b3b;
  --color-color-mura1mdd-900: #282828;
  --color-color-mura1mdd-950: #161616;
  --color-color-mura21ca-50: #f5f5f5;
  --color-color-mura21ca-100: #dcdcdb;
  --color-color-mura21ca-200: #c3c3c2;
  --color-color-mura21ca-300: #aaaaa9;
  --color-color-mura21ca-400: #939391;
  --color-color-mura21ca-500: #7c7c7a;
  --color-color-mura21ca-600: #666664;
  --color-color-mura21ca-700: #50504e;
  --color-color-mura21ca-800: #3c3c3a;
  --color-color-mura21ca-900: #282826;
  --color-color-mura21ca-950: #1d1d1b;
  --font-brand: 'Inter', Poppins, system-ui, sans-serif;
  --font-system: Poppins, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --card-padding: 24px;
  --table-cell-padding: 12px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --btn-radius: 4px;
  --input-radius: 4px;
  --badge-radius: 999px;
  --card-radius: 8px;
  --toast-radius: 4px;
  --modal-radius: 8px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.1);
  --shadow-3: 0 4px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12);
  --shadow-4: 0 8px 16px rgba(0,0,0,0.1), 0 16px 48px rgba(0,0,0,0.18);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1);
  --toast-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12);
  --modal-shadow: 0 8px 16px rgba(0,0,0,0.1), 0 16px 48px rgba(0,0,0,0.18);
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 31px;
  --text-3xl: 39px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-loose: 1.75;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 4px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --btn-height: 40px;
  --input-height: 40px;
  --container-max: 1200px;
  --grid-gutter: 24px;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal: 1300;
  --z-toast: 1400;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear: linear;
  --gradient-brand: linear-gradient(90deg, #af332f 0%, #0085c2 100%);
}

/* ABC — componentes base. Solo tokens; ningún valor suelto salvo donde se indica. */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: none; cursor: pointer; font-family: var(--font-system); font-weight: var(--weight-medium); font-size: var(--text-sm); height: var(--btn-height); padding: 0 var(--space-4); border-radius: var(--btn-radius); transition: background var(--duration-fast) var(--ease-ease-in-out); }
.btn:focus-visible { outline: var(--border-2) solid var(--input-focus); outline-offset: 2px; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-primary:active { background: var(--btn-bg-active); }
.btn-primary:disabled { background: var(--btn-bg-disabled); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text-primary); border: var(--border-1) solid var(--border-strong); }
.btn-ghost:disabled { color: var(--text-disabled); cursor: not-allowed; }
.btn-danger { background: var(--color-danger-600); color: var(--btn-fg); }
.btn-danger:hover { background: var(--color-danger-700); }
.btn-danger:active { background: var(--color-danger-800); }
.btn-sm { height: var(--control-sm); padding: 0 var(--space-3); }
.btn-lg { height: var(--control-lg); padding: 0 var(--space-6); }

.field { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-system); }
.field-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.input { height: var(--input-height); padding: 0 var(--space-3); border-radius: var(--input-radius); border: var(--border-1) solid var(--border-strong); background: var(--bg-surface-raised); color: var(--text-primary); font-family: var(--font-system); font-size: var(--text-sm); }
.input::placeholder { color: var(--text-disabled); }
.input:focus, .input.is-focus { outline: var(--border-2) solid var(--input-focus); outline-offset: 2px; }
.input.is-error { border-color: var(--color-danger-600); }
.input:disabled { color: var(--text-disabled); cursor: not-allowed; }
.field-error { font-size: var(--text-xs); color: var(--color-danger-600); }
[data-theme="dark"] .field-error { color: var(--color-danger-300); }

.badge { display: inline-block; font-family: var(--font-system); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--leading-normal); padding: 2px var(--space-2); border-radius: var(--badge-radius); background: var(--color-neutral-100); color: var(--color-neutral-800); }
.badge-primary { background: var(--color-primary-100); color: var(--color-primary-800); }
.badge-success { background: var(--color-success-100); color: var(--color-success-800); }
.badge-warning { background: var(--color-warning-100); color: var(--color-warning-800); }
.badge-danger { background: var(--color-danger-100); color: var(--color-danger-800); }
.badge-info { background: var(--color-info-100); color: var(--color-info-800); }

.card { background: var(--bg-surface); border: var(--border-1) solid var(--border-default); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: var(--card-shadow); color: var(--text-primary); font-family: var(--font-system); }
.card-title { font-family: var(--font-brand); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-tight); margin: 0 0 var(--space-2); }
.card-body { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); margin: 0; }

.toast { background: var(--bg-surface-raised); color: var(--text-primary); border-left: var(--border-3) solid var(--color-info-600); border-radius: var(--toast-radius); box-shadow: var(--toast-shadow); padding: var(--space-3) var(--space-4); font-family: var(--font-system); font-size: var(--text-sm); line-height: var(--leading-normal); z-index: var(--z-toast); }
.toast-success { border-left-color: var(--color-success-600); }
.toast-danger { border-left-color: var(--color-danger-600); }
.toast-info { border-left-color: var(--color-info-600); }

.modal-scrim { background: color-mix(in srgb, var(--color-neutral-950) 50%, transparent); display: grid; place-items: center; z-index: var(--z-modal); }
.modal { background: var(--bg-surface-raised); color: var(--text-primary); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); padding: var(--space-5); font-family: var(--font-system); max-width: 440px; }
.modal-title { font-family: var(--font-brand); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); margin: 0 0 var(--space-2); }
.modal-body { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); margin: 0 0 var(--space-5); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

.table { width: 100%; border-collapse: collapse; font-family: var(--font-system); font-size: var(--text-sm); color: var(--text-primary); }
.table th { text-align: left; padding: var(--table-cell-padding); background: var(--bg-surface-raised); color: var(--text-secondary); font-weight: var(--weight-medium); border-bottom: var(--border-1) solid var(--border-default); }
.table td { padding: var(--table-cell-padding); border-bottom: var(--border-1) solid var(--border-default); }
.table .num { font-family: var(--font-mono); text-align: right; }
.table tbody tr:hover { background: var(--bg-surface); }

/* =====================================================================
   ABC — estilos del sitio.
   Todo color, tamaño, radio, sombra y duración sale de un token del
   Design System de ABC (variables generadas arriba de este archivo).
   Mobile first. Cortes: 640, 768, 1024 y 1280px.
   ===================================================================== */

:root {
    /* Alias de lectura, siempre a tokens del sistema. */
    --blanco: var(--btn-fg);
    --negro-marca: var(--color-color-mura21ca-950);
    --bordo: var(--color-color-mura1ahl-900);
    --turquesa-50: var(--color-color-mura0l47-50);
    --turquesa-100: var(--color-color-mura0l47-100);
    --turquesa-200: var(--color-color-mura0l47-200);
    --turquesa-300: var(--color-color-mura0l47-300);
    --turquesa-400: var(--color-color-mura0l47-400);
    --turquesa-500: var(--color-color-mura0l47-500);
    --turquesa-600: var(--color-color-mura0l47-600);
    --turquesa-700: var(--color-color-mura0l47-700);
    --turquesa-800: var(--color-color-mura0l47-800);
    --turquesa-900: var(--color-color-mura0l47-900);
    --alto-encabezado: 59px;
    --alto-barra: 65px;
    --margen-lateral: max(var(--space-4), env(safe-area-inset-left, 0px));
    --margen-lateral-der: max(var(--space-4), env(safe-area-inset-right, 0px));
    /* Las tres franjas del logotipo, como máscara (el color lo pone el token). */
    --franjas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 12h3l6-12H6zM5 12h5l6-12h-5zM12 12h8l6-12h-8z'/%3E%3C/svg%3E");
    color-scheme: light;
}
@media (min-width: 1024px) {
    :root {
        --alto-encabezado: 65px;
        --margen-lateral: max(var(--space-6), env(safe-area-inset-left, 0px));
        --margen-lateral-der: max(var(--space-6), env(safe-area-inset-right, 0px));
    }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
    margin: 0;
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-system);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    font-weight: var(--weight-regular);
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4 {
    font-family: var(--font-brand);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    text-wrap: pretty;
    margin: 0;
}
h1 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
@media (min-width: 768px) {
    h1 { font-size: var(--text-3xl); }
}
p { margin: 0; }
a { color: var(--color-primary-600); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-700); }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: var(--border-2) solid var(--input-focus); outline-offset: 2px; }
.icono { flex-shrink: 0; }
main:focus { outline: none; }
[id] { scroll-margin-top: calc(var(--alto-encabezado) + 72px); }

.solo-lectores {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
    position: absolute; left: var(--space-4); top: calc(-1 * var(--control-lg));
    background: var(--btn-bg); color: var(--btn-fg); padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm); z-index: var(--z-toast); text-decoration: none;
}
.saltar:focus { top: var(--space-2); color: var(--btn-fg); }

.contenedor {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-left: var(--margen-lateral);
    padding-right: var(--margen-lateral-der);
}
@media (min-width: 1280px) {
    .contenedor { max-width: calc(var(--container-max) + 2 * var(--space-6)); }
}

/* Tipografía de apoyo */
.kicker {
    display: flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-system);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}
.kicker-marca::before, .kicker-claro::before {
    content: ""; width: 26px; height: 12px; flex-shrink: 0;
    background: var(--color-primary-600);
    -webkit-mask: var(--franjas) no-repeat center / contain; mask: var(--franjas) no-repeat center / contain;
}
.kicker-claro { color: var(--color-neutral-200); }
.kicker-claro::before { background: var(--blanco); }
.titulo-seccion { font-size: var(--text-xl); letter-spacing: var(--tracking-normal); }
@media (min-width: 768px) {
    .titulo-seccion { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
}
.destacado { font-size: var(--text-lg); color: var(--text-primary); }
.nota { font-size: var(--text-xs); color: var(--text-secondary); }
.texto-claro { color: var(--color-neutral-200); }
.fuente { font-size: var(--text-xs); color: var(--text-secondary); }
.opcional { font-weight: var(--weight-regular); color: var(--text-secondary); }

.enlace-flecha {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    text-decoration: none;
}
.enlace-flecha .icono { transition: transform var(--duration-fast) var(--ease-ease-in-out); }
.enlace-flecha:hover .icono { transform: translateX(3px); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Variantes de botón para fondos de color (mismos tokens del sistema). */
.btn { text-decoration: none; }
.btn-claro { background: var(--blanco); color: var(--color-primary-700); }
.btn-claro:hover { background: var(--color-primary-50); color: var(--color-primary-800); }
.btn-contorno-claro { background: transparent; color: var(--blanco); border: var(--border-1) solid var(--blanco); }
.btn-contorno-claro:hover { background: var(--color-primary-800); color: var(--blanco); }
.btn-ghost:hover { background: var(--bg-surface-raised); border-color: var(--text-primary); color: var(--text-primary); }
.btn-primary:hover, .btn-primary:focus-visible { color: var(--btn-fg); }
.banda-oscura .btn-claro { color: var(--negro-marca); }
.banda-oscura .btn-claro:hover { background: var(--color-neutral-100); color: var(--negro-marca); }

/* Listas con la franja del logotipo como viñeta */
.lista-franjas { list-style: none; display: grid; gap: var(--space-2); }
.lista-franjas li { position: relative; padding-left: calc(var(--space-5) + var(--space-1)); }
.lista-franjas li::before {
    content: ""; position: absolute; left: 0; top: 0.55em; width: 20px; height: 9px;
    background: var(--color-primary-600);
    -webkit-mask: var(--franjas) no-repeat center / contain; mask: var(--franjas) no-repeat center / contain;
}

/* Chips */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
    display: inline-flex; align-items: center;
    font-size: var(--text-sm); line-height: var(--leading-tight);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--turquesa-50); color: var(--turquesa-800);
    border: var(--border-1) solid var(--turquesa-200);
}
.chip-enlace {
    background: var(--color-primary-50); color: var(--color-primary-800);
    border-color: var(--color-primary-200); text-decoration: none; font-weight: var(--weight-medium);
}
.chip-enlace:hover { background: var(--color-primary-100); color: var(--color-primary-900); }

/* ---------- Contenido provisorio ---------- */

.provisorio {
    background: var(--color-warning-50);
    color: var(--color-warning-900);
    outline: var(--border-1) dashed var(--color-warning-400);
    outline-offset: 1px;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.provisorio-bloque {
    background: var(--color-warning-50);
    color: var(--color-warning-900);
    border: var(--border-1) dashed var(--color-warning-400);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
}
.provisorio-bloque::before {
    content: "Provisorio";
    display: block;
    font-family: var(--font-system);
    font-size: var(--text-xs); font-weight: var(--weight-medium); font-style: normal;
    letter-spacing: var(--tracking-wide); text-transform: uppercase;
    color: var(--color-warning-800);
    margin-bottom: var(--space-1);
}
.sin-marcas .provisorio,
.sin-marcas .provisorio-bloque { background: transparent; color: inherit; outline: none; border-color: transparent; padding-inline: 0; }
.sin-marcas .provisorio-bloque::before { display: none; }
.sin-marcas .es-provisorio { border-style: solid !important; border-color: var(--border-default) !important; }

.revision {
    background: var(--color-warning-50);
    color: var(--color-warning-900);
    border-bottom: var(--border-1) solid var(--color-warning-200);
    font-size: var(--text-xs);
}
.revision-fila {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-2) var(--space-4); padding-block: var(--space-2);
}
.revision-boton {
    font: inherit; font-weight: var(--weight-medium);
    background: var(--blanco); color: var(--color-warning-900);
    border: var(--border-1) solid var(--color-warning-400); border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3); cursor: pointer;
}

/* ---------- Encabezado y navegación ---------- */

.encabezado {
    position: sticky; top: env(safe-area-inset-top, 0px);
    z-index: var(--z-sticky);
    background: var(--bg-app);
    border-bottom: var(--border-1) solid var(--border-default);
}
.encabezado-fila {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    min-height: calc(var(--alto-encabezado) - 1px);
}
.marca { display: block; padding-block: var(--space-3); }
.marca img { height: 34px; width: auto; }
@media (min-width: 1024px) { .marca img { height: 40px; } }

.boton-menu {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
    height: var(--control-md); padding: 0 var(--space-3);
    background: transparent; color: var(--text-primary);
    border: var(--border-1) solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
}
.boton-menu span { display: inline-flex; }
.boton-menu .boton-menu-cerrar { display: none; }
.boton-menu[aria-expanded="true"] .boton-menu-abrir { display: none; }
.boton-menu[aria-expanded="true"] .boton-menu-cerrar { display: inline-flex; }

.navegacion-lista { list-style: none; }
.navegacion-enlace {
    display: block; text-decoration: none;
    color: var(--text-secondary); font-weight: var(--weight-medium);
}
.navegacion-enlace:hover { color: var(--text-primary); }
.navegacion-enlace[aria-current="page"] { color: var(--text-primary); }

@media (max-width: 1023.98px) {
    .js .navegacion {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        background: var(--bg-app);
        border-bottom: var(--border-1) solid var(--border-default);
        box-shadow: var(--shadow-3);
        padding: var(--space-2) var(--margen-lateral-der) var(--space-5) var(--margen-lateral);
    }
    .js .navegacion.abierta { display: block; }
    .navegacion-lista { display: grid; }
    .navegacion-enlace {
        font-family: var(--font-brand); font-size: var(--text-lg); font-weight: var(--weight-bold);
        color: var(--text-primary);
        padding: var(--space-3) 0; border-bottom: var(--border-1) solid var(--border-default);
    }
    .navegacion-enlace[aria-current="page"] { color: var(--color-primary-700); }
    .navegacion-enlace[aria-current="page"]::before {
        content: ""; display: inline-block; width: 20px; height: 9px; margin-right: var(--space-2);
        background: var(--color-primary-600);
        -webkit-mask: var(--franjas) no-repeat center / contain; mask: var(--franjas) no-repeat center / contain;
    }
    .navegacion-accion { padding-top: var(--space-4); }
    .navegacion-accion .btn { width: 100%; height: var(--control-lg); font-size: var(--text-md); }
    html:not(.js) .encabezado-fila { flex-wrap: wrap; }
    html:not(.js) .boton-menu { display: none; }
    html:not(.js) .navegacion { width: 100%; padding-bottom: var(--space-3); }
}
@media (min-width: 1024px) {
    .boton-menu { display: none; }
    .navegacion-lista { display: flex; align-items: center; gap: var(--space-5); }
    .navegacion-enlace {
        font-size: var(--text-sm); position: relative;
        padding-block: var(--space-2);
    }
    .navegacion-enlace[aria-current="page"]::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--space-1));
        height: var(--border-2); background: var(--color-primary-600); border-radius: var(--radius-pill);
    }
    .navegacion-accion .btn[aria-current="page"] { background: var(--btn-bg-active); }
}

/* Migas de pan de las páginas internas */
.migas { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: var(--space-5); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.migas li + li::before { content: "/"; margin-right: var(--space-2); color: var(--text-disabled); }
.migas a { color: var(--text-secondary); }
.migas a:hover { color: var(--text-primary); }
.portada-roja .migas, .portada-roja .migas a { color: var(--color-primary-100); }
.portada-roja .migas li + li::before { color: var(--color-primary-200); }

/* Subnavegación dentro de una página */
.subnavegacion {
    position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--alto-encabezado));
    z-index: var(--z-dropdown);
    background: var(--bg-app);
    border-bottom: var(--border-1) solid var(--border-default);
}
.subnavegacion ul {
    list-style: none; display: flex; gap: var(--space-5);
    overflow-x: auto; scrollbar-width: none;
}
.subnavegacion ul::-webkit-scrollbar { display: none; }
.subnavegacion a {
    display: block; white-space: nowrap; text-decoration: none;
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    color: var(--text-secondary);
    padding-block: var(--space-3);
    border-bottom: var(--border-2) solid transparent;
}
.subnavegacion a:hover { color: var(--text-primary); }
.subnavegacion a[aria-current="true"] { color: var(--color-primary-700); border-bottom-color: var(--color-primary-600); }

/* ---------- Secciones ---------- */

.seccion { padding-block: var(--space-7); }
@media (min-width: 1024px) { .seccion { padding-block: var(--space-8); } }
.seccion-compacta { padding-bottom: var(--space-7); }
.seccion-tinte { background: var(--turquesa-50); border-block: var(--border-1) solid var(--turquesa-100); }
.banda-oscura { background: var(--negro-marca); color: var(--blanco); }
.banda-oscura h2, .banda-oscura h3 { color: var(--blanco); }
.banda-oscura a:not(.btn) { color: var(--blanco); }
.banda-roja { background: var(--color-primary-700); color: var(--blanco); }
.banda-roja h2 { color: var(--blanco); }
.banda-roja .texto-claro { color: var(--color-primary-100); }

.encabezado-seccion { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.encabezado-seccion > p:not(.kicker) { max-width: 96ch; }
.encabezado-seccion .kicker { margin-bottom: 0; }
.encabezado-seccion > p:not(.kicker) { color: var(--text-secondary); }
.banda-oscura .encabezado-seccion > p:not(.kicker) { color: var(--color-neutral-200); }
.encabezado-con-accion {
    max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4);
}
.encabezado-con-accion > div { display: grid; gap: var(--space-3); }

/* Portada de las páginas internas */
.portada {
    position: relative; overflow: hidden;
    padding-block: var(--space-7) var(--space-7);
    background: var(--bg-app);
}
@media (min-width: 1024px) { .portada { padding-block: var(--space-8); } }
.portada::after {
    content: ""; position: absolute; right: -40px; bottom: -10px; width: 340px; height: 157px;
    background: var(--turquesa-100);
    -webkit-mask: var(--franjas) no-repeat center / contain; mask: var(--franjas) no-repeat center / contain;
    pointer-events: none; display: none;
}
@media (min-width: 1024px) { .portada::after { display: block; } }
.portada .contenedor { position: relative; z-index: 1; }
.portada-bajada { font-size: var(--text-lg); color: var(--text-secondary); max-width: 90ch; margin-top: var(--space-4); }
.portada-roja { background: var(--color-primary-700); color: var(--blanco); }
.portada-roja::after { background: var(--color-primary-600); }
.portada-roja h1 { color: var(--blanco); }
.portada-roja .portada-bajada { color: var(--color-primary-100); }
.advertencia {
    display: grid; gap: var(--space-2); max-width: 90ch; margin-top: var(--space-5);
    background: var(--color-primary-800); color: var(--blanco);
    border-left: var(--border-3) solid var(--blanco); border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-md);
}
.advertencia-titulo {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.advertencia-titulo::before {
    content: ""; width: 26px; height: 12px; flex-shrink: 0; background: var(--blanco);
    -webkit-mask: var(--franjas) no-repeat center / contain; mask: var(--franjas) no-repeat center / contain;
}
.advertencia strong { font-family: var(--font-brand); font-weight: var(--weight-bold); }

/* ---------- Inicio ---------- */

.hero { padding-block: var(--space-7) var(--space-8); background: var(--bg-app); overflow: hidden; }
@media (min-width: 1024px) { .hero { padding-block: var(--space-9) var(--space-8); } }
.hero-grilla { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1024px) { .hero-grilla { grid-template-columns: 1.05fr 1fr; gap: var(--space-7); } }
.hero-texto { display: grid; gap: var(--space-5); justify-items: start; }
.hero-texto .kicker { margin-bottom: 0; }
.hero h1 { display: grid; gap: var(--space-4); justify-items: start; }
.sello {
    display: inline-block;
    font-family: var(--font-brand); font-weight: var(--weight-bold);
    font-size: var(--text-lg); letter-spacing: var(--tracking-wide); text-transform: uppercase;
    background: var(--color-primary-700); color: var(--blanco);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
}
@media (min-width: 768px) { .sello { font-size: var(--text-xl); } }
.hero-frase { display: block; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
@media (min-width: 768px) { .hero-frase { font-size: var(--text-3xl); } }
.hero-lema {
    font-size: var(--text-lg); color: var(--text-secondary);
    padding-left: var(--space-4); border-left: var(--border-2) solid var(--color-primary-600);
}

.franjas { position: relative; width: 100%; aspect-ratio: 16 / 10; max-width: 100%; }
@media (min-width: 1024px) { .franjas { aspect-ratio: 5 / 4.4; } }
.franja {
    position: absolute; inset: 0;
    background: url("../img/foto-banderas.jpg") 58% center / cover no-repeat;
    animation: franja-entra var(--duration-slow) var(--ease-ease-out) both;
}
.franja-1 { background: var(--color-primary-700); clip-path: polygon(0% 100%, 9% 100%, 39% 0%, 30% 0%); }
.franja-2 { clip-path: polygon(12% 100%, 31% 100%, 61% 0%, 42% 0%); animation-delay: 80ms; }
.franja-3 { clip-path: polygon(34% 100%, 70% 100%, 100% 0%, 64% 0%); animation-delay: 160ms; }
@keyframes franja-entra { from { transform: translateY(var(--space-5)); } to { transform: none; } }

.politica-grilla { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .politica-grilla { grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; } }
.politica-foto { margin: 0; }
.politica-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); }
@media (min-width: 1024px) { .politica-foto img { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--alto-encabezado) + var(--space-5)); } }
.politica-texto { display: grid; gap: var(--space-4); min-width: 0; }
.politica-texto .kicker { margin-bottom: 0; }
.politica-texto p:not(.kicker):not(.destacado) { color: var(--text-secondary); }
.cita {
    margin: var(--space-3) 0 0;
    background: var(--color-primary-50); color: var(--color-primary-900);
    border-left: var(--border-3) solid var(--color-primary-600);
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-brand); font-size: var(--text-lg); font-weight: var(--weight-medium); font-style: italic;
}

.accesos { list-style: none; display: grid; gap: var(--grid-gutter); }
@media (min-width: 640px) { .accesos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .accesos { grid-template-columns: repeat(4, 1fr); } }
.acceso {
    display: flex; flex-direction: column; height: 100%;
    background: var(--bg-surface-raised); color: var(--text-primary); text-decoration: none;
    border: var(--border-1) solid var(--border-default); border-radius: var(--card-radius);
    box-shadow: var(--card-shadow); overflow: hidden;
    transition: box-shadow var(--duration-normal) var(--ease-ease-in-out), transform var(--duration-normal) var(--ease-ease-in-out);
}
.acceso:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); color: var(--text-primary); }
.acceso-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-surface); }
.acceso-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-ease-out); }
.acceso:hover .acceso-media img { transform: scale(1.04); }
.acceso-media::after {
    content: ""; position: absolute; right: var(--space-4); bottom: var(--space-4); width: 44px; height: 20px;
    background: var(--blanco);
    -webkit-mask: var(--franjas) no-repeat center / contain; mask: var(--franjas) no-repeat center / contain;
}
.acceso-cuerpo { display: grid; gap: var(--space-2); padding: var(--space-5); flex: 1; align-content: start; grid-template-rows: auto auto 1fr auto; }
.acceso-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-md); height: var(--control-md); border-radius: var(--radius-sm);
    background: var(--color-primary-50); color: var(--color-primary-700);
    margin-top: calc(-1 * var(--space-5) - var(--control-md) / 2); position: relative;
    box-shadow: 0 0 0 var(--space-1) var(--bg-surface-raised);
}
.acceso-titulo { font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: var(--text-lg); line-height: var(--leading-tight); }
.acceso-texto { font-size: var(--text-sm); color: var(--text-secondary); }
.acceso-ir {
    display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-primary-600);
}
.acceso-ir .icono { transition: transform var(--duration-fast) var(--ease-ease-in-out); }
.acceso:hover .acceso-ir .icono { transform: translateX(3px); }

.destacado-principios { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) { .destacado-principios { grid-template-columns: 5fr 7fr; align-items: center; gap: var(--space-8); } }
.destacado-principios > div:first-child { display: grid; gap: var(--space-4); justify-items: start; }
.destacado-principios .kicker { margin-bottom: 0; }
.listas-principios { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .listas-principios { grid-template-columns: 1fr 1fr; } }
.listas-principios h3 {
    font-family: var(--font-system); font-size: var(--text-xs); font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-neutral-300);
    padding-bottom: var(--space-3); border-bottom: var(--border-1) solid var(--color-neutral-700);
}
.listas-principios ul { list-style: none; }
.listas-principios a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: var(--text-lg);
    text-decoration: none; padding-block: var(--space-3);
    border-bottom: var(--border-1) solid var(--color-neutral-800);
}
.listas-principios a::after {
    content: ""; width: 20px; height: 9px; opacity: 0;
    background: var(--color-primary-400);
    -webkit-mask: var(--franjas) no-repeat center / contain; mask: var(--franjas) no-repeat center / contain;
    transition: opacity var(--duration-fast) var(--ease-ease-in-out);
}
.listas-principios a:hover::after, .listas-principios a:focus-visible::after { opacity: 1; }
@media (min-width: 768px) { .listas-principios a { font-size: var(--text-xl); } }

.areas-accesos { list-style: none; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .areas-accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .areas-accesos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.area-acceso-todas { justify-content: space-between; background: var(--color-primary-700); border-color: var(--color-primary-700); color: var(--blanco); padding-inline: var(--space-4); }
.area-acceso-todas:hover { background: var(--color-primary-800); border-color: var(--color-primary-800); color: var(--blanco); }
.area-acceso {
    display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); overflow-wrap: break-word;
    padding: var(--space-3); min-height: var(--space-8);
    background: var(--bg-surface-raised); color: var(--text-primary); text-decoration: none;
    font-weight: var(--weight-medium);
    border: var(--border-1) solid var(--border-default); border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-ease-in-out), box-shadow var(--duration-fast) var(--ease-ease-in-out);
}
.area-acceso:hover { border-color: var(--color-primary-600); box-shadow: var(--shadow-2); color: var(--text-primary); }
.area-acceso-icono {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--control-md); height: var(--control-md); border-radius: var(--radius-sm);
    background: var(--color-primary-50); color: var(--color-primary-700);
}

.manifiesto-destacado { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 768px) { .manifiesto-destacado { grid-template-columns: 220px 1fr; gap: var(--space-8); } }
.manifiesto-destacado > div { display: grid; gap: var(--space-4); justify-items: start; }
.manifiesto-destacado .kicker { margin-bottom: 0; }
.manifiesto-tapa { display: block; max-width: 220px; }
.manifiesto-tapa img, .manifiesto-portada img { border-radius: var(--radius-sm); box-shadow: var(--shadow-4); }

.cierre-grilla { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 768px) { .cierre-grilla { grid-template-columns: auto 1fr; gap: var(--space-8); } }
.cierre-logo { height: 96px; width: auto; }
@media (min-width: 1024px) { .cierre-logo { height: 128px; } }
.cierre-grilla > div { display: grid; gap: var(--space-4); }

.seguir-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.seguir { padding-block: var(--space-6); }
.seguir h2 { font-size: var(--text-xl); }

/* ---------- Quiénes somos ---------- */

.presentacion-grilla { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .presentacion-grilla { grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: center; } }
.presentacion-texto { display: grid; gap: var(--space-4); }
.presentacion-texto p:not(.destacado) { color: var(--text-secondary); }
.presentacion-foto { margin: 0; }
.presentacion-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 60%; border-radius: var(--radius-lg); }

.numeros { list-style: none; display: grid; gap: var(--grid-gutter); margin-top: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.numeros li {
    background: var(--color-primary-50); border: var(--border-1) solid var(--color-primary-200);
    border-radius: var(--card-radius); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start;
}
.numero-cifra {
    font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: var(--text-3xl);
    line-height: var(--leading-tight); color: var(--color-primary-700);
    display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.numero-cifra span { font-size: var(--text-md); color: var(--color-primary-800); }
.numeros li > p:last-child { font-size: var(--text-sm); color: var(--text-secondary); }

.historia-grilla { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
    .historia-grilla { grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; }
    .historia-grilla .encabezado-seccion { position: sticky; top: calc(var(--alto-encabezado) + 72px); }
}
.linea-tiempo { list-style: none; position: relative; display: grid; gap: var(--space-5); }
.linea-tiempo::before {
    content: ""; position: absolute; left: 7px; top: var(--space-2); bottom: var(--space-2);
    width: var(--border-2); background: var(--turquesa-200);
}
.hito { position: relative; padding-left: var(--space-7); display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .hito { grid-template-columns: 128px 1fr; gap: var(--space-4); } }
.hito::before {
    content: ""; position: absolute; left: 0; top: 4px; width: var(--space-4); height: var(--space-4);
    border-radius: var(--radius-circle); background: var(--color-primary-700);
    box-shadow: 0 0 0 var(--space-1) var(--turquesa-50);
}
.hito.es-provisorio::before { background: var(--color-warning-400); }
.hito-anio { font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-primary-700); font-variant-numeric: tabular-nums; }
.hito > div {
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-2);
}
.hito.es-provisorio > div { border-style: dashed; border-color: var(--color-warning-400); }
.hito > div p { color: var(--text-secondary); font-size: var(--text-sm); }
/* «ABC en acción»: mosaico de cuatro cuadros que cambian de foto */
.mosaico {
    display: grid; gap: var(--space-3); aspect-ratio: 1 / 2;
    grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr);
    grid-template-areas: "a a" "a a" "b c" "d d";
}
@media (min-width: 768px) {
    .mosaico { aspect-ratio: 2 / 1; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr);
               grid-template-areas: "a a b c" "a a d d"; }
}
.mosaico-a { grid-area: a; } .mosaico-b { grid-area: b; } .mosaico-c { grid-area: c; } .mosaico-d { grid-area: d; }
.mosaico-cuadro { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--color-neutral-100); }
.mosaico-cuadro img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 900ms var(--ease-ease-in-out);
}
.mosaico-cuadro img.visible { opacity: 1; animation: mosaico-acercar 7s var(--ease-ease-out) both; }
@keyframes mosaico-acercar { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .mosaico-cuadro img.visible { animation: none; } }
.mosaico-controles { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
html:not(.js) .mosaico-controles { display: none; }

/* Equipo: carrusel circular (sin JavaScript, fila desplazable) */
.carrusel { --visibles: 2; --hueco: var(--space-4); position: relative; }
@media (min-width: 640px) { .carrusel { --visibles: 3; } }
@media (min-width: 1024px) { .carrusel { --visibles: 5; --hueco: var(--space-5); } }
.carrusel-ventana { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); }
/* Con JavaScript, el carrusel se mueve con transform: sin el «enganche» de
   la fila desplazable, que si no vuelve a mostrar siempre a la misma persona. */
.carrusel-activo .carrusel-ventana { overflow: hidden; scroll-snap-type: none; padding-block: var(--space-2) 0; margin-top: calc(-1 * var(--space-2)); touch-action: pan-y; }
.carrusel-activo .carrusel-pista > .integrante { scroll-snap-align: none; }
.carrusel-pista {
    list-style: none; display: flex; gap: var(--hueco); margin: 0; padding: 0;
    user-select: none; -webkit-user-select: none;
    transition: transform 450ms var(--ease-ease-out);
}
.carrusel-pista > .integrante {
    flex: 0 0 calc((100% - (var(--visibles) - 1) * var(--hueco)) / var(--visibles));
    scroll-snap-align: start; min-width: 0;
}
.integrante { display: grid; gap: var(--space-1); align-content: start; text-align: center; }
.integrante-foto {
    aspect-ratio: 1; border-radius: var(--radius-circle); overflow: hidden; margin: 0 auto var(--space-3);
    width: min(calc(100% - 2 * var(--space-3)), 184px);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-900));
    box-shadow: 0 0 0 var(--space-1) var(--bg-app), 0 0 0 calc(var(--space-1) + var(--border-2)) var(--turquesa-200);
}
.integrante-foto img { width: 100%; height: 100%; object-fit: cover; }
.integrante-iniciales {
    font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: var(--text-2xl);
    letter-spacing: var(--tracking-wide); color: var(--blanco);
}
.integrante-nombre { font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: var(--text-md); line-height: var(--leading-tight); }
.integrante-area { font-size: var(--text-sm); color: var(--color-primary-700); font-weight: var(--weight-medium); }
.carrusel-controles { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
html:not(.js) .carrusel-controles { display: none; }
.carrusel-boton {
    width: var(--control-lg); height: var(--control-lg); border-radius: var(--radius-circle);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--bg-surface-raised); color: var(--color-primary-700);
    border: var(--border-1) solid var(--border-default);
    transition: background var(--duration-fast) var(--ease-ease-out), color var(--duration-fast) var(--ease-ease-out);
}
.carrusel-boton:hover { background: var(--color-primary-700); color: var(--blanco); border-color: var(--color-primary-700); }
.carrusel-boton:focus-visible { outline: var(--border-2) solid var(--color-primary-600); outline-offset: 2px; }
.carrusel-boton > span { display: inline-flex; }
.carrusel-pausa .carrusel-seguir,
.carrusel-pausa[aria-pressed="true"] .carrusel-pausar { display: none; }
.carrusel-pausa[aria-pressed="true"] .carrusel-seguir { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .carrusel-pista { transition: none; } }

/* ---------- Qué pensamos ---------- */

.pensamos-grilla { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) { .pensamos-grilla { grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: center; } }
.pensamos-texto { display: grid; gap: var(--space-4); }
.pensamos-texto .kicker { margin-bottom: 0; }
.pensamos-texto .portada-bajada { margin-top: 0; color: var(--text-primary); }
.pensamos-texto p:last-child { color: var(--text-secondary); }
.portada-pensamos::after { display: none !important; }

.anillos { margin: 0; display: grid; gap: var(--space-4); min-width: 0; }
.anillos-titulo {
    font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase;
    letter-spacing: var(--tracking-wide); color: var(--text-secondary); text-align: center;
}
.anillos-svg { width: 100%; height: auto; display: block; overflow: visible; }
.anillo { cursor: pointer; transition: opacity var(--duration-normal) var(--ease-ease-in-out); stroke: var(--bg-app); stroke-width: 3; }
.anillo-estado { fill: var(--turquesa-100); }
.anillo-cuerpos { fill: var(--turquesa-200); }
.anillo-familia { fill: var(--turquesa-300); }
.anillo-persona { fill: var(--color-primary-700); }
.anillo.es-elegido { stroke: var(--text-primary); stroke-width: 3; }
.anillos.con-eleccion .anillo:not(.es-elegido) { opacity: .55; }
.anillo-texto { font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: 20px; fill: var(--turquesa-900); pointer-events: none; }
.anillo-texto-persona { fill: var(--blanco); }
.anillos-horizonte { fill: none; stroke: var(--turquesa-400); stroke-width: 2; stroke-dasharray: 6 8; }
.anillos-horizonte-texto { font-family: var(--font-system); font-weight: var(--weight-bold); font-size: 15px; letter-spacing: .2em; fill: var(--turquesa-700); }
.anillos-base { stroke: var(--turquesa-300); stroke-width: 2; }
.anillos-botones { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.anillo-boton {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
    height: var(--control-sm); padding: 0 var(--space-3);
    background: var(--bg-surface-raised); color: var(--text-primary);
    border: var(--border-1) solid var(--border-strong); border-radius: var(--radius-pill); cursor: pointer;
}
.anillo-boton[aria-pressed="true"] { border-color: var(--color-primary-600); box-shadow: inset 0 0 0 1px var(--color-primary-600); }
.anillo-muestra { width: 12px; height: 12px; border-radius: var(--radius-circle); }
.anillo-muestra-persona { background: var(--color-primary-700); }
.anillo-muestra-familia { background: var(--turquesa-300); }
.anillo-muestra-cuerpos { background: var(--turquesa-200); }
.anillo-muestra-estado { background: var(--turquesa-100); border: var(--border-1) solid var(--turquesa-300); }
.anillos-fichas { min-height: 7.5em; }
.anillo-ficha {
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-2);
}
.anillo-ficha p { font-size: var(--text-sm); color: var(--text-secondary); }
html:not(.js) .anillo-ficha[hidden] { display: grid !important; }

.bien-comun-grilla { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .bien-comun-grilla { grid-template-columns: 5fr 7fr; gap: var(--space-7); align-items: stretch; } }
.definicion {
    margin: 0; display: grid; gap: var(--space-4); align-content: start;
    background: var(--color-primary-700); color: var(--blanco);
    border-radius: var(--radius-md); padding: var(--space-6);
}
.definicion::before {
    content: ""; width: 44px; height: 20px; background: var(--blanco);
    -webkit-mask: var(--franjas) no-repeat center / contain; mask: var(--franjas) no-repeat center / contain;
}
.definicion p { font-family: var(--font-brand); font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); }
.definicion footer { font-size: var(--text-xs); color: var(--color-primary-100); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.contraste { display: grid; gap: var(--grid-gutter); }
@media (min-width: 640px) { .contraste { grid-template-columns: 1fr 1fr; } }
.contraste-col { border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.contraste-col h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); }
.contraste-col ul { list-style: none; display: grid; gap: var(--space-3); }
.contraste-col li { font-size: var(--text-sm); padding-top: var(--space-3); border-top: var(--border-1) solid var(--border-default); }
.contraste-no { background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default); }
.contraste-no h3 { color: var(--text-secondary); }
.contraste-si { background: var(--turquesa-50); border: var(--border-1) solid var(--turquesa-200); }
.contraste-si h3 { color: var(--turquesa-800); }
.contraste-si li { border-top-color: var(--turquesa-200); }
.argentina { margin-top: var(--space-7); display: grid; gap: var(--space-4); }
.argentina-titulo { font-size: var(--text-xl); }
.lista-grande { gap: var(--space-3); }
.lista-grande li { font-family: var(--font-brand); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-tight); padding-block: var(--space-2); border-bottom: var(--border-1) solid var(--border-default); }
.lista-grande li::before { top: 0.85em; }
.argentina-cierre { color: var(--text-secondary); }

.principios-grupo + .principios-grupo { margin-top: var(--space-6); }
.principios-grupo-titulo {
    font-family: var(--font-system); font-size: var(--text-xs); font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary);
    margin-bottom: var(--space-4);
}
.principios { list-style: none; display: grid; gap: var(--grid-gutter); }
@media (min-width: 640px) { .principios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .principios { grid-template-columns: repeat(4, 1fr); } }
.principio {
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius); padding: var(--space-5); box-shadow: var(--card-shadow);
    display: grid; gap: var(--space-2); align-content: start; grid-template-rows: auto auto auto 1fr auto;
}
.principio:target { box-shadow: 0 0 0 var(--border-2) var(--input-focus), var(--shadow-3); }
.principio-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-lg); height: var(--control-lg); border-radius: var(--radius-sm); margin-bottom: var(--space-2);
    background: var(--color-primary-50); color: var(--color-primary-700);
}
.principios-valores .principio-icono { background: var(--turquesa-50); color: var(--turquesa-700); }
.principio-tipo { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); }
.principio h4 { font-size: var(--text-lg); }
.principio-corto { font-size: var(--text-sm); color: var(--text-secondary); }
.principio-ampliar {
    justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2);
    font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
    background: none; border: 0; padding: var(--space-2) 0; color: var(--color-primary-600); cursor: pointer;
}
.principio-ampliar:hover { color: var(--color-primary-800); }
.principio-ampliar:hover .icono { transform: translateX(3px); }
.principio-ampliar .icono { transition: transform var(--duration-fast) var(--ease-ease-in-out); }

.red { margin-top: var(--space-8); }
.red-encabezado { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.red-encabezado h3 { font-size: var(--text-xl); }
.red-encabezado p { color: var(--text-secondary); max-width: 96ch; }
/* Nota bajo el texto de la red: un punto menos, color secundario e itálica */
.red-encabezado .red-nota { font-size: calc(1em - 1px); font-style: italic; color: var(--text-tertiary, var(--text-secondary)); }
.red-grilla { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .red-grilla { grid-template-columns: 7fr 5fr; gap: var(--space-6); align-items: start; } }
.red-lienzo {
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    border-radius: var(--radius-lg); padding: var(--space-4); min-width: 0;
}
.red-svg { width: 100%; height: auto; display: block; max-width: 640px; margin-inline: auto; overflow: visible; }
@media (max-width: 639.98px) {
    .red-lienzo { padding: var(--space-2); }
    .red-nodo text { font-size: 28px; }
    .red-nodo-centro text { font-size: 24px; }
    .red-nodo-centro .red-centro-sub { font-size: 19px; }
    .red-etiqueta-horizonte { font-size: 19px; }
}
.red-horizonte { fill: var(--turquesa-50); stroke: var(--turquesa-300); stroke-width: 2; stroke-dasharray: 6 8; }
.red-radio { stroke: var(--border-default); stroke-width: 1.5; transition: opacity var(--duration-normal) var(--ease-ease-in-out); }
.red-arista { stroke: var(--turquesa-500); stroke-width: 2.5; stroke-linecap: round; transition: opacity var(--duration-normal) var(--ease-ease-in-out), stroke var(--duration-normal) var(--ease-ease-in-out); }
.red-nodo { cursor: pointer; outline: none; transition: opacity var(--duration-normal) var(--ease-ease-in-out); }
.red-nodo circle { fill: var(--blanco); stroke-width: 2.5; transition: fill var(--duration-normal) var(--ease-ease-in-out); }
.red-principio circle { stroke: var(--color-primary-600); }
.red-principio .icono { color: var(--color-primary-700); }
.red-valor circle { stroke: var(--turquesa-600); }
.red-valor .icono { color: var(--turquesa-700); }
.red-nodo text { font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: 19px; fill: var(--text-primary); }
.red-nodo-centro circle { fill: var(--color-primary-700); stroke: var(--blanco); stroke-width: 4; }
.red-nodo-centro text { fill: var(--blanco); font-size: 19px; }
.red-nodo-centro .red-centro-sub { font-family: var(--font-system); font-weight: var(--weight-regular); font-size: 15px; }
.red-etiqueta-horizonte { font-family: var(--font-system); font-weight: var(--weight-bold); font-size: 15px; letter-spacing: .2em; fill: var(--turquesa-700) !important; }
.red-nodo:hover circle { stroke-width: 4; }
.red-nodo:focus-visible circle { stroke: var(--input-focus); stroke-width: 5; }
.red-nodo-horizonte:focus-visible text, .red-nodo-horizonte:hover text { text-decoration: underline; }
/* Estado con un nodo elegido */
.red-svg.con-eleccion .red-nodo:not(.es-elegido):not(.es-vecino):not(.red-nodo-centro) { opacity: .3; }
.red-svg.con-eleccion .red-arista:not(.es-activa) { opacity: .12; }
.red-svg.con-eleccion .red-radio { opacity: .4; }
.red-arista.es-activa { stroke: var(--color-primary-600); stroke-width: 4; }
.red-principio.es-elegido circle { fill: var(--color-primary-600); }
.red-valor.es-elegido circle { fill: var(--turquesa-700); stroke: var(--turquesa-700); }
.red-nodo.es-elegido .icono { color: var(--blanco); }
.red-nodo-horizonte.es-elegido ~ .red-nodo { opacity: 1; }
.red-svg.horizonte-elegido .red-horizonte { stroke: var(--color-primary-600); stroke-dasharray: none; }

.red-leyenda { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-3); }
.red-leyenda li { display: inline-flex; align-items: center; gap: var(--space-2); }
.leyenda-muestra { width: 14px; height: 14px; border-radius: var(--radius-circle); background: var(--blanco); border: 2.5px solid; }
.leyenda-principio { border-color: var(--color-primary-600); }
.leyenda-valor { border-color: var(--turquesa-600); }
.leyenda-linea { width: 24px; height: 3px; background: var(--turquesa-500); border-radius: var(--radius-pill); }

.red-panel {
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--card-shadow);
}
@media (min-width: 1024px) { .red-panel { position: sticky; top: calc(var(--alto-encabezado) + 72px); } }
.red-ficha { display: grid; gap: var(--space-3); }
.red-ficha .kicker { margin: 0; }
.red-ficha h4 { font-size: var(--text-xl); }
.red-ficha > p:not(.kicker) { color: var(--text-secondary); }
.red-relaciones { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.red-relaciones li { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--border-1) solid var(--border-default); }
.red-relaciones span { font-size: var(--text-sm); color: var(--text-secondary); }
.red-ir {
    justify-self: start; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
    background: var(--color-primary-50); color: var(--color-primary-800);
    border: var(--border-1) solid var(--color-primary-200); border-radius: var(--radius-pill);
    padding: 2px var(--space-3); cursor: pointer;
}
.red-ir:hover { background: var(--color-primary-100); }
html:not(.js) .red-ficha[hidden] { display: grid !important; margin-bottom: var(--space-5); }

.identidades { list-style: none; display: grid; gap: var(--grid-gutter); }
@media (min-width: 640px) { .identidades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .identidades { grid-template-columns: repeat(4, 1fr); } }
.identidad { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: var(--border-2) solid var(--color-primary-600); }
.identidad h3 { font-size: var(--text-xl); }
.identidad p { font-size: var(--text-sm); color: var(--text-secondary); }
.humanismo {
    margin-top: var(--space-7); display: grid; gap: var(--space-3);
    background: var(--turquesa-50); border: var(--border-1) solid var(--turquesa-200);
    border-radius: var(--radius-md); padding: var(--space-5) var(--space-6);
}
.humanismo p { color: var(--text-secondary); }

.manifiesto-grilla { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .manifiesto-grilla { grid-template-columns: 240px 1fr; gap: var(--space-8); align-items: start; } }
.manifiesto-portada { max-width: 240px; }
.manifiesto-texto { display: grid; gap: var(--space-4); justify-items: start; }
.manifiesto-texto .kicker { margin-bottom: 0; }
.manifiesto-menu {
    list-style: none; display: grid; gap: var(--space-3); width: 100%; margin-top: var(--space-2);
    grid-template-columns: 1fr;
}
@media (min-width: 560px) { .manifiesto-menu { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .manifiesto-menu { grid-template-columns: repeat(3, 1fr); } }
.manifiesto-menu > li { display: flex; }
.opcion-manifiesto {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: var(--space-2); width: 100%;
    padding: var(--space-4); border-radius: var(--card-radius);
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    color: var(--text-primary); text-decoration: none; text-align: left; font: inherit; cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-ease-out), box-shadow var(--duration-fast) var(--ease-ease-out), background var(--duration-fast) var(--ease-ease-out);
}
.opcion-manifiesto:hover { border-color: var(--color-primary-600); box-shadow: var(--shadow-2); color: var(--text-primary); }
.opcion-manifiesto:focus-visible { outline: var(--border-2) solid var(--color-primary-600); outline-offset: 2px; }
.opcion-icono { display: inline-flex; color: var(--color-primary-700); }
.opcion-titulo { font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: var(--text-md); line-height: var(--leading-tight); }
.opcion-detalle { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.opcion-manifiesto .badge { margin-top: auto; }
/* La opción destacada: Leer el Manifiesto completo */
.opcion-destacada { background: var(--color-primary-700); border-color: var(--color-primary-700); color: var(--blanco); }
.opcion-destacada:hover { background: var(--color-primary-800); border-color: var(--color-primary-800); color: var(--blanco); }
.opcion-destacada .opcion-icono { color: var(--blanco); }
.opcion-destacada .opcion-detalle { color: var(--color-primary-100); }
/* Escuchá el Manifiesto: la misma tarjeta hace de reproductor */
.audio-opcion .audio-play { display: inline-flex; }
.audio-opcion .audio-pausa { display: none; }
.audio-opcion.reproduciendo .audio-play { display: none; }
.audio-opcion.reproduciendo .audio-pausa { display: inline-flex; }
.audio-opcion .audio-barra { display: none; width: 100%; height: 4px; border-radius: var(--radius-pill); background: var(--color-neutral-100); overflow: hidden; }
.audio-opcion.con-audio .audio-barra { display: block; }
.audio-opcion .audio-barra span { display: block; height: 100%; width: 0; background: var(--btn-bg); }
.audio-opcion.con-audio .badge-warning { display: none; }

/* ---------- Nuestras propuestas ---------- */

.propuestas-intro { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .propuestas-intro { grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: center; } }
.frase-madre {
    margin: 0; position: relative; z-index: 1;
    font-family: var(--font-brand); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.35;
    padding: var(--space-5) var(--space-6); color: var(--text-primary);
    background: var(--bg-surface-raised); border-left: var(--border-3) solid var(--color-primary-600);
    border-radius: var(--radius-md); box-shadow: var(--shadow-2);
}
@media (min-width: 768px) { .frase-madre { font-size: var(--text-xl); } }

.diferencial { list-style: none; display: grid; gap: var(--grid-gutter); }
@media (min-width: 640px) { .diferencial { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .diferencial { column-gap: var(--space-8); } }
.diferencial li { display: grid; gap: var(--space-2); align-content: start; }
.diferencial-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-lg); height: var(--control-lg); border-radius: var(--radius-sm); margin-bottom: var(--space-2);
    background: var(--color-primary-700); color: var(--blanco);
}
.diferencial p { font-size: var(--text-sm); color: var(--text-secondary); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

.derivaciones-bloque { margin-top: var(--space-7); }
.nota-ancha { color: var(--text-secondary); max-width: 96ch; margin-bottom: var(--space-5); }
.derivaciones { list-style: none; display: grid; gap: var(--space-3); counter-reset: paso; }
@media (min-width: 768px) { .derivaciones { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.derivaciones li {
    position: relative; display: grid; gap: var(--space-2); align-content: start;
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius); padding: var(--space-5);
}
.derivaciones li:first-child { background: var(--color-primary-700); border-color: var(--color-primary-700); color: var(--blanco); }
.derivaciones li:first-child p { color: var(--color-primary-100); }
.derivaciones li:first-child .derivacion-paso { background: var(--blanco); color: var(--color-primary-700); }
.derivaciones p { font-size: var(--text-sm); color: var(--text-secondary); }
.derivacion-paso {
    display: inline-flex; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm);
    border-radius: var(--radius-circle); font-family: var(--font-mono); font-size: var(--text-sm);
    background: var(--color-primary-50); color: var(--color-primary-700); margin-bottom: var(--space-1);
}
@media (min-width: 768px) {
    .derivaciones li:not(:last-child)::after {
        content: ""; position: absolute; top: 50%; right: calc(-1 * var(--space-5) + 4px);
        width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg);
        border-top: var(--border-2) solid var(--border-strong); border-right: var(--border-2) solid var(--border-strong);
    }
}

/* Explorador de áreas */
.explorador { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .explorador { grid-template-columns: 272px 1fr; gap: var(--space-6); align-items: start; } }
.explorador-indice { min-width: 0; }
.explorador-indice-titulo {
    font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide);
    text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2);
}
.explorador-indice ul { list-style: none; }
.indice-enlace {
    display: flex; align-items: center; gap: var(--space-3);
    color: var(--text-primary); text-decoration: none; font-weight: var(--weight-medium); font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-ease-in-out), color var(--duration-fast) var(--ease-ease-in-out);
}
.indice-icono { display: inline-flex; color: var(--color-primary-700); }
.indice-enlace:hover { color: var(--text-primary); }
.indice-enlace[aria-selected="true"] { background: var(--color-primary-700); color: var(--blanco); }
.indice-enlace[aria-selected="true"] .indice-icono { color: var(--blanco); }
@media (max-width: 1023.98px) {
    .js .explorador-indice {
        position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--alto-encabezado)); z-index: var(--z-dropdown);
        margin-inline: calc(-1 * var(--margen-lateral)) calc(-1 * var(--margen-lateral-der));
        padding: var(--space-2) var(--margen-lateral-der) var(--space-2) var(--margen-lateral);
        background: var(--turquesa-50); border-bottom: var(--border-1) solid var(--turquesa-200);
    }
    .explorador-indice-titulo { display: none; }
    .js .explorador-indice ul { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--space-1); }
    .js .explorador-indice ul::-webkit-scrollbar { display: none; }
    .js .indice-enlace {
        white-space: nowrap; height: var(--control-md); padding: 0 var(--space-3) 0 var(--space-2);
        background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default); border-radius: var(--radius-pill);
    }
    .js .indice-enlace[aria-selected="true"] { background: var(--color-primary-700); border-color: var(--color-primary-700); color: var(--blanco); }
    .indice-icono .icono { width: var(--space-4); height: var(--space-4); }
    html:not(.js) .explorador-indice ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    html:not(.js) .indice-enlace { padding: var(--space-2) var(--space-3); background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default); }
}
@media (min-width: 1024px) {
    .explorador-indice { position: sticky; top: calc(var(--alto-encabezado) + var(--space-5)); }
    .explorador-indice ul { display: grid; gap: var(--space-1); background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2); }
    .indice-enlace { padding: var(--space-2) var(--space-3); min-height: var(--control-md); }
    .indice-enlace:not([aria-selected="true"]):hover { background: var(--color-primary-50); }
}
.explorador-contenido { min-width: 0; display: grid; gap: var(--space-5); }
.explorador-activo .area:not(.es-actual) { display: none; }
.area {
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    border-radius: var(--radius-md); box-shadow: var(--card-shadow);
    padding: var(--space-5); outline: none;
}
@media (min-width: 768px) { .area { padding: var(--space-6); } }
.area.es-actual { animation: area-entra var(--duration-normal) var(--ease-ease-out); }
@keyframes area-entra { from { transform: translateY(6px); } to { transform: none; } }
.area-encabezado { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 640px) { .area-encabezado { grid-template-columns: auto 1fr; gap: var(--space-5); } }
.area-encabezado .kicker { margin-bottom: var(--space-2); }
.area-encabezado h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.area-icono {
    display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8);
    border-radius: var(--radius-md); background: var(--color-primary-700); color: var(--blanco);
}
.area-descripcion { font-size: var(--text-lg); color: var(--text-secondary); margin-top: var(--space-3); max-width: 96ch; }
.area-cuerpo { display: grid; margin-top: var(--space-5); }
.area-bloque { display: grid; gap: var(--space-3); padding-block: var(--space-5); border-top: var(--border-1) solid var(--border-default); }
.area-bloque h3 { font-size: var(--text-lg); }
.area-postura p { max-width: 96ch; }
.area-postura { gap: var(--space-3); }
.propuestas { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .propuestas { grid-template-columns: repeat(2, 1fr); } }
.propuesta-grupo {
    display: grid; gap: var(--space-3); align-content: start;
    background: var(--bg-app); border: var(--border-1) solid var(--border-default);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.propuesta-grupo.es-provisorio { border-style: dashed; border-color: var(--color-warning-400); }
.propuesta-grupo h4 { font-size: var(--text-md); }
.propuesta-grupo .lista-franjas { font-size: var(--text-sm); gap: var(--space-3); }
.area-fundamentos p:not(.fuente) { color: var(--text-secondary); }
.ampliable { border-top: var(--border-1) solid var(--border-default); }
.ampliable summary {
    display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none;
    padding-block: var(--space-4); font-weight: var(--weight-medium); color: var(--text-primary);
}
.ampliable summary::-webkit-details-marker { display: none; }
.ampliable summary .icono { transition: transform var(--duration-normal) var(--ease-ease-in-out); color: var(--color-primary-600); }
.ampliable[open] summary .icono { transform: rotate(180deg); }
.ampliable-cuerpo { display: grid; gap: var(--space-4); padding-bottom: var(--space-5); }
.ampliable-cuerpo > p { color: var(--text-secondary); }
.recursos { list-style: none; display: grid; gap: var(--space-2); }
.recurso {
    display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-weight: var(--weight-medium); font-size: var(--text-sm);
}

.area-pasos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--border-1) solid var(--border-default); }
.paso {
    display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none;
    color: var(--text-primary); font-weight: var(--weight-medium);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    border: var(--border-1) solid var(--border-default); background: var(--bg-app);
}
.paso:hover { border-color: var(--color-primary-600); color: var(--text-primary); }
.paso span { display: grid; }
.paso small { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-secondary); }
.paso-siguiente { margin-left: auto; text-align: right; }
html:not(.js) .area-pasos { display: none; }

/* ---------- Sé parte ---------- */

.parte-intro { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .parte-intro { grid-template-columns: 6fr 6fr; gap: var(--space-8); align-items: center; } }
.portada-roja .kicker { margin-bottom: var(--space-3); }
.caminos { list-style: none; display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .caminos { grid-template-columns: 1fr 1fr; } }
.camino {
    display: grid; gap: var(--space-2); height: 100%; align-content: start; grid-template-rows: auto auto 1fr auto;
    background: var(--blanco); color: var(--text-primary); text-decoration: none;
    border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-3);
    transition: transform var(--duration-normal) var(--ease-ease-in-out);
}
.camino:hover { transform: translateY(-2px); color: var(--text-primary); }
.camino-icono { color: var(--color-primary-700); display: inline-flex; margin-bottom: var(--space-2); }
.camino-titulo { font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: var(--text-xl); }
.camino-texto { font-size: var(--text-sm); color: var(--text-secondary); }
.camino-ir { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-primary-600); margin-top: var(--space-2); }

.parte-grilla { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .parte-grilla { grid-template-columns: 5fr 7fr; gap: var(--space-7); align-items: start; } }
.parte-grilla-afiliacion { margin-top: var(--space-7); }
.parte-boton { justify-self: start; margin-top: var(--space-2); }
.parte-cierre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.parte-cierre .contacto-caja { margin-top: 0; flex: 1 1 320px; max-width: 560px; }
.parte-info { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.parte-info .kicker { margin-bottom: 0; }
.parte-info > p { color: var(--text-secondary); }
.parte-form {
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    border-radius: var(--radius-md); box-shadow: var(--card-shadow); padding: var(--space-5); min-width: 0;
}
@media (min-width: 768px) { .parte-form { padding: var(--space-6); } }
.form-titulo { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.colaborar { list-style: none; display: grid; gap: var(--grid-gutter); }
@media (min-width: 640px) { .colaborar { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .colaborar { grid-template-columns: repeat(4, 1fr); } }
.colaborar li {
    display: grid; gap: var(--space-1); align-content: start;
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius); padding: var(--space-5);
}
.colaborar-icono { color: var(--color-primary-700); display: inline-flex; margin-bottom: var(--space-1); }
.colaborar h3 { font-size: var(--text-md); }
.colaborar p { font-size: var(--text-sm); color: var(--text-secondary); }
.contacto-caja {
    margin-top: var(--space-4); display: grid; gap: var(--space-3);
    background: var(--turquesa-50); border: var(--border-1) solid var(--turquesa-200);
    border-radius: var(--radius-md); padding: var(--space-5);
}
.contacto-caja h3 { font-size: var(--text-md); }
.redes-lista { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.redes-lista .icono { color: var(--color-primary-700); }

.pasos-afiliacion { list-style: none; display: grid; gap: var(--grid-gutter); }
@media (min-width: 768px) { .pasos-afiliacion { grid-template-columns: repeat(3, 1fr); } }
.pasos-afiliacion li {
    display: grid; gap: var(--space-2); align-content: start;
    background: var(--bg-surface-raised); border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius); padding: var(--space-5);
}
.pasos-afiliacion p { font-size: var(--text-sm); color: var(--text-secondary); }
.paso-numero {
    display: inline-flex; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm);
    border-radius: var(--radius-circle); font-family: var(--font-mono); font-size: var(--text-sm);
    background: var(--color-primary-700); color: var(--blanco); flex-shrink: 0;
}
.requisitos, .preguntas { display: grid; gap: var(--space-3); }
.requisitos h3, .preguntas h3 { font-size: var(--text-lg); }
.preguntas { align-content: start; }
@media (max-width: 1023.98px) { .preguntas { margin-top: var(--space-4); } }
.lista-check { list-style: none; display: grid; gap: var(--space-2); }
.lista-check li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.lista-check .icono { color: var(--turquesa-700); margin-top: 3px; }
.preguntas .ampliable:last-child { border-bottom: var(--border-1) solid var(--border-default); }
.preguntas .ampliable summary { font-size: var(--text-sm); }

/* Formularios */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.formulario { display: grid; gap: var(--space-6); }
.formulario-grupo { display: grid; gap: var(--space-4); }
.formulario-grupo > legend {
    font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: var(--text-lg);
    margin-bottom: var(--space-4); display: grid; gap: var(--space-1);
}
.formulario-grupo > legend .opcional { font-family: var(--font-system); font-size: var(--text-sm); }
.paso-de { font-family: var(--font-system); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); }
.formulario-ayuda { font-size: var(--text-sm); color: var(--text-secondary); }
.campos { display: grid; gap: var(--space-4); grid-template-columns: repeat(8, minmax(0, 1fr)); }
.campos > .field { grid-column: span 8; }
@media (min-width: 640px) {
    .campos > .campo-mitad { grid-column: span 4; }
    .campos > .campo-cuarto { grid-column: span 2; }
    .campos > .campo-octavo { grid-column: span 1; }
}
@media (max-width: 639.98px) {
    .campos > .campo-cuarto { grid-column: span 4; }
    .campos > .campo-octavo { grid-column: span 2; }
}
.field .input { width: 100%; min-width: 0; font-size: var(--text-md); }
@media (min-width: 768px) { .field .input { font-size: var(--text-sm); } }
.input-area { height: auto; padding-block: var(--space-2); resize: vertical; line-height: var(--leading-normal); }
.field-ayuda { font-size: var(--text-xs); color: var(--text-secondary); }
.input[aria-invalid="true"] { border-color: var(--color-danger-600); }
.field-error { font-weight: var(--weight-medium); }
.opciones { list-style: none; display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .opciones { grid-template-columns: 1fr 1fr; } }
.opcion-tarjeta {
    position: relative; display: flex; gap: var(--space-3); align-items: flex-start; height: 100%;
    padding: var(--space-3) var(--space-4); cursor: pointer;
    background: var(--blanco); border: var(--border-1) solid var(--border-strong); border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-ease-in-out), background var(--duration-fast) var(--ease-ease-in-out);
}
.opcion-tarjeta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-icono { color: var(--color-primary-700); display: inline-flex; margin-top: 2px; }
.opcion-texto { display: grid; gap: 2px; flex: 1; font-size: var(--text-sm); }
.opcion-texto span { color: var(--text-secondary); font-size: var(--text-xs); }
.opcion-check {
    display: inline-flex; align-items: center; justify-content: center; width: var(--space-5); height: var(--space-5); flex-shrink: 0;
    border: var(--border-1) solid var(--border-strong); border-radius: var(--radius-sm); color: transparent; margin-top: 2px;
}
.opcion-tarjeta:has(input:checked) { border-color: var(--color-primary-600); background: var(--color-primary-50); }
.opcion-tarjeta:has(input:checked) .opcion-check { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--blanco); }
.opcion-tarjeta:has(input:focus-visible) { outline: var(--border-2) solid var(--input-focus); outline-offset: 2px; }
.casilla { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.casilla input { width: var(--space-5); height: var(--space-5); margin: 2px 0 0; accent-color: var(--color-primary-600); flex-shrink: 0; }
.campos > .campo-nota { grid-column: 1 / -1; margin-top: calc(-1 * var(--space-2)); font-size: var(--text-xs); font-style: italic; color: var(--text-secondary); }
.pregunta-si-no { border: 0; margin: 0; padding: 0; min-width: 0; }
.pregunta-si-no legend { padding: 0; margin-bottom: var(--space-3); }
.pregunta-opciones { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.pregunta-opciones .casilla { align-items: center; font-size: var(--text-md); }
.pregunta-opciones .casilla input { margin-top: 0; }
.pregunta-si-no .field-error { margin-top: var(--space-2); }
.subgrupo { display: grid; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--turquesa-50); border: var(--border-1) solid var(--turquesa-200); }
.subgrupo-titulo { font-weight: var(--weight-medium); }
.archivo { display: block; cursor: pointer; }
.archivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.archivo-vista {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center;
    min-height: 160px; padding: var(--space-4); border-radius: var(--radius-md);
    border: var(--border-2) dashed var(--border-strong); background: var(--blanco);
    font-size: var(--text-sm); color: var(--text-secondary); overflow: hidden;
}
.archivo:hover .archivo-vista { border-color: var(--color-primary-600); }
.archivo input:focus-visible + .archivo-vista { outline: var(--border-2) solid var(--input-focus); outline-offset: 2px; }
.archivo-vista img { max-height: 140px; width: auto; border-radius: var(--radius-sm); }
.archivo-vista.con-foto { border-style: solid; border-color: var(--turquesa-600); }
.archivo input[aria-invalid="true"] + .archivo-vista { border-color: var(--color-danger-600); }
.campos-dni > .field { grid-column: span 8; }
@media (min-width: 640px) { .campos-dni > .field { grid-column: span 4; } }
.formulario-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.formulario-estado { border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); display: grid; gap: var(--space-1); }
.formulario-estado strong { font-family: var(--font-brand); font-size: var(--text-md); }
.estado-ok { background: var(--color-success-50); color: var(--color-success-900); border: var(--border-1) solid var(--color-success-200); }
.estado-error { background: var(--color-danger-50); color: var(--color-danger-900); border: var(--border-1) solid var(--color-danger-200); }
.estado-prueba { background: var(--color-warning-50); color: var(--color-warning-900); border: var(--border-1) solid var(--color-warning-200); }
.indicador-pasos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.indicador-pasos li { display: grid; justify-items: center; gap: var(--space-1); text-align: center; position: relative; }
.indicador-pasos li:not(:last-child)::after {
    content: ""; position: absolute; top: 16px; left: calc(50% + 22px); right: calc(-50% + 22px);
    height: var(--border-2); background: var(--border-default);
}
.indicador-pasos .paso-numero { background: var(--bg-surface); color: var(--text-secondary); }
.indicador-pasos .paso-nombre { font-size: var(--text-xs); color: var(--text-secondary); }
.indicador-pasos li[aria-current="step"] .paso-numero { background: var(--color-primary-700); color: var(--blanco); }
.indicador-pasos li[aria-current="step"] .paso-nombre { color: var(--text-primary); font-weight: var(--weight-medium); }
.indicador-pasos li.es-hecho .paso-numero { background: var(--turquesa-700); color: var(--blanco); }
.indicador-pasos li.es-hecho:not(:last-child)::after { background: var(--turquesa-300); }
html:not(.js) .indicador-pasos { display: none; }
.pasos-activo .paso-form:not(.es-actual) { display: none; }
.pasos-acciones { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
html:not(.js) .pasos-acciones [data-paso-ir] { display: none; }

/* ---------- Pie ---------- */

.pie { background: var(--negro-marca); color: var(--color-neutral-200); padding-block: var(--space-8) var(--space-6); font-size: var(--text-sm); }
.pie-grilla { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .pie-grilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pie-grilla { grid-template-columns: 4fr 2fr 3fr 3fr; gap: var(--space-7); } }
.pie-marca { display: inline-block; }
.pie-marca img { height: 44px; width: auto; }
.pie-marca-bloque { display: grid; gap: var(--space-4); align-content: start; }
.pie-lema { max-width: 34ch; }
.pie h2 {
    font-family: var(--font-system); font-size: var(--text-xs); font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-neutral-300);
    margin-bottom: var(--space-3);
}
.pie-lista, .pie-redes { list-style: none; display: grid; gap: var(--space-2); }
.pie-redes { gap: var(--space-3); margin-top: var(--space-1); }
.red-social { display: inline-flex; align-items: center; gap: var(--space-2); }
.red-social .icono { width: 20px; height: 20px; flex-shrink: 0; }
.pie .red-social .icono { color: var(--blanco); }
.pie a { color: var(--blanco); text-decoration: none; }
.pie a:hover { text-decoration: underline; color: var(--blanco); }
.pie-legal { margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--border-1) solid var(--color-neutral-800); font-size: var(--text-xs); color: var(--color-neutral-400); }

/* ---------- Avisos y modal ---------- */

.avisos {
    position: fixed; z-index: var(--z-toast);
    right: max(var(--space-4), env(safe-area-inset-right, 0px));
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    left: max(var(--space-4), env(safe-area-inset-left, 0px));
    display: flex; justify-content: flex-end; pointer-events: none;
}
.avisos .toast { max-width: 380px; pointer-events: auto; animation: aviso-entra var(--duration-normal) var(--ease-ease-out); }
.avisos .toast.saliendo { opacity: 0; transition: opacity var(--duration-normal) var(--ease-ease-in); }
@keyframes aviso-entra { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

dialog.modal { border: 0; width: min(560px, calc(100% - 2 * var(--space-4))); max-width: 560px; }
dialog.modal::backdrop { background: color-mix(in srgb, var(--color-neutral-950) 50%, transparent); }
dialog.modal .kicker { margin-bottom: var(--space-2); }
.modal-principio .modal-body { display: grid; gap: var(--space-3); }
.modal-principio .modal-actions { flex-wrap: wrap; }

@media print {
    .encabezado, .subnavegacion, .revision, .avisos, .pie { display: none; }
}
@media (min-width: 1024px) { .area-acceso { font-size: var(--text-md); } }

/* ---------- Formularios a pantalla completa (Sé parte) ---------- */

/* Sin soporte de <dialog> (o sin JavaScript) el formulario se ve en la página. */
html:not(.con-pantallas) dialog.pantalla {
    display: block; position: static; width: auto; height: auto; max-width: var(--container-max);
    max-height: none; margin: var(--space-7) auto 0; padding: 0 var(--margen-lateral-der) 0 var(--margen-lateral);
    border: 0; background: transparent; color: inherit;
}
html:not(.con-pantallas) .pantalla-barra,
html:not(.con-pantallas) .pantalla-lateral { display: none; }

html.con-pantalla, html.con-pantalla body { overflow: hidden; }
dialog.pantalla::backdrop { background: var(--bg-app); }
html.con-pantallas dialog.pantalla[open] {
    position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; border: 0;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
    background: var(--bg-app); color: var(--text-primary);
    overflow-y: auto; overscroll-behavior: contain;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "barra" "lateral" "contenido";
    animation: pantalla-entra var(--duration-normal) var(--ease-ease-out);
}
@keyframes pantalla-entra { from { opacity: 0; } to { opacity: 1; } }

.pantalla-barra {
    grid-area: barra; position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    min-height: var(--alto-barra);
    padding: var(--space-3) var(--margen-lateral-der) var(--space-3) var(--margen-lateral);
    background: var(--bg-app); border-bottom: var(--border-1) solid var(--border-default);
}
.pantalla-marca { height: 30px; width: auto; }
.pantalla-cerrar {
    display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto;
    font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
    height: var(--control-md); padding: 0 var(--space-4);
    background: var(--bg-surface-raised); color: var(--text-primary);
    border: var(--border-1) solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
}
.pantalla-cerrar:hover { border-color: var(--text-primary); }

.pantalla-lateral {
    grid-area: lateral; position: relative;
    display: grid; gap: var(--space-3); align-content: start;
    background: var(--color-primary-700); color: var(--blanco);
    padding: var(--space-5) var(--margen-lateral-der) var(--space-5) var(--margen-lateral);
}
.pantalla-lateral .kicker { margin: 0; }
.pantalla-lateral h2 { color: var(--blanco); font-size: var(--text-xl); position: relative; }
.pantalla-bajada { color: var(--color-primary-100); position: relative; }
.pantalla-logo, .pantalla-pasos, .pantalla-necesitas { display: none; }
@media (max-width: 1023.98px) { .pantalla-bajada { display: none; } }
.pantalla-pasos { list-style: none; gap: var(--space-3); margin-top: var(--space-4); position: relative; }
.pantalla-pasos li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-primary-100); }
.pantalla-pasos strong { color: var(--blanco); font-weight: var(--weight-medium); }
.pantalla-pasos .paso-numero { background: var(--blanco); color: var(--color-primary-700); }
.pantalla-necesitas {
    gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); position: relative;
    border-top: var(--border-1) solid var(--color-primary-500);
}
.pantalla-necesitas-titulo {
    font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide);
    text-transform: uppercase; color: var(--color-primary-100);
}
.pantalla-necesitas .lista-check li { color: var(--blanco); }
.pantalla-necesitas .lista-check .icono { color: var(--blanco); }

.pantalla-contenido {
    grid-area: contenido; min-width: 0;
    padding: var(--space-5) var(--margen-lateral-der) var(--space-8) var(--margen-lateral);
}
.pantalla-columna { max-width: 640px; margin-inline: auto; }
.pantalla .form-titulo { margin-bottom: var(--space-5); }
.pantalla [id] { scroll-margin-top: calc(var(--alto-barra) + var(--space-4)); }

.pantalla-exito { display: grid; gap: var(--space-4); justify-items: start; padding-block: var(--space-6); outline: none; }
.exito-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--space-8); height: var(--space-8); border-radius: var(--radius-circle);
    background: var(--color-success-50); color: var(--color-success-700);
}
.pantalla-exito h3 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.pantalla-exito p { font-size: var(--text-lg); color: var(--text-secondary); max-width: 52ch; }
.pantalla-exito .exito-prueba {
    font-size: var(--text-sm); color: var(--color-warning-900); background: var(--color-warning-50);
    border: var(--border-1) solid var(--color-warning-200); border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}

@media (min-width: 1024px) {
    html.con-pantallas dialog.pantalla[open] {
        grid-template-columns: minmax(360px, 5fr) 7fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: "lateral barra" "lateral contenido";
    }
    .pantalla-barra { border-bottom: 0; padding-inline: var(--space-6); }
    .pantalla-marca { display: none; }
    .pantalla-lateral {
        position: sticky; top: 0; align-self: start;
        height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto;
        gap: var(--space-4); padding: var(--space-7);
    }
    .pantalla-lateral::after {
        content: ""; position: absolute; right: -60px; bottom: -20px; width: 380px; height: 175px;
        background: var(--color-primary-600);
        -webkit-mask: var(--franjas) no-repeat center / contain; mask: var(--franjas) no-repeat center / contain;
        pointer-events: none;
    }
    .pantalla-logo { display: block; height: 44px; width: auto; margin-bottom: var(--space-6); position: relative; }
    .pantalla-lateral h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
    .pantalla-bajada { font-size: var(--text-lg); }
    .pantalla-pasos, .pantalla-necesitas { display: grid; }
    .pantalla-contenido { padding: var(--space-2) var(--space-7) var(--space-8); }
}

/* Campo trampa de los formularios: invisible para las personas */
.trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Foto de fondo del panel lateral de las pantallas de Sumate y Afiliate:
   en escala de grises, teñida con el rojo de ABC (solo en escritorio). */
.pantalla-foto { display: none; }
@media (min-width: 1024px) {
    .pantalla-lateral.con-foto { isolation: isolate; }
    .pantalla-lateral.con-foto > :not(.pantalla-foto) { position: relative; z-index: 1; }
    .pantalla-lateral.con-foto .pantalla-foto {
        display: block; position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; object-position: center 35%;
        filter: grayscale(1) contrast(1.05); mix-blend-mode: luminosity; opacity: 0.32;
        z-index: 0; pointer-events: none;
    }
    .pantalla-lateral.con-foto::before {
        content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
        background: linear-gradient(180deg, transparent 0%, var(--color-primary-700) 78%);
    }
    .pantalla-lateral.con-foto::after { z-index: 0; }
}

/* ---------- Página no encontrada (404) ---------- */
.pagina-404 .portada { min-height: 60vh; display: flex; align-items: center; }
.pagina-404 .portada > .contenedor { width: 100%; }
.pagina-404-acciones { margin-top: var(--space-6); }

/* ---------- Aviso emergente de evento ----------
   Se abre al entrar al sitio (una vez por visita). Toma el diseño del flyer:
   cabeza roja con el título y el signo de pregunta de fondo, y un bloque
   por encuentro (rojo para CABA, turquesa para La Plata). Los tamaños del
   título dependen también del alto de la pantalla, para que los dos botones
   se vean sin desplazarse aun en celulares chicos. */

html.con-evento, html.con-evento body { overflow: hidden; }

dialog.evento {
    border: 0; padding: 0; margin: auto;
    width: min(680px, calc(100% - var(--margen-lateral) - var(--margen-lateral-der)));
    max-width: 680px;
    max-height: calc(100vh - 2 * var(--space-3));
    max-height: calc(100dvh - 2 * var(--space-3));
    overflow: auto; overscroll-behavior: contain;
    border-radius: var(--radius-lg);
    background: var(--blanco); color: var(--text-primary);
    box-shadow: var(--modal-shadow);
}
dialog.evento::backdrop { background: color-mix(in srgb, var(--color-neutral-950) 62%, transparent); }
dialog.evento[open] { animation: evento-entra var(--duration-slow) var(--ease-ease-out); }
dialog.evento[open]::backdrop { animation: evento-fondo var(--duration-slow) var(--ease-ease-out); }
@keyframes evento-entra { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes evento-fondo { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    dialog.evento[open], dialog.evento[open]::backdrop { animation: none; }
}

.evento-cabeza {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--color-primary-700); color: var(--blanco);
    padding: var(--space-4) var(--space-4) var(--space-5);
}
.evento-signo {
    position: absolute; z-index: -1; right: -.06em; top: -.18em;
    font-family: var(--font-brand); font-weight: var(--weight-bold);
    font-size: min(13rem, 34vh); line-height: 1; color: var(--color-primary-800);
    pointer-events: none; user-select: none;
}
.evento-cerrar {
    position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1;
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: var(--radius-pill); cursor: pointer;
    background: color-mix(in srgb, var(--blanco) 16%, transparent); color: var(--blanco);
    transition: background var(--duration-fast) var(--ease-ease-in-out);
}
.evento-cerrar:hover { background: color-mix(in srgb, var(--blanco) 28%, transparent); }
.evento-cerrar:focus-visible { outline: 3px solid var(--blanco); outline-offset: 2px; }
.evento-antetitulo {
    font-family: var(--font-system); font-size: var(--text-xs); font-weight: var(--weight-bold);
    letter-spacing: .08em; text-transform: uppercase; padding-right: 3.5rem;
}
.evento-titulo {
    margin-top: var(--space-2);
    font-family: var(--font-brand); font-weight: var(--weight-bold);
    font-size: clamp(1.1rem, min(5.4vw, 3.6vh), 2.2rem); line-height: 1.1; letter-spacing: -.02em;
    color: var(--blanco);
}
.evento-titulo:focus { outline: none; }
.evento-titulo > span { display: block; }
.evento-titulo .evento-titulo-grande { font-size: 1.7em; line-height: 1; letter-spacing: -.03em; }
.evento-titulo .evento-resalte {
    display: table; margin-block: .12em;
    background: var(--blanco); color: var(--color-primary-700);
    padding: .02em .22em .06em; border-radius: var(--radius-sm);
}

.evento-cuerpo { padding: var(--space-4) var(--space-4) var(--space-3); }
.evento-bajada {
    font-family: var(--font-brand); font-weight: var(--weight-bold);
    font-size: clamp(1rem, min(4.2vw, 2.6vh), 1.45rem); line-height: 1.2; letter-spacing: -.01em;
    color: var(--color-primary-700);
}
.evento-aviso {
    margin-top: var(--space-2);
    font-family: var(--font-system); font-size: var(--text-xs); font-weight: var(--weight-bold);
    letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-800);
}

.evento-encuentros { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.evento-encuentro { display: grid; border-radius: var(--radius-md); overflow: hidden; background: var(--evento-suave); }
.evento-rojo { --evento-fuerte: var(--color-primary-700); --evento-hover: var(--color-primary-800); --evento-suave: var(--color-primary-50); }
.evento-turquesa { --evento-fuerte: var(--turquesa-700); --evento-hover: var(--turquesa-800); --evento-suave: var(--turquesa-50); }

.evento-boton {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4); min-height: 60px;
    background: var(--evento-fuerte); color: var(--blanco); text-decoration: none;
    transition: background var(--duration-fast) var(--ease-ease-in-out);
}
.evento-boton:hover { background: var(--evento-hover); color: var(--blanco); }
.evento-boton:focus-visible { outline: 3px solid var(--evento-fuerte); outline-offset: 3px; }
.evento-boton-texto {
    font-family: var(--font-brand); font-weight: var(--weight-bold);
    font-size: clamp(1.15rem, 5.1vw, 1.55rem); line-height: 1.1; letter-spacing: .01em;
    white-space: nowrap;
}
.evento-boton-accion {
    display: inline-flex; align-items: center; gap: var(--space-1); flex: none;
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--blanco) 18%, transparent);
    font-family: var(--font-system); font-size: var(--text-xs); font-weight: var(--weight-medium);
}
.evento-boton:hover .evento-boton-accion { background: color-mix(in srgb, var(--blanco) 26%, transparent); }

.evento-datos {
    display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4);
    font-family: var(--font-system); font-size: var(--text-sm); line-height: 1.4;
    color: var(--color-neutral-800);
}
.evento-datos p { display: flex; gap: var(--space-2); align-items: flex-start; }
.evento-datos .icono { flex: none; margin-top: 2px; color: var(--evento-fuerte); }
.evento-datos strong { color: var(--text-primary); }
.evento-lugar-detalle::before { content: " · "; }
.evento-direccion { display: block; color: var(--text-secondary); }
.evento-horario { white-space: nowrap; }

.evento-pie {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-4);
}
.evento-pie img:first-child { height: 26px; width: auto; }
.evento-pie img:last-child { height: 40px; width: auto; }

/* Pantallas medianas y grandes: cada encuentro como en el flyer (bloque de
   color a la izquierda, datos a la derecha). */
@media (min-width: 600px) {
    .evento-cabeza { padding: var(--space-6) var(--space-6) var(--space-6); }
    .evento-cerrar { top: var(--space-3); right: var(--space-3); }
    .evento-titulo { margin-top: var(--space-3); }
    .evento-cuerpo { padding: var(--space-5) var(--space-6) var(--space-4); }
    .evento-aviso { margin-top: var(--space-3); letter-spacing: .08em; }
    .evento-encuentros { margin-top: var(--space-4); }
    .evento-encuentro { grid-template-columns: 17.5rem minmax(0, 1fr); }
    .evento-boton { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; padding: var(--space-4) var(--space-5); }
    .evento-boton-accion { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
    .evento-datos { align-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
    .evento-lugar-detalle { display: block; }
    .evento-lugar-detalle::before { content: none; }
    .evento-datos strong { display: block; font-size: var(--text-md); }
    .evento-pie { padding: var(--space-4) var(--space-6) var(--space-5); }
    .evento-pie img:first-child { height: 34px; }
    .evento-pie img:last-child { height: 50px; }
}

/* Celular acostado o pantallas muy bajas: título a la izquierda y los
   encuentros a la derecha, para que todo entre a la vista. */
@media (min-width: 600px) and (max-height: 560px) {
    dialog.evento { width: min(900px, calc(100% - var(--margen-lateral) - var(--margen-lateral-der))); max-width: 900px; }
    .evento-marco { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .evento-cabeza { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; padding: var(--space-5); }
    .evento-titulo { font-size: clamp(1.1rem, 2.6vw, 1.7rem); }
    .evento-signo { font-size: 16rem; top: auto; bottom: -.2em; }
    .evento-cuerpo { padding: var(--space-4) var(--space-5) var(--space-2); }
    .evento-bajada { font-size: var(--text-md); }
    .evento-aviso { margin-top: var(--space-2); }
    .evento-encuentros { margin-top: var(--space-3); gap: var(--space-2); }
    .evento-encuentro { grid-template-columns: 13.5rem minmax(0, 1fr); }
    .evento-boton { padding: var(--space-3) var(--space-4); }
    .evento-boton-texto { font-size: 1.25rem; }
    .evento-datos { gap: var(--space-1); padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
    .evento-datos strong { font-size: var(--text-sm); display: inline; }
    .evento-lugar-detalle { display: inline; }
    .evento-lugar-detalle::before { content: " · "; }
    .evento-pie { padding: var(--space-2) var(--space-5) var(--space-3); }
    .evento-pie img:first-child { height: 24px; }
    .evento-pie img:last-child { height: 36px; }
}