/* ================================================================
   assets/css/contacto.css
   Página de contacto: datos, formulario y confirmación.
   (generado desde contacto.php)
   ================================================================ */

/* ── CONTACTO ─────────────────────────────────────────────────── */
.contact-section{background:#fff}
.page-banner-sub{max-width:46rem;margin-top:1rem;color:var(--muted);font-size:.9375rem;line-height:1.75}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}

.contact-lead{margin:1.25rem 0 2rem;color:var(--muted);font-size:.9375rem;line-height:1.78;max-width:34rem}

.contact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.25rem}
.contact-item{display:flex;gap:1rem;align-items:flex-start}
.contact-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
}
.contact-item-label{
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.2rem;
}
.contact-item-value{font-size:.9375rem;color:var(--ink);line-height:1.5;word-break:break-word}
a.contact-item-value{border-bottom:1px solid transparent;transition:border-color .18s ease}
a.contact-item-value:hover{border-bottom-color:currentColor}

.contact-social{display:flex;gap:.6rem;margin-top:2rem}

/* Formulario */
.contact-form-wrap{
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2.5rem);
}
.contact-form{display:flex;flex-direction:column;gap:1.15rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.form-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.form-field label{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.form-field label span{color:var(--muted)}
.form-field .form-opt{text-transform:none;letter-spacing:0;font-weight:400}

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form select,
.contact-form textarea{
  width:100%;padding:.85rem 1rem;font:inherit;font-size:.9375rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--tr),box-shadow var(--tr);
}
.contact-form textarea{resize:vertical;min-height:130px;line-height:1.7}
.contact-form select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23111' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.08);
}
.contact-form .has-error input,.contact-form .has-error textarea{border-color:var(--error)}
.form-error{font-size:.75rem;color:var(--error)}

.form-alert{
  padding:.9rem 1.1rem;border-radius:var(--r);font-size:.875rem;
  background:rgba(122,32,32,.06);color:var(--error);border:1px solid rgba(122,32,32,.2);
  margin-bottom:1.25rem;
}
.form-note{font-size:.75rem;color:var(--muted);text-align:center;line-height:1.6}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

.contact-success{text-align:center;padding:1.5rem 0}
.contact-success-icon{
  width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:1.25rem;
}
.contact-success-title{font-family:var(--ff-serif);font-size:1.5rem;font-weight:400;margin-bottom:.75rem;letter-spacing:-.01em}
.contact-success p{color:var(--muted);font-size:.9375rem;line-height:1.75;max-width:26rem;margin:0 auto 1.75rem}
.contact-success-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .form-row{grid-template-columns:1fr}
  .contact-success-actions{flex-direction:column;align-items:stretch}
}