/* ==========================================================================
   Maratón AVEIT 2026 — overrides de marca
   Se carga DESPUÉS de main.css y responsive.css.
   main.css queda intacto para poder diffear contra la edición 2025.
   ========================================================================== */

/* Paleta AVEIT 2026 (muestreada del kit de marca oficial):
   Azul:        #2064AE
   Azul claro:  #88ABDB
   Coral:       #EC664D
   Rosa:        #F9CACC
*/
:root {
  --azul: #2064AE;
  --azul-oscuro: #17497f;
  --azul-claro: #88ABDB;
  --coral: #EC664D;
  --rosa: #F9CACC;
  --gris-fondo: #f6f8fb;
  --texto: #1f2d3d;
}

body {
  background: #fff;
  color: var(--texto);
}

h1, h2, h3, h4, h5,
p,
a {
  color: var(--texto);
}

a:hover {
  color: var(--coral);
}


/* ==========================================================================
   Navbar clara
   ========================================================================== */
.navbar.scrolling-navbar {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 12px rgba(32, 100, 174, 0.08);
}

.top-nav-collapse {
  background: #fff !important;
  box-shadow: 0 3px 14px rgba(32, 100, 174, 0.14);
}

.navbar-brand img {
  width: auto;
  height: 62px;
  object-fit: contain;
}

/* main.css pinta los links con un gradiente recortado sobre el texto
   (-webkit-text-fill-color: transparent). Se vuelve a color plano. */
.navbar-expand-lg .navbar-nav .nav-link,
.top-nav-collapse .navbar-nav .nav-link {
  color: var(--azul) !important;
  -webkit-text-fill-color: currentColor;
  background-image: none !important;
  font-weight: 700;
}

.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link:focus,
.navbar-expand-lg .navbar-nav li.active > a.nav-link,
.navbar li.active a.nav-link,
.top-nav-collapse .navbar-nav .nav-link:hover,
.top-nav-collapse .navbar-nav li.active a.nav-link {
  color: var(--coral) !important;
  -webkit-text-fill-color: currentColor;
  background-image: none !important;
}

.navbar-expand-lg .navbar-nav li > a:before {
  background: var(--coral);
}

.navbar-expand-lg .navbar-toggler {
  border: 1px solid var(--azul);
  background-image: none;
  -webkit-text-fill-color: var(--azul);
  color: var(--azul);
}

/* Botón "Inscribite" dentro de la navbar */
.navbar .nav-item-cta {
  margin-left: 12px;
  display: flex;
  align-items: center;
}

.navbar .nav-item-cta .btn {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  padding: 8px 24px;
  font-size: 13px;
}


/* ==========================================================================
   Hero claro — patrón del kit + logotipo
   ========================================================================== */
.hero-area-bg {
  background: #fff url(../img/background/patron.png) repeat;
  background-size: 620px auto;
}

#hero-area {
  color: var(--texto);
}

/* main.css deja el overlay en rgba(0,0,0,.7): acá va un velo blanco
   para que el patrón quede de fondo suave y el texto respire. */
#hero-area .overlay {
  background: rgba(255, 255, 255, 0.88);
}

#hero-area .contents {
  padding: 150px 20px 220px;
  position: relative;
  z-index: 2;
}

/* Franja de corredores al pie del hero.
   corredores.png trae un corredor suelto arriba a la derecha y una fila de cuatro abajo.
   Escalando al 210% de la altura de la franja y anclando abajo se recorta el de arriba
   y queda solo la fila, que es la que funciona como cenefa. */
#hero-area:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: url(../img/background/corredores.png) no-repeat bottom center;
  background-size: auto 210%;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

.hero-logo {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto 26px;
}

#hero-area .contents .head-title {
  color: var(--azul);
}

#hero-area .contents .banner-desc {
  color: var(--azul);
  font-size: 26px;
  line-height: 34px;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  padding: 0 20px;
  margin-bottom: 26px;
}

#hero-area .contents .banner-info {
  color: var(--texto);
}

/* Ubicación + fecha */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 34px;
  margin-bottom: 26px;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--texto);
}

.hero-meta i {
  color: var(--coral);
  font-size: 26px;
  margin-right: 10px;
}

