@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/barlow-condensed-400.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/barlow-condensed-700.woff2') format('woff2');
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--color-black);
  color:var(--color-white);
  font-family:var(--font-family);
  font-weight:400;
  line-height:var(--line-height-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,span,li,a,button,label{font-family:inherit;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4);}

/* tipografia base */
h1{font-size:var(--text-h1);font-weight:700;line-height:var(--line-height-heading);text-transform:uppercase;margin:0;text-wrap:balance;}
h2{font-size:var(--text-h2);font-weight:700;line-height:var(--line-height-heading);text-transform:uppercase;margin:0;text-wrap:balance;}
h3{font-size:var(--text-h3);font-weight:600;line-height:1.1;margin:0;}
p{font-size:var(--text-body);margin:0;}
.eyebrow{
  display:inline-block;font-size:var(--text-eyebrow);letter-spacing:var(--letter-spacing-eyebrow);
  text-transform:uppercase;font-weight:600;color:var(--color-gold);margin:0 0 var(--space-3);
}
.rule{height:2px;width:56px;background:var(--color-gold);border:0;margin:var(--space-5) 0 0;}

/* énfasis dentro de titulares/copy — combina amarillo, blanco y negro (04_design_tokens.md) */
.hl-gold{color:var(--color-gold);}
.hl-chip{background:var(--color-black);color:var(--color-gold);padding:.05em .28em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.hl-underline{border-bottom:3px solid var(--color-gold);}
/* escapa el text-transform:uppercase forzado de h1/h2 para el patrón de "mayúsculas parciales" (04_design_tokens.md §6) */
.case-normal{text-transform:none;}
@media (max-width:991.98px){
  h1{font-size:var(--text-h1-tablet);}
  h2{font-size:var(--text-h2-tablet);}
  h3{font-size:var(--text-h3-tablet);}
  p{font-size:var(--text-body-tablet);}
}
@media (max-width:767.98px){
  h1{font-size:var(--text-h1-mobile);}
  h2{font-size:var(--text-h2-mobile);}
  h3{font-size:var(--text-h3-mobile);}
}

/* botones */
.btn{
  display:inline-block;font-family:var(--font-family);font-size:var(--text-cta);font-weight:500;
  letter-spacing:.02em;padding:14px 28px;border-radius:var(--radius-none);cursor:pointer;
  border:2px solid var(--color-gold);transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);
}
.btn-primary{background:var(--color-gold);color:var(--color-black);}
.btn-primary:hover{background:var(--color-gold-hover);}
.btn-on-gold{background:var(--color-black);color:var(--color-gold);border-color:var(--color-black);}
.btn-on-gold:hover{background:var(--color-charcoal-90);}
.btn-outline{background:rgba(255,255,255,.04);color:var(--color-white);}
.btn-outline:hover{background:var(--color-gold-muted);border-color:var(--color-gold-hover);}
.btn-row{display:flex;gap:var(--space-3);flex-wrap:wrap;}

/* header */
.site-header{
  position:sticky;top:0;z-index:30;background:var(--color-black);
  border-bottom:2px solid var(--color-gold);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:var(--space-4);padding-bottom:var(--space-4);gap:var(--space-4);}
.site-header .logo img{height:42px;width:auto;}
.nav{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap;}
.nav a{font-size:var(--text-nav);font-weight:600;color:var(--color-white);position:relative;padding:4px 0;letter-spacing:.01em;}
.nav a:hover{color:var(--color-gold);}
.nav a.nav-cta{font-size:15px;font-weight:600;border:1.5px solid var(--color-gold);padding:9px 18px;color:var(--color-black);background:var(--color-gold);}
.nav a.nav-cta:hover{background:var(--color-gold-hover);}

/* dropdown de escritorio — Industrial ▾ / Residencial ▾ (03_arquitectura_sitio.md) */
.nav-item{position:relative;}
.nav-item>a::after{content:'▾';display:inline-block;margin-left:6px;font-size:13px;color:var(--color-gold);}
.nav-item .dropdown{
  position:absolute;top:100%;left:0;margin-top:0;
  display:flex;gap:var(--space-6);background:var(--color-black);
  border:1px solid var(--color-gold);box-shadow:var(--shadow-card);
  padding:var(--space-4) var(--space-5);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--transition-base),transform var(--transition-base),visibility var(--transition-base);
  z-index:40;
}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.dropdown-col{display:flex;flex-direction:column;gap:6px;min-width:190px;}
.dropdown-single{flex-direction:column;min-width:230px;}
.dropdown-label{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-gray);margin-bottom:2px;}
.dropdown a{font-size:17px;font-weight:500;white-space:nowrap;padding:6px 0;}
.dropdown a::after{content:none;}

