/* --- Variables de Color (Paleta Oficial) --- */
:root {
    --red-dark: #ff0000;

    --blue-dark: #001DFF;
    --blue-medium: #0039FF;
    --blue-light: #0073FF;
    --cyan: #00EDFF;
    --gray-bg: #E6E6E6;
    --dark-text: #050A30; /* Un azul casi negro para legibilidad del texto de Albora */
    --white: #FFFFFF;


    --sae-red-bright:   #D21300;
    --sae-red-medium:   #80091B;
    --sae-purple-dark:  #160822;
    --sae-button-blue:  #1B2A9B;
}

/* --- Reseteo Básico --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--white);
    color: var(--dark-text);
    overflow-x: hidden;
}

















/* ========================================================================================
======================================================================================== */
/* --- Navbar / Encabezado --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8%;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    height: 50px; 
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--dark-text);
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--blue-light);
}

.btn-contacto {
    background: linear-gradient(135deg, var(--blue-medium), var(--cyan));
    color: var(--white) !important;
    padding: 10px 20px;
    border-radius: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.btn-contacto:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 237, 255, 0.4);
}
/* --- Menú Desplegable (Dropdown) --- */
.nav-links li {
    position: relative; 
}

/* Flecha sutil al lado del texto */
.arrow {
    font-size: 0.65rem;
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.3s ease;
    color: var(--blue-light);
}

/* Contenedor Oculto del Submenú */
.dropdown-menu {
    position: absolute;
    top: 100%; /* Se alinea justo debajo del enlace principal */
    left: 50%;
    transform: translateX(-50%) translateY(10px); 
    background-color: var(--white);
    min-width: 160px;
    list-style: none;
    padding: 10px 0;
    box-shadow: 0 10px 25px rgba(5, 10, 48, 0.15); 
    border-radius: 8px;
    border: 1px solid rgba(0, 115, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
}

/* Enlaces internos del Submenú */
.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 0.95rem;
    color: var(--dark-text);
    font-weight: 500;
    white-space: nowrap; 
    transition: all 0.2s ease;
}

/* Hover de las opciones del Submenú */
.dropdown-menu li a:hover {
    background-color: rgba(0, 115, 255, 0.05);
    color: var(--blue-dark);
    padding-left: 25px; /* Pequeño desplazamiento interactivo */
}

/* --- Activación por Hover (Mouse encima) --- */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Sube suavemente a su posición final */
}

.dropdown:hover .arrow {
    transform: rotate(180deg); /* La flecha gira al abrirse */
}

/* Ajuste Responsivo para Móviles */
@media (max-width: 768px) {
    /* Si en tu diseño móvil los links ya se apilan verticalmente: */
    .dropdown-menu {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        box-shadow: none;
        border: none;
        background-color: transparent;
        padding: 5px 0 5px 15px;
        opacity: 1;
        visibility: visible;
        display: none; /* Se puede controlar con JS en móvil si lo deseas, o dejar desplegado */
    }
    
    .dropdown:hover .dropdown-menu {
        display: block;
        transform: none;
    }
}






























/* --- Sección Hero --- */




/* Efecto de degradado de texto como el logo */
.text-gradient {
    background: linear-gradient(45deg, var(--blue-dark), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}






































/* --- Carrusel Dinámico --- */
.carousel-container {
    position: relative;
    width: 100%;
    height: 70vh; /* Ocupa el 70% de la altura de la pantalla */
    overflow: hidden;
    background-color: var(--dark-text);
}

.carousel-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.carousel-item.active {
    opacity: 1;
    z-index: 2;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    filter: brightness(60%); /* Oscurece un poco la imagen para que el texto resalte */
}

/* Textos encima del Carrusel */
.carousel-caption {
    position: absolute;
    bottom: 20%;
    left: 8%;
    right: 8%; 
    color: var(--white);
    z-index: 3;
}

/* Contenedor Flex para alinear texto (izquierda) y botón (derecha) */
.carousel-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 90%;
}

.caption-text {
    max-width: 650px; /* Limita el ancho del texto para conservar espacio */
    text-align: left;
}

.carousel-caption h2 {
    font-size: 3rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.carousel-caption p {
    font-size: 1.3rem;
    color: var(--gray-bg);
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.caption-action {
    flex-shrink: 0; /* Impide que el botón se comprima de forma extraña */
}

/* Botones Flechas */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 29, 255, 0.3); /* Base de tu azul oscuro con transparencia */
    border: 1px solid var(--cyan);
    color: var(--white);
    font-size: 2rem;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    z-index: 10;
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    background-color: var(--blue-light);
    box-shadow: 0 0 4px var(--cyan);
}

.prev { left: 2%; }
.next { right: 2%; }

/* Puntos Indicadores (Dots) */
.carousel-dots {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active, .dot:hover {
    background-color: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
    transform: scale(1.2);
}

/* --- Botón de WhatsApp en el Carrusel --- */
.btn-whatsapp-carousel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px; /* Incrementado sutilmente para balancear la derecha */
    background-color: #25D366; /* Verde oficial de WhatsApp */
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* --- Botón de Contacto Interno en el Carrusel (Slide 2) --- */
.btn-contacto-carousel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    background: linear-gradient(135deg, var(--blue-medium), var(--cyan));
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 237, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-contacto-carousel:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 237, 255, 0.5);
    color: var(--white);
}

.btn-whatsapp-carousel:hover {
    transform: translateY(-3px);
    background-color: #20ba5a;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
    color: var(--white); /* Mantiene el texto blanco */
}

.icon-wa {
    font-size: 1.2rem;
}






























/* ========================================================================================
   --- SECCIÓN INFORMACIÓN Y SOPORTE ASPEL (aspel.html) ---
======================================================================================== */



/* --- Hero Informativo --- */








/* --- Grid de Soluciones por Sistema --- */














/* Badge Cuadrado Tecnológico */






/* Recuadro de Solución Destacada dentro de la Tarjeta */








/* Hover de las tarjetas informativas */



/* --- Sección Guía de Primeros Auxilios --- */














/* Hover en la lista de guías */



/* --- Sección CTA de Soporte Urgente --- */


.cta-box {
    background: linear-gradient(135deg, var(--dark-text), var(--blue-dark));
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    color: var(--white);
    max-width: 950px;
    margin: 0 auto;
    box-shadow: 0 15px 40px rgba(5, 10, 48, 0.2);
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo de fondo decorativo */
.cta-box::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 237, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.cta-box h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.cta-box p {
    color: var(--gray-bg);
    font-size: 1.1rem;
    max-width: 750px;
    margin: 0 auto 35px auto;
    line-height: 1.6;
}

/* Botón Urgente de WhatsApp */







/* ========================================================================================
   --- RESPONSIVE DESIGN (Media Queries) ---
======================================================================================== */


@media (max-width: 768px) {
    
    
    
    
    
    .cta-box {
        padding: 40px 20px;
    }
    .cta-box h2 {
        font-size: 1.8rem;
    }
    
}

/* --- Estilos para el Temario Dinámico --- */
.temario-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.modulo-checkbox-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modulo-checkbox-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue-dark);
    margin-top: 2px;
    cursor: pointer;
}

.modulo-info-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.modulo-titulo-cb {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-text);
}

.modulo-duracion-cb {
    font-size: 0.8rem;
    color: var(--blue-medium);
    font-weight: 700;
}

/* Estado seleccionado de la tarjeta */
.modulo-checkbox-card:has(input:checked) {
    background-color: rgba(0, 29, 255, 0.03);
    border-color: var(--blue-light);
    box-shadow: 0 4px 12px rgba(0, 115, 255, 0.08);
}

/* --- Panel de Precios en Tiempo Real --- */
.panel-resumen-precio {
    background: #fafafa;
    border: 1px dashed var(--blue-light);
    border-radius: 12px;
    padding: 20px;
    margin: 25px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.resumen-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
}

.resumen-item span {
    font-size: 0.9rem;
    color: #666;
}

.resumen-item strong {
    font-size: 1.3rem;
    color: var(--dark-text);
}

.resumen-item.destacado strong {
    font-size: 1.6rem;
    color: var(--blue-dark);
}

/* Utilidad para ocultar elementos */
.u-oculto {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .temario-checkbox-grid {
        grid-template-columns: 1fr;
    }
    .panel-resumen-precio {
        flex-direction: column;
        gap: 15px;
    }
}



























/* --- Sección Nosotros Moderno --- */
.nosotros-moderno {
    padding: 100px 8%;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.nosotros-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.nosotros-header .tagline {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--blue-light);
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 15px;
}

.nosotros-header h2 {
    font-size: 2rem;
    line-height: 1.2;
    color: var(--dark-text);
    margin-bottom: 20px;
    font-weight: 700;
}



/* Grid de Tarjetas Simétricas */
.ecosistema-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.ecosistema-card {
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Línea superior con degradado tecnológico */
.card-border-line {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--blue-dark), var(--cyan));
    position: absolute;
    top: 0;
    left: 0;
}

.card-body {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.card-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(0, 115, 255, 0.1); /* Tu azul claro muy tenue */
    line-height: 1;
    transition: color 0.3s ease;
}

.ecosistema-card h3 {
    font-size: 1.3rem;
    color: var(--dark-text);
    font-weight: 600;
}

.ecosistema-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* Efectos Hover Interactivos */
.ecosistema-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 57, 255, 0.08);
    border-color: rgba(0, 237, 255, 0.3);
}

.ecosistema-card:hover .card-num {
    color: var(--cyan);
}
.equipo-img-placeholder {
    width: 100%;          /* O el ancho fijo que prefieras, ej: 200px */
    height: 250px;        /* Define una altura fija idéntica para todas las tarjetas */
    position: relative;
    overflow: hidden;     /* Recorta cualquier parte de la imagen que se salga */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4; /* Fondo por si falla la imagen */
}

/* 2. Truco maestro para ajustar la imagen automáticamente */
.equipo-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* Llena el contenedor y se recorta al centro sin deformarse */
    object-position: center top; /* Centra la foto priorizando los rostros arriba */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;           /* Se posiciona por encima del emoji de respaldo */
}

/* 3. Estilo para el emoji por si la imagen no carga */
.img-backup-icon {
    font-size: 3rem;
    z-index: 1;           /* Queda atrás, solo se ve si la imagen tiene error */
}







































/* --- Sección Servicios Aspel --- */
.servicios-aspel {
    padding: 100px 8%;
    background-color: var(--gray-bg); /* Fondo gris claro de tu paleta para hacer contraste */
}

.servicios-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.servicios-intro .tagline {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--blue-dark);
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 15px;
}

.servicios-intro h2 {
    font-size: 2.5rem;
    color: var(--dark-text);
    margin-bottom: 20px;
}

.servicios-intro p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}




































/* ==========================================
   CATÁLOGO DE SISTEMAS - ALBORA NEXUS
========================================== */

/* CUADRÍCULA */

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

/* ENLACE QUE ENVUELVE CADA TARJETA */

.aspel-card-link {
    display: block;
    min-width: 0;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* DISEÑO GENERAL DE TARJETAS */

.aspel-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;

    height: 100%;
    padding: 40px 30px;

    background-color: var(--white, #FFFFFF);
    border: 2px solid rgba(0, 0, 0, 0.03);
    border-radius: 12px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);

    position: relative;

    transition:
        transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* LOGOTIPOS */

.aspel-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 65px;
    margin-bottom: 10px;
}

.aspel-card-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* TÍTULOS */

.aspel-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dark-text, #17213A);
}

/* DESCRIPCIONES */

.aspel-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666666;
}

/* SABER MÁS */

.card-action-arrow {
    margin-top: auto;
    padding-top: 10px;

    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blue-light, #007BFF);

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

/* ==========================================
   COLORES INDIVIDUALES DE LOS 11 SISTEMAS
========================================== */

/* ASPEL SAE */
.card-sae {
    --card-accent-color: #F20530;
    --card-shadow-color: rgba(242, 5, 48, 0.20);
}

/* ASPEL COI */
.card-coi {
    --card-accent-color: #00A3E0;
    --card-shadow-color: rgba(0, 163, 224, 0.20);
}

/* ASPEL NOI */
.card-noi {
    --card-accent-color: #F58220;
    --card-shadow-color: rgba(245, 130, 32, 0.20);
}

/* NOI ASISTENTE */
.card-noiasistente {
    --card-accent-color: #F58220;
    --card-shadow-color: rgba(245, 130, 32, 0.20);
}

/* ASPEL BANCO */
.card-banco {
    --card-accent-color: #83D500;
    --card-shadow-color: rgba(131, 213, 0, 0.25);
}

/* ASPEL FACTURE */
.card-facture {
    --card-accent-color: #8246AF;
    --card-shadow-color: rgba(130, 70, 175, 0.20);
}

/* SIIGO NUBE */
.card-siigonube {
    --card-accent-color: #00A3E0;
    --card-shadow-color: rgba(0, 163, 224, 0.20);
}

/* SIIGO FISCAL */
.card-siigofiscal {
    --card-accent-color: #00A3E0;
    --card-shadow-color: rgba(0, 163, 224, 0.20);
}

/* ASPEL CAJA */
.card-caja {
    --card-accent-color: #F5BD00;
    --card-shadow-color: rgba(245, 189, 0, 0.25);
}

/* ASPEL ADM */
.card-adm {
    --card-accent-color: #5367D6;
    --card-shadow-color: rgba(83, 103, 214, 0.20);
}

/* ASPEL PROD */
.card-prod {
    --card-accent-color: #008F83;
    --card-shadow-color: rgba(0, 143, 131, 0.20);
}

/* ==========================================
   EFECTOS INTERACTIVOS
========================================== */

/* HOVER */

.aspel-card-link:hover .aspel-card {
    transform: translateY(-8px);
    border-color: var(--card-accent-color);
    box-shadow: 0 15px 35px var(--card-shadow-color);
}

/* ANIMACIÓN DE SABER MÁS */

.aspel-card-link:hover .card-action-arrow {
    color: var(--card-accent-color);
    transform: translateX(6px);
}

/* EFECTO AL HACER CLIC */

.aspel-card-link:active .aspel-card {
    transform: translateY(-2px) scale(0.97);
    border-color: var(--card-accent-color);
    box-shadow: 0 4px 10px var(--card-shadow-color);
    transition: transform 0.08s ease;
}

/* ACCESIBILIDAD CON TECLADO */

.aspel-card-link:focus-visible {
    outline: none;
}

.aspel-card-link:focus-visible .aspel-card {
    border-color: var(--card-accent-color);
    outline: 3px solid var(--card-accent-color);
    outline-offset: 3px;
}

/* ==========================================
   RESPONSIVE
========================================== */

/* TABLET */

@media (max-width: 992px) {
    .servicios-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

/* CELULAR */

@media (max-width: 600px) {
    .servicios-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .aspel-card {
        padding: 30px 24px;
    }

    .aspel-card h3 {
        font-size: 1.25rem;
    }

    .aspel-card-logo {
        height: 55px;
    }
}

/* MOVIMIENTO REDUCIDO */

@media (prefers-reduced-motion: reduce) {
    .aspel-card,
    .card-action-arrow {
        transition: none;
    }

    .aspel-card-link:hover .aspel-card,
    .aspel-card-link:active .aspel-card {
        transform: none;
    }

    .aspel-card-link:hover .card-action-arrow {
        transform: none;
    }
}





































/* --- Sección de Contacto --- */
.contacto-section {
    padding: 100px 8%;
    background-color: var(--gray-bg); /* Fondo gris claro */
}

.contacto-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    background-color: var(--white);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

/* Columna Izquierda (Informativa) */
.contacto-info {
    background-color: var(--dark-text); /* Azul oscuro corporativo */
    padding: 60px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
}

.contacto-info .tagline {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--cyan); /* Contraste cian brillante */
    letter-spacing: 3px;
}

.contacto-info h2 {
    font-size: 2.3rem;
    line-height: 1.3;
}

.contacto-info p {
    color: #b0b5d0;
    line-height: 1.6;
    font-size: 1.05rem;
}

.info-detalles {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-icon {
    font-size: 1.5rem;
    background-color: rgba(0, 237, 255, 0.1);
    padding: 10px;
    border-radius: 12px;
    color: var(--cyan);
}

.info-item h4 {
    font-size: 0.9rem;
    color: var(--cyan);
    margin-bottom: 2px;
}

.info-item p {
    color: var(--white);
    font-size: 0.95rem;
}

/* Columna Derecha (Formulario) */
.contacto-form-wrapper {
    padding: 60px;
    display: flex;
    align-items: center;
}

.contacto-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contacto-form label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-text);
}

.contacto-form input, 
.contacto-form select, 
.contacto-form textarea {
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 0.95rem;
    background-color: #fafafa;
    color: var(--dark-text);
    transition: all 0.3s ease;
    outline: none;
}

/* Focus tecnológico usando tu cian y azul */
.contacto-form input:focus, 
.contacto-form select:focus, 
.contacto-form textarea:focus {
    border-color: var(--blue-light);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(0, 115, 255, 0.15);
}

