/* Tokens del Design System FaroPaís (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-secondary-950);
  --text-secondary: var(--color-secondary-700);
  --text-disabled: var(--color-neutral-400);
  --border-default: var(--color-neutral-200);
  --border-strong: var(--color-neutral-400);
  --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: #ceffff;
  --color-primary-100: #a4eaf3;
  --color-primary-200: #7bd3df;
  --color-primary-300: #52bcca;
  --color-primary-400: #1ea2b1;
  --color-primary-500: #008c9a;
  --color-primary-600: #00737f;
  --color-primary-700: #005b65;
  --color-primary-800: #0a444a;
  --color-primary-900: #102d31;
  --color-primary-950: #0f1819;
  --color-secondary-50: #f4f5f8;
  --color-secondary-100: #d9dbe3;
  --color-secondary-200: #bfc2cd;
  --color-secondary-300: #a6aab7;
  --color-secondary-400: #8d92a2;
  --color-secondary-500: #767b8d;
  --color-secondary-600: #5f6578;
  --color-secondary-700: #494f64;
  --color-secondary-800: #343b50;
  --color-secondary-900: #21273c;
  --color-secondary-950: #0f1428;
  --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: #ffefec;
  --color-danger-100: #ffc9c0;
  --color-danger-200: #ffa296;
  --color-danger-300: #ff7c6f;
  --color-danger-400: #f3554b;
  --color-danger-500: #dc2626;
  --color-danger-600: #be0e16;
  --color-danger-700: #99060e;
  --color-danger-800: #720c0d;
  --color-danger-900: #4b100d;
  --color-danger-950: #240f0d;
  --color-info-50: #ecf6ff;
  --color-info-100: #c2dcff;
  --color-info-200: #9ac2ff;
  --color-info-300: #75a8ff;
  --color-info-400: #528cff;
  --color-info-500: #3371f6;
  --color-info-600: #2563eb;
  --color-info-700: #0f43b5;
  --color-info-800: #08308c;
  --color-info-900: #052161;
  --color-info-950: #041337;
  --color-educacion-1-50: #fff5cb;
  --color-educacion-1-100: #eddba1;
  --color-educacion-1-200: #d8c279;
  --color-educacion-1-300: #c2a953;
  --color-educacion-1-400: #a88d28;
  --color-educacion-1-500: #937915;
  --color-educacion-1-600: #79630a;
  --color-educacion-1-700: #604e0a;
  --color-educacion-1-800: #473b0e;
  --color-educacion-1-900: #2f280f;
  --color-educacion-1-950: #18160f;
  --color-educacion-2-50: #fff37e;
  --color-educacion-2-100: #fed956;
  --color-educacion-2-200: #eac435;
  --color-educacion-2-300: #caa713;
  --color-educacion-2-400: #b09000;
  --color-educacion-2-500: #957900;
  --color-educacion-2-600: #7a6300;
  --color-educacion-2-700: #604e04;
  --color-educacion-2-800: #473a0a;
  --color-educacion-2-900: #2f280d;
  --color-educacion-2-950: #19160c;
  --color-educacion-3-50: #fff47a;
  --color-educacion-3-100: #ffdd5e;
  --color-educacion-3-200: #e1c145;
  --color-educacion-3-300: #c6a835;
  --color-educacion-3-400: #ab9128;
  --color-educacion-3-500: #917a1f;
  --color-educacion-3-600: #77641a;
  --color-educacion-3-700: #5e4f16;
  --color-educacion-3-800: #453b13;
  --color-educacion-3-900: #2e2811;
  --color-educacion-3-950: #19160d;
  --color-salud-1-50: #f2f5fb;
  --color-salud-1-100: #d4dce8;
  --color-salud-1-200: #b8c4d6;
  --color-salud-1-300: #9dacc3;
  --color-salud-1-400: #8294b0;
  --color-salud-1-500: #697d9c;
  --color-salud-1-600: #516688;
  --color-salud-1-700: #3a5174;
  --color-salud-1-800: #21375a;
  --color-salud-1-900: #132848;
  --color-salud-1-950: #041532;
  --color-salud-2-50: #f0f5fe;
  --color-salud-2-100: #cfddf3;
  --color-salud-2-200: #afc4e5;
  --color-salud-2-300: #91acd7;
  --color-salud-2-400: #7494c7;
  --color-salud-2-500: #597cb5;
  --color-salud-2-600: #4065a1;
  --color-salud-2-700: #345995;
  --color-salud-2-800: #1a3a6d;
  --color-salud-2-900: #0c2651;
  --color-salud-2-950: #021435;
  --color-salud-3-50: #daf7ff;
  --color-salud-3-100: #b7ddff;
  --color-salud-3-200: #95c4ff;
  --color-salud-3-300: #76aaff;
  --color-salud-3-400: #568de8;
  --color-salud-3-500: #477acf;
  --color-salud-3-600: #3864ad;
  --color-salud-3-700: #2c4f89;
  --color-salud-3-800: #223b64;
  --color-salud-3-900: #192841;
  --color-salud-3-950: #11161e;
  --color-economia-1-50: #fff1f3;
  --color-economia-1-100: #f4d2d7;
  --color-economia-1-200: #e6b4bb;
  --color-economia-1-300: #d696a1;
  --color-economia-1-400: #c57a87;
  --color-economia-1-500: #b25e6f;
  --color-economia-1-600: #9e4358;
  --color-economia-1-700: #882742;
  --color-economia-1-800: #761032;
  --color-economia-1-900: #55001c;
  --color-economia-1-950: #3a000b;
  --color-economia-2-50: #ffeff1;
  --color-economia-2-100: #ffc9d0;
  --color-economia-2-200: #ffa3b1;
  --color-economia-2-300: #f97e93;
  --color-economia-2-400: #eb5977;
  --color-economia-2-500: #d7315e;
  --color-economia-2-600: #ca1551;
  --color-economia-2-700: #9a0037;
  --color-economia-2-800: #770027;
  --color-economia-2-900: #530019;
  --color-economia-2-950: #30010d;
  --color-economia-3-50: #ffd4e4;
  --color-economia-3-100: #ffacc5;
  --color-economia-3-200: #ff84a7;
  --color-economia-3-300: #ff5b8b;
  --color-economia-3-400: #ff276f;
  --color-economia-3-500: #e2085d;
  --color-economia-3-600: #bc004c;
  --color-economia-3-700: #96043b;
  --color-economia-3-800: #6e0e2d;
  --color-economia-3-900: #47121f;
  --color-economia-3-950: #211013;
  --color-desarrollo-humano-1-50: #edf8f4;
  --color-desarrollo-humano-1-100: #c2e5d9;
  --color-desarrollo-humano-1-200: #98d1be;
  --color-desarrollo-humano-1-300: #6fbca5;
  --color-desarrollo-humano-1-400: #44a78c;
  --color-desarrollo-humano-1-500: #098f73;
  --color-desarrollo-humano-1-600: #00785f;
  --color-desarrollo-humano-1-700: #005f4b;
  --color-desarrollo-humano-1-800: #024738;
  --color-desarrollo-humano-1-900: #0c2f26;
  --color-desarrollo-humano-1-950: #0e1915;
  --color-desarrollo-humano-2-50: #9dffeb;
  --color-desarrollo-humano-2-100: #71f8d0;
  --color-desarrollo-humano-2-200: #40e0b7;
  --color-desarrollo-humano-2-300: #03cea4;
  --color-desarrollo-humano-2-400: #00ad87;
  --color-desarrollo-humano-2-500: #009372;
  --color-desarrollo-humano-2-600: #00795d;
  --color-desarrollo-humano-2-700: #005f49;
  --color-desarrollo-humano-2-800: #034737;
  --color-desarrollo-humano-2-900: #0d2f25;
  --color-desarrollo-humano-2-950: #0e1915;
  --color-desarrollo-humano-3-50: #5affe7;
  --color-desarrollo-humano-3-100: #0effcd;
  --color-desarrollo-humano-3-200: #00e5b5;
  --color-desarrollo-humano-3-300: #00c99e;
  --color-desarrollo-humano-3-400: #00ae88;
  --color-desarrollo-humano-3-500: #009372;
  --color-desarrollo-humano-3-600: #00795e;
  --color-desarrollo-humano-3-700: #005f4a;
  --color-desarrollo-humano-3-800: #014737;
  --color-desarrollo-humano-3-900: #0b2f25;
  --color-desarrollo-humano-3-950: #0c1915;
  --color-internacional-1-50: #fff1ee;
  --color-internacional-1-100: #fad1ca;
  --color-internacional-1-200: #f0b1a7;
  --color-internacional-1-300: #e29286;
  --color-internacional-1-400: #d27467;
  --color-internacional-1-500: #bf574a;
  --color-internacional-1-600: #a33429;
  --color-internacional-1-700: #8e241b;
  --color-internacional-1-800: #70110b;
  --color-internacional-1-900: #520201;
  --color-internacional-1-950: #340000;
  --color-internacional-2-50: #ffd9c9;
  --color-internacional-2-100: #ffb4a2;
  --color-internacional-2-200: #ff917d;
  --color-internacional-2-300: #ff6d5b;
  --color-internacional-2-400: #fb4d3d;
  --color-internacional-2-500: #d9382b;
  --color-internacional-2-600: #b52a20;
  --color-internacional-2-700: #8f2219;
  --color-internacional-2-800: #6a1d16;
  --color-internacional-2-900: #451813;
  --color-internacional-2-950: #20120f;
  --color-internacional-3-50: #ffd6ca;
  --color-internacional-3-100: #ffb8ab;
  --color-internacional-3-200: #ff9b8e;
  --color-internacional-3-300: #ff8276;
  --color-internacional-3-400: #de6b60;
  --color-internacional-3-500: #be584f;
  --color-internacional-3-600: #9d4840;
  --color-internacional-3-700: #7c3933;
  --color-internacional-3-800: #5b2b27;
  --color-internacional-3-900: #3c1f1c;
  --color-internacional-3-950: #1e1311;
  --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);
  --font-brand: 'Montserrat', Rubik;
  --font-system: Rubik;
  --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, #00737f 0%, #0a444a 100%);
}

/* Colores de los ejes temáticos (generado). */
[data-eje="educacion"] {
  --eje-1: var(--color-educacion-1-400);
  --eje-2: var(--color-educacion-2-200);
  --eje-3: var(--color-educacion-3-100);
  --eje-tinte-fondo: var(--color-educacion-1-100);
  --eje-tinte-texto: var(--color-educacion-1-800);
  --eje-tinte-borde: var(--color-educacion-1-200);
}
[data-eje="salud"] {
  --eje-1: var(--color-salud-1-800);
  --eje-2: var(--color-salud-2-700);
  --eje-3: var(--color-salud-3-400);
  --eje-tinte-fondo: var(--color-salud-1-100);
  --eje-tinte-texto: var(--color-salud-1-800);
  --eje-tinte-borde: var(--color-salud-1-200);
}
[data-eje="desarrollo-economico-y-productivo"] {
  --eje-1: var(--color-economia-1-800);
  --eje-2: var(--color-economia-2-600);
  --eje-3: var(--color-economia-3-400);
  --eje-tinte-fondo: var(--color-economia-1-100);
  --eje-tinte-texto: var(--color-economia-1-800);
  --eje-tinte-borde: var(--color-economia-1-200);
}
[data-eje="desarrollo-humano"] {
  --eje-1: var(--color-desarrollo-humano-1-500);
  --eje-2: var(--color-desarrollo-humano-2-300);
  --eje-3: var(--color-desarrollo-humano-3-100);
  --eje-tinte-fondo: var(--color-desarrollo-humano-1-100);
  --eje-tinte-texto: var(--color-desarrollo-humano-1-800);
  --eje-tinte-borde: var(--color-desarrollo-humano-1-200);
}
[data-eje="internacional"] {
  --eje-1: var(--color-internacional-1-600);
  --eje-2: var(--color-internacional-2-400);
  --eje-3: var(--color-internacional-3-300);
  --eje-tinte-fondo: var(--color-internacional-1-100);
  --eje-tinte-texto: var(--color-internacional-1-800);
  --eje-tinte-borde: var(--color-internacional-1-200);
}

