/*
Theme Name: CM Landing Theme
Description: Tema personalizado para CM Landing basado en Twenty Twenty-Three
Template: twentytwentythree
Version: 1.0.0
Author: CM Team
*/

/* 
==================================
ESTILOS PERSONALIZADOS CM LANDING
==================================
*/


/* ==============================
   VARIABLES GLOBALES Y GENERALES
============================== */
:root {
    --primary: #4E61F6;   /* Color primario de botones y acentos */
    --ink: #0F1130;       /* Texto principal del menú */
    --chip-bg: #ffffff;   /* Fondo claro para el chip del menú */
    --bs-primary: #1e40af; /* Integración con Bootstrap */
}


.wp-site-blocks > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Tipografía base (DM Sans desde Google Fonts) */
body {
    font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    background: #ffffff; /* Fondo por defecto */
    /* SOLUCIÓN: Asegurar que el body no corte contenido */
    overflow-x: hidden; /* Solo ocultar scroll horizontal */
    overflow-y: visible; /* Permitir que el contenido se vea verticalmente */
}

/* ==============================
   REGLAS GENERALES Y UTILIDADES
============================== */

/* Botones de bloques WP estilo Bootstrap */
.wp-block-button.is-style-fill .wp-block-button__link {
    background-color: var(--bs-primary);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: .5rem;
}

/* Evita doble separación en columnas */
.wp-block-columns.row { gap: 0; }

/* ==============================
   HEADER / NAVBAR
============================== */

/* Contenedor principal del header (posición encima del hero) */
.site-header {
  position: absolute; /* se pega arriba de la página */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
  background: transparent !important; /* sin fondo por defecto */
}

