/*
 * contacto.css — CSS específico de la página Contacto de NOVE Producciones.
 * Depende de tokens.css (cargado antes en head.php).
 * Artboard 1600pt. FACTOR ÚNICO 1.2208 (px = pt × 1.2208). Tokens en px, 0 overrides globales.
 *
 * Medidas trazables al manifiesto despiece/contacto.json:
 *   Título "Contanos tu idea / Hablemos.": x=403 y=241-420, 82.67pt Bold → --text-hero (101px)
 *   WHATSAPP / INSTAGRAM links: 24pt Sora Regular → --text-body-xl (24px)
 *   "Escribínos." / "Dónde estamos.": 24pt DarkerGrotesque Regular → --text-label-lg (29px)
 *   Email / Address: 18pt Sora SemiBold → --text-body-lg (18px)
 *   "+" instagram: 82.67pt DarkerGrotesque SemiBold → --text-hero (101px)
 *   "seguínos en instagram…": 53pt Bold → --text-display (65px), --lh-display (0.811)
 *   Bloque de contenido: x=403-970pt ancho, alineado a la izquierda dentro del container WIDE.
 *   Content-left en el artboard: x=240pt → offset del bloque: (403-240)=163pt × 1.1511 ≈ 188px.
 *   La imagen de fondo cubre y=0 a ~y=1375pt (NO el footer).
 *
 * Header: fondo oscuro → logo+hamburger van blancos por defecto.
 * NO se aplica filter:brightness(0) (eso es para páginas con fondo claro como servicios/nosotros).
 */


/* ================================================================
   HEADER — fondo oscuro (logo y hamburger blancos por defecto)
   La página tiene fondo de imagen oscura desde el inicio, por lo que
   el header transparente funciona correctamente con los íconos blancos.
   Al hacer scroll el .scrolled ya aplica fondo oscuro semitransparente.
   Sin overrides necesarios — no se toca el header.
   ================================================================ */


/* ================================================================
   SECCIÓN DARK PRINCIPAL
   Fondo: imagen nove-contacto-bg.png (flatlay equipos, tinte rojo/oscuro)
   + overlay oscuro para garantizar legibilidad del texto.
   La imagen cubre solo esta sección; el footer tiene su propio #231F20.
   ================================================================ */
.contacto-dark {
  position: relative;
  background: var(--color-black);
  /* Compensar header fijo */
  padding-top: var(--header-height);
  overflow: hidden;
}

/* Fondo con imagen: position absolute que cubre la sección */
.contacto-dark__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contacto-dark__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Equipo más visible a la derecha; contenido ancado a la izquierda */
  object-position: center center;
  display: block;
}

/* Contenido sobre la imagen */
.contacto-dark__content {
  position: relative;
  z-index: 1;
  padding-bottom: 120px;
}


/* ================================================================
   BLOQUES DE CONTENIDO
   Alineados a la izquierda, dentro del container WIDE (1360px).
   El bloque de contenido arranca a ~188px del content-left (basado en
   offset x=163pt × 1.1511 del manifiesto). Se implementa como padding-left
   sobre el container para mantener alineación con el content-left WIDE.
   ================================================================ */
.contacto-bloque {
  /* Offset horizontal respecto al content-left del container WIDE:
     163pt diseño × 1.1511 ≈ 188px. El container ya tiene padding 40px,
     entonces el bloque agrega 148px más de margen izquierdo. */
  padding-left: 148px;
  max-width: 860px;    /* ampliado para wrapping correcto: necesita 700px contenido + 148px padding = 848px → 860px (título "*Contanos tu idea." 696px, IG línea 2 669px) */
}

/* Separación entre bloques */
.contacto-bloque--contacto {
  padding-top: 80px;
  padding-bottom: 0;
}

.contacto-bloque--instagram {
  padding-top: 120px;
  padding-bottom: 100px;
}


/* ================================================================
   BLOQUE 1 — DATOS DE CONTACTO
   ================================================================ */

/* Título hero: "* Contanos tu idea. / Hablemos."
   82.67pt Bold → --text-hero (101px), --lh-hero-bold (0.81) */
.contacto-titulo {
  font-family: var(--font-heading);
  font-size: var(--text-hero);        /* 101px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero-bold);   /* 0.81 */
  letter-spacing: -0.01em;
  color: var(--color-cream);
  margin-bottom: 72px;
}

/* El * rojo va inline a la primera línea */
.contacto-titulo__star {
  /* color heredado de .text-red (var --color-red) */
}

/* "Contanos tu idea." — inline con el * */
.contacto-titulo__text {
  color: var(--color-cream);
}

/* "Hablemos." — segunda línea, bloque separado */
.contacto-titulo__hablemos {
  display: block;
  color: var(--color-cream);
}

/* Items de contacto: cada bloque (WA / email / geo) */
.contacto-item {
  margin-bottom: 48px;
}

.contacto-item:last-child {
  margin-bottom: 0;
}

/* Links principales: WHATSAPP e INSTAGRAM
   24pt Sora Regular → --text-body-xl (24px)
   Subrayado, color crema/blanco */
