/* 1. DEFINICIÓN ÚNICA DE LA FUENTE */
@font-face {
    font-family: 'Chillax Variable';
    /* Asegúrate de que el nombre del archivo coincida exactamente con la carpeta fonts */
    src: url('../fonts/Chillax-Variable.woff2') format('woff2'); 
    font-weight: 100 900;
    font-display: swap;
}

/* --- ESTILOS GENERALES --- */
.bloque-desktop, .bloque-mobile {
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Necesario para que los hijos con position: absolute funcionen */
    overflow: hidden;
}

/* --- CONTROL DE VISIBILIDAD --- */
.bloque-desktop {
    display: none;
    background-image: url('../img/ivonnelafuente/ivod1.jpg');
}

.bloque-mobile {
    display: flex;
    background-image: url('../img/ivonnelafuente/ivom1.jpg');
}

@media (min-width: 992px) {
    .bloque-desktop { display: flex; }
    .bloque-mobile { display: none; }
}

/* --- TÍTULO: REPORTAJES --- */
.rep-title {
    font-family: 'Chillax Variable', sans-serif;
    font-size: 7.5rem;
    font-weight: 800;
    color: #FFFFFF;
    
    position: absolute;
    top: 16.6%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 100%;
    text-align: center;
    z-index: 50;
    letter-spacing: 2px;

    /* SOMBRA PARA LEGIBILIDAD: 
       Crea un halo suave de 15px de desenfoque para separar el texto del fondo */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
}

.rep-title span {
    color: #ff9100;
    display: inline-block;
}

