/* ============================================
   CONTACTO PAGE — Laura Mesa Feng Shui
   ============================================ */

.contacto-section { padding: 80px 0 100px; background: var(--warm-white); }
.contacto-grid {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 72px; align-items: start;
}
.contacto-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--charcoal-soft);
}
.form-group input, .form-group select, .form-group textarea {
  background: var(--cream); border: 0.5px solid var(--rose-light);
  border-radius: var(--radius); padding: 12px 16px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 300;
  color: var(--charcoal); transition: border-color var(--transition), background var(--transition);
  outline: none; width: 100%;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--rose-light); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--rose-dark); background: var(--warm-white);
  box-shadow: 0 0 0 3px rgba(166,112,120,0.08);
}
.form-group select { cursor: pointer; }
.form-group select option { background: var(--warm-white); color: var(--charcoal); }
.form-group textarea { resize: vertical; min-height: 120px; }

.form-check { display: flex; gap: 12px; align-items: flex-start; }
.form-check input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--rose-dark); cursor: pointer;
}
.form-check label { font-size: 12px; color: var(--charcoal-soft); line-height: 1.5; cursor: pointer; }
.form-check label a { color: var(--rose-dark); text-decoration: underline; }
.form-check label a:hover { color: var(--rose); }

.form-submit { width: 100%; text-align: center; cursor: pointer; font-size: 12px; }
.form-success {
  background: rgba(138,158,138,0.1); border: 0.5px solid rgba(138,158,138,0.4);
  border-radius: var(--radius); padding: 16px 20px;
  font-size: 14px; color: var(--sage); text-align: center;
}

/* INFO LATERAL */
.contacto-info {
  display: flex; flex-direction: column;
  border-left: 0.5px solid var(--border); padding-left: 40px;
}
.info-block { padding: 24px 0; border-bottom: 0.5px solid var(--border); }
.info-block:first-child { padding-top: 0; }
.info-block:last-child { border-bottom: none; }
.info-block h3 {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rose-dark); margin-bottom: 10px;
}
.info-block p { font-size: 13px; line-height: 1.7; color: var(--charcoal-soft); }
.info-block a { color: var(--rose-dark); transition: color var(--transition); }
.info-block a:hover { color: var(--rose); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .contacto-grid { grid-template-columns: 1fr; gap: 48px; }
  .contacto-info {
    border-left: none; padding-left: 0;
    border-top: 0.5px solid var(--border); padding-top: 40px;
    display: grid; grid-template-columns: 1fr 1fr;
  }
  .info-block { padding: 20px; border-bottom: none; border-right: 0.5px solid var(--border); }
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .contacto-info { grid-template-columns: 1fr; }
  .info-block { border-right: none; border-bottom: 0.5px solid var(--border); }
}