/* ============================================================================
   LP Salão Lucrativo — versão clara (referência: realeactives.com).
   Fundo branco, foto clara em tela cheia, títulos que misturam grotesca em
   negrito com serifada, cards numerados em cinza quente, rodapé em blush.
   Cantos retos ou 4px; hairlines; nada de pílula.
   ========================================================================== */

:root {
  --tinta: #111111;
  --tinta-2: #3a3a3a;
  --fundo: #ffffff;
  --cinza: #f3f2ef;
  --blush: #f6e4df;
  --blush-forte: #efd2ca;
  --bordo: #7a1420;
  --linha: rgb(0 0 0 / 0.12);
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "New York", Georgia, serif;
  --margem: 20px;
  --largura: 1360px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (min-width: 768px) {
  :root { --margem: 32px; }
}

@media (min-width: 1200px) {
  :root { --margem: 48px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
ul { list-style: none; }
[id] { scroll-margin-top: 64px; }
:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; }

/* Títulos mistos: <b> é a grotesca em negrito; o resto, a serifada. */
.misto {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.misto b {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* ── cabeçalho: masthead de revista ─────────────────────────────────────
   Linha fina com a edição, o nome grande no centro e a navegação em
   versalete entre filetes. Fica escondido durante a intro, aparece por cima
   da foto quando ela termina e vira barra compacta branca ao rolar.
   ------------------------------------------------------------------------ */

.cab {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "linha linha linha"
    ". marca cta"
    "nav nav nav";
  align-items: center;
  padding: 0 var(--margem);
  color: var(--tinta);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), background-color 300ms var(--ease);
}

.cab[data-visivel="false"] {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}

.cab a { text-decoration: none; }

.cab-linha {
  grid-area: linha;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 10px;
  border-bottom: 1px solid rgb(0 0 0 / 0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cab-linha a:hover { text-decoration: underline; text-underline-offset: 3px; }

.marca {
  grid-area: marca;
  display: inline-flex;
  align-items: baseline;
  justify-self: center;
  gap: 0.16em;
  padding: 10px 0 6px;
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: 1;
  white-space: nowrap;
  transition: font-size 300ms var(--ease), padding 300ms var(--ease);
}

.marca b {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.05em;
}

.marca i {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.cab-nav {
  grid-area: nav;
  display: flex;
  justify-content: center;
  gap: 34px;
  padding: 9px 0 8px;
  border-top: 3px double rgb(0 0 0 / 0.55);
  border-bottom: 1px solid rgb(0 0 0 / 0.55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cab-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.cab-cta {
  grid-area: cta;
  justify-self: end;
}

/* Rolou: barra branca de uma linha — navegação, nome, ação. */
.cab[data-compacto="true"] {
  grid-template-areas: "nav marca cta";
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--linha);
}

.cab[data-compacto="true"] .cab-linha { display: none; }

.cab[data-compacto="true"] .marca {
  padding: 12px 0;
  font-size: 30px;
}

.cab[data-compacto="true"] .cab-nav {
  justify-content: flex-start;
  gap: 24px;
  padding: 0;
  border: 0;
  font-size: 11px;
}

@media (max-width: 900px) {
  .cab-linha-meio { display: none; }
}

@media (max-width: 767px) {
  .cab {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "linha linha"
      "marca cta";
  }

  .cab-linha { font-size: 10px; letter-spacing: 0.12em; }
  .cab-nav { display: none; }
  .marca { justify-self: start; font-size: 32px; padding: 10px 0; }

  .cab[data-compacto="true"] { grid-template-areas: "marca cta"; }
  .cab[data-compacto="true"] .marca { font-size: 26px; }
}

/* ── botões ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--tinta);
  border-radius: 4px;
  background: var(--tinta);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}

.btn:hover { background: #2a2a2a; }
.btn:active { transform: scale(0.98); }

.btn--pequeno { height: 36px; padding: 0 14px; font-size: 14px; }

.btn--claro {
  border-color: var(--tinta);
  background: transparent;
  color: var(--tinta);
}

.btn--claro:hover { background: var(--tinta); color: #fff; }

.btn--blush {
  border-color: var(--blush-forte);
  background: var(--blush);
  color: var(--tinta);
}

.btn--blush:hover { background: var(--blush-forte); }

/* ── slogan ─────────────────────────────────────────────────────────────── */

.slogan {
  padding: 88px var(--margem) 96px;
  text-align: center;
}

.slogan h2 {
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.08;
}

/* ── faixa corrida ──────────────────────────────────────────────────────── */

.faixa {
  overflow: hidden;
  border-block: 1px solid var(--tinta);
  white-space: nowrap;
}

.faixa-trilho {
  display: inline-flex;
  padding: 14px 0 12px;
  animation: corre 38s linear infinite;
}

.faixa span {
  padding-right: 0.6em;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

@keyframes corre {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .faixa-trilho { animation: none; }
}

/* ── social ─────────────────────────────────────────────────────────────── */

.social {
  padding: 24px 0 0;
}

.social h2 {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem);
  font-size: clamp(38px, 4.4vw, 64px);
}

.social-trilho {
  display: flex;
  gap: 6px;
  margin-top: 28px;
  padding: 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.social-trilho::-webkit-scrollbar { display: none; }

.social-trilho img {
  flex: none;
  height: clamp(260px, 30vw, 380px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.social-trilho img.retrato { aspect-ratio: 9 / 16; }

/* ── rodapé ─────────────────────────────────────────────────────────────── */

.rodape {
  margin-top: 104px;
  background: var(--blush);
}

.rodape-grade {
  display: grid;
  gap: 48px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 72px var(--margem) 48px;
}

@media (min-width: 960px) {
  .rodape-grade {
    grid-template-columns: 1.3fr 1fr 1.2fr;
    align-items: start;
  }
}

.rodape-marca {
  font-size: clamp(64px, 8vw, 124px);
  line-height: 0.86;
}

.rodape-marca i { font-style: italic; }

.rodape-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  font-size: 14px;
}

.rodape-links h3 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}

.rodape-links li + li { margin-top: 6px; }

.rodape-links a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
}

.rodape-links a:hover { text-decoration: underline; }

.participar h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.participar p {
  margin-top: 8px;
  color: var(--tinta-2);
  font-size: 15px;
}

.campo {
  display: flex;
  align-items: center;
  margin-top: 24px;
  border-bottom: 1px solid var(--tinta);
}

.campo input {
  flex: 1;
  min-width: 0;
  height: 48px;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: 16px;
}

.campo input::placeholder { color: var(--tinta-2); }
.campo input:focus { outline: none; }

.campo button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--tinta);
  color: #fff;
}

.recebido {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-weight: 600;
}

.rodape-fim {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 20px var(--margem) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  font-size: 13px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── entrada ao rolar ───────────────────────────────────────────────────── */

.revela {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.revela[data-visivel="true"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
}

/* ── intro de três painéis (a mesma da página de criativos, em claro) ─────
   A mecânica (--p, --a, --t e o corte de papel) vem de criativos.css; aqui
   só o que muda: fundo branco, foto clara no centro, texto escuro à esquerda.
   ------------------------------------------------------------------------ */

html:has(.cr-publico),
html:has(.cr-publico) body {
  background: var(--fundo);
  color-scheme: light;
}

.sl-intro.cr-publico {
  --alt: 100vh;
  --alt: 100svh;
  --cr-serif: "Newsreader";
  min-height: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  letter-spacing: normal;
}

@media (max-width: 767px) {
  .sl-intro.cr-publico {
    --alt: 100vh;
    --alt: 100svh;
  }
}

.sl-intro .cr-hero,
.sl-intro .cr-hero-palco,
.sl-intro .cr-hero-conteudo {
  min-height: var(--alt);
}

.sl-intro .cr-hero-fixo,
.sl-intro .cr-hero-abertura {
  height: var(--alt);
}

.sl-intro .cr-hero-fundo {
  height: var(--alt);
  margin-bottom: calc(var(--alt) * -1);
}

.sl-intro .cr-hero-palco,
.sl-intro .cr-hero-miolo {
  background: var(--blush);
}

/* As laterais não escurecem: a página é clara. */
.sl-intro .cr-hero-img--arte {
  filter: none;
}

.sl-intro .cr-hero-borda {
  opacity: 0.18;
}

.sl-intro .cr-hero-ceu {
  object-position: 58% 40%;
}

/* Blush por cima da foto enquanto o nome aparece; some quando o painel abre. */
.sl-veu {
  position: absolute;
  inset: 0;
  background: var(--blush);
  opacity: var(--a);
}

.sl-abertura {
  color: var(--tinta);
  font-size: clamp(56px, 8.4vw, 124px);
  line-height: 0.9;
  text-align: center;
}

.sl-abertura b,
.sl-abertura i {
  display: block;
}

.sl-abertura b {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.05em;
}

.sl-abertura i {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.sl-intro .cr-hero-conteudo {
  align-items: flex-start;
  padding: 48px 0;
  text-align: left;
}

.sl-intro .cr-hero-titulo-bloco {
  align-items: flex-start;
  width: min(620px, 52vw);
  margin-left: calc(var(--margem) + 2vw);
}

.sl-h1 {
  font-size: clamp(52px, 6.4vw, 104px);
}

.sl-h1 i { font-style: italic; }

.sl-intro .cr-hero-titulo-bloco p {
  max-width: 440px;
  margin-top: 22px;
  color: var(--tinta-2);
  font-size: 19px;
  line-height: 1.45;
}

.sl-intro .cr-hero-titulo-bloco .btn {
  margin-top: 30px;
}

/* Celular: o texto desce pra base da foto, sobre um véu branco. */
@media (max-width: 767px) {
  .sl-intro .cr-hero-ceu {
    object-position: 72% 40%;
  }

  .sl-intro .cr-hero-fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.75) 34%, rgb(255 255 255 / 0) 62%);
    opacity: var(--t);
  }

  .sl-intro .cr-hero-conteudo {
    justify-content: flex-end;
    padding: 32px 0 36px;
  }

  .sl-intro .cr-hero-titulo-bloco {
    width: auto;
    margin: 0 18px;
  }

  .sl-h1 {
    font-size: clamp(42px, 12vw, 56px);
  }

  .sl-intro .cr-hero-titulo-bloco p {
    font-size: 17px;
  }
}

/* Masthead por cima da intro: recuo pra não invadir as faixas das laterais,
   e sem botão — "Lista de espera aberta" já é a chamada. O botão volta na
   barra compacta. */
.cab[data-compacto="false"] {
  padding-inline: calc(4vw + 24px);
}

.cab[data-compacto="false"] .cab-cta {
  display: none;
}

@media (max-width: 767px) {
  .cab[data-compacto="false"] {
    grid-template-areas:
      "linha linha"
      "marca marca";
    padding-inline: calc(6vw + 12px);
  }

  .cab[data-compacto="false"] .marca {
    justify-self: center;
  }
}

/* Céu sobre as nuvens: o horizonte fica no terço de baixo, o título e o
   cabeçalho no céu liso. */
.sl-intro .cr-hero-ceu {
  top: -4%;
  height: 140%;
  object-position: 62% 50%;
}

@media (max-width: 767px) {
  .sl-intro .cr-hero-ceu {
    object-position: 70% 50%;
  }
}

@media (max-width: 767px) {
  .sl-intro .cr-hero-ceu {
    top: -6%;
    height: 112%;
  }

  /* O céu já é claro: o véu só firma a base do texto. */
  .sl-intro .cr-hero-fundo::after {
    background: linear-gradient(to top, rgb(255 255 255 / 0.78) 0%, rgb(255 255 255 / 0.4) 26%, rgb(255 255 255 / 0) 46%);
  }
}

.seta {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tinta);
  border-radius: 4px;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), opacity 200ms var(--ease);
}

.seta:hover:not(:disabled) { background: var(--tinta); color: #fff; }
.seta:disabled { opacity: 0.28; cursor: default; }

/* Telas ilustrativas (claras) dentro dos cards. */
.m-janela {
  position: absolute;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.12), 0 0 0 1px rgb(0 0 0 / 0.05);
  font-size: 11px;
  line-height: 1.3;
}

.m-agenda { inset: 4% 10% 18% 4%; }

.m-agenda-topo {
  padding: 10px 12px 9px;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  font-weight: 600;
}

.m-agenda-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(100% - 34px);
}

.m-agenda-col {
  position: relative;
  border-left: 1px solid #f0efec;
}

.m-agenda-col:first-child { border-left: 0; }

.m-agenda-col > i {
  display: block;
  padding: 6px 8px;
  font-style: normal;
  font-weight: 600;
}

.m-bloco {
  position: absolute;
  left: 5px;
  right: 5px;
  padding: 4px 6px;
  border-left: 3px solid var(--c);
  border-radius: 3px;
  background: color-mix(in srgb, var(--c) 15%, #fff);
}

.m-bloco b { display: block; font-weight: 600; }

.m-whats {
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: 66%;
  padding: 10px 12px;
  border-radius: 6px;
  background: #dcf8c6;
  box-shadow: 0 14px 30px rgb(0 0 0 / 0.14);
  font-size: 12px;
  line-height: 1.35;
}

.m-whats small {
  display: block;
  margin-bottom: 2px;
  color: #128c7e;
  font-size: 10.5px;
  font-weight: 700;
}

.m-criativos img {
  position: absolute;
  top: 6%;
  width: 40%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 18px 36px rgb(0 0 0 / 0.2);
}

.m-criativos img:nth-child(1) { left: 2%; transform: rotate(-8deg) translateY(6%); }
.m-criativos img:nth-child(2) { left: 30%; z-index: 2; top: 2%; }
.m-criativos img:nth-child(3) { left: 58%; transform: rotate(8deg) translateY(6%); }

.m-credito {
  inset: 6% 8%;
  padding: 18px;
  font-size: 12px;
}

.m-credito small {
  color: var(--tinta-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.m-credito-valor {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
}

.m-trilho {
  position: relative;
  height: 4px;
  margin: 18px 0 6px;
  border-radius: 2px;
  background: #ece9e4;
}

.m-trilho::before {
  content: "";
  position: absolute;
  inset: 0 42% 0 0;
  border-radius: 2px;
  background: var(--bordo);
}

.m-trilho::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 58%;
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
  transform: translate(-50%, -50%);
}

.m-escala {
  display: flex;
  justify-content: space-between;
  color: var(--tinta-2);
  font-size: 10.5px;
}

.m-linhas { margin-top: 14px; border-top: 1px solid #eee; }

.m-linhas div {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.m-linhas span { color: var(--tinta-2); }

.m-botao {
  display: grid;
  place-items: center;
  height: 36px;
  margin-top: 14px;
  border-radius: 4px;
  background: var(--tinta);
  color: #fff;
  font-weight: 600;
}

.m-curso {
  inset: 6% 8%;
  display: grid;
  grid-template-rows: 50% 1fr;
}

.m-curso img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-curso-corpo {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
}

.m-curso-corpo b {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.05;
}

.m-curso-corpo small {
  margin-top: 4px;
  color: var(--tinta-2);
}

.m-progresso {
  height: 4px;
  margin-top: auto;
  border-radius: 2px;
  background: #ece9e4;
}

.m-progresso i {
  display: block;
  width: 66%;
  height: 100%;
  border-radius: 2px;
  background: var(--bordo);
}

.m-curso-rodape {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--tinta-2);
}

.m-curso-rodape b {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--bordo);
}

/* ── UGC: carrossel de vídeos com o do centro em destaque ───────────────── */

.ugc {
  padding: 120px 0 40px;
  overflow: hidden;
  text-align: center;
}

.ugc h2 {
  padding: 0 var(--margem);
  font-size: clamp(38px, 4.6vw, 68px);
}

.ugc-palco {
  --w: 300px;
  --h: 534px;
  position: relative;
  height: calc(var(--h) + 24px);
  margin-top: 48px;
}

@media (max-width: 640px) {
  .ugc-palco { --w: 230px; --h: 409px; }
}

.ugc-trilho {
  position: absolute;
  top: 12px;
  left: 50%;
  display: flex;
  gap: 18px;
  transition: transform 600ms var(--ease);
}

.ugc-card {
  position: relative;
  flex: none;
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  border-radius: 6px;
  background: #ddd;
  box-shadow: 0 20px 44px rgb(0 0 0 / 0.14);
  transform: scale(0.8);
  transition: transform 600ms var(--ease), opacity 600ms var(--ease);
  cursor: pointer;
}

.ugc-card[data-lado="1"] { transform: scale(0.88); }
.ugc-card[data-ativo="true"] { transform: none; }
.ugc-card[data-lado="3"] { opacity: 0.6; }

.ugc-card img,
.ugc-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ugc-card video { opacity: 0; transition: opacity 300ms var(--ease); }
.ugc-card[data-tocando="true"] video { opacity: 1; }

.ugc-legenda {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 18%;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 0 14px rgb(0 0 0 / 0.35);
  transition: opacity 300ms var(--ease);
}

.ugc-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: opacity 300ms var(--ease), transform 200ms var(--ease);
}

.ugc-card:hover .ugc-play { transform: translate(-50%, -50%) scale(1.06); }

.ugc-card[data-tocando="true"] .ugc-play,
.ugc-card[data-tocando="true"] .ugc-legenda { opacity: 0; }

.ugc-setas {
  position: absolute;
  inset: 50% 0 auto;
  display: flex;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--margem);
  pointer-events: none;
  transform: translateY(-50%);
}

.ugc-setas .seta {
  border: 0;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
  pointer-events: auto;
}

.ugc-setas .seta:hover:not(:disabled) { background: var(--tinta); color: #fff; }

@media (max-width: 640px) {
  .ugc-setas { display: none; }
}

.rotulo {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Os vídeos já trazem legenda queimada no meio: o card só leva o nome, no
   alto, como o @ de um vídeo curto. */
.ugc-legenda {
  top: 14px;
  right: auto;
  bottom: auto;
  left: 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

/* Setas embaixo do carrossel, centradas — em cima dos cards brigavam com o vídeo. */
.ugc-setas {
  position: static;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  padding: 0;
  transform: none;
}

.ugc-setas .seta {
  border: 1px solid var(--tinta);
  background: transparent;
  box-shadow: none;
}

@media (max-width: 640px) {
  .ugc-setas { display: flex; }
}

/* Fio escuro no topo do card: o nome aparece até em fundo branco. */
.ugc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 22%;
  background: linear-gradient(rgb(0 0 0 / 0.38), transparent);
  pointer-events: none;
}

.ugc-legenda,
.ugc-play { z-index: 2; }

/* ── UGC como vitrine da Agência Salão Lucrativo ────────────────────────── */

.selo {
  display: inline-block;
  padding: 0.42em 0.5em 0.34em 0.62em;
  border-radius: 3px;
  background: var(--tinta);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
}

.selo--claro {
  background: #fff;
  color: var(--tinta);
  font-size: 9px;
}

.agencia-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.marca-mini {
  font-size: 26px;
  line-height: 1;
}

.marca-mini b {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.05em;
}

.marca-mini i {
  margin-left: 0.14em;
  font-family: var(--serif);
  letter-spacing: -0.02em;
}

.ugc-frase {
  max-width: 560px;
  margin: 18px auto 0;
  padding: 0 var(--margem);
  color: var(--tinta-2);
  font-size: 18px;
}

.ugc-legenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.ugc-setas {
  align-items: center;
  flex-wrap: wrap;
}

.ugc-cta {
  margin-left: 12px;
}


/* ── 05 Loja ────────────────────────────────────────────────────────────── */

.m-loja {
  inset: 2% 26% 8% 4%;
  display: grid;
  grid-template-rows: 44% 1fr;
}

.m-loja img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-loja-corpo {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
}

.m-loja-corpo > b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.m-loja .m-linhas { margin-top: 8px; }
.m-loja .m-botao { margin-top: auto; }

.m-afiliado {
  position: absolute;
  right: 2%;
  bottom: 14%;
  width: 46%;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--blush);
  box-shadow: 0 14px 30px rgb(0 0 0 / 0.12);
  font-size: 12px;
  line-height: 1.35;
}

.m-afiliado small {
  display: block;
  margin-bottom: 3px;
  color: var(--bordo);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.m-loja { inset: 2% 40% 6% 2%; }
.m-afiliado { right: 0; bottom: 20%; width: 38%; }

/* ── Agência Salão Lucrativo: bloco escuro, a identidade da página de
   criativos da agência. É a frente que a cliente vê trabalhando. ─────── */

.ugc {
  --ag-tinta: #f5f1e8;
  --ag-meta: #d2d2d7;
  padding: 128px 0 112px;
  background: #0b0b0c;
  color: var(--ag-tinta);
}

.ag-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--ag-tinta);
}

.ag-linha {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-size: clamp(13px, 1.2vw, 16px);
}

.ag-selo {
  padding: 0.42em 0.5em 0.36em 0.62em;
  border-radius: 4px;
  background: var(--ag-tinta);
  color: #0b0b0c;
  font-family: var(--sans);
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ag-salao {
  margin-right: -0.55em;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.55em;
  text-transform: uppercase;
}

.ag-lucrativo {
  font-family: var(--serif);
  font-size: clamp(72px, 10vw, 150px);
  font-style: italic;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.ugc h2 {
  margin-top: 36px;
  color: var(--ag-tinta);
  font-size: clamp(30px, 3.2vw, 46px);
}

.ugc .ugc-frase {
  color: var(--ag-meta);
}

.ag-entregas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  max-width: 900px;
  margin: 34px auto 0;
  padding: 14px var(--margem);
  border-block: 1px solid rgb(255 255 255 / 0.18);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ugc .ugc-card {
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.08);
}

.ugc .ugc-setas .seta {
  border-color: rgb(255 255 255 / 0.5);
  color: var(--ag-tinta);
}

.ugc .ugc-setas .seta:hover:not(:disabled) {
  background: var(--ag-tinta);
  color: #0b0b0c;
}

.ugc .ugc-cta {
  border-color: var(--ag-tinta);
  background: var(--ag-tinta);
  color: #0b0b0c;
}

.ugc .ugc-cta:hover { background: #fff; }

.ag-portfolio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 18px;
  color: var(--ag-tinta);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 640px) {
  .ag-entregas { gap: 8px 18px; font-size: 11px; }
  .ag-portfolio { flex-basis: 100%; justify-content: center; margin: 14px 0 0; }
}

/* Nomes das frentes ficaram mais longos: a navegação da barra compacta só
   cabe ao lado do nome em tela bem larga. */
@media (max-width: 1439px) {
  .cab[data-compacto="true"] .cab-nav { display: none; }
  .cab[data-compacto="true"] { grid-template-areas: ". marca cta"; }
}

/* ── tira social: carrossel contínuo ────────────────────────────────────── */

.social-faixa {
  margin-top: 28px;
  overflow: hidden;
}

.social-rolo {
  --altura: clamp(260px, 30vw, 400px);
  display: flex;
  gap: 6px;
  width: max-content;
  animation: rola var(--duracao, 80s) linear infinite;
}

.social-faixa:hover .social-rolo { animation-play-state: paused; }

.social-rolo img {
  flex: none;
  width: auto;
  height: var(--altura);
  max-width: none;
  object-fit: cover;
  background: var(--cinza);
}

@keyframes rola {
  to { transform: translateX(calc(-50% - 3px)); }
}

@media (prefers-reduced-motion: reduce) {
  .social-faixa { overflow-x: auto; }
  .social-rolo { animation: none; }
}

/* Card 02 com vídeo no lugar das artes. */
.m-criativos video,
.m-videos img {
  position: absolute;
  top: 6%;
  width: 40%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 6px;
  background: #ddd;
  box-shadow: 0 18px 36px rgb(0 0 0 / 0.22);
}

.m-criativos > :nth-child(1) { left: 2%; transform: rotate(-8deg) translateY(6%); }
.m-criativos > :nth-child(2) { left: 30%; z-index: 2; top: 2%; }
.m-criativos > :nth-child(3) { left: 58%; transform: rotate(8deg) translateY(6%); }

/* ── card 02: etiqueta sobre os criativos de antes e depois ────────────── */

.m-ad-chip {
  position: absolute;
  bottom: 12%;
  left: 4%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
  color: var(--tinta-2);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.m-ad-chip--depois {
  right: 4%;
  left: auto;
  color: var(--tinta);
}

.m-ad-chip-icone {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--blush);
  color: var(--bordo);
}

.m-ad-chip--depois { right: 6%; bottom: 8%; z-index: 4; }

/* ══ Frentes em tiles, no jeito da home da Apple ══════════════════════════
   Tile grande, texto centrado no alto (nome, uma frase, dois botões) e o
   produto subindo da base. Claro e escuro alternados; a primeira frente
   ocupa a largura toda.
   ══════════════════════════════════════════════════════════════════════════ */

.frentes {
  padding-top: 96px;
}

.frentes-topo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem);
}

.frentes-topo h2 {
  font-size: clamp(40px, 4.6vw, 68px);
}

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 40px;
  padding: 0 12px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 640px;
  overflow: hidden;
  padding-top: 56px;
  text-align: center;
}

