/* ==========================================================================
   VetWeb — Design System compartilhado das Landing Pages
   Base: "Luminous Sanctuary Editorial (Brasil Edition)" — lp/dev/design/DESIGN.md
   REGRA 04: arquivo compartilhado (fica em lp/assets, ao lado dos demais ativos)
   REGRA 07: mobile first — todo layout nasce no mobile e sobe por media query
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Canvas e superfícies (tonal stepping, sem borda pesada) */
  --vw-canvas: #f8fafc;
  --vw-surface: #ffffff;
  --vw-subtle: #f1f5f9;
  --vw-border: #e2e8f0;

  /* Marca — Solar Warmth */
  --vw-solar: #fecc00;
  --vw-solar-hover: #ffc700;
  --vw-solar-soft: #fff8d6;
  --vw-solar-border: #feec8c;

  /* Clínico */
  --vw-sky: #0284c7;
  --vw-sky-deep: #0066cc;
  --vw-sky-darker: #0058b1;
  --vw-sky-soft: #e0f2fe;

  /* Texto sobre as cores suaves acima.
     Selo/badge usa 11px semibold, então exige 4.5:1 (WCAG AA para texto
     pequeno). As cores originais da paleta reprovavam: sky 3.57, warn 2.86,
     ok 3.00 e alert 3.95. Estas versões passam de 4.5:1. */
  --vw-sky-ink: #0369a1;
  --vw-warn-ink: #92400e;
  --vw-ok-ink: #166534;
  --vw-alert-ink: #991b1b;

  /* Tinta (preto puro é proibido) */
  --vw-ink: #1e293b;
  --vw-ink-2: #334155;
  --vw-ink-muted: #64748b;

  /* Estados clínicos */
  --vw-ok: #16a34a;
  --vw-ok-bg: #dcfce7;
  --vw-warn: #d97706;
  --vw-warn-bg: #fef3c7;
  --vw-alert: #dc2626;
  --vw-alert-bg: #fee2e2;

  /* Elevação — sombra deriva de ardósia translúcida, nunca de preto */
  --vw-shadow-1: 0 1px 2px rgba(30, 41, 59, 0.04);
  --vw-shadow-2: 0 4px 20px rgba(30, 41, 59, 0.03);
  --vw-shadow-3: 0 10px 30px -6px rgba(30, 41, 59, 0.04), 0 4px 12px -2px rgba(30, 41, 59, 0.02);
  --vw-shadow-4: 0 18px 44px -10px rgba(30, 41, 59, 0.1);

  /* Raios */
  --vw-r-sm: 0.5rem;
  --vw-r-md: 0.75rem;
  --vw-r-lg: 1rem;
  --vw-r-xl: 1.5rem;
  --vw-r-full: 9999px;

  /* Ritmo */
  --vw-margin: 1.25rem;
  --vw-gutter: 1rem;
  --vw-max: 1280px;
  --vw-touch: 48px;

  --vw-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vw-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body.vw-body {
  margin: 0;
  padding: 0;
  background: var(--vw-canvas);
  color: var(--vw-ink);
  font-family: var(--vw-font-body);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.vw-body.is-locked {
  overflow: hidden;
}

.vw-body h1,
.vw-body h2,
.vw-body h3,
.vw-body h4 {
  font-family: var(--vw-font-display);
  letter-spacing: -0.015em;
  color: var(--vw-ink);
}

.vw-body a {
  color: inherit;
  text-decoration: none;
}

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

/* Exceção: a marca dentro do azulejo precisa vazar para o símbolo preencher
   o quadrado (a arte traz respiro transparente em volta). A regra acima,
   com max-width: 100%, travaria a largura e distorceria o desenho. */
.vw-body .vw-logo-tile img.vw-logo-img {
  display: block;
  width: 170%;
  height: auto;
  max-width: none;
}

.vw-body ul {
  padding: 0;
  list-style: none;
}

/* O navegador aplica margem padrão (1em 40px) em figure — isso desalinha
   a grade e o carrossel, então o reset precisa ser explícito. */
.vw-body figure,
.vw-body figcaption,
.vw-body blockquote {
  padding: 0;
}

/*
 * RESET DE MARGEM — ESPECIFICIDADE ZERO, DE PROPÓSITO.
 *
 * Antes o reset era `.vw-body p { margin: 0 }`: especificidade (0,1,1). As
 * utilitárias .vw-mt-* / .vw-mb-* são (0,1,0) — então o reset ganhava SEMPRE
 * e toda margem escrita num <p> ou heading era descartada em silêncio. Foi o
 * que colou a barra verde do teste grátis no botão de cima, e o mesmo
 * acontecia em todos os outros pontos (mais de 100 só nas landings).
 *
 * `:where()` tem especificidade zero: o seletor abaixo vale (0,0,0) e por
 * isso perde para qualquer classe — que é o que um reset de margem deve
 * fazer. NÃO troque de volta para `.vw-body p` / `.vw-body h2`.
 */
:where(.vw-body) :where(h1, h2, h3, h4, p, ul, figure, figcaption, blockquote) {
  margin: 0;
}

.vw-body :focus-visible {
  outline: 3px solid rgba(2, 132, 199, 0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

.vw-body [hidden] {
  display: none !important;
}

/* Reserva espaço para a barra fixa de CTA no mobile */
@media (max-width: 899px) {
  body.vw-body {
    padding-bottom: 5.25rem;
  }
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.vw-container {
  width: 100%;
  max-width: var(--vw-max);
  margin-inline: auto;
  padding-inline: var(--vw-margin);
}

.vw-section {
  padding-block: 3rem;
}

.vw-section--tight {
  padding-block: 2.25rem;
}

.vw-section--canvas {
  background: var(--vw-canvas);
}

.vw-section--subtle {
  background: var(--vw-subtle);
}

.vw-section--surface {
  background: var(--vw-surface);
}

.vw-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vw-center {
  text-align: center;
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. Tipografia editorial
   -------------------------------------------------------------------------- */
.vw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vw-sky-deep);
}

.vw-h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.015em;
}

.vw-h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.01em;
}

.vw-h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.005em;
}