/* Versión con fondo (se aplica con JS cuando se hace scroll) */
.site-header.scrolled .menu-wrap {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Contenedor tipo “chip” de la navbar */
/* Contenedor tipo "chip" del navbar */
.menu-wrap {
    background: var(--chip-bg);
    border-radius: 18px;
    /* “border de 18px” */
    padding: 18px 28px;
    /* 18 arriba/abajo, 28 izq/der */
    border: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 9999;
}

/* Links del menú */
.navbar .nav-link {
    color: #170F49;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
    text-align: left;

}


/* Alinea todos los ítems del menú a la derecha */
.navbar .navbar-nav {
    margin-left: auto;         /* empuja el bloque de nav-items hacia la derecha */
    justify-content: flex-end; /* asegura que se peguen a la derecha dentro del contenedor */
            margin-right: 30px;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #1e225c;
}

/* Estado activo del menú */
.navbar .current-menu-item > .nav-link,
.navbar .current-menu-item > .dropdown-item {
    font-weight: 700 !important;
    text-decoration: underline !important;
    color: #4E61F6 !important;
}

/* Para elementos de dropdown activos */
.navbar .dropdown-item[aria-current="page"] {
    font-weight: 700 !important;
    text-decoration: underline !important;
    color: #4E61F6 !important;
}

/* Estilos específicos para business-intelligence y business-intellingence */
body.page-business-intelligence .navbar .current-menu-item > .nav-link,
body.page-business-intelligence .navbar .current-menu-item > .dropdown-item,
body.page-business-intelligence .navbar .dropdown-item[aria-current="page"],
body.page-business-intellingence .navbar .current-menu-item > .nav-link,
body.page-business-intellingence .navbar .current-menu-item > .dropdown-item,
body.page-business-intellingence .navbar .dropdown-item[aria-current="page"] {
    font-weight: 700 !important;
    text-decoration: underline !important;
    color: #4E61F6 !important;
}

/* Botón CTA dentro del nav */
.btn-cta {
    background: #4E61F6;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    text-align: center;
    width: 199.222229px;
    height: 50.44px;
    opacity: 1;
    padding-top: 13px;
    padding-right: 21.33px;
    padding-bottom: 14.22px;
    padding-left: 21.33px;
    border-radius: 9px;
}
.btn-contacto{
    background: #4E61F6;
    color: #FFF;
    width: fit-content;
    height: 40px;
    opacity: 1;
    padding-top: 8px;
    padding-right: 21px;
    padding-bottom: 12px;
    padding-left: 21px;
    border-radius: 12px;
    font-family: DM Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
}

.btn-cta:hover {
    background: #3f48c8;
    color: #fff;
}

/*
* Asegura que los íconos de los botones tengan un tamaño fijo.
*/
.btn-cta img,
.btn-ghost img,
.btn-scroll img{
    object-fit: contain; /* Evita que la imagen se estire o se distorsione */
    vertical-align: middle; /* Alinea el ícono verticalmente con el texto */
    margin-left: 6px;
}
.btn-scroll img{
    margin: 0px;
}

/* Toggler para móviles */
.navbar-toggler { border: 0; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,17,48,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown (ancla al <li> padre y corrige variable) */
.navbar .menu-item-has-children { position: relative; } /* <- clave */

.navbar .menu-item-has-children > .dropdown-menu {
  position: absolute;
  top: calc(100% + .5rem); /* justo debajo del link padre */
  left: 0;
  margin: 0;
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  min-width: 220px;
  z-index: 1000;
  --bs-dropdown-link-active-bg: #4E61F6 !important; /* corrige IMPRTA */
}

/* Estilos del enlace del submenú (genérico) */
.dropdown-menu a {
  display: block;
  color: #170F49;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
  padding: 8px 16px;
  border-radius: 10px;
}
.dropdown-menu a:hover {
  background-color: #4E61F6;
  color: #fff;
}


/* ==============================
   SECCIÓN HERO
============================== */

/* SOLUCIÓN: Asegurar que TODOS los contenedores relacionados no corten el botón */
html, body,
.wp-site-blocks,
.wp-block-group.hero,
.wp-block-group.hero .wp-block-group,
.wp-block-group.alignfull,
.hero,
.hero-bg {
    overflow: visible !important;
}

/* Regla específica para contenedores de WordPress durante transiciones */
.wp-block-group.hero,
.wp-block-group.hero .wp-block-group,
.hero.scroll-reveal,
.hero.scroll-reveal.is-visible {
    overflow: visible !important;
    /* Asegurar que no se corte contenido durante transiciones */
    contain: none !important;
}

.hero {
    min-height: 93vh;
    height: 93vh;
    position: relative;
    color: var(--heroText);
    isolation: isolate;
    /* SOLUCIÓN: Asegurar que el contenido que sobresale sea visible */
    overflow: visible !important;
    /* Agregar margen inferior para dar espacio al botón que sobresale */
    margin-bottom: 30px;
    /* SOLUCIÓN: Evitar que el container se corte durante transiciones */
    contain: layout !important;
    /* Asegurar que el contenido no se recorte */
    clip-path: none !important;

    /* Centrado vertical con Flexbox */
    display: flex;
    align-items: center;
}

/* El padding ahora va en el contenedor principal para que los textos no se peguen a los bordes */
.hero .container {
    padding-inline: 16px;
    
    /* El centrado ya lo maneja el padre .hero, aquí solo necesita el ancho completo */
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 237px;
}


/* Fondo del hero */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    z-index: -2;
    /* SOLUCIÓN: Asegurar que el contenido no se corte */
    overflow: visible;
}

/* Imagen de fondo móvil para dispositivos en orientación vertical */
@media (max-width: 768px) and (orientation: portrait) {
    .hero-bg[style*="--bg-mobile"] {
        background-image: var(--bg-mobile) !important;
        background-position: center center;
    }
}

/* Overlay oscuro */
.hero-overlay {
    position: absolute;
    /*inset: 0;*/
    background: linear-gradient(90deg, rgba(10, 10, 14, .68) 0%, rgba(10, 10, 14, .55) 40%, rgba(10, 10, 14, .2) 70%, rgba(10, 10, 14, 0) 100%);
    z-index: -1;
}

/* Tipografías dentro del hero con tamaño fluido */
.hero .eyebrow {
    font-size: 40px; /* Usa un valor de vw más bajo */
    font-style: normal;
    font-weight: 600;
    line-height: 48px; /* 120% */
    color: #FFF; 
}
.hero h1.display-1 {
    font-size: 48px; /* Usa un valor de vw más bajo */
    font-style: normal;
    font-weight: 600;
    line-height: 58px; /* 120.833% */
    color: #FFF;
}
.hero .hero-sub {
    font-size: 32px; /* Usa un valor de vw más bajo */
    font-style: normal;
    font-weight: 600;
    line-height: 38px; /* 118.75% */
    color: #FFF;
}

/* HOME: Tipografías específicas para la página principal */
.home .hero h1.display-1 {
    font-size: 40px !important;
    font-style: normal;
    font-weight: 600;
    line-height: 36px !important;
}

.home .hero .eyebrow {
    font-size: 30px !important;
}

.home .hero .hero-sub {
    font-size: 27px !important;
}

/* Botones en el hero */
.btn-ghost {
    width: 199.22px;
    height: 50.44px;
    opacity: 1;
    padding-top: 7px;
    padding-right: 16px;
    
    padding-left: 16px;
    border-width: 1.33px;
    border-radius: 10.667px;
}
.btn-ghost span{
    font-family: DM Sans;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
}
.btn-ghost img{
    width: 24px;
}
.btn-ghost:hover {
    border-color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
    color:white;
}

/* Scroll down pill - POSICIONADO AL FINAL DEL HERO */
.btn-scroll,
.btn-scroll-repositioned {
    position: absolute;
    left: 50%;
    bottom: -72px; /* La mitad del botón (46px/2) para que sobresalga 50% */
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    
    border: 0;
    border-radius: inherit;
    z-index: 9999; /* Z-index muy alto para que esté por encima de todo */
    /* SOLUCIÓN: Evitar que las transformaciones de contenedores padre afecten el botón */
    will-change: transform;
    backface-visibility: hidden;
}

/* Cuando el botón está reposicionado por JavaScript - mantener absolute */
.btn-scroll-repositioned {
    position: absolute !important; /* Absolute para que se posicione relativo al contenedor hero */
}
.btn-scroll:hover {
    color: #1e225c !important;
    background: #3f48c8;
}



/* Sección principal */
.metrics-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 30px 0 15px 0px;
}

