:root {
    --verde: #22c55e;       /* verde moderno brillante */
    --verde-dark: #16a34a;

    --azul: #1e3a8a;        /* azul más elegante */
    --azul-dark: #0f172a;

    --gris: #64748b;

}/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




/* BODY */
body {
    font-family: 'Poppins', sans-serif;
    color: #1a1a1a;
    line-height: 1.6;
}
html {
    scroll-behavior: smooth;
}
/* TITULOS */
h1, h2, h3 {
    font-weight: 700;
}

h2 {    
    text-align: center;
    margin-bottom: 30px;
}
/* NAVBAR */
.navbar {
    position: fixed;
    height: 80px; /* Mantenemos tu altura fija */
    top: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(15px);
    z-index: 1000;
    /* ELIMINAMOS EL PADDING DE AQUÍ para no afectar la altura */
}


@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: #0f172a; /* mismo color de tu web */
    
    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-logo {
    width: 100px;
    animation: pulseLogo 1.5s infinite ease-in-out;
}

@keyframes pulseLogo {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}





.btn.primary {
    position: relative; 
    overflow: hidden;   
    
    /* REACTIVADA: Tu animación de pulso */
    animation: pulse 2s infinite; 
    
    /* Fondo limpio sin franjas raras */
    background: #28a745; 
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    color: white;
    cursor: pointer;
    font-weight: bold;
}

/* El brillo (solo se mueve con el hover) */
.btn.primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; 
    width: 60%; 
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.6), 
        transparent
    );
    transform: skewX(-30deg);
    transition: none; /* Evita que el brillo regrese "caminando" */
}

/* Solo se activa al tocar con el mouse */
.btn.primary:hover::before {
    left: 150%; 
    transition: all 0.7s ease; 
}

/* Tus Keyframes originales */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}



/* CONTENIDO NAV */
.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Empuja logo a un lado y menú al otro */
}
/* Para que el <nav> sea el que se mueva al centro */
nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}


/* LOGO */
.logo img {
    height: 65px;   /* ajusta tamaño */
    width: auto;
    object-fit: contain;
}

/* LINKS */
.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 500;
}

.nav-links a:hover {
    color: white;
}

/* BOTÓN PEQUEÑO */
.small {
    padding: 8px 16px;
    font-size: 14px;
}
/* HERO */
/* CONTENEDOR */
.container {
    max-width: 1100px;
    margin: auto;
}

/* HERO PRO */
/* HERO CON IMAGEN REAL */
/* HERO */
#hero {
    position: relative;
    height: 95vh;
    overflow: hidden;
    padding-top: 80px;
    
}

/* Esto anula el centrado del container solo dentro del hero */
#hero .container {
    max-width: 100% !important; /* Quitamos el límite de 1100px */
    margin: 0 !important;       /* Quitamos el auto-centrado */
    padding-left: 7%;           /* Mantenemos el margen visual que te gusta */
    display: flex;
    align-items: center;
    height: 100%;
}

.hero-content {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Ahora sí funcionará */
}

.hero-content .text-card-glass {
    /* Tu código actual se mantiene igual */
    margin-left: 0; 
    margin-right: auto;          /* Asegura que el espacio sobrante quede a la derecha */
}

/* Reemplaza o actualiza tu clase de la tarjeta del Hero con esto */
.hero-content .text-card-glass {
    /* 1. Fondo con transparencia mínima para dejar ver el color detrás */
    background: rgba(255, 255, 255, 0.03); /* transparencia real */
    backdrop-filter: blur(15px);          /* efecto vidrio */
    -webkit-backdrop-filter: blur(15px);
    margin-left: 0; 
    margin-right: auto;


    /* 3. El "Borde de Luz" o Reflejo */
    /* Usamos grosores diferentes para simular el canto del vidrio */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.4); 
    border-left: 1px solid rgba(255, 255, 255, 0.4);

    /* 4. Sombra con profundidad */
    /* Una sombra suave pero amplia para que la tarjeta parezca flotar */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 
                0 5px 15px rgba(0, 0, 0, 0.1);

    /* 5. Estilo y Espaciado */
    border-radius: 20px;
    padding: 45px;
    max-width: 650px;
    position: relative;
    overflow: hidden; /* Para que nada se salga de los bordes redondeados */
}

/* Efecto de Brillo Diagonal (Opcional para dar más realismo) */
.hero-content .text-card-glass::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.12),
        transparent
    );
    transform: rotate(30deg);
    pointer-events: none;
}


.text-card-glass h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 5rem;
    line-height: 0.95;
    letter-spacing: -3px;
    margin-bottom: 25px;

    color: #ffffff;

    text-shadow:
        0 2px 8px rgba(0,0,0,0.18);
}


.text-card-glass h1 .destacado{
    background: linear-gradient(90deg, #6fbf3d, #9df77f);
    
    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    display: inline-block;

    text-shadow: 0 0 20px rgba(120,255,120,0.25);
}

.text-card-glass p {
    font-weight: 300; /* Más delgado para contrastar con el título */
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9); /* Un blanco apenas transparente */
    margin-bottom: 35px;
    max-width: 90%;
}
/* SLIDER */
.hero-slider {
    position: absolute;
    width: 100%;
    height: 100%;
}
#hero .slide {
  transform: none !important;
  filter: none !important;
}

.slide {
    position: absolute;
    image-rendering: auto;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease-in-out;
    top: 0;
    left: 0;
     background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
        opacity: 0;
}

.slide.active {
    opacity: 1;
}

/* OVERLAY OSCURO */
/* .hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
} */

/* TEXTO */


/* BOTONES BIEN ALINEADOS */
.hero-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* CONTENIDO ENCIMA */
.hero-content {
    display: flex;
    align-items: center; 
    min-height: 80vh; 
    position: relative;
    z-index: 2;
    color: white;
    
    /* 1. Ajuste de posición */
    max-width: 1300px;    /* Ancho máximo del sitio */
    margin: 0 auto;       /* Centra el área de trabajo */
    padding-left: 20px;   /* Un espacio pequeño para que no pegue al borde del monitor */
    
    justify-content: flex-start; /* Alinea el cuadro al inicio (izquierda) */
}
/* TEXTO PRO */
.hero-content h1 {
    font-size: 64px;
    text-align: left;
    line-height: 1.05;
    margin-bottom: 20px;
    
}

.hero-content p {
    color: #cbd5f5;
    margin-bottom: 10px;
    animation: slideUp 1.3s ease forwards;
    opacity: 0;
}

/* BOTONES ALINEADOS PERFECTO */
.hero-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* HERO */
/* HERO TRABAJA */
.trabaja-hero {
    position: relative;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;

    /* 🔥 FONDO (puedes cambiar la imagen luego) */
    background: url('../img/oficina.jpg') center/cover no-repeat;
}

/* CAPA OSCURA ENCIMA (para que el texto se lea bien) */
.trabaja-hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        rgba(15, 23, 42, 0.85),
        rgba(30, 58, 138, 0.85)
    );
}


/* VACANTES */
/* =========================
   GRID
========================= */
/* =========================
   HEADER VACANTES
========================= */

.vacantes-heading{

    text-align:center;

    margin-bottom:60px;

    position:relative;
}

/* MINI TEXTO */

.vacantes-mini{

    display:block;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:6px;

    color:#99bc39;

    margin-bottom:14px;

    text-transform:uppercase;
}

/* TITULO */

.vacantes-title{

    font-size:4rem;

    font-weight:900;

    line-height:1;

    letter-spacing:-3px;

    color:#1d355d;

    position:relative;

    display:inline-block;
}

/* EFECTO PREMIUM */

.vacantes-title::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-18px;

    width:120px;

    height:4px;

    border-radius:50px;

    background:
        linear-gradient(
            to right,
            transparent,
            #99bc39,
            transparent
        );

    box-shadow:
        0 0 18px rgba(153,188,57,.25);
}

/* RESPONSIVE */

@media(max-width:768px){

    .vacantes-title{

        font-size:2.5rem;
    }

    .vacantes-mini{

        letter-spacing:3px;

        font-size:.75rem;
    }
}
.vacantes-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(300px,1fr));

    gap:30px;

    margin-top:60px;
}

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

.vacante-card{
    display:flex;

    flex-direction:column;

    position:relative;

    padding:35px;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f7fb
        );

    overflow:hidden;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    box-shadow:
        0 15px 40px rgba(79, 85, 100, 0.667);

    border:
        1px solid rgba(94, 151, 15, 0.5);
}

/* GLOW */

.vacante-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top left,
            rgba(153,188,57,.12),
            transparent 45%
        );

    opacity:0;

    transition:.5s ease;
}

/* HOVER */

.vacante-card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 25px 55px rgba(15,23,42,.14);
}

.vacante-card:hover::before{

    opacity:1;
}

/* =========================
   ICONO
========================= */

.vacante-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    background:
        linear-gradient(
            135deg,
            #99bc39,
            #739227
        );

    box-shadow:
        0 10px 25px rgba(153,188,57,.25);
}

.vacante-icon i{

    color:#fff;

    font-size:1.7rem;
}

/* =========================
   TITULO
========================= */

.vacante-card h3{

    font-size:1.7rem;

    font-weight:800;

    color:#1d355d;

    margin-bottom:14px;

    transition:.4s ease;
}

/* TEXTO */

.vacante-card p{

    color:#64748b;

    line-height:1.7;

    margin-bottom:28px;

    font-size:1rem;
    flex-grow:1;
}

/* HOVER TITULO */

.vacante-card:hover h3{

    color:#99bc39;
}




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

@media(max-width:768px){

    .vacante-card{

        padding:28px;
    }

    .vacante-card h3{

        font-size:1.4rem;
    }
}





/* BOTÓN SECUNDARIO */
.btn.secondary {
    border: 1px solid var(--verde);
    color: var(--verde);
    background: transparent;
    align-self:flex-start;
    min-width:180px;
    text-align:center;
     margin-top:auto;
}

.btn.secondary:hover {
    background: var(--verde);
    color: #fff;
}


/* BOTONES BONITOS */

.btn.primary {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn.primary::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    top: 0;
    left: -100%;
    transition: 0.4s;
}

.btn.primary:hover::after {
    left: 0;
}

.btn.primary:hover {
    transform: scale(1.05);
}



.btn {
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.primary {
    background: linear-gradient(135deg, var(--verde), var(--verde-dark));
    color: white;
}

.primary:hover {
    transform: translateY(-2px);
}

.ghost {
    border: 1px solid #94a3b8;
    color: #e2e8f0;
}

.ghost:hover {
    background: rgba(255,255,255,0.1);
}

/* SECCIONES */
section {
    padding: 70px 20px;
}

.section-padding {
    padding: 100px 0; /* Mucho espacio arriba y abajo */
}
/* GRID */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: auto;
}

/* CARDS */
.card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.card:hover {   
    transform: translateY(-8px);
}



/* TESTIMONIOS */
.testimonio {
    background: white;
    padding: 25px;
    border-radius: 10px;
    border-left: 5px solid #00aaff;
    font-style: italic;
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
}




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

.vacante-row {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0; /* Empieza invisible */
}

/* Retraso para que aparezcan una tras otra */
.vacante-row:nth-child(1) { animation-delay: 0.2s; }
.vacante-row:nth-child(2) { animation-delay: 0.4s; }
.vacante-row:nth-child(3) { animation-delay: 0.6s; }
.primary::after {

.vacante-row {
    transition: all 0.3s ease;
    border-left: 4px solid transparent; /* Borde oculto */
}

.vacante-row:hover {
    background-color: #f8f9fa; /* Un gris muy clarito */
    transform: scale(1.02); /* Crece un poquito */
    border-left: 4px solid #28a745; /* El verde de tu logo */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}



    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    top: -50%;
    left: -50%;
    transform: rotate(25deg);
    opacity: 0;
    transition: 0.5s;
}

.primary:hover::after {
    opacity: 1;
    left: 100%;
}
.primary {
    position: relative;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}

/* TEXTO */
.hero-text {
  font-size: 1.2rem;
  color: #faf8f8;
  border-left: 4px solid #1b3d47;
  padding-left: 15px;
}

.hero-text h1 {
    font-size: 60px;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-text p {
    font-size: 18px;
    color: #9ca3af;
    margin-bottom: 30px;
}

/* VISUAL (esto es el truco 🔥) */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #3b82f6, transparent);
    border-radius: 50%;
    filter: blur(40px);
    animation: float 4s ease-in-out infinite;
}

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






.social-float {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
    transition: all 0.3s ease;
}

.social-float a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--verde);
    color: white;

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

    font-size: 18px;
    transition: 0.3s;
}

.social-float a:hover {
    transform: scale(1.2) rotate(5deg);
    filter: brightness(1.1);
    background: #2563eb;
}

/* FACEBOOK */
.social-float a:nth-child(2) {
    background: #1877f2;
}

/* WHATSAPP */
.social-float a:nth-child(1) {
    background: #25D366;
}

/* INSTAGRAM (GRADIENTE PRO) */
.social-float a:nth-child(3) {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
}

/*letra de subir su hoja de vida*/
.cv-label{
    font-size: 12px;
    color: #777;
    display: block;
    margin-bottom: 6px;
}


/*contactofinal*/
/* =========================================================
SECTION
========================================================= */

.contact-section{

    position:relative;

    padding:120px 8%;

    background:
    linear-gradient(
        180deg,
        #f7f9fc,
        #eef3fa
    );

    overflow:hidden;
}

/* =========================================================
GLOW
========================================================= */

.contact-glow{

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(153,188,57,.10),
        transparent 70%
    );

    top:-250px;
    right:-180px;

    pointer-events:none;
}

/* =========================================================
LAYOUT
========================================================= */

.contact-container{

    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns: repeat(2,minmax(0,1fr));

    gap:50px;

    align-items:start;

    margin:0 auto 90px auto;

    max-width:1200px;

    width:100%;
}


.contact-left,
.contact-right{
    width:100%;
}
/* =========================================================
LEFT
========================================================= */

.contact-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:#eef5df;

    color:#88b71c;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;
}


.contact-left h2{

    font-size:clamp(42px,5vw,68px);

    line-height:.95;

    font-weight:900;

    color:#050e4f;

    margin-bottom:28px;
}

.contact-left h2 span{

    background:
    linear-gradient(
        90deg,
        #7acc0e,
        #120a83
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.contact-left p{

    font-size:18px;

    line-height:1.8;

    color:#64748b;

    max-width:580px;

    margin-bottom:50px;
}

/* =========================================================
INFO CARDS
========================================================= */
/* 1. Mover la lista completa de tarjetas hacia abajo para que el menú no las tape */
.contact-info-list{
    display:flex;
    flex-direction:column;
    gap:22px;
    width:100%;
}


/* 2. Rediseñar las tarjetas para alinearlas de lado izquierdo (Fila Horizontal) */
.info-card{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:20px;
    padding:28px;
    border-radius:28px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.6);
    transition:.45s ease;
    box-shadow:
    0 10px 25px rgba(15,23,42,.05);
}
.info-card:hover{

    transform:
    translateY(-6px)
    translateX(6px);

    box-shadow:
    0 25px 40px rgba(15,23,42,.10);
}


.info-wave{

    position:absolute;

    width:120px;
    height:120px;

    background:
    radial-gradient(
        rgba(153,188,57,.14),
        transparent 70%
    );

    right:-40px;
    top:-40px;

    opacity:0;

    transition:.4s ease;
}

.info-card:hover .info-wave{

    opacity:1;
}

.info-card:hover .info-wave{

    opacity:1;
}

.info-icon{

    width:68px;
    height:68px;

    min-width:68px;

    border-radius:22px;

    display:flex;

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

    background:
    linear-gradient(
        135deg,
        #99bc39,
        #7ea120
    );

    color:#fff;

    font-size:24px;

    box-shadow:
    0 12px 25px rgba(153,188,57,.25);

    flex-shrink:0;
}

.info-content{

    flex:1;

    text-align:left;
}


.info-content h4{

    margin-bottom:6px;

    font-size:22px;

    color:#071a35;
}

.info-content span{

    color:#64748b;

    font-size:15px;

    line-height:1.5;
}

/* =========================================================
RIGHT
========================================================= */

.contact-right{

    display:flex;


}

/* =========================================================
FORM BOX
========================================================= */

.contact-form-box{

    padding:45px;

    border-radius:38px;

    background:
    rgba(255,255,255,.82);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.7);

    box-shadow:
    0 25px 50px rgba(15,23,42,.08);
}

