/* Camper RJ — site v2.
   Layout de referência: happiercamper.com (estrutura, ritmo, faixas de título, zigue-zague,
   mosaico, cartões de depoimento, pacotes com preço). Identidade: Camper RJ Design System
   (tokens.css). Azul-marinho da referência -> verde da marca; laranja -> vermelho da marca. */

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 46px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--sand-50); color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px #141a16; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--text-heading); margin: 0 0 .5em; letter-spacing: var(--tracking-heading); line-height: var(--leading-snug); }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand-white); padding: 10px 14px; border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }

/* ---------- tipografia ---------- */
.h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: var(--weight-black); }
.h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: var(--weight-black); }
.h4 { font-size: 1.125rem; font-weight: var(--weight-black); }
.h5 { font-size: .8125rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); margin-top: 1.5em; }
.caps { text-transform: uppercase; letter-spacing: .02em; line-height: 1.12; }
.center { text-align: center; }
.lead { font-size: var(--text-lead); }
.eyebrow { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-accent); margin: 0 0 .75em; }
.eyebrow--light { color: var(--brand-white); opacity: .9; }
.nota { font-size: var(--text-body-sm); color: var(--text-muted); }
.lnk { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-body-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--text-accent); text-decoration: underline; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }
.sec { padding-block: clamp(56px, 8vw, 104px); }
.sec--tight { padding-block: clamp(32px, 5vw, 56px); }
.sec--cream { background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-50) 100%); }
.rd { border-radius: var(--radius-md); width: 100%; object-fit: cover; }

/* ---------- botões (referência: retângulo sólido, caixa alta) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-height); padding: 0 var(--control-pad-x);
  font: var(--type-button); text-transform: uppercase; letter-spacing: var(--tracking-button);
  border: 2px solid transparent; border-radius: var(--radius-xs); cursor: pointer; text-decoration: none;
  transition: var(--transition-control);
}
.btn--red { background: var(--action-accent); color: var(--brand-white); }
.btn--red:hover { background: var(--action-accent-hover); color: var(--brand-white); }
.btn--red:active { background: var(--action-accent-active); }
.btn--line { background: transparent; color: var(--green-700); border-color: var(--green-500); }
.btn--line:hover { background: var(--green-50); color: var(--green-800); }
.btn--glass { background: var(--invert-soft); color: var(--brand-white); border-color: rgba(255,255,255,.6); backdrop-filter: blur(4px); }
.btn--glass:hover { background: rgba(255,255,255,.26); color: var(--brand-white); }
.btn--block { width: 100%; }

/* ---------- cabeçalho ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--green-800); color: var(--brand-white); transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base); }
.hdr--over { position: fixed; inset: 0 0 auto; background: transparent; }
.hdr--over.is-solid, .hdr.is-open { background: var(--green-800); box-shadow: 0 6px 20px -12px rgba(0,0,0,.5); }
.hdr__in { display: flex; align-items: center; gap: 28px; height: var(--header-h); width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; }
.hdr__logo { display: flex; align-items: center; gap: 10px; color: var(--brand-white); text-decoration: none; margin-right: auto; }
.hdr__logo img { width: 48px; height: 48px; background: var(--brand-white); border-radius: 50%; padding: 2px; }
.hdr__logo span { font: 800 1rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; display: flex; flex-direction: column; gap: 3px; }
.hdr__logo small { font-size: .62rem; letter-spacing: var(--tracking-seal); font-weight: 500; opacity: .85; }
.hdr__logo:hover { color: var(--brand-white); }
.hdr__nav ul { display: flex; gap: clamp(16px, 2.4vw, 40px); list-style: none; margin: 0; padding: 0; }
.hdr__nav a { color: var(--brand-white); text-decoration: none; font: 600 .875rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; padding: 8px 0; border-bottom: 2px solid transparent; }
.hdr__nav a:hover, .hdr__nav a[aria-current] { border-bottom-color: var(--red-300); color: var(--brand-white); }
.hdr__cta { min-height: 44px; }
.hdr__burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 11px 10px; flex-direction: column; justify-content: space-between; }
.hdr__burger span { display: block; height: 2px; background: var(--brand-white); border-radius: 2px; transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-fast); }
.hdr.is-open .hdr__burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hdr.is-open .hdr__burger span:nth-child(2) { opacity: 0; }
.hdr.is-open .hdr__burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.mmenu { background: var(--green-800); padding: 8px var(--gutter) 24px; border-top: 1px solid var(--border-invert); max-height: calc(100svh - var(--header-h)); overflow-y: auto; }
.mmenu ul { list-style: none; margin: 0 0 16px; padding: 0; }
.mmenu a:not(.btn) { display: block; padding: 14px 0; color: var(--brand-white); text-decoration: none; font: 800 1.25rem/1.2 var(--font-display); text-transform: uppercase; border-bottom: 1px solid var(--border-invert); }
@media (max-width: 1080px) {
  .hdr__nav, .hdr__cta { display: none; }
  .hdr__burger { display: flex; }
}

/* ---------- herói da home (tela cheia; vídeo entra depois) ---------- */
.hero { position: relative; min-height: max(560px, 100svh); display: flex; align-items: flex-end; color: var(--brand-white); overflow: hidden; background: var(--green-900); }
.hero__media, .hero__img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17,29,21,.8) 0%, rgba(17,29,21,.2) 50%, rgba(17,29,21,.4) 100%); }
.hero__txt { position: relative; z-index: 1; padding-bottom: clamp(48px, 9vh, 96px); }
.hero__t { color: var(--brand-white); font-size: var(--text-hero); font-weight: var(--weight-black); line-height: var(--leading-tight); max-width: 16ch; margin-bottom: .35em; }
.hero__l { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 40ch; }
.hero__l strong { color: var(--brand-white); font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- dois blocos sob o herói (referência: Sale / Quiz) ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--sand-50); padding-top: 16px; }
.tile { background: var(--green-500); color: var(--brand-white); text-align: center; padding: clamp(28px, 4vw, 44px) 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tile__t { color: var(--brand-white); font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: var(--weight-black); text-transform: uppercase; margin: 0; line-height: 1.1; }
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr; } }

/* ---------- faixa de prova ---------- */
.prova { background: var(--brand-white); border-bottom: 1px solid var(--border-hairline); }
.prova__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.prova__i { padding: 22px 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text-body); }
.prova__i + .prova__i { border-left: 1px solid var(--border-hairline); }
.prova__i strong { font: 800 1.15rem/1.2 var(--font-display); color: var(--text-heading); text-transform: uppercase; }
.prova__i span { font-size: var(--text-body-sm); color: var(--text-muted); }
a.prova__i:hover strong { color: var(--text-accent); }
@media (max-width: 720px) { .prova__in { grid-template-columns: 1fr 1fr; } .prova__i:nth-child(3) { border-left: 0; } .prova__i:nth-child(n+3) { border-top: 1px solid var(--border-hairline); } }

/* ---------- faixa escura de título (referência: "OUR MODELS") ---------- */
.band { background: var(--green-800); padding: 18px var(--gutter); text-align: center; }
.band__t { color: var(--brand-white); margin: 0; font: 800 clamp(1.25rem, 2.2vw, 1.75rem)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- zigue-zague com fotos desencontradas ---------- */
.zig { display: grid; gap: 0; }
.zig__row { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.zig__row + .zig__row { margin-top: clamp(16px, 3vw, 40px); }
.zig__row--inv { grid-template-columns: 1.15fr 1fr; }
.zig__row--inv .zig__txt { order: 2; }
.zig__txt { text-align: center; max-width: 34rem; justify-self: center; padding-block: 24px; }
.zig__txt p { color: var(--text-body); }
.zig__media .rd { aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.zig__row:nth-child(even) .zig__media { transform: translateY(40px); }
.preco { font-size: 1.05rem; margin-bottom: 1.25em; }
.preco strong { font: 800 1.6rem/1 var(--font-display); color: var(--text-heading); }
.preco small, .ver__preco small { color: var(--text-muted); font-size: var(--text-body-sm); }
@media (max-width: 860px) {
  .zig__row, .zig__row--inv { grid-template-columns: 1fr; gap: 8px; }
  .zig__row + .zig__row { margin-top: 40px; }
  .zig__row--inv .zig__txt { order: 0; }
  .zig__row:nth-child(even) .zig__media { transform: none; }
  .zig__media { order: -1; }
}

/* "Também fazemos" */
.minis { margin-top: clamp(72px, 9vw, 120px); }
.minis__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.mini { background: var(--brand-white); border-radius: var(--radius-md); padding: 22px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); transition: var(--transition-surface); }
.mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mini__t { font: 800 1rem/1.2 var(--font-display); color: var(--text-heading); text-transform: uppercase; }
.mini__p { color: var(--text-accent); font-weight: 600; }
@media (max-width: 720px) { .minis__row { grid-template-columns: 1fr; } }

/* ---------- 3 cartões com foto (referência: Lightweight / Adaptiv / Endless) ---------- */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); max-width: 1100px; }
.feat { text-align: center; }
.feat .rd { aspect-ratio: 6 / 7; margin-bottom: 22px; }
.feat p { max-width: 30ch; margin-inline: auto; }
@media (max-width: 860px) { .feats { grid-template-columns: 1fr; } .feat .rd { aspect-ratio: 4 / 3; } }

