body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f5f7fb;
}

.container {
    max-width: 1100px; /* Cambiado de width a max-width */
    width: 90%;
    margin: auto;
}

/* Ajuste global para que las imágenes no se corten */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.sticky-bar {
    position: fixed;
    top: 0;
    width: 100%;
    background: #ff7a00;
    color: white;
    text-align: center;
    padding: 10px;
    z-index: 999;
}

.sticky-bar a {
    color: white;
    font-weight: bold;
    margin-left: 15px;
}


/* Mantenemos tu código base igual */
.hero {
    position: relative;
    background-image: url("/img/hero16.webp");
    background-size: cover;
    background-position: center; /* En desktop se mantiene centrada */
    padding: 50px 0 50px;
    color: white;
    display: flex;
    align-items: center;
    min-height: 450px; /* Asegura un área visible mínima */
}

/* Tu overlay se queda exactamente igual, no tocamos el degradado azul */


.hero-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			background: rgba(0,0,0,0.35); /* overlay oscuro limpio */
		}

/* --- LA SOLUCIÓN TÉCNICA PARA MÓVILES --- */
@media only screen and (max-width: 768px) {
    .hero {
        /* Cambiamos el anclaje: 80% horizontal para que se vea la parte derecha de la foto 
           donde suele estar la acción/personas, y 'center' vertical */
        background-position: 80% center !important; 
        padding: 60px 0; /* Más aire para que la sección crezca y muestre más fondo */
    }

		   .hero-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			background: rgba(0,0,0,0.35); /* overlay oscuro limpio */
		}

    .hero-grid {
        flex-direction: column; /* Alineación vertical para móvil */
        text-align: center;
    }
}



.btn-demo {
    display: inline-block;
    background: #FFE900;
    padding: 18px 40px;
    border-radius: 8px;
    color: black;
    text-decoration: none;
    font-size: 18px;
    transition: all .3s ease;
}


/* Estilo del botón con color actualizado */
.btn-demo-nav {
    background-color: #FFE900 !important; /* Azul intenso, más llamativo */
    color: black !important;
    padding: 10px 20px !important;
    border-radius: 8px;
    font-weight: bold;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Animación de palpitado (Pulse) */
.pulse-animation {
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 86, 179, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 86, 179, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 86, 179, 0);
    }
}

/* Efecto hover al pasar el mouse (se detiene el pulso) */
.btn-demo-nav:hover {
    animation: none;
    transform: scale(1.05);
    background-color: #004494 !important;
}




.problemas { padding: 80px 0; text-align: center; }

.grid-3 {
    display: flex;
    gap: 35px;
    justify-content: center;
    flex-wrap: wrap; /* Para que no se amontonen */
}

.problema img {
    width: 155px;
    height: 155px;
    object-fit: cover; /* Evita que la imagen se estire feo */
    border-radius: 50%;
    box-shadow: 0 45px 45px rgba(0,0,0,0.2);
}

.solucion {
    background: #ff7a00;
    color: white;
    text-align: center;
    padding: 12px;
}



/* Agrega o actualiza esto en tu estilos.css nubes*/
.integraciones {
    background: #1d63c9 url("/img/nubes1.webp") no-repeat center bottom / cover;
    padding: 15px 0;
    text-align: center;
    color: white; /* Para que el texto sea visible sobre el azul */
}

/* Asegúrate de que el título y los textos también sean blancos en esa sección */
.integraciones h2, .integraciones p {
    color: white;
}


/* Asegura que el contenedor principal distribuya el espacio */
.grid-4 {
    display: flex;
    justify-content: center;
    gap: 23px; /* Espacio entre logos */
    flex-wrap: wrap; /* Permite que bajen si la pantalla es muy pequeña */
}

/* Define explícitamente que cada elemento ocupe un espacio justo */
.grid-4 > div img {
    width: 55px; /* Cambia este valor (ej. 40px o 50px) para hacerlos más pequeños */
    margin-bottom: 10px;
}






/* Modifica el media query para que no fuerce columna si la pantalla es decente */
@media(max-width: 768px) {
    .grid-4 {
        flex-direction: row; /* Mantener fila */
        gap: 10px;
    }
}



.beneficios { padding: 60px 0; text-align: center; }

.beneficios-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.beneficio {
    background: white;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.testimonios { 
    padding: 80px 0; 
    background: #f8f9fc;
}

.testimonios .container .grid-3 {
    display: flex;
    flex-direction: row; /* Fuerza la horizontalidad */
    justify-content: space-between;
    align-items: stretch; /* Mantiene la altura igual en las 3 tarjetas */
    gap: 30px;
}

/* Asegura que el contenedor tenga espacio para la imagen absoluta */
/* DISEÑO PROFESIONAL DE TARJETAS (CARDS) */
/* Contenedor principal de tarjetas */
/* Contenedor principal con entorno azulado suave */
.grid-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    padding: 62px 20px; /* Aumentamos el padding para que el color de fondo sea visible */
    margin-top: 20px;
    
    /* El toque profesional: un degradado azul muy sutil */
    background: linear-gradient(180deg, #f8f9fc 10%, #eef3fa 100%);
    border-radius: 30px; /* Bordes redondeados para el contorno del entorno */
}


.card {
    background: white;
    padding: 40px 25px 30px 25px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    position: relative;
    text-align: center;
    border: 1px solid #edf0f5;
    transition: all 0.3s ease;
    flex: 1; /* Ocupan espacio equitativo */
    min-width: 280px; /* Evita que se vuelvan demasiado pequeñas en móvil */
    max-width: 350px; /* Evita que crezcan demasiado en pantallas grandes */
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* Estilo para las imágenes de perfil (Corregido para consistencia) */
.card img {
    width: 100px;
    height: 100px;
    object-fit: cover; /* Asegura que la foto no se deforme */
    border-radius: 50%;
    border: 5px solid #f8f9fc;
    position: absolute;
    top: -50px; 
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    font-style: italic;
    margin-bottom: 20px;
}

.card strong {
    color: #0b3c8c;
    display: block;
    margin-top: 10px;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}


.demo {
    background-image: url("/img/nubes1.webp");
    background-size: cover;
    background-position: center;
    padding: 40px 0;
    text-align: center;
    color: white;
}

.demo input {
    padding: 15px;
    margin: 10px;
    width: 220px;
    border-radius: 6px;
    border: none;
}

.demo button {
    background: #ff7a00;
    padding: 15px 40px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-box {
    background: white;
    padding: 20px 18px;
    border-radius: 10px;
    text-align: center;
    max-width: 320px;
    width: 90%;
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 25px;
    cursor: pointer;
}

.whatsapp-float {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 999;
    animation: whatsappPulse 1s infinite;
}

.whatsapp-float img { width: 65px; }

@keyframes whatsappPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.fade-up {
    opacity: 0;
    translate: 0 40px;
    transition: opacity .8s ease, translate .8s ease;
}
/*    transform: translateY(40px);
    transition: all .8s ease; */

.fade-up.visible {
    opacity: 1;
    translate: 0 0;  /* ← sin transform, no hay stacking context */
  /*transform: translateY(0); */
}

/* Mobile Optimization */
@media(max-width:900px) {
    .grid-3, .grid-4, .beneficios-grid {
        flex-direction: column;
        align-items: center;
    }
    .hero-grid { text-align: center; }
    .demo input { width: 90%; }
}


/* ESTILOS VIDEOCONFERENCIA */
.videoconferencia {
    padding: 80px 0;
    background: white; /* Contraste con el fondo gris de testimonios */
    text-align: center;
}

.titulo-seccion {
    color: #0b3c8c;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.subtitulo-seccion {
    color: #666;
    margin-bottom: 50px;
    font-size: 1.3rem;
}

.video-card {
    flex: 1;
    background: #fdfdfd;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: transform 0.3s ease;
    padding-bottom: 20px;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.video-img-container {
    width: 100%;
    height: 200px; /* Altura fija para mantener uniformidad */
    overflow: hidden;
}

.video-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que la imagen llene el rectángulo sin deformarse */
}

.video-card h3 {
    color: #0b3c8c;
    margin: 20px 15px 10px;
    font-size: 1.3rem;
}

.video-card p {
    padding: 0 20px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Optimización para Celulares */
@media (max-width: 900px) {
    .videoconferencia .grid-3 {
        flex-direction: column;
        gap: 30px;
    }
    
    .video-card {
        width: 100%; /* Ocupa todo el ancho en móvil */
    }
}


/* SECCIÓN CONTACTO DIRECTO PROFESIONAL */
.contacto-directo {
    padding: 10px 0;
    text-align: center;
    background-color: #f8f9fc; /* Fondo sutil para dar contraste */
}

.contacto-texto {
    font-size: 1.2rem;
    color: #0b3c8c;
    margin-bottom: 25px;
    font-weight: 500;
}

.contacto-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-contacto {
    display: inline-flex;
    align-items: center;
    background-color: #FF7A00; /* Azul profesional para diferenciar del naranja de la demo */
    color: white;
    padding: 18px 45px;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* Forma de píldora muy moderna */
    box-shadow: 0 10px 25px rgba(11, 60, 140, 0.2);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-contacto:hover {
    background-color: white;
    color: #0b3c8c;
    border: 2px solid #0b3c8c;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(11, 60, 140, 0.3);
}

.icon-tel {
    margin-right: 15px;
    font-size: 24px;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .btn-contacto {
        width: 90%;
        padding: 15px 20px;
        font-size: 18px;
    }
}


/* ESTILOS SECCIÓN SERVICIOS (MEJORADA) */
.servicios {
    padding: 90px 0;
    background: #ffffff;
    text-align: center;
}

.servicios-grid {
    display: grid;
    /* Esto crea 4 columnas iguales en escritorio y baja a 1 en móviles automáticamente */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
    padding: 0 20px;
}

.servicio-card {
    background: #ffffff;
    padding: 40px 25px;
    border-radius: 20px;
    border: 1px solid #edf0f5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* Efecto hover premium */
.servicio-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(11, 60, 140, 0.15);
    border-color: #FFE900;
}

.servicio-img-container {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    background: #f0f4fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.servicio-card:hover .servicio-img-container {
    background: #FFE900; /* Se ilumina el círculo al pasar el mouse */
}

.servicio-img-container img {
    width: 50px; /* Tamaño del icono dentro del círculo */
    height: 50px;
    object-fit: contain;
}

.servicio-card h3 {
    color: #0b3c8c;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.servicio-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Ajuste para dispositivos móviles */
@media (max-width: 768px) {
    .servicios {
        padding: 50px 0;
    }
    
    .servicios-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}



/* Estilos para el botón de cotización en tarjetas */
.btn-cotizar {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 25px;
    background-color: #0B3C8C; /* Naranja corporativo */
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid #ff7a00;
}

.btn-cotizar:hover {
    background-color: transparent;
    color: #0B3C8C;
    transform: translateY(-2px);
}


/* ESTILOS PARA EL SEPARADOR */
.servicios-divider {
    width: 100%;
    text-align: center;
    margin: 40px 0;
    position: relative;
    grid-column: 1 / -1; /* Esto hace que el separador ocupe todo el ancho del grid */
}

.servicios-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e0e4eb;
    z-index: 1;
}

.servicios-divider span {
    background: #ffffff;
    padding: 0 20px;
    color: #ff7a00; /* Naranja corporativo */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2.0rem;
    position: relative;
    z-index: 2;
}


/* ESTILOS PARA EL SEPARADOR */
.servicios-divider_t {
    width: 100%;
    text-align: center;
    margin: 40px 0;
    position: relative;
    grid-column: 1 / -1; /* Esto hace que el separador ocupe todo el ancho del grid */
}

.servicios-divider_t::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e0e4eb;
    z-index: 1;
}

.servicios-divider_t span {
    background: #ffffff;
    padding: 0 20px;
    color: #615957; /* Color Gris */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2.0rem;
    position: relative;
    z-index: 2;
}



/* ESTILOS ESPECÍFICOS PARA ADDONS (FUNCIONES ADICIONALES) */
.addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.addon-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    /* Borde ligeramente más grueso para denotar "Premium" */
    border: 2px solid #eef3fa; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.addon-card:hover {
    transform: translateY(-10px);
    border-color: #0b3c8c; /* El borde se vuelve azul corporativo al hacer hover */
    box-shadow: 0 20px 40px rgba(11, 60, 140, 0.1);
}

.addon-img-container {
    width: 95px;
    height: 95px;
    margin-bottom: 15px;
    background: #fff5eb; /* Fondo naranja muy suave */
    border-radius: 20px; /* Bordes cuadrados redondeados para diferenciar de los servicios */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.addon-card:hover .addon-img-container {
    background: #001B96; /* Se vuelve naranja intenso al pasar el mouse */
}

.addon-img-container img {
    width: 85px;
    height: 85px;
    object-fit: contain;
}

.addon-card h3 {
    color: #0b3c8c;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.addon-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}


/* --- HEADER Y MENÚ SENIOR --- */
.main-header {
    background: #0B3C8C;
    height: 90px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* El container debe forzar el ancho total */
.header-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    padding: 0 20px;
}

/* Logo Profesional */
.logo img { height: 100px; width: 100px; transition: transform 0.3s; }
.logo img:hover { transform: scale(1.05); }

/* Menú Móvil (Hamburguesa) - Forzamos visibilidad */
#nav-mobile { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    border: 0; 
    background: transparent; 
    cursor: pointer; 
    height: 80px;
    width: 68px;
    z-index: 1100;
}
#nav-mobile span { 
    display: block; 
    width: 30px; 
    height: 3px; 
    background: white; 
    margin: 3px auto; 
    transition: 0.3s;
}

/* Menú oculto en móvil */
#menu .nav-menu { 
    position: absolute; 
    top: 90px; 
    left: 0; 
    width: 100%; 
    background: #2c3e50;
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.4s ease-in-out;
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu .nav-menu.open-menu { max-height: 500px; }

/* Enlaces */
#menu .nav-menu li { border-bottom: 1px solid #3e4f5f; }
#menu .nav-menu li a { display: block; padding: 20px; color: white; text-decoration: none; text-align: center; font-weight: 500; }

/* Adaptación Escritorio (Desktop) */
@media only screen and (min-width: 900px) {
    #nav-mobile { display: none; }
    #menu .nav-menu { 
        position: relative; 
        top: 0; 
        background: transparent; 
        max-height: inherit; 
        display: flex; 
        align-items: center; 
        gap: 20px;
        overflow: visible;
    }
    #menu .nav-menu li { border: none; }
    #menu .nav-menu li a { padding: 0 10px; }
    
    .web-contact { display: flex; align-items: center; gap: 15px; }
    .web-contact img { width: 30px; height: 30px; }
}



/* Corrección del corte visual */
body {
    padding-top: 90px; /* Igual a la altura de tu header para compensar el fixed */
}

/* Asegurar que el logo no se desborde */
.main-header {
    height: 90px;
    display: flex;
    align-items: center;
}

/* Mejora de visibilidad del botón móvil */
@media only screen and (max-width: 900px) {
    .nav-mobile {
        display: flex !important; /* Forzar visibilidad */
        position: relative;
        z-index: 9999; /* Prioridad máxima */
    }
}


/* --- SECCIÓN EXPERIENCIA PROFESIONAL --- */
.experiencia-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #0b3c8c 0%, #1a5bb0 100%);
    color: white;
    text-align: center;
}

.experiencia-section h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #ffffff;
}

.experiencia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.exp-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 15px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

.exp-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.2);
}

.exp-card h3 {
    font-size: 2rem;
    color: #ff7a00; /* Naranja corporativo para resaltar los números */
    margin-bottom: 10px;
}

.exp-card p {
    font-size: 1.1rem;
    opacity: 0.9;
}


/* --- ESTILOS ESPECÍFICOS PARA HERRAMIENTAS ADICIONALES --- */

/* Contenedor de la sección para darle un fondo ligero que la diferencie */
.herramientas-adicionales {
    padding: 80px 0;
    background-color: #f0f4fa; /* Un azul muy tenue para separar visualmente */
}

/* Clase para las tarjetas de herramientas */
.h-card {
    border-top: 4px solid #0b3c8c; /* Acento azul en la parte superior */
    transition: all 0.3s ease-in-out;
}

/* Contenedor de imagen personalizado para administrar tamaños */
.h-img-container {
    width: 100%;
    height: 180px; /* Altura fija para que todas las cards se vean alineadas */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 10px;
}

/* Control individual de imágenes por ID */
#img-integraciones, #img-admin, #img-planes, #img-grabaciones {
    max-height: 140px; /* Ajusta este valor para que tus imágenes no se vean gigantes */
    width: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

/* Efecto al pasar el mouse sobre la tarjeta */
.h-card:hover #img-integraciones, 
.h-card:hover #img-admin, 
.h-card:hover #img-planes, 
.h-card:hover #img-grabaciones {
    transform: scale(1.1); /* Zoom suave a la imagen */
}

.h-card:hover {
    box-shadow: 0 15px 35px rgba(11, 60, 140, 0.15);
    background-color: #ffffff;
}


/* --- ADMINISTRACIÓN INDEPENDIENTE CALL CENTER --- */


.problemas_cc { padding: 40px 0; text-align: center; }

.grid-3 {
    display: flex;
    gap: 65px;
    justify-content: center;
    flex-wrap: wrap; /* Para que no se amontonen */
}

.problemas_cc img {
    width: 145px;
    height: 145px;
    object-fit: cover; /* Evita que la imagen se estire feo */
    border-radius: 50%;
    box-shadow: 0 45px 45px rgba(0,0,0,0.2);
}


/* --- SECCIÓN PREMIOS (ACTUALIZADA) --- */
.premios-section {
    padding: 60px 0;
    background-color: #fbfbfb; /* Gris ultra tenue, casi blanco */
    text-align: center;
}

.premios-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px; 
    flex-wrap: wrap; 
    margin-top: 30px;
}

.premio-item {
    flex: 1;
    min-width: 200px; 
    max-width: 250px;
    padding: 15px;
}