.form-top{

    margin-bottom:30px;
}

.contact-form-box h3{

    font-size:34px;

    color:#071a35;

    margin-bottom:10px;
}

.form-top p{

    color:#64748b;
}

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

.contact-form-box form{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.input-group{

    position:relative;
}

.input-group i{

    position:absolute;

    left:20px;
    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

    font-size:15px;
}

.textarea-group i{

    top:24px;
    transform:none;
}

.contact-form-box input,
.contact-form-box textarea{

    width:100%;

    padding:18px 20px 18px 55px;

    border-radius:18px;

    border:1px solid #e2e8f0;

    background:#ffffff;

    outline:none;

    font-size:16px;

    transition:.35s ease;
}

.contact-form-box textarea{

    min-height:150px;

    resize:none;
}

.contact-form-box input:focus,
.contact-form-box textarea:focus{

    border-color:#99bc39;

    box-shadow:
    0 0 0 4px rgba(153,188,57,.12);
}

/* =========================================================
BUTTON
========================================================= */

.contact-btn{

    border:none;

    padding:18px 24px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #99bc39,
        #7ea120
    );

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    display:flex;

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

    gap:12px;

    transition:.4s ease;

    box-shadow:
    0 15px 30px rgba(153,188,57,.25);
}

.contact-btn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 22px 40px rgba(153,188,57,.35);
}

/* =========================================================
MAP SECTION
========================================================= */

.contact-map-section{

    position:relative;

    z-index:2;
}

.map-header{

    text-align:center;

    margin-bottom:35px;
}

.map-header span{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:#eef5df;

    color:#88b71c;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;
}

.map-header h3{

    font-size:42px;

    color:#071a35;
}

/* =========================================================
MAP
========================================================= */

.contact-map{

    position:relative;

    overflow:hidden;

    border-radius:36px;

    box-shadow:
    0 25px 60px rgba(15,23,42,.12);
}

.contact-map iframe{

    width:100%;

    height:450px;

    border:none;

    display:block;
}

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

.map-floating-card{

    position:absolute;

    left:40px;
    bottom:40px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 22px;

    border-radius:24px;

    background:
    rgba(255,255,255,.92);

    backdrop-filter:blur(12px);

    box-shadow:
    0 15px 35px rgba(15,23,42,.12);
}

.map-floating-card i{

    width:55px;
    height:55px;

    border-radius:18px;

    display:flex;

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

    background:
    linear-gradient(
        135deg,
        #99bc39,
        #7ea120
    );

    color:#fff;

    font-size:22px;
}

.map-floating-card strong{

    display:block;

    color:#071a35;

    margin-bottom:4px;
}

.map-floating-card span{

    color:#64748b;

    font-size:14px;
}

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

    .contact-container{
        grid-template-columns:1fr;
    }

    .contact-left,
    .contact-right{
        max-width:100%;
    }

}


@media(max-width:768px){

    .contact-section{

        padding:90px 20px;
    }

    .contact-left h2{

        font-size:42px;
    }

    .contact-form-box{

        padding:30px;
    }

    .contact-map iframe{

        height:320px;
    }

    .map-floating-card{

        left:20px;
        right:20px;
        bottom:20px;
    }
}


footer {
    background: #0f172a;
    color: white;
    text-align: center;
    padding: 30px;
}

/* PAGINA FORMULARIO */
.form-page {
    height: 100vh;
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-container {
    background: white;
    padding: 40px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.form-container h1 {
    margin-bottom: 10px;
}

.form-container p {
    margin-bottom: 20px;
    color: #64748b;
}

/* FORM */
.formulario {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.formulario input,
.formulario textarea {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.formulario textarea {
    min-height: 100px;
    resize: none;
}

.volver {
    display: block;
    margin-top: 20px;
    color: #1e3a8a;
    text-decoration: none;
}
.formulario select {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-family: 'Poppins';
    background: white;
    cursor: pointer;
}


/* HERO ABOUT */
/* .about-hero {
    padding: 140px 20px 60px;
    text-align: center;
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: white;
}

/* SECCIONES */
.about-section {
    padding: 80px 20px;
    text-align: center;
} */

/* CONTADORES */
#stats {
    background: #0f172a;
    color: white;
    padding: 100px 20px;
    text-align: center;
}

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

.stat h2 {
    font-size: 50px;
    color: var(--verde);
}






/* === ANIMACIONES BASE === */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

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

/* efecto flotante suave */
.float {
    animation: float 4s ease-in-out infinite;
}

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



/*SERVICIOS EN OVALOS*/
/* =========================================================
   INTRO HEADER
========================================================= */

.servicios-intro{

    text-align:center;

    margin-bottom:90px;

    position:relative;

    z-index:5;
}
/* =========================================================
   EYEBROW
========================================================= */

.servicios-intro .eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:50px;

    background:
        rgba(40,167,69,.08);

    border:
        1px solid rgba(40,167,69,.15);

    color:#28a745;

    font-size:.78rem;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:28px;

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(10px);
}


/* brillo */

.servicios-intro .eyebrow::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.9),
            transparent
        );

    transform:skewX(-20deg);

    animation:
        eyebrowShine 4s linear infinite;
}

@keyframes eyebrowShine{

    0%{
        left:-120%;
    }

    100%{
        left:180%;
    }
}

/* =========================================================
   TITULO
========================================================= */

.servicios-intro h2 {

    font-size:
        clamp(2.4rem,5vw,5rem);

    font-weight:900;

    line-height:1.05;

    letter-spacing:-3px;

    margin-bottom:25px;

    position:relative;

    display:inline-block;

    /* GRADIENTE */
    background:
        linear-gradient(
            90deg,
            #04236586 0%,
            #1111959c 30%,
            #5ac815 70%,
            #ffffff 100%
        );

    background-size:300% auto;

    /* IMPORTANTE */
    color:transparent;

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

    /* ANIMACIÓN */
    animation:
        gradientFlow 6s linear infinite;

    /* glow */
    filter:
        drop-shadow(
            0 0 18px rgba(21,200,51,.18)
        );
}

/* gradient principal */

.servicios-intro h2 span {

    background:
        linear-gradient(
            90deg,
            #2563eb 0%,
            #28a745 100%
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-size:200% auto;

    animation:
        gradientFlow 6s linear infinite;

    position:relative;
}

/* glow detrás del texto */

.servicios-intro h2 span::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

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

    width:120%;

    height:120%;

    background:
        radial-gradient(
            circle,
            rgba(40,167,69,.18),
            transparent 70%
        );

    z-index:-1;

    filter:blur(20px);

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

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

@keyframes gradientFlow{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:200% center;
    }
}

@keyframes glowPulse{

    0%,100%{
        opacity:.6;
        transform:
            translate(-50%,-50%)
            scale(1);
    }

    50%{
        opacity:1;
        transform:
            translate(-50%,-50%)
            scale(1.08);
    }
}

/* =========================================================
   LINEA GUIA
========================================================= */

.linea-guia {

    width: 3px;

    height: 70px;

    margin: 30px auto 0;

    border-radius:50px;

    background:
        linear-gradient(
            to bottom,
            #2563eb,
            #28a745,
            transparent
        );

    position:relative;

    overflow:hidden;
}

/* luz moviéndose */

.linea-guia::before{

    content:"";

    position:absolute;

    top:-30%;

    left:0;

    width:100%;
    height:40px;

    background:
        rgba(255,255,255,.8);

    filter:blur(6px);

    animation:
        lineMove 2.5s linear infinite;
}

@keyframes lineMove{

    0%{
        top:-40%;
        opacity:0;
    }

    30%{
        opacity:1;
    }

    100%{
        top:120%;
        opacity:0;
    }
}

#servicios-nodos {
    padding: 100px 0;
    background: #fdfdfd;
    overflow: hidden;
    /* Fondo tecnológico sutil */
    background-image: url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3%3Fg fill-rule="evenodd"%3%3Fg fill="%2328a745" fill-opacity="0.03"%3%3Fpath d="M0 40L40 0H20L0 20M40 40V20L20 40H40z"/%3%3F/g%3%3F/g%3%3F/svg%3%3F');
}

.nodos-container {
    position: relative;
    height: 600px; /* Un poco más de alto para que las ventanitas tengan espacio */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Círculo Central */
.nodo-central {
    width: 150px;
    height: 150px;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
    z-index: 10;
    border: 2px solid #28a745;
    animation: pulseCore 3s infinite ease-in-out;
}

@keyframes pulseCore {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(40, 167, 69, 0.2); }
    50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(40, 167, 69, 0.4); }
}
.nodo-central img { width: 80px; }

/* --- BURBUJAS DE SERVICIO (NODOS) --- */
.nodo-servicio {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 50%; /* SIEMPRE CIRCULAR */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}

/* Posicionamiento y Animación de Flotación */
.s1 { top: 15%; left: 20%; animation: float 4s infinite ease-in-out; }
.s2 { top: 15%; right: 20%; animation: float 5s infinite ease-in-out; }
.s3 { bottom: 15%; left: 20%; animation: float 4.5s infinite ease-in-out; }
.s4 { bottom: 15%; right: 20%; animation: float 5.5s infinite ease-in-out; }

.nodo-servicio:hover {
    transform: scale(1.1); /* Solo crece un poquito */
    z-index: 30;
    background: white;
    box-shadow: 0 15px 30px rgba(40, 167, 69, 0.2);
}

.nodo-servicio i {
    font-size: 2rem;
    color: #28a745;
}



.nodo-servicio::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    transition: 0.6s;
    opacity: 0;
}

.nodo-servicio:hover::after {
    opacity: 1;
    left: 100%;
    top: 100%;
}

/* --- LA VENTANITA DE INFORMACIÓN (POP-UP) --- */
.nodo-info {
    position: absolute;
    /* Aparece por defecto ARRIBA */
    bottom: 120%; 
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    width: 240px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 15px;
    border: 1px solid #28a745;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    
    color: #444;
    font-size: 0.85rem;
    pointer-events: none; /* Para que no estorbe al click */
}

/* Mostrar ventanita al hover */
.nodo-servicio:hover .nodo-info {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Ajuste para que las ventanitas de arriba salgan hacia ABAJO */
.s1 .nodo-info, .s2 .nodo-info {
    bottom: auto;
    top: 120%;
    transform: translateX(-50%) translateY(-10px);
}
.s1:hover .nodo-info, .s2:hover .nodo-info {
    transform: translateX(-50%) translateY(0);
}

/* --- DECORACIÓN Y RED NEURAL --- */
.servicios-wrapper::before, .servicios-wrapper::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; height: 70%;
    border-radius: 50%;
    border: 1px dashed rgba(40, 167, 69, 0.1);
    z-index: 1;
    animation: rotateNet 60s infinite linear;
}

@keyframes rotateNet {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

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




.dashboard-panel {
    background: #b9d295; /* Fondo oscuro tipo sistema */
    border-radius: 30px;
    padding: 40px;
    display: flex;
    justify-content: center; /* Centra las tarjetas */
    gap: 25px;               /* Reduce el espacio entre ellas */
    padding: 20px 30px;      /* Menos espacio interno para que sea más delgada */
    max-width: 1100px;       /* Controla el ancho total para que no se estire de más */
    margin: 0 auto;          /* Centra todo el bloque en la página */
    border: 1px solid #333;
    box-shadow: 0 30px 60px rgba(255, 254, 254, 0.3);
    margin-bottom: 80px; /* 🔥 separa del bloque negro */
}


.panel-item {
    flex:1;
    min-width: 200px;        /* Evita que se aplasten demasiado */
    max-width: 300px;        /* ¡AQUÍ CONTROLAS EL TAMAÑO! Limita qué tan ancha puede ser */
    padding: 20px;
    background: rgba(255, 255, 255, 0.4); /* Un toque de transparencia */
    border-radius: 20px;
    transition: all 0.4s ease;
    border: 1px solid transparent;
    font-size: 0.9rem;
}



.panel-icon {
    font-size: 1.5rem;
    color: #28a745;
    margin-bottom: 10px;
    text-shadow: 0 0 15px rgba(40, 167, 69, 0.5);
}


.panel-item:hover {
    background: rgba(232, 241, 241, 0.884);
    border: 1px solid #28a745;
    transform: scale(1.05);
}
.panel-item h3 {
    font-size: 1.1rem;       /* Título más compacto */
    margin-bottom: 8px;
}


/*TITULO DE EXPERIENCIA- TRAYECTORIA*/
/* =========================
   HERO TITLE
========================= */

.titulo-hero{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:40px 20px;

    position:relative;

    overflow:hidden;
}

/* =========================
   EXPERIENCIA QUE
========================= */

.titulo-small{

    font-size:1.4rem;

    font-weight:700;

    letter-spacing:6px;

    text-transform:uppercase;

    color:#090e5d93;

    margin-bottom:14px;

    opacity:0;

    transform:translateX(-180px);

    transition:
        transform 3s cubic-bezier(.22,1,.36,1),
        opacity 3s ease;

    will-change:transform, opacity;
}

/* =========================
   TRANSFORMA
========================= */

.titulo-big{

    font-size:5rem;

    font-weight:900;

    line-height:.9;

    letter-spacing:-5px;

    text-transform:uppercase;

    background:
        linear-gradient(
            90deg,
            #7ae309,
            #060574
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:
        0 10px 30px rgba(44,182,72,.18);

    opacity:0;

    transform:
        translateY(120px)
        scale(.9);

    transition:
        transform 2s cubic-bezier(.22,1,.36,1),
        opacity 2s ease;

    will-change:transform, opacity;
}

/* =========================
   NEGOCIOS
========================= */

.titulo-bottom{

    font-size:3rem;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:-2px;

    color:#5db81293;

    margin-top:10px;

    opacity:0;

    transform:translateX(180px);

    transition:
        transform 1.1s cubic-bezier(.22,1,.36,1),
        opacity 1.1s ease;

    will-change:transform, opacity;
}

/* =========================
   LINEA
========================= */

.titulo-hero::after{

    content:"";

    width:120px;

    height:4px;

    border-radius:20px;

    margin-top:30px;

    background:
        linear-gradient(
            to right,
            transparent,
            #021687,
            transparent
        );

    opacity:0;

    transform:scaleX(.5);

    transition:
        opacity 1s ease .7s,
        transform 1s ease .7s;
}

/* =========================
   SHOW
========================= */

.titulo-hero.show .titulo-small{

    opacity:1;

    transform:translateX(0);
}

.titulo-hero.show .titulo-big{

    opacity:1;

    transform:
        translateY(0)
        scale(1);
}

.titulo-hero.show .titulo-bottom{

    opacity:1;

    transform:translateX(0);
}

.titulo-hero.show::after{

    opacity:1;

    transform:scaleX(1);
}

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

@media(max-width:768px){

    .titulo-hero{

        padding:20px 15px;
    }

    .titulo-big{

        font-size:3.5rem;

        letter-spacing:-2px;
    }

    .titulo-bottom{

        font-size:2rem;
    }

    .titulo-small{

        font-size:1rem;

        letter-spacing:3px;
    }
}



.decoracion-linea {
    width: 60px;
    height: 4px;
    background: #28a745;
    margin: 20px auto 0;
    border-radius: 10px;
}






/**/
/* =========================================================
   WHY PRO SECTION
========================================================= */

.why-pro {

    background: #0f172a;

    color: white;

    padding: 120px 20px;

    position: relative;

    overflow: hidden;
}

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

.why-header{

    text-align:center;

    margin-bottom:100px;

    position:relative;

    z-index:2;
}

/* =========================================================
   BADGE
========================================================= */

.why-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border:1px solid rgba(153,188,57,.2);

    border-radius:50px;

    background:
        rgba(153,188,57,.06);

    color:var(--verde-bc);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:28px;

    backdrop-filter:blur(10px);

    position:relative;

    overflow:hidden;

    box-shadow:
        0 0 25px rgba(153,188,57,.08);
}

/* brillo badge */

.why-badge::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    animation:
        badgeSweep 4s linear infinite;
}

