/* ==============================================
   TEMPLATE CONTENIDO FLEXIBLE - ESTILOS
   ============================================== */

/* Variables CSS para consistencia con el tema */
/* =====================================
   VARIABLES Y COLORES ACTUALIZADOS
   ===================================== */
:root {
    /* Colores principales - Lis Corporate Colors */
    --primary-blue: #1DA7E0; /* Azul claro Lis */
    --primary-blue-gradient: linear-gradient(99.1deg, #1DA7E0 -4.95%, #33CCDD 95.4%);
    --primary-blue-light: rgba(29, 167, 224, 0.1);
    --primary-blue-lighter: rgba(29, 167, 224, 0.05);
    
    /* Gradiente azul para cajas colored - Lis Corporate */
    --blue-gradient: linear-gradient(99.1deg, #1DA7E0 -4.95%, #33CCDD 95.4%);
    
    /* Naranja solo para CTAs */
    --primary-gradient: linear-gradient(98.76deg, #FF7F50 1.99%, #FF7F50 21.31%, #FFB347 56.55%);
    
    /* Colores de texto */
    --text-dark: #002A3A;
    --text-color: #335561;
    --text-light: #666666;
    
    /* Otros colores */
    --background-light: #f8f9fa;
    --border-color: #e9ecef;
    --border-radius: 8px;
    --transition: all 0.3s ease;
    
    /* Tipografía como en el sitio principal */
    --font-primary: "Heebo", sans-serif;
    --font-secondary: "ParalucentLight", sans-serif;
}

/* =====================================
   CONTENEDOR GENERAL
   ===================================== */
.template-contenido-flexible {
    padding: 0;
}

#content-blocks {
    position: relative;
}

/* =====================================
   BLOQUES GENERALES
   ===================================== */
.block-item {
    padding: 80px 0;
    position: relative;
}

.block-item:nth-child(odd) {
    background-color: var(--background-light);
}

/* =====================================
   ESTILOS HERO ESPECÍFICOS
   ===================================== */

/* Restaurar estilos originales del H1 hero */
.template-contenido-flexible .hero-general .header .titulo-hero span {
    font-size: 48px;
}

.template-contenido-flexible .hero-general .header .titulo-hero span.titulo-destacado {
    font-family: "Heebo", sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

@media only screen and (min-width: 767px) {
    .template-contenido-flexible .hero-general .header .titulo-hero span.titulo-destacado {
        font-size: 69px !important;
        line-height: 101px !important;
    }
}

@media only screen and (max-width: 767px) {
    .template-contenido-flexible .hero-general .header .titulo-hero span {
        font-size: 33px !important;
        line-height: 40px !important;
    }
    
    .template-contenido-flexible .hero-general .header .titulo-hero span.titulo-destacado {
        font-size: 40px !important;
        line-height: 59px !important;
    }
}

/* Mejorar el subtítulo del H1 en el hero */
.template-contenido-flexible .hero-general .header .descripcion {
    max-width: 500px;
    margin-top: 25px;
    position: relative;
}

.template-contenido-flexible .hero-general .header .descripcion * {
    font-size: 20px !important;
    line-height: 30px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

/* Añadir una línea decorativa antes del subtítulo */
.template-contenido-flexible .hero-general .header .descripcion::before {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, rgba(255, 127, 80, 0.5) 100%);
    margin-bottom: 15px;
    border-radius: 2px;
}

/* Ajustar subtítulos .pre-titulo span para que coincidan con el diseño original */
.template-contenido-flexible .pre-titulo span {
    font-family: "Heebo", sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.04em;
    color: #99AAB0;
    font-weight: 400;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* =====================================
   AJUSTES DE ESPACIADO PARA FOTO+TEXTO
   ===================================== */

/* Reducir espacio entre header y columnas en bloques foto+texto */
.block-foto_texto .row.align-items-center,
.block-texto_foto .row.align-items-center {
    margin-top: -20px;
}

/* =====================================
   TIPOGRAFÍA GENERAL
   ===================================== */
.block-title {
    font-family: var(--font-secondary); /* ParalucentLight para títulos */
    font-size: 48px;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 30px;
    font-weight: 300; /* ParalucentLight es más ligera */
    text-align: center; /* Desktop: alineación izquierda por defecto */
}

.block-subtitle {
    font-family: var(--font-secondary); /* ParalucentLight para subtítulos */
    font-size: 28px;
    line-height: 1.3;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-weight: 300;
    text-align: center;
}

.block-text {
    font-family: var(--font-primary); /* Heebo para contenido */
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 25px;
    text-align: center;
}

/* =====================================
   TEXTO DESTACADO
   ===================================== */
/* Clase para palabras destacadas en azul */
.text-highlight {
    color: #1DA7E0; /* Azul claro Lis */
    background: linear-gradient(180deg, transparent 65%, rgba(29, 167, 224, 0.22) 65%);
    /* No usar text-decoration para no confundir con links */
}

/* Texto destacado en CTA section */
.block-cta_seccion .text-highlight {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.block-text p {
    margin-bottom: 15px;
}

/* Responsive para container-tarjetas */
@media (max-width: 767px) {
    .block-title {
        font-size: 33px;
        line-height: 40px;
    }
    
    .block-subtitle {
        font-size: 24px;
    }
    
    .block-text {
        font-size: 15px;
    }
    
    /* Container-tarjetas responsive - Cambio a layout vertical en móvil */
    .container-tarjetas .row .col-lg-6 {
        flex: 1 1 100%; /* Una columna en móvil */
        max-width: 100%;
        min-width: auto;
        margin-bottom: 20px;
    }
    
    .container-tarjetas .block-content {
        flex-direction: column; /* Layout vertical en móvil */
        text-align: center;
        gap: 20px;
        margin-bottom: 30px;
        min-height: 200px;
        padding: 25px 20px;
    }
    
    .container-tarjetas .block-icon {
        width: 140px;
        height: 140px;
        align-self: center; /* Centrar el icono */
    }
    
    .container-tarjetas .block-icon svg,
    .container-tarjetas .block-icon img,
    .container-tarjetas .block-icon i {
        width: 90px;
        height: 90px;
    }
    
    .container-tarjetas .block-content-text {
        text-align: center;
    }
    
    .container-tarjetas .block-content:hover::before {
        transform: none; /* Desactivar efecto en móvil */
    }
    
    .container-tarjetas .block-subtitle {
        font-size: 20px;
        text-align: center;
    }
    
    .container-tarjetas .block-text {
        font-size: 15px;
        text-align: center;
    }
}

/* Asegurar que el título principal esté centrado en container-tarjetas */
.container-tarjetas .block-title {
    text-align: center !important;
}

.block-text ul, .block-text ol {
    margin-left: 20px;
    padding-left: 0;
}

.block-text li {
    margin-bottom: 10px;
}

/* =====================================
   IMÁGENES
   ===================================== */
.block-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.block-image img {
    border-radius: var(--border-radius);
    transition: transform var(--transition);
}

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

/* =====================================
   LINKS Y ENLACES
   ===================================== */

/* Links generales en contenido con fondo blanco */
.block-text a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.block-text a:hover {
    color: var(--text-dark);
    text-decoration: underline;
}

/* Links en contenido de tarjetas azules (fondo azul) */
.container-tarjetas .block-content .block-text a {
    color: #002A3A; /* Azul oscuro Lis que contrasta mejor */
    text-decoration: underline;
    text-decoration-color: rgba(0, 42, 58, 0.5); /* Azul corporativo transparente */
    text-decoration-thickness: 2px; /* Línea más gruesa */
    text-underline-offset: 2px;
    font-weight: 600; /* Más peso para destacar */
    transition: var(--transition);
    padding: 2px 4px;
    border-radius: 3px;
}

.container-tarjetas .block-content .block-text a:hover {
    color: #002A3A; /* Azul oscuro Lis para mayor contraste */
    text-decoration-color: rgba(0, 42, 58, 0.8); /* Azul corporativo más opaco en hover */
    text-decoration-thickness: 3px; /* Línea aún más gruesa en hover */
    transform: translateY(-1px);
}

/* Links en FAQs */
.block-faqs .accordion-body a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.block-faqs .accordion-body a:hover {
    color: var(--text-dark);
    text-decoration: underline;
}

/* Links en columnas flexibles */
.columna-texto a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.columna-texto a:hover {
    color: var(--text-dark);
    text-decoration: underline;
}

/* Links en bloques foto+texto - Azul corporativo Lis */
.block-foto_texto .block-text a,
.block-texto_foto .block-text a,
.block-foto_texto .item-text a,
.block-texto_foto .item-text a {
    color: #1DA7E0 !important; /* Azul claro corporativo Lis */
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.block-foto_texto .block-text a:hover,
.block-texto_foto .block-text a:hover,
.block-foto_texto .item-text a:hover,
.block-texto_foto .item-text a:hover {
    color: #002A3A !important; /* Azul oscuro Lis en hover */
    text-decoration: underline;
}

/* =====================================
   BOTONES CTA
   ===================================== */
.block-cta {
    margin-top: 30px;
}

.block-cta a[class^='cta-'] {
    display: inline-block;
    font-size: 24px !important; /* Tamaño de Kit Digital */
    font-weight: 300 !important; /* Peso de Kit Digital */
    padding: 16px 24px 15px !important; /* Padding exacto de Kit Digital */
    margin-right: 16px;
    border-radius: 15px !important; /* Radio de Kit Digital */
    text-decoration: none;
    transition: .65s !important;
}

/* CTA Principal - Estilo exacto de .cta-buttons .cta-solid-primary-after */
.cta-solid-primary-after,
.logos-cta .cta-solid-primary-after {
    /* Estilo exacto de Kit Digital - forzar naranja */
    background: linear-gradient(98.76deg, #FF7F50 1.99%, #FF7F50 21.31%, #FFA06E 56.55%) !important;
    background-color: #FF7F50 !important;
    color: #002A3A !important; /* Color de texto corporativo */
    transition: .65s !important;
}

/* CTA Sticky - mantener texto blanco */
.cta-sticky .cta-solid-primary {
    /* Estilo exacto de Kit Digital - forzar naranja */
    background: linear-gradient(98.76deg, #FF7F50 1.99%, #FF7F50 21.31%, #FFA06E 56.55%) !important;
    background-color: #FF7F50 !important;
    color: white !important; /* Mantener blanco para sticky */
    transition: .65s !important;
}
.cta-solid-primary-after,
.logos-cta .cta-solid-primary-after {
    border-radius: 15px !important; /* Radio de Kit Digital */
    font-size: 24px !important; /* Tamaño de Kit Digital */
    font-weight: 300 !important; /* Peso de Kit Digital */
    padding: 16px 24px 15px !important; /* Padding exacto de Kit Digital */
    color: #002A3A !important; /* Color de texto corporativo */
}

.cta-solid-primary-after:hover,
.logos-cta .cta-solid-primary-after:hover,
.cta-sticky .cta-solid-primary:hover {
    background: #993D1E !important;
    color: #FFFFFF !important; /* Color blanco en hover */
    transition: .65s !important;
}

/* CTA Secundario - Mantener consistencia con estilo principal */
.cta-outline-secondary {
    background: transparent;
    color: #FF7F50 !important;
    border: 2px solid #FFA06E;
    border-radius: 15px !important; /* Radio de Kit Digital */
    font-size: 24px !important; /* Tamaño de Kit Digital */
    font-weight: 300 !important; /* Peso de Kit Digital */
    padding: 16px 24px 15px !important; /* Padding exacto de Kit Digital */
    transition: .65s !important;
}

.cta-outline-secondary:hover {
    border-color: #993D1E;
    color: #993D1E !important;
    transition: .65s !important;
}

/* =====================================
   BLOQUES ESPECÍFICOS
   ===================================== */

/* BLOQUE FOTO + TEXTO / TEXTO + FOTO */
.block-foto_texto,
.block-texto_foto {
    padding: 100px 0;
}

.block-foto_texto .block-content,
.block-texto_foto .block-content {
    padding: 40px;
}

/*.block-foto_texto .block-text,
.block-texto_foto .block-text {
    font-size: 18px;
}*/

/* Estilos especiales para títulos dentro de listas en bloques foto/texto */
.block-foto_texto .block-text ul li:first-child,
.block-texto_foto .block-text ul li:first-child,
.block-foto_texto .block-text ol li:first-child,
.block-texto_foto .block-text ol li:first-child {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px !important;
    line-height: 1.3;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
    display: block;
    list-style: none;
    margin-left: -20px; /* Compensar el padding de la lista */
}

/* Si hay títulos específicos dentro de las listas, destacarlos también */
.block-foto_texto .block-text ul li strong:first-child,
.block-texto_foto .block-text ul li strong:first-child,
.block-foto_texto .block-text ol li strong:first-child,
.block-texto_foto .block-text ol li strong:first-child {
    font-size: 20px;
    color: var(--primary-color);
    display: block;
    margin-bottom: 10px;
}

/* Estilos específicos para elementos <b> en listas dentro de WYSIWYG */
.block-foto_texto .block-text p ul li b,
.block-texto_foto .block-text p ul li b,
.block-foto_texto .block-text p ol li b,
.block-texto_foto .block-text p ol li b {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    margin-bottom: 8px;
    line-height: 1.3;
    border-bottom: 1px solid rgba(255, 127, 80, 0.3);
    padding-bottom: 5px;
}

/* Selector más directo para listas que están directamente en block-text */
.block-foto_texto .block-text ul li b:first-child,
.block-texto_foto .block-text ul li b:first-child,
.block-foto_texto .block-text ol li b:first-child,
.block-texto_foto .block-text ol li b:first-child,
.block-texto_una_columna .block-text ul li b:first-child,
.block-texto_una_columna .block-text ol li b:first-child {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 5px;
    line-height: 1.3;
    border-bottom: 1px solid rgba(255, 127, 80, 0.3);
    padding-bottom: 2px;
}

/* =====================================
   CAMPOS ITEMS EN FOTO/TEXTO
   ===================================== */

/* Nuevos estilos para campos items */
.block-items {
    margin-top: 30px;
}

.item-container {
    margin-bottom: 25px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--primary-color);
}

.item-title {
    font-size: 20px;
    font-weight: 700;
    color: #002A3A;
    margin-bottom: 12px;
    line-height: 1.3;
}

.item-text {
    font-size: 16px;
    line-height: 1.6;
    color: #335561;
}

.item-text p {
    margin-bottom: 12px;
}

.item-text p:last-child {
    margin-bottom: 0;
}

/* BLOQUE UNA COLUMNA */
.block-texto_una_columna {
    padding: 100px 0;
}

.block-texto_una_columna .block-content {
    max-width: 800px;
    margin: 0 auto;
}

/* BLOQUE DOS/TRES COLUMNAS */
.block-texto_dos_columnas,
.block-texto_tres_columnas {
    padding: 80px 0;
}

.block-texto_dos_columnas .block-content,
.block-texto_tres_columnas .block-content {
    padding: 30px;
    height: 100%;
    margin-bottom: 20px; /* Separación entre bloques */
}

/* Estilo especial para container-tarjetas (NUEVO: 2 columnas anchas con icono + contenido) */
.container-tarjetas .row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Separación entre tarjetas */
    justify-content: flex-start; /* Cambiar a flex-start para mejor alineación */
    margin: 0 -15px; /* Mantener márgenes de Bootstrap */
}

.container-tarjetas .row .col-lg-6 {
    flex: 1 1 calc(50% - 15px); /* 2 columnas en desktop */
    max-width: calc(50% - 15px);
    min-width: 350px; /* Ancho mínimo un poco menor */
    margin-bottom: 30px; /* Separación vertical entre filas */
}

/* Si hay exactamente 3 elementos, el tercero se centra */
.container-tarjetas .row .col-lg-6:nth-child(3):last-child {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(50% - 15px);
}

/* Estilo especial para container-tarjetas (layout 2 columnas internas: icono | contenido) */
.container-tarjetas .block-content {
    background: var(--primary-blue-gradient);
    border-radius: 12px;
    padding: 30px;
    color: white;
    height: 100%;
    display: flex;
    flex-direction: row; /* Cambio: layout horizontal */
    align-items: flex-start;
    gap: 25px; /* Separación entre icono y contenido */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    min-height: 200px; /* Altura mínima */
}

/* Columna izquierda: Icono */
.container-tarjetas .block-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    border: none; /* Sin borde */
}

.container-tarjetas .block-icon svg,
.container-tarjetas .block-icon img,
.container-tarjetas .block-icon i {
    width: 120px;
    height: 120px;
    color: white;
    filter: brightness(0) invert(1); /* Asegurar que sea blanco */
}

/* Columna derecha: Contenido */
.container-tarjetas .block-content-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 3;
}

/* Efecto de brillo sutil */
.container-tarjetas .block-content::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 70%
    );
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    transition: transform 0.6s;
}

.container-tarjetas .block-content:hover::before {
    transform: translateX(100%) translateY(100%) rotate(45deg);
}

.container-tarjetas .block-content:hover {
    box-shadow: 
        0px 20px 60px rgba(16, 186, 225, 0.4),
        0px 10px 30px rgba(16, 186, 225, 0.2);
    transform: translateY(-10px) scale(1.02);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.container-tarjetas .block-subtitle {
    color: white;
    font-family: var(--font-secondary);
    font-size: 22px; /* Ligeramente más pequeño */
    font-weight: 700;
    margin-bottom: 15px; /* Menos espacio */
    line-height: 1.3;
    position: relative;
    z-index: 2;
    text-align: left;
}

.container-tarjetas .block-content .block-text {
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--font-primary);
    font-size: 17px; /* Ligeramente más pequeño */
    line-height: 1.6;
    text-align: left;
    position: relative;
    z-index: 2;
    flex-grow: 1;
    margin-bottom: 0;
}

.container-tarjetas .block-content .block-text p {
    margin-bottom: 15px;
}

.container-tarjetas .block-content .block-text p:last-child {
    margin-bottom: 0;
}

/* Icono decorativo opcional */
.container-tarjetas .block-content::after {
    content: '';
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ===================================== 
   CAMPOS COLOR EN CAJAS
   ===================================== */

/* Estilos para only_title - solo el título tiene fondo azul */.container:not(.container-tarjetas) .block-title-colored,
.container:not(.container-tarjetas) .block-subtitle-colored {
    background: var(--blue-gradient) !important;
    color: white !important;
    padding: 10px 15px !important;
    border-radius: 10px 10px 0 0 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    box-shadow: 0 8px 32px rgba(0, 42, 58, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 22px !important; /* Tamaño más pequeño */
    line-height: 1.3 !important;
    min-height: 90px !important;
}

/* CAJAS COLORED - Caja completa con border y sombra alrededor de todo */

/* Contenedor general de la caja colored - ESTE tiene el border y sombra */
.container-azul .block-content-title-colored {
    background: white !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 40px rgba(0, 42, 58, 0.2) !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
}

/* Títulos con fondo azul - SIN border ni sombra */
.container-azul .block-title-colored,
.container-azul .block-subtitle-colored {
    background: var(--blue-gradient) !important;
    color: white !important;
    padding: 25px 30px !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 151px !important; /* Altura mínima fija */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Contenido con fondo blanco - SIN border ni sombra */
.container-azul .block-content-title-colored .block-text {
    background: white !important;
    padding: 30px !important;
    margin: 0 !important;
    color: var(--text-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.container-azul .block-content-title-colored .block-text p {
    color: var(--text-color) !important;
    margin-bottom: 1rem !important;
}

.container-azul .block-content-title-colored .block-text p:last-child {
    margin-bottom: 0 !important;
}

.container:not(.container-tarjetas) .block-content-title-colored .block-text {
    color: #335561 !important;
    background: transparent !important;
    font-family: var(--font-primary) !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

.container:not(.container-tarjetas) .block-content-title-colored .block-text p {
    color: #335561 !important;
}

/* BLOQUE CTA - Cambiar a fondo azul */
.block-cta_seccion {
    background: var(--primary-blue-gradient);
    color: white;
    padding: 100px 0;
}

.cta-seccion-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-title {
    font-family: var(--font-secondary); /* ParalucentLight para títulos */
    font-size: 48px;
    line-height: 1.2;
    color: white;
    margin-bottom: 30px;
    font-weight: 300;
}

@media (max-width: 767px) {
    .cta-title {
        font-size: 33px;
        line-height: 40px;
    }
}

.cta-description {
    font-family: var(--font-primary); /* Heebo para contenido */
    font-size: 20px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95); /* Más opaco para mejor legibilidad */
    margin-bottom: 40px;
    text-align: center;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cta-buttons .cta-solid-primary-after {
    /* Estilo exacto de Kit Digital - forzar naranja */
    background: linear-gradient(98.76deg, #FF7F50 1.99%, #FF7F50 21.31%, #FFA06E 56.55%) !important;
    background-color: #FF7F50 !important;
    color: #002A3A !important;
    border-radius: 15px !important; /* Radio de Kit Digital */
    font-size: 24px !important; /* Tamaño de Kit Digital */
    font-weight: 300 !important; /* Peso de Kit Digital */
    padding: 16px 24px 15px !important; /* Padding exacto de Kit Digital */
    transition: .65s !important;
}

.cta-buttons .cta-solid-primary-after:hover {
    background: #993D1E !important;
    color: white !important;
    transition: .65s !important;
}

.cta-buttons .cta-solid-primary-after:after {
    content: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7.70711 6.29289C8.09763 6.68342 8.09763 7.31658 7.70711 7.70711L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z' fill='%23002A3A'/%3E%3C/svg%3E") !important;
    margin-left: 10px !important; /* Margen exacto de Kit Digital */
    transition: .65s !important;
}

.cta-buttons .cta-outline-secondary {
    background: transparent;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 15px !important; /* Radio de Kit Digital */
    font-size: 24px !important; /* Tamaño de Kit Digital */
    font-weight: 300 !important; /* Peso de Kit Digital */
    padding: 16px 24px 15px !important; /* Padding exacto de Kit Digital */
    transition: .65s !important;
}

.cta-buttons .cta-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    transition: .65s !important;
}
.cta-buttons .cta-solid-primary-after:hover:after {
    content: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7.70711 6.29289C8.09763 6.68342 8.09763 7.31658 7.70711 7.70711L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
}

/* =====================================
   BLOQUE COLUMNAS FLEXIBLES
   ===================================== */
.block-columnas_flexibles {
    padding: 80px 0;
}

/* =====================================
   COLUMNAS FLEXIBLES SWIPER
   ===================================== */

.columnas-flexibles-swiper {
    position: relative;
    margin: 40px 0;
    padding: 20px 0; /* Espacio arriba y abajo para que se vean las sombras */
}

.columnas-swiper {
    overflow: hidden;
    padding: 0; /* Eliminar padding para alinear completamente a la izquierda */
    min-height: 450px; /* Altura mínima para acomodar las sombras */
}

.columnas-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.columnas-swiper .swiper-slide {
    width: 400px !important;
    margin-right: 30px;
    margin-top: 10px; /* Espacio arriba */
    margin-bottom: 10px; /* Espacio abajo */
    flex-shrink: 0;
}

.swiper-button-next::after, .swiper-button-prev::after {
    display: none;
    content: "";
}

/* Estilos para cada columna - Mantener los originales */
.columna-flexible {
    background: white;
    border-radius: var(--border-radius);
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Sombra completa en todos los lados */
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
    width: 100% !important;
    height: 100%;
}

.columna-flexible:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); /* Sombra más intensa en hover */
}

.columna-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.columna-icono {
    margin-bottom: 20px;
}

.columna-icono img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.columna-titulo {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 15px;
    line-height: 1.3;
    flex-shrink: 0;
}

.columna-titulo::before {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--primary-gradient);
    margin: 0 auto 15px;
    border-radius: 2px;
}

.columna-texto {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px;
    flex-grow: 1;
    margin-bottom: 20px;
}

.columna-texto p {
    margin-bottom: 15px;
}

.columna-cta {
    margin-top: auto;
    flex-shrink: 0;
}

.columna-cta a {
    display: inline-block;
    /* Estilo exacto de Kit Digital - forzar naranja */
    background: linear-gradient(98.76deg, #FF7F50 1.99%, #FF7F50 21.31%, #FFA06E 56.55%) !important;
    background-color: #FF7F50 !important;
    color: #002A3A !important; /* Color de texto corporativo */
    border: 2px solid transparent;
    border-radius: 15px !important; /* Radio de Kit Digital */
    font-size: 18px !important; /* Tamaño ligeramente menor para columnas */
    font-weight: 300 !important; /* Peso de Kit Digital */
    padding: 12px 20px !important; /* Padding ligeramente menor para columnas */
    text-decoration: none;
    transition: .65s !important;
}

.columna-cta a:hover {
    background: #993D1E !important;
    color: #FFFFFF !important; /* Color blanco en hover */
    transition: .65s !important;
}

/* Botones de navegación del carrusel */
.columnas-flexibles-swiper .swiper-button-prev,
.columnas-flexibles-swiper .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(29, 167, 224, 0.1); /* Fondo azul claro Lis suave */
    border: 2px solid #1DA7E0; /* Borde azul claro Lis */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20; /* Z-index más alto para que siempre sean visibles */
    color: #1DA7E0; /* Color azul claro Lis */
}

.columnas-flexibles-swiper .swiper-button-prev {
    left: -22px; /* Posicionar fuera del contenedor */
}

.columnas-flexibles-swiper .swiper-button-next {
    right: -22px; /* Posicionar fuera del contenedor */
}

.columnas-flexibles-swiper .swiper-button-prev:hover,
.columnas-flexibles-swiper .swiper-button-next:hover {
    background: #1DA7E0; /* Fondo azul claro Lis sólido en hover */
    border-color: #1DA7E0;
    color: white; /* Icono blanco en hover */
    box-shadow: 0 4px 15px rgba(29, 167, 224, 0.3); /* Sombra azul claro Lis */
}

.columnas-flexibles-swiper .swiper-button-prev.swiper-button-disabled,
.columnas-flexibles-swiper .swiper-button-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.columnas-flexibles-swiper .swiper-navigation-icon {
    width: 11px;
    height: 20px;
    display: block;
    fill: currentColor;
    color: inherit;
}

.columnas-flexibles-swiper .swiper-button-prev .swiper-navigation-icon {
    transform: rotate(180deg);
}

/* =====================================
   RESPONSIVE BREAKPOINTS - COLUMNAS SWIPER
   ===================================== */

/* Mobile */
@media (max-width: 768px) {
    .columnas-swiper {
        padding: 0; /* Sin padding en mobile también */
    }
    
    .columnas-swiper .swiper-slide {
        width: 300px !important;
        margin-right: 20px;
    }
    
    .columna-flexible {
        padding: 30px 20px;
    }
    
    /* Bloque de 3 columnas con icono: layout vertical en mobile */
    .container-tarjetas .block-content {
        flex-direction: column; /* Cambia a vertical */
        align-items: center; /* Centra todo */
        text-align: center; /* Texto centrado */
        padding: 25px 20px;
        width: 100% !important; /* Ancho completo */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .container-tarjetas .block-icon {
        margin-bottom: 20px; /* Espacio entre icono y texto */
    }
    
    .container-tarjetas .block-icon svg,
    .container-tarjetas .block-icon img {
        width: 80px; /* Icono más pequeño en mobile */
        height: 80px;
    }
    
    .container-tarjetas .block-content-text {
        text-align: center; /* Asegurar texto centrado */
    }
    
    .container-tarjetas .block-subtitle {
        text-align: center;
        font-size: 20px;
    }
    
    .container-tarjetas .block-content .block-text {
        text-align: center;
        font-size: 16px;
    }
    
    /* Asegurar que las columnas ocupen ancho completo sin márgenes */
    .container-tarjetas .row {
        margin: 0 !important;
        gap: 20px !important;
    }
    
    .container-tarjetas .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
    
    .columnas-flexibles-swiper .swiper-button-prev,
    .columnas-flexibles-swiper .swiper-button-next {
        width: 32px; /* Más pequeñas */
        height: 32px;
        background: rgba(29, 167, 224, 0.95) !important; /* Azul claro Lis más opaco en mobile */
        box-shadow: 0 2px 10px rgba(29, 167, 224, 0.4);
        display: flex !important; /* Forzar visibilidad en mobile */
        visibility: visible !important; /* Forzar visibilidad */
        opacity: 1 !important; /* Asegurar opacidad completa */
        z-index: 20 !important; /* Z-index más alto */
    }
    
    .columnas-flexibles-swiper .swiper-button-prev {
        left: -5px; /* Más hacia el borde izquierdo */
    }
    
    .columnas-flexibles-swiper .swiper-button-next {
        right: -5px; /* Más hacia el borde derecho */
    }
    
    /* Iconos más pequeños en mobile */
    .columnas-flexibles-swiper .swiper-navigation-icon {
        width: 9px;
        height: 16px;
        display: block !important;
        fill: currentColor !important;
        color: #002A3A !important;
    }
    
    .columna-icono img {
        width: 50px;
        height: 50px;
    }
    
    .columna-titulo {
        font-size: 20px;
    }
    
    .columna-texto {
        font-size: 15px;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .columnas-swiper .swiper-slide {
        width: 350px !important;
    }
    
    .columna-flexible {
        width: 350px;
    }
}

/* Desktop pequeño */
@media (min-width: 1025px) and (max-width: 1200px) {
    .columnas-swiper .swiper-slide {
        width: 350px !important;
    }
}

/* Distribución específica para cada número de columnas */

/* 1 columna - centrada */
.columnas-flexibles-grid.grid-cols-1 {
    grid-template-columns: 400px;
    justify-content: center;
}

/* 2 columnas - centradas */
.columnas-flexibles-grid.grid-cols-2 {
    grid-template-columns: repeat(2, 400px);
    justify-content: center;
}

/* 3 columnas - centradas */
.columnas-flexibles-grid.grid-cols-3 {
    grid-template-columns: repeat(3, 400px);
    justify-content: center;
}

/* 4 columnas - 2+2 perfectamente distribuidas */
.columnas-flexibles-grid.grid-cols-4 {
    grid-template-columns: repeat(2, 400px);
    justify-content: center;
}

/* 5 columnas - 3+2 con la segunda fila centrada */
.columnas-flexibles-grid.grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    justify-content: center;
    align-items: stretch;
    max-width: 1260px; /* 3 * 400px + 2 * 30px gap */
    margin: 0 auto;
}

/* Primera fila: 3 elementos centrados */
.columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(1) {
    grid-column: 1 / 3;
}

.columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(2) {
    grid-column: 3 / 5;
}

.columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(3) {
    grid-column: 5 / 7;
}

/* Segunda fila: 2 elementos centrados */
.columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(4) {
    grid-column: 2 / 4;
    grid-row: 2;
}

.columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(5) {
    grid-column: 4 / 6;
    grid-row: 2;
}

/* 6 columnas - 3+3 */
.columnas-flexibles-grid.grid-cols-6 {
    grid-template-columns: repeat(3, 400px);
    justify-content: center;
}

/* 7 columnas - 3+3+1 centrado */
.columnas-flexibles-grid.grid-cols-7 {
    grid-template-columns: repeat(3, 400px);
    justify-content: center;
}

/* 8 columnas - 3+3+2 centrados */
.columnas-flexibles-grid.grid-cols-8 {
    grid-template-columns: repeat(3, 400px);
    justify-content: center;
}

/* Para cualquier número mayor, usar auto-fit */
.columnas-flexibles-grid.grid-cols-9,
.columnas-flexibles-grid.grid-cols-10,
.columnas-flexibles-grid.grid-cols-11,
.columnas-flexibles-grid.grid-cols-12 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
    justify-content: center;
}

/* Estilos para cada columna - Simplificados */
.columna-flexible {
    background: white;
    border-radius: var(--border-radius);
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
    width: 400px; /* Ancho fijo */
    height: 100%; /* Altura igual para todas */
}

.columna-flexible:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.columna-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.columna-icono {
    margin-bottom: 20px;
}

.columna-icono img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0, 177, 226, 0.2));
}

.columna-titulo {
    font-family: var(--font-secondary); /* ParalucentLight para títulos */
    font-size: 22px;
    line-height: 1.3;
    color: #002A3A; /* Color azul oscuro */
    margin-bottom: 15px;
    font-weight: 600; /* Un poco más de peso */
    position: relative;
    padding-left: 30px; /* Espacio para el icono */
    text-align: left; /* Asegurar alineación izquierda */
    display: flex;
    align-items: center;
}

/* Icono SVG decorativo para fases/columnas - Basado en las flechitas del logo */
.columna-titulo::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4L10 8L6 12' stroke='%2300B1E2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 4L15 8L11 12' stroke='%2300B1E2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0; /* Evitar que el icono se comprima */
}

.columna-texto {
    font-family: var(--font-primary); /* Heebo para contenido */
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 25px;
    flex-grow: 1;
    text-align: left; /* Sin centrar para mejor legibilidad */
}

.columna-texto p {
    margin-bottom: 15px;
}

.columna-cta {
    margin-top: auto;
}

.columna-cta a {
    display: inline-block;
    /* Estilo exacto de Kit Digital - forzar naranja */
    background: linear-gradient(98.76deg, #FF7F50 1.99%, #FF7F50 21.31%, #FFA06E 56.55%) !important;
    background-color: #FF7F50 !important;
    color: #002A3A !important; /* Color de texto corporativo */
    border: 2px solid transparent;
    border-radius: 15px !important; /* Radio de Kit Digital */
    font-size: 18px !important; /* Tamaño ligeramente menor para columnas */
    font-weight: 300 !important; /* Peso de Kit Digital */
    padding: 12px 20px !important; /* Padding ligeramente menor para columnas */
    text-decoration: none;
    transition: .65s !important;
}

.columna-cta a:hover {
    background: #993D1E !important;
    color: #FFFFFF !important; /* Color blanco en hover */
    transition: .65s !important;
}

/* =====================================
   RESPONSIVE BREAKPOINTS - COLUMNAS FLEXIBLES
   ===================================== */

/* Mobile - 1 columna siempre */
@media (max-width: 768px) {
    .columnas-flexibles-grid,
    .columnas-flexibles-grid.grid-cols-1,
    .columnas-flexibles-grid.grid-cols-2,
    .columnas-flexibles-grid.grid-cols-3,
    .columnas-flexibles-grid.grid-cols-4,
    .columnas-flexibles-grid.grid-cols-6,
    .columnas-flexibles-grid.grid-cols-7,
    .columnas-flexibles-grid.grid-cols-8 {
        grid-template-columns: 1fr;
        justify-content: center;
        gap: 20px;
        padding: 0 20px;
    }
    
    /* Caso especial para 5 columnas en mobile */
    .columnas-flexibles-grid.grid-cols-5 {
        grid-template-columns: 1fr;
        max-width: none;
        gap: 20px;
        padding: 0 20px;
    }
    
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(1),
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(2),
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(3),
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(4),
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(5) {
        grid-column: 1;
        grid-row: auto;
    }
    
    .columna-flexible {
        width: 100%;
        max-width: 400px;
        padding: 30px 20px;
    }
    
    .columna-icono img {
        width: 50px;
        height: 50px;
    }
    
    .columna-titulo {
        font-size: 20px;
    }
    
    .columna-texto {
        font-size: 15px;
    }
}

/* Tablet - Máximo 2 columnas */
@media (min-width: 769px) and (max-width: 1024px) {
    .columnas-flexibles-grid.grid-cols-3,
    .columnas-flexibles-grid.grid-cols-4,
    .columnas-flexibles-grid.grid-cols-6,
    .columnas-flexibles-grid.grid-cols-7,
    .columnas-flexibles-grid.grid-cols-8 {
        grid-template-columns: repeat(2, 350px);
        justify-content: center;
    }
    
    .columnas-flexibles-grid.grid-cols-1 {
        grid-template-columns: 350px;
    }
    
    .columnas-flexibles-grid.grid-cols-2 {
        grid-template-columns: repeat(2, 350px);
    }
    
    /* Caso especial para 5 columnas en tablet */
    .columnas-flexibles-grid.grid-cols-5 {
        grid-template-columns: repeat(2, 350px);
        max-width: none;
        justify-content: center;
    }
    
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(1),
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(2),
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(3),
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(4),
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(5) {
        grid-column: auto;
        grid-row: auto;
    }
    
    .columna-flexible {
        width: 350px;
    }
}

/* Desktop pequeño - Ajustar anchos */
@media (min-width: 1025px) and (max-width: 1200px) {
    .columnas-flexibles-grid.grid-cols-1 {
        grid-template-columns: 350px;
    }
    
    .columnas-flexibles-grid.grid-cols-2 {
        grid-template-columns: repeat(2, 350px);
    }
    
    .columnas-flexibles-grid.grid-cols-3,
    .columnas-flexibles-grid.grid-cols-6,
    .columnas-flexibles-grid.grid-cols-7,
    .columnas-flexibles-grid.grid-cols-8 {
        grid-template-columns: repeat(3, 350px);
    }
    
    .columnas-flexibles-grid.grid-cols-4 {
        grid-template-columns: repeat(2, 350px);
    }
    
    /* Caso especial para 5 columnas en desktop pequeño */
    .columnas-flexibles-grid.grid-cols-5 {
        grid-template-columns: repeat(6, 1fr);
        max-width: 1110px; /* 3 * 350px + 2 * 30px gap */
    }
    
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(1) {
        grid-column: 1 / 3;
    }
    
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(2) {
        grid-column: 3 / 5;
    }
    
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(3) {
        grid-column: 5 / 7;
    }
    
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(4) {
        grid-column: 2 / 4;
        grid-row: 2;
    }
    
    .columnas-flexibles-grid.grid-cols-5 .columna-flexible:nth-child(5) {
        grid-column: 4 / 6;
        grid-row: 2;
    }
    
    .columna-flexible {
        width: 350px;
    }
}

/* =====================================
   BLOQUE FAQs
   ===================================== */
.block-faqs {
    padding: 100px 0;
}

.block-faqs .accordion-item {
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid var(--primary-color);
}

.block-faqs .accordion-button {
    padding: 25px 30px;
    transition: all 0.3s ease;
    background-color: var(--primary-blue-lighter);
    border: none;
    font-family: var(--font-secondary); /* ParalucentLight para títulos FAQ */
    font-size: 20px;
    font-weight: 300;
    color: var(--text-dark);
    text-align: left;
}

.block-faqs .accordion-button:not(.collapsed) {
    background-color: var(--primary-blue-light);
    color: var(--primary-blue);
    box-shadow: none;
}

.block-faqs .accordion-button:focus {
    box-shadow: none;
    border: none;
}

.block-faqs .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.block-faqs .accordion-body {
    padding: 25px 30px;
    font-family: var(--font-primary); /* Heebo para contenido */
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
    text-align: left; /* Sin centrar contenido */
}

.block-faqs .accordion-body p {
    margin-bottom: 15px;
}

.block-faqs .accordion-body ul,
.block-faqs .accordion-body ol {
    margin-left: 20px;
    padding-left: 0;
}

.block-faqs .accordion-body li {
    margin-bottom: 8px;
}

/* =====================================
   BLOQUE LOGOS
   ===================================== */
   
/* Ocultar icono en bloque de logos */
.block-logos .block-title-icon {
    display: none;
}

.block-logos {
    padding: 80px 0;
}

/* Placeholder para logos faltantes */
.seccion-cards-logos .placeholder-logo {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f8f9fa;
	color: #6c757d;
	font-size: 48px;
	font-weight: bold;
	border: 2px dashed #dee2e6;
}

/* =====================================
   NUEVO DISEÑO LOGOS - 2 COLUMNAS (2/3 - 1/3)
   ===================================== */

/* Layout principal: 2 columnas con proporción 2/3 - 1/3 */
.logos-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin: 30px 0;
}

/* Columna izquierda: Herramientas (2/3) */
.herramientas-column {
    flex: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-content: flex-start;
}

/* Columna derecha: Certificaciones (1/3) */
.certificaciones-column {
    flex: 1;
}

/* Grupo de herramientas con título */
.grupo-herramientas {
    width: calc(50% - 20px); /* 50% menos la mitad del gap */
    display: flex;
    flex-direction: column;
}

.grupo-herramientas .grupo-titulo {
    font-size: 18px;
    font-weight: 600;
    color: #002A3A;
    margin-bottom: 20px;
    font-family: var(--font-primary);
    text-align: left;
    min-height: 50px; /* Altura mínima fija para alinear títulos */
    display: flex;
    align-items: center;
}

/* Grid de logos usando las clases originales del tema */
.grupo-herramientas .container_logos {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
}

/* Ajustar solo la altura de las cajas */
.grupo-herramientas .container_logos .box-logo {
    height: 88px;
    transition: all 0.3s ease;
}

/* Efecto hover con CSS puro - imagen a blanco */
.grupo-herramientas .container_logos .box-logo:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 177, 226, 0.25);
}