/* Chips de distancia */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}

.hero-chip {
  background: var(--azul-claro);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  padding: 13px 30px;
  border-radius: 2rem;
}

/* Línea "Organizan" del hero */
.hero-organizan {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 30px;
}

.hero-organizan strong {
  color: var(--coral);
  font-weight: 700;
}


/* ==========================================================================
   Botones
   ========================================================================== */
.btn-common {
  background-image: none;
  background-color: var(--coral);
  box-shadow: 0 8px 16px rgba(236, 102, 77, 0.28);
}

.btn-common:hover,
.btn-common:focus {
  background-image: none;
  background-color: var(--azul);
  color: #fff;
  box-shadow: 0 8px 16px rgba(32, 100, 174, 0.28);
}

.btn-outline-azul {
  background: transparent;
  background-image: none;
  border: 2px solid var(--azul);
  color: var(--azul);
}

.btn-outline-azul:hover,
.btn-outline-azul:focus {
  background: var(--azul);
  color: #fff;
}

/* Botón principal de inscripción — el CTA más grande de la página.
   Lleva un anillo que late para que enganche el ojo sin ser un cartel parpadeante. */
.btn-inscripcion {
  font-size: 21px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 21px 58px;
  border-radius: 3rem;
  background-color: var(--coral);
  background-image: none;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 14px 30px rgba(236, 102, 77, 0.4);
  position: relative;
  z-index: 1;
}

.btn-inscripcion i {
  margin-right: 10px;
  font-size: 20px;
  vertical-align: -1px;
}

/* El anillo se dibuja por fuera del botón y no intercepta clicks. */
.btn-inscripcion:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  border: 2px solid var(--coral);
  pointer-events: none;
  animation: latido-inscripcion 2.2s ease-out infinite;
}

.btn-inscripcion:hover,
.btn-inscripcion:focus {
  background-color: var(--azul);
  background-image: none;
  color: #fff !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 36px rgba(32, 100, 174, 0.42);
}

.btn-inscripcion:hover:after {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes latido-inscripcion {
  0%   { transform: scale(1);    opacity: 0.75; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* Aclaración chiquita debajo del CTA */
.banner-btn-hint {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--texto);
  opacity: 0.75;
}

/* Pill contorneado, al estilo de las tarjetas de modalidad */
.btn-outline-pill {
  background: transparent;
  background-image: none;
  border: 2px solid var(--azul);
  color: var(--azul);
  border-radius: 3rem;
  font-weight: 700;
  padding: 12px 34px;
}

.btn-outline-pill:hover,
.btn-outline-pill:focus {
  background: var(--azul);
  background-image: none;
  color: #fff;
  box-shadow: 0 8px 18px rgba(32, 100, 174, 0.28);
}

/* Pill blanco, para usar arriba de fondos azules */
.btn-blanco-pill {
  background: #fff;
  background-image: none;
  color: var(--azul) !important;
  -webkit-text-fill-color: var(--azul);
  border-radius: 3rem;
  font-weight: 700;
  padding: 15px 38px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-blanco-pill:hover,
.btn-blanco-pill:focus {
  background: var(--rosa);
  background-image: none;
  color: var(--azul) !important;
  transform: translateY(-2px);
}

/* WhatsApp */
.btn-whatsapp {
  background-color: #25D366;
  background-image: none;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 8px 16px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
  background-color: #1da851;
  background-image: none;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.38);
}


/* ==========================================================================
   Cuenta regresiva
   ========================================================================== */
#count {
  background: var(--gris-fondo);
}

#count .count-wrapper {
  background: var(--azul);
  box-shadow: 0 10px 28px rgba(32, 100, 174, 0.22);
}

.count-caption {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.9;
  clear: both;
}

/* CTA dentro de la cuenta regresiva: el reloj y el botón de inscripción
   van juntos, como en la referencia. Las .time-entry son floats, así que
   necesita clear para no meterse al lado del contador. */
.count-cta {
  clear: both;
  padding-top: 24px;
}


/* ==========================================================================
   Barra de información
   ========================================================================== */
#information-bar {
  background: var(--azul);
}

#information-bar .inforation-wrapper {
  box-shadow: 0 8px 20px rgba(32, 100, 174, 0.25);
}

