/* ==========================================================================
   Embalimp Personalizados — identidade sobre o Bootstrap 5.3
   Design: Figma "Hotsite Personalizados" (UVuKQ9V2Q6i4KRgpBUVN5O)

   Carregue SEMPRE depois do bootstrap.min.css.
   Os tokens do design vivem no :root — mexa neles, não nos valores soltos.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Cores da marca */
  --azul: #00569d;
  --azul-escuro: #003a69;
  --azul-titulo: #094f89;
  --laranja: #ff9552;
  --laranja-tag: #f89b61;
  --laranja-faixa: #f38a48;

  /* Neutros */
  --texto: #414042;
  --texto-suave: #3f3f3f;
  --placeholder: #b4b4b4;
  --branco: #fff;
  --cinza-card: #f8f8f8;
  --cinza-painel: #e4e4e4;
  --cinza-rodape: #ededed;
  --borda: #d9d9d9;
  --creme: #fbf7f1;
  --natural: #ccba9f;

  /* Tipografia */
  --fonte-titulo: "DM Serif Display", "DM Serif Text", Georgia, "Times New Roman", serif;
  --fonte-secao: "DM Serif Text", "DM Serif Display", Georgia, "Times New Roman", serif;
  --fonte-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala tipográfica fluida (mobile -> 1920) */
  --t-hero: clamp(2rem, 1.15rem + 3.5vw, 3.5rem);
  --t-secao: clamp(1.875rem, 1.1rem + 3.2vw, 3.5rem);
  --t-secao-centro: clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem);
  --t-card: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --t-produto: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-olho: clamp(1rem, 0.93rem + 0.3vw, 1.25rem);
  --t-corpo: clamp(1rem, 0.96rem + 0.17vw, 1.125rem);

  /* Layout */
  --largura-conteudo: 1360px;
  --largura-estreita: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --raio: 16px;
  --raio-btn: 8px;
  --header-h: 72px;

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 1024px) {
  :root { --header-h: 96px; }
}

/* ----------------------------------------------------------------- 2. Base */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  background: var(--branco);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--laranja);
  color: var(--azul);
  font-weight: 600;
  border-radius: 0 0 var(--raio-btn) 0;
}
.pular-para-conteudo:focus { left: 0; }

/* --------------------------------------------- 3. Container do Bootstrap
   A largura inclui o respiro lateral: em 1920px o conteúdo começa em
   x=280px, exatamente como no Figma. */
.container {
  width: 100%;
  max-width: calc(var(--largura-conteudo) + var(--gutter) * 2);
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.container.container--estreito {
  max-width: calc(var(--largura-estreita) + var(--gutter) * 2);
}

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

.olho {
  display: block;
  font-size: var(--t-olho);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--laranja);
  margin-block-end: 0.5rem;
}

.titulo-secao {
  font-family: var(--fonte-secao);
  font-weight: 400;
  font-size: var(--t-secao);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.titulo-centro {
  font-family: var(--fonte-secao);
  font-weight: 400;
  font-size: var(--t-secao-centro);
  line-height: 1.25;
  color: var(--azul);
  text-align: center;
  text-wrap: balance;
}

/* --------------------------------------------------------------- 4. Botões
   .btn é do Bootstrap; .btn-personalizado troca a pele pela da Embalimp. */
.btn-personalizado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.5rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--raio-btn);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  font-weight: 500;
  line-height: 1.2;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-personalizado:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / 0.18); }
.btn-personalizado:active { transform: translateY(0); box-shadow: none; }

