.elementor-2 .elementor-element.elementor-element-67129d81{--display:flex;}.elementor-2 .elementor-element.elementor-element-2f8595f{--display:flex;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2 .elementor-element.elementor-element-d892507 .elementor-menu-toggle{margin:0 auto;}.elementor-2 .elementor-element.elementor-element-d892507 .elementor-nav-menu .elementor-item{font-family:"Lora", Sans-serif;font-weight:600;}.elementor-2 .elementor-element.elementor-element-d892507 .elementor-nav-menu--main .elementor-item{color:#000000;fill:#000000;}.elementor-2 .elementor-element.elementor-element-d892507 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-2 .elementor-element.elementor-element-d892507 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-2 .elementor-element.elementor-element-d892507 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-2 .elementor-element.elementor-element-d892507 .elementor-nav-menu--main .elementor-item:focus{color:#007DFF;fill:#007DFF;}.elementor-2 .elementor-element.elementor-element-d892507 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-2 .elementor-element.elementor-element-d892507 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#007DFF;}.elementor-2 .elementor-element.elementor-element-d892507 .e--pointer-framed .elementor-item:before,
					.elementor-2 .elementor-element.elementor-element-d892507 .e--pointer-framed .elementor-item:after{border-color:#007DFF;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-2 .elementor-element.elementor-element-72cca02{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-72cca02 .elementor-divider-separator{width:0%;}.elementor-2 .elementor-element.elementor-element-72cca02 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-2 .elementor-element.elementor-element-b7681d0{--display:flex;}.elementor-2 .elementor-element.elementor-element-e1fa611{--display:flex;}.elementor-2 .elementor-element.elementor-element-729e0d3{--display:flex;}.elementor-2 .elementor-element.elementor-element-6d0aa5f{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-6d0aa5f .elementor-divider-separator{width:100%;}.elementor-2 .elementor-element.elementor-element-6d0aa5f .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.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-2 .elementor-element.elementor-element-3110f7a{text-align:center;}.elementor-2 .elementor-element.elementor-element-3110f7a .elementor-heading-title{font-family:"Lora", Sans-serif;font-size:44px;font-weight:600;color:#666666;}.elementor-2 .elementor-element.elementor-element-d7fb726{--display:flex;}.elementor-2 .elementor-element.elementor-element-68c0454{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-68c0454 .elementor-divider-separator{width:0%;}.elementor-2 .elementor-element.elementor-element-68c0454 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-2 .elementor-element.elementor-element-f4fe295{--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-2 .elementor-element.elementor-element-dde7854{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-dde7854 .elementor-divider-separator{width:0%;}.elementor-2 .elementor-element.elementor-element-dde7854 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-2 .elementor-element.elementor-element-f31727f{--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-2 .elementor-element.elementor-element-67a9c30{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-67a9c30 .elementor-divider-separator{width:0%;}.elementor-2 .elementor-element.elementor-element-67a9c30 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-2 .elementor-element.elementor-element-4653547{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-4653547 .elementor-divider-separator{width:0%;}.elementor-2 .elementor-element.elementor-element-4653547 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-2 .elementor-element.elementor-element-7881e51{--display:flex;}.elementor-2 .elementor-element.elementor-element-57431b0{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-57431b0 .elementor-divider-separator{width:0%;}.elementor-2 .elementor-element.elementor-element-57431b0 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}/* Start custom CSS for html, class: .elementor-element-e4ba6e4 *//* Contenedor General Equipo */
.colors4mi-team-top {
    padding: 80px 20px 20px 20px; /* Margen superior amplio */
    max-width: 1200px;
    margin: 0 auto;
}

.team-wrapper {
    position: relative;
}

.split-layout-reverse {
    display: flex;
    flex-direction: row-reverse; /* Invierte el orden: imagen derecha, texto izquierda */
    align-items: center;
    position: relative;
    min-height: 500px;
}

/* Contenedor de la Imagen (Derecha) */
.image-container-right {
    width: 65%;
    height: 450px;
}

.image-container-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* Cuadro de Contenido (Izquierda) */
.content-box-left {
    position: absolute;
    left: 0; /* Lo anclamos a la izquierda */
    width: 45%;
    z-index: 10;
    font-family: 'Lora', Serif;
    font-size: 40px ¡important;
}

.floating-frame-card-team {
    position: relative;
    background: rgba(248, 248, 248, 0.9); /* Gris muy clarito transparente */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 50px;
    box-sizing: border-box;
}

/* EL MARCO FLOTANTE (Hueco Transparente) */
.floating-frame-card-team::after {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 1px solid #828181; /* Gris 2 tonos más oscuro */
    pointer-events: none;
    z-index: -1;
}

.floating-frame-card-team h3 {
    margin-top: 0;
    color: #555;
    font-size: 1.8rem;
}

.floating-frame-card-team p {
    color: #666;
    line-height: 1.7;
}

/* Ajuste Móvil */
@media (max-width: 850px) {
    .split-layout-reverse {
        flex-direction: column; /* En móvil la imagen arriba y el texto abajo */
    }
    .image-container-right, .content-box-left {
        width: 100%;
        position: relative;
    }
    .content-box-left {
        margin-top: 40px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d2ed02e *//* CONTENEDOR GENERAL */
.c4mi-historia-seccion {
    padding: 100px 20px; /* Más espacio para que el marco no se corte */
    max-width: 1200px;
    margin: 0 auto;
}

.c4mi-historia-flex {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 500px;
}

/* LA IMAGEN */
.c4mi-historia-img {
    width: 65%;
    height: 450px;
}

.c4mi-historia-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* EL CUADRO FLOTANTE */
.c4mi-historia-cuadro {
    position: absolute;
    right: 0;
    width: 45%;
    background: rgba(248, 248, 248, 0.95);
    padding: 50px;
    box-sizing: border-box;
    z-index: 10;
    /* No ponemos borde aquí, lo ponemos en el pseudo-elemento */
}

/* EL MARCO EXTERIOR (La línea que pides) */
.c4mi-historia-cuadro::after {
    content: "";
    position: absolute;
    top: -20px;    /* Distancia hacia afuera (arriba) */
    left: -20px;   /* Distancia hacia afuera (izquierda) */
    right: -20px;  /* Distancia hacia afuera (derecha) */
    bottom: -20px; /* Distancia hacia afuera (abajo) */
    border: 1px solid #828181; /* COLOR DE LA LÍNEA */
    pointer-events: none;
    z-index: -1;
}

/* --- EDICIÓN DE TEXTOS --- */
.c4mi-historia-titulo {
    font-family: 'Lora', serif !important; 
    font-size: 26px !important;            /* Tamaño Título */
    color: #555555 !important;             /* Color Título */
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.c4mi-historia-texto {
    font-family: 'Lora', serif !important; 
    font-size: 16px !important;            /* Tamaño Texto */
    color: #666666 !important;             /* Color Texto */
    line-height: 1.7 !important;
}

/* MÓVIL */
@media (max-width: 850px) {
    .c4mi-historia-flex { flex-direction: column; }
    .c4mi-historia-img, .c4mi-historia-cuadro { width: 100%; position: static; }
    .c4mi-historia-cuadro { margin-top: 40px; }
    .c4mi-historia-cuadro::after { display: none; } /* Quitamos el marco en móvil para que no se amontone */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f759140 *//* --- CONTENEDOR PRINCIPAL --- */
.c4mi-wrapper-superior {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea a la izquierda */
}

/* --- EL CUADRO (PARTE SUPERIOR) --- */
.c4mi-floating-card-top {
    position: relative;
    z-index: 99;
    
    /* POSICIONAMIENTO */
    margin-bottom: -210px; /* ESTO HACE QUE LA IMAGEN SE META DEBAJO DEL CUADRO */
    margin-left: 6%;      /* Ajusta este % para moverlo a la izquierda o derecha */
    
    width: 90%;
    max-width: 500px;
}

.c4mi-bg-image-full {
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center;
    z-index: 1; /* Queda por debajo del cuadro */
}

/* --- ESTILOS DE COLOR Y BORDE (Editables) --- */

.c4mi-inner-border {
    border: 1px solid #555555;
    padding: 15px;
    background: transparent;
}

.c4mi-box-content-final {
    background-color: #fcfbf9; /* Tu color crema */
    padding: 40px;
    text-align: center;
}

.c4mi-box-content-final h2 {
    font-family: 'Lora', serif;
    font-size: 26px;
    color: #555555;
    margin-bottom: 20px;
}

.c4mi-box-content-final p {
    font-family: 'Lora', serif;
    font-size: 16px;
    color: #555555;
    line-height: 1.7;
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .c4mi-floating-card-top { margin-bottom: -50px; margin-left: auto; margin-right: auto; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-634c66c *//* Contenedor Principal con margen superior */
.colors4mi-web-container {
    padding: 80px 20px 20px 20px; /* Mucho espacio arriba y a los lados */
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Lora',Serif;
    background-color: #ffffff;
}

/* Separación entre secciones */
.section-wrapper {
    margin-bottom: 100px; /* Separación clara entre cada bloque */
    position: relative;
}

/* --- HISTORIA: Imagen y cuadro superpuesto --- */
.history-container {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 500px;
}

.image-bg {
    width: 72%;
    height: 450px;
}

.image-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.floating-border-card {
    position: absolute;
    right: 0;
    width:45%;
    heigh:40%;
    top: 50%;
    transform: translateY(-40%);
    
    /* CUADRO: Gris muy clarito y transparente */
    background: rgba(248, 248, 248, 0.9); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    padding: 50px; 
    box-sizing: border-box;
    .floating-border-card h2, 
.floating-border-card h3 {
    font-family: 'Lora', serif !important; /* Aquí cambias la fuente */
    font-size: 30px !important;            /* Aquí cambias el tamaño */
    color: #555 !important;             /* Aquí el color del título */
    margin-bottom: 15px !important;
}
}

/* LA LÍNEA DE FUERA (El marco que rodea) */
.floating-border-card::after {
    content: "";
    position: absolute;
    /* Aquí creamos el hueco: el marco es más grande que el cuadro */
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    
    /* La línea 2 tonos más oscura que el cuadro */
    border: 1px solid #828181; 
    
    /* Importante: para que no bloquee el click al texto */
    pointer-events: none; 
    z-index: -1;
}
}

/* Ajuste para que la imagen de la historia tenga un poco de margen y no choque con el marco */
.image-bg {
    width: 65%; /* La he reducido un pelín para que el marco tenga espacio */
    height: 450px;
    overflow: hidden;
}

/* --- IMPACTO SOCIAL: Cuadro limpio abajo --- */
.impact-container {
    display: flex;
    justify-content: center;
}

.floating-border-card-simple {
    border: 1px solid #555;
    padding: 60px;
    max-width: 800px;
    text-align: center;
    background: #fdfdfb;
    font-size
}

/* --- MISIÓN, VISIÓN, VALORES --- */
.mvv-grid {
    display: flex;
    gap: 0; /* Lo separamos por líneas, no por huecos */
    color:#555;
    border-top: 1px solid #000000;
    padding-top: 80px;
}

.mvv-item {
    flex: 1;
    padding: 0 40px;
    text-align: center;
    border-right: 2px solid #999; /* Línea divisoria vertical */
}

.mvv-item:last-child {
    border-right: none;
}

.mvv-item h4 {
    letter-spacing: 3px;
    color: #;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

/* --- RESPONSIVE (Móviles) --- */
@media (max-width: 768px) {
    .history-container {
        flex-direction: column;
    }
    .image-bg, .floating-border-card {
        width: 100%;
        position: relative;
        right: auto;
        top: auto;
        transform: none;
    }
    .mvv-grid {
        flex-direction: column;
        gap: 50px;
    }
    .mvv-item {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 30px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2181fce */.c4mi-elegirnos-interactivo {
    max-width: 1000px;
    margin: 0px auto;
    padding: 20px;
    text-align: center;
}
.titulo-seccion {
    font-family: 'Playfair Display', serif; /* O la fuente que uses */
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 40px; /* Espacio entre el título y los cuadros */
    font-weight: bold;
}

/* Configuración del Grid 2x2 */
.c4mi-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas */
    gap: 40px;
    perspective: 800px; /* Necesario para el efecto 3D */
}

/* Estructura de la Tarjeta */
.c4mi-card {
    height: 250px;
    cursor: pointer;
}

.c4mi-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Al pasar el ratón o pulsar (hover), la tarjeta gira y crece un poco */
.c4mi-card:hover .c4mi-card-inner {
    transform: rotateY(180deg) scale(1.05);
}

.c4mi-card-front, .c4mi-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Oculta la cara que no se ve */
    border: 1px solid #d1d1d1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
}

/* Cara Frontal (Texto) */
.c4mi-card-front {
    background-color: rgba(248, 248, 248, 0.95);
}

/* Cara Trasera (Imagen) */
.c4mi-card-back {
    background-size: cover;
    background-position: center;
    transform: rotateY(180deg);
    color: white;
}

.c4mi-overlay-text {
    background: rgba(0, 0, 0, 0.4); /* Fondo oscuro suave para leer sobre la imagen */
    padding: 10px;
    font-family: 'Lora', serif;
    font-size: 16px;
}

/* Estilos de Tipografía */
.c4mi-card-num {
    font-family: 'Lora', serif;
    color: #999;
    letter-spacing: 2px;
    font-size: 14px;
    margin-bottom: 10px;
}

.c4mi-card-front h4 {
    font-family: 'Lora', serif !important;
    color: #555 !important;
    font-size: 22px !important;
    margin-bottom: 15px !important;
}

.c4mi-card-front p {
    font-size: 15px !important;
    color: #666 !important;
    line-height: 1.6;
}

/* Adaptación a Móvil (1 sola columna) */
@media (max-width: 768px) {
    .c4mi-grid-2x2 {
        grid-template-columns: 1fr;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6352a6c *//* Contenedor principal */
.tutorial-cta-container {
    background-color: #f8f9fa; /* Color de fondo suave */
    border-radius: 12px;
    padding: 40px 20px;
    margin: 200px auto;
    max-width: 800px;
    text-align: center;
    border: 1px solid #e9ecef;
}

/* Etiqueta superior pequeña */
.tutorial-tag {
    display: inline-block;
    background-color: #e2e8f0;
    color: #475569;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* Título */
.tutorial-cta-container h2 {
    color: #1a202c;
    font-size: 1.8rem;
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Descripción */
.tutorial-cta-container p {
    color: #4a5568;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* Botón */
.tutorial-button {
    display: inline-flex;
    align-items: center;
    background-color: #0073aa; /* El azul clásico de WP o cámbialo por tu color */
    color: #ffffff !important;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    gap: 10px;
}

.tutorial-button:hover {
    background-color: #005177;
    transform: translateY(-2px);
    color: #ffffff !important;
}

/* Ajuste para móviles */
@media (max-width: 600px) {
    .tutorial-cta-container {
        padding: 30px 15px;
    }
    .tutorial-cta-container h2 {
        font-size: 1.5rem;
    }
}/* End custom CSS */