@font-face {
  font-family: 'Colosseum';
  src: url('fonts/Colosseum ExtraBold.woff2') format('woff2'), url('fonts/Colosseum ExtraBold.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Colosseum';
  src: url('fonts/Colosseum Bold.woff2') format('woff2'), url('fonts/Colosseum Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Colosseum';
  src: url('fonts/Colosseum Medium.woff2') format('woff2'), url('fonts/Colosseum Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Colosseum';
  src: url('fonts/Colosseum Light.woff2') format('woff2'), url('fonts/Colosseum Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}

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

:root {
  --orange:    #F04E23;
  --black:     #000000;
  --white:     #FFFFFF;
  --gray-bg:   #C8C8C8;
  --gray-light:#F0F0F0;
  --gray-mid:  #CACACA;
  --gray-dark: #1E2830;
  --gray-line: #BBBBBB;
  --gray-text: #555555;
  --blueprint: #2D9CDB;
  --max:       1200px;
}

html { scroll-behavior: smooth; }
body { font-family: 'Colosseum', sans-serif; background: var(--white); color: var(--black); overflow-x: hidden; }

/* ====== NAV ====== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 68px;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-line);
  transition: box-shadow 0.3s;
  display: flex; align-items: center;
}
.nav-inner {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.nav-dots-only {
  display: flex;
  align-items: center;
  opacity: 1;
  position: absolute;
  transition: opacity 1.4s ease;
}
.nav-logo-full {
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
  min-width: 112px;
}
.nav-logo {
  position: relative;
  min-width: 112px;
  min-height: 44px;
}
.nav-logo.scrolled .nav-dots-only {
  opacity: 0;
  pointer-events: none;
}
.nav-logo.scrolled .nav-logo-full {
  opacity: 1;
  pointer-events: auto;
}
.nav-logo svg .cls-1 { fill: #F04E23; }
.nav-logo svg .cls-2 { fill: #121B21; }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  font-family: 'Colosseum', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  font-weight: 400;
  position: relative;
  padding-bottom: 3px;
  transition: color 0.25s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover { color: var(--orange); }
.nav-links a.active { color: var(--orange); }
.nav-links a:hover::after { width: 100%; }

/* ====== HERO ====== */
#hero {
  position: relative;
  width: 100%;
  height: 92vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Mecánico — sobre el video, anclado derecha, solo desktop */
.hero-mechanic {
  position: absolute;
  right: 100px;
  bottom: 0;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.hero-mechanic img {
  height: 98%;
  width: auto;
  max-width: 50vw;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  padding-top: 68px;
}
.hero-eyebrow {
  display:flex; align-items:center; gap:12px; margin-bottom:28px;
  opacity:0; animation:fadeUp 0.8s ease 0.3s forwards;
}
.hero-eyebrow-line { width:28px; height:1px; background:var(--orange); }
.hero-eyebrow span { font-family:'Colosseum',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--orange); }
.hero-title {
  font-family:'Colosseum',sans-serif; font-weight:800;
  font-size:clamp(90px, 13vw, 170px); line-height:0.88; letter-spacing:0.02em; color:var(--black);
  margin-bottom:12px; opacity:0; animation:fadeUp 0.8s ease 0.5s forwards;
}
.hero-ac {
  font-family:'Colosseum',sans-serif; font-weight:300;
  font-size:clamp(15px,1.8vw,22px); letter-spacing:0.32em; text-transform:uppercase; color:var(--black);
  margin-bottom:40px; opacity:0; animation:fadeUp 0.8s ease 0.65s forwards;
}
.hero-tagline {
  display:flex; align-items:center; gap:18px; margin-bottom:52px;
  opacity:0; animation:fadeUp 0.8s ease 0.8s forwards;
}
.hero-tagline span { font-family:'Colosseum',sans-serif; font-size:clamp(11px, 1.5vw, 19px); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--black); }
.hero-tagline .sep { width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.hero-cta { opacity:0; animation:fadeUp 0.8s ease 1s forwards; display:flex; gap:16px; align-items:center; }
.btn-primary { display:inline-block; padding:14px 40px; background:var(--black); color:var(--white); font-family:'Colosseum',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; text-decoration:none; border:1px solid var(--black); transition:background 0.25s,color 0.25s; }
.btn-primary:hover { background:transparent; color:var(--black); }
.btn-ghost { display:inline-block; padding:14px 40px; background:transparent; color:var(--black); font-family:'Colosseum',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; text-decoration:none; border:1px solid var(--gray-line); transition:border-color 0.25s; }
.btn-ghost:hover { border-color:var(--black); }
.hero-scroll { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; opacity:0; animation:fadeUp 0.8s ease 1.3s forwards; }
.hero-scroll span { font-family:'Colosseum',sans-serif; font-size:9px; letter-spacing:0.25em; text-transform:uppercase; color:var(--black); }
.scroll-line { width:1px; height:36px; background:linear-gradient(to bottom, var(--orange), transparent); animation:scrollPulse 1.8s ease-in-out infinite; }

/* ====== ORANGE BAND ====== */
.orange-band { background:var(--orange); padding:18px 0; overflow:hidden; }
.band-track { display:flex; white-space:nowrap; animation:marquee 22s linear infinite; }
.band-item { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.92); padding:0 28px; }
.band-dot { color:rgba(255,255,255,0.35); font-size:7px; align-self:center; }

/* ====== BASE LAYOUT ====== */
section { padding:120px 0; }
.container { max-width:var(--max); margin:0 auto; padding:0 48px; }
.sec-label { display:flex; align-items:center; gap:10px; margin-bottom:44px; }
.sec-label-line { width:20px; height:1px; background:var(--orange); }
.sec-label span { font-family:'Inter',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--orange); }

/* ====== INTRO ====== */
#intro { background:var(--white); }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.intro-h2 { font-family:'Colosseum',sans-serif; font-size:clamp(38px,4.2vw,58px); font-weight:800; line-height:1.02; letter-spacing:0.01em; color:var(--black); margin-bottom:28px; }
.intro-h2 em { font-style:normal; color:var(--orange); }
.intro-p { font-family:'Inter',sans-serif; font-size:15px; font-weight:300; line-height:1.82; color:var(--gray-text); margin-bottom:18px; }

.intro-compressor { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.6; mix-blend-mode:multiply; }
.intro-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(200,200,200,0.45) 0%, transparent 55%); }
.intro-k { position:absolute; right:-12px; bottom:-20px; z-index:2; pointer-events:none; }
.intro-k svg { width:180px; height:auto; opacity:0.14; }
.intro-dots { position:absolute; top:28px; left:28px; z-index:3; display:flex; align-items:center; gap:5px; }
.intro-dots span { display:block; border-radius:50%; background:var(--orange); }
.intro-dots span:nth-child(1) { width:7px; height:7px; }
.intro-dots span:nth-child(2) { width:11px; height:11px; }
.intro-dots span:nth-child(3) { width:16px; height:16px; }
.intro-dots span:nth-child(4) { width:22px; height:22px; }

/* ====== PRODUCTO ====== */
#producto { background:var(--gray-light); position:relative; overflow:hidden; }
#comp-producto { background:var(--gray-light); }


.product-heading { font-family:'Colosseum',sans-serif; font-size:clamp(40px,4.5vw,60px); font-weight:800; line-height:1; letter-spacing:0.01em; color:var(--black); margin-bottom:16px; position:relative; z-index:2; }
.product-heading em { font-style:normal; color:var(--orange); }
.product-sub { font-family:'Inter',sans-serif; font-size:16px; font-weight:300; line-height:1.8; color:var(--gray-text); max-width:540px; margin-bottom:52px; position:relative; z-index:2; }
.product-card { position:relative; z-index:2; background:var(--white); border:1px solid var(--gray-line); padding:48px; max-width:620px; border-top:3px solid var(--orange); }
.product-card-tag { font-family:'Inter',sans-serif; font-size:9px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--orange); margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.product-card-tag::before { content:''; display:block; width:14px; height:1px; background:var(--orange); }
.product-card-title { font-family:'Colosseum',sans-serif; font-size:30px; font-weight:800; letter-spacing:0.02em; color:var(--black); margin-bottom:14px; line-height:1.1; }
.product-card-text { font-family:'Inter',sans-serif; font-size:15px; font-weight:300; line-height:1.78; color:var(--gray-text); margin-bottom:32px; }
.soon-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border:1px solid rgba(240,78,35,0.35); background:rgba(240,78,35,0.06); }
.soon-badge span { font-family:'Inter',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--orange); }
.soon-badge::before { content:''; display:block; width:6px; height:6px; border-radius:50%; background:var(--orange); animation:blink 1.4s ease-in-out infinite; }

