/* base.css · Roncati Engenharia (base-kit BuildV reskinado no DS).
   Container, tipografia utilitária, botões, seção. Tudo via tokens (tokens.css). Nenhuma cor/fonte fixa.
   Compartilhado pelas LPs residencial e minha-casa-minha-vida. */

/* Container único: TODAS as seções nesta largura (inclui CTA final e FAQ) */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--px)}

/* Ritmo de seção (respiro do DS) */
.section{padding-block:var(--section-y)}
.section--dark{background:var(--c-dark);color:var(--c-on-dark)}
.section--surface{background:var(--c-surface)}
.section--bg{background:var(--c-bg)}

/* Eyebrow: Montserrat 600, caixa alta, tracking do DS.
   Laranja puro como texto sobre claro é proibido (3.6:1): no claro usa --c-primary-dark, no escuro --c-primary */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:var(--fs-eyebrow);
  font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--c-primary-dark);margin-bottom:var(--sp-4)}
.eyebrow::before{content:"";width:32px;height:3px;border-radius:2px;background:var(--c-accent);flex:0 0 auto}
.section--dark .eyebrow,.on-dark .eyebrow{color:var(--c-primary)}

/* Escala tipográfica do DS (contida, corporativa) */
.h1,.h2,.h3{font-family:var(--font-display);text-wrap:balance}
.h1{font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--track-head)}
.h2{font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-head);letter-spacing:var(--track-head)}
.h3{font-size:var(--fs-h3);font-weight:600;line-height:var(--lh-head)}
.lead{font-size:var(--fs-lead);color:var(--c-muted);line-height:1.55}
.section--dark .lead,.on-dark .lead{color:var(--c-on-dark-muted)}
.muted{color:var(--c-muted)}
.body-copy{font-size:var(--fs-body);color:var(--c-muted);max-width:62ch}
.section--dark .body-copy{color:var(--c-on-dark-muted)}
.hl{color:var(--c-primary-dark)}
.section--dark .hl,.on-dark .hl,.hero .hl{color:var(--c-primary)}
.hero .hl .hl__off{color:var(--c-on-dark)} /* pontuação colada à palavra destacada fica branca */

/* Botões · UM tamanho só para todo CTA (header, hero, seções, CTA final). CTA abre o WhatsApp comercial
   (data-cta-whatsapp), nunca form. DS: texto MARINHO sobre laranja (5.19:1); no hover o marinho sobe de baixo
   e o texto fica branco (16:1). Nunca branco sobre laranja. --sm/--lg ficaram só por compatibilidade (mesmo tamanho). */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  min-height:var(--btn-h);max-width:100%;padding:.55em 1.6em;font-family:var(--font-display);font-weight:600;font-size:var(--btn-fs);
  letter-spacing:.01em;line-height:1.2;white-space:nowrap;text-align:center;border-radius:var(--r-btn);border:1.5px solid transparent;
  --btn-fill:var(--c-dark);--btn-ink:var(--c-white);
  transition:color .45s var(--ease-out),border-color .45s var(--ease-out),box-shadow .45s var(--ease-out),transform .45s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--btn-fill);border-radius:inherit;
  transform:translateY(102%);transition:transform .5s var(--ease-out)}
.btn svg{width:1.15em;height:1.15em;flex:0 0 auto;fill:currentColor;transition:transform .45s var(--ease-out)}
.btn:hover{color:var(--btn-ink);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:hover::before{transform:none}
.btn:hover svg{transform:rotate(-8deg) scale(1.08)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--c-primary);color:var(--c-dark)}
.btn--ghost{background:transparent;border-color:color-mix(in srgb,var(--c-dark) 40%,transparent);color:var(--c-dark)}
.btn--ghost:hover{border-color:var(--c-dark)}
/* sobre marinho o preenchimento do hover é branco (marinho sumiria no fundo) */
.section--dark .btn,.on-dark .btn,.hero .btn{--btn-fill:var(--c-white);--btn-ink:var(--c-dark)}
.section--dark .btn--ghost,.on-dark .btn--ghost{border-color:color-mix(in srgb,var(--c-white) 45%,transparent);color:var(--c-white)}
.section--dark .btn--ghost:hover,.on-dark .btn--ghost:hover{border-color:var(--c-white)}
.btn:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px}
@media (max-width:480px){.btn{white-space:normal}}
@media (prefers-reduced-motion:reduce){.btn,.btn::before,.btn svg{transition:none}.btn:hover{transform:none}}
.cta-row{margin-top:var(--sp-6)}

/* Cards (genérico) */
.card{background:var(--c-surface);border:1px solid var(--c-n200);border-radius:var(--r-md);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow-sm)}

/* Grid utilitário: SEMPRE par/3 (nunca órfão); empilha no mobile */
.grid{display:grid;gap:clamp(16px,2vw,28px)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:1fr}.grid--2{grid-template-columns:1fr}}

/* utilidades */
.stack{display:flex;flex-direction:column}
.center{text-align:center}
.hidden{display:none !important}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.media{display:block;overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover}