/* =====================================================================
   BULK 3D STUDIO — styles.css
   Dirección: MINIMALISMO EXAGERADO
   Tipografía gigante · espacio en blanco extremo · un solo acento naranja.
   Editorial, plano, sin sombras, esquinas rectas. Mobile-first.
   ===================================================================== */

/* ----------------------------- TOKENS ----------------------------- */
:root{
  /* Colores de marca */
  --naranja:    #E85D1C;
  --naranja-hi: #F58C28;
  --naranja-lo: #D64814;
  --tinta:      #1A1713;
  --papel:      #F2EEE6;
  --crema:      #EEE8DE;
  --carbon:     #17150F;  /* un punto más profundo para máximo contraste */
  --slate:      #6E665C;
  --faint:      #D8D1C5;  /* hairlines */
  --obrown:     #60260C;

  /* Tipografías */
  --font-display: "Anton", system-ui, sans-serif;
  --font-black:   "Archivo Black", system-ui, sans-serif;
  --font-serif:   "Spectral", Georgia, serif;
  --font-body:    "Space Grotesk", system-ui, -apple-system, sans-serif;

  /* Espaciado — generoso para minimalismo exagerado */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 7rem;
  --sp-7: 11rem;

  /* Layout */
  --container: 1440px;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  /* Transiciones */
  --t-fast: 200ms cubic-bezier(.22,.61,.36,1);
  --t-med:  450ms cubic-bezier(.22,.61,.36,1);

  --header-h: 108px;
}

/* ----------------------------- RESET ------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(1rem, 1.05vw, 1.125rem);
  line-height:1.55;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* clip (no hidden) para no romper position:sticky */
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; font-weight:400; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--naranja); color:#fff; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:2000;
  background:var(--tinta); color:var(--crema);
  padding:.75rem 1.25rem; font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--naranja); outline-offset:4px; }

/* ----------------------------- LAYOUT ----------------------------- */
.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}
.section{
  padding-block:clamp(4.5rem, 12vw, var(--sp-7));
  position:relative;
}
.section--dark{ background:var(--carbon); color:var(--crema); }
.section--orange{ background:var(--naranja); color:var(--obrown); }

/* Regla full-bleed fina como divisor editorial */
.rule{
  height:1px; width:100%; background:var(--faint);
  transform-origin:left center; border:0;
}
.section--dark .rule{ background:rgba(238,232,222,.22); }

/* ----------------------------- LABEL / KICKER ----------------------------- */
/* Etiqueta tipo índice editorial: (01) — SERVICIO */
.lab{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--font-body); font-weight:600;
  font-size:1.56rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate); margin:0 0 var(--sp-4);
}
.section--dark .lab{ color:var(--crema); opacity:.7; }
.section--orange .lab{ color:var(--obrown); }
.lab__idx{ color:var(--naranja); font-variant-numeric:tabular-nums; }
.lab__line{
  flex:1; height:1px; max-width:120px; background:currentColor;
  opacity:.4; transform-origin:left center;
}

/* ----------------------------- DISPLAY TYPE ----------------------------- */
/* Titular gigante de sección */
.display{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.75rem, 11vw, 9rem);
  line-height:.92; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--tinta);
  margin:0;
}
.section--dark .display{ color:var(--crema); }
.section--orange .display{ color:var(--obrown); }

.serif{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  text-transform:none; color:var(--naranja); letter-spacing:0;
}
.section--orange .serif{ color:#fff; }

.lead{
  font-size:clamp(1.15rem, 2.2vw, 1.6rem);
  line-height:1.45; color:var(--slate);
  max-width:30ch; margin:var(--sp-4) 0 0;
}
.section--dark .lead{ color:var(--crema); opacity:.92; }
.section--orange .lead{ color:var(--obrown); }

/* ----------------------------- BOTONES ----------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:1rem;
  line-height:1; min-height:52px; padding:1rem 1.8rem;
  border:1.5px solid var(--tinta); border-radius:0;
  background:transparent; color:var(--tinta);
  transition:background var(--t-fast), color var(--t-fast);
}
.btn:hover{ background:var(--tinta); color:var(--papel); }
.btn--primary{ background:var(--naranja); border-color:var(--naranja); color:#fff; }
.btn--primary:hover{ background:var(--tinta); border-color:var(--tinta); color:#fff; }
.btn--lg{ min-height:60px; padding:1.2rem 2.4rem; font-size:1.05rem; }
.btn--block{ width:100%; justify-content:center; }

/* Link con flecha (acción secundaria minimalista) */
.arrow-link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:600; font-size:1.05rem; color:var(--tinta);
  padding:.5rem 0; position:relative;
}
.arrow-link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--naranja); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-fast);
}
.arrow-link:hover::after{ transform:scaleX(1); }
.arrow-link svg{ transition:transform var(--t-fast); }
.arrow-link:hover svg{ transform:translateX(5px); }
.section--dark .arrow-link{ color:var(--crema); }

/* ============================ HEADER / NAV (píldora → se estira) ============================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  /* En el tope: separa la píldora de los bordes. Al scrollear: pega a 0. */
  padding:14px clamp(14px, 4vw, 40px) 0;
  transition:padding var(--t-med);
}
.site-header.is-scrolled{ padding:0; }

/* La píldora: glass translúcido SIEMPRE (arriba y al scrollear) */
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; height:var(--header-h);
  max-width:1080px; margin-inline:auto;
  padding-inline:clamp(1rem, 2.5vw, 1.75rem);
  background:rgba(242,238,230,.6);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border:1px solid rgba(26,23,19,.08);
  border-radius:999px;
  box-shadow:0 6px 24px rgba(26,23,19,.08);
  transition:max-width var(--t-med), border-radius var(--t-med),
             background var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