@keyframes badgeSweep{

    0%{
        left:-100%;
    }

    100%{
        left:120%;
    }
}

/* =========================================================
   TITULO
========================================================= */

.why-header h2{

    font-size:clamp(2.2rem,4vw,4rem);

    line-height:2;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:25px;

    background:
        linear-gradient(
            90deg,
            #9af348bd 0%,
            #052e7a 35%,
            var(--verde-bc) 100%
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-size:200% auto;

    animation:
        gradientMove 6s linear infinite;

    position:relative;

    z-index:2;
}

/* movimiento gradient */

@keyframes gradientMove{

    0%{
        background-position:0% center;
    }

    100%{
        background-position:200% center;
    }
}

/* =========================================================
   SUBTEXTO OPCIONAL
========================================================= */

.why-header p{

    max-width:700px;

    margin:auto;

    color:#b1bdce;

    line-height:1.8;

    font-size:1rem;
}

/* =========================================================
   GLOW DECORATIVO
========================================================= */

.why-pro::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:
        radial-gradient(
            circle,
            rgb(15, 3, 150),
            transparent 70%
        );

    top:-200px;
    left:-150px;

    filter:blur(60px);

    z-index:0;

    animation:
        glowFloat 8s ease-in-out infinite;
}

.why-pro::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:
        radial-gradient(
            circle,
            rgba(153,188,57,.15),
            transparent 70%
        );

    bottom:-200px;
    right:-100px;

    filter:blur(60px);

    z-index:0;

    animation:
        glowFloat2 10s ease-in-out infinite;
}

@keyframes glowFloat{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }
}

@keyframes glowFloat2{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(30px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* =========================================================
   LINEA TIMELINE
========================================================= */

.why-line {

    position: relative;

    max-width: 750px;

    margin: auto;

    padding-left: 40px;

    z-index:2;
}

/* línea vertical */

.why-line::before {

    content: "";

    position: absolute;

    left: 9px;

    top: 0;

    width: 3px;

    height: 100%;

    background:
        linear-gradient(
            to bottom,
            #2563eb,
            var(--verde-bc),
            transparent
        );

    border-radius:20px;
}

/* =========================================================
   ITEMS
========================================================= */

.why-item {

    position: relative;

    margin-bottom: 50px;

    display: flex;

    align-items: flex-start;

    gap: 25px;

    transition:.4s ease;
}

/* hover item */

.why-item:hover{

    transform:translateX(8px);
}

/* =========================================================
   DOT
========================================================= */

.why-dot {

    width: 20px;

    height: 20px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            var(--verde-bc)
        );

    border-radius: 50%;

    box-shadow:
        0 0 20px rgba(153,188,57,.55);

    flex-shrink: 0;

    margin-top: 5px;

    position:relative;

    transition:.4s ease;
}

/* anillo */

.why-dot::before{

    content:"";

    position:absolute;

    inset:-7px;

    border-radius:50%;

    border:1px solid rgba(153,188,57,.25);

    animation:
        pulseDot 2.5s infinite;
}

@keyframes pulseDot{

    0%{
        transform:scale(.8);
        opacity:1;
    }

    100%{
        transform:scale(1.6);
        opacity:0;
    }
}

/* hover dot */

.why-item:hover .why-dot {

    transform:
        scale(1.25);

    box-shadow:
        0 0 30px rgba(153,188,57,.8);
}

/* =========================================================
   CONTENT
========================================================= */

.why-content{

    background:
        rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.04);

    padding:24px;

    border-radius:20px;

    backdrop-filter:blur(12px);

    transition:.4s ease;

    width:100%;
}

/* hover card */

.why-item:hover .why-content{

    border-color:
        rgba(153,188,57,.18);

    background:
        rgba(255,255,255,.05);

    transform:
        translateY(-4px);
}

/* titulo */

.why-content h3 {

    margin-bottom: 10px;

    font-size: 1.3rem;

    font-weight:700;

    color:white;

    transition:.3s ease;
}

/* hover titulo */

.why-item:hover h3 {

    color: var(--verde-bc);
}

/* texto */

.why-content p {

    color: #cbd5e1;

    line-height:1.8;

    font-size:.97rem;
}

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

@media(max-width:768px){

    .why-header h2{

        font-size:2.3rem;
    }

    .why-line{

        padding-left:25px;
    }

    .why-content{

        padding:20px;
    }
}









#btnTop {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: var(--verde);
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: none; /* oculto al inicio */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: all 0.3s ease;
}

#btnTop:hover {
    transform: translateY(-5px) scale(1.1);
    background: var(--verde-dark);
}




/*este es para el titulo de EXPERIENCIA DELL HTML NOSOTROS*/
/* =========================
   CONTENEDOR
========================= */

.contenedor-titulo-animado {

    width: 100%;

    display: flex;

    justify-content: center;

    overflow: hidden;

    margin-top: 20px;
}

/* =========================
   TITULO
========================= */

.titulo-seccion {

    font-size: 4rem;

    font-weight: 700;

    background:
        linear-gradient(
            90deg,
            #1cbc07,
            #090268
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    padding-bottom: 15px;

    position: relative;

    display: inline-block;
}

/* =========================
   ANIMACION IZQUIERDA
========================= */

.deslizar-izquierda {

    opacity: 0;

    transform: translate3d(-120px,0,0);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,1,.36,1);

    will-change: transform, opacity;
}

/* CUANDO APARECE */

.deslizar-izquierda.show {

    opacity: 1;

    transform: translate3d(0,0,0);
}

/* =========================
   LINEA INFERIOR
========================= */

.titulo-seccion::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 60px;

    height: 4px;

    background: #1cbc07;

    border-radius: 2px;

    opacity: 0;
}

/* ACTIVA LINEA */

.deslizar-izquierda.show::after {

    opacity: 1;

    animation:
        moverLinea 3s linear infinite .10s;
}

/* =========================
   ANIMACION LINEA
========================= */

@keyframes moverLinea {

    0% {

        left: 0;

        transform: translateX(0);
    }

    50% {

        left: 100%;

        transform: translateX(-100%);
    }

    100% {

        left: 0;

        transform: translateX(0);
    }
}


/*ESTA ES LA SECCION EXPERIENCIA PERO LA LINEA DE TIEMPO*/
.timeline-section {
    padding: 80px 20px;
    background: #f8fafc;
    text-align: center;
}

.timeline {
    max-width: 800px;
    margin: auto;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #70c94a, #17326f);
    transform: translateX(-50%);
    border-radius: 10px;
}

.timeline-item {
    display: flex;
    justify-content: flex-end;
    padding: 15px 0;
    position: relative;
}

.timeline-item:nth-child(even) {
    justify-content: flex-start;
}



.timeline-content {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease-in-out;
    width: 35%;
    
    /* Fondo semi-transparente para suavizar el impacto */
    background: rgba(15, 23, 42, 0.9); 
    backdrop-filter: blur(10px); /* Efecto de desenfoque muy elegante */
    
    padding: 25px;
    border-radius: 20px; /* Bordes más redondeados */
    
    /* Borde fino y brillante en lugar de uno sólido */
    border: 1px solid rgba(34, 197, 94, 0.3); 
    
    /* Sombra más suave y extendida */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); 
    position: relative;
    color: #f8fafc;
}

/* La barra lateral ahora es un degradado sutil */
.timeline-content {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease;
    width: 35%;
    
    /* Fondo blanco o ligeramente gris para que no choque */
    background: #ffffff; 
    padding: 25px;
    border-radius: 15px;
    
    /* En lugar de un fondo oscuro, usamos un borde sutil */
    border: 1px solid #e2e8f0; 
    
    /* Sombra muy suave "tipo Apple" */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); 
    
    position: relative;
    color: #334155; /* Texto en gris oscuro profesional, no negro puro */
}

/* El toque de tu marca: una línea delgada y elegante arriba */
.timeline-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1e3a8a, #22c55e); /* Degradado de tu logo */
    border-radius: 12px 12px 0 0;
}

/* Títulos con el azul de tu logo para que se vea corporativo */
.timeline-content h3 {
    color: #1e3a8a;
    font-size: 1.2rem;
    margin-bottom: 8px;
    font-weight: 700;
}

/* Efecto Hover: se eleva sutilmente y resalta el verde */
.timeline-content:hover {
    transform: translateY(-5px);
    border-color: #22c55e; /* Cambia al verde de tu logo al tocarlo */
    box-shadow: 0 10px 25px rgba(34, 197, 94, 0.1);
}




.timeline-content.show {
    opacity: 1;
    transform: translateY(0);
}

.timeline-dot {
    width: 14px;
    height: 14px;
    background: #09345b;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.7);
}
.timeline-section {
    padding: 100px 20px;
    min-height: 100vh;
}




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

.corporate-section {
    padding: 100px 20px;
    background: radial-gradient(circle at top, var(--azul), var(--azul-dark));
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.corporate-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;

    background: radial-gradient(
        circle,
        rgba(34,197,94,0.15),
        transparent 70%
    );

    filter: blur(80px);
    z-index: 0;
}

/* TITULO DE CONOCENOS MEJOR*/
/* =========================
   WRAPPER
========================= */




.titulo-wrapper{

    font-size: 4.5rem !important; /* Título monumental */
  font-weight: 900 !important;
  color: #002e5b !important; /* Azul oscuro corporativo */
  line-height: 0.9 !important;
  margin-bottom: 35px !important;
  letter-spacing: -2px;
}

/* =========================
   TITULO
========================= */

.split-title{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-transform:uppercase;

    line-height:.88;
}

/* =========================
   CONOCENOS
========================= */

.top-word{

    font-size:5rem;

    font-weight:900;

    letter-spacing:-5px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #98a3c4,
            #687daf
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    opacity:0;

    transform:
        translateX(-250px)
        skewX(-10deg);

    transition:
        1.1s cubic-bezier(.22,1,.36,1);

    text-shadow:
        0 10px 30px rgba(0,0,0,.2);
}
/* =========================
   MEJOR
========================= */

.bottom-word{

    font-size:4rem;

    font-weight:900;

    letter-spacing:10px;

    color:#99bc39a1;

    margin-top:8px;

    opacity:0;

    transform:
        translateX(250px)
        skewX(10deg);

    transition:
        1.1s cubic-bezier(.22,1,.36,1);

    text-shadow:
        0 10px 25px rgba(0,0,0,.2);
}

/* =========================
   SHOW
========================= */

.split-title.show .top-word{

    opacity:1;

    transform:
        translateX(0)
        skewX(0);
}

.split-title.show .bottom-word{

    opacity:1;

    transform:
        translateX(0)
        skewX(0);
}

/* =========================
   LINEA
========================= */

.split-title::after{

    content:"";

    position:absolute;

    bottom:-22px;

    left:50%;

    transform:translateX(-50%);

    width:180px;

    height:5px;

    border-radius:50px;

    background:
        linear-gradient(
            to right,
            transparent,
            #99bc39,
            transparent
        );

    opacity:0;

    transition:1s ease .8s;

    filter:blur(.3px);
}

.split-title.show::after{

    opacity:1;
}

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

@media(max-width:768px){

    .top-word{
        font-size:2.7rem;
        letter-spacing:-1px;
        transform:none;
    }

    .bottom-word{
        font-size:2rem;
        letter-spacing:3px;
        transform:none;
    }
}
/* GRID */
.corp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 70px;
}

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

.corp-card {
    background:
        linear-gradient(#020617, #020617) padding-box,
        linear-gradient(120deg, var(--verde), transparent) border-box;
    border-radius: 18px;
    padding: 45px 35px;
    text-align: left;
    position: relative;

    border: 1px solid transparent;

    transition: all 0.35s ease;

    box-shadow: 0 15px 35px rgba(0,0,0,0.5);

    overflow: hidden;
}

/* HOVER */
.corp-card:hover {
    transform: translateY(-12px);
    border-color: var(--verde);

    box-shadow:
        0 25px 50px rgba(0,0,0,0.7);
}

/* EFECTO LUZ DINÁMICA */
.corp-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(34,197,94,0.15),
        transparent
    );

    transition: 0.6s;
}

.corp-card:hover::before {
    left: 100%;
}

/* =========================
   ICONO
========================= */

.icon-box {
    width: 55px;
    height: 55px;

    background: linear-gradient(135deg, var(--verde), var(--azul));
    border-radius: 12px;

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

    margin-bottom: 20px;

    box-shadow: 0 10px 20px rgba(34,197,94,0.2);
}

.icon-box i {
    color: #fff;
    font-size: 20px;
}

/* TITULO */
.corp-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* TEXTO */
.corp-card p {
    font-size: 15px;
    color: #94a3b8;
    line-height: 1.8;
}

/* =========================
   VALORES
========================= */

.corp-values {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.corp-values li {
    font-size: 14px;
    color: #cbd5f5;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
}

/* ICONO LISTA */
.corp-values li::before {
    content: "●";
    color: var(--verde);
    font-size: 10px;
    margin-top: 6px;
}

.corp-values strong {
    color: #fff;
}





/* BENEFICIOS*/
.beneficios-texto {
  padding: 80px 20px;
  text-align: center;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  color: #fff;
}

.beneficios-texto h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #00e5ff;
  margin: 10px auto 0;
  border-radius: 2px;
}

.beneficios-lista {
  margin-top: 30px;
}

