:root {
    /* Azul principal Datacell */
    --azul: #ff0000;
    --azul-dark: #000000;

    /* Azul tecnológico claro */
    --celeste: #cc1010;
    --celeste-dark: #6c6c6c;

    /* Neutros */
    --gris: #64748b;
    --gris-dark: #334155;

    /* Fondos */
    --bg: #f8fafc;
    --blanco: #ffffff;

}/* 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: rgb(255, 255, 255);
    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 rgb(244, 235, 235); }
    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: #ffffff; /* 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: #f22424; 
    font-family: inherit;   /* Misma fuente */
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-weight: bold;
}

/* El brillo (solo se mueve con el hover) */
.btn.primary::before {
    content: "";
    font-family: inherit;   /* Misma fuente */
    font-size: 1rem;
    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; 
}
a.btn.primary {
    text-decoration: none;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Tus Keyframes originales */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgb(255, 32, 2); }
    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: 100px;   /* ajusta tamaño */
    width: auto;
    object-fit: contain;
    display: block;
}

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

.nav-links a {
    color: #070707;
    border: 2px;
    text-decoration: none;
    font-weight: 500;
}

.nav-links a:hover {
    color: rgb(255, 2, 2);
}

/* 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(251, 251, 251, 0.134); /* 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(162, 153, 153, 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, #a5330d, #f80707);
    
    -webkit-background-clip: text;
    background-clip: text;

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

    display: inline-block;

    text-shadow: 0 0 20px rgba(173, 175, 173, 0.547);
}

.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.425); /* 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: rgba(255, 255, 255, 0.152);
    
    /* 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: #f5cfcb;
    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(189, 33, 33, 0.85)
    );
}




/*=====================================================
VACANTES
=====================================================*/

#vacantes{
    padding:120px 0;
    background:#fff;
    position:relative;
    overflow:hidden;
}

/*=====================================================
TÍTULO
=====================================================*/

.vacantes-heading{
    text-align:center;
    margin-bottom:90px;
}

.vacantes-mini{
    display:block;
    color:#d40000;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:6px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.vacantes-title{
    font-size:4rem;
    font-weight:900;
    color:#111;
    letter-spacing:-2px;
}

/*=====================================================
LISTA
=====================================================*/

.vacantes-grid{
    position:relative;
    display:flex;
    flex-direction:column;
    max-width:950px;
    margin:auto;
}

.vacantes-grid::before{
    content:"";
    position:absolute;
    left:55px;
    top:50px;
    bottom:50px;
    width:3px;
    background:#d90000;
    border-radius:50px;
}

/*=====================================================
VACANTE
=====================================================*/

.vacante-card{

    position:relative;

    display:grid;

    grid-template-columns:90px 1fr 180px;

    grid-template-areas:
        "icon titulo boton"
        "icon descripcion descripcion";

    align-items:center;

    column-gap:35px;

    row-gap:12px;

    padding:40px 0;

    border-bottom:1px solid #ececec;

    transition:.35s;
}

.vacante-card:hover{
    transform:translateX(12px);
}


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

.vacante-icon{

    grid-area:icon;

    width:72px;

    height:72px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f5f5f5;

    transition:.35s;
}

.vacante-icon i{
    color:#d90000;
    font-size:30px;
}

.vacante-card:hover .vacante-icon{
    background:#d90000;
    transform:rotate(-8deg);
}

.vacante-card:hover .vacante-icon i{
    color:#fff;
}

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

.vacante-card h3{

    grid-area:titulo;

    margin:0;

    font-size:2rem;

    font-weight:800;

    color:#111;
}

.vacante-card p{

    grid-area:descripcion;

    margin:0;

    color:#666;

    line-height:1.7;

    font-size:1rem;
}

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

.vacante-card .btn-hero{

    grid-area:boton;

    justify-self:end;

    align-self:center;

    margin:0;

    white-space:nowrap;
}

.vacante-card:hover .btn-hero{
    transform:translateX(6px);
}

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

@media (max-width:768px){

    #vacantes{
        padding:60px 15px;
    }

    .vacantes-heading{
        margin-bottom:40px;
    }

    .vacantes-mini{
        font-size:.7rem;
        letter-spacing:3px;
        margin-bottom:10px;
    }

    .vacantes-title{
        font-size:2rem;
        letter-spacing:-1px;
        line-height:1.1;
    }

    /* Oculta la línea */
    .vacantes-grid::before{
        display:none;
    }

    .vacante-card::before{
        display:none;
    }

    .vacante-card{

        grid-template-columns:1fr;

        grid-template-areas:
            "icon"
            "titulo"
            "descripcion"
            "boton";

        justify-items:center;

        text-align:center;

        row-gap:12px;

        padding:22px 18px;

        border:1px solid #ececec;

        border-radius:18px;

        margin-bottom:15px;
    }

    /* Icono más pequeño */
    .vacante-icon{

        width:55px;
        height:55px;
    }

    .vacante-icon i{

        font-size:22px;
    }

    /* Título más pequeño */
    .vacante-card h3{

        font-size:1.25rem;

        line-height:1.2;
    }

    /* Descripción más pequeña */
    .vacante-card p{

        font-size:.85rem;

        line-height:1.5;

        max-width:100%;
    }

    /* Botón más pequeño */
    .vacante-card .btn-hero{

        font-size:.8rem;

        padding:10px 20px;

        width:auto;

        min-width:140px;
    }

}



