@font-face {
    font-family: 'AvantGarde';
    src: url('./fonts/AvantGarde-Bold.woff2') format('woff2');
    font-weight: 800;
}

@font-face {
    font-family: 'Kepler';
    src: url('./fonts/Kepler-Regular.woff2') format('woff2');
    font-weight: normal;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Evita scroll horizontal indeseado */
}

/* --- FIX ANTI-PIXELADO GLOBAL PARA ANIMACIONES --- */
.team-card, 
.solucion-card, 
.cta-container, 
.client-logo {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

:root {
    --bg-color: #0A0A0A;
    --card-bg: rgba(18, 18, 18, 0.7); 
    --border-color: #222222;
    --text-main: #FFFFFF;
    --text-secondary: #A0A0A0;
    --accent-green: #00ff66; /* Verde ReBest */
    
    /* === TIPOGRAFÍAS === */
    --font-titles: 'AvantGarde', sans-serif;
    --font-body: 'Kepler', serif;
}

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

/* Solo el html tiene scroll suave — así el scroll del usuario es fluido
   pero las anclas del menú siguen siendo animadas */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body); 
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Mejora de rendimiento del scroll */
    -webkit-overflow-scrolling: touch;
}

/* --- Ajuste de Scroll para Menú Fijo --- */
section, #soluciones {
    scroll-margin-top: 110px;
}

/* === ESTANDARIZACIÓN DE PÁRRAFOS FLUIDOS === */
p {
    font-size: clamp(1rem, 1.5vw, 1.15rem); 
    line-height: 1.6;
}

/* === SELECCIÓN Y SCROLLBAR PREMIUM === */
::selection {
    background-color: var(--accent-green);
    color: #000;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 10px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-green);
}

/* =========================================
   FONDO DE SERPIENTES — cubre toda la página sin cortarse
   ========================================= */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(18, 18, 18, 0.45), rgba(18, 18, 18, 0.55)), url('img/fondo-rebest-serpientes.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -2;
    pointer-events: none;
    will-change: transform;
}

/* --- PATRÓN CIRCULAR COMO TEXTURA --- */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100vh;
    background-image: url('img/patron-circular-blanco.png');
    opacity: 0.02;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}

/* === Control total de títulos con Avant Garde === */
h1, h2, h3, h4, 
.menu-logo, 
.cta-btn, 
.btn-hero, 
.section-title, 
.highlight-title,
.card-tagline,
.menu-items a,
.role,
.founder-label {
    font-family: var(--font-titles);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}

/* Evitar estilos de enlace por defecto en el logo */
/* === CORRECCIÓN LOGO CELULAR === */
.logo {
    position: relative;
    z-index: 9999; /* Esto obliga al logo a estar por encima de cualquier cosa invisible que lo tape */
}

.logo a {
    text-decoration: none; 
    display: block; 
    line-height: 0;
    width: 100%;
    height: 100%;
}

.main-content {
    position: relative;
    z-index: 1;
}

body.menu-open {
    overflow: hidden; 
}

/* =========================================
   PANTALLA DE INTRODUCCIÓN (VIDEO OVERLAY) 
   ========================================= */
.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100dvh; 
    background-color: #000000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out; 
}

.intro-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.intro-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
}

body.intro-active {
    overflow: hidden;
}

.video-mobile {
    display: none;
}

@media (max-width: 768px) {
    .video-desktop {
        display: none;
    }
    .video-mobile {
        display: block;
    }
}

/* --- ANIMACIONES AVANZADAS --- */
.fade-in {
    opacity: 0;
    transform: translateY(60px) scale(0.98);
    transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), 
                transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.grid-cards .card:nth-child(1) { transition-delay: 0.2s, 0s, 0s; }
.grid-cards .card:nth-child(2) { transition-delay: 0.4s, 0s, 0s; }
.grid-cards .card:nth-child(3) { transition-delay: 0.6s, 0s, 0s; }

/* HEADER */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.main-header.scrolled {
    background: rgba(5, 5, 5, 0.98); 
    padding: 15px 40px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); 
}

.logo-img {
    height: 35px;
    width: auto;
    display: block;
}

.header-banner { 
    height: 50px; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%);
    text-align: center;
    overflow: visible; 
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 60vw;
    pointer-events: none;
}

.header-banner-text {
    margin: 0;
    white-space: nowrap;
    font-family: var(--font-titles);
    font-weight: 800;
    font-size: clamp(0.7rem, 1.6vw, 1rem);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-green);
    animation: pulso-neon 3s infinite ease-in-out;
}

@keyframes pulso-neon {
    0% { filter: drop-shadow(0 0 4px rgba(0, 255, 102, 0.4)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 15px rgba(0, 255, 102, 0.9)) drop-shadow(0 0 30px rgba(0, 255, 102, 0.5)); transform: scale(1.02); }
    100% { filter: drop-shadow(0 0 4px rgba(0, 255, 102, 0.4)); transform: scale(1); }
}

/* En pantallas chicas el banner se oculta para no chocar con el logo y el botón de menú */
@media (max-width: 600px) {
    .header-banner { display: none; }
}

/* HAMBURGER TOGGLE */
.hamburger-toggle {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 16px;
    transition: background 0.3s, transform 0.2s;
    z-index: 1200;
}

.hamburger-toggle:hover {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.08);
}

.hamburger-toggle .bar {
    display: block;
    width: 24px;
    height: 3px;
    background: #ffffff;
    transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1), opacity 0.3s ease;
}

.hamburger-toggle .bar + .bar { margin-top: 5px; }

.hamburger-toggle.open .bar-1 { transform: rotate(45deg) translate(5px, 6px); }
.hamburger-toggle.open .bar-2 { opacity: 0; }
.hamburger-toggle.open .bar-3 { transform: rotate(-45deg) translate(5px, -6px); }

/* =========================================================
   MENÚ HAMBURGUESA MEJORADO
   ========================================================= */
.hamburger-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100dvh; 
    background: rgba(5, 5, 5, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 110px 40px 40px; 
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
    z-index: 1050;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;
    
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}

.hamburger-menu::-webkit-scrollbar {
    display: block; 
    width: 6px;     
}

.hamburger-menu::-webkit-scrollbar-track {
    background: rgba(5, 5, 5, 0.5);
}

.hamburger-menu::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 10px;
    transition: background 0.3s;
}

.hamburger-menu::-webkit-scrollbar-thumb:hover {
    background: var(--accent-green); 
}

/* Soporte para Firefox */
.hamburger-menu {
    scrollbar-width: thin;
    scrollbar-color: #333333 rgba(5, 5, 5, 0.5);
}

.hamburger-menu.open { 
    transform: translateX(0); 
}

.menu-header { 
    margin-bottom: 30px; 
    text-align: center; 
    flex-shrink: 0; 
}

.menu-logo { 
    font-size: clamp(32px, 5vh, 42px); 
    font-weight: 900; 
    color: #FFFFFF; 
}

.menu-logo span { 
    color: var(--accent-green); 
}

.menu-subtitle { 
    color: #FFFFFF !important; 
    font-weight: 800 !important;
    font-size: 13px; 
    text-transform: uppercase; 
    margin-top: 8px; 
    letter-spacing: 2px;
}

.menu-items { 
    list-style: none; 
    text-align: center; 
    width: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 40px; 
    flex-shrink: 0;
}

.menu-items li { 
    margin: clamp(12px, 3vh, 25px) 0; 
    opacity: 1; 
    transform: translateY(0); 
    transition: all 0.3s ease; 
}

.menu-items a { 
    color: #FFFFFF; 
    text-decoration: none; 
    font-size: clamp(26px, 4.5vh, 40px); 
    font-weight: 800;
    display: inline-block; 
    position: relative; 
    transition: color 0.3s ease, transform 0.3s ease;
}

.menu-items a::after {
    content: ''; 
    position: absolute; 
    bottom: -6px; 
    left: 0; 
    width: 0; 
    height: 4px;
    background-color: var(--accent-green); 
    transition: width 0.3s ease-in-out;
}

.menu-items a:hover { 
    color: var(--accent-green); 
    transform: scale(1.03); 
}

.menu-items a:hover::after { 
    width: 100%; 
}

.menu-footer { 
    margin-top: auto; 
    padding-top: 20px;
    color: #FFFFFF !important; 
    font-weight: 800 !important;
    font-family: var(--font-titles);
    font-size: 14px; 
    text-align: center; 
    letter-spacing: 1.5px;
    flex-shrink: 0;
}

/* CONTENIDO PRINCIPAL Y HERO */
.hero {
    position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 120px 4% 50px; overflow: hidden; 
}

.hero-content { display: flex; justify-content: space-between; align-items: center; gap: 40px; width: 100%; max-width: 1300px; }

.contenedor-texto { flex: 0 1 60%; max-width: 800px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }

.titulo-principal { 
    font-size: clamp(1.2rem, 2.5vw, 2.5rem); 
    line-height: 1.1; 
    margin-bottom: 20px; 
    color: #fff; 
    width: 100%; 
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: keep-all; 
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
.titulo-principal div { display: block; width: 100%; }
.destacado { color: var(--accent-green); display: inline-block; }

.subtitulo-hero { 
    font-size: clamp(1.2rem, 2.5vw, 1.7rem); 
    color: #FFFFFF; 
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); 
    max-width: 800px; 
    margin-bottom: 40px; 
    line-height: 1.7; 
}

.contenedor-imagen { flex: 0 0 35%; max-width: 400px; display: flex; justify-content: flex-end; }
.marco-foto {
    width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); opacity: 0; transform: translateX(50px);
    transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.marco-foto.visible { opacity: 1; transform: translateX(0); }

.hero-img { width: 100%; height: auto; display: block; object-fit: cover; filter: grayscale(30%) contrast(1.1); transition: filter 0.6s, transform 0.6s; }
.hero-img:hover { filter: grayscale(0%) contrast(1.2); transform: scale(1.03); }