/* Título de la sección */
.metrics-section .title {
    color: #4E61F6; /* Azul oscuro del mockup */
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 42px */    
}

.text-black {
    color: #000 !important;
}

/* Contenedor de cada tarjeta */
.metrics-section .metric-card {
    width: 330.666656px;
    height: 120px;
    opacity: 1;
    border-radius: 13px;
    border-width: 1px;
    border: 1px solid var(--Color-Primary-Primary-50, #EDEFFE);
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 33px 12px 33px;
    /* SOLUCIÓN: Reducir márgenes horizontales para juntar las tarjetas */
    margin-left: 10px;
    margin-right: 10px;
}

/* Ajustar el contenedor row para compensar los márgenes reducidos */
.metrics-section .row.g-4 {
    gap: 20px !important; /* Reducir el gap entre columnas */
    margin-left: -10px;
    margin-right: -10px;
}

/* Regla específica para pantallas de escritorio - tarjetas más juntas */
@media (min-width: 992px) {
    .metrics-section .metric-card {
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .metrics-section .row.g-4 {
        gap: 10px !important; /* Gap aún menor en desktop */
        margin-left: -5px;
        margin-right: -5px;
        justify-content: center; /* Centrar las columnas */
    }
    
    /* Limitar el ancho máximo de las columnas para juntarlas más */
    .metrics-section .col-lg-4 {
        flex: 0 0 auto;
        width: auto;
        max-width: 350px; /* Ancho máximo para juntar más las tarjetas */
    }
    
    /* SERVICIOS: Aplicar la misma lógica para las tarjetas de servicios */
    .services-section .service-card {
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .services-section .row.g-4 {
        gap: 8px !important; /* Gap aún menor en desktop para servicios */
        margin-left: -5px;
        margin-right: -5px;
        justify-content: center; /* Centrar las columnas */
    }
    
    /* Limitar el ancho máximo de las columnas de servicios */
    .services-section .col-lg-4 {
        flex: 0 0 auto;
        width: auto;
        max-width: 350px; /* Ancho máximo para juntar más las tarjetas de servicios */
    }
}

/* Título dentro de la tarjeta */
.metrics-section .metric-title {
    color: #4E61F6; /* Azul oscuro del mockup */
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 116.667% */
    padding-bottom: 0px;
    margin-bottom: 3px;
}

/* Texto dentro de la tarjeta */
.metrics-section .metric-text {
    color: #131927; /* Gris */
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

/* Elimina los márgenes de los bloques que interfieren con tu diseño */
.metrics-section,
.metrics-section .container {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Sección general de logos */
.logos-section {
    background: #f8f9fa;
    padding: 60px 0;
}

/* Título de la sección */
.logos-section .section-title {
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 22.4px */
    color: #6D717F;
    margin-bottom: 2rem;
}

/* Nuevo contenedor para los logos en la grilla */
.logo-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que los logos pasen a la siguiente línea */
    justify-content: center; /* Centra los logos horizontalmente */
}

/* Contenedor individual de cada logo */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    margin: 10px; /* Espacio entre los logos */
}

/* Estilo para la imagen del logo dentro del contenedor */
.logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ajusta el logo al contenedor sin deformarlo */
}

/* Estilo para cada columna para que se adapte al ancho necesario */
.logo-item {
    flex: 0 0 auto;
    width: auto;
}


/* Título principal de la sección */
.main-title {
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 38px; /* 118.75% */
    color: #495057;
}

/* Estilo de la tarjeta individual */
.service-card {
    position: relative;   
    height: 100%;
    display: flex;
    flex-direction: column;
       
    align-items: flex-start; /* <-- AÑADE ESTO para justificar a la izquierda */
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    text-decoration: none;

    width: 338.666656px;
    height: 143.73642px;
    justify-content: space-between;
    opacity: 1;
    border-radius: 9px;
    border-width: 1px;
    padding: 21px;
    background: #FFFFFF;
    border: 1px solid var(--Color-Primary-Primary-50, #EDEFFE);
    /* SOLUCIÓN: Reducir márgenes horizontales para juntar las tarjetas */
    margin-left: 5px;
    margin-right: 5px;
}

/* Ajustar el contenedor row para la sección servicios */
.services-section .row.g-4 {
    gap: 10px !important; /* Gap pequeño y consistente */
    margin-left: -5px;
    margin-right: -5px;
    justify-content: center; /* Centrar las tarjetas */
}


/* Título dentro de la tarjeta */
.card-title {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 116.667% */
    color: #4758E0;
    transition: color 0.3s ease;
    text-align: left; /* Añade esto para que el texto se justifique a la izquierda */
    width: 100%; /* Para que ocupe todo el ancho y el text-align funcione */
}

/* SERVICE CARD HOME - Texto más pequeño */
.home .services-section .card-title {
    font-size: 20px !important; /* Reducir de 24px a 20px */
    line-height: 24px !important; /* Ajustar altura de línea */
}

/* Contenedor de la flecha */
.card-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Estilo de la flecha SVG */
.arrow-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(29%) sepia(87%) saturate(5412%) hue-rotate(224deg) brightness(98%) contrast(92%); /* Color azul */
}

/* Icono dentro de la tarjeta (siempre máximo 44x44) */
.card-icon {
    max-width: 44px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain; /* asegura que no se deforme */
    display: block;
}

/* ==================
   EFECTOS HOVER
   ================== */
.service-card:hover {
    background-color: #4E61F6;
    transform: translateY(-5px); /* Pequeño efecto 3D */
}

.service-card:hover .card-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(338deg) brightness(104%) contrast(101%); /* Color blanco */
}

.service-card:hover .card-title {
    color: #fff; /* Texto en blanco */
}

.service-card:hover .card-arrow {
    opacity: 1; /* Muestra la flecha */
}

/* Estilo de la flecha al hacer hover sobre la tarjeta */
.service-card:hover .arrow-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2%) hue-rotate(338deg) brightness(104%) contrast(101%); /* Color blanco */
}

