/* =========================================================
   VARIABLES GLOBALES
========================================================= */
:root {
  /* Colores */
  --color-bg-dark: #0f1b34;
  --color-gold: #d3a148;
  --color-gold-border-soft: rgba(211, 161, 72, 0.25);
  --color-white: #ffffff;
  --color-navy-heading: #0b1a3b;
  --color-text-muted: #4a5568;
  --color-text-soft: #e5e7eb;
  --color-cream: #f7f3ed;
  --color-cream-btn: #efe8dc;

  /* Tipografía */
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Sora", var(--font-primary);

  /* Layout */
  /* Padding horizontal compartido de las secciones (16px en 992px -> 150px en 1920px) */
  --container-padding-x: clamp(16px, calc(-127.24px + 14.44vw), 150px);
}

/* =========================================================
   LAYOUT — CONTENEDOR COMPARTIDO
========================================================= */
/* Constriñe y centra el contenido de una sección a partir de 1920px,
   evitando que se estire sin límite en resoluciones ultra anchas. */
.section-container {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

/* =========================================================
   RESET / BASE
========================================================= */
* {
  box-sizing: border-box;
}

/* Red de seguridad contra overflow horizontal: varios carruseles Slick
   (why-attend, developments, speakers) simulan el gap entre slides con
   un margin negativo en .slick-list para compensar el margin positivo
   de cada .slick-slide (ver esas secciones). Ese margin negativo agranda
   la caja de .slick-list más allá del ancho real del contenedor, y como
   nada por encima lo recorta, ese excedente terminaba filtrándose como
   scroll horizontal de toda la página (más notorio en mobile, donde el
   padding lateral es chico). overflow-x:hidden en html/body no cambia
   nada visualmente salvo cuando algo así se desborda: ahí simplemente lo
   recorta en vez de agregar una scrollbar. */
html {
  overflow-x: hidden;
}

/* Compensa el header fijo en cualquier salto a un ancla interna (click
   en el nav, botones "Acreditación"/"Convertirse en Partner", o incluso
   entrar directo con una URL#hash): sin esto la sección de destino
   quedaría tapada por detrás del header. Aplicado a cualquier [id] en
   general porque no tiene efecto en el layout normal, solo en el
   comportamiento de scroll-into-view. */
[id] {
  scroll-margin-top: var(--header-height, 0px);
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-primary);
  background-color: var(--color-bg-dark);
  color: var(--color-white);
  /* Reserva el espacio que .site-header deja al pasar a position:fixed
     (ver más abajo). --header-height la fija js/functions.js con el alto
     real del header (cambia entre navbar mobile/desktop y es fluido en
     desktop); el 0px es el valor antes de que el script corra, para que
     el header (que en ese instante todavía está en flujo normal, no
     fixed hasta que el CSS carga) no quede duplicado con doble espacio. */
  padding-top: var(--header-height, 0px);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* =========================================================
   PRELOADER
========================================================= */
/* Full page, por encima de absolutamente todo (header:200, footer__top:250).
   js/functions.js (initPreloader) le agrega .preloader--hidden cuando
   termina de cargar la página; sin ese script, el preloader se queda
   fijo tapando el contenido, así que initPreloader es indispensable acá
   (no es una mejora progresiva opcional como el resto de animations.js). */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-dark);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__logo-wrap {
  position: relative;
  width: min(280px, 60vw);
}

/* Silueta completa del logo (Opciones Globales > Loader, ACF), siempre
   visible y tenue: da la referencia de "hasta dónde" se va a rellenar de
   color. */
.preloader__logo-base {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.18;
}

/* Copia superpuesta del mismo logo, recortada a un color sólido (el
   "color de relleno" administrable) usando la propia imagen como máscara
   de opacidad (mask-image) — funciona con cualquier logo de fondo
   transparente, sea SVG o PNG, sin depender de que sea un trazo vectorial
   puntual como antes. initPreloader (js/functions.js) anima su
   clip-path de 0% a 100% según el progreso real de carga, revelando el
   color de izquierda a derecha como una barra. */
.preloader__logo-fill {
  position: absolute;
  inset: 0;
  background-color: var(--color-gold);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  clip-path: inset(0 100% 0 0);
}

/* =========================================================
   COMPONENTES — BOTONES
========================================================= */
.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  padding: 12px 30px;
  border: 1px solid var(--color-gold);
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--color-white);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
    font-size 0.25s ease, padding 0.25s ease;
}

.btn-outline-gold:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-bg-dark);
}

.btn-solid-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 45px;
  background-color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
    font-size 0.25s ease, padding 0.25s ease;
}

.btn-solid-gold:hover {
  background-color: transparent;
  color: var(--color-gold);
}

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 45px;
  background-color: transparent;
  border: 1px solid var(--color-white);
  border-radius: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, font-size 0.25s ease, padding 0.25s ease;
}

.btn-outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-bg-dark);
}

/* =========================================================
   HEADER / NAVBAR
========================================================= */
/* Fijo siempre (para no perderlo al scrollear), pero se corre fuera de
   pantalla (translateY(-100%)) al bajar y vuelve a entrar al subir — la
   clase .site-header--hidden la togglea js/functions.js. z-index alto:
   tiene que quedar por encima de todo el contenido de la página (y de
   .mobile-menu/.mobile-menu-overlay, que son hijos suyos con z-index
   propio: 100 y 90). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: var(--color-bg-dark);
  transform: translateY(0);
  transition: transform 0.35s ease;
}

.site-header--hidden {
  transform: translateY(-100%);
}

.navbar-brand {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gold);
  white-space: nowrap;
  transition: color 0.25s ease;
}

/* --- Navbar desktop ---
   Visible desde 992px (lg) hasta 1920px+.
   Padding, gaps y tipografía escalan de forma fluida entre esos dos
   extremos con clamp() para que quepan los 9 links + botón sin
   romper el layout ni saltar bruscamente de tamaño; a partir de
   1920px quedan fijos en los valores exactos del diseño. */
.navbar-desktop {
  --nav-right-gap: clamp(24px, calc(-122.45px + 14.763vw), 161px);
  --nav-links-gap: clamp(8px, calc(-13.38px + 2.1552vw), 28px);
  --nav-brand-font: clamp(14px, calc(9.724px + 0.431vw), 18px);
  --nav-link-font: clamp(12px, calc(8.793px + 0.323vw), 15px);
  --nav-btn-font: clamp(13px, calc(9.793px + 0.323vw), 16px);
  --nav-btn-padding-x: clamp(14px, calc(-3.1px + 1.7241vw), 30px);
  --nav-btn-padding-y: clamp(8px, calc(3.724px + 0.431vw), 12px);

  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding: 25.5px var(--container-padding-x);
}

.navbar-desktop .navbar-brand {
  font-size: var(--nav-brand-font);
  letter-spacing: 0.1em;
  transition: font-size 0.25s ease;
}

.navbar-desktop__right {
  gap: var(--nav-right-gap);
  transition: gap 0.25s ease;
}

