/* ============================================================
   TECNIEQUIGAS INGENIERÍA S.A.S — Sistema de diseño
   Tema: tecnología industrial · azul rey + naranja llama
   ============================================================ */

:root{
  --bg:        #060b16;
  --bg-2:      #0a1424;
  --bg-3:      #0e1b30;
  --panel:     rgba(148, 184, 255, .045);
  --panel-2:   rgba(148, 184, 255, .08);
  --line:      rgba(120, 170, 255, .16);
  --line-soft: rgba(120, 170, 255, .09);
  --blue:      #2e6bff;
  --blue-soft: #6ea8ff;
  --cyan:      #38c8ff;
  --orange:    #ff7a1c;
  --amber:     #ffb35c;
  --text:      #e8eefb;
  --muted:     #9fb0cc;
  --font-head: "Rajdhani", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --radius:    14px;
  --shadow-glow-blue:   0 0 40px rgba(46,107,255,.25);
  --shadow-glow-orange: 0 0 40px rgba(255,122,28,.28);
  --header-h: 76px;
}

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

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

::selection{ background:var(--orange); color:#0a0a0a; }

/* barra de scroll */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--blue),var(--orange)); border-radius:6px; }

/* ---------- fondo técnico global ---------- */
.tech-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(46,107,255,.14), transparent 60%),
    radial-gradient(700px 500px at -10% 40%, rgba(255,122,28,.07), transparent 60%),
    var(--bg);
}
.tech-bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(120,170,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
}

.container{ width:min(1200px, 92%); margin-inline:auto; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:border-color .35s;
  border-bottom:1px solid transparent;
}
/* el fondo/blur va en ::before (sin hijos reales) para que .site-header no se
   vuelva "containing block" de su .main-nav fixed anidado — si el filtro va
   directo en .site-header, el menú móvil se corta al hacer scroll */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(6,11,22,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; transition:opacity .35s;
}
.site-header.scrolled{
  border-bottom-color:var(--line-soft);
}
.site-header.scrolled::before{
  opacity:1;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
/* logo transparente en dos versiones: .logo-gris (fondos oscuros) y
   .logo-color (fondos claros); el CSS decide cuál se muestra */
.brand-logo{ display:inline-flex; align-items:center; }
.brand-logo img{ height:54px; width:auto; display:block; }
.brand-logo .logo-color{ display:none; }
.footer-brand .brand-logo img{ height:60px; }

.main-nav ul{ display:flex; gap:6px; align-items:center; }
.main-nav a{
  font-family:var(--font-head); font-weight:600; font-size:16px;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:10px 14px; border-radius:8px;
  position:relative; transition:color .25s;
}
.main-nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--orange));
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
  border-radius:2px;
}
.main-nav a:hover, .main-nav a.active{ color:var(--text); }
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); }

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, var(--orange), #ff5722);
  color:#fff !important; padding:10px 20px !important; border-radius:999px;
  box-shadow:var(--shadow-glow-orange);
  transition:transform .25s, box-shadow .25s;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 0 55px rgba(255,122,28,.45); }

.header-right{ display:flex; align-items:center; gap:16px; }

