/* Página principal (convite) */

body.travado {
  overflow: hidden;
}

.travado .nav {
  visibility: hidden;
  opacity: 0;
}

/* ---------- Entrada ---------- */
.entrada {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 42%, #574439 0%, #3e3029 100%);
  color: #f6eee4;
}

.entrada__centro {
  padding: 0 var(--gutter);
  text-align: center;
}

.entrada__para {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: #d9c9b8;
}

.entrada__titulo {
  font-style: italic;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  letter-spacing: -0.025em;
  filter: url(#desmanchar);
}

/* Fio fino que se desenha enquanto a página carrega; quando completa, a cortina sobe */
.entrada__linha {
  display: block;
  width: min(220px, 50vw);
  height: 1px;
  margin: 30px auto 0;
  background: currentColor;
  opacity: 0.45;
  transform-origin: center;
  animation: entrada-linha 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.4s both;
}

@keyframes entrada-linha {
  from {
    transform: scaleX(0);
  }
}

/* ---------- Capa com colagem ---------- */
.capa {
  position: relative;
  height: 100svh;
}

.capa__palco {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.capa__principal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: 0;
}

.capa__principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}

@media (max-aspect-ratio: 3/4) {
  .capa__principal img {
    object-position: 28% 52%;
  }
}

.capa__principal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 18, 13, 0.55) 0%, rgba(28, 18, 13, 0.12) 45%, rgba(28, 18, 13, 0) 70%);
}

.capa__colagem figure {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--sombra-papel);
  opacity: 0;
}

.capa__colagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* posições finais da colagem (em relação à tela): celular */
.capa__colagem figure:nth-child(1) { left: 4vw; top: 9svh; width: 32vw; height: 17svh; }
.capa__colagem figure:nth-child(2) { left: 68vw; top: 6svh; width: 27vw; height: 15svh; }
.capa__colagem figure:nth-child(3) { left: 3vw; top: 68svh; width: 31vw; height: 19svh; }
.capa__colagem figure:nth-child(4) { left: 61vw; top: 70svh; width: 35vw; height: 18svh; }
.capa__colagem figure:nth-child(5) { left: 37vw; top: 80svh; width: 25vw; height: 15svh; }

@media (min-width: 700px) {
  .capa__colagem figure:nth-child(1) { left: 4vw; top: 12svh; width: 18vw; height: 28svh; }
  .capa__colagem figure:nth-child(2) { left: 9vw; top: 52svh; width: 15vw; height: 30svh; }
  .capa__colagem figure:nth-child(3) { left: 79vw; top: 12svh; width: 17vw; height: 26svh; }
  .capa__colagem figure:nth-child(4) { left: 77vw; top: 50svh; width: 15vw; height: 32svh; }
  .capa__colagem figure:nth-child(5) { left: 60vw; top: 80svh; width: 13vw; height: 17svh; }
}

@media (min-width: 1100px) {
  .capa__colagem figure:nth-child(1) { left: 5vw; top: 12svh; width: 15vw; height: 30svh; }
  .capa__colagem figure:nth-child(2) { left: 12vw; top: 52svh; width: 14vw; height: 32svh; }
  .capa__colagem figure:nth-child(3) { left: 80vw; top: 10svh; width: 15vw; height: 29svh; }
  .capa__colagem figure:nth-child(4) { left: 76vw; top: 49svh; width: 13vw; height: 34svh; }
  .capa__colagem figure:nth-child(5) { left: 61vw; top: 4svh; width: 10vw; height: 19svh; }
}

.capa__nomes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(13svh, 90px);
  z-index: 3;
  padding: 0 var(--gutter);
  color: #fffaf3;
  text-align: center;
  pointer-events: none;
}

.capa__titulo {
  font-style: italic;
  font-size: clamp(3.6rem, 13vw, 10.5rem);
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-shadow: 0 4px 40px rgba(20, 12, 8, 0.3);
}

.capa__titulo span {
  font-size: 0.62em;
  margin: 0 0.04em;
}

.capa__data {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.92;
}

