/* ============================================================
   66 SKILLS DE CONTABILIDADE · Sistema visual
   Herda os tokens do Site-Farol (vinho + dourado + papel creme)
   e corrige o contraste do dourado sobre fundo claro.
   ============================================================ */

:root{
  /* Vinho */
  --vinho:        #421424;
  --vinho-deep:   #2B0B16;
  --vinho-night:  #1C0610;
  --vinho-soft:   #5A2038;

  /* Dourado */
  --gold:         #C9A24B;   /* só sobre fundo escuro */
  --gold-bright:  #E7C878;
  --gold-pale:    #F1E2BC;
  --gold-deep:    #7A5E1C;   /* dourado legível sobre fundo claro (AA) */
  --champagne:    #F6EDD8;
  --gold-grad: linear-gradient(135deg,#B98A38 0%,#E7C878 38%,#F6EDD8 52%,#D8AE55 70%,#B98A38 100%);

  /* Papel */
  --paper:   #FFFFFF;
  --cream:   #FAF5EE;
  --cream-2: #F3EADC;

  /* Tinta */
  --ink:       #2B0B16;
  --ink-soft:  #63424D;
  --ink-faint: #7E626C;

  /* Linhas e sombras */
  --line-dark:  rgba(43,11,22,.12);
  --linha-campo: rgba(43,11,22,.46);   /* contorno de campo: 3:1 sobre papel e creme */
  --line-gold:  rgba(201,162,75,.30);
  --line-light: rgba(255,255,255,.14);
  --shadow-card: 0 2px 3px -1px rgba(28,6,16,.10), 0 14px 34px -18px rgba(28,6,16,.30);
  --shadow-lift: 0 4px 8px -2px rgba(28,6,16,.14), 0 26px 52px -22px rgba(28,6,16,.42);

  --maxw: 1180px;
  --nav-h: 68px;   /* 67 de conteudo + 1 de borda */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
/* ancora com nav sticky em cima: sem isto o titulo para embaixo dela */
[id]{scroll-margin-top:calc(var(--nav-h) + 18px);}
html,body{overflow-x:clip;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0;text-wrap:balance;}
h1,h2{letter-spacing:-.02em;}
p{margin:0;text-wrap:pretty;}
/* Anel de foco que funciona nos dois fundos: traço vinho com halo dourado
   sobre papel, e o inverso sobre vinho. Nunca conte com um só. */
:focus-visible{
  outline:3px solid var(--vinho);
  outline-offset:2px;
  border-radius:2px;
  box-shadow:0 0 0 6px rgba(231,200,120,.55);
}
.on-dark :focus-visible,.on-deep :focus-visible,.hero :focus-visible,
.nav :focus-visible,.mobile-menu :focus-visible,.buybar :focus-visible,.footer :focus-visible{
  outline-color:var(--gold-bright);
  box-shadow:0 0 0 6px rgba(28,6,16,.75);
}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;}
@media (min-width:900px){ .wrap{padding:0 40px;} }
.narrow{max-width:760px;}
.section{padding:112px 0;}
.section.tight{padding:76px 0;}
.section.ample{padding:128px 0;}
.on-cream{background:var(--cream);}
.on-paper{background:var(--paper);}
.on-cream-2{background:var(--cream-2);}
/* fronteira creme -> creme-2 quase não aparece só pela cor: marcar com linha */
.on-cream+.on-cream-2,.on-cream-2+.on-cream{border-top:1px solid var(--line-dark);}
.on-dark{background:var(--vinho);color:var(--champagne);}
.on-deep{background:linear-gradient(165deg,var(--vinho) 0%,var(--vinho-deep) 62%,var(--vinho-night) 100%);color:var(--champagne);}
.on-dark h1,.on-dark h2,.on-dark h3,.on-deep h1,.on-deep h2,.on-deep h3{color:var(--champagne);}
.on-dark p,.on-deep p{color:rgba(246,237,216,.82);}

/* visível só para leitor de tela */
.so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* pousa em cima da nav vinho, então precisa de fundo claro próprio */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--champagne);color:var(--vinho-night);
  padding:12px 20px;font-weight:800;border-radius:0 0 4px 0;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.skip-link:focus{left:12px;top:12px;}