/* Estilos del footer principal */
.main-footer {
border-radius: 30px 30px 0 0;
background: #232323;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    padding-bottom: 50px;

}

.footer-logo img{
        width: 250px;
    height: 40px;
}
/* Títulos de las columnas */
.footer-title {
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 116.667% */
    margin-bottom: 1rem;
}

/* Links y texto */
.footer-link {
    color: #fff;
    text-decoration: none;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
    transition: color 0.3s ease;
}
.footer-link:hover {
    color: #ced4da; /* Un gris más claro al hacer hover */
}

/* Íconos de contacto y dirección */
.icon {
    width: 20px;
    height: 20px;
    /* Filtro para cambiar el color si los íconos originales son de otro color */
    filter: brightness(0) invert(1); /* Convierte el icono a blanco */
}

/* Contenedor principal de los íconos sociales */
.social-icons {
    display: flex;
    gap: 10px; /* Ajusta el espacio entre los íconos */
}

/* Estilo para cada ícono social */
.social-icon {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex; /* Para centrar el ícono */
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
        text-decoration: none;
}

/* Estilo para el ícono de Font Awesome dentro del contenedor */
.social-icon i {
    color: #000; /* Color negro por defecto del ícono */
    font-size: 1.25rem;
    transition: color 0.3s ease;

}

/* Efecto hover */
.social-icon:hover {
    background-color: #4E61F6; /* El color de hover del mockup */
}

.social-icon:hover i {
    color: #fff; /* El ícono se vuelve blanco en hover */
}



