/**
 * Block: Message Intro
 */

.message-intro-section {
    /* --- CONFIGURACIÓN DE ANIMACIÓN DE MANCHAS --- */
    --splash-duration: 3.5s;     /* Duración total de un ciclo de animación */
    --splash-offset: 0.2s;       /* Retraso entre la aparición de cada mancha */
    --splash-scale-from: 0.5;   /* Escala inicial (0.5 = mitad de tamaño) */
    --splash-opacity-max: 1;    /* Opacidad máxima al aparecer */
    
    /* --- AJUSTE FINO POSICIÓN MANCHAS GLOBO --- */
    --globe-spots-size: 300px;   /* Tamaño del área de las manchas */
    --globe-spots-x: -16px;      /* Ajuste horizontal (negativo = izquierda) */
    --globe-spots-y: 10px;      /* Ajuste vertical (negativo = arriba) */
    
    padding-block: 0 var(--space-104);
    background-color: var(--color-cream-100);
    /* Permitimos que el globo sobresalga de la sección si es necesario */
    overflow: visible; 

    .container {
        margin-block: 40px;
    }

    @media (max-width: 1024px) {
        padding: 0;

        .container {
            padding: 0;
        }
    }
}

.message-intro-box {
    background-color: var(--color-primary-100);
    border: var(--border-2) solid var(--color-grey-900);
    border-radius: var(--radius-24);
    box-shadow: var(--elevation-4);
    padding: 56px var(--space-80);
    position: relative;
    max-width: 1150px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.message-intro-content {
    max-width: 652px;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);

    h2 {
        display: inline-block;
    }
}

.message-intro-title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    color: var(--color-primary-500);
    font-weight: var(--fw-bold);
    position: relative;
    display: block;
    text-align: center;
    width: auto;
    margin: 0 auto;
}

/* Splash (Chispas) arriba del título */
.message-intro-splash {
    position: absolute;
    top: -30px;
    left: -40px;
    width: 63px;
    height: auto;
    z-index: 1;

    @media (max-width: 680px) {
        top: -35px;
        width: 40px;
    }
}

.splash-spot {
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
    animation: splashPop var(--splash-duration) ease-in-out infinite;
}

/* Delays secuenciales calculados con la variable --splash-offset */
.splash-spot:nth-child(1) { animation-delay: calc(var(--splash-offset) * 1); }
.splash-spot:nth-child(2) { animation-delay: calc(var(--splash-offset) * 4); } /*4*/
.splash-spot:nth-child(3) { animation-delay: calc(var(--splash-offset) * 3); } /*3*/
.splash-spot:nth-child(4) { animation-delay: calc(var(--splash-offset) * 5); } /*5*/
.splash-spot:nth-child(5) { animation-delay: calc(var(--splash-offset) * 2); } /*2*/

@keyframes splashPop {
    0%, 100% { 
        opacity: 0; 
        transform: scale(var(--splash-scale-from)); 
    }
    20%, 80% { 
        opacity: var(--splash-opacity-max); 
        transform: scale(1); 
    }
}

.message-intro-text p {
    /* font-size: var(--fs-h6);
    line-height: var(--lh-h6); */
    color: var(--color-grey-800);
    margin: 0;
}

/* El Globo flotante a la derecha */
.message-intro-globe {
    position: absolute;
    top: -60px;
    right: 0px;
    width: 230px;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

.message-intro-globe img {
    display: block;
    width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 1200px) {
    .message-intro-globe {
        width: 112px;
        right: -20px;
        top: -40px;
    }
}

@media (max-width: 1024px) {

    .message-intro-section {
        padding: 0 !important;

        .container {
            margin: 0;
        }
    }

    .message-intro-box {
        padding: var(--space-64) var(--space-40) var(--space-40) var(--space-40);
        max-width: 100%;
        border: none;
        border-top: 1px solid var(--color-grey-900);
        border-radius: 0;
        box-shadow: none;
        text-align: left;
    }
     
    .message-intro-globe {
        top: -50px;
        right: 0;
        margin-top: var(--space-32);
        width: 125px;
        order: 3; /* Mandamos el globo abajo en tablet/movil para que no estorbe */
    }

    .message-intro-box {
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .message-intro-title {
        font-size: 24px;
        line-height: 32px;
        text-align: left;
        margin
        : 0;
    }

    .message-intro-text p {
        font-size: 18px;
        line-height: 28px;
    }

    .message-intro-section {
        padding-block: var(--space-64);
    }
}