/* ========================= */
/* INTRO (storytelling) — efecto cristal */
/* ========================= */

.intro {
    position: relative;
    background: url('../images/background-intro.png') center/cover no-repeat fixed;
    padding: 140px 6%;
    color: var(--blanco-suave);
}

/* --- Capa de oscurecimiento suave para el texto (no mata la imagen) --- */
.intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 20, 35, 0.35); /* azul oscuro muy leve */
    backdrop-filter: blur(2px);         /* apenas un blur general */
    z-index: 1;
}

/* --- Panel de cristal donde vive el texto --- */
.intro-glass {
    position: relative;
    z-index: 2;

    background: rgba(0, 28, 55, 0.35);     /* tono azul + transparencia */
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);

    padding: 60px 50px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);

    max-width: 900px;
    margin: auto;
    box-shadow: 0 0 40px rgba(0,0,0,0.25);
}

.intro-title {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 40px;
    color: var(--blanco-hielo);
}

.intro p {
    margin-bottom: 26px;
    font-size: 1.18rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.92); /* más legible sin ser blanco puro */
}

.highlight-ice {
    color: var(--azul-hielo);
    font-weight: 700;
}
/* ======================================================
   AJUSTE TIPOGRÁFICO SOLO PARA LA SECCIÓN INTRO (MOBILE)
   ====================================================== */
@media (max-width: 480px) {

    .intro h1,
    #intro h1 {
        font-size: 1.7rem !important;
        line-height: 1.25 !important;
    }

    .intro h2,
    #intro h2 {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
    }

    .intro p,
    #intro p {
        font-size: 0.85rem !important;
        line-height: 1.45 !important;
        margin-bottom: 14px !important;
    }
}