/* Carrusel personalizado */
#valanCarousel {
    height: calc(100vh);
    --bs-carousel-interval: 5000ms; /* 5 segundos */
}

/* Hero Section */
.hero {
    /* Eliminamos completamente los márgenes negativos, ya que #valanCarousel debe controlarlo */
    margin-top: -100px; /* Mantienes este si es para que el hero suba debajo del nav */
    margin-left: 0; /* ¡CRUCIAL! */
    margin-right: 0; /* ¡CRUCIAL! */
    width: 100%; /* Asegúrate de que no se estire más allá del contenedor padre */
}

/* Otros estilos del carrusel (mantener como están) */
.carousel {
    --bs-carousel-bg: transparent !important; /* Fuerza transparencia */
}

.carousel-inner,
.carousel-item {
    height: 100%;
}

    .carousel-item img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

/* El overlay del carrusel */
.carousel-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; /* Se mantiene centrado por ahora, luego ajustaremos para justificar */
    color: white;
    background: rgba(0, 0, 0, 0.6); /* Un poco más opaco para mayor contraste */
    padding: 30px; /* Aumentamos el padding para más espacio */
    border-radius: 18px;
    z-index: 3; /* Asegúrate de que esté encima de todo */
    max-width: 80%; /* Limita el ancho del overlay */
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho/alto */
}

    /* Estilos de botones y texto dentro del overlay */
    .carousel-overlay .btn-getstarted {
        color: var(--contrast-color);
        background: var(--accent-color); /* Se cambiará a tu color de empresa más adelante */
        font-size: 16px; /* Aumentamos ligeramente el tamaño del botón */
        padding: 10px 30px; /* Aumentamos el padding del botón */
        margin-top: 20px; /* Más espacio entre el texto y el botón */
        border-radius: 50px;
        transition: 0.3s;
        text-decoration: none; /* Asegura que no tenga subrayado */
        display: inline-block; /* Para que margin-top funcione correctamente */
    }

        .carousel-overlay .btn-getstarted:hover,
        .carousel-overlay .btn-getstarted:focus:hover {
            color: var(--contrast-color);
            background: var(--accent-color); /* Se cambiará a tu color de empresa más adelante */
            transform: translateY(-3px); /* Efecto de elevación al hacer hover */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

    .carousel-overlay h2 {
        font-size: 42px; /* Aumentamos ligeramente el tamaño del título */
        margin-bottom: 15px; /* Más espacio debajo del título */
        font-weight: bold;
        font-family: var(--montserrat-font); /* Aplica la fuente de encabezado */
        line-height: 1.2; /* Mejora la legibilidad en varias líneas */
    }

    .carousel-overlay p {
        font-size: 20px; /* Aumentamos el tamaño del párrafo */
        margin: 0;
        font-family: var(--open-sans-font); /* Aplica la fuente predeterminada */
        line-height: 1.6; /* Mejora la legibilidad */
        text-align: center; /* Centramos el texto por ahora */
    }

/* Indicadores y controles del carrusel */
.carousel-indicators {
    margin-bottom: 20px; /* Ajusta este valor según lo necesites, por ejemplo, 20px, 30px */
}

    .carousel-indicators button {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50%;
        margin: 0 8px !important;
        background-color: var(--gold-color) !important;
    }

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--gold-color);
    border-radius: 50%;
    padding: 1.5rem;
    background-size: 1.5rem;
}

/* Transición suave entre slides */
.carousel-item {
    transition: transform 0.8s ease-in-out;
}

/* Botón personalizado general (asegúrate de que no haya conflicto con el del overlay) */
.btn-getstarted {
    position: relative;
    z-index: 2; /* Encima del overlay */
    opacity: 1 !important;
    display: inline-block !important;
}

    .btn-getstarted:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

/*--------------------------------------------------------------
# MEDIA QUERIES PARA MÓVILES Y TABLETAS
--------------------------------------------------------------*/

