/* ============================================
   VARIABLES: definimos la paleta una sola vez
   y la reusamos en todo el archivo. Si luego
   quieres cambiar un color, lo cambias aquí
   y se actualiza en todas partes.
   ============================================ */
:root {
  --bg-dark: #0b0d10;        /* negro casi puro, como tu video de Bogotá de noche */
  --bg-dark-2: #14171b;      /* un poco más claro, para separar secciones */
  --text-light: #f2f0ec;     /* blanco cálido, no blanco puro (más elegante) */
  --text-muted: #9a9a94;     /* gris para texto secundario */
  --accent-warm: #e08c3e;    /* dorado/naranja, de tu atardecer en Hilton Head */
  --accent-cool: #3ec6c6;    /* turquesa, de tu isla en Colombia */

  --bg-bone: #f4f1ea;        /* blanco gris hueso, para la intro */
  --text-on-bone: #1a1a18;

  --font-display: 'Cormorant Garamond', serif;
  --font-logo: 'Archivo Black', sans-serif; /* placeholder de SF Distant Galaxy */
  --font-body: 'Inter', sans-serif;
}

/* ============================================
   RESET: los navegadores traen márgenes/paddings
   por defecto que casi nunca queremos. Los quitamos.
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
}

/* ============================================
   FONDO AMBIENTAL: manchas de color difuminadas
   que flotan lentamente y reaccionan al cursor.
   position:fixed = no se mueve al hacer scroll,
   así que se ve consistente en toda la página.
   ============================================ */
.ambient-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* nunca bloquea clics */
  z-index: -1; /* negativo: así queda garantizado detrás de CUALQUIER
                  elemento normal, tenga o no "position" asignado */
}

.blob {
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(90px); /* el desenfoque es lo que las hace "manchas de luz"
                          en vez de círculos duros */
  opacity: 0.5;
  will-change: transform; /* le avisa al navegador que esto se va a animar
                              mucho, para que lo optimice de antemano */
}

.blob-warm {
  background: var(--accent-warm);
  top: 8%;
  left: 8%;
}

.blob-cool {
  background: var(--accent-cool);
  top: 50%;
  left: 55%;
}

.blob-indigo {
  background: #4a5a8a;
  top: 25%;
  left: 65%;
}

/* ============================================
   INTRO: tipografía grande cambiando de palabra
   ============================================ */
.intro {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* El brillo: un círculo de luz que sigue al mouse.
   --mx y --my son variables CSS que JavaScript actualiza
   constantemente con la posición del cursor. Si el mouse
   nunca se movió, usa 50% 50% (el centro) como valor por defecto. */
.intro-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* que nunca bloquee clics sobre el contenido */
  background: radial-gradient(
    500px circle at var(--mx, 50%) var(--my, 50%),
    rgba(62, 198, 198, 0.16),
    transparent 60%
  );
}

/* ============================================
   LLUVIA DE PALABRAS: 9 palabras repartidas en
   círculo alrededor del logo, apareciendo y
   desvaneciéndose cada una a su propio ritmo.
   ============================================ */
.word-rain {
  position: absolute;
  inset: 0;
  z-index: 0; /* detrás del logo y la palabra grande (que son z-index:1) */
  pointer-events: none;
  display: none; /* oculto por defecto -- solo se activa en celular, ver @media */
}

.rain-word {
  position: absolute;
  /* translate(-50%,-50%) centra el texto exactamente en su
     posición top/left, en vez de que la esquina quede ahí */
  transform: translate(-50%, -50%) scale(1.1);
  font-family: var(--font-logo);
  font-size: clamp(0.8rem, 3.2vw, 1.05rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  filter: blur(10px);
  /* transiciones largas (2.2s) = el desvanecido se siente lento,
     no un parpadeo */
  transition: opacity 2.2s ease, filter 2.2s ease, transform 2.2s ease;
}

.rain-word.is-visible {
  opacity: 0.4; /* nunca al 100% -- son decoración, no deben competir
                    visualmente con el logo o la palabra central */
  filter: blur(0px);
  transform: translate(-50%, -50%) scale(1);
}

.intro-logo-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(360px, 48vw, 680px); /* el doble de antes */
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 1; /* por encima del brillo */
  /* cubic-bezier en vez de "ease" nos da control fino de la curva de
     velocidad: arranca rápido y frena suave al llegar */
  transition: top 1.1s cubic-bezier(.65, 0, .35, 1),
              width 1.1s cubic-bezier(.65, 0, .35, 1);
}

/* Esta clase la agrega JavaScript un momento después de cargar la página */
.intro-logo-mark.moved {
  top: 4.2rem;
  width: 100px;
}

.intro-logo-mark img {
  width: 100%;
  display: block;
}

/* perspective en el contenedor padre hace que cualquier
   transform 3D del hijo (rotateX, etc.) se vea con profundidad */