.skip-link:focus-visible{outline-color:var(--vinho-night);box-shadow:0 0 0 6px rgba(231,200,120,.9);}
main:focus{outline:none;}

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-family:var(--font-body);font-weight:800;font-size:11.5px;
  letter-spacing:.30em;text-transform:uppercase;color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;display:inline-block;}
.on-dark .eyebrow,.on-deep .eyebrow,.hero .eyebrow,.page-hero .eyebrow{color:var(--gold-bright);}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{content:"";width:24px;height:1px;background:currentColor;display:inline-block;}

/* ---------- Tipografia de seção ---------- */
/* escala da marca: o Site-Farol usa h1 até 96px e h2 até 58px.
   Aqui fica um degrau abaixo, porque o texto é mais denso, mas perto. */
h1{font-size:clamp(38px,7vw,84px);}
h1 em{font-style:normal;color:var(--gold-bright);}
h1 .quebra{display:block;}
h2{font-size:clamp(29px,4.4vw,54px);}
h3{font-size:clamp(19px,2.4vw,24px);}
.lede{font-size:clamp(17px,2.2vw,19.5px);color:var(--ink-soft);max-width:62ch;}
.on-dark .lede,.on-deep .lede{color:rgba(246,237,216,.80);}
.section-head{max-width:760px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
.section-head .lede{margin-top:20px;}
.body-copy{max-width:64ch;}
.body-copy p+p{margin-top:1.05em;}
.pull{
  border-left:3px solid var(--gold);padding:2px 0 2px 22px;margin-top:34px;
  font-family:var(--font-display);font-size:clamp(21px,3.2vw,32px);line-height:1.3;
  color:var(--vinho);max-width:40ch;
}
.pull .g{color:var(--gold-deep);}
.on-dark .pull .g,.on-deep .pull .g{color:var(--gold-bright);}
.on-dark .pull,.on-deep .pull{color:var(--gold-bright);}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:800;font-size:15px;letter-spacing:.015em;
  padding:16px 30px;border-radius:3px;border:1px solid transparent;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  text-align:center;line-height:1.3;
}
.btn .arrow{transition:transform .2s ease;}
.btn:hover .arrow{transform:translateX(4px);}
.btn-gold{background:var(--gold-grad);color:var(--vinho-night);box-shadow:0 10px 30px -14px rgba(201,162,75,.85);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 38px -16px rgba(201,162,75,.9);}
.btn-dark{background:var(--vinho);color:var(--champagne);}
.btn-dark:hover{background:var(--vinho-soft);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--champagne);border-color:rgba(246,237,216,.45);}
.btn-ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright);}
.btn-outline{background:transparent;color:var(--vinho);border-color:var(--line-dark);}
.btn-outline:hover{border-color:var(--vinho);}
.btn-block{width:100%;}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none;}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(66,20,36,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,162,75,.22);}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:var(--nav-h);display:flex;align-items:center;gap:24px;}
.brand{display:flex;align-items:center;gap:12px;color:var(--champagne);font-family:var(--font-display);font-size:16.5px;font-weight:600;line-height:1.15;}
.brand img{height:34px;width:auto;flex:0 0 auto;}
.brand .b-linha{display:flex;flex-direction:column;}
.brand .b-linha small{font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold-bright);}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:600;color:rgba(246,237,216,.80);}
.nav-links a:hover,.nav-links a.active{color:var(--gold-bright);}
.nav-cta{padding:11px 20px;font-size:13.5px;}
.nav-burger{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto;}
.nav-burger span{display:block;width:22px;height:2px;background:var(--champagne);margin:4px 0;transition:.25s;}
/* fixo abaixo da nav: abrir não empurra o hero nem escapa da tela ao rolar */
.mobile-menu{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:59;
  background:var(--vinho-deep);border-bottom:1px solid rgba(201,162,75,.2);
  padding:8px 24px 20px;max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  box-shadow:0 24px 40px -20px rgba(0,0,0,.6);
}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block;padding:13px 0;color:rgba(246,237,216,.88);font-weight:600;border-bottom:1px solid rgba(246,237,216,.08);}
.mobile-menu .mm-cta{color:var(--gold-bright);border-bottom:0;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:76px 0 84px;
  background:radial-gradient(120% 92% at 50% -22%,#5A2038 0%,var(--vinho) 38%,var(--vinho-deep) 82%,var(--vinho-night) 100%);
  color:var(--champagne);border-bottom:1px solid var(--line-gold);}
.beam{position:absolute;top:-18%;left:50%;width:min(1100px,100%);height:150%;transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,transparent 0deg,rgba(201,162,75,.16) 18deg,transparent 40deg,transparent 320deg,rgba(201,162,75,.12) 344deg,transparent 360deg);
  filter:blur(2px);opacity:.9;}
