/* Fontes da marca servidas pelo próprio site (sem Google Fonts: mais rápido e sem enviar o IP do visitante a terceiros).
   Recorte latino; Newsreader com tamanho óptico fixo em 36. Licença OFL em assets/fonts/. */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
/* Draxora v5 — identidade clara: creme, verde profundo, acento terracota (prévia) */
:root {
  --creme: #FAF7F0; --papel: #FFFFFF; --verde: #294F46; --texto-suave: #55675F; --salvia: #789783;
  --menta: #DDE8DF; --petroleo: #087F75; --petroleo-escuro: #066A62; --terracota: #A95F4D; --terracota-escuro: #8A4A3B;
  --argila: #D6A18A; --areia: #F1E4D6; --linha: #E3DED3;
  --fresta: linear-gradient(180deg, #E9B872, #D6835E 55%, #A95F4D);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1160px; --raio: 24px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
[id] { scroll-margin-top: 88px; }
body { margin: 0; background: var(--creme); color: var(--verde); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petroleo); }
h1, h2, h3, p { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 40px); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* tipografia */
.eb { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--terracota); }
.t { font-family: var(--serif); font-weight: 500; letter-spacing: -.018em; line-height: 1.06; color: var(--verde); text-wrap: balance; }
.t em { font-style: italic; color: var(--terracota); }
.t-xl { font-size: clamp(40px, 5vw, 62px); }
.t-l { font-size: clamp(32px, 4.2vw, 50px); }
.t-m { font-size: clamp(26px, 3vw, 34px); }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--texto-suave); max-width: 60ch; }
.lead strong { color: var(--verde); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; font: 700 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.btn-primary { background: var(--petroleo); color: #fff; }
.btn-primary:hover { background: var(--petroleo-escuro); }
.btn-out { background: transparent; color: var(--verde); border-color: var(--verde); }
.btn-out:hover { background: var(--menta); }
.btn-lg { min-height: 58px; padding: 16px 30px; font-size: 17px; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; }

/* cabeçalho */
.hd { position: sticky; top: 0; z-index: 20; background: rgba(250, 247, 240, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.hd .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.hd nav { display: flex; align-items: center; gap: 28px; }
.hd nav a:not(.btn) { color: var(--verde); text-decoration: none; font-weight: 600; font-size: 15px; }
.hd .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; }
@media (max-width: 760px) { .hd nav a:not(.btn) { display: none; } .hd .brand img { width: 150px; } }

/* hero */
.hero { position: relative; padding: 72px 0 88px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.hero-copy { display: grid; gap: 22px; position: relative; padding-left: 26px; }
.hero-copy::before { content: ""; position: absolute; left: 0; top: 4px; width: 7px; height: 92px; border-radius: 8px; background: var(--fresta); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--menta); color: var(--verde); font-size: 14px; font-weight: 700; }
.chip.areia { background: var(--areia); color: var(--terracota-escuro); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.proof { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--texto-suave); font-weight: 600; }
.proof span::before { content: "✓ "; color: var(--petroleo); }
.hero-art { position: relative; }
.hero-art::before { content: ""; position: absolute; inset: 6% 4% 2% 10%; border-radius: 50%; background: var(--menta); z-index: -1; }
@media (max-width: 900px) {
  .hero { padding: 36px 0 56px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 24px; }
  .hero-copy { padding-left: 18px; }
  .hero-copy::before { width: 5px; height: 70px; }
  .actions .btn { width: 100%; }
}

/* seções */
.sec { padding: 88px 0; }
.sec-areia { background: var(--areia); }
.sec-menta { background: var(--menta); }
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 40px; }
@media (max-width: 760px) { .sec { padding: 60px 0; } .sec-head { margin-bottom: 28px; } }

.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.quote { display: inline-block; margin: 6px 0 4px; padding: 20px 28px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: var(--raio); font: italic 500 clamp(28px, 3.4vw, 40px)/1.1 var(--serif); color: var(--verde); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; padding: 20px 24px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: var(--raio); }
.steps .n { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 24px/1 var(--serif); }
.steps strong { font-size: 19px; }
.steps small { font-size: 15px; color: var(--texto-suave); }
.n1 { background: var(--menta); color: var(--verde); } .n2 { background: var(--areia); color: var(--terracota-escuro); border: 1.5px solid var(--argila); } .n3 { background: var(--verde); color: var(--creme); }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; gap: 28px; } }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare > div { padding: 32px 34px; border-radius: var(--raio); }
.cmp-sem { background: var(--papel); border: 1.5px solid var(--linha); }
.cmp-com { background: var(--verde); color: var(--creme); position: relative; overflow: hidden; }
.cmp-com .chip { background: var(--menta); }
.compare ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-size: 17px; }
.compare li { padding-left: 22px; position: relative; }
.compare li::before { content: "—"; position: absolute; left: 0; color: var(--argila); }
.cmp-com li::before { color: var(--argila); }
.cmp-com img { position: absolute; right: -10px; bottom: -40px; width: 200px; opacity: .95; }
.cmp-com ul { max-width: 62%; }
.note { margin-top: 22px; color: var(--texto-suave); font-weight: 600; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } .cmp-com ul { max-width: none; } .cmp-com img { display: none; } }

