/* ============================================================
   TEMPLATE LP TRÍADE — performance + estilo shadcn/ui
   Tokens do shadcn v4 (base neutral) traduzidos para CSS puro.
   Sem framework, sem Tailwind, sem CDN.
   Personalizar por cliente: trocar as variáveis abaixo.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  src: url('assets/montserrat-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Montserrat';
  src: url('assets/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB;
}

:root {
  /* --- cores (shadcn base neutral) --- */
  --background: #ffffff;
  --foreground: #0a0a0a;
  --muted-foreground: #737373;   /* texto de apoio */
  --border: #e5e5e5;             /* borda de 1px, discreta */
  --muted: #f7f7f7;              /* fundo das dobras alternadas */
  --primary: #ba0000;            /* vermelho X1 (brandbook) */
  --primary-foreground: #ffffff;
  --accent: #f5f5f5;             /* fundo sutil de hover */
  --whats: #25d366;

  /* --- raio: discreto. Knob único; 0 deixa tudo reto --- */
  --radius: 4px;
  --radius-md: var(--radius);                 /* botões, inputs */
  --radius-xl: calc(var(--radius) + 2px);     /* cards */

  --max: 1200px;
  --pad: 96px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* tipografia shadcn: peso alto + tracking negativo, sem caixa alta */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
h1 { font-size: clamp(36px, 5vw, 60px); }
h2 { font-size: clamp(28px, 3.2vw, 40px); }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; width: 100%; }
.center { text-align: center; }
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head p { color: var(--muted-foreground); margin-top: 12px; font-size: 17px; }

/* --- BOTÕES --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 34px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { background: #9c0000; }
.btn-lg { height: 60px; padding: 0 44px; font-size: 18px; }
.btn-block { width: 100%; }
.btn-whats { background: var(--whats); color: #fff; }

/* Pulso dos CTAs principais: o botão cresce e volta lentamente.
   É transform, então não desloca nada em volta. */
.btn-lg { animation: pulso 3.4s ease-in-out infinite; }
@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-lg { animation: none; }
}

/* --- HERO — banner ocupa a primeira dobra inteira --- */
/* svh evita o pulo causado pela barra de endereço no mobile */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--foreground); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* escurece a metade esquerda (onde vive o texto) e libera a direita
   para a informação que o designer colocar na foto do banner */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.62) 38%,
    rgba(0,0,0,0.18) 60%,
    rgba(0,0,0,0) 78%);
}
/* só vertical: o shorthand zerava o padding lateral herdado de .container */
.hero-content { position: relative; z-index: 1; color: #fff; padding-top: 64px; padding-bottom: 64px; }
/* o container é centralizado, então 50% dele termina exatamente no meio da tela */
.hero-copy { max-width: 50%; }
.hero-content p { margin: 20px 0 36px; font-size: 19px; color: rgba(255,255,255,0.85); }

/* --- BLOCOS: cada seção ocupa uma dobra inteira, conteúdo centralizado --- */
.block {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--pad) 0;
  background: var(--background);
}
.block > .container { width: 100%; }
/* alterna branco / cinza claro pra marcar a divisão entre as dobras */
.block-muted { background: var(--muted); }

/* --- GRIDS --- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* --- PRODUTO: sem caixa. Só imagem e, abaixo, o texto --- */
.produto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-xl);
  margin-bottom: 14px;
}
.produto h3 { margin-bottom: 6px; }
.produto p { color: var(--muted-foreground); font-size: 14px; }

/* --- DEPOIMENTO: aspas, texto em itálico e autor com foto --- */
.depoimentos { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.card .aspas {
  display: block;
  font-size: 44px;
  line-height: 0.7;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
}
.card p { font-style: italic; color: var(--muted-foreground); font-size: 15px; }
.autor { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.autor img { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.autor strong { display: block; font-size: 14px; font-weight: 600; color: var(--foreground); }
.autor span { font-size: 13px; color: var(--muted-foreground); }

/* todas as dobras terminam com o mesmo CTA */
.grid + .center, .faq + .center { margin-top: 48px; }
.sobre-copy .btn { margin-top: 32px; align-self: flex-start; }

/* --- SOBRE: foto sangra 40% da tela à esquerda, texto nos 60% à direita --- */
.sobre {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--background);
}
.sobre-media img { width: 100%; height: 100%; object-fit: cover; }
.sobre-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad) clamp(32px, 6vw, 96px);
}
.sobre-copy p { color: var(--muted-foreground); margin-top: 16px; max-width: 560px; }

/* --- FAQ (shadcn accordion) --- */
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 20px; color: var(--muted-foreground); }
.faq details[open] summary::after { content: '−'; }
.faq p { padding-bottom: 20px; color: var(--muted-foreground); font-size: 15px; }

/* --- POP-UP (shadcn dialog) --- */
.modal { position: fixed; inset: 0; z-index: 50; }
.modal[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
/* altura fixa: o painel não pula de tamanho ao trocar de pergunta */
.modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100% - 32px));
  height: 460px;
  margin: 8vh auto;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.modal-panel form { display: flex; flex-direction: column; flex: 1; }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  border: 0; background: none; font-size: 20px; line-height: 1;
  color: var(--muted-foreground); cursor: pointer;
}
.modal-panel h3 { font-size: 19px; margin-bottom: 4px; }
.modal-sub { color: var(--muted-foreground); font-size: 14px; margin-bottom: 24px; }
/* barrinha de progresso do formulário: mesma linguagem do indicador lateral */
.etapas { display: flex; gap: 6px; margin-bottom: 20px; }
.etapas[hidden] { display: none; }
.etapas span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  transition: width 0.2s ease, background 0.2s ease;
}
.etapas span.is-active { width: 30px; background: var(--primary); }

