/* ==========================================================================
   CONTACTO — estilos de página
   ========================================================================== */
.contact-hero{
  padding:150px 0 60px;
  background:var(--paper);
}
.contact-hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); margin-top:18px; line-height:1.06; }
.contact-hero p{ margin-top:20px; max-width:52ch; color:var(--text-muted); font-size:1.05rem; }

.contact-section{ padding-top:20px; }
.contact-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:start; }

.contact-form-wrap{ position:relative; }
#contact-form{ display:flex; flex-direction:column; gap:22px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cf-field label{ display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); margin-bottom:9px; }
.cf-field input, .cf-field textarea{
  width:100%; padding:14px 16px; border-radius:10px;
  border:1px solid var(--paper-3); background:var(--paper-4);
  font-family:var(--font-body); font-size:.94rem; color:var(--text-dark);
  transition:border-color .3s, box-shadow .3s, background .3s;
  resize:vertical;
}
.cf-field input:focus, .cf-field textarea:focus{ outline:none; border-color:var(--gold); background:#FFFFFF; box-shadow:0 0 0 4px rgba(217,119,6,.12); }
.cf-error{ display:none; margin-top:7px; font-size:.78rem; color:#B14A3C; }
.cf-field.has-error input{ border-color:#B14A3C; }
.cf-field.has-error .cf-error{ display:block; }

.cf-pills{ display:flex; flex-wrap:wrap; gap:9px; }
.cf-pills button{
  padding:10px 16px; border-radius:100px; border:1px solid var(--paper-3); background:var(--paper-4);
  font-size:.84rem; color:var(--text-dark); transition:all .3s; cursor:pointer;
}
.cf-pills button.is-active{ background:var(--text-dark); border-color:var(--text-dark); color:#FFFFFF; font-weight:600; }

#cf-submit{ align-self:flex-start; margin-top:8px; }
#cf-submit:disabled{ opacity:.6; cursor:default; }

.cf-success{
  display:none;
  flex-direction:column; align-items:flex-start; gap:14px;
  background:var(--paper-2); border:1px solid var(--paper-3); border-radius:var(--radius-m);
  padding:40px;
}
.cf-success.is-visible{ display:flex; animation:cfIn .6s var(--ease); }
@keyframes cfIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.cf-success svg{ width:44px; height:44px; }
.cf-success h3{ font-size:1.4rem; }
.cf-success p{ color:var(--text-muted); max-width:44ch; }

.contact-info{ display:flex; flex-direction:column; gap:26px; position:sticky; top:110px; }
.ci-block{ background:var(--paper-2); border:1px solid var(--paper-3); border-radius:var(--radius-m); padding:28px; }
.ci-block h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; }
.ci-link{ display:block; font-family:var(--font-display); font-size:1.2rem; color:var(--pine); margin-bottom:10px; }
.ci-block p{ color:var(--text-muted); font-size:.9rem; }
.ci-steps{ display:flex; flex-direction:column; gap:16px; }
.ci-steps li{ display:flex; gap:14px; font-size:.88rem; color:var(--text-dark); }
.ci-steps span{ font-family:var(--font-mono); color:var(--gold); font-size:.8rem; flex-shrink:0; }
.ci-block--stat{ background:var(--ink); border-color:var(--ink); text-align:left; }
.ci-block--stat strong{ display:block; font-family:var(--font-display); font-size:2.1rem; color:var(--gold); }
.ci-block--stat small{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-light-muted); }

@media (max-width:980px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-info{ position:static; }
}
@media (max-width:600px){
  .cf-row{ grid-template-columns:1fr; }
}

/* ---------------- FAQ ---------------- */
.faq{ display:flex; flex-direction:column; border-top:1px solid var(--paper-3); }
.faq-item{ border-bottom:1px solid var(--paper-3); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:none; text-align:left;
  padding:24px 4px; font-family:var(--font-display); font-size:1.08rem; color:var(--text-dark);
}
.faq-q span{ font-family:var(--font-mono); font-size:1.3rem; color:var(--gold); transition:transform .35s var(--ease); flex-shrink:0; margin-left:20px; }
.faq-item.is-open .faq-q span{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-item.is-open .faq-a{ max-height:200px; }
.faq-a p{ padding:0 4px 24px; color:var(--text-muted); max-width:64ch; font-size:.94rem; }