/* Botón de Enviar Moderno */
.btn-enviar-formulario {
    background: linear-gradient(135deg, var(--blue-dark), var(--blue-medium));
    color: var(--white);
    border: none;
    padding: 15px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-enviar-formulario:hover {
    background: linear-gradient(135deg, var(--blue-medium), var(--blue-light));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 57, 255, 0.2);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 25, 47, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #112240;
    border: 1px solid rgba(0, 123, 255, 0.3);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.modal-content h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.modal-content p {
    font-size: 0.95rem;
    color: #a8b2d1;
    margin-bottom: 1.8rem;
    line-height: 1.5;
}

.btn-modal-cerrar {
    background: #007bff;
    color: #ffffff;
    border: none;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.btn-modal-cerrar:hover {
    background: #0056b3;
    transform: translateY(-2px);
}






















/* --- Sección Reseñas Estilo Social --- */
.testimonios-social {
    padding: 100px 8%;
    background-color: var(--white);
}

.social-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.social-intro .tagline {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--blue-light);
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 15px;
}

.social-intro h2 {
    font-size: 2.5rem;
    color: var(--dark-text);
    margin-bottom: 15px;
}

.social-intro p {
    font-size: 1.1rem;
    color: #666;
}

/* Grid estilo Feed */
.social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.social-card {
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px; /* Bordes más redondeados y juveniles */
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

/* Encabezado de la Tarjeta (Usuario) */
.social-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* Avatar circular con las iniciales */
.user-avatar {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--blue-medium), var(--cyan));
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-info h4 {
    font-size: 1rem;
    color: var(--dark-text);
    font-weight: 600;
}

.user-info span {
    font-size: 0.8rem;
    color: #888;
}

/* Icono sutil de la plataforma arriba a la derecha */
.platform-icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.1rem;
    opacity: 0.6;
}

/* Estrellas de calificación doradas */
.stars {
    color: #FFC107; /* Dorado clásico de Google/estrellas */
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.social-text {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
}

.social-text strong {
    color: var(--blue-dark);
}

/* Efecto hover interactivo estilo tarjeta webapp */
.social-card:hover {
    transform: translateY(-5px);
    border-color: var(--cyan);
    box-shadow: 0 12px 25px rgba(0, 237, 255, 0.12);
}

/* --- Carrusel Infinito de Tecnologías --- */
.tecnologias-section {
    background-color: var(--white);
    padding: 5px 0; /* Menos padding vertical para que sea una franja elegante */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.tecnologias-container {
    width: 100%;
}

.tecnologias-titulo {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

/* Contenedor principal del slider */
.logo-slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Difuminado elegante a los lados para que los logos aparezcan y desaparezcan suavemente */
.logo-slider::before,
.logo-slider::after {
    content: "";
    height: 100%;
    width: 150px;
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.logo-slider::before {
    left: 0;
    background: linear-gradient(to right, var(--white) 0%, transparent 100%);
}

.logo-slider::after {
    right: 0;
    background: linear-gradient(to left, var(--white) 0%, transparent 100%);
}

/* La pista interna que se mueve */
.logo-slider-track {
    display: flex;
    width: calc(250px * 14); /* Ajusta el 14 según la cantidad total de logos (bloque 1 + bloque 2) */
    animation: scrollInfinito 30s linear infinite;
}

/* Ajustes individuales de cada logo */
.slide-logo {
    width: 250px; /* Ancho de cada espacio de logo */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

.slide-logo img {
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
    filter: grayscale(100%) opacity(60%); /* Los hace monocromáticos para no saturar visualmente */
    transition: all 0.3s ease;
}

/* Al pasar el mouse, el carrusel se pausa y el logo toma su color original */
.logo-slider-track:hover {
    animation-play-state: paused;
}

.slide-logo img:hover {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.08);
}

/* --- Animación CSS Pure --- */
@keyframes scrollInfinito {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 7)); /* Debe ser exactamente la mitad del ancho total (el bloque 1) */
    }
}

/* --- Medias Queries Globales (Responsivo) --- */
@media (max-width: 1024px) {
    .ecosistema-grid,
    .servicios-grid,
    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contacto-container {
        grid-template-columns: 1fr;
    }
    .contacto-info,
    .contacto-form-wrapper {
        padding: 40px;
    }
}

@media (max-width: 968px) {
    /* Rompe la estructura de dos columnas del carrusel para que no se encime en pantallas medianas/chicas */
    .carousel-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .carousel-caption {
        bottom: 15%;
    }
}

@media (max-width: 768px) {
    .nosotros-header h2,
    .servicios-intro h2,
    .social-intro h2 {
        font-size: 2rem;
    }
    .ecosistema-grid,
    .servicios-grid,
    .social-grid {
        grid-template-columns: 1fr;
    }
    
    .logo-slider::before,
    .logo-slider::after {
        width: 80px;
    }
}

@media (max-width: 600px) {
    .form-group-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

















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



/* ==========================================================================
   --- NUEVA SECCIÓN: SERVICIOS TI (`serviciosti.html`) ---
   ========================================================================== */

/* Hero de Servicios TI */
.ti-hero {
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at bottom right, rgba(0, 237, 255, 0.08), transparent),
                radial-gradient(circle at top left, rgba(0, 29, 255, 0.05), transparent);
    background-color: var(--dark-text); /* Fondo oscuro para contraste premium */
    padding: 60px 20px;
    color: var(--white);
}

.ti-hero-content max-width {
    max-width: 800px;
}

.ti-hero-content .tagline {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--cyan);
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 15px;
}

.ti-hero-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.ti-hero-content p {
    font-size: 1.2rem;
    color: var(--gray-bg);
    max-width: 600px;
    margin: 0 auto;
}



/* Sección de Cierre / CTA */
.ti-cta-section {
    padding: 60px 8% 100px 8%;
    background-color: var(--white);
}

.ti-cta-box {
    background: linear-gradient(135deg, var(--dark-text), var(--blue-dark));
    border-radius: 20px;
    padding: 60px;
    text-align: center;
    color: var(--white);
    box-shadow: 0 10px 30px rgba(0, 29, 255, 0.1);
}

.ti-cta-box h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.ti-cta-box p {
    color: var(--gray-bg);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.ti-cta-button {
    display: inline-block;
    text-decoration: none;
    background-color: var(--cyan);
    color: var(--dark-text);
    padding: 15px 35px;
    border-radius: 30px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.ti-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 237, 255, 0.4);
    background-color: var(--white);
}

/* --- Responsivo para Servicios TI --- */


@media (max-width: 768px) {
    
    .ti-hero-content h1 {
        font-size: 2.2rem;
    }
    .ti-cta-box {
        padding: 40px 20px;
    }
    .ti-cta-box h2 {
        font-size: 1.6rem;
    }
}


/* --- SECCIÓN DE MANTENIMIENTO Y SOPORTE TI --- */
.seccion-mantenimiento-ti {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Fondo claro para contrastar */
}

.encabezado-seccion {
    text-align: center;
    margin-bottom: 45px;
}

.badge-subtitulo {
    background-color: rgba(0, 29, 255, 0.1);
    color: #001DFF; /* Tu azul primario */
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.encabezado-seccion h2 {
    font-size: 2.2rem;
    color: #1a1a1a;
    margin-top: 12px;
}

.grid-mantenimiento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.tarjeta-mantenimiento {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 25px;
    border: 1px solid #eef0f3;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-mantenimiento:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 29, 255, 0.1);
}

.icono-mantenimiento {
    color: #001DFF;
    margin-bottom: 18px;
}

.tarjeta-mantenimiento h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #0d1b2a;
}

.tarjeta-mantenimiento ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tarjeta-mantenimiento li {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 12px;
    line-height: 1.5;
    position: relative;
    padding-left: 18px;
}

.tarjeta-mantenimiento li::before {
    content: "•";
    color: #001DFF;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.mantenimiento-cta {
    text-align: center;
    margin-top: 45px;
}

.mantenimiento-cta p {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.btn-solicitar-soporte {
    display: inline-block;
    background-color: #001DFF;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-solicitar-soporte:hover {
    background-color: #0015cc;
}











/* ==========================================================================
   --- SECCIÓN PLANES FLEX ---
   ========================================================================== */
.seccion-bolsas-horas {
    padding: 70px 20px;
    background-color: #ffffff;
}

/* Grilla configurada a 4 columnas fijas para pantallas grandes */
.grid-bolsas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1350px;
    margin: 40px auto 0 auto;
    align-items: stretch;
}

.tarjeta-bolsa {
    background: #fdfdfd;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 30px 18px 22px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-bolsa:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Badge de Porcentaje de Ahorro/Descuento */
.badge-descuento {
    align-self: center;
    background-color: #e6f0ff;
    color: #001DFF;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

/* Tarjeta destacada */
.tarjeta-bolsa.destacada {
    border: 2px solid #001DFF;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 29, 255, 0.12);
}

.badge-popular {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #001DFF;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.bolsa-header h3 {
    font-size: 1.35rem;
    color: #0d1b2a;
    margin-bottom: 8px;
    text-align: center;
}

.subtexto-bolsa {
    font-size: 0.85rem;
    color: #666;
    text-align: center;
    min-height: 38px;
}

.bolsa-precio {
    text-align: center;
    margin: 15px 0 20px 0;
}

.bolsa-precio .monto {
    font-size: 2.2rem;
    font-weight: 800;
    color: #001DFF;
}

.bolsa-precio .moneda {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-left: 2px;
}

/* Etiqueta para el precio individual por hora */
.precio-hora {
    display: block;
    font-size: 0.85rem;
    color: #28a745;
    font-weight: 700;
    margin-top: 4px;
}







.btn-comprar-bolsa {
    display: block;
    text-align: center;
    background-color: #f1f3f9;
    color: #001DFF;
    padding: 12px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-comprar-bolsa:hover {
    background-color: #001DFF;
    color: #ffffff;
}

.btn-comprar-bolsa.btn-destacado {
    background-color: #001DFF;
    color: #ffffff;
}

.btn-comprar-bolsa.btn-destacado:hover {
    background-color: #0015cc;
}

.nota-bolsas {
    text-align: center;
    margin-top: 35px;
    color: #666;
    font-size: 0.9rem;
}

/* ==========================================================================
   --- RESPONSIVIDAD (PANTALLAS MEDIANAS Y MÓVILES) ---
   ========================================================================== */
@media (max-width: 1024px) {
    .grid-bolsas {
        grid-template-columns: repeat(2, 1fr); /* 2x2 en tablets */
        gap: 25px;
    }
}

@media (max-width: 600px) {
    .grid-bolsas {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
}





















/* ==========================================================================
   --- PÁGINA NOSOTROS ---
   ========================================================================== */
.page-nosotros {
    background-color: var(--white);
    color: var(--dark-text);
}

/* 1. Hero Section */
.nosotros-hero {
    background: linear-gradient(135deg, #0b132b 0%, #1c2541 100%);
    padding: 160px 8% 100px 8%;
    text-align: center;
    color: var(--white);
}

.nosotros-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.nosotros-hero .tagline {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--cyan);
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 15px;
}

.nosotros-hero h1 {
    font-size: 2.8rem;
    line-height: 1.25;
    margin-bottom: 20px;
}

.hero-lead {
    font-size: 1.2rem;
    color: #b0b5d0;
    line-height: 1.6;
}

/* 2. Historia */
.nosotros-historia {
    padding: 90px 8%;
    background-color: #f8fafc;
}

.historia-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: center;
}

.historia-texto h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    position: relative;
}

.historia-texto p {
    color: #475569;
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1.05rem;
}

.historia-badge-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.badge-card {
    background-color: var(--white);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    border-left: 5px solid var(--blue-medium);
    text-align: center;
}

.badge-card h3 {
    font-size: 2.5rem;
    color: var(--blue-dark);
    margin: 0 0 5px 0;
}

.badge-card p {
    color: #64748b;
    font-weight: 600;
    margin: 0;
}

/* 3. Misión, Visión, Valores */
.nosotros-pilares {
    padding: 90px 8%;
    max-width: 1200px;
    margin: 0 auto;
}

.pilares-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.pilar-card {
    background-color: var(--white);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pilar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

.pilar-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.pilar-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--dark-text);
}

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

.valores-list {
    padding-left: 20px;
    color: #475569;
    line-height: 1.6;
    font-size: 0.95rem;
}

.valores-list li {
    margin-bottom: 10px;
}

/* 4. Equipo */
.nosotros-equipo {
    padding: 90px 8%;
    background-color: #f8fafc;
}

.equipo-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.equipo-header h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.equipo-header p {
    color: #64748b;
    font-size: 1.1rem;
}

.equipo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.equipo-card {
    background-color: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
}

.equipo-img-placeholder {
    height: 240px;
    background-color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.equipo-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-backup-icon {
    font-size: 4rem;
    position: absolute;
}

.equipo-info-box {
    padding: 30px;
}

.equipo-info-box h3 {
    font-size: 1.3rem;
    margin: 0 0 5px 0;
}

.equipo-info-box .especialidad {
    display: block;
    font-size: 0.9rem;
    color: var(--blue-medium);
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.equipo-info-box p {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* 5. Validación / Prueba Social */












/* 6. CTA */
.nosotros-cta {
    padding: 60px 8% 100px 8%;
}

.cta-box {
    background: linear-gradient(135deg, var(--blue-dark) 0%, #001233 100%);
    padding: 60px;
    border-radius: 24px;
    text-align: center;
    color: var(--white);
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.cta-box h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.cta-box p {
    color: #b0b5d0;
    font-size: 1.1rem;
    margin-bottom: 35px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-primario-nosotros,
.btn-secundario-nosotros {
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-primario-nosotros {
    background-color: var(--blue-medium);
    color: var(--white);
}

.btn-primario-nosotros:hover {
    background-color: var(--blue-light);
    transform: translateY(-2px);
}

.btn-secundario-nosotros {
    background-color: transparent;
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.btn-secundario-nosotros:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--white);
    transform: translateY(-2px);
}

/* Responsivo General */
@media (max-width: 968px) {
    .historia-container,
    .pilares-grid,
    .equipo-grid,
    .testimonios-destacados {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .nosotros-hero h1 {
        font-size: 2.2rem;
    }
    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
}









































/* ==============================================================================================
============================================================================================== */
/* ==========================================================================
   --- NUEVA VISTA COMPARTIMENTADA DE CONTACTO ---
   ========================================================================== */
.page-contacto-wrapper {
    min-height: 90vh;
    background-color: #f8fafc; /* Fondo gris claro premium */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 8% 60px 8%;
}

.page-contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 50px;
    width: 100%;
    max-width: 1200px;
}

/* --- COLUMNA DE TARJETAS (IZQUIERDA) --- */
.contacto-canales-col {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.canal-card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.01);
}

/* Línea decorativa azul a la izquierda como la imagen */
.canal-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--blue-light); /* Tu azul corporativo */
}

.canal-icon {
    font-size: 1.6rem;
    background-color: #f1f5f9;
    padding: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
}

.canal-content h3 {
    font-size: 1.25rem;
    color: var(--dark-text);
    margin: 0 0 8px 0;
    font-weight: 700;
}

.canal-content p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.canal-link {
    color: var(--blue-medium);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: color 0.2s ease;
    display: inline-block;
}

.canal-link:hover {
    color: var(--cyan);
}

.canal-status {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 500;
}

/* --- BLOQUE DE FORMULARIO (DERECHA) --- */
.contacto-box-form {
    background-color: var(--white);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.01);
}

.contacto-box-form h2 {
    font-size: 2.2rem;
    color: var(--dark-text);
    margin: 0 0 12px 0;
    font-weight: 700;
}

.form-subtitle {
    color: #475569;
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 35px;
}

/* Campos simplificados sin labels arriba */
.form-group-clean {
    margin-bottom: 22px;
}

.form-group-clean input,
.form-group-clean select,
.form-group-clean textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background-color: var(--white);
    color: var(--dark-text);
    transition: all 0.25s ease;
    outline: none;
    font-family: inherit;
}

.form-group-clean input:focus,
.form-group-clean select:focus,
.form-group-clean textarea:focus {
    border-color: var(--blue-light);
    box-shadow: 0 0 0 4px rgba(0, 115, 255, 0.08);
}

/* Ajuste específico para placeholders */
.form-group-clean ::placeholder {
    color: #94a3b8;
}

/* --- RESPONSIVO --- */
@media (max-width: 968px) {
    .page-contacto-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .page-contacto-wrapper {
        padding-top: 100px;
    }
}

@media (max-width: 480px) {
    .contacto-box-form {
        padding: 30px 20px;
    }
    
    .contacto-box-form h2 {
        font-size: 1.8rem;
    }
}





























/* =========================================================================================================
========================================================================================================= */
/* ==========================================================================
   --- FOOTER ULTRA SIMPLE ---
   ========================================================================== */
.footer-ultra-simple {
    background-color: var(--dark-text); /* El azul casi negro corporativo */
    color: rgba(255, 255, 255, 0.7); /* Blanco sutilmente opaco para elegancia */
    padding: 30px 8%;
    border-top: 1px solid rgba(0, 237, 255, 0.1); /* Delicada línea cian */
    font-size: 0.9rem;
}

.footer-ultra-content {
    display: flex;
    justify-content: space-between; /* Separa el copyright a la izquierda y el contacto a la derecha */
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-ultra-content p {
    margin: 0;
    line-height: 1.4;
}

.footer-ultra-contact a {
    color: var(--cyan); /* Tus enlaces resaltan con el cian oficial */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-ultra-contact a:hover {
    color: var(--white); /* Brilla a blanco al pasar el cursor */
    text-decoration: underline;
}

/* --- Responsivo --- */
@media (max-width: 768px) {
    .footer-ultra-content {
        flex-direction: column; /* Se apila al centro en celulares */
        text-align: center;
        gap: 10px;
    }
}


/* ========================================================================================
   --- SECCIÓN CAPACITACIÓN (capacitacion.html) ---
======================================================================================== */

/* --- Estilos Base y Layout de la Página --- */
.capacitacion-page {
    padding: 60px 8% 100px 8%;
    background-color: var(--white);
}

/* Hero de Capacitación */
.capacitacion-hero {
    text-align: center;
    max-width: 800px;
    margin: 40px auto 60px auto;
}

.capacitacion-hero h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
    background: linear-gradient(45deg, var(--blue-dark), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.capacitacion-hero p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
}

/* Línea separadora sutil */
.separador-seccion {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 115, 255, 0.15), transparent);
    margin: 60px 0;
}

/* --- Grid de Programas de Especialización (Tarjetas) --- */
.paquetes-sistemas {
    margin-bottom: 40px;
}

.paquetes-sistemas h2 {
    text-align: center;
    font-size: 2rem;
    color: var(--dark-text);
    margin-bottom: 40px;
    font-weight: 700;
}

.sistemas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.sistema-card {
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 40px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sistema-icon {
    font-size: 2.5rem;
    margin-bottom: 5px;
}

.sistema-card h3 {
    font-size: 1.4rem;
    color: var(--dark-text);
    font-weight: 600;
}

.sistema-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* Badge flotante "Más solicitado" */
.badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--blue-medium), var(--blue-light));
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

/* Hover de las tarjetas */
.sistema-card:hover {
    transform: translateY(-6px);
    border-color: var(--cyan);
    box-shadow: 0 12px 30px rgba(0, 237, 255, 0.12);
}


/* --- COTIZADOR INTERACTIVO (Formulario Avanzado) --- */
.cotizador-curso-container {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
}

.cotizador-header {
    text-align: center;
    margin-bottom: 40px;
}

.cotizador-header h2 {
    font-size: 2.2rem;
    color: var(--dark-text);
    margin-bottom: 12px;
}

.cotizador-header p {
    color: #666;
    font-size: 1.05rem;
}

.cotizador-form {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.cotizador-form label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 12px;
    display: block;
}

/* Estilo del Selector Desplegable (Select) */
.cotizador-form select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font-size: 1rem;
    background-color: #fafafa;
    color: var(--dark-text);
    outline: none;
    transition: all 0.3s ease;
}

