/**
 * ferramenta_gratis.css — gerador gratuito de post (/ferramenta-gratis).
 *
 * Isca de lead: a página é isolada do site (não usa header_public/footer_public)
 * e só é alcançada a partir do blog. Ver o cabeçalho de ferramenta-gratis.php.
 *
 * As fontes são auto-hospedadas em /assets/fonts (todas OFL). Vieram embutidas
 * em base64 no protótipo original; separá-las em arquivo faz o navegador baixar
 * só as do modelo que o visitante escolher, em vez das 12 sempre.
 */

@font-face{
  font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/dm-sans-400-700.woff2) format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/fonts/playfair-display-700.woff2) format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:italic; font-weight:400; font-display:swap;
  src:url(/assets/fonts/playfair-display-italic-400.woff2) format('woff2');
}
@font-face{
  font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/bebas-neue-400.woff2) format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-italic-300.woff2) format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/fonts/cormorant-garamond-700.woff2) format('woff2');
}
@font-face{
  font-family:'EB Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url(/assets/fonts/eb-garamond-italic-400.woff2) format('woff2');
}
@font-face{
  font-family:'Josefin Sans'; font-style:normal; font-weight:300; font-display:swap;
  src:url(/assets/fonts/josefin-sans-300.woff2) format('woff2');
}
@font-face{
  font-family:'Murecho'; font-style:normal; font-weight:300; font-display:swap;
  src:url(/assets/fonts/murecho-300.woff2) format('woff2');
}
@font-face{
  font-family:'Noto Sans'; font-style:italic; font-weight:700; font-display:swap;
  src:url(/assets/fonts/noto-sans-italic-700.woff2) format('woff2');
}
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:300 400; font-display:swap;
  src:url(/assets/fonts/sora-300-400.woff2) format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/space-mono-400.woff2) format('woff2');
}

:root{
  --bg:#f8f7ff; --surface:#ffffff; --surface-alt:#f2f0fb;
  --text:#1a1730; --text-muted:#6b6882; --text-faint:#9e9bb5; --border:#e4e1f0;
  --accent:#7c6cf8; --accent-dark:#6a5ae0; --accent-2:#9c85fb; --accent-soft:rgba(124,108,248,.14);
  --warm:#f0c050; --warm-bg:#fef9e7; --warm-text:#b88a00;
  --success:#22c55e;
  --shadow: 0 1px 4px rgba(80,60,180,.07), 0 12px 32px -14px rgba(80,60,180,.20);
  --shadow-lg: 0 24px 64px -20px rgba(80,60,180,.30), 0 4px 16px rgba(80,60,180,.10);
  --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px;
}
/* ===== Ponte com includes/lead_form.php =====
   O formulário compartilhado do site usa os nomes de variável do
   header_public.php (--text-primary/--text-secondary); a ferramenta usa os
   seus (--text/--text-muted). Como são aliases via var(), resolvem no momento
   do uso e acompanham o tema claro/escuro sem repetição. */
:root{
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#161328; --surface:#201c38; --surface-alt:#272247;
    --text:#f1efff; --text-muted:#b3aed0; --text-faint:#8983ab; --border:#332d55;
    --accent:#9c85fb; --accent-dark:#7c6cf8; --accent-2:#c2b2ff; --accent-soft:rgba(156,133,251,.20);
    --warm:#f0c050; --warm-bg:rgba(240,192,80,.14); --warm-text:#f0c050;
    --shadow: 0 1px 4px rgba(0,0,0,.35), 0 12px 32px -14px rgba(0,0,0,.55);
    --shadow-lg: 0 24px 64px -20px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#161328; --surface:#201c38; --surface-alt:#272247;
  --text:#f1efff; --text-muted:#b3aed0; --text-faint:#8983ab; --border:#332d55;
  --accent:#9c85fb; --accent-dark:#7c6cf8; --accent-2:#c2b2ff; --accent-soft:rgba(156,133,251,.20);
  --warm:#f0c050; --warm-bg:rgba(240,192,80,.14); --warm-text:#f0c050;
  --shadow: 0 1px 4px rgba(0,0,0,.35), 0 12px 32px -14px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 64px -20px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#f8f7ff; --surface:#ffffff; --surface-alt:#f2f0fb;
  --text:#1a1730; --text-muted:#6b6882; --text-faint:#9e9bb5; --border:#e4e1f0;
  --accent:#7c6cf8; --accent-dark:#6a5ae0; --accent-2:#9c85fb; --accent-soft:rgba(124,108,248,.14);
  --warm:#f0c050; --warm-bg:#fef9e7; --warm-text:#b88a00;
  --success:#22c55e;
  --shadow: 0 1px 4px rgba(80,60,180,.07), 0 12px 32px -14px rgba(80,60,180,.20);
  --shadow-lg: 0 24px 64px -20px rgba(80,60,180,.30), 0 4px 16px rgba(80,60,180,.10);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
button{font-family:inherit;}
h1,h2,h3,p{margin:0;}
h1,h2{font-family:'Playfair Display', Georgia, serif; letter-spacing:-.02em;}
h1 em, h2 em{font-style:italic; color:var(--accent);}
.eyebrow{
  text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; font-weight:700;
  color:var(--warm-text); display:inline-flex; align-items:center; gap:.55em;
  background:var(--warm-bg); border:1px solid color-mix(in srgb, var(--warm) 45%, transparent);
  padding:6px 14px; border-radius:100px;
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--warm); animation:pulse 2s infinite; flex-shrink:0;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.4;}}
.balance{text-wrap:balance;}

