/* Guia de Sobrevivência Climática — estilos compartilhados do funil
   Cores e medidas tiradas do canvas "página de vendas e funil". */

:root {
  --navy: #0f2a3d;
  --navy-deep: #0b2233;
  --navy-soft: #16384f;
  --gold: #f2b630;
  --gold-hover: #e0a41f;
  --gold-dark: #c98a00;
  --blue: #2f6fd6;
  --blue-dark: #2458b0;
  --green: #1fa673;
  --green-dark: #147a53;
  --mint: #4fd1a5;
  --ink: #1d2731;
  --muted: #4a5a68;
  --line: #e3e8ec;
  --mist: #eef5f7;
  --sand: #f6f4ee;
  --fog: #f3f6f8;
  --cream: #fdf3d8;
  --pale: #dbe7f0;
  --sky: #9fc3e0;

  --check-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%234fd1a5'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5' fill='none' stroke='%230f2a3d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%231fa673'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230f2a3d'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5' fill='none' stroke='%23f2b630' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232f6fd6'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2a3d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
[id] { scroll-margin-top: 16px; }

/* Layout */
.container { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.container--narrow { max-width: 780px; }
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--sand { background: var(--sand); }
.section--fog { background: var(--fog); }
.section--flush-top { padding-top: 0; }
.stack { display: flex; flex-direction: column; gap: 28px; }
.stack--sm { gap: 8px; }
.stack--md { gap: 12px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 240px)), 1fr)); }

/* Tipografia */
.h2 { font-size: clamp(30px, 6.5vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; color: var(--navy); max-width: 820px; }
.h2--light { color: #ffffff; }
.sub { font-size: clamp(20px, 4.4vw, 28px); line-height: 1.25; font-weight: 600; color: var(--blue); }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); }
.kicker--blue { color: var(--blue); }
.lead { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 720px; }
.lead--light { color: var(--pale); }
.hl { color: var(--gold); }
.hl-blue { color: var(--blue); }

/* Botões */
.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 10px 24px;
  background: var(--gold);
  color: var(--navy);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--gold-hover); color: var(--navy); }
.btn small { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.btn--lg { min-height: 68px; font-size: 17px; box-shadow: 0 10px 24px rgb(242 182 48 / 25%); }
.btn--inline { display: inline-flex; align-self: flex-start; }
.btn--navy { background: var(--navy); color: var(--gold); box-shadow: 0 10px 24px rgb(15 42 61 / 25%); }
.btn--navy:hover { background: var(--navy-soft); color: var(--gold); }

/* Selos e listas com check */
.pill { align-self: flex-start; background: var(--navy-soft); color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 8px 14px; border-radius: 999px; }
.pill--gold { background: var(--gold); color: var(--navy); font-weight: 800; }
.checks { display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.checks li::before { content: ""; flex: 0 0 22px; height: 22px; background: var(--check-mint) center / contain no-repeat; }
.list-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px 40px; }
.list-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink); }
.list-check li::before { content: ""; flex: 0 0 24px; height: 24px; background: var(--check-green) center / contain no-repeat; }