/* ====== BENEFICIOS ====== */
#beneficios { background:var(--gray-light); }
.benefits-h2 { font-family:'Colosseum',sans-serif; font-size:clamp(36px,4.2vw,56px); font-weight:800; line-height:1; letter-spacing:0.01em; color:var(--black); margin-bottom:52px; }
.benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--gray-line); border:1px solid var(--gray-line); }
.benefit-item { background:var(--white); padding:44px 36px; position:relative; overflow:hidden; transition:background 0.22s; }
.benefit-item:hover { background:var(--gray-light); }
.benefit-num { font-family:'Colosseum',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.2em; color:var(--gray-line); margin-bottom:32px; }
.benefit-icon { width:36px; height:36px; margin-bottom:20px; }
.benefit-title { font-family:'Colosseum',sans-serif; font-size:19px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--black); margin-bottom:14px; }
.benefit-text { font-family:'Inter',sans-serif; font-size:14px; font-weight:300; line-height:1.78; color:var(--gray-text); }
.benefit-bar { position:absolute; bottom:0; left:0; width:0; height:5px; background:var(--orange); transition:width 0.35s ease; }
.benefit-item:hover .benefit-bar { width:100%; }

/* ====== CALIDAD ====== */
#calidad { background:var(--white); }
.calidad-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.calidad-h2 { font-family:'Colosseum',sans-serif; font-size:clamp(38px,4.2vw,58px); font-weight:800; line-height:1; letter-spacing:0.01em; color:var(--black); margin-bottom:28px; }
.calidad-p { font-family:'Inter',sans-serif; font-size:16px; font-weight:300; line-height:1.8; color:var(--gray-text); margin-bottom:36px; }
.calidad-list { list-style:none; border:1px solid rgba(0,0,0,0.15); background:var(--white); }
.calidad-list li { padding:18px 22px; display:flex; align-items:center; gap:14px; border-bottom:1px solid rgba(0,0,0,0.1); font-family:'Inter',sans-serif; font-size:14px; font-weight:400; letter-spacing:0.01em; color:var(--black); }
.calidad-list li:last-child { border-bottom:none; }
.calidad-list li::before { content:''; display:block; width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; }



