/* ============================================================
   CRONOSTEC CHILE — conversión fiel de cronostec-elevate-main
   (React + Tailwind) a HTML/CSS/JS plano.
   Fuente: C:\xampp\htdocs\cronostec-data\prototipos\cronostec-elevate-main
   Mapeo:  C:\xampp\htdocs\cronostec-data\mapeos\cronostec-chile.txt
   ============================================================ */

/* ---------- Variables / tokens ---------- */
:root{
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  --background: #ffffff;
  --foreground: #1f2430;
  --muted-foreground: #94a1b8;
  --border: #e7ebf1;

  --brand: #0040A8;
  --brand-deep: #003B96;
  --brand-ink: #142046;
  --danger: #E60012;
  --danger-deep: #DF0000;
  --industrial: #FFC700;
  --whatsapp: #0040A8;
  --steel: #1F2937;
  --steel-soft: #F7F8FA;

  --gradient-brand: linear-gradient(135deg, var(--brand), var(--brand-deep));
  --gradient-brand-deep: linear-gradient(140deg, #29407a 0%, var(--brand-deep) 55%, var(--brand-ink) 100%);
  --gradient-danger: linear-gradient(135deg, var(--danger), var(--danger-deep));
  --gradient-title: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 45%, var(--danger) 100%);
  --gradient-title-light: linear-gradient(100deg, #ffffff 0%, #b9c9ec 45%, #ff8a8a 100%);

  --shadow-card: 0 2px 6px rgba(20,32,70,0.06), 0 14px 30px -18px rgba(20,32,70,0.28);
  --shadow-lift: 0 8px 20px rgba(20,32,70,0.12), 0 34px 60px -28px rgba(20,32,70,0.45);
  --shadow-cta: 0 10px 26px -8px rgba(230,0,18,0.55);

  --font-display: "Montserrat", sans-serif;
  --font-sans: "Montserrat", system-ui, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height:1.5;
}
h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ cursor:pointer; font-family:inherit; border:none; background:none; }
ul{ list-style:none; }

.container{ max-width:1280px; margin:0 auto; padding:0 1.5rem; }

