/* =========================================================
   Theo - 1 ano | convite
   Mobile-first. Paleta oficial do convite impresso.
   ========================================================= */

:root {
  --creme:     #F8F7F3;
  --areia:     #E7DDCC;
  --bege:      #D8C9B2;
  --verde:     #8D9E84;
  --verde-esc: #5C6B54;
  --sage:      #A8B1A5;
  --terracota: #A56C46;
  --marrom:    #6F4A34;
  --sol:       #E9B949;

  --texto:      #4A4038;
  --texto-fraco:#7C7167;

  --raio:    18px;
  --raio-sm: 12px;
  --sombra:      0 2px 10px rgba(111, 74, 52, .06);
  --sombra-alta: 0 10px 30px rgba(111, 74, 52, .12);

  --fonte:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-mao:'Caveat', cursive;

  --largura: 560px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

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

/* precisa vir antes das classes que definem display (flex/grid) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background-color: var(--creme);
  /* textura de papel bem sutil + halos de cor nas pontas */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%,   rgba(232, 221, 204, .55), transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(141, 158, 132, .22), transparent 70%);
  background-attachment: fixed;
  overflow-x: hidden;
  padding-bottom: calc(84px + var(--safe-b));
}

main { position: relative; z-index: 1; }

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

/* ---------------- folhinhas de fundo ---------------- */

.fundo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.folha {
  position: absolute;
  width: 26px;
  height: 26px;
  opacity: .35;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3C10 3 3 9 3 17c0 2 1 4 1 4s3-9 15-13c0 0-8 4-11 13 7 2 13-3 13-18z' fill='%238D9E84'/%3E%3C/svg%3E");
  animation: flutuar 18s ease-in-out infinite;
}

.folha--1 { top:  8%; left:  4%; animation-duration: 16s; }
.folha--2 { top: 26%; right: 6%; animation-duration: 22s; animation-delay: -4s; transform: scaleX(-1); }
.folha--3 { top: 52%; left:  8%; animation-duration: 19s; animation-delay: -9s; width: 20px; height: 20px; }
.folha--4 { top: 72%; right: 5%; animation-duration: 24s; animation-delay: -2s; transform: scaleX(-1); }
.folha--5 { top: 90%; left: 12%; animation-duration: 20s; animation-delay: -13s; width: 18px; height: 18px; }

@keyframes flutuar {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  33%      { transform: translateY(-22px) rotate(9deg); }
  66%      { transform: translateY(10px)  rotate(-7deg); }
}

/* ---------------- faixa de status ---------------- */

.faixa-status {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--verde);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(92, 107, 84, .25);
  animation: descer .5s ease both;
}

.faixa-status__link {
  border: 1px solid rgba(255,255,255,.6);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  padding: 2px 12px;
  border-radius: 999px;
  cursor: pointer;
}

