/* ============================================
   VARIABLES Y ESTILOS GLOBALES
   ============================================ */

:root {
    /* Colores */
    --primary:         #001a33;
    --primary-light:   #003d66;
    --primary-lighter: #006699;
    --secondary:       #0099cc;
    --accent:          #ff6b35;
    --success:         #16a34a;
    --danger:          #dc2626;
    --dark:            #1f2937;
    --light:           #f3f4f6;
    --gray:            #6b7280;
    --white:           #ffffff;

    /* Tipografía */
    --font-primary:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base:  16px;
    --line-height:     1.6;

    /* Spacing */
    --spacing-xs:  0.5rem;
    --spacing-sm:  1rem;
    --spacing-md:  1.5rem;
    --spacing-lg:  2rem;
    --spacing-xl:  3rem;
    --spacing-2xl: 4rem;

    /* Bordes */
    --border-radius:    8px;
    --border-radius-lg: 12px;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.15);

    /* Transición global */
    --transition: all 0.3s ease;

    /* Viewport height dinámico (seteado por JS) */
    --dvh: 1vh;

    /* ── Scroll Architecture ──────────────────────
       Variables que controlan la duración del pin
       en cada sección. Valor = múltiplo de 100vh.
       Ejemplo: --scene-duration: 200vh significa
       que el sticky-container está anclado durante
       el equivalente a 2 vueltas de pantalla.
       En esta fase no se usan aún; están listas
       para cuando se activen las animaciones.
    ──────────────────────────────────────────── */
    --scene-duration:       100vh;   /* sección estándar */
    --scene-duration-hero:  100vh;   /* hero */
    --scene-duration-pin:   200vh;   /* secciones con pin largo (futuro) */

    /* Profundidad de perspectiva 3D (futuro) */
    --perspective: 1000px;

    /* Easing personalizado tipo Apple */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   RESET
   ============================================ */

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

html {
    /* scroll-behavior: smooth está desactivado intencionalmente.
       GSAP ScrollTrigger y scroll-behavior:smooth son incompatibles:
       smooth interfiere con el scrubbing causando saltos.
       El smooth scroll para links internos lo hace main.js con
       scrollIntoView({ behavior: 'smooth' }) de forma selectiva. */
    scroll-behavior: auto;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--dark);
    background-color: var(--white);
    overflow-x: hidden;
}

/* ============================================
   ARQUITECTURA SCROLL
   ─────────────────────────────────────────────
   Jerarquía de clases:

   .section              → contenedor principal de cada
                           bloque de la página.
                           position: relative para que
                           los sticky children se anclen
                           dentro de él.

   .scene                → define la altura total que
                           controla la duración del scroll
                           dentro de la sección. Por defecto
                           min-height: 100vh. Las secciones
                           con animaciones largas tendrán
                           height: var(--scene-duration-pin).

   .sticky-container     → el panel visual que se ancla
                           (position: sticky; top: 0).
                           Ocupa exactamente 100vh para que
                           llene la pantalla mientras el
                           usuario hace scroll por la .scene.

   Modificadores de .section:
     --hero        hero principal
     --about       quiénes somos
     --stats       estadísticas
     --videos      bloque de videos
     --providers   proveedores
     --clients     clientes
     --projects    proyectos/tabs
     --equipment   equipos/tabs
     --contact     contacto

   Modificadores de .scene:
     --compact     secciones que NO necesitan 100vh
                   (carruseles, videos): fluyen con
                   su altura natural de contenido.

   NOTA: en esta fase (preparación) los sticky-container
   NO están activos como sticky — solo tienen el CSS base.
   Se activarán sección por sección al agregar animaciones.
   ============================================ */

/* ── .section ─────────────────────────────── */

.section {
    position: relative;   /* ancla a hijos sticky */
    width: 100%;
}

/* ── .scene ───────────────────────────────── */

.scene {
    position: relative;
    width: 100%;
    min-height: 100vh;    /* duración de scroll por defecto */
    display: flex;
    flex-direction: column;
}

/* Secciones compactas: siguen la altura de su contenido */
.scene--compact {
    min-height: unset;
    height: auto;
}

/* Scene del hero tiene exactamente la altura del viewport */
.scene--hero {
    min-height: 100vh;
    height: 100vh;
}

/* ── .sticky-container ────────────────────── */

/*
   Base: se comporta como un bloque normal (no sticky aún).
   Cuando se activen animaciones, se añadirá:
     position: sticky;
     top: 0;
     height: 100vh;
   por sección específica mediante el modificador
   .section--[name] .sticky-container.
   Así controlamos qué secciones están "pinadas"
   sin afectar las demás.
*/
.sticky-container {
    position: relative;   /* normal en esta fase */
    width: 100%;
    display: flex;
    flex-direction: column;
}

/*
   Placeholder para activación futura de sticky pin.
   Descomentar por sección cuando se añadan animaciones:

   .section--hero .sticky-container,
   .section--about .sticky-container {
       position: sticky;
       top: 0;
       height: 100vh;
       overflow: hidden;
   }
*/

/* ── Hero: pin activo ─────────────────────────
   GSAP controla el pin dinámicamente, pero estas
   reglas garantizan que el sticky-container ocupe
   exactamente el viewport en la sección hero y que
   overflow:hidden evite que el contenido animado
   sea visible fuera de los límites del panel.
*/
.section--hero .sticky-container {
    height: 100vh;
    overflow: hidden;
}

