/* Contact page (/contact and /es/contacto). The heading block keeps the Wix desktop capture (content column
   x=250..1030 at 1280, i.e. 100px into the 980px stage) and the Wix 320px mobile layout (1 Wix px = 1 --u).
   The form was redesigned on 2026-10-24 in the same field style (thick black borders, soft drop shadow):
   visible labels, an optional topic select, inline errors, a black Send button and clear result messages. */

.ct { min-height: 658px; padding-bottom: 72px; }
.ct-inner {
  margin-left: clamp(0px, 100% - 780px, 100px);
  width: min(780px, 100%);
  padding-top: 99px;
}

.ct-title { font: 700 106px/1.25 var(--font-body); margin-bottom: 12px; }
.ct-lead { font: 400 17px/1.5 var(--font-body); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

@media (prefers-reduced-motion: no-preference) {
  .ct-title, .ct-lead, .ct-form { animation: ct-fade .8s cubic-bezier(.445, .05, .55, .95) both; }
  .ct-form { animation-delay: .12s; }
}
@keyframes ct-fade { from { opacity: 0; } }

/* ---------- Form ---------- */
.ct-form { position: relative; margin-top: 37px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 17px; align-items: start; }
.ct-group { min-width: 0; }
.ct-form > .ct-group { margin-top: 20px; }

.ct-label { display: block; margin-bottom: 7px; font: 600 14px/1.3 var(--font-body); }
.ct-opt { font-weight: 400; color: var(--gray); }

.ct-field {
  display: block; width: 100%; height: 46px; margin: 0;
  padding: 0 12px;
  border: 2px solid #000; border-radius: 0;
  background: #fff; color: #000;
  font: 400 15px/1.4 var(--font-body);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .6);
  -webkit-appearance: none; appearance: none;
  text-overflow: ellipsis;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ct-field::placeholder { color: var(--gray); opacity: 1; }
.ct-field:focus { outline: none; box-shadow: 0 0 0 2px #000, 0 1px 4px 0 rgba(0, 0, 0, .6); }
.ct-message {
  height: 180px; min-height: 120px; max-height: 600px;
  padding: 11px 12px;
  resize: vertical; overflow-y: auto;
}

/* Topic select: the same field with a drawn chevron; the empty choice reads as a placeholder. */
.ct-select { position: relative; }
.ct-select select { padding-right: 44px; cursor: pointer; }
.ct-select select:has(> option[value=""]:checked) { color: var(--gray); }
.ct-select option { color: #000; }
.ct-select::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid #000; border-bottom: 2px solid #000;
  transform: rotate(45deg); pointer-events: none;
}

/* Errors: contact.js writes the text and sets aria-invalid; .was-validated (forms.js) is the fallback. */
.ct-field[aria-invalid="true"], .ct-form.was-validated .ct-field:invalid { border-color: #8b0000; }
.ct-field[aria-invalid="true"]:focus, .ct-form.was-validated .ct-field:invalid:focus { box-shadow: 0 0 0 2px #8b0000, 0 1px 4px 0 rgba(0, 0, 0, .6); }
.ct-error { margin-top: 7px; font: 500 13px/1.4 var(--font-body); color: #8b0000; }
.ct-error:empty { display: none; }

/* Send: black and obviously active; inverts on hover like the site's dark buttons. */
.ct-send {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 52px; margin-top: 26px; padding: 0 16px;
  border: 2px solid #000; border-radius: 0;
  background: #000; color: #fff;
  font: 500 16px/1 var(--font-ui); letter-spacing: .01em; white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.ct-send-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
@media (hover: hover) {
  .ct-send:hover { background: #fff; color: #000; }
  .ct-send:hover .ct-send-icon { transform: translateX(4px); }
}
.ct-send:active { transform: translateY(1px); }
.ct-send:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.ct-send:disabled { background: #000; color: #fff; opacity: .6; cursor: progress; transform: none; }
.ct-send:disabled .ct-send-icon { transform: none; }

/* Result of the submission, under the button. */
.ct-msg {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 16px; padding: 14px 16px;
  border: 2px solid currentColor;
  font: 500 15px/1.45 var(--font-body);
}
.ct-msg[hidden] { display: none; }
.ct-msg-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-ok { color: #000; }
.ct-err { color: #8b0000; }

.ct .form-note { margin-top: 14px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

@media (max-width: 767px) {
  .ct { min-height: calc(536 * var(--u)); padding-bottom: calc(40 * var(--u)); }
  .ct-stage { width: calc(300 * var(--u)); margin-inline: auto; }
  .ct-inner { margin-left: 0; width: 100%; padding-top: calc(37 * var(--u)); }
  .ct-title { font-size: calc(45 * var(--u)); line-height: calc(56.25 * var(--u)); margin-bottom: calc(1 * var(--u)); }
  .ct-lead { font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); }
  .ct-form { margin-top: calc(28 * var(--u)); }
  .ct-row { grid-template-columns: 1fr; row-gap: calc(16 * var(--u)); }
  .ct-form > .ct-group { margin-top: calc(16 * var(--u)); }
  .ct-label { margin-bottom: calc(6 * var(--u)); font-size: calc(13 * var(--u)); }
  .ct-field {
    height: calc(46 * var(--u));
    padding: 0 calc(10 * var(--u));
    border-width: calc(2 * var(--u));
    /* at least 16px so iOS does not zoom into the field on focus */
    font-size: max(16px, calc(14 * var(--u)));
    box-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) 0 rgba(0, 0, 0, .6);
  }
  .ct-message { height: calc(150 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); }
  .ct-select select { padding-right: calc(38 * var(--u)); }
  .ct-select::after { right: calc(15 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(-5 * var(--u)); }
  .ct-error { margin-top: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); }
  .ct-send { height: calc(48 * var(--u)); margin-top: calc(22 * var(--u)); font-size: calc(15 * var(--u)); }
  .ct-send-icon { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .ct-msg { margin-top: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)); gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); }
  .ct-msg-icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
}