/* Dinâmicas de Sobrevivência — landing "caderno de campo"
   Narrativa visual: noite (apagão, lampião) → papel do guia → amanhecer.
   Linguagem do PDF: contorno grosso cor de tinta, oliva, ferrugem, areia, círculos numerados. */

:root {
  --tinta: #1e2016;
  --tinta-2: #45463a;
  --texto: #3a3a2e;
  --papel: #fbf5e8;
  --papel-2: #f2e7d0;
  --areia: #e6d3a8;
  --oliva: #5a6a2c;
  --oliva-2: #74883a;
  --oliva-esc: #2d3619;
  --noite: #141910;
  --ferrugem: #b4471c;
  --ferrugem-esc: #8e3412;
  --ambar: #f2b456;
  --agua: #7ccdee;
  --borda: 2.5px solid var(--tinta);
  --sombra: 5px 5px 0 var(--tinta);
  --sombra-p: 3px 3px 0 var(--tinta);
  --raio: 16px;
  --larg: 1160px;
  --mao: "Caveat", "Segoe Print", cursive;
  --titulo: "Montserrat", system-ui, sans-serif;
  --corpo: "Manrope", system-ui, sans-serif;
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .17 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --traco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11c40-6 90-9 194-5' fill='none' stroke='%23f2b456' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M18 14c50-4 100-5 160-3' fill='none' stroke='%23f2b456' stroke-width='2.5' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  --traco-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11c40-6 90-9 194-5' fill='none' stroke='%23b4471c' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papel); color: var(--texto);
  font: 500 1.0625rem/1.6 var(--corpo); overflow-x: hidden;
}
/* grão de papel por cima de tudo */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: var(--grao); opacity: .13; mix-blend-mode: multiply;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); color: var(--tinta); margin: 0; line-height: 1.08; letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); font-weight: 900; }
h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.faixa { width: min(100% - 32px, var(--larg)); margin-inline: auto; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--ambar); color: var(--tinta); padding: 8px 14px; border-radius: 8px; }
.pular:focus { left: 8px; }
section { position: relative; padding: clamp(64px, 9vw, 120px) 0; }

