/* variables globales */
:root {
  --color-bg: #0D0D0D;
  --color-text-primary: #F9F7F2;
}

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

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
  height: 100dvh; /* Cambiado a 100dvh para soporte perfecto en móviles */
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* REJILLA DE TILES INTERACTIVA */
#grid-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  background-color: #070707;
  z-index: -1;
  overflow: hidden;
  gap: 4px;
  padding: 2px;
  perspective: 1400px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.grid-tile {
  position: relative;
  background-color: #0E0E0E;
  border: 1px solid rgba(255, 255, 255, 0.02);
  transform-style: preserve-3d;
  transition: border-color 0.4s ease;
}

.tile-backlight {
  position: absolute;
  inset: 0px;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transform: translateZ(-15px);
  box-shadow: 0 0 25px 4px rgba(255, 235, 0, 0.4), inset 0 0 15px rgba(255, 235, 0, 0.6);
  border-radius: 2px;
  transition: opacity 0.3s ease-out;
}

.active-tile .tile-backlight {
  opacity: var(--backlight-opacity, 0) !important;
}

.tile-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    180px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(255, 235, 0, 0.12),
    transparent 85%
  );
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  z-index: 10;
}

.active-tile .tile-glow {
  opacity: 1 !important;
}

/* CONTENIDO Y TIPOGRAFÍA */
.content-wrapper {
  text-align: center;
  z-index: 10;
  max-width: 650px;
  padding: 0 20px;
  pointer-events: auto;
}

.brand-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 5rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 2.2rem;
  color: var(--color-text-primary);
}

.tagline {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: rgba(249, 247, 242, 0.6);
  margin-bottom: 3.5rem;
  text-transform: uppercase;
  line-height: 1.8;
}

.lang-selector {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
}

.lang-link {
  color: rgba(249, 247, 242, 0.65);
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 6px;
  border-bottom: 1.5px solid transparent;
  transition: all 0.3s ease;
}

.lang-link:hover, .lang-link.active {
  color: #FFFFFF;
  border-bottom: 1.5px solid #FFFFFF;
}

.location-info {
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: rgba(249, 247, 242, 0.4);
  text-transform: uppercase;
  z-index: 10;
}

.project-status {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: rgba(249, 247, 242, 0.3);
  text-transform: uppercase;
  z-index: 10;
}

/* AVISO VENTA DIRECTA PROPIETARIO */
.owner-notice {
  display: block;
  margin-top: 2rem; /* Separación limpia debajo de ESPAÑOL ENGLISH */
  font-size: 0.75rem; /* Tamaño legible y armónico */
  font-weight: 600; /* Negrita (basado en la fuente Montserrat importada) */
  letter-spacing: 0.18em; /* Tracking acorde al resto de la web */
  color: rgba(249, 247, 242, 0.85); /* Ligeramente más claro/luminoso que los links (0.65) */
  text-transform: uppercase;
  text-align: center;
}

/* =========================================
   AJUSTES PARA MÓVILES (Pantallas < 600px) 
   ========================================= */
@media (max-width: 600px) {
  /* 1. Reducción del logotipo principal para que quepa en pantalla */
  .brand-title {
    font-size: 3rem; /* Reducido desde 5rem */
    letter-spacing: 0.20em;
    margin-bottom: 1.5rem;
  }

  /* 2. Reducción del subtítulo */
  .tagline {
    font-size: 0.6rem;
    margin-bottom: 2.5rem;
    line-height: 1.6;
  }

  /* 3. Ajuste de los idiomas */
  .lang-selector {
    gap: 1.5rem; /* Menos separación entre ESPAÑOL e ENGLISH */
    font-size: 0.75rem;
  }

  /* 4. Aviso de Venta Directa optimizado */
  .owner-notice {
    margin-top: 1.5rem;
    font-size: 0.6rem; /* Más pequeño para no ahogar la pantalla */
  }

  /* 5. Acercar los textos perimetrales a los bordes de la pantalla */
  .location-info {
    top: 1.5rem;
    left: 1.2rem;
    font-size: 0.55rem;
  }

  .project-status {
    bottom: 1.5rem;
    left: 1.2rem;
    font-size: 0.55rem;
  }
}