/* Amergent Partners — Contacto: office card and the contact form. Loaded after site.css.
   The page has no photo hero, so the nav is solid from the start (body[data-nav-solid]).
   Mobile-first (breakpoints in css/tokens.css): below lg the form comes first and the office
   card follows it; from lg the original two columns (office left, form right) fill the screen. */

.contact {
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + var(--safe-top) + 28px) var(--pad-x) 64px;
  background: var(--color-bg);
}
.contact__grid { flex: 1; align-items: stretch; row-gap: 56px; }

@media (min-width: 1024px) {
  .contact {
    min-height: 100vh; min-height: 100svh;
    padding: calc(var(--nav-h) + var(--safe-top) + clamp(12px, 2.5vh, 32px)) var(--pad-x) clamp(20px, 3vh, 40px);
  }
  .contact__grid { gap: 0 24px; }
}

/* ── Office ─────────────────────────────────────────────────────────── */

.contact__info { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 24px); min-width: 0; }
.contact__photo { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--color-text); }
.contact__media { position: absolute; inset: 0; }
.contact__img { position: absolute; inset: 0; }
/* Phones: the clock sits top-left and "Cómo llegar" spans the bottom. md and xl+: both along the bottom
   (the design). lg, where the photo column is still narrow: the clock goes back to the top. */
.contact__route {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px;
  font-size: var(--fs-15); font-weight: 600; text-decoration: none;
  background: var(--color-text); color: var(--color-bg); transition: background 250ms ease;
}
.contact__route-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact__route-sub { font-size: 12px; font-weight: 400; color: var(--color-neutral-400); }
.contact__clock {
  position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--color-bg); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.contact__clock-dot { display: block; width: 7px; height: 7px; background: var(--color-text); }