/* Ocultar la imagen hover si existe */
.grupo-herramientas .container_logos .box-logo .fade-in-image {
    display: none !important;
}

/* La imagen del logo se convierte a blanco al hacer hover */
.grupo-herramientas .container_logos .box-logo:hover .imagen_loop {
    opacity: 1;
    filter: brightness(0) invert(1);
}

/* Certificaciones - diseño simple sin cajas, columna derecha */
.certificaciones-section {
    position: sticky;
    top: 20px;
}

.certificaciones-section .logos-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #002A3A;
    margin-bottom: 25px;
    font-family: var(--font-primary);
}

.certificaciones-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.certificacion-logo {
    opacity: 1;
    transition: all 0.3s ease;
    filter: grayscale(0%);
}

.certificacion-logo img {
    max-width: 140px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.certificacion-logo:hover {
    opacity: 0.7;
    filter: grayscale(20%);
}

/* Subtítulo de logos */
.logos-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: #335561;
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

/* Responsive */
@media only screen and (max-width: 991px) {
    .hero-general {
        margin-bottom: 0;
    }
    .logos-layout {
        flex-direction: column;
        gap: 40px;
    }
    
    .herramientas-column,
    .certificaciones-column {
        flex: 1;
        width: 100%;
    }
    
    .certificaciones-section {
        position: static;
    }
    
    .certificaciones-grid {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media only screen and (max-width: 767px) {
    .grupo-herramientas .container_logos {
        gap: 15px;
    }
    
    .grupo-herramientas .container_logos .box-logo {
        min-height: 100px;
    }
    
    .grupo-herramientas .grupo-titulo {
        font-size: 16px;
    }
    
    .certificacion-logo img {
        max-width: 100px;
        max-height: 60px;
    }
    
    .certificaciones-grid {
        gap: 20px;
    }
    
    .logos-subtitle {
        font-size: 16px;
    }
    
    .logos-layout {
        gap: 30px;
    }
}

/* Mantener compatibilidad con el diseño antiguo si existe en otras páginas */
.seccion-cards-logos {
    margin-top: 26px !important;
    margin-bottom: 8px !important;
}

@media only screen and (max-width: 767px) {
    .seccion-cards-logos {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
}

.logos-container {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 736px;
    margin: 0 auto;
}

.logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 166px;
    height: 166px;
    border: 2px solid var(--text-dark);
    border-radius: var(--border-radius);
    position: relative;
    transition: var(--transition);
    background: white;
}

.logo-box:hover {
    background-color: var(--text-dark);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 42, 58, 0.15);
}

.logo-image {
    max-width: 100px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition);
    filter: grayscale(0%);
}

.logo-box:hover .logo-image {
    filter: brightness(0) invert(1); /* Convierte a blanco en hover */
}

/* Responsive para logos */
@media (max-width: 767px) {
    .logos-container {
        max-width: 296px;
        gap: 16px;
    }
    
    .logo-box {
        width: 136px;
        height: 136px;
    }
    
    .logo-image {
        max-width: 80px;
    }
}

@media (max-width: 389px) {
    .logos-container {
        gap: 10px;
    }
    
    .logo-box {
        width: 110px;
        height: 110px;
    }
    
    .logo-image {
        max-width: 70px;
    }
}

/* =====================================
   CONTENIDO VACÍO
   ===================================== */
.no-content {
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    padding: 60px 40px;
}

.no-content h2 {
    color: var(--text-dark);
    margin-bottom: 20px;
}

.no-content p {
    color: var(--text-color);
    font-size: 16px;
}

/* =====================================
   RESPONSIVE
   ===================================== */

/* Separación específica para columnas Bootstrap en móvil */
@media only screen and (max-width: 767px) {
    .row .col-12 + .col-12 {
        margin-top: 30px !important;
    }
    
    .block-texto_dos_columnas .row .col-12,
    .block-texto_tres_columnas .row .col-12 {
        margin-bottom: 25px !important;
    }
    
    /* Espaciado específico para container-tarjetas en mobile */
    .container-tarjetas .row .col-lg-4,
    .container-tarjetas .row .col-lg-4 + .col-lg-4,
    .container-tarjetas .row [class*="col-"] {
        margin-bottom: 40px !important;
    }
    
    .container-tarjetas .row [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Espaciado específico para container-azul (cajas colored) en mobile */
    .container-azul .row .col-lg-4,
    .container-azul .row .col-lg-4 + .col-lg-4,
    .container-azul .row .col-lg-6,
    .container-azul .row .col-lg-6 + .col-lg-6,
    .container-azul .row [class*="col-"] {
        margin-bottom: 40px !important;
    }
    
    .container-azul .row [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }
}

@media only screen and (max-width: 991px) {
    .block-title {
        font-size: 32px;
        text-align: center !important; /* Títulos centrados en mobile */
    }
    
    .block-subtitle {
        font-size: 24px;
        text-align: center !important; /* Subtítulos centrados en mobile */
    }
    
    .block-foto_texto .block-content,
    .block-texto_foto .block-content {
        padding: 30px 20px;
        text-align: center; /* Todo el contenido centrado en mobile */
    }
    
    /* En mobile, asegurar que la imagen aparezca siempre antes que el texto */
    /* Para foto_texto: mantener el orden original (imagen primero, texto después) */
    .block-foto_texto .row .order-lg-1 {
        order: 1; /* La imagen sigue primera en mobile */
    }
    
    .block-foto_texto .row .order-lg-2 {
        order: 2; /* El texto sigue segundo en mobile */
    }
    
    /* Para texto_foto: invertir el orden (imagen primero, texto después) en mobile */
    .block-texto_foto .row .order-lg-1 {
        order: 2; /* El texto va segundo en mobile */
    }
    
    .block-texto_foto .row .order-lg-2 {
        order: 1; /* La imagen va primera en mobile */
    }
    
    .block-texto_dos_columnas .block-content,
    .block-texto_tres_columnas .block-content {
        padding: 20px;
        margin-bottom: 30px;
    }
    
    /* Textos largos sin centrar */
    .block-text {
        text-align: left;
    }
    
    .cta-title {
        font-size: 36px;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons a {
        margin: 10px 0;
        text-align: center;
        width: 100%;
        max-width: 300px;
    }
}

@media only screen and (max-width: 767px) {
    .block-item {
        padding: 60px 0;
    }
    
    .block-foto_texto,
    .block-texto_foto,
    .block-texto_una_columna,
    .block-cta_seccion,
    .block-faqs {
        padding: 60px 0;
    }
    
    /* Aumentar separación en móvil para bloques de columnas */
    .block-texto_dos_columnas,
    .block-texto_tres_columnas {
        padding: 60px 0;
    }
    
    .block-texto_dos_columnas .block-content,
    .block-texto_tres_columnas .block-content {
        margin-bottom: 35px; /* Más separación en móvil */
        padding: 25px 20px;
    }
    
    /* Reglas específicas para Bootstrap en móvil */
    .block-texto_dos_columnas .col-12,
    .block-texto_tres_columnas .col-12 {
        margin-bottom: 30px !important;
    }
    
    .block-texto_dos_columnas .col-12:last-child,
    .block-texto_tres_columnas .col-12:last-child {
        margin-bottom: 0 !important;
    }
    
    .block-title {
        font-size: 28px;
    }
    
    .block-subtitle {
        font-size: 22px;
    }
    
    .block-text {
        font-size: 16px;
    }
    
    .cta-title {
        font-size: 28px;
    }
    
    .cta-description {
        font-size: 18px;
    }
    
    .cta-buttons {
        margin-top: 30px; /* Más separación del texto */
        gap: 15px;
    }
    
    .cta-buttons a {
        font-size: 18px;
        padding: 14px 20px;
        margin-bottom: 10px; /* Separación entre botones en móvil */
    }
    
    .block-faqs .accordion-button {
        font-size: 18px;
        padding: 20px;
    }
    
    .block-faqs .accordion-body {
        padding: 20px;
        font-size: 14px;
    }
}

/* =====================================
   BLOQUE LOGOS/HERRAMIENTAS GRID
   ===================================== */
.block-logos {
    background: #faf6fb;
    border-radius: 0;
    padding: 80px 0;
    margin: 0;
    box-shadow: none;
}

/* Centrar el contenido y usar ancho completo */
.block-logos .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding: 0 40px;
}

.logos-subtitle {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 400;
    color: #002A3A;
    margin-bottom: 40px;
    position: relative;
    text-align: center; /* Centrar el subtítulo */
    max-width: none; /* Permitir ancho completo */
    line-height: 1.4;
    margin-top: 40px;
}

.logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrar los logos */
    gap: 30px; /* Aumentar el gap para mejor espaciado */
    padding: 30px 0;
    margin-bottom: 50px;
    max-width: 100%; /* Usar ancho completo */
    margin-left: 0;
    margin-right: auto;
}

.logo-item {
    width: 136px;
    height: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: none;
    overflow: visible;
}

/* Estilos específicos para enlaces de logos */
.block-logos a {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 10px;
}

.block-logos a:hover {
    text-decoration: none;
    color: inherit;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 42, 58, 0.15);
}