/* 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 #b8b8b8;
    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 #ff0000; /* 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, #ff0000, 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); }
}



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

.contact-section{

    position:relative;

    padding:120px 8%;

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

    overflow:hidden;
}

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

.contact-glow{

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(248, 248, 248, 0.434),
        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:#f6f6f6;

    color:#6b6b6b;

    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:#ff0000;

    margin-bottom:28px;
}

.contact-left h2 span{

    background:
    linear-gradient(
        90deg,
        #b20909,
        #757477
    );

    -webkit-background-clip:text;

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

.contact-left p{

    font-size:18px;

    line-height:1.8;

    color:#000000;

    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(153, 153, 153, 0.637);
}
.info-card:hover{

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

    box-shadow:
    0 25px 40px rgba(255, 255, 255, 0.507);
}


.info-wave{

    position:absolute;

    width:120px;
    height:120px;

    background:
    radial-gradient(
        rgba(242, 242, 242, 0.942),
        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,
        #ff0000,
        #ff0000
    );

    color:#ffffff;

    font-size:24px;

    box-shadow:
    0 12px 25px rgba(255, 255, 255, 0.721);

    flex-shrink:0;
}

.info-content{

    flex:1;

    text-align:left;
}


.info-content h4{

    margin-bottom:6px;

    font-size:22px;

    color:#000000;
}

.info-content span{

    color:#959595;

    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, 0.903);

    backdrop-filter:blur(20px);

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

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

.form-top{

    margin-bottom:30px;
}

.contact-form-box h3{

    font-size:34px;

    color:#cc1818;

    margin-bottom:10px;
}

.form-top p{

    color:#2e2d2d;
}

/* =========================================================
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:#000000;

    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 #bb1616;

    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:#ea1919;

    box-shadow:
    0 0 0 4px rgba(188, 57, 57, 0.12);
}

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

.contact-btn{

    border:none;

    padding:18px 24px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #bc3939,
        #bc3939
    );

    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(130, 130, 130, 0.25);
}

.contact-btn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 22px 40px rgba(113, 113, 113, 0.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:#f8f9f9;

    color:#f90101;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;
}

.map-header h3{

    font-size:42px;

    color:#000000;
}

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

.contact-map{

    position:relative;

    overflow:hidden;

    border-radius:36px;

    box-shadow:
    0 25px 60px rgba(197, 198, 200, 0.416);
}

.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(197, 16, 16, 0.92);

    backdrop-filter:blur(12px);

    box-shadow:
    0 15px 35px rgba(142, 142, 142, 0.696);
}

.map-floating-card i{

    width:55px;
    height:55px;

    border-radius:18px;

    display:flex;

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

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

    color:#9d9d9d;

    font-size:22px;
}

.map-floating-card strong{

    display:block;

    color:#071a35;

    margin-bottom:4px;
}

.map-floating-card span{

    color:#ffffff;

    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: #47afb6;
    color: white;
    text-align: center;
    padding: 30px;
}

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

.form-container {
    background: rgb(255, 255, 255);
    padding: 40px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

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

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

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

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

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


.formulario select {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #16859e;
    font-family: 'Poppins';
    background: rgb(253, 253, 253);
    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: #000000;
    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(156, 156, 156, 0.547);

    border:
        1px solid rgba(192, 192, 192, 0.615);

    color:#8a1414;

    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,
            
            #c50b0bf9 30%,
            #ff0000 70%,
            #ffffff74 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(188, 34, 34, 0.516)
        );
}

/* gradient principal */

.servicios-intro h2 span {

    background:
        linear-gradient(
            90deg,
            #000000 0%,
            #ff0000 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(167, 40, 40, 0.36),
            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,
            #000000,
            #fd0101,
            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: #ffffff;
    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: rgba(255, 255, 255, 0.66);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(171, 168, 168, 0.1);
    z-index: 10;
    border: 2px solid #c50f0f;
    animation: pulseCore 3s infinite ease-in-out;
}

@keyframes pulseCore {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(248, 105, 105, 0.573); }
    50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(159, 157, 157, 0.652); }
}
.nodo-central img { width: 80px; }