/*
   Cuando GSAP aplica el pin, añade la clase
   .gsap-pin-spacer al wrapper que crea automáticamente.
   Este ajuste evita que ese spacer tenga margin
   o padding inesperado que desplace el layout.
*/
.gsap-pin-spacer {
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Utilidades de scroll futuras ─────────── */

/*
   .scroll-layer: para apilar capas que se moverán
   a diferentes velocidades (parallax, 3D).
   No activo aún — sin efecto visual.
*/
.scroll-layer {
    position: absolute;
    inset: 0;
    will-change: transform;  /* hint al compositor */
}

/*
   .scroll-pin: versión explícita del sticky pin.
   Se aplicará dinámicamente desde JS a las secciones
   que estén en modo "scroll scrubbing".
*/
.scroll-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* ── Contexto 3D global (preparación) ─────── */

/*
   .scene--3d activa el contexto de perspectiva
   para hijos que usarán transform3d.
   No activo en ninguna sección aún.
*/
.scene--3d {
    perspective: var(--perspective);
    perspective-origin: 50% 50%;
}

/* ── data-delay: retrasos de animación ─────── */
/*
   Se lee desde JS para aplicar transition-delay
   proporcional al atributo data-delay del elemento.
   El CSS base no hace nada; el JS lo procesa en
   initScrollAnimations().
*/

/* ============================================
   SISTEMA DE ANIMACIONES (único, basado en
   IntersectionObserver + clase .show)
   ============================================ */

/*
   Por defecto los elementos son invisibles.
   El JS agrega .show cuando entran en el viewport.
   Cada variante define el estado inicial (from)
   y la transición al estado visible (to via .show).
*/

.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Estado visible — aplicado por JS al entrar en viewport */
.fade-in.show,
.fade-in-up.show,
.fade-in-left.show,
.fade-in-right.show {
    opacity: 1;
    transform: translate(0, 0);
}

/* ============================================
   ANIMACIONES INDEPENDIENTES (no scroll-driven)
   ============================================ */

/* Carrusel de imágenes */
@keyframes scrollCarousel {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--move)); }
}

/* Carrusel de clientes */
@keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--scroll-distance))); }
}

/* Carrusel de proveedores */
@keyframes scroll-providers {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--providers-distance))); }
}

/* Animaciones de aparición de tabs (no dependen de scroll) */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* Clases de animación usadas por tabs JS */
.animate-left {
    animation: slideInLeft 0.4s ease forwards;
}

.animate-right {
    animation: slideInRight 0.4s ease forwards;
}

.animate-wow {
    animation: scaleIn 0.35s ease forwards;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Fade para slider de imagen (quiénes somos) y videos */
.fade-out {
    opacity: 0;
    transform: scale(0.98);
}

/* ============================================
   UTILIDADES
   ============================================ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.section-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--spacing-xl);
    text-align: center;
    line-height: 1.3;
}

.section-subtitle {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.section-description {
    font-size: 1.1rem;
    color: var(--gray);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ============================================
   NAVEGACIÓN
   ============================================ */

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-md) 0;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.navbar-brand {
    flex: 0 0 auto;
}

.navbar-logo {
    height: 48px;
    width: auto;
    margin-right: 18px;
    vertical-align: middle;
    transform: scale(1.1);
    transform-origin: left center;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
    margin-left: auto;
    margin-right: 1.5rem;
}

.nav-links a {
    position: relative;
    text-decoration: none;
    color: var(--dark);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.35s ease;
}

.nav-links a:hover {
    color: var(--primary);
}

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

.partner-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 1rem;
}

.partner-logo {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-logo:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-md);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--dark);
    border-radius: 2px;
    transition: var(--transition);
}

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

/*
   El hero vive dentro de .scene--hero > .sticky-container.
   min-height: 100vh garantiza que llene el viewport.
   Cuando se active sticky en futuras animaciones,
   height: 100vh se añadirá vía .section--hero .sticky-container.
*/
.hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--spacing-2xl) var(--spacing-md);
    color: var(--white);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 26, 51, 0.4);
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin-left: 0;
    text-align: left;
    width: 100%;
}

.hero-content h2 {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
    text-shadow: 0 4px 8px rgba(0,0,0,.8);
    color: var(--white);
}

.hero-content p {
    font-size: clamp(1rem, 3vw, 1.25rem);
    margin-bottom: var(--spacing-lg);
    text-shadow: 0 3px 6px rgba(0,0,0,.8);
    color: var(--white);
    line-height: 1.5;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: flex-start;
}

.cta-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
}

.cta-button.primary {
    background-color: var(--secondary);
    color: var(--white);
}

.cta-button.primary:hover {
    background-color: transparent;
    border-color: var(--white);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,153,204,.3);
}

.cta-button.secondary {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
}

.cta-button.secondary:hover {
    background-color: var(--white);
    color: var(--primary);
    transform: translateY(-2px);
}

/* ============================================
   TABLERO ELÉCTRICO — LAYOUT FINAL
   ─────────────────────────────────────────────
   Layout desktop:

   ┌─────────────────────────────────────────┐  100vh
   │         .tbl-header  (título arriba)    │  ~12vh
   ├──────────────────────────┬──────────────┤
   │                          │              │
   │      .tbl-stage          │  .tbl-card   │  ~78vh
   │   (imagen centrada)      │  (flotante)  │
   │                          │              │
   ├──────────────────────────┴──────────────┤
   │      .tbl-progress + .tbl-hint          │  ~10vh
   └─────────────────────────────────────────┘

   .tbl-body usa CSS Grid: imagen ocupa ~65% del ancho,
   card ocupa ~32%, separados por gap 3%.
   ============================================ */

/* ── Sticky + scene ──────────────────────── */

.section--tablero .sticky-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.scene--tablero {
    min-height: 100vh;
    height: 100vh; /* JS sobreescribe a 300vh */
}

/* ── Viewport ─────────────────────────────── */

.tablero-scene {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #06101e;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
}

/* Grilla técnica sutil de fondo */
.tablero-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,153,204,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,153,204,.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* ── Título arriba ───────────────────────── */

.tbl-header {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: clamp(1.4rem, 2.8vh, 2.2rem) 2rem clamp(0.8rem, 1.5vh, 1.2rem);
    flex-shrink: 0;
}

