@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,500;1,600;1,700&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Filmou Ganhou — sistema editorial inspirado na referência, sem alterar o conteúdo. */
:root {
  --paper: #efeadd;
  --paper-deep: #eae4d5;
  --ink: #141414;
  --acid: #0fd96b;
  --orange: #0fd96b;
  --blue: #dce8dd;
  --white: #f7f3e8;
  --line: #d8d2c2;
  --display: 'Geist', system-ui, sans-serif;
  --body: 'Geist', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --page: min(1280px, calc(100vw - 80px));
}

body {
  font-family: var(--body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(rgba(89, 105, 85, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(89, 105, 85, .075) 1px, transparent 1px);
  background-size: 20px 20px;
  line-height: 1.5;
}
.noise { opacity: .025; }
.site-header, .instructions-header, .check-header {
  height: 64px;
  border-bottom: 1px solid var(--line);
  background: rgba(239, 234, 221, .82);
  backdrop-filter: blur(10px);
}
.brand { gap: 9px; }.brand-mark { width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 50%; background: var(--green, var(--acid)); font: 600 12px/28px var(--mono); text-align: center; transform: none; }.brand-name { font: 700 9px/1 var(--body); text-transform: uppercase; letter-spacing: -.02em; }
.main-nav, .instructions-back, .check-back, .share-button { font-size: 11px; font-weight: 500; letter-spacing: 0; }.main-nav { gap: 22px; }.main-nav > a::after { display: none; }.nav-cta { padding: 9px 12px; border: 1px solid var(--green, var(--acid)); background: var(--acid); color: var(--ink); }.nav-cta:hover { box-shadow: none; transform: translateY(-2px); background: #00ff7a; }
.share-button { min-height: 34px; padding: 0 11px; border: 1px solid var(--ink); background: transparent; text-transform: none; }.share-button:hover { box-shadow: none; transform: translateY(-2px); background: var(--paper-deep); }

/* Assinatura da marca: olho-lente e moldura de gravação. O nome continua em
   texto para ser perfeitamente nítido, inclusive no cabeçalho do celular. */
.brand { gap: 12px; }
img.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  object-fit: cover;
}
.brand-name {
  font: 800 16px/.88 var(--body);
  letter-spacing: -.05em;
  text-transform: none;
}
.footer-brand img.brand-mark { width: 52px; height: 52px; flex-basis: 52px; }
.footer-brand .brand-name { font-size: 19px; }

.hero { min-height: 650px; padding-top: 74px; padding-bottom: 70px; grid-template-columns: 1.05fr .95fr; gap: 7vw; }.eyebrow { gap: 7px; margin-bottom: 17px; color: #08753c; font: 500 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; }.eyebrow::before { width: 16px; height: 1px; }.eyebrow span { padding: 0; border: 0; background: transparent; letter-spacing: .05em; }
.hero h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.075em; line-height: .93; text-transform: none; }.hero h1 { font-size: clamp(55px, 5.5vw, 78px); }.hero h1 em { color: #0a9e52; font-family: var(--serif); font-size: 1.12em; font-style: italic; font-weight: 600; }.hero h1 em::after { display: none; }.hero-lead { max-width: 500px; margin: 25px 0; font-size: 17px; font-weight: 400; line-height: 1.5; }.button { min-height: 42px; padding: 0 14px; border: 1px solid var(--ink); font: 500 11px var(--mono); letter-spacing: 0; text-transform: none; }.button:hover { box-shadow: none; transform: translateY(-2px); }.text-link { font-size: 12px; font-weight: 500; }.hero-pix { padding: 5px 10px 5px 5px; border: 1px solid var(--line); box-shadow: none; background: rgba(247, 243, 232, .72); font: 500 10px var(--mono); letter-spacing: 0; }.hero-pix b { border: 0; background: var(--acid); font: 600 11px var(--mono); }.hero-gratis { box-shadow: none; }.microcopy { font: 600 13px/1.2 var(--serif); font-style: italic; color: #7c7567; }
.hero-visual { min-height: 540px; }.hero-visual::before { width: 78%; border: 1px solid rgba(15, 217, 107, .55); border-radius: 0; background: linear-gradient(90deg, transparent 49.9%, rgba(15,217,107,.25) 50%, transparent 50.1%), linear-gradient(transparent 49.9%, rgba(15,217,107,.25) 50%, transparent 50.1%); box-shadow: none; }.hero-video { width: min(350px, 72vw); border: 1px solid var(--ink); border-radius: 0; box-shadow: 9px 9px 0 var(--acid); }.visual-sticker { border: 1px solid rgba(15,217,107,.65); background: rgba(239,234,221,.9); color: #08753c; box-shadow: none; font: 9px var(--mono); transform: none; }.visual-note { font: 10px var(--mono); color: #6a6557; }

.clips { padding: 24px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(234,228,213,.48); }.clips-titulo, .clips-fonte { font: 10px var(--mono); letter-spacing: .04em; }.clips-titulo::before { width: 15px; height: 1px; background: var(--acid); }.clip { border: 1px solid var(--line); background: var(--paper); }.clip figcaption { font-size: 9px; }

.why, .task-section, .device-section, .safety, .faq { padding-top: 88px; padding-bottom: 88px; }.why { grid-template-columns: .6fr 1.5fr 1.2fr; gap: 5vw; }.section-number { padding-top: 5px; color: #08753c; font: 500 9px var(--mono); letter-spacing: .07em; }.why h2, .task-heading h2, .faq h2, .safety h2 { font-size: clamp(45px, 4.8vw, 70px); }.why-body { max-width: 460px; font-size: 16px; }.why-body > p:first-child { font-size: 18px; font-weight: 500; }.truth-card { border-color: var(--green, var(--acid)); background: rgba(15,217,107,.08); }
.steps, .good-fit, .final-cta { color: var(--ink); background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.steps { padding-top: 88px; padding-bottom: 88px; grid-template-columns: .6fr 1fr 1.55fr; }.section-number.light, .eyebrow.light, .steps-intro > p:last-child, .step-list p, .steps-cta p { color: #655f52; }.eyebrow.light span { color: inherit; }.steps-intro h2, .final-cta h2 { color: var(--ink); font-size: clamp(55px, 5vw, 76px); }.step-list { border-color: var(--line); }.step-list li { border-color: var(--line); }.step-index, .step-icon { color: #08753c; }.steps-cta p a { color: #08753c; }.button-acid { background: var(--acid); }
.task-heading { margin: 26px 0 48px; }.task-grid { gap: 16px; }.task-card { padding: 10px 10px 18px; border: 1px solid var(--ink); background: rgba(247,243,232,.77); box-shadow: none; }.task-card:hover, .task-card:nth-child(2):hover { transform: translateY(-5px); }.task-art { height: 270px; margin-bottom: 16px; border: 0; }.task-video .task-art { background: #d7e7d9; }.task-audio .task-art { background: #eae4d5; }.task-image .task-art { background: #dce8dd; }.task-tag { padding: 4px 6px; background: var(--acid); color: var(--ink); font: 500 9px var(--mono); }.task-card h3 { font-size: 21px; font-weight: 500; }.task-card p { font-size: 13px; }.task-disclaimer { margin-top: 34px; padding-left: 18px; border-color: var(--acid); }
.good-fit { padding-top: 88px; padding-bottom: 88px; grid-template-columns: 1fr 1.1fr; }.fit-list { border-color: var(--line); }.fit-list li { border-color: var(--line); }.fit-list b { color: #08753c; }.device-panel { border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--acid); transform: none; }.device-panel.is-visible { transform: none; }.device-panel-head i { background: var(--acid); }.device-official { background: var(--acid); }.device-caveat { border-color: var(--acid); }
.safety { grid-template-columns: .5fr 1.2fr 1.2fr; border-color: var(--line); }.safety-seal { width: 106px; background: var(--acid); border: 1px solid var(--ink); box-shadow: none; transform: none; }.safety-seal b { font-family: var(--display); }.safety-copy > p { font-size: 16px; font-weight: 500; }.faq { grid-template-columns: 1fr 1.25fr; }.accordion { border-color: var(--line); }.accordion details { border-color: var(--line); }.accordion summary { font-weight: 600; }
.final-cta { min-height: 490px; margin-top: 0; padding-top: 88px; padding-bottom: 88px; }.final-cta > p:not(.eyebrow) { color: #655f52; }.orbit { border-color: rgba(15,217,107,.35); }.footer { padding-top: 42px; background: var(--paper-deep); }.footer-bottom { border-color: var(--line); }

/* Instruções e verificador compartilham os mesmos componentes, agora no mesmo sistema. */
.instructions-page, .check-page { background-color: var(--paper); background-image: linear-gradient(rgba(89,105,85,.075) 1px, transparent 1px), linear-gradient(90deg,rgba(89,105,85,.075) 1px,transparent 1px); background-size: 20px 20px; }.wizard { width: min(720px, calc(100vw - 44px)); }.wizard-progress { background: rgba(239,234,221,.9); }.wizard-progress-meta, .wizard-count b { font-family: var(--mono); }.wizard-bar, .wizard-step, .check-card { border-color: var(--line); box-shadow: none; }.wizard-bar i { background: var(--acid); border: 0; }.wizard-step h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.05em; text-transform: none; }.check-main { min-height: calc(100vh - 64px); padding-top: 76px; }.check-intro h1 { font-family: var(--display); font-size: clamp(60px, 7vw, 100px); letter-spacing: -.075em; text-transform: none; }.check-intro h1 em { color: #0a9e52; font-family: var(--serif); font-style: italic; }.check-card { background: var(--ink); box-shadow: 8px 8px 0 var(--acid); transform: none; }.check-sticker { background: var(--acid); color: var(--ink); box-shadow: none; transform: none; }

/* O cartão de resultado precisa de fundo claro: o tema editorial usava tinta
   preta no cartão, mas os textos do verificador também herdam essa tinta. */
.check-page .check-card { background: var(--white); color: var(--ink); }

/* Camada de legibilidade: no papel claro, cinzas suaves perdem definição em
   telas pequenas. Estes textos são auxiliares, mas continuam essenciais para
   entender a oferta e o resultado da verificação. */
:root { --muted-readable: #4c4b44; }
.microcopy,
.visual-note,
.clip-texto i,
.clips-fonte,
.section-number.light,
.eyebrow.light,
.steps-intro > p:last-child,
.step-list p,
.steps-cta p,
.task-card p,
.task-disclaimer,
.device-copy > p:not(.eyebrow, .device-lead, .device-caveat),
.device-caveat,
.device-result small,
.device-data dt,
.device-privacy,
.accordion details p,
.final-cta > p:not(.eyebrow),
.footer-top > p,
.modelos-grupo-topo p,
.modelo-fora .modelo-nome,
.modelo-nome em,
.modelo-nome small,
.modelos-mais,
.modelos-status[data-tipo="nada"],
.store-link span,
.check-message p,
.check-desktop p,
.check-success p,
.check-detected dt,
#check-again,
.check-note { color: var(--muted-readable); }

/* Verde de destaque em texto sobre o papel: esta versão mantém a identidade,
   mas passa no contraste também quando o título reduz no celular. */
.hero h1 em,
.check-intro h1 em { color: #08753c; }

/* Composição para celular: o conteúdo usa a largura útil da tela, com respiro
   lateral consistente. Reduzimos a cadência vertical de desktop e aumentamos a
   leitura de textos corridos, sem transformar cada seção em uma tela inteira. */
@media (max-width: 760px) {
  html:root { --page: calc(100% - 40px); }

  body .hero { padding: 34px 0 38px; gap: 26px; }
  body .hero h1 { font-size: clamp(40px, 12vw, 54px); line-height: .96; }
  body .hero-lead { margin: 18px 0; font-size: 17px; line-height: 1.48; }
  body .hero-actions { width: 100%; gap: 12px; }
  body .hero-actions .button { width: 100%; min-height: 48px; }
  body .hero-visual { min-height: 0; margin-top: 0; padding: 28px 0 34px; }
  body .hero-video { width: min(100%, 310px); }
  body .visual-note { max-width: 310px; margin: 14px auto 0; font-size: 12px; line-height: 1.45; text-align: center; }

  body .why,
  body .steps,
  body .task-section,
  body .good-fit,
  body .device-section,
  body .safety,
  body .faq { padding-top: 46px; padding-bottom: 48px; gap: 22px; }

  body .why,
  body .steps,
  body .good-fit,
  body .device-section,
  body .safety,
  body .faq { grid-template-columns: 1fr; }

  body .why-heading,
  body .steps-intro,
  body .task-heading,
  body .fit-copy,
  body .device-copy,
  body .faq-title { text-align: center; }
  body .section-number,
  body .eyebrow { justify-content: center; text-align: center; font-size: 11px; }

  body .why h2,
  body .task-heading h2,
  body .faq h2,
  body .safety h2,
  body .steps-intro h2,
  body .fit-copy h2,
  body .device-copy h2,
  body .final-cta h2 { font-size: clamp(38px, 11vw, 48px); line-height: .98; }

  body .why-body,
  body .steps-cta,
  body .safety-copy,
  body .accordion,
  body .device-panel { text-align: left; }
  body .why-body,
  body .safety-copy,
  body .device-copy > p { font-size: 16px; line-height: 1.58; }
  body .why-body > p:first-child { font-size: 18px; line-height: 1.48; }
  body .step-list p,
  body .steps-cta p,
  body .task-card p,
  body .fit-list p,
  body .accordion details p,
  body .task-disclaimer { font-size: 15px; line-height: 1.58; }

  body .task-heading { margin: 18px 0 28px; }
  body .task-grid { gap: 14px; }
  body .task-art { height: 220px; }
  body .steps-cta { margin-top: 10px; }
  body .final-cta { min-height: 0; padding: 52px 20px; }

  body .wizard { width: min(100% - 32px, 720px); }
  body .check-main { padding: 38px 0; gap: 32px; }
  body .check-intro { text-align: center; }
  body .check-intro h1 { font-size: clamp(42px, 13vw, 58px); }
  body .step-list li,
  body .fit-list li { padding-top: 16px; padding-bottom: 16px; }
  body .accordion summary { padding-top: 18px; padding-bottom: 18px; font-size: 16px; }
  body .phone-needs { gap: 10px; }
  body .site-header .brand-name { font-size: 14px; }
  body .site-header img.brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 7px; }
  body .site-header .nav-cta { font-size: 12px; }
}

@media (max-width: 760px) {
  :root { --page: min(100% - 34px, 1280px); }.site-header, .instructions-header, .check-header { height: 58px; }.main-nav { background: var(--paper); border-color: var(--line); }.hero { min-height: auto; padding: 53px 0 56px; grid-template-columns: 1fr; gap: 35px; }.hero h1 { font-size: clamp(48px, 14vw, 66px); }.hero-lead { font-size: 16px; }.hero-visual { min-height: 470px; }.hero-video { width: min(316px, 74vw); }.why, .steps, .task-section, .good-fit, .device-section, .safety, .faq { padding-top: 58px; padding-bottom: 58px; }.why, .steps, .good-fit, .safety, .faq { gap: 28px; }.why h2, .task-heading h2, .faq h2, .safety h2 { font-size: 48px; }.task-heading { margin-bottom: 32px; }.task-art { height: 245px; }.final-cta { min-height: 410px; padding: 60px 24px; }.check-main { grid-template-columns: 1fr; padding: 55px 0; gap: 54px; }
}