/* ============================================================
   PAGE: INDEX  (Elementor #439)
   Estructura/estilos de la página + componentes propios del Index.
   El header/nav vive en header-nav.css (enlazado aparte).
   ============================================================ */

/* ------------------------------------------------------------
   1) ESTRUCTURA DE LA PÁGINA (Elementor 439) — sin cambios
   ------------------------------------------------------------ */
.elementor-439 .elementor-element.elementor-element-44827ed:not(.elementor-motion-effects-element-type-background), .elementor-439 .elementor-element.elementor-element-44827ed > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #8660EA00;
}

.elementor-439 .elementor-element.elementor-element-44827ed > .elementor-background-overlay {
    background-color: var( --e-global-color-ed0f02f );
    opacity: 0.46;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.elementor-439 .elementor-element.elementor-element-44827ed > .elementor-container {
    max-width: 1099px;
    min-height: 90vh;
}

.elementor-439 .elementor-element.elementor-element-44827ed {
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin-top: -92px;
    margin-bottom: 0px;
}

.elementor-439 .elementor-element.elementor-element-b90363c {
    --spacer-size: 180px;
}

.elementor-widget-button .elementor-button {
    background-color: var( --e-global-color-accent );
    font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
    font-weight: var( --e-global-typography-accent-font-weight );
}

.elementor-439 .elementor-element.elementor-element-3769cde .elementor-button {
    background-color: var( --e-global-color-ed0f02f );
    font-family: "Futura", Sans-serif;
    font-weight: 800;
    border-radius: 12px 12px 12px 12px;
}

    .elementor-439 .elementor-element.elementor-element-3769cde .elementor-button:hover, .elementor-439 .elementor-element.elementor-element-3769cde .elementor-button:focus {
        background-color: var( --e-global-color-519cfa9 );
    }

.elementor-439 .elementor-element.elementor-element-7d22fde {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
}

.elementor-439 .elementor-element.elementor-element-ab1e4ee {
    --spacer-size: 100px;
}

.elementor-widget-heading .elementor-heading-title {
    font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
    font-weight: var( --e-global-typography-primary-font-weight );
    color: var( --e-global-color-primary );
}

.elementor-439 .elementor-element.elementor-element-b27f7de {
    text-align: center;
}

    .elementor-439 .elementor-element.elementor-element-b27f7de .elementor-heading-title {
        font-family: "Futura", Sans-serif;
        font-size: 26px;
        font-weight: 600;
        color: var( --e-global-color-620c6be );
    }

.elementor-439 .elementor-element.elementor-element-e744b06 {
    --spacer-size: 40px;
}

.elementor-439 .elementor-element.elementor-element-ccb27ee {
    text-align: left;
}

    .elementor-439 .elementor-element.elementor-element-ccb27ee .elementor-heading-title {
        font-family: "Futura", Sans-serif;
        font-size: 55px;
        font-weight: 900;
        color: var( --e-global-color-ed0f02f );
    }

.elementor-439 .elementor-element.elementor-element-245fa3d {
    --display: grid;
    --e-con-grid-template-columns: repeat(3, 1fr);
    --e-con-grid-template-rows: repeat(1, 1fr);
    --grid-auto-flow: row;
}

.elementor-439 .elementor-element.elementor-element-f265ba0 {
    --display: flex;
}

.elementor-439 .elementor-element.elementor-element-1229473 {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
}

.elementor-439 .elementor-element.elementor-element-a83fefa {
    --spacer-size: 100px;
}

.elementor-439 .elementor-element.elementor-element-72b6d94 {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
}

.elementor-439 .elementor-element.elementor-element-089173a {
    text-align: center;
}

    .elementor-439 .elementor-element.elementor-element-089173a .elementor-heading-title {
        font-family: "Futura", Sans-serif;
        font-size: 55px;
        font-weight: 900;
        color: var( --e-global-color-519cfa9 );
    }

.elementor-439 .elementor-element.elementor-element-5df7023 {
    text-align: center;
}

    .elementor-439 .elementor-element.elementor-element-5df7023 .elementor-heading-title {
        font-family: "Futura", Sans-serif;
        font-size: 20px;
        font-weight: 400;
        color: var( --e-global-color-35e2861 );
    }

.elementor-439 .elementor-element.elementor-element-809095d {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
}

.elementor-439 .elementor-element.elementor-element-525c2e1 {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
}

.elementor-439 .elementor-element.elementor-element-bcf61b1 {
    --spacer-size: 160px;
}

.elementor-439 .elementor-element.elementor-element-5fb6de8 {
    --display: flex;
    --min-height: 478px;
    --flex-direction: column;
    --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
    --justify-content: center;
    --align-items: flex-start;
}

    .elementor-439 .elementor-element.elementor-element-5fb6de8:not(.elementor-motion-effects-element-type-background), .elementor-439 .elementor-element.elementor-element-5fb6de8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-color: var( --e-global-color-ed0f02f );
        background: url("/wp-content/uploads/2024/06/recursos_degradado.png") 50% 50%;
        background-size: cover;
    }

/* El video de fondo debe CUBRIR toda la sección (sin franjas moradas).
   Elementor normalmente fija el tamaño por JS, que aquí no corre; lo forzamos por CSS. */
.elementor-439 .elementor-background-video-container {
    width: 100%;
    height: 100%;
    inset: 0;
}

.elementor-439 .elementor-background-video-hosted {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.elementor-439 .elementor-element.elementor-element-ddb7f71 {
    text-align: left;
}

    .elementor-439 .elementor-element.elementor-element-ddb7f71 .elementor-heading-title {
        font-family: "Futura", Sans-serif;
        font-weight: 600;
        color: #FFFFFF;
    }

.elementor-439 .elementor-element.elementor-element-30ef0d6 {
    --spacer-size: 30px;
}

.elementor-439 .elementor-element.elementor-element-4840893 {
    margin: 0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;
    text-align: left;
}

    .elementor-439 .elementor-element.elementor-element-4840893 .elementor-heading-title {
        font-family: "Futura", Sans-serif;
        font-size: 25px;
        font-weight: 600;
        color: #FFFFFF;
    }

.elementor-439 .elementor-element.elementor-element-df09dec {
    margin: 0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;
    text-align: left;
}

    .elementor-439 .elementor-element.elementor-element-df09dec .elementor-heading-title {
        font-family: "Futura", Sans-serif;
        font-weight: 600;
        color: #FFFFFF;
    }

.elementor-439 .elementor-element.elementor-element-a30a098 {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
}

.elementor-439 .elementor-element.elementor-element-1b4efd9 {
    --display: flex;
    --flex-direction: column;
    --container-widget-width: 100%;
    --container-widget-height: initial;
    --container-widget-flex-grow: 0;
    --container-widget-align-self: initial;
    --flex-wrap-mobile: wrap;
}

.elementor-439 .elementor-element.elementor-element-d092f39 {
    --spacer-size: 80px;
}

body.elementor-page-439:not(.elementor-motion-effects-element-type-background), body.elementor-page-439 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #FFFFFF;
}

@media(min-width:768px) {
    .elementor-439 .elementor-element.elementor-element-5ccc7d5 {
        width: 100%;
    }
}

@media(max-width:1366px) {
    .elementor-439 .elementor-element.elementor-element-44827ed {
        padding: 0px 20px 0px 20px;
    }

    .elementor-439 .elementor-element.elementor-element-245fa3d {
        --grid-auto-flow: row;
    }
}

@media(max-width:1024px) {
    .elementor-439 .elementor-element.elementor-element-245fa3d {
        --grid-auto-flow: row;
    }
}

@media(max-width:767px) {
    .elementor-439 .elementor-element.elementor-element-245fa3d {
        --e-con-grid-template-columns: repeat(1, 1fr);
        --e-con-grid-template-rows: repeat(1, 1fr);
        --grid-auto-flow: row;
    }

    .elementor-439 .elementor-element.elementor-element-5fb6de8 {
        --min-height: 50vh;
    }

    .elementor-439 .elementor-element.elementor-element-ddb7f71 .elementor-heading-title {
        font-size: 23px;
        line-height: 1.35;
    }

    .elementor-439 .elementor-element.elementor-element-30ef0d6 {
        --spacer-size: 20px;
    }

    .elementor-439 .elementor-element.elementor-element-4840893 .elementor-heading-title {
        font-size: 19px;
    }
}

/* Custom CSS heredado de la página 439 */
@media (max-width: 767px) {
    #inicio-text-footer {
    }
}

@media (max-width: 767px) {
    #none {
        display: none;
    }
}

@media (max-width: 767px) {
    #div-inferior-inicio {
        background-color: #fff !important;
    }
}


/* ------------------------------------------------------------
   2) SLIDER DE TEXTO (hero)
   Selectores acotados a .text-slider (antes eran h2/p globales).
   ------------------------------------------------------------ */
