/* ===========================================================
   BOTH COMPANY — Bordados premium · San Salvador, El Salvador
   Sistema visual: editorial de lujo · crema cálida + tinta + oro
   Base de diseño: Claude Design, adaptada con el oro de marca #C9913D
   =========================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:        #16130f;
  --ink-soft:   #2a2520;
  --paper:      #fbf8f2;
  --cream:      #f4efe5;
  --cream-deep: #ece5d7;
  --gold:       #c9913d;   /* oro de marca Both */
  --gold-deep:  #946c20;   /* oro oscuro para texto sobre claro */
  --gold-soft:  #e2bd80;   /* oro claro para texto sobre oscuro */
  --muted:      #8c8478;
  --line:       rgba(22,19,15,.14);
  --line-soft:  rgba(22,19,15,.08);
  --line-on-dark: rgba(244,239,229,.16);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Hanken Grotesk", -apple-system, system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{ background:var(--gold); color:var(--paper); }

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* film-grain atmosphere */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(80px,11vw,160px); position:relative; }
.section--tight{ padding-block:clamp(60px,7vw,100px); }

.eyebrow{
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  font-weight:600; color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:.8em;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); display:inline-block; }
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:var(--gold-soft); }
.eyebrow--light::before{ background:var(--gold-soft); }