/* Topo + hero */
.hero { position: relative; overflow: hidden; background: var(--navy); color: #ffffff; padding-bottom: 72px; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.14; }
.hero > .container { position: relative; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 64px; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.brand { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #ffffff; }
.brand span { color: var(--gold); }
.topbar__tagline { font-size: 13px; color: var(--pale); }
.hero__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-top: clamp(32px, 6vw, 72px); }
.hero__copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero__cover { flex: 1 1 280px; min-width: 0; display: flex; justify-content: center; }
.hero__cover img { width: 72%; max-width: 340px; border-radius: 10px; box-shadow: 18px 22px 0 var(--navy-deep), 0 20px 40px rgb(0 0 0 / 35%); }
.hero h1 { font-size: clamp(36px, 9vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: #ffffff; }
.hero h1.h1--long { font-size: clamp(32px, 7.4vw, 56px); }
.hero__lead { font-size: clamp(17px, 2.2vw, 19px); line-height: 1.55; color: var(--pale); max-width: 560px; }
.cta-block { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.cta-note { font-size: 13px; color: var(--pale); text-align: center; }
.hero .checks { margin-top: 4px; }

/* Hero do anúncio B — seca (fundo amarelo) */
.hero--seca { background: var(--gold); color: var(--navy); }
.hero--seca .topbar { border-bottom-color: rgb(15 42 61 / 15%); }
.hero--seca .brand, .hero--seca .brand span, .hero--seca .topbar__tagline { color: var(--navy); }
.hero--seca .pill { background: var(--navy); color: var(--gold); }
.hero--seca h1 { color: var(--navy); font-size: clamp(40px, 10vw, 84px); line-height: 1; letter-spacing: -0.035em; }
.answer-chip { align-self: flex-start; background: var(--navy); color: #ffffff; font-size: clamp(34px, 8vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; padding: 10px 22px 16px; border-radius: 16px; }
.hero--seca .hero__lead { color: var(--navy); font-weight: 600; }
.hero--seca .cta-note { color: var(--navy); }
.hero--seca .checks li::before { background-image: var(--check-navy); }
.hero--seca .hero__cover img { box-shadow: 18px 22px 0 var(--gold-dark), 0 20px 40px rgb(15 42 61 / 30%); }

/* Hero do anúncio C — chuvas e enchentes (fundo claro) */
.hero--enchente { background: var(--mist); color: var(--navy); }
.hero--enchente .topbar { border-bottom-color: rgb(15 42 61 / 12%); }
.hero--enchente .brand { color: var(--navy); }
.hero--enchente .brand span { color: var(--blue); }
.hero--enchente .topbar__tagline { color: var(--muted); }
.hero--enchente .pill { background: var(--blue); color: #ffffff; }
.hero--enchente h1 { color: var(--navy); }
.hero--enchente .hero__lead { color: var(--ink); }
.hero--enchente .cta-note { color: var(--muted); }
.hero--enchente .checks li::before { background-image: var(--check-blue); }
.hero--enchente .hero__cover img { box-shadow: 18px 22px 0 var(--navy), 0 20px 40px rgb(15 42 61 / 25%); }

/* Faixa de números */
.stats { position: relative; margin-top: -44px; }
.stats__box { background: var(--mist); border-radius: 16px; padding: 20px 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; text-align: center; box-shadow: 0 10px 30px rgb(15 42 61 / 12%); }
.hero--enchente + .stats .stats__box { background: #ffffff; }
.stat { padding: 8px; }
.stat strong { display: block; font-size: 32px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.stat span { font-size: 14px; color: var(--muted); }

/* Cards */
.card { background: #ffffff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 10px rgb(15 42 61 / 5%); }
.card h3 { font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--navy); }
.card p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.icon-bubble { width: 46px; height: 46px; border-radius: 999px; background: #e8f0fc; display: flex; align-items: center; justify-content: center; }
.icon-bubble--warm { background: var(--cream); }

/* Seção escura do kit */
.kit { position: relative; overflow: hidden; background: var(--navy-deep); color: #ffffff; }
.kit__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kit__veil { position: absolute; inset: 0; background: rgb(11 34 51 / 82%); }
.kit > .container { position: relative; }
.chips { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.chips li { display: flex; gap: 12px; align-items: center; background: rgb(22 56 79 / 92%); border: 1px solid rgb(255 255 255 / 10%); border-radius: 12px; padding: 14px 16px; font-size: 16px; font-weight: 600; color: #ffffff; }
.chips li::before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 999px; background: var(--gold); }
.chips li:nth-child(3n+2)::before { background: var(--blue); }
.chips li:nth-child(3n)::before { background: var(--mint); }

/* Volumes do guia */
.vol { background: #ffffff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 10px rgb(15 42 61 / 6%); }
.vol h3 { font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--navy); }
.vol p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.vol__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vol__count { font-size: 13px; font-weight: 600; color: var(--muted); }
.vol--destaque { outline: 3px solid var(--gold); outline-offset: -3px; }
.vol__flag { align-self: flex-start; background: var(--cream); color: #7a4f00; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 6px; }
.tag { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; padding: 6px 14px; border-radius: 999px; background: var(--navy); color: #ffffff; }
.tag--blue { background: var(--blue); }
.tag--gold { background: var(--gold); color: var(--navy); }
.tag--green { background: var(--green-dark); }

/* Para quem é */
.audience { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.audience p { background: var(--mist); border-radius: 12px; padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--navy); }

/* Oferta */
.offer { background: var(--navy); border-radius: 20px; padding: clamp(24px, 5vw, 48px); display: flex; flex-wrap: wrap; gap: 32px; align-items: center; color: #ffffff; }
.offer__copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.offer__copy .btn { max-width: 460px; }
.offer__cover { flex: 1 1 220px; min-width: 0; display: flex; justify-content: center; }
.offer__cover img { width: 60%; max-width: 260px; border-radius: 8px; box-shadow: 0 20px 40px rgb(0 0 0 / 35%); }
.offer h2 { font-size: clamp(28px, 6vw, 42px); line-height: 1.12; font-weight: 800; letter-spacing: -0.025em; color: #ffffff; }
.offer__lead { font-size: 16px; line-height: 1.55; color: var(--pale); }
.offer__seal { font-size: 14px; font-weight: 600; color: var(--mint); max-width: 460px; text-align: center; }
.offer__fine { font-size: 13px; line-height: 1.5; color: var(--sky); }
.offer__fine a, .offer__fine a:hover { color: var(--gold); }
.guarantee { margin-top: 16px; display: flex; gap: 14px; align-items: flex-start; background: var(--cream); border-radius: 16px; padding: 18px 20px; }
.guarantee svg { flex: 0 0 auto; }
.guarantee strong { display: block; font-size: 17px; font-weight: 800; color: var(--navy); }
.guarantee p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink); }

/* Perguntas frequentes */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 14px 18px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--navy); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 20px; height: 20px; background: var(--chevron) center / contain no-repeat; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { padding: 0 18px 18px; font-size: 15px; line-height: 1.55; color: var(--ink); }

/* Chamada final, rodapé e barra fixa no celular */
.final { background: var(--navy); padding: clamp(56px, 8vw, 88px) 0; }
.final .container { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.final h2 { font-size: clamp(28px, 6vw, 42px); line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; color: #ffffff; }
.final .btn { width: 100%; max-width: 460px; }
.final p { font-size: 14px; color: var(--pale); }
.footer { background: var(--navy-deep); padding: 28px 0 32px; }
.footer .container { display: flex; flex-direction: column; gap: 10px; }
.footer p { font-size: 12px; line-height: 1.6; color: var(--sky); }
.footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer a { font-size: 12px; color: var(--pale); min-height: 44px; display: inline-flex; align-items: center; }
.sticky-cta { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--navy-deep); border-top: 1px solid rgb(255 255 255 / 12%); }
.sticky-cta__price { display: flex; flex-direction: column; line-height: 1.2; }
.sticky-cta__price span { font-size: 12px; color: var(--sky); }
.sticky-cta__price strong { font-size: 20px; font-weight: 800; color: #ffffff; }
.sticky-cta .btn { min-height: 50px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* Página de obrigado */
.thanks-header { background: var(--navy); }
.thanks-header .container { min-height: 70px; display: flex; align-items: center; }
.thanks-header .brand { font-size: 16px; letter-spacing: 0; }
.thanks { max-width: 960px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 32px; }
.thanks h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.thanks__lead { font-size: 17px; line-height: 1.55; max-width: 640px; }
.steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: passo; }
.steps li { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgb(15 23 42 / 3%), 0 4px 12px rgb(15 23 42 / 4%); }
.steps h2 { font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--navy); }
.steps p { font-size: 15px; line-height: 1.5; }
.note-box { background: var(--fog); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.note-box h2 { font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--navy); }
.note-box p { font-size: 15px; line-height: 1.5; }
.thanks__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.thanks__actions p { font-size: 15px; }

/* Páginas legais (termos e privacidade) */
a.brand { text-decoration: none; }
a.brand:hover { color: #ffffff; }
.legal { max-width: 780px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.legal h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; color: var(--navy); }
.legal__date { font-size: 14px; color: var(--muted); }
.legal h2 { margin-top: 22px; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--navy); }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink); }
.legal ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.btn-texto { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--blue); text-decoration: underline; cursor: pointer; }
.btn-texto:hover { color: var(--blue-dark); }
.btn-texto:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* Aviso de cookies: criado pelo funil.js só quando há pixel configurado */
.cookie-banner { position: fixed; z-index: 20; left: 16px; right: 16px; bottom: 16px; max-width: 440px; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; background: #ffffff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgb(15 42 61 / 22%); }
.cookie-banner p { font-size: 14px; line-height: 1.5; }
.cookie-banner__acoes { display: flex; gap: 10px; }
.cookie-banner__btn { flex: 1 1 0; min-height: 44px; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 700; color: var(--navy); background: #ffffff; border: 2px solid var(--navy); border-radius: 10px; cursor: pointer; }
.cookie-banner__btn:hover { background: var(--fog); }
.cookie-banner__btn--aceitar { background: var(--navy); color: #ffffff; }
.cookie-banner__btn--aceitar:hover { background: var(--navy-soft); }
.cookie-banner__btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }