/*==============================================================
  DON VINCHI — STYLE.CSS
  Autor: Bootcode

  ÍNDICE
  01 ROOT
  02 RESET
  03 TYPOGRAPHY
  04 UTILITIES
  06 NAVBAR
  07 HERO
     7.1 Hero Base
     7.2 Hero Premium
     7.3 Hero FX
     7.4 Hero Responsive
  08 SERVICES
     8.1 Layout
     8.2 Cards
     8.3 Hover
     8.4 Responsive
  09 ABOUT
  10 STATS
  11 GALLERY
  12 CTA
  13 FOOTER & FIRMA
  14 FLOATING BUTTONS
  15 LIGHTBOX & KEYFRAMES
  16 GALERÍA BENTO BOX
  17 BOTÓN WHATSAPP DE SERVICE CARDS
  18 FORMULARIO B2B
  19 COMPORTAMIENTO GENERAL Y AUXILIARES

  (No hay 05: era un stub para un #loader que ya no existe
  en el HTML, se eliminó)
==============================================================*/


/*==============================================================
  01. ROOT — Paleta corporativa
==============================================================*/

:root{
    /* Colores principales */
    --primary:#0B2E73;
    --primary-dark:#081F4D;
    --primary-light:#2E5DB8;

    --secondary:#D71920;
    --secondary-dark:#A81218;

    --accent:#FFD54A;

    /* Escala de grises */
    --white:#FFFFFF;
    --gray-50:#F8FAFC;
    --gray-100:#F1F5F9;
    --gray-200:#E2E8F0;
    --gray-300:#CBD5E1;
    --gray-400:#94A3B8;
    --gray-500:#64748B;
    --gray-600:#475569;
    --gray-700:#334155;
    --gray-800:#1E293B;
    --gray-900:#0F172A;

    /* Fondos */
    --bg-body:#F5F7FA;
    --bg-section:#FFFFFF;
    --bg-dark:#081F4D;

    /* Texto */
    --text:#1E293B;
    --text-light:#64748B;
    --text-white:#FFFFFF;

    /* Bordes */
    --border:#E5E7EB;

    /* Sombras */
    --shadow-xs:0 2px 8px rgba(0,0,0,.05);
    --shadow-sm:0 8px 20px rgba(0,0,0,.08);
    --shadow-md:0 16px 35px rgba(0,0,0,.12);
    --shadow-lg:0 30px 60px rgba(0,0,0,.18);
    --shadow-xl:0 45px 90px rgba(0,0,0,.25);

    /* Border Radius */
    --radius-sm:10px;
    --radius-md:18px;
    --radius-lg:28px;
    --radius-xl:40px;

    /* Layout */
    --container:1400px;
    --header-height:95px;

    /* Transiciones */
    --transition:.35s ease;

    /* Espaciados */
    --space-xs:10px;
    --space-sm:20px;
    --space-md:40px;
    --space-lg:70px;
    --space-xl:120px;
}


/*==============================================================
  02. RESET
==============================================================*/

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:110px;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:'Montserrat',sans-serif;
    background:var(--bg-body);
    color:var(--text);
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img{
    display:block;
    max-width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
}

picture,
svg{
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font-family:inherit;
    cursor:pointer;
    border:none;
    background:none;
}

input,
textarea,
select{
    font:inherit;
    outline:none;
}

ul{
    list-style:none;
}

section{
    position:relative;
}


/*==============================================================
  03. TYPOGRAPHY
==============================================================*/

h1{
    font-size:clamp(3rem,6vw,5.5rem);
    line-height:1;
    font-weight:800;
    letter-spacing:-2px;
}

h2{
    font-size:clamp(2rem,4vw,3.2rem);
    font-weight:800;
    color:var(--primary-dark);
    line-height:1.15;
}

h3{
    font-size:1.5rem;
    font-weight:700;
}

h4{
    font-size:1.15rem;
    font-weight:700;
}

p{
    font-size:1rem;
    line-height:1.8;
    color:var(--text-light);
}

small{
    font-size:.85rem;
}


/*==============================================================
  04. UTILITIES
==============================================================*/

/* Layout */
.container{
    width:min(92%,var(--container));
    margin:auto;
}

.grid{
    display:grid;
}

.flex{
    display:flex;
}

.center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.text-center{
    text-align:center;
}

/* Espaciados */
.py-xl{ padding:var(--space-xl) 0; }
.py-lg{ padding:var(--space-lg) 0; }
.py-md{ padding:var(--space-md) 0; }
.mt-lg{ margin-top:var(--space-lg); }
.mt-xl{ margin-top:var(--space-xl); }