/* Control de Imágenes de Premios - Logos en color normal */
#img-premio1, #img-premio2, #img-premio3 {
    width: 100%;
    height: auto;
    max-height: 100px; 
    object-fit: contain; 
    filter: none; /* Se elimina cualquier filtro de gris */
    opacity: 0.85; /* Ligera transparencia para que no saturen, pero se ven sus colores */
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse: el logo resalta al 100% */
.premio-item:hover img {
    opacity: 1;
    transform: scale(1.08); /* Crecimiento suave */
}

/* Ajuste específico para Smartphones */
@media (max-width: 768px) {
    .premios-grid {
        gap: 20px;
    }
    .premio-item {
        max-width: 130px; /* Tamaño optimizado para pantallas pequeñas */
        min-width: 120px;
    }
}


/* =========================
PROBLEMAS - EFECTO ROJO SUAVE
========================= */

.problema{
position:relative;
text-align:center;
}

/* CONTENEDOR DE IMAGEN */

.problema img{
position:relative;
z-index:2;
}

/* FONDO ROJO DIFUMINADO */

.problema::before{

content:"";
position:absolute;

top:50%;
left:50%;

transform:translate(-50%, -50%);

width:220px;
height:220px;

background:radial-gradient(circle, rgba(229,57,53,0.25) 0%, rgba(229,57,53,0.05) 60%, transparent 100%);

border-radius:50%;

z-index:1;

}

.problema:hover::before{
background:radial-gradient(circle, rgba(229,57,53,0.35) 0%, rgba(229,57,53,0.08) 60%, transparent 100%);
transition:0.3s;
}


/* =========================
HERO ULTRA PRO (TIPOGRAFÍA)
========================= */

/* CONTENEDOR TEXTO */

.hero-text{
max-width:600px;
z-index:2;
position:relative;
}

/* TITULO PRINCIPAL */

.hero-text h1{

font-size:45px;
font-weight:800;
line-height:1.1;
color:#ffffff;

margin-bottom:20px;

letter-spacing:-1px;

}

/* EFECTO PALABRA DESTACADA (MÁS / CLIENTES) */

.hero-text h1 span{

background:linear-gradient(90deg,#6FE7FF,#00FFA3);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

/* SUBTITULO */

.hero-text p{

font-size:20px;
color:rgba(255,255,255,0.85);
margin-bottom:25px;
line-height:1.5;

}

/* LISTA (PROBLEMAS / BENEFICIOS) */

.hero-text ul{

list-style:none;
padding:0;
margin-bottom:30px;

}

.hero-text ul li{

font-size:18px;
margin-bottom:12px;
display:flex;
align-items:center;
gap:10px;

}

/* ICONOS DE LISTA */

.hero-text ul li::before{

content:"●";
font-size:14px;

}

/* ROJO (PROBLEMA) */

.hero-text ul li:nth-child(1)::before{
color:#FF4D4D;
}

.hero-text ul li:nth-child(2)::before{
color:#FF4D4D;
}

/* VERDE (SOLUCIÓN) */

.hero-text ul li:nth-child(3)::before{
color:#00E676;
}

/* BOTÓN PRINCIPAL */

.hero-text .btn-demo{

background:linear-gradient(90deg,#FFE900,#FFE900);
color:#fff;

font-size:20px;
font-weight:700;

padding:18px 35px;
border-radius:8px;

box-shadow:0 10px 30px rgba(255,122,0,0.4);

transition:0.3s;

}

/* HOVER BOTÓN */

.hero-text .btn-demo:hover{

transform:translateY(-3px);
box-shadow:0 15px 40px rgba(255,122,0,0.6);

}

/* TEXTO DE URGENCIA */

.hero-text .urgencia{

margin-top:15px;
font-size:14px;
color:#FFD54F;

display:flex;
align-items:center;
gap:8px;

}


/* =========================
BADGE URGENTE ESTILO CONTACTO
========================= */

.badge-urgente-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* BADGE */
.badge-urgente {
    display: flex;
    align-items: center;
    justify-content: center;  /* Asegura que todo el contenido esté centrado */
    gap: 10px;

    background: #FFE900;
    color: #1A1A1A;
    padding: 10px 20px;  /* Tamaño más adecuado para el badge */
    border-radius: 50px;

    font-size: 15px;  /* Aseguramos que el texto sea legible */
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: 0.3s;
    width: 100%;
    max-width: 300px;  /* Limita el tamaño máximo */
    text-decoration: none;  /* Quita la línea inferior */
}

/* ICONO */
.badge-urgente .icon-badge {
    font-size: 28px;
}

/* ANIMACIÓN DE PULSO */
@keyframes pulse-animation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);  /* Incrementa el tamaño */
    }
    100% {
        transform: scale(1);
    }
}

/* HOVER PRO */
.badge-urgente:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}


/* =============================================
   ESTILOS EXCLUSIVOS ia.php
   ============================================= */
 
/* --- HERO IA (fondo oscuro diferenciado) --- */
.hero-ia {
    position: relative;
    background-image: url("/img/agentes2.webp");
    background-size: cover;
    background-position: center;
    padding: 70px 0 60px;
    color: white;
    display: flex;
    align-items: center;
    min-height: 500px;
}
 
.hero-ia .hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(11,60,140,0.88) 0%, rgba(0,0,0,0.55) 100%);
}
 
/* Badge IA animado */
.badge-ia {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #FFE900, #ffb700);
    color: #1A1A1A;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 18px;
    box-shadow: 0 4px 15px rgba(255,233,0,0.4);
    animation: pulse-animation 2s infinite;
}
 
/* --- SECCIÓN DE FEATURE (alternada) --- */
.feature-section {
    padding: 80px 0;
}
 
.feature-section:nth-child(even) {
    background: #f0f4fa;
}
 
.feature-grid {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}
 
.feature-grid.reverse {
    flex-direction: row-reverse;
}
 
.feature-content {
    flex: 1;
    min-width: 280px;
}
 
.feature-img {
    flex: 1;
    min-width: 280px;
    text-align: center;
}
 
.feature-img img {
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(11,60,140,0.18);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
 
/* Número de feature */
.feature-number {
    font-size: 80px;
    font-weight: 900;
    color: rgba(11,60,140,0.08);
    line-height: 1;
    margin-bottom: -20px;
}
 
.feature-tag {
    display: inline-block;
    background: #0b3c8c;
    color: white;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 5px 14px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
 
.feature-content h2 {
    font-size: 2rem;
    color: #0b3c8c;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
}
 
.feature-content .feature-subtitle {
    font-size: 1.15rem;
    color: #ff7a00;
    font-weight: 700;
    margin-bottom: 18px;
}
 
.feature-content p {
    font-size: 1.05rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 22px;
}
 
/* Lista de ventajas */
.ventajas-list {
    list-style: none;
    padding: 0;
    margin-bottom: 28px;
}
 
.ventajas-list li {
    font-size: 1rem;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
}
 
.ventajas-list li:last-child {
    border-bottom: none;
}
 
.ventajas-list li .check {
    width: 24px;
    height: 24px;
    background: #0b3c8c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}
 
/* Métricas del feature */
.feature-metrics {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}
 
.metric-box {
    background: linear-gradient(135deg, #0b3c8c, #1a5bb0);
    color: white;
    padding: 18px 24px;
    border-radius: 12px;
    text-align: center;
    flex: 1;
    min-width: 110px;
}
 
.metric-box .metric-num {
    font-size: 2rem;
    font-weight: 900;
    color: #FFE900;
    display: block;
}
 
.metric-box .metric-label {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-top: 4px;
}
 
/* --- SECCIÓN CÓMO FUNCIONA --- */
.como-funciona {
    background: linear-gradient(135deg, #0b3c8c 0%, #1a5bb0 100%);
    padding: 80px 0;
    color: white;
    text-align: center;
}
 
.como-funciona h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
    color: white;
}
 
.como-funciona .subtitulo {
    font-size: 1.1rem;
    opacity: 0.85;
    margin-bottom: 55px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}
 
.pasos-grid {
    display: flex;
    gap: 0;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
 
.paso {
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    padding: 30px 20px;
    position: relative;
}
 
.paso-numero {
    width: 60px;
    height: 60px;
    background: #FFE900;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: #0b3c8c;
    margin: 0 auto 20px;
}
 
.paso h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #FFE900;
}
 
.paso p {
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.5;
}
 
/* Flecha entre pasos */
.paso::after {
    content: "→";
    position: absolute;
    right: -15px;
    top: 40px;
    font-size: 1.8rem;
    color: rgba(255,233,0,0.5);
}
 
.paso:last-child::after {
    display: none;
}
 
/* --- SECCIÓN RESULTADOS --- */
.resultados-section {
    padding: 80px 0;
    background: #fff;
    text-align: center;
}
 
.resultados-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}
 
.resultado-card {
    background: linear-gradient(135deg, #f0f4fa, #e8eef8);
    border-left: 5px solid #ff7a00;
    border-radius: 12px;
    padding: 30px 25px;
    flex: 1;
    min-width: 200px;
    max-width: 250px;
    text-align: left;
    transition: transform 0.3s ease;
}
 
.resultado-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(11,60,140,0.12);
}
 
.resultado-card .resultado-num {
    font-size: 3rem;
    font-weight: 900;
    color: #0b3c8c;
    line-height: 1;
}
 
.resultado-card .resultado-label {
    font-size: 1rem;
    color: #444;
    margin-top: 8px;
    line-height: 1.4;
}
 
/* --- VIDEO / DEMO VISUAL --- */
.demo-visual {
    background: #f8f9fc;
    padding: 80px 0;
    text-align: center;
}
 
/* --- CTA CENTRAL --- */
.cta-central {
    background: linear-gradient(90deg, #ff7a00, #e06000);
    padding: 60px 0;
    text-align: center;
    color: white;
}
 
.cta-central h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: white;
}
 
.cta-central p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
}
 
.btn-cta-blanco {
    display: inline-block;
    background: white;
    color: #ff7a00;
    font-size: 1.2rem;
    font-weight: 800;
    padding: 18px 45px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}
 
.btn-cta-blanco:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}
 
/* --- RESPONSIVE IA PAGE --- */
@media (max-width: 768px) {
    .hero-ia {
        background-position: 70% center;
        padding: 80px 0 50px;
    }
    .feature-grid, .feature-grid.reverse {
        flex-direction: column;
    }
    .feature-content h2 {
        font-size: 1.6rem;
    }
    .paso::after {
        display: none;
    }
    .feature-number {
        font-size: 50px;
    }
    .cta-central h2 {
        font-size: 1.6rem;
    }
}


/* ================================================================
   recepcionista_ia.css
   Estilos exclusivos para recepcionista_ia.php
   Cloudphone MX — GoTo Connect
   ================================================================ */

/* ----------------------------------------------------------------
   FUENTE BASE (Sora + Inter, importadas en el <head>)
   ---------------------------------------------------------------- */
.rec-page {
    font-family: 'Inter', Arial, sans-serif;
}

.rec-page h1,
.rec-page h2,
.rec-page h3 {
    font-family: 'Sora', Arial, sans-serif;
}


/* ================================================================
   HERO
   ================================================================ */
.rec-hero {
    position: relative;
    background-image: url("/img/hero16.webp"); 
    background-size: cover;
    background-position: center;
    min-height: 560px;
    display: flex;
    align-items: center;
    padding: 100px 0 70px;
    overflow: hidden;
}

.rec-hero-overlay {
    position: absolute;
    inset: 0;
    /* Ajuste Senior: El degradado desaparece al 65% para dejar la imagen nítida */
    background: linear-gradient(
        65deg,
        rgba(6, 28, 90, 0.95) 0%,
        rgba(11, 60, 140, 0.70) 35%,
        rgba(0, 0, 0, 0) 65% 
    );
    z-index: 1;
}

/* Partículas decorativas animadas */
.rec-hero-particles {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 2;
    pointer-events: none;
}



.rec-particles span {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
    animation: recFloat 8s ease-in-out infinite;
}

.rec-particles span:nth-child(1) { width: 300px; height: 300px; background: #FFE900; top: -80px; left: -60px; animation-delay: 0s; }
.rec-particles span:nth-child(2) { width: 180px; height: 180px; background: #ff7a00; top: 60%; right: 5%; animation-delay: 2s; }
.rec-particles span:nth-child(3) { width: 120px; height: 120px; background: #6FE7FF; top: 30%; left: 45%; animation-delay: 4s; }
.rec-particles span:nth-child(4) { width: 80px;  height: 80px;  background: #FFE900; bottom: 10%; left: 20%; animation-delay: 1s; }
.rec-particles span:nth-child(5) { width: 200px; height: 200px; background: #ff7a00; top: 10%; right: 30%; animation-delay: 3s; }
.rec-particles span:nth-child(6) { width: 60px;  height: 60px;  background: #6FE7FF; bottom: 20%; right: 45%; animation-delay: 5s; }

@keyframes recFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-20px) scale(1.05); }
}

/* Inner: dos columnas */
.rec-hero-inner {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}

/* Columna texto */
.rec-hero-text {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
}

/* Badge "IA ACTIVA" */
.rec-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 233, 0, 0.15);
    border: 1.5px solid rgba(255, 233, 0, 0.5);
    color: #FFE900;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 22px;
    text-transform: uppercase;
}

.rec-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00E676;
    box-shadow: 0 0 8px #00E676;
    animation: recPulse 1.5s infinite;
    flex-shrink: 0;
}

@keyframes recPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.3); }
}

/* Título hero */
.rec-hero-text h1 {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.08;
    color: #ffffff;
    margin-bottom: 22px;
    letter-spacing: -1.5px;
}

.rec-gradient-text {
    background: linear-gradient(90deg, #FFE900, #ff7a00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtítulo */
.rec-hero-sub {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Bullets */
.rec-hero-bullets {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
}

.rec-bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.rec-bullet-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 1px;
}

.rec-bullet-bad  .rec-bullet-icon { background: rgba(255, 77, 77, 0.25);  color: #FF4D4D; border: 1.5px solid rgba(255,77,77,0.4); }
.rec-bullet-good .rec-bullet-icon { background: rgba(0, 230, 118, 0.20); color: #00E676; border: 1.5px solid rgba(0,230,118,0.4); }

/* CTA botones */
.rec-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.rec-btn-main {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 18px 36px;
    border-radius: 10px;
    background: linear-gradient(90deg, #FFE900, #ffb700);
    color: #111;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(255, 183, 0, 0.45);
    transition: all 0.3s ease;
    display: inline-block;
}

.rec-btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 183, 0, 0.6);
}

.rec-btn-secondary {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,0.4);
    padding: 16px 28px;
    border-radius: 10px;
    transition: all 0.3s ease;
    display: inline-block;
}

.rec-btn-secondary:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.7);
}

.rec-urgencia {
    font-size: 0.85rem;
    color: #FFD54F;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Columna visual */
.rec-hero-visual {
    flex: 1;
    min-width: 280px;
    display: flex;
    justify-content: center;
}

.rec-hero-img-wrap {
    position: relative;
    max-width: 480px;
    width: 100%;
}

.rec-hero-img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
    display: block;
}

/* Floating cards sobre la imagen */
.rec-float-card {
    position: absolute;
    background: white;
    border-radius: 14px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.2);
    min-width: 200px;
    animation: recFloatCard 3s ease-in-out infinite;
}

.rec-float-card.rec-float-top {
    top: -20px;
    left: -30px;
    animation-delay: 0s;
}

.rec-float-card.rec-float-bottom {
    bottom: -20px;
    right: -20px;
    animation-delay: 1.5s;
}