/* --- BURBUJAS DE SERVICIO (NODOS) --- */
.nodo-servicio {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.914);
    backdrop-filter: blur(10px);
    border: 2px solid rgb(208, 27, 27);
    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: rgb(255, 187, 187);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Ajuste específico para los títulos dentro de los nodos */
.nodo-content h3 {
    font-size: 0.75rem;    /* Reduce el tamaño del texto */
    line-height: 1.1;       /* Ajusta el interlineado para que sea más compacto */
    margin: 5px 0 0 0;      /* Controla el margen superior del texto */
    word-break: break-word; /* Fuerza el salto de línea si es necesario */
    padding: 0 5px;         /* Da un poco de margen interno respecto al círculo */
}

/* Opcional: Si quieres reducir el icono para que haya más espacio para el texto */
.nodo-content i {
    font-size: 1.5rem !important; /* Un poco más pequeño que los 2rem actuales */
}
/*COLOR DEL ICONO*/
.nodo-servicio i {
    font-size: 2rem;
    color: #d51b1b;
}



.nodo-servicio::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.645), 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 #a72828;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    
    color: #878484;
    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(255, 0, 0, 0.938);
    z-index: 2;
    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: #fde6e6d1; 
    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 #fde6e6d1;
    box-shadow: 0 30px 60px rgba(87, 87, 87, 0.538);
    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: rgb(255, 255, 255); /* 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: #ff0000;
    margin-bottom: 10px;
    text-shadow: 0 0 15px rgb(0, 0, 0);
}


.panel-item:hover {
    background: rgb(245, 242, 242);
    border: 3px solid #7a7676;
    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:#000000;

    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,
            #ff0505,
            #ff0000
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:
        0 10px 30px rgba(255, 65, 65, 0.626);

    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:#a70e0e;

    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,
            #b7b7b7,
            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: #f30202;
    margin: 20px auto 0;
    border-radius: 10px;
}






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

.why-pro {

    background: #9a9a9ad8;

    color: rgb(241, 0, 0);

    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(0, 0, 0, 0.847);

    border-radius:50px;

    background:
        rgba(241, 235, 235, 0.712);

    color:#cb0a0a;

    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 #ffffff;
}

/* brillo badge */

.why-badge::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    

    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,
            #ff0000e4 0%,
            #ff0000 35%,
            #5f5f5f
        );

    -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:#a9ab9c;

    line-height:1.8;

    font-size:1rem;
}

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

.why-pro::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    

    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,
            rgb(161, 161, 161),
            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,
    #ff0000,
    #000000,
    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,
            #f50000,
            #150000
        );

    border-radius: 50%;

    box-shadow:
        0 0 20px rgb(214, 63, 63);

    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 rgb(164, 14, 14);

    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(255, 255, 255, 0.8);
}

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

.why-content{

    background:
        rgb(255, 255, 255);

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

    padding:24px;

    border-radius:20px;

    backdrop-filter:blur(12px);

    transition:.4s ease;

    width:100%;
}

/* hover card */

.why-item:hover .why-content{

    border-color:
        rgb(0, 0, 0);

    background:
        rgba(255, 254, 254, 0.868);

    transform:
        translateY(-4px);
}

/* titulo */

.why-content h3 {

    margin-bottom: 10px;

    font-size: 1.3rem;

    font-weight:700;

    color:rgb(255, 0, 0);

    transition:.3s ease;
}
    
/* hover titulo */

.why-item:hover h3 {

    color: #f6b04f;
}

/* texto */

.why-content p {

    color: #5f5f5f;

    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: linear-gradient(135deg, #ffffff, #f6f6f6);
    color: rgb(4, 4, 4);
    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: linear-gradient(135deg, #ffffff, #f6f6f6);
}




/*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,
            #ff0000,
            #000000
        );

    -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: #000000;

    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: #ffb7af5f;
    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, #ff0000, #000000);
    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(197, 45, 34, 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 #fdfdfd; 
    
    /* 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, #000000, #ff0000); /* 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: #ff0000;
    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: #f4f9fa; /* Cambia al verde de tu logo al tocarlo */
    box-shadow: 0 10px 25px rgba(116, 116, 116, 0.451);
}




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

.timeline-dot {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border:1px solid #090909;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(54, 56, 58, 0.7);
}
.timeline-section {
    padding: 100px 20px;
    min-height: 100vh;
}





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

.corporate-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, #fbfbfbb4, #ffffff);
    text-align: center;
    color: #000000;
    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(255, 255, 255, 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: #5b0000 !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,
            #ff0000,
            #ff0000,
            #ff0000
        );

    -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(200, 25, 13, 0.603);
}
/* =========================
   MEJOR
========================= */

