/*
 * RAM Talk · landing na estética do site do Grupo RAM (tema central): azul-noite,
 * Sora enorme e apertada, Inter no texto, botões em pílula. O verde é o do Talk no
 * apps.gruporam.com.br. Só transform e opacity animam.
 *
 * Tudo fica dentro de .rt, com classes rt-*: o bloco pode ser colado em outro site.
 * Especificidade, do menor para o maior: o reset .rt :where(...) (0,1,0) vence as
 * regras de elemento do site; .rt h2 (0,1,1) vence o reset; .rt .rt-x (0,2,0) vence tudo.
 */

@font-face{font-family:'RT Sora';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(fonts/sora-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'RT Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.rt{
  color-scheme:dark;
  --fundo:#0b1220;
  --cartao:#111c31;
  --cartao-2:#1b2a44;
  --cartao-3:#24365a;
  --texto:#e2e8f0;
  --texto-2:#a3b1c6;
  --primaria:#2563eb;
  --primaria-hover:#3b82f6;
  --talk:#22c55e;
  --talk-claro:#4ade80;
  --ambar:#f8aa14;
  --nota-fundo:#2d2a1c;
  --nota-texto:#f3e3a6;
  --logo-verde:#0f7433;
  --logo-marinho:#1e3a6e;
  --logo-ambar:#f8aa14;
  --titulo:'RT Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --corpo:'RT Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(2.6rem,6.2vw,5.6rem);
  --fs-h:clamp(2rem,3.8vw,3.5rem);
  --fs-destaque:1.25rem;
  --fs-texto:1.0625rem;
  --fs-nota:.875rem;
  --raio:10px;
  --largura:1240px;
  --topo:76px;
  --ease:cubic-bezier(.22,1,.36,1);

  background:var(--fundo);
  color:var(--texto);
  font:400 var(--fs-texto)/1.55 var(--corpo);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  text-align:left;
}
.rt,.rt *,.rt *::before,.rt *::after{box-sizing:border-box}
.rt :where(h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,q,details,summary,section,header,footer,nav,div,span,strong,b,i,em,small,a,button){margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;text-decoration:none;list-style:none;box-shadow:none;float:none;text-align:inherit}
.rt :where(strong,b){font-weight:600}
.rt :where([id]){scroll-margin-top:calc(var(--topo) + 16px)}
.rt ::selection{background:rgba(37,99,235,.4)}
.rt img,.rt svg,.rt canvas{display:block;max-width:100%}
.rt :focus-visible{outline:2px solid var(--primaria-hover);outline-offset:3px;border-radius:6px}

.rt h1,.rt h2,.rt h3{font-family:var(--titulo);color:#fff;text-wrap:balance}
.rt h1{font-size:var(--fs-display);font-weight:800;line-height:.98;letter-spacing:-.045em}
.rt h2{font-size:var(--fs-h);font-weight:800;line-height:1.02;letter-spacing:-.04em}
.rt h3{font-size:var(--fs-destaque);font-weight:700;line-height:1.25;letter-spacing:-.02em}

.rt .rt-wrap{max-width:var(--largura);margin:0 auto;padding-inline:32px}
@media (max-width:640px){.rt .rt-wrap{padding-inline:20px}}
.rt .rt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rt .rt-pular{position:absolute;left:12px;top:-60px;z-index:60;background:var(--primaria);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600}
.rt .rt-pular:focus{top:12px}

/* ---------- botões em pílula ---------- */
.rt .rt-botao{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font:600 1rem/1.2 var(--titulo);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:background-color .18s var(--ease),transform .18s var(--ease)}
.rt .rt-botao:active{transform:scale(.97)}
.rt .rt-botao svg{width:18px;height:18px;flex:none}
.rt .rt-primario{background:var(--primaria);color:#fff}
.rt .rt-primario:hover{background:var(--primaria-hover)}
.rt .rt-secundario{background:var(--cartao-2);color:#fff}
.rt .rt-secundario:hover{background:var(--cartao-3)}
.rt .rt-verde{background:var(--talk);color:#052e14}
.rt .rt-verde:hover{background:var(--talk-claro)}
.rt .rt-pequeno{min-height:42px;padding:10px 20px;font-size:.9375rem}
.rt .rt-redondo{width:52px;height:52px;padding:0;justify-content:center;border-radius:50%;background:var(--cartao-2);color:#fff}
.rt .rt-redondo:hover{background:var(--cartao-3)}
.rt .rt-botoes{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- topo ---------- */
.rt .rt-topo{position:sticky;top:0;z-index:40;background:rgba(11,18,32,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.rt .rt-topo .rt-wrap{display:flex;align-items:center;gap:28px;height:var(--topo)}
.rt .rt-logo{display:flex;align-items:center;gap:16px;white-space:nowrap}
.rt .rt-gr{display:flex;align-items:center;gap:8px;font:500 1.3rem/1 var(--titulo);letter-spacing:.02em;color:#fff}
.rt .rt-gr b{font-weight:800}
.rt .rt-barras{display:inline-grid;grid-template-rows:repeat(3,8px);gap:2px}
.rt .rt-barras i{display:block;width:7px}
.rt .rt-barras i:nth-child(1){background:var(--logo-verde)}
.rt .rt-barras i:nth-child(2){background:var(--logo-marinho)}
.rt .rt-barras i:nth-child(3){background:var(--logo-ambar)}
.rt .rt-logo-sep{width:1px;height:26px;background:var(--cartao-3)}
.rt .rt-produto{font:700 1.05rem/1 var(--titulo);letter-spacing:-.01em;color:#fff}
.rt .rt-produto b{color:var(--talk);font-weight:700}
.rt .rt-menu{display:flex;gap:28px;margin-left:auto;font:600 .9375rem/1 var(--titulo)}
.rt .rt-menu a{color:#fff;opacity:.92}
.rt .rt-menu a:hover{opacity:1;color:var(--talk-claro)}
@media (max-width:980px){.rt .rt-menu{display:none}.rt .rt-topo .rt-botao{margin-left:auto}}
@media (max-width:560px){.rt .rt-gr,.rt .rt-logo-sep{display:none}}

/* ---------- palco: texto à esquerda, cena parada à direita ---------- */
.rt .rt-palco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.rt .rt-palco-texto{min-width:0}
.rt .rt-palco-cena{position:relative;min-width:0}
.rt .rt-tela{position:sticky;top:0;height:100vh;height:100svh;margin-top:calc(var(--topo) * -1)}
.rt .rt-tela canvas,.rt .rt-janela canvas{width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease)}
.rt .rt-tela canvas.rt-pronta,.rt .rt-janela canvas.rt-pronta{opacity:1}
.rt .rt-janela{display:none}

.rt .rt-heroi{min-height:calc(100vh - var(--topo));min-height:calc(100svh - var(--topo));display:flex;flex-direction:column;justify-content:center;padding:48px 0 40px}
.rt .rt-heroi p.rt-lead{margin:26px 0 34px;max-width:33em;font-size:1.1875rem;color:var(--texto)}
.rt .rt-heroi .rt-lead b{color:var(--talk-claro);font-weight:600}
.rt .rt-descer{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:64px;font:600 .9375rem/1 var(--titulo);color:var(--texto-2)}
.rt .rt-descer svg{width:20px;height:20px}

.rt .rt-bloco{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:96px 0}
.rt .rt-sub{margin:18px 0 0;font:600 var(--fs-destaque)/1.35 var(--titulo);letter-spacing:-.015em;color:var(--talk)}
.rt .rt-bloco p.rt-texto{margin:20px 0 0;max-width:34em;color:var(--texto)}
.rt .rt-itens{margin:28px 0 0;display:grid;gap:14px}
.rt .rt-itens li{color:var(--texto-2);max-width:34em}
.rt .rt-itens b{display:block;color:#fff;font-family:var(--titulo);font-weight:600;letter-spacing:-.01em;margin-bottom:2px}
.rt .rt-bloco .rt-botoes{margin-top:34px}

@media (max-width:900px){
  .rt .rt-palco{grid-template-columns:1fr}
  .rt .rt-palco-cena{display:none}
  .rt .rt-janela{display:block;height:min(400px,56vh);margin:8px -20px 0}
  .rt .rt-heroi{min-height:0;padding:40px 0 24px}
  .rt .rt-bloco{min-height:0;padding:72px 0 8px}
  .rt .rt-descer{display:none}
}
/* Sem a cena (sem WebGL, celular deitado): a página volta a uma coluna e sem espera */
.rt.rt-sem-3d .rt-palco{grid-template-columns:1fr}
.rt.rt-sem-3d .rt-palco-cena,.rt.rt-sem-3d .rt-janela{display:none}
.rt.rt-sem-3d .rt-bloco{min-height:0;padding:88px 0 8px}

/* ---------- seções comuns ---------- */
.rt .rt-secao{padding:128px 0 0}
.rt .rt-cabeca{max-width:760px;margin-bottom:48px}
.rt .rt-cabeca p{margin-top:18px;color:var(--texto-2);font-size:1.125rem;max-width:36em}

.rt .rt-auto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rt .rt-cartao{background:var(--cartao);border-radius:var(--raio);padding:32px}
.rt .rt-cartao h3{display:flex;align-items:center;justify-content:space-between;gap:16px}
.rt .rt-cartao p{margin-top:10px;color:var(--texto-2)}
.rt .rt-chave{flex:none;width:40px;height:22px;border-radius:999px;background:var(--talk);position:relative}
.rt .rt-chave::after{content:"";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#052e14}
.rt .rt-msg{display:block;margin-top:20px;padding:12px 16px;border-radius:14px;border-top-left-radius:4px;background:var(--cartao-2);color:var(--texto);font-size:.96875rem;max-width:30em;quotes:none}
@media (max-width:760px){.rt .rt-auto{grid-template-columns:1fr}.rt .rt-cartao{padding:26px 22px}}

.rt .rt-passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:rtp}
.rt .rt-passos li{counter-increment:rtp;background:var(--cartao);border-radius:var(--raio);padding:32px}
.rt .rt-passos li::before{content:counter(rtp);display:grid;place-items:center;width:40px;height:40px;margin-bottom:22px;border-radius:50%;background:var(--cartao-2);color:var(--talk);font:700 1rem/1 var(--titulo)}
.rt .rt-passos p{margin-top:10px;color:var(--texto-2)}
.rt .rt-caminho{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;font-size:.875rem}
.rt .rt-caminho span{background:var(--cartao-2);border-radius:999px;padding:4px 12px;color:var(--texto)}
@media (max-width:900px){.rt .rt-passos{grid-template-columns:1fr}.rt .rt-passos li{padding:26px 22px}}

.rt .rt-duvidas{max-width:860px;display:grid;gap:10px}
.rt .rt-duvidas details{background:var(--cartao);border-radius:var(--raio)}
.rt .rt-duvidas summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;cursor:pointer;list-style:none;font:600 1.125rem/1.35 var(--titulo);letter-spacing:-.015em;color:#fff}
.rt .rt-duvidas summary::-webkit-details-marker{display:none}
.rt .rt-duvidas summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--talk);border-bottom:2px solid var(--talk);transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.rt .rt-duvidas details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.rt .rt-duvidas details p{padding:0 26px 24px;color:var(--texto-2);max-width:46em}

.rt .rt-chamada{margin-top:128px;background:var(--cartao);border-radius:var(--raio);padding:64px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.rt .rt-chamada p{margin-top:16px;color:var(--texto-2);font-size:1.125rem}
@media (max-width:900px){.rt .rt-chamada{grid-template-columns:1fr;padding:40px 24px}}

/* ---------- rodapé com o nome grande ---------- */
.rt .rt-rodape{padding:120px 0 40px;overflow:hidden}
.rt .rt-rodape-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.rt .rt-rodape-cols p{max-width:24em}
.rt .rt-rodape h4{font:600 1rem/1 var(--titulo);color:#fff;margin-bottom:18px}
.rt .rt-rodape ul{display:grid;gap:12px}
.rt .rt-rodape ul a{color:var(--texto-2)}
.rt .rt-rodape ul a:hover{color:#fff}
.rt .rt-nome-grande{display:block;margin:96px 0 28px;font:800 clamp(4rem,17.5vw,15rem)/.8 var(--titulo);letter-spacing:-.05em;color:#fff;white-space:nowrap}
.rt .rt-nome-grande span{font-weight:500;color:var(--texto)}
.rt .rt-nome-grande b{color:var(--talk);font-weight:800}
.rt .rt-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:var(--fs-nota);color:var(--texto-2)}
@media (max-width:760px){.rt .rt-rodape-cols{grid-template-columns:1fr}.rt .rt-rodape{padding-top:88px}}

/* ---------- revelação (só com o script e com movimento permitido) ---------- */
.rt.rt-anima .rt-mask{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.rt.rt-anima .rt-mask>span{display:block;transform:translateY(105%);transition:transform .8s var(--ease)}
.rt.rt-anima .rt-mask.rt-in>span{transform:none}
.rt.rt-anima .rt-sobe{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rt.rt-anima .rt-sobe.rt-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rt *,.rt *::before,.rt *::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}