@keyframes recFloatCard {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

.rec-float-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.rec-float-card strong {
    display: block;
    font-size: 0.85rem;
    color: #0b3c8c;
    font-family: 'Sora', Arial, sans-serif;
}

.rec-float-card small {
    font-size: 0.75rem;
    color: #888;
}

.rec-status-dot {
    width: 10px;
    height: 10px;
    background: #00E676;
    border-radius: 50%;
    margin-left: auto;
    box-shadow: 0 0 8px #00E676;
    animation: recPulse 1.5s infinite;
    flex-shrink: 0;
}


/* ================================================================
   PROOF BAR (logos)
   ================================================================ */
.rec-proof-bar {
    background: #f0f4fa;
    padding: 22px 0;
    border-bottom: 1px solid #e2e8f0;
}

.rec-proof-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.rec-proof-label {
    font-size: 0.85rem;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rec-proof-logos {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.rec-proof-logos img {
    height: 40px;
    width: auto;
    opacity: 0.65;
    filter: grayscale(60%);
    transition: all 0.3s ease;
    margin: 0;
}

.rec-proof-logos img:hover {
    opacity: 1;
    filter: grayscale(0%);
}


/* ================================================================
   ETIQUETAS DE SECCIÓN (reutilizable)
   ================================================================ */
.rec-section-tag {
    display: inline-block;
    background: #0b3c8c;
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    padding: 5px 14px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.rec-section-title {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: #0b3c8c;
    line-height: 1.2;
    margin-bottom: 14px;
}

.rec-section-sub {
    font-size: 1.05rem;
    color: #666;
    margin-bottom: 55px;
    max-width: 600px;
}


/* ================================================================
   SECCIÓN PROBLEMAS
   ================================================================ */
.rec-problemas {
    padding: 80px 0;
    background: #fff;
    text-align: center;
}

.rec-problemas-header {
    margin-bottom: 55px;
}

.rec-problemas-header h2 {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 12px 0;
    line-height: 1.2;
}

.rec-problemas-header p {
    font-size: 1.05rem;
    color: #555;
}

.rec-problemas-grid {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
}

.rec-problema-card {
    background: #f8f9fc;
    border-radius: 18px;
    padding: 38px 28px;
    flex: 1;
    min-width: 240px;
    max-width: 320px;
    border: 1.5px solid #edf0f5;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rec-problema-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff4d4d, #ff7a00);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.rec-problema-card:hover::before { transform: scaleX(1); }

.rec-problema-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(255, 77, 77, 0.1);
}

.rec-problema-destacado {
    background: linear-gradient(135deg, #fff5f5, #fff0eb);
    border-color: rgba(255, 77, 77, 0.2);
    transform: scale(1.04);
}

.rec-problema-destacado:hover { transform: scale(1.04) translateY(-8px); }

.rec-problema-icon {
    font-size: 2.8rem;
    margin-bottom: 18px;
    display: block;
}

.rec-problema-card h3 {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.rec-problema-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Banner solución */
.rec-solucion-banner {
    background: linear-gradient(90deg, #0b3c8c, #1a5bb0);
    color: white;
    padding: 18px 0;
    text-align: center;
}

.rec-solucion-banner p {
    margin: 0;
    font-size: 1.1rem;
    color: white;
}


/* ================================================================
   QUÉ ES
   ================================================================ */
.rec-que-es {
    padding: 90px 0;
    background: #f8f9fc;
}

.rec-que-es-grid {
    display: flex;
    align-items: center;
    gap: 70px;
    flex-wrap: wrap;
}

.rec-que-es-content {
    flex: 1;
    min-width: 300px;
}

.rec-que-es-content h2 {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: #0b3c8c;
    line-height: 1.15;
    margin-bottom: 18px;
}

.rec-que-es-content p {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Stats en cuadrícula */
.rec-que-es-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 30px;
}

.rec-stat {
    background: white;
    border-radius: 14px;
    padding: 20px;
    border: 1.5px solid #e8eef8;
    text-align: center;
    transition: all 0.3s ease;
}

.rec-stat:hover {
    border-color: #0b3c8c;
    box-shadow: 0 8px 25px rgba(11,60,140,0.1);
    transform: translateY(-4px);
}

.rec-stat-num {
    display: block;
    font-family: 'Sora', Arial, sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #ff7a00;
    line-height: 1;
    margin-bottom: 6px;
}

.rec-stat-label {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

/* Imagen lado derecho */
.rec-que-es-img {
    flex: 1;
    min-width: 280px;
    position: relative;
}

.rec-que-es-img img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(11,60,140,0.18);
    display: block;
    margin: 0;
}

.rec-que-es-badge {
    position: absolute;
    bottom: -20px;
    left: 30px;
    background: white;
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    font-size: 1.8rem;
}

.rec-que-es-badge strong {
    display: block;
    font-size: 0.9rem;
    color: #0b3c8c;
    font-family: 'Sora', Arial, sans-serif;
}

.rec-que-es-badge small {
    font-size: 0.75rem;
    color: #888;
}


/* ================================================================
   CÓMO FUNCIONA (FLUJO)
   ================================================================ */
.rec-flujo {
    background: linear-gradient(135deg, #0b3c8c 0%, #1a5bb0 100%);
    padding: 90px 0;
    text-align: center;
    color: white;
}

.rec-flujo .rec-section-tag {
    background: rgba(255,255,255,0.15);
    color: #FFE900;
    border: 1.5px solid rgba(255,233,0,0.3);
}

.rec-flujo .rec-section-title {
    color: white;
}

.rec-flujo .rec-section-sub {
    color: rgba(255,255,255,0.75);
    margin-left: auto;
    margin-right: auto;
}

.rec-flujo-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 10px;
}

.rec-flujo-paso {
    flex: 1;
    min-width: 180px;
    max-width: 230px;
    padding: 30px 16px;
    position: relative;
}

.rec-flujo-num {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 233, 0, 0.7);
    margin-bottom: 10px;
}

.rec-flujo-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.rec-flujo-paso h3 {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #FFE900;
    margin-bottom: 10px;
}

.rec-flujo-paso p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    margin: 0;
}

.rec-flujo-arrow {
    font-size: 1.8rem;
    color: rgba(255,233,0,0.4);
    align-self: center;
    padding-top: 30px;
    flex-shrink: 0;
}


/* ================================================================
   4 PILARES
   ================================================================ */
.rec-pilares {
    padding: 90px 0;
    background: white;
}

.rec-pilares > .container > .rec-section-tag,
.rec-pilares > .container > .rec-section-title {
    text-align: center;
    display: block;
}

.rec-pilares > .container > .rec-section-title {
    text-align: center;
    margin-bottom: 60px;
}

.rec-pilar {
    display: flex;
    align-items: center;
    gap: 70px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

.rec-pilar:last-child { margin-bottom: 0; }

.rec-pilar-alt {
    flex-direction: row-reverse;
}

.rec-pilar-img {
    flex: 1;
    min-width: 280px;
}

.rec-pilar-img img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(11,60,140,0.15);
    display: block;
    margin: 0;
}

.rec-pilar-content {
    flex: 1;
    min-width: 300px;
}

.rec-pilar-num {
    display: block;
    font-family: 'Sora', Arial, sans-serif;
    font-size: 5rem;
    font-weight: 900;
    color: rgba(11,60,140,0.07);
    line-height: 1;
    margin-bottom: -15px;
}

.rec-pilar-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ff7a00;
    text-transform: uppercase;
    border-bottom: 2px solid #ff7a00;
    padding-bottom: 4px;
    margin-bottom: 14px;
}

.rec-pilar-content h3 {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #0b3c8c;
    line-height: 1.2;
    margin-bottom: 16px;
}

.rec-pilar-content p {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 22px;
}

.rec-pilar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rec-pilar-list li {
    font-size: 0.95rem;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.4;
}

.rec-pilar-list li:last-child { border-bottom: none; }

.rec-pilar-list li span:first-child {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #0b3c8c, #1a5bb0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}


/* ================================================================
   CTA CENTRAL MEDIO
   ================================================================ */
.rec-cta-mid {
    background: linear-gradient(135deg, #ff7a00 0%, #e06000 100%);
    padding: 80px 0;
    text-align: center;
}

.rec-cta-mid-inner h2 {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 14px;
    line-height: 1.2;
}

.rec-cta-mid-inner p {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
    line-height: 1.6;
}

.rec-cta-nota {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    font-size: 0.85rem !important;
    color: rgba(255,255,255,0.7) !important;
}


/* ================================================================
   COMPONENTES / 8 MÓDULOS
   ================================================================ */
.rec-componentes {
    padding: 90px 0;
    background: #f0f4fa;
    text-align: center;
}

.rec-comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    text-align: left;
}

.rec-comp-card {
    background: white;
    border-radius: 18px;
    padding: 32px 24px;
    border: 1.5px solid #e8eef8;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rec-comp-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0b3c8c, #ff7a00);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

.rec-comp-card:hover::after { transform: scaleX(1); }

.rec-comp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(11,60,140,0.12);
    border-color: transparent;
}

.rec-comp-icon {
    font-size: 2.2rem;
    margin-bottom: 16px;
    display: block;
}

.rec-comp-card h3 {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #0b3c8c;
    margin-bottom: 10px;
}

.rec-comp-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}


/* ================================================================
   PERSONALIZACIÓN (IDIOMAS)
   ================================================================ */
.rec-personalizacion {
    padding: 80px 0;
    background: white;
}

.rec-pers-grid {
    display: flex;
    align-items: center;
    gap: 70px;
    flex-wrap: wrap;
}

.rec-pers-content {
    flex: 1;
    min-width: 300px;
}

.rec-pers-content h2 {
    font-family: 'Sora', Arial, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #0b3c8c;
    line-height: 1.2;
    margin-bottom: 16px;
}

.rec-pers-content p {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 24px;
}

.rec-pers-idiomas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rec-pers-idiomas span {
    background: #f0f4fa;
    border: 1.5px solid #d0daea;
    color: #0b3c8c;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: default;
}

.rec-pers-idiomas span:hover {
    background: #0b3c8c;
    color: white;
    border-color: #0b3c8c;
    transform: translateY(-2px);
}

.rec-pers-img {
    flex: 1;
    min-width: 280px;
}

.rec-pers-img img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(11,60,140,0.15);
    display: block;
    margin: 0;
}


/* ================================================================
   FORMULARIO DEMO (extra campos)
   ================================================================ */
.demo input[name="empresa"] {
    padding: 15px;
    margin: 10px;
    width: 220px;
    border-radius: 6px;
    border: none;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {

    .rec-hero {
        padding: 110px 0 60px;
        background-position: 70% center;
    }

    .rec-hero-text h1 {
        font-size: 36px;
    }

    .rec-hero-visual {
        display: none; /* se oculta la imagen en móvil para limpiar */
    }

    .rec-flujo-arrow {
        display: none;
    }

    .rec-flujo-grid {
        flex-direction: column;
        align-items: center;
    }

    .rec-pilar, .rec-pilar-alt {
        flex-direction: column;
    }

    .rec-que-es-grid, .rec-pers-grid {
        flex-direction: column;
    }

    .rec-que-es-badge {
        position: static;
        margin-top: 20px;
        display: inline-flex;
    }

    .rec-section-title {
        font-size: 1.7rem;
    }

    .rec-comp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .demo input[name="empresa"] {
        width: 90%;
    }
}

@media (max-width: 600px) {
    .rec-hero-text h1 { font-size: 30px; }
    .rec-que-es-stats  { grid-template-columns: 1fr 1fr; }
    .rec-comp-grid     { grid-template-columns: 1fr; }
    .rec-pilar-num     { font-size: 3.5rem; }
    .rec-pilar-content h3 { font-size: 1.5rem; }
    .rec-cta-mid-inner h2 { font-size: 1.6rem; }
    .rec-proof-inner   { flex-direction: column; gap: 18px; text-align: center; }
}

/* PLANES A CONTRATAR */

  .seccion-planes {
            padding: 80px 0;
            background-color: var(--bg-light);
            font-family: 'Roboto Condensed', sans-serif;
        }

        .planes-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            gap: 30px;
            justify-content: center;
            align-items: flex-start;
        }

        .plan-card {
            background: #fff;
            border-radius: 15px;
            box-shadow: var(--shadow-card);
            width: 100%;
            flex: 1;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #e1e1e1;
            display: flex;
            flex-direction: column;
        }

        .plan-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(11, 60, 140, 0.15);
        }

        /* Plan Destacado (Efecto Marketing) */
        .plan-card.destacado {
            border: 2px solid var(--color-xorcom-azul);
            transform: scale(1.05);
            position: relative;
            z-index: 1;
        }
        
        .plan-card.destacado:hover {
            transform: scale(1.05) translateY(-10px);
        }

        .etiqueta-popular {
            background-color: var(--color-xorcom-azul);
            color: #fff;
            text-align: center;
            padding: 5px 0;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 1px;
        }

        /* Cabeceras de Plan */
        .plan-header {
            padding: 30px;
            text-align: center;
            color: #fff;
        }

        .plan-basic .plan-header { background: linear-gradient(135deg, #707070, #999); }
        .plan-pro .plan-header { background: linear-gradient(135deg, var(--color-xorcom-azul), #1a56b9); }
        .plan-elite .plan-header { background: linear-gradient(135deg, #202020, #444); }

        .plan-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 15px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .plan-header h3 {
            font-size: 28px;
            margin: 0;
            font-weight: 700;
            text-transform: uppercase;
        }

        .plan-header p {
            font-size: 14px;
            opacity: 0.9;
            margin: 5px 0 0;
            color: #fff;
        }

        /* Precio */
        .plan-price {
            padding: 30px;
            text-align: center;
            background-color: #fff;
            border-bottom: 1px solid #eee;
        }

        .currency { font-size: 24px; vertical-align: super; color: var(--color-text-dark); }
        .amount { font-size: 48px; font-weight: 700; color: var(--color-text-dark); }
        .period { font-size: 16px; color: #777; }

        /* Caracteristicas */
        .plan-features {
            padding: 30px;
            flex-grow: 1;
        }

        .plan-features ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .plan-features li {
            font-size: 16px;
            color: var(--color-text-dark);
            padding: 10px 0 10px 30px;
            position: relative;
            line-height: 1.4;
        }

        /* Icono de Check Verde con SVG para marketing */
        .plan-features li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 12px;
            width: 18px;
            height: 18px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2325D366"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
        }
        
        /* Característica resaltada (Add-on IA) */
        .feature-highlight {
            font-weight: bold;
            color: var(--color-xorcom-azul);
        }

        /* Botón CTA (Push to sale) */
        .plan-footer {
            padding: 30px;
            text-align: center;
            background-color: #fbfbfb;
            border-top: 1px solid #eee;
        }

        .btn-plan-cta {
            display: inline-block;
            width: 100%;
            padding: 15px 0;
            background-color: var(--color-xorcom-rojo);
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            font-size: 18px;
            border-radius: 8px;
            transition: background-color 0.3s ease, transform 0.2s ease;
            border: none;
            cursor: pointer;
            text-transform: uppercase;
        }

        .btn-plan-cta:hover {
            background-color: #e61e54;
            transform: translateY(-2px);
            color: #fff;
        }
        
        .plan-pro .btn-plan-cta {
            background-color: var(--color-xorcom-azul);
        }
        .plan-pro .btn-plan-cta:hover {
            background-color: #1a56b9;
        }

        /* Responsivo */
        @media (max-width: 992px) {
            .planes-container {
                flex-wrap: wrap;
                gap: 40px;
            }
            .plan-card {
                flex: none;
                width: 45%;
            }
            .plan-card.destacado {
                transform: scale(1);
            }
        }

        @media (max-width: 768px) {
            .planes-container {
                flex-direction: column;
                align-items: center;
            }
            .plan-card {
                width: 100%;
                max-width: 400px;
            }
            .headTit h1 { font-size: 36px; }
        }
		
		
		
/* ================================================================
   STICKY BAR
================================================================ */
.pl-sticky {
  position: fixed; top: 0; width: 100%;
  background: linear-gradient(90deg, var(--azul) 0%, var(--azul-mid) 100%);
  color: #fff; text-align: center;
  padding: 9px 16px; font-size: .88rem; font-weight: 500;
  z-index: 998; display: flex; align-items: center; justify-content: center; gap: 14px;
}
.pl-sticky a {
  background: var(--amarillo); color: #000; font-weight: 700;
  padding: 4px 14px; border-radius: 20px; text-decoration: none;
  font-size: .8rem; white-space: nowrap; transition: opacity .2s;
}
.pl-sticky a:hover { opacity: .85; }

/* ================================================================
   HERO PLANES
================================================================ */
.pl-hero {
  background: linear-gradient(135deg, #061e4d 0%, #0b3c8c 55%, #1d63c9 100%);
  padding: 130px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pl-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.pl-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,233,0,.12); border: 1px solid rgba(255,233,0,.3);
  color: var(--amarillo); font-size: .78rem; font-weight: 700; letter-spacing: 2px;
  padding: 6px 16px; border-radius: 50px; text-transform: uppercase;
  margin-bottom: 24px;
}
.pl-hero-tag span { width: 7px; height: 7px; background: var(--amarillo); border-radius: 50%; animation: pulse-dot 1.5s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }

.pl-hero h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800; color: #fff;
  line-height: 1.15; margin-bottom: 18px;
}
.pl-hero h1 em { font-style: normal; color: var(--amarillo); }
.pl-hero-sub {
  font-size: 1.1rem; color: rgba(255,255,255,.82);
  max-width: 640px; margin: 0 auto 36px; line-height: 1.7;
}
.pl-hero-badges {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 40px;
}
.pl-hero-badge {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; padding: 8px 18px; border-radius: 50px;
  font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 7px;
}
.pl-hero-scroll {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.6); font-size: .85rem; cursor: pointer;
}

/* ================================================================
   BARRA DE CONFIANZA
================================================================ */
.pl-trust {
  background: #fff; border-bottom: 1px solid #edf0f5;
  padding: 20px 0;
}
.pl-trust-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap;
}
.pl-trust-item {
  display: flex; align-items: center; gap: 10px;
  color: #555; font-size: .88rem; font-weight: 500;
}
.pl-trust-item strong { color: var(--azul); font-size: 1.1rem; }
.pl-trust-sep { width: 1px; height: 30px; background: #e0e4eb; }

/* ================================================================
   SECCIÓN DOLOR / PROBLEMA
================================================================ */
.pl-pain {
  background: var(--claro); padding: 70px 0; text-align: center;
}
.pl-pain-tag {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--naranja);
  border-bottom: 2px solid var(--naranja); padding-bottom: 4px; margin-bottom: 18px;
}
.pl-pain h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; color: var(--azul); margin-bottom: 14px; line-height: 1.2;
}
.pl-pain-sub { font-size: 1rem; color: #555; max-width: 600px; margin: 0 auto 50px; line-height: 1.7; }
.pl-pain-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px; margin-bottom: 40px;
}
.pl-pain-card {
  background: #fff; border-radius: 18px; padding: 32px 24px;
  border: 1.5px solid #e8eef8; text-align: left;
  transition: all .3s ease; position: relative;
}
.pl-pain-card:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: transparent; }
.pl-pain-card .pain-num {
  font-family: 'Sora', sans-serif; font-size: 3rem; font-weight: 900;
  color: rgba(11,60,140,.07); line-height: 1; margin-bottom: -8px;
}
.pl-pain-card .pain-emoji { font-size: 2rem; display: block; margin-bottom: 12px; }
.pl-pain-card h3 {
  font-family: 'Sora', sans-serif; font-size: 1.05rem; font-weight: 700;
  color: var(--azul); margin-bottom: 10px;
}
.pl-pain-card p { font-size: .9rem; color: #666; line-height: 1.6; margin: 0; }



.pl-pain-banner {
  /* Cambiamos var(--naranja) por el color real #ff7a00 */
  background: linear-gradient(90deg, #ff7a00 0%, #e06000 100%);
  border-radius: 16px; 
  padding: 20px 32px;
  color: #fff; 
  font-weight: 700; 
  font-size: 1rem; 
  text-align: center;
}





/* ================================================================
   PLANES — SECCIÓN PRINCIPAL
================================================================ */
.pl-planes {
  background: #fff; padding: 90px 0;
}
.pl-planes-header { text-align: center; margin-bottom: 60px; }
.pl-planes-header .pl-section-tag {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--naranja);
  border-bottom: 2px solid var(--naranja); padding-bottom: 4px; margin-bottom: 16px;
}
.pl-planes-header h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800; color: var(--azul); line-height: 1.2; margin-bottom: 14px;
}
.pl-planes-header p { font-size: 1.05rem; color: #555; max-width: 580px; margin: 0 auto; line-height: 1.7; }

/* GRID PLANES */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: stretch;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(11,60,140,.15);
}

/* TARJETA BASE */
.pl-card {
  display: flex; flex-direction: column;
  background: #fff; padding: 40px 32px 36px;
  border: none; position: relative;
  transition: transform .3s ease;
}
.pl-card:hover { transform: translateY(-4px); }

/* CARD 1: Phone System */
/* CARD 2: Connect CX (Popular) — VERSIÓN CORREGIDA Y PREMIUM */
.pl-card--popular {
  background: linear-gradient(160deg, #0a1f5c 0%, #0b3c8c 45%, #1260c4 100%);
  box-shadow: 0 30px 80px rgba(11,60,140,.45), inset 0 1px 0 rgba(255,255,255,.1);
  color: #fff;
  z-index: 2;
  transform: scale(1.03);
  outline: 3px solid rgba(255,233,0,.45);
  outline-offset: -3px;
}
.pl-card--popular:hover { transform: scale(1.03) translateY(-6px); }

/* ── FIX VISIBILIDAD: fuerza BLANCO en TODOS los elementos del card popular ── */
.pl-card--popular,
.pl-card--popular p,
.pl-card--popular span,
.pl-card--popular strong,
.pl-card--popular li,
.pl-card--popular .pl-feat-list li,
.pl-card--popular .pl-feat-list li strong,
.pl-card--popular .pl-card-tagline,
.pl-card--popular .pl-card-for  { color: #ffffff !important; }

.pl-card--popular .pl-card-label  { color: #FFE900 !important; }
.pl-card--popular .pl-card-ideal  { color: rgba(255,255,255,.65) !important; }
.pl-card--popular .pl-price-label { color: rgba(255,255,255,.65) !important; }
.pl-card--popular .pl-note        { color: rgba(255,255,255,.55) !important; }
.pl-card--popular .pl-card-sep    { background: rgba(255,255,255,.2); }
.pl-card--popular h3              { color: #ffffff !important; font-size: 1.55rem; }
.pl-card--popular .pl-price-val   { color: #FFE900 !important; }
.pl-card--popular .pl-feat-list li { border-color: rgba(255,255,255,.14) !important; }
.pl-card--popular .pl-check {
  background: rgba(255,233,0,.22) !important;
  color: #FFE900 !important;
  font-weight: 900;
}




/* CARD 3: Contact Center */
.pl-card--enterprise {
  background: #0C0947; /*color de fondo plan 3*/
  color: #fff;
  border-left: 1px solid rgba(255,255,255,.08);
}

/* Badge Popular */
.pl-badge-popular {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--amarillo); color: #000;
  font-family: 'Sora', sans-serif; font-size: .72rem; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 20px; border-radius: 0 0 12px 12px;
  white-space: nowrap;
}

/* Cabecera de cada card */
.pl-card-icon {
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin-bottom: 20px;
}
.pl-card--basic    .pl-card-icon { background: rgba(11,60,140,.1); }
.pl-card--popular  .pl-card-icon { background: rgba(255,255,255,.15); }
.pl-card--enterprise .pl-card-icon { background: rgba(255,255,255,.1); }

.pl-card-label {
  font-size: .72rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 8px;
}
.pl-card--basic .pl-card-label    { color: var(--naranja); }
.pl-card--popular .pl-card-label  { color: var(--amarillo); }
.pl-card--enterprise .pl-card-label { color: rgba(255,233,0,.8); }

.pl-card h3 {
  font-family: 'Sora', sans-serif; font-size: 1.45rem;
  font-weight: 800; margin-bottom: 8px; line-height: 1.2;
}
.pl-card--basic h3    { color: var(--azul); }
.pl-card--popular h3  { color: #fff; }
.pl-card--enterprise h3 { color: #fff; }

.pl-card-tagline {
  font-size: .9rem; line-height: 1.5; margin-bottom: 24px;
}
.pl-card--basic .pl-card-tagline    { color: #666; }
.pl-card--popular .pl-card-tagline  { color: rgba(255,255,255,.8); }
.pl-card--enterprise .pl-card-tagline { color: rgba(255,255,255,.7); }

/* Separador */
.pl-card-sep {
  height: 1px; margin: 0 0 22px;
}
.pl-card--basic .pl-card-sep    { background: #e4ecf8; }
.pl-card--popular .pl-card-sep  { background: rgba(255,255,255,.2); }
.pl-card--enterprise .pl-card-sep { background: rgba(255,255,255,.15); }

/* Ideal para */
.pl-card-ideal {
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.2px; margin-bottom: 10px;
}
.pl-card--basic .pl-card-ideal    { color: #999; }
.pl-card--popular .pl-card-ideal  { color: rgba(255,255,255,.6); }
.pl-card--enterprise .pl-card-ideal { color: rgba(255,255,255,.5); }

.pl-card-for {
  font-size: .88rem; line-height: 1.5; margin-bottom: 22px; font-weight: 500;
}
.pl-card--basic .pl-card-for    { color: var(--azul); }
.pl-card--popular .pl-card-for  { color: #fff; }
.pl-card--enterprise .pl-card-for { color: rgba(255,255,255,.85); }

/* Lista features */
.pl-feat-list {
  list-style: none; padding: 0; margin: 0 0 28px; flex-grow: 1;
}
.pl-feat-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .9rem; line-height: 1.5;
  padding: 9px 0; border-bottom: 1px solid transparent;
}
.pl-card--basic .pl-feat-list li       { color: #444; border-color: #f0f0f0; }
.pl-card--popular .pl-feat-list li     { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.12); }
.pl-card--enterprise .pl-feat-list li  { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.1); }

.pl-feat-list li:last-child { border-bottom: none; }

.pl-check {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; flex-shrink: 0; margin-top: 1px;
}
.pl-card--basic .pl-check    { background: rgba(11,60,140,.12); color: var(--azul); }
.pl-card--popular .pl-check  { background: rgba(255,233,0,.25); color: var(--amarillo); }
.pl-card--enterprise .pl-check { background: rgba(255,126,0,.25); color: var(--naranja); }

/* Precio / CTA área */
.pl-price-area { margin-top: auto; }
.pl-price-label {
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 4px;
}
.pl-card--basic .pl-price-label    { color: #999; }
.pl-card--popular .pl-price-label  { color: rgba(255,255,255,.6); }
.pl-card--enterprise .pl-price-label { color: rgba(255,255,255,.5); }

.pl-price-val {
  font-family: 'Sora', sans-serif; font-size: 1.4rem; font-weight: 800; margin-bottom: 18px;
}
.pl-card--basic .pl-price-val    { color: var(--azul); }
.pl-card--popular .pl-price-val  { color: #fff; }
.pl-card--enterprise .pl-price-val { color: #fff; }

/* Botones */
.pl-btn {
  display: block; text-align: center; padding: 14px 20px;
  border-radius: 10px; font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: all .3s ease; width: 100%; box-sizing: border-box;
}
.pl-btn--basic {
  background: var(--azul); color: #fff;
  border: 2px solid var(--azul);
}
.pl-btn--basic:hover { background: transparent; color: var(--azul); }

.pl-btn--popular {
  background: var(--amarillo); color: #000;
  border: 2px solid var(--amarillo);
}
.pl-btn--popular:hover { background: #ffe200; transform: scale(1.02); }

.pl-btn--enterprise {
  background: var(--naranja); color: #fff;
  border: 2px solid var(--naranja);
}
.pl-btn--enterprise:hover { background: transparent; color: var(--naranja); }

.pl-note {
  font-size: .75rem; text-align: center; margin-top: 10px;
}
.pl-card--basic .pl-note    { color: #aaa; }
.pl-card--popular .pl-note  { color: rgba(255,255,255,.5); }
.pl-card--enterprise .pl-note { color: rgba(255,255,255,.4); }

/* ================================================================
   TABLA COMPARATIVA
================================================================ */
.pl-tabla-wrap {
  background: var(--claro); padding: 70px 0;
}
.pl-tabla-header { text-align: center; margin-bottom: 40px; }
.pl-tabla-header h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800; color: var(--azul); margin-bottom: 12px;
}
.pl-tabla-header p { font-size: 1rem; color: #555; }

.pl-tabla-toggle {
  display: flex; justify-content: center; gap: 0; margin-bottom: 36px;
  background: #e4ecf8; border-radius: 12px; padding: 4px;
  width: fit-content; margin-left: auto; margin-right: auto;
}
.pl-toggle-btn {
  padding: 8px 24px; border-radius: 9px; border: none; cursor: pointer;
  font-family: 'Sora', sans-serif; font-size: .85rem; font-weight: 600;
  background: transparent; color: #666; transition: all .25s;
}
.pl-toggle-btn.active { background: #fff; color: var(--azul); box-shadow: 0 2px 8px rgba(0,0,0,.1); }

.pl-tabla {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 30px rgba(11,60,140,.08);
}
.pl-tabla thead tr { background: var(--azul); }
.pl-tabla thead th {
  padding: 20px 16px; text-align: center; color: #fff;
  font-family: 'Sora', sans-serif; font-size: .9rem; font-weight: 700;
}
.pl-tabla thead th:first-child { text-align: left; min-width: 220px; }
.pl-tabla thead th.th-popular { background: #0d49a8; }

.pl-tabla tbody tr:nth-child(even) { background: #f8faff; }
.pl-tabla tbody tr:hover { background: #eef4ff; }

.pl-tabla tbody tr.pl-tabla-cat td {
  background: #f0f4fa; font-family: 'Sora', sans-serif;
  font-size: .78rem; font-weight: 700; color: #999;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 12px 16px 8px;
}
.pl-tabla td {
  padding: 13px 16px; font-size: .88rem; color: #444;
  border-bottom: 1px solid #f0f0f0; text-align: center;
}
.pl-tabla td:first-child { text-align: left; color: #333; font-weight: 500; }
.pl-tabla td:last-child { border-right: none; }

.t-check { color: #1a9f5b; font-size: 1.1rem; font-weight: 700; }
.t-dash  { color: #ccc; font-size: 1.2rem; }
.t-add   { color: var(--naranja); font-size: .75rem; font-weight: 700; background: rgba(255,122,0,.1); padding: 2px 8px; border-radius: 20px; }
.t-num   { color: var(--azul); font-weight: 700; }
.t-pop   { background: rgba(11,60,140,.04); }

/* ================================================================
   ADD-ON: RECEPCIONISTA IA
================================================================ */
.pl-addon {
  background: linear-gradient(135deg, #061e4d 0%, #0b3c8c 60%, #1d63c9 100%);
  padding: 90px 0; overflow: hidden; position: relative;
}
.pl-addon::before {
  content: '🤖'; font-size: 18rem; position: absolute;
  right: -40px; top: 50%; transform: translateY(-50%);
  opacity: .04; pointer-events: none;
}
.pl-addon-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.pl-addon-left .pl-addon-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,233,0,.12); border: 1px solid rgba(255,233,0,.35);
  color: var(--amarillo); font-size: .72rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 50px; margin-bottom: 20px;
}
.pl-addon-left h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 16px;
}
.pl-addon-left h2 em { font-style: normal; color: var(--amarillo); }
.pl-addon-left p { font-size: 1rem; color: rgba(255,255,255,.82); line-height: 1.7; margin-bottom: 32px; }

.pl-addon-feats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 36px;
}
.pl-addon-feat {
  display: flex; align-items: flex-start; gap: 10px;
}
.pl-addon-feat .af-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.1); display: flex;
  align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.pl-addon-feat .af-text strong {
  display: block; font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: 3px;
}
.pl-addon-feat .af-text span { font-size: .8rem; color: rgba(255,255,255,.65); }

.pl-addon-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.pl-addon-btn-main {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--amarillo); color: #000;
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: .95rem;
  padding: 14px 28px; border-radius: 10px; text-decoration: none;
  transition: all .3s; border: 2px solid var(--amarillo);
}
.pl-addon-btn-main:hover { background: #ffe200; transform: scale(1.03); }
.pl-addon-btn-sec {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #fff;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: .9rem;
  padding: 14px 24px; border-radius: 10px; text-decoration: none;
  border: 2px solid rgba(255,255,255,.3); transition: all .3s;
}
.pl-addon-btn-sec:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Tarjetas derechas del addon */
.pl-addon-right {
  display: flex; flex-direction: column; gap: 16px;
}
.pl-ai-card {
  background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15); border-radius: 18px;
  padding: 24px 28px; transition: all .3s;
}
.pl-ai-card:hover { background: rgba(255,255,255,.13); border-color: rgba(255,233,0,.3); }
.pl-ai-card-top {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.pl-ai-card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255,233,0,.15); display: flex;
  align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0;
}
.pl-ai-card-top strong {
  font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700; color: #fff;
}
.pl-ai-card p { font-size: .88rem; color: rgba(255,255,255,.75); line-height: 1.6; margin: 0; }
.pl-ai-card-metric {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,233,0,.15); color: var(--amarillo);
  font-size: .78rem; font-weight: 700; padding: 4px 12px;
  border-radius: 20px; margin-top: 10px;
}

/* ================================================================
   COMPARATIVA VISUAL (COLUMNA)
================================================================ */
.pl-vs {
  background: #fff; padding: 80px 0; text-align: center;
}
.pl-vs h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800; color: var(--azul); margin-bottom: 14px;
}
.pl-vs p { font-size: 1rem; color: #555; margin-bottom: 50px; }

.pl-vs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.pl-vs-item {
  background: var(--claro); border-radius: 18px; padding: 28px 24px;
  border: 2px solid transparent; text-align: left;
  transition: all .3s; position: relative; overflow: hidden;
}
.pl-vs-item::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; transform: scaleX(0); transition: transform .3s;
  transform-origin: left;
}
.pl-vs-item:nth-child(1)::after { background: var(--azul); }
.pl-vs-item:nth-child(2)::after { background: var(--naranja); }
.pl-vs-item:nth-child(3)::after { background: var(--amarillo); }
.pl-vs-item:nth-child(4)::after { background: #1a9f5b; }

.pl-vs-item:hover { border-color: #dde8f8; box-shadow: var(--sombra); }
.pl-vs-item:hover::after { transform: scaleX(1); }

.pl-vs-item .vs-emoji { font-size: 2rem; margin-bottom: 14px; display: block; }
.pl-vs-item h4 {
  font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--azul); margin-bottom: 8px;
}
.pl-vs-item p { font-size: .88rem; color: #666; line-height: 1.55; margin: 0; }

/* ================================================================
   FAQ
================================================================ */
.pl-faq {
  background: var(--claro); padding: 80px 0;
}
.pl-faq-header { text-align: center; margin-bottom: 50px; }
.pl-faq-header h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800; color: var(--azul); margin-bottom: 12px;
}
.pl-faq-header p { font-size: 1rem; color: #555; }

.pl-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

.pl-faq-item {
  background: #fff; border-radius: 14px;
  border: 1.5px solid #e8eef8; overflow: hidden;
  transition: box-shadow .3s;
}
.pl-faq-item:hover { box-shadow: 0 8px 25px rgba(11,60,140,.08); }

.pl-faq-q {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; cursor: pointer; text-align: left;
  font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--azul); gap: 16px;
}
.pl-faq-q .faq-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--claro); display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0;
  transition: all .3s; color: var(--azul);
}
.pl-faq-item.open .faq-icon { background: var(--azul); color: #fff; transform: rotate(45deg); }

.pl-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease, padding .3s;
  padding: 0 24px;
  font-size: .92rem; color: #555; line-height: 1.7;
}
.pl-faq-item.open .pl-faq-a {
  max-height: 300px; padding: 0 24px 20px;
}

/* ================================================================
   TESTIMONIOS MINI
================================================================ */
.pl-testi {
  background: #fff; padding: 80px 0;
}
.pl-testi h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; color: var(--azul); text-align: center; margin-bottom: 50px;
}
.pl-testi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.pl-testi-card {
  background: var(--claro); border-radius: 18px; padding: 28px;
  border: 1.5px solid #e8eef8; position: relative; transition: all .3s;
}
.pl-testi-card:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: transparent; }
.pl-testi-card::before {
  content: '"'; font-family: Georgia, serif; font-size: 5rem;
  color: rgba(11,60,140,.08); position: absolute; top: 10px; left: 20px;
  line-height: 1;
}
.pl-testi-card p {
  font-size: .92rem; color: #444; line-height: 1.7;
  font-style: italic; margin-bottom: 20px; position: relative; z-index: 1;
}
.pl-testi-author {
  display: flex; align-items: center; gap: 12px;
}
.pl-testi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--azul); display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.pl-testi-info strong { display: block; font-size: .9rem; color: var(--azul); font-weight: 700; }
.pl-testi-info span  { font-size: .8rem; color: #888; }
.pl-testi-plan {
  display: inline-block; margin-top: 6px;
  background: rgba(11,60,140,.1); color: var(--azul);
  font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 20px;
}

/* ================================================================
   FINAL CTA
================================================================ */
.pl-final-cta {
  background: linear-gradient(135deg, var(--naranja) 0%, #e06000 100%);
  padding: 90px 0; text-align: center;
}
.pl-final-cta h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 16px;
}
.pl-final-cta p {
  font-size: 1.05rem; color: rgba(255,255,255,.9); max-width: 550px;
  margin: 0 auto 36px; line-height: 1.7;
}
.pl-cta-group { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.pl-cta-main {
  background: #fff; color: var(--azul);
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1rem;
  padding: 16px 36px; border-radius: 12px; text-decoration: none;
  border: 2px solid #fff; transition: all .3s; display: inline-flex; align-items: center; gap: 8px;
}
.pl-cta-main:hover { background: transparent; color: #fff; }
.pl-cta-phone {
  background: transparent; color: #fff;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: .95rem;
  padding: 16px 28px; border-radius: 12px; text-decoration: none;
  border: 2px solid rgba(255,255,255,.4); transition: all .3s;
  display: inline-flex; align-items: center; gap: 8px;
}
.pl-cta-phone:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.pl-final-nota {
  margin-top: 20px; font-size: .82rem; color: rgba(255,255,255,.65);
}

/* ================================================================
   FORMULARIO DEMO PLANES
================================================================ */
.pl-demo {
  background: linear-gradient(135deg, #061e4d 0%, #0b3c8c 100%);
  padding: 80px 0; text-align: center;
}
.pl-demo h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800; color: #fff; margin-bottom: 10px;
}
.pl-demo p {
  font-size: 1rem; color: rgba(255,255,255,.8); margin-bottom: 30px; line-height: 1.6;
}
.pl-demo form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 800px; margin: 0 auto; }
.pl-demo input {
  padding: 14px 18px; border-radius: 10px; border: 2px solid transparent;
  font-size: .95rem; width: 210px; background: rgba(255,255,255,.1);
  color: #fff; outline: none; transition: all .3s;
}
.pl-demo input::placeholder { color: rgba(255,255,255,.55); }
.pl-demo input:focus { border-color: var(--amarillo); background: rgba(255,255,255,.15); }
.pl-demo select {
  padding: 14px 18px; border-radius: 10px; border: 2px solid transparent;
  font-size: .95rem; width: 220px; background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.55); outline: none; transition: all .3s; cursor: pointer;
}
.pl-demo select:focus { border-color: var(--amarillo); background: rgba(255,255,255,.15); }
.pl-demo select option { color: #000; background: #fff; }
.pl-demo button {
  background: var(--amarillo); color: #000; padding: 14px 32px;
  border: none; border-radius: 10px; font-family: 'Sora', sans-serif;
  font-size: 1rem; font-weight: 800; cursor: pointer; transition: all .3s;
  display: flex; align-items: center; gap: 8px;
}
.pl-demo button:hover { background: #ffe200; transform: scale(1.03); }
.pl-demo-nota {
  margin-top: 16px; font-size: .8rem; color: rgba(255,255,255,.5);
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 960px) {
  .pl-grid { grid-template-columns: 1fr; }
  .pl-card--popular { transform: none; }
  .pl-card--popular:hover { transform: translateY(-4px); }
  .pl-addon-inner { grid-template-columns: 1fr; gap: 50px; }
  .pl-addon::before { display: none; }
  .pl-addon-feats { grid-template-columns: 1fr; }
  .pl-tabla-wrap { overflow-x: auto; }
  .pl-tabla { min-width: 600px; }
}
@media (max-width: 600px) {
  .pl-hero { padding: 110px 0 60px; }
  .pl-trust-sep { display: none; }
  .pl-trust-inner { gap: 20px; }
  .pl-demo input, .pl-demo select { width: 90%; }
  .pl-faq-q { font-size: .9rem; }
}

/* Utilidades reutilizadas */
.pl-container { max-width: 1100px; width: 90%; margin: 0 auto; }




/* ================================================================
   VARIABLES
================================================================ */

/* ================================================================
   STICKY BAR
================================================================ */
.idx-sticky {
  position: fixed; top: 0; width: 100%;
  background: linear-gradient(90deg, var(--azul-dark) 0%, var(--azul) 100%);
  color: #fff; text-align: center; padding: 9px 16px;
  font-size: .88rem; font-weight: 500; z-index: 998;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.idx-sticky a {
  background: var(--amarillo); color: #000; font-weight: 800;
  padding: 4px 14px; border-radius: 20px; text-decoration: none;
  font-size: .8rem; transition: opacity .2s;
}
.idx-sticky a:hover { opacity: .85; }

/* ================================================================
   HERO PRINCIPAL
================================================================ */
.idx-hero {
  position: relative;
  background-image: url("/img/hero15.webp");
  background-size: cover;
  background-position: center top;
  min-height: 620px;
  display: flex; align-items: center;
  padding: 110px 0 80px;
  color: white; 
  /*overflow: hidden; Elimina esta para la transparencia */
  /*clip-path: inset(0);  /* ← REEMPLAZAR con esto: mismo efecto visual, sin romper backdrop-filter */
}

.idx-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    65deg,
    rgba(6,28,90,0.96) 0%,
    rgba(11,60,140,0.78) 40%,
    rgba(0,0,0,0.30) 70%,
    transparent 100%
  );
  z-index: 1;
}

/* Partículas decorativas */
.idx-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.idx-particles span { position: absolute; border-radius: 50%; opacity: .08; animation: idxFloat 10s ease-in-out infinite; }
.idx-particles span:nth-child(1){ width:380px;height:380px;background:var(--amarillo);top:-100px;left:-80px;animation-delay:0s; }
.idx-particles span:nth-child(2){ width:200px;height:200px;background:var(--naranja);bottom:5%;right:8%;animation-delay:3s; }
.idx-particles span:nth-child(3){ width:140px;height:140px;background:#6FE7FF;top:35%;left:50%;animation-delay:5s; }
.idx-particles span:nth-child(4){ width:90px;height:90px;background:var(--amarillo);bottom:15%;left:25%;animation-delay:1.5s; }
.idx-particles span:nth-child(5){ width:60px;height:60px;background:var(--verde);top:15%;right:25%;animation-delay:4s; }
@keyframes idxFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-25px) scale(1.06)} }

/* Grid hero */
.idx-hero-inner {
  display: flex; align-items: center; gap: 60px;
  position: relative;
  z-index: 3; 
  flex-wrap: wrap;
}
.idx-hero-text { flex: 1; min-width: 300px; max-width: 620px; }
.idx-hero-visual { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 16px; }

/* Badge */
.idx-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,233,0,.14); border: 1.5px solid rgba(255,233,0,.45);
  color: var(--amarillo); font-family: 'Sora', sans-serif;
  font-size: .75rem; font-weight: 700; letter-spacing: 2px;
  padding: 8px 18px; border-radius: 50px; text-transform: uppercase;
  margin-bottom: 22px;
}
.idx-badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 8px var(--verde);
  animation: recPulse 1.5s infinite; flex-shrink: 0;
}

/* Título */
.idx-hero-text h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800; line-height: 1.08;
  color: #fff; margin-bottom: 22px; letter-spacing: -1.5px;
}


/* ANTES — línea 3801 */
.idx-hero-text h1 .hl-grad {
  background: linear-gradient(90deg, var(--amarillo), var(--naranja));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* DESPUÉS — selector global, funciona en cualquier h1 de cualquier sección */
.hl-grad {
  background: linear-gradient(90deg, #FFE900, #ff7a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline; /* necesario para que background-clip funcione en línea */
}


.idx-hero-text h1 .hl-grad {
  background: linear-gradient(90deg, var(--amarillo), var(--naranja));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.idx-hero-sub {
  font-size: 1.1rem; color: rgba(255,255,255,.85);
  line-height: 1.7; margin-bottom: 28px; max-width: 540px;
}

/* Bullets con iconos */
.idx-bullets { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.idx-bullet {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .97rem; color: rgba(255,255,255,.88); line-height: 1.4;
}
.idx-bullet-icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 900; flex-shrink: 0; margin-top: 1px;
}
.bull-bad  .idx-bullet-icon { background:rgba(255,77,77,.22); color:var(--rojo);  border:1.5px solid rgba(255,77,77,.4); }
.bull-bad  .idx-bullet-icon::before { content: "✗"; }
.bull-good .idx-bullet-icon { background:rgba(0,230,118,.18); color:var(--verde); border:1.5px solid rgba(0,230,118,.4); }
.bull-good .idx-bullet-icon::before { content: "✓"; }

/* CTAs */
.idx-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 18px; }
.idx-btn-main {
  font-family: 'Sora', sans-serif; font-size: 1.05rem; font-weight: 800;
  padding: 18px 36px; border-radius: 10px; text-decoration: none; display: inline-block;
  background: linear-gradient(90deg, var(--amarillo), #ffb700);
  color: #111; box-shadow: 0 10px 30px rgba(255,183,0,.45); transition: all .3s;
}
.idx-btn-main:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(255,183,0,.6); }
.idx-btn-sec {
  font-family: 'Sora', sans-serif; font-size: .97rem; font-weight: 600;
  color: #fff; text-decoration: none; padding: 16px 28px;
  border-radius: 10px; border: 1.5px solid rgba(255,255,255,.35);
  transition: all .3s; display: inline-block;
}
.idx-btn-sec:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }
.idx-urgencia {
  font-size: .83rem; color: #FFD54F;
  display: flex; align-items: center; gap: 8px;
}

/* Tarjetas flotantes del hero */
.idx-float-card {
  background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 16px;
  padding: 18px 22px; display: flex; align-items: center; gap: 14px;
  transition: all .3s;
}
.idx-float-card:hover { background: rgba(255,255,255,.18); transform: translateX(4px); }
.idx-float-icon { font-size: 1.8rem; flex-shrink: 0; }
.idx-float-card strong { display: block; font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.idx-float-card small { font-size: .78rem; color: rgba(255,255,255,.65); }
.idx-float-stat {
  margin-left: auto; text-align: right; flex-shrink: 0;
}
.idx-float-stat .stat-num {
  font-family: 'Sora', sans-serif; font-size: 1.4rem; font-weight: 900;
  color: var(--amarillo); display: block;
}
.idx-float-stat .stat-label { font-size: .7rem; color: rgba(255,255,255,.6); }

/* ================================================================
   BARRA DE CONFIANZA
================================================================ */
.idx-trust {
  background: #fff; border-bottom: 1px solid #edf0f5; padding: 18px 0;
}
.idx-trust-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 36px; flex-wrap: wrap;
}
.idx-trust-item {
  display: flex; align-items: center; gap: 10px;
  color: #555; font-size: .86rem; font-weight: 500;
}
.idx-trust-item strong { color: var(--azul); font-size: 1.1rem; font-family: 'Sora', sans-serif; }
.idx-trust-sep { width: 1px; height: 28px; background: #e0e4eb; }

/* ================================================================
   SECCIÓN PROBLEMA — DATOS REALES DE MARKETING
================================================================ */
.idx-pain {
  background: var(--claro); padding: 80px 0; text-align: center;
}
.idx-section-tag {
  display: inline-block; font-family: 'Sora', sans-serif;
  font-size: .73rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--naranja);
  border-bottom: 2px solid var(--naranja); padding-bottom: 4px; margin-bottom: 18px;
}
.idx-pain h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; color: var(--azul); line-height: 1.2; margin-bottom: 14px;
}
.idx-pain-sub {
  font-size: 1rem; color: #555; max-width: 620px;
  margin: 0 auto 50px; line-height: 1.7;
}
.idx-pain-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 22px; margin-bottom: 44px;
}
.idx-pain-card {
  background: #fff; border-radius: 18px; padding: 30px 24px;
  border: 1.5px solid #e8eef8; text-align: left;
  transition: all .3s; position: relative; overflow: hidden;
}
.idx-pain-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--rojo), #ff6b6b); transform: scaleX(0);
  transition: transform .3s; transform-origin: left;
}
.idx-pain-card:hover::before { transform: scaleX(1); }
.idx-pain-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-azul); border-color: transparent; }
.idx-pain-num { font-family: 'Sora', sans-serif; font-size: 3rem; font-weight: 900; color: rgba(255,77,77,.12); line-height: 1; margin-bottom: -6px; }
.idx-pain-emoji { font-size: 1.9rem; display: block; margin-bottom: 12px; }
.idx-pain-card h3 { font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700; color: var(--azul); margin-bottom: 8px; }
.idx-pain-card p { font-size: .88rem; color: #666; line-height: 1.6; margin: 0; }
.idx-pain-card .pain-stat {
  display: inline-block; margin-top: 12px;
  background: rgba(255,77,77,.08); color: #c0392b;
  font-size: .75rem; font-weight: 800; padding: 3px 12px;
  border-radius: 20px; border: 1px solid rgba(255,77,77,.2);
}
.idx-solucion-banner {
  background: linear-gradient(90deg, var(--naranja), #e06000);
  border-radius: 16px; padding: 22px 36px;
  color: #fff; font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: 1.05rem; text-align: center;
}

/* ================================================================
   SECCIÓN: QUÉ ES GOTO CONNECT (presentación del producto)
================================================================ */
.idx-que-es {
  background: #fff; padding: 90px 0;
}
.idx-que-es-grid {
  display: flex; align-items: center; gap: 70px; flex-wrap: wrap;
}
.idx-que-es-content { flex: 1; min-width: 300px; }
.idx-que-es-content h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800; color: var(--azul); line-height: 1.15; margin-bottom: 18px;
}
.idx-que-es-content h2 em { font-style: normal; color: var(--naranja); }
.idx-que-es-content p {
  font-size: 1.02rem; color: #555; line-height: 1.75; margin-bottom: 18px;
}
.idx-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0;
}
.idx-stat {
  background: var(--claro); border-radius: 14px; padding: 18px 20px;
  border-left: 4px solid var(--azul); text-align: left;
}
.idx-stat-num {
  font-family: 'Sora', sans-serif; font-size: 2rem; font-weight: 900;
  color: var(--azul); display: block; line-height: 1;
}
.idx-stat-label { font-size: .82rem; color: #666; margin-top: 4px; }

.idx-que-es-img { flex: 1; min-width: 280px; position: relative; }
.idx-que-es-img img {
  width: 100%; border-radius: 22px; box-shadow: 0 25px 60px rgba(11,60,140,.2);
  display: block; margin: 0;
}
.idx-img-badge {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  background: var(--azul); color: #fff; padding: 14px 24px;
  border-radius: 14px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 10px 30px rgba(11,60,140,.35); white-space: nowrap;
  font-family: 'Sora', sans-serif;
}
.idx-img-badge strong { font-size: .95rem; color: rgba(255,255,255,.9); font-weight: 700; }
.idx-img-badge small { font-size: .75rem; color: rgba(255,255,255,.7); display: block; }

/* ================================================================
   PILARES: TELEFONÍA / REUNIONES / MENSAJERÍA
================================================================ */
.idx-pilares { padding: 90px 0; background: var(--claro); }
.idx-pilares-header { text-align: center; margin-bottom: 60px; }
.idx-pilares-header h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800; color: var(--azul); margin-bottom: 14px; line-height: 1.2;
}
.idx-pilares-header p { font-size: 1rem; color: #555; max-width: 580px; margin: 0 auto; line-height: 1.7; }

/* Pilar individual */
.idx-pilar {
  display: flex; align-items: center; gap: 70px;
  margin-bottom: 90px; flex-wrap: wrap;
}
.idx-pilar:last-child { margin-bottom: 0; }
.idx-pilar-rev { flex-direction: row-reverse; }

.idx-pilar-visual { flex: 1; min-width: 280px; }
.idx-pilar-visual-inner {
  background: var(--azul); border-radius: 24px;
  padding: 50px 40px; text-align: center; position: relative; overflow: hidden;
}
.idx-pilar-visual-inner::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.idx-pilar-visual-inner::after {
  content: ''; position: absolute; bottom: -40px; left: -40px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,233,0,.06);
}
.idx-pilar-emoji {
  font-size: 4.5rem; display: block; margin-bottom: 20px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.3));
}
.idx-pilar-visual-title {
  font-family: 'Sora', sans-serif; font-size: 1.6rem; font-weight: 800;
  color: #fff; margin-bottom: 12px;
}
.idx-pilar-visual-sub {
  font-size: .9rem; color: rgba(255,255,255,.72); line-height: 1.6;
}
.idx-pilar-metrics {
  display: flex; gap: 14px; justify-content: center; margin-top: 24px;
}
.idx-pilar-metric {
  background: rgba(255,255,255,.1); border-radius: 12px; padding: 12px 16px;
  text-align: center; flex: 1;
}
.idx-pilar-metric .pm-num {
  font-family: 'Sora', sans-serif; font-size: 1.4rem; font-weight: 900;
  color: var(--amarillo); display: block;
}
.idx-pilar-metric .pm-label { font-size: .72rem; color: rgba(255,255,255,.65); }

