/* ==========================================================================
   CME Bakery Solutions — design system
   Industrial nameplate aesthetic: brushed steel, control-panel rivets,
   blueprint grid, oven-crust amber. Display type reads like factory signage.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800;900&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Brand: Turmeric #ffbe0b + Malt #2a2312 */
  --bg: #2a2312;
  --bg-alt: #332b17;
  --surface: #3c331c;
  --surface-2: #453923;
  --line: rgba(255,190,11,0.14);
  --line-strong: rgba(255,190,11,0.28);

  --paper: #f7f1e2;
  --paper-alt: #efe4c8;
  --ink: #2a2312;
  --ink-soft: #6b5c3a;

  --steel: #a8ada9;
  --steel-dark: #5c6360;

  --gold: #ffbe0b;
  --gold-soft: #ffd35c;
  --rust: #b8790c;
  --green: #3fae6a;

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1240px;
  --radius: 6px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:800; letter-spacing:0.01em; }
p{ margin:0; }

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: 24px;
}

::selection{ background: var(--gold); color: var(--ink); }

/* -------------------------------------------------------------- utilities */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background: var(--rust);
}
.on-dark .eyebrow{ color: var(--gold); }
.on-dark .eyebrow::before{ background: var(--gold); }

.section{ padding: 108px 0; }
.section-head{
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head h2{
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin-top:14px;
}
.section-head .lede{
  margin-top: 18px;
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 52ch;
}
.on-dark .section-head .lede{ color: rgba(244,237,225,0.72); }
.accent{ color: var(--rust); }
.on-dark .accent{ color: var(--gold); }

.bg-dark{ background: var(--bg); color: var(--paper); }

/* blueprint grid backdrop */
.blueprint{
  position:relative;
  background-image:
    linear-gradient(rgba(243,236,220,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,236,220,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
}
.blueprint::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 18% 20%, rgba(242,169,13,0.10), transparent 40%),
              radial-gradient(circle at 85% 75%, rgba(217,113,31,0.10), transparent 45%);
  pointer-events:none;
}

/* corner bracket frame — technical-drawing register marks */
.bracket{ position:relative; }
.bracket::before,
.bracket::after{
  content:"";
  position:absolute;
  width:22px; height:22px;
  border: 2px solid var(--gold);
  opacity:0.9;
}
.bracket::before{ top:-10px; left:-10px; border-right:none; border-bottom:none; }
.bracket::after{ bottom:-10px; right:-10px; border-left:none; border-top:none; }

/* rivet dots for nameplate cards */
.riveted{ position:relative; }
.riveted::before,
.riveted::after{
  content:"";
  position:absolute;
  top:10px;
  width:6px; height:6px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #cfd3d0, #6a6f6c 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.riveted::before{ left:10px; }
.riveted::after{ right:10px; }
.riveted-bottom::before,
.riveted-bottom::after{
  content:"";
  position:absolute;
  bottom:10px;
  top:auto;
  width:6px; height:6px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #cfd3d0, #6a6f6c 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.riveted-bottom::before{ left:10px; }
.riveted-bottom::after{ right:10px; }

/* buttons — read like control-panel switches */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-solid{
  background: var(--gold);
  color: #1a1408;
  box-shadow: 0 6px 0 0 #a9740a, 0 10px 18px rgba(242,169,13,0.28);
}
.btn-solid:hover{ background: var(--gold-soft); box-shadow: 0 6px 0 0 #a9740a, 0 12px 22px rgba(242,169,13,0.38); transform: translateY(-2px); }
.btn-ghost{
  background: transparent;
  border-color: var(--line-strong);
  color: var(--paper);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }
.btn-dark{
  background: var(--ink);
  color: var(--paper);
}
.btn-dark:hover{ background:#000; }
.btn-outline-ink{
  background: transparent;
  border-color: rgba(26,22,16,0.25);
  color: var(--ink);
}
.btn-outline-ink:hover{ border-color: var(--rust); color: var(--rust); }
.btn-sm{ padding: 11px 20px; font-size:12px; }
.btn-wa{ background: var(--green); color:#08210f; box-shadow: 0 6px 0 0 #1f6b3d; }
.btn-wa:hover{ background:#4fc27c; transform: translateY(-2px); }

/* ============================================================== HEADER == */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(21,19,15,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 84px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{ height:56px; width:auto; }

.main-nav ul{ display:flex; align-items:center; gap: 34px; }
.main-nav a{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244,237,225,0.78);
  position:relative;
  padding: 6px 2px;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background: var(--gold);
  transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.main-nav a:hover{ color: var(--paper); }
.main-nav a:hover::after{ transform: scaleX(1); }

.header-cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{
  display:none;
  width: 42px; height: 42px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--paper);
  align-items:center;justify-content:center;
}

/* ================================================================ HERO == */
.hero{
  position:relative;
  padding: 84px 0 96px;
  overflow:hidden;
  background: var(--bg);
}
.hero .container{ position:relative; z-index:2; }
.hero-inner{
  max-width: 760px;
  padding: 46px 40px 46px 0;
}
.hero .kicker{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-mono);
  color: var(--gold);
  font-size:13px; letter-spacing:0.2em; text-transform:uppercase;
  margin-bottom: 26px;
}
.hero .kicker .dot{ width:8px; height:8px; border-radius:50%; background: var(--green); box-shadow:0 0 0 3px rgba(63,174,106,0.25); animation: pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(63,174,106,0.25);} 50%{ box-shadow:0 0 0 6px rgba(63,174,106,0.12);} }

.hero h1{
  color: var(--paper);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 0.98;
  text-transform: uppercase;
}
.hero h1 span{ color: var(--gold); }
.hero h1 .line{
  display:block;
  overflow:hidden;
}
.hero h1 .line span.reveal-inner{
  display:block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.16,.84,.44,1);
}
.hero h1.in .line span.reveal-inner{ transform:none; }
.hero h1 .line:nth-child(1) span.reveal-inner{ transition-delay: .05s; }
.hero h1 .line:nth-child(2) span.reveal-inner{ transition-delay: .16s; }
.hero h1 .line:nth-child(3) span.reveal-inner{ transition-delay: .27s; }
.hero p.lede{
  margin-top: 26px;
  font-size: 1.15rem;
  color: rgba(244,237,225,0.75);
  max-width: 54ch;
}
.hero .cta-row{ display:flex; gap:18px; margin-top:40px; flex-wrap:wrap; }

.hero-stats{
  display:flex; gap:0;
  margin-top:64px;
  border-top:1px solid var(--line);
  padding-top: 28px;
}
.hero-stats .stat{ padding-right:44px; margin-right:44px; border-right:1px solid var(--line); }
.hero-stats .stat:last-child{ border-right:none; }
.hero-stats .num{ font-family:var(--font-display); font-size:2.3rem; color:var(--paper); line-height:1; }
.hero-stats .num span{ color:var(--gold); }
.hero-stats .label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(244,237,225,0.55); margin-top:6px; }

.hero-media{
  position:absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 46%;
  max-width: 620px;
  z-index:1;
}
.hero-media .frame{
  position:relative;
  border-radius: 10px;
  overflow:hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px rgba(0,0,0,0.55);
}
.hero-media img{ width:100%; height:560px; object-fit:cover; filter: saturate(1.05) contrast(1.03); transition: transform .2s ease-out; }
.tag-plate{
  position:absolute; left:18px; bottom:18px;
  background: rgba(21,19,15,0.85);
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:8px 16px;
  font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold);
}
@media (max-width: 1080px){ .hero-media{ display:none; } }

/* ==================================================== DOUGH / GLUTEN == */
.hero-bg-dough{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  z-index:0;
  opacity:0.7;
  overflow:hidden;
  pointer-events:none;
}
.hero-bg-dough .dough-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-bg-dough .mesh-line.s1{ stroke: rgba(255,190,11,0.22); }
.hero-bg-dough .mesh-line.s2{ stroke: rgba(247,241,226,0.15); }
.hero-bg-dough .mesh-line.s3{ stroke: rgba(255,190,11,0.11); }
.hero-bg-dough .bubble{ fill: rgba(247,241,226,0.08); stroke: rgba(247,241,226,0.12); }

.dough-visual{ cursor: default; }
.dough-svg{ width:100%; height:560px; display:block; }

.mesh-line{ fill:none; stroke-linecap:round; transform-box: fill-box; transform-origin: center; }
.mesh-line.s1{ stroke: rgba(255,190,11,0.32); stroke-width:2.4; }
.mesh-line.s2{ stroke: rgba(247,241,226,0.22); stroke-width:1.8; }
.mesh-line.s3{ stroke: rgba(255,190,11,0.15); stroke-width:1.3; }

.mesh-strands-h .mesh-line{ animation: strand-breathe-h 7s ease-in-out infinite; }
.mesh-strands-v .mesh-line{ animation: strand-breathe-v 8.5s ease-in-out infinite; }
.mesh-strands-h .mesh-line:nth-child(1){ animation-delay: 0s; }
.mesh-strands-h .mesh-line:nth-child(2){ animation-delay: -1.2s; }
.mesh-strands-h .mesh-line:nth-child(3){ animation-delay: -2.4s; }
.mesh-strands-h .mesh-line:nth-child(4){ animation-delay: -3.6s; }
.mesh-strands-h .mesh-line:nth-child(5){ animation-delay: -4.8s; }
.mesh-strands-h .mesh-line:nth-child(6){ animation-delay: -6s; }
.mesh-strands-v .mesh-line:nth-child(1){ animation-delay: -0.6s; }
.mesh-strands-v .mesh-line:nth-child(2){ animation-delay: -2s; }
.mesh-strands-v .mesh-line:nth-child(3){ animation-delay: -3.4s; }
.mesh-strands-v .mesh-line:nth-child(4){ animation-delay: -4.8s; }
.mesh-strands-v .mesh-line:nth-child(5){ animation-delay: -6.2s; }

@keyframes strand-breathe-h{
  0%, 100%{ transform: translateY(0) scaleX(1); }
  50%{ transform: translateY(5px) scaleX(1.02); }
}
@keyframes strand-breathe-v{
  0%, 100%{ transform: translateX(0) scaleY(1); }
  50%{ transform: translateX(5px) scaleY(1.02); }
}

.dough-mesh{
  transform-origin: 300px 350px;
  animation: mesh-whole-breathe 11s ease-in-out infinite;
}
@keyframes mesh-whole-breathe{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.014); }
}