.tile--largo {
  grid-column: 1 / -1;
  min-height: 680px;
}

.tile--blush { background: linear-gradient(180deg, #fbf1ed 0%, #f4dfd8 100%); }
.tile--creme { background: linear-gradient(180deg, #faf5ec 0%, #efe4cf 100%); }
.tile--nevoa { background: linear-gradient(180deg, #f3f5f8 0%, #dfe6ee 100%); }
.tile--escuro { background: #000; color: #f5f5f7; }

.tile-texto {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}

.tile-titulo {
  font-size: clamp(38px, 3.6vw, 56px);
  line-height: 1.05;
}

.tile--largo .tile-titulo { font-size: clamp(44px, 4.4vw, 72px); }

.tile-sub {
  max-width: 520px;
  margin: 10px auto 0;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tile--escuro .tile-sub { color: #f5f5f7; }

.tile-botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.tile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--tinta);
  border-radius: 4px;
  background: var(--tinta);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.tile-btn:hover { background: var(--bordo); border-color: var(--bordo); }

.tile-btn--linha {
  background: transparent;
  color: var(--tinta);
}

.tile-btn--linha:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.tile--escuro .tile-btn { border-color: #f5f1e8; background: #f5f1e8; color: #0b0b0c; }
.tile--escuro .tile-btn:hover { background: #fff; border-color: #fff; }
.tile--escuro .tile-btn--linha { background: transparent; color: #f5f1e8; }
.tile--escuro .tile-btn--linha:hover { background: #f5f1e8; color: #0b0b0c; }

/* O produto sobe da base do tile. */
.tile-visual {
  position: relative;
  width: min(560px, 86%);
  height: 340px;
  margin-top: auto;
  margin-bottom: 44px;
}

.tile--largo .tile-visual {
  width: min(860px, 86%);
  height: 380px;
}

/* Mockups maiores dentro do tile. */
.tile .m-janela { font-size: 12px; }
.tile .m-agenda { inset: 0 16% 16% 0; }
.tile--largo .m-agenda-topo { font-size: 14px; padding: 12px 14px 11px; }
.tile--largo .m-bloco { font-size: 12px; padding: 6px 8px; }
.tile--largo .m-whats { width: 44%; font-size: 14px; padding: 14px 16px; }

.tile .m-criativos img,
.tile .m-criativos video {
  top: 0;
  width: auto;
  height: 100%;
}

.tile .m-criativos > :nth-child(1),
.tile .m-criativos img:nth-child(1) { left: 50%; transform: translateX(-140%) rotate(-7deg) translateY(5%); }
.tile .m-criativos > :nth-child(2),
.tile .m-criativos video:nth-child(2) { left: 50%; transform: translateX(-50%); }
.tile .m-criativos > :nth-child(3),
.tile .m-criativos img:nth-child(3) { left: 50%; transform: translateX(40%) rotate(7deg) translateY(5%); }

.tile .m-ad-chip--depois { right: 4%; bottom: 6%; }

.tile .m-credito { inset: 0 12%; padding: 24px 26px; }
.tile .m-credito-valor { font-size: 52px; }

.tile .m-curso { inset: 0 10%; }

.tile .m-loja { inset: 0 24% 0 6%; }
.tile .m-afiliado { right: 0; bottom: 18%; width: 40%; }

.frentes + .faixa { margin-top: 88px; }

@media (max-width: 899px) {
  .tiles { grid-template-columns: 1fr; padding: 0; gap: 10px; }
  .tile, .tile--largo { min-height: 560px; padding-top: 44px; }
  .tile-visual, .tile--largo .tile-visual { width: calc(100% - 40px); height: 270px; margin-bottom: 30px; }
  .tile .m-agenda { inset: 0 8% 22% 0; }
  .tile--largo .m-whats { width: 66%; font-size: 12px; padding: 10px 12px; }
  .tile .m-credito { inset: 0 2%; padding: 18px; }
  .tile .m-credito-valor { font-size: 40px; }
  .tile .m-curso { inset: 0 4%; }
  .tile .m-loja { inset: 0 30% 0 0; }
  .tile .m-afiliado { width: 44%; }
}

/* Mockups não herdam o centro nem a cor clara do tile escuro. */
.tile-visual { text-align: left; }
.tile-visual .m-janela { color: var(--tinta); }
.tile-texto { margin-bottom: 40px; }

/* Simulador e curso com a altura do conteúdo, apoiados na base. */
.tile .m-credito { inset: auto 12% 0; }
.tile .m-curso { inset: auto 12% 0; height: 300px; }
.tile .m-loja { inset: auto 26% 0 6%; height: 300px; }

@media (max-width: 899px) {
  .tile .m-credito { inset: auto 2% 0; }
  .tile .m-curso { inset: auto 4% 0; height: 250px; }
  .tile .m-loja { inset: auto 30% 0 0; height: 250px; }
}

.tile-visual { color: var(--tinta); }

@media (max-width: 899px) {
  .tile, .tile--largo { min-height: 0; }
}

/* Tile com foto (CRM): texto à esquerda, a foto encostada à direita e
   fundindo no rosa do fundo — o fundo é a cor da borda da foto. */
.tile--foto {
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  background: linear-gradient(180deg, #e4d0cd 0%, #dfc6c2 50%, #d7b9b5 100%);
}

.tile--foto .tile-texto {
  width: min(560px, 40%);
  margin: 0;
  padding: 0 0 0 clamp(32px, 6vw, 110px);
  text-align: left;
}

.tile--foto .tile-sub { margin-left: 0; }
.tile--foto .tile-botoes { justify-content: flex-start; }

.tile--foto .tile-visual {
  position: absolute;
  inset: 0 0 0 auto;
  width: auto;
  height: 100%;
  margin: 0;
}

.tile--foto .tile-visual img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%);
  mask-image: linear-gradient(to right, transparent 0, #000 24%);
}

@media (max-width: 899px) {
  .tile--foto { align-items: center; padding-top: 44px; }
  .tile--foto .tile-texto { width: auto; padding: 0 24px; text-align: center; margin-bottom: 8px; }
  .tile--foto .tile-sub { margin-inline: auto; }
  .tile--foto .tile-botoes { justify-content: center; }
  .tile--foto .tile-visual { position: static; width: 100%; height: auto; }
  .tile--foto .tile-visual img {
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
  }
}

/* Tile com foto na base (Crédito): o fundo é a cor do alto da foto, então o
   texto assenta no céu liso da própria foto e a cadeira sobe da base. */
.tile--foto-base {
  background: linear-gradient(180deg, #ecdbc9 0%, #eeddcb 100%);
}

.tile--foto-base .tile-visual {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: auto;
  margin: 0;
}

.tile--foto-base .tile-visual img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
}

@media (max-width: 899px) {
  .tile--foto-base { min-height: 0; }
  .tile--foto-base .tile-visual { position: static; margin-top: -40px; }
}

/* A foto cresce pela altura (não pela largura): em tile largo ela não sobe
   por cima do texto, e as laterais fundem no fundo. */
@media (min-width: 900px) {
  .tile--foto-base .tile-visual {
    display: flex;
    justify-content: center;
    height: 70%;
  }

  .tile--foto-base .tile-visual img {
    width: auto;
    max-width: none;
    height: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%);
    mask-composite: intersect;
  }
}

/* Educação: fundo na cor da foto (azul-acinzentado, mais claro à esquerda),
   objetos largos — só as bordas fundem. */
.tile--edu {
  background: linear-gradient(90deg, #92a4ab 0%, #84969e 50%, #7b8d94 100%);
}

@media (min-width: 900px) {
  .tile--edu .tile-visual { height: 64%; }
  .tile--edu .tile-visual img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%);
    mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%);
  }
}

/* Objetos da educação ocupam pouco da foto: ela cresce e o alto liso passa
   por baixo do texto. */
@media (min-width: 900px) {
  .tile--edu .tile-visual { height: 90%; }
}

/* E-commerce: foto em fundo preto, no tile preto. */
.tile--loja { background: #000; }

@media (min-width: 900px) {
  .tile--loja .tile-visual { height: 66%; }
}

/* Foto nova tem a luz embutida no teto: ela cresce um pouco e as bordas
   fundem no preto do tile. */
@media (min-width: 900px) {
  .tile--loja .tile-visual { height: 74%; }
  .tile--loja .tile-visual img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%);
    mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%);
  }
}

/* E-commerce: a luminária é o topo da foto — a foto começa logo abaixo dos
   botões (não por baixo deles) e sem esmaecer em cima, pra luz aparecer
   inteira. */
@media (min-width: 900px) {
  .tile--loja .tile-visual {
    top: 292px;
    bottom: 0;
    height: auto;
  }

  .tile--loja .tile-visual img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
}

@media (max-width: 899px) {
  .tile--loja .tile-visual { margin-top: 0; }
  .tile--loja .tile-visual img { -webkit-mask-image: none; mask-image: none; }
}

/* Sem emenda: o tile tem o preto da borda da foto, e a foto esmaece só um
   fio no alto (antes da luminária) e mais nas laterais. */
.tile--loja { background: #030302; }

@media (min-width: 900px) {
  .tile--loja .tile-visual { top: 272px; }
  .tile--loja .tile-visual img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 2%);
    mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 2%);
  }
}

/* ── Agência: iPhone com o vídeo real rodando ──────────────────────────────
   O aparelho é desenhado aqui (não é foto): assim o vídeo roda de verdade na
   tela. Luz quente vindo de cima, como a do E-commerce; atrás, dois
   criativos reais de antes e depois. */
.tile--agencia {
  background:
    radial-gradient(ellipse 34% 46% at 50% 44%, rgb(255 206 150 / 0.2), transparent 70%),
    #030302;
}

.tile--agencia .tile-visual {
  position: absolute;
  inset: 262px 0 0;
  width: 100%;
  height: auto;
  margin: 0;
}

.ag-palco {
  position: absolute;
  inset: 0;
}

/* Cone de luz descendo sobre o aparelho. */
.ag-palco::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 70px;
  height: 7px;
  border-radius: 50%;
  background: #fff4dc;
  box-shadow: 0 0 18px 6px rgb(255 214 160 / 0.55);
  transform: translateX(-50%);
}

.ag-palco::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 72%;
  height: 90%;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgb(255 210 150 / 0.22), transparent 72%);
  transform: translateX(-50%);
  pointer-events: none;
}

.iphone {
  --h: 440px;
  position: absolute;
  bottom: -96px;
  left: 50%;
  z-index: 3;
  width: calc(var(--h) * 0.49);
  height: var(--h);
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(145deg, #5c5a57 0%, #2b2a28 30%, #1a1918 60%, #3d3b38 100%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.1) inset,
    0 30px 60px rgb(0 0 0 / 0.7),
    -1px -1px 0 rgb(255 230 200 / 0.18);
  transform: translateX(-50%);
}

.iphone-tela {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 38px;
  background: #000;
}

.iphone-tela video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iphone-ilha {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 30%;
  height: 22px;
  border-radius: 12px;
  background: #000;
  transform: translateX(-50%);
}

.iphone-notif {
  position: absolute;
  top: 42px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgb(245 245 247 / 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.3);
  color: #111;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
}

.iphone-notif b { display: block; font-size: 12px; font-weight: 600; }

.iphone-notif-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--blush);
  color: var(--bordo);
}

/* Criativos de antes e depois atrás do aparelho. */
.ag-card {
  position: absolute;
  bottom: 22px;
  z-index: 2;
  width: auto;
  height: 74%;
  max-width: none;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.08);
  filter: brightness(0.9);
}

.ag-card--esq { left: 50%; transform: translateX(-128%) rotate(-7deg); }
.ag-card--dir { left: 50%; transform: translateX(28%) rotate(7deg); }

@media (max-width: 899px) {
  .tile--agencia { min-height: 640px; }
  .tile--agencia .tile-visual { inset: auto 0 0; height: 380px; }
  .iphone { --h: 380px; bottom: -70px; }
  .ag-card { height: 70%; }
  .ag-card--esq { transform: translateX(-118%) rotate(-7deg); }
  .ag-card--dir { transform: translateX(18%) rotate(7deg); }
}

/* Tamanho explícito dos criativos (a proporção não pegava). */
.ag-card { --ch: 290px; width: calc(var(--ch) * 0.5625) !important; height: var(--ch) !important; aspect-ratio: auto; }
.ag-card--esq { transform: translateX(-150%) rotate(-7deg); }
.ag-card--dir { transform: translateX(50%) rotate(7deg); }

@media (max-width: 899px) {
  .ag-card { --ch: 250px; }
  .ag-card--esq { transform: translateX(-138%) rotate(-7deg); }
  .ag-card--dir { transform: translateX(38%) rotate(7deg); }
}

.iphone-notif b, .iphone-notif span span { white-space: nowrap; }
.iphone-notif > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) {
  .iphone-notif { top: 38px; left: 6px; right: 6px; padding: 7px 8px; font-size: 10px; }
  .iphone-notif b { font-size: 11px; }
  .iphone-notif-icone { width: 22px; height: 22px; }
}

