/* Caminhada Santa — folha de estilo única do site público.
   Paleta tirada do banner: céu da madrugada, manto celeste da Santa e a luz das velas. */

:root {
  --noite: #0E2747;
  --noite-2: #17375F;
  --celeste: #6FB7E9;
  --celeste-claro: #A9D6F5;
  --manto: #2F6FA8;
  --vela: #F4E3B5;
  --nevoa: #EEF5FB;
  --tinta: #12233A;
  --tinta-suave: #4A5F78;
  --linha: #C9DCEC;
  --erro: #B3261E;

  --serifa: "Gloock", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-0: 0.875rem;
  --t-1: 1.0625rem;
  --t-2: 1.3125rem;
  --t-3: 1.75rem;
  --t-4: 2.25rem;
  --t-5: clamp(2.5rem, 7vw, 4.25rem);

  --gutter: 1rem;
  --largura: 68rem;
  --raio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nevoa);
  color: var(--tinta);
  font: 400 var(--t-1)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serifa);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); }
p { margin: 0 0 1em; }

a { color: var(--manto); text-underline-offset: 0.18em; }
a:hover { color: var(--noite); }

:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: var(--gutter); top: -3rem;
  background: var(--vela); color: var(--tinta); padding: 0.5rem 1rem; z-index: 50;
}
.pular:focus { top: 0.5rem; }

.envoltorio {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--celeste);
  color: var(--tinta);
  font: 600 var(--t-1)/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}
.botao:hover { background: var(--celeste-claro); color: var(--tinta); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: 0.6; cursor: progress; }

.botao--contorno {
  background: transparent;
  color: var(--manto);
  box-shadow: inset 0 0 0 2px var(--manto);
}
.botao--contorno:hover { background: var(--manto); color: #fff; }

/* ---------- Topo / hero ---------- */

.hero {
  background: var(--noite);
  color: var(--nevoa);
}

.hero__grade {
  display: grid;
  gap: 1.75rem;
  padding-bottom: 2.5rem;
}

.hero__banner {
  margin: 0 calc(-1 * var(--gutter));
  aspect-ratio: 1;
  background: var(--noite-2);
}
.hero__banner img { width: 100%; height: 100%; object-fit: cover; }

.hero h1 {
  font-size: var(--t-5);
  color: #fff;
  margin-bottom: 0.25em;
}

.hero__edicao {
  font-size: var(--t-2);
  color: var(--celeste-claro);
  margin-bottom: 1.5rem;
}

.ficha {
  display: grid;
  gap: 1rem;
  margin: 0 0 2rem;
}
.ficha div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; align-items: baseline; }
.ficha dt { color: var(--celeste-claro); font-size: var(--t-0); }
.ficha dd { margin: 0; }
.ficha .ficha__destaque {
  font-family: var(--serifa);
  font-size: var(--t-3);
  color: var(--vela);
  line-height: 1.1;
}

.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.contagem { color: var(--celeste-claro); font-size: var(--t-0); margin: 0; }
.contagem strong { color: var(--vela); font-family: var(--serifa); font-size: var(--t-2); font-weight: 400; }

@media (min-width: 60rem) {
  .hero__grade {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 4rem;
    padding-block: 3rem;
  }
  .hero__banner { margin: 0; border-radius: var(--raio); overflow: hidden; }
}