@media (max-width: 991px) { /* Tabletas y Móviles */
    /* Ajuste para el hero section */
    .hero.section {
        height: 100vh; /* Ajusta la altura del hero para tabletas */
    }

    #valanCarousel {
        height: 100%; /* Ocupa el 100% de la nueva altura de .hero.section */
    }

    /* Ajuste para el overlay de texto en móviles */
    .carousel-overlay {
        padding: 25px; /* Reducimos el padding ligeramente para tabletas, pero con más espacio que antes */
        width: 90%; /* Un poco más de ancho en tabletas */
        max-width: 500px; /* Limita el ancho máximo del overlay en tabletas para que no sea muy ancho */
    }

        .carousel-overlay h2 {
            font-size: 2.3em; /* Ajusta el tamaño del título para tabletas. Puedes probar con '32px' también. */
            margin-bottom: 10px;
        }

        .carousel-overlay p {
            font-size: 1.1em; /* Ajusta el tamaño del párrafo para tabletas. Puedes probar con '18px'. */
            margin-bottom: 15px;
        }

        .carousel-overlay .btn-getstarted {
            font-size: 1em; /* Reduce el tamaño del botón para tabletas */
            padding: 10px 25px; /* Ajusta el padding del botón */
        }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        padding: 1rem; /* Reduce el padding de los iconos */
        background-size: 1rem; /* Ajusta el tamaño del icono */
    }
}


@media (max-width: 768px) { /* Añadimos un breakpoint para tabletas más pequeñas (ej. iPad mini en vertical) */
    .carousel-overlay {
        padding: 20px;
        width: 95%;
        max-width: 400px; /* Un poco más pequeño para estas pantallas */
    }

        .carousel-overlay h2 {
            font-size: 2em; /* Más pequeño para esta resolución */
            margin-bottom: 8px;
        }

        .carousel-overlay p {
            font-size: 1em; /* Más pequeño */
            margin-bottom: 12px;
        }

        .carousel-overlay .btn-getstarted {
            font-size: 0.95em;
            padding: 9px 22px;
        }
}


@media (max-width: 575px) { /* Móviles pequeños (ej. iPhone 13, Galaxy S22) */
    .hero.section {
        height: 100vh;
    }

    #valanCarousel {
        height: 100%;
    }

    .carousel-overlay {
        padding: 15px; /* Más reducido para móviles muy pequeños */
        width: 95%; /* Asegura que no se desborde */
        max-width: 300px; /* Limita el ancho del overlay */
    }

        .carousel-overlay h2 {
            font-size: 1.8em; /* Más pequeño para móviles muy pequeños */
            margin-bottom: 8px;
        }

        .carousel-overlay p {
            font-size: 0.95em; /* Más pequeño, apenas perceptible pero importante */
            margin-bottom: 10px;
            line-height: 1.5; /* Ajustar line-height si el texto es muy denso */
        }

        .carousel-overlay .btn-getstarted {
            font-size: 0.85em; /* Más pequeño */
            padding: 7px 20px;
            margin-top: 15px; /* Reducir margen superior del botón */
        }

    /* Ocultar los controles de navegación (flechas) para móviles muy pequeños si el diseño lo permite */
    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }

    /* Ajustar la posición de los indicadores para móviles */
    .carousel-indicators {
        margin-bottom: 10px; /* Menos margen inferior para que no se pierdan */
    }
}

@media (max-width: 400px) { /* Móviles aún más pequeños (ej. algunos iPhones antiguos, dispositivos muy compactos) */
    .carousel-overlay {
        padding: 10px; /* Relleno aún más reducido */
        width: 98%; /* Casi todo el ancho para evitar cortes */
        max-width: 280px; /* Un límite de ancho aún menor */
    }

        .carousel-overlay h2 {
            font-size: 1.5em; /* Tamaño mínimo para el título */
            margin-bottom: 5px;
        }

        .carousel-overlay p {
            font-size: 0.85em; /* Tamaño mínimo para el párrafo */
            line-height: 1.4;
        }

        .carousel-overlay .btn-getstarted {
            font-size: 0.8em;
            padding: 6px 18px;
            margin-top: 10px;
        }

    /* Considerar centrar más el texto si el espacio es muy reducido */
    .carousel-overlay {
        text-align: center;
    }
}