/* ============================================================
   base.css — fundação UNIVERSAL da LP (reuso entre clientes)
   Reset · wrapper .lp · MODELO DE CAMADAS ABSOLUTAS · as duas
   classes de imagem · tipografia · botões · sistema de reveal.
   Específico do cliente (cores/fontes/imagens) vem dos tokens
   e do lp.css. NÃO hardcode cor aqui — só var(--token).
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:var(--stroke-focus) solid var(--border-focus);outline-offset:3px}

body{
  background:var(--bg-canvas);
  color:var(--fg-default);
  font-family:var(--font-sans);
  font-size:var(--text-body-md);
  line-height:var(--lh-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   WRAPPER + MODELO DE CAMADAS
   .lp            -> página; corta só a sangria lateral
   .lp::before    -> bg-textura-pagina (atrás de TUDO; fica no mobile)
   .lp-section    -> seção no fluxo; overflow VISIBLE p/ imagens sangrarem
   .lp-deco       -> camada decorativa de canto (some no mobile)
   .lp-img        -> imagem principal (vira fluxo no mobile)
   .lp-wrap       -> coluna de conteúdo (z acima das camadas)
   ============================================================ */
.lp{position:relative;overflow-x:hidden;isolation:isolate}
.lp::before{                       /* bg-textura-pagina */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:var(--bg-canvas);
  background-image:var(--img-bg-texture,none);   /* hook: dropar grão real depois */
  background-size:cover;
}

/* padding-block é definido POR SEÇÃO (não global) p/ a imagem cortar exatamente no fim da seção */
.lp-section{position:relative;z-index:1;overflow:visible}
.lp-wrap{position:relative;z-index:3;
  width:100%;max-width:1188px;margin-inline:auto;padding-inline:24px}
.lp-content{position:relative;z-index:3}

/* camadas que sangram (ancoradas à seção, offsets em %/rem por seção) */
/* --par = deslocamento do parallax (GSAP anima essa var); compõe com o transform de posição da deco */
.lp-deco{position:absolute;z-index:1;pointer-events:none;will-change:transform;--par:0px;
  transform:translateY(var(--par));
  background-size:contain;background-repeat:no-repeat;background-position:center}
.lp-img{position:absolute;z-index:2;will-change:transform}
.lp-img__object,.lp-img__glow,.lp-img__keys{position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;background-size:contain;
  background-repeat:no-repeat;background-position:center}
.lp-img__glow{mix-blend-mode:screen;pointer-events:none}  /* glow soma luz (não achatar!) */
.lp-img__keys{pointer-events:none}

/* ============================================================
   TIPOGRAFIA [P1] (sem órfãs; balance em headings)
   ============================================================ */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-medium);
  line-height:var(--lh-heading);letter-spacing:var(--ls-display);
  text-wrap:balance;color:var(--fg-default)}
p{text-wrap:pretty}
.lp-eyebrow{display:inline-block;font-family:var(--font-sans);font-weight:var(--fw-medium);
  font-size:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--brand-active)}
.lp-display{font-family:var(--font-display);font-size:var(--text-display);
  line-height:var(--lh-tight);letter-spacing:var(--ls-display);font-weight:var(--fw-medium)}
.lp-script{font-family:var(--font-script);font-weight:var(--fw-semibold)}
.em{font-style:italic;color:var(--brand-hover)}
.lp-lead{font-size:var(--text-body-lg);line-height:var(--lh-body);color:var(--fg-muted)}

/* ============================================================
   BOTÕES (cápsula, gradiente) — todos com hover [P5]
   ============================================================ */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--radius-button);
  font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:14px;line-height:1;
  color:var(--brand-subtle);background-image:var(--gradient-btn-primary);
  box-shadow:1px 2px 3.65px rgba(0,0,0,.15);
  transition:transform var(--dur-default) var(--ease-ease-out),
    box-shadow var(--dur-default) var(--ease-ease-out),filter var(--dur-default)}
.lp-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow-gold);filter:brightness(1.05)}
.lp-btn:active{transform:translateY(0)}
.lp-btn--lg{padding:16px 30px;font-size:15px}
.lp-btn--wa{background-image:var(--gradient-btn-whatsapp)}

/* secundário = BORDA gradiente, fundo transparente (duplo background,
   respeita border-radius — diferente de border-image) */
.lp-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border-radius:var(--radius-button);
  font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:14px;line-height:1;
  color:var(--brand-active);border:2px solid transparent;
  background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,
    var(--gradient-btn-secondary-border) border-box;
  transition:color var(--dur-default),transform var(--dur-default),background var(--dur-default)}
.lp-ghost:hover{transform:translateY(-2px);color:var(--brand-fg);
  background:var(--gradient-btn-secondary-border) padding-box,
    var(--gradient-btn-secondary-border) border-box}

/* ============================================================
   REVEAL — opacity:0 só com JS (.js no <html>); sem JS, conteúdo visível.
   GSAP (lp-anim.js) revela; fallback força visível se algo falhar.
   ============================================================ */
.js .reveal,.js .heroAnim{opacity:0}
.reveal,.heroAnim{will-change:transform,opacity}
.anim-failsafe .reveal,.anim-failsafe .heroAnim{opacity:1!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .heroAnim{opacity:1!important}
}

/* ============================================================
   MOBILE (≤768) — REGRA DAS DUAS CLASSES DE IMAGEM
   deco-*  -> somem;   img-* -> entram no fluxo, ACIMA do texto, sem corte
   ============================================================ */
@media (max-width:768px){
  .lp-deco{display:none!important}
  .lp-img{position:static!important;inset:auto!important;order:-1;
    width:100%;max-width:460px;height:auto!important;margin-inline:auto;
    transform:none!important}
  .lp-img__object{position:relative;inset:auto;height:auto}     /* define a altura */
  .lp-img__glow,.lp-img__keys{position:absolute;inset:0;height:100%}/* overlay alinhado */
}

/* utilitários */
.lp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lp-center{text-align:center}