/* =========================================================
   TecWeek ED 2026 — Estilos
   Tokens de marca (reemplazar cuando lleguen los assets finales)
========================================================= */

:root {
  /* Paleta OFICIAL de marca (5 colores + neutros). Los nombres de variable son históricos
     -cada categoría del sitio ya tenía un color asignado (verde=Charlas TEC, violeta=Foro TEC,
     turquesa=Inteligencia Creativa, naranja=Inteligencia Aplicada, rosa=Inteligencia Expandida)-
     así que se mantienen para no renombrar clases en todo el sitio, pero ahora cada uno apunta
     al color oficial que le corresponde a esa categoría. La paleta oficial no tiene verde.
       --verde    -> Azul oficial     #2763A5  (Charlas TEC)
       --violeta  -> Violeta oficial  #5C0055  (Foro TEC)
       --turquesa -> Celeste oficial  #62CFF6  (Inteligencia Creativa)
       --naranja  -> Durazno oficial  #F0C79D  (Inteligencia Aplicada)
       --rosa     -> Rosa oficial     #EE9CCA  (Inteligencia Expandida) */
  --verde: #2763A5;
  --violeta: #5C0055;
  --turquesa: #62CFF6;
  --naranja: #F0C79D;
  --rosa: #EE9CCA;

  --oscuro: #12121A;
  --oscuro-2: #1B1B26;
  --claro: #FAFAF8;
  --texto: #1A1A22;
  --texto-suave: #55555F;
  --borde: #E7E5DE;

  /* Tokens del header nuevo (mapeados a la marca existente).
     --brand-blue ahora ES el Azul oficial de la paleta (antes era un azul inventado,
     #3B5FE5, antes de tener la guía real). Se usa para CTAs, foco y links genéricos —
     no es "de una categoría", es el accent funcional/interactivo del sitio. */
  --font-family: 'Systemia', 'Inter', sans-serif;
  --color-light: var(--claro);
  --color-white: #FFFFFF;
  --brand-blue: #2763A5;
  --brand-blue-hover: #1F4F84;
  --brand-gradient: linear-gradient(100deg, #1F4F84 0%, #2763A5 45%, #5C0055 100%);

  --font-display: 'N27', 'Inter', sans-serif;
  --font-body: 'Systemia', 'Inter', sans-serif;

  --radius: 18px;
  --container: 1160px;
}

/* ===== Tipografía de marca =====
   Titulares: N27 Regular (siempre en mayúsculas)
   Textos:    Systemia Regular / Bold (mayúsculas y minúsculas)
   Archivos en assets/fonts/. Si un archivo no carga, el navegador usa Inter (Google Fonts).
   OJO: la versión "Systemia Test" no incluye ? ( ) : + | ni comillas y guiones largos; esos
   caracteres se dibujan con Inter hasta contar con la versión completa de la fuente. */
@font-face {
  font-family: 'N27';
  src: url('assets/fonts/N27-Regular.woff2') format('woff2');
  font-weight: 100 900; /* una sola cara: evita negritas falsas */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Systemia';
  src: url('assets/fonts/Systemia-Regular.woff2') format('woff2');
  font-weight: 300 500; /* no hay Light: 300-500 usan Regular */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Systemia';
  src: url('assets/fonts/Systemia-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-synthesis-weight: none; }
html, body { max-width: 100%; overflow-x: hidden; }

img { max-width: 100%; height: auto; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--texto);
  line-height: 1.5;

  /* Fondo tipo "mesh gradient" — sin imágenes */
  background-color: #613e65;
  background-image:
    /* Mancha azul vibrante en la esquina inferior izquierda */
    radial-gradient(circle at 5% 95%, #007bc4 0%, transparent 50%),
    /* Mancha lila/blanca suave en la esquina superior izquierda */
    radial-gradient(circle at 5% 5%, #d8bfd8 0%, transparent 40%),
    /* Mancha durazno/cálida en el lateral derecho */
    radial-gradient(circle at 95% 50%, #e8c3a7 0%, transparent 60%);
  background-attachment: fixed;
  background-blend-mode: normal;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}

strong, b { font-weight: 700; }

p { margin: 0; }

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

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

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.icon { width: 20px; height: 20px; flex-shrink: 0; }

.bg-white { background-color: var(--color-white); }
.bg-light { background-color: var(--color-light); }
.border-bottom { border-bottom: 1px solid #E5E7EB; }
.border-top { border-bottom: 1px solid #E5E7EB; }
.pb-section { padding-bottom: 80px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--brand-gradient); color: #fff; border: none; }
.btn-primary:hover { filter: brightness(1.1); }
/* Referencia: "Inscribirme" sólido blanco en el header, igual que en el hero. */
.header-btn-white { background: #fff; color: var(--brand-blue); }
.header-btn-white:hover { filter: none; background: #F2EFE9; }

/* "Inscribirme" del hero: azul sólido (referencia), no el degradé de marca. */
.btn-solid { background: var(--brand-blue); color: #fff; border: none; }
.btn-solid:hover { background: var(--brand-blue-hover); }

/* Blanco sólido en vez del degradé de marca: sobre el fondo Freedom Gradient del hero,
   es el contraste más fuerte posible para el CTA principal (el degradé se "camuflaba"
   un poco con el fondo, que usa esos mismos tonos). El botón chico del header sigue con
   el degradé a propósito — es jerarquía, no inconsistencia: el CTA grande del hero pega
   más fuerte que el mini-CTA siempre visible del header. */
.btn-gradient {
  background: #fff;
  color: var(--brand-blue);
  border: none;
}
.btn-gradient:hover { background: #F2EFE9; }
.btn-gradient svg { flex-shrink: 0; }

.btn-outline { border-color: var(--oscuro); color: var(--oscuro); background: transparent; }
.btn-outline:hover { background: var(--oscuro); color: #fff; }

.btn-outline-claro { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn-outline-claro:hover { background: #fff; color: var(--oscuro); }



.btn-ghost { color: var(--texto); background: transparent; padding: 8px 14px; }
.btn-ghost:hover { color: var(--violeta); }

.btn-text { padding: 11px 4px; text-decoration: underline; text-underline-offset: 3px; }

.btn-lg { padding: 20px 34px; font-size: 1.22rem; }

.btn-disabled {
  background: #EDEBE3;
  color: #9A978C;
  border: 1.5px solid #E0DDD3;
  cursor: not-allowed;
}

/* Genérico para cualquier link/botón "a la espera" (Agenda, por ahora): se ve apagado y no
   responde al click ni al teclado. Para reactivar un elemento, sacar esta clase + aria-disabled
   + tabindex="-1" y devolverle su href real — no hace falta tocar nada más. */
.is-disabled {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Cartelito chico al lado de un texto/botón en espera (ej. "Agenda Próximamente").
   Pensado para fondos oscuros (header, hero, footer), que es donde vive por ahora. */
.badge-soon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---------- Header (nuevo formato claro) ---------- */
.btn-outline svg { width: 18px; height: 18px; }
.btn-white { background-color: #fff; color: #000; }
.btn-white:hover { background-color: #f3f4f6; }
.link-blue { color: var(--brand-blue); font-weight: 600; font-size: 0.875rem; }
.link-blue:hover { text-decoration: underline; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0B0F19;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo { display: flex; align-items: center; flex-shrink: 0; }

.logo-img {
  height: 60px;
  width: auto;
  display: block;
}

.hero-chip-nav {
  padding-top: 8px;
  margin-bottom: 22px;
}

.hero-logo {
  display: block;
  height: 80px;
  width: 300px;
  margin: 5px 0 0;
}

.chip-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.nav-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(11,15,25,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #D1D5DB;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
}

.nav-chip-verde { border-color: rgba(39,99,165,.6); color: #79A4D2; }

.nav-chip-violeta { border-color: rgba(92,0,85,.6); color: #E3B5DF; }

.nav-chip-turquesa { border-color: rgba(98,207,246,.6); color: #62CFF6; }

.nav-chip-naranja { border-color: rgba(240,199,157,.6); color: #F0C79D; }

.nav-chip-rosa { border-color: rgba(238,156,202,.6); color: #EE9CCA; }

.header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; margin-left: auto; }

.header-actions .link-hide-mobile {
  font-size: 0.9rem;
  font-weight: 500;
  color: #D1D5DB;
  white-space: nowrap;
}
.header-actions .link-hide-mobile:hover { color: #fff; }

.header-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.header-social .icon { width: 20px; height: 20px; }
.header-social:hover { color: #fff; background: rgba(255,255,255,.12); }

.header-actions .btn-primary span { display: inline-block; transition: transform .15s ease; }
.header-actions .btn-primary:hover span { transform: translateX(2px); }

.nav-toggle { display: none; }

/* Menú desplegable del hamburguesa: oculto por defecto en cualquier tamaño,
   solo se muestra en mobile/tablet cuando se le agrega .is-open (ver media query abajo) */
.main-nav.mobile-nav { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  /* El padding-bottom reserva el espacio que antes ocupaba la píldora de cuenta regresiva
     cuando vivía en el flujo normal (ver .countdown-wrap, ahora position:absolute). Sin
     esto, el fondo morado terminaría justo donde termina el texto/la foto, y la píldora
     (centrada exactamente sobre ese borde) quedaría casi entera tapando el contenido en
     vez de quedar mitad adentro / mitad afuera del hero. */
  padding: 70px 0 80px;

  /* Fondo "Freedom Gradient" de la guía de marca (paleta: #5C0055, #EE9CCA, #F0C79D, #62CFF6, #2763A5).
     Es una imagen generada con los colores reales de la guía, pero con el cian comprimido contra
     el borde y llevado rápido al azul oscuro de la paleta: así el texto blanco se lee sin sombra.
     - assets/freedom-gradient.webp         → escritorio (izquierda → derecha)
     - assets/freedom-gradient-mobile.webp  → tablet y celular (arriba → abajo)
     Si la imagen no carga, se ven las capas CSS de respaldo. */
  background-color: #5C0055;
  background-image:
    url('assets/freedom-gradient.webp'),
    linear-gradient(90deg, #33FFFF 0%, #2763A5 11%, #5C0055 50%, #EE9CCA 100%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  padding: 0 24px 20px;
}

.hero-copy {
  /* La imagen ahora está posicionada aparte (position: absolute) y no reserva su propia
     columna en el grid; sin este límite el texto ocuparía todo el ancho de la sección
     y la fila de fecha/ubicación/audiencia chocaría contra la imagen. */
  max-width: 820px;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  color: rgba(255,255,255,.8);
  margin-bottom: 26px;
}

/* El wordmark real (mismo archivo que el logo del header) en vez del texto "TecWeek ED"
   con contorno — referencia pedida explícitamente por el cliente. */
.hero-logo-big {
  display: block;
  height: auto;
  width: clamp(260px, 36vw, 480px);
  margin: 0 0 8px;
}

.hero-title {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.hero-subtitle {
  font-size: 1.18rem;
  color: white;
  max-width: 480px;
  margin-bottom: 10px;
}
.hero-subtitle-sub { margin-bottom: 18px; }

.hero-actions {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* Los dos botones, lado a lado, se reparten el 100% del ancho de la columna de texto
   (antes quedaba un hueco grande a la derecha, herencia de cuando estaba "Preguntas
   frecuentes" acá también). */
.hero-actions .btn {
    flex: 1 1 0;
  max-width: 270px;   /* ajustá este número al ancho que quieras */
  justify-content: center;
}
/* box-shadow en vez de border: así el contorno se puede engrosar sin sumarle tamaño
   al botón (un border sí lo haría, y quedaría más grande que "Inscribirme" al lado,
   que no tiene borde). */
.hero-actions .btn-outline {
  border: none;
  box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.55);
  color: #fff;
}
.hero-actions .btn-outline:hover { background: #fff; color: var(--oscuro); }
.hero-actions .btn-text { color: rgba(255,255,255,.75); }

.hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 556px;
  gap: 16px;
  font-size: 1.3rem;
}
/* Siempre en su propia línea: en el rango ~820-900px alcanzaba a entrar en el mismo
   renglón que fecha/ubicación, y quedaba inconsistente respecto al resto de los anchos. */
.meta-item-break { flex-basis: 100%; }
.meta-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
}
.meta-item small { display: block;
  font-size: 1rem;
  line-height: 1.2;
  color: rgba(255,255,255,.7);
  font-weight: 500; }
/* Excepción: acá la "línea chica" es continuación de la misma frase, no un dato secundario
   (a diferencia de "8 a 18 h" o "La Boca, CABA"), así que va con el mismo estilo que la principal. */
.meta-item small.meta-sub-full { font-size: inherit; color: inherit; font-weight: inherit; }

.meta-item-link {
  text-decoration: none;
  transition: opacity .15s ease;
}
.meta-item-link:hover,
.meta-item-link:focus-visible { opacity: .8; }

.meta-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.35);
}
.meta-icon-violeta { color: var(--violeta); }
.meta-icon-turquesa { color: var(--turquesa); }
.meta-icon-rosa { color: var(--rosa); }

/* Barra de info inferior del hero */
.hero-infobar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: 26px 10px;
  margin-bottom: 40px;
}

.infobar-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,.09);
}
.infobar-item:last-child { border-right: none; }

.infobar-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.infobar-icon-violeta { background: linear-gradient(135deg, #5C0055, #7A0071); }
.infobar-icon-azul { background: linear-gradient(135deg, #2763A5, #1F4F84); }
.infobar-icon-turquesa { background: linear-gradient(135deg, #62CFF6, #3AB8E8); }
.infobar-icon-rosa { background: linear-gradient(135deg, #EE9CCA, #D9629F); }

.infobar-item h4 { font-size: 0.98rem; color: #fff; margin-bottom: 4px; }
.infobar-item p { font-size: 0.85rem; color: rgba(255,255,255,.55); line-height: 1.35; }

/* Media: caja de referencia ~670×794px. La foto de la docente ya viene pre-recortada
   casi exactamente a esta proporción (0.844 vs. 0.8438 del target), así que usamos
   "cover" para que llene el cuadro por completo. */
.hero-media {
  position: absolute;
  right: calc(max(24px, calc((100vw - 1160px) / 2 + 24px)) - 40px);
  bottom: -1px;
  /* El ALTO manda (vw como unidad de escala, no vw de ancho de la caja): así nunca se pasa
     de la altura real del hero, que la definen el logo + los textos, no el ancho de pantalla.
     El ancho sale solo de acá vía aspect-ratio, manteniendo la proporción 670×794. */
   height: clamp(420px, 40vw, 650px);
  aspect-ratio: 670 / 794;
  pointer-events: none;
  filter: drop-shadow(0 18px 36px rgba(20, 0, 50, .35));
}

.hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Scrim fijo: garantiza contraste del texto sin importar qué foto haya debajo */
.hero-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(20, 10, 40, .75) 0%,
    rgba(20, 10, 40, .35) 55%,
    rgba(20, 10, 40, 0) 100%
  );
  pointer-events: none;
}


/* Palabras emparejadas: verbo grande + sustantivo relacionado, ancladas abajo */
.hero-words-pairs {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  text-align: right;
}
.hero-words-pairs li {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}
.hero-words-pairs strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.hero-words-pairs span {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Envoltorio que posiciona la píldora exactamente sobre el borde inferior del hero:
   position:absolute + bottom:0 la ancla al borde, y translateY(50%) la baja la mitad de
   SU PROPIA altura (la que sea, calculada por el navegador) — así queda siempre partida
   50/50 entre la sección morada y la blanca, sin depender de un valor fijo adivinado. */
.countdown-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(50%);
  z-index: 5;
}

/* Cuenta regresiva — referencia: píldora horizontal con degradé de marca, "Faltan" a la
   izquierda separado por una línea vertical, números y etiquetas en fila a la derecha. */
.countdown {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 34px;
  width: min(900px, 94%);
  padding: 20px 46px;
  border-radius: 25px;
  justify-content: center;
  background: linear-gradient(90deg, #1F2259 0%, #5C0055 48%, #E3A988 100%);
  margin: 0 auto;
}

.countdown-kicker {
  margin: 0;
  padding-right: 34px;

  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.countdown-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: nowrap;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 58px;
}

.countdown-number {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.0rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transform-origin: center bottom;
}

.countdown-number.is-tick {
  animation: countdownTick .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes countdownTick {
  0%   { transform: scale(1) translateY(0); text-shadow: none; }
  35%  { transform: scale(1.22) translateY(-3px); text-shadow: 0 0 16px rgba(255,255,255,.85); }
  100% { transform: scale(1) translateY(0); text-shadow: none; }
}

.countdown-label {
  font-size: 0.7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

.countdown-sep {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: rgba(255,255,255,.55);
}

.countdown-note {
  margin: 6px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  text-align: center;
}

.countdown.is-finished .countdown-number { color: #fff; }

/* Mascota C-PAW pegada al margen inferior derecho, parada sobre la franja de colores */
.hero-dog {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200px;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 14px 22px rgba(10,8,20,.5));
  pointer-events: none;
}

.hero-bar { display: flex; }
.hero-bar span { flex: 1; }
.bar-verde { background: var(--verde); }
.bar-violeta { background: var(--violeta); }
.bar-turquesa { background: var(--turquesa); }
.bar-naranja { background: var(--naranja); }
.bar-rosa { background: var(--rosa); }

/* ---------- Secciones genéricas ---------- */
.section { padding: 84px 0; }

.section-label {
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 10px;
}
.section-label-claro { color: #E3B5DF; }
#agora-ia .section-label-claro { color: #fff; }

.section-intro {
  color: var(--texto-suave);
  max-width: 950px;
  margin: 14px auto 0;
  font-size: 1.05rem;
  text-align: center;
}

/* ---------- 4 ejes ---------- */
.ejes { background: var(--claro);
padding-top: 140px}



.ejes-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 36px;
}

.ejes-text h2 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); margin: 0 auto 16px; }
.ejes-text p { color: var(--texto-suave); font-size: 1.05rem; max-width: 950px; margin: 0 auto; text-align: center; }

/* La tira de píldoras es muy ancha y "chata" (ratio ~8.5:1): en pantallas angostas se
   volvería ilegible si se achica sin límite, así que se le pone un ancho mínimo y, si no
   entra, se puede deslizar horizontalmente en vez de encogerse de más. */
.ejes-image-wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ejes-image {
  display: block;
  width: 100%;
  min-width: 480px;
  height: auto;
  margin: 0 auto;
}

/* ---------- Experiencias / tarjetas ---------- */
.experiencias { background: #F3F1EA; }
.experiencias h2 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); margin-bottom: 4px; text-align: center; }

/* ---------- Experiencias — carrusel (slide centrado con vista previa de los vecinos) ---------- */
.exp-carousel {
  position: relative;
  margin-top: 36px;
}

/* El slide ocupa el 100% del área de contenido; el padding lateral deja asomar los vecinos.
   Así el slide activo queda siempre centrado, incluido el primero y el último. */
.exp-track {
  position: relative;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 16px 7% 54px;      /* espacio vertical para que no se corte la sombra */
  scrollbar-width: none;
  /* desvanece los bordes: las tarjetas vecinas se pierden suavemente en vez de cortarse */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.exp-track::-webkit-scrollbar { display: none; }
.exp-track:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; border-radius: 28px; }

.exp-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-height: 380px;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  opacity: .5;
  transform: scale(.95);
  transition: transform .6s ease, opacity .6s ease, box-shadow .6s ease;
}
.exp-slide.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 24px 44px -22px rgba(0,0,0,.28);
}

/* Foto: el contenedor manda el tamaño; la imagen se posiciona absoluta para que su
   tamaño original nunca estire la tarjeta. */
.exp-slide-visual {
  flex: 0 0 44%;
  position: relative;
  overflow: hidden;
}
.exp-slide-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  transform: none;
  transition: transform 8s ease;
}


/* Slides sin foto todavía */
.exp-slide-visual-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--exp-accent-soft);
  background-image: radial-gradient(var(--exp-accent) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.exp-slide-visual-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--exp-accent-soft);
  opacity: .78;
}
.exp-slide-icon {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--exp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 18px 36px -14px var(--exp-accent);
}
.exp-slide-icon svg { width: 44px; height: 44px; }

/* Texto de la tarjeta */
.exp-slide-copy {
  flex: 1;
  min-width: 0;
  padding: 32px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.exp-slide-copy > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.exp-slide.is-active .exp-slide-copy > * { opacity: 1; transform: translateY(0); }
.exp-slide-copy > *:nth-child(1) { transition-delay: .05s; }
.exp-slide-copy > *:nth-child(2) { transition-delay: .15s; }
.exp-slide-copy > *:nth-child(3) { transition-delay: .25s; }
.exp-slide-copy > *:nth-child(4) { transition-delay: .35s; }
.exp-slide-copy > *:nth-child(5) { transition-delay: .45s; }

.exp-slide-index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: .16em;
  color: var(--exp-accent-text);
  margin-bottom: 8px;
}
.exp-slide-title {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1;
  color: var(--texto);
  margin: 0 0 12px;
}
.exp-slide-tagline {
  font-size: 1rem;
  color: var(--texto-suave);
  max-width: 460px;
  margin: 0 0 18px;
}
.exp-slide-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--exp-accent-text);
  margin-bottom: 8px;
}

/* Tarjetas de orador (retrato + nombre + rol), dentro de una categoría como Charlas TEC */
.exp-slide-role {
  font-size: 1rem;
  color: var(--texto-suave);
  max-width: 420px;
  margin: 0;
}
/* Retrato: centrado más arriba que una foto de evento normal, para que la cara
   quede encuadrada sin importar el alto real de cada imagen (667×833, 900×1124...) */
.exp-slide-speaker .exp-slide-photo { object-position: 50% 22%; }
/* Carolina Duek: foto cuadrada de primer plano (400×400) — centrada, no hace falta
   favorecer un borde como en los retratos de cuerpo entero */
.exp-photo-closeup { object-position: 50% 35% !important; }
.exp-slide-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.exp-slide-list li {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--exp-accent-soft);
  color: var(--exp-accent-text);
}

/* Un poco más grandes en Inteligencia Creativa y Expandida */
.exp-turquesa .exp-slide-list li,
.exp-rosa .exp-slide-list li {
  font-size: 0.92rem;
  padding: 7px 14px;
}

/* Controles */
.exp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,.85);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
  z-index: 10;
}
.exp-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 25px rgba(0,0,0,.18); }
.exp-arrow:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.exp-arrow-prev { left: 12px; }
.exp-arrow-next { right: 12px; }

.exp-dots { display: flex; justify-content: center; gap: 12px; margin-top: -14px; }
.exp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #cfcfcf;
  transition: transform .3s ease, background .3s ease;
}
.exp-dot:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }
.exp-dot.is-active { transform: scale(1.5); background: var(--exp-accent); }

/* Puntos de los oradores: más chicos que los de categoría, para que se lean como
   "parte de Charlas TEC" y no como secciones del mismo nivel. */
.exp-dot-sub { width: 7px; height: 7px; }
.exp-dot-sub.is-active { transform: scale(1.6); }

.exp-progress {
  width: 240px;
  height: 4px;
  background: rgba(0,0,0,.12);
  border-radius: 999px;
  overflow: hidden;
  margin: 20px auto 0;
}
.exp-progress-bar {
  display: block;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, var(--brand-blue), var(--turquesa));
  transition: width .5s ease;
}

.experiencias { transition: background .8s ease; }

/* Colores por experiencia (--exp-accent-text es la variante oscura, apta para texto sobre claro) */
.exp-verde    { --exp-accent: var(--verde);    --exp-accent-soft: rgba(39,99,165,.16);   --exp-accent-text: #2763A5; }
.exp-violeta  { --exp-accent: var(--violeta);  --exp-accent-soft: rgba(92,0,85,.16);     --exp-accent-text: #5C0055; }
.exp-turquesa { --exp-accent: var(--turquesa); --exp-accent-soft: rgba(98,207,246,.16);  --exp-accent-text: #0A7DA6; }
.exp-naranja  { --exp-accent: var(--naranja);  --exp-accent-soft: rgba(240,199,157,.16); --exp-accent-text: #A7611A; }
.exp-rosa     { --exp-accent: var(--rosa);     --exp-accent-soft: rgba(238,156,202,.16); --exp-accent-text: #D62588; }

/* ---------- Franjas (Bosque / Bienestar / Streaming) ---------- */
.franja { background: #fff; border-top: 1px solid var(--borde); }
/* Violeta oficial sólido: "El Bosque de las Decisiones" es la sección más oscura de la
   página a propósito. Con este fondo el texto vuelve a blanco (como el resto de las
   franjas oscuras del sitio), en vez del texto oscuro que usa la versión pastel. */
.franja-oscura { background: #5C0055; border-top: none; }

/* Violeta pastel: mismo formato que el resto de las franjas (texto oscuro, imagen al
   lado), pero con un fondo de color en vez de blanco — identifica a "El Bosque de las
   Decisiones" sin necesidad de texto claro (--claro con ~14% de --violeta). */
.franja-violeta { background: #F3F1EA; border-top: none; }

/* Freedom Gradient: mismo fondo del hero (mismos dos archivos, mismo ajuste de legibilidad
   ya resuelto), reutilizado acá porque el layout es igual (texto a la izquierda, imagen a
   la derecha) — así el azul/violeta queda siempre detrás del texto claro. */
.franja-gradiente {
  position: relative;
  border-top: none;
  background-color: #5C0055;
  background-image:
    url('assets/freedom-gradient.webp'),
    linear-gradient(90deg, #33FFFF 0%, #2763A5 11%, #5C0055 50%, #EE9CCA 100%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
@media (max-width: 900px) {
  .franja-gradiente {
    background-image:
      url('assets/freedom-gradient-mobile.webp'),
      linear-gradient(180deg, #33FFFF 0%, #2763A5 9%, #5C0055 60%, #EE9CCA 100%);
  }
}

.franja-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.franja-text { flex: 1 1 380px; }
.franja-text h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 14px; }
.franja-text p { color: var(--texto-suave); max-width: 560px; font-size: 1.02rem; }
.franja-text .claro { color: #fff; }
.franja-text .claro-sub { color: rgba(255,255,255,.7); }

/* overflow:hidden + border-radius en el contenedor (no solo en la <img>): así el redondeo
   se aplica parejo en las 4 esquinas aunque "object-fit: contain" deje una franja del
   fondo visible arriba/abajo o a los costados — antes el radius vivía solo en la imagen y
   alguna esquina quedaba recta según cómo cayera el letterboxing. */
.agora-media { flex: 1 1 420px; max-width: 480px; border-radius: 24px; overflow: hidden; isolation: isolate; transform: translateZ(0); }
/* aspect-ratio fijo + object-fit:cover: así las tres fotos (Streaming, Ágora IA y
   Bosque de las Decisiones) se ven exactamente del mismo tamaño en pantalla, sin
   importar las proporciones reales de cada imagen original. */
/* "cover" (no "contain"): con "contain", si la foto no es exactamente cuadrada, la
   imagen queda más chica que el recuadro y sus propias esquinas (rectas) no llegan a
   tocar el borde redondeado del contenedor — se ve como si el radio no estuviera
   aplicado. "cover" llena el recuadro completo, recortando algo de la imagen según
   object-position, pero garantiza que las 4 esquinas redondeadas se vean siempre. */
.agora-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; display: block; border-radius: 24px; }

/* Mismo radio y mismo overflow:hidden en el contenedor que .agora-media (Streaming y
   Ágora IA), para que las tres fotos de esta fila de secciones tengan el borde redondeado
   idéntico. */
.bosque-media { flex: 1 1 420px; max-width: 480px; border-radius: 24px; overflow: hidden; isolation: isolate; transform: translateZ(0); }
.bosque-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; display: block; border-radius: 24px; }

.franja-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.tag {
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
}

/* CTA dentro de una franja (ej. "Ver transmisión en vivo"): separación respecto al
   párrafo anterior. */
.franja-text .btn { margin-top: 28px; }

/* Placeholder temporal para una franja sin foto todavía (ej. Streaming, hasta tener la
   imagen real). Mismas proporciones que .agora-img/.bosque-img para que el layout no
   salte cuando se reemplace por la foto definitiva. */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1.5px dashed var(--borde);
  background: var(--claro);
  color: var(--texto-suave);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  padding: 20px;
}


/* ---------- Info + FAQ ---------- */
.info-faq { background: var(--claro); border-top: 1px solid var(--borde); }

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 70px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--borde);
}

.info-item .icon { width: 32px; height: 32px; color: var(--violeta); margin-bottom: 12px; }
.info-item h4 { font-size: 1.25rem; margin-bottom: 8px; }
.info-item p { color: var(--texto-suave); font-size: 1.1rem; }

.faq-title { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 30px; }

.accordion { max-width: 760px; }

.accordion-item { border-bottom: 1px solid var(--borde); }

.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: none;
  border: none;
  padding: 20px 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}

.accordion-icon {
  flex-shrink: 0;
  font-size: 1.3rem;
  color: var(--violeta);
  transition: transform .2s ease;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(45deg); }

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}

.accordion-panel p {
  color: var(--texto-suave);
  padding-bottom: 20px;
  max-width: 640px;
}

.accordion-panel a { color: var(--violeta); text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--oscuro);
  color: #fff;
  padding: 64px 0 48px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Columna 1: logos + tagline + dirección */
.footer-col-brand { max-width: 360px; }

.footer-logos {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.footer-logo-tec { height: 26px; width: auto; display: block; }

.footer-logo-divider {
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,.25);
}

/* Ojo: "height: 42" sin unidad es inválido — el navegador lo ignora entero y el SVG se
   renderiza a su tamaño por defecto (enorme). Y fijar el ALTO con ancho automático lo
   deforma: la regla global "img { max-width:100% }" lo aprieta contra la columna del
   footer (360px) y, como el alto queda fijo, el logo se ve angosto. Se fija el ANCHO en
   cambio, que escala manteniendo su proporción real sin estirarse ni achicarse. */
.footer-logo-ministerio { width: 300px; max-width: 100%; height: auto; display: block; }

.footer-tagline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 10px;
}

.footer-address {
  color: rgba(255,255,255,.6);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  max-width: 320px;
}

/* Columnas 2 y 3 */
.footer-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.92rem;
  letter-spacing: .04em;
  color: #fff;
  margin: 0 0 20px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-links a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color .15s ease;
}

.footer-links a:hover { color: #fff; }

.footer-social { display: flex; gap: 12px; }

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: background .15s ease, transform .15s ease;
}

.footer-social-link .icon { width: 20px; height: 20px; }

.footer-social-link:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1100px) {
  .header-actions .link-hide-mobile { display: none; }
  /* Referencia mobile: el header queda solo con el logo y la hamburguesa, sin el botón
     "Inscribirme" — ya está disponible como CTA grande dentro del propio hero. */
  .header-actions .btn-primary { display: none; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .nav-toggle span { width: 100%; height: 2px; background: #fff; }

  .header-inner { position: relative; }

  /* Dropdown anclado debajo del header. Formato adoptado de tecweek.com.ar: el link
     principal (Agenda) como botón píldora con el degradé de marca, los secundarios como
     texto simple, y las redes sociales como fila de íconos al final. */
  .main-nav.mobile-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    background: #0B0F19;
    border: 1px solid rgba(255,255,255,.08);
    border-top: none;
    border-radius: 0 0 14px 14px;
    padding: 16px 20px 18px;
    box-shadow: 0 18px 34px -14px rgba(0,0,0,.5);
  }

  .main-nav.mobile-nav.is-open .mobile-nav-btn {
    text-align: center;
    padding: 14px 20px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
  }
  .main-nav.mobile-nav.is-open .mobile-nav-btn:hover,
  .main-nav.mobile-nav.is-open .mobile-nav-btn:focus-visible { color: #fff; filter: brightness(1.08); }

  .main-nav.mobile-nav.is-open .mobile-nav-link {
    padding: 11px 2px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #D1D5DB;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .main-nav.mobile-nav.is-open .mobile-nav-link:last-of-type { border-bottom: none; }
  .main-nav.mobile-nav.is-open .mobile-nav-link:hover,
  .main-nav.mobile-nav.is-open .mobile-nav-link:focus-visible { color: #fff; }

  .main-nav.mobile-nav.is-open .mobile-nav-social {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .main-nav.mobile-nav.is-open .mobile-nav-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #D1D5DB;
    transition: background .15s ease, color .15s ease;
  }
  .main-nav.mobile-nav.is-open .mobile-nav-social a:hover,
  .main-nav.mobile-nav.is-open .mobile-nav-social a:focus-visible {
    color: #fff;
    background: rgba(255,255,255,.12);
  }
  .main-nav.mobile-nav.is-open .mobile-nav-social .icon { width: 20px; height: 20px; }

  .site-header { position: sticky; }
}

/* Escritorio: el texto arranca en x = máx(24px, (ancho − 1160px)/2 + 24px). La imagen se agranda
   lo justo (anclada a la derecha) para que el azul quede siempre 40px a la izquierda del texto (con margen de seguridad) y el
   cian sólo ocupe el margen libre. En pantallas anchas es 100% y se ve el degradé completo. */
@media (min-width: 901px) {
  .hero, .franja-gradiente {
    background-size: max(100%, calc(min((100vw + 1160px) / 2 + 16px, 100vw + 16px) / 0.89)) 100%, 100% 100%;
    background-position: 100% 0, 0 0;
  }
}

/* Tablet y celular: el texto ocupa todo el ancho, así que el degradé se usa en vertical
   (cian arriba detrás de la foto, azul y violeta detrás del texto, rosa/durazno abajo). */
@media (max-width: 900px) {
  .hero {
    background-image:
      url('assets/freedom-gradient-mobile.webp'),
      linear-gradient(180deg, #33FFFF 0%, #2763A5 9%, #5C0055 60%, #EE9CCA 100%);
  }
}

@media (max-width: 900px) {
  .mapa-grid { grid-template-columns: 1fr; }
  .streaming-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  /* El solapamiento hacia la sección de abajo se achica en mobile: con -80px tapaba
     el título "Un evento único..." de la siguiente sección. La píldora se estira
     a todo el ancho pero sigue redondeada (border-radius en % para que no se vea
     como un simple rectángulo con puntas). */
  .countdown { width: 100%; max-width: 100%; border-radius: 28px; }
  /* Referencia mobile: sin la foto — va directo de los chips al logo grande. */
  .hero-media { display: none; }
  .hero-infobar { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .infobar-item { border-right: none; padding: 0 14px; }
  .infobar-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.09); }

  .exp-slide-copy { padding: 18px 28px; }
  .exp-slide-icon { width: 56px; height: 56px; }
  .exp-slide-icon svg { width: 26px; height: 26px; }
  .exp-arrow { width: 42px; height: 42px; }
  .exp-arrow-prev { left: 10px; }
  .exp-arrow-next { right: 10px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer-col-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 600px) {
  body { background-attachment: scroll; }
  /* Mismo motivo que el padding-bottom base del .hero: reserva espacio para la mitad
     superior de la píldora, que acá es más chica (menos padding, números más chicos). */
  .hero { padding-top: 50px; padding-bottom: 46px; }
  /* En mobile se prioriza que la tira entre completa y se achique con la pantalla,
     en vez de forzar el ancho mínimo de escritorio (480px) y obligar a deslizar. Con
     esto ya no hace falta el degradado de "seguí deslizando" del borde derecho. */
  /* 85% en vez de 100%: deja un margen a los costados para que no se vea pegada al
     borde de la pantalla ni tan "grande" en relación al resto del contenido mobile. */
  .ejes-image { min-width: 0; width: 95%; margin: 0 auto; }
  /* Logo del header un poco más grande en mobile (antes heredaba el tamaño de escritorio,
     60px, hasta los 420px donde caía abrupto a 20px). */
  .logo-img { height: 42px; }
  /* Logo grande del hero, un poco más arriba (menos aire por encima). */
  .hero-logo-big { margin-top: -10px; }
  /* Referencia mobile: los botones siguen lado a lado, no apilados. */
  .hero-actions .btn { justify-content: center; }
  /* Referencia mobile: fecha y ubicación lado a lado (grilla fija), no en flex-wrap libre
     — así el texto largo de la dirección envuelve en su propia columna angosta en vez
     de necesitar todo el ancho disponible para cada ítem. Con margin-bottom para separarla
     de la píldora de cuenta regresiva, que en mobile queda pegada justo debajo. */
  .hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
  .meta-item { align-items: flex-start; text-align: left; }
  .pit-card { flex-direction: column; align-items: flex-start; padding: 0; text-align: left; gap: 28px; }
  .pit-stat-number { font-size: 2.6rem; }
  .pit-media { align-self: center; }
  .pit-photo { width: 160px; height: 160px; }
  .countdown { gap: 12px; padding: 12px 16px; }
  .countdown-kicker { padding-right: 12px; font-size: 0.8rem; }
  .countdown-grid { gap: 9px; }
  .countdown-item { min-width: 38px; }
  .countdown-number { font-size: 1.35rem; }
  .countdown-sep { font-size: 1.1rem; }
  .countdown-note { font-size: 0.82rem; }
  .hero-dog { width: 120px; }
  .hero-words-pairs { padding: 18px 14px; gap: 8px; }
  .hero-words-pairs strong { font-size: 0.9rem; }
  .hero-words-pairs span { font-size: 0.68rem; }
  .hero-infobar { grid-template-columns: 1fr; padding: 10px 16px; }
  .infobar-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.09); padding: 20px 0; }
  .infobar-item:last-child { border-bottom: none; }

  /* Tarjeta en columna: foto arriba con alto fijo, texto abajo; la altura la da el contenido */
  .exp-slide {
    flex-direction: column;
    min-height: 0;
  }
  .exp-slide-visual { flex: 0 0 190px; }
  .exp-slide-copy {
    text-align: center;
    align-items: center;
    padding: 24px 22px 30px;
  }
  .exp-slide-tagline { max-width: none; }
  .exp-slide-list { justify-content: center; }
  .exp-track { padding-left: 6%; padding-right: 6%; }
  /* Flechas alineadas al centro de la foto, no del texto */
  .exp-arrow { width: 38px; height: 38px; top: 111px; }
  .exp-arrow svg { width: 16px; height: 16px; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .footer-col-brand { grid-column: auto; max-width: none; }
  .footer-logos { justify-content: center; }
  .footer-address { max-width: none; margin: 0 auto; }
  .footer-links { align-items: center; }
  .footer-social { justify-content: center; }
}

/* Ajustes finos para celulares chicos (320–420px) */
@media (max-width: 420px) {
  .container { padding: 0 16px; }
  /* Celulares chicos: un poco más chica todavía que el 85% base de 600px. */
  .ejes-image { width: 85%; }
  .header-inner { gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .logo-img { height: 30px; }
  /* A 320px el botón "Inscribirme" del header no entraba (se pasaba 32px del borde,
     oculto por el overflow-x:hidden del body pero cortado visualmente igual). */
  .header-actions { gap: 10px; }
  .header-actions .btn-primary { padding: 9px 14px; font-size: 0.82rem; }
  .hero { padding-bottom: 32px; }
  .hero-title { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .hero-subtitle { font-size: 0.98rem; }
  .btn-lg { padding: 13px 22px; font-size: 0.95rem; }
  .section { padding: 56px 0; }
  .chip-nav { gap: 8px; }
  .nav-chip { padding: 6px 12px; font-size: 0.78rem; }
  .countdown { gap: 8px; padding: 10px 12px; }
  /* gap más chico + label con menos letter-spacing: a 320px, "SEGUNDOS" + los separadores
     no entraban en una sola línea con el gap/padding original (se cortaban 18px) */
  .countdown-kicker { padding-right: 9px; font-size: 0.68rem; }
  .countdown-grid { gap: 5px; }
  .countdown-item { min-width: 34px; }
  .countdown-number { font-size: 1.15rem; }
  .countdown-label { font-size: 0.56rem; letter-spacing: .02em; }
  .countdown-note { font-size: 0.78rem; }
  .card { padding: 24px 20px 26px; }
  .exp-slide-copy { padding: 16px 18px 22px; }
  .exp-slide-title { font-size: clamp(1.15rem, 6vw, 1.4rem); }
  .exp-slide-tagline { font-size: 0.82rem; }
  .exp-slide-icon { width: 52px; height: 52px; }
  .exp-slide-icon svg { width: 24px; height: 24px; }
}

/* Accesibilidad: foco visible. Usa el azul de marca (no una de las 5 categorías) para que
   se vea igual de bien tanto en fondos claros como oscuros (header, hero). */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* Accesibilidad: si el sistema pide "reducir movimiento" se respeta, pero sin dejar la página "muerta".
   Se eliminan los movimientos (escalas, desplazamientos, zoom, rebotes y animaciones continuas)
   y se conservan los fundidos suaves de opacidad y color, que no generan mareo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }

  .exp-track { scroll-behavior: auto; }
  .exp-slide { transform: none; transition: opacity .5s ease, box-shadow .5s ease; }
  .exp-slide-copy > * { transform: none; transition: opacity .5s ease; }
  .exp-slide-photo,
  .exp-slide.is-active .exp-slide-photo { transform: none; transition: none; }
  .experiencias { transition: background-color .6s ease; }
}


.faq-map-link svg {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  margin-right: 0.25em;
}

/* Links a Google Maps en "¿Dónde?" (info) y en el footer */
.map-link { text-decoration: underline; text-underline-offset: 3px; }
.info-item .map-link { color: var(--violeta); }
.footer-address .map-link { color: rgba(255,255,255,.85); transition: color .15s ease; }
.footer-address .map-link:hover { color: #fff; }