.navbar-links {
  gap: var(--nav-links-gap);
  transition: gap 0.25s ease;
}

.navbar-links a {
  font-weight: 300;
  font-size: var(--nav-link-font);
  letter-spacing: 0.05em;
  color: var(--color-white);
  white-space: nowrap;
  transition: color 0.25s ease, font-size 0.25s ease;
}

.navbar-links a:hover,
.navbar-links a.is-active {
  color: var(--color-gold);
}

.navbar-desktop .btn-outline-gold {
  font-size: var(--nav-btn-font);
  padding: var(--nav-btn-padding-y) var(--nav-btn-padding-x);
}

/* --- Navbar mobile --- */
.navbar-mobile {
  padding: 24px 40px;
  border-bottom: 1px solid var(--color-gold-border-soft);
}

.navbar-mobile .navbar-brand {
  font-size: 16px;
  letter-spacing: 3px;
}

/* Posicionado absoluto respecto de .site-header (su ancestro posicionado
   más cercano, position:fixed) y NO dentro del flujo de .navbar-mobile:
   así queda con un z-index propio por encima tanto del header como del
   panel .mobile-menu (z-index:100) y su overlay (z-index:90), y sigue
   siendo clickeable con el menú abierto para poder cerrarlo con el mismo
   botón. top:50% + translateY(-50%) lo centra verticalmente respecto del
   alto real del header (que en mobile es el alto de .navbar-mobile, único
   hijo en el flujo normal), sin depender del alto exacto del ícono;
   right:40px replica el padding-right de .navbar-mobile. */
.navbar-toggle {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  z-index: 150;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.navbar-toggle:hover {
  opacity: 0.75;
}

/* Ícono hamburger construido en CSS (3 barras) en vez de un asset SVG: a
   diferencia de los íconos estáticos del resto del sitio (ver CLAUDE.md),
   este necesita animarse de hamburger a X, algo que un placeholder de
   imagen no puede hacer. js/functions.js togglea .navbar-toggle--active
   según el estado del menú. */
.navbar-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar-toggle--active .navbar-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navbar-toggle--active .navbar-toggle__bar:nth-child(2) {
  opacity: 0;
}

.navbar-toggle--active .navbar-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Menú mobile (offcanvas) ---
   Oculto por defecto (transform fuera de pantalla + overlay invisible).
   js/functions.js agrega/quita .mobile-menu--open y
   .mobile-menu-overlay--visible; si el script no corre, el menú
   simplemente nunca se abre (el botón queda inerte, sin romper nada). */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 27, 52, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 90;
}

.mobile-menu-overlay--visible {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh; /* fallback para navegadores sin soporte de dvh */
  height: 100dvh;
  z-index: 100;
  flex-direction: column;
  justify-content: center;
  width: min(320px, 82vw);
  /* Padding y gaps fluidos (clamp con vh): en viewports bajos (mobile
     landscape, etc.) se comprimen para que los 9 links + CTA quepan sin
     desbordar; en viewports altos quedan en su valor máximo. */
  padding: clamp(56px, 8vh + 32px, 96px) 32px clamp(24px, 4vh, 40px);
  background-color: var(--color-bg-dark);
  border-left: 1px solid var(--color-gold-border-soft);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* +24px de margen sobre el 100%: el ancho es fluido (min(320px, 82vw)),
     casi nunca un entero de píxeles, y el compositor GPU puede redondear
     el translateX exacto dejando un remanente de subpíxel visible en la
     posición cerrada (más notorio en pantallas de alta densidad). El
     excedente no se nota en la animación pero garantiza que quede
     completamente fuera de pantalla. */
  transform: translateX(calc(100% + 24px));
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.mobile-menu--open {
  transform: translateX(0);
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: clamp(14px, 3vh, 28px);
}

.mobile-menu__links a {
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--color-white);
  transition: color 0.25s ease;
}

.mobile-menu__links a:hover,
.mobile-menu__links a.is-active {
  color: var(--color-gold);
}

.mobile-menu__cta {
  flex-shrink: 0;
  justify-content: center;
  margin-top: clamp(20px, 4vh, 40px);
}

/* Bloquea el scroll de fondo mientras el menú mobile está abierto
   (lo agrega/quita js/functions.js). */
body.mobile-menu-locked {
  overflow: hidden;
}

/* =========================================================
   HERO
========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  /* El hero arranca en flujo normal, después del padding-top que body le
     reserva al header (ver más arriba) — no se solapa con él. Pero como
     ese padding-top ya "roba" espacio arriba, centrar el contenido contra
     el 100vh completo de acá lo correría hacia arriba respecto del área
     realmente disponible. Este padding-top (mismo alto que el del header)
     compensa eso: el flex de acá abajo termina centrando el contenido
     contra el alto visible real (100vh menos lo que ya ocupó el header),
     en vez de contra el 100vh completo. */
  padding-top: var(--header-height, 0px);
  /* flex column + justify-content:center centra verticalmente el bloque
     visible (.hero-desktop o .hero-mobile, el otro queda en display:none
     por las utilities d-none/d-lg-none de Bootstrap Ninja) dentro del
     área visible de acá arriba. align-items no se toca (default: stretch),
     así ese bloque sigue ocupando el 100% de ancho igual que en flujo
     normal — no hace falta agregarles width acá. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-bg-dark);
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Modificador que agrega js/animations.js para el efecto parallax: le da
   a la imagen una reserva de alto extra (recortada por .hero{overflow:hidden})
   para poder desplazarla verticalmente sin descubrir huecos. Si el script
   no corre, esta clase nunca se aplica y la imagen queda igual que arriba. */
.hero__bg-image--parallax {
  height: 130%;
  will-change: transform;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Degradado desktop por defecto */
  background: linear-gradient(
    to bottom,
    rgba(19, 34, 64, 0.6) 0%,
    rgba(19, 34, 64, 0.73) 50%,
    #132240 100%
  );
}

/* Por debajo de 992px (lg) se muestra el hero mobile: degradado propio */
@media (max-width: 991.98px) {
  .hero__overlay {
    background: linear-gradient(
      239deg,
      rgba(19, 34, 64, 0.6) 25%,
      rgba(19, 34, 64, 0.8) 50%,
      rgb(15, 27, 52) 75%
    );
  }
}

