/* Fundación César Domicó | Diseño solamente. No cambia el PHP ni el comportamiento del formulario. */
.contact-wrapper, .contact-wrapper * { box-sizing: border-box; }
.contact-wrapper {
  --cf-gold: #b58a35;
  --cf-gold-dark: #785714;
  --cf-ink: #222631;
  --cf-muted: #56606b;
  --cf-line: #e6dfd2;
  color: var(--cf-ink);
  background: radial-gradient(ellipse at 50% 0%, #fff8e7 0%, #fff 55%), #fff;
  padding: clamp(28px, 5vw, 74px) 16px clamp(44px, 7vw, 92px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.55;
}
.contact-wrapper .contact-card {
  max-width: 1040px; margin: 0 auto; overflow: hidden;
  background: #fff; border: 1px solid #ecdfc4;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(36, 32, 24, .10), 0 8px 24px rgba(105, 76, 20, .06);
}
.contact-wrapper .contact-header {
  position: relative; padding: clamp(35px, 6vw, 66px) 24px clamp(26px, 4vw, 42px);
  text-align: center; background: linear-gradient(145deg, #fff, #fffdfa 63%, #fff5df);
  border-top: 5px solid var(--cf-gold);
  border-bottom: 1px solid #eee2cc;
}
.contact-wrapper .eyebrow { font-size: .77rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--cf-gold-dark); }
.contact-wrapper .eyebrow span { padding: 0 7px; }
.contact-wrapper .contact-header h1 {
  margin: 10px 0 13px; font-size: clamp(2.2rem, 5vw, 3.45rem); line-height: 1.15;
  font-weight: 800; letter-spacing: -.035em; color: #20232b;
}
.contact-wrapper .contact-header p { margin: 0 auto; max-width: 690px; color: #4f5560; font-size: clamp(1rem, 2vw, 1.11rem); line-height: 1.8; }
.contact-wrapper .ornament { margin: 23px auto 0; display: flex; gap: 13px; justify-content: center; align-items: center; color: var(--cf-gold); font-size: .88rem; }
.contact-wrapper .ornament span { height: 1px; width: 76px; background: linear-gradient(90deg, transparent, #bf9847); }
.contact-wrapper .ornament span:last-child { transform: rotate(180deg); }
.contact-wrapper #contactForm { padding: clamp(20px, 4vw, 46px); }
.contact-wrapper .contact-form-section {
  padding: clamp(19px, 3vw, 30px); margin: 0 0 23px;
  border: 1px solid #eee5d8; background: #fff;
  border-radius: 16px; box-shadow: 0 7px 22px rgba(24, 29, 38, .035);
}
.contact-wrapper .section-name {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 24px; padding: 0 0 16px; border-bottom: 1px solid #eee8df;
  font-size: clamp(1.15rem, 2.5vw, 1.36rem); color: #252831; font-weight: 750;
}
.contact-wrapper .section-number {
  display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: 11px; color: #60440f; background: #f8edcf; border: 1px solid #e7d29d;
  font-size: .78rem; letter-spacing: .02em;
}
.contact-wrapper .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 22px; }
.contact-wrapper .field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-wrapper .field.full { grid-column: 1 / -1; }
.contact-wrapper .field label { color: #2b3038; font-size: .96rem; font-weight: 700; line-height: 1.45; }
.contact-wrapper .required { color: #9a3b28; font-weight: 800; }
.contact-wrapper .field input,
.contact-wrapper .field select,
.contact-wrapper .field textarea {
  display: block; width: 100%; min-width: 0; padding: 13px 15px; min-height: 52px;
  border: 1.5px solid #cfc9be; border-radius: 11px;
  color: #202631; background: #fff; font: inherit; font-size: 16px; line-height: 1.5;
  box-shadow: 0 2px 4px rgba(15, 20, 27, .025);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-wrapper .field textarea { min-height: 160px; resize: vertical; }
.contact-wrapper .field input::placeholder, .contact-wrapper .field textarea::placeholder { color: #707885; opacity: 1; }
.contact-wrapper .field input:hover, .contact-wrapper .field select:hover, .contact-wrapper .field textarea:hover { border-color: #ad955c; }
.contact-wrapper .field input:focus, .contact-wrapper .field select:focus, .contact-wrapper .field textarea:focus {
  border-color: #ae8232; outline: none; box-shadow: 0 0 0 4px rgba(190, 150, 65, .20); background: #fffefa;
}
.contact-wrapper .field :is(input,select,textarea)[aria-invalid="true"] { border-color: #b63c37; box-shadow: 0 0 0 3px rgba(182,60,55,.10); }
.contact-wrapper .hint { font-size: .84rem; color: #636b75; }
.contact-wrapper .privacy {
  margin: 8px 0 19px; padding: 19px 21px; border-left: 4px solid var(--cf-gold);
  border-radius: 0 11px 11px 0; background: #fcf8ed;
  color: #3d4149; line-height: 1.75; font-size: .94rem;
}
.contact-wrapper .privacy strong { color: #634911; }
.contact-wrapper .checkrow {
  display: flex; align-items: flex-start; gap: 13px;
  background: #fff; padding: 18px 19px; border: 1px solid #e8e0d4; border-radius: 12px;
}
.contact-wrapper .checkrow input { width: 19px; height: 19px; flex: 0 0 19px; margin: 3px 0 0; accent-color: #946e25; cursor: pointer; }
.contact-wrapper .checkrow label { color: #303640; font-size: .94rem; line-height: 1.7; cursor: pointer; }
.contact-wrapper .checkrow a { color: #775211; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contact-wrapper .checkrow a:hover { color: #4a340d; }
.contact-wrapper .actions { margin-top: 30px; text-align: center; }
.contact-wrapper .submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  width: min(100%, 330px); min-height: 56px; border: 1px solid #9d762a;
  border-radius: 12px; padding: 15px 24px;
  background: linear-gradient(120deg, #e8cf8c 0%, #c29a47 49%, #e1c47e 100%);
  color: #28210f; font: inherit; font-size: .96rem; font-weight: 800; letter-spacing: .06em;
  cursor: pointer; box-shadow: 0 10px 24px rgba(149, 106, 30, .21);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.contact-wrapper .submit span { font-size: 1.25rem; }
.contact-wrapper .submit:hover { filter: brightness(1.045); transform: translateY(-2px); box-shadow: 0 13px 28px rgba(149, 106, 30, .28); }
.contact-wrapper .submit:focus-visible { outline: 3px solid #5f471a; outline-offset: 3px; }
.contact-wrapper .submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.contact-wrapper .footnote { margin: 14px 0 0; color: #606773; font-size: .85rem; }
.contact-wrapper .trap { position: absolute!important; left: -10000px!important; width: 1px!important; height: 1px!important; overflow: hidden!important; }
/* Compatible con mensajes de error insertados por JavaScript. */
.contact-wrapper .field-error, .contact-wrapper .error-message { color: #a52620; font-size: .86rem; font-weight: 650; }
@media (max-width: 720px) {
  .contact-wrapper { padding: 20px 12px 50px; }
  .contact-wrapper .contact-card { border-radius: 16px; }
  .contact-wrapper .contact-header { padding: 36px 20px 30px; }
  .contact-wrapper .contact-desktop-break { display: none; }
  .contact-wrapper #contactForm { padding: 18px 14px 25px; }
  .contact-wrapper .contact-form-section { padding: 19px 16px; margin-bottom: 17px; }
  .contact-wrapper .grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .contact-wrapper .section-name { margin-bottom: 18px; }
  .contact-wrapper .privacy { padding: 15px 16px; }
  .contact-wrapper .checkrow { padding: 15px; }
  .contact-wrapper .submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-wrapper .submit, .contact-wrapper .field input, .contact-wrapper .field select, .contact-wrapper .field textarea { transition: none; }
}