/* ---------------------------------------------------------------------------
 * 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 Maxfem — rosa/magenta #e8377c, tirada do próprio SVG da logo
 * (fill="#E8377C" em maxfem.com.br/cdn/shop/files/logo-default_280x.svg).
 *
 * 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 assume a cor da marca automaticamente. Aqui o template já era
 * rosa, então a mudança é de tom (rosa doce -> magenta da Maxfem), não de cor.
 */
:root {
  /* --- escala "pink" do Tailwind com os tons da Maxfem --- */
  --color-pink-50:  #fff5f9;
  --color-pink-100: #ffe3ef;
  --color-pink-200: #ffc4dd;
  --color-pink-500: #e8377c;
  --color-pink-600: #d31c66;
  --color-pink-700: #a91250;

  /* --- tokens semânticos do tema --- */
  --radius: 1rem;
  --background: #fffbfd;
  --foreground: #2a0f1d;
  --card: #ffffff;
  --card-foreground: #2a0f1d;
  --popover: #ffffff;
  --popover-foreground: #2a0f1d;
  --primary: #e8377c;
  --primary-foreground: #fffbfd;
  --secondary: #ffeaf3;
  --secondary-foreground: #a91250;
  --muted: #fff2f7;
  --muted-foreground: #7c5566;
  --accent: #ffc4dd;
  --accent-foreground: #5c0a2c;
  --destructive: #e62b34;
  --destructive-foreground: #fffbfd;
  --border: #fadfe9;
  --input: #fbe6ee;
  --ring: #e8377c;

  /* o template chama de "gold" o realce da marca; aqui é o magenta */
  --gold: #e8377c;
  --gold-soft: rgba(232, 55, 124, .28);
  --gradient-gold: linear-gradient(135deg, #ff5c9a, #c2135c);
  --gradient-hero:
    radial-gradient(ellipse at top right, rgba(255, 150, 190, .40), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(255, 205, 226, .55), transparent 55%),
    linear-gradient(180deg, #fffbfd, #fff2f7);
  --gradient-dark: linear-gradient(180deg, #fffbfd, #ffeef4);
}

/* As 3 embalagens da linha têm faixas de cor diferentes; os ícones de cada
   produto usam a cor da caixa dele pra dar leitura rápida na landing. */
:root {
  --clareador: #d9a41f;   /* faixa amarela  */
  --firmador:  #e8377c;   /* faixa rosa     */
  --posdepil:  #8f77bd;   /* faixa lilás    */
}

/* Cartão de produto: fundo suave no lugar do rosa chapado do template */
.mxf-shot {
  background: linear-gradient(180deg, #fff5f9 0%, #ffffff 55%, #ffeef4 100%);
}
.mxf-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(232, 55, 124, .10), 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) */
.mxf-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, #ff5c9a, #c2135c);
  box-shadow: 0 4px 12px -4px rgba(194, 19, 92, .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(232, 55, 124, .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) {
  .mxf-sec { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .mxf-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) {
  .mxf-kit { flex-direction: row; }
  .mxf-kit > .mxf-shot {
    flex: 0 0 40%;
    aspect-ratio: auto;        /* deixa de ser quadrado: estica na altura do cartão */
    align-self: stretch;
  }
  .mxf-kit > .mxf-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 */
  .mxf-kit .mxf-gift { top: auto; bottom: .375rem; }
  /* botão de compra com área de toque de verdade */
  .mxf-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) {
  .mxf-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;
  }
  .mxf-swipe::-webkit-scrollbar { display: none; }
  .mxf-swipe > * {
    flex: 0 0 86%;
    scroll-snap-align: center;
    margin-top: 0 !important;
  }
  .mxf-swipe-wide > * { flex: 0 0 92%; }
}

/* Print de avaliação em quadro QUADRADO fixo.
 *
 * Os arquivos já saem 640x640 do processamento, então na prática nada é
 * recortado aqui -- o aspect-ratio + cover é rede de segurança pra quem trocar
 * a imagem depois por uma de proporção diferente. */
.mxf-review-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

/* Dica visual de "arraste" só no celular */
.mxf-hint { display: none; }
@media (max-width: 1023px) {
  .mxf-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 QUADRADAS (1080x1080 na origem, servidas em 860x860) e três
 * delas trazem texto: os quadros de "Benefícios do Clareador"/"do Firmador"
 * perderiam a primeira e a última linha num quadro de proporção diferente com
 * `object-cover`. Com a proporção exata + `contain`, 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 a deixa invisível.
 * --------------------------------------------------------------------------- */
.mxf-slide {
  aspect-ratio: 1 / 1;
  max-height: 70vh;
  background: var(--bg, #ffffff);
}
.mxf-slide > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Setas fora de cima da imagem: sentadas no meio, tapavam o texto dos quadros
   de benefício. Ficam na barra de controle, embaixo, junto das bolinhas. */
.mxf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .75rem;
}
.mxf-nav button.mxf-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;
}
.mxf-nav button.mxf-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.
 * --------------------------------------------------------------------------- */
.mxf-bump {
  border: 2px dashed #ffc4dd;
  background: #fff5f9;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.mxf-bump:hover { border-color: #f490b6; }
.mxf-bump.ativo {
  border-style: solid;
  border-color: #e8377c;
  background: #ffeaf3;
  box-shadow: 0 0 0 3px rgba(232, 55, 124, .10);
}
.mxf-bump-check {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: #e8377c;
  cursor: pointer;
}