.elementor-14 .elementor-element.elementor-element-d5b47b8 > .elementor-container{min-height:400px;}.elementor-14 .elementor-element.elementor-element-d5b47b8{margin-top:-35em;margin-bottom:0em;}.elementor-14 .elementor-element.elementor-element-0f25184 > .elementor-container{min-height:30px;}.elementor-14 .elementor-element.elementor-element-0f25184{box-shadow:0px 0px 50px 70px #FFFFFF;z-index:2;}.elementor-14 .elementor-element.elementor-element-12420d2{z-index:3;}.elementor-14 .elementor-element.elementor-element-cea9fec{--spacer-size:50px;}.elementor-14 .elementor-element.elementor-element-ff00add{margin-top:052px;margin-bottom:0px;}.elementor-14 .elementor-element.elementor-element-394c8c8{--spacer-size:12px;}.elementor-14 .elementor-element.elementor-element-cbe2bcd{text-align:center;}.elementor-14 .elementor-element.elementor-element-cbe2bcd .elementor-heading-title{font-family:"Inter", Sans-serif;}.elementor-14 .elementor-element.elementor-element-fb781f1{--spacer-size:28px;}.elementor-14 .elementor-element.elementor-element-1950442{font-size:22px;}.elementor-14 .elementor-element.elementor-element-14f9426{--spacer-size:28px;} .elementor-14 .elementor-element.elementor-element-489e868 .box-button, .elementor-14 .elementor-element.elementor-element-489e868 .box-button .popup-icon,  .elementor-14 .elementor-element.elementor-element-489e868 .box-button:hover,  .elementor-14 .elementor-element.elementor-element-489e868 .box-button:focus, .elementor-14 .elementor-element.elementor-element-489e868 .box-hover:hover .box-button{background:#007AFF;}.elementor-14 .elementor-element.elementor-element-489e868 > .elementor-widget-container{border-radius:8px 8px 8px 8px;}.elementor-14 .elementor-element.elementor-element-489e868 {--box-button-padding-top:18px;--box-button-padding-right:18px;--box-button-padding-bottom:18px;--box-button-padding-left:18px;}.elementor-14 .elementor-element.elementor-element-489e868 .box-button{padding:18px 18px 18px 18px;border-radius:8px 8px 8px 8px;}.elementor-14 .elementor-element.elementor-element-71037f9{--spacer-size:50px;}.elementor-14 .elementor-element.elementor-element-b2567b8:not(.elementor-motion-effects-element-type-background), .elementor-14 .elementor-element.elementor-element-b2567b8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#007AFF1F;}.elementor-14 .elementor-element.elementor-element-b2567b8{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;}.elementor-14 .elementor-element.elementor-element-b2567b8 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-14 .elementor-element.elementor-element-e30c141{max-width:initial;flex:1 0 0;min-width:25px;}.elementor-14 .elementor-element.elementor-element-e30c141 > .elementor-element-populated{margin:-12px -12px -12px -12px;--e-column-margin-right:-12px;--e-column-margin-left:-12px;}.elementor-14 .elementor-element.elementor-element-1d262ec{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-14 .elementor-element.elementor-element-1d262ec > .elementor-widget-container{margin:0px 0px 0px 0px;}@media(max-width:700px){.elementor-14 .elementor-element.elementor-element-d5b47b8{margin-top:-19em;margin-bottom:0em;}}/* Start custom CSS for html, class: .elementor-element-7140d1d */.flip-card {
  display: block;
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 280px;
  perspective: 1000px;
  margin: 16px auto;
  cursor: pointer;
}

.flip-card input {
  display: none; /* Oculta el checkbox */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  border-radius: 12px;
  box-shadow: 0px 6px 12px 2px rgba(0, 0, 0, 0.3);
}

.flip-card:hover .flip-card-inner {
  box-shadow: 0px 12px 24px 6px rgba(0, 0, 0, 0.4);
}

/* Cuando se hace clic, gira la tarjeta */
.flip-card input:checked + .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  text-align: center;
}

.flip-card-front img.card-logo {
  width: 100px;
  height: auto;
  margin-bottom: 16px;
}

.flip-card-front h3 {
  font-size: 1.2rem;
  color: #222;
}

