/* --- 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-position ajustado para escritorio para intentar que la persona sea más visible */
    background: url('../img/inicio.webp') no-repeat 80% center/cover; 
    position: relative;
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
    color: var(--color-blanco); /* Color de texto por defecto para todo el banner */
    overflow: hidden; /* Oculta cualquier desbordamiento */
}

/* Capa de superposición y efecto diagonal (COMENTADA) */
/* .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 {
    max-width: 1400px; /* Ancho máximo para el contenedor del contenido en escritorio */
    margin: 0 auto; /* Centra el contenido */
    width: 100%; /* Ocupa el 100% del ancho del padre hasta el max-width */
    padding: 20px; /* Añade un padding para que el contenido no toque los bordes */
    position: relative;
    z-index: 2;
}

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

.hero-title {
    font-size: 50px; /* Tamaño de fuente para el título principal en escritorio */
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-title .text-green {
    font-family: 'Bilmond';
    color: var(--color-verde-principal);
    font-weight: 700;
    display: block; /* Mantiene su propio bloque en escritorio */
}

.hero-title .text-white {
    font-family: 'Bilmond';
    color: var(--color-blanco);
    font-weight: 400;
    font-size: 32px;
    display: block; /* Mantiene su propio bloque en escritorio */
}

/* --- Responsive para el Banner Principal (solo para 768px y menores) --- */

/* No hay media queries para 1200px o 992px, ya que no se pidieron modificaciones de escritorio */

@media (max-width: 768px) { /* Breakpoint para móviles */
    .hero-banner {
        min-height: 260px; /* AJUSTADO: Altura mínima reducida para móvil (antes 280px) */
        background-position: center center; /* En móvil, centrar la imagen para mejor adaptabilidad */
        justify-content: flex-start; /* Alinea el contenido a la IZQUIERDA en móvil */
        align-items: center; /* Centra verticalmente el contenido en móvil. Puedes ajustar a flex-end si el texto va abajo. */
        padding-bottom: 0; /* No es necesario si el contenido está centrado verticalmente */
    }

    /* .hero-banner::before { (COMENTADO)
        clip-path: none; 
        background-color: rgba(25, 40, 99, 0.85);
    } */

    .hero-content {
        max-width: 95%; /* Ajusta el ancho máximo para el contenedor en móvil */
        padding: 0 10px; /* Añade padding horizontal para que el contenido no pegue a los bordes de la pantalla */
        text-align: left; /* Alinea el texto a la IZQUIERDA dentro de hero-content */
    }

    .hero-text {
        max-width: 60%; /* Reduce el ancho del contenedor de texto al 60% del hero-content */
        margin: 0; /* Elimina margin: auto para que no se centre */
        padding: 15px 0; /* Reduce padding para móvil, si quieres padding lateral, hazlo en hero-content */
        text-align: left; /* Asegura que el texto esté alineado a la IZQUIERDA en su caja */
    }

    .hero-title {
        font-size: 7vw; /* Usa 'vw' para un tamaño de fuente responsivo que escala con el viewport */
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .hero-title .text-green {
        display: block; /* Fuerza "Orgullosamente" y "Peruanos" a su propia línea (con <br> en HTML) */
    }

.hero-title .text-white {
        font-size: 4.5vw; /* Ajustar el tamaño del texto blanco */
        display: block; /* Asegura que el texto largo esté en su propia línea */
    }
}

@media (max-width: 480px) {
    .hero-banner {
        min-height: 200px; /* AJUSTADO: Altura mínima aún más reducida para pantallas muy pequeñas (antes 220px) */
        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;
    }
    .hero-title .text-white {
        font-size: 3.8vw;
    }
}