/* Genéricos */
.hidden{ display:none!important; }
.shadow{ box-shadow:var(--shadow-lg); }
.radius{ border-radius:var(--radius-lg); }
.blur{ backdrop-filter:blur(18px); }
.upper{ text-transform:uppercase; }
.relative{ position:relative; }
.absolute{ position:absolute; }

/* Selección de texto */
::selection{
    background:var(--secondary);
    color:white;
}

/* Scrollbar */
::-webkit-scrollbar{
    width:10px;
}

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

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

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


/*==============================================================
  06. NAVBAR
==============================================================*/

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    transition:all .35s ease;
    background:rgba(11,46,115,.78);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.navbar.scrolled{
    background:rgba(8,31,77,.97);
    box-shadow:0 12px 35px rgba(0,0,0,.25);
    border-bottom:3px solid var(--secondary);
}

.nav-container{
    width:min(94%,1400px);
    margin:auto;
    height:95px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* Logo */
.logo{
    display:flex;
    align-items:center;
    transition:.35s;
}

.logo img{
    height:74px;
    transition:.35s;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));
}

.navbar.scrolled .logo img{
    height:62px;
}

.logo:hover{
    transform:scale(1.04);
}

/* Menú */
.nav-links{
    display:flex;
    align-items:center;
    gap:14px;
}

.nav-links a {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center; /* Mantenemos la caja centrada en el botón */
    transition: .35s;
}

/* Íconos del menú unificados */
.nav-links a img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    object-position: bottom;
    transition: .35s;
}

.nav-links a:hover{
    background:rgba(255,255,255,.10);
    transform:translateY(-4px);
}

.nav-links a:hover img{
    transform:scale(1.12);
}

/* Línea inferior */
.nav-links a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-12px;
    transform:translateX(-50%);
    width:0;
    height:4px;
    border-radius:20px;
    background:var(--secondary);
    transition:.35s;
}

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

/* Tooltip */
.nav-links a::before{
    content:attr(data-tooltip);
    position:absolute;
    top:72px;
    left:50%;
    transform:translateX(-50%) translateY(10px);
    background:var(--primary-dark);
    color:white;
    padding:8px 14px;
    border-radius:10px;
    font-size:.78rem;
    letter-spacing:.5px;
    opacity:0;
    pointer-events:none;
    transition:.30s;
    white-space:nowrap;
    box-shadow:var(--shadow-sm);
}

.nav-links a:hover::before{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* Link activo */
.nav-links a.active{
    background:rgba(255,255,255,.10);
}

.nav-links a.active::after{
    width:75%;
}

/* Hamburger */
.hamburger{
    display:none;
    width:48px;
    height:48px;
    cursor:pointer;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:7px;
}

.hamburger span{
    width:30px;
    height:3px;
    border-radius:20px;
    background:white;
    transition:.35s;
}

.hamburger.active span:nth-child(1){
    transform:translateY(10px) rotate(45deg);
}

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

.hamburger.active span:nth-child(3){
    transform:translateY(-10px) rotate(-45deg);
}

/* Responsive */
@media(max-width:980px){
    .nav-container{
        height:88px;
    }

    .logo img{
        height:62px;
    }

    .hamburger{
        display:flex;
    }

    .nav-links{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:rgba(8,31,77,.98);
        backdrop-filter:blur(20px);
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:25px;
        padding:30px;
        transform-origin:top;
        transform:scaleY(0);
        opacity:0;
        visibility:hidden;
        transition:.35s;
    }

    .nav-links.active{
        opacity:1;
        visibility:visible;
        transform:scaleY(1);
    }

    .nav-links a{
        width:100%;
        height:72px;
        border-radius:20px;
    }

    .nav-links a img{
        width:40px;
    }

    .nav-links a::before{
        display:none;
    }
}

@media(max-width:640px){
    .nav-links{
        grid-template-columns:repeat(2,1fr);
    }

    .logo img{
        height:54px;
    }
}


/*==============================================================
  07. HERO
==============================================================*/

/*----------------------------------------------------------------
  7.1 Hero Base
----------------------------------------------------------------*/

.hero{
    opacity: 0;
    visibility: hidden;
    position:relative;
    min-height:100vh;
    padding-top:110px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:linear-gradient(135deg,rgba(8,31,77,.95),rgba(11,46,115,.90));
}

/* Imagen de fondo */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("../images/hero/hero-bg.webp") center center/cover;
    opacity:.28;
    transform:scale(1.05);
    animation:heroZoom 18s linear infinite alternate;
}