.idx-pilar-content { flex: 1; min-width: 300px; }
.idx-pilar-num {
  font-family: 'Sora', sans-serif; font-size: 5rem; font-weight: 900;
  color: rgba(11,60,140,.07); line-height: 1; margin-bottom: -12px;
}
.idx-pilar-tag {
  display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: 2px; color: var(--naranja); text-transform: uppercase;
  border-bottom: 2px solid var(--naranja); padding-bottom: 4px; margin-bottom: 14px;
}
.idx-pilar-content h3 {
  font-family: 'Sora', sans-serif; font-size: 1.9rem; font-weight: 800;
  color: var(--azul); line-height: 1.2; margin-bottom: 16px;
}
.idx-pilar-content p {
  font-size: .97rem; color: #555; line-height: 1.75; margin-bottom: 22px;
}
.idx-pilar-list { list-style: none; padding: 0; margin: 0 0 24px; }
.idx-pilar-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .9rem; color: #333; padding: 9px 0;
  border-bottom: 1px solid #f0f0f0; line-height: 1.4;
}
.idx-pilar-list li:last-child { border-bottom: none; }
.idx-pilar-list li .pi-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--azul), var(--azul-mid));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .68rem; font-weight: 900;
  flex-shrink: 0; margin-top: 1px;
}
.idx-pilar-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--azul); color: #fff; padding: 13px 26px;
  border-radius: 10px; text-decoration: none; font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: .9rem; transition: all .3s;
  border: 2px solid var(--azul);
}
.idx-pilar-btn:hover { background: transparent; color: var(--azul); }