.btn-azul { background: var(--azul); color: var(--branco); }
.btn-azul:hover { background: #046ac0; color: var(--branco); }

.btn-laranja { background: var(--laranja); color: var(--azul); }
.btn-laranja:hover { background: #ffa871; color: var(--azul); }

.btn-branco { background: var(--branco); color: var(--azul); border-color: var(--branco); }
.btn-branco:hover { background: #eef5fb; color: var(--azul); }

.btn-mini { min-height: 40px; padding-inline: 1rem; font-size: 1rem; }

/* --------------------------------------------------------------- 5. Header */
.cabecalho {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: var(--azul);
  block-size: var(--header-h);
  transition: box-shadow 0.3s var(--ease);
}
.cabecalho.rolou { box-shadow: 0 6px 24px rgb(0 0 0 / 0.22); }

.cabecalho__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  block-size: 100%;
}

.cabecalho__marca {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.cabecalho__logo { inline-size: clamp(116px, 9vw, 173px); }

.cabecalho__tag {
  font-family: var(--fonte-titulo);
  font-size: clamp(0.9rem, 0.6rem + 0.9vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--laranja-tag);
  white-space: nowrap;
}

.cabecalho__cta { margin-inline-start: auto; }
.cabecalho__cta .rotulo-longo { display: none; }

@media (min-width: 640px) {
  .cabecalho__cta .rotulo-curto { display: none; }
  .cabecalho__cta .rotulo-longo { display: inline; }
}

/* --------------------------------- 6. Banner (carrossel do Bootstrap) */
.hero {
  position: relative;
  margin-block-start: var(--header-h);
  min-block-size: clamp(460px, 62vw, 690px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--azul-escuro);
  isolation: isolate;
}

.hero .carousel-inner { position: absolute; inset: 0; z-index: -2; }

.hero .carousel-item {
  position: absolute;
  inset: 0;
  float: none;
  margin: 0;
  inline-size: 100%;
}

.hero .carousel-item picture { display: contents; }

.hero .carousel-item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transition: transform 9s linear;
}
.hero .carousel-item.active img { transform: scale(1); }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.38) 45%, rgb(0 0 0 / 0.58) 100%);
}

@media (min-width: 768px) {
  .hero::before {
    background: linear-gradient(90deg, rgb(20 20 20 / 0.9) 0%, rgb(35 35 35 / 0.78) 26%,
                rgb(40 40 40 / 0.5) 40%, rgb(0 0 0 / 0.12) 56%, rgb(0 0 0 / 0) 68%);
  }
}

.hero__conteudo {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  color: var(--branco);
}

.hero__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.21;
  max-inline-size: 27rem;
  text-wrap: balance;
}

.hero__texto {
  margin-block: 1.5rem 2rem;
  line-height: 1.45;
  max-inline-size: 27rem;
}

/* Indicadores: bolinhas no lugar das barras do Bootstrap */
.hero__navegacao {
  inset-block-end: clamp(1rem, 3vw, 3.5rem);
  margin: 0;
  gap: 0.75rem;
  z-index: 2;
}

@media (min-width: 768px) {
  .hero__navegacao {
    justify-content: flex-end;
    padding-inline-end: clamp(2rem, 13vw, 15.5rem);
  }
}

.hero__ponto {
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.45);
  opacity: 1;
  text-indent: 0;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero__ponto:hover { transform: scale(1.15); }
.hero__ponto.active { background: var(--laranja); opacity: 1; }

/* ------------------------------------------- 7. Slider de logotipos */
.marcas {
  background: var(--laranja-faixa);
  padding-block: clamp(1.25rem, 3vw, 2rem);
}

.marcas__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.marcas__rotulo {
  flex-shrink: 0;
  font-size: 0.9375rem;
  color: var(--branco);
  max-inline-size: 9rem;
  line-height: 1.3;
}