.beneficio-item {
  font-size: 18px;
  color: #444;
  margin: 15px auto;
  max-width: 600px;
  padding: 15px 20px;
  border-radius: 10px;
  background: #f5f5f5;

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

/* efecto hover */
.beneficio-item:hover {
  transform: scale(1.05);
  background: #e0f7fa;
}

/* cuando aparece */
.beneficio-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/*este es para la seccion trabaja con nosotros*/
.trabaja-header {
  position: relative;
  height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: url('../img/trabaja.png') center/cover no-repeat;
  color: white;
}


/* contenido */
.contenido {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

/* etiqueta pequeña */
.tagline {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 15px;
  color: #58b23d;
}

/* título más fuerte */
.trabaja-header h1 {
  font-size: 56px;
  font-weight: 700;
  margin-bottom: 20px;

  text-shadow: 0 5px 20px rgba(0,0,0,0.5);


}

/* línea decorativa */


/* texto */
.trabaja-header p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 30px;

  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.3s;
}

/* botón */
.btn-hero {
  display: inline-block;
  padding: 14px 30px;
  background: linear-gradient(to right, #2b4277, #2b4277);
  color: #ebebeb;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;

  transition: all 0.3s ease;

  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.6s;
}

.btn-hero:hover {
  background: linear-gradient(to right, #396b2a, #396b2a);
  transform: scale(1.08);
  box-shadow: 0 10px 25px rgba(0,229,255,0.4);
}

/* animación */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}











/*SECION_DE_MODALIDAD_DE_TRABAJO*/
/* =========================================
SECTION
========================================= */

.modalidad-section{

    position:relative;

    padding:120px 0;

    background:
    linear-gradient(
    to bottom,
    #ffffff,
    #f7f9ff
    );

    overflow:hidden;
}

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

.modalidad-heading{

    text-align:center;

    margin-bottom:90px;
}

.modalidad-mini{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    background:#eef5e3;

    color:#7da51f;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:25px;
}

.modalidad-heading h2{

    font-size:58px;

    font-weight:900;

    line-height:1.1;

    margin-bottom:25px;

    color:#08142b;
}

.modalidad-heading .intro{

    max-width:760px;

    margin:auto;

    font-size:20px;

    line-height:1.8;

    color:#61708a;
}

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

.modalidades-floating{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:40px;

    align-items:start;
}

/* =========================================
FLOATING EFFECT
========================================= */

.modo-1{

    margin-top:80px;

    animation:floatCard1 5s ease-in-out infinite;
}

.modo-2{

    animation:floatCard2 5s ease-in-out infinite;
}

.modo-3{

    margin-top:80px;

    animation:floatCard3 5s ease-in-out infinite;
}

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

.modo-card{

    position:relative;

    padding:45px;

    border-radius:34px;

    background:#ffffff;

    border:1px solid #edf0f7;

    overflow:hidden;

    transition:.45s ease;

    box-shadow:
    0 15px 40px rgba(15,23,42,.05);

    z-index:1;
}

/* =========================================
MOVING BACKGROUND
========================================= */

.modo-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    background:
    radial-gradient(
    circle,
    rgba(153,188,57,.18),
    transparent 70%
    );

    top:-80px;
    right:-80px;

    transition:.5s ease;
}

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

.modalidades-floating:hover .modo-card{

    opacity:.45;

    transform:scale(.96);
}

.modalidades-floating .modo-card:hover{

    opacity:1 !important;

    transform:
    translateY(-16px)
    scale(1.03);

    border-color:#99bc39;

    box-shadow:
    0 30px 60px rgba(153,188,57,.18);
}

/* =========================================
ICON
========================================= */

.modo-icon{

    width:95px;
    height:95px;

    border-radius:28px;

    display:flex;

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

    font-size:42px;

    margin-bottom:35px;

    background:
    linear-gradient(
    135deg,
    #99bc39,
    #7fa125
    );

    box-shadow:
    0 15px 35px rgba(153,188,57,.28);

    position:relative;

    z-index:2;

    transition:.4s ease;
}

.modo-card:hover .modo-icon{

    transform:
    rotate(-6deg)
    scale(1.08);
}

/* =========================================
NUMBER
========================================= */

.modo-number{

    position:absolute;

    top:35px;
    right:35px;

    font-size:65px;

    font-weight:900;

    color:#f1f4fa;

    line-height:1;
}

/* =========================================
TEXT
========================================= */

.modo-card h3{

    font-size:34px;

    font-weight:900;

    margin-bottom:20px;

    color:#0d1b38;

    position:relative;

    z-index:2;
}

.modo-card p{

    font-size:17px;

    line-height:1.9;

    color:#66758f;

    position:relative;

    z-index:2;
}

/* =========================================
GLOW BALL
========================================= */

.modo-glow{

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(153,188,57,.18),
    transparent 70%
    );

    bottom:-90px;
    left:-90px;

    animation:pulseGlow 4s ease infinite;
}

/* =========================================
ANIMATIONS
========================================= */

@keyframes floatCard1{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }
}

@keyframes floatCard2{

    0%{
        transform:translateY(-10px);
    }

    50%{
        transform:translateY(10px);
    }

    100%{
        transform:translateY(-10px);
    }
}

@keyframes floatCard3{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }
}

@keyframes pulseGlow{

    0%{
        transform:scale(1);
        opacity:.6;
    }

    50%{
        transform:scale(1.2);
        opacity:1;
    }

    100%{
        transform:scale(1);
        opacity:.6;
    }
}



/* =======================================================
   SECCIÓN SOBRE NOSOTROS - VERSIÓN ULTRA-INMERSIVA (FOTO CUADRADA)
   ======================================================= */

.about-immersive {
  padding: 160px 5%;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* --- TEXTO GIGANTE DE FONDO --- */
.background-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25vw; /* Tamaño monumental basado en el ancho de pantalla */
  font-weight: 900;
  color: rgba(0, 46, 91, 0.03); /* Azul corporativo ultra-tenue */
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
}

.immersive-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  position: relative;
  z-index: 1;
  gap: 80px; /* Mayor espacio para elegancia */
}

/* --- CONTENEDOR DE IMAGEN (AHORA CUADRADA PREMIUM) --- */
.visual-container {
  position: relative;
  display: flex;
  justify-content: center;
}

.tech-frame {
  position: relative;
  width: 100%;
  max-width: 650px;
  /* Bordes redondeados elegantes */
  border-radius: 40px; 
  overflow: hidden;
  /* Sombra profunda para efecto premium */
  box-shadow: 0 50px 100px rgba(0, 46, 91, 0.2); 
  transition: all 0.5s ease;
}

.hero-img {
  width: 100%;
  display: block;
  /* Zoom ligero por defecto para interactividad */
  transform: scale(1.05); 
  transition: transform 0.8s ease;
  filter: saturate(1.1); /* Ligera saturación para la foto oscura */
}

/* Interacción sutil: la foto se aleja un poco */
.tech-frame:hover .hero-img {
  transform: scale(1);
}

/* Resplandor neón suave detrás de la imagen (sutil) */
.neon-glow {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  box-shadow: inset 0 0 40px rgba(140, 198, 63, 0.15); /* Verde lima */
  pointer-events: none;
}

/* --- CONTENEDOR DE INFORMACIÓN --- */
.info-container {
  padding-left: 20px;
}

.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 6px;
  color: #8cc63f; /* Verde lima de tu marca */
  font-weight: 800;
  display: block;
  margin-bottom: 25px;
}

.main-heading {
  font-size: 4.5rem !important; /* Título monumental */
  font-weight: 900 !important;
  color: #002e5b !important; /* Azul oscuro corporativo */
  line-height: 0.9 !important;
  margin-bottom: 35px !important;
  letter-spacing: -2px;
}

.main-heading span {
  color: #8cc63f; /* Resaltamos la palabra clave en verde */
}

.summary {
  font-size: 1.25rem;
  color: #475569;
  line-height: 1.8;
  max-width: 500px;
  /* Detalle de línea elegante a la derecha */
  border-right: 5px solid #002e5b; 
  padding-right: 25px;
  text-align: right;
  margin-left: auto; /* Alínea el párrafo a la derecha */
}



/*estilos permanentes*/
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

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

/* ======================================================
   SISTEMA GLOBAL DE ANIMACIONES REUTILIZABLE
====================================================== */

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

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

/* Variantes */

.animar-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s ease;
}

.animar-left.show {
    opacity: 1;
    transform: translateX(0);
}

.animar-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s ease;
}

.animar-right.show {
    opacity: 1;
    transform: translateX(0);
}

.animar-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease;
}

.animar-scale.show {
    opacity: 1;
    transform: scale(1);
}

/* Delay opcional */

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }






/* =========================================
RADAR CYBER BENEFITS BCORP
CSS AISLADO COMPLETAMENTE
NO AFECTA OTROS BOTONES NI SECCIONES
========================================= */
.radar-section{

    position: relative;

    padding: 120px 8%;

    min-height: 100vh;

    background:
    radial-gradient(
        circle at top,
        #13233d 0%,
        #0b1220 45%,
        #050816 100%
    );

    overflow: hidden;
}

/* =========================================
CONTAINER
========================================= */

.radar-section .radar-container{

    position: relative;

    z-index: 2;
}

/* =========================================
FONDO GLOW
========================================= */

.radar-section .radar-bg{

    position:absolute;

    width:700px;
    height:700px;

    background:#bc3939;

    opacity:.12;

    border-radius:50%;

    filter: blur(140px);

    top:50%;
    left:50%;

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

/* =========================================
TOP
========================================= */

.radar-section .radar-top{

    text-align:center;

    max-width:800px;

    margin:auto auto 100px;
}

/* MINI TAG */

.radar-section .radar-mini-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    border:1px solid rgba(153,188,57,.25);

    color:#99bc39;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:25px;

    backdrop-filter: blur(10px);

    background:
        rgba(255,255,255,0.03);

    box-shadow:
        0 0 25px rgba(153,188,57,.08);
}

/* TITULO */

.radar-section .radar-top h2{

    font-size:60px;

    color:#ffffff;

    line-height:1.1;

    margin-bottom:25px;

    font-weight:800;
}

.radar-section .radar-top h2 span{

    color:#99bc39;
}

/* TEXTO */

.radar-section .radar-top p{

    color:#94a3b8;

    font-size:18px;

    line-height:1.8;
}

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

.radar-section .radar-wrapper{

    position:relative;

    width:700px;
    height:700px;

    margin:auto;
}

/* =========================================
CIRCULOS
========================================= */

.radar-section .radar-circle{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(153,188,57,.12);

    top:50%;
    left:50%;

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

.radar-section .circle-1{
    width:250px;
    height:250px;
}

.radar-section .circle-2{
    width:450px;
    height:450px;
}

.radar-section .circle-3{
    width:650px;
    height:650px;
}

/* =========================================
LINEAS
========================================= */

.radar-section .radar-line{

    position:absolute;

    background:
        rgba(153,188,57,.15);
}

.radar-section .horizontal{

    width:100%;
    height:1px;

    top:50%;
    left:0;
}

.radar-section .vertical{

    width:1px;
    height:100%;

    top:0;
    left:50%;
}

/* =========================================
SCAN
========================================= */

.radar-section .radar-scan{

    position:absolute;

    width:50%;
    height:50%;

    top:50%;
    left:50%;

    transform-origin: top left;

    background:
    linear-gradient(
        45deg,
        rgba(226, 237, 197, 0.507) 0%,
        rgba(140, 191, 29, 0.281) 35%,
        transparent 70%
    );

    filter: blur(2px);

    animation: radarScan 8s linear infinite;
}

/* =========================================
CENTRO
========================================= */

.radar-section .radar-center{

    position:absolute;

    width:130px;
    height:130px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #99bc39,
        #1d355d
    );

    top:50%;
    left:50%;

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

    display:flex;

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

    box-shadow:
        0 0 40px rgba(153,188,57,.35);

    animation:pulseCenter 3s infinite;
}

.radar-section .center-glow{

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        rgba(153,188,57,.25);

    filter:blur(40px);
}

.radar-section .radar-center i{

    color:#ffffff;

    font-size:50px;

    position:relative;

    z-index:2;
}

/* =========================================
ITEMS
========================================= */

.radar-section .radar-item{

    position:absolute;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;
}

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

.radar-section .radar-item i{

    width:75px;
    height:75px;

    border-radius:50%;

    display:flex;

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

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(153,188,57,.18);

    backdrop-filter: blur(10px);

    color:#99bc39;

    font-size:28px;

    box-shadow:
        0 0 30px rgba(153,188,57,.08);

    transition:.4s ease;
}

/* HOVER ICONOS */

.radar-section .radar-item:hover i{

    transform:scale(1.15);

    box-shadow:
        0 0 40px rgb(159, 199, 38);
}

/* =========================================
INFO
========================================= */

.radar-section .radar-info{

    text-align:center;

    max-width:180px;
}

.radar-section .radar-info h3{

    color:#ffffff;

    font-size:20px;

    margin-bottom:8px;
}

.radar-section .radar-info p{

    color:#94a3b8;

    font-size:14px;

    line-height:1.6;
}

/* =========================================
PULSE
========================================= */

.radar-section .radar-pulse{

    position:absolute;

    width:90px;
    height:90px;

    border-radius:50%;

    border:1px solid rgba(153,188,57,.25);

    animation:radarPulse 2s infinite;
}

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

.radar-section .item-1{
    top:5%;
    left:50%;
    transform:translateX(-50%);
}

.radar-section .item-2{
    top:22%;
    right:5%;
}

.radar-section .item-3{
    bottom:22%;
    right:5%;
}

.radar-section .item-4{
    bottom:5%;
    left:50%;
    transform:translateX(-50%);
}

.radar-section .item-5{
    bottom:22%;
    left:5%;
}

.radar-section .item-6{
    top:22%;
    left:5%;
}

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

@keyframes radarScan{

    from{
        transform:rotate(0deg);
    }

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

@keyframes radarPulse{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(1.6);
        opacity:0;
    }
}

@keyframes pulseCenter{

    0%{
        box-shadow:
            0 0 20px rgba(153,188,57,.25);
    }

    50%{
        box-shadow:
            0 0 55px rgba(153,188,57,.5);
    }

    100%{
        box-shadow:
            0 0 20px rgba(153,188,57,.25);
    }
}

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

/* =========================================
PROTECCION BOTONES GLOBALES
========================================= */

.btn-primary,
button{

    position:relative;

    z-index:9999;
}




/* =========================
   CTA FOOTER ELEGANTE
========================= */
#cta {
  position: relative;
  width: 100%;
  margin-top: 80px;
  padding: 80px 7%; /* Más espacio para que respire */
  background: #07152d;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Efecto de luces difusas en el fondo */
.luces-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.luz {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
}

.luz-1 {
  width: 300px;
  height: 300px;
  background: #00ff88; /* Verde corporativo */
  top: -100px;
  right: -50px;
}

.luz-2 {
  width: 400px;
  height: 400px;
  background: #007bff; /* Azul corporativo */
  bottom: -150px;
  left: -100px;
}

.cta-contenido {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

/* Tipografía y Textos */
.cta-texto h2 {
  color: #fff;
  font-size: clamp(24px, 4vw, 36px); /* Tamaño fluido */
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 800;
  background: linear-gradient(to right, #fff, #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-texto p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
  max-width: 580px;
}

.cta-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

/* Dirección con Glassmorphism mejorado */
.direccion {
  padding: 12px 20px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  backdrop-filter: blur(15px); /* Efecto cristal */
}

/* Botón con estilo "Glow" */
.btn-cta {
  padding: 14px 32px;
  background: #fff;
  color: #07152d;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

.btn-cta:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
  background: #00ff88; /* Cambio al verde de la marca en hover */
  color: #07152d;
}

/* Logo con animación suave */
.cta-logo img {
  width: 100%;
  max-width: 180px;
  filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.2));
  animation: flotar 6s ease-in-out infinite;
}

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



/* =========================
   IDIOMA BOTON LIMPIO
========================= */

.language-dropdown{
    position: fixed !important;
    top: 20px !important;
    right: 30px !important;
    z-index: 999999 !important;
}

