/* =========================================================================
   site.css — o site do casal (/site/).
   Cores, letras e o enfeite vêm do modelo (modelos.css); este arquivo só
   arruma a página. Os três formatos mudam apenas a capa e o ritmo:
     [data-formato="classico"]   centralizado, foto em arco
     [data-formato="cheio"]      foto ocupando a tela, nomes por cima
     [data-formato="editorial"]  duas colunas, foto ao lado
   ========================================================================= */

.site{
  background: var(--papel-alto);
  background-image: none;
  color: var(--tinta);
  font-family: var(--texto);
}
.site img{ display: block; width: 100%; height: 100%; object-fit: cover; }

.eyebrow{
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3em;
  color: var(--magenta);
  margin-bottom: 1rem;
}
.site h2{
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.site h3{ font-family: var(--display); font-size: 1.6rem; margin-bottom: 1rem; }

.nomes{
  font-family: var(--nomes);
  font-size: calc(clamp(3.2rem, 11vw, 7.5rem) * var(--nomes-escala));
  text-transform: var(--nomes-caixa);
  letter-spacing: var(--nomes-espaco);
  line-height: 1;
  font-weight: 400;
}
.nomes__e{ font-family: var(--display); font-style: italic; color: var(--magenta); font-size: .5em; text-transform: none; letter-spacing: 0; }
[data-modelo="branco"] .nomes{ font-weight: 200; }
[data-modelo="terracota"] .nomes, [data-modelo="azulejo"] .nomes{ font-style: italic; }
[data-modelo="marsala"] .nomes__e{ font-family: "Pinyon Script", cursive; font-style: normal; }

.fio{ display: flex; align-items: center; gap: .9rem; width: min(16rem, 60%); color: var(--magenta); margin: 1.2rem auto; }
.fio span{ flex: 1; height: 1px; background: currentColor; opacity: .5; }
.fio em::before{ content: var(--glifo); font-style: normal; }

.botao{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .8rem 1.6rem;
  border: 1px solid var(--magenta); border-radius: 999px;
  background: var(--magenta); color: var(--papel-alto);
  font: 500 .95rem/1 var(--texto); letter-spacing: .04em;
  text-decoration: none; cursor: pointer;
  transition: filter .2s, background .2s, color .2s;
}
.botao:hover{ filter: brightness(1.08); }
.botao--linha{ background: transparent; color: var(--magenta); }
.botao--linha:hover{ background: var(--magenta); color: var(--papel-alto); filter: none; }

/* --------------------------------------------------------- barra da demo */
.demo{
  position: relative; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem 1.2rem;
  padding: .55rem 1rem;
  background: #17161b; color: #efece4;
  font: 400 .78rem/1.2 "Archivo", system-ui, sans-serif;
}
.demo__marca{ font-family: "Bodoni Moda", serif; font-weight: 700; font-size: 1rem; text-decoration: none; color: #efece4; }
.demo__marca span{ color: #d6246e; font-style: italic; font-weight: 400; }
.demo label{ display: flex; align-items: center; gap: .5rem; color: rgba(239,236,228,.6); text-transform: uppercase; letter-spacing: .16em; font-size: .66rem; }
.demo select{
  font: inherit; font-size: .8rem; letter-spacing: 0; text-transform: none;
  padding: .35rem .6rem; border-radius: 999px;
  border: 1px solid rgba(239,236,228,.25); background: #23222a; color: #efece4;
}
.demo__link{ color: #efece4; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ menu */
.menu{
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--margem);
  background: color-mix(in srgb, var(--papel-alto) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha-fina);
  font-size: .85rem;
}
.menu__mono{ font-family: var(--display); font-size: 1.3rem; text-decoration: none; letter-spacing: .06em; }
.menu__mono i{ color: var(--magenta); }
.menu__links{ display: flex; align-items: center; gap: 1.4rem; }
.menu__links a{ text-decoration: none; color: var(--tinta-2); }
.menu__links a:hover{ color: var(--tinta); }
.menu__links .menu__rsvp{ color: var(--magenta); font-weight: 600; }
/* no celular os links viram uma faixa que rola de lado (são muitas seções) */
@media (max-width: 640px){
  .menu{ gap: .8rem; }
  .menu__mono{ flex: none; white-space: nowrap; }
  .menu__links{
    flex: 1; min-width: 0; justify-content: flex-start;
    gap: 1.1rem; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 .8rem, #000 calc(100% - 1.6rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 .8rem, #000 calc(100% - 1.6rem), transparent);
    padding: .2rem .8rem; white-space: nowrap;
  }
  .menu__links::-webkit-scrollbar{ display: none; }
  .menu__links .menu__rsvp{ order: -1; }
}

/* ------------------------------------------------------------------ capa */
.capa{ position: relative; }
.capa__texto{ text-align: center; display: flex; flex-direction: column; align-items: center; }
.capa__data{ font-family: var(--display); font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--tinta-2); }

.contagem{
  list-style: none; margin: 2rem 0; padding: 0;
  display: flex; gap: clamp(1.2rem, 4vw, 2.8rem);
}
.contagem li{ display: grid; justify-items: center; }
.contagem b{ font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.contagem span{ font-size: .7rem; text-transform: uppercase; letter-spacing: .24em; color: var(--tinta-2); margin-top: .4rem; }

/* clássico: texto em cima, foto em arco embaixo */
[data-formato="classico"] .capa{
  display: flex; flex-direction: column-reverse; align-items: center; gap: 2.5rem;
  padding: clamp(3rem, 8vw, 6rem) var(--margem) clamp(2rem, 5vw, 4rem);
}
[data-formato="classico"] .capa__foto{
  margin: 0; width: min(26rem, 82vw); aspect-ratio: 4 / 5;
  border-radius: 999px 999px 6px 6px; overflow: hidden;
  outline: 1px solid var(--linha); outline-offset: 10px;
}

/* tela cheia: a foto é o fundo, o texto vai por cima */
[data-formato="cheio"] .capa{
  min-height: calc(100dvh - 5.4rem);
  display: grid; place-items: center;
  padding: 4rem var(--margem);
  color: #fff;
}
[data-formato="cheio"] .capa__foto{ position: absolute; inset: 0; margin: 0; }
[data-formato="cheio"] .capa__foto::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
[data-formato="cheio"] .capa__texto{ position: relative; z-index: 1; }
[data-formato="cheio"] .capa .eyebrow,
[data-formato="cheio"] .capa .fio,
[data-formato="cheio"] .capa .nomes__e{ color: #fff; }
[data-formato="cheio"] .capa__data,
[data-formato="cheio"] .contagem span{ color: rgba(255,255,255,.85); }
[data-formato="cheio"] .capa .nomes{ text-shadow: 0 2px 30px rgba(0,0,0,.35); -webkit-text-fill-color: #fff; }

/* editorial: duas colunas */
[data-formato="editorial"] .capa{
  display: grid; grid-template-columns: 1fr;
  min-height: calc(100dvh - 5.4rem);
}
@media (min-width: 900px){
  [data-formato="editorial"] .capa{ grid-template-columns: 1.05fr 1fr; }
}
[data-formato="editorial"] .capa__foto{ margin: 0; min-height: 50vh; }
[data-formato="editorial"] .capa__texto{
  justify-content: center; align-items: flex-start; text-align: left;
  padding: clamp(2.5rem, 6vw, 5rem) var(--margem);
}
[data-formato="editorial"] .capa .nomes{ display: flex; flex-direction: column; }
[data-formato="editorial"] .fio{ margin-left: 0; }
[data-formato="editorial"] .secao{ text-align: left; }

/* ---------------------------------------------------------------- seções */
.secao{
  max-width: 68rem; margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--margem);
  border-top: 1px solid var(--linha-fina);
}
.secao__lead{ max-width: 52ch; margin-top: 1rem; color: var(--tinta-2); }
[data-formato="classico"] .secao,
[data-formato="cheio"] .secao{ text-align: center; }
[data-formato="classico"] .secao__lead,
[data-formato="cheio"] .secao__lead{ margin-inline: auto; }

.historia{ display: grid; gap: 2.5rem; align-items: center; text-align: left !important; }
@media (min-width: 860px){ .historia{ grid-template-columns: 1.2fr .8fr; } }
.historia__texto > p{ color: var(--tinta-2); margin-top: 1.2rem; max-width: 56ch; }
.historia__foto{ margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
[data-formato="classico"] .historia__foto{ border-radius: 999px 999px 6px 6px; }
.linha{ list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.linha li{ display: flex; gap: 1.2rem; align-items: baseline; padding-bottom: .8rem; border-bottom: 1px solid var(--linha-fina); color: var(--tinta-2); }
.linha b{ font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--magenta); min-width: 3.5rem; }

.evento__cards{ display: grid; gap: 1.2rem; margin-top: 2.5rem; }
@media (min-width: 760px){ .evento__cards{ grid-template-columns: 1fr 1fr; } }
.card{
  display: grid; gap: .4rem; justify-items: center; text-align: center;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--linha);
  background: color-mix(in srgb, var(--magenta) 3%, var(--papel-alto));
}
.card__rotulo{ font-size: .72rem; text-transform: uppercase; letter-spacing: .3em; color: var(--magenta); font-weight: 600; }
.card__hora{ font-family: var(--display); font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1; }
.card__local{ font-family: var(--display); font-size: 1.4rem; }
.card__end{ color: var(--tinta-2); font-size: .92rem; margin-bottom: 1rem; }

.evento__extra{ display: grid; gap: 2.5rem; margin-top: 3.5rem; text-align: left; }
@media (min-width: 760px){ .evento__extra{ grid-template-columns: 1fr 1fr; } }
.evento__extra p{ color: var(--tinta-2); }
.traje__abre{ font-family: var(--display); font-size: 1.5rem; color: var(--tinta) !important; margin-bottom: .6rem; }
.nota{ margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linha-fina); font-style: italic; font-size: .9rem; }
.roteiro{ margin: 0; }
.roteiro div{ display: flex; gap: 1.2rem; padding: .7rem 0; border-bottom: 1px solid var(--linha-fina); }
.roteiro dt{ font-family: var(--display); min-width: 3.6rem; color: var(--magenta); }
.roteiro dd{ margin: 0; color: var(--tinta-2); }

.galeria{
  max-width: none; padding-inline: 0;
  display: grid; gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(9rem, 22vw, 18rem);
  border-top: 0;
}
.galeria img:nth-child(1){ grid-row: span 2; }
.galeria img:nth-child(4),
.galeria img:nth-child(6){ grid-column: span 2; }

.cotas{
  list-style: none; margin: 2.2rem auto 0; padding: 0; max-width: 46rem;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.cotas li{
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem; border: 1px solid var(--linha); text-align: left;
}
.cotas b{ font-weight: 500; }
.cotas span{ font-family: var(--display); color: var(--magenta); font-size: 1.2rem; white-space: nowrap; }
.pix{
  margin: 2rem auto 0; max-width: 26rem; padding: 1.6rem;
  border: 1px dashed var(--magenta);
  display: grid; gap: .3rem; justify-items: center;
}
.pix__rotulo{ font-size: .72rem; text-transform: uppercase; letter-spacing: .26em; color: var(--tinta-2); }
.pix__valor{ font-family: var(--display); font-size: 1.3rem; margin-bottom: .8rem; word-break: break-all; }

.rsvp{
  margin: 2.2rem auto 0; max-width: 30rem;
  display: grid; gap: 1.1rem; text-align: left;
}
.rsvp label{ display: grid; gap: .4rem; font-size: .85rem; color: var(--tinta-2); }
.rsvp input:not([type="radio"]), .rsvp select, .rsvp textarea{
  font: inherit; font-size: 1rem; color: var(--tinta);
  padding: .75rem .9rem;
  border: 1px solid var(--linha); border-radius: 6px;
  background: color-mix(in srgb, var(--papel-alto) 92%, var(--tinta));
}
.rsvp fieldset{ border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.rsvp legend{ font-size: .85rem; color: var(--tinta-2); margin-bottom: .5rem; width: 100%; }
.rsvp .opcao{ display: flex; align-items: center; gap: .5rem; color: var(--tinta); font-size: 1rem; }
.rsvp input[type="radio"]{ accent-color: var(--magenta); width: 1.1rem; height: 1.1rem; }
.rsvp .botao{ justify-self: start; }
[data-formato="classico"] .rsvp .botao, [data-formato="cheio"] .rsvp .botao{ justify-self: center; }
.rsvp__ok{ color: var(--magenta); font-weight: 500; }

.rodape{
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) var(--margem) 2rem;
  border-top: 1px solid var(--linha-fina);
  color: var(--tinta-2);
}
.nomes--pe{ font-size: calc(clamp(2.2rem, 6vw, 3.6rem) * var(--nomes-escala)); color: var(--tinta); margin-bottom: .6rem; }
.rodape__casei{ margin-top: 2.5rem; font-size: .8rem; }

/* modelos com nomes em gradiente/peso especial */
[data-modelo="gala"] .nomes{
  background: linear-gradient(180deg, #f6e2ad, #c9a052 60%, #e8cf8c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 500;
}
[data-modelo="gala"] .nomes__e{ -webkit-text-fill-color: var(--magenta); }
[data-modelo="gala"] .botao:not(.botao--linha), [data-modelo="deco"] .botao:not(.botao--linha){ color: #14182b; }
[data-modelo="manchete"] .nomes{ line-height: .92; }

/* -------------------------------------------------------------- padrinhos */
.padrinhos__lista{
  list-style: none; margin: 2.4rem auto 0; padding: 0; max-width: 56rem;
  display: grid; gap: 1.6rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.padrinhos__lista li{ display: grid; justify-items: center; gap: .35rem; text-align: center; }
.padrinhos__mono{
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--linha); outline: 1px solid var(--linha-fina); outline-offset: 4px;
  font-family: var(--display); font-size: 1.7rem; color: var(--magenta);
  margin-bottom: .4rem;
}
.padrinhos__lista b{ font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.padrinhos__lista small{ color: var(--tinta-2); font-size: .85rem; }

/* ------------------------------------------------------ lista de presentes */
.presentes__filtro{ display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2rem auto 0; }
[data-formato="editorial"] .presentes__filtro{ justify-content: flex-start; }
.presentes__filtro button{
  font: 500 .85rem/1 var(--texto); padding: .65rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linha); background: transparent; color: var(--tinta-2);
}
.presentes__filtro button[aria-selected="true"]{ background: var(--magenta); border-color: var(--magenta); color: var(--papel-alto); }
.presentes__lista{
  list-style: none; margin: 2rem auto 0; padding: 0; max-width: 64rem;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  text-align: left;
}
@media (max-width: 520px){ .presentes__lista{ grid-template-columns: 1fr 1fr; gap: .8rem; } }
.presente{
  display: flex; flex-direction: column;
  border: 1px solid var(--linha); background: var(--papel-alto); overflow: hidden;
}
.presente[hidden]{ display: none; }
.presente__foto{ margin: 0; aspect-ratio: 1; overflow: hidden; background: color-mix(in srgb, var(--magenta) 7%, var(--papel-alto)); display: grid; place-items: center; }
.presente__foto span{ font-family: var(--display); font-size: 3rem; color: var(--magenta); opacity: .6; }
.presente__corpo{ flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1rem 1.1rem; }
.presente__nome{ font-weight: 500; line-height: 1.3; }
.presente__desc{ color: var(--tinta-2); font-size: .88rem; line-height: 1.45; }
.presente__valor{ font-family: var(--display); font-size: 1.35rem; color: var(--magenta); margin-top: auto; padding-top: .3rem; }
.presente__botao{ min-height: 2.6rem; padding: .6rem 1rem; margin-top: .4rem; width: 100%; }
.presente__ja{ margin-top: .4rem; font-size: .85rem; color: var(--tinta-2); font-style: italic; }
.presente--dado .presente__foto img{ filter: grayscale(.8); opacity: .55; }
@media (max-width: 520px){
  .presente__corpo{ padding: .7rem .7rem .8rem; }
  .presente__nome{ font-size: .9rem; }
  .presente__valor{ font-size: 1.15rem; }
  .presente__botao{ font-size: .85rem; padding: .55rem .6rem; }
}
.pix--livre{ max-width: 30rem; text-align: center; }
.pix--livre .presente__desc{ margin-bottom: .8rem; }
.presentes__loja{ margin-top: 1.6rem; }

/* a janela do presente */
.presentear{
  width: min(26rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 1.6rem 1.4rem 1.5rem; border: 1px solid var(--linha); border-radius: 14px;
  background: var(--papel-alto); color: var(--tinta); font-family: var(--texto);
  text-align: center;
}
.presentear::backdrop{ background: rgba(20, 18, 16, .6); backdrop-filter: blur(3px); }
.presentear__fechar{
  position: absolute; top: .5rem; right: .7rem; width: 2.4rem; height: 2.4rem;
  border: 0; background: none; font-size: 1.7rem; line-height: 1; color: var(--tinta-2); cursor: pointer;
}
.presentear__foto{ margin: 0 auto 1rem; width: 9rem; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.presentear .eyebrow{ margin-bottom: .4rem; }
.presentear__nome{ font-family: var(--display); font-size: 1.5rem; line-height: 1.15; }
.presentear__valor{ font-family: var(--display); font-size: 1.6rem; color: var(--magenta); margin: .3rem 0 0; }
.presentear .rsvp{ margin-top: 1.2rem; }
.presentear .rsvp .botao{ justify-self: stretch; }
.presentear__qr{ width: min(15rem, 70vw); margin: 1rem auto; padding: .6rem; background: #fff; border-radius: 8px; }
.presentear__qr svg{ display: block; width: 100%; height: auto; }
.presentear [data-passo] > .botao{ width: 100%; margin-top: .8rem; }
.presentear__para{ margin-top: 1rem; font-size: .85rem; color: var(--tinta-2); }
.presentear__aviso{ margin-top: .6rem; font-size: .85rem; color: var(--magenta); font-weight: 600; }
.presentear__obrigado{ font-family: var(--display); font-size: 2.2rem; color: var(--magenta); margin: .6rem 0 .8rem; }

/* ------------------------------------------------------- mural de recados */
.recados__form{ margin-bottom: 2.4rem; }
.recados__lista{
  list-style: none; margin: 0 auto; padding: 0; max-width: 64rem;
  columns: 3 16rem; column-gap: 1.2rem; text-align: left;
}
.recado{
  break-inside: avoid; margin: 0 0 1.2rem;
  padding: 1.3rem 1.3rem 1.1rem;
  border: 1px solid var(--linha-fina);
  background: color-mix(in srgb, var(--magenta) 4%, var(--papel-alto));
}
.recado__texto{ font-family: var(--display); font-size: 1.1rem; line-height: 1.5; }
.recado__texto::before{ content: "“"; color: var(--magenta); margin-right: .1em; }
.recado__quem{ margin-top: .8rem; font-size: .85rem; color: var(--tinta-2); }
.recado__quem b{ color: var(--tinta); font-weight: 600; }

/* -------------------------------------------------- dicas e perguntas */
.dicas__grupos{
  display: grid; gap: 2rem; margin-top: 2.4rem; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.dicas__grupo h3{ font-size: 1.3rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linha); }
.dicas__grupo ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.dicas__grupo b{ font-weight: 600; }
.dicas__grupo p{ color: var(--tinta-2); font-size: .93rem; margin-top: .2rem; }
.dicas__links{ display: flex; gap: 1rem; flex-wrap: wrap; }
.dicas__links a{ color: var(--magenta); font-weight: 500; text-underline-offset: 3px; }
.perguntas{ max-width: 46rem; margin: 3rem auto 0; text-align: left; }
.perguntas h3{ font-size: 1.3rem; margin-bottom: .6rem; }
.perguntas details{ border-bottom: 1px solid var(--linha-fina); }
.perguntas summary{
  cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; position: relative; font-weight: 500;
}
.perguntas summary::-webkit-details-marker{ display: none; }
.perguntas summary::after{ content: "+"; position: absolute; right: .2rem; top: .75rem; font-size: 1.4rem; color: var(--magenta); }
.perguntas details[open] summary::after{ content: "−"; }
.perguntas details p{ color: var(--tinta-2); padding: 0 0 1rem; }
.secao[id]{ scroll-margin-top: 3.4rem; }
[data-formato="editorial"] .padrinhos__lista, [data-formato="editorial"] .recados__form, [data-formato="editorial"] .presentes__lista{ margin-left: 0; }
.presentear [hidden], .rsvp [hidden]{ display: none !important; }

/* ---------------------------------------------- largura única do conteúdo
   Toda seção usa a mesma largura de conteúdo (--conteudo), em todos os
   modelos e formatos: título, texto, listas, formulários, galeria. Nada de
   bloco mais estreito no meio da página. */
.site{ --conteudo: 60rem; }
.secao{ max-width: calc(var(--conteudo) + 2 * var(--margem)); }
.secao__lead,
.padrinhos__lista, .presentes__lista, .presentes__filtro, .recados__lista,
.dicas__grupos, .perguntas, .cotas, .pix, .pix--livre, .rsvp{
  max-width: none; margin-left: 0; margin-right: 0;
}
.galeria{ max-width: calc(var(--conteudo) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }
.perguntas{ margin-top: 3rem; }
/* formulários na largura toda: no computador, campos curtos lado a lado */
@media (min-width: 760px){
  .secao > .rsvp{ grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }
  .secao > .rsvp > :is(fieldset, button, p, label:has(textarea)){ grid-column: 1 / -1; }
  .recados__form > label:first-child{ grid-column: 1 / -1; }
}
/* o Safari ignora o fundo do <select> nativo (ficava branco nos modelos escuros) */
.rsvp select{
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: .35rem .35rem; background-repeat: no-repeat;
  padding-right: 2.2rem;
}