.vw-lead {
  font-size: 16px;
  line-height: 26px;
  color: var(--vw-ink-2);
}

.vw-text {
  font-size: 15px;
  line-height: 24px;
  color: var(--vw-ink-2);
}

.vw-muted {
  font-size: 13px;
  line-height: 20px;
  color: var(--vw-ink-muted);
}

.vw-caption {
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: var(--vw-ink-muted);
}

/* Realce solar no título: pinta por trás da linha de base sem usar
   z-index negativo (que quebraria sobre qualquer fundo de seção). */
.vw-highlight {
  white-space: nowrap;
  padding-inline: 0.06em;
  background-image: linear-gradient(transparent 60%,
      var(--vw-solar) 60%,
      var(--vw-solar) 94%,
      transparent 94%);
  background-repeat: no-repeat;
}

.vw-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 34rem;
  margin-bottom: 1.75rem;
}

.vw-section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. Botões (área de toque >= 48px)
   -------------------------------------------------------------------------- */
.vw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--vw-touch);
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--vw-r-sm);
  font-family: var(--vw-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.vw-btn:active {
  transform: translateY(1px);
}

.vw-btn svg {
  flex: 0 0 auto;
}

/* Solar primário — gatilho de conversão.
   ⚠️ Estes blocos usam `.vw-body .vw-btn--x` (especificidade 0,2,0) de
   propósito: o reset `.vw-body a { color: inherit }` tem 0,1,1 e venceria
   `.vw-btn--x` (0,1,0), apagando a cor do texto do botão. */
.vw-body .vw-btn--solar {
  background: var(--vw-solar);
  color: var(--vw-ink);
  box-shadow: 0 4px 14px rgba(254, 204, 0, 0.32);
}

.vw-body .vw-btn--solar:hover {
  background: var(--vw-solar-hover);
}

/* Clínico — ação verificada.
   O design system pede este botão com TEXTO BRANCO ("filled with #0284C7 with
   #FFFFFF text"). Texto escuro sobre o azul dava 3.57:1 e reprovava na WCAG
   (mínimo 4.5:1). Com #0066CC + branco sobe para 5.57:1. */
.vw-body .vw-btn--sky {
  background: var(--vw-sky-deep);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 102, 204, 0.24);
}