.word-stage {
  perspective: 900px;
  text-align: center; /* asegura que ambos textos queden centrados,
                          aunque tengan anchos distintos */
  position: relative;
  z-index: 1; /* por encima del brillo que sigue al mouse */
}

.touching-label {
  font-family: var(--font-logo);
  font-weight: 400; /* Archivo Black solo trae un peso, ya es "bold" de por sí */
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.touching-label.is-hidden {
  opacity: 0;
}

.big-word {
  font-family: var(--font-logo);
  font-size: clamp(3rem, 15vw, 11rem);
  line-height: 1;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: -0.01em;

  /* transition: define QUÉ propiedades animar y cuánto tardan.
     Como cambiamos varias a la vez, la transición aplica a todas. */
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
  opacity: 1;
  transform: scale(1) rotateX(0deg);
  filter: blur(0px);
}

/* Esta clase se agrega/quita por JavaScript para disparar la animación */
.big-word.is-hidden {
  opacity: 0;
  transform: scale(1.2) rotateX(15deg);
  filter: blur(16px);
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between; /* "Get in touch" a la izquierda, "Gallery" a la derecha */
  align-items: center;
  padding: 1.5rem 3rem;
  z-index: 10;
  /* degradado sutil para que el texto se lea sobre cualquier video */
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
}

.logo {
  font-family: var(--font-logo);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}

.header-contact {
  display: inline-block;
  text-align: center;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-logo);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem; /* separa el link del título de abajo */
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.header-contact:hover,
.header-contact:focus-visible {
  opacity: 1;
  color: var(--accent-warm);
}

.site-header nav a {
  color: var(--text-light);
  text-decoration: none;
  margin-left: 2rem;
  font-family: var(--font-logo);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* Los íconos junto a "Gallery" reusan casi lo mismo, pero con menos
   separación entre ellos (se ven muy sueltos con el margen de 2rem
   pensado para palabras) y centrados verticalmente con el texto */
.site-header nav a.nav-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 0.9rem;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  opacity: 1;
  color: var(--accent-warm);
}

/* ============================================
   HERO: pantalla completa, texto centrado
   ============================================ */
.hero {
  padding: 6rem 2rem;
  display: flex;
  flex-direction: column; /* antes faltaba esto: el texto y el video quedaban lado a lado */
  align-items: center;
  justify-content: center;
}

/* .btn queda disponible para reusar en otro botón más adelante,
   aunque ahora mismo no está en uso en el HTML */
.btn {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  border: 1px solid var(--accent-warm);
  color: var(--accent-warm);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  border-radius: 2px;
  transition: background 0.25s ease, color 0.25s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--accent-warm);
  color: var(--bg-dark);
}

/* ============================================
   VIDEO EN RESOLUCIÓN REAL (no es fondo de pantalla)
   object-fit: contain -> muestra el fotograma COMPLETO,
   sin recortar nada, a diferencia de "cover" que usamos
   en los videos de fondo.
   ============================================ */
