:root{
  --crema:#f1ece3;
  --papel:#e8e0d2;
  --negro:#121212;
  --granate:#c8102e;
  --piedra:#6f6a62;
  --kraft:#b89a72;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--crema);color:var(--negro);
  font-family:"Montserrat","Segoe UI",system-ui,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}

/* ---------- Hero ---------- */
.hero{height:260vh;position:relative}
.hero__pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:#1b1e22;color:var(--crema);
}
.hero__top{position:absolute;inset:0 0 auto;display:flex;justify-content:center;padding:clamp(20px,4vh,44px) 20px 0;z-index:3}
.logo{height:clamp(34px,6vh,58px);width:auto}

.hero__stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
#sobre,.hero__fallback{
  aspect-ratio:1116/2000;height:auto;width:min(100%,calc(100vh * .558));object-fit:fill;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 24%,#000 76%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:linear-gradient(to right,transparent,#000 24%,#000 76%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}
/* Pantallas verticales (celular): la imagen ocupa todo el ancho y se funde con el fondo arriba y abajo */
@media (max-aspect-ratio:1/1){
  #sobre,.hero__fallback{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
}
#sobre{display:none}
.hero.has-frames #sobre{display:block}
.hero.has-frames .hero__fallback{display:none}

.hero__copy{position:absolute;left:clamp(20px,6vw,90px);bottom:clamp(90px,17vh,170px);z-index:3;pointer-events:none}
.copy{
  position:absolute;left:0;bottom:0;white-space:nowrap;
  font-size:clamp(22px,3.6vw,48px);font-weight:300;letter-spacing:.01em;
  opacity:0;transform:translateY(16px);
  transition:opacity .45s ease,transform .45s ease;
}
.copy.on{opacity:1;transform:none}
.copy--2 b,.copy--3 b{color:var(--granate)}