/* ---------- suiche de tema claro/oscuro ---------- */
.theme-switch{
  flex:none; width:62px; height:32px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel-2);
  position:relative; padding:0;
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.theme-switch:hover{ box-shadow:var(--shadow-glow-blue); }
.theme-switch .track-icon{
  position:absolute; top:50%; transform:translateY(-50%);
  width:14px; height:14px; opacity:.45; pointer-events:none;
}
.theme-switch .track-icon svg{ width:14px; height:14px; stroke:var(--muted); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.theme-switch .track-sun{ left:8px; }
.theme-switch .track-moon{ right:8px; }
.theme-switch .knob{
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  display:grid; place-items:center; z-index:1;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.4,0,.2,1), background .35s;
  transform:translateX(30px); /* oscuro = luna, a la derecha */
}
.theme-switch .knob svg{ width:13px; height:13px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.theme-switch .icon-sun{ display:none; }
:root[data-theme="light"] .theme-switch .knob{
  transform:translateX(0);
  background:linear-gradient(135deg, var(--orange), var(--amber));
}
:root[data-theme="light"] .theme-switch .icon-sun{ display:block; }
:root[data-theme="light"] .theme-switch .icon-moon{ display:none; }

/* menú móvil */
.nav-toggle{
  display:none; background:none; border:1px solid var(--line);
  border-radius:8px; width:46px; height:42px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--text);
  border-radius:2px; transition:transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 1020px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:fixed; top:var(--header-h); right:0; bottom:0; width:min(320px, 84vw);
    background:rgba(8,15,30,.97); backdrop-filter:blur(16px);
    border-left:1px solid var(--line);
    transform:translateX(105%); transition:transform .35s cubic-bezier(.4,0,.2,1);
    padding:28px 20px; overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:4px; }
  .main-nav a{ display:block; padding:13px 16px; font-size:18px; }
  .nav-cta{ justify-content:center; margin-top:14px; }
}

/* ============================================================
   HERO (slider)
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; isolation:isolate;
  color:#e8eefb; /* el hero es fotográfico y se queda oscuro en ambos temas */
}
.hero-slides{ position:absolute; inset:0; z-index:-3; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease;
  background-size:cover; background-position:center;
}
.hero-slide.active{ opacity:1; animation:kenburns 9s ease-out forwards; }
@keyframes kenburns{
  from{ transform:scale(1); } to{ transform:scale(1.09); }
}
.hero-overlay{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(100deg, rgba(5,10,20,.94) 25%, rgba(5,10,20,.55) 60%, rgba(5,10,20,.35));
}
#particles{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }

.hero-content{ padding:140px 0 110px; max-width:780px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; font-size:13px; color:var(--cyan);
  border:1px solid var(--line); border-radius:999px; padding:8px 18px;
  background:rgba(56,200,255,.06);
}
.hero-eyebrow .dot{
  width:8px; height:8px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 12px var(--orange); animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.55; }
}
.hero h1{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(2.4rem, 5.4vw, 4.3rem); line-height:1.06;
  text-transform:uppercase; letter-spacing:.015em; margin:26px 0 10px;
}
.hero h1 .grad{
  background:linear-gradient(92deg, var(--blue-soft), var(--cyan) 45%, var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-rotator{
  font-family:var(--font-head); font-size:clamp(1.2rem, 2.6vw, 1.7rem);
  font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  color:var(--orange); min-height:1.6em; margin-bottom:18px;
}
.hero-rotator .caret{ animation:blink 1s steps(1) infinite; color:var(--cyan); }
@keyframes blink{ 50%{ opacity:0; } }
.hero p.lead{ color:#9fb0cc; font-size:clamp(1rem, 1.6vw, 1.15rem); max-width:620px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }

.hero-dots{
  position:absolute; bottom:96px; right:6%; z-index:5; display:flex; gap:10px;
}
.hero-dots button{
  width:34px; height:4px; border:none; border-radius:2px; cursor:pointer;
  background:rgba(255,255,255,.25); transition:background .3s;
}
.hero-dots button.active{ background:var(--orange); box-shadow:0 0 10px var(--orange); }

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:#9fb0cc; font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:5;
}
.scroll-hint::after{
  content:""; width:1px; height:34px;
  background:linear-gradient(var(--cyan), transparent);
  animation:drop 1.6s ease-in-out infinite;
}
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top; } 60%{ transform:scaleY(1); } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:700; font-size:15px;
  text-transform:uppercase; letter-spacing:.1em;
  padding:14px 30px; border-radius:999px; cursor:pointer;
  transition:transform .25s, box-shadow .25s, background .25s, color .25s;
  border:none;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{
  background:linear-gradient(135deg, var(--orange), #ff5722);
  color:#fff; box-shadow:var(--shadow-glow-orange);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 8px 45px rgba(255,122,28,.5); }
.btn-ghost{
  background:rgba(46,107,255,.08); color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn-ghost:hover{
  background:rgba(46,107,255,.18); box-shadow:inset 0 0 0 1px var(--blue), var(--shadow-glow-blue);
  transform:translateY(-3px);
}
/* dentro del hero fotográfico (siempre oscuro) el botón fantasma va en claro */
.hero .btn-ghost{ color:#e8eefb; }

/* ============================================================
   SECCIONES
   ============================================================ */
.section{ padding:96px 0; position:relative; }
.section-alt{ background:linear-gradient(180deg, transparent, rgba(46,107,255,.05) 30%, rgba(46,107,255,.05) 70%, transparent); }

.section-head{ max-width:720px; margin-bottom:54px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:600; font-size:13px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--cyan);
}
.kicker::before{
  content:""; width:26px; height:2px;
  background:linear-gradient(90deg, var(--orange), var(--cyan)); border-radius:2px;
}
.section-head.center .kicker::after{
  content:""; width:26px; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--orange)); border-radius:2px;
}
.section-head h2{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.8rem, 3.6vw, 2.7rem); line-height:1.12; margin-top:12px;
}
.section-head h2 .grad{
  background:linear-gradient(92deg, var(--blue-soft), var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-head p{ color:var(--muted); margin-top:14px; }

/* ---------- barra de stats ---------- */
.stats-bar{
  position:relative; z-index:6; margin-top:-64px;
}
.stats-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  background:rgba(10,20,36,.85); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.stat{
  padding:30px 22px; text-align:center; position:relative;
}
.stat + .stat::before{
  content:""; position:absolute; left:0; top:22%; bottom:22%;
  width:1px; background:var(--line);
}
.stat .num{
  font-family:var(--font-head); font-weight:700; font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  background:linear-gradient(180deg, #fff, var(--blue-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1;
}
.stat .num .accent{ color:var(--orange); -webkit-text-fill-color:var(--orange); }
.stat .label{
  margin-top:8px; color:var(--muted); font-size:13px;
  text-transform:uppercase; letter-spacing:.14em;
}
@media (max-width:820px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3)::before{ display:none; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}

/* ---------- tarjetas de producto ---------- */
.grid-products{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:26px;
}
.card-product{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--panel); border:1px solid var(--line-soft);
  transition:transform .35s, border-color .35s, box-shadow .35s;
  display:flex; flex-direction:column;
}
.card-product:hover{
  transform:translateY(-8px); border-color:var(--line);
  box-shadow:0 24px 50px rgba(0,0,0,.5), var(--shadow-glow-blue);
}
.card-product .thumb{
  position:relative; aspect-ratio:4/3; overflow:hidden;
}
.card-product .thumb img{
  width:100%; height:100%; object-fit:cover; transition:transform .6s ease;
}
.card-product:hover .thumb img{ transform:scale(1.08); }
.card-product .thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(6,11,22,.92));
}
.card-product .thumb .tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--font-head); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
  background:rgba(6,11,22,.72); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px; backdrop-filter:blur(6px);
}
.card-product .body{
  position:relative; padding:20px 22px 24px; margin-top:-46px; z-index:2;
  display:flex; flex-direction:column; gap:8px; flex:1;
}
.card-product h3{
  font-family:var(--font-head); font-weight:700; font-size:1.35rem;
  text-transform:uppercase; letter-spacing:.03em;
}
.card-product p{ color:var(--muted); font-size:14.5px; flex:1; }
.card-product .link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; align-self:flex-start;
  font-family:var(--font-head); font-weight:700; font-size:13.5px;
  text-transform:uppercase; letter-spacing:.12em; color:var(--orange);
  padding:9px 20px; border-radius:999px;
  border:1px solid rgba(255,122,28,.45); background:rgba(255,122,28,.08);
  transition:background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.card-product .link svg{ width:15px; height:15px; flex:none; transition:transform .3s; }