.modal-panel form[hidden] { display: none; }

/* etapa ocupa a altura toda do painel: o pop-up não muda de tamanho
   entre uma pergunta e outra */
.etapa, .final { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.etapa[hidden], .final[hidden] { display: none; }
.etapa h3, .final h3 { font-size: 19px; }
.etapa input + button { margin-top: 4px; }

/* opções do quiz: clicar seleciona e avança */
.opcoes { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.opcao {
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.opcao:hover { border-color: var(--primary); background: var(--accent); }

.voltar {
  margin-top: auto;
  align-self: flex-start;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 4px;
}
.final { justify-content: center; text-align: center; }
.final .btn { margin-top: 12px; }
.modal-panel input {
  font-family: inherit;
  font-size: 14px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  width: 100%;
}
.modal-panel input::placeholder { color: var(--muted-foreground); }
.modal-panel input:focus { outline: 2px solid var(--foreground); outline-offset: -1px; }

/* --- INDICADOR DE DOBRAS (lateral, vertical) --- */
.dots {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dots a {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d4d4d4;
  transition: height 0.2s ease, background 0.2s ease;
}
.dots a.is-active { height: 28px; background: var(--foreground); }
/* sobre o banner do hero os pontos invertem pra continuar visíveis */
.dots.on-dark a { background: rgba(255, 255, 255, 0.45); }
.dots.on-dark a.is-active { background: #fff; }

/* --- RODAPÉ --- */
.rodape { background: var(--background); padding: 64px 0 0; }
.rodape p { font-size: 14px; color: var(--muted-foreground); margin-bottom: 6px; }
.rodape a { color: var(--muted-foreground); text-decoration: none; }
.rodape a:hover { color: var(--foreground); }
.logo { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 16px; }
.rodape-label { font-size: 13px; font-weight: 600; color: var(--foreground) !important; margin-bottom: 14px; }
.copyright { border-top: 1px solid var(--border); margin-top: 56px; padding: 24px; text-align: center; font-size: 13px; color: var(--muted-foreground); }

/* Desktop de tela baixa (notebook): aperta pros 6 cards caberem na dobra */
@media (min-width: 861px) and (max-height: 1100px) {
  :root { --pad: 64px; }
  .section-head { margin-bottom: 32px; }
  /* desconta o que o resto da dobra ocupa (título, texto, CTA e respiro):
     em tela alta o 4:5 sai cheio; em notebook baixo a foto é aparada pra caber */
  .produto img { max-height: calc(100vh - 400px); }
  .grid + .center, .faq + .center { margin-top: 32px; }
}

/* ============================================================
   MOBILE — cada dobra continua ocupando uma tela.
   Para isso o conteúdo é compactado, não a altura da dobra.
   ============================================================ */
@media (max-width: 860px) {
  :root { --pad: 48px; }
  /* FORMATO MOBILE: composição fixa de 448px; tela maior ganha margem, não outro layout */
  .container, .sobre-copy { max-width: 448px; margin-left: auto; margin-right: auto; }
  .sobre-copy { box-sizing: border-box; width: 100%; }

  h1 { font-size: clamp(30px, 8vw, 40px); }
  h2 { font-size: 26px; }
  .section-head { margin-bottom: 28px; }
  .section-head p { font-size: 15px; margin-top: 8px; }

  /* HERO no mobile: banner inteiro em cima (sem corte) e texto embaixo,
     mesmo padrão da dobra Sobre. */
  .hero {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: start;
    background: var(--background);
  }
  .hero-bg { position: static; }
  .hero-bg img { height: auto; object-fit: contain; }
  .hero::after { display: none; }        /* sem foto atrás do texto, sem véu escuro */
  .hero-content {
    align-self: center;
    color: var(--foreground);
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .hero-copy { max-width: 100%; }        /* empilhado: texto ocupa a largura toda */
  .hero-content p { font-size: 17px; margin: 16px 0 28px; color: var(--muted-foreground); }

  /* o hero deixa de ser escuro: os marcadores voltam à cor normal */
  .dots.on-dark a { background: #d4d4d4; }
  .dots.on-dark a.is-active { background: var(--foreground); }

  /* Produtos no mobile: carrossel que desliza na horizontal.
     Mantém o card (imagem em cima, texto embaixo) e cabe em uma dobra. */
  .grid { gap: 12px; }
  .grid-3 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .grid-3::-webkit-scrollbar { display: none; }
  .grid-3 > .produto { flex: 0 0 76%; scroll-snap-align: start; }
  .produto img { margin-bottom: 10px; }
  .produto h3 { font-size: 14px; }
  .produto p { font-size: 12px; line-height: 1.4; }
  .grid + .center, .faq + .center { margin-top: 24px; }
  .sobre-copy .btn { margin-top: 24px; }

  /* Prova social: depoimentos em coluna única e enxutos */
  .depoimentos { grid-template-columns: 1fr; }
  .card { padding: 14px 16px; }
  .card .aspas { font-size: 28px; margin-bottom: 6px; }
  .card p { font-size: 13px; }
  .autor { margin-top: 12px; gap: 10px; }
  .autor img { width: 36px; height: 36px; }
  .autor strong { font-size: 13px; }
  .autor span { font-size: 12px; }

  /* Sobre: foto vira faixa no topo, a dobra segue com uma tela */
  .sobre { grid-template-columns: 1fr; grid-template-rows: 45svh auto; align-content: start; }
  .sobre-media img { height: 100%; }
  .sobre-copy { padding: 32px 24px; }

  /* FAQ enxuto */
  .faq summary { padding: 16px 0; font-size: 15px; }
  .faq p { padding-bottom: 16px; font-size: 14px; }

  .dots { right: 12px; gap: 6px; }
  .dots a { width: 6px; height: 6px; }
  .dots a.is-active { height: 20px; }

  /* input em 16px evita o zoom automático do iOS ao focar */
  .modal-panel { margin: 6vh auto; max-height: 88vh; overflow-y: auto; }
  .modal-panel input { font-size: 16px; height: 44px; }
}

/* Tablet: largura já comporta 3 colunas, então os 6 cards viram 2 fileiras */
@media (min-width: 600px) and (max-width: 860px) {
  /* FORMATO TABLET: composição fixa de 720px */
  .container, .sobre-copy { max-width: 720px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .depoimentos { grid-template-columns: repeat(3, 1fr); }
  .sobre { grid-template-columns: 45% 55%; grid-template-rows: none; }
  .sobre-media img { height: 100%; }
}

/* Celular de tela curta: aperta mais pros 6 cards caberem na dobra */
@media (max-width: 860px) and (max-height: 720px) {
  :root { --pad: 28px; }
  h2 { font-size: 23px; }
  .section-head { margin-bottom: 16px; }
  .section-head p { font-size: 14px; }
  .grid { gap: 10px; }
  .produto img { max-height: 34vh; margin-bottom: 8px; }
  .produto h3 { font-size: 13px; }
  .produto p { font-size: 11px; }
  .card { padding: 10px 12px; }
  .card .aspas { font-size: 22px; margin-bottom: 4px; }
  .card p { font-size: 12px; }
  .autor { margin-top: 8px; }
  .autor img { width: 30px; height: 30px; }
  .autor strong { font-size: 12px; }
  .autor span { font-size: 11px; }
  .grid + .center, .faq + .center { margin-top: 16px; }
  .sobre-copy .btn { margin-top: 18px; }
  .btn-lg { height: 50px; padding: 0 30px; font-size: 16px; }
}

/* ============================================================
   X1 EMBALAGENS — dobras específicas desta LP
   ============================================================ */

/* linha de pedido mínimo junto do CTA */
.nota-minimo { font-size: 13px; color: var(--muted-foreground); margin-top: 12px; }
.hero .nota-minimo { color: rgba(255,255,255,0.75); }

/* bullets do hero em linha */
.hero-bullets { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; padding: 0; }
.hero-bullets li { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.92); display: flex; align-items: center; gap: 8px; }
.hero-bullets li::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); flex-shrink: 0; }

/* lista de benefícios na dobra do 14L */
.beneficios-lista { list-style: none; margin-top: 20px; padding: 0; }
.beneficios-lista li { font-size: 15px; font-weight: 600; color: var(--foreground); display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.beneficios-lista li::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); flex-shrink: 0; }
.sobre-copy p + p { margin-top: 12px; }

/* grade de 4 colunas (produtos, razões e passos) */
@media (min-width: 861px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* dobra invertida: foto à direita, texto à esquerda */
@media (min-width: 600px) {
  .sobre-invertida { grid-template-columns: 55% 45%; }
  .sobre-invertida .sobre-media { order: 2; }
  .sobre-invertida .sobre-copy { order: 1; }
}

/* razões (por que escolher) */
.razao { padding: 24px; }
.razao h3 { margin-bottom: 8px; }
.razao p { color: var(--muted-foreground); font-size: 14px; }

/* passos do atendimento */
.passos { list-style: none; padding: 0; counter-reset: passo; }
.passo { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; background: var(--background); }
.passo-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground);
  font-weight: 700; font-size: 15px; margin-bottom: 14px;
}
.passo h3 { margin-bottom: 6px; }
.passo p { color: var(--muted-foreground); font-size: 14px; }

/* endereço + mapa */
.endereco-grid { display: grid; grid-template-columns: 40% 60%; gap: 48px; align-items: center; }
.endereco-copy p { color: var(--muted-foreground); font-size: 17px; line-height: 1.8; margin-top: 16px; }
.endereco-copy .btn { margin-top: 32px; }
.endereco-mapa iframe {
  width: 100%; height: 460px; border: 1px solid var(--border);
  border-radius: var(--radius-xl); display: block;
}

/* WhatsApp flutuante (à esquerda; o indicador de dobras vive à direita) */
.whats-flutuante {
  position: fixed; left: 22px; bottom: 22px; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 999px; background: var(--whats);
}
.whats-flutuante:hover { background: #1fb858; }

/* --- mobile e tablet --- */
@media (max-width: 860px) {
  .hero-bullets { gap: 6px 18px; margin-top: 20px; }
  .hero-bullets li { color: var(--foreground); font-size: 13px; }
  .hero .nota-minimo { color: var(--muted-foreground); }

  /* razões e passos: 2 por linha */
  .razoes, .passos { display: grid; grid-template-columns: 1fr 1fr; }
  .razao, .passo { padding: 14px; }
  .razao h3, .passo h3 { font-size: 13px; }
  .razao p, .passo p { font-size: 12px; line-height: 1.4; }
  .passo-num { width: 26px; height: 26px; font-size: 13px; margin-bottom: 8px; }

  .endereco-grid { grid-template-columns: 1fr; gap: 24px; }
  .endereco-mapa iframe { height: 300px; }
  .endereco-copy p { font-size: 15px; }
  .endereco-copy .btn { margin-top: 20px; }

  .whats-flutuante { left: 14px; bottom: 14px; width: 50px; height: 50px; }
}

@media (max-width: 860px) and (max-height: 720px) {
  .razao, .passo { padding: 10px 12px; }
  .endereco-mapa iframe { height: 240px; }
  .sobre-copy p + p { margin-top: 8px; }
  .beneficios-lista { margin-top: 12px; }
  .beneficios-lista li { font-size: 13px; padding: 2px 0; }
}

/* mobile: compactar as dobras de texto longo (14L e personalização) */
@media (max-width: 599px) {
  .sobre { grid-template-rows: 26svh auto; }
  .sobre-copy { padding: 20px 24px 24px; }
  .sobre-copy h2 { font-size: 21px; }
  .sobre-copy p { font-size: 13px; line-height: 1.5; margin-top: 10px; }
  .sobre-copy p + p { margin-top: 8px; }
  .beneficios-lista { margin-top: 10px; }
  .beneficios-lista li { font-size: 12.5px; padding: 2px 0; }
  .sobre-copy .btn { margin-top: 14px; height: 50px; padding: 0 30px; font-size: 15px; }
}

/* --- TOPBAR (logo à esquerda + âncoras, pedido do doc) --- */
:root { --topbar: 64px; }
body { padding-top: var(--topbar); }
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 48;
  height: var(--topbar);
  background: var(--background);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar-logo { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--foreground); text-decoration: none; white-space: nowrap; }
.topbar-nav { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-nav a { font-size: 14px; font-weight: 500; color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
.topbar-nav a:hover { color: var(--foreground); }

/* as dobras descontam a topbar e as âncoras param abaixo dela */
.hero, .block, .sobre { min-height: calc(100svh - var(--topbar)); }
section { scroll-margin-top: var(--topbar); }

@media (max-width: 860px) {
  .topbar-inner { gap: 12px; }
  .topbar-logo { font-size: 15px; }
  .topbar-nav { gap: 16px; }
  .topbar-nav a { font-size: 12px; }
}

/* topbar no celular: logo curto e sem o link Início (o logo leva ao topo) */
.logo-min { display: none; }
@media (max-width: 599px) {
  .logo-full { display: none; }
  .logo-min { display: inline; }
  .nav-inicio { display: none; }
  .topbar-nav { gap: 14px; }
  /* compactar levemente hero, produtos e prova pra fechar na tela com a topbar */
  .hero-content { padding-top: 20px; padding-bottom: 20px; }
  .hero-bullets { margin-top: 14px; }
  .prova .section-head { margin-bottom: 14px; }
  .prova .card { padding: 10px 14px; }
  .prova .card p { font-size: 12.5px; }
  .prova .autor { margin-top: 8px; }
  .prova .grid + .center { margin-top: 14px; }
  #produtos .section-head { margin-bottom: 14px; }
  #produtos .produto img { max-height: 38vh; }
}

/* hero: headline em menos linhas, equilibradas, sem invadir a área da imagem */
@media (min-width: 861px) {
  .hero-copy { max-width: 58%; }
  .hero h1 { font-size: clamp(34px, 3.4vw, 49px); text-wrap: balance; }
  .hero-content p { max-width: 520px; }
  .hero::after {
    background: linear-gradient(90deg,
      rgba(0,0,0,0.80) 0%,
      rgba(0,0,0,0.65) 45%,
      rgba(0,0,0,0.22) 66%,
      rgba(0,0,0,0) 82%);
  }
}

/* ============================================================
   PASSADA VISUAL — ícones, chips, estrelas, headlines centradas
   ============================================================ */
.icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* caixa de ícone: quadrado azul claro, ícone azul */
.icone-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-xl);
  background: rgba(186, 0, 0, 0.08); color: var(--primary);
  margin-bottom: 14px;
}
.icone-box-inline { width: 38px; height: 38px; margin: 0 12px 0 0; vertical-align: -10px; }

/* headline centrada nas dobras de grade */
.section-head-centro { margin-left: auto; margin-right: auto; text-align: center; }

/* chips de aplicações */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--muted-foreground); background: var(--background);
}

/* bullets com ícone (14L e personalização) */
.beneficios-lista li::before { display: none; }
.beneficios-lista li .icone { color: var(--primary); width: 18px; height: 18px; }

/* passos: rótulo no lugar do número */
.passo-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 4px; }