h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.02; letter-spacing:-.01em; }
.display{ font-size:clamp(48px,8.5vw,124px); font-weight:500; line-height:.96; letter-spacing:-.02em; }
.h-sec{ font-size:clamp(34px,5.2vw,68px); line-height:1.02; }
.lead{ font-size:clamp(18px,1.5vw,21px); color:var(--ink-soft); max-width:54ch; line-height:1.65; }
.italic{ font-style:italic; }
em.gold{ color:var(--gold-deep); font-style:italic; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.7em;
  padding:17px 30px; font-size:13.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; border-radius:2px; overflow:hidden;
  transition:color .5s var(--ease), transform .5s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn .arr{ position:relative; z-index:2; transition:transform .5s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.btn:hover::before{ transform:scaleX(1); }

.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid::before{ background:var(--gold); }
.btn--solid:hover{ color:var(--ink); }

.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold::before{ background:var(--ink); }
.btn--gold:hover{ color:var(--paper); }

.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost::before{ background:var(--ink); }
.btn--ghost:hover{ color:var(--paper); }

.btn--ghost-light{ border:1px solid var(--line-on-dark); color:var(--paper); }
.btn--ghost-light::before{ background:var(--paper); }
.btn--ghost-light:hover{ color:var(--ink); }

.link-u{ position:relative; font-weight:600; font-size:13.5px; letter-spacing:.12em; text-transform:uppercase; }
.link-u::after{ content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.link-u:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

/* ---------- Media (video / foto reales) ---------- */
.media{ position:relative; overflow:hidden; background:var(--cream-deep); }
.media video,.media img{ width:100%; height:100%; object-fit:cover; }
.media--dark{ background:#16130f; }

/* ====================================================
   NAV
   ==================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease);
  color:var(--paper);
}
.nav.scrolled{
  background:rgba(251,248,242,.9); backdrop-filter:blur(14px) saturate(1.4);
  color:var(--ink); padding-block:14px; box-shadow:0 1px 0 var(--line-soft);
}
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand .mark{ font-family:var(--serif); font-size:25px; font-weight:600; letter-spacing:.02em; }
.brand .sub{ font-size:9.5px; letter-spacing:.42em; text-transform:uppercase; margin-top:5px; opacity:.7; font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; position:relative; opacity:.82; transition:opacity .35s var(--ease), transform .35s var(--ease); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1.5px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav-links a:hover{ opacity:1; transform:translateY(-1px); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-cta{ padding:12px 22px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; border:1px solid currentColor; border-radius:2px; transition:background .4s var(--ease), color .4s var(--ease); }
.nav.scrolled .nav-cta:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.nav:not(.scrolled) .nav-cta:hover{ background:var(--paper); color:var(--ink); }
.nav-burger{ display:none; flex-direction:column; gap:5px; width:30px; }
.nav-burger span{ height:1.5px; background:currentColor; transition:.4s var(--ease); }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:1100; background:var(--ink); color:var(--paper); display:flex; flex-direction:column; justify-content:center; gap:8px; padding:var(--gutter); overflow-y:auto; transform:translateY(-100%); visibility:hidden; transition:transform .6s var(--ease), visibility 0s linear .6s; }
.drawer.open{ transform:none; visibility:visible; transition:transform .6s var(--ease); }
.drawer a{ font-family:var(--serif); font-size:clamp(34px,8vw,64px); line-height:1.25; }
.drawer .x{ position:absolute; top:24px; right:var(--gutter); font-size:30px; }

/* ====================================================
   HERO
   ==================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--paper); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; background:#16130f; }
.hero__bg video,.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(14,12,9,.55) 0%, rgba(14,12,9,.15) 35%, rgba(14,12,9,.35) 65%, rgba(14,12,9,.92) 100%); }
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px,7vw,90px); padding-top:140px; }
.hero__eyebrow{ margin-bottom:26px; }
.hero h1{ max-width:16ch; }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln span{ display:block; transform:translateY(110%); transition:transform 1.1s var(--ease-out); }
.hero.lit h1 .ln span{ transform:none; }
.hero h1 .ln:nth-child(2) span{ transition-delay:.12s; }
.hero h1 .ln:nth-child(3) span{ transition-delay:.24s; }
.hero__row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:38px; }
.hero__lead{ max-width:46ch; color:rgba(244,239,229,.88); font-size:clamp(16px,1.4vw,19px); }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero__scroll{ position:absolute; left:var(--gutter); bottom:26px; z-index:3; display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:rgba(244,239,229,.7); }
.hero__scroll .line{ width:46px; height:1px; background:rgba(244,239,229,.5); position:relative; overflow:hidden; }
.hero__scroll .line::after{ content:""; position:absolute; inset:0; background:var(--gold); transform:translateX(-100%); animation:scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine{ 0%{transform:translateX(-100%);} 50%{transform:translateX(0);} 100%{transform:translateX(100%);} }

/* ====================================================
   MARQUEE
   ==================================================== */
.marquee{ background:var(--ink); color:var(--paper); padding-block:22px; overflow:hidden; border-top:1px solid var(--line-on-dark); }
.marquee__track{ display:flex; gap:64px; white-space:nowrap; width:max-content; animation:marq 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--serif); font-size:26px; font-style:italic; opacity:.85; display:inline-flex; align-items:center; gap:64px; }
.marquee__track span::after{ content:"\2726"; color:var(--gold); font-style:normal; font-size:14px; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ====================================================
   ABOUT
   ==================================================== */
.about{ background:var(--paper); }
.about__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,6vw,96px); align-items:center; }
.about__media{ aspect-ratio:4/5; border-radius:3px; }
/* slideshow crossfade (fotos del taller que rotan) */
.slideshow{ position:relative; }
.slideshow img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s var(--ease); }
.slideshow img.on{ opacity:1; }
.about__media .badge{ position:absolute; right:-1px; bottom:-1px; z-index:3; background:var(--ink); color:var(--paper); padding:22px 26px; }
.about__media .badge .n{ font-family:var(--serif); font-size:46px; line-height:1; color:var(--gold-soft); }
.about__media .badge .t{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-top:6px; opacity:.8; }
.about__body h2{ margin:22px 0 26px; }
.about__body p{ color:var(--ink-soft); margin-bottom:18px; }
.about__sign{ font-family:var(--serif); font-style:italic; font-size:26px; margin-top:10px; color:var(--gold-deep); }
.about__sign small{ display:block; font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:clamp(56px,7vw,90px); }
.stat{ padding:34px 8px 6px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat .n{ font-family:var(--serif); font-size:clamp(40px,5vw,64px); line-height:1; color:var(--ink); }
.stat .n .u{ color:var(--gold-deep); }
.stat .l{ font-size:12.5px; letter-spacing:.06em; color:var(--muted); margin-top:12px; text-transform:uppercase; }

/* ---- Barra de números + sellos (prueba social, arranque) ---- */
.statsband{ background:var(--paper); padding-block:clamp(40px,5vw,66px); border-bottom:1px solid var(--line); }
.statsband .stats{ margin-top:0; border-top:none; }
.seals{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; margin-top:clamp(30px,3.6vw,46px); }
.seals li{ font-size:12.5px; letter-spacing:.03em; color:var(--ink-soft); padding:9px 18px; border:1px solid var(--line); border-radius:40px; display:flex; align-items:center; gap:9px; }
.seals li::before{ content:"\2713"; color:var(--gold-deep); font-weight:700; }

/* ---- Botón grande + enlace secundario del hero ---- */
.btn--lg{ padding:21px 42px; font-size:14.5px; }
.hero__actions{ align-items:center; }
.hero__link{ color:var(--paper); opacity:.82; font-size:14px; letter-spacing:.02em; border-bottom:1px solid transparent; padding-bottom:2px; transition:opacity .4s var(--ease), border-color .4s var(--ease); }
.hero__link:hover{ opacity:1; border-bottom-color:rgba(244,239,229,.6); }

/* ---- Bandas de CTA repetidas a lo largo del embudo ---- */
.ctaband{ background:var(--gold); color:var(--ink); padding-block:clamp(50px,6.5vw,86px); text-align:center; }
.ctaband--alt{ background:var(--ink); color:var(--paper); }
.ctaband__inner{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.ctaband__title{ font-family:var(--serif); font-size:clamp(28px,4.2vw,50px); line-height:1.04; max-width:20ch; }
.ctaband__sub{ font-size:clamp(14px,1.4vw,16px); opacity:.86; max-width:52ch; margin-top:-8px; }
.ctaband .btn--solid::before{ background:var(--paper); }
.ctaband .btn--solid:hover{ color:var(--ink); }

/* ====================================================
   PROCESS / TALLER
   ==================================================== */
.process{ background:var(--ink); color:var(--paper); }
.process .lead{ color:rgba(244,239,229,.8); }
.process__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:clamp(48px,6vw,80px); }
.process__head h2{ max-width:14ch; }
.process__media{ aspect-ratio:16/7; border-radius:3px; margin-bottom:clamp(48px,6vw,80px); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-on-dark); }
.step{ padding:38px 30px 44px; border-bottom:1px solid var(--line-on-dark); border-right:1px solid var(--line-on-dark); position:relative; transition:background .5s var(--ease); }
.step:nth-child(4n){ border-right:none; }
.step:hover{ background:rgba(201,145,61,.08); }
.step .num{ font-family:var(--serif); font-size:15px; color:var(--gold); letter-spacing:.1em; }
.step h3{ font-size:27px; margin:18px 0 12px; }
.step p{ color:rgba(244,239,229,.65); font-size:15px; line-height:1.6; }
.step .bar{ position:absolute; left:0; top:-1px; height:2px; width:0; background:var(--gold); transition:width .6s var(--ease); }
.step:hover .bar{ width:100%; }

/* ====================================================
   BRANDS (logos reales de clientes)
   ==================================================== */
.brands{ background:var(--cream); }
.brands__head{ text-align:center; margin-bottom:clamp(40px,5vw,64px); }
/* órbita de logos: varias bandas infinitas en sentidos alternos */
.logos-orbit{ display:flex; flex-direction:column; gap:clamp(14px,2vw,28px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logos{ overflow:hidden; background:transparent; }
.logos__track{ display:flex; align-items:center; width:max-content; }
.logos[data-ready] .logos__track{ animation:logosScroll 60s linear infinite; }
.logos--reverse[data-ready] .logos__track{ animation-direction:reverse; animation-duration:72s; }
.logos-orbit:hover .logos__track{ animation-play-state:paused; }
.logocell{ flex:0 0 auto; width:clamp(160px,18vw,210px); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; padding:14px clamp(28px,3.5vw,52px); background:transparent; overflow:hidden; }
.logocell img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; opacity:.82; filter:grayscale(.12); transition:transform .5s var(--ease), opacity .5s var(--ease), filter .5s var(--ease); }
.logocell:hover img{ transform:scale(1.06); opacity:1; filter:grayscale(0); }
@keyframes logosScroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .logos-orbit{ -webkit-mask-image:none; mask-image:none; } .logos__track{ width:auto; flex-wrap:wrap; justify-content:center; } }

/* franja de sectores reales */
.sectors{ margin-top:clamp(40px,5vw,64px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; justify-content:center; text-align:center; }
.sectors__lead{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.sectors__list{ display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; list-style:none; }
.sectors__list li{ font-family:var(--serif); font-size:clamp(17px,1.7vw,22px); color:var(--ink-soft); padding:7px 16px; border:1px solid var(--line); border-radius:40px; transition:border-color .35s var(--ease), color .35s var(--ease); }
.sectors__list li:hover{ border-color:var(--gold); color:var(--gold-deep); }

/* bloque de confianza B2B */
.trust{ margin-top:clamp(48px,6vw,80px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.5vw,36px); border-top:1px solid var(--line); padding-top:clamp(40px,5vw,60px); }
.trust__item{ display:flex; gap:18px; align-items:flex-start; }
.trust__ic{ width:30px; height:30px; color:var(--gold-deep); flex:none; margin-top:2px; }
.trust__item h3{ font-size:20px; line-height:1.15; margin-bottom:8px; }
.trust__item p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; }
@media (max-width:900px){ .trust{ grid-template-columns:1fr; gap:26px; } }

/* ====================================================
   CATÁLOGO / COTIZADOR
   ==================================================== */
.catalog{ background:var(--paper); }
.catalog__head{ text-align:center; max-width:60ch; margin:0 auto clamp(48px,6vw,76px); }
.catalog__head .lead{ margin:22px auto 0; text-align:center; }

.config{
  display:grid; grid-template-columns:1.55fr .95fr; gap:clamp(24px,3vw,44px); align-items:start;
}
.config__panel{ display:flex; flex-direction:column; gap:42px; }
.cfg-block .cfg-label{ display:flex; align-items:baseline; gap:14px; margin-bottom:20px; }
.cfg-block .cfg-label .step-n{ font-family:var(--serif); font-size:22px; color:var(--gold-deep); }
.cfg-block .cfg-label h3{ font-size:24px; }
.cfg-block .cfg-label .hint{ margin-left:auto; font-size:12px; color:var(--muted); letter-spacing:.04em; }

.opt-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.opt-grid--3{ grid-template-columns:repeat(3,1fr); }

/* ===== Tipos de prenda / categorías ===== */
.prendas{ background:var(--paper); border-top:1px solid var(--line-soft); }
.prendas__head{ text-align:center; max-width:60ch; margin:0 auto clamp(44px,6vw,72px); }
.prendas__head .lead{ margin:22px auto 0; text-align:center; }
.prendas__group + .prendas__group{ margin-top:clamp(44px,5vw,68px); }
.prendas__gtitle{ display:flex; align-items:center; gap:16px; font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.4vw,30px); color:var(--ink); margin-bottom:24px; }
.prendas__gtitle::after{ content:""; flex:1; height:1px; background:var(--line); }
.prendas__gtitle .badge{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }
.prendas__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:14px; }
.pcard{ border:1px solid var(--line); border-radius:14px; padding:24px 22px 26px; background:#fff; transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.pcard:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:0 12px 30px rgba(22,19,15,.06); }
.pcard__ic{ width:30px; height:30px; color:var(--gold-deep); margin-bottom:14px; display:block; }
.pcard h4{ font-family:var(--serif); font-size:20px; font-weight:500; color:var(--ink); margin-bottom:8px; }
.pcard p{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
@media (max-width:600px){ .prendas__grid{ grid-template-columns:1fr 1fr; } }
.opt{
  position:relative; border:1px solid var(--line); border-radius:3px; padding:16px 14px 14px;
  cursor:pointer; background:var(--paper); transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
  display:flex; flex-direction:column; gap:10px; min-height:118px;
}
.opt:hover{ border-color:var(--gold); transform:translateY(-2px); }
.opt.sel{ border-color:var(--ink); background:#fff; box-shadow:0 10px 30px -18px rgba(22,19,15,.5); }
.opt .ic{ width:30px; height:30px; color:var(--ink); opacity:.8; }
.opt.sel .ic{ color:var(--gold-deep); opacity:1; }
.opt .nm{ font-size:14.5px; font-weight:600; line-height:1.2; }
.opt .pr{ font-size:12.5px; color:var(--muted); margin-top:auto; }
.opt .check{ position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.6); transition:.35s var(--ease); }
.opt.sel .check{ opacity:1; transform:none; background:var(--ink); border-color:var(--ink); }
.opt.sel .check svg{ width:10px; height:10px; color:var(--paper); }

/* quantity */
.qty-row{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.stepper button{ width:50px; height:54px; font-size:22px; font-family:var(--serif); transition:background .3s var(--ease); }
.stepper button:hover{ background:var(--cream); }
.stepper input{ width:84px; height:54px; text-align:center; border:none; border-inline:1px solid var(--line); font-family:var(--serif); font-size:24px; color:var(--ink); background:transparent; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.qty-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.qty-chips button{ padding:9px 16px; border:1px solid var(--line); border-radius:40px; font-size:13px; font-weight:500; transition:.3s var(--ease); }
.qty-chips button:hover{ border-color:var(--gold); }
.qty-chips button.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.qty-note{ font-size:12.5px; color:var(--gold-deep); margin-top:14px; min-height:18px; }

/* summary card */
.summary{ position:sticky; top:96px; background:var(--ink); color:var(--paper); border-radius:4px; padding:clamp(26px,2.5vw,38px); }
.summary h3{ font-size:14px; letter-spacing:.18em; text-transform:uppercase; font-family:var(--sans); font-weight:600; color:var(--gold-soft); }
.summary__rule{ height:1px; background:var(--line-on-dark); margin:24px 0; }
.sum-line{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; font-size:14.5px; }
.sum-line .k{ color:rgba(244,239,229,.7); }
.sum-line .v{ font-weight:600; }
.sum-line.muted .v{ color:var(--gold-soft); }
.summary__total{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:8px; }
.summary__total .lbl{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,239,229,.7); }
.summary__total .amt{ font-family:var(--serif); font-size:clamp(40px,5vw,58px); line-height:1; }
.summary__total .amt .c{ color:var(--gold-soft); font-size:.5em; vertical-align:.55em; margin-right:2px; }
.summary__unit{ text-align:right; font-size:13px; color:rgba(244,239,229,.6); margin-top:8px; }
.summary .btn{ width:100%; justify-content:center; margin-top:26px; }
.summary__fine{ font-size:11.5px; color:rgba(244,239,229,.45); line-height:1.5; margin-top:18px; text-align:center; }

/* ---------- Visualizador integrado en el resumen ---------- */
.summary__preview{ display:flex; flex-direction:column; align-items:center; gap:12px; padding-bottom:24px; margin-bottom:6px; border-bottom:1px solid var(--line-on-dark); }
.embshirt{ width:148px; height:auto; filter:drop-shadow(0 14px 26px rgba(0,0,0,.35)); }
.embshirt .body{ fill:#fff; stroke:rgba(22,19,15,.14); stroke-width:2; }
.embshirt .placket,.embshirt .collar{ fill:#ece5d7; stroke:rgba(22,19,15,.12); stroke-width:2; }
/* siluetas intercambiables según la prenda */
.embshirt .gshape{ display:none; }
.embshirt .gshape.on{ display:block; }
.embshirt .gd{ fill:none; stroke:rgba(22,19,15,.22); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.embshirt .gd-fill{ fill:rgba(22,19,15,.22); stroke:none; }
.embshirt .zones--cap,.embshirt .zones--apron{ display:none; }
.embshirt.is-cap .zones--torso{ display:none; }
.embshirt.is-cap .zones--cap{ display:block; }
.embshirt.is-apron .zones--torso{ display:none; }
.embshirt.is-apron .zones--apron{ display:block; }
.embzone{ fill:var(--gold); opacity:.16; stroke:var(--gold); stroke-width:1.5; stroke-dasharray:4 3; transition:opacity .35s var(--ease); }
.embzone.active{ opacity:.92; stroke-dasharray:none; }
.embzone-label{ fill:var(--ink); font-family:var(--sans); font-size:7px; font-weight:700; letter-spacing:.4px; text-anchor:middle; opacity:0; transition:opacity .35s var(--ease); }
.embzone-label.active{ opacity:1; }
.summary__preview-cap{ font-size:12.5px; letter-spacing:.04em; color:var(--gold-soft); text-align:center; }

.disc{ margin-top:32px; display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-left:2px solid var(--gold); border-radius:3px; background:var(--cream); padding:18px 22px; font-size:13.5px; line-height:1.7; color:var(--ink-soft); max-width:74ch; }
.disc .ic{ color:var(--gold-deep); flex:none; font-size:15px; line-height:1.5; }
.disc strong{ color:var(--ink); font-weight:600; }

/* ====================================================
   GALLERY / PASARELA CINEMATOGRÁFICA
   ==================================================== */
.gallery{ background:var(--cream); overflow:hidden; }
.pasarela{ position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:clamp(78px,8vw,104px); padding-bottom:clamp(22px,3vw,40px); }
.pasarela__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:26px; margin-bottom:clamp(20px,2.6vw,34px); }
.pasarela__head .h-sec{ font-size:clamp(30px,4.2vw,52px); }
.pasarela__head .eyebrow{ margin-bottom:2px; }
.pasarela__aside{ display:flex; flex-direction:column; gap:16px; align-items:flex-end; }
.pasarela__hint{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.gfilter{ display:flex; gap:8px; flex-wrap:wrap; }
.gfilter button{ padding:10px 20px; border:1px solid var(--line); border-radius:40px; font-size:13px; font-weight:500; transition:.35s var(--ease); }
.gfilter button:hover{ border-color:var(--gold); }
.gfilter button.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.pasarela__viewport{ display:flex; align-items:center; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; cursor:grab; }
.pasarela__viewport::-webkit-scrollbar{ display:none; }
.pasarela__viewport.dragging{ cursor:grabbing; }
.pasarela__viewport.dragging .panel{ cursor:grabbing; }
.pasarela__track{ display:flex; align-items:center; flex:0 0 auto; gap:clamp(16px,2vw,30px); padding-inline:var(--gutter); }

.panel{ position:relative; flex:0 0 auto; cursor:pointer; }
.panel.hide{ display:none; }
.panel__media{ position:relative; overflow:hidden; border-radius:4px; box-shadow:0 30px 60px -34px rgba(22,19,15,.65); }
.panel__media video{ position:absolute; inset:0; width:118%; height:100%; left:-9%; object-fit:cover; will-change:transform; }
.panel__media::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(transparent 52%, rgba(14,12,9,.74)); }
.panel--tall .panel__media{ height:min(60vh,600px); aspect-ratio:3/4; }
.panel--mid  .panel__media{ height:min(48vh,470px); aspect-ratio:1/1; }
.panel--mid{ transform:translateY(3.5vh); }
.panel__meta{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:20px 22px; display:flex; flex-direction:column; gap:5px; }
.panel__num{ font-family:var(--serif); font-size:13px; color:var(--gold-soft); letter-spacing:.12em; }
.panel__sector{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,229,.72); }
.panel__title{ font-family:var(--serif); font-size:clamp(20px,2vw,28px); line-height:1.05; color:var(--paper); }
.panel__play{ position:absolute; top:16px; right:16px; z-index:3; width:46px; height:46px; border-radius:50%; background:rgba(14,12,9,.4); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; color:var(--paper); opacity:0; transform:scale(.8); transition:opacity .4s var(--ease), transform .4s var(--ease), background .4s var(--ease); }
.panel:hover .panel__play{ opacity:1; transform:none; }
.panel:hover .panel__play{ background:var(--gold); color:var(--ink); }
.panel__play svg{ width:18px; height:18px; margin-left:2px; }

/* tarjeta CTA al final de la pasarela */
.panel--cta{ display:flex; align-items:center; }
.panel--cta .panel__ctainner{ width:clamp(300px,32vw,420px); height:min(48vh,470px); background:var(--ink); color:var(--paper); border-radius:4px; padding:clamp(30px,3vw,48px); display:flex; flex-direction:column; justify-content:center; gap:14px; }
.panel--cta h3{ font-size:clamp(34px,3.4vw,52px); margin:6px 0 4px; }
.panel--cta p{ color:rgba(244,239,229,.7); font-size:15px; max-width:30ch; }
.panel--cta .btn{ align-self:flex-start; margin-top:10px; }

/* hilo dorado que se cose con el scroll */
.pasarela__thread{ width:100%; height:12px; margin-top:clamp(18px,2.4vw,30px); flex:none; }
.thread-base{ stroke:var(--line); stroke-width:1.5; fill:none; stroke-dasharray:.012 .01; }
.thread-stitch{ stroke:var(--gold); stroke-width:3; fill:none; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }

/* riel vertical fijo (firma de marca) */
.thread-rail{ position:fixed; left:max(10px,2.2vw); top:14vh; bottom:14vh; width:2px; z-index:60; background:var(--line); pointer-events:none; overflow:hidden; }
.thread-rail span{ position:absolute; left:0; top:0; width:100%; height:0; background:linear-gradient(var(--gold), var(--gold-soft)); }
@media (max-width:1080px){ .thread-rail{ display:none; } }

/* ---------- MODO CINE ---------- */
.cine{ position:fixed; inset:0; z-index:9600; display:flex; align-items:center; justify-content:center; padding:clamp(16px,3vw,40px); }
.cine[hidden]{ display:none; }
.cine__backdrop{ position:absolute; inset:0; background:rgba(8,7,5,.9); backdrop-filter:blur(8px); opacity:0; transition:opacity .4s var(--ease); }
.cine.show .cine__backdrop{ opacity:1; }
.cine__close{ position:absolute; top:clamp(14px,2vw,26px); right:clamp(16px,2.4vw,30px); z-index:3; font-size:34px; line-height:1; color:rgba(244,239,229,.7); transition:color .3s var(--ease); }
.cine__close:hover{ color:var(--gold-soft); }
.cine__stage{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.6fr); gap:clamp(20px,3vw,44px); align-items:center; width:100%; max-width:1180px; transform:translateY(18px) scale(.985); opacity:0; transition:transform .5s var(--ease-out), opacity .5s var(--ease-out); }
.cine.show .cine__stage{ transform:none; opacity:1; }
.cine__media{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio:16/10; box-shadow:0 50px 90px -40px rgba(0,0,0,.8); }
.cine__media video{ width:100%; height:100%; object-fit:cover; background:#000; }
.cine__meta{ color:var(--paper); display:flex; flex-direction:column; gap:12px; }
.cine__sector{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); }
.cine__title{ font-family:var(--serif); font-size:clamp(28px,3.2vw,44px); line-height:1.05; }
.cine__meta .btn{ align-self:flex-start; margin-top:8px; }
@media (max-width:820px){
  .cine__stage{ grid-template-columns:1fr; gap:22px; max-height:92vh; overflow-y:auto; }
  .cine__media{ aspect-ratio:9/14; max-height:64vh; }
}

/* enlace WhatsApp en el footer */
.footer__wa{ font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--gold-soft); transition:color .3s var(--ease); }
.footer__wa:hover{ color:var(--paper); }

/* ====================================================
   FAQ
   ==================================================== */
.faq{ background:var(--paper); }
.faq__grid{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(40px,6vw,90px); align-items:start; }
.faq__aside h2{ margin:20px 0 22px; }
.faq__aside p{ color:var(--ink-soft); margin-bottom:26px; }
.faq__list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; gap:20px; padding:28px 4px; text-align:left; }
.faq-q .qt{ font-family:var(--serif); font-size:clamp(20px,2.4vw,27px); flex:1; transition:color .4s var(--ease); }
.faq-q:hover .qt{ color:var(--gold-deep); }
.faq-q .ico{ position:relative; width:18px; height:18px; flex:none; }
.faq-q .ico::before,.faq-q .ico::after{ content:""; position:absolute; background:var(--ink); transition:transform .45s var(--ease); }
.faq-q .ico::before{ left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%); }
.faq-q .ico::after{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.faq-item.open .ico::after{ transform:translateX(-50%) scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .5s var(--ease); }
.faq-a p{ padding:0 4px 30px; color:var(--ink-soft); max-width:62ch; }

/* ====================================================
   CONTACT
   ==================================================== */
.contact{ background:var(--ink); color:var(--paper); }
.contact__grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(40px,6vw,96px); align-items:start; }
.contact__aside .lead{ color:rgba(244,239,229,.8); margin-block:22px 40px; }
.contact__channels{ display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line-on-dark); }
.cchan{ display:flex; align-items:center; gap:18px; padding:22px 0; border-bottom:1px solid var(--line-on-dark); transition:padding-left .4s var(--ease); }
.cchan:hover{ padding-left:10px; }
.cchan .ic{ width:22px; height:22px; color:var(--gold-soft); flex:none; }
.cchan .l{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,239,229,.55); }
.cchan .v{ font-family:var(--serif); font-size:23px; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,239,229,.6); font-weight:600; }
.field input,.field select,.field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line-on-dark); color:var(--paper);
  font-family:var(--sans); font-size:16px; padding:12px 2px; transition:border-color .4s var(--ease);
}
.field textarea{ resize:vertical; min-height:90px; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(244,239,229,.3); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); }
.field select{ -webkit-appearance:none; appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23e2bd80' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center; }
.field select option{ color:var(--ink); }
/* honeypot anti-bot */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.form .consent{ grid-column:1/-1; display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:rgba(244,239,229,.6); line-height:1.5; cursor:pointer; }
.form .consent input{ margin-top:3px; accent-color:var(--gold); flex:none; }
.form .consent a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:2px; }
.form .submit-row{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:6px; }
.form .privacy{ font-size:12px; color:rgba(244,239,229,.45); max-width:34ch; }
.form-success{ grid-column:1/-1; display:none; align-items:center; gap:16px; padding:24px; border:1px solid var(--gold); border-radius:4px; background:rgba(201,145,61,.1); }
.form-success.show{ display:flex; }
.form-success .ic{ width:40px; height:40px; border-radius:50%; background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center; flex:none; }
.form-success .t{ font-family:var(--serif); font-size:22px; }
.form-success .s{ font-size:13.5px; color:rgba(244,239,229,.7); margin-top:3px; }