.dough-hover-layer{
  transform: translate(calc(var(--hx, 0) * 1px), calc(var(--hy, 0) * 1px)) scale(calc(1 + var(--hs, 0)));
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
  opacity: 0.8;
}

.bubble{
  fill: rgba(247,241,226,0.12);
  stroke: rgba(247,241,226,0.2);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: bubble-drift 9s ease-in-out infinite;
}
.bubble.b1{ animation-duration: 8s; }
.bubble.b2{ animation-duration: 10.5s; animation-delay: -3s; }
.bubble.b3{ animation-duration: 12.5s; animation-delay: -6s; }
@keyframes bubble-drift{
  0%, 100%{ transform: translateY(0) scale(1); opacity:.7; }
  50%{ transform: translateY(-9px) scale(1.15); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .mesh-line, .dough-mesh, .bubble{ animation: none; }
}

/* -------------------------------------------------------- trust strip -- */
.trust{
  background: var(--bg-alt);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: 34px 0;
  overflow:hidden;
}
.trust-row{ display:flex; align-items:center; gap:20px; }
.trust-label{
  font-family: var(--font-mono);
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color: rgba(244,237,225,0.5);
  white-space:nowrap;
  padding-right:28px;
  border-right:1px solid var(--line);
}
.trust-track-mask{
  flex:1;
  overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-track{
  display:flex; gap:48px;
  width:max-content;
  animation: trust-scroll 28s linear infinite;
}
.trust-track:hover{ animation-play-state: paused; }
.trust-track span{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  color: rgba(244,237,225,0.4);
  white-space:nowrap;
  letter-spacing:0.02em;
  text-transform:uppercase;
}
@keyframes trust-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============================================================ PRODUCTS == */
.products-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.p-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.p-card:hover{ transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 24px 40px rgba(0,0,0,0.35); }
.p-card .shot{
  position:relative;
  height: 210px;
  background: var(--paper);
}
.p-card .shot img{ width:100%; height:100%; object-fit:contain; padding: 18px; mix-blend-mode: multiply; }
.p-card .idx{
  position:absolute; top:12px; left:12px;
  font-family:var(--font-mono); font-size:11px; color: rgba(26,22,16,0.4);
}
.p-card .shot-link{ display:block; }
.p-card .body{ padding: 22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.p-card .body .shot-link{ display:block; width:fit-content; }
.p-card h3{ color:var(--paper); font-size:1.3rem; text-transform:uppercase; letter-spacing:0.01em; }
.p-card p{ color: rgba(244,237,225,0.62); font-size:0.92rem; flex:1; }
.p-card .actions{ display:flex; gap:10px; margin-top:12px; }

/* ============================================================ FEATURES == */
.feature{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items:center;
}
.feature.reverse .feature-media{ order:2; }
.feature.reverse .feature-copy{ order:1; }
.feature-copy h3{
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  text-transform:uppercase;
  margin-top:14px;
  line-height:1.05;
}
.feature-copy .lede{ margin-top:20px; color: var(--ink-soft); font-size:1.02rem; max-width:48ch; }
.on-dark .feature-copy .lede{ color: rgba(244,237,225,0.7); }
.spec-list{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.spec-list li{
  display:flex; align-items:baseline; gap:12px;
  font-family: var(--font-mono);
  font-size:13px;
  color: var(--ink-soft);
  padding-bottom:12px;
  border-bottom: 1px dashed rgba(26,22,16,0.18);
}
.on-dark .spec-list li{ color: rgba(244,237,225,0.75); border-bottom-color: var(--line); }
.spec-list li::before{ content:"▸"; color: var(--rust); }
.on-dark .spec-list li::before{ color: var(--gold); }

.feature-media{ position:relative; }
.feature-media .frame{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line-strong);
  position:relative;
}
.feature-media img{ width:100%; height:420px; object-fit:cover; }
.on-light .feature-media .frame{ border-color: rgba(26,22,16,0.14); box-shadow: 0 30px 60px rgba(26,22,16,0.14); }

.plate{
  position:absolute; bottom:-22px; left:-22px;
  background: var(--bg);
  color: var(--paper);
  border:1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-family: var(--font-mono);
  min-width:190px;
}
.plate .n{ font-family: var(--font-display); font-size:2rem; color: var(--gold); line-height:1; }
.plate .t{ font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color: rgba(244,237,225,0.6); margin-top:6px; }

.feature-block + .feature-block{ margin-top: 96px; }

/* ======================================================= MICRO SECTION == */
.micro-wrap{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:56px;
  align-items:center;
}
.micro-photo{ position:relative; }
.micro-photo .frame{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.micro-photo .frame img{ width:100%; height:440px; object-fit:cover; }

.micro-dial{
  position:absolute;
  right:-26px; bottom:-26px;
  width:150px; height:150px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(242,169,13,0.35), transparent 45%),
    conic-gradient(from 0deg, #2a251c 0deg 300deg, var(--gold) 300deg 360deg);
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--line-strong);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.micro-dial::before{
  content:"";
  position:absolute; inset:12%;
  border-radius:50%;
  background: var(--bg);
  border:1px solid var(--line);
}
.micro-dial .readout{
  position:relative; z-index:2;
  text-align:center;
  font-family: var(--font-mono);
  color: var(--paper);
}
.micro-dial .readout .g{ font-family:var(--font-display); font-size:1.7rem; color:var(--gold); line-height:1; }
.micro-dial .readout .u{ font-size:7.5px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(244,237,225,0.6); margin-top:4px; }

.micro-list{ margin-top:28px; display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.micro-list .chip{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px 18px;
  font-family: var(--font-mono);
  font-size:12.5px;
  color: rgba(244,237,225,0.75);
}
.micro-list .chip b{ display:block; color:var(--paper); font-family:var(--font-body); font-size:14px; margin-bottom:4px; }

/* =============================================================== ABOUT == */
.about-quote{
  margin-top: 34px;
  padding: 28px 30px;
  border-left: 3px solid var(--rust);
  background: var(--paper-alt);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height:1.2;
  text-transform: uppercase;
}

/* ==================================================== NOSOTROS SPLIT === */
.nosotros-intro{ max-width:760px; margin:0 auto 64px; text-align:center; }
.nosotros-intro .eyebrow{ justify-content:center; }
.nosotros-title{ margin-top:14px; font-size:clamp(2rem,3.6vw,2.8rem); text-transform:uppercase; line-height:1.05; }
.nosotros-intro .about-quote{ margin:34px auto 0; max-width:620px; text-align:left; }

/* --- Opposite Scroll Content (pinned) ---------------------------------
   The wrap is 4 viewports tall to give the scroll room. Inside it, .nosotros-pin
   sticks full-screen (frozen) for the whole wrap, and the two tracks translate
   in OPPOSITE directions in lockstep with scroll progress: text slides up while
   the (reverse-stacked) images slide down, staying aligned by index. Driven by
   updateNosotrosScroll() in main.js. */
.nosotros-split-wrap{ height: calc(4 * (100vh - 85px)); }
.nosotros-pin{ position:sticky; top:85px; height:calc(100vh - 85px); }
/* The container between the pin and the split must pass the pin's definite
   height down, otherwise .nosotros-split{height:100%} resolves to auto and
   the grid collapses to 0 (its columns only hold absolute tracks). */
.nosotros-pin > .container{ height:100%; }

.nosotros-split{
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  height:100%;
  border: 2px solid var(--ink);
  box-shadow: 0 30px 70px rgba(26,22,16,0.18);
  overflow:hidden;
}
.nosotros-text-col{ position:relative; overflow:hidden; border-right: 2px solid var(--ink); }
.nosotros-text-track{ position:absolute; inset:0 0 auto 0; will-change:transform; }

.nosotros-block{
  height: calc(100vh - 85px);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 56px;
  border-top: 2px solid var(--ink);
}
.nosotros-block:first-child{ border-top:none; }

/* Alternating panels — dark/light rhythm, CME turmeric-on-malt instead of plain black/white */
.nosotros-block:nth-child(odd){ background: var(--ink); }
.nosotros-block:nth-child(odd) .nosotros-num{ color: var(--gold); }
.nosotros-block:nth-child(odd) h3{ color: var(--paper); }
.nosotros-block:nth-child(odd) p{ color: rgba(247,241,226,0.7); }

.nosotros-block:nth-child(even){ background: var(--paper); }
.nosotros-block:nth-child(even) .nosotros-num{ color: var(--rust); }
.nosotros-block:nth-child(even) h3{ color: var(--ink); }
.nosotros-block:nth-child(even) p{ color: var(--ink-soft); }

.nosotros-block .nosotros-block-img{ display:none; }

.nosotros-num{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; }
.nosotros-block h3{ margin-top:14px; font-size:clamp(1.5rem,2.4vw,2rem); text-transform:uppercase; line-height:1.1; max-width:16ch; }
.nosotros-block p{ font-size:1.02rem; max-width:44ch; }

.nosotros-media-col{ position:relative; overflow:hidden; }
.nosotros-img-track{ position:absolute; inset:0 0 auto 0; will-change:transform; }
.nosotros-img{ position:relative; width:100%; height:calc(100vh - 85px); }
.nosotros-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.nosotros-img::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(26,22,16,0.55) 100%);
  pointer-events:none;
}

@media (max-width:1024px){
  /* Unpin everything: normal stacked flow, image above each text block */
  .nosotros-split-wrap{ height:auto; }
  .nosotros-pin{ position:static; height:auto; }
  .nosotros-split{ grid-template-columns:1fr; height:auto; border-width:2px; overflow:visible; }
  .nosotros-text-col{ position:static; overflow:visible; border-right:none; }
  .nosotros-text-track{ position:static; transform:none !important; }
  .nosotros-media-col{ display:none; }
  .nosotros-block{ height:auto; padding:32px 24px; border-top:2px solid var(--ink); }
  .nosotros-block:first-child{ padding-top:24px; }
  .nosotros-block .nosotros-block-img{ display:block; margin-bottom:20px; }
  .nosotros-block .nosotros-block-img img{ width:100%; height:240px; object-fit:cover; display:block; }
}
@media (max-width:640px){
  .nosotros-intro{ margin-bottom:40px; }
  .nosotros-block{ padding:28px 20px; }
  .nosotros-block .nosotros-block-img img{ height:200px; }
}

/* ========================================================== REPUESTOS == */
.repuestos-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.r-chip{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 22px;
  min-height: 108px;
  display:flex; align-items:center;
  background: var(--surface);
  text-decoration:none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.r-chip:hover{ border-color: var(--gold); transform: translateY(-4px); background: rgba(255,190,11,0.06); }
.r-chip span{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; text-transform:uppercase; line-height:1.15; color:var(--paper); }
.r-chip:hover span{ color: var(--gold); }
.repuestos-cta{ margin-top:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:36px; border-top:1px solid var(--line); }
.repuestos-cta p{ color: rgba(244,237,225,0.65); max-width:46ch; }

/* ============================================================== CTA ==== */
.cta-banner{
  position:relative;
  padding: 96px 0;
  background: var(--bg);
  text-align:center;
  overflow:hidden;
}
.cta-banner .glow{
  position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:900px; height:420px;
  background: radial-gradient(ellipse at center, rgba(242,169,13,0.35), transparent 65%);
  filter: blur(10px);
  pointer-events:none;
}
.cta-banner h2{
  position:relative; z-index:1;
  color:var(--paper);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  text-transform:uppercase;
}
.cta-banner h2 > span:not([data-bubble-text]){ color:var(--gold); }

/* Bubble text — letter-by-letter hover ripple on the CTA headline */
.hoverText{
  display:inline-block;
  transition: font-weight .35s ease, color .35s ease;
}
.hoverText:hover{ font-weight:900; color: var(--gold); }
.hoverText:hover + .hoverText{ font-weight:600; color: var(--gold-soft); }
.hoverText:hover + .hoverText + .hoverText{ font-weight:500; }
.hoverText:has(+ .hoverText:hover){ font-weight:600; color: var(--gold-soft); }
.hoverText:has(+ .hoverText + .hoverText:hover){ font-weight:500; }
.cta-banner p{ position:relative; z-index:1; margin:22px auto 0; max-width:52ch; color: rgba(244,237,225,0.7); font-size:1.05rem; }
.cta-banner .cta-row{ position:relative; z-index:1; margin-top:38px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

/* =========================================================== CONTACT === */
.contact-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
}
.contact-info .item{ padding: 22px 0; border-bottom:1px solid rgba(26,22,16,0.14); }
.contact-info .item:first-child{ padding-top:0; }
.contact-info .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--rust); }
.contact-info .v{ margin-top:8px; font-size:1.1rem; }
.contact-info .hours{ display:flex; justify-content:space-between; max-width:280px; font-family:var(--font-mono); font-size:13px; padding:4px 0; color:var(--ink-soft); }

.contact-form{
  background: var(--bg);
  border-radius: var(--radius);
  padding: 40px;
  position:relative;
}
.contact-form h3{ color:var(--paper); font-size:1.5rem; text-transform:uppercase; }
.contact-form p.note{ color: rgba(244,237,225,0.6); margin-top:10px; font-size:0.92rem; }
.field{ margin-top:22px; }
.field label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: rgba(244,237,225,0.6); margin-bottom:8px; }
.field input, .field textarea{
  width:100%;
  background: rgba(244,237,225,0.04);
  border:1px solid var(--line-strong);
  border-radius:4px;
  padding:13px 14px;
  color:var(--paper);
  font-family: var(--font-body);
  font-size:0.95rem;
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--gold); }
.field textarea{ resize:vertical; min-height:110px; }
.contact-form .submit-row{ margin-top:26px; display:flex; align-items:center; gap:18px; }
.contact-form .fine{ font-size:11.5px; color: rgba(244,237,225,0.5); }
.contact-form .fine a{ text-decoration:underline; color: rgba(244,237,225,0.7); }