.calidad-panel-k svg path { fill:var(--white) !important; }






/* ====== SOPORTE ====== */
#soporte { background:var(--white); }
.soporte-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.soporte-h2 { font-family:'Colosseum',sans-serif; font-size:clamp(38px,4.2vw,58px); font-weight:800; line-height:1; letter-spacing:0.01em; color:var(--black); margin-bottom:24px; }
.soporte-p { font-family:'Inter',sans-serif; font-size:16px; font-weight:300; line-height:1.8; color:var(--gray-text); }
.soporte-items { display:flex; flex-direction:column; }
.soporte-item { display:flex; align-items:flex-start; gap:22px; padding:26px 0; border-bottom:1px solid var(--gray-light); }
.soporte-item:first-child { padding-top:0; }
.soporte-n { font-family:'Colosseum',sans-serif; font-size:11px; font-weight:700; color:var(--orange); letter-spacing:0.1em; flex-shrink:0; padding-top:2px; }
.soporte-title { font-family:'Colosseum',sans-serif; font-size:16px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--black); margin-bottom:6px; }
.soporte-text { font-family:'Inter',sans-serif; font-size:14px; font-weight:300; line-height:1.75; color:var(--gray-text); }

/* ====== DISTRIBUCIÓN ====== */
#distribucion { background:var(--orange); position:relative; overflow:hidden; }
.dist-compressor { position:absolute; right:-4%; top:50%; transform:translateY(-50%); width:52%; opacity:0.09; pointer-events:none; z-index:0; mix-blend-mode:multiply; }
.dist-inner { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.dist-h2 { font-family:'Colosseum',sans-serif; font-size:clamp(38px,4.2vw,58px); font-weight:800; line-height:1.05; letter-spacing:0.01em; color:var(--black); margin-bottom:24px; }
.dist-h2 em { font-style:normal; color:var(--orange); }
.dist-p { font-family:'Inter',sans-serif; font-size:16px; font-weight:300; line-height:1.8; color:var(--gray-text); }
#distribucion .dist-p { color: rgba(255,255,255,0.92); }
.dist-card { background:var(--black); padding:48px; position:relative; border-top:3px solid var(--orange); }
.dist-card-tag { font-family:'Inter',sans-serif; font-size:9px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--orange); margin-bottom:14px; }
.dist-card-name { font-family:'Colosseum',sans-serif; font-size:26px; font-weight:800; letter-spacing:0.02em; color:var(--white); line-height:1.2; margin-bottom:18px; }
.dist-card-text { font-family:'Inter',sans-serif; font-size:14px; font-weight:300; line-height:1.75; color:#888; margin-bottom:28px; }
.dist-badges { display:flex; flex-wrap:wrap; gap:7px; }
.dist-badge { padding:5px 13px; border:1px solid rgba(255,255,255,0.12); font-family:'Inter',sans-serif; font-size:9px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#999; }

/* ====== CONTACTO ====== */
#contacto { background:var(--gray-light); }
.contacto-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:start; }
.contacto-h2 { font-family:'Colosseum',sans-serif; font-size:clamp(38px,4.2vw,58px); font-weight:800; line-height:1; letter-spacing:0.01em; color:var(--black); margin-bottom:24px; }
.contacto-p { font-family:'Inter',sans-serif; font-size:16px; font-weight:300; line-height:1.8; color:var(--gray-text); margin-bottom:36px; }
.contacto-url { display:flex; align-items:center; gap:10px; }
.contacto-url-line { width:14px; height:1px; background:var(--orange); }
.contacto-url a { font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.1em; color:var(--orange); text-decoration:none; }
.form-field { margin-bottom:2px; }
.form-field label { display:block; font-family:'Inter',sans-serif; font-size:9px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:#999; margin-bottom:7px; padding-left:14px; }
.form-field input,.form-field textarea { width:100%; background:var(--gray-light); border:1px solid transparent; border-bottom:1px solid var(--gray-line); padding:13px 14px; font-family:'Inter',sans-serif; font-size:14px; color:var(--black); outline:none; transition:border-color 0.2s,background 0.2s; resize:none; }
.form-field input:focus,.form-field textarea:focus { border-color:var(--orange); background:var(--white); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.btn-send { margin-top:20px; padding:15px 48px; background:var(--black); color:var(--white); font-family:'Colosseum',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; border:1px solid var(--black); cursor:pointer; transition:background 0.25s,color 0.25s; }
.btn-send:hover { background:transparent; color:var(--black); }

/* ====== FOOTER ====== */
footer { background:var(--black); padding:64px 0 40px; }
.footer-inner { max-width:var(--max); margin:0 auto; padding:0 48px; }
.footer-top { display:grid; grid-template-columns:1fr auto; align-items:start; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; gap:40px; }
/* footer logo uses white SVG natively */
.footer-tagline { margin-top:20px; display:flex; align-items:center; gap:10px; }
.footer-tagline span { font-family:'Colosseum',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--white); }
.footer-tagline .dot { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--orange); }
.footer-tagline-eng { font-family:'Inter',sans-serif; font-size:11px; font-weight:300; letter-spacing:0.1em; color:#555; margin-top:8px; font-style:italic; }
.footer-nav { list-style:none; display:flex; flex-direction:column; gap:10px; text-align:right; }
.footer-nav a { font-family:'Colosseum',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#555; text-decoration:none; transition:color 0.2s; }
.footer-nav a:hover { color:var(--orange); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-copy { font-family:'Inter',sans-serif; font-size:10px; color:#444; letter-spacing:0.06em; }
.footer-url { font-family:'Colosseum',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.16em; color:var(--orange); text-decoration:none; text-transform:uppercase; }

/* ====== ANIMATIONS ====== */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes scrollPulse { 0%,100%{opacity:0.3} 50%{opacity:1} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.d1{transition-delay:0.1s} .d2{transition-delay:0.2s} .d3{transition-delay:0.3s}

/* ── HERO LOGO ── */
.hero-logo-svg svg .cls-1 { fill: #F04E23; }
.hero-logo-svg svg .cls-2 { fill: #121B21; }

/* ── COMPRESSOR ASSEMBLY ANIMATION ── */




/* Draw in each construction line */

























/* Individual draw keyframes for each line group */
 2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
  2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
  2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
  2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
 2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
  2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
  2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
 2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
  2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
   2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
   2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
  2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
   2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
  2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }
   2%{opacity:1} to{stroke-dashoffset:0;opacity:1} }



























  30%  { opacity: 0.1;  filter: brightness(1.6) contrast(0.5) blur(1px); }
  70%  { opacity: 0.18; filter: brightness(1.2) contrast(0.8) blur(0px); }
  100% { opacity: 0.22; filter: brightness(1) contrast(1); }
}

/* Lines stay visible (subtle) after drawing */




  3%   { opacity: 1; }
  56%  { opacity: 1; }
  62%  { opacity: 0; }
  68%  { opacity: 0; }
  70%  { opacity: 1; }
  98%  { opacity: 1; }
  100% { opacity: 0; }
}




  15%  { opacity: 1; }
  60%  { filter: brightness(2.5) contrast(0.4); }
  100% { filter: brightness(1) contrast(1); opacity: 1; }
}








  15%  { opacity: 1; }
  60%  { filter: brightness(2.5) contrast(0.4); }
  100% { filter: brightness(1) contrast(1); opacity: 1; }
}






.hero-logo-white svg .cls-1 { fill: #F04E23; }
.hero-logo-white svg .cls-2 { fill: #FFFFFF; }


.hero-desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--black);
  max-width: 460px;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 0.8s ease 1s forwards;
}


/* ── PRODUCT GRID ── */
.product-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.product-left { position: relative; z-index: 2; }
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr auto;
  gap: 12px;
  position: relative;
}
.prod-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  overflow: hidden;
  transition: border-color 0.25s;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.prod-card.fading { opacity: 0; }
.prod-card:hover { border-color: var(--orange); }
.prod-card-img {
  position: relative;
  height: 140px;
  background: var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.prod-placeholder svg {
  width: 80%;
  height: auto;
  opacity: 0.6;
}
.prod-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.06), transparent);
}
.prod-coming {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
}
.prod-card-info {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prod-card-name {
  font-family: 'Colosseum', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--black);
  text-transform: uppercase;
}
.prod-card-ref {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--gray-400);
  letter-spacing: 0.06em;
}
.prod-grid-dots {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
}
.prod-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray-300);
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
}
.prod-dot.active {
  background: var(--orange);
  transform: scale(1.3);
}


