*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f2f0eb;
  --ink:#111;
  --red:#e63312;
  --blue:#1a2fff;
  --yellow:#f5e642;
}
html,body{width:100%;min-height:100vh;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Mono',monospace;
  cursor:none;
}

/* cursor */
#c{position:fixed;z-index:9999;pointer-events:none;mix-blend-mode:difference;
  width:20px;height:20px;background:#fff;border-radius:50%;
  transform:translate(-50%,-50%);transition:width .2s,height .2s}
body:has(a:hover) #c{width:60px;height:60px}

/* ── INTRO SCREEN ── */
#intro{
  position:fixed;inset:0;z-index:500;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s;
}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
#intro-text{
  font-family:'Unbounded',sans-serif;
  font-weight:900;
  font-size:clamp(48px,10vw,120px);
  color:#fff;
  letter-spacing:-0.04em;
  text-align:center;
  line-height:0.9;
  overflow:hidden;
}
#intro-text span{
  display:inline-block;
  animation:introSlam .05s ease forwards;
  opacity:0;
}
@keyframes introSlam{from{opacity:0;transform:scaleY(3)}to{opacity:1;transform:scaleY(1)}}

/* ── MAIN LAYOUT ── */
.wrap{opacity:0;transition:opacity .5s .2s}
.wrap.show{opacity:1}

/* ── NAV ── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:52px;
  background:var(--ink);
  display:flex;align-items:stretch;
  border-bottom:2px solid var(--ink);
}
.nav-logo{
  display:flex;align-items:center;
  padding:0 1.8rem;
  border-right:2px solid rgba(255,255,255,0.1);
  font-family:'Unbounded',sans-serif;
  font-weight:900;
  font-size:10px;
  letter-spacing:0.04em;
  line-height:1.2;
  color:#fff;
  text-transform:uppercase;
  white-space:nowrap;
}
.nav-logo span{
  display:inline-block;
  background:var(--red);
  color:#fff;
  padding:0 0.25em;
  margin-left:0.3em;
}
.nav-links{
  display:flex;align-items:stretch;
  margin-left:auto;
}
.nav-links a{
  display:flex;align-items:center;
  padding:0 1.6rem;
  border-left:2px solid rgba(255,255,255,0.1);
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:9px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.45);
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:color .25s;
}
.nav-links a::before{
  content:'';
  position:absolute;
  inset:0;
  transform:translateY(101%);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-links a:nth-child(1)::before{background:var(--red)}
.nav-links a:nth-child(2)::before{background:var(--blue)}
.nav-links a:nth-child(3)::before{background:var(--yellow)}
.nav-links a:nth-child(3){color:rgba(255,255,255,0.45)}
.nav-links a span{position:relative;z-index:1}
.nav-links a:hover{color:#fff}
.nav-links a:nth-child(3):hover{color:var(--ink)}
.nav-links a:hover::before{transform:translateY(0)}
@media(max-width:720px){
  .nav-links a{padding:0 1rem;font-size:8px}
}

/* ── PAGE ── */
.page{padding-top:52px;min-height:100vh;display:flex;flex-direction:column}

/* ── HERO SPLIT ── */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  flex:1;
  min-height:calc(100vh - 52px);
}

/* left panel */
.hero-l{
  background:var(--ink);
  color:#fff;
  padding:3rem;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;
  overflow:hidden;
  border-right:2px solid var(--ink);
}

/* big rotating text */
.rot-word{
  position:absolute;
  top:50%;left:50%;
  font-family:'Unbounded',sans-serif;
  font-weight:900;
  font-size:clamp(80px,13vw,160px);
  letter-spacing:-0.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,0.08);
  white-space:nowrap;
  transform:translate(-50%,-50%) rotate(-15deg);
  pointer-events:none;
  user-select:none;
  animation:slowspin 30s linear infinite;
}
@keyframes slowspin{from{transform:translate(-50%,-50%) rotate(-15deg)}to{transform:translate(-50%,-50%) rotate(345deg)}}

.l-eyebrow{font-size:9px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:1.5rem}

.l-title{
  font-family:'Unbounded',sans-serif;
  font-weight:900;
  font-size:clamp(48px,7vw,96px);
  line-height:0.88;
  letter-spacing:-0.04em;
  position:relative;z-index:1;
}
.l-title .t-red{color:var(--red)}
.l-title .t-blue{
  display:inline-block;
  background:var(--blue);
  padding:0 0.1em;
  color:#fff;
}

.l-bottom{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:.6rem;
}
.l-meta{
  display:flex;justify-content:space-between;
  font-size:9px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:.6rem;
}

