/* assets/css/banner.css */

/*
 * -----------------------------------------------------------------
 * AJUSTES DEL CARRUSEL (Hero Slider)
 * -----------------------------------------------------------------
 */

/* 1. Arreglo de espacio y ancho completo (Breakout) */
section.hero-slider {
    margin-top: 0 !important; /* Se pega al header */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
}

/* 2. Altura del banner */
section.hero-slider .carousel-item {
    height: 65vh !important; 
    min-height: 400px !important; 
    background-color: #f0f0f0; 
}

/* 2.1. Ajuste de la imagen */
section.hero-slider .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center !important; 
    display: block !important; 
}


/* 3. Ajustes de la CAPTION (texto dentro del banner) */

/* --- ESTILOS BASE (Compartidos por todos los slides) --- */
section.hero-slider .carousel-caption {
    /* --- CAMBIOS AQUÍ --- */
    display: inline-block !important; /* Hace que el cuadro se ajuste al contenido */
    width: auto !important;           /* Ancho automático según el contenido */
    
    /* Mantener estos estilos para la apariencia */
    background-color: rgba(0, 0, 0, 0.3) !important; 
    padding: 2rem !important; 
    border-radius: 15px !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    margin: 0 !important;
    
    /* Posicionamiento (esto se sobrescribe en las reglas específicas de cada slide, pero es bueno tener un default) */
    top: 50% !important; 
    transform: translateY(-50%) !important; 
}


/* --- POSICIÓN SLIDE 1 (Ejemplo: A la Izquierda) --- */
.caption-slide-1 {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
       
    /* --- AÑADE ESTA LÍNEA --- */
    bottom: auto !important; /* <--- ESTO SOLUCIONA EL PROBLEMA */
    
    left: 10% !important;
    right: auto !important;
    text-align: left !important;
}

/* --- POSICIÓN SLIDE 2 (Ejemplo: Al Centro) --- */
.caption-slide-2 {
    position: absolute !important;
    top: 50% !important;
    left: 30% !important;
    transform: translate(-50%, -50%) !important; /* Centrado perfecto al medio */
    bottom: auto !important;
    right: auto !important;
    text-align: center !important;
    

}

/* --- POSICIÓN SLIDE 3 (Ejemplo: A la Derecha) --- */
.caption-slide-3 {
      position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
       
    /* --- AÑADE ESTA LÍNEA --- */
    bottom: auto !important; /* <--- ESTO SOLUCIONA EL PROBLEMA */
    
    left: 10% !important;
    right: auto !important;
    text-align: left !important;
}

section.hero-slider .carousel-caption h1 {
    font-size: 3.5rem !important; 
    line-height: 1.2 !important;
    margin-bottom: 0.8rem !important;
}

section.hero-slider .carousel-caption p {
    font-size: 1.3rem !important; 
    margin-bottom: 2rem !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

section.hero-slider .carousel-caption .btn {
    background-color: #da6517 !important; 
    border-color: #da6517 !important;
    color: #ffffff !important;
    
    /* --- CAMBIOS AQUÍ --- */
    text-shadow: none !important; /* Sin sombra en el texto */
    box-shadow: none !important;  /* Sin sombra en la caja del botón (opcional) */
    font-weight: 600 !important;  /* Peso de fuente limpio */
}



/* --- ESTILOS PARA LOS CONTROLES DEL CARRUSEL --- */

/* 1. Aumentar el tamaño del área clicable y centrar el icono */
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
    width: 5% !important; /* Hacer el área de clic un poco más ancha */
    opacity: 0.9 !important; /* Hacerlas más visibles por defecto */
}

/* 2. Estilizar el icono de la flecha en sí */
.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon {
    width: 3rem;  /* Ancho del icono (más grande) */
    height: 3rem; /* Alto del icono (más grande) */
    background-size: 100%, 100%; /* Asegura que el SVG llene el espacio */
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5)); /* Añade una sombra para que resalte sobre cualquier fondo */
}

/* 3. Engrosar las flechas (Truco: Cambiar la imagen de fondo por una más gruesa o usar filtro) */
/* Bootstrap usa una imagen SVG de fondo. Para hacerla más gruesa sin cambiar la imagen,
   podemos usar un filtro de contraste o simplemente hacerla más grande como arriba.
   Si quieres un estilo de "caja" alrededor de la flecha, usa esto: */

/* Opcional: Fondo oscuro cuadrado o redondo detrás de la flecha */

