@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400..800&display=swap');

/* ============================================================================
   FitPen — tema oficial (light): navy + azure da logo, sobre branco.
   Mesma linguagem visual da home (public/index.html): Manrope, cantos muito
   arredondados, sombras quase invisíveis, azul muito claro, bastante respiro.

   Aplicado às páginas do clone (funil, catálogo, track, login) por override
   dos tokens shadcn e do sistema .havo-inst. Carregado por ÚLTIMO no <head>.
   NÃO altera markup — as páginas são hidratadas por React.
   ========================================================================= */

:root, :root.dark, .dark {

  /* ---- paleta FitPen (espelha os tokens da home) ---- */
  --fp-bg:#F7FAFE;
  --fp-surface:#FFFFFF;

  --fp-blue-50:#F1F6FD;
  --fp-blue-100:#E4EEFB;
  --fp-blue-200:#D0E2F9;
  --fp-blue-300:#6FC8F5;
  --fp-blue-500:#0FA2E8;

  --fp-primary:#0E3D92;
  --fp-primary-dark:#0A2E70;
  --fp-primary-deep:#061F4F;

  --fp-text:#132445;
  --fp-text-soft:#5A6A8B;
  --fp-text-light:#8A98B4;

  --fp-border:rgba(20,60,140,.14);
  --fp-border-light:rgba(20,60,140,.08);

  --fp-shadow-soft:0 18px 60px rgba(14,45,110,.09);
  --fp-shadow-card:0 20px 50px rgba(14,45,110,.08);
  --fp-shadow-float:0 18px 50px rgba(10,35,90,.14);

  --fp-radius-sm:12px;
  --fp-radius-md:18px;
  --fp-radius-lg:26px;
  --fp-radius-xl:34px;

  --fp-ease:cubic-bezier(.22,1,.36,1);
  --fp-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* ---- tokens shadcn/ui ---- */
  --background:var(--fp-bg);
  --foreground:var(--fp-text);
  --card:var(--fp-surface);
  --card-foreground:var(--fp-text);
  --popover:var(--fp-surface);
  --popover-foreground:var(--fp-text);
  --primary:var(--fp-primary);
  --primary-foreground:#FFFFFF;
  --secondary:var(--fp-blue-100);
  --secondary-foreground:var(--fp-primary);
  --muted:var(--fp-blue-50);
  --muted-foreground:var(--fp-text-soft);
  --accent:var(--fp-blue-100);
  --accent-foreground:var(--fp-primary);
  --destructive:#C0392F;
  --destructive-foreground:#FFFFFF;
  --border:var(--fp-border);
  --input:rgba(20,60,140,.20);
  --ring:var(--fp-blue-500);
  --radius:1rem;

  --font-sans:var(--fp-sans);
  --font-display:var(--fp-sans);
  --font-serif:Georgia,serif;

  --sidebar:var(--fp-surface); --sidebar-foreground:var(--fp-text);
  --sidebar-primary:var(--fp-primary); --sidebar-primary-foreground:#FFFFFF;
  --sidebar-accent:var(--fp-blue-100); --sidebar-accent-foreground:var(--fp-primary);
  --sidebar-border:var(--fp-border); --sidebar-ring:var(--fp-blue-500);

  --shadow-color:rgba(14,45,110,.12);
  --chart-1:var(--fp-primary); --chart-2:var(--fp-blue-500); --chart-3:var(--fp-blue-300);
  --chart-4:var(--fp-primary-dark); --chart-5:#A9CDF6;

  /* ---- nomes legados usados pelas páginas .havo-inst ---- */
  --action:var(--fp-primary); --action-hover:var(--fp-primary-dark); --action-light:var(--fp-blue-100);
  --accent-ink:var(--fp-primary);
  --ink:var(--fp-text); --ink-soft:var(--fp-text-soft); --ink-faint:var(--fp-text-light);
  --chip-ink:var(--fp-primary); --stroke:var(--fp-blue-500); --btn-ink:#FFFFFF;
  --bg:var(--fp-surface); --bg-soft:var(--fp-bg); --surface:var(--fp-surface);
  --navy-50:#F1F6FD; --navy-100:#E4EEFB; --navy-500:#2C6FD6;
  --navy-600:#1450B4; --navy-700:var(--fp-primary); --navy-800:var(--fp-primary-dark); --navy-900:var(--fp-primary-deep);
  --figure-a:#E4EEFB; --figure-a2:#C0D9F8; --figure-b:#EAF4FE; --figure-b2:#C8E4FA;
  --figure-c:#E7EFFC; --figure-c2:#C6D9F6; --figure-d:#E9F2FD; --figure-d2:#CBE2F8;
  --figure-e:#DDF0FC; --figure-e2:#A9DCF6;
  --green-500:#1E7F63; --green-100:#D8F0E6;
  --yellow-400:var(--fp-blue-300); --yellow-500:var(--fp-blue-500);
}