/* estrelas dos depoimentos */
.estrelas { display: flex; gap: 2px; margin-bottom: 14px; }
.estrelas .icone { width: 16px; height: 16px; fill: #fbbc04; stroke: #fbbc04; }

@media (max-width: 860px) {
  .icone-box { width: 34px; height: 34px; margin-bottom: 8px; }
  .icone-box .icone { width: 16px; height: 16px; }
  .icone-box-inline { width: 30px; height: 30px; vertical-align: -8px; margin-right: 8px; }
  .chips { gap: 6px; margin-top: 12px; }
  .chip { padding: 5px 12px; font-size: 11.5px; }
  .estrelas { margin-bottom: 8px; }
  .estrelas .icone { width: 13px; height: 13px; }
  .passo-label { font-size: 10.5px; margin-bottom: 2px; }
  .beneficios-lista li .icone { width: 15px; height: 15px; }
}

/* mobile: reencaixar produtos e atendimento após a passada visual */
@media (max-width: 599px) {
  #produtos .produto img { max-height: 27vh; }
  #produtos .section-head { margin-bottom: 10px; }
  .chips { gap: 5px; margin-top: 10px; }
  .chip { padding: 4px 10px; font-size: 10.5px; }
  .passo { padding: 8px 10px; }
  .passo .icone-box { width: 28px; height: 28px; margin-bottom: 6px; }
  .passo .icone-box .icone { width: 14px; height: 14px; }
  #atendimento .section-head { margin-bottom: 12px; }
  #atendimento .grid + .center { margin-top: 14px; }
}


/* logo X1 na topbar e no rodapé */
.topbar-logo img { display: block; height: 34px; width: auto; }
.rodape .logo img { height: 40px; width: auto; }
@media (max-width: 599px) {
  .topbar-logo img.logo-min { height: 30px; }
}

/* topbar: uma versão de logo por formato */
.topbar-logo img.logo-min { display: none; }
@media (max-width: 599px) {
  .topbar-logo img.logo-full { display: none; }
  .topbar-logo img.logo-min { display: block; }
}

/* ============================================================
   PASSADA "MUITO VISUAL" — ícones grandes, tiles e esteira
   ============================================================ */
.lead { font-size: 17px; }

/* tiles de ícone grande (dobras 14L e personalização) */
.tiles { display: flex; gap: 24px; margin-top: 28px; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; line-height: 1.3; max-width: 150px; }
.icone-box-g { width: 62px; height: 62px; margin-bottom: 0; border-radius: calc(var(--radius) + 6px); }
.icone-box-g .icone { width: 28px; height: 28px; }
.nota-apoio { font-size: 13px !important; margin-top: 20px !important; }

/* produtos: litragem em destaque, card centrado, selo Novo */
.produto { text-align: center; position: relative; }
.litragem { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.badge-novo {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px;
}

/* por quê: cards centrados com ícone grande */
.razao { text-align: center; padding: 32px 20px; }
.razao .icone-box { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: calc(var(--radius) + 6px); }
.razao .icone-box .icone { width: 24px; height: 24px; }

/* esteira do atendimento */
.fluxo { display: flex; align-items: stretch; gap: 10px; }
.passo-fluxo {
  flex: 1; position: relative; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--background); padding: 30px 18px 24px;
}
.passo-fluxo .icone-box-g { margin: 0 auto 14px; }
.passo-fluxo h3 { font-size: 16px; margin-bottom: 6px; }
.passo-fluxo p { font-size: 13px; color: var(--muted-foreground); }
.fluxo-num {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
}
.seta { align-self: center; color: #c4c4c4; flex-shrink: 0; }
.seta .icone { width: 28px; height: 28px; }

@media (max-width: 860px) {
  .tiles { gap: 10px; margin-top: 16px; }
  .tile { font-size: 11.5px; gap: 6px; }
  .icone-box-g { width: 44px; height: 44px; }
  .icone-box-g .icone { width: 20px; height: 20px; }
  .nota-apoio { margin-top: 12px !important; font-size: 12px !important; }
  .litragem { font-size: 22px; }
  .badge-novo { font-size: 10.5px; padding: 3px 10px; top: 8px; right: 8px; }
  .razao { padding: 16px 10px; }
  .razao .icone-box { width: 40px; height: 40px; margin-bottom: 8px; }
  .razao .icone-box .icone { width: 18px; height: 18px; }
  .fluxo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .seta { display: none; }
  .passo-fluxo { padding: 30px 10px 14px; }
  .passo-fluxo h3 { font-size: 13px; }
  .passo-fluxo p { font-size: 11.5px; }
  .fluxo-num { width: 20px; height: 20px; font-size: 11px; top: 8px; left: 8px; }
}

/* ============================================================
   AJUSTES DE ALINHAMENTO (pedido de 09/09)
   ============================================================ */
/* topbar mais presente */
:root { --topbar: 72px; }
.topbar-logo img { height: 40px; }

/* tiles: linha com ícone à esquerda e rótulo centrado verticalmente */
.tiles { flex-direction: column; gap: 12px; margin-top: 26px; }
.tile { flex-direction: row; align-items: center; gap: 14px; max-width: none; font-size: 15px; }
.tile .icone-box-g { width: 52px; height: 52px; flex-shrink: 0; }

/* esteira sem número: respiro simétrico e CTA afastado */
.passo-fluxo { padding: 26px 18px; }
.fluxo + .center { margin-top: 48px; }

/* "Onde estamos" com o pin alinhado por flex, sem hack de baseline */
.endereco-copy h2 { display: flex; align-items: center; gap: 12px; }
.icone-box-inline { margin: 0; vertical-align: initial; }

/* headline centrada: parágrafo também centrado e contido */
.section-head-centro { max-width: 720px; }
.section-head-centro p { margin-left: auto; margin-right: auto; }

/* cards de produto: tudo no eixo central, com respiro constante */
.produto h3 { margin-top: 2px; margin-bottom: 2px; }
.produto p { font-size: 13px; }

@media (max-width: 860px) {
  .topbar-logo img { height: 34px; }
  .topbar-logo img.logo-min { height: 34px; }
  .tiles { gap: 8px; margin-top: 14px; }
  .tile { font-size: 12.5px; gap: 10px; }
  .tile .icone-box-g { width: 38px; height: 38px; }
  .passo-fluxo { padding: 16px 10px; }
  .fluxo + .center { margin-top: 20px; }
}

/* sprite de ícones fora do fluxo (o CSP bloqueia style inline) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* dobra do 14L escura, no mesmo preto do fundo da foto */
#balde14 { background: #000; }
#balde14 h2 { color: #fff; }
#balde14 .sobre-copy p { color: rgba(255, 255, 255, 0.72); }
#balde14 .nota-apoio { color: rgba(255, 255, 255, 0.5); }
#balde14 .tile strong { color: #fff; }
#balde14 .icone-box { background: rgba(255, 255, 255, 0.09); color: #f25c5c; }

/* dobra 14L: ícone sem caixa, direto sobre o preto */
#balde14 .icone-box { background: transparent; width: auto; height: auto; border-radius: 0; }
#balde14 .icone-box .icone { width: 30px; height: 30px; }
@media (max-width: 599px) {
  #balde14 .icone-box .icone { width: 22px; height: 22px; }
}

/* ============================================================
   TOPBAR VERMELHA + FADE VERMELHO NO HERO
   ============================================================ */
.topbar { background: var(--primary); border-bottom: 0; }
.topbar-nav a { color: rgba(255, 255, 255, 0.85); }
.topbar-nav a:hover { color: #fff; }

/* fade do hero em vermelho (desktop) */
@media (min-width: 861px) {
  .hero::after {
    background: linear-gradient(90deg,
      rgba(134, 0, 0, 0.93) 0%,
      rgba(150, 0, 0, 0.74) 45%,
      rgba(165, 8, 8, 0.28) 66%,
      rgba(0, 0, 0, 0) 82%);
  }
  /* CTA do hero em branco pra não sumir no fade vermelho */
  .hero .btn-primary { background: #fff; color: var(--primary); }
  .hero .btn-primary:hover { background: #ffe9e9; }
}

/* dobra de personalização no mesmo branco da foto */
#personalizacao { background: #f6f6f6; }

/* topbar não acompanha o scroll: fica só no topo da página */
.topbar { position: absolute; }
section { scroll-margin-top: 0; }
/* sem barra sobreposta, as dobras internas voltam à tela cheia */
.block, .sobre { min-height: 100vh; min-height: 100svh; }

/* fade mais curto: solta o produto na metade direita */
@media (min-width: 861px) {
  .hero::after {
    background: linear-gradient(90deg,
      rgba(134, 0, 0, 0.92) 0%,
      rgba(148, 0, 0, 0.68) 38%,
      rgba(160, 8, 8, 0.18) 55%,
      rgba(0, 0, 0, 0) 68%);
  }
}

/* personalização: imagem inteira, sem corte (o fundo já é contínuo com a foto) */
#personalizacao .sobre-media { display: flex; align-items: center; justify-content: center; }
#personalizacao .sobre-media img { object-fit: contain; height: auto; max-height: 100%; }

/* personalização: largura total da coluna, altura natural, nunca corta a sombra */
#personalizacao .sobre-media img { width: 100%; height: auto; max-height: none; object-fit: initial; }

/* personalização igual à dobra 2: foto sangra a coluna inteira */
#personalizacao .sobre-media { display: block; }
#personalizacao .sobre-media img { width: 100%; height: 100%; max-height: none; object-fit: cover; }

/* personalização: foto original na largura da coluna; o degradê do fundo completa a altura */
#personalizacao .sobre-media { display: flex; align-items: center; background: linear-gradient(180deg, #eeeeef 0%, #f4f4f5 45%, #fafafa 100%); }
#personalizacao .sobre-media img { width: 100%; height: auto; max-height: none; object-fit: initial; }

/* esfuma o início e o fim da foto pra fundir com o degradê */
#personalizacao .sobre-media img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

/* personalização: PNG sem fundo sobre cor chapada — posicionamento livre, zero emenda */
#personalizacao .sobre-media {
  display: flex; align-items: center; justify-content: center;
  background: #f6f6f6; padding: 48px 24px;
}
#personalizacao .sobre-media img {
  width: 100%; max-width: 640px; height: auto; max-height: 100%;
  object-fit: initial;
  -webkit-mask-image: none; mask-image: none;
}

/* balde maior na coluna da personalização */
#personalizacao .sobre-media { padding: 24px 0; }
#personalizacao .sobre-media img { max-width: none; width: 118%; margin-left: -6%; }

/* balde grande, mas centrado na coluna */
#personalizacao .sobre-media { overflow: hidden; }
#personalizacao .sobre-media img { width: 106%; margin: 0; }

/* recuo padrão: dobras de foto alinham o texto com o container central (1200px) */
@media (min-width: 861px) {
  .sobre .sobre-copy {
    padding-left: clamp(32px, 6vw, 96px);
    padding-right: max(32px, calc((100vw - 1200px) / 2 + 24px));
  }
  .sobre-invertida .sobre-copy {
    padding-left: max(32px, calc((100vw - 1200px) / 2 + 24px));
    padding-right: clamp(32px, 6vw, 96px);
  }
}

/* ============================================================
   DOBRA DOS TAMANHOS — blocos sobre foto escurecida
   ============================================================ */
#produtos {
  background:
    linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66)),
    url('assets/fundo-tamanhos.jpg') center / cover no-repeat #000;
}
#produtos h2 { color: #fff; }
#produtos .section-head p { color: rgba(255, 255, 255, 0.7); }
#produtos .chip { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.82); }
#produtos .nota-minimo { color: rgba(255, 255, 255, 0.55); }