.btn-hero {
    display: inline-block; padding: 1.2rem 3.2rem; font-size: 1rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 2px; text-decoration: none; color: #ffffff; background: rgba(0, 255, 102, 0.05); 
    border: 2px solid var(--accent-green); border-radius: 8px; box-shadow: 0 0 15px rgba(0, 255, 102, 0.15); 
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-hero:hover { 
    background: var(--accent-green); color: #000000; box-shadow: 0 0 35px rgba(0, 255, 102, 0.4); 
    transform: translateY(-6px) scale(1.02); 
}

.char { display: inline-block; opacity: 0; transform: translateY(20px); transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.char.visible { opacity: 1; transform: translateY(0); }
.anim-retraso { opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
.anim-retraso.visible { opacity: 1; transform: translateY(0); }

/* =========================================
   TÍTULOS GLOBALES
   ========================================= */
.services, .about-section, .team-section, .clients-section { margin: 20px 0; }

.section-title { 
    font-size: clamp(2rem, 2.5vw, 2rem); 
    margin-bottom: 50px; 
    font-weight: 800; 
    position: relative; 
    text-align: center; 
    text-shadow: 0 0 15px rgba(0, 255, 102, 0.4); 
    color: #FFFFFF;
}

.section-subtitle { text-align: center; font-size: clamp(1rem, 2vw, 1.2rem); color: #ffffff; margin-top: -10px; margin-bottom: 50px; font-weight: 300; font-style: italic; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 30px; }

/* === CARDS GLASSMORPHISM === */
.card, .about-highlight, .team-card, .cta-dark-box {
    background-color: var(--card-bg); 
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
}

.card { 
    padding: 45px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease; 
}
.card:hover {
    transform: translateY(-8px); border-color: #00ff66;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.9), 0 0 35px rgba(0, 255, 102, 0.7), 0 0 70px rgba(0, 255, 102, 0.4), inset 0 0 20px rgba(0, 255, 102, 0.4); 
}
.card h3 { font-size: 26px; margin-bottom: 15px; }
.card .card-tagline { font-size: 14px; color: var(--accent-green); text-transform: uppercase; }

.service-quote { margin-top: 60px; text-align: center; }
.service-quote p { font-size: clamp(1.4rem, 2.5vw, 1.75rem); font-style: italic; color: var(--text-main); max-width: 900px; margin: 0 auto; line-height: 1.4; border-left: 4px solid var(--accent-green); padding-left: 30px; }

/* (Bloque legacy "Nosotros" eliminado — ver definición unificada de .about-layout más abajo) */

/* =========================================
   ESTILOS: SECCIÓN SERVICIOS (TARJETAS CUADRADAS)
   ========================================= */
.services-section {
    max-width: 1200px;
    margin: 140px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services-header {
    text-align: center;
    margin-bottom: 30px;
}

.services-quote {
    color: #b3b3b3;
    font-size: 1.1rem;
    font-style: italic;
    text-align: center;
    margin-bottom: 40px;
}

.bottom-frase {
    margin-top: 40px;
}

/* Contenedor principal que envuelve flechas y carrusel */
.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1050px; /* Ancho ideal para PC */
    margin: 0 auto;
    box-sizing: border-box;
}

/* Carrusel donde van las tarjetas */
.services-carousel {
    display: flex;
    gap: 30px;
    overflow-x: hidden; /* En PC se oculta el scroll manual */
    scroll-behavior: smooth;
    padding: 20px 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Tarjeta de Servicio (Diseño Cuadrado/Vertical) */
.service-card {
    flex: 0 0 calc(33.333% - 20px); /* 3 columnas perfectas en PC */
    min-height: 310px; 
    background: rgba(13, 13, 13, 0.96);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 255, 102, 0.15);
    border-radius: 12px;
    padding: 30px 25px 25px 25px; 
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    text-align: left; 
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    position: relative; 
}

/* Efecto al pasar el mouse (PC) o estar activa */
.service-card.active, .service-card:hover {
    border-color: #00ff66;
    box-shadow: 0 10px 40px rgba(0, 255, 102, 0.25);
    transform: translateY(-8px);
}

/* Número en la esquina superior izquierda - VERDE NEÓN LLAMATIVO */
.card-number {
    font-family: var(--font-titles);
    font-size: 2.2rem; 
    font-weight: 900;
    color: #00ff66; 
    text-shadow: 0 0 12px rgba(0, 255, 102, 0.6);
    position: absolute;
    top: 15px;
    left: 25px;
    z-index: 3;
    line-height: 1;
}

/* Título completo protegido contra desbordamientos */
.card-title {
    font-size: 1.25rem;
    color: #fff;
    margin-top: 55px; /* Margen correcto para librar el número absoluto */
    margin-bottom: 12px; 
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.3;
    z-index: 2;
    white-space: normal;      /* Permite saltos de línea naturales */
    overflow-wrap: break-word; /* Rompe de forma segura si la palabra es extremadamente larga */
    word-break: normal;
    width: 100%;
}

/* Descripción */
.card-description {
    font-style: italic; 
    font-family: 'Kepler', 'Times New Roman', serif;
    font-size: 1.2rem; 
    color: #ffffff;
    line-height: 1.5; 
    z-index: 2;
    overflow-wrap: break-word;
    margin: 0;
    width: 100%;
}

.card-description strong {
    color: #00ff66;
    font-weight: 700;
}

/* Flechas de navegación (Ocultas por defecto en PC desktop plano) */
.carousel-arrow {
    display: none; 
}

/* Puntos (Dots) */
.carousel-dots {
    display: none; 
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
}

/* Especificidad extra: vence a .mobile-only { display:block !important } en el mismo breakpoint */
@media (max-width: 900px) {
    .carousel-dots.mobile-only {
        display: flex !important;
    }
}

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

.dot.active {
    background-color: #00ff66;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.8);
    transform: scale(1.2);
}

/* =========================================
   CARRUSEL MÓVIL Y TABLET (ZONA SEGURA ELÁSTICA)
   ========================================= */
@media (max-width: 900px) {
    .services-section {
        margin: 80px auto;
    }

    /* En lugar de un ancho fijo cerrado, usamos el 100% de la pantalla 
       con un colchón (padding) a los lados de 65px para que las flechas vivan ahí de forma segura */
    .carousel-container {
        width: 100%;
        max-width: 480px; 
        padding: 0 65px; 
        margin: 0 auto;
    }

    .services-carousel {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 25px 0;
        gap: 20px;
    }

    .services-carousel::-webkit-scrollbar {
        display: none;
    }

    /* La tarjeta ahora es elástica dentro del espacio seguro */
    .service-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-height: 290px; 
        height: auto; /* Permite crecimiento natural si el texto varía */
        transform: none !important; /* Desactivamos traslación vertical molesta en touch */
    }

    /* Título sutilmente adaptado para pantallas medianas/chicas */
    .card-title {
        font-size: 1.2rem;
        margin-top: 50px;
    }

    /* Ubicación milimétrica de las flechas dentro de la zona segura lateral */
    .carousel-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        background: #0d0d0d;
        border: 2px solid #00ff66;
        color: #00ff66;
        font-size: 1.1rem;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        box-shadow: 0 0 12px rgba(0, 255, 102, 0.3);
        transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }

    /* Posición exacta: ya no se salen de la pantalla general */
    .carousel-arrow.prev { left: 12px; }
    .carousel-arrow.next { right: 12px; }

    .carousel-arrow:active {
        background: #00ff66;
        color: #000000;
        box-shadow: 0 0 18px #00ff66;
    }

    .carousel-dots {
        display: flex; 
    }
}

/* Celulares muy pequeños (Pantallas desde 320px como iPhone SE) */
@media (max-width: 450px) {
    /* Ajustamos el colchón lateral para no asfixiar tanto a la tarjeta en pantallas diminutas */
    .carousel-container {
        padding: 0 52px;
    }
    .soluciones-carousel-wrapper {
        padding: 0 52px;
    }
    
    .carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
    
    .carousel-arrow.prev { left: 8px; }
    .carousel-arrow.next { right: 8px; }
    
    .service-card {
        padding: 25px 20px 20px 20px;
        min-height: 280px;
    }

    .solucion-col-panel {
        padding: 30px 20px;
    }
    
    .card-number {
        font-size: 1.9rem;
        top: 22px;
        left: 20px;
    }

    /* Reducción clave: Aquí evitamos que "ESTRATEGIA DE CONTENIDO" genere desbordamientos */
    .card-title {
        font-size: 1.1rem;
        margin-top: 45px;
        letter-spacing: 0px;
    }

    .card-description {
        font-size: 0.9rem;
    }
}
/* =========================================
   FRASE CON LÍNEA VERDE (DISEÑO ORIGINAL)
   ========================================= */
.frase-linea-verde {
    display: flex;
    justify-content: center; /* Centra todo el bloque en la pantalla */
    align-items: center; /* Alinea la línea y el texto verticalmente */
    gap: 20px; /* Distancia exacta entre la línea verde y el texto */
    margin: 60px auto; /* Espacio arriba y abajo de la frase */
    padding: 0 20px;
    max-width: 900px;
    box-sizing: border-box;
}

.frase-linea-verde .linea {
    width: 3px; /* Grosor de la línea */
    height: 35px; /* Altura de la línea */
    background-color: #00ff66; /* Verde neón ReBest */
    flex-shrink: 0; /* La línea nunca se achica */
}

.frase-linea-verde p {
    font-family: var(--font-body);
    font-style: italic; /* Letra en cursiva */
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: #ffffff; /* Blanco apagado/gris claro */
    margin: 0;
    font-weight: normal;
    min-width: 0; /* Permite que el texto haga wrap dentro del flex en vez de desbordar */
    flex: 1 1 auto;
    overflow-wrap: break-word;
}

@media (max-width: 600px) {
    .frase-linea-verde {
        padding: 0 16px;
        gap: 14px;
    }
    .frase-linea-verde p {
        font-size: 1rem;
    }
}

/* Hover Dinámico de la Tarjeta */
.service-item:hover {
    border-color: #00ff66; /* Verde ReBest */
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 255, 102, 0.15), 0 0 25px rgba(0, 255, 102, 0.05);
}

.service-number {
    font-size: 3.5rem;
    font-weight: 900;
    font-family: 'AvantGarde', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
    line-height: 1;
    transition: -webkit-text-stroke 0.4s ease, color 0.4s ease, transform 0.4s ease;
    display: inline-block;
}

/* Interacción con el número */
.service-item:hover .service-number {
    -webkit-text-stroke: 1px #00ff66;
    color: rgba(0, 255, 102, 0.08);
    transform: scale(1.08) translateX(5px);
}

.service-title {
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.service-item:hover .service-title {
    color: #00ff66;
}

.service-text {
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.7;
}

.service-text strong {
    color: #ffffff;
    font-weight: 600;
}

.services-footer-phrase {
    margin-top: 100px;
    text-align: center;
    padding: 0 20px;
}

.services-footer-phrase p {
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    max-width: 850px;
    margin: 0 auto;
    letter-spacing: -0.5px;
}

.services-footer-phrase p span {
    color: #00ff66;
    position: relative;
    white-space: nowrap;
}

/* =========================================
   ANIMACIÓN EN CASCADA PARA TARJETAS (SOLO PC)
   ========================================= */
@media (min-width: 901px) { /* Aseguramos que solo afecte a PC, donde no hay carrusel activo */
    .service-card {
        /* Estado inicial oculto y desplazado hacia abajo */
        opacity: 0;
        transform: translateY(80px); /* Qué tan abajo empieza la tarjeta */
        transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    }

    /* Estado cuando se hace visible */
    .service-card.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* El hover natural debe sobreescribir la posición visible */
    .service-card.is-visible:hover {
        border-color: #00ff66;
        box-shadow: 0 10px 40px rgba(0, 255, 102, 0.25);
        transform: translateY(-8px); /* Levanta un poco la tarjeta al pasar el mouse */
    }
}

/* (Bloque legacy "Nosotros" #2 eliminado — ver definición unificada de .about-layout más abajo) */

/* =========================================
   EQUIPO (JERARQUÍA Y PROTAGONISMO DE FOTOS)
   ========================================= */
.team-grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 40px; 
    max-width: 1100px; 
    margin: 0 auto; 
}

/* Las tarjetas se estirarán a la misma altura automáticamente gracias a flex */
.team-card { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 25px; 
    padding: 35px 30px; 
    flex: 1 1 400px; 
    max-width: 500px; 
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); 
    opacity: 0; 
    filter: blur(10px); 
    border-radius: 20px; 
    text-align: center; 
    position: relative; 
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

/* Etiqueta Socio Fundador */
.corner-tag {
    position: absolute; 
    top: -1px; 
    left: -1px; 
    background: rgba(0, 255, 102, 0.1); 
    border: 1px solid var(--accent-green); 
    color: var(--accent-green); 
    padding: 8px 16px; 
    border-radius: 19px 0 20px 0; 
    font-size: 12px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 800; 
    font-family: var(--font-titles); 
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.2); 
    z-index: 5;
}