.card-product:hover .link{
  background:linear-gradient(135deg, var(--orange), #ff5722);
  color:#fff; border-color:transparent;
  box-shadow:var(--shadow-glow-orange);
}
.card-product:hover .link svg{ transform:translateX(4px); }
/* esquinas técnicas */
.card-product::before, .card-product::after{
  content:""; position:absolute; width:20px; height:20px; z-index:3;
  border:2px solid var(--orange); opacity:0; transition:opacity .35s;
  pointer-events:none;
}
.card-product::before{ top:10px; left:10px; border-right:none; border-bottom:none; border-radius:4px 0 0 0; }
.card-product::after{ bottom:10px; right:10px; border-left:none; border-top:none; border-radius:0 0 4px 0; }
.card-product:hover::before, .card-product:hover::after{ opacity:1; }

/* ---------- tarjetas de servicio ---------- */
.grid-services{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px;
}
.card-service{
  position:relative; padding:30px 26px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--line-soft);
  overflow:hidden; transition:transform .3s, border-color .3s, background .3s;
}
.card-service:hover{
  transform:translateY(-6px); border-color:var(--line); background:var(--panel-2);
}
.card-service::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--blue), var(--cyan), var(--orange));
  transform:scaleX(0); transform-origin:left; transition:transform .45s;
}
.card-service:hover::before{ transform:scaleX(1); }
.card-service .icon{
  width:56px; height:56px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(46,107,255,.2), rgba(255,122,28,.12));
  border:1px solid var(--line); margin-bottom:18px;
  transition:box-shadow .3s, transform .3s;
}
.card-service:hover .icon{ box-shadow:var(--shadow-glow-orange); transform:scale(1.06); }
.card-service .icon svg{ width:28px; height:28px; stroke:var(--amber); }
.card-service h3{
  font-family:var(--font-head); font-weight:700; font-size:1.25rem;
  text-transform:uppercase; margin-bottom:8px;
}
.card-service p{ color:var(--muted); font-size:14.5px; }

/* ---------- franja marcas ---------- */
.brands{ padding:44px 0; border-block:1px solid var(--line-soft); overflow:hidden; }
.brands-track{
  display:flex; gap:70px; width:max-content; align-items:center;
  animation:marquee 26s linear infinite;
}
.brands:hover .brands-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.brand-item{
  font-family:var(--font-head); font-weight:700; font-size:1.5rem;
  text-transform:uppercase; letter-spacing:.2em; color:rgba(159,176,204,.55);
  display:flex; align-items:center; gap:16px; white-space:nowrap;
  transition:color .3s;
}
.brand-item:hover{ color:var(--text); }
.brand-item::after{
  content:""; width:8px; height:8px; transform:rotate(45deg);
  background:linear-gradient(135deg, var(--blue), var(--orange));
}

/* ---------- bloque quiénes somos ---------- */
.about-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.about-media{ position:relative; }
.about-media .main-img{
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  aspect-ratio:4/3; object-fit:cover; width:100%;
}
.about-media::before{
  content:""; position:absolute; inset:-18px auto auto -18px; width:120px; height:120px;
  border:2px solid var(--orange); border-right:none; border-bottom:none;
  border-radius:12px 0 0 0; opacity:.7;
}
.about-media::after{
  content:""; position:absolute; right:-18px; bottom:-18px; width:120px; height:120px;
  border:2px solid var(--blue); border-left:none; border-top:none;
  border-radius:0 0 12px 0; opacity:.7;
}
.about-badge{
  position:absolute; right:-14px; top:-14px; z-index:2;
  background:linear-gradient(135deg, var(--orange), #ff5722);
  border-radius:12px; padding:14px 20px; text-align:center;
  box-shadow:var(--shadow-glow-orange);
  font-family:var(--font-head); line-height:1.1;
}
.about-badge .big{ font-size:1.9rem; font-weight:700; display:block; }
.about-badge .small{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }

.check-list{ display:grid; gap:12px; margin-top:22px; }
.check-list li{
  display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:15px;
}
.check-list li::before{
  content:"✓"; flex:none; width:22px; height:22px; border-radius:6px;
  display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  margin-top:2px;
}

/* ---------- misión / visión / valores ---------- */
.grid-mvv{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .grid-mvv{ grid-template-columns:1fr; } }
.card-mvv{
  padding:34px 28px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--line-soft);
  position:relative; overflow:hidden; transition:transform .3s, border-color .3s;
}
.card-mvv:hover{ transform:translateY(-6px); border-color:var(--line); }
.card-mvv::after{
  content:""; position:absolute; right:-40px; bottom:-40px; width:140px; height:140px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,122,28,.14), transparent 70%);
}
.card-mvv h3{
  font-family:var(--font-head); font-weight:700; font-size:1.35rem;
  text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:12px;
}
.card-mvv h3 svg{ width:26px; height:26px; stroke:var(--cyan); flex:none; }
.card-mvv p, .card-mvv li{ color:var(--muted); font-size:15px; }
.card-mvv ul{ display:grid; gap:8px; }
.card-mvv ul li{ padding-left:18px; position:relative; }
.card-mvv ul li::before{
  content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  transform:rotate(45deg); background:var(--orange);
}