#information-bar ul li i {
  background-color: transparent;
  -webkit-text-fill-color: var(--coral);
  color: var(--coral);
}

#information-bar ul li span b {
  color: var(--azul);
}


/* ==========================================================================
   Títulos de sección
   ========================================================================== */
.section-title,
.section-title:before,
.section-title:after,
.section-title-header p,
.section-subcontent,
.inner-title,
.subtitle {
  color: var(--azul);
}

.section-title-header .subtitle {
  color: var(--coral);
}

.section-sub:before {
  background-color: var(--coral);
}


/* ==========================================================================
   Organizan — AVEIT + SAE + UTN-FRC
   ========================================================================== */
.organizan-bar {
  background: #fff;
  border: 1px solid rgba(32, 100, 174, 0.15);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(32, 100, 174, 0.08);
  padding: 32px 20px 24px;
  margin-bottom: 45px;
}

.organizan-bar .organizan-title {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 22px;
}

.organizan-item {
  text-align: center;
  padding: 12px 14px;
}

.organizan-item h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 8px;
}

.organizan-item p {
  font-size: 14px;
  line-height: 22px;
  color: var(--texto);
  margin-bottom: 8px;
}

.organizan-item .organizan-social {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--coral);
}

.organizan-item .organizan-social i {
  margin-right: 6px;
  font-size: 16px;
}

.organizan-item .organizan-social:hover {
  color: var(--azul);
}


/* ==========================================================================
   Resultados
   ========================================================================== */
.results-section {
  background: linear-gradient(135deg, #f6f8fb 0%, #e8eef7 100%);
}

.filter-label,
.table-title {
  color: var(--azul);
}

.filter-select {
  border: 2px solid var(--azul);
}

.filter-select:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(236, 102, 77, 0.2);
}

.table-title {
  border-bottom: 2px solid var(--coral);
}

.results-table th {
  background-color: var(--azul);
}

.results-notice {
  background: #eef4fc;
  border-left: 4px solid var(--azul);
}

.results-subtitle {
  text-align: center;
  font-size: 16px;
  color: var(--texto);
  margin-bottom: 28px;
}


/* ==========================================================================
   Sponsors
   ========================================================================== */
/* main.css:1045 define #sponsors con background: url(../img/background/largada3.jpg),
   una imagen que no existe (404 heredado de la edición 2025). Al ser un selector de ID
   le gana a .sponsor-section, así que hay que igualar la especificidad para anularlo. */
#sponsors.sponsor-section {
  background: var(--gris-fondo);
  background-attachment: scroll;
}

#sponsors .section-title,
#sponsors .section-title-header .section-title {
  color: var(--azul);
}

#sponsors .section-title-header p,
#sponsors .section-subtitle {
  color: var(--texto);
}

#sponsorCarousel .carousel-control-prev,
#sponsorCarousel .carousel-control-next {
  background: rgba(32, 100, 174, 0.8);
}

#sponsorCarousel .carousel-indicators li {
  background-color: rgba(32, 100, 174, 0.5);
}

/* Estado vacío: se muestra mientras no haya sponsors cargados en carousel.js */
.sponsors-empty {
  border: 2px dashed var(--azul-claro);
  border-radius: 12px;
  background: #fff;
  padding: 45px 25px;
  text-align: center;
  margin: 10px 0 20px;
}

.sponsors-empty i {
  display: block;
  font-size: 40px;
  color: var(--azul-claro);
  margin-bottom: 14px;
}

.sponsors-empty p {
  font-size: 16px;
  color: var(--texto);
  margin: 0;
}


/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  background: var(--azul);
}

footer .footer-logo img {
  max-width: 190px;
  height: auto;
}

.social-icons-footer a {
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.social-icons-footer a:hover {
  background: #fff;
}

.social-icons-footer .instagram a:hover {
  border-color: #fff;
  color: var(--coral);
}

.social-icons-footer .twitter a:hover,
.social-icons-footer .linkedin a:hover {
  border-color: #fff;
  color: var(--azul);
}

.site-info p,
.site-info a {
  color: rgba(255, 255, 255, 0.75);
}

.back-to-top {
  background: var(--coral);
}


/* ==========================================================================
   Slots de logo (organizadores y apoyo institucional)
   Si el archivo todavía no existe, el onerror del <img> le pone .is-empty al
   contenedor y en lugar del ícono roto queda un recuadro punteado con el nombre.
   ========================================================================== */
.logo-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 84px;
  padding: 8px 14px;
}

