/* reset y base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html {
  height: 100%;
  width: 100%;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  overflow: hidden;
  background: #0f0f10;
  color: #fff;
}
a { text-decoration: none; color: inherit; }

/* social icons */
.social-nav {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 1rem;
  z-index: 60;
}
.social-nav img {
  width: 1.2rem;
  height: 1.2rem;
  filter: invert(1);
  transition: filter .3s;
}
.social-nav a:hover img {
  filter: invert(0.7) sepia(1) saturate(4) hue-rotate(180deg);
}

/* hero */
.hero {
  position: relative;
  height: 100dvh;              /* CHANGED: 100vh -> 100dvh */
  width: 100vw;
  overflow: hidden;
  perspective: 1400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform-style: preserve-3d;
  padding: 0;                  /* CHANGED: elimina el padding que generaba barras */
}

/* video / image background */
.background {
  position: fixed; inset: 0; z-index: 1; overflow: hidden;             /* CHANGED: absolute -> fixed para cubrir viewport */
  inset: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 1;
  cursor: pointer;
  pointer-events: auto;        /* recibe clics para pausar/reanudar */
  
}
.background video {
  position: absolute;
  inset: 0;                    /* CHANGED: ocupa todo el contenedor */
  width: 100vw;                /* CHANGED */
  height: 100dvh;              /* CHANGED */
  min-width: 100vw;            /* CHANGED */
  min-height: 100dvh;          /* CHANGED */
  object-fit: cover;           /* sin barras negras */
  pointer-events: none;        /* deja pasar clics al wrapper .background */
  filter: brightness(1);
  transform: none;             /* CHANGED: sin translate(-50%,-50%) */
  top: auto; left: auto;       /* CHANGED: limpiamos centrado anterior */
}
@supports not (height: 100dvh){
  .background video { height: 100vh; min-height: 100vh; } /* fallback */
}

.fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  pointer-events: none;
}


/* links panel */
.links-panel {
  position: absolute;
  top: 32px;
  left: 32px;
  display: flex;
  gap: 1.5rem;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color: rgba(255,255,255,0.9);
  font-size: .75rem;
  backdrop-filter: blur(6px);
  padding: .4rem .8rem;
  border-radius: 12px;
  background: rgba(10,20,40,0.35);
  box-shadow: 0 12px 48px -10px rgba(0,0,0,0.6);
  z-index: 60;
  pointer-events: auto;
}
.links-panel a {
  position: relative;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: .5px;
  transition: background .2s, transform .2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}
.links-panel a:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.label {
  font-size: .5rem;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 2px;
}

/* contenido (OCULTAMOS hero viejo + slider) */
.hero-content { display: none !important; }   /* CHANGED: oculta “Hi, I’m…” */
.small-speed, .small-speed * { display:none !important; }  /* CHANGED */

/* Footer */
.site-footer {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  font-size: 0.75rem;
  background: none;
  color: rgba(255,255,255,0.6);
  pointer-events: none;
  z-index: 50;
}

/* responsive */
@media (max-width: 900px) {
  .links-panel { flex-wrap: wrap; }
}

/* Desactiva el 3D del contenedor que rompía el fixed */
.hero{
  perspective: none !important;
  transform-style: flat !important;
}

/* Fondo pegado al viewport, sin márgenes ni “gutters” */
.background{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1;           /* detrás de la UI (que ya tiene z-index alto) */
  overflow: hidden;
}

/* Vídeo: ocupa todo y “muerde” 1% para evitar líneas por redondeo */
.background video{
  position: absolute;
  inset: 0;
  width: 101vw;         /* anti-borde subpíxel */
  height: 101dvh;       /* anti-borde subpíxel */
  object-fit: cover;
  transform: translateZ(0);  /* fuerza capa GPU y evita gaps */
  pointer-events: none;
}

/* fallback si el navegador no soporta dvh */
@supports not (height: 100dvh){
  .background video{ height: 101vh; }
}