.benefit-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
}
.benefit-dots span {
  display: block;
  border-radius: 50%;
  background: var(--orange);
}
.benefit-dots span:nth-child(1) { width: 6px;  height: 6px;  }
.benefit-dots span:nth-child(2) { width: 9px;  height: 9px;  }
.benefit-dots span:nth-child(3) { width: 13px; height: 13px; }
.benefit-dots span:nth-child(4) { width: 18px; height: 18px; }


/* ── CALIDAD STATS ── */
.calidad-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--gray-line);
}
.calidad-stat-card {
  padding: 36px 40px;
  border-bottom: 1px solid var(--gray-line);
  position: relative;
  transition: background 0.2s;
}
.calidad-stat-card:last-child { border-bottom: none; }
.calidad-stat-card:hover { background: var(--gray-light); }
.calidad-stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--orange);
  transition: width 0.3s ease;
}
.calidad-stat-card:hover::before { width: 4px; }
.calidad-stat-val-new {
  font-family: 'Colosseum', sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 6px;
}
.calidad-stat-val-new span { color: var(--orange); }
.calidad-stat-val-new.orange { color: var(--orange); }
.calidad-stat-lbl-new {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-400);
}


/* ── ORANGE SECTIONS ── */
#distribucion .sec-label span,
#contacto .sec-label span { color: var(--orange); }