.hero-inner{position:relative;z-index:3;max-width:880px;}
.hero h1{margin-top:20px;}
.hero .lede{margin-top:24px;color:rgba(246,237,216,.84);}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;align-items:center;}
.hero-def{margin-top:18px;font-size:15.5px;color:rgba(246,237,216,.72);max-width:58ch;}
.hero-note{margin-top:26px;font-size:14.5px;color:rgba(246,237,216,.76);border-left:2px solid var(--gold);padding-left:14px;max-width:56ch;}
.hero-strip{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:52px;border-top:1px solid rgba(246,237,216,.14);}
.hero-strip>div{padding:22px 22px 0;border-right:1px solid rgba(246,237,216,.10);}
.hero-strip>div:last-child{border-right:0;}
.hero-strip .k{font-family:var(--font-display);font-size:26px;color:var(--gold-bright);}
.hero-strip .v{font-size:14px;color:rgba(246,237,216,.70);margin-top:4px;}

.page-hero{padding:74px 0 62px;text-align:center;}
.page-hero .hero-inner{margin:0 auto;max-width:780px;}
.page-hero .lede{margin-left:auto;margin-right:auto;}

/* ---------- Cards genéricos ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.card{background:var(--paper);border:1px solid var(--line-dark);border-radius:6px;padding:30px 28px;box-shadow:var(--shadow-card);}
.card h3{margin-bottom:10px;font-size:22px;}
.card p{color:var(--ink-soft);font-size:15.5px;max-width:62ch;}
.card .num{font-family:var(--font-display);font-size:13px;letter-spacing:.2em;color:var(--gold-deep);font-weight:700;margin-bottom:10px;}
.ic{width:40px;height:40px;color:var(--gold-deep);margin-bottom:16px;stroke-width:1.4;}
.step .ic{margin-bottom:12px;}

/* ---------- Passos da demonstração ---------- */
.slug{
  display:inline-block;font-family:var(--font-mono);font-size:14px;
  background:var(--vinho);color:var(--champagne);padding:8px 14px;border-radius:3px;word-break:break-all;
}
.mono{font-family:var(--font-mono);font-size:.92em;color:var(--vinho);font-weight:600;}
.on-dark .mono,.on-deep .mono{color:var(--gold-bright);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;}
.step{background:var(--paper);border:1px solid var(--line-dark);border-top:3px solid var(--gold);border-radius:5px;padding:26px 24px;box-shadow:var(--shadow-card);}
.step .num{font-family:var(--font-display);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;display:block;margin-bottom:8px;}
.step h3{margin-bottom:12px;font-size:22px;}
.step .hint{font-size:14.5px;color:var(--ink-faint);margin-bottom:16px;}
.ticks{margin:0;padding:0;list-style:none;}
.ticks li{position:relative;padding-left:20px;margin-bottom:11px;font-size:15.3px;line-height:1.55;max-width:62ch;}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--gold);border-radius:50%;}
.ticks li:last-child{margin-bottom:0;}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-dark);border-radius:5px;background:var(--paper);margin-top:14px;}
table.memoria{border-collapse:collapse;width:100%;min-width:680px;font-size:13.5px;}
table.memoria th,table.memoria td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-dark);white-space:nowrap;}
table.memoria th{background:var(--vinho);color:var(--champagne);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;}
table.memoria td{color:var(--ink-soft);font-family:var(--font-mono);}
table.memoria tr:last-child td{border-bottom:0;font-weight:700;color:var(--vinho);}
.table-note{font-size:14.5px;color:var(--ink-faint);margin-top:12px;max-width:68ch;}
table.memoria caption{
  caption-side:top;text-align:left;padding:14px 16px;font-size:13px;
  color:var(--ink-faint);background:var(--paper);border-bottom:1px solid var(--line-dark);
}

