/* ==========================================================================
   MV Decorações — estilos abaixo da dobra.
   Carregado sem bloquear a renderização (ver includes/head.php).
   ========================================================================== */

/* ============================================================ Divisórias
   A seção de baixo entra por uma borda recortada em vez de uma linha reta.

   O elemento inteiro é pintado com a cor da seção de cima; por cima dele,
   uma camada com a cor da seção de baixo é recortada na forma. Assim a
   mesma marcação serve para qualquer par de cores — basta trocar as duas
   variáveis, sem gerar um SVG novo para cada combinação.
   ====================================================================== */
.divisoria {
  position: relative;
  height: 34px;
  background-color: var(--de);
}

.divisoria::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--para);
  -webkit-mask: var(--forma) var(--corte);
          mask: var(--forma) var(--corte);
}

/* O contorno dourado é a mesma forma repetida três pixels acima: o que
   sobra dela por cima é justamente um fio seguindo o recorte.

   Fica só nas duas emendas do fim da página. Em toda seção, ele deixava de
   ser acabamento e passava a ser o assunto. */
.divisoria--fio::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--amarelo-suave);
  transform: translateY(-3px);
  -webkit-mask: var(--forma) var(--corte);
          mask: var(--forma) var(--corte);
}

/* Onda: traço solto, esticado na largura toda. Aqui esticar é o que se
   quer — a irregularidade some e sobra um movimento longo e calmo. */
.divisoria--onda {
  height: 26px;
  --corte: bottom / 100% 100% no-repeat;
  --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 42' preserveAspectRatio='none'%3E%3Cpath d='M0 22c104-19 197-24 322-11 118 12 197 27 316 19 108-8 176-30 297-27 96 3 178 17 265 23v18H0Z'/%3E%3C/svg%3E");
}

/* Festão: as meias-luas de bandeirinha de festa. Aparece uma vez só, na
   entrada da última seção, onde vale como arremate. O ladrilho se repete em
   tamanho fixo, senão as luas esticariam junto com a largura da tela e
   virariam ondas achatadas num monitor grande. */
.divisoria--festao {
  height: 28px;
  --corte: bottom left / 52px 100% repeat-x;
  --forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 30'%3E%3Cpath d='M0 28A28 28 0 0 1 56 28V30H0Z'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  .divisoria--onda   { height: 40px; }
  .divisoria--festao { height: 36px; --corte: bottom left / 68px 100% repeat-x; }
}

/* --------------------------------------------------- Problema / agitação */
.pain__grid { display: grid; gap: 34px; }

/* Sem caixa branca em volta de cada item: uma lista com um risco fino entre
   as linhas lê como texto escrito, não como quatro cartões de template. */
.pain__list { margin: 0; padding: 0; list-style: none; display: grid; }
.pain__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 1.02rem;
  line-height: 1.55;
}
.pain__list li:last-child { border-bottom: 0; }
.pain__x {
  width: 24px; height: 24px;
  margin-top: 1px;
  color: var(--vermelho);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  /* Cada ✕ inclinado para um lado, como quem risca à mão. */
  transform: rotate(-6deg);
}
.pain__list li:nth-child(2n) .pain__x { transform: rotate(7deg); }

.pain__turn {
  align-self: start;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--azul);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.pain__turn h3 { color: var(--amarelo-suave); }
.pain__turn p { color: rgba(255, 255, 255, .88); }
.pain__turn p:last-of-type { margin-bottom: 0; }

@media (min-width: 900px) {
  .pain__grid { grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
}

/* ------------------------------------------------------- O que está incluso */

/* -------------------------------------------------------------- Ocasiões */
.occasions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Uma etiqueta de cada cor, cada uma um pouquinho torta, como adesivo
   colado à mão. São cinco ocasiões e cinco cores: a paleta fecha exatamente
   aqui, e é o bloco mais festivo da página. */
.occasions li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 19px;
  border: 1.5px solid var(--cor-etiqueta);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--cor-etiqueta);
  font-size: .96rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.occasions span[aria-hidden] { font-size: 1.1rem; line-height: 1; }

