/* ============================================================
   SORA — SISTEMA BRUTALISTA
   Tokens, reset y primitivos compartidos por todo el sitio.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root{
  /* Paleta extraída del isotipo */
  --ink:      #111111;
  --ink-soft: #2a2a2a;
  --paper:    #f2f0eb;
  --white:    #ffffff;
  --cyan:     #37d5f2;
  --yellow:   #ffe500;
  --magenta:  #ff29ce;
  --orange:   #ff5c00;

  /* Brutalismo: bordes gruesos, sombras duras, cero difuminado */
  --bw: 4px;
  --bd: var(--bw) solid var(--ink);
  --sh:     8px 8px 0 var(--ink);
  --sh-sm:  4px 4px 0 var(--ink);
  --sh-lg: 14px 14px 0 var(--ink);

  --f-display: 'Archivo Black', 'Arial Black', sans-serif;
  --f-body:    'Space Grotesk', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --nav-h: 74px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.5;
  /* Retícula de fondo, marca de la casa */
  background-image:
    linear-gradient(rgba(17,17,17,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.055) 1px, transparent 1px);
  background-size:56px 56px;
}

img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,textarea,select{ font:inherit; color:inherit }
::selection{ background:var(--magenta); color:var(--white) }

/* Grano de película sobre todo el documento */
body::after{
  content:''; position:fixed; inset:-50%; z-index:9998; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,4%)}
  40%{transform:translate(4%,-2%)} 60%{transform:translate(-2%,-4%)} 80%{transform:translate(3%,3%)}
}

/* ---------- Tipografía ---------- */
.display{
  font-family:var(--f-display); text-transform:uppercase;
  line-height:.84; letter-spacing:-.03em;
}
h1.display{ font-size:clamp(2.3rem, 7.5vw, 8.6rem) }
h2.display{ font-size:clamp(2.2rem, 6.4vw, 5.6rem) }
h3.display{ font-size:clamp(1.3rem, 2.4vw, 2rem); line-height:.95 }

.mono{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase }
.outline-text{ -webkit-text-stroke:2px var(--ink); color:transparent }

/* ---------- Layout ---------- */
.wrap{ width:min(1400px, 92vw); margin-inline:auto }
.section{ padding:clamp(72px,10vw,140px) 0; position:relative }
.rule{ height:var(--bw); background:var(--ink); border:0 }

.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:48px;
  border-bottom:var(--bd); padding-bottom:20px;
}
.sec-head .mono{ background:var(--ink); color:var(--paper); padding:7px 13px }

/* ---------- Botones ---------- */
.btn{
  --bg:var(--yellow);
  display:inline-flex; align-items:center; gap:12px;
  background:var(--bg); border:var(--bd); box-shadow:var(--sh);
  padding:16px 28px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; cursor:pointer; position:relative;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s;
}
.btn:hover{ transform:translate(4px,4px); box-shadow:var(--sh-sm) }
.btn:active{ transform:translate(8px,8px); box-shadow:0 0 0 var(--ink) }
.btn--cyan{ --bg:var(--cyan) }
.btn--magenta{ --bg:var(--magenta); color:var(--white) }
.btn--orange{ --bg:var(--orange); color:var(--white) }
.btn--ink{ --bg:var(--ink); color:var(--paper) }
.btn--ghost{ --bg:transparent; box-shadow:none }
.btn--ghost:hover{ --bg:var(--ink); color:var(--paper); transform:none }
.btn .arrow{ transition:transform .2s var(--ease) }
.btn:hover .arrow{ transform:translateX(5px) }