/* BOTON */
.lang-btn{
    height: 50px !important;
    padding: 0 16px !important;

    border-radius: 50px !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;

    cursor: pointer;
}

/* ELIMINAR FONDO BLANCO */
.lang-btn::before,
.lang-btn::after{
    display: none !important;
    content: none !important;
}

/* ICONO */
.lang-btn .fa-globe{
    color: white !important;
    font-size: 24px !important;
}

/* OCULTAR TEXTO ES */
#current-lang{
    display: inline-block !important;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    margin-left: 8px;
}

/* OCULTAR FLECHA */
.lang-btn .fa-caret-down{
    display: none !important;
}

/* MENU */
.lang-menu{
    position: absolute;
    top: 60px;
    right: 0;

    display: none;
    flex-direction: column;

    background: rgba(20,20,20,0.95);
    backdrop-filter: blur(10px);

    border-radius: 15px;
    overflow: hidden;

    min-width: 180px;

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

/* MOSTRAR MENU */
.language-dropdown.active .lang-menu{
    display: flex;
}

/* OPCIONES */
.lang-option{
    padding: 14px 18px;
    color: white;
    cursor: pointer;
    transition: .3s;
    font-family: 'Poppins', sans-serif;
}

.lang-option:hover{
    background: rgba(104,167,40,0.2);
}

/*CLIENTES*/
/* =========================
   HERO EXPERIENCIA
========================= */

.hero-experiencia{
    position: relative;
    min-height: 90vh;
    background: linear-gradient(135deg,#061b36,#0c2d5a,#123f78);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:120px 8%;
}

.hero-overlay{
    position:absolute;
    width:700px;
    height:700px;
    background:rgba(0,255,170,.08);
    border-radius:50%;
    filter:blur(80px);
    top:-200px;
    right:-100px;
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
    text-align:center;
    color:white;
}

.hero-badge{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    padding:12px 22px;
    border-radius:40px;
    font-size:14px;
    display:inline-block;
    margin-bottom:25px;
    backdrop-filter:blur(10px);
}

.hero-content h1{
    font-size:70px;
    line-height:1.1;
    font-weight:700;
    margin-bottom:25px;
}

.hero-content h1 span{
    color:#37d67a;
}

.hero-content p{
    font-size:20px;
    line-height:1.8;
    color:#dbe7ff;
    margin-bottom:40px;
}

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

.btn-hero{
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.4s;
}

.btn-hero.primary{
    background:#8ac310;
    color:#477e04;
}

.btn-hero.primary:hover{
    transform:translateY(-5px);
}

.btn-hero.secondary{
    border:2px solid rgba(255,255,255,.2);
    color:white;
}

.btn-hero.secondary:hover{
    background:white;
    color:#316407;
}

.hero-stats{
    margin-top:60px;
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}

.stat-box{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    padding:25px 35px;
    border-radius:20px;
    min-width:180px;
}

.stat-box h3{
    font-size:35px;
    color:#9ed637;
    margin-bottom:10px;
}

.stat-box span{
    color:#dfe8ff;
    font-size:15px;
}





/* =========================
   CLIENTES SECTION BASE
========================= */

.clientes-section{
    position:relative;
    padding:100px 8%;
    background:linear-gradient(180deg,#f7fbff,#eef4ff);
}

/* HEADER */

.clientes-header{

    position: relative;

    text-align: center;

    max-width: 900px;

    margin: 0 auto 90px auto;

    padding: 40px 20px;

    overflow: hidden;
}

.clientes-subtitulo{

    display:inline-block;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--verde-bc);

    margin-bottom:20px;

    position:relative;
}

.clientes-header h2{

    font-size: clamp(2.2rem, 5vw, 4rem);

    line-height: .95;

    font-weight: 800;

    margin-bottom: 25px;

    letter-spacing: -3px;

    position: relative;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            #70cd29 0%,
            
            #0a12a6 100%
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}

/* =========================
   LÍNEA SUPERIOR
========================= */

.clientes-badge-line{

    width: 90px;
    height: 4px;

    margin: 0 auto 25px auto;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--verde-bc),
            transparent
        );

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

@keyframes pulseLine{

    0%{
        opacity:.4;
        transform:scaleX(.8);
    }

    50%{
        opacity:1;
        transform:scaleX(1);
    }

    100%{
        opacity:.4;
        transform:scaleX(.8);
    }
}




.clientes-header h2 span{
    color:#0c63e7;
}

.clientes-header p{

    font-size:1.05rem;

    line-height:1.9;

    color:#071c79;

    max-width:700px;

    margin:0 auto;

    position:relative;

    z-index:2;
}

/* =========================
   GLOW
========================= */

.clientes-glow{

    position:absolute;

    width:400px;
    height:400px;

    background:
        radial-gradient(
            circle,
            rgba(153,188,57,0.18),
            transparent 70%
        );

    top:-120px;
    left:50%;

    transform:translateX(-50%);

    filter:blur(40px);

    z-index:1;

    animation:
        glowMove 6s ease-in-out infinite;
}

@keyframes glowMove{

    0%{
        transform:
            translateX(-50%)
            scale(1);
    }

    50%{
        transform:
            translateX(-50%)
            scale(1.15);
    }

    100%{
        transform:
            translateX(-50%)
            scale(1);
    }
}
/* =========================
   WRAPPER CENTRADO PREMIUM
========================= */

.clientes-wrapper{
    max-width:780px;   /* 👈 antes 1100px */
    margin:0 auto;

    padding:25px 20px;

    background:rgba(255,255,255,.55);
    backdrop-filter:blur(14px);

    border-radius:28px;

    box-shadow:0 18px 50px rgba(0,0,0,.06);
}
/* =========================
   MARQUEE
========================= */

.clientes-marquee{
    overflow:hidden;
    border-radius:18px;
    position:relative;
}

/* fade laterales */
.clientes-marquee::before,
.clientes-marquee::after{
    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.clientes-marquee::before{
    left:0;
    background:linear-gradient(to right, #eef4ff, transparent);
}

.clientes-marquee::after{
    right:0;
    background:linear-gradient(to left, #eef4ff, transparent);
}

/* TRACK */
.marquee-track{
    display:flex;
    width:max-content;
    animation:scroll 20s linear infinite;
}

/* GROUP */
.marquee-group{
    display:flex;
    align-items:center;
    gap:50px;   /* 👈 antes 60px */
    padding:0 25px;
}

/* LOGOS COLOR PREMIUM */
.marquee-group img{
    height:52px;
    width:auto;
    object-fit:contain;

    filter:grayscale(0%) brightness(1);
    opacity:.85;

    transition:all .4s ease;
}

/* HOVER */
.marquee-group img:hover{
    transform:scale(1.15);
    opacity:1;

    filter:drop-shadow(0 10px 25px rgba(12,99,231,.25));
}

/* ANIMACIÓN INFINITA */
@keyframes scroll{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

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

@media(max-width:768px){

    .clientes-section{
        padding:80px 5%;
    }

    .clientes-header h2{
        font-size:38px;
    }

    .clientes-wrapper{
        padding:25px 15px;
    }

    .marquee-group{
        gap:40px;
    }

    .marquee-group img{
        height:42px;
    }
}






:root {
    --azul-bc: #1d355d;
    --verde-bc: #99bc39;
    --dark-bg: #0f172a;
}

/* =========================
   CONTENEDOR PRINCIPAL
========================= */

.split-refined {
    display: flex;
    height: 60vh;

    background: var(--dark-bg);

    font-family: 'Montserrat', sans-serif;

    border-radius: 24px;

    margin: 20px;

    overflow: hidden;

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

/* =========================
   LADO VISUAL / LOGO
========================= */

.visual-side {

    width: 30%;

    background:
        radial-gradient(
            circle at top left,
            rgba(255,255,255,0.08),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #1d355d 0%,
            #13233d 100%
        );

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

    position: relative;

    overflow: hidden;
}

/* Glow detrás del logo */

.visual-side::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.12),
            transparent 70%
        );

    z-index:1;
}

/* Línea decorativa superior */

.visual-side::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255,255,255,0.15),
            transparent
        );
}

/* LOGO */

.mini-logo {

    width: 120px;

    position: relative;

    z-index: 3;

    filter:
        drop-shadow(0 12px 30px rgba(164, 255, 197, 0.577));

    transition: .45s ease;
}

/* Hover elegante */

.visual-side:hover .mini-logo{

    transform:
        scale(1.05)
        translateY(-3px);
}

/* Línea decorativa */

.line-decorator {

    position: absolute;

    bottom: 18%;

    width: 70px;
    height: 3px;

    background:
        linear-gradient(
            to right,
            var(--verde-bc),
            transparent
        );

    border-radius: 20px;

    opacity: .9;

    z-index: 2;
}

/* =========================
   LADO INFO
========================= */

.info-side {

    width: 70%;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #f8fafc
        );

    padding: 80px;

    display: flex auto;
    align-items: center;
}

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

.card-container {
    display: flex ;
    flex-wrap: wrap; /* Si la pantalla es chica, baja la tarjeta completa */
    gap: 15px;      /* Espaciado ordenado entre tarjetas */
}

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

.info-card {
    display: flex;
	flex-direction: column;
    align-items: center;
    min-width: 200px; /* Evita que se aplasten de más */
    flex: 1;          /* Distribuye el espacio equitativamente */
}



/* Glow hover */

.info-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:0%;
    height:100%;

    background:
        linear-gradient(
            to right,
            rgba(153,188,57,0.08),
            transparent
        );

    transition:.5s ease;
}

/* Hover */

.info-card:hover {

    border-left: 2px solid var(--verde-bc);

    transform:
        translateY(-6px)
        translateX(4px);
}

.info-card:hover::before{
    width:100%;
}

/* Número */

.card-num {

    font-size: 2.6rem;

    font-weight: 800;

    color: var(--azul-bc);

    margin-bottom: 14px;

    line-height: 1;

    letter-spacing: -1px;
}

/* Texto */

.card-text {
    display: flex auto;
    flex-direction: column; /* Coloca el icono arriba y el texto abajo si es necesario */
    white-space: normal;    /* CRUCIAL: Permite que el texto salte de línea */
    word-wrap: break-word;  /* Rompe palabras si son excesivamente largas */
}

/* Icono */

.card-text i {

    color: var(--verde-bc);

    font-size: 1rem;

    transition: .3s ease;
    
}

.info-card:hover i{

    transform: scale(1.15);

    text-shadow:
        0 0 15px rgba(216, 232, 171, 0.705);
}

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



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

.animar{

    opacity:0;

    transform: translateY(8px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.22,1,.36,1);

    will-change: transform, opacity;
}

.animar.show{

    opacity:1;

    transform: translateY(0);
}
/* Cards */

/* =========================
   APARICIÓN PREMIUM
========================= */

.motion-item{

    position: relative;

    overflow: hidden;

    opacity: 0;

    transform: translateY(70px);

    transition:
        opacity .8s ease,
        transform .8s ease;

    border-left: 2px solid #e2e8f0;

    background: transparent;
}

/* APARECE */

.motion-item.show{

    opacity:1;

    transform:translateY(0);
}

/* =========================
   BARRIDO VERDE
========================= */

.motion-item::after{

    content:"";

    position:absolute;

    top:0;
    left:-150%;

    width:180%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(153,188,57,0.35) 45%,
            rgba(153,188,57,0.12) 65%,
            transparent 100%
        );

    transform:
        skewX(-20deg);

    z-index:1;

    pointer-events:none;
}

/* CUANDO APARECE */

.motion-item.show::after{

    animation:
    greenSweep 3.5s ease forwards;
}

/* ANIMACIÓN */

@keyframes greenSweep{

    0%{
        left:-150%;
    }

    100%{
        left:180%;
    }
}

/* CONTENIDO ENCIMA */

.motion-item > *{

    position:relative;

    z-index:2;
}

/* DELAYS */

.motion-item:nth-child(1){
    transition-delay: .15s;
}

.motion-item:nth-child(2){
    transition-delay: .45s;
}

.motion-item:nth-child(3){
    transition-delay: .75s;
}   
/* Movimiento constante */

.motion-item.show{

    animation:
        floatingCard 4s ease-in-out infinite;
}

@keyframes floatingCard{

    0%{
        transform: translateY(0px);
    }

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

    100%{
        transform: translateY(0px);
    }
}

/* Logo vivo */

.mini-logo{

    animation:
        logoFloat 5s ease-in-out infinite;
}

@keyframes logoFloat{

    0%{
        transform: translateY(0px);
    }

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

    100%{
        transform: translateY(0px);
    }
}




/* Porque nos eligen */

.manifiesto {
    padding: 120px 10%;           /* Faltaban : y ; */
    background: #dadadf82;        /* Faltaban : y ; */
    display: grid;                /* Faltaban : y ; */
    grid-template-columns: 1fr 2fr; /* Faltaban : */
    gap: 60px;                    /* Faltaba ; */
}
/* HEADER */
.manifiesto-header h2{
    font-size:46px;
    margin-bottom:15px;
    font-weight:700;
    letter-spacing:-0.5px;

    background: linear-gradient(
        90deg,
        #0fac24,
        #062a8e,
        #0fac24
    );

    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shineText 4s linear infinite;
}

@keyframes shineText{
    0%{background-position:0% center;}
    100%{background-position:200% center;}
}

.manifiesto-header p{
    color:#2d452b;
    line-height:1.8;
    font-size:16px;
    max-width:420px;
    opacity:.85;
}

/* LINEA VERTICAL */
.linea{
    position:absolute;
    left:0;
    top:0;
    width:2px;
    height:100%;
    background:linear-gradient(
        180deg,
        #1d4ed8,
        #25D366
    );
    box-shadow:0 0 20px rgba(29, 216, 41, 0.836);
}

/* BLOQUES */
.bloques{
    padding-left:35px;
    display:flex;
    flex-direction:column;
    gap:38px;
}

/* TITULOS */
.bloque h3{
    font-size:20px;
    color:#043478;
    margin-bottom:6px;
    font-weight:600;
    letter-spacing:-0.3px;
}

/* TEXTO */
.bloque p{
    font-size:14px;
    color:#1d4692;
    line-height:1.7;
    opacity:.8;
}

/* WHATSAPP */
.bloque.highlight h3{
    color:#25D366;
}

/* efecto hover más pro */
.bloque{
    transition:.3s ease;
}

.bloque:hover{
    transform:translateX(8px);
}

.bloque:hover h3{
    color:#1dd845;
}

/* =========================
   ANIMACIÓN
========================= */

.manifiesto{
    overflow:hidden;
}

.manifiesto-header,
.manifiesto-body{
    opacity:0;
    transform:translateX(-90px);
    clip-path: inset(0 100% 0 0);
    transition:all 1s cubic-bezier(.77,0,.18,1);
}

/* activo */
.manifiesto.show .manifiesto-header,
.manifiesto.show .manifiesto-body{
    opacity:1;
    transform:translateX(0);
    clip-path: inset(0 0 0 0);
}

.manifiesto-header{
    transition-delay:.1s;
}

.manifiesto-body{
    transition-delay:.2s;
}









/* ======================================================
STACK SECTION
====================================================== */

.stack-section{
    padding: 140px 8%;
    background:
linear-gradient(
180deg,
#84d1112a 0%,
#08365c96 100%
);
}

/* HEADER */

.stack-header{
    text-align: center;
    margin-bottom: 120px;
}

.stack-header span{
    color: #071774;
    font-weight: 600;
}