.bottom-word{

    font-size:4rem;

    font-weight:900;

    letter-spacing:10px;

    color:#656565;

    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(131, 130, 130, 0.664);
}

/* =========================
   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,
            #f8f8f8,
            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(135deg, #ffffff, #bebebe);
    border-radius: 18px;
    padding: 45px 35px;
    text-align: left;
    position: relative;

    

    transition: all 0.35s ease;

    box-shadow: 0 15px 35px rgba(124, 122, 122, 0.704);

    overflow: hidden;
}

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

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

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

    background: linear-gradient(
        120deg,
        transparent,
        rgba(246, 73, 73, 0.419),
        transparent
    );

    transition: 0.6s;
}

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

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

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

    background: #f7f7f7;
    border-radius: 12px;

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

    margin-bottom: 20px;

    box-shadow: 0 10px 20px rgba(69, 69, 69, 0.821);
}

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

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

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

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

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

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

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

.corp-values strong {
    color: #8b8a8a;
}





/* 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: rgba(255, 255, 255, 0.978);
  -webkit-text-stroke: 1.5px #828282; /* borde negro */
}


/* 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: hsl(0, 0%, 100%);
}

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

  text-shadow: 0 5px 20px rgba(84, 79, 79, 0.851);


}

/* 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;
}

.frase-destacada {
  font-size: 24px;
  font-weight: 600;
  color: #fffdfd;

  background: rgba(255, 255, 255, 0.812);
  padding: 12px 20px;
  border-radius: 10px;
  display: inline-block;
}
/* botón */
.btn-hero {
  display: inline-block;
  padding: 14px 30px;
  background: linear-gradient(to right, #c11010, #c11010);
  color: #828282;
  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, #c11010, #c11010);
  transform: scale(1.08);
  box-shadow: 0 10px 25px rgba(255, 255, 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,
    #60606093,
    #fefeff
    );

    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:#fefffd;

    color:#ff0000d1;

    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:hsl(0, 0%, 0%);
}

.modalidad-heading .intro{

    max-width:760px;

    margin:auto;

    font-size:20px;

    line-height:1.8;

    color:#c61616;
}

/* =========================================
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 #070707;

    overflow:hidden;

    transition:.45s ease;

    box-shadow:
    0 15px 40px rgb(155, 156, 156);

    z-index:1;
}

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

.modo-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    background:
    radial-gradient(
    circle,
    rgba(255, 199, 199, 0.779),
    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:#ff1111;

    box-shadow:
    0 30px 60px rgb(146, 146, 145);
}

/* =========================================
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,
    #ff00006d,
    #fbfbfb
    );

    box-shadow:
    0 15px 35px rgba(124, 124, 124, 0.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:#ff0000bb;

    line-height:1;
}

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

.modo-card h3{

    font-size:34px;

    font-weight:900;

    margin-bottom:20px;

    color:#000000;

    position:relative;

    z-index:2;
}

.modo-card p{

    font-size:17px;

    line-height:1.9;

    color:#c91515;

    position:relative;

    z-index:2;
}

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

.modo-glow{

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgb(255, 219, 219),
    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: #000000; /* 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: #ff0d05 !important; /* Azul oscuro corporativo */
  line-height: 0.9 !important;
  margin-bottom: 35px !important;
  letter-spacing: -2px;
}

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

.summary {
  font-size: 1.25rem;
  color: #828383;
  line-height: 1.8;
  max-width: 500px;
  /* Detalle de línea elegante a la derecha */
  border-right: 5px solid #7a7a7a; 
  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,
        #fcfcfc 0%,
        #ffffff 45%,
        #ffffff 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:#ffffff;

    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(188, 57, 57, 0.25);

    color:#ba0a0a;

    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:#ff0000;

    line-height:1.1;

    margin-bottom:25px;

    font-weight:800;
}

.radar-section .radar-top h2 span{

    color:#121212;
}

/* TEXTO */

.radar-section .radar-top p{

    color:#aa1111;

    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(124, 126, 126, 0.303);

    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(146, 14, 14, 0.099);
}

.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(0, 0, 0, 0.463) 0%,
        rgba(86, 84, 84, 0.46) 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,
        #ff0000,
        #fc0202
    );

    top:50%;
    left:50%;

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

    display:flex;

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

    box-shadow:
        0 0 40px rgba(96, 95, 95, 0.595);

    animation:pulseCenter 3s infinite;
}

.radar-section .center-glow{

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        rgba(176, 35, 35, 0.311);

    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:
        rgb(218, 44, 44);

    border:
        1px solid rgba(255, 0, 0, 0.837);

    backdrop-filter: blur(10px);

    color:#f9f9f9;

    font-size:28px;

    box-shadow:
        0 0 30px rgba(198, 198, 198, 0.468);

    transition:.4s ease;
}