/* ============================================================== FOOTER == */
.site-footer{ background: var(--bg); color: rgba(244,237,225,0.7); padding: 72px 0 28px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:40px; }
.footer-grid h4{ color:var(--paper); font-size:1rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:18px; font-family:var(--font-mono); font-weight:600; }
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ font-size:0.9rem; max-width:32ch; }
.footer-grid ul li{ margin-bottom:10px; font-size:0.92rem; }
.footer-grid ul a:hover{ color: var(--gold); }
.social-row{ display:flex; gap:12px; margin-top:6px; }
.social-row a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
}
.social-row a:hover{ border-color:var(--gold); color:var(--gold); }
.footer-bottom{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family:var(--font-mono); font-size:11.5px; color: rgba(244,237,225,0.45);
}
.footer-bottom .legal{ display:flex; gap:22px; }
.footer-bottom a:hover{ color:var(--paper); }

/* ============================================================= REVEAL === */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-group] > *{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal-group].in > *{ opacity:1; transform:none; }
[data-reveal-group].in > *:nth-child(1){ transition-delay: .05s; }
[data-reveal-group].in > *:nth-child(2){ transition-delay: .12s; }
[data-reveal-group].in > *:nth-child(3){ transition-delay: .19s; }
[data-reveal-group].in > *:nth-child(4){ transition-delay: .26s; }
[data-reveal-group].in > *:nth-child(5){ transition-delay: .33s; }
[data-reveal-group].in > *:nth-child(6){ transition-delay: .40s; }

