/* =====================================================================
   COSTA DE LA LUZ · Estilos de CONTACTO  (css/contacto.css)
   ===================================================================== */
.contacto-content { padding: clamp(3rem, 6vw, 4.5rem) 0 5rem; background: var(--sand-soft); }
.contacto-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: start; }

/* Info */
.contacto-info h2 { font-size: 1.7rem; margin-bottom: 1rem; }
.contacto-info > p { margin-bottom: 1.4rem; line-height: 1.7; }
.contacto-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.contacto-list li { display: flex; align-items: flex-start; gap: .8rem; line-height: 1.55; color: #3a4856; }
.contacto-list i { color: var(--teal); margin-top: .25em; width: 20px; text-align: center; flex-shrink: 0; }
.contacto-direct {
  display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--sh-sm);
}
.contacto-direct > i { font-size: 1.6rem; color: var(--primary); }
.contacto-direct span { display: block; font-size: .82rem; color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.contacto-direct a { font-weight: 700; color: var(--navy); word-break: break-all; }
.contacto-direct a:hover { color: var(--primary); }

/* Formulario */
.contacto-form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.6rem); box-shadow: var(--sh); }
.contacto-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .45rem; font-size: .95rem; }
.form-group input, .form-group textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid #d6dde4; border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--sand-soft);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); background: #fff; }
.form-group textarea { resize: vertical; min-height: 140px; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-top: .5rem; }
.form-note { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.form-note a { color: var(--primary); font-weight: 600; text-decoration: underline; }

.form-error { display: flex; align-items: center; gap: .6rem; background: #fdecea; border: 1px solid #f5c6c0; color: #9b2c20; padding: .9rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.4rem; font-weight: 600; font-size: .95rem; }
.form-success { text-align: center; padding: 1.5rem; }
.form-success i { font-size: 3rem; color: #1f8a5b; margin-bottom: 1rem; }
.form-success h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.form-success p { margin-bottom: 1.6rem; color: var(--ink-soft); }

@media (max-width: 820px) {
  .contacto-layout { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (max-width: 520px) {
  .contacto-form .form-row { grid-template-columns: 1fr; gap: 0; }
}