.marcas__viewport {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marcas__trilha {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  inline-size: max-content;
  animation: desliza-marcas 32s linear infinite;
}
.marcas:hover .marcas__trilha,
.marcas:focus-within .marcas__trilha { animation-play-state: paused; }

.marcas__trilha img {
  block-size: clamp(28px, 3vw, 40px);
  inline-size: auto;
}

@keyframes desliza-marcas {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------- 8. Personalizar */
.personalizar {
  background: var(--azul);
  color: var(--branco);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.personalizar__texto {
  margin-block: 1.5rem 2rem;
  max-inline-size: 36rem;
  line-height: 1.45;
}

.beneficios {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
  margin: 0;
  list-style: none;
}

.beneficio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.beneficio__icone { inline-size: clamp(64px, 6vw, 96px); }
.beneficio__titulo { font-size: var(--t-corpo); font-weight: 600; line-height: 1.33; }
.beneficio__descricao { line-height: 1.33; margin-block-start: 0.25rem; }

/* ----------------------------------------------------------- 9. Categorias */
.categorias {
  position: relative;
  background: var(--laranja);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  overflow: hidden;
}

/* Laranja chapado, sem padrão por cima. O doodle saiu daqui a pedido: em
   multiply sobre laranja ele cavava manchas escuras que derrubavam o
   contraste do título. Com o fundo liso, o azul padrão fica em 3,43:1 —
   passa no mínimo de 3:1 para texto grande, sem precisar de exceção. */

.categorias__grade { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }

.categoria {
  display: block;
  block-size: 100%;
  background: var(--branco);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.06);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.categoria__midia {
  display: block;
  overflow: hidden;
  aspect-ratio: 469 / 236;
}

.categoria__midia img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.categoria__nome {
  display: block;
  font-family: var(--fonte-secao);
  font-weight: 400;
  font-size: var(--t-card);
  color: var(--azul);
  text-align: center;
  padding: clamp(0.875rem, 2vw, 1.25rem) 1rem clamp(1rem, 2.2vw, 1.5rem);
}

/* ------------------------------------------------------------ 10. Produtos */
.produtos {
  background: var(--azul-escuro);
  color: var(--branco);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.produtos__olho {
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
  margin-block-end: 2.5rem;
}

.familia + .familia { margin-block-start: clamp(3rem, 6vw, 4.5rem); }

.familia__titulo {
  font-family: var(--fonte-secao);
  font-weight: 400;
  font-size: var(--t-secao-centro);
  color: var(--laranja);
  text-align: center;
}

.familia__descricao {
  max-inline-size: 46rem;
  margin: 0.75rem auto 0;
  text-align: center;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.9);
}

.familia__cards {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}

.familia__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-block-start: clamp(1.5rem, 3vw, 2rem);
}

.produto {
  display: grid;
  background: var(--cinza-card);
  border-radius: var(--raio);
  overflow: hidden;
  color: var(--texto);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.16);
}

/* Duas colunas só a partir de 1000px. Entre 860 e 1000 a coluna da foto
   ficava estreita e a de texto alta, empurrando a área cinza para 0,72:1
   — o pior recorte de toda a página. Empilhado, essa faixa fica em 6:5,
   e o recorte da foto passa a ser simétrico nos dois eixos. */
@media (min-width: 1000px) {
  .produto { grid-template-columns: minmax(0, 591fr) minmax(0, 607fr); }
}

/* A foto ocupa a área cinza inteira, sangrando até a borda do card.

   O espaçador ::before define a proporção da caixa como PISO, não como
   valor fixo. A diferença importa: com `aspect-ratio` a caixa trava e,
   quando a coluna de texto ao lado é mais alta, sobra fundo do card
   embaixo da foto (medido: até 190px). Com o espaçador, a caixa nunca
   fica mais baixa que a proporção e cresce junto com o texto.

   Sem isso a área cinza variava de 0,71:1 a 2,69:1 entre produtos e
   larguras de tela — recorte impossível de prever ao fotografar.
   Agora: 1:1 nas duas colunas, 6:5 quando empilha. */
.produto__galeria {
  position: relative;
  background: var(--cinza-painel);
  overflow: hidden;
}

.produto__galeria::before {
  content: '';
  display: block;
  padding-block-start: 83.333%;   /* 6:5 — layout empilhado */
}

@media (min-width: 1000px) {
  .produto__galeria::before { padding-block-start: 100%; }   /* 1:1 — duas colunas */
}

.produto__figura {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.produto__figura.ativo { opacity: 1; }

.produto__figura img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease);
}
.produto:hover .produto__figura.ativo img { transform: scale(1.04); }