.tbl-header__tag {
    display: block;
    font-size: clamp(0.75rem, 1.4vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 0.5rem;
    font-family: 'Courier New', monospace;
}

.tbl-header__title {
    font-size: clamp(1.8rem, 3.8vw, 3rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.15;
}

/* ── Zona central: imagen + card ─────────── */

.tbl-body {
    position: relative;
    z-index: 5;
    flex: 1;
    display: grid;
    /* imagen ~65%, gap 3%, card ~32% */
    grid-template-columns: 1fr clamp(200px, 26vw, 320px);
    gap: clamp(1rem, 2.5vw, 2.5rem);
    align-items: center;
    justify-items: center;
    padding: 0 clamp(1.5rem, 3.5vw, 3.5rem);
    /* pequeño margen inferior para que no choque con la barra */
    padding-bottom: clamp(1rem, 2.5vh, 2rem);
}

/* ── Stage de imágenes ───────────────────── */

.tbl-stage {
    position: relative;
    width: 100%;
    /* Ratio 16:9 — se adapta al espacio disponible */
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 18vh - 6rem); /* vh disponible menos header y padding */
    display: flex;
    align-items: center;
    justify-content: center;
}

.tbl-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 5px;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    filter: drop-shadow(0 10px 36px rgba(0,0,0,.72));
}

.tbl-img--1 { opacity: 1; z-index: 3; }
.tbl-img--2 { opacity: 0; z-index: 2; }
.tbl-img--3 { opacity: 0; z-index: 1; }

/* ── Card flotante ───────────────────────── */

.tbl-card {
    position: relative;
    width: 100%;
    align-self: center;
    background: rgba(4, 18, 38, 0.82);
    border: 1px solid rgba(0,153,204,.22);
    border-left: 3px solid var(--secondary);
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
    padding: clamp(1.2rem, 2.5vw, 1.8rem);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 40px rgba(0,0,0,.45);
    /* altura máxima para no salirse del viewport */
    max-height: calc(100vh - 18vh - 4rem);
    overflow: hidden;
}

/* ── Mensajes dentro del card ────────────── */

/* Todos apilados en el mismo espacio, GSAP alterna opacidad */
.tbl-msg {
    position: absolute;
    inset: clamp(1.2rem, 2.5vw, 1.8rem);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* El primero visible desde el inicio */
.tbl-msg--1 {
    opacity: 1;
    transform: translateY(0);
}

/* Espaciador para que el card tenga altura basada en el contenido del primer mensaje */
.tbl-card::before {
    content: '';
    display: block;
    /* Altura mínima del card = aprox 3 elementos */
    min-height: clamp(180px, 30vh, 280px);
}

.tbl-msg__num {
    font-size: clamp(0.58rem, 0.9vw, 0.7rem);
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--secondary);
    font-family: 'Courier New', monospace;
}

.tbl-msg__title {
    font-size: clamp(0.95rem, 1.6vw, 1.25rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.25;
}

.tbl-msg__body {
    font-size: clamp(0.7rem, 1.05vw, 0.82rem);
    color: rgba(175,210,230,.82);
    line-height: 1.6;
    text-align: justify;
}

.tbl-msg__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tbl-msg__list li {
    font-size: clamp(0.62rem, 0.95vw, 0.74rem);
    color: rgba(130,185,215,.82);
    font-weight: 600;
    padding-left: 1rem;
    position: relative;
    letter-spacing: 0.03em;
}

.tbl-msg__list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--secondary);
}

/* ── Barra de progreso (en la parte baja del card) ── */

.tbl-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0,153,204,.12);
    border-radius: 0 0 var(--border-radius-lg) 0;
    overflow: hidden;
}

.tbl-progress__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--secondary), #00d4ff);
}

/* ── Scroll hint (inferior izquierda) ────── */

.tbl-hint {
    position: absolute;
    bottom: clamp(0.7rem, 1.5vh, 1.2rem);
    left: clamp(1.5rem, 3.5vw, 3.5rem);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(100,155,195,.5);
    font-size: clamp(0.55rem, 0.85vw, 0.68rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
}

.tbl-hint svg {
    animation: tbl-bounce 1.5s ease-in-out infinite;
}

@keyframes tbl-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(3px); }
}

/* ── Responsive — tableta ────────────────── */

@media (max-width: 900px) {
    .tbl-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding: 0 1.2rem 1rem;
        gap: 1rem;
    }

    .tbl-stage {
        max-height: 42vh;
    }

    .tbl-card {
        max-height: none;
        position: relative;
    }

    /* NO cambiamos position de tbl-msg aquí — GSAP lo necesita absolute en desktop.
       Solo ajustamos el card para que acepte altura auto. */
}

/* ── Responsive — móvil ──────────────────── */

@media (max-width: 600px) {
    .tbl-header__title {
        font-size: 1.2rem;
    }

    .tbl-msg__body {
        display: none;
    }

    .tbl-stage {
        max-height: 36vh;
    }
}

/* ============================================
   TABLERO MÓVIL — CARRUSEL HORIZONTAL
   Oculto en desktop, visible solo en móvil.
   ============================================ */

.tbl-mobile-carousel {
    display: none; /* oculto en desktop */
    position: relative;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 0 0 0.75rem; /* reducido de 2rem */
    overflow: hidden;
}

.tbl-mobile-track {
    display: flex;
    flex-direction: row;
    width: 100%;
    will-change: transform;
}

.tbl-mobile-slide {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.tbl-mobile-slide img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.tbl-mobile-info {
    background: rgba(4, 18, 38, 0.92);
    border-left: 3px solid var(--secondary);
    padding: 0.7rem 1rem; /* reducido de 1rem 1.2rem */
    color: var(--white);
}

.tbl-mobile-num {
    display: block;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    font-family: 'Courier New', monospace;
    margin-bottom: 0.25rem;
}

.tbl-mobile-info h3 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.3rem;
}

.tbl-mobile-info p {
    font-size: 0.76rem;
    color: rgba(180,210,230,.82);
    line-height: 1.45;
    margin-bottom: 0.35rem;
}

.tbl-mobile-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.tbl-mobile-info li {
    font-size: 0.72rem;
    color: rgba(130,185,215,.85);
    font-weight: 600;
    padding-left: 0.9rem;
    position: relative;
    letter-spacing: 0.02em;
}
.tbl-mobile-info li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--secondary);
}

/* Botones prev/next */
.tbl-mobile-btn {
    position: absolute;
    top: calc((100vw * 9/16) / 2); /* centrado en la imagen */
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
    z-index: 5;
}
.tbl-mobile-btn:hover { background: rgba(0,0,0,.8); }
.tbl-mobile-btn--prev { left: 8px; }
.tbl-mobile-btn--next { right: 8px; }

/* Dots */
.tbl-mobile-dots {
    display: flex;
    gap: 5px;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}
.tbl-mobile-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transition: background 200ms ease, transform 200ms ease;
}
.tbl-mobile-dot--active {
    background: var(--secondary);
    transform: scale(1.3);
}

/* ============================================
   QUIÉNES SOMOS
   ============================================ */

/*
   Quiénes somos: ocupa al menos el 100vh heredado
   de su .scene. El padding vertical hace que el
   contenido respire si el contenido es menor.
*/
.quienes-somos {
    padding: var(--spacing-2xl) 0;
    background: var(--white);
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.quienes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
    grid-auto-rows: auto;
}

.quienes-content h2 {
    text-align: left;
    margin-bottom: var(--spacing-lg);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
}

.quienes-content p {
    font-size: clamp(0.9rem, 2vw, 1rem);
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.quienes-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 500;
    color: var(--dark);
    font-size: clamp(0.85rem, 2vw, 1rem);
}

.feature-icon {
    color: var(--secondary);
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
}

.quienes-image {
    height: 480px;
    max-height: 480px;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
}

.quienes-image img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--border-radius-lg);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ============================================
   CARRUSEL INFINITO DE IMÁGENES
   ============================================ */

.infinite-carousel {
    overflow: hidden;
    padding: 5rem 0;
    background: #fafafa;
}

.carousel-track {
    display: flex;
    width: max-content;
    animation: scrollCarousel 35s linear infinite;
    will-change: transform;
}

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

.carousel-group {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    padding-right: clamp(1rem, 2vw, 2rem);
}

