/* Portal RevSol — revsol.com.br. Tudo servido daqui: fontes, script e 3D (nenhum terceiro). */
@font-face { font-family: 'Bricolage'; src: url('/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --fundo: #f3f6fb;          /* espuma fria */
  --fundo-alto: #ffffff;
  --tinta: #0e1d44;          /* marinho da Revenda, escurecido */
  --tinta-suave: #4b5a7c;
  --linha: #d7deeb;
  --marinho: #1b3270;
  --ambar: #f7941d;          /* laranja do logo — âmbar da cerveja */
  --ouro: #ffc24a;           /* o sol RevSol */
  --correnteza: #1f8fc0;
  --sombra: 0 30px 60px -30px rgb(14 29 68 / 0.35);
  --brilho-sol: rgb(255 194 74 / 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    color-scheme: dark;
    --fundo: #07122b; --fundo-alto: #0d1c3f; --tinta: #eef3fb; --tinta-suave: #a5b3cf; --linha: #1d2f5c;
    --marinho: #8fb0ff; --correnteza: #53c7f0; --sombra: 0 30px 60px -30px rgb(0 0 0 / 0.7); --brilho-sol: rgb(255 194 74 / 0.35);
  }
}
:root[data-tema='escuro'] {
  color-scheme: dark;
  --fundo: #07122b; --fundo-alto: #0d1c3f; --tinta: #eef3fb; --tinta-suave: #a5b3cf; --linha: #1d2f5c;
  --marinho: #8fb0ff; --correnteza: #53c7f0; --sombra: 0 30px 60px -30px rgb(0 0 0 / 0.7); --brilho-sol: rgb(255 194 74 / 0.35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: 'Inter', system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.6;
  overflow-x: clip; transition: background-color .4s ease, color .4s ease;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
.embrulho { max-width: 76rem; margin-inline: auto; padding-inline: 20px; }
h1, h2, h3 { font-family: 'Bricolage', 'Inter', sans-serif; line-height: 1.02; letter-spacing: -0.03em; margin: 0; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--fundo) 72%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--linha) 60%, transparent); }
.topo .embrulho { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'Bricolage', sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; }
.marca svg { width: 26px; height: 26px; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.marca:hover svg { transform: rotate(90deg); }
.topo nav { display: flex; align-items: center; gap: 10px; }
.botao { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 11px 20px; font-weight: 650; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.botao-primario { background: var(--ambar); color: #1a1204; box-shadow: 0 10px 30px -12px rgb(247 148 29 / 0.8); transition: transform .2s ease, box-shadow .2s ease; }
.botao-primario:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px rgb(247 148 29 / 0.9); }
.botao-secundario { color: var(--tinta); background: transparent; box-shadow: inset 0 0 0 1.5px var(--linha); }
.botao-secundario:hover { box-shadow: inset 0 0 0 1.5px var(--tinta-suave); }
.alternar-tema { width: 42px; height: 42px; border-radius: 999px; border: 0; background: transparent; color: var(--tinta); cursor: pointer; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--linha); }
.alternar-tema svg { width: 20px; height: 20px; }
.alternar-tema .lua { display: none; }
@media (max-width: 640px) {
  .topo .so-largo { display: none; }
  .topo .botao-primario { padding: 9px 14px; font-size: .92rem; }
}
@media (max-width: 380px) { .topo .botao-primario { display: none; } }

/* Abertura com a cena 3D */
.abertura { position: relative; min-height: min(92vh, 860px); display: grid; align-items: center; isolation: isolate; }
.abertura::before { /* o sol nascendo atrás da cena */
  content: ''; position: absolute; z-index: -2; width: min(70vw, 780px); aspect-ratio: 1; right: -8vw; top: 50%;
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle, var(--brilho-sol), transparent 62%); filter: blur(6px);
  animation: nascer 2.4s cubic-bezier(.2,.8,.2,1) both;
}
.abertura .embrulho { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: center; width: 100%; }
.abertura h1 { font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4.7rem); font-weight: 800; }
.abertura h1 .linha { display: block; }
.abertura p.lede { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--tinta-suave); max-width: 34ch; margin: 22px 0 30px; }
.abertura .acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.palco { position: relative; aspect-ratio: 1; width: 100%; max-width: 620px; justify-self: end; }
.palco canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; touch-action: pan-y; }
.palco canvas:active { cursor: grabbing; }
.palco .reserva { position: absolute; inset: 0; display: grid; place-items: center; }
.palco.com-3d .reserva { display: none; }
.reserva svg { width: 62%; height: auto; filter: drop-shadow(var(--sombra)); }
.dica-3d { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); font-size: .8rem; color: var(--tinta-suave); opacity: .8; white-space: nowrap; }
@media (max-width: 860px) {
  .abertura::before { display: none; }
  .abertura { min-height: auto; padding-block: 36px 24px; }
  .abertura .embrulho { grid-template-columns: 1fr; }
  .palco { justify-self: center; max-width: 440px; margin-top: 8px; }
}
@keyframes nascer { from { opacity: 0; transform: translateY(-20%) scale(.7); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
.entra { animation: entra .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
@keyframes entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Seções */
.secao { padding-block: clamp(64px, 9vw, 120px); }
.secao h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); font-weight: 750; max-width: 18ch; }
.secao p.apoio { color: var(--tinta-suave); max-width: 52ch; margin: 16px 0 0; font-size: 1.125rem; }

/* O engradado: os módulos como garrafas num engradado */
.engradado { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; perspective: 1200px; }
.modulo { position: relative; padding: 24px 22px 26px; border-radius: 22px; background: var(--fundo-alto); box-shadow: inset 0 0 0 1px var(--linha), var(--sombra); transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.modulo:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ambar) 55%, var(--linha)), var(--sombra); }
.modulo .icone { width: 56px; height: 56px; transform: translateZ(40px); }
.modulo h3 { font-size: 1.4rem; margin-top: 18px; transform: translateZ(28px); }
.modulo p { color: var(--tinta-suave); margin: 8px 0 0; font-size: .98rem; transform: translateZ(18px); }

