/* ============================================================
   RM MAQUINARIA — Sistema de diseño
   Amarillo #F6B210 · Negro carbón · Display: Saira Black Italic
   ============================================================ */

:root{
  --yellow:#F6B210;
  --yellow-deep:#D89800;
  --ink:#0C0B08;
  --carbon:#16140F;
  --smoke:#211E16;
  --paper:#F6F4EE;
  --white:#FFFFFF;
  --gray:#6E6A60;
  --line:rgba(12,11,8,.12);
  --line-light:rgba(255,255,255,.14);
  --wa:#1FAF38;
  --font-display:"Saira", sans-serif;
  --font-body:"Archivo", sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-card:0 18px 50px -18px rgba(12,11,8,.25);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--yellow); color:var(--ink); }

/* ---------- Tipografía display ---------- */
.d1,.d2,.d3,.d4{
  font-family:var(--font-display);
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.d1{ font-size:clamp(56px, 8.4vw, 132px); }
.d2{ font-size:clamp(40px, 5.4vw, 84px); }
.d3{ font-size:clamp(28px, 3.4vw, 52px); }
.d4{ font-size:clamp(20px, 2vw, 30px); }
.kicker{
  font-family:var(--font-display);
  font-weight:700;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:13px;
  color:var(--yellow-deep);
  display:flex;
  align-items:center;
  gap:14px;
}
.kicker::before{ content:""; width:38px; height:3px; background:var(--yellow); flex:none; }
.on-dark .kicker, .kicker.on-dark{ color:var(--yellow); }
.lead{ font-size:clamp(17px,1.4vw,21px); line-height:1.55; color:var(--gray); max-width:56ch; text-wrap:pretty; }
.on-dark .lead{ color:rgba(255,255,255,.66); }

/* ---------- Layout ---------- */
.wrap{ width:min(1240px, calc(100% - 48px)); margin-inline:auto; }
.section{ padding-block:clamp(72px, 9vw, 130px); }
.dark{ background:var(--ink); color:var(--white); }
.dark-2{ background:var(--carbon); color:var(--white); }

/* ---------- Franja de peligro (firma de marca) ---------- */
.hazard{
  height:10px;
  background:repeating-linear-gradient(-45deg, var(--yellow) 0 22px, var(--ink) 22px 44px);
}

/* ---------- Botones ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:15px;
  padding:17px 30px;
  border:none;
  transform:skewX(-8deg);
  transition:transform .35s var(--ease-out), background .25s, color .25s, box-shadow .35s;
  white-space:nowrap;
}
.btn > *{ transform:skewX(8deg); display:inline-flex; align-items:center; gap:10px; }
.btn:hover{ transform:skewX(-8deg) translateY(-3px); }
.btn:active{ transform:skewX(-8deg) translateY(-1px); }
.btn-yellow{ background:var(--yellow); color:var(--ink); box-shadow:0 10px 30px -10px rgba(246,178,16,.55); }
.btn-yellow:hover{ background:var(--ink); color:var(--yellow); box-shadow:0 16px 36px -12px rgba(12,11,8,.5); }
.dark .btn-yellow:hover, .dark-2 .btn-yellow:hover{ background:var(--white); color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--white); }
.btn-ghost-light{ background:transparent; color:var(--white); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.btn-ghost-light:hover{ background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 2px var(--white); }
.btn-wa{ background:var(--wa); color:#fff; box-shadow:0 10px 30px -10px rgba(31,175,56,.55); }
.btn-wa:hover{ background:var(--ink); color:#fff; }
.icon-wa{ width:19px; height:19px; flex:none; }

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  transition:background .4s, box-shadow .4s, transform .4s;
}
.site-header .hazard{ height:6px; }
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:14px;
}
.site-header.scrolled{
  background:rgba(12,11,8,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 40px -20px rgba(0,0,0,.6);
}
.logo-link{ display:flex; align-items:center; gap:12px; flex:none; }
.logo-link img{ height:44px; width:auto; transition:transform .35s var(--ease-out); }
.logo-link:hover img{ transform:scale(1.06) rotate(-2deg); }
.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-family:var(--font-display);
  font-weight:700;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:13.5px;
  color:rgba(255,255,255,.78);
  position:relative;
  padding-block:6px;
  transition:color .25s;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:2px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.main-nav a:hover, .main-nav a.active{ color:var(--white); }
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); transform-origin:left; }
.header-cta{ display:flex; align-items:center; gap:14px; }
.btn-sm{ padding:12px 22px; font-size:13px; }

/* mobile nav */
.nav-toggle{ display:none; background:none; border:none; width:44px; height:44px; position:relative; z-index:101; }
.nav-toggle span{ display:block; width:26px; height:3px; background:var(--white); margin:5px auto; transition:transform .35s var(--ease-out), opacity .25s; }
@media (max-width:920px){
  .main-nav{
    position:fixed; inset:0;
    background:var(--ink);
    flex-direction:column;
    justify-content:center;
    gap:30px;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s;
    z-index:100;
  }
  .main-nav a{ font-size:26px; }
  body.nav-open .main-nav{ opacity:1; pointer-events:auto; }
  .nav-toggle{ display:block; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  .header-cta .btn{ display:none; }
}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--line-light);
  padding-block:18px;
  display:flex;
}
.marquee-track{
  display:flex;
  gap:0;
  flex:none;
  animation:marquee 30s linear infinite;
}
.marquee-track span{
  font-family:var(--font-display);
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  font-size:18px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.55);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
}
.marquee-track span::after{ content:"●"; color:var(--yellow); font-size:9px; margin-inline:28px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Tarjetas de producto ---------- */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(265px, 1fr));
  gap:26px;
}
.prod-card{
  background:var(--white);
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 0 var(--line), 0 0 0 1px var(--line);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  position:relative;
  overflow:hidden;
}
.prod-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-card), 0 0 0 1px var(--line); }
.prod-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:4px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.prod-card:hover::after{ transform:scaleX(1); }
.prod-card-img{
  aspect-ratio:4/3.4;
  overflow:hidden;
  position:relative;
  background:#EFEDE6;
}
.prod-card-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.prod-card:hover .prod-card-img img{ transform:scale(1.07); }
.prod-card-tag{
  position:absolute;
  top:14px; left:14px;
  background:var(--ink);
  color:var(--yellow);
  font-family:var(--font-display);
  font-weight:700;
  font-style:italic;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.12em;
  padding:6px 12px;
}
.prod-card-body{
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}
.prod-card-body h3{
  font-family:var(--font-display);
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  font-size:18px;
  line-height:1.15;
  letter-spacing:.01em;
}
.prod-card-cta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  white-space:nowrap;
  font-family:var(--font-display);
  font-weight:700;
  font-style:italic;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--ink);
}
.prod-card-cta .arrow{ transition:transform .35s var(--ease-out); }
.prod-card:hover .prod-card-cta .arrow{ transform:translateX(6px); }