.logo-slot img {
  max-width: 100%;
  max-height: 68px;
  height: auto;
  object-fit: contain;
}

.logo-slot.is-empty img {
  display: none;
}

.logo-slot.is-empty {
  border: 2px dashed var(--azul-claro);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
}

.logo-slot.is-empty:after {
  content: attr(data-label);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul-claro);
  text-align: center;
}

.logo-slot-sm {
  min-width: 120px;
  min-height: 66px;
  margin-bottom: 10px;
}

.logo-slot-sm img {
  max-height: 56px;
}

.hero-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 6px;
}


/* ==========================================================================
   Títulos de sección — tratamiento display
   main.css envuelve cada .section-title entre paréntesis con :before/:after.
   Para 2026 se sacan y el título va grande, en mayúsculas y bien pesado.
   ========================================================================== */
.section-title:before,
.section-title:after {
  content: none;
}

/* Los títulos van en "sentence case", como los de la maratón del Allende que
   quedó de referencia: lo único que va enteramente en mayúsculas es el nombre
   del evento (MARATÓN UTN FRC AVEIT), que así resalta solo. Nada de
   text-transform acá — el nombre ya viene en mayúsculas desde el HTML. */
.section-title {
  font-size: 38px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--azul);
  margin-bottom: 16px;
}

.section-title-display {
  font-size: 48px;
}

.section-subtitle {
  font-size: 17px;
  line-height: 27px;
  font-weight: 600;
  color: var(--azul);
  max-width: 720px;
  margin: 0 auto 34px;
}


/* ==========================================================================
   Modalidades — tarjetas 10K / 5K / 2K sobre banda azul
   ========================================================================== */
.modalidades-section {
  background: var(--azul);
}

.modalidades-section .section-title,
.modalidades-section .section-subtitle,
.modalidades-section .section-title-header p {
  color: #fff;
}

.modalidad-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  padding: 38px 28px 34px;
  margin-bottom: 30px;
  text-align: center;
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
}

.modalidad-km {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 58px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.modalidad-km-coral { color: var(--coral); }
.modalidad-km-azul  { color: var(--azul); }
.modalidad-km-claro { color: var(--azul-claro); }

.modalidad-tipo {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--azul);
  margin-bottom: 16px;
}

.modalidad-desc {
  font-size: 15px;
  line-height: 24px;
  color: var(--texto);
  margin-bottom: 24px;
}

.modalidad-specs-title {
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--azul);
  margin-bottom: 12px;
}

.modalidad-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  /* empuja el botón al pie de la tarjeta para que las tres queden alineadas */
  flex-grow: 1;
}

.modalidad-specs li {
  font-size: 15px;
  line-height: 23px;
  color: var(--texto);
  margin-bottom: 8px;
}

.modalidad-specs li:before {
  content: '•';
  color: var(--coral);
  font-weight: 700;
  margin-right: 7px;
}

/* Resalta lo que diferencia una modalidad de otra (premiación / sin premiación). */
.modalidad-specs strong {
  color: var(--azul);
  font-weight: 800;
}

.modalidad-card .btn-outline-pill {
  align-self: center;
}


/* ==========================================================================
   Historia
   ========================================================================== */
.historia-section {
  background: #fff;
}

.historia-section .about-text p {
  font-size: 16px;
  line-height: 28px;
  color: var(--texto);
  margin-bottom: 18px;
}


/* ==========================================================================
   Triple impacto
   ========================================================================== */
.impacto-section {
  background: var(--gris-fondo);
}

.impacto-card {
  background: #fff;
  border-radius: 16px;
  border-top: 5px solid var(--azul-claro);
  box-shadow: 0 10px 26px rgba(32, 100, 174, 0.1);
  padding: 34px 26px 30px;
  margin-bottom: 30px;
  text-align: center;
  height: calc(100% - 30px);
}

.impacto-card:nth-child(1) { border-top-color: var(--azul-claro); }