/* Animaciones de aparición */
.card-duvan { align-self: center; transform: translateX(-150px) scale(0.95); }
.card-nicolas { align-self: center; transform: translateX(150px) scale(0.95); }
.team-card.is-visible { 
    opacity: 1; 
    transform: translate3d(0, 0, 0) scale(1); 
    filter: none; 
}

/* Efecto hover en la tarjeta */
.team-card.is-visible:hover { 
    box-shadow: 0 15px 45px rgba(0, 255, 102, 0.15); 
    border-color: var(--accent-green); 
    transform: translateY(-8px) scale(1.01); 
}

/* --- CONTENEDOR AJUSTADO PARA OBLIGAR SIMETRÍA --- */
.team-image-wrapper { 
    width: 100%; 
    aspect-ratio: 4 / 5; /* Obliga a que ambas fotos midan exactamente lo mismo */
    border-radius: 12px; 
    background-color: transparent; 
    border: 2px solid var(--border-color); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden; 
    transition: border-color 0.4s ease; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.team-photo { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: none; 
    transition: transform 0.5s ease; 
}

.team-card:hover .team-image-wrapper { 
    border-color: var(--accent-green); 
}

.team-card:hover .team-photo { 
    transform: scale(1.02); 
}

/* --- JERARQUÍA DE TEXTO --- */
.team-info { 
    flex: 1; 
    display: flex;
    flex-direction: column;
    gap: 8px; 
    margin-top: 5px; 
    width: 100%; 
}

.team-info h4 { 
    font-size: clamp(1.6rem, 2.5vw, 2.2rem); 
    color: var(--text-main); 
    margin: 0; 
    line-height: 1.1; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

.team-card .role { 
    color: var(--accent-green); 
    font-size: 12px; 
    text-transform: uppercase; 
    margin: 0; 
    display: block; 
    letter-spacing: 0.5px; 
    font-weight: 800; 
}

/* Texto descriptivo */
.team-info p {
    font-family: var(--font-body);
    font-weight: normal;
    font-size: clamp(1rem, 1.5vw, 1.1rem); 
    line-height: 1.55; 
    color: #ffffff; 
    font-style: normal; 
    margin: 15px 0 0 0;
}
.team-grid .founder-label:not(.corner-tag) { display: none; }

/* --- CONTENEDOR DEL SUBTÍTULO CON LÍNEA VERDE --- */
.team-header {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 0 20px;
}

.team-subtitle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    max-width: 850px;
}

.linea-verde-equipo {
    width: 3px;
    height: 35px;
    background-color: var(--accent-green);
    flex-shrink: 0;
}

.team-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.35rem); 
    color: #ffffff; 
    margin: 0;
    text-align: left; 
    line-height: 1.6;
}

/* --- OPTIMIZACIÓN EXCLUSIVA PARA CELULARES --- */
@media (max-width: 768px) {
    .team-grid { 
        gap: 30px; 
        padding: 0 15px;
    }

    .team-card { 
        padding: 30px 25px; /* Devolvemos el volumen a la tarjeta */
        gap: 20px; 
        flex: 1 1 100%; 
        max-width: 100%; /* Permite que la tarjeta fluya natural */
    }

    .team-image-wrapper {
        width: 100%; 
        margin: 0 auto;
    }

    .team-info {
        gap: 8px; 
    }

    .team-info h4 { 
        font-size: 1.8rem; /* Recuperamos un poco el tamaño del nombre */
    }

    .team-info p {
        font-size: 1rem; 
        line-height: 1.6;
        margin-top: 10px;
    }
}


/* =========================================
   SEARADORES Y LÍNEAS NEÓN 
   ========================================= */
.separador-seccion { width: 0; max-width: 80%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); margin: 60px auto; transition: width 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease; opacity: 0; }
.separador-seccion.is-visible { width: 100%; opacity: 1; }
.separator-container { width: 100%; display: flex; justify-content: center; padding: 80px 0 20px; position: relative; z-index: 5; }

.animated-neon-line { 
    width: 80%; 
    max-width: 1200px; 
    height: 2px; 
    background: linear-gradient(90deg, transparent 0%, var(--accent-green) 50%, transparent 100%); 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.3); 
}
.animated-neon-line::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); 
    animation: scanline 4s infinite linear; 
    transform: translateX(-100%);
}
@keyframes scanline { 
    0% { transform: translateX(-100%); } 
    100% { transform: translateX(100%); } 
}

/* === SEPARADOR VERTICAL  === */
.vertical-separator-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 40px;
    position: relative;
    z-index: 5;
}

.vertical-neon-line {
    width: 2px;
    height: 120px;
    background: linear-gradient(180deg, transparent 0%, var(--accent-green) 50%, transparent 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.4);
    opacity: 0;
    animation: fade-in-line 1.5s ease forwards 0.5s;
}

.vertical-neon-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: scanline-vertical 3s infinite linear;
    transform: translateY(-100%);
}

@keyframes scanline-vertical {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@keyframes fade-in-line {
    to { opacity: 1; }
}
/* =========================================
   NUEVA BARRA DE ESTADÍSTICAS
   ========================================= */
.stats-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px; 
    padding: 50px 20px;
    margin-bottom: 40px;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0, 255, 52, 0.05) 50%, rgba(0,0,0,0) 100%);
    border-top: 1px solid rgba(0, 255, 52, 0.1);
    border-bottom: 1px solid rgba(0, 255, 52, 0.1);
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--accent-green, #00ff34); 
    font-family: var(--font-titles);
    margin-bottom: 5px;
    text-shadow: 0 0 15px rgba(0, 255, 52, 0.4);
    line-height: 1;
}

.stat-label {
    font-size: 0.95rem;
    color: #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    font-family: var(--font-titles);
}

@media (max-width: 768px) {
    .stats-container {
        flex-direction: column;
        gap: 45px;
        padding: 40px 20px;
        background: transparent;
        border: none;
    }
    
    .stat-number {
        font-size: 3rem;
    }
}

/* =========================================
   SECCIÓN CLIENTES - TÍTULO
   ========================================= */
.clientes-header {
    text-align: center;
    margin-bottom: 20px;
}

/* Color verde para REBEST en el nuevo título */
.clientes-header h2 span {
    color: var(--accent-green, #00ff66);
    font-weight: 900;
}

/* Nuevo subtítulo con color claro */
.clients-subtitle {
    text-align: center;
    color: #e0e0e0;
    max-width: 800px;
    margin: 15px auto 40px auto;
    font-size: 1.4rem;
    line-height: 1.4;
}

.clients-section { 
    position: relative; 
    overflow: hidden; 
    padding: 80px 0; 
}

/* =========================================
   SECCIÓN CLIENTES - GRID LOGOS (ESCRITORIO)
   ========================================= */
.clientes-container {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 40px;
    text-align: center;
    
    /* Reemplazamos el fondo sólido y bordes por un aura difuminada */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 75%);
    border: none;
    border-radius: 0;
}

.clientes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px; 
    max-width: 1200px;
    margin: 0 auto;
}

.client-logo {
    max-width: 160px; 
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
    
    /* Sombra blanca levísima */
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
}

.client-logo:hover {
    transform: scale(1.15);
    /* Al pasar el mouse, el brillo pasa a ser verde neón */
    filter: drop-shadow(0 0 15px rgba(0, 255, 102, 0.5)); 
}

.client-logo.clone {
    display: none;
}

/* =========================================
   SECCIÓN ESTADÍSTICAS - BARRA HORIZONTAL (ESCRITORIO)
   ========================================= */
.stats-container {
    display: flex;
    flex-direction: row; 
    justify-content: space-evenly; 
    align-items: center;
    width: 100%;
    margin: 50px 0; 
    padding: 40px 20px;
    box-sizing: border-box;
    
    /* EFECTO CRISTAL / BARRA VERDE TRANSPARENTE */
    background: rgba(0, 255, 102, 0.05); 
    backdrop-filter: blur(5px); 
    border-top: 1px solid rgba(0, 255, 102, 0.15); 
    border-bottom: 1px solid rgba(0, 255, 102, 0.15); 
    box-shadow: 0 0 30px rgba(0, 255, 102, 0.05); 
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1; 
    padding: 0 5px;
}

.stat-number {
    color: var(--accent-green, #00ff66);
    font-size: 2.5rem; 
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    font-family: var(--font-titles);
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.4); /* Resplandor a los números */
}

.stat-label, 
.stat-item p {
    color: #ffffff;
    font-size: 0.85rem; 
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.3;
    font-family: var(--font-titles);
}

/* =========================================
   REGLAS PARA CELULARES (RESPONSIVE COMPLETO)
   ========================================= */
@media (max-width: 768px) {
    
    /* --- CARRUSEL CLIENTES --- */
    .clientes-container {
        overflow: hidden; 
        padding: 0;       
        width: 100%;
        background-color: transparent;
        border: none;
    }

    .clientes-grid {
        display: flex;
        flex-wrap: nowrap;     
        justify-content: flex-start;
        width: max-content;    
        max-width: none; 
        gap: 45px;             
        padding: 20px 0;
        animation: carruselInfinito 19s linear infinite; 
        will-change: transform; 
    }

   .client-logo {
        flex-shrink: 0;       
        width: 130px;        
        height: 60px;        
        object-fit: contain; 
        filter: none; 
        transition: none;
        transform: translateZ(0);
        image-rendering: -webkit-optimize-contrast; 
    }
    
    .client-logo.clone {
        display: block;
    }

    /* --- ESTADÍSTICAS - BARRA HORIZONTAL EN CELULAR --- */
    .stats-container {
        flex-direction: row; /* Mantiene la fila horizontal rígida */
        justify-content: space-evenly;
        align-items: center;
        padding: 22px 5px; /* Altura perfecta para un separador fino */
        margin: 25px 0;
        gap: 5px; 
    }

    .stat-item {
        padding: 0 4px; 
        width: auto;
        flex: 1; /* Distribuye el espacio equitativamente entre los 3 */
    }

    .stat-number {
        font-size: 1.7rem; /* Tamaño optimizado para que destaquen sin romperse */
        margin-bottom: 2px;
        text-shadow: 0 0 8px rgba(0, 255, 102, 0.3);
    }

    .stat-label, 
    .stat-item p {
        font-size: 0.65rem; /* Letra compacta pero totalmente legible */
        letter-spacing: 0.5px;
        white-space: nowrap; /* Evita saltos de línea raros al usar palabras cortas */
    }
}

/* =========================================
   ANIMACIONES CLAVE
   ========================================= */
/* Bucle continuo de logos en móvil */
@keyframes carruselInfinito {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0); 
    }
}
/* =========================================
   CONTACTO Y CTA (DISEÑO MÁS HUMANO Y CERCANO)
   ========================================= */
.cta-section { 
    margin: 100px 0 100px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0 20px; 
}

/* Tarjeta contenedora premium */
.cta-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
    max-width: 1100px;
    width: 100%;
    background: rgba(255, 255, 255, 0.02); /* Fondo súper sutil */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borde elegante sin saturar */
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* --- COLUMNA VISUAL (FOTO / VIDEO) --- */
.cta-media {
    flex: 1 1 400px;
    width: 100%;
    aspect-ratio: 4 / 3; /* Proporción agradable para la foto */
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(0, 255, 102, 0.2); 
    position: relative;
}

