:root{
  --bg:#000;--fg:#f2f2f2;--fg2:#b8b8b8;--muted:#7a7a7a;--line:rgba(255,255,255,.14);
  --bar:64px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:400 15px/1.5 Archivo,"Helvetica Neue",Arial,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* Capas de fondo */
#space{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity 2.4s ease}
.space-ready #space{opacity:1}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 46%,rgba(0,0,0,.55),rgba(0,0,0,0) 70%),
             radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.6) 100%)}
#fog{position:fixed;left:0;right:0;bottom:var(--bar);height:min(46vh,420px);width:100%;z-index:2;pointer-events:none;opacity:.9}

/* Cabecera mínima */
.top{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;
  padding:22px clamp(18px,4vw,56px);font:600 10.5px/1 Orbitron,Archivo,sans-serif;letter-spacing:.42em;text-transform:uppercase;color:var(--fg2)}
.top span:last-child{letter-spacing:.6em}

/* Contenido central */
.hero{position:fixed;inset:0 0 var(--bar) 0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 20px calc(4vh + 40px)}
.eyebrow{margin:0 0 clamp(18px,3.2vh,30px);font:600 10.5px/1 Orbitron,Archivo,sans-serif;letter-spacing:.5em;text-transform:uppercase;color:var(--fg2);
  display:flex;align-items:center;gap:14px}
.eyebrow::before,.eyebrow::after{content:"";width:34px;height:1px;background:var(--line)}
.logo-h{margin:0;line-height:0}
.pl-logo{width:min(680px,84vw);height:auto;display:block;overflow:visible}
.rule{width:64px;height:1px;background:rgba(255,255,255,.55);margin:clamp(22px,3.6vh,34px) auto}
.lead{max-width:560px;margin:0;font-size:clamp(14px,1.25vw,16.5px);line-height:1.65;color:var(--fg2)}
.lead strong{color:var(--fg);font-weight:600}
.pillars{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;margin:clamp(20px,3.4vh,30px) 0 0;padding:0;list-style:none;
  font:600 10px/1 Orbitron,Archivo,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--fg)}
.pillars li{padding:0 18px}
.pillars li+li{border-left:1px solid var(--line)}
.soon{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(30px,5vh,48px);padding:9px 18px 9px 16px;border:1px solid var(--line);
  border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--fg2)}
.soon i{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%,100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}