/* trecho literal do arquivo da skill */
.amostra{
  margin:0;padding:24px 22px;background:var(--vinho-night);color:var(--champagne);
  border-radius:6px;border-left:3px solid var(--gold);overflow-x:auto;
  font-family:var(--font-mono);font-size:13.5px;line-height:1.8;
  box-shadow:var(--shadow-lift);
}
.amostra pre{margin:0;font:inherit;color:inherit;}
.amostra code{font-family:inherit;white-space:pre;}

.limits{margin-top:38px;background:var(--vinho);color:var(--champagne);border-radius:6px;padding:32px 30px;}
.limits h3{color:var(--gold-bright);margin-bottom:16px;}
.limits ul{margin:0;padding:0;list-style:none;}
.limits li{position:relative;padding-left:24px;margin-bottom:13px;font-size:15.5px;color:rgba(246,237,216,.90);max-width:62ch;}
.limits li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--gold);}
.limits li:last-child{margin-bottom:0;}

/* ---------- Catálogo das 66 ---------- */
.cat-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px;}
.cat-search{
  flex:1 1 260px;min-width:220px;max-width:420px;font-family:var(--font-body);font-size:15px;
  padding:13px 16px;border:1px solid var(--linha-campo);border-radius:3px;background:var(--paper);color:var(--ink);
}
.cat-search::placeholder{color:var(--ink-faint);}
.cat-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.cat-pill{
  font-family:var(--font-body);font-size:13.5px;font-weight:700;letter-spacing:.02em;
  min-height:44px;padding:10px 18px;border-radius:100px;border:1px solid var(--linha-campo);
  background:var(--paper);color:var(--ink-soft);cursor:pointer;transition:.2s;
}
.cat-pill:hover{border-color:var(--vinho);}
.cat-pill[aria-pressed="true"]{background:var(--vinho);color:var(--champagne);border-color:var(--vinho);}
.cat-count{font-size:14px;color:var(--ink-faint);margin-top:16px;}
.frentes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:22px;}
.frente{background:var(--paper);border:1px solid var(--line-dark);border-radius:6px;padding:26px 24px;box-shadow:var(--shadow-card);}
.frente h3{font-size:19px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.frente .contagem{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:800;}
.frente .oquefaz{font-size:14.8px;color:var(--ink-soft);margin-bottom:16px;max-width:62ch;}
.lista-skills{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px;}
.lista-skills li{
  font-family:var(--font-mono);font-size:12.5px;line-height:1.3;
  background:var(--cream-2);color:var(--vinho);padding:6px 10px;border-radius:3px;
  border:1px solid rgba(66,20,36,.09);word-break:break-word;
}
.lista-skills li.destaque{background:var(--gold-grad);color:var(--vinho-night);font-weight:700;border-color:var(--gold);}
/* O realce da busca precisa se separar do chip creme em que ele vive.
   Dourado sobre creme dá 1,3:1 e some. Invertido para vinho, salta. */
mark{background:var(--vinho);color:var(--champagne);padding:1px 3px;border-radius:2px;font-weight:700;}
.frente[hidden]{display:none;}
.empty-state{margin-top:22px;padding:26px;border:1px dashed var(--line-gold);border-radius:6px;color:var(--ink-soft);background:rgba(201,162,75,.06);}

/* ---------- Comparação ---------- */
.groups{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.group{border-radius:6px;padding:30px 28px;border:1px solid var(--line-light);}
.group.a{background:rgba(246,237,216,.05);}
.group.b{background:rgba(201,162,75,.10);border-color:var(--line-gold);}
.group .tag{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--gold-bright);margin-bottom:12px;}
.group h3{margin-bottom:16px;font-size:28px;}
.group ul{margin:0;padding:0;list-style:none;}
.group li{position:relative;padding-left:24px;margin-bottom:12px;font-size:15.5px;color:rgba(246,237,216,.88);max-width:62ch;}
.group li::before{content:"";position:absolute;left:0;top:.6em;width:11px;height:2px;background:var(--gold);}
.group.a li::before{background:rgba(246,237,216,.35);}

/* ---------- Autora ---------- */
.autora{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;margin-top:34px;}
.autora-foto{width:100%;border-radius:6px;box-shadow:var(--shadow-lift);margin-bottom:20px;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;}
.hero-logo{height:74px;width:auto;margin-bottom:26px;}
.footer-brand img{height:44px;width:auto;margin-bottom:16px;}
.handle{font-weight:800;color:var(--gold-deep);letter-spacing:.02em;font-size:15px;margin-top:1.05em;}

/* ---------- FAQ ---------- */
.faq{margin-top:30px;}
.faq details{border-bottom:1px solid var(--line-dark);}
.faq summary{
  max-width:64ch;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;
  font-size:clamp(17px,2.2vw,20px);color:var(--vinho);padding:20px 44px 20px 0;position:relative;line-height:1.34;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--font-body);font-weight:400;font-size:27px;color:var(--gold-deep);line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq .resposta{padding:0 0 24px;font-size:16px;color:var(--ink-soft);max-width:70ch;}
.faq .resposta p+p,.faq .resposta ul{margin-top:.9em;}
.faq .resposta ul{padding-left:20px;}
.faq .resposta li{margin-bottom:7px;}

/* ---------- Oferta / preço ---------- */
.offer{max-width:560px;margin:38px auto 0;background:rgba(246,237,216,.06);border:1px solid var(--line-gold);border-radius:8px;padding:34px 30px;text-align:center;}
.offer .rot{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-bright);font-weight:800;display:block;margin-bottom:14px;}
.offer .preco{font-family:var(--font-display);font-size:clamp(42px,8vw,58px);line-height:1;color:var(--champagne);}
.offer .preco small{font-size:.42em;letter-spacing:.02em;vertical-align:.42em;margin-right:4px;color:var(--gold-bright);}
.offer .parcela{margin-top:12px;font-size:15.5px;color:rgba(246,237,216,.78);}
.offer .btn{margin-top:26px;}
.offer .selo-garantia{margin-top:18px;font-size:13.5px;color:rgba(246,237,216,.78);text-align:left;}
.offer .selo-teste{
  margin-top:14px;padding:14px 16px;border-radius:4px;text-align:left;
  background:rgba(201,162,75,.12);border:1px solid var(--line-gold);
  font-size:14px;color:var(--gold-pale);
}
.offer-list{margin:24px 0 0;padding:0;list-style:none;text-align:left;border-top:1px solid rgba(246,237,216,.14);padding-top:22px;}
.offer-list li{position:relative;padding-left:26px;margin-bottom:11px;font-size:15px;color:rgba(246,237,216,.88);max-width:60ch;}
.offer-list li::before{content:"";position:absolute;left:2px;top:.42em;width:9px;height:5px;border-left:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);transform:rotate(-45deg);}
/* o requisito pago de terceiro não pode se disfarçar de benefício */
.offer-list li.atencao{
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(246,237,216,.16);
  color:var(--gold-pale);font-weight:700;
}
.offer-list li.atencao::before{
  content:"!";top:.9em;left:0;width:auto;height:auto;border:0;transform:none;
  font-weight:800;color:var(--gold-bright);
}