.impacto-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--rosa);
  display: flex;
  align-items: center;
  justify-content: center;
}

.impacto-icon i {
  font-size: 32px;
  color: var(--coral);
}

.impacto-card h4 {
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--azul);
  margin-bottom: 14px;
}

.impacto-card p {
  font-size: 15px;
  line-height: 25px;
  color: var(--texto);
  margin-bottom: 0;
}

/* La tarjeta social es la novedad de esta edición: se marca con el coral. */
.impacto-card-destacada {
  border-top-color: var(--coral);
}

.impacto-tag {
  display: inline-block;
  margin-top: 18px;
  padding: 9px 20px;
  border-radius: 2rem;
  background: var(--coral);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ==========================================================================
   Colecta solidaria — banda a dos columnas (texto + foto)
   ========================================================================== */
.colecta-section {
  background: var(--azul);
  padding: 70px 0;
  overflow: hidden;
}

.colecta-kicker {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rosa);
  margin-bottom: 10px;
}

.colecta-section .colecta-title {
  color: #fff;
  text-align: left;
  font-size: 34px;
  margin-bottom: 20px;
}

.colecta-texto p {
  font-size: 16px;
  line-height: 27px;
  color: #fff;
  margin-bottom: 16px;
}

.colecta-texto strong {
  color: var(--rosa);
}

.colecta-texto .btn {
  margin-top: 12px;
}

.colecta-img img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}


/* ==========================================================================
   Galería + reel
   ========================================================================== */
.galeria-section {
  background: #fff;
}

/* main.css:1415 fija .carousel-inner en 620px de alto y :1410 estira cualquier
   imagen de adentro al 100%. Venía de un "carrousel de imágenes" que esta página
   ya no tiene, pero se le aplica igual a estos dos carruseles: sin esto la galería
   queda con fotos deformadas y un hueco enorme abajo. */
.galeria-carousel .carousel-inner,
.sponsor-carousel .carousel-inner {
  height: auto;
}

.galeria-carousel .carousel-inner img,
.sponsor-carousel .carousel-inner img {
  max-width: 100%;
}

.galeria-item {
  margin: 0;
  padding: 6px;
}

/* Va calificado con .galeria-carousel para ganarle a .carousel-inner img */
.galeria-carousel .galeria-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(32, 100, 174, 0.14);
  transition: transform 0.25s ease;
}

.galeria-carousel .galeria-img:hover {
  transform: scale(1.02);
}

/* Los controles de Bootstrap son blancos y se pierden sobre las fotos claras. */
.galeria-carousel .carousel-control-prev,
.galeria-carousel .carousel-control-next {
  width: 46px;
  height: 46px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--azul);
  opacity: 0.9;
}

.galeria-carousel .carousel-control-prev { left: -14px; }
.galeria-carousel .carousel-control-next { right: -14px; }

.galeria-carousel .carousel-control-prev:hover,
.galeria-carousel .carousel-control-next:hover {
  background: var(--coral);
  opacity: 1;
}

.galeria-carousel .carousel-indicators {
  position: static;
  margin: 22px 0 0;
}

.galeria-carousel .carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(32, 100, 174, 0.35);
  border: none;
}

.galeria-carousel .carousel-indicators li.active {
  background-color: var(--coral);
}

.galeria-empty {
  border: 2px dashed var(--azul-claro);
  border-radius: 12px;
  background: var(--gris-fondo);
  padding: 45px 25px;
  text-align: center;
}

.galeria-empty i {
  display: block;
  font-size: 40px;
  color: var(--azul-claro);
  margin-bottom: 14px;
}

.galeria-empty p {
  font-size: 16px;
  color: var(--texto);
  margin: 0;
}

/* Sentence case, para que no choque con "Fotos de años pasados" justo arriba.
   Las mayúsculas quedan para los rótulos chicos y los títulos de tarjeta. */
.reel-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--azul);
  margin-bottom: 22px;
}

/* El embed de Instagram se inyecta como iframe y viene con márgenes propios. */
.reel-wrapper {
  display: flex;
  justify-content: center;
}

.reel-wrapper iframe,
.reel-wrapper .instagram-media {
  margin: 0 auto !important;
}