/* ---------- galería ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px;
}
.gallery a{
  position:relative; border-radius:12px; overflow:hidden; display:block;
  border:1px solid var(--line-soft); aspect-ratio:4/3;
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.gallery a:hover{
  transform:translateY(-5px) scale(1.01); border-color:var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .55s; }
.gallery a:hover img{ transform:scale(1.07); }
.gallery a::after{
  content:"+"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:2.4rem; font-weight:300; color:#fff;
  background:linear-gradient(180deg, rgba(46,107,255,.35), rgba(6,11,22,.55));
  opacity:0; transition:opacity .3s;
}
.gallery a:hover::after{ opacity:1; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:center; justify-content:center;
  background:rgba(4,8,16,.94); backdrop-filter:blur(8px);
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:88vw; max-height:82vh; border-radius:10px;
  border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation:lb-in .3s ease;
}
@keyframes lb-in{ from{ opacity:0; transform:scale(.94); } }
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next{
  position:absolute; background:rgba(148,184,255,.08); color:#fff;
  border:1px solid var(--line); border-radius:50%; width:52px; height:52px;
  font-size:22px; cursor:pointer; display:grid; place-items:center;
  transition:background .25s, box-shadow .25s;
}
.lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover{
  background:rgba(255,122,28,.25); box-shadow:var(--shadow-glow-orange);
}
.lb-close{ top:26px; right:26px; }
.lb-prev{ left:26px; top:50%; transform:translateY(-50%); }
.lb-next{ right:26px; top:50%; transform:translateY(-50%); }
.lb-counter{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--font-head); letter-spacing:.2em; color:var(--muted);
}

/* ---------- página de producto ---------- */
.page-hero{
  position:relative; padding:calc(var(--header-h) + 84px) 0 84px;
  overflow:hidden; isolation:isolate;
  color:#e8eefb; /* fotográfico: se queda oscuro en ambos temas */
}
.page-hero .bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  filter:saturate(.9);
  transform:scale(1.04);
}
.page-hero .overlay{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(5,10,20,.96) 30%, rgba(5,10,20,.72) 65%, rgba(5,10,20,.5)),
             linear-gradient(0deg, var(--bg) 0%, transparent 40%);
}
.breadcrumbs{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-family:var(--font-head); font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:#9fb0cc;
  margin-bottom:22px;
}
.breadcrumbs a:hover{ color:var(--cyan); }
.breadcrumbs .sep{ color:var(--orange); }
.page-hero h1{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.1rem, 4.6vw, 3.4rem); line-height:1.08;
}
.page-hero h1 .grad{
  background:linear-gradient(92deg, var(--blue-soft), var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-hero .tagline{
  color:var(--cyan); font-family:var(--font-head); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; margin-top:10px;
}
.page-hero p.desc{ color:#9fb0cc; max-width:640px; margin-top:16px; font-size:1.05rem; }

.product-layout{
  display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:start;
}
@media (max-width:960px){ .product-layout{ grid-template-columns:1fr; } }
.spec-panel{
  position:sticky; top:calc(var(--header-h) + 24px);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px;
}
.spec-panel h3{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:1.15rem; margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.spec-panel h3::before{
  content:""; width:10px; height:10px; transform:rotate(45deg);
  background:linear-gradient(135deg, var(--blue), var(--orange)); flex:none;
}
.spec-list{ display:grid; gap:10px; margin-bottom:8px; }
.spec-list li{
  display:flex; gap:10px; color:var(--muted); font-size:14.5px;
  padding-bottom:10px; border-bottom:1px dashed var(--line-soft);
}
.spec-list li:last-child{ border-bottom:none; }
.spec-list li::before{
  content:"▸"; color:var(--orange); flex:none;
}
.ficha-list{ display:grid; gap:8px; margin-top:6px; }
.ficha-list a{
  display:flex; align-items:center; gap:10px; font-size:13.5px;
  color:var(--blue-soft); padding:9px 12px; border-radius:8px;
  background:rgba(46,107,255,.07); border:1px solid var(--line-soft);
  transition:background .25s, border-color .25s;
}
.ficha-list a:hover{ background:rgba(46,107,255,.16); border-color:var(--line); }
.ficha-list svg{ width:16px; height:16px; flex:none; stroke:var(--cyan); }
.spec-panel .btn{ width:100%; justify-content:center; margin-top:20px; }

/* descripción detallada del producto (va debajo de la galería) */
.product-desc{ margin-top:60px; }
.product-desc > p{
  color:var(--muted); font-size:15.5px; line-height:1.75; max-width:72ch;
}
.product-desc h3{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.05rem; margin:28px 0 14px;
  display:flex; align-items:center; gap:10px;
}
.product-desc h3::before{
  content:""; width:8px; height:8px; transform:rotate(45deg);
  background:linear-gradient(135deg, var(--blue), var(--orange)); flex:none;
}
.desc-features{ display:grid; gap:10px; max-width:72ch; }
.desc-features li{
  display:flex; gap:10px; align-items:baseline;
  color:var(--muted); font-size:14.5px; line-height:1.65;
  padding:10px 14px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line-soft);
}
.desc-features li::before{ content:"▸"; color:var(--orange); flex:none; }
.desc-features li strong{ color:var(--text); font-weight:600; }
.desc-tech li{ background:transparent; border:none; padding:2px 0; }
.desc-note{
  margin-top:24px; max-width:72ch;
  padding:14px 18px; border-left:3px solid var(--orange);
  background:rgba(255,122,28,.07); border-radius:0 10px 10px 0;
  color:var(--muted); font-size:14px; line-height:1.65;
}

/* navegación entre productos */
.product-nav{
  display:flex; justify-content:space-between; gap:16px; margin-top:64px;
  border-top:1px solid var(--line-soft); padding-top:28px; flex-wrap:wrap;
}
.product-nav a{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:13.5px; color:var(--muted);
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 22px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel);
  transition:color .25s, background .25s, border-color .25s, box-shadow .25s;
}
.product-nav a svg{ width:16px; height:16px; flex:none; }
.product-nav a:hover{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--orange), #ff5722);
  box-shadow:var(--shadow-glow-orange);
}

/* ---------- CTA banda ---------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(46,107,255,.25), transparent 60%),
    radial-gradient(500px 300px at 90% 80%, rgba(255,122,28,.22), transparent 60%),
    var(--bg-3);
  padding:64px 48px; text-align:center;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(120,170,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,.06) 1px, transparent 1px);
  background-size:42px 42px; pointer-events:none;
}
.cta-band h2{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem); position:relative;
}
.cta-band p{ color:var(--muted); margin:14px auto 30px; max-width:560px; position:relative; }
.cta-band .actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ---------- contacto ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-cards{ display:grid; gap:16px; }
.contact-card{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:22px 24px;
  transition:border-color .3s, transform .3s;
}
.contact-card:hover{ border-color:var(--line); transform:translateX(6px); }
.contact-card .icon{
  flex:none; width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(46,107,255,.22), rgba(255,122,28,.14));
  border:1px solid var(--line);
}
.contact-card .icon svg{ width:22px; height:22px; stroke:var(--amber); }
.contact-card h3{
  font-family:var(--font-head); text-transform:uppercase; font-size:1.05rem; margin-bottom:4px;
}
.contact-card p, .contact-card a{ color:var(--muted); font-size:14.5px; }
.contact-card a:hover{ color:var(--cyan); }

.contact-form{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px;
}
.contact-form h3{
  font-family:var(--font-head); text-transform:uppercase; font-size:1.4rem; margin-bottom:6px;
}
.contact-form .hint{ color:var(--muted); font-size:14px; margin-bottom:22px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:var(--font-head); font-weight:600; font-size:13px;
  text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:7px;
}
.field input, .field textarea, .field select{
  width:100%; background:rgba(6,11,22,.6); border:1px solid var(--line-soft);
  border-radius:10px; color:var(--text); padding:13px 15px; font-family:var(--font-body);
  font-size:15px; transition:border-color .25s, box-shadow .25s; outline:none;
}
.field select option{ background:var(--bg-2); }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,107,255,.18);
}
.field textarea{ min-height:120px; resize:vertical; }

.map-wrap{
  margin-top:60px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); filter:grayscale(.35) contrast(1.05);
}
.map-wrap iframe{ display:block; width:100%; height:380px; border:0; }

/* ---------- footer ---------- */
.site-footer{
  margin-top:40px; border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, transparent, rgba(10,20,36,.75));
  position:relative; overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--orange), transparent);
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; padding:64px 0 44px;
}
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:1rem; margin-bottom:18px; color:var(--text);
}
.footer-grid p, .footer-grid a, .footer-grid li{ color:var(--muted); font-size:14.5px; }
.footer-grid ul{ display:grid; gap:10px; }
.footer-grid a:hover{ color:var(--orange); }
.footer-brand .brand-logo{ display:inline-block; margin-bottom:16px; }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact svg{ width:17px; height:17px; stroke:var(--cyan); flex:none; margin-top:3px; }
.footer-bottom{
  border-top:1px solid var(--line-soft); padding:20px 0;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color:var(--muted); font-size:13px;
}

