/* ========== Alioworks · Kinética Editorial ========== */
:root{
  --paper:#F1EDE4;
  --ink:#121212;
  --red:#E8402A;
  --blue:#1B4DFF;
  --grey:#6E6A62;
  --hair:rgba(18,18,18,.16);
  --e:cubic-bezier(.16,1,.3,1);
  --pad:clamp(18px,4.4vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden;height:100vh}
a{color:inherit;text-decoration:none}
h1,h2,h3,.type,.cta__big,.bar__logo{font-family:'Anton',Impact,sans-serif;font-weight:400;line-height:.88;text-transform:uppercase;letter-spacing:-.01em}
::selection{background:var(--red);color:var(--paper)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Cortina de entrada ---------- */
.curtain{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;align-items:center;justify-content:center;gap:.06em;overflow:hidden}
.curtain__word{font-family:'Anton',sans-serif;font-size:clamp(48px,14vw,190px);color:var(--paper);line-height:1;transform:translateY(105%);animation:cWord .85s .12s var(--e) forwards}
.curtain__word--b{color:var(--red);animation-delay:.24s}
@keyframes cWord{to{transform:translateY(0)}}
.curtain.is-out{transform:translateY(-100%);transition:transform 1s cubic-bezier(.76,0,.24,1)}

/* ---------- Barra superior ---------- */
.rail{position:fixed;top:0;left:0;right:0;height:4px;background:transparent;z-index:70}
.rail span{display:block;height:100%;width:0;background:var(--red)}
.bar{
  position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);mix-blend-mode:difference;color:var(--paper);
}
.bar.is-solid{mix-blend-mode:normal;color:var(--ink);background:var(--paper);border-bottom:2px solid var(--ink);padding-top:12px;padding-bottom:12px}
.bar__logo{font-size:22px;letter-spacing:.02em}
.bar__logo sup{font-size:9px;vertical-align:super;font-family:'DM Sans',sans-serif}
.bar__nav{display:flex;gap:22px;font-size:13.5px;font-weight:500}
.bar__nav a{position:relative;padding-bottom:2px}
.bar__nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:currentColor;transition:width .35s var(--e)}
.bar__nav a:hover::after{width:100%}
.bar__hot{color:var(--red)}
.bar.is-solid .bar__hot{color:var(--red)}
@media (max-width:700px){.bar__nav a:not(.bar__hot){display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;padding:clamp(96px,16vh,150px) var(--pad) 40px;display:flex;flex-direction:column;justify-content:center}
.hero__stack{position:relative}
.hero__layer--ink{
  position:absolute;inset:0;background:var(--ink);color:var(--paper);
  clip-path:circle(0px at 50% 50%);transition:clip-path .22s linear;
}
.hero__layer--ink .type__red{color:var(--paper)}
.hero__layer--ink .type span{background:var(--ink)}
.type{display:flex;flex-direction:column}
.type span{
  display:block;font-size:clamp(40px,12.4vw,168px);line-height:.85;
  clip-path:inset(100% 0 0 0);transform:translateY(16%);animation:up 1.05s var(--e) forwards;
}
.type span:nth-child(1){animation-delay:1.05s}
.type span:nth-child(2){animation-delay:1.15s}
.type span:nth-child(3){animation-delay:1.25s}
.type span:nth-child(4){animation-delay:1.35s}
.type__red{color:var(--red)}
@keyframes up{to{clip-path:inset(0 0 0 0);transform:translateY(0)}}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,56px);align-items:flex-end;justify-content:space-between;
  margin-top:clamp(30px,5vh,60px);padding-top:22px;border-top:2px solid var(--ink);
  opacity:0;animation:fade .9s 1.6s forwards;
}
@keyframes fade{to{opacity:1}}
.hero__meta p{max-width:46ch;font-size:clamp(14.5px,1.5vw,17px);color:#33312D}
.hero__btns{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  border:2px solid var(--ink);border-radius:999px;padding:11px 24px;font-size:14px;font-weight:700;
  background-image:linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;
  background-position:0 100%;background-size:100% 0;
  transition:background-size .45s var(--e),color .35s var(--e),border-color .35s;
}
.pill:hover{background-size:100% 100%;color:var(--paper)}
.pill--fill{background-color:var(--red);border-color:var(--red);color:var(--paper)}
.pill--fill:hover{border-color:var(--ink)}
.hero__hint{position:absolute;right:var(--pad);bottom:22px;font-size:11px;letter-spacing:.2em;color:var(--grey);opacity:0;animation:fade 1s 2.1s forwards}
@media (max-width:760px){.hero__hint{display:none}}

/* ---------- Marquesinas ---------- */
.marquee{overflow:hidden;border-block:2px solid var(--ink);padding:12px 0;white-space:nowrap}
.marquee--red{background:var(--red);color:var(--paper);border-color:var(--ink)}
.marquee--ink{background:var(--ink);color:var(--paper);margin:clamp(28px,5vh,54px) 0}
.marquee__track{display:inline-flex;align-items:center;gap:26px;font-family:'Anton',sans-serif;font-size:clamp(20px,3.6vw,42px);animation:slide 26s linear infinite}
.marquee__track--rev{animation-direction:reverse;animation-duration:34s}
.marquee__track b{font-size:.5em;opacity:.75}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-33.34%)}}