/* Barra fixa com o botão de inscrição no celular */
.barra-inscricao {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(14, 39, 71, 0.94);
  backdrop-filter: blur(6px);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.barra-inscricao .botao { width: 100%; }
.barra-inscricao.visivel { transform: none; }
@media (min-width: 60rem) { .barra-inscricao { display: none; } }

/* ---------- Seções ---------- */

.secao { padding-block: 4rem; }
.secao--noite { background: var(--noite); color: var(--nevoa); }
.secao--noite h2 { color: #fff; }
.secao--branca { background: #fff; }
.secao__intro { max-width: 38rem; color: var(--tinta-suave); margin-bottom: 2.5rem; }
.secao--noite .secao__intro { color: var(--celeste-claro); }

/* ---------- Percurso: o terço de luz ---------- */

.terco {
  --conta: 14px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 3rem;
  max-width: 40rem;
}

/* fio de contas apagadas */
.terco::before,
.terco::after {
  content: "";
  position: absolute;
  left: calc(1rem - 3px);
  top: 0.6rem;
  bottom: 0.6rem;
  width: 6px;
  background: radial-gradient(circle at 3px 3px, var(--fio, rgba(169, 214, 245, 0.25)) 2.6px, transparent 3px) 0 0 / 6px var(--conta) repeat-y;
}
/* as mesmas contas, acesas, reveladas de cima para baixo */
.terco::after {
  --fio: var(--celeste);
  filter: drop-shadow(0 0 3px var(--celeste));
  clip-path: inset(0 0 100% 0);
  transition: clip-path 2.8s cubic-bezier(0.45, 0, 0.3, 1);
}
.terco.aceso::after { clip-path: inset(0 0 0 0); }

.terco li { position: relative; padding-bottom: 2.5rem; }
.terco li:last-child { padding-bottom: 0; }

/* conta maior em cada parada */
.terco li::before {
  content: "";
  position: absolute;
  left: calc(-2rem - 9px);
  top: 0.45rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--noite);
  box-shadow: inset 0 0 0 2px rgba(169, 214, 245, 0.35);
  transition: background-color 0.4s, box-shadow 0.4s;
  transition-delay: var(--atraso, 0s);
}
.terco.aceso li::before {
  background: var(--celeste);
  box-shadow: 0 0 0 4px rgba(111, 183, 233, 0.25), 0 0 18px 4px rgba(111, 183, 233, 0.55);
}
.terco li:nth-child(1) { --atraso: 0s; }
.terco li:nth-child(2) { --atraso: 0.55s; }
.terco li:nth-child(3) { --atraso: 1.1s; }
.terco li:nth-child(4) { --atraso: 1.65s; }
.terco li:nth-child(5) { --atraso: 2.15s; }
.terco li:nth-child(6) { --atraso: 2.6s; }

/* a última conta é a cruz do terço: a chegada aos pés da Santa */
.terco li:last-child::before {
  border-radius: 0;
  width: 20px;
  height: 26px;
  left: calc(-2rem - 10px);
  top: 0.2rem;
  clip-path: polygon(38% 0, 62% 0, 62% 26%, 100% 26%, 100% 46%, 62% 46%, 62% 100%, 38% 100%, 38% 46%, 0 46%, 0 26%, 38% 26%);
  background: rgba(169, 214, 245, 0.35);
  box-shadow: none;
}
.terco.aceso li:last-child::before { background: var(--vela); box-shadow: none; }

.terco__hora {
  display: block;
  font-family: var(--serifa);
  font-size: var(--t-3);
  color: var(--vela);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.terco h3 { color: #fff; margin-bottom: 0.35rem; }
.terco p { color: var(--celeste-claro); margin: 0; max-width: 34rem; }

@media (prefers-reduced-motion: reduce) {
  .terco::after, .terco li::before { transition: none; }
}

/* ---------- O que levar ---------- */

.levar {
  display: grid;
  gap: 1rem;
}
.levar .secao__intro { margin-bottom: 0; }
.levar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linha);
}
.levar li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linha);
}
.levar li strong { display: block; font-weight: 600; }
.levar li span { color: var(--tinta-suave); font-size: var(--t-0); }
@media (min-width: 48rem) {
  .levar { grid-template-columns: 1fr 1.4fr; align-items: start; gap: 4rem; }
}
.levar__titulo { font: 600 var(--t-0)/1.4 var(--sans); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.levar .valor { font: 400 var(--t-5)/1 var(--serifa); color: var(--manto); margin: 0 0 1rem; }
.levar .secao__intro + .botao { margin-top: 1.5rem; }
.incluso li { display: flex; align-items: center; gap: 0.75rem; }
.incluso li::before {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--celeste) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%230E2747' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ---------- Camiseta ---------- */

.camiseta { display: grid; gap: 2rem; align-items: center; }
.camiseta__foto { margin: 0; }
.camiseta__foto img { width: 100%; border-radius: var(--raio); }
.camiseta__foto figcaption { margin-top: 0.5rem; font-size: 0.8rem; color: var(--celeste-claro); }
.camiseta .valor { font: 400 var(--t-5)/1 var(--serifa); color: var(--vela); margin: 0 0 1rem; }
.camiseta .secao__intro { margin-bottom: 1.5rem; }
@media (min-width: 48rem) {
  .camiseta { grid-template-columns: 1.4fr 1fr; gap: 4rem; }
}

/* ---------- Galeria ---------- */

.abas { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.abas button {
  font: 600 var(--t-0)/1 var(--sans);
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--manto);
  box-shadow: inset 0 0 0 1.5px var(--linha);
  cursor: pointer;
}
.abas button[aria-selected="true"] { background: var(--manto); color: #fff; box-shadow: none; }

.galeria {
  columns: 2 10rem;
  column-gap: 0.5rem;
}
.galeria > * {
  break-inside: avoid;
  margin: 0 0 0.5rem;
}
.galeria button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--linha);
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
}
.galeria img { width: 100%; }
.galeria video { width: 100%; border-radius: 6px; background: var(--noite); }
@media (min-width: 48rem) { .galeria { columns: 4 12rem; column-gap: 0.75rem; } .galeria > * { margin-bottom: 0.75rem; } }

