/* =====================================================================
   ABRAVEN · site institucional
   Mesma família visual do PDV: asfalto, pedra, oceano, sol e as ondas do calçadão.
   ===================================================================== */
:root {
  --asfalto: #1b2430;
  --asfalto-2: #26313f;
  --pedra: #f2f4f1;
  --papel: #ffffff;
  --oceano: #0b6e69;
  --oceano-escuro: #085551;
  --oceano-claro: #e1f0ee;
  --sol: #ffc531;
  --sol-escuro: #e9ac0c;
  --verde-agua: #2fb3a9; /* peito da águia na versão negativa */
  --linha: #dce2de;
  --texto: #1b2430;
  --texto-2: #566170;
  --erro: #b3261e;
  --erro-bg: #fde8e6;

  --f-texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-titulo: "Bricolage Grotesque", var(--f-texto);
  --f-codigo: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace;

  --r: 16px;
  --r-lg: 28px;
  --wrap: 1140px;
  --gutter: clamp(16px, 4vw, 40px);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 15Q20 5 40 15T80 15L80 35Q60 45 40 35T0 35Z' fill='%23fff'/%3E%3C/svg%3E");
  --wave-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 15Q20 5 40 15T80 15L80 35Q60 45 40 35T0 35Z' fill='%231b2430'/%3E%3C/svg%3E");

  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--pedra); }