/* ---------- Chips de filtro ---------- */
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:var(--font-display);
  font-weight:700;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  padding:10px 20px;
  white-space:nowrap;
  background:transparent;
  border:1px solid var(--line-light);
  color:rgba(255,255,255,.7);
  transform:skewX(-8deg);
  transition:all .3s var(--ease-out);
}
.chip > span{ display:inline-block; transform:skewX(8deg); }
.chip:hover{ border-color:var(--yellow); color:var(--yellow); }
.chip.active{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }

/* ---------- Reveal on scroll ---------- */
.rv{ opacity:0; transform:translateY(36px); }
.rv.in{ opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv-l{ opacity:0; transform:translateX(-48px); }
.rv-l.in{ opacity:1; transform:none; transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.rv-r{ opacity:0; transform:translateX(48px); }
.rv-r.in{ opacity:1; transform:none; transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.rv-zoom{ opacity:0; transform:scale(.92); }
.rv-zoom.in{ opacity:1; transform:none; transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
[data-stagger] > *{ opacity:0; transform:translateY(30px); }
[data-stagger].in > *{ opacity:1; transform:none; transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay:calc(var(--i, 0) * 90ms); }

/* títulos con clip-reveal por líneas */
.line-reveal .lr{ display:block; overflow:hidden; }
.line-reveal .lr > span{ display:block; transform:translateY(110%); }
.line-reveal.in .lr > span{ transform:none; transition:transform 1s var(--ease-out); }
.line-reveal.in .lr:nth-child(2) > span{ transition-delay:.1s; }
.line-reveal.in .lr:nth-child(3) > span{ transition-delay:.2s; }

@media (prefers-reduced-motion: reduce){
  .rv,.rv-l,.rv-r,.rv-zoom,[data-stagger] > *{ opacity:1 !important; transform:none !important; }
  .line-reveal .lr > span{ transform:none !important; }
  .marquee-track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Transición de página ---------- */
.page-wipe{
  position:fixed;
  inset:0;
  z-index:999;
  background:var(--yellow);
  transform:scaleY(0);
  transform-origin:top;
  pointer-events:none;
}
.page-wipe::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ink);
  transform:scaleY(0);
  transform-origin:top;
}
body.wipe-out .page-wipe{ transform:scaleY(1); transition:transform .5s var(--ease-out); }
body.wipe-out .page-wipe::after{ transform:scaleY(1); transition:transform .5s var(--ease-out) .08s; }
body.wipe-in .page-wipe{ transform:scaleY(1); }
body.wipe-in .page-wipe::after{ transform:scaleY(1); }
body.wipe-in.loaded .page-wipe{ transform:scaleY(0); transform-origin:bottom; transition:transform .6s var(--ease-out) .12s; }
body.wipe-in.loaded .page-wipe::after{ transform:scaleY(0); transform-origin:bottom; transition:transform .6s var(--ease-out); }
body.wipe-done .page-wipe{ display:none; }

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed;
  right:26px; bottom:26px;
  z-index:80;
  width:60px; height:60px;
  border-radius:50%;
  background:var(--wa);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 36px -10px rgba(31,175,56,.65);
  transition:transform .35s var(--ease-out);
}
.wa-float:hover{ transform:scale(1.12) rotate(8deg); }
.wa-float svg{ width:30px; height:30px; }
.wa-float::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid var(--wa);
  opacity:.5;
  animation:wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(.8); opacity:.6; }
  100%{ transform:scale(1.35); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .wa-float::before{ animation:none; } }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--white); }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:48px;
  padding-block:70px 50px;
}
.footer-grid h4{
  font-family:var(--font-display);
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:.16em;
  color:var(--yellow);
  margin-bottom:18px;
}
.footer-grid ul{ display:grid; gap:10px; }
.footer-grid a, .footer-grid p{ color:rgba(255,255,255,.62); font-size:15px; transition:color .25s; }
.footer-grid a:hover{ color:var(--yellow); }
.footer-logo img{ height:54px; margin-bottom:18px; }
.footer-bottom{
  border-top:1px solid var(--line-light);
  padding-block:22px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:13px;
  color:rgba(255,255,255,.4);
}
@media (max-width:920px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
}

/* ---------- Texto fantasma de fondo ---------- */
.ghost{
  position:absolute;
  font-family:var(--font-display);
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}
.ghost-dark{ -webkit-text-stroke:1px rgba(12,11,8,.08); }

/* ---------- Banda CTA final ---------- */
.cta-band{
  background:var(--yellow);
  color:var(--ink);
  position:relative;
  overflow:hidden;
}
.cta-band .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  flex-wrap:wrap;
  padding-block:clamp(56px,7vw,96px);
  position:relative;
  z-index:1;
}
.cta-band .d2{ max-width:14ch; }
.cta-band .ghost{ inset:auto -2% -18% auto; font-size:22vw; -webkit-text-stroke:1.5px rgba(12,11,8,.10); }

/* helpers */
.tag-dark{
  display:inline-block;
  background:var(--ink);
  color:var(--yellow);
  font-family:var(--font-display);
  font-weight:700;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  padding:8px 16px;
}
.yellow-it{ color:var(--yellow); }
.flow > * + *{ margin-top:22px; }