:root {
  --escuro: #3E2A1E; --escuro-2: #5A3A22; --creme: #FFFAF8; --rose: #F7ECE7; --rose-2: #F3E4DD;
  --dourado: #C9A26B; --dourado-claro: #E6C98F; --cobre: #B87A4B; --cobre-claro: #D9A06E; --cobre-texto: #8B4A33; --dourado-texto: #7E5F2C; --whats: #25D366;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --largura: 1180px; --gutter: clamp(16px, 5vw, 48px);
  --t1: clamp(2.2rem, 6vw, 4.4rem); --t2: clamp(1.8rem, 4vw, 3rem); --t3: clamp(1.25rem, 2.2vw, 1.6rem);
  --dur: .7s; --ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
.sprite { position: absolute; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--rose); color: var(--escuro); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; position: relative; }
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: var(--t1); } h2 { font-size: var(--t2); } h3 { font-size: var(--t3); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--cobre); }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cobre); outline-offset: 3px; border-radius: 4px; }
section { position: relative; padding-block: clamp(72px, 12vw, 140px); padding-inline: var(--gutter); scroll-margin-top: 72px; overflow-x: clip; }
.miolo { width: min(100%, var(--largura)); margin-inline: auto; }
.rotulo { font: 600 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--cobre-texto); }
.filete { display: inline-block; width: 72px; height: 1px; background: var(--dourado); position: relative; margin-block: 18px 22px; }
.filete::before { content: ''; position: absolute; left: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--dourado); }
.assinatura { font: 500 .8rem var(--sans); letter-spacing: .04em; color: var(--dourado-texto); }
.assinatura b { color: var(--escuro-2); font-weight: 600; }

/* escuras: capítulos com fundo marrom invertem o texto para creme */
.escura { background: var(--escuro); color: var(--creme); }
.escura .rotulo { color: var(--cobre-claro); }
.escura h2 em, .escura h3 em { color: var(--cobre-claro); }
.escura .assinatura { color: var(--dourado-claro); } .escura .assinatura b { color: var(--creme); }
.escura .filete, .escura .filete::before { background: var(--dourado-claro); }

/* botões */
.botao { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font: 600 .9rem var(--sans); letter-spacing: .02em; text-decoration: none; transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; border: 1px solid transparent; }
.botao:hover { transform: translateY(-2px); }
.botao-cobre { background: var(--cobre); color: var(--creme); box-shadow: 0 10px 30px rgba(184,122,75,.3); }
.botao-cobre:hover { background: var(--cobre-claro); }
.botao-contorno { border-color: rgba(62,42,30,.35); color: var(--escuro); }
.botao-contorno:hover { border-color: var(--cobre); color: var(--cobre); }
.escura .botao-contorno { border-color: rgba(255,250,248,.4); color: var(--creme); }
.escura .botao-contorno:hover { border-color: var(--dourado-claro); color: var(--dourado-claro); }
.botao-whats { background: var(--whats); color: var(--escuro); box-shadow: 0 10px 30px rgba(37,211,102,.3); }
.botao-whats:hover { background: #2fe075; }
.botao-ouro { background: linear-gradient(135deg, var(--dourado), var(--dourado-claro)); color: var(--escuro); box-shadow: 0 10px 30px rgba(201,162,107,.35); }
.botao-ouro:hover { background: var(--dourado-claro); }
.botao svg { width: 18px; height: 18px; }

/* moldura fina com cantos arredondados */
.moldura { position: relative; border-radius: 22px; overflow: hidden; }
.moldura::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(184,122,75,.5); border-radius: 14px; pointer-events: none; }
.moldura img { width: 100%; height: 100%; object-fit: cover; }

/* ícone em círculo cobre */
.icone { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 1.5px solid var(--cobre); display: grid; place-items: center; color: var(--cobre); transition: box-shadow .5s var(--ease), border-color .5s var(--ease); }
.icone svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.escura .icone { border-color: var(--cobre-claro); color: var(--cobre-claro); }
.icone.aceso { box-shadow: 0 0 0 6px rgba(184,122,75,.18), 0 0 18px rgba(184,122,75,.4); border-color: var(--cobre); }
.escura .icone.aceso { box-shadow: 0 0 0 6px rgba(217,160,110,.22), 0 0 18px rgba(217,160,110,.45); border-color: var(--cobre-claro); }

