/* ===========================
🌍 VARIABLES GLOBALES
=========================== */
:root {
    /* === 🖋 Texto: Sección 1 === */
    --color_texto_titulo_general: #ce2222;
    --color_texto_subtitulo_principal: #170bc5;
    --color_texto_parrafo_general: #0ed3d3;

    /* === 🖋 Texto: Sección 1 === */
    --color-texto-titulo-1: #a7970c;
    --color-subtitulo-1: #5ad321;
    --color-parrafo-1: #190db8;

    /* === 🖋 Texto: Sección 2 === */
    --color-texto-titulo-2: #000000;
    --color-subtitulo-2: #333333;
    --color-parrafo-2: #555555;

    /* === 🖋 Texto: Sección 3 === */
    --color-texto-titulo-3: #000000;
    --color-subtitulo-3: #333333;
    --color-parrafo-3: #555555;

    /* === 🎨 Fondo y contraste === */
    --color-de-fondo-solido: #ffffff;
    --color-contraste: #000000;

    /* === 🌈 Gradientes base === */
    --color-gradiente-1: #9c520c;
    --color-gradiente-2: #2efff5;
    --color-gradiente-3: #00CFFF;
    --color-gradiente-4: #FF00C8;

    /* === ✨ Gradiente global (opcional) === */
    --color-gradiente-global: linear-gradient(90deg, #007CFF, #8A2EFF, #00CFFF, #FF00C8);

    /* === 🎯 Colores principales === */
    --color-titulo: #29CD42;
    --color-subtitulo: #cccccc;
    --color-texto-boton: #ffffff;


    /* === 🎯 Colores principales === */
    --color_texto_boton_principal: #ffffff;
    --color_fondo_boton_principal: #cccccc;
    --altura-wapper: 0px;

    --margen_inferior: 0px;
    --margen_superior: 0px;
    --margen_izquierdo: 0px;
    --margen_derecho: 88px;
    --altura_del_espacio: 0px;
    --border_radius_boton: 0px;
    --text_align: center;
    --font_weight_title: 100;
    --font_size_title: 2.5rem;
    --letter_spacing_title: 1px;


}

.bloque1-wrapper {
    margin-top: var(--altura-wapper);
    color: var(--color_texto_parrafo_general);
    background: var(--color-de-fondo-solido);
}

/* 🎨 Presentación */

.presentacion {
    /* 🎨 Degradado suave con las variables globales */

    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.contenedor_presentacion {
    margin-top: 50px;
    max-width: 850px;
    text-align: center;
    background: var(--color-gradiente-1);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    color: var(--color-contraste);
    border: 3px solid var(--color-gradiente-2);
    /* <-- borde agregado */
}

/* 🖋 Título */
.contenedor_presentacion h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--color_texto_titulo_general);
}

/* 📝 Párrafo */
.contenedor_presentacion p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color_texto_parrafo_general);
}

/* 🌐 Responsivo */
@media (min-width: 768px) {
    .contenedor_presentacion h2 {
        font-size: 2.5rem;
    }

    .contenedor_presentacion p {
        font-size: 1.1rem;
    }
}

/* 🎨 tres cuerpos 1 */

/* 🎨 tres cuerpos 1 */

/* Título principal */
/* 🎨 TRESCUERPOS BLOQUE 1 */

/* ====== Título principal ====== */
#bloque1-trescuerpos1-wrapper {
    background: var(--color-de-fondo-solido);
}

#bloque1-trescuerpos1-wrapper h2 {
    color: var(--color_texto_titulo_general);
}

/* ====== Cards ====== */
#bloque1-trescuerpos1-wrapper .card {
    border: 1px solid var(--color-contraste);
    transition: transform 0.3s, background 0.3s, color 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: var(--color-gradiente-1, #fff);
    /* valor por defecto */
}

/* Hover de cards */
#bloque1-trescuerpos1-wrapper .card:hover {
    color: var(--color-texto-titulo-1);
    transform: translateY(-5px);
}

/* ====== Iconos dentro de las cards ====== */
#bloque1-trescuerpos1-wrapper i[id^="institucional_icono_"] {
    color: var(--color-gradiente-2) !important;
    /* usa tus variables */
    transition: color 0.3s ease, transform 0.3s ease;
    font-size: 3rem;
    /* tamaño consistente */
}

/* Hover de iconos */
#bloque1-trescuerpos1-wrapper .card:hover i[id^="institucional_icono_"] {

    transform: scale(1.1);
}

/* ====== Títulos y textos ====== */
#bloque1-trescuerpos1-wrapper .card-title {
    color: var(--color_texto_titulo_general);
}

#bloque1-trescuerpos1-wrapper .card-text {
    color: var(--color_texto_parrafo_general);
}







/* 🎨 BLOQUE 1 - TRES CUERPOS 2 (usa variables globales) */



#bloque1-trescuerpos2-wrapper {
    background-color: var(--color-de-fondo-solido);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* ====== Título general ====== */
#bloque1-trescuerpos2-wrapper #titulo-programas {
    color: var(--color_texto_titulo_general);
    font-weight: 600;
}

/* ====== Cards ====== */
#bloque1-trescuerpos2-wrapper .card {
    background-color: var(--color-gradiente-1);
    border: 1px solid var(--color-gradiente-2);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Hover de card */
#bloque1-trescuerpos2-wrapper .card:hover {
    transform: translateY(-6px);
    border-color: var(--color-contraste);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* ====== Imágenes ====== */
#bloque1-trescuerpos2-wrapper .card-img-top {
    border-bottom: 2px solid var(--color-gradiente-3);
    object-fit: cover;
    height: 220px;
}

/* ====== Título del programa ====== */
#bloque1-trescuerpos2-wrapper .card-title1 {
    color: var(--color-texto-titulo-1);
    font-weight: 600;
    margin-top: 1rem;
}

/* ====== Descripción ====== */
#bloque1-trescuerpos2-wrapper .card-text1 {
    color: var(--color-parrafo-1);
    font-size: 0.95rem;
}

/* ====== Hover de textos ====== */
#bloque1-trescuerpos2-wrapper .card:hover .card-title1 {
    color: var(--color-gradiente-4);
}


/* ====== Título del programa ====== */
#bloque1-trescuerpos2-wrapper .card-title2 {
    color: var(--color-texto-titulo-1);
    font-weight: 600;
    margin-top: 1rem;
}

/* ====== Descripción ====== */
#bloque1-trescuerpos2-wrapper .card-text2 {
    color: var(--color-parrafo-1);
    font-size: 0.95rem;
}

/* ====== Hover de textos ====== */
#bloque1-trescuerpos2-wrapper .card:hover .card-title2 {
    color: var(--color-gradiente-4);
}


/* ====== Título del programa ====== */
#bloque1-trescuerpos2-wrapper .card-title3 {
    color: var(--color-texto-titulo-1);
    font-weight: 600;
    margin-top: 1rem;
}

/* ====== Descripción ====== */
#bloque1-trescuerpos2-wrapper .card-text3 {
    color: var(--color-parrafo-1);
    font-size: 0.95rem;
}

/* ====== Hover de textos ====== */
#bloque1-trescuerpos2-wrapper .card:hover .card-title3 {
    color: var(--color-gradiente-4);
}





/* === BLOQUE 1 TRES CUERPOS PROFESIONAL === */

/* Sección principal */
#bloque1-trescuerpos3-wrapper .trescuerpos-section {
    background: var(--color-de-fondo-solido);
    text-align: center;
    padding: 5rem 1rem;
    transition: background 0.4s ease, color 0.4s ease;
}

/* Título general */
#bloque1-trescuerpos3-wrapper .titulo-general {
    color: var(--color_texto_titulo_general, #ffffff);
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Contenedor de argumentos: filas y espaciado */
#bloque1-trescuerpos3-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    /* Espacio entre columnas */
    justify-content: center;
}

/* Tarjetas individuales */
#bloque1-trescuerpos3-wrapper .argumento {
    background: linear-gradient(135deg, var(--color-gradiente-3, #1f1f1f), var(--color-gradiente-4, #3f3f3f));
    color: var(--color-parrafo-1, #ffffff);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    flex: 1 1 280px;
    /* Flexible pero mínimo 280px */
    max-width: 320px;
    /* Tamaño máximo uniforme */
    padding: 2rem 1.5rem;
    text-align: center;
    /* Centrar contenido dentro de la tarjeta */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover tarjetas */
#bloque1-trescuerpos3-wrapper .argumento:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* Íconos dentro de tarjetas */
#bloque1-trescuerpos3-wrapper .argumento .icono {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: inline-block;
}

/* Colores específicos de los íconos */
#eleccion_icono_1 {
    color: var(--color-gradiente-1, #ff7f50);
}

#eleccion_icono_2 {
    color: var(--color-gradiente-2, #00bfff);
}

#eleccion_icono_3 {
    color: var(--color-gradiente-3, #32cd32);
}

/* Título de cada argumento */
#bloque1-trescuerpos3-wrapper .argumento .titulo-argumento {
    color: var(--color-texto-titulo-1, #ffffff);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}

/* Párrafo de cada argumento */
#bloque1-trescuerpos3-wrapper .argumento .parrafo-argumento {
    color: var(--color-parrafo-1, #dddddd);
    font-size: 1rem;
    line-height: 1.6;
}

/* Separación entre tarjetas en móviles */
@media (max-width: 768px) {
    #bloque1-trescuerpos3-wrapper .argumento {
        max-width: 90%;
        margin: 1rem auto;
    }

    #bloque1-trescuerpos3-wrapper .titulo-general {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
}

/* === BLOQUE 1 galeria1 === */


/* === BLOQUE 1 GALERÍA === */
#bloque1-galeria-1-wrapper {
    background: var(--color-de-fondo-solido);
    /*color: var(--color-texto-parrafo-general);*/
    /*ding: 50rem 0;*/
}

/* Título principal */
#bloque1-galeria-1-wrapper .titulo-galeria {
    color: var(--color_texto_titulo_general);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* Botón principal */
#bloque1-galeria-1-wrapper .boton-galeria {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--color_texto_boton_principal);
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 2rem;
    transition: all 0.3s ease;
}

#bloque1-galeria-1-wrapper .boton-galeria:hover {
    background: var(--color-contraste);
    color: var(--color_texto_boton_principal);
}

/* Tarjetas principales */
#bloque1-galeria-1-wrapper .card-galeria {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 0.5rem;
    background: var(--color-de-fondo-solido);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#bloque1-galeria-1-wrapper .card-galeria:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Imagen */
#bloque1-galeria-1-wrapper .img-galeria {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay */
#bloque1-galeria-1-wrapper .overlay-galeria {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    color: var(--color-titulo);
}

/* Títulos dentro de las tarjetas */
#bloque1-galeria-1-wrapper .titulo-actividad {
    color: var(--color-texto-titulo-1);
    text-transform: capitalize;
    font-weight: 600;
    margin: 0;
}

/* === BLOQUE 1: Carrusel de Testimonios === */
#bloque1-carrusel-1-wrapper {
    margin-top: 100px;
    background: linear-gradient(180deg, var(--color-de-fondo-solido) 0%, var(--color-gradiente-3, #fafafa) 100%);

    padding: 80px 0;
    overflow: hidden;
}

/* 🏷️ Encabezados */
#testimonios-titulo-pequenio {
    color: var(--color_texto_subtitulo_principal);
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}

#testimonios-titulo-grande {
    color: var(--color_texto_titulo_general);
    font-size: 2.6rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
}

/* 🎞️ Carrusel principal */
#testimoniCarousel {
    max-width: 750px;
    margin: 0 auto;
    position: relative;
}

.carousel-item {
    transition: transform 1s ease, opacity 1s ease;
}

/* 🧱 Tarjeta del testimonio */
.card {
    background-color: var(--color-gradiente-3);
    border-radius: 18px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 60px 40px 40px;
    position: relative;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(39, 37, 37, 0.12);
}

/* 👤 Imagen circular */
.card figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -80px;
}

.card img.rounded-circle {
    height: 120px;
    width: 120px;
    border-radius: 50%;
    border: 4px solid transparent;
    background-image: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-top: 100px;
}

/* 🖋️ Texto del testimonio */
.card-body blockquote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-parrafo-1);
    margin: 30px auto;
    line-height: 1.6;
    position: relative;
}

.card-body blockquote::before {
    content: "“";
    font-size: 3rem;
    color: var(--color-gradiente-1);
    position: absolute;
    top: -25px;
    left: 10px;
    opacity: 0.3;
}

.card-body h4 {
    color: var(--color-texto-titulo-1);
    font-weight: 700;
    margin-top: 10px;
}

.card-body h5 {
    color: var(--color-subtitulo-1);
    font-size: 0.95rem;
    font-weight: 500;
}

/* 🔘 Botones de navegación */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--color-gradiente-3);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-size: 70% 70%;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: var(--color-gradiente-3);
    transform: scale(1.15);
}

/* 📱 Responsive */
@media (max-width: 768px) {
    #testimonios-titulo-grande {
        font-size: 2rem;
    }

    .card {
        padding: 50px 25px 35px;
    }

    .card img.rounded-circle {
        height: 80px;
        width: 80px;
    }

    .card-body blockquote {
        font-size: 1rem;
        padding: 0 10px;
    }
}


/* ==== Personalización del carrusel 2 ==== */
/* === BLOQUE 1: Carrusel 2 (Estilo Interno Elegante) === */
#bloque1-carrusel-2-wrapper {
    margin-top: 120px;
    margin-bottom: 120px;

    background: var(--color-de-fondo-solido);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

/* 🎞️ Contenedor del carrusel */
.bloque1-carrusel-2-wrapper .carousel {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* ==== 🖼️ Imágenes ==== */
.img-rpl {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.6s ease, box-shadow 0.4s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ✨ Efecto visual al pasar el mouse */
.img-rpl:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}

/* ==== 🎛️ Botones del carrusel ==== */
.bloque1-carrusel-2-wrapper .carousel-control-prev-icon,
.bloque1-carrusel-2-wrapper .carousel-control-next-icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-image: none;
    background: linear-gradient(135deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    opacity: 0.9;
}

/* 🔹 Flechas SVG */
.bloque1-carrusel-2-wrapper .carousel-control-prev-icon::after,
.bloque1-carrusel-2-wrapper .carousel-control-next-icon::after {
    content: "";
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-top: 3px solid var(--color-contraste);
    border-right: 3px solid var(--color-contraste);
    transition: transform 0.3s ease;
}

.bloque1-carrusel-2-wrapper .carousel-control-prev-icon::after {
    transform: rotate(-135deg);
}

.bloque1-carrusel-2-wrapper .carousel-control-next-icon::after {
    transform: rotate(45deg);
}

/* 🌈 Hover con efecto de resplandor */
.bloque1-carrusel-2-wrapper .carousel-control-prev-icon:hover,
.bloque1-carrusel-2-wrapper .carousel-control-next-icon:hover {
    transform: scale(1.15);
    box-shadow: 0 0 15px var(--color-gradiente-2);
    opacity: 1;
}

/* 🧭 Botones de navegación (espaciado del área clicable) */
.bloque1-carrusel-2-wrapper .carousel-control-prev,
.bloque1-carrusel-2-wrapper .carousel-control-next {
    width: 8%;
}

/* === 🔘 Indicadores === */
.carousel-indicators [data-bs-target] {
    background-color: var(--color-gradiente-1);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.carousel-indicators .active {
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));
    opacity: 1;
}

/* === 🧱 Títulos o textos opcionales debajo === */
#bloque1-carrusel-2-wrapper h3,
#bloque1-carrusel-2-wrapper h2 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 40px;
    background: linear-gradient(90deg,
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==== 📱 Responsividad ==== */
@media (max-width: 992px) {
    .img-rpl {
        height: 320px;
    }

    #bloque1-carrusel-2-wrapper {
        margin-top: 80px;
        margin-bottom: 80px;
        padding: 40px 0;
    }
}

@media (max-width: 768px) {
    .img-rpl {
        height: 250px;
    }

    .bloque1-carrusel-2-wrapper .carousel-control-prev-icon,
    .bloque1-carrusel-2-wrapper .carousel-control-next-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}









/* ==== Personalización del Mapa1 usando variables globales ==== */



/* ===========================
🎨 BLOQUE MAPA 1 — ESTILOS PERSONALIZADOS
=========================== */

.mapa1-wrapper {
    /* background: var(--color-de-fondo-solido);*/
    color: var(--color_texto_parrafo_general);
    padding: 2rem 0;
    background: var(--color-de-fondo-solido);
}

/* 📍 Tarjeta */
.mapa1-card {
    background: var(--color-gradiente-1);
    border: 2px solid var(--color-gradiente-2);
    border-radius: 16px;
    transition: box-shadow 0.3s ease;
}

.mapa1-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* 🧭 Título */
.mapa1-titulo {
    color: var(--color_texto_titulo_general);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* 📝 Subtítulos */
.mapa1-subtitulo {
    color: var(--color_texto_subtitulo_principal);
    font-weight: 600;
}

/* 🔗 Enlaces */
.mapa1-link {
    color: var(--color-gradiente-3);
    text-decoration: none;
    transition: color 0.3s ease;
}

.mapa1-link:hover {
    color: var(--color-gradiente-4);
    text-decoration: underline;
}

/* 🖼️ Íconos */
.mapa1-icono {
    font-size: 1.8rem;
    color: var(--color-gradiente-2);
    margin-right: 0.8rem;
    transition: color 0.3s ease;
}

.mapa1-item:hover .mapa1-icono {
    color: var(--color-gradiente-4);
}

/* 🗺️ Mapa */
.mapa1-mapa iframe {
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

/* 📱 Responsividad */
@media (max-width: 768px) {
    .mapa1-wrapper {
        padding: 1rem;
    }

    .mapa1-icono {
        font-size: 1.5rem;
    }
}


/* ===========================
🌍 Mapa2 — Dinámico con variables globales
=========================== */
/* 📱 Responsividad */


/* ===========================
🌍 Mapa2 — Diseño Profesional y Responsivo
=========================== */

/* 🔹 Contenedor principal */
.mapa2-wrapper {
    background: var(--color-de-fondo-solido);

    padding: 4rem 1.5rem;
}

/* 🔹 Sección interior */
.mapa2-seccion-contacto {
    background: var(--color-de-fondo-solido);
    border-radius: 1.5rem;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    padding: 3rem 2rem;
    transition: background 0.3s ease;
}

/* 🔹 Título y subtítulo */
.mapa2-titulo {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.8rem, 2vw + 1rem, 2.5rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.mapa2-titulo:hover {
    color: var(--color-contraste);
}

.mapa2-subtitulo {
    color: var(--color_texto_subtitulo_principal);
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* 🔹 Contenedor del mapa */
.mapa2-mapa {
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--color-de-fondo-solido);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    border: 2px solid var(--color-contraste);
}

.mapa2-mapa:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

/* 🔹 Iframe del mapa */
.mapa2-mapa iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--color-de-fondo-solido);
    border-radius: inherit;
}

/* 📱 Responsividad */
@media (max-width: 768px) {
    .mapa2-seccion-contacto {
        padding: 2rem 1rem;
    }

    .mapa2-titulo {
        font-size: 1.8rem;
    }

    .mapa2-subtitulo {
        font-size: 0.95rem;
    }
}

@media (min-width: 1200px) {
    .mapa2-wrapper {
        padding: 5rem 0;
    }
}


/* ===========================
🌍 Mapa3 — Mejora responsiva y controlada
=========================== */

#bloque1-mapa-3-wrapper {
    margin-top: 829px;
    /* reduce el margin-top exagerado */

    background: var(--color-de-fondo-solido);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Wrapper general */
.mapa3-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--color-de-fondo-solido);

    padding: clamp(2rem, 3vw, 4rem) 1.25rem;
}

/* Contenedor mapa + tarjeta */
.mapa3-contenedor {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

/* Mapa */
.mapa3-mapa {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.09);
    min-height: 420px;
}

.mapa3-mapa iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: none;
}

.color1 {
    color: var(--color-gradiente-1);
}

.color2 {
    color: var(--color-gradiente-2);
}

.color3 {
    color: var(--color-gradiente-3);
}

/* Tarjeta superpuesta (solo desktop) */
.mapa3-card {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    width: min(380px, 40%);
    background: var(--color-gradiente-1);
    border: 1px solid var(--color-contraste);
    border-radius: 0.9rem;
    padding: 1.25rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

/* Hover elegante solo en desktop */
@media (hover: hover) and (min-width: 992px) {
    .mapa3-card:hover {
        transform: translateY(-52%) scale(1.02);
        box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18);
    }
}

/* --- Contenido dentro de la tarjeta --- */
.mapa3-titulo {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.2rem, 1.6vw, 1.6rem);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.mapa3-titulo-pequeño {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.2rem, 1.6vw, 1.6rem);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

#contacto-titulo-mapa3 {
    color: var(--color_texto_subtitulo_principal);
}

/* ---------- RESPONSIVE: tablet ---------- */
@media (max-width: 991.98px) {
    .mapa3-card {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 720px;
        margin: 0 auto 0.5rem auto;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
        background: transparent;
        /* <- se vuelve invisible */
        border: none;
        padding: 0;
        text-align: center;
    }

    /* Solo deja visible el título */
    .mapa3-card {
        display: none;
    }

    .mapa3-mapa iframe {
        min-height: 380px;
    }
}

/* ---------- RESPONSIVE: mobile ---------- */
@media (max-width: 575.98px) {
    .mapa3-wrapper {
        padding: 2rem 0.8rem;
    }

    .mapa3-mapa iframe {
        min-height: 300px;
    }

    .mapa3-titulo {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

}

/* ===========================
🧱 BLOQUE: TÍTULO 1
(Título grande centrado)
=========================== */
.bloque-titulo-wrapper {
    margin-top: 829px;

}


/* ===========================
🎯 ESTILOS DE TÍTULOS
=========================== */

/* === 🟦 Título 1: Grande centrado === */
.titulo1div {
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    background: var(--color-de-fondo-solido);
    border-radius: var(--border_radius_boton);
}

.titulo1 {
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;

}

/* === 🟩 Título 2: Título + subtítulo === */
.titulo2div {
    text-align: var(--text_align);
    background: var(--color-de-fondo-solido);
    padding: 1.5rem 0;
    border-radius: var(--border_radius_boton);
}

.titulo2 {

    color: var(--color_texto_titulo_general);

    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.titulo2div p {
    color: var(--color_texto_subtitulo_principal);
    font-size: 1rem;
    margin-top: 0.5rem;
}

/* === 🟧 Título 3: Alineado a la izquierda === */
.titulo3div {
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    background: var(--color-de-fondo-solido);
    border-radius: var(--border_radius_boton);
}

.titulo3 {
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* === 🟥 Título 4: Línea decorativa debajo === */
.titulo4div {
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    background: var(--color-de-fondo-solido);
    border-radius: var(--border_radius_boton);
}

.titulo4 {
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

}

.titulo4div .linea-decorativa {
    width: 80px;
    height: 4px;
    margin: 0 auto;
    background: var(--color-gradiente-global);
    border-radius: 4px;
}

/* === 🟨 Título 5: Con fondo sólido === */
.titulo5div {
    border-radius: var(--border_radius_boton);
    background: var(--color-gradiente-global);
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);

}

.titulo5 {

    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* === 🟪 Título 6: Izquierda con subtítulo === */
.titulo6div {
    border-radius: var(--border_radius_boton);
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    background: var(--color-de-fondo-solido);
}

.titulo6 {
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.titulo6div p {
    color: var(--color_texto_subtitulo_principal);
    margin-top: 0.5rem;
    font-size: 1rem;
}

/* === 🟫 Título 7: Última palabra resaltada === */
.titulo7div {
    border-radius: var(--border_radius_boton);
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    background: var(--color-de-fondo-solido);
}

.titulo7 {

    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.titulo7 .resaltado {
    background: var(--color-gradiente-global);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* === ⚪ Título 8: Dentro de tarjeta === */
.titulo8div {
    border-radius: var(--border_radius_boton);
    text-align: var(--text_align);
    background: var(--color-de-fondo-solido);
    border: 1px solid var(--color-contraste);
    border-radius: 12px;
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.titulo8 {

    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* === 🟤 Título 9: Con ícono === */
.titulo9div {
    border-radius: var(--border_radius_boton);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    background: var(--color-de-fondo-solido);
}

.titulo9div i {

    font-size: 4rem;
    font-weight: 700;
    color: var(--color-gradiente-1);
}

.titulo9 {
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* === ⚫ Título 10: Sobre fondo con subtítulo === */
.titulo10div {
    border-radius: var(--border_radius_boton);
    text-align: var(--text_align);
    background: var(--color-gradiente-global);

    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);

}

.titulo10 {
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    color: var(--color_texto_titulo_general);
}

.titulo10div p {
    color: var(--color_texto_subtitulo_principal);
    font-size: 1rem;
}

/* === 🔵 Título 11: Con borde lateral === */
.titulo11div {
    border-radius: var(--border_radius_boton);
    border-left: 6px solid var(--color-gradiente-1);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    background: var(--color-de-fondo-solido);
    text-align: var(--text_align);
}

.titulo11 {
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-transform: uppercase;
}

/* === 🟣 Título 12: Con sombra de texto === */
.titulo12div {
    border-radius: var(--border_radius_boton);
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    background: var(--color-de-fondo-solido);
}

.titulo12 {

    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.2);
}

/* === 🟠 Título 13: Mayúsculas con línea superior === */
.titulo13div {
    border-radius: var(--border_radius_boton);
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    border-top: 4px solid var(--color-gradiente-1);
    background: var(--color-de-fondo-solido);
}

.titulo13 {
    border-radius: var(--border_radius_boton);
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === 🟢 Título 14: Fondo con transparencia === */
.titulo14div {
    border-radius: var(--border_radius_boton);
    text-align: var(--text_align);
    background: rgba(0, 0, 0, 0.05);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    border-radius: 8px;
    backdrop-filter: blur(6px);
}

.titulo14 {

    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* === 🔴 Título 15: Con subrayado animado === */
.titulo15div {
    border-radius: var(--border_radius_boton);
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    position: relative;
    background: var(--color-de-fondo-solido);
}

.titulo15 {
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    position: relative;
    display: inline-block;
}

.titulo15::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 4px;
    background: var(--color-gradiente-global);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.titulo15div:hover .titulo15::after {
    width: 100%;
}

/* === ⚫ Título 16: Con letras espaciadas === */
.titulo16div {
    border-radius: var(--border_radius_boton);
    background: var(--color-de-fondo-solido);
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
}

.titulo16 {
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    text-transform: uppercase;
}

/* === ⚪ Título 17: Degradado en el texto === */
.titulo17div {
    border-radius: var(--border_radius_boton);
    background: var(--color-de-fondo-solido);
    text-align: var(--text_align);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
}

.titulo17 {

    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    background: var(--color-gradiente-global);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === 🟤 Título 18: Con marco rectangular === */
.titulo18div {
    text-align: var(--text_align);
    border: 3px solid var(--color-gradiente-1);
    border-radius: var(--border_radius_boton);
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    background: var(--color-de-fondo-solido);
}

.titulo18 {
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* ===========================
🧱 BLOQUE: Parrafo
(Título grande centrado)
=========================== */
/* 🎯 Estilo base (por defecto, laptops y pantallas grandes) */
.bloque-parrafo-wrapper {
    /*margin-top: 830px;*/
}

/* 📱 Para celulares (pantallas pequeñas, menos de 768px de ancho) */
@media (max-width: 768px) {
    .bloque-parrafo-wrapper {
        /*  margin-top: 750px;*/
        /* ajusta según el diseño móvil */
    }
}

/* 💻 Para tablets (entre 769px y 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .bloque-parrafo-wrapper {
        /*margin-top: 500px;*/
        /* ajuste intermedio */
    }
}

/* ===========================
🎯 ESTILOS DE PÁRRAFOS
=========================== */

/* Contenedor general para centrar horizontalmente y limitar vertical */
.parrafo1-wrapper {
    display: flex;
    justify-content: center;
    /* centrado horizontal */

    align-items: flex-start;
    /* alineado arriba, no pegado a la ventana */
    padding: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    /* espacio arriba, lados y abajo */
    background: var(--color-de-fondo-solido);
    box-sizing: border-box;
    min-height: auto;
    /* ya no ocupa 100vh completo */
}

/* === 🟦 Parrafo1: Título + Párrafo único (Profesional, refinado) === */
.parrafo1div {
    text-align: var(--text_align);

    background: var(--color-gradiente-1);
    border-radius: var(--border_radius_boton);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 800px;
    padding: 2rem 1.5rem;
    /* padding interno */
}

.parrafo1div:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.parrafo1-titulo {
    color: var(--color_texto_titulo_general);
    font-size: var(--font_size_title);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.75rem;
    line-height: 1.2;
    position: relative;
    display: inline-block;
}

.parrafo1-titulo::after {
    content: "";
    display: block;
    width: 50px;
    height: 4px;
    background: var(--color-gradiente-2);
    margin: 0.5rem auto 0 auto;
    border-radius: 2px;
}

.parrafo1-texto {
    color: var(--color_texto_parrafo_general);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .parrafo1-wrapper {
        padding: 3rem 1rem 2rem 1rem;
    }

    .parrafo1-titulo {
        font-size: 2rem;
    }

    .parrafo1-texto {
        font-size: 1rem;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .parrafo1-wrapper {
        padding: 1rem;
    }

    .parrafo1-titulo {
        font-size: 2rem;
    }

    .parrafo1-texto {
        font-size: 1rem;
    }
}

/* === 🟩 Parrafo2: Título + Subtítulo + Párrafo === */
.parrafo2-container {
    background: var(--color-de-fondo-solido);

    /* Layout más ordenado y elegante */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;

    /* Control de los márgenes exteriores con variables */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    padding-left: var(--margen_izquierdo);
    padding-right: var(--margen_derecho);
}

/* === TÍTULO PRINCIPAL === */
.parrafo2-titulo {
    color: var(--color_texto_titulo_general);

    /* Tamaño adaptable y consistente */
    font-size: clamp(1.5rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    line-height: 1.3;
    /* Más compacto para títulos */
    margin: 0;
    text-align: center;
}

/* === SUBTÍTULO === */
.parrafo2-subtitulo {
    color: var(--color_texto_subtitulo_principal);

    /* Más coherente con el título */
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    font-weight: 500;

    line-height: 1.35;
    margin: 0;
    text-align: center;
}

/* === PÁRRAFO === */
.parrafo2-texto {
    color: var(--color_texto_parrafo_general);

    /* Mejor lectura y más control en móviles */
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    line-height: 1.65;

    /* Control del ancho para no saturar */
    max-width: 720px;

    margin: 0;
    text-align: center;
}

/* === 🟧 Parrafo3: Título + 2 párrafos (profesionalizado) === */
.parrafo3-container {

    text-align: var(--text_align);
    padding: clamp(1.5rem, 3vw, 3rem) 1.5rem;
    /* Control de los márgenes exteriores con variables */


    /* responsivo */
    background: var(--color-de-fondo-solido);
    border-radius: var(--border_radius_boton);
    /* más elegante */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* sombra suave profesional */
    max-width: 800px;
    /* lectura cómoda */
    margin: 2rem auto;

    /* centrado horizontal */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* separación consistente */
}

.parrafo3-titulo {
    color: var(--color_texto_titulo_general);
    /* Tamaño adaptable y consistente */
    font-size: clamp(1.5rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    line-height: 1.3;
    margin: 0;
}

.parrafo3-texto {
    color: var(--color_texto_parrafo_general);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.7;
    margin: 0;
}

/* Responsive: ajustar padding en móviles */
@media (max-width: 768px) {
    .parrafo3div {
        padding: 1rem 0.75rem;
    }
}

/* === 🟥 Parrafo4: Título + 3 párrafos en columnas === */
/* === 🟨 Parrafo4: Título + 3 párrafos en columnas (profesionalizado) === */
.parrafo4-container {
    text-align: center;
    /* Control de los márgenes exteriores con variables */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    padding-left: var(--margen_izquierdo);
    padding-right: var(--margen_derecho);

    background: var(--color-de-fondo-solido);
    border-radius: var(--border_radius_boton);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    max-width: 1200px;
    margin: 2rem auto;
}

.parrafo4-titulo {
    color: var(--color_texto_titulo_general);
    /* Tamaño adaptable y consistente */
    font-size: clamp(1.5rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 2rem;
    line-height: 1.3;
}

.parrafos-columnas {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.parrafos-columnas .columna {
    flex: 1 1 30%;
    min-width: 220px;
    color: var(--color_texto_parrafo_general);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.7;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    /* sutil diferenciación */
    padding: 1rem;
    border-radius: var(--border_radius_boton);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parrafos-columnas .columna:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* === 🟨 Parrafo5: Solo párrafo (profesionalizado) === */
.parrafo5-container {

    padding: clamp(1.5rem, 3vw, 2rem);
    max-width: 800px;
    /* ancho de lectura cómodo */
    margin: 2rem auto;
    /* centrado horizontal */
    background: var(--color-de-fondo-solido);
    border-radius: 10px;
    /* suaviza bordes */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* profundidad sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parrafo5-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.parrafo5-texto {
    color: var(--color_texto_parrafo_general);
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.7;
    text-align: justify;
    text-justify: inter-word;
    letter-spacing: 0.25px;
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

/* Animación ligera */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
🎯 ESTILOS DE PÁRRAFOS (6 a 10)
=========================== */
/* === 🟦 Parrafo6: Subtítulo + Párrafo (profesionalizado y único) === */
.parrafo6div {
    position: relative;
    text-align: center;
    /* Control de los márgenes exteriores con variables */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    padding-left: var(--margen_izquierdo);
    padding-right: var(--margen_derecho);
    max-width: 700px;
    margin: 2rem auto;
    background: linear-gradient(135deg, var(--color-gradiente-1) 0%, var(--color-gradiente-2) 100%);
    border-radius: var(--border_radius_boton) 5px var(--border_radius_boton) 5px;
    /* forma irregular y divertida */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parrafo6div:hover {
    transform: scale(1.02) rotate(-0.5deg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.parrafo6-subtitulo {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
    position: relative;
}

/* decorativo debajo del subtítulo */
.parrafo6-subtitulo::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-gradiente-3);
    margin: 0.5rem auto 0 auto;
    border-radius: 2px;
}

.parrafo6-texto {
    color: var(--color_texto_parrafo_general);
    font-size: clamp(0.95rem, 1.5vw, 1.125rem);
    line-height: 1.7;
    margin-top: 1rem;
    text-align: justify;
    text-justify: inter-word;
    letter-spacing: 0.2px;
    animation: slideInFade 0.6s ease forwards;
    opacity: 0;
}

/* animación ligera */
@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 🟩 Parrafo7: Título + Subtítulo + 2 párrafos (profesionalizado) === */
.parrafo7div {
    position: relative;
    text-align: var(--text_align);
    /* Control de los márgenes exteriores con variables */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    padding-left: var(--margen_izquierdo);
    padding-right: var(--margen_derecho);
    max-width: 800px;
    margin: 2rem auto;
    background: var(--color-de-fondo-solido);
    /* fondo limpio */
    border-left: 5px solid var(--color-gradiente-1);
    /* acento visual */
    border-radius: var(--border_radius_boton);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parrafo7div:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.parrafo7-titulo {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.5rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

.parrafo7-subtitulo {
    color: var(--color_texto_subtitulo_principal);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 500;
    margin-bottom: 1rem;
    position: relative;
}

/* línea decorativa debajo del subtítulo */
.parrafo7-subtitulo::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--color-gradiente-1);
    margin-top: 0.5rem;
    border-radius: 2px;
}

.parrafo7-texto {
    color: var(--color_texto_parrafo_general);
    font-size: clamp(0.95rem, 1.5vw, 1.125rem);
    line-height: 1.7;
    margin-bottom: 1rem;
    text-align: justify;
    text-justify: inter-word;
    letter-spacing: 0.2px;
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

/* animación ligera */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 🟧 Parrafo8: Título + Párrafo con fondo (profesionalizado) === */
/* === 🟧 Parrafo8: Título + Párrafo con fondo (colores personalizados) === */
.parrafo8div {
    text-align: var(--text_align);
    /* Control de los márgenes exteriores con variables */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    padding-left: var(--margen_izquierdo);
    padding-right: var(--margen_derecho);
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    border-radius: var(--border_radius_boton);
    color: var(--color_texto_titulo_general);
    /* título */
    max-width: 900px;
    margin: 2rem auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parrafo8div::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: rgba(255, 255, 255, 0.05);
    transform: rotate(45deg);
    pointer-events: none;
}

.parrafo8div:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.parrafo8-titulo {
    font-size: clamp(1.5rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--color_texto_titulo_general);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.parrafo8-texto {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    color: var(--color_texto_parrafo_general);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards 0.2s;
}

/* animación ligera */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 🟥 Parrafo9: Título + Párrafo + Imagen lateral (Glass + profesional) === */
.parrafo9div {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.08);
    /* glass suave */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--border_radius_boton);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parrafo9div:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.parrafo9-img {
    max-width: 220px;
    border-radius: var(--border_radius_boton);
    object-fit: cover;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.parrafo9-img:hover {
    transform: scale(1.05);
}

.parrafo9-textos {
    flex: 1;
    min-width: 250px;
}

.parrafo9-titulo {
    font-size: clamp(1.5rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.parrafo9-texto {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
    text-align: justify;
    opacity: 0;
    animation: fadeInLeft 0.6s ease forwards 0.2s;
}

/* Animación ligera para entrada */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === 🟨 Parrafo10: 3 párrafos en columnas profesional === */
.parrafo10div {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    /* Control de los márgenes exteriores con variables */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    padding-left: var(--margen_izquierdo);
    padding-right: var(--margen_derecho);
    background: rgba(255, 255, 255, 0.08);
    /* glass ligero */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--border_radius_boton);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parrafo10div:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

.parrafo10div .columna {
    flex: 1 1 30%;
    min-width: 200px;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    /* leve separación visual */
    border-radius: 12px;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
    text-align: justify;
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.parrafo10div .columna:nth-child(1) {
    animation-delay: 0.1s;
}

.parrafo10div .columna:nth-child(2) {
    animation-delay: 0.3s;
}

.parrafo10div .columna:nth-child(3) {
    animation-delay: 0.5s;
}

/* Animación ligera */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
🎯 ESTILOS DE PÁRRAFOS (11 a 15)
=========================== */

/* === 🟦 Parrafo11: Título + 2 párrafos profesional === */
.parrafo11div {
    text-align: left;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    /* glass ligero */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parrafo11-titulo {
    font-size: clamp(1.5rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
    margin-bottom: 1rem;
    line-height: 1.3;
    text-align: var(--text_align);
}

/* Contenedor de columnas */
.parrafo11div .columnas-2 {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Columnas individuales */
.parrafo11div .columna {
    flex: 1 1 45%;
    min-width: 220px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
    text-align: justify;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.4s ease, box-shadow 0.3s ease;
}

/* Hover effect sobre columna */
.parrafo11div .columna:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Animación de aparición */
.parrafo11div .columna:nth-child(1) {
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.1s;
}

.parrafo11div .columna:nth-child(2) {
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.3s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 🟩 Parrafo12: Título centrado + párrafo justificado === */
/* === 🟦 Parrafo12: Título centrado + párrafo justificado profesional === */
/* === 🟦 Parrafo12: Título centrado + párrafo justificado profesional con variables globales === */
/* === 🟦 PARARFO 12 — Card Clean Premium === */
.parrafo12div {
    position: relative;
    text-align: var(--text_align);

    /* Espaciado controlado por variables + base */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    padding-left: var(--margen_izquierdo);
    padding-right: var(--margen_derecho);


    /* Fondo limpio con leve transparencia */
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Bordes suaves y modernos */
    border-radius: var(--border_radius_boton);
    border: 1px solid rgba(255, 255, 255, 0.12);

    /* Sombra clean (sin exagerar) */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;

    /* Animación inicial */
    opacity: 0;
    transform: translateY(18px);
    animation: fadeInUp 0.6s ease forwards;
}

/* === TÍTULO === */
.parrafo12-titulo {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    margin-bottom: 1rem;
    text-align: var(--text_align);
    line-height: 1.25;

    /* Sombra suave, limpia */
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.12);
}

/* === PÁRRAFO === */
.parrafo12-texto {
    color: var(--color_texto_parrafo_general);
    font-size: clamp(1rem, 2vw, 1.13rem);
    line-height: 1.7;

    text-align: justify;
    max-width: 740px;
    margin: 0 auto;
}

/* === Hover sutil === */
.parrafo12div:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.15);
}

/* === Animación === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 🟧 Parrafo13: Título + Subtítulo + 3 párrafos === */
/* === 🟧 Parrafo13 — Card limpia, moderna, elegante === */
.parrafo13div {
    position: relative;
    text-align: var(--text_align);

    /* Espaciados controlados por variables */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    padding-left: var(--margen_izquierdo);
    padding-right: var(--margen_derecho);

    /* Base */
    padding: 2rem 1.75rem;

    /* Fondo minimal con leve vidrio */
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Bordes limpios */
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);

    /* Sombra elegante */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);

    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* Animación inicial */
    opacity: 0;
    transform: translateY(18px);
    animation: fadeInUp 0.6s ease forwards;
}

/* Hover limpio y profesional */
.parrafo13div:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.14);
}

/* === Título === */
.parrafo13-titulo {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.5rem;
    line-height: 1.25;

    text-align: center;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.12);
}

/* === Subtítulo === */
.parrafo13-subtitulo {
    color: var(--color_texto_subtitulo_principal);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 500;
    margin-bottom: 1.2rem;
    text-align: center;
}

/* === Párrafos === */
.parrafo13-texto {
    color: var(--color_texto_parrafo_general);
    font-size: clamp(1rem, 2vw, 1.13rem);
    line-height: 1.7;
    margin-bottom: 0.9rem;

    max-width: 760px;
    margin-left: auto;
    margin-right: auto;

    transition: color 0.25s ease;
}

/* Hover sutil del texto: profesional */
.parrafo13-texto:hover {
    color: var(--color-gradiente-3);
}

/* === Animación de entrada === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 🟥 Parrafo14: Versión minimalista y elegante === */
.parrafo14div {
    position: relative;
    text-align: var(--text_align);
    padding: 2.2rem 2rem;
    background: #ffffff0d;
    /* muy sutil */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover suave */
.parrafo14div:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

/* Texto principal */
.parrafo14-texto {
    color: var(--color_texto_parrafo_general);
    font-size: 1.1rem;
    line-height: 1.75;
    font-weight: 500;
    margin-bottom: 1.6rem;
}

/* Secundarios minimalistas */
.parrafo14div .parrafos-secundarios p {
    color: var(--color_texto_parrafo_general);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.parrafo14div .parrafos-secundarios p:hover {
    color: var(--color-texto-parrafo-general);
    /* sin efectos raros */
}

/* Animación de entrada suave */
.parrafo14div {
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInUpMinimal 0.5s ease forwards;
}

@keyframes fadeInUpMinimal {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 🟨 Parrafo15: Título + 3 columnas con íconos profesional === */
.parrafo15div {
    text-align: center;
    padding: 2rem 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Título */
.parrafo15-titulo {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}

/* Contenedor columnas */
.parrafo15div .columnas-3 {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Cada columna */
.parrafo15div .columna {
    flex: 1 1 28%;
    min-width: 200px;
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    color: var(--color-parrafo-1);
    padding: 1rem 1.25rem;
    border-radius: 16px;
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: default;
    overflow: hidden;
}

/* Íconos o números */
/* Íconos o números */
.parrafo15div .columna::before {
    content: attr(data-number);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--border_radius_boton);
    background: var(--color-gradiente-3);
    /* fondo más visible */
    color: var(--color-gradiente-2);
    /* color destacado */
    font-weight: 700;
    font-size: 1.2rem;
    position: absolute;
    top: 16px;
    /* ya dentro del div */
    left: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Hover columnas */
.parrafo15div .columna:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, var(--color-gradiente-2), var(--color-gradiente-1));
}

/* Animación de entrada */
.parrafo15div {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.parrafo15div .columna {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUpCol 0.5s ease forwards;
}

.parrafo15div .columna:nth-child(1) {
    animation-delay: 0.2s;
}

.parrafo15div .columna:nth-child(2) {
    animation-delay: 0.4s;
}

.parrafo15div .columna:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUpCol {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cada columna */
.parrafo15div .columna {
    flex: 1 1 28%;
    min-width: 200px;
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    color: var(--color-parrafo-1);
    padding: 1rem 1.25rem 1rem 3rem;
    /* espacio para número */
    border-radius: 16px;
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: default;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Número al inicio del texto */
.parrafo15div .columna::before {
    content: attr(data-number);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-gradiente-4);
    color: var(--color-gradiente-3);
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ===========================
🎯 ESTILOS DE PÁRRAFOS (16 a 18)
=========================== */

/* === 🟪 Parrafo16 Profesional === */
.parrafo16div {
    position: relative;
    text-align: var(--text_align);
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    /* vidrio ligero */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--border_radius_boton);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover suave para interacción */
.parrafo16div:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.12);
}

/* Título */
.parrafo16-titulo {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}

/* Subtítulo */
.parrafo16-subtitulo {
    color: var(--color_texto_subtitulo_principal);
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Contenedor de columnas */
.parrafo16div .columnas-2 {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Columnas individuales */
.parrafo16div .columna {
    flex: 1 1 45%;
    min-width: 200px;
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    color: var(--color_texto_parrafo_general);
    padding: 1rem 1.25rem;
    border-radius: var(--border_radius_boton);
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: default;
}

/* Hover columna para interacción visual */
.parrafo16div .columna:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, var(--color-gradiente-2), var(--color-gradiente-1));
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUpCol {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 🟫 Parrafo17 Profesional y Moderno === */
.parrafo17div {
    position: relative;
    text-align: var(--text_align);
    padding: 2rem 1.5rem;
    border-radius: var(--border_radius_boton);
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));

    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover sobre todo el div */
.parrafo17div:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);
}

/* Título principal */
.parrafo17-titulo {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1.5rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);

}

/* Contenedor columnas */
.parrafo17div .columnas-3 {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Cada columna (tarjeta) */
.parrafo17div .columna {
    flex: 1 1 30%;
    min-width: 180px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border_radius_boton);
    padding: 1rem 1.25rem;
    color: var(--color_texto_parrafo_general);
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: default;
}

/* Hover de cada columna */
.parrafo17div .columna:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.2);
}

/* Pseudo-elementos decorativos del fondo */
.parrafo17div::before,
.parrafo17div::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    opacity: 0.1;
    z-index: 0;
}

.parrafo17div::before {
    width: 100px;
    height: 100px;
    top: -30px;
    right: -30px;
}

.parrafo17div::after {
    width: 120px;
    height: 120px;
    bottom: -40px;
    left: -40px;
}

/* Animación de aparición */
.parrafo17div {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.parrafo17div .columna {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUpCol 0.5s ease forwards;
}

.parrafo17div .columna:nth-child(1) {
    animation-delay: 0.2s;
}

.parrafo17div .columna:nth-child(2) {
    animation-delay: 0.4s;
}

.parrafo17div .columna:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUpCol {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 🟪 Parrafo18: 3 columnas minimalistas elegantes === */
.parrafo18div {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--color-de-fondo-solido);
}

/* Tarjetas modernas */
.parrafo18div .columna {
    flex: 1 1 28%;
    min-width: 220px;

    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border-radius: var(--border_radius_boton);
    padding: 1.8rem 1.4rem;

    color: var(--color_texto_parrafo_general);
    font-size: 1rem;
    line-height: 1.65;

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.07);

    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;

    /* SIN globos, SIN pseudo-elementos */
    position: relative;
}

/* Hover elegante */
.parrafo18div .columna:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

/* Animación de entrada */
.parrafo18div .columna {
    opacity: 0;
    transform: translateY(18px);
    animation: fadeInColumn 0.6s ease forwards;
}

.parrafo18div .columna:nth-child(1) {
    animation-delay: 0.2s;
}

.parrafo18div .columna:nth-child(2) {
    animation-delay: 0.35s;
}

.parrafo18div .columna:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes fadeInColumn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .parrafo18div .columna {
        flex: 1 1 100%;
    }
}

/* === 🟩 Parrafo19: Título + Subtítulo + 2 párrafos lado a lado (Profesional, Título Azul) === */
.parrafo19div {
    text-align: var(--text_align);
    padding: 2rem 1.5rem;
    background: var(--color-de-fondo-solido);
    border-radius: var(--border_radius_boton);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parrafo19div:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.parrafo19-titulo {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

.parrafo19-subtitulo {
    color: var(--color_texto_subtitulo_principal);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.parrafo19-columnas {
    display: flex;
    gap: 2rem;
}

.parrafo19-columnas .parrafo19-texto {
    flex: 1;
    color: var(--color_texto_parrafo_general);
    font-size: 1rem;
    line-height: 1.75;
    background: var(--color-gradiente-1);
    padding: 1rem;
    border-radius: var(--border_radius_boton);
    border-left: 4px solid var(--color-gradiente-2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Responsive: columnas se apilan en móviles */
@media (max-width: 768px) {
    .parrafo19-columnas {
        flex-direction: column;
        gap: 1rem;
    }
}

/* === 🟪 Parrafo20: Texto con fondo de imagen profesional === */
.parrafo20div {
    position: relative;
    padding: 3rem 1.5rem;

    overflow: hidden;
    color: var(--color_texto_parrafo_general);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Overlay blur para resaltar el texto */
.parrafo20div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 16px;
    z-index: 0;
    /* overlay atrás */
}

/* Texto encima del overlay */
.parrafo20-texto {
    position: relative;
    z-index: 1;
    /* aseguramos que esté arriba */
    font-size: 1.3rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    color: var(--color-texto-parrafo-general);
    /* color más claro para resaltar */
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    /* fondo semitransparente */
    border-radius: var(--border_radius_boton);
    backdrop-filter: blur(3px);
    /* blur sutil solo detrás del texto */
}

/* Hover interactivo */
.parrafo20div:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Animación de entrada */
.parrafo20div {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInParrafo20 0.6s ease forwards;
}

@keyframes fadeInParrafo20 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*pafrafoi 21*/
.parrafo21div {
    position: relative;
    text-align: center;
    padding: 2rem 1.5rem;
    margin: 1.5rem auto;
    max-width: 700px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border-radius: var(--border_radius_boton);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parrafo21-cita {
    color: var(--color_texto_parrafo_general);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.6;
}

.parrafo21-autor {
    margin-top: 0.75rem;
    font-size: 1rem;
    color: var(--color_texto_titulo_general);
    font-style: italic;
}

.parrafo21div:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}


/*parraf 22*/
.parrafo22div {
    text-align: center;
    padding: 2rem 2rem;
    margin: 2rem auto;
    border-radius: var(--border_radius_boton);
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));

    max-width: 700px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.parrafo22-cita {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

.parrafo22-autor {
    margin-top: 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.85;
    color: var(--color_texto_titulo_general);
}

.parrafo22div:hover {
    transform: scale(1.03);
}

/*parrafo23*/
.parrafo23div {
    position: relative;
    padding: 1.5rem 1rem 1.5rem 2rem;
    border-left: 6px solid var(--color-gradiente-1);
    background: rgba(0, 0, 0, 0.03);
    border-radius: var(--border_radius_boton);
    max-width: 700px;
    margin: 1.5rem auto;
}

.parrafo23-cita {
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--color_texto_parrafo_general);
}

.parrafo23-autor {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--color_texto_titulo_general);
}

.parrafo23div:hover {
    background: rgba(0, 0, 0, 0.08);
    transform: translateX(3px);
    transition: 0.3s ease;
}

/*parrafo 24*/
.parrafo24div {
    position: relative;
    padding: 3rem 2rem;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    text-align: center;

    overflow: hidden;
}

.parrafo24div::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(5px);
    border-radius: 16px;
    z-index: 0;
}

.parrafo24-cita,
.parrafo24-autor {
    position: relative;
    z-index: 1;
    color: var(--color_texto_titulo_general);
}

.parrafo24-cita {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color_texto_parrafo_general);
}

.parrafo24-autor {
    margin-top: 1rem;
    font-size: 1.1rem;
    font-style: italic;
}

/*Parrafo 25*/
.parrafo25div {
    position: relative;
    padding: 2rem 2rem;
    border-radius: var(--border_radius_boton);
    background: var(--color-de-fondo-solido);
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2),
        -8px -8px 20px rgba(255, 255, 255, 0.1);
    text-align: center;
    max-width: 700px;
    margin: 2rem auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.parrafo25-cita {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

.parrafo25-autor {
    margin-top: 0.8rem;
    font-size: 1rem;
    font-style: italic;
    opacity: 0.85;
    color: var(--color_texto_titulo_general);
}

.parrafo25div:hover {
    transform: translateY(-5px);
    box-shadow: 12px 12px 25px rgba(0, 0, 0, 0.25),
        -12px -12px 25px rgba(255, 255, 255, 0.15);
}

/* === Imagen-Texto1: Imagen izquierda + texto derecha === */
.imgtxt1-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background-color: var(--color-de-fondo-solido);
    text-align: var(--text_align);
}

.imgtxt1-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;

    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.imgtxt1-imagen img {
    max-width: 500px;
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.imgtxt1-texto {
    max-width: 500px;
    position: relative;
    z-index: 2;
}

.imgtxt1-texto h2 {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 0.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

}

.imgtxt1-texto p {
    line-height: 1.7;
    margin-bottom: 1rem;
    color: var(--color_texto_parrafo_general);

}

.imgtxt1-texto button {
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border_radius_boton);
    cursor: pointer;
    font-weight: 600;
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    transition: all 0.3s ease;

}

.imgtxt1-texto button:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

/* === Imagen-Texto2: Fondo imagen + overlay degradado === */
.imgtxt2-wrapper {
    position: relative;
    padding: 6rem 2rem;
    background-size: cover;
    background-position: center;
    border-radius: var(--border_radius_boton);
    overflow: hidden;

    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background-color: var(--color-de-fondo-solido);
    text-align: var(--text_align);
}

.imgtxt2-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            var(--color-gradiente-1, #007CFF) 0%,
            var(--color-gradiente-2, #8A2EFF) 100%);
    opacity: 0.4;
    z-index: 1;
}

.imgtxt2-texto {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.imgtxt2-texto h2 {

    margin-bottom: 1rem;
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imgtxt2-texto p {
    font-size: 1.1rem;
    color: var(--color_texto_parrafo_general, #ffffff);
}

/* === Imagen-texto3: Imagen arriba + texto centrado === */
/* ======= Imagen-Texto3 ======= */
.imgtxt3-wrapper {
    border-radius: var(--border_radius_boton);
    overflow: hidden;
    background-color: var(--color-de-fondo-solido);
    text-align: center;
    padding: 0rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    color: var(--color_texto_parrafo_general, #333333);




}

.imgtxt3-img {
    max-width: 600px;
    border-radius: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.imgtxt3-wrapper h2 {

    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imgtxt3-wrapper h3 {
    font-size: 1.3rem;
    color: var(--color_texto_subtitulo_principal, #555555);
}

.imgtxt3-wrapper p {
    max-width: 700px;
    margin: 1rem auto;
    color: var(--color_texto_parrafo_general, #333333);
}

/* ======= Imagen-Texto4: Imagen derecha + texto estilo glass ======= */
.imgtxt4-wrapper {



    background-color: var(--color-de-fondo-solido);
    padding: 0rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap-reverse;

}

.imgtxt4-texto {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: var(--border_radius_boton);
    flex: 1 1 400px;
    color: var(--color_texto_parrafo_general, #333333);
}

.imgtxt4-texto h2 {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}



.imgtxt4-imagen img {
    border-radius: 1rem;
    max-width: 400px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* === Imagen-texto5: Carrusel simple de 3 imágenes === */
/* ======= Imagen-Texto5: Carrusel de imágenes con texto ======= */
.imgtxt5-wrapper {

    background-color: var(--color-de-fondo-solido);
    text-align: center;
    padding: 0rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);

}

.imgtxt5-carrusel {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.imgtxt5-carrusel img {
    width: 250px;
    height: 180px;
    object-fit: cover;
    border-radius: var(--border_radius_boton);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.imgtxt5-carrusel img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.imgtxt5-texto {
    margin-top: 1.5rem;
}

.imgtxt5-texto h2 {

    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imgtxt5-texto p {
    max-width: 700px;
    margin: 0.5rem auto;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general, #333333);
}


/* ======= Imagen-Texto6: Carrusel simple de 3 imágenes ======= */
/* ======= Imagen-Texto6 Premium ======= */
.imagen-texto6 {
    padding: 0rem 2rem;
    background-color: var(--color-de-fondo-solido);
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    border-radius: var(--border_radius_boton);
    display: flex;
    align-items: center;
    gap: 3rem;
    background: var(--color-de-fondo-solido, #ffffff);
    color: var(--color_texto_parrafo_general, #333333);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.imagen-texto6:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.imagen-texto6-img {
    flex: 1 1 50%;
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
}

.imagen-texto6-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border_radius_boton);
    transition: transform 0.5s ease;
}

.imagen-texto6:hover .imagen-texto6-img img {
    transform: scale(1.05);
}

.imagen-texto6-texto {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.imagen-texto6-texto h2 {

    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.5rem;
}

.imagen-texto6-texto p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color_texto_parrafo_general, #333333);
}



/* Responsive */
@media (max-width: 1024px) {
    .imagen-texto6 {
        flex-direction: column-reverse;
        text-align: center;
        gap: 2rem;
    }

    .imagen-texto6-texto button {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .imagen-texto6 {
        padding: 2rem 1rem;
    }
}

/* === Imagen-texto7: Carrusel simple de 3 imágenes === */

/* ======= Imagen-Texto7 Mejorado ======= */
.imagen-texto7 {
    padding: 0rem 2rem;
    background-color: var(--color-de-fondo-solido);

    padding-top: var(--margen_superior);
    padding-right: var(--margen_derecho);
    padding-bottom: var(--margen_inferior);
    padding-left: var(--margen_izquierdo);
    border-radius: var(--border_radius_boton);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;


    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imagen-texto7:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* ===== Imagen central ===== */
.imagen-texto7-img {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-texto7-img img {
    width: 100%;
    max-width: 400px;
    border-radius: 1.5rem;
    object-fit: cover;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.imagen-texto7-img img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ===== Textos laterales ===== */
.imagen-texto7-texto {
    flex: 1;
}

.imagen-texto7-texto h2 {



    margin-bottom: 0.8rem;
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imagen-texto7-texto p {
    color: var(--color_texto_parrafo_general);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.6;
}

/* Texto derecho */
.imagen-texto7-texto-secundario {
    text-align: right;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .imagen-texto7 {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
    }

    .imagen-texto7-img {
        order: 2;
        margin: 1.5rem 0;
    }

    .imagen-texto7-texto:first-child,
    .imagen-texto7-texto-secundario {
        order: 1;
        text-align: center;
        margin-bottom: 1rem;
    }

    .imagen-texto7-texto h2,
    .imagen-texto7-texto-secundario h2 {
        font-size: 1.8rem;
    }

    .imagen-texto7-texto p,
    .imagen-texto7-texto-secundario p {
        font-size: 1rem;
    }
}

/* === Imagen-texto8: Carrusel simple de 3 imágenes === */
.imagen-texto8 {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /*color: var(--color-texto-parrafo-general);*/
    /* color de texto principal */
    overflow: hidden;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);

}

.imagen-texto8 .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    /* podrías hacer un overlay con gradiente variable si deseas */
}

.imagen-texto8 .contenido {
    position: relative;
    z-index: 1;
    max-width: 800px;
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    /* más claro usando variable global */
    border-radius: var(--border_radius_boton);
    color: var(--color_texto_subtitulo_principal);
    /* para que el texto tome la variable */
}

.imagen-texto8 h2 {

    margin-bottom: 0.8rem;
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* Opcional: subtítulos y párrafos */
.imagen-texto8 p {
    color: var(--color_texto_parrafo_general);
    /* color de párrafo con variable */
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
}

/* === Imagen-texto9: Carrusel simple de 3 imágenes === */

/* === Imagen-Texto9 === */
.imagen-texto9 {
    text-align: center;
    padding: 2rem;
    background-color: var(--color-de-fondo-solido);

    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    /* texto general usando variable */
}

.imagen-texto9 .imagenes {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.imagen-texto9 .imagenes img {
    width: 45%;
    border-radius: var(--border_radius_boton);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imagen-texto9 .imagenes img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    /* efecto hover profesional */
}

.imagen-texto9 .texto {
    margin-top: 1.5rem;
    color: var(--color-texto-parrafo-general);
    /* aplicar variable para el texto */
}

/* Opcional: títulos dentro del componente */
.imagen-texto9 h2 {


    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.imagen-texto9 p {

    color: var(--color_texto_parrafo_general);
    /* variable para párrafos */
    line-height: 1.6;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
}

/* === Imagen-Texto10 Premium === */
.imagen-texto10 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 0rem 2rem;

    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    /*background-color: var(--color-de-fondo-solido);*/
    border-radius: 2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imagen-texto10:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Imagen central circular */
.imagen-texto10 img {
    width: 30%;
    max-width: 350px;
    border-radius: var(--border_radius_boton);
    object-fit: cover;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.imagen-texto10 img:hover {
    transform: scale(1.07);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Textos laterales con tarjeta interna */
.imagen-texto10 .lado {
    background-color: var(--color-de-fondo-solido);

    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1rem;

    /* ligero fondo para destacar */
    border-radius: 1rem;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.imagen-texto10 .lado:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}



.imagen-texto10 .lado p {
    color: var(--color_texto_titulo_general);

    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.7;
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .imagen-texto10 {
        flex-direction: column;
        padding: 2rem;
        text-align: center;
    }

    .imagen-texto10 img {
        width: 100%;
        max-width: 300px;
        margin: 2rem 0;
    }

    .imagen-texto10 .lado {
        width: 100%;
        text-align: center;
        padding: 1.2rem;
    }

    .imagen-texto10 .lado h2 {
        font-size: 1.8rem;
    }

    .imagen-texto10 .lado p {
        font-size: 1rem;
    }
}

/* ========================== */
/* 🎨 Imagen-Texto11 */
/* ========================== */
.imgtexto11 {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));

    overflow: hidden;
    transition: transform 0.3s ease;



    padding-top: var(--margen_superior);
    padding-right: var(--margen_derecho);
    padding-bottom: var(--margen_inferior);
    padding-left: var(--margen_izquierdo);
    border-radius: var(--border_radius_boton)
}

.imgtexto11:hover {
    transform: scale(1.02);
}

.imgtexto11-img {
    flex: 1 1 40%;
    max-width: 350px;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.imgtexto11-content {
    flex: 1 1 55%;
}

.imgtexto11-title {
    text-align: var(--text_align);

    margin-bottom: 0.5rem;

    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imgtexto11-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color_texto_parrafo_general);
    text-align: var(--text_align);
}

/* ========================== */
/* 🌫 Imagen-Texto12 (Hero glass) */
/* ========================== */
.imgtexto12 {
    position: relative;
    background-size: cover;
    background-position: center;

    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Color del texto desde variable global */
    /*color: var(--color-titulo);*/
    text-align: center;

    padding-top: var(--margen_superior);

    padding-bottom: var(--margen_inferior);



    /* Fondo opcional translúcido usando variable global en RGB */
    /* background-color: rgba(var(--color-de-fondo-solido-rgb, 255,255,255), 0.1); */
}

.imgtexto12-overlay {
    /* Fondo translúcido y efecto blur */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    padding: 2rem 3rem;
    border-radius: 18px;
    max-width: 700px;
    border-radius: var(--border_radius_boton)
        /* Color del texto en overlay */
        /*color: var(--color-texto-parrafo-general);*/
}

.imgtexto12-title {

    margin-bottom: 1rem;

    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imgtexto12-text {
    font-size: 1.1rem;
    line-height: 1.6;

    /* Color del párrafo usando variable global */
    color: var(--color_texto_parrafo_general);
}

/* ========================== */
/* ⚪ Imagen-Texto13 (Circular) */
/* ========================== */
.imgtexto13 {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    background: var(--color-de-fondo-solido);
    padding: 0 2rem;
    border-radius: var(--border_radius_boton);


    padding-top: var(--margen_superior);

    padding-bottom: var(--margen_inferior);

    border-radius: var(--border_radius_boton)
}

.imgtexto13-imgwrap {
    flex: 1 1 35%;
    display: flex;
    justify-content: center;
}

.imgtexto13-img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.imgtexto13-textwrap {
    flex: 1 1 55%;
}

.imgtexto13-title {

    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
    text-align: var(--text_align);

}

.imgtexto13-text {
    color: var(--color_texto_parrafo_general);
    line-height: 1.7;
    text-align: var(--text_align);
}

/* ========================== */
/* 🟣 Imagen-Texto14 (Diagonal) */
/* ========================== */
.imgtexto14 {
    position: relative;

    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
    background: var(--color-de-fondo-solido);

    padding-top: var(--margen_superior);

    padding-bottom: var(--margen_inferior);
}

.imgtexto14-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%);
    z-index: 0;
}

.imgtexto14-content {
    position: relative;
    padding: 2rem;
    background: var(--color-gradiente-1);
    border-radius: var(--border_radius_boton);
    margin-left: 55%;
    z-index: 1;
    max-width: 40%;
}

.imgtexto14-title {
    text-align: var(--text_align);
    margin-bottom: 1rem;

    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

}

.imgtexto14-text {
    text-align: var(--text_align);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

/* ========================== */
/* 🌌 Imagen-Texto15 (Radial mask) */
/* ========================== */
.imgtexto15 {
    position: relative;

    background-size: cover;
    background-position: center;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding-top: var(--margen_superior);

    padding-bottom: var(--margen_inferior);

}

.imgtexto15-mask {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.8) 100%);
    padding: 3rem;
    border-radius: 18px;
    max-width: 700px;
}

.imgtexto15-title {

    margin-bottom: 1rem;

    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imgtexto15-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color_texto_parrafo_general);
}

/* Responsivo */
@media (max-width: 768px) {

    .imgtexto11,
    .imgtexto13,
    .imgtexto14-content {
        flex-direction: column;
        margin-left: 0 !important;
        max-width: 100%;
    }

    .imgtexto14-bg {
        clip-path: none;
        opacity: 0.3;
    }
}

/* =============================== */
/* 🏞️ Imagen-Texto16 (Parallax) */
/* =============================== */
.imgtexto16 {
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;

    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: end;
    justify-content: center;

}

.imgtexto16-content {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    padding: 2rem;
    border-radius: var(--border_radius_boton) var(--border_radius_boton) 0 0;
    color: var(--color_texto_titulo_general);
    text-align: var(--text_align);
    width: 100%;
    animation: fadeUp16 1s ease forwards;
}

.imgtexto16-title {

    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.8rem;
}

.imgtexto16-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color_texto_parrafo_general);
}

@keyframes fadeUp16 {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =============================== */
/* 🌫 Imagen-Texto17 (Glassmorphism Card) */
/* =============================== */
.imgtexto17 {
    position: relative;
    background-size: cover;
    background-position: center;

    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--margen_superior);

    padding-bottom: var(--margen_inferior);
}

.imgtexto17-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 3rem;
    border-radius: 20px;
    max-width: 650px;
    color: var(--color_texto_titulo_general);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imgtexto17-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
}

.imgtexto17-title {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.imgtexto17-text {
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

/* =============================== */
/* 🟦 Imagen-Texto18 (Banda con gradiente) */
/* =============================== */
.imgtexto18 {
    display: flex;
    align-items: stretch;
    border-radius: var(--border_radius_boton);
    overflow: hidden;
    border: 3px solid transparent;
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2)) border-box;
    background-clip: padding-box, border-box;

}

.imgtexto18-img {
    flex: 1 1 45%;
    background-size: cover;
    background-position: center;
}

.imgtexto18-content {
    flex: 1 1 55%;
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: var(--text_align);
    padding-top: var(--margen_superior);
    border-radius: var(--border_radius_boton);
    padding-bottom: var(--margen_inferior);
}

.imgtexto18-title {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.imgtexto18-text {
    color: var(--color_texto_parrafo_general);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* =============================== */
/* 🖼 Imagen-Texto19 (Zoom Hover) */
/* =============================== */
.imgtexto19 {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--margen_superior);

    padding-bottom: var(--margen_inferior);

}

.imgtexto19-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.imgtexto19:hover .imgtexto19-bg {
    transform: scale(1.1);
}

.imgtexto19-content {
    position: relative;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    padding: 2rem;
    border-radius: var(--border_radius_boton);
    text-align: center;
    z-index: 1;
    animation: fadeIn19 1s ease forwards;
}

@keyframes fadeIn19 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.imgtexto19-title {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.imgtexto19-text {
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

/* =============================== */
/* ☀️ Imagen-Texto20 (Radial Overlay) */
/* =============================== */
.imgtexto20 {
    position: relative;
    background-size: cover;
    background-position: center;

    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--margen_superior);

    padding-bottom: var(--margen_inferior);
}

.imgtexto20-overlay {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.75) 100%);
    backdrop-filter: blur(4px);
    padding: 3rem;
    border-radius: var(--border_radius_boton);
    color: var(--color_texto_titulo_general);
    text-align: center;
    max-width: 700px;
    animation: fadeIn20 0.8s ease forwards;
}

.imgtexto20-title {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.imgtexto20-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color_texto_parrafo_general);
}

@keyframes fadeIn20 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =============================== */
/* 📱 Responsivo general */
/* =============================== */
@media (max-width: 768px) {
    .imgtexto18 {
        flex-direction: column;
    }

    .imgtexto18-img {
        height: 220px;
    }

    .imgtexto16,
    .imgtexto17,
    .imgtexto19,
    .imgtexto20 {
        min-height: 280px;
    }
}


/* Wrapper principal */
.imagen-texto21-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;

    overflow: hidden;
    transition: transform 0.4s ease;
}

/* Hover */
.imagen-texto21-wrapper:hover {
    transform: scale(1.02);
}

/* Imagen con overlay */
.imagen-texto21-imagen {
    position: relative;
    flex: 1 1 50%;
    min-height: 280px;
    overflow: hidden;

    /* Gradiente + fondo */
    background: linear-gradient(to bottom left,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.1)), url('ruta-de-tu-imagen.jpg') no-repeat center center;
    background-size: cover;

    aspect-ratio: 16 / 9;
    transition: transform 0.5s ease;
    padding-top: var(--margen_superior);

    padding-bottom: var(--margen_inferior);
}

.imagen-texto21-imagen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    /* overlay semi-transparente */
    pointer-events: none;
}

/* Texto */
.imagen-texto21-texto {

    flex: 1 1 50%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(120deg, var(--color-gradiente-1), var(--color-gradiente-2));
}

/* Títulos y párrafos */
.imagen-texto21-texto h2 {

    margin-bottom: 1rem;
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);
}

.imagen-texto21-texto p {
    color: var(--color_texto_parrafo_general);
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: var(--text_align);
}

/* === MEDIA QUERIES === */
@media (max-width: 768px) {
    .imagen-texto21-wrapper {
        flex-direction: column;
    }

    .imagen-texto21-imagen {
        flex: 1 1 100%;
        min-height: 200px;
        aspect-ratio: 16 / 9;
    }

    .imagen-texto21-texto {
        flex: 1 1 100%;
        padding: 1.5rem;
    }

    .imagen-texto21-texto h2 {
        font-size: 1.5rem;
    }

    .imagen-texto21-texto p {
        font-size: 1rem;
        line-height: 1.5;
    }
}

@media (max-width: 768px) {
    .imagen-texto21-wrapper {
        flex-direction: column;
        gap: 1.5rem;
        /* espacio entre imagen y texto */
        padding: 0.5rem;
        /* margen externo para que respire todo el bloque */
    }

    .imagen-texto21-imagen {
        flex: 1 1 100%;
        min-height: 200px;
        aspect-ratio: 16 / 9;
        background-position: top;
        /* centra la parte superior de la imagen */
        border-radius: 1rem;
        /* suaviza los bordes en móviles */
    }

    .imagen-texto21-texto {
        flex: 1 1 100%;
        padding: 2rem;
        /* aumenta espacio interno */
        border-radius: 1rem;
        /* bordes redondeados para mantener armonía */
    }

    .imagen-texto21-texto h2 {
        font-size: clamp(1.7rem, 4vw, var(--font_size_title));
        color: var(--color_texto_titulo_general);
        font-weight: var(--font_weight_title);
        letter-spacing: var(--letter_spacing_title);
        text-align: var(--text_align);
        margin-bottom: 1rem;
    }

    .imagen-texto21-texto p {
        font-size: 1rem;
        line-height: 1.6;
        /* más espacio entre líneas */
    }
}

/* ===== Imagen-Texto22 ===== */
.imagen-texto22-wrapper {
    position: relative;
    text-align: center;

}

.imagen-texto22-contenedor {
    position: relative;
    overflow: hidden;


}

.imagen-texto22-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.imagen-texto22-contenedor:hover .imagen-texto22-img {
    transform: scale(1.05);
}

.imagen-texto22-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1.5rem;
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
    transition: opacity 0.4s ease;

}

.imagen-texto22-overlay h3 {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);
}

.imagen-texto22-overlay p {

    color: var(--color_texto_parrafo_general);

    text-align: var(--text_align);
}

.imagen-texto22-contenedor:hover .imagen-texto22-overlay {
    opacity: 1;
}

/* === MEDIA QUERIES para móviles === */
@media (max-width: 768px) {
    .imagen-texto22-wrapper {
        padding: 1.5rem;
        /* espacio alrededor del bloque */
    }

    .imagen-texto22-contenedor {
        border-radius: 1.5rem;
        overflow: hidden;
        margin: 0 auto;
        /* centra el bloque */
        max-width: 100%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        /* un toque de profundidad */
    }

    .imagen-texto22-img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 1.5rem;
    }

    .imagen-texto22-overlay {
        padding: 2rem;
        /* más espacio interno para que respire el texto */
        font-size: 1rem;
        /* tamaño adecuado para móviles */
        box-sizing: border-box;
        /* asegura que padding no corte contenido */
    }

    .imagen-texto22-overlay p {

        display: block;
    }
}

/* === MEDIA QUERIES para móviles === */
@media (max-width: 768px) {
    .imagen-texto22-wrapper {
        padding: 1.5rem;
        /* espacio alrededor del bloque */
    }

    .imagen-texto22-contenedor {
        border-radius: 1.5rem;
        overflow: hidden;
        margin: 0 auto;
        /* centra el bloque */
        max-width: 100%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .imagen-texto22-img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 1.5rem;
    }

    /* Overlay centrado */
    .imagen-texto22-overlay {
        position: absolute;
        top: 50%;
        /* centra vertical */
        left: 50%;
        /* centra horizontal */
        transform: translate(-50%, -50%);
        /* ajuste exacto del centro */
        width: 90%;
        /* un poco de margen a los lados */
        padding: 1.5rem 1rem;
        background: rgba(0, 0, 0, 0.5);
        /* semitransparente para que respire */
        color: var(--color_texto_titulo_general);
        font-size: 1.1rem;
        /* tamaño legible en móviles */
        text-align: center;
        /* centra el texto */
        border-radius: 1rem;
        box-sizing: border-box;
    }

    .imagen-texto22-overlay h2 {
        margin: 0 0 0.5rem 0;
        font-size: 1.3rem;
        /* título proporcional */
        line-height: 1.4;
    }

    .imagen-texto22-overlay p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.5;
        display: none;
    }
}

/* ===== Imagen-Texto23 (proporción armónica) ===== */
.imagen-texto23-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

/* Tarjeta */
.imagen-texto23-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--border_radius_boton);
    max-width: 850px;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.imagen-texto23-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* Imagen con proporción fija para armonía */
.imagen-texto23-card img {
    width: 100%;
    height: 280px;
    /* <<< ARMONIZA LA PROPORCIÓN */
    object-fit: cover;
    display: block;
}

/* Contenido */
.imagen-texto23-content {
    padding: 2rem 2rem 2.3rem;
    background: linear-gradient(145deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));
}

/* Título */
.imagen-texto23-content h3 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.8rem;
    text-align: var(--text_align);
}

/* Párrafo */
.imagen-texto23-content p {
    font-size: clamp(1rem, 1.6vw, 1.05rem);
    color: var(--color_texto_parrafo_general);
    line-height: 1.6;
    text-align: var(--text_align);
}

/* ===== Imagen-Texto24 ===== */
.imagen-texto24-wrapper {
    background: var(--color-de-fondo-solido);

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
}

.imagen-texto24-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.imagen-texto24-texto {
    flex: 1;
}

.imagen-texto24-texto h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    text-align: var(--text_align);
    margin-bottom: 0.5rem;
}

.imagen-texto24-texto p {
    color: var(--color_texto_parrafo_general);
    text-align: var(--text_align);
}

.imagen-texto24-imagen {
    flex: 1;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: var(--border_radius_boton);
}

/* === MEDIA QUERIES para móviles === */
@media (max-width: 768px) {
    .imagen-texto24-flex {
        flex-direction: column;
        /* apila texto e imagen */
        gap: 1.5rem;
        /* espacio entre ellos */
    }

    .imagen-texto24-texto {
        flex: 1 1 100%;
        text-align: center;
        /* centra el texto */
        padding: 0 1rem;
        /* margen lateral para que respire */
    }

    .imagen-texto24-texto h2 {
        font-size: 1.6rem;
        /* tamaño proporcional a móviles */
        margin-bottom: 0.5rem;
    }

    .imagen-texto24-texto p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .imagen-texto24-imagen {
        flex: 1 1 100%;
        min-height: 220px;
        /* altura adecuada para móviles */
        aspect-ratio: 16 / 9;
        /* mantiene proporción profesional */
        background-size: cover;
        background-position: center top;
        /* parte superior visible */
        border-radius: 1rem;
        width: 100%;
    }

    .imagen-texto24-wrapper {
        padding: 2rem 1rem;
        /* reduce padding para móviles pero mantiene espacio */
    }
}

/* ===== Imagen-Texto25 ===== */
.imagen-texto25-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    padding: var(--margen_superior) 2rem var(--margen_inferior);
}

.imagen-texto25-card {
    background: var(--color-de-fondo-solido);
    border-radius: var(--border_radius_boton);
    overflow: hidden;
    max-width: 1000px;
    width: 100%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.imagen-texto25-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

/* === Imagen más pequeña y proporcionada === */
.imagen-texto25-img {
    width: 100%;
    height: 300px;
    /* <<< AJUSTE PARA ARMONÍA */
    object-fit: cover;
    display: block;
}

/* === Contenido === */
.imagen-texto25-info {
    padding: 2rem;
    text-align: var(--text_align);
}

.imagen-texto25-info h3 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.imagen-texto25-info p {
    color: var(--color_texto_parrafo_general);
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    line-height: 1.6;
}

/* === 📱 Responsivo === */
@media (max-width: 768px) {

    .imagen-texto25-img {
        height: 200px;
        /* Más pequeña aún en móvil */
    }

    .imagen-texto25-info {
        padding: 1.5rem;
        text-align: center;
    }
}


/* ===============================
🎨 Imagen-Texto 26–30
Diseños profesionales y responsivos
================================= */

/* ======= Imagen-Texto 26 ======= */
.imagen-texto26-wrapper {
    background: var(--color-de-fondo-solido);
    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-texto26-contenedor {
    position: relative;
    overflow: hidden;
    border-radius: var(--border_radius_boton);
    width: 600px;
    min-height: 500x;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.imagen-texto26-contenedor img {
    width: 100%;
    display: block;
    transition: transform 0.8s ease;
}

.imagen-texto26-contenedor:hover img {
    transform: scale(1.08);
}

.imagen-texto26-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2));
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    transition: opacity 0.6s ease;
    padding: 2rem;
}

.imagen-texto26-contenedor:hover .imagen-texto26-overlay {
    opacity: 0.95;
}

.imagen-texto26-overlay h3 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    margin-bottom: 0.8rem;

}

.imagen-texto26-overlay p {
    font-size: 1.1rem;
    max-width: 600px;
    display: block;
    color: var(--color_texto_parrafo_general);
}

/* === MEDIA QUERIES para móviles === */
@media (max-width: 768px) {
    .imagen-texto26-overlay p {
        font-size: 1.1rem;
        max-width: 600px;
        display: none;
    }
}

/* ======= Imagen-Texto 27 ======= */
.imagen-texto27-wrapper {
    background: var(--color-de-fondo-solido);

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
}

.imagen-texto27-card {
    display: flex;
    flex-direction: row;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    text-align: center;

}

.imagen-texto27-card img {
    width: 50%;
    object-fit: cover;
    transition: transform 0.5s ease;

}

.imagen-texto27-card:hover img {
    transform: scale(1.05);
}

.imagen-texto27-content {
    flex: 1;
    padding: 2rem;
    background: linear-gradient(180deg, var(--color-gradiente-1) 0%, var(--color-gradiente-2) 100%);
    color: var(--color_texto_titulo_general);
}

.imagen-texto27-content h3 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.imagen-texto27-content p {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--color_texto_parrafo_general);
}

.imagen-texto27-img-2 {

    border-radius: var(--border_radius_boton);
}

/* === MEDIA QUERIES para móviles === */
@media (max-width: 768px) {
    .imagen-texto27-card {
        flex-direction: column;
        /* apila imagen y contenido */
        border-radius: 1rem;
        overflow: hidden;
    }

    .imagen-texto27-card img {
        width: 100%;
        /* ocupa todo el ancho */
        height: auto;
        object-fit: cover;
        aspect-ratio: 16 / 9;
        /* mantiene proporción profesional */
        transition: transform 0.5s ease;
    }

    .imagen-texto27-content {
        padding: 1.5rem 1rem;
        /* más espacio interno para respirar */
        text-align: center;
        /* centra el texto */
        background: linear-gradient(180deg, var(--color-gradiente-1) 0%, var(--color-gradiente-2) 100%);
    }

    .imagen-texto27-content h3 {
        font-size: 1.6rem;
        /* tamaño proporcional para móviles */
        margin-bottom: 0.75rem;
    }

    .imagen-texto27-content p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .imagen-texto27-wrapper {
        padding: 1.5rem;
        /* reduce padding para que respire en móviles */
    }
}

/* ======= Imagen-Texto 28 ======= */
.imagen-texto28-wrapper {

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

.imagen-texto28-flex {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.imagen-texto28-texto {
    flex: 1 1 45%;
}

.imagen-texto28-texto h2 {

    background: var(--color-gradiente-global);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.2rem;
    margin-bottom: 1rem;

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));

    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.75rem;
    text-align: var(--text_align);
}

.imagen-texto28-texto p {
    color: var(--color_texto_parrafo_general);
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: var(--text_align);
}

.imagen-texto28-imagen {
    flex: 1 1 45%;
    border-radius: 1.5rem;
    background-size: cover;
    background-position: center;
    height: 400px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.6s ease;
}

.imagen-texto28-imagen:hover {
    transform: scale(1.03);
}

/* === MEDIA QUERIES para móviles === */
@media (max-width: 768px) {
    .imagen-texto28-flex {
        flex-direction: column;
        /* apila imagen y texto */
        gap: 1.5rem;
        /* espacio entre imagen y texto */
    }

    .imagen-texto28-texto {
        flex: 1 1 100%;
        text-align: center;
        /* centra el texto */
        padding: 0 1rem;
        /* margen lateral */
    }

    .imagen-texto28-texto h2 {
        font-size: 1.8rem;
        /* tamaño proporcional */
        margin-bottom: 0.75rem;
    }

    .imagen-texto28-texto p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .imagen-texto28-imagen {
        flex: 1 1 100%;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        /* mantiene proporción profesional */
        border-radius: 1.5rem;
        background-size: cover;
        background-position: center top;
        /* que se vea la parte importante */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.6s ease;
    }

    .imagen-texto28-wrapper {
        padding: 1.5rem;
        /* espacio alrededor del bloque */
    }
}

/* ======= Imagen-Texto 29 ======= */
.imagen-texto29-wrapper {
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
    color: var(--color_texto_titulo_general);
}

.imagen-texto29-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.imagen-texto29-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imagen-texto29-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}

.imagen-texto29-info h3 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);
    margin-bottom: 1rem;
}

.imagen-texto29-info p {
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: var(--text_align);
    color: var(--color_texto_parrafo_general);
}

/* ======= Imagen-Texto 30 ======= */
.imagen-texto30-wrapper {
    background: var(--color-de-fondo-solido);

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
}

.imagen-texto30-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.imagen-texto30-card img {
    width: 100%;
    height: 600px;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.imagen-texto30-card:hover img {
    transform: scale(1.05);
}

/* Overlay con información */
.imagen-texto30-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.55);
    color: var(--color_texto_titulo_general);
    transition: background 0.4s ease;
}

.imagen-texto30-card:hover .imagen-texto30-info {
    background: var(--color-gradiente-1);
}

.imagen-texto30-info h3 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);
    margin-bottom: 0.5rem;
}

.imagen-texto30-info p {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--color_texto_parrafo_general);
    text-align: var(--text_align);
}

/* ======== MEDIA QUERIES (versión profesional móvil) ======== */
@media (max-width: 768px) {

    .imagen-texto30-wrapper {
        padding: 1.5rem;
        /* más aire lateral */
    }

    .imagen-texto30-card {
        border-radius: 1.25rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .imagen-texto30-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        /* proporción perfecta para móvil */
        object-fit: cover;
        border-radius: 1.25rem;
    }

    /* En móvil quitamos overlay absoluto para mejor legibilidad */
    .imagen-texto30-info {
        position: static;
        background: linear-gradient(120deg, var(--color-gradiente-1), var(--color-gradiente-2));
        text-align: center;
        color: var(--color_texto_titulo_general);
        padding: 1.5rem 1rem;
        border-radius: 0 0 1.25rem 1.25rem;
    }

    .imagen-texto30-info h3 {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }

    .imagen-texto30-info p {
        font-size: 1rem;
        line-height: 1.6;
        margin: 0;
    }
}

/* ======= Responsive ======= */
@media (max-width: 768px) {

    .imagen-texto27-card,
    .imagen-texto29-card {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .imagen-texto28-flex {
        flex-direction: column;
    }
}



/* ======= Imagen-Texto 34 ======= */
.imagen-texto34-wrapper {
    padding: 4rem 1rem;
    display: flex;
    justify-content: center;

}

.imagen-texto34-imagen {
    width: 90%;
    max-width: 900px;
    height: 450px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 1.5rem;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    transition: clip-path 0.6s ease;
}

.imagen-texto34-imagen:hover {
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
}

.imagen-texto34-texto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    border-radius: 1.5rem;
}

.imagen-texto34-texto h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

/* ======= Imagen-Texto 35 ======= */
.imagen-texto35-wrapper {
    background-size: cover;
    background-position: center;
    padding: 6rem 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-texto35-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
}

.imagen-texto35-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 1.5rem;
    padding: 2.5rem;
    max-width: 700px;
    text-align: center;
    color: #fff;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    animation: fadeInGlass 1s ease forwards;
}

@keyframes fadeInGlass {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ======= Responsive ======= */
@media (max-width: 768px) {

    .imagen-texto31-content h2,
    .imagen-texto34-texto h2 {
        font-size: 1.6rem;
    }

    .imagen-texto34-imagen {
        height: 320px;
    }
}



/* ===========================
✨ Imagen-Texto 34: Imagen con efecto blur y texto emergente
=========================== */
.imagen-texto34-wrapper {
    position: relative;
    height: 70vh;
    overflow: hidden;
}

.imagen-texto34-card {
    position: relative;
    width: 100%;
    height: 100%;
}

.imagen-texto34-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.8);
    transition: filter 0.5s ease;
}

.imagen-texto34-card:hover .imagen-texto34-img {
    filter: blur(3px) brightness(0.6);
}

.imagen-texto34-overlay {
    position: relative;
    z-index: 2;
    color: var(--color_texto_titulo_general);
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.4);
    margin: 0 auto;
    padding: 2rem;
    border-radius: 15px;
    max-width: 700px;
}

.imagen-texto34-texto h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);

}

/* === Versión móvil === */
@media (max-width: 768px) {
    .imagen-texto35-flex {
        flex-direction: column;
        text-align: center;
    }

    .imagen-texto35-text {
        flex: 1 1 100%;
    }

    .imagen-texto35-image img {
        max-width: 90%;
    }
}


/* ===========================
📱 Responsividad
=========================== */
@media (max-width: 768px) {
    .imagen-texto32-content h2 {
        font-size: 1.5rem;
    }

    .imagen-texto33-contenedor,
    .imagen-texto35-flex {
        flex-direction: column;
    }

    .imagen-texto31-img {
        height: 250px;
    }
}

/* ===========================
🌄 Imagen-Texto 36: Parallax profesional
=========================== */
.imagen-texto36-wrapper {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.imagen-texto36-overlay {
    background: var(--color-de-fondo-solido);
    backdrop-filter: blur(6px);
    color: var(--color_texto_titulo_general);
    text-align: center;
    padding: 3rem;
    border-radius: 20px;
    max-width: 800px;
    animation: fadeInUp 1s ease forwards;
}

/* ===========================
📸 Imagen-Texto 37: Scroll Reveal suave
=========================== */
.imagen-texto37-wrapper {
    display: flex;
    justify-content: center;

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

.imagen-texto37-card {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
    max-width: 900px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.imagen-texto37-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.imagen-texto37-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.imagen-texto37-content {
    padding: 2rem;
    text-align: center;
    color: var(--color_texto_titulo_general);

}

.imagen-texto37-content h3 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);
}

.imagen-texto37-content p {
    color: var(--color_texto_parrafo_general);

    text-align: var(--text_align);
}

/* ===============================================
✨ Imagen-Texto 38 — Imagen expandible con hover
================================================ */
.imagen-texto38-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-de-fondo-solido);

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);

}

.imagen-texto38-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--border_radius_boton);
    width: 100%;
    max-width: 900px;
    height: 450px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.4s ease;
}

.imagen-texto38-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* === Imagen de fondo === */
.imagen-texto38-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.imagen-texto38-card:hover .imagen-texto38-img {
    transform: scale(1.1);
}

/* === Capa de información === */
.imagen-texto38-info {
    position: relative;
    z-index: 2;
    color: var(--color_texto_titulo_general);
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.45);
    padding: 2rem;
    border-radius: var(--border_radius_boton);
    max-width: 80%;
    margin: 0 auto;
}

.imagen-texto38-info h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;

}

.imagen-texto38-info p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

/* === Responsive === */
@media (max-width: 768px) {
    .imagen-texto38-card {
        height: 350px;
    }

    .imagen-texto38-info {
        padding: 1.5rem;
    }

    /* 🔹 Título más pequeño en pantallas pequeñas */
    .imagen-texto38-info h2 {
        font-size: clamp(1.2rem, 4vw, 1.6rem);
        line-height: 1.3;
    }

    /* 🔹 Ocultar el párrafo en dispositivos pequeños */
    .imagen-texto38-info p {
        display: none;
    }
}

/* ===========================
🌀 Imagen-Texto 39: Zoom y desplazamiento lateral
=========================== */
.imagen-texto39-wrapper {
    background: var(--color-de-fondo-solido);

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
}

.imagen-texto39-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

.imagen-texto39-texto {
    flex: 1 1 400px;
    animation: fadeInLeft 1s ease;
    color: var(--color_texto_titulo_general);
}

.imagen-texto39-texto h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);
}

.imagen-texto39-texto p {

    color: var(--color_texto_parrafo_general);
    text-align: var(--text_align);
}

.imagen-texto39-imagen img {
    flex: 1 1 400px;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease;
}

.imagen-texto39-imagen img:hover {
    transform: scale(1.08);
}

/* ===========================
🎬 Imagen-Texto 40: Estilo cinematográfico
=========================== */
.imagen-texto40-wrapper {
    position: relative;
    height: 80vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imagen-texto40-capa {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

.imagen-texto40-content {
    position: relative;
    color: var(--color_texto_titulo_general);
    text-align: center;
    padding: 2rem;
    max-width: 800px;
    animation: fadeIn 1.5s ease;
}


/* ===========================
🌈 Animaciones globales
=========================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===========================
📱 Responsividad
=========================== */
@media (max-width: 768px) {
    .imagen-texto39-inner {
        flex-direction: column;
    }

    .imagen-texto38-card {
        height: 350px;
    }

    .imagen-texto36-overlay {
        padding: 1.5rem;
    }

    .imagen-texto40-content h2 {
        font-size: 1.5rem;
    }
}

/* === 🟦 Imagen-Texto 41 === */
.imagen-texto41-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
    text-align: center;
    transition: all 0.3s ease;
    background: var(--color-de-fondo-solido, #f9f9f9);
}

.imagen-texto41-wrapper h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);



}

.imagen-texto41-wrapper h4 {

    color: var(--color_texto_subtitulo_principal);

}

.imagen-texto41-wrapper p {

    color: var(--color_texto_parrafo_general);

}

.imagen-texto41-card {
    max-width: 900px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--border_radius_boton);
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
}

.imagen-texto41-img {
    width: 100%;
    height: 380px;
    transition: transform 0.4s ease;
}

.imagen-texto41-card:hover .imagen-texto41-img {
    transform: scale(1.05);
}

.imagen-texto41-content {
    padding: 2rem;
}

.imagen-texto41-content h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: 0.5rem;
}

.imagen-texto41-content h4 {
    font-weight: 400;
    opacity: 0.85;
    margin-bottom: 1rem;
}

.imagen-texto41-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.btn41 {
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    padding: 0.8rem 1.5rem;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}


.btn41:hover {
    background: var(--color_texto_boton_principal);
    color: var(--color_fondo_boton_principal);
    ;
}

/* === 🟩 Imagen-Texto 42 — Versión Premium Moderna === */
.imagen-texto42-wrapper {

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
    background: var(--color-de-fondo-solido);

}

/* Grid adaptable */
.imagen-texto42-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
    align-items: stretch;
}

/* === Tarjeta principal === */
.imagen-texto42-item {
    display: flex;
    flex-direction: column;
    border-radius: var(--border_radius_boton);
    overflow: hidden;
    background: var(--color-gradiente-3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.imagen-texto42-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* === Imagen === */
.imagen-texto42-media {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.imagen-texto42-media img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
}

.imagen-texto42-item:hover .imagen-texto42-media img {
    transform: scale(1.08);
    filter: brightness(0.9);
}

/* === Contenido === */
.imagen-texto42-content {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    transition: background 0.4s ease, color 0.4s ease;
    text-align: var(--text_align);
}

.imagen-texto42-content h5 {
    color: var(--color_texto_subtitulo_principal);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.imagen-texto42-content h3 {

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    line-height: 1.25;
}

.imagen-texto42-content p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color_texto_parrafo_general);
}

/* === Hover con degradado === */
.imagen-texto42-item:hover .imagen-texto42-content {
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
}

.imagen-texto42-item:hover .imagen-texto42-content h3,
.imagen-texto42-item:hover .imagen-texto42-content h5,
.imagen-texto42-item:hover .imagen-texto42-content p {
    color: var(--color_texto_boton_principal);
}

/* === Responsive === */
@media (max-width: 768px) {
    .imagen-texto42-grid {
        gap: 1.5rem;
    }

    .imagen-texto42-media img {
        height: 200px;
    }

    .imagen-texto42-content {
        padding: 1.25rem;
    }

    .imagen-texto42-content h3 {
        font-size: 1.25rem;
    }

    .imagen-texto42-content p {
        font-size: 0.9rem;
    }
}

/* === 🟧 Imagen-Texto 43 — Versión profesional con variables globales === */

.imagen-texto43-wrapper {

    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
    color: var(--color_texto_titulo_general);
    background: radial-gradient(circle at center,
            var(--color-gradiente-1),
            var(--color-gradiente-2));
    text-align: center;
}

/* === Layout flexible === */
.imagen-texto43-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

/* === Imágenes === */
.imagen-texto43-left img,
.imagen-texto43-right img {
    width: clamp(200px, 28vw, 320px);
    border-radius: var(--border_radius_boton);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    border: 3px solid rgba(255, 255, 255, 0.15);
}

.imagen-texto43-left img:hover,
.imagen-texto43-right img:hover {
    transform: scale(1.07);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

/* === Contenedor central (texto) === */
.imagen-texto43-center {
    max-width: 550px;
    text-align: center;
    color: var(--color_texto_boton_principal);
}

/* === Títulos y texto === */
.imagen-texto43-center h2 {

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.75rem;

    line-height: 1.25;
}

.imagen-texto43-center h4 {
    color: var(--color_texto_subtitulo_principal);
    font-weight: 500;
    margin-bottom: 1rem;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.imagen-texto43-center p {
    color: var(--color_texto_parrafo_general);
    line-height: 1.75;
    font-size: 1rem;
    opacity: 0.95;
    margin: 0 auto;
}

/* === Hover global opcional (efecto elegante) === */
.imagen-texto43-wrapper:hover .imagen-texto43-center h2 {
    color: var(--color-contraste);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* === Responsivo === */
@media (max-width: 768px) {
    .imagen-texto43-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .imagen-texto43-center {
        order: -1;
        /* Texto arriba en móviles */
    }

    .imagen-texto43-left img,
    .imagen-texto43-right img {
        width: 80%;
        max-width: 280px;
    }

    .imagen-texto43-center h2 {
        font-size: 1.8rem;
    }

    .imagen-texto43-center h4 {
        font-size: 1rem;
    }

    .imagen-texto43-center p {
        font-size: 0.95rem;
    }
}

/* === 🟪 Imagen-Texto 44 — Versión profesional con variables globales === */
.imagen-texto44-wrapper {
    padding: var(--margen_superior) clamp(1rem, 4vw, 6rem) var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
}

/* === Layout principal === */
.imagen-texto44-contenedor {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    /* 👈 centra todo y elimina “espacio visual” sobrante */
}

/* === Bloques de imagen === */
.imagen-texto44-img,
.imagen-texto44-side {
    flex: 1 1 320px;
    background-size: cover;
    background-position: center;
    border-radius: var(--border_radius_boton);
    min-height: clamp(200px, 30vw, 320px);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.imagen-texto44-img:hover,
.imagen-texto44-side:hover {
    transform: scale(1.04);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* === Bloque central de texto === */
.imagen-texto44-texto {
    flex: 2 1 450px;
    background: color-mix(in srgb, var(--color-de-fondo-solido) 90%, var(--color-gradiente-1) 10%);
    border-radius: var(--border_radius_boton);
    padding: clamp(1.2rem, 3vw, 2.5rem);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: background 0.4s ease, transform 0.4s ease;
}

.imagen-texto44-texto:hover {
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    transform: translateY(-6px);
}

/* === Tipografía === */
.imagen-texto44-texto h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
    text-align: var(--text_align);
}

.imagen-texto44-texto h4,
.imagen-texto44-texto h5 {
    margin-top: 1.2rem;
    font-weight: 600;
    color: var(--color_texto_subtitulo_principal);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    text-align: var(--text_align);
}

.imagen-texto44-texto p {
    margin-top: 0.5rem;
    line-height: 1.7;
    font-size: 1rem;
    color: var(--color_texto_parrafo_general);
    text-align: var(--text_align);
}

/* === Hover global (texto en contraste) === */
.imagen-texto44-texto:hover h2,
.imagen-texto44-texto:hover h4,
.imagen-texto44-texto:hover h5,
.imagen-texto44-texto:hover p {
    color: var(--color-contraste);
}

/* === Responsive === */
@media (max-width: 900px) {
    .imagen-texto44-contenedor {
        flex-direction: column;
        gap: 1.5rem;
    }

    .imagen-texto44-texto {
        order: -1;
        /* Texto arriba */
    }

    .imagen-texto44-img,
    .imagen-texto44-side {
        min-height: 220px;
    }
}

@media (max-width: 600px) {
    .imagen-texto44-wrapper {
        padding: var(--margen_superior) 1rem var(--margen_inferior);
    }

    .imagen-texto44-contenedor {
        gap: 1rem;
    }

    .imagen-texto44-texto {
        padding: 1rem;
    }

    .imagen-texto44-texto h2 {
        font-size: 1.4rem;
    }

    .imagen-texto44-texto p {
        font-size: 0.9rem;
    }
}

/* === 🟥 Imagen-Texto 45 — Versión con variables globales === */
.imagen-texto45-wrapper {

    padding: clamp(2rem, 5vw, 6rem);
    /* afecta TODOS los lados */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* === Título y párrafo principal === */
.imagen-texto45-titulo {

    margin-bottom: 0.5rem;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imagen-texto45-parrafo {
    max-width: 700px;
    margin: 0 auto 2rem auto;
    opacity: 0.9;
    color: var(--color_texto_parrafo_general);
}

/* === Carrusel === */
.imagen-texto45-carrusel {
    display: flex;
    gap: 2rem;
    justify-content: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
}

/* === Tarjetas del carrusel === */
.imagen-texto45-slide {
    flex: 0 0 300px;
    background: color-mix(in srgb, var(--color-gradiente-1) 10%, var(--color-de-fondo-solido) 90%);
    border-radius: var(--border_radius_boton);
    overflow: hidden;
    scroll-snap-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.4s ease, background 0.4s ease;
}

.imagen-texto45-slide:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
}

/* === Imagen dentro del slide === */
.imagen-texto45-slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* === Texto del slide === */
.imagen-texto45-caption {
    padding: 1rem;
}

.imagen-texto45-caption h3 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
    color: var(--color_texto_titulo_1);
}

.imagen-texto45-caption p {
    font-size: 0.9rem;
    opacity: 0.9;
    color: var(--color-parrafo-1);
}

/* === Hover global (texto en contraste) === */
.imagen-texto45-slide:hover h3,
.imagen-texto45-slide:hover p {
    color: var(--color-contraste);
}

/* === 🟦 Imagen-Texto 46 — Versión con variables globales === */
.imagen-texto46-wrapper {
    padding: clamp(2rem, 5vw, 6rem);
    /* afecta TODOS los lados */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    /* reemplaza solo abajo */
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
}

.imagen-texto46-card {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    color: var(--color_texto_parrafo_general);
    background: color-mix(in srgb, var(--color-gradiente-1) 10%, var(--color-de-fondo-solido) 90%);
}

.imagen-texto46-bg {
    background-size: cover;
    background-position: center;
    height: 350px;
    transition: transform 0.5s ease;
}

.imagen-texto46-card:hover .imagen-texto46-bg {
    transform: scale(1.1);
}

.imagen-texto46-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: color-mix(in srgb, var(--color-de-fondo-solido) 45%, transparent);
    text-align: center;
    padding: 2rem;
}


.imagen-texto46-content h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.5rem;

    /* para legibilidad real */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

}

.imagen-texto46-content p {
    color: var(--color_texto_parrafo_general);
    /* texto suave */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    font-size: clamp(1rem, 2vw, 2.8rem);
}


/* === 🟩 Imagen-Texto 47 — Versión con variables globales y ajustes responsivos === */
.imagen-texto47-wrapper {

    padding: clamp(2rem, 5vw, 6rem);
    /* afecta TODOS los lados */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    display: flex;
    justify-content: center;
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
}

.imagen-texto47-contenedor {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    max-width: 700px;
    /* 🔹 Imagen más pequeña y centrada */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    background: color-mix(in srgb, var(--color-gradiente-1) 10%, var(--color-de-fondo-solido) 90%);
}

.imagen-texto47-contenedor img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.imagen-texto47-contenedor:hover img {
    transform: scale(1.05);
}

.imagen-texto47-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: color-mix(in srgb, var(--color-contraste) 50%, transparent);
    color: var(--color_texto_boton_principal);
    opacity: 0;
    transition: opacity 0.4s ease;
    text-align: center;
    padding: 2rem;
}

.imagen-texto47-contenedor:hover .imagen-texto47-overlay {
    opacity: 1;
}

.imagen-texto47-overlay h3 {


    margin-bottom: 1rem;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imagen-texto47-overlay p {
    color: var(--color_texto_parrafo_general);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    margin-bottom: 1rem;
}

.btn47 {
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    padding: 0.8rem 1.6rem;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    margin-top: 0.5rem;
    transition: background 0.3s ease, transform 0.3s ease;
}

.btn47:hover {
    background: var(--color-gradiente-1);
    transform: scale(1.05);
    color: var(--color_texto_boton_principal);
}

/* === 📱 Responsive === */
@media (max-width: 768px) {
    .imagen-texto47-contenedor {
        max-width: 90%;
    }

    .imagen-texto47-overlay p {
        display: none;
        /* 🔹 Oculta párrafo en pantallas pequeñas */
    }

    .imagen-texto47-overlay h3 {
        font-size: 1.3rem;
    }

    .btn47 {
        font-size: 0.9rem;
        padding: 0.6rem 1.2rem;
    }
}

/* === 🟨 Imagen-Texto 48 — Versión Senior equilibrada === */
.imagen-texto48-wrapper {
    padding: clamp(3rem, 7vw, 9rem);

    /* afecta TODOS los lados */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
    position: relative;
    overflow: hidden;
}

/* === GRID PRINCIPAL === */
.imagen-texto48-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 4rem;
    max-width: 1300px;
    margin: 0 auto;
    text-align: var(--text_align);
}

/* === COLUMNA DE TEXTO === */
.imagen-texto48-texto {
    position: relative;
    z-index: 2;
    padding-left: 2.5rem;
    max-width: 600px;
}

.imagen-texto48-texto h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.imagen-texto48-texto h4 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: var(--color_texto_subtitulo_principal);
    margin-bottom: 1.25rem;
    letter-spacing: 0.4px;
    font-weight: 500;
}

.imagen-texto48-texto p {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.8;
    color: var(--color_texto_parrafo_general);
    margin-bottom: 2.5rem;
}

/* Línea decorativa */
.imagen-texto48-texto::before {
    content: "";
    position: absolute;
    top: 12%;
    left: 0;
    width: 5px;
    height: 75%;
    background: var(--color-gradiente-global);
    border-radius: 2rem;
    opacity: 0.85;
}

/* === COLUMNA DE IMÁGENES === */
.imagen-texto48-imagenes {
    display: grid;
    grid-template-areas:
        "img1"
        "img2";
    position: relative;
    width: 100%;
    justify-items: center;

}

/* Estilo general imágenes */
.imagen-texto48-imagenes img {
    width: 100%;
    max-width: 500px;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    transition: all 0.6s ease;
}

/* Animación suave al pasar */
.imagen-texto48-imagenes img:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

/* Collage equilibrado */
.img48a {
    grid-area: img1;
    transform: translateY(1rem) rotate(-1.5deg);
    z-index: 2;
}

.img48b {
    grid-area: img2;
    transform: translate(-2rem, -4rem) rotate(2deg);
    opacity: 0.95;
    z-index: 1;
}

/* Fondo difuminado sutil detrás */
.imagen-texto48-imagenes::after {
    content: "";
    position: absolute;
    top: 15%;
    left: 10%;
    width: 80%;
    height: 70%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1), transparent 70%);
    filter: blur(20px);
    z-index: 0;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .imagen-texto48-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .imagen-texto48-texto {
        padding-left: 0;
        max-width: none;
    }

    .imagen-texto48-texto::before {
        display: none;
    }

    .imagen-texto48-imagenes {
        grid-template-areas:
            "img1"
            "img2";
    }

    .img48a,
    .img48b {
        transform: rotate(0) translate(0);
    }
}

@media (max-width: 600px) {
    .imagen-texto48-wrapper {
        padding: 2rem;
    }

    .imagen-texto48-texto h2 {
        font-size: 1.8rem;
    }

    .imagen-texto48-texto h4 {
        font-size: 1.1rem;
    }

    .imagen-texto48-texto p {
        font-size: 1rem;
    }
}

/* === 🟩 Imagen-Texto 49 — Versión refinada profesional (centrada y equilibrada) === */
.imagen-texto49-wrapper {
    padding: clamp(3rem, 6vw, 8rem);
    /* afecta TODOS los lados */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
    text-align: center;
    position: relative;
}

/* === TÍTULOS Y TEXTO === */
.imagen-texto49-wrapper h2 {

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.imagen-texto49-wrapper p {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: var(--color_texto_parrafo_general);
    max-width: 720px;
    margin: 0 auto 3.5rem;
    line-height: 1.7;
}

/* === CARRUSEL === */
.imagen-texto49-carrusel {
    display: flex;
    justify-content: center;
    /* ✅ centra horizontalmente */
    gap: 2rem;
    overflow-x: auto;
    padding: 0 1rem 1.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.imagen-texto49-carrusel::-webkit-scrollbar {
    display: none;
}

/* === ITEM === */
.imagen-texto49-item {
    flex: 0 0 300px;
    background: var(--color-contraste, #fff);
    border-radius: var(--border_radius_boton);
    overflow: hidden;
    scroll-snap-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: grab;
    position: relative;
}

.imagen-texto49-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);
}

/* === IMAGEN DEL CARRUSEL === */
.imagen-texto49-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-bottom: 4px solid var(--color-gradiente-global);
}

/* === TÍTULO DE LA TARJETA === */
.imagen-texto49-item h4 {
    font-size: clamp(1rem, 1.1vw, 1.25rem);
    color: var(--color_texto_titulo_1);
    font-weight: 600;
    padding: 1rem;
    background: var(--color-gradiente-global, #fff);
    text-align: center;
}

/* === INDICACIÓN DE DESPLAZAMIENTO === */
.imagen-texto49-hint {
    display: none;
    font-size: 0.95rem;
    color: var(--color-gradiente-2);
    opacity: 0.8;
    margin-top: 2rem;
    animation: deslizaHint 2s infinite ease-in-out;
}

@keyframes deslizaHint {

    0%,
    100% {
        transform: translateX(0);
        opacity: 0.8;
    }

    50% {
        transform: translateX(6px);
        opacity: 1;
    }
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .imagen-texto49-wrapper {
        padding: 2.5rem 1.25rem;
    }

    .imagen-texto49-carrusel {
        justify-content: flex-start;
        /* ✅ permite deslizar libremente */
        padding-inline: 1rem;
        gap: 1.5rem;
    }

    .imagen-texto49-hint {
        display: block;
    }
}

@media (max-width: 600px) {
    .imagen-texto49-item {
        flex: 0 0 260px;
    }

    .imagen-texto49-wrapper h2 {
        font-size: 1.8rem;
    }

    .imagen-texto49-wrapper p {
        font-size: 1rem;
    }
}

/* === 🟪 Imagen-Texto 50 (con variables globales) === */
.imagen-texto50-wrapper {
    padding: clamp(2rem, 5vw, 6rem);
    background: linear-gradient(135deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));
    color: var(--color_texto_parrafo_general);
    /* afecta TODOS los lados */
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
}

.imagen-texto50-contenedor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

/* === IMAGEN === */
.imagen-texto50-img {
    flex: 1 1 300px;
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* === TEXTO === */
.imagen-texto50-texto {
    flex: 1 1 350px;
    background: var(--color-de-fondo-solido);
    text-align: var(--text_align);
    padding: 1.5rem;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.imagen-texto50-texto h2 {
    margin-bottom: 1rem;

    color: var(--color_texto_titulo_general);


    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imagen-texto50-texto p {
    line-height: 1.7;
    max-width: 600px;
    color: var(--color_texto_parrafo_general);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .imagen-texto50-contenedor {
        flex-direction: column;
    }

    .imagen-texto50-img {
        width: 100%;
        height: 250px;
    }

    .imagen-texto50-texto {
        padding: 1.25rem;
        text-align: center;
    }

    .imagen-texto50-texto h2 {
        font-size: clamp(1.3rem, 4vw, 2rem);
    }
}

/* === 🟦 Imagen-Texto 51 (con variables globales) === */
.imagen-texto51-wrapper {
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: var(--color_texto_parrafo_general);
    background-color: var(--color-de-fondo-solido);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
}

/* === Capa semitransparente === */
.imagen-texto51-overlay {
    background: rgba(0, 0, 0, 0.55);
    /* Si prefieres usar tus gradientes, reemplaza la línea de arriba por: 
       background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2), rgba(0,0,0,0.55)); */
    padding: clamp(2rem, 5vw, 6rem);
    border-radius: var(--border_radius_boton);
    text-align: center;
    max-width: 800px;
    color: var(--color_texto_parrafo_general);
}

/* === Título === */
.imagen-texto51-overlay h2 {

    margin-bottom: 1rem;



    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* === Párrafo opcional === */
.imagen-texto51-overlay p {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: var(--color_texto_parrafo_general);
    line-height: 1.7;
}

/* === Responsive === */
@media (max-width: 768px) {
    .imagen-texto51-overlay {
        padding: 2rem 1.25rem;
    }

    .imagen-texto51-overlay h2 {
        font-size: clamp(1.5rem, 4vw, 2.2rem);
    }
}

/* === 🟩 Imagen-Texto 52 (versión final con orden adaptable y variables globales) === */
.imagen-texto52-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: clamp(2rem, 5vw, 6rem);
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
}

/* === BLOQUE DE IMÁGENES === */
.imagen-texto52-imagenes {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.imagen-texto52-imagenes img {
    width: 48%;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 3px solid var(--color-contraste);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background-color: var(--color-contraste);
}

.imagen-texto52-imagenes img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* === BLOQUE DE TEXTO === */
.imagen-texto52-texto {
    text-align: var(--text_align);
}

.imagen-texto52-texto h2 {

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}



.imagen-texto52-texto p {
    line-height: 1.7;
    color: var(--color_texto_parrafo_general);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    max-width: 600px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .imagen-texto52-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem 1.25rem;
    }

    /* 🔹 El texto va primero y las imágenes después */
    .imagen-texto52-texto {
        order: -1;
    }

    .imagen-texto52-imagenes img {
        width: 100%;
    }

    .imagen-texto52-texto h2 {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }
}


/* === 🟨 Imagen-Texto 53 (versión con variables globales) === */
.imagen-texto53-wrapper {
    padding: clamp(2rem, 6vw, 8rem);
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    color: var(--color_texto_parrafo_general);
}

.imagen-texto53-contenedor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

.imagen-texto53-imagen {
    flex: 1 1 300px;
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    border: 3px solid var(--color-contraste);
    background-color: var(--color-de-fondo-solido);
}

.imagen-texto53-texto {
    flex: 1 1 350px;
}

.imagen-texto53-texto h2 {

    margin-bottom: 1rem;

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);
}

.imagen-texto53-texto p {
    line-height: 1.7;
    color: var(--color_texto_parrafo_general);
    text-align: var(--text_align);
}

/* === 🟧 Imagen-Texto 54 (versión con variables globales) === */
.imagen-texto54-wrapper {
    padding: clamp(2rem, 5vw, 6rem);
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: center;
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
}

.imagen-texto54-wrapper h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

}

.imagen-texto54-wrapper p {

    color: var(--color_texto_titulo_general);

}

.imagen-texto54-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.imagen-texto54-item {
    overflow: hidden;
    border-radius: var(--border_radius_boton);
    position: relative;

    border: 3px solid var(--color-contraste);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.imagen-texto54-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    background-color: var(--color-de-fondo-solido);
}

.imagen-texto54-item:hover img {
    transform: scale(1.1);
}

/* === 🟪 Imagen-Texto 55 (versión con variables globales) === */
.imagen-texto55-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    padding: clamp(2rem, 5vw, 6rem);
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
}

/* === Imagen === */
.imagen-texto55-img {
    flex: 1 1 400px;
}

.imagen-texto55-img img {
    width: 100%;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 3px solid var(--color-contraste);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background-color: var(--color-de-fondo-solido);
}

.imagen-texto55-img img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* === Texto === */
.imagen-texto55-texto {
    flex: 1 1 400px;
    text-align: var(--text_align);
}

.imagen-texto55-texto h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

}

.imagen-texto55-texto p {
    color: var(--color_texto_parrafo_general);
    line-height: 1.7;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
}

/* === Invertido === */
.imagen-texto55-wrapper.invertido {
    flex-direction: row-reverse;
}

/* === ✨ Animación base de entrada === */
.scroll-animado {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.scroll-animado.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================
   🌅 Imagen-Texto 61 (Mejorado)
================================ */
.imagen-texto61-wrapper {
    background: var(--color-de-fondo-solido);
    padding: clamp(2rem, 5vw, 6rem) 1.5rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.4s ease;
}

.imagen-texto61-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    max-width: 1200px;
    background: var(--color-gradiente-1, rgba(255, 255, 255, 0.05));
    border-radius: var(--border_radius_boton);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 🪶 Sutil efecto al pasar el mouse */
.imagen-texto61-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.imagen-texto61-imagen {
    flex: 1;
    overflow: hidden;
    border-radius: var(--border_radius_boton) 0 0 var(--border_radius_boton);
}

.imagen-texto61-imagen img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* 📸 Efecto de zoom suave */
.imagen-texto61-card:hover .imagen-texto61-imagen img {
    transform: scale(1.08);
}

.imagen-texto61-contenido {
    flex: 1;
    padding: 2rem;
    color: var(--color_texto_parrafo_general);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: var(--text_align);
}

/* 🎨 Tipografía limpia y elegante */
.imagen-texto61-contenido h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    line-height: 1.2;

}

.imagen-texto61-contenido p {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}


/* 📱 Diseño responsive */
@media (max-width: 900px) {
    .imagen-texto61-card {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .imagen-texto61-imagen {
        border-radius: 1.5rem 1.5rem 0 0;
    }

    .imagen-texto61-contenido {
        padding: 1.5rem;
    }

    .imagen-texto61-contenido a {
        align-self: center;
    }
}

/* ================================
   🌈 Imagen-Texto 62 (Mejorado)
================================ */
.imagen-texto62-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-de-fondo-solido);
    padding: clamp(2rem, 5vw, 6rem) 1.5rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
}

.imagen-texto62-contenedor {
    position: relative;
    overflow: hidden;
    border-radius: var(--border_radius_boton);
    max-width: 850px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background: var(--color-contraste);
}

/* ✨ Efecto suave de elevación */
.imagen-texto62-contenedor:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.imagen-texto62-foto {
    width: 100%;
    height: auto;
    border-radius: var(--border_radius_boton);
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* 📸 Efecto de zoom al pasar el mouse */
.imagen-texto62-contenedor:hover .imagen-texto62-foto {
    transform: scale(1.05);
}

.imagen-texto62-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.2));
    color: var(--color_texto_titulo_general, #fff);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 1.5rem;
}

.imagen-texto62-contenedor:hover .imagen-texto62-overlay {
    opacity: 1;
}

/* 🖋 Texto dentro del overlay */
.imagen-texto62-overlay h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.75rem;

}

.imagen-texto62-overlay p {
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    color: var(--color_texto_parrafo_general);
    line-height: 1.6;
    margin: 0;
    display: block;

}

/* 📱 Responsive */
@media (max-width: 768px) {
    .imagen-texto62-contenedor {
        max-width: 95%;
    }

    .imagen-texto62-overlay {
        padding: 1.5rem;
    }

    .imagen-texto62-overlay h2 {
        font-size: 1.5rem;
    }

    .imagen-texto62-overlay p {

        display: none;
    }
}

/* ================================
   🪞 Imagen-Texto 63 (Mejorado y Responsivo)
================================ */
.imagen-texto63-wrapper {
    padding: clamp(2rem, 5vw, 6rem) 1.5rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);

    background: var(--color-gradiente-global, linear-gradient(90deg, #007CFF, #8A2EFF));
    color: var(--color_texto_parrafo_general, #ffffff);
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-texto63-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    max-width: 1200px;
    width: 100%;
}

/* === 🖋 Texto === */
.imagen-texto63-texto {
    text-align: var(--text_align);
}

.imagen-texto63-texto h2 {

    margin-bottom: 1rem;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imagen-texto63-texto p {
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.7;
    color: var(--color_texto_parrafo_general, #f5f5f5);
    margin-bottom: 1.5rem;
}

/* === 📸 Imagen === */
.imagen-texto63-figura {
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-texto63-figura img {
    width: 85%;
    max-width: 450px;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* 🧠 Interacción: efecto suave */
.imagen-texto63-figura img:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

/* === 📱 Responsividad === */
@media (max-width: 900px) {
    .imagen-texto63-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .imagen-texto63-texto {
        order: 2;
    }

    .imagen-texto63-figura {
        order: 1;
    }

    .imagen-texto63-figura img {
        width: 100%;
        max-width: 350px;
    }
}

@media (max-width: 600px) {
    .imagen-texto63-wrapper {
        padding: 3rem 1rem;
    }

    .imagen-texto63-texto h2 {
        font-size: 1.6rem;
    }

    .imagen-texto63-texto p {
        font-size: 0.95rem;
    }

    .imagen-texto63-figura img {
        width: 100%;
        max-width: 300px;
    }
}

/* ================================
   🌸 Imagen-Texto 64
================================ */
.imagen-texto64-wrapper {
    padding: 5rem 1rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    display: flex;
    justify-content: center;
    background: var(--color-de-fondo-solido);
}

.imagen-texto64-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--border_radius_boton);
    overflow: hidden;
    max-width: 900px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    text-align: var(--text_align);
}

.imagen-texto64-imagen {
    height: 350px;
    background-size: cover;
    background-position: center;
}

.imagen-texto64-texto {
    padding: 2rem;
    color: var(--color_texto_parrafo_general);
}

.imagen-texto64-texto h3 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* ================================
   🌤 Imagen-Texto 65 (Mejorado y Responsivo)
================================ */
.imagen-texto65-wrapper {
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    padding: clamp(3rem, 6vw, 6rem) 1.5rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    color: var(--color_texto_parrafo_general, #ffffff);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: var(--text_align);
}

/* === 📦 Contenedor Principal === */
.imagen-texto65-contenedor {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: 1200px;
    width: 100%;
}

/* === 🖼 Imagen === */
.imagen-texto65-imagen {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen-texto65-imagen img {
    width: 85%;
    max-width: 420px;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* ✨ Interacción */
.imagen-texto65-imagen img:hover {
    transform: scale(1.05);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
}

/* === 📝 Texto === */
.imagen-texto65-info {
    flex: 1;
    color: var(--color_texto_parrafo_general, #ffffff);
}

.imagen-texto65-info h2 {

    margin-bottom: 1rem;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.imagen-texto65-info p {
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.7;
    color: var(--color_texto_parrafo_general, #f5f5f5);
}

/* === 📱 Responsividad === */
@media (max-width: 900px) {
    .imagen-texto65-contenedor {
        flex-direction: column;
        text-align: center;
    }

    .imagen-texto65-info {
        order: 2;
    }

    .imagen-texto65-imagen {
        order: 1;
    }

    .imagen-texto65-imagen img {
        width: 90%;
        max-width: 350px;
    }

    .imagen-texto65-info h2 {
        font-size: 1.7rem;
    }

    .imagen-texto65-info p {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .imagen-texto65-wrapper {
        padding: 3rem 1rem;
    }

    .imagen-texto65-info h2 {
        font-size: 1.5rem;
    }

    .imagen-texto65-info p {
        font-size: 0.95rem;
    }

    .imagen-texto65-imagen img {
        width: 100%;
        max-width: 300px;
    }
}

/* ================================
   🌄 Imagen-Texto 66 - Parallax Suave Profesional
================================ */
.imagen-texto66-wrapper {
    position: relative;
    overflow: hidden;
    height: 90vh;
    display: flex;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    align-items: center;
    justify-content: center;
    color: var(--color_texto_parrafo_general);
    background: var(--color-de-fondo-solido);
}

.imagen-texto66-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.25);
    transition: transform 10s ease;
}

.imagen-texto66-wrapper:hover .imagen-texto66-bg {
    transform: scale(1.05);
}

.imagen-texto66-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 4rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--border_radius_boton);
    backdrop-filter: blur(10px);
    max-width: 800px;
    color: var(--color_texto_parrafo_general);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.imagen-texto66-overlay h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.imagen-texto66-overlay p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--color_texto_parrafo_general);
    opacity: 0.9;
}

/* 🔹 Ocultar el párrafo en dispositivos pequeños */
@media (max-width: 768px) {
    .imagen-texto66-overlay {
        padding: 1.5rem 1.2rem;
        border-radius: 1rem;
    }

    .imagen-texto66-overlay h2 {
        font-size: 1.8rem;
    }

    .imagen-texto66-overlay p {
        display: none;
        /* 👈 No se muestra el párrafo en móvil/tablet */
    }

    .imagen-texto66-wrapper {
        height: 70vh;
    }
}

/* ================================
   🌀 Imagen-Texto 67 - Flip 3D Card Profesional
================================ */
.imagen-texto67-wrapper {
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
    background: var(--color-gradiente-global);
}

.imagen-texto67-card {
    width: 400px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    border-radius: 1rem;
    cursor: pointer;
}

.imagen-texto67-wrapper:hover .imagen-texto67-card {
    transform: rotateY(180deg);
}

.imagen-texto67-front,
.imagen-texto67-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--border_radius_boton);
    backface-visibility: hidden;
    overflow: hidden;
}

/* 🖼️ Cara frontal con imagen */
.imagen-texto67-front {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;

    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.25);
}

/* 🧭 Cara trasera con contenido */
.imagen-texto67-back {
    background: var(--color-de-fondo-solido);

    transform: rotateY(180deg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.imagen-texto67-back h3 {
    color: var(--color_texto_titulo_general);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.imagen-texto67-back p {
    color: var(--color_texto_parrafo_general);
    font-size: 1rem;
    line-height: 1.6;
}

/* 📱 Responsive: diseño adaptable */
@media (max-width: 768px) {
    .imagen-texto67-card {
        width: 90%;
        height: 260px;
    }

    .imagen-texto67-back h2 {
        font-size: 1.5rem;
    }

    .imagen-texto67-back p {
        font-size: 0.95rem;
    }
}


/* ================================
   🌌 Imagen-Texto 69 - Overlay dinámico
================================ */
.imagen-texto69-wrapper {
    position: relative;
    min-height: 80vh;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color_texto_parrafo_general);
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    /* Texto general usando variable */
}

.imagen-texto69-overlay {
    background: rgba(0, 0, 0, 0.5);
    /* semi-transparente, no fijo para dinamismo */
    padding: 3rem 4rem;

    border-radius: var(--border_radius_boton);
    text-align: center;
    transition: background 0.4s ease, transform 0.4s ease;

    /* Usando variable global para título */
}

.imagen-texto69-overlay h2 {

    margin-bottom: 1rem;
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    /* Título con variable global */
}

.imagen-texto69-overlay p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
    /* Párrafo con variable global */
}

/* Hover dinámico */
.imagen-texto69-wrapper:hover .imagen-texto69-overlay {
    background: var(--color-de-fondo-solido);
    transform: translateY(-5px);
    /* leve elevación al hover */
}

/* 📱 Responsive */
@media (max-width: 768px) {
    .imagen-texto69-overlay {
        padding: 2rem 2rem;
    }

    .imagen-texto69-overlay h2 {
        font-size: 1.5rem;
    }

    .imagen-texto69-overlay p {
        font-size: 0.95rem;
    }
}

/* ================================
   🌟 Imagen-Texto 70 - Marco animado
================================ */
.imagen-texto70-wrapper {
    padding: 5rem 1.5rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    display: flex;
    justify-content: center;
    background: var(--color-de-fondo-solido);
}

.imagen-texto70-contenido {
    text-align: var(--text_align);
    max-width: 900px;
}

.imagen-texto70-frame {
    display: inline-block;
    padding: 10px;
    border: 4px solid var(--color-contraste);
    border-radius: var(--border_radius_boton);
    overflow: hidden;
    transition: border-color 0.6s ease;
}

.imagen-texto70-frame img {
    width: 100%;
    border-radius: var(--border_radius_boton);
    transition: transform 0.8s ease;
}

.imagen-texto70-wrapper:hover .imagen-texto70-frame img {
    transform: scale(1.08);
}

.imagen-texto70-texto {
    margin-top: 1.5rem;
}

.imagen-texto70-texto h3 {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.75rem;
}

.imagen-texto70-texto p {
    color: var(--color_texto_parrafo_general);



}

/* ================================
   📰 Imagen-Texto 71 - Estilo editorial
================================ */
.imagen-texto71-wrapper {
    position: relative;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
}

.imagen-texto71-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(70%);
}

.imagen-texto71-box {
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    padding: 3rem 4rem;
    border-radius: var(--border_radius_boton);
    text-align: left;
    max-width: 700px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.imagen-texto71-box h1 {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.imagen-texto71-box p {
    color: var(--color_texto_parrafo_general);
    line-height: 1.7;
    display: block;
}

/* 📱 Responsive */
@media (max-width: 768px) {
    .imagen-texto71-box p {
        display: none;
    }

    .imagen-texto71-box {
        position: relative;
        background: rgba(250, 250, 250, 0.85);
        padding: 3rem 4rem;
        border-radius: 1rem;
        text-align: left;
        max-width: 700px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
}

/* ================================
   ⚫ Imagen-Texto 72 - Minimalista con línea
================================ */
.imagen-texto72-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 5rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
}

.imagen-texto72-contenido {
    display: flex;
    align-items: center;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
    /* Permite bajar los elementos en pantallas pequeñas */
}

.imagen-texto72-contenido img {
    max-width: 400px;
    width: 100%;
    border-radius: var(--border_radius_boton);
    filter: grayscale(30%);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.imagen-texto72-contenido img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
    /* Leve zoom al hover para interactividad */
}

.imagen-texto72-texto {
    text-align: left;
    flex: 1 1 300px;
    /* Tamaño flexible */
}

.imagen-texto72-texto h2 {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.5rem;
}

.linea-animada {
    width: 0%;
    height: 3px;
    background: var(--color-gradiente-global);
    margin: 0.75rem 0;
    animation: lineaCreciente 1.5s forwards;
}

@keyframes lineaCreciente {
    to {
        width: 80%;
    }
}

.imagen-texto72-texto p {
    color: var(--color_texto_parrafo_general);
    max-width: 500px;
    line-height: 1.6;
}

/* 📱 Responsive: pantallas pequeñas */
@media (max-width: 768px) {
    .imagen-texto72-contenido {
        flex-direction: column;
        gap: 2rem;
    }

    .imagen-texto72-texto {
        text-align: center;
        /* Centrado en móvil */
    }

    .imagen-texto72-texto h2 {
        font-size: 1.8rem;
    }

    .imagen-texto72-texto p {
        font-size: 0.95rem;
        max-width: 90%;
        /* Se ajusta al contenedor móvil */
    }

    .imagen-texto72-contenido img {
        max-width: 80%;
    }
}

/* ================================
   🎭 Imagen-Texto 73 - Portafolio artístico
================================ */
.imagen-texto73-wrapper {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

.imagen-texto73-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border_radius_boton);
    width: 400px;
    height: 350px;
}

.imagen-texto73-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.imagen-texto73-hover {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    color: var(--color_texto_parrafo_general);
    /* se usa variable global */
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease;
    padding: 2rem;
    text-align: center;
}

.imagen-texto73-item:hover img {
    transform: scale(1.1);
}

.imagen-texto73-item:hover .imagen-texto73-hover {
    opacity: 1;
}

/* Colores adicionales con variables globales */
.imagen-texto73-titulo {
    color: var(--color_texto_titulo_general);
    /* #29CD42 */
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.imagen-texto73-subtitulo {
    color: var(--color_texto_parrafo_general);
    /* #cccccc */
    font-size: 1.1rem;
}

/* ================================
   📰 Imagen-Texto 74 - Estilo revista moderna
================================ */
.imagen-texto74-wrapper {
    position: relative;
    min-height: 80vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

}

.imagen-texto74-overlay {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
    padding: 4rem;
    color: var(--color_texto_parrafo_general);
    max-width: 700px;
}

.imagen-texto74-overlay h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.imagen-texto74-overlay p {
    line-height: 1.7;
    opacity: 0.9;
    display: block;
}

/* 📱 Responsive */
@media (max-width: 768px) {
    .imagen-texto74-overlay p {
        display: none;
    }
}

/* ================================
   🎨 Imagen-Texto 75 - Galería con texto lateral
================================ */
.imagen-texto75-wrapper {
    padding: 5rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

.imagen-texto75-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.imagen-texto75-img img {
    width: 100%;
    border-radius: var(--border_radius_boton);
    transition: transform 0.6s ease;
}

.imagen-texto75-img img:hover {
    transform: scale(1.05);
}

.imagen-texto75-texto h2 {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
    text-align: var(--text_align);
}

.imagen-texto75-texto p {
    color: var(--color_texto_parrafo_general);
    line-height: 1.7;
    text-align: var(--text_align);
}

@media (max-width: 768px) {
    .imagen-texto75-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Imagen-Texto76 ===== */
.imagen-texto76-wrapper {
    position: relative;
    overflow: hidden;
    color: var(--color_texto_parrafo_general);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imagen-texto76-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(8px) brightness(0.6);
    transform: scale(1.1);
}

.imagen-texto76-contenido {
    position: relative;
    z-index: 2;
    max-width: 800px;
    text-align: center;
    animation: fadeSlideIn 1.5s ease;
}

.imagen-texto76-contenido h2 {
    color: var(--color_texto_titulo_general);
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
🎨 Portfolio: Imagen + Texto Premium
================================ */

/* Wrapper principal */
.portfolio-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    padding: 4rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_parrafo_general);
    align-items: center;
    perspective: 1000px;
}

/* Galería con hover creativo */
.portfolio-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.portfolio-gallery img {
    width: 100%;
    border-radius: var(--border_radius_boton, 1rem);
    object-fit: cover;

    /* Contenedor general */
    .franja22-wrapper {
        width: 100%;
        height: var(--altura_del_espacio);
        position: relative;
        overflow: hidden;
        background: var(--color-de-fondo-solido);
    }

    /* Onda con gradiente REAL */
    .franja22-ondas svg {
        width: 100%;
        height: auto;
        display: block;
    }

    transition: transform var(--transition-global, 0.6s ease),
    box-shadow var(--transition-global, 0.6s ease);
    cursor: pointer;
    position: relative;
}

/* Overlay dinámico */
.portfolio-gallery img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border_radius_boton, 1rem);
    background: var(--color-gradiente-2, rgba(0, 0, 0, 0.6));
    opacity: 0;
    transition: opacity var(--transition-global, 0.6s ease);
}

.portfolio-gallery img:hover::after {
    opacity: 1;
}

.portfolio-gallery img:hover {
    transform: scale(1.15) rotateZ(1deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Texto */
.portfolio-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards;
}

.portfolio-content h3 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
    background: var(--color_texto_titulo_general);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.portfolio-content p {
    font-size: 1.1rem;
    color: var(--color_texto_parrafo_general);
    line-height: 1.6;
    transition: transform 0.4s ease;
}

.portfolio-content p:hover {
    transform: translateX(5px);
}

/* Animación */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================
📱 Responsive — Cambiar el orden en móvil
=========================== */
@media (max-width: 768px) {

    /* Definimos áreas para reordenar */
    .portfolio-section {
        display: grid;
        grid-template-areas:
            "img1"
            "texto"
            "img2";
        gap: 2rem;
    }

    /* Forzamos cada ítem dentro de su área */
    .portfolio-gallery {
        display: contents;
        /* permite separar las imágenes */
    }

    .portfolio-gallery img:first-child {
        grid-area: img1;
    }

    .portfolio-content {
        grid-area: texto;
    }

    .portfolio-gallery img:last-child {
        grid-area: img2;
    }

    /* Ajustes menores */
    .portfolio-content h3 {
        font-size: 1.8rem;
    }

    .portfolio-content p {
        font-size: 1rem;
    }
}

/* ===== Imagen-Texto78 ===== */
.imagen-texto78-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: linear-gradient(120deg, var(--color-gradiente-1), var(--color-gradiente-2));

    text-align: center;
}

.imagen-texto78-imagen img {
    max-width: 450px;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.imagen-texto78-info h2 {
    margin-top: 2rem;

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
}

.imagen-texto78-info p {
    max-width: 700px;
    margin: 1rem auto;
    opacity: 0.9;
    color: var(--color_texto_parrafo_general);
}

/* ===== Imagen-Texto79 ===== */
.imagen-texto79-wrapper {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}

.imagen-texto79-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 0.3s ease-out;
}

.imagen-texto79-wrapper:hover .imagen-texto79-bg {
    transform: scale(1.1);
}

.imagen-texto79-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color_texto_parrafo_general);
    background: rgba(0, 0, 0, 0.45);
    padding: 2rem;
    border-radius: var(--border_radius_boton);
    backdrop-filter: blur(5px);
    animation: fadeIn 1.3s ease;
}

/* ================================
🎨 Imagen-Texto80 Profesional y Equilibrado
================================ */

/* Wrapper principal */
.imagen-texto80-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    padding: 4rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    color: var(--color-texto-parrafo-general);
    align-items: center;
}

/* Imagen */
.imagen-texto80-imagen {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.imagen-texto80-imagen img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
    transition: transform 0.4s ease;
}

.imagen-texto80-imagen:hover img {
    transform: scale(1.03);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

/* Contenido */
.imagen-texto80-contenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    animation: fadeInUp 0.7s ease forwards;
    text-align: var(--text_align);
}

.imagen-texto80-contenido h2 {

    margin: 0;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
    line-height: 1.2;
    transition: color 0.3s ease, transform 0.3s ease;
}

.imagen-texto80-contenido h2:hover {
    transform: scale(1.02);
    color: var(--color_texto_titulo_general);
}

.imagen-texto80-contenido p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
    margin: 0;
    transition: color 0.3s ease;
}

.imagen-texto80-contenido p:hover {
    transform: scale(1.02);
}

/* Botón mejorado y proporcional */
.imagen-texto80-btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    /* Ajustado para proporción */
    border-radius: var(--border_radius_boton);
    /* Más redondeado y elegante */
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.35s ease;
    margin-top: 1.2rem;
    min-width: 140px;
    /* Evita que quede demasiado pequeño */
    text-align: center;
}

.imagen-texto80-btn:hover {
    background: var(--color-contraste);

    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Animación de entrada */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .imagen-texto80-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .imagen-texto80-contenido h2 {
        font-size: 1.8rem;
    }

    .imagen-texto80-contenido p {
        font-size: 0.95rem;
    }

    .imagen-texto80-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
        min-width: 120px;
    }
}

/* ===== Imagen-Texto81 ===== */
.imagen-texto81-wrapper {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 5rem 3rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_titulo_general);
    flex-wrap: wrap;
    text-align: var(--text_align);
}

.imagen-texto81-wrapper h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);

}

.imagen-texto81-wrapper p {

    color: var(--color_texto_parrafo_general);

}

.imagen-texto81-imagen img {
    width: 100%;
    max-width: 500px;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease;
}

.imagen-texto81-imagen img:hover {
    transform: scale(1.05);
}

.imagen-texto81-contenido {
    max-width: 600px;
    animation: fadeSlideLeft 1.2s ease;
}

@keyframes fadeSlideLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Imagen-Texto83 ===== */
.imagen-texto83-wrapper {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 4rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    flex-wrap: wrap;
    background: var(--color-de-fondo-solido);

}

.imagen-texto83-wrapper h2 {

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
}

.imagen-texto83-wrapper p {

    color: var(--color_texto_parrafo_general);
}

.imagen-texto83-texto {
    flex: 1;
    animation: fadeInUp 1s ease;
}

.imagen-texto83-visual img {
    width: 100%;
    max-width: 480px;
    clip-path: circle(30% at 50% 50%);
    border-radius: 1rem;
    transition: clip-path 0.8s ease;
}

.imagen-texto83-wrapper:hover img {
    clip-path: circle(50% at 50% 50%);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Imagen-Texto84 ===== */
.imagen-texto84-wrapper {
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    padding: 6rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    color: var(--color_texto_titulo_general);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.imagen-texto84-wrapper h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
}



.imagen-texto84-wrapper p {
    font-size: 1.3rem;
    color: var(--color_texto_parrafo_general);

}

.imagen-texto84-contenido {
    position: relative;
    animation: floatIn 1.2s ease-in-out;
}

.imagen-texto84-contenido img {
    width: 100%;
    max-width: 600px;
    border-radius: var(--border_radius_boton);
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.imagen-texto84-contenido:hover img {
    opacity: 1;
}

.imagen-texto84-texto {
    margin-top: 2rem;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Imagen-Texto85 ===== */
.imagen-texto85-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
    padding: 4rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    align-items: center;
}

/* Títulos y párrafos */
.imagen-texto85-wrapper h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
    line-height: 1.3;

}

.imagen-texto85-wrapper p {
    color: var(--color_texto_parrafo_general);
    font-size: 1rem;
    line-height: 1.6;

}

/* Animación del contenido */
.imagen-texto85-info {
    animation: fadeSlideRight 1s ease forwards;
}

/* Imagen */
.imagen-texto85-imagen img {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.5s ease;
}

.imagen-texto85-imagen img:hover {
    transform: scale(1.08);
}

/* Botón */
.imagen-texto85-btn {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.85rem 1.8rem;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.imagen-texto85-btn:hover {
    background: var(--color-contraste);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* Animación fadeSlideRight */
@keyframes fadeSlideRight {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .imagen-texto85-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .imagen-texto85-wrapper h2 {
        font-size: 1.8rem;
    }

    .imagen-texto85-wrapper p {
        font-size: 0.95rem;
    }

    .imagen-texto85-btn {
        padding: 0.75rem 1.6rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .imagen-texto85-wrapper {
        padding: 2rem 1rem;
        gap: 1.5rem;
    }

    .imagen-texto85-wrapper h2 {
        font-size: 1.5rem;
    }

    .imagen-texto85-wrapper p {
        font-size: 0.9rem;
    }

    .imagen-texto85-btn {
        padding: 0.7rem 1.4rem;
        font-size: 0.9rem;
    }
}

/* ===== Imagen-Texto86 ===== */
.imagen-texto86-wrapper {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color_texto_parrafo_general);
}

.imagen-texto86-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.2);
    animation: parallaxZoom 10s ease-in-out infinite alternate;
}

@keyframes parallaxZoom {
    from {
        transform: scale(1.2) translateY(0);
    }

    to {
        transform: scale(1.4) translateY(-20px);
    }
}

.imagen-texto86-content {
    position: relative;
    z-index: 2;
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
    padding: 2rem 3rem;
    border-radius: var(--border_radius_boton);
    animation: fadeUp 1.5s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Imagen-Texto87 ===== */
.imagen-texto87-wrapper {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 75vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color_texto_parrafo_general);
    transition: transform 0.8s ease;
}

.imagen-texto87-wrapper:hover {
    transform: scale(1.05);
}

.imagen-texto87-overlay {
    background: rgba(0, 0, 0, 0.5);
    padding: 3rem;
    border-radius: 1rem;
    animation: zoomFade 1s ease;
}

@keyframes zoomFade {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Imagen-Texto88 ===== */
.imagen-texto88-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 5rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    flex-wrap: wrap;
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_titulo_general);
}

.imagen-texto88-wrapper h2 {

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
    text-align: var(--text_align);
}

.imagen-texto88-wrapper p {

    color: var(--color_texto_parrafo_general);
    text-align: var(--text_align);
}

.imagen-texto88-circle img {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    object-fit: cover;
    transform-style: preserve-3d;
    animation: rotate3D 8s linear infinite;
}

@keyframes rotate3D {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.imagen-texto88-texto {
    max-width: 600px;
    animation: fadeInLeft 1.2s ease;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Imagen-Texto89 ===== */
.imagen-texto89-wrapper {
    background: var(--color-de-fondo-solido);
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 3rem;
}

.imagen-texto89-card {
    position: relative;
    width: 350px;
    height: 350px;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

.imagen-texto89-card:hover {
    transform: rotateY(180deg);
}

.imagen-texto89-front,
.imagen-texto89-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 1rem;
    overflow: hidden;
}

.imagen-texto89-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imagen-texto89-back {
    background: var(--color-gradiente-1);
    color: var(--color_texto_parrafo_general);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: rotateY(180deg);
    padding: 2rem;
}


/* ============================
   Imagen-Texto 91 → 95 (Experimental / Premium)
   Usa variables globales: --color-gradiente-1, --color-gradiente-2, --color_texto_titulo_general, --color_texto_parrafo_general...
   ============================ */

/* -----------------------------
   COMMON small utilities for these blocks
   ----------------------------- */
.imagen-texto91-wrapper,


.imagen-texto94-wrapper,
.imagen-texto95-wrapper {
    padding: 3rem 1.25rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);

    --card-radius: 16px;
    color: var(--color_texto_parrafo_general);
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* --- Imagen-Texto91: cursor parallax layers --- */
.it91-stage {
    position: relative;
    perspective: 1000px;
    border-radius: var(--card-radius);
    overflow: hidden;
    min-height: 380px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.02));
}

.it91-layer {
    position: absolute;
    inset: 0;
    transition: transform 0.25s cubic-bezier(.2, .9, .3, 1);
    will-change: transform;
}

.it91-bg {
    background-size: cover;
    background-position: center;
    filter: saturate(0.95) contrast(0.98) brightness(0.92);
    transform: translate3d(0, 0, 0);
}

.it91-mid {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02));
}

.it91-fore {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 2;
}

.it91-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.75));
    color: var(--color_texto_titulo_general);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    max-width: 720px;
    box-shadow: 0 12px 30px rgba(20, 20, 40, 0.08);
    transform: translateZ(40px);
}

.it91-card h2 {
    margin: 0 0 .6rem 0;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
}

.it91-card p {
    margin: 0;
    color: var(--color_texto_parrafo_general);
}


/* stagger is via inline JS transitions */

/* --- Imagen-Texto93: cinematic 3D card --- */
.it93-card-3d {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(.2, .9, .3, 1);
    border-radius: 18px;
    overflow: visible;
}

.it93-face {
    border-radius: 14px;
    min-height: 380px;
    backface-visibility: hidden;
    transform-origin: center;
}

.it93-front {
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.12);
}

.it93-back {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 250, 250, 0.92));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    transform: rotateX(180deg) translateZ(-1px);
}

.it93-back-content h3 {
    margin: 0 0 .6rem 0;
    color: var(--color_texto_titulo_general);
}

.it93-back-content p {
    margin: 0;
    color: var(--color_texto_parrafo_general);
}

/* --- Imagen-Texto94: cursor magnetic + particles --- */
.it94-stage {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    min-height: 360px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.it94-ghost {
    /* subtle animated gradient blob */
    position: absolute;
    width: 40%;
    height: 60%;
    left: 10%;
    top: 10%;
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12), transparent 20%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06), transparent 30%);
    filter: blur(30px);
    opacity: .8;
    pointer-events: none;
}

.it94-caption {
    position: relative;
    z-index: 2;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25));

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform .18s ease-out;
}

.it94-caption h2 {
    margin: 0 0 .4rem 0;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
}

.it94-caption p {
    margin: 0;
    color: var(--color_texto_parrafo_general);
}

/* --- Imagen-Texto95: depth layers parallax on scroll --- */
.it95-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 420px;
}

.it95-layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: transform .2s linear;
}

.it95-back {
    z-index: 1;
    filter: saturate(.9) brightness(.9) blur(.2px);
}

.it95-mid {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02));
    z-index: 2;
}

.it95-front {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.it95-content {
    background: rgba(255, 255, 255, 0.9);
    padding: 1.2rem 1.6rem;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(5, 10, 30, 0.08);
    color: var(--color_texto_parrafo_general);
    max-width: 760px;
    text-align: center;
}

/* -----------------------------
   small responsive rules
   ----------------------------- */
@media (max-width: 900px) {
    .it92-grid {
        grid-template-columns: 1fr;
    }

    .it91-card,
    .it95-content {
        padding: 1rem;
        max-width: 100%;
    }

    .it91-stage,
    .it93-card-3d,
    .it95-wrap {
        min-height: 300px;
    }
}

/* ===== Imagen-Texto 96 ===== */
.imagen-texto96-wrapper {
    position: relative;
    overflow: hidden;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.imagen-texto96-layer {
    position: absolute;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    transition: transform 0.2s ease;
}

.imagen-texto96-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color_texto_parrafo_general);
    backdrop-filter: blur(4px);
    padding: 2rem;
    border-radius: 1rem;
}

/* ===== Imagen-Texto 97 ===== */
.imagen-texto97-wrapper {
    position: relative;
    padding: 8rem 2rem;
    background-size: cover;
    background-position: center;
    color: var(--color_texto_titulo_general);
    text-align: center;
    overflow: hidden;
}

.imagen-texto97-glitch h2 {
    font-size: 3rem;
    position: relative;
    display: inline-block;
    animation: glitch 2s infinite;
}

@keyframes glitch {
    0% {
        text-shadow: 2px 0 var(--color-gradiente-1);
    }

    20% {
        text-shadow: -2px 0 var(--color-gradiente-2);
    }

    40% {
        text-shadow: 2px 2 var(--color-gradiente-3);
    }

    60% {
        text-shadow: -2px -2 var(--color-gradiente-4);
    }

    80% {
        text-shadow: 2px -2 var(--color-gradiente-2);
    }

    100% {
        text-shadow: none;
    }
}


/* ===== Imagen-Texto 98 ===== */
.imagen-texto98-wrapper {
    background: var(--color-de-fondo-solido);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6rem 1rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    perspective: 1200px;
}

.imagen-texto98-card {
    width: 320px;
    height: 420px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.imagen-texto98-card:hover {
    transform: rotateY(180deg);
}

.imagen-texto98-front,
.imagen-texto98-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--border_radius_boton);
    backface-visibility: hidden;
}

.imagen-texto98-front {
    background-size: cover;
    background-position: center;
}

.imagen-texto98-back {
    background: var(--color-gradiente-1);
    color: var(--color_texto_parrafo_general);

    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}



/* ===== Imagen-Texto 100 ===== */
.imagen-texto100-wrapper {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
}

.imagen-texto100-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.6);
    transform: scale(1.05);
    transition: transform 2s ease;
}

.imagen-texto100-overlay {
    position: relative;
    color: var(--color_texto_parrafo_general);
    text-align: center;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
    z-index: 2;
    margin-bottom: 8vh;
}

.imagen-texto100-overlay.visible {
    opacity: 1;
    transform: translateY(0);
}



/* ======================================
🎥 BLOQUE1 - VIDEO TEXTO 1 (Versión Sección)
====================================== */
.bloque1-video-texto1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    padding: 5rem 8%;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    position: relative;
}

/* 🎬 Contenedor del video */
.bloque1-video-texto1__media {
    position: relative;
    width: 100%;
}

/* 🎥 Mantener proporción 16:9 */
.bloque1-video-texto1__ratio {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.bloque1-video-texto1__ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
}

/* 🧾 Contenido textual */
.bloque1-video-texto1__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 2;
    align-items: right;
}

.bloque1-video-texto1__title {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
    margin-bottom: 0.5rem;
    text-align: var(--text_align);

}

.bloque1-video-texto1__paragraph {
    color: var(--color_texto_parrafo_general);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    margin-bottom: 1rem;
    align-self: flex-end;
    text-align: var(--text_align);
}

/* 🔘 Botón */
.bloque1-video-texto1__button {
    align-self: center;
    display: inline-block;
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    padding: 0.9rem 4rem;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.bloque1-video-texto1__button:hover {
    background: var(--color-contraste);
    color: #fff;
    transform: translateY(-2px);
}

/* =============================
📱 Responsive
============================= */
@media (max-width: 1024px) {
    .bloque1-video-texto1 {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 4rem 5%;
    }

    .bloque1-video-texto1__content {
        align-items: center;
    }

    .bloque1-video-texto1__button {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .bloque1-video-texto1 {
        padding: 3rem 1.5rem;
        gap: 2rem;
    }

    .bloque1-video-texto1__title {
        font-size: 1.6rem;
    }

    .bloque1-video-texto1__paragraph {
        font-size: 0.95rem;
    }
}

/* ======================================
🎥 BLOQUE1 - VIDEO YOUTUBE 2 (Centrado)
====================================== */
.bloque1-videoyoutube2 {
    text-align: center;
    padding: 6rem 8%;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

.bloque1-videoyoutube2__content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bloque1-videoyoutube2__title {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
    text-align: var(--text_align);
}

.bloque1-videoyoutube2__paragraph {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--color_texto_parrafo_general);
    line-height: 1.6;
    text-align: var(--text_align);
}

.bloque1-videoyoutube2__ratio {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.bloque1-videoyoutube2__ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: inherit;
}

.bloque1-videoyoutube2__button {
    display: inline-block;
    margin-top: 1rem;
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    padding: 1rem 2rem;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.bloque1-videoyoutube2__button:hover {
    background: var(--color-contraste);
    color: #fff;
    transform: translateY(-2px);
}

/* 📱 Responsive */
@media (max-width: 600px) {
    .bloque1-videoyoutube2 {
        padding: 4rem 1.5rem;
    }
}

/* ======================================
🎥 BLOQUE1 - VIDEO YOUTUBE 3 (Modal)
====================================== */
.bloque1-videoyoutube3 {
    text-align: var(--text_align);
    padding: 6rem 8%;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

.bloque1-videoyoutube3__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.bloque1-videoyoutube3__title {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);

}

.bloque1-videoyoutube3__paragraph {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--color_texto_parrafo_general);
    max-width: 700px;
    line-height: 1.6;
}

.bloque1-videoyoutube3__playbtn {
    margin-top: 1rem;
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bloque1-videoyoutube3__playbtn:hover {
    background: var(--color-contraste);
    color: var(--color_texto_boton_principal);
    transform: translateY(-2px);
}

/* 🎞️ Modal */
.bloque1-videoyoutube3__modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.bloque1-videoyoutube3__modal.active {
    display: flex;
    animation: fadeIn 0.3s ease forwards;
}

.bloque1-videoyoutube3__overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.bloque1-videoyoutube3__iframe-container {
    position: relative;
    width: 80%;
    max-width: 900px;
    aspect-ratio: 16/9;
    z-index: 2;
}

.bloque1-videoyoutube3__iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 1rem;
}

/* 🪄 Animación */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 📱 Responsive */
@media (max-width: 600px) {
    .bloque1-videoyoutube3 {
        padding: 4rem 1.5rem;
    }

    .bloque1-videoyoutube3__iframe-container {
        width: 95%;
    }
}






/* ===============================
   ⚫ Bloque1 - Video-youtube4
   =============================== */

.bloque1-video-youtube4-wrapper {
    padding: 4rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    color: var(--color-texto-principal);
    text-align: center;
}

.bloque1-video-youtube4-header {
    margin-bottom: 2rem;
}

.bloque1-video-youtube4-main-title {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
    margin-bottom: 0.5rem;
    text-align: var(--text_align);
}

.bloque1-video-youtube4-main-paragraph {
    font-size: 1.1rem;
    color: var(--color_texto_parrafo_general);
    text-align: var(--text_align);
}

/* Carrusel horizontal con scroll suave */
.bloque1-video-youtube4-carousel {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0;
}

.bloque1-video-youtube4-item {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: var(--color-gradiente-1);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    transition: transform 0.3s ease;
}

.bloque1-video-youtube4-item:hover {
    transform: scale(1.03);
}

@media (min-width: 768px) {
    .bloque1-video-youtube4-item {
        flex: 0 0 45%;
    }
}

@media (min-width: 1024px) {
    .bloque1-video-youtube4-item {
        flex: 0 0 30%;
    }
}

.bloque1-video-youtube4-frame iframe {
    width: 100%;
    height: 220px;
    border-radius: 0.75rem;
}

.bloque1-video-youtube4-title {
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-texto-titulo-1);
}

/* ==============================
🎥 Bloque1 - Video-youtube6 (Miniatura Lazy)
============================== */
.bloque1-videoyoutube6 {
    text-align: center;
    padding: 4rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

.bloque1-videoyoutube6__content {
    margin-bottom: 2rem;
}

.bloque1-videoyoutube6__title {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
}

.bloque1-videoyoutube6__paragraph {
    color: var(--color_texto_parrafo_general);
    margin-top: 0.5rem;
}

.bloque1-videoyoutube6__thumbnail {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 1rem;
    overflow: hidden;
    max-width: 720px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.bloque1-videoyoutube6__image {
    display: block;
    width: 100%;
    height: auto;
}

.bloque1-videoyoutube6__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
}

.bloque1-videoyoutube6__thumbnail:hover .bloque1-videoyoutube6__overlay {
    background: rgba(0, 0, 0, 0.55);
}

.bloque1-videoyoutube6__play {
    background: var(--color-gradiente-1);
    color: var(--color-gradiente-2);
    border: none;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.bloque1-videoyoutube6__play:hover {
    transform: scale(1.1);
}

/* ==============================
🎨 Bloque1 - Video-youtube7 (Fondo dividido / artístico)
============================== */
.bloque1-videoyoutube7 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
    background: var(--color-de-fondo-solido);
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);

}

.bloque1-videoyoutube7__left {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 3rem;
    border-radius: var(--border_radius_boton);
}

.bloque1-videoyoutube7__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--border_radius_boton);
}

.bloque1-videoyoutube7__content {
    position: relative;
    z-index: 2;
    padding: 3rem;
    text-align: center;
}

.bloque1-videoyoutube7__content h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
    margin-bottom: 1rem;
}

.bloque1-videoyoutube7__content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

.bloque1-videoyoutube7__right {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-de-fondo-claro);
    border-radius: var(--border_radius_boton);
}

.bloque1-videoyoutube7__ratio {
    position: relative;
    width: 80%;
    padding-bottom: 45%;
}

.bloque1-videoyoutube7__ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border_radius_boton);
    border: none;
}

/* 📱 Responsive */
@media (max-width: 900px) {
    .bloque1-videoyoutube7__left {

        margin-left: 0rem;
        margin-bottom: 2rem;
    }

    .bloque1-videoyoutube7 {
        grid-template-columns: 1fr;
    }

    .bloque1-videoyoutube7__ratio {
        width: 100%;
        padding-bottom: 56.25%;
    }
}



/* =====================================================
🎥 BLOQUE1 - VIDEO-youtube8 (Rejilla múltiple con modal)
===================================================== */

.bloque1-videoyoutube8-wrapper {
    padding: 4rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: center;
    background: var(--color-de-fondo-solido);
}

.bloque1-videoyoutube8-header {
    max-width: 700px;
    margin: 0 auto 3rem;
}

/* 🎬 Rejilla de videos */
.bloque1-videoyoutube8-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    /* 🧱 Tres columnas fijas en escritorio */
    justify-content: center;
    align-items: start;
}

/* 📱 Responsivo */
@media (max-width: 1024px) {
    .bloque1-videoyoutube8-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Dos columnas en tablet */
    }
}

@media (max-width: 600px) {
    .bloque1-videoyoutube8-grid {
        grid-template-columns: 1fr;
        /* Una columna en móviles */
    }
}

/* 🧩 Cada item (video + título) */
.bloque1-videoyoutube8-item {
    cursor: pointer;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--color-gradiente-1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: var(--color-texto-titulo-1);
}

.bloque1-videoyoutube8-item:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.bloque1-videoyoutube8-item img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.bloque1-videoyoutube8-header h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    color: var(--color_texto_titulo_general);
}

.bloque1-videoyoutube8-header p {
    padding: 0.8rem;
    font-size: 0.95rem;
    color: var(--color_texto_parrafo_general);
}

/* 🎥 Modal */
.bloque1-videoyoutube8-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.bloque1-videoyoutube8-modal.show {
    display: flex;
}

.bloque1-videoyoutube8-modal-content {
    position: relative;
    width: 90%;
    max-width: 800px;
}

.bloque1-videoyoutube8-modal iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 1rem;
}

.bloque1-videoyoutube8-close {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
}

/* =====================================================
🎥 BLOQUE1 - VIDEO-TEXTO 1 (Cloudinary / Wrapper2)
===================================================== */
.bloque1-video-hero2-wrapper2 {
    position: relative;
    width: 100%;
    height: var(--altura-wrapper, 70vh);
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-de-fondo-solido, #000);
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* 🎬 Video de fondo */
.bloque1-video-hero2-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
    border-radius: 1.5rem;
    filter: brightness(0.85) contrast(1.1);
}

/* 🌈 Capa de gradiente superpuesta */
.bloque1-video-hero2-overlay {
    position: absolute;
    inset: 0;
    background: var(--color-gradiente-global);
    opacity: 0.35;
    z-index: 1;
    border-radius: 1.5rem;
    pointer-events: none;
}

/* 🧾 Contenido */
.bloque1-video-hero2-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 2rem;
    max-width: 900px;
    width: 100%;
    color: var(--color_texto_titulo_general);
}

/* 📝 Título */
.bloque1-video-hero2-title {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    line-height: 1.2;
    color: var(--color_texto_titulo_general, #fff);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* 📄 Párrafo */
.bloque1-video-hero2-paragraph {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
    margin-bottom: 1.8rem;
    color: var(--color_texto_parrafo_general, #f1f1f1);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* 🔘 Botón */
.bloque1-video-hero2-button {
    display: inline-block;
    background: var(--color_fondo_boton_principal, #ffffff);
    color: var(--color_texto_boton_principal, #000);
    padding: 0.9rem 1.8rem;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bloque1-video-hero2-button:hover {
    background: var(--color-contraste, linear-gradient(90deg, #ff7e5f, #feb47b));
    color: var(--color_texto_boton_principal, #000);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* =============================
📱 Responsive
============================= */
@media (max-width: 1024px) {
    .bloque1-video-hero2-wrapper2 {
        height: 60vh;
    }
}

@media (max-width: 768px) {
    .bloque1-video-hero2-wrapper2 {
        height: 55vh;
        margin: 2rem 0;
    }

    .bloque1-video-hero2-title {
        font-size: 2rem;
    }

    .bloque1-video-hero2-paragraph {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .bloque1-video-hero2-wrapper2 {
        height: 50vh;
    }

    .bloque1-video-hero2-title {
        font-size: 1.6rem;
    }

    .bloque1-video-hero2-paragraph {
        font-size: 0.95rem;
    }

    .bloque1-video-hero2-button {
        padding: 0.7rem 1.4rem;
        font-size: 0.9rem;
    }
}

/* 🎥 Ajuste para pantallas grandes: mostrar todo el video */
@media (min-width: 1280px) {
    .bloque1-video-hero2-bg {
        object-fit: contain;
        /* Muestra el video completo */
        background-color: #000;
        /* Rellena con negro donde falte */
    }
}

/* =============================
📱 video-texto2
============================= */



.bloque2-video-lado-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    background: var(--color-de-fondo-solido, #000);
    border-radius: 1.5rem;
    overflow: hidden;


}

.bloque2-video-lado-video {
    flex: 1 1 45%;
    position: relative;
    min-width: 320px;
}

.bloque2-video-lado-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem 0 0 1.5rem;
}

.bloque2-video-lado-texto {
    flex: 1 1 45%;
    color: var(--color_texto_titulo_general, #fff);
    padding: 3rem;
    text-align: var(--text_align);
}

.bloque2-video-lado-texto h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.bloque2-video-lado-texto p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--color_texto_parrafo_general);
}

.bloque2-video-lado-btn {
    display: inline-block;
    padding: 0.8rem 2.5rem;
    border-radius: var(--border_radius_boton);
    background: var(--color_fondo_boton_principal, #fff);
    color: var(--color_texto_boton_principal, #000);
    text-decoration: none;
    font-weight: 600;


}

.bloque2-video-lado-btn:hover {

    background: var(--color-contraste, #fff);




}

@media (max-width: 768px) {
    .bloque2-video-lado-wrapper {
        flex-direction: column;
    }

    .bloque2-video-lado-video video {
        border-radius: 1.5rem 1.5rem 0 0;
    }
}


/* =============================
📱 video-texto3
============================= */


.bloque3-video-logo-wrapper {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    border-radius: var(--border_radius_boton);
}

.bloque3-video-logo-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bloque3-video-logo-overlay {
    position: absolute;
    inset: 0;
    background: var(--color-gradiente-global);
    opacity: 0.4;
}

.bloque3-video-logo-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    transform: translate(-50%, -50%);
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
}


/* =============================
📱 video-texto5
============================= */


.bloque5-video-destacado {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--border_radius_boton);
    overflow: hidden;
}

.bloque5-video-destacado video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bloque5-video-destacado-titulo {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);
}



/* =============================
📱 video-texto6
============================= */


.bloque6-video-banner-wrapper {
    position: relative;
    height: 35vh;
    border-radius: 1rem;
    overflow: hidden;
}

.bloque6-video-banner-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bloque6-video-banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #fff;
    text-align: center;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.4);
    padding: 0.8rem 1.5rem;
    border-radius: 0.6rem;
}

/* =====================================================
🎥 BLOQUES DE VIDEO CLOUDINARY (Video-texto5 → Video-texto10)
Usan variables globales y estructura responsiva
===================================================== */


.video-texto5-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--color-de-fondo-solido);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

/* 🎬 Video ocupa todo el fondo */
.video-texto5-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* ✨ Overlay centrado con gradiente */
.video-texto5-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color-texto-titulo-general);
    background: linear-gradient(45deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));
    padding: 2rem 3rem;
    border-radius: var(--border_radius_boton);
    backdrop-filter: blur(5px);
    max-width: 700px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: fadeIn 1s ease-in-out;
}

.video-texto5-overlay h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
}

.video-texto5-overlay p {
    color: var(--color_texto_parrafo_general);
    font-size: 1.2rem;
    line-height: 1.6;
}

/* 🌍 Animación suave de aparición */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================
📺 💻 Laptops y pantallas grandes (≥ 1200px)
===================================================== */
@media (min-width: 1200px) {
    .video-texto5-overlay {
        padding: 3rem 4rem;
        max-width: 800px;
    }

    .video-texto5-overlay h2 {
        font-size: 2.8rem;
    }

    .video-texto5-overlay p {
        font-size: 1.3rem;
    }
}

/* =====================================================
💻 Tablets (entre 768px y 1199px)
===================================================== */
@media (max-width: 1199px) and (min-width: 768px) {
    .video-texto5-wrapper {
        height: 80vh;
    }

    .video-texto5-overlay {
        max-width: 600px;
        padding: 2rem;
    }

    .video-texto5-overlay h2 {
        font-size: 1.8rem;
    }

    .video-texto5-overlay p {
        font-size: 1rem;
    }
}

/* =====================================================
📱 Celulares (≤ 767px)
===================================================== */
@media (max-width: 767px) {
    .video-texto5-wrapper {
        height: auto;
        min-height: 100vh;
        padding: 1.5rem;
        align-items: flex-end;
    }

    .video-texto5-overlay {
        width: 100%;
        max-width: 90%;
        padding: 1.2rem;
        border-radius: 0.8rem;
        background: linear-gradient(135deg,
                var(--color-gradiente-2),
                var(--color-gradiente-3));
    }

    .video-texto5-overlay h2 {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
    }

    .video-texto5-overlay p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
}

/* =====================================================
📱 Teléfonos muy pequeños (≤ 360px)
===================================================== */
@media (max-width: 360px) {
    .video-texto5-overlay h2 {
        font-size: 1.3rem;
    }

    .video-texto5-overlay p {
        font-size: 0.9rem;
    }

    .video-texto5-wrapper {
        padding: 1rem;
    }
}

/* 🔹 Video-texto6 – Video izquierda / texto derecha */
.video-texto6-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 4rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
}

.video-texto6-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
}

.video-texto6-video video {
    width: 100%;
    border-radius: var(--border_radius_boton);
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.video-texto6-texto h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1rem;
    text-align: var(--text_align);
}

.video-texto6-texto p {
    color: var(--color_texto_parrafo_general);
    line-height: 1.6;
    text-align: var(--text_align);
}

@media (max-width: 900px) {
    .video-texto6-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ======================================================
   🎥 Video-texto7 – Banner Ancho con Título
====================================================== */
.video-texto7-wrapper {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-de-fondo-solido);
    color: var(--color_texto_titulo_general);

}

/* 🎬 Video de fondo */
.video-texto7-banner video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 8s ease;
}

.video-texto7-wrapper:hover .video-texto7-banner video {
    transform: scale(1.05);
}

/* 🌈 Capa de oscurecimiento suave para mejorar contraste */
.video-texto7-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.35));
    z-index: 2;
    border-radius: var(--border_radius_boton);
}

/* 📝 Texto del banner */
.video-texto7-overlay {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 2rem 3rem;
    border-radius: 1rem;
    backdrop-filter: blur(4px);
}

.video-texto7-overlay h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.6);
    margin-bottom: 1rem;
}



/* 💻 Laptop / Escritorio */
@media (max-width: 1200px) {
    .video-texto7-overlay h2 {
        font-size: 2.5rem;
    }

    .video-texto7-overlay p {
        font-size: 1.1rem;
    }
}

/* 📱 Tablets */
@media (max-width: 768px) {
    .video-texto7-wrapper {
        height: 60vh;
        padding: 1rem;
    }

    .video-texto7-overlay {
        padding: 1.5rem 2rem;
    }

    .video-texto7-overlay h2 {
        font-size: 2rem;
    }

    .video-texto7-overlay p {
        font-size: 1rem;
    }
}

/* 📲 Celulares pequeños */
@media (max-width: 480px) {
    .video-texto7-wrapper {
        height: 50vh;
    }

    .video-texto7-overlay h2 {
        font-size: 1.6rem;
    }

    .video-texto7-overlay p {
        font-size: 0.95rem;
    }
}

/* 🔹 Video-texto8 – Video cuadrado con overlay */
.video-texto8-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 3rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: center;
}

.video-texto8-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 500px;
}

.video-texto8-video video {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: var(--border_radius_boton);
    object-fit: cover;
}

.video-texto8-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.3));
    color: var(--color_texto_parrafo_general);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.video-texto8-container:hover .video-texto8-overlay {
    opacity: 1;
}

/* 🔹 Video-texto9 – Video con tarjeta de texto */
.video-texto9-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 0rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    display: flex;
    justify-content: center;
}

.video-texto9-card {
    position: relative;
    width: 100%;
    max-width: 900px;
    overflow: hidden;
    border-radius: var(--border_radius_boton);
}

.video-texto9-card video {
    width: 100%;
    object-fit: cover;
    border-radius: var(--border_radius_boton);
}

.video-texto9-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.8),
            rgba(0, 0, 0, 0));
    color: var(--color_texto_titulo_general);
    padding: 2rem;
}

.video-texto9-info h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.6);
    text-align: var(--text_align);
}

.video-texto9-info p {
    color: var(--color_texto_parrafo_general);
    text-align: var(--text_align);
}

/* 🔹 Video-texto10 – Mini galería o bloque simple */
.video-texto10-wrapper {
    padding: 4rem 2rem;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
    text-align: center;
}

.video-texto10-header h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);
}

.video-texto10-header p {
    color: var(--color_texto_parrafo_general);
    margin-bottom: 2rem;
    text-align: var(--text_align);
}

.video-texto10-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.video-texto10-item video {
    width: 100%;
    border-radius: var(--border_radius_boton);
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-texto10-item:hover video {
    transform: scale(1.05);
}

/* =====================================================
   🔹 Video-texto11 – Video de fondo con mini galería o texto dual
   ===================================================== */
.video-texto11-wrapper {
    position: relative;
    width: 100%;
    min-height: 80vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-de-fondo-solido);
}

/* 🎬 Video de fondo */
.video-texto11-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5);
    z-index: 1;
    transition: filter 0.5s ease;
}

.video-texto11-wrapper:hover video {
    filter: brightness(0.65);
}

/* ✨ Overlay de contenido */
.video-texto11-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    width: 85%;
    max-width: 1200px;
    padding: 3rem 2rem;
    color: var(--color_texto_titulo_general);
    backdrop-filter: blur(4px);
    border-radius: 1rem;
}

/* 🧩 Bloque de texto */
.video-texto11-overlay h2 {
    color: var(--color-texto-titulo-1);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1.2rem;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

.video-texto11-overlay p {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.7;
    max-width: 420px;
    opacity: 0.9;
    color: var(--color-parrafo-1);
}

/* 🪄 Animación sutil de aparición */
.video-texto11-overlay>* {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease forwards;
}

.video-texto11-overlay>*:nth-child(2) {
    animation-delay: 0.2s;
}

.video-texto11-overlay>*:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 📱 Responsive */
@media (max-width: 1024px) {
    .video-texto11-overlay {
        gap: 2rem;
        width: 90%;
        padding: 2.5rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .video-texto11-overlay {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
        backdrop-filter: none;
    }

    .video-texto11-overlay p {
        max-width: 95%;
    }
}

@media (max-width: 480px) {
    .video-texto11-wrapper {
        min-height: 70vh;
    }

    .video-texto11-overlay {
        padding: 1.5rem 1rem;
    }

    .video-texto11-overlay h2 {
        font-size: 1.7rem;
    }

    .video-texto11-overlay p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* =====================================================
   🎥 Video-texto12 – Carrusel visual con fondo de video
   ===================================================== */
.video-texto12-wrapper {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}

/* 🎬 Fondo de video */
.video-texto12-background video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.75);
    /* 🔹 más luz para resaltar el fondo */
}

/* 🌈 Overlay más sutil y elegante */
.video-texto12-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.35) 60%,
            rgba(0, 0, 0, 0.55) 100%);
}

/* 🧱 Contenedor del carrusel */
.video-texto12-carrusel {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2.5rem;
    padding: 5rem 2rem;
    max-width: 1300px;
}

/* 🪄 Tarjeta individual */
.slide {
    flex: 1 1 320px;
    max-width: 360px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1.2rem;
    padding: 2rem 1.8rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    transition: all 0.35s ease;
    text-align: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.slide:hover {
    transform: translateY(-12px);
    background: linear-gradient(145deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

/* 🖼️ Imagen */
.slide img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 1rem;
    margin-bottom: 1.2rem;
    transition: transform 0.4s ease, filter 0.3s ease;
}

.slide:hover img {
    transform: scale(1.06);
    filter: brightness(1.05);
}

/* ✍️ Texto */
.slide h3 {
    color: var(--color-texto-titulo-1);
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    letter-spacing: 0.4px;
}

.slide p {
    color: var(--color-parrafo-1);
    font-size: 1.05rem;
    line-height: 1.65;
    opacity: 0.95;
}

/* 💻 Laptop */
@media (max-width: 1024px) {
    .video-texto12-carrusel {
        gap: 2rem;
        padding: 4rem 1.5rem;
    }

    .slide {
        flex: 1 1 280px;
    }
}

/* 📱 Tablets */
@media (max-width: 768px) {
    .video-texto12-carrusel {
        flex-direction: column;
        align-items: center;
        padding: 3rem 1rem;
    }

    .slide {
        width: 90%;
        max-width: 420px;
    }

    .slide img {
        height: 200px;
    }

    .slide h3 {
        font-size: 1.5rem;
    }

    .slide p {
        font-size: 1rem;
    }
}

/* 📲 Celulares */
@media (max-width: 480px) {
    .video-texto12-wrapper {
        min-height: 80vh;
    }

    .slide {
        padding: 1.5rem;
        border-radius: 1rem;
    }

    .slide img {
        height: 160px;
    }

    .slide h3 {
        font-size: 1.3rem;
    }

    .slide p {
        font-size: 0.9rem;
    }
}

/* ===============================
🎬 Video-texto13 – Versión Profesional Sin Párrafo
================================ */
.video-texto13-wrapper {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    background-color: #000;
}

/* 🎥 Video base */
.video-texto13-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.65) contrast(1.15) saturate(1.2);
    transition: transform 9s ease-in-out;
}

.video-texto13-wrapper:hover video {
    transform: scale(1.06);
}

/* === Overlay === */
.video-texto13-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 3.5rem 2rem;

    /* 🎨 Gradiente + Blur moderno */
    background: linear-gradient(to bottom right,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.15));
    backdrop-filter: blur(6px) brightness(1.05);
    -webkit-backdrop-filter: blur(6px) brightness(1.05);
}

/* === Título === */
.video-texto13-overlay h2 {
    font-size: 4.2rem;
    font-weight: 800;
    color: var(--color-texto-titulo-1);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
    margin-bottom: 2.5rem;
    animation: fadeUp 1s ease forwards;
    line-height: 1.1;
}

.video-texto13-overlay p {

    color: var(--color-parrafo-1);

}

/* === Íconos === */
.video-texto13-overlay .iconos {
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.video-texto13-overlay .iconos i {
    font-size: 3.8rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUpIcon 0.8s forwards;
    cursor: pointer;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.video-texto13-overlay .iconos i:nth-child(1) {
    animation-delay: 0.2s;
}

.video-texto13-overlay .iconos i:nth-child(2) {
    animation-delay: 0.4s;
}

.video-texto13-overlay .iconos i:nth-child(3) {
    animation-delay: 0.6s;
}

/* 🟢 Colores dinámicos según variables globales */
.icono-color-1 {
    color: var(--color-gradiente-1);
}

.icono-color-2 {
    color: var(--color-gradiente-2);
}

.icono-color-3 {
    color: var(--color-gradiente-3);
}

/* ✨ Hover con efecto de brillo */
.video-texto13-overlay .iconos i:hover {
    transform: scale(1.25);
    filter: drop-shadow(0 0 14px currentColor);
}

/* === Animaciones === */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUpIcon {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* === Responsivo === */
@media (max-width: 768px) {
    .video-texto13-overlay {
        padding: 2.5rem 1.2rem;
        background: linear-gradient(to bottom right,
                rgba(255, 255, 255, 0.05),
                rgba(0, 0, 0, 0.15));
    }

    .video-texto13-overlay h2 {
        font-size: 2.4rem;
        margin-bottom: 1.8rem;
    }

    .video-texto13-overlay .iconos {
        gap: 2rem;
    }

    .video-texto13-overlay .iconos i {
        font-size: 2.6rem;
    }
}

/* ===============================
🎬 Video-texto14 – Diseño Premium con Blur Local
================================ */
.video-texto14-wrapper {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    background: var(--color-de-fondo-solido);
}

/* 🎥 Video de fondo */
.video-texto14-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.8) contrast(1.1);
    transition: transform 8s ease-in-out;
}

.video-texto14-wrapper:hover video {
    transform: scale(1.05);
}

/* 🎯 Overlay principal */
.video-texto14-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1.5rem;
    padding: 2rem;
    color: var(--color-texto-titulo-general);
}

/* 🧊 Fondo con blur sólo detrás del texto */
.video-texto14-overlay .texto-fondo {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px) brightness(1.1);
    -webkit-backdrop-filter: blur(8px) brightness(1.1);
    border-radius: 1rem;
    padding: 2rem 3rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    max-width: 800px;
    width: 90%;
    transition: transform 0.4s ease, background 0.4s ease;
}

.video-texto14-overlay .texto-fondo:hover {
    transform: scale(1.02);
    background: rgba(255, 255, 255, 0.15);
}

/* === Títulos === */
.video-texto14-overlay h1 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.video-texto14-overlay h3 {
    font-size: 1.6rem;
    color: var(--color_texto_subtitulo_principal);
    font-weight: 400;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* === Botón === */
.btn-principal {
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    padding: 1rem 2.5rem;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: 600;
    margin-top: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.btn-principal:hover {
    background: var(--color-contraste);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* === Animaciones suaves === */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-texto14-overlay h1,
.video-texto14-overlay h3,
.btn-principal {
    animation: fadeUp 0.8s ease forwards;
}

/* === Responsivo === */
@media (max-width: 1024px) {
    .video-texto14-overlay .texto-fondo {
        padding: 1.5rem 2rem;
    }

    .video-texto14-overlay h1 {
        font-size: 2.5rem;
    }

    .video-texto14-overlay h3 {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .video-texto14-wrapper {
        height: 75vh;
    }

    .video-texto14-overlay .texto-fondo {
        padding: 1.2rem 1.5rem;
        width: 95%;
    }

    .video-texto14-overlay h1 {
        font-size: 2rem;
    }

    .video-texto14-overlay h3 {
        font-size: 1.1rem;
    }

    .btn-principal {
        padding: 0.8rem 1.8rem;
        font-size: 0.9rem;
    }
}

/* ===============================
🎬 Video-texto15 – Fondo en movimiento + Mapa elegante
================================ */
.video-texto15-wrapper {
    position: relative;
    width: 100%;
    min-height: 90vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-de-fondo-solido);
}

/* 🎥 Video de fondo */
.video-texto15-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.7) contrast(1.15);
    transition: transform 10s ease-in-out;
}

.video-texto15-wrapper:hover video {
    transform: scale(1.05);
}

/* 🧊 Overlay con blur y contenido */
.video-texto15-overlay {
    position: relative;
    z-index: 2;
    backdrop-filter: blur(12px) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) brightness(1.1);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    max-width: 900px;
    width: 90%;
    color: var(--color_texto_parrafo_general);
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.video-texto15-overlay:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}


.video-texto15-overlay p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: var(--color_texto_parrafo_general);
}

/* 🗺️ Mapa */
.video-texto15-overlay .mapa-container {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.video-texto15-overlay .mapa-container iframe {
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: 1rem;
    transition: transform 0.4s ease;
}

.video-texto15-overlay .mapa-container iframe:hover {
    transform: scale(1.02);
}

/* 🌐 Botón opcional */
.video-texto15-overlay .btn-principal {
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

.video-texto15-overlay .btn-principal:hover {
    background: var(--color-gradiente-3);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* ✨ Animación de entrada */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-texto15-overlay {
    animation: fadeUp 0.8s ease forwards;
}

/* 📱 Responsive */
@media (max-width: 1024px) {
    .video-texto15-overlay {
        padding: 2.5rem 2rem;
    }

    .video-texto15-overlay h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .video-texto15-wrapper {
        min-height: auto;
        padding: 4rem 1rem;
    }

    .video-texto15-overlay {
        padding: 2rem 1.5rem;
        width: 95%;
    }

    .video-texto15-overlay h2 {
        font-size: 1.8rem;
    }

    .video-texto15-overlay p {
        font-size: 1rem;
    }

    .video-texto15-overlay .mapa-container iframe {
        height: 300px;
    }
}


/* 🔹 Video-texto16 – Mini galería o bloque simple */

.video-texto16-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 80vh;

    position: relative;
    overflow: hidden;
}

/* Imagen y video lado a lado */
.video-texto16-wrapper .imagen-lado,
.video-texto16-wrapper .video-lado {
    flex: 1;
    height: 100%;
    position: relative;
}

.video-texto16-wrapper .imagen-lado img,
.video-texto16-wrapper .video-lado video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Capa de oscurecimiento sutil para dar contraste al texto */
.video-texto16-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Texto centrado */
.video-texto16-wrapper .texto-overlay {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--color_texto_titulo_general);
    padding: 2rem;
    max-width: 90%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border_radius_boton);
    backdrop-filter: blur(4px);
}

.video-texto16-wrapper .texto-overlay h2 {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.video-texto16-wrapper .texto-overlay p {
    font-size: 1.1rem;
    color: var(--color_texto_parrafo_general);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 🔸 Responsive mejorado */
@media (max-width: 1024px) {
    .video-texto16-wrapper {
        flex-direction: column;
        height: auto;
    }

    .video-texto16-wrapper .texto-overlay {
        position: static;
        transform: none;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 0;
        padding: 1.5rem;
        margin: 0 auto;
        text-align: center;
    }

    .video-texto16-wrapper .texto-overlay h2 {
        font-size: 1.8rem;
    }

    .video-texto16-wrapper .texto-overlay p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .video-texto16-wrapper .texto-overlay h2 {
        font-size: 1.6rem;
    }

    .video-texto16-wrapper .texto-overlay p {
        font-size: 0.95rem;
    }
}

/* ===============================
   🌐 Responsive mejorado para móviles y tablets
   =============================== */

@media (max-width: 1024px) {
    .video-texto16-wrapper {
        flex-direction: column;
        height: auto;
        padding: 2rem 1rem;
        gap: 1.5rem;
    }

    /* 📸 Imagen arriba */
    .video-texto16-wrapper .imagen-lado {
        order: 1;
        width: 100%;
        height: auto;
        max-height: 60vh;
        border-radius: 1rem;
        overflow: hidden;
    }

    .video-texto16-wrapper .imagen-lado img {
        height: 100%;
        object-fit: cover;
    }

    /* 📝 Texto al medio, con fondo suave para legibilidad */
    .video-texto16-wrapper .texto-overlay {
        order: 2;
        position: relative;
        transform: none;
        top: auto;
        left: auto;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(6px) saturate(1.05);
        border-radius: 1rem;
        padding: 1.2rem 1.5rem;
        margin: 0 auto;
        width: 90%;
        text-align: center;
        color: var(--color_texto_titulo_general);
    }

    .video-texto16-wrapper .texto-overlay h2 {
        font-size: clamp(1.4rem, 4.5vw, 2rem);
        line-height: 1.2;
        margin-bottom: 0.6rem;
    }

    .video-texto16-wrapper .texto-overlay p {
        font-size: clamp(1rem, 4vw, 1.1rem);
        color: var(--color_texto_parrafo_general);
        line-height: 1.6;
    }

    /* 🎬 Video abajo */
    .video-texto16-wrapper .video-lado {
        order: 3;
        width: 100%;
        height: auto;
        max-height: 65vh;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .video-texto16-wrapper .video-lado video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* 📱 Ajuste extra para teléfonos muy pequeños */
@media (max-width: 480px) {
    .video-texto16-wrapper {
        padding: 1.2rem 0.5rem;
        gap: 1rem;
    }

    .video-texto16-wrapper .texto-overlay {
        width: 95%;
        padding: 1rem;
    }

    .video-texto16-wrapper .texto-overlay h2 {
        font-size: 1.3rem;
    }

    .video-texto16-wrapper .texto-overlay p {
        font-size: 0.95rem;
    }
}


/* 🔹 Video-texto17 – Parallax con video de fondo */
/* 🔹 Video-texto17 — Parallax real con video de fondo */

.video-texto17-wrapper {

    position: relative;
    width: 100%;
    height: 45vh;
    /* altura visible del bloque */
    overflow: hidden;
}

/* El video se queda fijo en el fondo */
.video-texto17-wrapper video {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    /* 👈 lo manda al fondo */
    filter: brightness(0.9);
}

/* Asegura que el resto del contenido quede por encima */
body {
    position: relative;
    z-index: 1;
}

/* Opcional: añadir una capa de color encima del video (efecto cinematográfico) */
.video-texto17-wrapper::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: -1;
}

/* Responsive */
@media (max-width: 768px) {
    .video-texto17-wrapper {
        height: 60vh;
    }
}

/* ================= Separadores CSS ================= */

/* Separador 1: línea simple */
.separador-1 {
    height: var(--altura_del_espacio, 4px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
    border-radius: 4px;
}

/* Separador 2: doble línea con sombra */
.separador-2 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2));
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Separador 3: línea punteada */
.separador-3 {
    height: var(--altura_del_espacio, 3px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    border-bottom: 3px dotted var(--color-gradiente-1);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 4: gradiente animado */
.separador-4 {
    height: var(--altura_del_espacio, 5px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2));
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: moveGradient 3s linear infinite;
}

/* Separador 5: línea curva decorativa */
.separador-5 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
    border-radius: 50% / 50%;
}

/* Separador 6: puntos y guiones */
.separador-6 {
    height: var(--altura_del_espacio, 4px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    border-bottom: 2px dotted var(--color-gradiente-1);
    border-top: 2px dashed var(--color-gradiente-2);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 7: línea con sombra difusa */
.separador-7 {
    height: var(--altura_del_espacio, 5px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
    border-radius: 2px;
}

/* Separador 8: zigzag/ondulado */
.separador-8 {
    height: var(--altura_del_espacio, 10px);
    width: 100%;
    background: repeating-linear-gradient(135deg,
            var(--color-gradiente-1),
            var(--color-gradiente-1) 10px,
            var(--color-gradiente-2) 10px,
            var(--color-gradiente-2) 20px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 9: doble línea delgada */
.separador-9 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    border-top: 1px solid var(--color-gradiente-1);
    border-bottom: 1px solid var(--color-gradiente-2);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 10: degradado diagonal animado */
.separador-10 {
    height: var(--altura_del_espacio, 5px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(45deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3));
    background-size: 300% 300%;
    animation: gradientMove 5s ease infinite;
    border-radius: 5px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 11: línea con iconos repetidos */
.separador-11 {
    height: var(--altura_del_espacio, 10px);
    width: 100%;
    background-image: repeating-linear-gradient(to right, var(--color-gradiente-1) 0 5px, transparent 5px 10px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 12: línea con sombra interna */
.separador-12 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 13: línea doble degradada */
.separador-13 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(to right, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3));
    border-top: 2px solid var(--color-gradiente-2);
    border-bottom: 2px solid var(--color-gradiente-3);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
    border-radius: 4px;
}

/* Separador 14: línea con sombra y curva */
.separador-14 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    border-radius: 50%/50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 15: línea rayada diagonal */
.separador-15 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(45deg,
            var(--color-gradiente-1),
            var(--color-gradiente-1) 5px,
            var(--color-gradiente-2) 5px,
            var(--color-gradiente-2) 10px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Animaciones */
@keyframes moveGradient {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Separador 16: línea con patrón de círculos */
.separador-16 {
    height: var(--altura_del_espacio, 12px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background-image: radial-gradient(var(--color-gradiente-1) 15%, transparent 16%);
    background-size: 20px 20px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 17: línea doble con ondas */
.separador-17 {
    height: var(--altura_del_espacio, 14px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(-45deg,
            var(--color-gradiente-1),
            var(--color-gradiente-1) 5px,
            var(--color-gradiente-2) 5px,
            var(--color-gradiente-2) 10px);
    border-radius: 50%/50%;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 18: línea con degradado vertical */
.separador-18 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(to bottom, var(--color-gradiente-1), var(--color-gradiente-2));
    border-radius: 4px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 19: línea con triángulos repetidos */
.separador-19 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background-image: repeating-linear-gradient(to right,
            transparent 0 10px,
            var(--color-gradiente-1) 10px 20px);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 20: línea animada de puntos que se desplazan */
.separador-20 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-radial-gradient(circle at 0 50%, var(--color-gradiente-1) 2px, transparent 3px);
    background-size: 20px 100%;
    animation: moveDots 2s linear infinite;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

@keyframes moveDots {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 20px 0;
    }
}

/* Separador 21: línea con triángulos invertidos */
.separador-21 {
    height: var(--altura_del_espacio, 12px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background-image: repeating-linear-gradient(to right,
            transparent 0 10px,
            var(--color-gradiente-1) 10px 20px);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 22: onda animada */
.separador-22 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    border-radius: 50% / 50%;
    animation: waveMove 3s ease-in-out infinite alternate;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

@keyframes waveMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(10px);
    }
}

/* Separador 23: línea con rayas horizontales */
.separador-23 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(to right,
            var(--color-gradiente-1),
            var(--color-gradiente-1) 5px,
            var(--color-gradiente-2) 5px,
            var(--color-gradiente-2) 10px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 24: línea con sombra de luz */
.separador-24 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-2);
    box-shadow: 0 0 10px var(--color-gradiente-1);
    border-radius: 4px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 25: degradado radial */
.separador-25 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: radial-gradient(circle, var(--color-gradiente-1), var(--color-gradiente-2));
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 26: puntos alternados */
.separador-26 {
    height: var(--altura_del_espacio, 12px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-radial-gradient(circle, var(--color-gradiente-1) 2px, transparent 3px);
    background-size: 15px 100%;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 27: zigzag animado */
.separador-27 {
    height: var(--altura_del_espacio, 14px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-1) 10px, var(--color-gradiente-2) 10px, var(--color-gradiente-2) 20px);
    animation: zigzagMove 3s linear infinite;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

@keyframes zigzagMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 20px 0;
    }
}

/* Separador 28: línea con bordes redondeados */
.separador-28 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    border-radius: 12px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 29: línea con rayas diagonales finas */
.separador-29 {
    height: var(--altura_del_espacio, 5px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(45deg, var(--color-gradiente-1), var(--color-gradiente-1) 2px, var(--color-gradiente-2) 2px, var(--color-gradiente-2) 4px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 30: degradado arcoíris */
/* Separador 30: degradado usando variables globales */
.separador-30 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    border-radius: 4px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 31: línea con puntos grandes alternos */
.separador-31 {
    height: var(--altura_del_espacio, 12px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-radial-gradient(circle, var(--color-gradiente-1) 4px, transparent 5px);
    background-size: 20px 100%;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 32: doble línea diagonal */
.separador-32 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(45deg, var(--color-gradiente-1) 0 5px, var(--color-gradiente-2) 5px 10px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 33: línea con sombras múltiples */
.separador-33 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 34: línea con triángulos invertidos pequeños */
.separador-34 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background-image: repeating-linear-gradient(to right,
            var(--color-gradiente-1) 0 5px,
            transparent 5px 10px);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 35: línea con ondas horizontales */
.separador-35 {
    height: var(--altura_del_espacio, 12px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(to right, var(--color-gradiente-1) 0 20px, var(--color-gradiente-2) 20px 40px);
    border-radius: 50% / 50%;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 36: línea degradada vertical y diagonal */
.separador-36 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 37: línea con puntos animados */
.separador-37 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-radial-gradient(circle, var(--color-gradiente-1) 2px, transparent 3px);
    background-size: 15px 100%;
    animation: moveDots 2s linear infinite;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 38: línea con triángulos y sombra */
.separador-38 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background-image: repeating-linear-gradient(to right, var(--color-gradiente-1) 0 10px, transparent 10px 20px);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 39: línea de puntos y guiones */
.separador-39 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    border-bottom: 2px dotted var(--color-gradiente-1);
    border-top: 2px dashed var(--color-gradiente-2);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 40: línea con gradiente circular */
.separador-40 {
    height: var(--altura_del_espacio, 12px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: conic-gradient(var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3));
    border-radius: 50%;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 41: línea con sombra suave y degradado */
.separador-41 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2));
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 42: doble curva */
.separador-42 {
    height: var(--altura_del_espacio, 12px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    border-radius: 50% / 100%;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 43: zigzag diagonal */
.separador-43 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(135deg,
            var(--color-gradiente-1),
            var(--color-gradiente-1) 10px,
            var(--color-gradiente-2) 10px,
            var(--color-gradiente-2) 20px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 44: punteado animado */
.separador-44 {
    height: var(--altura_del_espacio, 4px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    border-bottom: 3px dotted var(--color-gradiente-1);
    animation: dashMove 2s linear infinite;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

@keyframes dashMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

/* Separador 45: línea con iconos repetidos */
.separador-45 {
    height: var(--altura_del_espacio, 12px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background-image: repeating-linear-gradient(to right,
            var(--color-gradiente-1) 0 6px,
            transparent 6px 12px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 46: degradado animado horizontal */
.separador-46 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3));
    background-size: 300% 100%;
    animation: gradientMove2 4s ease infinite;
    border-radius: 4px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

@keyframes gradientMove2 {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }

}

/* Separador 47: línea curva superior */
.separador-47 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    border-radius: 0 0 50% 50%;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 48: sombra interna */
.separador-48 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 49: diagonal rayada */
.separador-49 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(45deg,
            var(--color-gradiente-1),
            var(--color-gradiente-1) 5px,
            var(--color-gradiente-2) 5px,
            var(--color-gradiente-2) 10px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 50: línea con sombra difusa y borde redondeado */
.separador-50 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 51: curva doble superior e inferior */
.separador-51 {
    height: var(--altura_del_espacio, 12px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    border-radius: 50% / 50%;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 52: doble línea punteada */
.separador-52 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    border-top: 2px dotted var(--color-gradiente-1);
    border-bottom: 2px dotted var(--color-gradiente-2);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 53: degradado diagonal animado */
.separador-53 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(45deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3));
    background-size: 200% 200%;
    animation: gradientMove3 3s linear infinite;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

@keyframes gradientMove3 {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}

/* Separador 54: línea con efecto relieve */
.separador-54 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 55: patrón de rayas diagonales */
.separador-55 {
    height: var(--altura_del_espacio, 8px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(135deg,
            var(--color-gradiente-1),
            var(--color-gradiente-1) 6px,
            var(--color-gradiente-2) 6px,
            var(--color-gradiente-2) 12px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 56: línea curva con borde superior */
.separador-56 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    border-radius: 50% 50% 0 0;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 57: sombra interna animada */
.separador-57 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: var(--color-gradiente-1);
    box-shadow: inset 0 0 10px var(--color-gradiente-2);
    animation: innerShadowMove 3s linear infinite;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

@keyframes innerShadowMove {

    0%,
    100% {
        box-shadow: inset 0 0 10px var(--color-gradiente-2);
    }

    50% {
        box-shadow: inset 0 0 10px var(--color-gradiente-3);
    }
}

/* Separador 58: onda pequeña */
.separador-58 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: repeating-linear-gradient(0deg,
            var(--color-gradiente-1),
            var(--color-gradiente-1) 5px,
            var(--color-gradiente-2) 5px,
            var(--color-gradiente-2) 10px);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 59: línea con borde y sombra */
.separador-59 {
    height: var(--altura_del_espacio, 6px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    border-top: 2px solid var(--color-gradiente-1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Separador 60: degradado animado con curvas */
.separador-60 {
    height: var(--altura_del_espacio, 10px);
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3));
    border-radius: 50% / 50%;
    background-size: 200% 100%;
    animation: moveGradient 3s linear infinite;
    margin: var(--margen_superior, 0px) var(--margen_derecho, 0px) var(--margen_inferior, 0px) var(--margen_izquierdo, 0px);
}

/* Espacio:1: línea con borde y sombra */
.espacio1 {

    height: var(--altura_del_espacio, 10px);


}


/* =========================
   Carrusel3 Mejorado
========================= */
/* =========================
   Carrusel3 Split Profesional Final
========================= */
.bloque1-carrusel-wrapper {
    padding: 100px 0;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

/* Wrapper split: imagen izquierda, carrusel derecha */
.carrusel-split-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Imagen principal */
.carrusel-imagen-principal {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.carrusel-imagen-principal .img-principal {
    width: 100%;
    max-width: 450px;
    border-radius: var(--border_radius_boton);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    margin-bottom: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carrusel-imagen-principal .img-principal:hover {
    transform: scale(1.03);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.2);
}

.carrusel-imagen-principal .carrusel-titulo-general {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 0.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    text-transform: uppercase;
    line-height: 1.2;
}

/* Contenedor del carrusel */
.carrusel-contenedor {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
}

/* Tarjeta del slide */
.carousel-item .card {
    width: 100%;
    max-width: 500px;
    padding: 2rem 1.5rem;
    border-radius: 22px;
    background: var(--color-de-fondo-solido);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.carousel-item.active .card {
    transform: scale(1.05);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.25);
}

/* Imagen circular de cada slide */
.carousel-item img.rounded-circle {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 5px solid var(--color-gradiente-1);
}

/* Título del slide */
.carrusel-titulo {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--color-texto-titulo-1);
}

/* Indicadores */
.carousel-indicators {
    bottom: -35px;
}

.carousel-indicators button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-gradiente-2);
    opacity: 0.5;
    margin: 0 4px;
    transition: all 0.3s ease;
}

.carousel-indicators button.active {
    width: 16px;
    height: 16px;
    opacity: 1;
    background-color: var(--color-gradiente-1);
}

/* Botones de navegación */
.carousel-control-prev,
.carousel-control-next {
    width: 6%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 60%, 60%;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

/* =====================
   RESPONSIVE
===================== */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
    .carrusel-split-wrapper {
        gap: 40px;
    }

    .carrusel-imagen-principal {
        flex: 1 1 100%;
        margin-bottom: 30px;
    }

    .carrusel-contenedor {
        flex: 1 1 100%;
    }

    .carrusel-imagen-principal .carrusel-titulo-general {
        font-size: 2.4rem;
    }
}

/* Móviles grandes: 480px - 767px */
@media (max-width: 767px) {
    .carrusel-split-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .carrusel-imagen-principal .carrusel-titulo-general {
        font-size: 2rem;
    }

    .carousel-item .card {
        max-width: 90%;
        padding: 1.5rem 1rem;
    }

    .carousel-item img.rounded-circle {
        width: 120px;
        height: 120px;
    }
}

/* Móviles pequeños: <480px */
@media (max-width: 479px) {
    .carrusel-imagen-principal .carrusel-titulo-general {
        font-size: 1.7rem;
    }

    .carousel-item img.rounded-circle {
        width: 100px;
        height: 100px;
    }

    .carousel-item .card {
        padding: 1rem;
    }
}


/* =========================
   Carrusel 4 — Imagen Protagónica
========================= */
.carrusel4-wrapper {
    padding: 80px 0;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

/* Layout: imagen grande a la izquierda, miniaturas y contenido a la derecha */
.carrusel4-row {
    display: flex;
    gap: 40px;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
}

/* Área imagen principal */
.carrusel4-hero {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-width: 300px;
}

.carrusel4-hero .hero-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
    background: #eee;
    display: block;
    position: relative;
}

.carrusel4-hero .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.carrusel4-hero .hero-media:hover img {
    transform: scale(1.03);
}

/* Hero caption (over the image bottom-left) */
.carrusel4-hero .hero-caption {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.carrusel4-hero .hero-title {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 0.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    line-height: 1.08;
    text-align: var(--text_align);
}

.carrusel4-hero .hero-cta {
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

/* Right column: miniaturas + titles (actúan como controlador) */
.carrusel4-side {
    flex: 0 1 360px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
}

/* Each thumb item */
.carrusel4-thumb {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.22s ease, transform 0.18s ease;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.carrusel4-thumb:hover {
    transform: translateY(-3px);
    background: rgba(0, 0, 0, 0.03);
}

.carrusel4-thumb.active {
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2));
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.carrusel4-thumb .thumb-img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 72px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.carrusel4-thumb .thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carrusel4-thumb .thumb-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
}

.carrusel4-thumb .thumb-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-texto-titulo-1, #222);
}

.carrusel4-thumb .thumb-sub {
    font-size: 0.86rem;
    color: var(--color-parrafo-1);
    opacity: 0.85;
}

/* Small helper: hide desc if not needed */
.carrusel4-thumb .thumb-sub.empty {
    display: none;
}

/* Controls (prev/next) smaller for this module */
.carrusel4-controls {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

/* Responsive rules */
@media (max-width: 1024px) {
    .carrusel4-row {
        gap: 28px;
    }

    .carrusel4-side {
        flex: 0 1 320px;
    }

    .carrusel4-hero .hero-title {
        font-size: 1.7rem;
    }
}

@media (max-width: 768px) {
    .carrusel4-row {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .carrusel4-hero {
        order: 1;
        width: 100%;
        max-width: 820px;
    }

    .carrusel4-side {
        order: 2;
        width: 100%;
        max-width: 820px;
    }

    .carrusel4-thumb {
        padding: 10px;
    }

    .carrusel4-thumb .thumb-img {
        width: 64px;
        height: 64px;
    }

    .carrusel4-hero .hero-title {
        font-size: 1.6rem;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .carrusel4-hero .hero-title {
        font-size: 1.3rem;
    }

    .carrusel4-thumb .thumb-img {
        width: 56px;
        height: 56px;
    }

    .carrusel4-thumb .thumb-title {
        font-size: 0.92rem;
    }
}


/* =========================
   Carrusel 5 – Testimonial Premium Centrado y Ampliado
========================= */
.bloque5-carrusel-premium {
    background: var(--color-de-fondo-solido, #f9fafc);
    padding: 120px 40px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100vh;
    /* Centrado vertical */
}

/* Encabezado */
.carrusel5-header {
    margin-bottom: 60px;
    width: 100%;
    max-width: 900px;
}

.carrusel5-titulo-general {
    font-size: 3rem;
    font-weight: 900;
    color: var(--color_texto_titulo_general, #111);
    letter-spacing: -0.5px;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 auto;
}

/* Tarjeta */
.carrusel5-card {
    background: var(--color-gradiente-1);
    border-radius: 30px;
    padding: 80px 60px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.carousel-item.active .carrusel5-card {
    transform: scale(1.05);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.2);
}

/* Imagen circular */
.carrusel5-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid var(--color-gradiente-2, #4facfe);
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.carousel-item.active .carrusel5-avatar {
    transform: scale(1.05);
}

/* Texto */
.carrusel5-texto {
    font-size: 1.4rem;
    color: #333;
    font-style: italic;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Nombre */
.carrusel5-nombre {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-texto-titulo-1, #111);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Indicadores */
.carousel-indicators {
    bottom: -50px;
}

.carousel-indicators button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-gradiente-2, #43e97b);
    opacity: 0.4;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel-indicators button.active {
    opacity: 1;
    transform: scale(1.4);
    background-color: var(--color-gradiente-1, #4facfe);
}

/* Botones navegación */
.carousel-control-prev,
.carousel-control-next {
    width: 6%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(30%);
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* =========================
   Responsivo
========================= */
@media (max-width: 1200px) {
    .carrusel5-card {
        max-width: 750px;
        padding: 70px 50px;
    }

    .carrusel5-titulo-general {
        font-size: 2.6rem;
    }
}

@media (max-width: 992px) {
    .bloque5-carrusel-premium {
        padding: 100px 30px;
        min-height: auto;
    }

    .carrusel5-card {
        padding: 55px 40px;
    }

    .carrusel5-titulo-general {
        font-size: 2.3rem;
    }

    .carrusel5-texto {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .bloque5-carrusel-premium {
        padding: 80px 20px;
    }

    .carrusel5-card {
        padding: 45px 30px;
    }

    .carrusel5-avatar {
        width: 110px;
        height: 110px;
    }

    .carrusel5-titulo-general {
        font-size: 2rem;
    }

    .carrusel5-texto {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .carrusel5-card {
        padding: 35px 25px;
    }

    .carrusel5-avatar {
        width: 90px;
        height: 90px;
    }

    .carrusel5-titulo-general {
        font-size: 1.7rem;
    }

    .carrusel5-texto {
        font-size: 1rem;
    }
}

/* ==== 🩶Varrusel 6 ==== */
/* ==== 🖼️ CONTENEDOR PRINCIPAL ==== */
/* ===========================
🌍 VARIABLES GLOBALES
=========================== */

/* ===========================
🩶 Carrusel 6
=========================== */

/* ==== 🖼️ CONTENEDOR PRINCIPAL ==== */
.bloque6-carrusel-protagonista {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    background-color: var(--color-de-fondo-solido);
}

/* ==== 🏷️ TÍTULO GENERAL ==== */
.carrusel6-titulo-general {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 0.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 1.5rem;

    letter-spacing: 0.5px;
}

/* ==== 📦 WRAPPER ==== */
.carrusel6-wrapper {
    position: relative;
    width: 90%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    background-color: var(--color-contraste);
}

/* ==== 🎞️ SLIDES ==== */
.carrusel6-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.carrusel6-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 0.8s ease, transform 1.2s ease;
}

.carrusel6-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* ==== 🖼️ IMÁGENES ==== */
.carrusel6-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: transform 1.2s ease;
}

.carrusel6-slide.active .carrusel6-img {
    transform: scale(1.02);
}

/* ==== 🩶 OVERLAY DE TÍTULO ==== */
.carrusel6-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    color: var(--color-texto-titulo-1);
    padding: 1.2rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ==== ⏩ CONTROLES ==== */
.carrusel6-prev,
.carrusel6-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    color: var(--color-contraste);
    border: none;
    font-size: 1.8rem;
    padding: 8px 14px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.carrusel6-prev:hover,
.carrusel6-next:hover {
    background: var(--color-contraste);
    color: var(--color_texto_boton_principal);
}

.carrusel6-prev {
    left: 12px;
}

.carrusel6-next {
    right: 12px;
}

/* ==== ⚪ INDICADORES ==== */
.carrusel6-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.dot {
    height: 10px;
    width: 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dot:hover {
    transform: scale(1.2);
    background: var(--color_texto_boton_principal);
}

.dot.active {
    background: var(--color_texto_boton_principal);
}

/* ==== 📱 RESPONSIVE ==== */
@media (max-width: 768px) {
    .carrusel6-titulo-general {
        font-size: 1.4rem;
    }

    .carrusel6-wrapper {
        width: 95%;
        aspect-ratio: 4 / 3;
    }

    .carrusel6-prev,
    .carrusel6-next {
        font-size: 1.5rem;
        padding: 6px 10px;
    }
}

/* ==== 💎 Carrusel 7 - Cards Modernas (Versión Mobile Fix Pro) ==== */
.bloque7-carrusel-tarjetas {
    position: relative;
    padding: 60px 0 80px;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-gradiente-1) 0%, var(--color-gradiente-2) 100%);
    color: #1a1a1a;
    font-family: "Inter", sans-serif;
}

.carrusel7-titulo-general {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 0.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.carrusel7-wrapper {
    width: 90%;
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
}

.carrusel7-inner {
    position: relative;
}

.carrusel7-slide {
    opacity: 0;
    position: absolute;
    inset: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    transform: scale(0.97);
}

.carrusel7-slide.active {
    opacity: 1;
    position: relative;
    transform: scale(1);
}

/* === CONTENIDO === */
.carrusel7-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
    background: var(--color-gradiente-3);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
}

.carrusel7-content:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* === TEXTO === */
.carrusel7-texto {
    flex: 1;
    min-width: 260px;
    text-align: left;
}

.carrusel7-texto h3 {
    margin-bottom: 12px;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-texto-titulo-1);
    text-align: center;
}

.carrusel7-texto p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color_texto_parrafo_general);
    text-align: center;
}

/* === IMAGEN === */
.carrusel7-imagen {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    aspect-ratio: 16/10;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #f0f0f0;*/
}

.carrusel7-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease;
}

.carrusel7-content:hover .carrusel7-img {
    transform: scale(1.03);
}

/* === BOTONES === */
.carrusel7-prev,
.carrusel7-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-gradiente-4);
    color: var(--color-contraste);
    border: none;
    font-size: 2.2rem;
    cursor: pointer;
    border-radius: 50%;
    padding: 10px 16px;
    z-index: 10;
    transition: all 0.3s ease;
    backdrop-filter: blur(6px);
}

.carrusel7-prev:hover,
.carrusel7-next:hover {
    background-color: var(--color-contraste);
    color: var(--color-gradiente-4);
    transform: translateY(-50%) scale(1.1);
}

.carrusel7-prev {
    left: -20px;
}

.carrusel7-next {
    right: -20px;
}

/* === INDICADORES === */
.carrusel7-indicators {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.carrusel7-indicators .bar {
    display: inline-block;
    width: 45px;
    height: 6px;
    background: linear-gradient(135deg, var(--color-gradiente-2) 0%, var(--color-gradiente-2) 100%);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.carrusel7-indicators .bar.active {
    background: linear-gradient(90deg, var(--color-gradiente-4), var(--color-contraste));
    width: 65px;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .carrusel7-content {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.8rem;
        gap: 2rem;
    }

    .carrusel7-imagen {
        width: 100%;
        max-width: 400px;
        aspect-ratio: 4/3;
        height: auto;
        margin: 0 auto;
    }

    .carrusel7-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        /* Evita deformación en verticales */
    }

    .carrusel7-texto {
        text-align: center;
        width: 100%;
    }

    .carrusel7-wrapper {
        width: 92%;
    }

    .carrusel7-prev,
    .carrusel7-next {
        display: none;
    }
}

@media (max-width: 500px) {
    .carrusel7-titulo-general {
        font-size: 1.7rem;
    }

    .carrusel7-texto h3 {
        font-size: 1.4rem;
    }

    .carrusel7-texto p {
        font-size: 0.95rem;
    }

    .carrusel7-imagen {
        max-width: 100%;
        aspect-ratio: 1/1;
        border-radius: 14px;
    }
}

/* ===========================
💎 Carrusel 8 - Tarjetas Flotantes Minimal Pro
=========================== */
/* ===========================
💎 Carrusel 8 - Tarjetas Flotantes Minimal Pro (mejorado)
=========================== */

.bloque8-carrusel-tarjetas {
    position: relative;
    width: 100%;
    padding: 60px 0;
    padding-bottom: var(--margen_inferior);
    padding-top: var(--margen_superior);
    text-align: center;
    background: var(--color-de-fondo-solido);
    font-family: "Inter", sans-serif;
    overflow: hidden;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
}

/* ==== Título general ==== */
.carrusel8-titulo-general {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));

    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 2rem;
    background: var(--color_texto_titulo_general);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

/* ==== Contenedor ==== */
.carrusel8-wrapper {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.carrusel8-inner {
    position: relative;
    width: 100%;
    height: var(--altura-wapper, 420px);
}

/* ==== Slides ==== */
.carrusel8-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: perspective(1200px) rotateY(15deg) scale(0.9);
    transition: all 1s ease;
}

.carrusel8-slide.active {
    opacity: 1;
    transform: perspective(1200px) rotateY(0deg) scale(1);
    z-index: 2;
}

/* ==== Tarjeta ==== */
.carrusel8-card {
    background: var(--color-de-fondo-solido);
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.carrusel8-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

/* ==== Imagen ==== */

.carrusel8-img {
    width: 100%;
    height: 660px;
    /* 👈 TODAS tendrán el mismo alto */
    object-fit: cover;
    /* 👈 Mantiene proporción y llena el espacio */
    background: var(--color-contraste);
    flex-shrink: 0;
}

/* ==== Texto ==== */
.carrusel8-info {
    padding: 1rem;
    background: var(--color-de-fondo-solido);
}

.carrusel8-info h3 {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--color-texto-titulo-1);
}

/* ==== Botones ==== */
.carrusel8-prev,
.carrusel8-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-gradiente-1);
    color: var(--color-gradiente-2);
    border: none;
    font-size: 2rem;
    padding: 10px 16px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.carrusel8-prev:hover,
.carrusel8-next:hover {
    background-color: var(--color-contraste);
    transform: translateY(-50%) scale(1.1);
}

.carrusel8-prev {
    left: -25px;
}

.carrusel8-next {
    right: -25px;
}

/* ==== Indicadores ==== */
.carrusel8-indicators {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.carrusel8-indicators .dot {
    width: 12px;
    height: 12px;
    background: var(--color-gradiente-1);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carrusel8-indicators .dot.active {
    background: var(--color-gradiente-2);
    transform: scale(1.2);
}

/* ==== Responsive ==== */
@media (max-width: 900px) {
    .carrusel8-inner {
        height: 360px;
    }

    .carrusel8-img {
        height: auto;
        object-fit: contain;
    }

    .carrusel8-prev,
    .carrusel8-next {
        display: none;
    }
}

@media (max-width: 500px) {
    .carrusel8-titulo-general {
        font-size: 1.6rem;
    }

    .carrusel8-info h3 {
        font-size: 1rem;
    }

    .carrusel8-inner {
        height: 300px;
    }
}




/* ===========================
💎 Carrusel 9 - Minimal Fade Pro
=========================== */

.bloque9-carrusel-minimal {
    position: relative;
    width: 100%;
    padding: 80px 0;
    padding-bottom: var(--margen_inferior);
    padding-top: var(--margen_superior);
    ;
    background: var(--color-de-fondo-solido);
    font-family: "Inter", sans-serif;
    text-align: center;
    overflow: hidden;


}

/* ==== Título General ==== */
.carrusel9-titulo-general {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 0.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 2rem;
    background: var(--color_texto_titulo_general);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==== Contenedor ==== */
.carrusel9-wrapper {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* ==== Slides ==== */
.carrusel9-inner {
    position: relative;
    width: 100%;
    height: var(--altura-wapper, 500px);
    border-radius: 18px;
    overflow: hidden;
}

/* ==== Slides ==== */
.carrusel9-inner {
    position: relative;
    width: 100%;
    height: var(--altura-wapper, 500px);
    /* 👈 ALTURA FIJA */
    border-radius: 18px;
    overflow: hidden;
}

.carrusel9-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
    transform: scale(1.05);
}





.carrusel9-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* ==== Imagen ==== */

/* ==== Imagen ==== */
.carrusel9-img {
    width: 100%;
    height: 100%;
    /* 👈 ALTURA FIJA */
    object-fit: cover;
    /* 👈 Todas las imágenes quedan EXACTAMENTE iguales */
    background: var(--color-contraste);
}

/* ==== Overlay con texto ==== */
.carrusel9-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    color: var(--color_texto_boton_principal);
    text-align: left;
    transition: all 0.5s ease;
}

.carrusel9-overlay h3 {
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--color-texto-titulo-1);
    text-align: var(--text_align);
}

/* ==== Botones ==== */
.carrusel9-prev,
.carrusel9-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-gradiente-1);
    color: var(--color-gradiente-2);
    border: none;
    font-size: 2.2rem;
    padding: 10px 16px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(6px);
}

.carrusel9-prev:hover,
.carrusel9-next:hover {
    background: var(--color-contraste);
    transform: translateY(-50%) scale(1.1);
}

.carrusel9-prev {
    left: 20px;
}

.carrusel9-next {
    right: 20px;
}

/* ==== Indicadores Circulares ==== */
.carrusel9-indicators {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.carrusel9-indicators .dot {
    width: 12px;
    height: 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carrusel9-indicators .dot.active {
    background: var(--color_texto_titulo_general);
    transform: scale(1.2);
}

/* ==== Responsive ==== */
@media (max-width: 900px) {
    .carrusel9-inner {
        height: 380px;
    }

    .carrusel9-overlay h3 {
        font-size: 1.2rem;
    }

    .carrusel9-prev,
    .carrusel9-next {
        display: none;
    }
}

@media (max-width: 500px) {
    .carrusel9-inner {
        height: 300px;
    }

    .carrusel9-titulo-general {
        font-size: 1.5rem;
    }
}



/* ===========================
💎 Carrusel 10 – Cinemático Full-Slide
=========================== */
.bloque10-carrusel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 80px 0;
    padding-bottom: var(--margen_inferior);
    padding-top: var(--margen_superior);
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    font-family: "Inter", sans-serif;
}

/* ==== Wrapper principal ==== */
.carrusel10-wrapper {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ==== Contenedor deslizante ==== */
.carrusel10-track {
    display: flex;
    transition: transform 1.2s ease;
    width: 100%;
}

/* ==== Slide individual ==== */
.carrusel10-slide {
    flex: 0 0 100%;
    position: relative;
}

.carrusel10-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 20px;
}

/* ==== Texto superpuesto ==== */
.carrusel10-overlay {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 1rem 2rem;
    text-align: center;
    color: var(--color-texto-titulo-1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.carrusel10-overlay h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

.carrusel10-overlay p {
    font-size: 1rem;
    opacity: 0.9;
}

/* ==== Indicadores ==== */
.carrusel10-indicators {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    gap: 8px;
}

.carrusel10-indicators .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carrusel10-indicators .dot.active {
    background: var(--color-gradiente-3);
    transform: scale(1.3);
}

/* ==== Responsive ==== */
@media (max-width: 900px) {
    .carrusel10-img {
        height: 350px;
    }

    .carrusel10-overlay {
        width: 90%;
        bottom: 20px;
        padding: 0.8rem 1.2rem;
    }

    .carrusel10-overlay h3 {
        font-size: 1.2rem;
    }
}


/* ===========================
💎 Carrusel 11 – Gallery Motion Cards
=========================== */
/* ===========================
💎 Carrusel 11 – Gallery Motion Cards (con variables globales)
=========================== */
.bloque11-carrusel {
    position: relative;
    width: 100%;
    padding: 60px 0 70px;
    padding-bottom: var(--margen_inferior);
    padding-top: var(--margen_superior);
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2));
    font-family: "Inter", sans-serif;
    overflow: hidden;
    text-align: center;

}

/* === Título === */
.carrusel11-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 0.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 2rem;
    background: var(--color_texto_titulo_general);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color_texto_titulo_general);
}

/* === Wrapper === */
.carrusel11-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
}

/* === Track === */
.carrusel11-track {
    display: flex;
    transition: transform 0.9s ease;
    gap: 1.5rem;
}

/* === Slide === */
.carrusel11-slide {
    flex: 0 0 calc(33.333% - 1rem);
    background: var(--color-de-fondo-solido);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.carrusel11-slide:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* === Imagen === */
.carrusel11-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.6s ease;
    background-color: var(--color-contraste);
}

.carrusel11-slide:hover .carrusel11-img {
    transform: scale(1.05);
}

/* === Texto === */
.carrusel11-info {
    padding: 1rem 1.2rem 1.5rem;
}

.carrusel11-info h3 {
    font-size: 1.5rem;
    color: var(--color-texto-titulo-1);
    font-weight: 700;
    margin-bottom: 0.4rem;
}



/* === Indicadores === */
.carrusel11-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

.carrusel11-indicators .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carrusel11-indicators .dot.active {
    background: var(--color-texto-titulo-1);
    transform: scale(1.3);
}

/* === Responsive === */
@media (max-width: 900px) {
    .carrusel11-slide {
        flex: 0 0 calc(50% - 1rem);
    }
}

@media (max-width: 600px) {
    .carrusel11-slide {
        flex: 0 0 100%;
    }

    .carrusel11-img {
        height: 200px;
    }
}


/* ===========================
💎 Carrusel 12 – Perspective 3D Showcase (con variables globales)
=========================== */
.bloque12-carrusel {
    position: relative;
    width: 100%;
    padding: 70px 0;

    background: linear-gradient(145deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));
    font-family: "Inter", sans-serif;
    overflow: hidden;
    text-align: center;
    padding-bottom: var(--margen_inferior);
    padding-top: var(--margen_superior);

}

/* === Título === */
.carrusel12-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 0.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 2rem;
    background: var(--color_texto_titulo_general);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color_texto_titulo_general);
}

/* === Wrapper === */
.carrusel12-wrapper {
    perspective: 1000px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

/* === Slides Container === */
.carrusel12-track {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 1s ease;
    gap: 1.2rem;
}

/* === Slide === */
.carrusel12-slide {
    flex: 0 0 32%;
    background: var(--color-de-fondo-solido);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    transform-origin: center center;
    transition: transform 1s ease, opacity 1s ease;
}

.carrusel12-slide img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background-color: var(--color-contraste);
}

.carrusel12-slide .carrusel12-info {
    padding: 1rem 1.2rem 1.5rem;
}

.carrusel12-slide h3 {
    font-size: 1.2rem;
    color: var(--color-texto-titulo-1);
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.carrusel12-slide p {
    font-size: 0.95rem;
    color: var(--color-parrafo-1);
    line-height: 1.4;
}

/* === Efecto 3D === */
.carrusel12-slide.left {
    transform: perspective(800px) rotateY(25deg) scale(0.9);
    opacity: 0.6;
}

.carrusel12-slide.right {
    transform: perspective(800px) rotateY(-25deg) scale(0.9);
    opacity: 0.6;
}

.carrusel12-slide.center {
    transform: perspective(800px) rotateY(0) scale(1);
    opacity: 1;
}





/* === Responsive === */
@media (max-width: 900px) {
    .carrusel12-slide {
        flex: 0 0 80%;
    }
}

@media (max-width: 600px) {
    .carrusel12-track {
        transform: translateX(0) !important;
        transition: none !important;
    }

    .carrusel12-slide {
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }

    .carrusel12-slide.left,
    .carrusel12-slide.right {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .carrusel12-slide img {
        height: 180px;
        object-fit: cover;
    }
}


/* === Carrusel 13 === */




/* === Carrusel 13: Fade Hero Showcase (Versión Centrada y con Variables Globales) === */
.bloque13-carrusel {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 0 5%;
    padding-bottom: var(--margen_inferior);
    padding-top: var(--margen_superior);
    /* 🔹 Espacio lateral para que no pegue la imagen */
    box-sizing: border-box;

    background: var(--color-de-fondo-solido);
    font-family: "Inter", sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* === Título General === */
.carrusel13-titulo {
    text-align: center;
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 0.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 2rem;

    letter-spacing: -0.5px;
    text-transform: uppercase;
    position: relative;
}

.carrusel13-titulo::after {
    content: "";
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));
    display: block;
    margin: 12px auto 0;
    border-radius: 2px;
}

/* === Contenedor Principal === */
.carrusel13-wrapper {
    position: relative;
    width: 90%;
    /* 🔹 centrado y con espacio lateral */
    margin: 0 auto;
    height: 520px;
    border-radius: 20px;
    overflow: hidden;
    max-width: 1400px;
    /* 🔹 límite para pantallas grandes */
}

/* === Slides === */
.carrusel13-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.carrusel13-slide.active {
    opacity: 1;
    z-index: 2;
}

.carrusel13-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 🔹 usa 'contain' si no quieres recortes */
    display: block;
    filter: brightness(0.9) contrast(1.1);
    border-radius: 20px;
}

/* === Overlay === */
.carrusel13-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.45));
    mix-blend-mode: multiply;
}

/* === Texto dentro de la imagen === */
.carrusel13-info {
    position: absolute;
    bottom: 60px;
    left: 80px;
    color: var(--color_texto_parrafo_general);
    max-width: 540px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.carrusel13-slide.active .carrusel13-info {
    opacity: 1;
    transform: translateY(0);
}

.carrusel13-info h3 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    background: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.carrusel13-info p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-texto-boton);
    font-weight: 400;
    margin-top: 0.5rem;
}

/* === Indicadores === */
.carrusel13-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.carrusel13-indicators .dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carrusel13-indicators .dot.active {
    background: var(--color-gradiente-global);
    transform: scale(1.4);
    box-shadow: 0 0 8px var(--color_texto_titulo_general);
}

/* === Responsive === */
@media (max-width: 1024px) {
    .carrusel13-wrapper {
        width: 95%;
        height: 420px;
    }

    .carrusel13-info {
        left: 40px;
        bottom: 50px;
        max-width: 80%;
    }

    .carrusel13-info h3 {
        font-size: 1.7rem;
    }

    .carrusel13-info p {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .carrusel13-wrapper {
        height: 360px;
    }

    .carrusel13-info {
        left: 25px;
        bottom: 40px;
    }

    .carrusel13-info h3 {
        font-size: 1.4rem;
    }
}



/* === Carrusel 14: Split Showcase === */
/* === Carrusel 14: Split Showcase – Versión Profesional con Variables Globales === */
.bloque14-carrusel {
    width: 100%;
    position: relative;
    overflow: hidden;

    background: var(--color-de-fondo-solido);
    font-family: "Inter", sans-serif;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    padding-bottom: var(--margen_inferior);
    padding-top: var(--margen_superior);
}

.carrusel14-titulo {
    text-align: center;
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 0.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    position: relative;
}

.carrusel14-titulo::after {
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-gradiente-3), var(--color-gradiente-4));
}

/* === Wrapper de Slides === */
.carrusel14-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    overflow: hidden;
    border-radius: 20px;
}

/* === Slide === */
.carrusel14-slide {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 1s ease, transform 1s ease;
}

.carrusel14-slide.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}

/* === Imagen === */
.carrusel14-imagen-container {
    flex: 1;
    overflow: hidden;
    border-radius: 20px 0 0 20px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

.carrusel14-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carrusel14-slide.active .carrusel14-imagen {
    transform: scale(1.05);
}

/* === Información del Slide === */
.carrusel14-info {
    flex: 1;
    background: var(--color-gradiente-1);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-contraste);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.5s ease;
}

.carrusel14-info h3 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color_texto_titulo_general);
    margin-bottom: 1rem;
    line-height: 1.3;
    text-align: var(--text_align);
}

.carrusel14-info p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

/* === Controles === */
.carrusel14-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.carrusel14-controls button {
    pointer-events: all;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-contraste);
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.6rem 1.2rem;
    border-radius: 50%;
    transition: all 0.3s ease, transform 0.2s ease;
    backdrop-filter: blur(4px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.carrusel14-controls button:hover {
    background: var(--color-gradiente-2);
    transform: scale(1.15);
}

/* ===========================
   🌟 Galería2 - Estilos
=========================== */
.galeria2-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 40px 20px;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: var(--text_align);
    font-family: 'Inter', sans-serif;
}

.galeria2-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 2.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.galeria2-grid {
    display: grid;
    gap: 20px;
    justify-items: center;

    /* Desktop grande -> 3 columnas */
    grid-template-columns: repeat(3, 1fr);
}

.galeria2-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Altura uniforme */
    aspect-ratio: 4 / 3;
    /* Puedes ajustar a 1 / 1 si quieres cuadradas */
}

.galeria2-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.galeria2-item img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    /* Recorta la imagen si es necesario para llenar el contenedor */
}

/* Texto sobre la imagen */
.galeria2-texto {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: left;
    box-sizing: border-box;
}

/* Títulos y subtítulos dinámicos */
.galeria2-texto h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-texto-titulo-1);
}

/* ====== RESPONSIVO ====== */

/* Tablets (768px a 1024px) -> 2 columnas */
@media (max-width: 1024px) {
    .galeria2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Móviles (menos de 768px) -> 1 columna */
@media (max-width: 767px) {
    .galeria2-grid {
        grid-template-columns: 1fr;
    }

    .galeria2-texto h3 {
        font-size: 1rem;
    }

    .galeria2-texto h4 {
        font-size: 0.9rem;
    }

    .galeria2-texto p {
        font-size: 0.85rem;
    }
}


/* ===========================
   🌟 Galería3 - Mosaico Editorial
=========================== */
.galeria3-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 50px 20px;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: var(--text_align);
    font-family: "Inter", sans-serif;
}

.galeria3-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 2.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.galeria3-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 180px;
    gap: 15px;
}

.galeria3-item {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    transition: transform .4s ease, box-shadow .4s ease;
}

.galeria3-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Asimetría tipo mosaico */
.galeria3-item.big {
    grid-column: span 3;
    grid-row: span 2;
}

.galeria3-item.medium {
    grid-column: span 2;
    grid-row: span 1;
}

.galeria3-item.small {
    grid-column: span 1;
    grid-row: span 1;
}

.galeria3-item:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

/* Responsivo */
@media (max-width: 1024px) {
    .galeria3-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 160px;
    }
}

@media (max-width: 767px) {
    .galeria3-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
    }
}

/* ===========================
   🌟 Galería4 - Carrusel horizontal
=========================== */
.galeria4-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 60px 20px;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: var(--text_align);

}

.galeria4-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 2.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    text-align: var(--text_align);
}

/* Grid principal */
.galeria4-grid {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(3, 1fr);
}

/* Item */
.galeria4-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 0;
    padding-bottom: 75%;
    /* Mantiene relación 4:3 */
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.galeria4-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 20px;
}

.galeria4-item:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.25);
}

.galeria4-item:hover img {
    transform: scale(1.1);
}

/* Overlay elegante */
.galeria4-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

/* Texto sobre la imagen */
.galeria4-texto {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: var(--color-texto-titulo-1);
    font-size: 1.2rem;
    font-weight: 600;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Responsivo */
@media (max-width: 1024px) {
    .galeria4-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .galeria4-titulo {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .galeria4-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .galeria4-titulo {
        font-size: 2rem;
    }

    .galeria4-texto {
        font-size: 1rem;
    }
}

/* ===========================
   🌟 Galería5 - Cuadrícula uniforme (Responsive Mejorada)
=========================== */
/* ===========================
   🌟 Galería5 - Cuadrícula Premium
=========================== */
.galeria5-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 60px 30px;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: var(--text_align);
}

.galeria5-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 2.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    text-align: var(--text_align);
}

/* Grid uniforme, más espaciosa */
.galeria5-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Computadoras grandes: 3 por fila */
    gap: 28px;
    /* Más separación entre cards */
    padding: 0 20px;
    /* Padding lateral para que no quede pegado al borde */
}

/* Card individual */
.galeria5-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1/1;
    cursor: pointer;
    padding: 8px;
    /* Espacio interno para que la imagen respire */
    background-color: var(--color-gradiente-1);
    ;
    /* Fondo sutil para dar sensación de profundidad */
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.galeria5-item:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
}

.galeria5-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    /* Redondeo interno para imagen */
    transition: transform 0.5s ease;
}

.galeria5-item:hover img {
    transform: scale(1.08);
}

/* Overlay degradado sutil */
.galeria5-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 16px;
}

.galeria5-item:hover::before {
    opacity: 1;
}

/* Texto elegante sobre la imagen */
.galeria5-texto {
    position: absolute;
    bottom: 18px;
    left: 18px;
    color: var(--color-texto-titulo-1);
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.galeria5-item:hover .galeria5-texto {
    opacity: 1;
    transform: translateY(0px);
}

/* ===================== RESPONSIVO ===================== */

/* Laptops / tablets grandes: 2 por fila */
@media (max-width: 1024px) {
    .galeria5-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
        padding: 0 15px;
    }
}

/* Celulares: 1 por fila */
@media (max-width: 767px) {
    .galeria5-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 10px;
    }

    .galeria5-titulo {
        font-size: 2.2rem;
    }

    .galeria5-texto {
        font-size: 1rem;
    }
}



/* ===========================
   🌟 Galería6 - Mosaic Profesional
=========================== */
.galeria6-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 60px 30px;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: var(--text_align);
    font-family: 'Inter', sans-serif;
}

.galeria6-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 2.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* Grid tipo mosaico: 3 arriba, 2 abajo */
.galeria6-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 180px;
    gap: 20px;
}

/* Distribución de las 5 imágenes */
.galeria6-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.galeria6-item:nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
}

.galeria6-item:nth-child(3) {
    grid-column: 5 / 7;
    grid-row: 1 / 2;
}

.galeria6-item:nth-child(4) {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}

.galeria6-item:nth-child(5) {
    grid-column: 4 / 6;
    grid-row: 2 / 3;
}

.galeria6-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.galeria6-item:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
}

.galeria6-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    transition: transform 0.5s ease;
}

.galeria6-item:hover img {
    transform: scale(1.08);
}

/* Overlay degradado sutil */
.galeria6-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 16px;
}

.galeria6-item:hover::before {
    opacity: 1;
}

/* Texto elegante sobre la imagen */
.galeria6-texto {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: var(--color-texto-titulo-1);
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.galeria6-item:hover .galeria6-texto {
    opacity: 1;
    transform: translateY(0);
}

/* ===================== RESPONSIVO ===================== */
@media (max-width: 1024px) {
    .galeria6-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 150px;
        gap: 18px;
    }

    .galeria6-item:nth-child(1),
    .galeria6-item:nth-child(2),
    .galeria6-item:nth-child(3),
    .galeria6-item:nth-child(4),
    .galeria6-item:nth-child(5) {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 767px) {
    .galeria6-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 180px;
        gap: 16px;
    }
}



/* ===========================
   🌟 Galería7 - Mosaico Asimétrico 4 imágenes
=========================== */
.galeria7-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 60px 30px;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: var(--text_align)
}

.galeria7-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 2.5rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* Grid tipo mosaico asimétrico */
.galeria7-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 180px;
    gap: 20px;
}

/* Distribución creativa */
.galeria7-item-1 {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.galeria7-item-2 {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
}

.galeria7-item-3 {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.galeria7-item-4 {
    grid-column: 5 / 7;
    grid-row: 2 / 3;
}

.galeria7-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.galeria7-item:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
}

.galeria7-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    transition: transform 0.5s ease;
}

.galeria7-item:hover img {
    transform: scale(1.08);
}

/* Overlay degradado sutil */
.galeria7-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 16px;
}

.galeria7-item:hover::before {
    opacity: 1;
}

/* Texto elegante sobre la imagen */
.galeria7-texto {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: var(--color-texto-titulo-1);
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.galeria7-item:hover .galeria7-texto {
    opacity: 1;
    transform: translateY(0);
}

/* ===================== RESPONSIVO ===================== */
@media (max-width: 1024px) {
    .galeria7-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 140px;
    }

    .galeria7-item-1,
    .galeria7-item-2,
    .galeria7-item-3,
    .galeria7-item-4 {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 767px) {
    .galeria7-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 180px;
        gap: 16px;
    }
}


/* ===========================
   🌟 Galería8 - Mosaico Asimétrico 5 imágenes
=========================== */
.galeria8-wrapper {
    background: var(--color-de-fondo-solido);
    padding: 60px 30px;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: var(--text_align);
}

.galeria8-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 2.6rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* Grid tipo mosaico asimétrico */
.galeria8-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 180px;
    gap: 20px;
}

/* Distribución creativa */
.galeria8-item-1 {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.galeria8-item-2 {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
}

.galeria8-item-3 {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.galeria8-item-4 {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
}

.galeria8-item-5 {
    grid-column: 6 / 7;
    grid-row: 2 / 3;
}

.galeria8-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.galeria8-item:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
}

.galeria8-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    transition: transform 0.5s ease;
}

.galeria8-item:hover img {
    transform: scale(1.08);
}

/* Overlay degradado sutil */
.galeria8-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 16px;
}

.galeria8-item:hover::before {
    opacity: 1;
}

/* Texto elegante sobre la imagen */
.galeria8-texto {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: var(--color-texto-titulo-1);
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.galeria8-item:hover .galeria8-texto {
    opacity: 1;
    transform: translateY(0);
}

/* ===================== RESPONSIVO ===================== */
@media (max-width: 1024px) {
    .galeria8-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 140px;
    }

    .galeria8-item-1,
    .galeria8-item-2,
    .galeria8-item-3,
    .galeria8-item-4,
    .galeria8-item-5 {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 767px) {
    .galeria8-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 180px;
        gap: 16px;
    }
}


/* ===========================
   🌟 Galería9 - Mosaico dinámico
=========================== */
.galeria9-wrapper {
    background: var(--color-de-fondo-solido);
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: var(--text_align);
}

.galeria9-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 2.6rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.galeria9-grid {
    display: grid;
    grid-template-areas:
        "a a b"
        "a a c"
        "d e f";
    gap: 16px;
}

/* Asignación de áreas */
.galeria9-item-1 {
    grid-area: a;
}

.galeria9-item-2 {
    grid-area: b;
}

.galeria9-item-3 {
    grid-area: c;
}

.galeria9-item-4 {
    grid-area: d;
}

.galeria9-item-5 {
    grid-area: e;
}

.galeria9-item-6 {
    grid-area: f;
}

.galeria9-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.galeria9-item:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.22);
}

.galeria9-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.galeria9-item:hover img {
    transform: scale(1.1);
}

/* Overlay degradado y texto */
.galeria9-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.galeria9-item:hover::before {
    opacity: 1;
}

.galeria9-texto {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: var(--color-texto-titulo-1);
    font-size: 1rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.galeria9-item:hover .galeria9-texto {
    opacity: 1;
    transform: translateY(0);
}

/* Responsivo */
@media (max-width: 1024px) {
    .galeria9-grid {
        grid-template-areas:
            "a a"
            "b c"
            "d e"
            "f f";
    }
}

@media (max-width: 767px) {
    .galeria9-grid {
        grid-template-areas:
            "a"
            "b"
            "c"
            "d"
            "e"
            "f";
    }

    .galeria9-titulo {
        font-size: 2rem;
    }
}



/* Galería 10 */

.galeria10-wrapper {
    padding: 60px 20px;
    padding-top: var(--margen_superior);
    padding-bottom: var(--margen_inferior);
    text-align: var(--text_align);
    background-color: var(--color-de-fondo-solido);
}

.galeria10-titulo {
    font-size: clamp(1.7rem, 4vw, var(--font_size_title));
    margin-bottom: 2.6rem;
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* Grid tipo mosaico: imagen grande a la izquierda, 3x3 a la derecha */
.galeria10-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 20px;
    align-items: start;
}

/* Contenedor para las pequeñas filas */
.galeria10-secundarias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 150px;
    gap: 15px;
}

/* Item base */
.galeria10-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.galeria10-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.galeria10-item:hover {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);
}

.galeria10-item:hover img {
    transform: scale(1.1);
}

.galeria10-texto {
    position: absolute;
    bottom: 12px;
    left: 12px;
    color: var(--color-texto-titulo-1);
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.galeria10-item:hover .galeria10-texto {
    opacity: 1;
    transform: translateY(-4px);
}

/* Imagen grande */
.galeria10-item-principal {
    height: 310px;
    width: 100%;
}

/* Responsive */
@media (max-width: 1024px) {
    .galeria10-grid {
        grid-template-columns: 1fr;
    }

    .galeria10-secundarias {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 140px;
    }

    .galeria10-item-principal {
        height: 280px;
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .galeria10-grid {
        grid-template-columns: 1fr;
    }

    .galeria10-secundarias {
        grid-template-columns: 1fr;
        grid-auto-rows: 180px;
    }

    .galeria10-item-principal {
        height: auto;
        aspect-ratio: 3/4;
        margin-bottom: 15px;
    }
}



/* === Botón principal: estilos globales === */
/* === Contenedor del botón === */
/* === Botón principal: estilos globales === */

/* === Contenedor del botón === */
.boton1-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}

/* === Botón principal === */
.boton1 {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);

    /* ⬅️ APLICAMOS LA VARIABLE DINÁMICA */
    border-radius: var(--border_radius_boton);

    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1rem;
    max-width: 90%;
}

/* Hover */
.boton1:hover {
    filter: brightness(1.1);
}

/* === Responsive === */
@media (max-width: 768px) {
    .boton1-wrapper {
        min-height: 120px;
    }

    .boton1 {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    .boton1-wrapper {
        min-height: 100px;
    }

    .boton1 {
        font-size: 0.85rem;
        padding: 8px 16px;
    }
}

/* === Botón 2: estilos globales === */
/* === Contenedor del botón === */
.boton2-wrapper {
    display: flex;
    justify-content: center;
    /* centra horizontalmente */
    align-items: center;
    /* centra verticalmente */
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
    /* ajustable para que no se vea pegado en móviles */
}

/* === Botón 2 === */
.boton2 {
    display: inline-block;
    padding: 12px 24px;
    background-color: transparent;
    color: var(--color_texto_boton_principal);
    border: 2px solid var(--color_fondo_boton_principal);
    /* ⬅️ APLICAMOS LA VARIABLE DINÁMICA */
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1rem;
    max-width: 90%;
    /* adaptable */
}

/* Hover/efecto al pasar el mouse */
.boton2:hover {
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
}

/* === Responsive: ajusta tamaño en tablets y móviles === */
@media (max-width: 768px) {
    .boton2-wrapper {
        min-height: 120px;
    }

    .boton2 {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    .boton2-wrapper {
        min-height: 100px;
    }

    .boton2 {
        font-size: 0.85rem;
        padding: 8px 16px;
    }
}


/* === Botón 3: estilos globales === */
/* === Contenedor del botón === */
.boton3-wrapper {
    display: flex;
    justify-content: center;
    /* centra horizontalmente */
    align-items: center;
    /* centra verticalmente */
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
    /* ajustable */
}

/* === Botón 3 === */
.boton3 {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2));
    color: var(--color_texto_boton_principal);
    /* ⬅️ APLICAMOS LA VARIABLE DINÁMICA */
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1rem;
    max-width: 90%;
}

/* Hover/efecto al pasar el mouse */
.boton3:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* === Responsive: ajusta tamaño en tablets y móviles === */
@media (max-width: 768px) {
    .boton3-wrapper {
        min-height: 120px;
    }

    .boton3 {
        font-size: 0.9rem;
        padding: 10px 22px;
    }
}

@media (max-width: 480px) {
    .boton3-wrapper {
        min-height: 100px;
    }

    .boton3 {
        font-size: 0.85rem;
        padding: 8px 18px;
    }
}

/* === Botón 4: estilos globales === */
/* === Contenedor del botón === */
.boton4-wrapper {
    display: flex;
    justify-content: center;
    /* centra horizontalmente */
    align-items: center;
    /* centra verticalmente */
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
    /* ajustable */
}

/* === Botón 4 === */
/* === Botón 4 versión corregida === */
.boton4 {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2)) no-repeat;
    background-size: 200% 100%;
    /* para animar */
    color: var(--color_texto_boton_principal);
    border: 2px solid var(--color_fondo_boton_principal);
    /* ⬅️ APLICAMOS LA VARIABLE DINÁMICA */
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: all 0.4s ease;
    cursor: pointer;
    font-size: 1rem;
    max-width: 90%;
}

/* Hover: animación de gradiente */
.boton4:hover {
    background-position: 100% 0;
    color: var(--color_texto_boton_principal);
}

/* === Contenedor === */
.boton4-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}

/* === Responsive === */
@media (max-width: 768px) {
    .boton4-wrapper {
        min-height: 120px;
    }

    .boton4 {
        font-size: 0.9rem;
        padding: 10px 22px;
    }
}

@media (max-width: 480px) {
    .boton4-wrapper {
        min-height: 100px;
    }

    .boton4 {
        font-size: 0.85rem;
        padding: 8px 18px;
    }
}

/* === Botón 5: efecto neón === */
.boton5-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}

.boton5 {
    display: inline-block;
    padding: 12px 28px;
    background-color: transparent;
    color: var(--color_texto_boton_principal);
    border: 2px solid var(--color_texto_boton_principal);
    /* ⬅️ APLICAMOS LA VARIABLE DINÁMICA */
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px var(--color_texto_boton_principal), 0 0 10px var(--color_texto_boton_principal);
    text-shadow: 0 0 5px var(--color_texto_boton_principal), 0 0 10px var(--color_texto_boton_principal);
    max-width: 90%;
    cursor: pointer;
}

/* Hover: efecto de brillo neón */
.boton5:hover {
    box-shadow: 0 0 10px var(--color-gradiente-1), 0 0 20px var(--color-gradiente-2), 0 0 30px var(--color-gradiente-3);
    color: var(--color_texto_boton_principal);
    transform: scale(1.05);
}

/* === Responsive === */
@media (max-width: 768px) {
    .boton5-wrapper {
        min-height: 120px;
    }

    .boton5 {
        font-size: 0.9rem;
        padding: 10px 22px;
    }
}

@media (max-width: 480px) {
    .boton5-wrapper {
        min-height: 100px;
    }

    .boton5 {
        font-size: 0.85rem;
        padding: 8px 18px;
    }
}

/* === Botón 6: wrapper === */
.boton6-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}

/* === Botón 6 (Shine Effect) === */
.boton6 {
    position: relative;
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    border-radius: var(--border_radius_boton);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Brillo diagonal transparente */
.boton6::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -50%;
    width: 50%;
    height: 250%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: rotate(25deg);
    transition: all 0.4s ease;
    pointer-events: none;
}

/* Movimiento del brillo */
.boton6:hover::before {
    left: 120%;
}

/* Pequeño aumento de brillo en hover */
.boton6:hover {
    filter: brightness(1.1);
}

/* === Responsive: tablets === */
@media (max-width: 768px) {
    .boton6-wrapper {
        min-height: 120px;
    }

    .boton6 {
        font-size: 0.9rem;
        padding: 12px 26px;
    }
}

/* === Responsive: móviles pequeños === */
@media (max-width: 480px) {
    .boton6-wrapper {
        min-height: 100px;
    }

    .boton6 {
        font-size: 0.85rem;
        padding: 10px 20px;
    }
}




/* === Botón 7: wrapper (con glass) === */
.boton7-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);

    min-height: 150px;

    /* 🔹 Glass */
    background: rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    padding: 20px;
}


/* === Botón 7 (glass button) === */
/* === Botón 7: wrapper glass visible === */
.boton7-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);

    min-height: 150px;

    /* Glass suave del wrapper */
    background: rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22);

    padding: 26px;
}


/* === Botón 7 — Glass real usando tus variables === */
.boton7 {
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    padding: 14px 34px;

    /* Glass del botón */
    background: color-mix(in srgb, var(--color_fondo_boton_principal) 25%, transparent);
    color: var(--color_texto_boton_principal);

    border-radius: var(--border_radius_boton);
    text-decoration: none;

    border: 2px solid color-mix(in srgb, var(--color_fondo_boton_principal) 60%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    /* Brillo visible */
    box-shadow:
        0 5px 18px color-mix(in srgb, var(--color_fondo_boton_principal) 45%, transparent),
        inset 0 0 12px rgba(255, 255, 255, 0.25);

    transition: 0.25s ease;
}

/* Hover muy visible */
.boton7:hover {

    box-shadow:
        0 0 28px color-mix(in srgb, var(--color_fondo_boton_principal) 80%, transparent),
        inset 0 0 16px rgba(255, 255, 255, 0.35);

    transform: translateY(-3px);
}


/* === Responsive Botón 7 === */
@media (max-width: 768px) {
    .boton7 {
        font-size: 1rem;
        padding: 12px 28px;
    }

    .boton7-wrapper {
        min-height: 120px;
        border-radius: 18px;
    }
}

@media (max-width: 480px) {
    .boton7 {
        font-size: 0.95rem;
        padding: 11px 24px;
    }

    .boton7-wrapper {
        min-height: 110px;
        padding: 18px;
        border-radius: 15px;
    }
}


/* === Botón 8: wrapper === */
.boton8-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);

    min-height: 150px;
}


/* =====================================================
✨ BOTÓN 8: NEÓN + DOBLE GLOW + ANIMACIÓN
===================================================== */
.boton8 {
    position: relative;
    display: inline-block;
    padding: 14px 36px;

    /* 👉 Usa tus variables globales */
    color: var(--color_texto_boton_principal);
    background: var(--color_fondo_boton_principal);

    border-radius: var(--border_radius_boton);
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
    cursor: pointer;

    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;

    /* Glow suave interno */
    box-shadow:
        inset 0 0 10px color-mix(in srgb, var(--color_fondo_boton_principal) 50%, transparent),
        0 0 12px color-mix(in srgb, var(--color_fondo_boton_principal) 50%, transparent);
}

/* === Border neón animado === */
.boton8::before {
    content: "";
    position: absolute;
    inset: -4px;

    /* 👉 Uso del gradiente global */
    background: var(--color-gradiente-global);

    z-index: -1;
    border-radius: inherit;

    filter: blur(8px);
    opacity: 0.65;

    animation: glowMove 4s linear infinite;
}

/* === Capa interna para mantener el fondo estable === */
.boton8::after {
    content: "";
    position: absolute;
    inset: 2px;

    background: var(--color_fondo_boton_principal);
    border-radius: inherit;
    z-index: -1;
}

/* === Hover explosivo === */
.boton8:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        inset 0 0 20px color-mix(in srgb, var(--color_fondo_boton_principal) 70%, transparent),
        0 0 18px color-mix(in srgb, var(--color_fondo_boton_principal) 90%, transparent),
        0 0 28px var(--color_fondo_boton_principal);
}

/* === Animación de movimiento del glow === */
@keyframes glowMove {
    0% {
        filter: blur(8px) brightness(1);
    }

    50% {
        filter: blur(12px) brightness(1.4);
    }

    100% {
        filter: blur(8px) brightness(1);
    }
}

/* =====================================================
📱 Responsive
===================================================== */
@media (max-width: 768px) {
    .boton8 {
        font-size: 1rem;
        padding: 12px 30px;
    }

    .boton8-wrapper {
        min-height: 120px;
    }
}

@media (max-width: 480px) {
    .boton8 {
        font-size: 0.9rem;
        padding: 11px 26px;
    }

    .boton8-wrapper {
        min-height: 110px;
    }
}

/* === Botón 9: wrapper === */
.boton9-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);

    min-height: 150px;
}

/* === Botón 9 === */
.boton9 {
    display: inline-block;
    padding: 18px 38px;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;

    color: var(--color_texto_boton_principal);
    text-decoration: none;
    letter-spacing: 0.5px;

    background: rgba(255, 255, 255, 0.15);
    /* glass */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.35);

    /* glass blur */
    backdrop-filter: blur(10px);

    /* doble sombra para efecto 3D */
    box-shadow:
        6px 6px 18px rgba(0, 0, 0, 0.35),
        -4px -4px 16px rgba(255, 255, 255, 0.22),
        inset 0 0 0 rgba(255, 255, 255, 0);
    /* para hover */

    transition:
        transform 0.25s ease,
        box-shadow 0.35s ease,
        background 0.3s ease;
}

/* === Hover === */
.boton9:hover {
    transform: translateY(-6px) scale(1.04);
    /* movimiento 3D */

    background: rgba(255, 255, 255, 0.25);

    /* glow exterior + luz interior */
    box-shadow:
        10px 10px 24px rgba(0, 0, 0, 0.45),
        -6px -6px 20px rgba(255, 255, 255, 0.35),
        0 0 22px rgba(0, 200, 255, 0.55);
    /* efecto glow cool */
}

/* === Active (click) === */
.boton9:active {
    transform: translateY(1px) scale(0.98);

    box-shadow:
        4px 4px 10px rgba(0, 0, 0, 0.45),
        -3px -3px 8px rgba(255, 255, 255, 0.2),
        inset 0 0 14px rgba(255, 255, 255, 0.4);
    /* luz interior al presionar */
}

/* === Botón 10: wrapper === */
.boton10-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);

    min-height: 150px;
}

/* === Botón 10: Liquid Neon Glass Pulse === */
/* === Botón 10: wrapper === */
.boton10-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);

    min-height: 150px;
}

/* === Botón 10: Liquid Neon Glass Pulse === */
.boton10 {
    position: relative;
    display: inline-block;
    padding: 18px 42px;

    font-size: 1.4rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;

    /* Color del texto desde variable */
    color: var(--color_texto_boton_principal);

    text-decoration: none;
    letter-spacing: 0.6px;

    /* Glass principal */
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--border_radius_boton);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);

    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease;
}

/* === Borde líquido usando TUS 4 gradientes === */
.boton10::before {
    content: "";
    position: absolute;
    inset: -3px;

    /* Reemplazo tu gradiente original por tus variables */
    background: linear-gradient(120deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4),
            var(--color-gradiente-1));

    background-size: 400%;
    border-radius: calc(var(--border_radius_boton) + 4px);
    z-index: -1;
    filter: blur(8px);
    animation: liquidBorder 6s ease infinite;
}

/* Capa interna glass */
.boton10::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--border_radius_boton);
    z-index: -1;
}

/* Hover */
.boton10:hover {
    transform: scale(1.05) translateY(-4px);
}

/* Pulsación suave */
@keyframes liquidBorder {
    0% {
        background-position: 0% 50%;
        filter: blur(6px);
    }

    50% {
        background-position: 100% 50%;
        filter: blur(10px);
    }

    100% {
        background-position: 0% 50%;
        filter: blur(6px);
    }
}

/* Click */
.boton10:active {
    transform: scale(0.97);
}

/* === Botón 11 wrapper === */
.boton11-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);

    min-height: 150px;
}


/* === BOTÓN 11: Holographic Glass RGB Shift === */
.boton11 {
    position: relative;
    display: inline-block;
    padding: 18px 46px;

    font-size: 1.35rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;

    /* Texto desde variables */
    color: var(--color_texto_boton_principal);

    text-decoration: none;
    letter-spacing: 0.7px;

    /* Glass */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px);
    border-radius: var(--border_radius_boton);
    border: 2px solid rgba(255, 255, 255, 0.25);

    overflow: hidden;
    z-index: 1;
    transition: 0.25s ease;
}

/* === Capa holográfica animada === */
.boton11::before {
    content: "";
    position: absolute;
    inset: -2px;

    /* Tus gradientes 1–4 */
    background: linear-gradient(130deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4),
            var(--color-gradiente-1));

    background-size: 300%;
    z-index: -2;
    border-radius: calc(var(--border_radius_boton) + 4px);
    animation: holograma11 6s linear infinite;
    opacity: 0.9;
    filter: blur(12px);
}

/* === Capa interna glass suave === */
.boton11::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--border_radius_boton);
    z-index: -1;
}

/* Hover: brillo y elevación */
.boton11:hover {
    transform: scale(1.06) translateY(-4px);
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.35);
}

/* Animación holográfica */
@keyframes holograma11 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Click */
.boton11:active {
    transform: scale(0.96);
}

/* === Botón 12 Wrapper === */
.boton12-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);

    min-height: 150px;
}

/* === Botón 12: GEL LÍQUIDO === */
.boton12 {
    position: relative;
    display: inline-block;

    padding: 18px 44px;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;

    /* Color texto desde variables */
    color: var(--color_texto_boton_principal);
    text-decoration: none;

    /* Gel + glass */
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    border: 2px solid rgba(255, 255, 255, 0.30);
    border-radius: var(--border_radius_boton);

    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Efecto interno de gel: brillo desplazado */
.boton12::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.20), transparent 50%);
    z-index: -1;
}

/* — Burbujas — */
.boton12 .burbujas {
    position: absolute;
    bottom: -20px;
    width: 12px;
    height: 12px;
    background: var(--color_fondo_boton_principal);
    opacity: 0.35;
    border-radius: 50%;
    animation: bubbleUp 4s infinite ease-in-out;
}

/* Burbujas con posiciones aleatorias */
.boton12 .burbujas:nth-child(1) {
    left: 20%;
    animation-duration: 4s;
    animation-delay: 0.2s;
}

.boton12 .burbujas:nth-child(2) {
    left: 45%;
    animation-duration: 4.8s;
    animation-delay: 0.7s;
}

.boton12 .burbujas:nth-child(3) {
    left: 65%;
    animation-duration: 3.6s;
    animation-delay: 0.4s;
}

.boton12 .burbujas:nth-child(4) {
    left: 30%;
    animation-duration: 5.2s;
    animation-delay: 1.1s;
}

.boton12 .burbujas:nth-child(5) {
    left: 80%;
    animation-duration: 4.4s;
    animation-delay: 0.9s;
}

/* Animación ascendente */
@keyframes bubbleUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.35;
    }

    50% {
        transform: translateY(-40px) scale(1.4);
        opacity: 0.55;
    }

    100% {
        transform: translateY(-80px) scale(0.8);
        opacity: 0;
    }
}

/* Hover - botón gel reacciona */
.boton12:hover {
    transform: scale(1.06) translateY(-3px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.30);
}

/* Click */
.boton12:active {
    transform: scale(0.94);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .boton12 {
        font-size: 1.1rem;
        padding: 14px 36px;
    }
}

@media (max-width: 480px) {
    .boton12 {
        font-size: 1rem;
        padding: 12px 30px;
    }
}


/* ============================
   🪩 BOTÓN 13 — ESPEJO CROMADO 3D
============================ */



.boton13-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);

    min-height: 150px;
}

.boton13 {
    display: inline-block;
    padding: var(--padding_boton_principal, 16px 40px);
    font-size: var(--font_boton_principal, 1.1rem);
    font-weight: 600;
    border-radius: var(--border_radius_boton, 12px);
    text-decoration: none;
    color: var(--color_texto_boton_principal);
    text-transform: uppercase;
    letter-spacing: 1px;

    /* 🎨 Fondo cromado dinámico */
    background: linear-gradient(135deg,
            #ffffff 0%,
            #d4d4d4 20%,
            #7b7b7b 40%,
            #3a3a3a 50%,
            #7b7b7b 60%,
            #d4d4d4 80%,
            #ffffff 100%);

    background-size: 200% 200%;
    animation: brilloEspejo 3s linear infinite;

    /* ✨ Efecto 3D real */
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* 🎞️ Animación de brillo */
@keyframes brilloEspejo {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* 🌟 Hover efecto flotante */
.boton13:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.35),
        inset 0 3px 6px rgba(255, 255, 255, 0.5),
        inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}

/* 🔘 Efecto presionado */
.boton13:active {
    transform: translateY(1px) scale(0.97);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 3px rgba(255, 255, 255, 0.3),
        inset 0 -1px 3px rgba(0, 0, 0, 0.25);
}


/* ============================
   🔹 BOTÓN 14 — MINIMAL PRO MEJORADO
============================ */

/* ============================
   🔹 BOTÓN 14 — MINIMAL PRO VISIBLE
============================ */

/* === Wrapper === */
.boton14-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 140px;
}

/* === Botón === */
.boton14 {
    display: inline-block;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    text-decoration: none;
    color: var(--color_texto_boton_principal);
    background-color: var(--color_fondo_boton_principal);
    border-radius: var(--border_radius_boton);
    border: 2px solid var(--color_fondo_boton_principal);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* === Hover: glow y cambio de borde === */
.boton14:hover {
    color: var(--color-texto-boton);
    border-color: var(--color-gradiente-1);
    box-shadow: 0 0 12px var(--color-gradiente-1),
        0 0 24px var(--color-gradiente-2),
        0 0 36px var(--color-gradiente-3);
    transform: translateY(-2px);
}

/* === Span para asegurar que el texto siempre esté arriba === */
.boton14 span {
    position: relative;
    z-index: 1;
}

/* === Responsive tablets === */
@media (max-width: 768px) {
    .boton14-wrapper {
        min-height: 120px;
    }

    .boton14 {
        font-size: 0.95rem;
        padding: 10px 26px;
    }
}

/* === Responsive móviles === */
@media (max-width: 480px) {
    .boton14-wrapper {
        min-height: 100px;
    }

    .boton14 {
        font-size: 0.9rem;
        padding: 8px 20px;
    }
}



/* ============================
   🔹 BOTÓN 15 — LIQUID SOFT GLOW
============================ */

/* === Wrapper === */
.boton15-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 140px;
}

/* === Botón === */
.boton15 {
    position: relative;
    display: inline-block;
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    text-decoration: none;
    color: var(--color_texto_boton_principal);
    background-color: var(--color_fondo_boton_principal);
    border-radius: var(--border_radius_boton);
    border: 2px solid var(--color_fondo_boton_principal);
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* === Capa líquida animada detrás del botón === */
.boton15::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    filter: blur(20px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    border-radius: var(--border_radius_boton);
    animation: moveGradient 6s linear infinite;
}

/* === Hover: mostrar el glow y cambiar color del texto === */
.boton15:hover::before {
    opacity: 1;
}

.boton15:hover {
    color: var(--color-texto-boton);
    transform: translateY(-2px);
    border-color: var(--color-gradiente-3);
}

/* Mantener el texto siempre encima */
.boton15 span {
    position: relative;
    z-index: 1;
}

/* === Animación del gradiente líquido === */
@keyframes moveGradient {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }

    50% {
        transform: rotate(180deg) translate(10px, 10px);
    }

    100% {
        transform: rotate(360deg) translate(0, 0);
    }
}

/* === Responsive tablets === */
@media (max-width: 768px) {
    .boton15-wrapper {
        min-height: 120px;
    }

    .boton15 {
        font-size: 0.95rem;
        padding: 12px 28px;
    }
}

/* === Responsive móviles === */
@media (max-width: 480px) {
    .boton15-wrapper {
        min-height: 100px;
    }

    .boton15 {
        font-size: 0.9rem;
        padding: 10px 22px;
    }
}


/* === Botón 16: wrapper === */
.boton16-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 140px;
}

/* === Botón 16: Neon Outline Pulse === */
.boton16 {
    position: relative;
    display: inline-block;
    padding: 14px 36px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: var(--color_texto_boton_principal);
    background-color: transparent;
    border-radius: var(--border_radius_boton);
    border: 2px solid var(--color-gradiente-1);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.boton16::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border_radius_boton);
    border: 2px solid var(--color-gradiente-2);
    box-shadow: 0 0 10px var(--color-gradiente-1), 0 0 20px var(--color-gradiente-2);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.boton16:hover::before {
    opacity: 1;
    transform: scale(1.1);
}

.boton16 span {
    position: relative;
    z-index: 1;
}

/* === Responsive tablets === */
@media (max-width: 768px) {
    .boton16-wrapper {
        min-height: 120px;
    }

    .boton16 {
        font-size: 1rem;
        padding: 12px 28px;
    }
}

/* === Responsive móviles === */
@media (max-width: 480px) {
    .boton16-wrapper {
        min-height: 100px;
    }

    .boton16 {
        font-size: 0.95rem;
        padding: 10px 22px;
    }
}

/* === Botón 17: wrapper === */
.boton17-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}

/* === Botón 17: Metallic 3D Glitch === */
.boton17 {
    position: relative;
    display: inline-block;
    padding: 14px 38px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    color: var(--color_texto_boton_principal);
    background: linear-gradient(145deg, var(--color-gradiente-1), var(--color-gradiente-2));
    border-radius: var(--border_radius_boton);
    border: 1px solid var(--color-gradiente-3);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

/* Reflejo metálico */
.boton17::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 70%);
    transform: rotate(25deg);
    pointer-events: none;
}

/* Efecto glitch al hover */
.boton17:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3), 0 0 15px var(--color-gradiente-4);
}

.boton17:hover::before {
    animation: metallicGlitch 1s infinite;
}

.boton17 span {
    position: relative;
    z-index: 1;
}

/* Animación de reflejo glitch */
@keyframes metallicGlitch {
    0% {
        transform: translateX(0) rotate(25deg);
        opacity: 0.15;
    }

    25% {
        transform: translateX(2px) rotate(25deg);
        opacity: 0.2;
    }

    50% {
        transform: translateX(-2px) rotate(25deg);
        opacity: 0.15;
    }

    75% {
        transform: translateX(1px) rotate(25deg);
        opacity: 0.18;
    }

    100% {
        transform: translateX(0) rotate(25deg);
        opacity: 0.15;
    }
}

/* === Responsive tablets === */
@media (max-width: 768px) {
    .boton17-wrapper {
        min-height: 120px;
    }

    .boton17 {
        font-size: 1rem;
        padding: 12px 30px;
    }
}

/* === Responsive móviles === */
@media (max-width: 480px) {
    .boton17-wrapper {
        min-height: 100px;
    }

    .boton17 {
        font-size: 0.95rem;
        padding: 10px 24px;
    }
}

/* === Botón 18: wrapper === */
.boton18-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}

/* === Botón 18: Liquid Hover Glow === */
.boton18 {
    position: relative;
    display: inline-block;
    padding: 14px 38px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: var(--color_texto_boton_principal);
    background-color: var(--color_fondo_boton_principal);
    border-radius: var(--border_radius_boton);
    border: 2px solid var(--color-gradiente-1);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease;
}

/* Capa de resplandor líquido */
.boton18::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3), var(--color-gradiente-4));
    filter: blur(20px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

/* Hover: resplandor líquido */
.boton18:hover::before {
    opacity: 1;
    animation: liquidGlow 3s linear infinite;
}

/* Texto siempre visible */
.boton18 span {
    position: relative;
    z-index: 1;
}

/* Animación del resplandor */
@keyframes liquidGlow {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Hover: elevación */
.boton18:hover {
    transform: translateY(-2px);
}

/* === Responsive tablets === */
@media (max-width: 768px) {
    .boton18-wrapper {
        min-height: 120px;
    }

    .boton18 {
        font-size: 1rem;
        padding: 12px 30px;
    }
}

/* === Responsive móviles === */
@media (max-width: 480px) {
    .boton18-wrapper {
        min-height: 100px;
    }

    .boton18 {
        font-size: 0.95rem;
        padding: 10px 24px;
    }
}


/* === Botón 19: wrapper === */
.boton19-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}

/* === Botón 19: 3D Neon Shadow === */
.boton19 {
    position: relative;
    display: inline-block;
    padding: 14px 40px;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    color: var(--color_texto_boton_principal);
    background-color: var(--color_fondo_boton_principal);
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid var(--color-gradiente-1);
}

/* Neon Shadow */
.boton19::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border_radius_boton);
    background: linear-gradient(45deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3), var(--color-gradiente-4));
    opacity: 0.3;
    filter: blur(15px);
    z-index: -1;
    transition: all 0.3s ease;
}

/* Texto siempre encima */
.boton19 span {
    position: relative;
    z-index: 1;
}

/* Hover: neon glow y elevación */
.boton19:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 0 20px var(--color-gradiente-1),
        0 0 40px var(--color-gradiente-2),
        0 0 60px var(--color-gradiente-3),
        0 0 80px var(--color-gradiente-4);
}

/* === Responsive tablets === */
@media (max-width: 768px) {
    .boton19-wrapper {
        min-height: 120px;
    }

    .boton19 {
        font-size: 1.1rem;
        padding: 12px 32px;
    }
}

/* === Responsive móviles === */
@media (max-width: 480px) {
    .boton19-wrapper {
        min-height: 100px;
    }

    .boton19 {
        font-size: 1rem;
        padding: 10px 24px;
    }
}

/* === Botón 20: wrapper === */
.boton20-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}

/* === Botón 20: Liquid Glass + Neon Pulse === */
.boton20 {
    position: relative;
    display: inline-block;
    padding: 16px 42px;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    color: var(--color_texto_boton_principal);
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--border_radius_boton);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Neon Pulse Layer */
.boton20::before {
    content: "";
    position: absolute;
    inset: -4px;
    background: linear-gradient(120deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    background-size: 400%;
    border-radius: calc(var(--border_radius_boton) + 4px);
    filter: blur(12px);
    z-index: -2;
    animation: neonPulse 5s linear infinite;
}

/* Glass Overlay */
.boton20::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border_radius_boton);
    z-index: -1;
}

/* Texto siempre encima */
.boton20 span {
    position: relative;
    z-index: 1;
}

/* Hover: escala + brillo */
.boton20:hover {
    transform: scale(1.05) translateY(-3px);
}

/* Animación neon pulse */
@keyframes neonPulse {
    0% {
        background-position: 0% 50%;
        filter: blur(10px);
    }

    50% {
        background-position: 100% 50%;
        filter: blur(16px);
    }

    100% {
        background-position: 0% 50%;
        filter: blur(10px);
    }
}

/* === Responsive tablets === */
@media (max-width: 768px) {
    .boton20-wrapper {
        min-height: 120px;
    }

    .boton20 {
        font-size: 1.1rem;
        padding: 14px 34px;
    }
}

/* === Responsive móviles === */
@media (max-width: 480px) {
    .boton20-wrapper {
        min-height: 100px;
    }

    .boton20 {
        font-size: 1rem;
        padding: 12px 28px;
    }
}

/* Botón21 */
.boton21-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}

.boton21 {
    position: relative;
    display: inline-block;
    padding: 14px 36px;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: var(--color_texto_boton_principal);
    background-color: var(--color_fondo_boton_principal);
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    overflow: hidden;
    border: 2px solid transparent;
    transition: color 0.3s ease;
}

/* Hover effect: gradient slide */
.boton21::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: var(--color-gradiente-global);
    transition: all 0.5s ease;
    z-index: 0;
}

.boton21:hover::before {
    left: 0;
}

.boton21 span {
    position: relative;
    z-index: 1;
}

/* Hover: text color */
.boton21:hover {
    color: var(--color-texto-boton);
}

/* Responsive */
@media (max-width: 768px) {
    .boton21-wrapper {
        min-height: 120px;
    }

    .boton21 {
        font-size: 1rem;
        padding: 12px 28px;
    }
}

@media (max-width: 480px) {
    .boton21-wrapper {
        min-height: 100px;
    }

    .boton21 {
        font-size: 0.95rem;
        padding: 10px 24px;
    }
}


/* boton22 */
.boton22-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}


/* Botón */
.boton22 {
    position: relative;
    display: inline-block;
    padding: 12px 34px;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    color: var(--color_texto_boton_principal);
    background: transparent;
    border: 2px solid var(--color_fondo_boton_principal);
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Neon glow on hover */
.boton22:hover {
    color: var(--color-gradiente-1);
    box-shadow: 0 0 20px var(--color-gradiente-2), 0 0 40px var(--color-gradiente-3);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .boton22-wrapper {
        min-height: 120px;
    }

    .boton22 {
        font-size: 1rem;
        padding: 10px 28px;
    }
}

@media (max-width: 480px) {
    .boton22-wrapper {
        min-height: 100px;
    }

    .boton22 {
        font-size: 0.95rem;
        padding: 8px 24px;
    }
}



/* Wrapper 23 */
.boton23-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 150px;
}


/* Botón */
.boton23 {
    position: relative;
    display: inline-block;
    padding: 14px 36px;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: var(--color_texto_boton_principal);
    background-color: var(--color_fondo_boton_principal);
    border-radius: var(--border_radius_boton);
    border: none;
    overflow: hidden;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Shadow gradient sliding */
.boton23::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: var(--color-gradiente-global);
    filter: blur(20px);
    transition: all 0.5s ease;
    z-index: -1;
    transform: rotate(45deg);
    opacity: 0;
}

.boton23:hover::before {
    opacity: 1;
}

/* Text always on top */
.boton23 span {
    position: relative;
    z-index: 1;
}

/* Hover text color */
.boton23:hover {
    color: var(--color-texto-boton);
}

/* Responsive */
@media (max-width: 768px) {
    .boton23-wrapper {
        min-height: 120px;
    }

    .boton23 {
        font-size: 1rem;
        padding: 12px 30px;
    }
}

@media (max-width: 480px) {
    .boton23-wrapper {
        min-height: 100px;
    }

    .boton23 {
        font-size: 0.95rem;
        padding: 10px 26px;
    }
}





/* Wrapper */
.boton24-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 140px;
    margin: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
    padding: 16px;
    border-radius: var(--border_radius_boton);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Botón */
.boton24 {
    position: relative;
    display: inline-block;
    padding: 14px 36px;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: var(--color_texto_boton_principal);
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

/* Hover: pulse + glow */
.boton24:hover {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), 0 0 40px rgba(255, 0, 255, 0.3);
    transform: translateY(-2px);
}

/* Text always on top */
.boton24 span {
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .boton24-wrapper {
        min-height: 120px;
    }

    .boton24 {
        font-size: 1rem;
        padding: 12px 28px;
    }
}

@media (max-width: 480px) {
    .boton24-wrapper {
        min-height: 100px;
    }

    .boton24 {
        font-size: 0.95rem;
        padding: 10px 24px;
    }
}



/* Wrapper */
.boton25-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 140px;
    margin: var(--margen_superior) var(--margen_derecho) var(--margen_inferior) var(--margen_izquierdo);
}

/* Botón */
.boton25 {
    position: relative;
    display: inline-block;
    padding: 14px 36px;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    color: var(--color_texto_boton_principal);
    background: var(--color_fondo_boton_principal);
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* Liquid gradient animation */
.boton25::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: var(--color-gradiente-global);
    filter: blur(18px);
    opacity: 0;
    z-index: -1;
    transform: rotate(45deg);
    transition: opacity 0.4s ease;
}

.boton25:hover::before {
    opacity: 1;
}

/* Text always on top */
.boton25 span {
    position: relative;
    z-index: 1;
}

/* Hover text + scale */
.boton25:hover {
    color: var(--color-texto-boton);
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    .boton25-wrapper {
        min-height: 120px;
    }

    .boton25 {
        font-size: 1rem;
        padding: 12px 28px;
    }
}

@media (max-width: 480px) {
    .boton25-wrapper {
        min-height: 100px;
    }

    .boton25 {
        font-size: 0.95rem;
        padding: 10px 24px;
    }
}


/* ============================
   🔹 BOTONES 26 - 35 — CONSERVADORES
============================ */

/* === Wrapper común === */
.boton26-wrapper,
.boton27-wrapper,
.boton28-wrapper,
.boton29-wrapper,
.boton30-wrapper,
.boton31-wrapper,
.boton32-wrapper,
.boton33-wrapper,
.boton34-wrapper,
.boton35-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
    min-height: 140px;
}

/* === Botón base común === */
.boton26,
.boton27,
.boton28,
.boton29,
.boton30,
.boton31,
.boton32,
.boton33,
.boton34,
.boton35 {
    display: inline-block;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    text-decoration: none;
    border-radius: var(--border_radius_boton);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    max-width: 90%;
}

/* === Botón 26 — Fondo sólido simple === */
.boton26 {
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    border: 2px solid var(--color_fondo_boton_principal);
}

.boton26:hover {
    filter: brightness(1.1);
}

/* === Botón 27 — Fondo transparente con borde === */
.boton27 {
    background-color: transparent;
    color: var(--color_texto_boton_principal);
    border: 2px solid var(--color_fondo_boton_principal);
}

.boton27:hover {
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
}

/* === Botón 28 — Sombreado suave === */
.boton28 {
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    border: 1px solid transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.boton28:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* === Botón 29 — Borde redondeado con hover oscuro === */
.boton29 {
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    border: 2px solid var(--color_fondo_boton_principal);
    border-radius: calc(var(--border_radius_boton) + 4px);
}

.boton29:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* === Botón 30 — Fondo degradado suave usando variables de gradiente === */
.boton30 {
    background: var(--color-gradiente-global);
    color: var(--color_texto_boton_principal);
    border: 2px solid transparent;
}

.boton30:hover {
    filter: brightness(1.1);
}

/* === Botón 31 — Solo texto con subrayado al hover === */
.boton31 {
    background: transparent;
    color: var(--color_texto_boton_principal);
    border: none;
    text-decoration: none;
}

.boton31:hover {
    text-decoration: underline;
}

/* === Botón 32 — Minimal con sombra interna === */
.boton32 {
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    border: 1px solid var(--color_fondo_boton_principal);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.boton32:hover {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* === Botón 33 — Fondo semitransparente === */
.boton33 {
    background-color: rgba(204, 204, 204, 0.6);
    /* usando var(--color_fondo_boton_principal) parcialmente */
    color: var(--color_texto_boton_principal);
    border: 1px solid var(--color_fondo_boton_principal);
}

.boton33:hover {
    background-color: var(--color_fondo_boton_principal);
}

/* === Botón 34 — Sutil gradiente vertical === */
.boton34 {
    background: linear-gradient(to bottom, var(--color_fondo_boton_principal), #e0e0e0);
    color: var(--color_texto_boton_principal);
    border: 1px solid var(--color_fondo_boton_principal);
}

.boton34:hover {
    filter: brightness(1.05);
}

/* === Botón 35 — Minimal clásico con transición suave de color === */
.boton35 {
    background-color: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    border: 1px solid var(--color_fondo_boton_principal);
}

.boton35:hover {
    background-color: #d1d1d1;
    /* un tono ligeramente distinto */
}

/* === Responsive tablets === */
@media (max-width: 768px) {

    .boton26-wrapper,
    .boton27-wrapper,
    .boton28-wrapper,
    .boton29-wrapper,
    .boton30-wrapper,
    .boton31-wrapper,
    .boton32-wrapper,
    .boton33-wrapper,
    .boton34-wrapper,
    .boton35-wrapper {
        min-height: 120px;
    }

    .boton26,
    .boton27,
    .boton28,
    .boton29,
    .boton30,
    .boton31,
    .boton32,
    .boton33,
    .boton34,
    .boton35 {
        font-size: 0.95rem;
        padding: 10px 26px;
    }
}

/* === Responsive móviles === */
@media (max-width: 480px) {

    .boton26-wrapper,
    .boton27-wrapper,
    .boton28-wrapper,
    .boton29-wrapper,
    .boton30-wrapper,
    .boton31-wrapper,
    .boton32-wrapper,
    .boton33-wrapper,
    .boton34-wrapper,
    .boton35-wrapper {
        min-height: 100px;
    }

    .boton26,
    .boton27,
    .boton28,
    .boton29,
    .boton30,
    .boton31,
    .boton32,
    .boton33,
    .boton34,
    .boton35 {
        font-size: 0.9rem;
        padding: 8px 20px;
    }
}

/* ==========================================================
   CTA BANNER 36 & 37 — VERSIÓN PROFESIONAL ESPACIOSA
   ========================================================== */
.boton36-wrapper,
.boton37-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    /* más respiración entre título y botón */

    padding: 60px 80px;
    /* MUCHO MÁS ESPACIO lateral y vertical */

    background: var(--color-de-fondo-solido);
    border-radius: calc(var(--border_radius_boton) + 10px);

    margin-top: var(--margen_superior);
    margin-bottom: var(--margen_inferior);
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);

    min-height: 260px;
    /* más alto, más tipo banner */

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}

/* ==========================================================
      BANNER 36 — HERO PREMIUM CON TITULAR + BOTÓN
   ========================================================== */

.banner36-wrapper {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 32px;

    padding: var(--margen_superior) var(--margen_izquierdo) var(--margen_inferior) var(--margen_derecho);

    background: var(--color-de-fondo-solido);

    /* sensación de hero */
    border-radius: var(--border_radius_boton);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

    font-family: "Inter", sans-serif;
}

/* =======================
   TÍTULO HERO 36
======================= */

.banner36-titulo {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);


    max-width: 60%;
    letter-spacing: -0.5px;

    /* más aire y mejor lectura */
    padding-right: 10px;
}


/* =======================
   BOTÓN PRINCIPAL 36
======================= */

.banner36-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 20px 52px;
    min-width: 260px;

    font-size: 1.22rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;

    border-radius: var(--border_radius_boton);
    cursor: pointer;

    color: var(--color_texto_boton_principal);

    background: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));

    border: none;

    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.16);

    transition: all 0.35s ease;
}

/* Hover elegante */
.banner36-boton:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
    filter: brightness(1.15);
}


/* ==========================================================
                    RESPONSIVE
   ========================================================== */

@media (max-width: 950px) {

    .banner36-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 22px;

        padding: 60px 30px;
    }

    .banner36-titulo {
        max-width: 100%;
    }
}

@media (max-width: 480px) {

    .banner36-wrapper {
        padding: 40px 22px;
    }

    .banner36-boton {
        width: 100%;
        padding: 15px 20px;
        font-size: 1.05rem;
    }
}


/* ==========================================================
      BANNER 37 — HERO PREMIUM (TÍTULO DERECHA + BOTÓN IZQUIERDA)
   ========================================================== */

.banner37-wrapper {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;

    padding: var(--margen_superior) var(--margen_izquierdo) var(--margen_inferior) var(--margen_derecho);

    background: var(--color-de-fondo-solido);

    border-radius: var(--border_radius_boton);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

    font-family: "Inter", sans-serif;
}


/* =======================
   TÍTULO HERO 37
======================= */

.banner37-titulo {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    color: var(--color_texto_titulo_general);

    max-width: 60%;
    letter-spacing: -0.5px;

    text-align: right;
    /* 🔥 principal diferencia */
}


/* =======================
   BOTÓN PRINCIPAL 37
======================= */

.banner37-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 20px 50px;
    min-width: 260px;

    font-size: 1.22rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;

    border-radius: var(--border_radius_boton);
    cursor: pointer;

    color: var(--color_texto_boton_principal);

    background: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));

    border: none;
    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.16);

    transition: all 0.35s ease;
}

/* Hover premium */
.banner37-boton:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
    filter: brightness(1.15);
}


/* ==========================================================
                ORDEN VISUAL PARA PANTALLA GRANDE
   ========================================================== */
.banner37-wrapper {
    flex-direction: row-reverse;
    /* 🔥 Botón IZQUIERDA / Título DERECHA */
}


/* ==========================================================
                    RESPONSIVE
   ========================================================== */

@media (max-width: 950px) {

    .banner37-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 22px;

        padding: 60px 30px;
    }

    .banner37-titulo {
        max-width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {

    .banner37-wrapper {
        padding: 40px 22px;
    }

    .banner37-boton {
        width: 100%;
        padding: 15px 20px;
        font-size: 1.05rem;
    }
}

/* ==========================================================
                    Acordeones 1
   ========================================================== */
.acordeon1-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 20px;

    background: var(--color-de-fondo-solido, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.acordeon1-titulo-general {
    text-align: center;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.acordeon1-item {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.acordeon1-btn {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--color-gradiente-1);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1rem;
    justify-content: space-between;
    transition: background 0.3s;
}

.acordeon1-btn:hover {
    background: var(--color-gradiente-2);
}

.acordeon1-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.acordeon1-btn-titulo {
    flex: 1;
    font-weight: 600;
    color: var(--color_texto_titulo_1, #555);
}

.acordeon1-btn-icon {
    margin-left: 10px;
    transition: transform 0.3s;
}

.acordeon1-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 15px;
    background: var(--color-gradiente-1, #666);
}

.acordeon1-content p {
    margin: 10px 0;
    color: var(--color_texto_parrafo_general, #666);
}


/* ==========================================================
                    Acordeones 2
   ========================================================== */
.acordeon2-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 20px;

    background: var(--color-de-fondo-solido, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.acordeon2-titulo-general {
    text-align: center;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.acordeon2-item {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.acordeon2-btn {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--color-gradiente-1);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1rem;
    justify-content: space-between;
    transition: background 0.3s;
}

.acordeon2-btn:hover {
    background: var(--color-gradiente-2);
}

.acordeon2-icon {
    font-size: 30px;
    margin-right: 10px;
    color: var(--color-texto-titulo-1, #555);
}

.acordeon2-btn-titulo {
    flex: 1;
    font-weight: 600;
    color: var(--color-texto-titulo-1, #555);
}

.acordeon2-btn-icon {
    margin-left: 10px;
    transition: transform 0.3s;
}

.acordeon2-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 15px;
    background: var(--color-gradiente-1, #f9f9f9);
}

.acordeon2-content p {
    margin: 10px 0;
    color: var(--color_texto_parrafo_general, #666);
}


/* ==========================================================
                    Acordeones 3
   ========================================================== */
.acordeon3-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background: var(--color-de-fondo-solido, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.acordeon3-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.acordeon3-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    background: var(--color-gradiente-1);
    border: none;
    cursor: pointer;
    justify-content: space-between;
    transition: background 0.3s;
}

.acordeon3-btn:hover {
    background: var(--color-gradiente-2);
}

.acordeon3-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.acordeon3-btn-titulo {
    flex: 1;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.acordeon3-btn-icon {
    transition: transform 0.3s;
}

.acordeon3-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 15px;
    background: var(--color-gradiente-1, #f9f9f9);
}

.acordeon3-line {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gradiente-3);
}

.acordeon3-line-title {
    font-weight: 600;
    color: var(--color-texto-titulo-1, #555);
    margin-bottom: 5px;
}

.acordeon3-line-paragraph {
    color: var(--color_texto_parrafo_general, #666);
    margin: 0;
}

/* Responsive */
@media (min-width: 600px) {
    .acordeon3-line {
        flex-direction: row;
        justify-content: space-between;
    }

    .acordeon3-line-title {
        flex: 1;
        margin-right: 20px;
    }

    .acordeon3-line-paragraph {
        flex: 2;
    }
}


/* ==========================================================
                    Acordeones 4
   ========================================================== */
.acordeon4-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background: var(--color-de-fondo-solido, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.acordeon4-item {
    border: 1px solid var(--color-gradiente-3);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.acordeon4-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    background: var(--color-gradiente-1);
    border: none;
    cursor: pointer;
    justify-content: space-between;
    transition: background 0.3s;
}

.acordeon4-btn:hover {
    background: var(--color-gradiente-2);
}

.acordeon4-btn-titulo {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.acordeon4-btn-icon {
    transition: transform 0.3s;
}

.acordeon4-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 15px;
    background: var(--color-gradiente-1, #f9f9f9);
}

.acordeon4-line {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gradiente-3);
}

.acordeon4-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 10px;
}

.acordeon4-text {
    display: flex;
    flex-direction: column;
}

.acordeon4-line-title {
    font-weight: 600;
    color: var(--color-texto-titulo-1, #555);
    margin-bottom: 5px;
}

.acordeon4-line-paragraph {
    color: var(--color_texto_parrafo_general, #666);
    margin: 0;
}

/* Responsive */
@media (min-width: 600px) {
    .acordeon4-line {
        flex-direction: row;
        justify-content: flex-start;
    }

    .acordeon4-text {
        flex: 1;
    }
}

/*acodeon5*/
.acordeon5-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background: var(--color-de-fondo-solido, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.acordeon5-titulo-general {
    text-align: center;

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.acordeon5-item {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-gradiente-3);
}

.acordeon5-btn {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--color-gradiente-1);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1rem;
    justify-content: space-between;
    transition: background 0.3s;
}

.acordeon5-btn:hover {
    background: var(--color-gradiente-2);
}

.acordeon5-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.acordeon5-btn-titulo {
    flex: 1;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title)
}

.acordeon5-btn-icon {
    margin-left: 10px;
    transition: transform 0.3s;
}

.acordeon5-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 15px;
    background: var(--color-gradiente-1, #666);
}

.acordeon5-content-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.acordeon5-content-text {
    margin: 0;
    color: var(--color_texto_parrafo_general, #666);
    flex: 1;
}

.acordeon5-content-btn {
    display: inline-block;
    margin-left: 15px;
    padding: 6px 12px;
    border-radius: var(--border_radius_boton, 4px);
    background: var(--color-gradiente-4, #333);
    color: var(--color-contraste, #fff);
    text-decoration: none;
    transition: background 0.3s;
}

.acordeon5-content-btn:hover {
    background: var(--color-gradiente-2, #555);
}




/* ============================
   ACORDEÓN 6 — LAYOUT EN FILA
   ============================ */

.acordeon6-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background: var(--color-de-fondo-solido, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.acordeon6-titulo-general {
    text-align: center;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title)
}

/* ==== Ítem en fila ==== */
.acordeon6-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 10px;
    background: var(--color-gradiente-2);
    border-radius: 10px;
    margin-bottom: 14px;
    transition: 0.2s ease;
}

.acordeon6-item:hover {
    background: var(--color-gradiente-3);
}

/* imagen pequeña ajustada tipo lista */
.acordeon6-img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Título centrado */
.acordeon6-item-titulo {
    flex: 1;
    font-size: 2rem;
    color: var(--color-texto-titulo-1);

}

/* Botón a la derecha */
.acordeon6-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--border_radius_boton, 6px);
    background: var(--color-gradiente-1);
    color: var(--color_texto_boton_principal, #fff);
    cursor: pointer;
    font-size: 1rem;
    white-space: nowrap;
    transition: background 0.3s;
}

.acordeon6-btn:hover {
    background: var(--color-gradiente-2);
}

/* ======================
   MODAL
   ====================== */
.acordeon6-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.acordeon6-modal-content {
    position: relative;
    background: #000;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
    padding: 10px;
}

.acordeon6-iframe {
    width: 100%;
    height: 450px;
    border-radius: 8px;
}

.acordeon6-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}


/* ==========================
   ACORDEÓN 7 PROFESIONAL
   ========================== */

.acordeon7-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 20px;
}

.acordeon7-titulo-general {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 25px;
}

/* ==== ITEM ==== */
.acordeon7-item {
    background: var(--color-gradiente-1);
    border-radius: 10px;
    margin-bottom: 14px;
    padding: 12px 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    color: var(--color_texto_titulo_general);
}

.acordeon7-item:hover {
    background: var(--color-gradiente-2);

}

/* HEADER (título + imagen) */
.acordeon7-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.acordeon7-titulo-general {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    flex: 1;
}

/* imagen miniatura */
.acordeon7-thumb {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
    margin-left: 10px;
    cursor: pointer;
    transition: transform .2s;
}

.acordeon7-thumb:hover {
    transform: scale(1.05);
}

/* CONTENIDO DEL ACORDEÓN */
.acordeon7-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease, opacity .3s ease;
    padding-left: 5px;
    color: var(--color_texto_parrafo_general);
}

.acordeon7-content.open {
    max-height: 300px;
    opacity: 1;
    margin-top: 10px;
}


/* =======================
   MODAL
   ======================= */
.acordeon7-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.acordeon7-modal-content {
    background: var(--color-de-fondo-solido);
    padding: 25px;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    text-align: center;
    position: relative;
}

.acordeon7-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 28px;
    cursor: pointer;
}

#acordeon7-modal-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

#acordeon7-modal-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--color-texto-titulo-1);
}

#acordeon7-modal-desc {
    font-size: 1rem;
    color: var(--color_texto_parrafo_general)
}



/* ============================================
   Acordeón 8 — FAQ con flecha animada
   ============================================ */

.acordeon8-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    border-radius: 12px;
    background: var(--color-de-fondo-solido, #fff);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.acordeon8-titulo-general {
    text-align: center;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* Ítem */
.acordeon8-item {
    border-bottom: 1px solid var(--color-gradiente-2);
    padding: 10px 0;
}

/* Botón pregunta */
.acordeon8-btn {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 10px;
    color: var(--color-texto-titulo-1, #444);
    transition: color .3s;
}

.acordeon8-btn:hover {
    color: var(--color-gradiente-1);
}

/* Flecha */
.acordeon8-flecha {
    font-size: 1.2rem;
    transition: transform .3s;
}

.acordeon8-flecha.rotada {
    transform: rotate(180deg);
}

/* Contenido */
.acordeon8-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    padding: 0 10px;
}

.acordeon8-content p {
    margin: 10px 0 15px 0;
    color: var(--color_texto_parrafo_general, #555);
    line-height: 1.5;
}




/* ======= Acordeones 9 – Timeline Vertical Pro ======= */

/* ======= Acordeones 9 – Timeline Vertical PRO ======= */

/* Wrapper angosto, limpio, centrado y elegante */
.acordeon9-wrapper {
    width: 100%;
    max-width: 750px;
    /* 👈 el ancho exacto del timeline */
    margin: 40px auto;
    /* 👈 lo centra perfectamente */
    padding: 20px 25px;
    background: var(--color-de-fondo-solido);
    font-family: "Inter", sans-serif;

    /* Opcional para look premium */
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}


.acordeon9-titulo-general {
    text-align: center;
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));

    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    background: var(--color-gradiente-global);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Línea principal del timeline */
.acordeon9-items {
    position: relative;
    padding-left: 30px;
}

.acordeon9-items::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    border-radius: 20px;
    opacity: 0.85;
}

/* ITEM */
.acordeon9-item {
    margin-bottom: 40px;
    position: relative;
}

/* Icono circular */
.acordeon9-icono {
    width: 18px;
    height: 18px;
    background: var(--color-gradiente-2);
    border-radius: 50%;
    position: absolute;
    left: -2px;
    top: 10px;
    box-shadow: 0 0 12px var(--color-gradiente-2);
    border: 2px solid var(--color-de-fondo-solido);
}

/* Botón */
.acordeon9-btn {
    width: 100%;
    background: var(--color-de-fondo-solido);
    border: 1px solid var(--color-contraste);
    border-radius: 10px;
    padding: 15px 18px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-texto-titulo-1);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.acordeon9-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Flecha */
.acordeon9-flecha {
    font-size: 1.2rem;
    color: var(--color-texto-titulo-1);
    transition: transform .3s ease;
}

.acordeon9-flecha.rotada {
    transform: rotate(180deg);
}

/* Contenido */
.acordeon9-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .40s ease;
    padding: 0 12px;
    border-left: 3px solid var(--color-gradiente-2);
    margin-top: 10px;
    border-radius: 5px;
}

.acordeon9-content p {
    margin: 15px 0 10px 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color_texto_parrafo_general);
}

/* ======================================
   ACORDEONES 10 — Estilo profesional
====================================== */

.acordeon10-wrapper {
    width: 100%;
    padding: 40px 20px;
    font-family: "Inter", sans-serif;
    background-color: var(--color-de-fondo-solido);
}

.acordeon10-titulo-general {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));

    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 30px;
    text-align: center;
    color: var(--color_texto_titulo_general);
}

.acordeon10-items {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.acordeon10-item {
    border-bottom: 1px solid var(--color-gradiente-1);
    padding: 15px 0;
}

.acordeon10-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 14px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-texto-titulo-1);
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    transition: color 0.3s ease;
}

.acordeon10-btn:hover {
    color: var(--color-contraste);
}

.acordeon10-flecha {
    transition: transform 0.3s ease;
    font-size: 18px;
}

.acordeon10-flecha.rotada {
    transform: rotate(180deg);
}

.acordeon10-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding-left: 5px;
    color: var(--color_texto_titulo_general);
}

.acordeon10-subtitulo {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--color-texto-titulo-1);
}

/* Contenedor flex para imagen + video */
.acordeon10-media-flex {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

/* Imagen y video con proporción 16:9 */
.acordeon10-img-box,
.acordeon10-video {
    flex: 1 1 48%;
    max-width: 48%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background-color: #f9f9f9;
    aspect-ratio: 16 / 9;
}

.acordeon10-img-box img,
.acordeon10-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Párrafo centrado */
.acordeon10-parrafo {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
    margin: 15px auto;
    text-align: center;
    max-width: 90%;
}

/* Botón estilo */
.acordeon10-btn-link {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 18px;
    background: var(--color-texto-titulo-1);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.acordeon10-btn-link:hover {
    background: var(--color-gradiente-2);
}

/* ===========================
   RESPONSIVE
=========================== */

/* Tablets */
@media (max-width: 1024px) {
    .acordeon10-media-flex {
        gap: 12px;
    }

    .acordeon10-img-box,
    .acordeon10-video {
        aspect-ratio: 16 / 9;
    }
}

/* Móviles: apilar verticalmente imagen -> video -> texto */
@media (max-width: 768px) {
    .acordeon10-media-flex {
        flex-direction: column;
        gap: 12px;
    }

    .acordeon10-img-box,
    .acordeon10-video {
        flex: 1 1 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* Smartphones muy pequeños */
@media (max-width: 480px) {
    .acordeon10-titulo-general {
        font-size: 26px;
    }

    .acordeon10-btn {
        font-size: 18px;
    }

    .acordeon10-subtitulo {
        font-size: 18px;
    }

    .acordeon10-parrafo {
        font-size: 15px;
    }

    .acordeon10-btn-link {
        padding: 10px 16px;
        font-size: 15px;
    }

    .acordeon10-img-box,
    .acordeon10-video {
        aspect-ratio: 16 / 9;
    }
}







/*acordeon 11*/



.acordeon11-wrapper {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Inter", sans-serif;
    background-color: var(--color-de-fondo-solido);
    border-radius: 12px;
}

.acordeon11-titulo-general {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));

    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 30px;
    text-align: center;
    color: var(--color_texto_titulo_general);
}

.acordeon11-items {}

.acordeon11-item {
    border-bottom: 1px solid var(--color-gradiente-1);
    padding: 12px 0;
}

.acordeon11-btn {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-texto-titulo-1);
    cursor: pointer;
    padding: 10px 0;
    transition: color 0.3s ease;
}

.acordeon11-btn:hover {
    color: var(--color-contraste);
}

.acordeon11-flecha {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.acordeon11-flecha.rotada {
    transform: rotate(180deg);
}

.acordeon11-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding-left: 5px;
}

.acordeon11-parrafo {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

/* Responsive */
@media (max-width: 768px) {
    .acordeon11-titulo-general {
        font-size: 26px;
    }

    .acordeon11-btn {
        font-size: 16px;
    }

    .acordeon11-parrafo {
        font-size: 15px;
    }
}

/*acrdeon 12*/
.acordeon12-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Inter", sans-serif;
    background-color: var(--color-de-fondo-solido);
    border-radius: var(--border_radius_boton);
}

.acordeon12-titulo-general {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));

    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 30px;
    text-align: center;
    color: var(--color_texto_titulo_general);
}



.acordeon12-item {
    display: flex;
    border-bottom: 1px solid var(--color-gradiente-1);
    padding: 15px 0;
    align-items: flex-start;
}

.acordeon12-col {
    flex: 1;
    padding: 0 10px;
}

.titulo-col {
    flex: 0 0 30%;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-texto-titulo-1);
    transition: color 0.3s ease;
}

.titulo-col:hover {
    color: var(--color-contraste);
}

.contenido-col {
    flex: 0 0 70%;
}

.acordeon12-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.acordeon12-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

/* Responsive: columnas a bloque en móviles */
@media (max-width: 768px) {
    .acordeon12-item {
        flex-direction: column;
    }

    .titulo-col,
    .contenido-col {
        flex: 1 1 100%;
        padding: 5px 0;
    }

    .acordeon12-titulo-general {
        font-size: 26px;
    }

    .acordeon12-content p {
        font-size: 15px;
    }
}

/*acordeon 13*/
.acordeon13-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Inter", sans-serif;
    background-color: var(--color-de-fondo-solido);
    border-radius: var(--border_radius_boton);
}

.acordeon13-titulo-general {

    font-size: clamp(1.4rem, 3vw, var(--font_size_title));

    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 30px;
    text-align: center;
    color: var(--color_texto_titulo_general);
}

.acordeon13-item {
    border-bottom: 1px solid var(--color-gradiente-1);
    padding: 12px 0;
    text-align: var(--text_align);
}

.acordeon13-step {
    display: flex;
    align-items: center;
    gap: 12px;
}

.acordeon13-icon {
    font-size: 2.58rem;
    color: var(--color-contraste);
    flex-shrink: 0;
}

.acordeon13-btn {
    background: none;
    border: none;
    font-size: 1.8rem;

    cursor: pointer;
    color: var(--color-subtitulo-1);
    transition: color 0.3s ease;
    text-align: left;
    flex: 1;
}

.acordeon13-btn:hover {
    color: var(--color-contraste);
}

.acordeon13-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding-left: 36px;
    /* espacio para icono */
    margin-top: 6px;

}

.acordeon13-content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
}

/* Responsive */
@media (max-width: 768px) {
    .acordeon13-titulo-general {
        font-size: 26px;
    }

    .acordeon13-btn {
        font-size: 16px;
    }

    .acordeon13-content p {
        font-size: 15px;
        padding-left: 0;
    }

    .acordeon13-step {
        flex-direction: row;
        gap: 10px;
    }
}

/* Wrapper general */
.acordeon14-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Inter", sans-serif;

}

/* Título */
.acordeon14-titulo-general {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));

    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 30px;
    text-align: center;
    color: var(--color_texto_titulo_general);
}

/* Grid */
.acordeon14-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Card base */
.acordeon14-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        border 0.3s ease,
        opacity 0.3s ease;
}

/* Hover estándar */
.acordeon14-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

/* 🔵 CARD ACTIVO */
.acordeon14-card.activo {
    background: var(--color-gradiente-2);
    border: 2px solid var(--color-contraste);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
    opacity: 1;
}

/* Los demás bajan opacidad */
.acordeon14-card.no-activo {
    opacity: 0.6;
    transform: scale(0.98);
}

/* Botón */
.acordeon14-card-btn {
    width: 100%;
    padding: 20px;
    background: var(--color-gradiente-1);
    border: none;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s ease;
    color: var(--color-texto-titulo-1);
}

.acordeon14-card-btn:hover {
    color: var(--color-contraste);
}

/* Flecha */
.acordeon14-flecha {
    transition: transform 0.3s ease;
}

.acordeon14-flecha.rotada {
    transform: rotate(180deg);
}

/* Contenido */
.acordeon14-card-content {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.4s ease,
        padding 0.4s ease;
    padding: 0 20px;
}

/* Media */
.acordeon14-media {
    width: 100%;
    margin: 15px 0;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 12px;
}

.acordeon14-media img,
.acordeon14-media iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Texto */
.acordeon14-card-content p {
    margin: 12px 0 20px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general);
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .acordeon14-titulo-general {
        font-size: 26px;
    }

    .acordeon14-card-btn {
        font-size: 16px;
    }

    .acordeon14-card-content p {
        font-size: 15px;
    }
}

/*acordeon15*/
/* ============================
   ACORDEÓN 15 — Categorías por color
============================ */

.acordeon15-wrapper {
    width: 100%;
    max-width: 850px;
    margin: 40px auto;
    font-family: "Inter", sans-serif;

}

.acordeon15-titulo-general {
    font-size: clamp(1.4rem, 3vw, var(--font_size_title));

    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 30px;
    text-align: center;
    color: var(--color_texto_titulo_general);
}

.acordeon15-items {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Tarjeta */
.acordeon15-item {
    background: var(--color-de-fondo-solido, #4B7BF5);
    border-radius: 14px;
    overflow: hidden;
    color: var(--color_texto_titulo_general);
    transition: transform .3s ease;
}

.acordeon15-item:hover {
    transform: translateY(-3px);
}

/* Header */
.acordeon15-header {
    width: 100%;
    padding: 18px 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color_texto_titulo_general);
    font-size: 1.1rem;
    font-weight: 600;
}



.acordeon15-flecha.rotada {
    transform: rotate(180deg);
}

/* Contenido */
.acordeon15-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 22px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    transition: max-height .35s ease, padding .35s ease;
}

.acordeon15-content p {
    margin: 18px 0 20px;
    line-height: 1.5;
    color: var(--color_texto_parrafo_general);
    font-size: .95rem;
}

/* Abierto */
.acordeon15-item.activo .acordeon15-content {
    padding: 18px 22px 22px;
}

/* Responsive */
@media (max-width: 600px) {
    .acordeon15-header {
        font-size: 1rem;
    }
}


/* ===========================
🎨 FRANJA 1 - estructura visual
=========================== */

.franja1-wrapper {
    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);
}

.franja1-contenido {
    width: 100%;
    background-image: linear-gradient(45deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3), var(--color-gradiente-4));
    height: var(--altura_del_espacio);
}


/* ===========================
🎨 FRANJA 2 (Pattern con variables globales)
=========================== */

.franja2-wrapper {

    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);



}

.franja2-contenido {
    width: 100%;
    height: var(--altura_del_espacio);
    /* ⭐ Fondo base */
    background-color: var(--color-de-fondo-solido);

    /* ⭐ Trama usando tus colores */
    background-image:
        linear-gradient(45deg, var(--color-gradiente-1) 12.5%, transparent 12.5%),
        linear-gradient(-45deg, var(--color-gradiente-2) 12.5%, transparent 12.5%),
        linear-gradient(45deg, transparent 87.5%, var(--color-gradiente-3) 87.5%),
        linear-gradient(-45deg, transparent 87.5%, var(--color-gradiente-4) 87.5%);
    background-size: 40px 40px;
    background-blend-mode: overlay;

    /* Suaviza la textura */
}

/* ===========================
🎨 FRANJA 3 (Pattern con variables globales)
=========================== */

.franja3-wrapper {


    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);
}

.franja3-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background-color: var(--color-de-fondo-solido);

    background-image:
        repeating-linear-gradient(45deg,
            var(--color-gradiente-1),
            var(--color-gradiente-1) 3px,
            transparent 3px,
            transparent 12px),
        repeating-linear-gradient(135deg,
            var(--color-gradiente-2),
            var(--color-gradiente-2) 3px,
            transparent 3px,
            transparent 12px),
        repeating-linear-gradient(225deg,
            var(--color-gradiente-3),
            var(--color-gradiente-3) 3px,
            transparent 3px,
            transparent 12px),
        repeating-linear-gradient(315deg,
            var(--color-gradiente-4),
            var(--color-gradiente-4) 3px,
            transparent 3px,
            transparent 12px);

}


/* ===========================
🎨 FRANJA 4 (Pattern con variables globales)
=========================== */

.franja4-wrapper {
    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);


}

.franja4-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background-color: var(--color-de-fondo-solido);

    background-image:
        radial-gradient(var(--color-gradiente-1, transparent) 1.5px, transparent 2px),
        radial-gradient(var(--color-gradiente-2, transparent) 1.5px, transparent 2px),
        radial-gradient(var(--color-gradiente-3, transparent) 1.5px, transparent 2px),
        radial-gradient(var(--color-gradiente-4, transparent) 1.5px, transparent 2px);

    background-size:
        18px 18px,
        18px 18px,
        18px 18px,
        18px 18px;

    background-position:
        0 0,
        9px 9px,
        0 9px,
        9px 0;


}

/* ===========================
🎨 FRANJA 5 (Pattern con variables globales)
=========================== */

.franja5-wrapper {

    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);


}

.franja5-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
}



/* ===========================
🎨 FRANJA 6 (Pattern con variables globales)
=========================== */



.franja6-wrapper {
    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);



}

.franja6-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background: var(--color-de-fondo-solido);

    border-top-width: 4px;
    border-top-style: solid;

    /* Usa los 4 gradientes siempre */
    border-image: linear-gradient(90deg,
            var(--color-gradiente-1, transparent),
            var(--color-gradiente-1, transparent),
            var(--color-gradiente-1, transparent),
            var(--color-gradiente-1, transparent)) 1;
}


/* ===========================
🎨 FRANJA 7 (Pattern con variables globales)
=========================== */

.franja7-wrapper {
    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);



}

.franja7-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background: var(--color-de-fondo-solido);


    /* Usa los 4 gradientes como sombras */
    box-shadow:
        0px 25px 35px -10px var(--color-gradiente-1),
        0px 25px 35px -10px var(--color-gradiente-2),
        0px 25px 35px -10px var(--color-gradiente-3),
        0px 25px 35px -10px var(--color-gradiente-4);
}


/* ===========================
🎨 FRANJA 8 (Pattern con variables globales)
=========================== */
.franja8-wrapper {
    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);

}

.franja8-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background-color: var(--color-de-fondo-solido);


    /* Usa los 4 gradientes en líneas horizontales y verticales */
    background-image:
        linear-gradient(var(--color-gradiente-1) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-gradiente-1) 1px, transparent 1px),

        linear-gradient(var(--color-gradiente-2) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-gradiente-2) 1px, transparent 1px),

        linear-gradient(var(--color-gradiente-3) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-gradiente-3) 1px, transparent 1px),

        linear-gradient(var(--color-gradiente-4) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-gradiente-4) 1px, transparent 1px);

    background-size: 30px 30px;
}


/* ===========================
🎨 FRANJA 9 (Pattern con variables globales)
=========================== */

.franja9-wrapper {

    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);




}

.franja9-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background-color: var(--color-de-fondo-solido);
    background-image:
        linear-gradient(0deg, var(--color-gradiente-1) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-gradiente-2) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-gradiente-3) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-gradiente-4) 1px, transparent 1px);
    background-size: 2px 2px;
}

/* ===========================
🎨 FRANJA 10 (Pattern con variables globales)
=========================== */


.franja10-wrapper {

    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);




}

.franja10-contenido {
    width: 100%;
    height: var(--altura_del_espacio);
    background: var(--color-gradiente-global);
}

/* ===========================
🎨 FRANJA 11 – Degradado diagonal suave
=========================== */
.franja11-wrapper {

    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);


}

.franja11-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background: linear-gradient(-80deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3), var(--color-gradiente-4));
}



/* ===========================
🎨 FRANJA 12 – Líneas horizontales (pattern striped)
=========================== */
.franja12-wrapper {

    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);



}

.franja12-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background:
        linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-1)) 0% 0% / 25% 100% no-repeat,
        linear-gradient(90deg, var(--color-gradiente-2), var(--color-gradiente-2)) 25% 0% / 25% 100% no-repeat,
        linear-gradient(90deg, var(--color-gradiente-3), var(--color-gradiente-3)) 50% 0% / 25% 100% no-repeat,
        linear-gradient(90deg, var(--color-gradiente-4), var(--color-gradiente-4)) 75% 0% / 25% 100% no-repeat;
}



/* ===========================
🎨 FRANJA 13 – Efecto “Glassmorphism”
=========================== */
.franja13-wrapper {

    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);




}

.franja13-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background: rgba(255, 255, 255, 0.32);
    /* Más sólido para que destaque */
    backdrop-filter: blur(45px) saturate(200%) contrast(120%);
    -webkit-backdrop-filter: blur(45px) saturate(200%) contrast(120%);


    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
    border-top: 4px solid transparent;

    ;
    border-image: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4)) 1;


    /* Marca fuerte del borde */
}



/* ===========================
🎨 FRANJA 14 – Ondas SVG (wave)
=========================== */
.franja14-wrapper {

    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);



}

.franja14-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    /* Fondo con tus 4 gradientes */
    background: linear-gradient(90deg,
            var(--color-gradiente-1, #ff004c),
            var(--color-gradiente-2, #ff9f1c),
            var(--color-gradiente-3, #2ec4b6),
            var(--color-gradiente-4, #1b00ff));

    /* ONDA muy marcada y profunda */
    clip-path: polygon(0 0,
            100% 0,
            100% 65%,
            85% 80%,
            70% 100%,
            50% 85%,
            30% 100%,
            15% 80%,
            0 65%);
}



/* ===========================
🎨 FRANJA 15 – Noise (Textura granulada)
=========================== */
.franja15-wrapper {

    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px)
}

.franja15-contenido {
    width: 100%;
    height: var(--altura_del_espacio);
    background: var(--color-de-fondo-solido);
    position: relative;
}

.franja15-contenido::after {
    content: "";
    position: absolute;
    inset: 0;

    background:

        /* 1 — Rayas 45° fuertes usando 4 colores */
        repeating-linear-gradient(45deg,
            var(--color-gradiente-1, #ff004c) 0px,
            var(--color-gradiente-1, #ff004c) 1px,
            var(--color-gradiente-2, #ff9f1c) 1px,
            var(--color-gradiente-2, #ff9f1c) 1px,
            var(--color-gradiente-3, #2ec4b6) 1px,
            var(--color-gradiente-3, #2ec4b6) 1px,
            var(--color-gradiente-4, #1b00ff) 1px,
            var(--color-gradiente-4, #1b00ff) 1px,
            transparent 4px,
            transparent 10px),

        /* 2 — Rayas -45° suaves (también con tus colores) */
        repeating-linear-gradient(-45deg,
            var(--color-gradiente-1, #ff004c) 0px,
            var(--color-gradiente-1, #ff004c) 1px,
            transparent 1px,
            transparent 4px),

        /* 3 — Rayas horizontales finas */
        repeating-linear-gradient(0deg,
            var(--color-gradiente-2, #ff9f1c) 0px,
            var(--color-gradiente-2, #ff9f1c) 1px,
            transparent 1px,
            transparent 6px),

        /* 4 — Rayas verticales finas */
        repeating-linear-gradient(90deg,
            var(--color-gradiente-3, #2ec4b6) 0px,
            var(--color-gradiente-3, #2ec4b6) 1px,
            transparent 1px,
            transparent 6px);

    opacity: 0.55;
    mix-blend-mode: overlay;
    /* Se integra mejor con el fondo */
    pointer-events: none;
}


/* ===========================
🎨 FRANJA 16 – Zig-Zag Pattern
=========================== */
.franja16-wrapper {


    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px)
}

.franja16-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background:
        repeating-linear-gradient(135deg,

            /* Color 1 */
            var(--color-gradiente-1, #ff004c) 0 10px,
            /* Color 2 */
            var(--color-gradiente-2, #ff9f1c) 10px 20px,
            /* Color 3 */
            var(--color-gradiente-3, #2ec4b6) 20px 30px,
            /* Color 4 */
            var(--color-gradiente-4, #1b00ff) 30px 40px,

            /* Espacio transparente de separación del patrón */
            transparent 20px 60px);

    border-bottom: 0.5px solid rgba(255, 255, 255, 0.45);
    border-top: 0.5px solid transparent;

    ;
    border-image: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4)) 1;
}



/* ===========================
🎨 FRANJA 17 – Triángulos (pattern geométrico)
=========================== */
.franja17-wrapper,
.franja18-wrapper,
.franja19-wrapper,
.franja20-wrapper,
.franja21-wrapper,
.franja22-wrapper,
.franja23-wrapper,
.franja24-wrapper,
.franja25-wrapper,
.franja26-wrapper,
.franja27-wrapper,
.franja28-wrapper,
.franja29-wrapper,
.franja30-wrapper,
.franja31-wrapper,
.franja32-wrapper,
.franja33-wrapper,
.franja34-wrapper,
.franja35-wrapper,
.franja36-wrapper,
.franja37-wrapper,
.franja38-wrapper,
.franja39-wrapper,
.franja40-wrapper,
.franja41-wrapper,
.franja42-wrapper,
.franja43-wrapper,
.franja44-wrapper,
.franja45-wrapper,
.franja46-wrapper,
.franja47-wrapper,
.franja48-wrapper,
.franja49-wrapper,
.franja50-wrapper,
.franja51-wrapper,
.franja52-wrapper,
.franja53-wrapper,
.franja54-wrapper,
.franja55-wrapper,
.franja56-wrapper,
.franja57-wrapper,
.franja58-wrapper,
.franja59-wrapper,
.franja60-wrapper,
.franja61-wrapper,
.franja62-wrapper,
.franja63-wrapper,
.franja64-wrapper,
.franja65-wrapper,
.franja66-wrapper,
.franja67-wrapper,
.franja68-wrapper,
.franja69-wrapper,
.franja70-wrapper,
.franja71-wrapper,
.franja72-wrapper,
.franja73-wrapper,
.franja74-wrapper,
.franja75-wrapper,
.franja76-wrapper,
.franja77-wrapper,
.franja78-wrapper,
.franja79-wrapper,
.franja80-wrapper,
.franja81-wrapper,
.franja82-wrapper,
.franja83-wrapper,
.franja84-wrapper,
.franja85-wrapper,
.franja86-wrapper,
.franja87-wrapper,
.franja88-wrapper,
.franja89-wrapper,
.franja90-wrapper,
.franja91-wrapper,
.franja92-wrapper,
.franja93-wrapper,
.franja94-wrapper,
.franja95-wrapper,
.franja96-wrapper,
.franja97-wrapper,
.franja98-wrapper,
.franja99-wrapper,
.franja100-wrapper {
    padding-left: var(--margen_izquierdo, 0px);
    padding-right: var(--margen_derecho, 0px);
    padding-top: var(--margen_superior, 0px);
    padding-bottom: var(--margen_inferior, 0px);
}

.franja17-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background-image:
        linear-gradient(45deg,
            var(--color-gradiente-1) 0 25%,
            var(--color-gradiente-2) 25% 50%,
            var(--color-gradiente-3) 50% 75%,
            var(--color-gradiente-4) 75% 100%);

    background-size: 40px 40px;
}



/* ===========================
🎨 FRANJA 18 – Degradado radial doble
=========================== */


.franja18-contenido {
    width: 100%;
    height: var(--altura_del_espacio);

    background:
        /* Color 1 en la izquierda */
        radial-gradient(circle at 20% 50%,
            var(--color-gradiente-1) 0%,
            transparent 70%),

        /* Color 2 arriba */
        radial-gradient(circle at 50% 0%,
            var(--color-gradiente-2) 0%,
            transparent 70%),

        /* Color 3 en la derecha */
        radial-gradient(circle at 80% 50%,
            var(--color-gradiente-3) 0%,
            transparent 70%),

        /* Color 4 abajo */
        radial-gradient(circle at 50% 100%,
            var(--color-gradiente-4) 0%,
            transparent 70%);
}



/* ===========================
🎨 FRANJA 19 – Líneas diagonales animadas
=========================== */

.franja19-contenido {
    width: 100%;
    height: var(--altura_del_espacio);
    overflow: hidden;
    position: relative;

    /* Fondo con 4 gradientes + movimiento suave */
    background:
        linear-gradient(120deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));

    background-size: 400% 400%;
    animation: fondoMovimiento 18s ease-in-out infinite;
}

/* Movimiento muy suave del fondo */
@keyframes fondoMovimiento {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Contenedor del texto */
.franja19-marquee {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Centrado vertical */
    white-space: nowrap;

    font-size: 2rem;
    font-weight: 600;

    color: var(--color_texto_parrafo_general);

    /* Sombra leve para lectura estilo TV */
    text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.45);

    animation: franja19Scroll 22s linear infinite;
}

/* Texto tipo TV desplazándose */
@keyframes franja19Scroll {
    from {
        transform: translate(100%, -50%);
    }

    to {
        transform: translate(-100%, -50%);
    }
}

/* ===========================
🎨 FRANJA 20 – Corte diagonal estilo banner
=========================== */
/* ===========================
🎨 FRANJA 20 – Texto en movimiento en banner diagonal
=========================== */
/* Contenedor general */
.franja22-wrapper {
    width: 100%;
    height: var(--altura_del_espacio);
    position: relative;
    overflow: hidden;
    background: var(--color-de-fondo-solido);
}

/* Onda con gradiente REAL */
.franja22-ondas svg {
    width: 100%;
    height: auto;
    display: block;
}


/* ===============================
   FRANJA 21 - Onda superior
=================================*/
/* ===============================
   FRANJA 21 - Onda superior
=================================*/
.franja21-contenido {
    width: 100%;
    height: var(--altura_del_espacio);
    position: relative;
    overflow: hidden;

    /* Fondo con los 4 gradientes */
    background: linear-gradient(120deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    background-size: 300% 300%;
    animation: franja21Fondo 18s ease-in-out infinite;
}

/* Animación suave del fondo */
@keyframes franja21Fondo {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Onda generada con pseudo-elemento */
.franja21-contenido::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 120px;

    /* Onda hecha usando borde curvo */
    background: var(--color-de-fondo-solido);
    /* o el fondo sólido que uses */

    border-bottom-left-radius: 100% 200px;
    border-bottom-right-radius: 100% 200px;
}


/* ===============================
   FRANJA 22 - Onda doble
=================================*/
/* ===============================
   FRANJA 22 - Ondas suaves CSS
=================================*/


/* Fondo con ondas suaves usando los 4 gradientes */
.franja22-contenido {
    width: 100%;
    height: var(--altura_del_espacio);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at bottom,
            var(--color-gradiente-1) 0%,
            transparent 60%),
        radial-gradient(ellipse at 30% 120%,
            var(--color-gradiente-2) 0%,
            transparent 70%),
        radial-gradient(ellipse at 70% 120%,
            var(--color-gradiente-3) 0%,
            transparent 70%),
        radial-gradient(ellipse at top,
            var(--color-gradiente-4) 0%,
            transparent 65%),
        var(--color-de-fondo-solido);

    background-blend-mode: screen;
    animation: ondas22 18s ease-in-out infinite;
}

/* Animación suave tipo “mar” */
@keyframes ondas22 {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 20%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* ===============================
   FRANJA 23 - Diagonal simple (mask)
=================================*/
/* ===============================
   FRANJA 23 - ZigZag suave
=================================*/
.franja23-contenido {
    height: var(--altura_del_espacio);
    background:
        linear-gradient(135deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));

    --altura-zigzag: 50px;

    /* Más creativo que clip-path */
    mask-image: repeating-linear-gradient(-45deg,
            black 0 calc(var(--altura-zigzag) / 2),
            transparent calc(var(--altura-zigzag) / 2) var(--altura-zigzag));
    mask-size: 100% 100%;
}


/* ===============================
   FRANJA 24 - Doble diagonal creativa
=================================*/
.franja24-contenido {
    height: var(--altura_del_espacio);
    background:
        linear-gradient(180deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));

    --alt: 18%;

    clip-path: polygon(0 var(--alt),
            100% 0,
            100% 100%,
            0 100%);

    position: relative;
}

/* ===============================
   FRANJA 25 - Triángulos repetidos
=================================*/
/* ===============================
   FRANJA 25 - Triángulos repetidos con gradientes
=================================*/
.franja25-contenido {
    height: var(--altura_del_espacio);

    /* 4 gradientes combinados como textura base */
    background:
        /* capa 1: patrón de triángulos */
        repeating-linear-gradient(-45deg,
            var(--color-gradiente-1) 0 20px,
            var(--color-gradiente-2) 20px 40px,
            var(--color-gradiente-3) 40px 60px,
            var(--color-gradiente-4) 60px 80px);

    background-size: 100% 100%;
}

/* ===============================
   FRANJA 26 - Hexágonos honeycomb
=================================*/
.franja26-contenido {
    height: var(--altura_del_espacio);
    background-color: var(--color-de-fondo-solido);
    background-image:
        radial-gradient(circle at 10px 10px, transparent 9px, rgba(255, 255, 255, .08) 10px);
    background-size: 20px 20px;
}

/* ===============================
   FRANJA 27 - Líneas diagonales
=================================*/
/* ===============================
   FRANJA 27 - Líneas diagonales con gradientes
=================================*/
.franja27-contenido {
    height: var(--altura_del_espacio);

    /* Fondo base con los 4 gradientes */
    background:
        repeating-linear-gradient(45deg,
            var(--color-gradiente-1) 0 10px,
            var(--color-gradiente-2) 10px 20px,
            var(--color-gradiente-3) 20px 30px,
            var(--color-gradiente-4) 30px 40px,
            rgba(255, 255, 255, 0.1) 40px 50px);
}

/* ===============================
   FRANJA 28 - Glassmorphism con gradientes
=================================*/
.franja28-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    border-radius: 16px;
    overflow: hidden;

    /* Fondo con gradientes y efecto glass */
    background:
        linear-gradient(120deg,
            var(--color-gradiente-1) 0%,
            var(--color-gradiente-2) 33%,
            var(--color-gradiente-3) 66%,
            var(--color-gradiente-4) 100%),
        rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.4);

    /* Sombra para darle profundidad */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ===============================
   FRANJA 29 - Divisor profesional con gradientes suaves
=================================*/
.franja29-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    background: linear-gradient(120deg,
            var(--color-gradiente-1, #ff004c),
            var(--color-gradiente-2, #ff9f1c),
            var(--color-gradiente-3, #2ec4b6),
            var(--color-gradiente-4, #1b00ff));
    /* Suaviza la transición entre los gradientes */
    background-size: 400% 400%;
    /* Animación muy sutil para un efecto dinámico, opcional */
    animation: franja29Gradient 20s ease-in-out infinite;
}

/* Animación de desplazamiento muy suave */
@keyframes franja29Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ===============================
   FRANJA 30 - Círculos geométricos
=================================*/
/* ===============================
   FRANJA 30 - Círculos geométricos profesionales con gradientes
=================================*/
.franja30-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo base: gradientes diagonales */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #ff004c),
            var(--color-gradiente-2, #ff9f1c),
            var(--color-gradiente-3, #2ec4b6),
            var(--color-gradiente-4, #1b00ff));
    background-size: 300% 300%;
    animation: franja30Gradient 30s ease-in-out infinite;
}

/* Patrones de círculos geométricos sutiles */
.franja30-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.12), transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.1), transparent 55%);
}

@keyframes franja30Gradient {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* ===============================
   FRANJA 31 - Curva orgánica
=================================*/
/* ===============================
   FRANJA 31 - Curva orgánica interactiva
=================================*/
/* ===============================
   FRANJA 31 - Curva orgánica profesional
=================================*/
.franja31-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo con gradientes suaves */
    background: linear-gradient(120deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    background-size: 400% 400%;
    animation: franja31Gradient 25s ease-in-out infinite;

    /* Curva ligera para separar secciones */
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    transition: clip-path 0.6s ease;
}

/* Interacción con mouse: movimiento muy sutil */
.franja31-contenido:hover {
    animation: franja31GradientHover 15s ease-in-out infinite;
}

/* Animación de fondo normal */
@keyframes franja31Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Animación al pasar el mouse (sutil) */
@keyframes franja31GradientHover {
    0% {
        background-position: 10% 50%;
    }

    50% {
        background-position: 90% 50%;
    }

    100% {
        background-position: 10% 50%;
    }
}

/* ===============================
   FRANJA 32 - Ola invertida moderna
=================================*/
.franja32-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo con gradientes animados */
    background: linear-gradient(135deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    background-size: 400% 400%;
    animation: franja32Gradient 20s ease-in-out infinite;

    /* Curva invertida tipo ola */
    clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
    transition: clip-path 0.6s ease;
}

/* Animación de fondo */
@keyframes franja32Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Blur sutil encima opcional */
.franja32-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05), transparent 50%);
    filter: blur(20px);
}

/* ===============================
   FRANJA 33 - Zigzag moderno profesional
=================================*/
.franja33-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo base con gradientes dinámicos */
    background: linear-gradient(135deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    background-size: 400% 400%;
    animation: franja33Gradient 20s ease-in-out infinite;

    /* Clip-path zigzag más elegante */
    clip-path: polygon(0 10%, 10% 0%, 20% 10%, 30% 0%, 40% 10%, 50% 0%,
            60% 10%, 70% 0%, 80% 10%, 90% 0%, 100% 10%,
            100% 100%, 0 100%);
    transition: all 0.5s ease;
}

/* Animación de gradientes */
@keyframes franja33Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa de luces sutiles encima para suavizar */
.franja33-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.08), transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.06), transparent 50%);
    filter: blur(15px);
}

/* ===============================
   FRANJA 34 - Rombos profesionales
=================================*/
.franja34-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo base con gradientes suaves */
    background: linear-gradient(135deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    background-size: 400% 400%;
    animation: franja34Gradient 25s ease-in-out infinite;
}

/* Rombos superpuestos sutiles */
.franja34-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.08) 0,
            rgba(255, 255, 255, 0.08) 20px,
            transparent 20px,
            transparent 40px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 20px,
            transparent 20px,
            transparent 40px);

    opacity: 0.5;
    filter: blur(8px);
}

/* Animación muy suave del gradiente base */
@keyframes franja34Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ===============================
   FRANJA 35 - Montaña geométrica
=================================*/
/* ===============================
   FRANJA 35 - Montaña geométrica profesional
=================================*/
.franja35-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo base con gradientes suaves */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #ff004c),
            var(--color-gradiente-2, #ff9f1c),
            var(--color-gradiente-3, #2ec4b6),
            var(--color-gradiente-4, #1b00ff));
    background-size: 400% 400%;
    animation: franja35Gradient 20s ease-in-out infinite;

    /* Montañas geométricas */
    clip-path: polygon(0% 35%, 15% 20%, 30% 30%, 45% 10%, 60% 25%, 75% 5%, 90% 20%, 100% 15%,
            100% 100%, 0% 100%);
}

/* Animación muy suave del gradiente de fondo */
@keyframes franja35Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Opción avanzada: resaltar la sensación de “montaña” con un overlay sutil */
.franja35-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent 70%),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.05), transparent 50%);
}

/* ===============================
   FRANJA 36 - Triple Wave profesional
=================================*/
.franja36-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo base con gradientes dinámicos */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #ff004c),
            var(--color-gradiente-2, #ff9f1c),
            var(--color-gradiente-3, #2ec4b6),
            var(--color-gradiente-4, #1b00ff));
    background-size: 400% 400%;
    animation: franja36Gradient 20s ease-in-out infinite;
}

/* Animación muy suave del gradiente */
@keyframes franja36Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Olas superpuestas usando pseudo-elementos */
.franja36-contenido::before,
.franja36-contenido::after {
    content: "";
    position: absolute;
    left: 0;
    width: 200%;
    height: 120%;
    background: inherit;
    /* toma los gradientes base */
    border-radius: 43% 57% 63% 37% / 39% 47% 53% 61%;
    /* forma orgánica */
    opacity: 0.4;
    transform: rotate(0deg) translateY(0);
    animation: ola36 25s linear infinite;
}

/* Diferenciar las capas */
.franja36-contenido::after {
    opacity: 0.25;
    animation-duration: 30s;
    top: -10%;
}

.franja36-contenido::before {
    top: -20%;
}

/* Animación de desplazamiento tipo ola */
@keyframes ola36 {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }

    50% {
        transform: translateX(-25%) translateY(5%) rotate(3deg);
    }

    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

/* ===============================
   FRANJA 37 - Punto (dots)
=================================*/
.franja37-contenido {
    height: var(--altura_del_espacio);
    background-color: var(--color-de-fondo-solido);
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px);
    background-size: 20px 20px;
}

/* ===============================
   FRANJA 38 - Glass + diagonal
=================================*/
/* ===============================
   FRANJA 38 - Metallic Premium Glow
=================================*/
.franja38-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo metálico premium con gradientes brillantes */
    background: linear-gradient(135deg,
            #d4d4d4 0%,
            #ffffff 25%,
            #b0b0b0 50%,
            #e0e0e0 75%,
            #c8c8c8 100%);
    background-size: 400% 400%;

    /* Animación de brillo dinámico */
    animation: shimmer38 15s ease-in-out infinite;

    /* Corte diagonal elegante */
    clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 88%);

    /* Glass sutil para suavizar */
    backdrop-filter: blur(4px);
}

/* Animación tipo “metal líquido” */
@keyframes shimmer38 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa de brillo suave */
.franja38-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.15), transparent 50%);
    filter: blur(20px);
    opacity: 0.6;
}

/* ===============================
   FRANJA 39 - Blob abstracto
=================================*/
/* ===============================
   FRANJA 38 - Metallic Divider Profesional
=================================*/
.franja39-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo metálico con presencia, sobrio y elegante */
    background: linear-gradient(135deg,
            #3a3a3a 0%,
            /* gris oscuro */
            #5c5c5c 25%,
            /* gris medio */
            #4a4a4a 50%,
            /* gris profundo */
            #6b6b6b 75%,
            /* gris metálico claro */
            #3a3a3a 100%);
    background-size: 400% 400%;

    /* Animación sutil de desplazamiento de luz */
    animation: franja38Shimmer 18s ease-in-out infinite;

    /* Corte diagonal elegante, opcionalmente recto si quieres líneas más sobrias */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

    /* Delineado elegante para presencia */
    border-top: 2px solid rgba(255, 255, 255, 0.12);
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

/* Animación sutil de “shimmer” metálico */
@keyframes franja38Shimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Líneas decorativas internas sutiles para elegancia */
.franja39-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* Líneas diagonales sobrias */
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 10px);

    opacity: 0.4;
}

/* ===============================
   FRANJA 40 - Radial + Geometry Profesional
=================================*/
.franja40-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo metálico sobrio con radial para profundidad */
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 60%),
        linear-gradient(135deg,
            #2a2a2a,
            /* gris muy oscuro */
            #4d4d4d,
            /* gris medio */
            #6e6e6e
            /* gris metálico claro */
        );

    /* Animación sutil opcional para dinamismo */
    background-size: 300% 300%;
    animation: franja40Gradient 20s ease-in-out infinite;

    /* Corte diagonal elegante */
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

/* Animación suave para efecto metálico dinámico */
@keyframes franja40Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Opcional: capa decorativa de líneas sutiles para elegancia */
/* ===============================
   FRANJA 40 - Radial + Geometry Profesional (plano)
=================================*/
.franja40-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo metálico sobrio con radial para profundidad */
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 60%),
        linear-gradient(135deg,
            #2a2a2a,
            /* gris muy oscuro */
            #4d4d4d,
            /* gris medio */
            #6e6e6e
            /* gris metálico claro */
        );

    /* Animación sutil opcional para dinamismo */
    background-size: 300% 300%;
    animation: franja40Gradient 20s ease-in-out infinite;

    /* Sin corte diagonal: completamente plano */
    clip-path: none;
}

/* Animación suave para efecto metálico dinámico */
@keyframes franja40Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Opcional: capa decorativa de líneas sutiles para elegancia */
.franja40-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 8px);
    opacity: 0.3;
}

/* ==================================================
   FRANJAS 41 - 100
   60 variantes únicas, 100% CSS, usan variables globales
   Altura: var(--altura_del_espacio)
   Colores: variables (--color-de-fondo-solido, --color-contraste,
            --color-gradiente-1..4, --color-gradiente-global)
   ================================================== */

/* -------------------- FRANJA 41 - Sobria con gradientes sutiles -------------------- */
.franja41-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo gris elegante con degradado para dinamismo */
    background: linear-gradient(135deg,
            #3a3a3a,
            /* gris oscuro */
            #555555,
            /* gris medio */
            #777777
            /* gris más claro */
        );
    background-size: 300% 300%;

    /* Corte diagonal muy sutil */
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);

    /* Animación suave para dar vida sin ser llamativa */
    animation: franja41Gradient 25s ease-in-out infinite;
}

/* Animación de gradiente muy sutil */
@keyframes franja41Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa opcional: líneas diagonales muy finas para elegancia */
.franja41-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.03) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.2;
}

/* -------------------- FRANJA 42 - Soft gradient band -------------------- */
.franja42-contenido {
    height: var(--altura_del_espacio);
    background: linear-gradient(10deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3), var(--color-gradiente-4));
}

/* -------------------- FRANJA 43 - Fine diagonal stripes -------------------- */
/* -------------------- FRANJA 43 - Fine diagonal stripes profesional -------------------- */
.franja43-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo base gris neutro, muy versátil */
    background: linear-gradient(120deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));
    background-size: 400% 400%;

    /* Animación sutil del gradiente para dar vida y dinamismo */
    animation: franja43Gradient 25s ease-in-out infinite;
}

/* Capas de líneas diagonales finas encima, elegantes y discretas */
.franja43-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.06) 0 6px,
            transparent 6px 12px);
    opacity: 0.5;
    /* aumenta visibilidad sin ser agresivo */
}

/* Animación del gradiente de fondo */
@keyframes franja43Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* -------------------- FRANJA 44 - Glass Blur Profesional -------------------- */
/* -------------------- FRANJA 44 - Metallic Elegance -------------------- */
.franja44-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo metálico serio y elegante */
    background: linear-gradient(135deg,
            rgba(50, 50, 50, 0.85),
            rgba(80, 80, 80, 0.7),
            rgba(60, 60, 60, 0.75),
            rgba(100, 100, 100, 0.65));
    background-size: 400% 400%;

    /* Blur sutil para efecto glass elegante */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    /* Bordes finos y limpios */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    /* Sombra interna para profundidad */
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.15);

    /* Animación muy suave para sensación de movimiento metálico */
    animation: franja44Metal 25s ease-in-out infinite;
}

/* Animación tipo shimmer metálico */
@keyframes franja44Metal {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Líneas diagonales limpias y elegantes */
.franja44-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.4;
}

/* Reflejos suaves para dar sensación de luz */
.franja44-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.12), transparent 60%),
        radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.1), transparent 60%);
    opacity: 0.6;
}

/* -------------------- FRANJA 45 - Organic blobs -------------------- */
/* -------------------- FRANJA 45 - Organic blobs con gradientes -------------------- */
.franja45-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo base sólido con gradiente sutil */
    background: var(--color-de-fondo-solido);
}

/* Capas de blobs orgánicos y gradientes dinámicos */
.franja45-contenido::before,
.franja45-contenido::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    border-radius: 50%;
    background: radial-gradient(circle at center,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0) 70%);
    opacity: 0.6;
    animation: franja45Blobs 30s linear infinite;
    pointer-events: none;
}

/* Diferencia de movimiento para las capas */
.franja45-contenido::after {
    background: radial-gradient(circle at center,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0) 70%);
    animation-duration: 45s;
}

/* Animación orgánica muy suave */
@keyframes franja45Blobs {
    0% {
        transform: translate(0%, 0%) scale(1);
    }

    25% {
        transform: translate(10%, 5%) scale(1.05);
    }

    50% {
        transform: translate(0%, 10%) scale(1);
    }

    75% {
        transform: translate(-10%, 5%) scale(0.95);
    }

    100% {
        transform: translate(0%, 0%) scale(1);
    }
}

.franja45-contenido::before {
    content: "";
    position: absolute;
    inset: -10% -20% -10% -20%;
    background: radial-gradient(circle at 20% 30%, var(--color-gradiente-2), transparent 25%), radial-gradient(circle at 80% 70%, var(--color-gradiente-4), transparent 25%);
    filter: blur(36px);
    opacity: 0.7;
    pointer-events: none;
}

/* -------------------- FRANJA 46 - Thin top & bottom lines -------------------- */
/* -------------------- FRANJA 46 - Futuristic Divider -------------------- */
.franja46-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido base */
    background: var(--color-de-fondo-solido);

    /* Bordes superiores e inferiores con brillo sutil */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Capa de gradientes dinámicos tipo luz futurista */
.franja46-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            rgba(0, 255, 255, 0.15),
            rgba(255, 0, 255, 0.15),
            rgba(0, 255, 128, 0.15),
            rgba(255, 255, 0, 0.15));
    background-size: 400% 400%;
    animation: franja46Glow 20s ease-in-out infinite;
    pointer-events: none;
}

/* Animación muy suave de desplazamiento de gradientes */
@keyframes franja46Glow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa de líneas finas decorativas */
.franja46-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.3;
}

/* -------------------- FRANJA 47 - Repeating diamonds pattern -------------------- */
.franja47-contenido {
    height: var(--altura_del_espacio);
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 12px, transparent 12px 24px), var(--color-de-fondo-solido);
}

/* -------------------- FRANJA 48 - Wave mask (svg) -------------------- */
.franja48-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido base */
    background: var(--color-de-fondo-solido);

    /* Capa de gradiente visible */
    background-image: linear-gradient(120deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));
    background-size: 200% 200%;

    /* Animación sutil de movimiento de gradiente */
    animation: franja48Gradient 20s ease-in-out infinite;
}

/* Animación muy suave de desplazamiento del gradiente */
@keyframes franja48Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa de textura refinada */
.franja48-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* Patrón sutil de líneas diagonales o trama */
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.3;
}

/* -------------------- FRANJA 49 - Conic spotlight -------------------- */
.franja49-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido base */
    background: var(--color-de-fondo-solido);

    /* Conic y gradientes combinados */
    background-image:
        conic-gradient(from 180deg at 50% 50%,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0),
            transparent 50%),
        linear-gradient(120deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));
    background-size: 200% 200%;
    background-blend-mode: overlay;

    /* Animación suave de movimiento */
    animation: franja49Gradient 25s ease-in-out infinite;
}

/* Animación de desplazamiento muy suave del fondo */
@keyframes franja49Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa de textura sutil opcional */
.franja49-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.25;
}

/* -------------------- FRANJA 50 - Soft noise dots -------------------- */
.franja50-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido + gradientes suaves */
    background: var(--color-de-fondo-solido);
    background-image:
        linear-gradient(120deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));
    background-size: 200% 200%;
    background-blend-mode: overlay;

    /* Animación suave de movimiento */
    animation: franja50Gradient 20s ease-in-out infinite;
}

/* Animación de desplazamiento muy sutil */
@keyframes franja50Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa de textura decorativa tipo “mesh” */
.franja50-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 12px 12px;
    opacity: 0.35;
}

/* -------------------- FRANJA 51 - Split diagonal gradient -------------------- */
.franja51-contenido {
    height: var(--altura_del_espacio);
    background: linear-gradient(120deg, var(--color-gradiente-1) 0 50%, var(--color-gradiente-2) 50% 100%);
}

/* -------------------- FRANJA 52 - Checker micro pattern -------------------- */
.franja52-contenido {
    height: var(--altura_del_espacio);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%);
    background-size: 14px 14px;
    background-color: var(--color-de-fondo-solido);
}

/* -------------------- FRANJA 53 - Long diagonal cutouts -------------------- */
.franja53-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--color-de-fondo-solido);

    /* Fondo con gradientes sofisticados */
    background-image: linear-gradient(120deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0)),
        var(--color-de-fondo-solido);
    background-size: 400% 400%;

    /* Forma ondulada profesional */
    clip-path: path("M0,0 C360,60 1080,-60 1440,0 L1440,100% L0,100% Z");

    /* Animación sutil de gradiente para dar dinamismo */
    animation: franja53bGradientMove 25s ease-in-out infinite;
}

/* Animación suave de desplazamiento del gradiente */
@keyframes franja53bGradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa de líneas finas para textura adicional */
.franja53-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.25;
}

/* -------------------- FRANJA 54 - Double wave mask -------------------- */
.franja54-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido con gradientes sofisticados */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));
    background-size: 400% 400%;

    /* Forma ondulada suavizada con clip-path */
    clip-path: path("M0,80 C360,0 1080,160 1440,80 L1440,100% L0,100% Z");

    /* Animación de gradiente sutil */
    animation: franja54GradientMove 30s ease-in-out infinite;
}

/* Animación muy suave de desplazamiento de gradientes */
@keyframes franja54GradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa ligera de líneas diagonales para textura */
.franja54-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.2;
}

/* -------------------- FRANJA 55 - Glass + gradient overlay -------------------- */
.franja55-contenido {
    height: var(--altura_del_espacio);
    background: linear-gradient(-140deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02)), var(--color-gradiente-global);
    backdrop-filter: blur(6px);
}

/* -------------------- FRANJA 56 - Triangular peaks -------------------- */
.franja56-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido + gradientes refinados */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));
    background-size: 400% 400%;

    /* Ondas suaves simulando picos triangulares refinados */
    clip-path: polygon(0 35%, 8% 20%, 16% 35%, 24% 15%, 32% 35%, 40% 10%,
            48% 35%, 56% 20%, 64% 35%, 72% 12%, 80% 35%, 88% 18%, 96% 35%,
            100% 35%, 100% 100%, 0 100%);

    /* Animación de gradiente suave */
    animation: franja56GradientMove 25s ease-in-out infinite;
}

/* Animación de desplazamiento de gradientes */
@keyframes franja56GradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa opcional: líneas diagonales ligeras */
.franja56-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.2;
}

/* -------------------- FRANJA 57 - Horizontal banded blur -------------------- */
.franja57-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido + gradientes dinámicos y suaves */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));
    background-size: 300% 300%;

    /* Efecto tipo glass sutil */
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    /* Ondas suaves como corte decorativo */
    clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0 100%);

    /* Animación suave para movimiento de gradientes */
    animation: franja57GradientMove 20s ease-in-out infinite;
}

/* Animación de desplazamiento de gradientes */
@keyframes franja57GradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa opcional */
.franja57-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.2;
}

/* -------------------- FRANJA 58 - Micro lines -------------------- */
.franja58-contenido {
    height: var(--altura_del_espacio);
    background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 4px);
    background-color: var(--color-de-fondo-solido);
}

/* -------------------- FRANJA 59 - Offset boxes -------------------- */
.franja59-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido + gradientes sutiles para profundidad */
    background: var(--color-de-fondo-solido);
}

/* Capa de franjas decorativas */
.franja59-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* Líneas diagonales elegantes */
    background: repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 6px);

    /* Opcional: ligera animación para dar dinamismo */
    animation: franja59StripeMove 15s linear infinite;
}

/* Animación suave de desplazamiento de franjas */
@keyframes franja59StripeMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* -------------------- FRANJA 60 - Center radial glow -------------------- */
.franja60-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido base */
    background: var(--color-de-fondo-solido);
}

/* Halo radial decorativo y sutil animación */
.franja60-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1), transparent 50%);

    filter: blur(30px);
    opacity: 0.8;

    animation: franja60Glow 20s ease-in-out infinite alternate;
}

/* Animación sutil para dar vida al halo */
@keyframes franja60Glow {
    0% {
        transform: scale(1) translate(0, 0);
    }

    50% {
        transform: scale(1.05) translate(5px, -5px);
    }

    100% {
        transform: scale(1) translate(0, 0);
    }
}

/* -------------------- FRANJA 61 - Zig zag clip -------------------- */
.franja61-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido + gradientes para profundidad */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #e0e0e0),
            var(--color-gradiente-2, #f5f5f5),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));
    background-size: 400% 400%;

    /* Animación muy suave para dinamismo */
    animation: franja61Gradient 25s ease-in-out infinite;

    /* Corte ondulado suave */
    clip-path: polygon(0 0, 0 85%,
            10% 90%, 20% 80%, 30% 92%, 40% 78%, 50% 88%,
            60% 80%, 70% 92%, 80% 78%, 90% 88%, 100% 80%,
            100% 0);
}

/* Animación suave del gradiente */
@keyframes franja61Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa sutil */
.franja61-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.1), transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.08), transparent 50%);
    filter: blur(25px);
    opacity: 0.7;
}

/* -------------------- FRANJA 62 - Subtle vertical gradient -------------------- */
.franja62-contenido {
    height: var(--altura_del_espacio);
    background: linear-gradient(180deg, var(--color-gradiente-1), var(--color-de-fondo-solido));
}

/* -------------------- FRANJA 63 - Cross hatch pattern -------------------- */
.franja63-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido + gradientes suaves para profundidad */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #e0e0e0),
            var(--color-gradiente-2, #f5f5f5),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));
    background-size: 400% 400%;
    animation: franja63Gradient 20s ease-in-out infinite;
}

/* Animación suave para movimiento de gradientes */
@keyframes franja63Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Patrón cruzado decorativo más visible */
.franja63-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
    background-size: 20px 20px;
    opacity: 0.6;
}

/* -------------------- FRANJA 64 - Angled glass strip -------------------- */
.franja64-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido + gradientes metálicos sutiles */
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.1)),
        var(--color-de-fondo-solido);

    /* Blur para efecto glass */
    backdrop-filter: blur(12px);

    /* Corte diagonal elegante */
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);

    /* Animación sutil de brillo */
    animation: franja64Shimmer 20s ease-in-out infinite;
}

/* Animación tipo shimmer */
@keyframes franja64Shimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa de líneas diagonales */
.franja64-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.5;
}

/* -------------------- FRANJA 65 - Circular cutouts -------------------- */
.franja65-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido + gradientes dinámicos */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0)),
        var(--color-de-fondo-solido);
    background-size: 300% 300%;

    /* Animación sutil de movimiento de gradiente */
    animation: franja65Gradient 20s ease-in-out infinite;

    /* Corte orgánico ondulado para separador moderno */
    clip-path: polygon(0 10%, 10% 15%, 20% 5%, 30% 12%, 40% 8%,
            50% 15%, 60% 7%, 70% 12%, 80% 5%, 90% 10%, 100% 8%,
            100% 100%, 0 100%);
}

/* Animación de gradiente suave */
@keyframes franja65Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa adicional con burbujas suaves */
.franja65-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 25% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 75% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 35%);
}

/* -------------------- FRANJA 66 - Repeating tiny dots -------------------- */
.franja66-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido + gradiente suave */
    background: linear-gradient(120deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0)),
        var(--color-de-fondo-solido);
    background-size: 200% 200%;

    /* Animación muy sutil de gradiente para dar vida */
    animation: franja66Gradient 25s ease-in-out infinite;
}

/* Animación suave del gradiente */
@keyframes franja66Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa de puntos decorativa más visible */
.franja66-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 12px 12px;
    opacity: 0.7;
}

/* -------------------- FRANJA 67 - Diagonal split with shadow -------------------- */
.franja67-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido combinado con gradientes dinámicos */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0)),
        var(--color-de-fondo-solido);
    background-size: 300% 300%;

    /* Corte diagonal moderno */
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);

    /* Animación muy sutil del gradiente */
    animation: franja67Gradient 20s ease-in-out infinite;
}

/* Animación suave tipo shimmer */
@keyframes franja67Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa opcional: sombra diagonal brillante */
.franja67-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 60%);
}

/* -------------------- FRANJA 68 - Large soft stripes -------------------- */
.franja68-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido combinado con gradientes sutiles */
    background: linear-gradient(90deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0)),
        var(--color-de-fondo-solido);
    background-size: 300% 300%;

    /* Animación suave del gradiente para dar vida */
    animation: franja68Gradient 25s ease-in-out infinite;
}

/* Animación tipo shimmer suave */
@keyframes franja68Gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capas decorativas de líneas grandes y suaves */
.franja68-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0 40px,
            rgba(255, 255, 255, 0.02) 40px 80px);
    opacity: 0.6;
}

/* -------------------- FRANJA 69 - Organic diagonal blobs -------------------- */
/* -------------------- FRANJA 69 - Organic diagonal blobs premium -------------------- */
.franja69-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido combinado con gradientes suaves y modernos */
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05), transparent 50%),
        var(--color-de-fondo-solido);
    background-blend-mode: overlay;

    /* Animación sutil para dar vida a los blobs */
    animation: franja69Animation 20s ease-in-out infinite;
}

/* Animación suave de movimiento */
@keyframes franja69Animation {
    0% {
        background-position: 0% 0%, 100% 100%, 0 0;
    }

    50% {
        background-position: 10% 20%, 90% 80%, 0 0;
    }

    100% {
        background-position: 0% 0%, 100% 100%, 0 0;
    }
}

/* Capa decorativa de líneas diagonales opcional */
.franja69-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.03) 0 4px,
            transparent 4px 8px);
    opacity: 0.4;
}

.franja69-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, var(--color-gradiente-1), transparent 40%);
    filter: blur(30px);
    opacity: 0.7;
}

/* -------------------- FRANJA 70 - Thin zig lines -------------------- */
.franja70-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido con gradientes modernos */
    background:
        linear-gradient(120deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3), var(--color-gradiente-4)),
        var(--color-de-fondo-solido);
    background-blend-mode: overlay;

    /* Repeating diagonal texture */
    background-image: repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.04) 0 6px,
            transparent 6px 12px);

    /* Animación muy sutil para dar vida */
    animation: franja70Animation 25s ease-in-out infinite;
}

/* Animación de movimiento muy suave de la textura */
@keyframes franja70Animation {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 50px 50px;
    }

    100% {
        background-position: 0 0;
    }
}

/* Capa decorativa adicional opcional */
.franja70-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.02) 0 2px,
            transparent 2px 6px);
    opacity: 0.4;
}

/* -------------------- FRANJA 71 - Multi-layer gradients -------------------- */
/* -------------------- FRANJA 71 - Profesional con blend modes -------------------- */
.franja71-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;

    /* Color sólido base */
    background-color: var(--color-de-fondo-solido);

    /* Degradado sobre el fondo */
    background-image: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2) 50%,
            var(--color-gradiente-3));

    /* Modo de mezcla profesional */
    background-blend-mode: multiply;
    /* prueba también screen o soft-light */

    /* Opcional: suavizar transición de color al pasar el mouse */
    transition: background 0.5s ease;
}

/* -------------------- FRANJA 71 - Profesional con blend modes -------------------- */
.franja71-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;

    /* Color sólido base */
    background-color: var(--color-de-fondo-solido);

    /* Degradado sobre el fondo */
    background-image: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2) 50%,
            var(--color-gradiente-3));

    /* Modo de mezcla profesional */
    background-blend-mode: multiply;
    /* prueba también screen o soft-light */

    /* Opcional: suavizar transición de color al pasar el mouse */
    transition: background 0.5s ease;
}

/* Ejemplo de hover para ver el efecto dinámico */
.franja71-contenido:hover {
    background-blend-mode: soft-light;
    /* cambia la mezcla al pasar el mouse */
}

/* -------------------- FRANJA 72 - Slanted notch -------------------- */
.franja72-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;

    /* Color sólido base */
    background-color: var(--color-de-fondo-solido);

    /* Degradado sobre el fondo */
    background-image: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2) 50%,
            var(--color-gradiente-3));

    /* Modo de mezcla profesional */
    background-blend-mode: screen;
    /* prueba también screen o soft-light */

    /* Opcional: suavizar transición de color al pasar el mouse */
    transition: background 0.5s ease;
}

/* Ejemplo de hover para ver el efecto dinámico */
.franja72-contenido:hover {
    background-blend-mode: soft-light;
    /* cambia la mezcla al pasar el mouse */
}


/* -------------------- FRANJA 73 - Tiny chequered noise -------------------- */
.franja73-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;

    /* Color sólido base */
    background-color: var(--color-de-fondo-solido);

    /* Degradado sobre el fondo */
    background-image: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2) 50%,
            var(--color-gradiente-3));

    /* Modo de mezcla profesional */
    background-blend-mode: soft-light;
    /* prueba también screen o soft-light */

    /* Opcional: suavizar transición de color al pasar el mouse */
    transition: background 0.5s ease;
}

/* Ejemplo de hover para ver el efecto dinámico */
.franja73-contenido:hover {
    background-blend-mode: overlay;
    /* cambia la mezcla al pasar el mouse */
}

/* -------------------- FRANJA 74 - Smooth curved mask -------------------- */
/* -------------------- FRANJA74 - Premium Gradients sin máscara -------------------- */
.franja74-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido base */
    background: var(--color-de-fondo-solido);

    /* Gradientes combinados para efecto premium */
    background-image: linear-gradient(135deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));
    background-size: 400% 400%;

    /* Animación muy sutil de movimiento de gradientes */
    animation: franja74GradientShift 20s ease-in-out infinite;
}

/* Animación de movimiento de gradientes */
@keyframes franja74GradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Opcional: capa decorativa ligera */
.franja74-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.2;
}

/* -------------------- FRANJA 75 - Gradient stripes with blend -------------------- */
.franja75-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido base */
    background: var(--color-de-fondo-solido);

    /* Gradientes elegantes y combinados */
    background-image:
        linear-gradient(135deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0));

    background-size: 400% 400%;

    /* Animación suave para dar vida al degradado */
    animation: franja75GradientShift 25s ease-in-out infinite;
}

/* Animación de movimiento de gradiente */
@keyframes franja75GradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Capa decorativa opcional para textura muy sutil */
.franja75-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.03) 2px,
            transparent 2px,
            transparent 6px);
    opacity: 0.2;
}

/* -------------------- FRANJA 76 - Tiny diagonal dots -------------------- */
.franja76-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido base */
    background: var(--color-de-fondo-solido);

    /* Gradiente radial con textura sutil */
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(135deg, var(--color-gradiente-1, #f5f5f5), var(--color-gradiente-2, #e0e0e0));

    background-size: 10px 10px, 20px 20px, 100% 100%;
    background-blend-mode: overlay;

    /* Animación muy suave para dar vida a la textura */
    animation: franja76GradientShift 20s ease-in-out infinite;
}

/* Animación de desplazamiento sutil */
@keyframes franja76GradientShift {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    50% {
        background-position: 10px 10px, 20px 20px, 0 0;
    }

    100% {
        background-position: 0 0, 0 0, 0 0;
    }
}

/* -------------------- FRANJA 77 - Layered waves -------------------- */
.franja77-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido con gradientes para profundidad */
    background:
        linear-gradient(135deg, var(--color-gradiente-1, #f5f5f5), var(--color-gradiente-2, #e0e0e0), var(--color-gradiente-3, #d0d0d0), var(--color-gradiente-4, #f0f0f0)),
        var(--color-de-fondo-solido);

    background-blend-mode: overlay;

    /* Textura de puntos finos para detalle visual */
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));

    background-size: 12px 12px, 100% 100%;
    background-repeat: repeat, no-repeat;

    /* Animación suave de desplazamiento para dar vida a la franja */
    animation: franja77Move 25s ease-in-out infinite;
}

/* Animación sutil de movimiento */
@keyframes franja77Move {
    0% {
        background-position: 0 0, 0 0;
    }

    50% {
        background-position: 20px 20px, 0 0;
    }

    100% {
        background-position: 0 0, 0 0;
    }
}

/* -------------------- FRANJA 78 - Diagonal micro-grid -------------------- */
.franja78-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido con gradientes elegantes */
    background:
        linear-gradient(135deg, var(--color-gradiente-1, #f5f5f5), var(--color-gradiente-2, #e0e0e0), var(--color-gradiente-3, #d0d0d0), var(--color-gradiente-4, #f0f0f0)),
        var(--color-de-fondo-solido);
    background-blend-mode: overlay;

    /* Patrón diagonal sutil para textura */
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 8px, rgba(0, 0, 0, 0.03) 8px 16px),
        linear-gradient(135deg, var(--color-gradiente-1, #f5f5f5), var(--color-gradiente-2, #e0e0e0));
    background-size: 100% 100%, 100% 100%;

    /* Animación suave para dar vida */
    animation: franja78Move 20s linear infinite;
}

/* Animación muy ligera de desplazamiento diagonal */
@keyframes franja78Move {
    0% {
        background-position: 0 0, 0 0;
    }

    50% {
        background-position: 20px 20px, 0 0;
    }

    100% {
        background-position: 0 0, 0 0;
    }
}

/* -------------------- FRANJA 79 - Rounded notch pattern -------------------- */
.franja79-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido combinado con gradientes suaves */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #f5f5f5),
            var(--color-gradiente-2, #e0e0e0),
            var(--color-gradiente-3, #d0d0d0),
            var(--color-gradiente-4, #f0f0f0)), var(--color-de-fondo-solido);
    background-blend-mode: overlay;

    /* Corte diagonal más fluido y moderno */
    clip-path: polygon(0 5%, 95% 0, 100% 10%, 100% 90%, 95% 100%, 0 95%);

    /* Sutil textura decorativa opcional */
}

/* -------------------- FRANJA 80 - Center band with shadow -------------------- */
.franja80-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido combinado con gradiente metálico sutil */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #e0e0e0),
            var(--color-gradiente-2, #c0c0c0),
            var(--color-gradiente-3, #f0f0f0),
            var(--color-gradiente-4, #d8d8d8)), var(--color-de-fondo-solido);
    background-blend-mode: soft-light;

    /* Corte diagonal elegante */
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);

    /* Textura decorativa muy sutil */
}

/* -------------------- FRANJA 81 - Soft corner curves -------------------- */
.franja81-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo metálico con gradientes y profundidad */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #d0d0d0),
            var(--color-gradiente-2, #b8b8b8),
            var(--color-gradiente-3, #e8e8e8),
            var(--color-gradiente-4, #cfcfcf)), var(--color-de-fondo-solido);
    background-blend-mode: overlay;

    /* Curvas elegantes en la parte inferior */
    border-radius: 0 0 40% 40% / 0 0 100% 100%;

    /* Textura muy sutil para dar calidad */
}

.franja81-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.03) 0 4px,
            transparent 4px 12px);
    opacity: 0.25;
}

/* -------------------- FRANJA 82 - Large dot spotlight -------------------- */
.franja82-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido combinado con radial blends para dar profundidad */
    background:
        radial-gradient(circle at 30% 40%, var(--color-gradiente-1, #b8b8b8) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, var(--color-gradiente-2, #e0e0e0) 0%, transparent 50%),
        var(--color-de-fondo-solido);
    background-blend-mode: overlay;
}

/* Capa decorativa con textura muy sutil */
.franja82-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.02) 0 4px,
            transparent 4px 12px);
    opacity: 0.2;
}

/* -------------------- FRANJA 83 - Slanted stripes with gap -------------------- */
.franja83-contenido {
    height: var(--altura_del_espacio);
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Fondo sólido combinado con gradientes sutiles */
    background:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.03) 0 8px,
            rgba(255, 255, 255, 0) 8px 24px),
        linear-gradient(120deg, var(--color-gradiente-1), var(--color-gradiente-2), var(--color-gradiente-3), var(--color-gradiente-4)),
        var(--color-de-fondo-solido);
    background-blend-mode: lighten;

    /* Animación sutil de movimiento */
    animation: franja83Shimmer 20s linear infinite;
}

/* Animación suave de gradiente para efecto “shimmer” */
@keyframes franja83Shimmer {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }

    50% {
        background-position: 100% 100%, 50% 50%, 0% 0%;
    }

    100% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }
}

/* Capa decorativa opcional: líneas diagonales adicionales para textura */
.franja83-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.02) 0 4px,
            transparent 4px 12px);
    opacity: 0.2;
}

/* -------------------- FRANJA 84 - Organic smear -------------------- */
.franja84-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background: var(--color-de-fondo-solido);
    overflow: hidden;
}

/* Pseudo-elemento para resplandor elegante */
.franja84-contenido::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -10%;
    width: 60%;
    height: 150%;
    background: radial-gradient(circle at 80% 30%, var(--color-gradiente-3) 0%, transparent 60%);
    filter: blur(40px);
    opacity: 0.4;
    /* más sutil */
    pointer-events: none;
    transform: rotate(15deg);
    /* ángulo elegante para dinamismo */
}

/* Segundo resplandor opcional */
.franja84-contenido::after {
    content: "";
    position: absolute;
    bottom: -10%;
    right: -20%;
    width: 50%;
    height: 120%;
    background: radial-gradient(circle at 20% 70%, var(--color-gradiente-2) 0%, transparent 60%);
    filter: blur(35px);
    opacity: 0.25;
    pointer-events: none;
    transform: rotate(-10deg);
}

/* -------------------- FRANJA 85 - Diagonal double-line -------------------- */
/* -------------------- FRANJA85 - Professional diagonal lines -------------------- */
.franja85-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background: var(--color-de-fondo-solido);
    overflow: hidden;
}

/* Líneas diagonales sutiles como decoración */
.franja85-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0 3px,
            rgba(255, 255, 255, 0.03) 3px 6px,
            transparent 6px 20px);
    opacity: 0.6;
    pointer-events: none;
}

/* -------------------- FRANJA 86 - Subtle emboss -------------------- */
/* -------------------- FRANJA86 - Premium subtle emboss -------------------- */
.franja86-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background: var(--color-de-fondo-solido);

    /* Emboss suave con luz y sombra */
    box-shadow:
        inset 0 6px 12px rgba(255, 255, 255, 0.1),
        /* luz superior */
        inset 0 -6px 12px rgba(0, 0, 0, 0.08);
    /* sombra inferior */
}

/* Opcional: capa decorativa sutil para textura */
.franja86-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.02) 0 4px,
            transparent 4px 12px);
    opacity: 0.4;
    pointer-events: none;
}

/* -------------------- FRANJA 87 - Curved cut (bottom) -------------------- */
/* -------------------- FRANJA87 - Curved cut premium -------------------- */
.franja87-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background: linear-gradient(180deg,
            var(--color-gradiente-1) 0%,
            var(--color-gradiente-2) 50%,
            var(--color-gradiente-3) 100%), var(--color-de-fondo-solido);
    background-blend-mode: overlay;

    /* Curva suave en la parte inferior */
    clip-path: ellipse(100% 50% at 50% 100%);

    /* Textura sutil */
    overflow: hidden;
}

.franja87-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.03) 0 6px,
            transparent 6px 12px);
    opacity: 0.3;
    pointer-events: none;
}

/* -------------------- FRANJA 88 - Chevron pattern -------------------- */
/* -------------------- FRANJA88 - Chevron premium -------------------- */
.franja88-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background: linear-gradient(135deg,
            var(--color-gradiente-1) 25%,
            var(--color-gradiente-2) 25% 50%,
            var(--color-gradiente-3) 50% 75%,
            var(--color-gradiente-4) 75%), var(--color-de-fondo-solido);
    background-size: 80px 80px;
    background-blend-mode: overlay;

    /* Opcional: efecto metálico sutil */
    animation: chevronShimmer 20s linear infinite;
}

/* Animación sutil para dar vida al patrón */
@keyframes chevronShimmer {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 40px 40px;
    }

    100% {
        background-position: 0 0;
    }
}

/* Textura ligera */
.franja88-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.03) 0 4px,
            transparent 4px 12px);
    opacity: 0.25;
    pointer-events: none;
}

/* -------------------- FRANJA 89 - Soft gradient ring -------------------- */
/* -------------------- FRANJA 89 - Chevron moderno -------------------- */
.franja89-contenido {
    height: var(--altura_del_espacio);
    background-color: var(--color-de-fondo-solido);
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.05) 0 10px,
            rgba(0, 0, 0, 0.03) 10px 20px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.05) 0 10px,
            rgba(0, 0, 0, 0.03) 10px 20px),
        linear-gradient(120deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    background-blend-mode: overlay;
    background-size: 60px 60px;
}

/* -------------------- FRANJA 90 - Stacked slashes -------------------- */
/* -------------------- FRANJA 90 - Stacked slashes moderno -------------------- */
.franja90-contenido {
    height: var(--altura_del_espacio);
    background-color: var(--color-de-fondo-solido);
    background-image:
        repeating-linear-gradient(-25deg,
            rgba(255, 255, 255, 0.05) 0 6px,
            rgba(0, 0, 0, 0.02) 6px 20px),
        linear-gradient(120deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));
    background-blend-mode: overlay;
    background-size: 60px 60px;
}

/* -------------------- FRANJA 91 - Soft diagonal gradient glass -------------------- */
/* -------------------- FRANJA 91 - Chevron dinámico y elegante -------------------- */
.franja91-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background: var(--color-de-fondo-solido);

    /* Capas de chevron con gradiente y transparencia */
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.06) 0 10px,
            transparent 10px 20px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.06) 0 10px,
            transparent 10px 20px),
        linear-gradient(120deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2),
            var(--color-gradiente-3),
            var(--color-gradiente-4));

    background-blend-mode: overlay;
    background-size: 60px 60px;

    /* Efecto blur suave para dar profundidad */
    backdrop-filter: blur(2px);

    /* Animación sutil del patrón */
    animation: franja91Chevron 15s linear infinite;
}

@keyframes franja91Chevron {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    50% {
        background-position: 30px 30px, -30px -30px, 0 0;
    }

    100% {
        background-position: 0 0, 0 0, 0 0;
    }
}

/* -------------------- FRANJA 92 - Tiny cross dots -------------------- */
/* -------------------- FRANJA 92 - Premium textured cross -------------------- */
.franja92-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, var(--color-gradiente-1, #f5f5f5), var(--color-gradiente-2, #e0e0e0), var(--color-gradiente-3, #d0d0d0), var(--color-gradiente-4, #f0f0f0));
    background-size: 10px 10px, 10px 10px, 100% 100%;
    background-blend-mode: multiply;
    border-radius: 8px;
    /* opción para suavizar bordes y dar un look premium */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.03);
    /* sutil profundidad */
}

/* -------------------- FRANJA 93 - Asymmetric peak -------------------- */
.franja93-contenido {
    height: var(--altura_del_espacio);
    background: linear-gradient(180deg, var(--color-gradiente-1, #f5f5f5), var(--color-gradiente-2, #e0e0e0), var(--color-gradiente-3, #d0d0d0), var(--color-de-fondo-solido));
    clip-path: path('M0,0 H1440 Q1080,120 720,80 Q360,40 0,120 V100% H0 Z');
}

/* -------------------- FRANJA 94 - Radial micro texture -------------------- */
/* -------------------- FRANJA 94 - Professional premium texture -------------------- */
.franja94-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background: linear-gradient(135deg,
            var(--color-gradiente-1) 0%,
            var(--color-gradiente-2) 25%,
            var(--color-gradiente-3) 50%,
            var(--color-gradiente-4) 75%,
            var(--color-de-fondo-solido) 100%);
    overflow: hidden;
}

/* Overlay de microtextura */
.franja94-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.7;
    pointer-events: none;
}

/* Resaltos de luz suaves animados */
.franja94-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08), transparent 60%);
    filter: blur(25px);
    animation: franja94Shimmer 15s linear infinite;
    pointer-events: none;
}

/* Animación sutil de luz */
@keyframes franja94Shimmer {
    0% {
        transform: translateX(-20%) translateY(-10%);
    }

    50% {
        transform: translateX(20%) translateY(10%);
    }

    100% {
        transform: translateX(-20%) translateY(-10%);
    }
}

/* -------------------- FRANJA 95 - Premium layered waves -------------------- */
.franja95-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background: var(--color-de-fondo-solido);
    overflow: hidden;
}

/* Onda principal con gradiente suave */
.franja95-contenido::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle at 30% 40%, var(--color-gradiente-1), transparent 40%);
    opacity: 0.5;
    transform: rotate(-15deg);
}

/* Segunda onda superpuesta para dar profundidad */
.franja95-contenido::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle at 70% 60%, var(--color-gradiente-2), transparent 35%);
    opacity: 0.4;
    transform: rotate(10deg);
    filter: blur(30px);
}

/* -------------------- FRANJA 96 - Thin horizontal stripes -------------------- */
.franja96-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background: var(--color-de-fondo-solido);
    overflow: hidden;
}

/* Capas de rayas finas */
.franja96-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.05) 0 4px,
            rgba(0, 0, 0, 0.02) 4px 8px);
    opacity: 0.6;
    pointer-events: none;
}

/* Luz sutil para dar profundidad */
.franja96-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), transparent 50%, rgba(0, 0, 0, 0.02));
    pointer-events: none;
}

/* -------------------- FRANJA 97 - Diagonal glass notch -------------------- */
/* -------------------- FRANJA 97 - Premium diagonal wave -------------------- */
.franja97-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2) 50%, var(--color-gradiente-3));
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

/* Efecto de luz diagonal */
.franja97-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* Textura sutil de puntos */
.franja97-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 10px 10px;
    pointer-events: none;
}

/* -------------------- FRANJA 98 - Soft gradient mesh -------------------- */
.franja98-contenido {
    height: var(--altura_del_espacio);
    position: relative;
    background-image:
        linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2)),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.03), transparent 50%);
    background-blend-mode: overlay;
    opacity: 0.98;
    overflow: hidden;
}

/* Textura muy sutil de puntos finos */
.franja98-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 10px 10px;
    pointer-events: none;
}

/* Luz suave para dar profundidad y “aire” */
.franja98-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

/* -------------------- FRANJA 99 - Large organic shadow -------------------- */
.franja99-contenido {
    position: relative;
    height: var(--altura_del_espacio);
    background: linear-gradient(135deg, var(--color-gradiente-1), var(--color-gradiente-2) 50%, var(--color-gradiente-3), var(--color-gradiente-4));
    overflow: hidden;
}

/* Halo difuso para profundidad */
.franja99-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.08), transparent 35%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.06), transparent 30%);
    filter: blur(50px);
    pointer-events: none;
}

/* Líneas diagonales sutiles para textura */
.franja99-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.02) 0 6px,
            transparent 6px 20px);
    pointer-events: none;
}

/* -------------------- FRANJA 100 - Gradient band + complex pattern -------------------- */
/* -------------------- FRANJA 100 - Premium diagonal mesh -------------------- */
.franja100-contenido {
    position: relative;
    height: var(--altura_del_espacio);
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2) 40%, var(--color-gradiente-3) 70%, var(--color-gradiente-4));
    overflow: hidden;
}

/* Textura diagonal fina */
.franja100-contenido::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(60deg,
            rgba(255, 255, 255, 0.03) 0 6px,
            transparent 6px 18px);
    opacity: 0.6;
    pointer-events: none;
}

/* Halo difuso para profundidad */
.franja100-contenido::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.05), transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.04), transparent 30%);
    filter: blur(40px);
    pointer-events: none;
}

/* -------------------- Utility: ensure wrappers stretch and content uses margins -------------------- */
[class^="franja"]-wrapper {
    width: 100%;
    display: block
}

[class^="franja"]-contenido {
    width: calc(100% - var(--margen_izquierdo, 0px) - var(--margen_derecho, 0px));
    margin-left: var(--margen_izquierdo);
    margin-right: var(--margen_derecho);
}


/* ====================================================
   BANNER 1 — BASE GENERAL
==================================================== */
.banner1-wrapper {
    --altura_del_banner: 360px;

    padding-left: var(--margen_izquierdo);

    width: 100%;
    height: var(--altura_del_banner);
    padding: 0;
    position: relative;
    overflow: hidden;
    background: var(--color-de-fondo-solido);


    display: flex;
    align-items: center;
    justify-content: center;
}

/* ====================================================
   GRID INTERNO
==================================================== */
.banner1-inner {
    width: 100%;
    max-width: 1180px;
    height: 100%;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    padding: 32px;
    box-sizing: border-box;
}

/* ====================================================
   COLUMNA IZQUIERDA (TEXTO)
==================================================== */
.banner1-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding-right: 12px;
    text-align: var(--text_align);

}

.banner1-left h2 {


    font-size: clamp(1.4rem, 2.5vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

/* Título */
.banner1-title {


    margin: 0;
    line-height: 1.2;


}


/* Sub */
.banner1-sub {
    font-size: clamp(16px, 2vw, 22px);
    margin: 0;
    opacity: 0.85;
    color: var(--color_texto_subtitulo_principal);
    font-weight: 600;
}

/* Parrafo */
.banner1-parrafo {
    font-size: clamp(14px, 1.5vw, 18px);
    margin: 0;
    max-width: 60ch;
    line-height: 1.45;
    color: var(--color_texto_parrafo_general);
}

/* ====================================================
   BOTÓN — diseño premium
==================================================== */
.banner1-actions {
    margin-top: 12px;
}

.banner1-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color_texto_boton_principal);

    background: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));

    border-radius: var(--border_radius_boton);
    text-decoration: none;

    transition: 0.25s ease;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
}

.banner1-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* ====================================================
   ICONOS — estilo elegante, modernizado
==================================================== */
.banner1-icons {
    margin-top: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.banner1-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    /* fondo dinámico pero elegante */
    background: rgba(0, 0, 0, 0.06);

    /* color dinámico real */
    color: var(--color-contraste);

    backdrop-filter: blur(6px);
    transition: 0.2s ease;
    font-size: 20px;
}

.banner1-icon:hover {
    transform: translateY(-2px) scale(1.05);
    background: rgba(0, 0, 0, 0.12);
}

/* ====================================================
   MEDIA DERECHA (video / imagen)
==================================================== */
.banner1-media {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--border_radius_boton);
    position: relative;
}

.banner1-image,
.banner1-video,
.banner1-iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ====================================================
   SHAPES DECORATIVOS
==================================================== */
.banner1-shape {
    position: absolute;
    opacity: 0.14;
    filter: blur(40px);
}

.banner1-shape--1 {
    width: 32%;
    height: 38%;
    top: -10%;
    left: -8%;
    background: var(--color-gradiente-2);
}

.banner1-shape--2 {
    width: 30%;
    height: 35%;
    bottom: -10%;
    right: -10%;
    background: var(--color-gradiente-4);
}

/* ====================================================
   RESPONSIVE
==================================================== */
@media (max-width: 860px) {
    .banner1-inner {
        grid-template-columns: 1fr;
        padding: 22px;
        gap: 24px;
    }

    .banner1-wrapper {
        height: auto;
        padding: 28px 0;
    }

    .banner1-media {
        height: 240px;
    }
}



/* ====================================================
   BANNER 2 — Estética profesional FINAL
   ==================================================== */
.banner2-wrapper {
    --altura_del_banner: 300px;



    width: 100%;
    height: var(--altura_del_banner);
    position: relative;
    overflow: hidden;


    background: var(--color-de-fondo-solido);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==============================
   LAYOUT INTERNO
============================== */
.banner2-inner {
    width: 100%;
    max-width: 1300px;
    height: 100%;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 32px;

    padding: 32px;
    box-sizing: border-box;
    align-items: center;
}

/* ==============================
   MEDIA IZQUIERDA
============================== */
.banner2-media {
    width: 100%;
    height: 100%;
    border-radius: 0.8rem;
    overflow: hidden;
    position: relative;
}

.banner2-img,
.banner2-video,
.banner2-iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner2-media-deco {
    background: linear-gradient(135deg,
            var(--color-gradiente-3),
            var(--color-gradiente-4));
}

/* ==============================
   CONTENIDO
============================== */
.banner2-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* MÁS AIRE PARA UN LOOK PREMIUM */
    gap: 14px;

    /* alineación limpia y profesional */
    padding-right: 14px;
    z-index: 2;
    text-align: var(--text_align);
}

/* TÍTULO */
.banner2-title {
    margin: 0;
    font-size: clamp(1.4rem, 3.5vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    line-height: 1.1;



}

/* SUBTÍTULO */
.banner2-sub {
    margin: 0;
    font-size: clamp(16px, 2.1vw, 22px);
    font-weight: 500;
    opacity: 0.95;
    line-height: 1.25;
    color: var(--color_texto_subtitulo_principal);
}

/* ==============================
   BOTÓN — CTA PRO VERSION
============================== */
.banner2-cta {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 32px;
    border-radius: var(--border_radius_boton);

    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.4px;

    text-decoration: none;
    color: var(--color_texto_boton_principal);

    background: linear-gradient(90deg,
            var(--color-gradiente-1),
            var(--color-gradiente-2));

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.15),
        inset 0 0 12px rgba(255, 255, 255, 0.18);

    backdrop-filter: blur(4px);
    transition: 0.28s ease;
}

.banner2-cta:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.22),
        inset 0 0 14px rgba(255, 255, 255, 0.25);
}


/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 860px) {
    .banner2-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 28px;
    }

    .banner2-wrapper {
        height: auto;
        padding: 26px 0;
    }

    .banner2-media {
        height: 240px;
    }

    .banner2-content {
        padding-right: 0;
        text-align: center;
        align-items: center;
    }
}

/* ===========================================
   BANNER 3 — Publicitario PRO (<250px)
=========================================== */

.banner3-wrapper {
    width: 100%;
    background: var(--color-de-fondo-solido);
    font-family: var(--fuente-principal, "Inter", sans-serif);
    border-top: 4px solid var(--color-contraste);
    border-bottom: 4px solid var(--color-contraste);
    padding: 0;
}

.banner3-inner {
    max-width: 1250px;
    margin: auto;
    padding: 14px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 240px;
    /* 👈 Control absoluto */
}


/* ===========================================
   TOP — 2 imágenes con presencia
=========================================== */

.banner3-top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    height: 105px;
}

.banner3-imgbox {
    width: 100%;
    height: 100%;
    border-radius: var(--border_radius_boton);
    overflow: hidden;
    position: relative;
    background: #e8e8e8;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}

.banner3-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ===========================================
   BOTTOM — TITULOS CENTRADOS Y JERARQUÍA REAL
=========================================== */

.banner3-bottom {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 16px;
    height: 110px;
}


/* BLOQUE IZQUIERDO — TÍTULO CENTRADO */
.banner3-left {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    text-align: center;
}

.banner3-title {
    font-size: clamp(1.4rem, 2vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
    line-height: 1.1;

}


/* BLOQUE DERECHO — subtítulo + texto */
.banner3-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 0;
}


/* SUBTÍTULO — centrado también */
.banner3-sub {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--color_texto_subtitulo_principal);
}


/* PARRAFO — limpio, equilibrado */
.banner3-text {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.banner3-text p {
    font-size: 0.90rem;
    line-height: 1.30;
    margin: 0;
    color: var(--color_texto_parrafo_general);
    text-align: center;
    max-height: 3.7em;
    overflow: hidden;
    padding: 0 4px;
}


/* ===========================
   BANNER 4 — Hero Split (imagen derecha)
   Altura recomendada: 220px–250px (por defecto 240px)
   Usa variables globales para colores y radius
   =========================== */

/* ===========================================
   BANNER 4 — Hero Split Mejorado (Compacto <250px)
=========================================== */

.banner4-wrapper {
    width: 100%;
    background: var(--color-de-fondo-solido);
    padding: 0;
    box-sizing: border-box;
    border-top: 4px solid var(--color-contraste);
    border-bottom: 4px solid var(--color-contraste);
    font-family: var(--fuente-principal, "Inter", sans-serif);


}

.banner4-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 20px;
    align-items: center;
    height: var(--altura_del_espacio, 240px);
    box-sizing: border-box;
    height: 200px;
}

/* LEFT: título + subtítulo + CTA */
.banner4-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* centrado verticalmente, alineado a la izquierda */
    gap: 8px;
    min-height: calc(var(--altura_del_espacio, 240px) - 20px);


}

.banner4-title {
    margin: 0;
    font-size: clamp(1.4rem, 2vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    line-height: 1.1;


}

.banner4-sub {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-subtitulo);
    margin: 0;
}

/* CTA: destacado, profesional */
.banner4-actions {
    margin-top: 6px;
}

.banner4-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: var(--border_radius_boton, 12px);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color_texto_boton_principal);
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.banner4-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

/* RIGHT: imagen compacta */
.banner4-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.banner4-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--border_radius_boton, 12px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* fallback decorative block */
.banner4-image.fallback {
    background: linear-gradient(135deg, var(--color-gradiente-3), var(--color-gradiente-4));
    min-height: calc(var(--altura_del_espacio, 240px) - 8px);
}

/* MOBILE: apilar y centrar */
@media (max-width: 880px) {
    .banner4-inner {
        grid-template-columns: 1fr;
        height: auto;
        padding: 14px;
        gap: 12px;
    }

    .banner4-right {
        order: -1;
    }

    .banner4-image {
        width: 100%;
        height: 180px;
    }

    .banner4-left {
        align-items: center;
        text-align: center;
    }

    .banner4-title {
        font-size: clamp(18px, 4vw, 24px);
    }
}

@media (max-width: 420px) {
    .banner4-image {
        height: 150px;
    }

    .banner4-cta {
        padding: 9px 16px;
        font-size: 0.9rem;
    }

    .banner4-title {
        font-size: 18px;
    }
}




/* ===========================================
   BANNER 5 — Imagen mini + Copy centrado
   Altura: 110px, responsive y profesional
=========================================== */

.banner5-wrapper {
    width: 100%;
    background: var(--color-de-fondo-solido);
    padding: 6px 12px;
    border-top: 3px solid var(--color-contraste);
    border-bottom: 3px solid var(--color-contraste);
    font-family: var(--fuente-principal, "Inter", sans-serif);
    box-sizing: border-box;
    transition: background 0.3s ease;
}

.banner5-wrapper:hover {
    background: var(--color-gradiente-1);
    color: var(--color-contraste);
    /* sutil efecto hover */
}

.banner5-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 110px;
    padding: 0 12px;
    box-sizing: border-box;
}

/* Imagen mini cuadrada */
.banner5-image {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: calc(var(--border_radius_boton, 12px));
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banner5-image:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

/* Texto centrado vertical y horizontal */
.banner5-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 6px;

}

/* Título */
.banner5-text h3 {
    margin: 0;
    font-size: clamp(1.4rem, 3.5rem, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    line-height: 1.2;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.banner5-text h3:hover {
    transform: scale(1.05);

}

/* ================================
   RESPONSIVE
================================ */

/* Tablets: imagen y texto más compactos */
@media (max-width: 900px) {
    .banner5-inner {
        gap: 10px;
        padding: 0 10px;
    }

    .banner5-image {
        width: 90px;
        height: 90px;
    }

    .banner5-text h3 {
        font-size: clamp(14px, 2.5vw, 20px);
    }
}

/* Móviles: apila la imagen arriba del texto */
@media (max-width: 600px) {
    .banner5-inner {
        flex-direction: column;
        height: auto;
        gap: 6px;
        padding: 8px 6px;
    }

    .banner5-image {
        width: 80px;
        height: 80px;
    }

    .banner5-text {
        justify-content: center;
        font-size: clamp(1.4rem, 2vw, var(--font_size_title));
        color: var(--color_texto_titulo_general);
        font-weight: var(--font_weight_title);
        letter-spacing: var(--letter_spacing_title);
    }

    .banner5-text h3 {
        font-size: 16px;
    }
}


/* ===========================================
   BANNER 6 — Video thumbnail + micro-texto (PRO)
   Altura compacta: 220px
=========================================== */

.banner6-wrapper {
    width: 100%;
    background: var(--color-de-fondo-solido);
    padding: 12px 16px;
    border-top: 3px solid var(--color-contraste);
    border-bottom: 3px solid var(--color-contraste);
    font-family: var(--fuente-principal, "Inter", sans-serif);
    box-sizing: border-box;
    position: relative;
}

.banner6-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    align-items: center;
    height: 220px;
}

/* VIDEO THUMBNAIL */
.banner6-video {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    background: #000;
    transition: transform .2s ease, box-shadow .2s ease;
}

.banner6-video:hover {
    transform: scale(1.03);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}

.banner6-video iframe,
.banner6-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay degradado elegante */
.banner6-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
    pointer-events: none;
    border-radius: var(--border_radius_boton, 12px);
}

/* Play icon centrado */
.banner6-video .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.8rem;
    color: #fff;
    pointer-events: none;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* TEXTO + CTA */
.banner6-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 4px 0;
}

.banner6-sub {
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    margin: 0;
    color: var(--color_texto_titulo_general);
    line-height: 1.3;
}

/* Botón CTA rectangular profesional */
.banner6-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    /* ancho flexible según contenido */
    height: 44px;
    /* altura proporcional al texto */
    border-radius: var(--border_radius_boton);
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2));
    color: var(--color_texto_boton_principal);
    font-size: 1rem;
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
    white-space: nowrap;
}

.banner6-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .banner6-inner {
        grid-template-columns: 1fr;
        height: auto;
    }

    .banner6-video {
        height: 180px;
    }

    .banner6-text {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .banner6-video {
        height: 150px;
    }

    .banner6-sub {
        font-size: 15px;
    }

    btitulo principal .banner6-cta {
        height: 40px;
        font-size: 0.95rem;
        padding: 0 12px;
    }
}

.banner6-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    /* más respirable */
    padding: 4px 0;
}

.banner6-sub {
    font-size: clamp(1.4rem, 3.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;

    line-height: 1.3;
    text-align: var(--text_align);
}

.banner6-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    /* ancho proporcional */
    height: 36px;
    /* proporcional al título */
    border-radius: var(--border_radius_boton);
    background: linear-gradient(90deg, var(--color-gradiente-1), var(--color-gradiente-2));
    color: var(--color_texto_boton_principal);
    font-size: 0.95rem;
    /* coherente con altura del botón */
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
    white-space: nowrap;
}

.banner6-cta:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25);
}



/* ===========================================
   BANNER 7 — Tarjeta de producto
   Altura adaptable, compacta y profesional
=========================================== */

/* ===========================================
   BANNER 7 — Tarjeta de producto (Profesional)
   Imagen izquierda + título/subtitulo + botón
=========================================== */
.banner7-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}

.banner7-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    background-color: var(--color-de-fondo-solido, #ffffff);
    border-radius: 20px;
    /* más moderno */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    /* sombra ligera profesional */
    padding: 16px 20px;
    max-width: 1200px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banner7-inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.banner7-image {
    width: 140px;
    /* ligeramente más grande para mejor equilibrio */
    height: 140px;
    object-fit: cover;
    border-radius: 16px;
    flex-shrink: 0;
}

.banner7-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.banner7-title {
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    /* escalable */
    font-weight: 700;
    color: var(--color_texto_titulo_general, #2993cc);
    margin: 0;
}

.banner7-subtitle {
    font-size: clamp(0.95rem, 1vw, 1.1rem);
    color: var(--color_texto_subtitulo_principal, #39E4A5);
    margin: 0;
    line-height: 1.4;
}

.banner7-cta {
    margin-top: 8px;
    padding: 8px 16px;
    background: linear-gradient(90deg, var(--color-gradiente-1, #f21818), var(--color-gradiente-2, #f57d7d));
    color: var(--color-texto-boton-principal, #39E4A5);
    border: none;
    border-radius: var(--border_radius_boton);
    /* ligeramente más grande para armonía */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    align-self: flex-start;
}

.banner7-cta:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner7-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .banner7-image {
        width: 120px;
        height: 120px;
    }

    .banner7-cta {
        align-self: center;
    }
}


/* ===========================================
   BANNER 8 — Banner de confianza
   Fila de iconos circulares + micro-texto
=========================================== */
.banner8-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
    border-top: 4px solid var(--color-contraste);
    border-bottom: 4px solid var(--color-contraste);
}

.banner8-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    background-color: var(--color-de-fondo-solido, #fff);
    padding: 16px;
}

.banner8-icons {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.banner8-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: var(--color-gradiente-1, #39E4A5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color_texto_titulo_general, #fff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease;
    cursor: default;
}

.banner8-icon:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    background-color: var(--color-gradiente-2, #f57d7d);
}

.banner8-icon i {
    font-size: 2rem;
}

/* Texto explicativo */
.banner8-text {
    font-size: 1rem;
    color: var(--color_texto_parrafo_general, #555);
    text-align: center;
    max-width: 800px;
    line-height: 1.5;
    font-weight: 500;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .banner8-icons {
        gap: 18px;
    }

    .banner8-icon {
        width: 80px;
        height: 80px;
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .banner8-inner {
        gap: 16px;
        padding: 12px;
    }

    .banner8-icon {
        width: 70px;
        height: 70px;
        font-size: 1.6rem;
    }

    .banner8-text {
        font-size: 0.95rem;
        max-width: 95%;
    }
}

@media (max-width: 480px) {
    .banner8-icons {
        gap: 14px;
    }

    .banner8-icon {
        width: 60px;
        height: 60px;
        font-size: 1.4rem;
    }

    .banner8-text {
        font-size: 0.9rem;
    }
}

/* ===========================================
   BANNER 9 — Split gradient
   Texto sobre gradiente + CTA outline
=========================================== */
.banner9-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: var(--color-gradiente-global, linear-gradient(90deg, #f21818, #f57d7d));

}

.banner9-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 1200px;
    text-align: center;
    height: 210px;
    /* altura compacta */
    padding: 16px;
    box-sizing: border-box;

}

.banner9-title {
    font-size: clamp(1.4rem, 3.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
}

.banner9-subtitle {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: var(--color_texto_subtitulo_principal, #fff);
    margin: 0;
    line-height: 1.4;
}

.banner9-cta {
    margin-top: 8px;
    padding: 8px 18px;
    border: 2px solid var(--color_fondo_boton_principal, #fff);
    border-radius: var(--border_radius_boton);
    color: var(--color_texto_boton_principal, #fff);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.banner9-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner9-inner {
        height: auto;
        padding: 12px;
    }

    .banner9-title {
        font-size: 1.6rem;
    }

    .banner9-subtitle {
        font-size: 1rem;
    }

    .banner9-cta {
        padding: 6px 14px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .banner9-title {
        font-size: 1.4rem;
    }

    .banner9-subtitle {
        font-size: 0.95rem;
    }

    .banner9-cta {
        padding: 5px 12px;
        font-size: 0.85rem;
    }
}


/* ===========================================
   BANNER 10 — Listicle compacto
   3 bullets con iconos + título
=========================================== */
.banner10-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
    text-align: var(--text_align);
}

.banner10-inner {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--color-de-fondo-solido, #fff);
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.banner10-title {
    font-size: clamp(1.4rem, 3.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0 0 8px 0;
}

.banner10-bullets {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.banner10-bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: var(--color_texto_parrafo_general, #555);
}

.banner10-bullet i {
    font-size: 1.2rem;
    color: var(--color-gradiente-1, #f21818);
    flex-shrink: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner10-inner {
        padding: 12px;
    }

    .banner10-title {
        font-size: 1.3rem;
    }

    .banner10-bullet {
        font-size: 0.95rem;
    }

    .banner10-bullet i {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .banner10-title {
        font-size: 1.2rem;
    }

    .banner10-bullet {
        font-size: 0.9rem;
    }

    .banner10-bullet i {
        font-size: 1rem;
    }
}



/* ===========================================
   BANNER 11 — Panorámica con overlay y CTA flotante
=========================================== */
.banner11-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 220px;
    border: 3px solid var(--color-contraste);
    border-radius: 17px;
    /* altura compacta */
}

.banner11-image {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
}

.banner11-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    border-radius: 16px;
}

.banner11-content {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--color_texto_titulo_general, #fff);

}

.banner11-title {
    font-size: clamp(1.4rem, 2.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
    text-align: var(--text_align);
}

.banner11-cta {
    padding: 8px 16px;
    background: linear-gradient(90deg, var(--color-gradiente-1, #f21818), var(--color-gradiente-2, #f57d7d));
    color: var(--color_texto_boton_principal, #fff);
    font-weight: 600;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    display: inline-block;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    width: 30rem;
    text-align: center;
}

.banner11-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner11-wrapper {
        height: 180px;
    }

    .banner11-title {
        font-size: 1.3rem;
    }

    .banner11-cta {
        padding: 6px 12px;
        font-size: 0.95rem;
    }

    .banner11-content {
        right: 12px;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .banner11-wrapper {
        height: 150px;
    }

    .banner11-title {
        font-size: 1.2rem;
    }

    .banner11-cta {
        padding: 5px 10px;
        font-size: 0.9rem;
        width: 10rem;
    }
}


/* ===========================================
   BANNER 12 — Duo imágenes + copy centrado (PRO)
=========================================== */
.banner12-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner12-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    /* más espacio entre imágenes y copy */
    max-width: 1200px;
    width: 100%;
    padding: 16px 24px;
    border-radius: 20px;
    /* más elegante */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    /* sombra más profesional */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner12-inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.banner12-images {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* más separación entre las dos imágenes */
    flex-shrink: 0;
}

.banner12-img {
    width: 190px;
    height: 120px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banner12-img:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.banner12-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.banner12-title {
    font-size: clamp(1.4rem, 3.5vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
    text-align: var(--text_align);
    line-height: 1.3;
}

.banner12-cta {
    padding: 10px 20px;
    /* más compacto y visualmente equilibrado */
    background: linear-gradient(90deg, var(--color-gradiente-1, #f21818), var(--color-gradiente-2, #f57d7d));
    color: var(--color_texto_boton_principal, #fff);
    border: none;
    width: 30rem;
    border-radius: var(--border_radius_boton);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform .18s ease, box-shadow .18s ease;
}

.banner12-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .banner12-inner {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 16px;
    }

    .banner12-images {
        flex-direction: row;
        gap: 16px;
        margin-bottom: 16px;
    }

    .banner12-img {
        width: 100px;
        height: 100px;
    }

    .banner12-title {
        font-size: 1.4rem;
    }

    .banner12-cta {
        font-size: 0.95rem;
        padding: 8px 16px;
        width: 10rem;
    }
}

@media (max-width: 576px) {
    .banner12-inner {
        gap: 16px;
    }

    .banner12-images {
        gap: 12px;
    }

    .banner12-img {
        width: 80px;
        height: 80px;
    }

    .banner12-title {
        font-size: 1.2rem;
    }

    .banner12-cta {
        font-size: 0.9rem;
        padding: 6px 12px;
    }
}


/* ===========================================
   BANNER 13 — Carousel mini (estático)
=========================================== */
.banner13-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner13-inner {
    width: 100%;
    max-width: 300px;
    /* compacto */
    height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.12);
    /* borde fino */
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    /* sombra ligera */
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--color-gradiente-1, #fff);
}

.banner13-inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.banner13-slide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px;
}

.banner13-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
}

.banner13-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color_texto_titulo_general, #333);
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

/* RESPONSIVE */
@media (max-width: 576px) {
    .banner13-inner {
        max-width: 250px;
        height: 200px;
    }

    .banner13-image {
        height: 140px;
    }

    .banner13-title {
        font-size: 0.95rem;
    }
}

/* ===========================================
   BANNER 14 — Carousel premium mini
   Varias slides visibles en fila
=========================================== */
.banner14-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner14-inner {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.banner14-inner::-webkit-scrollbar {
    height: 6px;
}

.banner14-inner::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.banner14-slide {
    flex: 0 0 auto;
    width: 180px;
    height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    background-color: var(--color-de-fondo-solido, #fff);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banner14-slide:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.banner14-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
}

.banner14-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color_texto_titulo_general, #333);
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner14-slide {
        width: 140px;
        height: 200px;
    }

    .banner14-image {
        height: 120px;
    }

    .banner14-title {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .banner14-slide {
        width: 120px;
        height: 180px;
    }

    .banner14-image {
        height: 100px;
    }

    .banner14-title {
        font-size: 0.9rem;
    }
}

/* ===========================================
   BANNER 15 — Noticia: fecha + headline + CTA
=========================================== */
.banner15-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);

}

.banner15-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 800px;
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    background-color: var(--color-de-fondo-solido, #fff);

}

.banner15-date {
    font-size: 0.85rem;
    color: var(--color_texto_subtitulo_principal, #555);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.banner15-title {
    font-size: clamp(1.4rem, 2.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
    line-height: 1.2;
}

.banner15-excerpt {
    font-size: 1rem;
    color: var(--color_texto_parrafo_general, #555);
    margin: 0;
    line-height: 1.4;
}

.banner15-cta {
    margin-top: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color_texto_boton_principal, #fff);
    background: linear-gradient(90deg, var(--color-gradiente-1, #f21818), var(--color-gradiente-2, #f57d7d));
    padding: 6px 12px;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.banner15-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner15-title {
        font-size: 1.4rem;
    }

    .banner15-excerpt {
        font-size: 0.95rem;
    }

    .banner15-cta {
        font-size: 0.85rem;
        padding: 5px 10px;
    }
}

@media (max-width: 480px) {
    .banner15-title {
        font-size: 1.2rem;
    }

    .banner15-excerpt {
        font-size: 0.9rem;
    }

    .banner15-cta {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
}


/* ===========================================
   BANNER 16 — Badge left: imagen circular + texto
=========================================== */
.banner16-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);

}

.banner16-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 800px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 16px;
    background-color: var(--color-de-fondo-solido, #fff);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banner16-inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.banner16-badge {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease;
}

.banner16-badge:hover {
    transform: translateY(-3px);
}

.banner16-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.banner16-title {
    font-size: clamp(1.4rem, 2.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
}

.banner16-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color_texto_subtitulo_principal, #555);
    margin: 0;
    line-height: 1.3;
    text-transform: uppercase;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner16-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .banner16-badge {
        width: 90px;
        height: 90px;
    }

    .banner16-text {
        gap: 4px;
    }

    .banner16-title {
        font-size: 1.2rem;
    }

    .banner16-subtitle {
        font-size: 0.95rem;
    }
}


/* ===========================================
   BANNER 17 — Carrusel de badges
=========================================== */
.banner17-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner17-inner {
    display: flex;

    gap: 16px;
    max-width: 800px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 16px;
    background-color: var(--color-de-fondo-solido, #fff);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: var(--text_align);
}

.banner17-inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.banner17-badge {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease;
}

.banner17-badge:hover {
    transform: translateY(-3px);
}

.banner17-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.banner17-title {
    font-size: clamp(1.4rem, 2.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
}

.banner17-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color_texto_subtitulo_principal, #555);
    margin: 0;
    line-height: 1.3;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner17-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .banner17-badge {
        width: 90px;
        height: 90px;
    }

    .banner17-text {
        gap: 4px;
    }

    .banner17-title {
        font-size: 1.2rem;
    }

    .banner17-subtitle {
        font-size: 0.95rem;
    }
}

/* ===========================================
   BANNER 18 — Versión Profesional Premium
=========================================== */
.banner18-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 50px 20px;
    box-sizing: border-box;
    border-radius: 18px;
    position: relative;
    overflow: hidden;

    /* Fondo diagonal suave y elegante */
    background: linear-gradient(135deg,
            var(--color-gradiente-1, #4A6CF7),
            var(--color-gradiente-2, #6CD4FF));
}

/* Textura sutil profesional */
.banner18-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

.banner18-content {
    text-align: center;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.banner18-title {
    font-size: clamp(1.4rem, 2.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    margin: 0;
}

/* Botón profesional corporativo */
.banner18-cta {
    padding: 12px 26px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--color_texto_boton_principal);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border_radius_boton);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.banner18-cta:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 768px) {
    .banner18-wrapper {
        padding: 35px 16px;
    }

    .banner18-title {
        font-size: 1.6rem;
    }

    .banner18-cta {
        font-size: 0.95rem;
        padding: 10px 20px;
    }
}

/* ===========================================
   BANNER 19 — Glass Card
=========================================== */
.banner19-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 16px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    position: relative;

    overflow: hidden;
}

.banner19-glass-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px 32px;
    text-align: center;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.banner19-title {
    font-size: clamp(1.4rem, 2vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
}

.banner19-cta {
    padding: 10px 24px;
    background: linear-gradient(90deg, var(--color-gradiente-1, #f21818), var(--color-gradiente-2, #f57d7d));
    color: var(--color_texto_boton_principal, #fff);
    border: none;
    border-radius: var(--border_radius_boton);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.banner19-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner19-wrapper {
        padding: 32px 12px;
    }

    .banner19-glass-card {
        padding: 16px 24px;
    }

    .banner19-title {
        font-size: 1.5rem;
    }

    .banner19-cta {
        font-size: 0.95rem;
        padding: 8px 16px;
    }
}


/* ===========================================
   BANNER 20 — Imagen completa
=========================================== */
.banner20-wrapper {
    width: 100%;
    height: 300px;
    /* altura por defecto, puede ajustarse */
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banner20-wrapper:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner20-wrapper {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .banner20-wrapper {
        height: 180px;
    }
}


/* ===========================================
   BANNER 21 — Carrusel automático de imágenes
=========================================== */
.banner21-wrapper {
    width: 100%;
    height: 400px;
    /* ajustar según diseño */
    position: relative;
    overflow: hidden;
}

.banner21-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.banner21-slide.active {
    opacity: 1;
}

/* ===========================================
   BANNER 22 — 2-column micro: precio + imagen (Profesional)
=========================================== */
.banner22-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner22-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    width: 100%;
    gap: 24px;
    padding: 20px 24px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    background-color: var(--color-gradiente-1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.banner22-inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.banner22-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: var(--text_align);
}

.banner22-title {
    font-size: clamp(1.4rem, 2vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
}

.banner22-price {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color_texto_parrafo_general, #111);
    margin: 0;
}

.banner22-image img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.banner22-image img:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .banner22-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 16px 20px;
    }

    .banner22-text {
        gap: 4px;
    }

    .banner22-title {
        font-size: 1.2rem;
    }

    .banner22-price {
        font-size: 1.8rem;
    }

    .banner22-image img {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 600px) {
    .banner22-title {
        font-size: 1.1rem;
    }

    .banner22-price {
        font-size: 1.6rem;
    }

    .banner22-image img {
        width: 100px;
        height: 100px;
    }
}

/* ===========================================
   BANNER 23 — Hero con Subtítulo + Pill CTA
=========================================== */
.banner23-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 50px 20px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
    border-top: 6px solid var(--color-contraste);
    border-bottom: 6px solid var(--color-contraste);
}

.banner23-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 900px;
    width: 100%;
    text-align: center;
}

/* === Título === */
.banner23-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color_texto_titulo_general, #222);
    margin: 0;
}

/* === Subtítulo === */
.banner23-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--color_texto_subtitulo_principal, #555);
    max-width: 700px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
}

/* === BOTÓN === */
.banner23-cta {
    padding: 14px 40px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color_texto_boton_principal, #fff);
    background: linear-gradient(90deg,
            var(--color-gradiente-1, #f21818),
            var(--color-gradiente-2, #f57d7d));
    border: none;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
}

.banner23-cta:hover {
    transform: scale(1.05);
    box-shadow:
        inset 0 -3px 8px rgba(0, 0, 0, 0.2),
        0 6px 16px rgba(0, 0, 0, 0.18);
    opacity: 0.95;
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    .banner23-inner {
        gap: 16px;
    }

    .banner23-cta {
        padding: 12px 30px;
        font-size: 1rem;
    }
}

/* ===========================================
   BANNER 24 — Overlay cards apiladas con Bootstrap Icons
=========================================== */
.banner24-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner24-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
    width: 100%;
}

.banner24-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background-color: var(--color-gradiente-1);
    border-radius: var(--border_radius_boton);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease;

}

.banner24-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.banner24-icon i {
    font-size: 2.5rem;
    color: var(--color-gradiente-2, #555);
}

.banner24-title {
    font-size: clamp(1.4rem, 2vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;

}

/* RESPONSIVE */
@media (max-width: 600px) {
    .banner24-inner {
        gap: 12px;
    }

    .banner24-card {
        flex-direction: row;
        padding: 10px 12px;
        gap: 10px;
    }

    .banner24-icon i {
        font-size: 1.3rem;
    }

    .banner24-title {
        font-size: 0.95rem;
    }
}

/* ===========================================
   BANNER 25 — Stacked headline + small subtitle
=========================================== */
.banner25-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
    min-height: 200px;
    /* compacto */
    max-height: 230px;
}

.banner25-inner {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 6px;
}

.banner25-title {

    font-size: clamp(1.4rem, 3.5vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;

}

.banner25-subtitle {
    font-size: 2rem;
    font-weight: 400;
    color: var(--color_texto_parrafo_general, #555);
    margin: 0;

}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner25-title {
        font-size: 1.6rem;
    }

    .banner25-subtitle {
        font-size: 0.9rem;
    }
}


/* ===========================================
   BANNER 26 — Text left / video right (silent loop)
=========================================== */
.banner26-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner26-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    width: 100%;

}

.banner26-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;

}

.banner26-title {
    font-size: clamp(1.4rem, 3.5vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
}

.banner26-cta {
    padding: 8px 20px;
    background: linear-gradient(90deg, var(--color-gradiente-1, #f21818), var(--color-gradiente-2, #f57d7d));
    color: var(--color_texto_boton_principal, #fff);
    border: none;
    border-radius: var(--border_radius_boton);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: fit-content;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
}

.banner26-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.banner26-video {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    max-height: 220px;
}

.banner26-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner26-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    /* overlay tenue para legibilidad */
    pointer-events: none;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner26-inner {
        flex-direction: column;
        gap: 16px;
    }

    .banner26-video {
        max-height: 180px;
        width: 100%;
    }

    .banner26-title {
        font-size: 1.4rem;
    }

    .banner26-cta {
        align-self: center;
    }
}


/* ===========================================
   BANNER 27 — Round image + CTA debajo
=========================================== */
.banner27-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner27-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    width: 100%;

}

.banner27-image img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease;
}

.banner27-image img:hover {
    transform: translateY(-3px);
}

.banner27-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.banner27-title {
    font-size: clamp(1.4rem, 3.5vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
}

.banner27-cta {
    padding: 8px 20px;
    background: linear-gradient(90deg, var(--color-gradiente-1, #f21818), var(--color-gradiente-2, #f57d7d));
    color: var(--color_texto_boton_principal, #fff);
    border: none;
    border-radius: var(--border_radius_boton);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: clamp(1.4rem, 80vw, 30rem);
    text-align: center;
}

.banner27-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner27-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .banner27-image img {
        width: 120px;
        height: 120px;
    }

    .banner27-cta {
        align-self: center;
    }
}


/* ===========================================
   BANNER 28 — Diagonal split + mini image
=========================================== */
.banner28-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
}

.banner28-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-gradiente-1, #f21818), var(--color-gradiente-2, #f57d7d));
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    z-index: 0;
}

.banner28-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    width: 100%;
    z-index: 1;
}

.banner28-title {
    font-size: clamp(1.4rem, 4vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
}

.banner28-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner28-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .banner28-img {
        width: 80px;
        height: 80px;
    }

    .banner28-title {
        font-size: 1.4rem;
    }
}


/* ===========================================
   BANNER 29 — Badge countdown (simulado)
=========================================== */
.banner29-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
    border-top: 6px ridge var(--color-contraste);
    border-bottom: 6px groove var(--color-contraste);
}

.banner29-content {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 800px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.banner29-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color_texto_titulo_general, #333);
    margin: 0;
}

.banner29-badge {
    background-color: var(--color-gradiente-3, #f21818);
    color: var(--color_texto_subtitulo_principal);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
}

.banner29-cta {
    padding: 8px 16px;
    background: linear-gradient(90deg, var(--color-gradiente-1, #f21818), var(--color-gradiente-2, #f57d7d));
    color: var(--color_texto_boton_principal, #fff);
    border: none;
    border-radius: var(--border_radius_boton);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.banner29-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .banner29-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }
}


/* ===========================================
   BANNER 30 — Versión profesional minimalista
=========================================== */
.banner30-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;

    background-color: var(--color-de-fondo-solido, #fff);
    /* Textura suave ultra profesional */
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.04) 0%, transparent 70%);


}

.banner30-copy {
    text-align: center;
    max-width: 760px;
    padding: 10px 20px;
}

.banner30-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color_texto_titulo_general, #222);
    letter-spacing: -0.5px;
    margin: 0 0 10px;
}

.banner30-subtitle {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--color_texto_subtitulo_principal, #555);
    line-height: 1.55;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner30-wrapper {
        padding: 28px 16px;
    }

    .banner30-title {
        font-size: 1.6rem;
    }

    .banner30-subtitle {
        font-size: 1.05rem;
    }
}

@media (max-width: 480px) {
    .banner30-title {
        font-size: 1.4rem;
    }

    .banner30-subtitle {
        font-size: 1rem;
    }
}

/* ===========================================
   BANNER 31 — Micro grid profesional premium
=========================================== */
.banner31-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 28px 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #f9f9f9);
}

.banner31-grid {
    display: flex;
    gap: 28px;
    max-width: 520px;
    justify-content: center;
}

.banner31-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.banner31-item:hover {
    transform: translateY(-6px);
}

/* Imagen estilo premium */
.banner31-img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.06);

    /* sombra suave estilo Apple */
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);

    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

/* Hover elegante */
.banner31-img:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 3px 8px rgba(0, 0, 0, 0.06);
}

/* Texto mucho más profesional */
.banner31-caption {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color_texto_titulo_general, #222);
    margin-top: 10px;
    line-height: 1.45;

    text-transform: none;
    letter-spacing: 0.2px;

    /* sombra super sutil */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .banner31-grid {
        flex-direction: column;
        gap: 18px;
        max-width: 260px;
    }

    .banner31-img {
        width: 78px;
        height: 78px;
    }

    .banner31-caption {
        font-size: 0.9rem;
    }
}

/* ===========================================
   BANNER 32 — CTA bar: texto corto + botón grande
=========================================== */
.banner32-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 14px 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
    border-top: 6px ridge var(--color-contraste);
    border-bottom: 6px ridge var(--color-contraste);

}

.banner32-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    width: 100%;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner32-title {
    font-size: clamp(1.4rem, 2.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
}

.banner32-cta {
    display: inline-block;
    width: 45%;
    min-width: 140px;
    text-align: center;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-texto-boton-principal, #fff);
    background: linear-gradient(90deg, var(--color-gradiente-1, #f21818), var(--color-gradiente-2, #f57d7d));
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.banner32-cta:hover {
    transform: scale(1.03);
    box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.15);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner32-inner {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    .banner32-cta {
        width: 70%;
    }
}



/* ===========================================
   BANNER 33 — Logo + headline (marca)
=========================================== */
.banner33-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner33-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 800px;
    width: 100%;
}

.banner33-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
}

.banner33-title {
    font-size: clamp(1.4rem, 2.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .banner33-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .banner33-logo {
        width: 50px;
        height: 50px;
    }

    .banner33-title {
        font-size: 1.2rem;
    }
}



/* ===========================================
   BANNER 34 — Split masonry: imagen pequeña encima, texto abajo
=========================================== */
.banner34-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner34-card {
    display: flex;
    flex-direction: column;
    max-width: 280px;
    background-color: var(--color-de-fondo-solido, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.banner34-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.banner34-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.banner34-text {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.banner34-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color_texto_titulo_general, #111);
    margin: 0;
}

.banner34-paragraph {
    font-size: 0.95rem;
    color: var(--color_texto_parrafo_general, #555);
    margin: 0;
    line-height: 1.3;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .banner34-card {
        max-width: 90%;
    }

    .banner34-img {
        height: 140px;
    }

    .banner34-title {
        font-size: 1.1rem;
    }

    .banner34-paragraph {
        font-size: 0.9rem;
    }
}


/* ===========================================
   BANNER 35 — Radial focus: spotlight detrás del texto
=========================================== */
.banner35-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 16px;
    box-sizing: border-box;
    background: radial-gradient(circle at center, var(--color-gradiente-1, #f57d7d) 0%, var(--color-de-fondo-solido, #fff) 70%);
    text-align: center;
}

.banner35-content {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.banner35-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color_texto_titulo_general, #111);
    margin: 0;
}

.banner35-subtitle {
    font-size: 1.1rem;
    color: var(--color_texto_subtitulo_principal, #555);
    margin: 0;
    line-height: 1.4;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner35-wrapper {
        padding: 32px 12px;
    }

    .banner35-title {
        font-size: 1.6rem;
    }

    .banner35-subtitle {
        font-size: 1rem;
    }
}


/* ===========================================
   BANNER 36 — Testimonial Profesional Premium
=========================================== */
.banner36-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 32px 16px;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #f7f7f7);
    border-radius: 12px;
}

/* Card central elegante */
.banner36-content {
    background: var(--color-gradiente-1);
    padding: 28px 24px;
    border-radius: 18px;
    max-width: 480px;
    width: 100%;
    text-align: center;

    /* sombra suave premium */
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.06),
        0 6px 18px rgba(0, 0, 0, 0.04);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* Foto profesional */
.banner36-img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.06);

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.06);

    transition: transform 0.25s ease;
}

.banner36-img:hover {
    transform: scale(1.04);
}

/* Comillas decorativas */
.banner36-quote {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color_texto_parrafo_general, #444);
    margin: 0;
    font-weight: 500;
    font-style: italic;
    position: relative;
    max-width: 360px;
}

/* Comillas visuales elegantes */
.banner36-quote::before,
.banner36-quote::after {
    font-size: 1.8rem;
    opacity: 0.15;
    position: absolute;
    font-family: serif;
}

.banner36-quote::before {
    content: "“";
    left: -16px;
    top: -8px;
}

.banner36-quote::after {
    content: "”";
    right: -16px;
    bottom: -8px;
}

/* Nombre del autor (si lo usas luego) */
.banner36-author {
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .banner36-content {
        padding: 22px 18px;
        border-radius: 12px;
    }

    .banner36-img {
        width: 68px;
        height: 68px;
    }

    .banner36-quote {
        font-size: 0.95rem;
    }
}

/* ===========================================
   BANNER 37 — Mapa embed (versión compacta)
=========================================== */
.banner37-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 0;
    /* menos padding */
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
    border-radius: 12px;
}

.banner37-map-container {
    width: 100%;
    max-width: 600px;
    /* ancho máximo reducido */
    position: relative;
    padding-bottom: 45%;
    /* altura más compacta, sigue siendo 16:9 aproximado */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.banner37-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===========================================
   BANNER 38 — Carrusel de videos
=========================================== */
.banner38-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 12px 0;
    box-sizing: border-box;
    background-color: var(--color-de-fondo-solido, #fff);
}

.banner38-carousel {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 240px;
    /* altura consistente */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner38-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.banner38-slide.active {
    opacity: 1;
}

.banner38-slide iframe,
.banner38-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

/* ===========================================
   BANNER 39 — Testimonios múltiples
=========================================== */

.banner39-wrapper {
    width: 100%;
    padding: 24px 16px;
    background: var(--color-de-fondo-solido, #fafafa);
    display: flex;
    justify-content: center;
}

.banner39-inner {
    width: 100%;
    max-width: 900px;
    display: flex;
    gap: 24px;
    border-top: 2px solid rgba(0, 0, 0, 0.08);
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    padding: 20px 0;
    justify-content: space-between;
}

.banner39-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 12px;
}

.banner39-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform .2s ease;
}

.banner39-photo:hover {
    transform: scale(1.05);
}

.banner39-text {
    font-size: 0.95rem;
    color: var(--color_texto_parrafo_general, #444);
    font-style: italic;
    line-height: 1.4;
    max-width: 260px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner39-inner {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .banner39-photo {
        width: 70px;
        height: 70px;
    }

    .banner39-text {
        font-size: 0.9rem;
    }
}

/* ===========================================
   BANNER 40 — Alerta / Urgencia
=========================================== */

.banner40-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    background: var(--color-de-fondo-solido, #fff);
    padding: 16px;
}

.banner40-inner {
    width: 100%;
    max-width: 850px;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--color-gradiente-1, #ff4f4f);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--color_texto_subtitulo_principal, #fff);
}

.banner40-badge {
    background: rgba(255, 255, 255, 0.22);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.banner40-title {
    flex: 1;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 10px;
    color: var(--color_texto_titulo_general);
    text-align: left;
}

.banner40-cta {
    background: var(--color_texto_boton_principal, #fff);
    color: var(--color_fondo_boton_principal, #fff);
    padding: 10px 20px;
    border-radius: var(--border_radius_boton);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: transform .15s ease;
}

.banner40-cta:hover {
    transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 700px) {
    .banner40-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 20px;
    }

    .banner40-title {
        font-size: 1.1rem;
        text-align: center;
    }

    .banner40-cta {
        width: 100%;
        max-width: 220px;
    }
}


/* ===========================================
   BANNER 41 — Lista dinámica / Listicle grande
=========================================== */

.banner41-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0;
    background: var(--color-de-fondo-solido, #f8f8f8);
}

.banner41-container {
    width: 100%;
    max-width: 1100px;
    padding: 0 20px;
    text-align: center;
}

.banner41-title {
    font-size: clamp(1.4rem, 3.5vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    margin-bottom: 32px;

}

.banner41-items {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.banner41-item {
    width: 260px;
    background: var(--color-gradiente-3, #333);
    padding: 22px 18px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.25s ease;
}

.banner41-item:hover {
    transform: translateY(-4px);
}

/* icono circular */
.banner41-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--color-gradiente-2, #333);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 12px auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.banner41-icon i {
    font-size: 1.9rem;
    color: var(--color-gradiente-1, #333);
}

.banner41-text {
    margin-top: 8px;
    font-size: 0.95rem;
    color: var(--color_texto_parrafo_general, #333);
    line-height: 1.4;
}


/* ===========================================
   BANNER 42 — Imagen full-width + overlay múltiple
=========================================== */

.banner42-wrapper {
    width: 100%;
    height: 360px;
    position: relative;
    overflow: hidden;
}

.banner42-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.banner42-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.3s ease;
}

.banner42-slide.active {
    opacity: 1;
}

/* Overlay degradado */
.banner42-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.2));
    z-index: 1;
}

/* ===========================================
   CONTENIDO CENTRADO CON GLASS DETRÁS DEL TEXTO
=========================================== */

.banner42-content {
    position: relative;
    z-index: 3;
    /* Sobre overlay */
    width: fit-content;
    /* No ocupa todo el ancho */
    max-width: 80%;
    padding: 20px 30px;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;

    /* 🎯 GLASS EFFECT — pequeño, elegante y no tapa la imagen */
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.banner42-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color_texto_titulo_general);
}

.banner42-text {
    font-size: 1.1rem;
    max-width: 700px;
    line-height: 1.4;
    opacity: 0.95;
    color: var(--color_texto_parrafo_general);
}

/* ===========================================
   BANNER 43 — Tarjeta de Producto Expandido
=========================================== */

.banner43-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

/* TARJETA PRINCIPAL */
.banner43-card {
    display: flex;
    flex-direction: row;
    /* horizontal */
    align-items: center;
    gap: 30px;

    width: 90%;
    max-width: 1100px;
    padding: 28px;

    background: var(--color-de-fondo-solido, #ffffff);
    border-radius: 20px;
    /* entre 12–24px */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

/* IMAGEN */
.banner43-img {
    width: 40%;
    max-height: 320px;
    border-radius: 16px;
    object-fit: cover;
}

/* CONTENIDO */
.banner43-content {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 12px;

}

/* TÍTULO */
.banner43-title {
    font-size: clamp(1.4rem, 2.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
    text-align: var(--text_align);
}

/* SUBTÍTULO */
.banner43-subtitle {
    font-size: 1.3rem;
    font-weight: 500;
    opacity: 0.85;
    color: var(--color_texto_subtitulo_principal, #444);
    text-align: var(--text_align);
}

/* DESCRIPCIÓN */
.banner43-text {
    line-height: 1.45;
    font-size: 1rem;
    opacity: 0.9;
    color: var(--color_texto_parrafo_general, #333);
    max-width: 600px;
    text-align: var(--text_align);
}

/* BOTÓN */
.banner43-button {
    margin-top: 10px;
    display: inline-block;
    padding: 12px 26px;
    text-align: center;

    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton, #fff);
    font-weight: 600;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.banner43-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* ===========================================
   RESPONSIVE — MODO VERTICAL
=========================================== */

@media (max-width: 900px) {
    .banner43-card {
        flex-direction: column;
        text-align: center;
    }

    .banner43-img {
        width: 100%;
        max-height: 260px;
    }

    .banner43-content {
        width: 100%;
    }
}


/* ===========================================
   BANNER 44 — Carrusel de logos / marcas
=========================================== */

.banner44-wrapper {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;

}

.banner44-carousel {
    width: 100%;
    height: 100%;
    position: relative;
}

.banner44-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .9s ease;
}

.banner44-slide.active {
    opacity: 1;
}

.banner44-logo {
    max-height: 450px;
    width: 500px;
    object-fit: contain;
    padding: 10px 20px;
    filter: brightness(1);
    border-radius: var(--border_radius_boton);
}

/* ===========================================
   BANNER 45 — Feature Highlight
=========================================== */

.banner45-wrapper {
    width: 100%;
    padding: 40px 20px;
    background: var(--color-de-fondo-solido, #f6f6f6);
    display: flex;
    justify-content: center;
}

.banner45-inner {
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
}

.banner45-item {
    text-align: center;
    padding: 22px 18px;
    border-radius: 16px;
    background: var(--color-gradiente-3, #f6f6f6);
    backdrop-filter: blur(6px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.banner45-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.banner45-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--color-gradiente-1, #4c6ef5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-gradiente-2);
    font-size: 28px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.banner45-title {
    margin: 10px 0 6px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color_texto_titulo_general, #222);
}

.banner45-text {
    font-size: .95rem;
    line-height: 1.45;
    color: var(--color_texto_parrafo_general, #444);
    opacity: 0.9;
}


/* ===========================================
   BANNER 46 — Video + overlay CTA flotante
=========================================== */

.banner46-wrapper {
    width: 100%;
    height: 330px;
    position: relative;
    overflow: hidden;

}

.banner46-video-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.banner46-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay suave */
.banner46-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(2px);
    z-index: 2;
}

/* Caja de CTA flotante */
.banner46-cta-box {
    position: absolute;
    z-index: 3;
    bottom: 22px;
    right: 22px;
    padding: 18px 26px;
    background: var(--color-de-fondo-solido, #4c6ef5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    max-width: 320px;
    text-align: right;
}

.banner46-title {
    color: var(--color_texto_titulo_general, #4c6ef5);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Botón tipo pill */
.banner46-btn {
    display: inline-block;
    background: var(--color_fondo_boton_principal, #4c6ef5);
    color: white;
    padding: 10px 20px;
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: transform .2s ease;
}

.banner46-btn:hover {
    transform: translateY(-2px);
}


/* ===========================
⭐ Banner 47 – Sección Blog / Noticias
=========================== */

.banner47-blog-wrapper {
    width: 100%;
    padding: 40px 0;
    background: var(--color-de-fondo-solido, #f8f8f8);
    /* fondo neutro */
    display: flex;
    justify-content: center;
    text-align: var(--text_align);
}

.banner47-card {
    background: var(--color-gradiente-1, #f8f8f8);
    width: min(90%, 700px);
    padding: 30px 25px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-family: "Inter", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 12px;

}

.banner47-titulo {
    font-size: clamp(1.4rem, 2.8vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);

    margin: 0;
}

.banner47-parrafo {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general, #555);
    margin: 0;
}

.banner47-cta {
    margin-top: 10px;
    font-size: 0.9rem;
    display: inline-block;
    padding: 10px 18px;
    background: var(--color_fondo_boton_principal, #0066ff);
    color: var(--color_texto_boton_principal, #0066ff);
    border-radius: var(--border_radius_boton);
    text-decoration: none;
    font-weight: 600;
    width: fit-content;
    transition: 0.25s ease;
    text-align: var(--text_align);
}

.banner47-cta:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.banner47-boton {
    text-align: var(--text_align);
}

/* ===========================
📱 Responsive
=========================== */

@media (max-width: 600px) {
    .banner47-card {
        padding: 22px 20px;
        border-radius: 14px;
    }

    .banner47-titulo {
        font-size: 1.5rem;
    }

    .banner47-parrafo {
        font-size: 0.95rem;
    }

    .banner47-cta {
        font-size: 0.85rem;
        padding: 9px 16px;
    }
}

/* ======================================
⭐ Banner 48 – Combo carrusel imagen + texto (MEJORADO)
====================================== */

.banner48-wrapper {
    width: 100%;
    min-height: 340px;
    height: auto;
    position: relative;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
}

/* Fondo */
.banner48-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.banner48-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Diagonal */
.banner48-diagonal {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.38) 40%,
            rgba(0, 0, 0, 0.15) 100%);
    clip-path: polygon(0 0, 70% 0, 50% 100%, 0% 100%);
    z-index: 2;
}

/* Tarjeta */
.banner48-card {
    position: relative;
    z-index: 3;
    background: var(--color-de-fondo-solido);
    padding: 26px 28px;
    max-width: 420px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(7px);
    color: var(--color_texto_parrafo_general);
    animation: fadeIn 0.7s ease;
    text-align: var(--text_align);
}

banner48-content-icon {
    text-align: var(--text_align);
}

.banner48-title {
    font-size: 1.55rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color_texto_titulo_general)
}

.banner48-text {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 14px;
}

/* Iconos en fila */
.banner48-icons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--color-gradiente-2);
    justify-content: center;
}

.banner48-icon {
    width: 60px;
    height: 60px;
    font-size: 2.5rem;
    background: var(--color-gradiente-1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform .25s ease;
}

.banner48-icon:hover {
    transform: translateY(-4px);
}

.banner48-icon img {
    width: 55%;
    height: 55%;
    object-fit: contain;
}

/* 📱 Tablets */
@media (max-width: 992px) {
    .banner48-wrapper {
        padding: 30px 0;
        min-height: 420px;
    }

    .banner48-diagonal {
        clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
    }

    .banner48-card {
        max-width: 80%;
    }
}

/* 📱📱 Móviles */
@media (max-width: 768px) {
    .banner48-wrapper {
        min-height: 500px;
        align-items: flex-end;
        padding: 0 0 26px 0;

    }

    .banner48-diagonal {
        clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.35) 40%,
                rgba(0, 0, 0, 0.15) 100%);
    }

    .banner48-card {
        max-width: 92%;
        padding: 22px 24px;
    }

    .banner48-title {
        font-size: 1.35rem;
    }

    .banner48-text {
        font-size: 0.95rem;
    }

    .banner48-icon {
        width: 42px;
        height: 42px;
    }
}

/* 📱 Mini teléfonos */
@media (max-width: 480px) {
    .banner48-wrapper {
        min-height: 540px;
    }

    .banner48-card {
        max-width: 94%;
        padding: 20px;
    }

    .banner48-title {
        font-size: 1.2rem;
    }

    .banner48-text {
        font-size: 0.9rem;
    }
}


/* Animación */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================
   BANNER 49 — Imagen + texto lateral (NO slider)
=========================================== */

.banner49-wrapper {
    width: 100%;
    padding: 30px 0;
    display: flex;
    justify-content: center;
    text-align: var(--text_align);
}

.banner49-card {
    width: 100%;
    max-width: 1100px;
    background: var(--color-de-fondo-solido);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.banner49-image {
    width: 45%;
    height: 280px;
}

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

/* CONTENIDO */
.banner49-content {
    width: 55%;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner49-title {
    font-size: clamp(1.4rem, 1.85vw, var(--font_size_title));
    color: var(--color_texto_titulo_general);
    font-weight: var(--font_weight_title);
    letter-spacing: var(--letter_spacing_title);
}

.banner49-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color_texto_parrafo_general, #444);
    margin-bottom: 20px;
}

/* BOTÓN */
.banner49-btn {
    display: inline-block;
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
    padding: 12px 22px;
    border-radius: var(--border_radius_boton);
    font-size: 0.95rem;
    text-decoration: none;
    transition: 0.3s ease;
    text-align: center;
}

.banner49-btn:hover {
    opacity: .8;
    color: var(--color-contraste);
    font-size: 1.2rem;
    border: 1px groove var(--color-contraste);

}

/* RESPONSIVE */
@media (max-width: 850px) {
    .banner49-card {
        flex-direction: column;
    }

    .banner49-image {
        width: 100%;
        height: 220px;
    }

    .banner49-content {
        width: 100%;
        padding: 22px;
    }
}


/* ===========================================
   BANNER 50 — Grid inspirado en Banner 48
   VERSION RESPONSIVE MEJORADA
=========================================== */

.banner50-wrapper {
    width: 100%;
    padding: 30px 0;
    display: flex;
    justify-content: center;
    background-color: var(--color-de-fondo-solido);
}

.banner50-grid {
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    padding: 0 16px;
}

.banner50-card {
    background: var(--color-gradiente-global);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.banner50-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.banner50-img-box {
    width: 100%;
    height: 180px;
}

.banner50-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner50-content {
    padding: 16px 18px;
}

.banner50-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color_texto_titulo_general);
}

.banner50-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color_texto_parrafo_general, #444);
}


/* =====================================================
   📱 Responsive — Celulares pequeños (≤ 480px)
===================================================== */
@media (max-width: 480px) {

    .banner50-wrapper {
        padding: 20px 0;
    }

    .banner50-grid {
        grid-template-columns: 1fr;
        /* tarjetas una debajo de otra */
        gap: 16px;
        padding: 0 12px;
    }

    .banner50-img-box {
        height: 160px;
        /* más compacto */
    }

    .banner50-title {
        font-size: 1.05rem;
    }

    .banner50-text {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}


/* =====================================================
   📱 Tablets pequeñas (481px — 768px)
===================================================== */
@media (min-width: 481px) and (max-width: 768px) {

    .banner50-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px;
    }

    .banner50-img-box {
        height: 170px;
    }

    .banner50-title {
        font-size: 1.15rem;
    }
}


/* =====================================================
   💻 Tablets grandes / pantallas medianas (769px — 1024px)
===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

    .banner50-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
    }

    .banner50-img-box {
        height: 190px;
    }
}


/* =====================================================
   🖥️ Pantallas grandes (≥ 1200px)
===================================================== */
@media (min-width: 1200px) {

    .banner50-img-box {
        height: 200px;
    }

    .banner50-title {
        font-size: 1.25rem;
    }

    .banner50-text {
        font-size: 1rem;
    }
}



/* =====================================
   BANNER 51 – Carrusel Promoción dinámica
===================================== */

.banner51-wrapper {
    width: 100%;
    position: relative;
    padding: 25px 0;
    display: flex;
    justify-content: center;
}

.banner51-carousel {
    width: 100%;
    max-width: 1180px;
    height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.banner51-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .6s ease;
}

.banner51-slide.active {
    opacity: 1;
}

.banner51-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Botón dentro del slide */
.banner51-btn {
    position: absolute;
    bottom: 18px;
    left: 18px;
    padding: 10px 22px;
    background: var(--boton_principal_fondo, #ffffffee);
    color: var(--boton_principal_texto, #000);
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    backdrop-filter: blur(3px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    transition: transform .2s ease, box-shadow .2s ease;
}

.banner51-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
}

/* Controles */
.banner51-prev,
.banner51-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffffc9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 100px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: background .2s ease, transform .2s ease;
}

.banner51-prev:hover,
.banner51-next:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.05);
}

.banner51-prev {
    left: calc((100% - 1180px) / 2);
}

.banner51-next {
    right: calc((100% - 1180px) / 2);
}

/* Responsive */
@media (max-width: 768px) {
    .banner51-carousel {
        height: 200px;
    }

    .banner51-btn {
        padding: 8px 18px;
        font-size: 0.85rem;
        bottom: 12px;
        left: 12px;
    }

    .banner51-prev,
    .banner51-next {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .banner51-carousel {
        height: 170px;
    }
}



/* =========================================
   PLAN 1
========================================= */
.plan1-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: var(--margen_superior) 10px var(--margen_inferior);
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-sizing: border-box;
    background: var(--color-de-fondo-solido);
}

/* =========================================
   GRID DE PLANES
========================================= */
.plan1-planes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

/* =========================================
   PLAN CARD BASE
========================================= */
.plan1-plan-card {
    background: var(--color-de-fondo-solido);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
    transition: transform .35s ease, box-shadow .35s ease;
    border: 2px solid transparent;
}

/* ==== Hover con efecto pro ===== */
.plan1-plan-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.18);
}

/* Imagen */
.plan1-plan-img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
}

/* Títulos */
.plan1-plan-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 8px;
    text-align: center;
    color: var(--color_texto_titulo_general);
}

/* Descripción */
.plan1-plan-desc {
    font-size: 14px;
    color: var(--color_texto_parrafo_general);
    margin-bottom: 15px;
    text-align: center;
}

/* Lista */
.plan1-plan-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan1-plan-card ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-gradiente-4);
    font-size: 14px;
    color: var(--color-parrafo-1, #444);
}

.plan1-plan-card ul li:last-child {
    border-bottom: none;
}

/* =========================================
   COLORES PERSONALIZADOS POR PLAN
========================================= */

/* 🟥 PLAN 1 */
.plan1-plan1 {
    border-color: var(--color-gradiente-1);
}

.plan1-plan1 h3 {
    color: var(--color_texto_titulo_general);
}

.plan1-plan1 .plan1-plan-desc {
    color: var(--color_texto_parrafo_general);
}

/* 🟦 PLAN 2 */
.plan1-plan2 {
    border-color: var(--color-gradiente-3);
}

.plan1-plan2 h3 {
    color: var(--color-contraste);
}

.plan1-plan2 .plan1-plan-desc {
    color: var(--color_texto_subtitulo_principal);
}

/* 🟪 PLAN 3 */
.plan1-plan3 {
    border-color: var(--color-gradiente-2);
}

.plan1-plan3 h3 {
    color: var(--color_texto_titulo_general);
}

.plan1-plan3 .plan1-plan-desc {
    color: var(--color_texto_parrafo_general);
}



/* ====== WRAPPER GENERAL ====== */
/* ===========================
   🌍 PLAN 2 — WRAPPER GENERAL
=========================== */
.plan2-wrapper {
    width: 100%;
    padding: var(--margen_superior) 10px var(--margen_inferior);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-de-fondo-solido);

    box-sizing: border-box;
}

/* ===========================
   🔳 GRID
=========================== */
.plan2-planes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 30px;
    max-width: 1200px;
    width: 100%;
}

/* ===========================
   🃏 CARD BASE
=========================== */
.plan2-plan-card {
    background: var(--color-de-fondo-solido);
    border-radius: 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.plan2-plan-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

/* ===========================
   ⭐ PLAN 2 DESTACADO
=========================== */
.plan2-plan2 {
    transform: scale(1.06);
    border: 3px solid var(--color-gradiente-2);
    box-shadow: 0 14px 28px rgba(0, 207, 255, 0.28);
}

.plan2-plan2 .plan2-plan-title {
    color: var(--color-contraste);
}

.plan2-plan2::before {
    content: var(--sub-titulo-texto, "★ Popular");
    /* ← valor por defecto */
    position: absolute;
    top: -12px;
    right: -12px;
    background: var(--color-gradiente-3);
    color: var(--color_texto_subtitulo_principal);
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.20);
}

/* ===========================
   🖼 IMAGEN
=========================== */
.plan2-plan-img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

/* ===========================
   📦 BODY
=========================== */
.plan2-plan-body {
    padding: 20px 22px;
}

.plan2-plan-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color_texto_titulo_general);
}

.plan2-plan-desc {
    margin: 12px 0 18px;
    color: var(--color_texto_parrafo_general);
    font-size: 0.95rem;
    line-height: 1.4rem;
}

/* ===========================
   ✔ FEATURES LIST
=========================== */
.plan2-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.plan2-features li {
    padding: 6px 0;
    color: var(--color-parrafo-1);
    font-size: 0.92rem;
    display: flex;
    align-items: start;
    gap: 6px;
}

.plan2-features li::before {
    content: "✔";
    color: var(--color-gradiente-1);
    font-size: 0.9rem;
}

/* ===========================
   🔘 BOTÓN
=========================== */
.plan2-cta-row {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.plan2-cta {
    flex: 1;
    text-align: center;
    padding: 10px 14px;
    border-radius: var(--border_radius_boton);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
    text-decoration: none;
}

/* Botón primario */
.plan2-cta-primary {
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
}

.plan2-cta-primary:hover {
    filter: brightness(1.1);
}

/* ===========================
   📱 RESPONSIVE
=========================== */
@media (max-width: 768px) {
    .plan2-plan2 {
        transform: scale(1.03);
    }

    .plan2-plan-img {
        height: 160px;
    }
}

@media (max-width: 480px) {
    .plan2-plan2 {
        transform: scale(1);
        border-width: 2px;
    }
}



/* plan 3 */
/* ===========================
🎨 ESTILOS PLAN 3 CON VARIABLES GLOBALES
=========================== */
/* ===========================
🎨 ESTILOS PLAN 3 CON VARIABLES GLOBALES
=========================== */

/* WRAPPER */
.plan3-wrapper {
    width: 100%;
    padding: var(--margen_superior) 10px var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

/* GRID */
.plan3-planes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 28px;
}

/* CARDS */
.plan3-plan-card {
    background: var(--color-gradiente-1);
    border-radius: 2rem;
    padding: 18px;
    border: 1px solid var(--color-gradiente-2);
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.plan3-plan-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .4);
}

/* Imagen */
.plan3-plan-img {
    width: 100%;
    border-radius: 2rem;
    margin-bottom: 16px;
}

/* Títulos */
.plan3-plan-title {
    font-size: 1.4rem;
    color: var(--color_texto_titulo_general);
    margin-bottom: 8px;
}

/* Descripción */
.plan3-plan-desc {
    color: var(--color_texto_parrafo_general);
    font-size: .95rem;
    margin-bottom: 18px;
}

/* Lista */
.plan3-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.plan3-features li {
    color: var(--color-parrafo-1);
    margin-bottom: 8px;
    padding-left: 18px;
    position: relative;
}

.plan3-features li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--color-gradiente-3);
}

/* CTA container */
.plan3-cta-row {
    margin-top: 10px;
}

/* botón base */
.plan3-cta {
    padding: 12px 20px;
    display: inline-block;
    border-radius: var(--border_radius_boton);
    font-weight: 600;
    text-decoration: none;
    color: var(--color_texto_boton_principal);
}

/* botón primario */
.plan3-cta-primary {
    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);
}

/* Badge dinámico */
.plan3-plan2::before {
    content: var(--sub-titulo-texto, "★ Popular");
    position: absolute;
    top: 14px;
    right: -24px;
    background: var(--color-gradiente-4);
    color: var(--color-contraste);
    padding: 6px 30px;
    transform: rotate(45deg);
    font-weight: bold;
    font-size: .75rem;
}



/* ===========================
✨ PLAN 4 ESTILOS — Minimal Premium
=========================== */

/* ===========================
✨ PLAN 4 — Minimal Premium
Compatible 100% con tu HTML
=========================== */

/* WRAPPER GENERAL */
.plan4-wrapper {
    width: 100%;
    padding: var(--margen_superior) 10px var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

/* GRID */
.plan4-planes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

/* CARD BASE */
.plan4-plan-card {
    background: var(--color-gradiente-1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 26px 22px;
    position: relative;
    overflow: hidden;

    /* Estilo distinto al Plan3 */
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .28s ease, box-shadow .28s ease;
}

.plan4-plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .30);
}

/* Imagen */
.plan4-plan-img {
    width: 100%;
    border-radius: var(--border_radius_boton);
    margin-bottom: 18px;
    object-fit: cover;

    /* toque premium */
    filter: brightness(1.05);
}

/* Título */
.plan4-plan-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color_texto_titulo_general);
    margin-bottom: 10px;
}

/* Descripción */
.plan4-plan-desc {
    font-size: 1rem;
    color: var(--color_texto_parrafo_general);
    line-height: 1.55;
    margin-bottom: 20px;
}

/* LISTA */
.plan4-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan4-features li {
    padding-left: 26px;
    margin-bottom: 10px;
    position: relative;
    color: var(--color-parrafo-1);
    font-size: .98rem;
}

/* Check premium circular */
.plan4-features li::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-gradiente-2);
    position: absolute;
    left: 0;
    top: 6px;
}


/* ======================================
🌍 LISTA 1 — ESTÉTICA LIMPIA & EQUILIBRADA
====================================== */

.lista1-wrapper {
    width: 100%;
    padding: var(--margen_superior) 16px var(--margen_inferior);
    background: var(--color-de-fondo-solido);
}

/* UL base */
.lista1-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ITEM */
.lista1-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px;
    margin-bottom: 22px;

    background: var(--color-gradiente-1);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: transform .25s ease, box-shadow .25s ease;
}

.lista1-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

/* Imagen */
.lista1-img {
    width: 110px;
    height: 90px;
    object-fit: cover;
    border-radius: 14px;
    flex-shrink: 0;
}

/* CONTENIDO */
.lista1-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* Título */
.lista1-titulo {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color_texto_titulo_general);
    margin: 0;
    line-height: 1.3;
}

/* Subtítulo */
.lista1-subtitulo {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color_texto_subtitulo_principal);
    margin: 0;
    opacity: 0.9;
}

/* Párrafo */
.lista1-parrafo {
    font-size: 0.95rem;
    color: var(--color_texto_parrafo_general);
    margin: 6px 0 0;
    line-height: 1.55;
}

/* BOTÓN */
.lista1-btn {
    margin-top: 12px;
    display: inline-block;
    padding: 10px 18px;

    background: var(--color_fondo_boton_principal);
    color: var(--color_texto_boton_principal);

    border-radius: var(--border_radius_boton, 10px);
    font-weight: 600;
    font-size: 0.93rem;

    text-decoration: none;
    width: 30rem;
    text-align: center;
    transition: opacity .25s ease, transform .25s ease;
}

.lista1-btn:hover {
    opacity: .9;
    transform: translateY(-2px);
}

/* ======================================
📱 RESPONSIVE — PERFECTO EN MÓVILES
====================================== */
@media (max-width: 768px) {
    .lista1-item {
        flex-direction: column;
        text-align: center;
        padding: 26px;
    }

    .lista1-img {
        width: 100%;
        height: 180px;
        border-radius: 16px;
    }

    .lista1-content {
        align-items: center;
    }

    .lista1-titulo {
        font-size: 1.45rem;
    }

    .lista1-subtitulo {
        font-size: 1.1rem;
    }

    /* BOTÓN */
    .lista1-btn {

        width: 10rem;

    }
}


/* LISTA 2 — estilo independiente */


:root {
    /* LISTA 2 — variables propias basadas en tus colores */
    --lista2-bg: var(--color-de-fondo-solido);
    --lista2-borde: var(--color-gradiente-1);
    --lista2-radius: 14px;
    --lista2-shadow: rgba(0, 0, 0, 0.18);
    --lista2-texto: var(--color_texto_parrafo_general);
    --lista2-subtitulo: var(--color_texto_subtitulo_principal);
    --lista2-img-border: var(--color-gradiente-3);
}

.l

/* ===============================
   LISTA 2 – Versión mejorada
================================== */
.lista2-wrapper {
    padding: 40px 25px;
    background: var(--color-de-fondo-secundario);
}

.lista2-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.lista2-item {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 22px;
    background: var(--color-de-fondo-solido);
    border: 2px solid var(--lista2-borde);
    border-radius: var(--lista2-radius);
    box-shadow: 0 6px 18px var(--lista2-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border .25s ease;
}

.lista2-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    border-color: var(--color-gradiente-4);
}

.lista2-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--lista2-radius);
    border: 3px solid var(--lista2-img-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lista2-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;

}

.lista2-titulo {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: var(--color_texto_titulo_general);
    letter-spacing: 0.5px;
}

.lista2-subtitulo {
    font-size: 1rem;
    color: var(--lista2-subtitulo);
    margin: 0;
    opacity: 0.95;
}

.lista2-parrafo {
    font-size: 1rem;
    color: var(--lista2-texto);
    line-height: 1.55;
    margin-top: 4px;
}


/* 📱 RESPONSIVE */
@media (max-width: 624px) {
    .lista2-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .lista2-img {
        width: 160px;
        height: 160px;
    }

    .lista2-content {
        align-items: center;
    }
}