/* ---------- botón whatsapp flotante ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:300;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg, #2fd267, #1faa50);
  display:grid; place-items:center;
  box-shadow:0 8px 30px rgba(47,210,103,.4);
  transition:transform .3s, box-shadow .3s;
}
.wa-float:hover{ transform:scale(1.1) translateY(-3px); box-shadow:0 12px 40px rgba(47,210,103,.55); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }
.wa-float::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(47,210,103,.5); animation:wa-pulse 2s infinite;
}
@keyframes wa-pulse{
  from{ transform:scale(.9); opacity:1; } to{ transform:scale(1.35); opacity:0; }
}
@media (max-width:820px){
  .wa-float{ right:30px; bottom:16px; }
}

/* ---------- animaciones reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.visible{ opacity:1; transform:none; }
.reveal-left{ opacity:0; transform:translateX(-40px); transition:opacity .8s, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal-right{ opacity:0; transform:translateX(40px); transition:opacity .8s, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal-left.visible, .reveal-right.visible{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.12s; } [data-delay="2"]{ transition-delay:.24s; }
[data-delay="3"]{ transition-delay:.36s; } [data-delay="4"]{ transition-delay:.48s; }
[data-delay="5"]{ transition-delay:.60s; } [data-delay="6"]{ transition-delay:.72s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .hero-slide.active{ animation:none; }
}

/* ============================================================
   TEMA CLARO  (activado con data-theme="light" en <html>)
   Los héroes fotográficos (.hero, .page-hero) permanecen oscuros.
   ============================================================ */