/* ============================================================ MOBILE === */
@media (max-width: 960px){
  .products-grid{ grid-template-columns: repeat(2,1fr); }
  .repuestos-grid{ grid-template-columns: repeat(2,1fr); }
  .feature, .contact-grid, .micro-wrap{ grid-template-columns: 1fr; }
  .feature.reverse .feature-media, .feature.reverse .feature-copy{ order:initial; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .hero-stats{ flex-wrap:wrap; gap:24px; }
  .hero-stats .stat{ padding-right:0; margin-right:0; border-right:none; }
}
@media (max-width: 720px){
  .section{ padding: 76px 0; }
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-cta .btn span.full{ display:none; }
  .products-grid{ grid-template-columns: 1fr; }
  .repuestos-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .plate{ position:static; margin-top:16px; }
  .micro-dial{ width:110px; height:110px; right:12px; bottom:-20px; }
}

/* mobile drawer */
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; z-index:200;
  width:min(86vw, 360px);
  background: var(--bg);
  border-left:1px solid var(--line);
  transform: translateX(100%);
  transition: transform .35s ease;
  padding: 28px 26px;
  display:flex; flex-direction:column; gap:28px;
}
.mobile-drawer.open{ transform:none; }
.mobile-drawer ul{ display:flex; flex-direction:column; gap:22px; }
.mobile-drawer a{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.06em; font-size:16px; color:var(--paper); }
.drawer-close{ align-self:flex-end; background:none; border:1px solid var(--line-strong); color:var(--paper); width:40px; height:40px; border-radius:50%; }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:190; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.scrim.open{ opacity:1; pointer-events:auto; }