/* Componentes del Design System FaroPaís (components/bundle.css), copiados tal cual.
   Solo se quitó el @import de las fuentes: el sitio las carga desde el <head>. No editar acá: cambiar en el Design System y volver a copiar. */

.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); }

/* =====================================================================
   FaroPaís — estilos del sitio
   Todo valor sale de un token del Design System. Las medidas sueltas que
   aparecen son proporciones de layout (anchos de columna, tamaños de
   imagen) que el sistema no define como token.
   Breakpoints del sistema, mobile-first: 640, 768, 1024 y 1280px.
   ===================================================================== */

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

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

/* Alias locales, todos de tokens del sistema. */
:root {
    --sobre-oscuro: var(--btn-fg);
    /* Alturas del encabezado: la franja del logo y el navbar. «alto-fijo» es
       la parte que queda a la vista al hacer scroll: en mobile la franja (con
       el botón de menú), en escritorio el navbar. */
    --alto-franja: var(--space-8);
    --alto-nav: calc(var(--space-7) + var(--space-2));
    --alto-fijo: var(--alto-franja);
}
@media (min-width: 1024px) {
    :root {
        --alto-franja: calc(var(--space-8) + var(--space-4));
        --alto-fijo: var(--alto-nav);
    }
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Los saltos a una sección dejan libre el encabezado fijo. */
    scroll-padding-top: calc(var(--alto-fijo) + var(--space-4));
}

