/* ═══════════════════════════════════════════════
   SINEXTASIS® — ESTILOS
   Lado izquierdo: el ojo (caos artístico puro).
   Lado derecho: editorial atemporal, aire, serif.
   ═══════════════════════════════════════════════ */

:root{
  --bg:      #0a0a0c;
  --ink:     #f2f1ec;
  --dim:     #8a8a94;
  --line:    rgba(242,241,236,.10);
  --accent:  #e8a33d;
  --font-d:  'Fraunces', serif;
  --font-t:  'Space Grotesk', sans-serif;
  --font-m:  'IBM Plex Mono', monospace;
  --eye-w:   35vw;
}

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

@property --accent{ syntax:'<color>'; inherits:true; initial-value:#e8a33d; }
body{ transition:--accent 1.4s ease; }
body.state-0{ --accent:#e8a33d; }
body.state-1{ --accent:#3ded7f; }
body.state-2{ --accent:#c24dff; }

html{ scroll-behavior:auto; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-t);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--accent); color:#000; }

@media (pointer:fine){
  body, a, button{ cursor:none; }
}

/* ─────────────────────────────────────────────
   LOADER
   ───────────────────────────────────────────── */
#loader{
  position:fixed; inset:0; z-index:100;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.loader-meta{
  position:fixed;
  right:3rem; top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column;
  align-items:flex-start;
  gap:.9rem;
  pointer-events:none;
  z-index:101;
}
.lm-brand{
  font-family:var(--font-d); font-weight:400;
  font-size:.85rem; letter-spacing:.35em;
}
.lm-brand sup{ font-size:.5em; }
.lm-pct{
  font-family:var(--font-m); font-weight:500;
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.lm-label{
  font-family:var(--font-m); font-size:.58rem;
  letter-spacing:.4em; color:var(--dim);
  animation:blink-label 1.2s steps(2) infinite;
}
@keyframes blink-label{ 50%{ opacity:.25; } }
.loader-corner{
  position:absolute;
  font-family:var(--font-m); font-size:.55rem;
  letter-spacing:.3em; color:var(--dim);
}
.lc-tl{ top:2rem; left:2rem; }
.lc-br{ bottom:2rem; right:2rem; }

/* ─────────────────────────────────────────────
   EL OJO
   ───────────────────────────────────────────── */
#eye-stage{
  position:fixed; z-index:105;
  left:0; top:0;
  width:var(--eye-w); height:100vh;
  transform: translateX(calc(50vw - var(--eye-w)/2));  /* centrado inicial */
  transition: none;
}
#eye-stage.docked{
  transform: translateX(0);  /* posición final: dock izquierdo */
}
#eye{ display:block; width:100%; height:100%; }

#eye-dock{
  position:fixed; z-index:1;
  left:0; top:0;
  width:var(--eye-w); height:100vh;
  visibility:hidden; pointer-events:none;
}

#eye-error{
  position:absolute; inset:1rem; z-index:5;
  background:rgba(10,10,12,.92);
  border:1px solid var(--accent);
  padding:1.2rem; overflow:auto;
  font-family:var(--font-m); font-size:.7rem; color:var(--ink);
}
#eye-error p{ color:var(--accent); margin-bottom:.6rem; }

/* ─────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────── */
#site-header{
  position:fixed; z-index:50;
  top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:2.4rem 2.8rem;
  opacity:0;
}
.logo{
  font-family:var(--font-d); font-weight:400;
  font-size:.8rem; letter-spacing:.25em;
  color:var(--ink); text-decoration:none;
  mix-blend-mode:difference;
}
.logo sup{ font-size:.5em; }

.tabs{
  display:flex; gap:2.4rem;
  padding-left:var(--eye-w);
  justify-content:flex-end;
}
.tab{
  display:flex; align-items:baseline; gap:.4rem;
  background:none; border:none;
  font-family:var(--font-m); color:var(--dim);
  font-size:.62rem; letter-spacing:.18em;
  padding:.3rem 0 .5rem;
  position:relative;
  transition:color .5s;
}
.tab i{ font-style:normal; font-size:.55rem; opacity:.45; }
.tab span{ text-transform:capitalize; }
.tab::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.7,0,.2,1);
}
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--ink); }
.tab.active::after{ transform:scaleX(1); }

/* ─────────────────────────────────────────────
   CONTENIDO — editorial atemporal
   ───────────────────────────────────────────── */