/* right panel */
.hero-r{
  display:flex;flex-direction:column;
  background:var(--bg);
}

/* ── MEMBERS ── */
.members{flex:1;display:flex;flex-direction:column}

.member{
  flex:1;
  display:flex;align-items:stretch;
  border-bottom:2px solid var(--ink);
  text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  min-height:100px;
  transition:flex .4s cubic-bezier(.16,1,.3,1);
}
.member:last-child{border-bottom:none}
.member:hover{flex:2.2}

.member:nth-child(1) .m-fill{background:var(--red)}
.member:nth-child(2) .m-fill{background:var(--blue)}
.member:nth-child(3) .m-fill{background:var(--yellow)}

.m-fill{
  position:absolute;inset:0;
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  z-index:0;
}
.member:hover .m-fill{transform:translateX(0)}

.member:nth-child(1):hover .m-num,
.member:nth-child(1):hover .m-name,
.member:nth-child(1):hover .m-sub,
.member:nth-child(1):hover .m-arrow{color:#fff}

.member:nth-child(2):hover .m-num,
.member:nth-child(2):hover .m-name,
.member:nth-child(2):hover .m-sub,
.member:nth-child(2):hover .m-arrow{color:#fff}

.member:nth-child(3):hover .m-num,
.member:nth-child(3):hover .m-name,
.member:nth-child(3):hover .m-sub,
.member:nth-child(3):hover .m-arrow{color:var(--ink)}

.m-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;
  width:100%;padding:1.5rem 3rem;
  gap:2rem;
}

.m-num{
  font-family:'Unbounded',sans-serif;font-weight:200;
  font-size:11px;letter-spacing:0.1em;
  color:rgba(17,17,17,.3);
  min-width:2rem;
  transition:color .3s;
}

.m-info{flex:1}
.m-name{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:clamp(18px,2.5vw,30px);
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--ink);
  transition:color .3s;
  margin-bottom:.3rem;
}
.m-sub{
  font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(17,17,17,.35);transition:color .3s;
}

.m-arrow{
  font-size:20px;color:rgba(17,17,17,.2);
  transition:color .3s, transform .35s cubic-bezier(.16,1,.3,1);
}
.member:hover .m-arrow{transform:translate(4px,-4px)}


/* ══════════════════════════════════════
   SECCIÓN PROYECTO
══════════════════════════════════════ */
.proyecto{
  border-top:2px solid var(--ink);
}

/* cabecera */
.proy-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 3rem;
  border-bottom:2px solid var(--ink);
  background:var(--ink);
}
.proy-eyebrow{
  font-size:9px;letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(255,255,255,0.4);
}
.proy-tag{
  font-family:'Unbounded',sans-serif;
  font-size:8px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  background:var(--red);color:#fff;
  padding:.35em .8em;
}

/* split body */
.proy-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:60vh;
}

/* columna izquierda */
.proy-l{
  background:var(--bg);
  padding:3rem;
  display:flex;flex-direction:column;justify-content:space-between;
  border-right:2px solid var(--ink);
  position:relative;
  overflow:hidden;
}

.proy-num{
  font-family:'Unbounded',sans-serif;
  font-weight:200;
  font-size:clamp(80px,12vw,140px);
  line-height:1;
  letter-spacing:-0.05em;
  color:rgba(17,17,17,0.06);
  user-select:none;
  position:absolute;
  top:1rem;right:2rem;
}

.proy-title{
  font-family:'Unbounded',sans-serif;
  font-weight:900;
  font-size:clamp(40px,6vw,80px);
  line-height:0.88;
  letter-spacing:-0.04em;
  position:relative;z-index:1;
  margin-top:auto;
}
.proy-title .t-red{color:var(--red)}
.proy-title .t-blue{
  display:inline-block;
  background:var(--blue);
  padding:0 0.1em;
  color:#fff;
}

.proy-desc{
  font-size:11px;line-height:1.7;
  color:rgba(17,17,17,.55);
  max-width:36ch;
  position:relative;z-index:1;
  margin-top:2rem;
}

/* columna derecha */
.proy-r{
  display:flex;flex-direction:column;
  background:var(--bg);
}

/* bloque problema */
.proy-block{
  padding:2.5rem 3rem;
  border-bottom:2px solid var(--ink);
}
.proy-block--dark{
  background:var(--ink);
}
.proy-block-label{
  font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  margin-bottom:1rem;
}
.proy-block-text{
  font-size:12px;line-height:1.75;
  color:rgba(255,255,255,0.7);
  max-width:44ch;
}