.contact__lines {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 12px 24px;
  padding-top: clamp(14px, 2vh, 20px); border-top: 2px solid var(--color-text);
}
.contact__lines a { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 44px; text-decoration: none; color: var(--color-text); }
.contact__k { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.contact__v { font-size: clamp(18px, 0.188vw + 17.3px, 20px); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.contact__v--tel { font-variant-numeric: tabular-nums; }

.contact__hours {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  padding-top: clamp(12px, 1.8vh, 16px); border-top: 1px solid var(--color-neutral-300);
  font-size: var(--fs-14); color: var(--color-neutral-700);
}
.contact__social { display: flex; align-items: center; gap: 8px; }
.contact__social a {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--color-neutral-400); color: var(--color-text);
}

@media (min-width: 480px) {
  .contact__photo { aspect-ratio: 4 / 3; }
}

@media (min-width: 768px) {
  .contact__photo { aspect-ratio: 16 / 9; }
  .contact__route { left: auto; right: 20px; bottom: 20px; justify-content: flex-start; gap: 28px; padding: 14px 18px; }
  .contact__clock { top: auto; left: 20px; bottom: 20px; }
  .contact__lines { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
}

/* lg: the original two columns. Until xl the office column is narrow, so the phone and e-mail stack
   and the clock moves to the top of the photo. */
@media (min-width: 1024px) {
  .contact__info { grid-column: 1 / span 6; grid-row: 1; padding-right: 24px; }
  .contact__photo { flex: 1; aspect-ratio: auto; min-height: 280px; }
  .contact__clock { top: 20px; bottom: auto; }
  .contact__lines { grid-template-columns: minmax(0,1fr); gap: 12px 24px; }
  .contact__social a { width: 40px; height: 40px; }
}

@media (min-width: 1280px) {
  .contact__clock { top: auto; bottom: 20px; }
  .contact__lines { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
}

@media (hover: hover) {
  .contact__route:hover { background: var(--color-neutral-800); color: var(--color-bg); }
  .contact__lines a:hover { color: var(--color-neutral-700); }
  .contact__social a:hover { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
}

/* ── Contact form ───────────────────────────────────────────────────── */

.cf { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cf [hidden] { display: none; }
.cf__intro { display: flex; flex-direction: column; gap: clamp(10px, 1.4vh, 16px); }
.cf__title { margin: 0 0 0 -0.04em; font-size: clamp(34px, 0.845vw + 30.84px, 43px); font-weight: 400; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.cf__lead { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); text-wrap: pretty; }
.cf__lead a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }

/* --cf-gap: vertical rhythm of the form (rows, conditional block). Roomier on touch screens. */
.cf-form { --cf-gap: 20px; display: flex; flex-direction: column; gap: var(--cf-gap); }
.cf-form :is(input, select, textarea) { scroll-margin: calc(var(--nav-h) + var(--safe-top) + 24px) 0 24px; }
.cf-row { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--cf-gap) 24px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf-label { font-size: var(--fs-13); font-weight: 500; color: var(--color-text); }
.cf-label__hint { font-weight: 400; color: var(--color-neutral-700); }
.cf-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cf-count { font-size: 12px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; }

/* 16px text keeps iOS from zooming into the field; 48px tall on touch screens. */
.cf-input {
  display: block; width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--color-neutral-400); border-radius: 0; background: var(--color-bg); outline: none;
  font-family: inherit; font-size: 16px; color: var(--color-text); transition: border-color 200ms ease;
}
.cf-input--area { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.cf-input:focus { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }
.cf-input[aria-invalid="true"] { border: 2px solid var(--color-text); }

.cf-phone {
  display: flex; height: 48px;
  border: 1px solid var(--color-neutral-400); background: var(--color-bg); transition: border-color 200ms ease;
}
.cf-phone:focus-within { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }
.cf-phone__cc { position: relative; flex: none; display: flex; align-items: center; border-right: 1px solid var(--color-neutral-400); }
.cf-phone__cc select {
  height: 100%; padding: 0 34px 0 14px; border: 0; border-radius: 0; background: transparent; outline: none;
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 16px; color: var(--color-text); cursor: pointer;
}
.cf-phone__cc .ic { position: absolute; right: 12px; pointer-events: none; }
.cf-phone input {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; border-radius: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 16px; color: var(--color-text);
}

/* Inline error: "!" square + message. */
.cf-err { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--color-text); }
.cf-err__icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  font-size: 11px; font-weight: 700; background: var(--color-text); color: var(--color-bg);
}

/* Subject selector: four options (two per row on phones), native radios under custom tiles. */
.cf-subject, .cf-funds { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.cf-subject legend { padding: 0 0 4px; }
.cf-funds legend { padding: 0 0 8px; }
.cf-subject__opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.cf-opt input, .cf-fund input, .cf-check input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cf-opt {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  min-height: 56px; padding: 8px 12px;
  border: 1px solid var(--color-neutral-400); background: var(--color-bg); color: var(--color-text);
  font-size: var(--fs-13); line-height: 1.25; cursor: pointer; transition: background 200ms ease, color 200ms ease;
}
.cf-subject.is-invalid .cf-opt { border-color: var(--color-text); }
.cf-opt:has(input:checked) { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.cf-opt__dot { flex: none; display: block; width: 10px; height: 10px; border: 1px solid currentColor; }
.cf-opt:has(input:checked) .cf-opt__dot { background: var(--color-bg); }
.cf-opt:has(input:focus-visible),
.cf-fund:has(input:focus-visible),
.cf-check:has(input:focus-visible) .cf-check__box { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Fields that depend on the subject: rows animate open (0fr → 1fr). */
.cf-cond {
  display: grid; grid-template-rows: 0fr; margin-top: calc(-1 * var(--cf-gap));
  transition: grid-template-rows 200ms ease;
}
.cf-cond.is-open { grid-template-rows: 1fr; }
.cf-cond__clip { overflow: hidden; min-height: 0; }
.cf-cond__inner { padding-top: var(--cf-gap); }
.cf-funds__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-fund {
  display: flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--color-text); background: transparent; color: var(--color-text);
  font-size: var(--fs-15); cursor: pointer;
}
.cf-fund:has(input:checked) { background: var(--color-text); color: var(--color-bg); }
.cf-note {
  margin: 0; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  font-size: var(--fs-14); line-height: 1.55; background: var(--color-surface); color: var(--color-neutral-800); text-wrap: pretty;
}
.cf-note .ic { margin-top: 2px; }

.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* Consent: the whole label is the target; the box aligns with the first line when the text wraps. */
.cf-consent { display: flex; flex-direction: column; gap: 8px; }
.cf-check {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0;
  font-size: var(--fs-15); line-height: 1.5; color: var(--color-text); cursor: pointer;
}
.cf-check a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.cf-check__box {
  flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px;
  border: 1px solid var(--color-text); color: var(--color-bg);
}
.cf-check__box .ic { opacity: 0; stroke-width: 3; }
.cf-check input:checked + .cf-check__box { background: var(--color-text); }
.cf-check input:checked + .cf-check__box .ic { opacity: 1; }

.cf-submit {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  height: 52px; padding: 0 20px; border: 0;
  background: var(--color-text); color: var(--color-bg);
  font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 200ms ease;
}
.cf-submit:disabled { opacity: 0.6; cursor: wait; }

/* Error summary and delivery error. */
.cf-summary { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; border: 2px solid var(--color-text); }
.cf-summary__t { font-size: var(--fs-15); font-weight: 600; }
.cf-summary a {
  align-self: flex-start; display: flex; align-items: center; min-height: 44px;
  font-size: var(--fs-14); color: var(--color-text); text-decoration: underline; text-underline-offset: 3px;
}
.cf-server {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; padding: 20px 24px;
  border: 1px dashed var(--color-neutral-500); font-size: var(--fs-15);
}
.cf-server__retry {
  flex: none; min-height: 44px; padding: 10px 14px; border: 0; background: var(--color-text); color: var(--color-bg);
  font-family: inherit; font-size: var(--fs-14); font-weight: 600; cursor: pointer;
}

/* Success. */
.cf-done { display: flex; flex-direction: column; gap: 24px; padding: clamp(24px, 1.502vw + 18.38px, 40px); border: 2px solid var(--color-text); }
.cf-done__mark { display: block; width: 14px; height: 14px; background: var(--color-text); }
.cf-done__h { margin: 0; font-size: clamp(30px, 0.939vw + 26.48px, 40px); font-weight: 400; line-height: 1.08; letter-spacing: -0.025em; }
.cf-done__h:focus { outline: none; }
.cf-done__h > span { display: block; }
.cf-done__p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); }
/* Underlined text button: 44px tall below lg, the text keeps sitting on its rule. */
.cf-done__again {
  align-self: flex-start; display: inline-flex; align-items: flex-end; min-height: 44px;
  padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--color-text); background: transparent;
  font-family: inherit; font-size: var(--fs-14); font-weight: 600; color: var(--color-text); cursor: pointer;
}

@media (min-width: 768px) {
  .cf-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cf-subject__opts { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* lg: the original desktop form, sized to fit the screen height. */
@media (min-width: 1024px) {
  .cf { grid-column: 7 / span 6; grid-row: 1; gap: clamp(14px, 2.4vh, 32px); }
  .cf__title { font-size: clamp(36px, 4.8vh, 56px); text-wrap: wrap; }
  .cf-form { --cf-gap: clamp(8px, 1.5vh, 20px); }
  .cf-input { height: clamp(40px, 5vh, 44px); }
  .cf-input--area { min-height: clamp(64px, 9vh, 120px); }
  .cf-phone { height: clamp(40px, 5vh, 44px); }
  .cf-phone__cc select { padding: 0 28px 0 10px; font-size: 15px; }
  .cf-phone__cc .ic { right: 10px; }
  .cf-phone input { padding: 0 10px; }
  .cf-opt { min-height: clamp(40px, 5vh, 44px); padding: 6px 12px; }
  .cf-fund { min-height: 0; height: 44px; }
  .cf-check { align-items: center; min-height: 0; padding: 0; }
  .cf-check__box { margin-top: 0; }
  .cf-submit { height: clamp(44px, 6vh, 52px); }
  .cf-summary a { min-height: 0; }
  .cf-server { flex-wrap: nowrap; gap: 24px; }
  .cf-server__retry { min-height: 0; }
  .cf-done__again { min-height: 0; }
}

/* xl: the half-width form has room again for the design's phone-field padding. */
@media (min-width: 1280px) {
  .cf-phone__cc select { padding: 0 34px 0 14px; }
  .cf-phone__cc .ic { right: 12px; }
  .cf-phone input { padding: 0 14px; }
}

@media (hover: hover) {
  .cf-opt:hover { border-color: var(--color-text); }
  .cf-submit:hover { background: var(--color-neutral-800); }
}

@media (prefers-reduced-motion: reduce) {
  .cf-cond, .cf-opt, .cf-input, .cf-phone, .contact__route { transition: none; }
}