.feat { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding: 28px 0; }
.feat.rev .feat-copy { order: 2; }
.feat-copy { display: grid; gap: 16px; }
.feat-img { margin: 0; position: relative; }
.feat-img::before { content: ""; position: absolute; inset: 8% 8%; border-radius: 50%; background: var(--menta); z-index: -1; }
.feat-img.areia::before { background: var(--areia); }
.prev-tag { position: absolute; right: 8%; top: 4%; background: var(--verde); color: var(--creme); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
@media (max-width: 900px) { .feat { grid-template-columns: 1fr; gap: 20px; } .feat.rev .feat-copy { order: 0; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.box { background: var(--papel); border: 1.5px solid var(--linha); border-radius: var(--raio); padding: 30px 32px; }
.box h3 { font: 600 22px/1.2 var(--serif); margin-bottom: 14px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.list li { padding-left: 30px; position: relative; }
.list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 9px; border-left: 2.5px solid var(--petroleo); border-bottom: 2.5px solid var(--petroleo); transform: rotate(-45deg); }
.list.no li::before { width: 14px; height: 2.5px; border: 0; background: var(--terracota); transform: none; top: 12px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

.founder { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: center; }
.founder img { border-radius: var(--raio); }
.reviewer { display: flex; gap: 14px; align-items: center; margin-top: 8px; padding: 14px 18px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: 16px; width: fit-content; }
.reviewer svg { color: var(--petroleo); flex: none; }
.reviewer small { display: block; color: var(--texto-suave); }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; gap: 24px; } .founder img { max-width: 260px; } }

.offer { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.offer-card { background: var(--papel); border-radius: var(--raio); padding: 36px 40px; box-shadow: 0 20px 50px rgba(41, 79, 70, .08); display: grid; gap: 18px; }
.offer-card .list li { font-size: 16px; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; border-top: 1.5px solid var(--linha); padding-top: 22px; }
.price { font: 600 clamp(48px, 6vw, 64px)/.9 var(--serif); letter-spacing: -.02em; }
.price-row small { display: block; color: var(--texto-suave); margin-top: 8px; font-size: 14px; }
.guarantee { font-size: 14px; color: var(--texto-suave); }
@media (max-width: 900px) { .offer { grid-template-columns: 1fr; } .offer-card { padding: 28px 24px; } .price-row .btn { width: 100%; } }

.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details { background: var(--papel); border: 1.5px solid var(--linha); border-radius: 18px; padding: 0 24px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 26px/1 var(--serif); color: var(--terracota); }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 0 20px; color: var(--texto-suave); }

.final { text-align: center; display: grid; justify-items: center; gap: 22px; }

.app { background: var(--verde); color: var(--creme); border-radius: 28px; padding: 40px 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.app .eb { color: var(--argila); }
.app .t { color: var(--creme); }
.app p { color: var(--menta); }
.app-count strong { color: var(--argila); font-family: var(--serif); font-size: 20px; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; padding: 30px 24px; } }

/* formulário (usa os hooks do main.js) */
.dx-lead { display: grid; gap: 12px; }
.dx-lead-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dx-input { flex: 1 1 220px; min-height: 52px; padding: 12px 18px; border-radius: 999px; border: 1.5px solid transparent; background: var(--creme); color: var(--verde); font: 500 16px var(--sans); }
.dx-lead .btn { background: var(--argila); color: var(--verde); }
.dx-lead .btn:hover { background: #E2B39E; }
.dx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dx-consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 19px; color: var(--menta); cursor: pointer; }
.dx-consent-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--argila); }
.dx-consent-check a, .app a { color: var(--argila); }
.dx-lead-error { font-size: 13px; color: #F3C2B4; }
.dx-lead-ok { display: none; font-weight: 600; color: var(--menta); }
.dx-lead.is-done .dx-lead-row, .dx-lead.is-done .dx-consent-check, .dx-lead.is-done .dx-lead-error { display: none; }
.dx-lead.is-done .dx-lead-ok { display: block; }

/* aviso de cookies (gerado pelo main.js) */
.dx-consent { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; border-radius: 18px; border: 1.5px solid var(--linha); background: var(--papel); box-shadow: 0 16px 40px rgba(41, 79, 70, .18); }
.dx-consent p { flex: 1 1 280px; font-size: 14px; line-height: 20px; color: var(--verde); }
.dx-consent div { display: flex; gap: 8px; }
.dx-consent .dx-btn { min-height: 42px; padding: 10px 18px; border-radius: 999px; font: 700 14px var(--sans); cursor: pointer; border: 1.5px solid var(--verde); background: transparent; color: var(--verde); }
.dx-consent .dx-btn-primary { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }

/* rodapé */
.ft { border-top: 1px solid var(--linha); padding: 40px 0 48px; font-size: 14px; color: var(--texto-suave); }
.ft .wrap { display: grid; gap: 18px; }
.ft-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.ft nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ft nav a { color: var(--verde); text-decoration: none; font-weight: 600; }
.ft strong { color: var(--verde); }

.preview-bar { background: var(--terracota); color: #fff; text-align: center; font-size: 13px; font-weight: 700; padding: 8px 16px; letter-spacing: .02em; }

/* ===== home ===== */
.home-hero { position: relative; padding: 80px 0 72px; overflow: hidden; }
.home-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.home-hero .hero-copy { gap: 22px; }
.home-art { position: relative; display: grid; place-items: center; min-height: 380px; }
.home-art::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--areia); right: 6%; top: 0; z-index: -1; }
.home-art::after { content: ""; position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--menta); left: 4%; bottom: 0; z-index: -1; }
.home-art img { width: min(320px, 70%); transform: rotate(3deg); filter: drop-shadow(0 30px 40px rgba(41, 79, 70, .2)); }
/* 14/11: home da empresa, com as portas ilustradas (Mapa dos Sintomas, Pilatei, a próxima). */
.home-art-portas .portas-arte { width: min(460px, 100%); height: auto; overflow: visible; }
.home-art-portas::before { right: 2%; top: -4%; }
.home-art-portas::after { left: 0; bottom: 6%; }
.door-pilatei { border-color: #E9B872; box-shadow: inset 0 4px 0 #E9B872; }
.home-art-portas::after { display: none; }
@media (max-width: 600px) {
  /* Cartão do Mapa no celular: o print desce para baixo do botão, sem cobrir o texto. */
  .doors .door.is-open { padding-bottom: 230px; }
  .doors .door.is-open .door-copy { max-width: 100%; }
  .doors .door.is-open img { width: 150px; right: 50%; bottom: -70px; transform: translateX(50%) rotate(4deg); }
}
.door-pilatei .door-num { color: var(--terracota-escuro); }
.door-pilatei .dx-lead { margin-top: 4px; }
@media (max-width: 900px) { .home-hero { padding: 40px 0 48px; } .home-hero .wrap { grid-template-columns: 1fr; } .home-art { min-height: 300px; } }

.doors { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; align-items: stretch; }
.door { display: grid; gap: 12px; align-content: start; padding: 30px 30px 32px; border-radius: var(--raio); background: var(--papel); border: 1.5px solid var(--linha); text-decoration: none; color: var(--verde); position: relative; overflow: hidden; }
.door h3 { font: 500 28px/1.12 var(--serif); letter-spacing: -.01em; }
.door p { color: var(--texto-suave); font-size: 16px; }
.door-num { font: italic 500 18px/1 var(--serif); color: var(--terracota); }
.door.is-open { background: var(--verde); border-color: var(--verde); color: var(--creme); }
.door.is-open h3 { color: var(--creme); }
.door.is-open p { color: var(--menta); }
.door.is-open .door-num { color: var(--argila); }
.door.is-open .door-cta { justify-self: start; margin-top: 8px; background: var(--creme); color: var(--verde); }
.door.is-open img { position: absolute; right: -24px; bottom: -40px; width: 170px; opacity: .95; transform: rotate(6deg); }
.door.is-open .door-copy { max-width: 64%; display: grid; gap: 12px; }
.door:hover.is-open { background: #23443C; }
.door-lock { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-escuro); background: var(--areia); padding: 5px 12px; border-radius: 999px; }
.door .dx-lead .dx-input { background: var(--creme); border-color: var(--linha); }
.door .dx-lead .btn { background: var(--verde); color: var(--creme); }
.door .dx-consent-check { color: var(--texto-suave); }
.door .dx-consent-check a { color: var(--petroleo); }
.door .dx-lead-error { color: var(--terracota-escuro); }
.door .dx-lead-ok { color: var(--petroleo); }
.door-count { font-size: 14px; color: var(--texto-suave); }
.door-count strong { font-family: var(--serif); font-size: 18px; color: var(--terracota); }
@media (max-width: 960px) { .doors { grid-template-columns: 1fr; } .door.is-open .door-copy { max-width: 70%; } }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-who { display: flex; gap: 18px; align-items: center; margin: 8px 0 0; }
.about-who img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; }
.about-who small { display: block; color: var(--texto-suave); }
.about-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.about-list li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px 24px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: var(--raio); }
.about-num { font: italic 500 22px/1 var(--serif); color: var(--terracota); padding-top: 3px; }
.about-list strong { display: block; font-size: 18px; }
.about-list span span { color: var(--texto-suave); font-size: 15px; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; gap: 28px; } }

