/* ---------------------------------------------------------------------------
 * Fontes auto-hospedadas (subset latin, cobre os acentos do português).
 *
 * Antes vinham do fonts.googleapis.com, que custa 2 conexões de terceiro
 * (DNS + TLS) no caminho crítico -- em 4G isso atrasa o primeiro texto na tela.
 * Servindo do nosso domínio, a fonte usa a conexão que já está aberta.
 * O Inter é fonte variável: um arquivo cobre os pesos 400-700.
 * --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bebas-neue-latin.woff2') format('woff2');
}

/*
 * Paleta Anagrow — vinho/bordô (#8b1231), extraída da logo e do site oficial.
 *
 * Carregado DEPOIS de styles.css (o build do Tailwind). Regras fora de @layer
 * ganham das que estão dentro, então este arquivo re-tematiza o site inteiro
 * sem precisar mexer nos 93 KB minificados do build.
 *
 * Truque: as classes utilitárias do Tailwind v4 usam var(--color-pink-*).
 * Redefinindo essas variáveis, todo `bg-pink-500`/`text-pink-600`/etc. que veio
 * do template vira vinho automaticamente.
 */
:root {
  /* --- escala "pink" do Tailwind reaproveitada como escala vinho --- */
  --color-pink-50:  #fdf4f6;
  --color-pink-100: #f9e4e9;
  --color-pink-200: #f0c6d0;
  --color-pink-500: #a8163b;
  --color-pink-600: #8b1231;
  --color-pink-700: #6f0e27;

  /* --- tokens semânticos do tema --- */
  --radius: 1rem;
  --background: #fffcfc;
  --foreground: #22111a;
  --card: #ffffff;
  --card-foreground: #22111a;
  --popover: #ffffff;
  --popover-foreground: #22111a;
  --primary: #8b1231;
  --primary-foreground: #fffcfc;
  --secondary: #f9e8ec;
  --secondary-foreground: #6f0e27;
  --muted: #faf0f2;
  --muted-foreground: #7a5a62;
  --accent: #efc3ce;
  --accent-foreground: #4c0718;
  --destructive: #e62b34;
  --destructive-foreground: #fffcfc;
  --border: #f1dfe4;
  --input: #f4e7eb;
  --ring: #8b1231;

  /* o template chama de "gold" o realce da marca; aqui é o vinho */
  --gold: #8b1231;
  --gold-soft: rgba(139, 18, 49, .28);
  --gradient-gold: linear-gradient(135deg, #b4234a, #74102a);
  --gradient-hero:
    radial-gradient(ellipse at top right, rgba(216, 160, 176, .45), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(238, 205, 213, .55), transparent 55%),
    linear-gradient(180deg, #fffcfc, #fdf3f5);
  --gradient-dark: linear-gradient(180deg, #fffcfc, #fbeef1);
}

/* Laranja do OSA (Óleo de Semente de Abóbora) — a segunda cor da linha */
:root { --osa: #c2571f; --osa-soft: #fdf0e8; }

/* Cartão de produto: fundo suave no lugar do rosa do template */
.ana-shot {
  background: linear-gradient(180deg, #fdf4f6 0%, #ffffff 55%, #faeef1 100%);
}
.ana-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(139, 18, 49, .12), transparent 62%);
}

/* ---------------------------------------------------------------------------
 * Utilitários que FALTAM no build do Tailwind herdado do Gummy.
 *
 * O styles.css é um build compilado: só contém as classes que existiam no HTML
 * na hora do build, e não temos Node aqui pra rodar o Tailwind de novo. Algumas
 * dessas classes o próprio site do Gummy usa e estão SEM EFEITO lá — a caixa do
 * QR Code (w-56 h-56) sem tamanho fixo, a lista de passos (list-decimal
 * list-inside) sem numeração e o pontinho de "aguardando pagamento"
 * (bg-amber-500) invisível.
 *
 * Se um dia rodar o Tailwind de verdade neste projeto, este bloco pode sair.
 * --------------------------------------------------------------------------- */
.h-6  { height: calc(var(--spacing) * 6); }
.h-56 { height: calc(var(--spacing) * 56); }
.w-56 { width:  calc(var(--spacing) * 56); }
.pb-1  { padding-bottom: calc(var(--spacing) * 1); }
.pb-12 { padding-bottom: calc(var(--spacing) * 12); }
.pl-3  { padding-left:   calc(var(--spacing) * 3); }
.border-l-2 { border-left-style: solid; border-left-width: 2px; }
.list-decimal { list-style-type: decimal; }
.list-inside  { list-style-position: inside; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-pink-600  { background-color: var(--color-pink-600); }
.text-\[8px\]  { font-size: 8px; }
.text-\[12px\] { font-size: 12px; }
@media (min-width: 768px) { .md\:h-9 { height: calc(var(--spacing) * 9); } }

/* Selo "de presente" (substitui a imagem flutuante de brinde do template) */
.ana-gift {
  position: absolute;
  top: .375rem;
  right: .375rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(135deg, #b4234a, #74102a);
  box-shadow: 0 4px 12px -4px rgba(116, 16, 42, .6);
}

/* ===========================================================================
 * MOBILE FIRST — a loja vende no celular. Tudo aqui existe pra reduzir
 * scroll, aumentar área de toque e tirar peso do caminho crítico.
 * =========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;   /* âncora #kits não fica escondida sob o header fixo */
}
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(139, 18, 49, .15); }

/* CTA fixo respeita a barra de gestos do iPhone */
#sticky-cta { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* --- Seções: menos respiro vertical no celular (py-12 = 3rem é muito) --- */
@media (max-width: 767px) {
  .ana-sec { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .ana-sec-tight { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* --- Cartões de kit: no celular viram LINHA (imagem à esquerda, dados à
       direita). Empilhado em quadrado, os 4 kits davam ~4 telas de scroll
       na hora da decisão -- em linha dá pra comparar os 4 numa tela só.  --- */
@media (max-width: 1023px) {
  .ana-kit { flex-direction: row; }
  .ana-kit > .ana-shot {
    flex: 0 0 40%;
    aspect-ratio: auto;        /* deixa de ser quadrado: estica na altura do cartão */
    align-self: stretch;
  }
  .ana-kit > .ana-shot + div { min-width: 0; padding: .75rem .875rem; }
  /* selo de brinde desce pro rodapé da miniatura pra não brigar com o selo da esquerda */
  .ana-kit .ana-gift { top: auto; bottom: .375rem; }
  /* botão de compra com área de toque de verdade */
  .ana-kit a[href^="checkout.html"] {
    padding-top: .8125rem;
    padding-bottom: .8125rem;
    font-size: .8125rem;
  }
}

/* --- Blocos de 2 imagens e avaliações: carrossel de arrastar no celular.
       Empilhado, cada bloco somava ~1000px de altura. Aqui vira uma faixa
       que desliza com o dedo (scroll-snap nativo, sem JS e sem autoplay).  --- */
@media (max-width: 1023px) {
  .ana-swipe {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* sangra até a borda da tela, pro card seguinte aparecer e indicar que arrasta */
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0 1rem .25rem;
  }
  .ana-swipe::-webkit-scrollbar { display: none; }
  .ana-swipe > * {
    flex: 0 0 86%;
    scroll-snap-align: center;
    margin-top: 0 !important;
  }
  .ana-swipe-wide > * { flex: 0 0 92%; }
}

/* Foto de avaliação em quadro QUADRADO fixo.
 *
 * As fotos vêm de review de cliente, cada uma numa proporção diferente (9:16,
 * 16:9, 1:1). Sem quadro fixo, cada cartão ganhava altura diferente e a caixa do
 * depoimento ficava torta. Os arquivos já saem cortados em 640x640 do
 * deploy/trocar-fotos-avaliacoes.sh, então na prática nada é recortado aqui --
 * o aspect-ratio + cover é rede de segurança pra quem trocar a foto depois. */
.ana-review-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

/* Dica visual de "arraste" só no celular */
.ana-hint { display: none; }
@media (max-width: 1023px) {
  .ana-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    font-size: 11px;
    color: var(--muted-foreground);
    margin-top: .625rem;
  }
}

/* ---------------------------------------------------------------------------
 * Carrossel do herói — nada de imagem cortada.
 *
 * As 4 fotos são retrato 860x1182 e TRAZEM TEXTO (nome da fórmula, citação do
 * tricologista). Num quadro `aspect-square` com `object-cover`, o navegador
 * cortava a faixa de cima e de baixo -- ou seja, cortava justo o título e a
 * última linha da citação.
 *
 * Aqui o quadro tem a proporção EXATA das imagens (860/1182) e usa `contain`,
 * então nada é cortado nunca. O `max-height` evita que a foto empurre preço e
 * botão pra longe demais em celular baixo; se nessa situação sobrar tarja, ela
 * usa a cor de fundo da PRÓPRIA imagem (--bg, definido em cada slide), o que
 * deixa a tarja invisível.
 * --------------------------------------------------------------------------- */
.ana-slide {
  aspect-ratio: 860 / 1182;
  max-height: 70vh;
  background: var(--bg, #d8d8d8);
}
.ana-slide > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Setas saíram de cima da imagem: sentadas no meio, tapavam a citação do
   Dr. João. Agora ficam na barra de controle, embaixo, junto das bolinhas. */
.ana-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .75rem;
}
.ana-nav button.ana-arrow {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .15s ease;
}
.ana-nav button.ana-arrow:active { transform: scale(.92); }

/* ---------------------------------------------------------------------------
 * Order bump do checkout.
 * Tracejado = "opcional, você escolhe". Ao marcar, vira sólido e ganha halo:
 * o cliente precisa ver que o total mudou por ação dele, não por padrão.
 * --------------------------------------------------------------------------- */
.ana-bump {
  border: 2px dashed #f0c6d0;
  background: #fdf4f6;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.ana-bump:hover { border-color: #d99aab; }
.ana-bump.ativo {
  border-style: solid;
  border-color: #8b1231;
  background: #fbeef1;
  box-shadow: 0 0 0 3px rgba(139, 18, 49, .10);
}
.ana-bump-check {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: #8b1231;
  cursor: pointer;
}