.tamanhos { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tamanho {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.06);
  min-height: 190px;
}
.tamanho-num { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.tamanho .badge-novo { top: 14px; right: 14px; }

@media (max-width: 860px) {
  .tamanhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tamanho { min-height: 110px; }
  .tamanho-num { font-size: 30px; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .tamanho { min-height: 84px; }
}

/* baldes da personalização respeitam o recuo do grid central */
@media (min-width: 861px) {
  #personalizacao .sobre-media {
    overflow: visible;
    padding: 24px max(24px, calc((100vw - 1200px) / 2 + 24px)) 24px 0;
  }
  #personalizacao .sobre-media img { width: 100%; margin: 0; max-width: none; }
}

/* balde grande, ancorado no recuo direito, crescendo pro centro */
@media (min-width: 861px) {
  #personalizacao .sobre-media { justify-content: flex-end; }
  #personalizacao .sobre-media img { width: 132%; flex-shrink: 0; }
}

/* por que escolher: sem caixas, só ícone e texto */
.razao { border: 0; background: transparent; padding: 12px 8px; }

/* tamanhos: fundo mais apagado, texto à esquerda, blocos com ícone crescente */
#produtos {
  background:
    linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)),
    url('assets/fundo-tamanhos.jpg') center / cover no-repeat #000;
}
#produtos .section-head { text-align: left; margin-left: 0; margin-right: auto; }
#produtos .section-head p { margin-left: 0; }
#produtos .center { text-align: left; }
.tamanho { flex-direction: column; gap: 14px; padding: 28px 0; }
.icone-balde { color: #f25c5c; }
.icone-balde.t1 { width: 26px; height: 26px; }
.icone-balde.t2 { width: 36px; height: 36px; }
.icone-balde.t3 { width: 48px; height: 48px; }
.icone-balde.t4 { width: 58px; height: 58px; }
@media (max-width: 860px) {
  .icone-balde.t1 { width: 20px; height: 20px; }
  .icone-balde.t2 { width: 26px; height: 26px; }
  .icone-balde.t3 { width: 34px; height: 34px; }
  .icone-balde.t4 { width: 42px; height: 42px; }
  .tamanho { padding: 16px 0; gap: 8px; }
}

/* dobra 14L: foto original inteira, sem corte; o preto da dobra completa o resto */
#balde14 .sobre-media { display: flex; align-items: center; justify-content: center; }
#balde14 .sobre-media img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }

/* ============================================================
   TAMANHOS EM FUNDO BRANCO — balde real escalando por litragem
   ============================================================ */
#produtos { background: var(--background); }
#produtos h2 { color: var(--foreground); }
#produtos .section-head p { color: var(--muted-foreground); }
#produtos .nota-minimo { color: var(--muted-foreground); }
.tamanho { border: 1px solid var(--border); background: var(--background); }
.tamanho-num { color: var(--foreground); font-size: 40px; }
.balde-area { height: 175px; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.balde-img { width: auto; }
.balde-img.t1 { height: 64px; }
.balde-img.t2 { height: 98px; }
.balde-img.t3 { height: 140px; }
.balde-img.t4 { height: 160px; }

/* recuo do grid também na dobra preta do 14L (lado esquerdo) */
@media (min-width: 861px) {
  #balde14 .sobre-media {
    justify-content: flex-start;
    padding-left: max(24px, calc((100vw - 1200px) / 2 + 24px));
  }
  #balde14 .sobre-media img { flex-shrink: 0; }
}
@media (max-width: 860px) {
  .balde-area { height: 92px; }
  .balde-img.t1 { height: 34px; }
  .balde-img.t2 { height: 52px; }
  .balde-img.t3 { height: 74px; }
  .balde-img.t4 { height: 86px; }
  .tamanho-num { font-size: 24px; }
}

/* tamanhos sem caixa: só o balde e a litragem */
.tamanho { border: 0; background: transparent; }

/* fundo dos tamanhos: o close do balde bem de leve sob véu branco */
#produtos {
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)),
    url('assets/fundo-tamanhos.jpg') center / cover no-repeat var(--background);
}

/* ============================================================
   INVERSÃO: 14L em fundo claro, personalização em preto
   ============================================================ */
#balde14 { background: #f6f6f6; }
#balde14 h2 { color: var(--foreground); }
#balde14 .sobre-copy p { color: var(--muted-foreground); }
#balde14 .nota-apoio { color: var(--muted-foreground) !important; }
#balde14 .tile strong { color: var(--foreground); }
#balde14 .icone-box { color: var(--primary); }

#personalizacao { background: #000; }
#personalizacao .sobre-media { background: transparent; }
#personalizacao h2 { color: #fff; }
#personalizacao .sobre-copy p { color: rgba(255, 255, 255, 0.72); }
#personalizacao .tile strong { color: #fff; }
#personalizacao .icone-box { background: transparent; width: auto; height: auto; border-radius: 0; color: #f25c5c; margin-bottom: 0; }
#personalizacao .icone-box .icone { width: 26px; height: 26px; }

/* tamanhos: fundo limpo, caixas de volta com litragem e linha de apoio */
#produtos { background: var(--background); }
.tamanho { border: 1px solid var(--border); background: var(--muted); padding: 30px 16px 26px; gap: 10px; }
.tamanho-uso { font-size: 13px; color: var(--muted-foreground); }
.balde-area { height: 165px; }
@media (max-width: 860px) {
  .tamanho { padding: 14px 8px 12px; gap: 4px; }
  .tamanho-uso { font-size: 10px; }
  .balde-area { height: 84px; }
}