.cotizador-form select:focus {
    border-color: var(--blue-light);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(0, 115, 255, 0.15);
}

/* Tarjetas de Opción de Radio (Duración) */




/* Esconder el radio button nativo pero mantenerlo accesible */


/* El contenedor del diseño personalizado del radio */






/* Estados Hover y Marcado de las tarjetas de Radio */






/* Flexbox para Selección de Modalidad */
.modalidad-flex {
    display: flex;
    gap: 20px;
}

.modalidad-opcion {
    flex: 1;
    position: relative;
    cursor: pointer;
    margin-bottom: 0 !important;
}

.modalidad-opcion input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.modalidad-diseno {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 16px;
    font-size: 1rem;
    font-weight: 600;
    background-color: #fafafa;
    color: var(--dark-text);
    transition: all 0.25s ease;
}

.modalidad-diseno .icono {
    font-size: 1.2rem;
}

/* Estados Hover y Marcado de Modalidad */
.modalidad-opcion:hover .modalidad-diseno {
    border-color: var(--blue-light);
    background-color: rgba(0, 115, 255, 0.02);
}

.modalidad-opcion input[type="radio"]:checked + .modalidad-diseno {
    border-color: var(--blue-medium);
    background-color: rgba(0, 57, 255, 0.04);
    color: var(--blue-dark);
    box-shadow: 0 0 0 3px rgba(0, 57, 255, 0.15);
}

/* Filas para Datos de Contacto Corporativo */
.datos-contacto-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.cotizador-form input[type="text"],
.cotizador-form input[type="email"],
.cotizador-form input[type="tel"] {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font-size: 0.95rem;
    background-color: #fafafa;
    color: var(--dark-text);
    outline: none;
    transition: all 0.3s ease;
}

.cotizador-form input:focus {
    border-color: var(--blue-light);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(0, 115, 255, 0.15);
}

/* Botón de Envío del Cotizador */
.btn-enviar-cotizacion {
    background: linear-gradient(135deg, var(--blue-dark), var(--blue-medium));
    color: var(--white);
    border: none;
    padding: 18px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(0, 29, 255, 0.15);
}

.btn-enviar-cotizacion:hover {
    background: linear-gradient(135deg, var(--blue-medium), var(--blue-light));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 115, 255, 0.3);
}

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