.capa__dica {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  translate: -50% 0;
  color: #fffaf3;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.capa__dica::after {
  content: '';
  display: block;
  width: 1px;
  height: 26px;
  margin: 8px auto 0;
  background: currentColor;
  transform-origin: top;
  animation: dica 2.2s var(--ease) infinite;
}

@keyframes dica {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Textos que "se pintam" com a rolagem ---------- */
.convite {
  display: grid;
  place-items: center;
  min-height: 62svh;
  padding: 16svh var(--gutter) 8svh;
  text-align: center;
}

.texto-revelado {
  max-width: 20em;
  text-wrap: balance;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

.texto-revelado .palavra {
  color: var(--po);
}

.sem-movimento .texto-revelado .palavra {
  color: inherit;
}

.texto-revelado--grande {
  max-width: 15em;
  font-size: clamp(2.2rem, 5.8vw, 4.8rem);
  line-height: 1.04;
}

/* ---------- Nossa história ---------- */
.historia__palco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100svh;
  padding-top: max(84px, 10svh);
  overflow: hidden;
}

.historia__titulo {
  position: relative;
  z-index: 3;
  font-size: clamp(4.4rem, 16vw, 12.5rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.historia__corpo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 4vw, 56px);
  width: 100%;
  max-width: 1240px;
  flex: 1;
  min-height: 0;
  padding: 3svh var(--gutter) 0;
}

.historia__textos {
  position: relative;
  grid-column: 1;
  justify-self: end;
  width: min(300px, 100%);
  margin-top: 6svh;
}

.historia__texto {
  position: absolute;
  inset: 0 0 auto 0;
}

.historia__texto h3 {
  font-size: 1.45rem;
  line-height: 1.1;
}

.historia__texto h3 em {
  display: block;
  font-size: 0.8em;
  color: var(--tinta-2);
}

/* Fio com um losango entre o título e o texto */
.historia__texto h3::after {
  content: '';
  display: block;
  width: 70px;
  height: 7px;
  margin-top: 12px;
  background: var(--ornamento) center / contain no-repeat;
  opacity: 0.7;
}

.historia__texto p {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.historia__pilha {
  position: relative;
  grid-column: 2;
  height: min(62svh, 560px);
  aspect-ratio: 0.8;
}

.polaroid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 4.5% 4.5% 0;
  border-radius: 3px;
  background: var(--branco);
  box-shadow: var(--sombra-papel);
  will-change: transform;
}

.polaroid img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  background: var(--papel-2);
}

.polaroid figcaption {
  padding: 4% 0 5%;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  text-align: center;
  color: var(--tinta-2);
}

.historia__lista {
  display: none;
}

/* ---------- História no celular: uma estrada com um marco por capítulo ---------- */
/* Também é a versão para quem prefere menos movimento (no computador). */
@media (max-width: 860px) {
  .historia__palco {
    height: auto;
    padding: max(84px, 11svh) 0 12svh;
    overflow: visible;
  }

  .historia__titulo {
    font-size: clamp(3.6rem, 17vw, 7rem);
  }

  .historia__corpo {
    display: none;
  }

  .historia__lista {
    display: grid;
  }
}

.sem-movimento .historia__palco {
  height: auto;
  padding-bottom: 12svh;
  overflow: visible;
}

.sem-movimento .historia__corpo {
  display: none;
}

.sem-movimento .historia__lista {
  display: grid;
}

.historia__lista {
  --pista: 30px; /* espaço da estrada à esquerda */
  position: relative;
  gap: clamp(64px, 11svh, 96px);
  width: min(480px, 100%);
  margin: clamp(36px, 6svh, 56px) 0 0;
  padding: 0 var(--gutter) 0 calc(var(--gutter) + var(--pista) + 12px);
  list-style: none;
}

/* A estrada: o mesmo tracejado do rastro do Celtinha, ligando os capítulos */
.historia__lista::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: -6svh;
  left: calc(var(--gutter) + var(--pista) / 2 - 1px);
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--terracota) 0 9px, transparent 9px 19px);
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}

.historia__item {
  position: relative;
}

