/* ==========================================================================
   ADELANTE — Design System
   "Premium Statecraft": institutional authority, precision, high-end restraint.
   Palette: Navy #010E28 · White #FFFFFF · Red #930000 · Gray #777779
   Type: Bebas Neue (display) + Comfortaa (ui/body)
   ========================================================================== */

@font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeue Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeue Book.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeue Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Comfortaa'; src: url('../fonts/Comfortaa-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Comfortaa'; src: url('../fonts/Comfortaa-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Comfortaa'; src: url('../fonts/Comfortaa-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Brand */
  --navy: #010E28;
  --navy-end: #051A44;
  --white: #FFFFFF;
  --red: #930000;
  --red-bright: #B91C1C;
  --color-acento: #C8A24A;
  --violeta: #8458E6;
  --violeta-suave: #C9B8FF;
  --violeta-deep: #5B3FA8;
  --bg-grad-azul: linear-gradient(120deg, #080C1F 0%, #001235 52%, #05081A 100%);
  --bg-grad-rojo: linear-gradient(90deg, #570001, #961A1A 50%, #730000);
  --gray: #777779;

  /* Surfaces */
  --surface: #FBF8FB;
  --surface-alt: #F8FAFC;
  --surface-container: #F0F1F4;
  --surface-lowest: #FFFFFF;
  --border: rgba(1, 14, 40, 0.12);
  --border-strong: rgba(1, 14, 40, 0.22);
  --border-on-navy: rgba(255, 255, 255, 0.14);

  /* Text */
  --text-main: #010E28;
  --text-muted: #5B6272;
  --text-on-navy: #FFFFFF;
  --text-on-navy-muted: rgba(255, 255, 255, 0.68);

  /* Type */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-ui: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing (8px rhythm) */
  --unit: 8px;
  --gutter: 24px;
  --margin-mobile: 20px;
  --margin-desktop: 64px;
  --section-sm: 64px;
  --section-lg: 96px;
  --section-xl: 160px;
  --container-max: 1280px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* El drawer mobile cerrado vive fuera del viewport por su transform. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--surface);
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
main { flex: 1 0 auto; }
::selection { background: var(--red); color: var(--white); }

/* Visible focus ring everywhere (accessibility) */
:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--red);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--margin-desktop); }
}

.section { padding-block: var(--section-sm); }
.section-lg { padding-block: var(--section-lg); }
@media (min-width: 768px) {
  .section { padding-block: var(--section-lg); }
  .section-lg { padding-block: var(--section-xl); }
}

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-12 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-12 { grid-template-columns: repeat(12, 1fr); }
}
.col-span-4 { grid-column: span 1; }
.col-span-6 { grid-column: span 1; }
.col-span-8 { grid-column: span 1; }
@media (min-width: 768px) {
  .col-span-4 { grid-column: span 4; }
  .col-span-6 { grid-column: span 6; }
  .col-span-8 { grid-column: span 8; }
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
}
.eyebrow--on-navy { color: #E8A9A0; }

.display-xl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .display-xl { font-size: 76px; }
}

.headline-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .headline-lg { font-size: 48px; }
}

.headline-sm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.body-lg {
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
}
.body-md {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}
.label-caps {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.label-small {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.text-muted { color: var(--text-muted); }
.text-on-navy { color: var(--text-on-navy); }
.text-on-navy-muted { color: var(--text-on-navy-muted); }
.serif-italic { font-family: var(--font-display); font-style: normal; font-weight: 400; letter-spacing: 0.02em; }

/* ---------- Decorative line ---------- */
.decorative-line {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--red) 0%, var(--navy) 100%);
  border: none;
}
.rule {
  height: 1px;
  background: var(--border);
  border: none;
  width: 100%;
}
.bg-grad-azul { background-color: #05081A; background-image: var(--bg-grad-azul); }
.bg-grad-rojo { background-color: #570001; background-image: var(--bg-grad-rojo); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
  min-height: 44px;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-end); border-color: var(--navy-end); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--white); }
.btn-on-navy { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-on-navy:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
.btn-accent { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-accent:hover { background: #7A0000; border-color: #7A0000; }

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--navy);
  position: sticky;
  transition: transform var(--dur-slow) var(--ease);
  will-change: transform;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-on-navy);
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  gap: var(--gutter);
}
.site-header__logo { display: block; height: 34px; }
.site-header__logo img { height: 100%; width: auto; filter: brightness(0) invert(1) !important; transition: filter var(--dur-base) var(--ease); }