/* ====================================================
   FOOTER
   ==================================================== */
.footer{ background:#0e0c09; color:var(--paper); padding-top:clamp(70px,8vw,110px); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:clamp(50px,6vw,80px); border-bottom:1px solid var(--line-on-dark); }
.footer__brand .mark{ font-family:var(--serif); font-size:38px; font-weight:600; }
.footer__brand .sub{ font-size:10px; letter-spacing:.42em; text-transform:uppercase; opacity:.6; margin-top:8px; }
.footer__brand p{ color:rgba(244,239,229,.55); font-size:14px; max-width:34ch; margin-top:24px; line-height:1.6; }
.fcol h4{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); font-weight:600; margin-bottom:20px; }
.fcol a,.fcol span{ display:block; font-size:14.5px; color:rgba(244,239,229,.65); padding:7px 0; transition:color .35s var(--ease); }
.fcol a:hover{ color:var(--paper); }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding-block:30px; font-size:12.5px; color:rgba(244,239,229,.45); }

/* ====================================================
   COOKIE BANNER + PRIVACY MODAL
   ==================================================== */
.cookie{
  position:fixed; left:1.2rem; right:1.2rem; bottom:1.2rem; z-index:9000;
  max-width:880px; margin:0 auto; background:var(--ink); color:var(--paper);
  border:1px solid var(--line-on-dark); border-radius:10px; padding:18px 22px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7);
  transform:translateY(160%); opacity:0; transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.cookie.show{ transform:none; opacity:1; }
.cookie__text{ flex:1; min-width:240px; font-size:13px; line-height:1.6; color:rgba(244,239,229,.75); }
.cookie__text a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:2px; }
.cookie__actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie__btn{ padding:11px 20px; border-radius:6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; transition:.3s var(--ease); }
.cookie__btn.ghost{ border:1px solid var(--line-on-dark); color:rgba(244,239,229,.8); }
.cookie__btn.ghost:hover{ border-color:var(--paper); color:var(--paper); }
.cookie__btn.solid{ background:var(--gold); color:var(--ink); }
.cookie__btn.solid:hover{ background:var(--gold-soft); }

.modal{ position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:1.5rem; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(14,12,9,.74); backdrop-filter:blur(4px); }
.modal__card{ position:relative; z-index:1; max-width:560px; width:100%; max-height:85vh; overflow-y:auto; background:var(--paper); color:var(--ink); border-radius:10px; padding:clamp(28px,4vw,44px); box-shadow:0 40px 90px -30px rgba(0,0,0,.6); }
.modal__close{ position:absolute; top:14px; right:18px; font-size:28px; line-height:1; color:var(--muted); transition:color .3s var(--ease); }
.modal__close:hover{ color:var(--gold-deep); }
.modal__title{ font-family:var(--serif); font-size:34px; font-weight:500; margin:8px 0 22px; }
.modal__body p{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin-bottom:14px; }
.modal__body strong{ color:var(--ink); font-weight:600; }

