/* --- Estilos para la Sección del Banner Principal (Hero Banner) --- */
.hero-banner {
    width: 100%; /* Asegura que ocupe el 100% del ancho del viewport */
    min-height: 500px; /* VERIFICADO: Altura mínima para el banner en ESCRITORIO (SIN CAMBIOS) */
    background: url('../img/manufacturas.webp') no-repeat center center/cover; /* CORREGIDO: Vuelve a center center en escritorio */
    position: relative;
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: flex-start; /* Alinea el contenido a la izquierda en escritorio */
    color: var(--color-blanco); /* Color de texto por defecto para todo el banner */
    overflow: hidden; /* Oculta cualquier desbordamiento de los pseudo-elementos */
}

/* Capa de superposición y efecto diagonal */
/* .hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 40, 99, 0.8);
    z-index: 1;
    clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%);
} */

.hero-content {
    position: relative; /* Asegura que el contenido esté sobre la capa de superposición */
    z-index: 2;
    max-width: 1400px; /* Establece el ancho máximo para el contenedor del contenido */
    margin: 0 auto; /* Centra el contenido */
    width: 100%; /* Asegura que ocupe el 100% del ancho del padre hasta el max-width */
    padding: 20px; /* Añade un padding para que el contenido no toque los bordes */
}

.hero-text {
    max-width: 600px; /* Limita el ancho del texto para mejor lectura */
    padding: 30px;
    /* background-color: rgba(0, 0, 0, 0.2); Fondo semitransparente para el texto */
    border-radius: 8px;
    text-align: left; /* Alineación izquierda en escritorio */
}

.hero-title {
    line-height: 1.2; /* AJUSTADO: Se subió el line-height para mejor legibilidad */
    margin-bottom: 20px;
}

.hero-title .text-green {
    font-family: 'Bilmond';
    font-size: 50px; /* Tamaño de fuente de escritorio */
    color: var(--color-verde-principal);
    font-weight: 700;
    display: block; /* Para asegurar que ocupe su propia línea */
}

.hero-title .text-white {
    font-family: 'Bilmond';
    color: var(--color-blanco);
    font-weight: 400;
    font-size: 50px; /* Tamaño de fuente de escritorio */
    display: block; /* Asegura que vaya en una nueva línea por defecto */
    margin-bottom: 0;
}

.hero-title .text-white-p {
    font-family: 'Bilmond'; /* Se mantiene si es la fuente deseada */
    color: var(--color-blanco);
    font-weight: 300;
    font-size: 20px; /* Tamaño de fuente de escritorio */
    display: block;
    margin-top: 10px;
    max-width: 400px; /* Mantener el max-width para escritorio */
}

/* --- Responsive para el Banner Principal (replicando lógica del "caballo ganador") --- */

@media (max-width: 1200px) {
    .hero-title {
        font-size: 45px; /* Ligeramente más pequeño que 50px */
    }
    .hero-title .text-white {
        font-size: 45px;
    }
    .hero-title .text-white-p {
        font-size: 18px;
        max-width: 380px;
    }
}

@media (max-width: 992px) { /* Breakpoint para tabletas y laptops pequeñas */
    .hero-banner {
        min-height: 400px; /* Mantener el valor original de este breakpoint, si es deseado */
    }

    .hero-banner::before {
        clip-path: polygon(0 0, 70% 0, 50% 100%, 0% 100%); 
    }

    .hero-content {
        max-width: 100%; /* Ocupa el 100% del ancho en estas pantallas */
        padding: 15px;
    }

    .hero-text {
        max-width: 500px; /* Ajustar el ancho del texto */
        padding: 20px;
    }

    .hero-title {
        font-size: 40px; /* Ajuste para este breakpoint */
    }
    .hero-title .text-white {
        font-size: 40px;
    }
    .hero-title .text-white-p {
        font-size: 16px;
        max-width: 350px;
    }
}


@media (max-width: 768px) { /* Breakpoint para móviles */
    .hero-banner {
        min-height: 260px; /* AJUSTADO: Altura mínima replicando "caballo ganador" */
        background-position: 25% center; /* CORREGIDO: Mueve la imagen de fondo a la derecha SOLO EN MÓVIL */
        justify-content: flex-start; /* AJUSTADO: Alinea el contenido a la IZQUIERDA en móvil */
        align-items: center; /* Centra verticalmente el contenido en móvil */
    }

    .hero-banner::before {
        clip-path: none; /* Elimina el corte diagonal para una superposición completa */
        background-color: rgba(25, 40, 99, 0.85); /* Aumentar un poco la opacidad si no hay corte */
    }

    .hero-content {
        max-width: 95%; /* AJUSTADO: Ancho máximo del "caballo ganador" */
        padding: 0 10px; /* AJUSTADO: Padding horizontal del "caballo ganador" */
        text-align: left; /* AJUSTADO: Alinea el texto a la IZQUIERDA dentro de hero-content */
    }

    .hero-text {
        max-width: 60%; /* AJUSTADO: Ancho del contenedor de texto al 60% del hero-content */
        margin: 0; /* AJUSTADO: Elimina margin: auto para que no se centre */
        padding: 15px 0; /* Reduce padding para móvil, sin padding lateral explícito aquí */
        /* background-color: rgba(0, 0, 0, 0.4); Fondo semitransparente para el texto */
        text-align: left; /* Asegura que el texto esté alineado a la IZQUIERDA en su caja */
    }

    .hero-title {
        font-size: 7vw; /* AJUSTADO: Usa 'vw' para un tamaño de fuente responsivo */
        line-height: 1.3; /* AJUSTADO: Line-height para mejor lectura */
        margin-bottom: 10px;
    }

    .hero-title .text-green {
        display: block; /* Fuerza "que ofrecemos" a su propia línea */
        font-size: initial; /* Para que herede de .hero-title */
    }

    .hero-title .text-white {
        font-size: 7vw; /* Ajustar tamaño como .text-green para que parezcan iguales */
        display: block; /* Asegura que "Servicios" esté en su propia línea */
    }
    
    .hero-title .text-white-p {
        font-size: 3.8vw; /* Ajuste con vw */
        margin-top: 5px; /* Reduce margin-top si es necesario */
        max-width: 100%; /* Permite que ocupe todo el 60% del .hero-text */
    }
}

@media (max-width: 480px) {
    .hero-banner {
        min-height: 200px; /* AJUSTADO: Altura mínima aún más reducida replicando "caballo ganador" */
        padding-bottom: 0;
    }

    .hero-text {
        max-width: 60%; /* Mantiene el 60% también para pantallas muy pequeñas */
        padding: 10px 0; /* Ajusta padding */
    }

    .hero-title {
        font-size: 6vw; /* Ajuste con vw */
    }
    .hero-title .text-white {
        font-size: 6vw; /* Ajuste con vw */
    }
    .hero-title .text-white-p {
        font-size: 3.2vw; /* Ajuste con vw */
    }
}