/* Conversa de exemplo */
.conversa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .conversa { grid-template-columns: 1fr; } }
.telefone { justify-self: center; width: min(360px, 100%); border-radius: 40px; padding: 14px; background: linear-gradient(160deg, #1b3270, #07122b); box-shadow: 0 50px 90px -40px rgb(7 18 43 / .8), inset 0 0 0 2px rgb(255 255 255 / .08); transform: rotateY(-14deg) rotateX(6deg); transition: transform .6s ease; }
.telefone:hover { transform: rotateY(-4deg) rotateX(2deg); }
.tela { border-radius: 28px; background: #0b1530; padding: 18px 14px 22px; min-height: 420px; display: flex; flex-direction: column; gap: 10px; font-size: .92rem; }
.tela .quem { display: flex; align-items: center; gap: 10px; color: #eef3fb; padding-bottom: 10px; border-bottom: 1px solid rgb(255 255 255 / .08); margin-bottom: 4px; }
.tela .quem svg { width: 34px; height: 34px; }
.tela .quem small { display: block; color: #8ea0c4; font-size: .75rem; }
.balao { max-width: 84%; padding: 9px 12px; border-radius: 16px; line-height: 1.4; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .45s ease, transform .45s ease; }
.balao.visivel { opacity: 1; transform: none; }
.balao.pessoa { align-self: flex-end; background: #f7941d; color: #1a1204; border-bottom-right-radius: 4px; }
.balao.revsol { align-self: flex-start; background: #16254d; color: #eef3fb; border-bottom-left-radius: 4px; }
.digitando { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px; border-radius: 16px; background: #16254d; opacity: 0; transition: opacity .3s; }
.digitando.visivel { opacity: 1; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: #8ea0c4; animation: pulo 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; } .digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 0%, 60%, 100% { transform: none; opacity: .5 } 30% { transform: translateY(-4px); opacity: 1 } }
.exemplo { font-size: .8rem; color: var(--tinta-suave); margin-top: 12px; text-align: center; }
.pontos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.pontos li { display: flex; gap: 12px; align-items: flex-start; }
.pontos li svg { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--ambar); }

/* O rio Solimões com as oito bases */
.rio { margin-top: 44px; perspective: 1100px; }
.mapa { position: relative; border-radius: 28px; padding: 6% 4%; background: var(--fundo-alto); box-shadow: inset 0 0 0 1px var(--linha), var(--sombra); transform: rotateX(28deg); transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.rio.visivel .mapa { transform: rotateX(14deg); }
.mapa svg { width: 100%; height: auto; display: block; overflow: visible; }
.mapa .agua { fill: none; stroke: var(--correnteza); stroke-width: 10; stroke-linecap: round; opacity: .28; }
.mapa .correnteza { fill: none; stroke: var(--correnteza); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 18; animation: correr 3.5s linear infinite; }
@keyframes correr { to { stroke-dashoffset: -280; } }
.mapa .base circle.ponto { fill: var(--fundo-alto); stroke: var(--ambar); stroke-width: 3; }
.mapa .base circle.halo { fill: var(--ouro); opacity: 0; transform-box: fill-box; transform-origin: center; }
.rio.visivel .mapa .base circle.halo { animation: acender 2.8s ease-out both; animation-delay: calc(var(--i) * 180ms + 400ms); }
@keyframes acender { 0% { opacity: .0; transform: scale(.4) } 30% { opacity: .55; transform: scale(1.6) } 100% { opacity: .18; transform: scale(1) } }
.mapa .base text { font: 600 17px 'Inter', sans-serif; fill: var(--tinta); }
.mapa .base text.sub { font-weight: 400; font-size: 13px; fill: var(--tinta-suave); }

/* Confiança */
.confianca { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 40px; }
.confianca div { border-top: 2px solid var(--ambar); padding-top: 14px; }
.confianca h3 { font-size: 1.3rem; }
.confianca p { color: var(--tinta-suave); margin: 6px 0 0; }

/* Chamada final */
.final { text-align: center; }
.final .embrulho { display: grid; justify-items: center; gap: 22px; }
.final h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); max-width: 16ch; }
.logo-revenda { width: min(300px, 70vw); height: auto; }
.logo-revenda.escuro { display: none; }

.rodape { border-top: 1px solid var(--linha); padding-block: 28px 36px; font-size: .92rem; color: var(--tinta-suave); }
.rodape .embrulho { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Aparecer ao rolar (uma vez) */
.revela { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
.revela.visivel { opacity: 1; transform: none; }

/* Tema escuro: logo branca e ícone de lua */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) .logo-revenda.claro { display: none; }
  :root:not([data-tema='claro']) .logo-revenda.escuro { display: block; }
  :root:not([data-tema='claro']) .alternar-tema .sol { display: none; }
  :root:not([data-tema='claro']) .alternar-tema .lua { display: block; }
}
:root[data-tema='escuro'] .logo-revenda.claro { display: none; }
:root[data-tema='escuro'] .logo-revenda.escuro { display: block; }
:root[data-tema='escuro'] .alternar-tema .sol { display: none; }
:root[data-tema='escuro'] .alternar-tema .lua { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .revela, .balao, .digitando { opacity: 1; transform: none; }
  .mapa { transform: rotateX(14deg); }
}