/* Marco do capítulo, como a plaquinha de quilômetro na beira da estrada */
.historia__marco {
  position: absolute;
  top: -3px;
  left: calc(-12px - var(--pista));
  display: grid;
  place-items: center;
  width: var(--pista);
  height: var(--pista);
  border-radius: 50%;
  background: var(--papel);
  box-shadow: inset 0 0 0 1.5px var(--terracota);
  color: var(--terracota);
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  transition: background 0.6s var(--ease), color 0.6s var(--ease);
}

.historia__capitulo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--tinta-2);
}

.historia__lista .polaroid {
  position: relative;
  inset: auto;
  width: 84%;
  aspect-ratio: 0.8;
  margin: 16px 0 26px;
  rotate: var(--giro);
  transform-origin: 50% 100%;
}

/* Fotos alternam o lado, como num álbum montado à mão */
.historia__item:nth-child(even) .polaroid {
  margin-left: auto;
}

.historia__lista .historia__texto {
  position: static;
}

.historia__lista .historia__texto h3 {
  font-size: 1.9rem;
  letter-spacing: -0.02em;
}

.historia__lista .historia__texto p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.65;
}

/* Chegada de cada capítulo: a foto pousa girando de leve e o texto sobe logo depois.
   Só transform e opacity, que o celular anima sem esforço. */
.revelar .historia__capitulo,
.revelar .historia__texto {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}

.revelar .polaroid {
  opacity: 0;
  transform: translateY(40px) rotate(var(--giro)) scale(0.96);
  transition: opacity 0.7s var(--ease), transform 1.1s var(--ease);
}

.revelar .historia__texto {
  transition-delay: 0.22s;
}

.revelar.visivel .historia__capitulo,
.revelar.visivel .historia__texto,
.revelar.visivel .polaroid {
  opacity: 1;
  transform: none;
}

.revelar.visivel .historia__marco {
  background: var(--terracota);
  color: var(--branco);
}

/* ---------- Data e contagem ---------- */
.data {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 14svh var(--gutter);
  overflow: hidden;
  text-align: center;
}

.data__petalas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.data > *:not(canvas) {
  position: relative;
}

.data__chamada {
  margin-bottom: 5svh;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.8vw, 2.8rem);
  color: var(--tinta-2);
}

.data__titulo {
  font-size: clamp(3.4rem, 11.5vw, 9.5rem);
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.data__titulo .letra {
  display: inline-block;
}

.contagem {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 2.4vw, 28px);
  margin-top: 30px;
  font-family: var(--serif);
}

.contagem div {
  display: grid;
  justify-items: center;
  min-width: 2.2ch;
}

.contagem strong {
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.contagem span {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--tinta-2);
}

.contagem i {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-style: normal;
  line-height: 1.1;
  color: var(--po);
}

.data__hora {
  margin-top: 26px;
  font-size: 15px;
  color: var(--tinta-2);
}

/* ---------- Local ---------- */
.local {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8svh var(--gutter) 14svh;
  text-align: center;
}

.local__aquarela {
  --raio: 120%;
  width: min(1080px, 100%);
  margin-bottom: 5svh;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 var(--raio), transparent calc(var(--raio) + 30%));
  mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 var(--raio), transparent calc(var(--raio) + 30%));
}

.local__sobre {
  font-size: 14px;
  color: var(--tinta-2);
}

.local__titulo {
  margin: 10px 0 8px;
  font-size: clamp(2.6rem, 7.4vw, 5.4rem);
  letter-spacing: -0.03em;
}

.local__bairro {
  color: var(--tinta-2);
}

.local__botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

/* ---------- Celtinha Furioso andando no rodapé da tela ---------- */
.estrada {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 45;
  height: 26px;
  pointer-events: none;
  transition: opacity 0.6s;
}

.travado .estrada {
  opacity: 0;
}

/* Rastro tracejado: o quanto da página já foi percorrido */
.estrada__rastro {
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--terracota) 0 6px, transparent 6px 12px);
  opacity: 0.35;
}

.estrada__carro {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: clamp(44px, 4.6vw, 60px);
  will-change: transform;
}

.estrada__carro .celtinha {
  width: 100%;
  filter: drop-shadow(0 2px 2px rgba(43, 33, 29, 0.18));
}

.celtinha .roda {
  transform-box: fill-box;
  transform-origin: center;
}

/* Sacolejo enquanto anda */
.andando .estrada__carro .celtinha {
  animation: sacolejo 0.22s ease-in-out infinite alternate;
}

