:root { --bg:#000; --fg:#fff; --dim:#8a8a8a; --accent:#ffd400; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--bg); color:var(--fg); }
body { font-family:"Helvetica Neue",Arial,sans-serif; font-weight:700; letter-spacing:.14em; text-transform:uppercase; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.logo-inv { filter:invert(1); }

.back { position:fixed; top:18px; left:18px; z-index:20; font-size:11px; display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid #333; background:#000c; transition:border-color .2s,color .2s; }
.back:hover,.back:focus-visible { border-color:var(--accent); color:var(--accent); outline:none; }
.tag { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--dim); z-index:20; }

/* fondo animado del inicio */
#fluid { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; background:radial-gradient(ellipse at 30% 40%, #3a3a36, #05060d 70%); transition:opacity 1.4s ease; }
body.entered #fluid { opacity:0; }
body::after { content:""; position:fixed; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.65) 100%); }

/* inicio: logo quieto */
#intro { position:fixed; inset:0; z-index:50; display:grid; place-items:center; transition:opacity .8s ease, visibility .8s; cursor:default; outline:none; }
#intro.out { opacity:0; visibility:hidden; }
#intro .logo { animation:aparece .9s ease both; }
#intro .logo img { filter:invert(1) drop-shadow(0 0 26px rgba(0,0,0,.6)); }
#intro p { position:absolute; bottom:22vh; font-size:11px; color:var(--dim); animation:blink 1.8s infinite 1.4s; }
@keyframes aparece { from { opacity:0; } to { opacity:1; } }
@keyframes blink { 50% { opacity:.2; } }

/* el menú 3D aparece al entrar */
body:not(.entered) #stage, body:not(.entered) .menu { opacity:0; visibility:hidden; }
#stage, .menu { transition:opacity .9s ease .25s, visibility .9s ease .25s; }

/* menu */
#stage { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:3; }
.menu { z-index:4; pointer-events:none; position:fixed; inset:0; display:flex; align-items:center; justify-content:space-around; padding:0 4vw; }
.menu a { pointer-events:auto; font-size:clamp(13px,1.1vw,20px); letter-spacing:.2em; padding:12px; z-index:5; transition:color .2s; margin-top:min(22vh,150px); }
.menu a:focus-visible { text-decoration:underline; text-underline-offset:6px; outline:none; }
.menu.gl { display:block; }
.menu.gl a { position:absolute; transform:translate(-50%,0); margin:0; }

