/* ============================================================================
   SHIRO — DESIGN TOKENS
   Origem única de cor, tipografia, forma, sombra e movimento do projeto.
   Trocar um valor aqui muda todo componente que herda o token: nenhum
   componente deve declarar cor ou fonte própria.

   Os tokens de cor são triplas R G B (não hex) porque o Tailwind precisa
   injetar o canal alfa: `rgb(var(--foreground) / <alpha-value>)` é o que
   faz `bg-foreground/5` e `hover:border-foreground/20` funcionarem.
   O hex correspondente está no comentário de cada linha.
   Ver assets/shiro-tailwind.js para o mapeamento token -> classe utilitária.
   ========================================================================= */

:root {
  /* --- Superfícies ------------------------------------------------------ */
  --background: 250 249 246;        /* #FAF9F6 — papel Washi, off-white fosco */
  --card: 255 255 255;              /* #FFFFFF — sempre com 1px solid --border */
  --popover: 255 255 255;           /* #FFFFFF */

  /* --- Tinta ------------------------------------------------------------ */
  --foreground: 17 17 17;           /* #111111 — Sumi Ink, cor dominante da marca */
  --primary: 17 17 17;              /* #111111 */
  --primary-foreground: 250 249 246;/* #FAF9F6 — texto sobre o botão primário */
  --card-foreground: 17 17 17;      /* #111111 */
  --popover-foreground: 17 17 17;   /* #111111 */
  --muted-foreground: 110 110 115;  /* #6E6E73 — secundário, label, legenda */

  /* --- Fundos sutis ----------------------------------------------------- */
  --secondary: 242 242 247;         /* #F2F2F7 */
  --muted: 242 242 247;             /* #F2F2F7 */
  --accent: 242 242 247;            /* #F2F2F7 — o "accent" é cinza, não é cor */
  --secondary-foreground: 17 17 17; /* #111111 */
  --accent-foreground: 17 17 17;    /* #111111 */

  /* --- Traço ------------------------------------------------------------ */
  --border: 229 229 234;            /* #E5E5EA — todas as bordas */
  --input: 229 229 234;             /* #E5E5EA */
  --ring: 17 17 17;                 /* #111111 — foco */

  /* --- Erro ------------------------------------------------------------- */
  /* Hanko Red. EXCLUSIVO para erro e ação irreversível. Não usar como
     accent, CTA, badge, gráfico ou ícone decorativo. */
  --destructive: 217 56 30;         /* #D9381E */
  --destructive-foreground: 250 249 246; /* #FAF9F6 */

  /* --- Veredito do comparativo ------------------------------------------ */
  /* Unica cor por significado da pagina, e SO na tabela comparativa: verde =
     o criterio e atendido, vermelho = nao e. Fora dali a marca segue
     monocromatica — nao usar como accent, badge ou grafico. */
  --positive: 21 127 61;            /* #157F3D */
  --negative: 192 52 28;            /* #C0341C */

  /* --- Escala de gráfico / ilustração ----------------------------------- */
  /* Tinta e cinza. Nunca colorido por categoria. */
  --ink-900: 17 17 17;              /* #111111 */
  --ink-700: 82 82 91;              /* #52525B */
  --ink-500: 113 113 122;           /* #71717A */
  --ink-300: 161 161 170;           /* #A1A1AA */
  --ink-100: 212 212 216;           /* #D4D4D8 */

  /* --- Tipografia ------------------------------------------------------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Raio (escala com o tamanho do elemento) -------------------------- */
  --radius-pill: 9999px;            /* badge, chip */
  --radius-md: 0.75rem;             /* 12px — botão, item de nav */
  --radius-lg: 1rem;                /* 16px — botão grande, moldura de janela */
  --radius-xl: 1.5rem;              /* 24px — card e painel grande (bento) */
}

/* Dark mode opcional: escala neutra, sem matiz. Mesma regra — nada colorido
   além do --destructive. A landing roda em tema claro; a classe existe para
   quem reaproveitar estes tokens em outro contexto. */
