/* ==========================================================================
   BeLight Energy — contact.css
   ========================================================================== */
@layer pages {
  .contact-hero { padding-block-end: var(--s-6); }
  .contact__grid { display: grid; gap: var(--s-5); align-items: start; }
  @media (min-width: 64em) { .contact__grid { grid-template-columns: 1fr 22rem; } }
  .contact__form { --pad: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
  .contact__title { font-size: var(--fs-xl); margin-block-end: var(--s-5); }
  fieldset.field { border: 0; padding: 0; min-inline-size: 0; }
  .field__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }

  /* Seleção de perfil em cartões */
  .seg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .seg-cards label { position: relative; }
  .seg-cards input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .seg-cards span { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-block-size: 3.25rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); font-weight: 600; font-size: var(--fs-sm); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
  .seg-cards input:hover + span { border-color: color-mix(in oklab, var(--text) 30%, var(--line)); }
  .seg-cards input:checked + span { border-color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--text); }
  .seg-cards input:checked + span .bi { color: var(--accent); }
  .seg-cards input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* Campo "empresa" revelado com @starting-style */
  [data-empresa-field] { transition: opacity var(--t) var(--ease), translate var(--t) var(--ease-out); }
  @starting-style { [data-empresa-field] { opacity: 0; translate: 0 -6px; } }

  /* Anexo */
  .file-wrap { position: relative; }
  .file { display: flex; align-items: center; gap: var(--s-3); min-block-size: 3rem; padding: 0 3.25rem 0 var(--s-4); border-radius: var(--r-sm); border: 1px dashed color-mix(in oklab, var(--text) 25%, var(--line)); background: var(--bg); cursor: pointer; font-size: var(--fs-sm); color: var(--muted); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
  .file:hover { border-color: var(--accent); background: var(--accent-soft); }
  .file:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .file.is-filled { border-style: solid; border-color: var(--success); color: var(--text); }
  .file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .field.is-invalid .file { border-color: var(--danger); }
  .file__clear { position: absolute; inset-block: 0; inset-inline-end: var(--s-2); margin-block: auto; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-sm); color: var(--muted); }
  .file__clear:hover { background: var(--surface-2); color: var(--text); }

  .contact__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
  .contact__submit .field__hint { display: inline-flex; gap: var(--s-2); align-items: center; }

  .contact__aside { display: grid; gap: var(--s-3); }
  @media (min-width: 64em) { .contact__aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-5)); } }
  .info { display: flex; gap: var(--s-4); align-items: center; --pad: var(--s-5); text-decoration: none; color: var(--text); }
  .info strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); }
  .info span { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
  .info-cta { display: grid; gap: var(--s-3); --pad: var(--s-5); }
  .info-cta strong { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.3; color: var(--on-inverse); }
  .info-cta p { font-size: var(--fs-sm); }
}