/* ---------- como funciona ---------- */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.passo { background: var(--brand-white); border-radius: var(--radius-md); padding: 28px 24px; box-shadow: var(--shadow-sm); }
.passo__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--action-accent); color: var(--brand-white); font: 800 1rem/1 var(--font-display); margin-bottom: 16px; }
.passo p { margin: 0; font-size: var(--text-body-sm); }
@media (max-width: 960px) { .passos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .passos { grid-template-columns: 1fr; } }

/* ---------- mosaico (referência: HC Nation) ---------- */
.mos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mos__i, .mos__card { margin: 0; }
.mos__i .rd { height: 100%; aspect-ratio: 4 / 3; }
/* home: colunas desencontradas, como na referência (card + 7 fotos, 6 linhas por coluna) */
.mos__grid--home { grid-template-rows: repeat(6, clamp(84px, 9vw, 128px)); grid-auto-flow: column; }
.mos__grid--home .mos__card { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
.mos__grid--home .mos__i:nth-of-type(1), .mos__grid--home .mos__i:nth-of-type(2) { grid-row: span 2; }
.mos__grid--home .mos__i:nth-of-type(3), .mos__grid--home .mos__i:nth-of-type(4) { grid-row: span 3; }
.mos__grid--home .mos__i:nth-of-type(n+5) { grid-row: span 2; }
.mos__grid--home .mos__i .rd { aspect-ratio: auto; }
.mos__card { background: var(--green-50); border-radius: var(--radius-md); padding: 24px 28px; }
.mos__card p { margin-bottom: .6em; }
@media (max-width: 860px) {
  .mos__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mos__grid--home { grid-template-rows: none; grid-auto-flow: row; }
  .mos__grid--home .mos__card { grid-column: 1 / -1; }
  .mos__grid--home .mos__i { grid-row: auto !important; }
  .mos__grid--home .mos__i .rd { aspect-ratio: 1 / 1; }
}

/* ---------- depoimentos (referência: foto grande + cartões em 2 colunas) ---------- */
.deps__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 3vw, 32px); align-items: start; }
.deps__lado { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
.deps__foto { aspect-ratio: 3 / 4; object-position: 50% 80%; }
.deps__cards { columns: 2; column-gap: 24px; }
.dep { break-inside: avoid; margin: 0 0 24px; background: var(--green-50); border-radius: var(--radius-md); padding: 24px 22px; display: flex; flex-direction: column; }
.dep__q { font: 800 2.5rem/0.6 var(--font-display); color: var(--green-800); height: 22px; }
.dep__a { font: 800 .95rem/1.3 var(--font-display); text-transform: uppercase; color: var(--text-heading); margin: 6px 0 10px; display: flex; flex-direction: column; gap: 4px; }
.dep__a small { font: 400 .78rem/1.3 var(--font-body); text-transform: none; color: var(--text-muted); }
.dep blockquote { margin: 0; }
.dep blockquote p { margin: 0; color: var(--text-body); }
.dep--solo { text-align: center; align-items: center; padding: 36px clamp(24px, 5vw, 56px); }
.dep--solo blockquote p { font-size: var(--text-lead); }
.dep--solo .dep__a { order: 2; margin: 16px 0 0; }
@media (max-width: 960px) { .deps__grid { grid-template-columns: 1fr; } .deps__lado { position: static; } .deps__foto { aspect-ratio: 16 / 10; } }
@media (max-width: 640px) { .deps__cards { columns: 1; } }

/* ---------- catálogo com livro (referência: Happier Camper Catalog) ---------- */
.cat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.cat__txt { text-align: center; max-width: 30rem; justify-self: center; }
.book { justify-self: center; perspective: 1200px; padding: 24px 24px 56px; }
.book__cover { position: relative; width: 240px; aspect-ratio: 3 / 4.2; border-radius: 3px 8px 8px 3px; overflow: hidden; background: var(--green-700); transform: rotateY(-18deg) rotateX(4deg); box-shadow: 14px 26px 40px -16px rgba(17,29,21,.5), inset 6px 0 0 rgba(0,0,0,.18); transition: transform var(--duration-slow) var(--ease-out); }
.book:hover .book__cover { transform: rotateY(-8deg) rotateX(2deg); }
.book__img { position: absolute; inset: auto 0 0; width: 100%; height: 52%; object-fit: cover; }
.book__selo { position: absolute; top: 30px; left: 50%; translate: -50% 0; width: 84px; height: 84px; background: var(--brand-white); border-radius: 50%; padding: 3px; }
.book__t { position: absolute; top: 126px; inset-inline: 0; text-align: center; color: var(--brand-white); font: 800 1.05rem/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 860px) { .cat__grid { grid-template-columns: 1fr; } }

/* ---------- quem faz (referência: Join the community) ---------- */
.quem__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.quem__foto { aspect-ratio: 1 / 1; }
.quem__lema { font: 600 1.15rem/1.4 var(--font-display); color: var(--green-700); border-left: 3px solid var(--action-accent); padding-left: 16px; margin-block: 24px; }
@media (max-width: 860px) { .quem__grid { grid-template-columns: 1fr; } }

/* ---------- perguntas ---------- */
.faq { background: var(--brand-white); }
.faq__list { border-top: 1px solid var(--border-default); margin-top: 28px; }
.faq__i { border-bottom: 1px solid var(--border-default); }
.faq__i summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 600 1.05rem/1.4 var(--font-display); color: var(--text-heading); }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 600 1.6rem/1 var(--font-display); color: var(--text-accent); transition: transform var(--duration-base) var(--ease-standard); }
.faq__i[open] summary::after { transform: rotate(45deg); }
.faq__i div { padding: 0 0 20px; }

/* ---------- contato ---------- */
.contato { background: var(--sand-100); }
.contato__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.form { display: grid; gap: 16px; margin-top: 24px; }
.form label { display: grid; gap: 6px; font: 600 .8rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--text-heading); }
.form .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.form input, .form select { font: 400 1rem/1.3 var(--font-body); color: var(--text-body); height: var(--control-height); padding: 0 14px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--brand-white); width: 100%; }
.form input:focus, .form select:focus { outline: none; border-color: var(--green-500); box-shadow: var(--shadow-field-focus); }
.contato__info { background: var(--brand-white); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); }
.info { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 14px; }
.info li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: var(--text-body-sm); }
.ico { width: 20px; height: 20px; opacity: .8; }
.mapa iframe { width: 100%; height: 240px; border: 0; border-radius: var(--radius-md); display: block; margin-top: 12px; }
@media (max-width: 860px) { .contato__grid { grid-template-columns: 1fr; } }

/* ---------- rodapé (referência: colunas sobre azul-marinho -> verde) ---------- */
.ftr { background: var(--green-800); color: var(--green-100); padding: 56px 0 120px; }
.ftr a { color: var(--brand-white); text-decoration: none; }
.ftr a:hover { text-decoration: underline; color: var(--brand-white); }
.ftr__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.ftr__logo img { background: var(--brand-white); border-radius: 50%; padding: 3px; }
.ftr__social { display: flex; gap: 20px; }
.ftr__social .ico { filter: invert(1); opacity: 1; width: 24px; height: 24px; }
.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.ftr h3 { color: var(--brand-white); font: 600 .85rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--text-body-sm); }
.ftr__legal { margin-top: 48px; font-size: var(--text-caption); color: var(--green-200); }
@media (min-width: 1081px) { .ftr { padding-bottom: 40px; } }
@media (max-width: 860px) { .ftr__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__cols { grid-template-columns: 1fr; } }

