/* ===========================
   TIPOGRAFÍA WALDENBURG
   =========================== */

   @font-face {
    font-family: "Waldenburg";
    src: url("/assets/fonts/KMR-Waldenburg-SchwerHalbschmal.woff2")
      format("woff2");
    font-weight: 900; /* ajustable si en Figma es otro peso base */
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Waldenburg";
    src: url("/assets/fonts/KMR-Waldenburg-FettHalbschmal.woff2")
      format("woff2");
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
  }

/* ==============
   RESET SUAVE
   ============== */

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html,
   body {
     margin: 0;
     padding: 0;
     height: 100%;
     overflow: hidden;          /* 🔒 sin scroll */
     overscroll-behavior: none; /* 🔒 sin rebote (donde esté soportado) */
   }
   
   body {
    font-family: "Waldenburg", system-ui, -apple-system, BlinkMacSystemFont,
      "SF Pro Text", sans-serif;
    color: #ffffff;
    background-color: #000;
  }
   
   /* ==============
      LAYOUT GENERAL
      ============== */
   
   .page {
   height: 100vh;            /* en lugar de min-height */
   display: flex;
   flex-direction: column;
    position: relative;
      }
   
   .site-header,
   .site-footer {
     padding-block: 16px;
     position: relative;
     z-index: 20;  /* por encima del vídeo */
     background: transparent;
   }
   
   
   /* Main hero ocupa todo el resto de alto */
   
   .hero {
    position: relative;
    flex: 1;
    overflow: hidden;
    /* sin height: 100vh */
  }
   
   /* ==============
      GRID 12 COLUMNAS
      margen lateral 20px + gutter 20px
      ============== */
   
   .grid {
     display: grid;
     grid-template-columns: repeat(12, minmax(0, 1fr));
     column-gap: 20px;
     padding-inline: 20px;
   }
   
   /* ==============
      HEADER
      ============== */
   
   .header-logo {
     grid-column: 1 / span 3;
     font-weight: 900;      /* Fett */
     font-size: 12px;       /* 12pt */
   
   }
   
   .header-contact {
     grid-column: 7 / span 3;
     text-align: right;
     font-weight: 700;      /* Fett */
     font-size: 12px;       /* 12pt */
   }
   
   
   .header-ig {
     grid-column: 11 / span 2;
     text-align: right;
     font-weight: 700;      /* Fett */
     font-size: 12px;       /* 12pt */
   }
   
/* ESTADO BASE DE LOS LINKS */
.header-contact a,
.header-ig a {
  color: inherit;
  text-decoration: none;
  opacity: 0.8;
  position: relative;
  transition: opacity 0.2s ease;
}

/* FLECHA ANTES DEL TEXTO (NO DESPUÉS) */
.header-contact a::before,
.header-ig a::before {
  content: "↗";
  font-size: 0.85em;
  display: inline-block;
  margin-right: 0.25em;   /* separa flecha y texto hacia la IZQUIERDA */
  opacity: 0;             /* oculta por defecto */
  transform: translateY(2px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* HOVER: MÁS OPACO + FLECHA VISIBLE */
.header-contact a:hover,
.header-ig a:hover {
  opacity: 1;
}

.header-contact a:hover::before,
.header-ig a:hover::before {
  opacity: 1;
  transform: translateY(0);
}
/* VÍDEO HERO A PANTALLA COMPLETA */

.hero-video,
.hero-overlay {
  position: fixed; /* en vez de absolute → ocupa todo el viewport */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  pointer-events: none; /* que no bloquee clics */
}
   
.hero-content {
  /* SIN position */
  z-index: 30;
  display: flex;
  align-items: center;      /* centro vertical dentro de hero-content */
  justify-content: center;  /* centro horizontal */
  pointer-events: none;     /* ok, para no bloquear header/footer */
  width: 100%;
}
   
.hero-text {
  mix-blend-mode: difference;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 42vh auto 0;   /* ← tu centrado perfecto */
  width: max-content;
  grid-column: 1 / -1;
}

.hero-heading {
  margin: 0;
  font-size: 40px;            /* ≈ 40pt en CSS */
  font-weight: 700;           /* Fett */
  color: #ffffff;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background-color: #ffffff;
  animation: blink 1s infinite steps(2, start);
}
   
   @keyframes blink {
     0%,
     50% {
       opacity: 1;
     }
     50.01%,
     100% {
       opacity: 0;
     }
   }
   
   /* ==============
      FOOTER
      ============== */
   
/* FOOTER GLOBAL: siempre pegado abajo, sin scroll */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0); /* respeta barra / notch iOS */
  padding-block: 12px;
  z-index: 40;              /* por encima del vídeo */
  background: transparent;
}

/* grid del footer en escritorio: usamos las mismas 12 columnas */
.site-footer .grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  padding-inline: 10px;
}

/* posición del texto en escritorio */
.footer-copy {
  grid-column: 10 / span 3;
  text-align: right;
  font-weight: 700;
  font-size: 12px;
}
   
   /* ==============
      RESPONSIVE SIMPLE
      ============== */
   
/* MOBILE (≤ 768px) */
@media (max-width: 768px) {
  /* 3 columnas: 1 para logo, 2 para contacto */
  .grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: 10px;
    column-gap: 10px;
    row-gap: 0px;
  }

  /* HEADER: compacto, pero manteniendo 12px aprox */
  .site-header,
  .site-footer {
    padding-block: 10px; /* un poco menos que desktop para ganar alto */
  }

  .site-header .header-logo {
    grid-column: 1 / span 1;   /* col 1 */
    grid-row: 1;
    text-align: left;
    font-size: 12px;
  }

  .site-header .header-contact {
    grid-column: 2 / span 2;   /* cols 2–3 */
    grid-row: 1;
    text-align: right;
    font-size: 11px;
  }

  .site-header .header-ig {
    grid-column: 2 / span 2;   /* cols 2–3, debajo del mail */
    grid-row: 2;
    text-align: right;
    font-size: 11px;
    margin-top: 0;
  }

  /* HERO: mantenemos tamaño decente y lo colocamos algo por encima del centro geométrico
     para que quepa el footer sin scroll */
  .hero-text {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 37vh auto 0;        /* ajusta fino entre 28–32vh si lo quieres un pelín más arriba/abajo */
  }

  .hero-heading {
    font-size: clamp(20px, 6vw, 24px); /* tipo legible, no diminuta */
    text-align: left;
  }

  .hero-dot {
    width: 10px;
    height: 10px;
  }

    /* ya tienes aquí tu .grid para el header,
       esto es SOLO para el footer */
    
    .site-footer {
      padding-block: 10px;           /* un poco menos alto en mobile */
    }
  
    .site-footer .grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding-inline: 10px;
      column-gap: 12px;
    }
  
    .footer-copy {
      grid-column: 1 / -1;          /* ocupa las 3 columnas */
      text-align: right;
      font-size: 11px;
    }
  }