.dark {
  --background: 10 10 10;           /* #0A0A0A */
  --card: 23 23 23;                 /* #171717 */
  --popover: 23 23 23;              /* #171717 */
  --foreground: 250 249 246;        /* #FAF9F6 */
  --primary: 250 249 246;           /* #FAF9F6 */
  --primary-foreground: 17 17 17;   /* #111111 */
  --card-foreground: 250 249 246;
  --popover-foreground: 250 249 246;
  --muted-foreground: 161 161 170;  /* #A1A1AA */
  --secondary: 38 38 38;            /* #262626 */
  --muted: 38 38 38;                /* #262626 */
  --accent: 38 38 38;               /* #262626 */
  --secondary-foreground: 250 249 246;
  --accent-foreground: 250 249 246;
  --border: 55 55 55;               /* #373737 */
  --input: 55 55 55;
  --ring: 250 249 246;
  --destructive: 217 56 30;         /* #D9381E */
  --positive: 74 190 122;           /* #4ABE7A — clareado para o fundo #0A0A0A */
  --negative: 255 122 96;           /* #FF7A60 — clareado para o fundo #0A0A0A */
  --ink-900: 250 249 246;
  --ink-700: 212 212 216;
  --ink-500: 161 161 170;
  --ink-300: 113 113 122;
  --ink-100: 63 63 70;
}

/* ============================================================================
   BASE
   ========================================================================= */

/* Escala de densidade normal — o html { font-size: 137% } do dashboard do
   produto é ajuste de painel, não de landing. */
html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  font-weight: 500;                 /* font-medium é o peso padrão de UI */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: rgb(var(--foreground) / 0.12);
  color: rgb(var(--foreground));
}

/* Foco visível em tinta, usando --ring */
:focus-visible {
  outline: 2px solid rgb(var(--ring));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Âncora não passa por baixo do header fixo */
[id] { scroll-margin-top: 6rem; }

/* ============================================================================
   SOMBRA EM CAMADAS
   Uso seletivo: hero, mockup do painel, card de preço, coluna do Shiro na
   tabela. Não em todo card.
   ========================================================================= */

.shadow-shiro {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .06),
    0 4px 4px rgba(0, 0, 0, .06), 0 8px 8px rgba(0, 0, 0, .06),
    0 16px 16px rgba(0, 0, 0, .06), 0 32px 32px rgba(0, 0, 0, .06);
}

/* ============================================================================
   MOVIMENTO — reveal na entrada da seção (IntersectionObserver no HTML)
   ========================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .6s cubic-bezier(.16, 1, .3, 1),
    transform .6s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Atraso em cascata para grade de cards */
.reveal-d1 { transition-delay: .06s; }
.reveal-d2 { transition-delay: .12s; }
.reveal-d3 { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   COMPONENTES
   Receitas repetidas da marca, escritas uma vez e sempre a partir dos tokens.
   Componente algum declara hex: só rgb(var(--token)).
   ========================================================================= */

/* --- Eyebrow: rótulo acima do título de cada seção ---------------------- */
.eyebrow {
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Rotulo pede tinta mais densa que o texto corrido: em 11px caixa alta o
     --muted-foreground desaparece contra o papel. */
  color: rgb(var(--ink-700));
}

/* --- Botões ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1.2;
  padding: .875rem 1.375rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn-primary {
  background-color: rgb(var(--primary));
  color: rgb(var(--primary-foreground));
}
.btn-primary:hover {
  background-color: rgb(var(--primary) / .88);
  transform: translateY(-1px);
}
.btn-ghost {
  background-color: transparent;
  color: rgb(var(--foreground));
  border-color: rgb(var(--border));
}
.btn-ghost:hover {
  background-color: rgb(var(--secondary));
  border-color: rgb(var(--foreground) / .2);
}
.btn-lg { padding: 1.0625rem 1.75rem; font-size: 1rem; border-radius: var(--radius-lg); }

/* --- Card: superfície elevada padrão ------------------------------------ */
.card-shiro {
  background-color: rgb(var(--card));
  color: rgb(var(--card-foreground));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-xl);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
/* Hover uniforme: se um card do nível recebe o efeito, todos recebem */
.card-shiro:hover {
  border-color: rgb(var(--foreground) / .2);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .06),
    0 4px 4px rgba(0, 0, 0, .06), 0 8px 8px rgba(0, 0, 0, .06),
    0 16px 16px rgba(0, 0, 0, .06), 0 32px 32px rgba(0, 0, 0, .06);
}

