* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #030303;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.05);
  --gold: #ffd000;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  height: -webkit-fill-available; /* Corrección de altura para navegadores móviles */
}

body {
  background: var(--bg);
  font-family: "Inter", sans-serif;
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* PREVENCIÓN ULTRA DE DESBORDAMIENTOS EN MEDIOS */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.font-syne {
  font-family: "Syne", sans-serif;
}

/* RETÍCULA TÉCNICA DINÁMICA */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: clamp(50px, 6vw, 100px) clamp(50px, 6vw, 100px);
  pointer-events: none;
  z-index: 1;
}

/* NOISE CINEMÁTICO */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background: url("https://grainy-gradients.vercel.app/noise.svg");
}

/* HERO AUTOMÁTICO */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;

  display: flex;

  /* CAMBIO CLAVE */
  align-items: flex-start;

  /* CONTROL DINÁMICO */
  padding-top: clamp(7rem, 10vh, 10rem);
  padding-bottom: 4rem;
}

/* TITULARES AUTOMÁTICOS RESPONSIVOS */
/* TITULAR PRINCIPAL DEL HERO (Imagen 1) */
.massive {
  font-size: clamp(2.1rem, 6.5vw + 1rem, 11rem);
  line-height: 0.85;
  font-weight: 800;
  letter-spacing: -0.04em;
  word-break: keep-all; /* Evita que rompa palabras a la mitad */
  overflow-wrap: normal;
  width: 100%;
}