/* ==========================================================================
   Inscripción
   ========================================================================== */
.inscripcion-section {
  background: var(--gris-fondo);
  text-align: center;
}


/* ==========================================================================
   Documentación
   ========================================================================== */
.documentacion-section {
  background: #fff;
}

/* Bloque destacado del apto médico */
.doc-destacada {
  background: var(--azul);
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(32, 100, 174, 0.28);
  padding: 46px 38px 44px;
  margin-bottom: 46px;
  text-align: center;
}

.doc-destacada-title {
  font-size: 34px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 22px;
}

.doc-destacada p {
  font-size: 16px;
  line-height: 27px;
  color: #fff;
  max-width: 660px;
  margin: 0 auto 16px;
}

.doc-destacada p:last-of-type {
  margin-bottom: 28px;
}

/* Palabra resaltada dentro de los bloques azules */
.resalte {
  color: var(--rosa);
}

/* --- Acordeón "la documentación, paso a paso" --- */
.doc-pasos-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--azul);
  text-align: center;
  margin-bottom: 26px;
}

.doc-paso {
  background: #fff;
  border: 1px solid rgba(32, 100, 174, 0.16);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(32, 100, 174, 0.07);
  margin-bottom: 14px;
  overflow: hidden;
}

.doc-paso-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  color: var(--azul);
  text-decoration: none;
}

.doc-paso-head:hover,
.doc-paso-head:focus {
  background: var(--gris-fondo);
  color: var(--azul);
  text-decoration: none;
}

.doc-paso-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-paso-titulo {
  flex-grow: 1;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--azul);
}

.doc-paso-chevron {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--coral);
  transition: transform 0.25s ease;
}

/* Bootstrap le saca .collapsed al head cuando el panel está abierto. */
.doc-paso-head:not(.collapsed) .doc-paso-chevron {
  transform: rotate(180deg);
}

.doc-paso-head:not(.collapsed) .doc-paso-num {
  background: var(--coral);
}

.doc-paso-body {
  padding: 4px 24px 26px 78px;
}

.doc-paso-body p {
  font-size: 15px;
  line-height: 25px;
  color: var(--texto);
  margin-bottom: 18px;
}

.btn-doc {
  font-size: 13px;
  padding: 12px 26px;
}

.doc-nota {
  margin-top: 18px;
  font-size: 15px;
  color: var(--texto);
}

.doc-nota a {
  color: var(--coral);
  font-weight: 700;
}


/* ==========================================================================
   Apoyo institucional
   ========================================================================== */
.apoyo-section {
  background: #fff;
  padding: 46px 0 54px;
  border-top: 1px solid rgba(32, 100, 174, 0.12);
}

.apoyo-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-claro);
  margin-bottom: 26px;
}

.apoyo-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 40px;
}

.logo-slot-apoyo {
  min-height: 92px;
}

.logo-slot-apoyo img {
  max-height: 76px;
}

/* La tira de la Municipalidad es muy apaisada: necesita más ancho que alto. */
.logo-slot-ancho {
  min-width: 300px;
  max-width: 560px;
  width: 100%;
}

.logo-slot-ancho img {
  width: 100%;
  max-height: none;
}


/* ==========================================================================
   Enlaces a Google Maps
   ========================================================================== */
.map-link {
  color: inherit;
  border-bottom: 1px dotted currentColor;
}

.map-link:hover,
.map-link:focus {
  color: var(--coral);
}

.map-link i {
  font-size: 12px;
  margin-left: 4px;
}

/* La barra de información va sobre .inforation-wrapper, que es blanco:
   el enlace tiene que ir en azul, no en blanco. */
#information-bar .map-link {
  color: var(--azul);
  font-weight: 600;
  border-bottom-color: rgba(32, 100, 174, 0.4);
}

#information-bar .map-link:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

#information-bar ul li a:hover i {
  color: var(--azul);
  -webkit-text-fill-color: var(--azul);
}


/* ==========================================================================
   Footer — ícono de WhatsApp
   ========================================================================== */
.social-icons-footer .whatsapp a:hover {
  border-color: #fff;
  color: #25D366;
}