/* vidro (mesma receita do Painel) */
.vidro { background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.5)); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(90,58,34,.06), 0 12px 32px rgba(90,58,34,.12); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border-radius: 22px; }
.escura .vidro { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 20px 50px rgba(0,0,0,.25); }
@supports not (backdrop-filter: blur(1px)) {
  .vidro { background: var(--creme); }
  .escura .vidro { background: var(--escuro-2); }
}

/* marca d'água: folha do logo */
.folha { position: absolute; width: clamp(180px, 28vw, 380px); aspect-ratio: 1; color: var(--cobre); opacity: .1; pointer-events: none; }
.folha.sd { right: -6%; top: -8%; transform: rotate(180deg); }
.escura .folha { color: var(--cobre-claro); opacity: .08; }

/* revelação ao rolar */
.rev { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.rev.esq { transform: translateX(-40px); } .rev.dir { transform: translateX(40px); }
.rev.visto { opacity: 1; transform: none; }
.rev[data-atraso="1"] { transition-delay: .12s; } .rev[data-atraso="2"] { transition-delay: .24s; } .rev[data-atraso="3"] { transition-delay: .36s; }
.rev[data-atraso="4"] { transition-delay: .48s; } .rev[data-atraso="5"] { transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* fundo vivo (receita do Painel): três manchas desfocadas atrás de tudo, fixas na tela */
.fundo-vivo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fundo-vivo span { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: multiply; will-change: transform; }
.fundo-vivo .m1 { width: 52vw; height: 52vw; left: 18vw; top: -28vw; background: #EEC3AA; animation: flutua 26s ease-in-out infinite alternate; }
.fundo-vivo .m2 { width: 42vw; height: 42vw; right: -12vw; top: 22vh; background: #E3AC80; animation: flutua 32s ease-in-out infinite alternate-reverse; }
.fundo-vivo .m3 { width: 40vw; height: 40vw; left: 30vw; bottom: -26vw; background: #F2D2C2; animation: flutua 38s ease-in-out infinite alternate; }
@keyframes flutua { from { transform: translate(var(--px, 0px), var(--py, 0px)) scale(1); } to { transform: translate(calc(var(--px, 0px) + 7vw), calc(var(--py, 0px) + 6vh)) scale(1.12); } }
@media (pointer: coarse) { .fundo-vivo span { animation: none; } }

/* halo do cursor (desktop, pointer fino) */
.halo { position: fixed; z-index: 60; width: 220px; height: 220px; border-radius: 50%; left: 0; top: 0; margin: -110px 0 0 -110px; background: radial-gradient(circle, rgba(184,122,75,.16), transparent 70%); pointer-events: none; opacity: 0; transition: opacity .4s; will-change: transform; }
.halo.ativo { opacity: 1; }

/* barra de leitura: progresso no topo + pontos dos capítulos */
.progresso { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--cobre), var(--dourado-claro)); z-index: 80; transition: width .1s linear; }
.capitulos { position: fixed; z-index: 70; display: flex; align-items: center; gap: 10px; }
.capitulos-pontos { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 861px) {
  .capitulos { right: 22px; top: 50%; transform: translateY(-50%); flex-direction: column; }
  .capitulos-num { display: none; }
}
.capitulos-pontos a { display: grid; place-items: center; width: 24px; height: 24px; position: relative; }
.capitulos-pontos a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(90,58,34,.25); border: 1px solid rgba(90,58,34,.6); transition: background .3s, transform .3s, border-color .3s; }
.capitulos-pontos a:hover::before, .capitulos-pontos a:focus-visible::before { transform: scale(1.3); }
.capitulos-pontos a.ativo::before { background: var(--cobre); border-color: var(--cobre); transform: scale(1.4); }
.capitulos-pontos a span { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--escuro); color: var(--creme); font: 500 .72rem var(--sans); padding: 5px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.capitulos-pontos a:hover span, .capitulos-pontos a:focus-visible span { opacity: 1; }
@media (max-width: 860px) {
  .capitulos { display: none; }
}

/* capítulo 1 — abertura */
.abertura { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; position: relative; overflow: hidden; }
.abertura-conteudo { position: relative; z-index: 1; max-width: 720px; }
/* logo do Instituto como plano de fundo; `scale` (propriedade própria) para não brigar com o transform do parallax */
.abertura-logo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(92vw, 560px); height: auto; opacity: 0; scale: .94; pointer-events: none; z-index: 0; filter: sepia(.2); transition: opacity 1.6s var(--ease) .2s, scale 1.6s var(--ease); }
.abertura.pronta .abertura-logo { opacity: .16; scale: 1; }
.linha-entra { clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease); }
.abertura.pronta .linha-entra { clip-path: inset(0 0 0 0); }
.linha-entra:nth-child(1) { transition-delay: 0s; }
.linha-entra:nth-child(2) { transition-delay: .35s; }
.linha-entra:nth-child(3) { transition-delay: .7s; }
.abertura h1 { margin-block: 20px 22px; }
.seta { position: absolute; left: 50%; bottom: 34px; width: 26px; height: 42px; border: 1.5px solid rgba(184,122,75,.55); border-radius: 13px; transform: translateX(-50%); }
.seta span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 2px; background: var(--cobre); transform: translateX(-50%); animation: rolar 1.8s ease-in-out infinite; }
@keyframes rolar { 0%, 100% { transform: translate(-50%, 0); opacity: 1; } 70% { transform: translate(-50%, 14px); opacity: 0; } }