@keyframes descer {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

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

.hero {
  position: relative;
  text-align: center;
  padding: 20px 20px 60px;
  max-width: var(--largura);
  margin: 0 auto;
}

.hero__logo {
  animation: surgir 1.1s cubic-bezier(.2, .8, .3, 1) both;
}

.hero__logo img {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  /* respiro leve, como se o desenho estivesse vivo */
  animation: respirar 7s ease-in-out 1.2s infinite;
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes respirar {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

.hero__data {
  font-family: var(--fonte-mao);
  font-size: 26px;
  color: var(--terracota);
  margin: 4px 0 22px;
  letter-spacing: .3px;
}

.hero__contagem {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}

.contagem__item {
  min-width: 72px;
  padding: 10px 6px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--areia);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra);
}

.contagem__item strong {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  color: var(--verde-esc);
  font-variant-numeric: tabular-nums;
}

.contagem__item span {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.hero__seta {
  width: 22px;
  height: 22px;
  margin: 34px auto 0;
  border-right: 2.5px solid var(--sage);
  border-bottom: 2.5px solid var(--sage);
  border-radius: 3px;
  transform: rotate(45deg);
  animation: pular 2.2s ease-in-out infinite;
  opacity: .8;
}

@keyframes pular {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .8; }
  50%      { transform: rotate(45deg) translate(5px, 5px); opacity: .35; }
}

/* ---------------- estrutura de secao ---------------- */

.secao {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 46px 20px;
}

.titulo-secao {
  font-size: 24px;
  font-weight: 800;
  color: var(--verde-esc);
  text-align: center;
  margin: 0 0 26px;
  letter-spacing: -.01em;
}

/* traco de pincel embaixo do titulo */
.titulo-secao::after {
  content: '';
  display: block;
  width: 54px;
  height: 5px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: var(--bege);
}

.titulo-secao--manuscrito {
  font-family: var(--fonte-mao);
  font-size: 34px;
  font-weight: 700;
  color: var(--terracota);
}

.secao__intro,
.secao__rodape {
  text-align: center;
  color: var(--texto-fraco);
  font-size: 15.5px;
  margin: 0 0 22px;
}

.secao__rodape { margin: 22px 0 0; font-style: italic; }

/* ---------------- cartoes ---------------- */

.cartao {
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--areia);
  border-radius: var(--raio);
  padding: 22px;
  box-shadow: var(--sombra);
  backdrop-filter: blur(2px);
}

.cartao--texto {
  text-align: center;
  padding: 28px 22px;
}

.cartao--texto p { margin: 0 0 14px; }
.cartao--texto p:last-child { margin-bottom: 0; }

.destaque-manuscrito {
  font-family: var(--fonte-mao);
  font-size: 30px;
  color: var(--verde-esc);
  line-height: 1.2;
}

.faixa-pincel {
  margin-top: 22px !important;
  padding: 12px 18px;
  background: var(--verde);
  color: #fff;
  border-radius: 999px;
  font-family: var(--fonte-mao);
  font-size: 23px;
  line-height: 1.3;
}

/* ---------------- jornada dos 12 meses ---------------- */

/* Caminho estilo "trilha de niveis": os meses alternam esquerda/direita e
   um tracejado curvo liga um ao outro. O tracejado e desenhado com borda
   + border-radius no ::after de cada etapa (menos a ultima). */

.jornada {
  --no: 104px;      /* diametro do circulo da foto */
  --degrau: 46px;   /* altura do trecho de tracejado entre dois meses */

  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 380px;
}

.etapa {
  position: relative;
  width: 50%;
  margin-bottom: var(--degrau);
}

/* zigue-zague: pares vao pra direita */
.etapa:nth-child(even) { margin-left: 50%; }

.etapa:last-child { margin-bottom: 0; }

/* o tracejado que sai desta etapa e chega na proxima */
.etapa:not(:last-child)::after {
  content: '';
  position: absolute;
  top: var(--no);
  width: 100%;
  height: calc(var(--degrau) + 28px);
  border-top: 3px dashed var(--bege);
}

/* impar -> par: desce pela direita */
.etapa:nth-child(odd):not(:last-child)::after {
  left: 50%;
  border-right: 3px dashed var(--bege);
  border-top-right-radius: 46px;
}

/* par -> impar: desce pela esquerda */
.etapa:nth-child(even):not(:last-child)::after {
  right: 50%;
  border-left: 3px dashed var(--bege);
  border-top-left-radius: 46px;
}

.etapa__no {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: var(--no);
  margin: 0 auto;
}

.etapa__foto {
  position: relative;
  width: var(--no);
  height: var(--no);
  border-radius: 26px;          /* quadradinho de canto bem arredondado */
  overflow: hidden;
  background: var(--areia);
  border: 4px solid #fff;
  box-shadow: var(--sombra-alta);
  transition: transform .3s ease;
}

.etapa:hover .etapa__foto { transform: scale(1.06) rotate(-2deg); }