/* ---------- shell ---------- */
.shell{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---------- Cabeçalho ----------
   Mesma linguagem do includes/header_public.php do site — altura 64px, faixa de
   1140px, blur, e a marca com o mesmo selo quadrado — para a ferramenta não
   parecer outro produto. O que não se repete é o lado direito: "Entrar" e
   "Cadastro" não cabem aqui, porque a captação desta página acontece no
   download. Dois botões roxos disputando o topo com o "Gerar Post" era parte do
   que fazia a barra parecer improvisada. */
.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1140px; margin:0 auto; padding:0 32px; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-size:18px; font-weight:700; letter-spacing:-.04em;
  color:var(--text); text-decoration:none; transition:opacity .15s;
}
.logo:hover{opacity:.75;}
.logo-mark{
  width:32px; height:32px; border-radius:9px; background:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; flex-shrink:0;
}
.topbar-link{
  padding:8px 16px; font-size:14px; font-weight:500; white-space:nowrap;
  color:var(--text-muted); border-radius:var(--radius-sm); text-decoration:none;
  transition:background .2s, color .2s;
}
.topbar-link:hover{background:var(--surface-alt); color:var(--text);}

/* ---------- Passos ----------
   Três, um por tela (editor → resultado → download). O protótipo tinha quatro e
   os dois primeiros eram a MESMA tela: o indicador avançava sozinho quando a
   pessoa escolhia um modelo, e a ordem contradizia a numeração 1–4 dos painéis
   do editor ("2. Escolher modelo" no topo, "1. Escolha um modelo" no painel). */
.tg-passos-wrap{padding:26px 0 2px;}
.tg-passos{
  list-style:none; margin:0 auto; padding:0;
  display:flex; align-items:center; justify-content:center;
  max-width:600px;
}
.step{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  color:var(--text-faint); font-size:.85rem; font-weight:600;
  transition:color .25s ease;
}
.step-dot{
  width:26px; height:26px; border-radius:50%; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800;
  color:var(--text-faint); background:var(--surface); flex-shrink:0; transition:all .25s ease;
}
.step.done{color:var(--text-muted);}
.step.done .step-dot{background:var(--success); border-color:var(--success); color:#fff;}
.step.active{color:var(--text);}
.step.active .step-dot{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 0 4px var(--accent-soft);}
/* A linha é `flex:1` para os passos ficarem distribuídos na largura toda, em vez
   de amontoados no meio com sobra dos dois lados. */
.step-line{flex:1; height:2px; min-width:18px; background:var(--border); margin:0 14px; border-radius:2px; transition:background .3s ease;}
.step-line.done{background:var(--success);}

@media (max-width:620px){
  .tg-passos-wrap{padding:20px 0 0;}
  .step-label{display:none;}
  .step-line{margin:0 8px;}
  /* Sem rótulo, os números sozinhos não dizem nada: o passo atual mantém o dele. */
  .step.active .step-label{display:inline;}
}

.view{display:none;}
.view.active{display:block;}

/* ---------- HERO ---------- */
.hero{padding:40px 0 96px;}@media (max-width:900px){ }@media (max-width:900px){ }.btn{
  border:none; cursor:pointer; border-radius:var(--radius-sm); font-weight:600; font-size:.98rem;
  padding:15px 28px; display:inline-flex; align-items:center; gap:9px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap; text-decoration:none;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 4px 20px rgba(124,108,248,.35);}
.btn-primary:hover{background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 8px 28px rgba(124,108,248,.40);}
.btn-secondary{background:var(--surface); color:var(--text); border:1.5px solid var(--border);}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent-dark); background:var(--surface-alt);}.btn-block{width:100%; justify-content:center;}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none !important;}
.btn-lg{padding:18px 34px; font-size:1.05rem;}@media (hover:hover) and (pointer:fine){}@media (max-width:960px){}
@media (max-width:640px){}