body {
    margin: 0;
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-system);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }
main:focus { outline: none; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-brand);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--color-primary-600); text-underline-offset: 0.18em; }
a:hover { color: var(--color-primary-700); }
a:active { color: var(--color-primary-800); }

/* Foco visible en todo elemento interactivo. */
:focus-visible {
    outline: var(--border-2) solid var(--input-focus);
    outline-offset: 2px;
}

.icono { flex: none; }

.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.saltar {
    position: absolute;
    left: var(--space-4);
    top: calc(-1 * var(--space-9));
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-4);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
}
.saltar:focus { top: var(--space-4); color: var(--btn-fg); }

.contenedor {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}
@media (min-width: 768px) {
    .contenedor { padding-inline: var(--space-6); }
}

/* El botón del sistema, aplicado también a enlaces. */
a.btn { text-decoration: none; }
a.btn-primary, a.btn-primary:hover, a.btn-primary:active { color: var(--btn-fg); }
a.btn-ghost, a.btn-ghost:hover, a.btn-ghost:active { color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-surface); }
.btn-ghost:active { background: var(--color-neutral-200); }
.btn[aria-disabled="true"] { cursor: not-allowed; }
/* Dentro de una card (bg-surface), el botón ghost lleva fondo elevado para que
   su borde llegue a 3:1, y el anillo de foco baja un paso en la rampa. */
.card .btn-ghost { background: var(--bg-surface-raised); }
.card .btn-ghost:hover { background: var(--bg-app); box-shadow: var(--shadow-1); }
.card .btn-ghost:active { background: var(--color-neutral-200); box-shadow: none; }
.card :focus-visible { outline-color: var(--color-primary-600); }

/* Microinteracción común a toda card que lleva a otro lugar: se eleva un
   poco y gana sombra. Toda la card es el enlace (el ::after del enlace la
   cubre). */
.card-interactiva {
    position: relative;
    transition: transform var(--duration-normal) var(--ease-ease-out),
                box-shadow var(--duration-normal) var(--ease-ease-out);
}
.card-interactiva:hover {
    transform: translateY(calc(-1 * var(--space-1)));
    box-shadow: var(--shadow-3);
}
.card-interactiva:focus-within { outline: var(--border-2) solid var(--input-focus); outline-offset: 2px; }
.card-interactiva h2 a,
.card-interactiva h3 a { color: inherit; text-decoration: none; }
.card-interactiva h2 a::after,
.card-interactiva h3 a::after { content: ""; position: absolute; inset: 0; }
.card-interactiva h2 a:focus-visible,
.card-interactiva h3 a:focus-visible { outline: none; }
.card-interactiva:hover .card-accion-pie .icono { transform: translateX(var(--space-1)); }

/* ---------- Texto corrido ---------- */

/* Cuerpo de texto: justificado y con corte de palabras (regla del sistema). */
.texto p,
p.texto {
    max-width: 68ch;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.texto p + p { margin-top: var(--space-4); }

/* Contenido pendiente: marca a la vista qué va en cada lugar. */
.pendiente {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: var(--border-1) dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
}
.texto .pendiente { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.pendiente-titulo { color: var(--text-secondary); }
.pendiente-linea { font-family: var(--font-mono); }

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

/* Arriba, la franja con el logo; debajo, el navbar como fila propia. En
   escritorio la franja se va con el scroll y el navbar queda fijo; en mobile
   queda fija la franja, que tiene el botón de menú. */
.encabezado {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.franja {
    background: var(--gradient-brand);
    color: var(--sobre-oscuro);
}
.franja :focus-visible { outline-color: var(--sobre-oscuro); }
.franja-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--alto-franja);
}

/* Logo horizontal en blanco (faro + nombre), sin componer. El archivo está
   recortado a su contorno, así que su alto es el del dibujo; el resto de la
   franja queda como área de respeto. */
.marca {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
}
.marca img { width: auto; height: calc(var(--space-7) - var(--space-2)); }
@media (min-width: 1024px) {
    .marca img { height: calc(var(--space-7) + var(--space-1)); }
}

.boton-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--control-lg);
    height: var(--control-lg);
    margin-right: calc(-1 * var(--space-3));
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sobre-oscuro);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-ease-in-out);
}
.boton-menu:hover { background: var(--color-primary-800); }
.boton-menu-cerrar { display: none; }
.boton-menu[aria-expanded="true"] .boton-menu-abrir { display: none; }
.boton-menu[aria-expanded="true"] .boton-menu-cerrar { display: block; }

.navegacion {
    background: var(--bg-app);
    border-bottom: var(--border-1) solid var(--border-default);
}

.navegacion-enlace {
    display: flex;
    align-items: center;
    min-height: var(--control-lg);
    color: var(--text-primary);
    font-size: var(--text-md);
    text-decoration: none;
    transition: color var(--duration-normal) var(--ease-ease-in-out);
}
.navegacion-enlace:hover { color: var(--color-primary-700); }
.navegacion-enlace[aria-current="page"] { font-weight: var(--weight-medium); }

/* Botón que abre el submenú de un ítem (desplegable en escritorio, acordeón
   en mobile y tablet). */
.boton-submenu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-ease-in-out);
}
.boton-submenu:hover { background: var(--color-neutral-200); color: var(--text-primary); }
.boton-submenu .icono { transition: transform var(--duration-fast) var(--ease-ease-in-out); }
.boton-submenu[aria-expanded="true"] .icono { transform: rotate(180deg); }

.btn-ghost[aria-current="page"] { background: var(--bg-surface); border-color: var(--text-primary); }
.btn-primary[aria-current="page"] { background: var(--btn-bg-active); }

/* Mobile y tablet: el navbar se abre como panel debajo de la franja, con
   cada submenú como acordeón. Sin JavaScript queda todo desplegado. */