.site-nav { display: none; min-width: 0; }
.site-nav ul { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; }
.site-nav a {
  color: var(--text-on-navy-muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  overflow-wrap: normal;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a[aria-current="page"] { border-color: var(--red); }
.nav-dropdown { position: relative; }
.nav-dropdown__toggle {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 0 6px;
  color: var(--text-on-navy-muted); font: 600 12px var(--font-ui);
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.nav-dropdown__toggle span { font-size: 15px; line-height: 0; transition: transform var(--dur-base) var(--ease); }
.nav-dropdown.is-open > .nav-dropdown__toggle { color: var(--white); border-color: var(--red); }
.nav-dropdown.is-open > .nav-dropdown__toggle span { transform: rotate(180deg); }
.site-nav .nav-submenu {
  position: absolute; top: calc(100% + 12px); left: -16px; min-width: 178px;
  display: none; padding: 9px; background: var(--navy); border: 1px solid var(--border-on-navy);
  box-shadow: 0 16px 34px rgba(0,0,0,.3);
}
.site-nav .nav-dropdown.is-open > .nav-submenu { display: block; }
.nav-submenu a { display: block; padding: 10px 11px; border: 0; font-size: 11px; }
.nav-submenu a:hover, .nav-submenu a[aria-current="page"] { background: rgba(255,255,255,.09); border: 0; }

.header-cta { display: none; }
.header-cta .sumate-btn { height: 44px; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--white);
  margin-left: auto;
}
.nav-toggle svg { width: 24px; height: 24px; }

/* Con La Mesa incluida hay ocho destinos. Antes de este ancho el menú
   compacto es más legible que comprimir o partir las palabras. */
@media (min-width: 1360px) {
  .site-nav { display: block; }
  .header-cta { display: block; }
  .nav-toggle { display: none; }
}

@media (min-width: 1360px) and (max-width: 1519px) {
  .site-header__inner { gap: 16px; }
  .site-nav ul { gap: 14px; }
  .site-nav a { font-size: 10px; letter-spacing: 0.1em; }
  .nav-dropdown__toggle { font-size: 10px; letter-spacing: 0.1em; }
  .sumate-btn__icon { padding-inline: 11px; }
  .sumate-btn__label { padding-inline: 15px; font-size: 11px; }
}

/* Desktop scroll-down state: a compact, high-contrast institutional bar. */
@media (min-width: 1360px) {
  .site-header { transition: transform var(--dur-slow) var(--ease), background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
  .site-header__inner { padding-block: 20px; transition: padding var(--dur-base) var(--ease); }
  .site-header__logo { height: 38px; transition: height var(--dur-base) var(--ease); }
  .header-cta .sumate-btn, .sumate-btn__icon, .sumate-btn__label { transition: height var(--dur-base) var(--ease), min-height var(--dur-base) var(--ease), padding var(--dur-base) var(--ease), font-size var(--dur-base) var(--ease), flex-basis var(--dur-base) var(--ease); }

  .site-header.is-compact { background: var(--white); border-color: rgba(1,14,40,.12); box-shadow: 0 8px 24px rgba(1,14,40,.14); }
  .site-header.is-compact .site-header__inner { padding-block: 6px; }
  .site-header.is-compact .site-header__logo { height: 25px; }
  .site-header.is-compact .site-header__logo img { filter: none !important; }
  .site-header.is-compact .site-nav a,
  .site-header.is-compact .nav-dropdown__toggle { color: var(--navy); }
  .site-header.is-compact .site-nav a:hover,
  .site-header.is-compact .site-nav a[aria-current="page"],
  .site-header.is-compact .nav-dropdown.is-open > .nav-dropdown__toggle { color: var(--navy); border-color: var(--red); }
  .site-header.is-compact .site-nav .nav-submenu { background: var(--white); border-color: rgba(1,14,40,.14); box-shadow: 0 14px 28px rgba(1,14,40,.16); }
  .site-header.is-compact .nav-submenu a:hover,
  .site-header.is-compact .nav-submenu a[aria-current="page"] { background: rgba(1,14,40,.07); }
  .site-header.is-compact .header-cta .sumate-btn { height: 32px; }
  .site-header.is-compact .sumate-btn__icon { flex-basis: 34px; width: 34px; }
  .site-header.is-compact .sumate-btn__icon svg { width: 16px; height: 16px; flex-basis: 16px; }
  .site-header.is-compact .sumate-btn__label { padding-inline: 16px; font-size: 10px; }
}

.sumate-btn {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  transition: opacity var(--dur-base) var(--ease);
}
.sumate-btn:hover { opacity: 0.9; }
.sumate-btn__icon {
  background: var(--white);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  padding: 0;
  line-height: 1;
}
.sumate-btn__icon svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; }
.sumate-btn__label {
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  padding-inline: 22px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Mobile drawer: manifiesto y navegación de campaña. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 18px clamp(18px, 5vw, 54px) 28px;
  background-color: var(--navy);
  background-image: linear-gradient(135deg, rgba(1, 14, 40, 0.97) 0%, rgba(1, 14, 40, 0.89) 62%, rgba(4, 32, 77, 0.92) 100%), url("/assets/photos/mesa-iglesia.jpg");
  background-size: cover;
  background-position: center;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
.mobile-nav::after { content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 3px; background: linear-gradient(90deg, transparent, var(--red), transparent); transform: rotate(5deg); opacity: 0.9; pointer-events: none; }
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.mobile-nav__top img { height: 39px !important; width: auto; }
.mobile-nav__close { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: var(--white); border: 1px solid rgba(255,255,255,0.86); border-radius: 50%; transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.mobile-nav__close:hover { border-color: var(--red); transform: rotate(90deg); }
.mobile-nav__close svg { width: 24px; height: 24px; }
.mobile-nav__hero { position: relative; z-index: 1; padding: clamp(42px, 9vh, 76px) 0 28px; }
.mobile-nav__hero p { margin: 0; color: var(--white); font-family: var(--font-display); font-size: clamp(44px, 10.2vw, 71px); font-weight: 500; line-height: 0.93; letter-spacing: 0.025em; text-transform: uppercase; }
.mobile-nav__hero b { color: var(--red); font-weight: inherit; }
.mobile-nav__hero > span { display: block; width: 84px; height: 4px; margin: 28px 0 22px; background: var(--red); }
.mobile-nav__hero small { color: rgba(255,255,255,0.77); font-family: var(--font-ui); font-size: 14px; line-height: 1.55; }
.mobile-nav > ul { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.mobile-nav > ul > li { border-top: 1px solid rgba(255,255,255,0.16); }
.mobile-nav > ul > li:last-child { border-bottom: 1px solid rgba(255,255,255,0.16); }
.mobile-nav > ul > li > a,
.mobile-nav__toggle { width: 100%; min-height: 78px; display: flex; align-items: center; gap: 17px; padding: 13px 0; color: var(--white); text-align: left; }
.mobile-nav > ul > li > a { text-decoration: none; }
.mobile-nav__label { flex: 1; font-family: var(--font-display); font-size: clamp(25px, 6.1vw, 34px); font-weight: 500; letter-spacing: 0.065em; line-height: 1; text-transform: uppercase; }
.mobile-nav__icon { width: 52px; height: 52px; flex: 0 0 52px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.11); border-radius: 50%; background: rgba(38, 70, 130, 0.38); color: var(--white); font-family: Arial, sans-serif; font-size: 30px; line-height: 1; box-shadow: inset 0 1px 10px rgba(255,255,255,0.04); }
.mobile-nav__arrow { color: rgba(255,255,255,0.74); font-family: Arial, sans-serif; font-size: 42px; font-weight: 200; line-height: 1; transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.mobile-nav__toggle { border: 0; background: transparent; cursor: pointer; }
.mobile-nav__group.is-open > .mobile-nav__toggle .mobile-nav__arrow { color: var(--red); transform: rotate(90deg); }
.mobile-nav__group > ul { display: none; gap: 0; margin: -2px 0 12px 68px; padding: 0; border-left: 1px solid rgba(255,255,255,0.18); }
.mobile-nav__group.is-open > ul { display: flex; }
.mobile-nav__group > ul > li > a { min-height: 43px; display: flex; align-items: center; gap: 8px; padding: 9px 0 9px 14px; color: rgba(255,255,255,0.84); text-decoration: none; }
.mobile-nav__group > ul .mobile-nav__icon { width: 14px; height: 14px; flex-basis: 14px; border: 0; background: transparent; color: var(--red); font-size: 21px; }
.mobile-nav__group > ul .mobile-nav__label { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.mobile-nav__group > ul .mobile-nav__arrow { display: none; }
.mobile-nav a[aria-current="page"] .mobile-nav__label { color: var(--red); }
.mobile-nav__cta { position: relative; z-index: 1; margin-top: 28px; }
.mobile-nav__cta .btn { min-height: 64px; width: 100%; justify-content: center; border-radius: 13px; background: linear-gradient(115deg, #9d0000, #d80b1f); color: var(--white); font-family: var(--font-display); font-size: 27px; font-weight: 500; letter-spacing: 0.13em; box-shadow: 0 12px 26px rgba(0,0,0,0.28); }
@media (max-width: 420px) { .mobile-nav__hero { padding-top: 38px; } .mobile-nav__hero p { font-size: 44px; } .mobile-nav > ul > li > a, .mobile-nav__toggle { min-height: 69px; } .mobile-nav__icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 26px; } .mobile-nav__label { font-size: 25px; } }
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(1,14,40,0.98) 0%, rgba(5,26,68,0.92) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 48px;
  padding-block: 56px 0;
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; padding-block: 72px 0; align-items: stretch; }
}
.hero__content { padding-bottom: 56px; }
@media (min-width: 1024px) { .hero__content { padding-bottom: 96px; align-self: center; } }
.hero__ghost-word {
  position: absolute;
  right: -0.05em;
  top: -0.08em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 220px;
  line-height: 1;
  color: rgba(255,255,255,0.035);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  letter-spacing: -0.02em;
}
.hero__title { color: var(--white); margin-block: 20px 24px; }
.hero__lede { max-width: 46ch; margin-bottom: 40px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__portrait {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero__portrait img {
  max-height: 640px;
  width: auto;
  object-fit: cover;
  object-position: top center;
  position: relative;
  z-index: 2;
  filter: grayscale(0.15) contrast(1.05);
}
.hero__portrait-frame {
  position: absolute;
  bottom: 0;
  right: 8%;
  width: 82%;
  height: 88%;
  border: 1px solid rgba(255,255,255,0.18);
  z-index: 1;
}

/* ---------- Hero — full-bleed photo variant ---------- */
.hero--photo {
  min-height: clamp(420px, 68vh, 780px);
  display: flex;
  align-items: flex-end;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 12%;
  z-index: 0;
}
/* Static image is the default (and mobile/reduced-motion) background;
   JS only reveals the video once it's confirmed playable, so nothing
   ever shows blank while the file is deciding what to load. */
.hero__bg--video { display: none; }
.hero--video-active .hero__bg--video { display: block; }
.hero--video-active .hero__bg--fallback { display: none; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(1,14,40,0.94) 0%, rgba(1,14,40,0.55) 32%, rgba(1,14,40,0.08) 58%, rgba(1,14,40,0.26) 100%);
}
.hero__photo-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 48px 64px;
}
@media (min-width: 768px) {
  .hero__photo-inner { padding-block: 48px 96px; }
}
.hero--photo .hero__title { margin-block: 0; max-width: 16ch; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface-lowest);
  border: 1px solid var(--border);
  padding: 40px;
  position: relative;
}
.card--accent-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--red);
}
.card--navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 28px;
  color: var(--red);
}
.card--navy .card-icon { color: #E8A9A0; }
.card-icon svg { width: 100%; height: 100%; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-weight: 700;
}
.card-link svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease); }
.card:hover .card-link svg { transform: translateX(4px); }