/* menú hamburguesa / offcanvas — patrón adaptado de capsamaquinaria.com, recoloreado a tokens Genertika */
.nav-toggle{display:none;cursor:pointer;}
.burger{display:block;width:26px;}
.burger span{display:block;height:2px;background:var(--color-gold);margin:6px 0;
  transition:background-color var(--transition-base),opacity var(--transition-base),transform var(--transition-base);}
body.offcanvas-active .site-header .burger span:nth-child(1){transform:translate(0,8px) rotate(-45deg);}
body.offcanvas-active .site-header .burger span:nth-child(2){opacity:0;}
body.offcanvas-active .site-header .burger span:nth-child(3){transform:translate(0,-8px) rotate(45deg);}
body.offcanvas-active{overflow:hidden;}

/* el botón de cerrar dentro del panel siempre se ve como X (no necesita animación de estado) */
.offcanvas-head .burger span:nth-child(1){transform:translate(0,8px) rotate(-45deg);}
.offcanvas-head .burger span:nth-child(2){opacity:0;}
.offcanvas-head .burger span:nth-child(3){transform:translate(0,-8px) rotate(45deg);}

.offcanvas-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity var(--transition-base),visibility var(--transition-base);z-index:90;
}
body.offcanvas-active .offcanvas-overlay{opacity:1;visibility:visible;}

.offcanvas-menu{
  position:fixed;top:0;right:-320px;width:320px;max-width:85vw;height:100%;
  background:var(--color-black);border-left:2px solid var(--color-gold);
  transition:right var(--transition-base);z-index:95;overflow-y:auto;
}
body.offcanvas-active .offcanvas-menu{right:0;}
.offcanvas-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-4);border-bottom:1px solid rgba(255,255,255,.12);}
.offcanvas-nav{display:flex;flex-direction:column;padding:var(--space-3) 0;}
.offcanvas-nav>a,.offcanvas-nav summary{
  display:block;font-size:19px;font-weight:600;color:var(--color-white);
  padding:var(--space-3) var(--space-4);border-bottom:1px solid rgba(255,255,255,.08);
  cursor:pointer;list-style:none;
}
.offcanvas-nav summary::-webkit-details-marker{display:none;}
.offcanvas-nav summary::after{content:'+';float:right;color:var(--color-gold);}
.offcanvas-nav details[open] summary::after{content:'–';}
.offcanvas-nav>a:hover,.offcanvas-nav summary:hover{color:var(--color-gold);}
.offcanvas-nav details a{
  display:block;font-size:16px;color:var(--color-gray);padding:var(--space-2) var(--space-4) var(--space-2) var(--space-6);
}
.offcanvas-nav details a:hover{color:var(--color-gold);}
.offcanvas-nav .offcanvas-cta{color:var(--color-gold);}

@media (max-width:991.98px){
  .nav{display:none;}
  .nav-toggle{display:block;}
}

/* hero — variante Home: foto de generador + overlay dorado translúcido (04_design_tokens.md §10) */
.hero-home{position:relative;background-size:cover;background-position:center;padding:var(--space-9) 0 0;}
.hero-home-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(231,178,0,.55) 0%, rgba(20,23,28,.8) 100%);}
.hero-home-content{position:relative;padding-bottom:var(--space-8);}
.hero-mark{height:44px;width:auto;margin-bottom:var(--space-4);}
.hero-home h1{max-width:18ch;}
.hero-home .lede{font-size:var(--text-body);color:var(--color-white);opacity:.9;max-width:56ch;margin-top:var(--space-4);}
.hero-home .btn-row{margin-top:var(--space-6);}
.hero-trustbar{position:relative;background:rgba(10,10,10,.55);border-top:1px solid rgba(255,255,255,.14);padding:var(--space-4) 0;}
.hero-trustbar-inner{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex-wrap:wrap;}
.hero-trustbar span{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-gray);white-space:nowrap;}
.hero-trustbar img{height:44px;width:auto;}

/* quote block — foto + slogan, para romper la monotonía de las secciones de tarjetas */
.quote-block{position:relative;background-size:cover;background-position:center;min-height:340px;display:flex;align-items:center;}
.quote-block-overlay{position:absolute;inset:0;background:linear-gradient(100deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.85) 65%);}
.quote-block-content{position:relative;padding:var(--space-7) var(--space-4);}
.quote-text{font-size:32px;font-weight:600;line-height:1.2;color:var(--color-white);max-width:22ch;margin:0;text-wrap:balance;}
@media (max-width:767.98px){ .quote-text{font-size:24px;} }

