/* Lote · Ficha técnica (paleta Blueprint)
   Todo el color vive en los tokens de abajo. Las siluetas SVG toman su color de --c en cada uso,
   así que recolorear una prenda no requiere fotos. */

:root {
  --paper: #F1EDE3;       /* fondo */
  --paper-2: #FAF7F1;     /* secciones y tarjetas claras */
  --kraft: #C9A36B;       /* papel kraft */
  --kraft-light: #DDC59B; /* etiqueta de envío, fondo de siluetas */
  --navy: #0F2A4A;        /* azul de plano */
  --navy-2: #1A4170;
  --blue: #2F5C8F;
  --ink: #0B1522;         /* tinta: texto y bordes */
  --muted: #566272;
  --accent: #FFC400;      /* amarillo de seguridad: acción */
  --on-accent: #14100C;
  --line: #CEC6B4;
  --on-navy: #F1EDE3;
  --on-navy-muted: #B4C2D6;
  --on-navy-line: rgb(241 237 227 / 0.22);

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --margin: clamp(1.25rem, 8.33vw, 7.5rem);   /* 120px a 1440 */
  --section-y: clamp(4.5rem, 7.5vw, 7rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--ink); color: var(--paper); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.icon { width: 1.15rem; height: 1.15rem; flex: none; }
.container { padding-inline: var(--margin); max-width: 90rem; margin-inline: auto; }
.garment { display: block; width: 100%; height: 100%; }

/* ---------- Piezas ---------- */
.kicker { display: flex; align-items: center; gap: 0.7rem; font: 500 0.78rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.kicker b { font-weight: 700; color: var(--ink); }
.kicker::after { content: ""; flex: 0 0 3rem; height: 1px; background: currentColor; opacity: 0.6; }
.section--navy .kicker { color: var(--on-navy-muted); }
.section--navy .kicker b { color: var(--on-navy); }
.title { margin-top: 1.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; font-size: clamp(2.3rem, 3.9vw, 3.5rem); }
.title--light { color: #fff; }
.lead { margin-top: 1.4rem; max-width: 30rem; font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.7; color: var(--muted); }
.section--navy .lead { color: var(--on-navy-muted); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.4rem; padding: 0.8rem 1.8rem; border: 2px solid var(--ink); cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.button:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.button:active { transform: translate(0, 0); box-shadow: none; }
.button--sm { min-height: 2.9rem; padding: 0.5rem 1.2rem; font-size: 0.95rem; }
.button--outline { background: transparent; color: var(--ink); }
.button--block { width: 100%; }
.link-mono { font: 500 0.9rem/1.2 var(--mono); text-decoration: none; padding-bottom: 0.3rem; border-bottom: 2px solid var(--ink); }
.link-mono:hover { background: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem;
  padding: 1.1rem var(--margin); background: var(--paper); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; text-decoration: none; }
.brand-mark { width: 1.9rem; height: 1.9rem; border: 2px solid var(--ink); background: linear-gradient(90deg, var(--ink) 0 33%, var(--kraft) 33% 100%); box-shadow: inset 0 0 0 2px var(--paper); }
.brand-sub { padding-left: 0.8rem; border-left: 1px solid var(--ink); font: 500 0.7rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.site-nav { display: flex; gap: 2rem; justify-self: center; font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.site-nav a { text-decoration: none; padding-block: 0.3rem; transition: color 160ms; }
.site-nav a:hover { color: var(--ink); }
.header-cta { justify-self: end; display: flex; align-items: center; gap: 0.8rem; }
.nav-toggle { display: none; min-height: 2.9rem; padding: 0 1.1rem; border: 2px solid var(--ink); background: transparent; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.mobile-nav { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; padding: 6rem var(--margin) 3rem; background: var(--navy); color: #fff; }
.mobile-nav[hidden] { display: none; }
.mobile-nav a { padding-block: 0.4rem; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(3rem, 6vw, 5.5rem); background-color: var(--paper);
  background-image: linear-gradient(rgb(11 21 34 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(11 21 34 / 0.045) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.hero-title { margin-top: 1.7rem; font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; font-size: clamp(3rem, 5.9vw, 5.4rem); }
.hero-title mark { color: var(--ink); background: var(--kraft); padding: 0 0.1em; margin-inline: -0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-lead { margin-top: 1.7rem; max-width: 34rem; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.65; color: var(--muted); }
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.note { margin-top: 1.4rem; font: 400 0.82rem/1.4 var(--mono); color: var(--muted); }

.label-wrap { position: relative; justify-self: end; width: min(100%, 32rem); }
.label { position: relative; background: var(--kraft-light); border: 2px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); }
.hazard { height: 0.85rem; background: repeating-linear-gradient(-45deg, var(--ink) 0 8px, var(--kraft-light) 8px 16px); border-bottom: 2px solid var(--ink); }
.label-body { padding: 1.5rem 1.6rem 1.3rem; }
.label-top { display: flex; justify-content: space-between; font: 700 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.label-grid { margin-top: 1.1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.label-grid li { position: relative; aspect-ratio: 1; padding: 0.9rem 0.7rem 0.5rem; background: var(--paper-2); border: 1px solid var(--ink); }
.label-grid .code { position: absolute; left: 0.5rem; top: 0.4rem; font: 400 0.68rem/1 var(--mono); color: var(--blue); }
.label-rows { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 2px dashed var(--ink); display: grid; gap: 0.25rem; }
.label-rows > div { display: flex; justify-content: space-between; gap: 1rem; font: 400 0.8rem/1.5 var(--mono); }
.label-rows dt { text-transform: uppercase; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.02em; }
.label-rows dd { font-weight: 700; text-align: right; }
.barcode { margin-top: 1rem; height: 3rem; overflow: hidden; background: linear-gradient(90deg, var(--ink) 0px 2px, transparent 2px 3px, var(--ink) 3px 5px, transparent 5px 6px, var(--ink) 6px 7px, transparent 7px 8px, var(--ink) 8px 10px, transparent 10px 11px, var(--ink) 11px 14px, transparent 14px 15px, var(--ink) 15px 16px, transparent 16px 17px, var(--ink) 17px 19px, transparent 19px 22px, var(--ink) 22px 23px, transparent 23px 24px, var(--ink) 24px 25px, transparent 25px 28px, var(--ink) 28px 29px, transparent 29px 30px, var(--ink) 30px 31px, transparent 31px 32px, var(--ink) 32px 35px, transparent 35px 38px, var(--ink) 38px 39px, transparent 39px 40px, var(--ink) 40px 41px, transparent 41px 42px, var(--ink) 42px 44px, transparent 44px 47px, var(--ink) 47px 48px, transparent 48px 49px, var(--ink) 49px 52px, transparent 52px 54px, var(--ink) 54px 57px, transparent 57px 58px, var(--ink) 58px 59px, transparent 59px 60px, var(--ink) 60px 62px, transparent 62px 63px, var(--ink) 63px 66px, transparent 66px 67px, var(--ink) 67px 70px, transparent 70px 71px, var(--ink) 71px 74px, transparent 74px 75px, var(--ink) 75px 77px, transparent 77px 80px, var(--ink) 80px 82px, transparent 82px 85px, var(--ink) 85px 88px, transparent 88px 91px, var(--ink) 91px 93px, transparent 93px 95px, var(--ink) 95px 96px, transparent 96px 97px, var(--ink) 97px 101px, transparent 101px 102px, var(--ink) 102px 103px, transparent 103px 105px, var(--ink) 105px 108px, transparent 108px 111px, var(--ink) 111px 113px, transparent 113px 116px, var(--ink) 116px 118px, transparent 118px 119px, var(--ink) 119px 120px, transparent 120px 123px, var(--ink) 123px 124px, transparent 124px 126px, var(--ink) 126px 127px, transparent 127px 130px, var(--ink) 130px 132px, transparent 132px 133px, var(--ink) 133px 137px, transparent 137px 138px, var(--ink) 138px 141px, transparent 141px 143px, var(--ink) 143px 145px, transparent 145px 147px, var(--ink) 147px 150px, transparent 150px 153px, var(--ink) 153px 156px, transparent 156px 159px, var(--ink) 159px 160px, transparent 160px 161px, var(--ink) 161px 163px, transparent 163px 166px, var(--ink) 166px 170px, transparent 170px 171px, var(--ink) 171px 172px, transparent 172px 174px, var(--ink) 174px 178px, transparent 178px 181px, var(--ink) 181px 183px, transparent 183px 186px, var(--ink) 186px 190px, transparent 190px 192px, var(--ink) 192px 193px, transparent 193px 196px, var(--ink) 196px 198px, transparent 198px 199px, var(--ink) 199px 202px, transparent 202px 203px, var(--ink) 203px 205px, transparent 205px 206px, var(--ink) 206px 207px, transparent 207px 209px, var(--ink) 209px 210px, transparent 210px 211px, var(--ink) 211px 213px, transparent 213px 216px, var(--ink) 216px 218px, transparent 218px 219px, var(--ink) 219px 220px, transparent 220px 223px, var(--ink) 223px 225px, transparent 225px 227px, var(--ink) 227px 228px, transparent 228px 231px, var(--ink) 231px 234px, transparent 234px 236px, var(--ink) 236px 240px, transparent 240px 243px, var(--ink) 243px 245px, transparent 245px 248px, var(--ink) 248px 249px, transparent 249px 250px, var(--ink) 250px 251px, transparent 251px 252px, var(--ink) 252px 253px, transparent 253px 254px, var(--ink) 254px 258px, transparent 258px 259px, var(--ink) 259px 260px, transparent 260px 263px, var(--ink) 263px 266px, transparent 266px 267px, var(--ink) 267px 269px, transparent 269px 271px, var(--ink) 271px 272px, transparent 272px 273px, var(--ink) 273px 275px, transparent 275px 277px, var(--ink) 277px 280px, transparent 280px 282px, var(--ink) 282px 283px, transparent 283px 284px, var(--ink) 284px 286px, transparent 286px 289px, var(--ink) 289px 291px, transparent 291px 294px, var(--ink) 294px 296px, transparent 296px 297px, var(--ink) 297px 299px, transparent 299px 302px, var(--ink) 302px 303px, transparent 303px 304px, var(--ink) 304px 305px, transparent 305px 306px, var(--ink) 306px 308px, transparent 308px 309px, var(--ink) 309px 310px, transparent 310px 312px, var(--ink) 312px 315px, transparent 315px 316px, var(--ink) 316px 317px, transparent 317px 318px, var(--ink) 318px 321px, transparent 321px 322px, var(--ink) 322px 325px, transparent 325px 326px, var(--ink) 326px 328px, transparent 328px 329px, var(--ink) 329px 330px, transparent 330px 331px, var(--ink) 331px 334px, transparent 334px 337px, var(--ink) 337px 338px, transparent 338px 340px, var(--ink) 340px 342px, transparent 342px 344px, var(--ink) 344px 346px, transparent 346px 347px, var(--ink) 347px 348px, transparent 348px 351px, var(--ink) 351px 353px, transparent 353px 356px, var(--ink) 356px 358px, transparent 358px 360px, var(--ink) 360px 361px, transparent 361px 362px, var(--ink) 362px 363px, transparent 363px 365px, var(--ink) 365px 369px, transparent 369px 371px, var(--ink) 371px 373px, transparent 373px 374px, var(--ink) 374px 377px, transparent 377px 378px, var(--ink) 378px 379px, transparent 379px 381px, var(--ink) 381px 382px, transparent 382px 383px, var(--ink) 383px 386px, transparent 386px 388px, var(--ink) 388px 392px, transparent 392px 393px, var(--ink) 393px 397px, transparent 397px 399px, var(--ink) 399px 402px, transparent 402px 404px, var(--ink) 404px 405px, transparent 405px 407px, var(--ink) 407px 408px, transparent 408px 410px, var(--ink) 410px 414px, transparent 414px 415px, var(--ink) 415px 418px, transparent 418px 419px, var(--ink) 419px 420px, transparent 420px 423px, var(--ink) 423px 427px, transparent 427px 428px, var(--ink) 428px 429px, transparent 429px 432px, var(--ink) 432px 434px, transparent 434px 435px, var(--ink) 435px 436px, transparent 436px 438px, var(--ink) 438px 440px, transparent 440px 442px, var(--ink) 442px 443px, transparent 443px 445px, var(--ink) 445px 447px, transparent 447px 449px, var(--ink) 449px 451px, transparent 451px 452px, var(--ink) 452px 453px, transparent 453px 454px, var(--ink) 454px 455px, transparent 455px 458px, var(--ink) 458px 459px, transparent 459px 461px, var(--ink) 461px 462px, transparent 462px 465px, var(--ink) 465px 468px, transparent 468px 469px, var(--ink) 469px 471px, transparent 471px 473px, var(--ink) 473px 477px, transparent 477px 478px, var(--ink) 478px 482px, transparent 482px 483px, var(--ink) 483px 485px, transparent 485px 486px, var(--ink) 486px 488px, transparent 488px 489px, var(--ink) 489px 491px, transparent 491px 493px, var(--ink) 493px 494px, transparent 494px 497px, var(--ink) 497px 499px, transparent 499px 502px, var(--ink) 502px 506px, transparent 506px 507px, var(--ink) 507px 511px, transparent 511px 512px, var(--ink) 512px 513px, transparent 513px 514px, var(--ink) 514px 515px, transparent 515px 516px, var(--ink) 516px 519px, transparent 519px 522px); }
.barcode-num { margin-top: 0.3rem; text-align: center; font: 400 0.7rem/1 var(--mono); letter-spacing: 0.3em; }
.stamp { position: absolute; right: -1.4rem; bottom: -1.2rem; width: 5.4rem; padding: 0.5rem 0; display: grid; place-items: center; text-align: center; background: var(--paper-2); border: 2px solid var(--navy); outline: 1px solid var(--navy); outline-offset: 2px; color: var(--navy); transform: rotate(-6deg); }
.stamp small { font: 700 0.62rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.stamp b { font: 700 1.9rem/1.1 var(--mono); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.stats li { padding: 1.2rem 1.8rem 2.2rem; border-left: 1px solid var(--line); }
.stats li:first-child { padding-left: 0; border-left: 0; }
.stats b { display: flex; align-items: baseline; gap: 0.7rem; font: 700 clamp(3.2rem, 6vw, 5rem)/1 var(--mono); letter-spacing: -0.06em; font-feature-settings: "zero" 1; }
.stats b small { font: 500 clamp(1rem, 1.6vw, 1.4rem)/1 var(--mono); letter-spacing: 0; color: var(--blue); }
.stats p { margin-top: 0.5rem; color: var(--muted); max-width: 20rem; }

/* ---------- Secciones ---------- */
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--line); }
.hero + .section { border-top: 1px solid var(--line); }
.section--paper2 { background: var(--paper-2); }
.section--navy { background: var(--navy); color: var(--on-navy); border-top: 0; }
.section--kraft { background: var(--kraft); border-top: 2px solid var(--ink); }
.section--kraft + .section { border-top: 2px solid var(--ink); }
.section--kraft .lead { color: #3A3326; }
.section--kraft .kicker { color: #1D2A3B; }

/* 01 condiciones */
.terms-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.terms-text .title { max-width: 8.6em; }
.terms-text .lead { max-width: 26rem; }
.specs { border-top: 2px solid var(--ink); }
.specs > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.specs dt { font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.specs dd b { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.specs dd span { margin-left: 0.4rem; font: 400 0.8rem/1.4 var(--mono); color: var(--muted); }
.tiers { margin-top: clamp(3rem, 5vw, 4.5rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.tier { padding: 1.4rem 1.6rem 1.6rem; background: var(--paper-2); border: 1px solid var(--ink); }
.tier-top { display: flex; justify-content: space-between; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.tier h3 { margin-top: 1rem; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
.range { margin-top: 0.5rem; font: 400 0.92rem/1.3 var(--mono); }
.bar { margin-top: 1.1rem; height: 0.55rem; border: 1px solid var(--ink); background: #E8DEC9; }
.bar i { display: block; height: 100%; width: var(--p); background: var(--navy); }
.tier-note { margin-top: 1rem; font-size: 0.92rem; line-height: 1.5; color: var(--muted); }

/* 02 productos */
.products-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.products-head .title { margin-top: 1.2rem; }
.products { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.product { background: var(--paper); border: 1px solid var(--ink); display: flex; flex-direction: column; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.product:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.product .media { position: relative; aspect-ratio: 384 / 230; display: grid; place-items: center; background: var(--kraft-light); border-bottom: 1px solid var(--ink); }
.product .media .garment { width: 36%; height: 62%; }
.min { position: absolute; top: 0.9rem; right: 0.9rem; padding: 0.3rem 0.55rem; background: var(--paper-2); border: 1px solid var(--ink); font: 700 0.72rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.product .info { padding: 1.3rem 1.4rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.code { font: 400 0.72rem/1 var(--mono); letter-spacing: 0.1em; color: var(--blue); }
.product h3 { margin-top: 0.6rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.product .info > p:not(.code):not(.foot) { margin-top: 0.5rem; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.foot { margin-top: auto; padding-top: 1rem; display: flex; justify-content: space-between; font: 400 0.75rem/1.2 var(--mono); text-transform: uppercase; }
.product .info > .foot { margin-top: 1.1rem; border-top: 1px dashed var(--ink); padding-top: 0.9rem; }

/* 03 pasos */
.steps { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--on-navy); }
.steps li { padding: 2rem 2.5rem 0.5rem; border-left: 1px solid var(--on-navy-line); }
.steps li:first-child { padding-left: 0; border-left: 0; }
.num { display: block; font: 700 clamp(3.6rem, 6vw, 5.2rem)/1 var(--mono); letter-spacing: -0.06em; color: var(--kraft); font-feature-settings: "zero" 1; }
.steps h3 { margin-top: 1.5rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: #fff; }
.steps p { margin-top: 0.6rem; color: var(--on-navy-muted); max-width: 22rem; }
.tag { display: inline-block; margin-top: 1.4rem; padding: 0.45rem 0.8rem; border: 1px solid var(--on-navy); font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }

/* 04 envíos */
.ship-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.ship-text .lead { max-width: 28rem; }
.icons { margin-top: 1.8rem; display: grid; gap: 0.9rem; }
.icons li { display: flex; align-items: center; gap: 0.9rem; font-weight: 600; }
.icons .icon { width: 1.4rem; height: 1.4rem; }
.route { padding: 1.4rem 1.7rem 1.5rem; background: var(--paper-2); border: 1px solid var(--ink); }
.route-top { display: flex; justify-content: space-between; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.timeline { margin-top: 1.5rem; position: relative; display: grid; gap: 1.15rem; }
.timeline::before { content: ""; position: absolute; left: 0.8rem; top: 1rem; bottom: 1rem; border-left: 2px dashed var(--ink); }
.timeline li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-left: 3rem; font-weight: 600; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.7rem; height: 1.7rem; transform: translateY(-50%); border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.timeline li.is-last::before { background: var(--accent); }
.timeline em { font: 400 0.8rem/1 var(--mono); font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.route-note { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font: 400 0.78rem/1.5 var(--mono); color: var(--muted); }

/* 05 catálogo */
.catalog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.catalog-text .lead { max-width: 28rem; }
.boxes { margin-top: 1.8rem; display: grid; gap: 0.7rem; }
.boxes li { display: flex; align-items: center; gap: 0.8rem; font-weight: 600; }
.boxes i { flex: none; display: grid; place-content: center; width: 1.4rem; height: 1.4rem; background: var(--ink); color: var(--kraft); }
.boxes .icon { width: 0.9rem; height: 0.9rem; }
.catalog-text .button { margin-top: 2rem; }
.file-meta { margin-top: 1.1rem; font: 400 0.78rem/1.4 var(--mono); color: #2E281D; }
.pdf-mock { position: relative; justify-self: center; width: min(100%, 34rem); aspect-ratio: 34 / 26; }
.sheet { position: absolute; border: 1px solid var(--ink); background: var(--paper-2); box-shadow: 8px 8px 0 var(--ink); }
.sheet--back { left: 2%; top: 8%; width: 46%; height: 88%; transform: rotate(-3deg); background: var(--paper); box-shadow: none; }
.sheet--side { right: 0; top: 0; width: 46%; height: 90%; transform: rotate(3deg); padding: 14% 12%; display: grid; align-content: start; gap: 8%; }
.sheet--side i { display: block; height: 0.5rem; background: #E8DEC9; }
.sheet--side i:first-child { height: 3.2rem; background: var(--kraft-light); border: 1px solid var(--ink); }
.cover { position: absolute; left: 22%; top: 3%; width: 44%; aspect-ratio: 200 / 250; display: flex; flex-direction: column; justify-content: space-between; padding: 7%; background: var(--navy); color: #fff; border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); transform: rotate(-1deg); }
.cover-kicker { font: 500 0.55rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--kraft); }
.stamp-box { align-self: flex-end; width: 18%; aspect-ratio: 1; background: var(--kraft); border: 2px solid #fff; }
.cover-title { font-size: clamp(1.2rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.cover-foot { display: flex; justify-content: space-between; padding-top: 0.5rem; border-top: 1px solid rgb(255 255 255 / 0.4); font: 500 0.55rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* 06 preguntas */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq-text .lead { max-width: 24rem; }
.faq-text .button { margin-top: 1.8rem; }
.faq-list { border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.3; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { padding: 0 2rem 1.6rem 0; margin-top: -0.4rem; color: var(--muted); max-width: 40rem; }

/* 07 cotización */
.quote-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.quote-text .lead { max-width: 25rem; }
.contact { margin-top: 2.4rem; border-top: 1px solid var(--on-navy-line); }
.contact > div { display: flex; gap: 2rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--on-navy-line); }
.contact dt { flex: 0 0 6rem; font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-navy-muted); }
.contact dd { font: 400 1rem/1.3 var(--mono); }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

.quote-form { padding: clamp(1.4rem, 2.8vw, 2.2rem); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 10px 10px 0 #081019; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.field span, .chips legend { display: block; margin-bottom: 0.45rem; font: 500 0.75rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.field input, .field select { width: 100%; min-height: 3.1rem; padding: 0.5rem 1rem; border: 1px solid var(--ink); border-radius: 0; background: var(--paper-2); font-size: 1rem; appearance: none; }
.field select { background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23566272'/%3E%3C/svg%3E") right 1rem center no-repeat; padding-right: 2.4rem; cursor: pointer; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible, .field select:focus-visible { outline: 0; border-color: var(--navy-2); box-shadow: 0 0 0 2px var(--navy-2); }
.field input.is-invalid { border-color: #B3261E; box-shadow: 0 0 0 2px #B3261E; }
.chips { border: 0; padding: 0; margin: 0 0 1.3rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips legend { padding: 0; width: 100%; margin-bottom: 0.6rem; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip-opt span { display: block; margin: 0; padding: 0.5rem 1rem; border: 1px solid var(--ink); border-radius: 999px; font: 700 0.85rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); transition: background-color 150ms, color 150ms; }
.chip-opt input:checked + span { background: var(--ink); color: var(--paper); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--navy-2); outline-offset: 3px; }
.form-note { margin-top: 1rem; text-align: center; font: 400 0.78rem/1.4 var(--mono); color: var(--muted); }
.form-note.is-error { color: #B3261E; font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-navy-muted); }
.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; padding-block: 1.7rem; font: 400 0.85rem/1.5 var(--mono); }
.footer-row a { text-decoration: none; }
.footer-row a:hover { text-decoration: underline; }

/* ---------- Entradas (solo con JS; sin JS todo es visible) ---------- */
.js [data-rise] { opacity: 0; translate: 0 20px; transition: opacity 600ms var(--ease), translate 600ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s; }
.js [data-rise].is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise] { opacity: 1; translate: none; transition: none; }
  .button, .product { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .nav-toggle { display: inline-block; }
  .hero-grid, .terms-grid, .ship-grid, .catalog-grid, .faq-grid, .quote-grid { grid-template-columns: 1fr; }
  .label-wrap { justify-self: start; margin-right: 1.4rem; }
  .products { grid-template-columns: repeat(2, 1fr); }
  .pdf-mock { order: -1; }
}
@media (max-width: 760px) {
  .header-cta .button { display: none; }
  .brand-sub { display: none; }
  .hero-actions .button { flex: 1 1 100%; }
  .stats, .tiers, .steps { grid-template-columns: 1fr; }
  .stats li, .stats li:first-child { padding: 1.1rem 0 1.4rem; border-left: 0; }
  .stats li + li { border-top: 1px solid var(--line); }
  .steps li, .steps li:first-child { padding: 1.8rem 0; border-left: 0; }
  .steps li + li { border-top: 1px solid var(--on-navy-line); }
  .specs > div { grid-template-columns: 1fr; gap: 0.3rem; }
  .field-row { grid-template-columns: 1fr; }
  .products { grid-template-columns: 1fr; }
  .label-body { padding: 1.1rem 1rem 1rem; }
}