/* Asegura que nada meta padding/márgenes globales */
html, body{ margin:0; padding:0; background:#000; }

.bgv{
  position: absolute; inset: 0;
  width: 101vw; height: 101dvh;         /* muerde 1% para matar líneas subpíxel */
  object-fit: cover;
  opacity: 0; transition: opacity .6s linear; /* duración del crossfade */
  pointer-events: none;
}

.bgv.active{ opacity: 1; }
@supports not (height: 100dvh){
  .bgv{ height: 101vh; }
}

/* ===== NAVBAR SUPERIOR ===== */
.navbar{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* izq / centro / dcha */
  align-items: center;
  padding: 12px 24px;
  /* barra sutil transparente */
  background: linear-gradient(to bottom, rgba(5,10,20,.35), rgba(5,10,20,0));
  backdrop-filter: blur(6px) saturate(120%);
}

/* Marca izquierda */
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:28px; height:28px; display:block; }
.brand-text{
  font-family: var(--font-brand, "Space Grotesk", system-ui, sans-serif);
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .95;
}

/* Menú centrado */
.top-menu{
  display:flex; gap: 28px;
  justify-self: center;
}
.top-menu a{
  font-family: var(--font-ui, "Space Mono", ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: .35em;         /* look espaciado */
  font-size: 12px;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}
.top-menu a:hover{ opacity: 1; transform: translateY(-1px); }

/* Redes derecha */
.socials{ justify-self: end; display:flex; gap:14px; }
.socials img{
  width:20px; height:20px; display:block;
  opacity:.9; transition: opacity .2s ease, transform .2s ease;
  filter: none;
}
.socials a:hover img{ opacity:1; transform: scale(1.06); }

/* Mobile tweaks */
@media (max-width: 760px){
  .navbar{ padding: 10px 14px; }
  .brand-text{ font-size: 14px; }
  .top-menu{ gap:18px; }
  .top-menu a{ letter-spacing:.28em; font-size:11px; }
  .socials img{ width:18px; height:18px; }
}

/* Oculta el panel antiguo si sigue en el HTML */
.links-panel{ display:none !important; }

:root{
  --font-brand: "Bruno Ace", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Nombre "David Comas" */
.brand-text{
  font-family: var(--font-brand);
  font-weight: 400;                   /* Regular */
  font-size: clamp(16px, 1.6vw, 20px);/* 20px máx como en Figma */
  letter-spacing: 0;                  /* 0% tracking */
  line-height: 1;                     /* Auto */
  color: #fff;                        /* FFFFFF */
  text-transform: none;               /* respeta mayúsc/minúsc */
  opacity: .95;
}

:root{
  /* Cambia aquí la familia si usas otra en el menú */
  --font-menu: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --menu-color: #AFC2DE;
  --menu-gap: 48px;
}

/* contenedor del menú centrado */
.top-menu{
  display: flex;
  gap: var(--menu-gap);
  justify-self: center;
  align-items: center;
}

/* links del menú */
.top-menu a{
  font-family: var(--font-menu);
  font-weight: 400;          /* Regular */
  text-transform: uppercase;
  letter-spacing: 0;         /* 0% en Figma */
  font-size: 14px;           /* ajusta si lo quieres mayor */
  line-height: 18px;         /* altura visual ~18px */
  color: var(--menu-color);
  opacity: 1;
  transition: transform .2s ease, opacity .2s ease;
}

.top-menu a:hover{
  transform: translateY(-1px);
  opacity: 0.95;
}

:root{
  --font-menu: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --menu-color: #AFC2DE;
  --menu-gap: 48px;
  --menu-size: 14px;     /* Figma */
  --menu-line: 18px;     /* altura visual ~18 */
  --menu-track: 0.26em;  /* 26% en Figma */
}

/* contenedor centrado */
.top-menu{
  display: flex;
  gap: var(--menu-gap);
  justify-self: center;
  align-items: center;
}

/* links */
.top-menu a{
  font-family: var(--font-menu);
  font-weight: 400;                 /* Regular */
  font-size: var(--menu-size);
  line-height: var(--menu-line);
  letter-spacing: var(--menu-track);
  text-transform: uppercase;
  color: var(--menu-color);
  opacity: 1;
  transition: transform .2s ease, opacity .2s ease;
}
.top-menu a:hover{
  transform: translateY(-1px);
  opacity: .95;
}

/* Ajuste móvil para que no quede demasiado espaciado */
@media (max-width: 760px){
  .top-menu{ gap: 28px; }
  .top-menu a{
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.20em; /* ~20% */
  }
}

:root{
  --nav-top: 28px;     /* ↑ distancia superior */
  --nav-side: 24px;    /* ↔︎ distancia lateral */
}

/* NAVBAR flotante con margen a los bordes */
.navbar{
  position: fixed;
  inset: calc(env(safe-area-inset-top) + var(--nav-top)) 
         var(--nav-side) auto var(--nav-side); /* top | right | bottom | left */
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 12px 20px;
  border-radius: 14px;                         /* esquinas suaves */
  background: linear-gradient(to bottom, rgba(5,10,20,.40), rgba(5,10,20,.15));
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

/* móvil: reduce un poco el offset */
@media (max-width: 760px){
  :root{
    --nav-top: 16px;
    --nav-side: 12px;
  }
}

:root{
  --nav-bg-top: transparent;
  --nav-bg-bot: transparent;
  --nav-blur: 6px;
  --nav-border: rgba(175,194,222,.06);
}

.navbar{
  /* usa las variables arriba */
  background: linear-gradient(to bottom, var(--nav-bg-top), var(--nav-bg-bot));
  backdrop-filter: blur(var(--nav-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(120%); /* iOS */
  border: 1px solid var(--nav-border);            /* contorno sutil (opcional) */
  box-shadow: 0 8px 24px rgba(0,0,0,.22);         /* puedes bajarlo si molesta */
}

:root{
  --nav-top: 28px;
  /* más margen a los lados */
  --nav-side: clamp(32px, 4vw, 64px);  /* ↑ ajusta a tu gusto */
}


/* NAVBAR sin barra (solo contenido) */
.navbar{
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--nav-top));
  left: var(--nav-side);
  right: var(--nav-side);
  z-index: 100;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 0;                 /* sin caja alrededor */
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* (opcional) mejorar lectura con una sombra de texto muy sutil */
.brand-text,
.top-menu a{
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.socials img{ filter: drop-shadow(0 1px 6px rgba(0,0,0,.35)); }

/* móvil: ajusta separación si quieres */
@media (max-width: 760px){
  :root{ --nav-top: 16px; --nav-side: 12px; }
}
.brand{ padding-left: 6px; }
.socials{ padding-right: 6px; }

/* sube un punto de size y peso */
.top-menu a{
  font-size: 15px;        /* antes 14px */
  line-height: 20px;      /* mantiene altura visual */
  font-weight: 500;       /* Roboto Mono Medium */
}
@media (max-width: 760px){
  .top-menu a{ font-size: 14px; line-height: 18px; font-weight: 400; }
}

/* Titular izquierda: proporciones del mock */
.hero-headline{
  position: fixed;
  left: clamp(24px, 6vw, 110px);   /* margen izq. como en la imagen */
  top: 14vh;                       /* altura aproximada del mock */
  z-index: 20;
  pointer-events: none;            /* que no pause el vídeo al clickar encima */

  /* control rápido del tamaño global del bloque */
  --fs: clamp(42px, 9.4vw, 105px); /* 105px máximo (Figma), escala responsive */
}

.hero-headline .line{
  display: block;
  font-family: "Bruno Ace", system-ui, sans-serif;
  font-weight: 400;                /* Regular */
  text-transform: uppercase;
  letter-spacing: -0.02em;         /* −2% */
  font-size: var(--fs);
  line-height: 0.86;               /* compacta como en el mock */
  color: #fff;
  mix-blend-mode: overlay;         /* igual que en Figma */
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* espacio entre líneas proporcional al tamaño */
.hero-headline .line + .line{
  margin-top: calc(var(--fs) * 0.22);
}

/* Ajuste en pantallas pequeñas */
@media (max-width: 900px){
  .hero-headline{
    left: clamp(16px, 5vw, 60px);
    top: 10vh;
    --fs: clamp(32px, 10vw, 72px);
  }
  .hero-headline .line{ letter-spacing: -0.015em; }
}

/* === Headline a la IZQUIERDA + color Overlay (como Figma) === */
:root{
  /* diales responsivos */
  --hl-left: clamp(20px, 6vmin, 120px);  /* margen izquierdo */
  --hl-top:  clamp(12px, 18vmin, 240px); /* margen superior */

  /* tamaño fluido por el lado más pequeño del viewport */
  --hl-fs-min: 44px;
  --hl-fs-fluid: 10vmin;   /* súbelo/bájalo si lo quieres +/− grande */
  --hl-fs-max: 120px;

  --hl-gap-em: 0.24;       /* separación entre líneas */
}

.hero-headline{
  position: fixed;
  left: var(--hl-left);
  top:  var(--hl-top);
  z-index: 20;
  pointer-events: none;
  text-align: left;        /* ← orientación a la izquierda */
}

.hero-headline .line{
  display:block;
  font-family:"Bruno Ace", system-ui, sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-0.02em;  /* -2% */
  font-size:clamp(var(--hl-fs-min), var(--hl-fs-fluid), var(--hl-fs-max));
  line-height:.88;}

  /* COLOR como en tu captura/Figma */
  /* ===== Color y look del titular (azul/gris del mock) ===== */
.hero-headline .line{
  /* quita herencias anteriores */
  mix-blend-mode: normal !important;
  color: transparent !important;

  /* degradado del texto */
  background: linear-gradient(
    180deg,
    rgba(175,194,222,.92) 0%,
    rgba(126,153,191,.88) 45%,
    rgba(91,120,168,.85) 70%,
    rgba(75,106,149,.82) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* sutil separación del fondo */
  text-shadow: 0 1px 10px rgba(20,40,80,.25);
}


.hero-headline .line + .line{
  margin-top: calc(var(--hl-gap-em) * 1em);
}
.hero-headline .line{ opacity: .88; }    /* 0.88–0.95 suele ir bien */

:root{
  --overlay-opacity: .28;   /* ← sube/baja (0–1) */
}

.overlay-soft{
  position: fixed;
  inset: 0;
  z-index: 2;               /* vídeo (1) < overlay (2) < texto/navbar */
  pointer-events: none;
  background:
    radial-gradient(120% 140% at 40% 55%, rgba(6,12,24,.55), rgba(6,12,24,0) 60%),
    linear-gradient(180deg, rgba(6,12,24,.35), rgba(6,12,24,.45));
  opacity: var(--overlay-opacity);
}

.hero-headline .line{
  background: linear-gradient(
    180deg,
    rgba(175,194,222,.72) 0%,
    rgba(126,153,191,.68) 5%,
    rgba(91,120,168,.65) 10%,
    rgba(75,106,149,.62) 0%
  );
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer estilo Figma */
:root{
  --footer-bottom: clamp(16px, 3vh, 32px);
}

.site-footer{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + var(--footer-bottom));
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;                     /* separación entre las dos líneas */
  pointer-events: none;         /* no captura clicks (no pausa el vídeo) */
  text-align: center;
}

.site-footer .tagline,
.site-footer .copy{
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;             /* Regular */
  font-size: 14px;              /* Figma */
  line-height: 18px;            /* auto/compacto */
  letter-spacing: 0.26em;       /* 26% */
  text-transform: uppercase;
  color: #AFC2DE;
  text-shadow: 0 1px 8px rgba(0,0,0,.35); /* legibilidad sobre el vídeo */
  opacity: 0.95;
}

/* móvil: un poco más pequeño para no chocar con la lava ;) */
@media (max-width: 760px){
  .site-footer .tagline,
  .site-footer .copy{
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.22em;
    opacity: 0.92;
  }
}

/* Tamaño fluido del nombre (arriba izq.) */
:root{
  --brand-size: clamp(18px, 2.2vw, 24px);   /* ← súbelo/bájalo a tu gusto */
  --brand-mark-size: clamp(22px, 2.4vw, 32px);
}

.brand-text{
  font-size: var(--brand-size) !important;  /* Bruno Ace Regular */
  line-height: 1;
  letter-spacing: 0;
}

.brand-mark{
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
}

/* En móviles, que no se pase */
@media (max-width: 760px){
  :root{
    --brand-size: 16px;
    --brand-mark-size: 20px;
  }
}