.occasions li:nth-child(5n+1) { --cor-etiqueta: var(--azul);     transform: rotate(-1.4deg); }
.occasions li:nth-child(5n+2) { --cor-etiqueta: var(--rosa);     transform: rotate(1.1deg); }
.occasions li:nth-child(5n+3) { --cor-etiqueta: var(--verde);    transform: rotate(-.5deg); }
.occasions li:nth-child(5n+4) { --cor-etiqueta: var(--vermelho); transform: rotate(1.5deg); }
.occasions li:nth-child(5n+5) { --cor-etiqueta: var(--azul-700); transform: rotate(-1deg); }

/* -------------------------------------------------------- Como funciona */
/* É um <ol> pela semântica da ordem, mas o número visível é o círculo do
   .steps__num, então o marcador padrão da lista sai. */
.steps {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Os passos também saíram da caixa branca. O que separa um do outro agora é
   uma linha vertical fina, como uma marcação de caderno. */
.steps__item {
  position: relative;
  padding: 4px 0 4px 22px;
  /* A primeira linha é para navegador sem color-mix: ele descarta a segunda
     e fica com a borda azul, em vez de ficar sem borda nenhuma. */
  border-left: 2px solid var(--azul-100);
  border-left-color: color-mix(in srgb, var(--cor-passo) 26%, transparent);
}
@media (min-width: 860px) {
  .steps__item { padding: 0 20px 0 22px; }
}
.steps__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 16px;
}
.steps__digit {
  position: relative;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cor-passo, var(--azul));
  line-height: 1;
}

/* Cada passo na sua cor, do anel ao número e à linha da lateral. */
.steps__item:nth-child(1) { --cor-passo: var(--azul); }
.steps__item:nth-child(2) { --cor-passo: var(--rosa); }
.steps__item:nth-child(3) { --cor-passo: var(--verde); }

/* O anel é traçado quando o passo entra na tela, e o número sobe junto.
   São 48px de círculo: 2·π·21.5 ≈ 135, o comprimento do traço. */
.steps__ring {
  position: absolute;
  inset: 0;
  width: 48px; height: 48px;
  fill: none;
  stroke: var(--cor-passo);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 135;
  stroke-dashoffset: 135;
  /* Começa às 12h em vez de às 3h. */
  transform: rotate(-90deg);
}

.steps__item.is-in .steps__ring {
  animation: steps-ring .75s cubic-bezier(.22, .61, .36, 1) forwards;
}
.steps__item.is-in .steps__digit {
  animation: steps-digit .45s cubic-bezier(.22, .61, .36, 1) .18s backwards;
}

/* Cada passo entra um pouco depois do anterior, para o olho ler 1, 2, 3. */
.steps__item:nth-child(2).is-in .steps__ring  { animation-delay: .12s; }
.steps__item:nth-child(2).is-in .steps__digit { animation-delay: .30s; }
.steps__item:nth-child(3).is-in .steps__ring  { animation-delay: .24s; }
.steps__item:nth-child(3).is-in .steps__digit { animation-delay: .42s; }

@keyframes steps-ring {
  from { stroke-dashoffset: 135; }
  to   { stroke-dashoffset: 0; }
}
@keyframes steps-digit {
  from { opacity: 0; transform: translateY(6px) scale(.7); }
  to   { opacity: 1; transform: none; }
}

.steps__item h3 { margin-bottom: 8px; }
.steps__item p { margin: 0; color: var(--muted); font-size: .97rem; }

@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* Sem animação, o anel já nasce fechado. */
@media (prefers-reduced-motion: reduce) {
  .steps__ring { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------- Investimento */
/* Um cartão de preço e um cartão de frete lado a lado: as duas perguntas que
   o visitante faz nessa altura da página são "quanto custa" e "como chega". */
.price { display: grid; gap: 18px; align-items: start; }

.price__card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border: 2px solid var(--azul);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.price__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--font-title);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--azul);
  line-height: 1;
}
.price__value small {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
}

/* O valor sai circulado à caneta, do jeito que alguém marcaria num papel. */
.price__numero {
  position: relative;
  display: inline-block;
  padding: 6px 14px 8px;
}
.price__numero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90' preserveAspectRatio='none'%3E%3Cpath d='M139 8C104 2 58 3 30 15 4 26-3 47 12 63c16 17 62 24 106 21 35-2 66-11 74-25 8-13-6-31-38-42' fill='none' stroke='%23ec4899' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.price__obs { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
.price__list {
  margin: 22px 0 24px;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: 12px;
}
.price__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  font-size: .96rem;
  line-height: 1.45;
}
.price__list .ic { width: 20px; height: 20px; color: var(--wa); margin-top: 2px; }
.price__note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}