:root[data-theme="light"]{
  --bg:        #f4f7fc;
  --bg-2:      #e9eef7;
  --bg-3:      #e2eaf6;
  --panel:     rgba(25, 70, 160, .05);
  --panel-2:   rgba(25, 70, 160, .09);
  --line:      rgba(25, 70, 160, .22);
  --line-soft: rgba(25, 70, 160, .12);
  --text:      #14233d;
  --muted:     #4c5d7c;
  --shadow-glow-blue:   0 0 30px rgba(46,107,255,.18);
  --shadow-glow-orange: 0 0 30px rgba(255,122,28,.22);
}
:root[data-theme="light"] .tech-bg{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(46,107,255,.10), transparent 60%),
    radial-gradient(700px 500px at -10% 40%, rgba(255,122,28,.06), transparent 60%),
    var(--bg);
}
:root[data-theme="light"] .tech-bg::after{
  background-image:
    linear-gradient(rgba(25,70,160,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,70,160,.06) 1px, transparent 1px);
}
:root[data-theme="light"] .site-header.scrolled::before{
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 30px rgba(20,40,80,.12);
}
@media (max-width:1020px){
  :root[data-theme="light"] .main-nav{ background:rgba(246,249,253,.97); }
}
/* logo en tema claro: a color cuando el fondo es claro (header con scroll,
   footer); gris mientras el header flota sobre el hero oscuro */