.vw-body .vw-btn--sky:hover {
  background: var(--vw-sky-darker);
}

/* Secundário / ghost */
.vw-body .vw-btn--ghost {
  background: var(--vw-surface);
  color: var(--vw-ink);
  border-color: var(--vw-border);
}

.vw-body .vw-btn--ghost:hover {
  background: var(--vw-subtle);
}

.vw-btn--block {
  width: 100%;
}

.vw-btn--sm {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  font-size: 13px;
}

.vw-btn-group {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
}

.vw-btn-group--center {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   6. Chips, badges e selos
   -------------------------------------------------------------------------- */
.vw-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 4px 10px;
  border-radius: var(--vw-r-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  background: var(--vw-subtle);
  color: var(--vw-ink-2);
  white-space: nowrap;
}

.vw-badge--ok {
  background: var(--vw-ok-bg);
  color: var(--vw-ok-ink);
}

.vw-badge--warn {
  background: var(--vw-warn-bg);
  color: var(--vw-warn-ink);
}

.vw-badge--alert {
  background: var(--vw-alert-bg);
  color: var(--vw-alert-ink);
}

.vw-badge--sky {
  background: var(--vw-sky-soft);
  color: var(--vw-sky-ink);
}

.vw-badge--solar {
  background: var(--vw-solar-soft);
  border: 1px solid var(--vw-solar-border);
  color: #6e5700;
}

.vw-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.vw-pill-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 6px 12px;
  border-radius: var(--vw-r-full);
  background: var(--vw-solar-soft);
  border: 1px solid var(--vw-solar-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6e5700;
}

.vw-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--vw-r-full);
  background: var(--vw-ok);
  flex: 0 0 auto;
}

.vw-dot--pulse {
  animation: vw-pulse 2s ease-in-out infinite;
}

@keyframes vw-pulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  }

  50% {
    opacity: 0.75;
    box-shadow: 0 0 0 6px rgba(22, 163, 74, 0);
  }
}

/* --------------------------------------------------------------------------
   7. Cartões
   -------------------------------------------------------------------------- */
.vw-card {
  background: var(--vw-surface);
  border-radius: var(--vw-r-lg);
  padding: 1.25rem;
  box-shadow: var(--vw-shadow-2);
}

.vw-card--flat {
  box-shadow: none;
  border: 1px solid var(--vw-border);
}

/* Cabeçalho do card com selo ao lado do título (ex.: "Em breve") */
.vw-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.vw-card--solar {
  background: var(--vw-solar-soft);
  border: 1px solid var(--vw-solar-border);
  box-shadow: none;
}

.vw-card--rail {
  position: relative;
  overflow: hidden;
  padding-left: 1.5rem;
}

/* Faixa clínica vertical: urgência do indicador */
.vw-card--rail::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--vw-ok);
}

.vw-card--rail.is-warn::before {
  background: var(--vw-warn);
}

.vw-card--rail.is-alert::before {
  background: var(--vw-alert);
}

.vw-card--rail.is-sky::before {
  background: var(--vw-sky);
}

.vw-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--vw-r-md);
  background: var(--vw-sky-soft);
  color: var(--vw-sky-deep);
  flex: 0 0 auto;
}

.vw-icon-tile--solar {
  background: var(--vw-solar-soft);
  color: var(--vw-solar-hover);
}

.vw-icon-tile--ok {
  background: var(--vw-ok-bg);
  color: var(--vw-ok);
}

.vw-icon-tile--warn {
  background: var(--vw-warn-bg);
  color: var(--vw-warn);
}

.vw-grid {
  display: grid;
  gap: 0.875rem;
}

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.vw-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vw-border);
}

.vw-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 64px;
}

.vw-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.vw-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--vw-r-md);
  background: var(--vw-solar);
  color: var(--vw-ink);
  flex: 0 0 auto;
}

/* Marca oficial (lp/assets/img/icon.png).
   O icon.png tem fundo transparente e traz a arte com o branco interno
   contornado por traço escuro + o dourado solar — sobre fundo branco o
   símbolo lê como adesivo (line-art), que é o resultado escolhido.
   Por isso o azulejo é branco puro e sem sombra: nada de caixa visível. */