/* ========================================================================================
   --- RESPONSIVE DESIGN (Media Queries) ---
======================================================================================== */
@media (max-width: 992px) {
    .sistemas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cotizador-curso-container {
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {
    .capacitacion-page {
        padding: 40px 5% 60px 5%;
    }
    .capacitacion-hero h1 {
        font-size: 2.3rem;
    }
    .sistemas-grid {
        grid-template-columns: 1fr;
    }
    .modalidad-flex {
        flex-direction: column;
        gap: 12px;
    }
    .datos-contacto-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
































/* ========================================================================================
   --- ESTILOS ESPECÍFICOS PARA LA PÁGINA ASPEL SAE (sae.html) ---
======================================================================================== */

.sae-page {
    margin-top: 20px;
    padding-bottom: 60px;
    background-color: var(--white);
}

/* --- Hero Section --- */
.sae-hero {
    background: linear-gradient(135deg, var(--sae-red-medium), var(--red-dark));
    color: var(--white);
    padding: 80px 8%;
    text-align: center;
    border-radius: 0 0 40px 40px;
}
.sae-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

/* --- Contenedor y Logotipo de Aspel SAE --- */
.sae-hero-logo-container {
    margin: 20px auto 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sae-sistema-logo {
    max-width: 80px;                /* Tamaño reducido */
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0.75;                  /* Aplicación de transparencia */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sae-sistema-logo:hover {
    opacity: 1;                     /* Restaura la opacidad al pasar el cursor */
    transform: scale(1.05);
}

.sae-hero h1 {
    font-size: 2.8rem;
    margin: 20px 0;
}
.sae-hero p {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 30px;
}



/* --- Slider Interactivo del Tutorial --- */
.sae-tutorial-section {
    padding: 80px 8% 40px 8%;
}
.tutorial-header {
    text-align: center;
    margin-bottom: 40px;
}
.tutorial-header h2 {
    font-size: 2rem;
    color: var(--dark-text);
}
.tutorial-slider-container {
    max-width: 850px;
    margin: 0 auto;
    background-color: #fcfcfc;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.tutorial-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}
.tutorial-image-wrapper {
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
}
.tutorial-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.tutorial-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.paso-badge {
    background-color: var(--blue-light);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
    width: fit-content;
}
.tutorial-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.btn-control-tut {
    background-color: var(--dark-text);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-control-tut:hover:not(:disabled) {
    background-color: var(--blue-light);
}
.btn-control-tut:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- Banner de Complicaciones --- */









/* --- Cuadrícula de Planes --- */















/* Plan Destacado Premium */





/* ========================================================================================
   --- ANIMACIONES POR CSS ---
======================================================================================== */
.animar-entrada {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animar-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animar-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    
    
    .tutorial-card {
        grid-template-columns: 1fr;
    }
}



/* Botón superior derecho - Slide Aspel */
.slide-aspel .caption-action {
    position: absolute;
    top: 30px;
    right: 40px;
    z-index: 10;
}

/* Posicionar respecto a toda la imagen */
.slide-aspel .carousel-caption {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Mantener el texto en su posición original */
.slide-aspel .carousel-content-wrapper {
    width: 100%;
    height: 100%;
}

.slide-aspel .caption-text {
    position: absolute;
    left: 8%;
    bottom: 20%;
}

/* Permitir hacer clic en el botón */
.slide-aspel .caption-action a {
    pointer-events: auto;
}

/* Adaptación a celulares */
@media (max-width: 768px) {
    .slide-aspel .caption-action {
        top: 20px;
        right: 15px;
    }

    .slide-aspel .btn-whatsapp-carousel {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    .slide-aspel .caption-text {
        left: 8%;
        right: 8%;
        bottom: 15%;
    }
}



/* SECCIÓN INFORMATIVA ASPEL SAE */

.sae-informacion {
    width: 100%;
    padding: 50px 5%;
}

.sae-descripcion {
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.sae-descripcion h2 {
    text-align: left;
    font-size: 2rem;
    color: var(--sae-red-medium);
    margin-bottom: 25px;
}

.sae-descripcion p {
    text-align: left;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

.sae-descripcion h3 {
    text-align: left;
    font-size: 1.3rem;
    color: var(--sae-red-medium);
    margin-bottom: 20px;
}

.sae-funciones {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sae-funciones li {
    text-align: left;
    padding: 12px 0 12px 20px;
    margin-bottom: 12px;
    border-left: 3px solid var(--red-dark);
    line-height: 1.7;
    color: #444;
}

.sae-funciones strong {
    color: var(--sae-red-medium);
}

/* Adaptación para celulares */
@media (max-width: 768px) {
    .sae-informacion {
        padding: 30px 5%;
    }

    .sae-descripcion h2 {
        font-size: 1.6rem;
    }

    .sae-descripcion p,
    .sae-funciones li {
        font-size: 0.95rem;
    }
}




/* ==========================================
   ALBORA NEXUS - ANIMACIÓN SCROLL REVEAL
========================================== */

/* Estado inicial */
.js-reveal .sae-informacion .reveal-scroll {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cuando el elemento entra en pantalla */
.js-reveal .sae-informacion .reveal-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Conservar alineación a la izquierda */
.sae-informacion .reveal-scroll {
    text-align: left;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .sae-informacion .reveal-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}






/* ==========================================
   ECOSISTEMA ASPEL - ALBORA NEXUS
========================================== */

.sae-ecosistema {
    padding: 75px 5%;
    background: #f5f8fc;
    text-align: center;
}

.sae-ecosistema-header {
    max-width: 850px;
    margin: 0 auto 35px;
}

.sae-ecosistema-header h2 {
    color: var(--sae-red-medium, #6d0902);
    font-size: 2rem;
    margin-bottom: 15px;
}

.sae-ecosistema-header p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Área del mapa */
.sae-mapa-integracion {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 600px;
    margin: 0 auto;
}

/* Líneas SVG */
.sae-conexiones {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.sae-linea {
    fill: none;
    stroke: #00bcd4;
    stroke-width: 3;
    stroke-dasharray: 12 8;
    animation: sae-flujo 2s linear infinite;
}

@keyframes sae-flujo {
    to {
        stroke-dashoffset: -40;
    }
}

/* Nodos */
.sae-nodo {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 170px;
    min-height: 115px;
    padding: 15px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 35, 80, 0.12);
    text-decoration: none;
    color: #073a74;
    transform: translate(-50%, -50%);
    transition:
        box-shadow 0.3s ease,
        scale 0.3s ease;
    z-index: 2;
}

.sae-nodo img {
    width: 100%;
    max-width: 125px;
    height: 65px;
    object-fit: contain;
}

.sae-nodo span {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Posición central */
.sae-nodo-central {
    left: 50%;
    top: 50%;
    width: 200px;
    min-height: 145px;
    border: 2px solid #d40000;
    box-shadow: 0 10px 30px rgba(0, 188, 212, 0.2);
}

/* Posiciones alrededor de SAE */
.sae-nodo-prod {
    left: 25%;
    top: 24%;
}

.sae-nodo-caja {
    left: 75%;
    top: 24%;
}

.sae-nodo-banco {
    left: 25%;
    top: 76%;
}

.sae-nodo-coi {
    left: 75%;
    top: 76%;
}

/* Efecto hover */

/* ==========================================
   EFECTOS HOVER - COLORES POR SISTEMA
========================================== */

/* Efecto general */
a.sae-nodo {
    border: 2px solid transparent;
    transition:
        scale 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
}

a.sae-nodo:hover {
    scale: 1.08;
}

/* ASPEL PROD - MORADO */
.sae-nodo-prod:hover {
    border-color: #8B35D6;
    background-color: #F8F0FF;
    box-shadow:
        0 0 20px rgba(139, 53, 214, 0.5),
        0 0 40px rgba(139, 53, 214, 0.25);
}

/* ASPEL CAJA / VENTAS - AMARILLO */
.sae-nodo-caja:hover {
    border-color: #EAB308;
    background-color: #FFFBE6;
    box-shadow:
        0 0 20px rgba(234, 179, 8, 0.5),
        0 0 40px rgba(234, 179, 8, 0.25);
}

/* ASPEL BANCO - VERDE */
.sae-nodo-banco:hover {
    border-color: #16A34A;
    background-color: #F0FFF4;
    box-shadow:
        0 0 20px rgba(22, 163, 74, 0.5),
        0 0 40px rgba(22, 163, 74, 0.25);
}

/* ASPEL COI / CONTABILIDAD - AZUL */
.sae-nodo-coi:hover {
    border-color: #0284C7;
    background-color: #EFF9FF;
    box-shadow:
        0 0 20px rgba(2, 132, 199, 0.5),
        0 0 40px rgba(2, 132, 199, 0.25);
}

/* Accesibilidad: mismo efecto con teclado */


.sae-nodo-prod:focus-visible {
    outline-color: #8B35D6;
}

.sae-nodo-caja:focus-visible {
    outline-color: #EAB308;
}

.sae-nodo-banco:focus-visible {
    outline-color: #16A34A;
}

.sae-nodo-coi:focus-visible {
    outline-color: #0284C7;
}


a.sae-nodo:focus-visible {
    outline: 3px solid #00bcd4;
    outline-offset: 5px;
}



/* ==========================================
   VERSIÓN MÓVIL
========================================== */

@media (max-width: 768px) {

    .sae-ecosistema {
        padding: 50px 5%;
    }

    .sae-ecosistema-header h2 {
        font-size: 1.6rem;
    }

    .sae-mapa-integracion {
        height: 490px;
    }

    .sae-nodo {
        width: 120px;
        min-height: 100px;
        padding: 10px;
        gap: 6px;
    }

    .sae-nodo img {
        height: 50px;
        max-width: 95px;
    }

    .sae-nodo span {
        font-size: 0.75rem;
    }

    .sae-nodo-central {
        width: 135px;
        min-height: 110px;
    }

    .sae-nodo-prod,
    .sae-nodo-banco {
        left: 19%;
    }

    .sae-nodo-caja,
    .sae-nodo-coi {
        left: 81%;
    }

    .sae-nodo-prod,
    .sae-nodo-caja {
        top: 18%;
    }

    .sae-nodo-banco,
    .sae-nodo-coi {
        top: 82%;
    }

    /* Reubicar conexiones para móvil */
    .sae-conexiones {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sae-linea {
        animation: none;
    }

    .sae-nodo {
        transition: none;
    }
}



/* ==========================================
   INDICACIÓN INTERACTIVA - ECOSISTEMA ASPEL
========================================== */

.sae-ecosistema-indicacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    max-width: 650px;
    margin: 20px auto 0;
    padding: 18px 24px;
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 35, 80, 0.07);
}

.sae-indicacion-icono {
    color: #d40000;
    font-size: 2rem;
    line-height: 1;
    animation: sae-indicar 1.8s ease-in-out infinite;
}

.sae-ecosistema-indicacion p {
    margin: 0;
    text-align: left;
    line-height: 1.6;
}

.sae-ecosistema-indicacion strong {
    display: block;
    color: #073a74;
    font-size: 1rem;
}

.sae-ecosistema-indicacion p span {
    display: block;
    color: #555;
    font-size: 0.9rem;
}

/* Movimiento suave del indicador */
@keyframes sae-indicar {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* Mostrar puntero de enlace */
.sae-mapa-integracion a.sae-nodo {
    cursor: pointer;
}

/* Mensaje flotante al pasar sobre un logo */
.sae-mapa-integracion a.sae-nodo::after {
    content: "Haz clic para explorar";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translate(-50%, 5px);
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 7px;
    background: #073a74;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
    pointer-events: none;
}

.sae-mapa-integracion a.sae-nodo:hover::after,
.sae-mapa-integracion a.sae-nodo:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Celulares */
@media (max-width: 768px) {
    .sae-ecosistema-indicacion {
        padding: 14px;
        gap: 10px;
    }

    .sae-indicacion-icono {
        font-size: 1.6rem;
    }

    .sae-ecosistema-indicacion strong {
        font-size: 0.9rem;
    }

    .sae-ecosistema-indicacion p span {
        font-size: 0.82rem;
    }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .sae-indicacion-icono {
        animation: none;
    }
}






/* ==========================================
   ALBORA NEXUS - SOPORTE TÉCNICO SAE
========================================== */

.sae-soporte-section {
    padding: 70px 5%;
    background: #f5f8fc;
}

.sae-soporte-card {
    max-width: 1100px;
    margin: 0 auto;
    padding: 45px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #d40000;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 35, 80, 0.07);
    transition:
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.sae-soporte-card:hover {
    box-shadow: 0 15px 40px rgba(0, 35, 80, 0.12);
}

/* Encabezado */

.sae-soporte-encabezado {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.sae-soporte-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    background: #fff1f1;
    color: #d40000;
    border-radius: 16px;
    font-size: 2rem;
}

.sae-soporte-etiqueta {
    display: block;
    color: #d40000;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
}

.sae-soporte-titulos h2 {
    color: var(--sae-red-medium, #741407);
    font-size: 2rem;
    line-height: 1.3;
    margin: 0;
    text-align: left;
}

/* Descripción */

.sae-soporte-descripcion {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.9;
    text-align: left;
    margin-bottom: 28px;
}

/* Servicios */


/* Servicios centrados */

.sae-soporte-servicios {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 35px;
}

.sae-soporte-servicios span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 16px;
    background: #f5f8fc;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    color: #073a74;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}




.sae-soporte-servicios span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    background: #f5f8fc;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    color: #073a74;
    font-size: 0.9rem;
    font-weight: 600;
}

.sae-soporte-servicios i {
    color: #d40000;
}

/* Botón WhatsApp */

.sae-soporte-accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.btn-sae-soporte {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    background: #16a34a;
    color: #ffffff;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.btn-sae-soporte:hover {
    background: #12813b;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(22, 163, 74, 0.25);
}

.btn-sae-soporte:focus-visible {
    outline: 3px solid #073a74;
    outline-offset: 4px;
}

.btn-sae-soporte i {
    font-size: 1.3rem;
}

.sae-soporte-accion p {
    margin: 0;
    color: #64748b;
    font-size: 0.85rem;
    text-align: left;
}

/* ==========================================
   ADAPTACIÓN PARA CELULARES
========================================== */

@media (max-width: 768px) {

    .sae-soporte-section {
        padding: 45px 5%;
    }

    .sae-soporte-card {
        padding: 25px 20px;
    }

    .sae-soporte-encabezado {
        align-items: flex-start;
        gap: 14px;
    }

    .sae-soporte-icono {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }

    .sae-soporte-titulos h2 {
        font-size: 1.5rem;
    }

    .sae-soporte-descripcion {
        font-size: 0.95rem;
    }

    .sae-soporte-servicios {
        gap: 10px;
    }

    .sae-soporte-servicios span {
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    .sae-soporte-accion {
        align-items: stretch;
    }

    .btn-sae-soporte {
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sae-soporte-card,
    .btn-sae-soporte {
        transition: none;
    }

    .btn-sae-soporte:hover {
        transform: none;
    }
}
























/* ==========================================
   ASPEL COI - PALETA DE COLORES
========================================== */



/* ==========================================
   ECOSISTEMA COI - DISTRIBUCIÓN CIRCULAR
========================================== */



/* Título */



/* Descripción */



/* ==========================================
   CONTENEDOR DEL MAPA
========================================== */


.coi-page .coi-mapa-integracion,
.banco-page .banco-mapa-integracion,
.facture-page .facture-mapa-integracion,
.siigonube-page .siigonube-mapa-integracion,
.noiasistente-page .noiasistente-mapa-integracion,
.siigofiscal-page .siigofiscal-mapa-integracion,
.aspelcaja-page .aspelcaja-mapa-integracion,
.adm-page .adm-mapa-integracion,
.prod-page .prod-mapa-integracion {
    position: relative;
    width: 100%;
    max-width: 1050px;
    height: 560px;
    margin: 30px auto;
    isolation: isolate;
    overflow: visible;
}

/* ==========================================
   LÍNEAS SVG
========================================== */

.coi-page .coi-mapa-integracion > svg.coi-conexiones {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    pointer-events: none;
}

/* Conexiones animadas */

.coi-page .coi-conexiones path.coi-linea {
    fill: none;
    stroke: var(--coi-cyan-bright);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 7;
    opacity: 1;
    visibility: visible;
    animation: coi-flujo 12s linear infinite;
}

@keyframes coi-flujo {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -340;
    }
}

/* ==========================================
   NODOS DE LOS SISTEMAS
========================================== */

.coi-page .coi-nodo {
    position: absolute;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 145px;
    min-height: 115px;
    padding: 15px;

    background: #ffffff;
    border: 2px solid var(--coi-calc-gray);
    border-radius: 18px;

    text-align: center;
    text-decoration: none;
    color: var(--coi-blue-dark);
    font-weight: 700;

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

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

/* Imágenes */


.coi-page .coi-nodo img,
.noi-page .noi-nodo img,
.banco-page .banco-nodo img,
.facture-page .facture-nodo img,
.siigonube-page .siigonube-nodo img,
.noiasistente-page .noiasistente-nodo img,
.siigofiscal-page .siigofiscal-nodo img,
.aspelcaja-page .aspelcaja-nodo img,
.adm-page .adm-nodo img,
.prod-page .prod-nodo img {
    display: block;
    max-width: 100%;
    width: auto;
    height: 48px;
    object-fit: contain;
}

/* Nombre del sistema */

.coi-page .coi-nodo span {
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--coi-blue-dark);
}

/* ==========================================
   SISTEMA CENTRAL - COI
========================================== */

.coi-page .coi-nodo-central {
    left: 50%;
    top: 50%;

    width: 165px;
    min-height: 135px;

    background: #ffffff;
    border: 2px solid var(--coi-cyan-bright);

    box-shadow:
        0 0 25px rgba(0, 163, 224, 0.20);
}

.coi-page .coi-nodo-central img {
    height: 65px;
}

.coi-page .coi-nodo-central span {
    color: var(--coi-cyan-bright);
    font-weight: 800;
}

/* ==========================================
   POSICIONES CIRCULARES
========================================== */

/* SAE - arriba izquierda */

.coi-page .coi-nodo-sae {
    left: 25%;
    top: 26%;
}

/* NOI - arriba centro */

.coi-page .coi-nodo-noi {
    left: 50%;
    top: 15%;
}

/* BANCO - arriba derecha */

.coi-page .coi-nodo-banco {
    left: 75%;
    top: 26%;
}

/* SIIGO NUBE - abajo izquierda */

.coi-page .coi-nodo-nube {
    left: 25%;
    top: 74%;
}

/* SIIGO FISCAL - abajo centro */

.coi-page .coi-nodo-fiscal {
    left: 50%;
    top: 85%;
}

/* CAJA - abajo derecha */

.coi-page .coi-nodo-caja {
    left: 75%;
    top: 74%;
}

/* ==========================================
   EFECTOS HOVER - PALETA COI
========================================== */



/* Hover del sistema central */

.coi-page .coi-nodo-central:hover {
    background: var(--coi-bg-light);
    border-color: var(--coi-cyan-bright);

    box-shadow:
        0 0 25px rgba(0, 163, 224, 0.40),
        0 0 45px rgba(0, 163, 224, 0.20);
}

/* Accesibilidad con teclado */

.coi-page .coi-nodo:focus-visible {
    outline: 3px solid var(--coi-cyan-bright);
    outline-offset: 4px;
}

/* ==========================================
   RESPONSIVE - TABLETS
========================================== */

@media (max-width: 768px) {

    .coi-page .coi-mapa-integracion {
        height: 470px;
    }

    .coi-page .coi-nodo {
        width: 105px;
        min-height: 95px;
        padding: 10px;
    }

    .coi-page .coi-nodo img {
        height: 38px;
    }

    .coi-page .coi-nodo span {
        font-size: 0.72rem;
    }

    .coi-page .coi-nodo-central {
        width: 125px;
        min-height: 115px;
    }

    .coi-page .coi-nodo-central img {
        height: 50px;
    }
}

/* ==========================================
   RESPONSIVE - CELULARES
========================================== */

@media (max-width: 480px) {

    .coi-page .coi-mapa-integracion {
        height: auto;
        max-width: 100%;
        margin: 20px auto 0;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        padding: 20px 0;
    }

    /* Ocultar conexiones en móviles */

    .coi-page .coi-mapa-integracion > svg.coi-conexiones {
        display: none;
    }

    /* Nodos dentro del grid */

    .coi-page .coi-nodo {
        position: static;
        transform: none;
        width: 100%;
        min-height: 105px;
    }

    /* COI en la primera fila */

    .coi-page .coi-nodo-central {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
        width: 160px;
        min-height: 125px;
    }

    .coi-page .coi-nodo img {
        height: 42px;
    }

    .coi-page .coi-nodo-central img {
        height: 55px;
    }
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

@media (prefers-reduced-motion: reduce) {

    .coi-page .coi-conexiones path.coi-linea {
        animation: none;
    }

    .coi-page .coi-nodo {
        transition: none;
    }
}





/* ==========================================
   ASPEL COI - CORRECCIÓN GLOBAL DE COLORES
========================================== */

.coi-page {
    --coi-cyan-bright: #00A3E0;
    --coi-blue-dark: #2C3E50;
    --coi-calc-gray: #95A5A6;
    --coi-bg-light: #F4F8FA;
}

/* ==========================================
   HERO - PRESENTACIÓN
========================================== */

.coi-page .sae-hero {
    background: linear-gradient(
        135deg,
        var(--coi-blue-dark),
        var(--coi-cyan-bright)
    );
}

.coi-page .sae-hero h1,
.coi-page .sae-hero p {
    color: #ffffff;
}

/* ==========================================
   INFORMACIÓN Y BENEFICIOS
========================================== */

.coi-page .sae-descripcion h2,
.coi-page .sae-descripcion h3 {
    color: var(--coi-blue-dark);
}

.coi-page .sae-funciones strong {
    color: var(--coi-cyan-bright);
}

.coi-page .sae-funciones li {
    border-left-color: var(--coi-cyan-bright);
}

/* ==========================================
   ECOSISTEMA
========================================== */

.coi-page .coi-ecosistema {
    background: var(--coi-bg-light);
}

.coi-page .coi-ecosistema .sae-ecosistema-header h2 {
    color: var(--coi-blue-dark);
}

.coi-page .coi-ecosistema .sae-ecosistema-header p {
    color: var(--coi-blue-dark);
}

.coi-page .coi-ecosistema .sae-ecosistema-indicacion strong {
    color: var(--coi-cyan-bright);
}

/* Conexiones */

.coi-page .coi-conexiones .coi-linea {
    stroke: var(--coi-cyan-bright);
}

/* Tarjetas */

.coi-page .coi-nodo {
    color: var(--coi-blue-dark);
    border-color: var(--coi-calc-gray);
}

.coi-page .coi-nodo-central {
    border-color: var(--coi-cyan-bright);
}

.coi-page .coi-nodo:not(.coi-nodo-central):hover {
    border-color: var(--coi-cyan-bright);
    background: var(--coi-bg-light);
    box-shadow: 0 0 25px rgba(0, 163, 224, 0.25);
}

/* ==========================================
   SOPORTE TÉCNICO
========================================== */

.coi-page .sae-soporte-section {
    background: var(--coi-bg-light);
}

.coi-page .sae-soporte-card {
    border-left-color: var(--coi-cyan-bright);
}

.coi-page .sae-soporte-icono {
    background: #EAF8FD;
    color: var(--coi-cyan-bright);
}

.coi-page .sae-soporte-etiqueta {
    color: var(--coi-cyan-bright);
}

.coi-page .sae-soporte-titulos h2 {
    color: var(--coi-blue-dark);
}

.coi-page .sae-soporte-servicios i {
    color: var(--coi-cyan-bright);
}

.coi-page .sae-soporte-servicios span {
    color: var(--coi-blue-dark);
    border-color: var(--coi-calc-gray);
}

.coi-page .sae-soporte-servicios span:hover {
    border-color: var(--coi-cyan-bright);
    background: var(--coi-bg-light);
}

/* Botón WhatsApp: conservar su identidad verde */

.coi-page .btn-sae-soporte {
    background: #16A34A;
    color: #ffffff;
}

.coi-page .btn-sae-soporte:hover {
    background: #12813B;
}

/* ==========================================
   COI - RESPLANDOR SEGÚN CADA LOGOTIPO
========================================== */

/* SAE - ROJO */

.coi-page .coi-nodo.coi-nodo-sae:hover {
    border-color: #F20530;
    background: #ffffff;

    box-shadow:
        0 0 20px rgba(242, 5, 48, 0.50),
        0 0 40px rgba(242, 5, 48, 0.30),
        0 0 60px rgba(242, 5, 48, 0.15);
}

/* NOI - NARANJA */

.coi-page .coi-nodo.coi-nodo-noi:hover {
    border-color: #FF8000;
    background: #ffffff;

    box-shadow:
        0 0 20px rgba(255, 128, 0, 0.50),
        0 0 40px rgba(255, 128, 0, 0.30),
        0 0 60px rgba(255, 128, 0, 0.15);
}

/* BANCO - VERDE */

.coi-page .coi-nodo.coi-nodo-banco:hover {
    border-color: #83D500;
    background: #ffffff;

    box-shadow:
        0 0 20px rgba(131, 213, 0, 0.50),
        0 0 40px rgba(131, 213, 0, 0.30),
        0 0 60px rgba(131, 213, 0, 0.15);
}

/* SIIGO NUBE - AZUL */

.coi-page .coi-nodo.coi-nodo-nube:hover {
    border-color: #00A3E0;
    background: #ffffff;

    box-shadow:
        0 0 20px rgba(0, 163, 224, 0.50),
        0 0 40px rgba(0, 163, 224, 0.30),
        0 0 60px rgba(0, 163, 224, 0.15);
}

/* SIIGO FISCAL - AZUL */

.coi-page .coi-nodo.coi-nodo-fiscal:hover {
    border-color: #00A3E0;
    background: #ffffff;

    box-shadow:
        0 0 20px rgba(0, 163, 224, 0.50),
        0 0 40px rgba(0, 163, 224, 0.30),
        0 0 60px rgba(0, 163, 224, 0.15);
}

/* CAJA - AMARILLO */

.coi-page .coi-nodo.coi-nodo-caja:hover {
    border-color: #F5BD00;
    background: #ffffff;

    box-shadow:
        0 0 20px rgba(245, 189, 0, 0.50),
        0 0 40px rgba(245, 189, 0, 0.30),
        0 0 60px rgba(245, 189, 0, 0.15);
}

/* COI CENTRAL - CIAN */

.coi-page .coi-nodo.coi-nodo-central:hover {
    border-color: #00A3E0;
    background: #F4F8FA;

    box-shadow:
        0 0 20px rgba(0, 163, 224, 0.50),
        0 0 40px rgba(0, 163, 224, 0.30),
        0 0 60px rgba(0, 163, 224, 0.15);
}

/* Transición suave */

.coi-page .coi-nodo {
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.35s ease;
}


















/* ==========================================
   ASPEL NOI - VARIABLES Y COLORES
========================================== */

.noi-page {
    --noi-accent: #F58220;
    --noi-dark: #56351f;
    --noi-light: #fff7ef;
    --noi-muted: #f8f7f5;
}

/* ==========================================
   PRESENTACIÓN
========================================== */

.noi-page .sae-hero {
    background: linear-gradient(
        135deg,
        #a84d12,
        var(--noi-accent)
    );
}

/* ==========================================
   TÍTULOS Y FUNCIONES
========================================== */

.noi-page .sae-descripcion h2,
.noi-page .sae-descripcion h3,
.noi-page .sae-ecosistema-header h2,
.noi-page .sae-soporte-titulos h2 {
    color: var(--noi-dark);
}

.noi-page .sae-funciones strong,
.noi-page .sae-soporte-etiqueta,
.noi-page .sae-soporte-servicios i {
    color: var(--noi-accent);
}

.noi-page .sae-funciones li {
    border-left-color: var(--noi-accent);
}

/* ==========================================
   FONDOS
========================================== */

.noi-page .noi-ecosistema,
.noi-page .sae-soporte-section {
    background: var(--noi-muted);
}

/* ==========================================
   SOPORTE TÉCNICO
========================================== */

.noi-page .sae-soporte-card {
    border-left-color: var(--noi-accent);
}

.noi-page .sae-soporte-icono {
    background: var(--noi-light);
    color: var(--noi-accent);
}

/* REGLA COMPARTIDA CON OTROS SISTEMAS */

.noi-page .sae-soporte-servicios,
.banco-page .sae-soporte-servicios,
.facture-page .sae-soporte-servicios,
.siigonube-page .sae-soporte-servicios,
.noiasistente-page .sae-soporte-servicios,
.siigofiscal-page .sae-soporte-servicios,
.aspelcaja-page .sae-soporte-servicios,
.adm-page .sae-soporte-servicios,
.prod-page .sae-soporte-servicios {
    justify-content: center;
    align-items: center;
}

.noi-page .sae-soporte-accion {
    align-items: center;
}

.noi-page .sae-soporte-accion p {
    text-align: center;
}

/* BOTÓN WHATSAPP */

.noi-page .btn-sae-soporte {
    background: #16a34a;
    color: white;
}

.noi-page .btn-sae-soporte:hover {
    background: #12813b;
}

/* ==========================================
   ECOSISTEMA NOI - 3 CONEXIONES
========================================== */

.noi-page .noi-mapa-integracion {
    position: relative;
    width: 100%;
    max-width: 1050px;
    height: 560px;
    margin: 30px auto;
    isolation: isolate;
}

/* ==========================================
   LÍNEAS DE CONEXIÓN
========================================== */

/* REGLA COMPARTIDA CON OTROS SISTEMAS */

.noi-page .noi-conexiones,
.siigonube-page .siigonube-conexiones,
.noiasistente-page .noiasistente-conexiones,
.siigofiscal-page .siigofiscal-conexiones,
.aspelcaja-page .aspelcaja-conexiones,
.prod-page .prod-conexiones {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

/* LÍNEAS NARANJAS ANIMADAS */

.noi-page .noi-linea {
    fill: none;
    stroke: var(--noi-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 7;
    animation: noi-flujo 12s linear infinite;
}

@keyframes noi-flujo {
    to {
        stroke-dashoffset: -340;
    }
}

/* ==========================================
   TARJETAS DEL ECOSISTEMA
========================================== */

.noi-page .noi-nodo {
    position: absolute;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
    width: 145px;
    min-height: 115px;
    padding: 15px;

    background: #ffffff;
    border: 2px solid #d8d2cc;
    border-radius: 18px;

    text-decoration: none;
    text-align: center;
    color: var(--noi-dark);
    font-weight: 700;

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

    transition:
        border-color 0.3s ease,
        box-shadow 0.35s ease,
        background-color 0.3s ease;
}

/* TAMAÑO DEL TEXTO - REGLA COMPARTIDA */

.noi-page .noi-nodo span,
.banco-page .banco-nodo span,
.facture-page .facture-nodo span,
.siigonube-page .siigonube-nodo span,
.noiasistente-page .noiasistente-nodo span,
.siigofiscal-page .siigofiscal-nodo span,
.aspelcaja-page .aspelcaja-nodo span,
.adm-page .adm-nodo span,
.prod-page .prod-nodo span {
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ==========================================
   ASPEL NOI - NODO CENTRAL
========================================== */

.noi-page .noi-nodo-central {
    left: 50%;
    top: 50%;

    width: 165px;
    min-height: 135px;

    border-color: var(--noi-accent);
    background: var(--noi-light);

    box-shadow:
        0 0 25px rgba(245, 130, 32, 0.20);
}

.noi-page .noi-nodo-central img {
    height: 65px;
}

/* ==========================================
   POSICIONES Y COLORES INDIVIDUALES
========================================== */

/* ==========================================
   SAE - ROJO
   REGLA COMPARTIDA
   NOI YA NO INCLUYE SAE
========================================== */

.banco-page .banco-nodo-sae,
.facture-page .facture-nodo-sae,
.siigonube-page .siigonube-nodo-sae,
.aspelcaja-page .aspelcaja-nodo-sae,
.adm-page .adm-nodo-sae,
.prod-page .prod-nodo-sae {
    left: 25%;
    top: 26%;

    --glow: 242, 5, 48;
    --border: #F20530;
}

/* ==========================================
   COI - ARRIBA
========================================== */

/* REGLA COMPARTIDA CON OTROS SISTEMAS */

.noi-page .noi-nodo-coi,
.banco-page .banco-nodo-coi,
.facture-page .facture-nodo-coi,
.siigonube-page .siigonube-nodo-coi,
.aspelcaja-page .aspelcaja-nodo-coi,
.adm-page .adm-nodo-coi,
.prod-page .prod-nodo-coi {
    left: 50%;
    top: 15%;

    --glow: 0, 163, 224;
    --border: #00A3E0;
}

/* ==========================================
   BANCO - IZQUIERDA
========================================== */

.noi-page .noi-nodo-banco {
    left: 25%;
    top: 50%;

    --glow: 131, 213, 0;
    --border: #83D500;
}

/* ==========================================
   NOI ASISTENTE - DERECHA
========================================== */

.noi-page .noi-nodo-asistente {
    left: 75%;
    top: 50%;

    --glow: 245, 130, 32;
    --border: #F58220;
}

/* ==========================================
   REGLA COMPARTIDA DE SIIGO FISCAL
   NOI YA NO INCLUYE SIIGO FISCAL
========================================== */

.banco-page .banco-nodo-fiscal,
.siigofiscal-page .siigofiscal-nodo-nube,
.adm-page .adm-nodo-nube {
    left: 50%;
    top: 85%;

    --glow: 0, 163, 224;
    --border: #00A3E0;
}

/* ==========================================
   RESPLANDOR SEGÚN CADA LOGOTIPO
========================================== */

/* NODOS PERIFÉRICOS */

.noi-page .noi-nodo:not(.noi-nodo-central):hover {
    background: #ffffff;
    border-color: var(--border);

    box-shadow:
        0 0 20px rgba(var(--glow), 0.50),
        0 0 40px rgba(var(--glow), 0.25);
}

/* RESPLANDOR NOI CENTRAL */

.noi-page .noi-nodo-central:hover {
    border-color: var(--noi-accent);

    box-shadow:
        0 0 20px rgba(245, 130, 32, 0.50),
        0 0 40px rgba(245, 130, 32, 0.25);
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

.noi-page .noi-nodo:focus-visible {
    outline: 3px solid var(--noi-accent);
    outline-offset: 4px;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 768px) {

    .noi-page .noi-mapa-integracion {
        height: 470px;
    }

    .noi-page .noi-nodo {
        width: 105px;
        min-height: 95px;
        padding: 10px;
    }

    .noi-page .noi-nodo img {
        height: 38px;
    }

    .noi-page .noi-nodo span {
        font-size: 0.72rem;
    }

    .noi-page .noi-nodo-central {
        width: 125px;
        min-height: 115px;
    }

    .noi-page .noi-nodo-central img {
        height: 50px;
    }
}

/* ==========================================
   RESPONSIVE - MÓVIL
========================================== */

@media (max-width: 480px) {

    .noi-page .noi-mapa-integracion {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        padding: 20px 0;
    }

    /* OCULTAR CONEXIONES EN CELULAR */

    .noi-page .noi-conexiones {
        display: none;
    }

    /* TARJETAS EN CUADRÍCULA */

    .noi-page .noi-nodo {
        position: static;
        transform: none;
        width: 100%;
        min-height: 105px;
    }

    /* NOI CENTRAL - PRIMERA FILA */

    .noi-page .noi-nodo-central {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;

        width: 160px;
        min-height: 125px;
    }

    /* NOI ASISTENTE - ÚLTIMA FILA */

    .noi-page .noi-nodo-asistente {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, 180px);
    }

    /* BOTÓN DE SOPORTE */

    .noi-page .btn-sae-soporte {
        width: 100%;
        max-width: 350px;
    }
}

/* ==========================================
   MOVIMIENTO REDUCIDO
========================================== */

@media (prefers-reduced-motion: reduce) {

    .noi-page .noi-linea {
        animation: none;
    }

    .noi-page .noi-nodo {
        transition: none;
    }
}







/* ==========================================
   REVEAL SCROLL GLOBAL
   PÁGINAS DE SISTEMAS ASPEL
========================================== */

/* Estado inicial: antes de aparecer */
.sae-page > section:not(:first-child).reveal-scroll {
    opacity: 0;
    transform: translateY(45px);

    transition:
        opacity 0.85s ease,
        transform 0.85s ease;
}

/* Estado visible: cuando entra en pantalla */
.sae-page > section:not(:first-child).reveal-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {

    .sae-page > section:not(:first-child).reveal-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}








/* ==========================================
   ASPEL BANCO - COLORES
========================================== */

.banco-page {
    --banco-green: #83D500;
    --banco-dark: #365019;
    --banco-light: #F5FBEA;
    --banco-bg: #F8FAF5;
}

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

.banco-page .sae-hero {
    background: linear-gradient(
        135deg,
        #365019 0%,
        #5E9D12 55%,
        #83D500 100%
    );
}

/* ==========================================
   INFORMACIÓN Y FUNCIONES
========================================== */

.banco-page .sae-descripcion h2,
.banco-page .sae-descripcion h3 {
    color: var(--banco-dark);
}

.banco-page .sae-funciones strong {
    color: #5E9D12;
}

.banco-page .sae-funciones li {
    border-left-color: var(--banco-green);
}

/* ==========================================
   ECOSISTEMA
========================================== */

.banco-page .banco-ecosistema {
    background: var(--banco-bg);
}

.banco-page .sae-ecosistema-header h2 {
    color: var(--banco-dark);
}

.banco-page .sae-ecosistema-indicacion strong {
    color: #5E9D12;
}

/* ==========================================
   MAPA DE INTEGRACIÓN
   BANCO + SAE + COI
========================================== */

.banco-page .banco-mapa-integracion {
    position: relative;
    width: 100%;
    max-width: 1050px;
    height: 400px;
    margin: 30px auto;
    isolation: isolate;
    overflow: visible;
}

/* ==========================================
   LÍNEAS DE CONEXIÓN
========================================== */

.banco-page .banco-conexiones {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

.banco-page .banco-linea {
    fill: none;
    stroke: var(--banco-green);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 7;
    animation: banco-flujo 12s linear infinite;
}

@keyframes banco-flujo {
    to {
        stroke-dashoffset: -340;
    }
}

/* ==========================================
   TARJETAS DE SISTEMAS
========================================== */

.banco-page .banco-nodo {
    position: absolute;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
    width: 145px;
    min-height: 115px;
    padding: 15px;

    background: #FFFFFF;
    border: 2px solid #D9E1D3;
    border-radius: 18px;

    color: #2C3E50;
    text-align: center;
    text-decoration: none;
    font-weight: 700;

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

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.35s ease;
}

/* LOGOTIPOS */

.banco-page .banco-nodo img {
    display: block;
    max-width: 100%;
    height: 55px;
    object-fit: contain;
}

/* TEXTO */

.banco-page .banco-nodo span {
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ==========================================
   BANCO - NODO CENTRAL
========================================== */

.banco-page .banco-nodo-central {
    left: 50%;
    top: 50%;

    width: 165px;
    min-height: 135px;

    background: var(--banco-light);
    border-color: var(--banco-green);

    box-shadow:
        0 0 25px rgba(131, 213, 0, 0.20);
}

.banco-page .banco-nodo-central img {
    height: 65px;
}

/* ==========================================
   SAE - IZQUIERDA
========================================== */

.banco-page .banco-nodo-sae {
    left: 25%;
    top: 50%;

    --glow: 242, 5, 48;
    --border: #F20530;
}

/* ==========================================
   COI - DERECHA
========================================== */

.banco-page .banco-nodo-coi {
    left: 75%;
    top: 50%;

    --glow: 0, 163, 224;
    --border: #00A3E0;
}

/* ==========================================
   RESPLANDOR INDIVIDUAL
========================================== */

/* REGLA COMPARTIDA CON OTROS SISTEMAS */

.banco-page .banco-nodo:not(.banco-nodo-central):hover,
.facture-page .facture-nodo:not(.facture-nodo-central):hover,
.adm-page .adm-nodo:not(.adm-nodo-central):hover,
.prod-page .prod-nodo:not(.prod-nodo-central):hover {
    background: #FFFFFF;
    border-color: var(--border);

    box-shadow:
        0 0 20px rgba(var(--glow), 0.50),
        0 0 40px rgba(var(--glow), 0.30),
        0 0 60px rgba(var(--glow), 0.15);
}

/* ==========================================
   RESPLANDOR BANCO CENTRAL
========================================== */

.banco-page .banco-nodo-central:hover {
    border-color: var(--banco-green);

    box-shadow:
        0 0 20px rgba(131, 213, 0, 0.50),
        0 0 40px rgba(131, 213, 0, 0.30),
        0 0 60px rgba(131, 213, 0, 0.15);
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

.banco-page .banco-nodo:focus-visible {
    outline: 3px solid var(--banco-green);
    outline-offset: 4px;
}

/* ==========================================
   SOPORTE TÉCNICO
========================================== */

.banco-page .sae-soporte-section {
    background: var(--banco-bg);
}

.banco-page .sae-soporte-card {
    border-left-color: var(--banco-green);
}

.banco-page .sae-soporte-icono {
    background: var(--banco-light);
    color: #5E9D12;
}

.banco-page .sae-soporte-titulos h2 {
    color: var(--banco-dark);
}

.banco-page .sae-soporte-etiqueta,
.banco-page .sae-soporte-servicios i {
    color: #5E9D12;
}

.banco-page .sae-soporte-accion {
    align-items: center;
}

.banco-page .sae-soporte-accion p {
    text-align: center;
}

/* ==========================================
   BOTÓN WHATSAPP
========================================== */

/* REGLA COMPARTIDA CON OTROS SISTEMAS */

.banco-page .btn-sae-soporte,
.facture-page .btn-sae-soporte,
.siigonube-page .btn-sae-soporte,
.noiasistente-page .btn-sae-soporte,
.siigofiscal-page .btn-sae-soporte,
.aspelcaja-page .btn-sae-soporte,
.adm-page .btn-sae-soporte,
.prod-page .btn-sae-soporte {
    background: #16A34A;
    color: #FFFFFF;
}

.banco-page .btn-sae-soporte:hover {
    background: #12813B;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 768px) {

    .banco-page .banco-mapa-integracion {
        height: 350px;
    }

    .banco-page .banco-nodo {
        width: 105px;
        min-height: 95px;
        padding: 10px;
    }

    .banco-page .banco-nodo img {
        height: 38px;
    }

    .banco-page .banco-nodo span {
        font-size: 0.72rem;
    }

    .banco-page .banco-nodo-central {
        width: 125px;
        min-height: 115px;
    }

    .banco-page .banco-nodo-central img {
        height: 50px;
    }
}

/* ==========================================
   RESPONSIVE - MÓVIL
========================================== */

@media (max-width: 480px) {

    .banco-page .banco-mapa-integracion {
        height: auto;
        min-height: 0;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        padding: 20px 0;
    }

    /* OCULTAR LÍNEAS EN CELULAR */

    .banco-page .banco-conexiones {
        display: none;
    }

    /* TARJETAS EN CUADRÍCULA */

    .banco-page .banco-nodo {
        position: static;
        transform: none;
        width: 100%;
        min-height: 105px;
    }

    /* BANCO PRIMERO Y CENTRADO */

    .banco-page .banco-nodo-central {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;

        width: 160px;
        min-height: 125px;
    }

    /* SAE - SEGUNDA FILA IZQUIERDA */

    .banco-page .banco-nodo-sae {
        grid-column: 1;
        grid-row: 2;
    }

    /* COI - SEGUNDA FILA DERECHA */

    .banco-page .banco-nodo-coi {
        grid-column: 2;
        grid-row: 2;
    }

    /* BOTÓN DE SOPORTE */

    .banco-page .btn-sae-soporte {
        width: 100%;
        max-width: 350px;
    }
}

/* ==========================================
   MOVIMIENTO REDUCIDO
========================================== */

@media (prefers-reduced-motion: reduce) {

    .banco-page .banco-linea {
        animation: none;
    }

    .banco-page .banco-nodo {
        transition: none;
    }
}


























/* ==========================================
   ASPEL FACTURE - VARIABLES
========================================== */

.facture-page {
    --facture-primary: #8246AF;
    --facture-dark: #4E286D;
    --facture-light: #F6F0FA;
    --facture-bg: #FAF8FC;
}

/* ==========================================
   HERO
========================================== */

.facture-page .sae-hero {
    background: linear-gradient(
        135deg,
        #45205F 0%,
        #8246AF 60%,
        #A56DCE 100%
    );
}

/* ==========================================
   INFORMACIÓN Y FUNCIONES
========================================== */

.facture-page .sae-descripcion h2,
.facture-page .sae-descripcion h3 {
    color: var(--facture-dark);
}

.facture-page .sae-funciones strong {
    color: var(--facture-primary);
}

.facture-page .sae-funciones li {
    border-left-color: var(--facture-primary);
}

/* ==========================================
   ECOSISTEMA
========================================== */

.facture-page .facture-ecosistema {
    background: var(--facture-bg);
}

.facture-page .sae-ecosistema-header h2 {
    color: var(--facture-dark);
}

.facture-page .sae-ecosistema-indicacion strong {
    color: var(--facture-primary);
}

/* CONTENEDOR CIRCULAR */



/* LÍNEAS MORADAS */

.facture-page .facture-conexiones {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.facture-page .facture-linea {
    fill: none;
    stroke: var(--facture-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 7;
    animation: facture-flujo 12s linear infinite;
}

@keyframes facture-flujo {
    to {
        stroke-dashoffset: -340;
    }
}

/* ==========================================
   TARJETAS
========================================== */

.facture-page .facture-nodo {
    position: absolute;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
    width: 145px;
    min-height: 115px;
    padding: 15px;

    background: #FFFFFF;
    border: 2px solid #E0D7E7;
    border-radius: 18px;

    color: #2C3E50;
    text-decoration: none;
    text-align: center;
    font-weight: 700;

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

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.35s ease;
}





/* ==========================================
   FACTURE CENTRAL
========================================== */

.facture-page .facture-nodo-central {
    left: 50%;
    top: 50%;

    width: 165px;
    min-height: 135px;

    background: var(--facture-light);
    border-color: var(--facture-primary);

    box-shadow:
        0 0 25px rgba(130, 70, 175, 0.20);
}

.facture-page .facture-nodo-central img {
    height: 65px;
}

/* ==========================================
   POSICIONES Y COLORES DE SISTEMAS
========================================== */

/* SAE - ROJO */



/* COI - AZUL */



/* NOI - NARANJA */



/* BANCO - VERDE */


.facture-page .facture-nodo-banco,
.siigonube-page .siigonube-nodo-banco,
.noiasistente-page .noiasistente-nodo-banco,
.aspelcaja-page .aspelcaja-nodo-banco {
    left: 25%;
    top: 74%;

    --glow: 131, 213, 0;
    --border: #83D500;
}

/* CAJA - AMARILLO */

.facture-page .facture-nodo-caja {
    left: 50%;
    top: 85%;

    --glow: 245, 189, 0;
    --border: #F5BD00;
}

/* SIIGO NUBE - AZUL */


.facture-page .facture-nodo-nube,
.siigonube-page .siigonube-nodo-fiscal,
.noiasistente-page .noiasistente-nodo-nube,
.aspelcaja-page .aspelcaja-nodo-nube,
.adm-page .adm-nodo-fiscal,
.prod-page .prod-nodo-nube {
    left: 75%;
    top: 74%;

    --glow: 0, 163, 224;
    --border: #00A3E0;
}

/* ==========================================
   RESPLANDOR INDIVIDUAL
========================================== */



/* FACTURE CENTRAL - MORADO */

.facture-page .facture-nodo-central:hover {
    border-color: var(--facture-primary);

    box-shadow:
        0 0 20px rgba(130, 70, 175, 0.50),
        0 0 40px rgba(130, 70, 175, 0.30),
        0 0 60px rgba(130, 70, 175, 0.15);
}

.facture-page .facture-nodo:focus-visible {
    outline: 3px solid var(--facture-primary);
    outline-offset: 4px;
}

/* ==========================================
   SOPORTE TÉCNICO
========================================== */

.facture-page .sae-soporte-section {
    background: var(--facture-bg);
}

.facture-page .sae-soporte-card {
    border-left-color: var(--facture-primary);
}

.facture-page .sae-soporte-icono {
    background: var(--facture-light);
    color: var(--facture-primary);
}

.facture-page .sae-soporte-titulos h2 {
    color: var(--facture-dark);
}

.facture-page .sae-soporte-etiqueta,
.facture-page .sae-soporte-servicios i {
    color: var(--facture-primary);
}



.facture-page .sae-soporte-accion {
    align-items: center;
}

.facture-page .sae-soporte-accion p {
    text-align: center;
}

/* WHATSAPP */



.facture-page .btn-sae-soporte:hover {
    background: #12813B;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 768px) {

    .facture-page .facture-mapa-integracion {
        height: 470px;
    }

    .facture-page .facture-nodo {
        width: 105px;
        min-height: 95px;
        padding: 10px;
    }

    .facture-page .facture-nodo img {
        height: 38px;
    }

    .facture-page .facture-nodo span {
        font-size: 0.72rem;
    }

    .facture-page .facture-nodo-central {
        width: 125px;
        min-height: 115px;
    }

    .facture-page .facture-nodo-central img {
        height: 50px;
    }
}

/* ==========================================
   RESPONSIVE - MÓVIL
========================================== */

@media (max-width: 480px) {

    .facture-page .facture-mapa-integracion {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        padding: 20px 0;
    }

    .facture-page .facture-conexiones {
        display: none;
    }

    .facture-page .facture-nodo {
        position: static;
        transform: none;
        width: 100%;
        min-height: 105px;
    }

    .facture-page .facture-nodo-central {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;

        width: 160px;
        min-height: 125px;
    }

    .facture-page .btn-sae-soporte {
        width: 100%;
        max-width: 350px;
    }
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

@media (prefers-reduced-motion: reduce) {

    .facture-page .facture-linea {
        animation: none;
    }

    .facture-page .facture-nodo {
        transition: none;
    }
}







/* ==========================================
   SIIGO NUBE - PALETA DE COLORES
========================================== */

.siigonube-page {
    --nube-cyan: #00A3E0;
    --nube-dark: #174A72;
    --nube-light: #EAF8FE;
    --nube-bg: #F4FAFD;
}

/* ==========================================
   HERO
========================================== */

.siigonube-page .sae-hero {
    background: linear-gradient(
        135deg,
        #123E65 0%,
        #007DAE 55%,
        #00A3E0 100%
    );
}

/* ==========================================
   INFORMACIÓN Y FUNCIONES
========================================== */

.siigonube-page .sae-descripcion h2,
.siigonube-page .sae-descripcion h3 {
    color: var(--nube-dark);
}

.siigonube-page .sae-funciones strong {
    color: #0086BC;
}

.siigonube-page .sae-funciones li {
    border-left-color: var(--nube-cyan);
}

/* ==========================================
   ECOSISTEMA
========================================== */

.siigonube-page .siigonube-ecosistema {
    background: var(--nube-bg);
}

.siigonube-page .sae-ecosistema-header h2 {
    color: var(--nube-dark);
}

.siigonube-page .sae-ecosistema-indicacion strong {
    color: #0086BC;
}

/* ==========================================
   MAPA CIRCULAR
========================================== */



/* LÍNEAS AZULES */



.siigonube-page .siigonube-linea {
    fill: none;
    stroke: var(--nube-cyan);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 7;
    animation: siigonube-flujo 12s linear infinite;
}

@keyframes siigonube-flujo {
    to {
        stroke-dashoffset: -340;
    }
}

/* ==========================================
   TARJETAS DE SISTEMAS
========================================== */

.siigonube-page .siigonube-nodo {
    position: absolute;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
    width: 145px;
    min-height: 115px;
    padding: 15px;

    background: #FFFFFF;
    border: 2px solid #D7E8EF;
    border-radius: 18px;

    color: #2C3E50;
    text-align: center;
    text-decoration: none;
    font-weight: 700;

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

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.35s ease;
}





/* ==========================================
   SIIGO NUBE CENTRAL
========================================== */

.siigonube-page .siigonube-nodo-central {
    left: 50%;
    top: 50%;

    width: 165px;
    min-height: 135px;

    background: var(--nube-light);
    border-color: var(--nube-cyan);

    box-shadow:
        0 0 25px rgba(0, 163, 224, 0.20);
}

.siigonube-page .siigonube-nodo-central img {
    height: 65px;
}

/* ==========================================
   POSICIONES Y COLORES INDIVIDUALES
========================================== */

/* SAE - ROJO */



/* COI - AZUL */



/* NOI - NARANJA */



/* BANCO - VERDE */



/* FACTURE - MORADO */


.siigonube-page .siigonube-nodo-facture,
.noiasistente-page .noiasistente-nodo-facture,
.aspelcaja-page .aspelcaja-nodo-facture,
.prod-page .prod-nodo-facture {
    left: 50%;
    top: 85%;

    --glow: 130, 70, 175;
    --border: #8246AF;
}

/* SIIGO FISCAL - AZUL */



/* ==========================================
   RESPLANDOR DE CADA LOGOTIPO
========================================== */

.siigonube-page
.siigonube-nodo:not(.siigonube-nodo-central):hover {
    background: #FFFFFF;
    border-color: var(--border);

    box-shadow:
        0 0 20px rgba(var(--glow), 0.50),
        0 0 40px rgba(var(--glow), 0.30),
        0 0 60px rgba(var(--glow), 0.15);
}

/* RESPLANDOR SIIGO NUBE CENTRAL */

.siigonube-page .siigonube-nodo-central:hover {
    border-color: var(--nube-cyan);

    box-shadow:
        0 0 20px rgba(0, 163, 224, 0.50),
        0 0 40px rgba(0, 163, 224, 0.30),
        0 0 60px rgba(0, 163, 224, 0.15);
}

/* ACCESIBILIDAD */

.siigonube-page .siigonube-nodo:focus-visible {
    outline: 3px solid var(--nube-cyan);
    outline-offset: 4px;
}

/* ==========================================
   SOPORTE TÉCNICO
========================================== */

.siigonube-page .sae-soporte-section {
    background: var(--nube-bg);
}

.siigonube-page .sae-soporte-card {
    border-left-color: var(--nube-cyan);
}

.siigonube-page .sae-soporte-icono {
    background: var(--nube-light);
    color: var(--nube-cyan);
}

.siigonube-page .sae-soporte-titulos h2 {
    color: var(--nube-dark);
}

.siigonube-page .sae-soporte-etiqueta,
.siigonube-page .sae-soporte-servicios i {
    color: #0086BC;
}



.siigonube-page .sae-soporte-accion {
    align-items: center;
}

.siigonube-page .sae-soporte-accion p {
    text-align: center;
}

/* BOTÓN WHATSAPP */



.siigonube-page .btn-sae-soporte:hover {
    background: #12813B;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 768px) {

    .siigonube-page .siigonube-mapa-integracion {
        height: 470px;
    }

    .siigonube-page .siigonube-nodo {
        width: 105px;
        min-height: 95px;
        padding: 10px;
    }

    .siigonube-page .siigonube-nodo img {
        height: 38px;
    }

    .siigonube-page .siigonube-nodo span {
        font-size: 0.72rem;
    }

    .siigonube-page .siigonube-nodo-central {
        width: 125px;
        min-height: 115px;
    }

    .siigonube-page .siigonube-nodo-central img {
        height: 50px;
    }
}

/* ==========================================
   RESPONSIVE - MÓVIL
========================================== */

@media (max-width: 480px) {

    .siigonube-page .siigonube-mapa-integracion {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
        padding: 20px 0;
    }

    .siigonube-page .siigonube-conexiones {
        display: none;
    }

    .siigonube-page .siigonube-nodo {
        position: static;
        transform: none;
        width: 100%;
        min-height: 105px;
    }

    .siigonube-page .siigonube-nodo-central {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;

        width: 160px;
        min-height: 125px;
    }

    .siigonube-page .btn-sae-soporte {
        width: 100%;
        max-width: 350px;
    }
}

/* ==========================================
   REDUCCIÓN DE MOVIMIENTO
========================================== */

@media (prefers-reduced-motion: reduce) {

    .siigonube-page .siigonube-linea {
        animation: none;
    }

    .siigonube-page .siigonube-nodo {
        transition: none;
    }
}












/* ==========================================
   NOI ASISTENTE - PALETA
========================================== */

.noiasistente-page {
    --asistente-orange: #F58220;
    --asistente-dark: #673A1B;
    --asistente-light: #FFF4E8;
    --asistente-bg: #FCF8F4;
}

/* ==========================================
   HERO
========================================== */

.noiasistente-page .sae-hero {
    background: linear-gradient(
        135deg,
        #71370D 0%,
        #C96319 55%,
        #F58220 100%
    );
}

/* ==========================================
   INFORMACIÓN
========================================== */

.noiasistente-page .sae-descripcion h2,
.noiasistente-page .sae-descripcion h3 {
    color: var(--asistente-dark);
}

.noiasistente-page .sae-funciones strong {
    color: #D66B16;
}

.noiasistente-page .sae-funciones li {
    border-left-color: var(--asistente-orange);
}

/* ==========================================
   ECOSISTEMA
========================================== */

.noiasistente-page .noiasistente-ecosistema {
    background: var(--asistente-bg);
}

.noiasistente-page .sae-ecosistema-header h2 {
    color: var(--asistente-dark);
}

.noiasistente-page .sae-ecosistema-indicacion strong {
    color: #D66B16;
}

/* ==========================================
   MAPA DE INTEGRACIÓN
   NOI ASISTENTE + NOI
========================================== */

.noiasistente-page .noiasistente-mapa-integracion {
    position: relative;
    width: 100%;
    max-width: 1050px;
    height: 440px;
    margin: 30px auto;
    isolation: isolate;
    overflow: visible;
}

/* ==========================================
   LÍNEA DE CONEXIÓN
========================================== */

.noiasistente-page .noiasistente-conexiones {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

.noiasistente-page .noiasistente-linea {
    fill: none;
    stroke: var(--asistente-orange);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 7;
    animation: asistente-flujo 12s linear infinite;
}

@keyframes asistente-flujo {
    to {
        stroke-dashoffset: -340;
    }
}

/* ==========================================
   TARJETAS DEL ECOSISTEMA
========================================== */

.noiasistente-page .noiasistente-nodo {
    position: absolute;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
    width: 145px;
    min-height: 115px;
    padding: 15px;

    background: #FFFFFF;
    border: 2px solid #E8DCD1;
    border-radius: 18px;

    color: #2C3E50;
    text-align: center;
    text-decoration: none;
    font-weight: 700;

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

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.35s ease;
}

/* IMÁGENES */

.noiasistente-page .noiasistente-nodo img {
    display: block;
    max-width: 100%;
    height: 55px;
    object-fit: contain;
}

/* TEXTO */

.noiasistente-page .noiasistente-nodo span {
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ==========================================
   NOI ASISTENTE - NODO CENTRAL
========================================== */

.noiasistente-page .noiasistente-nodo-central {
    left: 50%;
    top: 50%;

    width: 165px;
    min-height: 135px;

    background: var(--asistente-light);
    border-color: var(--asistente-orange);

    box-shadow:
        0 0 25px rgba(245, 130, 32, 0.20);
}

.noiasistente-page .noiasistente-nodo-central img {
    height: 65px;
}

/* ==========================================
   ASPEL NOI - ARRIBA
========================================== */

.noiasistente-page .noiasistente-nodo-noi {
    left: 50%;
    top: 15%;

    --glow: 245, 130, 32;
    --border: #F58220;
}

/* ==========================================
   RESPLANDOR NOI
========================================== */

.noiasistente-page
.noiasistente-nodo:not(.noiasistente-nodo-central):hover {
    background: #FFFFFF;
    border-color: var(--border);

    box-shadow:
        0 0 20px rgba(var(--glow), 0.50),
        0 0 40px rgba(var(--glow), 0.30),
        0 0 60px rgba(var(--glow), 0.15);
}

/* ==========================================
   RESPLANDOR NOI ASISTENTE
========================================== */

.noiasistente-page .noiasistente-nodo-central:hover {
    border-color: var(--asistente-orange);

    box-shadow:
        0 0 20px rgba(245, 130, 32, 0.50),
        0 0 40px rgba(245, 130, 32, 0.30),
        0 0 60px rgba(245, 130, 32, 0.15);
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

.noiasistente-page .noiasistente-nodo:focus-visible {
    outline: 3px solid var(--asistente-orange);
    outline-offset: 4px;
}

/* ==========================================
   SOPORTE TÉCNICO
========================================== */

.noiasistente-page .sae-soporte-section {
    background: var(--asistente-bg);
}

.noiasistente-page .sae-soporte-card {
    border-left-color: var(--asistente-orange);
}

.noiasistente-page .sae-soporte-icono {
    background: var(--asistente-light);
    color: var(--asistente-orange);
}

.noiasistente-page .sae-soporte-titulos h2 {
    color: var(--asistente-dark);
}

.noiasistente-page .sae-soporte-etiqueta,
.noiasistente-page .sae-soporte-servicios i {
    color: #D66B16;
}

.noiasistente-page .sae-soporte-accion {
    align-items: center;
}

.noiasistente-page .sae-soporte-accion p {
    text-align: center;
}

/* ==========================================
   WHATSAPP
========================================== */

.noiasistente-page .btn-sae-soporte {
    background: #16A34A;
    color: #FFFFFF;
}

.noiasistente-page .btn-sae-soporte:hover {
    background: #12813B;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 768px) {

    .noiasistente-page .noiasistente-mapa-integracion {
        height: 400px;
    }

    .noiasistente-page .noiasistente-nodo {
        width: 120px;
        min-height: 100px;
        padding: 12px;
    }

    .noiasistente-page .noiasistente-nodo img {
        height: 42px;
    }

    .noiasistente-page .noiasistente-nodo span {
        font-size: 0.75rem;
    }

    .noiasistente-page .noiasistente-nodo-central {
        width: 145px;
        min-height: 120px;
    }

    .noiasistente-page .noiasistente-nodo-central img {
        height: 55px;
    }
}

/* ==========================================
   RESPONSIVE - MÓVIL
========================================== */

@media (max-width: 480px) {

    .noiasistente-page .noiasistente-mapa-integracion {
        height: auto;
        min-height: 0;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 22px;
        padding: 20px 0;
    }

    /* OCULTAR LÍNEA EN CELULAR */

    .noiasistente-page .noiasistente-conexiones {
        display: none;
    }

    /* TARJETAS APILADAS */

    .noiasistente-page .noiasistente-nodo {
        position: static;
        transform: none;

        width: 160px;
        min-height: 115px;
        padding: 15px;
    }

    /* NOI ASISTENTE PRIMERO */

    .noiasistente-page .noiasistente-nodo-central {
        order: 1;
        width: 165px;
        min-height: 130px;
    }

    /* NOI DEBAJO */

    .noiasistente-page .noiasistente-nodo-noi {
        order: 2;
    }

    /* SOPORTE */

    .noiasistente-page .btn-sae-soporte {
        width: 100%;
        max-width: 350px;
    }
}

/* ==========================================
   MOVIMIENTO REDUCIDO
========================================== */

@media (prefers-reduced-motion: reduce) {

    .noiasistente-page .noiasistente-linea {
        animation: none;
    }

    .noiasistente-page .noiasistente-nodo {
        transition: none;
    }
}
























/* ==========================================
   SIIGO FISCAL - VARIABLES
========================================== */

.siigofiscal-page {
    --fiscal-primary: #00A3E0;
    --fiscal-dark: #163F62;
    --fiscal-light: #EAF8FD;
    --fiscal-bg: #F5FAFD;
}

/* ==========================================
   HERO
========================================== */

.siigofiscal-page .sae-hero {
    background: linear-gradient(
        135deg,
        #102E4B 0%,
        #126B99 55%,
        #00A3E0 100%
    );
}

/* ==========================================
   INFORMACIÓN Y FUNCIONES
========================================== */

.siigofiscal-page .sae-descripcion h2,
.siigofiscal-page .sae-descripcion h3 {
    color: var(--fiscal-dark);
}

.siigofiscal-page .sae-funciones strong {
    color: #0085B8;
}

.siigofiscal-page .sae-funciones li {
    border-left-color: var(--fiscal-primary);
}

/* ==========================================
   ECOSISTEMA
========================================== */

.siigofiscal-page .siigofiscal-ecosistema {
    background: var(--fiscal-bg);
}

.siigofiscal-page .sae-ecosistema-header h2 {
    color: var(--fiscal-dark);
}

.siigofiscal-page .sae-ecosistema-indicacion strong {
    color: #0085B8;
}

/* ==========================================
   MAPA DE INTEGRACIÓN
   SIIGO FISCAL + COI
========================================== */

.siigofiscal-page .siigofiscal-mapa-integracion {
    position: relative;
    width: 100%;
    max-width: 1050px;
    height: 440px;
    margin: 30px auto;
    isolation: isolate;
    overflow: visible;
}

/* ==========================================
   LÍNEA SVG
========================================== */

.siigofiscal-page .siigofiscal-conexiones {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

/* ==========================================
   CONEXIÓN ANIMADA
========================================== */

.siigofiscal-page .siigofiscal-linea {
    fill: none;
    stroke: var(--fiscal-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 7;
    animation: siigofiscal-flujo 12s linear infinite;
}

@keyframes siigofiscal-flujo {
    to {
        stroke-dashoffset: -340;
    }
}

/* ==========================================
   TARJETAS DEL ECOSISTEMA
========================================== */

.siigofiscal-page .siigofiscal-nodo {
    position: absolute;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
    width: 145px;
    min-height: 115px;
    padding: 15px;

    background: #FFFFFF;
    border: 2px solid #D6E8F0;
    border-radius: 18px;

    color: #2C3E50;
    text-align: center;
    text-decoration: none;
    font-weight: 700;

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

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.35s ease;
}

/* ==========================================
   IMÁGENES
========================================== */

.siigofiscal-page .siigofiscal-nodo img {
    display: block;
    max-width: 100%;
    width: auto;
    height: 55px;
    object-fit: contain;
}

/* ==========================================
   TEXTO DE LAS TARJETAS
========================================== */

.siigofiscal-page .siigofiscal-nodo span {
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ==========================================
   SIIGO FISCAL - NODO CENTRAL
========================================== */

.siigofiscal-page .siigofiscal-nodo-central {
    left: 50%;
    top: 50%;

    width: 165px;
    min-height: 135px;

    background: var(--fiscal-light);
    border-color: var(--fiscal-primary);

    box-shadow:
        0 0 25px rgba(0, 163, 224, 0.20);
}

.siigofiscal-page .siigofiscal-nodo-central img {
    height: 65px;
}

/* ==========================================
   ASPEL COI - ARRIBA
========================================== */

.siigofiscal-page .siigofiscal-nodo-coi {
    left: 50%;
    top: 15%;

    --glow: 0, 163, 224;
    --border: #00A3E0;
}

/* ==========================================
   RESPLANDOR DE COI
========================================== */

.siigofiscal-page
.siigofiscal-nodo:not(.siigofiscal-nodo-central):hover {
    background: #FFFFFF;
    border-color: var(--border);

    box-shadow:
        0 0 20px rgba(var(--glow), 0.50),
        0 0 40px rgba(var(--glow), 0.30),
        0 0 60px rgba(var(--glow), 0.15);
}

/* ==========================================
   RESPLANDOR DE SIIGO FISCAL
========================================== */

.siigofiscal-page .siigofiscal-nodo-central:hover {
    border-color: var(--fiscal-primary);

    box-shadow:
        0 0 20px rgba(0, 163, 224, 0.50),
        0 0 40px rgba(0, 163, 224, 0.30),
        0 0 60px rgba(0, 163, 224, 0.15);
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

.siigofiscal-page .siigofiscal-nodo:focus-visible {
    outline: 3px solid var(--fiscal-primary);
    outline-offset: 4px;
}

/* ==========================================
   SOPORTE TÉCNICO
========================================== */

.siigofiscal-page .sae-soporte-section {
    background: var(--fiscal-bg);
}

.siigofiscal-page .sae-soporte-card {
    border-left-color: var(--fiscal-primary);
}

.siigofiscal-page .sae-soporte-icono {
    background: var(--fiscal-light);
    color: var(--fiscal-primary);
}

.siigofiscal-page .sae-soporte-titulos h2 {
    color: var(--fiscal-dark);
}

.siigofiscal-page .sae-soporte-etiqueta,
.siigofiscal-page .sae-soporte-servicios i {
    color: #0085B8;
}

.siigofiscal-page .sae-soporte-accion {
    align-items: center;
}

.siigofiscal-page .sae-soporte-accion p {
    text-align: center;
}

/* ==========================================
   BOTÓN WHATSAPP
========================================== */

.siigofiscal-page .btn-sae-soporte {
    background: #16A34A;
    color: #FFFFFF;
}

.siigofiscal-page .btn-sae-soporte:hover {
    background: #12813B;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 768px) {

    .siigofiscal-page .siigofiscal-mapa-integracion {
        height: 400px;
    }

    .siigofiscal-page .siigofiscal-nodo {
        width: 120px;
        min-height: 100px;
        padding: 12px;
    }

    .siigofiscal-page .siigofiscal-nodo img {
        height: 42px;
    }

    .siigofiscal-page .siigofiscal-nodo span {
        font-size: 0.75rem;
    }

    .siigofiscal-page .siigofiscal-nodo-central {
        width: 145px;
        min-height: 120px;
    }

    .siigofiscal-page .siigofiscal-nodo-central img {
        height: 55px;
    }
}

/* ==========================================
   RESPONSIVE - MÓVIL
========================================== */

@media (max-width: 480px) {

    .siigofiscal-page .siigofiscal-mapa-integracion {
        height: auto;
        min-height: 0;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 22px;
        padding: 20px 0;
    }

    /* OCULTAR LÍNEA EN CELULAR */

    .siigofiscal-page .siigofiscal-conexiones {
        display: none;
    }

    /* TARJETAS APILADAS */

    .siigofiscal-page .siigofiscal-nodo {
        position: static;
        transform: none;

        width: 160px;
        min-height: 115px;
        padding: 15px;
    }

    /* SIIGO FISCAL PRIMERO */

    .siigofiscal-page .siigofiscal-nodo-central {
        order: 1;
        width: 165px;
        min-height: 130px;
    }

    /* COI DEBAJO */

    .siigofiscal-page .siigofiscal-nodo-coi {
        order: 2;
    }

    /* BOTÓN DE SOPORTE */

    .siigofiscal-page .btn-sae-soporte {
        width: 100%;
        max-width: 350px;
    }
}

/* ==========================================
   MOVIMIENTO REDUCIDO
========================================== */

@media (prefers-reduced-motion: reduce) {

    .siigofiscal-page .siigofiscal-linea {
        animation: none;
    }

    .siigofiscal-page .siigofiscal-nodo {
        transition: none;
    }
}






































/* ==========================================
   ASPEL CAJA - PALETA DE COLORES
========================================== */

.aspelcaja-page {
    --caja-primary: #F5BD00;
    --caja-dark: #59440A;
    --caja-accent: #B78900;
    --caja-light: #FFF8DD;
    --caja-bg: #FFFCF2;
}

/* ==========================================
   HERO
========================================== */

.aspelcaja-page .sae-hero {
    background: linear-gradient(
        135deg,
        #483609 0%,
        #A77D00 55%,
        #F5BD00 100%
    );
}

/* ==========================================
   INFORMACIÓN Y FUNCIONES
========================================== */

.aspelcaja-page .sae-descripcion h2,
.aspelcaja-page .sae-descripcion h3 {
    color: var(--caja-dark);
}

.aspelcaja-page .sae-funciones strong {
    color: #987100;
}

.aspelcaja-page .sae-funciones li {
    border-left-color: var(--caja-primary);
}

/* ==========================================
   ECOSISTEMA
========================================== */

.aspelcaja-page .aspelcaja-ecosistema {
    background: var(--caja-bg);
}

.aspelcaja-page .sae-ecosistema-header h2 {
    color: var(--caja-dark);
}

.aspelcaja-page .sae-ecosistema-indicacion strong {
    color: #987100;
}

/* ==========================================
   MAPA DE INTEGRACIÓN
   CAJA + SAE + COI
========================================== */

.aspelcaja-page .aspelcaja-mapa-integracion {
    position: relative;
    width: 100%;
    max-width: 1050px;
    height: 400px;
    margin: 30px auto;
    isolation: isolate;
    overflow: visible;
}

/* ==========================================
   CONEXIONES SVG
========================================== */

.aspelcaja-page .aspelcaja-conexiones {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

/* ==========================================
   LÍNEAS AMARILLAS ANIMADAS
========================================== */

.aspelcaja-page .aspelcaja-linea {
    fill: none;
    stroke: var(--caja-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 7;
    animation: aspelcaja-flujo 12s linear infinite;
}

@keyframes aspelcaja-flujo {
    to {
        stroke-dashoffset: -340;
    }
}

/* ==========================================
   TARJETAS DE LOS SISTEMAS
========================================== */

.aspelcaja-page .aspelcaja-nodo {
    position: absolute;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
    width: 145px;
    min-height: 115px;
    padding: 15px;

    background: #FFFFFF;
    border: 2px solid #E8DFBD;
    border-radius: 18px;

    color: #2C3E50;
    text-decoration: none;
    text-align: center;
    font-weight: 700;

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

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.35s ease;
}

/* ==========================================
   LOGOTIPOS
========================================== */

.aspelcaja-page .aspelcaja-nodo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 55px;
    object-fit: contain;
}

/* ==========================================
   TEXTO DE LAS TARJETAS
========================================== */

.aspelcaja-page .aspelcaja-nodo span {
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ==========================================
   ASPEL CAJA - NODO CENTRAL
========================================== */

.aspelcaja-page .aspelcaja-nodo-central {
    left: 50%;
    top: 50%;

    width: 165px;
    min-height: 135px;

    background: var(--caja-light);
    border-color: var(--caja-primary);

    box-shadow:
        0 0 25px rgba(245, 189, 0, 0.20);
}

.aspelcaja-page .aspelcaja-nodo-central img {
    height: 65px;
}

/* ==========================================
   ASPEL SAE - IZQUIERDA
========================================== */

.aspelcaja-page .aspelcaja-nodo-sae {
    left: 25%;
    top: 50%;

    --glow: 242, 5, 48;
    --border: #F20530;
}

/* ==========================================
   ASPEL COI - DERECHA
========================================== */

.aspelcaja-page .aspelcaja-nodo-coi {
    left: 75%;
    top: 50%;

    --glow: 0, 163, 224;
    --border: #00A3E0;
}

/* ==========================================
   RESPLANDOR INDIVIDUAL
========================================== */

.aspelcaja-page
.aspelcaja-nodo:not(.aspelcaja-nodo-central):hover {
    background: #FFFFFF;
    border-color: var(--border);

    box-shadow:
        0 0 20px rgba(var(--glow), 0.50),
        0 0 40px rgba(var(--glow), 0.30),
        0 0 60px rgba(var(--glow), 0.15);
}

/* ==========================================
   RESPLANDOR AMARILLO CENTRAL
========================================== */

.aspelcaja-page .aspelcaja-nodo-central:hover {
    border-color: var(--caja-primary);

    box-shadow:
        0 0 20px rgba(245, 189, 0, 0.50),
        0 0 40px rgba(245, 189, 0, 0.30),
        0 0 60px rgba(245, 189, 0, 0.15);
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

.aspelcaja-page .aspelcaja-nodo:focus-visible {
    outline: 3px solid var(--caja-primary);
    outline-offset: 4px;
}

/* ==========================================
   SOPORTE TÉCNICO
========================================== */

.aspelcaja-page .sae-soporte-section {
    background: var(--caja-bg);
}

.aspelcaja-page .sae-soporte-card {
    border-left-color: var(--caja-primary);
}

.aspelcaja-page .sae-soporte-icono {
    background: var(--caja-light);
    color: var(--caja-accent);
}

.aspelcaja-page .sae-soporte-titulos h2 {
    color: var(--caja-dark);
}

.aspelcaja-page .sae-soporte-etiqueta,
.aspelcaja-page .sae-soporte-servicios i {
    color: var(--caja-accent);
}

.aspelcaja-page .sae-soporte-accion {
    align-items: center;
}

.aspelcaja-page .sae-soporte-accion p {
    text-align: center;
}

/* ==========================================
   BOTÓN WHATSAPP
========================================== */

.aspelcaja-page .btn-sae-soporte {
    background: #16A34A;
    color: #FFFFFF;
}

.aspelcaja-page .btn-sae-soporte:hover {
    background: #12813B;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 768px) {

    .aspelcaja-page .aspelcaja-mapa-integracion {
        height: 350px;
    }

    .aspelcaja-page .aspelcaja-nodo {
        width: 105px;
        min-height: 95px;
        padding: 10px;
    }

    .aspelcaja-page .aspelcaja-nodo img {
        height: 38px;
    }

    .aspelcaja-page .aspelcaja-nodo span {
        font-size: 0.72rem;
    }

    .aspelcaja-page .aspelcaja-nodo-central {
        width: 125px;
        min-height: 115px;
    }

    .aspelcaja-page .aspelcaja-nodo-central img {
        height: 50px;
    }
}

/* ==========================================
   RESPONSIVE - MÓVIL
========================================== */

@media (max-width: 480px) {

    .aspelcaja-page .aspelcaja-mapa-integracion {
        height: auto;
        min-height: 0;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 15px;
        padding: 20px 0;
    }

    /* OCULTAR LÍNEAS EN CELULAR */

    .aspelcaja-page .aspelcaja-conexiones {
        display: none;
    }

    /* TARJETAS EN CUADRÍCULA */

    .aspelcaja-page .aspelcaja-nodo {
        position: static;
        transform: none;

        width: 100%;
        min-height: 105px;
    }

    /* CAJA - PRIMERA FILA */

    .aspelcaja-page .aspelcaja-nodo-central {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;

        width: 160px;
        min-height: 125px;
    }

    /* SAE - SEGUNDA FILA IZQUIERDA */

    .aspelcaja-page .aspelcaja-nodo-sae {
        grid-column: 1;
        grid-row: 2;
    }

    /* COI - SEGUNDA FILA DERECHA */

    .aspelcaja-page .aspelcaja-nodo-coi {
        grid-column: 2;
        grid-row: 2;
    }

    /* BOTÓN WHATSAPP */

    .aspelcaja-page .btn-sae-soporte {
        width: 100%;
        max-width: 350px;
    }
}

/* ==========================================
   MOVIMIENTO REDUCIDO
========================================== */

@media (prefers-reduced-motion: reduce) {

    .aspelcaja-page .aspelcaja-linea {
        animation: none;
    }

    .aspelcaja-page .aspelcaja-nodo {
        transition: none;
    }
}
































































/* ==========================================
   ASPEL ADM - IDENTIDAD VISUAL
========================================== */

.adm-page {
    --adm-primary: #5367D6;
    --adm-dark: #28346D;
    --adm-accent: #23B5C7;
    --adm-light: #EEF1FF;
    --adm-bg: #F7F9FF;
}

/* ==========================================
   HERO E INFORMACIÓN
========================================== */

.adm-page .sae-hero {
    background: linear-gradient(
        135deg,
        #1B2556 0%,
        #4355B5 55%,
        #23B5C7 100%
    );
}

.adm-page .sae-descripcion h2,
.adm-page .sae-descripcion h3 {
    color: var(--adm-dark);
}

.adm-page .sae-funciones strong {
    color: #4355B5;
}

.adm-page .sae-funciones li {
    border-left-color: var(--adm-primary);
}

/* ==========================================
   ECOSISTEMA ADM
========================================== */

.adm-page .adm-ecosistema {
    background: var(--adm-bg);
    padding-bottom: 25px;
}

.adm-page .sae-ecosistema-header h2 {
    color: var(--adm-dark);
}

.adm-page .sae-ecosistema-indicacion strong {
    color: var(--adm-primary);
}

/* ==========================================
   MAPA ADM - FLECHA HACIA ABAJO
========================================== */

.adm-page .adm-mapa-integracion {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    max-width: 600px;
    height: 295px;
    min-height: 0;
    margin: 30px auto 0;
    padding: 0;

    overflow: visible;
    isolation: isolate;
}

/* DESACTIVAR EL SVG ANTERIOR */

.adm-page .adm-conexiones {
    display: none;
}

/* TARJETA ADM */

.adm-page .adm-mapa-integracion .adm-nodo {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;
    width: 170px;
    min-height: 140px;
    padding: 18px;

    background: var(--adm-light);
    border: 2px solid var(--adm-primary);
    border-radius: 20px;

    color: var(--adm-dark);
    text-align: center;
    font-weight: 700;

    transform: none;
    box-shadow:
        0 8px 30px rgba(83, 103, 214, 0.16);

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* LOGOTIPO */

.adm-page .adm-mapa-integracion
.adm-nodo-central img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 65px;
    object-fit: contain;
}

/* NOMBRE */

.adm-page .adm-mapa-integracion
.adm-nodo-central span {
    color: #344054;
    font-size: 0.95rem;
    line-height: 1.3;
}

/* HOVER */

.adm-page .adm-nodo-central:hover {
    border-color: var(--adm-primary);
    box-shadow:
        0 0 20px rgba(83, 103, 214, 0.35),
        0 0 40px rgba(83, 103, 214, 0.15);
}

/* ==========================================
   FLECHA VERTICAL HACIA ABAJO
========================================== */

.adm-page .adm-flecha-tienda {
    position: relative;
    flex: 0 0 auto;

    width: 0;
    height: 105px;
    margin-top: 12px;

    border-left: 3px dashed var(--adm-primary);

    animation: adm-flecha-pulso 2s ease-in-out infinite;
}

/* PUNTA DE LA FLECHA */

.adm-page .adm-flecha-punta {
    position: absolute;
    left: -9px;
    bottom: -1px;

    display: block;
    width: 15px;
    height: 15px;

    border-right: 3px solid var(--adm-primary);
    border-bottom: 3px solid var(--adm-primary);

    transform: rotate(45deg);
}

/* ANIMACIÓN */

@keyframes adm-flecha-pulso {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* ==========================================
   SECCIÓN ADM TIENDA
========================================== */

.adm-page .adm-tienda-section {
    padding: 65px 8% 95px;
    background: #FFFFFF;
    scroll-margin-top: 100px;
}

.adm-page .adm-tienda-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}

/* ==========================================
   ENCABEZADO ADM TIENDA
========================================== */

.adm-page .adm-tienda-encabezado {
    max-width: 780px;
    margin: 0 auto 50px;
    text-align: center;
}

.adm-page .adm-tienda-etiqueta {
    display: inline-block;
    margin-bottom: 14px;

    color: var(--adm-primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.adm-page .adm-tienda-encabezado h2 {
    margin-bottom: 16px;

    color: var(--adm-dark);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
}

.adm-page .adm-tienda-subtitulo {
    color: #596579;
    font-size: 1.08rem;
    line-height: 1.8;
}

/* ==========================================
   PRESENTACIÓN ADM TIENDA
========================================== */

.adm-page .adm-tienda-intro {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 30px;

    padding: 35px;
    margin-bottom: 65px;

    background: var(--adm-bg);
    border: 1px solid #DFE4FC;
    border-radius: 22px;
}

.adm-page .adm-tienda-intro-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100px;
    height: 100px;

    background: var(--adm-light);
    border-radius: 20px;
    font-size: 3rem;
}

.adm-page .adm-tienda-intro-texto h3 {
    margin-bottom: 14px;
    color: var(--adm-dark);
    font-size: 1.45rem;
}

.adm-page .adm-tienda-intro-texto p {
    margin-bottom: 12px;
    color: #526073;
    line-height: 1.8;
}

.adm-page .adm-tienda-intro-texto p:last-child {
    margin-bottom: 0;
}

/* ==========================================
   ENCABEZADO DE FUNCIONALIDADES
========================================== */

.adm-page .adm-tienda-funciones-header {
    margin-bottom: 32px;
    text-align: center;
}

.adm-page .adm-tienda-funciones-header h3 {
    margin-bottom: 12px;
    color: var(--adm-dark);
    font-size: 1.75rem;
}

.adm-page .adm-tienda-funciones-header p {
    color: #657084;
    line-height: 1.7;
}

/* ==========================================
   CUADRÍCULA DE FUNCIONALIDADES
========================================== */

.adm-page .adm-tienda-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* TARJETAS */

.adm-page .adm-tienda-card {
    min-width: 0;
    height: 100%;
    padding: 30px 25px;

    background: #FFFFFF;
    border: 1px solid #E1E5F3;
    border-radius: 18px;

    box-shadow:
        0 5px 20px rgba(43, 55, 105, 0.05);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.adm-page .adm-tienda-card:hover {
    transform: translateY(-6px);
    border-color: var(--adm-primary);

    box-shadow:
        0 12px 30px rgba(83, 103, 214, 0.14);
}

/* ICONOS */

.adm-page .adm-tienda-card-icono {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;
    margin-bottom: 20px;

    background: var(--adm-light);
    border-radius: 16px;
    font-size: 1.7rem;
}

/* TÍTULOS */

.adm-page .adm-tienda-card h4 {
    margin-bottom: 12px;
    color: var(--adm-dark);
    font-size: 1.12rem;
    font-weight: 700;
}

/* DESCRIPCIONES */

.adm-page .adm-tienda-card p {
    color: #596579;
    font-size: 0.95rem;
    line-height: 1.75;
}

/* ==========================================
   ADM + ADM TIENDA
========================================== */

.adm-page .adm-tienda-integracion {
    margin-top: 65px;
    padding: 45px 40px;

    background: linear-gradient(
        135deg,
        #F1F3FF 0%,
        #F9FAFF 100%
    );

    border: 1px solid #DFE4FC;
    border-radius: 22px;
    text-align: center;
}

.adm-page .adm-tienda-integracion h3 {
    margin-bottom: 16px;
    color: var(--adm-dark);
    font-size: 1.7rem;
}

.adm-page .adm-tienda-integracion > p {
    max-width: 750px;
    margin: 0 auto 30px;

    color: #596579;
    line-height: 1.8;
}

/* DOS TARJETAS DE INTEGRACIÓN */

.adm-page .adm-tienda-integracion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.adm-page .adm-tienda-integracion-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    min-width: 0;
    padding: 28px 24px;

    background: #FFFFFF;
    border: 1px solid #E1E5F3;
    border-radius: 16px;
}

.adm-page .adm-tienda-integracion-item strong {
    color: var(--adm-primary);
    font-size: 1.2rem;
}

.adm-page .adm-tienda-integracion-item span {
    color: #596579;
    line-height: 1.7;
}

/* ==========================================
   SOPORTE ADM
========================================== */

.adm-page .sae-soporte-section {
    background: var(--adm-bg);
}

.adm-page .sae-soporte-card {
    border-left-color: var(--adm-primary);
}

.adm-page .sae-soporte-icono {
    background: var(--adm-light);
    color: var(--adm-primary);
}

.adm-page .sae-soporte-titulos h2 {
    color: var(--adm-dark);
}

.adm-page .sae-soporte-etiqueta,
.adm-page .sae-soporte-servicios i {
    color: var(--adm-primary);
}

.adm-page .sae-soporte-accion {
    align-items: center;
}

.adm-page .sae-soporte-accion p {
    text-align: center;
}

.adm-page .btn-sae-soporte:hover {
    background: #12813B;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 900px) {

    .adm-page .adm-tienda-section {
        padding: 55px 6% 80px;
    }

    .adm-page .adm-tienda-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .adm-page .adm-tienda-intro {
        gap: 24px;
        padding: 30px;
    }
}

/* ==========================================
   RESPONSIVE - CELULAR
========================================== */

@media (max-width: 600px) {

    .adm-page .adm-ecosistema {
        padding-bottom: 20px;
    }

    .adm-page .adm-mapa-integracion {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        height: 265px;
        min-height: 0;
        padding: 0;
        margin-top: 25px;
        gap: 0;
    }

    .adm-page .adm-mapa-integracion
    .adm-nodo-central {
        position: relative;
        grid-column: auto;
        grid-row: auto;

        width: 155px;
        min-height: 125px;
        padding: 15px;
        transform: none;
    }

    .adm-page .adm-mapa-integracion
    .adm-nodo-central img {
        height: 55px;
    }

    .adm-page .adm-flecha-tienda {
        height: 95px;
        margin-top: 12px;
    }

    .adm-page .adm-tienda-section {
        padding: 45px 20px 65px;
    }

    .adm-page .adm-tienda-encabezado {
        margin-bottom: 35px;
    }

    .adm-page .adm-tienda-subtitulo {
        font-size: 1rem;
    }

    .adm-page .adm-tienda-intro {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 25px;
        margin-bottom: 45px;
    }

    .adm-page .adm-tienda-intro-icono {
        width: 75px;
        height: 75px;
        font-size: 2.2rem;
    }

    .adm-page .adm-tienda-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .adm-page .adm-tienda-card {
        padding: 25px 22px;
    }

    .adm-page .adm-tienda-integracion {
        margin-top: 45px;
        padding: 30px 20px;
    }

    .adm-page .adm-tienda-integracion-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .adm-page .btn-sae-soporte {
        width: 100%;
        max-width: 350px;
    }
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

@media (prefers-reduced-motion: reduce) {

    .adm-page .adm-flecha-tienda {
        animation: none;
    }

    .adm-page .adm-tienda-card,
    .adm-page .adm-nodo-central {
        transition: none;
    }

    .adm-page .adm-tienda-card:hover {
        transform: none;
    }
}












































/* ==========================================
   ASPEL PROD - IDENTIDAD VISUAL
   MORADO Y GRIS
========================================== */

.prod-page {
    --prod-primary: #50418A;
    --prod-dark: #35265F;
    --prod-accent: #7563B0;
    --prod-light: #F0ECFA;
    --prod-bg: #F8F6FC;
    --prod-gray: #9CA0A3;
}

/* ==========================================
   HERO
========================================== */

.prod-page .sae-hero {
    background: linear-gradient(
        135deg,
        #281C4D 0%,
        #50418A 55%,
        #7563B0 100%
    );
}

/* ==========================================
   INFORMACIÓN Y FUNCIONES
========================================== */

.prod-page .sae-descripcion h2,
.prod-page .sae-descripcion h3 {
    color: var(--prod-dark);
}

.prod-page .sae-funciones strong {
    color: var(--prod-primary);
}

.prod-page .sae-funciones li {
    border-left-color: var(--prod-primary);
}

/* ==========================================
   ECOSISTEMA
========================================== */

.prod-page .prod-ecosistema {
    background: var(--prod-bg);
}

.prod-page .sae-ecosistema-header h2 {
    color: var(--prod-dark);
}

.prod-page .sae-ecosistema-indicacion strong {
    color: var(--prod-primary);
}

/* ==========================================
   MAPA DE INTEGRACIÓN
   PROD + SAE
========================================== */

.prod-page .prod-mapa-integracion {
    position: relative;
    width: 100%;
    max-width: 1050px;
    height: 440px;
    margin: 30px auto;
    isolation: isolate;
    overflow: visible;
}

/* ==========================================
   CONEXIÓN SVG
========================================== */

.prod-page .prod-conexiones {
    position: absolute;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;

    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

/* ==========================================
   LÍNEA MORADA ANIMADA
========================================== */

.prod-page .prod-linea {
    fill: none;
    stroke: var(--prod-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 7;

    animation: prod-flujo 12s linear infinite;
}

@keyframes prod-flujo {
    to {
        stroke-dashoffset: -340;
    }
}

/* ==========================================
   TARJETAS DEL ECOSISTEMA
========================================== */

.prod-page .prod-nodo {
    position: absolute;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
    width: 145px;
    min-height: 115px;
    padding: 15px;

    background: #FFFFFF;
    border: 2px solid #DCD5ED;
    border-radius: 18px;

    color: var(--prod-dark);
    text-align: center;
    text-decoration: none;
    font-weight: 700;

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

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.35s ease;
}

/* ==========================================
   LOGOTIPOS
========================================== */

.prod-page .prod-nodo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 55px;
    object-fit: contain;
}

/* ==========================================
   TEXTO DE LAS TARJETAS
========================================== */

.prod-page .prod-nodo span {
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ==========================================
   ASPEL PROD - CENTRO
========================================== */

.prod-page .prod-nodo-central {
    left: 50%;
    top: 50%;

    width: 165px;
    min-height: 135px;

    background: var(--prod-light);
    border-color: var(--prod-primary);

    box-shadow:
        0 0 25px rgba(80, 65, 138, 0.20);
}

.prod-page .prod-nodo-central img {
    height: 65px;
}

/* ==========================================
   ASPEL SAE - ARRIBA
========================================== */

.prod-page .prod-nodo-sae {
    left: 50%;
    top: 15%;

    --glow: 242, 5, 48;
    --border: #F20530;
}

/* ==========================================
   RESPLANDOR DE SAE
========================================== */

.prod-page
.prod-nodo:not(.prod-nodo-central):hover {
    background: #FFFFFF;
    border-color: var(--border);

    box-shadow:
        0 0 20px rgba(var(--glow), 0.50),
        0 0 40px rgba(var(--glow), 0.30),
        0 0 60px rgba(var(--glow), 0.15);
}

/* ==========================================
   RESPLANDOR MORADO DE PROD
========================================== */

.prod-page .prod-nodo-central:hover {
    border-color: var(--prod-primary);

    box-shadow:
        0 0 20px rgba(80, 65, 138, 0.50),
        0 0 40px rgba(80, 65, 138, 0.30),
        0 0 60px rgba(80, 65, 138, 0.15);
}

/* ==========================================
   ACCESIBILIDAD
========================================== */

.prod-page .prod-nodo:focus-visible {
    outline: 3px solid var(--prod-primary);
    outline-offset: 4px;
}

/* ==========================================
   SOPORTE TÉCNICO
========================================== */

.prod-page .sae-soporte-section {
    background: var(--prod-bg);
}

.prod-page .sae-soporte-card {
    border-left-color: var(--prod-primary);
}

.prod-page .sae-soporte-icono {
    background: var(--prod-light);
    color: var(--prod-primary);
}

.prod-page .sae-soporte-titulos h2 {
    color: var(--prod-dark);
}

.prod-page .sae-soporte-etiqueta,
.prod-page .sae-soporte-servicios i {
    color: var(--prod-primary);
}

.prod-page .sae-soporte-accion {
    align-items: center;
}

.prod-page .sae-soporte-accion p {
    text-align: center;
}

/* ==========================================
   BOTÓN WHATSAPP
========================================== */

.prod-page .btn-sae-soporte {
    background: #16A34A;
    color: #FFFFFF;
}

.prod-page .btn-sae-soporte:hover {
    background: #12813B;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 768px) {

    .prod-page .prod-mapa-integracion {
        height: 400px;
    }

    .prod-page .prod-nodo {
        width: 120px;
        min-height: 100px;
        padding: 12px;
    }

    .prod-page .prod-nodo img {
        height: 42px;
    }

    .prod-page .prod-nodo span {
        font-size: 0.75rem;
    }

    .prod-page .prod-nodo-central {
        width: 145px;
        min-height: 120px;
    }

    .prod-page .prod-nodo-central img {
        height: 55px;
    }
}

/* ==========================================
   RESPONSIVE - MÓVIL
========================================== */

@media (max-width: 480px) {

    .prod-page .prod-mapa-integracion {
        height: auto;
        min-height: 0;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 22px;
        padding: 20px 0;
    }

    /* OCULTAR CONEXIÓN EN CELULAR */

    .prod-page .prod-conexiones {
        display: none;
    }

    /* TARJETAS APILADAS */

    .prod-page .prod-nodo {
        position: static;
        transform: none;

        width: 160px;
        min-height: 115px;
        padding: 15px;
    }

    /* PROD PRIMERO */

    .prod-page .prod-nodo-central {
        order: 1;
        width: 165px;
        min-height: 130px;
    }

    /* SAE DEBAJO */

    .prod-page .prod-nodo-sae {
        order: 2;
    }

    /* BOTÓN WHATSAPP */

    .prod-page .btn-sae-soporte {
        width: 100%;
        max-width: 350px;
    }
}

/* ==========================================
   MOVIMIENTO REDUCIDO
========================================== */

@media (prefers-reduced-motion: reduce) {

    .prod-page .prod-linea {
        animation: none;
    }

    .prod-page .prod-nodo {
        transition: none;
    }
}