.hero__hint{
  position:absolute;left:50%;bottom:clamp(18px,4vh,36px);translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#9a958c;
  transition:opacity .4s;
}
.hero__hint i{width:1px;height:34px;background:linear-gradient(var(--granate),transparent);animation:cae 1.6s ease-in-out infinite}
@keyframes cae{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero.is-scrolling .hero__hint{opacity:0}

/* Opción 1: una sola secuencia vertical. Ajustes concentrados aquí.
   La base del producto está en el 83.4% del fotograma.
   Sólo escritorio horizontal: el CSS de móvil queda intacto. */
@media (min-width:1024px) and (min-aspect-ratio:1/1){
  .hero[data-desktop="side"]{--hero-zoom:1.65;--hero-base:.90;--hero-column:40%}
  .hero[data-desktop="side"] .hero__pin{background:#090909}
  .hero[data-desktop="side"] .hero__stage{left:var(--hero-column)}
  .hero[data-desktop="side"] #sobre,
  .hero[data-desktop="side"] .hero__fallback{
    position:absolute;left:50%;
    top:calc(100vh * (var(--hero-base) - .834 * var(--hero-zoom)));
    width:calc(100vh * .558 * var(--hero-zoom));
    height:calc(100vh * var(--hero-zoom));max-width:none;
    translate:-50% 0;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 24%,#000 86%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 24%,#000 86%,transparent);
  }
  .hero[data-desktop="side"] .hero__top{justify-content:flex-start;padding:10vh 0 0 8vw}
  .hero[data-desktop="side"] .hero__copy{left:8vw;bottom:43vh;width:32vw}
  .hero[data-desktop="side"] .copy{white-space:normal;width:32vw;font-size:clamp(28px,3vw,52px);line-height:1.25}
  .hero[data-desktop="side"] .hero__hint{left:8vw;translate:none;align-items:flex-start}
}

/* ---------- Secciones ---------- */
section:not(.hero){padding:clamp(72px,8vw,120px) 0}
section:not(.hero) .wrap{width:min(var(--max),100% - 48px)}
.eyebrow{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--granate);
  font-weight:600;margin-bottom:20px;
}
h2{font-size:clamp(30px,3.6vw,50px);font-weight:400;line-height:1.16;letter-spacing:-.025em;text-wrap:balance}
h3{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.lead{margin-top:24px;max-width:64ch;font-size:clamp(17px,1.4vw,19px);line-height:1.7;color:#45413b}

.empresa{background:var(--crema);border-top:3px solid var(--kraft)}
.empresa h2{max-width:36ch}
.cifras{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin-top:48px}
.cifras li{border-top:1px solid #b8ad9d;padding-top:20px}
.cifras b{display:block;font-size:20px;line-height:1.3;font-weight:600;margin-bottom:8px}
.cifras span{display:block;max-width:32ch;color:#57534c;font-size:15px;line-height:1.6}

.productos{background:var(--papel)}
.productos h2{max-width:26ch}
/* Catálogo editorial: cada foto ocupa su marco, sin bandas ni paneles vacíos. */
.grid{margin-top:40px;display:block;columns:3;column-gap:24px}
.grid .reveal{opacity:1;transform:none;transition:none}
.card,.card--wide{
  position:relative;display:inline-block;vertical-align:top;width:100%;min-width:0;
  margin:0 0 24px;break-inside:avoid;overflow:hidden;background:#fff;
  border:0;border-radius:3px;
}
.card img,.card--wide img{
  display:block;width:100%;height:auto;min-height:0;max-height:none;
  aspect-ratio:4/3;object-fit:cover;object-position:50% 50%;padding:0;
  background:var(--papel);border:0;transition:filter .2s ease;
}
.card img[src$="sobre-frente.jpg"]{aspect-ratio:4/5;object-position:50% 65%}
.card img[src$="sobres-papel-aluminio.jpg"]{object-position:25% 50%}
.card img[src$="tin-tie.jpg"]{object-position:35% 50%}
.card img[src$="sobres-tela.jpg"]{aspect-ratio:4/5;object-position:50% 55%}
.card img[src$="portatestigos.jpg"]{object-position:50% 55%}
.card img[src$="bolsas-polietileno.jpg"]{aspect-ratio:16/9;object-position:50% 45%}
.card img[src$="sacos.jpg"]{aspect-ratio:4/5;object-position:50% 58%}
.card div,.card--wide div{padding:22px 24px 24px}
.card p{margin-top:8px;color:#57534c;font-size:15px;line-height:1.6}
@media (hover:hover) and (pointer:fine){.card:hover img{filter:brightness(1.04)}}
.cierre{background:var(--negro);color:var(--crema)}
.cierre h2{max-width:24ch}
.cierre .lead{color:#cfc8ba;max-width:48ch}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:56px;
  padding:15px 28px;background:var(--granate);color:#fff;text-decoration:none;
  font-size:16px;font-weight:600;line-height:1.4;letter-spacing:.01em;
  border-radius:3px;border:1px solid var(--granate);transition:background .2s,border-color .2s;
}
.btn:hover{background:#a30d25;border-color:#a30d25}
.btn:focus-visible{outline:3px solid var(--kraft);outline-offset:5px}
.btn--ghost{background:transparent;color:var(--crema);border-color:#827a6e}
.btn--ghost:hover{background:#292622;border-color:var(--kraft)}
.pie{
  margin-top:clamp(56px,7vw,96px);padding-top:28px;border-top:1px solid #474139;
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;
  color:#bcb4a7;font-size:14px;line-height:1.7;
}
.pie span{overflow-wrap:anywhere}
.logo--pie{height:30px}

/* ---------- Aparición ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .grid{columns:2;column-gap:20px}



  .cifras{grid-template-columns:1fr;gap:24px;margin-top:36px}
  .copy{white-space:normal;max-width:70vw}
  .hero__copy{bottom:clamp(80px,14vh,130px)}
}
@media (max-width:540px){
  section:not(.hero){padding:64px 0}
  .eyebrow{margin-bottom:16px}
  .lead{margin-top:20px;font-size:17px;line-height:1.65}
  .grid{columns:1;margin-top:32px}

  .card,.card--wide{margin-bottom:20px}
  .card div,.card--wide div{padding:22px}
  .cta{flex-direction:column;gap:12px;margin-top:28px}
  .btn{width:100%}
  .pie{flex-direction:column;align-items:flex-start;gap:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .copy{transition:none}
  .card img,.btn{transition:none}
}