/* Estilo para que la foto/video cubra el espacio sin deformarse */
.cta-image, 
.cta-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* Ligero zoom a la foto al hacer hover en la tarjeta */
.cta-container:hover .cta-image,
.cta-container:hover .cta-video {
    transform: scale(1.03); 
}

/* --- COLUMNA DE TEXTO --- */
.cta-content {
    flex: 1 1 450px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: left; /* Textos a la izquierda para mayor cercanía */
}

.cta-title { 
    font-size: clamp(1rem, 2vw, 2rem); 
    font-weight: 900; 
    color: var(--text-main, #FFFFFF); 
    line-height: 1.1; 
    margin: 0; 
    letter-spacing: -0.5px; 
    text-transform: uppercase;
}

.cta-description { 
    font-size: 1.15rem;
    color: #ffffff;
    font-style: italic;
    font-family: var(--font-body);
    line-height: 1.6;
    margin: 0 0 10px 0;
}

/* --- BOTÓN DE WHATSAPP (Mantiene tus efectos originales) --- */
.cta-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 15px; 
    background-color: var(--accent-green); 
    color: #000000; 
    padding: 18px 40px; 
    font-size: 1.1rem; 
    font-weight: 800; 
    text-transform: uppercase; 
    text-decoration: none; 
    border-radius: 50px; /* Redondeado para modernizarlo */
    box-shadow: 0 0 30px rgba(0, 255, 102, 0.35); 
    transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1); 
    align-self: flex-start; /* Mantiene el botón alineado a la izquierda */
}

.cta-btn:hover { 
    background-color: #FFFFFF; 
    color: #000000; 
    box-shadow: 0 0 55px rgba(255, 255, 255, 0.5); 
    transform: translateY(-6px) scale(1.02); 
}

/* Aplica tanto si usas FontAwesome (i) como SVG (.cta-wsp-icon) */
.cta-btn i, 
.cta-wsp-icon { 
    font-size: 1.5rem; 
    width: 28px; 
    height: 28px; 
    fill: currentColor; 
    transition: transform 0.4s ease; 
}

.cta-btn:hover i, 
.cta-btn:hover .cta-wsp-icon { 
    transform: rotate(12deg) scale(1.15); 
}

/* --- RESPONSIVE PARA MÓVILES --- */
@media (max-width: 900px) {
    .cta-container {
        flex-direction: column; /* Apila la foto arriba y el texto abajo */
        padding: 35px 20px;
        gap: 35px;
        text-align: center;
    }
    
    .cta-content {
        text-align: center; /* Vuelve a centrar los textos en móvil */
        align-items: center;
    }
    
    .cta-btn {
        align-self: center; /* Centra el botón en pantallas pequeñas */
    }
}

/* =========================================
   BOTÓN FLOTANTE WSP (INTACTO)
   ========================================= */
.float-wsp { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: var(--accent-green); color: #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 1000; box-shadow: 0 10px 30px rgba(0, 255, 102, 0.4); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s, box-shadow 0.3s; }
.float-wsp:hover { transform: scale(1.12) translateY(-6px); background: #fff; color: #000; box-shadow: 0 15px 40px rgba(255, 255, 255, 0.4); }

/* =========================================
   SECCIÓN SOLUCIONES INTEGRALES — Fondo negro sólido y literal (full-bleed)
   El objetivo es un corte de escena limpio: negro absoluto de borde a borde,
   sin textura ni patrón, para que el video de la serpiente resalte por contraste.
   ========================================= */

.soluciones-integrales { 
    position: relative; 
    margin-top: 0; 
    margin-bottom: 0; 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 100px 20px;
    z-index: 1;
}

/* Pseudo-elemento full-bleed: se extiende a todo el ancho del viewport
   independientemente del max-width:1200px del contenido interno */
.soluciones-integrales::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background: #000000;
    z-index: -1;
}

/* --- EL CONTENEDOR PRINCIPAL (AHORA 100% TRANSPARENTE) --- */
.soluciones-glass-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    background-color: transparent; 
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 20px 0; 
    opacity: 1; 
    transform: none; 
}

/* --- LAS COLUMNAS INTERNAS --- */
.solucion-col {
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 25px; 
    gap: 30px; 
    transition: transform 0.4s ease;
}

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

/* --- LÍNEAS SEPARADORAS VERTICALES --- */
.vertical-divider {
    width: 1px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    margin: 0 15px;
}

/* --- BLOQUE DE TEXTOS --- */
.text-card { 
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.text-card h4 { 
    color: #ffffff; 
    font-size: clamp(1.2rem, 2vw, 1.4rem); 
    margin: 0 0 15px 0; 
    line-height: 1.3; 
    text-transform: uppercase; 
    font-family: var(--font-titles, 'Inter', sans-serif); 
    letter-spacing: 0.5px; 
    transition: color 0.3s ease;
}

.solucion-col:hover .text-card h4 {
    color: var(--accent-green, #00ff66);
}

.text-card p {
    font-size: 1rem;
    color: #e0e0e0; 
    line-height: 1.6;
    margin: 0;
    font-family: var(--font-body);
    font-weight: normal; 
}

/* --- CONTENEDOR DE ICONOS (Alineación perfecta al fondo) --- */
.icons-card { 
    width: 100%;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 15px; 
    margin-top: auto; 
    height: 45px; /* Altura unificada para que no queden espacios vacíos */
}

/* --- ICONOS ADOBE Y REDES (Todos unificados a 45px) --- */
.icon-circle {
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 1.3rem; 
    color: #ffffff; 
    transition: transform 0.4s ease;
}

.solucion-col:hover .icon-circle { transform: translateY(-5px) scale(1.1); }

.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.fb { background-color: #1877F2; }
.tk { 
    background-color: #000000; 
    border: 1px solid #333; 
    filter: drop-shadow(2px 2px 0px #00f2fe) drop-shadow(-2px -2px 0px #fe0049); 
}

/* ADOBE ESTILO RECTANGULAR */
.icon-circle.ad {
    width: 110px; 
    border-radius: 8px; 
    border: none; 
    background-color: #fff; 
    padding: 5px 10px;
}
.adobe-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* DAVINCI */
.icon-circle.dv {
    padding: 0; 
    overflow: hidden; 
    border: none; 
}
.davinci-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.4); 
}


/* =========================================
   MARKETING DIGITAL - LOGOS FLOTANTES OPTIMIZADOS
   ========================================= */

.partner-logo-img {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Ajustamos el ancho para que quepan bien en la fila */
    width: 110px;  
    height: 45px; 
    background-color: transparent; 
    border: none; 
    padding: 0; 
    
    /* Agregamos un margen forzado para separarlos visualmente */
    margin: 0 10px; 
    
    transition: transform 0.4s ease;
}

/* Ajustes a la imagen del logo directamente */
.partner-logo-img .mkt-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    /* Bajamos el zoom a 1.15 para que crezcan pero sin salirse de su espacio */
    transform: scale(1.15);
    
    /* SOMBRA BASE: Para dar contraste sobre la textura de la pared */
    filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.8));
    
    transition: filter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.4s ease;
}

/* --- EFECTOS HOVER (Al pasar el cursor) --- */

.solucion-col:hover .partner-logo-img {
    transform: translateY(-6px); 
}

/* Reducimos también un poco la escala máxima al hacer hover */
.solucion-col:hover .partner-logo-img.meta-ads .mkt-img {
    transform: scale(1.25);
    filter: drop-shadow(0 0 15px rgba(0, 129, 251, 0.8)) drop-shadow(0px 6px 6px rgba(0,0,0,0.5));
}

.solucion-col:hover .partner-logo-img.google-ads .mkt-img {
    transform: scale(1.25);
    filter: drop-shadow(0 0 15px rgba(251, 188, 5, 0.8)) drop-shadow(0px 6px 6px rgba(0,0,0,0.5));
}
/* =========================================
   AJUSTES RESPONSIVOS (Móviles)
   ========================================= */
@media (max-width: 900px) {
    .soluciones-glass-container {
        flex-direction: column;
        padding: 20px;
        gap: 40px;
    }
    
    .solucion-col { padding: 0; }
    .icons-card { height: auto; } /* En celulares el alto se adapta libremente */

    .vertical-divider {
        width: 80%;
        height: 1px;
        margin: 10px auto;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    }
}


/* =========================================
   SEPARADOR VERTICAL NEÓN ANIMADO
   ========================================= */

/* Contenedor del separador (El "tubo" oscuro) */
.separator-container-vertical {
    width: 2px; /* Grosor de la línea */
    margin: 0 15px; /* Espaciado a los lados */
    background-color: rgba(255, 255, 255, 0.05); /* Color base muy sutil */
    position: relative;
    overflow: hidden; /* Oculta lo que sale del contenedor */
    border-radius: 5px;
    display: flex;
}