@keyframes sacolejo {
  to {
    transform: translateY(-1px) rotate(-0.6deg);
  }
}

/* ---------- Confirmação de presença ---------- */
/* Faixa escura no tom da tela de entrada: é a ação mais importante do site, então salta aos olhos. */
.rsvp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4svh clamp(8px, 1.4vw, 18px);
  padding: clamp(56px, 10svh, 112px) var(--gutter) clamp(44px, 7svh, 96px);
  border-radius: clamp(22px, 3vw, 36px);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(169, 83, 44, 0.34) 0%, rgba(169, 83, 44, 0) 70%),
    radial-gradient(120% 90% at 50% 45%, #574439 0%, #3b2d26 100%);
  color: #f6eee4;
  text-align: center;
  scroll-margin-top: 8px;
}

.rsvp__selo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #e7b48f;
}

.rsvp__selo::before,
.rsvp__selo::after {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.rsvp__titulo {
  font-size: clamp(3rem, 9vw, 6.6rem);
  letter-spacing: -0.035em;
}

.rsvp__texto {
  max-width: 34em;
  margin: 16px 0 30px;
  color: #d9c9b8;
  text-wrap: pretty;
}

.rsvp .busca input {
  border-color: transparent;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.55);
}

.rsvp .busca__estado {
  color: #d9c9b8;
}

.rsvp .cartao-convite {
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.6);
}

/* ---------- Detalhes ---------- */
.detalhes {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10svh var(--gutter) 12svh;
  text-align: center;
}

.detalhes__titulo {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  letter-spacing: -0.03em;
}

.detalhes__texto {
  margin: 14px 0 44px;
  color: var(--tinta-2);
}

.detalhes__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cartao-detalhe {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-card);
  background: var(--cafe);
  color: #fffaf3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.cartao-detalhe img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.cartao-detalhe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 18, 13, 0.72) 0%, rgba(28, 18, 13, 0.1) 55%, rgba(28, 18, 13, 0) 75%);
}

.cartao-detalhe:hover img {
  transform: scale(1.05);
}

.cartao-detalhe__texto {
  position: absolute;
  left: 20px;
  right: 66px;
  bottom: 18px;
  z-index: 1;
}

.cartao-detalhe h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.cartao-detalhe p {
  margin-top: 3px;
  font-size: 13.5px;
  opacity: 0.88;
}

.cartao-detalhe__mais {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 250, 243, 0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.3s, transform 0.4s var(--ease);
}

.cartao-detalhe:hover .cartao-detalhe__mais {
  background: rgba(255, 250, 243, 0.4);
  transform: rotate(90deg);
}

.cartao-detalhe__mais svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 900px) {
  .detalhes__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .detalhes__grade {
    grid-template-columns: 1fr;
  }

  .cartao-detalhe {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- Frase grande ---------- */
.visao {
  display: grid;
  place-items: center;
  padding: 12svh var(--gutter) 16svh;
  text-align: center;
}

/* ---------- Dúvidas ---------- */
.duvidas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(28px, 6vw, 96px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 8svh var(--gutter) 14svh;
}

.duvidas__lado {
  position: sticky;
  top: 110px;
  align-self: start;
}

.duvidas__titulo {
  max-width: 7em;
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  letter-spacing: -0.03em;
}

.duvidas__lado p {
  max-width: 24em;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--tinta-2);
}

.duvidas__lado a {
  color: var(--tinta);
  text-underline-offset: 3px;
}

/* Cada pergunta é um cartão: respiro nas bordas e área de toque clara no celular */
.duvidas__lista {
  display: grid;
  gap: 10px;
}

.pergunta {
  border-radius: 18px;
  background: var(--branco);
  box-shadow: 0 1px 2px rgba(43, 33, 29, 0.05);
  transition: box-shadow 0.4s var(--ease);
}

.pergunta.aberta {
  box-shadow: var(--sombra-leve);
}

.pergunta__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 18px 18px 22px;
  border: 0;
  border-radius: inherit;
  background: none;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

/* "+" dentro de um círculo, que vira "−" quando a resposta abre */
.pergunta__icone {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--papel);
  transition: background 0.3s;
}