/* ================================================================
   SECCIÓN: CÓMO FUNCIONA
================================================================ */
.idx-flujo {
  background: linear-gradient(135deg, var(--azul-dark) 0%, var(--azul) 55%, var(--azul-mid) 100%);
  padding: 90px 0; color: #fff; text-align: center; position: relative; overflow: hidden;
}
.idx-flujo::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v5h5v5H0v5h20v-9.5zm-2 4.5h-4v-4h4v4zm0-8H8v-4h10v4zm10 8h4v4h-4v-4zm0-8h4v4h-4v-4zm-8 8h4v4h-4v-4zm0-8h4v4h-4v-4z' fill='%23ffffff' fill-opacity='0.09' fill-rule='evenodd'/%3E%3C/svg%3E"); 
  background: none; 

}
.idx-flujo h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800; color: #fff; margin-bottom: 14px; position: relative;
}
.idx-flujo-sub {
  font-size: 1rem; color: rgba(255,255,255,.78); max-width: 580px;
  margin: 0 auto 60px; line-height: 1.7; position: relative;
}
.idx-flujo-grid {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0; position: relative;
}
.idx-paso {
  flex: 1; min-width: 175px; max-width: 220px; padding: 28px 18px;
  position: relative; text-align: center;
}
.idx-paso::after {
  content: "→"; position: absolute; right: -14px; top: 36px;
  font-size: 1.6rem; color: rgba(255,233,0,.45);
}
.idx-paso:last-child::after { display: none; }
.idx-paso-num {
  width: 56px; height: 56px; background: var(--amarillo); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-size: 1.3rem; font-weight: 900;
  color: var(--azul); margin: 0 auto 18px;
  box-shadow: 0 8px 20px rgba(255,233,0,.4);
}
.idx-paso h3 {
  font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--amarillo); margin-bottom: 10px;
}
.idx-paso p { font-size: .85rem; color: rgba(255,255,255,.78); line-height: 1.55; }

/* ================================================================
   RESULTADOS / MÉTRICAS
================================================================ */
.idx-resultados { background: #fff; padding: 80px 0; text-align: center; }

.idx-resultados h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800; color: var(--azul); margin-bottom: 12px;
}
.idx-resultados-sub {
  font-size: 1rem; color: #555; max-width: 580px; margin: 0 auto 50px; line-height: 1.7;
}
.idx-metrics-grid {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
}
.idx-metric-card {
  background: linear-gradient(135deg, var(--claro), #e8eef8);
  border-left: 5px solid var(--naranja); border-radius: 14px;
  padding: 28px 24px; flex: 1; min-width: 190px; max-width: 240px;
  text-align: left; transition: all .3s;
}
.idx-metric-card:hover { transform: translateY(-8px); box-shadow: var(--sombra-azul); }
.idx-metric-num {
  font-family: 'Sora', sans-serif; font-size: 2.8rem; font-weight: 900;
  color: var(--azul); line-height: 1;
}
.idx-metric-label { font-size: .9rem; color: #444; margin-top: 8px; line-height: 1.4; }
.idx-metric-source { font-size: .72rem; color: #aaa; margin-top: 6px; font-style: italic; }

/* ================================================================
   SERVICIOS ADICIONALES (IA / CC / Rec)
================================================================ */
.idx-servicios { background: var(--claro); padding: 90px 0; }
.idx-servicios-header { text-align: center; margin-bottom: 50px; }
.idx-servicios-header h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800; color: var(--azul); margin-bottom: 12px;
}
.idx-servicios-header p { font-size: 1rem; color: #555; max-width: 560px; margin: 0 auto; line-height: 1.7; }
.idx-serv-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
}
.idx-serv-card {
  background: #fff; border-radius: 20px; padding: 36px 28px;
  border: 1.5px solid #e8eef8; transition: all .35s;
  position: relative; overflow: hidden;
}
.idx-serv-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; transform: scaleX(0); transition: transform .3s;
  transform-origin: left;
}
.idx-serv-card:nth-child(1)::after { background: linear-gradient(90deg, var(--azul), var(--naranja)); }
.idx-serv-card:nth-child(2)::after { background: linear-gradient(90deg, var(--naranja), var(--amarillo)); }
.idx-serv-card:nth-child(3)::after { background: linear-gradient(90deg, var(--amarillo), #00c853); }
.idx-serv-card:hover { transform: translateY(-10px); box-shadow: var(--sombra-azul); border-color: transparent; }
.idx-serv-card:hover::after { transform: scaleX(1); }
.idx-serv-icon {
  width: 68px; height: 68px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin-bottom: 20px; transition: background .3s;
}
.idx-serv-card:nth-child(1) .idx-serv-icon { background: rgba(11,60,140,.1); }
.idx-serv-card:nth-child(2) .idx-serv-icon { background: rgba(255,122,0,.1); }
.idx-serv-card:nth-child(3) .idx-serv-icon { background: rgba(255,233,0,.15); }
.idx-serv-card:hover .idx-serv-icon { background: var(--amarillo); }
.idx-serv-card h3 {
  font-family: 'Sora', sans-serif; font-size: 1.2rem; font-weight: 800;
  color: var(--azul); margin-bottom: 10px;
}
.idx-serv-card p { font-size: .9rem; color: #666; line-height: 1.65; margin-bottom: 20px; }
.idx-serv-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--azul); font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: .88rem; text-decoration: none; transition: gap .2s;
}
.idx-serv-link:hover { gap: 10px; }

/* ================================================================
   TESTIMONIOS
================================================================ */
.idx-testi { background: #fff; padding: 90px 0; }
.idx-testi-header { text-align: center; margin-bottom: 50px; }
.idx-testi-header h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800; color: var(--azul); margin-bottom: 12px;
}
.idx-testi-header p { font-size: .95rem; color: #666; }
.idx-testi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px;
}
.idx-testi-card {
  background: var(--claro); border-radius: 20px; padding: 30px 28px;
  border: 1.5px solid #e8eef8; transition: all .3s; position: relative;
}
.idx-testi-card::before {
  content: '"'; font-family: Georgia, serif; font-size: 5.5rem;
  color: rgba(11,60,140,.07); position: absolute; top: 8px; left: 18px; line-height: 1;
}
.idx-testi-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-azul); border-color: transparent; }
.idx-testi-stars { color: #FFE900; font-size: 1rem; margin-bottom: 12px; letter-spacing: 2px; }
.idx-testi-card p {
  font-size: .92rem; color: #444; line-height: 1.7;
  font-style: italic; margin-bottom: 22px; position: relative; z-index: 1;
}
.idx-testi-author { display: flex; align-items: center; gap: 12px; }
.idx-testi-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0; border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(11,60,140,.15);
}
.idx-testi-info strong { display: block; font-size: .9rem; color: var(--azul); font-weight: 700; }
.idx-testi-info span  { font-size: .78rem; color: #888; }
.idx-testi-plan {
  display: inline-block; margin-top: 5px;
  background: rgba(11,60,140,.1); color: var(--azul);
  font-size: .68rem; font-weight: 700; padding: 2px 10px; border-radius: 20px;
}

/* ================================================================
   CTA CENTRAL
================================================================ */
.idx-cta-mid {
  background: linear-gradient(90deg, var(--naranja), #e06000);
  padding: 80px 0; text-align: center;
}
.idx-cta-mid h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800; color: #fff; margin-bottom: 14px; line-height: 1.2;
}
.idx-cta-mid p {
  font-size: 1.05rem; color: rgba(255,255,255,.92); max-width: 540px;
  margin: 0 auto 34px; line-height: 1.7;
}
.idx-cta-group { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.idx-cta-btn-white {
  background: #fff; color: var(--azul); font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 1rem; padding: 16px 36px;
  border-radius: 12px; text-decoration: none;
  border: 2px solid #fff; transition: all .3s;
  display: inline-flex; align-items: center; gap: 8px;
}
.idx-cta-btn-white:hover { background: transparent; color: #fff; }
.idx-cta-btn-outline {
  background: transparent; color: #fff; font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: .95rem; padding: 16px 28px;
  border-radius: 12px; text-decoration: none;
  border: 2px solid rgba(255,255,255,.4); transition: all .3s;
  display: inline-flex; align-items: center; gap: 8px;
}
.idx-cta-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.idx-cta-nota { margin-top: 18px; font-size: .8rem; color: rgba(255,255,255,.65); }

/* ================================================================
   FAQ
================================================================ */
.idx-faq { background: var(--claro); padding: 80px 0; }
.idx-faq-header { text-align: center; margin-bottom: 50px; }
.idx-faq-header h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800; color: var(--azul); margin-bottom: 12px;
}
.idx-faq-header p { font-size: .97rem; color: #555; }
.idx-faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.idx-faq-item {
  background: #fff; border-radius: 14px; border: 1.5px solid #e8eef8;
  overflow: hidden; transition: box-shadow .3s;
}
.idx-faq-item:hover { box-shadow: 0 8px 25px rgba(11,60,140,.08); }
.idx-faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; text-align: left; gap: 16px;
  font-family: 'Sora', sans-serif; font-size: .98rem; font-weight: 700; color: var(--azul);
}
.idx-faq-q .faq-ic {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--claro); display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0;
  transition: all .3s; color: var(--azul);
}
.idx-faq-item.open .faq-ic { background: var(--azul); color: #fff; transform: rotate(45deg); }
.idx-faq-a {
  max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s;
  padding: 0 24px; font-size: .9rem; color: #555; line-height: 1.75;
}
.idx-faq-item.open .idx-faq-a { max-height: 300px; padding: 0 24px 20px; }

/* ================================================================
   FORMULARIO DEMO
================================================================ */
.idx-demo {
  background: linear-gradient(135deg, var(--azul-dark) 0%, var(--azul) 100%);
  padding: 90px 0; text-align: center; position: relative; overflow: hidden;
}
.idx-demo::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.idx-demo-inner { position: relative; z-index: 1; }
.idx-demo h2 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800; color: #fff; margin-bottom: 12px;
}
.idx-demo-sub {
  font-size: 1rem; color: rgba(255,255,255,.82); margin-bottom: 8px; line-height: 1.65;
}
.idx-demo form {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; max-width: 820px; margin: 28px auto 0;
}
.idx-demo input, .idx-demo select {
  padding: 14px 18px; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.2);
  font-size: .95rem; background: rgba(255,255,255,.1);
  color: #fff !important; outline: none;
  transition: all .3s; box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}