/* --- Card da virada: superfície escura solta ----------------------------- */
/* Vive dentro de um subtree .dark, então os tokens já vêm invertidos: --background
   é o preto do card e --foreground, o off-white do texto. A elevação no hover usa
   sombra preta porque o card repousa sobre o bg-secondary claro da seção. */
.card-virada {
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-xl);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.card-virada:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--foreground) / .28);
  box-shadow:
    0 10px 20px -8px rgba(10, 10, 10, .28),
    0 24px 48px -16px rgba(10, 10, 10, .30);
}
.card-virada .virada-num { transition: transform .25s; }
.card-virada:hover .virada-num { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .card-virada,
  .card-virada .virada-num { transition: none; }
  .card-virada:hover,
  .card-virada:hover .virada-num { transform: none; }
}

/* --- Cabecalho da coluna em destaque do comparativo ---------------------- */
/* A moldura da coluna do Shiro (inset-y-1) sobra 24px acima do topo da tabela
   (py-7), entao um background no <th> comeca abaixo dessa sobra e deixa a
   tampa branca do print. O ::before sobe ate a borda interna da moldura
   (24px de sobra - 1px de borda) e repete o raio dela por dentro, para nao
   cobrir o contorno preto. O texto do <th> vai num <span class="relative">
   porque elemento posicionado pinta depois do conteudo em fluxo. */
.th-destaque { position: relative; }
.th-destaque::before {
  content: "";
  position: absolute;
  top: -23px;
  right: 1px;
  bottom: 0;
  left: 1px;
  border-radius: 23px 23px 0 0;
  background-color: rgb(var(--foreground) / .06);
}

/* --- Seletor de concorrente do comparativo (so no mobile) --------------- */
/* Controle segmentado: duas opcoes, uma ativa. Mesma linguagem do .chip
   (pilula, borda --border, fundo --secondary), em tamanho de alvo de toque. */
.comparativo-seletor { display: none; }
.comparativo-seletor-rotulo {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--muted-foreground));
  margin-bottom: .625rem;
}
.seg {
  display: flex;
  gap: .375rem;
  padding: .25rem;
  border-radius: var(--radius-pill);
  background-color: rgb(var(--secondary));
  border: 1px solid rgb(var(--border));
}
.seg-btn {
  flex: 1 1 0;
  min-height: 2.75rem;              /* alvo de toque confortavel */
  padding: .5rem .75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: rgb(var(--muted-foreground));
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.seg-btn.is-ativo {
  background-color: rgb(var(--card));
  color: rgb(var(--foreground));
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(17 17 17 / .08);
}

/* ============================================================================
   COMPARATIVO NO MOBILE
   Abaixo de 900px a tabela nao cabe como grade: 342px uteis divididos por
   quatro colunas dariam ~85px cada, quebrando palavra no meio. Aqui ela para
   de ser grade e cada linha vira um bloco — o criterio ocupa a largura toda,
   como titulo, e as duas respostas comparadas ficam lado a lado embaixo.
   O HTML nao muda: continua <table> com scope="row"/"col", entao leitor de
   tela e busca seguem lendo a mesma tabela. O corte em 900px (e nao no md
   de 768px) e o ponto em que a tabela de 820px + padding deixa de caber:
   assim nao sobra nenhuma faixa de largura com rolagem lateral.
   ========================================================================= */
@media (max-width: 899px) {

  .comparativo-seletor { display: block; }

  /* Sem rolagem lateral o overflow pode voltar a visible — e precisa, senao
     o container de scroll captura o position:sticky do cabecalho.
     O #comparativo na frente nao e enfeite: o Tailwind e injetado por script
     depois desta folha, entao .comparativo-scroll sozinho perderia de
     .overflow-x-auto e .min-w-[820px] no desempate por ordem. */
  #comparativo .comparativo-scroll { overflow: visible; }
  #comparativo .comparativo-quadro { min-width: 0; padding: 0; }
  /* As duas camadas decorativas sao posicionadas pela geometria de quatro
     colunas (left:28%, w:24%); fora dela nao significam nada. O contorno do
     cartao passa a ser da propria tabela. */
  #comparativo .deco-tabela { display: none; }

  #comparativo table {
    display: block;
    border: 1px solid rgb(var(--border));
    border-radius: var(--radius-xl);
    background-color: rgb(var(--card));
  }
  #comparativo thead, #comparativo tbody { display: block; }
  #comparativo thead tr, #comparativo tbody tr { display: flex; flex-wrap: wrap; }

  /* Cabecalho gruda abaixo do header do site (66,6px) para o visitante nao
     perder de vista qual coluna e qual ao longo das oito linhas. */
  #comparativo thead tr {
    position: sticky;
    top: 67px;
    z-index: 5;
    background-color: rgb(var(--secondary));
    border-bottom: 1px solid rgb(var(--border));
    border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0;
  }
  /* Os fundos arredondados do desktop vinham de ::before desenhados para a
     grade de quatro colunas. */
  #comparativo .th-faixa::before,
  #comparativo .th-destaque::before { display: none; }
  #comparativo thead th {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    padding: .875rem 1rem;
    font-size: 15px;
    border-bottom: 0;
    /* No desktop cada celula pinta a propria faixa; aqui o fundo e um so,
       do <tr>, senao a coluna do meio fica um tom mais escura que as outras. */
    background-color: transparent;
  }
  /* O criterio nao e mais coluna: vira titulo de cada linha, no corpo. */
  #comparativo thead th:first-child { display: none; }
  /* Marca a coluna do Shiro, que no desktop era o cartao com moldura. */
  #comparativo thead th:nth-child(2) { position: relative; }
  #comparativo thead th:nth-child(2)::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -1px;
    height: 2px;
    background-color: rgb(var(--foreground));
  }

  #comparativo tbody tr {
    padding: 1rem 1rem 1.125rem;
    gap: 0 1rem;
  }
  #comparativo tbody th[scope="row"] {
    display: block;
    width: 100%;
    padding: 0 0 .625rem;
    font-size: 15px;
  }
  #comparativo tbody td {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    font-size: 14px;
  }

  /* Qual concorrente aparece. Por padrao o SaaS (3a coluna); com
     .mostra-zero a 4a entra no lugar dela. As posicoes no DOM nao mudam,
     entao nth-child continua valendo com qualquer uma escondida. */
  #comparativo th:nth-child(4),
  #comparativo td:nth-child(4) { display: none; }
  #comparativo table.mostra-zero th:nth-child(3),
  #comparativo table.mostra-zero td:nth-child(3) { display: none; }
  #comparativo table.mostra-zero thead th:nth-child(4) { display: block; }
  #comparativo table.mostra-zero tbody td:nth-child(4) { display: block; flex: 1 1 0; }
}

