/* ==========================================================================
   BahIA Summit 2026 — Landing Page
   Metodología: BEM (clases en español)
   Tipografía: Sora (reemplazo de Articulat CF)
   ========================================================================== */

/* ---------- 1. RESET BÁSICO ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body, h1, h2, h3, p, ul, ol, li, figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

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

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

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* ---------- 2. VARIABLES DE DISEÑO ---------- */
:root {
  /* Color de marca */
  --color-azul: #011AF0;
  --color-azul-oscuro: #0012C4;
  --color-azul-claro: #EEF1FE;

  /* Texto */
  --color-texto-principal: #0B0F1A;
  --color-texto-secundario: #6B7280;
  --color-texto-terciario: #9AA1B1;

  /* Fondos */
  --color-fondo-pagina: #F3F5FA;
  --color-fondo-blanco: #FFFFFF;
  --color-fondo-oscuro: #111827;

  /* Bordes */
  --color-borde: #E4E7EF;

  /* Números / acentos de beneficios */
  --color-numero-01: #A9C2F7;
  --color-numero-02: #CBB0F8;
  --color-numero-03: #AEE6FC;
  --gradiente-hover-01: linear-gradient(90deg, #97A9F2 0%, #2B36E9 100%);
  --gradiente-hover-02: linear-gradient(90deg, #C177CC 0%, #2E24DE 100%);
  --gradiente-hover-03: linear-gradient(90deg, #D8F1FE 0%, #6C7CF0 100%);

  /* Gradientes de oradores */
  --gradiente-orador-01: linear-gradient(135deg, #EC9781 0%, #3996B1 100%);
  --gradiente-orador-02: linear-gradient(135deg, #232B52 0%, #37427A 100%);
  --gradiente-orador-03: linear-gradient(135deg, #008F80 0%, #00B79E 100%);
  --gradiente-orador-04: linear-gradient(135deg, #D5573F 0%, #E9863F 100%);

  /* Etiquetas (eyebrows) */
  --color-etiqueta-azul: #2B3FE0;
  --color-etiqueta-violeta: #7C3AED;

  /* Tipografía */
  --fuente-principal: 'Sora', 'Articulat CF', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radios */
  --radio-xl: 32px;
  --radio-lg: 24px;
  --radio-md: 16px;
  --radio-sm: 10px;

  /* Sombras */
  --sombra-suave: 0 4px 24px rgba(17, 24, 57, 0.06);
  --sombra-media: 0 12px 32px rgba(17, 24, 57, 0.12);
  --sombra-hover: 0 18px 40px rgba(1, 26, 240, 0.22);

  /* Transiciones */
  --transicion-rapida: 0.2s ease;
  --transicion-media: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-lenta: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 3. BASE ---------- */
body {
  font-family: var(--fuente-principal);
  background-color: var(--color-fondo-pagina);
  color: var(--color-texto-principal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

.contenedor {
  width: 100%;
  /* max-width: 1280px; */
  max-width: 1325px;
  margin-inline: auto;
  padding-inline: 24px;
}

.contenedor-hero {
  width: 100%;
  max-width: 1700px;
  margin-inline: auto;
  /* padding-inline: 24px; */
}

/* Respeto a usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 4. UTILIDADES ---------- */
.etiqueta {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.etiqueta--azul {
  /* color: var(--color-etiqueta-azul); */
  color: #2563EB;
}

.etiqueta--violeta {
  color: var(--color-etiqueta-violeta);
}

.linea-divisoria {
  width: 100%;
  height: 1px;
  background: var(--color-borde);
  margin: 32px 0 40px;
}

/* Animación de entrada (scroll reveal) */
.animacion-entrada {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.animacion-entrada.animacion-entrada--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 5. BOTONES ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  /* border-radius: 100px; */
  /* border-radius: 14px; */
  border-radius: 17.626px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida), background-color var(--transicion-rapida), color var(--transicion-rapida), border-color var(--transicion-rapida);
}

.boton--primario {
  position: relative;
  z-index: 0;
  isolation: isolate;
  background-color: var(--color-azul);
  color: #fff;
  box-shadow: 0 6px 16px rgba(1, 26, 240, 0.18);
  overflow: hidden;
}

/* Capa de degradé superpuesta: al animar su opacidad (en vez del
   background-color directamente) se logra una transición de color
   perfectamente suave, ya que los gradientes no son animables de forma
   nativa por CSS. */
.boton--primario::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* border-radius: inherit; */
  /* border-radius: 14px; */
  border-radius: 17.626px;
  background: linear-gradient(90deg, #A8C1F6 0%, #8B42F4 100%);
  /* background: linear-gradient(90deg, #A8C1F7 25%, #8A38F5 100%); */
  opacity: 0;
  transition: opacity 0.35s ease;


  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}

/* .boton--primario:hover {
  box-shadow: var(--sombra-hover);
  transform: translateY(-2px);
} */

.boton--primario:hover::before {
  opacity: 1;
}

.boton--primario:active {
  transform: translateY(0);
}

.boton--secundario {
  background-color: transparent;
  color: var(--color-texto-principal);
  border: 1.5px solid var(--color-texto-principal);
}

.boton--secundario:hover {
  background-color: var(--color-texto-principal);
  color: #fff;
  /* transform: translateY(-2px); */
}

.boton--pequeno {
  padding: 12px 20px;
  font-size: 14px;
}

/* ---------- 6. ENCABEZADO ---------- */
.encabezado {
  position: fixed;
  width: 100%;

  /* position: sticky; */
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transicion-media), border-color var(--transicion-media);
}

.encabezado--con-sombra {
  box-shadow: 0 2px 20px rgba(17, 24, 57, 0.06);
  border-bottom-color: var(--color-borde);
}

.encabezado__contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}

.encabezado__logo {
  display: inline-flex;
  flex-shrink: 0;
}

.encabezado__boton-menu {
  display: none;
  padding: 6px;
}

.encabezado__icono-menu {
  width: 24px;
  height: 24px;
}

.encabezado__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.encabezado__item-cta {
  display: none;
}

.encabezado__lista-nav {
  display: flex;
  gap: 36px;
  /* gap: 6px; */
}

.encabezado__link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-texto-principal);
  padding-block: 4px;
}

.encabezado__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--color-azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion-rapida);
}

.encabezado__link:hover::after,
.encabezado__link--activo::after {
  transform: scaleX(1);
}

.encabezado__cta {
  flex-shrink: 0;
  padding: 12px 22px;
  font-size: 14px;
}

/* ---------- 7. HERO ---------- */
.hero {
  /* padding-top: 24px; */
  padding-top: 100px;
}

.hero__tarjeta {
  position: relative;
  /* min-height: 640px; */
  min-height: 770px;
  border-radius: var(--radio-xl);
  overflow: hidden;
  isolation: isolate;

  margin-top: -25px;
}

/* --- Slider: fondo + insignia sincronizados --- */
.hero__slider {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out;
}

.hero__slide--activo {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hero__fondo {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  object-fit: fill;
}

.hero__insignia {
  position: absolute;
  /* top: 40px; */
  top: 80px;
  /* left: 40px; */
  left: 90px;
  width: 168px;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(1, 26, 240, 0.35));
  animation: aparicionInsignia 0.6s ease both;
}

@keyframes aparicionInsignia {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Contenido fijo del hero --- */
.hero__contenido {
  position: absolute;
  /* left: 40px; */
  left: 90px;
  /* bottom: 40px; */
  bottom: 105px;
  z-index: 5;
  width: 100%;
  /* max-width: 460px; */
  max-width: 585px;
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border-radius: var(--radio-lg);
  padding: 32px;
  box-shadow: var(--sombra-media);
}

.hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-azul);
  border: 1px solid rgba(1, 26, 240, 0.25);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 18px;
}

.hero__etiqueta-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-azul);
}

.hero__descripcion {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-texto-secundario);
  margin-bottom: 24px;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.hero__meta-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-texto-secundario);
  border: 1px solid var(--color-borde);
  border-radius: 100px;
  padding: 8px 14px;
}