/* ── Agência: três iPhones, sem a luminária desenhada ──────────────────────
   O fundo vira foto (foto/tile-agencia-bg.webp) quando existir; até lá,
   preto liso. Os dois das laterais mostram os criativos de antes e depois;
   o do meio, o vídeo com a notificação. */
.tile--agencia {
  background: #050505 url("foto/tile-agencia-bg.webp") center bottom / cover no-repeat;
}

.ag-palco::before,
.ag-palco::after { display: none; }

.iphone--centro { z-index: 3; }

.iphone--lado {
  --h: 372px;
  bottom: -64px;
  z-index: 2;
  filter: brightness(0.92);
}

.iphone--esq { transform: translateX(-148%) rotate(-8deg); }
.iphone--dir { transform: translateX(48%) rotate(8deg); }

.iphone-tela img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 899px) {
  .iphone--lado { --h: 300px; bottom: -44px; }
  .iphone--esq { transform: translateX(-128%) rotate(-8deg); }
  .iphone--dir { transform: translateX(28%) rotate(8deg); }
}

/* Fundo da Agência: o nicho com a luz fica na área dos celulares (a foto
   começa abaixo dos botões); em cima, preto liso pro texto. */
.tile--agencia {
  background: #030303;
}

.tile--agencia .tile-visual {
  background: url("foto/tile-agencia-bg.webp") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%);
  mask-composite: intersect;
}