/* ===================================================== SCROLL PROGRESS == */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--rust), var(--gold));
  z-index: 300;
  box-shadow: 0 0 10px rgba(255,190,11,0.55);
}

/* ========================================================= BACK TO TOP == */
.back-to-top{
  position:fixed; right:26px; bottom:26px; z-index:150;
  width:50px; height:50px; border-radius:50%;
  background: var(--bg);
  border:1px solid var(--line-strong);
  color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transform: translateY(14px) scale(.9);
  transition: opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease;
  box-shadow: 0 16px 32px rgba(0,0,0,0.4);
}
.back-to-top.visible{ opacity:1; pointer-events:auto; transform:none; }
.back-to-top:hover{ background: var(--gold); color: var(--bg); transform: translateY(-3px); }

/* ============================================================ NAV SPY === */
.main-nav a.active{ color: var(--paper); }
.main-nav a.active::after{ transform: scaleX(1); }

/* ==================================================== CARD SPOTLIGHT === */
.p-card, .r-chip{ position:relative; }
.p-card::before, .r-chip::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(255,190,11,0.16), transparent 62%);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
  z-index:0;
}
.p-card:hover::before, .r-chip:hover::before{ opacity:1; }
.p-card .shot, .p-card .body, .r-chip span{ position:relative; z-index:1; }

/* ==================================================== SCROLL IMG WIPE == */
[data-reveal-img]{
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s cubic-bezier(.16,.84,.44,1);
}
[data-reveal-img].in{ clip-path: inset(0 0 0 0); }

/* ========================================================= BREADCRUMB == */
.breadcrumb{
  padding: 22px 0;
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color: rgba(244,237,225,0.5);
  border-bottom:1px solid var(--line);
  background: var(--bg);
}
.breadcrumb a{ color: rgba(244,237,225,0.75); }
.breadcrumb a:hover{ color: var(--gold); }
.breadcrumb span.sep{ margin:0 10px; opacity:.4; }
.breadcrumb span.current{ color: var(--gold); }

/* ======================================================= MACHINE HERO == */
.machine-hero{
  padding: 64px 0 88px;
  background: var(--bg);
  position:relative;
  overflow:hidden;
}
.machine-hero .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:56px;
  align-items:center;
  position:relative; z-index:1;
}
.machine-hero .idx-code{
  font-family: var(--font-mono);
  font-size:13px; letter-spacing:0.16em;
  color: var(--gold);
  margin-bottom:18px;
  display:block;
}
.machine-hero h1{
  color:var(--paper);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  text-transform:uppercase;
  line-height:0.98;
}
.machine-hero .lede{ margin-top:22px; font-size:1.08rem; color:rgba(244,237,225,0.72); max-width:50ch; }
.machine-hero .cta-row{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.machine-hero .shot{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line-strong);
  background: var(--paper);
  box-shadow: 0 34px 70px rgba(0,0,0,0.45);
}
.machine-hero .shot img{ width:100%; height:460px; object-fit:contain; padding:32px; mix-blend-mode:multiply; }

/* ============================================================= GALLERY == */
.gallery-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
}
.gallery-main, .gallery-thumb{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line-strong);
  cursor: zoom-in;
  display:block;
  background:none;
  padding:0;
  width:100%;
  text-align:left;
}
.gallery-main:hover .tag-plate, .gallery-thumb:hover .tag-plate{ background: rgba(21,19,15,0.95); }
.gallery-main.on-paper{ background: var(--paper); }
.gallery-main.on-paper img{ width:100%; height:460px; object-fit:contain; padding:30px; mix-blend-mode:multiply; }
.gallery-side{ display:flex; flex-direction:column; gap:18px; height:460px; }
.gallery-side .gallery-thumb{ flex:1; min-height:0; }
.gallery-side .gallery-thumb img{ width:100%; height:100%; object-fit:cover; }

.gallery-grid.two-up{ grid-template-columns: 1fr 1fr; }
.gallery-grid.two-up .gallery-thumb{ height:360px; }
.gallery-grid.two-up .gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery-zoom-hint{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  background: rgba(21,19,15,0.7);
  border:1px solid var(--line-strong);
  color: var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  opacity:0; transition: opacity .25s ease;
}
.gallery-main:hover .gallery-zoom-hint, .gallery-thumb:hover .gallery-zoom-hint{ opacity:1; }

/* ========================================================= SPECS TABLE == */
.specs-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 28px;
}
.specs-table{ width:100%; border-collapse:collapse; }
.specs-table tr{ border-bottom:1px solid var(--line); }
.specs-table tr:last-child{ border-bottom:none; }
.specs-table th{
  text-align:left;
  padding: 16px 18px 16px 0;
  width:44%;
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: rgba(244,237,225,0.5);
  font-weight:500;
}
.specs-table td{
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--paper);
}
.specs-note{
  margin-top:18px;
  font-size:12.5px;
  font-style:italic;
  color: rgba(244,237,225,0.5);
  max-width:60ch;
}
.specs-note[style*="text-align:center"]{ color: var(--ink-soft); }