/*
  NOTA: .hero::after estaba declarado dos veces en el archivo original
  (un patrón industrial repeating-gradient, y este efecto de luz que
  sigue al mouse). Al ser el mismo selector, el segundo pisaba
  completamente al primero, así que el patrón nunca se veía. Se dejó
  únicamente la versión funcional (luz que sigue al cursor).
*/
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.35;
    background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(255,255,255,.10),transparent 45%);
    transition:background .12s linear;
    z-index:3;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,rgba(215,25,32,.22),transparent 40%),
        linear-gradient(90deg,rgba(8,31,77,.82),rgba(8,31,77,.55));
}

.hero-content{
    position:relative;
    z-index:5;
    width:min(92%,1400px);
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}



/*
  NOTA: .hero-badge estaba duplicado. La segunda versión (dentro del
  bloque "4.1 Premium+") pisaba por completo a la primera, así que
  se dejó solo la definición final combinada.
*/
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:12px 22px;
    margin-bottom:35px;
    border-radius:40px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(18px);
    color:white;
    font-size:.95rem;
    font-weight:600;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.hero h1{
    color:white;
    margin-bottom:25px;
    max-width:700px;
}

.hero p{
    color:rgba(255,255,255,.82);
    font-size:1.18rem;
    max-width:620px;
    margin-bottom:45px;
}

/* Botones */
.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn-primary{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-width:220px;
    height:60px;
    background:var(--secondary);
    color:white;
    border-radius:60px;
    font-weight:700;
    transition:.35s;
    box-shadow:0 15px 35px rgba(215,25,32,.35);
}

.btn-primary:hover{
    transform:translateY(-4px);
    background:#f3272f;
}

.btn-secondary{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-width:220px;
    height:60px;
    border:2px solid rgba(255,255,255,.18);
    color:white;
    backdrop-filter:blur(12px);
    border-radius:60px;
    transition:.35s;
}

.btn-secondary:hover{
    background:white;
    color:var(--primary);
}

/*
  NOTA: .hero-right estaba repetido 4 veces con propiedades sueltas
  (position:relative suelto, display+justify+align repetidos, etc).
  Se unificó en una sola declaración con todas sus propiedades.
*/
.hero-right{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-right img{
    position:relative;
    z-index:2;
    width:min(100%,720px);
    animation:floatMachine 6s ease-in-out infinite;
    filter:drop-shadow(0 50px 80px rgba(0,0,0,.45));
}

/* Bloques geométricos decorativos */
.hero-right::before{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    background:rgba(215,25,32,.18);
    filter:blur(70px);
}

.hero-right::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border:2px solid rgba(255,255,255,.08);
    border-radius:40px;
    transform:rotate(25deg);
}

/* Scroll indicator */
.hero-scroll{
    position:absolute;
    bottom:35px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;
}

.hero-scroll span{
    display:block;
    width:28px;
    height:48px;
    border:2px solid rgba(255,255,255,.55);
    border-radius:40px;
    position:relative;
}

.hero-scroll span::before{
    content:"";
    position:absolute;
    width:6px;
    height:6px;
    background:white;
    border-radius:50%;
    left:50%;
    top:10px;
    transform:translateX(-50%);
    animation:scrollDown 1.8s infinite;
}

/* Keyframes propios del Hero Base */
@keyframes heroZoom{
    from{ transform:scale(1.05); }
    to{ transform:scale(1.15); }
}

@keyframes floatMachine{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-18px); }
    100%{ transform:translateY(0); }
}

@keyframes scrollDown{
    0%{ opacity:0; top:10px; }
    50%{ opacity:1; }
    100%{ opacity:0; top:28px; }
}


/*----------------------------------------------------------------
  7.2 Hero Premium — Blueprint · Luz · Badge · Cards · Contador
----------------------------------------------------------------*/

.hero-blueprint{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.05;
    z-index:1;
    background-image:
        linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
    background-size:70px 70px;
}

.hero-light{
    position:absolute;
    top:-40%;
    left:-35%;
    width:45%;
    height:220%;
    pointer-events:none;
    z-index:2;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    transform:rotate(22deg);
    animation:heroLight 13s linear infinite;
}

@keyframes heroLight{
    from{ transform:translateX(-60vw) rotate(22deg); }
    to{ transform:translateX(180vw) rotate(22deg); }
}

.pulse-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#39ff66;
    box-shadow:0 0 10px #39ff66,0 0 25px #39ff66;
    animation:pulseDot 2s infinite;
}

@keyframes pulseDot{
    0%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.45); opacity:.55; }
    100%{ transform:scale(1); opacity:1; }
}

