/* ============================================================
   CONTACTO PAGE (contacto.html) — page-specific layout
   Load AFTER styles/main.css and styles/home.css. Reuses the
   navbar, footer, .section, .field/.input, button and typography
   helpers; this file only carries the contacto-specific blocks.
   Consumes design tokens only; no raw hex/px values except
   layout-only proportions. Mobile breakpoint: 768px.
   ============================================================ */

/* ============================================================
   MOBILE NAVBAR — this page has no hero photo, so the transparent
   .hero__nav exists only to carry the shared mobile bar + hamburger
   menu (styled in home.css under <=768px). Hide it on desktop, where
   the solid navbar is used instead.
   ============================================================ */
@media (min-width: 769px) {
  .hero__nav { display: none; }
}

/* ============================================================
   LAYOUT — form column on the left, contact details on the right.
   The left column is a touch wider to hold the form; a generous
   gutter separates the two.
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 583fr) minmax(0, 505fr);
  gap: calc(var(--space-24) * 4);
  align-items: start;
}

/* Shared small uppercase eyebrow above each column
   ("CONTACTO" / "DATOS DE CONTACTO"). */
.contact-eyebrow {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* ============================================================
   LEFT COLUMN — intro + form
   ============================================================ */
.contact-title {
  font-weight: var(--font-weight-medium) !important;
  margin-top: var(--space-16);
  margin-bottom: calc(var(--space-24) * 1.5);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Uppercase field labels, matching the reference. */
.contact-form .field__label {
  font-weight: var(--font-weight-medium) !important;
  color: #666666;
}

/* Teléfono + Fecha share a row on desktop. */
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}

.contact-form__textarea {
  min-height: 150px;
  resize: vertical;
}

/* "Enviar" pinned to the right edge of the form. */
.contact-form__actions {
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   RIGHT COLUMN — contact details + colaboración

   The column pins while the taller form column scrolls past it. The
   travel is the slack in the row — the form's height minus this
   column's — so align-items: start on .contact-layout is what leaves
   that slack rather than stretching this column to match.
   ============================================================ */
.contact-info-col {
  position: sticky;
  top: calc(var(--space-24) * 4);   /* clears the solid navbar */
}

.contact-list {
  list-style: none;
  margin: var(--space-24) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

/* Hairline-bordered square holding the channel icon. */
.contact-item__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-item__label {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: #262626;
}

.contact-item__value {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-book);
  color: #666666;
  text-decoration: none;
  transition: color 0.2s ease;
}
.contact-item__value:hover { color: var(--color-text); }

/* Divider between the details and the colaboración block. */
.contact-divider {
  margin-block: calc(var(--space-24) * 2);
}

.collab__title { margin-bottom: var(--space-16); color: #262626; }

.collab__lead {
  color: #666666;
}

/* "Ver más" aligned to the right of its column. */
.collab__action {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(var(--space-24) * 1.5);
}

/* ============================================================
   RESPONSIVE  (<= 768px)
   Columns stack: form first, details below.
   ============================================================ */
@media (max-width: 768px) {
  /* Mobile navbar: like the servicios page, this bar sits over a light
     surface (no dark photo hero), so the shared white logo + white
     hamburger would be invisible. Give the bar a solid white surface and
     flip the marks to dark. The open-menu overlay is still handled by
     home.css. */
  body:not(.is-menu-open) .hero__nav {
    background-color: var(--color-grey-light);
  }
  body:not(.is-menu-open) .hero__nav .navbar__brand { mix-blend-mode: normal; }
  body:not(.is-menu-open) .hero__nav .logo-img { filter: invert(1); }
  body:not(.is-menu-open) .nav-toggle__bar { background-color: var(--color-black); }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: calc(var(--space-24) * 2);
  }

  /* Stacked: there is no second column to scroll past, so the details
     just follow the form. */
  .contact-info-col {
    position: static;
  }

  /* Teléfono + Fecha stay side-by-side to match the form layout. */
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  .contact-eyebrow { font-size: 14px; }
  .contact-title { font-size: 36px; }
  .field__label { font-size: 14px; text-transform: uppercase; }
  .contact-item__label { font-size: 14px; }
  .contact-item__value { font-size: 14px; }
  .collab__action { justify-content: start }
}