/* pedido mínimo em destaque: pílula vermelha */
.nota-minimo {
  display: inline-flex; align-items: center;
  margin-top: 14px; padding: 9px 18px;
  border-radius: 999px;
  background: rgba(186, 0, 0, 0.08);
  color: var(--primary) !important;
  font-size: 13.5px; font-weight: 600;
}

/* linha completa com o 16L: cinco colunas */
.tamanhos { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.balde-img.t16 { height: 150px; }
.tamanho-num { font-size: 36px; }
@media (max-width: 860px) {
  .tamanhos { grid-template-columns: 1fr 1fr; }
  .tamanho:last-child { grid-column: span 2; }
  .balde-img.t16 { height: 80px; }
  .tamanho-num { font-size: 22px; }
}

/* pílula do pedido mínimo em linha própria, alinhada ao contexto */
.nota-minimo { display: flex; width: fit-content; margin-top: 16px; }
.center .nota-minimo { margin-left: auto; margin-right: auto; }

/* baldes sempre na mesma base; pílula segue o alinhamento da dobra */
.tamanho { justify-content: flex-end; }
.tamanho-uso { min-height: 20px; }
.balde-img.t4 { height: 164px; }
#produtos .center .nota-minimo { margin-left: 0; margin-right: 0; }

/* hero: fade no cinza da identidade (#525254), CTA volta ao vermelho padrão */
@media (min-width: 861px) {
  .hero::after {
    background: linear-gradient(90deg,
      rgba(58, 58, 60, 0.93) 0%,
      rgba(72, 72, 74, 0.7) 38%,
      rgba(82, 82, 84, 0.2) 55%,
      rgba(0, 0, 0, 0) 68%);
  }
  .hero .btn-primary { background: var(--primary); color: var(--primary-foreground); }
  .hero .btn-primary:hover { background: #9c0000; }
}

/* topbar no cinza da identidade */
.topbar { background: #525254; }

/* sem a dobra de depoimentos, o endereço assume o fundo alternado */
#endereco { background: var(--muted); }

/* dobras de grade: headline, texto e CTA alinhados à esquerda */
#porque .center, #atendimento .center { text-align: left; }
#porque .center .nota-minimo, #atendimento .center .nota-minimo { margin-left: 0; margin-right: 0; }

/* dobras sem coluna de imagem: headline ocupa a largura, sem quebra precoce */
.block .section-head { max-width: none; }
.block .section-head p { max-width: 680px; }

/* dobras sem imagem: fundos do armazém bem de leve sob véu branco */
#produtos {
  background:
    linear-gradient(rgba(255, 255, 255, 0.945), rgba(255, 255, 255, 0.945)),
    url('assets/bg-dobra1.jpg') center / cover no-repeat var(--background);
}
#porque {
  background:
    linear-gradient(rgba(247, 247, 247, 0.945), rgba(247, 247, 247, 0.945)),
    url('assets/bg-dobra2.jpg') center / cover no-repeat var(--muted);
}
#atendimento {
  background:
    linear-gradient(rgba(255, 255, 255, 0.945), rgba(255, 255, 255, 0.945)),
    url('assets/bg-dobra3.jpg') center / cover no-repeat var(--background);
}

