/* ════════════════════════════
       LAYOUT: mobile-first → 1 col
    ════════════════════════════ */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      align-items: start;
    }
 
    /* ════════════════════════════
       LAYOUT: desktop → 2 col
    ════════════════════════════ */
    @media (min-width: 1020px) {
      .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
      }
    }
 
    /* ── Formulario: siempre columna ── */
    .contact-form {
      display: flex;
      flex-direction: column;
    }
 
    /* ── Inputs ── */
    .contact-input {
      display: block;
      width: 100%;
      font-family: var(--ff-body);
      font-size: 16px;
      color: var(--text);
      background: var(--white);
      border: 1.5px solid #c8c8c8;
      border-radius: var(--radius);
      padding: 0.85rem 1rem;
      outline: none;
      margin-bottom: 16px;
      transition: border-color var(--transition), box-shadow var(--transition);
    }
 
    .contact-input::placeholder { color: #aaa; }
 
    .contact-input:focus {
      border-color: var(--text);
      box-shadow: 0 0 0 3px rgb(40 19 35 / 8%);
    }
 
    .contact-textarea {
      resize: vertical;
      min-height: 130px;
    }
 
    /* ── Captcha ── */
    .captcha-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 16px;
    }
 
    .captcha-label {
      font-size: 16px;
      color: var(--text);
      white-space: nowrap;
      user-select: none;
    }
 
    .captcha-input {
      width: 100px;
      flex-shrink: 0;
      text-align: center;
      margin-bottom: 0;
    }
 
    .captcha-refresh {
      background: none;
      border: none;
      cursor: pointer;
      color: #888;
      display: flex;
      align-items: center;
      padding: 0.25rem;
      border-radius: 4px;
      transition: color var(--transition), transform 0.3s;
    }
 
    .captcha-refresh:hover {
      color: var(--text);
      transform: rotate(90deg);
    }
 
    /* ── Botón ── */
    /*.btn-submit {
      display: block;
      width: 100%;
      font-family: var(--ff-body);
      font-size: 16px;
      font-weight: 600;
      color: var(--white);
      background: var(--text);
      border: none;
      border-radius: var(--radius);
      padding: 0.95rem 1.5rem;
      cursor: pointer;
      transition: background var(--transition), transform 0.15s ease;
    }
 
    .btn-submit:hover  { background: var(--brand); transform: translateY(-1px); }
    .btn-submit:active { transform: translateY(0); }
 */
    /* ── Mensajes ── */
    .form-message {
      display: none;
      font-size: 14px;
      padding: 0.6rem 0.9rem;
      border-radius: var(--radius);
      margin-bottom: 16px;
    }
 
    .form-message.success {
      display: block;
      background: #e8f5e9;
      color: #2e7d32;
      border: 1px solid #a5d6a7;
    }
 
    .form-message.error {
      display: block;
      background: #fdecea;
      color: #c62828;
      border: 1px solid #ef9a9a;
    }


    .contact-left img{width: 100%; max-width: 100%; object-fit: cover; height: 220px;}