/* Evitar movimiento del CTA en logos */
.block-logos .logos-cta a:hover {
    transform: none !important;
    box-shadow: none !important;
}

.block-logos a:focus,
.block-logos a:active {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    color: inherit;
    text-decoration: none;
}

.logo-item::before {
    display: none;
}

.logo-item:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

/* Contenedor de imagen con hover effect */
.logo-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.logo-main,
.logo-hover {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.4s ease;
}

.logo-hover {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    z-index: 1;
}

.logo-main {
    position: relative;
    z-index: 2;
}

/* Solo ocultar logo-main en hover si hay logo-hover */
.logo-item:has(.logo-hover):hover .logo-main {
    opacity: 0;
}

.logo-item:hover .logo-hover {
    opacity: 1;
}

/* Solo hover si no hay imagen hover definida */
.logo-image-container:not(:has(.logo-hover)) .logo-main:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.logo-title {
    font-size: 14px;
    font-weight: 600;
    color: #002A3A;
    margin-top: 10px;
    text-align: center;
    display: block; /* Mostrar los títulos */
    line-height: 1.3;
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* Estilos para enlaces */
a .logo-item {
    cursor: pointer;
}

/* Hover solo para logos, no para todos los links */
.logo-hover:hover,
a:hover .logo-item {
    text-decoration: none;
}

a .logo-title {
    transition: color 0.3s ease;
    color: #002A3A;
}

a:hover .logo-title {
    color: var(--primary-color);
    opacity: 1;
    transform: translateY(-2px);
}

/* Descripción final del bloque logos */
.block-logos .block-description {
    max-width: 800px; /* Aumentar ancho */
    margin: 60px auto 0 auto; /* Centrar */
    padding: 40px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(255, 127, 80, 0.1);
    text-align: left; /* Cambiar a izquierda para mejor lectura */
}

/* CTA del bloque logos - Mantener consistencia exacta */
.logos-cta {
    margin: 40px auto 0 auto;
    padding: 0;
}

.logos-cta .cta-solid-primary-after {
    display: inline-block;
    /* Estilo exacto de Kit Digital - forzar naranja */
    background: linear-gradient(98.76deg, #FF7F50 1.99%, #FF7F50 21.31%, #FFA06E 56.55%) !important;
    background-color: #FF7F50 !important;
    color: #002A3A !important; /* Color de texto corporativo */
    border: 2px solid transparent;
    border-radius: 15px !important; /* Radio de Kit Digital */
    font-size: 24px !important; /* Tamaño de Kit Digital */
    font-weight: 300 !important; /* Peso de Kit Digital */
    padding: 16px 24px 15px !important; /* Padding exacto de Kit Digital */
    transition: .65s !important;
}

.logos-cta .cta-solid-primary-after:after {
    content: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7.70711 6.29289C8.09763 6.68342 8.09763 7.31658 7.70711 7.70711L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z' fill='%23002A3A'/%3E%3C/svg%3E") !important; /* Icono con color corporativo */
    margin-left: 10px !important; /* Margen exacto de Kit Digital */
    transition: .65s !important;
}

.logos-cta .cta-solid-primary-after:hover {
    background: #993D1E !important;
    color: #FFFFFF !important; /* Color blanco en hover */
    transition: .65s !important;
}

.logos-cta .cta-solid-primary-after:hover:after {
    content: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7.70711 6.29289C8.09763 6.68342 8.09763 7.31658 7.70711 7.70711L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important; /* Icono blanco en hover */
}

/* Mejorar estilos específicos para el contenido de la descripción */
.block-logos .block-description p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #335561;
}

.block-logos .block-description b,
.block-logos .block-description strong {
    color: #002A3A;
    font-weight: 700;
}

.block-logos .block-description ul {
    margin: 25px 0;
    padding-left: 20px;
}

.block-logos .block-description ul li {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #335561;
    font-size: 16px;
}

.block-logos .block-description a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 127, 80, 0.3);
    transition: all 0.3s ease;
    display: inline; /* No ser block para no saltar línea */
    padding: 4px 8px; /* Cajita redondeada siempre */
    border-radius: 6px;
    background: rgba(255, 127, 80, 0.1);
    border-bottom: none; /* Quitar borde inferior para usar la cajita */
}

