/* Valariss — a Home (index.html), desde 25/09/2026: a "Home B" do canvas "Imagens do site: TAI"
   (https://claude.ai/artifact/3dZSha42bVxLNsJNTmUQX1, versão 60), aprovada pelo usuário ("Pode implementar a Home B
   no site").

   A HOME E A PÁGINA DE PREÇOS CARREGAM ESTE ARQUIVO, depois do components.css (a de Preços desde 27/09/2026, com o
   precos.<hash>.css logo depois). O nome ficou home porque ele nasceu com ela. A "Preços C" saiu do mesmo canvas, com
   as mesmas seções, e usa daqui o .home do <main>, as seções, os cartões, as dúvidas, a faixa do Hub, a chamada final e
   a primeira tela inteira (o .hero--home, que o .hero--precos ajusta). MUDAR UMA REGRA DAQUI MUDA AS DUAS PÁGINAS:
   confira as duas (Scripts/teste_home.py e Scripts/teste_site_precos.py, e a medida de cada uma no navegador).

   As seções são desenho próprio, com as medidas do canvas
   (o computador de 1440 e o celular de 390), e por isso não usam .section, .section__head, .h2 nem .card: aquelas
   regras têm outras medidas (144 px de margem por seção, título de 48 px limitado a 20 caracteres, cartão em
   --surface-2), e acertar a Home por cima delas seria brigar com a cascata em cada seção. Do site ela usa o
   cabeçalho, o rodapé, o .container, o .eyebrow, os botões, o .link-action, o .reveal e o .hero, com as trocas abaixo.

   O ROXO DO TAI (#a181f7) NA ÊNFASE DOS TÍTULOS, e não o ciano do .em do site: é a ênfase do canvas aprovado, e a
   mesma exceção nomeada que o components.css já abre para o título do topo da página do TAI (D112). Fica escopada no
   <main class="home">, e não pinta mais nada.

   O FUNDO DAS SEÇÕES ALTERNADAS (#0d1631) NÃO É O --surface: os cartões são --surface, e sobre ele sumiriam. É o tom
   do canvas, entre o --bg e o --surface. O #cbd5e1 das garantias e do parágrafo da Gallup também é do canvas. */

.home {
  --home-roxo: #a181f7;
  --home-tinta: #0d1631;
  --home-claro: #cbd5e1;
  --home-y: 56px;          /* margem de cima e de baixo de cada seção */
  --home-cabeca: 32px;     /* do título da seção até o que vem depois */
}
@media (min-width: 768px)  { .home { --home-y: 72px; --home-cabeca: 40px; } }
@media (min-width: 1024px) { .home { --home-y: 88px; --home-cabeca: 48px; } }

.home .em { color: var(--home-roxo); }


/* ============ Primeira tela ============
   A da página de Preços também: ela leva o .hero--home, e o .hero--precos (no precos.<hash>.css) troca o carrossel pelo
   cartão do TAI e as medidas pelas do canvas dela.
   No computador, as duas colunas do canvas (466 e 590 px, com 64 entre elas). No celular e no tablet, o .hero__copy
   sai da caixa (display: contents) e a ordem intercala: título, garantias, carrossel, botões e parágrafo. O topo fica a
   32 px do cabeçalho: com o eyebrow a 92 px da borda, as garantias e a linha do YouTube da primeira imagem cabem na
   primeira tela de 390 x 690, como no canvas (versão 59). */
.hero--home { padding-top: calc(var(--header-h) + 32px); padding-bottom: 72px; }

.hero--home .display-2 {
  max-width: none;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* As garantias, aqui e na chamada do fim da página: o check em ciano e a letra menor do canvas, e não o check verde
   do .reassurers do site, que cresce para 16 px no celular e empurraria a imagem para fora da primeira tela. */
.hero--home .hero__reassurers,
.home-final__garantias {
  gap: 8px 16px;
  font-size: 0.84375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--home-claro);
}
.hero--home .hero__reassurers li,
.home-final__garantias li { gap: 6px; white-space: nowrap; }
.hero--home .hero__reassurers svg,
.home-final__garantias svg { color: var(--accent); }