/* Pie de página inferior */
.footer-bottom {
    background-color: #4C4C4C; /* Un tono más claro que el fondo principal */
    color: #ffffff;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
    padding: 1rem 0; /* Agrega padding para dar espacio al contenido */
    border-radius: 12px; /* Aplica bordes redondeados a la caja */
    width: 90%; /* Ajusta el ancho para que no ocupe todo el espacio */
    margin: 0 auto; /* Centra la caja horizontalmente */
}

/* En el contenedor interno, usa flexbox para la distribución */
.footer-bottom .container {
    display: flex;
    justify-content: space-between; /* Empuja los elementos a los extremos */
    align-items: center;
    text-align: left; /* Asegura que el texto se alinee a la izquierda */
}

/* Ajustes para el texto de copyright */
.copyright {
    margin-top: 0; /* Elimina cualquier margen superior que pueda tener */
}

/* Si quieres que el enlace de privacidad se vea del mismo color que el texto de copyright */
.footer-bottom .footer-link {
    color: #ffffff;
}

/* ==============================
   ESTILOS DE FORMULARIO
============================== */

.formulario{
    padding-bottom: 80px !important;
}


/* Contenedor principal de la tarjeta de contacto */
.contact-card-container {
    background: #4E61F6; /* Color de fondo azul */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    color: #fff;
    overflow: hidden; /* Para que los bordes redondeados se apliquen bien */
}

.contact-title {
    color: #fff;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 120%; /* 48px */
    text-align: left; /* Mantenemos la alineación a la izquierda */
    width: 100%; /* El texto ocupará todo el ancho disponible */
    margin-top: 0; /* Aseguramos que no haya margen superior */
}

/* Estilo para la palabra "conectar" */
.contact-title span {
    font-weight: 600;
}

/* Etiquetas del formulario */
.wpforms-field-label{
        color: #fff !important;
    font-size: 13px !important; /* Convertido de 0.8rem */
    font-weight: 600 !important;
    margin-bottom: 8px !important; /* Convertido de 0.5rem */
}

/* Inputs y textarea */
.contact-card-container .wpforms-field input[type="text"],
.contact-card-container .wpforms-field input[type="email"],
.wpforms-field.wpforms-field-textarea textarea{
        background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    color: #fff !important;
    /* Padding en píxeles */
    padding: 12px 16px !important;
    font-size: 13px !important;
}

/* Regla específica para el textarea */
.wpforms-field.wpforms-field-textarea textarea {
    height: 115px; /* Mantiene la altura fija solo para el textarea */
}

/* Botón de Enviar */
.wpforms-submit {
    background-color: #fff !important;
    color: #4E61F6 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    transition: background-color 0.3s ease !important;
    width: 100% !important;
}
.wpforms-submit :hover {
    background-color: #e2e6ea !important;
    color: #4E61F6 !important;
}

/*
 * Ajuste para que el input del formulario ocupe el 100%
 */
.contact-card-container .wpforms-field input[type="text"],
.contact-card-container .wpforms-field input[type="email"],
.contact-card-container .wpforms-field textarea {
  width: 100% !important;
}
.wpforms-one-half.wpforms-first.form-col{
    width: 100%;
}

.wpforms-container.wpforms-container-full.wpforms-render-modern{
    margin: 0px !important;
}

/*
 * Solución definitiva para que los campos de WPForms ocupen el 100%
 */
#wpforms-503 .wpforms-field input[type="text"],
#wpforms-503 .wpforms-field input[type="email"],
#wpforms-503 .wpforms-field textarea {
    width: 100% !important;
    max-width: 100% !important;
}

/*
 * Estilos para el mensaje de confirmación de WPForms
 */