.block-logos .block-description a:hover {
    color: #FF6B35;
    text-decoration: none;
    background: rgba(255, 107, 53, 0.15); /* Cajita más intensa en hover */
    transform: translateY(-1px);
}

.block-description p {
    font-size: 18px;
    line-height: 1.6;
    color: #335561;
    margin-bottom: 0;
    text-align: left !important; /* Sobrescribir text-center para bullets */
}

/* Listas dentro de la descripción */
.block-description ul,
.block-description ol {
    text-align: left;
    margin: 20px 0;
    padding-left: 25px;
}

.block-description li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #335561;
}

.block-description strong {
    color: #002A3A;
    font-weight: 700;
}

/* Responsive Design */
@media only screen and (max-width: 1024px) {
    .block-logos .container {
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px;
    }
    
    .logos-grid {
        gap: 15px;
        max-width: 100%;
        justify-content: center;
    }
    
    .logo-item {
        width: 120px;
        height: 90px;
        margin: 8px;
    }
    
    .block-logos .block-description {
        padding: 30px;
        margin: 50px auto 0 auto;
        max-width: 90%;
    }
}

@media only screen and (max-width: 768px) {
    .block-logos {
        padding: 60px 0;
    }
    
    .block-logos .container {
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .logos-subtitle {
        font-size: 28px;
        margin-bottom: 40px;
        max-width: 100%;
        text-align: center;
    }
    
    .logos-subtitle::after {
        width: 80px;
        height: 3px;
        margin: 15px auto 0 auto; /* Centrar la línea */
    }
    
    .logos-grid {
        gap: 12px;
        padding: 20px 0;
        margin-bottom: 40px;
        max-width: 100%;
        justify-content: center; /* Mantener centrado */
    }
    
    .logo-item {
        width: 100px;
        height: 75px;
        margin: 6px;
    }
    
    .block-logos .block-description {
        margin: 40px auto 0 auto;
        padding: 25px;
        max-width: 95%;
    }
    
    .block-logos .block-description p {
        font-size: 16px;
    }
    
    .block-logos .block-description ul li {
        font-size: 15px;
        margin-bottom: 12px;
    }
}

@media only screen and (max-width: 480px) {
    .block-logos {
        padding: 50px 0;
    }
    
    .logos-subtitle {
        font-size: 24px;
        margin-bottom: 35px;
    }
    
    .logos-grid {
        gap: 10px;
        padding: 15px 0;
        justify-content: center; /* En móvil pequeño centramos para mejor distribución */
    }

    .logo-item {
        width: 80px;
        height: 60px;
        margin: 5px;
    }

    .block-description {
        margin: 30px 0 0 0;
        padding: 20px;
    }

    .block-description p {
        font-size: 15px;
    }

    .block-description ul,
    .block-description ol {
        padding-left: 20px;
    }
}

/* =====================================
   OVERRIDE GLOBAL LINKS - CORPORATE COLORS
   Alta especificidad para sobrescribir estilos globales
   ===================================== */

/* Links corporativos Lis - Override de estilos globales */
.template-contenido-flexible .block-foto_texto a,
.template-contenido-flexible .block-texto_foto a,
.template-contenido-flexible .block-foto_texto .item-text a,
.template-contenido-flexible .block-texto_foto .item-text a,
.template-contenido-flexible .block-foto_texto .block-text a,
.template-contenido-flexible .block-texto_foto .block-text a {
    color: #1DA7E0 !important; /* Azul claro corporativo Lis */
    text-decoration: underline !important;
}

.template-contenido-flexible .block-foto_texto a:hover,
.template-contenido-flexible .block-texto_foto a:hover,
.template-contenido-flexible .block-foto_texto .item-text a:hover,
.template-contenido-flexible .block-texto_foto .item-text a:hover,
.template-contenido-flexible .block-foto_texto .block-text a:hover,
.template-contenido-flexible .block-texto_foto .block-text a:hover {
    color: #002A3A !important; /* Azul oscuro Lis en hover */
    text-decoration: underline !important;
}

/* =====================================
   OVERRIDE GLOBAL LINKS - CORPORATE COLORS
   ===================================== */
.template-contenido-flexible .block-texto_foto a,
.template-contenido-flexible .block-texto_foto .item-text a {
    color: #1DA7E0 !important;
    text-decoration: underline !important;
}

.template-contenido-flexible .block-texto_foto a:hover,
.template-contenido-flexible .block-texto_foto .item-text a:hover {
    color: #002A3A !important;
    text-decoration: underline !important;
}