.hero__meta-icono {
  width: 15px;
  height: 15px;
}

/* ---------- 8. BENEFICIOS ---------- */
.beneficios {
  /* padding-block: 96px 72px; */
  padding-block: 30px 50px;
}

.beneficios__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.beneficios__titulo {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.beneficios__descripcion {
  /* max-width: 380px; */
  max-width: 670px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-texto-secundario);
  text-align: left;
}

.lista-beneficios {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tarjeta-beneficio {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  align-items: center;
  gap: 24px;
  background-color: var(--color-fondo-blanco);
  border-radius: var(--radio-md);
  padding: 32px 36px;
  box-shadow: var(--sombra-suave);
  cursor: default;
  overflow: hidden;
  transition: transform var(--transicion-media), box-shadow var(--transicion-media);
}

.tarjeta-beneficio::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transition: opacity var(--transicion-media);
}

.tarjeta-beneficio--01::before {
  background: var(--gradiente-hover-01);
}

.tarjeta-beneficio--02::before {
  background: var(--gradiente-hover-02);
}

.tarjeta-beneficio--03::before {
  background: var(--gradiente-hover-03);
}

.tarjeta-beneficio:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.tarjeta-beneficio:hover::before {
  opacity: 1;
}

.tarjeta-beneficio__numero {
  position: relative;
  z-index: 1;
  font-size: 40px;
  font-weight: 800;
  transition: color var(--transicion-media);
}

