/* =========================
   CONTACTO
========================= */

.pageContacto {
  background: var(--bg-cream);
}

/* HERO con imagen */
.contactHero {
  position: relative;
  width: 100%;
  height: clamp(560px, 68vh, 780px);
  overflow: hidden;
}

.contactHeroMedia {
  position: absolute;
  inset: 0;
}

.contactHeroMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zona crema con topo sutil (como mockup) */
.contactStage {
  position: relative;
  background: var(--bg-cream);
  padding: 0 48px 64px;
}

.contactStage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/topo-texture.png");
  background-size: 900px auto;
  background-repeat: repeat;
  opacity: 0.07;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Card superpuesta */
.contactCard {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: -190px auto 0; /* overlap exacto estilo mockup */
  background: rgba(247, 245, 240, 0.98);
  border: 1px solid rgba(35, 35, 35, 0.1);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
}

/* Left */
.contactLeft {
  padding: 44px 48px 40px;
}

.contactTitle {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  color: rgba(35, 35, 35, 0.82);
  margin: 0 0 18px;
}

.contactMeta {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  color: rgba(35, 35, 35, 0.7);
  font-family: var(--sans);
  font-size: 12px;
}

.contactMetaRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contactIcon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: rgba(35, 35, 35, 0.62);
}

.contactIcon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Form */
.contactForm {
  margin-top: 8px;
}

.formGrid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin-bottom: 14px;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid rgba(35, 35, 35, 0.14);
  background: transparent;
  color: rgba(35, 35, 35, 0.78);
  font-family: var(--sans);
  font-size: 12px;
  padding: 10px 12px;
  outline: none;
}

.field input {
  height: 38px;
}

.field textarea {
  min-height: 140px;
  resize: none;
  padding-top: 12px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(35, 35, 35, 0.38);
}

.fieldFull {
  display: block;
  margin-bottom: 14px;
}

.contactBtn {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(35, 35, 35, 0.12);
  background: #cfc7ba;
  color: rgba(35, 35, 35, 0.78);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.contactBtn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.formStatus {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(35, 35, 35, 0.66);
  display: none;
}

.formStatus.isOn {
  display: block;
}

/* Right map */
.contactRight {
  border-left: 1px solid rgba(35, 35, 35, 0.1);
  background: rgba(255, 255, 255, 0.25);
}

.contactMap {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 980px) {
  .contactStage {
    padding: 0 22px 54px;
  }

  .contactCard {
    margin-top: -160px;
    grid-template-columns: 1fr;
  }

  .contactRight {
    border-left: 0;
    border-top: 1px solid rgba(35, 35, 35, 0.1);
  }

  .contactMap {
    min-height: 280px;
  }
}

@media (max-width: 640px) {
  .contactLeft {
    padding: 30px 22px 26px;
  }

  .formGrid2 {
    grid-template-columns: 1fr;
  }
}
.contactMapFrame {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  display: block;
  filter: saturate(0.9) contrast(0.95); /* opcional, para acercarlo al look del mockup */
}
/* =========================
   CONTACTO — NAV como Home (transparente)
========================= */

.pageContacto .nav {
  background: transparent !important;
}

/* cuando scrolleás: blur + tint suave (igual feeling que home) */
.pageContacto .nav.isScrolled {
  background: rgba(239, 236, 230, 0.55); /* ajustable */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* opcional: si al scrollear querés que el texto pase a oscuro (en crema) */
.pageContacto .nav.isScrolled,
.pageContacto .nav.isScrolled a {
  color: var(--text-dark);
}
/* CONTACTO — hacer que el hero suba detrás del header */
.pageContacto main {
  padding-top: 0 !important; /* clave: saca el offset global del main */
}

/* aseguro header/nav sin fondo */
.pageContacto .header,
.pageContacto .nav {
  background: transparent !important;
}

/* por si tenés un overlay en pseudo-elementos en header/nav */
.pageContacto .header::before,
.pageContacto .header::after,
.pageContacto .nav::before,
.pageContacto .nav::after {
  content: none !important;
  display: none !important;
}
/* CONTACTO — nav siempre blanco (también scrolleado) */
.pageContacto .nav,
.pageContacto .nav a,
.pageContacto .nav .navLinks a {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* si tu nav tiene underline/border/indicador, también en blanco */
.pageContacto .nav a::after {
  background: rgba(255, 255, 255, 0.75) !important;
}

/* mantener blur/tint pero sin cambiar color de texto */
.pageContacto .nav.isScrolled,
.pageContacto .nav.isScrolled a {
  color: rgba(255, 255, 255, 0.92) !important;
}
/* =========================
   NAV Mobile — underline negro (sin depender de active)
========================= */
@media (max-width: 768px) {
  /* cuando el menú está abierto */
  .navLinks.isOpen a {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    text-decoration: none !important;
  }

  /* ✅ Recolorear CUALQUIER pseudo underline que uses */
  .navLinks.isOpen a::after,
  .navLinks.isOpen a::before {
    background-color: #111 !important;
    border-color: #111 !important;
    color: #111 !important;
  }

  /* ✅ Si el underline es por border-bottom */
  .navLinks.isOpen a {
    border-bottom-color: #111 !important;
  }

  /* ✅ Si el underline es un elemento real adentro (span/div) */
  .navLinks.isOpen a span,
  .navLinks.isOpen a i,
  .navLinks.isOpen a em,
  .navLinks.isOpen a strong {
    color: #111 !important;
  }
}