/* o placeholder listrado e o fundo da moldura, sempre presente */
.etapa__foto {
  background: repeating-linear-gradient(
    45deg, var(--areia), var(--areia) 9px, var(--bege) 9px, var(--bege) 18px
  );
}

.etapa__numero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-mao);
  font-size: 46px;
  font-weight: 700;
  color: var(--verde-esc);
  opacity: .65;
}

/* a foto nasce invisivel por cima e so aparece quando carrega */
.etapa__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;   /* rosto costuma ficar acima do centro */
  opacity: 0;
  transition: opacity .5s ease;
}

.etapa__foto img.carregou { opacity: 1; }

/* o ultimo mes e o aniversario: ganha destaque */
.etapa--espera .etapa__foto {
  border-color: var(--terracota);
  box-shadow: 0 0 0 5px rgba(165, 108, 70, .18), var(--sombra-alta);
  background: rgba(165, 108, 70, .12);
}

.etapa__numero--espera {
  font-size: 40px;
  color: var(--terracota);
  opacity: .8;
  animation: bater 2.4s ease-in-out infinite;
}

@keyframes bater {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

.etapa__mes {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde-esc);
  background: rgba(255, 255, 255, .85);
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--areia);
  white-space: nowrap;
}

.etapa--espera .etapa__mes {
  color: #fff;
  background: var(--terracota);
  border-color: var(--terracota);
}

.etapa__legenda {
  font-family: var(--fonte-mao);
  font-size: 19px;
  line-height: 1.15;
  color: var(--terracota);
  text-align: center;
}

.jornada__fim {
  margin: 34px 0 0;
  text-align: center;
  font-family: var(--fonte-mao);
  font-size: 25px;
  line-height: 1.3;
  color: var(--verde-esc);
}

/* a etapa entra "pulando", como nos joguinhos */
.etapa.visivel .etapa__foto { animation: chegar .55s cubic-bezier(.2, 1.5, .4, 1) both; }

@keyframes chegar {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* ---------------- galeria de fotos do local ---------------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.foto { margin: 0; }

/* numero impar de fotos: a ultima ocupa a linha toda em vez de ficar torta */
.galeria .foto:last-child:nth-child(odd) { grid-column: 1 / -1; }
.galeria .foto:last-child:nth-child(odd) .foto__moldura { aspect-ratio: 16 / 9; }

.foto__moldura {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--areia);
  border: 3px solid #fff;
  box-shadow: var(--sombra);
}

/* mesma ideia da jornada: placeholder atras, foto entra por cima */
.foto__moldura {
  background: repeating-linear-gradient(
    45deg, var(--areia), var(--areia) 9px, var(--bege) 9px, var(--bege) 18px
  );
}

.foto__moldura::after {
  content: 'foto em breve';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-mao);
  font-size: 21px;
  color: var(--verde-esc);
  opacity: .7;
}

.foto__moldura img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}

.foto__moldura img.carregou { opacity: 1; }

.foto__legenda {
  margin-top: 7px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--texto-fraco);
}

/* --- grade de informacoes --- */

.grade-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.cartao--info {
  text-align: center;
  padding: 20px 14px;
  transition: transform .35s ease, box-shadow .35s ease;
}

.cartao--info:hover,
.cartao--info:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}

.cartao--largo { grid-column: 1 / -1; }

.cartao--info h3 {
  margin: 12px 0 6px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde-esc);
}

.cartao--info p {
  margin: 0;
  font-size: 15px;
  color: var(--texto-fraco);
  line-height: 1.5;
}

/* --- destaque do almoco (o 1 kg de carne) --- */

.destaque {
  margin-top: 16px;
  padding: 24px 20px;
  text-align: center;
  color: #fff;
  background: var(--terracota);
  border-radius: var(--raio);
  box-shadow: 0 8px 24px rgba(165, 108, 70, .3);
}