/* ---------- sections generic ---------- */
section{padding:64px 0;}

/* ---------- TOOL VIEW ---------- */
.tool-head{padding:22px 0 8px; text-align:center;}
.tool-head h2{font-size:clamp(1.5rem,3vw,2rem); font-weight:800;}
.tool-head p{color:var(--text-muted); margin-top:8px;}

.editor-grid{display:grid; grid-template-columns:1fr .82fr; gap:32px; padding:32px 0 80px; align-items:start;}
@media (max-width:940px){ .editor-grid{grid-template-columns:1fr;} }

.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow);}
.panel + .panel{margin-top:24px;}
.panel h3{font-size:1.02rem; font-weight:800; display:flex; align-items:center; gap:9px;}
.panel-num{
  width:24px; height:24px; border-radius:50%; background:var(--surface-alt); color:var(--text-muted);
  font-size:.75rem; display:flex; align-items:center; justify-content:center; font-weight:800;
}

.dropzone{
  margin-top:16px; border:2px dashed var(--border); border-radius:var(--radius-md); padding:28px 18px;
  text-align:center; cursor:pointer; transition:border-color .18s, background .18s;
}
.dropzone:hover, .dropzone.drag{border-color:var(--accent); background:var(--accent-soft);}
.dropzone .mock-icon{color:var(--text-muted);}
.dropzone p{font-size:.9rem; color:var(--text-muted); margin-top:8px;}
.dropzone p b{color:var(--text); font-weight:700;}
.dz-preview{margin-top:14px; display:none; align-items:center; gap:12px; text-align:left;}
.dz-preview.show{display:flex;}
.dz-preview img{width:56px; height:56px; border-radius:10px; object-fit:cover; border:1px solid var(--border);}
.dz-preview .name{font-weight:700; font-size:.88rem;}
.dz-preview .remove{font-size:.8rem; color:var(--accent-dark); font-weight:700; cursor:pointer; background:none; border:none; padding:0; margin-top:2px;}

label.field-label{display:block; font-size:.82rem; font-weight:700; margin:18px 0 8px;}
label.field-label:first-child{margin-top:0;}
input[type=text], input[type=email], input[type=tel], textarea{
  width:100%; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px;
  font-size:.95rem; font-family:inherit; background:var(--surface); color:var(--text); transition:border-color .15s;
}
input:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
textarea{resize:vertical; min-height:84px; line-height:1.5;}
.char-count{font-size:.75rem; color:var(--text-muted); text-align:right; margin-top:4px;}