/* ===== modal de sugestão ===== */
.dx-modal { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; padding: 0; border: 1.5px solid var(--linha); border-radius: var(--raio); background: var(--papel); color: var(--verde); }
.dx-modal::backdrop { background: rgba(41, 79, 70, .45); backdrop-filter: blur(4px); }
.dx-modal-box { position: relative; display: grid; gap: 20px; padding: 30px; }
.dx-modal-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #E9B872, #D6835E 55%, #A95F4D); }
.dx-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dx-modal-head > div { display: grid; gap: 8px; }
.dx-modal-title { font: 500 28px/1.15 var(--serif); }
.dx-modal-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 12px; background: transparent; color: var(--texto-suave); cursor: pointer; }
.dx-modal-close:hover { background: var(--menta); color: var(--verde); }
.dx-field { display: grid; gap: 8px; }
.dx-field label { font-size: 14px; font-weight: 700; }
.dx-field label span { font-weight: 400; color: var(--texto-suave); }
.dx-field textarea, .dx-field .dx-input { font: 500 16px/1.5 var(--sans); padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--creme); color: var(--verde); }
.dx-field-error { margin: -8px 0 0; font-size: 14px; color: var(--terracota-escuro); }
.dx-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dx-modal-actions .btn { flex: 1 1 200px; }
.dx-modal-note { font-size: 13px; color: var(--texto-suave); }