.destaque__topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* margin:0 (nao auto): dentro de flex o auto empurra e desalinha o grupo */
.destaque__topo .icone { width: 32px; height: 32px; margin: 0; }

.destaque__etiqueta {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
}

.destaque__principal {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.destaque__principal strong {
  display: block;
  font-family: var(--fonte-mao);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 2px;
}

.destaque__nota {
  display: block;
  margin-top: 4px;
  font-family: var(--fonte);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  opacity: .9;
}

.destaque__texto {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  opacity: .95;
}

.destaque__texto--extra {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .3);
}

/* --- o sitio --- */

.grade-sitio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ---------------- icones ---------------- */

.icone {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  background-color: var(--verde-esc);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icone--grande { width: 56px; height: 56px; }

.icone--mini {
  width: 26px;
  height: 26px;
  margin: 0;
  flex: none;
}

.icone--claro { background-color: #fff; }

/* balanco carinhoso ao entrar em cena */
.reveal.visivel .icone { animation: balancar 2.4s ease-in-out .3s 1; }

@keyframes balancar {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-7deg); }
  60%      { transform: rotate(5deg); }
}

/* --- lista "o que levar" --- */

.lista-levar {
  list-style: none;
  margin: 0;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 10px;
  background: var(--areia);
  border-radius: var(--raio);
  border: 1px dashed var(--bege);
}

.lista-levar li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--marrom);
  font-weight: 600;
}

.lista-levar .icone { background-color: var(--terracota); }

/* ---------------- local ---------------- */

.cartao--local { text-align: center; }

.local__nome {
  margin: 12px 0 4px;
  font-size: 21px;
  color: var(--verde-esc);
}

.local__endereco {
  margin: 0 0 14px;
  color: var(--texto-fraco);
  font-size: 15px;
}

/* o botao de copiar precisa de ar depois do botao grande do mapa */
.cartao--local .botao--fantasma { margin-top: 16px; }

.local__dica {
  margin: 0 0 22px;
  font-family: var(--fonte-mao);
  font-size: 22px;
  line-height: 1.4;
  color: var(--terracota);
}

/* ---------------- presentes ---------------- */

.grade-presentes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.presente {
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--areia);
  border-radius: var(--raio);
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--sombra);
  transition: transform .35s ease, box-shadow .35s ease;
}

.presente:hover {
  transform: translateY(-4px) rotate(-.6deg);
  box-shadow: var(--sombra-alta);
}

.icone--presente {
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto 10px;
  background-color: var(--terracota);
}

.presente__nome {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--verde-esc);
}

.presente__nota {
  margin: 0;
  font-size: 13.5px;
  color: var(--texto-fraco);
  line-height: 1.45;
}

/* --- lista pronta (Amazon) --- */

.cartao--lista {
  margin-top: 14px;
  text-align: center;
  border-style: dashed;
}

.lista__titulo {
  margin: 0 0 6px;
  font-family: var(--fonte-mao);
  font-size: 26px;
  color: var(--verde-esc);
  line-height: 1.2;
}

.lista__texto {
  margin: 0;
  font-size: 15px;
  color: var(--texto-fraco);
  line-height: 1.5;
}

/* ---------------- botoes ---------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.botao:active { transform: scale(.97); }

.botao--principal {
  background: var(--terracota);
  color: #fff;
  box-shadow: 0 6px 18px rgba(165, 108, 70, .32);
}

.botao--principal:hover { background: #96603d; }

.botao--mapa {
  background: var(--verde);
  color: #fff;
  width: 100%;
  padding: 19px 24px;
  font-size: 17.5px;
  box-shadow: 0 6px 20px rgba(141, 158, 132, .4);
}

.botao--mapa:hover { background: var(--verde-esc); }

.botao--amazon {
  background: #FF9900;
  color: #232F3E;
  box-shadow: 0 6px 18px rgba(255, 153, 0, .35);
}

.botao--amazon:hover { background: #eb8c00; }

/* verde: usado no "Confirmar" pra nao se confundir com a barra fixa terracota */
.botao--verde {
  background: var(--verde);
  color: #fff;
  box-shadow: 0 6px 18px rgba(141, 158, 132, .38);
}