.tarjeta-beneficio--01 .tarjeta-beneficio__numero {
  color: var(--color-numero-01);
}

.tarjeta-beneficio--02 .tarjeta-beneficio__numero {
  color: var(--color-numero-02);
}

.tarjeta-beneficio--03 .tarjeta-beneficio__numero {
  color: var(--color-numero-03);
}

.tarjeta-beneficio:hover .tarjeta-beneficio__numero {
  color: #fff;
}

.tarjeta-beneficio__titulo {
  position: relative;
  z-index: 1;
  font-size: 21px;
  font-weight: 700;
  transition: color var(--transicion-media);
}

.tarjeta-beneficio:hover .tarjeta-beneficio__titulo {
  color: #fff;
}

.tarjeta-beneficio__texto {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-texto-secundario);
  transition: color var(--transicion-media);
}

.tarjeta-beneficio:hover .tarjeta-beneficio__texto {
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- 9. ORADORES ---------- */
.oradores {
  padding-block: 72px;

  padding-bottom: 0;
}

.oradores__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.oradores__titulo {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.oradores__descripcion {
  /* max-width: 420px; */
  max-width: 670px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-texto-secundario);
  /* text-align: right; */
  text-align: left;
}

.lista-oradores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* gap: 24px; */
  gap: 41px;
}

.tarjeta-orador {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tarjeta-orador__grafico {
  position: relative;
  /* aspect-ratio: 3 / 3.6; */
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-md);
  overflow: hidden;
  /* clip-path: polygon(0 12%, 88% 0, 100% 0, 100% 88%, 88% 100%, 0% 100%); */
  transition: transform var(--transicion-media), box-shadow var(--transicion-media);
}

/* .tarjeta-orador--01 .tarjeta-orador__grafico {
  background: var(--gradiente-orador-01);
}

.tarjeta-orador--02 .tarjeta-orador__grafico {
  background: var(--gradiente-orador-02);
}

.tarjeta-orador--03 .tarjeta-orador__grafico {
  background: var(--gradiente-orador-03);
}

.tarjeta-orador--04 .tarjeta-orador__grafico {
  background: var(--gradiente-orador-04);
} */