.content{
  position:relative; z-index:3;
  margin-left:var(--eye-w);
  opacity:0;
}

.module{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:14vh 4rem 12vh 4rem;
  border-bottom:1px solid var(--line);
}
.module:last-child{ border-bottom:none; }

/* header de módulo */
.brand-title{
  font-family:var(--font-d); font-weight:300;
  font-size:clamp(2.8rem,5.5vw,5rem);
  letter-spacing:.12em;
  color:var(--ink);
  margin-bottom:3.5rem;
  opacity:.9;
}
.brand-title sup{ font-size:.4em; vertical-align:super; }

.mod-top{
  display:flex; align-items:baseline; gap:1.8rem;
  margin-bottom:3.2rem;
}
.mod-num{
  font-family:var(--font-d); font-weight:300;
  font-size:clamp(3.5rem,6vw,5.5rem);
  line-height:1; color:var(--ink); opacity:.12;
  letter-spacing:-.02em;
}
.mod-cat{
  font-family:var(--font-m); font-size:.58rem;
  letter-spacing:.35em; color:var(--dim);
  text-transform:uppercase;
}

/* título */
.mod-title{
  font-family:var(--font-d); font-weight:300;
  font-size:clamp(2.4rem,4.8vw,4.4rem);
  line-height:1.08; letter-spacing:-.02em;
  margin-bottom:2.6rem;
  max-width:14em;
}
.mod-title em{
  font-style:italic; font-weight:400;
  color:var(--accent);
}

/* lead */
.lead{
  font-family:var(--font-t); font-weight:300;
  font-size:clamp(.95rem,1.15vw,1.12rem);
  line-height:1.72; max-width:42em;
  color:rgba(242,241,236,.72);
  margin-bottom:3.4rem;
}

/* specs — tabla minimalista */
.specs{
  list-style:none;
  border-top:1px solid var(--line);
  max-width:none;
}
.specs li{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:2.4rem;
  padding:1rem .1rem;
  border-bottom:1px solid var(--line);
}
.spec-key{
  font-family:var(--font-m); font-weight:500;
  font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap; color:var(--dim);
}
.spec-val{
  font-family:var(--font-t); font-weight:400;
  font-size:.88rem; color:var(--ink);
  text-align:right;
}

/* CTA */
.mod-cta{ margin-top:5rem; }
.cta-label{
  font-family:var(--font-m); font-size:.55rem;
  letter-spacing:.4em; color:var(--dim);
  text-transform:uppercase;
  margin-bottom:1.2rem;
}
.cta{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:var(--font-d); font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2.2rem);
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:.3rem;
  transition:color .4s, border-color .4s;
}
.cta-arrow{ transition:transform .4s cubic-bezier(.7,0,.2,1); }
.cta:hover{ color:var(--accent); }
.cta:hover .cta-arrow{ transform:translateX(.5rem); }

/* colophon */
.colophon{
  position:fixed; z-index:4;
  bottom:2rem; left:var(--eye-w);
  margin-left:3.5rem;
  font-family:var(--font-m); font-size:.52rem;
  letter-spacing:.3em; color:var(--dim);
  opacity:0; transition:opacity .8s;
}

/* ─────────────────────────────────────────────
   REVEAL
   ───────────────────────────────────────────── */
.rv{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),
             transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.rv.in{ opacity:1; transform:translateY(0); }

/* ─────────────────────────────────────────────
   SCROLL HINT
   ───────────────────────────────────────────── */
.scroll-hint{
  position:fixed; z-index:40;
  right:2.8rem; bottom:2rem;
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-m); font-size:.52rem;
  letter-spacing:.35em; color:var(--dim);
  text-transform:uppercase;
  opacity:0; transition:opacity .6s;
}
.scroll-hint i{
  display:block; width:1px; height:2.4rem;
  background:var(--accent);
  animation:hint-drop 1.6s cubic-bezier(.7,0,.2,1) infinite;
  transform-origin:top;
}
@keyframes hint-drop{
  0%{ transform:scaleY(0); } 45%{ transform:scaleY(1); }
  100%{ transform:scaleY(1); opacity:0; }
}

/* ─────────────────────────────────────────────
   CURSOR
   ───────────────────────────────────────────── */