/* ---------- Utilidades del sistema ---------- */
.grad-brand{ background-image: var(--gradient-brand); }
.grad-brand-deep{ background-image: var(--gradient-brand-deep); }
.grad-danger{ background-image: var(--gradient-danger); }
.text-gradient{
  background-image: var(--gradient-title);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-light{
  background-image: var(--gradient-title-light);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shadow-card{ box-shadow: var(--shadow-card); }
.shadow-lift{ box-shadow: var(--shadow-lift); }
.shadow-cta{ box-shadow: var(--shadow-cta); }

.grid-lines{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 68px 68px;
}
.diag-stripes{
  background-image: repeating-linear-gradient(-45deg, rgba(255,199,0,.9) 0 10px, transparent 10px 20px);
}
.card-hover{
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .45s ease;
}
.card-hover:hover{ transform: translateY(-7px); box-shadow: var(--shadow-lift); }

.zoom-media{ transition: transform .7s cubic-bezier(.22,1,.36,1); }
.group:hover .zoom-media{ transform: scale(1.06); }

.arrow-slide{ transition: transform .35s cubic-bezier(.22,1,.36,1); }
.group:hover .arrow-slide{ transform: translateX(5px); }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:999px; padding:.4rem .9rem;
  font-family: var(--font-sans); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.badge--brand{ background:rgba(0,64,168,.1); color:var(--brand); box-shadow: inset 0 0 0 1px rgba(0,64,168,.2); }
.badge--danger{ background-image: var(--gradient-danger); color:#fff; box-shadow: var(--shadow-cta); }
.badge--light{ background:rgba(255,255,255,.1); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.badge--industrial{ background: var(--industrial); color: var(--steel); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

/* Section title */
.section-title{ max-width:48rem; }
.section-title.center{ margin:0 auto; text-align:center; }
.section-title h2{
  margin-top:1.25rem; font-size:2.5rem; line-height:0.95; font-weight:800;
  letter-spacing:-0.01em; color: var(--steel);
}
.section-title.light h2{ color:#fff; }
.section-title h2.text-gradient{ color: transparent; }
.section-title p{
  margin-top:1.25rem; font-size:1rem; line-height:1.65; color: var(--muted-foreground);
}
.section-title.light p{ color: rgba(255,255,255,.7); }
@media (min-width:640px){ .section-title h2{ font-size:3rem; } }
@media (min-width:1024px){ .section-title h2{ font-size:3.75rem; } }

/* Reveal on scroll */
.reveal{
  opacity:0; transform:translateY(26px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* CTA buttons */
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  border-radius: var(--radius); padding:.85rem 1.5rem;
  font-family: var(--font-sans); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  transition: all .3s ease;
}
.cta-btn:active{ transform: translateY(0); }
.cta-btn--danger{ background-image: var(--gradient-danger); color:#fff; box-shadow: var(--shadow-cta); }
.cta-btn--danger:hover{ transform: translateY(-2px); filter:brightness(1.1); }
.cta-btn--brand{ background-image: var(--gradient-brand); color:#fff; box-shadow: var(--shadow-card); }
.cta-btn--brand:hover{ transform: translateY(-2px); filter:brightness(1.1); }
.cta-btn--outline{ border:1px solid rgba(0,64,168,.25); background:#fff; color:var(--brand); box-shadow: var(--shadow-card); }
.cta-btn--outline:hover{ transform: translateY(-2px); border-color:var(--brand); background:var(--brand); color:#fff; }
.cta-btn--ghost-light{ border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.05); color:#fff; backdrop-filter: blur(4px); }
.cta-btn--ghost-light:hover{ transform: translateY(-2px); border-color:#fff; background:rgba(255,255,255,.15); }

/* ---------- Keyframes ---------- */
@keyframes reveal-up{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:translateY(0);} }
@keyframes float-soft{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@keyframes pulse-ring{
  0%{ box-shadow:0 0 0 0 rgba(0,64,168,.55); }
  70%{ box-shadow:0 0 0 18px rgba(0,64,168,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,64,168,0); }
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.float-soft{ animation: float-soft 6s ease-in-out infinite; }
.marquee-track{ animation: marquee 32s linear infinite; }
.marquee-track:hover{ animation-play-state: paused; }

/* ============================================================
   1. HEADER
   ============================================================ */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; }

.topbar{
  display:none; overflow:hidden; background: var(--brand-ink); color:rgba(255,255,255,.8);
  transition: max-height .5s ease, opacity .5s ease;
  max-height:3rem; opacity:1;
}
.topbar.is-hidden{ max-height:0; opacity:0; }
.topbar-inner{
  margin:0 auto; max-width:1280px; padding:.65rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.topbar-tag{ display:flex; align-items:center; gap:.5rem; }
.topbar-dot{ width:.375rem; height:.375rem; border-radius:999px; background: var(--industrial); }
.topbar-links{ display:flex; align-items:center; gap:1.75rem; }
.topbar-links a{ display:flex; align-items:center; gap:.5rem; transition:color .2s; }
.topbar-links a:hover{ color:#fff; }
@media (min-width:1024px){ .topbar{ display:block; } }

.header-bar{ border-bottom:1px solid transparent; transition: all .5s ease; }
.header-bar.scrolled{ border-color: rgba(231,235,241,.7); background: rgba(255,255,255,.92); box-shadow: var(--shadow-card); backdrop-filter: blur(20px); }
.header-inner{
  margin:0 auto; max-width:1280px; padding:.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

.brand-mark{ display:flex; align-items:center; gap:.75rem; }
.brand-mark-box{
  display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius: var(--radius-md);
  background-image: var(--gradient-brand); box-shadow: var(--shadow-card);
}
.brand-mark-box span{ font-family: var(--font-display); font-size:1.25rem; font-weight:700; color:#fff; }
.brand-name{ display:block; font-family: var(--font-display); font-size:1.5rem; font-weight:700; text-transform:uppercase; letter-spacing:-0.01em; color:#fff; transition:color .3s; }
.header-bar.scrolled .brand-name{ color: var(--steel); }
.brand-name .accent{ color: var(--danger); }
.brand-sub{ display:block; margin-top:.15rem; font-size:.62rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color: rgba(255,255,255,.6); transition:color .3s; }
.header-bar.scrolled .brand-sub{ color: var(--muted-foreground); }

.main-nav{ display:none; align-items:center; gap:.25rem; }
.main-nav a{
  position:relative; padding:.5rem .9rem; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.85); transition:color .2s;
}
.header-bar.scrolled .main-nav a{ color: var(--steel); }
.main-nav a::after{
  content:''; position:absolute; left:.9rem; bottom:2px; height:2px;
  width:calc(100% - 1.8rem); background: var(--danger);
  transform: scaleX(0); transform-origin:right; transition: transform .3s;
}
.main-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.main-nav a:hover{ color:#fff; }
.header-bar.scrolled .main-nav a:hover{ color: var(--brand); }
@media (min-width:1024px){ .main-nav{ display:flex; } }

.header-cta{ display:none; }
@media (min-width:1024px){ .header-cta{ display:block; } }

.hamburger{
  display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius: var(--radius-md);
  border:1px solid rgba(255,255,255,.25); color:#fff;
}
.header-bar.scrolled .hamburger{ border-color: var(--border); color: var(--steel); }
@media (min-width:1024px){ .hamburger{ display:none; } }

.mobile-drawer{
  overflow:hidden; background: var(--brand-ink); max-height:0; opacity:0;
  transition: max-height .5s ease, opacity .5s ease;
}
.mobile-drawer.is-open{ max-height:28rem; opacity:1; }
.mobile-nav{ display:flex; flex-direction:column; gap:.25rem; padding:1.25rem 1.5rem; }
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.1); padding:.9rem 0;
  font-size:.85rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.85);
}
.mobile-nav .cta-btn{ margin-top:1.25rem; width:100%; }
@media (min-width:1024px){ .mobile-drawer{ display:none; } }

/* ============================================================
   2. HERO
   ============================================================ */
.hero{
  position:relative; isolation:isolate; min-height:92vh; overflow:hidden;
  background: var(--brand-ink); padding-top:7rem;
}
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(105deg, rgba(20,32,70,.96) 0%, rgba(0,59,150,.86) 45%, rgba(15,24,55,.55) 100%); }
.hero-glow{ position:absolute; top:-6rem; right:-6rem; width:34rem; height:34rem; border-radius:50%; background: radial-gradient(circle, rgba(230,0,18,.28), transparent 65%); filter: blur(40px); }

.hero-content{ position:relative; margin:0 auto; max-width:1280px; padding:2.5rem 1.5rem 4rem; display:flex; flex-direction:column; justify-content:center; }
.hero-text{ max-width:48rem; }
.hero-text h1{
  margin-top:1.75rem; font-size:3.25rem; line-height:0.88; font-weight:800;
  color:#fff;
}
.hero-text p{ margin-top:1.75rem; max-width:36rem; font-size:1rem; line-height:1.65; color: rgba(255,255,255,.75); }
.hero-actions{ margin-top:2.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.hero-trust{ margin-top:3rem; display:flex; flex-wrap:wrap; gap:2rem 2rem; }
.hero-trust li{ display:flex; align-items:center; gap:.6rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.7); }
.hero-trust svg{ color: var(--industrial); flex-shrink:0; }

.hero-explore{ margin-top:3.5rem; display:none; align-items:center; gap:.75rem; font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color: rgba(255,255,255,.5); }
.hero-explore:hover{ color:#fff; }
@media (min-width:1024px){ .hero-explore{ display:inline-flex; } }

@media (min-width:640px){ .hero-text h1{ font-size:4.5rem; } }
@media (min-width:1024px){
  .hero{ min-height:100vh; }
  .hero-content{ min-height: calc(100vh - 7rem); padding-bottom:6rem; }
  .hero-text h1{ font-size:6.2rem; }
}

/* ============================================================
   3. CATEGORÍAS
   ============================================================ */
.categorias{ background:#fff; padding:6rem 0; }
.categorias-head{ display:flex; flex-direction:column; gap:2rem; }
.categorias-link{ display:inline-flex; align-items:center; gap:.75rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color: var(--brand); }
.categorias-link-icon{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius: var(--radius-md); background-image: var(--gradient-brand); color:#fff; box-shadow: var(--shadow-card); transition: transform .3s; }
.categorias-link:hover .categorias-link-icon{ transform: translateX(4px); }

.cat-grid{ margin-top:3.5rem; display:grid; gap:1.25rem; grid-template-columns: 1fr; }
.cat-card{ position:relative; display:block; min-height:15rem; overflow:hidden; border-radius: var(--radius-xl); border:1px solid rgba(231,235,241,.7); background-image: var(--gradient-brand-deep); }
.cat-card.tall{ min-height:22rem; }
.cat-card-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:luminosity; opacity:.9; }
.cat-card-overlay{ position:absolute; inset:0; background: linear-gradient(to top, rgba(20,32,70,.95) 0%, rgba(0,59,150,.55) 45%, transparent 85%); transition: opacity .5s; }
.cat-card:hover .cat-card-overlay{ opacity:.9; }
.cat-card-topline{ position:absolute; inset:0 0 auto 0; height:4px; background-image: var(--gradient-danger); opacity:0; transition: opacity .5s; }
.cat-card:hover .cat-card-topline{ opacity:1; }
.cat-card-badge{ position:absolute; top:1.25rem; left:1.25rem; }
.cat-card-bottom{ position:absolute; inset:auto 0 0 0; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:1.5rem; }
.cat-card-bottom h3{ font-size:1.5rem; font-weight:800; color:#fff; }
.cat-card.tall .cat-card-bottom h3{ font-size:2rem; }
.cat-card-bottom p{ margin-top:.5rem; max-width:20rem; font-size:.85rem; line-height:1.6; color: rgba(255,255,255,.7); }
.cat-card-arrow{ display:grid; place-items:center; flex-shrink:0; width:2.75rem; height:2.75rem; border-radius: var(--radius-md); border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color:#fff; backdrop-filter: blur(4px); transition: all .3s; }
.cat-card:hover .cat-card-arrow{ background-image: var(--gradient-danger); border-color: transparent; }

@media (min-width:640px){ .cat-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){
  .categorias-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
  .cat-grid{ grid-template-columns: repeat(12,1fr); }
  .cat-card.span-7{ grid-column: span 7; grid-row: span 2; }
  .cat-card.span-5{ grid-column: span 5; }
  .cat-card.span-4{ grid-column: span 4; }
}

/* ============================================================
   4. PRODUCTOS
   ============================================================ */
.productos{ position:relative; overflow:hidden; background: var(--steel-soft); padding:6rem 0; }
.productos-head{ display:flex; flex-direction:column; gap:2.5rem; }
.productos-nav{ display:flex; gap:.75rem; }
.productos-nav button{
  display:grid; place-items:center; width:3rem; height:3rem; border-radius: var(--radius-md);
  border:1px solid var(--border); background:#fff; color: var(--steel); box-shadow: var(--shadow-card);
  transition: all .3s;
}
.productos-nav button:hover{ transform: translateY(-2px); color:#fff; border-color:transparent; background-image: var(--gradient-danger); }

.productos .section-title h2{ font-size:1.75rem; }
.productos .section-title p{ font-size:.85rem; }
@media (min-width:640px){ .productos .section-title h2{ font-size:2.1rem; } }
@media (min-width:1024px){ .productos .section-title h2{ font-size:2.4rem; } }

.prod-track-wrap{ margin-top:3.5rem; overflow:hidden; }
.prod-track{ display:flex; gap:1.5rem; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.prod-card{ position:relative; flex:0 0 82%; overflow:hidden; border-radius: var(--radius-xl); border:1px solid rgba(231,235,241,.7); background:#fff; box-shadow: var(--shadow-card); transition: background-color .35s ease; }
.prod-card:hover{ background-color: var(--brand); }
.prod-card-media{ position:relative; z-index:1; aspect-ratio: 4/3.4; overflow:hidden; background: linear-gradient(160deg,#f7f8fa,#eceff3); }
.prod-card-media img{ position:absolute; inset:0; width:100%; object-fit:contain; mix-blend-mode:multiply; }
.prod-card-badge{ position:absolute; top:1rem; left:1rem; }
.prod-card-body{ position:relative; z-index:1; border-top:1px solid rgba(231,235,241,.7); padding:1.5rem; }
.prod-card:hover .prod-card-body{ border-top-color: transparent; }
.prod-card-body h3{ font-size:1.1rem; line-height:1.05; font-weight:800; color: var(--steel); transition: color .35s ease; }
.prod-card:hover .prod-card-body h3{ color:#fff; }
.prod-specs{ margin-top:.75rem; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.prod-specs div{ border-radius: var(--radius-md); background: var(--steel-soft); padding:.4rem .55rem; transition: background .35s ease; }
.prod-card:hover .prod-specs div{ background: rgba(255,255,255,.15); }
.prod-specs dt{ font-size:.55rem; line-height:1; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--muted-foreground); transition: color .35s ease; }
.prod-card:hover .prod-specs dt{ color: rgba(255,255,255,.75); }
.prod-specs dd{ margin-top:.15rem; font-family: var(--font-display); font-size:.85rem; line-height:1; font-weight:700; color: var(--brand); transition: color .35s ease; }
.prod-card:hover .prod-specs dd{ color:#fff; }
.prod-card-link{ margin-top:.9rem; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(231,235,241,.7); padding-top:.75rem; font-size:.62rem; line-height:1; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--brand); transition: color .35s ease, border-color .35s ease; }
.prod-card:hover .prod-card-link{ color:#fff; border-top-color: rgba(255,255,255,.25); }

.prod-dots{ margin-top:2.5rem; display:flex; justify-content:center; gap:.5rem; }
.prod-dots button{ height:6px; width:1rem; border-radius:999px; background: var(--border); transition: all .3s; }
.prod-dots button.active{ width:2.25rem; background-image: var(--gradient-danger); }

@media (min-width:640px){ .prod-card{ flex-basis:46%; } }
@media (min-width:1024px){
  .productos-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
  .prod-card{ flex-basis: calc(25% - 1.125rem); }
}

/* ============================================================
   5. SERVICIOS
   ============================================================ */
.servicios{ position:relative; overflow:hidden; background: var(--brand-ink); padding:6rem 0; }

.servicios-controls{ margin-top:2.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.servicios-nav{ display:flex; gap:.75rem; }
.servicios-nav button{
  display:grid; place-items:center; width:3rem; height:3rem; border-radius: var(--radius-md);
  border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color:#fff;
  transition: all .3s;
}
.servicios-nav button:hover{ transform: translateY(-2px); border-color: transparent; color:#fff; background-image: var(--gradient-danger); }

.svc-track-wrap{ margin-top:3.5rem; overflow:hidden; }
.svc-track{ display:flex; gap:1.5rem; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.svc-card{ position:relative; flex:0 0 82%; height:auto; overflow:hidden; border-radius: var(--radius-xl); border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); backdrop-filter: blur(4px); }
.svc-media{ position:relative; height:14rem; overflow:hidden; }
.svc-media img{ width:100%; height:100%; object-fit:cover; }
.svc-media-overlay{ position:absolute; inset:0; background: linear-gradient(to top, var(--brand-ink) 5%, rgba(0,59,150,.35) 60%, transparent); }
.svc-badge{ position:absolute; top:1.25rem; left:1.25rem; }
.svc-body{ position:relative; padding:1.75rem; }
.svc-body h3{ font-size:1.5rem; line-height:1.15; font-weight:800; color:#fff; }
.svc-body p{ margin-top:.75rem; font-size:.85rem; line-height:1.6; color: rgba(255,255,255,.65); }
.svc-link{ margin-top:1.5rem; display:inline-flex; align-items:center; gap:.75rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; }
.svc-link span{ display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius: var(--radius-md); border:1px solid rgba(255,255,255,.25); transition: all .3s; }
.svc-card:hover .svc-link span{ background-image: var(--gradient-danger); border-color: transparent; }

.svc-dots{ display:flex; align-items:center; gap:.5rem; }
.svc-dots button{ height:6px; width:1rem; border-radius:999px; background: rgba(255,255,255,.25); transition: all .3s; }
.svc-dots button.active{ width:2.25rem; background-image: var(--gradient-danger); }

@media (min-width:640px){ .svc-card{ flex-basis:46%; } }
@media (min-width:1024px){ .svc-card{ flex-basis:31.4%; } }

/* ============================================================
   6. INSTITUCIONAL / EMPRESA
   ============================================================ */
.institucional{ background:#fff; padding:6rem 0; }
.inst-grid{ display:grid; gap:3.5rem; align-items:center; }
.inst-media{ position:relative; }
.inst-media-main{ position:relative; overflow:hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); }
.inst-media-main img{ aspect-ratio:4/3; width:100%; object-fit:cover; }
.inst-media-main-tint{ position:absolute; inset:0; background: linear-gradient(140deg, rgba(0,59,150,.35), transparent 60%); }
.inst-media-float{ position:absolute; right:-1rem; bottom:-3rem; width:13rem; overflow:hidden; border-radius: var(--radius-xl); border:4px solid #fff; box-shadow: var(--shadow-lift); }
.inst-media-float img{ aspect-ratio:1/1; width:100%; object-fit:cover; }
.inst-chip{ position:absolute; left:1rem; bottom:-2.5rem; border-radius: var(--radius-xl); background-image: var(--gradient-brand); padding:1.25rem 1.5rem; box-shadow: var(--shadow-lift); }
.inst-chip .num{ font-family: var(--font-display); font-size:2.25rem; font-weight:700; color:#fff; }
.inst-chip .num span{ color: var(--industrial); }
.inst-chip p{ margin-top:.25rem; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.75); }

.inst-content h2{ margin-top:1.25rem; font-size:1.75rem; line-height:.95; font-weight:700; text-transform:uppercase; color: var(--steel); }
.inst-content h2.text-gradient{ color: transparent; }
.inst-content p.lead{ margin-top:1.5rem; font-size:.85rem; line-height:1.7; color: var(--muted-foreground); }
@media (min-width:640px){ .inst-content h2{ font-size:2.1rem; } }
.inst-points{ margin-top:2.25rem; display:flex; flex-direction:column; gap:.9rem; }
.inst-point{ display:flex; align-items:flex-start; gap:1rem; border-radius: var(--radius-lg); border:1px solid rgba(231,235,241,.7); background:#fff; padding:1rem; box-shadow: var(--shadow-card); transition: all .3s; }
.inst-point:hover{ transform: translateY(-2px); border-color: rgba(0,64,168,.3); }
.inst-point .check{ display:grid; place-items:center; flex-shrink:0; margin-top:.15rem; width:1.5rem; height:1.5rem; border-radius:6px; background-image: var(--gradient-brand); color:#fff; }
.inst-point span{ font-size:.85rem; line-height:1.6; font-weight:500; color: var(--steel); }
.inst-actions{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1rem; }

@media (min-width:1024px){
  .inst-grid{ grid-template-columns: 1fr 1fr; gap:5rem; }
  .inst-content h2{ font-size:2.4rem; }
}

/* ============================================================
   7. BANDA INDUSTRIAL
   ============================================================ */
.banda{ position:relative; isolation:isolate; overflow:hidden; padding:6rem 0; }
.banda-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banda-overlay{ position:absolute; inset:0; background: linear-gradient(100deg, rgba(20,32,70,.97) 10%, rgba(0,50,130,.92) 55%, rgba(60,30,110,.88) 100%); }
.banda-grid{ position:relative; display:grid; gap:3rem; align-items:center; }
.banda-content h2{ margin-top:1.25rem; font-size:2.5rem; line-height:.95; font-weight:800; color:#fff; }
.banda-content p{ margin-top:1.5rem; max-width:32rem; font-size:1rem; line-height:1.7; color: rgba(255,255,255,.7); }
.banda-content .cta-btn{ margin-top:2.25rem; }

.banda-diff{ display:grid; gap:1rem; }
.diff-card{ height:100%; border-radius: var(--radius-xl); border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); padding:1.5rem; backdrop-filter: blur(6px); transition: all .3s; }
.diff-card:hover{ transform: translateY(-7px); }
.diff-icon{ display:grid; place-items:center; width:3rem; height:3rem; border-radius: var(--radius-md); background-image: var(--gradient-danger); color:#fff; box-shadow: var(--shadow-cta); }
.diff-card h3{ margin-top:1.25rem; font-size:1.5rem; font-weight:800; color:#fff; }
.diff-card p{ margin-top:.5rem; font-size:.85rem; line-height:1.6; color: rgba(255,255,255,.6); }

@media (min-width:640px){ .banda-diff{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .banda-grid{ grid-template-columns: 1fr 1.1fr; } }

/* ============================================================
   8. MARCAS
   ============================================================ */
.marcas{ position:relative; overflow:hidden; background: var(--steel-soft); padding:6rem 0 5rem; }
.marcas-grid{ margin-top:3.5rem; display:grid; gap:1.25rem; }
.marca-card{ position:relative; height:100%; overflow:hidden; border-radius: var(--radius-xl); border:1px solid rgba(231,235,241,.7); background:#fff; padding:1.75rem; box-shadow: var(--shadow-card); }
.marca-card-topline{ position:absolute; inset:0 0 auto 0; height:4px; background-image: var(--gradient-brand); transform: scaleX(0); transition: transform .5s; }
.marca-card:hover .marca-card-topline{ transform: scaleX(1); }
.marca-card span.name{ font-family: var(--font-display); font-size:1.75rem; font-weight:700; text-transform:uppercase; color: var(--steel); transition:color .3s; }
.marca-card:hover span.name{ color: var(--brand); }
.marca-card p{ margin-top:.5rem; font-size:.85rem; color: var(--muted-foreground); }

.marquee{ margin-top:4rem; overflow:hidden; border-top:1px solid rgba(231,235,241,.7); border-bottom:1px solid rgba(231,235,241,.7); background:#fff; padding:1.25rem 0; }
.marquee-track{ display:flex; width:max-content; gap:3.5rem; padding-right:3.5rem; }
.marquee-track span{ font-family: var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:.14em; white-space:nowrap; text-transform:uppercase; color: rgba(148,161,184,.6); }
.marquee-track span em{ margin-left:3.5rem; font-style:normal; color: var(--danger); }

@media (min-width:640px){ .marcas-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .marcas-grid{ grid-template-columns: repeat(3,1fr); } }

/* ============================================================
   9. COTIZACIÓN
   ============================================================ */
.cotizacion{ position:relative; overflow:hidden; background:#fff; padding:6rem 0; }
.cotizacion-grid{ display:grid; gap:2rem; }
.cotiz-panel{ position:relative; overflow:hidden; border-radius: var(--radius-2xl); background-image: var(--gradient-brand-deep); padding:2.25rem; box-shadow: var(--shadow-lift); }
.cotiz-panel h2{ margin-top:1.5rem; font-size:2.25rem; line-height:.95; font-weight:800; color:#fff; }
.cotiz-panel > .inner > p{ margin-top:1.25rem; max-width:28rem; font-size:.9rem; line-height:1.7; color: rgba(255,255,255,.7); }
.cotiz-contact{ margin-top:2.5rem; display:flex; flex-direction:column; gap:.75rem; }
.cotiz-contact a{ display:flex; align-items:center; gap:1rem; border-radius: var(--radius-lg); border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding:1rem; transition: all .3s; }
.cotiz-contact a:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); }
.cotiz-contact-icon{ display:grid; place-items:center; flex-shrink:0; width:2.5rem; height:2.5rem; border-radius: var(--radius-md); background: rgba(255,255,255,.12); color:#fff; }
.cotiz-contact-label{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.5); }
.cotiz-contact-value{ display:block; margin-top:.15rem; font-size:.9rem; font-weight:600; color:#fff; }

.cotiz-form{ height:100%; border-radius: var(--radius-2xl); border:1px solid rgba(231,235,241,.7); background:#fff; padding:2rem; box-shadow: var(--shadow-lift); }
.cotiz-form .eyebrow{ font-size:.62rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color: var(--muted-foreground); }
.cotiz-form h3{ margin-top:.75rem; font-size:1.75rem; font-weight:800; color: var(--steel); }
.form-grid{ margin-top:1.75rem; display:grid; gap:1rem; }
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; border-radius: var(--radius-md); border:1px solid var(--border); background:#fff;
  padding:.85rem 1rem; font-size:.85rem; color: var(--steel); font-family: var(--font-sans);
  outline:none; transition: all .3s;
}
.form-grid textarea{ resize:none; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,64,168,.12); }
.form-grid .full{ grid-column: 1 / -1; }
.cotiz-form button[type="submit"]{
  margin-top:1.5rem; display:flex; width:100%; align-items:center; justify-content:center; gap:.75rem;
  border-radius: var(--radius-md); background-image: var(--gradient-danger); color:#fff;
  padding:1rem 1.5rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  box-shadow: var(--shadow-cta); transition: all .3s;
}
.cotiz-form button[type="submit"]:hover{ transform: translateY(-2px); filter:brightness(1.1); }
.cotiz-form .note{ margin-top:1rem; text-align:center; font-size:.72rem; color: var(--muted-foreground); }

@media (min-width:640px){ .form-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .cotizacion-grid{ grid-template-columns: 1.05fr .95fr; } .cotiz-panel{ padding:3rem; } }

/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer{ position:relative; overflow:hidden; background-image: var(--gradient-brand-deep); color:#fff; }
.footer-topline{ height:4px; width:100%; background-image: var(--gradient-danger); }
.footer-main{ position:relative; margin:0 auto; max-width:1280px; padding:4rem 1.5rem 5rem; }
.footer-grid{ display:grid; gap:3rem; }
.footer-brand p{ margin-top:1.5rem; max-width:20rem; font-size:.85rem; line-height:1.7; color: rgba(255,255,255,.6); }
.footer-contact{ margin-top:1.75rem; display:flex; flex-direction:column; gap:.75rem; font-size:.85rem; color: rgba(255,255,255,.7); }
.footer-contact li{ display:flex; align-items:flex-start; gap:.75rem; }
.footer-contact svg{ color: var(--industrial); flex-shrink:0; margin-top:.15rem; }
.footer-contact a:hover{ color:#fff; }

.footer-col h3{ font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#fff; }
.footer-col-line{ display:block; margin-top:.75rem; height:2px; width:2rem; background-image: var(--gradient-danger); }
.footer-col ul{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color: rgba(255,255,255,.6); transition: color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-col a .dash{ height:1px; width:0; background: var(--danger); transition: width .3s; }
.footer-col a:hover .dash{ width:1rem; }

.footer-bottom{ margin-top:3.5rem; display:flex; flex-direction:column; align-items:center; gap:1.25rem; border-top:1px solid rgba(255,255,255,.12); padding-top:1.75rem; }
.footer-bottom p{ font-size:.72rem; letter-spacing:.02em; color: rgba(255,255,255,.45); }
.footer-top-link{ display:inline-flex; align-items:center; gap:.75rem; font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.6); }
.footer-top-link:hover{ color:#fff; }
.footer-top-link span{ display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius: var(--radius-md); border:1px solid rgba(255,255,255,.2); transition: all .3s; }
.footer-top-link:hover span{ background-image: var(--gradient-danger); border-color: transparent; }

@media (min-width:1024px){
  .footer-grid{ grid-template-columns: 1.3fr .8fr .8fr .8fr; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; }
}

/* ============================================================
   11. WHATSAPP FAB
   ============================================================ */
.wa-fab{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:50;
  display:flex; align-items:center; gap:.75rem;
  border-radius:999px; background: var(--whatsapp);
  padding:.85rem 1.25rem .85rem .85rem;
  box-shadow: var(--shadow-lift); transition: all .3s;
}
.wa-fab:hover{ transform: translateY(-4px); filter:brightness(1.05); }
.wa-fab-ring{ position:relative; display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:999px; background: rgba(255,255,255,.2); }
.wa-fab-ring::before{ content:''; position:absolute; inset:0; border-radius:999px; animation: pulse-ring 2.4s ease-out infinite; }
.wa-fab-ring svg{ color:#fff; }
.wa-fab-label{ max-width:0; overflow:hidden; white-space:nowrap; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:0; transition: all .4s; }
.wa-fab:hover .wa-fab-label{ max-width:10rem; opacity:1; }
@media (min-width:640px){ .wa-fab{ right:1.75rem; bottom:1.75rem; } }