/* ---------- elementos da linguagem ---------- */
.olho {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font: 800 .8rem/1 var(--titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--oliva);
}
.olho::after { content: ""; height: 3px; flex: 0 1 72px; background: currentColor; border-radius: 2px; }
.olho-n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ferrugem); color: #fff; font-size: .78rem; letter-spacing: 0; border: 2px solid var(--tinta);
}
.cabeca { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.secao-sub { margin-top: 16px; font-size: 1.08rem; color: var(--tinta-2); max-width: 640px; }
h2 mark, h1 em { background: none; color: inherit; font-style: normal; }
h2 mark { background: var(--traco-f) no-repeat 0 92% / 100% .32em; padding-bottom: .06em; }

.ficha { background: var(--papel); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.fita {
  position: absolute; top: -14px; left: 50%; width: 92px; height: 26px; translate: -50% 0; rotate: -3deg; z-index: 2;
  background: rgba(230, 211, 168, .82); box-shadow: 0 1px 2px rgba(0,0,0,.12);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 4% 96%, 0 50%);
}
.nota { font: 700 1.45rem/1.05 var(--mao); color: var(--ferrugem); }
.nota svg { width: 54px; height: 40px; stroke-width: 2.2; }

/* botão: tátil, com contorno e sombra dura */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center;
  padding: 17px 28px; border-radius: 14px; border: 2.5px solid var(--tinta); background: var(--ferrugem); color: #fff;
  font: 800 1.08rem/1.2 var(--titulo); text-decoration: none; box-shadow: var(--sombra);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.cta svg { width: 20px; height: 20px; stroke-width: 2.6; transition: transform .15s; }
.cta:hover { background: #c4521f; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--tinta); }
.cta:hover svg { transform: translateX(3px); }
.cta:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.cta:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }
.cta-off { background: var(--areia); color: var(--tinta); box-shadow: none; cursor: default; }
.escuro .cta { box-shadow: 5px 5px 0 #000; border-color: #000; }

.micro { margin-top: 14px; font-size: .9rem; opacity: .85; }

/* ---------- topo fixo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .25s, box-shadow .25s; }
.topo .faixa { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.topo.solido { background: rgba(20, 25, 16, .92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.marca { display: flex; align-items: center; gap: 10px; color: var(--papel); text-decoration: none; font: 800 .98rem/1.15 var(--titulo); }
.marca-selo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ambar); color: var(--tinta); border: 2px solid #000; }
.marca-selo svg { width: 20px; height: 20px; stroke-width: 2.2; }
.topo-cta {
  padding: 9px 16px; border-radius: 10px; background: var(--ferrugem); color: #fff; border: 2px solid #000;
  font: 800 .88rem/1.1 var(--titulo); text-decoration: none; box-shadow: 3px 3px 0 #000; white-space: nowrap;
}
@media (max-width: 520px) { .marca > span:last-child { font-size: .86rem; max-width: 150px; } .topo-cta { padding: 8px 12px; font-size: .8rem; } }

/* ---------- HERO: noite de apagão ---------- */
.hero { padding: 0; background: var(--noite); color: var(--papel); overflow: hidden; isolation: isolate; }
.hero-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -3; }
.hero::before { /* leitura do texto à esquerda */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(16,20,12,.94) 0%, rgba(16,20,12,.78) 38%, rgba(16,20,12,.15) 70%, rgba(16,20,12,0) 100%),
              linear-gradient(0deg, rgba(16,20,12,.65) 0%, rgba(16,20,12,0) 30%);
}
.hero-luz { /* tremor suave do lampião */
  position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(30% 40% at 66% 64%, rgba(255,190,90,.6), rgba(255,190,90,0) 70%);
  animation: lampiao 5s ease-in-out infinite;
}
@keyframes lampiao { 0%,100% { opacity: .75 } 18% { opacity: .95 } 33% { opacity: .7 } 52% { opacity: 1 } 70% { opacity: .8 } 86% { opacity: .92 } }
.hero-grade { display: grid; gap: 28px; align-items: center; padding: 112px 0 96px; min-height: min(100svh, 980px); }
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; margin-bottom: 22px;
  background: var(--ambar); color: var(--tinta); border: 2px solid #000; border-radius: 6px 14px 14px 6px;
  font: 800 .78rem/1.1 var(--titulo); letter-spacing: .06em; text-transform: uppercase; rotate: -1.5deg; box-shadow: 3px 3px 0 #000;
}
.etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--noite); }
.hero h1 { color: var(--papel); font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.3rem); font-weight: 900; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.hero h1 em { color: var(--ambar); background: var(--traco) no-repeat 0 98% / 100% .22em; padding-bottom: .1em; }
.hero .sub { margin-top: 22px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 560px; color: #e9e1cd; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.chips li { padding: 6px 12px; border-radius: 99px; border: 1.5px dashed rgba(242,180,86,.65); color: #f3e7c9; font: 700 .85rem/1.2 var(--corpo); }
.edicao { margin: -8px 0 22px; padding: 10px 14px; border-left: 3px solid var(--ambar); background: rgba(242,180,86,.08); font-size: .95rem; max-width: 560px; color: #efe5cc; }
.hero .micro { color: #d8cfb8; }
.selos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: .88rem; color: #d8cfb8; }
.selos li { display: flex; align-items: center; gap: 7px; }
.selos svg { width: 17px; height: 17px; color: var(--ambar); }
.hero-visual { position: relative; max-width: 520px; justify-self: center; width: 100%; }
.hero-visual > img { filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(242,180,86,.18)); }
.hero-selo {
  position: absolute; left: -2%; bottom: 6%; width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; text-decoration: none;
  background: var(--ferrugem); color: #fff; border: 2.5px solid #000; box-shadow: 4px 4px 0 #000;
  outline: 2px dashed rgba(255,255,255,.55); outline-offset: -9px;
}
.hero-selo b { font: 900 2.2rem/1 var(--titulo); }
.hero-selo span { font: 800 .62rem/1.15 var(--titulo); text-transform: uppercase; letter-spacing: .06em; max-width: 70px; }
.nota-hero { /* a ponta da seta cai na tela do celular: 63% da largura, 21% da altura do mockup */
  position: absolute; right: 37%; bottom: 79%; color: var(--ambar); rotate: -3deg; text-align: right; max-width: 230px; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.9), 0 0 4px #000; }
.nota-hero svg { filter: drop-shadow(0 0 3px #000); }
.nota-hero svg { display: block; width: 64px; height: 60px; margin: 2px -4px 0 auto; rotate: 3deg; }
.rasgo { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 26px; color: var(--papel); z-index: 1; }
@media (min-width: 900px) {
  .hero-grade { grid-template-columns: 1.15fr .85fr; gap: 40px; }
  /* o produto fica "em cima da mesa", ao lado do lampião */
  .hero-visual { justify-self: center; align-self: center; max-width: 440px; margin: 0; }
  .hero-texto { padding-bottom: 20px; }
}
@media (max-width: 899px) {
  .hero-fundo img { object-position: 50% 100%; }
  .hero::before { background: linear-gradient(180deg, rgba(16,20,12,.93) 0%, rgba(16,20,12,.86) 52%, rgba(16,20,12,.35) 80%, rgba(16,20,12,.55) 100%); }
  .hero-grade { padding: 96px 0 70px; min-height: 0; }
  .hero-visual { max-width: 400px; margin-top: 34px; } /* espaço para a anotação "funciona até sem sinal" */
  .hero-luz { background: radial-gradient(60% 34% at 50% 82%, rgba(255,190,90,.55), rgba(255,190,90,0) 70%); }
  .nota-hero { font-size: 1.25rem; max-width: 190px; }
  .nota-hero svg { width: 44px; height: 42px; }
}

/* ---------- faixa de carimbos ---------- */
.faixa-aut { padding: 34px 0 10px; }
.faixa-aut .faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.faixa-aut p { font: 800 .72rem/1.3 var(--titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.faixa-aut ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.faixa-aut li {
  padding: 6px 12px; border: 2px solid rgba(45,54,25,.75); border-radius: 6px; color: var(--oliva-esc);
  font: 800 .82rem/1.1 var(--titulo); letter-spacing: .05em; text-transform: uppercase; opacity: .82;
}
.faixa-aut li:nth-child(odd) { rotate: -2deg; } .faixa-aut li:nth-child(even) { rotate: 1.5deg; }

/* ---------- por que agora: prancheta ---------- */
.topo-linhas { position: absolute; inset: 0; z-index: -1; background: url(img/amb/topo.svg) center / cover no-repeat; opacity: .5; pointer-events: none; }
/* em "Por que agora" as curvas ficam só atrás da prancheta, nunca atrás do texto */
.porque .topo-linhas { opacity: .4; -webkit-mask-image: linear-gradient(180deg, transparent 0 46%, #000 78%); mask-image: linear-gradient(180deg, transparent 0 46%, #000 78%); }
@media (min-width: 900px) { .porque .topo-linhas { -webkit-mask-image: linear-gradient(90deg, transparent 0 44%, #000 72%); mask-image: linear-gradient(90deg, transparent 0 44%, #000 72%); } }
.porque { isolation: isolate; }
.porque .faixa { display: grid; gap: 44px; align-items: start; }
.prancheta { position: relative; padding: 46px 22px 26px; }
.prancheta::before { /* prendedor */
  content: ""; position: absolute; top: -16px; left: 50%; translate: -50% 0; width: 120px; height: 34px;
  background: linear-gradient(#5d5f55, #3d3f36); border: 2.5px solid var(--tinta); border-radius: 8px 8px 14px 14px;
}
.linha { position: relative; }
.linha li { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 14px 0; border-bottom: 1.5px dashed rgba(30,32,22,.22); }
.linha li:last-child { border-bottom: 0; }
.data {
  align-self: start; padding: 5px 9px; border: 2px solid var(--ferrugem); color: var(--ferrugem); border-radius: 5px;
  font: 800 .72rem/1 var(--titulo); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; rotate: -3deg; margin-top: 2px;
}
.linha strong { font: 800 1.05rem/1.25 var(--titulo); color: var(--tinta); }
.linha p { font-size: .97rem; margin-top: 3px; }
@media (min-width: 900px) { .porque .faixa { grid-template-columns: .95fr 1.05fr; gap: 70px; } .pq-texto { position: sticky; top: 110px; } .prancheta { padding: 50px 34px 30px; rotate: .8deg; } }

/* ---------- recomendação → guia ---------- */
.autoridades { background: var(--papel-2); }
.recs { display: grid; gap: 40px 26px; }
.rec { position: relative; display: grid; gap: 16px; padding: 18px; }
.rec-img { display: block; border: 2px solid var(--tinta); border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
@media (min-width: 1040px) { .rec-img { aspect-ratio: 4 / 3; } }
.rec-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s; }
.rec-img:hover img { transform: scale(1.04); }
.rec-txt { font-size: .97rem; }
.no-guia { font: 800 .72rem/1 var(--titulo); text-transform: uppercase; letter-spacing: .12em; color: var(--oliva); margin-top: 4px; }
.refs { display: flex; flex-direction: column; gap: 6px; }
.refs a { display: flex; gap: 8px; align-items: baseline; text-decoration: none; font-size: .93rem; line-height: 1.35; color: var(--tinta); }
.refs a b { flex: none; padding: 2px 7px; border-radius: 5px; background: var(--oliva); color: #fff; font: 800 .7rem/1.4 var(--titulo); text-transform: uppercase; letter-spacing: .03em; }
.refs a:hover span, .refs a:hover { color: var(--ferrugem); }
.fontes { margin-top: 36px; font-size: .85rem; color: var(--tinta-2); text-align: center; }
@media (min-width: 640px) { .recs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .recs { grid-template-columns: repeat(4, 1fr); } .rec:nth-child(odd) { rotate: -.8deg; } .rec:nth-child(even) { rotate: .8deg; margin-top: 18px; } }

/* ---------- comparação ---------- */
.comparacao .faixa { display: grid; gap: 40px; align-items: center; }
.polaroid { position: relative; background: #fff; padding: 12px 12px 18px; border: var(--borda); border-radius: 6px; box-shadow: var(--sombra); rotate: -2.5deg; max-width: 420px; }
.polaroid img { border: 2px solid var(--tinta); border-radius: 3px; }
.polaroid .nota { margin-top: 10px; text-align: center; font-size: 1.4rem; color: var(--tinta-2); }
.comp { display: grid; gap: 18px; margin-top: 30px; }
.comp > div { padding: 22px 22px 24px; border-radius: var(--raio); }
.comp h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1.12rem; }
.comp li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: .98rem; line-height: 1.45; }
.comp li svg { width: 22px; height: 22px; margin-top: 0; padding: 3px; border-radius: 50%; stroke-width: 3; }
.comp-a { background: #e9e4d8; border: 2px dashed #9a978a; color: #6e6c62; }
.comp-a h3 { color: #6e6c62; }
.comp-a li svg { background: #b9b5a8; color: #fff; }
.comp-b { background: var(--papel); border: var(--borda); box-shadow: var(--sombra); }
.comp-b li svg { background: var(--oliva); color: #fff; }
@media (min-width: 900px) { .comparacao .faixa { grid-template-columns: .85fr 1.15fr; gap: 64px; } .comp { grid-template-columns: 1fr 1fr; } }

/* ---------- demonstração ---------- */
.demo { padding-bottom: 0; }
.anatomia { display: grid; gap: 44px; align-items: center; }
.anat-pagina { position: relative; max-width: 440px; justify-self: center; width: 100%; }
.anat-pagina img { border: var(--borda); border-radius: 12px; box-shadow: 10px 10px 0 var(--tinta); rotate: -1.5deg; }
.m {
  position: absolute; right: -16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ferrugem); color: #fff; border: 2.5px solid var(--tinta); font: 900 1rem/1 var(--titulo); box-shadow: var(--sombra-p);
}
.m1 { top: 5%; }
.anat { display: grid; gap: 18px; margin-top: 28px; }
.anat li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.anat b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ferrugem); color: #fff; border: 2.5px solid var(--tinta); font: 900 1rem/1 var(--titulo); }
.anat h3 { font-size: 1.1rem; margin-top: 6px; }
.anat p { font-size: .97rem; margin-top: 2px; }
@media (min-width: 900px) { .anatomia { grid-template-columns: .9fr 1.1fr; gap: 80px; } }

/* mural de páginas */
.mural { margin-top: clamp(64px, 8vw, 100px); padding: clamp(56px, 7vw, 90px) 0 clamp(64px, 8vw, 100px); background: var(--oliva-esc); color: var(--papel); isolation: isolate; position: relative; }
.mural .topo-linhas { opacity: .14; filter: invert(1); }
.mural h3 { color: var(--papel); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 900; }
.mural-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 36px; }
.mural-cab .nota { color: var(--ambar); }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px; }
.grade a { position: relative; display: block; background: #fff; padding: 7px; border: 2px solid #000; border-radius: 6px; box-shadow: 6px 6px 0 rgba(0,0,0,.45); transition: transform .25s, rotate .25s, box-shadow .25s; }
.grade a::before { content: ""; position: absolute; top: -12px; left: 50%; width: 70px; height: 22px; translate: -50% 0; rotate: 4deg; background: rgba(230,211,168,.85); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 4% 96%, 0 50%); }
.grade a:nth-child(4n+1) { rotate: -2.5deg; } .grade a:nth-child(4n+2) { rotate: 1.8deg; translate: 0 14px; }
.grade a:nth-child(4n+3) { rotate: -1.2deg; } .grade a:nth-child(4n) { rotate: 2.6deg; translate: 0 10px; }
.grade a:hover { rotate: 0deg; transform: scale(1.06); z-index: 2; box-shadow: 12px 12px 0 rgba(0,0,0,.45); }
.grade img { border-radius: 2px; }
@media (max-width: 760px) {
  .grade { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding: 18px 16px 26px; margin: 0 -16px; scrollbar-width: none; }
  .grade::-webkit-scrollbar { display: none; }
  .grade a { flex: 0 0 72%; scroll-snap-align: center; }
  .grade a:nth-child(n) { translate: none; }
}

/* ---------- amostra: página de caderno ---------- */
.fasc { background: var(--papel-2); }
.caderno {
  position: relative; max-width: 900px; margin-inline: auto; padding: 34px 22px 34px 54px;
  background:
    linear-gradient(90deg, transparent 38px, rgba(180,71,28,.45) 38px, rgba(180,71,28,.45) 40px, transparent 40px),
    #fffdf6;
  border: var(--borda); border-radius: 8px var(--raio) var(--raio) 8px; box-shadow: var(--sombra);
}
.caderno::before { /* furos de espiral */
  content: ""; position: absolute; left: 11px; top: 24px; bottom: 24px; width: 14px;
  background: radial-gradient(circle at 7px 7px, var(--papel-2) 5px, var(--tinta) 5.5px, var(--tinta) 6.5px, transparent 7px) 0 0 / 14px 40px repeat-y;
}
.fascs { display: grid; gap: 4px; }
.fascs li { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 13px 0; align-items: start; border-bottom: 1.5px solid rgba(90,106,44,.18); }
.fascs li:last-child { border-bottom: 0; }
.fasc-ico { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 2px; border: 2.5px solid var(--tinta); border-radius: 5px; color: var(--ferrugem); background: #fff; rotate: -4deg; }
.fasc-ico svg { width: 22px; height: 22px; stroke-width: 3.4; translate: 3px -3px; }
.fascs p { font-size: 1.02rem; line-height: 1.5; }
.fascs strong { color: var(--tinta); font-weight: 800; }
.ref-mini { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 5px; background: var(--ambar); color: var(--tinta); border: 1.5px solid var(--tinta); font: 800 .7rem/1.6 var(--titulo); text-decoration: none; text-transform: uppercase; white-space: nowrap; rotate: -2deg; }
.ref-mini:hover { background: var(--ferrugem); color: #fff; }
.centro { margin-top: 40px; text-align: center; }
.micro-claro { margin-top: 12px; font-size: .9rem; color: var(--tinta-2); }
@media (min-width: 900px) { .caderno { padding: 44px 48px 44px 86px; } .caderno { background: linear-gradient(90deg, transparent 62px, rgba(180,71,28,.45) 62px, rgba(180,71,28,.45) 64px, transparent 64px), #fffdf6; } .caderno::before { left: 22px; } }

/* ---------- situações ---------- */
.cens { display: grid; gap: 30px 24px; }
.cen { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.cen-img { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--borda); }
.cen-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cen:hover .cen-img img { transform: scale(1.05); }
.cen-corpo { padding: 20px 20px 22px; display: grid; gap: 10px; }
.cen-corpo > p { font-size: .97rem; }
.cen .refs { margin-top: 4px; }
@media (min-width: 640px) { .cens { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cens { grid-template-columns: repeat(4, 1fr); } }

/* ---------- tópicos ilustrados ---------- */
.topicos { background: var(--papel-2); }
.tops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tops li { display: flex; flex-direction: column; padding: 12px 12px 16px; transition: transform .2s, box-shadow .2s; }
.tops li:hover { transform: translate(-2px, -3px); box-shadow: 8px 8px 0 var(--tinta); }
.top-img { aspect-ratio: 1.45; margin-bottom: 10px; }
.top-img img { width: 100%; height: 100%; object-fit: contain; }
.top-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; }
.top-cab h3 { font-size: 1.02rem; overflow-wrap: break-word; min-width: 0; }
@media (max-width: 350px) { .top-cab h3 { font-size: .9rem; } }
.top-cab span { padding: 2px 8px; border-radius: 99px; background: var(--oliva); color: #fff; font: 800 .68rem/1.5 var(--titulo); white-space: nowrap; }
.tops p { margin-top: 6px; font-size: .88rem; line-height: 1.45; }
.tops li.destaque { grid-column: span 2; }
@media (min-width: 640px) {
  .tops { gap: 20px; }
  .tops li.destaque { flex-direction: row; align-items: center; gap: 22px; }
  .tops li.destaque .top-img { flex: 0 0 46%; margin: 0; }
}
@media (min-width: 1040px) {
  .tops { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .tops li { padding: 16px 16px 20px; }
  .tops li.destaque { grid-row: span 2; flex-direction: column; align-items: stretch; justify-content: center; background: #fffaf0; }
  .tops li.destaque .top-img { flex: none; margin-bottom: 18px; aspect-ratio: 1.15; }
  .tops li.destaque h3 { font-size: 1.5rem; }
  .tops li.destaque p { font-size: 1.02rem; }
  .top-cab h3 { font-size: 1.08rem; }
  .tops p { font-size: .9rem; }
}

/* ---------- momento: mesa com o kit ---------- */
.momento { background: #3b2a1c; color: var(--papel); text-align: center; overflow: hidden; }
.momento .frase { font: 900 clamp(1.9rem, 1.2rem + 3vw, 3.2rem)/1.08 var(--titulo); color: var(--papel); max-width: 900px; margin-inline: auto; text-wrap: balance; }
.momento .frase em { font-style: normal; color: var(--ambar); }
.mesa { position: relative; margin: 40px auto 34px; max-width: 1100px; border: 3px solid #000; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.mesa > img:first-child { width: 100%; }
.mesa-produto { position: absolute; left: 50%; top: 52%; width: 40%; translate: -50% -50%; filter: drop-shadow(0 16px 18px rgba(0,0,0,.45)); }
.mom-sub { max-width: 560px; margin: 0 auto 26px; color: #eadfc8; font-size: 1.08rem; }

/* ---------- objeções: fichas pautadas ---------- */
.objs { display: grid; gap: 24px; }
.objs li { position: relative; padding: 26px 22px 24px; background: #fffdf6; }
.objs li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--ferrugem); border-radius: 13px 13px 0 0; }
.obj-q { font: 700 1.6rem/1.08 var(--mao); color: var(--ferrugem-esc); margin-bottom: 12px; }
.objs li p:last-child { font-size: .97rem; line-height: 1.6; }
@media (min-width: 700px) { .objs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .objs { grid-template-columns: repeat(3, 1fr); gap: 30px; } .objs li:nth-child(3n+1) { rotate: -.7deg; } .objs li:nth-child(3n+2) { rotate: .5deg; } .objs li:nth-child(3n) { rotate: -.3deg; } }

/* ---------- oferta: página do guia ---------- */
.oferta { background: var(--noite); isolation: isolate; color: var(--papel); }
.oferta .topo-linhas { opacity: .1; filter: invert(1); }
.oferta .cabeca h2, .oferta .olho { color: var(--papel); }
.oferta .olho { color: var(--ambar); }
.oferta .cabeca { margin-inline: auto; text-align: center; }
.oferta .cabeca .olho { justify-content: center; }
.oferta .cabeca .olho::before { content: ""; height: 3px; flex: 0 1 72px; background: currentColor; border-radius: 2px; order: -1; }
.cartao { display: grid; max-width: 1040px; margin-inline: auto; overflow: hidden; color: var(--texto); box-shadow: 10px 10px 0 #000; border-color: #000; }
.cartao-img { padding: 34px 26px 10px; background: radial-gradient(70% 70% at 50% 45%, #fff6dc, var(--papel-2)); display: grid; place-items: center; }
.cartao-img img { width: min(100%, 520px); }
.cartao-corpo { padding: 26px 22px 30px; }
.barra-verde { display: block; margin: 0 0 16px; padding: 9px 16px; border-radius: 10px; background: var(--oliva); color: #fff; font: 800 1.15rem/1.2 var(--titulo); }
.stack { display: grid; gap: 12px; }
.stack li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.stack li > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ferrugem); color: #fff; border: 2px solid var(--tinta); font: 900 .9rem/1 var(--titulo); }
.stack strong { display: block; font: 800 1rem/1.3 var(--titulo); color: var(--tinta); }
.stack span { font-size: .92rem; line-height: 1.45; }
.ancora { margin-top: 20px; border: 2.5px solid var(--ferrugem); border-radius: 12px; overflow: hidden; background: #fff; }
.ancora b { display: block; padding: 6px 14px; background: var(--ferrugem); color: #fff; font: 800 .95rem/1.2 var(--titulo); }
.ancora span { display: block; padding: 10px 14px 12px; font-size: .95rem; line-height: 1.45; }
.preco-bloco { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 24px 0 18px; }
.preco { font: 900 clamp(2.6rem, 2rem + 2vw, 3.4rem)/1 var(--titulo); color: var(--tinta); }
.preco small { display: block; margin-top: 4px; font: 700 .85rem/1.2 var(--corpo); color: var(--tinta-2); }
.por-tecnica { rotate: -3deg; }
.cartao .cta { width: 100%; }
.pagamento { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: .87rem; color: var(--tinta-2); }
.pagamento svg { width: 17px; height: 17px; margin-top: 2px; }
.garantia { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 12px 14px; border: 2px dashed var(--oliva); border-radius: 12px; text-decoration: none; }
.garantia svg { width: 30px; height: 30px; color: var(--oliva); }
.garantia strong { display: block; font: 800 .95rem/1.2 var(--titulo); color: var(--tinta); }
.garantia span { font-size: .88rem; line-height: 1.4; }
@media (min-width: 900px) { .cartao { grid-template-columns: .95fr 1.05fr; } .cartao-img { padding: 40px 30px; border-right: var(--borda); } .cartao-corpo { padding: 34px 36px 36px; } }

/* ---------- garantia: carimbo ---------- */
.garantia-sec .faixa { display: grid; gap: 34px; justify-items: center; text-align: center; max-width: 860px; }
.selo-g { /* selo reto, igual ao do hero, em tamanho grande */
  width: 176px; height: 176px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center;
  background: var(--ferrugem); color: #fff; border: 2.5px solid var(--tinta); box-shadow: var(--sombra);
  outline: 2px dashed rgba(255,255,255,.6); outline-offset: -13px;
}
.selo-g small { font: 800 .78rem/1 var(--titulo); letter-spacing: .22em; padding-left: .22em; }
.selo-g b { font: 900 4rem/.9 var(--titulo); }
.garantia-sec .olho { justify-content: center; }
.garantia-sec .olho::before { content: ""; height: 3px; flex: 0 1 72px; background: currentColor; border-radius: 2px; order: -1; }
.gar-txt { margin: 16px auto 0; max-width: 640px; font-size: 1.07rem; }
.gar-passos { display: grid; gap: 22px; margin-top: 34px; position: relative; }
.gar-passos li { display: grid; justify-items: center; gap: 10px; position: relative; z-index: 1; }
.gar-passos b { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--oliva); color: #fff; border: 2.5px solid var(--tinta); box-shadow: var(--sombra-p); font: 900 1.25rem/1 var(--titulo); }
.gar-passos span { font: 700 .98rem/1.35 var(--titulo); color: var(--tinta); max-width: 200px; }
@media (min-width: 760px) {
  .garantia-sec .faixa { grid-template-columns: auto 1fr; text-align: left; justify-items: start; gap: 60px; }
  .garantia-sec .olho { justify-content: flex-start; } .garantia-sec .olho::before { display: none; }
  .gar-txt { margin-left: 0; }
  .gar-passos { grid-template-columns: repeat(3, 1fr); }
  .gar-passos::before { content: ""; position: absolute; top: 25px; left: 16%; right: 16%; border-top: 3px dashed var(--oliva); }
}

/* ---------- FAQ ---------- */
.faq { background: var(--papel-2); }
.faq .cabeca { margin-inline: auto; text-align: center; }
.faq .olho { justify-content: center; }
.faq .olho::before { content: ""; height: 3px; flex: 0 1 72px; background: currentColor; border-radius: 2px; order: -1; }
.faq-lista { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; }
details { background: var(--papel); border: var(--borda); border-radius: 14px; box-shadow: var(--sombra-p); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 17px 20px; font: 800 1.02rem/1.35 var(--titulo); color: var(--tinta); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ferrugem); color: #fff; font: 900 1.2rem/1 var(--titulo); transition: rotate .2s; }
details[open] summary::after { rotate: 45deg; }
details p { padding: 0 20px 18px; font-size: .98rem; }

/* ---------- fim: amanhecer ---------- */
.fim { padding: 0; background: #f6d9b4; overflow: hidden; isolation: isolate; }
.fim-fundo { position: absolute; inset: 0; z-index: -2; }
.fim-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 55%; }
.fim::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(251,240,222,.92) 0%, rgba(251,240,222,.72) 40%, rgba(251,240,222,0) 68%); }
.fim .faixa { padding: clamp(80px, 11vw, 150px) 0; }
@media (min-width: 761px) { .fim .faixa { min-height: 760px; display: flex; align-items: center; } }
.fim-texto { max-width: 560px; }
.fim h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem); text-wrap: balance; }
.fim-sub { margin: 16px 0 26px; font-size: 1.1rem; color: var(--tinta-2); }
.fim-gar { display: flex; gap: 8px; align-items: center; margin-top: 16px; font: 700 .92rem/1.3 var(--corpo); color: var(--oliva-esc); }
.fim-gar svg { width: 20px; height: 20px; }
.ps { margin-top: 26px; font: 700 1.38rem/1.2 var(--mao); color: var(--ferrugem-esc); max-width: 520px; }
@media (max-width: 760px) {
  .fim { background: #fbf0de; }
  .fim-fundo { position: relative; inset: auto; height: 300px; }
  .fim::before { inset: 220px 0 auto; height: 82px; background: linear-gradient(180deg, rgba(251,240,222,0), #fbf0de); }
  .fim .faixa { padding: 10px 0 80px; }
}

/* ---------- rodapé ---------- */
footer { background: var(--noite); color: #bdb6a3; padding: 44px 0 110px; font-size: .86rem; }
footer .faixa { display: grid; gap: 10px; }
footer strong { color: var(--papel); }
footer a { color: var(--ambar); }
.idiomas { display: flex; gap: 8px; margin-top: 10px; }
.idiomas a, .idiomas span { padding: 4px 10px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.25); text-decoration: none; font: 800 .78rem/1.3 var(--titulo); }
.idiomas span { background: var(--ambar); color: var(--tinta); border-color: var(--ambar); }

/* ---------- barra fixa no celular ---------- */
.fixo {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--noite); color: var(--papel); border: 2px solid #000; box-shadow: 4px 4px 0 rgba(0,0,0,.4);
  font-size: .88rem; line-height: 1.25;
}
.fixo[hidden] { display: none; }
.fixo strong { color: var(--ambar); }
.fixo a { flex: none; padding: 10px 16px; border-radius: 10px; background: var(--ferrugem); color: #fff; border: 2px solid #000; font: 800 .9rem/1.1 var(--titulo); text-decoration: none; }
@media (min-width: 900px) { .fixo { display: none !important; } }

/* ---------- entrada ao rolar ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .rv.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .hero-luz { animation: none; }
  .cta, .grade a, .tops li, .rec-img img, .cen-img img { transition: none; }
}

/* ---------- visualizador de páginas ---------- */
html:has(.lupa[open]) { overflow: hidden; }
.lupa { width: 100%; max-width: 100vw; height: 100%; max-height: 100dvh; margin: 0; padding: 64px 12px 18px; border: 0; background: transparent; overflow: hidden; }
.lupa[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.lupa::backdrop { background: rgba(14,17,10,.9); }
.lupa figure { margin: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.lupa img { min-height: 0; max-height: 100%; max-width: min(100%, 720px); width: auto; height: auto; object-fit: contain; background: #fff; border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.lupa figcaption { color: #f3e7c9; font: 700 .95rem/1.3 var(--titulo); text-align: center; }
.lupa button { position: fixed; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: var(--borda); background: var(--papel); color: var(--tinta); font: 900 1.7rem/1 var(--titulo); cursor: pointer; box-shadow: var(--sombra-p); }
.lupa-fechar { top: 12px; right: 12px; }
.lupa-nav { top: 50%; translate: 0 -50%; }
.lupa-ant { left: 10px; } .lupa-prox { right: 10px; }
.lupa.so-uma .lupa-nav { display: none; }
.lupa-cta { flex: none; padding: 12px 22px; border-radius: 12px; border: var(--borda); background: var(--ambar); color: var(--tinta); font: 800 1rem/1.2 var(--titulo); text-decoration: none; box-shadow: var(--sombra-p); }
@media (max-width: 640px) { .lupa-nav { top: auto; bottom: 18px; translate: none; } .lupa { padding-bottom: 78px; } .lupa-cta { position: fixed; bottom: 18px; } }