/* La luz de neón que se mueve adentro */
.animated-neon-line-vertical {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Largo de la estela de luz */
    /* Degradado verde con brillo */
    background: linear-gradient(to bottom, transparent, var(--accent-green, #00ff66), transparent);
    box-shadow: 0 0 10px var(--accent-green, #00ff66), 
                0 0 20px var(--accent-green, #00ff66);
    /* Animación infinita */
    animation: neonDrop 2.5s infinite ease-in-out;
}

/* Keyframes para que la luz caiga de arriba a abajo */
@keyframes neonDrop {
    0% { top: -50%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* =========================================
   ADAPTACIÓN PARA CELULARES (Se vuelve horizontal)
   ========================================= */
@media (max-width: 900px) {
    .separator-container-vertical {
        width: 80%; /* Ancho horizontal en móviles */
        height: 2px; /* Grosor horizontal */
        margin: 25px auto; /* Centrado con espacio arriba y abajo */
    }
    
    .animated-neon-line-vertical {
        width: 50%; /* Largo de la estela en horizontal */
        height: 100%;
        /* Cambiamos el degradado de izquierda a derecha */
        background: linear-gradient(to right, transparent, var(--accent-green, #00ff66), transparent);
        /* Cambiamos la animación */
        animation: neonSlide 2.5s infinite ease-in-out;
    }

    /* Keyframes para que la luz corra de izquierda a derecha */
    @keyframes neonSlide {
        0% { left: -50%; top: 0; opacity: 0; }
        20% { opacity: 1; }
        80% { opacity: 1; }
        100% { left: 100%; top: 0; opacity: 0; }
    }
}
/* =========================================
   ESTILO DE FRASES DESTACADAS (LÍNEA VERDE)
   ========================================= */
.frase-destacada-container {
    max-width: 800px; 
    margin: 40px auto 60px auto; 
    padding: 0 20px;
    display: flex;
    justify-content: center; 
}

.frase-destacada {
    font-family: var(--font-body); 
    font-size: clamp(1.1rem, 2.2vw, 1.4rem); 
    font-style: italic; 
    color: #e0e0e0; 
    line-height: 1.6;
    margin: 0;
    padding: 5px 0 5px 25px; 
    border-left: 4px solid var(--accent-green, #00ff66); 
    text-align: left; 
}

/* =========================================
   FOOTER (ESTILO OSCURO / DARK MODE)
   ========================================= */
.main-footer { 
    background-color: #000000; 
    border-top: 1px solid #00ff66; 
    padding: 80px 40px 40px; 
    color: var(--text-secondary); 
    position: relative; 
    z-index: 10; 
    /* Agregado para forzar el ancho completo */
    width: 100%; 
    box-sizing: border-box; 
    margin: 0; /* Aseguramos que no haya márgenes fantasma */
}

.footer-container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    gap: 40px; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.footer-col { flex: 1 1 200px; min-width: 180px; }
.footer-logo { max-width: 160px; margin-bottom: 25px; display: block; }
.footer-about-text { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: #ffffff; max-width: 320px; }

.footer-title { font-family: var(--font-titles); font-size: 18px; color: #ffffff; margin-bottom: 25px; letter-spacing: 1px; text-transform: uppercase; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 15px; }
.footer-links a { font-family: var(--font-titles); color: #cccccc; text-decoration: none; font-size: 14px; letter-spacing: 1px; transition: color 0.3s ease, transform 0.3s ease; display: inline-block; }
.footer-links a:hover { color: var(--accent-green); transform: translateX(6px); }

.footer-contact-info { list-style: none; padding: 0; margin: 0; }
.footer-contact-info li { margin-bottom: 15px; font-family: var(--font-body); font-size: 15px; color: #cccccc; display: flex; align-items: center; gap: 12px; }
.footer-contact-info li i { color: var(--accent-green); font-size: 16px; width: 20px; text-align: center; }

.footer-contact-info li a {
    color: #cccccc; 
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-contact-info li a:hover {
    color: var(--accent-green); 
}

.social-icons { display: flex; gap: 15px; flex-wrap: wrap;}
.social-icon { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--accent-green); color: var(--accent-green); font-size: 20px; text-decoration: none; background: transparent; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(0, 255, 102, 0.2), inset 0 0 10px rgba(0, 255, 102, 0.1); }
.social-icon:hover { background: var(--accent-green); color: #000000; transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0, 255, 102, 0.6); }

.footer-bottom-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    max-width: 1200px; 
    margin: 60px auto 0; 
    padding-top: 30px; 
    border-top: 1px solid #00ff66; 
    font-family: var(--font-body); 
    font-size: 14px; 
    color: #888888; 
    flex-wrap: wrap; 
    gap: 20px;
}

.back-to-top { color: #ffffff; text-decoration: none; font-family: var(--font-titles); text-transform: uppercase; font-size: 12px; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; transition: color 0.3s ease; }
.back-to-top:hover { color: var(--accent-green); }
/* =========================================
   DISEÑO RESPONSIVO (MÓVILES Y TABLETS)
   ========================================= */
@media (max-width: 991px) {
    .hero { padding-top: 100px; }
    .hero-content { flex-direction: column; text-align: center; gap: 40px; }
    .contenedor-texto { flex: 1; max-width: 100%; align-items: center; text-align: center; }
    .destacado { white-space: normal; }
    .contenedor-imagen { flex: 1; justify-content: center; max-width: 350px; margin: 0 auto; }
}

@media (max-width: 900px) {
    body::before { background-size: cover; background-position: center; }
    
    .main-header { padding: 16px 24px; }
    .main-header.scrolled { padding: 10px 24px; } 
    .main-content { padding: 80px 20px 40px; }
    
    .hero, .services, .about-section, .team-section, .clients-section { margin: 0px 0; }
    .cta-section { margin: 100px 0 60px; }

    .hamburger-menu { 
        padding: 100px 20px 40px; 
    }
    
    .menu-items li {
        margin: clamp(10px, 2.2vh, 20px) 0;
    }

    .team-card { 
        flex: 1 1 100%; 
        max-width: 100%; 
        padding: 30px 20px; 
        transform: translateY(30px) scale(0.95); 
    }
    .card-duvan, .card-nicolas { transform: translateY(30px) scale(0.95); }
    .team-card.is-visible { transform: translateY(0) scale(1); }

    .team-image-wrapper { 
        flex: 0 0 220px; 
        width: 220px; 
        height: 320px; 
    }

    /* == Ajustes responsivos para el separador vertical == */
    .vertical-neon-line {
        height: 80px;
    }
    .vertical-separator-container {
        padding: 10px 0 30px;
    }
}

/* =========================================
   ANIMACIONES DE ENTRADA PARA EL CTA (SCROLL)
   ========================================= */

/* 1. Ocultamos los elementos inicialmente para que no se vean antes de llegar */
.cta-section .cta-title,
.cta-section .cta-description,
.cta-section .cta-btn {
    opacity: 0; 
}

/* 2. Cuando el JS detecta la sección y le añade .is-visible, disparamos las animaciones */
.cta-section.is-visible .cta-title {
    /* El título entra desde la izquierda */
    animation: ctaSlideInLeft 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.cta-section.is-visible .cta-description {
    /* La descripción entra desde la derecha con un pequeño retraso (0.2s) */
    animation: ctaSlideInRight 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.2s;
}

.cta-section.is-visible .cta-btn {
    /* El botón sube desde abajo con un retraso mayor (0.4s) */
    animation: ctaSlideInUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.4s;
}

/* 3. Definimos el movimiento exacto de las letras y elementos */
@keyframes ctaSlideInLeft {
    0% { 
        opacity: 0; 
        transform: translateX(-100px); /* Empieza desplazado 100px a la izq */
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); /* Termina en su posición original */
    }
}

@keyframes ctaSlideInRight {
    0% { 
        opacity: 0; 
        transform: translateX(100px); /* Empieza desplazado 100px a la der */
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes ctaSlideInUp {
    0% { 
        opacity: 0; 
        transform: translateY(50px); /* Empieza oculto un poco más abajo */
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Estilos para los nuevos iconos integrados */
.service-card-icon {
    width: 60px;
    height: auto;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.2)); /* Le da un sutil brillo verde neón de fondo */
    image-rendering: -webkit-optimize-contrast;
}

.about-highlight-icon {
    width: 50px;
    height: auto;
    margin-bottom: 10px;
    display: block;
}

.role-icon {
    width: 20px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.cta-top-icon {
    width: 70px;
    height: auto;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite; /* Pequeño efecto flotante para el cohete */
}

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

/* ==========================================================================
   ÍCONO REUTILIZABLE (usado en CTA) — efecto neón sobre PNG
   ========================================================================== */
.about-highlight-icon-new {
    width: 60px;
    height: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 5px;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)) 
            drop-shadow(0 0 20px rgba(0, 255, 102, 0.5)); 
    transition: all 0.4s ease;
}

.cta-panel-right:hover .about-highlight-icon-new {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)) 
            drop-shadow(0 0 30px rgba(0, 255, 102, 0.7)); 
    transform: scale(1.08);
}

/* ==========================================================================
   ÍCONOS DE SERVICIOS (ALINEADOS A LA DERECHA + EFECTO NEÓN)
   ========================================================================== */


.service-card {
    position: relative; 
}

/* 2. Posicionamos el ícono a la derecha y le damos el brillo */
.service-icon-right {
    position: absolute;
    top: 25px;      /* Separación desde el borde superior */
    right: 25px;    /* PEGADO A LA DERECHA */
    width: 55px;    /* El tamaño que configuraste */
    height: auto;
    object-fit: contain;
    z-index: 5;
    image-rendering: -webkit-optimize-contrast;
   
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7)) 
            drop-shadow(0 0 20px rgba(0, 255, 102, 0.5)); 
    
    transition: all 0.4s ease;
}

/* 3. Efecto interactivo: Brilla más y hace un pequeño zoom al pasar el mouse/tocar */
.service-card:hover .service-icon-right {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)) 
            drop-shadow(0 0 30px rgba(0, 255, 102, 0.7));
    transform: scale(1.1);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}


main { 
    flex-grow: 1; 
}
/* =========================================
   FONDO DE SERPIENTES VERTICAL (SOLO MÓVILES)
   ========================================= */
@media (max-width: 768px) {
    body::before {
        /* Mantenemos tu degradado oscuro y cambiamos a la imagen vertical */
        background-image: linear-gradient(rgba(35, 33, 33, 0.4), rgba(35, 33, 33, 0.6)), url('img/fondo-vertical.jpg');
        background-position: center top; 
    }
}

/* =========================================
   BURBUJA DE WHATSAPP FLOTANTE
   ========================================= */
.whatsapp-flotante {
    position: fixed;
    width: 60px;
    height: 60px;
    /* Usamos env() para respetar zonas seguras en iPhones modernos, y 40px por defecto */
    bottom: max(40px, env(safe-area-inset-bottom));
    right: 30px;
    background-color: #25D366; /* Verde oficial de WhatsApp */
    color: #FFF;
    border-radius: 50%;
    font-size: 35px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
    z-index: 99999 !important; /* Fuerza extrema para estar encima de todo */
    display: flex !important; /* Evita que otras reglas de tu tema lo oculten */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent; 
    
    /* Oculto por defecto para que no aparezca en la sección de inicio */
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

/* Esta clase se agrega con el JavaScript al hacer scroll hacia abajo */
.whatsapp-flotante.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Efecto al pasar el cursor (Hover - PC) */
.whatsapp-flotante:hover {
    background-color: #1EBE57; 
    transform: translateY(0) scale(1.1); 
    box-shadow: 0px 6px 20px rgba(37, 211, 102, 0.5); 
    color: #FFF;
}

/* =========================================
   AJUSTES EXCLUSIVOS PARA MÓVILES
   ========================================= */
@media (max-width: 768px) {
    .whatsapp-flotante {
        width: 55px;
        height: 55px;
        /* Lo subimos un poco más en celulares para que las barras de Safari/Chrome no lo tapen */
        bottom: 35px; 
        right: 20px;
        font-size: 32px;
    }
}

/* =========================================
   SECCIÓN PORTAFOLIO (CARRUSEL DINÁMICO CORREGIDO)
   ========================================= */
.portfolio-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    text-align: center;
}

/* Contenedor principal del carrusel de portafolio */
.portfolio-carousel-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    overflow: hidden; /* ¡Clave! Oculta lo que queda fuera del carrusel */
    border-radius: 16px;
    background-color: #050505; /* Fondo oscuro elegante */
    box-shadow: 0 10px 30px rgba(0, 255, 102, 0.05); /* Brillo verde sutil */
}

/* Pista del carrusel (donde se deslizan los elementos) */
.portfolio-carousel-track {
    display: flex;
    flex-wrap: nowrap; /* ¡VITAL! Obliga a que todos los elementos estén en una sola línea infinita */
    transition: transform 0.5s ease-in-out; /* La magia del movimiento */
    width: 100%;
    padding: 0; 
    margin: 0;
}

/* Cada tarjeta del portafolio */
.portfolio-card {
    flex: 0 0 100%; /* Cada tarjeta ocupa exactamente el 100% del contenedor */
    max-width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
}

/* =========================================
   ESTILOS DE LA NUEVA PORTADA
   ========================================= */
.portada-carrusel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 460px; /* Igual a .portfolio-mobile-slide en desktop */
    background-color: #0d0d0d;
    background-image: url('img/fondo-negro-patron.png');
    background-size: 500px auto;
    background-blend-mode: luminosity;
    border: 1px solid rgba(0, 255, 102, 0.2); /* Borde sutil verde neón */
    text-align: center;
    padding: 2rem;
    border-radius: 16px;
    box-sizing: border-box;
}

.contenido-portada h3 {
    font-size: 2.5rem;
    color: #00ff66; /* Verde ReBest */
    margin-bottom: 1rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.contenido-portada p {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 300;
}

/* =========================================
   FOTOS Y VIDEOS: Ajuste perfecto
   ========================================= */
.dynamic-media {
    width: 100%;
    height: 500px; 
    /* Cambiamos a 'contain' para que los videos verticales no se recorten ni se deformen */
    object-fit: contain; 
    border-radius: 16px;
    background-color: #050505; 
    display: block; 
}

/* =========================================
   FLECHAS DE NAVEGACIÓN
   ========================================= */
#prev-portfolio, #next-portfolio {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: 1px solid #00ff66;
    font-size: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#prev-portfolio:hover, #next-portfolio:hover {
    background: #00ff66;
    color: #000;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.6);
}

#prev-portfolio {
    left: 15px;
}

#next-portfolio {
    right: 15px;
}

/* =========================================
   PUNTOS INDICADORES (DOTS)
   ========================================= */
#portfolio-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    flex-wrap: wrap; /* Por si hay muchos puntos */
}

#portfolio-dots .dot {
    width: 12px;
    height: 12px;
    background: #444;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

#portfolio-dots .dot.active {
    background: #00ff66;
    box-shadow: 0 0 10px #00ff66;
    transform: scale(1.2);
}

/* Adaptación de tamaño para celulares */
@media (max-width: 768px) {
    /* dynamic-media pertenece a un carrusel legacy y mantiene su altura fija */
    .dynamic-media {
        height: 450px; 
    }
    .contenido-portada h3 {
        font-size: 1.8rem;
    }
    .contenido-portada p {
        font-size: 1rem;
    }
    #prev-portfolio, #next-portfolio {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
}

/* Texto de Instagram debajo del carrusel */
.portfolio-ig-text {
    margin-top: 50px;
    font-family: var(--font-body);
    color: #e0e0e0;
    font-size: 1.05rem;
}

.portfolio-ig-text a {
    color: #00ff66;
    text-decoration: none;
    font-weight: 800;
    transition: all 0.3s ease;
}

.portfolio-ig-text a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.8);
}

/* =========================================
   SECCIÓN NOSOTROS — Layout: imagen+texto / tarjeta Visión separada
   ========================================= */

.about-section {
    padding: 0 20px;
}

.about-section .section-title {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto 36px;
}

.about-layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* Bloque principal: imagen + texto, lado a lado */
.about-main-panel {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 0;
    background-color: rgba(10, 10, 10, 0.6);
    background-image: url('img/fondo-negro-patron.png');
    background-size: 600px auto;
    background-position: center;
    background-blend-mode: luminosity;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 102, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.4s ease;
}

.about-main-panel:hover {
    box-shadow: 0 25px 60px rgba(0, 255, 102, 0.1), 0 0 0 1px rgba(0, 255, 102, 0.15);
}

.about-image-wrapper {
    width: 100%;
    height: 100%;
    min-height: 380px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-40px);
    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1s ease;
}

