/* =========================================================
   ELASCE · Outubro Rosa — estilos
   Mobile first (375px), depois adaptado para telas maiores.
   ========================================================= */

:root {
  /* Paleta do convite */
  --fundo: #FBEDEC;
  --fundo-2: #F6DCDD;
  --cartao: #FFF8F7;
  --rosa-suave: #E8A9B4;   /* fitas, detalhes */
  --rosa-medio: #D27D8E;   /* destaques decorativos */
  --vinho: #9B4555;        /* títulos, ELASCE */
  --texto: #6B3A44;
  --texto-2: #A0737B;      /* secundário — só em textos grandes/decorativos */

  /* Variações com contraste AA garantido sobre o cartão */
  --texto-2-aa: #8A5C65;   /* secundário para texto corrido (≈5:1) */
  --rosa-escrita: #C06A7D; /* manuscritos grandes (≥3:1) */
  --rosa-botao: #B5596D;   /* fundo de botão com texto branco (≈4.5:1) */

  --linha: rgba(155, 69, 85, .18);

  /* Tipografia */
  --f-display: "Italiana", "Cormorant Garamond", Georgia, serif;
  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-script: "Allura", "Great Vibes", cursive;

  /* Espaçamento */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.25rem;
  --s-5: 3.25rem;

  --raio: 22px;
  --sombra: 0 1px 2px rgba(107, 58, 68, .05),
            0 12px 32px -8px rgba(155, 69, 85, .16),
            0 30px 60px -30px rgba(155, 69, 85, .18);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
  background-color: var(--fundo);
  /* degradê aquarelado sutil */
  background-image:
    radial-gradient(60% 40% at 12% 8%, rgba(246, 220, 221, .95), transparent 70%),
    radial-gradient(50% 35% at 92% 30%, rgba(232, 169, 180, .22), transparent 70%),
    radial-gradient(70% 45% at 20% 85%, rgba(246, 220, 221, .9), transparent 70%),
    radial-gradient(45% 30% at 85% 95%, rgba(232, 169, 180, .18), transparent 70%),
    linear-gradient(170deg, var(--fundo) 0%, var(--fundo-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
p { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }
h1, h2 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }
em { font-family: var(--f-serif); font-style: italic; font-size: 1.12em; }
strong { font-weight: 500; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

/* ---------- Ícones ---------- */
.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--inline {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -.15em;
  margin-left: .35em;
  color: var(--rosa-medio);
}

.icon-circle {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rosa-suave);
  border-radius: 50%;
  color: var(--vinho);
  background: rgba(251, 237, 236, .6);
}
.icon-circle--lg { width: 56px; height: 56px; }
.icon-circle--lg .icon { width: 28px; height: 28px; color: var(--rosa-medio); }

/* ---------- Layout ---------- */
.page {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--s-4) 16px var(--s-5);
}

/* ---------- Cartão / ingresso ---------- */
.ticket {
  position: relative;
  isolation: isolate;
  background-color: var(--cartao);
  /* leve textura de papel */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .35 0 0 0 0 .4 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  border: 1px solid rgba(232, 169, 180, .35);
  overflow: hidden;
}

.ticket__convite {
  position: relative;
  padding: var(--s-5) var(--s-3) var(--s-4);
  text-align: center;
}

.ticket__inscricao {
  scroll-margin-top: 16px;
  position: relative;
  padding: var(--s-4) var(--s-3) var(--s-5);
  text-align: center;
}

/* Laço no canto superior direito */
.ticket__laco {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: auto;
  z-index: 1;
  opacity: .9;
  transform-origin: 50% 40%;
  animation: respirar 7s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .85; }
  50%      { transform: scale(1.06) rotate(-2deg); opacity: 1; }
}

/* Ramos nos cantos */
.ticket__ramo {
  position: absolute;
  width: 130px;
  height: auto;
  opacity: .32;
  pointer-events: none;
  z-index: -1;
}
.ticket__ramo--tl { top: -14px; left: -18px; transform: scaleY(-1) rotate(8deg); }
.ticket__ramo--br { bottom: -12px; right: -16px; transform: scaleX(-1) rotate(4deg); }

/* ---------- Topo ---------- */
.eyebrow {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--vinho);
  margin: 0 0 var(--s-2);
  padding-left: .38em; /* compensa o espaçamento da última letra */
}
.eyebrow--sm { font-size: .75rem; letter-spacing: .3em; margin-bottom: var(--s-2); }

.divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 180px;
  margin: 0 auto var(--s-3);
  color: var(--rosa-medio);
  font-size: .7rem;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rosa-suave));
}
.divider::after { background: linear-gradient(90deg, var(--rosa-suave), transparent); }