/* HOVER ICONOS */

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

    transform:scale(1.15);

    box-shadow:
        0 0 40px rgb(148, 154, 155);
}

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

.radar-section .radar-info{

    text-align:center;

    max-width:180px;
}

.radar-section .radar-info h3{

    color:#343434;

    font-size:20px;

    margin-bottom:8px;
}

.radar-section .radar-info p{

    color:#a92121;

    font-size:14px;

    line-height:1.6;
}

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

.radar-section .radar-pulse{

    position:absolute;

    width:90px;
    height:90px;

    border-radius:50%;

    border:1px solid rgb(255, 0, 0);

    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(143, 143, 142, 0.482);
    }

    50%{
        box-shadow:
            0 0 55px rgba(57, 188, 186, 0.5);
    }

    100%{
        box-shadow:
            0 0 20px rgba(155, 155, 155, 0.438);
    }
}

/* =========================================
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: #cd1e0ede;
  overflow: hidden;
  border-top: 1px solid rgba(255, 0, 0, 0.96);
}

.cta-redes{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:12px;           /* antes 16px */
    margin-top:20px;
    flex-wrap:wrap;     /* por si agregas más iconos */
}

.cta-redes a{
    width: 40px;        /* antes 52px */
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:12%;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    font-size:18px;     /* antes 22px */
    text-decoration:none;
    transition:.35s ease;
    backdrop-filter:blur(8px);
}

.cta-redes a:hover{
    background:#fff;
    color:#d63b2f;
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,.18);
}

/* Colores de cada red */
.cta-redes .whatsapp:hover{
    color:#25D366;
    border-color:transparent;
    transform:translateY(-4px) scale(1.08) rotate(8deg)
}

.cta-redes .facebook:hover{
    color:#1877F2;
    border-color:transparent;
    transform:translateY(-4px) scale(1.08) rotate(8deg)
}

.cta-redes .instagram:hover{
    color:#fff;
    background:linear-gradient(
        45deg,
        #F58529,
        #FEDA77,
        #DD2A7B,
        #8134AF,
        #515BD4
    );
    border-color:transparent;
    transform:translateY(-4px) scale(1.08) rotate(8deg);
}

.cta-redes .tiktok:hover{
    color:#fff;
    background:#000;
    border-color:#545555;
    box-shadow:
        0 0 8px #aeafaf,
        0 0 18px #FE2C55;
    transform:translateY(-4px) scale(1.08) rotate(8deg);
}
@media (max-width:768px){

    .cta-redes{
        justify-content:center;
    }

}
/* 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: #fdfdfd; /* Verde corporativo */
  top: -100px;
  right: -50px;
}

.luz-2 {
  width: 400px;
  height: 400px;
  background: #fffbfb; /* 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: #c81515;
  font-size: clamp(24px, 4vw, 36px); /* Tamaño fluido */
  line-height: 1.2;
  text-align: left;
  margin-bottom: 20px;
  font-weight: 800;
  background: linear-gradient(to right, #ffffff, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-texto p {
  color: rgba(0, 0, 0, 0.982);
  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;
  
  background: rgba(187, 187, 187, 0.081);
  border: 1px solid rgba(255, 255, 255, 0);
  color: #ffffff;
  font-size: 14px;
  backdrop-filter: blur(15px); /* Efecto cristal */
}

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

.btn-cta:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.733);
  background: #ffffff; 
  color: #ffffff;
}


/* Contenedor exterior (mantiene su tamaño original de 180px) */
.cta-logo {
  display: inline-block;
  position: relative;
  /* Tamaño del contenedor original, define el espacio que ocupa en el DOM */
  max-width: 180px; 
  /* Margen original para el resplandor */
  margin: 50px;     
  
  /* Mantenemos los filtros de sombra intensos y blancos */
  filter: drop-shadow(0 0 15px rgb(255, 255, 255))
          drop-shadow(0 0 40px rgb(255, 255, 255))
          drop-shadow(0 0 80px rgb(255, 255, 255));
          
  will-change: filter;
}

/* Imagen interior del logo (la que se escala) */
.cta-logo img {
  width: 100%; /* La imagen ocupa el 100% del contenedor (180px) */
  height: auto;
  display: block;
  filter: none; 
  
  /* APLICAMOS EL ESCALADO AQUÍ */
  /* Escalar al 150% (1.5x) del tamaño original dentro del contenedor */
  /* Visualmente, el logo ahora medirá 270px de ancho (180 * 1.5) */
  transform: scale(1.5); 
  
  /* Ajustamos el origen de la transformación para que escale desde el centro */
  transform-origin: center center; 
  
  /* Mantenemos la animación suave */
  animation: flotar 6s ease-in-out infinite;
}

