@font-face{font-family:Unbounded;font-weight:600;font-display:swap;src:url(fonts/unbounded-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Unbounded;font-weight:800;font-display:swap;src:url(fonts/unbounded-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Unbounded;font-weight:900;font-display:swap;src:url(fonts/unbounded-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --noche:#0A0814; --noche-2:#0F0C1C; --panel:#120F22; --linea:#241F3D; --linea-2:#3A3360;
  --violeta:#8F5BFF; --coral:#FF3D7F; --ambar:#FFB547; --lima:#C8FF4D;
  --hielo:#EDEBFF; --texto-2:#C9C4E6; --texto-3:#A9A3C9;
  --proyeccion:linear-gradient(90deg,#8F5BFF,#FF3D7F 55%,#FFB547);
  --titulo:Unbounded,system-ui,sans-serif; --cuerpo:"DM Sans",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --ancho:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noche);color:var(--hielo);font-family:var(--cuerpo);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:var(--hielo)}
a:hover{color:var(--ambar)}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.etiqueta{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--lima)}
.degradado{background:var(--proyeccion);-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,h3{font-family:var(--titulo);margin:0;line-height:1.08}
h2{font-weight:800;font-size:clamp(1.8rem,3.6vw,2.7rem)}
.boton{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;text-decoration:none;font-weight:700;border:0;cursor:pointer;font:inherit;font-weight:700}
.boton--luz{background:var(--proyeccion);color:var(--noche)}
.boton--luz:hover{color:var(--noche);filter:brightness(1.08)}
.boton--linea{border:1px solid #5A5288;color:var(--hielo);font-weight:500}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:20;background:rgba(10,8,20,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.cabecera.con-borde{border-color:var(--linea)}
.cabecera .envoltura{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:14px;padding-bottom:14px}
.marca{display:flex;align-items:center}
.marca img{height:44px;width:auto}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;font-size:15px}
.menu a{text-decoration:none}
.menu .boton{min-height:44px;padding:0 20px}

/* Portada */
.portada{padding:64px 0 80px;position:relative}
.portada::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 30%,rgba(143,91,255,.22),transparent 70%),radial-gradient(40% 50% at 10% 80%,rgba(255,61,127,.12),transparent 70%);pointer-events:none}
.portada .envoltura{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.portada__texto{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:24px}
.portada h1{font-weight:800;font-size:clamp(2.3rem,5.4vw,4.3rem);line-height:1.03;letter-spacing:-.01em}
.portada p{margin:0;font-size:1.15rem;color:var(--texto-2);max-width:34rem}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.portada__video{flex:1 1 440px;min-width:0;position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--linea-2);box-shadow:0 0 90px rgba(143,91,255,.3)}
.portada__video video{width:100%;aspect-ratio:16/9;object-fit:cover}
.sello{position:absolute;left:14px;bottom:14px;padding:7px 12px;border-radius:8px;background:rgba(10,8,20,.82);font-family:var(--mono);font-size:12px}

/* Franja */
.franja{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--noche-2)}
.franja ul{list-style:none;margin:0 auto;padding:18px 24px;max-width:var(--ancho);display:flex;flex-wrap:wrap;gap:10px 40px;font-family:var(--mono);font-size:13px;color:var(--texto-2)}
.franja li::before{content:"●";margin-right:8px;color:var(--c,var(--coral))}