/* ---------- Stats ---------- */
.stat { border-top: 2px solid var(--red); padding-top: 20px; }
.stat__value { font-family: var(--font-display); font-size: 44px; font-weight: 600; color: var(--navy); line-height: 1; }
.stat__label { margin-top: 10px; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 32px; border-left: 1px solid var(--border-strong); }
.timeline-item { position: relative; padding-bottom: 48px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: var(--red);
}
.timeline-item__year { margin-bottom: 8px; color: var(--red); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.field label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-main); }
.field input,
.field textarea,
.field select {
  border: 1px solid var(--border-strong);
  background: var(--white);
  padding: 14px 16px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text-main);
  min-height: 44px;
  transition: border-color var(--dur-base) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--navy); }
.field-hint { font-size: 13px; color: var(--text-muted); }
.field-required { color: var(--red); }

/* ---------- Footer ---------- */
.site-footer {
  background-color: #05081A;
  background-image: var(--bg-grad-azul);
  border-top: 2px solid rgba(255,255,255,0.12);
  color: var(--text-on-navy-muted);
  margin-top: auto;
}
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-logo { height: 30px; margin-bottom: 16px; }
.footer-logo img { height: 100%; width: auto; filter: brightness(0) invert(1); }
.footer-col-title { color: var(--white); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 40px;
  margin-top: 56px;
  border-top: 1px solid var(--border-on-navy);
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; } }
.social-links { display: flex; gap: 12px; }
.social-links a {
  width: 40px; height: 40px;
  border: 1px solid var(--border-on-navy);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.social-links a:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }
.social-links svg { width: 18px; height: 18px; }

