/* =========================
   VARIABLES
========================= */
:root {
    --azul: #0A3D62;
    --azul-claro: #1B75D0;
    --gris: #f4f6f9;
    --negro: #0a0a0a;
     --section-space: 60px;
       --section-space-large: 100px;
}

html, body {
    overflow-x: hidden;
}

/* =========================
   BASE
========================= */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: white;
}

body.no-scroll {
    overflow: hidden;
}

/* =========================
   HEADER TESLA LEVEL 馃敟
========================= */
.header {
    position: fixed;
    width: 100%;
    z-index: 9999;

    display: flex;
    align-items: center;

    background: transparent;
    backdrop-filter: blur(0px);

    transition: all 0.4s ease;
}

/* CONTENEDOR */
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 50px;
    width: 100%;
}
@media (max-width: 768px) {
    .container {
        padding: 10px 15px;
    }
}
/* LOGO (FIX VISIBILIDAD 馃敟) */
.logo {
    height: 48px;
    padding: 6px 14px;
    border-radius: 12px;

    background: rgba(255,255,255,0.9); /* 馃敟 blanco s贸lido elegante */
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* ligera profundidad */

    transition: all 0.3s ease;
}



/* NAV */
.nav {
    display: flex;
    gap: 35px;
}

.nav a {
    position: relative;
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* L铆nea elegante */
.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #1B75D0, transparent);
    transition: width 0.3s ease;
}

.nav a:hover::after {
    width: 100%;
}

/* BOT脫N TESLA */
.btn-primary {
    background: rgba(255,255,255,0.15);
    color: white;
    padding: 8px 18px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: rgba(255,255,255,0.3);
}

/* =========================
   SCROLL HEADER
========================= */
.header.scrolled {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.header.scrolled .nav a {
    color: #222;
}

.header.scrolled .btn-primary {
    background: linear-gradient(135deg, #1B75D0, #0A3D62);
    color: white;
    border: none;
}

/* =========================
   MENU MOBILE
========================= */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 8px 10px;
    border-radius: 10px;

    background: rgba(255,255,255,0.9); /* 馃敟 igual que logo */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

    cursor: pointer;
    z-index: 10001;

    transition: all 0.3s ease;
}

.menu-toggle span {
    width: 22px;
    height: 2px;
    background: var(--azul); /* contraste dentro del blanco */
    margin: 3px 0;
    border-radius: 2px;

    transition: all 0.4s ease;
}

.menu-toggle:active {
    transform: scale(0.95);
}

/* =========================
   OVERLAY
========================= */
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(10, 61, 98, 0.3);
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 900;
}

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

/* =========================
   HERO
========================= */
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: url('../img/poster.jpg') center 35% / cover no-repeat;
}

/* VIDEO */
.hero-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.hero-video.visible {
    opacity: 1;
}

.hero-video.hidden {
    opacity: 0;
}

/* CONTENEDOR POST-VIDEO */
.hero-main {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.hero.active .hero-main {
    opacity: 1;
}

/* IMAGEN FINAL */
.hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/hero.jpg') center top / cover no-repeat;
    z-index: 2;
    filter: contrast(1.05) brightness(0.95);
}

/* OVERLAY */
.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.03)
    );
    z-index: 4;
}

/* =========================
   PARTICULAS
========================= */
#particles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* RADAR */
.radar-hud {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

/* CONTENIDO */
.hero-content {
    position: relative;
    z-index: 5;
    max-width: 600px;
    padding: 0 20px;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .hero-content {
        padding: 0 15px;
    }
}
/* =========================
   HERO TEXT PRO 馃敟
========================= */

.hero h1 {
    font-size: 52px;
    line-height: 1.1;
    font-weight: 700;
    color: #0a0a0a;

    margin-bottom: 20px;

    /* 馃敟 profundidad */
    text-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* PALABRAS CLAVE */
.hero h1 span {
    color: var(--azul-claro);
}

/* SUBTEXTO */
.hero p {
    font-size: 18px;
    color: rgba(0,0,0,0.65);
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 520px;
}

/* BOTONES CONTENEDOR */
.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* BOT脫N PRINCIPAL */
.hero-buttons .btn-primary {
    background: linear-gradient(135deg, #1B75D0, #0A3D62);
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 500;

    box-shadow: 0 10px 25px rgba(27,117,208,0.25);

    transition: all 0.3s ease;
}

.hero-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(27,117,208,0.35);
}

/* BOT脫N SECUNDARIO */
.btn-secondary {
    color: var(--azul-claro);
    font-weight: 500;
    text-decoration: none;

    display: flex;
    align-items: center;

    transition: all 0.3s ease;
}

.btn-secondary:hover {
    color: var(--azul);
    transform: translateX(5px);
}





/* =========================
   RESTO
========================= */
.stats {
    display: flex;
    justify-content: space-around;
    padding: 30px;
    background: var(--gris);
}

/* =========================
   SERVICES MOBILE FIX 馃敟
========================= */
@media (max-width: 900px) {

    .services {
        padding: 60px 20px;
    }

    .grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .card {
        padding: 25px;
        border-radius: 14px;

        box-shadow: 0 8px 20px rgba(0,0,0,0.08);

        transition: all 0.3s ease;
    }

    .card:active {
        transform: scale(0.98);
    }
}

.cta {
    background: var(--azul);
    color: white;
    text-align: center;
    padding: 60px;
}

.footer {
    background: #111;
    color: white;
    text-align: center;
    padding: 20px;
}

/* =========================
   馃崕 MENU APPLE LEVEL
========================= */
@media (max-width: 900px) {

    .menu-toggle {
        display: flex;
    }

    .menu-toggle span {
        background: var(--azul);
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;

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

        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(30px);

        transform: translateX(100%);
        transition: transform 0.6s ease;

        z-index: 9999;
    }

    .nav.active {
        transform: translateX(0);
    }

    .nav a {
        font-size: 24px;
        margin: 15px 0;
        color: var(--azul);

        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease;
    }

    .nav.active a {
        opacity: 1;
        transform: translateY(0);
    }

    .desktop-btn {
        display: none;
    }
}

/* =========================
   CONTRASTE INTELIGENTE 馃敟
========================= */

/* MODO OSCURO */
.hero.dark-mode h1 {
    color: white;
    text-shadow: 0 5px 25px rgba(0,0,0,0.6);
}

.hero.dark-mode h1 span {
    color: #5FB3FF;
}

.hero.dark-mode p {
    color: rgba(255,255,255,0.85);
}

.hero.dark-mode .btn-secondary {
    color: #8CC8FF;
}

/* MODO CLARO (tu actual, mejorado) */
.hero:not(.dark-mode) h1 {
    color: #0a0a0a;
}

.hero:not(.dark-mode) p {
    color: rgba(0,0,0,0.75);
}

/* =========================
   HERO CINEMATOGR脕FICO 馃幀
========================= */

.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* delays */
.delay-1 { transition-delay: 0.3s; }
.delay-2 { transition-delay: 0.6s; }
.delay-3 { transition-delay: 0.9s; }

/* t铆tulo m谩s pro */
.hero h1 {
    letter-spacing: -1px;
}

/* efecto sutil al aparecer */
.hero h1 span {
    position: relative;
    display: inline-block;
}

.hero h1 span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 8px;
    background: rgba(27,117,208,0.15);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s ease;
}

.fade-up.show span::after {
    transform: scaleX(1);
}

.hero-bg {
    animation: cinematicZoom 12s ease forwards;
}

@keyframes cinematicZoom {
    from {
        transform: scale(1.1);
    }
    to {
        transform: scale(1);
    }
}

.hero {
    overflow: hidden;
}

.hero-bg {
    will-change: transform;
}
/*stats*/

.stats-pro {
    position: relative;
    background: linear-gradient(180deg, #050a18 0%, #070d22 100%);
    padding: 80px 5%;
    overflow: hidden;
}

/* 馃敟 overlay tipo HUD */
.stats-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(0,255,180,0.08), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 2px,
            transparent 6px
        );
    pointer-events: none;
}

/* GRID */
.stats-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    z-index: 2;
}

/* CARD */
.stat-box {
    text-align: center;
    padding: 30px 20px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

/* 馃敟 HOVER PRO */
.stat-box:hover {
    border-color: rgba(0,255,180,0.3);
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,255,180,0.08);
}

/* N脷MEROS */
.stat-box h3 {
    font-size: 42px;
    font-weight: 700;
    color:#4da3ff;
    margin-bottom: 10px;
    letter-spacing: 1px;
    transition: all 0.4s ease;
}

/* TEXTO */
.stat-box p {
    font-size: 14px;
    color: #9aa3b2;
    letter-spacing: 1px;
}

/* 馃敟 LINEA SUPERIOR (detalle premium) */
.stat-box::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: #00ffb4;
    margin: 0 auto 15px;
    opacity: 0.6;
}

/* 馃敟 glow cuando activa */
.stat-box.active h3 {
    text-shadow: 0 0 18px rgba(0,200,150,0.35);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}



/*NOSOTROS*/

.nosotros-pro {
    background: linear-gradient(180deg, #050a18 0%, #030712 100%);
    padding: 120px 6%;
}

/* GRID */
.nosotros-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* TAG */
.tag {
    font-size: 12px;
    letter-spacing: 2px;
    color: #4da3ff;
    margin-bottom: 15px;
    display: inline-block;
}

/* TITULO */
.nosotros-info h2 {
    font-size: 40px;
    line-height: 1.2;
    color: white;
    margin-bottom: 20px;
}

.nosotros-info h2 span {
    color: #4da3ff;
}

/* TEXTO */
.nosotros-info p {
    color: #a8b3c7;
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 15px;
}

/* DATOS */
.nosotros-data {
    display: flex;
    gap: 40px;
    margin-top: 30px;
}

.nosotros-data strong {
    display: block;
    font-size: 22px;
    color: #2df5c0;
}

.nosotros-data span {
    font-size: 12px;
    color: #8fa2c3;
}

/* VIDEO */
.video-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.5),
        0 0 40px rgba(0,0,0,0.3);
}

.video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* OVERLAY PRO */
.video-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top right,
        rgba(0,0,0,0.4),
        rgba(0,0,0,0.1)
    );

    pointer-events: none;
}