@media (max-width: 1023.98px) {
    .js .boton-menu { display: inline-flex; }
    .js .navegacion {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--alto-franja));
        max-height: calc(100dvh - var(--alto-franja));
        overflow-y: auto;
        box-shadow: var(--shadow-2);
    }
    .js .navegacion.abierta { display: block; }
    .navegacion-lista { padding: var(--space-2) 0 var(--space-5); }

    .navegacion-lista > li { border-bottom: var(--border-1) solid var(--border-default); }
    .navegacion-lista > .navegacion-accion { border-bottom: none; }
    .navegacion-enlace[aria-current="page"] { color: var(--color-primary-700); }

    .con-submenu {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
    .boton-submenu { width: var(--control-lg); height: var(--control-lg); }
    html:not(.js) .boton-submenu { display: none; }

    .submenu { grid-column: 1 / -1; padding: 0 0 var(--space-2) var(--space-4); }
    .js .submenu { display: none; }
    .js .con-submenu.abierto > .submenu { display: block; }
    .submenu a {
        display: flex;
        align-items: center;
        min-height: var(--control-lg);
        color: var(--text-secondary);
        font-size: var(--text-sm);
        text-decoration: none;
    }
    .submenu a:hover { color: var(--color-primary-700); }

    .navegacion-accion { padding-top: var(--space-4); }
    .navegacion-accion + .navegacion-accion { padding-top: var(--space-3); }
    .navegacion-accion .btn { width: 100%; height: var(--control-lg); font-size: var(--text-md); }
}

/* Escritorio: navbar horizontal fijo; la franja del logo sube con el scroll. */
@media (min-width: 1024px) {
    .encabezado { top: calc(-1 * var(--alto-franja)); }

    .navegacion-lista {
        display: flex;
        align-items: stretch;
        min-height: var(--alto-nav);
    }
    .navegacion-lista > li {
        position: relative;
        display: flex;
        align-items: center;
        transition: background var(--duration-normal) var(--ease-ease-in-out);
    }
    /* Estados: normal, al pasar el cursor (un tono más oscuro) y actual. */
    .navegacion-lista > li:not(.navegacion-accion):hover { background: var(--bg-surface); }
    .navegacion-enlace {
        align-self: stretch;
        min-height: 0;
        padding: 0 var(--space-3);
        color: var(--text-secondary);
        font-size: var(--text-sm);
    }
    .navegacion-lista > li:hover > .navegacion-enlace,
    .navegacion-enlace:hover { color: var(--text-primary); }
    .navegacion-enlace[aria-current="page"] { color: var(--text-primary); }
    /* La sección actual se marca con peso y con un filete, no solo con color. */
    .navegacion-lista > li:has(> .navegacion-enlace[aria-current="page"])::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: var(--border-3);
        background: var(--color-primary-600);
    }
    .con-submenu > .navegacion-enlace { padding-right: 0; }
    .boton-submenu {
        width: var(--control-sm);
        height: var(--control-sm);
        margin: 0 var(--space-2) 0 var(--space-1);
    }

    /* Sumate y Apoyanos van juntos, al final del navbar. */
    .navegacion-accion-primera { margin-left: auto; }
    .navegacion-accion + .navegacion-accion { margin-left: var(--space-3); }

    .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: var(--z-dropdown);
        min-width: 240px;
        padding: var(--space-2);
        background: var(--bg-surface-raised);
        border: var(--border-1) solid var(--border-default);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        box-shadow: var(--shadow-2);
    }
    .con-submenu.abierto > .submenu { display: block; }
    /* Sin JavaScript, el submenú se abre al pasar el mouse o con el teclado. */
    html:not(.js) .con-submenu:hover > .submenu,
    html:not(.js) .con-submenu:focus-within > .submenu { display: block; }

    .submenu a {
        display: flex;
        align-items: center;
        min-height: var(--control-md);
        padding: 0 var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-size: var(--text-sm);
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--duration-fast) var(--ease-ease-in-out);
    }
    .submenu a:hover { background: var(--bg-surface); }
    .submenu a:active { background: var(--color-neutral-200); }
}
@media (min-width: 1280px) {
    .navegacion-enlace { padding: 0 var(--space-4); }
}

/* ---------- Cabecera de página ---------- */

.cabecera { padding-block: var(--space-4) var(--space-6); }
@media (min-width: 768px) {
    .cabecera { padding-block: var(--space-5) var(--space-7); }
}

/* Volver al inicio: el mismo componente en todas las páginas internas. */
.volver-inicio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-lg);
    margin-bottom: var(--space-4);
    color: var(--color-primary-700);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.volver-inicio .icono { transition: transform var(--duration-fast) var(--ease-ease-in-out); }
.volver-inicio:hover { color: var(--color-primary-800); }
.volver-inicio:hover span { text-decoration: underline; }
.volver-inicio:hover .icono { transform: translateX(calc(-1 * var(--space-1))); }
.volver-pie { margin: var(--space-6) 0 0; }

.barra-acento {
    display: block;
    width: var(--space-8);
    height: var(--border-3);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-primary-600);
}

.cabecera h1 {
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tight);
    max-width: 28ch;
}
.cabecera .bajada {
    max-width: 60ch;
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-lg);
}
.cabecera .pendiente { margin-top: var(--space-4); }

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

.seccion { padding-block: var(--space-7); border-top: var(--border-1) solid var(--border-default); }
.seccion:last-child { padding-bottom: var(--space-8); }

.seccion > .contenedor > h2,
.seccion-titulo {
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
}

/* Título a la izquierda y contenido a la derecha en pantallas anchas. */
@media (min-width: 1024px) {
    .seccion-columnas > .contenedor {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--grid-gutter);
        align-items: start;
    }
    .seccion-columnas > .contenedor > h2 { grid-column: 1 / span 4; margin-bottom: 0; }
    .seccion-columnas > .contenedor > .seccion-cuerpo { grid-column: 5 / -1; }
}

.grilla {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.subtitulo { font-size: var(--text-lg); margin-bottom: var(--space-3); }

/* ---------- Pantalla inicial ---------- */

.bienvenida {
    position: relative;
    overflow: hidden;
    background: var(--color-secondary-950);
    color: var(--sobre-oscuro);
}
.bienvenida :focus-visible { outline-color: var(--color-primary-300); }

.bienvenida-contenido {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) 0 var(--space-9);
    text-align: center;
}
@media (min-width: 768px) {
    .bienvenida-contenido { padding: var(--space-9) var(--space-6) var(--space-8); }
}

