/* ═══════════════════════════════════════════════════════════
   CINCHAR·01 — escenas
   ═══════════════════════════════════════════════════════════ */

/* ─────────── barra superior ─────────── */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:600;
  padding:clamp(14px,2vw,22px) var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  mix-blend-mode:difference;
  transition:transform .6s var(--e-out);
}
.barra.oculta{transform:translateY(-130%)}
.barra.sobre-panel{mix-blend-mode:normal;color:var(--void)}
.barra.sobre-panel .marca,.barra.sobre-panel .abrir,.barra.sobre-panel .lnk{color:var(--void)}
.barra.sobre-panel .marca sup{color:var(--void);opacity:.55}
.marca{
  font-family:var(--disp);font-weight:800;font-size:1.5rem;line-height:1;
  letter-spacing:-.03em;display:flex;align-items:baseline;gap:.45rem;color:#fff;
}
.marca sup{font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;color:var(--fuego);mix-blend-mode:normal}
.menu{display:flex;gap:clamp(.9rem,2vw,2.2rem);align-items:center}
.menu a{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out)}
.menu a:hover::after,.menu a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.menu a[aria-current=page]{color:var(--fuego);mix-blend-mode:normal}

.abrir{
  display:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  padding:.9em 1em;margin:-.9em -1em -.9em 0;   /* área táctil de 44 px sin mover el texto */
}
@media (max-width:860px){
  .menu{display:none}
  .abrir{display:block}
}
.panel{
  position:fixed;inset:0;z-index:590;background:var(--fuego);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding:var(--gut);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e-io);
}
.panel.abierto{clip-path:inset(0 0 0 0)}
.panel a{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.2rem,11vw,5rem);line-height:.92;letter-spacing:-.04em;color:var(--void);
  opacity:0;transform:translateY(30px);transition:opacity .5s var(--e-out),transform .6s var(--e-out);
}
.panel.abierto a{opacity:1;transform:none}
.panel.abierto a:nth-child(1){transition-delay:.18s}
.panel.abierto a:nth-child(2){transition-delay:.25s}
.panel.abierto a:nth-child(3){transition-delay:.32s}
.panel.abierto a:nth-child(4){transition-delay:.39s}
.panel.abierto a:nth-child(5){transition-delay:.46s}
.panel__pie{margin-top:2.4rem;display:flex;justify-content:space-between;color:var(--void);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}

/* ─────────── portada ─────────── */
.portada{
  position:relative;min-height:100svh;
  display:grid;align-items:end;
  padding:clamp(90px,14vh,140px) var(--gut) clamp(24px,5vh,54px);
  overflow:clip;
}
.portada__fondo{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none;
}
.portada__fondo img{
  width:min(54vw,580px);opacity:.34;
  filter:grayscale(1) contrast(1.35) brightness(.85);
  mask-image:radial-gradient(ellipse 62% 70% at 50% 42%,#000 42%,transparent 78%);
  will-change:transform;
}
.portada__tipo{position:relative;z-index:2}
.portada__l1,.portada__l2{display:block}
.portada__l2{text-indent:clamp(0px,9vw,180px)}
.portada__meta{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
  margin-top:clamp(22px,4vw,46px);padding-top:1.4rem;
  border-top:1px solid #23232B;
}
.portada__meta p{max-width:38ch}
.portada__precio{display:flex;align-items:baseline;gap:.7rem}
.portada__precio .n{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,4.4vw,3.6rem);line-height:.9;letter-spacing:-.04em}
.portada__precio s{font-family:var(--mono);font-size:.82rem;color:var(--humo)}

/* sello giratorio */
.sello{
  position:absolute;z-index:3;
  right:clamp(10px,4vw,70px);top:clamp(96px,16vh,190px);
  width:clamp(108px,13vw,168px);aspect-ratio:1;
}
.sello__anillo{animation:rotar 18s linear infinite;transform-origin:50% 50%}
.sello__centro{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--void);
}
.sello__disco{position:absolute;inset:18%;border-radius:50%;background:var(--acido)}
@keyframes rotar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sello__anillo{animation:none}}