.stack-header h2{
    font-size: 4rem;
     background:
        linear-gradient(
            90deg,
            #1cbc07,
            #090268
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    margin-top: 20px;
}

/* WRAPPER */

.stack-wrapper{
    position: relative;
}

/* CARD */

.stack-card{    
    position: sticky;

    top: 120px;

    display: flex;
    align-items: center;

    gap: 60px;

    padding: 40px;

    border-radius: 35px;

    background:
        rgba(255,255,255,.75);

    backdrop-filter: blur(18px);

    margin-bottom: 40px;

    min-height: 500px;

    border:
        1px solid rgba(255,255,255,.7);

    box-shadow:
        0 10px 40px rgba(31,38,135,.08);

    transition:
        transform .5s ease,
        box-shadow .5s ease;

    overflow: hidden;
}   


.stack-card::before{

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #10058e,
            #1fe704
        );
}
/* HOVER */

.stack-card:hover{

    transform:
        translateY(-10px)
        scale(1.01);

    box-shadow:
        0 20px 60px rgba(79,172,254,.18);
}



/* IMAGE */

.stack-image{
    flex: 1;
    
}


/* CONTENT */

.stack-content{
    flex: 1;
}

.stack-content span{
    color: #157003;

    font-size: .9rem;
    font-weight: 600;
}

.stack-content h3{
    font-size: 2.7rem;

    color: #09345b;

    margin:
        20px 0;
}

.stack-content p{
    color: #5f6b7a;

    line-height: 1.9;

    max-width: 500px;
}

/* RESPONSIVE */

/* =========================================
SLIDER
========================================= */

.image-slider{
    position: relative;

    width: 100%;
    height: 420px;

    overflow: hidden;

    border-radius: 25px;
}

.image-slider img{

    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    top: 0;
    left: 0;

    opacity: 0;

    transition:
        opacity 1s ease,
        transform 1.5s ease;

    transform: scale(1.05);
}

/* imagen activa */

.image-slider img.active{
    opacity: 1;
    transform: scale(1);
}

.stack-points{
    margin-top: 30px;

    display: flex;
    flex-direction: column;

    gap: 14px;

    padding: 0;
}

.stack-points li{
    list-style: none;

    color: #5f6b7a;

    font-size: .98rem;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.6);

    border:
        1px solid rgba(9,52,91,.06);

    backdrop-filter: blur(10px);

    transition: .3s ease;
}

.stack-points li:hover{

    transform:
    translateX(6px)
    scale(1.02);

    background:
        rgba(79,172,254,.08);

    box-shadow:
    0 10px 25px rgba(79,172,254,.08);
}


/*INFRAESTRUCTURA*/
/* ======================================================
MUSEUM 3D SECTION
====================================================== */

.museum-section {
    padding: 150px 8%;
    /* Cambiado de 90deg a 180deg para que sea vertical */
    background: linear-gradient(
        180deg,
        #ffffff 20%,
        #d8e0f0 45%,
        #fafafa 100%
    );
    overflow: hidden;
    position: relative;
}




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

.museum-header{

    text-align: center;

    margin-bottom: 50px ;    
}

.museum-header span{

    color: #089419;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.museum-header h2{

    font-size: 4rem;

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -.5px;

    background:
    linear-gradient(
        90deg,
        #09345b 20%,
        
        #b9eb64 100%
    );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow:
        0 5px 25px rgba(9,52,91,.08);
}

.museum-header p{

    color: #5f6b7a;

    max-width: 700px;

    margin: auto;

    line-height: 1.8;
}

/* ======================================================
SLIDER
====================================================== */

.museum-slider{

    perspective: 1800px;

    width: 100%;

    height: 540px;

    position: relative;
}

.museum-track{

    position: relative;

    width: 100%;
    height: 100%;
}

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

.museum-card{

    position: absolute;

    width: 52%;
    height: 85%;
    padding: 2px;
    background:
        linear-gradient(
            145deg,
            #f7faf4,
            #e5e5e8f6
        );

    left: 50%;
    top: 7%;

    transform-style: preserve-3d;

    transition:
        transform .8s ease,
        opacity .8s ease,
        filter .8s ease;

    border-radius: 18px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    box-shadow:
        0 25px 70px rgba(0,0,0,.12);

    backdrop-filter: blur(10px);

    border:
        8px solid white;

}

/* ======================================================
IMAGEN
====================================================== */

.museum-card img{

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s ease;
}

.museum-card:hover img{

    transform: scale(1.05);
}

/* ======================================================
OVERLAY
====================================================== */

.museum-overlay{

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.80),
            rgba(0,0,0,.10)
        );

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 20px;
}

.museum-overlay span{

    color: #2da61a;

    font-weight: 600;

    margin-bottom: 10px;

    letter-spacing: 1px;
}

.museum-overlay h3{

    color: white;

    font-size: 2.2rem;

    margin-bottom: 15px;

    line-height: 1.1;
}

.museum-overlay p{

    color: rgba(255,255,255,.85);

    line-height: 1.7;

    max-width: 600px;
}

/* ======================================================
3D POSITIONS
====================================================== */

.museum-card.active{

    opacity: 1;

    transform:
        translateX(-50%)
        translateZ(0)
        rotateY(0deg)
        scale(1);

    z-index: 5;

    pointer-events: auto;

    filter: blur(0);
}

.museum-card.prev{

    opacity: .45;

    transform:
        translateX(-115%)
        rotateY(35deg)
        scale(.82);

    z-index: 3;

    filter: blur(2px);
}

.museum-card.next{

    opacity: .45;

    transform:
        translateX(15%)
        rotateY(-35deg)
        scale(.82);

    z-index: 3;

    filter: blur(2px);
}

/* ======================================================
INDICATORS
====================================================== */

.museum-indicators{

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    margin-top: -20px;

    position: relative;

    z-index: 20;
}

/* DOT */

.museum-dot{

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        rgba(249, 255, 247, 0.933);

    border:
        1px solid rgba(56, 95, 236, 0.7);

    cursor: pointer;

    transition: .45s ease;

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 10px rgba(79,172,254,.15);
}

/* ACTIVE */

.museum-dot.active{

    width: 42px;

    border-radius: 30px;

    background:
    linear-gradient(
        90deg,
        #0933a8,
        #a8d45a
    );


    box-shadow:
        0 0 18px rgba(79,172,254,.45);
}

/* HOVER */

.museum-dot:hover{

    transform: scale(1.15);
}

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


/* ===== FIX DEFINITIVO CONTACTO ===== */

.contact-info-list .info-card{

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:flex-start !important;

    text-align:left !important;
}

.contact-info-list .info-content{

    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    justify-content:center !important;

    text-align:left !important;

    width:100% !important;
}

.contact-info-list .info-content h4,
.contact-info-list .info-content span{

    text-align:left !important;

    width:100% !important;

    margin:0 !important;
}

.contact-info-list .info-content h4{

    margin-bottom:6px !important;
}

.contact-info-list .info-icon{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex-shrink:0 !important;
}

/* =========================================================
ACTIVE MENU
========================================================= */

.nav-links a{

    position:relative;

    transition:.3s ease;
}

/* línea inferior */
.nav-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0%;
    height:3px;

    border-radius:20px;

    background:#99bc39;

    transition:.35s ease;
}

/* hover */
.nav-links a:hover{

    color:#99bc39;
}

.nav-links a:hover::after{

    width:100%;
}

/* link ACTIVO */
.nav-links a.active{

    color:#99bc39;

    font-weight:700;
}

.nav-links a.active::after{

    width:100%;
}



/* =========================================================/*
/*MODIFICAR PARA PANTALLAS PEQUEÑAS*/
/* =========================================================
MOBILE PERFECT FIX
========================================================= */

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }

    img{
        max-width:100%;
        height:auto;
        display:block;
    }

    section{
        padding-left:20px !important;
        padding-right:20px !important;
    }

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

    .navbar{
        padding:12px 20px;
    }

    .nav-content{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:15px;
    }

    .logo img{
        width:110px;
    }

    .nav-links{
        display:none;
    }
	

/* =========================================================
    SECCIÓN 1: SOLUCIÓN DEFINITIVA PARA QUE SE VEAN LAS 3 CARDS
    ========================================================= */

    /* 1. Forzamos a que el contenedor de las tarjetas use todo el ancho disponible */
    .card-container {
    display: flex !important;
    flex-direction: column !important; /* ¡Ahora se apilan una debajo de otra! */
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 15px !important; /* Separación vertical cómoda para el dedo */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
    /* =========================================================
    SECCIÓN 1: CENTRADO PERFECTO Y ESPACIADO VERTICAL
    ========================================================= */

    .info-side {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    
    padding-top: 20px !important; 
    padding-bottom: 20px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    
    /* ELIMINADO EL TRANSFORM SCALE QUE ROMPÍA EL DISEÑO */
    transform: none !important; 
    transform-origin: center center !important; 
    margin-bottom: 0 !important; 
}

    /* 3. ¡EL CAMBIO CLAVE! Forzamos a las 3 tarjetas a encogerse equitativamente */
    .info-card {
    flex: none !important; /* Quitamos el flex:1 que las obligaba a estrujarse de lado */
    width: 100% !important; /* Que ocupen el ancho disponible del celular */
    max-width: 100% !important;
    min-width: 0 !important;
    
    /* Padding interno cómodo para que respiren los textos */
    padding: 15px 20px !important; 
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    min-height: 80px !important;
}

    /* Ajustamos el tamaño de los números grandes (10+, Global) para que entren perfectos */
    .card-num {
    font-size: 1.8rem !important; 
    margin-bottom: 5px !important; 
    text-align: center !important;
}

    /* Ajustamos los textos inferiores de las tarjetas */
    .card-text {
    font-size: 0.9rem !important;
    margin-top: 0 !important;
    text-align: center !important;
}

	.card-text span {
    font-size: 0.8rem !important; 
    display: block !important;
    line-height: 1.3 !important; 
}
    .hero-grid{
        grid-template-columns:1fr !important;
        gap:40px;
    }

    .hero-content{
        width:100%;
    }

    .text-card-glass{
        padding:28px !important;
        width:100%;
    }

    .text-card-glass h1{
        font-size:2.4rem !important;
        line-height:1.15;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
        gap:14px;
    }

    .hero-buttons .btn{
        width:100%;
        text-align:center;
    }

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

    .dashboard-panel{
        flex-direction:column;
        gap:20px;
    }

    .panel-item{
        max-width:100%;
    }

    /* =========================================================
    SPLIT SECTION
    ========================================================= */

    .split-refined{
        grid-template-columns:1fr !important;
        gap:40px;
    }

    .visual-side{
        min-height:auto;
    }

    .visual-side img{
        width:180px;
        margin:auto;
    }

/* =========================================================
    SECCIÓN 1: BANNER DE EXPERIENCIA (TARJETAS EN FILA HORIZONTAL)
    ========================================================= */
    
    /* Forzamos a que el contenedor principal use flex horizontal o grid original */
    /* Ajusta la clase de tu contenedor si no se llama exactamente hero-grid */
    .hero-grid, .nodos-container {
        display: flex !important;
        flex-direction: column !important; /* ¡Todo en una sola columna! */
        transform: none !important;        /* Eliminamos el scale() destructor */
        margin-bottom: 0 !important;
        height: auto !important;
        width: 100% !important;
    }

    /* Aseguramos que el fondo blanco de las tarjetas mantenga su ancho original de computadora */
    .hero-grid > div, 
    .text-card-glass {
        min-width: 320px !important; 
    }



    /* =========================================================
    WHY SECTION
    ========================================================= */

    .why-line, .card-container, .split-refined {
        display: flex !important;
        flex-direction: column !important; /* Forzamos a que se apilen verticalmente */
        width: 100% !important;
        gap: 25px !important;            /* Separación sana entre los textos */
        box-sizing: border-box !important;
    }

    .why-item{
        padding-left:25px;
    }

    /* =========================================================
    CLIENTES
    ========================================================= */

    .clientes-header h2{
        font-size:2.2rem;
    }

    .marquee-group img{
        height:55px;
        object-fit:contain;
    }

    /* =========================================================
    CTA
    ========================================================= */

    .cta-contenido{
        flex-direction:column;
        text-align:center;
        gap:30px;
    }

    .cta-logo img{
        width:160px;
    }

    /* =========================================================
    CONTACTO
    ========================================================= */

    .contact-container{
        grid-template-columns:1fr !important;
        gap:40px;
    }

    .contact-left h2{
        font-size:2.5rem;
        line-height:1.1;
    }

    .contact-form-box{
        padding:25px;
    }

    .contact-info-list{
        gap:18px;
    }

    .info-card{
        padding:18px;
        border-radius:22px;
    }

    .info-icon{
        width:58px;
        height:58px;
        min-width:58px;
        font-size:20px;
    }

    .info-content h4{
        font-size:16px;
    }

    .info-content span{
        font-size:14px;
        word-break:break-word;
    }

    /* =========================================================
    MAPA
    ========================================================= */

    .contact-map iframe{
        height:300px;
    }

    .map-floating-card{
        left:15px;
        right:15px;
        bottom:15px;
        padding:15px;
    }

    /* =========================================================
    TRABAJA CON NOSOTROS
    ========================================================= */

    .corp-grid,
    .vacantes-grid{
        grid-template-columns:1fr !important;
    }

    .titulo-big{
        font-size:2.7rem;
        line-height:1.1;
    }

    .top-word{
        font-size:2.5rem;
    }

    .bottom-word{
        font-size:1.8rem;
    }

    .hero-trabaja-buttons{
        flex-direction:column;
        gap:15px;
    }

    .hero-trabaja-buttons .btn{
        width:100%;
    }

}

/* =========================================================
   BOTÓN HAMBURGUESA (Oculto por defecto en Computadora)
   ========================================================= */
.menu-toggle {
    display: none; /* No se muestra en pantallas grandes */
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 19px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 99999 !important; /* Capa máxima para que no lo tape nada */
    padding: 0;
}

/* Las 3 líneas horizontales del botón */
.menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: #ffffff !important; /* Forzamos líneas blancas */
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* =========================================================
   RESPONSIVE: DISEÑO EXCLUSIVO PARA CELULARES
   ========================================================= */