/* Al scrollear: se estira a todo el ancho y se aplana (sigue translúcido) */
.site-header.is-scrolled .header__inner{
  max-width:100%;
  border-radius:0;
  background:rgba(242,238,230,.7);
  border-color:transparent;
  border-bottom:1px solid var(--faint);
  box-shadow:0 1px 0 rgba(26,23,19,.04);
}
.wordmark{
  font-family:var(--font-body); font-weight:700;
  font-size:1.1rem; letter-spacing:.04em;
  display:inline-flex; align-items:center; white-space:nowrap;
}
.wordmark__img{
  height:80px; width:auto; max-height:calc(var(--header-h) - 28px); display:block;
  transition:height .3s ease;
}
.site-header.is-scrolled .wordmark__img{ height:80px; }
.wordmark__bulk{ color:var(--naranja); }
.wordmark__rest{ color:var(--tinta); }
.wordmark__rest--cream{ color:var(--crema); }
.wordmark--lg{ font-size:1.4rem; }

.nav{ display:none; }
.nav__list{ display:flex; gap:1.8rem; align-items:center; }
.nav__link{
  font-weight:500; font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta);
  position:relative; padding:.4rem 0;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px;
  background:var(--naranja); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-fast);
}
.nav__link:hover::after{ transform:scaleX(1); }
.nav__cta{ display:none; }

.nav-toggle{
  display:inline-flex; flex-direction:column; gap:6px;
  background:transparent; border:0; padding:10px;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.nav-toggle__bar{ width:28px; height:2px; background:var(--tinta); transition:transform var(--t-fast), opacity var(--t-fast); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--header-h) 0 auto 0; z-index:999;
  background:var(--papel); border-bottom:1px solid var(--faint);
  padding:var(--sp-3) var(--gutter) var(--sp-4);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu__list{ display:flex; flex-direction:column; }
.mobile-menu__link{
  display:block; padding:1.1rem 0; font-family:var(--font-black);
  font-size:1.6rem; text-transform:uppercase; color:var(--tinta);
  border-bottom:1px solid var(--faint);
}
.mobile-menu__link:hover{ color:var(--naranja); }
.mobile-menu__cta{ margin-top:var(--sp-3); width:100%; }

/* ============================ HERO (imagen de fondo) ============================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--carbon);
  color:var(--crema);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__bgimg{
  position:absolute; inset:0; width:100%; height:118%;  /* extra alto para el parallax */
  object-fit:cover; object-position:center 40%; will-change:transform;
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(23,21,15,.55) 0%, rgba(23,21,15,.12) 34%, rgba(23,21,15,.78) 100%),
    linear-gradient(90deg, rgba(23,21,15,.62) 0%, rgba(23,21,15,0) 58%);
}
.hero__inner{
  position:relative; z-index:1; width:100%;
  max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  padding-top:calc(var(--header-h) + 2rem);
  padding-bottom:clamp(4rem, 11vh, 8rem);
}
.lab--hero{ color:var(--crema); opacity:.92; margin:0 0 var(--sp-3); }
.lab--hero .lab__rule{ display:inline-block; width:42px; height:1px; background:var(--naranja); }
.hero__title{
  font-family:var(--font-serif); font-weight:400; font-style:normal;
  font-size:clamp(2.3rem, 6.2vw, 5.4rem);
  line-height:1.04; letter-spacing:-.01em; text-transform:none;
  color:var(--crema); margin:0; max-width:17ch;
  text-shadow:0 1px 30px rgba(0,0,0,.25);
}
.hero__title .d-line{ display:block; overflow:hidden; padding-block:.02em .12em; }
.hero__title .d-line > span{ display:block; }
.hero__title .serif{ font-style:italic; color:var(--naranja-hi); font-size:1em; }
.hero__lead{
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(1.02rem, 1.4vw, 1.18rem); line-height:1.6;
  color:var(--crema); opacity:.88; max-width:46ch; margin:var(--sp-3) 0 var(--sp-4);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* botón glass (sobre la imagen del hero) */
.btn--glass{
  background:rgba(238,232,222,.08); color:var(--crema);
  border:1px solid rgba(238,232,222,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn--glass:hover{ background:var(--crema); color:var(--tinta); border-color:var(--crema); }

/* indicador de scroll */
.hero__scroll{
  position:absolute; left:50%; bottom:1.3rem; transform:translateX(-50%); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.55rem; color:var(--crema);
  font-family:var(--font-body); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
}
.hero__scroll-txt{ opacity:.72; }
.hero__scroll-line{ position:relative; width:1px; height:52px; background:rgba(238,232,222,.3); overflow:hidden; }
.hero__scroll-line > span{ position:absolute; left:0; top:0; width:100%; height:42%; background:var(--naranja); animation:scrolldrop 2.1s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes scrolldrop{ 0%{ transform:translateY(-110%);} 60%,100%{ transform:translateY(360%);} }

/* La píldora es glass claro en ambos estados → texto oscuro siempre (legible). */

/* ============================ MARQUEE ============================ */
.marquee{
  border-block:1px solid var(--faint);
  padding:1.4rem 0; overflow:hidden; white-space:nowrap;
}
.marquee--dark{ border-color:rgba(238,232,222,.2); }
/* Cinta dentro del hero: sobre el silk, en crema */
.marquee--hero{
  position:relative; z-index:1;
  border-color:rgba(238,232,222,.22); background:transparent;
}
.marquee--hero .marquee__track{ color:var(--crema); }
.marquee__track{
  display:inline-flex; gap:2.5rem; align-items:center;
  font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.6rem);
  letter-spacing:.02em; color:var(--tinta); text-transform:uppercase;
  animation:marquee 28s linear infinite;
}
.section--dark .marquee__track{ color:var(--crema); }
.marquee__track .dot{ color:var(--naranja); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-33.33%); } }

/* ============================ SECCIÓN: cabecera editorial ============================ */
/* Bloque: label + display grande, con mucho aire */
.head{ max-width:18ch; }
.head--wide{ max-width:24ch; }

/* Layout de dos columnas asimétrico (título / texto) */
.split{
  display:grid; grid-template-columns:1fr; gap:var(--sp-4);
  margin-top:var(--sp-5);
}

/* ============================ LISTA EDITORIAL (tecnología, proceso) ============================ */
.elist{ margin-top:var(--sp-5); border-top:1px solid var(--faint); }
.section--dark .elist{ border-color:rgba(238,232,222,.2); }
.erow{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem var(--sp-3);
  align-items:baseline;
  padding:clamp(1.6rem,4vw,2.8rem) 0;
  border-bottom:1px solid var(--faint);
  transition:padding-left var(--t-med);
}
.section--dark .erow{ border-color:rgba(238,232,222,.2); }
.erow:hover{ padding-left:1rem; }
.erow__idx{
  font-family:var(--font-body); font-weight:600; font-size:.8rem;
  letter-spacing:.1em; color:var(--naranja); font-variant-numeric:tabular-nums;
}
.erow__title{
  font-family:var(--font-black); font-weight:400;
  font-size:clamp(1.6rem, 5vw, 3rem); line-height:1; text-transform:uppercase;
  color:var(--tinta); grid-column:2;
}
.section--dark .erow__title{ color:var(--crema); }
.erow__sub{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:.42em; color:var(--naranja); text-transform:none; margin-left:.5rem;
}
.erow__desc{
  grid-column:2; color:var(--slate); margin:.9rem 0 0;
  max-width:52ch; font-size:1.05rem;
}
.section--dark .erow__desc{ color:var(--crema); opacity:.78; }

/* ============================ STATS GIGANTES ============================ */
.stats{
  display:grid; grid-template-columns:1fr; gap:var(--sp-5);
  margin-top:var(--sp-6);
}
.stat__num{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(4rem, 16vw, 11rem); line-height:.85;
  color:var(--naranja); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.section--dark .stat__num{ color:var(--naranja-hi); }
.stat__label{
  display:block; margin-top:var(--sp-2);
  font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  font-size:.82rem; color:var(--slate);
}
.section--dark .stat__label{ color:var(--crema); opacity:.75; }

/* ============================ MATERIALES (filas editoriales grandes) ============================ */
.mat-list{ margin-top:var(--sp-5); border-top:1px solid var(--faint); }
.mat{
  display:grid; grid-template-columns:1fr; gap:var(--sp-3);
  padding:clamp(2rem,5vw,3.5rem) 0; border-bottom:1px solid var(--faint);
  align-items:center;
}
.mat__media{ overflow:hidden; order:-1; }
.mat__img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  filter:grayscale(10%); transition:transform var(--t-med), filter var(--t-med);
}
.mat:hover .mat__img{ transform:scale(1.04); filter:grayscale(0%); }
.mat__name{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.6rem, 9vw, 6rem); line-height:.9; text-transform:uppercase;
  color:var(--tinta);
}
.mat__prop{ font-family:var(--font-serif); font-style:italic; color:var(--naranja); font-size:.32em; display:inline-block; margin-left:.4rem; }
.mat__text{ color:var(--slate); max-width:46ch; margin:var(--sp-2) 0 var(--sp-3); font-size:1.05rem; }
.mat__specs{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }
.mat__spec{ }
.mat__spec dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:.2rem; }
.mat__spec dd{ margin:0; font-family:var(--font-black); font-size:1.1rem; color:var(--tinta); }