/*.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 50%; 
    padding: 10px;
}*/


/* 4. Efecto Hover: Hacerlas brillar o crecer */
.hero-slider .carousel-control-prev:hover,
.hero-slider .carousel-control-next:hover {
    opacity: 1;
    transform: scale(1.1); /* Crece un 10% al pasar el mouse */
    transition: all 0.3s ease;
}

/* --- COLORES DE TEXTO DEL BANNER --- */

/* Título (h1) */
section.hero-slider .carousel-caption h1 {
    color: #ffffff !important; /* Color del título (Blanco por defecto, cámbialo si quieres) */
     /*text-shadow: 2px 2px 4px rgba(0,0,0,0.8); */ /*Aumentar sombra si cambias el color */
}

/* Descripción (p) */
section.hero-slider .carousel-caption p {
    color: #ffffff !important; /* Color de la descripción (Gris muy claro/Blanco) */
    font-weight: 500 !important; /* Un poco más grueso para que se lea bien */
    
}


/* --- BOTÓN NARANJA DEL BANNER --- */

section.hero-slider .carousel-caption .btn {
    background-color: #da6517 !important; /* Tu color naranjo */
    border-color: #f39c12 !important;
    color: #ffffff !important; /* Texto blanco */
    font-weight: bold !important;
    
    /* Mantener los tamaños que ya tenías */
    font-size: 1.2rem !important; 
    padding: 0.9rem 2.2rem !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
}

/* Efecto Hover del Botón */
section.hero-slider .carousel-caption .btn:hover {
    background-color: #c35a14!important; /* Naranjo más claro */
    border-color: #f1c40f !important;
    transform: translateY(-3px); /* Pequeño efecto de elevación */
}





/* =========================================
   4. AJUSTES PARA MÓVILES (Responsive)
   ========================================= */
@media (max-width: 768px) {
    
    /* Altura del banner en celular */
    section.hero-slider .carousel-item {
        height: 70vh !important; 
        min-height: 450px !important;
    }

    /* --- LA CAJA CON EL TEXTO Y FONDO GRIS --- */
    section.hero-slider .carousel-caption,
    .caption-slide-1,
    .caption-slide-2,
    .caption-slide-3 {
        position: absolute !important;
        
        /* 1. ¿CÓMO MOVERLO ARRIBA O ABAJO? 
           Cambia el 'top'. 
           50% es al medio. 30% es más arriba. 70% es más abajo. */
        top: 50% !important; 
        transform: translateY(-50%) !important; /* Mantiene el centro vertical exacto */
        bottom: auto !important;

        /* 2. ¿CÓMO CENTRARLO O MOVERLO A LOS LADOS?
           Para centrar perfecto (recomendado en móvil): usa left:0, right:0 y margin:0 auto */
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;

        /* (Si en lugar de centrar quieres pegarlo a la izquierda, 
           borra el 'right: 0', 'margin: 0 auto' y pon 'left: 5%') */

        /* 3. ¿CÓMO CAMBIAR EL ANCHO DEL FONDO GRIS? 
           90% ocupa casi toda la pantalla. Si lo quieres más angosto pon 80% o 70%. */
        width: 90% !important;
        max-width: 400px !important; 

        /* 4. RELLENO (Espacio entre el texto y el borde gris) */
        padding: 1.5rem !important; 
        
        /* El texto siempre centrado dentro de la caja gris */
        text-align: center !important; 
        display: block !important; 
    }
    
    /* --- TAMAÑOS DE LAS LETRAS EN MÓVIL --- */
    section.hero-slider .carousel-caption h1 {
        /* Para hacer el TÍTULO más grande o pequeño, cambia este número: */
        font-size: 2rem !important; 
        margin-bottom: 0.8rem !important;
    }

    section.hero-slider .carousel-caption p {
        /* Para hacer la DESCRIPCIÓN más grande o pequeña, cambia este número: */
        font-size: 1.1rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* --- AJUSTES DEL BOTÓN EN MÓVIL --- */
    section.hero-slider .carousel-caption .btn {
        font-size: 1rem !important;
        padding: 0.8rem 1.5rem !important;
        width: auto !important;
        display: inline-block !important;
    }

    /* Ocultar las flechas de siguiente/anterior en el celular para dar más espacio */
    .hero-slider .carousel-control-prev,
    .hero-slider .carousel-control-next {
        display: none !important;
    }
}