.hero__eyebrow {
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.hero__title {
  margin: 0 0 24px;
  color: var(--color-white);
  font-weight: 600;
}

.hero__title-main,
.hero__title-sub {
  display: block;
}

.hero__subtitle {
  margin: 0 0 20px;
  font-weight: 600;
  color: var(--color-white);
}

.hero__subtitle-highlight {
  color: var(--color-gold);
}

.hero__divider {
  display: block;
  height: 1px;
  background-color: var(--color-gold);
}

.hero__description {
  margin: 0;
  font-weight: 400;
  color: var(--color-white);
}

/* --- Hero desktop (>=992px) ---
   --hero-scale / --hero-scale-text escalan el bloque entre 992px (0.56 / 0.75)
   y 1920px (1), donde 1920px = valores exactos del diseño. */
.hero-desktop {
  /* OJO: dividir por 1920px (longitud), no por 1920 (número), para que el
     resultado sea un ratio adimensional válido dentro de clamp(). Dividir
     por un número da otra longitud y rompe el clamp() completo (mezcla de
     tipos), haciendo que padding/tamaños dependientes caigan a 0/auto. */
  --hero-scale: clamp(0.56, calc(100vw / 1920px), 1);
  --hero-scale-text: clamp(0.75, calc(100vw / 1920px), 1);

  position: relative;
  z-index: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding: calc(var(--hero-scale) * 120px) var(--container-padding-x);
}

.hero__text {
  flex: 1 1 480px;
  min-width: 0;
}

.hero-desktop .hero__eyebrow {
  font-size: calc(var(--hero-scale-text) * 22px);
}

.hero__title-main {
  font-size: calc(var(--hero-scale) * 100px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.hero__title-sub {
  font-size: calc(var(--hero-scale) * 60px);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.hero-desktop .hero__subtitle {
  font-size: calc(var(--hero-scale) * 35px);
  line-height: 1.3;
  letter-spacing: -0.034em;
}

.hero-desktop .hero__divider {
  width: 130px;
  margin: 0 0 24px;
}

.hero-desktop .hero__description {
  max-width: 640px;
  margin: 0 0 40px;
  font-size: calc(var(--hero-scale-text) * 22px);
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.hero-desktop .btn-solid-gold,
.hero-desktop .btn-outline-white {
  font-size: calc(var(--hero-scale-text) * 18px);
  padding: calc(var(--hero-scale-text) * 18px) calc(var(--hero-scale-text) * 45px);
}

/* --- Tarjeta "República Dominicana" --- */
.hero-card {
  flex: 0 0 auto;
  width: calc(var(--hero-scale) * 446px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--hero-scale) * 41px);
  padding: calc(var(--hero-scale) * 41px) calc(var(--hero-scale) * 31px);
  background-color: rgba(10, 20, 36, 0.76);
  border: calc(var(--hero-scale) * 2px) solid var(--color-gold);
  border-radius: 20px;
}

.hero-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--hero-scale) * 56px);
  height: calc(var(--hero-scale) * 56px);
}

/* El tamaño del ícono placeholder va inline en el <img> (ver CLAUDE.md);
   acá solo se centra dentro de su caja. */
.hero-card__icon-img {
  display: block;
}

.hero-card__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: calc(var(--hero-scale) * 28px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-white);
}

.hero-card__divider {
  display: block;
  width: 51px;
  height: 1px;
  background-color: var(--color-gold);
}

/* Sin width fijo: el <ul> toma el ancho de su fila más ancha (fit-content,
   por ser flex item de .hero-card con align-items:center) y ese bloque
   completo queda centrado dentro de la card. Dentro de él, cada <li> se
   estira a ese mismo ancho (align-items:stretch, default) y alinea su
   ícono+texto a la izquierda (ver justify-content de abajo), logrando que
   los 4 íconos queden en una misma columna en vez de centrarse cada uno
   por separado según el largo de su propio texto. */
.hero-card__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--hero-scale) * 29px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-card__list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--hero-scale-text) * 15px);
}

.hero-card__list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--hero-scale) * 31px);
  height: calc(var(--hero-scale) * 31px);
}

/* El tamaño del ícono placeholder va inline en el <img> (ver CLAUDE.md). */
.hero-card__list-icon img {
  display: block;
}

.hero-card__list-label {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: calc(var(--hero-scale-text) * 16px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* --- Hero mobile (<992px) --- */
.hero-mobile {
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
  padding: 65px 40px;
}

/* Mismo contenido que .hero-desktop (título, subtítulo, descripción y los
   2 CTA, ver hero-desktop más arriba e index.html), reutilizando sus
   clases base (.hero__title, .hero__subtitle, .hero__description, etc.)
   con tamaños propios acá. Sin gap: el espaciado sale del margin-bottom
   propio de cada clase base (mismo criterio que .hero-desktop más
   arriba), salvo .hero__divider que no trae margin propio en la base. */
.hero__copy-mobile {
  display: flex;
  flex-direction: column;
}

.hero-mobile .hero__eyebrow {
  font-size: 14px;
  letter-spacing: 0.15em;
}

.hero-mobile .hero__title-main {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero-mobile .hero__title-sub {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.hero-mobile .hero__subtitle {
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.hero-mobile .hero__divider {
  width: 100px;
  height: 2px;
  margin: 0 0 20px;
}

.hero-mobile .hero__description {
  font-size: 16px;
  line-height: 1.5;
}

.hero-mobile .hero__cta-group {
  flex-direction: column;
  gap: 16px;
}

.btn-solid-gold--block,
.btn-outline-white--block {
  width: 100%;
  height: 54px;
  padding: 0 24px;
  font-size: 14px;
  letter-spacing: 0.07em;
}

/* =========================================================
   COMPONENTE — SECTION HEADER (título + rayita + subtítulo)
   Usado por "Qué es" y "Por qué asistir".
========================================================= */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 894px;
  margin: 0 auto;
  text-align: center;
}

.section-header__title {
  margin: 0;
  font-weight: 600;
  font-size: 40px;
  color: var(--color-navy-heading);
}

.section-header__rule {
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--color-gold);
}

.section-header__subtitle {
  margin: 0;
  font-size: 22px;
  line-height: 1.64;
  letter-spacing: -0.01em;
  color: var(--color-text-muted);
}

/* Variante para usar sobre fondos oscuros */
.section-header--light .section-header__title {
  color: var(--color-white);
}

.section-header--light .section-header__subtitle {
  color: var(--color-text-soft);
}

/* =========================================================
   STATS GRID
========================================================= */
.stats {
  background-color: var(--color-bg-dark);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-item__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.stat-item__number {
  margin: 0;
  font-weight: 700;
  font-size: 45px;
  line-height: 1.2;
  color: var(--color-gold);
}

.stat-item__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-white);
  opacity: 0.72;
}

/* --- Desktop: 4 en una fila, distribuidos a lo ancho --- */
.stats__row--desktop {
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  gap: 24px;
  padding: 32px var(--container-padding-x);
}

.stats__row--desktop .stat-item {
  flex: 1 1 0;
  min-width: 0;
}

/* --- Mobile: grid 2x2 --- */
.stats__row--mobile {
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 16px;
  padding: 16px 40px;
}

.stats__row--mobile .stat-item {
  width: 147px;
  gap: 12px;
}

.stats__row--mobile .stat-item__number {
  font-size: 28px;
}

.stats__row--mobile .stat-item__label {
  font-size: 12px;
  opacity: 0.8;
}

/* Bloque administrable (ver block-stats): con menos de 4 items, se
   centran como grupo compacto en vez de estirarse repartidos a lo ancho
   de la fila (sin esto, con 1-3 items .stat-item{flex:1 1 0} + este
   contenedor en space-between los infla para llenar el ancho completo). */
.stats__row--desktop.stats__row--few {
  justify-content: center;
}

.stats__row--desktop.stats__row--few .stat-item {
  flex: 0 1 auto;
}

/* =========================================================
   "QUÉ ES EL PAISNATURD FORUM"
========================================================= */
.what-is {
  background-color: var(--color-white);
  padding-block: clamp(60px, 8vw, 160px);
}

.what-is .section-header {
  margin-bottom: 64px;
}

.what-is__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.opportunity-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(11, 26, 59, 0.09);
}

.opportunity-card__image {
  position: relative;
  height: 280px;
}

.opportunity-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(152deg, rgba(0, 0, 0, 0) 25%, rgba(11, 26, 59, 0.25) 75%);
}