/* ---------- Tarjeta base ---------- */
.card{
  background:var(--white); border:var(--bd); box-shadow:var(--sh);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.card:hover{ transform:translate(-4px,-4px); box-shadow:var(--sh-lg) }

/* ---------- Etiqueta / chip ---------- */
.tag{
  display:inline-block; border:3px solid var(--ink); background:var(--white);
  padding:5px 11px; font-family:var(--f-mono); font-size:.65rem;
  letter-spacing:.13em; text-transform:uppercase; font-weight:700;
}

/* ---------- Marquesina ---------- */
.marquee{
  border-block:var(--bd); background:var(--ink); color:var(--paper);
  overflow:hidden; white-space:nowrap; display:flex; user-select:none;
}
.marquee__track{
  display:flex; flex-shrink:0; gap:34px; padding:13px 17px;
  animation:slide var(--dur,26s) linear infinite;
  font-family:var(--f-display); text-transform:uppercase; font-size:1.05rem; letter-spacing:.02em;
}
.marquee--rev .marquee__track{ animation-direction:reverse }
.marquee:hover .marquee__track{ animation-play-state:paused }
.marquee__track span{ display:flex; align-items:center; gap:34px; flex-shrink:0 }
.marquee__track b{ color:var(--yellow); font-weight:400 }
@keyframes slide{ to{ transform:translateX(-100%) } }

/* ---------- Cursor personalizado ---------- */
.cursor{
  position:fixed; top:0; left:0; width:22px; height:22px; z-index:9999;
  border:2px solid var(--ink); border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%); mix-blend-mode:difference; background:var(--white);
  transition:width .2s var(--ease), height .2s var(--ease), border-radius .2s;
}
.cursor.is-big{ width:64px; height:64px }
.cursor.is-square{ border-radius:0 }
@media (hover:none){ .cursor{ display:none } }

/* ---------- Reveal al hacer scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(38px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
[data-reveal].in{ opacity:1; transform:none }
[data-reveal="left"]{ transform:translateX(-46px) }
[data-reveal="right"]{ transform:translateX(46px) }
[data-reveal="scale"]{ transform:scale(.9) }

/* ---------- Navegación ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:800; height:var(--nav-h);
  display:flex; align-items:center; background:var(--paper);
  border-bottom:var(--bd); transition:transform .35s var(--ease);
}
.nav.hidden{ transform:translateY(-102%) }
.nav__in{ width:min(1400px,92vw); margin-inline:auto; display:flex; align-items:center; gap:20px }
.nav__logo{ display:flex; align-items:center; gap:11px; margin-right:auto; font-family:var(--f-display); font-size:1.35rem; text-transform:uppercase; letter-spacing:-.02em }
.nav__logo svg,.nav__logo img{ width:38px; height:38px; flex-shrink:0 }
.nav__links{ display:flex; gap:4px }
.nav__links a{
  padding:9px 15px; font-weight:700; font-size:.85rem; text-transform:uppercase;
  border:3px solid transparent; letter-spacing:.03em; transition:.15s;
}
.nav__links a:hover,.nav__links a[aria-current]{ border-color:var(--ink); background:var(--yellow) }
.nav__burger{ display:none; width:46px; height:46px; border:var(--bd); background:var(--white); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px }
.nav__burger i{ display:block; width:20px; height:3px; background:var(--ink); transition:.2s }
.nav__burger.on i:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.nav__burger.on i:nth-child(2){ opacity:0 }
.nav__burger.on i:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

@media (max-width:900px){
  .nav__burger{ display:flex }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:var(--bd); padding:14px;
    transform:translateY(-140%); transition:transform .35s var(--ease);
  }
  .nav__links.open{ transform:none }
  .nav__links a{ padding:15px; font-size:1.05rem; border-bottom:3px solid var(--ink) }
  .nav .btn{ display:none }
}

/* ---------- Pie de página ---------- */
.footer{ background:var(--ink); color:var(--paper); border-top:var(--bw) solid var(--ink); overflow:hidden }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; padding:64px 0 44px }
.footer h4{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:16px }
.footer a{ display:block; padding:5px 0; opacity:.82; transition:.15s }
.footer a:hover{ opacity:1; color:var(--yellow); transform:translateX(6px) }
.footer__mega{
  font-family:var(--f-display); font-size:clamp(3.4rem,17.5vw,17rem); line-height:.75;
  text-transform:uppercase; letter-spacing:-.04em; -webkit-text-stroke:2px var(--paper);
  color:transparent; padding-bottom:16px; white-space:nowrap;
}
.footer__legal{ border-top:2px solid #333; padding:20px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--f-mono); font-size:.68rem; opacity:.6 }
@media (max-width:820px){ .footer__grid{ grid-template-columns:1fr 1fr } }

/* ---------- Telón de carga ---------- */
.curtain{
  position:fixed; inset:0; z-index:9997; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:transform .8s var(--ease); transform-origin:top;
}
.curtain.up{ transform:scaleY(0) }
.curtain svg,.curtain img{ width:96px; height:96px; animation:pop .9s var(--ease) infinite alternate }
@keyframes pop{ from{ transform:scale(.86) rotate(-5deg) } to{ transform:scale(1.06) rotate(5deg) } }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  [data-reveal]{ opacity:1 !important; transform:none !important }
  html{ scroll-behavior:auto }
}