.hero__mes {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .3rem;
  margin: 0;
  line-height: 1;
}
.hero__outubro {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 1.45rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--vinho);
}

.script {
  font-family: var(--f-script);
  font-weight: 400;
  color: var(--rosa-escrita);
  letter-spacing: 0;
  line-height: 1.1;
}
.hero__rosa { font-size: 3.1rem; transform: translateY(.12em); }
.hero__frase {
  font-size: 2rem;
  color: var(--texto-2);
  margin: var(--s-1) 0 0;
}

/* ---------- ELASCE ---------- */
.brand { margin: var(--s-5) 0 var(--s-4); }

.brand__nome {
  position: relative;
  display: inline-block;
  font-family: var(--f-display);
  font-size: clamp(3.1rem, 15vw, 4.6rem);
  letter-spacing: .14em;
  padding-left: .14em;
  line-height: 1;
  color: var(--vinho);
}
.brand__estrela {
  position: absolute;
  top: -.15em;
  right: -.55em;
  font-family: var(--f-sans);
  font-size: .32em;
  color: var(--rosa-medio);
  letter-spacing: 0;
}

.brand__sub {
  text-wrap: balance;
  margin: var(--s-2) auto 0;
  max-width: 18rem;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--texto-2-aa);
}
.brand__sub em { color: var(--vinho); }

/* ---------- Informações ---------- */
.infos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 var(--s-5);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.infos__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 0 .25rem;
}
.infos__item + .infos__item { border-left: 1px solid var(--linha); }
.infos__texto {
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--texto);
  line-height: 1.3;
}

/* ---------- Blocos de texto ---------- */
.bloco {
  max-width: 22rem;
  margin: 0 auto var(--s-5);
}
.bloco__script {
  font-size: 2.1rem;
  margin-top: var(--s-3);
}

.bloco--proposito {
  padding: var(--s-4) var(--s-3);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(246, 220, 221, .45), rgba(251, 237, 236, .2));
}
.bloco--proposito .icon-circle { margin-bottom: var(--s-2); background: var(--cartao); }
.destaque { color: var(--vinho); letter-spacing: .08em; }

.porques {
  display: grid;
  gap: var(--s-2);
  max-width: 21rem;
  margin: 0 auto var(--s-3);
  text-align: left;
}
.porques li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: .9rem;
  font-size: 1rem;
  line-height: 1.5;
}
.porques__icones {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rosa-suave);
  color: var(--rosa-medio);
}
.porques__icones .icon { width: 19px; height: 19px; }

.icon-circle--broto {
  width: 40px; height: 40px;
  margin-top: var(--s-2);
  border-color: transparent;
  background: none;
  color: var(--rosa-suave);
}

/* ---------- Linha de destacar ---------- */
.perforation {
  position: relative;
  height: 28px;
  margin: 0;
}
.perforation::before { /* linha pontilhada */
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 50%;
  border-top: 2px dashed rgba(210, 125, 142, .45);
}
.perforation::after { /* recortes semicirculares nas laterais */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0 50%, var(--fundo-2) 13px, rgba(232,169,180,.35) 13.5px, transparent 14.5px) left / 28px 28px no-repeat,
    radial-gradient(circle at 100% 50%, var(--fundo-2) 13px, rgba(232,169,180,.35) 13.5px, transparent 14.5px) right / 28px 28px no-repeat;
}

/* ---------- Inscrição ---------- */
.inscricao__titulo {
  font-family: var(--f-serif);
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--vinho);
  letter-spacing: .02em;
}
.inscricao__valor {
  margin: var(--s-2) 0 var(--s-1);
  font-family: var(--f-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--vinho);
  letter-spacing: .04em;
}
.inscricao__moeda {
  font-family: var(--f-sans);
  font-size: .4em;
  font-weight: 400;
  letter-spacing: .1em;
  vertical-align: .9em;
  color: var(--texto-2-aa);
}
.inscricao__nota {
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--texto-2-aa);
  margin-bottom: var(--s-4);
}

.inscricao__placeholder {
  padding: var(--s-3) var(--s-2);
  border: 1px dashed var(--rosa-suave);
  border-radius: 16px;
  background: rgba(251, 237, 236, .5);
}
.inscricao__placeholder p {
  font-size: 1rem;
  color: var(--texto-2-aa);
}
.inscricao__placeholder p:not(:last-child) { margin-bottom: var(--s-3); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: 100%;
  padding: .9rem 1.5rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rosa-botao);
  box-shadow: 0 8px 20px -10px rgba(155, 69, 85, .6);
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}
.btn:hover:not(:disabled) { background: var(--vinho); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--vinho); outline-offset: 3px; }
.btn:disabled {
  cursor: not-allowed;
  color: var(--vinho);
  background: var(--fundo-2);
  box-shadow: none;
}