/* Antetítulo: qué es FaroPaís, en turquesa claro sobre azul noche. */
.bienvenida-kicker {
    margin-bottom: var(--space-4);
    color: var(--color-primary-300);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* El logo grande es el título de la página (su texto alternativo, «FaroPaís»). */
.bienvenida-logo { width: 200px; height: 200px; }
@media (min-width: 768px) {
    .bienvenida-logo { width: 256px; height: 256px; }
}
/* La frase, debajo del logo, en el lugar de la bajada. */
.bienvenida-lema {
    max-width: 760px;
    margin-top: var(--space-4);
    font-family: var(--font-brand);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}
@media (min-width: 768px) {
    .bienvenida-lema { font-size: var(--text-xl); }
}
/* En pantallas angostas el título corre libre; desde tablet corta después de la coma. */
.corte-escritorio { display: none; }
@media (min-width: 768px) {
    .corte-escritorio { display: inline; }
}
.bienvenida .bajada {
    max-width: 520px;
    margin-top: var(--space-4);
    color: var(--color-secondary-200);
    font-size: var(--text-lg);
}
.bienvenida .pendiente,
.bloque-oscuro .pendiente {
    border-color: var(--color-secondary-400);
    color: var(--color-secondary-200);
}
.bienvenida .pendiente { margin: var(--space-4) auto 0; text-align: center; }
.bienvenida .pendiente-titulo { color: var(--sobre-oscuro); }
.bienvenida-acciones { margin-top: var(--space-6); }
.bienvenida-acciones .btn .icono { transition: transform var(--duration-fast) var(--ease-ease-in-out); }
.bienvenida-acciones .btn:hover .icono { transform: translateY(var(--space-1)); }

/* El haz del faro: arcos concéntricos desde un punto, motivo de la portada
   del Design System. Trazo border-3 en el turquesa del logotipo. */
.haz {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(112px, 30vw, 384px);
    height: auto;
    pointer-events: none;
}
/* En tablet el haz se achica para no pasar por debajo de la bajada. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .haz { width: clamp(112px, 18vw, 384px); }
}
.haz circle {
    fill: none;
    stroke: var(--color-primary-400);
    stroke-width: var(--border-3);
    vector-effect: non-scaling-stroke;
}

/* Accesos a las secciones: un menú visual del sitio. */
.accesos { padding-block: var(--space-8); }
.accesos h2 {
    margin-bottom: var(--space-6);
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tight);
}
.grilla-accesos { display: grid; gap: var(--grid-gutter); }
@media (min-width: 640px) {
    .grilla-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-acceso-destacada { grid-column: span 2; }
}
@media (min-width: 1024px) {
    .grilla-accesos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card-acceso {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 192px;
    padding: var(--space-5);
    background: var(--bg-surface-raised);
    border: var(--border-1) solid var(--border-default);
    border-top: var(--border-3) solid var(--color-primary-600);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-1);
}
.card-acceso h3 { font-size: var(--text-xl); }
.card-acceso p { color: var(--text-secondary); font-size: var(--text-sm); }
.card-acceso .card-accion-pie { margin-top: auto; }
/* Apoyanos: la card destacada, en el azul noche de marca. */
.card-acceso-destacada {
    background: var(--color-secondary-950);
    border-color: var(--color-secondary-950);
    border-top-color: var(--color-primary-400);
    color: var(--sobre-oscuro);
}
.card-acceso-destacada p { color: var(--color-secondary-200); }
.card-acceso-destacada .card-accion-pie { color: var(--color-primary-300); }
.card-acceso-destacada:focus-within { outline-color: var(--color-primary-300); }
.card-acceso-icono { color: var(--color-primary-400); }

/* ---------- Sobre nosotros ---------- */

/* Qué es FaroPaís: la presentación principal, en bloque azul noche con el
   haz del faro. */
.presentacion {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-4) var(--space-9);
    background: var(--color-secondary-950);
    color: var(--sobre-oscuro);
}
.presentacion .contenedor { position: relative; z-index: 1; }
.presentacion :focus-visible { outline-color: var(--color-primary-300); }
.presentacion .volver-inicio { color: var(--color-primary-300); }
.presentacion .volver-inicio:hover { color: var(--sobre-oscuro); }
.presentacion-kicker {
    margin: var(--space-4) 0 var(--space-5);
    color: var(--color-secondary-200);
    font-family: var(--font-system);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.presentacion .barra-acento { background: var(--color-primary-400); }
.presentacion-titulo {
    max-width: 16ch;
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
}
/* El texto no llega a la zona del haz, que ocupa la esquina inferior derecha. */
.presentacion-texto { position: relative; z-index: 1; max-width: 68ch; margin-top: var(--space-6); font-size: var(--text-lg); }
@media (min-width: 640px) {
    .presentacion-texto { max-width: min(68ch, calc(100% - clamp(112px, 30vw, 384px) + var(--space-8))); }
}
.presentacion-texto p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.presentacion-texto p + p { margin-top: var(--space-4); }
.presentacion .pendiente { border-color: var(--color-secondary-400); color: var(--color-secondary-200); text-align: left; }
@media (min-width: 768px) {
    .presentacion { padding-block: var(--space-5) var(--space-9); }
    .presentacion-kicker { margin-top: var(--space-6); }
}

.subnavegacion {
    position: sticky;
    top: var(--alto-fijo);
    z-index: var(--z-dropdown);
    background: var(--bg-app);
    border-top: var(--border-1) solid var(--border-default);
    border-bottom: var(--border-1) solid var(--border-default);
}
.subnavegacion ul {
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;
}
.subnavegacion ul::-webkit-scrollbar { display: none; }
.subnavegacion a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--control-lg);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
}
.subnavegacion a:hover { color: var(--text-primary); }
.subnavegacion a:focus-visible { outline-offset: -2px; }
.subnavegacion a[aria-current="true"] { color: var(--text-primary); font-weight: var(--weight-medium); }
.subnavegacion a[aria-current="true"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--border-3);
    background: var(--color-primary-600);
}
/* En esta página también queda libre la subnavegación fija. */
.pagina-sobre-nosotros .seccion { scroll-margin-top: var(--control-lg); }
.subnavegacion + .seccion { border-top: none; }

.dupla { display: grid; gap: var(--space-6); }
@media (min-width: 640px) {
    .dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gutter); }
}

/* Misión, visión y valores: misión y visión lado a lado; valores, a lo ancho,
   con sus cuatro valores en grilla. */
