/* ==========================================================================
   landing.css — Sistema visual das landing pages de SEO (plataforma & cidade)
   Camada ADITIVA carregada após styles.css. Usa os tokens --c-* / --ease-luxe.
   Imagens royalty-free (Unsplash) tratadas em duotone noir+ouro para manter a
   estética Haute Couture Digital. Anima com CSS puro (zero dependências).
   ========================================================================== */

:root{
  --lp-dawn: 40s;
  --lp-ease: var(--ease-luxe, cubic-bezier(.25,.46,.45,.94));
}

/* ---- HERO com imagem em duotone dourado -------------------------------- */
/* Uso: <section class="page-hero lp-hero" style="--lp-img:url('/assets/landing/lp-chip.jpg')"> */
.lp-hero{ position:relative; overflow:hidden; isolation:isolate; }
.lp-hero::before{
  /* sobrescreve o ::before nativo do .page-hero (glow 900x700) p/ virar cover */
  content:""; position:absolute; top:0; left:0; right:auto; bottom:auto;
  width:100%; height:100%; z-index:-2; pointer-events:none;
  background-image: var(--lp-img); background-size:cover; background-position:center;
  /* duotone: dessatura, aquece p/ ouro e escurece p/ leitura sobre o noir */
  filter: grayscale(100%) contrast(1.08) brightness(.5) sepia(.6) saturate(1.7) hue-rotate(-6deg);
  transform: scale(1.08);
  animation: lp-kenburns 26s var(--lp-ease) infinite alternate;
}
.lp-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(201,169,110,.20), transparent 55%),
    linear-gradient(180deg, rgba(11,11,11,.62) 0%, rgba(11,11,11,.80) 55%, rgba(11,11,11,.94) 100%);
}
/* fio dourado sutil que cruza o hero */
.lp-hero .container{ position:relative; z-index:1; }
.lp-hero .section-desc{ max-width:44ch; }

/* selo/kicker de localidade ou especialidade acima do H1 */
.lp-eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'Outfit',sans-serif; font-weight:500; font-size:.72rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--c-gold);
  padding:.5em 1.1em; border:1px solid rgba(201,169,110,.35); border-radius:2em;
  background:rgba(201,169,110,.06); backdrop-filter:blur(2px);
}
.lp-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--c-gold);
  box-shadow:0 0 0 0 rgba(201,169,110,.6); animation:lp-pulse 2.6s var(--lp-ease) infinite;
}

/* ---- MARQUEE de chips (palavras-chave / stack) ------------------------- */
.lp-marquee{
  position:relative; overflow:hidden; margin-top:38px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.lp-marquee-track{
  display:inline-flex; gap:14px; white-space:nowrap; will-change:transform;
  animation:lp-scroll 34s linear infinite;
}
.lp-marquee:hover .lp-marquee-track{ animation-play-state:paused; }
.lp-chip{
  flex:0 0 auto; font-family:'Outfit',sans-serif; font-weight:400; font-size:.82rem;
  letter-spacing:.06em; color:var(--c-cream); padding:.62em 1.15em;
  border:1px solid rgba(201,169,110,.22); border-radius:2em; background:rgba(255,255,255,.02);
}
.lp-chip strong{ color:var(--c-gold); font-weight:500; }

/* ---- SPLIT: texto + figura (seções "sobre a cidade" / "sobre a agência") */
.lp-split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px);
  align-items:center; margin-top:44px;
}
.lp-split.lp-split--rev .lp-split-media{ order:-1; }
.lp-split-body p{ margin:0 0 1.05em; }
.lp-split-body p:last-child{ margin-bottom:0; }

/* Figura emoldurada com duotone + moldura dourada + kenburns */
.lp-figure{
  position:relative; border-radius:3px; overflow:hidden; isolation:isolate;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
}
.lp-figure::after{ /* moldura fina interna dourada */
  content:""; position:absolute; inset:12px; z-index:2; pointer-events:none;
  border:1px solid rgba(201,169,110,.45);
}
.lp-figure img{
  display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  filter:grayscale(100%) contrast(1.05) brightness(.72) sepia(.5) saturate(1.5) hue-rotate(-6deg);
  transform:scale(1.04); transition:transform 1.4s var(--lp-ease), filter 1.4s var(--lp-ease);
}
.lp-figure:hover img{ transform:scale(1.09); filter:grayscale(100%) contrast(1.08) brightness(.8) sepia(.42) saturate(1.6) hue-rotate(-6deg); }
.lp-figure-tag{
  position:absolute; left:20px; bottom:20px; z-index:3;
  font-family:'Outfit',sans-serif; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-ivory); background:rgba(11,11,11,.55); border:1px solid rgba(201,169,110,.4);
  padding:.5em 1em; border-radius:2em; backdrop-filter:blur(3px);
}
/* variante tall (retrato) */
.lp-figure--tall img{ aspect-ratio:3/4; }