/* --- Cantos da faixa de cabecalho do comparativo ------------------------ */
/* A tabela fica por cima de um cartao rounded-3xl, entao a faixa da primeira
   e da ultima coluna precisa acompanhar o canto arredondado — senao ela
   avanca em angulo reto sobre a curva. border-radius e ignorado em celula de
   tabela sob border-collapse: collapse, por isso o fundo vai num ::before,
   que arredonda normalmente. O texto do <th> vai num <span class="relative">
   porque elemento posicionado pinta depois do conteudo em fluxo. */
.th-faixa { position: relative; }
.th-faixa::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(var(--foreground) / .06);
}
.th-faixa-esq::before { border-radius: var(--radius-xl) 0 0 0; }
.th-faixa-dir::before { border-radius: 0 var(--radius-xl) 0 0; }

/* --- Veredito do comparativo: check verde / x vermelho ------------------ */
/* Unico ponto colorido da landing. O icone e redundante com o texto da
   celula (aria-hidden), entao a cor nao carrega informacao sozinha. */
.mark-sim { color: rgb(var(--positive)); }
.mark-nao { color: rgb(var(--negative)); }

/* --- Badge de ícone monocromático --------------------------------------- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--radius-md);
  background-color: rgb(var(--foreground) / .05);
  border: 1px solid rgb(var(--foreground) / .1);
  color: rgb(var(--foreground));
}

/* --- Chip / pill -------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: var(--radius-pill);
  background-color: rgb(var(--secondary));
  border: 1px solid rgb(var(--border));
  font-size: .75rem;
  font-weight: 500;
  color: rgb(var(--muted-foreground));
}

/* --- Moldura de janela (macOS/Arc) — só no hero e na galeria de produto -- */
.win {
  border-radius: var(--radius-lg);
  border: 1px solid rgb(var(--border));
  background-color: rgb(var(--card));
  overflow: hidden;
}
.win-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .875rem;
  border-bottom: 1px solid rgb(var(--border));
  background-color: rgb(var(--secondary));
  min-width: 0; /* deixa a rota encolher em vez de alargar a janela */
}
.win-dots { display: flex; gap: 6px; flex: none; }
.win-dots i {
  width: 11px; height: 11px; border-radius: 9999px; display: block;
}
/* Traffic lights: cor de sistema operacional, não da paleta da marca */
.win-dots i:nth-child(1) { background: #FF5F56; }
.win-dots i:nth-child(2) { background: #FFBD2E; }
.win-dots i:nth-child(3) { background: #27C93F; }
/* A rota trunca com reticências: sem min-width: 0 o item flex se recusa a
   encolher e a janela inteira estoura a largura da tela no celular. */
.win-route {
  font-family: var(--font-mono);
  font-size: 11px;
  /* Cromo de janela. Fica sobre a barra --secondary, onde --ink-500 cai para
     4.33:1 e reprova no AA: aqui o degrau mais claro nao cabe. */
  color: rgb(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Glassmorphism: exclusivo do hero (header sobre o hero) -------------- */
.glass {
  background-color: rgb(var(--background) / .72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgb(var(--border) / .8);
}

/* --- Accordion nativo (<details>) --------------------------------------- */
.acc summary { list-style: none; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .acc-icon { transition: transform .25s ease; }
.acc[open] summary .acc-icon { transform: rotate(45deg); }

/* --- Passos "como funciona": acordeao que comanda a tela ao lado --------- */
/* A regua entre os itens e a unica moldura: card dentro de card brigaria com
   a janela .win que fica do lado direito. */
.passo { border-top: 1px solid rgb(var(--border)); }
.passo:last-child { border-bottom: 1px solid rgb(var(--border)); }

/* Numero e titulo acendem juntos: fechado fica em tinta fraca, aberto (ou sob
   o cursor) sobe para o preto do texto. E o unico sinal de "voce esta aqui" —
   nao existe fundo de item ativo na paleta. */
.passo .passo-num { color: rgb(var(--ink-300)); transition: color .25s; }
.passo .passo-titulo { color: rgb(var(--ink-700)); transition: color .25s; }
.passo details[open] .passo-num,
.passo summary:hover .passo-num { color: rgb(var(--foreground)); }
.passo details[open] .passo-titulo,
.passo summary:hover .passo-titulo { color: rgb(var(--foreground)); }

/* O passo aberto nao fecha — se fechasse, a janela ao lado ficaria vazia. Por
   isso o "+" some ao abrir em vez de virar "x": um "x" no titulo aberto
   prometeria um clique que nao existe. visibility (e nao display) mantem a
   coluna do icone reservada, senao a linha aberta pularia de largura. */
.passo details[open] .acc-icon { visibility: hidden; }
/* Sem acao possivel, sem mao de clique. */
.passo details[open] > summary { cursor: default; }

/* --- Carrossel: trilho com scroll-snap nativo --------------------------- */
/* Sem biblioteca. O arrasto por toque e o scroll do trackpad sao os do
   proprio navegador; os botoes e os pontos so empurram o scrollLeft. */
.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* offsetLeft dos slides passa a ser relativo ao trilho: e a coordenada
     exata para onde rolar, sem depender de calculo de largura. */
  position: relative;
  /* A sombra do .card-shiro:hover vaza para fora da borda do card; sem esta
     folga o overflow-x recorta a sombra dos slides. */
  padding: .25rem 0 1.25rem;
  margin: -.25rem 0 -1.25rem;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* Edge legado */
  /* O html tem scroll-behavior: smooth. Aqui precisa ser instantaneo: o
     arrasto escreve scrollLeft quadro a quadro e animar cada escrita faz o
     card "nadar" atras do cursor. Rolagem suave so via scrollTo({behavior}). */
  scroll-behavior: auto;
  cursor: grab;
}
.carousel-track.is-dragging {
  cursor: grabbing;
  /* Sem isto o arrasto seleciona o texto dos cards no caminho. */
  user-select: none;
  -webkit-user-select: none;
}
/* Enquanto arrasta, o snap obrigatorio e desligado pelo JS; sem esta regra
   o cursor de "mao aberta" continuaria sobre as linhas clicaveis. */
.carousel-track.is-dragging .acc summary { cursor: grabbing; }
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
  /* 1 por vez no celular, com o proximo card espiando: a borda cortada e o
     que avisa que da para arrastar. 2 por vez a partir de lg. */
  width: 86%;
}
@media (min-width: 768px) { .carousel-slide { width: calc(50% - .5rem); } }

/* --- Cabecalho do card: um degrau de fundo separa titulo de conteudo ----- */
.card-head {
  /* Um degrau abaixo do --secondary (#F2F2F7), pela mesma tecnica do
     .icon-badge: densidade de tinta, nao um cinza novo fora da paleta.
     Fica em ~#EEE — escuro o bastante para separar, e ainda mais claro que
     o --border (#E5E5EA), senao a linha divisoria some contra o fundo. */
  background-color: rgb(var(--foreground) / .07);
}
/* Sobre o cinza do cabecalho o badge precisaria de outro cinza por cima:
   volta ao branco do card para nao virar bloco sobre bloco. */
.card-head .icon-badge {
  background-color: rgb(var(--card));
}

/* --- Controles do carrossel --------------------------------------------- */
.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--border));
  background-color: rgb(var(--card));
  color: rgb(var(--foreground));
  cursor: pointer;
  transition: border-color .2s, background-color .2s, opacity .2s;
}
.carousel-btn:hover:not(:disabled) {
  border-color: rgb(var(--foreground) / .2);
  background-color: rgb(var(--secondary));
}
.carousel-btn:disabled { opacity: .35; cursor: default; }

/* Ponto: alvo de toque de 24px com o traco visivel de 6px no meio. */
.carousel-dot {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.carousel-dot::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: rgb(var(--ink-100));
  transition: background-color .25s, width .25s;
}
.carousel-dot[aria-current="true"]::before {
  width: 20px;
  background-color: rgb(var(--foreground));
}

/* ============================================================================
   COMPONENTES DA LANDING DE CONSULTORIA
   Mesma regra do resto do arquivo: nada de hex, so tokens. A marca segue
   monocromatica, entao o "destaque" da copy nao e uma cor nova: e tinta cheia
   com um marca-texto na densidade de tinta, igual ao .icon-badge.
   ========================================================================= */

/* --- Destaque: trecho que a copy marca como accent ---------------------- */
.destaque {
  color: rgb(var(--foreground));
  font-weight: 600;
  background-image: linear-gradient(transparent 60%, rgb(var(--foreground) / .12) 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
a.destaque { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a.destaque:hover { background-image: linear-gradient(transparent 60%, rgb(var(--foreground) / .2) 60%); }

/* --- Campo de formulario ------------------------------------------------ */
/* Funciona no claro (calculadora) e dentro de um subtree .dark (formulario):
   os tokens ja chegam invertidos. */
.field {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgb(var(--foreground));
  background-color: rgb(var(--card));
  border: 1px solid rgb(var(--input));
  border-radius: var(--radius-md);
  padding: .75rem .875rem;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: rgb(var(--muted-foreground)); opacity: 1; font-weight: 400; }
.field:hover { border-color: rgb(var(--foreground) / .3); }
.field:focus { outline: none; border-color: rgb(var(--ring)); box-shadow: 0 0 0 3px rgb(var(--ring) / .12); }
.field[aria-invalid="true"] { border-color: rgb(var(--destructive)); box-shadow: 0 0 0 3px rgb(var(--destructive) / .15); }
select.field {
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, rgb(var(--muted-foreground)) 50%),
                    linear-gradient(135deg, rgb(var(--muted-foreground)) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - .85rem) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: .45rem; color: rgb(var(--foreground)); }

/* Honeypot: fora da tela, mas nao display:none (alguns robos pulam esses) */
.honey { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* --- Botao flutuante de Whatsapp ---------------------------------------- */
.wa-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  border-radius: var(--radius-pill);
  padding: .875rem;
  box-shadow: 0 8px 24px -6px rgba(10, 10, 10, .35);
}
@media (min-width: 640px) {
  .wa-float { right: 1.5rem; bottom: 1.5rem; padding: .8rem 1.25rem; }
}

/* --- Malha decorativa das superficies escuras --------------------------- */
.grade-tinta {
  background-image:
    linear-gradient(to right, rgb(var(--foreground) / .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--foreground) / .06) 1px, transparent 1px);
  background-size: 44px 44px;
}