.idx-demo input { width: 210px; }
.idx-demo select { width: 220px; cursor: pointer; appearance: none; }
.idx-demo input::placeholder { color: rgba(255,255,255,.55); }
.idx-demo input:focus, .idx-demo select:focus {
  border-color: var(--amarillo); background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 3px rgba(255,233,0,.15);
}
.idx-demo select option { color: #000; background: #fff; }
.idx-demo button {
  background: var(--amarillo) !important; color: #000 !important;
  padding: 14px 36px; border: none; border-radius: 10px;
  font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 800;
  cursor: pointer; transition: all .3s;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(255,233,0,.3);
}
.idx-demo button:hover { background: #ffe200 !important; transform: scale(1.04); box-shadow: 0 12px 32px rgba(255,233,0,.45); }
.idx-demo-nota { margin-top: 18px; font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.8; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 900px) {
  .idx-hero-visual { display: none; }
  .idx-pilar, .idx-pilar-rev { flex-direction: column; }
  .idx-que-es-grid { flex-direction: column; }
  .idx-img-badge { position: static; transform: none; margin-top: 20px; display: inline-flex; }
  .idx-flujo-grid .idx-paso::after { display: none; }
}
@media (max-width: 600px) {
  .idx-hero { padding: 110px 0 60px; background-position: 70% center; }
  .idx-hero-text h1 { font-size: 2rem; }
  .idx-stats-grid { grid-template-columns: 1fr 1fr; }
  .idx-trust-sep { display: none; }
  .idx-demo input, .idx-demo select { width: 90%; }
  .idx-demo button { width: 90%; justify-content: center; }
  .idx-pilar-metrics { flex-direction: column; }
}

/* Contenedor principal */
.idx-container { max-width: 1100px; width: 90%; margin: 0 auto; }


/* ================= CALL CENTER - CONVERSION EXTREMA ================= */

/* HERO TRUST */
.hero-trust {
    margin: 15px 0;
    font-size: 14px;
    color: #a8d5ff;
}

/* IMPACTO NEGOCIO */
.impacto-negocio {
    padding: 80px 0;
    background: #0b1120;
}

.impacto {
    background: #111827;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s;
}

.impacto:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.impacto h3 {
    margin-bottom: 10px;
    color: #38bdf8;
}

/* VALOR DIFERENCIAL */
.valor-diferencial {
    padding: 80px 0;
    text-align: center;
}

.lista-potente {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.lista-potente li {
    margin: 12px 0;
    font-size: 16px;
}

/* GRID 4 */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* ROI */
.roi-section {
    padding: 80px 0;
    background: #0f172a;
    text-align: center;
}

.roi {
    background: #111827;
    padding: 30px;
    border-radius: 12px;
}

.roi h3 {
    font-size: 36px;
    color: #22c55e;
}

/* SUPERVISION */
.supervision {
    padding: 80px 0;
    background: #020617;
}

.supervision h2 {
    text-align: center;
    margin-bottom: 30px;
}

/* IA POWER */
.ia-power {
    padding: 80px 0;
    text-align: center;
    background: linear-gradient(135deg, #020617, #0f172a);
}

/* CTA FINAL */
.cta-final {
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(135deg, #2563eb, #9333ea);
    color: #fff;
}

.cta-final h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

/* RESPONSIVE */
@media (max-width: 768px) {

.grid-4 {
    grid-template-columns: 1fr;
}

}


/* ANTES — línea 4512 */
:root{
  --cc-amarillo:#FFE900;
  --cc-negro:#0A0A0A;
  ...
}




/* ═══════════════════════════════════════
   VARIABLES & RESET CALLCENTER
═══════════════════════════════════════ */
:root{
  --amarillo: #FFE900;       /* ← AGREGAR: variable que usa .hl-grad */
  --naranja:  #ff7a00;       /* ← AGREGAR: variable que usa .hl-grad */

  --azul:      #0b3c8c;
  --azul-dark: #061e4d;
  --azul-mid:  #0e4fa8;
  
  --cc-amarillo:#FFE900;
  --cc-negro:#0A0A0A;
  --cc-azul:#061e4d;
  --cc-azul2:#0b3c8c;
  --cc-verde:#00c87a;
  --cc-rojo:#e63946;
  --cc-blanco:#ffffff;
  --cc-gris:#f4f6fb;
  --cc-gris2:#e8ecf4;
  --cc-texto:#1a1a2e;
  --cc-subtexto:#4a5568;
  --cc-radio:14px;
  --cc-sombra:0 8px 40px rgba(6,30,77,.12);
  --cc-sombra2:0 20px 60px rgba(6,30,77,.18);
  font-family:'Sora','Inter',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

/* ═══════════════════════════════════════
   STICKY BAR
═══════════════════════════════════════ */
.cc-sticky{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:linear-gradient(90deg,#061e4d 0%,#0b3c8c 50%,#061e4d 100%);
  color:#fff;text-align:center;padding:11px 16px;
  font-size:.85rem;font-weight:600;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
}
.cc-sticky a{
  background:var(--cc-amarillo);color:#000;padding:5px 16px;
  border-radius:20px;font-weight:700;font-size:.8rem;text-decoration:none;
  transition:transform .2s;white-space:nowrap;
}
.cc-sticky a:hover{transform:scale(1.05);}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.cc-header{
  position:sticky;top:40px;z-index:900;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cc-gris2);
  box-shadow:0 2px 16px rgba(6,30,77,.07);
}
.cc-header-inner{
  max-width:1200px;width:90%;margin:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;gap:16px;
}
.cc-logo img{height:52px;width:auto;}
.cc-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.cc-nav a{
  color:var(--cc-texto);text-decoration:none;font-size:.88rem;
  font-weight:500;padding:7px 12px;border-radius:8px;transition:background .2s;
}
.cc-nav a:hover{background:var(--cc-gris);}
.cc-nav .cc-nav-cta{
  background:var(--cc-amarillo);color:#000;font-weight:700;
  padding:9px 20px;border-radius:8px;
  animation:pulse-cc 2.2s infinite;
}
.cc-nav .cc-nav-cta:hover{animation:none;transform:scale(1.04);background:#f5de00;}
@keyframes pulse-cc{
  0%{box-shadow:0 0 0 0 rgba(255,233,0,.6);}
  70%{box-shadow:0 0 0 10px rgba(255,233,0,0);}
  100%{box-shadow:0 0 0 0 rgba(255,233,0,0);}
}
.cc-nav-mobile{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.cc-nav-mobile span{display:block;width:24px;height:2px;background:var(--cc-texto);margin:5px 0;border-radius:2px;transition:.3s;}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.cc-hero{
  position:relative;
  background:linear-gradient(135deg,#061e4d 0%,#0b3c8c 55%,#0e4fa8 100%);
  min-height:92vh;display:flex;align-items:center;
  overflow:hidden;padding:100px 0 60px;
}
.cc-hero-bg{
  position:absolute;inset:0;
  background-image:url('/img/callcenter_hero.webp');
  background-size:cover;background-position:center right;
  opacity:.18;
}
.cc-hero-pattern{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,233,0,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0,200,122,.08) 0%, transparent 40%);
}
/* Partículas decorativas */
.cc-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.cc-particles span{
  position:absolute;border-radius:50%;
  animation:float-cc 8s infinite ease-in-out;
}
.cc-particles span:nth-child(1){width:6px;height:6px;background:var(--cc-amarillo);top:15%;left:8%;animation-delay:0s;}
.cc-particles span:nth-child(2){width:4px;height:4px;background:#fff;top:70%;left:15%;animation-delay:2s;}
.cc-particles span:nth-child(3){width:8px;height:8px;background:var(--cc-verde);top:40%;left:92%;animation-delay:1s;}
.cc-particles span:nth-child(4){width:5px;height:5px;background:var(--cc-amarillo);top:80%;left:75%;animation-delay:3s;}
.cc-particles span:nth-child(5){width:3px;height:3px;background:#fff;top:25%;left:55%;animation-delay:1.5s;}
@keyframes float-cc{
  0%,100%{transform:translateY(0) scale(1);opacity:.6;}
  50%{transform:translateY(-20px) scale(1.2);opacity:1;}
}

.cc-container{max-width:1200px;width:90%;margin:auto;}
.cc-hero-inner{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:60px;position:relative;z-index:2;
}

/* Badge */
.cc-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,233,0,.15);border:1px solid rgba(255,233,0,.4);
  color:var(--cc-amarillo);padding:7px 16px;border-radius:20px;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:22px;
}
.cc-badge-dot{
  width:8px;height:8px;border-radius:50%;background:var(--cc-amarillo);
  animation:blink-cc 1.4s infinite;
}
@keyframes blink-cc{0%,100%{opacity:1;}50%{opacity:.3;}}

.cc-hero-text h1{
  font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;
  color:#fff;line-height:1.12;margin:0 0 22px;
}
.cc-h1-accent{
  background:linear-gradient(90deg,var(--cc-amarillo),#ffb700);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cc-hero-sub{
  color:rgba(255,255,255,.82);font-size:1.08rem;line-height:1.7;
  margin:0 0 28px;
}
.cc-hero-sub strong{color:#fff;}

/* Bullets hero */
.cc-hero-bullets{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;}
.cc-hero-bullet{
  display:flex;align-items:flex-start;gap:10px;
  color:rgba(255,255,255,.88);font-size:.93rem;
}
.cc-bullet-check{
  width:20px;height:20px;border-radius:50%;
  background:var(--cc-verde);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;flex-shrink:0;margin-top:1px;
}
.cc-bullet-x{background:#e63946;}

/* CTAs hero */
.cc-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.cc-btn-main{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cc-amarillo);color:#000;
  padding:16px 32px;border-radius:10px;font-weight:700;font-size:1rem;
  text-decoration:none;transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 20px rgba(255,233,0,.4);
}
.cc-btn-main:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(255,233,0,.5);}
.cc-btn-sec{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.3);
  padding:16px 28px;border-radius:10px;font-weight:600;font-size:1rem;
  text-decoration:none;transition:background .2s;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.cc-btn-sec:hover{background:rgba(255,255,255,.2);}
.cc-urgencia{color:var(--cc-amarillo);font-size:.85rem;font-weight:600;}

/* Hero visual — tarjetas flotantes */
.cc-hero-visual{display:flex;flex-direction:column;gap:14px;}
.cc-float-card{
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.18);border-radius:14px;
  padding:16px 20px;display:flex;align-items:center;gap:14px;
  transition:transform .3s,box-shadow .3s;
}
.cc-float-card:hover{transform:translateX(6px);box-shadow:0 8px 32px rgba(0,0,0,.2);}
.cc-float-icon{font-size:1.6rem;flex-shrink:0;}
.cc-float-info strong{color:#fff;font-size:.95rem;display:block;}
.cc-float-info small{color:rgba(255,255,255,.65);font-size:.8rem;}
.cc-float-stat{margin-left:auto;text-align:right;flex-shrink:0;}
.cc-stat-num{display:block;font-size:1.4rem;font-weight:800;color:var(--cc-amarillo);line-height:1;}
.cc-stat-label{font-size:.7rem;color:rgba(255,255,255,.6);}

/* Canal pills */
.cc-canal-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:600;
}
.cc-canales-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}

/* ═══════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════ */
.cc-trust{
  background:#fff;border-bottom:1px solid var(--cc-gris2);
  padding:24px 0;
}
.cc-trust-inner{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:0;
}
.cc-trust-item{
  text-align:center;padding:8px 28px;
}
.cc-trust-item strong{display:block;font-size:1.4rem;font-weight:800;color:var(--cc-azul);}
.cc-trust-item span{font-size:.78rem;color:var(--cc-subtexto);font-weight:500;}
.cc-trust-sep{width:1px;height:40px;background:var(--cc-gris2);}

/* ═══════════════════════════════════════
   FADE-UP ANIMACIÓN
═══════════════════════════════════════ */
.fade-up{opacity:0;translate:0 30px;transition:opacity .6s ease,translate .6s ease;}
.fade-up.visible{opacity:1;translate:0 0;}

/* ═══════════════════════════════════════
   SECTION TAG
═══════════════════════════════════════ */
.cc-section-tag{
  display:inline-block;background:rgba(6,30,77,.08);color:var(--cc-azul);
  padding:5px 16px;border-radius:20px;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;
}

/* ═══════════════════════════════════════
   PAIN SECTION
═══════════════════════════════════════ */
.cc-pain{
  padding:100px 0;
  background:var(--cc-gris);
}
.cc-pain-header{text-align:center;margin-bottom:56px;}
.cc-pain-header h2{
  font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;
  color:var(--cc-texto);line-height:1.2;margin:0 0 16px;
}
.cc-pain-header p{color:var(--cc-subtexto);font-size:1.05rem;max-width:680px;margin:0 auto;}
.cc-pain-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.cc-pain-card{
  background:#fff;border-radius:var(--cc-radio);padding:32px 28px;
  border-left:4px solid var(--cc-rojo);
  box-shadow:var(--cc-sombra);transition:transform .3s;
}
.cc-pain-card:hover{transform:translateY(-4px);}
.cc-pain-num{font-size:3rem;font-weight:800;color:var(--cc-gris2);line-height:1;margin-bottom:12px;}
.cc-pain-emoji{font-size:2rem;}
.cc-pain-card h3{font-size:1.05rem;font-weight:700;color:var(--cc-texto);margin:10px 0 8px;}
.cc-pain-card p{color:var(--cc-subtexto);font-size:.9rem;line-height:1.6;margin:0 0 14px;}
.cc-pain-stat{
  display:inline-block;background:rgba(230,57,70,.08);color:var(--cc-rojo);
  padding:5px 12px;border-radius:20px;font-size:.78rem;font-weight:700;
}
.cc-solucion-banner{
  margin-top:48px;background:linear-gradient(90deg,var(--cc-azul),var(--cc-azul2));
  color:#fff;padding:22px 32px;border-radius:var(--cc-radio);
  text-align:center;font-size:1.05rem;font-weight:600;
  box-shadow:0 8px 32px rgba(6,30,77,.25);
}

/* ═══════════════════════════════════════
   QUÉ ES — SOLUCIÓN
═══════════════════════════════════════ */
.cc-solucion{padding:100px 0;background:#fff;}
.cc-solucion-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:72px;align-items:center;
}
.cc-solucion-content h2{
  font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;
  color:var(--cc-texto);line-height:1.22;margin:0 0 18px;
}
.cc-solucion-content h2 em{font-style:normal;color:var(--cc-azul2);}
.cc-solucion-content p{color:var(--cc-subtexto);line-height:1.75;margin-bottom:16px;}
.cc-stats-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 32px;
}
.cc-stat-item{
  background:var(--cc-gris);border-radius:10px;padding:18px;text-align:center;
}
.cc-stat-num2{display:block;font-size:1.8rem;font-weight:800;color:var(--cc-azul);}
.cc-stat-label2{font-size:.78rem;color:var(--cc-subtexto);font-weight:500;}
.cc-solucion-img{
  position:relative;border-radius:20px;overflow:hidden;
  box-shadow:var(--cc-sombra2);
}
.cc-solucion-img img{width:100%;height:auto;display:block;}
.cc-img-badge{
  position:absolute;bottom:20px;left:20px;right:20px;
  background:rgba(255,255,255,.97);border-radius:12px;
  padding:14px 18px;display:flex;align-items:center;gap:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
}
.cc-img-badge div strong{font-size:.92rem;color:var(--cc-texto);display:block;}
.cc-img-badge div small{font-size:.78rem;color:var(--cc-subtexto);}

/* ═══════════════════════════════════════
   CANALES (OMNICANAL)
═══════════════════════════════════════ */
.cc-canales{
  padding:100px 0;
  background:linear-gradient(180deg,var(--cc-gris) 0%,#fff 100%);
}
.cc-canales-header{text-align:center;margin-bottom:60px;}
.cc-canales-header h2{
  font-size:clamp(1.8rem,3vw,2.7rem);font-weight:800;
  color:var(--cc-texto);line-height:1.2;margin:0 0 14px;
}
.cc-canales-header p{color:var(--cc-subtexto);font-size:1.05rem;max-width:640px;margin:0 auto;}
.cc-canales-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px;
}
.cc-canal-card{
  background:#fff;border-radius:var(--cc-radio);padding:36px 24px;text-align:center;
  box-shadow:var(--cc-sombra);border:2px solid transparent;
  transition:border-color .3s,transform .3s,box-shadow .3s;cursor:default;
}
.cc-canal-card:hover{
  border-color:var(--cc-azul2);transform:translateY(-6px);
  box-shadow:var(--cc-sombra2);
}
.cc-canal-icon{font-size:2.8rem;margin-bottom:14px;}
.cc-canal-card h3{font-size:1rem;font-weight:700;color:var(--cc-texto);margin:0 0 8px;}
.cc-canal-card p{color:var(--cc-subtexto);font-size:.87rem;line-height:1.6;margin:0;}

/* ═══════════════════════════════════════
   PILARES / CARACTERÍSTICAS
═══════════════════════════════════════ */
.cc-pilares{padding:100px 0;background:#fff;}
.cc-pilares-header{text-align:center;margin-bottom:70px;}
.cc-pilares-header h2{
  font-size:clamp(1.8rem,3vw,2.7rem);font-weight:800;
  color:var(--cc-texto);line-height:1.2;margin:0 0 14px;
}
.cc-pilares-header p{color:var(--cc-subtexto);font-size:1.05rem;max-width:640px;margin:0 auto;}

.cc-pilar{
  display:grid;grid-template-columns:1fr 1fr;
  gap:64px;align-items:center;margin-bottom:80px;
}
.cc-pilar:last-child{margin-bottom:0;}
.cc-pilar-rev{direction:rtl;}
.cc-pilar-rev>*{direction:ltr;}

.cc-pilar-visual-inner{
  border-radius:20px;padding:40px;color:#fff;
  box-shadow:var(--cc-sombra2);
}
.cc-pilar-emoji{font-size:3rem;display:block;margin-bottom:16px;}
.cc-pilar-visual-title{font-size:1.3rem;font-weight:800;margin-bottom:8px;}
.cc-pilar-visual-sub{font-size:.9rem;opacity:.85;line-height:1.6;margin-bottom:24px;}
.cc-pilar-metrics{display:flex;gap:20px;flex-wrap:wrap;}
.cc-pilar-metric{text-align:center;}
.cc-pm-num{display:block;font-size:1.6rem;font-weight:800;color:var(--cc-amarillo);}
.cc-pm-label{font-size:.72rem;opacity:.8;}

.cc-pilar-content{}
.cc-pilar-num{font-size:3.5rem;font-weight:800;color:var(--cc-gris2);line-height:1;display:block;}
.cc-pilar-tag{
  display:inline-block;background:var(--cc-gris);color:var(--cc-azul);
  padding:4px 14px;border-radius:20px;font-size:.78rem;font-weight:700;
  margin-bottom:14px;
}
.cc-pilar-content h3{
  font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;
  color:var(--cc-texto);line-height:1.25;margin:0 0 14px;
}
.cc-pilar-content p{color:var(--cc-subtexto);line-height:1.75;margin:0 0 20px;}
.cc-pilar-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:9px;}
.cc-pilar-list li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--cc-texto);}
.cc-pi-check{color:var(--cc-verde);font-weight:700;flex-shrink:0;margin-top:1px;}
.cc-pilar-btn{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--cc-azul2);font-weight:700;font-size:.9rem;
  text-decoration:none;border-bottom:2px solid var(--cc-azul2);
  padding-bottom:2px;transition:gap .2s;
}
.cc-pilar-btn:hover{gap:10px;}

/* ═══════════════════════════════════════
   IA SECTION
═══════════════════════════════════════ */
.cc-ia{
  padding:100px 0;
  background:linear-gradient(135deg,#061e4d 0%,#0b3c8c 100%);
  color:#fff;overflow:hidden;position:relative;
}
.cc-ia::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 50%,rgba(0,200,122,.12) 0%,transparent 60%),
             radial-gradient(circle at 10% 80%,rgba(255,233,0,.07) 0%,transparent 40%);
}
.cc-ia-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  position:relative;z-index:1;
}
.cc-ia-content h2{
  font-size:clamp(1.8rem,3vw,2.7rem);font-weight:800;
  color:#fff;line-height:1.2;margin:0 0 18px;
}
.cc-ia-content h2 span{color:var(--cc-amarillo);}
.cc-ia-content p{color:rgba(255,255,255,.8);line-height:1.75;margin-bottom:24px;}
.cc-ia-benefits{display:flex;flex-direction:column;gap:14px;margin-bottom:32px;}
.cc-ia-benefit{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:12px;padding:16px 20px;
  display:flex;align-items:center;gap:14px;
}
.cc-ia-benefit-icon{font-size:1.6rem;flex-shrink:0;}
.cc-ia-benefit div strong{color:#fff;display:block;font-size:.95rem;}
.cc-ia-benefit div small{color:rgba(255,255,255,.65);font-size:.82rem;}

/* Sentiment card visual */
.cc-ia-visual{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:20px;padding:32px;
}
.cc-sentiment-card{background:rgba(255,255,255,.1);border-radius:12px;padding:20px;margin-bottom:16px;}
.cc-sentiment-title{font-size:.88rem;font-weight:700;color:var(--cc-amarillo);margin-bottom:14px;}
.cc-sentiment-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.cc-sentiment-label{font-size:.8rem;color:rgba(255,255,255,.8);width:70px;flex-shrink:0;}
.cc-sentiment-bar{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden;}
.cc-sentiment-bar-fill{height:100%;border-radius:4px;transition:width 1s ease;}
.cc-sentiment-val{font-size:.82rem;font-weight:700;color:#fff;width:36px;text-align:right;}
.cc-sentiment-positive .cc-sentiment-bar-fill{background:var(--cc-verde);width:63%;}
.cc-sentiment-neutral .cc-sentiment-bar-fill{background:var(--cc-amarillo);width:25%;}
.cc-sentiment-negative .cc-sentiment-bar-fill{background:var(--cc-rojo);width:12%;}
.cc-ia-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,200,122,.2);border:1px solid rgba(0,200,122,.3);
  color:var(--cc-verde);padding:8px 16px;border-radius:20px;font-size:.82rem;font-weight:700;
}