/* HOVER */
.video-box:hover {
    transform: scale(1.02);
    transition: 0.4s ease;

    box-shadow:
        0 30px 70px rgba(0,0,0,0.6),
        0 0 30px rgba(0,200,150,0.12);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .nosotros-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .nosotros-info h2 {
        font-size: 30px;
    }
}

.hidden-video {
    opacity: 0;
    transition: opacity 1s ease;
}

.video-visible {
    opacity: 1;
}

.nosotros-info {
    position: relative;
    z-index: 5;
    opacity: 1 !important;
    transform: none !important;
}

.video-box {
    position: relative;
    z-index: 2;
}

.video-box video {
    z-index: 1;
}

.servicios-pro {
    background: linear-gradient(180deg, #030712 0%, #050a18 100%);
    padding: 120px 6%;
}

/* HEADER */
.servicios-header {
    max-width: 700px;
    margin-bottom: 60px;
}

.servicios-header h2 {
    font-size: 38px;
    color: white;
    margin-bottom: 15px;
}

.servicios-header p {
    color: #a8b3c7;
}

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



/* RESPONSIVE */
@media (max-width: 900px) {
    .servicios-grid {
        grid-template-columns: 1fr;
    }
}.servicio-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    height: 240px;
    cursor: pointer;
}

/* IMAGEN */
.servicio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: scale(1.05);
    transition: transform 0.5s ease;
}

/* OVERLAY */
.servicio-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.4),
        rgba(0,0,0,0.1),
        transparent
    );
}

.servicio-card:hover .servicio-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.9),
        rgba(27,117,208,0.25),
        transparent
    );
}

/* TEXTO */
.servicio-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
}

.servicio-content h3 {
    color: white;
    margin-bottom: 8px;
}

.servicio-content p {
   color: rgba(255,255,255,0.85);
font-size: 13px;
line-height: 1.5;
}

/* HOVER PRO 馃敟 */
.servicio-card:hover {
    transform: translateY(-10px) scale(1.01);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.5),
        0 0 30px rgba(27,117,208,0.15);
}

.servicio-card:hover img {
    transform: scale(1.12);
}

.servicio-content::before {
    content: "";
    display: block;
    width: 35px;
    height: 2px;
    background: #4da3ff;
    margin-bottom: 10px;
}

/* =========================
   GRID PRO SERVICIOS
========================= */

.servicios-pro {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* 🔥 evita conflictos */
}

/* GRID TECNOLÓGICO */
.servicios-pro::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        /* glow sutil */
        radial-gradient(circle at 50% 30%, rgba(27,117,208,0.07), transparent 60%),

        /* líneas horizontales */
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 2px,
            transparent 10px
        ),

        /* líneas verticales */
        repeating-linear-gradient(
            to right,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 2px,
            transparent 10px
        );

    z-index: 0;
    pointer-events: none;
}

/* ASEGURA QUE TODO EL CONTENIDO ESTÉ ENCIMA */
.servicios-header,
.servicios-grid {
    position: relative;
    z-index: 2;
}



/* =========================
   SOLUCIONES ESPECIALIZADAS
========================= */
.servicios-extra {
    margin-top: 0px;
    padding: 80px 5%;

    background: linear-gradient(180deg, #050a18 0%, #070d22 100%);
    position: relative;
}

/* overlay tipo sistema */
.servicios-extra::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at center, rgba(27,117,208,0.08), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 2px,
            transparent 6px
        );

    pointer-events: none;
}

/* T脥TULO */
.servicios-extra h3 {
    color: #4da3ff;
    font-size: 24px;
    margin-bottom: 30px;
}

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

/* CARD */
.extra-card {
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);

    transition: all 0.3s ease;
}

/* HOVER PRO */
.extra-card:hover {
    transform: translateY(-5px);

    border-color: rgba(0,200,150,0.25);

    box-shadow:
        0 15px 40px rgba(0,0,0,0.35),
        0 0 20px rgba(0,200,150,0.08);
}

/* TITULO */
.extra-card h4 {
    color: white;
    margin-bottom: 10px;
    font-size: 16px;
}

/* TEXTO */
.extra-card p {
    color: #9aa3b2;
    font-size: 14px;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .extra-grid {
        grid-template-columns: 1fr;
    }
}

.icono-servicio {
    width: 130px;
    margin: 0 auto 25px auto;
    display: block;
    position: relative;
    z-index: 2;
    transform: translateY(5px);
    filter: drop-shadow(0 0 15px rgba(27,117,208,0.6));
    opacity: 0.95;
will-change: transform;
    transition: all 0.4s ease;
}
.extra-card:hover .icono-servicio {
    transform: scale(1.15);
    filter: drop-shadow(0 0 20px rgba(27,117,208,0.8));
}
.icono-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

/* aura */
.icono-wrap::before {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(27,117,208,0.25),
        rgba(27,117,208,0.08),
        transparent 70%
    );

    animation: pulseGlow 3s infinite ease-in-out;
}

/* radar ring */
.icono-wrap::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin-bottom: 25px;
    border: 1px solid rgba(27,117,208,0.25);

    animation: radar 4s linear infinite;
}
@keyframes pulseGlow {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.6; }
}

@keyframes radar {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}
.extra-card:hover .icono-servicio {
    transform: scale(1.2) translateY(-5px);
    filter: drop-shadow(0 0 25px rgba(27,117,208,0.9));
}

.extra-card:hover .icono-wrap::before {
    animation-duration: 1.5s;
}

.extra-card:hover .icono-wrap::after {
    animation-duration: 2s;
}

.extra-card {
    backdrop-filter: blur(6px);
}


/* =========================
   DIFERENCIADORES
========================= */
.diferenciadores-pro {
    background: linear-gradient(180deg, #050a18 0%, #030712 100%);
    padding: 120px 6%;
}

/* HEADER */
.diferenciadores-header {
    max-width: 600px;
    margin-bottom: 60px;
}

.diferenciadores-header h2 {
    color: white;
    font-size: 38px;
    margin-bottom: 10px;
}

.diferenciadores-header p {
    color: #a8b3c7;
}

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

/* CARD */
.dif-card {
    padding: 30px;
    border-radius: 14px;

    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);

    transition: all 0.3s ease;
    overflow: hidden; /* 🔥 CLAVE */
}

/* HOVER */
.dif-card:hover {
    transform: translateY(-8px) scale(1.02);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.5),
        0 0 40px rgba(27,117,208,0.15);

    border-color: rgba(27,117,208,0.4);

    background: linear-gradient(
        135deg,
        rgba(27,117,208,0.08),
        rgba(0,0,0,0.2)
    );
}

/* ICONO */
.dif-icono {
    width: 70px;
    height: 70px;
    border-radius: 16px;

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

    background: radial-gradient(
        circle,
        rgba(27,117,208,0.25),
        rgba(27,117,208,0.05),
        transparent
    );

    margin-bottom: 20px;
}

/* TITULO */
.dif-card h3 {
    color: white;
    margin-bottom: 10px;
}

/* TEXTO */
.dif-card p {
    color: #9aa3b2;
    font-size: 14px;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .diferenciadores-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   DIFERENCIADORES CLEAN
========================= */
.diferenciadores-clean {
    background: linear-gradient(180deg, #030712 0%, #050a18 100%);
    padding: 100px 6%;
}

/* HEADER */
.diferenciadores-clean .diferenciadores-header {
    max-width: 600px;
    margin-bottom: 50px;
}

.diferenciadores-clean h2 {
    color: white;
    font-size: 36px;
    margin-bottom: 10px;
}

.diferenciadores-clean p {
    color: #a8b3c7;
}

/* LISTA */
.diferenciadores-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

/* ITEM */
.dif-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);

    transition: all 0.3s ease;
}

/* HOVER MUY SUTIL */
.dif-item:hover {
    transform: translateX(5px);
}

/* ICONO */
.dif-card {
    position: relative;
    overflow: hidden;
}

.dif-card::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(27,117,208,0.25), transparent 70%);
    top: var(--y, 50%);
    left: var(--x, 50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.dif-card:hover::before {
    opacity: 1;
}
.dif-icono img {
    animation: breathing 4s ease-in-out infinite;
}

@keyframes breathing {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.dif-card:hover {
    border: 1px solid rgba(27,117,208,0.6);
}

/* TITULO */
.dif-item h3 {
    color: white;
    margin: 0;
    font-size: 18px;
}

/* TEXTO */
.dif-item p {
    margin-top: 5px;
    color: #9aa3b2;
    font-size: 14px;
    line-height: 1.5;
}

.dif-icono img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(27,117,208,0.6));
}
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .diferenciadores-list {
        grid-template-columns: 1fr;
    }
}


/* =========================
   DIFERENCIADORES PRO ANIM
========================= */

/* entrada inicial */
.dif-card {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* cuando aparece */
.dif-card.show {
    opacity: 1;
    transform: translateY(0);
}

/* delay elegante */
.dif-card:nth-child(1) { transition-delay: 0.1s; }
.dif-card:nth-child(2) { transition-delay: 0.2s; }
.dif-card:nth-child(3) { transition-delay: 0.3s; }
.dif-card:nth-child(4) { transition-delay: 0.4s; }

/* hover card */
.dif-card {
    position: relative;
    overflow: hidden;
     backdrop-filter: blur(6px);
}

.dif-card:hover {
    transform: translateY(-8px) scale(1.02);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.5),
        0 0 40px rgba(27,117,208,0.15);
        border-color: rgba(27,117,208,0.4);

    background: linear-gradient(
    135deg,
    rgba(27,117,208,0.08),
    rgba(0,0,0,0.2)
);}


/* glow interno */
.dif-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;

    background: radial-gradient(circle at center, rgba(27,117,208,0.15), transparent 70%);
    
    opacity: 0;
    transition: 0.4s;
}

.dif-card:hover::after {
    opacity: 1;
}

/* ICONO ANIMACIÓN */
.dif-icono img {
    transition: all 0.4s ease;
}

.dif-card:hover .dif-icono img {
    transform: scale(1.15) rotate(3deg);
    filter: drop-shadow(0 0 12px rgba(0,180,255,0.8));
}

.dif-card::before {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #4da3ff;
    margin-bottom: 15px;
    opacity: 0.7;
}
/* =========================
   ACTIVACIÓN PRO ICONOS
========================= */

/* estado inicial */
.icono-servicio {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease;
}

