.elementor-16 .elementor-element.elementor-element-6ee8e9a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-16 .elementor-element.elementor-element-aff319f{--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-16 .elementor-element.elementor-element-69ebd9f{--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-16 .elementor-element.elementor-element-69ebd9f:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-69ebd9f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://varelasecurity.com/wp-content/uploads/2026/05/Diseno-sin-titulo-2026-05-23T211253.754.png");background-position:top right;background-repeat:no-repeat;background-size:cover;}.elementor-16 .elementor-element.elementor-element-7e3aa47{--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-16 .elementor-element.elementor-element-5ae91a3{--display:flex;}.elementor-16 .elementor-element.elementor-element-d7562ed{--display:flex;}.elementor-16 .elementor-element.elementor-element-9c2af56{--display:flex;}.elementor-16 .elementor-element.elementor-element-115b04e{--display:flex;}@media(min-width:768px){.elementor-16 .elementor-element.elementor-element-aff319f{--width:50%;}.elementor-16 .elementor-element.elementor-element-69ebd9f{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-aef7581 *//* Contenedor Principal */
.info-grid-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: #0B1C26; /* NUEVO FONDO AZUL OSCURO */
    padding: 40px 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #ffffff;
}

/* Elemento Individual */
.info-item {
    flex: 1;
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-right: 1px solid #1a3340; /* Línea divisoria un poco más clara que el fondo */
}

.info-item.no-border {
    border-right: none;
}

/* Iconos */
.icon-wrapper {
    color: #db2e2e; /* Rojo mantenido */
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

/* Títulos */
.info-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 15px 0;
    line-height: 1.4;
    letter-spacing: 0.5px;
    color: #f0f0f0;
}

/* Descripción */
.info-desc {
    font-size: 13px;
    font-weight: 400;
    color: #b0b0b0;
    margin: 0;
    line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 767px) {
    .info-grid-container {
        flex-direction: column;
        padding: 20px;
    }
    
    .info-item {
        border-right: none;
        border-bottom: 1px solid #1a3340;
        padding: 25px 0;
    }
    
    .info-item.no-border {
        border-bottom: none;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-68e4799 *//* Contenedor General */
.metodologia-container {
    background-color: #56778C; /* COLOR SOLICITADO */
    padding: 50px 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
}

/* Encabezado */
.metodologia-header {
    text-align: center;
    margin-bottom: 40px;
}

.sub-label {
    display: block;
    color: #db2e2e; /* Rojo */
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.main-title {
    color: #1a1a1a; /* Gris muy oscuro casi negro */
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

/* Wrapper de la línea de tiempo */
.timeline-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding-top: 20px;
}

/* Línea conectora (Fondo) */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 50px; /* Altura para alinear con centros de iconos */
    left: 0;
    right: 0;
    height: 2px;
    background-color: #b0c4d0; /* Color de la línea sutil */
    z-index: 0;
}

/* Punto de inicio y fin de la línea */
.timeline-wrapper::after {
    content: '';
    position: absolute;
    top: 50px;
    left: -6px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #b0c4d0;
    z-index: 0;
    /* Para simular el punto final, necesitarías un pseudo-elemento en el último hijo o ajustar con JS. 
       En CSS puro dejamos un punto inicial y el final se corta o se ajusta con padding */
}

/* Elemento de paso */
.step-item {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

/* Círculo del icono */
.step-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cccccc;
    margin-bottom: 10px;
    position: relative;
}

.step-icon-wrapper svg {
    width: 28px;
    height: 28px;
    color: #333333;
}

/* Número Rojo */
.step-number {
    background-color: #c9302c; /* Rojo más oscuro para número */
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    position: relative;
    top: -5px; /* Ligeramente superpuesto */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Textos */
.step-title {
    font-size: 12px;
    font-weight: 800;
    color: #1a1a1a;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.step-desc {
    font-size: 12px;
    color: #e6e6e6; /* Blanco roto / gris claro para contraste sobre fondo oscuro */
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
}

/* Flechas entre pasos (Decoración CSS) */
.step-item:not(:last-child)::after {
    content: '▶';
    position: absolute;
    right: -15px;
    top: 50px; /* Altura del icono */
    font-size: 10px;
    color: #b0c4d0;
    z-index: 2;
}

/* RESPONSIVE */
@media (max-width: 767px) {
    .timeline-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .timeline-wrapper::before {
        display: none; /* Ocultar línea horizontal en móvil */
    }
    
    .step-item {
        width: 100%;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding-bottom: 20px;
    }
    
    .step-item:not(:last-child)::after {
        display: none;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-75848ac *//* Contenedor General */
.metodologia-container {
    background-color: #56778C; /* COLOR SOLICITADO */
    padding: 50px 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
}

/* Encabezado */
.metodologia-header {
    text-align: center;
    margin-bottom: 40px;
}

.sub-label {
    display: block;
    color: #db2e2e; /* Rojo */
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.main-title {
    color: #1a1a1a; /* Gris muy oscuro casi negro */
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

/* Wrapper de la línea de tiempo */
.timeline-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding-top: 20px;
}

/* Línea conectora (Fondo) */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 50px; /* Altura para alinear con centros de iconos */
    left: 0;
    right: 0;
    height: 2px;
    background-color: #b0c4d0; /* Color de la línea sutil */
    z-index: 0;
}

/* Punto de inicio y fin de la línea */
.timeline-wrapper::after {
    content: '';
    position: absolute;
    top: 50px;
    left: -6px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #b0c4d0;
    z-index: 0;
    /* Para simular el punto final, necesitarías un pseudo-elemento en el último hijo o ajustar con JS. 
       En CSS puro dejamos un punto inicial y el final se corta o se ajusta con padding */
}

/* Elemento de paso */
.step-item {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

/* Círculo del icono */
.step-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cccccc;
    margin-bottom: 10px;
    position: relative;
}

.step-icon-wrapper svg {
    width: 28px;
    height: 28px;
    color: #333333;
}

/* Número Rojo */
.step-number {
    background-color: #c9302c; /* Rojo más oscuro para número */
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    position: relative;
    top: -5px; /* Ligeramente superpuesto */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Textos */
.step-title {
    font-size: 12px;
    font-weight: 800;
    color: #1a1a1a;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.step-desc {
    font-size: 12px;
    color: #e6e6e6; /* Blanco roto / gris claro para contraste sobre fondo oscuro */
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
}

/* Flechas entre pasos (Decoración CSS) */
.step-item:not(:last-child)::after {
    content: '▶';
    position: absolute;
    right: -15px;
    top: 50px; /* Altura del icono */
    font-size: 10px;
    color: #b0c4d0;
    z-index: 2;
}

/* RESPONSIVE */
@media (max-width: 767px) {
    .timeline-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .timeline-wrapper::before {
        display: none; /* Ocultar línea horizontal en móvil */
    }
    
    .step-item {
        width: 100%;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding-bottom: 20px;
    }
    
    .step-item:not(:last-child)::after {
        display: none;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2604f3d *//* Contenedor General */
.metodologia-container {
    background-color: #56778C; /* COLOR SOLICITADO */
    padding: 50px 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
}

/* Encabezado */
.metodologia-header {
    text-align: center;
    margin-bottom: 40px;
}

.sub-label {
    display: block;
    color: #db2e2e; /* Rojo */
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.main-title {
    color: #1a1a1a; /* Gris muy oscuro casi negro */
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

/* Wrapper de la línea de tiempo */
.timeline-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding-top: 20px;
}

/* Línea conectora (Fondo) */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 50px; /* Altura para alinear con centros de iconos */
    left: 0;
    right: 0;
    height: 2px;
    background-color: #b0c4d0; /* Color de la línea sutil */
    z-index: 0;
}

/* Punto de inicio y fin de la línea */
.timeline-wrapper::after {
    content: '';
    position: absolute;
    top: 50px;
    left: -6px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #b0c4d0;
    z-index: 0;
    /* Para simular el punto final, necesitarías un pseudo-elemento en el último hijo o ajustar con JS. 
       En CSS puro dejamos un punto inicial y el final se corta o se ajusta con padding */
}

/* Elemento de paso */
.step-item {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

/* Círculo del icono */
.step-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cccccc;
    margin-bottom: 10px;
    position: relative;
}

.step-icon-wrapper svg {
    width: 28px;
    height: 28px;
    color: #333333;
}

/* Número Rojo */
.step-number {
    background-color: #c9302c; /* Rojo más oscuro para número */
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    position: relative;
    top: -5px; /* Ligeramente superpuesto */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Textos */
.step-title {
    font-size: 12px;
    font-weight: 800;
    color: #1a1a1a;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.step-desc {
    font-size: 12px;
    color: #e6e6e6; /* Blanco roto / gris claro para contraste sobre fondo oscuro */
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
}

/* Flechas entre pasos (Decoración CSS) */
.step-item:not(:last-child)::after {
    content: '▶';
    position: absolute;
    right: -15px;
    top: 50px; /* Altura del icono */
    font-size: 10px;
    color: #b0c4d0;
    z-index: 2;
}

/* RESPONSIVE */
@media (max-width: 767px) {
    .timeline-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .timeline-wrapper::before {
        display: none; /* Ocultar línea horizontal en móvil */
    }
    
    .step-item {
        width: 100%;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding-bottom: 20px;
    }
    
    .step-item:not(:last-child)::after {
        display: none;
    }
}/* End custom CSS */