.tile--agencia .tile-visual { inset: 232px 0 0; }

/* O nicho aparece: foto pela altura (luz no alto, chão embaixo) e os
   celulares menores, apoiados no chão iluminado em vez de cortados. */
.tile--agencia .tile-visual {
  background-size: auto 100%;
  background-position: center bottom;
}

.iphone--centro { --h: 310px; bottom: 30px; }
.iphone--lado { --h: 258px; bottom: 34px; }
.iphone--esq { transform: translateX(-138%) rotate(-7deg); }
.iphone--dir { transform: translateX(38%) rotate(7deg); }
.iphone { padding: 7px; border-radius: 36px; }
.iphone-tela { border-radius: 30px; }
.iphone-ilha { top: 8px; height: 17px; }
.iphone-notif { top: 32px; left: 6px; right: 6px; padding: 6px 8px; font-size: 9.5px; border-radius: 11px; }
.iphone-notif b { font-size: 10.5px; }
.iphone-notif-icone { width: 20px; height: 20px; border-radius: 5px; }
.iphone-notif-icone svg { width: 12px; height: 12px; }

@media (max-width: 899px) {
  .tile--agencia .tile-visual { height: 360px; }
  .iphone--centro { --h: 280px; bottom: 24px; }
  .iphone--lado { --h: 230px; bottom: 28px; }
  .iphone--esq { transform: translateX(-130%) rotate(-7deg); }
  .iphone--dir { transform: translateX(30%) rotate(7deg); }
}