/* ============================ EQUIPAMIENTO (scroll horizontal) ============================ */
.equipamiento{ padding-bottom:0; }
/* El panel pineado ocupa todo el viewport y es OPACO → cubre la sección de
   atrás (Materiales) durante el pin. overflow:hidden acá clipa el track horizontal. */
.hscroll{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden; background:var(--papel);
}
.hscroll__track{
  display:flex; gap:0; width:max-content;
}
.machine{
  flex:0 0 auto; width:min(86vw, 460px);
  padding-inline:var(--gutter);
  border-right:1px solid var(--faint);
  display:flex; flex-direction:column;
}
.machine:first-child{ padding-left:var(--gutter); }
.machine__media{ overflow:hidden; margin-bottom:var(--sp-3); }
.machine__img{
  width:100%; aspect-ratio:1/1; object-fit:contain;
  background:transparent; will-change:transform;
  /* cada impresora se escala (tamaño) y se corre en vertical (--mshift) para
     que todas queden niveladas sobre la misma línea de piso */
  transform:scale(var(--mscale,1)); transform-origin:center;
  position:relative; top:var(--mshift,0);
}
.machine__model{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.4rem,6vw,3.6rem); line-height:.9; text-transform:uppercase;
  color:var(--tinta);
}
.machine__tag{ font-family:var(--font-serif); font-style:italic; color:var(--naranja); font-size:1.3rem; margin:.3rem 0 var(--sp-2); display:block; }
.machine__desc{ color:var(--slate); font-size:1rem; margin:0 0 var(--sp-3); }
/* Empuja el bloque de specs al fondo -> como todas las tarjetas tienen la misma
   altura, los specs quedan alineados en todas las impresoras */
.machine__specs{ border-top:1px solid var(--faint); margin-top:auto; }
.machine__spec{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--faint); }
.machine__spec dt{ color:var(--slate); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; flex-shrink:0; }
/* valores en una sola línea -> todas las filas miden igual y los specs quedan
   perfectamente alineados entre impresoras */
.machine__spec dd{ margin:0; font-family:var(--font-black); font-size:.92rem; text-align:right; color:var(--tinta); white-space:nowrap; }
.hscroll__hint{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-top:var(--sp-3); }

/* ============================ PRODUCCIÓN ============================ */
.bignum{ font-family:var(--font-display); color:var(--naranja); }
.prod-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); margin-top:var(--sp-5); border-top:1px solid var(--faint); }
.prod{ padding-top:var(--sp-3); border-top:2px solid var(--naranja); }
.prod__title{ font-family:var(--font-black); font-size:1.3rem; text-transform:uppercase; margin:0 0 .5rem; }
.prod__text{ color:var(--slate); margin:0; }
.substats{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); margin-top:var(--sp-6); }
.substat__num{ display:block; font-family:var(--font-display); font-size:clamp(3rem,10vw,5rem); line-height:.85; color:var(--naranja); font-variant-numeric:tabular-nums; }
.substat__num--text{ font-family:var(--font-black); font-size:clamp(2.2rem,7vw,3.5rem); color:var(--tinta); }
.substat__label{ display:block; margin-top:var(--sp-2); color:var(--slate); }