#distribucion .sec-label-line,
#contacto .sec-label-line { background: var(--orange); }

#distribucion .dist-h2,
#contacto .contacto-h2 { color: var(--black); }

#distribucion .dist-h2 em { color: var(--white); font-style:normal; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.4); }

#distribucion .dist-p,
#contacto .contacto-p { color: var(--gray-text); }

#distribucion .dist-card { background: rgba(255,255,255,0.12); border-top: 3px solid var(--white); }
#distribucion .dist-card-tag { color: rgba(255,255,255,0.7); }
#distribucion .dist-card-name { color: var(--white); }
#distribucion .dist-card-text { color: rgba(255,255,255,0.75); }
#distribucion .dist-badge { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }

#contacto .contacto-url a { color: var(--orange); }
#contacto .contacto-url-line { background: var(--orange); }
#contacto .form-field label { color: #999; }
#contacto .form-field input,
#contacto .form-field textarea { background: var(--white); border-bottom-color: var(--gray-line); color: var(--black); }
#contacto .form-field input::placeholder,
#contacto .form-field textarea::placeholder { color: #bbb; }
#contacto .form-field input:focus,
#contacto .form-field textarea:focus { background: var(--white); border-bottom-color: var(--orange); }
#contacto .btn-send { background: var(--black); color: var(--white); border-color: var(--black); }
#contacto .btn-send:hover { background: transparent; color: var(--black); }



  35%  { opacity: 0; }
  50%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}











  50%,90% { opacity: 0; }
  100%    { opacity: 1; }
}

  50%,90% { opacity: 1; }
  100%    { opacity: 0; }
}