.opportunity-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opportunity-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 32px 36px;
}

.opportunity-card__label-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.opportunity-card__accent {
  display: block;
  width: 32px;
  height: 3px;
  background-color: var(--color-gold);
}

.opportunity-card__label {
  margin: 0;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
  white-space: nowrap;
}

.opportunity-card__heading {
  margin: 0;
  font-weight: 700;
  font-size: 25px;
  color: var(--color-navy-heading);
}

.opportunity-card__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--color-text-muted);
}

@media (max-width: 991.98px) {
  .what-is__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* =========================================================
   "POR QUÉ ASISTIR"
========================================================= */
.why-attend {
  background-color: var(--color-white);
  padding-block: 40px;
}

.why-attend__card {
  background-color: var(--color-bg-dark);
  border-radius: 36px;
  padding: 80px var(--container-padding-x) 56px;
}

/* --- Un solo track (Slick): 4 items a la vez en desktop, 1 en mobile
   (breakpoint "responsive", ver js/functions.js) — mismo patrón que
   Desarrollos/Ponentes. Cada <li class="why-attend__item"> ES un slide;
   Slick le asigna su ancho (25% desktop, 100% mobile) al wrapper
   .slick-slide que lo envuelve. */
.why-attend__list {
  display: flex;
  margin: 64px 0 0;
  padding: 0;
}

/* Slick agrega .slick-list y el <ul class="why-attend__dots"> como dos
   hijos directos de este mismo elemento: sin esto, el display:flex de
   arriba los pone en fila (dots a la derecha) en vez de apilarlos. */
.why-attend__list.slick-initialized {
  flex-direction: column;
}

.why-attend__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0 40px;
  border-right: 1px solid var(--color-gold-border-soft);
  text-align: center;
  outline: none;
}

.why-attend__icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  /* Centra el círculo aunque, por lo que fuera, el flex del padre
     (.why-attend__item) no llegue a aplicarse: con un ancho fijo y sin
     margin-left/right, un elemento en flujo normal se pega a la
     izquierda; margin-inline:auto lo centra en cualquiera de los dos
     casos (es redundante, no conflictivo, si el flex sí está activo). */
  margin-inline: auto;
  margin-bottom: 20px;
  border: 1.5px solid var(--color-gold);
  border-radius: 50%;
}

.why-attend__label {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.why-attend__text {
  margin: 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.39;
  color: var(--color-text-soft);
}

/* Generado por Slick Slider (dotsClass) sobre .why-attend__list. */
.why-attend__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.why-attend__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(211, 161, 72, 0.3);
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.why-attend__dots .slick-active .why-attend__dot {
  background-color: var(--color-gold);
}

@media (max-width: 991.98px) {
  .why-attend__card {
    padding: 48px 24px;
  }

  /* Con 1 slide a la vista (breakpoint "responsive" de Slick, ver
     js/functions.js) no hay un "de al lado" del cual separarse. */
  .why-attend__item {
    border-right: none;
    padding-right: 0;
  }
}

/* =========================================================
   "¿QUIÉN ESTARÁ PRESENTE?"
========================================================= */
.who-attends {
  background-color: var(--color-cream);
  padding-block: clamp(60px, 8vw, 160px);
}

.who-attends__title {
  margin: 0 0 64px;
  font-weight: 600;
  font-size: 40px;
  color: var(--color-navy-heading);
  text-align: center;
}

/* --- Desktop (>=992px): listado + foto en fila --- */
.who-attends-desktop {
  flex-direction: column;
  width: 100%;
}

.who-attends__row {
  display: grid;
  grid-template-columns: minmax(0, 44%) 1fr;
  gap: 64px;
  align-items: stretch;
}

.who-attends__list {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.who-attends__item {
  display: flex;
  align-items: center;
  gap: 37px;
}

.who-attends__icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border: 2px solid var(--color-gold);
  border-radius: 100px;
  transition: background-color 0.25s ease;
}

.who-attends__item:hover .who-attends__icon-circle {
  background-color: var(--color-gold-border-soft);
}

.who-attends__item-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.who-attends__item-heading {
  margin: 0;
  font-weight: 700;
  font-size: 35px;
  color: var(--color-navy-heading);
}

.who-attends__item-bullets p {
  margin: 0 0 4px;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.45;
  color: var(--color-navy-heading);
}

.who-attends__item-bullets p:last-child {
  margin-bottom: 0;
}

.who-attends__image {
  border-radius: 30px;
  overflow: hidden;
  height: 100%;
  min-height: 480px;
}

.who-attends__image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.who-attends__image:hover .who-attends__image-img {
  transform: scale(1.04);
}

/* --- Mobile (<992px): título, foto, listado --- */
.who-attends-mobile {
  flex-direction: column;
  gap: 32px;
  padding: 56px 40px;
}

.who-attends__title--mobile {
  margin: 0;
  font-size: 28px;
}

.who-attends__image--mobile {
  height: 220px;
  border-radius: 20px;
}

.who-attends__list--mobile {
  gap: 28px;
}

.who-attends__list--mobile .who-attends__item {
  align-items: flex-start;
  gap: 20px;
}

.who-attends__list--mobile .who-attends__icon-circle {
  width: 64px;
  height: 64px;
}

.who-attends__list--mobile .who-attends__item-heading {
  font-size: 20px;
}

.who-attends__list--mobile .who-attends__item-bullets p {
  font-size: 16px;
  line-height: 1.5;
}

/* =========================================================
   "TRES GRANDES OPORTUNIDADES EN UN MISMO FORO"
========================================================= */
.opportunities {
  background-color: var(--color-white);
  padding-block: clamp(60px, 8vw, 160px);
}

.opportunities__title {
  margin: 0 0 56px;
  font-weight: 600;
  font-size: 40px;
  color: var(--color-navy-heading);
  text-align: center;
}

.opportunities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.opportunity-tile {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.opportunity-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(11, 26, 59, 0.18);
}

.opportunity-tile--dark {
  background-color: var(--color-bg-dark);
}

.opportunity-tile--gold {
  background-color: var(--color-gold);
}

.opportunity-tile__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 auto;
  padding: 48px 40px;
}

.opportunity-tile__heading {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.opportunity-tile--gold .opportunity-tile__heading {
  color: var(--color-navy-heading);
}

.opportunity-tile__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-white);
}

