/* ==========================================================================
   Páginas públicas
   ========================================================================== */

/* --- cabeçalho --- */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--creme) 92%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
/* O desfoque mora numa camada de fundo, não no cabeçalho.
   backdrop-filter no próprio container faz dele o bloco de referência de
   qualquer filho `position: fixed` — e o menu do celular, que deveria cobrir
   a tela, ficava preso dentro dos 68px do cabeçalho. */
.cabecalho::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.cabecalho[data-rolado] { border-bottom-color: var(--linha); }
.cabecalho__interno { display: flex; align-items: center; justify-content: space-between; gap: var(--e6); min-height: 86px; }
.cabecalho__marca { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.cabecalho__mono { width: 26px; color: var(--dourado); }
.cabecalho__nomes { font-family: var(--titulo); font-size: 17px; letter-spacing: .16em; }
.cabecalho__nomes em { color: var(--dourado-texto); font-style: normal; }
.cabecalho__nav { display: flex; align-items: center; gap: var(--e8); }
.cabecalho__nav a { text-decoration: none; }
.cabecalho__nav a:not(.botao) { position: relative; padding-bottom: 3px; }
.cabecalho__nav a:not(.botao)::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--dourado); transition: right .3s ease;
}
.cabecalho__nav a:not(.botao):hover::after { right: 0; }
.cabecalho__cta { padding: var(--e3) 22px; font-size: 12px; }
.cabecalho__alternar { display: none; }

/* --- capa --- */
.capa { position: relative; overflow: hidden; padding: var(--e12) 0; text-align: center; }
.capa__interno { position: relative; z-index: 2; }
.capa__marca-agua {
  position: absolute; left: 50%; top: 52%; translate: -50% -50%;
  width: min(560px, 55vw); color: var(--marinho); opacity: .07; z-index: 1;
}
.ramo { position: absolute; width: 380px; color: var(--dourado); pointer-events: none; z-index: 1; }
.ramo--esq { top: 54px; left: -46px; }
.ramo--dir { top: 54px; right: -46px; transform: scaleX(-1); }

.capa__titulo { margin: var(--e6) 0; }
.capa__titulo em { font-style: normal; color: var(--dourado-texto); }
.capa__data { font-family: var(--titulo); font-size: 26px; letter-spacing: .16em; text-transform: uppercase; margin: var(--e6) 0 var(--e1); }
.capa__local { color: var(--tinta-apoio); margin: 0; }

.contagem { display: flex; justify-content: center; gap: var(--e10); margin: var(--e9) 0; }
.contagem div { display: flex; flex-direction: column; gap: var(--e2); min-width: 64px; }
.contagem span { font-family: var(--titulo); font-size: 11px; letter-spacing: .30em; text-transform: uppercase; color: var(--dourado-texto); }

.acoes { display: flex; flex-wrap: wrap; gap: var(--e4); justify-content: center; }

/* --- seções --- */
.secao { padding: var(--e12) 0; }
.secao--areia { background: var(--areia); position: relative; overflow: hidden; }
.secao__cabeca { text-align: center; max-width: 760px; margin: 0 auto var(--e9); position: relative; z-index: 2; }
.secao__cabeca .t-secao { margin-top: var(--e5); }
.secao__olho { margin-top: var(--e5); }

/* fundo de aquarela: entra e sai sem borda */
.fundo-arte { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fundo-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; opacity: .34; }
.fundo-arte::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    var(--areia) 0%, color-mix(in srgb, var(--areia) 18%, transparent) 28%,
    color-mix(in srgb, var(--areia) 35%, transparent) 80%, var(--areia) 100%);
}

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e7); position: relative; z-index: 2; align-items: stretch; }
.cartao-info { background: var(--creme); border: 1px solid var(--linha); padding: var(--e9) var(--e8); text-align: center; display: flex; flex-direction: column; }
.cartao-info .t-card { margin: var(--e4) 0 var(--e4); }
.cartao-info__linha { margin: 2px 0; }
/* Recado que não é endereço nem horário: itálico e um respiro o separam
   dos dados do cartão sem precisar de mais uma borda dentro da caixa. */
.cartao-info__nota { margin-top: var(--e5); font-style: italic; color: var(--tinta-apoio); }

.cartao-info__link {
  margin-top: auto; padding-top: var(--e5);
  color: var(--dourado-texto); text-decoration: none;
}
.cartao-info__link:hover { text-decoration: underline; text-underline-offset: 4px; }

.chamada { padding: var(--e12) 0; text-align: center; }
.chamada__interno { max-width: 760px; margin: 0 auto; }
.chamada__mono { width: 58px; margin: 0 auto var(--e6); color: var(--dourado); }
.chamada .acoes { margin-top: var(--e7); }

