/* ===== Botao ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 1rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--raio-pill);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--transicao), border-color var(--transicao),
    color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

.btn svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.65;
  pointer-events: none;
  transform: none;
}

/* CTA principal: leva ao checkout do Mercado Pago. */
.btn--primario {
  background-color: var(--cor-laranja);
  border-color: var(--cor-laranja);
  color: #fff;
  box-shadow: var(--sombra-sm);
}

.btn--primario:hover {
  background-color: var(--cor-laranja-escuro);
  border-color: var(--cor-laranja-escuro);
  box-shadow: var(--sombra-md);
}

/* CTA alternativo: abre a conversa no WhatsApp. */
.btn--whatsapp {
  background-color: var(--cor-whatsapp);
  border-color: var(--cor-whatsapp);
  color: #fff;
  box-shadow: var(--sombra-sm);
}

.btn--whatsapp:hover {
  background-color: var(--cor-whatsapp-escuro);
  border-color: var(--cor-whatsapp-escuro);
  box-shadow: var(--sombra-md);
}

.btn--secundario {
  background-color: transparent;
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto);
}

.btn--secundario:hover {
  background-color: var(--cor-superficie);
  border-color: var(--cor-texto);
}

.btn--fantasma {
  padding: var(--esp-2) var(--esp-3);
  color: var(--cor-texto-suave);
  font-weight: var(--peso-medio);
  text-transform: none;
}

.btn--fantasma:hover {
  color: var(--cor-texto);
  transform: none;
}

.btn--grande {
  padding: 1.125rem 2rem;
  font-size: var(--texto-base);
}

.btn--bloco {
  width: 100%;
}

/* ===== Cartao =========================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5);
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--cor-citacao-borda);
  box-shadow: var(--sombra-md);
}

.card__titulo {
  font-size: var(--texto-xl);
}

.card__texto {
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
}

/* ===== Topico com icone =================================================
 * Item de lista com icone a esquerda e titulo + descricao a direita. Usado
 * nas secoes "nao precisa inventar", "brincar tambem e desenvolver" e
 * "este kit e para voce se...".
 */

.lista-topicos {
  display: grid;
  gap: var(--esp-5);
  margin: 0;
}

/* Duas colunas a partir do momento em que couberem. */
.lista-topicos--duas {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.topico {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--esp-2) var(--esp-4);
}

.topico__icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  grid-row: span 2;
  background-color: var(--cor-citacao-fundo);
  border-radius: var(--raio-md);
  color: var(--cor-laranja);
  flex-shrink: 0;
}

.topico__icone svg {
  width: 1.5rem;
  height: 1.5rem;
}

.topico__titulo {
  align-self: center;
  font-size: var(--texto-base);
}

.topico__texto {
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
}

/* Variante em fundo escuro (secao verde) */
.secao--verde .topico__icone {
  background-color: rgb(255 255 255 / 10%);
  color: var(--cor-amarelo);
}

.secao--verde .topico__titulo {
  color: #fff;
  font-size: var(--texto-xl);
}

.secao--verde .topico__texto {
  color: var(--cor-texto-claro-suave);
}

/* Variante em cartao (secao "este kit e para voce se...") */
.topico--card {
  padding: var(--esp-4) var(--esp-5);
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.topico--card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-md);
}

.topico--card .topico__titulo {
  font-size: var(--texto-xl);
}

/* ===== Carrossel ========================================================
 * Rolagem nativa com scroll-snap: funciona sem JavaScript. O modulo
 * carrossel.js apenas acrescenta os botoes e os indicadores.
 */

.carrossel {
  position: relative;
}

.carrossel__trilho {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  /* Sangra ate as bordas da viewport para deixar o proximo card espiando. */
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-block: var(--esp-1) var(--esp-4);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.carrossel__trilho::-webkit-scrollbar {
  display: none;
}

.carrossel__item {
  flex: 0 0 293px;
  max-width: 85%;
  scroll-snap-align: start;
}

.carrossel__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}

.carrossel__figura {
  margin: 0;
  aspect-ratio: 3 / 4;
  background-color: var(--cor-fundo-alt);
  overflow: hidden;
}

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