.opportunity-tile--gold .opportunity-tile__text {
  color: var(--color-navy-heading);
}

.opportunity-tile__bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.opportunity-tile__bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.opportunity-tile__bullet span {
  font-weight: 700;
  color: var(--color-gold);
}

.opportunity-tile--gold .opportunity-tile__bullet span {
  color: var(--color-navy-heading);
}

.opportunity-tile__bullet p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.opportunity-tile--gold .opportunity-tile__bullet p {
  color: rgba(15, 27, 52, 0.9);
}

.opportunity-tile__image {
  height: 342px;
}

.opportunity-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.opportunity-tile:hover .opportunity-tile__img {
  transform: scale(1.05);
}

/* Mobile: 3 columnas -> 1 columna por fila */
@media (max-width: 991.98px) {
  .opportunities__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* =========================================================
   "DESARROLLOS CON MAYOR PROYECCIÓN INTERNACIONAL"
========================================================= */
.developments {
  background-color: var(--color-cream);
  padding-block: clamp(60px, 8vw, 160px);
}

.developments .section-header {
  margin-bottom: 64px;
}

.developments__carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.developments__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 66px = 44px + 50%, escalado junto con el ícono (ver el <img> en
     index.html) para que el botón lo siga conteniendo sin recortarlo. */
  width: 66px;
  height: 66px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.developments__arrow:hover {
  opacity: 0.6;
}

.developments__track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}

.developments__track::-webkit-scrollbar {
  display: none;
}

/* Slick agrega .slick-list y el <ul class="developments__dots"> como dos
   hijos directos de este mismo elemento: sin esto, el display:flex de
   arriba los pone en fila (dots a la derecha) en vez de apilarlos.
   El overflow-x:auto original (para el scroll horizontal pre-Slick) se
   neutraliza acá: el margen negativo de .slick-list para el gap entre
   slides "sobresale" del contenedor y dispararía una scrollbar horizontal
   (acá no se veía porque scrollbar-width:none la oculta, pero el
   desborde seguía ahí). */
.developments__track.slick-initialized {
  flex-direction: column;
  overflow: visible;
}

/* position:relative + alto fijo, SIN flex para repartir imagen/label:
   ya se probó a repartirlos como flex-column (imagen con flex-grow
   cediéndole su lugar al label) y, dependiendo del navegador, el cálculo
   de flex-basis de un contenedor cuyo único contenido es un hijo
   position:absolute resultó inconsistente — a veces terminaba
   colapsando a 0 (el label entonces "crecía" y tapaba todo), a veces
   ganaba la imagen (tapando al label). Acá no hay ningún reparto que
   pueda salir mal: la imagen (.developments__card-media) cubre la card
   de punta a punta, y el label se superpone encima, pegado abajo, con
   su propio fondo opaco tapando esa franja de la imagen — calca
   exactamente el resultado visual del diseño sin depender de que ningún
   motor de flexbox reparta bien el espacio entre los dos. */
.developments__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 480px;
  border-radius: 15px;
  overflow: hidden;
  background-color: var(--color-bg-dark);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.developments__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(11, 26, 59, 0.18);
}

.developments__card-media {
  position: absolute;
  inset: 0;
}

.developments__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.developments__card:hover .developments__card-img {
  transform: scale(1.05);
}

/* --- Slick Slider (desktop, ver js/functions.js) --- */
/* Slick no envuelve cada <article> en un div propio: le agrega la clase
   .slick-slide directamente encima de .developments__card (mismo
   elemento) y le fija el ancho real por JS con un style inline, que gana
   por especificidad sobre el flex:1 1 0 de acá arriba. */
.developments__track .slick-slide {
  margin: 0 12px;
}

.developments__track .slick-list {
  margin: 0 -12px;
}

.slick-slide .developments__card {
  width: 100%;
}

.developments__arrow.slick-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* Superpuesto sobre la imagen (que cubre toda la card), pegado abajo:
   su propio background-color opaco tapa esa franja de la imagen que
   queda detrás, dando el mismo resultado visual que "reservarle su
   espacio" sin necesitar ningún reparto de por medio (ver comentario en
   .developments__card). */
.developments__card-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 20px 16px;
  background-color: var(--color-bg-dark);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--color-gold);
}

/* .developments__dots--static: fallback si JS/Slick no llegara a cargar (se
   oculta por JS, no por CSS, ver js/functions.js). Slick genera su propio
   <ul class="developments__dots"> (dotsClass) con la misma clase, en
   todos los anchos. */
.developments__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.developments__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(211, 161, 72, 0.3);
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.developments__dot--active,
.developments__dots .slick-active .developments__dot {
  background-color: var(--color-gold);
}

/* .developments__dots--static se oculta por JS al inicializar Slick
   (que ahora corre en todos los anchos), no por CSS: así se puede seguir
   usando como fallback si JS/Slick no llegara a cargar. Ver js/functions.js. */

/* Mobile: sigue siendo un slider Slick, 1 slide a la vez (ver
   js/functions.js). Los 8 cards (4 + su repetición) se usan acá también
   para tener recorrido real. */
@media (max-width: 991.98px) {
  .developments__track {
    gap: 16px;
  }

  .developments__card {
    height: 380px;
  }

  .developments__card-label {
    padding: 16px;
    font-size: 18px;
  }
}

/* =========================================================
   "CINCO DESTINOS" (mapa de inversión)
   Desktop y mobile: texto + una imagen de mapa (mapa + círculos + líneas
   ya compuestos en el asset, no se arma con CSS) — dos campos de imagen
   independientes (locations_mapa_desktop / locations_mapa_mobile), por
   ahora cargados con el mismo mapa. La maqueta original tenía acá un
   grid de 5 fotos en círculo suelto para mobile (sin el mapa de fondo);
   se reemplazó por este campo de imagen propio.
========================================================= */
.destinations {
  background-color: var(--color-white);
  padding-block: clamp(60px, 8vw, 160px);
}

/* --- CTA (variante propia: borde dorado grueso, texto dorado) --- */
.destinations__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 312px;
  max-width: 100%;
  height: 58px;
  padding: 0 46px;
  border: 2px solid var(--color-gold);
  border-radius: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.destinations__cta:hover {
  background-color: var(--color-gold);
  color: var(--color-white);
}

/* --- Desktop (>=992px) --- */
.destinations-desktop {
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.destinations__text {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1 1 683px;
  max-width: 683px;
}

.destinations__heading-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.destinations__eyebrow {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-gold);
}

.destinations__heading {
  margin: 0;
  font-weight: 600;
  font-size: 50px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-navy-heading);
}

.destinations__description {
  margin: 0;
  max-width: 656px;
  font-size: 22px;
  line-height: 1.45;
  color: var(--color-navy-heading);
}

/* Área del mapa: ahora es una única imagen (mapa + círculos + líneas
   ya compuestos en el asset por diseño), no se arma con hotspots. */
.destinations__map {
  flex: 1 1 882px;
  max-width: 882px;
}