/* ── Agência com as molduras de iPhone (PNG com a tela vazada) ─────────────
   No centro, o iPhone na mão com o vídeo; atrás, dois iPhones inclinados
   com os criativos — a mídia fica por baixo da moldura, e nos inclinados
   ela é deformada (matrix3d) pra casar com a perspectiva da tela. */

.ph-moldura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

/* Celular na mão (moldura 884×1000; tela em 95,24 → 449,790). */
.ph-mao {
  --alt: 540px;
  position: absolute;
  bottom: calc(var(--alt) * -0.2);
  left: calc(50% - var(--alt) * 0.884 * 0.308);
  z-index: 3;
  width: calc(var(--alt) * 0.884);
  height: var(--alt);
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.55));
}

.ph-mao-tela {
  position: absolute;
  left: 10.75%;
  top: 2.4%;
  width: 40.05%;
  height: 76.6%;
  overflow: hidden;
  border-radius: calc(var(--alt) * 0.046);
  background: #000;
}

.ph-mao-tela video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph-mao .iphone-notif { top: 11%; }

/* Celular inclinado (moldura 871×900), desenhado no tamanho natural e
   reduzido com scale — a matrix3d vale em pixel da moldura. */
.ph-ang {
  --alt: 330px;
  position: absolute;
  bottom: 26px;
  left: 50%;
  z-index: 2;
  width: calc(var(--alt) * 0.9678);
  height: var(--alt);
  filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.6)) brightness(0.92);
}

.ph-ang--esq { transform: translateX(-104%); }
.ph-ang--dir { transform: translateX(4%); }

.ph-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 871px;
  height: 900px;
  transform: scale(calc(var(--alt) / 900px));
  transform-origin: 0 0;
}

.ph-midia {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 650px;
  max-width: none;
  object-fit: cover;
  transform-origin: 0 0;
}

.ph-moldura--esp { transform: scaleX(-1); }

@media (max-width: 899px) {
  .ph-mao { --alt: 420px; }
  .ph-ang { --alt: 250px; bottom: 30px; }
  .ph-ang--esq { transform: translateX(-100%); }
  .ph-ang--dir { transform: translateX(0); }
}

/* Fundo da Agência de ponta a ponta no tile (sem virar um quadro dentro do
   quadro): o nicho vira o próprio tile; véu escuro no alto pro texto. */
.tile--agencia {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.25) 34%, rgb(0 0 0 / 0) 52%),
    url("foto/tile-agencia-bg.webp") center 62% / cover no-repeat,
    #030303;
}

.tile--agencia .tile-visual {
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Celular na mão mais baixo: não encosta nos botões. */
.ph-mao { --alt: 500px; bottom: calc(var(--alt) * -0.26); }

@media (max-width: 899px) {
  .ph-mao { --alt: 420px; bottom: calc(var(--alt) * -0.2); }
  .ph-mao .iphone-notif { padding: 5px 6px; gap: 5px; }
  .ph-mao .iphone-notif b { font-size: 9.5px; }
  .ph-mao .iphone-notif span span, .ph-mao .iphone-notif > span:last-child { font-size: 8.5px; }
  .ph-mao .iphone-notif-icone { width: 16px; height: 16px; }
}

/* Como na home da Apple: os tiles começam logo depois da hero, sem título
   de seção entre eles — só o respiro de 12px. */
.frentes { padding-top: 12px; }
.frentes-topo { display: none; }
.tiles { margin-top: 0; }

/* Celular de frente no meio (moldura 500×1000; tela em 30,24 → 469,975). */
.ph-frente {
  --alt: 470px;
  position: absolute;
  bottom: calc(var(--alt) * -0.24);
  left: 50%;
  z-index: 3;
  width: calc(var(--alt) * 0.5);
  height: var(--alt);
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.6));
  transform: translateX(-50%);
}

.ph-frente-tela {
  position: absolute;
  left: 6%;
  top: 2.4%;
  width: 88%;
  height: 95.1%;
  overflow: hidden;
  border-radius: calc(var(--alt) * 0.052);
  background: #000;
}

.ph-frente-tela video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph-frente .iphone-notif { top: 10%; left: 5%; right: 5%; }

@media (max-width: 899px) {
  .ph-frente { --alt: 400px; bottom: calc(var(--alt) * -0.2); }
  .ph-frente .iphone-notif { padding: 5px 6px; gap: 5px; }
  .ph-frente .iphone-notif b { font-size: 9.5px; }
  .ph-frente .iphone-notif > span:last-child { font-size: 8.5px; }
  .ph-frente .iphone-notif-icone { width: 16px; height: 16px; }
}

/* Leque de três iPhones de frente: os dois de fora um pouco menores,
   levemente inclinados e atrás do central. */
.ph-frente-tela img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.ph-frente--lado {
  --alt: 420px;
  bottom: calc(var(--alt) * -0.2);
  z-index: 2;
  filter: drop-shadow(0 24px 32px rgb(0 0 0 / 0.6)) brightness(0.9);
  transform-origin: 50% 100%;
}

.ph-frente--esq { transform: translateX(-122%) rotate(-9deg); }
.ph-frente--dir { transform: translateX(22%) rotate(9deg); }

@media (max-width: 899px) {
  .ph-frente--lado { --alt: 340px; bottom: calc(var(--alt) * -0.18); }
  .ph-frente--esq { transform: translateX(-112%) rotate(-9deg); }
  .ph-frente--dir { transform: translateX(12%) rotate(9deg); }
}

@media (max-width: 899px) {
  .ph-frente--centro { --alt: 350px; bottom: calc(var(--alt) * -0.16); }
  .ph-frente--lado { --alt: 290px; bottom: calc(var(--alt) * -0.12); }
  .ph-frente--esq { transform: translateX(-104%) rotate(-9deg); }
  .ph-frente--dir { transform: translateX(4%) rotate(9deg); }
}

/* Leque inteiro, sem corte embaixo: os celulares apoiam no chão do nicho. */
.tile--agencia { min-height: 720px; }
.ph-frente--centro { --alt: 420px; bottom: 30px; }
.ph-frente--lado { --alt: 360px; bottom: 40px; }
.ph-frente--esq { transform: translateX(-118%) rotate(-8deg); }
.ph-frente--dir { transform: translateX(18%) rotate(8deg); }

@media (max-width: 899px) {
  .tile--agencia { min-height: 660px; }
  .tile--agencia .tile-visual { height: 380px; }
  .ph-frente--centro { --alt: 330px; bottom: 20px; }
  .ph-frente--lado { --alt: 280px; bottom: 30px; }
  .ph-frente--esq { transform: translateX(-104%) rotate(-8deg); }
  .ph-frente--dir { transform: translateX(4%) rotate(8deg); }
}