.hero-info{
    display:flex;
    gap:22px;
    margin-top:50px;
    flex-wrap:wrap;
}

/*==============================================================
  HERO CARDS (Las que flotan en la portada)
  Efecto Glassmorphism + Preparadas para el JS Tilt 3D
==============================================================*/

.hero-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}

.hero-card {
    /* Efecto Vidrio (Glassmorphism) */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md, 16px);
    
    padding: 25px 20px;
    color: var(--white);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    
    /* Configuración para el JS de Tilt 3D */
    transform-style: preserve-3d;
    will-change: transform;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.hero-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hero-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
    /* Efecto para que el texto resalte en 3D con el hover del JS */
    transform: translateZ(20px); 
}

.hero-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    transform: translateZ(10px);
}

/* Contador flotante (sobre la imagen) */
.hero-floating-number{
    position:absolute;
    right:-25px;
    bottom:35px;
    padding:22px 26px;
    background:white;
    border-radius:22px;
    box-shadow:0 35px 70px rgba(0,0,0,.25);
    animation:floatCard 4.5s ease-in-out infinite;
    z-index:10;
}

.hero-floating-number strong{
    display:block;
    color:var(--secondary);
    font-size:2.7rem;
    line-height:1;
    font-weight:800;
}

.hero-floating-number span{
    display:block;
    margin-top:5px;
    color:var(--primary);
    font-size:.82rem;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
}

@keyframes floatCard{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-12px); }
    100%{ transform:translateY(0); }
}


/*----------------------------------------------------------------
  7.3 Hero FX — Glow rojo · Reflejo de vidrio · Partículas · Intro
----------------------------------------------------------------*/

.hero-red-glow{
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(210,45,45,.22),rgba(210,45,45,.08),transparent 70%);
    filter:blur(70px);
    z-index:0;
    animation:redGlow 7s ease-in-out infinite;
}

@keyframes redGlow{
    0%{ transform:scale(1); opacity:.45; }
    50%{ transform:scale(1.08); opacity:.7; }
    100%{ transform:scale(1); opacity:.45; }
}

.glass-reflection{
    position:absolute;
    top:-25%;
    left:-40%;
    width:140px;
    height:180%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
    transform:rotate(18deg);
    pointer-events:none;
    animation:glassMove 8s linear infinite;
    z-index:5;
    filter:blur(2px);
}

@keyframes glassMove{
    0%{ left:-45%; }
    100%{ left:145%; }
}

.hero-particles{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
    overflow:hidden;
}

.hero-particles span{
    position:absolute;
    width:3px;
    height:3px;
    background:white;
    border-radius:50%;
    opacity:.18;
    animation:particleFloat linear infinite;
}

.hero-particles span:nth-child(1){ top:15%; left:10%; animation-duration:14s; }
.hero-particles span:nth-child(2){ top:25%; left:80%; animation-duration:16s; }
.hero-particles span:nth-child(3){ top:72%; left:20%; animation-duration:18s; }
.hero-particles span:nth-child(4){ top:55%; left:62%; animation-duration:15s; }
.hero-particles span:nth-child(5){ top:85%; left:42%; animation-duration:20s; }
.hero-particles span:nth-child(6){ top:10%; left:55%; animation-duration:17s; }
.hero-particles span:nth-child(7){ top:42%; left:30%; animation-duration:19s; }
.hero-particles span:nth-child(8){ top:68%; left:90%; animation-duration:13s; }

@keyframes particleFloat{
    0%{ transform:translateY(0); opacity:.15; }
    50%{ opacity:.45; }
    100%{ transform:translateY(-45px); opacity:.1; }
}

/* Intro cinematográfica */
.hero-badge,
.hero h1,
.hero p,
.hero-buttons,
.hero-info,
.hero-right{
    opacity:0;
    transform:translateY(45px);
}
/*=========================================
  ESTADO FINAL DEL HERO (Cuando carga JS)
=========================================*/
.hero.loaded {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.4s ease-in; /* Hace que el fondo azul aparezca suavemente */
}
.hero.loaded .hero-badge{ animation:intro .8s .15s forwards; }
.hero.loaded h1{ animation:intro .9s .35s forwards; }
.hero.loaded p{ animation:intro .9s .55s forwards; }
.hero.loaded .hero-buttons{ animation:intro .9s .75s forwards; }
.hero.loaded .hero-info{ animation:intro .9s .95s forwards; }
.hero.loaded .hero-right{ animation:introImage 1.2s .5s forwards; }

@keyframes intro{
    to{ opacity:1; transform:none; }
}