/* ==================================================== SPECS H-GRID ==== */
.specs-hgrid{ display:grid; grid-template-columns: repeat(4, 1fr); }
.specs-hitem{
  display:flex; flex-direction:column; gap:6px;
  padding: 22px 20px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.specs-hitem:nth-child(4n){ border-right:none; }
.specs-hitem .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold); }
.specs-hitem .v{ font-family:var(--font-mono); font-size:13.5px; color: var(--paper); line-height:1.4; }

/* =================================================== RELATED MACHINES == */
.related-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.related-card{
  display:flex; flex-direction:column; gap:12px;
  padding:18px; border-radius:var(--radius);
  border:1px solid var(--line);
  background: var(--surface);
  transition: transform .2s ease, border-color .2s ease;
}
.related-card:hover{ transform:translateY(-4px); border-color:var(--gold); }
.related-card .thumb{ height:110px; border-radius:4px; overflow:hidden; background:var(--paper); }
.related-card .thumb img{ width:100%; height:100%; object-fit:contain; padding:10px; mix-blend-mode:multiply; }
.related-card span{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--paper); }

/* ============================================================ LIGHTBOX == */
.lightbox{
  position:fixed; inset:0; z-index: 400;
  background: rgba(15,13,10,0.94);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:18px;
  opacity:0; pointer-events:none;
  transition: opacity .3s ease;
  padding: 40px;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:min(90vw, 1100px); max-height:72vh;
  object-fit:contain;
  border-radius:6px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.6);
  transform: scale(.96);
  transition: transform .3s ease;
}
.lightbox.open img{ transform:none; }
.lightbox figcaption{
  font-family: var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--gold);
}
.lightbox-close{
  position:absolute; top:26px; right:30px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--paper);
  font-size:16px;
}
.lightbox-close:hover{ border-color:var(--gold); color:var(--gold); }

/* ====================================================== RESPONSIVE ===== */

/* Tablet Large (768px - 1024px) */
@media (max-width: 1024px){
  .container{ padding-inline: 20px; }
  .hero-inner .cta-row{ flex-direction:column; }
  .hero-stats{ grid-template-columns: repeat(3,1fr); gap:16px; }
  .feature-block{ grid-template-columns:1fr; gap:40px; }
  .products-grid{ grid-template-columns: repeat(2,1fr); }
  .machine-hero .grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-side{ flex-direction:row; height:180px; }
  .related-strip{ grid-template-columns: repeat(2,1fr); }
  .dough-svg{ height:420px; }
}

/* Tablet Small (640px - 768px) */
@media (max-width: 768px){
  body{ font-size:15px; }
  .container{ padding-inline: 16px; }
  .section{ padding: 80px 0; }

  h1{ font-size:clamp(1.8rem,7vw,2.4rem); }
  h2{ font-size:clamp(1.6rem,5vw,2.2rem); }
  h3{ font-size:clamp(1.3rem,4vw,1.8rem); }

  .hero-inner .cta-row{ flex-direction:column; }
  .hero-stats{ grid-template-columns:1fr; gap:24px; }
  .products-grid{ grid-template-columns: 1fr; gap:20px; }
  .feature-block{ grid-template-columns:1fr; gap:32px; }

  .trust-track{ height:40px; }
  .trust-track-mask{ mask-size: 1000px; }

  .btn{ padding:12px 20px; font-size:14px; }
  .btn-sm{ padding:10px 16px; font-size:13px; }

  .dough-svg{ height:360px; }
}

/* Mobile (max 640px) */
@media (max-width: 640px){
  body{ font-size:14px; }
  .container{ padding-inline: 14px; }
  .section{ padding: 60px 0; }

  h1{ font-size:clamp(1.4rem,6vw,2rem); }
  h2{ font-size:clamp(1.3rem,5vw,1.8rem); }
  h3{ font-size:clamp(1.1rem,4vw,1.4rem); }
  .eyebrow{ font-size:11px; gap:6px; }
  .eyebrow::before{ width:16px; }

  /* Header */
  .site-header .container{ display:flex; align-items:center; gap:12px; }
  .brand img{ height:40px; }
  .main-nav{ display:none; }
  .header-cta .full{ display:none; }
  .btn{ padding:10px 16px; font-size:13px; }
  .btn-sm{ padding:8px 12px; font-size:12px; }

  /* Hero */
  .hero-inner{ padding-right:0; }
  .hero-inner .cta-row{ flex-direction:column; gap:10px; }
  .hero-stats{ grid-template-columns:1fr; gap:18px; }
  .stat .num{ font-size:clamp(1.8rem,5vw,2.2rem); }
  .stat .label{ font-size:11px; }

  /* Products Grid */
  .products-grid{ grid-template-columns:1fr; gap:14px; }
  .p-card .body{ padding:14px 16px; }
  .p-card .idx{ font-size:10px; }

  /* Feature Section */
  .feature-block{ grid-template-columns:1fr; gap:24px; }
  .feature-copy, .feature{ gap:16px; }

  /* Micro Section */
  .micro-frame{ max-width:100%; }
  .micro-photo{ max-height:280px; }

  /* Repuestos */
  .repuestos-cols{ grid-template-columns:1fr; gap:16px; }

  /* Gallery */
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-grid.two-up{ grid-template-columns:1fr; }
  .gallery-side{ flex-direction:column; height:auto; }
  .gallery-side .gallery-thumb{ height:160px; }

  /* Machine Detail */
  .machine-hero .grid{ grid-template-columns:1fr; }
  .machine-hero .grid div:first-child{ order:2; }
  .machine-hero .grid .shot{ order:1; margin-bottom:20px; }
  .specs-card{ padding:10px 16px; }
  .specs-table th{ width:50%; font-size:10px; padding:12px 8px 12px 0; }
  .specs-table td{ padding:12px 0; font-size:13px; }

  /* Related */
  .related-strip{ grid-template-columns:1fr; gap:12px; }
  .related-card{ padding:12px; }
  .related-card .thumb{ height:100px; }
  .related-card span{ font-size:11px; }

  /* CTA Banner */
  .cta-banner .container{ padding:40px 20px; }
  .cta-banner h2{ font-size:clamp(1.4rem,5vw,2rem); }
  .cta-banner p{ font-size:14px; margin-bottom:16px; }
  .cta-banner .cta-row{ flex-direction:column; gap:10px; }

  /* Footer */
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-brand img{ height:36px; }
  .site-footer h4{ font-size:13px; margin-bottom:10px; }
  .site-footer ul li{ font-size:13px; margin-bottom:6px; }
  .social-row a{ width:32px; height:32px; }
  .social-row svg{ width:14px; height:14px; }

  /* Lightbox */
  .lightbox{ padding:20px; gap:12px; }
  .lightbox img{ max-width:95vw; max-height:60vh; }
  .lightbox-close{ width:36px; height:36px; font-size:14px; top:14px; right:14px; }

  /* Preloader */
  .loaf-wrap{ width:120px; }
  .preloader-pct{ font-size:13px; }
  .preloader-label{ font-size:10px; }

  /* Dough Visual */
  .dough-svg{ height:280px; }

  /* Back to Top */
  .back-to-top{ width:44px; height:44px; font-size:18px; bottom:16px; right:16px; }

  /* Drawer */
  .mobile-drawer{ width:min(280px,85vw); }
  .drawer-close{ width:36px; height:36px; font-size:18px; }
}