/* topbar de volta ao vermelho */
.topbar { background: var(--primary); }

/* por que escolher: fundo preto com a textura do armazém */
#porque {
  background:
    linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
    url('assets/bg-dobra2.jpg') center / cover no-repeat #000;
}
#porque h2 { color: #fff; }
#porque .section-head p { color: rgba(255, 255, 255, 0.7); }
#porque .razao h3 { color: #fff; }
#porque .razao p { color: rgba(255, 255, 255, 0.65); }
#porque .icone-box { background: transparent; color: #f25c5c; }
#porque .nota-minimo { background: rgba(255, 255, 255, 0.1); color: #f25c5c !important; }

/* endereço em preto */
#endereco { background: #000; }
#endereco h2 { color: #fff; }
#endereco .endereco-copy p { color: rgba(255, 255, 255, 0.75); }
#endereco .icone-box-inline { background: transparent; color: #f25c5c; }
#endereco .endereco-mapa iframe { border-color: rgba(255, 255, 255, 0.18); }

/* por quê: ícones e texto maiores */
#porque .icone-box .icone { width: 40px; height: 40px; }
#porque .icone-box { margin-bottom: 20px; }
#porque .razao h3 { font-size: 21px; margin-bottom: 10px; }
#porque .razao p { font-size: 16px; }
@media (max-width: 860px) {
  #porque .icone-box .icone { width: 26px; height: 26px; }
  #porque .icone-box { margin-bottom: 10px; }
  #porque .razao h3 { font-size: 15px; margin-bottom: 4px; }
  #porque .razao p { font-size: 12.5px; }
}

/* ============================================================
   PASSO A PASSO EM LINHA DO TEMPO
   ============================================================ */
.fluxo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.passo-fluxo { border: 0; background: transparent; padding: 0; position: relative; }
.passo-fluxo .icone-box-g {
  width: 64px; height: 64px; border-radius: 999px;
  background: var(--primary); color: #fff;
  position: relative; z-index: 1; margin: 0 auto 18px;
}
.passo-fluxo .icone-box-g .icone { width: 28px; height: 28px; }
/* linha conectando os círculos */
.passo-fluxo:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 31px; left: calc(50% + 46px); right: calc(-50% + 46px);
  height: 2px; background: var(--border);
}
.passo-fluxo h3 { font-size: 19px; margin-bottom: 8px; }
.passo-fluxo p { font-size: 15px; }
@media (max-width: 860px) {
  .fluxo { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
  .passo-fluxo::before { display: none; }
  .passo-fluxo .icone-box-g { width: 44px; height: 44px; margin-bottom: 8px; }
  .passo-fluxo .icone-box-g .icone { width: 20px; height: 20px; }
  .passo-fluxo h3 { font-size: 14px; margin-bottom: 4px; }
  .passo-fluxo p { font-size: 12px; }
}