/* work */
:root { --red:#ff2a2a; }
.grid { --cols:6; display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:8px; width:min(73vw,1400px); margin:0 auto; padding:112px 0 90px; }
.grid h1 { color:var(--fg); font-weight:800; position:fixed; top:0; left:0; right:0; height:112px; display:flex; align-items:center; justify-content:center; font-size:clamp(15px,1.3vw,24px); letter-spacing:.22em; pointer-events:none; z-index:15; background:linear-gradient(#000 60%,#0000); }
.cell { display:block; width:100%; position:relative; aspect-ratio:1; padding:0; overflow:hidden; background:#111; border:0; border-radius:6px; cursor:pointer; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; }
.cell img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .3s; }
.cell video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s; pointer-events:none; }
.cell video.on { opacity:1; }
.cell video::-webkit-media-controls { display:none !important; }
.cell video::-webkit-media-controls-enclosure { display:none !important; }
.cell span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:14px; text-align:center; font-size:clamp(8px,.6vw,11px); font-weight:700; letter-spacing:.12em; line-height:1.6; text-transform:uppercase; background:rgba(0,0,0,.5); opacity:0; transition:opacity .3s; }
.cell:hover img,.cell:focus-visible img { transform:scale(1.07); }
.cell:hover span,.cell:focus-visible span { opacity:1; }
@media (hover:none){ .cell span { opacity:1; background:linear-gradient(transparent 40%,rgba(0,0,0,.6)); align-items:flex-end; } }
.cell:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.foot { position:fixed; bottom:18px; left:0; right:0; text-align:center; font-size:10px; color:var(--dim); pointer-events:none; z-index:5; }
@media (max-width:1100px){ .grid{width:calc(100vw - 32px);} }
.grid.fit { position:fixed; left:24px; top:100px; width:calc(100vw - 48px); height:calc(100vh - 168px); margin:0; padding:0; grid-template-rows:repeat(var(--rows),1fr); }
.grid.fit .cell { aspect-ratio:auto; width:100%; height:100%; min-height:0; }
@media (max-width:640px){ .grid{gap:6px;} .cell span{font-size:8px;} }

#player { position:fixed; inset:0; z-index:40; background:#000f; display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:16px; }
#player.open { display:flex; }
#player .frame { width:min(1100px,100%); aspect-ratio:16/9; background:#000; }
#player .frame.propio { aspect-ratio:auto; width:auto; display:flex; justify-content:center; }
#player .frame video { display:block; max-width:min(1100px,100%); max-height:78vh; background:#000; }
#player iframe { width:100%; height:100%; border:0; }
#player h2 { font-size:12px; text-align:center; line-height:1.6; }
#player button { position:absolute; top:18px; right:18px; background:none; border:1px solid #333; color:#fff; font:inherit; font-size:11px; letter-spacing:.14em; padding:10px 14px; cursor:pointer; text-transform:uppercase; }
#player button:hover,#player button:focus-visible { border-color:var(--accent); color:var(--accent); outline:none; }

/* contacto: el azul grisáceo de la estrella también tiñe el marco, las líneas y las etiquetas */
.term, .term-top, .term-thanks { --slate:#2f3e45; --slate-lt:#8fa9b6; }

/* contacto: estrella de fondo abajo a la izquierda, con los colores del inicio */
.star-bg { position:fixed; left:0; bottom:0; width:max(80vw,640px); z-index:0; pointer-events:none; isolation:isolate; mix-blend-mode:screen; opacity:1; -webkit-mask-image:radial-gradient(ellipse 120% 120% at 0% 100%,#000 62%,transparent 100%); mask-image:radial-gradient(ellipse 120% 120% at 0% 100%,#000 62%,transparent 100%); }
.star-bg { animation:respira 7s ease-in-out infinite; }
@keyframes respira { 0%,100% { opacity:.28; } 50% { opacity:.5; } }
@media (prefers-reduced-motion:reduce) { .star-bg { animation:none; } }
.star-bg img { display:block; width:100%; height:auto; filter:url(#mapa-estrella); }

/* contacto: terminal tipo teléfono público retro */
.contact { position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:70px 16px 40px; }
.term { width:min(100%,560px); border:2px solid var(--slate-lt); padding:clamp(14px,3.4vw,22px); display:flex; flex-direction:column; gap:clamp(12px,2.6vw,18px); background:rgba(0,0,0,.42); box-shadow:-18px 18px 46px rgba(47,62,69,.85), 0 0 22px rgba(143,169,182,.22), inset 0 0 30px rgba(47,62,69,.55); }
.term-top { display:flex; gap:12px; align-items:flex-start; }
.term-ico { flex:none; width:40px; height:40px; border:2px solid var(--slate-lt); display:grid; place-items:center; }
.term-ico svg { width:24px; height:auto; fill:var(--slate-lt); shape-rendering:crispEdges; }
.term-lines { flex:1; display:flex; flex-direction:column; gap:6px; font-size:clamp(10px,2.6vw,13px); border-top:2px solid var(--slate-lt); padding-top:6px; align-self:stretch; text-transform:none; letter-spacing:.1em; word-break:break-all; }
.term-lines a { align-self:flex-start; }
.term-lines a:hover, .term-lines a:focus-visible { background:#fff; color:#000; text-shadow:none; outline:none; }
.term-thanks { font-size:clamp(11px,3.4vw,17px); font-weight:800; padding-bottom:8px; border-bottom:2px solid var(--slate-lt); }
.term-logo-box { pointer-events:none; }
.term-fig { display:block; width:78%; height:auto; margin:6px auto 0; filter:drop-shadow(0 0 8px rgba(255,255,255,.3)); }
.term-logo { width:82%; height:auto; margin:0 auto; display:block; }
.term-form { display:flex; flex-direction:column; gap:10px; }
.term-form label { display:flex; align-items:flex-start; gap:12px; font-size:clamp(10px,2.8vw,13px); }
.term-form label span { color:var(--slate-lt); flex:none; width:7.2em; text-align:right; padding-top:9px; }
.term-form input, .term-form textarea { flex:1; min-width:0; background:#fff; color:#000; border:0; border-radius:0; font:inherit; font-size:clamp(12px,3.2vw,14px); font-weight:700; letter-spacing:.08em; text-transform:none; padding:8px 10px; outline:none; resize:none; text-shadow:none; box-shadow:0 0 10px rgba(255,255,255,.25); }
.term-form input:focus, .term-form textarea:focus { box-shadow:0 0 0 2px #000, 0 0 0 4px #fff, 0 0 16px rgba(255,255,255,.5); }
.term-form button { align-self:flex-end; background:none; border:2px solid var(--slate-lt); color:var(--slate-lt); font:inherit; font-size:12px; letter-spacing:.2em; padding:9px 18px; cursor:pointer; text-transform:uppercase; }
.term-form button:hover, .term-form button:focus-visible { background:var(--slate-lt); color:#000; outline:none; }
.term-calling { text-align:center; font-size:clamp(11px,3.2vw,15px); }
.dots::after { content:""; animation:puntos 1.4s steps(1) infinite; }
@keyframes puntos { 0% { content:""; } 25% { content:"."; } 50% { content:".."; } 75% { content:"..."; } }
.term-bar { width:60%; margin:8px auto 0; height:22px; border:2px solid var(--slate-lt); padding:3px; position:relative; }
.term-bar i { position:absolute; top:3px; bottom:3px; left:3px; width:26%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.5); animation:barra 2.2s steps(14) infinite alternate; }
.term.sending .term-bar i { animation-duration:.7s; }
@keyframes barra { to { left:calc(100% - 3px - 26%); } }
@media (prefers-reduced-motion:reduce) { .term-bar i, .dots::after { animation:none; } .term-bar i { left:37%; } }

/* escritorio: ventana horizontal 4:3, logo grande al centro pisando los bordes, formulario abajo */
@media (min-width:700px) {
  .contact { padding:64px 20px 24px; }
  .term { container-type:inline-size; width:min(94vw, calc((100vh - 96px) * 4 / 3), 980px); aspect-ratio:4/3; padding:2.6cqw 3cqw; gap:0; display:grid; grid-template-columns:1fr; grid-template-rows:auto auto 1fr auto auto; }
  .term-top { gap:1.6cqw; }
  .term-ico { width:5.2cqw; height:5.2cqw; }
  .term-ico svg { width:3cqw; }
  .term-lines { font-size:1.4cqw; gap:.7cqw; padding-top:.7cqw; }
  .term-thanks { font-size:2cqw; margin:1.6cqw 0 0; padding-bottom:1.1cqw; }
  .term-logo-box { position:relative; z-index:2; }
  .term-fig { position:absolute; right:0; top:50%; width:44cqw; margin:0; transform:translateY(-50%); }
  .term-logo { position:absolute; left:30%; top:46%; width:48cqw; max-width:none; margin:0; transform:translate(-50%,-50%); }
  .term-form { display:grid; grid-template-columns:1fr 1fr; gap:1.1cqw 3cqw; }
  .term-form label { font-size:1.4cqw; gap:1.4cqw; }
  .term-form label span { width:6.2em; padding-top:.9cqw; }
  .term-form input, .term-form textarea { font-size:1.5cqw; padding:.9cqw 1.1cqw; }
  .f-asunto, .f-mensaje { grid-column:1 / -1; }
  .term-form textarea { height:7.5cqw; }
  .term-form button { grid-column:1 / -1; justify-self:end; font-size:1.4cqw; padding:.8cqw 2.2cqw; margin-top:.2cqw; }
  .term-bottom { margin-top:1.2cqw; }
  .term-calling { font-size:1.6cqw; }
  .term-bar { width:36%; margin:.8cqw auto 0; height:2.6cqw; padding:.35cqw; }
  .term-bar i { top:.35cqw; bottom:.35cqw; left:.35cqw; }
  @keyframes barra { to { left:calc(100% - .35cqw - 26%); } }
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} }

/* título que se escribe solo */
.tw { position:relative; display:inline-block; white-space:nowrap; font-family:"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
.tw-size { visibility:hidden; }
.tw-text { position:absolute; left:0; top:0; }
.tw-caret { display:inline-block; width:.14em; height:1.05em; margin-left:.18em; vertical-align:-.16em; background:currentColor; animation:caret 1.05s steps(1) infinite; }
.tw-caret.typing { animation:none; }
@keyframes caret { 50% { opacity:0; } }

/* botón para volver al inicio (solo visible en el menú) */
#home { z-index:30; transition:opacity .9s ease .25s, visibility .9s ease .25s, border-color .2s, color .2s; }
body:not(.entered) #home { opacity:0; visibility:hidden; }

#intro p { cursor:pointer; }