/* Sobre seções claras (section--soft / ivory) a figura fica mais luminosa */
.section--soft .lp-figure img,
.section:not(.section--dark) .lp-figure img{
  filter:grayscale(60%) contrast(1.04) brightness(.92) sepia(.28) saturate(1.35) hue-rotate(-6deg);
}

/* ---- STATS animados (barra dourada + número) --------------------------- */
.lp-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:rgba(201,169,110,.16); border:1px solid rgba(201,169,110,.16);
  margin-top:44px;
}
.lp-stat{ background:var(--c-noir,#0b0b0b); padding:30px 26px; position:relative; }
.section:not(.section--dark) .lp-stat{ background:var(--c-ivory,#f8f5f0); }
.lp-stat-num{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(2.2rem,4vw,3rem); line-height:1; color:var(--c-gold);
}
.lp-stat-label{
  display:block; margin-top:10px; font-family:'Outfit',sans-serif; font-size:.8rem;
  letter-spacing:.04em; color:var(--c-text-muted,#8a857d);
}
.lp-stat::after{ /* linha dourada que "cresce" ao revelar */
  content:""; position:absolute; left:26px; right:26px; bottom:0; height:2px;
  background:var(--c-gold); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--lp-ease) .2s;
}
.lp-stat.reveal.visible::after,
.reveal.visible .lp-stat::after{ transform:scaleX(1); }

/* ---- FAIXA de destaque com fundo de imagem (quote/promessa) ------------ */
.lp-band{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(56px,9vw,110px) 0; text-align:center;
}
.lp-band::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--lp-img); background-size:cover; background-position:center;
  filter:grayscale(100%) contrast(1.1) brightness(.34) sepia(.55) saturate(1.6) hue-rotate(-6deg);
}
.lp-band::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(11,11,11,.72),rgba(11,11,11,.86));
}
.lp-band-quote{
  font-family:'Cormorant Garamond',serif; font-weight:300; font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1.3; color:var(--c-ivory);
  max-width:20ch; margin:0 auto;
}
.lp-band-quote em{ color:var(--c-gold); font-style:italic; }

/* ---- Lista de checagens (o que entregamos, enxuto) --------------------- */
.lp-checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px 34px; margin-top:36px; list-style:none; padding:0; }
.lp-check{ position:relative; padding-left:34px; font-family:'Outfit',sans-serif; font-size:.98rem; color:var(--c-cream); line-height:1.55; }
.section:not(.section--dark) .lp-check{ color:var(--c-text-subtle,#6b665f); }
.lp-check::before{
  content:""; position:absolute; left:0; top:.28em; width:18px; height:18px;
  border:1px solid var(--c-gold); border-radius:50%;
}
.lp-check::after{
  content:""; position:absolute; left:6px; top:.5em; width:6px; height:10px;
  border:solid var(--c-gold); border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}
.lp-check strong{ color:var(--c-gold-light,#ddc08a); font-weight:500; }
.section:not(.section--dark) .lp-check strong{ color:var(--c-noir); }

/* ---- Keyframes --------------------------------------------------------- */
@keyframes lp-kenburns{ from{ transform:scale(1.08) translate3d(0,0,0);} to{ transform:scale(1.16) translate3d(-1.5%,-2%,0);} }
@keyframes lp-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes lp-pulse{ 0%{ box-shadow:0 0 0 0 rgba(201,169,110,.6);} 70%{ box-shadow:0 0 0 8px rgba(201,169,110,0);} 100%{ box-shadow:0 0 0 0 rgba(201,169,110,0);} }

/* ---- Responsivo -------------------------------------------------------- */
@media (max-width:820px){
  .lp-split{ grid-template-columns:1fr; gap:34px; }
  .lp-split.lp-split--rev .lp-split-media{ order:0; }
  .lp-figure img{ aspect-ratio:16/10; }
  .lp-figure--tall img{ aspect-ratio:4/3; }
}

/* ---- Acessibilidade: sem movimento ------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .lp-hero::before, .lp-marquee-track, .lp-eyebrow::before, .lp-figure img{ animation:none !important; transform:none !important; }
  .lp-figure img{ transform:scale(1.01) !important; }
}