:root {
    --morado-oscuro: #452956;
    --morado-claro: #633082;
    --morado-recuadros: #623a76;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color:#1a1a1a; 
}

main {
    flex: 1; /* Esto actúa como un resorte que empuja tu footer hasta abajo */
}

.hero-section {
    width: 100%;
    line-height: 0;
    overflow: hidden;
}

.hero-img {
    width: 100%;
    height: auto;
    display: block;
}

.promo-section {
    background-image: url('../img/fondo_1.webp');
    background-repeat: repeat; 
    padding: 60px 0;
    width: 100%;
}

.promo-flex {
    max-width: 1880px; 
    margin: 0 auto;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    /* AQUÍ LA MAGIA: Le damos el espacio derecho aquí (150px) en vez de usar margin abajo */
    padding: 0 150px 0 10px; 
    gap: 40px; 
    /* ELIMINADO: min-width y white-space (Eran los culpables del scroll horizontal) */
}

.promo-text {
    flex: 0 1 auto; 
    text-align: left;
    padding: 0px 0px 0px 90px;
}

.promo-text p {
    font-size: 1.75rem;
    color: #555;
    line-height: 1.15;
    letter-spacing: 1.4px;
    text-align: left;
    font-weight: 700;
    margin: 0; 
}

.promo-phrase-container {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Obligamos a la caja a pegarse a la derecha */
}

.info-boxes-section {
    background-image: url('../img/fondo_2.webp');
    background-repeat: repeat;
    background-color: var(--morado-oscuro); 
    padding: 60px 0; /* Quitamos paddings asimétricos */
}

.info-boxes-container {
    /* Alineamos con el contenedor de arriba (1880px o el que elijas) */
    max-width: 1880px; 
    margin: 0 auto;
    display: flex;
    align-items: stretch; 
    justify-content: center;
    gap: 40px;
    padding: 0 130px 0 90px; /* Padding fijo de seguridad */
}

/* Tu bloque .box se mantiene igual, solo asegúrate de esto: */
.box {
    flex: 1;
    background-color: var(--morado-recuadros);
    color: white;
    padding: 35px;
    min-width: 0;
    flex: 1; 
    
    font-size: 1.8rem;
    line-height: 1.3;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    font-weight: 250; 
    text-align: justify;
    hyphens: none; 
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.box strong {
    text-transform: uppercase;
    font-weight: 800;
}


.phrase-custom-box {
    position: relative;
    padding: 0px 110px 0px 60px; /* Mantiene la "L" a la distancia perfecta del texto */
    border-left: 20px solid var(--morado-claro);
    background-color: transparent;
    overflow: visible; 
    white-space: nowrap;
    /* ELIMINADO: margin-right: 140px (Causaba el error de desbordamiento) */
}

.phrase-custom-box::after {
    content: "";
    position: absolute;
    /* Al estar en 0, se clava a la caja como con cemento, sin importar el zoom */
    right: 0; 
    bottom: -20px;
    width: 55px; 
    height: 100px; 
    border-right: 50px solid var(--morado-claro);
    border-bottom: 15px solid var(--morado-claro);
    z-index: 1; 
    pointer-events: none; 
}

.txt-small {
    font-size: 1.6rem;
    font-weight: 600;
    color: #444;
    margin: 0;
    letter-spacing: 1px; 
}

.txt-main {
    font-size: 2.3rem; 
    font-weight: 700;
    color: var(--morado-claro); /* Usa el morado vibrante de la L */
    line-height: 0.7; /* Texto más apretado verticalmente */
    text-transform: uppercase;
    margin: 0;
}

.txt-sub {
    font-size: 1.24rem;
    font-weight: 600;
    color: #555;
    margin: 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.br-movil {
    display: none;
}

/* El span en PC se comporta como texto normal, no hace nada raro */
.lineas-laterales {
    display: inline;
}

/* Nos aseguramos de que las rayitas no existan en PC */
.lineas-laterales::before,
.lineas-laterales::after {
    display: none;
}

@media (max-width: 768px) {
    /* --- AQUÍ: Subimos la pregunta reduciendo el padding de la sección --- */
    .promo-section {
        padding-top: 15px; /* Menos espacio arriba = pregunta más arriba */
        padding-bottom: 0; /* Quitamos el padding inferior para pegar el bloque blanco */
    }

    .promo-flex {
        flex-direction: column;
        padding: 0; /* AQUÍ: Quitamos esto para que el fondo blanco llegue de borde a borde */
        white-space: normal; 
        min-width: 100%;
        gap: 0; /* AQUÍ: Quitamos el gap, separaremos usando padding */
    }

    /* AQUÍ: Le damos espacio solo a la pregunta para que respire en su fondo gris */
    .promo-text {
        padding: 0 5px 15px 5px; 
        width: 100%;
    }

    /* 1. Pregunta centrada y adaptada a su línea (TAMAÑOS INTACTOS) */
    .promo-text p {
        font-size: 0.55rem;
        font-weight: 900; 
        text-align: center; 
        line-height: none;
        width: 100%;
        letter-spacing: 0.3px;
    }
    .promo-text p br {
        display: none; /* Esto "apaga" el salto de línea solo en celular */
    }
    .br-movil {
        display: block; 
    }
    /* --- AQUÍ: Damos el FONDO BLANCO exclusivo a la frase --- */
    .promo-phrase-container {
        width: 100%;
        display: flex;
        justify-content: center; 
        padding: 15px 15px; /* Espacio para separar la frase del fondo gris de arriba */
        background-image: url('../img/FONDO_BLANCO.webp'); /* El fondo blanco solicitado */
    }

    /* 2. La cajita de la frase intacta */
    .phrase-custom-box {
        padding: 1px; 
        width: 100%; 
        border-left: none; /* Quitamos la raya izquierda */
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centramos todo */
        text-align: center;
    }

    /* Tamaños escalados (TAMAÑOS INTACTOS COMO PEDISTE) */
    .txt-small { 
        background-color: var(--morado-claro);
        color: #ffffff !important; /* Forzamos blanco */
        padding: 5px 27px;
        font-size: 0.85rem; 
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 4px;
        letter-spacing: 0.5px;
        display: inline-block;
    }
    .txt-main { 
        font-size: 1.5rem; /* Letra cómoda para móvil */
        line-height: 20px; 
        margin: 0;
    }
    .lineas-laterales {
        display: flex; /* Al activarlo, permite alinear las rayas */
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 2px;
    }

    .lineas-laterales::before,
    .lineas-laterales::after {
        content: "";
        display: block; /* Despertamos las rayas en móvil */
        height: 6px; /* Grosor */
        width: 66px; /* Largo */
        background-color: var(--morado-claro);
    }
    .txt-sub { 
        font-size: 0.75rem; 
        line-height: 13px;
        margin-top: 5px;
        letter-spacing: 0.3px;
        font-weight: 700;
        color: #333;
        
    }

    /* 3. La L invertida proporcional */
    .phrase-custom-box::after {
        display: none;
    }

    /* --- INFO BOXES (Tarjetas moradas de abajo) --- */
    .info-boxes-container {
        flex-direction: column;
        padding: 1px 5px; 
        gap: 20px;
    }

    .box {
        padding: 15px;
        font-size: 0.65rem; 
        width: 100%;
    }
    .info-boxes-section {
        padding: 20px 15px;
    }
}