/* Trabajos */
.seccion{padding:88px 0}
.seccion__cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-bottom:32px}
.seccion__cabeza p{margin:0;color:var(--texto-3)}
.destacado{display:flex;flex-wrap:wrap;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--linea);margin-bottom:24px;position:relative}
.destacado__media{flex:1 1 560px;min-width:0;position:relative;background:#000}
.destacado__media video{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.destacado__info{flex:1 1 320px;min-width:0;padding:32px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.destacado__info h3{font-weight:800;font-size:1.9rem}
.destacado__info p{margin:0;color:var(--texto-2)}
.dato{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ambar);text-transform:uppercase}
.rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(340px,33vw,460px);gap:20px}
.obra{position:relative;border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid var(--linea);isolation:isolate}
.obra--ancha{grid-column:span 2}
.obra video,.obra img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.obra:hover video,.obra:hover img{transform:scale(1.03)}
.obra::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,20,.94) 0%,rgba(10,8,20,.55) 32%,transparent 60%);z-index:1;pointer-events:none}
.obra__info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;display:flex;flex-direction:column;gap:4px}
.obra__info h3{font-weight:600;font-size:1.12rem}
.obra__info span{font-size:14px;color:var(--texto-2)}
.ver{position:static;margin-top:8px;align-self:flex-start;background:none;border:0;padding:0;color:var(--coral);font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.ver::before{content:"";position:absolute;inset:0;z-index:3}
.ver:hover{color:var(--ambar)}
.en-produccion{color:var(--lima)!important}
.obra--cta{grid-column:span 3;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:28px;background:radial-gradient(120% 90% at 0% 0%,#2A1550,var(--panel) 70%)}
.obra--cta::after{display:none}
.obra--cta h3{font-weight:800;font-size:1.4rem}
.obra--cta p{margin:0;color:var(--texto-2);font-size:15px}

/* Empresas */
.empresas{background:var(--noche-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.empresas__intro{max-width:46rem;display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.empresas__intro p{margin:0;color:var(--texto-2);font-size:1.08rem}
.servicios{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.servicio{padding:26px;border-radius:16px;background:var(--panel);border:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.servicio b{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--c)}
.servicio h3{font-weight:600;font-size:1.1rem}
.servicio p{margin:0;font-size:15px;color:var(--texto-3);line-height:1.55}

/* Proceso */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.pasos li{padding:20px 4px 0;border-top:3px solid var(--c);display:flex;flex-direction:column;gap:6px}
.pasos b{font-family:var(--titulo);font-weight:800;font-size:1.7rem;color:var(--c);line-height:1}
.pasos strong{font-weight:700}
.pasos span{font-size:15px;color:var(--texto-3);line-height:1.5}

/* Contacto */
.contacto{background:radial-gradient(90% 120% at 15% 0%,#2A1550 0%,var(--noche) 65%);border-top:1px solid var(--linea)}
.contacto .envoltura{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.contacto__logo{flex:0 0 auto;width:200px}
.contacto__texto{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px}
.contacto__texto p{margin:0;color:var(--texto-2);font-size:1.08rem}
.contacto__texto .contacto__datos{font-family:var(--mono);font-size:14px;color:var(--lima)}

.pie{border-top:1px solid var(--linea)}
.pie .envoltura{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:26px;padding-bottom:26px;font-size:13px;color:var(--texto-3)}
.pie span:last-child{font-family:var(--mono)}

/* Visor */
.visor{border:0;padding:0;background:transparent;max-width:min(1200px,94vw);max-height:92vh;width:100%;color:var(--hielo)}
.visor::backdrop{background:rgba(5,4,10,.92)}
.visor__caja{display:flex;flex-direction:column;gap:12px}
.visor__barra{display:flex;justify-content:space-between;align-items:center;gap:16px}
.visor__barra h3{font-weight:600;font-size:1.05rem}
.visor__cerrar{min-width:44px;min-height:44px;border-radius:999px;border:1px solid var(--linea-2);background:var(--panel);color:var(--hielo);font-size:22px;line-height:1;cursor:pointer}
.visor video{width:100%;max-height:80vh;background:#000;border-radius:12px}

@media (max-width:900px){
  .obra--cta{grid-column:span 1}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(300px,62vw,440px)}
}
@media (max-width:620px){
  body{font-size:16px}
  .rejilla{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .obra--ancha,.obra--cta{grid-column:auto}
  .menu a:not(.boton){display:none}
  .obra{aspect-ratio:4/5}
  .obra--ancha{aspect-ratio:16/11}
  .obra--cta{aspect-ratio:auto}
  .seccion{padding:64px 0}
  .portada{padding:40px 0 56px}
  .destacado__info{padding:24px}
  .contacto__logo{width:140px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .obra video,.obra img{transition:none}
}