.carousel-group img {
    height: clamp(240px, 34vw, 360px);
    width: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.carousel-group img:hover {
    transform: scale(1.05);
}

/* ============================================
   POR QUÉ ELEGIRNOS — STATS
   ============================================ */

.por-que-elegir {
    padding: var(--spacing-2xl) 0;
    background-color: var(--light);
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    max-width: 900px;
    margin: 0 auto;
}

.stat-card {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    border-top: 4px solid var(--secondary);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.stat-label {
    font-size: 0.95rem;
    color: var(--dark);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.stat-card p {
    color: var(--gray);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ============================================
   BLOQUE DE VIDEOS
   ============================================ */

.video-strip {
    background: linear-gradient(135deg, #001a33, #00345f);
    padding: clamp(2rem, 5vw, 5rem) 0;
}

.video-strip .section-title.light {
    color: var(--white);
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.video-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    justify-items: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.video-grid video {
    width: 100%;
    aspect-ratio: 22 / 8;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    background: black;
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-grid video.fade-out {
    opacity: 0;
    transform: scale(0.98);
}

/* Botones de navegación — ocultos en desktop */
.carousel-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,.5);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: background 0.3s ease;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.carousel-btn:hover {
    background: rgba(0,0,0,.8);
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

/* ============================================
   PROVEEDORES — CARRUSEL INFINITO
   ============================================ */

.proveedores {
    padding: var(--spacing-2xl) 0;
}

.providers-carousel {
    overflow: hidden;
    margin-top: var(--spacing-md);
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.providers-track {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    animation: scroll-providers var(--providers-duration, 18s) linear infinite;
    will-change: transform;
}

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

.provider-item {
    flex: 0 0 auto;
    min-width: 240px;
    padding: 0.75rem 1rem;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

.provider-item img {
    width: 220px;
    height: 110px;
    display: block;
    object-fit: contain;
}

/* ============================================
   CLIENTES — CARRUSEL INFINITO
   ============================================ */

.clientes {
    background: var(--primary);
    padding: var(--spacing-2xl) 0;
    color: var(--white);
}

.clientes h3 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    font-size: 1.5rem;
}

.clients-carousel {
    overflow: hidden;
    margin-top: var(--spacing-md);
}

.clients-track {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    animation: scroll var(--scroll-duration, 12s) linear infinite;
    will-change: transform;
}

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

.client-item {
    flex: 0 0 auto;
    min-width: 240px;
    padding: 0.75rem 1rem;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
}

.client-item img {
    width: 220px;
    height: 110px;
    display: block;
    object-fit: contain;
    background: transparent;
}

/* ============================================
   PROYECTOS — TABS
   ============================================ */

.proyectos {
    padding: var(--spacing-2xl) 0;
    background: var(--white);
    width: 100%;
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

.proyecto-tabs,
.equipo-tabs {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
}

.tab-button {
    padding: 10px 24px;
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.tab-button.active,
.tab-button:hover {
    background: var(--primary);
    color: var(--white);
}

/* Detalle de proyecto / equipo */
.proyecto-detail,
.equipo-detail {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: transparent;
}

.detail-inner {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-lg);
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
}

.detail-inner.reverse {
    flex-direction: row-reverse;
}

.detail-image {
    flex: 1;
    height: clamp(220px, 50vw, 320px);
    border-radius: var(--border-radius-lg);
    background: linear-gradient(135deg, #001a33, #003d66);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: clamp(1.5rem, 3vw, 2rem);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

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

.detail-text {
    flex: 1;
    padding: var(--spacing-lg);
}

.detail-text h3 {
    font-size: clamp(1.4rem, 4vw, 1.75rem);
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

.detail-text p {
    color: var(--dark);
    line-height: 1.7;
    font-size: clamp(0.9rem, 2vw, 1rem);
    text-align: justify;
}

/* Tarjetas de proyecto con imagen de fondo */
.proyecto-image-card {
    width: 100%;
    height: 220px;
    border-radius: var(--border-radius-lg);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-md);
}

/* ============================================
   EQUIPOS ELÉCTRICOS
   ============================================ */

.equipos {
    padding: var(--spacing-2xl) 0;
    background: var(--light);
    width: 100%;
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

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

.contacto {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    padding: var(--spacing-2xl) 0;
    width: 100%;
    min-height: 100vh;
}

.contacto-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 340px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
    position: relative;
}

/* Desktop: forzar posición de columnas correcta */
.contacto-titulo  { grid-column: 1 / -1; }
.contacto-hero    { grid-column: 1 / -1; }
.contacto-model3d { grid-column: 2; grid-row: 2; align-self: start; padding-top: var(--spacing-md); }
.contacto-info    { grid-column: 1; grid-row: 2; align-self: start; }
.contacto-form    { grid-column: 3; grid-row: 2; align-self: start; }

.contacto-hero {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-lg) 0 var(--spacing-md);
    position: relative;
    overflow: hidden;
}

/* Canvas decorativos laterales */

/* Canvas decorativos de circuito — laterales del hero contacto */
.contacto-circuit {
    position: absolute;
    top: 0;
    width: 20%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.contacto-circuit--left  { left: 0; }
.contacto-circuit--right { right: 0; }

.circuit-line {
    stroke: #00aaff;
    stroke-width: 1.5;
    fill: none;
    opacity: 0.2;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: circuitDraw 6s linear infinite;
}
.circuit-dot {
    fill: #00aaff;
    opacity: 0.4;
    animation: circuitPulse 2s infinite alternate;
}
@keyframes circuitDraw {
    0%   { stroke-dashoffset: 200; opacity: 0; }
    50%  { opacity: 0.4; }
    100% { stroke-dashoffset: 0;   opacity: 0.2; }
}
@keyframes circuitPulse {
    0%   { opacity: 0.2; }
    100% { opacity: 0.7; }
}


.contacto-hero__tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    position: relative;
    z-index: 1;
}

.contacto-hero__line {
    display: block;
    width: clamp(40px, 6vw, 80px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--secondary), transparent);
}

.contacto-hero__label {
    font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--secondary);
    font-family: 'Courier New', monospace;
}

.contacto-titulo {
    grid-column: 1 / -1;
    text-align: center;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-sm);
    animation: titleGlow 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.contacto-hero__sub {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    color: rgba(255,255,255,.65);
    text-align: center;
    margin: 0 auto;
    max-width: 560px;
    position: relative;
    z-index: 1;
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 0 0px transparent;
        opacity: 1;
    }
    50% {
        text-shadow: 0 0 18px rgba(100, 180, 255, 0.5),
                     0 2px 8px rgba(0, 102, 204, 0.3);
        opacity: 0.92;
    }
}

.contacto-info h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: var(--spacing-md);
    color: var(--white);
}

.contacto-info p {
    color: rgba(255,255,255,.9);
    margin-bottom: var(--spacing-lg);
    font-size: clamp(0.9rem, 2vw, 1rem);
}

.info-item {
    margin-bottom: var(--spacing-lg);
}

.info-item strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--secondary);
    font-size: clamp(0.95rem, 2vw, 1rem);
}

.info-item p {
    color: rgba(255,255,255,.85);
    font-size: clamp(0.9rem, 2vw, 1rem);
}

/* Tarjetas de info — nuevo estilo */
.info-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.info-card:last-child { border-bottom: none; }

.info-card--highlight {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(0,153,204,0.25);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-sm);
}

.info-card__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.info-card__label {
    font-size: clamp(0.65rem, 1.2vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--secondary);
}
.info-card__label--white {
    color: var(--white);
    letter-spacing: 0.04em;
    font-size: clamp(0.8rem, 1.4vw, 0.9rem);
    text-transform: none;
}

.info-card__text {
    color: rgba(255,255,255,0.85);
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    margin: 0;
}

/* Teléfono y links dentro de info: blanco, sin subrayado azul */
.contacto-link {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contacto-link:hover {
    color: #fff !important;
    text-decoration: none;
}

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

.contacto-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: calc(var(--border-radius) * 1.5);
    padding: var(--spacing-lg);
    backdrop-filter: blur(6px);
}

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

/* Campos con icono */
.form-group--icon {
    position: relative;
}

.form-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 1;
    transition: color 0.2s;
}

.form-group--icon:focus-within .form-icon {
    color: var(--secondary);
}

.form-icon--textarea {
    top: 14px;
    transform: none;
}

.form-group--icon input,
.form-group--icon textarea {
    padding-left: 42px !important;
}

.form-group input,
.form-group textarea {
    padding: var(--spacing-sm);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: clamp(0.9rem, 2vw, 0.95rem);
    background-color: rgba(255,255,255,.07);
    color: var(--white);
    transition: var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,.45);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    background-color: rgba(255,255,255,.11);
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(0,153,204,.15);
}

.form-group input:focus ~ .form-icon,
.form-group textarea:focus ~ .form-icon {
    color: var(--secondary);
}

/* Checkbox personalizado */
.form-group--checkbox { flex-direction: row; align-items: flex-start; }

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: clamp(0.85rem, 1.8vw, 0.9rem);
    color: rgba(255,255,255,.75);
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255,255,255,.35);
    border-radius: 4px;
    background: rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--secondary);
    border-color: var(--secondary);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
    display: block;
}