/* capítulo 2 — 24 horas */
.horas-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.relogio .flip-frente, .relogio .flip-verso { align-items: center; text-align: center; }
.relogio .flip-frente { gap: 18px; }
.relogio-svg { width: 68px; height: 68px; color: var(--cobre-claro); }
.relogio-svg circle.mostrador { fill: none; stroke: currentColor; stroke-width: 3; opacity: .6; }
.relogio-svg .ponteiro { stroke: currentColor; stroke-width: 5; stroke-linecap: round; transform: rotate(0deg); transition: transform 1.4s var(--ease); }
.relogio.visto .ponteiro { transform: rotate(var(--deg)); }
.relogio-svg .centro { fill: currentColor; }
.relogio .flip-titulo { font-size: 1.2rem; }
@media (max-width: 860px) { .horas-grade { grid-template-columns: 1fr; } }
.frase { margin-top: 64px; font: italic 400 clamp(1.5rem, 3.4vw, 2.4rem)/1.4 var(--serif); text-align: center; }
.frase em { color: var(--cobre-claro); font-style: italic; }

/* capítulo 3 — conheça a Cris */
.cris-cap-grade { display: grid; grid-template-columns: 1fr 360px; gap: clamp(32px, 6vw, 72px); align-items: start; }
.cris-passos { padding-block: 8px; }
.passo { padding-block: 34px; border-top: 1px solid rgba(90,58,34,.12); }
.passo:first-of-type { border-top: 0; }
.passo h3 { font-size: 1.3rem; }
.passo p { margin-top: 10px; color: rgba(62,42,30,.85); max-width: 52ch; }
.fone-pin { position: sticky; top: 12vh; align-self: start; }
.fone { justify-self: center; width: 320px; border-radius: 36px; background: #0B141A; border: 6px solid #2a2a2a; box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
.fone-topo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #1f2c34; font-size: .8rem; }
.fone-topo img { border-radius: 50%; background: var(--creme); }
.fone-topo b { display: block; color: #e9edef; } .fone-topo span { color: #8696a0; font-size: .7rem; }
.fone-conversa { list-style: none; margin: 0; padding: 14px 12px; height: 420px; max-height: 420px; overflow-y: auto; scroll-behavior: smooth; display: flex; flex-direction: column; gap: 8px; background: #0B141A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='.04'/%3E%3C/svg%3E"); }
.fone-conversa li { max-width: 82%; padding: 8px 12px; border-radius: 12px; font: 400 .8rem/1.45 var(--sans); color: #e9edef; animation: balao .35s var(--ease); }
.fone-conversa .p { align-self: flex-end; background: #005c4b; border-bottom-right-radius: 3px; }
.fone-conversa .c { align-self: flex-start; background: #202c33; border-bottom-left-radius: 3px; }
@keyframes balao { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.fone-conversa .digitando { display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.fone-conversa .digitando span { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: pontinho 1s ease-in-out infinite; }
.fone-conversa .digitando span:nth-child(2) { animation-delay: .15s; }
.fone-conversa .digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes pontinho { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.fone-replay { display: block; margin: 8px auto; padding: 6px 14px; font: 600 .72rem var(--sans); color: #8696a0; background: transparent; border: 1px solid #2a3942; border-radius: 999px; cursor: pointer; }
.fone-replay[hidden] { display: none; }
/* Celular: o JS move o .fone-pin para logo depois do filete do título; o 1º passo deixa de ser o 1º div e perderia o "sem borda". */
@media (max-width: 860px) {
  .cris-cap-grade { grid-template-columns: 1fr; }
  .fone-pin { position: static; width: min(320px, 100%); margin: 8px auto 28px; }
  .fone-pin + .passo { border-top: 0; }
  .fone { width: min(320px, 100%); }
}

/* player "Ouça a Cris" */
.player { margin-top: 30px; display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px 12px 16px; border-radius: 999px; border: 1px solid rgba(184,122,75,.4); background: var(--creme); cursor: pointer; font: 600 .85rem var(--sans); color: var(--escuro); transition: border-color .25s, transform .25s var(--ease); }
.player:hover { transform: translateY(-2px); border-color: var(--cobre); }
.player[hidden] { display: none; }
.transcricao { margin-top: 10px; font: 400 .82rem/1.5 var(--sans); color: var(--escuro-2); max-width: 46ch; }
.transcricao[hidden] { display: none; }
.transcricao summary { cursor: pointer; color: var(--cobre-texto); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .6rem; }
.transcricao summary:hover { color: var(--cobre); }
.transcricao p { margin: 6px 0 0; font-style: italic; }
.player-icone { width: 34px; height: 34px; border-radius: 50%; background: var(--cobre); color: var(--creme); display: grid; place-items: center; flex: none; }
.player-icone svg { width: 16px; height: 16px; }
.player .ondas { width: 96px; height: 30px; }
.player .pausar { display: none; }
.player.tocando .tocar { display: none; } .player.tocando .pausar { display: block; }

/* lista final "o que a Cris faz" */
.cris-lista2 { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 16px; }
.cris-lista2 li { display: flex; gap: 16px; align-items: center; }
.cris-lista2 .icone-c3 { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--cobre); display: grid; place-items: center; color: var(--cobre); flex: none; transition: box-shadow .5s var(--ease), border-color .5s var(--ease); }
.cris-lista2 .icone-c3 svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cris-lista2 .icone-c3.aceso { box-shadow: 0 0 0 6px rgba(184,122,75,.18), 0 0 18px rgba(184,122,75,.4); border-color: var(--cobre); }

/* capítulo 4 — o Painel */
.painel-pilulas { display: none; }
.painel-grade { display: grid; grid-template-columns: 420px 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: 44px; }
.legendas { grid-column: 1; display: grid; gap: 26px; }
.legenda { display: flex; gap: 18px; align-items: flex-start; margin: 0; transition: opacity .3s var(--ease), transform var(--dur) var(--ease); }
.legenda .num { font: 600 2.4rem/1 var(--serif); color: var(--cobre); flex: none; min-width: 1.6ch; }
.legenda h3 { font-size: 1.15rem; }
.legenda p { margin-top: 6px; color: rgba(62,42,30,.8); max-width: 40ch; }
/* a tela de cada slide só existe no celular; escondida (sem caixa) a <img loading="lazy"> não é baixada no desktop */
.slide-tela { display: none; }
@media (min-width: 861px) {
  .legenda { min-height: 55vh; display: flex; flex-direction: column; justify-content: center; }
  .legenda.rev.visto { opacity: .45; }
  .legenda.rev.visto.ativa { opacity: 1; }
}

.notebook { grid-column: 2; position: sticky; top: 10vh; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.notebook-tela { background: linear-gradient(160deg, #2a1c12, #1c130c); border-radius: 18px; padding: 14px; box-shadow: 0 40px 90px rgba(62,42,30,.35); }
.notebook-viewport { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 1280 / 680; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.notebook-viewport img.tela { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.notebook-viewport img.tela.ativa { opacity: 1; }
.notebook-base { height: 18px; margin: 0 14px; background: linear-gradient(180deg, var(--cobre-claro), var(--cobre)); border-radius: 0 0 16px 16px; position: relative; box-shadow: 0 14px 30px rgba(62,42,30,.35); }
.notebook-base::after { content: ''; position: absolute; left: 50%; top: 0; width: 64px; height: 6px; background: rgba(0,0,0,.18); border-radius: 0 0 6px 6px; transform: translateX(-50%); }
@media (max-width: 860px) {
  /* celular: notebook pinado some (a <img loading="lazy"> escondida não baixa); entram pílulas + carrossel */
  .notebook { display: none; }
  .painel-pilulas { display: flex; gap: 8px; margin-top: 2px; padding: 2px 0 6px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .painel-pilulas::-webkit-scrollbar { display: none; }
  .painel-pilulas [role="tab"] { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(184,122,75,.35); background: var(--creme); color: var(--escuro); font: 600 .78rem var(--sans); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
  .painel-pilulas [role="tab"][aria-selected="true"] { background: var(--cobre); border-color: var(--cobre); color: var(--creme); }
  .painel-grade { display: block; margin-top: 20px; }
  /* o carrossel sangra até a borda da tela (sombras respiram); cada slide devolve o gutter por dentro */
  .legendas { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 12px 0 4px; }
  .legendas::-webkit-scrollbar { display: none; }
  .rev-celular { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .rev-celular.visto { opacity: 1; transform: none; }
  .legenda { flex: 0 0 100%; flex-wrap: wrap; gap: 16px 18px; padding-inline: var(--gutter); scroll-snap-align: center; }
  .legenda.rev { opacity: 1; transform: none; }
  .legenda > div { flex: 1; min-width: 0; }
  .legenda > .slide-tela { display: block; flex: 0 0 100%; cursor: zoom-in; }
  .slide-tela .notebook-tela { padding: 8px; border-radius: 12px; box-shadow: 0 18px 40px rgba(62,42,30,.28); }
  .slide-tela img { width: 100%; height: auto; aspect-ratio: 1280 / 680; object-fit: cover; }
  .slide-tela .notebook-base { height: 12px; margin: 0 10px; }
  .ampliar { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; background: rgba(62,42,30,.75); color: var(--creme); font: 600 .66rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .ampliar svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

/* lupa: a gravação em tela cheia; com o celular em pé, gira 90° para caber deitada (criada por JS ao ampliar) */
.lupa { position: fixed; inset: 0; z-index: 90; background: #1c130c; opacity: 0; transition: opacity .25s var(--ease); }
.lupa.aberta { opacity: 1; }
.lupa-giro { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(calc(100vw - 24px), calc((100vh - 72px) * 1280 / 680)); width: min(calc(100vw - 24px), calc((100svh - 72px) * 1280 / 680)); scale: .96; transition: scale .25s var(--ease); }
.lupa.aberta .lupa-giro { scale: 1; }
.lupa-giro img { width: 100%; height: auto; aspect-ratio: 1280 / 680; object-fit: cover; border-radius: 6px; background: #000; }
.lupa-nome { margin-top: 10px; text-align: center; font: 600 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dourado-claro); }
@media (orientation: portrait) {
  .lupa-giro { rotate: 90deg; width: min(calc(100vh - 32px), calc((100vw - 48px) * 1280 / 680)); width: min(calc(100svh - 32px), calc((100vw - 48px) * 1280 / 680)); }
}
.lupa-fechar { position: absolute; z-index: 1; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,250,248,.3); background: rgba(255,250,248,.12); color: var(--creme); display: grid; place-items: center; cursor: pointer; }
.lupa-fechar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lupa-fechar:focus-visible { outline-color: var(--dourado-claro); }

/* capítulo 5 — segurança (cartões flip) */
.flip-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
.flip { background: none; border: 0; margin: 0; padding: 0; cursor: pointer; display: block; width: 100%; height: 240px; border-radius: 22px; font: inherit; color: inherit; text-align: left; }
.flip-interno { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip-interno { transform: rotateY(180deg); }
}
.flip.virado .flip-interno { transform: rotateY(180deg); }
.flip-frente, .flip-verso { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.flip-frente { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.22); }
.flip-verso { background: var(--escuro-2); border: 1px solid rgba(217,160,110,.35); transform: rotateY(180deg); }
.flip-titulo { display: block; font: 400 1.15rem var(--serif); line-height: 1.15; }
.flip-texto { display: block; font-size: .92rem; line-height: 1.55; color: var(--creme); }
.flip:focus-visible { outline: 2px solid var(--cobre-claro); outline-offset: 4px; }
/* indício de que o cartão vira (capítulos 2 e 5) */
.flip-dica { position: absolute; right: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; font: 500 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cobre-claro); }
.flip-dica svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: gira 6s linear infinite; }
.flip-dica .dica-mouse { display: none; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .flip-dica .dica-toque { display: none; }
  .flip-dica .dica-mouse { display: inline; }
}
@media (max-width: 860px) { .flip-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .flip-grade { grid-template-columns: 1fr; } .flip { height: 220px; } }

/* capítulo 6 — site novo */
.navegador { margin-top: 40px; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(62,42,30,.25); background: var(--creme); border: 1px solid rgba(184,122,75,.25); opacity: 0; transform: scale(.92); transition: opacity var(--dur) var(--ease), transform .8s var(--ease); }
.navegador.visto { opacity: 1; transform: scale(1); }
.navegador-barra { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--rose-2); border-bottom: 1px solid rgba(184,122,75,.2); }
.navegador-bolinha { width: 10px; height: 10px; border-radius: 50%; background: rgba(90,58,34,.25); }
.navegador-bolinha.b1 { background: #E8998A; } .navegador-bolinha.b2 { background: #E9C46A; } .navegador-bolinha.b3 { background: #7FB88F; }
.navegador-url { margin-left: 10px; padding: 5px 14px; border-radius: 999px; background: var(--creme); font: 500 .72rem var(--sans); color: var(--escuro-2); letter-spacing: .01em; }
.navegador-tela { position: relative; overflow: hidden; aspect-ratio: 1280 / 680; }
.navegador-tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 20s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1.5%); } }
.site-texto { margin-top: 18px; max-width: 60ch; color: rgba(62,42,30,.85); font-size: 1.05rem; }
.site .botao { margin-top: 32px; }
/* celular: o site inteiro dentro de um celular, rolando sozinho; no desktop fica o .navegador (cada layout esconde a outra <img loading="lazy">, que então não baixa) */
.celular-site { display: none; }
@media (max-width: 860px) {
  .navegador { display: none; }
  .celular-site { display: block; width: min(100%, 320px); margin: 36px auto 0; border-radius: 36px; }
  .celular-site-tela { position: relative; overflow: hidden; aspect-ratio: 390 / 700; border-radius: 28px; background: #1a120c; border: 8px solid #2a1c12; box-shadow: 0 30px 70px rgba(62,42,30,.3); container-type: size; }
  .celular-site-tela::before { content: ''; position: absolute; z-index: 1; left: 50%; top: 8px; translate: -50% 0; width: 90px; height: 22px; border-radius: 999px; background: #1a120c; }
  /* 100cqh = altura da tela do celular; a imagem sobe até o rodapé e volta, pausada até o bloco ser revelado */
  .celular-site-tela img { width: 100%; height: auto; display: block; animation: rolar-site 38s ease-in-out infinite alternate; animation-play-state: paused; }
  .celular-site.visto .celular-site-tela img { animation-play-state: running; }
}
@keyframes rolar-site { 0%, 6% { translate: 0 0; } 94%, 100% { translate: 0 calc(-100% + 100cqh); } }

/* capítulo 7 — a visita */
.demo-grade { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; }
.demo-linha { position: absolute; z-index: 0; }
.demo-linha.h { top: 0; left: 12.5%; right: 12.5%; height: 44px; }
.demo-linha.v { top: 0; left: 50%; width: 44px; transform: translateX(-50%); display: none; }
.fio { width: 100%; height: 100%; overflow: visible; }
.fio path { fill: none; stroke: var(--cobre-claro); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); }
.demo-linha.v .fio path { transition: stroke-dashoffset .2s linear; }
.passo-demo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.passo-demo-num { width: 44px; height: 44px; border-radius: 50%; background: var(--escuro-2); border: 1.5px solid var(--cobre-claro); color: var(--creme); display: grid; place-items: center; font: 600 1.1rem var(--serif); transition: background .4s var(--ease), border-color .4s var(--ease); }
.passo-demo p { font-size: .92rem; color: rgba(255,250,248,.8); max-width: 22ch; margin: 0; }
@media (max-width: 860px) {
  /* linha do tempo à esquerda: números na coluna de 44px, texto ao lado; a linha se desenha com o scroll */
  .demo-grade { grid-template-columns: 1fr; gap: 40px; }
  .demo-linha.h { display: none; } .demo-linha.v { display: block; left: 22px; }
  .passo-demo { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; text-align: left; }
  .passo-demo p { max-width: none; opacity: .72; transition: opacity .4s var(--ease); }
  .passo-demo.aceso p { opacity: 1; }
  .passo-demo.aceso .passo-demo-num { background: var(--cobre); border-color: var(--cobre-claro); }
}
.demo-cta { margin-top: 64px; text-align: center; display: grid; gap: 16px; justify-items: center; }
.magnetico { position: relative; overflow: hidden; will-change: transform; }
.magnetico:not(.perto) { transition: transform .35s var(--ease); }
.magnetico-brilho { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.5), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.magnetico.perto .magnetico-brilho { opacity: 1; }
.magnetico-texto { position: relative; z-index: 1; }

/* rodapé mínimo */
.rodape { padding: 40px var(--gutter); text-align: center; }
.rodape p { font-size: .78rem; color: rgba(62,42,30,.75); }