.pergunta.aberta .pergunta__icone {
  background: var(--terracota);
}

.pergunta__icone::before,
.pergunta__icone::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: var(--tinta-2);
  transition: transform 0.45s var(--ease), background 0.3s;
}

.pergunta.aberta .pergunta__icone::before,
.pergunta.aberta .pergunta__icone::after {
  background: var(--branco);
}

.pergunta__icone::after {
  transform: rotate(90deg);
}

.pergunta.aberta .pergunta__icone::after {
  transform: rotate(0deg);
}

.pergunta__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

.pergunta.aberta .pergunta__resposta {
  grid-template-rows: 1fr;
}

.pergunta__resposta > div {
  overflow: hidden;
}

.pergunta__resposta p {
  max-width: 60ch;
  padding: 0 22px 20px;
  font-size: 15px;
  color: var(--tinta-2);
}

@media (max-width: 800px) {
  .duvidas {
    grid-template-columns: 1fr;
  }

  .duvidas__lado {
    position: static;
  }
}

/* ---------- Foto final e rodapé ---------- */
.final {
  padding: 0 clamp(8px, 1.4vw, 18px);
}

.final__foto {
  position: relative;
  height: 92svh;
  overflow: hidden;
  border-radius: clamp(18px, 2.4vw, 30px);
}

.final__foto img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: 50% 35%;
}

.final__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(28, 18, 13, 0) 35%, rgba(28, 18, 13, 0.7) 100%);
}

.final__frase {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: end center;
  padding: 0 var(--gutter) clamp(40px, 9svh, 110px);
  color: #fffaf3;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
}

.final__frase span {
  max-width: 16em;
}

.rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--gutter) 30px;
  font-size: 13px;
  color: var(--tinta-2);
}

.rodape__segredo {
  display: block;
  padding: 6px;
  cursor: default;
}

.rodape__segredo .monograma {
  height: 22px;
  color: var(--po);
}

/* ---------- Conteúdo dos modais ---------- */
.modal__subtitulo {
  margin-top: 26px;
  font-size: 1.7rem;
}

.modal__nota {
  margin-top: 4px;
  font-size: 14px;
  color: var(--tinta-2);
}

.amostras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.amostra {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  text-align: center;
  color: var(--tinta-2);
}

.amostra i {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--cor);
  box-shadow: inset 0 0 0 1px rgba(43, 33, 29, 0.12);
}

.amostra--proibida i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    var(--bordo) calc(50% - 1px),
    var(--bordo) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.linha-tempo {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.linha-tempo li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--linha);
}

.linha-tempo strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
}

.linha-tempo h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.linha-tempo p {
  font-size: 14px;
  color: var(--tinta-2);
}

.mapa {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 18px 0;
  border: 0;
  border-radius: 16px;
  background: var(--papel-2);
}


.botoes-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.formulario {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.formulario .botao {
  justify-self: start;
}

.sucesso {
  padding: 18px 0 4px;
  text-align: center;
}

.sucesso svg {
  width: 36px;
  height: 36px;
  margin: 0 auto 10px;
  color: var(--terracota);
}

/* Janelas no celular: mais compactas para caberem inteiras na tela */
@media (max-width: 600px) {
  .modal__subtitulo {
    margin-top: 18px;
    font-size: 1.45rem;
  }

  .amostras {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px 10px;
    margin-top: 10px;
  }

  .amostra {
    gap: 5px;
    font-size: 11.5px;
    line-height: 1.2;
  }

  .amostra i {
    aspect-ratio: auto;
    height: 30px;
    border-radius: 9px;
  }

  .linha-tempo {
    margin-top: 10px;
  }

  .linha-tempo li {
    grid-template-columns: 70px 1fr;
    gap: 12px;
    padding: 11px 0;
  }

  .linha-tempo strong {
    font-size: 1.3rem;
  }

  .linha-tempo p {
    font-size: 13.5px;
    line-height: 1.45;
  }

  .mapa {
    aspect-ratio: 16 / 10;
    margin: 14px 0;
  }

  .formulario {
    margin-top: 14px;
  }

  .campo textarea {
    min-height: 90px;
  }
}