.vw-logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: var(--vw-r-md);
  background: var(--vw-surface);
  overflow: hidden;
}

/* A arte traz respiro transparente em volta; 170% recorta essa sobra para
   o símbolo ocupar o azulejo sem ficar minúsculo.
   `max-width: none` é obrigatório: a regra global `.vw-body img`
   (max-width: 100%) travaria a largura em 42px e distorceria a marca. */
.vw-logo-tile .vw-logo-img {
  width: 170%;
  height: auto;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
}

.vw-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.vw-logo-name {
  font-family: var(--vw-font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--vw-ink);
  letter-spacing: -0.02em;
}

.vw-logo-sub {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vw-ink-muted);
}

.vw-nav {
  display: none;
  align-items: center;
  gap: 1.375rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--vw-ink-2);
}

.vw-nav a:hover {
  color: var(--vw-sky-deep);
}

.vw-header-cta {
  display: none;
}

/*
 * Par de CTAs do header (ex.: baixar o app + criar conta pelo navegador).
 * Mesmo momento de aparecimento do .vw-header-cta: só no desktop, onde o
 * header tem largura para os dois botões sem espremer a navegação.
 */
.vw-header-actions {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.vw-hero {
  display: grid;
  gap: 2rem;
  padding-block: 2.25rem 3rem;
}

.vw-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.vw-hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
}

/* No mobile os cartões de status ficam em fluxo, abaixo do aparelho:
   em tela estreita não existe espaço para sobrepor sem cobrir o print. */
.vw-hero-badges {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.vw-hero-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vw-ink-muted);
}

/* Shimmer enquanto o print real carrega */
.vw-phone-screen.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: vw-shimmer 1.4s linear infinite;
}

@keyframes vw-shimmer {
  0% {
    background-position: 140% 0;
  }

  100% {
    background-position: -40% 0;
  }
}

/* --------------------------------------------------------------------------
   10. Moldura de celular + prints reais
   -------------------------------------------------------------------------- */
.vw-phone {
  position: relative;
  width: 100%;
  max-width: 270px;
  margin-inline: auto;
  padding: 9px;
  border-radius: 2.25rem;
  /* Preto completo, sem gradiente acinzentado: o aro do aparelho é preto. */
  background: #000;
  box-shadow: var(--vw-shadow-4), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.vw-phone::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 5px;
  border-radius: var(--vw-r-full);
  background: rgba(255, 255, 255, 0.22);
  z-index: 2;
}

.vw-phone-screen {
  position: relative;
  border-radius: 1.75rem;
  overflow: hidden;
  background: var(--vw-subtle);
  aspect-ratio: 9 / 19.2;
}

.vw-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.vw-phone--sm {
  max-width: 190px;
  padding: 7px;
  border-radius: 1.75rem;
}

.vw-phone--sm .vw-phone-screen {
  border-radius: 1.35rem;
}

.vw-phone--sm::before {
  width: 46px;
  height: 4px;
  top: 11px;
}

.vw-phone-screen.is-loading {
  background: var(--vw-subtle);
}

/* Cartão de status do aparelho (em fluxo; vira flutuante no desktop) */
.vw-float-card {
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--vw-r-md);
  background: var(--vw-surface);
  box-shadow: var(--vw-shadow-4);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.vw-float-card .vw-float-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vw-ink-muted);
}