.about-image-wrapper.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: auto;
}

.about-text {
    padding: 45px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.18);
    background-image: url('img/fondo-negro-patron.png');
    background-size: 500px auto;
    background-blend-mode: overlay;
}

.about-heading {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 24px;
}

.about-heading span {
    color: var(--accent-green);
}

.about-p {
    color: #ffffff;
    font-size: clamp(1rem, 1.2vw, 1.4rem);
    line-height: 1.7;
    margin-bottom: 16px;
}

.about-p:last-child {
    margin-bottom: 0;
}

.about-p strong {
    color: #00ff66;
    font-weight: 700;
}

/* Tarjeta Visión: separada, compacta y equilibrada, con ícono circular */
.about-highlight {
    padding: 38px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    background-color: rgba(8, 20, 8, 0.75);
    background-image: url('img/fondo-negro-patron.png');
    background-size: 500px auto;
    background-blend-mode: luminosity;
    border-radius: 20px;
    border: 1px solid rgba(0, 255, 102, 0.12);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 255, 102, 0.04);
    opacity: 0;
    transform: translateX(40px);
    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    align-self: start;
}

.about-highlight.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.about-highlight:hover {
    border-color: rgba(0, 255, 102, 0.25);
    box-shadow: 0 15px 45px rgba(0, 255, 102, 0.12);
}

.about-highlight-icon-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 102, 0.08);
    box-shadow: 0 0 25px rgba(0, 255, 102, 0.25), inset 0 0 12px rgba(0, 255, 102, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about-highlight-icon-circle i {
    font-size: 1.4rem;
    color: var(--accent-green);
    filter: drop-shadow(0 0 8px rgba(0, 255, 102, 0.6));
}

.about-highlight:hover .about-highlight-icon-circle {
    transform: scale(1.08);
    box-shadow: 0 0 35px rgba(0, 255, 102, 0.4), inset 0 0 14px rgba(0, 255, 102, 0.15);
}

.highlight-title {
    color: var(--accent-green);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    letter-spacing: 2px;
    margin: 0;
    position: relative;
    padding-bottom: 14px;
}

/* Pequeña línea decorativa bajo el título para separar del quote sin dejar aire muerto */
.highlight-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
}

.highlight-quote {
    color: #ffffff;
    font-size: clamp(1.5rem, 1.3vw, 1.2rem);
    line-height: 1.6;
    font-style: italic;
    margin: 0;
    max-width: 320px;
}

.highlight-quote strong {
    color: var(--accent-green);
    font-style: normal;
}

/* =========================================
   RESPONSIVE: about-layout en tablet/móvil
   ========================================= */
@media (max-width: 900px) {
    .about-layout {
        grid-template-columns: 1fr;
    }

    .about-main-panel {
        grid-template-columns: 1fr;
    }

    .about-image-wrapper {
        min-height: 320px;
    }

    .about-text {
        padding: 32px 26px;
    }

    .about-section .section-title {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .about-image-wrapper {
        min-height: 260px;
    }

    .about-text {
        padding: 28px 22px;
    }

    .about-highlight {
        padding: 32px 24px;
    }

    .highlight-quote {
        max-width: 280px;
    }
}

/* ==========================================================================
   REBEST v2.0 — PANELES NEGROS CON PATRÓN PARA TODAS LAS SECCIONES
   Clases reutilizables: .desktop-only / .mobile-only
   ========================================================================== */

.desktop-only { display: block; }
.mobile-only  { display: none;  }

@media (max-width: 900px) {
    .desktop-only { display: none !important; }
    .mobile-only  { display: block !important; }
}

/* ──────────────────────────────────────────────
   MIXIN BASE — Panel negro con patrón compartido
   ────────────────────────────────────────────── */
.team-panel,
.services-panel,
.soluciones-panel,
.cta-panel {
    background-color: rgba(0, 0, 0, 0.55);
    background-image: url('img/fondo-negro-patron.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    border-radius: 24px;
    border: 1px solid rgba(0,255,102,0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
    transition: box-shadow 0.4s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.team-panel:hover,
.services-panel:hover,
.soluciones-panel:hover,
.cta-panel:hover {
    box-shadow: 0 25px 70px rgba(0,255,102,0.1), 0 0 0 1px rgba(0,255,102,0.18);
}

/* ──────────────────────────────────────────────
   EQUIPO — fondo con más vida (menos negro plano)
   ────────────────────────────────────────────── */
.team-panel {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    min-height: auto;
    align-items: stretch;
    position: relative;
    background-color: #0a0a0a;
    background-image: url('img/fondo-negro-patron.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.team-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(0,255,102,0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(0,255,102,0.1) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.team-panel-card,
.team-panel-divider {
    position: relative;
    z-index: 1;
}

.team-panel-divider {
    background: linear-gradient(180deg, transparent, rgba(0,255,102,0.25) 50%, transparent);
    width: 2px;
    align-self: stretch;
}

.team-panel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 36px 32px;
    text-align: center;
    position: relative;
    opacity: 1;
    transform: none;
    transition: opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: radial-gradient(ellipse at 50% 0%, rgba(0,255,102,0.07) 0%, transparent 60%);
}
.team-panel-card.is-visible {
    opacity: 1;
    transform: none;
}
.team-panel-card:hover {
    background: radial-gradient(ellipse at 50% 0%, rgba(0,255,102,0.12) 0%, transparent 65%);
}
.team-panel-card:hover .team-image-wrapper {
    border-color: var(--accent-green);
    box-shadow: 0 0 35px rgba(0,255,102,0.3);
}
.team-panel-card:hover .team-photo {
    transform: scale(1.03);
}

.team-panel-card .team-image-wrapper {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 4/5;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.12);
    transition: border-color 0.4s, box-shadow 0.4s;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,255,102,0.05);
}

.team-panel-card .team-info {
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
}
.team-panel-card .team-info h4 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
}
.team-panel-card .team-info p {
    font-size: clamp(0.88rem, 1.2vw, 0.98rem);
    line-height: 1.45;
    margin: 10px 0 0 0;
}

.team-role {
    color: var(--accent-green);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 800;
    font-family: var(--font-titles);
    margin: 0;
}

/* Responsive equipo */
@media (max-width: 900px) {
    .team-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto 2px auto;
    }
    .team-panel-divider {
        width: 60%;
        height: 2px;
        margin: 0 auto;
        background: linear-gradient(90deg, transparent, rgba(0,255,102,0.25) 50%, transparent);
    }
    .team-panel-card {
        padding: 40px 24px;
    }
}

/* Glow ambiental detrás de cada tarjeta — respira suavemente */
@keyframes teamGlowBreathe {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
.team-panel-card::before {
    content: "";
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 55%;
    background: radial-gradient(ellipse, rgba(0,255,102,0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: teamGlowBreathe 5s ease-in-out infinite;
}
.team-panel-card > * {
    position: relative;
    z-index: 1;
}

/* ──────────────────────────────────────────────
   SERVICIOS — services-panel (PC solamente)
   ────────────────────────────────────────────── */
.services-panel {
    display: grid;
    grid-template-columns: 1fr 2px 1fr 2px 1fr;
    min-height: 380px;
    margin-top: 10px;
}

.services-panel-divider {
    background: linear-gradient(180deg, transparent, rgba(0,255,102,0.2) 50%, transparent);
    align-self: stretch;
}

.service-card-panel {
    padding: 45px 35px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.165,0.84,0.44,1);
}
.service-card-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.service-card-panel:nth-child(3) { transition-delay: 0.15s; }
.service-card-panel:nth-child(5) { transition-delay: 0.30s; }

.service-card-panel:hover {
    background: rgba(0,255,102,0.03);
}
.service-card-panel .service-icon-right {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 50px;
    filter: drop-shadow(0 0 8px rgba(0,255,102,0.4));
    transition: filter 0.4s, transform 0.4s;
}
.service-card-panel:hover .service-icon-right {
    filter: drop-shadow(0 0 16px rgba(0,255,102,0.7));
    transform: scale(1.1);
}
.service-card-panel .card-number {
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent-green);
    text-shadow: 0 0 12px rgba(0,255,102,0.5);
    line-height: 1;
}
.service-card-panel .card-title {
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0;
}
.service-card-panel .card-description {
    font-style: italic;
    font-family: 'Kepler', 'Times New Roman', serif;
    font-size: clamp(1.3rem, 1.2vw, 1rem);
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
}
.service-card-panel .card-description strong { color: var(--accent-green); }

/* ──────────────────────────────────────────────
   SOLUCIONES — soluciones-panel
   ────────────────────────────────────────────── */
.soluciones-panel {
    display: grid;
    grid-template-columns: 1fr 2px 1fr 2px 1fr;
    min-height: 340px;
    margin-top: 10px;
}

.soluciones-panel-divider {
    background: linear-gradient(180deg, transparent, rgba(0,255,102,0.2) 50%, transparent);
    align-self: stretch;
}

.solucion-col-panel {
    padding: 45px 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.165,0.84,0.44,1);
}
.solucion-col-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.solucion-col-panel:nth-child(3) { transition-delay: 0.15s; }
.solucion-col-panel:nth-child(5) { transition-delay: 0.30s; }

.solucion-col-panel:hover {
    background: rgba(0,255,102,0.03);
}
.solucion-col-panel:hover .icon-circle,
.solucion-col-panel:hover .partner-logo-img {
    transform: translateY(-6px) scale(1.08);
}

.solucion-col-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.solucion-col-title {
    color: #fff;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    transition: color 0.3s;
}
.solucion-col-panel:hover .solucion-col-title { color: var(--accent-green); }

.solucion-col-desc {
    color: #ffffff;
    font-size: clamp(1.2rem, 1.2vw, 1rem);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

/* Responsive soluciones — Carrusel deslizable con fondo individual por bloque */
@media (max-width: 900px) {
    .soluciones-carousel-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 480px;
        padding: 0 65px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .soluciones-panel {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 20px;
        padding: 10px 0 25px;
        margin-top: 0;
        min-height: 0;
        background: none;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        border-radius: 0;
    }
    .soluciones-panel::-webkit-scrollbar {
        display: none;
    }

    /* El divider ya no separa columnas dentro de un mismo panel: cada slide es su propio panel */
    .soluciones-panel-divider {
        display: none;
    }

    .solucion-col-panel {
        flex: 0 0 100%;
        scroll-snap-align: center;
        padding: 38px 28px;
        background-color: rgba(0, 0, 0, 0.55);
        background-image: url('img/fondo-negro-patron.png');
        background-size: 500px auto;
        background-blend-mode: luminosity;
        border-radius: 20px;
        border: 1px solid rgba(0, 255, 102, 0.15);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
    }
}

/* ──────────────────────────────────────────────
   PORTAFOLIO — Grid desktop (videos + imágenes)
   ────────────────────────────────────────────── */
.portfolio-grid-desktop {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 400px 400px;
    gap: 8px;
    max-width: 1200px;
    margin: 30px auto 0;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(0,255,102,0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

/* No tall items — todos iguales */
.portfolio-grid-item--tall {
    grid-row: span 1;
}

.portfolio-grid-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.5s ease;
}
.portfolio-grid-item:hover {
    z-index: 2;
    box-shadow: inset 0 0 0 2px var(--accent-green);
}
.portfolio-grid-item:hover .portfolio-grid-video {
    transform: scale(1.04);
}
.portfolio-grid-item:hover .portfolio-grid-overlay {
    opacity: 1;
}

.portfolio-grid-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.5s ease;
}

.portfolio-grid-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
}
.portfolio-grid-tag {
    color: var(--accent-green);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: var(--font-titles);
}

/* ──────────────────────────────────────────────
   PORTAFOLIO — Carrusel móvil mejorado
   ────────────────────────────────────────────── */
.portfolio-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 30px auto 0;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,255,102,0.1);
}

