/* =================================================================
   REVESTY — estilos base
   MOBILE-FIRST: tudo aqui é pensado pro ~380px.
   Ajustes de desktop ficam isolados em @media (min-width:768px).
   ================================================================= */

/* ===== DESIGN TOKENS ===== */
:root {
  --azul: #0175EF;
  --azul-escuro: #015FCB;   /* hover/estados */
  --branco: #FFFFFF;
  --tinta: #0E2C49;         /* texto escuro */
  --cinza-borda: #E4E9F2;
  --container: 1200px;

  /* Alturas reservadas (evitam layout shift) */
  --h-aviso: 34px;
  --h-header: 58px;

  /* Tamanho do ícone R (BRANCO) no marquee.
     PNG cropado (sem padding) -> 14px deixa o R nítido entre as frases. */
  --aviso-icon-h: 14px;

  --fonte: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ===== RESET LEVE ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { text-decoration: none; color: inherit; }

button { font-family: inherit; }

/* Container centralizado */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}

/* Foco visível e consistente (acessibilidade) */
:focus-visible {
  outline: 3px solid var(--azul-escuro);
  outline-offset: 2px;
}

/* Utilitário: esconder visualmente mantendo no leitor de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


/* =================================================================
   TAREFA 1 — BARRA DE AVISO (marquee)
   ================================================================= */
.aviso {
  position: relative;
  height: var(--h-aviso);   /* altura fixa -> sem layout shift */
  background: var(--azul);   /* barra AZUL */
  overflow: hidden;         /* esconde o que passa das bordas */
  display: flex;
  align-items: center;
}

/* Janela do marquee */
.marquee {
  width: 100%;
  overflow: hidden;
}

/* A "esteira" que se move. width:max-content = soma dos 2 blocos lado a lado.
   Anima translateX(-50%) (= largura de 1 bloco) -> volta ao ponto idêntico = loop perfeito. */
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;                 /* performance da animação */
  animation: marquee 32s linear infinite; /* contínua, direita -> esquerda */
}

/* Cada bloco de mensagens (são 2 blocos idênticos no HTML) */
.marquee__seq {
  display: flex;
  align-items: center;
  flex-shrink: 0;   /* não deixa o flex encolher o bloco (mantém a medida exata) */
}

/* Cada frase + seu ícone separador */
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-inline: 14px;     /* respiro entre frases */
  white-space: nowrap;      /* nunca quebra a frase */
  color: var(--branco);     /* texto BRANCO */
  font-size: 11px;          /* ~11px no mobile */
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Ícone R = separador. Altura fixa, sem distorção (width auto). */
.marquee__icon {
  height: var(--aviso-icon-h);
  width: auto;
  flex-shrink: 0;
}

/* Movimento do marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pausa no hover (vale principalmente no desktop, onde existe ponteiro) */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* Fallback acessível: escondido visualmente no fluxo normal,
   mas presente pro leitor de tela. */
.aviso__fallback {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* prefers-reduced-motion: para tudo e mostra 1 frase centralizada */
@media (prefers-reduced-motion: reduce) {
  .marquee { display: none; }            /* some com o movimento */
  .marquee__track { animation: none; }

  .aviso__fallback {                     /* vira a frase visível e centralizada */
    position: static;
    width: auto; height: auto;
    margin: 0; padding: 0 16px;
    clip: auto;
    overflow: hidden;
    text-align: center;
    width: 100%;
    color: var(--branco);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-overflow: ellipsis;
  }
}


/* =================================================================
   TAREFA 2 — HEADER (azul, sticky)
   ================================================================= */
.header {
  position: sticky;   /* a barra de aviso rola e some; o header gruda no topo */
  top: 0;
  z-index: 100;
  height: var(--h-header);
  background: var(--branco);                 /* header BRANCO */
  border-bottom: 1px solid var(--cinza-borda); /* linha fininha de separação */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);    /* + sombra suave (combina os dois) */
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  display: inline-flex;
  align-items: center;
}

/* width/height já vêm no HTML; aqui só garante a altura visual no mobile */
.header__logo img {
  height: 24px;
  width: auto;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ----- Hambúrguer ----- */
.hamburguer {
  /* área de toque mínima 44x44 */
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.hamburguer__line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--azul);   /* linhas AZUIS (header branco) */
  border-radius: 2px;
}

