/* ═══════════════════════════════════════════════════════════
   CINCHAR·01 — núcleo
   negro absoluto · tipografía cinética · naranja fundido
   ═══════════════════════════════════════════════════════════ */

:root{
  --void:#08080A;
  --carbon:#121217;
  --carbon-2:#1B1B22;
  --hueso:#F3EFE4;
  --humo:#7C776E;
  --fuego:#FF4A17;
  --fuego-osc:#D63A0E;
  --acido:#D8FF3E;

  --disp:"Bricolage Grotesque","Archivo Black",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gut:clamp(16px,3.6vw,54px);
  --max:1560px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  background:var(--void);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* las cintas inclinadas sobresalen a propósito: se recortan aquí,
     en el elemento raíz, porque en <body> el recorte no siempre se propaga */
  overflow-x:clip;
}
html.cargando{overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--void);
  color:var(--hueso);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:clip;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

::selection{background:var(--fuego);color:#fff}
:focus-visible{outline:2px solid var(--acido);outline-offset:4px}

/* grano permanente */
body::after{
  content:"";position:fixed;inset:-50%;z-index:9000;pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:granear .6s steps(2) infinite;
}
@keyframes granear{
  0%{transform:translate(0,0)}25%{transform:translate(-4%,2%)}
  50%{transform:translate(3%,-3%)}75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

/* ─────────── tipografía ─────────── */
.tit{
  font-family:var(--disp);
  font-weight:800;
  line-height:.84;
  letter-spacing:-.045em;
  text-transform:uppercase;
  font-variation-settings:"wdth" 92,"opsz" 48;
  text-wrap:balance;
}
.t-xxl{font-size:clamp(3.4rem,15vw,16rem)}
.t-xl{font-size:clamp(2.8rem,9.5vw,9rem)}
.t-l{font-size:clamp(2.1rem,6vw,5.2rem)}
.t-m{font-size:clamp(1.6rem,3.6vw,3rem);line-height:.92}
.t-s{font-size:clamp(1.15rem,2vw,1.7rem);line-height:1}

.hueca{
  color:transparent;
  -webkit-text-stroke:1.4px var(--hueso);
  paint-order:stroke fill;
}
.hueca-fuego{color:transparent;-webkit-text-stroke:1.4px var(--fuego)}
.fuego{color:var(--fuego)}
.acido{color:var(--acido)}
.humo{color:var(--humo)}

.mono{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--humo);
}
.mono--acido{color:var(--acido)}
.mono--fuego{color:var(--fuego)}

.parrafo{
  font-size:clamp(1rem,1.35vw,1.2rem);
  line-height:1.52;
  color:#C9C4B8;
  max-width:54ch;
}
.parrafo b,.parrafo strong{color:var(--hueso);font-weight:700}

.rubro{
  display:flex;align-items:center;gap:.8em;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--humo);margin-bottom:2rem;
}
.rubro::before{content:"";width:34px;height:1px;background:var(--fuego)}

.env{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.bloque{padding-block:clamp(70px,11vw,170px)}

/* ─────────── botones ─────────── */
.cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  padding:1.15em 2.3em;border-radius:999px;overflow:hidden;
  font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--fuego);color:#0B0B0C;isolation:isolate;
  transition:color .35s var(--e-out);
  will-change:transform;
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--acido);
  transform:translateY(101%);
  transition:transform .5s var(--e-out);
}
.cta:hover::before{transform:translateY(0)}
.cta--hueco{background:transparent;color:var(--hueso);border:1px solid #33323A}
.cta--hueco::before{background:var(--hueso)}
.cta--hueco:hover{color:var(--void)}
.cta--gigante{padding:1.5em 3em;font-size:.88rem}
.cta__f{transition:transform .45s var(--e-out)}
.cta:hover .cta__f{transform:translateX(6px)}

/* enlace de texto con barrido */
.lnk{
  position:relative;display:inline-block;padding:5px 0 4px;   /* ≥24 px de alto para el dedo */
  font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
}
.lnk::after{
  content:"";position:absolute;left:0;bottom:4px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out);
}
.lnk:hover::after{transform:scaleX(1);transform-origin:left}
.lnk--vivo::after{transform:scaleX(1);transform-origin:left}
.lnk--vivo:hover::after{transform:scaleX(0);transform-origin:right}