.portfolio-mobile-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.77,0,0.175,1);
}

.portfolio-mobile-slide {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    background: #050505;
}

.portfolio-mobile-media {
    width: 100%;
    height: 460px;
    object-fit: contain;
    background: #050505;
    display: block;
}

.portfolio-mobile-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: rgba(0,0,0,0.7);
    border: 2px solid var(--accent-green);
    color: var(--accent-green);
    font-size: 1.1rem;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.portfolio-mobile-btn:active,
.portfolio-mobile-btn:hover {
    background: var(--accent-green);
    color: #000;
    box-shadow: 0 0 18px rgba(0,255,102,0.5);
}
.portfolio-mobile-btn.prev { left: 10px; }
.portfolio-mobile-btn.next { right: 10px; }

.portfolio-mobile-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 14px 0;
    background: rgba(0,0,0,0.5);
}
.portfolio-mobile-dots .dot {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}
.portfolio-mobile-dots .dot.active {
    background: var(--accent-green);
    box-shadow: 0 0 8px var(--accent-green);
    transform: scale(1.3);
}

/* ──────────────────────────────────────────────
   CTA / CONTACTO — cta-panel
   ────────────────────────────────────────────── */
.cta-section {
    margin: 100px 20px;
    display: flex;
    justify-content: center;
}

.cta-panel {
    display: grid;
    grid-template-columns: 1fr 2px 1.6fr;
    min-height: 400px;
    width: 100%;
    min-width: 0;
}

.cta-panel-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    padding: 50px 40px;
    text-align: center;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.165,0.84,0.44,1);
}
.cta-panel-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.cta-panel-logo {
    max-width: 180px;
    filter: drop-shadow(0 0 12px rgba(0,255,102,0.3));
}
.cta-panel-tagline {
    color: #c0c0c0;
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    margin: 0;
}

.cta-panel-divider {
    background: linear-gradient(180deg, transparent, rgba(0,255,102,0.25) 50%, transparent);
    align-self: stretch;
}

.cta-panel-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 50px 50px;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.165,0.84,0.44,1) 0.15s;
}
.cta-panel-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.cta-panel-right .cta-title {
    font-size: clamp(1.1rem, 2vw, 1.7rem);
    line-height: 1.2;
    color: #fff;
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
}
.cta-panel-right .cta-description {
    font-style: italic;
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: #ccc;
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Responsive CTA */
@media (max-width: 900px) {
    .cta-section { margin: 80px 20px; }
    .cta-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto 2px auto;
    }
    .cta-panel-divider {
        height: 2px;
        width: 60%;
        margin: 0 auto;
        background: linear-gradient(90deg, transparent, rgba(0,255,102,0.25) 50%, transparent);
    }
    .cta-panel-left,
    .cta-panel-right {
        padding: 40px 28px;
        transform: none;
        min-width: 0;
    }
}

/* ──────────────────────────────────────────────
   FOOTER — Pattern background + scroll indicator
   ────────────────────────────────────────────── */
.main-footer {
    background-color: #000;
    background-image: url('img/fondo-negro-patron.png');
    background-size: cover;
    background-position: center top;
    border-top: 1px solid rgba(0,255,102,0.3);
}

/* ──────────────────────────────────────────────
   SCROLL INDICATOR HERO
   ────────────────────────────────────────────── */
.scroll-indicator {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.8s ease 1.2s;
    cursor: pointer;
}
.scroll-indicator.visible { opacity: 1; }
.scroll-mouse {
    width: 26px;
    height: 40px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 13px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}
.scroll-wheel {
    width: 4px;
    height: 8px;
    background: var(--accent-green);
    border-radius: 2px;
    animation: scrollWheel 1.8s infinite;
}
@keyframes scrollWheel {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(14px); }
}
.scroll-indicator span {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.35);
    font-family: var(--font-titles);
}

/* ──────────────────────────────────────────────
   ANIMACIONES EXTRA — stagger para paneles
   ────────────────────────────────────────────── */