.carrossel__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-4) var(--esp-4) var(--esp-5);
}

.carrossel__rotulo {
  color: var(--cor-laranja);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-micro);
  font-weight: var(--peso-forte);
  letter-spacing: var(--trilha-eyebrow);
  text-transform: uppercase;
}

.carrossel__titulo {
  font-size: var(--texto-xl);
}

.carrossel__texto {
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

/* Em telas largas os cards cabem todos: vira grade e a rolagem deixa de
   existir. O carrossel.js esconde os controles sozinho quando isso acontece. */
@media (min-width: 1024px) {
  .carrossel__trilho {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .carrossel__item {
    max-width: none;
  }
}

/* Dica "Deslize para ver tudo" */
.carrossel__dica {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
  color: var(--cor-laranja);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
}

.carrossel__dica svg {
  width: 1rem;
  height: 1rem;
}

/* Controles: so aparecem quando o carrossel.js os injeta. */
.carrossel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  margin-top: var(--esp-4);
}

.carrossel__seta {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pill);
  color: var(--cor-marrom-escuro);
  transition: background-color var(--transicao), border-color var(--transicao),
    opacity var(--transicao);
}

.carrossel__seta:hover {
  background-color: var(--cor-citacao-fundo);
  border-color: var(--cor-laranja);
}

.carrossel__seta[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.carrossel__seta svg {
  width: 1.25rem;
  height: 1.25rem;
}

.carrossel__pontos {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.carrossel__ponto {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  background-color: var(--cor-borda-forte);
  border-radius: var(--raio-pill);
  transition: background-color var(--transicao), width var(--transicao);
}

.carrossel__ponto[aria-current="true"] {
  width: 1.5rem;
  background-color: var(--cor-laranja);
}

/* ===== Cabecalho ======================================================== */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--altura-header);
  background-color: var(--cor-verde-escuro);
  transition: box-shadow var(--transicao);
}

.header[data-rolado="true"] {
  box-shadow: 0 2px 12px rgb(18 61 37 / 35%);
}

.header__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  height: 100%;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--cor-fundo-alt);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.marca__logo {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.header__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  flex-shrink: 0;
}

.header__perfil {
  color: var(--cor-fundo-alt);
  font-size: var(--texto-xs);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transicao);
}

.header__perfil:hover {
  color: var(--cor-amarelo);
}

/* CTA compacto: a barra tem so 58px e divide espaco com a marca. */
.header__cta {
  padding: 0.5rem 1.125rem;
  font-size: var(--texto-xs);
  white-space: nowrap;
}

/* Ate 720px a barra nao comporta marca + perfil + botao: o perfil sai, ja que
   o mesmo link aparece no CTA final e no rodape. */
@media (max-width: 720px) {
  .header__perfil {
    display: none;
  }
}

/* Em telas bem estreitas marca e botao ainda disputam espaco. Reduzir a escala
   dos dois preserva o nome por extenso, em vez de escondê-lo. */
@media (max-width: 420px) {
  .marca {
    gap: var(--esp-1);
    font-size: var(--texto-micro);
  }

  .marca__logo {
    width: 1.5rem;
    height: 1.5rem;
  }

  .header__acoes {
    gap: var(--esp-2);
  }

  .header__cta {
    padding: 0.4375rem 0.875rem;
    font-size: var(--texto-micro);
  }
}

/* Abaixo de 360px nem reduzindo a escala o nome por extenso cabe ao lado do
   botao. Ele sai da tela mas continua no acessibility tree (mesmas regras de
   .visually-hidden em base.css), entao o link da marca mantem seu nome. */
@media (max-width: 359px) {
  .marca span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Botao de voltar usado na pagina de agradecimento. */
.header .btn--secundario {
  padding: 0.5rem 1rem;
  border-color: rgb(255 255 255 / 35%);
  color: var(--cor-fundo-alt);
  font-size: var(--texto-xs);
}

.header .btn--secundario:hover {
  background-color: rgb(255 255 255 / 10%);
  border-color: var(--cor-amarelo);
  color: var(--cor-amarelo);
}

/* ===== Acordeao (FAQ) =================================================== */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  max-width: 820px;
  margin-inline: auto;
}