.icono-servicio.activo {
    opacity: 1;
    transform: scale(1);
}

.icono-wrap {
    z-index: 1;
}

.icono-servicio {
    z-index: 2;
}
/* animación principal */
@keyframes activarIcono {
    0% {
        opacity: 0;
        transform: scale(0.6);
        filter: blur(8px) brightness(0.4);
    }
    40% {
        opacity: 1;
        transform: scale(1.15);
        filter: blur(2px) brightness(1.5);
    }
    70% {
        transform: scale(0.95);
        filter: blur(0px) brightness(1.2);
    }
    100% {
        transform: scale(1);
        filter: blur(0px) brightness(1);
    }
}

/* FLASH ENERGÉTICO */
.icono-wrap::after {
    animation: radar 4s linear infinite;
}

.icono-wrap.activo::before {
    animation: pulseActivacion 1s ease;
}

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

.diferenciadores-pro {
    background: linear-gradient(180deg, #030712 0%, #050a18 100%);
    padding: 120px 6%;
    position: relative;
    overflow: hidden;
}

/* GRID + efecto técnico */
.diferenciadores-pro::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at center, rgba(27,117,208,0.08), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 2px,
            transparent 6px
        );

    pointer-events: none;
}

/* =========================
   MODO BLINDADO - SCAN
========================= */

.dif-card::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(27,117,208,0.15),
        transparent
    );

    transform: skewY(-10deg);
    opacity: 0;
}

.dif-card:hover::after {
    animation: scanLine 1.5s ease;
}

@keyframes scanLine {
    0% {
        top: -100%;
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}
/* =========================
   PARTÍCULAS SUTILES
========================= */

.dif-card .particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.dif-card .particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #4da3ff;
    border-radius: 50%;
    opacity: 0;
}

/* animación */
.dif-card:hover .particles span {
    animation: particleFloat 1.2s ease forwards;
}

@keyframes particleFloat {
    0% {
        transform: translateY(10px) scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-40px) scale(1);
        opacity: 0;
    }
}
.dif-card:hover h3 {
    color: #4da3ff;
    text-shadow: 0 0 10px rgba(27,117,208,0.4);
} 

/* =========================
   COMPLIANCE PRO (ESTABLE)
========================= */

.compliance-pro {
    background: linear-gradient(180deg, #030712 0%, #050a18 100%);
    padding: 120px 6%;
}

/* GRID */
.compliance-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* IZQUIERDA */
.compliance-left h2 {
    color: white;
    font-size: 38px;
    margin-bottom: 20px;
}

.compliance-left h2 span {
    color: #4da3ff;
}

.compliance-left p {
    color: #a8b3c7;
    margin-bottom: 25px;
    line-height: 1.7;
}

.compliance-left ul {
    list-style: none;
    padding: 0;
}

.compliance-left li {
    color: #9aa3b2;
    margin-bottom: 10px;
}

/* DERECHA */
.compliance-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* TARJETAS */
.badge {
    padding: 25px;
    border-radius: 12px;

    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);

    transition: all 0.3s ease;
}

.badge:hover {
    transform: translateY(-5px);
    border-color: #4da3ff;
}

/* TEXTO */
.badge h3 {
    color: white;
}

.badge p {
    color: #9aa3b2;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .compliance-container {
        grid-template-columns: 1fr;
    }

    .compliance-right {
        grid-template-columns: 1fr;
    }
}
/* =========================
   COMPLIANCE PREMIUM
========================= */

.badge.premium {
    position: relative;
    padding: 25px;
    border-radius: 14px;

    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(6px);

    overflow: hidden;
    transition: all 0.3s ease;
}

/* línea lateral tipo validación */
.badge.premium::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: #4da3ff;
    opacity: 0.8;
}

/* header badge */
.badge-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* logo */
.badge-logo {
    height: 26px;
    opacity: 0.9;
}

/* estado */
.badge-status {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(77,163,255,0.15);
    color: #4da3ff;
    letter-spacing: 1px;
}

/* textos */
.badge-main {
    font-size: 12px;
    color: #8fa2c3;
    margin-top: 8px;
    letter-spacing: 1px;
}

.badge-code {
    font-size: 20px;
    font-weight: 700;
    color: #4da3ff;
    margin-top: 5px;
    letter-spacing: 1px;
}

.badge-sub {
    font-size: 12px;
    color: #9aa3b2;
    margin-top: 5px;
}

/* hover premium */
.badge.premium:hover {
    transform: translateY(-6px);

    border-color: rgba(77,163,255,0.5);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.5),
        0 0 25px rgba(77,163,255,0.15);
}

/* glow del código */
.badge.premium:hover .badge-code {
    text-shadow: 0 0 12px rgba(77,163,255,0.6);
}

/* glow interno */
.badge.premium::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(77,163,255,0.12), transparent 70%);
    opacity: 0;
    transition: 0.4s;
}

.badge.premium:hover::after {
    opacity: 1;
}


/* =========================
   LOGO BOX PREMIUM
========================= */

.logo-box {
    position: relative;

    background: #fff;
    padding: 12px 18px; /* 🔥 más grande pero controlado */
    border-radius: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 90px;   /* 🔥 asegura presencia */
    min-height: 44px;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.2);

    transition: all 0.3s ease;
}

/* logo */
.badge-logo {
    height: 42px;   /* 🔥 tamaño ideal */
    max-width: 180px;
    object-fit: contain;
}

/* hover elegante */
.badge.premium:hover .logo-box {
    transform: scale(1.05);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.15),
        0 0 15px rgba(77,163,255,0.2);
}

/* =========================
   COMPLIANCE GRID BACKGROUND PRO
========================= */

.compliance-pro {
    position: relative;
    overflow: hidden;
}

/* GRID + EFECTO TECNOLÓGICO */
.compliance-pro::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        /* glow central */
        radial-gradient(circle at center, rgba(77,163,255,0.08), transparent 60%),

        /* grid horizontal */
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 2px,
            transparent 6px
        ),

        /* grid vertical */
        repeating-linear-gradient(
            to right,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 2px,
            transparent 6px
        );

    pointer-events: none;
    z-index: 1;
}

/* ASEGURAR CONTENIDO ENCIMA */
.compliance-container {
    position: relative;
    z-index: 2;
}


/* =========================
   COBERTURA - NIVEL DIOS
========================= */

.cobertura-pro {
    position: relative;
    background: linear-gradient(180deg, #030712 0%, #050a18 100%);
    padding: 120px 4%;
    overflow: hidden;
}

/* =========================
   FONDO TECNOLÓGICO
========================= */

/* grid técnico */
.cobertura-pro::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at center, rgba(27,117,208,0.08), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 2px,
            transparent 6px
        );

    pointer-events: none;
    z-index: 0;
}

/* glow ambiental */
.cobertura-pro::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(27,117,208,0.12), transparent 70%);
    top: -200px;
    right: -200px;
    filter: blur(80px);
    z-index: 0;
}

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

.cobertura-header {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin-bottom: 60px;
}

.cobertura-header h2 {
    color: #ffffff;
    font-size: 40px;
    margin-bottom: 10px;
}

.cobertura-header p {
    color: #a8b3c7;
    line-height: 1.6;
}

/* =========================
   GRID
========================= */

.cobertura-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;

    max-width: 1400px; /* 🔥 antes 1200 */
    width: 100%;       /* 🔥 nuevo */
    margin: 0 auto;

    padding: 0; /* 🔥 quitar el padding */
}


/* =========================
   CARD
========================= */

.cobertura-card {
    width: 100%;
    position: relative;
    height: 260px;
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;

    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);

    transition: all 0.4s ease;
}

/* IMAGEN */
.cobertura-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: brightness(0.95) contrast(1.08) saturate(1.05);

    transition: all 0.6s ease;
}

/* OVERLAY */
.cobertura-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.35),
        rgba(27,117,208,0.08),
        transparent
    );
}

/* =========================
   SCAN EFECTO PRO
========================= */

.cobertura-card::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(27,117,208,0.18),
        transparent
    );

    transform: skewY(-10deg);
    opacity: 0;
}

.cobertura-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at center,
        rgba(27,117,208,0.12),
        transparent 70%
    );

    opacity: 0;
    transition: 0.4s;
}

.cobertura-card:hover::before {
    opacity: 1;
}







.cobertura-card:hover::after {
    animation: coberturaScan 1.4s ease;
}

@keyframes coberturaScan {
    0% { top: -100%; opacity: 0; }
    30% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* =========================
   CONTENIDO
========================= */

.cobertura-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
}

.cobertura-content h3 {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 6px;
    transition: all 0.3s ease;
}

.cobertura-content p {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
}

/* =========================
   HOVER NIVEL DIOS
========================= */

.cobertura-card:hover {
    transform: translateY(-10px) scale(1.02);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.7),
        0 0 30px rgba(27,117,208,0.2);

    border-color: rgba(27,117,208,0.5);
}

.cobertura-card:hover img {
    transform: scale(1.12);
    filter: brightness(1.1) contrast(1.15) saturate(1.1);
}
/* glow texto */
.cobertura-card:hover h3 {
    color: #4da3ff;
    text-shadow: 0 0 10px rgba(27,117,208,0.5);
}

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

@media (max-width: 900px) {
    .cobertura-grid {
        grid-template-columns: 1fr;
    }

    .cobertura-card {
        height: 240px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .cobertura-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .cobertura-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1600px) {
    .cobertura-grid {
        max-width: 1600px;
    }
}

/* =========================
   RADAR SYSTEM PRO
========================= */

.rs-section {
    padding: 120px 6%;
    background: linear-gradient(180deg, #030712 0%, #050a18 100%);
    position: relative;
    overflow: hidden;
}

/* GRID FONDO */
.rs-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(27,117,208,0.08), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 2px,
            transparent 6px
        );
    pointer-events: none;
}

/* HEADER */
.rs-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.rs-header h2 {
    color: white;
    font-size: 36px;
    margin-bottom: 10px;
}

.rs-header p {
    color: #9aa3b2;
}

/* CONTENEDOR */
.rs-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* =========================
   RADAR
========================= */

.rs-radar {
    position: relative;
    width: 320px;
    height: 320px;
    margin: auto;
    border-radius: 50%;
}

/* ANILLOS */
.rs-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(77,163,255,0.15);
}