/* ---------- Barra fixa de compra ---------- */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(110%);
  transition:transform .3s ease;background:rgba(28,6,16,.97);border-top:1px solid var(--line-gold);
  padding:12px 24px;backdrop-filter:blur(8px);
  visibility:hidden;   /* tira o botão da ordem de tabulação enquanto oculto */
}
.buybar.show{transform:translateY(0);visibility:visible;}
.buybar-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.buybar .txt{color:var(--champagne);font-size:14.5px;}
.buybar .txt b{color:var(--gold-bright);font-weight:800;}
.buybar .btn{margin-left:auto;padding:13px 24px;font-size:14px;}
/* sentinelas do IntersectionObserver: precisam de área, não podem ser 0x0 */
.sentinela{display:block;width:100%;height:1px;}

/* ---------- Formulários / painel ---------- */
.panel{background:var(--paper);border:1px solid var(--line-dark);border-radius:8px;padding:34px 30px;box-shadow:var(--shadow-card);}
.panel.narrow-form{max-width:470px;margin:0 auto;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;}
.field input{width:100%;font-family:var(--font-body);font-size:16px;padding:13px 15px;border:1px solid var(--linha-campo);border-radius:3px;background:var(--cream);color:var(--ink);}
/* D4: campo desabilitado tinha exatamente a mesma cara do habilitado */
.field input:disabled,.cat-search:disabled{
  background:var(--cream-2);border-style:dashed;color:var(--ink-faint);cursor:not-allowed;
}
.field input:focus{border-color:var(--vinho);background:var(--paper);}
.form-alt{margin-top:18px;font-size:14.5px;color:var(--ink-soft);text-align:center;}
.form-alt button{background:none;border:0;padding:0;font:inherit;font-weight:800;color:var(--vinho);cursor:pointer;text-decoration:underline;}
.msg{margin-top:16px;padding:13px 16px;border-radius:4px;font-size:14.5px;display:none;}
.msg.show{display:block;}
.msg[hidden]{display:none !important;}   /* hidden sempre vence show */
.msg.err{background:#FCEDEE;border:1px solid #E4A9AE;color:#8A1C28;}
.msg.ok{background:#EDF6EF;border:1px solid #A9CDB4;color:#1F5B32;}
.msg.info{background:rgba(201,162,75,.12);border:1px solid var(--line-gold);color:#6A5218;}
/* sobre fundo escuro o info precisa inverter, senão fica ilegível */
.on-dark .msg.info,.on-deep .msg.info,.offer .msg.info{
  background:rgba(28,6,16,.62);border-color:var(--line-gold);color:var(--gold-bright);
}

.acct-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;margin-bottom:26px;}
.acct-head .who{font-size:15px;color:var(--ink-soft);}
.acct-head .who b{color:var(--vinho);}
.compra{border:1px solid var(--line-dark);border-radius:6px;padding:24px;background:var(--paper);margin-bottom:16px;}
.compra .top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline;}
.compra h3{font-size:20px;}
.badge{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:100px;}
.badge.ativo{background:#EDF6EF;color:#1F5B32;border:1px solid #A9CDB4;}
.badge.pend{background:rgba(201,162,75,.14);color:#6A5218;border:1px solid var(--line-gold);}
.badge.fim{background:#F4F1F2;color:#5B4048;border:1px solid var(--line-dark);}
.compra .meta{font-size:14px;color:var(--ink-faint);margin-top:6px;}
.compra .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
.dl-list{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-dark);}
.dl-list li{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line-dark);flex-wrap:wrap;}
.dl-list .nome{font-family:var(--font-mono);font-size:13.5px;color:var(--vinho);}
.dl-list .peso{font-size:13px;color:var(--ink-faint);}

/* ---------- Rodapé ---------- */
.footer{background:var(--vinho-night);color:rgba(246,237,216,.60);padding:54px 0 30px;font-size:14.5px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px;}
.footer h3,.footer h4{font-family:var(--font-body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:14px;font-weight:800;}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links a:hover{color:var(--gold-bright);}
.footer-bottom{margin-top:38px;padding-top:22px;border-top:1px solid rgba(246,237,216,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(246,237,216,.66);}
.footer-bottom a{text-decoration:underline;text-underline-offset:2px;}
.footer-bottom a:hover{color:var(--gold-bright);}
.footer-endereco{width:100%;color:rgba(246,237,216,.60);}

/* ---------- Animação de entrada ----------
   Quem libera o .in é o IntersectionObserver do site.js. Sem JavaScript,
   opacity:0 esconderia a página inteira, então a animação só existe quando
   há script para desfazê-la. */
@media (scripting: enabled){
  /* .js-ok e posto pelo site.js na primeira linha. Script que nao roda,
     por falha de rede ou excecao, nao pode esconder a pagina inteira. */
  .js-ok .fade-up{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
  .js-ok .fade-up.in{opacity:1;transform:none;}
}

/* ---------- Textura e micro-interação da marca ----------
   Os três blocos abaixo vêm do Site-Farol (styles.css, linhas 469 a 493).
   São o que faz a marca parecer cara: grão de filme, raios do farol atrás
   do topo, e o brilho que atravessa o botão dourado no hover. */

body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.30;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero::before,.page-hero::before{
  content:"";position:absolute;left:50%;top:-6%;z-index:0;pointer-events:none;
  width:1300px;height:1300px;transform:translateX(-50%);opacity:.09;
  background:repeating-conic-gradient(from 0deg at 50% 0%,
    transparent 0deg 5deg, rgba(231,200,120,.6) 5deg 5.3deg, transparent 5.3deg 10deg);
  -webkit-mask:radial-gradient(closest-side,#000,transparent 60%);
          mask:radial-gradient(closest-side,#000,transparent 60%);
}

.btn-gold{position:relative;overflow:hidden;}
.btn-gold::after{
  content:"";position:absolute;top:0;left:-125%;width:55%;height:100%;
  transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.btn-gold:hover::after{animation:btnShine .85s cubic-bezier(.2,.7,.2,1);}
@keyframes btnShine{ to{ left:135%; } }

/* ---------- Responsivo ---------- */
@media (max-width:1100px) and (min-width:881px){
  /* Abaixo de 1100px tres colunas espremem o corpo para 23 caracteres por
     linha, e uma coluna so estica para quase 100. Duas resolvem as duas pontas. */
  .grid-3,.steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:980px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-burger{display:block;}
  .grid-2,.groups,.frentes{grid-template-columns:1fr;}
  .autora{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:880px){
  .grid-3,.steps{grid-template-columns:1fr;}
}
@media (max-width:640px){
  body{font-size:16.5px;}
  .section{padding:58px 0;}
  .hero{padding:56px 0 62px;}
  .hero-strip{grid-template-columns:1fr;}
  .hero-strip>div{border-right:0;border-bottom:1px solid rgba(246,237,216,.10);padding:18px 0;}
  .hero-strip>div:last-child{border-bottom:0;}
  .hero-cta .btn{width:100%;}
  .footer-grid{grid-template-columns:1fr;}
  .buybar .btn{margin-left:0;width:100%;}
  .buybar .txt{width:100%;text-align:center;}
  .panel{padding:26px 20px;}
  .hero-logo{height:58px;}
  /* no celular a barra vira uma linha só, para não comer 1/6 da tela */
  .buybar{padding:9px 16px;}
  .buybar-inner{flex-wrap:nowrap;gap:12px;}
  .buybar .txt{width:auto;text-align:left;font-size:12.5px;line-height:1.25;}
  .buybar .txt .fora-do-celular{display:none;}
  .buybar .btn{margin-left:auto;width:auto;flex:0 0 auto;padding:14px 18px;font-size:13px;min-height:44px;}
  .brand{padding-block:5px;}
}
/* enquanto a barra está no ar ela não pode cobrir o fim da página */
body.com-buybar{padding-bottom:88px;}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important;}
  /* Precisa vencer '.js-ok .fade-up{opacity:0}', que tem especificidade maior.
     Sem o !important, quem pede menos movimento fica com a pagina invisivel
     ate o IntersectionObserver disparar, e se ele nao disparar, para sempre. */
  .fade-up,.js-ok .fade-up{opacity:1 !important;transform:none !important;}
}
@media print{
  .nav,.mobile-menu,.buybar,.footer{display:none;}
  body{background:#fff;color:#000;}
}

/* ---------- Caixa de dados antes do pagamento ----------
   A InfinitePay nao devolve o e-mail do comprador na notificacao, so o
   numero do pedido. Sem capturar o e-mail ANTES, nao existe entrega
   automatica: alguem teria que descobrir na mao de quem foi cada Pix.
   Por isso esta caixa e obrigatoria no caminho da compra. */
.modal-compra{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(20,4,11,.72);backdrop-filter:blur(3px);
}
.modal-compra[hidden]{display:none;}
.modal-compra .caixa{
  background:var(--paper);border:1px solid var(--line-dark);border-top:3px solid var(--gold);
  border-radius:8px;padding:30px 28px;width:100%;max-width:440px;
  box-shadow:0 30px 80px -30px rgba(20,4,11,.85);
  max-height:calc(100vh - 44px);overflow-y:auto;
}
.modal-compra h2{font-size:clamp(21px,3vw,25px);margin-bottom:6px;}
.modal-compra .sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px;max-width:46ch;}
.modal-compra .fechar{
  position:absolute;top:14px;right:14px;background:none;border:0;cursor:pointer;
  font-size:26px;line-height:1;color:var(--ink-faint);padding:6px 10px;
}
.modal-compra .fechar:hover{color:var(--vinho);}
.modal-compra .caixa{position:relative;}
.modal-compra .legal{font-size:13px;color:var(--ink-faint);margin-top:16px;line-height:1.55;}
.modal-compra .legal a{color:var(--vinho);font-weight:700;text-decoration:underline;}
.modal-compra .opcional{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-faint);}
body.modal-aberto{overflow:hidden;}