@keyframes introImage{
    0%{ opacity:0; transform:translateX(80px) scale(.95); }
    100%{ opacity:1; transform:translateX(0) scale(1); }
}

/* Optimizaciones varias */
.hero img{
    max-width:100%;
    height:auto;
    display:block;
}

.hero-left,
.hero-right{
    flex:1;
}

.hero *{
    word-break:normal;
}


/*----------------------------------------------------------------
  7.4 Hero Responsive
----------------------------------------------------------------*/

@media(max-width:1100px){
    .hero-content{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-left{ order:2; }
    .hero-right{ order:1; }

    .hero p{
        margin:auto auto 40px;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-right img{
        width:75%;
    }

    .hero-info{
        justify-content:center;
    }

    .hero-floating-number{
        right:15px;
        bottom:15px;
    }
}

@media(max-width:992px){
    .hero{ min-height:auto; }

    .hero-content{ gap:40px; }

    .hero-left h1{ font-size:3.6rem; }
    .hero-left p{ font-size:1rem; }

    .hero-right img{ width:430px; }

    .hero-floating-number{ padding:18px 22px; }
    .hero-floating-number strong{ font-size:2rem; }
}

@media(max-width:768px){
    .hero{
        min-height:auto;
        padding:150px 0 90px;
    }

    .hero-content{ gap:40px; }

    .hero-right img{ width:100%; }

    .hero h1{ font-size:clamp(2.6rem,10vw,4rem); }

    .hero p{ font-size:1rem; }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        max-width:340px;
    }

    .hero-right::after{ display:none; }

    .hero-info{
        flex-direction:column;
        gap:18px;
        margin-top:35px;
    }

    .hero-card{ min-width:100%; }

    .hero-floating-number{
        position:relative;
        right:auto;
        bottom:auto;
        margin:30px auto 0;
        width:max-content;
    }

    .hero-badge{
        font-size:.85rem;
        padding:10px 18px;
    }

    .hero-scroll{ display:none; }
}

@media(max-width:480px){
    .hero-badge{
        font-size:.8rem;
        padding:10px 16px;
    }

    .hero-scroll{ display:none; }
}

@media(min-width:1600px){
    .hero{ min-height:100vh; }

    .hero-content{ max-width:1600px; }

    .hero-left h1{ font-size:clamp(5.5rem,6vw,7rem); }

    .hero-left p{
        max-width:620px;
        font-size:1.35rem;
    }

    .hero-right img{ width:760px; }

    .hero-floating-number{
        right:-30px;
        bottom:40px;
    }
}

@media(max-width:1400px){
    .hero-content{ gap:70px; }
    .hero-left h1{ font-size:4.8rem; }
    .hero-right img{ width:620px; }
}

@media(max-width:1200px){
    .hero{ padding:150px 8% 90px; }
    .hero-content{ gap:50px; }
    .hero-left h1{ font-size:4.2rem; }
    .hero-left p{ font-size:1.1rem; }
    .hero-right img{ width:540px; }
    .hero-buttons{ gap:18px; }
}

@media(max-width:576px){
    .hero{ padding:120px 20px 60px; }

    .hero-badge{ margin:auto; }

    .hero-left h1{ font-size:2.55rem; }
    .hero-left p{ font-size:.95rem; }

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

    .btn-primary,
    .btn-secondary{ width:100%; }

    .hero-right{ margin-top:35px; }
    .hero-right img{ max-width:100%; }

    .hero-floating-number{
        position:absolute;
        right:10px;
        bottom:-15px;
        padding:15px 18px;
    }

    .hero-floating-number strong{ font-size:1.6rem; }
    .hero-floating-number span{ font-size:.8rem; }

    .hero-red-glow{
        width:260px;
        height:260px;
        filter:blur(90px);
    }

    .hero-light{ opacity:.18; }
    .hero-blueprint{ opacity:.05; }
}

@media(max-width:390px){
    .hero{ padding:115px 18px 50px; }

    .hero-left h1{ font-size:2.15rem; }
    .hero-left p{ font-size:.9rem; }

    .hero-badge{
        font-size:.75rem;
        padding:10px 16px;
    }

    .hero-buttons{ gap:14px; }

    .hero-floating-number{ padding:12px 16px; }
    .hero-floating-number strong{ font-size:1.3rem; }
    .hero-floating-number span{ font-size:.72rem; }
}


/*==============================================================
  08. SERVICES

  NOTA: en el archivo original esta sección estaba triplicada, con
  dos versiones que usaban clases (.service-content, .service-icon,
  .service-image) que NO existen en tu HTML actual, y una tercera
  versión que sí coincide (.service-info, .service-list,
  .service-btn). Se conservó únicamente la que coincide con el
  markup real y se descartaron las otras dos por ser código muerto.
==============================================================*/

.services {
    width: 100%;
    padding: var(--space-xl) 8%;
    background: #f5f8fc;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(11,46,115,.08);
    border-bottom: 1px solid rgba(11,46,115,.08);
}

/* Fondos decorativos */
.services::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at top right, rgba(11,46,115,.05), transparent 40%),
        radial-gradient(circle at bottom left, rgba(215,25,32,.04), transparent 45%);
    pointer-events: none;
}