.freight {
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}
.freight__title { margin-bottom: 20px; font-size: 1.25rem; }
.freight__item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  align-items: start;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.freight__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--azul-50);
  color: var(--azul);
}
.freight__item h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
}
.freight__tag {
  padding: 3px 11px;
  border-radius: var(--r-full);
  background: var(--wa-soft);
  color: var(--wa-ink);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.freight__item p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.5; }
.freight__note { margin-top: 7px !important; font-size: .84rem !important; font-style: italic; }
.freight__pay {
  margin: 0;
  padding: 15px 17px;
  border-radius: var(--r-md);
  background: var(--manteiga);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}
.freight__pay strong { color: var(--ink); }

/* ------------------------------------------------------- Mapa da retirada */
.mapa {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--azul-50);
}
.mapa__info { padding: 18px 17px; }

.mapa__endereco {
  display: flex;
  align-items: start;
  gap: 11px;
  margin: 0 0 14px;
  font-size: .95rem;
  line-height: 1.5;
}
.mapa__endereco .ic { margin-top: 2px; color: var(--azul); flex-shrink: 0; }

.mapa__horario {
  display: flex;
  align-items: start;
  gap: 11px;
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}
.mapa__horario .ic { margin-top: 2px; color: var(--azul); flex-shrink: 0; }

.mapa__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.mapa__btn,
.mapa__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1.5px solid var(--azul);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--azul);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.mapa__btn:hover,
.mapa__link:hover { background: var(--azul); color: #fff; }
.mapa__btn .ic, .mapa__link .ic { width: 18px; height: 18px; }

.mapa__aviso { margin: 13px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }

/* Com o mapa aberto, o iframe ocupa o lugar do cartão. */
.mapa iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}
.mapa__rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--white);
  font-size: .88rem;
}
.mapa__rodape a { color: var(--azul); font-weight: 700; text-decoration: none; }
.mapa__rodape a:hover { text-decoration: underline; }

@media (min-width: 900px) {
  .price { grid-template-columns: .95fr 1.05fr; gap: 24px; }
}

/* ---------------------------------------------------------- Além do kit */
/* É um bloco de venda adicional, não a atração principal: a foto entra ao
   lado do texto, num tamanho que não compete com a galeria de temas. */
.extras__grid { display: grid; gap: 30px; }
.extras__item {
  display: grid;
  grid-template-columns: clamp(112px, 32%, 178px) 1fr;
  gap: 22px;
  align-items: center;
}

/* Fotos coladas tortas, para o bloco não virar mais dois cartões iguais. */
.foto-inclinada { position: relative; }
.foto-inclinada img { border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.foto-inclinada--esq img { transform: rotate(-1.5deg); }
.foto-inclinada--dir img { transform: rotate(1.5deg); }
.foto-inclinada::before {
  content: '';
  position: absolute;
  inset: 12px -8px -12px 8px;
  border-radius: var(--r-md);
  background: var(--azul-100);
  transform: rotate(1.4deg);
}
.foto-inclinada--dir::before { inset: 12px 8px -12px -8px; transform: rotate(-1.4deg); }

.extras__texto h3 {
  display: flex;
  align-items: start;
  gap: 10px;
  margin-bottom: 10px;
}
.extras__texto h3 .ic { margin-top: 2px; color: var(--azul); flex-shrink: 0; }
.extras__texto p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }

.extras__cta { margin: 40px 0 0; text-align: center; }
.themes__cta { margin: 34px 0 0; text-align: center; }

@media (min-width: 1000px) {
  .extras__grid { grid-template-columns: repeat(2, 1fr); gap: 52px; }
}

/* ----------------------------------------------------------- Depoimentos */
.reviews { position: relative; }

.reviews__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.reviews__viewport::-webkit-scrollbar { display: none; }

.reviews__track { display: flex; gap: 16px; }