.destinations__map-img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Mobile (<992px) --- */
.destinations-mobile {
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 65px 40px;
  text-align: center;
}

.destinations__heading-group--mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.destinations__eyebrow--mobile {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.destinations__heading--mobile {
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: normal;
}

.destinations__description--mobile {
  max-width: 100%;
  font-size: 15px;
  line-height: 1.45;
}

/* Mapa mobile: antes era un grid de 5 fotos en círculo (maqueta de
   referencia, ver CLAUDE.md); ahora es un campo de imagen propio
   (locations_mapa_mobile) — mismo tratamiento visual que el mapa
   desktop, solo que angosto. */
.destinations__map--mobile {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.destinations__map--mobile .destinations__map-img {
  width: 100%;
  height: auto;
}

.destinations__cta--mobile {
  width: 100%;
  height: auto;
  padding: 14px 32px;
  border-width: 1.5px;
  border-radius: 8px;
  font-size: 13px;
}

/* =========================================================
   "AGENDA PRELIMINAR"
   Misma estructura en desktop y mobile (adaptación lineal simple),
   solo cambian tamaños/espaciados vía media query.
========================================================= */
.agenda {
  background-color: var(--color-bg-dark);
  padding-block: clamp(60px, 8vw, 160px);
}

.agenda__inner {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}

.agenda__title {
  margin: 0 0 34px;
  font-weight: 500;
  font-size: 40px;
  text-align: center;
  color: var(--color-white);
}

.agenda__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-gold);
}

.agenda__row {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 100px;
}

.agenda__row + .agenda__row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.agenda__time {
  flex: 0 0 198px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 45px;
  letter-spacing: 0.01em;
  color: var(--color-gold);
  white-space: nowrap;
}

.agenda__bar {
  flex: 0 0 2px;
  width: 2px;
  height: 64px;
  background-color: var(--color-gold);
  opacity: 0.55;
}

.agenda__label {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 24px;
  font-weight: 500;
  font-size: 25px;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

@media (max-width: 991.98px) {
  .agenda__title {
    margin-bottom: 24px;
    font-size: 26px;
  }

  .agenda__row {
    height: auto;
    min-height: 72px;
    gap: 12px;
    padding-block: 16px;
  }

  .agenda__time {
    flex-basis: 84px;
    font-size: 19px;
    letter-spacing: normal;
  }

  .agenda__bar {
    height: 40px;
  }

  .agenda__label {
    padding-left: 12px;
    font-size: 16px;
    line-height: 1.3;
  }
}

/* =========================================================
   "PONENTES CONFIRMADOS"
   Carrusel horizontal con los 15 ponentes confirmados del diseño:
   Slick Slider en desktop (4 por vista, paginado con dots) y scroll
   táctil nativo en mobile (tarjetas más angostas para deslizar de a una).
========================================================= */
.speakers {
  background-color: var(--color-cream);
  padding-block: clamp(60px, 8vw, 160px);
}

.speakers .section-header {
  margin-bottom: 24px;
}

.speakers__track {
  display: flex;
  gap: 45px;
  margin: 0;
  padding: 16px 4px 32px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

/* Slick agrega .slick-list y el <ul class="speakers__dots"> como dos
   hijos directos de este mismo elemento: sin esto, el display:flex de
   arriba los pone en fila (dots a la derecha) en vez de apilarlos.
   El overflow-x:auto original (para el scroll horizontal pre-Slick) se
   neutraliza acá: el margen negativo de .slick-list para el gap entre
   slides "sobresale" del contenedor y disparaba una scrollbar horizontal. */
.speakers__track.slick-initialized {
  flex-direction: column;
  overflow: visible;
}

.speakers__item {
  flex: 0 0 auto;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  text-align: center;
  scroll-snap-align: start;
}

.speakers__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
}

.speakers__logo-img {
  max-width: 170px;
  max-height: 100%;
  object-fit: contain;
}

/* --- Slick Slider (desktop, ver js/functions.js) --- */
.speakers__track .slick-slide {
  margin: 0 22px;
}

.speakers__track .slick-list {
  margin: 0 -22px;
}

.slick-slide .speakers__item {
  width: 100%;
}

.speakers__name {
  margin: 0;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-gold);
}

.speakers__desc {
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* .speakers__dots--static: fallback si JS/Slick no llegara a cargar (se
   oculta por JS, no por CSS, ver js/functions.js). Slick genera su propio
   <ul class="speakers__dots"> (dotsClass) con la misma clase, en todos
   los anchos. */
.speakers__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.speakers__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(211, 161, 72, 0.3);
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.speakers__dot--active,
.speakers__dots .slick-active .speakers__dot {
  background-color: var(--color-gold);
}

/* Mobile: sigue siendo un slider Slick, 1 slide a la vez (ver
   js/functions.js). */
@media (max-width: 991.98px) {
  .speakers__track {
    gap: 24px;
    padding: 8px 4px 24px;
  }

  .speakers__name {
    font-size: 20px;
  }

  .speakers__desc {
    font-size: 14px;
  }
}

/* =========================================================
   "PARTNERS"
========================================================= */
.partners {
  background-color: var(--color-white);
  padding-block: clamp(60px, 8vw, 160px);
  text-align: center;
}

.partners__title {
  margin: 0 0 56px;
  font-weight: 600;
  font-size: 40px;
  color: var(--color-navy-heading);
}

/* --- Desktop: 4 columnas en grilla de 2x2, separadas por líneas
   internas verticales (entre columnas) y horizontales (entre filas) --- */
.partners__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  width: 100%;
}

.partners__column {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 40px;
}

/* línea vertical: entre la columna izquierda y la derecha de cada fila */
.partners__columns .partners__column:nth-child(2n) {
  border-left: 1px solid rgba(11, 26, 59, 0.12);
}

/* línea horizontal: entre la primera y la segunda fila */
.partners__columns .partners__column:nth-child(n+3) {
  border-top: 1px solid rgba(11, 26, 59, 0.12);
}

.partners__column-title {
  margin: 0;
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-navy-heading);
  white-space: nowrap;
}

/* Slider propio de cada columna (Slick, ver js/functions.js
   initPartnersLogoSliders): 1 logo por slide, ancho fijo = ancho del
   logo, sin flechas/dots (mismo criterio visual liviano que el resto de
   la columna). */
.partners__logos-slider {
  width: 150px;
  max-width: 100%;
}

.partners__logo-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  outline: none;
}

.partners__logo {
  width: 150px;
  height: 60px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.partners__logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

.partners__cta {
  display: inline-flex;
  margin-top: 56px;
}

/* --- Mobile: carrusel, una categoría (slide) por vuelta --- */
.partners__carousel {
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.partners__track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.partners__track::-webkit-scrollbar {
  display: none;
}

.partners__column--slide {
  flex: 0 0 100%;
  gap: 24px;
  padding: 0 8px;
  scroll-snap-align: center;
}

.partners__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.partners__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(211, 161, 72, 0.3);
}

.partners__dot--active {
  background-color: var(--color-gold);
}

/* =========================================================
   "COMO ASISTENTE TENDRÁS ACCESO A:"
   Desktop: grilla de 6 ítems (ícono + texto) en 3 filas x 2 col.
   Mobile: checklist vertical simple con ✓.
========================================================= */
.assistant {
  background-color: var(--color-bg-dark);
  padding-block: clamp(60px, 8vw, 160px);
}

/* --- Desktop --- */
.assistant-desktop {
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.assistant__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 56px;
}

.assistant__rule {
  display: block;
  width: 130px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-gold);
}

