/*estilos en: bannerslider-estilos.css    */
    :root{
      --nav-bg: rgba(0,0,0,0.45);
      --nav-bg-hover: rgba(0,0,0,0.75);
      --dot-inactive: rgba(255,255,255,0.55);
      --dot-active: #ffffff;
      --transition-time: 3000ms; /* Duración principal de la transición (3s) */
      --text-ease: cubic-bezier(.2,.9,.3,1);
    }
/*  CONTENEDOR PRINCIPAL  */
    .bannerslider {
      position: relative;
/*      max-width: 1500px;*/
			width: 100%;
      margin: 0 auto;
      height: 400px;
      overflow: hidden;
      background: #000;
    }

    /* Wrapper de slides (opcional) */
    .bannerslider .slides {
			position: relative;
			width: 100%;
			height: 100%;
		}

    /* ===========================
       SLIDE: siempre presente en el DOM (no usar display:none)
       - manejamos visibilidad por opacity/visibility para animaciones
       =========================== */
    .bannerslider .slide {
      position: absolute;
      inset: 0; /* top:0; right:0; bottom:0; left:0 */
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--transition-time) ease, visibility 0s linear calc(var(--transition-time) * 1); 
      /* visibility se activa al final para evitar clicks en slides ocultos */
      pointer-events: none;
    }

    /* slide activo (visible) */
    .bannerslider .slide.active {
      opacity: 1;
      visibility: visible;
      transition: opacity var(--transition-time) ease, visibility 0s linear 0s;
      z-index: 2;
      pointer-events: auto;
    }

    /* ===========================
       IMAGEN: cover total, con transición de blur + escala
       - Ajusta filter/scale en slides no activos para efecto de desaparición
       =========================== */
    .bannerslider .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1);
      filter: blur(0);
      transition: filter var(--transition-time) ease, transform var(--transition-time) ease;
      will-change: filter, transform;
    }

    /* cuando NO está activo, aplicamos blur y ligera escala */
    .bannerslider .slide:not(.active) img {
      filter: blur(6px);
      transform: scale(1.03);
    }

		/* Overlay oscuro */
		.bannerslider .overlay {
			position: absolute;
			inset: 0; /* ocupa todo el slide */
			background: rgba(0, 0, 0, 0.4); /* negro con transparencia */
			z-index: 1; /* se coloca sobre la imagen */
		}
		
    /* ===========================
       TEXTO: centrado vertical y horizontalmente
       - animación de "bajar" más lenta (igual timing que imágenes)
       =========================== */
    .bannerslider .text {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -95%); /* estado inicial: ligeramente arriba */
      text-align: center;
      color: #fff;
      padding: 0 10px;
      max-width: 100%;
      opacity: 0;
      transition: transform var(--transition-time) var(--text-ease), opacity calc(var(--transition-time)/1.2) var(--text-ease);
      pointer-events: none;
			z-index: 2; /* más arriba que el overlay */
    }

    /* cuando la slide está activa, el texto baja a centro exacto y aparece */
    .bannerslider .slide.active .text {
      transform: translate(-50%, -50%);
      opacity: 1;
    }

    .bannerslider .text h2 {
			font-family: "Poppins", sans-serif;
      margin: 0;
      font-size: 2.4em;
      line-height: 1.05;
      text-shadow: 0 6px 18px rgba(0,0,0,0.45);
    }
    .bannerslider .text p {
			font-family: "Poppins", sans-serif;
      margin: 12px 0 0;
      font-size: 1.4em;
      text-shadow: 0 4px 12px rgba(0,0,0,0.35);
    }

    /* ===========================
       BOTONES laterales (prev / next)
       =========================== */
    .bannerslider .nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: #fff;
      background: var(--nav-bg);
      cursor: pointer;
      z-index: 6;
      transition: background .18s ease, transform .12s;
    }
    .bannerslider .nav:hover { background: var(--nav-bg-hover); transform: translateY(-50%) scale(1.05); }
    .bannerslider .nav:active { transform: translateY(-50%) scale(.98); }

    .bannerslider .nav.prev { left: 16px; }
    .bannerslider .nav.next { right: 16px; }

    /* ===========================
       DOTS / PAGINACIÓN
       - creadas dinámicamente por JS (pero estilos aquí)
       =========================== */
    .bannerslider .dots {
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 6;
    }
    .bannerslider .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--dot-inactive);
      cursor: pointer;
      transition: transform .12s ease, background .12s;
      border: none;
    }
    .bannerslider .dot:hover { transform: scale(1.12); }
    .bannerslider .dot.active { background: var(--dot-active); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

    /* ===========================
       MEDIA QUERIES (responsive)
       - ajusta altura del slider y tamaños de texto
       =========================== */

    @media (min-width: 768px) {
      .bannerslider { height: 500px; }
      .bannerslider .text h2 { font-size: 3rem; }
      .bannerslider .text p { font-size: 1.4em; }
      .bannerslider .nav { width:40px; height:40px; font-size:20px; }
    }
		@media (min-width: 1024px) {
      .bannerslider { height: 550px; }
      .bannerslider .text h2 { font-size: 3.4rem; }
      .bannerslider .nav { width:44px; height:44px; font-size:22px; }
    }