.review {
  flex: 0 0 min(86%, 380px);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.review__stars { display: flex; gap: 2px; margin-bottom: 14px; color: var(--amarelo-forte); }
.review__stars .ic { width: 17px; height: 17px; fill: currentColor; }
.review__text {
  flex: 1;
  margin-bottom: 20px;
  font-size: 1rem;
  line-height: 1.6;
}
.review__author { display: flex; align-items: center; gap: 12px; }
/* Uma cor por depoimento. Como os cartões passam um a um no carrossel, a
   cor muda junto e o bloco não fica sendo o mesmo cartão azul cinco vezes.
   O fundo é a cor a 12%, para a inicial continuar legível por cima. */
.review__avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--azul-50);
  background: color-mix(in srgb, var(--cor-avatar, var(--azul)) 12%, #fff);
  color: var(--cor-avatar, var(--azul));
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
}
.review:nth-child(5n+1) { --cor-avatar: var(--azul); }
.review:nth-child(5n+2) { --cor-avatar: var(--rosa); }
.review:nth-child(5n+3) { --cor-avatar: var(--verde); }
.review:nth-child(5n+4) { --cor-avatar: var(--vermelho); }
.review:nth-child(5n+5) { --cor-avatar: var(--azul-700); }
.review__name { display: block; font-weight: 700; font-size: .95rem; }
.review__meta { display: block; color: var(--muted); font-size: .82rem; }

.reviews__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
}
.reviews__btn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--azul);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.reviews__btn:hover { background: var(--azul); color: #fff; }
.reviews__btn--prev .ic { transform: rotate(180deg); }

.reviews__dots { display: flex; gap: 2px; }

/* O botão tem 24px para caber no dedo; o ponto visível é o ::before, menor.
   Encolher o alvo de toque junto com o visual reprovaria em acessibilidade. */
.reviews__dot {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.reviews__dot::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--manteiga-funda);
  transition: background-color .15s ease, width .15s ease;
}
.reviews__dot[aria-current='true']::before {
  width: 22px;
  border-radius: var(--r-full);
  background: var(--azul);
}

@media (min-width: 720px) { .review { flex-basis: 380px; } }

/* ---------------------------------------------------------------- Temas */
.themes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.themes li {
  padding: 9px 17px;
  border: 1px solid var(--azul-100);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--azul);
  font-size: .9rem;
  font-weight: 600;
}
.themes__more {
  border-style: dashed !important;
  background: transparent !important;
  color: var(--muted) !important;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.gallery figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--manteiga-funda);
}
.gallery__link { display: block; position: relative; }
.gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: rgba(255, 253, 249, .93);
  font-size: .78rem;
  font-weight: 600;
  pointer-events: none;
}

/* A lupa avisa que a foto abre. No celular ela fica sempre visível, porque
   lá não existe passar o mouse por cima para descobrir. */
.gallery__lupa {
  position: absolute;
  top: 9px; right: 9px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 253, 249, .93);
  color: var(--azul);
  box-shadow: var(--shadow-sm);
  transition: opacity .2s ease, transform .2s ease;
}
.gallery__lupa .ic { width: 19px; height: 19px; }
@media (hover: hover) {
  .gallery__lupa { opacity: 0; transform: scale(.85); }
  .gallery__link:hover .gallery__lupa,
  .gallery__link:focus-visible .gallery__lupa { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ Foto ampliada */
.lightbox {
  width: min(94vw, 560px);
  max-width: none;
  max-height: 94dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(22, 11, 16, .92); }

/* A imagem se dimensiona sozinha em vez de esticar até a caixa: assim não
   sobra tarja de cor ao lado de uma foto em pé. */
.lightbox__palco { position: relative; display: grid; justify-items: center; }
.lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: 78dvh;
  border-radius: var(--r-md);
}
.lightbox__legenda {
  margin: 12px 0 0;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 249, .94);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.lightbox__btn:hover { background: #fff; }
.lightbox__btn--fechar { top: -14px; right: -8px; }
.lightbox__btn--antes  { top: 50%; left: -10px;  transform: translateY(-50%); }
.lightbox__btn--depois { top: 50%; right: -10px; transform: translateY(-50%); }

/* Numa tela estreita não há margem para as setas ficarem fora da foto. */
@media (max-width: 700px) {
  .lightbox__btn--fechar { top: 8px; right: 8px; }
  .lightbox__btn--antes  { left: 8px; }
  .lightbox__btn--depois { right: 8px; }
}

/* São 10 temas: em 2 e em 5 colunas as fileiras fecham certinho, em 3 sobra
   uma foto sozinha no fim. */
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(5, 1fr); gap: 14px; } }