.faq__item {
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.faq__item[open] {
  border-color: var(--cor-citacao-borda);
  box-shadow: var(--sombra-sm);
}

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-base);
  font-weight: var(--peso-forte);
  list-style: none;
}

.faq__pergunta::-webkit-details-marker {
  display: none;
}

.faq__pergunta:hover {
  background-color: var(--cor-fundo-alt);
}

/* O marcador "+" / "-" do layout de referencia, em laranja. */
.faq__pergunta::after {
  content: "+";
  color: var(--cor-laranja);
  font-size: 1.375rem;
  font-weight: var(--peso-forte);
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--transicao);
}

.faq__item[open] .faq__pergunta::after {
  content: "–";
}

.faq__resposta {
  padding: 0 var(--esp-5) var(--esp-5);
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
}

/* ===== Modal ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.modal[hidden] {
  display: none;
}

.modal__fundo {
  position: absolute;
  inset: 0;
  background-color: rgb(55 20 12 / 60%);
  backdrop-filter: blur(3px);
  animation: modal-fade 200ms ease-out;
}

.modal__caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  width: min(100%, 30rem);
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  padding: var(--esp-7) var(--esp-6) var(--esp-6);
  background-color: var(--cor-superficie);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  text-align: center;
  animation: modal-entrada 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal__fechar {
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-3);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--raio-sm);
  color: var(--cor-texto-suave);
  transition: background-color var(--transicao), color var(--transicao);
}

.modal__fechar:hover {
  background-color: var(--cor-fundo-alt);
  color: var(--cor-texto);
}

.modal__fechar svg {
  width: 1.25rem;
  height: 1.25rem;
}

.modal__icone {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-inline: auto;
  background-color: var(--cor-citacao-fundo);
  border-radius: var(--raio-pill);
  color: var(--cor-laranja);
}

.modal__icone svg {
  width: 1.75rem;
  height: 1.75rem;
}

.modal__titulo {
  font-size: var(--texto-xl);
}

.modal__texto {
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
}

.modal__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}

.modal__erro {
  padding: var(--esp-3) var(--esp-4);
  background-color: var(--cor-erro-fundo);
  border-radius: var(--raio-sm);
  color: var(--cor-erro);
  font-size: var(--texto-sm);
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }
}

@keyframes modal-entrada {
  from {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.97);
  }
}

body[data-modal-aberto="true"] {
  overflow: hidden;
}

/* ===== Rodape =========================================================== */

.footer {
  padding-block: var(--esp-8) var(--esp-5);
  background-color: var(--cor-marrom-rodape);
  color: var(--cor-fundo-alt);
}

.footer .marca {
  color: var(--cor-fundo-alt);
  font-size: var(--texto-base);
}

.footer__topo {
  display: grid;
  gap: var(--esp-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--esp-6);
}

@media (min-width: 780px) {
  .footer__topo {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--esp-8);
  }
}

.footer__sobre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  max-width: 24rem;
}

.footer__tagline {
  color: rgb(255 248 232 / 78%);
  font-size: var(--texto-md);
}

.footer__titulo {
  margin-bottom: var(--esp-4);
  color: var(--cor-amarelo);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--trilha-eyebrow);
  text-transform: uppercase;
}

.footer__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
}

.footer__lista a {
  color: rgb(255 248 232 / 78%);
  font-size: var(--texto-md);
  text-decoration: none;
  transition: color var(--transicao);
}

.footer__lista a:hover {
  color: var(--cor-amarelo);
  text-decoration: underline;
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-top: var(--esp-5);
  border-top: 1px solid rgb(255 248 232 / 18%);
  color: rgb(255 248 232 / 65%);
  font-size: var(--texto-xs);
}

/* ===== Revelacao ao rolar ===============================================
 * O estado inicial so e aplicado quando ha scripting disponivel. Navegadores
 * sem JavaScript - ou sem suporte a esta media query - simplesmente ignoram o
 * bloco e mostram o conteudo, entao nao existe cenario em que a secao some.
 */

@media (scripting: enabled) {
  .revelar {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .revelar.is-visivel {
    opacity: 1;
    transform: none;
  }
}

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