.wpforms-confirmation-container-full {
    background-color: #e5e9ff !important; /* Fondo azul claro del mockup */
    border-radius: 12px !important;
    padding: 3rem !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.wpforms-confirmation-container-full p {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: #170F49 !important; /* Color de texto oscuro que usas en el sitio */
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Estado inicial de las secciones */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* EXCEPCIÓN: El botón scroll no debe tener el efecto scroll-reveal */
.btn-scroll,
.btn-scroll-repositioned {
  opacity: 1 !important;
  transform: translateX(-50%) !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* REGLA ADICIONAL: Forzar posición del botón en todos los estados */
.btn-scroll,
.btn-scroll-repositioned,
.hero .btn-scroll,
.hero .btn-scroll-repositioned,
.scroll-reveal .btn-scroll,
.scroll-reveal .btn-scroll-repositioned {
  position: absolute !important;
  left: 50% !important;
  bottom: -72px !important;
  transform: translateX(-50%) !important;
  z-index: 10000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

/* Estado cuando la sección es visible */
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(27px);
}

/* SOLUCIÓN: Asegurar que el botón scroll no se vea afectado por scroll-reveal */
.hero.scroll-reveal.is-visible .btn-scroll,
.hero.scroll-reveal.is-visible .btn-scroll-repositioned,
.scroll-reveal.is-visible .btn-scroll,
.scroll-reveal.is-visible .btn-scroll-repositioned {
    /* Resetear cualquier transformación que pueda estar interfiriendo */
    transform: translateX(-50%) translateY(0) translateZ(0) !important;
    /* Asegurar que se mantenga visible */
    visibility: visible !important;
    opacity: 1 !important;
    /* Forzar que el botón esté por encima de todo */
    z-index: 10000 !important;
    /* Evitar que se corte */
    position: absolute !important;
    bottom: -72px !important;
}

/* Transición más agradable para el contenedor colapsable */
.logos-collapse[data-collapsed="true"] {
  pointer-events: none;
}
.logos-collapse[data-collapsed="false"] {
  pointer-events: auto;
}

/* Estado del botón (opcional, ya usas .btn-cta) */
.logos-toggle{
      padding: 14.222px 21.333px;
    border-radius: 10.667px;
    border: 2px solid var(--primary);
    color: var(--primary)!important;
    font-size: 16px;
    font-weight: 600;
    line-height: 21.333px;
    text-align: center;
}

.logos-toggle:hover {
   border-color: var(--primary) !important;
}


/* Pequeños gaps entre filas cuando se despliegan */
.logos-section .logo-grid + .logo-grid {
  margin-top: 12px;
}



/* ==============================

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

/* HOME: Estilos específicos para tablet */
@media (max-width: 768px) {
    .home .hero .container {
        margin-top: 0px !important;
    }
    
    /* Contact title en móvil */
    .contact-title {
        font-size: 21px !important;
    }
}

@media (max-width: 992px) {
    /* Centra los items del menú y el botón CTA en la vista móvil */
 .navbar-collapse {
        /* Desactiva el comportamiento de colapso por defecto */
        display: block; 
        position: fixed;
        top: 0;
        right: -81%; /* Inicia fuera de la pantalla usando el ancho final */
        width: 81%; /* Ancho consistente siempre */
        height: 100vh;
        max-width: none; /* Elimina el límite de ancho */
        background: var(--chip-bg); /* Usa el color de fondo del menú actual */
        z-index: 1050; /* Debe estar por encima de otros elementos */
        transition: right 0.6s ease-in-out; /* Animación más lenta y suave */
        padding: 60px 20px; /* Padding interno */
        overflow-y: auto; /* Permite el scroll si hay muchos ítems */
    }


    .navbar .navbar-nav{
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Mueve el menú a la vista cuando tiene la clase 'show' */
    .navbar-collapse.show {
        right: 0;
        /* width ya no es necesario aquí porque es consistente */
    }

    /* Estilos para los elementos dentro del menú desplegable */
    .navbar-collapse .navbar-nav {
        flex-direction: column;
        align-items: left;
        gap: 15px; /* Espacio entre los links */
        margin-left: 0;
        margin-right: 0;
        padding: 15px 0;
    }

    /* Centra y estira el botón CTA en el menú móvil */
    .navbar-collapse .d-flex {
        width: 100%;
        justify-content: left;
    }

    .navbar-collapse .btn-cta {
        width: 100%;
    }
    
    .menu-wrap {
        padding: 14px 18px;
        border-radius: 16px;
    }
/*
    * Sobreescribe las reglas del dropdown para desktop.
    * Lo convertimos a un elemento de bloque que ocupa todo el ancho.
    */
    .navbar .menu-item-has-children > .dropdown-menu {
        position: static; /* Esto es clave, elimina la posición absoluta */
        top: auto;
        left: auto;
        min-width: 100%;
        transform: none; /* Desactiva la transformación */
        border: none; /* Opcional: Remueve el borde */
        background-color: transparent; /* Opcional: Fondo transparente */
        box-shadow: none; /* Elimina la sombra */
    }

    /*
    * Opcional: Ajusta los links del dropdown para que se vean bien
    */
    .navbar .menu-item-has-children .dropdown-menu a {
        text-align: left; /* Alinea los links a la izquierda */
        padding: 10px 12px;
    }

        .btn-close-menu {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 2rem;
        color: #170F49;
        cursor: pointer;
    }

    /* Opcional: Centra también los enlaces dentro del dropdown */
    .navbar .menu-item-has-children .dropdown-menu a {
        text-align: left;
        font-size: 18px;
    }

    .hero .container {
        padding-top: 110px;
        padding-bottom: 40px;
    }

    /* HOME: Forzar margin-top: 0 en responsive para tablet y móvil */
    .home .hero .container {
        margin-top: 0px !important;
    }

    /* Regla para los botones del hero */
    .hero .d-flex {
        flex-direction: column; /* Apila los botones uno encima del otro */
        gap: 16px; /* Añade un espacio vertical entre los botones */
    }
    
    a.btn-scroll { display: none; }
    
    .metrics-section .title {
        font-size: 2.2rem;
    }
    
    .metrics-section .metric-card {
        padding: 20px;
        /* Mantener márgenes reducidos en mobile */
        margin-left: 5px;
        margin-right: 5px;
        width: calc(100% - 10px); /* Ajustar ancho en mobile */
    }

    /* Ajustar gap en mobile */
    .metrics-section .row.g-4 {
        gap: 15px !important;
        margin-left: -5px;
        margin-right: -5px;
    }

    /* SERVICIOS: Aplicar la misma lógica en mobile */
    .services-section .service-card {
        margin-left: 5px;
        margin-right: 5px;
        width: calc(100% - 10px); /* Ajustar ancho en mobile */
    }

    /* Ajustar gap para servicios en mobile */
    .services-section .row.g-4 {
        gap: 12px !important; /* Gap pequeño pero legible en mobile */
        margin-left: -5px;
        margin-right: -5px;
    }

  
    
}

/* Regla para pantallas con un ratio ancho/alto muy grande */
@media screen and (min-aspect-ratio: 16/9) {
  .hero .eyebrow { font-size: clamp(24px, 1.8vw, 40px); }
  .hero h1.display-1 { font-size: clamp(32px, 2.5vw, 48px); }
  .hero .hero-sub { font-size: clamp(20px, 1.5vw, 32px); }
}

@media (max-width: 1200px) {
          /* Centra el texto de todas las columnas del footer principal */
    .main-footer {
        text-align: center;
    }

    /* Centra los íconos sociales en su contenedor */
    .social-icons {
        justify-content: center;
    }
    
    /* [NUEVO] Centra los items de contacto (como icono + texto) */
    /* Hacemos que los párrafos se comporten como 'inline-flex', */
    /* así el 'text-align: center' del padre puede centrarlos. */
    .main-footer .row p {
        display: inline-flex;
        align-items: center; /* Alinea verticalmente icono y texto */
        gap: 0.5rem; /* Espacio entre icono y texto */
    }

    .list-unstyled p{
        justify-content: center;
    }

    /* Apila y centra los elementos del footer inferior (copyright y link) */
    .footer-bottom .container {
        flex-direction: column;
        gap: 0.5rem; /* Añade un pequeño espacio entre el copyright y el link */
        text-align: center;
    }
}

/* ====== BLOQUE PARTNERS - REPLICA DE LOGOS-SECTION ====== */

.partners-section {
    background: #f8f9fa;
    padding: 45px 0 21px 0;
    width: 100%;
}

.partners-section .section-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: #6D717F;
    margin-bottom: 0rem;
}

/* Reutilizar estilos existentes de logo-grid para partners */
.partners-section .logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.partners-section .logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    margin: 0px;
    overflow: hidden; /* Evita que la imagen se salga del contenedor */
    background-color: transparent;
}

.partners-section .logo-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Mantiene la proporción, ajustándose al contenedor */
    filter: grayscale(70%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.partners-section .logo-container:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

.partners-section .logo-item {
    flex: 0 0 auto;
    width: auto;
}

/* Transición más agradable para el contenedor colapsable */
.partners-section .logos-collapse[data-collapsed="true"] {
    pointer-events: none;
}

.partners-section .logos-collapse[data-collapsed="false"] {
    pointer-events: auto;
}

/* Botón toggle (reutiliza los estilos existentes) */
.partners-section .logos-toggle {
    padding: 14.222px 21.333px;
    border-radius: 10.667px;
    border: 2px solid var(--primary);
    color: var(--primary) !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 21.333px;
    text-align: center;
    background: transparent;
}

.partners-section .logos-toggle:hover {
    border-color: var(--primary) !important;
    background-color: var(--primary);
    color: #fff !important;
}

/* Pequeños gaps entre filas cuando se despliegan */
.partners-section .logo-grid + .logo-grid {
    margin-top: 12px;
}

/* ==============================
   WPFORMS CUSTOMIZATION
============================== */

/* Fix para la posición del spinner de WPForms */
.wpforms-container .wpforms-submit-spinner {
    margin-top: -66px !important;
}

/* ==============================
   MÓVIL LANDSCAPE - VERSIÓN DESKTOP
============================== */
/* Aplicar estilos desktop en móvil landscape, excepto alturas de header */
@media (max-width: 1024px) and (orientation: landscape) {
    
    /* HERO - Mantener versión desktop pero altura adaptable */
    .hero-bg {
        background-position: center 40% !important;
    }
    

    /* HEADERS - Altura adaptable */
    .contact-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    
    h1, .display-1 {
        line-height: 1.1 !important;
    }
    
    h2 {
        line-height: 1.2 !important;
    }
    
    /* HERO - Ajuste al contenido en landscape */
    .hero-bg {
        height: 420px !important;
        padding-top: 45px !important;
    }
    
    .hero-inner {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    
    /* Ajustar espaciado del contenido del hero */
    .hero .display-1 {
        font-size: 28px !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero .eyebrow {
        font-size: 14px !important;
        margin-bottom: 0.5rem !important;
        margin-top: 60px !important;
    }
    
    .hero .lead {
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* CARDS - 2 por fila en landscape */
    .col-lg-4,
    .col-md-6,
    .col-sm-12,
    .col-12.col-md-6.col-lg-4,
    [class*="col-lg-4"],
    [class*="col-md-6"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Asegurar que las cards mantengan buen espaciado */
    .service-card,
    .metric-card {
        margin-bottom: 20px !important;
    }
    
    /* Para contenedores que usan flex */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    /* Cards específicas de servicios y métricas */
    .services-section .row > div,
    .metrics-section .row > div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Centrar las filas cuando hay número impar */
    .services-section .row,
    .metrics-section .row {
        justify-content: center !important;
    }
    
    /* METRIC CARDS - Layout específico 2 por fila */
    .metrics-section .row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important; /* Margen mínimo entre cards */
    }
    .metrics-section{
            margin-top: 30px !important;
    }
    .metrics-section .col-12.col-md-6.col-lg-4 {
        flex: 0 0 calc(50% - 7.5px) !important; /* 50% menos la mitad del gap */
        max-width: calc(50% - 7.5px) !important;
        padding: 0 !important; /* Quitar padding de Bootstrap */
    }
    
    .metric-card {
        width: 100% !important;
        margin: 0 !important; /* Quitar márgenes, usar solo gap */
        padding: 20px !important; /* Padding interno de la card */
    }
    
    /* SERVICE CARDS - Layout específico 2 por fila */
    .services-section .row.justify-content-center {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important; /* Margen mínimo entre cards */
    }
    
    .services-section .col-12.col-md-6.col-lg-4 {
        flex: 0 0 calc(50% - 7.5px) !important; /* 50% menos la mitad del gap */
        max-width: calc(50% - 7.5px) !important;
        padding: 0 !important; /* Quitar padding de Bootstrap */
    }
    
    .service-card {
        width: 100% !important;
        margin: 0 !important; /* Quitar márgenes, usar solo gap */
        padding: 20px !important; /* Padding interno de la card */
    }
    
    /* BOTONES HOME - Uno junto al otro en landscape */
    .home .hero .d-flex.flex-wrap.gap-3 {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    .home .hero .btn {
        flex-shrink: 0 !important; /* Evitar que se encojan */
        white-space: nowrap !important; /* Evitar que el texto se parta */
    }
    
    /* BOTÓN SCROLL - Ocultar en landscape */
    .scroll-down.btn.btn-scroll,
    .btn-scroll-repositioned {
        display: none !important; /* Ocultar completamente */
    }
    
    /* ANIMACIONES SCROLL - Deshabilitar en landscape */
    .scroll-reveal {
        opacity: 1 !important; /* Siempre visible */
        transform: none !important; /* Sin transformaciones */
        transition: none !important; /* Sin transiciones */
    }
    
    /* Asegurar que todas las secciones sean visibles inmediatamente */
    .home .scroll-reveal,
    .home .scroll-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
}