/* Manhã Galvão — landing page. Gerado a partir dos testes 02–05. */

/* ---------- Fontes ---------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(../fontes/fraunces.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300; font-display: swap; src: url(../fontes/fraunces-italico.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fontes/bricolage-grotesque.woff2) format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --cor-fundo: #FFF9E0;
  --cor-noite: #48070A;
  --cor-texto: #680508;
  --cor-texto-suave: #892104;
  --cor-destaque: #FAB550;
  --cor-destaque-2: #DF6812;
  /* nomes usados pelo hero */
  --creme: var(--cor-fundo);
  --vinho: var(--cor-texto);
  --noite: var(--cor-noite);
  --ferrugem: var(--cor-texto-suave);
  --laranja: var(--cor-destaque-2);
  --ambar: var(--cor-destaque);
  --fundo: var(--cor-fundo);
  --texto: var(--cor-texto);
  --linha: rgba(104, 5, 8, .2);
  --fonte-titulo: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fonte-texto: "Bricolage Grotesque", "Helvetica Neue", Arial, system-ui, sans-serif;
  --borda: clamp(1.25rem, 5vw, 4rem);
  --card-w: clamp(13.5rem, 24vw, 19rem);
}
/* a marca é sempre clara: o modo escuro do sistema não inverte as cores */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cor-fundo: #FFF9E0; } }
:root[data-theme="dark"] { --cor-fundo: #FFF9E0; }

/* ---------- Base ---------- */
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ========== 1–2. Hero + foto de bastidor ========== */
  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    color: var(--creme);
    background:
      radial-gradient(60% 55% at 95% 0%, rgba(198, 156, 110, .95), rgba(198, 156, 110, 0) 70%),
      radial-gradient(45% 40% at 55% -5%, rgba(160, 104, 64, .75), rgba(160, 104, 64, 0) 70%),
      radial-gradient(75% 55% at 12% 108%, rgba(192, 92, 32, .95), rgba(192, 92, 32, 0) 70%),
      radial-gradient(55% 50% at 105% 72%, rgba(118, 42, 24, .9), rgba(118, 42, 24, 0) 70%),
      radial-gradient(60% 75% at 0% 45%, #1C0203, rgba(28, 2, 3, 0) 75%),
      #4A0D0A;
  }
  .grao { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: overlay; opacity: .55; }
  /* espaço reservado no pé da tela para a frase (.gatilho), para o nome nunca encostar nela */
  .hero { --pe: calc(clamp(2rem, 7vh, 4rem) + 5.5rem); }
  .centro {
    position: absolute;
    inset: 0 0 var(--pe) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.6vw, 1.75rem);
    padding: var(--borda);
  }
  .nome { width: min(72vw, 40rem, (100svh - 17rem) * 1.31); height: auto; display: block; overflow: visible; }
  .nome path.letras { fill: var(--creme); }
  .estrela-fixa { fill: var(--creme); }
  .rotulo {
    margin: 0;
    font-size: clamp(.72rem, 1.05vw, .92rem);
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    padding-left: .34em; /* compensa o espaçamento da última letra */
    opacity: .85;
  }
  .gatilho {
    position: absolute;
    left: var(--borda);
    right: var(--borda);
    bottom: clamp(2rem, 7vh, 4rem);
    margin: 0 auto;
    max-width: 32ch;
    text-align: center;
    font-family: var(--fonte-titulo);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.3rem, 2.3vw, 1.9rem);
    line-height: 1.35;
    opacity: .9;
  }
  .camada { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
  .camada path { fill: var(--creme); }

  @media (prefers-reduced-motion: no-preference) {
    .nome .letras { animation: surge 1s cubic-bezier(.2, .7, .2, 1) both; }
    .rotulo, .gatilho { animation: surge .8s cubic-bezier(.2, .7, .2, 1) .35s both; }
    .estrela-fixa { transform-box: fill-box; transform-origin: center; animation: nasce .7s cubic-bezier(.3, 1.4, .5, 1) .8s both; }
    @keyframes surge { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes nasce { from { opacity: 0; transform: scale(0) rotate(-180deg); } to { opacity: 1; transform: none; } }
  }


  /* ---------- Foto de bastidor ---------- */
  :root { --ambar: #FAB550; }
  .foto {
    position: relative;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--noite);
    color: var(--creme);
  }
  .foto-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
  .foto-larga { display: none; object-position: 62% 40%; }
  .foto-alta { object-position: 62% 100%; }
  @media (min-aspect-ratio: 4/5) {
    .foto-larga { display: block; }
    .foto-alta { display: none; }
  }
  /* leve sombreado vinho: aquece a foto inteira e escurece o pé, onde fica a frase */
  .foto-sombra {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(to top, rgba(72, 7, 10, .9) 0%, rgba(72, 7, 10, .62) 26%, rgba(72, 7, 10, 0) 58%),
      rgba(104, 5, 8, .16);
  }
  .foto-frase {
    position: absolute;
    left: var(--borda);
    right: var(--borda);
    bottom: clamp(2.5rem, 9vh, 5.5rem);
    margin: 0;
    max-width: 18ch;
    font-family: var(--fonte-titulo);
    font-optical-sizing: auto;
    font-weight: 300;
    font-size: clamp(2rem, 4.4vw, 4.2rem);
    line-height: 1.06;
    letter-spacing: -.02em;
    text-wrap: balance;
  }
  .foto-frase span { display: block; }
  .foto-frase .brilho { margin-top: .25em; font-style: italic; color: var(--ambar); }
  .js .foto-frase span { opacity: 0; transform: translateY(16px); transition: opacity .7s ease-out, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .js .foto-frase .brilho { transition-delay: .25s; }
  .js .foto-frase.visivel span { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .js .foto-frase span { opacity: 1; transform: none; transition: none; } }

  /* com a animação ativa, a foto fica sobre o hero e surge do creme deixado pela estrela */
  .abertura { position: relative; }
  .orbita .abertura .foto { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; will-change: opacity; }

/* ========== 3. Experiências ========== */
  /* ---------- Experiências ---------- */
  .exp { padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 8vw, 6rem); overflow: hidden; }
  .exp-topo {
    padding: 0 var(--borda);
    max-width: 76rem;
    margin: 0 auto;
    display: grid;
    gap: 1rem 4rem;
    align-items: end;
    transition: opacity .4s;
  }
  @media (min-width: 900px) { .exp-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .exp-titulo { margin: 0; font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
  .exp-intro { margin: 0; max-width: 46ch; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.6; }
  .exp.com-leque .exp-topo, .exp.com-leque .exp-numeros { opacity: .12; }

  /* gatilhos de autoridade */
  .exp-numeros {
    max-width: 76rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    padding: 0 var(--borda);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    transition: opacity .4s;
  }
  @media (min-width: 900px) { .exp-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .exp-numeros > div { padding-top: 1rem; border-top: 1px solid rgba(104, 5, 8, .2); }
  .exp-numeros dt { font-family: var(--fonte-texto); font-weight: 800; font-variation-settings: "opsz" 96; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.035em; text-wrap: balance; font-variant-numeric: lining-nums tabular-nums; }
  .exp-numeros dd { margin: .5rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--cor-texto-suave); max-width: 30ch; text-wrap: pretty; }
  .exp-numeros dd strong { font-weight: 500; color: var(--cor-texto); }

  /* palco: guarda espaço acima dos cards para o leque abrir */
  .exp-palco { position: relative; margin-top: clamp(2rem, 5vw, 3.5rem); }
  .exp-trilho {
    list-style: none;
    margin: 0;
    padding: .5rem var(--borda);
    display: flex;
    gap: clamp(.9rem, 2vw, 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--borda);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .exp-trilho::-webkit-scrollbar { display: none; }
  .exp-trilho li { flex: 0 0 auto; scroll-snap-align: start; }

  .exp-card {
    position: relative;
    display: block;
    width: var(--card-w);
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    border-radius: 1.1rem;
    overflow: hidden;
    background: var(--cor-noite);
    color: var(--cor-fundo);
    text-align: left;
    cursor: pointer;
    transition: opacity .35s, transform .35s cubic-bezier(.2, .7, .2, 1);
  }
  .exp-card img, .exp-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .exp-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(72, 7, 10, .88), rgba(72, 7, 10, 0) 55%); }
  .exp-card-txt { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1; }
  .exp-card-marca { display: block; font-family: var(--fonte-titulo); font-weight: 400; font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.1; }
  .exp-card-linha { display: block; margin-top: .3rem; font-size: .85rem; opacity: .85; }
  .exp-card:focus-visible, .exp-item:focus-visible, .exp-tela button:focus-visible { outline: 2px solid var(--cor-destaque-2); outline-offset: 3px; }
  .exp.com-leque .exp-card:not(.aberto) { opacity: .35; }
  .exp-card.aberto { transform: translateY(6px); }

  /* espaço reservado enquanto não há material */
  .vazio {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    font-size: .8rem;
    letter-spacing: .04em;
    color: rgba(255, 249, 224, .55);
    background: repeating-linear-gradient(135deg, rgba(255, 249, 224, .05) 0 10px, rgba(255, 249, 224, 0) 10px 20px), var(--cor-noite);
  }
  .exp-card .vazio { place-items: start center; padding-top: 38%; }

  /* leque: itens saem de trás do card e abrem para cima, pouco inclinados */
  .exp-leque { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  .exp-item {
    position: absolute;
    padding: 0;
    border: 3px solid var(--cor-fundo);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--cor-noite);
    color: var(--cor-fundo);
    cursor: zoom-in;
    pointer-events: auto;
    opacity: 0;
    transform: translate(0, 0) rotate(0) scale(.7);
    transform-origin: 50% 100%;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .3s;
  }
  .exp-leque.aberto .exp-item { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); }
  .exp-leque.aberto .exp-item:hover { transform: translate(var(--x), calc(var(--y) - 8px)) rotate(var(--r)) scale(var(--s)); }
  .exp-item-rotulo {
    position: absolute;
    left: .6rem;
    bottom: .55rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 500;
    background: rgba(72, 7, 10, .75);
  }
  .exp-item-rotulo svg { width: .8rem; height: .8rem; fill: currentColor; }

  .exp-rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem var(--borda) 0; max-width: 76rem; margin: 0 auto; }
  .exp-dica { margin: 0; font-size: .9rem; color: var(--cor-texto-suave); }
  .exp-setas { display: flex; gap: .5rem; }
  .exp-setas button {
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(104, 5, 8, .3);
    background: transparent;
    cursor: pointer;
    display: grid; place-items: center;
  }
  .exp-setas button:hover { background: rgba(104, 5, 8, .06); }
  .exp-setas svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2; }

  /* tela maior */
  .exp-tela {
    width: 100vw; height: 100svh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: transparent;
    color: var(--cor-fundo);
  }
  .exp-tela::backdrop { background: rgba(40, 3, 5, .94); }
  .exp-tela[open] { display: grid; grid-template-rows: auto 1fr auto; }
  .exp-tela-topo { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--borda); }
  .exp-tela-marca { margin: 0; font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 400; }
  .exp-tela-contagem { font-size: .85rem; opacity: .7; margin-left: .75rem; font-family: var(--fonte-texto); }
  .exp-tela-meio { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--borda); }
  .exp-midia { position: relative; max-width: 100%; max-height: 100%; border-radius: 1rem; overflow: hidden; }
  .exp-midia video, .exp-midia img { display: block; max-width: min(100%, 64rem); max-height: calc(100svh - 10rem); }
  .exp-midia.vertical, .exp-midia .vazio-tela { height: min(calc(100svh - 10rem), 46rem); aspect-ratio: 9 / 16; }
  .exp-midia .vazio-tela { position: relative; }
  .exp-midia.vertical { background: #000; }
  .exp-midia.vertical video { height: 100%; width: 100%; object-fit: contain; }
  .exp-tela-legenda { margin: 0; padding: 1rem var(--borda) 1.5rem; text-align: center; font-size: .95rem; opacity: .85; }
  .exp-tela button { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid rgba(255, 249, 224, .35); background: rgba(72, 7, 10, .5); cursor: pointer; display: grid; place-items: center; }
  .exp-tela svg { width: 1.05rem; height: 1.05rem; stroke: currentColor; fill: none; stroke-width: 2; }
  .exp-tela .nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
  .exp-tela .ant { left: var(--borda); }
  .exp-tela .prox { right: var(--borda); }
  @media (max-width: 640px) {
    .exp-tela .nav { top: auto; bottom: -3.6rem; transform: none; }
    .exp-tela .ant { left: calc(50% - 3.4rem); }
    .exp-tela .prox { right: calc(50% - 3.4rem); }
    .exp-tela-legenda { padding-top: 4.5rem; }
  }
  .exp-tela[open] .exp-midia { animation: tela-entra .35s cubic-bezier(.2, .8, .2, 1); }
  @keyframes tela-entra { from { opacity: 0; transform: scale(.94); } }

  @media (prefers-reduced-motion: reduce) {
    .exp-item, .exp-card, .exp-topo, .exp-numeros { transition: none; }
    .exp-tela[open] .exp-midia { animation: none; }
  }

/* ========== 4. Quem sou ========== */
  /* ---------- Quem sou ---------- */
  .qs { padding: clamp(4rem, 10vw, 8rem) var(--borda); overflow: hidden; }
  .qs-in { max-width: 76rem; margin: 0 auto; }
  .qs-topo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
  }
  .qs-foto { margin: 0; }
  .qs-foto img { display: block; width: 100%; max-width: 30rem; height: auto; max-height: 78svh; object-fit: contain; margin-inline: auto; }

  .qs-nome { margin: 0; font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(2.3rem, 4.8vw, 4.2rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
  .qs-nome em { font-style: normal; font-weight: 400; }
  .qs-sim { margin: .7rem 0 0; font-family: var(--fonte-titulo); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--cor-texto-suave); }
  .qs-fala {
    margin: 1.75rem 0 0;
    padding-left: 1.1rem;
    border-left: 2px solid var(--cor-destaque-2);
    max-width: 30ch;
    font-family: var(--fonte-titulo);
    font-weight: 400;
    font-size: clamp(1.35rem, 2.1vw, 1.8rem);
    line-height: 1.25;
    text-wrap: balance;
  }
  .qs-focos {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.25rem;
    font-size: .95rem;
    font-weight: 500;
  }
  .qs-focos li::before {
    content: "";
    display: inline-block;
    width: .62em;
    height: .62em;
    margin-right: .45em;
    vertical-align: .02em;
    background: var(--cor-destaque-2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0 -50L8 -13.9L43.3 -25L16 0L43.3 25L8 13.9L0 50L-8 13.9L-43.3 25L-16 0L-43.3 -25L-8 -13.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0 -50L8 -13.9L43.3 -25L16 0L43.3 25L8 13.9L0 50L-8 13.9L-43.3 25L-16 0L-43.3 -25L-8 -13.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* pipeline: como ela trabalha */
  .qs-como { margin-top: clamp(3.5rem, 8vw, 6rem); }
  .qs-como-titulo { margin: 0; font-family: var(--fonte-titulo); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.75rem); }
  .qs-passos {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    counter-reset: passo;
  }
  /* linha que liga os passos */
  .qs-passos::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 1.1rem;
    height: 1px;
    background: var(--cor-texto);
    opacity: .3;
    transform-origin: left center;
  }
  .qs-passo { position: relative; counter-increment: passo; }
  .qs-passo::before {
    content: counter(passo, decimal-leading-zero);
    position: relative;
    display: grid;
    place-items: center;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    background: var(--cor-fundo);
    border: 1px solid var(--cor-texto);
    font-size: .78rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .qs-passo h4 { margin: 1rem 0 0; font-family: var(--fonte-titulo); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.1; }
  .qs-passo p { margin: .45rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--cor-texto-suave); max-width: 24ch; }

  .qs-objetivo { margin: clamp(2.5rem, 6vw, 4rem) 0 0; max-width: 24ch; font-family: var(--fonte-texto); font-weight: 500; font-variation-settings: "opsz" 72; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
  .qs-dif { margin: 1.1rem 0 0; max-width: 44ch; font-family: var(--fonte-texto); font-weight: 400; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.45; color: var(--cor-texto-suave); }

  .qs-poucas { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linha); max-width: 52ch; font-size: 1rem; line-height: 1.6; color: var(--cor-texto-suave); }
  .qs-poucas strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.15em; color: var(--cor-texto); }

  /* no computador, o fechamento (objetivo em diante) fica centralizado */
  @media (min-width: 821px) {
    .qs-objetivo, .qs-dif, .qs-poucas { margin-inline: auto; text-align: center; }
  }

  @media (max-width: 820px) {
    .qs-topo { grid-template-columns: 1fr; }
    .qs-foto img { max-width: 21rem; max-height: none; }
    /* no celular o pipeline fica em coluna, com a linha descendo */
    .qs-passos { grid-template-columns: 1fr; gap: 1.6rem; }
    .qs-passos::before { left: 1.1rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: center top; }
    .qs-passo { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 1rem; }
    .qs-passo::before { grid-row: span 2; }
    .qs-passo h4 { margin: .2rem 0 0; }
    .qs-passo p { max-width: none; }
  }

  /* ---------- Entrada: retrato varre da esquerda para a direita, texto vem da direita ---------- */
  .js .qs-foto img {
    clip-path: inset(0 100% 0 0);
    transform: translateX(-2.5rem) scale(1.04);
    transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), transform 1.3s cubic-bezier(.2, .7, .2, 1);
  }
  .js .qs-topo.visivel .qs-foto img { clip-path: inset(0 0 0 0); transform: none; }
  .js .qs-texto > * {
    opacity: 0;
    transform: translateX(3rem);
    transition: opacity .7s ease-out, transform .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(.35s + var(--i, 0) * .1s);
  }
  .js .qs-topo.visivel .qs-texto > * { opacity: 1; transform: none; }
  /* pipeline: a linha se desenha e os passos acendem em sequência */
  .js .qs-passos::before { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.6, 0, .2, 1); }
  .js .qs-passos.visivel::before { transform: none; }
  .js .qs-passo { opacity: 0; transform: translateX(1.5rem); transition: opacity .6s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.2s + var(--i, 0) * .22s); }
  .js .qs-passos.visivel .qs-passo { opacity: 1; transform: none; }
  @media (max-width: 820px) { .js .qs-passos::before { transform: scaleY(0); } .js .qs-passos.visivel::before { transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .js .qs-foto img, .js .qs-texto > *, .js .qs-passo, .js .qs-passos::before { clip-path: none; opacity: 1; transform: none; transition: none; }
  }

/* ========== 5–7. Depoimentos, chamada final e rodapé ========== */
  .in { max-width: 76rem; margin: 0 auto; }
  .estrela { display: inline-block; width: .7em; height: .7em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0 -50L8 -13.9L43.3 -25L16 0L43.3 25L8 13.9L0 50L-8 13.9L-43.3 25L-16 0L-43.3 -25L-8 -13.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0 -50L8 -13.9L43.3 -25L16 0L43.3 25L8 13.9L0 50L-8 13.9L-43.3 25L-16 0L-43.3 -25L-8 -13.9Z'/%3E%3C/svg%3E") center / contain no-repeat; }


  /* ---------- Depoimentos (vinho escuro) ---------- */
  .dep { background: var(--cor-noite); color: var(--cor-fundo); padding: clamp(4.5rem, 10vw, 8rem) 0; overflow: hidden; }
  .dep-topo { padding: 0 var(--borda); }
  .dep-titulo { margin: 0; font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.025em; }
  .dep-lista {
    list-style: none;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    padding: 0 var(--borda) .5rem;
    max-width: 76rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17rem, 82%);
    gap: clamp(1.5rem, 3vw, 3rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--borda);
    scrollbar-width: none;
  }
  .dep-lista::-webkit-scrollbar { display: none; }
  @media (min-width: 900px) { .dep-lista { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
  .dep-item { scroll-snap-align: start; display: flex; flex-direction: column; padding-top: 1.5rem; border-top: 1px solid rgba(255, 249, 224, .2); }
  .dep-aspas { font-family: var(--fonte-titulo); font-size: 3.5rem; line-height: .6; color: var(--cor-destaque); height: 1.6rem; }
  .dep-texto { margin: .75rem 0 0; font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.4; flex: 1; }
  .dep-texto.dep-vazio { font-family: var(--fonte-texto); font-size: .95rem; font-style: normal; line-height: 1.55; color: rgba(255, 249, 224, .5); border: 1px dashed rgba(255, 249, 224, .25); border-radius: .75rem; padding: 1rem; }
  .dep-quem { margin-top: 1.5rem; display: flex; align-items: center; gap: .85rem; }
  .dep-foto { width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: rgba(250, 181, 80, .16); color: var(--cor-destaque); font-size: .85rem; font-weight: 500; }
  .dep-foto img { width: 100%; height: 100%; object-fit: cover; }
  .dep-nome { display: block; font-weight: 500; font-size: .95rem; }
  .dep-cargo { display: block; font-size: .85rem; color: rgba(255, 249, 224, .7); }

  /* ---------- Chamada final (laranja) ---------- */
  .cta { background: var(--cor-destaque-2); color: var(--cor-noite); padding: clamp(5rem, 12vw, 9rem) var(--borda); text-align: center; }
  .cta-titulo { margin: 0 auto; max-width: 18ch; font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(2.3rem, 5.6vw, 4.8rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
  .cta-texto { margin: 1.5rem auto 0; max-width: 44ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; }
  .cta-botao {
    margin-top: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 1.05rem 1.9rem;
    border-radius: 999px;
    background: var(--cor-noite);
    color: var(--cor-fundo);
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform .2s ease-out, background-color .2s;
  }
  .cta-botao svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
  .cta-botao:hover { transform: scale(1.03); background: #5c0a0e; }
  .cta-botao:active { transform: scale(.97); }
  .cta-botao:focus-visible, .rod a:focus-visible { outline: 2px solid var(--cor-fundo); outline-offset: 4px; }
  .cta-micro { margin: 1.1rem 0 0; font-size: .9rem; }

  /* ---------- Rodapé (vinho escuro) ---------- */
  .rod { background: var(--cor-noite); color: var(--cor-fundo); padding: clamp(3.5rem, 7vw, 5rem) var(--borda) 2rem; }
  .rod-grade { display: grid; gap: 2.5rem; }
  @media (min-width: 820px) { .rod-grade { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
  .rod-logo { margin: 0; font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; }
  .rod-logo .estrela { color: var(--cor-destaque); width: .45em; height: .45em; margin-left: .15em; vertical-align: .35em; }
  .rod-sobre { margin: 1rem 0 0; max-width: 38ch; font-size: .95rem; line-height: 1.6; color: rgba(255, 249, 224, .75); }
  .rod-titulo { margin: 0 0 .9rem; font-size: .85rem; font-weight: 500; color: var(--cor-destaque); }
  .rod-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
  .rod-lista a { text-decoration: none; border-bottom: 1px solid rgba(255, 249, 224, .25); transition: border-color .2s; }
  .rod-lista a:hover { border-color: var(--cor-destaque); }
  .rod-lista span { color: rgba(255, 249, 224, .75); }
  .rod-base { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid rgba(255, 249, 224, .15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; font-size: .82rem; color: rgba(255, 249, 224, .6); }
  .rod-base p { margin: 0; }

  .coringa { opacity: .7; }

  /* entrada leve dos depoimentos */
  .js .dep-item { opacity: 0; transform: translateY(14px); transition: opacity .6s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * .12s); }
  .js .dep.visivel .dep-item { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .js .dep-item { opacity: 1; transform: none; transition: none; }
    .cta-botao, .cta-botao:hover, .cta-botao:active { transform: none; transition: none; }
  }