/* Footer global — composición institucional de alto contraste. */
.site-footer--refined { margin-top:auto; padding:52px clamp(16px,2.7vw,54px) 38px; border:0; background:#f7f8fb; color:#d9dfeb; }
.footer-shell { position:relative; isolation:isolate; max-width:1940px; margin:auto; overflow:hidden; border:1px solid rgba(220,228,255,.2); border-radius:38px; background:radial-gradient(circle at 76% 23%,rgba(65,77,141,.24),transparent 27%),linear-gradient(120deg,#111936 0%,#050a20 55%,#101734 100%); box-shadow:0 22px 30px rgba(1,14,40,.2); }
.footer-shell::after { content:""; position:absolute; z-index:-1; right:28px; bottom:72px; width:280px; height:280px; background:url("../logo/forma linear.svg") center/contain no-repeat; opacity:.42; filter:drop-shadow(0 0 12px rgba(226,22,45,.7)); }
.footer-main { display:grid; grid-template-columns:1.45fr .9fr .9fr 1.65fr; gap:clamp(28px,4.6vw,90px); padding:clamp(40px,4vw,58px) clamp(28px,3.7vw,70px) 30px; }
.footer-brand { padding-right:clamp(28px,3.8vw,72px); border-right:1px solid rgba(217,223,235,.19); }.footer-brand img { display:block; width:min(100%,330px); height:73px; object-fit:contain; object-position:left center; filter:brightness(0) invert(1); }.footer-brand p { max-width:370px; margin:22px 0 27px; color:#b9c2d5; font:500 18px/1.55 var(--font-body); }
.footer-social { display:flex; flex-wrap:wrap; gap:18px; }.footer-social a { display:grid; width:65px; height:65px; place-items:center; border:1px solid rgba(217,223,235,.18); border-radius:50%; color:#f31c3a; background:rgba(20,31,67,.52); box-shadow:inset 0 0 0 1px rgba(255,255,255,.025); font:700 29px/1 Arial,sans-serif; transition:transform var(--dur-base) var(--ease),background var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease); }.footer-social a:hover { color:#fff; background:#c70b20; transform:translateY(-4px); box-shadow:0 11px 22px rgba(199,11,32,.27); }.footer-social svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; }.footer-social svg path:last-child { fill:currentColor; stroke:none; }
.footer-social .social-icon--facebook{color:#fff;background:#1877f2}.footer-social .social-icon--facebook svg{fill:currentColor;stroke:none}.footer-social .social-icon--youtube{color:#fff;background:#ff0000}.footer-social .social-icon--youtube svg{stroke:none}.footer-social .social-icon--youtube svg rect{fill:currentColor}.footer-social .social-icon--youtube svg path{fill:#fff;stroke:none}.footer-social .social-icon--whatsapp{color:#fff;background:#25d366}.footer-social .social-icon--whatsapp svg{fill:none;stroke:currentColor;stroke-width:1.8}.footer-social .social-icon--whatsapp svg path:last-child{fill:currentColor;stroke:none}.footer-social .social-icon:hover{filter:brightness(1.1);background:inherit}
.footer-social .social-icon--tiktok{color:#fff;background:#111}.footer-social .social-icon--tiktok svg{fill:currentColor;stroke:none}
.footer-social .social-icon--instagram{color:#fff;background:linear-gradient(135deg,#f9ce34 0%,#ee2a7b 48%,#6228d7 100%)}.footer-social .social-icon--instagram svg{fill:none;stroke:currentColor;stroke-width:1.8}
.footer-column { position:relative; z-index:1; min-width:0; }.footer-column h2 { margin:0 0 28px; color:#fb1640; font:700 21px/1 var(--font-body); letter-spacing:.05em; text-transform:uppercase; }.footer-column h2::after { content:""; display:block; width:38px; height:3px; margin-top:20px; background:#f21738; }.footer-column ul { display:grid; gap:19px; margin:0; padding:0; list-style:none; }.footer-column a { display:flex; align-items:flex-start; gap:13px; color:#d9dfeb; font:500 19px/1.38 var(--font-body); text-decoration:none; transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease); }.footer-column:not(.footer-contact) a::after { content:"›"; margin-left:auto; color:#f21d3e; font-size:30px; line-height:.7; }.footer-column a:hover { color:#fff; transform:translateX(3px); }
.footer-contact { font-style:normal; padding-right:165px; }.footer-contact li { padding-bottom:17px; border-bottom:1px solid rgba(217,223,235,.14); }.footer-contact li:last-child { border-bottom:0; }.footer-contact a > span { display:grid; flex:0 0 37px; width:37px; height:37px; place-items:center; border:1px solid rgba(242,29,62,.62); border-radius:50%; color:#f51c3d; font-size:19px; }
.footer-legal { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:88px; padding:20px clamp(28px,3.7vw,70px); border-top:1px solid rgba(217,223,235,.16); color:#aeb9cf; font:500 16px/1.4 var(--font-body); }.footer-legal p { margin:0; }.footer-legal p span { margin-right:13px; color:#f21d3e; font-size:27px; vertical-align:-3px; }.footer-legal nav { display:flex; flex-wrap:wrap; gap:0; }.footer-legal nav a { padding:0 24px; color:#b8c1d3; text-decoration:none; }.footer-legal nav a + a { border-left:2px solid rgba(242,29,62,.68); }.footer-legal nav a:hover { color:#fff; }
@media (max-width:1100px) { .footer-main { grid-template-columns:1.3fr 1fr 1fr; }.footer-brand { grid-row:1 / span 2; }.footer-contact { grid-column:2 / -1; padding-right:0; }.footer-shell::after { opacity:.25; } }
@media (max-width:720px) { .site-footer--refined { padding:24px 12px; }.footer-shell { border-radius:25px; }.footer-main { grid-template-columns:1fr; gap:32px; padding:35px 25px 28px; }.footer-brand { padding:0 0 27px; border-right:0; border-bottom:1px solid rgba(217,223,235,.17); }.footer-brand img { width:235px; height:52px; }.footer-brand p { margin:16px 0 22px; font-size:15px; }.footer-social a { width:48px; height:48px; font-size:22px; }.footer-social svg { width:22px; height:22px; }.footer-column h2 { margin-bottom:18px; font-size:17px; }.footer-column h2::after { margin-top:13px; }.footer-column ul { gap:13px; }.footer-column a { font-size:16px; }.footer-contact { grid-column:auto; padding:0; }.footer-contact li { padding-bottom:13px; }.footer-legal { display:block; padding:20px 25px; font-size:12px; }.footer-legal nav { margin-top:14px; }.footer-legal nav a { padding:0 12px; }.footer-legal nav a:first-child { padding-left:0; }.footer-shell::after { right:-58px; bottom:55px; width:230px; height:230px; } }
.site-footer--refined { padding:34px 18px 14px; }.footer-shell { width:100%; max-width:none; }.footer-shell::after { right:24px; bottom:48px; width:310px; height:310px; background-image:url("../logo/forma-Linear-2280.png"); opacity:.72; filter:brightness(0) saturate(100%) invert(17%) sepia(92%) saturate(5132%) hue-rotate(346deg) brightness(95%) contrast(112%) drop-shadow(0 0 12px rgba(255,36,61,.85)); }
.site-footer--refined { padding:0; }.footer-shell { border:0; border-radius:0; box-shadow:none; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-end) 100%);
  padding-block: 72px 88px;
  position: relative;
}
.page-hero .body-lg { max-width: 62ch; }

/* ---------- Scroll hint (animated mouse icon) ---------- */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease);
  pointer-events: none;
}
.scroll-hint.is-hidden { opacity: 0; }
.scroll-hint__mouse {
  display: block;
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  position: relative;
}
.scroll-hint__wheel {
  position: absolute;
  top: 6px;
  left: 11px;
  width: 3px;
  height: 8px;
  background: var(--white);
  border-radius: 2px;
  animation: scroll-hint-wheel 1.6s ease-in-out infinite;
}
.scroll-hint__label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
@keyframes scroll-hint-wheel {
  0% { opacity: 1; transform: translateY(0); }
  60% { opacity: 0.2; transform: translateY(14px); }
  61%, 62% { opacity: 0; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint__wheel { animation: none; }
}

/* Sticky header offset so anchor-link targets aren't hidden underneath it */
[id] { scroll-margin-top: 100px; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--navy);
  padding: 12px 20px;
  z-index: 1000;
  font-family: var(--font-ui);
  font-weight: 700;
}
.skip-link:focus { left: var(--margin-mobile); top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Utilities ---------- */
.center { text-align: center; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 40px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 40px; }
.max-w-prose { max-width: 68ch; }
.badge {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.badge--red { background: var(--red); }

/* ---------- Propuestas Explorer ---------- */

/* Photo variant of the interior page-hero (used on Propuestas) */
.page-hero--photo {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 58vh, 620px);
  display: flex;
  align-items: flex-end;
  background: var(--navy);
}
.page-hero--photo .hero__bg {
  position: absolute;
  left: 0; right: 0;
  top: -15%; height: 130%;
  width: 100%; object-fit: cover;
  z-index: 0;
  will-change: transform;
}
.page-hero--photo .hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Full, even navy wash over the whole photo (not just a bottom fade). */
  background: rgba(1, 14, 40, 0.78);
}
.page-hero--photo .container { position: relative; z-index: 2; padding-block: 56px 64px; width: 100%; }
.page-hero--photo .display-xl .accent { color: var(--red); font-style: normal; }

/* Hero de Propuestas: el río como territorio, el plan como primer plano. */
.propuestas-hero { min-height: clamp(610px, 62vh, 700px); align-items: stretch; }
.propuestas-hero .hero__bg { top: -12%; height: 128%; }
.propuestas-hero .hero__scrim { background: linear-gradient(90deg, rgba(1,14,40,.98) 0%, rgba(1,14,40,.93) 35%, rgba(1,14,40,.58) 56%, rgba(1,14,40,.15) 100%); }
.propuestas-hero__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 70px 42px !important; }
.propuestas-hero__eyebrow { display: flex; align-items: center; gap: 13px; color: #ef3138; font: 700 15px var(--font-display); letter-spacing: .13em; text-transform: uppercase; }
.propuestas-hero__eyebrow::after { content: ""; width: 46px; height: 2px; background: var(--red); }
.propuestas-hero h1 { max-width: 850px; margin: 25px 0 0; color: var(--white); font: 500 clamp(68px,6.35vw,112px)/.87 var(--font-display); letter-spacing: .018em; text-transform: uppercase; }
.propuestas-hero h1 em { color: #c60008; font-style: normal; font-weight: 700; }.propuestas-hero h1 span { display: block; font-weight: 400; text-transform: none; }
.propuestas-hero__content > p { max-width: 660px; margin-top: 28px; color: rgba(255,255,255,.87); font: 17px/1.65 var(--font-ui); }.propuestas-hero__content > p b { color: var(--white); }
.propuestas-hero__pillars { display: flex; gap: 18px; margin-top: 22px; }
.propuestas-hero__pillars article { width: min(380px, calc(50vw - 82px)); min-height: 112px; display: flex; align-items: center; gap: 16px; padding: 17px 20px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(1,14,40,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(3px); }
.propuestas-hero__pillar-icon { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#df3138,#a90008); color: #fff; font: 31px/1 Arial,sans-serif; }.propuestas-hero__pillar-icon--leaf { background: rgba(5,31,71,.94); border: 1px solid rgba(255,255,255,.17); }
.propuestas-hero__pillars b { display: block; color: var(--white); font: 700 13px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }.propuestas-hero__pillars i { display: block; width: 30px; height: 2px; margin: 8px 0; background: var(--red); }.propuestas-hero__pillars p { color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.45; }
.propuestas-hero__explore { display: inline-flex; align-items: center; gap: 14px; margin-top: 29px; color: rgba(255,255,255,.75); font: 700 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }.propuestas-hero__explore span { position: relative; width: 24px; height: 38px; border: 1px solid rgba(255,255,255,.48); border-radius: 99px; }.propuestas-hero__explore span::after { content: ""; position: absolute; left: 9px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--red); animation: propuestas-scroll 1.7s infinite var(--ease); }
@keyframes propuestas-scroll { 0%,100% { transform: translateY(0); opacity: 1; } 65% { transform: translateY(15px); opacity: .2; } }
@media (max-width: 760px) { .propuestas-hero { min-height: 710px; }.propuestas-hero .hero__bg { left: -35%; width: 170%; max-width: none; }.propuestas-hero .hero__scrim { background: linear-gradient(180deg,rgba(1,14,40,.87),rgba(1,14,40,.96)); }.propuestas-hero__content { justify-content: flex-end; padding-block: 105px 38px !important; }.propuestas-hero h1 { margin-top: 18px; font-size: clamp(52px,15vw,75px); }.propuestas-hero__content > p { margin-top: 20px; font-size: 14px; }.propuestas-hero__pillars { width: 100%; gap: 9px; }.propuestas-hero__pillars article { width: 50%; min-height: 129px; gap: 9px; padding: 12px; }.propuestas-hero__pillar-icon { width: 38px; height: 38px; flex-basis: 38px; font-size: 23px; }.propuestas-hero__pillars b { font-size: 10px; }.propuestas-hero__pillars p { font-size: 10px; }.propuestas-hero__explore { margin-top: 22px; font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .propuestas-hero__explore span::after { animation: none; } }

.explorer-toolbar {
  background: var(--surface-lowest);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  box-shadow: 0 20px 44px rgba(1, 14, 40, 0.08);
  padding: 20px 28px;
  margin-bottom: 32px;
  /* Sticks right below the site header. --header-offset is kept in sync
     with the header's real height (and drops to 0 while the header is
     hidden on scroll-down) by assets/js/main.js, so the toolbar never
     overlaps it and never leaves a gap when the header slides away. */
  position: sticky;
  top: var(--header-offset, 0px);
  z-index: 60;
  transition: top var(--dur-base) var(--ease);
}
.explorer-toolbar__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.explorer-toolbar__title {
  display: block;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-main);
}
.explorer-toolbar__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  background: var(--white);
  padding: 9px 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
}
.explorer-toolbar__toggle svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease); }
.explorer-toolbar__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.explorer-toolbar__panel[hidden] { display: none; }
.explorer-toolbar__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 20px;
  margin-bottom: 24px;
}
@media (min-width: 900px) {
  .explorer-toolbar__grid { grid-template-columns: repeat(4, 1fr); }
}
.explorer-toolbar__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Mobile: the toolbar can get tall once its fields stack in one column, so
   only the compact title+toggle bar stays sticky/visible by default — the
   full field grid + actions collapse behind the "Filtros" toggle instead of
   permanently eating a big chunk of a small screen while scrolling. */
@media (max-width: 899px) {
  .explorer-toolbar { padding: 16px 20px; }
  .explorer-toolbar__toggle { display: inline-flex; }
}

.explorer-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.explorer-field label {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.explorer-field select,
.explorer-field input[type="search"] {
  border: 1px solid var(--border-strong);
  background: var(--white);
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-main);
  min-height: 44px;
  width: 100%;
}
.explorer-field select:focus,
.explorer-field input[type="search"]:focus { border-color: var(--navy); }

.explorer-search { position: relative; }
.explorer-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
.explorer-search input[type="search"] { padding-left: 40px; }

.explorer-clear-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--border-strong); background: var(--white); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.explorer-clear-btn:hover { border-color: var(--red); color: var(--red); }
.explorer-clear-btn svg { width: 16px; height: 16px; }

.explorer-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.explorer-meta__pilar { font-weight: 700; }
.propuestas-release-notice { margin:0 0 18px; padding:15px 19px; border-left:3px solid var(--red); background:linear-gradient(90deg,rgba(147,0,0,.08),rgba(1,14,40,.035)); color:var(--navy); font:600 14px/1.55 var(--font-ui); }

/* 1 column on mobile, 2 on tablet, 3 from ~1100px up. Grid rows stretch
   every card in the row to equal height by default, which is what lets the
   toggle buttons line up along the bottom even when descriptions differ. */
.proposal-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px) {
  .proposal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .proposal-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.proposal-card {
  min-width: 0;
  background: var(--surface-lowest);
  border: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.proposal-card:hover { box-shadow: 0 18px 40px rgba(1, 14, 40, 0.1); transform: translateY(-2px); }
.proposal-card--a:hover { border-color: rgba(1, 14, 40, 0.32); }
.proposal-card--b:hover { border-color: rgba(147, 0, 0, 0.32); }

.proposal-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.proposal-card__icon {
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; color: var(--white);
}
.proposal-card__icon svg { width: 18px; height: 18px; }
.proposal-card--a .proposal-card__icon { background: var(--navy); }
.proposal-card--b .proposal-card__icon { background: var(--red); }

.proposal-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proposal-card__number { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; }
.proposal-card--a .proposal-card__number { color: var(--navy); }
.proposal-card--b .proposal-card__number { color: var(--red); }
.proposal-card__category {
  color: var(--text-muted); font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.proposal-card__title {
  margin-bottom: 8px;
}
.proposal-card__desc {
  flex: 1;
}

.proposal-card__toggle {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: none; border-left: none; border-right: none; border-bottom: none;
  cursor: pointer;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy);
}
.proposal-card--b .proposal-card__toggle { color: var(--red); }
.proposal-card__toggle svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--dur-base) var(--ease); }
.proposal-card__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.proposal-card__howto { margin-top: 12px; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.pagination button {
  min-width: 44px; min-height: 44px; padding-inline: 8px;
  border: 1px solid var(--border-strong); background: var(--white);
  font-family: var(--font-ui); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.pagination button:hover:not(:disabled):not([aria-current="true"]) { border-color: var(--navy); }
.pagination button[aria-current="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.pagination button:disabled { opacity: 0.35; cursor: not-allowed; }
.pagination__ellipsis { color: var(--text-muted); padding-inline: 4px; }

.explorer-empty {
  text-align: center; padding: 72px 20px; color: var(--text-muted);
  border: 1px dashed var(--border-strong);
}

/* ==========================================================================
   ADE — Asistente virtual (widget flotante)
   ========================================================================== */
.ade-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500;
  width: 60px;
  height: 60px;
  background: var(--navy);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(1, 14, 40, 0.35);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.ade-launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(1, 14, 40, 0.4); }
.ade-launcher svg { width: 26px; height: 26px; }
.ade-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 94px;
  z-index: 500;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 12px 28px rgba(20, 130, 68, .32);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.ade-whatsapp:hover { background: #1ebe5b; transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 34px rgba(20, 130, 68, .42); }
.ade-whatsapp:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ade-whatsapp svg { width: 27px; height: 27px; }
.ade-launcher__icon-close { display: none; }
.ade-launcher[aria-expanded="true"] .ade-launcher__icon-chat { display: none; }
.ade-launcher[aria-expanded="true"] .ade-launcher__icon-close { display: block; }
.ade-launcher__badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 14px; height: 14px;
  background: var(--red);
  border: 2px solid var(--white);
}

.ade-panel {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 499;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: min(640px, calc(100vh - 140px));
  background: var(--surface-lowest);
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(1, 14, 40, 0.28);
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.ade-panel.is-open { display: flex; }
.ade-panel.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 480px) {
  .ade-panel {
    right: 10px; left: 10px; bottom: 10px;
    width: auto; max-width: none;
    height: min(640px, calc(100vh - 90px));
  }
}

.ade-panel__header {
  background: var(--navy);
  color: var(--white);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ade-panel__avatar {
  width: 34px; height: 34px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: 50% 32%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: var(--red);
}
.ade-panel__avatar svg { width: 18px; height: 18px; color: var(--white); }
.ade-panel__title { flex: 1; min-width: 0; }
.ade-panel__title strong { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 700; }
.ade-panel__title span { display: block; font-size: 11px; color: var(--text-on-navy-muted); }
.ade-panel__close {
  width: 32px; height: 32px;
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ade-panel__close svg { width: 18px; height: 18px; }

.ade-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface-alt);
}

.ade-msg { max-width: 88%; display: flex; flex-direction: column; gap: 4px; }
.ade-msg--user { align-self: flex-end; align-items: flex-end; }
.ade-msg--bot { align-self: flex-start; align-items: flex-start; }
.ade-msg__label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ade-msg__bubble {
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.ade-msg--user .ade-msg__bubble { background: var(--navy); color: var(--white); }
.ade-msg--bot .ade-msg__bubble { background: var(--white); color: var(--text-main); border: 1px solid var(--border); }
.ade-msg--bot.is-blocked .ade-msg__bubble { border-color: rgba(147, 0, 0, 0.35); }

.ade-msg__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ade-msg__actions a, .ade-msg__actions button {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 14px; border: 1px solid var(--navy); color: var(--navy); background: var(--white); cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.ade-msg__actions a:hover, .ade-msg__actions button:hover { background: var(--navy); color: var(--white); }

.ade-typing { display: flex; gap: 5px; padding: 14px 16px; align-self: flex-start; }
.ade-typing span { width: 6px; height: 6px; background: var(--gray); display: inline-block; animation: ade-typing-bounce 1.2s infinite ease-in-out; }
.ade-typing span:nth-child(2) { animation-delay: 0.15s; }
.ade-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ade-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ade-typing span { animation: none; opacity: 0.8; } }

.ade-panel__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 14px;
  background: var(--surface-lowest);
}
.ade-composer { display: flex; align-items: flex-end; gap: 10px; }
.ade-composer textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border-strong);
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  min-height: 44px;
  max-height: 100px;
}
.ade-composer textarea:focus { border-color: var(--navy); }
.ade-composer button {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--red); color: var(--white); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.ade-composer button:hover { background: #7a0000; }
.ade-composer button:disabled { opacity: 0.4; cursor: not-allowed; }
.ade-composer button svg { width: 18px; height: 18px; }

.ade-disclaimer { font-size: 10px; color: var(--text-muted); margin-top: 8px; text-align: center; }

/* TINO: ventana editorial de asistencia. Conserva las clases del widget para
   que el chat, acciones y formulario existentes sigan usando la misma lógica. */
.ade-panel { width: 420px; height: min(700px, calc(100vh - 100px)); border: 0; border-radius: 28px; background: #f6f8fc; box-shadow: 0 24px 64px rgba(1,14,40,.3); }
.ade-panel__header { position: relative; min-height: 202px; padding: 31px 32px 57px; gap: 18px; overflow: hidden; background: radial-gradient(circle at 74% 6%, #19366c 0, transparent 37%), linear-gradient(135deg, #071b43 0%, #010e28 70%); }
.ade-panel__header::before { content: ""; position: absolute; width: 280px; height: 280px; right: -84px; bottom: -156px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.025); }
.ade-panel__header::after { content: ""; position: absolute; z-index: 0; left: -8%; right: -8%; bottom: -47px; height: 100px; background: #f6f8fc; border-radius: 0 0 50% 50% / 0 0 100% 100%; transform: rotate(-2deg); }
.ade-panel__header > * { position: relative; z-index: 1; }
.ade-panel__avatar { width: 72px; height: 72px; flex-basis: 72px; object-position: 50% 28%; border: 2px solid rgba(255,255,255,.72); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.ade-panel__title { align-self: center; }
.ade-panel__title strong { display: flex; align-items: center; gap: 9px; font-size: 30px; letter-spacing: .055em; line-height: 1; }
.ade-panel__title strong i { width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 50%; background: #c91623; color: #fff; font: 700 14px/1 Arial,sans-serif; }
.ade-panel__title strong i span { display: block !important; margin: 0 !important; color: inherit !important; font: inherit !important; line-height: 1 !important; transform: none; }
.ade-panel__title span { margin-top: 10px; color: rgba(255,255,255,.78); font-family: var(--font-ui); font-size: 16px; line-height: 1.25; }
.ade-panel__title em { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 7px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: rgba(255,255,255,.85); font: 13px var(--font-ui); font-style: normal; }
.ade-panel__title em b { width: 10px; height: 10px; border-radius: 50%; background: #2eee34; box-shadow: 0 0 10px #2eee34; }
.ade-panel__close { position: absolute; z-index: 2; top: 27px; right: 28px; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #fff; transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.ade-panel__close:hover { border-color: var(--white); transform: rotate(90deg); }
.ade-panel__close svg { width: 27px; height: 27px; }
.ade-panel__body { gap: 18px; padding: 24px 30px 18px; background: radial-gradient(circle at 0 12%, #fff 0, #f5f8fc 42%, #eff3f9 100%); }
.ade-day-divider { align-self: center; padding: 5px 22px; border: 1px solid rgba(1,14,40,.08); border-radius: 999px; background: rgba(255,255,255,.76); box-shadow: 0 3px 8px rgba(1,14,40,.06); color: #818ba0; font: 700 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.ade-msg { max-width: 100%; }.ade-msg--intro { width: 100%; }
.ade-msg--intro .ade-msg__bubble { position: relative; overflow: hidden; padding: 27px 28px 25px; border: 1px solid rgba(1,14,40,.08); border-radius: 26px; background: rgba(255,255,255,.96); box-shadow: 0 13px 28px rgba(1,14,40,.08); color: var(--navy); }
.ade-msg--intro .ade-msg__bubble::after { content: ""; position: absolute; right: -68px; bottom: -94px; width: 230px; height: 230px; border: 25px solid rgba(6,32,78,.035); border-radius: 50%; pointer-events: none; }
.ade-msg--intro .ade-msg__label { display: block; color: #c51623; font-size: 15px; letter-spacing: .04em; }
.ade-msg__rule { display: block; width: 58px; height: 4px; margin: 13px 0 20px; border-radius: 99px; background: linear-gradient(90deg, #c51623 0 66%, #f3d8dc 66%); }
.ade-msg--intro p { position: relative; z-index: 1; margin: 0 0 15px; font-size: 18px; line-height: 1.48; }.ade-msg--intro p:last-child { margin-bottom: 0; }.ade-msg--intro b { color: #c51623; }.ade-msg--intro strong { font-weight: 700; }
.ade-msg--bot:not(.ade-msg--intro) .ade-msg__bubble { border-radius: 18px 18px 18px 4px; box-shadow: 0 5px 13px rgba(1,14,40,.06); }.ade-msg--user .ade-msg__bubble { border-radius: 18px 18px 4px 18px; }
.ade-quick-actions-wrap { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr) 28px; align-items: center; gap: 5px; width: 100%; }.ade-quick-actions { flex: 0 0 auto; display: flex; gap: 9px; width: 100%; overflow-x: auto; padding: 2px 1px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }.ade-quick-actions::-webkit-scrollbar { display: none; }
.ade-quick-actions__nav { width: 28px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(1,14,40,.13); border-radius: 50%; background: rgba(255,255,255,.92); color: var(--red); font: 28px/1 Arial,sans-serif; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }.ade-quick-actions__nav:hover:not(:disabled) { background: var(--red); color: #fff; }.ade-quick-actions__nav:disabled { opacity: .3; cursor: default; }
.ade-quick-action { min-width: 100%; flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; gap: 7px; padding: 10px 11px; border: 1px solid rgba(1,14,40,.08); border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: 0 7px 16px rgba(1,14,40,.07); color: var(--navy); text-align: left; font: 11px/1.28 var(--font-ui); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }.ade-quick-action:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(1,14,40,.12); }.ade-quick-action__icon { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border: 1px solid rgba(197,22,35,.3); border-radius: 50%; color: #c51623; font: 19px/1 Arial,sans-serif; }.ade-quick-action i { margin-left: auto; color: #a0a8b8; font: 28px/1 Arial,sans-serif; }
.ade-panel__footer { padding: 13px 24px 17px; border: 0; background: linear-gradient(145deg,#f7f9fc,#fff); }.ade-composer { gap: 10px; }.ade-composer textarea { min-height: 52px; padding: 13px 19px; border: 1px solid rgba(1,14,40,.09); border-radius: 999px; background: #fff; box-shadow: 0 7px 18px rgba(1,14,40,.08); font-size: 14px; }.ade-composer textarea:focus { border-color: rgba(197,22,35,.55); }.ade-composer button { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,#d82831,#a80009); box-shadow: 0 9px 19px rgba(147,0,0,.22); }.ade-composer button svg { width: 22px; height: 22px; }.ade-disclaimer { display: flex; align-items: center; gap: 9px; margin: 11px 5px 0; color: #7a879e; text-align: left; font-size: 9px; line-height: 1.4; }.ade-disclaimer span { font-size: 21px; color: #63779a; }
@media (max-width: 480px) { .ade-panel { height: min(700px, calc(100vh - 20px)); border-radius: 24px; }.ade-panel__header { min-height: 183px; padding: 26px 22px 48px; gap: 14px; }.ade-panel__avatar { width: 65px; height: 65px; flex-basis: 65px; }.ade-panel__title strong { font-size: 27px; }.ade-panel__title span { font-size: 13px; }.ade-panel__title em { margin-top: 10px; padding: 5px 9px; font-size: 11px; }.ade-panel__close { top: 16px; right: 16px; width: 42px; height: 42px; }.ade-panel__body { padding: 18px 18px 12px; }.ade-msg--intro .ade-msg__bubble { padding: 22px; }.ade-msg--intro p { font-size: 16px; }.ade-panel__footer { padding: 12px 18px 18px; }.ade-quick-actions-wrap { display: block; }.ade-quick-actions__nav { display: none; }.ade-quick-action { min-width: 137px; flex-basis: 137px; }.ade-composer textarea { min-height: 52px; padding: 13px 17px; }.ade-composer button { width: 52px; height: 52px; } }

/* Entrada escalonada de los textos de todos los heroes. */
.hero-text-enter { animation: hero-text-enter .72s both cubic-bezier(.2,.72,.2,1); animation-delay: var(--hero-enter-delay, 0ms); }
@keyframes hero-text-enter { from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(3px); } to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .hero-text-enter { animation: none; } }

/* Propuesta mini-form (rendered inside the panel body when intent=propuesta) */
.ade-form { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
.ade-form .field { margin-bottom: 0; }
.ade-form label { font-size: 11px; }
.ade-form-status {
  padding: 10px 14px; font-size: 13px; border: 1px solid var(--border); background: var(--white); display: none;
}
.ade-form-status.is-visible { display: block; }
.ade-form-status.is-error { border-color: rgba(147, 0, 0, 0.4); color: var(--red); }
.ade-form-status.is-success { border-color: rgba(1, 14, 40, 0.3); color: var(--navy); }