/* ═══════════════════════════════════════
   SUPERVISOR
═══════════════════════════════════════ */
.cc-supervisor{
  padding:100px 0;
  background:var(--cc-gris);
}
.cc-supervisor-header{text-align:center;margin-bottom:60px;}
.cc-supervisor-header h2{
  font-size:clamp(1.8rem,3vw,2.7rem);font-weight:800;
  color:var(--cc-texto);line-height:1.2;margin:0 0 14px;
}
.cc-supervisor-header p{color:var(--cc-subtexto);max-width:640px;margin:0 auto;font-size:1.05rem;}
.cc-supervisor-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.cc-super-card{
  background:#fff;border-radius:var(--cc-radio);padding:32px 26px;
  box-shadow:var(--cc-sombra);border-top:4px solid transparent;
  transition:border-color .3s,transform .3s;
}
.cc-super-card:nth-child(1){border-top-color:#061e4d;}
.cc-super-card:nth-child(2){border-top-color:var(--cc-verde);}
.cc-super-card:nth-child(3){border-top-color:var(--cc-amarillo);}
.cc-super-card:nth-child(4){border-top-color:var(--cc-rojo);}
.cc-super-card:nth-child(5){border-top-color:#7c3aed;}
.cc-super-card:nth-child(6){border-top-color:#0ea5e9;}
.cc-super-card:hover{transform:translateY(-4px);}
.cc-super-icon{font-size:2rem;margin-bottom:14px;}
.cc-super-card h3{font-size:1rem;font-weight:700;color:var(--cc-texto);margin:0 0 8px;}
.cc-super-card p{color:var(--cc-subtexto);font-size:.88rem;line-height:1.65;margin:0;}

/* ═══════════════════════════════════════
   FUNCIONES COMPLETAS (GRID DE CHECKS)
═══════════════════════════════════════ */
.cc-funciones{
  padding:100px 0;background:#fff;
}
.cc-funciones-header{text-align:center;margin-bottom:60px;}
.cc-funciones-header h2{
  font-size:clamp(1.8rem,3vw,2.7rem);font-weight:800;
  color:var(--cc-texto);line-height:1.2;margin:0 0 14px;
}
.cc-funciones-header p{color:var(--cc-subtexto);max-width:640px;margin:0 auto;font-size:1.05rem;}
.cc-funciones-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}
.cc-funcion-item{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:8px;background:var(--cc-gris);
  font-size:.87rem;font-weight:500;color:var(--cc-texto);
  transition:background .2s;
}
.cc-funcion-item:hover{background:var(--cc-gris2);}
.cc-funcion-check{color:var(--cc-verde);font-weight:800;flex-shrink:0;}

/* ═══════════════════════════════════════
   INTEGRACIONES
═══════════════════════════════════════ */
.cc-integraciones{
  padding:80px 0;
  background:var(--cc-gris);
}
.cc-integraciones-header{text-align:center;margin-bottom:48px;}
.cc-integraciones-header h2{
  font-size:clamp(1.6rem,2.5vw,2.3rem);font-weight:800;
  color:var(--cc-texto);margin:0 0 12px;
}
.cc-integraciones-header p{color:var(--cc-subtexto);max-width:560px;margin:0 auto;}
.cc-integraciones-grid{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
}
.cc-integ-card{
  background:#fff;border-radius:12px;padding:18px 24px;
  box-shadow:var(--cc-sombra);
  display:flex;align-items:center;gap:12px;
  transition:transform .2s;min-width:160px;
}
.cc-integ-card:hover{transform:translateY(-3px);}
.cc-integ-icon{font-size:1.6rem;}
.cc-integ-card span{font-size:.9rem;font-weight:700;color:var(--cc-texto);}

/* ═══════════════════════════════════════
   STATS IMPACTO
═══════════════════════════════════════ */
.cc-impacto{
  padding:100px 0;
  background:linear-gradient(135deg,#061e4d 0%,#0b3c8c 100%);
  color:#fff;
}
.cc-impacto-header{text-align:center;margin-bottom:60px;}
.cc-impacto-header h2{
  font-size:clamp(1.8rem,3vw,2.7rem);font-weight:800;
  color:#fff;line-height:1.2;margin:0 0 14px;
}
.cc-impacto-header h2 span{color:var(--cc-amarillo);}
.cc-impacto-header p{color:rgba(255,255,255,.75);max-width:640px;margin:0 auto;font-size:1.05rem;}
.cc-impacto-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px;
}
.cc-impacto-card{
  text-align:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--cc-radio);padding:36px 20px;
}
.cc-impacto-num{
  display:block;font-size:clamp(2.2rem,4vw,3rem);font-weight:800;
  color:var(--cc-amarillo);line-height:1;margin-bottom:8px;
}
.cc-impacto-desc{font-size:.9rem;color:rgba(255,255,255,.8);line-height:1.5;}
.cc-impacto-source{
  display:block;font-size:.72rem;color:rgba(255,255,255,.45);
  margin-top:4px;font-style:italic;
}

/* ═══════════════════════════════════════
   FAQ
═══════════════════════════════════════ */
.cc-faq{padding:100px 0;background:#fff;}
.cc-faq-header{text-align:center;margin-bottom:56px;}
.cc-faq-header h2{
  font-size:clamp(1.8rem,3vw,2.7rem);font-weight:800;
  color:var(--cc-texto);margin:0 0 14px;
}
.cc-faq-header p{color:var(--cc-subtexto);max-width:600px;margin:0 auto;font-size:1.05rem;}
.cc-faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.cc-faq-item{
  border:1px solid var(--cc-gris2);border-radius:var(--cc-radio);overflow:hidden;
  transition:border-color .3s;
}
.cc-faq-item.open{border-color:var(--cc-azul2);}
.cc-faq-q{
  width:100%;background:none;border:none;cursor:pointer;
  padding:22px 24px;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:1rem;font-weight:600;color:var(--cc-texto);font-family:inherit;
}
.cc-faq-ic{
  font-size:1.4rem;font-weight:300;color:var(--cc-azul2);
  transition:transform .3s;flex-shrink:0;
}
.cc-faq-item.open .cc-faq-ic{transform:rotate(45deg);}
.cc-faq-a{
  max-height:0;overflow:hidden;transition:max-height .4s ease;
}
.cc-faq-item.open .cc-faq-a{max-height:300px;}
.cc-faq-a p{
  padding:0 24px 22px;color:var(--cc-subtexto);
  line-height:1.7;font-size:.95rem;margin:0;
}

/* ═══════════════════════════════════════
   DEMO FORM
═══════════════════════════════════════ */
.cc-demo{
  padding:100px 0;
  background:linear-gradient(135deg,#061e4d 0%,#0b3c8c 100%);
  position:relative;overflow:hidden;
}
.cc-demo::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 80% 50%,rgba(255,233,0,.08) 0%,transparent 50%);
}
.cc-demo-inner{
  max-width:700px;margin:0 auto;text-align:center;position:relative;z-index:1;
}
.cc-demo-inner h2{
  font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;
  color:#fff;line-height:1.2;margin:0 0 14px;
}
.cc-demo-inner h2 span{color:var(--cc-amarillo);}
.cc-demo-sub{
  color:rgba(255,255,255,.82);font-size:1.05rem;line-height:1.7;margin-bottom:10px;
}
#cc-timer{
  font-size:1.1rem;font-weight:700;color:var(--cc-amarillo);
  margin-bottom:28px;display:block;
}
.cc-form{display:flex;flex-direction:column;gap:14px;}
.cc-form input,
.cc-form select{
  width:100%;padding:16px 20px;border-radius:10px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);color:#fff;
  font-size:.97rem;font-family:inherit;
  transition:border-color .2s,background .2s;
}
.cc-form input::placeholder{color:rgba(255,255,255,.55);}
.cc-form input:focus,
.cc-form select:focus{
  outline:none;border-color:var(--cc-amarillo);
  background:rgba(255,255,255,.15);
}
.cc-form select{color:rgba(255,255,255,.75);}
.cc-form select option{color:#000;background:#fff;}
.cc-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cc-form-submit{
  background:var(--cc-amarillo);color:#000;
  padding:18px 32px;border-radius:10px;border:none;cursor:pointer;
  font-size:1.05rem;font-weight:700;font-family:inherit;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 20px rgba(255,233,0,.4);
}
.cc-form-submit:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(255,233,0,.5);}
.cc-demo-nota{
  color:rgba(255,255,255,.6);font-size:.84rem;margin-top:20px;line-height:1.6;
}
.cc-demo-nota a{color:rgba(255,255,255,.8);}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.cc-footer{
  background:#0A0A0A;color:rgba(255,255,255,.6);
  padding:48px 0 32px;text-align:center;
}
.cc-footer-logo{margin-bottom:20px;}
.cc-footer-logo img{height:44px;width:auto;opacity:.8;}
.cc-footer-links{
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;margin-bottom:20px;
}
.cc-footer-links a{color:rgba(255,255,255,.55);text-decoration:none;font-size:.85rem;transition:color .2s;}
.cc-footer-links a:hover{color:#fff;}
.cc-footer-copy{font-size:.8rem;color:rgba(255,255,255,.4);}

/* ═══════════════════════════════════════
   POPUP
═══════════════════════════════════════ */
.cc-popup{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.6);align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.cc-popup.active{display:flex;}
.cc-popup-box{
  background:#fff;border-radius:20px;padding:40px;max-width:440px;width:90%;
  text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.3);position:relative;
  animation:popIn .4s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes popIn{from{transform:scale(.7);opacity:0;}to{transform:scale(1);opacity:1;}}
.cc-popup-close{
  position:absolute;top:14px;right:18px;background:none;border:none;
  font-size:1.8rem;cursor:pointer;color:#888;line-height:1;
}
.cc-popup-box h3{font-size:1.3rem;font-weight:800;color:var(--cc-texto);margin:0 0 12px;}
.cc-popup-box p{color:var(--cc-subtexto);font-size:.95rem;line-height:1.6;margin:0 0 24px;}

/* WhatsApp flotante */
.cc-whatsapp{
  position:fixed;bottom:28px;right:24px;z-index:800;
  animation:bounce-wa 2s infinite;
}
.cc-whatsapp img{width:60px;height:60px;border-radius:50%;box-shadow:0 4px 20px rgba(0,0,0,.3);}
@keyframes bounce-wa{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:900px){
  .cc-hero-inner{grid-template-columns:1fr;}
  .cc-hero-visual{display:none;}
  .cc-solucion-grid{grid-template-columns:1fr;}
  .cc-ia-inner{grid-template-columns:1fr;}
  .cc-pilar{grid-template-columns:1fr;}
  .cc-pilar-rev{direction:ltr;}
  .cc-form-row{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .cc-sticky{font-size:.78rem;}
  .cc-nav{display:none;}
  .cc-nav.open{
    display:flex;flex-direction:column;position:fixed;inset:0;
    background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    z-index:9999;padding:80px 32px 32px;
  }
  .cc-nav-mobile{display:block;}
  .cc-hero{min-height:80vh;padding:80px 0 60px;}
  .cc-trust-inner{gap:0;display:grid;grid-template-columns:1fr 1fr;}
  .cc-trust-sep{display:none;}
  .cc-trust-item{padding:12px;}
}



/* Estilos específicos de la página INTEGRACIONES */
/* ── Variables globales necesarias ────────────────────────────────────── */
:root {
  --wa-verde:   #25D366;
  --wa-oscuro:  #128C7E;
  --int-azul:   #0b3c8c;
  --int-naranja:#ff7a00;
  --int-amarillo:#FFE900;
  --int-gris:   #f4f6fb;
  --int-texto:  #1a1a2e;
  --int-sub:    #4a5568;
}

/* ── Hero específico integraciones ───────────────────────────────────── */
.hero-integraciones {
  position: relative;
  background: linear-gradient(135deg, #061e4d 0%, #0b3c8c 55%, #128C7E 100%);
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 120px 0 70px;
  overflow: hidden;
  color: #fff;
}
.hero-integraciones::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 60%, rgba(37,211,102,.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(255,233,0,.07) 0%, transparent 40%);
}
.hero-integraciones .hero-overlay {
  background: rgba(0,0,0,.25);
}

/* Badge WhatsApp */
.badge-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37,211,102,.15);
  border: 1px solid rgba(37,211,102,.4);
  color: #25D366;
  padding: 7px 18px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.badge-wa-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #25D366;
  animation: blink-wa 1.4s infinite;
}
@keyframes blink-wa { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* H1 gradiente verde WhatsApp */
.hero-integraciones h1 {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin: 0 0 22px;
}
.hl-wa {
  background: linear-gradient(90deg, #25D366, #FFE900);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

/* Chips de canales en el hero */
.canales-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}
.canal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Stats flotantes hero */
.hero-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-stat-card {
  background: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform .3s;
}
.hero-stat-card:hover { transform: translateX(6px); }
.hero-stat-icon { font-size: 1.8rem; flex-shrink: 0; }
.hero-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #25D366;
  line-height: 1;
  display: block;
}
.hero-stat-label {
  font-size: .8rem;
  color: rgba(255,255,255,.7);
}

/* ── Sección Números WhatsApp ─────────────────────────────────────────── */
.wa-numeros {
  background: linear-gradient(135deg, #061e4d 0%, #0b3c8c 100%);
  padding: 80px 0;
  text-align: center;
  color: #fff;
}
.wa-numeros h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}
.wa-numeros .subtitulo {
  color: rgba(255,255,255,.75);
  margin-bottom: 50px;
  font-size: 1rem;
}
.wa-numeros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.wa-num-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(37,211,102,.25);
  border-radius: 14px;
  padding: 32px 20px;
  transition: transform .3s, border-color .3s;
}
.wa-num-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37,211,102,.5);
}
.wa-num-valor {
  display: block;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #25D366;
  line-height: 1;
  margin-bottom: 10px;
}
.wa-num-label {
  font-size: .9rem;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}

/* ── CRMs grid ────────────────────────────────────────────────────────── */
.crm-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 10px;
}
.crm-chip {
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 12px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--int-texto);
  box-shadow: 0 2px 12px rgba(6,30,77,.07);
  transition: transform .2s, box-shadow .2s;
}
.crm-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(6,30,77,.14);
}
.crm-chip-icon { font-size: 1.5rem; }

/* ── Feature WhatsApp‑specific overrides ─────────────────────────────── */
.feature-section .feature-img img {
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(6,30,77,.14);
}

/* ── Casos de uso grid ───────────────────────────────────────────────── */
.casos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.caso-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(6,30,77,.08);
  border-top: 4px solid #25D366;
  transition: transform .3s;
}
.caso-card:hover { transform: translateY(-5px); }
.caso-icon { font-size: 2.5rem; margin-bottom: 12px; }
.caso-card h3 { font-size: 1rem; font-weight: 700; color: var(--int-texto); margin: 0 0 8px; }
.caso-card p { font-size: .87rem; color: var(--int-sub); line-height: 1.6; margin: 0; }

/* ── Seguridad / compliance ──────────────────────────────────────────── */
.compliance-section {
  background: #f8f9fc;
  padding: 70px 0;
  text-align: center;
}
.compliance-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}
.compliance-item {
  background: #fff;
  border-radius: 12px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 12px rgba(6,30,77,.07);
  font-weight: 600;
  font-size: .92rem;
  color: var(--int-texto);
}
.compliance-item span.ico { font-size: 1.6rem; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-integraciones { min-height: unset; padding: 90px 0 60px; }
  .hero-stats-grid { display: none; }
  .wa-numeros-grid { grid-template-columns: 1fr 1fr; }
  .casos-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .wa-numeros-grid { grid-template-columns: 1fr; }
  .casos-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   MINI-FORM DE CAPTURA RÁPIDA
   Variables heredadas del design system:
   --azul   : #0b3c8c
   --naranja: #ff7a00
   --amarillo: #FFE900
──────────────────────────────────────────────────────────────────────────── */

/* Contenedor principal */
.mf-wrap {
    background: linear-gradient(135deg, #071e45 0%, #0b3c8c 60%, #0d4fa8 100%);
    border-top:    3px solid #FFE900;
    border-bottom: 1px solid rgba(255, 233, 0, .20);
    padding: 28px 20px;
    position: relative;
    overflow: hidden;
}

/* Elemento decorativo de fondo (sutil) */
.mf-wrap::before {
    content: '';
    position: absolute;
    right:  -60px;
    top:    -60px;
    width:  220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 233, 0, .04);
    pointer-events: none;
}
.mf-wrap::after {
    content: '';
    position: absolute;
    left: -40px;
    bottom: -50px;
    width:  160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 122, 0, .05);
    pointer-events: none;
}

/* Layout horizontal desktop */
.mf-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Columna izquierda: copy */
.mf-copy {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    max-width: 380px;
}

/* Ícono con anillo */
.mf-icon-ring {
    width:  52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 233, 0, .10);
    border: 1.5px solid rgba(255, 233, 0, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: mfPulseRing 3s ease-in-out infinite;
}

@keyframes mfPulseRing {
    0%, 100% { box-shadow: 0 0 0 0   rgba(255,233,0,.25); }
    50%      { box-shadow: 0 0 0 8px rgba(255,233,0,.00); }
}

.mf-text { flex: 1; }

.mf-headline {
    margin:      0 0 3px;
    font-family: 'Sora', sans-serif;
    font-size:   1.05rem;
    font-weight: 700;
    color:       #ffffff;
    line-height: 1.3;
}

.mf-sub {
    margin:    0;
    font-size: .82rem;
    color:     rgba(255, 255, 255, .70);
    line-height: 1.4;
}
.mf-sub strong {
    color: #FFE900;
    font-weight: 700;
}

/* Badge de prueba social */
.mf-badge {
    display:     flex;
    align-items: center;
    gap:         6px;
    white-space: nowrap;
    font-size:   .75rem;
    color:       rgba(255, 255, 255, .55);
    margin-left: 4px;
}

.mf-dot {
    width:  7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: mfDotPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes mfDotPulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(34,197,94,.55); }
    60%      { box-shadow: 0 0 0 5px rgba(34,197,94,.00); }
}

/* Divisor vertical */
.mf-inner::before {
    content: '';
    display: block;
    width:   1px;
    height:  64px;
    background: rgba(255, 255, 255, .15);
    flex-shrink: 0;
}

/* Columna derecha: form */
.mf-form {
    flex: 1;
    position: relative;
}

.mf-fields {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.mf-field-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mf-label {
    font-size: .72rem;
    font-weight: 600;
    color:      rgba(255, 233, 0, .80);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.mf-input {
    background:   rgba(255, 255, 255, .08);
    border:       1.5px solid rgba(255, 255, 255, .20);
    border-radius: 8px;
    color:        #ffffff;
    font-family:  'Inter', 'Sora', sans-serif;
    font-size:    .9rem;
    padding:      10px 14px;
    outline:      none;
    transition:   border-color .2s ease, background .2s ease;
    width:        100%;
    box-sizing:   border-box;
}

.mf-input::placeholder {
    color: rgba(255, 255, 255, .35);
}

.mf-input:focus {
    border-color: #FFE900;
    background:   rgba(255, 255, 255, .12);
}

/* Estado de error */
.mf-input.mf-error {
    border-color: #ff7a7a;
    animation: mfShake .3s ease;
}

@keyframes mfShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* Botón CTA */
.mf-btn {
    background:    #FFE900;
    border:        none;
    border-radius: 8px;
    color:         #0b3c8c;
    cursor:        pointer;
    font-family:   'Sora', sans-serif;
    font-size:     .9rem;
    font-weight:   800;
    padding:       11px 22px;
    white-space:   nowrap;
    flex-shrink:   0;
    transition:    background .2s ease, transform .15s ease, box-shadow .2s ease;
    letter-spacing: .2px;
}

.mf-btn:hover {
    background:  #f5dc00;
    transform:   translateY(-1px);
    box-shadow:  0 6px 20px rgba(255, 233, 0, .35);
}

.mf-btn:active {
    transform: translateY(0);
}

.mf-btn:disabled {
    opacity: .65;
    cursor:  not-allowed;
    transform: none;
}

.mf-btn-loading { font-size: 1rem; }

/* Mensaje de respuesta */
.mf-msg {
    margin-top: 8px;
    font-size:  .82rem;
    padding:    8px 12px;
    border-radius: 6px;
    line-height: 1.4;
}
.mf-msg.mf-ok    { background: rgba(34,197,94,.15);  color: #86efac; }
.mf-msg.mf-err   { background: rgba(239,68,68,.15);  color: #fca5a5; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .mf-inner {
        flex-direction: column;
        align-items:    stretch;
        gap:            18px;
    }
    /* Ocultar el divisor vertical en móvil */
    .mf-inner::before { display: none; }

    .mf-copy {
        max-width: none;
        flex-wrap: wrap;
    }

    .mf-badge {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }

    .mf-fields {
        flex-direction: column;
        gap: 10px;
    }

    .mf-btn {
        width:   100%;
        padding: 13px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .mf-wrap { padding: 22px 16px; }
    .mf-headline { font-size: .95rem; }
    .mf-copy { gap: 10px; }
    .mf-icon-ring { width: 44px; height: 44px; }
}


/* FIN DE MINI FORMULARIO */