/*
  Rediseño visual "Avivamiento — Fuego y Gloria"
  Capa de estilos que se aplica ENCIMA de index_01.css, banners.css y landing.css.
  No modifica estructura HTML, clases de Owl Carousel ni el JS de lazytube:
  solo redefine color, tipografía, espaciado y micro-interacciones.
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&family=Open+Sans:wght@400;600&display=swap');

:root {
  --av-ink: #10121a;
  --av-fire-1: #ff6a3d;
  --av-fire-2: #ffb648;
  --av-royal-1: #3b1e6d;
  --av-royal-2: #6d3bb0;
  --av-glow: rgba(255, 140, 66, 0.45);
  --av-radius: 18px;
}

/* Tipografía general */
#main h1,
#main h2,
#main h5,
#main .feature_title,
#main .carousel_title,
#main .text_content_title {
  font-family: 'Poppins', 'Open Sans', sans-serif !important;
  letter-spacing: 0.3px;
}

#main p,
#main .lead,
#main .feature_text,
#main .card-text {
  font-family: 'Open Sans', sans-serif;
}

/* Título de secciones tipo carrusel */
#main .carousel_title {
  position: relative;
  display: inline-block;
  font-weight: 700 !important;
  padding-bottom: 14px;
  margin-left: auto;
  margin-right: auto;
}

#main .carousel_title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 72px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--av-fire-1), var(--av-fire-2));
}

/* Botones — pill de fuego con brillo al hover */
#main .banner_btn,
#main .btn.btn-light,
#main .btn.btn-dark {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: 12px 34px;
  letter-spacing: 0.4px;
  background: linear-gradient(90deg, var(--av-fire-1), var(--av-fire-2));
  color: #1a1005 !important;
  box-shadow: 0 6px 18px rgba(255, 106, 61, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#main .banner_btn:hover,
#main .btn.btn-light:hover,
#main .btn.btn-dark:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px var(--av-glow);
  color: #1a1005 !important;
}

/* Overlays de banners de una columna: se deja ver la imagen de fondo, solo se tiñe con el degradado "gloria" */
#main .banner--bg .bg-overlay,
#main #banner--bg .bg-overlay {
  background: linear-gradient(135deg, rgba(20, 10, 35, 0.4), rgba(90, 30, 90, 0.22));
  padding-bottom: calc(104px + 24px);
}

/* Margen bajo el botón para que la franja de color no termine pegada a él */
#main .banner--content .banner_btn {
  margin-bottom: 8px;
}

/* Sección de tres columnas: overlay más cálido y consistente con el resto */
#main .three--columns-bg1.three--columns-overlay,
#main .three--columns-bg2.three--columns-overlay,
#main .three--columns-bg3.three--columns-overlay {
  transition: filter 0.3s ease, transform 0.3s ease;
}

#main .three--columns-bg1.three--columns-overlay:hover,
#main .three--columns-bg2.three--columns-overlay:hover,
#main .three--columns-bg3.three--columns-overlay:hover {
  filter: brightness(1.08);
}

/* Tarjetas de "Escuelas y otros" */
#main #about-boxes .card {
  border: none;
  border-radius: var(--av-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#main #about-boxes .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(255, 106, 61, 0.25);
}

#main #about-boxes .card-icon i {
  background: linear-gradient(135deg, var(--av-royal-2), var(--av-fire-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Carrusel de tarjetas (Owl) — esquinas suaves y sombra consistente */
#main .carousel_box-inner {
  border-radius: var(--av-radius);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

/* Banner de próximo evento y demás imágenes tipo "eventImage": pendiente de definir tratamiento de borde, se deja neutro por ahora */

#main .eventImage {
  border: 1px solid chocolate;
  box-shadow: 5px 5px 25px chocolate;
  margin-bottom: 1.5rem !important;
  border-radius: var(--av-radius);
}

#main .carousel_box-inner:hover {
  transform: translateY(-4px);
}

#main .feature_link {
  font-weight: 600;
  color: var(--av-fire-2) !important;
}

/* Reproductor en vivo: marco sutil tipo "vitral" */
#main .js-lazytube {
  border-radius: var(--av-radius);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

/* Banners de imagen únicos: leve viñeta para dar profundidad */
#main .img-banner {
  position: relative;
}

#main .img-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Micro-animación de entrada suave para secciones (respeta AOS ya usado) */
#main section {
  scroll-margin-top: 40px;
}