/*====================================================
            SECCIÓN NUESTRA ESENCIA + CTA
    =====================================================*/

    .esencia-section {
    width: 100%;
    padding: var(--space-lg) 0 0 0; /* Sin padding inferior para que el CTA pegue al borde */
    background-color: var(--light, #F8FAFC);
    font-family: var(--font-primary, "Manrope", sans-serif);
    }

    .esencia-container {
    width: var(--container-width, min(92%, 1400px));
    margin: 0 auto;
    }

    /*----------------------------------------------------
    TAG Y DESCRIPCIÓN REUTILIZABLES
    -----------------------------------------------------*/



    .section-description {
    color: #151d24;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.7;
    letter-spacing: 0.015em; /* 1px adicional de respiración entre caracteres/palabras */
    margin: 0;
    }

    .esencia-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto var(--space-md) auto;
    }


    /*----------------------------------------------------
    CARDS E IDENTIDAD
    -----------------------------------------------------*/

    .esencia-card {
    background-color: var(--white, #FFFFFF);
    border: 1px solid var(--border, #E4E7EC);
    border-radius: var(--radius-md, 20px);
    padding: var(--space-md, 2rem);
    margin-bottom: var(--space-md, 2rem);
    box-shadow: var(--shadow-sm, 0 5px 15px rgba(0,0,0,0.08));
    }

    .esencia-card-title {
    font-size: var(--title-sm, clamp(1.6rem, 2vw, 2.3rem));
    font-weight: 800;
    color: var(--primary, #133066);
    margin-bottom: var(--space-xs, 12px);
    }

    /* Grid de las 4 Tarjetas de Empresas */
    .empresas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm, 1.2rem);
    margin: var(--space-md) 0;
    }

    /* Animación de alzado y sombra al Hover */
    .empresa-item {
    background-color: var(--white, #FFFFFF);
    border: 1px solid var(--border, #E4E7EC);
    border-radius: var(--radius-sm, 12px);
    padding: var(--space-sm, 1.2rem);
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition, 0.35s ease), box-shadow var(--transition, 0.35s ease);
    }

    .empresa-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(16, 24, 40, 0.12);
    }

    /* Borde lateral distintivo */
    .empresa-item.item-orange { border-left: 6px solid var(--secondary, #FB822A); }
    .empresa-item.item-green  { border-left: 6px solid var(--green, #4CB050); }
    .empresa-item.item-blue   { border-left: 6px solid var(--primary-light, #3960eb); }
    .empresa-item.item-golden { border-left: 6px solid #d9bf6f; }

    .empresa-name {
    display: block;
    font-weight: 700;
    font-size: var(--text-sm, 0.95rem);
    color: var(--dark, #101828);
    }

    .empresa-desc {
    display: block;
    font-size: var(--text-xs, 0.85rem);
    color: var(--text, #667085);
    margin-top: 4px;
    }

    .esencia-footer-note {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    }
    /*====================================================
            RESPONSIVO CORREGIDO PARA MÓVIL
    =====================================================*/

    /* En tablets intermedias (2 columnas) */
    @media (max-width: 1024px) {
    .empresas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    }

    /* En celulares (1 columna / lista vertical) */
    @media (max-width: 640px) {
    /* 1. Las 4 cards de empresas pasan a formar una lista de 1 sola columna */
    .empresas-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    /* 2. Alineación tipo lista vertical con padding cómodo */
    .empresa-item {
        text-align: left; /* Alineado a la izquierda luce más natural como lista */
        padding: 1rem 1.2rem;
    }

    .empresa-name {
        font-size: 1rem;
    }

    .empresa-desc {
        margin-top: 2px;
    }

    /* 3. Ajuste opcional para el padding de las tarjetas contenedoras en celular */
    .esencia-card {
        padding: 1.2rem;
    }
    }
    /*----------------------------------------------------
    GRID DUAL: PROPÓSITO Y MISIÓN
    -----------------------------------------------------*/

    .esencia-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md, 2rem);
    margin-bottom: var(--space-lg, 4rem);
    }

    /*----------------------------------------------------
    AJUSTES PARA CARD PROPÓSITO CON IMAGEN
    -----------------------------------------------------*/

    .card-proposito {
    background-color: var(--primary, #133066);
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja la imagen hasta abajo */
    padding: 0; 
    overflow: hidden; /* Corta la imagen respetando las esquinas redondeadas de la card */
    }

    /* Espaciado interno solo para los textos */
    .proposito-content {
    padding: var(--space-md, 2rem) var(--space-md, 2rem) 0 var(--space-md, 2rem);
    }

    /* Contenedor de la imagen */
    .proposito-media {
    width: 100%;
    margin-top: var(--space-sm, 1.2rem);
    line-height: 0; 
    }

    .proposito-img {
    width: 100%;
    height: 180px; 
    object-fit: cover; 
    object-position: center;
    display: block;
    opacity: 0.9; 
    transition: transform var(--transition, 0.35s ease), opacity var(--transition, 0.35s ease);
    }


    .card-proposito:hover .proposito-img {
    transform: scale(1.03);
    opacity: 1;
    }

    .esencia-card-title.light { color: var(--white); }
    .section-description.light { color: rgba(255, 255, 255, 0.88); }

    .esencia-highlight {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background-color: rgba(255, 255, 255, 0.08);
    border-left: 4px solid var(--primary-light, #3960eb);
    color: var(--white);
    font-size: var(--text-sm);
    line-height: 1.6;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    .mision-subtitle {
    font-size: var(--text-md);
    color: var(--text);
    margin-bottom: var(--space-xs);
    }

    /* LOGOS INTERACTIVOS EN MISIÓN (Hover Muestra Nombre) */
    .logos-interactive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 18px 0 24px 0;
    }

    .logo-card {
    position: relative;
    background-color: var(--light, #F8FAFC);
    border: 1px solid var(--border, #E4E7EC);
    border-radius: var(--radius-sm, 12px);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    transition: all var(--transition, 0.35s ease);
    overflow: hidden;
    }

    .logo-img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: transform var(--transition);
    }

    .logo-img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
    }

    .logo-img1 {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    }

    /* Etiqueta flotante que aparece abajo en hover */
    .logo-hover-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary, #133066);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    padding: 4px 2px;
    transform: translateY(100%);
    transition: transform var(--transition, 0.35s ease);
    }
    .bg {background-color: var(--green, #4CB050);}
    .cj {background-color: var(--secondary);}
    .jp {background-color: #d9bf6f;}


    .logo-card:hover {
    border-color: rgb(192, 188, 188);
    box-shadow: var(--shadow-sm);
    }

    .logo-card:hover .logo-img-wrapper {
    transform: translateY(-8px);
    }

    .logo-card:hover .logo-hover-label {
    transform: translateY(0);
    }

    .mision-footer-quote {
    background-color: var(--light);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    margin-top: var(--space-sm);
    }

    /*====================================================
        RESPONSIVO
    =====================================================*/

    @media (max-width: 992px) {
    
    .esencia-dual-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }

    /*Ajuste de Propósito en tablets/móvil */
    .proposito-img {
        height: 160px;
    }
    }

    @media (max-width: 640px) {
    /* 3. En celulares, los logos de Misión se acomodan en 2 columnas para que respiren mejor */
    .logos-interactive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* 4. Ajuste del espaciado interno en celulares */
    .proposito-content {
        padding: 1.5rem 1.25rem 0 1.25rem;
    }
    
    .card-mision {
        padding: 1.5rem 1.25rem;
    }
    }

    /*====================================================
                CTA BANNER 
    =====================================================*/

    .cta-banner-full {
    width: 100%;
    background-color: #184580; /* Fondo azul solicitado */
    display: flex;
    align-items: stretch; /* Obliga al bloque izquierdo a tener el 100% de la altura */
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 0; /* Rectángulo completo sin radios */
    }

    /*----------------------------------------------------
    1. BLOQUE IZQUIERDO ESTIRADO (ACCENTO)
    -----------------------------------------------------*/
    .cta-left-accent {
    width: 110px; /* Ancho de la franja izquierda */
    background-color: #103260; /* Tono de azul más oscuro de acento */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 3;
    }

    .cta-arrow-icon {
    width: 36px;
    height: 36px;
    color: #FFFFFF;
    opacity: 0.95;
    }

    /*----------------------------------------------------
    2. CONTENIDO PRINCIPAL Y BURBUJAS DE FONDO
    -----------------------------------------------------*/
    .cta-banner-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 100px 24px 40px;
    position: relative;
    z-index: 2;
    }

    /* Burbujas translucidas */
    .cta-bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 1;
    }

    .bubble-1 {
    width: 180px;
    height: 180px;
    left: -20px;
    bottom: -90px;
    }

    .bubble-2 {
    width: 130px;
    height: 130px;
    left: 45%;
    top: -60px;
    }

    .bubble-3 {
    width: 240px;
    height: 240px;
    right: -50px;
    bottom: -100px;
    }

    /* Texto del CTA */
    .cta-title {
    font-size: var(--text-lg, clamp(1.1rem, 1.3vw, 1.3rem));
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    position: relative;
    z-index: 2;
    }

    /* Botón Verde */
    .btn-cta-green {
    background-color: var(--green, #4CB050);
    color: #FFFFFF;
    padding: 10px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--text-sm, 0.95rem);
    text-decoration: none;
    transition: transform var(--transition, 0.35s ease), background-color var(--transition, 0.35s ease);
    box-shadow: 0 4px 15px rgba(76, 176, 80, 0.3);
    position: relative;
    
    z-index: 2;
    }

    .btn-cta-green:hover {
    background-color: #3f9643;
    transform: translateY(-2px);
    }

    /*----------------------------------------------------
    RESPONSIVO (MÓVILES)
    -----------------------------------------------------*/
    @media (max-width: 768px) {
    .cta-banner-full {
        flex-direction: column;
    }

    /* La franja se mantiene como una línea/barra arriba */
    .cta-left-accent {
        width: 100%;
        height: 12px; /* Ajusta este alto según qué tan gruesa quieras la línea superior */
        padding: 0;
    }

    /* Se oculta SOLAMENTE la flecha dentro de la franja */
    .cta-left-accent .cta-arrow-icon {
        display: none;
    }

    .cta-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px 20px;
    }

    .btn-cta-green {
        width: 50%;
        text-align: center;
    }
    }