.vw-float-card .vw-float-value {
  font-family: var(--vw-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--vw-ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. Carrossel de telas (scroll-snap nativo, sem JS)
   -------------------------------------------------------------------------- */
.vw-rail {
  display: flex;
  gap: 0.875rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem var(--vw-margin) 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.vw-rail::-webkit-scrollbar {
  display: none;
}

.vw-rail > figure {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 240px;
  max-width: 74vw;
}

/* Só mostra a "mãozinha" quando o trilho realmente rola: no desktop ele
   vira grade (sem overflow) e o cursor de arraste seria mentira. */
.vw-rail.can-drag {
  cursor: grab;
}

/* Além do `dragstart` bloqueado no JS, desliga o arraste nativo das imagens:
   sem isso o navegador inicia o drag-and-drop de HTML5 e cancela o gesto. */
.vw-rail.can-drag img {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

.vw-rail.can-drag.is-dragging {
  cursor: grabbing;
  /* scroll-snap obrigatório briga com o arraste por ponteiro: a cada
     frame o navegador puxa o scroll de volta. Desligar durante o arraste
     mantém o gesto fluido; ao soltar, o snap alinha o card. */
  scroll-snap-type: none;
  user-select: none;
}

/* Controles do carrossel (JS adiciona o comportamento).
   Sem JS ficam ocultos: melhor não mostrar botão que não funciona. */
.vw-rail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
  /* alinha com o container, já que o trilho acima é full-bleed */
  max-width: var(--vw-max);
  margin-inline: auto;
  padding-inline: var(--vw-margin);
}

.vw-rail-nav[hidden] {
  display: none;
}

.vw-rail-nav-buttons {
  display: flex;
  gap: 0.5rem;
}

.vw-rail-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vw-touch);
  height: var(--vw-touch);
  flex: 0 0 auto;
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-r-full);
  background: var(--vw-surface);
  color: var(--vw-ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vw-rail-nav-btn:hover:not(:disabled) {
  background: var(--vw-sky);
  border-color: var(--vw-sky);
  color: #fff;
}

.vw-rail-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.vw-rail-nav-btn svg {
  width: 18px;
  height: 18px;
}

.vw-rail-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--vw-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* A dica some no desktop porque lá a grade mostra tudo de uma vez
   (e a barra de controles assume o papel no tablet). */
.vw-rail-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vw-ink-muted);
}

.vw-rail-hint svg {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   12. Lista de recursos com checagem
   -------------------------------------------------------------------------- */
.vw-check-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.vw-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 14px;
  line-height: 21px;
  color: var(--vw-ink-2);
}

.vw-check-list svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--vw-ok);
}

.vw-check-list--sky svg {
  color: var(--vw-sky);
}

/* --------------------------------------------------------------------------
   13. Comparativo app x navegador
   -------------------------------------------------------------------------- */
.vw-compare {
  display: grid;
  gap: 0.875rem;
}

.vw-compare-col {
  border-radius: var(--vw-r-lg);
  padding: 1.25rem;
  background: var(--vw-surface);
  box-shadow: var(--vw-shadow-2);
}

.vw-compare-col--win {
  background: var(--vw-surface);
  box-shadow: var(--vw-shadow-3);
  border: 1.5px solid var(--vw-solar-border);
}

.vw-compare-col--lose {
  background: var(--vw-subtle);
  box-shadow: none;
}

.vw-compare-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.875rem;
}

.vw-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding-block: 0.4rem;
  font-size: 14px;
  line-height: 20px;
  color: var(--vw-ink-2);
}

.vw-compare-list svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.vw-compare-list .is-yes svg {
  color: var(--vw-ok);
}

.vw-compare-list .is-no svg {
  color: var(--vw-ink-muted);
}

.vw-compare-col--lose .vw-compare-list li {
  color: var(--vw-ink-muted);
}

/* --------------------------------------------------------------------------
   14. Passos numerados
   -------------------------------------------------------------------------- */
.vw-steps {
  display: grid;
  gap: 0.75rem;
  counter-reset: vw-step;
}

.vw-step {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  background: var(--vw-surface);
  border-radius: var(--vw-r-md);
  padding: 1rem;
  box-shadow: var(--vw-shadow-1);
}

.vw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--vw-r-full);
  background: var(--vw-solar);
  color: var(--vw-ink);
  font-family: var(--vw-font-display);
  font-size: 14px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   15. FAQ (details/summary — acessível e sem JS)
   -------------------------------------------------------------------------- */
.vw-faq {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vw-faq-item {
  background: var(--vw-surface);
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-r-md);
  overflow: hidden;
}

.vw-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--vw-touch);
  padding: 0.875rem 1rem;
  font-family: var(--vw-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--vw-ink);
  cursor: pointer;
  list-style: none;
}

.vw-faq-item summary::-webkit-details-marker {
  display: none;
}