@media (max-width: 1023px) {
  .hero--home .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero--home .hero__copy { display: contents; }
  .hero--home .hero__copy > * { margin-top: 0; }
  .hero--home .hero__mark { display: none; }
  .hero--home .display-2 { margin-top: 16px; }
  .hero--home .hero__reassurers { margin-top: 14px; }
  .hero--home .carrossel { order: 1; margin-top: 20px; }
  .hero--home .btn-group { order: 2; margin-top: 24px; }
  .hero--home .hero__copy > .lead { order: 2; margin-top: 24px; }
}

@media (min-width: 1024px) {
  .hero--home { padding-top: calc(var(--header-h) + var(--s-24)); padding-bottom: 88px; }
  .hero--home .hero__grid { grid-template-columns: minmax(0, 466fr) minmax(0, 590fr); }
  .hero--home .hero__copy { display: flex; flex-direction: column; gap: var(--s-6); }
  .hero--home .hero__copy > * { margin-top: 0; }
  .hero--home .display-2 { font-size: clamp(2.5rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -0.03em; }
  /* No HTML as garantias vêm antes dos botões (é a ordem do celular); aqui a ordem as leva para baixo deles, a 16 px. */
  .hero--home .hero__reassurers { order: 1; margin-top: calc(16px - var(--s-6)); font-size: 0.875rem; }
  .hero--home .hero__copy > .lead { order: 2; }
  .hero--home .carrossel { align-self: start; margin-top: var(--s-16); }

  /* Os anéis atrás do carrossel, os mesmos do topo do TAI (D71), um pouco mais apagados, como no canvas. */
  .hero--home::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-radial-gradient(circle at 82% 30%, var(--accent-line) 0 1px, transparent 1px 88px);
    opacity: .3;
    -webkit-mask-image: radial-gradient(ellipse 38% 78% at 82% 30%, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse 38% 78% at 82% 30%, #000 0%, transparent 72%);
  }
}


/* ============ O carrossel ============
   Três imagens no mesmo lugar (a mesma célula da grade), e a que chega aparece por cima, saindo de um leve desfoque,
   enquanto a que sai continua inteira embaixo até ela terminar: nunca aparece o fundo entre as duas. Quem troca é o
   assets/js/home.<hash>.js, a cada 7 segundos: o fio do ponto aceso é a contagem, e quando a animação dele termina,
   vem a próxima. Parar a animação do fio (mouse em cima, o botão de pausa, o carrossel fora da tela) para a troca.

   SEM O SCRIPT, fica a primeira imagem, e os pontos não aparecem (o espaço deles fica reservado, para a página não
   pular quando o script chega). COM MOVIMENTO REDUZIDO não há troca sozinha: a regra geral do base.css reduz toda
   animação a 0,01 ms, e o script não avança; os pontos continuam, para quem quiser ver as outras duas. */
.carrossel { position: relative; isolation: isolate; width: 100%; max-width: 440px; }
@media (min-width: 680px) { .carrossel { max-width: 590px; } }

/* O brilho roxo atrás das imagens, como o do topo do TAI. */
.carrossel::before {
  content: '';
  position: absolute;
  inset: -8% -17% -12% -17%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(161, 129, 247, 0.22), rgba(161, 129, 247, 0));
  pointer-events: none;
}

/* A sombra é do quadro, e não da imagem: a imagem é só a peça, com os cantos transparentes. */
.carrossel__palco { display: grid; border-radius: var(--r-xl); box-shadow: 0 40px 90px -35px rgba(2, 6, 20, 0.95); }
.carrossel__slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: scale(.985); filter: blur(10px); }
.carrossel__slide.is-saindo { z-index: 1; opacity: 1; visibility: visible; transform: none; filter: none; }
.carrossel__slide.is-ativa {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
}
.carrossel__slide img { width: 100%; height: auto; }