.services::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(11,46,115,.05), transparent 60%);
    pointer-events: none;
}

/* Cabecera de la sección */
.services-header {
    max-width: 900px;
    margin: 0 auto 70px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.services-header span {

    display: inline-block;
    padding: 10px 24px; /* Un poco más de aire */
    border-radius: 50px;
    background: var(--primary);
    color: var(--white);
    font-size: 1rem; /* Aumentamos el tamaño */
    font-weight: 800; /* Más negrita */
    letter-spacing: 3px; /* Letras más separadas */
    text-transform: uppercase;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(11,46,115,0.2); /* Sombra para que resalte */
}

.services-header h2 {
    font-size: clamp(2.4rem, 5vw, 3.5rem);
    color: var(--primary-dark);
    margin-bottom: 20px;
}

.services-header p {

    font-size: 1.25rem; /* Letra más grande */
    font-weight: 500; /* Un poco más de peso */
    color: var(--gray-700); /* Un gris más oscuro para que lea mejor */
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* GRILLA MÁGICA: auto-fill evita que las últimas cards se estiren y ocupen todo el ancho */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 2;
}

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

.service-card {
    background: var(--white);
    border-radius: var(--radius-lg, 20px);
    padding: 35px 25px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(11, 46, 115, 0.05);
    border-bottom: 4px solid transparent;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Configuración para que todas las cards tengan la misma altura */
    display: flex;
    flex-direction: column;
    height: 100%;

    /* Estado inicial oculto para el JS (Intersection Observer) */
    opacity: 0;
    transform: translateY(40px);
}

.service-card.show {
    opacity: 1;
    transform: translateY(0);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(11, 46, 115, 0.12);
    border-bottom-color: var(--secondary);
}

/* Control para imágenes principales (Como la de la Grúa en tu captura) */
.service-card > img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 25px;
}

/* Control por si usás iconos pequeños en algún momento */
.service-card .icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(11, 46, 115, 0.05);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    transition: var(--transition);
    flex-shrink: 0;
}

.service-card:hover .icon-wrapper {
    background: var(--primary);
}

.service-card .icon-wrapper img {
    width: 30px;
    height: 30px;
    margin-bottom: 0;
    transition: var(--transition);
}

.service-card:hover .icon-wrapper img {
    filter: brightness(0) invert(1);
}

.service-card h3 {
    font-size: 1.4rem;
    color: var(--primary-dark);
    margin-bottom: 15px;
}

.service-card p {
    color: var(--gray-500);
    line-height: 1.6;
    font-size: 0.95rem;
    flex-grow: 1; /* Esto empuja el contenido hacia abajo, alineando todo perfecto */
}

/* Ajustes Responsive (Solo lo necesario, la grilla se acomoda sola) */
@media(max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr; /* En celulares, sí o sí 1 columna */
    }
    .service-card {
        padding: 30px 20px;
    }
}

/*----------------------------------------------------------------
  8.4 Responsive
----------------------------------------------------------------*/

@media(max-width:900px){
    .services{ padding: 90px 6%; }
}

@media(max-width:600px){
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-card {
        padding: 30px 20px;
    }
    .service-info{ padding: 25px; }
    .service-info h3{ font-size: 1.7rem; }
}


/*==============================================================
  09. ABOUT
==============================================================*/

.about {
    padding: var(--space-xl) 8%;
    background: var(--bg-section);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-left h2 {
    margin-bottom: var(--space-sm);
}

.about-left p {
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
    color: var(--text-light);
}

.about-left ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.about-left li {
    display: flex;
    align-items: flex-start; /* Alinea al inicio si el texto ocupa varias líneas */
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--gray-700);
}

.about-left li::before {
    content: "✓";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background: var(--secondary);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
    flex-shrink: 0; /* EVITA QUE EL CIRCULO SE DEFORME O SE APLATE */
    margin-top: 2px;
}

.about-right img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.about-right img:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