.rs-r1 { transform: scale(1); }
.rs-r2 { transform: scale(0.7); }
.rs-r3 { transform: scale(0.4); }

/* CRUZ */
.rs-radar::before,
.rs-radar::after {
    content: "";
    position: absolute;
    background: rgba(77,163,255,0.1);
}

.rs-radar::before {
    width: 100%;
    height: 1px;
    top: 50%;
}

.rs-radar::after {
    height: 100%;
    width: 1px;
    left: 50%;
}

/* SWEEP */
.rs-sweep {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    background: conic-gradient(
        rgba(0,255,180,0.25),
        transparent 40%
    );

    animation: rs-rotate 4s linear infinite;
    filter: blur(1px);
}

/* CENTRO */
.rs-core {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #00ffb4;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    box-shadow:
        0 0 12px #00ffb4,
        0 0 25px rgba(0,255,180,0.6);
}

/* DOTS */
.rs-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #4da3ff;
    border-radius: 50%;

    animation: rs-blink 2s infinite ease-in-out;
}

/* =========================
   DATOS
========================= */

.rs-stats {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.rs-stats div {
    padding: 25px;
    border-radius: 14px;

    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(6px);

    transition: all 0.3s ease;
}

.rs-stats div:hover {
    transform: translateY(-5px);
    border-color: #4da3ff;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.4),
        0 0 20px rgba(77,163,255,0.15);
}

.rs-stats strong {
    font-size: 28px;
    color: #4da3ff;
    display: block;
}

.rs-stats span {
    color: #9aa3b2;
    font-size: 13px;
}

/* =========================
   TIPOS SERVICIO
========================= */

.rs-services {
    margin-top: 60px;
    text-align: center;
}

.rs-services span {
    display: inline-block;
    margin: 8px;
    padding: 8px 16px;
    border-radius: 20px;

    background: rgba(27,117,208,0.1);
    color: #4da3ff;

    font-size: 12px;
    letter-spacing: 1px;

    transition: all 0.3s ease;
}

.rs-services span:hover {
    background: #1B75D0;
    color: white;
}

/* =========================
   ANIMACIONES
========================= */

@keyframes rs-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rs-blink {
    0%,100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}

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

@media (max-width: 900px) {
    .rs-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .rs-radar {
        width: 260px;
        height: 260px;
    }
}
/* =========================
   RADAR SYSTEM PRO
========================= */

.rs-section {
    padding: 120px 6%;
    background: linear-gradient(180deg, #030712 0%, #050a18 100%);
    position: relative;
    overflow: hidden;
}

/* GRID FONDO */
.rs-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(27,117,208,0.08), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 2px,
            transparent 6px
        );
}

/* HEADER */
.rs-header {
    text-align: center;
    margin-bottom: 60px;
}

.rs-header h2 {
    color: white;
    font-size: 38px;
}

.rs-header p {
    color: #9aa3b2;
}

/* GRID */
.rs-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

/* =========================
   RADAR
========================= */

.rs-radar {
    position: relative;
    width: 340px;
    height: 340px;
    margin: auto;
    border-radius: 50%;
}

/* ANILLOS */
.rs-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(77,163,255,0.15);
}

.rs-r2 { transform: scale(0.7); }
.rs-r3 { transform: scale(0.4); }

/* CRUZ */
.rs-cross::before,
.rs-cross::after {
    content: "";
    position: absolute;
    background: rgba(77,163,255,0.1);
}

.rs-cross::before {
    width: 100%;
    height: 1px;
    top: 50%;
}

.rs-cross::after {
    height: 100%;
    width: 1px;
    left: 50%;
}

/* SWEEP */
.rs-sweep {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(rgba(0,255,180,0.25), transparent 40%);
    animation: rotate 4s linear infinite;
}

/* CENTRO */
.rs-core {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #00ffb4;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 2s infinite;
}

/* LÍNEAS */
.rs-line {
    position: absolute;
    width: 2px;
    height: 45%;
    background: linear-gradient(to top, rgba(0,255,180,0.5), transparent);
    top: 50%;
    left: 50%;
    transform-origin: bottom;
}

.rs-line.top { transform: translate(-50%, -100%) rotate(0deg); }
.rs-line.right { transform: translate(-50%, -100%) rotate(90deg); }
.rs-line.bottom { transform: translate(-50%, -100%) rotate(180deg); }
.rs-line.left { transform: translate(-50%, -100%) rotate(270deg); }

/* TRACKERS */
.rs-tracker {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00ffb4;
    border-radius: 50%;
}

.rs-t1 {
    left: 50%;
    top: 50%;
    animation: moveTop 3s linear infinite;
}

.rs-t2 {
    left: 50%;
    top: 50%;
    animation: moveRight 3s linear infinite;
}

/* DOTS */
.rs-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #4da3ff;
    border-radius: 50%;
    animation: blink 2s infinite;
}

/* LABELS */
.rs-label {
    position: absolute;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    background: rgba(27,117,208,0.12);
    color: #4da3ff;
    border: 1px solid rgba(77,163,255,0.2);
}

.rs-top { top: -20px; left: 50%; transform: translateX(-50%); }
.rs-right { right: -50px; top: 50%; transform: translateY(-50%); }
.rs-bottom { bottom: -20px; left: 50%; transform: translateX(-50%); }
.rs-left { left: -50px; top: 50%; transform: translateY(-50%); }
.rs-center { bottom: 20%; right: 10%; }

/* =========================
   STATS
========================= */

.rs-stats div {
    margin-bottom: 20px;
    padding: 25px;
    border-radius: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
}

.rs-stats strong {
    font-size: 32px;
    color: #4da3ff;
    animation: glow 3s infinite;
}

.rs-stats span {
    color: #9aa3b2;
}

/* =========================
   ANIMACIONES
========================= */

@keyframes rotate {
    to { transform: rotate(360deg); }
}

@keyframes blink {
    0%,100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes pulse {
    0%,100% { box-shadow: 0 0 10px #00ffb4; }
    50% { box-shadow: 0 0 25px #00ffb4; }
}

@keyframes glow {
    0%,100% { text-shadow: none; }
    50% { text-shadow: 0 0 10px rgba(77,163,255,0.5); }
}

@keyframes moveTop {
    0% { transform: translate(-50%, 0); opacity: 0; }
    100% { transform: translate(-50%, -150px); opacity: 0; }
}

@keyframes moveRight {
    0% { transform: translate(0, -50%); opacity: 0; }
    100% { transform: translate(150px, -50%); opacity: 0; }
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .rs-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@keyframes moveBottom {
    0% { transform: translate(-50%, 0); opacity: 0; }
    100% { transform: translate(-50%, 150px); opacity: 0; }
}

@keyframes moveLeft {
    0% { transform: translate(0, -50%); opacity: 0; }
    100% { transform: translate(-150px, -50%); opacity: 0; }
}

/* =========================
   PANEL C5 PRO
========================= */

.rs-feed {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(77,163,255,0.15);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    padding: 15px;
    height: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* header */
.rs-feed-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4da3ff;
    margin-bottom: 10px;
    font-size: 13px;
}

/* punto live */
.live-dot {
    width: 8px;
    height: 8px;
    background: #00ffb4;
    border-radius: 50%;
    animation: pulseLive 1.2s infinite;
}

@keyframes pulseLive {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
}

/* lista */
.rs-feed-list {
    overflow-y: auto;
    font-size: 12px;
}

/* evento */
.rs-event {
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #9aa3b2;
    animation: fadeIn 0.5s ease;
}

.rs-event strong {
    color: #4da3ff;
}

/* alerta */
.rs-event.alert {
    color: #ff4d4d;
}

/* animación */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px);}
    to { opacity: 1; transform: translateY(0);}
}

.rs-label.active {
    background: #00ffb4;
    color: #000;
    box-shadow: 0 0 15px #00ffb4;
}

/* GRID PRINCIPAL */
.rs-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 40px;
}

/* EVENTOS ABAJO */
.rs-feed {
    max-width: 900px;
    margin: auto;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 15px;
}

/* EVENTO */
.rs-event {
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #9aa3b2;
}

.rs-event.alert {
    color: #ff4d4d;
}

/* LABEL ACTIVO */
.rs-label.active {
    background: #00ffb4;
    color: #000;
    box-shadow: 0 0 15px #00ffb4;
}

/* RESPONSIVE */
@media(max-width:900px){
    .rs-main{
        grid-template-columns:1fr;
    }
}
/* FEED PRO */
.rs-feed {
    margin-top: 50px;
    border-radius: 14px;
    padding: 15px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(77,163,255,0.2);
    backdrop-filter: blur(8px);
}

.rs-feed-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4da3ff;
    margin-bottom: 10px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #00ffb4;
    border-radius: 50%;
    animation: pulseLive 1s infinite;
}

@keyframes pulseLive {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
}

.rs-event {
    padding: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 12px;
    color: #9aa3b2;
    animation: fadeIn 0.4s ease;
}

.rs-event strong {
    color: #4da3ff;
}

.rs-event.alert {
    color: #ff4d4d;
}

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

/* SECTOR ACTIVO */
.rs-label.active {
    background: #00ffb4;
    color: #000;
    box-shadow: 0 0 12px #00ffb4;
}

/* =========================
   TRACKING REAL
========================= */

.rs-tracker{
    position: absolute;
    width: 8px;
    height: 8px;
    background: #00ffb4;
    border-radius: 50%;
    box-shadow: 0 0 12px #00ffb4;
    transform: translate(-50%, -50%);
    z-index: 5;
}

/* ESTELA */
.rs-tracker::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(0,255,180,0.3), transparent 70%);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

/* LINEAS DINÁMICAS */
.rs-line-dynamic{
    position:absolute;
    height:2px;
    background: linear-gradient(to right, rgba(0,255,180,0.5), transparent);
    transform-origin:left center;
    z-index:4;
}
/* =========================
   RADAR PUNTOS TÁCTICOS
========================= */

