/* ==========================================================================
   Thinkhub — /hablemos  (frame 273:16059)
   Contacto en oscuro arriba, ubicaciones y dots en claro abajo.
   Medidas sacadas del .fig, no del export CSS.
   ========================================================================== */

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

/* --- Contacto -------------------------------------------------------------
   El frame arranca en y=0 y el navbar va **encima** (position: fixed, fondo
   al 1%). Por eso el padding-top es el del archivo tal cual: sumarle
   --navbar-h dejaba 90px de aire de más. */
.contacto {
  padding-block: var(--contacto-pt) var(--contacto-pb);
  background: var(--c-dark);
  color: var(--c-light);
}

/* 618 + 120 + 590 = 1328, el ancho útil del frame desktop. */
.contacto__grid {
  display: grid;
  grid-template-columns: 618fr 590fr;
  gap: var(--contacto-gap);
}

/* El título y el CTA de mail son las dos puntas de la columna izquierda:
   el contenedor es SPACE_BETWEEN y su alto lo fija el formulario de al lado.
   En tablet y mobile la columna no se estira, así que manda el gap. */
.contacto__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--intro-gap);
}

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

/* El texto de la pastilla va en #E8E9DD, no en blanco puro (está en el
   symbolOverride de la instancia, no en el componente). */
.contacto__cta { align-self: flex-start; color: var(--c-light); }

/* --- Formulario -----------------------------------------------------------
   No hay label y campo por separado: lo que se ve ("Nombre*") es el
   placeholder, apoyado sobre la línea. El <label> va oculto para lectores.
   Sin backend todavía: el form no tiene action. Ver README. */
.form { display: flex; flex-direction: column; gap: var(--form-gap); }

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

.field {
  display: flex;
  align-items: flex-end;
  height: var(--field-h-sm);
  border-bottom: 1px solid var(--c-light);
}

/* La línea de Nombre/Apellido es 8px más alta que la de Correo/Empresa.
   Así está en el archivo; en mobile las dos miden lo mismo. */
.form__row--tall .field { height: var(--field-h); }

.field__input {
  width: 100%;
  font: inherit;
  font-size: var(--fs-field);
  line-height: var(--lh-field);
  color: var(--c-light);
  background: transparent;
  border: 0;
  padding: 0 0 var(--field-pb);
  transition: border-color var(--dur) var(--ease);
}

.field__input::placeholder { color: var(--c-light); opacity: 1; }

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

/* El mensaje es una caja alta con el texto arrancando arriba y ~100px de
   espacio libre debajo. `min-height` en vez de `height` para que el resize
   del textarea arrastre a la caja. */
.field--msg {
  align-items: stretch;
  height: auto;
  min-height: var(--msg-h);
  padding-top: var(--msg-pt);
}

.field__input--area {
  height: calc(var(--msg-h) - var(--msg-pt));
  padding-bottom: 0;
  resize: vertical;
}

/* El botón del form es un <button>, no un <a>: hereda .btn pero necesita
   quedar alineado a la izquierda y no estirarse.
   Va a 42px, no a los 38 que da el padding de .btn: el componente mide 42 y
   sólo la instancia del navbar lo baja a 38. Acá encima queda al lado del CTA
   de mail, que ya es de 42 — con 38 se notaba el desnivel. */
.form__submit {
  align-self: flex-start;
  min-height: 42px;
  border: 0;
}

/* --- Ubicaciones ----------------------------------------------------------
   Los laterales de esta sección no siguen a --gutter: en tablet el archivo
   usa 56px mientras el resto del frame usa 36px. */
.locations {
  position: relative;
  overflow: hidden;                  /* la esfera sangra fuera del frame */
  padding-block: var(--locations-pt) var(--locations-pb);
  padding-inline: var(--locations-side);
}

/* 484 + 100 + 744 = 1328. La lista ocupa 654 de esos 744: el resto es aire,
   igual que en el archivo. */
.locations__grid {
  position: relative;
  display: grid;
  grid-template-columns: 484fr 744fr;
  gap: var(--locations-gap);
  align-items: start;
}

/* Esfera decorativa: círculo suelto, detrás de todo. Es el globo procedural
   de Juan (canvas de puntos, geometría real vía procedural-globe.js) en vez
   del video que traía el programador. Sin disco de fondo: el círculo lo
   arma el propio globo con sus puntos, sobre el fondo claro de la sección. */
.locations__world {
  position: absolute;
  left: var(--world-x);
  top: var(--world-y);
  z-index: 0;
  width: var(--world-size);
  height: var(--world-size);
  overflow: hidden;
  border-radius: 50%;
  color: #B28CFF;
  pointer-events: none;
}

.locations__world .globe-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.locations__text,
.locations__list { position: relative; z-index: 1; }

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

.locations__list {
  display: flex;
  flex-direction: column;
  gap: var(--places-gap);
}

/* Dirección a la izquierda en su propia columna, ciudad a la derecha, ambas
   arrancando en la misma línea. En mobile se apilan. */
.place {
  display: grid;
  grid-template-columns: var(--addr-w) 1fr;
  gap: var(--sp-8);
  align-items: start;
}

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

.place__city {
  margin: 0;
  font-size: var(--fs-city);
  line-height: var(--lh-city);
  font-weight: var(--fw-medium);     /* Aeonik Medium, no Bold */
  letter-spacing: 0;
}

/* --- Foto de cada oficina, siguiendo al puntero ----------------------------
   El diseño trae un frame de 260×368 por ciudad. Acá se dibuja `fixed` y la
   persigue el mouse: motion.js le escribe `translate` cuadro a cuadro y le
   pone `.is-on` al entrar. Sólo el fade y la escala van en CSS — la posición
   no lleva transición, la suaviza el lerp del JS.

   `position: fixed` y no `absolute` a propósito: el puntero se mide en
   coordenadas de viewport, así no hay que restar el scroll en cada cuadro.
   El precio es que cualquier ancestro con `transform`/`translate`/`filter`
   se vuelve su contenedor y rompe la cuenta — por eso las fotos cuelgan de la
   sección y no del <li>, que lleva el `translate` del revelado.

   Contenedor sin caja: todo lo que tiene adentro es `fixed`, así que no ocupa
   lugar en el flujo de la sección. */
.locations__photos { display: contents; }

.place__photo {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;                       /* debajo del navbar (100) */
  width: var(--photo-w);
  height: var(--photo-h);
  max-width: none;
  object-fit: cover;
  opacity: 0;
  scale: 0.92;
  pointer-events: none;
  will-change: translate;
  transition: opacity var(--dur) var(--ease), scale var(--dur) var(--ease);
}

.place__photo.is-on { opacity: 1; scale: 1; }

/* Sin puntero fino no hay hover que valga: en touch la foto no existe. */
@media (hover: none), (pointer: coarse) {
  .place__photo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .place__photo { scale: 1; transition: opacity var(--dur) var(--ease); }
}

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

@media (max-width: 1100px) {
  /* Título arriba, formulario debajo a todo el ancho. */
  .contacto__grid { grid-template-columns: 1fr; }
  .locations__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; gap: var(--form-gap); }
  .form__row--tall .field { height: var(--field-h-sm); }
  /* En mobile el botón va a todo el ancho y cuelga de la sección, no del
     formulario: lo separan 64px en vez de los 20 del resto del form. */
  .form__submit { align-self: stretch; margin-top: calc(64px - var(--form-gap)); }

  .place { grid-template-columns: 1fr; }
}