/**
 * Micrositio SUAyED Tlaxcala — componentes reutilizables
 *
 * Cargar después de main.css y tutoria.css.
 *
 * Contenido:
 * 1) Hero principal — solo documentación (estilos en main.css).
 * 2) Presentación — solo documentación (main.css, pres-grid).
 * 3) Banners — solo documentación (main.css + banners-from-json.js).
 * 4) Banda foto + overlay — .tlax-band-photo (implementado abajo).
 * 5) Banner informativo — .tu-cta-banner (base tutoria.css) + modificador
 *    .tlax-cta-banner--custom-bg (abajo).
 */

/* -----------------------------------------------------------------
 * 1. Hero principal
 * Base: main.css (.hero, .hero-body, .hero-h1, capas .hero-mesh, etc.).
 * Tema / imagen por página: hoja dedicada, p. ej.
 * body.pagina .hero::before { background-image: url(...); }
 * Fragmento: assets/components/hero-principal.fragment.html
 * ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
 * 2. Presentación (#presentacion, .pres-grid)
 * Base: main.css (.pres-grid, .pres-photo, .pres-body).
 * Convención: .cursor/rules/presentacion-secciones.mdc
 * Fragmento: assets/components/presentacion.fragment.html
 * ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
 * 3. Banners (.banners-section, carrusel)
 * Base: main.css (.banners-section, .carousel-*, .banner--hero).
 * Datos: assets/js/banners-from-json.js
 * Fragmento: assets/components/banners.fragment.html
 * ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
 * 4. Banda con imagen de fondo + overlay (.tlax-band-photo)
 * Estructura: sección > __bg > __overlay > __inner (contenido).
 * Personalizar en la sección o contenedor:
 *   --tlax-band-photo-image: url('...');
 *   --tlax-band-photo-overlay: linear-gradient(...);  (opcional)
 * ----------------------------------------------------------------- */

.tlax-band-photo {
  --tlax-band-photo-overlay: linear-gradient(
    135deg,
    rgba(0, 24, 51, 0.88) 0%,
    rgba(0, 55, 110, 0.82) 50%,
    rgba(0, 24, 51, 0.86) 100%
  );
  position: relative;
  overflow: hidden;
  padding: clamp(3.25rem, 7vw, 5.5rem) 0;
}

.tlax-band-photo__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--tlax-band-photo-image) center center / cover no-repeat;
  background-attachment: fixed;
}

.tlax-band-photo__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tlax-band-photo-overlay);
}

.tlax-band-photo__inner {
  position: relative;
  z-index: 2;
}

@media (max-width: 991px) {
  .tlax-band-photo__bg {
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlax-band-photo__bg {
    background-attachment: scroll;
  }
}

/* -----------------------------------------------------------------
 * 5. Banner informativo (.tu-cta-banner)
 * Base: tutoria.css — fondo, tipografía, .btn-tu-cta-light.
 * Para otra imagen / overlay sin tocar tutoria.css, añade la clase
 * .tlax-cta-banner--custom-bg y define en el mismo bloque o padre:
 *   --tu-cta-banner-image: url('...');
 *   --tu-cta-banner-overlay: linear-gradient(...);  (opcional)
 * Fragmento: assets/components/banner-informativo-tu-cta.fragment.html
 * ----------------------------------------------------------------- */