/**
 * 10-contact.css — exclusivo de contacto.html (ver __PAGE_EXTRA_HEAD__
 * en build.py). No se enlaza en ninguna otra página del sitio.
 */

.contact-page{
  padding-top:calc(var(--header-h) + 72px);
  padding-bottom:140px;
}
.contact-page__head{ max-width:640px; margin-bottom:56px; }
.contact-page__head h1{ font-size:clamp(38px,5.4vw,64px); margin-top:14px; }
.contact-page__lede{ margin-top:18px; font-size:17px; color:var(--color-stone-dark); }

/* ---- Formulario ---- */
.contact-form{ max-width:760px; }

.contact-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.contact-form__row + .contact-form__row,
.contact-form__row + .field,
.field + .contact-form__row{ margin-top:22px; }

.field{ display:flex; flex-direction:column; }
.field--full{ margin-top:22px; }

.field label{
  font-family:var(--font-body); font-weight:700; font-size:12px;
  letter-spacing:.04em; color:var(--color-ink); margin-bottom:8px;
}

.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--color-ink);
  background:var(--color-bg); border:1px solid var(--color-line); border-radius:var(--radius);
  padding:13px 16px; transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--color-stone); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--color-stone); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:none; border-color:var(--color-brand); box-shadow:0 0 0 3px rgba(175,0,71,.12);
}
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M0 0l5.5 7L11 0z' fill='%238B8377'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:38px;
}
.field textarea{ resize:vertical; min-height:120px; }

.field__required{ color:var(--color-brand); margin-left:2px; }

/* ---- Checkbox de consentimiento ---- */
.contact-form__consent{
  display:flex; align-items:flex-start; gap:10px; margin-top:32px;
}
.contact-form__consent input[type="checkbox"]{
  width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--color-brand); cursor:pointer;
}
.contact-form__consent label{
  font-size:14px; color:var(--color-stone-dark); line-height:1.5; cursor:pointer;
}
.contact-form__consent a{ color:var(--color-brand); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.contact-form__consent a:hover{ color:var(--color-brand-hover); }

.contact-form__submit{ margin-top:28px; }

.contact-form__success{
  display:none; margin-top:20px; padding:16px 18px; max-width:52ch;
  background:var(--color-bg-alt); border:1px solid var(--color-line); border-radius:var(--radius);
  font-size:14px; color:var(--color-ink);
}
.contact-form__success.is-visible{ display:block; }

@media (max-width:640px){
  .contact-page{ padding-top:calc(var(--header-h) + 48px); padding-bottom:96px; }
  .contact-form__row{ grid-template-columns:1fr; gap:0; }
  .field + .field{ margin-top:22px; }
}