/* Contact page only. Shared tokens and backend form contracts stay intact. */
.pagina-contato {
  --contato-destaque: var(--cor-texto-marca);
  --contato-papel: color-mix(in srgb, var(--carvao-950) 95%, var(--areia-500));
  --contato-tinta: var(--areia-100);
  --contato-tinta-suave: var(--areia-300);
  --contato-linha: color-mix(in srgb, var(--cor-texto) 18%, transparent);
  --contato-campo: color-mix(in srgb, var(--carvao-950) 88%, var(--areia-500));
  --contato-borda-campo: var(--areia-500);
  --contato-foco: var(--terracota-400);
}
.pagina-contato .contato {
  position: relative;
  isolation: isolate;
  width: min(90.4%, 100rem);
  max-width: none;
  padding-inline: 0;
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.pagina-contato .contato::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: linear-gradient(180deg, #0b0b0d22, #0b0b0d44), url("../img/contato/fundo-contato.260d063064eb.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.contato__layout {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5.5rem);
}
.contato__apresentacao { min-width: 0; }
.contato__sobrancelha {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.5rem;
  color: var(--cor-texto-luz);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contato__sobrancelha::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; }
.contato__abertura h1 {
  margin: 0;
  font-size: clamp(2.6rem, 4.15vw, 4.2rem);
  font-stretch: 100%;
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -.05em;
}
.contato__abertura h1 span { color: var(--cor-titulo-marca, var(--marca)); }
.contato__introducao {
  max-width: 39ch;
  margin: 1.5rem 0 1rem;
  color: var(--cor-texto-suave);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.contato__contexto { max-width: 42ch; margin-top: clamp(2rem, 3vw, 3rem); padding: .5rem 0 .5rem 1.25rem; border-left: 2px solid var(--contato-destaque); }
.contato__contexto-sobrelinha { margin: 0 0 .75rem; color: var(--contato-destaque); font-size: .6875rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.contato__contexto h2 { margin: 0; font-size: clamp(1.6rem, 2.2vw, 2.15rem); font-stretch: 100%; font-weight: 700; line-height: 1.12; letter-spacing: -.035em; }
.contato__contexto p:not(.contato__contexto-sobrelinha) { margin: 1rem 0 0; color: var(--cor-texto-suave); font-size: .9375rem; line-height: 1.6; }
.contato__canais { margin-top: 2.5rem; }
.contato__canais h2 { margin: 0 0 1rem; font-size: .875rem; font-stretch: 100%; font-weight: 500; color: var(--cor-texto-suave); }
.contato__lista-canais { margin: 0; padding: 0; list-style: none; }
.contato__canal {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem .25rem;
  color: var(--cor-texto);
  border-bottom: 1px solid var(--contato-linha);
  text-decoration: none;
}
.contato__canal--principal { padding: 1.25rem; margin-bottom: .4rem; border: 1px solid var(--marca); border-radius: .625rem; background: var(--marca); color: var(--cor-sobre-marca); }
.contato__canal strong { display: block; font-size: 1rem; font-weight: 650; }
.contato__canal small { display: block; margin-top: .3rem; font-size: .8125rem; line-height: 1.45; color: var(--cor-texto-suave); overflow-wrap: anywhere; }
.contato__canal--principal small { color: inherit; }
.contato__icone { width: 1.5rem; height: 1.5rem; }
.contato__seta { justify-self: end; font-size: 1.4rem; line-height: 1; transition: transform 160ms ease; }
.contato__canal:hover { color: var(--contato-destaque); }
.contato__canal--principal:hover { background: var(--marca-hover); color: var(--cor-sobre-marca); }
.contato__canal:hover .contato__seta { transform: translate(2px, -2px); }
.contato__local { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; color: var(--contato-tinta-suave); font-size: .9375rem; }
.contato__local svg { flex: none; width: 24px; height: 28px; color: var(--cor-texto); }
/* A foto original se integra ao fundo por mascara CSS, sem alterar seus pixels. */
.contato__retrato { position: relative; overflow: hidden; width: 100%; min-width: 0; margin: 1rem 0 0; min-height: 26rem; aspect-ratio: 1.5; isolation: isolate; }
.contato__retrato::before { content: ""; position: absolute; inset: 0 0 0 24%; z-index: 1; background: linear-gradient(90deg, #0b0b0de8, transparent 55%), radial-gradient(ellipse 48% 64% at 64% 54%, transparent 35%, #0b0b0d55 80%, #0b0b0d99 100%); mask-image: linear-gradient(90deg, transparent, #000 28%, #000 85%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent); mask-composite: intersect; pointer-events: none; }
.contato__retrato::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, var(--marca) 20%, var(--terracota-500) 65%, transparent); pointer-events: none; }
.contato__retrato img { display: block; position: absolute; inset: 0 0 0 auto; width: 76%; height: 100%; object-fit: cover; object-position: 54% 24%; mask-image: linear-gradient(90deg, transparent, #000 28%, #000 85%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent); mask-composite: intersect; }
.contato__retrato figcaption { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: inherit; padding-block: 3rem; color: var(--contato-tinta); }
.contato__retrato-sobrelinha { font-size: clamp(.625rem, .85vw, .875rem); font-weight: 550; line-height: 1.8; letter-spacing: .25em; text-transform: uppercase; }
.contato__retrato figcaption strong { margin-top: .4rem; font-size: clamp(1.7rem, 2.6vw, 2.9rem); line-height: 1.1; font-weight: 760; letter-spacing: -.02em; text-transform: uppercase; color: var(--marca); }
.contato__retrato figcaption strong::after { content: ""; display: block; width: 3rem; height: 3px; margin-block: 1.5rem 1.75rem; background: var(--cor-texto-luz); }
.contato__retrato-apoio { max-width: 26ch; font-size: clamp(.8125rem, 1.05vw, 1.0625rem); line-height: 1.65; color: var(--contato-tinta-suave); }
.contato__formulario {
  --cor-texto: var(--contato-tinta);
  --cor-texto-suave: var(--contato-tinta-suave);
  --cor-superficie: var(--contato-campo);
  --cor-borda-forte: var(--contato-borda-campo);
  --cor-foco: var(--contato-foco);
  --cor-texto-marca: var(--contato-foco);
  --cor-erro: var(--erro-400);
  --cor-erro-fundo: var(--erro-fundo);
  --cor-erro-borda: var(--erro-borda);
  padding: 0;
  color: var(--contato-tinta);
  min-width: 0;
  color-scheme: dark;
}
.contato__painel {
  padding: clamp(1.5rem, 2vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--areia-500) 28%, transparent);
  border-radius: .875rem;
  background: linear-gradient(135deg, var(--contato-papel), color-mix(in srgb, var(--contato-papel) 96%, var(--terracota-500)));
  box-shadow: inset 0 1px 0 #ffffff05, 0 12px 36px #0000001a;
}
.contato__painel + .contato__painel { margin-top: 1.5rem; }
.contato__cabecalho-form { margin-bottom: 1.75rem; }
.contato__cabecalho-form .contato__sobrancelha { color: var(--contato-foco); margin-bottom: .75rem; font-size: .6875rem; }
.contato__cabecalho-form h2 { margin: 0 0 .75rem; font-size: clamp(1.65rem, 2vw, 2rem); font-weight: 720; font-stretch: 100%; line-height: 1.2; letter-spacing: -.035em; scroll-margin-top: 7rem; }
.contato__cabecalho-form p:last-child { margin: 0; font-size: .9375rem; color: var(--contato-tinta-suave); line-height: 1.55; }
.contato__obrigatorios { margin: 0 0 1rem; font-size: .8125rem; color: var(--contato-tinta-suave); }
.contato__grupo { margin: 0; padding: 0; }
.contato__grupo-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: .875rem; width: 100%; margin-bottom: 1.75rem; font-size: 1.125rem; font-weight: 650; letter-spacing: -.015em; }
.contato__grupo-titulo > span { color: var(--contato-foco); font-size: .875rem; font-weight: 650; letter-spacing: .04em; }
.contato__grupo-titulo small { margin-left: auto; color: var(--contato-tinta-suave); font-size: .75rem; font-weight: 400; letter-spacing: 0; }
.contato__campos-duplos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.75rem; align-items: start; }
.contato__ajuda-treino { grid-column: 1 / -1; margin-top: -.75rem; margin-bottom: 1.75rem; }
.contato__formulario .campo { margin-bottom: 1.25rem; min-width: 0; }
.contato__formulario .campo > label, .contato__formulario .campo__legenda { font-size: .9375rem; font-weight: 550; }
.contato__formulario .campo__ajuda { font-size: .8125rem; line-height: 1.55; color: var(--contato-tinta-suave); }
.contato__formulario .campo input, .contato__formulario .campo textarea, .contato__formulario .campo select { border-radius: .375rem; font-size: 1rem; min-width: 0; }
.contato__formulario .campo select { appearance: none; padding-right: 2.75rem; background-image: url("../img/contato/seta-select.97bb03a0635d.svg"); background-repeat: no-repeat; background-position: right 1rem center; }
.contato__formulario .campo input:focus, .contato__formulario .campo select:focus, .contato__formulario .campo textarea:focus { border-color: var(--contato-foco); outline: 2px solid var(--contato-foco); outline-offset: 2px; box-shadow: none; }
.contato__formulario .campo--invalido input, .contato__formulario .campo--invalido select, .contato__formulario .campo--invalido textarea { border-color: var(--cor-erro); }
.contato__formulario textarea { min-height: 7.5rem; }
.contato__preferencia .opcoes { display: grid; grid-template-columns: 1fr 1fr; }
.contato__preferencia .opcao { min-height: 48px; padding: .625rem; background: var(--contato-campo); border-color: var(--contato-borda-campo); border-radius: .375rem; color: var(--contato-tinta); gap: .625rem; font-size: .9375rem; }
.contato__preferencia .opcao:has(input:checked) { background: color-mix(in srgb, var(--contato-papel) 80%, var(--terracota-500)); border-color: var(--contato-foco); color: var(--contato-tinta); }
.contato__preferencia .opcao::before { content: ""; width: .875rem; height: .875rem; border: 1px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.contato__preferencia .opcao:has(input:checked)::before { border: 4px solid var(--contato-foco); }
.contato__formulario .contato__privacidade { padding-top: .5rem; }
.contato__privacidade .opcao { display: flex; align-items: flex-start; justify-content: start; gap: 1rem; padding: .625rem 0; border: 0; border-radius: 0; background: transparent; color: var(--contato-tinta); font-size: .875rem; line-height: 1.65; }
.contato__privacidade .opcao:has(input:checked) { background: transparent; color: var(--contato-tinta); }
.contato__privacidade .opcao a, .contato__privacidade .opcao:has(input:checked) a { color: var(--contato-foco); text-decoration: underline; text-underline-offset: .2em; }
.contato__privacidade .opcao input { position: static; opacity: 1; pointer-events: auto; flex: 0 0 24px; width: 24px; height: 24px; min-height: 24px; margin: 0; accent-color: var(--marca); }
.contato__privacidade.campo--invalido .opcao { outline: 1px solid var(--cor-erro); outline-offset: 5px; }
.contato__cuidado { display: flex; align-items: start; gap: 1rem; margin-bottom: 1.5rem; color: var(--contato-tinta-suave); }
.contato__cuidado svg { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }
.contato__cuidado p { margin: 0; font-size: .875rem; line-height: 1.65; }
.contato__cuidado strong { font-weight: 400; }
.contato__cuidado .contato__versao { margin-top: .5rem; font-size: .6875rem; }
.contato__enviar { min-height: 64px; justify-content: space-between; padding: 1rem 1.75rem; border-radius: .375rem; font-size: 1.0625rem; font-weight: 650; font-stretch: 100%; text-transform: none; letter-spacing: 0; background: linear-gradient(110deg, var(--terracota-500), color-mix(in srgb, var(--terracota-500) 85%, var(--luz-600))); }
.contato__enviar::after { content: "→"; font-size: 1.75rem; line-height: 1; }
.contato__enviar:disabled::after { content: "…"; }
.contato__sem-canal { color: var(--contato-tinta-suave); font-size: .875rem; line-height: 1.6; margin-top: 1.5rem; }
.contato__retorno { margin-bottom: 2rem; }
.contato__formulario .aviso { margin-bottom: 1.5rem; }
.pagina-contato a:focus-visible { outline: 2px solid var(--contato-destaque); outline-offset: 5px; }
.contato__formulario :is(a, button):focus-visible { outline: 2px solid var(--contato-foco); outline-offset: 3px; }
/* Rodape do contato: a faixa da referencia, com os canais acessiveis por nome. */
.contato-rodape { position: relative; border-top: 1px solid color-mix(in srgb, var(--marca) 65%, transparent); background: linear-gradient(#0b0b0d33, #0b0b0d99), url("../img/rodape/rodape-fundo.461b436eb993.webp") center / cover; }
.contato-rodape::before { content: ""; position: absolute; inset: -1px 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--marca) 12%, transparent 35%, transparent 70%, var(--marca) 90%, transparent); }
.contato-rodape__interno { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: clamp(1rem, 2vw, 2rem); width: min(90.4%, 100rem); max-width: none; padding: .75rem 0; }
.contato-rodape__marca { display: inline-flex; align-items: center; gap: .625rem; min-height: 44px; color: var(--areia-200); text-decoration: none; border-radius: .25rem; }
.contato-rodape__marca img { display: block; width: 40px; height: 40px; object-fit: contain; }
.contato-rodape__identidade { display: grid; gap: .125rem; }
.contato-rodape__identidade strong { font-size: 1rem; font-weight: 650; line-height: 1.3; }
.contato-rodape__identidade > span:not(.sr-only) { color: var(--areia-300); font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; }
.contato-rodape__valores { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem clamp(.5rem, 1vw, 1rem); margin: 0; padding: 0; list-style: none; }
.contato-rodape__valores li { display: flex; align-items: center; gap: clamp(.5rem, 1vw, 1rem); font-size: .625rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--areia-300); }
.contato-rodape__valores li + li::before { content: "//"; color: var(--terracota-400); font-size: .875rem; letter-spacing: 0; }
.contato-rodape__canais { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.contato-rodape__canais a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--areia-300); text-decoration: none; }
.contato-rodape__canais svg { width: 22px; height: 22px; flex: none; }
.contato-rodape__canais a:is(:hover, :focus-visible) { color: var(--contato-destaque); }
.contato-rodape__proposito { margin: 0; padding: .125rem 0 .125rem clamp(1rem, 2vw, 2rem); border-left: 1px solid color-mix(in srgb, var(--marca) 60%, transparent); color: var(--areia-300); font-size: .625rem; line-height: 2; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 75rem) {
  .contato-rodape__interno { grid-template-columns: auto 1fr auto; gap: .75rem; }
  .contato-rodape__valores { grid-row: 2; grid-column: 1 / -1; padding-top: .5rem; border-top: 1px solid var(--contato-linha); }
}
@media (max-width: 40rem) {
  .contato-rodape__interno { grid-template-columns: 1fr auto; gap: .5rem; padding-block: .75rem; }
  .contato-rodape__marca { gap: .5rem; }
  .contato-rodape__marca img { width: 32px; height: 32px; }
  .contato-rodape__identidade strong { font-size: .875rem; }
  .contato-rodape__identidade > span:not(.sr-only) { font-size: .5625rem; letter-spacing: .12em; }
  .contato-rodape__canais { gap: 0; }
  .contato-rodape__canais svg { width: 21px; height: 21px; }
  .contato-rodape__valores { gap: .25rem .75rem; }
  .contato-rodape__valores li, .contato-rodape__valores li + li::before { gap: .5rem; }
  .contato-rodape__proposito { grid-column: 1 / -1; border: 0; padding: 0; text-align: center; }
}
@media (min-width: 1600px) {
  .contato__abertura h1 { font-size: 4.2rem; }
}
@media (max-width: 1200px) and (min-width: 1001px) {
  .contato__layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; }
  .contato__abertura h1 { font-size: 2.6rem; }
  .contato__retrato { min-height: 23rem; }
  .contato__retrato img { width: 88%; }
  .contato__retrato::before { left: 12%; }
  .contato__retrato figcaption strong { font-size: 1.625rem; }
  .contato__retrato-sobrelinha { max-width: 16ch; font-size: .625rem; letter-spacing: .15em; }
  .contato__retrato-apoio { max-width: 18ch; font-size: .8125rem; }
}
@media (max-width: 1000px) {
  .contato__layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .contato__apresentacao { display: grid; grid-template-columns: 1fr; }
  .contato__abertura h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
  .contato__introducao { margin-top: 1.25rem; max-width: 42ch; }
  .contato__contexto { margin-top: 2.25rem; }
  .contato__canais { margin-top: 1.5rem; }
  .contato__retrato { margin-top: 1rem; aspect-ratio: 1.7; min-height: 23rem; }
  .contato__retrato figcaption strong { font-size: clamp(1.75rem, 5vw, 3rem); }
  .contato__retrato-sobrelinha { font-size: clamp(.625rem, 1.6vw, .875rem); }
  .contato__retrato-apoio { font-size: clamp(.8125rem, 2vw, 1rem); }
}
@media (max-width: 520px) {
  .pagina-contato .contato { padding-top: 2rem; }
  .contato__painel { padding: 1.5rem 1.125rem; border-radius: .75rem; }
  .contato__campos-duplos { grid-template-columns: 1fr; gap: 0; }
  .contato__ajuda-treino { grid-row: 2; }
  .contato__retrato { min-height: 22rem; }
  .contato__retrato img { width: 120%; right: -20%; }
  .contato__retrato::before { left: 0; right: -20%; }
  .contato__retrato figcaption strong { font-size: 1.65rem; }
  .contato__retrato-sobrelinha { max-width: 16ch; }
  .contato__retrato-apoio { max-width: 17ch; }
  .contato__sobrancelha { margin-bottom: 1.25rem; }
  .contato__canais h2 { margin-bottom: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .contato__seta { transition: none; }
  .contato__canal:hover .contato__seta { transform: none; }
}
@media (forced-colors: active) {
  .contato__painel, .contato__canal--principal { border: 1px solid CanvasText; }
  .pagina-contato .contato::before, .contato__retrato::before, .contato__retrato::after { display: none; }
  .contato__retrato figcaption { background: Canvas; width: fit-content; padding-inline: .5rem; }
  .contato__formulario .campo select { appearance: auto; background-image: none; }
  .contato__formulario .campo :is(input, select, textarea):focus { outline-color: Highlight; }
  .contato__preferencia .opcao:has(input:checked) { outline: 2px solid Highlight; }
  .contato__preferencia .opcao:has(input:checked)::before { border-color: Highlight; }
}