/* ----- Carrinho (ícone azul + contador) ----- */
.cart-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--azul);        /* ícone AZUL (header branco) */
  cursor: pointer;
}
.cart-btn__count {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--azul);    /* pílula azul, número branco */
  color: var(--branco);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
}
/* Esconde o contador enquanto for 0 (classe controlada pelo JS) */
.cart-btn__count.is-empty { display: none; }

/* ----- Mini-resumo do carrinho ----- */
.cart-resumo {
  position: fixed;
  top: calc(var(--h-header) + 6px);  /* logo abaixo do header */
  right: 12px;
  z-index: 150;
  width: 280px;
  max-width: calc(100vw - 24px);     /* mobile-first: nunca passa da tela */
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(14, 44, 73, .18);
  padding: 16px;
}
.cart-resumo[hidden] { display: none; }

.cart-resumo__vazio {
  margin: 0;
  color: var(--tinta);
  font-size: 14px;
}
.cart-resumo__item { margin-bottom: 14px; }
.cart-resumo__kit { margin: 0 0 2px; color: var(--tinta); font-size: 15px; }
.cart-resumo__veiculo { margin: 0 0 8px; color: #5a6b7e; font-size: 13px; }
.cart-resumo__preco { margin: 0; color: var(--azul); font-weight: 700; font-size: 18px; }

.cart-resumo__cta {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--azul);
  color: var(--branco);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease;
}
.cart-resumo__cta:hover:not([disabled]) { background: var(--azul-escuro); }
.cart-resumo__cta[disabled] { opacity: .5; cursor: not-allowed; }


/* =================================================================
   TAREFA 3 — DRAWER (menu lateral direito)
   ================================================================= */

/* Overlay escuro atrás do painel */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 44, 73, .5);   /* tinta com transparência */
  opacity: 0;
  transition: opacity .25s ease;
}
/* [hidden] some de vez; quando o JS tira o hidden e adiciona .is-open, faz o fade */
.drawer-overlay[hidden] { display: none; }
.drawer-overlay.is-open { opacity: 1; }

/* Painel */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 210;
  width: 82%;
  max-width: 360px;
  height: 100%;
  height: 100dvh;                 /* dvh: respeita a barra do navegador mobile */
  background: var(--branco);
  box-shadow: -8px 0 24px rgba(14, 44, 73, .18);
  transform: translateX(100%);   /* começa fora da tela (à direita) */
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer.is-open { transform: translateX(0); }   /* desliza pra dentro */

/* Topo do painel: logo + botão fechar */
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--h-header);
  padding-inline: 16px;
  border-bottom: 1px solid var(--cinza-borda);
}
.drawer__logo { height: 26px; width: auto; }

.drawer__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: -8px;     /* alinha o X com a borda mantendo a área de toque */
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--azul);
  cursor: pointer;
}