/* barra fixa no celular */
.mbar { position: fixed; inset: auto 0 0; z-index: 40; display: none; grid-template-columns: 1fr 1fr; background: var(--brand-white); box-shadow: 0 -6px 18px -10px rgba(0,0,0,.35); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
.mbar__a { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: var(--radius-xs); font: var(--type-button); text-transform: uppercase; letter-spacing: var(--tracking-button); text-decoration: none; border: 2px solid var(--green-500); color: var(--green-700); }
.mbar__a--wa { background: var(--action-accent); border-color: var(--action-accent); color: var(--brand-white); }
.mbar__a--wa:hover { color: var(--brand-white); }
@media (max-width: 1080px) { .mbar { display: grid; } }

/* ---------- páginas de produto (referência: página HC1) ---------- */
.phero { position: relative; min-height: clamp(380px, 62vh, 640px); display: flex; align-items: flex-end; color: var(--brand-white); background: var(--green-900); overflow: hidden; }
.phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero::after { content: ""; position: absolute; inset: 0; background: var(--overlay-photo-bottom); }
.phero__txt { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; padding-block: 48px; text-align: center; }
.phero__t { color: var(--brand-white); font: 800 clamp(2.5rem, 7vw, 5rem)/1 var(--font-display); text-transform: uppercase; margin: 0 0 .2em; }
.phero__l { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 0; }
.phero--plain { min-height: 0; background: var(--sand-100); color: var(--text-body); }
.phero--plain::after { display: none; }
.phero--plain .phero__txt { padding-block: clamp(56px, 8vw, 96px) 40px; }
.phero__t--dark { color: var(--text-heading); font-size: clamp(2rem, 5vw, 3.5rem); }
.phero__l--dark { color: var(--text-body); max-width: 44ch; margin-inline: auto; }

.subnav { position: sticky; top: var(--header-h); z-index: 30; background: var(--green-800); border-top: 1px solid var(--border-invert); }
.subnav ul { list-style: none; margin: 0 auto; padding: 8px var(--gutter); display: flex; justify-content: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.subnav a { display: block; white-space: nowrap; padding: 8px 14px; border-radius: var(--radius-xs); color: var(--brand-white); text-decoration: none; font: 600 .8rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; }
.subnav a:hover { background: var(--invert-soft); color: var(--brand-white); }
.subnav a.is-on { background: var(--brand-white); color: var(--green-800); }
@media (max-width: 860px) { .subnav ul { justify-content: flex-start; } }

/* pacotes (referência: HC1 Essentials / Adventure / Summit) */
.vers { display: grid; gap: clamp(56px, 7vw, 96px); }
.ver { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; max-width: 1100px; margin-inline: auto; width: 100%; }
.ver__img { aspect-ratio: 4 / 3; }
.ver__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.thumb { padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); background: none; cursor: pointer; width: 76px; overflow: hidden; }
.thumb img { aspect-ratio: 1; object-fit: cover; }
.thumb.is-on, .thumb:hover { border-color: var(--action-accent); }
.ver__sub { font-weight: 600; color: var(--text-muted); margin-top: -.25em; }
.ver__preco { margin: .5em 0 .25em; }
.ver__preco strong { font: 800 2rem/1 var(--font-display); color: var(--text-heading); }
.tam { list-style: none; margin: 16px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tam li { border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; background: var(--brand-white); display: grid; gap: 4px; }
.tam span { font: 600 .72rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.tam strong { font: 800 1.15rem/1.1 var(--font-display); color: var(--text-heading); }
.nao { display: inline-block; background: var(--red-50); color: var(--red-700); font-weight: 600; padding: 6px 12px; border-radius: var(--radius-xs); margin: 4px 0 0; }
.chk { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.chk li { padding-left: 28px; position: relative; }
.chk li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2.5px solid var(--green-500); border-bottom: 2.5px solid var(--green-500); transform: rotate(-45deg); }
.aviso { max-width: 1100px; margin: 0 auto; text-align: center; color: var(--text-muted); font-size: var(--text-body-sm); }
@media (max-width: 860px) { .ver { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .tam { grid-template-columns: 1fr; } .tam li { grid-template-columns: 1fr auto; text-align: left; align-items: center; } }

/* especificações com desenho técnico (referência: HC1 specs) */
.specs { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; max-width: 1100px; }
.specs__col { display: grid; gap: 8px; }
.desenho { margin: 0; color: var(--green-800); }
.desenho figcaption { font-size: var(--text-body-sm); color: var(--text-muted); margin-top: 12px; text-align: center; }
.svgd { width: 100%; }
.dl { margin: 0; display: grid; gap: 10px; }
.dl dt { font: 800 .85rem/1.2 var(--font-display); text-transform: uppercase; color: var(--text-heading); }
.dl dd { margin: 0 0 8px; }
.dl--row { grid-template-columns: auto 1fr; column-gap: 24px; }
.dl--row dt { padding-top: 3px; }
@media (max-width: 860px) { .specs { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dl--row { grid-template-columns: 1fr; } .dl--row dd { margin-bottom: 12px; } }

/* comparativo */
.tbl { overflow-x: auto; background: var(--brand-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.tbl table { border-collapse: collapse; width: 100%; min-width: 520px; }
.tbl th, .tbl td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-hairline); }
.tbl thead th { background: var(--green-800); color: var(--brand-white); font: 800 .85rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.tbl tbody th { text-align: left; font-weight: 600; color: var(--text-heading); }
.tbl tbody tr:last-child { background: var(--green-50); font-weight: 700; }

/* tetos */
.tetos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.teto { background: var(--brand-white); border-radius: var(--radius-md); padding: 28px 24px; box-shadow: var(--shadow-sm); display: grid; gap: 8px; align-content: start; justify-items: start; }
.teto--fotos { grid-column: 1 / -1; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; justify-items: stretch; }
.teto__txt { display: grid; gap: 8px; justify-items: start; }
.teto__det { grid-column: 1 / -1; display: grid; gap: 28px; }
.teto__video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--green-800); }
.teto__video[hidden], .teto__palco .ver__img[hidden] { display: none; }
.thumb--video { position: relative; }
.thumb--video::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.teto:has(> .teto__det) { grid-column: 1 / -1; }
.teto > .teto__det { width: 100%; margin-top: 12px; }
.teto__itens { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,.12); }
@media (max-width: 860px) { .teto__itens { grid-template-columns: 1fr; gap: 14px; } }
.teto__itens dt { font-weight: 600; }
.teto__itens dd { margin: 2px 0 0; color: var(--text-muted); }
.teto__outros { padding-top: 20px; border-top: 1px solid rgba(0,0,0,.12); display: grid; gap: 14px; width: 100%; }
.teto__outro { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.teto__outro p { margin: 0; }
.teto__outro p:first-child { color: var(--text-muted); }
.teto__outro p:first-child strong { color: var(--text-heading); }
.teto__outro-p { font-weight: 700; white-space: nowrap; text-align: right; }
.teto__outro-p small { display: block; font-weight: 400; font-size: .8em; color: var(--text-muted); }
@media (max-width: 860px) { .teto--fotos { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 860px) { .tetos { grid-template-columns: 1fr; } }

/* manutenção / especiais / projetos */
.srvs, .esps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.esps { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.srv, .esp { background: var(--brand-white); border-radius: var(--radius-md); padding: 28px 24px; box-shadow: var(--shadow-sm); }
.srv p { margin: 0; }
.esp { display: grid; gap: 8px; align-content: start; justify-items: start; }
@media (max-width: 860px) { .srvs, .esps { grid-template-columns: 1fr; } }
.casos { display: grid; gap: clamp(48px, 6vw, 80px); }
.caso__h { margin-bottom: 20px; }

/* ---------- teste "qual motorhome é para você" ---------- */
.quiz { width: min(100% - 32px, 560px); border: 0; border-radius: var(--radius-lg); padding: 32px clamp(20px, 4vw, 36px); box-shadow: var(--shadow-lg); color: var(--text-body); }
.quiz::backdrop { background: var(--overlay-scrim); }
.quiz__x { position: absolute; right: 12px; top: 12px; margin: 0; }
.quiz__x button { border: 0; background: none; cursor: pointer; padding: 8px; }
.quiz fieldset { border: 0; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.quiz legend { font: 600 1.05rem/1.35 var(--font-display); color: var(--text-heading); margin-bottom: 12px; }
.quiz fieldset button { text-align: left; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--brand-white); font: 500 .95rem/1.35 var(--font-body); cursor: pointer; transition: var(--transition-control); }
.quiz fieldset button:hover { border-color: var(--green-500); background: var(--green-50); }
.quiz__res h3 { margin-top: 12px; }
.quiz__res .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------- animações leves ---------- */
.js [data-reveal] { opacity: 0; translate: 0 18px; transition: opacity 350ms var(--ease-out), translate 350ms var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  @view-transition { navigation: none; }
}
.feat .rd, .mos__i .rd { transition: transform var(--duration-slow) var(--ease-out); }
@media (hover: hover) { .feat:hover .rd, .mos__i:hover .rd { transform: scale(1.015); } }

/* ajustes de celular */
@media (max-width: 480px) {
  .hero__t { font-size: 2.35rem; }
  .btn { letter-spacing: .08em; }
  .eyebrow { letter-spacing: .12em; }
}

/* fonte única (Montserrat): textos longos um pouco menores e com mais respiro, pois ela é larga */
strong, b { font-weight: 600; }
.chk li, .dep blockquote p, .faq__i div p, .zig__txt p, .feat p, .passo p, .srv p { font-size: .95rem; line-height: 1.7; }
.lead, .hero__l, .phero__l { font-weight: 400; }
button, input, select, textarea { font-family: inherit; }

button, input, select, textarea { font-family: inherit; }

/* Botões em pílula com hover (pedido do Rodrigo, 02/10/2026) */
.btn, .mbar__a {
  border-radius: var(--radius-pill);
  padding-inline: 28px;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.btn:hover, .mbar__a:hover { transform: translateY(-2px); }
.btn:active, .mbar__a:active { transform: translateY(0); box-shadow: none; }
.btn--red:hover { box-shadow: 0 10px 22px -10px rgba(164,16,6,.65); }
.btn--line:hover { background: var(--green-500); border-color: var(--green-500); color: var(--brand-white); box-shadow: 0 10px 22px -12px rgba(54,92,66,.6); }
.btn--glass:hover { background: var(--brand-white); color: var(--green-800); border-color: var(--brand-white); }
.mbar__a:not(.mbar__a--wa):hover { background: var(--green-50); }
.btn--red::after, .mbar__a--wa::after { content: "→"; display: inline-block; margin-left: 2px; transition: transform var(--duration-base) var(--ease-out); }
.btn--red:hover::after { transform: translateX(4px); }
.quiz fieldset button { border-radius: var(--radius-pill); padding-inline: 20px; }
@media (prefers-reduced-motion: reduce) { .btn:hover, .mbar__a:hover { transform: none; } .btn--red:hover::after { transform: none; } }

/* =====================================================================
   FUNDO VERDE DA MARCA + BOTÕES NO ESTILO DO SITE NO AR (02/10/2026)
   Base verde (#365c42). Texto claro sobre o verde; o que é para ler com
   calma (preços, listas, depoimentos, formulário) fica em cartões creme.
   As cores de texto são tokens: no verde viram claras, nos cartões voltam
   às escuras do DS.
   ===================================================================== */
body {
  background: var(--green-500);
  --text-heading: var(--brand-white);
  --text-body: var(--green-50);
  --text-muted: var(--green-200);
  --text-subtle: var(--green-200);
  --text-accent: var(--sand-200);
  --text-link: var(--brand-white);
  --text-link-hover: var(--sand-200);
  --border-default: rgba(255,255,255,.32);
  --border-hairline: rgba(255,255,255,.16);
  color: var(--text-body);
}
/* cartões claros: voltam às cores do DS */
.prova, .tile, .passo, .mos__card, .dep, .mini, .tam li, .tbl, .teto, .srv, .esp,
.contato__info, .quiz, .mbar, .nao {
  --text-heading: var(--green-800);
  --text-body: var(--sand-800);
  --text-muted: var(--sand-600);
  --text-subtle: var(--sand-500);
  --text-accent: var(--red-500);
  --text-link: var(--green-500);
  --text-link-hover: var(--red-500);
  --border-default: var(--sand-300);
  --border-hairline: var(--sand-200);
  color: var(--text-body);
}
.prova, .passo, .mos__card, .dep, .mini, .tam li, .tbl, .teto, .srv, .esp, .contato__info { background: var(--sand-50); }

/* ritmo de seções: verde da marca alternando com um verde um tom abaixo */
.sec--cream, .contato, .phero--plain { background: var(--green-600); }
.faq { background: transparent; }
.tiles { background: var(--green-500); }
.tile { background: var(--green-700); --text-heading: var(--brand-white); }
.tile__t { color: var(--brand-white); }
.band { background: var(--green-800); }
.ftr { background: var(--green-900); }
.chk li::before { border-color: var(--green-200); }
.tam li .chk li::before, .teto .chk li::before { border-color: var(--green-500); }
.quem__lema { color: var(--brand-white); border-left-color: var(--red-300); }
.desenho { color: var(--brand-white); }
.form input, .form select { color: var(--sand-800); border-color: transparent; }
.zig__media .rd, .feat .rd, .mos__i .rd, .ver__img, .deps__foto, .quem__foto { box-shadow: 0 22px 44px -24px rgba(0,0,0,.55); }
.prova { border-bottom: 0; }
::selection { background: var(--sand-200); color: var(--green-900); }

/* ---- botões como no site no ar: cantos arredondados, texto + célula com seta ---- */
.btn {
  position: relative; display: inline-flex; align-items: stretch; gap: 0;
  min-height: 46px; padding: 0 0 0 22px; overflow: hidden;
  border: 1.5px solid var(--green-900); border-radius: var(--radius-md);
  font: 500 1rem/1 var(--font-display); text-transform: none; letter-spacing: .01em;
  background: var(--brand-white); color: var(--green-900);
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.btn { align-items: center; }
.btn::after {
  content: ""; align-self: stretch; flex: 0 0 44px; margin-left: 22px;
  border-left: 1.5px solid var(--green-900); background: var(--brand-white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111d15' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: background-position var(--duration-base) var(--ease-out);
}
.btn:hover { background: var(--green-900); color: var(--brand-white); }
.btn:hover::after { background-position: 62% 50%; }
.btn:active { transform: translateY(1px); }
.btn--red { background: var(--red-500); color: var(--brand-white); border-color: var(--green-900); }
.btn--red:hover { background: var(--green-900); color: var(--brand-white); }
.btn--line, .btn--glass { background: var(--brand-white); color: var(--green-900); backdrop-filter: none; }
.btn--line:hover, .btn--glass:hover { background: var(--green-900); color: var(--brand-white); border-color: var(--green-900); }
.btn--block { justify-content: space-between; }
.mbar__a { border-radius: var(--radius-md); font-weight: 500; text-transform: none; letter-spacing: .01em; }
.quiz fieldset button { border-radius: var(--radius-md); }
@media (prefers-reduced-motion: reduce) { .btn:hover::after { background-position: center; } }

/* principal: corpo branco (como no ar) + célula da seta em vermelho da marca */
.btn--red { background: var(--brand-white); color: var(--green-900); }
.btn--red::after {
  background-color: var(--red-500); border-left-color: var(--green-900);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.btn--red:hover { background: var(--green-900); color: var(--brand-white); }
.mbar__a--wa { background: var(--brand-white); color: var(--green-900); border: 1.5px solid var(--green-900); box-shadow: inset -44px 0 0 var(--red-500); padding-right: 44px; position: relative; }
.mbar__a--wa::after { content: "→"; position: absolute; right: 0; width: 44px; text-align: center; color: var(--brand-white); }
.mbar { background: var(--green-800); }
.mbar__a:not(.mbar__a--wa) { background: var(--brand-white); border: 1.5px solid var(--green-900); color: var(--green-900); }
@media (max-width: 1080px) { .hdr .hdr__cta { display: none; } }

/* =====================================================================
   PESOS LEVES, como no site no ar (decisão do Rodrigo, 02/10/2026)
   Títulos de seção: 300, sem caixa alta, letras espaçadas.
   Texto, menu e botões: 400 espaçados. Peso forte só onde vende:
   preços (700), título do topo (500) e nomes dos modelos (600).
   ===================================================================== */
body { letter-spacing: .02em; line-height: 1.75; }
.caps { text-transform: none; }
.h2, .h3, .band__t, .tile__t, .phero__t, .phero__t--dark, .contato .h2 {
  font-weight: 300; letter-spacing: .04em; text-transform: none; line-height: 1.25;
}
.h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.h3 { font-size: clamp(1.45rem, 2.2vw, 1.95rem); }
.band__t { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: .06em; }
.tile__t { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.phero__t { font-size: clamp(2.6rem, 6.5vw, 4.6rem); letter-spacing: .05em; }
.hero__t { font-weight: 500; letter-spacing: .01em; }
.h4, .mini__t, .passo h3, .srv h3, .dep__a { font-weight: 500; text-transform: none; letter-spacing: .03em; }
.hdr__nav a, .subnav a, .ftr h3, .form label, .h5, .eyebrow, .tam span, .lnk { font-weight: 400; }
.hdr__nav a, .subnav a { letter-spacing: .1em; }
.btn, .mbar__a { font-weight: 400; letter-spacing: .03em; }
.faq__i summary, .quiz legend { font-weight: 400; letter-spacing: .02em; }
.prova__i strong { font-weight: 500; text-transform: none; letter-spacing: .03em; }
.hdr__logo span { font-weight: 600; }
/* onde vende: nomes dos modelos e preços */
.ver__txt > .h3, .esp > .h3, .teto > .h4, .teto__txt > .h4 { font-weight: 600; letter-spacing: .03em; }
.preco strong, .ver__preco strong, .tam strong, .mini__p, .tbl tbody tr:last-child td { font-weight: 700; letter-spacing: .01em; }
.tile__t { font-weight: 300; }
strong, b { font-weight: 600; }
.quem__lema { font-weight: 300; font-size: 1.3rem; letter-spacing: .03em; }

/* ---------- frase que acende com a rolagem (referência: nabilissa.com) ---------- */
.manif { background: var(--green-700); padding-block: clamp(80px, 14vw, 180px); }
.manif__grid { display: grid; grid-template-columns: 180px 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.manif__lado { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 14px; }
.manif__tag { margin: 0; font: 400 .72rem/1.4 var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: var(--green-100); }
.manif__foto { width: 140px; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); border-radius: var(--radius-sm); margin-top: 18px; }
.manif__t {
  margin: 0; font: 300 clamp(2rem, 5.6vw, 5.4rem)/1.08 var(--font-display);
  text-transform: uppercase; letter-spacing: -.01em; color: var(--brand-white);
}
.manif__t .w { display: inline-block; white-space: nowrap; }
.js .manif__t .c { color: rgba(255,255,255,.16); transition: color 160ms linear; }
.js .manif__t .c.on { color: var(--brand-white); }
@media (prefers-reduced-motion: reduce) { .js .manif__t .c { color: var(--brand-white); } }
@media (max-width: 760px) {
  .manif__grid { grid-template-columns: 1fr; }
  .manif__lado { position: static; grid-template-columns: auto auto 1fr; align-items: end; }
  .manif__foto { width: 72px; margin: 0; justify-self: end; }
  .manif__t { font-size: clamp(1.7rem, 8.4vw, 2.4rem); line-height: 1.12; }
}

/* =====================================================================
   CABEÇALHO MÍNIMO (referência: nabilissa.com, 02/10/2026)
   Só o selo, o WhatsApp e o hambúrguer. Na home o selo nasce grande no
   meio da tela e sobe para o canto com a rolagem (JS define --ly e --ls).
   ===================================================================== */
.hdr__nav, .mmenu { display: none !important; }
.hdr { background: var(--green-800); }
.hdr__in { gap: 16px; }
.hdr__logo { margin-right: auto; }
.hdr__logo img { width: 56px; height: 56px; background: var(--brand-white); border-radius: 50%; padding: 2px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.hdr--over { background: transparent; box-shadow: none; transition: background var(--duration-slow) var(--ease-standard); }
.hdr--over.is-solid { background: rgba(26,44,32,.92); backdrop-filter: blur(8px); }
.hdr--over .hdr__logo { transform: translateY(var(--ly, 0)) scale(var(--ls, 1)); transform-origin: left top; will-change: transform; }
.hdr__burger { display: flex !important; width: 48px; height: 48px; padding: 16px 11px; justify-content: space-between; }
.hdr__burger span { height: 2px; }
.menu-aberto .hdr__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-aberto .hdr__burger span:nth-child(2) { transform: translateY(-7px) rotate(-45deg); }
.hdr__burger span { transition: transform var(--duration-base) var(--ease-standard); }
.menu-aberto .hdr { z-index: 70; background: transparent; box-shadow: none; backdrop-filter: none; }
.menu-aberto .hdr .hdr__cta { visibility: hidden; }
.menu-aberto, .menu-aberto body { overflow: hidden; }
@media (min-width: 1081px) { .hdr .hdr__cta { display: inline-flex; } }
@media (max-width: 1080px) { .hdr .hdr__cta { display: none; } }
@media (max-width: 760px) { .hdr__logo img { width: 48px; height: 48px; } }

/* painel do menu */
.mp { position: fixed; inset: 0; z-index: 60; }
.mp__fundo { position: absolute; inset: 0; background: rgba(10,18,13,.55); opacity: 0; transition: opacity 400ms var(--ease-out); }
.mp__painel {
  position: absolute; inset: 0 0 0 auto; width: min(620px, 100%); background: var(--green-800);
  padding: calc(var(--header-h) + 24px) clamp(24px, 5vw, 64px) 32px; display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform 450ms var(--ease-cinema);
}
.mp.is-on .mp__fundo { opacity: 1; }
.mp.is-on .mp__painel { transform: none; }
.mp__rot { font: 400 .72rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--green-200); margin: 0 0 16px; }
.mp__lista { list-style: none; margin: 0; padding: 0; }
.mp__lista a {
  display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14);
  color: var(--brand-white); text-decoration: none; font: 300 clamp(1.8rem, 4.4vw, 3rem)/1.1 var(--font-display); letter-spacing: .02em;
  transition: color var(--duration-base) var(--ease-standard), padding var(--duration-base) var(--ease-out);
}
.mp__lista a:hover, .mp__lista a[aria-current] { color: var(--sand-200); padding-left: 10px; }
.mp__n { font: 400 .72rem/1 var(--font-display); letter-spacing: .12em; color: var(--green-200); min-width: 22px; }
.mp__rodape { margin-top: auto; padding-top: 32px; display: grid; gap: 10px; justify-items: start; }
.mp__rodape p { margin: 0; font-size: .85rem; color: var(--green-100); }
.mp.is-on .mp__lista li { animation: mpEntra 500ms var(--ease-out) both; }
.mp.is-on .mp__lista li:nth-child(2) { animation-delay: 40ms; } .mp.is-on .mp__lista li:nth-child(3) { animation-delay: 80ms; }
.mp.is-on .mp__lista li:nth-child(4) { animation-delay: 120ms; } .mp.is-on .mp__lista li:nth-child(5) { animation-delay: 160ms; }
.mp.is-on .mp__lista li:nth-child(6) { animation-delay: 200ms; }
@keyframes mpEntra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mp__painel, .mp__fundo { transition: none; } .mp.is-on .mp__lista li { animation: none; } }
.quiz fieldset[hidden], [hidden] { display: none !important; }

/* =====================================================================
   BOTÕES SEM VERMELHO PARADO (decisão do Rodrigo, 02/10/2026)
   Principal: branco sólido com texto verde; no hover vira vermelho com texto branco.
   Secundário: transparente com contorno e texto brancos; no hover vira branco com texto verde.
   Em cartões claros, o secundário usa contorno e texto verde-escuros.
   A seta segue a cor do texto.
   ===================================================================== */
.btn {
  --b-fundo: transparent; --b-texto: var(--brand-white); --b-borda: rgba(255,255,255,.85);
  --b-fundo-h: var(--brand-white); --b-texto-h: var(--green-800); --b-borda-h: var(--brand-white);
  background: var(--b-fundo); color: var(--b-texto); border-color: var(--b-borda);
}
.btn::after {
  content: "→"; display: inline-flex; align-items: center; justify-content: center;
  font: 400 1.15rem/1 var(--font-display); background: transparent; border-left-color: currentColor;
}
.btn:hover, .btn:focus-visible { background: var(--b-fundo-h); color: var(--b-texto-h); border-color: var(--b-borda-h); }
.btn:hover::after { background: transparent; }
.btn--red {
  --b-fundo: var(--brand-white); --b-texto: var(--green-800); --b-borda: var(--brand-white);
  --b-fundo-h: var(--red-500); --b-texto-h: var(--brand-white); --b-borda-h: var(--red-500);
}
.btn--red::after { border-left-color: rgba(26,44,32,.25); }
.btn--red:hover::after { border-left-color: rgba(255,255,255,.4); }
.btn--line, .btn--glass {
  --b-fundo: transparent; --b-texto: var(--brand-white); --b-borda: rgba(255,255,255,.85);
  --b-fundo-h: var(--brand-white); --b-texto-h: var(--green-800); --b-borda-h: var(--brand-white);
  backdrop-filter: none;
}
.teto .btn, .esp .btn--line, .contato__info .btn, .quiz .btn--line, .mini .btn {
  --b-fundo: transparent; --b-texto: var(--green-800); --b-borda: var(--green-800);
  --b-fundo-h: var(--green-800); --b-texto-h: var(--brand-white); --b-borda-h: var(--green-800);
}
.quiz .btn--red, .esp .btn--red { --b-fundo: var(--green-800); --b-texto: var(--brand-white); --b-borda: var(--green-800); }
.quiz .btn--red::after, .esp .btn--red::after { border-left-color: rgba(255,255,255,.3); }
/* barra fixa do celular */
.mbar__a { box-shadow: none; }
.mbar__a:not(.mbar__a--wa) { background: transparent; color: var(--brand-white); border: 1.5px solid rgba(255,255,255,.85); }
.mbar__a--wa { background: var(--brand-white); color: var(--green-800); border: 1.5px solid var(--brand-white); box-shadow: none; }
.mbar__a--wa::after { color: var(--green-800); border-left: 1px solid rgba(26,44,32,.25); top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
.mbar__a--wa:hover, .mbar__a--wa:active { background: var(--red-500); border-color: var(--red-500); color: var(--brand-white); }
.mbar__a--wa:hover::after, .mbar__a--wa:active::after { color: var(--brand-white); }

/* =====================================================================
   CABEÇALHO v2 (correção, 02/10/2026): a linha inteira (selo à esquerda;
   WhatsApp + hambúrguer à direita) é transparente. Na home nasce no meio da
   hero e sobe junto com a página até o topo (JS define --hy). Ao sair da
   hero, ganha fundo verde. Logo sem escala. WhatsApp menor; no celular só
   na barra de baixo.
   ===================================================================== */
.hdr, .hdr--over { position: fixed; inset: 0 0 auto; background: transparent; box-shadow: none; transform: translateY(var(--hy, 0px)); transition: background-color var(--duration-slow) var(--ease-standard); }
.hdr.is-solid, .hdr--over.is-solid { background: var(--green-800); box-shadow: 0 8px 24px -16px rgba(0,0,0,.6); backdrop-filter: none; }
.hdr--over .hdr__logo { transform: none; }
.hdr__logo img { width: 52px; height: 52px; }
.hdr .hdr__cta { min-height: 38px; padding-left: 16px; font-size: .85rem; border-width: 1.25px; }
.hdr .hdr__cta::after { flex-basis: 36px; margin-left: 14px; font-size: 1rem; }
.hdr__in { gap: 10px; }
/* páginas sem foto no topo: espaço para o cabeçalho fixo */
.phero--plain .phero__txt { padding-top: calc(var(--header-h) + clamp(32px, 6vw, 72px)); }
.menu-aberto .hdr { transform: none; background: transparent; box-shadow: none; }
@media (max-width: 760px) { .hdr__logo img { width: 46px; height: 46px; } }
/* hambúrguer legível sobre fotos claras enquanto o cabeçalho é transparente */
.hdr:not(.is-solid) .hdr__burger span { box-shadow: 0 1px 6px rgba(0,0,0,.55); }
.hdr:not(.is-solid) .hdr__burger { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

/* ajustes 02/10/2026: título do topo 30% menor; selo sem círculo branco extra; hambúrguer de 3 traços */
.hero__t { font-size: clamp(1.95rem, 3.65vw, 3.15rem); max-width: 18ch; }
@media (max-width: 480px) { .hero__t { font-size: 1.65rem; } }
.hdr__logo img, .ftr__logo img, .book__selo { background: none; padding: 0; border-radius: 50%; }
.hdr__logo img { box-shadow: 0 4px 14px -6px rgba(0,0,0,.55); }
.hdr__burger { padding: 14px 11px; }
.hdr__burger span:nth-child(3) { display: block; }
.menu-aberto .hdr__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-aberto .hdr__burger span:nth-child(2) { opacity: 0; transform: none; }
.menu-aberto .hdr__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* selo: faixa branca original de volta e tamanho legível (02/10/2026) */
.hdr__logo img { width: 72px; height: 72px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); }
:root { --header-h: 92px; }
@media (max-width: 760px) { .hdr__logo img { width: 56px; height: 56px; } :root { --header-h: 76px; } }

/* =====================================================================
   HERO PRESA + CABEÇALHO NO CENTRO (referência: nabilissa.com, 02/10/2026)
   A hero tem altura da tela + a distância que o cabeçalho percorre (--trava).
   O conteúdo dela fica preso (sticky) enquanto o cabeçalho sobe do centro até
   o topo; só depois a página começa a andar. O texto fica abaixo do cabeçalho.
   ===================================================================== */
.hero { display: block; min-height: 0; height: calc(100svh + var(--trava, 50svh)); overflow: visible; align-items: initial; }
.hero__pin { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: flex; flex-direction: column; }
.hero__txt { padding-top: calc(50svh + var(--header-h) / 2 + clamp(16px, 3vh, 36px)); padding-bottom: 24px; }
.hero__media::after { background: linear-gradient(0deg, rgba(17,29,21,.85) 0%, rgba(17,29,21,.35) 55%, rgba(17,29,21,.3) 100%); }
.hero .eyebrow { margin-bottom: .6em; font-size: .68rem; }
.hero__t { font-size: clamp(1.6rem, 2.7vw, 2.4rem); margin-bottom: .3em; }
.hero__l { font-size: clamp(.92rem, 1.15vw, 1.05rem); line-height: 1.6; }
.hero__cta { margin-top: 16px; }
.hero__cta .btn { min-height: 40px; font-size: .9rem; padding-left: 18px; }
.hero__cta .btn::after { flex-basis: 38px; margin-left: 16px; }
@media (max-width: 760px) {
  .hero__txt { padding-top: calc(50svh + var(--header-h) / 2 + 12px); }
  .hero__t { font-size: 1.45rem; }
  .hero__l { font-size: .88rem; }
  .hero__cta { gap: 8px; }
  .hero__cta .btn { min-height: 38px; font-size: .85rem; padding-left: 14px; }
  .hero__cta .btn::after { flex-basis: 34px; margin-left: 12px; }
}
@media (max-height: 640px) { .hero__txt { padding-top: calc(50svh + var(--header-h) / 2 + 8px); } .hero .eyebrow { display: none; } }

/* ---------- abertura com a marca (referência: nabilissa.com) ---------- */
.intro { display: none; }
.intro-on, .intro-on body { overflow: hidden; }
.intro-on .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: var(--green-800); cursor: pointer;
}
.intro__marca { display: flex; align-items: center; gap: 16px; position: relative; transition: opacity 400ms var(--ease-out); }
.intro__anel { width: 64px; height: 64px; position: absolute; left: 0; top: 50%; translate: 0 -50%; overflow: visible; }
.intro__anel circle { fill: none; stroke: var(--brand-white); stroke-width: 2; stroke-dasharray: 296; stroke-dashoffset: 296; transform: rotate(-90deg); transform-origin: 50% 50%; animation: introAnel 900ms var(--ease-out) 150ms forwards; }
.intro__selo { width: 64px; height: 64px; border-radius: 50%; opacity: 0; transform: scale(.7); animation: introSelo 450ms var(--ease-out) 850ms forwards; }
.intro__nome { font: 400 .95rem/1 var(--font-display); letter-spacing: .38em; color: var(--brand-white); white-space: nowrap; }
.intro__nome span { display: inline-block; opacity: 0; transform: translateY(6px); animation: introLetra 380ms var(--ease-out) forwards; }
.intro__barra { width: 1px; height: 22px; background: var(--brand-white); transform: scaleY(0); animation: introBarra 300ms var(--ease-out) 1380ms forwards; }
.intro__nome--sub { font-size: .8rem; letter-spacing: .32em; color: var(--green-100); }
.intro__janela { position: absolute; left: 50%; top: 50%; width: 0; height: 0; overflow: hidden; translate: -50% -50%; border-radius: 4px; }
.intro__janela img { width: 100vw; height: 100vh; max-width: none; object-fit: cover; position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.intro.is-abre .intro__marca { opacity: 0; }
.intro.is-abre .intro__janela { animation: introJanela 900ms var(--ease-cinema) forwards; }
@keyframes introAnel { to { stroke-dashoffset: 0; } }
@keyframes introSelo { to { opacity: 1; transform: none; } }
@keyframes introLetra { to { opacity: 1; transform: none; } }
@keyframes introBarra { to { transform: scaleY(1); } }
@keyframes introJanela { 0% { width: 34vw; height: 22vh; } 100% { width: 100vw; height: 100vh; border-radius: 0; } }
@media (max-width: 760px) {
  .intro__marca { flex-wrap: wrap; justify-content: center; max-width: 260px; gap: 12px; }
  .intro__anel { left: 50%; top: 0; translate: -50% 0; }
  .intro__selo { flex-basis: 100%; max-width: 64px; margin: 0 auto 4px; }
  .intro__barra { display: none; }
  .intro__nome { flex-basis: 100%; text-align: center; }
}

/* ---------- rastro do mouse ---------- */
.rastro { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 150; pointer-events: none; mix-blend-mode: difference; }

/* rodapé: letras menores e linhas curtas alinhadas (02/10/2026) */
.ftr ul { gap: 8px; font-size: .82rem; line-height: 1.45; }
.ftr h3 { font-size: .74rem; margin-bottom: 14px; }
@media (min-width: 861px) { .ftr__cols { grid-template-columns: 1fr 1.15fr 1fr 1.15fr; } }
.ftr__sep { margin-top: 10px; }
.ftr__legal { font-size: .72rem; }
.ftr ul, .ftr ul a { color: var(--green-50); }
.ftr ul a:hover { color: var(--brand-white); }
.aviso-loc { display: inline-block; font-size: .85rem; padding: 8px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-sm); color: var(--green-50); margin: 4px 0 0; }
/* rodapé sem selo (o cabeçalho fixo já mostra a marca): lema no lugar */
.ftr { padding-top: 48px; }
.ftr__top { margin-bottom: 32px; align-items: baseline; }
.ftr__lema { margin: 0; font: 300 clamp(1.3rem, 2.4vw, 1.9rem)/1.2 var(--font-display); letter-spacing: .04em; color: var(--brand-white); }
@media (max-width: 760px) { .ftr__top { flex-direction: column; align-items: flex-start; gap: 18px; } }

/* menu mais leve (02/10/2026): painel estreito, itens menores e finos, sem números nem dados de contato */
.mp__painel { width: min(420px, 100%); padding: calc(var(--header-h) + 40px) 48px 36px; }
.mp__lista { display: grid; gap: 6px; }
.mp__lista a {
  display: inline-block; padding: 6px 0; border: 0;
  font: 300 1.65rem/1.25 var(--font-display); letter-spacing: .03em; color: var(--brand-white);
  transition: color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-out);
}
.mp__lista a:hover, .mp__lista a[aria-current] { color: var(--sand-200); padding-left: 0; transform: translateX(6px); }
.mp__rodape { padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.mp__wa { min-height: 38px; font-size: .85rem; padding-left: 16px; }
.mp__wa::after { flex-basis: 36px; margin-left: 14px; }
.mp__redes { display: flex; gap: 16px; }
.mp__redes .ico { filter: invert(1); opacity: .85; width: 20px; height: 20px; }
.mp__redes a:hover .ico { opacity: 1; }
@media (max-width: 760px) { .mp__painel { padding: calc(var(--header-h) + 24px) 28px 28px; } .mp__lista a { font-size: 1.5rem; } }
@media (max-height: 620px) { .mp__lista a { font-size: 1.3rem; padding: 3px 0; } }

/* ---------- faixa de marcas (referência: nabilissa.com) ---------- */
.marcas { background: var(--green-800); padding-block: clamp(48px, 7vw, 88px); overflow: hidden; }
.marcas__pista { display: flex; width: max-content; animation: marcas 48s linear infinite; }
.marcas__pista:hover { animation-play-state: paused; }
.marcas__lista { display: flex; align-items: center; gap: clamp(56px, 7vw, 104px); padding-right: clamp(56px, 7vw, 104px); margin: 0; list-style: none; }
.marcas__lista img { width: auto; max-width: none; opacity: .88; transition: opacity var(--duration-base) var(--ease-standard); }
.marcas__lista img:hover { opacity: 1; }
@keyframes marcas { to { transform: translateX(-50%); } }
@media (max-width: 760px) { .marcas__lista img { transform: scale(.78); } .marcas__lista { gap: 40px; padding-right: 40px; } .marcas__pista { animation-duration: 36s; } }
@media (prefers-reduced-motion: reduce) {
  .marcas__pista { animation: none; width: auto; }
  .marcas__lista { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); row-gap: 28px; }
  .marcas__lista[aria-hidden="true"] { display: none; }
}
@media (min-width: 761px) { .marcas__lista img { transform: scale(1.3); } .marcas__lista { gap: clamp(80px, 8vw, 128px); padding-right: clamp(80px, 8vw, 128px); } }

/* contato compacto (02/10/2026): cabe numa tela, botão visível sem rolar */
.contato { padding-block: clamp(48px, 6vw, 80px); }
.contato__grid { grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.contato .h2 { margin-bottom: .2em; }
.contato__sub { color: var(--green-100); font-size: .95rem; margin: 0 0 20px; }
.form--2 { grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 0; }
.form--2 label { font-size: .72rem; gap: 5px; }
.form--2 input, .form--2 select { height: 44px; font-size: .92rem; }
.form__btn { grid-column: 1 / -1; justify-self: start; min-width: 260px; justify-content: space-between; }
.aviso-loc { border: 0; padding: 0; margin: 14px 0 0; font-size: .78rem; color: var(--green-200); }
.contato__info { padding: 24px; }
.contato__info .h4 { margin-bottom: 14px; }
.info { gap: 10px; margin-bottom: 16px; }
.info li { font-size: .85rem; line-height: 1.5; }
@media (max-width: 860px) {
  .contato__grid { grid-template-columns: 1fr; }
  .form--2 { grid-template-columns: 1fr; gap: 12px; }
  .form__btn { justify-self: stretch; }
}
.form label > span .opt { margin-left: 4px; }

/* ---------- página Kombi: auditoria de 05/10/2026 ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn--sm { padding: 10px 16px; font-size: .78rem; min-height: 0; }
.phero__acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.passos--fatos .passo h3 { margin-top: 0; }
@media (max-width: 960px) { .passos--fatos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .passos--fatos { grid-template-columns: 1fr; } }

/* texto de apoio mais legível: o cinza antigo ficava abaixo de 4,5:1 sobre o verde e sobre o creme */
.vers .nota, .vers .ver__sub, .vers .ver__preco small, .vers .aviso, .vers .h5, .ver__pitch { color: var(--green-100); }
.teto, .tbl, .dep, .passo, .comum { --text-muted: var(--sand-700); }

/* cada versão: título, preço e botão em cima; fotos no meio; lista depois (no celular o preço aparece sem rolar a galeria) */
.ver--k { grid-template-columns: 1fr 1fr; grid-template-areas: "media head" "media body"; align-items: start; column-gap: clamp(24px, 4vw, 56px); row-gap: 0; }
.ver--k .ver__media { grid-area: media; min-width: 0; }
.ver--k .ver__head { grid-area: head; }
.ver--k .ver__body { grid-area: body; }
.ver__pitch { margin: .1em 0 .4em; font-size: 1.05rem; }
.ver--k .ver__body .h5 { margin-top: 1.25em; }
@media (max-width: 860px) {
  .ver--k { grid-template-columns: 1fr; grid-template-areas: "head" "media" "body"; row-gap: 20px; }
  .ver__thumbs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .thumb { flex: 0 0 auto; scroll-snap-align: start; }
}

/* bloco "Em todas as Kombis" */
.comum { max-width: 1100px; margin: 0 auto clamp(40px, 5vw, 64px); background: var(--sand-50); border-radius: var(--radius-md); padding: 28px 24px; box-shadow: var(--shadow-sm); }
.comum h3 { margin-top: 0; }
.chk--2 { columns: 2; column-gap: 40px; }
.chk--2 li { break-inside: avoid; }
.comum .chk li::before { border-color: var(--green-500); }
@media (max-width: 860px) { .chk--2 { columns: 1; } }

/* comparativos */
.tbl--k tbody tr:last-child { background: none; font-weight: inherit; }
.tbl--k .tr-preco, .tbl--k .tr-preco th { background: var(--green-50); font-weight: 700; }
.tbl--k .tr-cta td, .tbl--k .tr-cta th { border-bottom: 0; padding-block: 16px; }
.tbl--k table { min-width: 640px; }
.tbl--teto { margin-bottom: 24px; }
.tbl--teto table { min-width: 680px; }
.teto__q { margin-bottom: 16px; }
.teto__resumo { margin: 0; color: var(--text-body); }
/* miniaturas em linha única não podem alargar a página no celular */
.teto__media, .teto__txt, .ver__media, .tetos > * { min-width: 0; }
@media (max-width: 860px) {
  .ver--k { grid-template-columns: minmax(0, 1fr); }
  .teto--fotos { grid-template-columns: minmax(0, 1fr); }
  .tetos { grid-template-columns: minmax(0, 1fr); }
}
.comum { --text-heading: var(--green-800); --text-body: var(--sand-800); --text-muted: var(--sand-700); color: var(--text-body); }
.tbl--teto tbody tr:last-child { background: none; font-weight: inherit; }

/* teto com fotos: título, preço e botão em cima; fotos de um lado e os detalhes do outro (antes sobrava um vazio ao lado da foto) */
.teto--fotos { grid-template-columns: 1.3fr 1fr; grid-template-areas: "media txt" "media det"; align-items: start; }
.teto--fotos .teto__media { grid-area: media; }
.teto--fotos .teto__txt { grid-area: txt; }
.teto--fotos > .teto__det { grid-area: det; grid-column: auto; margin-top: 0; }
.teto--fotos .teto__itens { grid-template-columns: 1fr; gap: 14px; padding-top: 20px; }
@media (max-width: 860px) {
  .teto--fotos { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "media" "det"; gap: 20px; }
}
.chk--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; columns: auto; }
@media (max-width: 860px) { .chk--2 { grid-template-columns: 1fr; } }
.tbl--teto tbody tr:last-child td, .tbl--k tbody tr:last-child td { font-weight: 400; letter-spacing: normal; }
.tbl--k tbody tr.tr-preco td { font-weight: 700; }
@media (max-width: 600px) {
  .tbl--k table, .tbl--teto table { min-width: 0; table-layout: fixed; }
  .tbl--k th, .tbl--k td, .tbl--teto th, .tbl--teto td { padding: 10px 5px; font-size: .74rem; line-height: 1.3; overflow-wrap: anywhere; }
  .tbl--k thead th, .tbl--teto thead th { font-size: .75rem; letter-spacing: .02em; }
  .tbl--k tbody th, .tbl--teto tbody th { width: 28%; }
  .tbl--k .btn--sm { padding: 8px 6px; font-size: .72rem; letter-spacing: 0; }
  .tbl--k .btn--sm::after { display: none; }
}
@media (max-width: 600px) {
  .tbl--k tbody th, .tbl--teto tbody th { width: 33%; font-size: .7rem; overflow-wrap: normal; word-break: normal; hyphens: manual; }
}
.nw { white-space: nowrap; }
@media (max-width: 600px) { .tbl--k .nw { font-size: .72rem; } }

/* avaliações em fileira de cartões iguais */
.deps--grade .deps__cards { columns: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.deps--grade .dep { margin: 0; height: 100%; }
.deps--grade .dep blockquote { flex: 1; }
.deps--grade .lnk { display: inline-block; margin-top: 28px; }
@media (max-width: 1080px) { .deps--grade .deps__cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .deps--grade .deps__cards { grid-template-columns: 1fr; } }

/* ---- lote UX: alvos de toque, contraste, preço ---- */
.hdr .hdr__cta { min-height: 44px; }
.btn--sm { min-height: 44px; }
.subnav a { padding: 16px 14px; }
.subnav ul { padding-top: 0; padding-bottom: 0; }
.prova__i span { color: var(--text-body); }
.ver__preco small { display: block; margin-top: 6px; }
.ftr__cols a { display: inline-block; padding: 8px 0; }
.ftr__social { gap: 8px; }
.ftr__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.ftr__social .ico { width: 28px; height: 28px; }
.ftr__cols a, .info a, a.lnk { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }

@media (min-width: 861px) { .teto--fotos .teto__media { position: sticky; top: calc(var(--header-h) + 70px); } }
.sec:has(+ .band) { padding-bottom: clamp(32px, 4vw, 56px); }
.teto__outros-link { margin: 12px 0 0; color: var(--text-muted); }
.teto__outros-link a.lnk { display: inline; min-height: 0; }

/* menu de seções mais compacto no celular */
@media (max-width: 600px) {
  .subnav ul { gap: 0; padding-inline: 6px; }
  .subnav a { padding: 12px 10px; font-size: .68rem; letter-spacing: .05em; border-radius: var(--radius-xs); }
}

.hero__video::-webkit-media-controls, .hero__video::-webkit-media-controls-start-playback-button, .hero__video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

.subnav .l-sm { display: none; }
@media (max-width: 600px) {
  .subnav .l-lg { display: none; }
  .subnav .l-sm { display: inline; }
  .subnav ul { justify-content: space-between; padding-inline: 4px; }
  .subnav a { padding: 12px 4px; font-size: .64rem; letter-spacing: .02em; }
}

/* vídeo ampliado no celular */
.teto__video.is-full { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; aspect-ratio: auto; z-index: 300; background: #000; object-fit: contain; border-radius: 0; }
.video-x { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 301; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font: 400 2rem/1 var(--font-display); cursor: pointer; }
.video-x[hidden] { display: none; }
.video-aberto body, html.video-aberto { overflow: hidden; }
@media (max-width: 860px), (pointer: coarse) {
  .teto__palco { position: relative; }
  .teto__palco::after { content: "Toque para ampliar"; position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font: 600 .72rem/1 var(--font-display); letter-spacing: .04em; pointer-events: none; }
}

/* ---------- Plantas das vans: dentro do cartão da versão, botões de tamanho, prancha num cartão claro, zoom em tela cheia ---------- */
.ver__planta { grid-column: 1 / -1; margin-top: clamp(8px, 2vw, 20px); padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid rgba(255,255,255,.18); }
.pl__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pl__topo .h5 { margin: 0; color: var(--brand-white); }
.pl { display: grid; gap: 20px; }
.pl__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl__op { min-height: 44px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255,255,255,.55); background: transparent; color: var(--brand-white); font: 700 .85rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.pl__op:hover { background: rgba(255,255,255,.12); }
.pl__op[aria-pressed="true"] { background: var(--sand-50); color: var(--green-800); border-color: var(--sand-50); }
.pl__painel[hidden] { display: none; }
.pl__linha { text-align: center; color: var(--green-100); margin: 0 0 14px; }
.pl__linha strong { color: var(--brand-white); }
.pl__dorme { text-align: center; color: var(--brand-white); font: 700 1rem/1.3 var(--font-display); margin: -6px 0 14px; }
.pl__fig { position: relative; display: block; background: #fff; border-radius: var(--radius-md, 10px); overflow: hidden; cursor: zoom-in; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.pl__img { display: block; width: 100%; height: auto; }
.pl__amp { position: absolute; right: 12px; bottom: 12px; background: var(--green-700); color: var(--brand-white); font: 700 .78rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.pl__acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.pl__vazio { background: var(--sand-50); color: var(--text-body); border-radius: var(--radius-md, 10px); padding: clamp(28px, 5vw, 56px) 24px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.pl__vazio p { margin: 0; color: var(--sand-700); }
.pl__vazio .h4 { color: var(--green-800); }
.pl__atalho { display: inline-block; margin-top: 14px; color: var(--brand-white); font: 600 .9rem/1.4 var(--font-display); text-decoration: underline; text-underline-offset: 4px; }
.pl__atalho:hover { color: var(--red-200); }
.pl__zoom { position: fixed; inset: 0; z-index: 200; background: #fff; }
.pl__zoom[hidden] { display: none; }
.pl__rolagem { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; cursor: grab; }
.pl__rolagem.is-arrasta { cursor: grabbing; }
.pl__rolagem img { display: block; width: 2400px; max-width: none; height: auto; }
.pl__fechar { position: fixed; top: 14px; right: 14px; z-index: 201; }
@media (max-width: 720px) {
  .pl__amp { right: 8px; bottom: 8px; padding: 7px 10px; font-size: .68rem; }
  .pl__rolagem img { width: 1800px; }
}

/* "O que vem de série" com sistema elétrico e hidráulico em "abre e fecha": a lista fica curta e o resumo mostra o principal */
.ver__txt .chk { margin-bottom: 14px; }
.sis { border: 1px solid rgba(255,255,255,.22); border-radius: 10px; margin: 0 0 10px; }
.sis summary { cursor: pointer; list-style: none; display: grid; gap: 2px; padding: 12px 44px 12px 16px; position: relative; }
.sis summary::-webkit-details-marker { display: none; }
.sis summary::after { content: "+"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; font: 600 1.5rem/1 var(--font-display); transition: transform var(--duration-base) var(--ease-standard); }
.sis[open] summary::after { transform: rotate(45deg); }
.sis__t { font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.sis__r { font-size: .88rem; opacity: .8; }
.sis .chk { margin: 2px 16px 16px; }
.ver__txt .sis + .chk { margin-top: 14px; }

/* Imagens do projeto em 3D logo abaixo da planta (ilustrativas) */
.pl__galeria { margin: 28px 0 0; }
.pl__gt { margin: 0 0 14px; color: var(--brand-white); text-align: center; }
.pl__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pl__foto { display: block; border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; background: #fff; }
.pl__fimg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--duration-base) var(--ease-standard); }
.pl__foto:hover .pl__fimg { transform: scale(1.03); }
.pl__nota { margin: 12px 0 0; text-align: center; font-size: .85rem; color: var(--green-100); }
.pl__zoom.is-foto { background: #111; }
.pl__zoom.is-foto .pl__rolagem { display: grid; place-items: center; cursor: default; }
.pl__zoom.is-foto .pl__rolagem img { width: auto; max-width: 100%; max-height: 100vh; }
.ver__leg { margin: 10px 0 0; font-size: .82rem; color: var(--text-muted, #5b6b60); }
#essencial .ver__img { aspect-ratio: 16 / 9; }