/* Mobile XS (max 480px) */
@media (max-width: 480px){
  .container{ padding-inline: 12px; }
  .section{ padding: 48px 0; }

  h1{ font-size:clamp(1.2rem,5vw,1.6rem); }
  h2{ font-size:clamp(1.1rem,4vw,1.5rem); }

  /* Breadcrumb */
  .breadcrumb{ font-size:11px; padding:8px 0; }

  /* Product Cards */
  .p-card .shot{ height:140px; }
  .p-card .body{ padding:12px 12px; }
  .p-card h3{ font-size:14px; }
  .p-card p{ font-size:12px; }
  .p-card .actions{ gap:6px; }

  /* Specs Table */
  .specs-table th{ font-size:9px; width:45%; }
  .specs-table td{ font-size:12px; }
  .specs-note{ font-size:11px; }

  /* Trust Strip */
  .trust-track{ font-size:11px; }

  /* Mobile Drawer */
  .mobile-drawer ul li a{ font-size:14px; padding:10px 0; }

  /* About Quote */
  .about-quote{ font-size:15px; line-height:1.5; }
  .about-quote::before{ font-size:28px; }

  /* Feature List */
  .spec-list li{ font-size:13px; padding-left:20px; }
}

/* =========================================================== PRELOADER == */
.preloader{
  position:fixed; inset:0; z-index:500;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px;
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }

.loaf-wrap{
  width:170px;
  transform: scale(var(--loaf-scale, 0.7));
}
.loaf-svg{ width:100%; height:auto; overflow:visible; filter: drop-shadow(0 18px 26px rgba(0,0,0,0.4)); }
.loaf-raw{ fill:#ecdcb8; }
.loaf-baked{ fill:#c9822f; }
.loaf-score{ fill:none; stroke: rgba(0,0,0,0.16); stroke-width:3; stroke-linecap:round; }

.preloader-pct{
  font-family: var(--font-mono);
  font-size: 15px; letter-spacing:0.08em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.preloader-label{
  font-family: var(--font-mono);
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color: rgba(244,237,225,0.4);
}

/* ====================================================== SPLIT-FLAP === */
.split-flap-frame{
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 40%, #1a1712 0%, #0c0b09 75%);
  height:560px;
}
.flap-board{
  position:relative;
  display:flex; flex-direction:column;
  gap:4px;
  padding: 26px;
}
.flap-row{ display:flex; gap:4px; justify-content:center; }
.flap-cell{
  position:relative;
  width:26px; height:38px;
  perspective: 220px;
  flex-shrink:0;
}
.flap-card{
  position:relative;
  width:100%; height:100%;
  background: linear-gradient(180deg, #221f19 0%, #131210 100%);
  border-radius:3px;
  border:1px solid rgba(255,190,11,0.14);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-weight:600;
  font-size:16px;
  color: var(--gold-soft);
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.4);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
}
.flap-card::after{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:2px;
  background: rgba(0,0,0,0.55);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(-1px);
  pointer-events:none;
}
.flap-card.flap-out{ animation: flapOut .09s cubic-bezier(.5,0,1,.5) forwards; }
.flap-card.flap-in{ animation: flapIn .1s cubic-bezier(0,.5,.5,1) forwards; }
@keyframes flapOut{
  0%{ transform: rotateX(0deg); }
  100%{ transform: rotateX(-90deg); }
}
@keyframes flapIn{
  0%{ transform: rotateX(90deg); }
  100%{ transform: rotateX(0deg); }
}

.flap-roller{
  position:absolute;
  width:20px; height:20px;
  border-radius:50%;
  background: linear-gradient(180deg,#d9d3c2 0%,#7d7768 60%,#5c584c 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.5);
}
.flap-roller.tl{ top:2px; left:2px; }
.flap-roller.tr{ top:2px; right:2px; }
.flap-roller.bl{ bottom:2px; left:2px; }
.flap-roller.br{ bottom:2px; right:2px; }

@media (max-width:1300px){
  .flap-cell{ width:20px; height:30px; }
  .flap-card{ font-size:12px; }
}

/* ================================================== TRUST LOGO PLATES == */
.trust-track .logo-plate{
  display:flex; align-items:center; justify-content:center;
  background: var(--paper);
  border-radius: 8px;
  padding: 8px 18px;
  height: 52px;
}
.trust-track .logo-plate img{
  max-height: 36px;
  max-width: 150px;
  width:auto;
  object-fit: contain;
}

/* ================================================ HOW-IT-WORKS STEPS == */
.steps-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.step-card{
  background: #fff;
  border: 1px solid rgba(42,35,18,0.12);
  border-radius: 12px;
  padding: 34px 26px;
  text-align:center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.step-card:hover{
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px rgba(42,35,18,0.10);
}
.step-card .num{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
}
.step-card h4{
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
}
.step-card p{
  margin-top: 8px;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* =================================================== WORK MODES ====== */
.modes-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}
.mode-card{
  border: 1px solid rgba(42,35,18,0.12);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
}
.mode-card .mode-shot{
  height: 300px;
  background: var(--paper);
  overflow:hidden;
}
.mode-card .mode-shot img{
  width:100%; height:100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mode-card:hover .mode-shot img{ transform: scale(1.04); }
.mode-card .mode-body{ padding: 26px 28px 30px; }
.mode-card h4{
  font-family: var(--font-body);
  font-weight:700;
  font-size:1.2rem;
}
.mode-card .mode-body p{
  margin-top:10px;
  font-size:.95rem;
  color: var(--ink-soft);
}

@media (max-width: 960px){
  .steps-grid{ grid-template-columns: repeat(2,1fr); }
  .modes-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .steps-grid{ grid-template-columns: 1fr; gap:14px; }
  .trust-track .logo-plate{ height:44px; padding:6px 14px; }
  .trust-track .logo-plate img{ max-height:30px; max-width:120px; }
}

/* =================================================== VALUE BULLETS ==== */
.value-bullets{ list-style:none; margin-top:32px; padding:0; display:flex; flex-direction:column; gap:14px; }
.value-bullets li{ position:relative; padding-left:26px; font-size:.94rem; color:rgba(244,237,225,0.7); max-width:50ch; }
.value-bullets li::before{ content:""; position:absolute; left:0; top:7px; width:10px; height:10px; border-radius:50%; background: var(--gold); }
.value-bullets b{ display:block; color:var(--paper); font-family:var(--font-body); font-weight:700; font-size:1rem; margin-bottom:2px; }

/* ================================================ TOLVA CONFIGURATOR === */
.config-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:44px; }
.config-card{
  position:relative;
  display:flex; flex-direction:column; gap:8px;
  border: 2px solid rgba(42,35,18,0.12);
  border-radius: 12px;
  padding: 28px 24px;
  cursor:pointer;
  background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.config-card input{ position:absolute; opacity:0; pointer-events:none; }
.config-card:hover{ transform: translateY(-3px); }
.config-card:has(input:checked){ border-color: var(--gold); box-shadow: 0 18px 40px rgba(42,35,18,0.12); }
.config-range{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:var(--rust); text-transform:uppercase; }
.config-card:has(input:checked) .config-range{ color:var(--gold); }
.config-title{ font-family:var(--font-display); font-size:1.4rem; text-transform:uppercase; margin-top:2px; }
.config-desc{ font-size:.92rem; color:var(--ink-soft); }

.config-diagram{ display:flex; justify-content:center; gap:10px; margin-top:40px; flex-wrap:wrap; }
.tolva-dot{ width:16px; height:22px; border-radius: 3px 3px 8px 8px; background: rgba(42,35,18,0.14); transition: background .3s ease; }
.config-grid:has(input[data-config-count="6"]:checked) ~ .config-diagram .tolva-dot:nth-child(-n+6),
.config-grid:has(input[data-config-count="9"]:checked) ~ .config-diagram .tolva-dot:nth-child(-n+9),
.config-grid:has(input[data-config-count="12"]:checked) ~ .config-diagram .tolva-dot:nth-child(-n+12){ background: var(--gold); }

/* ======================================================= TECH GRID ==== */
.tech-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; margin-top:44px; }
.tech-card{ border-left: 3px solid var(--gold); background: var(--paper-alt); border-radius: 0 12px 12px 0; padding: 28px 30px; }
.tech-card h4{ margin-top:8px; font-size:1.3rem; text-transform:uppercase; }
.tech-card p{ margin-top:12px; font-size:.94rem; color:var(--ink-soft); }

/* =========================================================== HMI DEMO == */
.hmi-demo{ display:grid; grid-template-columns: 1.3fr 1fr; gap:36px; margin-top:48px; align-items:start; }
.hmi-video{ display:flex; flex-direction:column; gap:16px; }
.hmi-video video{
  width:100%; aspect-ratio:16/9; display:block;
  border-radius: var(--radius); border:1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  background:#000; object-fit:cover;
}
.hmi-tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.hmi-tab{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase;
  padding:10px 16px; border-radius:999px;
  border:1px solid rgba(244,237,225,0.25);
  background:transparent; color:rgba(244,237,225,0.7);
  cursor:pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.hmi-tab:hover{ border-color: var(--gold); color: var(--paper); }
.hmi-tab.is-active{ background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hmi-panel{ display:flex; flex-direction:column; justify-content:center; }
.hmi-panel-item{ display:none; }
.hmi-panel-item.is-active{ display:block; animation: hmi-fade .4s ease; }
@keyframes hmi-fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.hmi-panel-item h4{ color:var(--paper); font-size:1.4rem; text-transform:uppercase; }
.hmi-panel-item p{ margin-top:14px; color:rgba(244,237,225,0.72); font-size:1rem; line-height:1.6; }

/* =================================================== MACHINE DIAGRAM === */
.machine-diagram{
  position:relative; max-width:900px; margin:44px auto 0;
  border-radius: var(--radius); overflow:hidden;
  border:1px solid rgba(42,35,18,0.12);
  box-shadow: 0 24px 60px rgba(26,22,16,0.18);
  background: var(--paper-alt);
}
.machine-diagram img{ width:100%; display:block; }
.machine-hotspot{
  position:absolute; width:32px; height:32px; border-radius:50%;
  border:2px solid var(--gold); background: rgba(255,190,11,0.22);
  cursor:pointer; transform: translate(-50%,-50%); padding:0;
  display:flex; align-items:center; justify-content:center;
}
.machine-hotspot span{ width:9px; height:9px; border-radius:50%; background:var(--gold); }
.machine-hotspot::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(255,190,11,0.5); animation: machine-pulse 2.2s ease-out infinite; }
.machine-hotspot.is-active{ background: var(--gold); }
.machine-hotspot.is-active span{ background: var(--ink); }
@keyframes machine-pulse{ 0%{ transform:scale(0.8); opacity:1; } 100%{ transform:scale(1.7); opacity:0; } }

.machine-panel{ max-width:560px; margin:32px auto 0; text-align:center; min-height:112px; }
.machine-panel-item{ display:none; }
.machine-panel-item.is-active{ display:block; animation: machine-fade .4s ease; }
@keyframes machine-fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.machine-panel-item h4{ font-size:1.2rem; text-transform:uppercase; }
.machine-panel-item p{ margin-top:10px; font-size:.95rem; color:var(--ink-soft); }

@media (max-width: 960px){
  .config-grid{ grid-template-columns:1fr; }
  .tech-grid{ grid-template-columns:1fr; }
  .hmi-demo{ grid-template-columns:1fr; }
  .specs-hgrid{ grid-template-columns: repeat(2,1fr); }
  .specs-hitem:nth-child(4n){ border-right:1px solid var(--line); }
  .specs-hitem:nth-child(2n){ border-right:none; }
}
@media (max-width: 640px){
  .specs-hgrid{ grid-template-columns: 1fr; }
  .specs-hitem:nth-child(2n){ border-right:1px solid var(--line); }
  .specs-hitem{ border-right:none; }
}