:root{color-scheme:dark}
html,body{margin:0;background:#0b0b0c}
body{-webkit-font-smoothing:antialiased}
a{color:#fafaf8}
a:hover{color:oklch(0.72 0.19 245)}
a:focus-visible{outline:2px solid oklch(0.72 0.19 245);outline-offset:3px;border-radius:2px}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(0.35em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 oklch(0.72 0.19 245 / 0.7)}70%{box-shadow:0 0 0 8px oklch(0.72 0.19 245 / 0)}}
@keyframes curtainT{from{transform:none}to{transform:translateY(-100%)}}
@keyframes curtainB{from{transform:none}to{transform:translateY(100%)}}
@keyframes sheen{0%,72%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.portada{position:relative;min-height:100svh;overflow:hidden;background:#0b0b0c;color:#fafaf8;font-family:'Archivo',Helvetica,sans-serif}
.fondo{position:absolute;inset:-3%;will-change:transform}
.fondo-zoom{position:absolute;inset:0;transform-origin:72% 40%;animation:kb 18s cubic-bezier(0.2,0.6,0.2,1) both}
.fondo-zoom img,.fondo-zoom video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;display:block}
.fondo-zoom video{opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.fondo-zoom video.en-marcha{opacity:1}
.vineta{position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 70% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,0.55) 100%);pointer-events:none}
.grano{position:absolute;inset:-50%;opacity:0.09;mix-blend-mode:overlay;pointer-events:none;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+');animation:grain 0.8s steps(4) infinite}
.degradado{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,0.35) 0%,rgba(11,11,12,0) 18%,rgba(11,11,12,0) 82%,rgba(11,11,12,0.45) 100%);pointer-events:none}
.luz{position:absolute;left:0;top:0;width:1000px;height:1000px;margin:-500px 0 0 -500px;border-radius:50%;background:radial-gradient(circle,oklch(0.72 0.19 245 / 0.28) 0%,oklch(0.72 0.19 245 / 0.08) 35%,transparent 62%);mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity 0.8s ease;will-change:transform}
.movil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.15) 25%,rgba(0,0,0,0) 45%);opacity:0;transition:opacity 0.4s ease;pointer-events:none}
.contenido{position:relative;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.5vw,40px);pointer-events:none}
.pronto{margin:0;align-self:flex-end;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;animation:fadein 1.2s ease 2.4s both}
.punto{width:6px;height:6px;border-radius:50%;background:oklch(0.72 0.19 245);animation:pulse 2.4s ease-out infinite}
.nombre{display:flex;flex-direction:column;align-items:flex-start;gap:20px;will-change:transform}
.nombre h1{margin:0;display:flex;align-items:center;gap:0.16em;font-family:'Satoshi',sans-serif;font-weight:700;font-size:min(75px,calc(27vw / 6));line-height:1;letter-spacing:-0.035em;white-space:nowrap;color:#fafaf8}
.nombre svg{width:1.08em;height:1.08em;flex:none;overflow:visible;animation:rise 1s cubic-bezier(0.2,0.7,0.2,1) 1s both}
.letras{display:inline-flex}
.letras span{display:inline-block;background-image:linear-gradient(105deg,oklch(0.72 0.19 245) 42%,#ffffff 50%,oklch(0.72 0.19 245) 58%);background-size:300% 100%;background-position:150% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 0.9s cubic-bezier(0.2,0.7,0.2,1) both,sheen 9s ease-in-out infinite}
.letras span:nth-child(1){animation-delay:1.25s,3.80s}
.letras span:nth-child(2){animation-delay:1.30s,3.85s}
.letras span:nth-child(3){animation-delay:1.35s,3.90s}
.letras span:nth-child(4){animation-delay:1.40s,3.95s}
.letras span:nth-child(5){animation-delay:1.45s,4.00s}
.letras span:nth-child(6){animation-delay:1.50s,4.05s}
.letras span:nth-child(7){animation-delay:1.55s,4.10s}
.letras span:nth-child(8){animation-delay:1.60s,4.15s}
.legales{position:absolute;right:clamp(20px,2.5vw,40px);bottom:clamp(20px,2.5vw,40px);display:flex;gap:16px;margin:0;font-size:12px;font-weight:500;letter-spacing:0.04em;pointer-events:auto;animation:fadein 1.2s ease 2.6s both}
.legales a{color:rgba(250,250,248,0.9);text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,0.9),0 0 12px rgba(0,0,0,0.75)}
.legales a:hover{color:oklch(0.72 0.19 245)}
.telon{position:absolute;left:0;right:0;height:50.5%;background:#000;pointer-events:none}
.telon-arriba{top:0;animation:curtainT 1.1s cubic-bezier(0.75,0,0.2,1) 0.2s both}
.telon-abajo{bottom:0;animation:curtainB 1.1s cubic-bezier(0.75,0,0.2,1) 0.2s both}
