/* ==========================================================================
   Thinkhub — /hablemos  (frame 273:16059)
   Contacto en oscuro arriba, ubicaciones y dots en claro abajo.
   ========================================================================== */

.page-hablemos { background: var(--c-light); color: var(--c-dark); }

/* --- Contacto ------------------------------------------------------------- */
.contacto {
  padding-block: var(--contacto-pt) var(--sp-100);
  padding-top: calc(var(--navbar-h) + var(--contacto-pt));
  background: var(--c-dark);
  color: var(--c-light);
}

.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-120);
  align-items: start;
}

.contacto__title {
  margin: 0;
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

/* --- Formulario -----------------------------------------------------------
   El diseño sólo define las etiquetas; los campos son línea simple. */
.form { display: flex; flex-direction: column; gap: var(--sp-36); }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-36); }

.field { display: flex; flex-direction: column; gap: var(--sp-16); }

.field__label {
  font-size: var(--fs-paragraph-xs);
  line-height: var(--lh-paragraph-xs);
  color: var(--c-light);
}

.field__input {
  font: inherit;
  font-size: var(--fs-paragraph-xs);
  color: var(--c-light);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(232, 233, 221, 0.35);
  padding: 0 0 var(--sp-16);
  transition: border-color var(--dur) var(--ease);
}

.field__input--area { resize: vertical; min-height: 96px; }

.field__input:focus-visible {
  outline: none;
  border-bottom-color: var(--c-orange);
}

/* El botón del form es un <button>, no un <a>: hereda .btn pero necesita
   quedar alineado a la izquierda y no estirarse. */
.form__submit { align-self: flex-start; border: 0; }

/* --- Ubicaciones ---------------------------------------------------------- */
.locations { padding-block: var(--locations-pt); }

.locations__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-100);
  align-items: start;
}

.locations__intro { display: flex; flex-direction: column; gap: var(--sp-36); }

.locations__map { width: 100%; height: auto; }

.locations__text {
  margin: 0;
  font-size: var(--fs-paragraph-m);
  line-height: var(--lh-paragraph-m);
}

.locations__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-72) var(--sp-36);
}

.place { display: flex; flex-direction: column; gap: var(--sp-16); }

.place__addr {
  font-size: var(--fs-paragraph-xs);
  line-height: var(--lh-paragraph-xs);
}

.place__city {
  margin: 0;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .contacto__grid { grid-template-columns: 1fr; gap: var(--sp-56); }
  .locations__grid { grid-template-columns: 1fr; gap: var(--sp-56); }
}

@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; gap: var(--sp-36); }
  .locations__list { grid-template-columns: 1fr; gap: var(--sp-56); }
}