/* ---------- Cifras ---------- */
.facts{padding:clamp(46px,8vh,90px) var(--pad);border-bottom:2px solid var(--ink)}
.facts ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.facts li{border-left:2px solid var(--ink);padding:6px 0 6px 18px}
.facts li:first-child{border-left:0;padding-left:0}
.facts b{display:block;font-family:'Anton',sans-serif;font-size:clamp(34px,6.6vw,84px);line-height:1}
.facts li:nth-child(2) b{color:var(--red)}
.facts li:nth-child(3) b{color:var(--blue)}
.facts span{font-size:12.5px;color:var(--grey)}
.facts__note{margin-top:26px;font-size:12px;letter-spacing:.18em;color:var(--grey)}
@media (max-width:720px){.facts ul{grid-template-columns:repeat(2,1fr);gap:22px}.facts li:nth-child(3){border-left:0;padding-left:0}}

/* ---------- Scroll horizontal ---------- */
.hscroll{position:relative;height:420vh}
.hscroll__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;background:var(--paper)}
.hscroll__track{display:flex;height:76%;will-change:transform}
.slide{
  flex:0 0 min(78vw,560px);border-right:2px solid var(--ink);padding:clamp(24px,3.4vw,46px);
  display:flex;flex-direction:column;justify-content:flex-end;background:var(--paper);
}
.slide:first-child{border-left:2px solid var(--ink)}
.slide--alt{background:var(--ink);color:var(--paper)}
.slide--last{background:var(--blue);color:var(--paper);border-right:0}
.slide--intro{background:var(--red);color:var(--paper);justify-content:center}
.slide h3{font-size:clamp(28px,4.2vw,54px);margin-bottom:16px}
.slide__h{font-size:clamp(30px,4.6vw,62px);margin-bottom:18px}
.slide p{font-size:15px;max-width:38ch;opacity:.92}
.slide__scroll{margin-top:22px;font-size:12px;letter-spacing:.22em;opacity:.8}
.hscroll.no-h{height:auto}
.hscroll.no-h .hscroll__stage{position:static;height:auto;padding:60px 0}
.hscroll.no-h .hscroll__track{flex-direction:column;height:auto;transform:none !important}
.hscroll.no-h .slide{flex:1 1 auto;border:2px solid var(--ink);border-top:0;min-height:52vh}
.hscroll.no-h .slide:first-child{border-top:2px solid var(--ink)}

/* ---------- Encabezados de sección ---------- */
.head{font-size:clamp(30px,5.6vw,72px);max-width:16ch}
.head__sub{margin-top:18px;max-width:52ch;color:var(--grey);font-size:clamp(14.5px,1.5vw,17px)}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--e),transform .9s var(--e)}
.reveal.in{opacity:1;transform:none}

/* ---------- Proceso ---------- */
.proc{padding:clamp(70px,12vh,140px) var(--pad)}
.proc__list{list-style:none;margin-top:clamp(40px,7vh,72px);border-top:2px solid var(--ink)}
.proc__list li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,4vw,52px);padding:clamp(22px,3.4vw,40px) 0;border-bottom:2px solid var(--ink);position:relative;transition:background .4s var(--e),padding-left .4s var(--e)}
.proc__list li:hover{background:var(--ink);color:var(--paper);padding-left:clamp(12px,2vw,28px)}
.proc__list li:hover h3{color:var(--red)}
.proc__list span{font-family:'Anton',sans-serif;font-size:clamp(30px,5vw,64px);line-height:.9;color:var(--red);min-width:1.4ch}
.proc__list h3{font-size:clamp(20px,2.8vw,34px);transition:color .4s}
.proc__list p{margin-top:8px;max-width:56ch;font-size:15px}