.carrossel__controles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: 44px;
  margin-top: 10px;
  visibility: hidden;
}
.carrossel.is-pronto .carrossel__controles { visibility: visible; }
.carrossel__pontos { grid-column: 2; display: flex; align-items: center; }
.carrossel__ponto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.carrossel__trilho {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: rgba(241, 245, 249, 0.24);
  overflow: hidden;
  transition: width .8s var(--ease-inout), background-color var(--t-micro) var(--ease-inout);
}
.carrossel__ponto[aria-current="true"] .carrossel__trilho { width: 28px; }
.carrossel__ponto:hover .carrossel__trilho { background: rgba(241, 245, 249, 0.42); }

/* O fio: vazio nos 0,8 s em que a imagem chega, e enche nos 6,2 s seguintes. Ao apagar, some devagar. */
@keyframes carrosselFio { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.carrossel__fio {
  position: absolute;
  inset: 0;
  background: var(--text);
  transform-origin: left center;
  transform: scaleX(1);
  opacity: 0;
  transition: opacity .8s linear;
}
/* A animação vai em propriedades separadas, e NUNCA pelo atalho animation: o atalho também escreve
   animation-play-state: running, e esta regra ganha, pela especificidade, das três que pausam logo abaixo. Com o
   atalho, a pausa não pausava nada: o fio enchia do mesmo jeito, e só o script deixava de trocar, e depois de retomar
   o carrossel ficava parado para sempre, com o fio já cheio (achado pelo Scripts/teste_home.py, em 25/09/2026). */
.carrossel.is-pronto .carrossel__ponto[aria-current="true"] .carrossel__fio {
  opacity: 1;
  transition: none;
  animation-name: carrosselFio;
  animation-duration: 6.2s;
  animation-timing-function: linear;
  animation-delay: .8s;
  animation-fill-mode: both;
}
.carrossel.is-pausado .carrossel__fio,
.carrossel.is-fora .carrossel__fio { animation-play-state: paused; }
/* Só em quem tem mouse: no toque, o :hover gruda depois do toque e pararia a troca sem ninguém pedir. */
@media (hover: hover) {
  .carrossel:hover .carrossel__fio { animation-play-state: paused; }
}

.carrossel__pausa {
  grid-column: 3;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid rgba(241, 245, 249, 0.16);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-micro) var(--ease-inout), border-color var(--t-micro) var(--ease-inout);
}
.carrossel__pausa:hover { color: var(--text); border-color: rgba(241, 245, 249, 0.36); }
.carrossel__icone--retomar,
.carrossel.is-pausado .carrossel__icone--pausar { display: none; }
.carrossel.is-pausado .carrossel__icone--retomar { display: block; }
.carrossel button:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: var(--r-full); }

@media (min-width: 1024px) {
  .carrossel__controles { height: 28px; margin-top: 18px; }
  .carrossel__ponto { height: 28px; padding: 0 4px; }
  .carrossel__pausa { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .carrossel__pausa { display: none; }
}


/* ============ As seções ============
   Cortadas nos lados: a imagem do dia traz a sombra numa margem transparente que passa da coluna (76 px de cada lado),
   e o brilho roxo passa mais ainda. No topo do TAI quem corta é o overflow do .hero; aqui, sem o corte, o celular
   rolava 56 px para o lado. O clip só corta na horizontal (a sombra de baixo continua inteira); o hidden é para o
   navegador que ainda não conhece o clip. */
.home-secao { padding-block: var(--home-y); overflow-x: clip; }
@supports not (overflow-x: clip) { .home-secao { overflow: hidden; } }
.home-secao--tinta { background: var(--home-tinta); }
.home-secao--curta { padding-block: 48px; }
@media (min-width: 1024px) { .home-secao--curta { padding-block: 64px; } }

.home-cabeca { display: flex; flex-direction: column; gap: 16px; max-width: 1000px; }
.home-cabeca + * { margin-top: var(--home-cabeca); }
@media (min-width: 1024px) { .home-cabeca { gap: 18px; } }

.home-h2 { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.025em; }
.home-h3 { font-size: 1.15625rem; line-height: 1.25; letter-spacing: -0.01em; }
@media (min-width: 1024px) { .home-h3 { font-size: 1.3125rem; } }

.home-lead { font-size: 1rem; line-height: 1.6; color: var(--text-muted); max-width: 820px; }
@media (min-width: 1024px) { .home-lead { font-size: 1.125rem; } }

/* Sem margin: o * { margin: 0 } do base.css já zera a do <ol> e a do <ul>, e uma margem aqui apagaria o espaço que
   o .home-cabeca + * dá depois do título (mesma especificidade, e esta vem depois). */
.home-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0; list-style: none; }
@media (min-width: 768px) { .home-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px) { .home-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .home-grade--2, .home-grade--3 { gap: 24px; } }