.tarjeta-orador:hover .tarjeta-orador__grafico {
  /* box-shadow: var(--sombra-media); */
  /* background-color: transparent; */
}


.tarjeta-orador__foto {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: 78%; */
  height: 100%;
  /* object-fit: cover; */
  object-fit: scale-down;
  object-position: top center;
  /* mix-blend-mode: luminosity; */
  /* opacity: 0.92; */
  transform: scale(1);
  transition: transform var(--transicion-lenta);
}

.tarjeta-orador:hover .tarjeta-orador__foto {
  /* transform: scale(1.05); */
  /* background-color: #f3f5fa; */
}

.tarjeta-orador:hover {
  transform: scale(1.05);
  /* background-color: #f3f5fa; */
  transition: transform var(--transicion-lenta);
}

.tarjeta-orador__nombre {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.tarjeta-orador__nombre strong {
  font-weight: 700;
}

.tarjeta-orador__tema {
  /* font-size: 14px; */
  font-size: 13.8px;
  line-height: 1.5;
  color: var(--color-texto-secundario);
  text-align: center;
}

/* ---------- 10. EL EVENTO / CRONOGRAMA ---------- */
.evento {
  padding-block: 72px;

  padding-bottom: 0;

  padding-top: 110px;
}

.evento__encabezado {
  margin-bottom: 48px;
}

.evento__titulo {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.evento__descripcion {
  font-size: 16px;
  color: var(--color-texto-secundario);
}

.cronograma__linea-tiempo {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cronograma__paso {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 24px;
}

.cronograma__marcador {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cronograma__punto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.cronograma__punto--01 {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.cronograma__punto--02 {
  background: linear-gradient(135deg, #6D5FF0, #4C3FE0);
}

.cronograma__conector {
  flex: 1;
  width: 2px;
  background: var(--color-borde);
  /* margin-block: 8px; */

  margin-block: -12px;
  position: relative;
  top: 12px;
}

.tarjeta-dia {
  /* background-color: var(--color-fondo-blanco); */
  border-radius: var(--radio-md);
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion-media), box-shadow var(--transicion-media);
}

.tarjeta-dia:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-media);
}

.tarjeta-dia--destacada {
  /* background: linear-gradient(90deg, #6C7CF0 0%, #1420E8 100%); */
  /* color: #fff; */
  color: #0B0F1A;
}

.tarjeta-dia__etiqueta-dia {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 4px;
}

.tarjeta-dia__fecha {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 10px;
}

.tarjeta-dia__pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.22);
  /* color: #fff; */

  color: #2563EB;
  /* border-radius: 12.59px; */
  background: rgba(37, 99, 235, 0.09);
}

.tarjeta-dia__pill--violeta {
  background-color: #F1E9FE;
  color: var(--color-etiqueta-violeta);
}

.tarjeta-dia__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.tarjeta-dia__lista li {
  position: relative;
  padding-left: 18px;
}

.tarjeta-dia__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.tarjeta-dia--destacada .tarjeta-dia__lista li::before {
  /* background: #fff; */
  background: #2563EB;
}

.tarjeta-dia:not(.tarjeta-dia--destacada) .tarjeta-dia__lista li::before {
  background: var(--color-etiqueta-violeta);
}

.tarjeta-dia__pie {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.tarjeta-dia__formato {
  /* font-size: 13px; */
  font-size: 14px;
  opacity: 0.85;
  white-space: nowrap;
  margin-top: 14px;
}

.tarjeta-dia__formato span {
  opacity: 0.7;
}

.tarjeta-dia--destacada .boton--secundario {
  /* border-color: #fff; */
  /* color: #fff; */
  border-color: #0B0F1A;
  color: #0B0F1A;
  background-color: transparent;
}

.tarjeta-dia--destacada .boton--secundario:hover {
  /* background-color: #fff; */
  /* color: var(--color-azul); */
  background-color: #0B0F1A;
  color: #fff;
}

.barra-horario {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--color-fondo-blanco);
  border-radius: var(--radio-md);
  padding: 22px;
  box-shadow: var(--sombra-suave);
  font-size: 15px;
}

.barra-horario__icono {
  width: 20px;
  height: 20px;
}

.barra-horario__etiqueta {
  color: var(--color-texto-secundario);
}

.barra-horario__valor {
  font-weight: 700;
}

.barra-horario__nota {
  color: var(--color-texto-secundario);
}

/* ---------- 11. UBICACIÓN ---------- */
.ubicacion {
  padding-block: 72px;

  padding-top: 110px;
}

.ubicacion__encabezado {
  margin-bottom: 32px;
}

.ubicacion__titulo {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ubicacion__mapa {
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  margin-bottom: 32px;
}

.ubicacion__mapa img {
  width: 100%;
  height: auto;
}

.mapa {
  width: 1325px;
  height: 450px;
}

@media (max-width: 767px) {
  .mapa {
    width: 435px;
    height: 450px;
  }
}

.ubicacion__detalle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.ubicacion__subtitulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-texto-terciario);
  margin-bottom: 8px;
}