/* ===== páginas legais ===== */
.legal { padding: 56px 0 88px; }
.legal .wrap { max-width: 760px; display: grid; gap: 16px; }
.legal h1 { font: 500 clamp(34px, 4vw, 46px)/1.1 var(--serif); letter-spacing: -.015em; }
.legal h2 { font: 600 23px/1.3 var(--serif); margin-top: 18px; }
.legal p, .legal li { color: var(--texto-suave); font-size: 16px; line-height: 1.7; }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal strong { color: var(--verde); }
.legal .updated { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota); }

/* ---------- Página Sobre ---------- */
.sobre-hero { padding: 72px 0 80px; }
.sobre-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 40px; align-items: center; }
.sobre-hero-copy { display: grid; gap: 20px; position: relative; padding-left: 28px; }
.sobre-hero-copy::before { content: ""; position: absolute; left: 0; top: 4px; width: 8px; height: 110px; border-radius: 8px; background: var(--fresta); }
.sobre-mark { position: relative; display: grid; place-items: center; min-height: 320px; }
.sobre-mark::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: var(--menta); }
.sobre-mark::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; background: var(--areia); top: 8px; right: 12%; }
.sobre-mark img { position: relative; z-index: 1; width: 200px; height: 200px; border-radius: 50%; box-shadow: 0 24px 48px rgba(41, 79, 70, .22); }
@media (max-width: 900px) { .sobre-hero { padding: 40px 0 48px; } .sobre-hero .wrap { grid-template-columns: 1fr; } .sobre-mark { min-height: 240px; } .sobre-mark::before { width: 240px; height: 240px; } .sobre-mark img { width: 150px; height: 150px; } }
.pe { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pe-card { border-radius: var(--raio); padding: 34px 34px 36px; display: grid; gap: 12px; align-content: start; }
.pe-presenca { background: var(--papel); border: 1.5px solid var(--linha); }
.pe-energia { background: var(--verde); color: var(--creme); }
.pe-tag { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--terracota); }
.pe-energia .pe-tag { color: var(--argila); }
.pe-card h3 { font: 500 clamp(28px, 3vw, 36px)/1.1 var(--serif); letter-spacing: -.01em; }
.pe-card p { color: var(--texto-suave); }
.pe-energia p { color: #D9E3DD; }
.pe-note { margin-top: 28px; max-width: 70ch; color: var(--texto-suave); font-size: 18px; }
@media (max-width: 760px) { .pe { grid-template-columns: 1fr; } }
.road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.road li { background: var(--papel); border: 1.5px solid var(--linha); border-radius: var(--raio); padding: 28px 28px 30px; display: grid; gap: 10px; align-content: start; }
.road li:first-child { border-color: var(--petroleo); box-shadow: 0 0 0 1px var(--petroleo) inset; }
.road-when { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--salvia); }
.road li:first-child .road-when { color: var(--petroleo); }
.road h3 { font: 600 24px/1.2 var(--serif); }
.road p { color: var(--texto-suave); font-size: 16px; }
.road a { font-weight: 700; text-decoration: none; }
.road a::after { content: " →"; }
@media (max-width: 900px) { .road { grid-template-columns: 1fr; } }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.vm > div { display: grid; gap: 14px; align-content: start; }
.vm-q { font: italic 500 clamp(26px, 2.8vw, 34px)/1.2 var(--serif); color: var(--verde); }
@media (max-width: 760px) { .vm { grid-template-columns: 1fr; gap: 32px; } }
.hd nav a[aria-current="page"] { color: var(--verde); font-weight: 700; }