.feature-video {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

/* Texto que va ARRIBA del video, no encima -- así el video queda
   limpio, pero el sitio sí explica qué es */
.hero-text {
  max-width: 680px;
  text-align: center;
  margin-bottom: 2rem;
}

.hero-text h1 {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 1rem;
  color: var(--text-light);
}

.hero-text p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* ============================================
   ABOUT
   ============================================ */
.about {
  padding: 4rem 2rem 4rem;
  display: flex;
  flex-direction: column; /* antes: video solo, centrado; ahora: video + íconos debajo */
  align-items: center;
  justify-content: center;
}

.section-social {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1.8rem;
}

.section-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.section-social a:hover,
.section-social a:focus-visible {
  opacity: 1;
  color: var(--accent-warm);
}

/* ============================================
   LOCATIONS: ticker horizontal en loop infinito
   ============================================ */
.locations {
  padding: 2rem 0 3rem;
  overflow: hidden; /* esconde el texto que se desplaza fuera de la pantalla */
}

.locations-label {
  text-align: center;
  font-family: var(--font-logo);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}

.locations-track {
  display: flex;
  width: max-content; /* el ancho real de TODO el contenido, sin recortar */
  gap: 0.9rem;
  white-space: nowrap;
  font-family: var(--font-logo);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;

  /* La animación mueve el track de 0 a -50% de su propio ancho.
     Como el contenido está DUPLICADO (mismo set dos veces),
     al llegar a -50% se ve exactamente igual que al empezar,
     y el loop se siente continuo, sin salto visible. */
  animation: scroll-left 65s linear infinite;
}

/* Al pasar el mouse por el ticker completo, se detiene -- así
   se puede leer con calma un nombre específico */
.locations:hover .locations-track {
  animation-play-state: paused;
}

.locations-track span {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.locations-track span:hover {
  color: var(--accent-cool);
  cursor: default;
}

.locations-track .dot {
  color: var(--accent-warm);
  opacity: 0.6;
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================
   WALLPAPERS
   ============================================ */
.wallpapers {
  padding: 5rem 2rem;
  text-align: center;
}

.wallpapers h2 {
  font-family: var(--font-logo);
  font-size: 2.4rem;
  font-weight: 400; /* Archivo Black ya es muy pesada, no necesita "bold" extra */
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.wallpapers > p {
  color: var(--text-muted);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

.wallpaper-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* La tarjeta EXTERIOR solo se encarga de la posición dentro del collage:
   inclinación, superposición (margen negativo) y quién queda "al frente". */
.wallpaper-card {
  position: relative;
  width: var(--size, 170px); /* antes un ancho fijo (170px) para todas */
  margin: -30px; /* bastante superposición, para que no queden huecos */
  cursor: pointer;

  transform: translate(var(--offsetX, 0px), var(--offsetY, 0px));
  transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
  z-index: 1;
}

/* Al pasar el mouse O si fue seleccionada con clic: se endereza,
   se agranda un poco, y sube muy por encima de las demás */
.wallpaper-card:hover,
.wallpaper-card.is-selected {
  transform: translate(0, 0) scale(1.18);
  z-index: 50;
}

/* La tarjeta INTERIOR se encarga de recortar la imagen a esquinas
   redondeadas y la sombra -- separarla de la exterior evita que el
   "overflow:hidden" (necesario para recortar) corte la sombra o el
   efecto de escala cuando la tarjeta crece. */
.card-inner {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.wallpaper-card video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}

/* Capa oscura + botón que aparecen solo al pasar el mouse */
.wallpaper-card .download-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 13, 16, 0.55);
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wallpaper-card:hover .download-btn,
.wallpaper-card.is-selected .download-btn {
  opacity: 1;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  text-align: center;
  padding: 5rem 2rem 3rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* línea divisoria sutil */
}

.footer-logo {
  width: 44px;
  opacity: 0.85;
  margin-bottom: 1.8rem;
}

.social-links {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 2rem; /* separación uniforme, más prolijo que márgenes sueltos */
}

.social-links a {
  display: inline-flex; /* centra el SVG dentro del link, en cualquier dirección */
  align-items: center;
  justify-content: center;
  color: var(--text-light); /* el SVG usa fill="currentColor", así que hereda este color */
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  color: var(--accent-warm);
  opacity: 1;
}

/* ============================================
   RESPONSIVE: ajustes para pantallas pequeñas
   ============================================ */
@media (max-width: 600px) {
  .site-header {
    padding: 1.1rem 1.3rem;
  }

  .site-header nav a {
    margin-left: 1rem;
    font-size: 0.7rem;
  }

  .header-contact {
    font-size: 0.62rem;
  }

  /* Problema #1: en desktop el logo centrado tenía un mínimo de 360px,
     que es casi tan ancho como la pantalla completa de un celular.
     Aquí lo reemplazamos por un tamaño mucho más chico y proporcional. */
  .intro-logo-mark {
    width: clamp(200px, 55vw, 320px);
  }

  .intro-logo-mark.moved {
    width: 72px;
  }

  .word-rain {
    display: block;
  }

  /* Problema #2: menos padding vertical en cada sección -- en desktop
     6rem/8rem se ve bien, pero en una pantalla angosta y baja se
     siente como espacio vacío exagerado entre una sección y la otra */
  .hero {
    padding: 3rem 1.2rem;
  }

  .about {
    padding: 2.5rem 1.2rem 1.5rem;
  }

  .locations {
    padding: 1.5rem 0 2rem;
  }

  .wallpapers {
    padding: 3rem 1.2rem;
  }

  .wallpapers h2 {
    font-size: 1.5rem;
  }

  .locations-track {
    font-size: 0.85rem;
    gap: 0.6rem;
  }

  /* Problema #3: la galería en columnas superpuestas (pensada para
     pantalla ancha) deja huecos irregulares en celular, porque las
     tarjetas de alturas muy distintas no se acomodan bien en un
     espacio angosto. En vez de eso, usamos un layout de columnas
     tipo "Pinterest": cada foto ocupa el 100% de su columna, y el
     navegador las va acomodando de arriba hacia abajo sin huecos. */
  .wallpaper-cloud {
    display: block;
    column-count: 2;
    column-gap: 10px;
    max-width: 100%;
    padding: 0;
  }

  .wallpaper-card {
    display: block;
    width: 100%;      /* anula el --size aleatorio, ya no aplica aquí */
    margin: 0 0 10px;  /* separación vertical entre fotos, sin superposición */
    break-inside: avoid; /* evita que una tarjeta se corte entre dos columnas */
    transform: none;
  }

  .wallpaper-card:hover,
  .wallpaper-card.is-selected {
    transform: scale(1.04); /* efecto más sutil, hay menos espacio para crecer */
    z-index: 5;
  }
}