@media(max-width: 992px) {
    .about {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .about-right {
        order: -1;
    }
}

/*==============================================================
  10. STATS
==============================================================*/

.stats {
    padding: var(--space-lg) 8%;
    background: var(--primary-dark);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

.stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.05), transparent 60%);
    pointer-events: none;
}

.stats div {
    text-align: center;
    position: relative;
    z-index: 2;
    min-width: 200px;
}

.stats img {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.stats .counter {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 5px;
}

.stats p {
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    font-weight: 600;
}

/*==============================================================
  11. GALLERY
  NOTA: se eliminó una versión antigua/fallback que definía
  #galeria-container por ID. Al ser un ID le ganaba por
  especificidad a la clase .bento-grid (sección 16) y pisaba su
  grid-template-columns y gap, rompiendo el layout real de la
  galería bento. Las clases .gallery-item de esa versión tampoco
  existían ya en el HTML.
==============================================================*/

#galeria {
    padding: var(--space-xl) 8%;
    background: var(--bg-body);
    text-align: center;
}

#galeria h2 {
    margin-bottom: var(--space-lg);
}

/*==============================================================
  12. CTA
==============================================================*/

.cta {
    padding: var(--space-xl) 8%;
    background: linear-gradient(135deg, var(--secondary-dark), var(--secondary));
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: auto;
}

.cta h2 {
    color: var(--white);
    margin-bottom: var(--space-sm);
    font-size: clamp(2rem, 4vw, 3rem);
}

.cta p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    margin-bottom: var(--space-md);
}

.cta .btn-primary {
    background: var(--white);
    color: var(--secondary);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.cta .btn-primary:hover {
    background: var(--accent);
    color: var(--primary-dark);
    transform: translateY(-5px);
}

/*==============================================================
  13. FOOTER & FIRMA
==============================================================*/

#contacto {
    background: var(--gray-900);
    color: var(--white);
    padding: var(--space-lg) 8% 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.footer-logo {
    height: 60px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

.footer-grid p {
    color: var(--gray-400);
}

.footer-grid h4 {
    color: var(--white);
    margin-bottom: 25px;
    font-size: 1.2rem;
    position: relative;
}

.footer-grid h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 3px;
    background: var(--secondary);
    border-radius: 2px;
}

.footer-grid a {
    display: block;
    color: var(--gray-400);
    margin-bottom: 12px;
    transition: var(--transition);
}

.footer-grid a:hover {
    color: var(--accent);
    transform: translateX(5px);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    margin-top: 40px;
    gap: 10px;
}

.copyright {
    color: var(--gray-400);
    font-size: 0.9rem;
    border: none;
    text-align: center;
}

.developer-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 300;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.developer-signature:hover {
    opacity: 1;
}

.developer-signature img {
    height: 18px;
    width: auto;
}

/*==============================================================
  14. FLOATING BUTTONS
==============================================================*/

.floating {
    position: fixed;
    right: 25px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    box-shadow: var(--shadow-md);
    z-index: 999;
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
}

.floating.visible {
    opacity: 1;
    visibility: visible;
}

.floating.whatsapp {
    bottom: 25px;
    background: #25D366;
}

.floating.whatsapp img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
}

.floating.whatsapp:hover {
    background: #1EBE5A;
    transform: scale(1.1);
}

.floating.top {
    bottom: 95px;
    background: var(--primary);
    font-size: 1.5rem;
    font-weight: bold;
}

.floating.top:hover {
    background: var(--primary-light);
    transform: translateY(-5px);
}

/*==============================================================
  15. LIGHTBOX & KEYFRAMES
==============================================================*/

#lightbox {
    position: fixed;
    inset: 0;
    background: rgba(8, 31, 77, 0.95);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(10px);
}

#lightbox.active {
    opacity: 1;
    visibility: visible;
}

#lightbox img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xl);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#lightbox.active img {
    transform: scale(1);
}

@keyframes fadeUp{
    from{ opacity:0; transform:translateY(40px); }
    to{ opacity:1; transform:none; }
}

@keyframes fadeLeft{
    from{ opacity:0; transform:translateX(-50px); }
    to{ opacity:1; transform:none; }
}

@keyframes fadeRight{
    from{ opacity:0; transform:translateX(50px); }
    to{ opacity:1; transform:none; }
}

@keyframes zoomIn{
    from{ opacity:0; transform:scale(.92); }
    to{ opacity:1; transform:scale(1); }
}

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

/*==============================================================
  16. GALERÍA BENTO BOX (VERSIÓN DINÁMICA AUTOMÁTICA)
==============================================================*/

.gallery-section {
    padding: 100px 6%;
    background-color: var(--bg-section);
}