.assistant__title {
  margin: 0;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.025em;
  text-align: center;
  color: var(--color-white);
}

.assistant__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 32px;
  width: 100%;
  max-width: 1620px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.assistant__item {
  display: flex;
  align-items: center;
  gap: 24px;
}

.assistant__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 130px;
  height: 130px;
}

.assistant__text {
  margin: 0;
  flex: 1 1 0;
  font-weight: 300;
  font-size: 25px;
  line-height: 1.4;
  color: var(--color-white);
}

/* --- Mobile: checklist --- */
.assistant-mobile {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding: 65px 40px;
}

.assistant__title--mobile {
  font-size: 18px;
  text-align: left;
  color: var(--color-gold);
}

.assistant__checklist {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.assistant__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.assistant__checklist p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-white);
}

.assistant__check {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-gold);
}

/* =========================================================
   "ACREDITACIÓN" (banner con foto de fondo)
========================================================= */
.accreditation {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-dark);
}

.accreditation__bg {
  position: absolute;
  inset: 0;
}

.accreditation__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.accreditation__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
}

.accreditation__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-block: 120px;
  text-align: center;
}

.accreditation__title {
  margin: 0;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.025em;
  color: var(--color-white);
}

.accreditation__text {
  margin: 0;
  max-width: 700px;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.36;
  color: rgba(255, 255, 255, 0.85);
}

.accreditation__text--soft {
  color: rgba(255, 255, 255, 0.7);
}

.accreditation__rule {
  display: block;
  width: 120px;
  height: 1px;
  background-color: var(--color-gold);
}

.accreditation__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

/* Círculo + check son 2 assets separados que se superponen (antes se
   armaba el círculo con CSS y un "✓" de texto). */
.accreditation__note-icon {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.accreditation__note-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.accreditation__note-check {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
}

@media (max-width: 991.98px) {
  .accreditation__content {
    padding-block: 65px;
    gap: 16px;
  }

  .accreditation__title {
    font-size: 22px;
  }

  .accreditation__text {
    font-size: 14px;
    line-height: 1.5;
  }

  .accreditation__rule {
    display: none;
  }

  .accreditation__note {
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid var(--color-gold);
    border-radius: 6px;
    background-color: rgba(211, 161, 72, 0.2);
    font-size: 12px;
    color: var(--color-white);
  }

  .accreditation__note-icon {
    display: none;
  }
}

/* =========================================================
   "SOLICITUD DE ACREDITACIÓN" (formulario, solo maqueta)
========================================================= */
.app-form {
  background-color: var(--color-white);
  padding-block: clamp(60px, 8vw, 160px);
}

.app-form__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
  text-align: center;
}

.app-form__title {
  margin: 0;
  font-weight: 600;
  font-size: 40px;
  color: var(--color-navy-heading);
}

.app-form__rule {
  display: block;
  width: 100%;
  max-width: 698px;
  height: 1px;
  background-color: rgba(11, 26, 59, 0.12);
}

.app-form__subtitle {
  margin: 0;
  font-weight: 300;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.65);
}

.app-form__body {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* El formulario real es el de Contact Form 7 (ver
   inc/cf7-integration.php): .app-form__body ya no ES el <form> (queda un
   <div class="wpcf7"> de CF7 en el medio), así que el flex/gap de las
   filas pasa a este selector — que apunta directo al <form class="wpcf7-form">
   que arma CF7 adentro. */
.app-form__body form.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 100%;
}

.app-form__row {
  display: flex;
  gap: 32px;
  width: 100%;
}

.app-form__field {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-form__label {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.app-form__input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  background-color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--color-navy-heading);
  transition: box-shadow 0.25s ease;
}

.app-form__input::placeholder {
  font-weight: 300;
  color: #a0a0a0;
}

.app-form__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(211, 161, 72, 0.25);
}

.app-form__checkbox-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-form__checkbox {
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  background-color: var(--color-white);
  cursor: pointer;
}

.app-form__checkbox:checked {
  background-color: var(--color-gold);
}

.app-form__checkbox:checked::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  line-height: 1;
  color: var(--color-white);
}

/* Contact Form 7 (ver inc/cf7-integration.php) envuelve el checkbox y su
   texto DENTRO de un mismo <label> (en vez de como hermanos sueltos de
   .app-form__checkbox-row) — el propio label pasa a ser quien arma el
   layout en fila con gap, no ya .app-form__checkbox-row (que ahora solo
   tiene un único hijo real, los <span> que arma CF7 alrededor). */
.app-form__checkbox-row label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: 16px;
  color: #6d6d6d;
  cursor: pointer;
}

/* Mensajes propios de Contact Form 7 (validación por campo + respuesta
   general al enviar) — CF7 ya trae su propio CSS base (tamaño, posición);
   acá solo se ajustan tipografía/color para que no desentonen con el
   resto del formulario. */
.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 400;
}

.wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 18px !important;
  border-radius: 8px;
  font-family: var(--font-primary);
  font-size: 15px;
  text-align: center;
}

.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--color-gold) !important;
  color: var(--color-navy-heading);
  background-color: rgba(211, 161, 72, 0.12);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  border-color: #dc3232 !important;
  color: #dc3232;
  background-color: rgba(220, 50, 50, 0.08);
}

.app-form__submit {
  width: 100%;
  padding: 20px 48px;
  border: none;
  border-radius: 10px;
  background-color: var(--color-cream-btn);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-navy-heading);
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.app-form__submit:hover {
  background-color: #e6dcc9;
}

@media (max-width: 991.98px) {
  .app-form__header {
    gap: 12px;
    margin-bottom: 32px;
  }

  .app-form__title {
    font-size: 24px;
  }

  .app-form__rule {
    max-width: 100px;
  }

  .app-form__subtitle {
    font-size: 13px;
  }

  .app-form__body,
  .app-form__body form.wpcf7-form {
    gap: 16px;
  }

  .app-form__row {
    flex-direction: column;
    gap: 16px;
  }

  .app-form__label {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .app-form__input {
    height: 44px;
    padding: 0 12px;
  }

  .app-form__input::placeholder {
    font-size: 13px;
  }

  .app-form__checkbox {
    width: 18px;
    height: 18px;
  }

  .app-form__checkbox-row label {
    font-size: 12px;
  }

  .app-form__submit {
    padding: 16px 24px;
    font-size: 14px;
    border-radius: 8px;
  }
}

/* =========================================================
   "FECHA" (franja dorada con fecha, sede y datos del evento)
========================================================= */
.event-date {
  background-color: var(--color-gold);
  padding-block: clamp(48px, 8vw, 100px);
  /* Sombra propia en el borde inferior: da la sensación de que este
     bloque "flota" un poco despegado por encima del footer (fixed,
     revelado más abajo al llegar al final del scroll), en vez de pegarse
     directo a él sin transición. */
  box-shadow: 0 24px 48px rgba(11, 26, 59, 0.4);
}

.event-date .section-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.event-date__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.event-date__diamond {
  font-size: 7px;
  color: var(--color-navy-heading);
  opacity: 0.5;
}

.event-date__date {
  margin: 0;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.12em;
  color: var(--color-navy-heading);
  white-space: nowrap;
}

.event-date__location {
  margin: 0;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.25em;
  color: var(--color-navy-heading);
  opacity: 0.9;
}

.event-date__rule {
  display: block;
  width: 600px;
  max-width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
}

.event-date__info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px 60px;
}