/* O cartão da Home: --surface com a borda, 20 px de canto; no celular, o ícone e o título dividem a linha. */
.home-cartao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 20px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.home-cartao p { font-size: 1rem; line-height: 1.6; color: var(--text-muted); }
.home-cartao__cabeca { display: flex; align-items: center; gap: 12px; }
@media (min-width: 1024px) {
  .home-cartao { gap: 14px; padding: 28px; border-radius: var(--r-xl); }
  .home-cartao__cabeca { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.home-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(34, 211, 238, 0.14);
  color: var(--accent);
}
.home-icone--roxo { background: rgba(161, 129, 247, 0.14); color: var(--home-roxo); }
@media (min-width: 1024px) { .home-icone { width: 40px; height: 40px; } }


/* ---- O que você vê: o dia de uma pessoa, e o Instagram julgado por duas funções ---- */
.home-cabeca + .home-pares { margin-top: var(--home-cabeca); }
.home-pares { display: flex; flex-direction: column; gap: 48px; }
.home-par { display: flex; flex-direction: column; gap: 24px; }
.home-par__texto { display: flex; flex-direction: column; gap: 10px; }
.home-par__texto p { font-size: 1rem; line-height: 1.6; color: var(--text-muted); }
.home-h3--par { font-size: 1.375rem; }

@media (min-width: 1024px) {
  .home-cabeca + .home-pares { margin-top: calc(var(--home-cabeca) + 8px); }
  .home-pares { gap: 72px; }
  .home-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 590px); column-gap: 72px; align-items: center; }
  .home-par--invertido { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
  .home-par--invertido .home-par__texto { order: 2; }
  .home-par__texto { gap: 14px; max-width: 420px; }
  .home-par--invertido .home-par__texto { max-width: 460px; }
  .home-par__texto p { font-size: 1.0625rem; }
  .home-h3--par { font-size: 1.75rem; line-height: 1.2; }
}

/* A imagem do dia é a do topo da página do TAI (Scripts/gerar_imagens_tai.py), com a sombra desenhada numa margem
   transparente em volta da peça; as margens negativas a devolvem, e a caixa do <picture> é a da peça. Os números de
   cada calc() são os do gerador, e ele confere que estão aqui antes de escrever. O brilho roxo fica no ::before, que
   o isolation mantém na frente do fundo da seção. */
.home-dia { position: relative; isolation: isolate; display: flow-root; width: 100%; max-width: 440px; }
.home-dia::before {
  content: '';
  position: absolute;
  inset: -11% -17% -20% -17%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(161, 129, 247, 0.22), rgba(161, 129, 247, 0));
  pointer-events: none;
}
.home-dia img {
  max-width: none;
  width: calc(100% * 502 / 350);
  margin: calc(-100% * 36 / 350) calc(-100% * 76 / 350) calc(-100% * 116 / 350) calc(-100% * 76 / 350);
}
@media (min-width: 1024px) {
  .home-dia { max-width: 590px; }
  .home-dia img {
    width: calc(100% * 742 / 590);
    margin: calc(-100% * 52 / 590) calc(-100% * 76 / 590) calc(-100% * 116 / 590) calc(-100% * 76 / 590);
  }
}

.home-instagram { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 440px; margin: 0; }
@media (min-width: 680px) { .home-instagram { max-width: 600px; } }
.home-instagram__rotulo {
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-wrap: balance;
}
.home-instagram img { width: 100%; height: auto; }
.home-instagram__nota { font-size: 0.6875rem; line-height: 1.4; color: var(--text-muted); }