/* Entrada suave del contenido */
.hero>*{opacity:0;transform:translateY(10px);animation:rise 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.hero>:nth-child(2){animation-delay:.25s}.hero>:nth-child(3){animation-delay:.45s}.hero>:nth-child(4){animation-delay:.6s}
.hero>:nth-child(5){animation-delay:.75s}.hero>:nth-child(6){animation-delay:.9s}
@keyframes rise{to{opacity:1;transform:none}}

/* Barra de marcas (la misma del portfolio, en blanco y negro) */
.brands{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:18px;height:var(--bar);padding:0 clamp(18px,4vw,60px);
  border-top:1px solid var(--line);background:#000}
.brands__label{flex:none;margin:0;color:var(--muted);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.3}
.brands__view{position:relative;flex:1;overflow:hidden;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brands__track{display:inline-flex;align-items:center;min-width:max-content;animation:brands-marquee 120s linear infinite}
.brands:hover .brands__track{animation-play-state:paused}
.brands__set{display:inline-flex;align-items:center;gap:30px;padding-right:30px}
.brands__set span,.brands__set a{display:inline-flex;align-items:center;height:30px}
.brands__set img{display:block;height:22px;width:auto;opacity:.78;transition:opacity .2s}
.brands__set span:hover img,.brands__set a:hover img{opacity:1}
.brands__set i{font-style:normal;color:#fff;font-weight:800;font-size:17px;line-height:1}
.brands .b-cv img{height:15px}.brands .b-ks img{height:24px}.brands .b-gz img{height:26px}.brands .b-cf img{height:26px}.brands .b-mf img{height:22px}.brands .b-pl img{height:30px}
@keyframes brands-marquee{to{transform:translateX(-50%)}}

.btip{position:fixed;z-index:20;width:max-content;max-width:min(320px,calc(100vw - 24px));padding:12px 14px;background:rgba(6,6,6,.97);
  border:1px solid var(--line);border-left:3px solid #fff;box-shadow:0 12px 30px rgba(0,0,0,.5);pointer-events:none}
.btip[hidden]{display:none}
.btip strong{display:block;margin-bottom:5px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.btip p{margin:0;color:var(--fg2);font-size:12px;line-height:1.45}

/* Pantallas bajas y móviles */
@media (max-height:700px){.eyebrow{margin-bottom:14px}.rule{margin:16px auto}.pillars{margin-top:16px}.soon{margin-top:16px}.hero{padding-bottom:40px}}
@media (max-height:560px){.lead{display:none}}
@media (max-width:560px){
  .brands__label{display:none}
  .top{font-size:9px;letter-spacing:.3em;padding:16px 18px}
  .top span:last-child{display:none}
  .top span:first-child{margin:0 auto}
  .eyebrow{letter-spacing:.34em;font-size:9.5px}.eyebrow::before,.eyebrow::after{width:18px}
  .pillars{gap:10px 0}
  .pillars li{padding:0 10px;letter-spacing:.22em;font-size:9px}
  .pillars li+li{border-left:0}
}
@media (prefers-reduced-motion:reduce){
  .brands__track{animation-duration:220s}
  .hero>*{animation-duration:.01s}
  .soon i{animation:none}
}

/* ---------- Logo animado: efectos variados en blanco y negro ---------- */
.pl-word{filter:drop-shadow(0 0 14px rgba(255,255,255,.16))}
.pl-l{transform-box:fill-box;transform-origin:50% 50%}
.pl-p{fill:#fff}
.pl-o{fill:rgba(255,255,255,0);stroke:#fff;stroke-width:2.8;stroke-linejoin:round;stroke-dasharray:1 0}
.pl-ghost{opacity:0;pointer-events:none}
.pl-ghost--a{transform:translateX(var(--rgb,0));opacity:0}
.pl-ghost--b{transform:translateX(calc(var(--rgb,0px) * -1))}
.pl-bands{display:none}
.pl-logo.is-noise .pl-bands{display:inline}
.pl-logo.is-noise .pl-main{opacity:0}
.pl-logo.is-noise .pl-ghost--a{opacity:calc(var(--rgbo,1) * .45)}
.pl-logo.is-noise .pl-ghost--b{opacity:calc(var(--rgbo,1) * .22)}

/* Trazo: las letras se dibujan (entrada y de vez en cuando) */
.pl-logo.fx-trace .pl-o{animation:pl-trace 1.5s cubic-bezier(.55,.1,.3,1) calc(var(--i) * 70ms - 280ms) both}
.pl-logo.fx-trace .pl-p{animation:pl-in .9s ease-out calc(var(--i) * 90ms) both}
@keyframes pl-trace{0%{stroke-dasharray:0 1;fill:rgba(255,255,255,0)}70%{stroke-dasharray:1 0;fill:rgba(255,255,255,.35)}100%{stroke-dasharray:1 0;fill:rgba(255,255,255,0)}}
@keyframes pl-in{0%{opacity:0;transform:translateY(40%)}100%{opacity:1;transform:none}}

/* Barrido de luz letra a letra */
.pl-logo.fx-shine .pl-l{animation:pl-sweep .7s ease-out calc(var(--i) * 55ms) both}
@keyframes pl-sweep{0%,100%{fill-opacity:1;transform:none}35%{transform:translateY(-5%)}}
.pl-logo.fx-shine .pl-o{animation-name:pl-sweep-o}
@keyframes pl-sweep-o{0%,100%{fill:rgba(255,255,255,0);transform:none}35%{fill:rgba(255,255,255,.95);transform:translateY(-5%)}}
.pl-logo.fx-shine .pl-word{animation:pl-glow 1.4s ease-out both}
@keyframes pl-glow{0%,100%{filter:drop-shadow(0 0 14px rgba(255,255,255,.16))}40%{filter:drop-shadow(0 0 30px rgba(255,255,255,.7))}}

/* Relámpago */
.pl-logo.fx-flash .pl-word{animation:pl-flash 1.1s linear both}
@keyframes pl-flash{0%,100%{filter:drop-shadow(0 0 14px rgba(255,255,255,.16)) brightness(1)}6%{filter:drop-shadow(0 0 40px rgba(255,255,255,.95)) brightness(1.8)}11%{filter:drop-shadow(0 0 10px rgba(255,255,255,.1)) brightness(.55)}19%{filter:drop-shadow(0 0 50px #fff) brightness(2)}30%{filter:drop-shadow(0 0 20px rgba(255,255,255,.4)) brightness(1)}}
.pl-logo.fx-flash .pl-o{animation:pl-flash-o 1.1s linear both}
@keyframes pl-flash-o{0%,100%{fill:rgba(255,255,255,0)}6%,19%{fill:rgba(255,255,255,.85)}11%{fill:rgba(255,255,255,0)}}

/* Ola */
.pl-logo.fx-wave .pl-l{animation:pl-wave .8s cubic-bezier(.3,.7,.3,1) calc(var(--i) * 45ms) both}
@keyframes pl-wave{0%,100%{transform:none}40%{transform:translateY(-16%) scale(1.04)}70%{transform:translateY(3%)}}

/* Glitch en grises */
.pl-logo.fx-glitch .pl-l.is-g{animation:pl-glitch .55s step-end both}
@keyframes pl-glitch{0%{transform:translateX(calc(var(--dx) * 1%))}18%{transform:translateX(calc(var(--dx) * -.7%)) skewX(-10deg)}36%{transform:translateX(calc(var(--dx) * .4%)) translateY(5%)}54%{transform:translateX(calc(var(--dx) * -1.2%))}72%{transform:translateX(calc(var(--dx) * .3%))}90%,100%{transform:none}}
.pl-logo.fx-glitch .pl-word{animation:pl-gshift .55s step-end both}
@keyframes pl-gshift{0%,100%{filter:drop-shadow(0 0 14px rgba(255,255,255,.16))}20%{filter:drop-shadow(-7px 0 0 rgba(255,255,255,.55)) drop-shadow(7px 0 0 rgba(130,130,130,.8))}55%{filter:drop-shadow(5px 0 0 rgba(255,255,255,.5)) drop-shadow(-5px 0 0 rgba(110,110,110,.75))}}

/* Parpadeo de neón */
.pl-logo.fx-flicker .pl-l.is-f{animation:pl-flick 1.2s linear both}
@keyframes pl-flick{0%,100%{opacity:1}8%{opacity:.1}12%{opacity:1}20%{opacity:.25}24%{opacity:.9}40%{opacity:.08}46%,70%{opacity:1}74%{opacity:.3}78%{opacity:1}}

@media (prefers-reduced-motion:reduce){.pl-logo *{animation:none!important}}