.event-date__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.event-date__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid rgba(13, 20, 46, 0.4);
  border-radius: 50%;
}

.event-date__item-title {
  margin: 0;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--color-navy-heading);
  white-space: nowrap;
}

.event-date__item-text {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.event-date__divider {
  display: block;
  width: 1px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 991.98px) {
  .event-date {
    padding-block: 56px;
  }

  .event-date .section-container {
    gap: 20px;
  }

  .event-date__date {
    font-size: 19px;
    letter-spacing: 0.06em;
  }

  .event-date__location {
    font-size: 13px;
    letter-spacing: 0.15em;
  }

  .event-date__rule {
    max-width: 280px;
  }

  .event-date__info {
    gap: 24px;
  }

  .event-date__divider {
    display: none;
  }

  .event-date__icon {
    width: 36px;
    height: 36px;
  }

  .event-date__item-title {
    font-size: 16px;
    white-space: normal;
    text-align: center;
  }

  .event-date__item-text {
    font-size: 12px;
    white-space: normal;
    text-align: center;
  }
}

/* =========================================================
   PAGE CONTENT (wrapper de todas las secciones, ver FOOTER más abajo)
========================================================= */
/* z-index explícito (no "auto"): tiene que pintarse SIEMPRE por encima
   del footer (fixed, z-index:0 más abajo) para que las secciones lo
   tapen mientras se scrollea; el <div class="page-content__spacer"> al
   final, sin fondo propio, es lo único "transparente" que deja
   asomar al footer fixed de atrás — así se "descubre" en vez de
   superponerse cuando se llega debajo de todo. */
/* pointer-events:none acá y auto de vuelta en los hijos reales (todos
   menos el spacer): .page-content entero queda por encima del footer en
   el eje z (z-index:1 vs 0), así que CUALQUIER franja suya sin contenido
   opaco encima —no solo el spacer, también un eventual desajuste entre
   --footer-height y el alto real del footer— seguía capturando los
   clicks en vez de dejarlos pasar hacia los links del footer de atrás.
   Reactivando pointer-events en los hijos reales, siguen funcionando
   normal (son los que de verdad tienen contenido/links propios). */
.page-content {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.page-content > *:not(.page-content__spacer) {
  pointer-events: auto;
}

/* Alto = --footer-height, lo fija js/functions.js con el alto real del
   footer (cambia entre mobile/desktop). Sin JS queda en 0 y el footer
   simplemente se ve en su lugar de siempre, al final del documento. */
.page-content__spacer {
  height: var(--footer-height, 0px);
}

/* =========================================================
   FOOTER
========================================================= */
/* Fixed al fondo del viewport (en vez de al final del documento):
   .page-content-spacer de arriba es lo que reserva el espacio de scroll
   para que se termine de "descubrir" recién al llegar debajo de todo. */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background-color: var(--color-bg-dark);
  border-top: 1px solid rgba(208, 163, 82, 0.5);
}

/* Fade-in del contenido atado al scroll (js/animations.js, ver
   initFooterReveal): la clase la agrega el script, que también fija la
   opacity real (0 a 1) según cuánto del footer ya se "descubrió". Si no
   corre, la clase nunca se aplica y el contenido queda visible tal cual,
   sin depender de JS. */
.footer__fade {
  opacity: 0;
}

.footer__main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px 60px;
  padding-block: 80px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 320px;
  max-width: 520px;
}

.footer__logo {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Alternativa en imagen al .footer__logo de texto (ver footer.php,
   footer_logo_imagen) — mismo alto aproximado que el texto en 28px. */
.footer__logo-img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 100%;
}

.footer__tagline {
  margin: 0;
  font-size: 16px;
  color: rgba(239, 232, 220, 0.75);
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: var(--color-gold);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer__social-link:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 60px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 170px;
}

.footer__col-title {
  margin: 0;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.footer__col p,
.footer__col a {
  margin: 0;
  font-size: 15px;
  color: rgba(239, 232, 220, 0.75);
  transition: color 0.25s ease;
}

.footer__col a {
  text-decoration: underline;
}

.footer__col a:hover {
  color: var(--color-gold);
}

/* Flotante y siempre fijo en pantalla. En el HTML vive fuera de
   .footer (ver index.html): .footer es position:fixed + z-index propio,
   lo que lo convierte en su propio contexto de apilamiento — cualquier
   descendiente, aunque sea position:fixed con un z-index más alto, queda
   atrapado adentro de ese contexto y nunca puede pintarse por encima de
   .page-content (que sí está por delante de .footer). Por eso el botón
   necesita ser hermano de .footer, no hijo, para poder quedar siempre
   visible sin importar si el footer está tapado o destapado.
   z-index por encima del header (200) para que siga siendo clickeable
   incluso si en algún momento llegara a superponerse con él. */
.footer__top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 63px;
  height: 63px;
  border-radius: 50%;
  background-color: var(--color-gold);
  box-shadow: 0 8px 20px rgba(11, 26, 59, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.footer__top:hover {
  transform: translateY(-3px);
}

.footer__bottom {
  background-color: rgba(19, 34, 64, 0.6);
}

.footer__copy {
  margin: 0;
  padding-block: 20px;
  text-align: center;
  font-size: 15px;
  color: rgba(239, 232, 220, 0.4);
}

@media (max-width: 991.98px) {
  .footer__main {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding-block: 40px 24px;
  }

  .footer__brand {
    align-items: center;
    max-width: 100%;
    text-align: center;
  }

  .footer__logo {
    font-size: 22px;
  }

  .footer__logo-img {
    height: 22px;
    margin-inline: auto;
  }

  .footer__tagline {
    font-size: 14px;
  }

  .footer__columns {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }

  .footer__col {
    align-items: center;
    text-align: center;
  }

  /* Antes se ocultaba en mobile (competía por espacio dentro del footer
     apilado); ahora que es un botón flotante independiente del layout
     del footer, se muestra también acá — más chico y con menos margen
     para no invadir demasiada pantalla. */
  .footer__top {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }

  .footer__bottom {
    background-color: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .footer__copy {
    padding-block: 16px;
    font-size: 11px;
  }
}