img, svg { max-width: 100%; }
a { color: var(--oceano); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--oceano) 50%, transparent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.08; letter-spacing: -.02em; margin: 0; font-weight: 800; }
h1 { font-size: clamp(2.5rem, 7.2vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
.lead { font-size: clamp(1.08rem, 2.2vw, 1.3rem); color: var(--texto-2); max-width: 38ch; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 10vw, 120px) 0; }
.section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head p { color: var(--texto-2); font-size: 1.1rem; margin-top: 1rem; }
.muted { color: var(--texto-2); }
.small { font-size: .9rem; }

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 54px; padding: .8rem 1.5rem; border-radius: 999px;
  font: 700 1.02rem/1.1 var(--f-texto); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform .08s ease, background-color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-sun { background: var(--sol); color: var(--asfalto); }
.btn-sun:hover { background: var(--sol-escuro); }
.btn-ocean { background: var(--oceano); color: #fff; }
.btn-ocean:hover { background: var(--oceano-escuro); }
.btn-line { border-color: currentColor; color: inherit; background: transparent; }
.btn-line:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn-wa { background: #25d366; color: #0b3d1f; }
.btn-small { min-height: 42px; padding: .5rem 1rem; font-size: .92rem; }
.btn .icon { width: 20px; height: 20px; }
.icon { width: 24px; height: 24px; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------------------------------------------------------------- cabeçalho */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--pedra) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.top.scrolled { border-bottom-color: var(--linha); }
.top .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.logo { display: flex; align-items: center; gap: .6rem; color: var(--texto); text-decoration: none; font-family: var(--f-titulo); font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; }
.logo img { width: 46px; height: auto; display: block; }
.nav { display: none; gap: 1.6rem; margin-left: auto; }
.nav a { color: var(--texto); text-decoration: none; font-weight: 700; font-size: .98rem; }
.nav a:hover { color: var(--oceano); }
.top .btn { margin-left: auto; }
.top .short { display: none; }
@media (max-width: 559px) { .top .long { display: none; } .top .short { display: inline; } }
@media (min-width: 960px) { .nav { display: flex; } .top .btn { margin-left: 0; } }

/* ---------------------------------------------------------------- hero */
.hero { padding: clamp(32px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.hero .wrap { display: grid; gap: clamp(40px, 6vw, 64px); align-items: center; }
@media (min-width: 960px) { .hero .wrap { grid-template-columns: 1.15fr .85fr; } }
.hero h1 { max-width: 12ch; }
.hero .lead { margin: 1.4rem 0 2rem; }
.hero-notes { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.4rem; color: var(--texto-2); font-size: .95rem; }
.hero-notes span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-notes .icon { width: 18px; height: 18px; color: var(--oceano); }

/* Visual do hero: a plaquinha sobre o calçadão */
.stage {
  position: relative; border-radius: var(--r-lg); min-height: 420px; overflow: hidden;
  background: var(--asfalto) var(--wave) 0 0 / 96px 48px; display: grid; place-items: center; padding: 40px 24px;
}
.stage::before { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: var(--sol); top: 28px; right: 28px; }
.plate {
  position: relative; width: min(270px, 78%); background: var(--papel); border-radius: 22px; padding: 22px 22px 18px;
  box-shadow: 0 30px 60px -20px #0009, 0 0 0 1px #0000000d; transform: rotate(-4deg); text-align: center;
}
.plate-brand { display: flex; align-items: center; justify-content: center; gap: .4rem; font-family: var(--f-titulo); font-weight: 800; font-size: .95rem; letter-spacing: .04em; margin-bottom: 12px; }
.plate-brand img { width: 30px; height: auto; display: block; }
.plate-title { font-family: var(--f-titulo); font-weight: 800; font-size: 1.15rem; line-height: 1.15; margin-bottom: 4px; }
.plate-stars { color: var(--sol-escuro); letter-spacing: 3px; font-size: 1.05rem; margin-bottom: 12px; }
.plate-qr { background: #fff; border-radius: 10px; padding: 6px; }
.plate-qr svg { display: block; width: 100%; height: auto; }
.plate-foot { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 12px; font-weight: 700; font-size: .85rem; color: var(--texto-2); }
.plate-foot .icon { width: 20px; height: 20px; color: var(--oceano); }

/* ---------------------------------------------------------------- pilares */
.pillars { display: grid; gap: 0; background: var(--papel); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 760px) { .pillars { grid-template-columns: 1fr 1fr; } }
.pillar { padding: clamp(24px, 4vw, 40px); border-top: 1px solid var(--linha); }
.pillar:first-child { border-top: 0; }
@media (min-width: 760px) {
  .pillar:nth-child(2) { border-top: 0; }
  .pillar:nth-child(odd) { border-right: 1px solid var(--linha); }
}
.pillar .icon { width: 30px; height: 30px; color: var(--oceano); margin-bottom: 1rem; }
.pillar h3 { margin-bottom: .6rem; }
.pillar p { color: var(--texto-2); margin: 0; }
.pillar .plans-tag { display: inline-block; margin-top: .9rem; font-size: .85rem; font-weight: 700; color: var(--oceano-escuro); background: var(--oceano-claro); padding: .2rem .65rem; border-radius: 999px; }

/* ---------------------------------------------------------------- plaquinha (seção escura) */
.dark { background: var(--asfalto); color: #fff; position: relative; overflow: hidden; }
.dark .section-head p, .dark .muted { color: #b9c3cf; }
.dark::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 160px; pointer-events: none;
  background: var(--wave) 0 0 / 80px 40px; opacity: .07;
  -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000);
}
.dark .wrap { position: relative; z-index: 1; }
.split { display: grid; gap: clamp(36px, 6vw, 72px); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } }
.checks { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .9rem; }
.checks li { display: flex; gap: .75rem; align-items: flex-start; }
.checks .icon { width: 24px; height: 24px; color: var(--sol); margin-top: 1px; }
.price-note { display: inline-flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.price-note strong { font-family: var(--f-titulo); font-size: 2.2rem; color: var(--sol); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: passo; }
.steps li { counter-increment: passo; display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; background: var(--asfalto-2); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.steps li::before {
  content: counter(passo); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.3rem; background: var(--sol); color: var(--asfalto);
}
.steps b { display: block; font-size: 1.08rem; margin-bottom: .15rem; }
.steps span { color: #b9c3cf; }
.light .steps li, .steps.light li { background: var(--papel); }
.light .steps span, .steps.light span { color: var(--texto-2); }

/* ---------------------------------------------------------------- níveis de networking */
.levels { display: grid; gap: .8rem; }
.level { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; background: var(--papel); border-radius: var(--r); padding: 1.2rem 1.4rem; border-left: 6px solid var(--oceano); }
.level:nth-child(2) { margin-left: clamp(0px, 3vw, 28px); border-left-color: var(--verde-agua); }
.level:nth-child(3) { margin-left: clamp(0px, 6vw, 56px); border-left-color: var(--sol-escuro); }
.level b { font-family: var(--f-titulo); font-size: 1.3rem; }
.level span { color: var(--texto-2); grid-column: 1; }
.level em { font-style: normal; font-weight: 700; font-size: .85rem; color: var(--oceano-escuro); background: var(--oceano-claro); padding: .2rem .65rem; border-radius: 999px; grid-row: 1 / span 2; grid-column: 2; white-space: nowrap; }

/* ---------------------------------------------------------------- planos */
.plans { display: grid; gap: 1rem; }
@media (min-width: 680px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { background: var(--papel); border-radius: var(--r-lg); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; position: relative; border: 2px solid transparent; }
.plan.featured { border-color: var(--asfalto); box-shadow: 0 24px 50px -28px #1b243066; }
.plan .badge { position: absolute; top: -13px; left: 1.4rem; background: var(--sol); color: var(--asfalto); font-weight: 800; font-size: .82rem; padding: .25rem .75rem; border-radius: 999px; }
.plan h3 { font-size: 1.5rem; }
.plan .price { margin: .9rem 0 .4rem; display: flex; align-items: baseline; gap: .3rem; }
.plan .price { flex-wrap: nowrap; }
.plan .price strong { font-family: var(--f-titulo); font-size: clamp(1.9rem, 2.3vw, 2.3rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.plan .price span { color: var(--texto-2); font-weight: 700; }
.plan .summary { color: var(--texto-2); min-height: 3.1em; font-size: .97rem; }
.plan ul { list-style: none; padding: 0; margin: .4rem 0 1.5rem; display: grid; gap: .55rem; font-size: .95rem; }
.plan li { display: flex; gap: .55rem; align-items: flex-start; }
.plan li .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--oceano); }
.plan li.off { color: #9aa3ad; }
.plan li.off .icon { color: #c3cad1; }
.plan .btn { margin-top: auto; width: 100%; }
.plans-foot { margin-top: 1.4rem; color: var(--texto-2); text-align: center; }

/* ---------------------------------------------------------------- perguntas */
.faq { max-width: 780px; }
.faq details { border-top: 1px solid var(--linha); padding: 1.1rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.12rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-titulo); font-size: 1.6rem; line-height: 1; color: var(--oceano); transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: .75rem 0 0; color: var(--texto-2); max-width: 64ch; }

/* ---------------------------------------------------------------- chamada final */
.cta-band { background: var(--sol); border-radius: var(--r-lg); padding: clamp(32px, 6vw, 64px); position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 42%; background: var(--wave) 0 0 / 70px 35px; opacity: .35; -webkit-mask-image: linear-gradient(to right, transparent, #000); mask-image: linear-gradient(to right, transparent, #000); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { max-width: 16ch; margin-bottom: 1rem; }
.cta-band p { max-width: 46ch; font-size: 1.1rem; }
.cta-band .btn-ocean { background: var(--asfalto); }

/* ---------------------------------------------------------------- rodapé */
.foot { padding: 48px 0 calc(48px + env(safe-area-inset-bottom, 0px)); color: var(--texto-2); font-size: .95rem; }
.foot .wrap { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .foot .wrap { grid-template-columns: 1.5fr 1fr; } }
.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.foot nav a { color: var(--texto); font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------- formulário */
.form-page { padding: clamp(24px, 5vw, 56px) 0 80px; }
.form-grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (min-width: 960px) { .form-grid { grid-template-columns: .9fr 1.1fr; } }
.form-card { background: var(--papel); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 40px); }
label, .field { display: flex; flex-direction: column; gap: .4rem; font-weight: 700; margin-bottom: 1.1rem; font-size: .98rem; }
label small { font-weight: 400; color: var(--texto-2); }
input, select, textarea {
  font: 400 16px/1.4 var(--f-texto); color: var(--texto); background: var(--papel);
  border: 1.5px solid var(--linha); border-radius: 10px; padding: .85rem .95rem; width: 100%; min-height: 54px;
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--oceano); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oceano) 22%, transparent); }
.two { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .two { grid-template-columns: 1fr 1fr; } }
.check { flex-direction: row; align-items: flex-start; gap: .7rem; font-weight: 400; font-size: .95rem; }
.check input { width: 22px; height: 22px; min-height: 0; padding: 0; margin-top: 2px; flex: none; accent-color: var(--oceano); -webkit-appearance: auto; appearance: auto; }
.plan-radio { display: grid; gap: .6rem; margin-bottom: 1.2rem; grid-template-columns: 1fr 1fr; }
.plan-radio label { margin: 0; }
.plan-radio input { position: absolute; opacity: 0; pointer-events: none; }
.plan-radio span { display: block; padding: .85rem 1rem; border: 1.5px solid var(--linha); border-radius: 12px; cursor: pointer; font-weight: 400; }
.plan-radio b { display: block; font-family: var(--f-titulo); font-size: 1.1rem; }
.plan-radio input:checked + span { border-color: var(--oceano); background: var(--oceano-claro); box-shadow: inset 0 0 0 1px var(--oceano); }
.plan-radio input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--oceano) 45%, transparent); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alert { background: var(--erro-bg); color: var(--erro); padding: .9rem 1rem; border-radius: 12px; font-weight: 700; margin-bottom: 1.2rem; }
.side-points { display: none; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 960px) { .side-points { display: grid; } }
.side-points div { display: flex; gap: .8rem; }
.side-points .icon { color: var(--oceano); }

/* ---------------------------------------------------------------- páginas simples */
.page { padding: clamp(32px, 6vw, 72px) 0 96px; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.prose p, .prose li { color: var(--texto-2); }
.done { text-align: center; max-width: 560px; margin: 0 auto; }
.done .ok { width: 84px; height: 84px; border-radius: 50%; background: var(--oceano); color: #fff; display: grid; place-items: center; margin: 0 auto 1.5rem; }
.done .ok .icon { width: 42px; height: 42px; }

/* ---------------------------------------------------------------- exemplo de placa */
.demo-banner { background: var(--sol); color: var(--asfalto); text-align: center; padding: .7rem 1rem; font-weight: 700; }
.demo { min-height: calc(100dvh - 48px); display: grid; place-items: center; padding: 32px 16px; }
.demo-card { background: var(--papel); border-radius: var(--r-lg); padding: 2rem 1.5rem; width: 100%; max-width: 420px; text-align: center; }
.demo-logo { width: 72px; height: 72px; border-radius: 20px; margin: 0 auto 1rem; background: #f6e3c8; display: grid; place-items: center; font-family: var(--f-titulo); font-weight: 800; font-size: 1.6rem; color: #8a4b12; }
.demo-links { display: grid; gap: .65rem; margin: 1.4rem 0 1rem; }
.demo-links a { display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 1.5px solid var(--linha); border-radius: 14px; color: var(--texto); font-weight: 700; text-decoration: none; text-align: left; }
.demo-links a:hover { border-color: #b9c3bd; }
.demo-links .g .icon { color: #e3a600; }
.demo-links .i .icon { color: #c21f86; }
.demo-links .w .icon { color: #1fa855; }
.demo-links .x .icon { color: var(--oceano); }
.demo-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--asfalto); color: #fff; padding: .8rem 1.1rem; border-radius: 12px; font-weight: 700; max-width: calc(100% - 32px); text-align: center; }

/* ---------------------------------------------------------------- páginas de conteúdo (SEO) */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0 0 1.4rem; font-size: .92rem; color: var(--texto-2); }
.crumbs li + li::before { content: "/"; margin-right: .35rem; color: #a7b0ba; }
.crumbs a { color: var(--texto-2); }
.topic-hero { padding: clamp(24px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); }
.topic-hero h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); max-width: 20ch; }
.topic-hero .lead { margin: 1.2rem 0 1.8rem; max-width: 62ch; }
.answer { background: var(--papel); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 36px); border-left: 6px solid var(--oceano); max-width: 860px; }
.answer h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: .8rem; }
.answer p { color: var(--texto-2); font-size: 1.08rem; margin: 0; }
.answer p + p { margin-top: .8rem; }
.content { max-width: 860px; }
.content h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0 0 1rem; }
.content p, .content li { color: var(--texto-2); }
.content ul.bullets { padding-left: 1.2rem; display: grid; gap: .5rem; margin: 0 0 1rem; }
.content strong { color: var(--texto); }
.uses { display: grid; gap: .8rem; }
@media (min-width: 680px) { .uses { grid-template-columns: 1fr 1fr; } }
.uses div { background: var(--papel); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.uses b { display: block; font-size: 1.08rem; margin-bottom: .2rem; }
.uses span { color: var(--texto-2); }
.table-wrap { overflow-x: auto; background: var(--papel); border-radius: var(--r-lg); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .97rem; }
table.compare caption { text-align: left; padding: 1.1rem 1.2rem .4rem; font-weight: 700; font-family: var(--f-titulo); font-size: 1.15rem; }
table.compare th, table.compare td { padding: .85rem 1rem; border-top: 1px solid var(--linha); text-align: center; }
table.compare th[scope=row], table.compare thead th:first-child { text-align: left; }
table.compare thead th { font-family: var(--f-titulo); font-size: 1.05rem; }
table.compare td.yes { color: var(--oceano); font-weight: 700; }
table.compare td.no { color: #a7b0ba; }
details.more { margin-top: 1.4rem; }
details.more summary { cursor: pointer; font-weight: 700; color: var(--oceano); margin-bottom: 1rem; }
.source { font-size: .92rem; color: var(--texto-2); }
.updated { font-size: .9rem; color: var(--texto-2); margin-top: 1rem; }