.checkbox-link {
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.error-message {
    color: #fca5a5;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: none;
}

.error-message.show {
    display: block;
}

.form-group.error input,
.form-group.error textarea {
    border-color: var(--danger);
    background-color: rgba(220,38,38,.1);
}

.submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px var(--spacing-lg);
    background: linear-gradient(135deg, #0099cc, #0066aa);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    margin-top: var(--spacing-sm);
}

.submit-button:hover:not(:disabled) {
    background-color: #0078aa;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,153,204,.4);
}

.submit-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-message {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 600;
    display: none;
}

.form-message.success {
    display: block;
    background-color: rgba(22,163,74,.2);
    color: #86efac;
    border: 1px solid #22c55e;
}

.form-message.error {
    display: block;
    background-color: rgba(220,38,38,.2);
    color: #fca5a5;
    border: 1px solid #ef4444;
}

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

/* ============================================
   BARRA DE BENEFICIOS
   ============================================ */
.benefits-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(0,153,204,0.2);
    border-radius: calc(var(--border-radius) * 2);
    padding: var(--spacing-md) var(--spacing-xl);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-md);
    flex-wrap: nowrap;
}

.benefit-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.benefit-item svg {
    flex-shrink: 0;
    opacity: 0.9;
    display: block;
}

.benefit-item__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.benefit-item__text strong {
    font-size: clamp(0.78rem, 1.3vw, 0.9rem);
    font-weight: 600;
    color: var(--white);
    display: block;
    white-space: nowrap;
}

.benefit-item__text span {
    font-size: clamp(0.68rem, 1.1vw, 0.78rem);
    color: rgba(255,255,255,0.55);
    display: block;
    white-space: nowrap;
}

.benefit-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
    align-self: center;
}

@media (max-width: 900px) {
    .benefits-bar {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    .benefit-divider { display: none; }
    .benefit-item { flex: 0 0 calc(50% - var(--spacing-sm)); }
}

@media (max-width: 480px) {
    .benefit-item { flex: 0 0 100%; }
}

.mapa-container {
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-lg) 0;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.mapa-container iframe {
    width: 100%;
    height: 300px;
    border: none;
    border-radius: var(--border-radius-lg);
}

/* ============================================
   WHATSAPP FLOTANTE
   ============================================ */

.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2000;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    background: linear-gradient(180deg, #25D366, #128C7E);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
    opacity: 0.98;
}

.whatsapp-float a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
}

.whatsapp-float svg {
    display: block;
}

.whatsapp-float:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* ============================================
   WIDGET FLOTANTE — PANEL ELÉCTRICO
   ─────────────────────────────────────────────
   Posición: fixed, esquina inferior izquierda.
   WhatsApp está en la derecha → sin colisión.
   ============================================ */

.panel-float {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.panel-float__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border: 1.5px solid rgba(0,153,204,.35);
    border-radius: 40px;
    padding: 8px 14px 8px 8px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,.3);
    transition: transform 180ms ease, box-shadow 180ms ease;
    animation: pf-appear 0.5s 1.2s ease both;
}

@keyframes pf-appear {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.panel-float__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.panel-float__thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,153,204,.25);
    border: 1.5px solid rgba(0,153,204,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: pf-pulse 3s 2s ease-in-out infinite;
}

@keyframes pf-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,153,204,.4); }
    50%       { box-shadow: 0 0 0 7px rgba(0,153,204,0); }
}

.panel-float__play {
    display: block;
    margin-left: 2px;
}

.panel-float__label {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255,255,255,.88);
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ── Modal ───────────────────────────────── */

.panel-modal {
    position: fixed;
    left: 20px;
    bottom: 80px;
    z-index: 1998;
    width: clamp(260px, 30vw, 380px);
    border-radius: 14px;
    overflow: hidden;
    background: #06101e;
    border: 1px solid rgba(0,153,204,.25);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    transform-origin: bottom left;
    display: none; /* JS controla apertura */
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.panel-modal.is-open {
    display: block; /* asegura que el display inline del JS no sea necesario */
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.panel-modal__inner {
    display: flex;
    flex-direction: column;
    position: relative;
}

.panel-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
}

.panel-modal__close:hover {
    background: rgba(0,0,0,.8);
}

.panel-modal__header {
    padding: 0.75rem 2.5rem 0.5rem 1rem;
    background: linear-gradient(to bottom, rgba(0,26,51,.95), rgba(0,26,51,0));
    position: relative;
    z-index: 2;
}

.panel-modal__tag {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 0.15rem;
}

.panel-modal__title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    line-height: 1.3;
}

.panel-modal__img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #000;
}

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


.footer {
    background-color: var(--primary);
    color: var(--white);
    padding: var(--spacing-lg) 0;
    text-align: center;
    border-top: 3px solid var(--secondary);
}

.footer-links {
    margin-top: var(--spacing-md);
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
}

.footer-links a {
    color: rgba(255,255,255,.8);
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--secondary);
}

/* ============================================
   BOTÓN COHETE — VOLVER AL INICIO
   ============================================ */

.rocket-btn {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 8px;
    text-decoration: none;
    position: relative;
    top: -1px;
}

.rocket-btn img {
    width: 2.5em;
    height: 2.5em;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.7); /* blanco para que combine con el footer */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.3s ease;
}

.rocket-btn:hover img {
    filter: brightness(0) invert(1) opacity(1);
    animation: rocketLaunch 0.6s ease forwards;
}

@keyframes rocketLaunch {
    0%   { transform: translateY(0)    scale(1);    }
    30%  { transform: translateY(2px)  scale(0.95); }
    60%  { transform: translateY(-8px) scale(1.2);  }
    100% { transform: translateY(-5px) scale(1.1);  }
}

/* ============================================
   RESPONSIVE — TABLET (max 1023px)
   ============================================ */