.text-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 380px;
}

    .text-slider .slide {
        opacity: 0;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
        font-family: "Futura", sans-serif;
        position: absolute;
        top: 100%;
        left: 0;
        transition: opacity 1s ease, top 1s ease;
    }

        .text-slider .slide.active {
            opacity: 1;
            top: 0;
        }

    .text-slider h2 {
        font-size: 4em;
        margin-bottom: 10px;
        color: #fff;
        font-weight: bold;
    }

    .text-slider p {
        font-size: 1.6em;
        color: #fff;
    }

    .text-slider .slider-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        display: flex;
        justify-content: space-between;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .text-slider:hover .slider-nav {
        opacity: 1;
    }

    .text-slider .slider-nav .arrow {
        cursor: pointer;
        padding: 10px;
        border-radius: 50%;
        transition: background-color 0.3s ease;
        color: #fff;
        font-size: 24px;
    }

@media (max-width: 767px) {
    .text-slider {
        margin-top: 40px;
        height: 300px;
    }

        .text-slider .slide h2 {
            font-size: 2em;
        }

        .text-slider .slide p {
            font-size: 0.8em;
        }
}


/* ------------------------------------------------------------
   3) FLIP-CARDS DE VALORES (Compromiso / Agilidad / Transformación)
   Una sola definición .card; la azul usa el modificador .card--dark.
   El giro se hace por CSS (:hover), sin JS.
   ------------------------------------------------------------ */
.card {
    width: 100%;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: auto;
    background-color: #F5F5F5;
    position: relative;
    perspective: 1000px;
    cursor: pointer;
    font-family: "Futura", sans-serif;
}

.card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.card-back {
    transform: rotateY(180deg);
    background-color: #F5F5F5;
}

.card img {
    width: auto;
    height: 100%;
    max-height: 80%;
    object-fit: cover;
    margin-bottom: 10px;
}

.card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .card .card-content h3 {
        margin: 0;
        font-weight: bold;
        font-size: 1.5em;
    }

    .card .card-content p {
        font-size: 1.2em;
        color: #333;
    }

/* Modificador: tarjeta azul (Transformación) */
.card.card--dark {
    background-color: #132a56;
}

    .card.card--dark .card-back {
        background-color: #132a56;
    }

    .card.card--dark .card-content h3 {
        color: #fff;
    }

    .card.card--dark .card-content p {
        font-size: 1.6em;
        color: #fff;
    }

@media (max-width: 729px) {
    .card.card--dark {
        height: 200px;
        width: 300px;
    }

        .card.card--dark .card-content p {
            font-size: 1.4em;
        }
}


/* ------------------------------------------------------------
   4) CARRUSEL DE SERVICIOS
   box-sizing acotado al carrusel (antes era * global).
   El background-image de cada slide queda inline (es contenido).
   ------------------------------------------------------------ */
.carousel-container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

    .carousel-container * {
        box-sizing: border-box;
    }

.carousel-slide {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    flex: 0 0 calc(33.33% - 20px);
    padding: 50px;
    text-align: center;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 30px;
    font-family: "Futura", sans-serif;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.carousel-content {
    margin-top: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .carousel-content h2 {
        color: #fff;
        font-size: 28px;
    }

    .carousel-content .btn-servicio {
        color: #fff;
        background-color: #4b5388;
        border-radius: 10px;
        font-weight: bold;
        /* Propiedades recomendadas al convertir de button a enlace: */
        text-decoration: none;
        display: inline-block;
        padding: 10px 20px; /* Ajusta este valor si tu botón quedó muy pequeño */
    }

        .carousel-content .btn-servicio:hover {
            color: #fff;
            background-color: #132a56;
        }

    .carousel-content p {
        color: #fff;
        font-size: 18px;
    }

.carousel-prev, .carousel-next {
    font-size: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.carousel-prev {
    left: -10px;
}

.carousel-next {
    right: -10px;
}

    .carousel-prev:hover, .carousel-next:hover {
        opacity: 1;
        color: #132a56;
        background-color: transparent;
    }

    .carousel-prev:active, .carousel-next:active {
        outline: none;
    }

@media (max-width: 767px) {
    .carousel-slide {
        align-items: center;
        flex-direction: column;
        gap: 30px;
        transform: none !important;
    }

    .carousel-item {
        flex: 1 0 100%;
        max-width: 400px;
    }

    .carousel-content h2 {
        font-size: 24px;
    }

    .carousel-content p {
        font-size: 16px;
    }

    .carousel-prev, .carousel-next {
        display: none;
    }
}