@keyframes flotar {
  0%, 100% { 
    /* Es crucial mantener el escalado dentro de la animación */
    transform: translateY(0) scale(1.5); 
  }
  50% { 
    transform: translateY(-25px) scale(1.5); 
  }
}
/* =========================
   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: rgb(255, 0, 0) !important;
    font-size: 24px !important;
}

/* OCULTAR TEXTO ES */
#current-lang{
    display: inline-block !important;
    color: rgb(205, 31, 31) !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(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);

    border-radius: 15px;
    overflow: hidden;

    min-width: 180px;

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

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

/* OPCIONES */
.lang-option{
    padding: 14px 18px;
    color: rgb(0, 0, 0);
    cursor: pointer;
    transition: .3s;
    font-family: 'Poppins', sans-serif;
}
.lang-option .fi {
    margin-right: 8px; /* Espacio entre bandera y texto */
    vertical-align: middle;
}
.lang-option:hover{
    background: rgba(255, 12, 12, 0.588);
}

/*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(255, 0, 0, 0.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:#d22020;
    color:#ffffff;
}

.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,#ffffff);
}

/* 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:#000000;

    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,
            #ff0000 0%,
            
            #ff0000 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,
            #000000,
            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:#bd2e2b;
}

.clientes-header p{

    font-size:1.05rem;

    line-height:1.9;

    color:#720606;

    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(188, 57, 57, 0.355),
            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
========================= */
/*==================================================
WRAPPER
==================================================*/
/*==================================================
WRAPPER
==================================================*/

.clientes-wrapper{
    max-width:900px;
    margin:auto;
    overflow:hidden;
    position:relative;
    padding:35px 0;
}

/*==================================================
MARQUEE
==================================================*/

.clientes-marquee{
    overflow:hidden;
    width:100%;
    position:relative;
}

/*==================================================
TRACK
==================================================*/

.marquee-track{
    display:flex;
    width:max-content;
    animation:scroll 28s linear infinite;
}

.marquee-track:hover{
    animation-play-state:paused;
}

/*==================================================
GRUPO
==================================================*/

.marquee-group{
    display:flex;
    align-items:center;
    gap:30px;
    padding:15px 0;
}

/*==================================================
TARJETAS (LOGOS)
==================================================*/

.marquee-group img{
    width:150px;
    height:95px;
    object-fit:contain;

    background:rgba(255,255,255,.85);
    backdrop-filter: blur(6px);

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

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

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:0.4s ease;

    opacity:.85;

    /* 🔥 en vez de gris → color suave */
    filter:saturate(1.1) brightness(1.05);
}

/*==================================================
HOVER (más premium)
==================================================*/
.marquee-group img{
    margin:0 20px;
}
.marquee-group img:hover{
    transform:translateY(-10px) scale(1.1);

    opacity:1;

    filter:saturate(1.4) brightness(1.1);

    box-shadow:0 18px 50px rgba(216,0,0,.25);

    border-color:rgba(216,0,0,.5);
}

/*==================================================
DOS BARRAS VERTICALES (NUEVO EFECTO)
==================================================*/

.clientes-marquee::before,
.clientes-marquee::after{
    content:"";
    position:absolute;
    top:0;
    width:6px;              /* 🔥 más fino */
    height:100%;
    z-index:5;
    pointer-events:none;
}

/* izquierda */
.clientes-marquee::before{
    left:0;
    background:linear-gradient(
        to bottom,
        transparent,
        #d80000,
        transparent
    );
    opacity:.35;
}

/* derecha */
.clientes-marquee::after{
    right:0;
    background:linear-gradient(
        to bottom,
        transparent,
        #d80000,
        transparent
    );
    opacity:.35;
}

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

@keyframes scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

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

@media(max-width:768px){
    .marquee-group{
        gap:16px;
    }

    .marquee-group img{
        width:110px;
        height:70px;
        padding:14px;
        border-radius:16px;
    }
}
/*==================================================
ANIMACIÓN
==================================================*/

@keyframes scroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);
    }

}

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

@media(max-width:768px){

.marquee-group{

    gap:16px;
}

.marquee-group img{

    width:110px;

    height:70px;

    padding:14px;

    border-radius:18px;
}

}





:root {
    --azul-bc: #ff0000;
    --verde-bc: #a8a8a8;
    --dark-bg: #aeaeae;
}

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

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

    background: #bcbcbc;

    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(243, 243, 243, 0.984),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #952d2dd0 0%,
            #ff5e5ed0 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(254, 255, 255, 0.942),
            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(232, 118, 86, 0.899),
            transparent
        );
}

/* LOGO */