/* Efecto entrada con rebote para números stats */
@keyframes statBounce {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
.stat-item.is-visible .stat-number {
    animation: statBounce 0.7s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}

/* Línea neon del header pulsa cuando scrolled */
.main-header.scrolled {
    border-bottom: 1px solid rgba(0,255,102,0.3);
}

/* hover en footer links con flecha animada */
.footer-links a::before {
    content: '→';
    margin-right: 6px;
    opacity: 0;
    transform: translateX(-6px);
    display: inline-block;
    transition: opacity 0.3s, transform 0.3s;
    color: var(--accent-green);
}
.footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ──────────────────────────────────────────────
   ANIMACIONES DE ENTRADA — slide lateral
   ────────────────────────────────────────────── */

/* Slide desde izquierda */
.anim-slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.anim-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide desde derecha */
.anim-slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.anim-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Override para team-panel-card con slide lateral en desktop */
@media (min-width: 901px) {
    .team-panel-card.card-duvan.anim-slide-left {
        transform: translateX(-60px);
        opacity: 0;
    }
    .team-panel-card.card-nicolas.anim-slide-right {
        transform: translateX(60px);
        opacity: 0;
    }
    .team-panel-card.card-duvan.anim-slide-left.is-visible,
    .team-panel-card.card-nicolas.anim-slide-right.is-visible {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ──────────────────────────────────────────────
   ROL DESTACADO EN EQUIPO
   ────────────────────────────────────────────── */
.team-role-highlight {
    color: var(--accent-green) !important;
    font-size: 0.82rem !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 800;
    font-family: var(--font-titles);
    background: rgba(0, 255, 102, 0.08);
    border: 1px solid rgba(0, 255, 102, 0.25);
    border-radius: 8px;
    padding: 9px 16px;
    display: block;
    width: fit-content;
    max-width: 100%;
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.4);
    margin: 0 auto 8px;
    white-space: normal;
    line-height: 1.4;
    box-sizing: border-box;
}

/* ──────────────────────────────────────────────
   PORTAFOLIO — Animación escalonada al entrar
   ────────────────────────────────────────────── */
.portfolio-anim {
    opacity: 0;
    transform: scale(0.92) translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-delay: calc(var(--pi, 0) * 0.07s);
}
.portfolio-anim.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ──────────────────────────────────────────────
   SERVICIOS — Iconos más visibles y grandes
   ────────────────────────────────────────────── */
.service-card-panel .service-icon-right {
    width: 70px !important;
    filter: drop-shadow(0 0 14px rgba(0, 255, 102, 0.6))
            drop-shadow(0 0 30px rgba(0, 255, 102, 0.3)) !important;
    transition: filter 0.4s, transform 0.4s;
}
.service-card-panel:hover .service-icon-right {
    filter: drop-shadow(0 0 20px rgba(0, 255, 102, 0.9))
            drop-shadow(0 0 40px rgba(0, 255, 102, 0.6)) !important;
    transform: scale(1.15) !important;
}

/* ──────────────────────────────────────────────
   RENDIMIENTO — Mejora de scroll / carga suave
   ────────────────────────────────────────────── */
.portfolio-grid-item,
.portfolio-grid-video,
.team-panel-card,
.service-card-panel,
.solucion-col-panel {
    will-change: transform, opacity;
}

/* Reduce reflow en secciones con mucho contenido */
.portfolio-grid-desktop,
.team-panel,
.services-panel,
.soluciones-panel {
    contain: layout style;
}

/* Nosotros title centered */
.about-section .section-title {
    text-align: center;
}


/* Diagonal background accent */
.hero-diagonal {
    position: absolute;
    top: 0; right: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(135deg, transparent 40%, rgba(0,255,102,0.03) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Eyebrow label */
.hero-eyebrow {
    display: inline-block;
    font-family: var(--font-titles);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-green);
    border: 1px solid rgba(0,255,102,0.3);
    border-radius: 100px;
    padding: 6px 18px;
    margin-bottom: 24px;
    background: rgba(0,255,102,0.06);
}

/* CTA group */
.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.btn-hero-secondary {
    font-family: var(--font-titles);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.btn-hero-secondary:hover { color: var(--accent-green); border-bottom-color: var(--accent-green); }

/* Mini stats bar inside hero */
.hero-mini-stats {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.hero-mini-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 24px;
}
.hero-mini-stat:first-child { padding-left: 0; }

.hero-mini-num {
    font-family: var(--font-titles);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 900;
    color: var(--accent-green);
    text-shadow: 0 0 12px rgba(0,255,102,0.35);
    line-height: 1;
}
.hero-mini-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.4);
    font-family: var(--font-titles);
}

.hero-mini-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}

/* Photo frame corners */
.foto-corner-tl,
.foto-corner-br {
    position: absolute;
    width: 28px; height: 28px;
    z-index: 3;
    pointer-events: none;
}
.foto-corner-tl {
    top: 12px; left: 12px;
    border-top: 2px solid var(--accent-green);
    border-left: 2px solid var(--accent-green);
}
.foto-corner-br {
    bottom: 12px; right: 12px;
    border-bottom: 2px solid var(--accent-green);
    border-right: 2px solid var(--accent-green);
}

/* Availability badge on photo */
.foto-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,255,102,0.25);
    border-radius: 100px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-titles);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    z-index: 4;
}
.foto-badge-dot {
    width: 8px; height: 8px;
    background: var(--accent-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-green);
    animation: pulseDot 2s infinite;
    flex-shrink: 0;
}
@keyframes pulseDot {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* Make marco-foto relative for absolute children */
.marco-foto { position: relative; }

/* Mobile responsive for new hero elements */
@media (max-width: 768px) {
    .hero-eyebrow { font-size: 0.65rem; letter-spacing: 2px; }
    .hero-cta-group { flex-direction: column; align-items: flex-start; gap: 14px; }
    .btn-hero { width: 100%; text-align: center; padding: 1rem 2rem; }
    .btn-hero-secondary { align-self: center; }
    .hero-mini-stats { gap: 0; padding: 16px 0; }
    .hero-mini-stat { padding: 0 14px; }
    .hero-mini-stat:first-child { padding-left: 0; }
    .hero-mini-num { font-size: 1rem; }
    .hero-mini-label { font-size: 0.6rem; }
    .hero-mini-divider { height: 28px; }
    .hero-diagonal { width: 100%; opacity: 0.5; }
}

@media (max-width: 991px) {
    .hero-cta-group { justify-content: center; }
    .hero-mini-stats { justify-content: center; }
}

/* =========================================
   PORTFOLIO — Fix grid display + sound
   ========================================= */

/* Sound toggle button */
.sound-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s, color 0.3s, border-color 0.3s;
}
.portfolio-grid-item:hover .sound-toggle { opacity: 1; }
.sound-toggle.is-unmuted {
    background: rgba(0,255,102,0.15);
    border-color: var(--accent-green);
    color: var(--accent-green);
    opacity: 1;
}
.sound-toggle:hover {
    background: rgba(0,255,102,0.2);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* =========================================
   MOBILE — Comprehensive responsive fixes
   ========================================= */
@media (max-width: 768px) {
    /* Hero */
    .hero {
        padding: 90px 20px 50px;
        min-height: auto;
    }
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .contenedor-texto {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }
    .contenedor-imagen {
        max-width: 280px;
        margin: 0 auto;
    }
    .titulo-principal {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
    }
    .subtitulo-hero {
        font-size: clamp(1rem, 4vw, 1.2rem);
        margin-bottom: 24px;
    }

    /* About / Nosotros */
    .about-section {
        margin: 60px auto;
        padding: 0 16px;
    }
    .about-heading { font-size: clamp(1.3rem, 5vw, 1.7rem); }

    /* Equipo */
    .team-section {
        margin: 60px auto;
        padding: 0 16px;
    }
    .team-panel {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 2px auto !important;
    }
    .team-panel-divider {
        width: 60% !important;
        height: 2px !important;
        background: linear-gradient(90deg, transparent, rgba(0,255,102,0.25) 50%, transparent) !important;
    }
    .team-panel-card {
        padding: 32px 20px !important;
    }
    .team-panel-card .team-image-wrapper {
        max-width: 200px !important;
    }

    /* Servicios */
    .services-section {
        margin: 60px auto;
        padding: 0 16px;
        width: 100%;
        box-sizing: border-box;
    }
    .services-block {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.55);
        background-image: url('img/fondo-negro-patron.png');
        background-size: 500px auto;
        background-blend-mode: luminosity;
        border-radius: 24px;
        border: 1px solid rgba(0, 255, 102, 0.15);
        padding: 36px 0 30px;
    }

    /* Soluciones */
    .soluciones-integrales {
        padding: 0 16px;
        margin: 60px auto;
    }
    .solucion-col-panel { padding: 28px 20px !important; }

    /* Portfolio */
    .portfolio-section { padding: 0 16px; }
    .portfolio-carousel-wrapper { max-width: 100%; border-radius: 12px; }
    .portfolio-mobile-media,
    .portfolio-mobile-slide { min-height: 320px; height: 320px; }

    /* Clientes */
    .clients-section { padding: 60px 0; }
    .clientes-header { padding: 0 16px; }
    .clients-subtitle { font-size: 1rem; padding: 0 16px; }

    /* Footer */
    .main-footer { padding: 50px 20px 30px; }
    .footer-container { flex-direction: column; gap: 30px; }
    .footer-col { flex: none; width: 100%; min-width: 0; }
    .footer-col.brand-col { text-align: center; }
    .footer-logo { margin: 0 auto 20px; }
    .footer-bottom-bar { flex-direction: column; text-align: center; gap: 12px; }
    .footer-about-text { max-width: 100%; }
    .social-icons { justify-content: center; }

    /* Section titles */
    .section-title { font-size: clamp(1.4rem, 6vw, 2rem); margin-bottom: 30px; }

    /* Separators */
    .separator-container { padding: 40px 0 10px; }
    .animated-neon-line { width: 90%; }
}

/* Extra small screens */
@media (max-width: 380px) {
    .hero { padding: 85px 14px 40px; }
    .titulo-principal { font-size: 1.3rem; }
    .hero-mini-stat { padding: 0 10px; }
    .hero-mini-num { font-size: 0.9rem; }
}

/* Tablet (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-content { gap: 24px; }
    .contenedor-imagen { max-width: 320px; }
    .portfolio-grid-desktop {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 320px);
    }
}

/* ==========================================================================
   ANIMACIONES ADICIONALES — más vida en cada sección
   ========================================================================== */

/* --- Títulos de sección: línea que crece debajo al hacer scroll --- */
.section-title {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.165,0.84,0.44,1), transform 0.8s cubic-bezier(0.165,0.84,0.44,1);
}
.section-title.is-visible,
.fade-in.is-visible .section-title,
section.is-visible .section-title {
    opacity: 1;
    transform: translateY(0);
}
.section-title::after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
    margin: 14px auto 0;
    transition: width 1s cubic-bezier(0.165,0.84,0.44,1) 0.25s;
    box-shadow: 0 0 10px rgba(0,255,102,0.5);
}
.section-title.is-visible::after,
.fade-in.is-visible .section-title::after,
section.is-visible .section-title::after {
    width: 90px;
}

/* --- Frases con línea verde: entrada deslizante --- */
.frase-linea-verde {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.165,0.84,0.44,1);
}
.frase-linea-verde.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.frase-linea-verde .linea {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.6s ease 0.3s;
}
.frase-linea-verde.is-visible .linea {
    transform: scaleY(1);
}

/* --- Stats: aparición escalonada de cada bloque --- */
.stat-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.165,0.84,0.44,1);
}
.stats-container.is-visible .stat-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.stats-container.is-visible .stat-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.stats-container.is-visible .stat-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }

/* --- Logos de clientes: aparición escalonada (desktop) --- */
@media (min-width: 769px) {
    .clientes-grid .client-logo {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.165,0.84,0.44,1);
        transition-delay: calc(var(--ci, 0) * 0.06s);
    }
    .clientes-container.is-visible .client-logo {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Soluciones: títulos de columna con subrayado animado al hover --- */
.solucion-col-title {
    position: relative;
}
.solucion-col-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--accent-green);
    transition: width 0.35s ease, left 0.35s ease;
}
.solucion-col-panel:hover .solucion-col-title::after {
    width: 60%;
    left: 20%;
}

/* --- Iconos de soluciones: entrada con rebote escalonado --- */
.solucion-col-panel .icon-circle,
.solucion-col-panel .partner-logo-img {
    opacity: 0;
    transform: scale(0.6) translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.solucion-col-panel.is-visible .solucion-col-icons .icon-circle:nth-child(1),
.solucion-col-panel.is-visible .solucion-col-icons .partner-logo-img:nth-child(1) {
    opacity: 1; transform: scale(1) translateY(0); transition-delay: 0.15s;
}
.solucion-col-panel.is-visible .solucion-col-icons .icon-circle:nth-child(2),
.solucion-col-panel.is-visible .solucion-col-icons .partner-logo-img:nth-child(2) {
    opacity: 1; transform: scale(1) translateY(0); transition-delay: 0.28s;
}
.solucion-col-panel.is-visible .solucion-col-icons .icon-circle:nth-child(3) {
    opacity: 1; transform: scale(1) translateY(0); transition-delay: 0.4s;
}

/* --- Footer: aparición suave de columnas --- */
.footer-col {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.165,0.84,0.44,1);
}
.main-footer.is-visible .footer-col:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.main-footer.is-visible .footer-col:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.main-footer.is-visible .footer-col:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.main-footer.is-visible .footer-col:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.main-footer.is-visible .footer-col:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

/* --- Tarjeta de visión (Nosotros): icono con pulso de entrada --- */
.about-highlight-icon-circle {
    transform: scale(0.7);
    opacity: 0.7;
}
.about-highlight.is-visible .about-highlight-icon-circle {
    animation: visionIconPop 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards 0.2s;
}
@keyframes visionIconPop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .section-title,
    .frase-linea-verde,
    .stat-item,
    .clientes-grid .client-logo,
    .footer-col,
    .about-highlight-icon-circle,
    .solucion-col-panel .icon-circle,
    .solucion-col-panel .partner-logo-img {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   SOLUCIONES — Video de serpiente que "trae" cada columna (solo PC)
   ========================================================================== */

/* El panel necesita ser el contexto de posicionamiento del video */
#soluciones-panel {
    position: relative;
}

/* Video centrado en pantalla por encima del panel, oculto por defecto */
.soluciones-snake-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    width: min(680px, 72%);
    height: auto;
    z-index: 20;
    border-radius: 16px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 70px rgba(0,255,102,0.3);
    mix-blend-mode: screen;
}

/* Estado activo: el video entra y recorre el panel de izquierda a derecha */
.soluciones-snake-video.snake-playing {
    animation: snakeTravel 4.3s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

@keyframes snakeTravel {
    0% {
        opacity: 0;
        transform: translate(-90%, -50%) scale(0.8);
    }
    12% {
        opacity: 1;
        transform: translate(-75%, -50%) scale(0.95);
    }
    88% {
        opacity: 1;
        transform: translate(-25%, -50%) scale(0.95);
    }
    100% {
        opacity: 0;
        transform: translate(-10%, -50%) scale(0.85);
    }
}

/* Estado de salida: por si necesitamos forzar el desvanecido */
.soluciones-snake-video.snake-done {
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Las columnas empiezan ocultas y son "traídas" por la serpiente */
@media (min-width: 901px) {
    .solucion-col-panel.snake-reveal {
        opacity: 0;
        transform: translateY(50px) scale(0.94);
        filter: blur(2px);
        transition: opacity 0.7s cubic-bezier(0.165,0.84,0.44,1),
                    transform 0.7s cubic-bezier(0.165,0.84,0.44,1),
                    filter 0.7s ease;
    }
    .solucion-col-panel.snake-reveal.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* En móvil, snake-reveal se comporta igual que la animación normal del panel (sin video) */
@media (max-width: 900px) {
    .soluciones-snake-video { display: none !important; }
    .solucion-col-panel.snake-reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.165,0.84,0.44,1);
    }
    .solucion-col-panel.snake-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}