/* ====================================================
   MAPA (tras el formulario)
   ==================================================== */
.mapwrap{ display:block; position:relative; margin-top:clamp(40px,5vw,64px); border-radius:4px; overflow:hidden; border:1px solid var(--line-on-dark); }
.mapwrap__frame{ width:100%; height:clamp(280px,38vw,420px); border:0; display:block; filter:grayscale(.35) contrast(1.02); transition:filter .5s var(--ease); pointer-events:none; }
.mapwrap:hover .mapwrap__frame{ filter:grayscale(0) contrast(1); }
.mapwrap__cta{
  position:absolute; right:18px; bottom:18px; z-index:2;
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--gold); color:var(--ink);
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 20px; border-radius:2px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.mapwrap__cta svg{ width:17px; height:17px; }
.mapwrap:hover .mapwrap__cta{ transform:translateY(-3px); background:var(--gold-soft); }

/* ====================================================
   BOTÓN FLOTANTE WHATSAPP
   ==================================================== */
.wafloat{
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:8000;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25d366; color:#fff;
  box-shadow:0 10px 30px -6px rgba(37,211,102,.55);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.wafloat svg{ width:30px; height:30px; position:relative; z-index:2; }
.wafloat:hover{ transform:scale(1.09) translateY(-2px); box-shadow:0 16px 38px -8px rgba(37,211,102,.7); }
.wafloat__pulse{ position:absolute; inset:0; border-radius:50%; background:#25d366; opacity:.55; animation:waPulse 2.4s var(--ease) infinite; z-index:1; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.5; } 70%{ transform:scale(1.7); opacity:0; } 100%{ opacity:0; } }
.wafloat__tip{
  position:absolute; right:70px; top:50%; transform:translateY(-50%) translateX(8px);
  background:var(--ink); color:var(--paper); font-size:12px; font-weight:500;
  letter-spacing:.04em; white-space:nowrap; padding:8px 13px; border-radius:4px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.wafloat:hover .wafloat__tip{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (prefers-reduced-motion:reduce){ .wafloat__pulse{ animation:none; } }

/* ---------- Refuerzo de animación: botones e interacción ---------- */
.btn:active{ transform:scale(.97); }
.btn--gold,.btn--solid{ box-shadow:0 8px 24px -12px rgba(22,19,15,.5); }
.nav-cta{ transition:background .4s var(--ease), color .4s var(--ease), transform .3s var(--ease); }
.nav-cta:active{ transform:scale(.96); }
.opt:active{ transform:scale(.98); }
.stepper button:active,.qty-chips button:active{ transform:scale(.94); }
/* destello al prellenar la cotización */
@keyframes quoteFlash{ 0%{ box-shadow:0 0 0 0 rgba(201,145,61,.55); } 100%{ box-shadow:0 0 0 18px rgba(201,145,61,0); } }
.summary.flash{ animation:quoteFlash .7s var(--ease) 2; }

/* ---------- Anclas: que el título no quede bajo el nav fijo ---------- */
section[id]{ scroll-margin-top:90px; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width:1080px){
  .config{ grid-template-columns:1fr; }
  .summary{ position:static; }
  .summary__preview{ flex-direction:row; justify-content:center; gap:20px; }
  .opt-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ aspect-ratio:5/4; max-width:560px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:none; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line); }
  .steps{ grid-template-columns:1fr 1fr; }
  .step:nth-child(4n){ border-right:1px solid var(--line-on-dark); }
  .step:nth-child(2n){ border-right:none; }
  .faq__grid{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }

  /* Pasarela: carrusel horizontal nativo con snap (sin pin GSAP) */
  .pasarela{ min-height:auto; }
  .pasarela__viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .pasarela__viewport::-webkit-scrollbar{ display:none; }
  .pasarela__track{ transform:none !important; }
  .panel{ scroll-snap-align:center; }
  .panel--mid{ transform:none; }
  .panel--tall .panel__media,.panel--mid .panel__media{ height:66vh; aspect-ratio:3/4; }
  .panel--cta .panel__ctainner{ height:66vh; }
  .panel__play{ opacity:1; transform:none; }
  .pasarela__hint{ display:none; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .opt-grid,.opt-grid--3{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:none !important; }
  .form{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; }
  .cookie{ flex-direction:column; align-items:stretch; }
  .cookie__actions{ justify-content:stretch; }
  .cookie__btn{ flex:1; }
}

/* Pasarela accesible: sin pin ni scrub si el usuario reduce el movimiento */
@media (prefers-reduced-motion:reduce){
  .pasarela{ min-height:auto; }
  .pasarela__viewport{ overflow-x:auto; scroll-snap-type:x proximity; }
  .pasarela__track{ transform:none !important; }
  .panel{ scroll-snap-align:center; }
  .panel--mid{ transform:none; }
  .panel__media video{ transform:none !important; }
  .thread-rail{ display:none; }
}

/* ===== Otra prenda (escape para pedidos a medida) ===== */
.opt--otra .ic{ opacity:.55; }
.opt--otra.sel .ic{ opacity:.9; color:var(--gold-deep); }
.opt-otra-note{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:12px; }
.opt-otra-note strong{ color:var(--gold-deep); font-weight:600; }

/* ===== Captura rápida en la tarjeta de cotización (lead aunque no llene el form) ===== */
.quickcap{ margin-top:14px; padding-top:16px; border-top:1px solid var(--line-on-dark); }
.quickcap__q{ font-size:13px; color:rgba(244,239,229,.78); margin-bottom:10px; text-align:center; }
.quickcap__row{ display:flex; gap:8px; }
.quickcap__row input{
  flex:1; min-width:0; background:rgba(244,239,229,.06); color:var(--paper);
  border:1px solid var(--line-on-dark); border-radius:3px; padding:11px 13px; font:inherit; font-size:14px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.quickcap__row input::placeholder{ color:rgba(244,239,229,.4); }
.quickcap__row input:focus{ outline:none; border-color:var(--gold-soft); background:rgba(244,239,229,.1); }
.quickcap__btn{
  flex:0 0 auto; background:var(--gold); color:var(--ink); border:none; border-radius:3px;
  padding:0 16px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .3s var(--ease), transform .2s var(--ease);
}
.quickcap__btn:hover{ background:var(--gold-soft); }
.quickcap__btn:active{ transform:scale(.97); }
.quickcap__btn:disabled{ opacity:.5; cursor:default; }
.quickcap__ok{ font-size:12.5px; color:var(--gold-soft); margin-top:10px; text-align:center; }

/* ===== Modo frío (llegada desde outreach con UTM/ref): priorizar captura ===== */
.more-toggle{
  background:none; border:none; color:var(--gold-deep); font:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer; padding:4px 0; margin-bottom:6px; text-align:left;
}
.more-toggle:hover{ text-decoration:underline; }

/* ===== Bordados multi-ubicación + IVA ===== */
.opt-multi-note{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:12px; }
.opt-multi-note strong{ color:var(--gold-deep); font-weight:600; }
.iva-line{ display:none; }            /* el JS las muestra cuando el IVA está activo */
.iva-toggle{
  display:flex; align-items:center; gap:10px; margin-top:14px;
  font-size:13.5px; color:rgba(244,239,229,.82); cursor:pointer; user-select:none;
}
.iva-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.iva-switch{ position:relative; flex:0 0 auto; width:40px; height:22px; border-radius:11px; background:rgba(244,239,229,.18); transition:background .25s var(--ease); }
.iva-switch::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--paper); transition:transform .25s var(--ease); }
.iva-toggle input:checked + .iva-switch{ background:var(--gold); }
.iva-toggle input:checked + .iva-switch::after{ transform:translateX(18px); }
.iva-toggle input:focus-visible + .iva-switch{ outline:2px solid var(--gold-soft); outline-offset:2px; }