.produto__pontos {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1.25rem;
  display: flex;
  gap: 0.8rem;
}

/* Os pontinhos agora ficam por cima da foto, não do cinza liso: branco
   translúcido com sombra funciona tanto sobre embalagem clara quanto
   sobre fundo escuro. Cinza sobre foto simplesmente sumia. */
.produto__ponto {
  inline-size: 16px;
  block-size: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.65);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.produto__ponto:hover { transform: scale(1.15); }
.produto__ponto[aria-current="true"] { background: var(--laranja); }

.produto__info { padding: clamp(1.5rem, 3vw, 2.25rem); }

.produto__nome {
  font-size: var(--t-produto);
  font-weight: 600;
  color: var(--azul-escuro);
  line-height: 1.2;
}

.produto__chamada {
  font-weight: 500;
  margin-block-start: 0.6rem;
  color: var(--texto);
}

.produto__rotulo {
  display: block;
  font-weight: 600;
  font-size: var(--t-corpo);
  color: var(--azul-escuro);
  margin-block: 1.25rem 0.5rem;
}

.produto__lista {
  display: grid;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.produto__lista li {
  position: relative;
  padding-inline-start: 1.25rem;
  font-size: 1rem;
  line-height: 1.375;
  color: var(--texto-suave);
}
.produto__lista li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: 0.25rem;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--laranja);
}

.cores { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.cor {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--texto);
}
.cor--natural { background: var(--natural); }
.cor--branco { background: var(--branco); border: 1px solid var(--texto); }

/* ------------------------------------------------------------- 11. Escolha */
.escolha {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  /* Base azul garantida: se a foto não carregar, a seção segue legível. */
  background: var(--azul);
  color: var(--branco);
  isolation: isolate;
  overflow: hidden;
}

.escolha::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

.escolha.com-fundo::before {
  background: url("../img/fabrica.webp") center / cover no-repeat;
}

.escolha::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--azul);
  mix-blend-mode: multiply;
}

.escolha__cabecalho { text-align: center; max-inline-size: 46rem; margin-inline: auto; }

.escolha__grade { margin-block-start: clamp(2rem, 4vw, 3rem); }

/* O palco dá profundidade para o giro do card acontecer em 3D */
.pilar-palco {
  perspective: 1400px;
  block-size: 100%;
}

.pilar {
  block-size: 100%;
  background: var(--branco);
  color: var(--texto);
  border-radius: var(--raio);
  padding: clamp(1.25rem, 2.5vw, 1.5rem);
  transform-origin: center center;
  backface-visibility: hidden;
}

.pilar__selo {
  position: relative;
  inline-size: 74px;
  block-size: 74px;
  display: grid;
  place-items: center;
}
.pilar__selo img.fundo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.pilar__selo img.icone { position: relative; inline-size: 34px; block-size: auto; }

.pilar__titulo {
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.33;
  margin-block: 1rem 0.75rem;
}

.pilar__texto { font-size: 1rem; line-height: 1.375; color: var(--texto); }

/* ------------------------------------------------------------- 12. Cotação */
.cotacao { padding-block: clamp(3rem, 6vw, 4.5rem); }

.cotacao__caixa {
  background: var(--laranja);
  border-radius: 24px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.cotacao__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--t-secao);
  line-height: 1.21;
  color: var(--azul);
  text-wrap: balance;
}

.cotacao__texto { margin-block-start: 1.5rem; line-height: 1.45; color: var(--texto); }
.cotacao__texto p + p { margin-block-start: 1rem; }

/* Campos: o Bootstrap dá a estrutura, aqui entra a pele do Figma */
.formulario .form-label {
  font-size: 1rem;
  line-height: 1.375;
  color: var(--texto-suave);
  margin-block-end: 0.375rem;
}

.formulario .form-control,
.formulario .form-select,
.newsletter__form .form-control {
  min-block-size: 40px;
  padding: 0.5rem 0.75rem;
  background-color: var(--branco);
  border: 1px solid transparent;
  border-radius: var(--raio-btn);
  font-size: 1rem;
  color: var(--texto);
}

