/* contact.css */
/* ════ CONTACT ════ */
.contact-hero{background:linear-gradient(150deg,var(--deep),var(--ocean));padding:calc(var(--nav-h) + 4.5rem) 0 5.5rem;text-align:center}
.contact-hero h1{font-family:var(--ff-display);font-size:clamp(2.5rem,5vw,3.9rem);color:#fff;font-weight:700;margin-bottom:1rem}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start}
.contact-details{display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem}
.cdetail{display:flex;gap:1.1rem;align-items:flex-start}
.cdetail-ico{width:48px;height:48px;border-radius:14px;background:var(--foam);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.cdetail-lbl{font-size:.73rem;font-weight:700;color:var(--gray-3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:.2rem}
.cdetail-val{font-weight:700;color:var(--ink);font-size:.95rem}
.cdetail-sub{font-size:.81rem;color:var(--gray-4);margin-top:.1rem}
.contact-form-card{background:var(--white);border-radius:var(--radius-lg);padding:2.8rem;box-shadow:var(--shadow-md)}
.contact-form-card h3{font-family:var(--ff-display);font-size:1.7rem;font-weight:700;color:var(--ink);margin-bottom:.4rem}
.contact-form-card p{color:var(--gray-4);font-size:.87rem;margin-bottom:1.8rem;line-height:1.6}
.cf-success{display:none;background:#eaf5f0;color:#1a7a4a;border-radius:var(--radius-sm);padding:1rem 1.2rem;margin-top:1rem;font-weight:600;font-size:.9rem}


/* ══════════════════════════════════════════════════════
   REDISEÑO RESPONSIVO — Contacto
   ══════════════════════════════════════════════════════ */
.contact-form-card h3{font-size:1.6rem;margin-bottom:.3rem}
.contact-form-card > p{color:var(--gray-4);font-size:.9rem;margin-bottom:1.6rem}
.contact-form-card .btn{width:100%;justify-content:center;padding:1rem;margin-top:.5rem}
.cdetail{align-items:flex-start}
.cdetail:hover .cdetail-ico{transform:scale(1.06)}
.cdetail-ico{transition:.25s}

@media(max-width:1024px){
  .contact-inner{grid-template-columns:1fr;gap:2.5rem}
  .contact-details{order:2}
  .contact-form-card{order:1}
}
@media(max-width:760px){
  .contact-hero{padding-top:calc(var(--nav-h) + 2rem)}
  .contact-hero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .contact-inner{gap:2rem;padding:0 1rem}
  .contact-form-card{padding:1.6rem 1.3rem;border-radius:20px}
  .contact-form-card h3{font-size:1.4rem}
  .contact-details{gap:1rem}
  .cdetail{padding:1rem;background:var(--white);border:1px solid var(--gray-2);border-radius:16px}
}