.rs-points {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

/* punto base */
.rs-point {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;

    transform: translate(-50%, -50%);
    animation: radarPing 2s ease-out forwards;
}

/* colores por evento */
.rs-point.incendio {
    background: #ff3b3b;
    box-shadow: 0 0 10px #ff3b3b;
}

.rs-point.robo {
    background: #ff9f1a;
    box-shadow: 0 0 10px #ff9f1a;
}

.rs-point.bloqueo {
    background: #ffd32a;
    box-shadow: 0 0 10px #ffd32a;
}

.rs-point.normal {
    background: #00ffb4;
    box-shadow: 0 0 10px #00ffb4;
}

/* animación tipo pulso */
@keyframes radarPing {
    0% {
        transform: scale(0.3);
        opacity: 1;
    }
    70% {
        transform: scale(1.5);
        opacity: 0.7;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}



@media (max-width: 768px) {
    .rs-radar {
        width: 260px;
        height: 260px;
    }
}
/* =========================
   OPERATIVO PRO FINAL
========================= */

.operativo-section {
     position: relative;
    overflow: hidden;
    padding: 120px 20px;
    background: radial-gradient(circle at center, #020617, #01030a);
}
@media (max-width: 768px) {
    .operativo-section::after {
        width: 300px;
        height: 300px;
    }
}




/* GRID TECNOLÓGICO SUTIL (tipo footer pero más fino) */
.operativo-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at center, rgba(0,255,180,0.05), transparent 60%),

        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            transparent 2px,
            transparent 8px
        ),

        repeating-linear-gradient(
            to right,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            transparent 2px,
            transparent 8px
        );

    pointer-events: none;
    z-index: 0;
}

/* GLOW CENTRAL DINÁMICO (MUY PRO) */
.operativo-section::after {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    background: radial-gradient(circle, rgba(0,255,180,0.08), transparent 70%);

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

    filter: blur(80px);

    animation: operativoGlow 6s ease-in-out infinite;

    z-index: 0;
}

/* animación suave */
@keyframes operativoGlow {
    0%,100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* ASEGURAR CONTENIDO ENCIMA */
.operativo-section .container,
.operativo-section .operativo-flow,
.operativo-section .operativo-title,
.operativo-section .operativo-sub {
    position: relative;
    z-index: 2;
}
/* CONTENEDOR */
.operativo-section .container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

/* TITULO */
.operativo-title {
    font-size: 42px;
    color: #fff;
    margin-bottom: 15px;
}

/* DESCRIPCIÓN */
.operativo-sub {
    max-width: 750px;
    margin: 0 auto 50px auto;
    color: #00ffc3;
    font-size: 16px;
    line-height: 1.6;
}

/* =========================
   FLOW HORIZONTAL
========================= */

.operativo-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* 🔥 clave adaptativo */
    gap: 15px;
}

/* CARDS */
.op-card {
    width: 200px;
    padding: 20px;
    border-radius: 16px;

    background: rgba(0,255,180,0.05);
    border: 1px solid rgba(0,255,180,0.2);

    transition: all 0.3s ease;
}

/* HOVER */
.op-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0,255,180,0.3);
}

/* ESTADOS */
.op-card.active {
    border-color: #00ffc3;
    box-shadow: 0 0 25px rgba(0,255,180,0.4);
}

.op-card.alert {
    border-color: #ff3b3b;
    box-shadow: 0 0 25px rgba(255,0,0,0.4);
}

/* TEXTO */
.op-card h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 5px;
}

.op-card p {
    font-size: 13px;
    color: #aaa;
}

/* ICONO */
.op-icon {
    font-size: 26px;
    margin-bottom: 8px;
}

/* LINEAS */
.op-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ffc3, transparent);
    animation: flujo 2s infinite;
}

/* ANIMACIÓN */
@keyframes flujo {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

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

@media (max-width: 900px) {

    .operativo-flow {
        flex-direction: column;
    }

    .op-line {
        display: none;
    }

}
/* =========================
   FLOW CORRECTO (RESPONSIVE REAL)
========================= */

.operativo-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* 🔥 CLAVE */
    gap: 15px;
}

/* cards */
.operativo-section .op-card {
    width: 200px;
    flex: 0 0 auto;
}

/* líneas */
.operativo-section .op-line {
    width: 40px;
    flex: 0 0 40px;
}

/* contenedor */
.operativo-section .container {
    display: block !important;
    text-align: center;
}

/* 🔥 RESPONSIVE REAL */
@media (max-width: 1200px) {

    .operativo-section .operativo-flow {
        flex-wrap: wrap !important;
    }

}

@media (max-width: 768px) {

    .operativo-section .operativo-flow {
        flex-direction: column !important;
    }

    .operativo-section .op-line {
        display: none;
    }

}

/* =========================
   FIX TEXTO MOBILE
========================= */

@media (max-width: 768px) {

    .operativo-section {
        padding: 80px 15px;
    }

    .operativo-title {
        font-size: 30px;
        text-align: center;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .operativo-sub {
        max-width: 320px; /* 🔥 antes 90% */
        margin: 10px auto 30px auto;
        font-size: 14px;
        line-height: 1.6;
    }

    .operativo-flow {
        flex-direction: column;
        align-items: center;
        margin-top: 25px; /* 🔥 clave visual */
    }

    .op-card {
        width: 100%;
        max-width: 280px;
    }

    .op-line {
        display: none;
    }

}
/* =========================
   CONTACTO PRO - FIX FINAL
========================= */

.contacto-pro {
    position: relative;
    padding: 120px 6%;
    background: linear-gradient(180deg, #030712 0%, #050a18 100%);
    overflow: hidden;
}

/* FONDO TECNOLÓGICO */
.contacto-pro::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at center, rgba(27,117,208,0.08), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            transparent 2px,
            transparent 6px
        );

    pointer-events: none;
}

/* CONTENEDOR */
.contacto-container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;

    max-width: 1200px;
    margin: auto;
}

/* =========================
   TEXTO
========================= */

.contacto-info h2 {
    font-size: 38px;
    color: #fff;
    margin-bottom: 15px;
}

.contacto-info p {
    color: #a8b3c7;
    line-height: 1.6;
    margin-bottom: 20px;
}

.contacto-info ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.contacto-info li {
    color: #9aa3b2;
    margin-bottom: 8px;
}

.contacto-datos p {
    color: #4da3ff;
    margin-bottom: 5px;
    font-size: 14px;
}

/* =========================
   FORMULARIO
========================= */

.contacto-form {
    position: relative;
    z-index: 5;

    background: rgba(10,15,30,0.85); /* 🔥 mejora visual */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 35px;

    backdrop-filter: blur(10px);

    display: flex;
    flex-direction: column;
    gap: 15px;

    transition: all 0.3s ease;
}

/* hover elegante */
.contacto-form:hover {
    border-color: rgba(27,117,208,0.4);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.5),
        0 0 30px rgba(27,117,208,0.15);
}

/* 🔥 FIX CRÍTICO: NO BLOQUEAR INPUTS */
.contacto-form::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;

    background: radial-gradient(circle at center, rgba(27,117,208,0.12), transparent 70%);
    
    opacity: 0;
    transition: 0.4s;

    pointer-events: none; /* 🔥 CLAVE */
}

.contacto-form:hover::after {
    opacity: 1;
}

/* =========================
   INPUTS PRO
========================= */

.contacto-form input,
.contacto-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;

    background: rgba(255,255,255,0.08); /* 🔥 visible */
    border: 1px solid rgba(255,255,255,0.15);

    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;

    outline: none;
    transition: all 0.3s ease;

    position: relative;
    z-index: 2;
}

/* placeholder */
.contacto-form input::placeholder,
.contacto-form textarea::placeholder {
    color: rgba(255,255,255,0.6);
}

/* focus */
.contacto-form input:focus,
.contacto-form textarea:focus {
    border-color: #4da3ff;
    box-shadow: 0 0 12px rgba(77,163,255,0.3);
    background: rgba(255,255,255,0.12);
}

/* textarea */
.contacto-form textarea {
    min-height: 110px;
    resize: none;
}

/* botón */
.contacto-form button {
    margin-top: 10px;
    padding: 14px;
    border-radius: 10px;

    background: linear-gradient(135deg, #1B75D0, #0A3D62);
    color: white;
    font-weight: 600;

    border: none;
    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 10px 25px rgba(27,117,208,0.25);

    position: relative;
    z-index: 2;
}

.contacto-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(27,117,208,0.35);
}

/* =========================
   ALERTAS
========================= */

.alerta-ok {
    background: rgba(0,255,180,0.1);
    color: #00ffc3;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
}

.alerta-error {
    background: rgba(255,0,0,0.1);
    color: #ff4d4d;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
}

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

@media (max-width: 900px) {

    .contacto-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contacto-info h2 {
        font-size: 30px;
        text-align: center;
    }

    .contacto-info p,
    .contacto-info ul,
    .contacto-datos {
        text-align: center;
    }

    .contacto-form {
        padding: 25px;
    }
}

/* =========================
   TOAST PRO
========================= */

.toast {
    position: fixed;
    top: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 22px;
    border-radius: 14px;
    backdrop-filter: blur(10px);
    background: rgba(15, 20, 30, 0.85);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    color: #fff;
    z-index: 9999;

    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.4s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ICONO */
.toast-icon {
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* TEXTO */
.toast-content strong {
    font-size: 15px;
    display: block;
}

.toast-content p {
    font-size: 13px;
    opacity: 0.7;
    margin: 2px 0 0;
}

/* VARIANTES */
.toast.success {
    border-left: 4px solid #00ffb4;
}

.toast.error {
    border-left: 4px solid #ff4d4d;
}

/* ANIMACIÓN ENTRADA */
.toast.show {
    animation: slideIn 0.5s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================
   WHATSAPP CHAT PRO
========================= */

.wsp-widget {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
}

/* BOTÓN */
.wsp-button {
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.wsp-button:hover {
    transform: scale(1.1);
}



section,
.nosotros-pro,
.servicios-pro,
.diferenciadores-pro,
.compliance-pro,
.cobertura-pro,
.rs-section,
.operativo-section,
.contacto-pro {
    padding-top: var(--section-space) !important;
    padding-bottom: var(--section-space) !important;
}

/* 🔥 EXCEPCIONES */
.hero {
    padding: 0 !important;
}


.footer-pro {
   position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, #155aa8, #082c4a);
    color: #fff;
    padding-top: 60px;

    border-top: 1px solid rgba(255,255,255,0.08)
}

/* CONTENEDOR */
.footer-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    padding: 0 6% 40px;
}

/* BRAND */
.footer-brand img {
    height: 60px;
    margin-bottom: 15px;
}

.footer-brand h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.footer-brand p {
    color: #9aa3b2;
    font-size: 14px;
    line-height: 1.6;
}

/* LINKS */
.footer-links h4 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #4da3ff;
}

.footer-links a {
    display: block;
    color: #9aa3b2;
    margin-bottom: 8px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(4px);
}

/* BOTTOM */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 15px 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    font-size: 13px;
    color: #9aa3b2;
}

/* REDES */
.footer-social a {
    color: #fff;
    margin-left: 15px;
    font-size: 16px;
    transition: 0.3s;
}

.footer-social a:hover {
    color: #4da3ff;
}

/* CRÉDITO */
.footer-credit {
    text-align: center;
    font-size: 12px;
    color: #6c7a96;
    padding: 10px 0 20px;
}

.footer-credit strong {
    color: #4da3ff;
}

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

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }

    .footer-social {
        margin-top: 10px;
    }
}.footer-pro::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        /* glow central */
        radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 60%),

        /* líneas horizontales */
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            transparent 2px,
            transparent 12px
        ),

        /* líneas verticales */
        repeating-linear-gradient(
            to right,
            rgba(255,255,255,0.01) 0px,
            rgba(255,255,255,0.01) 1px,
            transparent 2px,
            transparent 12px
        );

    pointer-events: none;
    z-index: 0;
}.footer-container,
.footer-bottom,
.footer-credit {
    position: relative;
    z-index: 2;
}.footer-links,
.footer-brand {
    background: rgba(255,255,255,0.03);
    padding: 20px;
    border-radius: 12px;
    backdrop-filter: blur(6px);

    border: 1px solid rgba(255,255,255,0.08);

    transition: all 0.3s ease;
}