/* ─────────── cursor ─────────── */
.cursor,.cursor-pt{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  border-radius:50%;mix-blend-mode:difference;
  opacity:0;transition:opacity .3s;
}
.cursor{
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1px solid var(--hueso);
  transition:width .35s var(--e-out),height .35s var(--e-out),margin .35s var(--e-out),background .35s,opacity .3s;
}
.cursor-pt{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--hueso)}
html.cursor-vivo .cursor,html.cursor-vivo .cursor-pt{opacity:1}
html.cursor-vivo,html.cursor-vivo *{cursor:none !important}
.cursor.agrandado{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--hueso)}
.cursor__txt{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:var(--void);
  opacity:0;transition:opacity .25s;text-transform:uppercase;
}
.cursor.agrandado .cursor__txt{opacity:1}
@media (hover:none),(pointer:coarse){.cursor,.cursor-pt{display:none}}

/* ─────────── preloader ─────────── */
.pisada{
  position:fixed;inset:0;z-index:9800;background:var(--void);
  display:grid;place-items:center;
}
.pisada__n{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(5rem,22vw,20rem);line-height:.8;letter-spacing:-.05em;
  color:var(--hueso);font-variant-numeric:tabular-nums;
}
.pisada__pie{
  position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(20px,4vw,42px);
  display:flex;justify-content:space-between;gap:1rem;
}
.pisada__barra{position:absolute;left:0;right:0;bottom:0;height:2px;background:#1E1E25}
.pisada__barra i{display:block;height:100%;width:0;background:var(--fuego)}
.pisada.fuera{animation:izar 1s var(--e-io) forwards}
@keyframes izar{to{transform:translateY(-101%)}}

/* ─────────── transición entre páginas ─────────── */
.telon{
  position:fixed;inset:0;z-index:9700;background:var(--fuego);
  transform:translateY(100%);pointer-events:none;
  display:grid;place-items:center;
}
.telon__marca{
  font-family:var(--disp);font-weight:800;font-size:clamp(3rem,10vw,8rem);
  letter-spacing:-.05em;color:var(--void);opacity:0;
}
.telon.entra{animation:telon-in .62s var(--e-io) forwards}
.telon.sale{animation:telon-out .72s var(--e-io) forwards}
@keyframes telon-in{
  0%{transform:translateY(100%)}
  100%{transform:translateY(0)}
}
@keyframes telon-out{
  0%{transform:translateY(0)}
  100%{transform:translateY(-100%)}
}
.telon.entra .telon__marca,.telon.sale .telon__marca{animation:marca-fade .62s var(--e-out) forwards}
@keyframes marca-fade{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1)}100%{opacity:1}}

/* ─────────── primitivas de animación ─────────── */
.linea{display:block;overflow:hidden}
.linea>span{display:block;will-change:transform}
[data-partir] .pal{display:inline-block;overflow:hidden;vertical-align:top}
[data-partir] .pal>i{display:inline-block;font-style:inherit;transform:translateY(105%);will-change:transform}
[data-partir].vivo .pal>i{
  transform:translateY(0);
  transition:transform .95s var(--e-out);
  transition-delay:calc(var(--i) * 45ms);
}

[data-sube]{opacity:0;transform:translateY(26px);will-change:transform,opacity}
[data-sube].vivo{opacity:1;transform:none;transition:opacity 1s var(--e-out),transform 1s var(--e-out);transition-delay:var(--d,0ms)}

/* cortina: nunca clip-path sobre el nodo observado — anula la intersección */
[data-escala]{position:relative;overflow:hidden}
[data-escala]::after{
  content:"";position:absolute;inset:0;z-index:3;background:var(--void);
  transform-origin:bottom;transition:transform 1.15s var(--e-io);
}
[data-escala].vivo::after{transform:scaleY(0)}
[data-escala]>img{transform:scale(1.14);transition:transform 1.6s var(--e-out)}
[data-escala].vivo>img{transform:scale(1)}

[data-raya]{transform:scaleX(0);transform-origin:left;will-change:transform}
[data-raya].vivo{transform:scaleX(1);transition:transform 1.1s var(--e-io)}

@media (prefers-reduced-motion:reduce){
  [data-partir] .pal>i,[data-sube],[data-escala]>img,[data-raya]{
    transform:none !important;opacity:1 !important;transition:none !important;
  }
  [data-escala]::after{display:none}
  .pisada{display:none}
  .telon{display:none}
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:-999px;top:0;z-index:9900;background:var(--acido);color:var(--void);padding:1em 1.4em;font-family:var(--mono);font-size:.75rem}
.saltar:focus{left:0}