.flip-card-back {
  transform: rotateY(180deg);
  background: #f9fafb;
  color: #333;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

/* --- ESTILOS SOLO PARA TEXTO EN MÓVILES --- */
@media (max-width: 480px) {
  
  /* Reduce el padding en el reverso para dar más espacio */
  .flip-card-back {
    padding: 16px;
  }

  /* Reduce el tamaño de la fuente en el reverso */
  .flip-card-back h3 {
    font-size: 1.1rem; /* Un poco más pequeño */
  }

  .flip-card-back p {
    font-size: 0.875rem; /* 14px, más pequeño */
    line-height: 1.4; /* Ajusta el interlineado */
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-620c8a6 *//* --- Contenedor de la Sección de Servicios --- */

/* --- ESTILOS PARA EL TÍTULO DE LA SECCIÓN --- */

.section-header {
    text-align: center;
    margin-bottom: 40px; /* Espacio entre el título y los items */
}

.section-main-title {
    font-size: 2.2rem; /* Tamaño del título principal */
    font-weight: 700;
    color: #222; /* Color oscuro */
    margin: 0;
    line-height: 1.2;
}

.section-subtitle-text {
    font-size: 1.2rem; /* Tamaño del subtítulo */
    color: #007AFF; /* Tu color azul */
    font-weight: 600;
    margin: 5px 0 0 0; /* Espacio ligero desde el título */
}

.services-section {
    width: 100%;
    max-width: 1200px; /* Ancho máximo de la sección */
    margin: 50px auto; /* Centrar la sección en la página */
    padding: 20px;
    box-sizing: border-box;
}

/* --- Contenedor de los 4 Items (Usamos Flexbox) --- */
.services-container {
    display: flex;
    justify-content: center; /* Centra los items */
    flex-wrap: wrap; /* Permite que los items pasen abajo en móviles */
    gap: 30px; /* Espacio entre los items */
}

/* --- Cada Item de Servicio Individual --- */
.service-item {
    /* Cada item crecerá pero no más de 300px */
    flex-grow: 1;
    flex-basis: 250px; /* Ancho base mínimo antes de "envolverse" */
    max-width: 300px; /* Ancho máximo */
    
    text-align: center; /* Centra todo el contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Estilo de los Iconos (como en tu imagen) --- */
.service-icon-background {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f5f5f5; /* El círculo gris claro de fondo */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.service-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #007AFF; /* <-- COLOR CAMBIADO */
    color: white; /* Color del símbolo del icono */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px; /* Tamaño del símbolo del icono */
}

/* --- Estilos de Texto --- */
.service-title {
    font-size: 1.2rem; /* 19px */
    font-weight: 700;
    color: #222;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

.service-subtitle {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: #555;
    margin: 0;
    /* Ajuste para que el subtítulo no se corte */
    min-height: 2.2rem; 
}

/* --- Separador Azul --- */
.service-separator {
    display: block;
    width: 50px;
    height: 3px;
    background-color: #007AFF; /* <-- COLOR CAMBIADO */
    margin: 15px auto; /* Centrado, con espacio arriba y abajo */
}

.service-description {
    font-size: 0.9rem; /* 14.4px */
    color: #666;
    margin-bottom: 20px;
    /* Asegura que todos los textos de descripción tengan un espacio similar */
    flex-grow: 1; 
}

/* --- Botón/Enlace de "Call to Action" (CTA) --- */
.service-cta {
    font-size: 0.9rem;
    font-weight: 700;
    color: #007AFF; /* <-- COLOR CAMBIADO */
    text-decoration: none;
    transition: all 0.2s ease;
}

.service-cta:hover {
    color: #333; /* Color al pasar el mouse */
    text-decoration: underline;
}

/* Flecha simple para el CTA */
.service-cta::after {
    content: ' →';
    margin-left: 5px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ea3c729 *//* --- ESTILOS SECCIÓN CREDENCIALES Y CONFIANZA --- */

/* Fondo de la sección para destacarla */
.trust-section {
    width: 100%;
 /* Un fondo sutil para diferenciarla */
    padding: 60px 20px;
    margin: 50px 0; /* Espacio antes y después de la sección */
    box-sizing: border-box;
}

/* Re-usamos los estilos de título que ya tenías */
.trust-section .section-header {
    margin-bottom: 50px; /* Más espacio para las métricas */
}

/* Contenedor principal de las 3 métricas */
.stats-container {
    max-width: 1000px; /* Ancho máximo del contenedor */
    margin: 0 auto;
    display: flex;
    justify-content: space-around; /* Distribuye las métricas */
    flex-wrap: wrap; /* Para que se apilen en móviles */
    gap: 30px; /* Espacio entre items en móviles */
}

/* Cada métrica individual */
.stat-item {
    flex-grow: 1;
    flex-basis: 220px; /* Ancho base de cada item */
    max-width: 300px; /* Ancho máximo */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icono de la métrica */
.stat-icon {
    font-size: 3rem; /* 48px - Icono grande */
    color: #007AFF; /* Tu color azul */
    margin-bottom: 15px;
}

/* El número grande */
.stat-number {
    font-size: 3.2rem; /* 51px - ¡El número es el héroe! */
    font-weight: 700;
    color: #222;
    margin: 0;
    line-height: 1.1;
}

/* Descripción de la métrica */
.stat-description {
    font-size: 1rem; /* 16px */
    color: #555;
    margin: 5px 0 0 0;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2a4cd6f */hr.separator-simple-blue {
    /* Estilos de la línea */
    border: 0;
    border-top: 2px solid #007AFF;
    opacity: 0.5;
    width: 100px; 
    
    /* --- INICIO DEL FIX DE CENTRADO --- */
    
    /* 1. Centrado estándar (para contenedores normales) */
    margin: 32px auto; 
    
    /* 2. Centrado para contenedores Flexbox (muy común en temas) */
    align-self: center;
    
    /* 3. Reseteos de seguridad por si el tema usa 'float' o 'display' */
    display: block;
    float: none;
    clear: both;
    
    /* --- FIN DEL FIX DE CENTRADO --- */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f340bcf *//* --- Sección de Alerta (Callout) --- */
.callout-section {
    /* Esto la convierte en una sección completa */
    width: 100%;
    padding: 20px;
    margin: 40px 0; /* Espacio arriba y abajo */
    box-sizing: border-box;
}

.trust-callout {
    display: flex;
    align-items: center;
    max-width: 900px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrado */
    padding: 25px 30px;
    background-color: #f0f7ff; /* Un azul de fondo muy claro */
    border-left: 5px solid #007AFF; /* Borde con tu color de marca */
    border-radius: 5px;
}

.trust-callout .callout-icon {
    font-size: 2rem; /* Tamaño del icono */
    color: #007AFF; /* Tu color azul */
    margin-right: 25px;
    padding-top: 5px; 
    align-self: flex-start;
}

.trust-callout .callout-text {
    font-size: 1.1rem; /* 17.6px */
    line-height: 1.6;
    color: #334; /* Un color de texto oscuro */
    font-weight: 500;
    margin: 0;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1d262ec *//* --- Variables de Color (Corregidas) --- */
/* Siguiendo el patrón anterior:
  - El estado base es MÁS OSCURO.
  - El estado hover es MÁS CLARO (es 'ivcisa-primary').
*/
:root {
    /* Asignamos 'ivcisa-primary' (del config) al hover, como dice el HTML */
    --ivcisa-primary: #24a5dd; 
    
    /* Asignamos el color 'oscuro' (del botón anterior) a 'snowflake-light' */
    --snowflake-light-base: #24a5dd; 
    
    /* Versión RGB del color base (oscuro) para la sombra */
    --color-shadow-rgb: 30, 139, 192; 
}

/* --- Contenedor CTA --- */
.cta-container {
    max-width: 100%;
    min-width: 100%
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    text-align: center;
    background-color: rgba(15, 36, 89);
    padding: 4rem;
    border-radius: 24px; 
}

/* --- Título (h2) --- */
.cta-title {
    font-size: 1.875rem; 
    font-weight: 900;
    color: #fff;
    margin-bottom: 1.5rem; 
}

/* --- Subtítulo (p) --- */
.cta-subtitle {
    color: #d1d5db; /* text-gray-300 */
    font-size: 1.125rem; 
    line-height: 1.75rem;
    margin-bottom: 2rem; 
}

/* --- Botón CTA (a) --- */
.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    background-color: var(--snowflake-light-base); 
    color: #ffffff;
    border-radius: 0.75rem; 
    box-shadow: 0 10px 15px -3px rgba(var(--color-shadow-rgb), 0.5), 
                0 4px 6px -4px rgba(var(--color-shadow-rgb), 0.5);
    
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}

/* Color hover (más claro) - 'hover:bg-ivcisa-primary'
*/
.cta-button:hover {
    background-color: #1e8bc0;
    box-shadow: 0 4px 6px -1px rgba(var(--color-shadow-rgb), 0.4), 
                0 2px 4px -2px rgba(var(--color-shadow-rgb), 0.4);
}


/* --- Media Queries (Responsive) --- */
@media (min-width: 640px) {
    .cta-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .cta-title {
        font-size: 2.25rem; /* sm:text-4xl */
    }
}

@media (min-width: 1024px) {
    .cta-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}/* End custom CSS */