.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 22, 41, 0.96);
  color: #fff;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(8, 22, 41, 0.8); }
.lightbox img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.lightbox button {
  position: absolute;
  width: 3rem; height: 3rem;
  border: 0; border-radius: 50%;
  background: rgba(14, 39, 71, 0.75);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox .fechar { top: 0.75rem; right: 0.75rem; }
.lightbox .anterior { left: 0.5rem; top: 50%; translate: 0 -50%; }
.lightbox .proxima { right: 0.5rem; top: 50%; translate: 0 -50%; }

/* ---------- Patrocinadores ---------- */

/* Destaque: quem faz o site e as inscrições */
.destaque-apoio {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin: 0 0 2rem;
  padding: clamp(1rem, 3vw, 2rem);
  background: #fff;
  border-radius: var(--raio);
  color: var(--tinta-suave);
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.2s;
}
.destaque-apoio:hover,
.destaque-apoio:focus-visible { box-shadow: 0 0 0 2px var(--celeste); }
.destaque-apoio__papel { font-size: var(--t-0); }
.destaque-apoio__logo { width: 100%; height: auto; }
.destaque-apoio__texto { max-width: 40rem; }

/* Divulgadores: dois logos lado a lado, logo abaixo da MK Softwares, na largura toda */
.divulgadores { margin: 0 0 2rem; text-align: center; }
.divulgadores__titulo { font-size: var(--t-0); font-weight: 400; color: var(--tinta-suave); margin: 0 0 0.75rem; }
.divulgadores ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.divulgadores li { border-radius: var(--raio); overflow: hidden; line-height: 0; }
.divulgadores img { width: 100%; height: auto; }
.patrocinadores__titulo { text-align: center; }

/* Quadros de 180×180 (um pouco menores no celular para caberem dois por linha) */
.patrocinadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, 180px);
  justify-content: center;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.patrocinadores li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 180px;
  padding: 0.75rem;
  background: #fff;
  border-radius: var(--raio);
  overflow: hidden;
}
@media (max-width: 26rem) {
  .patrocinadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.patrocinadores li > a { display: grid; place-items: center; width: 100%; height: 100%; }
.patrocinadores img { width: 100%; height: 100%; object-fit: contain; }
.patrocinadores .vago {
  background: transparent;
  border: 1.5px dashed var(--linha);
  color: var(--tinta-suave);
  font-size: var(--t-0);
  text-align: center;
}

/* ---------- Rodapé ---------- */

.rodape {
  background: var(--noite);
  color: var(--celeste-claro);
  padding: 3rem 0 6rem;
  font-size: var(--t-0);
}
.rodape a { color: var(--vela); }
.rodape p { margin-bottom: 0.5rem; }
.rodape__credito {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(169, 214, 245, 0.18);
  font-size: 0.8rem;
  color: rgba(169, 214, 245, 0.75);
}
@media (min-width: 60rem) { .rodape { padding-bottom: 3rem; } }

/* ========== Página de inscrição ========== */

.cabecalho {
  background: var(--noite);
  color: var(--nevoa);
  padding: 1.25rem 0 2rem;
}
.cabecalho a.voltar { color: var(--celeste-claro); font-size: var(--t-0); }
.cabecalho h1 { font-size: var(--t-4); color: #fff; margin: 1rem 0 0.25rem; }
.cabecalho p { color: var(--celeste-claro); margin: 0; }

.progresso {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nevoa);
  border-bottom: 1px solid var(--linha);
}
.progresso ol {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}
.progresso li {
  flex: 1;
  counter-increment: etapa;
  font-size: var(--t-0);
  color: var(--tinta-suave);
  padding: 0.75rem 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.progresso li::before { content: counter(etapa) ". "; font-weight: 600; }
.progresso li.atual { color: var(--tinta); border-bottom-color: var(--celeste); font-weight: 600; }
.progresso li.feita { color: var(--manto); }

.formulario { padding-block: 2rem 4rem; max-width: 42rem; }

.formulario fieldset {
  border: 0;
  margin: 0 0 2.5rem;
  padding: 0;
  scroll-margin-top: 4rem;
}
.formulario legend {
  font-family: var(--serifa);
  font-size: var(--t-3);
  padding: 0;
  margin-bottom: 1.25rem;
}

.campo { margin-bottom: 1.25rem; }
.campo > label,
.campo > .rotulo {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.campo .dica { display: block; font-size: var(--t-0); color: var(--tinta-suave); margin-top: -0.2rem; margin-bottom: 0.4rem; font-weight: 400; }
.opcional { font-weight: 400; color: var(--tinta-suave); font-size: var(--t-0); }

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario input[type="date"],
.formulario input[type="number"],
.formulario select {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.85rem;
  font: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1.5px solid var(--linha);
  border-radius: 8px;
  appearance: none;
}
.formulario select {
  background-image: linear-gradient(45deg, transparent 50%, var(--manto) 50%), linear-gradient(135deg, var(--manto) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.formulario input:focus, .formulario select:focus { border-color: var(--manto); outline: none; box-shadow: 0 0 0 3px rgba(111, 183, 233, 0.45); }
.formulario [aria-invalid="true"] { border-color: var(--erro); }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.escolhas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.escolhas label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
}
.escolhas input { position: absolute; opacity: 0; pointer-events: none; }
.escolhas label:has(input:checked) { background: var(--manto); border-color: var(--manto); color: #fff; }
.escolhas label:has(input:focus-visible) { outline: 3px solid var(--celeste); outline-offset: 2px; }
.escolhas.invalido label { border-color: var(--erro); }

.pergunta {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linha);
}
.pergunta .rotulo { font-weight: 500; }
.pergunta:last-of-type { border-bottom: 1px solid var(--linha); }

.erro-campo { display: block; color: var(--erro); font-size: var(--t-0); margin-top: 0.35rem; }
.erro-campo:empty { display: none; }

[hidden] { display: none !important; }

.legenda-dica { font-size: var(--t-0); color: var(--tinta-suave); margin-top: -0.75rem; }
.campo--apos-perguntas { margin-top: 1.25rem; }
.escolhas + input, .escolhas + [data-mostrar-se] input, .pergunta [data-mostrar-se] { margin-top: 0.6rem; }
.termo__titulo { font: 600 var(--t-1)/1.4 var(--sans); margin: 1.75rem 0 0.5rem; }

.termo {
  background: #fff;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem 1.15rem;
  font-size: var(--t-0);
  line-height: 1.65;
  max-height: 16rem;
  overflow-y: auto;
  margin-bottom: 1rem;
}
.termo p:last-child { margin: 0; }

.aceite {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-weight: 600;
  cursor: pointer;
}
.aceite input { width: 1.4rem; height: 1.4rem; margin: 0.1rem 0 0; accent-color: var(--manto); flex: none; }

.armadilha { position: absolute; left: -9999px; }

.aviso-erro {
  background: #FCEDEC;
  color: var(--erro);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.enviar { width: 100%; }
@media (min-width: 40rem) { .enviar { width: auto; min-width: 16rem; } }

/* Tela de inscrição confirmada */
.confirmada {
  padding-block: 3rem 4rem;
  max-width: 36rem;
  text-align: center;
}
.cracha {
  background: #fff;
  border: 2px solid var(--celeste);
  border-radius: 14px;
  padding: 1.5rem 1rem 1.75rem;
  margin: 1.5rem 0 2rem;
}
.cracha__rotulo { color: var(--tinta-suave); font-size: var(--t-0); margin: 0; }
.cracha__numero {
  font-family: var(--serifa);
  font-size: clamp(4.5rem, 24vw, 8rem);
  line-height: 1;
  color: var(--manto);
  margin: 0.25rem 0 0.5rem;
}
.cracha__nome { font-family: var(--serifa); font-size: var(--t-3); line-height: 1.2; margin: 0; }
.aviso-spam {
  background: #FFF8E6;
  border: 1px solid #E9C46A;
  border-left-width: 5px;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0 0 2rem;
  text-align: left;
}
.aviso-spam p { margin: 0; }
.aviso-spam p + p { margin-top: 0.5rem; }
.confirmada .acoes { display: grid; gap: 0.75rem; justify-items: center; }

/* Valor no topo do formulário */
.valor-inscricao {
  display: grid; gap: 0.25rem;
  background: #fff; border-radius: var(--raio);
  box-shadow: inset 4px 0 0 var(--celeste);
  padding: 1rem 1.25rem; margin: 0 0 2rem;
}
.valor-inscricao p { margin: 0; }
.valor-inscricao__preco { font: 400 var(--t-3)/1.1 var(--serifa); color: var(--manto); }
.valor-inscricao__preco span { font: 600 var(--t-0)/1 var(--sans); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.5rem; vertical-align: middle; }
.valor-inscricao__inclui { font-size: var(--t-0); color: var(--tinta-suave); }

/* Pix na tela de confirmação */
.pix {
  background: #fff; border: 2px solid var(--celeste); border-radius: 14px;
  padding: 1.5rem 1rem; margin: 0 0 2rem;
  display: grid; justify-items: center; gap: 0.5rem;
}
.pix h3 { margin: 0; }
.pix p { margin: 0; }
.pix__valor { font: 400 var(--t-4)/1 var(--serifa); color: var(--manto); }
.pix__inclui, .pix__dica { font-size: var(--t-0); color: var(--tinta-suave); max-width: 28rem; }
.pix__qr { width: 240px; max-width: 100%; height: auto; image-rendering: pixelated; margin: 0.5rem 0; }
.pix__codigo {
  width: 100%; resize: none; padding: 0.6rem 0.75rem;
  font: 0.8rem/1.4 ui-monospace, Consolas, monospace; color: var(--tinta);
  background: var(--nevoa); border: 1px solid var(--linha); border-radius: 8px;
  word-break: break-all;
}
.pix-pago {
  background: #E3F4EA; color: #1E6B3A; border-radius: 10px;
  padding: 0.85rem 1rem; margin: 0 0 2rem; font-weight: 600;
}