.mini-upload-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.mini-upload-row select{
  border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:9px 10px; font-size:.85rem;
  font-family:inherit; background:var(--surface); color:var(--text);
}
.mini-upload-row .remove{font-size:.8rem; color:var(--accent-dark); font-weight:700; cursor:pointer; background:none; border:none; padding:0;}
.logo-size-row{margin-top:10px;}
.logo-size-row .field-label{margin:0 0 6px;}
.logo-size-row input[type="range"]{width:100%; accent-color:var(--accent);}
input[type=color]{
  -webkit-appearance:none; appearance:none; width:56px; height:38px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:2px; background:var(--surface); cursor:pointer;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
input[type=color]::-webkit-color-swatch{border:none; border-radius:7px;}

.tpl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px;}
@media (max-width:520px){ .tpl-grid{grid-template-columns:repeat(2,1fr);} }
.tpl-card{
  border:2px solid var(--border); border-radius:var(--radius-md); padding:8px; cursor:pointer; background:var(--surface);
  transition:transform .15s, border-color .15s, box-shadow .15s; position:relative;
}
.tpl-card:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.tpl-card.selected{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.tpl-swatch{aspect-ratio:1; border-radius:9px; position:relative; overflow:hidden;}
.tpl-card .check{
  position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:.7rem; display:none; align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.tpl-card.selected .check{display:flex;}
.tpl-name{font-size:.76rem; font-weight:700; text-align:center; margin-top:7px;}
/* Etiqueta do modelo ("NOVO"/"DESTAQUE"/"OFICIAL"). Fica no cartão do seletor, e
   não dentro da arte: ali ela parecia parte do post, mas nunca ia para o PNG. */
.tpl-flag{
  position:absolute; top:2px; left:2px;
  font-size:.58rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 7px; border-radius:999px;
  background:var(--accent); color:#fff; box-shadow:var(--shadow);
}

/* mini swatch renderings per template (used in picker) */
.sw-editorial{background:#1a1a2e;}
.sw-editorial .sw-square{position:absolute; left:24%; right:24%; top:12%; height:40%; background:#fff; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.4);}
.sw-editorial .sw-accent{position:absolute; left:10%; bottom:26%; width:16%; height:4%; background:#C9A24B;}
.sw-editorial .sw-bar{position:absolute; left:10%; bottom:11%; width:55%; height:13%; background:#fff; border-radius:2px;}
.sw-luxonoir{background:#0a0a0a;}
.sw-luxonoir .sw-frame{position:absolute; inset:8%; border:1px solid rgba(212,175,55,.4);}
.sw-luxonoir .sw-square{position:absolute; left:16%; right:16%; top:16%; height:36%; background:#fff; border-radius:4px; box-shadow:0 0 8px rgba(0,0,0,.5);}
.sw-luxonoir .sw-bar{position:absolute; left:16%; right:22%; bottom:14%; height:9%; background:#fff; border-radius:2px; opacity:.9;}
.sw-impacto{background:#0a0a0a;}
.sw-impacto .sw-skew{position:absolute; top:0; right:16%; width:7%; height:100%; background:#FF4D2E; transform:skewX(-10deg);}
.sw-impacto .sw-bar{position:absolute; left:10%; bottom:12%; width:55%; height:16%; background:#fff; border-radius:2px;}
.sw-nordic{background:#FAFAF8;}
.sw-nordic .sw-top{position:absolute; top:0; left:0; right:0; height:4%; background:#4B6B58;}
.sw-nordic .sw-dot{position:absolute; left:10%; bottom:30%; width:7%; height:7%; background:#4B6B58;}
.sw-nordic .sw-bar{position:absolute; left:10%; bottom:12%; width:50%; height:9%; background:#4B6B58; opacity:.5; border-radius:2px;}
.sw-sereno{background:#6C8CA6;}
.sw-sereno .sw-tag{position:absolute; left:10%; top:10%; width:38%; height:10%; border-radius:6px; background:rgba(0,0,0,.2);}
.sw-sereno .sw-bar{position:absolute; left:10%; bottom:16%; width:55%; height:12%; background:#fff; border-radius:2px;}
.sw-sereno .sw-sub{position:absolute; left:10%; bottom:9%; width:40%; height:5%; background:rgba(255,255,255,.5); border-radius:2px;}
.sw-bistro{background:#1a0f0a;}
.sw-bistro .sw-circle{position:absolute; top:8%; right:8%; width:34%; height:34%; border-radius:50%; background:#D98E4A; opacity:.35;}
.sw-bistro .sw-bar{position:absolute; left:10%; bottom:12%; width:55%; height:14%; background:#fff; border-radius:2px;}
.sw-bistro .sw-cta{position:absolute; left:10%; bottom:6%; width:22%; height:6%; border:1px solid #D98E4A; border-radius:4px;}

.gen-btn-row{margin-top:22px;}
.spinner{width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; display:none;}
@keyframes spin{to{transform:rotate(360deg);}}
.btn.loading .spinner{display:inline-block;}
.btn.loading .btn-text::after{content:"Gerando...";}
.btn.loading .btn-text{font-size:0;}
.btn.loading .btn-text::after{font-size:.98rem;}

/* ---------- preview / IG frame (shared) ---------- */
.preview-col{position:sticky; top:88px;}
.ig-frame{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; max-width:380px; margin:0 auto;
}
.ig-head{display:flex; align-items:center; gap:10px; padding:14px 16px;}
.ig-avatar{
  width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.85rem;
}
.ig-uname{font-weight:700; font-size:.88rem;}
.ig-usub{font-size:.74rem; color:var(--text-muted);}
.ig-dots{margin-left:auto; color:var(--text-muted); font-weight:800;}

.post-card{position:relative; aspect-ratio:1080/1350; width:100%; overflow:hidden; background:var(--surface-alt);}
.pv-bg{position:absolute; inset:0; overflow:hidden; background-color:#c9bfa8;}
.pv-bg-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:center center;}
.pv-bg-empty{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:#8a8270; background:repeating-linear-gradient(135deg, #d8d0bd 0 14px, #cfc6b0 14px 28px); text-align:center; padding:0 16px;}
.zoom-hint{display:flex; align-items:center; gap:6px; justify-content:center; margin-top:10px; font-size:.75rem; color:var(--text-muted);}
.pv-bg-empty span{font-size:2rem;}
.pv-bg-empty small{font-size:.78rem; font-weight:600;}
.pv-overlay{position:absolute; inset:0;}
.pv-logo{position:absolute; max-height:11%; z-index:6; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.25); object-fit:contain;}
.pv-logo.pos-top{top:20px; left:50%; transform:translateX(-50%);}
.pv-logo.pos-bottom{bottom:34px; left:50%; transform:translateX(-50%);}

/* ---------------- template treatments (paid-app parity) ---------------- */
.tpl-editorial{background:#1a1a2e;}

.tpl-luxonoir{background:#0a0a0a;}

.tpl-impacto{background:#0a0a0a;}
.tpl-impacto .pv-scrim{background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.92));}
.tpl-impacto .pv-skew{position:absolute; top:0; right:32px; width:5px; height:100%; background:var(--tpl-accent); transform:skewX(-6deg);}
.tpl-impacto .pv-content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px 18px;}
.tpl-impacto .pv-label{font-family:'Space Mono',monospace; font-size:.5rem; letter-spacing:.2em; margin-bottom:8px; color:var(--tpl-accent);}
.tpl-impacto .pv-headline{font-family:'Bebas Neue',sans-serif; color:#fff; line-height:.95; text-transform:uppercase; margin-bottom:10px;}
.tpl-impacto .pv-subtitle{font-family:'Space Mono',monospace; color:rgba(255,255,255,.55); line-height:1.6; border-left:2px solid var(--tpl-accent); padding-left:10px;}

.tpl-nordic{background:#FAFAF8;}
.tpl-nordic .pv-scrim{background:linear-gradient(180deg, rgba(250,250,248,0), rgba(250,250,248,.9) 65%, rgba(250,250,248,1));}
.tpl-nordic .pv-topline{position:absolute; top:0; left:0; right:0; height:2px; background:var(--tpl-accent);}
.tpl-nordic .pv-content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:24px;}
.tpl-nordic .pv-dot{width:7px; height:7px; margin-bottom:16px; background:var(--tpl-accent);}
.tpl-nordic .pv-headline{font-family:'Sora',sans-serif; font-weight:400; color:var(--tpl-accent); line-height:1.18; margin-bottom:10px;}
.tpl-nordic .pv-divider{width:100%; height:1px; margin-bottom:10px;}
.tpl-nordic .pv-subtitle{font-family:'Sora',sans-serif; font-weight:300; line-height:1.6;}
.tpl-nordic .pv-cta{margin-top:14px; font-family:'Sora',sans-serif; font-size:.68rem; font-weight:400; color:var(--tpl-accent);}

.tpl-sereno{background:#3a4a52;}

.tpl-bistro{background:#1a0f0a;}
.tpl-bistro .pv-scrim{background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.85));}
.tpl-bistro .pv-circle{position:absolute; top:30px; right:24px; width:120px; height:120px; border-radius:50%; background:var(--tpl-accent); opacity:.25;}
.tpl-bistro .pv-content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px;}
.tpl-bistro .pv-headline{font-family:'Playfair Display',serif; font-weight:800; color:#fff; line-height:1.15; margin-bottom:8px;}
.tpl-bistro .pv-subtitle{font-family:'DM Sans',sans-serif; font-weight:400; color:rgba(255,255,255,.72); line-height:1.5; margin-bottom:8px;}
.tpl-bistro .pv-cta{border:1px solid var(--tpl-accent); padding:6px 12px; border-radius:10px; align-self:flex-start; font-family:'DM Sans',sans-serif; font-size:.625rem; font-weight:700; color:var(--tpl-accent); width:fit-content;}

.ig-actions{display:flex; align-items:center; gap:14px; padding:12px 16px 4px; font-size:1.15rem; color:var(--text);}
.ig-actions .push{margin-left:auto;}
.ig-caption{padding:6px 16px 16px; font-size:.85rem; line-height:1.45;}
.ig-caption b{font-weight:700;}
.ig-caption .muted{color:var(--text-muted);}

.hint-row{display:flex; align-items:center; gap:8px; justify-content:center; margin-top:14px; font-size:.8rem; color:var(--text-muted);}

/* ---------- RESULT view ---------- */
.result-wrap{padding:40px 0 90px;}
.result-head{text-align:center;}
.result-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem); font-weight:800;}
.result-head .lead{color:var(--text-muted); margin-top:10px; font-size:1.05rem;}
.result-post{margin:34px auto 0;}
.result-actions{display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap;}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,9,6,.55); backdrop-filter:blur(3px); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal{
  background:var(--surface); border-radius:var(--radius-lg); padding:34px; max-width:460px; width:100%;
  box-shadow:var(--shadow-lg); max-height:90vh; overflow:auto; transform:translateY(10px) scale(.98); transition:transform .22s ease;
}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}
.modal-close{float:right; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--text-muted); line-height:1;}
.modal h3{font-size:1.35rem; font-weight:800; padding-right:20px;}
.modal p.desc{color:var(--text-muted); margin-top:10px; font-size:.92rem; line-height:1.5;}
.modal form{margin-top:20px;}
.form-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}.modal .btn{margin-top:22px;}

/* ---------- POST-DOWNLOAD (conversion) ---------- */
.conv-wrap{padding:56px 0 96px;}
.conv-head{text-align:center; max-width:600px; margin:0 auto;}
.conv-head .eyebrow{justify-content:center;}
.conv-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem); font-weight:800; margin-top:14px;}
.conv-head p{color:var(--text-muted); margin-top:14px; font-size:1.05rem; line-height:1.6;}

.benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:44px 0 40px; max-width:920px; margin-left:auto; margin-right:auto;}
@media (max-width:820px){ .benefits-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .benefits-grid{grid-template-columns:1fr;} }
.benefit-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px;
  display:flex; gap:12px; align-items:flex-start; box-shadow:var(--shadow); transition:transform .18s ease;
}
.benefit-card:hover{transform:translateY(-3px);}
.benefit-icon{
  width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0;
}
.benefit-title{font-weight:700; font-size:.92rem;}
.benefit-desc{font-size:.8rem; color:var(--text-muted); margin-top:3px; line-height:1.4;}

.conv-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.conv-voltar{text-align:center; margin-top:22px;}
.conv-voltar button{
  background:none; border:none; padding:6px; cursor:pointer; font-family:inherit;
  font-size:.85rem; font-weight:600; color:var(--text-muted); transition:color .2s;
}
.conv-voltar button:hover{color:var(--accent-dark);}

footer{border-top:1px solid var(--border); padding:28px 0; text-align:center; color:var(--text-muted); font-size:.82rem;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .tpl-card:focus-visible, .dropzone:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}

/* ---------- Hero e rodapé da página ----------
   Não vieram no protótipo (que abria direto no editor). O H1 é o que sustenta a
   busca orgânica da isca, e o rodapé é a única ponte para o site em quem sai
   sem baixar nada. */
.tg-hero{padding:44px 0 4px; text-align:center;}
.tg-hero h1{font-size:clamp(1.9rem,4.2vw,2.9rem); font-weight:700; margin-top:16px; line-height:1.12;}
.tg-hero-sub{
  color:var(--text-muted); font-size:1.05rem; line-height:1.65;
  max-width:640px; margin:14px auto 0;
}
@media (max-width:640px){
  .tg-hero{padding:32px 0 0;}
  .tg-hero-sub{font-size:.98rem;}
}

.tg-footer{display:flex; flex-direction:column; gap:6px;}
.tg-footer a{color:var(--accent-dark); font-weight:600; text-decoration:none;}
.tg-footer a:hover{text-decoration:underline;}

/* ---------- Formulário de lead dentro do modal ----------
   O markup vem de includes/lead_form.php (mesmo formulário do /cadastro e do
   modal global do site), então só resta o encaixe de espaçamento. */
.modal .lf { margin-top: 20px; }
.modal .lf-rev { display: none; }