.bajar{
  position:absolute;right:var(--gut);bottom:clamp(24px,5vh,54px);z-index:3;
  display:flex;align-items:center;gap:.7rem;
}
.bajar i{display:block;width:1px;height:40px;background:linear-gradient(var(--fuego),transparent);animation:correr 1.8s var(--e-io) infinite}
@keyframes correr{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ─────────── cinta cinética ─────────── */
.cinta{
  position:relative;z-index:4;
  background:var(--fuego);color:var(--void);
  padding:clamp(.6rem,1.4vw,1rem) 0;
  overflow:hidden;white-space:nowrap;
  transform:rotate(-1.6deg) scaleX(1.06);
  border-block:1px solid var(--void);
}
.cinta--acido{background:var(--acido);transform:rotate(1.4deg) scaleX(1.06)}
.cinta--hueco{background:transparent;color:var(--hueso);border-block-color:#23232B;transform:none}
.cinta__via{display:inline-flex;gap:3rem;will-change:transform}
.cinta__via span{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,2.6vw,2.1rem);letter-spacing:-.02em;
  display:inline-flex;align-items:center;gap:1.4rem;
}
.cinta__via span::after{content:"●";font-size:.5em;opacity:.75}

/* ─────────── manifiesto ─────────── */
.manif{position:relative}
.manif__txt{max-width:22ch}
.manif__nota{
  display:flex;gap:1.4rem;margin-top:clamp(28px,5vw,60px);
  padding-top:1.6rem;border-top:1px solid #23232B;
}
.manif__nota .parrafo{max-width:46ch}

/* ─────────── escena anclada (anatomía) ─────────── */
.anat{position:relative}
.anat__carril{position:relative}
.anat__fijo{
  position:sticky;top:0;height:100svh;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(20px,4vw,70px);
  padding:clamp(80px,12vh,120px) var(--gut) clamp(40px,8vh,80px);
}
@media (max-width:900px){
  .anat__fijo{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    gap:16px;padding:76px var(--gut) 76px;
    align-content:center;
  }
  .anat__visor{max-height:none;min-height:0}
  .anat__idx{font-size:3rem;left:12px;bottom:8px}
}
.anat__visor{
  position:relative;height:100%;max-height:72vh;border-radius:2px;overflow:hidden;
  background:var(--carbon);
}
.anat__visor figure{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .8s var(--e-out),transform 1.3s var(--e-out)}
.anat__visor figure.viva{opacity:1;transform:scale(1)}
.anat__visor img{width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(.9)}
.anat__visor::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,10,.72),transparent 48%);
}
.anat__idx{
  position:absolute;left:18px;bottom:14px;z-index:2;
  font-family:var(--disp);font-weight:800;font-size:clamp(3.4rem,7vw,6rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.2px var(--fuego);font-variant-numeric:tabular-nums;
}
.anat__pasos{position:relative}
.anat__paso{
  position:absolute;inset:auto 0 auto 0;
  opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity .55s var(--e-out),transform .7s var(--e-out);
}
.anat__paso.viva{opacity:1;transform:none;pointer-events:auto;position:relative}
.anat__paso h3{margin:.8rem 0 1rem}
@media (max-width:900px){
  .anat__paso h3{font-size:clamp(1.5rem,7vw,2.2rem);margin:.5rem 0 .6rem}
  .anat__paso .parrafo{font-size:.88rem;line-height:1.45}
  .anat__pasos .rubro,.anat__fijo>div>.rubro{display:none}
  .anat__puntos{margin-top:1rem}
}
.anat__puntos{display:flex;gap:.5rem;margin-top:1.8rem}
.anat__punto{width:30px;height:2px;background:#2A2A33;position:relative;overflow:hidden}
.anat__punto i{position:absolute;inset:0;background:var(--fuego);transform:scaleX(0);transform-origin:left;transition:transform .4s linear}
.anat__punto.viva i{transform:scaleX(1)}

/* ─────────── carrusel horizontal anclado ─────────── */
.horiz{position:relative}
.horiz__fijo{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.horiz__via{display:flex;gap:clamp(14px,2vw,30px);padding-inline:var(--gut);will-change:transform}
.lamina{
  position:relative;flex:0 0 auto;
  width:clamp(240px,34vw,460px);height:clamp(320px,62vh,620px);
  background:var(--carbon);overflow:hidden;
}
.lamina img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.lamina:hover img{transform:scale(1.05)}
.lamina__pie{
  position:absolute;left:0;right:0;bottom:0;padding:1.2rem;
  background:linear-gradient(to top,rgba(8,8,10,.88),transparent);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
}
.lamina--texto{
  display:grid;align-content:center;gap:1rem;padding:clamp(1.4rem,3vw,2.4rem);
  background:var(--fuego);color:var(--void);width:clamp(240px,30vw,400px);
}
.lamina--texto .mono{color:rgba(8,8,10,.6)}
.lamina--acido{background:var(--acido)}
.lamina--vacio{background:transparent;border:1px solid #23232B;display:grid;place-items:center;text-align:center;padding:2rem;width:clamp(220px,26vw,340px)}

/* ─────────── fichas técnicas ─────────── */
.datos{border-top:1px solid #23232B}
.dato{
  display:grid;grid-template-columns:72px 1fr auto;gap:clamp(12px,3vw,40px);align-items:baseline;
  padding:clamp(1.1rem,2.4vw,1.9rem) 0;border-bottom:1px solid #1B1B22;
  position:relative;overflow:hidden;
}
.dato::before{
  content:"";position:absolute;inset:0;background:var(--fuego);z-index:-1;
  transform:translateY(101%);transition:transform .5s var(--e-out);
}
.dato:hover::before{transform:translateY(0)}
.dato:hover,.dato:hover .mono,.dato:hover .dato__v{color:var(--void)}
.dato__k{font-family:var(--disp);font-weight:800;font-size:clamp(1.05rem,2.1vw,1.6rem);line-height:1;text-transform:uppercase;letter-spacing:-.02em}
.dato__v{font-family:var(--mono);font-size:.84rem;color:#C9C4B8;text-align:right}
@media (max-width:640px){
  .dato{grid-template-columns:52px 1fr;row-gap:.4rem}
  .dato__v{grid-column:2;text-align:left}
}

/* contadores */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px)}
@media (max-width:760px){.cifras{grid-template-columns:repeat(2,1fr)}}
.cifra{border-top:2px solid var(--fuego);padding-top:1rem}
.cifra__n{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:.85;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cifra__u{font-size:.42em;vertical-align:super;color:var(--fuego)}
.cifra__e{margin-top:.6rem}

/* ─────────── bloque de compra ─────────── */
.compra{position:relative;overflow:clip}
.compra__rej{display:grid;grid-template-columns:1fr .85fr;gap:clamp(24px,4vw,70px);align-items:center}
@media (max-width:900px){.compra__rej{grid-template-columns:1fr}}
.compra__foto{position:relative;background:var(--carbon);overflow:hidden;aspect-ratio:4/4.8}
.compra__foto img{width:100%;height:100%;object-fit:cover}
.compra__precio{
  font-family:var(--disp);font-weight:800;line-height:.82;letter-spacing:-.05em;
  font-size:clamp(4rem,13vw,10rem);font-variant-numeric:tabular-nums;
  display:flex;align-items:flex-start;gap:.1em;
}
.compra__precio .cur{font-size:.26em;margin-top:.5em;color:var(--fuego)}
.tallas{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.6rem 0}
.talla{
  min-width:62px;padding:.85em .9em;border:1px solid #2E2E38;text-align:center;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;
  transition:border-color .3s,background .3s,color .3s;
}
.talla small{display:block;font-size:.6rem;color:var(--humo);margin-top:.3em;letter-spacing:.04em}
.talla:hover{border-color:var(--hueso)}
.talla[aria-pressed=true]{background:var(--hueso);color:var(--void);border-color:var(--hueso)}
.talla[aria-pressed=true] small{color:#5A564F}
.garantias{display:flex;flex-direction:column;gap:.7rem;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid #23232B}
.garantias li{display:flex;gap:.8rem;font-size:.88rem;color:#C9C4B8;align-items:flex-start}
.garantias b{color:var(--hueso);font-weight:700}
.garantias span.p{color:var(--fuego);font-family:var(--mono);font-size:.7rem;padding-top:.2em}

/* barra de compra pegada en móvil */
.fija{
  position:fixed;left:0;right:0;bottom:0;z-index:500;
  background:var(--carbon);border-top:1px solid #23232B;
  padding:.8rem var(--gut) calc(.8rem + env(safe-area-inset-bottom));
  display:none;align-items:center;justify-content:space-between;gap:1rem;
  transform:translateY(110%);transition:transform .5s var(--e-out);
}
.fija.viva{transform:none}
@media (max-width:900px){.fija{display:flex}}

/* ─────────── acordeón ─────────── */
.preg{border-top:1px solid #23232B}
.preg details{border-bottom:1px solid #1B1B22}
.preg summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(1.1rem,2.4vw,1.8rem) 3rem clamp(1.1rem,2.4vw,1.8rem) 0;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;
  font-size:clamp(1.05rem,2.6vw,1.9rem);line-height:1.06;
  transition:color .3s,padding-left .5s var(--e-out);
}
.preg summary::-webkit-details-marker{display:none}
.preg summary:hover{color:var(--fuego);padding-left:1rem}
.preg summary::after{
  content:"";position:absolute;right:2px;top:50%;width:16px;height:16px;margin-top:-8px;
  background:
    linear-gradient(currentColor,currentColor) center/16px 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 16px no-repeat;
  transition:transform .45s var(--e-out)
}
.preg details[open] summary{color:var(--fuego)}
.preg details[open] summary::after{transform:rotate(135deg)}
.preg__c{padding:0 3rem 1.8rem 0;max-width:68ch}
.preg__c p{color:#C9C4B8;font-size:.97rem;line-height:1.6}
.preg__c p+p{margin-top:.8rem}

/* ─────────── pie ─────────── */
.pie{position:relative;padding-top:clamp(50px,8vw,100px);border-top:1px solid #1B1B22;overflow:clip}
.pie__rej{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(20px,3vw,50px);padding-bottom:clamp(40px,6vw,80px)}
@media (max-width:760px){.pie__rej{grid-template-columns:1fr 1fr}.pie__rej>div:first-child{grid-column:1/-1}}
.pie h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--humo);margin-bottom:1.2rem;font-weight:400}
.pie li{margin-bottom:.7rem}
.pie__gigante{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,21.5vw,28rem);line-height:.74;letter-spacing:-.055em;
  white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px #2A2A33;
  text-align:center;margin-bottom:-.14em;user-select:none;
}
.pie__base{
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding:1.4rem 0 clamp(16px,3vw,28px);border-top:1px solid #1B1B22;
}
.pagos{display:flex;gap:.4rem;flex-wrap:wrap}
.pagos span{border:1px solid #23232B;padding:.35em .7em;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--humo)}

/* ─────────── utilidades de página ─────────── */
.cabecera-pag{padding:clamp(110px,16vh,190px) var(--gut) clamp(30px,5vw,60px)}
.ruta{display:flex;gap:.6rem;margin-bottom:clamp(18px,3vw,34px)}
.ruta span{color:#33323A}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,64px);align-items:start}
@media (max-width:860px){.dos{grid-template-columns:1fr}}
.pegado{position:sticky;top:110px}
@media (max-width:860px){.pegado{position:static}}
.marco{border:1px solid #23232B;padding:clamp(1.2rem,2.6vw,2rem);background:var(--carbon)}
.alerta{border-left:2px solid var(--fuego);padding:1.2rem 1.4rem;background:var(--carbon);font-size:.92rem;color:#C9C4B8}
.alerta b{color:var(--hueso)}