/* ==========================================================================
   Sublitex — Landing Page WhatsApp v3 (Black November)
   ========================================================================== */

:root {
  --branco: #FFFFFF;
  --fundo: #FBFBFD;
  --borda: #E8EAEF;
  --ponto: #C7CCD6;
  --marinho: #0A1F44;
  --texto: #1A1D24;
  --fraco: #5A5F66;
  --azul: #0068D3;
  --rosa: #E91E8C;
  --amarelo: #F7C300;
  --turquesa: #00C1D4;
  --rosa-claro: #FBDAEC;
  --esp: 20px; /* Mais respiro nas laterais no mobile */
  --r-md: 14px;
  --r-lg: 22px;
  --r-card: 30px; /* Cantos arredondados mais suaves e orgânicos */
  --r-pill: 999px;
  --dur: 240ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: 'Poppins', system-ui, sans-serif;
  --corpo: 'Raleway', system-ui, sans-serif;
  --foco: 0 0 0 3px var(--branco), 0 0 0 6px var(--azul);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

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

.pagina {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 var(--esp);
}

.seta {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   Palco, hero, timer, título, informações e rodapé
   ========================================================================== */

/* ==========================================================================
   Sublitex — Black November WhatsApp LP
   Palco, Hero, Timer, Título, Vitrine, Informações e Rodapé
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palco
   -------------------------------------------------------------------------- */
/* O topo é preto (tema Black November) e clareia em degradê até a cor da página, onde começam os produtos.
   As margens e o padding laterais esticam o preto até as bordas da tela sem tirar o conteúdo da coluna.
   Os 100px de baixo são a folga onde o produto do primeiro cartão sobe (o .vitrine entra 92px por cima
   dela); o degradê começa 40px antes, atrás da última linha do título, com paradas para a curva ficar suave. */
.palco {
  --preto: #23252B;
  position: relative;
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%) 118px; /* Mais folga na base para não prensar a vitrine */
  text-align: center;
  color: var(--branco);
  background-color: var(--fundo);
  background-image: linear-gradient(to bottom,
    var(--preto) 0,
    var(--preto) calc(100% - 140px),
    rgba(35, 37, 43, 0.88) calc(100% - 112px),
    rgba(35, 37, 43, 0.58) calc(100% - 80px),
    rgba(35, 37, 43, 0.26) calc(100% - 48px),
    rgba(35, 37, 43, 0.07) calc(100% - 20px),
    rgba(35, 37, 43, 0) 100%);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 0 0; /* Respiro superior no topo da tela */
}

.hero__logo {
  height: 48px;
  width: auto;
  margin: 0 0 16px; /* Respiro entre logo e título */
}

.hero__titulo {
  width: min-content;
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 12.4vw, 64px);
  line-height: 1.04; /* Letras menos esmagadas verticalmente */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--branco);
}

.divisor {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 240px;
  margin: 20px 0; /* Respiro claro entre blocos */
}

.divisor__linha {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.trio {
  display: block;
  width: 38px;
  height: 13px;
  flex-shrink: 0;
}

.hero__texto {
  margin: 0 0 6px;
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--branco);
  letter-spacing: 0.01em;
}

.hero__frase {
  display: block;
  max-width: 32ch;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Os 3 mini painéis e a tag de preço
   -------------------------------------------------------------------------- */
.hero__vitrine {
  position: relative;
  width: 100%;
  max-width: 350px;
  margin: 18px auto 6px; /* Descola o kit da frase e do CTA */
}

/* O CTA fecha o bloco da oferta: respiro acima, separando do kit e da tag */
.hero__vitrine + .cta {
  margin-top: 24px;
}

.hero__kit {
  display: block;
  width: 66%;
  max-width: none;
  height: auto;
  margin-left: auto; /* os painéis ficam à direita e a tag à esquerda */
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.55));
}

/* A tag é HTML e CSS: o preço vem do config.js e muda toda semana sem gerar imagem nova. O volume vem
   do degradê, do brilho no canto e das sombras duras de espessura. O pivô fica acima do furo, onde o
   fio a seguraria, para ela balançar pendurada. Tudo nela está em em: mudar o font-size da .tag
   (16px no celular) muda a tag inteira de tamanho, que é como ela cresce no desktop. */
.tag {
  --giro: -7deg;
  position: absolute;
  z-index: 2;
  left: 0.375em;
  bottom: 0.375em;
  width: 8.875em;
  font-size: 16px;
  transform: rotate(var(--giro));
  transform-origin: 80% -34%;
}