.vw-faq-item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--vw-sky);
  border-bottom: 2px solid var(--vw-sky);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.vw-faq-item[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.vw-faq-item[open] summary {
  color: var(--vw-sky-deep);
}

.vw-faq-body {
  padding: 0 1rem 1rem;
  font-size: 14px;
  line-height: 22px;
  color: var(--vw-ink-2);
}

.vw-faq-body p+p {
  margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   16. Plano, preço e promoção (conteúdo vem do endpoint — REGRA 06-B)
   -------------------------------------------------------------------------- */
.vw-plano {
  display: grid;
  gap: 1.25rem;
}

.vw-plano-card {
  background: var(--vw-surface);
  border-radius: var(--vw-r-lg);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--vw-shadow-3);
}

/* A borda solar marca o card quando há promoção vigente. */
.vw-plano-card.is-promo {
  border: 1.5px solid var(--vw-solar-border);
}

.vw-plano-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.vw-plano-nome {
  font-family: var(--vw-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--vw-ink);
}

.vw-plano-desc {
  margin-top: 0.35rem;
  font-size: 14px;
  line-height: 21px;
  color: var(--vw-ink-2);
}

/* Bloco de preço */
.vw-preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 1.25rem;
}

.vw-preco-valor {
  font-family: var(--vw-font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--vw-ink);
}

.vw-preco-de {
  font-size: 15px;
  color: var(--vw-ink-muted);
  text-decoration: line-through;
}

.vw-preco-ciclo {
  font-size: 14px;
  color: var(--vw-ink-muted);
}

.vw-preco-prazo {
  margin-top: 0.4rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vw-warn-ink);
}

/* Lista de limites do plano (ordem do admin — não reordenar) */
.vw-plano-recursos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vw-border);
}

.vw-plano-recursos li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 14px;
  line-height: 21px;
  color: var(--vw-ink-2);
}

.vw-plano-recursos svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--vw-sky);
}

.vw-plano-cta {
  margin-top: 1.5rem;
}

/* Selo de teste grátis, quando periodo_teste_dias > 0.
   Barra de estado dentro do card/CTA: precisa de respiro em relação ao que
   vem acima (o bloco de botões) e de área de toque confortável. */
.vw-trial {
  display: none;
}

.vw-trial-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--vw-r-sm);
  background: var(--vw-ok-bg);
  color: var(--vw-ok-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.vw-trial-ok svg {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   17. CTA final + barra fixa
   -------------------------------------------------------------------------- */
.vw-cta-final {
  border-radius: var(--vw-r-xl);
  padding: 1.75rem 1.25rem;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(254, 204, 0, 0.28) 0%, rgba(254, 204, 0, 0) 60%),
    var(--vw-surface);
  box-shadow: var(--vw-shadow-3);
  text-align: center;
}

.vw-sticky-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--vw-border);
  padding: 0.6rem var(--vw-margin) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px -8px rgba(30, 41, 59, 0.12);
}

.vw-sticky-inner {
  display: flex;
  gap: 0.5rem;
  max-width: var(--vw-max);
  margin-inline: auto;
}

.vw-sticky-inner .vw-btn {
  flex: 1 1 0;
  /* A barra fixa é o CTA principal no celular: área de toque cheia (48px) */
  min-height: var(--vw-touch);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   18. Rodapé
   -------------------------------------------------------------------------- */
.vw-footer {
  background: var(--vw-surface);
  border-top: 1px solid var(--vw-border);
  padding-block: 2rem 2.25rem;
}

.vw-footer-grid {
  display: grid;
  gap: 1.5rem;
}

.vw-footer h4 {
  margin-bottom: 0.625rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vw-ink-muted);
}

.vw-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 14px;
  color: var(--vw-ink-2);
}

.vw-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
}

.vw-footer-links svg {
  flex: 0 0 auto;
  color: var(--vw-ink-muted);
}

.vw-footer-links a:hover svg {
  color: var(--vw-sky-deep);
}

.vw-footer-links a:hover {
  color: var(--vw-sky-deep);
}

.vw-footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vw-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Documentos legais (Privacidade, Termos, Exclusão de conta).
   Ficam em linha no rodapé: são leitura de apoio, não navegação principal. */
.vw-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 13px;
  line-height: 20px;
  color: var(--vw-ink-muted);
}

.vw-footer-legal a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  text-decoration: underline;
  text-decoration-color: var(--vw-border);
  text-underline-offset: 3px;
}