html, body{
  background:var(--fp-bg);
  color:var(--fp-text);
  font-family:var(--fp-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html, body{ max-width:100%; overflow-x:clip; }

::selection{ background:var(--fp-primary); color:#fff; }

/* ============================================================================
   .havo-inst (products / track / login) — mesma paleta
   ========================================================================= */
.havo-inst{
  --action:var(--fp-primary); --action-hover:var(--fp-primary-dark); --action-light:var(--fp-blue-100);
  --accent:var(--fp-primary); --accent-ink:var(--fp-primary);
  --navy-900:var(--fp-primary-deep); --navy-800:var(--fp-primary-dark); --navy-700:var(--fp-primary);
  --navy-600:#1450B4; --navy-500:#2C6FD6; --navy-100:#E4EEFB; --navy-50:#F1F6FD;
  --navy:var(--fp-primary); --navy-2:#1450B4;
  --ink:var(--fp-text); --ink-soft:var(--fp-text-soft); --ink-faint:var(--fp-text-light);
  --bg:var(--fp-surface); --bg-soft:var(--fp-bg); --bg-panel:var(--fp-blue-50); --surface:var(--fp-surface);
  --line:var(--fp-border); --line-soft:var(--fp-border-light); --hairline:var(--fp-border-light);
  --chip-bg:rgba(20,60,140,.05); --chip-ink:var(--fp-primary);
  --stroke:var(--fp-blue-500); --stroke-soft:rgba(15,162,232,.4); --btn-ink:#FFFFFF;
  --figure-a:#E4EEFB; --figure-a2:#C0D9F8; --figure-b:#EAF4FE; --figure-b2:#C8E4FA;
  --figure-c:#E7EFFC; --figure-c2:#C6D9F6; --figure-d:#E9F2FD; --figure-d2:#CBE2F8;
  --figure-e:#DDF0FC; --figure-e2:#A9DCF6;
  --green-500:#1E7F63; --green-100:#D8F0E6;
  --yellow-400:var(--fp-blue-300); --yellow-500:var(--fp-blue-500);
  --shadow:0 1px 2px rgba(14,45,110,.04), 0 18px 50px -30px rgba(14,45,110,.22);
  --shadow-lift:0 2px 4px rgba(14,45,110,.05), 0 30px 60px -28px rgba(14,45,110,.28);
  --display:var(--fp-sans);
  --sans:var(--fp-sans);
}

/* ============================================================================
   TIPOGRAFIA — hierarquia forte, tracking negativo, Manrope
   ========================================================================= */
h1, h2, h3, h4,
.text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl{
  font-family:var(--fp-sans);
  letter-spacing:-.035em;
  line-height:1.06;
  font-weight:650;
}
h4, .text-2xl{ letter-spacing:-.025em; }
p, li, span, a, button, input, label, textarea, select, small, strong, em, div{
  font-family:var(--fp-sans);
}
p{ line-height:1.7; }

/* eyebrows / rótulos em caixa-alta */
[class*="tracking-wide"][class*="uppercase"],
[class*="tracking-wider"], [class*="tracking-widest"]{
  letter-spacing:.08em;
}

/* ============================================================================
   BOTÕES — pílula, navy sólido, sombra suave (igual à home)
   ========================================================================= */
/* ATENÇÃO: o Checkbox do Radix também é um <button>, e suas classes contêm
   "data-[state=checked]:bg-primary" / "...:text-primary-foreground".
   Os seletores por classe abaixo precisam de :not([data-slot]) — senão o
   checkbox vira uma pílula navy preenchida. */
[data-slot="button"],
button[class*="text-primary-foreground"]:not([data-slot]),
a[class*="text-primary-foreground"]:not([data-slot]){
  border-radius:999px !important;
  font-family:var(--fp-sans);
  font-weight:650;
  letter-spacing:-.005em;
  transition:transform 200ms var(--fp-ease), background 200ms var(--fp-ease),
             box-shadow 200ms var(--fp-ease), border-color 200ms var(--fp-ease);
}
[data-slot="button"][class*="bg-primary"],
button[class*="bg-primary"][class*="text-primary-foreground"]:not([data-slot]),
button[class*="bg-primary"][class*="text-white"]:not([data-slot]),
a[class*="bg-primary"][class*="text-primary-foreground"]:not([data-slot]){
  background:var(--fp-primary);
  color:#fff;
  box-shadow:0 10px 30px rgba(12,45,120,.20);
}
[data-slot="button"][class*="bg-primary"]:hover,
button[class*="bg-primary"][class*="text-primary-foreground"]:not([data-slot]):hover,
button[class*="bg-primary"][class*="text-white"]:not([data-slot]):hover{
  background:var(--fp-primary-dark);
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(12,45,120,.26);
}
[data-slot="button"]:disabled{ box-shadow:none; transform:none; }

/* secundário / outline */
[data-slot="button"][class*="border"]:not([class*="bg-primary"]),
button[class*="border"][class*="rounded-full"]:not([data-slot]):not([class*="bg-primary"]),
a[class*="border"][class*="rounded-full"]:not([data-slot]):not([class*="bg-primary"]){
  border-color:var(--fp-border);
  color:var(--fp-primary);
  background:transparent;
}
[data-slot="button"][class*="border"]:not([class*="bg-primary"]):hover,
button[class*="border"][class*="rounded-full"]:not([data-slot]):not([class*="bg-primary"]):hover,
a[class*="border"][class*="rounded-full"]:not([data-slot]):not([class*="bg-primary"]):hover{
  border-color:rgba(20,60,140,.30);
  background:rgba(255,255,255,.7);
  color:var(--fp-primary);
  transform:translateY(-1px);
}

/* ============================================================================
   CAMPOS DE FORMULÁRIO
   ========================================================================= */
[data-slot="input"], textarea, select{
  border-radius:var(--fp-radius-md) !important;
  border:1px solid var(--fp-border) !important;
  background:var(--fp-surface) !important;
  color:var(--fp-text);
  font-size:16px;
  box-shadow:none !important;
  transition:border-color 200ms var(--fp-ease), box-shadow 200ms var(--fp-ease);
}
[data-slot="input"]::placeholder, textarea::placeholder{ color:var(--fp-text-light); opacity:1; }
[data-slot="input"]:focus-visible, [data-slot="input"]:focus,
textarea:focus-visible, select:focus-visible{
  border-color:var(--fp-blue-500) !important;
  box-shadow:0 0 0 3px rgba(15,162,232,.18) !important;
  outline:none;
}
[data-slot="label"], [data-slot="form-label"]{
  font-weight:600;
  color:var(--fp-text);
  letter-spacing:-.005em;
}
[data-slot="checkbox"]{
  border-radius:5px !important;
  border:1px solid var(--fp-border) !important;
  background:var(--fp-surface);
  transition:background 180ms var(--fp-ease), border-color 180ms var(--fp-ease);
}
[data-slot="checkbox"][data-state="checked"]{
  background:var(--fp-primary) !important;
  border-color:var(--fp-primary) !important;
  color:#fff;
}
[data-slot="checkbox"]:focus-visible{
  box-shadow:0 0 0 3px rgba(15,162,232,.20);
  outline:none;
}

/* abas (login) */
[data-slot="tabs-list"]{
  border-radius:999px !important;
  background:var(--fp-blue-50);
  border:1px solid var(--fp-border-light);
  padding:4px;
}
[data-slot="tabs-trigger"]{
  border-radius:999px !important;
  font-weight:600;
  color:var(--fp-text-soft);
  transition:background 200ms var(--fp-ease), color 200ms var(--fp-ease);
}
[data-slot="tabs-trigger"][data-state="active"]{
  background:var(--fp-surface);
  color:var(--fp-primary);
  box-shadow:0 6px 18px rgba(14,45,110,.08);
}

/* ============================================================================
   FUNIL — cartões de opção

   Notas de seletor (as duas armadilhas deste projeto):
   1. [class*="border-primary"] casa também "hover:border-primary/50", o que
      marcaria TODAS as opções como selecionadas -> usar [class~=] (token
      inteiro). O estado real do React é a classe "border-primary" sozinha.
   2. A mesma classe "border-primary" é usada nos indicadores pequenos
      (bolinha de radio "rounded-full", quadrado de checkbox "rounded-md").
      Por isso o estilo de cartão selecionado exige também "rounded-xl":
      senão a bolinha navy vira azul-claro e some.
   ========================================================================= */
[class*="border-2"][class*="rounded-xl"]:not([class*="border-dashed"]),
[class*="border-2"][class*="rounded-lg"]:not([class*="border-dashed"]){
  border-width:1px !important;
  border-color:var(--fp-border) !important;
  border-radius:var(--fp-radius-md) !important;
  background:var(--fp-surface) !important;
  box-shadow:none;
  transition:border-color 250ms var(--fp-ease), box-shadow 250ms var(--fp-ease),
             transform 250ms var(--fp-ease), background 250ms var(--fp-ease);
}
button[class*="border-2"][class*="rounded-xl"],
label[class*="border-2"][class*="rounded-xl"],
div[class*="border-2"][class*="rounded-xl"][class~="p-4"]{
  padding:15px 18px;
}
@media (hover:hover){
  button[class*="border-2"][class*="rounded-xl"]:hover,
  label[class*="border-2"][class*="rounded-xl"]:hover{
    border-color:rgba(20,60,140,.26) !important;
    box-shadow:var(--fp-shadow-soft);
    transform:translateY(-2px);
  }
}

/* estado SELECIONADO — precisa continuar inequívoco */
[class*="border-2"][class*="rounded-xl"][class~="border-primary"],
[class*="border-2"][class*="rounded-lg"][class~="border-primary"]{
  border-color:var(--fp-primary) !important;
  box-shadow:inset 0 0 0 1px var(--fp-primary), var(--fp-shadow-soft) !important;
  background:var(--fp-blue-100) !important;
}
/* variante mais leve usada nas listas de checkbox */
[class*="border-2"][class*="rounded-xl"][class~="border-primary/50"]{
  border-color:var(--fp-blue-500) !important;
  background:var(--fp-blue-50) !important;
}
/* indicadores pequenos (bolinha de radio / quadrado do checkbox) ficam sólidos */
[class*="border-2"][class*="rounded-full"][class~="border-primary"],
[class*="border-2"][class*="rounded-md"][class~="border-primary"]{
  border-color:var(--fp-primary) !important;
  background:var(--fp-primary) !important;
  box-shadow:none !important;
}
button[class*="border-2"]:focus-visible, label[class*="border-2"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(15,162,232,.22);
}

/* Texto das opções de seleção. O padrão era text-lg (18px) no rótulo e
   text-sm (14px) na descrição — grande demais para listas de 5 itens. */
[class*="border-2"][class*="rounded-xl"] span[class~="text-lg"]{
  font-size:15.5px !important;line-height:1.35;font-weight:600;
}
[class*="border-2"][class*="rounded-xl"] span[class~="text-sm"]{
  font-size:13px !important;line-height:1.4;
}

/* Consentimentos: são 10 blocos de texto longo empilhados; no tamanho padrão
   (14px / leading-relaxed) a tela fica altíssima. As linhas de consentimento se
   distinguem das opções de seleção por "items-start space-x-3". */
[class~="items-start"][class~="space-x-3"][class*="rounded-xl"] [data-slot="label"]{
  font-size:12.5px !important;
  line-height:1.45 !important;
  font-weight:500;
}
[class~="items-start"][class~="space-x-3"][class*="rounded-xl"][class~="p-4"]{
  padding:11px 14px !important;
}
/* respiro entre os blocos também cai */
main div[class~="space-y-4"] > div[class~="items-start"]{ margin-top:8px !important; }

/* Sim/Não da tela de triagem: o selecionado precisa ler como ativo à distância.
   A regra de botão secundário acima forçava background transparente e apagava
   o bg-primary — daí o :not([class*="bg-primary"]) nela. */
button[class~="rounded-full"][class*="bg-primary"]:not([data-slot]){
  background:var(--fp-primary) !important;
  color:#fff !important;
  border-color:var(--fp-primary) !important;
  box-shadow:0 6px 16px rgba(12,45,120,.28);
}
button[class~="rounded-full"][class*="bg-primary"]:not([data-slot]):hover{
  background:var(--fp-primary-dark) !important;
}

/* barra de progresso.
   [class~="h-1"] (token inteiro), NUNCA [class*="h-1"] — substring casa com
   h-10, h-12, h-14... e transformava a miniatura 48x48 do resumo do pedido
   (w-12 h-12 bg-muted) numa barra de 4px com overflow:hidden. */
.h-1.bg-muted, [class~="h-1"][class~="bg-muted"]{
  height:4px;
  border-radius:999px;
  background:var(--fp-blue-100);
  overflow:hidden;
}
.h-1.bg-muted > .bg-primary, [class~="h-1"][class~="bg-muted"] > [class*="bg-primary"]{
  background:linear-gradient(90deg, var(--fp-primary), var(--fp-blue-500)) !important;
  border-radius:999px;
}

/* ============================================================================
   SUPERFÍCIES — cards minimalistas, cantos suaves, sombra quase invisível
   ========================================================================= */
[class*="rounded-2xl"][class*="bg-white"],
[class*="rounded-xl"][class*="bg-white"],
[class*="rounded-3xl"][class*="bg-white"],
[class*="rounded-2xl"][class*="bg-card"],
[class*="rounded-xl"][class*="bg-card"]{
  background:var(--fp-surface) !important;
  border:1px solid var(--fp-border-light);
  border-radius:var(--fp-radius-lg) !important;
  box-shadow:var(--fp-shadow-card);
}
[class*="bg-gray-50"],[class*="bg-slate-50"],[class*="bg-neutral-50"],
[class*="bg-gray-100"],[class*="bg-slate-100"]{
  background:var(--fp-blue-50) !important;
}
hr, [class*="divide-"] > * + *{ border-color:var(--fp-border-light) !important; }

/* Miniaturas de produto no resumo do pedido.
   As fotos sao canetas deitadas (~2.28:1). Num quadrado de 48px, object-cover
   descarta mais da metade da largura e mostra so o meio da caneta. contain
   cabe a caneta inteira dentro do quadrado. */
[class~="bg-muted"] > img[class*="object-cover"],
[class~="bg-muted"] > span > img[class*="object-cover"]{
  object-fit:contain !important;
  padding:3px;
}

/* ============================================================================
   FAIXA SUPERIOR + HEADER
   ========================================================================= */
[class*="021B35"], [class*="03254C"],
[class*="bg-gray-900"], [class*="bg-slate-900"]{
  background:linear-gradient(90deg,var(--fp-primary-deep) 0%,#0B2C6B 50%,var(--fp-primary-deep) 100%) !important;
  color:#fff !important;
}
header[class*="sticky"], header[class*="fixed"]{
  background:rgba(247,250,254,.86) !important;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--fp-border-light) !important;
}

/* ============================================================================
   FUNIL — respiro e composição
   ========================================================================= */
main > div[class*="max-w-lg"]{ max-width:36rem; }
main h1[class*="text-2xl"]{
  /* evita a linha orfa de uma palavra so */
  text-wrap:balance;
  font-size:clamp(19px,1.15rem + .45vw,24px);
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.08;
  color:var(--fp-text);
  margin-bottom:28px;
}
main p[class*="text-muted-foreground"]{ font-size:17px; line-height:1.6; }

@media (min-width:768px){
  /* o botão deixa de ser empurrado para o rodapé da viewport no desktop */
  main > div[class*="min-h-[calc(100vh"]{ min-height:0 !important; }
  /* a coluna do funil vira um painel branco sobre o azul muito claro */
  main > div[class*="max-w-lg"]{
    background:var(--fp-surface);
    border:1px solid var(--fp-border-light);
    border-radius:var(--fp-radius-lg);
    box-shadow:var(--fp-shadow-card);
    padding:52px 48px 44px;
    margin-top:56px;
    margin-bottom:72px;
  }
}

/* fundo suave — no lugar de cortes retos, um degradê orgânico.
   A casca do app usa .bg-white e cobriria o degradê: deixamos transparente
   para o fundo aparecer atrás do painel branco do formulário. */
body:has(.storefront-theme){
  background:
    radial-gradient(880px 520px at 88% -6%, rgba(208,226,249,.55), transparent 62%),
    radial-gradient(700px 460px at -8% 6%, rgba(228,238,251,.7), transparent 60%),
    var(--fp-bg);
  background-attachment:fixed;
}
.storefront-theme > [class*="min-h-screen"][class*="bg-white"],
.storefront-theme > [class*="min-h-screen"][class*="bg-gray-50"]{
  background:transparent !important;
}

/* ============================================================================
   FUNIL — TELA INICIAL (/fitpen/get-started)

   Escopo: a tela inicial usa min-h-[calc(100vh-60px)]; as telas de pergunta
   usam 100vh-120px. Isso separa as duas sem precisar de classe nova.
   ========================================================================= */
.tela-inicial,
main div[class*="min-h-[calc(100vh-60px)]"]{ }

/* 1. Ícone de gráfico removido — era o único elemento decorativo da tela e
      disputava atenção com o título. */
/* Ícone decorativo das telas que são só texto + botão: tela inicial,
   as de reforço e a de conclusão. Não carregam informação. */
main div[class~="w-20"][class~="h-20"][class~="rounded-full"][class~="mx-auto"],
main div[class~="w-24"][class~="h-24"][class~="rounded-full"]{
  display:none !important;
}

/* 2. Alinhamento à esquerda, como a home. Respiro vertical menor: com
      min-h-screen + py-12 sobrava muito vazio acima e abaixo. */
main div[class*="min-h-[calc(100vh-60px)]"] > div{ padding-block:clamp(28px,4vw,48px) !important; }
main div[class*="min-h-[calc(100vh-60px)]"] div[class~="text-center"]{ text-align:left !important; }
main div[class*="min-h-[calc(100vh-60px)]"] div[class~="max-w-lg"]{ max-width:34rem; }

/* 3. Hierarquia tipográfica */
main div[class*="min-h-[calc(100vh-60px)]"] h1{
  /* evita a linha orfa de uma palavra so */
  text-wrap:balance;
  font-size:clamp(19px,1.15rem + .45vw,24px);
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.1;
  color:var(--fp-text);
}
main div[class*="min-h-[calc(100vh-60px)]"] p[class~="text-lg"]{
  font-size:17px;line-height:1.6;color:var(--fp-text-soft);max-width:42ch;
}
/* "Oferecido por Fitpen" vira rótulo discreto, no lugar de mais um parágrafo */
main div[class*="min-h-[calc(100vh-60px)]"] div[class~="text-center"] > p[class~="text-sm"]{
  font-size:12px !important;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fp-primary) !important;
}
/* os outros dois parágrafos pequenos continuam em caixa normal */
main div[class*="min-h-[calc(100vh-60px)]"] p[class~="text-center"]{
  font-size:13.5px;color:var(--fp-text-light) !important;
}

/* 4. Lista de garantias: linhas mais respiradas, ícone na cor da marca.
      O verde era a única cor fora da paleta na tela. */
main div[class*="min-h-[calc(100vh-60px)]"] div[class~="space-y-3"] > div{
  gap:12px;padding-block:3px;
}
main div[class*="min-h-[calc(100vh-60px)]"] div[class~="space-y-3"] span{
  font-size:15px;color:var(--fp-text);
}
main div[class*="min-h-[calc(100vh-60px)]"] svg[class*="circle-check"]{
  color:var(--fp-primary) !important;width:19px;height:19px;
}

/* 5. Bloco de prova social: alinhado à esquerda, divisor mais leve */
main div[class*="min-h-[calc(100vh-60px)]"] div[class~="border-t"]{
  border-color:var(--fp-border-light) !important;
  padding-top:26px !important;
}
main div[class*="min-h-[calc(100vh-60px)]"] div[class~="border-t"] div[class~="justify-center"]{
  justify-content:flex-start !important;
}
main div[class*="min-h-[calc(100vh-60px)]"] p[class~="text-center"]{ text-align:left !important; }
/* o grid de selos: ícone tem mx-auto e ficava centrado sobre texto à esquerda */
main div[class*="min-h-[calc(100vh-60px)]"] div[class~="grid"] svg[class~="mx-auto"]{
  margin-left:0 !important;margin-right:0 !important;
}
main div[class*="min-h-[calc(100vh-60px)]"] div[class~="grid"] p{ font-size:12.5px; }

/* 6. Painel branco, igual às telas de pergunta — sem ele a inicial fica
      solta no fundo enquanto o resto do funil aparece em card. */
@media (min-width:768px){
  main div[class*="min-h-[calc(100vh-60px)]"] div[class~="max-w-lg"]{
    background:var(--fp-surface);
    border:1px solid var(--fp-border-light);
    border-radius:var(--fp-radius-lg);
    box-shadow:var(--fp-shadow-card);
    padding:48px 46px 42px;
    margin-block:40px;
  }
}

/* ============================================================================
   REMOÇÕES A PEDIDO
   ========================================================================= */

/* Tarja superior de aviso de entrega.
   Ela e renderizada pelo React (nao esta no HTML estatico), entao some por CSS.
   O --banner-height precisa ir junto: o header usa `sticky top-(--banner-height)`
   e ficaria com um vao de 36px no topo se a variavel continuasse valendo 2.25rem. */
aside[class~="fixed"][class~="top-0"][class~="z-40"][class~="h-9"]{ display:none !important; }
:root, :root.dark, .dark{ --banner-height:0px; }

/* "Oferecido por Fitpen" na tela inicial do funil */
main div[class*="min-h-[calc(100vh-60px)]"] div[class~="text-center"] > p[class~="text-sm"]{
  display:none !important;
}

/* ============================================================================
   MOVIMENTO
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}