/* ============================================================
   BARNES Buenos Aires — Contacto (contacto.php), 2026-07-23.
   Fiel a Demo-Contacto_v2.pdf.

   [1] .contacto-hero*    — hero "Contacto", sin subtítulo ni botón (a diferencia de Tasar).
   [2] .contacto-oficina* — "OFICINA BUENOS AIRES" + 3 filas (tel/mail/dirección) con divisores.
   [3] .contacto-form-*   — "Contáctenos" + form (componente compartido .barnes-form), box crema
                            SIN borde (a diferencia del box blanco CON borde de Tasar).
   [4] .contacto-mapa*    — imagen full-width.
   ============================================================ */

/* ===================== [1] HERO ===================== */
/* Rect visible (0,0)-(1980,713.68)pt → 1920×692px@1920. Solo H1 "Contacto" centrado. */
.contacto-hero {
    position: relative;
    min-height: clamp(360px, 36vw, 692px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--c-hero-bg);
    overflow: hidden;
    padding: calc(var(--header-h) + 28px) var(--gutter) clamp(34px, 4vw, 56px);
}
.contacto-hero__media { position: absolute; inset: 0; z-index: 0; }
.contacto-hero__img { width: 100%; height: 100%; object-fit: cover; }
.contacto-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.20) 45%, rgba(0,0,0,.40) 100%);
}
.contacto-hero__content { position: relative; z-index: 2; }
.contacto-hero__title {
    color: var(--c-on-dark);
    font-size: var(--fs-hero);
    line-height: var(--lh-hero);
    letter-spacing: .015em;
    text-shadow: 0 2px 18px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
}

/* ===================== [2] OFICINA BUENOS AIRES ===================== */
/* Columna ~968px centrada (misma columna que el form box de [3]). Kicker 24px rojo
   IZQUIERDA (no centrado). 3 filas ícono+dato con divisores finos. */
.contacto-oficina { padding: var(--section-y) var(--gutter) 0; }
.contacto-oficina__inner { max-width: 968px; margin-inline: auto; }
.contacto-oficina__kicker {
    font-family: var(--ff-display); font-size: var(--fs-card-title); line-height: var(--lh-card-title);
    color: var(--c-accent);
    text-transform: uppercase; letter-spacing: .03em;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--c-line);
}
.contacto-oficina__row {
    display: flex; align-items: center; gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--c-line);
}
.contacto-oficina__row:last-child { border-bottom: 1px solid var(--c-line); }
.contacto-oficina__icon {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--c-ink); color: var(--c-bg);
}
.contacto-oficina__row--dir .contacto-oficina__icon { background: transparent; color: var(--c-ink); }
.contacto-oficina__text {
    font-family: var(--ff-body); color: var(--c-ink);
}
.contacto-oficina__row--tel .contacto-oficina__text { font-size: var(--fs-h4); }
.contacto-oficina__row--mail .contacto-oficina__text,
.contacto-oficina__row--dir .contacto-oficina__text { font-size: var(--fs-body); }
.contacto-oficina__text a { color: inherit; }
.contacto-oficina__text a:hover { color: var(--c-accent); }
.contacto-oficina__text p { line-height: 1.5; }

/* ===================== [3] CONTÁCTENOS + FORM ===================== */
/* Box crema SIN borde (fill-only en el PDF, a diferencia del box de Tasar que sí tiene
   stroke) conteniendo H2 24px + form. Sin subtítulo (a diferencia de Tasar). */
.contacto-form-section { padding: clamp(48px, 6vw, 80px) var(--gutter); }
.contacto-form-box {
    max-width: 993px;
    margin-inline: auto;
    background: var(--c-bg-alt);
    border-radius: 8px;
    padding: clamp(28px, 4vw, 48px);
}
.contacto-form-box__title {
    font-family: var(--ff-display); font-size: var(--fs-card-title); line-height: var(--lh-card-title);
    color: var(--c-accent);
    text-align: center;
    margin-bottom: 30px;
}
/* EN-only (doc master "Contact our team" body — sin equivalente en el comp ES, ver lang/en.php). */
.contacto-form-box__subtitle {
    font-family: var(--ff-body); font-size: var(--fs-body); color: var(--c-ink);
    text-align: center;
    max-width: 720px;
    margin: 0 auto 30px;
}
.contacto-form-box .barnes-form { margin-inline: auto; }
/* Delta medido vs Tasar: en Contacto el botón ENVIAR queda CENTRADO dentro del box (bbox
   897-1021 de 994 de ancho, centro casi exacto); en Tasar queda alineado a la izquierda (mismo
   x que "Nombre y Apellido"). Mismo componente .barnes-form, override scoped por página. */
.contacto-form-box .barnes-form__foot { justify-content: center; }
.contacto-form-section__note {
    max-width: 993px;
    margin: 16px auto 0;
    font-family: var(--ff-body); font-size: var(--fs-small); color: #818181;
}

/* ===================== [4] MAPA ===================== */
/* Interactivo (Leaflet, self-hosted) — Ronda visual 28-jul, 2/2. Swap a futuro embed
   oficial HQ: tocar solo includes/contacto-map.php. */
.contacto-mapa { line-height: 0; }
.contacto-mapa img { width: 100%; height: auto; display: block; }

/* Mismo alto relativo que la imagen estática que reemplaza (1920×692 nativo, ver comentario
   de arriba del bloque hero). */
.contacto-mapa__leaflet {
    width: 100%;
    aspect-ratio: 1920 / 692;
    background: #eef1f2;
}
.contacto-mapa__leaflet .leaflet-container { width: 100%; height: 100%; font-family: var(--ff-body); }

/* Estética B/N del comp: grayscale sobre las tiles (no sobre el marker/popup). */
.contacto-mapa__leaflet .leaflet-tile { filter: grayscale(1) contrast(0.9); }

/* Roundel rojo compacto (~44px, como el comp): círculo + "B" en texto real (Bauer Bodoni
   blanca), NO imagen. FIX 2026-07-28: la 1a versión ponía el seal.png
   del proyecto (520×520) adentro con width/height:34px por clase — leaflet.css trae
   ".leaflet-container .leaflet-marker-pane img{width:auto;max-width:none!important}"
   (protege los tiles de resets del host), especificidad (0,2,1) > la de ".contacto-map-pin__seal"
   sola (0,1,0) → siempre gana leaflet.css sea cual sea el orden de carga, y el <img> renderizaba
   a tamaño natural (520px), tapando el mapa entero. Un <span> de texto no lo sufre (esa regla
   solo apunta a "img" dentro del marker pane) — más robusto a futuros cambios de Leaflet que
   forzar !important contra un selector de la librería. */
.contacto-map-pin {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--c-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.contacto-map-pin__b {
    font-family: var(--ff-display);
    font-size: 22px;
    line-height: 1;
    color: #fff;
    transform: translateY(-1px); /* óptico: Bauer Bodoni deja algo de aire debajo del glifo */
}

@media (max-width: 640px) {
    .contacto-oficina__row { align-items: flex-start; }
}