.formulario textarea.form-control { min-block-size: 160px; line-height: 1.45; }

.formulario .form-control::placeholder,
.newsletter__form .form-control::placeholder { color: var(--placeholder); }

.formulario .form-select { color: var(--texto); }
.formulario .form-select:invalid { color: var(--placeholder); }

.formulario .form-select {
  background-image: url("../img/icones/seta-baixo.svg");
  background-position: right 0.5rem center;
  background-size: 24px 24px;
  padding-inline-end: 2.25rem;
}

.formulario .form-control:focus,
.formulario .form-select:focus,
.newsletter__form .form-control:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgb(0 86 157 / 0.25);
}

.consentimento {
  margin-block-start: 1.25rem;
  padding-inline-start: 1.6rem;
}

.consentimento .form-check-input {
  inline-size: 16px;
  block-size: 16px;
  margin-inline-start: -1.6rem;
  margin-block-start: 0.2rem;
  border: 1px solid var(--borda);
  border-radius: 2px;
}
.consentimento .form-check-input:checked { background-color: var(--azul); border-color: var(--azul); }

.consentimento .form-check-label {
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--texto);
}

.formulario__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-start: 1.25rem;
}
.formulario__acoes .btn { flex: 1 1 180px; font-size: 1rem; }

.formulario__status {
  min-block-size: 1.25rem;
  margin-block-start: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--azul);
}
.formulario__status[data-estado="erro"] { color: #7d1414; }

/* ----------------------------------------------------------------- 13. FAQ */
.faq { padding-block: clamp(2.5rem, 5vw, 4rem); }
.faq .titulo-centro { color: var(--azul-titulo); }

.faq__lista {
  display: grid;
  gap: 1rem;
  margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
  --bs-accordion-border-width: 0;
  --bs-accordion-bg: transparent;
}

.faq__item {
  background: var(--azul);
  border: 0;
  border-radius: var(--raio);
  overflow: hidden;
}
.faq__item:first-of-type,
.faq__item:last-of-type { border-radius: var(--raio); }

.faq__botao.accordion-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-block-size: 72px;
  padding: 1rem clamp(1rem, 2.5vw, 3.5rem);
  background: transparent;
  border: 0;
  border-radius: var(--raio);
  box-shadow: none;
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.33;
  color: var(--branco);
}
.faq__botao.accordion-button:not(.collapsed) { background: transparent; color: var(--branco); box-shadow: none; }
.faq__botao.accordion-button::after { display: none; }
.faq__botao.accordion-button:focus { box-shadow: none; }

.faq__botao span { flex: 1; }

/* O "+" gira 135° e vira um "×" quando a resposta abre */
.faq__icone {
  flex-shrink: 0;
  inline-size: 32px;
  block-size: 32px;
  transition: transform 0.35s var(--ease);
}
.faq__botao.accordion-button:not(.collapsed) .faq__icone { transform: rotate(135deg); }

.faq__resposta .accordion-body {
  padding: 0 clamp(1rem, 2.5vw, 3.5rem) 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.92);
}

/* ---------------------------------------------------------- 14. Newsletter */
.newsletter {
  background: var(--azul);
  color: var(--branco);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.newsletter__titulo {
  font-family: var(--fonte-secao);
  font-weight: 400;
  font-size: var(--t-secao-centro);
  line-height: 1.25;
  color: var(--laranja);
  max-inline-size: 34rem;
  margin-inline: auto;
  text-wrap: balance;
}

.newsletter__texto {
  max-inline-size: 44rem;
  margin: 1rem auto 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.92);
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-block-start: 1.75rem;
}

.newsletter__form .form-control {
  flex: 1 1 320px;
  max-inline-size: 348px;
  min-block-size: 48px;
  padding-inline: 1.25rem;
}

.newsletter__consentimento {
  display: inline-block;
  max-inline-size: 36rem;
  margin-inline: auto;
  text-align: start;
}
.newsletter__consentimento .form-check-label { color: var(--branco); }