/* Links */
.drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.drawer__link {
  padding: 16px 20px;          /* itens grandes, toque fácil */
  color: var(--azul);
  font-weight: 600;
  font-size: 17px;
  border-bottom: 1px solid var(--cinza-borda);  /* separador fino */
}
.drawer__link:active { background: #F3F7FF; }
.drawer__link--wpp { color: var(--azul-escuro); }

/* Trava o scroll do body quando o drawer está aberto (classe posta pelo JS) */
body.no-scroll { overflow: hidden; }


/* =================================================================
   GALERIA DO PRODUTO (carrossel scroll-snap + miniaturas)
   ================================================================= */
.galeria {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* ----- Carrossel principal ----- */
.galeria__principal {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* swipe suave que "trava" em cada foto */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox */
}
.galeria__principal::-webkit-scrollbar { display: none; }  /* WebKit */

.galeria__slide {
  flex: 0 0 100%;                  /* 1 foto por tela */
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;             /* 1:1, altura reservada -> sem CLS */
  background: #EEF3FA;             /* placeholder enquanto a imagem carrega/quebra */
  cursor: zoom-in;
}
.galeria__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- Miniaturas ----- */
.galeria__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 16px;
  scrollbar-width: none;
}
.galeria__thumbs::-webkit-scrollbar { display: none; }

.galeria__thumb {
  flex: 0 0 auto;
  width: 64px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid var(--cinza-borda);
  border-radius: 8px;
  overflow: hidden;
  background: #EEF3FA;
  cursor: pointer;
}
.galeria__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria__thumb.is-active { border-color: var(--azul); }  /* ativa = borda azul */


/* =================================================================
   BLOCO DE PRODUTO (título + seletor de kit + preço + CTA)
   ================================================================= */
.produto {
  max-width: var(--container);
  margin-inline: auto;
  padding: 18px 16px 28px;
}

.produto__eyebrow {
  margin: 0 0 6px;
  color: #8A97A8;            /* cinza */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.produto__titulo {
  margin: 0 0 10px;
  color: var(--tinta);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.produto__sub {
  margin: 0 0 12px;
  color: #5a6b7e;
  font-size: 14px;
  line-height: 1.5;
}
.produto__sep { color: var(--cinza-borda); margin: 0 2px; }

/* Eyebrow de seção (Seu veículo / Cor / Escolha a textura) */
.bloco-eyebrow {
  margin: 0 0 10px;
  color: #8A97A8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* (avaliações ficam comentadas no HTML; estilo base pronto pra ligar) */
.produto__avaliacoes { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.produto__estrelas { color: #FFB400; letter-spacing: 2px; }
.produto__avaliacoes-num { color: #8A97A8; font-size: 13px; }

/* ----- Seletor de kit (CARDS, não pílula) ----- */
.kit-seletor {
  display: grid;
  grid-template-columns: 1fr;     /* mobile: empilhado (thumb à esquerda) */
  gap: 20px;                      /* folga pra tag que sobe pra fora do card */
  margin: 24px 0 18px;           /* espaço extra no topo pro 1º tag protruso */
}
.kit-card {
  position: relative;            /* âncora da tag/check absolutos */
  overflow: visible;             /* NÃO clipa a tag que fica metade pra fora */
  display: flex;
  flex-direction: row;            /* miniatura à ESQUERDA + textos à direita */
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px 12px;       /* padding-top dá respiro pra tag montada na borda */
  background: var(--branco);
  border: 2px solid var(--cinza-borda);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.kit-card.is-active {
  border-color: var(--azul);     /* ativo: borda azul */
  background: #F3F8FF;           /* fundo levinho azul */
}
.kit-card__thumb {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 8px;
  background: #EEF3FA;
}
/* padding-top empurra o texto pra BAIXO da tag (topo-dir) -> nunca sobrepõe.
   padding-right nos preços reserva o espaço do check (baixo-dir). */
.kit-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kit-card__nome { color: var(--tinta); font-size: 14px; font-weight: 700; line-height: 1.2; }
.kit-card.is-active .kit-card__nome { color: var(--azul); }
.kit-card__desc { color: #5a6b7e; font-size: 12px; line-height: 1.35; }
.kit-card__precos { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; flex-wrap: wrap; padding-right: 30px; }
.kit-card__de { color: #8A97A8; font-size: 12px; text-decoration: line-through; }
.kit-card__pix { color: var(--tinta); font-size: 15px; font-weight: 800; }   /* preço escuro */

/* Tag MONTADA SOBRE A BORDA SUPERIOR, canto DIREITO, metade pra fora.
   As duas (Econômico / Mais Vendido) no mesmo azul. */
.kit-card__tag {
  position: absolute;
  top: 0;
  right: 14px;                    /* recuada da quina direita */
  transform: translateY(-50%);    /* "senta" em cima da linha (metade pra fora) */
  padding: 4px 9px;
  background: var(--azul);
  color: var(--branco);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(1, 117, 239, .25);
}

/* Check do card ativo no canto INFERIOR DIREITO (não sobre o texto) */
.kit-card__check {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--azul);
  color: #fff;
  font-size: 12px;
  border-radius: 50%;
}
.kit-card.is-active .kit-card__check { display: inline-flex; }

/* ----- Seletor de veículo (3 dropdowns) ----- */
.veiculo { margin-bottom: 18px; }
.veiculo__campos { display: grid; gap: 10px; }
.campo { display: block; }
.select {
  width: 100%;
  min-height: 48px;             /* área de toque grande */
  padding: 0 38px 0 14px;
  border: 2px solid var(--cinza-borda);
  border-radius: 10px;
  background: var(--branco);
  color: var(--tinta);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* setinha custom */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230175EF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.select:disabled { opacity: .55; cursor: not-allowed; background-color: #F6F8FB; }
.select:focus-visible { border-color: var(--azul); outline: none; }

/* Confirmação de estoque (AZUL — verde fica reservado só pros botões de ação) */
.veiculo__ok {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #EAF3FE;
  color: var(--azul);
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
}
.veiculo__ok[hidden] { display: none; }

/* Destaque quando o cliente tenta comprar sem preencher (AZUL, nada de vermelho) */
.precisa-atencao { animation: tremor .3s; }
.precisa-atencao .select,
.precisa-atencao .cor__amostras { box-shadow: 0 0 0 3px rgba(1, 117, 239, .25); border-radius: 10px; }
.precisa-atencao .bloco-eyebrow { color: var(--azul); }
@keyframes tremor {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ----- Seletor de cor (quadradinhos) ----- */
.cor { margin-bottom: 22px; }
.cor__amostras { display: flex; gap: 10px; }
.cor__amostra {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--cinza-borda);
  border-radius: 8px;          /* cantos suaves, não redondo */
  cursor: pointer;
  position: relative;
}
.cor__amostra.is-active { border-color: var(--azul); box-shadow: 0 0 0 2px #fff inset; }
.cor__nome { margin: 10px 0 0; color: var(--tinta); font-size: 13px; font-weight: 600; }

/* ----- Bloco de preço ----- */
.preco { margin-bottom: 18px; }
.preco__de {
  display: inline-block;
  color: #8A97A8;
  font-size: 14px;
  text-decoration: line-through;   /* riscado */
  margin-bottom: 4px;
}
.preco__pix {
  display: flex;
  align-items: center;
  gap: 8px;
}
.preco__pix svg { flex-shrink: 0; }
.preco__pix-valor {
  color: var(--tinta);             /* preço grande em ESCURO */
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.preco__pix-tag {
  color: #16A34A;                  /* só o selo "no pix" em verde pequeno */
  font-size: 13px;
  font-weight: 600;
}
.preco__parcela {
  margin: 6px 0 0;
  color: #5a6b7e;
  font-size: 13px;
}

/* ----- Bloco FRETE GRÁTIS (estilo Correios) ----- */
.frete-gratis {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);   /* leve borda */
  border-radius: 10px;                     /* cantos suaves */
}
.frete-gratis__logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
}
.frete-gratis__txt { min-width: 0; }
.frete-gratis__l1 {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--tinta);
}
.frete-gratis__free { color: #16A34A; font-weight: 700; }   /* "Frete Grátis" verde forte */
.frete-gratis__local { color: var(--tinta); font-weight: 700; }
.frete-gratis__l2 {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: #8A97A8;                          /* prazo em cinza */
}

/* ----- Botão principal "QUERO O MEU" (VERDE) ----- */
.quero {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  background: #15A152;             /* verde, não azul */
  color: var(--branco);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(22, 163, 74, .28);
  transition: background .15s ease, transform .1s ease;
}
.quero:hover { background: #12863D; }
.quero:active { transform: translateY(1px); }


/* =================================================================
   MODAL DE REVISÃO (antes do checkout)
   ================================================================= */
.revisao { position: fixed; inset: 0; z-index: 600; }
.revisao[hidden] { display: none; }

.revisao__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 44, 73, .5);
}

/* Mobile-first: painel sobe de baixo (bottom sheet) */
.revisao__painel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--branco);
  border-radius: 16px 16px 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(14, 44, 73, .2);
}

.revisao__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #F3F7FF;
  border: 0;
  border-radius: 10px;
  color: var(--tinta);
  cursor: pointer;
}
.revisao__titulo { margin: 4px 0 16px; color: var(--tinta); font-size: 19px; font-weight: 700; }

.revisao__resumo { margin: 0 0 18px; padding: 0; }
.revisao__linha {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cinza-borda);
}
.revisao__linha dt { color: #8A97A8; font-size: 13px; margin: 0; }
.revisao__linha dd { margin: 0; color: var(--tinta); font-size: 14px; font-weight: 600; text-align: right; }
/* Preço no modal: valor ESCURO grande + "no Pix" verde pequeno (sem parcelamento) */
.revisao__linha--preco { align-items: baseline; }
.revisao__linha--preco dd { display: flex; align-items: baseline; gap: 6px; }
.rev-preco__val { color: var(--tinta); font-size: 20px; font-weight: 800; }
.rev-preco__pix { color: #16A34A; font-size: 12px; font-weight: 600; }

/* Linha de confiança discreta acima do botão finalizar */
.revisao__trust {
  margin: 0 0 12px;
  color: #8A97A8;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

/* Seletor de textura (quadradinhos) */
.textura-seletor { display: flex; gap: 10px; margin-bottom: 18px; }
.textura-card {
  flex: 1;
  padding: 0;
  background: var(--branco);
  border: 2px solid var(--cinza-borda);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
}
.textura-card.is-active { border-color: var(--azul); }
.textura-card__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #EEF3FA;
  display: block;
}
.textura-card__nome { display: block; padding: 7px 4px; color: var(--tinta); font-size: 12px; font-weight: 600; }
.textura-card.is-active .textura-card__nome { color: var(--azul); }

.finalizar {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  background: #15A152;
  color: var(--branco);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}
.finalizar { background: #16A34A; }
.finalizar:hover:not([disabled]) { background: #12863D; }
.finalizar[disabled] { opacity: .5; cursor: not-allowed; }

.revisao__voltar {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: #5a6b7e;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}


/* =================================================================
   DESCRIÇÃO DO PRODUTO (texto -> imagem alternado + Ler mais + FAQ)
   ================================================================= */
.descricao {
  max-width: var(--container);
  margin-inline: auto;
  padding: 8px 16px 32px;
}

.descricao__bloco { margin-bottom: 22px; }

.descricao__titulo {
  margin: 0 0 10px;
  color: var(--azul);              /* títulos em azul */
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}
.descricao p {
  margin: 0 0 12px;
  color: var(--tinta);             /* corpo escuro legível */
  font-size: 15px;
  line-height: 1.7;                /* leitura confortável no mobile */
}
.descricao p:last-child { margin-bottom: 0; }

.descricao__lista {
  margin: 0;
  padding-left: 20px;
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.7;
}
.descricao__lista li { margin-bottom: 8px; }

/* Imagens largura total, cantos suaves, espaçamento generoso */
.descricao__img {
  width: 100%;
  height: auto;                    /* width/height no HTML reservam o aspect -> sem CLS */
  border-radius: 12px;
  margin: 8px 0 28px;
  background: #EEF3FA;             /* placeholder enquanto carrega */
}

/* ----- Conteúdo colapsável (Ler mais) ----- */
/* grid-template-rows 0fr -> 1fr: expande suave, sem fixar altura, sem pulo */
.descricao__mais {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s ease;
}
.descricao__mais-inner { overflow: hidden; }
.descricao.is-open .descricao__mais { grid-template-rows: 1fr; }

/* Botão + fade na borda do trecho cortado */
.descricao__toggle-wrap {
  position: relative;
  margin-top: 12px;
}
.descricao__toggle-wrap::before {        /* fade indicando que tem mais conteúdo */
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 88px;
  background: linear-gradient(to top, var(--branco), rgba(255, 255, 255, 0));
  pointer-events: none;
  transition: opacity .2s ease;
}
.descricao.is-open .descricao__toggle-wrap::before { opacity: 0; }  /* aberto: sem fade */

.descricao__toggle {
  width: 100%;
  padding: 13px 16px;
  background: var(--branco);
  color: var(--azul);
  border: 2px solid var(--cinza-borda);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.descricao__toggle:hover { background: #F3F8FF; border-color: var(--azul); }

/* ----- Seção de FAQ independente (antes do rodapé) ----- */
.faq-sec {
  max-width: var(--container);
  margin-inline: auto;
  padding: 12px 16px 36px;
}
.faq-sec__titulo {
  margin: 0 0 16px;
  text-align: center;
  color: var(--azul);              /* título azul (Poppins) */
  font-weight: 700;
  font-size: 22px;
}
/* nesta seção o FAQ vira um card arredondado com separadores sutis */
.faq-sec .faq {
  margin-top: 0;
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;             /* cantos suaves */
  padding: 0 14px;
}
.faq-sec .faq__item:first-child { border-top: 0; }
.faq-sec .faq__item:last-child { border-bottom: 0; }

/* ----- FAQ (acordeão) ----- */
.faq { margin-top: 4px; }
.faq__item { border-bottom: 1px solid var(--cinza-borda); }
.faq__item:first-child { border-top: 1px solid var(--cinza-borda); }
.faq__h { margin: 0; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 4px;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--tinta);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.faq__chevron {
  flex-shrink: 0;
  color: var(--azul);
  transition: transform .25s ease;
}
.faq__q[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }

/* Resposta: mesma técnica de grid pra animar suave */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq__a > .faq__a-inner { overflow: hidden; }
.faq__a.is-open { grid-template-rows: 1fr; }   /* classe posta pelo JS */
.faq__a-inner p {
  margin: 0;
  padding: 0 4px 16px;
  font-size: 14px;
  line-height: 1.65;
  color: #5a6b7e;
}


/* =================================================================
   ESTRELAS (componente reutilizável, suporta fração via width%)
   ================================================================= */
.stars {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1;
  color: #D8DEE9;                 /* estrela vazia (cinza claro) */
}
.stars::before { content: "★★★★★"; letter-spacing: 2px; }
.stars__fill {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  color: #F5A623;                 /* estrela cheia (dourado) */
}
.stars__fill::before { content: "★★★★★"; letter-spacing: 2px; }
.stars--lg { font-size: 26px; }


/* =================================================================
   AVALIAÇÕES (resumo + faixa de fotos + cards)
   ================================================================= */
.avaliacoes {
  max-width: var(--container);
  margin-inline: auto;
  padding: 8px 16px 36px;
}

/* ----- 1) Resumo ----- */
.aval-resumo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-bottom: 22px;
}
.aval-resumo__nota {
  font-size: 42px;
  font-weight: 800;
  color: var(--tinta);
  line-height: 1;
}
.aval-resumo__total { color: #8A97A8; font-size: 13px; }

/* ----- 2) Faixa de fotos ----- */
.aval-fotos {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 22px;
  scrollbar-width: none;
}
.aval-fotos::-webkit-scrollbar { display: none; }
.aval-fotos:empty { display: none; }       /* sem fotos -> some a faixa */
.aval-fotos__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #EEF3FA;
  cursor: zoom-in;
}
.aval-fotos__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- 3) Lista de cards ----- */
.aval-lista { display: flex; flex-direction: column; gap: 12px; }
.aval-card {
  padding: 14px;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;
}
.aval-card.is-hidden { display: none; }     /* escondido até "Ver mais" */

.aval-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.aval-card__nome { margin: 0; color: var(--tinta); font-size: 14px; font-weight: 700; }
.aval-card__cidade { margin: 2px 0 0; color: #8A97A8; font-size: 12px; }

/* Selo "Compra verificada" — discreto */
.aval-verificado {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8A97A8;
  font-size: 11px;
  font-weight: 600;
}
.aval-verificado svg { color: #15A152; }    /* só o check tem um toque de verde */

.aval-card .stars { margin-bottom: 8px; }
.aval-card__texto { margin: 0; color: var(--tinta); font-size: 14px; line-height: 1.6; }

.aval-card__foto {
  margin-top: 12px;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #EEF3FA;
  cursor: zoom-in;
}
.aval-card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lista: alvo do scroll ao paginar (desconta o header sticky) */
.aval-lista { scroll-margin-top: 72px; }

/* ----- Paginação ----- */
.aval-pag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}
.aval-pag__btn {
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--branco);
  color: var(--tinta);
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.aval-pag__btn:hover:not(:disabled):not(.is-active) { background: #F3F8FF; border-color: var(--azul); }
.aval-pag__btn.is-active {           /* página ativa em AZUL */
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}
.aval-pag__btn:disabled { opacity: .4; cursor: not-allowed; }
.aval-pag__ellipsis { min-width: 22px; text-align: center; color: #8A97A8; }


/* =================================================================
   "SIMPLES NO DIA A DIA" — benefícios (fundo azul SUAVE)
   ================================================================= */
.simples {
  background: #E6F1FB;              /* azul bem claro (não o forte) */
  padding: 30px 16px;
}
.simples__inner { max-width: var(--container); margin-inline: auto; }
.simples__titulo {
  margin: 0;
  text-align: center;
  color: var(--tinta);             /* escuro */
  font-size: 22px;
  font-weight: 700;
}
.simples__sub {
  margin: 6px 0 22px;
  text-align: center;
  color: #5a6b8a;                  /* cinza-azulado */
  font-size: 14px;
}

.simples__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;          /* mobile: empilhados */
  gap: 12px;
}
.benef {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: var(--branco);       /* card branco sobre o azul claro */
  border-radius: 12px;             /* cantos suaves */
}
.benef__ic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E6F1FB;             /* quadradinho azul claro */
  color: var(--azul);             /* ícone azul #0175EF */
  border-radius: 10px;
}
.benef__txt { min-width: 0; }
.benef__t { margin: 0 0 2px; color: var(--tinta); font-size: 15px; font-weight: 700; }
.benef__d { margin: 0; color: #5a6b7e; font-size: 13px; line-height: 1.45; }


/* =================================================================
   PROVA SOCIAL (faixa azul full-width)
   ================================================================= */
.prova {
  background: var(--azul);          /* azul sólido, sem gradiente */
  color: var(--branco);
  /* COMPACTA e SIMÉTRICA (a faixa agora fica entre vídeos e descrição,
     então não precisa de folga extra embaixo pro FAB). */
  padding: 18px 16px;
}
.prova__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* Número + label na MESMA linha, compacto */
.prova__destaque {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.prova__numero { font-size: 30px; font-weight: 800; line-height: 1; }   /* médio */
.prova__label { font-size: 13px; font-weight: 400; opacity: .92; }

/* Métricas em UMA linha (com separador "·") */
.prova__metricas {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.prova__metrica {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 300;                 /* leve */
}
.prova__metrica strong { font-weight: 600; }
.prova__metrica svg { flex-shrink: 0; }
.prova__metrica:not(:first-child)::before {
  content: "·";
  margin: 0 10px;
  opacity: .6;
}

/* Modo ROTATIVO (quando as 3 não cabem em 1 linha) — uma por vez, fade */
.prova__metricas.is-rotativo {
  position: relative;
  flex-wrap: nowrap;
  height: 1.5em;
}
.prova__metricas.is-rotativo .prova__metrica {
  position: absolute;
  left: 0; right: 0;
  justify-content: center;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.prova__metricas.is-rotativo .prova__metrica.is-active { opacity: 1; }
.prova__metricas.is-rotativo .prova__metrica::before { content: none; }   /* sem "·" no rotativo */


/* =================================================================
   VÍDEOS (3 em loop) + lightbox de vídeo
   ================================================================= */
.videos {
  max-width: var(--container);
  margin-inline: auto;
  padding: 18px 16px;
}
.videos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 colunas iguais */
  gap: 8px;
}
.video-card {
  position: relative;
  padding: 0;
  border: 0;
  background: #000;
  border-radius: 12px;                      /* cantos suaves */
  overflow: hidden;
  aspect-ratio: 9 / 16;                     /* proporção vertical */
  cursor: zoom-in;
}
.video-card__v { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card__ic {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  border-radius: 8px;
  pointer-events: none;                     /* só visual; o clique é do card */
}

/* Lightbox de vídeo: slide com <video> + botão de som */
.vlightbox .lightbox__slide video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
.vlb-som {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, .35);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
.vlb-som__on { display: none; }
.vlb-som[aria-pressed="true"] .vlb-som__off { display: none; }
.vlb-som[aria-pressed="true"] .vlb-som__on  { display: block; }


/* =================================================================
   LIGHTBOX (tela cheia)
   ================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(8, 18, 30, .94);   /* fundo escuro */
  display: flex;
  /* feedback do swipe-down (o JS mexe em --ty/--op) */
  transform: translateY(var(--ty, 0));
  opacity: var(--op, 1);
  transition: transform .2s ease, opacity .2s ease;
}
.lightbox[hidden] { display: none; }

.lightbox__track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lightbox__track::-webkit-scrollbar { display: none; }

.lightbox__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.lightbox__slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* na tela cheia mostra a foto inteira */
  display: block;
}

.lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, .35);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}


/* =================================================================
   FAB DE ATENDIMENTO + BALÃO (cresce a partir do botão)
   ================================================================= */

/* Wrapper fixo no canto inferior direito; ancora o card no botão */
.fab-wrap {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* card alinhado pela direita, sobre o botão */
  gap: 12px;
}

/* Botão circular azul */
.fab {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 6px 18px rgba(1, 117, 239, .35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.fab:hover { background: var(--azul-escuro); }
.fab:active { transform: scale(.96); }

/* Troca dos ícones: headset quando fechado, X quando aberto */
.fab__ic--close { display: none; }
.fab[aria-expanded="true"] .fab__ic--help  { display: none; }
.fab[aria-expanded="true"] .fab__ic--close { display: block; }

/* ----- Card/balão ----- */
.fab-card {
  position: relative;
  width: 260px;
  max-width: calc(100vw - 32px);  /* mobile-first: nunca passa da tela */
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(14, 44, 73, .18);
  padding: 16px 16px 14px;

  /* "Cresce saindo do botão": origem no canto inferior direito */
  transform-origin: bottom right;
  transform: scale(.2);
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.fab-card[hidden] { display: none; }
.fab-card.is-open {
  transform: scale(1);
  opacity: 1;
}

/* Rabinho/seta apontando pro FAB (base direita do card) */
.fab-card__tail {
  position: absolute;
  right: 22px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--branco);
  border-right: 1px solid var(--cinza-borda);
  border-bottom: 1px solid var(--cinza-borda);
  transform: rotate(45deg);
}

.fab-card__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--tinta);
  cursor: pointer;
  border-radius: 8px;
}
.fab-card__close:hover { background: #F3F7FF; }

.fab-card__title {
  margin: 0 0 2px;
  color: var(--azul);
  font-weight: 700;
  font-size: 15px;
}
.fab-card__text {
  margin: 0 0 12px;
  color: var(--tinta);
  font-size: 13px;
}

.fab-card__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  color: var(--azul);
  font-weight: 600;
  font-size: 14px;
  background: #F3F7FF;
  border-radius: 10px;
}
.fab-card__link:hover { background: #E8F1FE; }
.fab-card__ic { flex-shrink: 0; }

/* Reduced-motion: sem o "crescer" — só aparece/some */
@media (prefers-reduced-motion: reduce) {
  .fab-card { transform: none; transition: opacity .12s linear; }
  .fab-card.is-open { transform: none; }
}


/* =================================================================
   PLACEHOLDER (só pra demonstrar o scroll/sticky)
   ================================================================= */
.placeholder {
  min-height: 140vh;
  padding: 40px 16px;
  text-align: center;
}
.placeholder h1 { color: var(--azul); font-weight: 800; font-size: 32px; margin: 0 0 8px; }


/* =================================================================
   RODAPÉ (navy, full-width, centralizado)
   ================================================================= */
.rodape {
  background: var(--azul);           /* azul padrão da loja #0175EF */
  color: #fff;
  padding: 36px 16px 30px;
  text-align: center;
}
.rodape__inner { max-width: var(--container); margin-inline: auto; }

.rodape__marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rodape__marca img { height: 24px; width: auto; }
.rodape__nome { font-weight: 700; letter-spacing: .1em; font-size: 15px; }

.rodape__div {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);   /* divisória sutil */
  max-width: 200px;
  margin: 16px auto 22px;
}

.rodape__dados {
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rodape__dados > div {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.rodape__dados dt { display: inline; font-weight: 600; color: #fff; }
.rodape__dados dt::after { content: ":"; margin-right: 4px; }
.rodape__dados dd { display: inline; margin: 0; }
.rodape__dados a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.rodape__seg { margin: 0 0 6px; font-size: 12px; color: rgba(255, 255, 255, .8); }
.rodape__copy { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .5); }


/* =================================================================
   AJUSTES DE DESKTOP (mobile-first: só a partir de 768px)
   ================================================================= */
@media (min-width: 768px) {
  :root {
    --h-aviso: 38px;
    --h-header: 64px;
  }

  .header__logo img { height: 28px; }

  .marquee__item { font-size: 12px; padding-inline: 20px; }

  /* Galeria/produto não ficam gigantes no desktop: limita e centraliza */
  .galeria { max-width: 520px; padding-top: 16px; }
  .galeria__principal { border-radius: 14px; }
  .produto { max-width: 520px; }
  .produto__titulo { font-size: 26px; }
  .kit-seletor { grid-template-columns: 1fr 1fr; }   /* lado a lado no desktop */
  .descricao { max-width: 680px; }                   /* largura de leitura confortável */
  .descricao__titulo { font-size: 22px; }
  .avaliacoes { max-width: 680px; }
  .videos { max-width: 520px; }
  .prova__numero { font-size: 34px; }   /* leve aumento no desktop, ainda compacto */
  .simples__inner { max-width: 680px; }
  .simples__lista { display: grid; grid-template-columns: 1fr 1fr; }  /* 2 colunas */
  .faq-sec { max-width: 680px; }

  /* Modal vira card centralizado no desktop */
  .revisao__painel {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 440px;
    max-height: 88vh;
    border-radius: 16px;
  }

  /* O drawer continua funcionando no desktop; se quiser um menu
     horizontal aqui, dá pra esconder o hambúrguer e mostrar uma <nav>. */
}