:root{
  /* ---- Color ---- */
  --graphite:#1A1D21; --graphite-900:#16181C;
  --steel-800:#22262B; --steel-700:#2A2F35; --steel-600:#3A4149;
  --steel-500:#4E565F; --steel-300:#6A727B;
  --text-muted:#9BA1A8; --text-dim:#8A8F94; --text-soft:#C9CDD2;
  --ink:#1A1D21; --ink-soft:#5A5F64; --ink-dim:#7A7F84;
  --smoke:#F4F5F3; --white:#FFFFFF; --border:#E1E2DE; --border-soft:#EDEEE9;
  --amber:#F2A900; --amber-dark:#946200; --amber-bg:#FFF3D6;
  --wa:#25D366; --wa-ink:#06351F;
  /* ---- Radius ---- */
  --r-xs:4px; --r-sm:6px; --r-md:7px; --r-pill:100px;
  /* ---- Shadow ---- */
  --sh-wa:0 10px 24px rgba(37,211,102,.28);
  --sh-float:0 12px 30px rgba(37,211,102,.40);
  /* ---- Grid pattern ---- */
  --grid: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:'IBM Plex Sans',sans-serif; color:var(--ink); background:var(--smoke); -webkit-font-smoothing:antialiased;}
::selection{background:var(--amber); color:var(--graphite-900);}
a{color:inherit;}
img,svg{display:block;}
.wrap{max-width:1200px; margin:0 auto; padding-left:32px; padding-right:32px;}
.mono{font-family:'IBM Plex Mono',monospace;}
.muted{color:var(--text-dim);}

/* ---- Iconos reutilizables (sprite) ---- */
.ico{width:17px; height:17px; flex:none;}
.nav .btn-wa .ico{width:16px; height:16px;}
.btn-wa.lg .ico, .process-cta .btn-wa .ico{width:19px; height:19px;}
.fab .ico{width:24px; height:24px;}
.logo-mark{width:26px; height:26px; flex:none; object-fit:contain;}
.card-glyph{width:52px; height:67px; flex-shrink:0;}

/* ---- Buttons ---- */
.btn-wa{display:inline-flex; align-items:center; gap:9px; background:var(--wa); color:var(--wa-ink);
  font-weight:700; text-decoration:none; border-radius:var(--r-md); padding:14px 22px; font-size:15px; box-shadow:var(--sh-wa);}
.btn-wa svg{color:var(--wa-ink);}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--steel-600); color:var(--text-soft);
  font-weight:600; font-size:15px; padding:14px 22px; border-radius:var(--r-md); text-decoration:none;}
.btn-dark{display:inline-flex; align-items:center; gap:9px; background:var(--graphite); color:var(--smoke);
  font-weight:600; font-size:14px; padding:13px 20px; border-radius:var(--r-md); text-decoration:none;}

/* ---- Header ---- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(26,29,33,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--steel-700);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-name{font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:20px; letter-spacing:.5px; color:var(--smoke); text-transform:uppercase;}
.brand-name b{color:var(--amber); font-weight:800;}
.nav{display:flex; align-items:center; gap:28px;}
.nav a.link{font-size:13px; color:var(--text-soft); text-decoration:none; font-weight:500;}
.nav .btn-wa{padding:9px 15px; font-size:13px; box-shadow:none;}

/* ---- Hero ---- */
.hero{position:relative; background:var(--graphite); background-image:var(--grid); background-size:32px 32px; overflow:hidden;}
.hero-ring{position:absolute; border:1px solid rgba(242,169,0,.12); border-radius:50%;}
.hero-ring.a{top:-120px; right:-120px; width:420px; height:420px;}
.hero-ring.b{top:-60px; right:-60px; width:300px; height:300px; border-color:rgba(242,169,0,.08);}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding-top:70px; padding-bottom:80px;}
.kicker{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--amber); text-transform:uppercase; margin-bottom:20px;}
.kicker .tick{width:24px; height:1px; background:var(--amber); display:inline-block;}
.hero h1{font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:66px; line-height:.94; color:var(--smoke); letter-spacing:.5px; text-transform:uppercase; margin:0 0 22px;}
.hero h1 span{color:var(--amber);}
.hero .lede{font-size:16px; line-height:1.6; color:var(--text-muted); max-width:460px; margin:0 0 30px;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
.stats{display:flex; gap:32px; margin-top:40px; padding-top:28px; border-top:1px solid var(--steel-700);}
.stat-n{font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:34px; color:var(--smoke); line-height:1;}
.stat-l{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--text-dim); text-transform:uppercase; margin-top:4px;}
.hero-art{display:flex; justify-content:center;}

/* ---- 3D roll viewer ---- */
.viewer{display:flex; flex-direction:column; align-items:center; gap:16px; user-select:none;}
.scene{width:300px; height:300px; perspective:1000px; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; position:relative;}
.cotas{position:absolute; inset:0; z-index:5; pointer-events:none; transition:opacity .35s ease; font-family:'IBM Plex Mono',monospace;}
.scene.grabbing{cursor:grabbing;}
.cyl{position:relative; width:180px; height:210px; transform-style:preserve-3d; transform:rotateX(-14deg) rotateY(0deg); will-change:transform;}
.viewer-hint{font-size:11px; letter-spacing:1px; color:var(--text-dim); text-transform:uppercase;}

/* ---- Section headings ---- */
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--amber); text-transform:uppercase; margin-bottom:10px;}
.h2{font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:44px; line-height:.95; text-transform:uppercase; margin:0;}

/* ---- Catálogo ---- */
.catalog{padding-top:80px; padding-bottom:80px;}
.catalog-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:40px;}
.catalog-head .h2{color:var(--graphite-900);}
.catalog-head .intro{font-size:14px; line-height:1.6; color:var(--ink-soft); max-width:360px; margin:0;}
.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.card{background:var(--white); border:1px solid var(--border); display:flex; flex-direction:column;}
.card-top{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border-soft);}
.card-top .mono{font-size:11px; letter-spacing:1px;}
.gramaje-badge{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:var(--amber-dark); background:var(--amber-bg); padding:3px 9px; border-radius:var(--r-xs);}
.card-body{padding:20px 16px; display:flex; gap:16px; align-items:center; border-bottom:1px solid var(--border-soft);}
.card-name{font-family:'Saira Condensed',sans-serif; font-weight:700; font-size:22px; line-height:1; color:var(--graphite-900); text-transform:uppercase; margin:0;}
.card-use{font-size:12px; color:var(--ink-dim); margin:6px 0 0; line-height:1.4;}
.specs{width:calc(100% - 32px); margin:14px 16px; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:11px;}
.specs td{padding:6px 0;}
.specs tr{border-bottom:1px solid #F0F1EC;}
.specs tr.last{border-bottom:none;}
.specs td:first-child{color:var(--text-dim);}
.specs td:last-child{text-align:right; color:var(--steel-700); font-weight:500;}
.card-cta{justify-content:center; padding:13px; font-size:14px; border-radius:var(--r-sm); box-shadow:none; margin:auto 16px 16px;}

/* ---- Proceso ---- */
.process{background:var(--graphite); background-image:var(--grid); background-size:32px 32px;}
.process .wrap{padding-top:80px; padding-bottom:80px;}
.process-head{text-align:center; margin-bottom:52px;}
.process-head .h2{color:var(--smoke);}
.grid-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.step{border:1px solid var(--steel-700); padding:32px 26px; background:rgba(58,65,73,.15);}
.step-n{font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:56px; color:var(--amber); line-height:.9;}
.step .rule{height:1px; background:var(--steel-700); margin:16px 0;}
.step h3{font-family:'Saira Condensed',sans-serif; font-weight:700; font-size:23px; color:var(--smoke); text-transform:uppercase; margin:0 0 10px;}
.step p{font-size:14px; line-height:1.6; color:var(--text-muted); margin:0;}
.process-cta{text-align:center; margin-top:44px;}
.process-cta .btn-wa{padding:15px 26px;}

/* ---- Confianza ---- */
.trust{padding-top:80px; padding-bottom:80px;}
.trust .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;}
.trust .h2{color:var(--graphite-900); margin-bottom:18px;}
.trust .lede{font-size:15px; line-height:1.65; color:var(--ink-soft); margin:0 0 24px;}
.reasons{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.reason{border:1px solid var(--border); background:var(--white); padding:24px 22px;}
.reason-k{width:40px; height:40px; border:1.5px solid var(--amber); display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:18px; color:var(--amber-dark);}
.reason h3{font-family:'Saira Condensed',sans-serif; font-weight:700; font-size:19px; color:var(--graphite-900); text-transform:uppercase; margin:0 0 8px;}
.reason p{font-size:13px; line-height:1.55; color:#6A6F74; margin:0;}

/* ---- Footer ---- */
.site-footer{background:var(--graphite-900); color:var(--text-muted);}
.site-footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-top:56px; padding-bottom:32px;}
.site-footer .brand{margin-bottom:16px;}
.site-footer p{font-size:13px; line-height:1.6; max-width:300px; margin:0;}
.foot-h{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px; color:#6A6F74; text-transform:uppercase; margin-bottom:14px;}
.foot-links{display:flex; flex-direction:column; gap:10px;}
.foot-links a{font-size:14px; color:var(--text-soft); text-decoration:none;}
.site-footer .btn-wa{padding:10px 16px; font-size:13px; box-shadow:none; margin-bottom:14px;}
.foot-info{font-size:13px; line-height:1.7;}
.foot-info a{color:var(--text-soft); text-decoration:none;}
.foot-bar{border-top:1px solid var(--steel-700);}
.foot-bar .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:18px; padding-bottom:18px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#5A5F64;}

/* ---- Floating WhatsApp ---- */
.fab{position:fixed; bottom:24px; right:24px; z-index:100; display:flex; align-items:center; gap:10px;
  background:var(--wa); color:var(--wa-ink); font-weight:700; font-size:14px; padding:14px 20px; border-radius:var(--r-pill);
  text-decoration:none; box-shadow:var(--sh-float);}
.fab svg{color:var(--wa-ink);}

/* ---- Responsive ---- */
@media (max-width:900px){
  .wrap{padding-left:22px; padding-right:22px;}
  .nav .link{display:none;}
  .hero .wrap{grid-template-columns:1fr; padding-top:48px; padding-bottom:56px;}
  .hero h1{font-size:46px;}
  .hero-ring.a,.hero-ring.b{display:none;}
  .h2{font-size:34px;}
  .grid-cards{grid-template-columns:repeat(2,1fr);}
  .grid-steps{grid-template-columns:1fr;}
  .trust .wrap{grid-template-columns:1fr; gap:36px;}
  .site-footer .cols{grid-template-columns:1fr 1fr; gap:28px;}
  .site-footer .brand{grid-column:1 / -1;}
}
@media (max-width:560px){
  .hero h1{font-size:38px;}
  .grid-cards{grid-template-columns:1fr;}
  .reasons{grid-template-columns:1fr;}
  .site-footer .cols{grid-template-columns:1fr;}
  .stats{gap:20px;}
  .fab span{display:none;}
  .fab{padding:16px;}
}