.newsletter .formulario__status { color: var(--branco); }
.newsletter .formulario__status[data-estado="erro"] { color: #ffd9d9; }

/* -------------------------------------------------------------- 15. Rodapé */
.rodape {
  background: var(--cinza-rodape);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  /* Folga embaixo no mobile: o botão flutuante não pode cobrir o crédito. */
  padding-block-end: clamp(5.5rem, 3vw, 2.5rem);
}

@media (min-width: 640px) {
  .rodape { padding-block-end: clamp(1.75rem, 3vw, 2.5rem); }
}

.rodape__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.rodape__logo { inline-size: 218px; }

.rodape__contatos { display: grid; gap: 0.5rem; margin-block-start: 1rem; }

.rodape__contato {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--texto);
  transition: color 0.2s var(--ease);
}
.rodape__contato:hover { color: var(--azul); }
.rodape__contato img { inline-size: 20px; block-size: 20px; }

.rodape__sociais { display: flex; gap: 1.125rem; }

.rodape__sociais a {
  display: block;
  inline-size: 38px;
  block-size: 38px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.rodape__sociais a:hover { transform: translateY(-3px); opacity: 0.82; }

.rodape__creditos {
  flex-basis: 100%;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid rgb(65 64 66 / 0.15);
  font-size: 0.8125rem;
  color: rgb(65 64 66 / 0.75);
}

/* ---------------------------------------------------- 16. Botão flutuante */
.whats-flutuante {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.whats-flutuante.visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.whats-flutuante:hover { transform: translateY(-3px) scale(1.05); }
.whats-flutuante svg { inline-size: 30px; block-size: 30px; fill: #fff; }

/* =========================================================== 17. ANIMAÇÕES
   Cada elemento com .anima começa escondido e entra quando aparece na tela.
   O tipo vem de data-anima e o escalonamento de data-atraso (ver main.js).
   ========================================================================= */
/* Entrada por keyframes, não por transition: assim a animação de chegada
   e o transform do hover não brigam pelo mesmo canal. O fill "backwards"
   segura o estado inicial durante o atraso e, ao terminar, devolve o
   elemento ao estilo normal — deixando o hover livre. */
.anima:not(.visivel) { opacity: 0; }

.anima.visivel {
  animation-duration: 0.7s;
  animation-timing-function: var(--ease);
  animation-fill-mode: backwards;
  animation-delay: var(--atraso, 0ms);
}

/* texto e blocos: sobem */
@keyframes entra-subir { from { opacity: 0; transform: translateY(28px); } }
.anima[data-anima="subir"].visivel { animation-name: entra-subir; }

/* texto secundário: entra pelo lado */
@keyframes entra-lado { from { opacity: 0; transform: translateX(-26px); } }
.anima[data-anima="lado"].visivel { animation-name: entra-lado; }

/* ícones: brotam girando, com uma pontinha de elástico no fim */
@keyframes entra-girar { from { opacity: 0; transform: scale(0.5) rotate(-16deg); } }
.anima[data-anima="girar"].visivel {
  animation-name: entra-girar;
  animation-duration: 0.75s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* cards do "por que escolher": giram em 3D, um depois do outro.
   A perspectiva vai dentro do próprio transform — não depende do pai. */
@keyframes entra-flip { from { opacity: 0; transform: perspective(1400px) rotateY(-92deg); } }
.anima[data-anima="flip"].visivel {
  animation-name: entra-flip;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.2, 0.75, 0.28, 1);
}

/* Hovers: canal próprio, sem disputa com a animação de entrada */
.categoria:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgb(0 0 0 / 0.14); }
.categoria:hover .categoria__midia img { transform: scale(1.07); }

.produto { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.produto:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(0 0 0 / 0.26); }

.pilar { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.pilar:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgb(0 0 0 / 0.28); }

/* ------------------------------- 18. Preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .anima:not(.visivel) { opacity: 1; }
  .anima.visivel { animation: none; }
  .hero .carousel-item img { transform: none; }
  .marcas__trilha { animation: none; }
}