.grilla-mvv { display: grid; gap: var(--grid-gutter); }
@media (min-width: 768px) {
    .grilla-mvv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mvv-valores { grid-column: 1 / -1; }
}
.valores { display: grid; gap: var(--space-5); }
@media (min-width: 640px) {
    .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--grid-gutter); }
}
@media (min-width: 1024px) {
    .valores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.valores li { padding-top: var(--space-3); border-top: var(--border-2) solid var(--color-primary-600); }
.valores h4 { margin-bottom: var(--space-2); font-size: var(--text-md); }
.valores p { color: var(--text-secondary); font-size: var(--text-sm); }
.mvv {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    background: var(--bg-surface-raised);
    border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-1);
}
.mvv-icono {
    display: grid;
    place-items: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-circle);
    background: var(--color-primary-100);
    color: var(--color-primary-800);
}
.mvv h3 { font-size: var(--text-xl); }

/* Equipo: tarjetas simples con nombre y cargo o área. Primero el equipo de
   trabajo (con acento turquesa), después la Comisión Directiva. */
.equipo-grupo { margin: var(--space-6) 0 var(--space-4); font-size: var(--text-xl); }
.equipo-grupo-secundario { margin-top: var(--space-7); font-size: var(--text-lg); }
.galeria { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 1024px) {
    .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.integrante {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface-raised);
    border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius);
}
.galeria-trabajo .integrante { border-top: var(--border-3) solid var(--color-primary-600); }
.integrante-nombre { color: var(--text-primary); font-size: var(--text-md); font-weight: var(--weight-medium); line-height: var(--leading-tight); }
.integrante-rol { color: var(--text-secondary); font-size: var(--text-sm); }

/* Cómo trabajamos: la descripción arriba y los tres conceptos abajo. */
.como-trabajamos { background: var(--bg-surface-raised); }
.como-trabajamos-intro { margin-top: var(--space-4); font-size: var(--text-lg); }
.pilares { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
/* Tres columnas solo desde escritorio: en tablet «Acompañamiento» no entra. */
@media (min-width: 1024px) {
    .pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
}
.pilares > li { padding-top: var(--space-5); border-top: var(--border-3) solid var(--color-primary-600); }
.pilares h3 { margin-bottom: var(--space-3); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }

/* ---------- Programas ---------- */

.grilla-programas { display: grid; gap: var(--grid-gutter); }
@media (min-width: 768px) {
    .grilla-programas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grilla-programas > :last-child { grid-column: span 2; }
}
/* En escritorio, tres arriba y dos abajo. */
@media (min-width: 1024px) {
    .grilla-programas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .grilla-programas > li { grid-column: span 2; }
    .grilla-programas > li:nth-child(n+4) { grid-column: span 3; }
}
.programa {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-surface-raised);
    border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-1);
}
/* La marca del programa, en su versión para fondo oscuro, sobre azul noche. */
.programa-cabeza {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 176px;
    padding: var(--space-5);
    background: var(--color-secondary-950);
    border-bottom: var(--border-3) solid var(--color-primary-400);
}
.programa-cabeza img { width: auto; max-width: 100%; max-height: 104px; }
.programa-cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--card-padding);
}
.programa h2 { font-size: var(--text-lg); }
.programa:hover { transform: translateY(calc(-1 * var(--space-1))); box-shadow: var(--shadow-3); }

/* ---------- Documentos ---------- */

.ayuda { color: var(--text-secondary); margin-bottom: var(--space-6); font-size: var(--text-md); }

.grilla-documentos {
    display: grid;
    gap: var(--grid-gutter);
}
@media (min-width: 640px) {
    .grilla-documentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .grilla-documentos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Los tres tonos del eje, en una franja. */
.tonos { display: flex; height: var(--space-2); }
.tonos span { flex: 1; }
.tonos span:nth-child(1) { background: var(--eje-1); }
.tonos span:nth-child(2) { background: var(--eje-2); }
.tonos span:nth-child(3) { background: var(--eje-3); }

/* Card de eje temático: navegacional, toda la card es el enlace. */
.card-eje {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 176px;
    padding: 0;
    overflow: hidden;
}
.card-eje-cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--card-padding);
}
.card-eje h2 { font-size: var(--text-xl); }
.card-accion-pie {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary-700);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.card-accion-pie .icono { transition: transform var(--duration-fast) var(--ease-ease-in-out); }

/* Bloque oscuro de marca para los compilados. */
.bloque-oscuro {
    background: var(--color-secondary-950);
    color: var(--sobre-oscuro);
    border-radius: var(--card-radius);
}
.bloque-oscuro :focus-visible { outline-color: var(--color-primary-300); }
.compilado {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 176px;
    padding: var(--card-padding);
}
.compilado h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.compilado .btn { align-self: flex-start; }
@media (max-width: 639.98px) {
    .compilado .btn { align-self: stretch; }
}

/* Peso del archivo, debajo de la bajada o de la descripción. */
.documento-peso { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); }
.bloque-oscuro .documento-peso { color: var(--color-secondary-200); }

/* Compilado de un eje: cierra el listado, con la franja de tonos del eje. */
.compilado-eje {
    position: relative;
    min-height: 0;
    margin-top: var(--space-6);
    padding-top: calc(var(--card-padding) + var(--space-2));
    overflow: hidden;
}
.compilado-eje .tonos { position: absolute; inset: 0 0 auto; }
.compilado-eje h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
@media (min-width: 640px) {
    .compilado-eje { flex-direction: row; align-items: center; gap: var(--space-6); }
    .compilado-eje .btn { align-self: center; flex-shrink: 0; }
}

/* Página de un eje. */
.migas { padding-top: var(--space-4); }
.migas .volver-inicio { margin-bottom: var(--space-1); }
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
.migas li { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-secondary); }
.migas a { display: inline-flex; align-items: center; min-height: var(--control-md); }
.migas + .cabecera { padding-top: var(--space-5); }

.cabecera .tonos {
    width: var(--space-8);
    height: var(--border-3);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.selector-ejes { border-top: var(--border-1) solid var(--border-default); border-bottom: var(--border-1) solid var(--border-default); }
/* Los cinco ejes quedan siempre a la vista: en pantallas angostas bajan de línea. */
.selector-ejes ul { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-3); }
.selector-ejes a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-md);
    padding: 0 var(--space-4);
    border: var(--border-1) solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
}
.selector-ejes a:hover { background: var(--bg-surface); }
.selector-ejes a:active { background: var(--color-neutral-200); }
.selector-ejes a[aria-current="page"] {
    background: var(--color-secondary-950);
    border-color: var(--color-secondary-950);
    color: var(--sobre-oscuro);
    font-weight: var(--weight-medium);
}
.selector-ejes .muestra {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--radius-circle);
    background: var(--eje-2);
    border: var(--border-1) solid var(--eje-1);
}