/* amostra grátis (captura de e-mail) */
.amostra { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; background: var(--areia); border-radius: 28px; padding: 40px 44px; }
.amostra img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 18px 40px rgba(41,79,70,.16); transform: rotate(-3deg); }
.amostra img.pack { box-shadow: none; border-radius: 0; transform: none; }
/* 14/11: página do Mapa com telas do app; o guia em papel fica sem foto de folha. */
.amostra.amostra-so-texto { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.offer.offer-so-card { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }
.hero-art-app img { width: min(460px, 100%); height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 26px 34px rgba(41, 79, 70, .2)); }
.amostra-copy { display: grid; gap: 14px; }
.amostra .dx-input { border-color: var(--linha); background: #fff; }
.amostra .dx-lead .btn { background: var(--verde); color: var(--creme); }
.amostra .dx-lead .btn:hover { background: #23443C; }
.amostra .dx-consent-check { color: var(--texto-suave); }
.amostra .dx-consent-check a { color: var(--petroleo); }
.amostra .dx-lead-error { color: var(--terracota); }
.amostra .dx-lead-ok { color: var(--verde); }
.amostra .dx-lead-ok p { margin: 0 0 12px; }
.amostra .dx-lead-ok .btn { background: var(--petroleo); color: #fff; }
@media (max-width: 760px) { .amostra { grid-template-columns: 1fr; padding: 24px 20px; gap: 20px; } .amostra picture { order: 2; } .amostra img { max-width: 150px; margin: 0 auto; } .amostra-copy { gap: 12px; } .amostra .dx-lead-row { flex-direction: column; } .amostra .dx-input { flex: 0 0 auto; width: 100%; } .amostra .dx-lead-row .btn { width: 100%; } .amostra .t-m { font-size: 30px; line-height: 1.12; } .amostra-copy p { font-size: 16px; line-height: 1.5; } }
@media (max-width: 560px) { .dx-consent { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 10px 14px; gap: 8px; } .dx-consent p { flex-basis: 100%; font-size: 12.5px; line-height: 17px; } .dx-consent .dx-btn { min-height: 36px; padding: 6px 16px; font-size: 13px; } }

/* Confirmação de cadastro: cartão no lugar do formulário */
@keyframes dx-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.dx-lead.is-done .dx-lead-ok { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 6px; align-items: center; padding: 18px 20px; border: 1.5px solid currentColor; border-radius: 18px; font-size: 17px; line-height: 1.4; animation: dx-pop .35s ease-out; outline: none; }
.dx-lead.is-done .dx-lead-ok > :not(.dx-done-icon) { grid-column: 2; margin: 0; }
.dx-done-icon { grid-row: 1 / span 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid currentColor; }
.dx-lead-email { font-size: 14px; font-weight: 500; opacity: .85; overflow-wrap: anywhere; }
.dx-lead.is-done .dx-lead-ok .btn { justify-self: start; margin-top: 6px; }
.dx-modal-done { justify-items: start; outline: none; animation: dx-pop .35s ease-out; }
.dx-modal-done .dx-done-icon { width: 52px; height: 52px; color: var(--petroleo); }
.dx-modal-done p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .dx-lead.is-done .dx-lead-ok, .dx-modal-done { animation: none; } }

/* "hidden" sempre esconde, mesmo em componentes com display próprio */
[hidden] { display: none !important; }

/* Página 404 */
.nf .wrap { max-width: 760px; padding-top: 24px; padding-bottom: 72px; }
.nf .eb { margin-bottom: 14px; }
.nf .lead { margin: 18px 0 26px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 12px; }
.nf-help { margin-top: 28px; color: var(--texto-suave); }

/* Usabilidade no celular: áreas de toque de pelo menos 44px e caixas de consentimento maiores */
.dx-consent-check input { width: 22px; height: 22px; margin-top: 0; }
.door-lock { font-size: 13px; }
@media (max-width: 760px) {
  .ft nav { gap: 4px 18px; }
  .ft nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .nf-links .btn { flex: 1 1 100%; justify-content: center; }
}

/* Guias (artigos) */
.guia .wrap { max-width: 720px; }
.crumbs { font-size: 14px; color: var(--texto-suave); }
.crumbs a { color: var(--petroleo); text-decoration: none; font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
.byline { font-size: 14px; color: var(--texto-suave); border-bottom: 1px solid var(--linha); padding-bottom: 18px; }
.byline a { color: var(--petroleo); }
.resposta { font-size: 18px !important; color: var(--verde) !important; background: var(--menta); border-radius: 18px; padding: 18px 22px; }
.guia h2 { font-size: 26px; margin-top: 26px; }
.guia-cta { margin: 28px 0 8px; background: var(--areia); border-radius: var(--raio); padding: 28px; display: grid; gap: 10px; justify-items: start; }
.guia-cta-t { font: 500 26px/1.15 var(--serif) !important; color: var(--verde) !important; }
.guia-cta-t em { color: var(--terracota); }
.guia-cta .btn { width: 100%; max-width: 320px; justify-content: center; }
.crise { background: var(--papel); border: 1.5px solid #B23A2E; border-radius: 18px; padding: 16px 20px; }
.crise a { color: #B23A2E; font-weight: 700; }
.legal-note { font-size: 14px !important; }
.guia-lista { list-style: none; padding: 0 !important; display: grid; gap: 14px !important; }
.guia-lista a { display: grid; gap: 6px; padding: 22px 24px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: 18px; text-decoration: none; }
.guia-lista strong { font: 600 21px/1.25 var(--serif); }
.guia-lista span { color: var(--texto-suave); }

/* Página /conte/ (relato de uso) */
.conte form { display: grid; gap: 22px; margin-top: 8px; }
.dx-q { border: 1px solid var(--linha); border-radius: 16px; padding: 16px 18px; margin: 0; display: grid; gap: 10px; background: #fff; }
.dx-q legend { float: left; width: 100%; font: 600 17px/1.4 var(--sans); color: var(--verde); padding: 0; margin-bottom: 4px; }
.dx-q legend + * { clear: both; }
.dx-opt { display: flex; gap: 10px; align-items: center; min-height: 40px; font-size: 16px; color: var(--texto-suave); cursor: pointer; }
.dx-opt input { width: 20px; height: 20px; accent-color: var(--petroleo); flex: none; }
.conte .dx-field { display: grid; gap: 8px; }
.conte .dx-field label { color: var(--texto-suave); font-size: 15px; }
.conte .dx-consent-check { color: var(--texto-suave); }
.conte .dx-consent-check a { color: var(--petroleo); }
.dx-feedback.is-done > :not(.dx-fb-ok) { display: none; }
.dx-fb-ok { background: var(--menta, #DDE8DF); border-radius: 16px; padding: 18px 20px; color: var(--verde); }

.dx-canal { font-size: 14px; line-height: 1.5; margin-top: 8px; }
.dx-canal a { color: var(--petroleo); font-weight: 700; }
.dx-canal-link { display: inline-block; margin-left: 6px; font-size: 14px; font-weight: 600; color: var(--petroleo); }

/* ===== Contraste mínimo de leitura (WCAG AA, 02/11/2026) =====
   Terracota #A95F4D continua nos títulos grandes em itálico (passa com folga para texto grande).
   Em texto pequeno, sobre creme, areia ou menta, usa o terracota escuro (6,3 / 5,4 / 5,3).
   Sobre o verde, a argila vira argila clara (5,2). */
:root { --argila-clara: #E6BBA8; }
.eb, .pe-tag, .legal .updated, .door-num, .about-num, .door-count strong, .amostra .dx-lead-error { color: var(--terracota-escuro); }
.road-when { color: var(--texto-suave); }
.amostra .dx-consent-check a, .sec-areia a:not(.btn), .guia-cta a:not(.btn) { color: var(--petroleo-escuro); }
.app .eb, .app .t em, .app-count strong, .app a, .app .dx-consent-check a,
.door.is-open .door-num, .pe-energia .pe-tag, .cmp-com .eb, .cmp-com .t em { color: var(--argila-clara); }
.dx-lead .btn { background: var(--argila-clara); }

/* Atalho "Pular para o conteúdo": invisível até receber o foco pelo Tab */
.skip { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--verde); color: var(--creme); padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; outline: 3px solid var(--argila-clara); outline-offset: 2px; }
main:focus { outline: none; }

/* Link "Preferências de cookies" no rodapé (botão com cara de link) */
.dx-cookie-prefs { background: none; border: 0; padding: 0; font: inherit; line-height: inherit; color: var(--verde); font-weight: 600; cursor: pointer; }
.ft nav { align-items: center; }
@media (max-width: 760px) { .ft nav .dx-cookie-prefs { display: inline-flex; align-items: center; min-height: 44px; } }
.dx-cookie-prefs:hover { text-decoration: underline; }
.dx-cookie-prefs:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; }

/* ===== Mapa dos Sintomas em mapadossintomas.com.br (14/11): marca do produto no topo, Draxora assina no rodapé ===== */
.brand-mapa { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--verde); font: 600 21px/1 var(--serif); letter-spacing: -.01em; }
.hd .brand-mapa img, .ft .brand-mapa img { width: 34px; height: 34px; border-radius: 9px; }
.ft .brand-mapa { font-size: 18px; }
.ft .brand-mapa img { width: 28px; height: 28px; border-radius: 7px; }
.ft-draxora { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ft-draxora a { display: inline-flex; min-height: 44px; align-items: center; }
.ft-draxora img { width: 110px; height: auto; }
@media (max-width: 760px) { .hd .brand-mapa { font-size: 18px; gap: 8px; } .hd .brand-mapa img { width: 30px; height: 30px; } }

/* ===== Páginas de apresentação das portas na Draxora (/produtos/<produto>/, desde 14/11) =====
   Padrão para todo produto (próprio ou em parceria): a Draxora conta a porta e leva ao site do produto.
   Sem formulário: o cadastro fica no site do produto. Cor do produto em --acento (escopo .porta-<produto>). */
.porta { --acento: var(--terracota); --acento-texto: var(--terracota-escuro); --acento-btn: var(--petroleo); --acento-btn-escuro: var(--petroleo-escuro); --acento-fundo: var(--verde); --acento-claro: var(--menta); }
.porta-pilatei { --acento: #6A3FCB; --acento-texto: #5B33B5; --acento-btn: #6A3FCB; --acento-btn-escuro: #5531A8; --acento-fundo: #2B1840; --acento-claro: #EFE6FA; }
.porta .eb { color: var(--acento-texto); }
.porta .t em { color: var(--acento); }
.porta .btn-primary { background: var(--acento-btn); }
.porta .btn-primary:hover { background: var(--acento-btn-escuro); }
.porta .hero-art::before, .porta .feat-img::before { background: var(--acento-claro); }
.porta-selo { display: inline-flex; align-items: center; gap: 10px; font: 600 22px/1 var(--serif); color: var(--verde); }
.porta-selo img { width: 40px; height: auto; border-radius: 10px; }
.porta-pilatei .porta-selo { font: 800 26px/1 var(--sans); letter-spacing: -.04em; color: #2B1840; }
.porta-pilatei .porta-selo img { width: 44px; border-radius: 0; }
.porta-fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; padding: 18px 20px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: 18px; max-width: 620px; }
.porta-fatos div { display: grid; gap: 2px; }
.porta-fatos dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.porta-fatos dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--verde); line-height: 1.4; }
.porta-externo::after { content: " ↗"; }
.galeria { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 28px; align-items: start; }
.galeria figure { margin: 0; display: grid; gap: 14px; justify-items: center; text-align: center; }
.galeria img { width: 100%; max-width: 250px; filter: drop-shadow(0 18px 26px rgba(41, 79, 70, .14)); }
.galeria figcaption { display: grid; gap: 4px; max-width: 260px; }
.galeria figcaption strong { font-size: 17px; color: var(--verde); }
.galeria figcaption span { font-size: 15px; color: var(--texto-suave); line-height: 1.5; }
@media (max-width: 900px) {
  .galeria { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: 0 -4px; }
  .galeria figure { scroll-snap-align: center; }
}
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.linha-tempo li { position: relative; display: grid; gap: 4px; padding: 0 0 26px 34px; }
.linha-tempo li::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: -8px; width: 2px; background: var(--linha); }
.linha-tempo li:last-child::before { display: none; }
.linha-tempo li::after { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--papel); border: 2px solid var(--linha); }
.linha-tempo li.feito::after { background: var(--acento-btn); border-color: var(--acento-btn); }
.linha-tempo li.agora::after { background: var(--papel); border: 4px solid var(--acento-btn); }
.linha-tempo .quando { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acento-texto); }
.linha-tempo strong { font-size: 18px; }
.linha-tempo span:not(.quando) { color: var(--texto-suave); font-size: 15px; }
.porta-pilares { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.porta-pilares li { padding: 18px 20px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: 18px; display: grid; gap: 4px; }
.porta-pilares strong { font-size: 17px; }
.porta-pilares span { color: var(--texto-suave); font-size: 15px; }
.porta-construindo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .porta-construindo { grid-template-columns: 1fr; gap: 28px; } }
.porta-cta { background: var(--acento-fundo); color: var(--creme); border-radius: 28px; padding: 44px; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 24px 40px; align-items: center; }
.porta-cta .eb { color: var(--argila); }
.porta-pilatei .porta-cta .eb { color: #FFB52E; }
.porta-cta .t { color: #fff; }
.porta-cta .t em { color: var(--argila); }
.porta-pilatei .porta-cta .t em { color: #C9B6F0; }
.porta-cta p { color: var(--menta); }
.porta-pilatei .porta-cta p { color: #E9DFF7; }
.porta-cta .btn-cta { background: var(--creme); color: var(--verde); }
.porta-cta .btn-cta:hover { background: #fff; }
.porta-pilatei .porta-cta .btn-cta { background: #FFB52E; color: #2B1840; }
.porta-cta .porta-cta-acoes { display: grid; gap: 12px; justify-items: start; }
.porta-cta .porta-cta-acoes a:not(.btn) { color: var(--creme); font-weight: 600; }
@media (max-width: 900px) { .porta-cta { grid-template-columns: 1fr; padding: 30px 22px; } .porta-cta .btn { width: 100%; } .porta-fatos { grid-template-columns: 1fr; } }
.porta-proxima { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 22px 24px; border: 1.5px dashed var(--linha); border-radius: 18px; }
.door-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.porta .list li::before { border-color: var(--acento-btn); }