:root[data-theme="light"] .site-header.scrolled .logo-gris{ display:none; }
:root[data-theme="light"] .site-header.scrolled .logo-color{ display:block; }
:root[data-theme="light"] .site-footer .logo-gris{ display:none; }
:root[data-theme="light"] .site-footer .logo-color{ display:block; }
:root[data-theme="light"] .kicker{ color:#0d6fbe; }
:root[data-theme="light"] .stats-grid{
  background:rgba(255,255,255,.92);
  box-shadow:0 20px 60px rgba(20,40,80,.14);
}
:root[data-theme="light"] .stat .num{
  background:linear-gradient(180deg, #1a2b4d, var(--blue));
  -webkit-background-clip:text; background-clip:text;
}
:root[data-theme="light"] .card-product .thumb::after{
  background:linear-gradient(180deg, transparent 45%, rgba(255,255,255,.96));
}
:root[data-theme="light"] .card-product .thumb .tag{
  background:rgba(255,255,255,.8); color:#0d6fbe;
}
:root[data-theme="light"] .card-product{ background:#fff; }
:root[data-theme="light"] .card-product:hover{
  box-shadow:0 24px 50px rgba(20,40,80,.18), var(--shadow-glow-blue);
}
:root[data-theme="light"] .card-service,
:root[data-theme="light"] .card-mvv,
:root[data-theme="light"] .contact-card,
:root[data-theme="light"] .contact-form,
:root[data-theme="light"] .spec-panel{ background:#fff; }
:root[data-theme="light"] .desc-features li{ background:#fff; }
:root[data-theme="light"] .desc-tech li{ background:transparent; }
:root[data-theme="light"] .brand-item{ color:rgba(60,84,120,.55); }
:root[data-theme="light"] .brand-item:hover{ color:var(--text); }
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select{ background:#fff; }
:root[data-theme="light"] .field select option{ background:#fff; }
:root[data-theme="light"] .site-footer{
  background:linear-gradient(180deg, transparent, rgba(219,229,244,.85));
}
:root[data-theme="light"] .gallery a::after{
  background:linear-gradient(180deg, rgba(46,107,255,.35), rgba(20,40,80,.5));
}
:root[data-theme="light"] .cta-band{
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(46,107,255,.16), transparent 60%),
    radial-gradient(500px 300px at 90% 80%, rgba(255,122,28,.14), transparent 60%),
    #fff;
}
:root[data-theme="light"] ::-webkit-scrollbar-track{ background:var(--bg-2); }
/* header sin scroll: flota sobre el hero oscuro, los enlaces deben ir en claro */
@media (min-width:1021px){
  :root[data-theme="light"] .site-header:not(.scrolled) .main-nav a{ color:#b9c6dd; }
  :root[data-theme="light"] .site-header:not(.scrolled) .main-nav a:hover,
  :root[data-theme="light"] .site-header:not(.scrolled) .main-nav a.active{ color:#fff; }
}
:root[data-theme="light"] .site-header:not(.scrolled) .nav-toggle span{ background:#e8eefb; }
:root[data-theme="light"] .site-header:not(.scrolled) .theme-switch{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3);
}