/* ---- Como funciona: no celular o número fica ao lado do texto; nas três colunas, em cima ---- */
.home-passos { gap: 12px; }
.home-passo { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 18px; border-radius: var(--r-lg); }
.home-passo__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  border: 1.5px solid rgba(34, 211, 238, 0.6);
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.home-passo__texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-passo .home-h3 { font-size: 1.125rem; line-height: 1.3; }
@media (min-width: 900px) {
  .home-passos { gap: 16px; }
  .home-passo { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--r-xl); }
  .home-passo__num { width: 40px; height: 40px; font-size: 1rem; }
  .home-passo__texto { gap: 14px; }
}
@media (min-width: 1024px) {
  .home-passos { gap: 24px; }
  .home-passo .home-h3 { font-size: 1.25rem; }
}


/* ---- Dúvidas, e a faixa do Hub ---- */
.home-duvidas { gap: 12px; }
.home-duvida { gap: 8px; padding: 18px; border-radius: 14px; }
.home-duvida .home-h3 { font-size: 1.03125rem; line-height: 1.35; letter-spacing: 0; }
@media (min-width: 768px) { .home-duvidas { gap: 16px; } }
@media (min-width: 1024px) {
  .home-duvida { gap: 10px; padding: 24px; border-radius: var(--r-lg); }
  .home-duvida .home-h3 { font-size: 1.125rem; }
}

.home-mais { margin-top: 32px; }
@media (min-width: 1024px) { .home-mais { margin-top: 48px; } }

.home-hub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 40px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
}
.home-icone--hub { width: 44px; height: 44px; }
.home-hub__texto { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.home-h3--hub { font-size: 1.1875rem; line-height: 1.3; }
.home-hub__texto p { font-size: 1rem; line-height: 1.55; color: var(--text-muted); }
@media (min-width: 768px) {
  .home-hub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 28px; padding: 32px 36px; }
  .home-icone--hub { width: 56px; height: 56px; border-radius: 14px; }
  .home-h3--hub { font-size: 1.375rem; }
  .home-hub__texto p { line-height: 1.6; }
}
@media (min-width: 1024px) { .home-hub { margin-top: 48px; } }


/* ---- Privacidade: os seis itens, sem cartão; no celular o ícone fica ao lado do texto ---- */
.home-itens { gap: 22px; }
.home-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; min-width: 0; }
.home-icone--item { width: 40px; height: 40px; }
.home-item__texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-item .home-h3 { font-size: 1.0625rem; line-height: 1.3; }
.home-item p { font-size: 1rem; line-height: 1.55; color: var(--text-muted); }
@media (min-width: 768px) { .home-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 1024px) {
  .home-itens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .home-item { display: flex; flex-direction: column; gap: 14px; }
  .home-icone--item { width: 44px; height: 44px; }
  .home-item .home-h3 { font-size: 1.1875rem; }
  .home-item p { line-height: 1.6; }
}

.home-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; }
@media (min-width: 768px) { .home-links { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 36px; } }
@media (min-width: 1024px) { .home-links { margin-top: 48px; } }


/* ---- Por que isso importa ---- */
.home-texto { font-size: 1rem; line-height: 1.65; color: var(--home-claro); max-width: 820px; }
@media (min-width: 1024px) { .home-texto { font-size: 1.0625rem; line-height: 1.7; } }


/* ---- A chamada final ---- */
.home-final {
  padding-block: 72px;
  text-align: center;
  background: radial-gradient(360px 300px at 50% 45%, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0) 70%);
}
@media (min-width: 768px) {
  .home-final {
    padding-block: 104px;
    background: radial-gradient(720px 380px at 50% 45%, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0) 70%);
  }
}
.home-final__titulo { max-width: 900px; margin-inline: auto; font-size: clamp(1.875rem, 1.2rem + 2vw, 2.75rem); }
.home-final__texto { margin-top: 14px; font-size: 1rem; line-height: 1.55; color: var(--text-muted); }
.home-final__acao { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; }
.home-final__garantias { justify-content: center; }
@media (min-width: 1024px) {
  .home-final__texto { margin-top: 16px; font-size: 1.125rem; line-height: 1.6; }
  .home-final__acao { gap: 16px; margin-top: 28px; }
  .home-final__garantias { font-size: 0.875rem; }
}