/* ---------- Trabajo ---------- */
.work{padding:clamp(70px,12vh,140px) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;background:var(--ink);color:var(--paper)}
.work__kick{font-size:11.5px;letter-spacing:.24em;color:var(--red);margin-bottom:16px}
.work h2{font-size:clamp(28px,4.4vw,56px)}
.work__lead{margin-top:18px;max-width:46ch;color:#C9C4B8;font-size:15.5px}
.work__ul{list-style:none;margin:26px 0;display:grid;gap:9px}
.work__ul li{padding-left:22px;position:relative;font-size:15px}
.work__ul li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--red)}
.work__tags{font-size:12px;letter-spacing:.1em;color:#9A958A}
.mock{background:var(--paper);color:var(--ink);border:2px solid var(--paper)}
.mock__top{padding:10px 14px;border-bottom:2px solid var(--ink);font-size:11.5px;letter-spacing:.1em;background:var(--red);color:var(--paper)}
.mock__table{width:100%;border-collapse:collapse;font-size:13.5px}
.mock__table th{text-align:left;font-weight:700;font-size:11px;letter-spacing:.14em;padding:11px 14px;border-bottom:2px solid var(--ink);color:var(--grey)}
.mock__table td{padding:13px 14px;border-bottom:1px solid var(--hair)}
.mock__table tr:last-child td{border-bottom:0}
.st{font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border:1.5px solid currentColor;border-radius:999px}
.st--on{color:#127A45}.st--go{color:var(--blue)}.st--wait{color:var(--red)}
.mock u{display:block;height:8px;background:var(--hair);text-decoration:none}
.mock u::after{content:"";display:block;height:100%;width:0;background:var(--ink)}
.mock.in u::after{width:var(--w);transition:width 1.3s var(--e)}
@media (max-width:880px){.work{grid-template-columns:1fr}}

/* ---------- Stack ---------- */
.stack{padding:clamp(70px,12vh,140px) var(--pad) 0}
.stack__grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.stack__grid li{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:clamp(18px,2.6vw,30px);transition:background .35s,color .35s}
.stack__grid li:hover{background:var(--blue);color:var(--paper)}
.stack__grid b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(16px,2vw,24px);text-transform:uppercase}
.stack__grid span{font-size:12px;color:var(--grey)}
.stack__grid li:hover span{color:rgba(255,255,255,.75)}
@media (max-width:820px){.stack__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- CTA ---------- */
.cta{padding:clamp(80px,14vh,170px) var(--pad)}
.cta__big{font-size:clamp(44px,10.5vw,150px);line-height:.86}
.cta__lead{margin-top:24px;max-width:50ch;color:var(--grey)}
.cta__links{list-style:none;margin-top:clamp(38px,6vh,64px);border-top:2px solid var(--ink)}
.cta__links li{border-bottom:2px solid var(--ink)}
.cta__links a,.cta__static{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;padding:clamp(16px,2.4vw,26px) 0;position:relative;transition:padding-left .4s var(--e),color .4s}
.cta__links a:hover{padding-left:18px;color:var(--red)}
.cta__links span{font-size:11.5px;letter-spacing:.22em;color:var(--grey);min-width:110px}
.cta__links b{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(20px,3.4vw,42px);text-transform:uppercase;word-break:break-word}
.cta__static{opacity:.65}

/* ---------- Pie ---------- */
.foot{border-top:2px solid var(--ink);padding:32px var(--pad);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--grey)}
.foot div{font-family:'Anton',sans-serif;font-size:22px;color:var(--ink);letter-spacing:.06em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .type span{transform:none;clip-path:none}
  .hero__meta,.hero__hint{opacity:1}
  .reveal{opacity:1;transform:none}
  .curtain{display:none}
}


/* Navegación transversal entre áreas */
.lx-sites{max-width:1180px;margin:0 auto;padding:72px 24px 24px;text-align:center}
.lx-sites h2{font:inherit;font-size:clamp(24px,3vw,38px);font-weight:700;margin:0 0 10px}
.lx-sites p{max-width:720px;margin:0 auto 22px;opacity:.72;line-height:1.6}
.lx-sites__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lx-sites__links a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 15px;border:1px solid currentColor;border-radius:999px;text-decoration:none;opacity:.72;transition:transform .2s ease,opacity .2s ease,background .2s ease}
.lx-sites__links a:hover,.lx-sites__links a[aria-current="page"]{opacity:1;transform:translateY(-2px)}
.lx-sites__links a[aria-current="page"]{font-weight:700}
@media(max-width:620px){.lx-sites{padding:52px 18px 10px}.lx-sites__links{gap:8px}.lx-sites__links a{font-size:13px;padding:8px 12px}}