/* TEXTO CON DELINEADO (Imagen 1) */
.outline {
  color: transparent;
  /* Trazo ligeramente más grueso para que no desaparezca en pantallas de alta densidad */
  -webkit-text-stroke: calc(1px + 0.03vw) rgba(255, 255, 255, 0.35);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.stroke-title {
  font-size: clamp(2rem, 6vw + 0.5rem, 7.5rem);
  font-weight: 800;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: calc(0.5px + 0.04vw) rgba(255, 255, 255, 0.1);
  letter-spacing: -0.03em;
  word-break: break-word;
}

/* CRISTALERÍA INDUSTRIAL MEJORADA */
.glass {
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.gold-glow {
  box-shadow: 0 0 60px -15px rgba(255, 208, 0, 0.12);
}

/* CARDS DE INGENIERÍA RESILIENTES */
.architecture-card {
  transition: border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.architecture-card:hover {
  border-color: var(--gold);
  transform: translateY(-6px);
}

.architecture-card img {
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.architecture-card:hover img {
  transform: scale(1.04);
}

/* OVERLAY CINEMÁTICO DE ALTO CONTRASTE */
.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(2, 2, 2, 0.98) 0%,
    rgba(2, 2, 2, 0.6) 45%,
    rgba(2, 2, 2, 0.1) 100%
  );
  z-index: 2;
}

/* LUCES AMBIENTALES DINÁMICAS */
.blur-light {
  position: absolute;
  width: min(650px, 75vw);
  height: min(650px, 75vw);
  background: var(--gold);
  filter: blur(180px);
  opacity: 0.05;
  border-radius: 50%;
  pointer-events: none;
}

/* BOTÓN DE MENÚ ALTERNATIVO INTELIGENTE */
.menu-trigger {
  z-index: 5000;
  mix-blend-mode: difference;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

/* MENU OVERLAY ESTRUCTURA FLUIDA (Imagen 2) */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: #030303;
  z-index: 4000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: circle(0% at 93% 6%);
  overflow-y: auto; /* Permite scroll interno si la pantalla es muy corta */
  padding: 4rem 0;
}

/* Estado activo inyectado por JS */
.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
  clip-path: circle(150% at 93% 6%);
}

/* ENLACES INTERNOS DEL MENÚ DESPLEGABLE */
.menu-overlay nav a {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  line-height: 1.2;
  width: 100%;
  max-width: 100%;
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  
  /* Tamaño elegante y controlado para pantallas grandes (Desktop) */
  font-size: 2.2rem !important; 
}

/* EFECTO HOVER OPCIONAL PARA COMBINAR CON TU IDENTIDAD */
.menu-overlay nav a:hover {
  color: var(--gold);
}


/* ========================================================================== */
/* BOTÓN DE MENÚ INTELIGENTE (CON TEXTO DINÁMICO) */
/* ========================================================================== */

.menu-trigger {
  z-index: 5000;
  mix-blend-mode: difference;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Espacio entre el texto y las líneas del icono */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

/* El contenedor de texto dentro del botón */
.menu-text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
  font-family: "Inter", sans-serif;
}

/* SCROLLBAR PREMIUM */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #020202;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 208, 0, 0.18);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* ========================================================================== */
/* PUNTOS DE INFLEXIÓN QUIRÚRGICOS (CORRECCIONES DE INTERFAZ RESPONSIVA) */
/* ========================================================================== */

@media (max-width: 768px) {
  .menu-overlay nav a {
    font-size: 1.35rem !important;
  }
  
  .glass {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .menu-trigger span.text-xs {
    display: inline-block !important; 
    font-size: 0.65rem !important; /* Lo hacemos ligeramente más pequeño para mantener la sutileza */
    tracking: 2px !important; /* Reducimos el tracking exagerado para optimizar espacio */
  }

  .menu-trigger {
    top: 1.25rem !important;
    right: 1.25rem !important;
    padding: 0.75rem 1.25rem !important;
  }
  .menu-trigger span {
    display: none; /* <--- ESTO ESTABA BORRANDO EL TEXTO EN MÓVILES CORTOS */
  }

  .menu-overlay {
    clip-path: circle(0% at 88% 5%);
  }

  .menu-overlay.active {
    clip-path: circle(160% at 88% 5%);
  }
}

/* Celulares muy compactos (Ej: iPhone SE / 375px de ancho) */
@media (max-width: 390px) {
  .massive {
    font-size: 1.85rem !important; 
    line-height: 0.9;
  }

  .outline {
    -webkit-text-stroke: 1.1px rgba(255, 255, 255, 0.4);
  }

  /* Máxima reducción de seguridad: "INFRAESTRUCTURA" nunca se cortará */
  .menu-overlay nav a {
    font-size: 1.1rem !important; 
  }
  
  /* Reducimos ligeramente el texto del botón para pantallas críticas */
  .menu-text {
    font-size: 0.65rem;
  }
}
/* =========================================================
   SISTEMA ANTI-OVERFLOW ULTRA RESPONSIVE
========================================================= */

.site-wrapper{
  width:100%;
  overflow:hidden;
  position:relative;
}

.site-container{
  width:100%;
  max-width:100vw;
  overflow:hidden;
  position:relative;
}

/* TODO RESPETA EL VIEWPORT */
section,
div,
main,
header,
footer,
article{
  max-width:100%;
}

/* FIX FLEX */
.flex{
  min-width:0;
}

.flex > *{
  min-width:0;
}

/* FIX GRID */
.grid{
  min-width:0;
}

.grid > *{
  min-width:0;
}

/* WRAPPERS */
.grid-wrapper,
.cards-wrapper,
.hero-title-wrapper{
  width:100%;
  max-width:100%;
  overflow:hidden;
  position:relative;
}

/* TEXTO */
h1,h2,h3,h4,h5,h6,p,a,span{
  overflow-wrap:break-word;
  word-wrap:break-word;
}

/* TITULOS GIGANTES */
.massive,
.stroke-title{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* IMAGENES */
img,
video,
canvas,
svg{
  max-width:100%;
  height:auto;
  display:block;
}

/* TARJETAS */
.glass,
.architecture-card{
  width:100%;
  min-width:0;
  overflow:hidden;
}

/* MENU OVERLAY */
.menu-overlay{
  width:100vw;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

.menu-overlay-wrapper{
  width:100%;
  min-height:100vh;
  overflow:hidden;
}

.menu-overlay-inner{
  width:100%;
  max-width:100%;
  overflow:hidden;
  padding-inline:1rem;
}

/* PREVENCION GLOBAL */
*{
  min-width:0;
}

/* MOBILE FIX */
@media (max-width:768px){

  .max-w-\[1700px\],
  .max-w-\[1800px\]{
    overflow:hidden;
  }

  .hero{
    overflow:hidden;
  }

  .architecture-card{
    height:auto !important;
    min-height:320px;
  }

  .menu-overlay nav{
    width:100%;
  }

  .menu-overlay nav a{
    width:100%;
    line-height:1.1;
  }

  .glass{
    overflow:hidden;
  }

  .stroke-title{
    font-size:clamp(2rem,12vw,5rem);
  }

  .massive{
    overflow-wrap:anywhere;
  }
}