.bento-grid {
    display: grid;
    /* La magia: calcula automáticamente cuántas columnas entran según la pantalla */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
}

.bento-item {
    width: 100%;
    /* 4/5 da un toque vertical elegante. Podés cambiar a 1/1 si las querés cuadradas */
    aspect-ratio: 4 / 5; 
    position: relative;
    border-radius: 12px;
    overflow: hidden; 
}

.bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,46,115,0.95) 0%, rgba(11,46,115,0.4) 40%, rgba(0,0,0,0) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    /* Reduje un poco el padding lateral para darle más espacio al texto en móviles */
    padding: 30px 15px; 
    box-sizing: border-box; /* Fundamental para que el padding no rompa la caja */
}

.bento-text {
    color: #ffffff;
    transform: translateY(20px);
    transition: transform 0.4s ease;
    width: 100%;
    text-align: center; /* Centramos el texto para que quede armónico en todas las cajas */
}

.bento-text h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    
    /* MAGIA ANTIDESBORDE (Evita que pase lo de ejemplo.jpg) */
    white-space: normal; 
    overflow-wrap: break-word; 
    word-break: break-word; 
    line-height: 1.2; /* Reduce el espacio entre líneas si el título es largo y baja */
}

.bento-text p {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.bento-item:hover img {
    transform: scale(1.08);
}

.bento-item:hover .bento-overlay {
    opacity: 1;
}

.bento-item:hover .bento-text {
    transform: translateY(0);
}

/* RESPONSIVE GALERÍA BENTO */
@media (max-width: 768px) {
    /* Ya no hace falta definir columnas acá. Solo dejamos fijo el overlay para pantallas táctiles */
    .bento-overlay {
        opacity: 1; 
        background: linear-gradient(to top, rgba(11,46,115,0.95) 0%, rgba(11,46,115,0.4) 50%, rgba(0,0,0,0) 100%);
    }
    .bento-text {
        transform: translateY(0); 
    }
}

/*==============================================================
  17. BOTÓN WHATSAPP DE SERVICE CARDS
  NOTA: se eliminó ~230 líneas de CSS muerto de una versión
  anterior del bloque de cotización (dropdowns .presupuesto-wrapper,
  .wa-dropdown-*, .wa-trigger-btn, .wa-icon, .wa-label, .wa-btn,
  .cta-wa-*, .cta-btn*). Ninguna de esas clases existe ya en el
  HTML: hoy el botón de cada card es simplemente .btn-cotizar
  (definido junto a .btn-primary). Se conserva solo lo que sigue
  en uso real.
==============================================================*/

.service-wa-block {
    margin-top: 15px;
    width: 100%;
    text-align: center;
}

.wa-buttons-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/*==============================================================
  18. FORMULARIO B2B
==============================================================*/

.lead-form-section {
    background-color: #111;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.lead-form-container {
    max-width: 600px;
    width: 100%;
    background-color: #1a1a1a;
    padding: 40px;
    border-radius: 8px;
    border-top: 4px solid #cc0000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.lead-form-text {
    text-align: center;
    margin-bottom: 30px;
}

.lead-form-text h2 {
    color: #fff;
    margin-bottom: 10px;
}

.lead-form-text p {
    color: #aaa;
    font-size: 0.9rem;
}

.b2b-form .form-group {
    margin-bottom: 20px;
}

.b2b-form input[type="text"],
.b2b-form select {
    width: 100%;
    padding: 12px 15px;
    background-color: #222;
    border: 1px solid #333;
    color: #fff;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}

.b2b-form input:focus,
.b2b-form select:focus {
    outline: none;
    border-color: #cc0000;
}

.form-group-radio {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #222;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #333;
}

.radio-label {
    color: #ccc;
    font-size: 0.9rem;
}

.radio-options {
    display: flex;
    gap: 20px;
}

.radio-options label {
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.submit-wa-btn {
    width: 100%;
    background-color: #25D366;
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.3s;
}

.submit-wa-btn:hover {
    background-color: #1eb954;
}

.wa-icon-small {
    width: 20px;
}

/*==============================================================
  19. COMPORTAMIENTO GENERAL Y AUXILIARES
==============================================================*/

html {
    scroll-behavior: smooth;
}

#btnTop {
    display: none;
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    z-index: 999; 
    border: none; 
    outline: none; 
    background-color: #cc0000; 
    color: white; 
    cursor: pointer; 
    padding: 12px 18px; 
    border-radius: 50%;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#btnTop:hover {
    background-color: #ffcc00; 
    color: #000;
    transform: translateY(-3px);
}