/* Leque mais aberto: os de fora se afastam do central (só encostam de leve). */
.ph-frente--esq { transform: translateX(-148%) rotate(-8deg); }
.ph-frente--dir { transform: translateX(48%) rotate(8deg); }

@media (max-width: 899px) {
  .ph-frente--centro { --alt: 310px; }
  .ph-frente--lado { --alt: 250px; }
  .ph-frente--esq { transform: translateX(-128%) rotate(-8deg); }
  .ph-frente--dir { transform: translateX(28%) rotate(8deg); }
}

@media (max-width: 899px) {
  .ph-frente--centro { --alt: 290px; }
  .ph-frente--lado { --alt: 230px; }
  .ph-frente--esq { transform: translateX(-140%) rotate(-8deg); }
  .ph-frente--dir { transform: translateX(40%) rotate(8deg); }
}

/* Agência: um celular só, sobre degradê vinho (o bordô da casa) — mesma
   lógica dos outros tiles: um objeto, fundo liso na cor da frente. */
.tile--agencia {
  min-height: 640px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 78%, rgb(160 48 62 / 0.55), transparent 70%),
    linear-gradient(180deg, #2a0a0f 0%, #4a1219 55%, #5c1820 100%);
}

.tile--agencia .tile-visual { background: none; }

.ph-frente--centro {
  --alt: 430px;
  bottom: calc(var(--alt) * -0.18);
  filter: drop-shadow(0 40px 60px rgb(20 0 4 / 0.55));
}

.tile--agencia .tile-btn--linha { border-color: rgb(245 241 232 / 0.7); }

@media (max-width: 899px) {
  .tile--agencia { min-height: 620px; }
  .tile--agencia .tile-visual { height: 360px; }
  .ph-frente--centro { --alt: 360px; bottom: calc(var(--alt) * -0.14); }
}

/* Celular inteiro, sem corte embaixo. */
.ph-frente--centro { --alt: 350px; bottom: 30px; }

@media (max-width: 899px) {
  .ph-frente--centro { --alt: 310px; bottom: 26px; }
}

/* Notificação proporcional ao celular (não quebra linha em tela menor). */
.ph-frente .iphone-notif,
.ph-frente .iphone-notif > span:last-child {
  font-size: calc(var(--alt) * 0.026);
  white-space: nowrap;
}

.ph-frente .iphone-notif {
  top: 9%;
  left: 5%;
  right: 5%;
  gap: calc(var(--alt) * 0.018);
  padding: calc(var(--alt) * 0.016) calc(var(--alt) * 0.02);
  border-radius: calc(var(--alt) * 0.03);
}

.ph-frente .iphone-notif b { font-size: calc(var(--alt) * 0.03); }

.ph-frente .iphone-notif-icone {
  width: calc(var(--alt) * 0.055);
  height: calc(var(--alt) * 0.055);
  border-radius: calc(var(--alt) * 0.014);
}

.ph-frente .iphone-notif-icone svg { width: 60%; height: 60%; }

.ph-frente .iphone-notif b { font-size: calc(var(--alt) * 0.027); }
.ph-frente .iphone-notif { left: 4%; right: 4%; }

/* Agência: celular maior e saindo pela base do tile, no jeito Apple. */
.ph-frente--centro { --alt: 470px; bottom: calc(var(--alt) * -0.3); }

@media (max-width: 899px) {
  .ph-frente--centro { --alt: 400px; bottom: calc(var(--alt) * -0.28); }
}

/* ── Agência: foto do iPhone (tela verde recortada) com o vídeo por baixo ──
   A foto vai inteira num palco de 2400×1792 (coordenadas da própria foto);
   o vídeo é deformado (matrix3d) pros quatro cantos da tela verde. O palco
   é escalado e ancorado no topo do aparelho, que desce e sai pela base. */
.tile--agencia {
  background: #2c0a0f;
}

.tile--agencia .tile-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.ag-foto {
  --s: 0.56;
  --topo: 290px;
  position: absolute;
  top: calc(var(--topo) - 530px);
  left: calc(50% - 1230px);
  width: 2400px;
  height: 1792px;
  transform: scale(var(--s));
  transform-origin: 1230px 530px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
}

.ag-foto-img {
  position: absolute;
  inset: 0;
  width: 2400px;
  height: 1792px;
  max-width: none;
}

.ag-tela {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 650px;
  overflow: hidden;
  background: #000;
  transform-origin: 0 0;
}

.ag-tela video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ag-tela .iphone-notif {
  top: 58px;
  left: 12px;
  right: 12px;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 14px;
  font-size: 12px;
  white-space: nowrap;
}

.ag-tela .iphone-notif b { font-size: 13px; }
.ag-tela .iphone-notif-icone { width: 28px; height: 28px; border-radius: 7px; }
.ag-tela .iphone-notif-icone svg { width: 16px; height: 16px; }

@media (max-width: 899px) {
  .ag-foto { --s: 0.44; --topo: 300px; }
}

/* Aparelho centrado e só o último quarto saindo pela base. */
.tile--agencia { min-height: 700px; }
.ag-foto {
  --s: 0.46;
  --topo: 376px;
  left: calc(50% - 1190px);
  transform-origin: 1190px 530px;
}

@media (max-width: 899px) {
  .tile--agencia { min-height: 640px; }
  .ag-foto { --s: 0.36; --topo: 380px; }
}

/* Menor e mais alto: o vídeo aparece quase inteiro, só a base do aparelho sai. */
.tile--agencia { min-height: 640px; }
.ag-foto { --s: 0.42; --topo: 304px; }

@media (max-width: 899px) {
  .tile--agencia { min-height: 640px; }
  .ag-foto { --s: 0.37; --topo: 318px; }
}

.ag-foto { --s: 0.38; --topo: 292px; }

@media (max-width: 899px) {
  .ag-foto { --s: 0.36; --topo: 300px; }
}

/* Aparelho inteiro (sem corte) e a notificação fora dele, flutuando ao lado. */
.ag-foto { --s: 0.34; --topo: 285px; }

.ag-notif {
  position: absolute;
  top: calc(285px + 70px);
  left: calc(50% + 62px);
  right: auto;
  z-index: 3;
  width: max-content;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: rgb(250 248 246 / 0.94);
  box-shadow: 0 18px 40px rgb(20 0 4 / 0.45);
  font-size: 12.5px;
  white-space: nowrap;
}

.ag-notif b { font-size: 13.5px; }
.ag-notif .iphone-notif-icone { width: 30px; height: 30px; border-radius: 8px; }

@media (max-width: 899px) {
  .ag-foto { --s: 0.32; --topo: 300px; }
  .ag-notif { top: calc(300px + 90px); left: calc(50% + 18px); padding: 8px 10px 8px 8px; font-size: 11px; }
  .ag-notif b { font-size: 12px; }
  .ag-notif .iphone-notif-icone { width: 26px; height: 26px; }
}

/* Foto estendida (4400×2212, a foto original entra em 1000,420): cobre o
   tile inteiro sem mostrar a borda do recorte. */