.ubicacion__nombre-lugar {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.ubicacion__direccion-texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-texto-secundario);
}

.ubicacion__lista-acceso {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ubicacion__lista-acceso li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--color-texto-secundario);
}

.ubicacion__lista-acceso img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- 12. AUSPICIANTES ---------- */
.auspiciantes {
  padding-block: 56px;

  padding-bottom: 0;
}

.auspiciantes__titulo {
  text-align: center;
  /* font-size: 15px; */
  font-size: 17px;
  font-weight: 600;
  color: var(--color-texto-secundario);
  /* margin-bottom: 32px; */
  margin-bottom: 24px;
}

.auspiciantes__lista {
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 13px; */
  gap: 16px;
  row-gap: 32px;
  flex-wrap: wrap;
}

.auspiciantes__lista li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 27px;
}

.auspiciantes__lista img {
  max-width: none;
  width: auto;
  height: 100%;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--transicion-rapida), transform var(--transicion-rapida);
}

.auspiciantes__lista li:hover img {
  opacity: 1;
  transform: translateY(-2px);
}

/* El wordmark de "La Nueva" trae más aire interno en el propio
   archivo que el resto de los logos, así que a la misma altura se
   ve más grande; se lo achica un poco para emparejarlo visualmente. */
.auspiciantes__lista img.auspiciantes__logo--pequeno {
  height: 78%;
}

.logo-rex {
  /* height: 144% 38.875px !important; */
  height: 144% !important;
}


/* Cada logo se dimensiona por su alto (30px) con ancho automático,
   así el gap de 18px se ve parejo entre todos sin importar la
   proporción de cada imagen. Con eso, los 13 entran en una sola fila
   apenas el contenedor alcanza ~1277px de ancho (1233px útiles
   dentro del padding de la tarjeta blanca); por debajo de eso,
   flex-wrap los acomoda en más filas a medida que el espacio
   disponible lo requiere. */

/* ---------- 13. FAQ / ACORDEÓN ---------- */
.preguntas-frecuentes {
  padding-block: 72px;

  padding-top: 110px;
}

.preguntas-frecuentes__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.preguntas-frecuentes__titulo {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.preguntas-frecuentes__descripcion {
  font-size: 15px;
  color: var(--color-texto-secundario);
}

.acordeon__item {
  border-bottom: 1px solid var(--color-borde);
}

.acordeon__boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 4px;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
}

.acordeon__flecha {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  padding: 10px;
  box-sizing: content-box;
  color: var(--color-texto-principal);
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  transition: transform var(--transicion-media), background-color var(--transicion-media), border-color var(--transicion-media), color var(--transicion-media);
}