/* whatsapp flotante */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:80;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.4);transition:transform var(--transition-fast);
}
.wa-float:hover{transform:scale(1.08);}

/* split industrial/residencial */
.split-section{position:relative;}
.split-section img{width:100%;height:auto;}
.split-links{display:grid;grid-template-columns:1fr 1fr;}
.split-links a{
  padding:var(--space-4) var(--space-4);text-align:center;font-size:var(--text-nav);font-weight:500;
  color:var(--color-white);background:var(--color-charcoal);border-top:2px solid transparent;
  transition:border-color var(--transition-fast),color var(--transition-fast);
}
.split-links a:hover{border-top-color:var(--color-gold);color:var(--color-gold);}
.split-links a+a{border-left:1px solid rgba(255,255,255,.12);}

/* diferenciadores */
.section{padding:var(--space-8) 0;}
.section-dark{background:var(--color-black);}
.section-charcoal{background:var(--color-charcoal);}
.section-white{background:var(--color-white);color:var(--color-black);}
.section-head{max-width:64ch;margin-bottom:var(--space-6);}
.section-head p{color:var(--color-gray);margin-top:var(--space-3);}
.section-white .section-head p{color:var(--color-gray-ink);}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4);}
.diff-card{border:1px solid rgba(255,255,255,.12);padding:var(--space-5);background:var(--color-black);}
.diff-card .num{color:var(--color-gold);font-size:var(--text-h3);font-weight:500;display:block;margin-bottom:var(--space-2);}
.diff-card h3{margin-bottom:var(--space-2);}
.diff-card p{font-size:17px;color:var(--color-gray);}

/* clientes */
.clientes-block{text-align:center;}
.clientes-block img{width:100%;height:auto;max-width:640px;margin:var(--space-6) auto 0;}
.clientes-block .cta-link{display:inline-block;margin-top:var(--space-5);font-weight:600;color:var(--color-black);border-bottom:2px solid var(--color-gold);}

/* proceso */
.proceso-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-5);counter-reset:paso;}
.proceso-item{counter-increment:paso;}
.proceso-item .num{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:2px solid var(--color-gold);color:var(--color-gold);font-weight:500;font-size:20px;margin-bottom:var(--space-3);
}
.proceso-item h3{font-size:22px;margin-bottom:var(--space-2);}
.proceso-item p{font-size:16px;color:var(--color-gray);}

/* cta final */
.cta-final{background:var(--color-charcoal);text-align:center;padding:var(--space-8) 0;}
.cta-final h2{margin-bottom:var(--space-5);}
.cta-final .btn-row{justify-content:center;}

/* hero — foto (Rama / Producto) */
.hero-photo{position:relative;background-size:cover;background-position:center;min-height:520px;display:flex;align-items:flex-end;}
.hero-photo-overlay{position:absolute;inset:0;background:linear-gradient(115deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,.65) 45%, rgba(10,10,10,.95) 80%);}
.hero-photo-content{position:relative;padding:var(--space-8) var(--space-4) var(--space-7);}
.hero-photo-content h1{max-width:20ch;}
.lede-dark{color:var(--color-gray);max-width:60ch;margin-top:var(--space-4);}
.hero-photo .rule{margin:var(--space-5) 0 var(--space-6);}

/* hero — logo de marca sin fotografía propia de campo (ej. Sany) */
.hero-logo{position:relative;background:var(--color-charcoal);min-height:480px;display:flex;align-items:center;overflow:hidden;}
.hero-logo-mark{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;filter:grayscale(1);}
.hero-logo-content{position:relative;padding:var(--space-8) var(--space-4);}
.hero-logo-img{height:64px;width:auto;margin-bottom:var(--space-5);}
.hero-logo h1{max-width:20ch;}
.hero-logo .rule{margin:var(--space-5) 0 var(--space-6);}

/* hero simple (Nosotros, Clientes, Aviso, 404) */
.hero-simple{background:var(--color-charcoal);padding:var(--space-8) 0 var(--space-7);}
.hero-simple .lede{color:var(--color-gray);max-width:60ch;margin-top:var(--space-3);}
.hero-404{text-align:center;background:var(--color-black);padding:var(--space-9) 0;}
.hero-404 .lede{max-width:56ch;margin:var(--space-3) auto 0;}
.hero-404 .btn-row{justify-content:center;margin-top:var(--space-6);}

