/* ========================================
   CONTACTO — Form + Info
   ======================================== */

.bb-contact { position: relative; }
.bb-contact::before {
  content: ''; position: absolute; top: -10%; left: -8%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(232,146,84,0.07) 0%, transparent 60%);
  border-radius: 999px; filter: blur(80px); pointer-events: none;
}
.bb-contact::after {
  content: ''; position: absolute; bottom: -15%; right: 10%; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(181,101,29,0.05) 0%, transparent 60%);
  border-radius: 999px; filter: blur(80px); pointer-events: none;
}
.bb-contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.bb-contact__form { display: flex; flex-direction: column; gap: 20px; }
.bb-field { display: flex; flex-direction: column; gap: 8px; }
.bb-field label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-fg-3); }
.bb-field input, .bb-field textarea {
  background: transparent;
  border: none; border-bottom: 1px solid var(--bb-hairline);
  color: var(--bb-fg-1); font-family: inherit; font-size: 16px;
  padding: 10px 0;
  transition: border-color 320ms var(--bb-ease);
}
.bb-field input:focus, .bb-field textarea:focus { outline: none; border-bottom-color: var(--bb-copper); }
.bb-field input:focus-visible, .bb-field textarea:focus-visible { outline: 2px solid var(--bb-copper); outline-offset: 2px; }
.bb-field textarea { resize: vertical; min-height: 100px; }
.bb-contact__aside { color: var(--bb-fg-2); }
.bb-contact__aside h3 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 24px; margin: 32px 0 12px; color: var(--bb-fg-1); }
.bb-contact__aside p { margin-bottom: 8px; }
.bb-contact__wa { margin-top: 20px; }
.bb-contact__wa:hover { border-color: #25D366; color: #25D366; }

@media (max-width: 900px) {
  .bb-contact__inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  .bb-contact::before, .bb-contact::after { display: none; }
}