.mini-logo {

    width: 120px;

    position: relative;

    z-index: 3;

    filter:
        drop-shadow(0 12px 30px rgb(255, 255, 255));

    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:#f609098a;

    border-radius: 20px;

    opacity: .9;

    z-index: 2;
}

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

.info-side {

    width: 70%;

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

    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(255, 0, 0, 0.978),
            transparent
        );

    transition:.5s ease;
}

/* Hover */

.info-card:hover {

    border-left: #b41a1a8a;

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

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

/* Número */

.card-num {

    font-size: 2.6rem;

    font-weight: 800;

    color: #b02121;

    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: #ff0000;

    font-size: 1rem;

    transition: .3s ease;
    
}

.info-card:hover i{

    transform: scale(1.15);

    text-shadow:
        0 0 15px rgba(31, 31, 31, 0.522);
}



/* =========================
   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 #000000;

    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(238, 195, 195, 0.35) 45%,
            rgba(116, 125, 126, 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);
    }
}





/* =========================
   MANIFIESTO — STRIPE ULTIMATE
========================= */

.manifiesto{
  padding: 180px 10%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 140px;
  align-items: start;

  background: #fff;
}

/* =========================
   LEFT — STORY (ULTRA CLEAN)
========================= */

.manifiesto-header{
  position: sticky;
  top: 140px;
  align-self: start;
}

.manifiesto-header h2{
  font-size: 60px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -1.8px;
  color: #ff0000;
  margin-bottom: 24px;
}

.manifiesto-header h2::after{
  content:"";
  display:block;
  width: 120px;
  height: 3px;
  margin-top: 22px;
  background: linear-gradient(90deg, #ff0000, transparent);
  border-radius: 999px;
}

.manifiesto-header p{
  font-size: 16px;
  line-height: 2;
  color: #000000;
  max-width: 460px;
}

/* =========================
   RIGHT — GRID SYSTEM
========================= */

.manifiesto-body{
  position: relative;
}

.linea{
  display: none;
}

/* grid real tipo Stripe */
.bloques{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

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

.bloque{
  padding: 26px;
  border-radius: 5px;

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

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.327);

  position: relative;

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  transform-style: preserve-3d;
  will-change: transform;
  opacity: 0;
  transform: translateX(40px);
  transition: all .7s cubic-bezier(.2,.8,.2,2);
}

/* hover base */
.bloque:hover{
  border-color: rgba(255, 255, 255, 0.996);
  box-shadow: 0 25px 60px rgba(255, 252, 252, 0.84);
}

/* highlight */
.bloque.highlight{
  grid-column: span 2;
  background: linear-gradient(180deg, #d6d3d3, #ffffff);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* =========================
   TYPOGRAPHY
========================= */

.bloque h3{
  font-size: 17px;
  font-weight: 850;
  color: #7f1212;
  margin-bottom: 8px;
}

.bloque p{
  font-size: 14px;
  line-height: 1.7;
  color: #666;
}

/* =========================
   STRIPE MICRO ANIMATION BAR
========================= */

.bloque::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:0%;
  height:2px;
  background:#ff0000;
  transition:.25s ease;
}

.bloque:hover::before{
  width:100%;
}

/* =========================
   ENTRY ANIMATION (CLEAN)
========================= */

.manifiesto-header,
.manifiesto-body{
  opacity: 0;
  transform: translateY(25px);
  transition: all .8s cubic-bezier(.2,.8,.2,3);
}

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

/* cards stagger base (fallback sin JS) */
.bloque{
  opacity: 0;
  transform: translateX(40px);
  transition: all .7s cubic-bezier(.3,.8,.3,6);
}
.manifiesto.show .bloque{
  opacity: 1;
  transform: translateX(0);
}

.bloque:nth-child(1){ animation-delay: .05s; }
.bloque:nth-child(2){ animation-delay: .15s; }
.bloque:nth-child(3){ animation-delay: .25s; }
.bloque:nth-child(4){ animation-delay: .35s; }
.bloque:nth-child(5){ animation-delay: .40s; }

.manifiesto.show .bloque:nth-child(1){ transition-delay: .05s; }
.manifiesto.show .bloque:nth-child(2){ transition-delay: .15s; }
.manifiesto.show .bloque:nth-child(3){ transition-delay: .25s; }
.manifiesto.show .bloque:nth-child(4){ transition-delay: .35s; }
.manifiesto.show .bloque:nth-child(5){ transition-delay: .40s; }
@keyframes fadeUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (max-width: 900px){
  .manifiesto{
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 110px 6%;
  }

  .manifiesto-header{
    position: static;
  }

  .manifiesto-header h2{
    font-size: 40px;
  }

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

  .bloque.highlight{
    grid-column: auto;
  }
}
@media (max-width: 768px){

  /* =========================
     SECCIÓN GENERAL
  ========================= */
  .manifiesto{
    padding: 80px 20px;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* =========================
     IZQUIERDA (TÍTULO)
  ========================= */
  .manifiesto-header{
    position: static; /* QUITA sticky en móvil */
    text-align: left;
  }

  .manifiesto-header h2{
    font-size: 34px;
    line-height: 1.1;
  }

  .manifiesto-header p{
    font-size: 14px;
    line-height: 1.7;
  }

  /* =========================
     GRID TARJETAS
  ========================= */
  .bloques{
    grid-template-columns: 1fr; /* 🔥 CLAVE */
    gap: 14px;
  }

  /* =========================
     CARDS
  ========================= */
  .bloque{
    transform: translateX(0); /* evita animación rara en móvil */
    opacity: 1; /* evita glitches de scroll */
  }

  /* =========================
     HIGHLIGHT
  ========================= */
  .bloque.highlight{
    grid-column: auto;
  }

}

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

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

/* HEADER */

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

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

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

    -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, 0.75);

    backdrop-filter: blur(18px);

    margin-bottom: 40px;

    min-height: 500px;

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

    box-shadow:
        0 10px 40px rgba(135, 48, 31, 0.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,
            #000000,
            #ff0000
        );
}
/* HOVER */

.stack-card:hover{

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

    box-shadow:
        0 20px 60px rgba(235, 92, 92, 0.459);
}



/* IMAGE */

.stack-image{
    flex: 1;
    
}


/* CONTENT */

.stack-content{
    flex: 1;
}

.stack-content span{
    color: #131313;

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

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

    color: #ff0101;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);

    margin:
        20px 0;
}

.stack-content p{
    color: #ffffff;

    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: #838383;

    font-size: .98rem;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    border-radius: 14px;

    background:
        rgba(147, 12, 12, 0.122);

    border:
        2px solid rgb(160, 4, 4);

    backdrop-filter: blur(10px);

    transition: .3s ease;
}

.stack-points li:hover{

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

    background:
        rgb(255, 255, 255);

    box-shadow:
    0 10px 25px rgb(248, 248, 248);
}


/*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: #858585;

    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,
        #858586 20%,
        
        #64e4eb 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,
            #3ec7c5f6
        );

    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 rgb(75, 170, 181);

}

/* ======================================================
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: #168a9c;

    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(77, 217, 210, 0.627);

    border:
        1px solid rgba(99, 99, 99, 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,
        #ababab,
        #ff0000
    );


    box-shadow:
        0 0 18px rgb(200, 35, 35);
}

/* 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:#ff0000;

    transition:.35s ease;
}

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

    color:#000000;
    
}

.nav-links a:hover::after{

    width:100%;
}

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

    color:#000000;

    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;
    }
	

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

    .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;
    }

    /* =========================================================
    SERVICIOS NODOS
    ========================================================= */

    .nodos-container{
        position:relative !important;
        width:320px !important;   /* 🔥 control total del círculo */
        height:320px !important;

        margin:0 auto !important;
    }

    .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:#ffffff !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;
    }

    

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

    .why-line{
        gap:35px;
    }

    .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%;
    }

}