.tag__corpo {
  position: relative;
  padding: 1.125em 0.625em 0.8125em;
  border-radius: 1.25em;
  text-align: center;
  background: linear-gradient(150deg, #FFD83A 0%, var(--amarelo) 40%, #E0AE00 75%, #C99700 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 6px rgba(120, 80, 0, 0.35),
    2px 3px 0 #A97E00,
    4px 6px 0 #7E5C00,
    0 20px 24px -8px rgba(0, 0, 0, 0.7);
}

.tag__corpo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 44%);
  pointer-events: none;
}

.tag__preco {
  position: relative;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.1875em;
  font-family: var(--display);
  line-height: 1;
  color: var(--marinho);
}

.tag__moeda {
  margin-top: 0.5em;
  font-weight: 700;
  font-size: 0.875em;
}

.tag__valor {
  font-weight: 900;
  font-size: 2.75em;
  letter-spacing: -0.02em;
  text-shadow: 0 0.045em 0 rgba(255, 255, 255, 0.4);
}

.tag__forma {
  position: relative;
  width: max-content;
  margin: 0.667em auto 0;
  padding: 0.296em 0.963em 0.37em;
  border-radius: var(--r-pill);
  background: var(--marinho);
  box-shadow: 0 0.148em 0 rgba(0, 0, 0, 0.35);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.84375em;
  line-height: 1;
  color: var(--branco);
}

.tag__furo {
  position: absolute;
  z-index: 2;
  top: 0.8125em;
  right: 1.375em;
  width: 0.8125em;
  height: 0.8125em;
  border-radius: 50%;
  background: var(--preto);
  box-shadow: inset 0 0.125em 0.1875em rgba(0, 0, 0, 0.8), 0 0 0 0.125em #8F6A00, 0 0 0 0.1875em rgba(0, 0, 0, 0.5);
}

.tag__fio {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: calc(100% - 1.21875em);
  width: 3.75em;
  height: 4em;
  overflow: visible;
  fill: none;
  stroke: var(--ponto);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Timer de Urgência
   -------------------------------------------------------------------------- */
.timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 26px 0 0; /* Respiro entre o CTA e o timer */
  gap: 8px;
}

.timer[hidden] {
  display: none;
}

.timer__rotulo {
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--ponto);
}

.timer__caixas {
  display: flex;
  gap: 8px; /* Mais espaço entre os blocos de tempo */
}

.timer__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  padding: 8px 0 7px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.timer__num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}

.timer__un {
  margin-top: 3px;
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ponto);
}

.timer__caixa--seg {
  border-color: var(--amarelo);
  border-width: 1.5px;
  padding: 7.5px 0 6.5px;
  box-shadow: 0 0 14px rgba(247, 195, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.25);
}

.timer__caixa--seg .timer__num {
  color: var(--amarelo);
}

.tic {
  animation: tic 1s ease-out;
}

