@layer components {
  .contact-grid {
    display: grid;
    gap: var(--gap-lg)
  }

  @media (min-width: 56rem) {
    .contact-grid {
      grid-template-columns: 1fr 1fr;
      align-items: start
    }
  }

  .contact-form {
    display: grid;
    gap: 1.15rem;
    padding: var(--gap-md);
    border: 1px solid var(--ceniza);
    border-radius: var(--radius-lg);
    background-color: var(--grafito)
  }

  .field {
    display: grid;
    gap: 0.45rem
  }

  .field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--niebla)
  }

  .field input,
  .field textarea {
    padding: 0.85rem 1rem;
    border: 1px solid var(--ceniza);
    border-radius: var(--radius-sm);
    background-color: var(--carbon);
    color: var(--niebla);
    font-size: 0.95rem
  }

  .field input:focus,
  .field textarea:focus {
    border-color: var(--lava)
  }

  .field textarea {
    min-height: 8rem;
    resize: vertical
  }

  .field-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.84rem;
    color: var(--humo)
  }

  .field-consent input {
    width: 1.15rem;
    height: 1.15rem;
    margin-block-start: 0.15rem;
    accent-color: var(--lava)
  }

  .field-consent a {
    color: var(--niebla)
  }

  .field--hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0
  }

  .form-msg {
    min-height: 1.2rem;
    font-size: 0.86rem
  }

  .form-msg[data-state="ok"] {
    color: var(--lava-claro)
  }

  .form-msg[data-state="error"] {
    color: hsl(4 70% 62%)
  }

  .info-card {
    display: grid;
    gap: 1.15rem
  }

  .info-row {
    display: flex;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--ceniza);
    border-radius: var(--radius-md);
    background-color: var(--carbon-raise)
  }

  .info-row dt {
    flex-shrink: 0;
    width: 6.5rem;
    color: var(--humo);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase
  }

  .info-row dd {
    color: var(--niebla);
    font-size: 0.92rem
  }

  .legal-block {
    margin-block-start: var(--gap-md);
    padding: var(--gap-md);
    border: 1px dashed var(--ceniza);
    border-radius: var(--radius-md);
    font-size: 0.84rem;
    color: var(--humo)
  }
}