.contacto-link {
  font-family: var(--font-body);
  font-size: var(--text-body-xl);    /* 24px */
  font-weight: var(--fw-regular);
  color: var(--color-cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  display: inline-block;
  transition: color var(--transition-base);
  letter-spacing: 0.02em;
}

.contacto-link:hover {
  color: var(--color-red);
}

/* Sub-labels: "Escribínos." / "Dónde estamos."
   24pt DarkerGrotesque Regular → --text-label-lg (29px) */
.contacto-sublabel {
  font-family: var(--font-heading);
  font-size: var(--text-label-lg);   /* 29px */
  font-weight: var(--fw-regular);
  color: var(--color-cream);
  line-height: var(--lh-tight);      /* 1.0 */
  margin-bottom: 8px;
}

/* Email: 18pt Sora SemiBold → --text-body-lg (18px) */
.contacto-email {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);    /* 18px */
  font-weight: var(--fw-semibold);
  color: var(--color-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  display: inline-block;
  transition: color var(--transition-base);
}

.contacto-email:hover {
  color: var(--color-red);
}

/* Dirección geográfica: 18pt Sora SemiBold → --text-body-lg (18px)
   Desde el manifiesto: 2 líneas (698-726pt). */
.contacto-address {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);    /* 18px */
  font-weight: var(--fw-semibold);
  color: var(--color-cream);
  line-height: var(--lh-body);       /* 1.5 */
  max-width: 460px;
}


/* ================================================================
   BLOQUE 2 — INSTAGRAM
   "+" rojo grande + tagline 53pt Bold + link INSTAGRAM
   ================================================================ */

/* "+" rojo: 82.67pt DarkerGrotesque SemiBold → --text-hero (101px) */
.contacto-ig-tagline {
  display: block;
  margin-bottom: 40px;
}

.contacto-ig-tagline__plus {
  font-family: var(--font-heading);
  font-size: var(--text-hero);        /* 101px */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-hero-bold);   /* 0.81 */
  display: block;
  /* color heredado de .text-red */
}

/* Tagline: 53pt DarkerGrotesque Bold → --text-display (65px), --lh-display (0.811) */
.contacto-ig-tagline__text {
  font-family: var(--font-heading);
  font-size: var(--text-display);     /* 65px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);     /* 0.811 */
  color: var(--color-cream);
  display: block;
  letter-spacing: -0.01em;
}

/* Link INSTAGRAM y WHATSAPP — mismos estilos que .contacto-link (sin modificador) */


/* ================================================================
   RESPONSIVE
   ================================================================ */

/* 1440px — reducir el offset lateral del bloque */
@media (max-width: 1440px) {
  .contacto-bloque {
    padding-left: 100px;
  }
}

/* 1366px — ajuste fino */
@media (max-width: 1366px) {
  .contacto-bloque {
    padding-left: 80px;
  }
  .contacto-titulo {
    font-size: 88px;
  }
  .contacto-ig-tagline__plus {
    font-size: 88px;
  }
  .contacto-ig-tagline__text {
    font-size: 56px;
  }
}

/* 1024px tablet landscape */
@media (max-width: 1024px) {
  .contacto-bloque {
    padding-left: 40px;
    max-width: 100%;
  }
  .contacto-titulo {
    font-size: 72px;
    margin-bottom: 56px;
  }
  .contacto-ig-tagline__plus {
    font-size: 72px;
  }
  .contacto-ig-tagline__text {
    font-size: 48px;
  }
}

/* 768px tablet portrait */
@media (max-width: 768px) {
  .contacto-dark__content {
    padding-bottom: 80px;
  }
  .contacto-bloque {
    padding-left: 0;
    max-width: 100%;
  }
  .contacto-bloque--contacto {
    padding-top: 56px;
  }
  .contacto-bloque--instagram {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .contacto-titulo {
    font-size: 56px;
    margin-bottom: 40px;
  }
  .contacto-link {
    font-size: 20px;
  }
  .contacto-sublabel {
    font-size: 22px;
  }
  .contacto-email,
  .contacto-address {
    font-size: var(--text-body-lg);
  }
  .contacto-ig-tagline {
    margin-bottom: 28px;
  }
  .contacto-ig-tagline__plus {
    font-size: 56px;
  }
  .contacto-ig-tagline__text {
    font-size: 36px;
  }
}

/* 390px mobile */
@media (max-width: 390px) {
  .contacto-bloque--contacto {
    padding-top: 40px;
  }
  .contacto-bloque--instagram {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .contacto-titulo {
    font-size: 42px;
    margin-bottom: 32px;
  }
  .contacto-item {
    margin-bottom: 36px;
  }
  .contacto-link {
    font-size: 18px;
  }
  .contacto-sublabel {
    font-size: 20px;
  }
  .contacto-email,
  .contacto-address {
    font-size: 15px;
  }
  .contacto-ig-tagline__plus {
    font-size: 42px;
  }
  .contacto-ig-tagline__text {
    font-size: 28px;
  }
}