.lista-documentos { display: grid; gap: var(--space-4); }
.documento { display: grid; gap: var(--space-4); align-items: center; }
.documento .card-title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.documento .card-body { max-width: 72ch; font-size: var(--text-md); }
.documento .btn { justify-self: start; }
@media (max-width: 639.98px) {
    .documento .btn { justify-self: stretch; height: var(--control-lg); }
}
@media (min-width: 640px) {
    .documento { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); }
}



/* Popup de descarga: confirma que la descarga empezó. No bloquea la
   página y se va solo a los pocos segundos. */
.popup-descarga { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); pointer-events: none; }
.popup-descarga-caja {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--bg-surface-raised);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    text-align: center;
    opacity: 0;
    transform: translateY(var(--space-2)) scale(0.96);
    transition: opacity var(--duration-normal) var(--ease-ease-out),
                transform var(--duration-normal) var(--ease-ease-out);
    pointer-events: auto;
}
.popup-descarga-caja.visible { opacity: 1; transform: none; }
.popup-descarga-icono {
    display: grid;
    place-items: center;
    width: var(--space-8);
    height: var(--space-8);
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-circle);
    background: var(--color-primary-100);
    color: var(--color-primary-800);
}
.popup-descarga-titulo { font-family: var(--font-brand); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.popup-descarga-nombre { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); }
.popup-descarga-nota { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-1) solid var(--border-default); color: var(--text-secondary); font-size: var(--text-xs); }
.popup-cerrar {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: grid;
    place-items: center;
    width: var(--control-md);
    height: var(--control-md);
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.popup-cerrar:hover { background: var(--bg-surface); color: var(--text-primary); }

/* ---------- Observatorios ---------- */

.lista-observatorios { display: grid; gap: var(--space-7); }
.observatorio {
    overflow: hidden;
    background: var(--bg-surface-raised);
    border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-1);
}
/* La marca del observatorio, sobre azul noche, como en Programas. */
.observatorio-cabeza {
    display: grid;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-6) var(--space-5);
    background: var(--color-secondary-950);
    border-bottom: var(--border-3) solid var(--color-primary-400);
    color: var(--sobre-oscuro);
}
.observatorio-cabeza img { width: auto; max-width: 100%; max-height: 96px; }
.observatorio-cabeza h2 { font-size: var(--text-xl); }
.observatorio-cuerpo { padding: var(--space-6) var(--space-5); }
.observatorio h3 { font-size: var(--text-md); margin-bottom: var(--space-3); }
@media (min-width: 768px) {
    .observatorio-cabeza { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-7); padding: var(--space-6); }
    .observatorio-cabeza h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
    .observatorio-cuerpo { padding: var(--space-6); }
}

/* «En proceso»: la parte interactiva todavía no está. Secundario frente a la
   explicación, con una barra que avanza para decir que se está trabajando. */
.en-proceso {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-top: var(--space-7);
    padding: var(--space-4) var(--space-5) var(--space-5);
    background: var(--bg-app);
    border: var(--border-1) solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}
.en-proceso-icono {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--control-lg);
    height: var(--control-lg);
    border-radius: var(--radius-circle);
    background: var(--color-primary-100);
    color: var(--color-primary-800);
}
.en-proceso-titulo { color: var(--text-primary); font-weight: var(--weight-medium); margin-bottom: var(--space-1); }
.en-proceso-barra {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--border-3);
    background: var(--color-primary-100);
}
.en-proceso-barra::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: var(--gradient-brand);
    animation: en-proceso calc(var(--duration-slow) * 6) var(--ease-ease-in-out) infinite;
}
@keyframes en-proceso {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

/* Frases que se alternan debajo del título: todas ocupan la misma celda, así
   el bloque toma el alto de la más larga y no salta al cambiar. La que sale
   se desvanece primero y recién después aparece la siguiente. Sin JavaScript
   o con movimiento reducido queda fija la primera. */
.en-proceso > div { flex: 1; min-width: 0; }
.frases { display: grid; }
.frase {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(var(--space-1));
    transition: opacity calc(var(--duration-slow) * 1.5) var(--ease-ease-in-out),
                transform calc(var(--duration-slow) * 1.5) var(--ease-ease-in-out);
}
.frase.activa {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--duration-slow) * 1.5);
}

/* ---------- Sumate y Apoyanos ---------- */

/* Opciones de participación y apoyo: bloques grandes en azul noche. */
.grilla-opciones { display: grid; gap: var(--grid-gutter); }
@media (min-width: 768px) {
    .grilla-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.opcion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    background: var(--color-secondary-950);
    border-top: var(--border-3) solid var(--color-primary-400);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-2);
    color: var(--sobre-oscuro);
}
.opcion :focus-visible { outline-color: var(--color-primary-300); }
.opcion h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.opcion .pendiente { border-color: var(--color-secondary-400); color: var(--color-secondary-200); }
.opcion .btn { margin-top: auto; }
.opcion .btn .icono { transition: transform var(--duration-fast) var(--ease-ease-in-out); }
.opcion .btn:hover .icono { transform: translateX(var(--space-1)); }
.opcion-icono {
    display: grid;
    place-items: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-circle);
    background: var(--btn-bg);
    color: var(--sobre-oscuro);
}
@media (min-width: 768px) {
    .opcion { padding: var(--space-7) var(--space-6); gap: var(--space-5); }
}
@media (max-width: 639.98px) {
    .opcion .btn { align-self: stretch; }
}
/* Sumate tiene una sola opción: en pantallas anchas, en una fila. */
@media (min-width: 1024px) {
    .opcion-ancha {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-6);
    }
    .opcion-ancha .btn { margin-top: 0; }
}
.opcion-texto { display: grid; gap: var(--space-4); }