/* features list */
.proy-features{flex:1;display:flex;flex-direction:column}
.proy-features-label{
  font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(17,17,17,.3);
  padding:.8rem 3rem;
  border-bottom:1px solid rgba(17,17,17,.12);
}

.feat{
  flex:1;
  display:flex;align-items:stretch;
  border-bottom:1px solid rgba(17,17,17,.1);
  position:relative;overflow:hidden;
  min-height:64px;
  cursor:default;
  transition:flex .4s cubic-bezier(.16,1,.3,1);
}
.feat:last-child{border-bottom:none}
.feat:hover{flex:2}

.feat-fill{
  position:absolute;inset:0;
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  z-index:0;
}
.feat-fill--red{background:var(--red)}
.feat-fill--blue{background:var(--blue)}
.feat-fill--yellow{background:var(--yellow)}

.feat:hover .feat-fill{transform:translateX(0)}

/* texto blanco en red/blue, oscuro en yellow */
.feat:has(.feat-fill--red):hover .feat-num,
.feat:has(.feat-fill--red):hover .feat-name,
.feat:has(.feat-fill--red):hover .feat-sub,
.feat:has(.feat-fill--red):hover .feat-icon{color:#fff}

.feat:has(.feat-fill--blue):hover .feat-num,
.feat:has(.feat-fill--blue):hover .feat-name,
.feat:has(.feat-fill--blue):hover .feat-sub,
.feat:has(.feat-fill--blue):hover .feat-icon{color:#fff}

.feat:has(.feat-fill--yellow):hover .feat-num,
.feat:has(.feat-fill--yellow):hover .feat-name,
.feat:has(.feat-fill--yellow):hover .feat-sub,
.feat:has(.feat-fill--yellow):hover .feat-icon{color:var(--ink)}

.feat-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;
  width:100%;padding:1rem 3rem;
  gap:1.5rem;
}

.feat-num{
  font-family:'Unbounded',sans-serif;font-weight:200;
  font-size:9px;letter-spacing:0.1em;
  color:rgba(17,17,17,.25);
  min-width:2.5rem;
  transition:color .3s;
}
.feat-info{flex:1}
.feat-name{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:clamp(12px,1.6vw,18px);
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--ink);
  transition:color .3s;
  margin-bottom:.25rem;
}
.feat-sub{
  font-size:9px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(17,17,17,.3);
  transition:color .3s;
}
.feat-icon{
  font-size:16px;color:rgba(17,17,17,.15);
  transition:color .3s, transform .35s cubic-bezier(.16,1,.3,1);
}
.feat:hover .feat-icon{transform:translate(3px,-3px)}

/* footer de stats */
.proy-footer{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--ink);
  background:var(--ink);
}
.proy-stat{
  display:flex;flex-direction:column;gap:.4rem;
  padding:1.2rem 1.8rem;
  border-right:1px solid rgba(255,255,255,0.08);
}
.proy-stat:last-child{border-right:none}
.proy-stat span:first-child{
  font-size:8px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.25);
}
.proy-stat span:last-child{
  font-family:'Unbounded',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:0.04em;
  color:rgba(255,255,255,0.7);
}
.proy-stat-val--active{color:var(--red) !important}


/* ── BOTTOM STRIP ── */
.bottom-strip{
  height:52px;
  border-top:2px solid var(--ink);
  display:flex;align-items:stretch;
  overflow:hidden;
}
.strip-ticker{
  flex:1;
  display:flex;align-items:center;
  overflow:hidden;
  border-right:2px solid var(--ink);
}
.strip-track{
  display:flex;gap:0;
  white-space:nowrap;
  animation:ticker 22s linear infinite;
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip-item{
  font-family:'Unbounded',sans-serif;font-weight:400;font-size:10px;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:0 2rem;
  display:flex;align-items:center;gap:1.5rem;
  color:var(--ink);
}
.strip-item::after{content:'×';opacity:0.25}

.strip-right{
  display:flex;align-items:center;padding:0 1.5rem;
  font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(17,17,17,.4);
  white-space:nowrap;
}

/* ── RESPONSIVE ── */
@media(max-width:720px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-l{min-height:55vh}
  .m-inner{padding:1.2rem 1.5rem;gap:1rem}
  .bottom-strip{display:none}

  .proy-body{grid-template-columns:1fr}
  .proy-l{min-height:45vh;border-right:none;border-bottom:2px solid var(--ink)}
  .proy-footer{grid-template-columns:repeat(2,1fr)}
  .proy-stat{padding:1rem 1.2rem}
  .feat-inner{padding:.8rem 1.5rem}
}