/* ------------------------------------------------------------------ FAQ */
.duvidas__grid { display: grid; gap: 32px; }
.duvidas__head h2 { margin-bottom: .4em; }
.duvidas__head p { margin: 0; color: var(--muted); font-size: 1rem; }

.faq { display: grid; gap: 10px; }

@media (min-width: 940px) {
  .duvidas__grid { grid-template-columns: .78fr 1.22fr; gap: 56px; align-items: start; }
  .duvidas__head { position: sticky; top: calc(var(--header-h) + 28px); }
}

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  overflow: hidden;
}
.faq details[open] { border-color: var(--azul-100); box-shadow: var(--shadow-sm); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '';
  width: 11px; height: 11px;
  flex-shrink: 0;
  border-right: 2.5px solid var(--azul);
  border-bottom: 2.5px solid var(--azul);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }

.faq__answer { padding: 0 22px 21px; }
.faq__answer p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.62; }

/* -------------------------------------------------------------- CTA final */
.final {
  position: relative;
  background:
    radial-gradient(760px 400px at 15% 0%, var(--azul-50), transparent 60%),
    linear-gradient(180deg, var(--manteiga) 0%, var(--cream) 100%);
}
.final__box { max-width: 42rem; margin-inline: auto; text-align: center; }
.final__box h2 { margin-bottom: .35em; }
.final__lead { margin-bottom: 28px; color: var(--muted); font-size: 1.06rem; }

.final__contacts {
  display: grid;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
  font-size: .94rem;
}
.final__contacts a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.final__contacts a:hover { color: var(--azul); text-decoration: underline; }
.final__contacts .ic { width: 18px; height: 18px; color: var(--azul); flex-shrink: 0; }

.final__hours { margin: 22px 0 0; color: var(--muted); font-size: .86rem; }

@media (min-width: 700px) {
  .final__contacts { grid-auto-flow: column; gap: 28px; }
}

/* ---------------------------------------------------------------- Rodapé */
.footer {
  padding: clamp(44px, 6vw, 64px) 0 0;
  background: var(--ink);
  color: rgba(255, 255, 255, .74);
  font-size: .93rem;
}
.footer a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.footer a:hover { color: #fff; }

.footer__grid { display: grid; gap: 34px; }
.footer h3 {
  margin-bottom: 14px;
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.footer p { margin-bottom: .7em; }

.footer .logo__name { color: #fff; }
.footer .logo__tag { color: rgba(255, 255, 255, .5); }
.footer__about { margin-top: 16px; max-width: 30rem; }

.footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer__list li { display: flex; align-items: flex-start; gap: 10px; }
.footer__list .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--amarelo-suave); flex-shrink: 0; }

.footer__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.footer__map {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: .9rem;
}
.footer__map:hover { background: rgba(255, 255, 255, .1); }

.footer__areas { color: rgba(255, 255, 255, .55); font-size: .86rem; }

.footer__bottom {
  margin-top: 42px;
  padding: 22px 0 calc(22px + var(--safe-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  color: rgba(255, 255, 255, .5);
  font-size: .82rem;
}

@media (min-width: 800px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; }
}

/* ------------------------------------------ Barra fixa e botão flutuante */
.floating-wa {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 6px 20px rgba(13, 107, 50, .38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.floating-wa.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.floating-wa:hover { background: var(--wa-dark); }

/* No celular a barra inferior substitui o botão redondo. */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 253, 249, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .24s ease;
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar .btn { flex: 1; min-height: 50px; padding-inline: 14px; font-size: 1rem; }
.mobile-bar .btn--ghost { flex: 0 0 auto; }

@media (min-width: 860px) { .mobile-bar { display: none; } }
@media (max-width: 859px) { .floating-wa { display: none; } }

/* Espaço extra no fim da página para a barra fixa não cobrir o rodapé. */
@media (max-width: 859px) { body { padding-bottom: 74px; } }

/* --------------------------------------- Entrada suave das seções (leve) */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Sem JavaScript, nada pode ficar invisível. */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .steps__ring { stroke-dashoffset: 0; }