.botao--verde:hover { background: var(--verde-esc); }

/* botao de presente na tela de sucesso */
.botao--presente {
  background: #fff;
  color: var(--terracota);
  border: 1.5px solid var(--terracota);
}

.botao--presente:hover { background: rgba(165, 108, 70, .08); }

.botao--fantasma {
  background: transparent;
  color: var(--texto-fraco);
  border: 1.5px solid var(--bege);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
}

.botao--fantasma:hover { background: rgba(216, 201, 178, .25); }

.botao--bloco { width: 100%; margin-top: 10px; }

/* pulsar de leve pra chamar atencao no CTA principal do hero */
.hero .botao--principal { animation: pulsar 3.2s ease-in-out 2s infinite; }

@keyframes pulsar {
  0%, 100% { box-shadow: 0 6px 18px rgba(165, 108, 70, .32); }
  50%      { box-shadow: 0 6px 26px rgba(165, 108, 70, .55); }
}

/* ---------------- formulario / RSVP ---------------- */

.cartao--rsvp { padding: 24px 20px; }

.passo__ajuda {
  margin: 0 0 16px;
  text-align: center;
  color: var(--texto-fraco);
  font-size: 15.5px;
}

.passo__ajuda--aviso {
  background: rgba(216, 201, 178, .35);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  color: var(--marrom);
}

.passo__saudacao {
  margin: 0;
  text-align: center;
  font-family: var(--fonte-mao);
  font-size: 28px;
  color: var(--terracota);
}

.passo__familia {
  margin: 2px 0 18px;
  text-align: center;
  font-size: 21px;
  color: var(--verde-esc);
}

.campo { display: block; margin-bottom: 16px; }

.campo__rotulo {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 17px; /* >=16px evita zoom automatico no iOS */
  color: var(--texto);
  background: #fff;
  border: 1.5px solid var(--bege);
  border-radius: var(--raio-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(141, 158, 132, .2);
}

.campo__erro {
  margin: -8px 0 14px;
  color: var(--terracota);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* --- lista de pessoas (checkbox como cartao) --- */

.lista-pessoas { margin-bottom: 18px; }

.pessoa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 9px;
  background: #fff;
  border: 1.5px solid var(--bege);
  border-radius: var(--raio-sm);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.pessoa:has(input:checked) {
  border-color: var(--verde);
  background: rgba(141, 158, 132, .1);
}

.pessoa input {
  appearance: none;
  width: 24px;
  height: 24px;
  flex: none;
  border: 2px solid var(--bege);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.pessoa input:checked {
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px no-repeat;
  border-color: var(--verde);
  animation: marcar .3s ease;
}

@keyframes marcar {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.pessoa__nome { font-weight: 700; font-size: 16.5px; }

.pessoa__tag {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--terracota);
  background: rgba(165, 108, 70, .12);
  padding: 3px 10px;
  border-radius: 999px;
}

/* aviso do churrasco dentro do passo da familia */
.aviso-carne {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 13px 16px;
  background: rgba(165, 108, 70, .1);
  border: 1px solid rgba(165, 108, 70, .25);
  border-radius: var(--raio-sm);
}

.aviso-carne .icone { background-color: var(--terracota); width: 30px; height: 30px; }

.aviso-carne p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--marrom);
}

/* --- contador de pessoas --- */

.contador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #fff;
  border: 1.5px solid var(--bege);
  border-radius: var(--raio-sm);
  padding: 8px;
}

.contador__botao {
  width: 46px;
  height: 46px;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  color: var(--verde-esc);
  background: var(--areia);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}

.contador__botao:hover  { background: var(--bege); }
.contador__botao:active { transform: scale(.9); }