/* --- rodapé --- */
.rodape { background: var(--marinho); color: var(--creme); padding: var(--e11) 0; text-align: center; }
.rodape__mono { width: 48px; margin: 0 auto var(--e5); color: var(--dourado-claro); }
.rodape__nomes { font-family: var(--titulo); font-size: 30px; letter-spacing: .1em; margin: 0 0 var(--e2); }
.rodape__data { color: var(--sobre-escuro); margin: 0 0 var(--e6); }
.rodape__nav { display: flex; gap: var(--e7); justify-content: center; flex-wrap: wrap; }
.rodape__nav a { text-decoration: none; color: var(--areia-forte); }
.rodape__nav a:hover { color: var(--dourado-claro); }

/* --- topo de página interna --- */
.topo-pagina { padding: var(--e11) 0 var(--e8); text-align: center; position: relative; }
.topo-pagina .c-olho { max-width: 620px; margin: var(--e5) auto 0; }

/* ==========================================================================
   Lista de presentes
   ========================================================================== */
.filtros { display: flex; gap: var(--e3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--e9); }
.filtro {
  padding: 11px 18px; border-radius: 40px; cursor: pointer;
  border: 1px solid var(--linha); background: transparent; color: var(--tinta-apoio);
  transition: background .2s, color .2s, border-color .2s;
}
.filtro[aria-pressed="true"] { background: var(--marinho); border-color: var(--marinho); color: var(--creme); }

.grade-presentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--e7); align-items: stretch; }
.presente { border: 1px solid var(--linha); background: var(--creme); display: flex; flex-direction: column; }
.presente__imagem {
  position: relative; aspect-ratio: 4 / 3; background: var(--areia-forte);
  display: grid; place-items: center; overflow: hidden;
}
.presente__imagem img { width: 100%; height: 100%; object-fit: cover; }
.presente__vazio { width: 42px; color: var(--icone-vazio); }
.presente__selo {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: var(--marinho); color: var(--creme);
  padding: 7px 14px;
}
.presente__corpo { padding: var(--e6); display: flex; flex-direction: column; flex: 1; }
.presente__titulo { margin: var(--e2) 0 var(--e2); }
.presente__descricao { color: var(--tinta-apoio); margin: 0 0 var(--e4); }
.presente__preco { margin: auto 0 0; }
.presente__cotas { color: var(--tinta-apoio); margin: var(--e1) 0 0; }
.presente__botao { margin-top: var(--e5); }
.presente--esgotado .presente__imagem img { filter: grayscale(1); opacity: .55; }

/* --- estado vazio --- */
.vazio { text-align: center; border: 1px solid var(--linha); background: var(--creme); padding: var(--e11) var(--e8); max-width: 680px; margin: 0 auto; }
.vazio .filete { margin: var(--e6) auto; }
.vazio .acoes { margin-top: var(--e7); }

/* ==========================================================================
   Menu sanduíche
   ========================================================================== */
/* O menu vira sanduíche antes do resto do layout: com Padrinhos e Pajens são
   cinco itens mais o botão, e abaixo de 1100px eles quebravam em duas linhas. */
@media (max-width: 1100px) {
  .cabecalho__interno { min-height: 68px; }
  .cabecalho__alternar {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  }
  .cabecalho__alternar span { display: block; height: 1px; width: 22px; background: var(--marinho); transition: transform .3s, opacity .3s; }
  .cabecalho__alternar[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .cabecalho__alternar[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

  .cabecalho__nav {
    position: fixed; inset: 68px 0 0; background: var(--creme);
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 0; padding: 0 var(--margem-mobile) var(--e10);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
    overflow-y: auto;
  }
  .cabecalho__nav[data-aberto] { opacity: 1; visibility: visible; transform: none; }
  .cabecalho__nav a:not(.botao) {
    font-family: var(--titulo); font-size: 38px; letter-spacing: .02em; text-transform: none;
    padding: 18px 0; border-bottom: 1px solid var(--linha);
  }
  .cabecalho__nav a:not(.botao)::after { display: none; }
  .cabecalho__cta { margin-top: var(--e7); padding: 19px; font-size: 14px; }
}

/* ==========================================================================
   Telefone
   ========================================================================== */
@media (max-width: 860px) {

  .capa { padding: var(--e10) 0; }
  /* No telefone os ramos cruzam o kicker e o nome. Sem espaço lateral para
     eles respirarem, a capa fica melhor só com a tipografia. */
  .ramo { display: none; }
  .capa__data { font-size: 17px; letter-spacing: .14em; }
  .contagem { gap: var(--e6); margin: var(--e8) 0; }
  .contagem .t-numero { font-size: 32px; }
  .acoes { flex-direction: column; }
  .acoes .botao { width: 100%; }
  .secao, .chamada, .topo-pagina { padding: var(--e10) 0; }
  .cartoes, .grade-presentes { grid-template-columns: 1fr; gap: var(--e5); }
  .campos-lado { flex-direction: column; gap: 0; }
}

/* ==========================================================================
   Convite e confirmação
   ========================================================================== */
.convite { position: relative; overflow: hidden; padding-bottom: var(--e11); }
.convite__arte { position: absolute; inset: 0 0 auto; height: 62%; z-index: 0; overflow: hidden; }
.convite__arte img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 40%; opacity: .38; }
.convite__arte::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--creme) 88%, transparent) 0%,
    color-mix(in srgb, var(--creme) 62%, transparent) 30%,
    color-mix(in srgb, var(--creme) 28%, transparent) 58%,
    var(--creme) 100%);
}
.convite__topo { position: relative; z-index: 2; text-align: center; padding: var(--e11) 0 var(--e9); }
/* sobre a aquarela o dourado precisa da variante mais escura */
.convite__kicker { color: var(--dourado-arte); }
.convite__nomes { margin: var(--e4) 0; }
.convite__nomes em { font-style: normal; color: var(--dourado-arte); }
.convite__data { color: var(--tinta); margin-top: var(--e4); }
.convite__corpo { position: relative; z-index: 2; }
.convite__cartao { max-width: 720px; margin: 0 auto; padding: var(--e9) var(--e8); }