/* nav cards (rama pilar) */
.nav-cards{margin-top:0;}
.nav-card{display:block;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:var(--color-charcoal);position:relative;transition:border-color var(--transition-fast),background var(--transition-fast);}
.nav-card:hover{border-color:var(--color-gold);background:var(--color-charcoal-90);}
.nav-card-img{height:140px;background-size:cover;background-position:center;}
.nav-card-logo{height:140px;background:var(--color-black);display:flex;align-items:center;justify-content:center;padding:var(--space-4);}
.nav-card-logo img{max-height:100%;max-width:80%;object-fit:contain;}
.nav-card-body{padding:var(--space-5);}
.nav-card-body h3{margin-bottom:var(--space-2);}
.nav-card-body p{font-size:16px;color:var(--color-gray);margin-bottom:var(--space-4);}
.nav-card-arrow{color:var(--color-gold);font-weight:600;}

/* listas tipo módulo (accesorios/mantenimiento) */
.mod-list .tag-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-3);padding:0;margin:0 0 var(--space-5);}
.mod-list .tag-list li{border:1px solid var(--color-gold);color:var(--color-gold);padding:8px 16px;font-size:16px;font-weight:600;}
.btn-outline-white{background:transparent;color:var(--color-white);border-color:var(--color-white);}
.btn-outline-white:hover{background:rgba(255,255,255,.08);}

/* specs */
.specs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);}
.spec-item{background:var(--color-black);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);}
.spec-label{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-gray);}
.spec-value{font-size:22px;font-weight:600;color:var(--color-gold);}

/* faq */
.faq-list{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);}
.faq-item{background:var(--color-charcoal);}
.faq-item summary{padding:var(--space-4);font-size:18px;font-weight:600;cursor:pointer;list-style:none;color:var(--color-white);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';float:right;color:var(--color-gold);}
.faq-item[open] summary::after{content:'–';}
.faq-item p{padding:0 var(--space-4) var(--space-4);color:var(--color-gray);font-size:17px;}

/* fotos de prueba social */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4);margin-top:var(--space-6);}
.photo-grid figure{margin:0;}
.photo-grid img{width:100%;height:260px;object-fit:cover;}

/* slider — módulo reutilizable (multi-instancia), ver 06_modulo_slider.md */
.slider-wrapper{position:relative;width:100%;max-width:1100px;height:520px;margin:var(--space-6) auto 0;overflow:hidden;background:var(--color-charcoal);}
@media (max-width:767.98px){ .slider-wrapper{height:340px;} }
.slider-track{display:flex;height:100%;transition:transform .5s ease;}
.slider-track img{width:100%;height:100%;flex:0 0 100%;object-fit:contain;background:var(--color-charcoal);}
.slider-prev,.slider-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(10,10,10,.65);color:var(--color-gold);border:none;width:44px;height:44px;cursor:pointer;font-size:22px;z-index:5;}
.slider-prev{left:8px;}
.slider-next{right:8px;}
.slider-prev:hover,.slider-next:hover{background:rgba(10,10,10,.9);}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:var(--space-3);}
.slider-dot{width:10px;height:10px;border-radius:50%;background:var(--color-gray);border:none;cursor:pointer;padding:0;}
.slider-dot.active{background:var(--color-gold);}
.slider-instagram-cta{text-align:center;margin-top:var(--space-5);}
.slider-instagram-cta a{
  display:inline-block;padding:13px 28px;background:var(--color-gold);color:var(--color-black);
  font-family:var(--font-family);font-size:var(--text-cta);font-weight:600;text-decoration:none;
  border:2px solid var(--color-gold);transition:background var(--transition-fast);
}
.slider-instagram-cta a:hover{background:var(--color-gold-hover);}

/* legal */
.legal-body h3{color:var(--color-gold);margin:var(--space-6) 0 var(--space-2);font-size:22px;text-transform:none;}
.legal-body h3:first-child{margin-top:0;}
.legal-body p{color:var(--color-gray);font-size:17px;margin-bottom:var(--space-3);max-width:76ch;}

/* footer */
.site-footer{background:var(--color-black);border-top:1px solid rgba(255,255,255,.12);padding:var(--space-7) 0 var(--space-5);}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-6);}
.footer-grid h4{font-size:18px;font-weight:600;color:var(--color-gold);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.04em;}
.footer-grid p,.footer-grid a{font-size:16px;color:var(--color-gray);}
.footer-grid a:hover{color:var(--color-white);}
.footer-bottom{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-caption);color:var(--color-gray);}