/* ══════════════════════════════════════════════════════
   LOVIT — contacto.css v3
══════════════════════════════════════════════════════ */

/* ── Nav: Work y Nosotros en azul ────────────────────── */
.nav--light .nav__link        { color: var(--blue); }
.nav--light .nav__link::after { background: var(--blue); }
.nav--light .nav__burger span { background: var(--black); }
.nav--light .nav__cta {
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--blue);
}
.nav--light .nav__cta:hover {
  background: var(--blue);
  color: var(--white);
}

/* ── Main: pantalla completa blanca ─────────────────── */
.contacto-main {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--white);
}

/* Canvas de partículas */
#particulas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Contenido centrado */
.contacto-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: calc(var(--nav-h) + 60px) 28px 80px;
}

/* Label */
.contacto-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.3s forwards;
}

/* Email gigante — outline azul, hover relleno azul, click = mailto */
.contacto-email {
  font-size: clamp(32px, 6vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--blue);
  -webkit-text-stroke: 0;
  display: block;
  transition: opacity 0.3s var(--ease);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.5s forwards;
  cursor: none;
}
.contacto-email:hover { opacity: 0.7; }

/* Celular — OCULTO en desktop, visible solo en mobile */
.contacto-wa-mobile {
  display: none;
  font-size: clamp(22px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--blue);
  -webkit-text-stroke: 0;
  transition: opacity 0.3s var(--ease);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.75s forwards;
  cursor: none;
}
.contacto-wa-mobile:hover { opacity: 0.7; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .contacto-email {
    font-size: clamp(24px, 7vw, 56px);
    font-weight: 400; /* normal */
  }
  .contacto-wa-mobile {
    display: block;
    font-weight: 300; /* light */
  }
}
@media (max-width: 480px) {
  .contacto-email     { font-size: 7.5vw; }
  .contacto-wa-mobile { font-size: 7vw; }
}