.contador__valor {
  min-width: 40px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--verde-esc);
  font-variant-numeric: tabular-nums;
}

/* --- sucesso --- */

.passo--sucesso { text-align: center; }

.selo-sucesso {
  width: 84px;
  height: 84px;
  margin: 4px auto 16px;
  border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 46px no-repeat;
  animation: selar .6s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes selar {
  from { transform: scale(0) rotate(-25deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}

.sucesso__titulo {
  margin: 0 0 8px;
  font-size: 23px;
  color: var(--verde-esc);
}

.sucesso__resumo {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--texto);
}

.sucesso__nota {
  margin: 0 0 20px;
  color: var(--texto-fraco);
  font-size: 15px;
}

/* bloco de sugestao de presente na tela de sucesso */
.sucesso__presente {
  margin: 0 0 16px;
  padding: 16px;
  background: rgba(216, 201, 178, .2);
  border-radius: var(--raio-sm);
}

.sucesso__presente-nota {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--texto-fraco);
}

.sucesso__presente .botao { margin-top: 0; }

/* ---------------- rodape ---------------- */

.rodape {
  text-align: center;
  padding: 40px 24px 50px;
  background: var(--areia);
  margin-top: 30px;
}

.rodape__frase {
  max-width: 380px;
  margin: 0 auto 14px;
  font-family: var(--fonte-mao);
  font-size: 25px;
  line-height: 1.35;
  color: var(--marrom);
}

.rodape__assinatura {
  margin: 0;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--verde-esc);
  font-weight: 700;
}

/* ---------------- barra fixa ---------------- */

.barra-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  padding: 12px 16px calc(12px + var(--safe-b));
  background: rgba(248, 247, 243, .93);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--areia);
  animation: subir .35s ease both;
}

.barra-fixa .botao { margin-top: 0; }

@keyframes subir {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ---------------- aviso flutuante ---------------- */

.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(96px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 40;
  padding: 11px 20px;
  background: var(--verde-esc);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  animation: avisar .3s ease both;
}

@keyframes avisar {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------------- confete ---------------- */

.confete {
  position: fixed;
  top: -14px;
  z-index: 50;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  pointer-events: none;
  animation: cair linear forwards;
}

@keyframes cair {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ---------------- reveal on scroll ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1);
}

.reveal.visivel { opacity: 1; transform: none; }

/* atraso escalonado dentro das grades */
.grade-info .reveal:nth-child(2),
.grade-sitio .reveal:nth-child(2),
.grade-presentes .reveal:nth-child(2) { transition-delay: .08s; }
.grade-info .reveal:nth-child(3),
.grade-sitio .reveal:nth-child(3),
.grade-presentes .reveal:nth-child(3) { transition-delay: .16s; }
.grade-info .reveal:nth-child(4),
.grade-sitio .reveal:nth-child(4),
.grade-presentes .reveal:nth-child(4) { transition-delay: .24s; }
.grade-info .reveal:nth-child(5),
.grade-sitio .reveal:nth-child(5),
.grade-presentes .reveal:nth-child(5) { transition-delay: .32s; }
.grade-presentes .reveal:nth-child(6) { transition-delay: .40s; }

/* ---------------- telas maiores ---------------- */

@media (min-width: 620px) {
  body { font-size: 18px; padding-bottom: 0; }

  .hero { padding-top: 40px; }
  .hero__logo img { max-width: 520px; }

  .titulo-secao { font-size: 28px; }

  .grade-info,
  .grade-sitio     { grid-template-columns: repeat(3, 1fr); }
  .destaque        { padding: 30px 28px; }
  .grade-presentes { grid-template-columns: repeat(3, 1fr); }
  .lista-levar     { grid-template-columns: repeat(3, 1fr); }

  .cartao--largo { grid-column: auto; }

  .barra-fixa { display: none; }
  .aviso { bottom: 32px; }
}

/* ---------------- acessibilidade ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal { opacity: 1; transform: none; }
}

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