.intro-img-col {
  position: relative;
}
.intro-img-wrap {
  position: relative;
  width: 100%;
  height: 480px;
}
.img-boceto,
.img-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.img-boceto { animation: imgFade1 4s ease-in-out infinite; }
.img-real   { animation: imgFade2 4s ease-in-out infinite; }
@keyframes imgFade1 {
  0%,42%  { opacity: 1; }
  52%,92% { opacity: 0; }
  100%    { opacity: 1; }
}
@keyframes imgFade2 {
  0%,42%  { opacity: 0; }
  52%,92% { opacity: 1; }
  100%    { opacity: 0; }
}


.dist-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dist-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  transition: color 0.2s;
}
.dist-contact-item:hover { color: var(--white); }
.dist-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 1; display: block; }


#distribucion p, #distribucion .dist-p { color: #ffffff !important; }

@keyframes tmkFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.tmk-panel .reveal,.tmk-panel .reveal.d1,.tmk-panel .reveal.d2,.tmk-panel .reveal.d3 { opacity:1!important;transform:none!important;animation:none!important; }
#tmk-compatibilidad .sec-label, #tmk-compatibilidad .sec-label.reveal { display:none!important; }

@keyframes revealFallback {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: revealFallback 0.7s ease 0.3s forwards; }
.reveal.d1 { animation-delay: 0.4s; }
.reveal.d2 { animation-delay: 0.5s; }
.reveal.d3 { animation-delay: 0.6s; }