/* ============================ POR QUÉ (checks) ============================ */
.why-grid{ display:grid; grid-template-columns:1fr; gap:0; margin-top:var(--sp-5); border-top:1px solid rgba(238,232,222,.2); }
.why{ padding:clamp(1.6rem,4vw,2.6rem) 0; border-bottom:1px solid rgba(238,232,222,.2); display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3); align-items:baseline; }
.why__idx{ font-family:var(--font-body); font-weight:600; font-size:.8rem; color:var(--naranja); }
.why__title{ font-family:var(--font-black); font-size:clamp(1.3rem,3.5vw,2rem); text-transform:uppercase; color:var(--crema); margin:0 0 .4rem; }
.why__text{ color:var(--crema); opacity:.78; margin:0; max-width:48ch; }

/* ============================ CONTACTO ============================ */
.contacto__grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-5); margin-top:var(--sp-5); }
.contacto__direct{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:var(--sp-4); }
.btn--onorange{ border-color:var(--obrown); color:var(--obrown); }
.btn--onorange:hover{ background:var(--obrown); color:var(--naranja); }
.contacto__meta{ display:grid; gap:.5rem; margin-top:var(--sp-4); font-size:.95rem; color:var(--obrown); }
.contacto__meta strong{ font-weight:700; }

.form{ }
.form__field{ margin-bottom:var(--sp-3); }
.form__label{ display:block; font-weight:600; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem; color:var(--obrown); }
.req{ color:#fff; }
.form__input{
  width:100%; font-family:inherit; font-size:1.05rem;
  padding:1rem 0; min-height:52px;
  border:0; border-bottom:2px solid var(--obrown); border-radius:0;
  background:transparent; color:var(--obrown);
  transition:border-color var(--t-fast);
}
.form__input::placeholder{ color:rgba(96,38,12,.5); }
.form__input:focus{ outline:none; border-bottom-color:#fff; }
.form__textarea{ resize:vertical; min-height:120px; line-height:1.5; }
.form__input.is-invalid{ border-bottom-color:#7a1500; }
.form__error{ margin:.4rem 0 0; font-size:.85rem; color:#5a1400; font-weight:600; min-height:1em; }
.form__note{ font-size:.82rem; color:var(--obrown); opacity:.8; margin:.8rem 0 0; }
.form__submit{ margin-top:var(--sp-3); }
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__alert{ padding:1rem 1.2rem; margin-bottom:var(--sp-3); font-weight:600; }
.form__alert--ok{ background:var(--tinta); color:var(--crema); }
.form__alert--err{ background:#7a1500; color:#fff; }
.btn--submit{ background:var(--tinta); border-color:var(--tinta); color:var(--crema); }
.btn--submit:hover{ background:#000; color:#fff; }

/* ============================ FOOTER ============================ */
.site-footer{ background:var(--carbon); color:var(--crema); padding-top:var(--sp-6); }
.footer__big{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(3rem, 15vw, 12rem); line-height:.86; text-transform:uppercase;
  color:var(--crema); margin:0 0 var(--sp-5); letter-spacing:-.02em;
}
.footer__big .serif{ color:var(--naranja); }
.footer__cols{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); padding-bottom:var(--sp-5); }
.footer__title{ font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--crema); opacity:.6; margin:0 0 var(--sp-2); }
.footer__list{ display:grid; gap:.6rem; }
.footer__link{ color:var(--crema); opacity:.85; transition:opacity var(--t-fast), color var(--t-fast); }
.footer__link:hover{ color:var(--naranja); opacity:1; }
.footer__bottom{ display:flex; flex-direction:column; gap:.6rem; padding-block:var(--sp-3); border-top:1px solid rgba(238,232,222,.2); }
.footer__copy, .footer__formats{ margin:0; font-size:.82rem; color:var(--crema); opacity:.6; }

/* ============================ ESTADOS ANIMACIÓN ============================ */
.js-anim .reveal{ opacity:0; transform:translateY(34px); }
.js-anim .hero__title .d-line > span{ display:block; }

/* ============================ RESPONSIVE ============================ */
@media (min-width:640px){
  .stats{ grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
  .substats{ grid-template-columns:repeat(3,1fr); }
  .footer__cols{ grid-template-columns:repeat(3,1fr); }
  .footer__bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
}
@media (min-width:768px){
  .split{ grid-template-columns:1.15fr .85fr; gap:var(--sp-6); align-items:end; }
  .mat{ grid-template-columns:.9fr 1.1fr; gap:var(--sp-5); }
  .mat__media{ order:0; }
  .prod-grid{ grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
  .why-grid{ grid-template-columns:repeat(2,1fr); column-gap:var(--sp-5); }
  .why{ }
  .contacto__grid{ grid-template-columns:1fr 1fr; gap:var(--sp-6); }
}
@media (min-width:960px){
  :root{ --header-h:120px; }
  .nav{ display:block; }
  .nav__cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .mobile-menu{ display:none !important; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .marquee__track{ animation:none; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__title .d-line > span{ transform:none !important; }
}

/* ============================================================
   AJUSTE FINO DE TIPOGRAFÍA — alineado al manual de marca.
   Fuentes del manual: Anton (display/hero) · Archivo Black (destacados,
   uso mínimo) · Spectral (acento serif/énfasis) · Space Grotesk (texto/datos).
   Objetivo: look más FINO → menos peso "black", más Anton y Space Grotesk
   Medium, más tracking, hairlines y pesos livianos. (Bloque de override.)
   ============================================================ */

/* Títulos de listas (Tecnología / Proceso): Archivo Black → Anton (más fino) */
.erow__title{ font-family:var(--font-display); font-weight:400; letter-spacing:.01em; }
.erow__sub{ font-weight:400; }

/* Subtítulos de bloque: Archivo Black → Space Grotesk Medium con tracking */
.prod__title,
.why__title{ font-family:var(--font-body); font-weight:500; letter-spacing:.03em; }

/* Datos / specs: Archivo Black → Space Grotesk SemiBold (más liviano y legible) */
.spec dd,
.machine__spec dd,
.mat__spec dd{ font-family:var(--font-body); font-weight:600; letter-spacing:.005em; }

/* "Local" en sub-stats: acento serif fino en vez de Archivo Black */
.substat__num--text{ font-family:var(--font-serif); font-style:italic; font-weight:400; }

/* Etiquetas, nav, botones y labels: pesos más livianos + más aire */
.lab{ font-weight:500; }
.btn{ font-weight:500; }
.nav__link{ font-weight:400; }
.form__label{ font-weight:500; }
.footer__title{ font-weight:500; }
.erow__idx,
.why__idx{ font-weight:500; }
.hscroll__hint{ font-weight:500; }
.stat__label,
.substat__label{ font-weight:500; }
.spec dt,
.machine__spec dt,
.mat__spec dt{ font-weight:400; }

/* Texto de lectura: un punto más fino y aireado */
.lead{ font-weight:400; letter-spacing:.005em; }
.erow__desc,
.mat__text,
.machine__desc,
.prod__text,
.why__text{ letter-spacing:.004em; }

/* Wordmark un poco menos pesado para acompañar */
.wordmark{ font-weight:600; }

/* ============================================================
   AJUSTES PEDIDOS (tamaños, apilado de materiales, contacto)
   ============================================================ */

/* Palabras de énfasis (serif naranja) en titulares de sección: más grandes */
.display .serif{ font-size:1.6em; line-height:.82; display:inline-block; vertical-align:baseline; }

/* Tecnología + Proceso: números (índices) más grandes y editoriales */
.erow__idx{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:clamp(1.7rem, 4.5vw, 3rem); line-height:1; align-self:start;
}
/* Proceso/Tecnología: texto un poco más grande */
.erow__desc{ font-size:clamp(1.05rem, 1.5vw, 1.25rem); }

/* Por qué elegirnos: números más grandes + texto un poco más grande */
.why__idx{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:clamp(1.6rem, 4vw, 2.6rem); line-height:1;
}
.why__text{ font-size:clamp(1.05rem, 1.4vw, 1.2rem); }
.why__title{ font-size:clamp(1.4rem, 3.5vw, 2.1rem); }

/* Producción: sacar la línea gris fina superior; dejar las naranjas (.prod) */
#produccion .prod-grid{ border-top:0; }
/* "Local": como los números naranjas de al lado; el label como los otros */
.substat__num--text{ font-family:var(--font-display); font-style:normal; font-weight:400; color:var(--naranja); }

/* ---------- MATERIALES: apilado (stacking) ---------- */
.materiales__head{ margin-bottom:var(--sp-4); }
.mat-stack{ position:relative; }
/* Estado activado por JS (≥768px). La altura del stack la fija main.js. */
.mat-stack.is-stacking{ overflow:hidden; }
.mat-stack.is-stacking .mat{
  position:absolute; inset:0; margin:0; padding:var(--sp-4) 0;
  background:var(--papel); border-top:1px solid var(--faint);
  display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-5);
  align-content:center; align-items:center; will-change:transform;
}
.mat-stack.is-stacking .mat__media{ order:0; }
.mat-stack.is-stacking .mat__img{ aspect-ratio:16/10; max-height:46vh; object-fit:cover; }

/* ---------- CONTACTO: bloque de datos (rediseño) ---------- */
.contact-list{
  margin:var(--sp-4) 0; border-top:1px solid rgba(96,38,12,.22);
}
.contact-item{
  display:flex; align-items:center; gap:1rem;
  min-height:60px; font-weight:500; font-size:1.05rem;
  color:var(--obrown); border-bottom:1px solid rgba(96,38,12,.22);
}
.contact-item__link{
  display:flex; align-items:center; gap:1rem; flex:1; min-height:60px;
  color:var(--obrown); transition:padding-left var(--t-fast);
}
.contact-item__link:hover{ padding-left:.4rem; }
.contact-item__ic{ width:26px; height:26px; flex:none; color:var(--obrown); }
.contact-item__ic svg{ width:100%; height:100%; display:block; }
.contact-item__txt{ display:flex; flex-direction:column; line-height:1.25; }
.contact-item__k{
  font-family:var(--font-body); font-weight:500; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; opacity:.72; margin-bottom:.15rem;
}
.contacto__direct{ margin-top:var(--sp-3); }

/* Materiales: padding ajustado para el apilado pineado */
#materiales{ padding-block:clamp(3rem,7vw,6rem) 0; }

/* Materiales apilado v2: la sección mide exactamente el viewport (flexbox),
   título arriba y stack flexible. Evita saltos y que Equipamiento se asome. */
#materiales.is-stacking-on{
  height:100svh; min-height:100svh; padding-block:0;
  display:flex; flex-direction:column; overflow:hidden;
}
#materiales.is-stacking-on > .container{
  display:flex; flex-direction:column; height:100%; min-height:0;
}
#materiales.is-stacking-on .materiales__head{
  padding-top:calc(var(--header-h) + 1.25rem); margin-bottom:1.1rem;
}
.mat-stack.is-stacking{ flex:1 1 auto; min-height:0; height:auto; position:relative; overflow:hidden; }

/* ============================================================
   MATERIALES: apilado con position: sticky (sin GSAP, sin pin).
   Cada material se "clava" arriba y el siguiente lo cubre al scrollear.
   Al terminar, Equipamiento (único pin de la página) se lleva todo.
   (Requiere que ningún ancestro tenga overflow:hidden → body usa clip.)
   ============================================================ */
/* Apilado sticky en TODOS los tamaños (también mobile). En mobile: 1 columna. */
.materiales .mat-stack{ position:relative; overflow:visible; }
.materiales .mat-stack .mat{
  position:sticky; top:var(--header-h);
  min-height:calc(100svh - var(--header-h));
  margin:0; padding-block:var(--sp-3);
  background:var(--papel);
  border-top:1px solid var(--faint);
  display:grid; grid-template-columns:1fr; gap:var(--sp-2);
  align-items:center; align-content:center;
}
.materiales .mat-stack .mat__media{ order:-1; }
.materiales .mat-stack .mat__img{ aspect-ratio:16/10; max-height:34vh; object-fit:cover; }
@media (min-width:768px){
  .materiales .mat-stack .mat{
    padding-block:var(--sp-4);
    grid-template-columns:.9fr 1.1fr; gap:var(--sp-5);
  }
  .materiales .mat-stack .mat__media{ order:0; }
  .materiales .mat-stack .mat__img{ max-height:52vh; }
}

/* ============================================================
   REDISEÑO FINO (editorial) — títulos serif Spectral, más chicos.
   Lleva los titulares pesados (Anton/Archivo Black) a Spectral fino.
   ============================================================ */
.display{
  font-family:var(--font-serif); font-weight:400; font-style:normal;
  font-size:clamp(1.9rem, 4.2vw, 3.5rem);
  line-height:1.08; letter-spacing:.004em;
}
.display .serif{ font-size:1em; font-weight:400; }   /* énfasis itálico, mismo cuerpo */

/* Listas (Tecnología / Proceso): título serif fino */
.erow__title{
  font-family:var(--font-serif); font-weight:500; letter-spacing:0;
  font-size:clamp(1.35rem, 3vw, 2.1rem); text-transform:none; line-height:1.1;
}
.erow__sub{ font-size:.5em; }
.erow__idx{ font-size:clamp(1.2rem, 3vw, 1.9rem); }

/* Materiales y Equipamiento: nombres en serif fino */
.mat__name{
  font-family:var(--font-serif); font-weight:500; text-transform:none;
  font-size:clamp(2rem, 5vw, 3.4rem); line-height:1.05;
}
.machine__model{
  font-family:var(--font-serif); font-weight:500; text-transform:none;
  font-size:clamp(1.7rem, 4vw, 2.4rem); line-height:1.05;
}

/* Números grandes: Spectral liviano (elegante) en vez de Anton */
.stat__num{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(2.8rem, 9vw, 5.5rem); letter-spacing:-.01em;
}
.substat__num{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(2.4rem, 7vw, 3.6rem);
}
.substat__num--text{ font-family:var(--font-serif); font-weight:400; font-style:italic; }
.bignum{ font-family:var(--font-serif); font-weight:400; }

/* Más aire / hairlines más finas para sensación premium */
.section{ padding-block:clamp(4rem, 10vw, 9rem); }
.lead{ font-weight:400; }

/* Solo para captura/impresión de revisión (no afecta la pantalla) */
@media print{
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .site-header{ position:static; }
  .hero{ min-height:70vh; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__scroll{ display:none; }
}

/* ============================================================
   TEMA DÍA / NOCHE  +  TOGGLE  +  TARJETAS DE CONTACTO
   ============================================================ */
:root{
  --glass: rgba(242,238,230,.62);
  --glass-2: rgba(242,238,230,.72);
  --glass-border: rgba(26,23,19,.08);
}
[data-theme="dark"]{
  --papel:#100D08;        /* fondo de página (oscuro) */
  --tinta:#EFE7DC;        /* texto principal (claro) */
  --slate:#A79E91;        /* secundario */
  --faint:#332E27;        /* hairlines */
  --carbon:#211D17;       /* secciones "oscuras" un toque más claras que el fondo */
  --crema:#EFE8DD;
  --glass: rgba(22,19,14,.55);
  --glass-2: rgba(22,19,14,.75);
  --glass-border: rgba(239,231,220,.12);
}
/* Header píldora usa tokens glass (cambian con el tema) */
.header__inner{ background:var(--glass); border-color:var(--glass-border); }
.site-header.is-scrolled .header__inner{ background:var(--glass-2); }
/* Transición suave al cambiar de tema */
body, .section, .section--dark, .header__inner, .mat-stack.is-stacking .mat,
.machine, .erow, .form__input{ transition:background-color .4s ease, color .4s ease, border-color .4s ease; }

/* ---- Toggle día/noche ---- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; min-width:42px; flex:none; border-radius:50%;
  background:transparent; border:1px solid var(--faint); color:var(--tinta); cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.theme-toggle:hover{ border-color:var(--naranja); color:var(--naranja); }
.theme-toggle:focus-visible{ outline:3px solid var(--naranja); outline-offset:3px; }
.theme-toggle__ic{ width:20px; height:20px; }
.theme-toggle__sun{ display:none; }
.theme-toggle__moon{ display:block; }
[data-theme="dark"] .theme-toggle__sun{ display:block; }
[data-theme="dark"] .theme-toggle__moon{ display:none; }

/* ---- Tarjetas de contacto (rectángulos con hover, blanco sobre naranja) ---- */
.ccards{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.ccard{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
  padding:1.5rem 1.4rem; min-height:138px;
  border:1px solid rgba(255,255,255,.55); border-radius:0;
  color:#fff; background:rgba(255,255,255,.04);
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
a.ccard:hover{ background:#fff; color:var(--obrown); border-color:#fff; transform:translateY(-4px); }
.ccard__ic{ width:26px; height:26px; }
.ccard__ic svg{ width:100%; height:100%; display:block; }
.ccard__k{ font-family:var(--font-body); font-weight:500; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; opacity:.8; }
.ccard__v{ font-family:var(--font-body); font-weight:500; font-size:1.05rem; line-height:1.3; word-break:break-word; }
.ccard__arrow{ position:absolute; top:1.05rem; right:1.15rem; font-size:1rem; opacity:.65; transition:transform var(--t-fast), opacity var(--t-fast); }
a.ccard:hover .ccard__arrow{ transform:translate(3px,-3px); opacity:1; }
.ccard--wide{ flex-direction:row; align-items:center; gap:.85rem; min-height:62px; margin-top:1rem; padding:1.1rem 1.4rem; }
.ccard--wide .ccard__ic{ width:22px; height:22px; }
.ccard--wide .ccard__v{ font-weight:600; }
@media (max-width:520px){ .ccards{ grid-template-columns:1fr; } }

/* ============================================================
   NAV CTA (WhatsApp) + nav más grande + CONTACTO todo en blanco
   ============================================================ */
/* Botón fino con degradé naranja y texto blanco, apunta a WhatsApp */
.nav-cta{
  display:inline-flex; align-items:center; white-space:nowrap; flex:none;
  padding:.62rem 1.2rem; border-radius:999px; border:0;
  font-family:var(--font-body); font-weight:500; font-size:.88rem; letter-spacing:.01em;
  color:#fff; background:linear-gradient(135deg, var(--naranja-hi), var(--naranja-lo));
  box-shadow:0 4px 14px rgba(232,93,28,.32);
  transition:filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.nav-cta:hover{ filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 6px 18px rgba(232,93,28,.42); }
.nav-cta:focus-visible{ outline:3px solid var(--naranja); outline-offset:3px; }
@media (max-width:959px){ .nav-cta{ display:none; } }  /* en mobile el pill queda compacto */

/* Nav un poco más grande */
.nav__link{ font-size:.92rem; }
.wordmark{ font-size:1.18rem; }
@media (max-width:600px){
  .wordmark__img{ height:72px; }
  .site-header.is-scrolled .wordmark__img{ height:72px; }
}

/* ---- CONTACTO: todo el texto en blanco (sobre el naranja) ---- */
#contacto .lab,
#contacto .lab__idx,
#contacto .display,
#contacto .serif,
#contacto .lead,
#contacto .form__label,
#contacto .form__note,
#contacto .req{ color:#fff; }
#contacto .lab__line{ background:#fff; opacity:.7; }
#contacto .form__input{ color:#fff; border-bottom-color:rgba(255,255,255,.55); }
#contacto .form__input::placeholder{ color:rgba(255,255,255,.6); }
#contacto .form__input:focus{ border-bottom-color:#fff; box-shadow:none; }
#contacto .form__input.is-invalid{ border-bottom-color:#ffd9cc; }
#contacto .form__error{ color:#ffe2d8; }
/* Botón enviar: blanco outline → hover relleno blanco con texto naranja */
#contacto .btn--submit{ background:transparent; border:1.5px solid #fff; color:#fff; }
#contacto .btn--submit:hover{ background:#fff; color:var(--obrown); border-color:#fff; }
#contacto .form__alert--ok{ background:#fff; color:var(--obrown); }
#contacto .form__alert--err{ background:#7a1500; color:#fff; }

/* ============================================================
   AUDITORÍA DE DISEÑO — header refinado, agrupado, degradés
   ============================================================ */
/* Controles de la derecha agrupados (CTA + toggle + hamburguesa) */
.header__actions{ display:flex; align-items:center; gap:.55rem; }

/* Píldora flotante arriba; al scrollear: barra full-width con contenido centrado */
.site-header{ padding:14px clamp(14px,4vw,40px) 0; }
.site-header.is-scrolled{
  padding:0;
  background:var(--glass-2);
  backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--glass-border);
}
.header__inner{
  max-width:1120px; margin-inline:auto;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:999px;
  box-shadow:0 10px 34px rgba(26,23,19,.12);
  backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px);
  transition:max-width var(--t-med), border-radius var(--t-med), background var(--t-med),
             box-shadow var(--t-med), border-color var(--t-med);
}
/* Al scrollear el contenido sigue centrado (no se pega a los bordes) */
.site-header.is-scrolled .header__inner{
  max-width:1200px; background:transparent; border-color:transparent;
  border-radius:0; box-shadow:none;
}

/* Degradés de color en secciones */
.section--orange{
  background:linear-gradient(135deg, var(--naranja-hi) 0%, var(--naranja) 52%, var(--naranja-lo) 100%);
}
.section--dark{
  background:linear-gradient(180deg, var(--carbon) 0%, #0E0C08 100%);
}
/* Indicador de scroll: ocultar en mobile (chocaba con los botones) */
@media (max-width:768px){ .hero__scroll{ display:none; } }

/* Hero en mobile: contenido un poco más arriba para que entre el título */
@media (max-width:600px){
  .hero{ justify-content:flex-end; }
  .hero__inner{ padding-bottom:clamp(3rem,9vh,5rem); }
  .hero__title{ font-size:clamp(2.1rem,9vw,3rem); }
}

/* Producción: título "2000 UNIDADES. o solo UNA." al doble */
#produccion .display{ font-size:clamp(3.8rem, 8.4vw, 7rem); line-height:1.0; }
/* "Local" en mayúscula */
.substat__num--text{ text-transform:uppercase; }

/* ============================================================
   NAV: píldora más ancha y SIEMPRE flotante (sin barra al scrollear)
   ============================================================ */
.header__inner{ max-width:1240px; }
.nav__list{ gap:1.4rem; }
.site-header.is-scrolled{
  padding:14px clamp(14px,4vw,40px) 0;   /* mismo que arriba: no se pega */
  background:transparent; border-bottom:0;
}
.site-header.is-scrolled .header__inner{
  max-width:1240px; background:var(--glass);
  border:1px solid var(--glass-border); border-radius:999px;
  box-shadow:0 10px 34px rgba(26,23,19,.12);
}

/* ============================================================
   DEGRADÉS QUE CONECTAN SECCIONES
   Tecnología → Precisión (bloque oscuro) ; Proceso → Por qué → Contacto
   (el marrón se va calentando hasta el naranja del contacto)
   ============================================================ */
#tecnologia{ background:linear-gradient(180deg, #221810 0%, var(--carbon) 100%); }
#precision{  background:linear-gradient(180deg, var(--carbon) 0%, #150f09 100%); }

#proceso{ background:linear-gradient(180deg, var(--carbon) 0%, #2b1709 100%); }
#porque{  background:linear-gradient(180deg, #2b1709 0%, #5c2810 100%); }
#contacto{ background:linear-gradient(180deg, #5c2810 0%, var(--naranja-lo) 24%, var(--naranja) 70%, var(--naranja-hi) 100%); }

/* ============================================================
   NAV: la píldora SE ESTIRA al scrollear, con el MISMO glass transparente
   (sin barra de fondo extra; el contenido queda centrado)
   ============================================================ */
.header__inner{
  transition:max-width var(--t-med), border-radius var(--t-med), background var(--t-med),
             box-shadow var(--t-med), border-color var(--t-med), padding var(--t-med);
}
.site-header.is-scrolled{ padding:0; background:transparent; border-bottom:0; }
.site-header.is-scrolled .header__inner{
  max-width:100%;
  border-radius:0;
  background:var(--glass);                 /* mismo glass translúcido */
  border-color:transparent;
  border-bottom:1px solid var(--glass-border);
  box-shadow:none;
  /* el contenido sigue centrado (no se pega a los bordes) */
  padding-inline:max(1.75rem, calc((100% - 1240px) / 2));
}

/* Quitar degradé de Proceso y Contacto (tono plano). Por qué también plano
   para no dejar un degradé suelto entre dos secciones planas. */
#proceso, #porque{ background:var(--carbon); }
#contacto{ background:var(--naranja); }

/* ============================================================
   MATERIALES — grilla 2×2 con miniaturas redondas (estilo placa)
   ============================================================ */
#materiales{ padding-block:clamp(4rem,10vw,9rem); }   /* simétrico (anula el bottom:0 viejo) */
.mat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5) var(--sp-5); margin-top:var(--sp-5); }
.matcard__top{ display:flex; align-items:center; gap:1.25rem; }
.matcard__thumb{
  flex:none; width:clamp(86px, 9vw, 118px); height:clamp(86px, 9vw, 118px);
  border-radius:50%; overflow:hidden; border:1px solid var(--faint);
  box-shadow:0 8px 22px rgba(26,23,19,.12);
}
.matcard__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.matcard__name{
  font-family:var(--font-black); font-weight:400; line-height:1; letter-spacing:.01em;
  font-size:clamp(1.5rem, 3vw, 2.1rem); text-transform:uppercase; color:var(--tinta);
}
.matcard__prop{
  display:block; margin-top:.45rem;
  font-family:var(--font-body); font-weight:600; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--naranja);
}
.matcard__text{ margin:1rem 0 0; color:var(--slate); font-size:1.05rem; line-height:1.5; max-width:36ch; }
@media (max-width:640px){ .mat-grid{ grid-template-columns:1fr; gap:var(--sp-4); } }

/* Materiales: imagen REDONDA dentro de las tarjetas (mantiene el efecto de apilado) */
.materiales .mat__media{
  aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  width:min(280px,72%); margin-inline:auto;
  border:1px solid var(--faint); box-shadow:0 12px 36px rgba(26,23,19,.14);
}
.materiales .mat__img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; }
@media (min-width:768px){
  .materiales .mat-stack .mat__media{ width:min(46vh,420px); aspect-ratio:1/1; max-height:none; }
  .materiales .mat-stack .mat__img{ aspect-ratio:1/1; max-height:none; }
}

/* ============================================================
   SELECTOR DÍA / NOCHE (segmentado, en vez de botón)
   ============================================================ */
.theme-switch{
  display:inline-flex; align-items:center; gap:2px; flex:none;
  padding:3px; border:1px solid var(--faint); border-radius:999px; background:transparent;
}
.theme-switch__opt{
  display:inline-flex; align-items:center; gap:.34rem;
  padding:.42rem .74rem; border:0; border-radius:999px; background:transparent;
  color:var(--tinta); cursor:pointer;
  font-family:var(--font-body); font-weight:500; font-size:.78rem; letter-spacing:.03em;
  transition:background var(--t-fast), color var(--t-fast);
}
.theme-switch__opt svg{ width:15px; height:15px; }
.theme-switch__opt[aria-pressed="true"]{ background:var(--naranja); color:#fff; }
.theme-switch__opt[aria-pressed="false"]:hover{ color:var(--naranja); }
.theme-switch__opt:focus-visible{ outline:3px solid var(--naranja); outline-offset:3px; }
/* Compacto en mobile: solo íconos */
@media (max-width:520px){ .theme-switch__opt span{ display:none; } .theme-switch__opt{ padding:.42rem .5rem; } }

/* ============================================================
   EQUIPAMIENTO: vuelve el PIN (panel opaco 100svh que cubre lo de atrás).
   En mobile (<960) es scroll horizontal nativo.
   ============================================================ */
.equipamiento{ padding-bottom:0; }
.hscroll{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden; background:var(--papel);
}
.hscroll__track{ display:flex; gap:0; width:max-content; }
/* En mobile también queda el panel pineado (mismo efecto que desktop): el JS
   pinea .hscroll y el track se desplaza horizontal con el scroll vertical. */
@media (max-width:959px){
  /* El nav flota arriba: centro el contenido en el área DEBAJO del nav para que
     no se tape la imagen arriba ni quede aire abajo. Imagen acotada -> entra todo. */
  .hscroll{ padding-top:var(--header-h); padding-bottom:var(--sp-3); }
  .machine__img{ max-height:38svh; }
}

/* Footer minimal: solo la barra de copyright fina */
.site-footer{ padding-top:0; }
.site-footer .footer__bottom{ border-top:1px solid rgba(238,232,222,.18); }
.footer__by{ color:var(--faint); transition:color var(--t-fast); }
.footer__by:hover{ color:var(--naranja); }