.footer-links:hover,
.footer-brand:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 40px rgba(0,0,0,0.3),
        0 0 20px rgba(255,255,255,0.1);
}.footer-links a:hover {
    color: #fff;
    transform: translateX(5px);

    text-shadow: 0 0 10px rgba(255,255,255,0.4);
}.footer-social a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(255,255,255,0.1);

    margin-left: 10px;
    transition: 0.3s;
}

.footer-social a:hover {
    background: #fff;
    color: #0A3D62;
    transform: scale(1.1);
}

.footer-brand img {
    background: #ffffff;
    padding: 10px 16px;
    border-radius: 12px;

    display: inline-block;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.25);

    transition: all 0.3s ease;
}

.footer-brand img:hover {
    transform: scale(1.05);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.35),
        0 0 15px rgba(255,255,255,0.2);
}
.footer-brand img {
    max-width: 180px;
    height: auto;
}

.footer-pro::after {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.25); /* 🔥 unifica todo */
    pointer-events: none;
    z-index: 1;
}
.footer-address {
    margin-top: 25px;
    padding: 12px 15px;

    border-radius: 10px;

    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);

    font-size: 13px;
    color: #9aa3b2;

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

    backdrop-filter: blur(6px);

    transition: 0.3s;
}

.footer-address:hover {
    border-color: rgba(77,163,255,0.4);
    box-shadow: 0 0 15px rgba(77,163,255,0.15);
}


.theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9aa3b2;
    font-size: 13px;
}

.switch {
    width: 50px;
    height: 24px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
}

.switch::before {
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 3px;
    border-radius: 50%;
    transition: 0.3s;
}

/* ACTIVO (modo claro) */
body.light-mode .switch {
    background: #1B75D0;
}

body.light-mode .switch::before {
    transform: translateX(24px);
}

..theme-toggle {
    position: fixed; /* 🔥 CAMBIO CLAVE */
    top: 80px;
    right: 30px;

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

    padding: 6px 10px;
    border-radius: 20px;

    background: rgba(10,15,30,0.7);
    backdrop-filter: blur(10px);

    border: 1px solid rgba(77,163,255,0.2);
    box-shadow: 0 0 10px rgba(77,163,255,0.15);

    z-index: 99999; /* 🔥 más alto que todo */
}
.theme-toggle {
    top: 65px;
    right: 140px; /* ajusta según tu botón */
}

@media (max-width: 900px) {
    .theme-toggle {
        position: static;
        margin: 20px auto 0 auto;
        justify-content: center;
    }
}
.theme-toggle {
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 15px rgba(77,163,255,0.4),
        0 0 30px rgba(77,163,255,0.2);
}

/* =========================
   🌞 MODO CLARO PRO COMPLETO
========================= */

body.light-mode {
    background: #f4f7fb;
    color: #0a0a0a;
}

/* =========================
   HEADER
========================= */
body.light-mode .header {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
}

body.light-mode .nav a {
    color: #0a0a0a;
}

body.light-mode .btn-primary {
    background: linear-gradient(135deg, #1B75D0, #0A3D62);
    color: #fff;
}

/* =========================
   SECCIONES BASE
========================= */
body.light-mode section,
body.light-mode .nosotros-pro,
body.light-mode .servicios-pro,
body.light-mode .diferenciadores-pro,
body.light-mode .compliance-pro,
body.light-mode .cobertura-pro,
body.light-mode .rs-section,
body.light-mode .operativo-section,
body.light-mode .contacto-pro {
    background: #f4f7fb !important;
}

/* =========================
   TEXTOS
========================= */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3 {
    color: #0a0a0a;
}

body.light-mode p,
body.light-mode li {
    color: #4a5568;
}

/* =========================
   CARDS
========================= */
body.light-mode .card,
body.light-mode .stat-box,
body.light-mode .extra-card,
body.light-mode .dif-card,
body.light-mode .badge,
body.light-mode .rs-stats div {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* =========================
   SERVICIOS (overlay fix)
========================= */
body.light-mode .servicio-overlay {
    background: linear-gradient(
        to top,
        rgba(255,255,255,0.95),
        rgba(255,255,255,0.7),
        rgba(255,255,255,0.2),
        transparent
    );
}

body.light-mode .servicio-content h3 {
    color: #0a0a0a;
}

body.light-mode .servicio-content p {
    color: #4a5568;
}

/* =========================
   GRID TECNOLÓGICO (suavizado)
========================= */

body.light-mode .operativo-section::before,
body.light-mode .cobertura-pro::before,
body.light-mode .diferenciadores-pro::before {
    opacity: 0.2;
}

/* =========================
   🌞 SERVICIOS GRID VISIBLE
========================= */

body.light-mode .servicios-pro::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        /* glow */
        radial-gradient(circle at 50% 30%, rgba(27,117,208,0.06), transparent 60%),

        /* líneas horizontales */
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.04) 0px,
            rgba(0,0,0,0.04) 1px,
            transparent 2px,
            transparent 12px
        ),

        /* líneas verticales */
        repeating-linear-gradient(
            to right,
            rgba(0,0,0,0.03) 0px,
            rgba(0,0,0,0.03) 1px,
            transparent 2px,
            transparent 12px
        );

    z-index: 0;
    pointer-events: none;
}

/* =========================
   SERVICIOS HOVER TEXTO PRO
========================= */

/* estado normal (como lo tienes) */
.servicio-content p {
    color: rgba(255,255,255,0.85);
}

/* 🔥 HOVER */
.servicio-card:hover .servicio-content p {
    color: #ffffff;
}


/* =========================
   🌞 SERVICIOS EXTRA (LIGHT PRO)
========================= */

body.light-mode .servicios-extra {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
}

/* GRID TECNOLÓGICO SUAVE */
body.light-mode .servicios-extra::before {
    background:
        radial-gradient(circle at center, rgba(27,117,208,0.06), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.03) 0px,
            rgba(0,0,0,0.03) 1px,
            transparent 2px,
            transparent 10px
        );
}

/* =========================
   CARDS
========================= */

body.light-mode .extra-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);

    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* hover más elegante */
body.light-mode .extra-card:hover {
    transform: translateY(-6px);

    border-color: rgba(27,117,208,0.25);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.08),
        0 0 20px rgba(27,117,208,0.08);
}

/* =========================
   TEXTOS
========================= */

body.light-mode .extra-card h4 {
    color: #0a0a0a;
}

body.light-mode .extra-card p {
    color: #6b7280;
}

/* =========================
   ICONOS (MUY IMPORTANTE)
========================= */

body.light-mode .icono-servicio {
    filter: drop-shadow(0 0 8px rgba(27,117,208,0.4));
}

/* glow base */
body.light-mode .icono-wrap::before {
    background: radial-gradient(
        circle,
        rgba(27,117,208,0.18),
        rgba(27,117,208,0.05),
        transparent 70%
    );
}

/* radar más visible */
body.light-mode .icono-wrap::after {
    border: 1px solid rgba(27,117,208,0.25);
}

/* hover icono 🔥 */
body.light-mode .extra-card:hover .icono-servicio {
    filter: drop-shadow(0 0 15px rgba(27,117,208,0.7));
}

/* =========================
   TÍTULO SECCIÓN
========================= */

body.light-mode .servicios-extra h3 {
    color: #1B75D0;
}


/* =========================
   🌞 SERVICIOS EXTRA (LIGHT PRO)
========================= */

body.light-mode .servicios-extra {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
}

/* GRID TECNOLÓGICO SUAVE */
body.light-mode .servicios-extra::before {
    background:
        radial-gradient(circle at center, rgba(27,117,208,0.06), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.03) 0px,
            rgba(0,0,0,0.03) 1px,
            transparent 2px,
            transparent 10px
        );
}

/* =========================
   CARDS
========================= */

body.light-mode .extra-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);

    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* hover más elegante */
body.light-mode .extra-card:hover {
    transform: translateY(-6px);

    border-color: rgba(27,117,208,0.25);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.08),
        0 0 20px rgba(27,117,208,0.08);
}

/* =========================
   TEXTOS
========================= */

body.light-mode .extra-card h4 {
    color: #0a0a0a;
}

body.light-mode .extra-card p {
    color: #6b7280;
}

/* =========================
   ICONOS (MUY IMPORTANTE)
========================= */

body.light-mode .icono-servicio {
    filter: drop-shadow(0 0 8px rgba(27,117,208,0.4));
}

/* glow base */
body.light-mode .icono-wrap::before {
    background: radial-gradient(
        circle,
        rgba(27,117,208,0.18),
        rgba(27,117,208,0.05),
        transparent 70%
    );
}

/* radar más visible */
body.light-mode .icono-wrap::after {
    border: 1px solid rgba(27,117,208,0.25);
}