/* --- TÍTULO: IVONNE LAFUENTE --- */
.rep-second {
    font-family: 'Chillax Variable', sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
    color: #FFFFFF;
    
    position: absolute;
    bottom: 15%; /* Ubicado en el tercio inferior como pediste */
    left: 50%;
    transform: translateX(-50%);
    
    width: 100%;
    text-align: center;
    z-index: 100;
    letter-spacing: 1px;

    /* SOMBRA PARA LEGIBILIDAD:
       Un poco más sutil debido al tamaño de fuente menor */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.rep-second span {
    color: #ff9100;
    font-weight: 700;
}

/* --- RESPONSIVE ÚNICO (Combinado para evitar contradicciones) --- */
@media (max-width: 768px) {
    .rep-title {
        font-size: 3rem;
        top: 12%; /* Ajustado para que no se pegue al borde */
        letter-spacing: 1px;
    }
    
    .rep-second {
        font-size: 2.8rem;
        bottom: 40%; /* En móviles solemos dejar menos margen inferior */
    }
}


/* --- TÍTULO: IVONNE LAFUENTE (Tercio Izquierdo y 2 Líneas) --- */
.rep-third {
    font-family: 'Chillax Variable', sans-serif;
    font-size: 2.5rem;         /* Ajustamos el tamaño al ser dos líneas */
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.1;          /* Controla la cercanía entre 'Ivonne' y 'Lafuente' */
    
    position: absolute;
    /* POSICIONAMIENTO EN EL TERCIO IZQUIERDO */
    left: 25%;               
    top: 50%;                  /* Centrado verticalmente respecto al bloque */
    transform: translate(-50%, -50%); 
    
    width: auto;               /* Que el ancho se ajuste al texto */
    text-align: center;        /* Alinea Ivonne y Lafuente entre sí por el centro */
    z-index: 120;
    letter-spacing: 1px;
    
    /* Sombra para legibilidad */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Control de color para las iniciales I y L en rep-third */
.rep-third span {
    color: #ff9100;            /* El mismo dorado que usas en los otros títulos */
    font-weight: 700;
}

/* IMPORTANTE: Como es exclusivo de Desktop, nos aseguramos que no rompa el móvil */
@media (max-width: 991px) {
    .rep-third {
        display: none; /* Se oculta en móviles si ya usas rep-second allí */
    }
}


/* --- IMAGEN HERO (Abajo a la derecha) --- */
.img-hero-desktop {
    position: absolute;
    bottom: 0 !important;   /* Pegada al borde inferior */
    right: 0 !important;    /* Pegada al borde derecho */
    
    /* Control de tamaño: Ajusta este % según qué tan grande quieras ver a Ivonne */
    height: 95vh; 
    width: auto;
    
    /* Z-INDEX: 
       50 para que esté por encima del fondo, 
       pero por DEBAJO de los títulos (que tienen 100) */
    z-index: 110; 
    
    margin: 0;
    padding: 0;
    display: block;
    
    /* Mejora visual: realza los colores vivos */
    filter: saturate(1.1) contrast(1.05);
}

/* --- DESAPARECER EN MÓVIL --- */
@media (max-width: 991px) {
    .img-hero-desktop {
        display: none;
    }
}


/* --- IMAGEN HERO MOBILE --- */
.img-hero-mobile {
    position: absolute;
    bottom: 0;           /* Pegada al borde inferior del móvil */
    left: 50%;           /* Centrado horizontal */
    transform: translateX(-50%);
    
    /* TAMAÑO: En móvil usamos 'vw' (ancho) o un '%' para que no se salga de los lados */
    width: 92vw;         
    height: auto;
    
    /* CAPAS: 
       Debe estar por DETRÁS de los textos (z-index < 100) 
       pero por DELANTE del fondo de pantalla. */
    z-index: 100; 
    
    display: block;
    pointer-events: none; /* Permite que el usuario toque botones que estén "detrás" */
    
    /* Filtro sutil para que los textos blancos resalten sobre ella */
    filter: saturate(1.1) contrast(1.05);
}

/* --- AJUSTES DE TEXTO PARA MÓVIL (Combinado) --- */
@media (max-width: 991px) {
    /* Aseguramos que el contenedor no corte la imagen */
    .bloque-mobile {
        overflow: hidden;
        position: relative;
    }

    /* Subimos un poco el título principal para que no tape la cara */
    .rep-title {
        font-size: 7.2rem !important;
        top: 10% !important;
        z-index: 100; /* Asegura que esté al frente */
        text-shadow: 0 4px 10px rgba(0,0,0,0.8); /* Sombra más fuerte para leer sobre la foto */
    }

    /* El nombre abajo debe quedar por delante de la base de la foto */
    .rep-second {
        font-size: 2.5rem !important;
        bottom: 5% !important;
        z-index: 100;
        text-shadow: 0 4px 10px rgba(0,0,0,0.8);
    }
}

/* --- OCULTAR EN DESKTOP --- */
@media (min-width: 992px) {
    .img-hero-mobile {
        display: none;
    }
}

/* --- TÍTULO: IVONNE LAFUENTE (Móvil/Tablet) --- */
.rep-second {
    font-family: 'Chillax Variable', sans-serif;
    color: #FFFFFF;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 100;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
    transition: all 0.4s ease; /* Para que el cambio de posición sea suave */
}

/* ESTADO A: TABLETS O CELULARES GRANDES (Entre 701px y 991px) */
/* Se ubica en el tercio inferior medido desde el bottom */
@media (min-width: 701px) and (max-width: 991px) {
    .rep-second {
        font-size: 2.5rem;
        top: auto;        /* Desactivamos el top previo */
        bottom: 15%;      /* Tercio inferior aproximado */
    }
}

/* ESTADO B: CELULARES PEQUEÑOS / PANTALLAS BAJO 700px */
/* Se ubica en el 25% (un cuarto) superior medido desde el top */
@media (max-width: 700px) {
    .rep-second {
        font-size: 1.8rem;
        bottom: auto;     /* Desactivamos el bottom previo */
        top: 25%;         /* Un cuarto superior verticalmente */
    }
}


/* Ajuste de la imagen para que no choque con el texto que ahora está arriba */
@media (max-width: 700px) {
    .rep-title {
        font-size: 4.8rem !important;
        top: 10% !important; /* Mantenemos el "Reportajes" bien arriba */
    }

    .img-hero-mobile {
        width: 85vw;
        /* Bajamos un poco la opacidad o brillo si el texto queda encima */
        filter: saturate(1.1) contrast(1.05);
    }
}


/* Sección 2 */

/* --- ESPECIFICACIONES SECCIÓN 2 --- */

/* Fondos para la Sección 2 */
.bloque-desktop.bloque-2 {
    background-image: url('../img/ivonnelafuente/ivod2-1.jpg'); 
    /* Si quieres la misma foto, usa la misma ruta */
}

.bloque-mobile.bloque-2 {
    background-image: url('../img/ivonnelafuente/ivom2-1.jpg');
}

/* DEPURACIÓN: 
   Como usas min-height: 100vh, las secciones se apilarán una debajo de otra.
   Asegúrate de que el body no tenga 'overflow: hidden' para permitir el scroll.
*/
body {
    overflow-x: hidden; /* Evita scroll lateral innecesario */
    overflow-y: auto;   /* Permite scroll vertical */
}

/* --- AJUSTES ESPECÍFICOS SECCIÓN 2 MOBILE (CORREGIDO) --- */
/* --- AJUSTE POSICIÓN CUARTO SUPERIOR S2 --- */
@media (max-width: 991px) {
    .bloque-2.bloque-mobile .rep-title {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100%;
        
        /* Ubicación en el cuarto superior: 
           Usamos un margen superior basado en la altura de la pantalla */
        margin-top: 8vh !important; 
        margin-bottom: 30px !important; /* Distancia corta hacia los párrafos */
        
        text-align: center;
        font-size: 2.5rem !important;
    }

    .bloque-2.bloque-mobile .contenido-hero {
        display: flex;
        flex-direction: column;
        /* Alineamos al inicio (top) para que el margin-top del título mande */
        justify-content: flex-start !important; 
        padding: 20px;
        min-height: 100vh;
    }
    
    .bloque-2.bloque-mobile .texto {
        margin-bottom: 15px;
        /* Si el fondo es oscuro, recuerda que #5e5e5e puede ser difícil de leer */
        color: #5e5e5e; 
        text-align: start;
        padding: 0 10px; /* Evita que el texto toque los bordes laterales */
    }
}

/* --- ESTILO GLOBAL PARA PÁRRAFOS DE TEXTO --- */
.texto {
    font-family: 'Chillax Variable', sans-serif;
    
    /* Aumento de tamaño: 20% más grande que el estándar */
    font-size: 1.2rem; 
    
    /* Peso de fuente: 400 es un "Medium". 
       Al ser fuente variable, puedes probar 450 o 550 para un ajuste fino */
    font-weight: 400; 
    
    /* Mejora de legibilidad para fuentes más pesadas */
    line-height: 1.6; 
    letter-spacing: 0.01em;
    
    /* Aseguramos que el color sea consistente, 
       pero puedes sobreescribirlo en secciones específicas */
    color: #5e5e5e; 
}

/* Ajuste para pantallas pequeñas para que no se vea gigante */
@media (max-width: 768px) {
    .texto {
        font-size: 1.15rem;
        font-weight: 400; /* Mantenemos el peso para que destaque */
    }
}


/* --- AJUSTES DE IMÁGENES SECCIÓN 2 MOBILE --- */
@media (max-width: 991px) {
    
    /* 1. Imagen Decorativa (Luna Pampina) */
    .img-hero-mobile.decorativa {
        width: 200px !important;
        height: 200px !important;
        object-fit: contain; /* Asegura que no se deforme */
        position: relative !important; /* Entra en el flujo del texto */
        left: 0 !important;
        transform: none !important;
        margin: 40px auto 20px auto; /* 40px de distancia del texto superior */
        display: block;
    }

    /* 2. Imagen de Ivonne (ivod2.png) */
    /* Usamos un selector específico para que solo afecte a la S2 */
    .bloque-2.bloque-mobile .img-hero-mobile:not(.decorativa) {
        position: relative !important;
        width: 90vw; /* Tamaño sugerido para impacto visual */
        height: auto;
        left: 0 !important;
        transform: none !important;
        margin: 30px auto 0 auto; /* Distancia respecto a la imagen decorativa */
        display: block;
    }

    /* 3. Aseguramos que el contenedor permita el crecimiento vertical */
    .bloque-2.bloque-mobile {
        height: auto !important; /* Permite que la sección crezca con el contenido */
        min-height: 100vh;
        padding-bottom: 50px; /* Espacio al final de la sección */
    }
}


/* --- SECCIÓN 2: BLOQUE DESKTOP --- */
/* 1. ESTADO POR DEFECTO (Móvil) */
/* Forzamos que el bloque mobile sea visible y el desktop esté oculto */
.bloque-2.bloque-mobile {
    display: flex;
}

.bloque-2.bloque-desktop {
    display: none;
}

/* 2. EL INTERRUPTOR (Media Query) */
/* "Cuando la pantalla sea IGUAL O MAYOR a 992px..." */
@media (min-width: 992px) {
    
    /* Ocultamos la versión móvil */
    .bloque-2.bloque-mobile {
        display: none !important;
    }

    /* Configuramos el contenedor principal de la sección 2 */
    .bloque-desktop.bloque-2 {
        display: flex !important;         /* Alinea los hijos horizontalmente */
        width: 100%;           /* Ocupa todo el ancho de la pantalla */
        height: 100vh;         /* Ocupa todo el alto de la ventana */
        overflow: hidden;      /* Evita scroll innecesario */
        position: relative;
    }

    /* Zona Izquierda al 50% */
    .bloque-2 .contenido-hero.left {
        width: 50%;
        height: 100%;
        background-image: url('../img/ivonnelafuente/ivod2-1.jpg');
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 5%;       /* Espacio interno para que el texto no toque el borde */
        position: relative;
    }

    /* EL TÍTULO: Forzamos su visibilidad */
    .titulo-mitad {
        position: relative;
        z-index: 10; /* Lo pone por encima de cualquier imagen decorativa */
        color: #FFFFFF; /* Prueba con blanco para descartar que se camufle con el fondo */
        text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* Sombra para resaltar sobre la foto */
        font-size: 4rem;
        font-weight: 700;
        margin-bottom: 30px;
    }

    .img-deco {
        /* CONTROL DE ANCHO: Puedes usar px, %, o vw */
        width: 200px; 
        
        /* MANTIENE LA PROPORCIÓN: Obliga al navegador a no estirar la imagen */
        height: auto; 
        
        /* OPCIONAL: Si la imagen es un logo o deco sobre el fondo */
        object-fit: contain; 

        /* 3. CENTRADO HORIZONTAL */
        /* 'display: block' es necesario para que 'margin: auto' funcione */
        display: block; 
        margin-left: auto;
        margin-right: auto;
    }

    /* Zona Derecha al 50% */
    .bloque-2 .contenido-hero.right {
        width: 50%;
        height: 100%;
        background-image: linear-gradient(
            rgba(23, 128, 203, 0.1), /* El tinte azulado */
            rgba(23, 128, 203, 0.1)
        ), 
        url('../img/ivonnelafuente/ivod2-2.jpg');
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        display: flex;
        justify-content: center; /* La mueve a la derecha */
        align-items: flex-end;   /* La mueve arriba */
        padding: 40px;             /* Margen de seguridad para que no toque los bordes */
    }

    /* --- LA TARJETA (DERECHA) --- */
    .text-card {
        display: flex;
        flex-direction: row;
        align-items: stretch; /* Importante: estira la imagen al alto del texto */
        padding: 0;           /* Eliminamos el padding para que la imagen pegue al borde */
        background-color: #ffffff;
        border-radius: 10px;  /* Redondeo general de la tarjeta */
        overflow: hidden;     /* Recorta la imagen según los bordes de la tarjeta */
        width: 90%;
        max-width: 600px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    /* IMAGEN DENTRO DE LA TARJETA */
    .card-img {
        width: 180px;         /* Controla el ancho de la foto */
        height: auto;         /* Se adapta al alto de la tarjeta */
        object-fit: cover;    /* Evita que se deforme la imagen */
        
        /* REDONDEO ESPECÍFICO */
        /* Sintaxis: Top-Left, Top-Right, Bottom-Right, Bottom-Left */
        border-radius: 10px 0 0 10px; 
        
        flex-shrink: 0;       /* Evita que el texto la aplaste */
    }

    /* CONTENEDOR DE TEXTO DENTRO DE LA TARJETA */
    .card-info {
        padding: 25px;        /* El aire interno ahora vive aquí */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .card-title {
        font-family: 'Chillax Variable', sans-serif;
        font-size: 2rem;
        font-weight: 600;
        color: #002d72;          /* Azul corporativo para el título sobre fondo blanco */
        margin-bottom: 10px;
    }

    .card-info .texto {
        color: #444;             /* Gris oscuro para legibilidad del párrafo */
        font-size: 1.1rem;
        line-height: 1.5;
        margin: 0;               /* Quita márgenes por defecto */
    }
}



/* --- SECCIÓN 1b: BLOQUE DESKTOP --- */
/* 1. ESTADO POR DEFECTO (Móvil) */
/* Forzamos que el bloque mobile sea visible y el desktop esté oculto */
.bloque-1b.bloque-mobile {
    display: flex;
    background-image: none;
    background-color: #FFFFFF;
}

/* 1. Forzamos el contenedor a apilar elementos uno debajo de otro */
    .bloque-mobile.bloque-1b .contenido-hero {
        display: flex;
        flex-direction: column; 
        justify-content: flex-start;
        align-items: center;
        padding: 20px;
        height: auto; /* Permite que crezca según el contenido */
    }

    /* 2. Reseteamos el título para que no flote (quite position: absolute) */
    .bloque-mobile.bloque-1b .rep-title {
        position: relative !important; 
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        font-size: 2.8rem !important;
        margin-top: 40px;
        margin-bottom: 20px;
        text-align: center;
        color: #090087;
        /* Sintaxis: x-offset | y-offset | blur-radius | color */
        text-shadow: 2px 2px 8px #4a55b8 !important;
    }

    /* 3. Aseguramos que el div reportaje ocupe su lugar en el flujo */
    .bloque-mobile.bloque-1b .reportaje {
        width: 100%;
        order: 2; /* Asegura que vaya después del título (que es order 1) */
        padding: 0 10px;
    }

    /* 4. La imagen ya tiene sus márgenes, solo aseguramos que vaya al final */
    .bloque-mobile.bloque-1b .img-1b {
        order: 3;
        margin-top: 30px;
    }

/* Estilos específicos para la imagen en el bloque móvil 1b */
.bloque-mobile.bloque-1b .img-1b {
    /* 1. CONTROL DE MÁRGENES */
    /* Aplica 10px en los cuatro lados */
    margin: 10px; 
    
    /* 2. REDONDEO DE ESQUINAS */
    border-radius: 10px;
    
    /* 3. AJUSTES DE VISUALIZACIÓN */
    /* Asegura que la imagen respete el ancho disponible restando los márgenes */
    width: calc(100% - 20px); 
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- CONTROL DE LA LISTA EN SECCIÓN 1b --- */

.bloque-1b .lista-personalizada {
    list-style: none;    /* 1. Elimina el bullet (punto) por defecto */
    padding-left: 5px;   /* Ajusta el margen izquierdo de la lista completa */
    margin-top: 20px;
}

.bloque-1b .lista-personalizada li {
    display: flex;       /* 2. Alinea el ícono y el texto en la misma línea */
    align-items: flex-start; 
    margin-bottom: 15px; /* Espacio entre cada ítem */
    
    /* 3. CAMBIO DE COLOR DE FUENTE DE LA LISTA */
    color: #090087;      /* Un gris elegante, cámbialo por el que prefieras */
    font-size: 1.05rem;
    line-height: 1.4;
}

/* 4. CONTROL DEL ÍCONO (BULLET) */
.bloque-1b .lista-personalizada li i {
    /* CAMBIO DE COLOR DEL ÍCONO */
    color: #090087;      /* Azul corporativo */
    
    /* CONTROL DE TAMAÑO */
    font-size: 0.85rem;  /* Aquí lo haces más pequeño (ajusta a tu gusto) */
    
    margin-right: 4px;  /* Espacio entre ícono y texto */
    margin-top: 2px;     /* Ajuste fino para centrarlo con la primera línea */
    flex-shrink: 0;      /* Evita que el ícono se deforme */
}

/* 5. COLOR PARA EL TEXTO DESTACADO (Misión/Visión) */
.bloque-1b .lista-personalizada li .destacado {
    color: #090087;      /* Un tono más oscuro para resaltar etiquetas */
    font-weight: 700;
    margin-right: 5px;
}

.bloque-1b.bloque-desktop {
    display: none;
}

/* 1b. EL INTERRUPTOR (Media Query) */
/* "Cuando la pantalla sea IGUAL O MAYOR a 992px..." */
@media (min-width: 992px) {
    
    /* Ocultamos la versión móvil */
    .bloque-1b.bloque-mobile {
        display: none !important;
    }

    /* Configuramos el contenedor principal de la sección 2 */
    .bloque-desktop.bloque-1b {
        display: flex !important;         /* Alinea los hijos horizontalmente */
        width: 100%;           /* Ocupa todo el ancho de la pantalla */
        height: 100vh;         /* Ocupa todo el alto de la ventana */
        overflow: hidden;      /* Evita scroll innecesario */
        position: relative;
        /* --- NUEVAS REGLAS PARA FONDO BLANCO --- */
        background-image: none !important; /* Anula la imagen heredada */
        background-color: #ffffff;         /* Define el fondo blanco */
    }

    /* IZQUIERDA: Contenedor de Imagen Estilizada */
    .bloque-1b .contenido-hero.left {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff; /* Un gris muy tenue para resaltar el blanco del lado derecho */
    }
    
    .rounded-image-holder {
        position: relative;
        width: 80%;
        height: 70%;
        border-radius: 30px; /* Puntas redondeadas */
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }

    .rounded-image-holder img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* MENSAJE DORADO SOBRE IMAGEN */
    .golden-message {
        position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    
    /* FONDO OSCURO: Negro al 60% de opacidad */
    background: rgba(0, 0, 0, 0.6); 
    
    /* EFECTO OPCIONAL: Desenfoque de fondo (estilo iPhone/Glassmorphism) */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    /* TEXTO: Dorado para mantener el concepto "Golden" */
    color: #ff9100; 
    
    padding: 15px;
    border-radius: 15px;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    
    /* BORDE: Un toque dorado sutil para elegancia */
    border: 1px solid rgba(255, 215, 0, 0.2);
    
    z-index: 10;
    }
/* DERECHA: Contenedor de Texto */
    .bloque-1b .contenido-hero.right {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 5%; 
        background-color: transparent !important;
        overflow-y: auto; /* Seguridad: permite scroll interno si la pantalla es muy baja */
    }

    /* Título específico para esta sección */
    .bloque-1b .titulo-mitad {
        color: #090087;
        text-shadow: 2px 2px 8px #4a55b8 !important;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 15px; /* Reducción de margen inferior */
    
        /* Escala entre 2rem y 3rem según el ancho del monitor */
        font-size: clamp(2rem, 4vw, 3rem); 
        line-height: 1.1;
    }

    /* 3. AJUSTE DE LA IMAGEN DECO: Para que no empuje el texto hacia arriba */
    .bloque-1b .img-deco {
        width: clamp(100px, 15vw, 200px); /* Se achica en pantallas pequeñas */
        margin-top: 15px;
        align-self: center; /* La centramos respecto al texto */
    }

    /* 4. REDUCCIÓN DE ESPACIOS EN LA LISTA */
    .bloque-1b .lista-personalizada {
        margin-top: 10px;
    }

    .bloque-1b .lista-personalizada li {
        margin-bottom: 8px; /* Espacio más compacto entre ítems */
        font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    }
}