#cursor{ display:none; }
@media (pointer:fine){
  #cursor{ display:block; position:fixed; z-index:200; pointer-events:none; }
  .cursor-dot{
    position:fixed; width:5px; height:5px;
    background:var(--accent); border-radius:50%;
    transform:translate(-50%,-50%);
  }
  .cursor-ring{
    position:fixed; width:32px; height:32px;
    border:1px solid var(--ink); border-radius:50%;
    transform:translate(-50%,-50%);
    opacity:.30;
    transition:width .3s, height .3s, opacity .3s, border-color .3s;
  }
  #cursor.hovering .cursor-ring{
    width:52px; height:52px;
    border-color:var(--accent); opacity:.8;
  }
}

/* ─────────────────────────────────────────────
   GRANO
   ───────────────────────────────────────────── */
.grain{
  position:fixed; z-index:90;
  inset:-100%; width:300%; height:300%;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='300' height='300' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:.04; pointer-events:none;
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  12%{ transform:translate(-3%,2%); }  25%{ transform:translate(2%,-4%); }
  37%{ transform:translate(-4%,-2%); } 50%{ transform:translate(3%,3%); }
  62%{ transform:translate(-2%,4%); }  75%{ transform:translate(4%,-3%); }
  87%{ transform:translate(-3%,-3%); }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — MOBILE
   ───────────────────────────────────────────── */
@media (max-width:900px){
  :root{ --eye-w:100vw; }

  /* Ojo: fijo como fondo, centrado en pantalla */
  #eye-stage{
    position:fixed !important;
    left:0; top:0;
    width:100vw; height:100vh;
    transform:none !important;
    z-index:1;
  }
  #eye-stage.docked{ transform:none !important; }
  #eye-dock{ display:none; }

  /* Header: compacto */
  #site-header{
    padding:1.2rem 1.4rem;
    background:linear-gradient(to bottom, rgba(10,10,12,0.85) 0%, transparent 100%);
  }
  .tabs{ padding-left:0; gap:1.3rem; }
  .tab span{ display:none; }
  .tab i{ font-size:.72rem; }

  /* Contenido: sobre el ojo */
  .content{
    position:relative;
    margin-left:0;
    margin-top:0;
    z-index:10;
    padding-top:92vh; /* primer screen = logo + ojo visible */
  }

  /* Módulos: fondo semi-opaco para legibilidad */
  .module{
    min-height:auto;
    padding:6vh 1.6rem 8vh;
    margin-top:58vh; /* espacio vacío entre secciones = ojo visible + transición */
    background:rgba(10, 10, 12, 0.88);
    border-radius:1.2rem 1.2rem 0 0;
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .module:first-child{
    margin-top:0; /* el primero no necesita spacer extra (ya tiene padding-top del content) */
    border-radius:1.2rem 1.2rem 0 0;
  }

  .mod-num{ font-size:2.8rem; }
  .mod-title{ font-size:clamp(1.8rem,6vw,2.6rem); }
  .lead{ font-size:.9rem; }
  .specs li{ flex-direction:column; gap:.3rem; align-items:flex-start; }
  .spec-val{ text-align:left; }

  /* Scroll hint / colofón */
  .scroll-hint{ display:none; }
  .colophon{
    position:relative;
    left:auto; bottom:auto;
    margin:0; padding:3rem 1.6rem;
    text-align:center;
    background:rgba(10,10,12,0.88);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }

  /* Brand title — se ve como logo en la primera sección */
  .brand-title{ font-size:clamp(1.8rem,7vw,2.6rem); letter-spacing:.08em; }

  /* Loader: mover debajo del ojo para no solapar */
  .loader-meta{
    right:auto; left:50%; top:auto;
    bottom:7vh;
    transform:translateX(-50%) scale(0.85);
    align-items:center;
    text-align:center;
  }
  .lm-pct{ font-size:clamp(1.8rem,4vw,2.4rem); }
  .loader-corner.lc-tl{ top:1.2rem; left:1.2rem; }
  .loader-corner.lc-br{ bottom:1.2rem; right:1.2rem; }
}

/* ─────────────────────────────────────────────
   MOVIMIENTO REDUCIDO
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .grain, .lm-label, .scroll-hint i{ animation:none; }
  .rv{ transition:none; opacity:1; transform:none; }
}

/* ─────────────────────────────────────────────
   ULTRAWIDE (>1600px)
   ───────────────────────────────────────────── */
@media (min-width:1600px){
  :root{ --eye-w:50vw; }
}