.pessoas { margin: var(--e8) 0 var(--e6); }
.pessoa { padding: var(--e4) 0; border-bottom: 1px solid var(--linha); }
.pessoa:last-child { border-bottom: 0; }
.pessoa__nome { margin-bottom: var(--e3); }
.pessoa__opcoes { display: flex; gap: var(--e3); }
.opcao { flex: 1; position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcao span {
  display: block; text-align: center; cursor: pointer;
  padding: 14px; border: 1px solid var(--linha); border-radius: var(--raio);
  color: var(--tinta-apoio); transition: background .2s, color .2s, border-color .2s;
}
.opcao input:focus-visible + span { outline: 2px solid var(--dourado-texto); outline-offset: 2px; }
.opcao--sim input:checked + span { background: var(--verde-texto); border-color: var(--verde-texto); color: var(--branco); }
.opcao--nao input:checked + span { background: var(--vermelho-texto); border-color: var(--vermelho-texto); color: var(--branco); }

.selo { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto var(--e5); border-radius: 50%; }
.selo--ok { border: 1px solid var(--verde-texto); color: var(--verde-texto); }
.selo__rotulo { text-align: center; color: var(--verde-texto); margin-bottom: var(--e3); }

.resumo { list-style: none; margin: var(--e7) 0; padding: var(--e5) var(--e6); background: var(--papel); }
.resumo li { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); padding: 9px 0; }
.estado--sim { color: var(--verde-texto); }
.estado--nao { color: var(--vermelho-texto); }
.estado--pendente { color: var(--tinta-apoio); }

.ligacao {
  display: block; margin: var(--e4) auto 0; background: none; border: 0; cursor: pointer;
  color: var(--tinta-apoio); text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 860px) {
  .convite__topo { padding: var(--e10) 0 var(--e8); }
  .convite__cartao { padding: var(--e7) var(--e5); }
  .pessoa__opcoes { gap: var(--e2); }
}

.convite--erro { min-height: 70vh; display: grid; place-items: center; }
.erro__interno { position: relative; z-index: 2; text-align: center; max-width: 620px; margin: 0 auto; padding: var(--e11) 0; }

/* ---- Padrinhos e pajens ------------------------------------------------ */
/* O roteiro é uma tabela de horários disfarçada: a hora precisa alinhar em
   coluna para o olho pular direto no 16h15, que é a informação que muda o dia. */
.roteiro { max-width: 620px; margin: 0 auto; }
.roteiro__linha {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--e6);
  align-items: baseline; padding: var(--e5) 0; border-bottom: 1px solid var(--linha);
}
.roteiro__linha:first-child { border-top: 1px solid var(--linha); }
.roteiro__hora {
  font-family: var(--titulo); font-size: 22px; letter-spacing: .02em;
  color: var(--tinta); margin: 0;
}
.roteiro__evento { font-family: var(--corpo); font-size: 19px; line-height: 1.4; margin: 0; }
.roteiro__evento .c-legenda { display: block; margin-top: 4px; }
.roteiro__linha--marcada .roteiro__hora { color: var(--dourado-texto); }


@media (max-width: 860px) {
  .roteiro__linha { grid-template-columns: 76px 1fr; gap: var(--e4); }
  .roteiro__hora { font-size: 19px; }
  .roteiro__evento { font-size: 17px; }
}