/* hover icono 🔥 */
body.light-mode .extra-card:hover .icono-servicio {
    filter: drop-shadow(0 0 15px rgba(27,117,208,0.7));
}

/* =========================
   TÍTULO SECCIÓN
========================= */

body.light-mode .servicios-extra h3 {
    color: #1B75D0;
}



/* =========================
   🌞 COBERTURA PRO (LIGHT)
========================= */

body.light-mode .cobertura-pro {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
}

/* GRID TECNOLÓGICO VISIBLE */
body.light-mode .cobertura-pro::before {
    background:
        radial-gradient(circle at center, rgba(27,117,208,0.06), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.03) 0px,
            rgba(0,0,0,0.03) 1px,
            transparent 2px,
            transparent 10px
        );
}

/* =========================
   CARDS
========================= */

body.light-mode .cobertura-card {
    border: 1px solid rgba(0,0,0,0.06);
    background: #ffffff;
}

/* IMAGEN */
body.light-mode .cobertura-card img {
    filter: brightness(0.95) contrast(1.05);
}

/* =========================
   OVERLAY CLAVE 🔥
========================= */

body.light-mode .cobertura-overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.65),   /* 🔥 oscuro abajo */
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.1),
        transparent
    );
}
/* =========================
   TEXTO
========================= */

body.light-mode .cobertura-content h3 {
    color: #ffffff;
}

body.light-mode .cobertura-content p {
    color: rgba(255,255,255,0.9);
}

/* =========================
   HOVER PRO
========================= */

body.light-mode .cobertura-card:hover {
    transform: translateY(-8px) scale(1.01);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.1),
        0 0 20px rgba(27,117,208,0.08);

    border-color: rgba(27,117,208,0.3);
}

/* imagen más viva */
body.light-mode .cobertura-card:hover img {
    filter: brightness(1.05) contrast(1.1);
}

/* título azul en hover 🔥 */
body.light-mode .cobertura-card:hover h3 {
    color: #1B75D0;
}

/* glow sutil */
body.light-mode .cobertura-card::before {
    background: radial-gradient(
        circle at center,
        rgba(27,117,208,0.08),
        transparent 70%
    );
}

/* =========================
   🌞 RADAR SYSTEM (LIGHT PRO)
========================= */

body.light-mode .rs-section {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
}

/* GRID TECNOLÓGICO */
body.light-mode .rs-section::before {
    background:
        radial-gradient(circle at center, rgba(27,117,208,0.05), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.03) 0px,
            rgba(0,0,0,0.03) 1px,
            transparent 2px,
            transparent 8px
        );
}

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

body.light-mode .rs-header h2 {
    color: #0a0a0a;
}

body.light-mode .rs-header p {
    color: #6b7280;
}

/* =========================
   RADAR 🔥 (clave)
========================= */

body.light-mode .rs-radar {
    filter: brightness(0.85) contrast(1.1);
}

/* anillos */
body.light-mode .rs-ring {
    border: 1px solid rgba(27,117,208,0.2);
}

/* líneas cruz */
body.light-mode .rs-radar::before,
body.light-mode .rs-radar::after {
    background: rgba(27,117,208,0.15);
}

/* sweep */
body.light-mode .rs-sweep {
    background: conic-gradient(
        rgba(27,117,208,0.25),
        transparent 40%
    );
}

/* centro */
body.light-mode .rs-core {
    background: #1B75D0;

    box-shadow:
        0 0 10px #1B75D0,
        0 0 25px rgba(27,117,208,0.4);
}

/* puntos */
body.light-mode .rs-dot {
    background: #1B75D0;
}

/* =========================
   STATS (lado derecho)
========================= */

body.light-mode .rs-stats div {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);

    border: 1px solid rgba(0,0,0,0.06);

    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* hover */
body.light-mode .rs-stats div:hover {
    border-color: rgba(27,117,208,0.3);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08),
        0 0 15px rgba(27,117,208,0.1);
}

/* números */
body.light-mode .rs-stats strong {
    color: #1B75D0;
}

/* texto */
body.light-mode .rs-stats span {
    color: #6b7280;
}

/* =========================
   TAGS SERVICIOS
========================= */

body.light-mode .rs-services span {
    background: rgba(27,117,208,0.08);
    color: #1B75D0;
}

body.light-mode .rs-services span:hover {
    background: #1B75D0;
    color: #fff;
}

/* =========================
   FEED (C5 panel)
========================= */

body.light-mode .rs-feed {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);

    border: 1px solid rgba(0,0,0,0.08);
}

/* eventos */
body.light-mode .rs-event {
    color: #4a5568;
}

/* alertas */
body.light-mode .rs-event.alert {
    color: #e63946;
}

/* header */
body.light-mode .rs-feed-header {
    color: #1B75D0;
}

/* punto live */
body.light-mode .live-dot {
    background: #1B75D0;
}
/* =========================
   RADAR
========================= */
body.light-mode .rs-section {
    background: #f4f7fb;
}

body.light-mode .rs-radar {
    filter: brightness(0.8);
}

/* =========================
   FORMULARIO
========================= */
body.light-mode .contacto-form {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
}

body.light-mode .contacto-form input,
body.light-mode .contacto-form textarea {
    background: #f1f5f9;
    color: #0a0a0a;
    border: 1px solid rgba(0,0,0,0.1);
}

body.light-mode .contacto-form input::placeholder,
body.light-mode .contacto-form textarea::placeholder {
    color: rgba(0,0,0,0.5);
}

/* =========================
   FOOTER
========================= */
body.light-mode .footer-pro {
    background: #0A3D62;
}

/* =========================
   WHATSAPP
========================= */
body.light-mode .wsp-bubble {
    background: #ffffff;
    color: #0a0a0a;
}

/* =========================
   TRANSICIÓN GLOBAL 🔥
========================= */
body,
section,
.card,
.dif-card,
.extra-card,
.badge,
.contacto-form,
.servicio-overlay {
    transition: all 0.4s ease;
}

/* =========================
   🌞 STATS PRO (LIGHT MODE)
========================= */

body.light-mode .stats-pro {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
}

/* overlay más sutil */
body.light-mode .stats-overlay {
    background:
        radial-gradient(circle at center, rgba(27,117,208,0.05), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.03) 0px,
            rgba(0,0,0,0.03) 1px,
            transparent 2px,
            transparent 8px
        );
}

/* cards */
body.light-mode .stat-box {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* números */
body.light-mode .stat-box h3 {
    color: #1B75D0;
}

/* texto */
body.light-mode .stat-box p {
    color: #6b7280;
}

/* línea superior */
body.light-mode .stat-box::before {
    background: #1B75D0;
    opacity: 0.4;
}

/* hover */
body.light-mode .stat-box:hover {
    border-color: rgba(27,117,208,0.3);
    box-shadow: 0 12px 30px rgba(27,117,208,0.1);
}
/* =========================
   🌞 NOSOTROS PRO — APPLE LEVEL
========================= */

body.light-mode .nosotros-pro {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
}

/* CONTENIDO */
body.light-mode .nosotros-info h2 {
    color: #0a0a0a;
}

body.light-mode .nosotros-info h2 span {
    color: #1B75D0;
}

body.light-mode .nosotros-info p {
    color: #4a5568;
}

/* TAG */
body.light-mode .tag {
    color: #1B75D0;
    opacity: 0.8;
}

/* DATOS */
body.light-mode .nosotros-data strong {
    color: #1B75D0;
}

body.light-mode .nosotros-data span {
    color: #6b7280;
}

/* =========================
   🎥 VIDEO APPLE STYLE
========================= */

body.light-mode .video-box {
    border: 1px solid rgba(0,0,0,0.06);

    /* glass effect */
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.08),
        0 0 0 rgba(0,0,0,0);
}

/* overlay más claro */
body.light-mode .video-overlay {
    background: linear-gradient(
        to top right,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.0)
    );
}

/* hover elegante */
body.light-mode .video-box:hover {
    transform: scale(1.02);

    box-shadow:
        0 30px 70px rgba(0,0,0,0.12),
        0 0 20px rgba(27,117,208,0.08);
}

/* =========================
   ✨ MICRO DETALLE PRO
========================= */

/* glow suave detrás */
body.light-mode .nosotros-pro::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 20% 30%, rgba(27,117,208,0.06), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(27,117,208,0.05), transparent 60%);

    pointer-events: none;
}

/* asegurar contenido arriba */
body.light-mode .nosotros-grid {
    position: relative;
    z-index: 2;
}

/* =========================
   🌙 SERVICIOS - TITULOS AZULES (DARK)
========================= */

.servicio-content h3 {
    color: #4da3ff; /* azul tech elegante */
}

/* hover opcional más pro */
.servicio-card:hover .servicio-content h3 {
    color: #6bbcff;
}

/* =========================
   🌞 OPERATIVO (LIGHT PRO)
========================= */

body.light-mode .operativo-section {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
}

/* GRID TECNOLÓGICO */
body.light-mode .operativo-section::before {
    background:
        radial-gradient(circle at center, rgba(27,117,208,0.05), transparent 60%),

        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.03) 0px,
            rgba(0,0,0,0.03) 1px,
            transparent 2px,
            transparent 10px
        ),

        repeating-linear-gradient(
            to right,
            rgba(0,0,0,0.02) 0px,
            rgba(0,0,0,0.02) 1px,
            transparent 2px,
            transparent 10px
        );
}

/* glow central más claro */
body.light-mode .operativo-section::after {
    background: radial-gradient(circle, rgba(27,117,208,0.08), transparent 70%);
}

/* =========================
   TITULOS
========================= */

body.light-mode .operativo-title {
    color: #0a0a0a;
}

body.light-mode .operativo-sub {
    color: #1B75D0;
}

/* =========================
   CARDS (PANEL OPERATIVO)
========================= */

body.light-mode .op-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);

    border: 1px solid rgba(0,0,0,0.06);

    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* hover */
body.light-mode .op-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08),
        0 0 15px rgba(27,117,208,0.1);
}

/* =========================
   ESTADOS 🔥
========================= */

/* activo */
body.light-mode .op-card.active {
    border-color: #1B75D0;

    box-shadow:
        0 0 20px rgba(27,117,208,0.25),
        0 10px 30px rgba(27,117,208,0.15);
}