@media (max-width: 768px) {
    /* Hacemos visible el botón de las 3 líneas */
    .menu-toggle {
        display: flex !important;
    }

    /* Transformamos la lista en una cortina desplegable vertical */
    .nav-links {
        display: flex !important; 
        position: fixed !important;
        top: 80px !important; 
        right: -100% !important; 
        width: 100% !important;
        height: calc(100vh - 80px) !important; 
        
        /* Permitir scroll si el celular es muy pequeño */
        overflow-y: auto !important; 
        
        /* Color oscuro sólido corporativo */
        background-color: #0f172a !important; 
        background: rgba(15, 23, 42, 0.98) !important;
        backdrop-filter: blur(15px) !important;
        
        flex-direction: column !important; 
        align-items: center !important;
        justify-content: flex-start !important;
        
        /* Espaciado óptimo para móviles */
        padding-top: 40px !important;
        padding-bottom: 40px !important; 
        gap: 25px !important; 
        
        transition: right 0.4s ease-in-out !important; 
        z-index: 99998 !important; 
    }

    /* Ajustes para los elementos de la lista en móvil */
    .nav-links li {
        width: 100% !important;
        text-align: center !important;
        display: block !important; 
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* El tamaño grande (1.4rem) queda perfectamente aislado dentro de la pantalla móvil */
    .nav-links a {
        color: #ffffff !important; 
        font-size: 1.4rem !important; 
        display: block !important;
        padding: 12px 0 !important;
        width: 100% !important;
        text-decoration: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: color 0.3s ease !important;
    }

    /* Color especial resaltado para la página activa en móvil */
    .nav-links a.active {
        color: #22c55e !important; /* Verde brillante corporativo */
        font-weight: 700 !important;
    }

    /* CLASE ACTIVA: Hace que el menú aparezca deslizándose */
    .nav-links.active {
        right: 0 !important;
    }

    /* ANIMACIÓN DE LAS 3 LÍNEAS: Se transforman en una "X" al abrir el menú */
    .menu-toggle.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    .menu-toggle.open span:nth-child(2) {
        opacity: 0 !important; 
    }
    .menu-toggle.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
}


@media (max-width:768px){

    /* =========================
    CONTENEDOR PRINCIPAL
    ========================= */

    .manifiesto{
        padding:60px 20px !important;
        width:100%;
        box-sizing:border-box;

        /* 🔥 CLAVE: anulamos grid en móvil */
        display:flex !important;
        flex-direction:column !important;
        gap:30px;
    }

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

    .manifiesto-header{
        width:100%;
        margin-bottom:10px;
    }

    .manifiesto-header h2{
        font-size:32px !important;
        line-height:1.2;
		
    }

    .manifiesto-header p{
        font-size:15px;
        line-height:1.6;
        max-width:100%;
    }

    /* =========================
    BLOQUES
    ========================= */

    .bloques{
        display:flex;
        flex-direction:column;
        gap:18px;
        width:100%;
    }

    .bloque,
    .bloque.highlight{
        width:100%;
        max-width:100%;
        min-width:0;
        padding:20px;
        box-sizing:border-box;
        border-radius:16px;
    }

    .bloque h3{
        font-size:1.2rem;
        line-height:1.3;
        margin-bottom:8px;
    }

    .bloque p{
        font-size:0.95rem;
        line-height:1.4;
    }

    /* =========================
    LÍNEA DECORATIVA
    ========================= */

    .manifiesto-body .linea{
        display:none !important;
    }

    /* =========================
    FIX ANIMACIÓN (EVITA CORTES)
    ========================= */

    .manifiesto-header,
    .manifiesto-body{
        opacity:0;
        transform:translateY(20px);
        transition:all .6s ease;
    }

    .manifiesto.show .manifiesto-header,
    .manifiesto.show .manifiesto-body{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================================================
ABOUT IMMERSIVE MOBILE FIX
========================================================= */

@media (max-width:768px){

    .immersive-grid{
        display:flex !important;
        flex-direction:column !important;

        align-items:center !important;
        justify-content:center !important;

        width:100% !important;
        gap:40px !important;
    }

    /* IMAGEN ARRIBA */
    .visual-container{
        width:100% !important;

        display:flex !important;
        justify-content:center !important;

        order:-1 !important;
    }

    .tech-frame{
        width:100% !important;

        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
    }

    .hero-img{
        width:85% !important;
        max-width:340px !important;
        height:auto !important;

        display:block !important;
        margin:auto !important;

        object-fit:contain !important;
    }

    /* QUITA EFECTOS QUE ROMPEN */
    .neon-glow{
        display:none !important;
    }

    /* TEXTO */
    .info-container{
        width:100% !important;
        max-width:100% !important;

        text-align:center !important;

        padding:0 20px !important;
        box-sizing:border-box !important;
    }

    .main-heading{
        font-size:2.3rem !important;
        line-height:1.1 !important;

        margin-bottom:18px !important;
    }

    .summary{
        font-size:15px !important;
        line-height:1.7 !important;
    }

    /* ELIMINA SCROLL LATERAL */
    html,
    body{
        overflow-x:hidden !important;
    }

}

/* =========================================================
TIMELINE MOBILE FIX
========================================================= */

@media (max-width:768px){

    .timeline-section{
        padding:60px 20px !important;
        overflow:hidden !important;
    }

    /* TÍTULO */
    .contenedor-titulo-animado{
        margin-bottom:40px !important;
        text-align:center;
    }

    .titulo-seccion{
        font-size:2.4rem !important;
        line-height:1.1 !important;
    }

    /* TIMELINE */
    .timeline{
        position:relative;
        width:100%;
        padding-left:30px;
    }

    /* LÍNEA VERTICAL */
    .timeline-progress{
        left:12px !important;
        width:2px !important;
        height:100% !important;
    }

    /* ITEM */
    .timeline-item{
        position:relative;
        width:100%;
        margin-bottom:35px;

        display:flex !important;
        justify-content:flex-start !important;
    }

    /* PUNTO */
    .timeline-dot{
        position:absolute;
        left:-24px !important;
        top:25px;
        width:14px;
        height:14px;
    }

    /* CARD */
    .timeline-content{
        width:100% !important;
        max-width:100% !important;

        padding:22px !important;
        border-radius:18px !important;

        box-sizing:border-box !important;
    }

    /* ICONO */
    .timeline-icon{
        width:55px !important;
        height:55px !important;
        font-size:20px !important;

        margin-bottom:15px !important;
    }

    /* TITULOS */
    .timeline-content h3{
        font-size:1.4rem !important;
        margin-bottom:10px !important;
    }

    /* AÑO */
    .timeline-year{
        display:block;
        font-size:14px !important;
        margin-bottom:15px !important;
    }

    /* LISTA */
    .timeline-content ul{
        padding-left:18px !important;
    }

    .timeline-content li{
        font-size:14px !important;
        line-height:1.6 !important;
        margin-bottom:8px !important;
    }

    /* ANIMACIONES */
    /* ANIMACIÓN MÓVIL SUAVE */
.timeline-content.animar{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

/* CUANDO APARECE */
.timeline-content.animar.show{
    opacity:1;
    transform:translateY(0);
}

    /* EVITA SCROLL LATERAL */
    html,
    body{
        overflow-x:hidden !important;
    }

}
/* =========================================================
CORPORATE SECTION MOBILE
========================================================= */

@media (max-width:768px){

    .corporate-section{
        padding:70px 20px !important;
        overflow:hidden;
    }

    /* TITULO */
    .titulo-wrapper{
        text-align:center;
        margin-bottom:40px !important;
    }

    .split-title{
        line-height:1 !important;
    }

    .top-word{
        font-size:2.5rem !important;
        display:block;
    }

    .bottom-word{
        font-size:1.8rem !important;
        display:block;
        margin-top:5px;
    }

    /* GRID */
    .corp-grid{
        display:flex !important;
        flex-direction:column !important;
        gap:22px !important;
    }

    /* CARDS */
    .corp-card{
        padding:26px 22px !important;
        border-radius:22px !important;

        width:100% !important;
        max-width:100% !important;

        box-sizing:border-box !important;
    }

    /* ICONOS */
    .icon-box{
        width:60px !important;
        height:60px !important;

        font-size:22px !important;

        margin-bottom:18px !important;
    }

    /* TITULOS */
    .corp-card h3{
        font-size:1.5rem !important;
        margin-bottom:14px !important;
    }

    /* PARRAFOS */
    .corp-card p{
        font-size:15px !important;
        line-height:1.7 !important;
    }

    /* VALORES */
    .corp-values{
        gap:10px !important;
        padding-left:18px !important;
    }

    .corp-values li{
        font-size:14px !important;
        line-height:1.5 !important;
    }

    /* ANIMACIÓN SUAVE */
    .animar-scale{
        opacity:0;
        transform:translateY(35px) scale(.96);

        transition:
            opacity .7s ease,
            transform .7s ease;
    }

    .animar-scale.show{
        opacity:1;
        transform:translateY(0) scale(1);
    }

    /* EVITA SCROLL */
    html,
    body{
        overflow-x:hidden !important;
    }

}




/* ======================================================
STACK MOBILE LIMPIO FINAL
====================================================== */

@media (max-width:768px){

    html,
    body{
        overflow-x:hidden !important;
    }

    /* SECTION */

    .stack-section{
        padding:60px 14px !important;
        overflow:visible !important;
    }

    /* WRAPPER */

    .stack-wrapper{
        position:relative !important;
        overflow:visible !important;
    }

    /* TARJETAS */

    .stack-card{

        position:-webkit-sticky !important;
        position:sticky !important;

        top:85px !important;

        display:flex !important;
        flex-direction:column !important;

        gap:12px !important;

        width:100% !important;

        padding:14px !important;

        margin-bottom:70px !important;

        border-radius:22px !important;

        min-height:auto !important;

        overflow:hidden !important;

        transform:none !important;
        transition:none !important;
        will-change:auto !important;

        backdrop-filter:none !important;
    }

    /* STACK */

    .stack-card:nth-child(1){
        z-index:1 !important;
    }

    .stack-card:nth-child(2){
        z-index:2 !important;
    }

    .stack-card:nth-child(3){
        z-index:3 !important;
    }

    /* IMAGEN */

    .stack-image{
        width:100% !important;
    }

    .image-slider{

        position:relative !important;

        height:190px !important;

        border-radius:16px !important;

        overflow:hidden !important;
    }

    .image-slider img{

        position:absolute !important;
        inset:0 !important;

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }

    /* CONTENIDO */

    .stack-content{
        width:100% !important;
    }

    .stack-content span{

        font-size:10px !important;

        letter-spacing:1px !important;
    }

    .stack-content h3{

        font-size:1.2rem !important;

        line-height:1.1 !important;

        margin:8px 0 10px !important;
    }
/* HEADER */

.stack-header{
    text-align:center !important;
    margin-bottom:28px !important;
    padding:0 8px !important;
}

.stack-header span{

    font-size:9px !important;

    letter-spacing:1px !important;
}

.stack-header h2{

    font-size:1.45rem !important;

    line-height:1.15 !important;

    margin-top:8px !important;

    word-break:break-word !important;
}
    /* LISTA */

    .stack-points{

        padding:0 !important;

        margin:0 !important;
    }

    .stack-points li{

        list-style:none !important;

        font-size:12px !important;

        line-height:1.35 !important;

        margin-bottom:8px !important;
    }

    /* FIX STICKY */

    .museum-section,
    .radar-section,
    .why-pro,
    .modalidad-section,
    .split-refined,
    #servicios-nodos{

        overflow:visible !important;
    }

}


/* =========================================================
MUSEUM MOBILE PERFECT REAL
========================================================= */

@media (max-width:768px){

    .museum-section{
        padding:70px 16px !important;
        overflow:hidden !important;
    }

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

    .museum-header{
        text-align:center !important;
        margin-bottom:40px !important;
    }

    .museum-header h2{
        font-size:2rem !important;
        line-height:1.15 !important;

        margin:16px 0 !important;
    }

    .museum-header p{
        font-size:14px !important;
        line-height:1.6 !important;
    }

    /* =========================
    SLIDER
    ========================= */

    .museum-slider{
        width:100% !important;
        overflow:hidden !important;
    }

    .museum-track{

        position:relative !important;

        width:100% !important;

        height:500px !important;

        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
    }

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

    .museum-card{

        position:absolute !important;

        width:92% !important;

        max-width:360px !important;

        height:480px !important;

        border-radius:24px !important;

        overflow:hidden !important;

        opacity:0 !important;

        transform:
            scale(.88)
            translateX(0) !important;

        transition:
            all .7s ease !important;
    }

    /* ACTIVA */
    .museum-card.active{

        opacity:1 !important;

        transform:
            scale(1)
            translateX(0) !important;

        z-index:5 !important;
    }

    /* LATERALES */
    .museum-card.prev,
    .museum-card.next{

        opacity:.18 !important;

        transform:scale(.82) !important;

        z-index:1 !important;
    }

    /* =========================
    IMAGEN
    ========================= */

    .museum-card img{

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }

    /* =========================
    OVERLAY
    ========================= */

    .museum-overlay{

        padding:22px !important;

        background:
            linear-gradient(
                to top,
                rgba(0,0,0,.92),
                rgba(0,0,0,.15)
            ) !important;
    }

    .museum-overlay span{
        font-size:12px !important;
    }

    .museum-overlay h3{

        font-size:1.5rem !important;

        margin:10px 0 !important;
    }

    .museum-overlay p{

        font-size:14px !important;

        line-height:1.5 !important;
    }

    /* =========================
    DOTS
    ========================= */

    .museum-indicators{

        margin-top:25px !important;

        display:flex !important;
        justify-content:center !important;
        gap:10px !important;
    }

    .museum-dot{

        width:9px !important;
        height:9px !important;
    }

    /* =========================
    FIXES
    ========================= */

    html,
    body{
        overflow-x:hidden !important;
    }

}
/* =========================================================
MUSEUM MOBILE FINAL FIX
========================================================= */

@media (max-width:768px){

    .museum-slider{
        width:100% !important;
        overflow:hidden !important;

        display:flex !important;
        justify-content:center !important;
    }

    .museum-track{

        width:100% !important;

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

        position:relative !important;

        min-height:520px !important;
    }

    .museum-card{

        position:absolute !important;

        left:50% !important;
        top:0 !important;

        transform:
            translateX(-50%) scale(.88) !important;

        width:92vw !important;

        max-width:350px !important;

        height:480px !important;

        opacity:0 !important;

        border-radius:24px !important;

        overflow:hidden !important;

        transition:all .7s ease !important;
    }

    /* CARD ACTIVA */
    .museum-card.active{

        opacity:1 !important;

        transform:
            translateX(-50%) scale(1) !important;

        z-index:5 !important;
    }

    /* LATERALES */
    .museum-card.prev,
    .museum-card.next{

        opacity:.15 !important;

        transform:
            translateX(-50%) scale(.82) !important;

        z-index:1 !important;
    }

    /* IMAGEN */
    .museum-card img{

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }

    /* OVERLAY */
    .museum-overlay{

        width:100% !important;

        padding:20px !important;

        box-sizing:border-box !important;
    }

}
/* =========================
   CONTENEDOR PRINCIPAL
========================= */

.split-refined {

    display:flex;

    min-height:60vh;

    height:auto;

    background:var(--dark-bg);

    font-family:'Montserrat', sans-serif;

    border-radius:24px;

    margin:20px;

    overflow:hidden;

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

/* =========================
   LADO VISUAL / LOGO
========================= */

.visual-side {

    width:30%;

    background:
        radial-gradient(
            circle at top left,
            rgba(255,255,255,0.08),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #1d355d 0%,
            #13233d 100%
        );

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;
}

/* Glow detrás del logo */

.visual-side::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.12),
            transparent 70%
        );

    z-index:1;
}

/* Línea decorativa */

.visual-side::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255,255,255,0.15),
            transparent
        );
}

/* LOGO */

.mini-logo {

    width:120px;

    position:relative;

    z-index:3;

    filter:
        drop-shadow(
            0 12px 30px rgba(164,255,197,0.577)
        );

    transition:.45s ease;
}

/* Hover */

.visual-side:hover .mini-logo{

    transform:
        scale(1.05)
        translateY(-3px);
}

/* Línea */

.line-decorator {

    position:absolute;

    bottom:18%;

    width:70px;
    height:3px;

    background:
        linear-gradient(
            to right,
            var(--verde-bc),
            transparent
        );

    border-radius:20px;

    opacity:.9;

    z-index:2;
}

/* =========================
   LADO INFO
========================= */

.info-side {

    width:70%;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #f8fafc
        );

    padding:80px;

    display:flex;

    align-items:center;

    justify-content:center;
}

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