@keyframes tic {
  from {
    transform: translateY(-5px);
    opacity: 0.55;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Título da Seção
   -------------------------------------------------------------------------- */
.titulo {
  margin: 32px 0 0; /* Respiro generoso entre o timer e a promessa da marca */
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(20px, 5.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--branco);
  text-wrap: balance;
}

.titulo__enfase {
  display: block;
  font-style: normal;
  color: var(--amarelo);
}

/* --------------------------------------------------------------------------
   Vitrine
   -------------------------------------------------------------------------- */
/* A vitrine ocupa a largura toda da tela, mesmo dentro da coluna .pagina (o par de margens laterais
   estica a caixa até as bordas), para o carrossel poder usar o desktop inteiro. O fundo é o da página:
   o degradê preto do topo já terminou nos 92px de cima, por onde o produto do primeiro cartão sobe. */
.vitrine {
  --miolo: 1240px;
  --cartao-larg: min(65vw, 268px);
  --cartao-alt: calc(var(--cartao-larg) * 1.16);
  position: relative;
  z-index: 2;
  margin: -84px calc(50% - 50vw) 0; /* Alivia a sobreposição sobre o título */
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  text-align: center;
  padding: 44px 0 calc(var(--altura-fixa, 0px) + 110px); /* Muito mais respiro */
  font-family: var(--corpo);
  font-weight: 400;
  font-size: 13.5px;
  color: var(--fraco);
}

.rodape .divisor {
  margin: 18px auto;
}

.rodape .divisor__linha {
  background: var(--ponto);
}

.rodape__linha {
  margin: 8px 0;
  line-height: 1.6;
}

.rodape__copy {
  margin-top: 12px;
  font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   Responsividade (Desktop / Tablet)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .titulo {
    font-size: 38px;
  }
}

/* ==========================================================================
   Carrossel e Cartões
   ========================================================================== */

.carrossel {
  display: flex;
  justify-content: safe center;
  gap: 18px; /* Mais espaço entre os cartões (era 14px) */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: var(--miolo);
  margin: 0 auto -34px;
  padding-top: 96px;
  padding-right: 76px;
  padding-bottom: 68px; /* Acomoda as sombras e o hover sem corte */
  padding-left: var(--esp);
  scroll-padding-left: var(--esp);
}

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

.carrossel:focus-visible {
  outline: 2px solid rgba(0, 104, 211, 0.45);
  outline-offset: -10px;
  border-radius: var(--r-card);
  box-shadow: none;
}

.cartao {
  --img-largura: 108%;
  --img-topo: -24%;
  --img-direita: -16%;
  --img-giro: -8deg;
  position: relative;
  flex: 0 0 auto;
  width: var(--cartao-larg);
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1 / 1.16;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px 20px; /* Mais respiro interno */
  border-radius: var(--r-card);
  text-decoration: none;
  scroll-snap-align: start;
  z-index: calc(10 - var(--i));
  box-shadow: 0 18px 36px -6px rgba(10, 31, 68, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow: visible;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cartao:hover {
  filter: brightness(0.97);
}

.cartao:active {
  filter: brightness(0.93);
}

.cartao--amarelo {
  background: var(--amarelo);
  color: var(--marinho);
  /* mini painel redondo: menor e mais alto, para não invadir o título */
  --img-largura: 100%;
  --img-topo: -31%;
  --img-direita: -20%;
  --img-giro: -6deg;
}

.cartao--azul {
  background: var(--azul);
  color: var(--branco);
  /* painel 2:1: o objeto ocupa menos altura que a caixa, então a caixa cresce */
  --img-largura: 124%;
  --img-topo: -33%;
  --img-direita: -24%;
}

.cartao--rosa {
  background: var(--rosa);
  color: var(--branco);
}

.cartao--turquesa {
  background: var(--turquesa);
  color: var(--marinho);
}

.cartao__midia {
  position: absolute;
  z-index: 3;
  top: var(--img-topo);
  right: var(--img-direita);
  width: var(--img-largura);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  will-change: transform;
}

.cartao__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(var(--img-giro));
  filter: drop-shadow(0 18px 14px rgba(10, 31, 68, 0.32));
}

.cartao__texto {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 52px;
}

.cartao__nome {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21.5px;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.cartao__pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cartao__pilula {
  background: var(--branco);
  color: var(--marinho);
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  border-radius: var(--r-pill);
  padding: 8px 13px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(10, 31, 68, 0.08);
}

.cartao__pilula--preco {
  background: var(--marinho);
  color: var(--amarelo);
  box-shadow: 0 3px 8px rgba(10, 31, 68, 0.22);
}

.cartao__seta {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--marinho);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(10, 31, 68, 0.22);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* ==========================================================================
   Guia do Carrossel
   ========================================================================== */

.vitrine__guia {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--miolo);
  margin: 8px auto 0;
  padding: 8px var(--esp);
  min-height: 48px;
}

.pontos {
  display: flex;
  align-items: center;
  gap: 10px; /* Mais ar entre os indicadores */
}

.ponto {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: #6B7280;
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.ponto--ativo {
  width: 26px;
  background: var(--amarelo);
}

.arraste {
  position: absolute;
  right: var(--esp);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--fraco);
  transition: opacity 400ms var(--ease);
}

.arraste__icone {
  width: 36px;
  height: 36px;
}

.vitrine--rolou .arraste {
  opacity: 0;
  pointer-events: none;
}

/* Em telas largas os 4 cartões cabem: não há o que rolar, então os pontos e a dica não fazem sentido */
.vitrine--sem-rolagem .vitrine__guia {
  display: none;
}

.vitrine--sem-rolagem .carrossel {
  scroll-snap-type: none;
}

/* ==========================================================================
   Elementos Fixos e Foco
   ========================================================================== */

.fixo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.cookie {
  background: var(--marinho);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--esp);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  font-family: var(--corpo);
  font-weight: 400;
  font-size: 12.5px;
}

.cookie[hidden] {
  display: none;
}

.cookie__texto {
  margin: 0;
  line-height: 1.3;
}

.cookie__botao {
  background: var(--branco);
  color: var(--marinho);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  flex-shrink: 0;
}

.flutuante {
  position: fixed;
  right: 18px;
  bottom: calc(18px + max(env(safe-area-inset-bottom), var(--altura-fixa, 0px)));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  min-width: 44px;
  padding: 0 22px 0 16px;
  background: var(--amarelo);
  color: var(--marinho);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  box-shadow: 0 14px 32px rgba(10, 31, 68, 0.35), 0 0 0 3px rgba(255, 255, 255, 0.95);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

/* Some enquanto o CTA do topo está na tela (o app.js põe e tira a classe) */
.flutuante--oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.flutuante:hover {
  filter: brightness(0.96);
}

.flutuante__icone {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex-shrink: 0;
}

.flutuante__texto {
  white-space: nowrap;
}

.cartao:focus-visible,
.flutuante:focus-visible,
.cookie__botao:focus-visible {
  outline: none;
  box-shadow: var(--foco);
}

/* ==========================================================================
   Acessibilidade e Responsividade
   ========================================================================== */

@media (min-width: 768px) {
  .vitrine {
    --cartao-larg: 280px;
  }
}

/* Desktop: a coluna do topo cresce e o hero ganha escala. A faixa preta já é de largura total, e o
   carrossel, com 4 cartões de 280px, cabe inteiro a partir de uns 1280px (sem rolar, sem setas). */
@media (min-width: 900px) {
  .pagina {
    max-width: 700px;
  }

  .hero {
    padding-top: 28px;
  }

  .hero__logo {
    height: 56px;
    margin-bottom: 12px;
  }

  .hero__texto {
    font-size: 18px;
  }

  .hero__frase {
    max-width: 36ch;
  }

  .hero__vitrine {
    max-width: 480px;
    margin-top: 12px;
  }

  .tag {
    font-size: 22px;
  }

  .carrossel {
    padding-right: var(--esp);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Timer em telas muito estreitas e em tablet */
@media (max-width: 339px) {
  .timer__caixas {
    gap: 5px;
  }
  .timer__caixa {
    width: 46px;
  }
  .timer__num {
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  .timer__caixa {
    width: 58px;
  }
  .timer__num {
    font-size: 24px;
  }
}

/* Tag de preço em telas estreitas: menor, para não cobrir os painéis nem encostar na borda */
@media (max-width: 359px) {
  .tag {
    font-size: 14px;
  }
}

.carrossel__seta {
  position: absolute;
  z-index: 5;
  top: calc(92px + var(--cartao-alt) / 2 - 24px);
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--branco);
  color: var(--marinho);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(10, 31, 68, 0.28), 0 0 0 1px rgba(10, 31, 68, 0.08);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.carrossel__seta[hidden] {
  display: none;
}

.carrossel__seta .seta {
  width: 22px;
  height: 22px;
  stroke-width: 2.6;
}

.carrossel__seta:hover {
  background-color: var(--amarelo);
}

.carrossel__seta:active {
  transform: scale(0.94);
}

.carrossel__seta:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

.carrossel__seta:disabled {
  opacity: 0;
  pointer-events: none;
}

.carrossel__seta--ant {
  left: max(8px, calc((100% - var(--miolo)) / 2 + 4px));
}

.carrossel__seta--prox {
  right: max(8px, calc((100% - var(--miolo)) / 2 + 4px));
}

.vitrine .carrossel {
  --fade-esq: 40px;
  --fade-dir: 56px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
}

.vitrine .carrossel.carrossel--inicio {
  --fade-esq: 0px;
}

.vitrine .carrossel.carrossel--fim {
  --fade-dir: 0px;
}

.carrossel--arrastando {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.carrossel--arrastando .cartao {
  pointer-events: none;
}

/* Cursor de arraste no desktop */
@media (hover: hover) and (pointer: fine) {
  .vitrine .carrossel {
    cursor: grab;
  }

  .vitrine .carrossel.carrossel--arrastando {
    cursor: grabbing;
  }
}

/* Timer em telas muito estreitas e em tablet */
@media (hover: hover) and (pointer: fine) {
  .cartao:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px -8px rgba(10, 31, 68, 0.28), 0 4px 12px rgba(0, 0, 0, 0.10);
    filter: brightness(0.98);
  }

  .cartao:hover .cartao__seta {
    transform: scale(1.08);
  }

  .flutuante:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 38px rgba(10, 31, 68, 0.42), 0 0 0 3px rgba(255, 255, 255, 1);
  }
}

@media (min-width: 900px) {
  .hero {
    padding-top: 36px;
  }

  .hero__logo {
    height: 58px;
    margin-bottom: 18px;
  }

  .hero__vitrine {
    max-width: 480px;
    margin: 24px auto 14px;
  }

  .timer {
    margin-top: 30px;
  }

  .titulo {
    margin-top: 42px;
  }
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 320px);
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  background: var(--amarelo);
  color: var(--marinho);
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 -3px 0 rgba(10, 31, 68, 0.18);
  transition: filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cta:hover {
  filter: brightness(1.05);
}

.cta:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

.cta:focus-visible {
  outline: none;
  box-shadow: var(--foco);
}

.cta__icone {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex-shrink: 0;
}

.cta__texto {
  white-space: nowrap;
}

/* CTA da primeira tela no desktop */
@media (min-width: 900px) {
  .cta {
    width: 340px;
    min-height: 60px;
    font-size: 18px;
  }
}