/* Textos de cada opción: una frase destacada y el resto en tono secundario. */
.opcion p { color: var(--color-secondary-200); }
.opcion .opcion-lema {
    color: var(--color-primary-300);
    font-family: var(--font-brand);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

/* Formulario propio (empresas e instituciones): ancho de lectura cómodo. */
.formulario-bloque { max-width: 760px; margin-top: var(--space-5); }

/* Formulario de Google embebido (voluntariado). El alto es fijo porque el
   contenido viene de otro sitio y no se puede medir: está calculado para que
   el formulario entre sin barra interna en cada ancho. */
.formulario-externo {
    max-width: 760px;
    margin-top: var(--space-5);
    overflow: hidden;
    background: var(--bg-surface-raised);
    border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius);
}
.formulario-externo iframe { display: block; width: 100%; height: 1950px; border: 0; }
@media (min-width: 480px) {
    .formulario-externo iframe { height: 1750px; }
}
@media (min-width: 768px) {
    .formulario-externo iframe { height: 1520px; }
}
.formulario-externo-ayuda { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); }

/* Alianzas estratégicas: logos de las instituciones, cada uno en su placa.
   Los tamaños están compensados a ojo (área y peso visual), porque las tres
   marcas tienen formas muy distintas: sello circular, palabra ancha y
   palabra con escudo. */
.alianzas-intro { margin-bottom: var(--space-6); font-size: var(--text-md); }
.alianzas { display: grid; gap: var(--space-4); }
@media (min-width: 768px) {
    .alianzas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
}
.alianza {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--space-9) + var(--space-8));
    padding: var(--space-5);
    background: var(--bg-surface-raised);
    border: var(--border-1) solid var(--border-default);
    border-radius: var(--card-radius);
    transition: transform var(--duration-normal) var(--ease-ease-out),
                box-shadow var(--duration-normal) var(--ease-ease-out),
                border-color var(--duration-normal) var(--ease-ease-out);
}
.alianza:hover {
    transform: translateY(calc(-1 * var(--space-1)));
    box-shadow: var(--shadow-3);
    border-color: var(--border-strong);
}
.alianza img { width: auto; max-width: 100%; }
.alianza-bases { height: calc(var(--space-8) - var(--space-1)); }
.alianza-uca { height: calc(var(--space-9) + var(--space-2)); }
.alianza-austral { height: calc(var(--space-8) + var(--space-1)); }

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

.pie {
    padding-block: var(--space-7);
    background: var(--color-secondary-950);
    color: var(--sobre-oscuro);
}
.pie :focus-visible { outline-color: var(--color-primary-300); }
.pie-grilla { display: grid; gap: var(--space-6); }
@media (min-width: 768px) {
    .pie-grilla { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--grid-gutter); }
}
.pie-marca {
    display: inline-flex;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-sm);
}
.pie-marca img { width: auto; height: calc(var(--space-7) + var(--space-2)); }
.pie address {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--color-secondary-200);
    font-size: var(--text-sm);
    font-style: normal;
}
.pie address span { padding-block: var(--space-1); }
.pie address span:first-child { color: var(--sobre-oscuro); font-weight: var(--weight-medium); }
.pie address .pie-legal { padding-block: 0; font-size: var(--text-xs); }
.pie address .pie-legal + span:not(.pie-legal) { margin-top: var(--space-2); }
.pie-bloque h2 {
    display: flex;
    align-items: center;
    min-height: var(--control-md);
    color: var(--sobre-oscuro);
    font-family: var(--font-system);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.pie-lista a,
.pie address a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-md);
    color: var(--color-primary-300);
    font-size: var(--text-sm);
    text-decoration: none;
}
.pie-lista a:hover,
.pie address a:hover { color: var(--sobre-oscuro); text-decoration: underline; }
@media (max-width: 767.98px) {
    .pie-lista a, .pie address a { min-height: var(--control-lg); }
}
/* Secciones: renglones más juntos (28 px, sobre el mínimo táctil de 24 px). */
.pie-lista.lista-secciones a { min-height: calc(var(--space-5) + var(--space-1)); }

/* ---------- Contacto ---------- */

.datos-contacto { display: grid; gap: var(--space-6); margin: 0; }
/* En escritorio, el formulario al centro y más ancho; antes, uno debajo del otro. */
@media (min-width: 1024px) {
    .datos-contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: var(--grid-gutter); }
}
.datos-contacto > div { padding-top: var(--space-4); border-top: var(--border-2) solid var(--color-primary-600); }
.datos-contacto dt {
    margin-bottom: var(--space-3);
    font-family: var(--font-brand);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}
.datos-contacto dd { margin: 0; }
.datos-contacto address { display: flex; flex-direction: column; font-style: normal; }
.datos-contacto a { display: inline-flex; align-items: center; min-height: var(--control-md); }
.lista-redes { display: flex; flex-direction: column; align-items: flex-start; }

/* Formulario de Contacto: campos del Design System (.field, .input). */
.formulario { display: grid; gap: var(--space-4); }
.formulario-ayuda { color: var(--text-secondary); font-size: var(--text-sm); }
.formulario-fila { display: grid; gap: var(--space-4); }
@media (min-width: 640px) {
    .formulario-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.formulario .input { width: 100%; }
.input-area { height: auto; min-height: calc(var(--space-9) + var(--space-7)); padding-block: var(--space-2); line-height: var(--leading-normal); resize: vertical; }
.field-error[hidden] { display: none; }
.formulario-acciones .btn { min-width: calc(var(--space-9) + var(--space-8)); }
.formulario-acciones .btn[disabled] { opacity: 0.6; cursor: progress; }
@media (max-width: 639.98px) {
    .formulario-acciones .btn { width: 100%; }
}
/* Campo trampa para robots: fuera de la vista y del foco. */
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Resultado del envío: fondo tintado según el estado (patrón del sistema). */
.formulario-estado {
    padding: var(--space-3) var(--space-4);
    border: var(--border-1) solid var(--color-success-200);
    border-radius: var(--radius-sm);
    background: var(--color-success-50);
    color: var(--color-success-800);
    font-size: var(--text-sm);
}
.formulario-estado.es-error {
    border-color: var(--color-danger-200);
    background: var(--color-danger-50);
    color: var(--color-danger-800);
}
.formulario-estado strong { display: block; font-weight: var(--weight-medium); }
/* Redes con el ícono de contorno del set del Design System, en el color del
   enlace: turquesa claro sobre azul noche en el pie, turquesa en Contacto. */
.lista-redes a { gap: var(--space-2); }
.lista-redes .icono { flex: none; }

/* ---------- Avisos (Toast del sistema) ---------- */

.avisos {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    pointer-events: none;
}
.avisos .toast {
    max-width: 360px;
    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 { opacity: 0; transform: translateY(var(--space-2)); }
    to { opacity: 1; transform: none; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .en-proceso-barra::after { animation: none; width: 100%; }
    .card-interactiva:hover, .programa:hover, .alianza:hover { transform: none; }
    .frase { transform: none; }
}