.card-container {

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    width:100%;
}

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

.info-card {

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    flex:1;

    min-width:220px;

    padding:28px 24px;

    border-radius:22px;

    background:#fff;

    overflow:hidden;

    transition:
        transform .4s ease,
        border .4s ease,
        box-shadow .4s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.06);
}

/* Glow */

.info-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:0%;
    height:100%;

    background:
        linear-gradient(
            to right,
            rgba(153,188,57,0.08),
            transparent
        );

    transition:.5s ease;
}

/* Hover */

.info-card:hover {

    border-left:2px solid var(--verde-bc);

    transform:
        translateY(-6px)
        translateX(4px);
}

.info-card:hover::before{
    width:100%;
}

/* Número */

.card-num {

    font-size:2.6rem;

    font-weight:800;

    color:var(--azul-bc);

    margin-bottom:14px;

    line-height:1;

    letter-spacing:-1px;

    text-align:center;
}

/* Texto */

.card-text {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

    text-align:center;

    white-space:normal;

    word-wrap:break-word;
}

/* Icono */

.card-text i {

    color:var(--verde-bc);

    font-size:1rem;

    transition:.3s ease;
}

.info-card:hover i{

    transform:scale(1.15);

    text-shadow:
        0 0 15px rgba(216,232,171,0.705);
}

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

@media (max-width:768px){

    .split-refined{

        flex-direction:column !important;

        min-height:auto !important;

        height:auto !important;

        margin:15px !important;
    }

    /* LOGO */

    .visual-side{

        width:100% !important;

        min-height:220px !important;

        padding:40px 20px !important;
    }

    .mini-logo{

        width:130px !important;
    }

    .line-decorator{

        bottom:25px !important;
    }

    /* INFO */

    .info-side{

        width:100% !important;

        padding:30px 20px !important;
    }

    /* CARDS */

    .card-container{

        width:100% !important;

        display:flex !important;

        flex-direction:column !important;

        gap:18px !important;
    }

    .info-card{

        width:100% !important;

        min-width:100% !important;

        padding:24px 20px !important;

        border-radius:20px !important;
    }

    .card-num{

        font-size:2rem !important;
    }

    .card-text{

        justify-content:center !important;

        text-align:center !important;
    }

}


/* =========================================================
SERVICIOS NODOS MOBILE (RADIAL LIMPIO)
========================================================= */

@media (max-width:768px){

    #servicios-nodos{
        padding:80px 10px 140px !important;
        overflow:visible !important;
    }

    .servicios-intro{
        text-align:center !important;
        margin-bottom:40px !important;
    }

    .servicios-intro h2{
        font-size:1.6rem !important;
    }

    /* CONTENEDOR RADIAL */
    .nodos-container{
        position:relative !important;
        width:320px !important;   /* 🔥 control total del círculo */
        height:320px !important;

        margin:0 auto !important;
    }

    /* CÍRCULO CENTRAL */
    .nodo-central{
        position:absolute !important;

        top:50% !important;
        left:50% !important;

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

        width:90px !important;
        height:90px !important;

        z-index:10 !important;
    }

    .nodo-central img{
        width:45px !important;
    }

    .nodo-central span{
        font-size:11px !important;
    }

    /* 🔥 NODOS ALREDEDOR */
    .servicios-wrapper{
        position:relative !important;
        width:100% !important;
        height:100% !important;
    }

    .nodo-servicio{
        position:absolute !important;

        width:85px !important;
        height:85px !important;

        border-radius:50% !important;

        background:#fff !important;
        box-shadow:0 6px 16px rgba(0,0,0,0.08) !important;

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

        text-align:center !important;
    }

    .nodo-servicio i{
        font-size:16px !important;
        margin-bottom:4px !important;
    }

    .nodo-servicio h3{
        font-size:10px !important;
        line-height:1.1 !important;
        margin:0 !important;
    }

    /* 🔥 POSICIONES EN CÍRCULO */
    .nodo-servicio:nth-child(1){
        top:0 !important;
        left:50% !important;
        transform:translate(-50%, 0) !important;
    }

    .nodo-servicio:nth-child(2){
        top:50% !important;
        right:0 !important;
        transform:translate(0, -50%) !important;
    }

    .nodo-servicio:nth-child(3){
        bottom:0 !important;
        left:50% !important;
        transform:translate(-50%, 0) !important;
    }

    .nodo-servicio:nth-child(4){
        top:50% !important;
        left:0 !important;
        transform:translate(0, -50%) !important;
    }

    /* INFO */
}
	/* =========================================================
VACANTES - MOBILE OPTIMIZADO
========================================================= */

@media (max-width:768px){

    /* SECCIÓN GENERAL */
    #vacantes{
        padding:80px 15px !important;
    }

    /* HEADER */
    .vacantes-heading{
        text-align:center !important;
        margin-bottom:30px !important;
        padding:0 10px !important;
    }

    .vacantes-mini{
        font-size:11px !important;
        letter-spacing:1px !important;
    }

    .vacantes-title{
        font-size:1.5rem !important;
        line-height:1.2 !important;
    }

    /* GRID */
    .vacantes-grid{
        display:grid !important;
        grid-template-columns:1fr !important; /* 🔥 1 columna en móvil */
        gap:20px !important;
        padding:0 5px !important;
    }

    /* CARD */
    .vacante-card{
        padding:18px !important;

        border-radius:16px !important;

        background:#fff !important;

        box-shadow:0 6px 18px rgba(0,0,0,0.08) !important;

        text-align:center !important;

        transform:none !important;
    }

    /* ICONO */
    .vacante-icon{
        width:45px !important;
        height:45px !important;

        margin:0 auto 10px auto !important;

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

        font-size:18px !important;
    }

    /* TITULO */
    .vacante-card h3{
        font-size:14px !important;
        margin-bottom:8px !important;
    }

    /* TEXTO */
    .vacante-card p{
        font-size:12px !important;
        line-height:1.4 !important;
        margin-bottom:12px !important;
    }

    /* BOTÓN */
    .vacante-card .btn-hero{
        font-size:12px !important;
        padding:10px 16px !important;
        display:inline-block !important;
    }
}

	/* =========================================================
TRABAJA HEADER - MOBILE OPTIMIZADO
========================================================= */

@media (max-width:768px){

    .trabaja-header{
        min-height:80vh !important;
        padding:80px 15px !important;

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

        text-align:center !important;

        position:relative !important;
    }

    /* OVERLAY MÁS SUAVE */
    .trabaja-header .overlay{
        opacity:0.65 !important;
    }

    /* CONTENIDO */
    .trabaja-header .contenido{
        padding:0 10px !important;
    }

    /* TAGLINE */
    .trabaja-header .tagline{
        font-size:11px !important;
        letter-spacing:1px !important;
        margin-bottom:10px !important;

        display:inline-block !important;
    }

    /* TITULO PRINCIPAL */
    .trabaja-header h1{
        font-size:1.8rem !important;
        line-height:1.2 !important;

        margin-bottom:12px !important;
    }

    /* TEXTO */
    .trabaja-header p{
        font-size:13px !important;
        line-height:1.5 !important;

        margin-bottom:20px !important;

        padding:0 5px !important;
    }

    /* BOTÓN */
    .trabaja-header .btn-hero{
        font-size:13px !important;
        padding:12px 18px !important;

        display:inline-block !important;
    }
}


/* =========================================================
RADAR SECTION - MOBILE FINAL (CENTRADO REAL + TEXTO CORRECTO)
========================================================= */

@media (max-width:768px){

    /* EVITAR SCROLL LATERAL */
    html, body{
        overflow-x:hidden !important;
        max-width:100% !important;
    }

    /* SECCIÓN - CENTRADO VERTICAL REAL */
    .radar-section{
        padding:50px 15px !important;
        min-height:100vh !important;

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

        overflow:hidden !important;
    }

    /* CONTENEDOR */
    .radar-container{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;

        gap:20px !important;
    }

    /* TEXTO (IMPORTANTE: MÁS PEQUEÑO COMO QUIERES) */
    .radar-top{
        text-align:center !important;
        width:100% !important;

        margin-bottom:10px !important;
        padding:0 10px !important;
    }

    .radar-mini-tag{
        font-size:10px !important;
        letter-spacing:1px !important;
    }

    .beneficios-header h2{
        font-size:1.25rem !important;
        line-height:1.2 !important;
    }

    .beneficios-header p{
        font-size:11.5px !important;
        line-height:1.4 !important;
    }

    /* RADAR CENTRADO REAL (NO PEGADO ARRIBA NI ABAJO) */
    .radar-wrapper{
        width:300px !important;
        height:300px !important;

        position:relative !important;

        margin:20px auto 0 auto !important;
    }

    /* CENTRO */
    .radar-center{
        position:absolute !important;
        top:50% !important;
        left:50% !important;
        transform:translate(-50%, -50%) !important;

        width:58px !important;
        height:58px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .radar-center i{
        font-size:15px !important;
    }

    /* ITEMS */
    .radar-item{
        position:absolute !important;

        width:62px !important;
        height:62px !important;

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

    /* POSICIONES BALANCEADAS */
    .item-1{ top:10%; left:50%; transform:translate(-50%, -50%) !important; }
    .item-2{ top:30%; left:85%; transform:translate(-50%, -50%) !important; }
    .item-3{ top:70%; left:85%; transform:translate(-50%, -50%) !important; }
    .item-4{ top:90%; left:50%; transform:translate(-50%, -50%) !important; }
    .item-5{ top:70%; left:15%; transform:translate(-50%, -50%) !important; }
    .item-6{ top:30%; left:15%; transform:translate(-50%, -50%) !important; }

    /* ICONOS MÁS PEQUEÑOS */
    .radar-item i{
        font-size:12px !important;
    }

    /* TEXTO PEQUEÑO (ESTO TE ESTABA FALLANDO) */
    .radar-item h3{
        font-size:8.5px !important;
        line-height:1.1 !important;
        margin:0 !important;
    }

    /* POPUP */
    .radar-info{
        position:absolute !important;

        left:50% !important;
        top:110% !important;

        transform:translateX(-50%) !important;

        width:125px !important;

        background:rgba(15, 23, 42, 0.98) !important;
        color:#fff !important;

        padding:8px !important;

        border-radius:10px !important;

        font-size:9px !important;
        line-height:1.2 !important;

        opacity:0 !important;
        visibility:hidden !important;

        transition:0.25s ease !important;

        z-index:9999 !important;
    }

    .radar-item.active .radar-info{
        opacity:1 !important;
        visibility:visible !important;
    }
}
	/* =========================================================
RADAR - FIX FINAL DE TIPOGRAFÍA (TODO PEQUEÑO REAL)
========================================================= */

@media (max-width:768px){

    /* 🔥 TITULOS DENTRO DE CIRCULOS */
    .radar-item h3{
        font-size:8px !important;
        line-height:1.1 !important;
        margin:0 !important;
        font-weight:500 !important;
    }

    /* 🔥 ICONOS */
    .radar-item i{
        font-size:11px !important;
    }

    /* 🔥 TEXTO POPUP (LO QUE TE SALÍA GRANDE) */
    .radar-info h3{
        font-size:9px !important;
        line-height:1.1 !important;
        margin-bottom:3px !important;
        font-weight:600 !important;
    }

    .radar-info p{
        font-size:8.5px !important;
        line-height:1.2 !important;
        margin:0 !important;
    }

    /* 🔥 CAJA POPUP MÁS COMPACTA */
    .radar-info{
        width:120px !important;
        padding:7px !important;
    }

    /* 🔥 SEGURIDAD EXTRA (EVITA HERENCIAS GRANDES) */
    .radar-item *{
        font-size:inherit !important;
    }
}



/* =========================================================
MODALIDAD DE TRABAJO - MOBILE (ICONO LATERAL PRO)
========================================================= */

@media (max-width:768px){

    /* SECCIÓN */
    .modalidad-section{
        padding:70px 15px !important;
        overflow:hidden !important;
    }

    /* TEXTO */
    .modalidad-heading{
        text-align:center !important;
        margin-bottom:25px !important;
        padding:0 10px !important;
    }

    .modalidad-mini{
        font-size:10.5px !important;
        letter-spacing:1px !important;
    }

    .modalidad-heading h2{
        font-size:1.4rem !important;
        line-height:1.2 !important;
    }

    .modalidad-heading .intro{
        font-size:12px !important;
        line-height:1.4 !important;
    }

    /* CONTENEDOR */
    .modalidades-floating{
        display:flex !important;
        flex-direction:column !important;
        gap:15px !important;
        align-items:center !important;
    }

    /* CARD EN HORIZONTAL */
    .modo-card{
        width:92% !important;
        max-width:360px !important;

        display:flex !important;
        align-items:center !important;

        gap:14px !important;

        padding:16px !important;

        border-radius:16px !important;

        text-align:left !important;

        position:relative !important;

        box-shadow:0 10px 22px rgba(0,0,0,0.08) !important;
    }

    /* ICONO GRANDE A LA IZQUIERDA */
    .modo-icon{
        font-size:28px !important;

        width:50px !important;
        height:50px !important;

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

        flex-shrink:0 !important;
    }

    /* CONTENIDO */
    .modo-card h3{
        font-size:13px !important;
        margin:0 0 4px 0 !important;
    }

    .modo-card p{
        font-size:11.5px !important;
        line-height:1.3 !important;
        margin:0 !important;
        opacity:0.9 !important;
    }

    /* NUMERO PEQUEÑO ARRIBA */
    .modo-number{
        position:absolute !important;
        top:8px !important;
        right:10px !important;

        font-size:10px !important;
        opacity:0.6 !important;
    }
	/* 🔥 RESET DE POSICIONES DESKTOP */
.modo-1,
.modo-2,
.modo-3{
    margin-top:0 !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
}

    /* GLOW SUAVE */
    .modo-glow{
        opacity:0.15 !important;
    }
}


	/* =========================================================
WHY PRO - MOBILE OPTIMIZADO
========================================================= */

@media (max-width:768px){

    /* SECCIÓN */
    .why-pro{
        padding:70px 15px !important;
        overflow:hidden !important;
    }

    /* HEADER */
    .why-header{
        text-align:center !important;
        margin-bottom:35px !important;
        padding:0 10px !important;
    }

    /* BADGE */
    .why-badge{
        font-size:10px !important;
        letter-spacing:1px !important;

        display:inline-block !important;

        margin-bottom:10px !important;
    }

    /* TITULO */
    .why-header h2{
        font-size:1.5rem !important;
        line-height:1.2 !important;
    }

    .why-header h2 span{
        display:inline-block !important;
    }

    /* LINEA */
    .why-title-line{
        width:70px !important;
        height:3px !important;

        margin:14px auto 0 auto !important;
    }

    /* CONTENEDOR LINEA */
    .why-line{
        display:flex !important;
        flex-direction:column !important;

        gap:20px !important;

        position:relative !important;
    }

    /* ITEM */
    .why-item{
        display:flex !important;
        align-items:flex-start !important;

        gap:14px !important;

        padding:0 5px !important;
    }

    /* PUNTO */
    .why-dot{
        width:12px !important;
        height:12px !important;

        margin-top:5px !important;

        flex-shrink:0 !important;
    }

    /* CONTENIDO */
    .why-content h3{
        font-size:13px !important;
        margin-bottom:5px !important;
        line-height:1.2 !important;
    }

    .why-content p{
        font-size:11.5px !important;
        line-height:1.4 !important;
        margin:0 !important;
    }
}