.vw-footer-legal a:hover {
  color: var(--vw-sky-deep);
  text-decoration-color: currentColor;
}

.vw-footer-legal svg {
  flex: 0 0 auto;
  color: var(--vw-ink-muted);
}

.vw-footer-legal a:hover svg {
  color: var(--vw-sky-deep);
}

/* --------------------------------------------------------------------------
   19. Utilidades
   -------------------------------------------------------------------------- */
/* Aviso de indisponibilidade dos canais oficiais (REGRA 01).
   Só aparece quando o endpoint responde com erro — nunca inventamos link. */
.vw-channel-error {
  display: none;
}

html[data-vw-state="error"] .vw-channel-error {
  display: block;
}

.vw-hide {
  display: none !important;
}

.vw-text-muted {
  color: var(--vw-ink-muted);
}

.vw-text-ok {
  color: var(--vw-ok);
}

.vw-text-sky {
  color: var(--vw-sky);
}

.vw-mt-sm {
  margin-top: 0.5rem;
}

.vw-mt-md {
  margin-top: 1rem;
}

.vw-mt-lg {
  margin-top: 1.5rem;
}

.vw-mb-md {
  margin-bottom: 1rem;
}

.vw-inline-icon {
  display: inline-block;
  vertical-align: -0.15em;
  margin-inline: 0.12em;
  color: var(--vw-ink-muted);
}

.vw-divider {
  height: 1px;
  background: var(--vw-border);
  border: 0;
  margin-block: 1.5rem;
}

/* --------------------------------------------------------------------------
   20. Tablet >= 640px
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  :root {
    --vw-margin: 1.5rem;
  }

  .vw-section {
    padding-block: 4rem;
  }

  .vw-h1 {
    font-size: 40px;
    line-height: 48px;
  }

  .vw-h2 {
    font-size: 30px;
    line-height: 38px;
  }

  .vw-btn-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .vw-btn-group .vw-btn {
    flex: 0 1 auto;
    min-width: 190px;
  }

  .vw-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vw-phone {
    max-width: 300px;
  }

  .vw-phone--sm {
    max-width: 210px;
  }

  .vw-compare,
  .vw-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Plano + limites lado a lado; o card do plano não estica demais. */
  .vw-plano {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
  }

  .vw-plano-card {
    padding: 2rem 1.75rem;
  }

  .vw-cta-final {
    padding: 2.5rem 2rem;
  }

  .vw-footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .vw-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   21. Desktop >= 900px
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  :root {
    --vw-margin: 2rem;
  }

  body.vw-body {
    padding-bottom: 0;
  }

  .vw-nav {
    display: flex;
  }

  .vw-header-cta {
    display: inline-flex;
  }

  .vw-header-actions {
    display: inline-flex;
  }

  .vw-sticky-bar {
    display: none;
  }

  .vw-h1 {
    font-size: 44px;
    line-height: 52px;
    letter-spacing: -0.02em;
  }

  .vw-hero {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 3rem;
    padding-block: 3.5rem 4.5rem;
  }

  /* Com coluna larga, os cartões voltam a flutuar sobre a moldura */
  .vw-hero-badges {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    pointer-events: none;
  }

  .vw-float-card {
    position: absolute;
    max-width: 240px;
  }

  .vw-float--tl {
    top: 8%;
    left: -9%;
  }

  .vw-float--br {
    bottom: 11%;
    right: -4%;
  }

  .vw-rail > figure {
    width: auto;
  }

  .vw-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vw-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .vw-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
    overflow: visible;
    /* Fora do mobile o carrossel vira grade: passa a respeitar o container
       para alinhar com o cabeçalho da seção. */
    max-width: var(--vw-max);
    margin-inline: auto;
    padding: 0 var(--vw-margin);
  }

  .vw-rail-hint {
    display: none;
  }

  /* No desktop o trilho é grade e mostra tudo: sem botões nem contador */
  .vw-rail-nav {
    display: none;
  }

  .vw-rail .vw-phone {
    max-width: 100%;
  }
}

@media (min-width: 1100px) {
  .vw-grid--4-lg {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   22. Acessibilidade — movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .vw-body *,
  .vw-body *::before,
  .vw-body *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .vw-skeleton {
    background: var(--vw-subtle);
  }
}