/* alerta */
body.light-mode .op-card.alert {
    border-color: #e63946;

    box-shadow:
        0 0 20px rgba(230,57,70,0.25),
        0 10px 30px rgba(230,57,70,0.15);
}

/* =========================
   TEXTOS
========================= */

body.light-mode .op-card h3 {
    color: #0a0a0a;
}

body.light-mode .op-card p {
    color: #6b7280;
}

/* =========================
   ICONOS
========================= */

body.light-mode .op-icon {
    color: #1B75D0;
}

/* =========================
   LINEAS DE FLUJO
========================= */

body.light-mode .op-line {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(27,117,208,0.6),
        transparent
    );
}

/* =========================
   🌞 OPERATIVO (LIGHT PRO)
========================= */

body.light-mode .operativo-section {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
}

/* GRID TECNOLÓGICO */
body.light-mode .operativo-section::before {
    background:
        radial-gradient(circle at center, rgba(27,117,208,0.05), transparent 60%),

        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.03) 0px,
            rgba(0,0,0,0.03) 1px,
            transparent 2px,
            transparent 10px
        ),

        repeating-linear-gradient(
            to right,
            rgba(0,0,0,0.02) 0px,
            rgba(0,0,0,0.02) 1px,
            transparent 2px,
            transparent 10px
        );
}

/* glow central más claro */
body.light-mode .operativo-section::after {
    background: radial-gradient(circle, rgba(27,117,208,0.08), transparent 70%);
}

/* =========================
   TITULOS
========================= */

body.light-mode .operativo-title {
    color: #0a0a0a;
}

body.light-mode .operativo-sub {
    color: #1B75D0;
}

/* =========================
   CARDS (PANEL OPERATIVO)
========================= */

body.light-mode .op-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);

    border: 1px solid rgba(0,0,0,0.06);

    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* hover */
body.light-mode .op-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.08),
        0 0 15px rgba(27,117,208,0.1);
}

/* =========================
   ESTADOS 🔥
========================= */

/* activo */
body.light-mode .op-card.active {
    border-color: #1B75D0;

    box-shadow:
        0 0 20px rgba(27,117,208,0.25),
        0 10px 30px rgba(27,117,208,0.15);
}

/* alerta */
body.light-mode .op-card.alert {
    border-color: #e63946;

    box-shadow:
        0 0 20px rgba(230,57,70,0.25),
        0 10px 30px rgba(230,57,70,0.15);
}

/* =========================
   TEXTOS
========================= */

body.light-mode .op-card h3 {
    color: #0a0a0a;
}

body.light-mode .op-card p {
    color: #6b7280;
}

/* =========================
   ICONOS
========================= */

body.light-mode .op-icon {
    color: #1B75D0;
}

/* =========================
   LINEAS DE FLUJO
========================= */

body.light-mode .op-line {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(27,117,208,0.6),
        transparent
    );
}
/* =========================
   🌞 CONTACTO PRO (APPLE LEVEL)
========================= */

body.light-mode .contacto-pro {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
}

/* GRID TECNOLÓGICO SUAVE */
body.light-mode .contacto-pro::before {
    background:
        radial-gradient(circle at center, rgba(27,117,208,0.05), transparent 60%),
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.025) 0px,
            rgba(0,0,0,0.025) 1px,
            transparent 2px,
            transparent 10px
        );
}

/* =========================
   TEXTO
========================= */

body.light-mode .contacto-info h2 {
    color: #0a0a0a;
}

body.light-mode .contacto-info p,
body.light-mode .contacto-info li {
    color: #4a5568;
}

body.light-mode .contacto-datos p {
    color: #1B75D0;
}

/* =========================
   FORMULARIO 🔥
========================= */

body.light-mode .contacto-form {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);

    border: 1px solid rgba(0,0,0,0.06);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.08),
        0 0 20px rgba(27,117,208,0.05);
}

/* hover elegante */
body.light-mode .contacto-form:hover {
    border-color: rgba(27,117,208,0.3);

    box-shadow:
        0 30px 60px rgba(0,0,0,0.12),
        0 0 25px rgba(27,117,208,0.1);
}

/* =========================
   INPUTS
========================= */

body.light-mode .contacto-form input,
body.light-mode .contacto-form textarea {
    background: #f1f5f9;
    color: #0a0a0a;

    border: 1px solid rgba(0,0,0,0.08);
}

/* focus 🔥 */
body.light-mode .contacto-form input:focus,
body.light-mode .contacto-form textarea:focus {
    border-color: #1B75D0;

    box-shadow:
        0 0 0 3px rgba(27,117,208,0.15),
        0 0 10px rgba(27,117,208,0.1);
}

/* placeholder */
body.light-mode .contacto-form input::placeholder,
body.light-mode .contacto-form textarea::placeholder {
    color: rgba(0,0,0,0.5);
}

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

body.light-mode .contacto-form button {
    background: linear-gradient(135deg, #1B75D0, #0A3D62);

    box-shadow: 0 10px 25px rgba(27,117,208,0.25);
}

body.light-mode .contacto-form button:hover {
    box-shadow: 0 15px 35px rgba(27,117,208,0.35);
}

/* =========================
   ALERTAS
========================= */

body.light-mode .alerta-ok {
    background: rgba(0,200,150,0.1);
    color: #00a884;
}

body.light-mode .alerta-error {
    background: rgba(255,0,0,0.1);
    color: #e63946;
}
/* =========================
   🌞 FOOTER AZUL PRO
========================= */

body.light-mode .footer-pro {
    background: linear-gradient(135deg, #1B75D0, #0A3D62);
    color: #ffffff;
}

/* GRID TECNOLÓGICO */
body.light-mode .footer-pro::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 60%),
        repeating-linear-gradient(
            to right,
            rgba(255,255,255,0.06) 0px,
            rgba(255,255,255,0.06) 1px,
            transparent 2px,
            transparent 12px
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.05) 0px,
            rgba(255,255,255,0.05) 1px,
            transparent 2px,
            transparent 12px
        );

    opacity: 0.4;
    pointer-events: none;
}

/* =========================
   TEXTOS
========================= */

body.light-mode .footer-links h4 {
    color: #ffffff;
}

body.light-mode .footer-links a {
    color: rgba(255,255,255,0.8);
}

body.light-mode .footer-links a:hover {
    color: #ffffff;
}

/* brand */
body.light-mode .footer-brand p {
    color: rgba(255,255,255,0.8);
}

/* =========================
   BLOQUES (cards internas)
========================= */

body.light-mode .footer-links,
body.light-mode .footer-brand {
    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.1);

    backdrop-filter: blur(10px);
}

/* =========================
   REDES
========================= */

body.light-mode .footer-social a {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
}

body.light-mode .footer-social a:hover {
    background: #ffffff;
    color: #1B75D0;
}

/* =========================
   BOTTOM
========================= */

body.light-mode .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}

/* =========================
   CRÉDITO
========================= */

body.light-mode .footer-credit {
    color: rgba(255,255,255,0.6);
}

body.light-mode .footer-credit strong {
    color: #ffffff;
}

/* =========================
   TEXTOS BLANCOS EN FOOTER (LIGHT)
========================= */

body.light-mode .footer-brand h3 {
    color: #ffffff !important;
}

body.light-mode .footer-bottom p {
    color: #ffffff !important;
}

.video-box {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}

/* VIDEO */
.video-corporativo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* OVERLAY (NO BLOQUEA CLICKS) */
.video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    pointer-events: none; /* 🔥 CLAVE */
}

/* BOTÓN PLAY */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 70px;
    height: 70px;
    border-radius: 50%;

    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);

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

    color: #fff;
    font-size: 22px;
    cursor: pointer;

    z-index: 2;
    transition: 0.3s;
}

.play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.wsp-widget {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
}

/* BOTÓN */
.wsp-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    transition: 0.3s;
}

.wsp-button:hover {
    transform: scale(1.1);
}

/* BURBUJA */
.wsp-bubble {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 260px;
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;

    transition: 0.3s;
}

/* ACTIVO */
.wsp-bubble.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* HEADER */
.wsp-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
}

.wsp-status {
    color: #25D366;
    font-size: 12px;
}

/* TEXTO */
.wsp-bubble p {
    font-size: 13px;
    margin-bottom: 12px;
    color: #333;
}

/* BOTÓN CHAT */
.wsp-btn {
    display: block;
    text-align: center;
    background: #25D366;
    color: white;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.wsp-btn:hover {
    background: #1ebe5d;
}

.lang-switch {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.flag {
    width: 26px;
    height: auto;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flag:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(0, 150, 255, 0.6);
}
.btn-link-pro {
    display: inline-block;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 500;
    color: #2f80ed;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

.btn-link-pro::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: #2f80ed;
    transition: width 0.3s ease;
}

.btn-link-pro:hover {
    color: #1c5ed6;
}

.btn-link-pro:hover::after {
    width: 100%;
}

/* HERO */
.historia-hero-pro{
    height: 60vh;
    background: radial-gradient(circle at center, #0a1a2f, #050b15);
    display:flex;
    align-items:center;
    text-align:center;
}

/* TIMELINE */
.timeline{
    position:relative;
    margin-top:50px;
}

.timeline::before{
    content:'';
    position:absolute;
    left:50%;
    width:2px;
    height:100%;
    background:#0af;
}

.timeline-item{
    width:50%;
    padding:20px;
    position:relative;
    opacity:0;
    transform:translateY(50px);
    transition:0.6s;
}

.timeline-item.active{
    opacity:1;
    transform:translateY(0);
}

.timeline-item:nth-child(odd){
    left:0;
    text-align:right;
}

.timeline-item:nth-child(even){
    left:50%;
}

.timeline-dot{
    width:12px;
    height:12px;
    background:#0af;
    position:absolute;
    top:20px;
    left:calc(50% - 6px);
    border-radius:50%;
}

/* HISTORIA */
.historia-flex{
    display:flex;
    gap:40px;
    align-items:center;
}

.historia-img img{
    width:100%;
    border-radius:10px;
}

/* BLOQUES */
.bloques-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.bloque-card{
    background:rgba(255,255,255,0.05);
    padding:20px;
    border-radius:10px;
    transition:0.3s;
}

.bloque-card:hover{
    transform:translateY(-5px);
    box-shadow:0 0 15px rgba(0,255,255,0.2);
}

/* CTA */
.cta-pro{
    text-align:center;
    padding:60px 0;
}