/* ---------- Formulário ---------- */
.form {
  display: grid;
  gap: var(--s-3);
  text-align: left;
}

.campo { margin: 0; padding: 0; border: 0; min-width: 0; }

.campo__label {
  display: block;
  padding: 0;
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vinho);
}

.campo__input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: .8rem 1.1rem;
  font-family: var(--f-sans);
  font-size: 16px; /* evita zoom no iPhone */
  font-weight: 400;
  color: var(--texto);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--rosa-suave);
  border-radius: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.campo__input::placeholder { color: var(--texto-2); opacity: .8; }
.campo__input:hover { border-color: var(--rosa-medio); }
.campo__input:focus {
  border-color: var(--rosa-medio);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(232, 169, 180, .3);
}
.campo__input[aria-invalid="true"] {
  border-color: var(--rosa-botao);
  background: rgba(251, 237, 236, .7);
}

.campo__erro {
  min-height: 0;
  margin: .45rem 0 0 .2rem;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--vinho);
}
.campo__erro:empty { margin: 0; }
.campo__erro:not(:empty)::before {
  content: "✦ ";
  font-size: .7em;
  color: var(--rosa-medio);
  vertical-align: .15em;
}

/* Pílulas de tamanho (radios estilizados) */
.pilulas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
}
.pilula {
  position: relative;
  display: block;
  cursor: pointer;
}
.pilula input {
  /* invisível, mas focável e navegável pelas setas do teclado */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pilula span {
  display: grid;
  place-items: center;
  min-height: 50px;
  border: 1px solid var(--rosa-suave);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--vinho);
  background: rgba(255, 255, 255, .7);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.pilula:hover span { border-color: var(--rosa-medio); }
.pilula input:checked + span {
  color: #fff;
  font-weight: 500;
  border-color: var(--rosa-botao);
  background: var(--rosa-botao); /* rosa médio com contraste AA */
  box-shadow: 0 6px 16px -8px rgba(155, 69, 85, .6);
}
.pilula input:focus-visible + span {
  outline: 2px solid var(--vinho);
  outline-offset: 3px;
}
.campo--tamanho[aria-invalid="true"] .pilula span { border-color: var(--rosa-botao); }

/* Honeypot: fora da tela, sem display:none */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  margin: 0;
  text-align: center;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--vinho);
}
.form__status:empty { display: none; }
.form__status:not(:empty) {
  padding: .9rem 1rem;
  border-radius: 14px;
  background: rgba(246, 220, 221, .55);
}

.btn--enviar { margin-top: var(--s-1); gap: .7rem; }
.btn__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
.btn.is-loading .btn__spinner { display: inline-block; }
.btn.is-loading,
.btn.is-loading:disabled {
  cursor: progress;
  color: #fff;
  background: var(--rosa-botao);
  opacity: .9;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Etapas (formulário → Pix) ---------- */
.etapas { perspective: 1200px; }
.etapa { transform-origin: 50% 0; }
.etapa[hidden] { display: none; }

.etapa.is-saindo { animation: etapa-sai .45s ease-in forwards; }
.etapa.is-entrando { animation: etapa-entra .6s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes etapa-sai {
  to { opacity: 0; transform: translateX(-28px) rotateY(8deg); }
}
@keyframes etapa-entra {
  from { opacity: 0; transform: translateX(28px) rotateY(-8deg); }
  to   { opacity: 1; transform: none; }
}

.etapa--pix .icon-circle { margin-bottom: var(--s-2); }
.inscricao__titulo--sucesso {
  font-size: 1.6rem;
  line-height: 1.3;
  outline: none;
}
.etapa--pix .inscricao__nota { margin: var(--s-1) 0 var(--s-4); font-size: 1rem; }

/* ---------- Pix ---------- */
.pix { display: grid; justify-items: center; }

.pix__moldura {
  position: relative;
  margin: 0 0 var(--s-3);
  padding: 18px;
  border: 1px solid var(--rosa-suave);
  border-radius: 20px;
  background: var(--cartao);
  box-shadow: 0 10px 28px -14px rgba(155, 69, 85, .35);
}
/* cantinhos delicados, como molduras de convite */
.pix__moldura::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(232, 169, 180, .6);
  border-radius: 15px;
  pointer-events: none;
}
.pix__qr {
  position: relative;
  width: 208px;
  height: 208px;
}
.pix__qr img,
.pix__qr canvas { width: 100% !important; height: 100% !important; }
.pix__qr-falha {
  max-width: 208px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--texto-2-aa);
}
.pix__moldura.sem-qr .pix__qr { display: none; }

.pix__valor { margin: 0 0 var(--s-3); }