/* ==========================================================================
   Accesibilidad — respetar "reducir movimiento" del sistema
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-inscripcion:after {
    animation: none;
    opacity: 0;
  }

  .btn-inscripcion:hover,
  .btn-whatsapp:hover,
  .btn-blanco-pill:hover,
  .galeria-carousel .galeria-img:hover {
    transform: none;
  }
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  /* Con 8 items + el CTA el menú se desborda: se achica el respiro lateral. */
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 13px;
  }
}

@media (max-width: 991px) {
  /* main.css:731 fuerza .bg-inverse a #0000008e !important (el navbar oscuro de 2025).
     El diseño 2026 es claro, así que hay que ganarle con !important. */
  .bg-inverse {
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(32, 100, 174, 0.12);
  }

  .navbar.scrolling-navbar,
  .navbar-collapse {
    background: #fff;
  }

  /* main.css:741 deja los links en blanco para el navbar oscuro */
  .navbar-expand-lg .navbar-nav .nav-link {
    color: var(--azul) !important;
    padding: 0 15px;
  }

  /* El guioncito del item activo se posiciona sobre el texto cuando el menú
     está apilado y se lee como un tachado. Solo tiene sentido en horizontal. */
  .navbar-expand-lg .navbar-nav li > a:before {
    display: none;
  }

  .navbar .nav-item-cta {
    margin: 10px 0 14px 15px;
  }
}

@media (max-width: 767px) {
  #hero-area .contents {
    padding: 120px 15px 150px;
  }

  #hero-area:after {
    height: 110px;
  }

  .hero-logo {
    max-width: 290px;
  }

  #hero-area .contents .banner-desc {
    font-size: 20px;
    line-height: 28px;
    padding: 0;
  }

  .hero-meta {
    gap: 10px 18px;
  }

  .hero-meta span {
    font-size: 15px;
  }

  .hero-chip {
    font-size: 15px;
    padding: 10px 22px;
  }

  .navbar-brand img {
    height: 52px;
  }

  /* Las 4 entradas del contador no entran al 24% en móvil */
  .time-entry {
    width: 50%;
    margin: 10px 0;
  }

  .time-entry span {
    font-size: 42px;
  }

  .time-entry b {
    display: none;
  }

  /* --- Secciones nuevas en móvil --- */
  .section-title {
    font-size: 28px;
  }

  .section-title-display {
    font-size: 32px;
  }

  .section-subtitle {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 26px;
  }

  .btn-inscripcion {
    font-size: 17px;
    padding: 17px 34px;
    width: 100%;
    max-width: 340px;
  }

  .hero-logos {
    gap: 8px 16px;
  }

  .logo-slot {
    min-width: 116px;
    min-height: 64px;
  }

  .logo-slot img {
    max-height: 50px;
  }

  .modalidad-km {
    font-size: 48px;
  }

  .doc-destacada {
    padding: 32px 22px 30px;
    border-radius: 14px;
  }

  .doc-destacada-title {
    font-size: 25px;
  }

  .doc-destacada p {
    font-size: 15px;
    line-height: 25px;
  }

  .btn-blanco-pill {
    width: 100%;
    max-width: 320px;
    padding: 14px 20px;
    font-size: 13px;
  }

  .galeria-carousel .galeria-img {
    height: 240px;
  }

  .doc-paso-head {
    gap: 12px;
    padding: 16px 16px;
  }

  .doc-paso-num {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .doc-paso-titulo {
    font-size: 16px;
  }

  /* Sin la sangría de 78px: en móvil no queda ancho para el texto. */
  .doc-paso-body {
    padding: 4px 16px 22px;
  }

  .doc-paso-body .btn-doc {
    width: 100%;
  }

  .colecta-section {
    padding: 50px 0;
  }

  .colecta-section .colecta-title {
    font-size: 27px;
  }

  .colecta-img {
    margin-top: 28px;
  }

  .colecta-img img {
    height: 230px;
  }

  /* Sin margen negativo: en móvil las flechas se comerían la foto. */
  .galeria-carousel .carousel-control-prev { left: 0; }
  .galeria-carousel .carousel-control-next { right: 0; }

  .logo-slot-ancho {
    min-width: 0;
  }

  /* Los dos botones del footer apilados, no pegados */
  footer .banner-btn .btn {
    margin-bottom: 12px;
  }
}