.tile--agencia { background: #29090e; }

.ag-foto {
  top: calc(var(--topo) - 950px);
  left: calc(50% - 2190px);
  width: 4400px;
  height: 2212px;
  transform-origin: 2190px 950px;
  -webkit-mask-image: none;
  mask-image: none;
}

.ag-foto-img { width: 4400px; height: 2212px; }
.ag-tela { left: 1000px; top: 420px; }

/* Título da seção de volta, centrado e com respiro — abre os tiles. */
.frentes { padding-top: 88px; }
.frentes-topo {
  display: block;
  padding: 0 var(--margem) 40px;
  text-align: center;
}
.frentes-topo h2 { font-size: clamp(40px, 4.4vw, 64px); }

@media (max-width: 899px) {
  .frentes { padding-top: 56px; }
  .frentes-topo { padding-bottom: 24px; }
}

@media (max-width: 899px) {
  .ag-notif { left: auto; right: 14px; }
}

/* ── E-commerce: luz que acende e apaga ────────────────────────────────────
   Duas fotos com o mesmo enquadramento (luz apagada embaixo, acesa em cima);
   só a de cima muda de opacidade. */
.tile--loja .luz-on {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.tile--loja[data-luz="on"] .luz-on {
  animation: lampada 10s linear infinite;
}

@keyframes lampada {
  0%, 3% { opacity: 0; }
  4% { opacity: 0.85; }
  5% { opacity: 0.15; }
  6.5% { opacity: 0.95; }
  7.5% { opacity: 0.45; }
  9.5%, 72% { opacity: 1; }
  82%, 100% { opacity: 0; }
}

@media (max-width: 899px) {
  .tile--loja .tile-visual { position: relative; }
  .tile--loja .luz-on { left: 0; width: 100%; height: auto; transform: none; }
}

/* Mais frenético: ciclo curto, várias piscadas no acender, tremidas enquanto
   acesa e pisca de novo antes de apagar. */
.tile--loja[data-luz="on"] .luz-on {
  animation: lampada-frenetica 4.2s steps(1, end) infinite;
}

@keyframes lampada-frenetica {
  0% { opacity: 0; }
  3% { opacity: 1; }
  5% { opacity: 0.1; }
  7% { opacity: 0.9; }
  8% { opacity: 0; }
  10% { opacity: 1; }
  11% { opacity: 0.3; }
  12% { opacity: 1; }
  14% { opacity: 0.05; }
  16% { opacity: 1; }
  30% { opacity: 0.55; }
  31% { opacity: 1; }
  44% { opacity: 0.2; }
  45% { opacity: 1; }
  46% { opacity: 0.6; }
  47% { opacity: 1; }
  62% { opacity: 0.35; }
  63% { opacity: 1; }
  74% { opacity: 0; }
  76% { opacity: 1; }
  77% { opacity: 0; }
  79% { opacity: 0.8; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

/* Só piscadas: a luz fica acesa e pisca seco de vez em quando — sem apagar
   devagar nem ficar apagada. */
.tile--loja[data-luz="on"] .luz-on {
  animation: lampada-pisca 3.6s steps(1, end) infinite;
}

@keyframes lampada-pisca {
  0% { opacity: 1; }
  18% { opacity: 0; }
  20% { opacity: 1; }
  23% { opacity: 0; }
  25% { opacity: 1; }
  52% { opacity: 0; }
  54% { opacity: 1; }
  74% { opacity: 0; }
  76% { opacity: 1; }
  78% { opacity: 0; }
  80% { opacity: 1; }
  82% { opacity: 0; }
  84% { opacity: 1; }
  100% { opacity: 1; }
}

/* E-commerce com o vídeo da luz falhando (16:9): mesma caixa e mesmas bordas
   esmaecidas da foto que ele substitui. */
.tile--loja { background: #070706; }

.tile--loja .luz-video {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

@media (min-width: 900px) {
  .tile--loja .tile-visual { display: flex; justify-content: center; top: 262px; }
}

@media (max-width: 899px) {
  .tile--loja .luz-video { width: 100%; height: auto; }
}

/* Crédito: vídeo da cadeira girando (16:9) no lugar da foto — fundo do tile
   na cor do fundo do vídeo, bordas esmaecidas. */
.tile--creme.tile--foto-base { background: linear-gradient(90deg, #e3d8c3 0%, #e6dac6 50%, #d5c7b0 100%); }

#credito .giro-video {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

@media (min-width: 900px) {
  #credito .tile-visual { display: flex; justify-content: center; height: 72%; }
}

@media (max-width: 899px) {
  #credito .giro-video { width: 100%; height: auto; }
}

.tile--creme.tile--foto-base { background: linear-gradient(90deg, #edddcc 0%, #edddca 55%, #decab2 100%); }

@media (min-width: 900px) {
  #credito .tile-visual { height: 66%; }
}

/* A hero clara tem exatamente uma tela de altura: fundo e laterais não
   precisam grudar na rolagem (sticky dentro da máscara do papel rasgado fazia
   o Chrome redesenhar a camada inteira a cada quadro — faixas cinza/rosa ao
   voltar rolando de longe). Presos no lugar, sem custo na rolagem. */
.sl-intro .cr-hero-fundo,
.sl-intro .cr-hero-fixo {
  position: absolute;
  inset: 0 0 auto 0;
  margin-bottom: 0;
}

.sl-intro .cr-hero-painel--esq .cr-hero-fixo,
.sl-intro .cr-hero-painel--dir .cr-hero-fixo { width: 100%; }

.sl-intro .cr-hero-miolo { contain: paint; }

/* ── Sistema CRM: notificações de WhatsApp pipocando ───────────────────── */
.tile--foto { background: linear-gradient(180deg, #dec2bc 0%, #e0c1bd 55%, #c09990 100%); }

.wpp-pilha {
  position: absolute;
  top: 16%;
  right: 6%;
  z-index: 2;
  width: 300px;
  height: 260px;
}

.wpp-notif {
  --y: 0px;
  --esc: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgb(250 248 246 / 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 14px 34px rgb(60 20 20 / 0.18), 0 0 0 1px rgb(255 255 255 / 0.5) inset;
  color: #111;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: left;
  transform: translateY(var(--y)) scale(var(--esc));
  transform-origin: 50% 0;
  transition: transform 450ms cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 350ms ease;
  animation: wpp-entra 520ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

.wpp-notif[data-pos="1"] { --y: 70px; --esc: 0.96; opacity: 0.92; }
.wpp-notif[data-pos="2"] { --y: 132px; --esc: 0.92; opacity: 0.7; }
.wpp-notif[data-pos="3"],
.wpp-notif[data-sai] { --y: 180px; --esc: 0.88; opacity: 0; }

@keyframes wpp-entra {
  from { opacity: 0; transform: translateY(-14px) scale(0.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.wpp-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #25d366;
  color: #fff;
}

.wpp-icone svg { width: 22px; height: 22px; }
.wpp-txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wpp-txt b { display: block; font-size: 13.5px; font-weight: 600; }
.wpp-hora { align-self: start; color: #555; font-size: 11px; }

@media (max-width: 899px) {
  .wpp-pilha { top: auto; bottom: 46%; right: 12px; left: 12px; width: auto; height: 190px; }
  .wpp-notif { padding: 8px 10px; font-size: 11.5px; grid-template-columns: 30px 1fr auto; }
  .wpp-icone { width: 30px; height: 30px; }
  .wpp-notif[data-pos="1"] { --y: 60px; }
  .wpp-notif[data-pos="2"] { --y: 112px; }
}

/* A animação de entrada não pode prender o transform (senão todas ficam
   empilhadas no mesmo lugar). */
.wpp-notif { animation-fill-mode: backwards; }

@media (max-width: 899px) {
  .tile--foto .tile-visual { position: relative; }
  .wpp-pilha { top: 6px; bottom: auto; left: 14px; right: 14px; }
}

/* Celular: só duas na pilha, pra não tampar o aparelho. */
@media (max-width: 899px) {
  .wpp-notif[data-pos="2"] { --y: 100px; opacity: 0; }
  .wpp-pilha { left: 22px; right: 22px; }
}

/* Parallax da hero (volta, sem sticky): céu e laterais descem mais devagar
   que a página. --par = px rolados, escrito pelo JS. */
.sl-intro .cr-hero { --par: 0; }

.sl-intro .cr-hero-ceu {
  transform: translateY(calc(-3% * var(--p) + var(--par) * 0.45px));
  will-change: transform;
}

.sl-intro .cr-hero-fixo {
  transform: translateY(calc(var(--par) * 0.25px));
  will-change: transform;
}

/* Título da seção: faixa branca simples, centrada. */
.frentes { padding-top: 88px; }
.frentes-topo { padding: 0 var(--margem) 40px; text-align: center; }

@media (max-width: 767px) {
  .frentes { padding-top: 56px; }
  .frentes-topo { padding-bottom: 24px; }
}

/* Canvas da cadeira: mesmo encaixe do vídeo que ele substitui. */
#credito canvas.giro-video { aspect-ratio: 960 / 538; }