/* El ícono usa stroke="currentColor": basta con cambiar `color` para que la
   flecha se vea siempre en contraste con el fondo del círculo (sin filtros). */
.acordeon__boton[aria-expanded="true"] .acordeon__flecha {
  transform: rotate(180deg);
  background-color: var(--color-azul);
  border-color: var(--color-azul);
  color: #fff;
}

.acordeon__boton:hover .acordeon__flecha {
  border-color: var(--color-azul);
}

.acordeon__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transicion-media);
}

/* El padding queda siempre presente: al estar dentro de un contenedor con
   overflow hidden y max-height animado por JavaScript (según la altura real
   del contenido), la transición queda perfectamente suave y el estado
   cerrado siempre arranca en 0, sin depender de cálculos de min-content
   del navegador. */
.acordeon__contenido {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-texto-secundario);
  padding-right: 60px;
  padding-bottom: 24px;
}

.acordeon__contenido strong {
  color: var(--color-texto-principal);
}

.acordeon__contenido .boton {
  margin-top: 14px;
}

.preguntas-frecuentes__contacto {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.preguntas-frecuentes__contacto-titulo {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.preguntas-frecuentes__contacto-texto {
  font-size: 14px;
  color: var(--color-texto-secundario);
}

/* ---------- 14. ORGANIZADORES ---------- */
.organizadores {
  padding-block: 40px 96px;
}

.organizadores__titulo {
  text-align: center;
  /* font-size: 15px; */
  font-size: 17px;
  font-weight: 600;
  color: var(--color-texto-secundario);
  margin-bottom: 28px;
}

.organizadores__lista {
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 28px; */
  gap: 18px;
  flex-wrap: wrap;
  background-color: var(--color-fondo-blanco);
  border-radius: var(--radio-lg);
  padding: 28px 36px;
  box-shadow: var(--sombra-suave);
}

.organizadores__lista img {
  /* height: 32px; */
  height: 31px;
  width: auto;
  opacity: 0.9;
  transition: transform var(--transicion-rapida);
}

.organizadores__lista li:hover img {
  transform: translateY(-2px);
}

/* ---------- 15. PIE DE PÁGINA ---------- */
.pie-de-pagina {
  background-color: var(--color-fondo-oscuro);
  color: #fff;
  padding-block: 64px 32px;
}

.pie-de-pagina__grilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

.pie-de-pagina__marca img {
  margin-bottom: 18px;
}

.pie-de-pagina__descripcion {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 320px;
}

.pie-de-pagina__titulo-columna {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* color: rgba(255, 255, 255, 0.5); */
  color: #fff;
  margin-bottom: 18px;
}

.pie-de-pagina__columna ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pie-de-pagina__columna a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transicion-rapida);
}

.pie-de-pagina__columna a:hover {
  color: #fff;
}

.pie-de-pagina__lista-evento {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pie-de-pagina__lista-evento li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.pie-de-pagina__lista-evento img {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.pie-de-pagina__linea {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.12);
}

.pie-de-pagina__copy {
  padding-top: 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   16. RESPONSIVE — TABLET
   ========================================================================== */
@media (max-width: 1024px) {
  .lista-oradores {
    grid-template-columns: repeat(2, 1fr);
  }

  .tarjeta-dia {
    grid-template-columns: 160px 1fr;
  }

  .tarjeta-dia__pie {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .pie-de-pagina__grilla {
    grid-template-columns: 1fr 1fr;
  }

  .pie-de-pagina__marca {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   17. RESPONSIVE — MOBILE
   ========================================================================== */
@media (max-width: 767px) {
  .contenedor {
    padding-inline: 18px;
  }

  /* --- Encabezado --- */
  .encabezado__contenedor {
    padding-block: 14px;
    position: relative;

    padding-right: 25px;
  }

  .encabezado__lista-nav {
    display: flex;
    /* gap: 36px; */
    gap: 6px;
  }

  .cronograma__paso {
    display: block;
    grid-template-columns: 44px 1fr;
    gap: 24px;
  }

  .cronograma__punto--01 {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    display: none;
  }

  .cronograma__punto--02 {
    background: linear-gradient(135deg, #6D5FF0, #4C3FE0);
    display: none;
  }

  .cronograma__conector {
    flex: 1;
    width: 2px;
    background: var(--color-borde);
    /* margin-block: 8px; */

    margin-block: -12px;
    position: relative;
    top: 12px;

    display: none;
  }

  .encabezado__logo img {
    width: 110px;
    height: auto;
  }

  /* Botón hamburguesa: círculo azul con ícono blanco. */
  .encabezado__boton-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* background-color: var(--color-azul); */
    background-color: transparent;
    transition: background-color var(--transicion-rapida), transform var(--transicion-rapida);


  }

  /* .encabezado__boton-menu:hover {
    background-color: var(--color-azul-oscuro);
  } */

  .encabezado__boton-menu:active {
    transform: scale(0.95);
  }

  .encabezado__icono-menu {
    /* width: 18px; */
    /* height: 18px; */

    width: 24px;
    height: 24px;

    /* El ícono se dibuja en azul por defecto (mismo archivo que en desktop);
       se invierte a blanco para que contraste con el fondo azul del botón. */

    /* filter: brightness(0) invert(1); */
  }


  /* Estado abierto: círculo azul de fondo + ícono blanco */
  .encabezado__boton-menu[aria-expanded="true"] {
    background-color: var(--color-azul);
  }

  .encabezado__boton-menu[aria-expanded="true"]:hover {
    background-color: var(--color-azul-oscuro);
  }

  .encabezado__boton-menu[aria-expanded="true"] .encabezado__icono-menu {
    filter: brightness(0) invert(1);
  }

  /* Logo: al no haber botón CTA en la barra en mobile, el margen automático
     lo empuja hasta el extremo derecho del header. */
  .encabezado__logo {
    order: 2;
    margin-inline: auto 0;
  }

  /* El botón "Registrate gratis" del header (versión desktop) se oculta en
     mobile: en su lugar aparece como último ítem dentro del menú desplegable. */
  .encabezado__cta {
    display: none;
  }

  /* Menú desplegable compacto (no ocupa toda la pantalla): una tarjeta
     flotante debajo del header, alineada a la izquierda. */
  .encabezado__nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    /* width: min(300px, 82vw); */
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: var(--sombra-media);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transicion-media), transform var(--transicion-media), visibility 0s linear var(--transicion-media);
    z-index: 200;
  }

  .encabezado__nav--abierto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--transicion-media), transform var(--transicion-media), visibility 0s;

    justify-content: flex-start;
  }

  .encabezado__lista-nav {
    flex-direction: column;
  }

  .encabezado__link {
    display: block;
    font-size: 16px;
    font-weight: 500;
    padding: 16px 24px;
  }

  .encabezado__link::after {
    display: none;
  }

  /* sin subrayado, no aplica en el dropdown */

  /* Último ítem del menú: el CTA "Registrate gratis", resaltado en azul y
     con las esquinas inferiores redondeadas junto con la tarjeta. */
  .encabezado__item-cta {
    display: block;
    margin-top: 4px;
  }

  .encabezado__link--cta {
    background-color: var(--color-azul);
    color: #fff;
    font-weight: 700;
    padding: 18px 24px;
    /* border-radius: 0 0 20px 20px; */
    /* border-radius: 20px; */
    /* margin-left: 24px; */
    margin-bottom: 14px;
  }

  /* --- Hero --- */
  .hero {
    /* padding-top: 16px; */

    padding-top: 60px;

    padding-top: 100px;
  }

  .hero__tarjeta {
    min-height: auto;
    border-radius: var(--radio-md);
  }

  .hero__slider {
    position: relative;
    height: 320px;
  }

  .hero__insignia {
    /* top: 20px; */
    /* left: 20px; */
    /* width: 108px; */

    top: 38px;
    left: 30px;
    width: 85px;

    display: none;
  }

  .hero__contenido {
    position: static;
    max-width: none;
    border-radius: 0 0 var(--radio-md) var(--radio-md);
    box-shadow: none;
    padding: 24px 20px;
  }

  .hero__acciones {
    flex-direction: column;
  }

  .hero__acciones .boton {
    width: 100%;
  }

  .hero__descripcion {
    font-size: 15px;
  }

  /* --- Beneficios --- */
  .beneficios {
    padding-block: 56px 40px;
  }

  .beneficios__encabezado {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .beneficios__titulo {
    font-size: 26px;
  }

  .beneficios__descripcion {
    text-align: left;
    max-width: none;
  }

  .linea-divisoria {
    margin: 24px 0 28px;
  }

  .tarjeta-beneficio {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px;
  }

  .tarjeta-beneficio__numero {
    font-size: 32px;
  }

  .tarjeta-beneficio__titulo {
    font-size: 19px;
  }

  /* --- Oradores --- */
  .oradores {
    padding-block: 40px;
  }

  .oradores__encabezado {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
  }

  .oradores__titulo {
    font-size: 26px;
  }

  .oradores__descripcion {
    text-align: left;
    max-width: none;
  }

  .lista-oradores {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tarjeta-orador__grafico {
    aspect-ratio: 4 / 3;
  }

  /* --- Evento --- */
  .evento {
    padding-block: 40px;
  }

  .evento__titulo {
    font-size: 26px;
  }

  .tarjeta-dia {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 18px;
    min-width: 0;
  }

  .tarjeta-dia__pie {
    align-items: flex-start;
    min-width: 0;
  }

  .tarjeta-dia__pie .boton {
    width: 100%;
    justify-content: center;
  }

  .tarjeta-dia__formato {
    white-space: normal;
  }

  .barra-horario {
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
  }

  /* --- Ubicación --- */
  .ubicacion {
    padding-block: 40px;
  }

  .ubicacion__titulo {
    font-size: 26px;
  }

  .ubicacion__detalle {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* --- Auspiciantes --- */
  .auspiciantes {
    padding-block: 40px;
  }

  .auspiciantes__lista {
    row-gap: 24px;
    justify-content: center;
  }

  /* --- FAQ --- */
  .preguntas-frecuentes {
    padding-block: 40px;
  }

  .preguntas-frecuentes__encabezado {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .preguntas-frecuentes__titulo {
    font-size: 26px;
  }

  .acordeon__boton {
    font-size: 16px;
    padding: 18px 2px;
  }

  .acordeon__contenido {
    padding-right: 20px;
  }

  .preguntas-frecuentes__contacto {
    flex-direction: column;
    align-items: flex-start;
  }

  .preguntas-frecuentes__contacto .boton {
    width: 100%;
    justify-content: center;
  }

  /* --- Organizadores --- */
  .organizadores {
    padding-block: 24px 64px;
  }

  .organizadores__lista {
    /* gap: 20px; */
    /* padding: 22px; */
    /* gap: 23px; */
    gap: 17px;
    padding: 17px;
    justify-content: center;

  }

  .organizadores__lista img {
    height: 24px;
  }

  /* --- Footer --- */
  .pie-de-pagina {
    padding-block: 48px 24px;
  }

  .pie-de-pagina__grilla {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }

  .pie-de-pagina__marca {
    grid-column: auto;
  }

  .hero__fondo {
    width: auto;
    height: 100%;
    /* object-fit: cover; */
    object-fit: fill;
    /* position: relative; */
    /* aspect-ratio: 400 / 200; */
    margin: 0 auto;
  }
}