.btn--secundario {
  gap: .6rem;
  color: var(--vinho);
  background: transparent;
  border: 1px solid var(--rosa-medio);
  box-shadow: none;
  padding-inline: 1rem;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 400;
}
.btn--secundario:hover:not(:disabled) { color: #fff; background: var(--rosa-botao); border-color: var(--rosa-botao); }
.btn--secundario .icon { width: 20px; height: 20px; }

.btn.is-copiado,
.btn-mini.is-copiado { color: #fff; background: var(--rosa-botao); border-color: var(--rosa-botao); }

.pix__chave {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .6rem;
  margin: var(--s-2) 0 0;
  font-size: .9rem;
  color: var(--texto-2-aa);
}
.pix__chave-rotulo {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.pix__chave-valor {
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--texto);
  word-break: break-all;
}

.btn-mini {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 36px;
  padding: .3rem .8rem;
  font-family: var(--f-sans);
  font-size: .85rem;
  font-weight: 400;
  color: var(--vinho);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--rosa-suave);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-mini:hover { border-color: var(--rosa-medio); }
.btn-mini:focus-visible { outline: 2px solid var(--vinho); outline-offset: 2px; }
.btn-mini .icon { width: 16px; height: 16px; }

.pix__instrucao {
  max-width: 19rem;
  margin: var(--s-3) 0 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--texto-2-aa);
}
.pix__instrucao strong { color: var(--texto); }

.pix__divisor {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 160px;
  margin: var(--s-4) 0;
  color: var(--rosa-medio);
  font-size: .7rem;
}
.pix__divisor::before,
.pix__divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rosa-suave);
}

.btn--whatsapp {
  gap: .6rem;
  padding-inline: 1.1rem;
  text-decoration: none;
  text-transform: none;
  font-size: 1.05rem;
  letter-spacing: .03em;
}
.btn--secundario,
.btn--whatsapp { text-wrap: balance; }
.btn .icon,
.btn-mini .icon { flex-shrink: 0; }
.btn--whatsapp .icon { width: 22px; height: 22px; }
.btn--whatsapp:focus-visible { outline: 2px solid var(--vinho); outline-offset: 3px; }

.pix__aviso {
  max-width: 18rem;
  margin: var(--s-2) 0 0;
  font-size: .95rem;
  color: var(--texto-2-aa);
}

.pix__final {
  margin: var(--s-4) 0 var(--s-1);
  font-size: 2rem;
  color: var(--vinho);
}
.pix__lembrete {
  font-size: .8rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--texto);
}

/* Campos */
input, select, textarea { font-family: var(--f-sans); font-size: 16px; color: var(--texto); }

/* ---------- Rodapé ---------- */
.rodape {
  text-align: center;
  padding: var(--s-5) var(--s-2) 0;
}
.rodape__frase {
  font-size: 2rem;
  color: var(--vinho);
  max-width: 18rem;
  margin: 0 auto var(--s-3);
}
.creditos {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
  max-width: 26rem;
  margin: 0 auto;
}
.creditos__divisor {
  align-self: stretch;
  width: 1px;
  min-height: 72px;
  background: linear-gradient(180deg, transparent, var(--rosa-suave) 20%, var(--rosa-suave) 80%, transparent);
}
.credito {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-align: center;
}
.credito__rotulo {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .26em;
  padding-left: .26em;
  text-transform: uppercase;
  color: var(--texto);
}
/* A logo é branca com fundo transparente: uma plaquinha vinho dá contraste
   sem alterar as cores da marca. */
.credito__logo {
  display: inline-grid;
  place-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--vinho);
  box-shadow: 0 8px 18px -10px rgba(155, 69, 85, .55);
}
.credito__logo img {
  width: 96px;
  height: auto;
}
.credito__laco {
  width: 26px;
  height: 26px;
  color: var(--rosa-medio);
}
.credito__texto {
  margin: 0;
  max-width: 11rem;
  font-size: .72rem;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto);
}

/* ---------- Revelar ao rolar ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Telas maiores ----------
   O convite fica como um cartão sobre a mesa: centralizado, até 480px. */
@media (min-width: 600px) {
  .page { max-width: calc(480px + 32px); padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .ticket {
    box-shadow: 0 1px 2px rgba(107, 58, 68, .05),
                0 18px 40px -12px rgba(155, 69, 85, .2),
                0 40px 80px -40px rgba(155, 69, 85, .25);
  }
  .ticket__convite { padding: 4rem var(--s-4) var(--s-5); }
  .ticket__inscricao { padding: var(--s-5) var(--s-4) 4rem; }
  .ticket__laco { width: 44px; top: 24px; right: 24px; }
  .ticket__ramo { width: 160px; }
  .hero__outubro { font-size: 1.6rem; }
  .hero__rosa { font-size: 3.5rem; }
  .credito__logo img { width: 110px; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}