@media (max-width: 1023px) {
    .hero {
        min-height: auto;
        padding: var(--spacing-xl) var(--spacing-md);
        justify-content: center;
    }

    .hero-container {
        text-align: center;
        margin: 0 auto;
        max-width: 100%;
    }

    .navbar .container {
        padding: var(--spacing-md);
        gap: 0.75rem;
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   RESPONSIVE — TABLET (max 900px)
   ============================================ */

@media (max-width: 900px) {
    .quienes-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .quienes-content h2 {
        text-align: center;
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .quienes-features {
        grid-template-columns: 1fr;
    }

    .detail-inner {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .detail-image {
        width: 100%;
        height: 240px;
    }

    .detail-text {
        width: 100%;
        padding: var(--spacing-md);
    }

    .proyecto-image-card {
        height: 180px;
    }

    .provider-item {
        min-width: 160px;
        height: 100px;
        padding: 0.4rem 0.5rem;
    }

    .provider-item img {
        width: 140px;
        height: 70px;
    }

    .client-item {
        min-width: 160px;
        height: 100px;
        padding: 0.4rem 0.5rem;
    }

    .client-item img {
        width: 140px;
        height: 70px;
    }

    /* Activar carrusel de video en móvil */
    .video-grid {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }

    .video-slide {
        display: none !important;
        width: 100% !important;
        max-width: 400px;
        margin: 0 auto;
        aspect-ratio: 9 / 16 !important;
    }

    .video-slide.active {
        display: block !important;
    }

    .carousel-btn {
        display: flex;
    }
}

/* ============================================
   RESPONSIVE — TABLET (max 768px)
   ============================================ */

@media (max-width: 768px) {
    /* Navbar */
    .hamburger { display: flex; }

    .nav-links {
        display: none;
        position: absolute;
        top: 70px;
        right: 0;
        background: var(--white);
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        width: 100%;
        box-shadow: var(--shadow-lg);
        z-index: 999;
        margin-left: 0;
        margin-right: 0;
    }
    .nav-links.active { display: flex; }

    /* Hero */
    .section--hero .sticky-container { height: auto; overflow: visible; }
    .scene--hero   { height: auto; min-height: 100svh; }
    .hero          { min-height: 100svh; padding: 5rem 1.2rem 3rem; background-position: right center; }
    .hero-container { text-align: center; margin: 0 auto; max-width: 100%; }
    .hero-content h2  { font-size: clamp(1.4rem, 5.5vw, 2rem); }
    .hero-content p   { font-size: clamp(0.88rem, 3.5vw, 1rem); }
    .hero-buttons     { flex-direction: column; align-items: center; }
    .cta-button       { width: 100%; text-align: center; padding: 12px var(--spacing-lg); }
    /* En móvil GSAP no corre → forzar visibilidad de elementos del hero */
    .section--hero .hero-content h2,
    .section--hero .hero-content p,
    .section--hero .hero-buttons { opacity: 1; transform: none; }

    /* Tablero: ocultar desktop en móvil, mostrar carrusel.
       CRÍTICO: colapsar heights para que no haya espacio vacío azul */
    .section--tablero .sticky-container { height: auto; overflow: visible; }
    .scene--tablero   { height: auto !important; min-height: unset; }
    .tablero-scene    { height: auto; min-height: unset; padding-bottom: 0.5rem; }
    .tbl-body         { display: none; }
    .tbl-mobile-carousel { display: flex; }
    .tbl-hint { display: none; }

    /* Quiénes somos */
    .quienes-somos { min-height: unset; padding: 3rem 0; }
    .quienes-grid  { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .quienes-content { padding: 0 var(--spacing-md); }
    .quienes-content h2 { text-align: center; }
    .quienes-features   { grid-template-columns: 1fr 1fr; }

    /* Stats */
    .por-que-elegir { min-height: unset; padding: 3rem 0; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }

    /* Proyectos / Equipos */
    .proyectos { min-height: unset; padding: 3rem 0; }
    .equipos   { min-height: unset; padding: 3rem 0; }
    .proyecto-tabs, .equipo-tabs { gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
    .tab-button  { padding: 8px 14px; font-size: 0.82rem; }
    .detail-inner { flex-direction: column; }
    .detail-inner.reverse { flex-direction: column; } /* imagen arriba siempre en móvil */
    .detail-image { width: 100%; height: 200px; }
    .detail-text  { width: 100%; padding: var(--spacing-md); }

    /* Contacto */
    .contacto { min-height: unset; padding: 3rem 0; }
    .contacto-wrapper { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .contacto-wrapper { display: flex; flex-direction: column; padding: 0 var(--spacing-md); }
    .contacto-titulo  { grid-column: unset; }
    .contacto-model3d { grid-column: unset; grid-row: unset; align-self: center; margin: var(--spacing-sm) 0; }
    .contacto-model3d model-viewer { min-height: 320px; max-height: 380px; width: 260px; margin-top: -20px; }
    .model3d-bg { display: none; }
    .model3d-stage { padding-top: 0; min-height: unset; }
    .contacto-info    { grid-column: unset; grid-row: unset; }
    .contacto-form    { grid-column: unset; grid-row: unset; }

    /* Tipografías */
    .section-title { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: var(--spacing-lg); }
    .navbar-logo   { height: 40px; }
    .partner-logo  { height: 32px; }

    /* Otros */
    .footer-links  { flex-direction: column; gap: var(--spacing-sm); }
    .mapa-container iframe { height: 250px; }
    .infinite-carousel { padding: 1.5rem 0; }
}

/* ============================================
   RESPONSIVE — MOBILE (max 600px)
   ============================================ */

@media (max-width: 600px) {
    .navbar-logo {
        height: 36px;
        margin-right: 12px;
    }

    .provider-item,
    .client-item {
        min-width: 120px;
        height: 80px;
        padding: 0.35rem 0.4rem;
    }

    .provider-item img,
    .client-item img {
        width: 100px;
        height: 48px;
    }
}

/* ============================================
   RESPONSIVE — MOBILE (max 480px)
   ============================================ */

@media (max-width: 480px) {
    :root {
        --spacing-2xl: 2rem;
        --spacing-xl:  1.5rem;
        --spacing-lg:  1rem;
    }

    .container {
        padding: 0 1rem;
    }

    .navbar {
        padding-bottom: 0.5rem;
    }

    .navbar .container {
        padding: var(--spacing-sm);
        gap: 0.5rem;
    }

    .navbar-logo {
        height: 32px;
        margin-right: 8px;
    }

    .partner-badge {
        margin-right: 0;
        margin-left: auto;
    }

    .partner-logo {
        height: 28px;
    }

    .hamburger {
        margin-left: var(--spacing-sm);
    }

    .nav-links {
        top: 60px;
        gap: var(--spacing-sm);
    }

    .hero {
        padding: var(--spacing-lg) 0;
    }

    .hero-content h2 {
        font-size: 1.3rem;
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .section-title {
        font-size: 1.3rem;
        margin-bottom: var(--spacing-md);
    }

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

    .stat-number {
        font-size: 2.8rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }

    .detail-image {
        height: 200px;
    }

    .tab-button {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .proyecto-tabs,
    .equipo-tabs {
        gap: var(--spacing-sm);
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        right: 15px;
        bottom: 15px;
    }

    .mapa-container iframe {
        height: 200px;
    }

    .footer {
        padding: var(--spacing-md) 0;
    }

    .footer-links {
        gap: var(--spacing-sm);
    }
}

/* ============================================
   RESPONSIVE — MOBILE PEQUEÑO (max 360px)
   ============================================ */

@media (max-width: 360px) {
    .navbar-logo {
        height: 28px;
    }

    .partner-logo {
        display: none;
    }

    .hero-content h2 {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 1.1rem;
    }

    .stat-number {
        font-size: 1.8rem;
    }

    .whatsapp-float {
        width: 48px;
        height: 48px;
    }
}

/* ============================================
   RESPONSIVE — DESKTOP GRANDE (min 1200px)
   ============================================ */

@media (min-width: 1200px) {
    .video-strip {
        padding: clamp(3rem, 4vw, 6rem) 0;
    }

    .video-grid {
        grid-template-columns: repeat(3, minmax(320px, 1fr));
        gap: clamp(2rem, 3vw, 3rem);
        max-width: 1300px;
        margin: 0 auto;
    }

    .video-grid video {
        height: 550px;
        object-fit: cover;
    }
}

/* ============================================
   MODELO 3D — DENTRO DE COLUMNA IZQUIERDA
   Aparece centrado debajo de los datos de contacto.
   ============================================ */

.contacto-model3d {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    gap: var(--spacing-md);
}

/* Contenedor relativo que agrupa modelo + plataforma */
.model3d-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

/* Fondo de circuitos SVG */
.model3d-bg {
    display: none;
}

/* Líneas de circuito del fondo del modelo */
.mc-line {
    stroke: #00aaff;
    stroke-width: 1.2;
    fill: none;
    opacity: 0;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: circuitDraw 5s linear infinite;
}
.mc-dot {
    fill: #00ccff;
    opacity: 0;
    animation: mcDotPulse 2s ease-in-out infinite alternate;
}
@keyframes mcDotPulse {
    0%   { opacity: 0.2; r: 2.5px; }
    100% { opacity: 0.8; r: 3.5px; }
}

.contacto-model3d model-viewer {
    width: 300px;
    height: 100%;
    min-height: 420px;
    max-height: 520px;
    --poster-color: transparent;
    --progress-bar-color: transparent;
    background: transparent !important;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 16px 40px rgba(0,0,0,0.65));
    animation: model3dFloat 3.5s ease-in-out infinite;
    cursor: grab;
}

.contacto-model3d model-viewer:active {
    cursor: grabbing;
    animation-play-state: paused;
}

.contacto-model3d model-viewer::part(default-ar-button),
.contacto-model3d model-viewer::part(default-progress-bar) {
    display: none;
}

.contacto-model3d model-viewer::part(canvas) {
    background: transparent !important;
}

/* Plataforma con anillos y glow */
.model3d-platform {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    height: 90px;
    z-index: 1;
}

.model3d-platform__ring {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}
.model3d-platform__ring--1 {
    width: 320px;
    height: 64px;
    bottom: 10px;
    border: 1.5px solid rgba(0,180,255,0.55);
    animation: platformPulse 2.5s ease-in-out infinite;
}
.model3d-platform__ring--2 {
    width: 240px;
    height: 46px;
    bottom: 16px;
    border: 1px solid rgba(0,220,255,0.4);
    animation: platformPulse 2.5s ease-in-out infinite 0.5s;
}
.model3d-platform__ring--3 {
    width: 150px;
    height: 28px;
    bottom: 24px;
    border: 1px solid rgba(0,255,255,0.3);
    animation: platformPulse 2.5s ease-in-out infinite 1s;
}

/* Base sólida plana */
.model3d-platform__base {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 12px;
    background: linear-gradient(90deg, transparent, rgba(0,153,204,0.35) 30%, rgba(0,204,255,0.5) 50%, rgba(0,153,204,0.35) 70%, transparent);
    border-radius: 50%;
    filter: blur(2px);
}

.model3d-platform__glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    height: 48px;
    background: radial-gradient(ellipse at center, rgba(0,153,204,0.5) 0%, rgba(0,100,180,0.2) 50%, transparent 75%);
    filter: blur(12px);
    animation: platformPulse 2.5s ease-in-out infinite 0.3s;
}

@keyframes platformPulse {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 1;    }
}

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

/* Tarjetas de características debajo del modelo */
.model3d-features {
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 100%;
    padding: 0 4px;
}

.model3d-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(0,153,204,0.2);
    border-radius: var(--border-radius);
    padding: 10px 8px;
    text-align: center;
    flex: 1;
}

.model3d-feature span {
    font-size: clamp(0.58rem, 1vw, 0.7rem);
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
}



/* Móvil: colapsa a 1 columna, modelo centrado */
@media (max-width: 767px) {
    .contacto-model3d model-viewer {
        width: 260px;
        min-height: 320px;
        max-height: 380px;
    }
    .model3d-bg { display: none; }
}
}