/* =========================================================/*
/*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: #ff0000 !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: #aa3737 !important; 
        background: rgba(255, 255, 255, 0.938) !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: #000000 !important; 
        border-bottom: 2px solid rgba(239, 95, 95, 0.163) !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: #be2121d8 !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;



    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.579),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #949494 0%,
            #949494 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.592),
            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(218, 59, 59, 0.781),
            transparent
        );
}

/* LOGO */

.mini-logo {

    width:120px;

    position:relative;

    z-index:3;

    filter:
        drop-shadow(
            0 12px 30px rgba(0, 0, 0, 0.788)
        );

    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:#949494;

    border-radius:20px;

    opacity:.9;

    z-index:2;
}

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

.info-side {

    width:70%;

    background:
        linear-gradient(
            to bottom,
            #ffffff84,
            #fcf8f8b4
        );

    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(255, 41, 41, 0.06);
}

/* Glow */

.info-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:0%;
    height:100%;

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

    transition:.5s ease;
}

/* Hover */

.info-card:hover {

    border-left:2px solid #ef1818;

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

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

/* Número */

.card-num {

    font-size:2.6rem;

    font-weight:800;

    color:#ef1818;

    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:#828587;

    font-size:3rem;

    transition:.3s ease;
}

.info-card:hover i{

    transform:scale(1.15);

    text-shadow:
        0 0 5px rgb(149, 0, 0);
}

/* =========================================================
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;
        background:#ffff !important;

        border-radius:50% !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 */
}


	/* =========================================================
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:#FFFFFF !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;
    }
}