/* ── PRODUCT PHOTO CARDS ── */
.prod-grid-new {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.prod-card-new {
  background: var(--white);
  border: 1px solid var(--gray-line);
  overflow: hidden;
  transition: border-color 0.25s;
}
.prod-card-new:hover { border-color: var(--orange); }
.prod-card-img-new {
  background: var(--white);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prod-card-img-new img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.prod-card-new:hover .prod-card-img-new img { transform: scale(1.04); }
.prod-card-label {
  padding: 12px 14px;
  font-family: 'Colosseum', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
}



.tmk-nav { display:flex; align-items:center; border-bottom:2px solid var(--gray-line); margin-bottom:0; }
.tmk-btn { padding:15px 30px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#AAAAAA; background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; cursor:pointer; transition:color 0.2s,border-color 0.2s; }
.tmk-btn:hover { color:var(--black); }
.tmk-btn.tmk-active { color:var(--black); border-bottom-color:var(--orange); }
.tmk-panel { padding:56px 0; min-height:620px; animation:tmkFade 0.3s ease; }


/* ═══════════════════════════════════════════════
   RESPONSIVE MOBILE — TAIKO
   Breakpoints: 768px (tablet) · 480px (mobile)
═══════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── GLOBALS ── */
  .container { padding: 0 24px; }
  .footer-inner { padding: 0 24px; }
  .sec-label { margin-bottom: 28px; }
  .sec-label span { font-size: 15px; letter-spacing: 0.22em; }

  /* ── NAV ── */
  nav { padding: 0 24px; height: 56px; }
  .nav-inner { padding: 0; }
  .nav-links { gap: 20px; }
  .nav-sep { display: none; }
  .nav-links a { font-size: 9px; letter-spacing: 0.1em; }

  /* ── HERO ── */
  #hero { height: auto; min-height: 86svh; }
  .hero-content { padding: 0 24px; padding-top: 72px; padding-bottom: 20px; }
  .hero-mechanic { display: none; }
  .hero-tagline { gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
  .hero-tagline span { font-size: 11px; letter-spacing: 0.14em; }
  .hero-sub { font-size: 13px; line-height: 1.65; max-width: 100%; margin-bottom: 24px; }
  .hero-desc { font-weight: 700; text-shadow: 0 0 8px rgba(255,255,255,0.75), 0 0 2px rgba(255,255,255,0.55); }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .btn-primary, .btn-ghost { width: 100%; text-align: center; padding: 14px 24px; }
  .hero-scroll { display: none; }
  .hero-logo-svg svg { width: 258px; height: auto; }

  /* ── COMP MARCA ── */
  #comp-marca { padding: 56px 0 0; }
  .intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .intro-text-col { padding-right: 24px; }
  .intro-img-col { order: -1; }
  .intro-img-wrap { height: 260px; }
  .intro-h2 { font-size: clamp(34px, 9vw, 48px); }

  /* ── BENEFITS ── */
  .benefits-grid { grid-template-columns: 1fr; }
  .benefits-h2 { font-size: clamp(32px, 8vw, 44px); margin-bottom: 32px; }

  /* ── CALIDAD ── */
  .calidad-grid { grid-template-columns: 1fr; gap: 40px; }
  .calidad-h2 { font-size: clamp(32px, 8vw, 44px); }
  .calidad-stat-card { padding: 24px 28px; }
  .calidad-stat-val-new { font-size: 40px; }

  /* ── TABS ── */
  .tmk-nav { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tmk-nav::-webkit-scrollbar { display: none; }
  .tmk-btn { padding: 14px 20px; font-size: 15px; white-space: nowrap; flex-shrink: 0; }
  .tmk-panel { padding: 36px 0; min-height: auto; }

  /* ── COMP PRODUCTO ── */
  #comp-producto { padding: 56px 0 0; }
  .product-top { grid-template-columns: 1fr; gap: 36px; }
  .product-heading { font-size: clamp(32px, 8vw, 48px); }
  .product-sub { margin-bottom: 24px; }
  .prod-grid-new { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* ── SOPORTE ── */
  .soporte-inner { grid-template-columns: 1fr; gap: 0; }
  .soporte-h2 { font-size: clamp(32px, 8vw, 44px); margin-bottom: 24px; }

  /* ── DISTRIBUCIÓN ── */
  #distribucion { padding: 56px 0; }
  .dist-inner { grid-template-columns: 1fr; gap: 40px; }
  .dist-h2 { font-size: clamp(34px, 9vw, 52px); }
  .dist-compressor { display: none; }

  /* ── CONTACTO ── */
  #contacto { padding: 56px 0; }
  .contacto-grid { grid-template-columns: 1fr; gap: 40px; }
  .contacto-h2 { font-size: clamp(32px, 8vw, 44px); }
  .contacto-p { margin-bottom: 16px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .btn-send { width: 100%; text-align: center; }

  /* ── FOOTER ── */
  footer { padding: 28px 0 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 20px; padding-bottom: 24px; margin-bottom: 20px; }
  .footer-nav { display: none; }
  .footer-bottom { flex-direction: column; gap: 16px; align-items: center; text-align: center; }
  .footer-social { gap: 24px; }
}

@media (max-width: 480px) {

  /* ── GLOBALS ── */
  .container { padding: 0 20px; }
  .footer-inner { padding: 0 20px; }

  /* ── NAV ── */
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 8px; }

  /* ── HERO ── */
  .hero-content { padding: 0 20px; padding-top: 64px; padding-bottom: 20px; }
  .hero-logo-svg svg { width: 220px; height: auto; }

  /* ── TABS ── */
  .tmk-nav { gap: 14px; }
  .tmk-btn {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
  .tmk-btn.tmk-active { border-bottom-width: 3px; }

  /* ── PRODUCT CARDS ── */
  .prod-grid-new { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* ── BENEFITS ── */
  .benefit-item { padding: 32px 24px; }

  /* ── CALIDAD STATS ── */
  .calidad-stat-val-new { font-size: 36px; }

  /* ── SOPORTE ── */
  .soporte-item { gap: 16px; padding: 20px 0; }
  .soporte-n { font-size: 28px; }
}


/* ── HAMBURGER & DRAWER ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1001;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--black);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1002;
  opacity: 0;
  transition: opacity 0.3s;
}
.drawer-overlay.open { opacity: 1; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  height: 100dvh;
  background: var(--orange);
  z-index: 1003;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  padding: 80px 40px 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer.open { transform: translateX(0); }

.drawer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white);
  padding: 8px;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.drawer-nav a {
  font-family: 'Colosseum', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  transition: opacity 0.2s, padding-left 0.2s;
}
.drawer-nav a:hover { opacity: 0.75; padding-left: 8px; }
.drawer-nav a:last-child { border-bottom: none; }

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .nav-links { display: none; }
}


/* ── SVG FILL CLASSES ── */
.cls-1 { fill: #f04e23; }
.cls-2 { fill: #121b21; }
.st0   { fill: #f04e23; }
.st1   { fill: #fff; }


.form-msg {
  display: none;
  margin-top: 20px;
  color: #999;
  font-size: 14px;
}

.footer-social { display:none; align-items:center; gap:20px; }
.footer-social a { display:flex; align-items:center; justify-content:center; color:#555; transition:color 0.2s; }
.footer-social a:hover { color:var(--orange); }