/* ============================================================
   MANDA IA — a armação do site: "SALA DE CONTROLE"
   Armação: painel de viewport inteira, mosaico bento assimétrico
   em camadas 3D reais + salto de profundidade no scroll.
   Densidade: a frase da marca, o nosso jeito, celular com a conversa,
   gráfico, anel 24h, missão, visão, os canais (só o símbolo) e as
   FUNÇÕES dos dois produtos.
   Paleta: somente a oficial do BRIEFING. Preço: não existe no site.
   ============================================================ */

/* cor e letra vêm do marca.css (fonte única dos tokens); aqui ficam só as medidas da armação */
@import url("/estilo/marca.css");

:root{
  --raio: 18px;
  --guia-h: 52px;   /* altura da barra de cima (guia.html) */
  --guia-alt: calc(52px + env(safe-area-inset-top, 0px));  /* o que ela tira da 1ª tela */
  --gap: 33px;      /* folga de verdade entre as peças — 33 no celular para caber o inclinar FORTE (sala.js) */
  --rx: 0deg;   /* inclinação do painel — escritas pelo JS */
  --ry: 0deg;
  --tx: 0px;    /* deslocamento base do paralaxe (cada peça multiplica pelo seu --prof) */
  --ty: 0px;

  --sombra-perto: 0 26px 60px -22px color-mix(in srgb, var(--petroleo-escuro) 62%, transparent), 0 2px 0 color-mix(in srgb, var(--carta) 6%, transparent) inset;
  --sombra-longe: 0 12px 34px -18px color-mix(in srgb, var(--petroleo-escuro) 55%, transparent), 0 1px 0 color-mix(in srgb, var(--carta) 5%, transparent) inset;
}

*,*::before,*::after{ box-sizing:border-box; }

/* A entrada NÃO manda no translate/scale da peça: ela anima estas duas variáveis.
   Assim o aperto do toque (`scale`) continua vivo o tempo todo — nem uma animação
   pausada (aba em segundo plano) apaga o :active. */
@property --entrada  { syntax:"<length>"; inherits:false; initial-value:0px; }
@property --entrada-y{ syntax:"<length>"; inherits:false; initial-value:0px; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  overflow-x:clip;
  font-family:var(--corpo);
  font-size:clamp(1.0625rem, .98rem + .42vw, 1.1875rem); /* mín. 17px */
  line-height:1.55;
  color:var(--texto);
  background:var(--fundo);
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
picture{ display:contents; }
a{ color:inherit; }
p,ul,ol,li,h1,h2,h3{ margin:0; }
ul,ol{ padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:6px; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ÍCONE DE LINHA — todos com a mesma espessura, coral, sem preenchimento.
   Nenhum emoji colorido em lugar nenhum. */
/* O raio mora no sprite externo (midia/icones.svg) e lá a folha da página não entra — nem
   variável de cor (medido no Chrome, 18/09). O que atravessa o <use> é o `color`: o traço do
   raio é `currentColor`, e quem dá o coral é o <svg> que o hospeda. */
.raio, .ico{ color:var(--coral); }
/* marca de rede social: símbolo oficial, sólido, sem deformar nem girar.
   Os ícones de FUNÇÃO seguem sendo linha coral — a diferença é proposital. */
.marca-rede, .ico.marca-rede{ color:inherit; fill:currentColor; stroke:none; }
/* símbolo de rede NUNCA é enfeite: é sempre um link, com alvo de 44px */
.selo-rede{
  display:inline-grid; place-items:center;
  min-width:44px; min-height:44px;
  border-radius:50%; color:inherit;
  scale:var(--aperto,1); transition:scale .12s ease, background .2s ease;
}
.selo-rede:hover{ background:color-mix(in srgb, var(--fundo) 10%, transparent); }
.selo-rede:active{ --aperto:.94; }
.canal .marca-rede{ width:28px; height:28px; }
.canal-verde{ color:var(--rede-1); }
.canal-rosa { color:var(--rede-2); }
.canal-azul { color:var(--rede-3); }
.ico{
  width:22px; height:22px; flex:none;
  fill:none; stroke:var(--coral); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* =========================================================
   0. GUIA — a barra de cima, igual em TODA página (parcial `guia.html`).
      É a porta para as páginas de venda: "Soluções" abre a Recepção e a Princesa.
      Gruda no topo ao rolar (sticky) — por isso mora FORA da `.sala`, que tem
      `overflow:clip` e prenderia o sticky dentro dela.
      A altura dela SAI da primeira tela (`--guia-alt` no calc da `.sala`): o painel
      continua cabendo inteiro, sem sobra de rolagem.
   ========================================================= */
html{ scroll-behavior:smooth; }

.guia{
  position:sticky; top:0; z-index:40;
  height:var(--guia-alt);
  padding-top:env(safe-area-inset-top, 0px);
  background:color-mix(in srgb, var(--petroleo-escuro) 88%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--fundo) 10%, transparent);
  animation:sobe .6s cubic-bezier(.2,.8,.25,1) backwards;
}
.guia-in{
  height:var(--guia-h);
  display:flex; align-items:center; justify-content:center; gap:4px;
  padding-left:calc(10px + env(safe-area-inset-left, 0px));
  padding-right:calc(10px + env(safe-area-inset-right, 0px));
}
.guia-link{
  display:inline-flex; align-items:center; gap:.32rem;
  min-height:44px; padding:.5rem .7rem;
  font:600 .92rem/1 var(--display);
  color:color-mix(in srgb, var(--fundo) 86%, transparent);
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border-radius:999px;
  scale:var(--aperto, 1);
  transition:color .18s ease, background .18s ease, scale .12s ease;
}
.guia-link:hover{ color:var(--carta); background:color-mix(in srgb, var(--fundo) 8%, transparent); }
.guia-link:active{ --aperto:.95; }

/* SOLUÇÕES — abre a lista dos produtos. `<details>` nativo: funciona sem JS e no teclado;
   o `guia.js` só fecha ao clicar fora, no Esc e depois de escolher. */
.guia-solucoes{ position:relative; }
.guia-solucoes > summary{ list-style:none; }
.guia-solucoes > summary::-webkit-details-marker{ display:none; }
.guia-seta{ width:14px; height:14px; transition:transform .2s ease; }
.guia-solucoes[open] > summary{
  color:var(--carta);
  background:color-mix(in srgb, var(--coral) 18%, transparent);
}
.guia-solucoes[open] .guia-seta{ transform:rotate(180deg); }

.guia-menu{
  position:absolute; top:calc(100% + 8px); left:50%;
  width:min(86vw, 330px);
  display:flex; flex-direction:column; gap:2px;
  padding:6px;
  background:var(--petroleo);
  border:1px solid color-mix(in srgb, var(--fundo) 14%, transparent);
  border-radius:var(--raio);
  box-shadow:var(--sombra-perto);
  transform:translateX(-50%);
  animation:guia-menu-abre .18s cubic-bezier(.2,.8,.25,1) backwards;
}
@keyframes guia-menu-abre{
  from{ opacity:0; transform:translateX(-50%) translateY(-6px); }
  to  { opacity:1; transform:translateX(-50%) translateY(0); }
}
.guia-menu a{
  display:flex; align-items:center; gap:.6rem;
  min-height:56px; padding:.55rem .7rem;
  text-decoration:none; border-radius:12px;
  color:var(--fundo);
  scale:var(--aperto, 1);
  transition:background .18s ease, scale .12s ease;
}
.guia-menu a:hover{ background:var(--petroleo-hover); }
.guia-menu a:active{ --aperto:.97; }
.guia-menu .ico{ width:22px; height:22px; flex:none; }
.guia-menu b{ font:700 1rem/1.2 var(--display); color:var(--carta); }
.guia-menu i{
  display:block; font-style:normal; font-size:.82rem; line-height:1.35;
  color:color-mix(in srgb, var(--fundo) 66%, transparent);
}

/* a guia cobre o topo: âncora não pode parar embaixo dela */
#quem-somos, #produtos, #contato{ scroll-margin-top:calc(var(--guia-alt) + 10px); }

@media (min-width:680px){
  .guia-in{ gap:10px; }
  .guia-link{ font-size:.97rem; padding:.55rem .95rem; }
}

/* =========================================================
   1. SALA — o painel de viewport inteira
   ========================================================= */

.sala{
  position:relative;
  min-height:calc(100vh - var(--guia-alt));
  min-height:calc(100svh - var(--guia-alt));   /* tela baixa demais: o painel cresce em vez de cortar */
  display:flex; flex-direction:column; gap:12px;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(12px + env(safe-area-inset-right))
    14px
    calc(12px + env(safe-area-inset-left));
  overflow:clip;
  isolation:isolate;
  color:var(--fundo);
  background:
    radial-gradient(120% 90% at 82% 6%,  color-mix(in srgb, var(--coral) 24%, transparent) 0%, color-mix(in srgb, var(--coral) 0%, transparent) 58%),
    radial-gradient(110% 80% at 8% 96%,  color-mix(in srgb, var(--petroleo-hover) 85%, transparent)  0%, color-mix(in srgb, var(--petroleo-hover) 0%, transparent)  62%),
    linear-gradient(168deg, var(--petroleo) 0%, var(--petroleo-escuro) 68%, var(--petroleo-escuro) 100%);
}
.sala::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--fundo) 5.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fundo) 5.5%, transparent) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 90% at 50% 34%, var(--texto) 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 34%, var(--texto) 0%, transparent 78%);
  pointer-events:none; z-index:0;
}
/* LUZ QUE VARRE — movimento contínuo, nunca para (a sala) */
.sala::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:46%;
  pointer-events:none; z-index:3;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--coral-claro) 0%, transparent) 0%, color-mix(in srgb, var(--coral-claro) 10%, transparent) 42%,
    color-mix(in srgb, var(--coral) 16%, transparent) 52%, color-mix(in srgb, var(--coral-claro) 9%, transparent) 60%, color-mix(in srgb, var(--coral-claro) 0%, transparent) 100%);
  filter:blur(6px);
  animation:varre 9s linear infinite;
}
@keyframes varre{
  0%   { transform:translateX(-120%); }
  100% { transform:translateX(330%); }
}
@media (min-height:640px){ .sala{ height:calc(100svh - var(--guia-alt)); } }

/* --- topo --- */
.topo{
  position:relative; z-index:4;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:2px 4px;
  animation:sobe .6s cubic-bezier(.2,.8,.25,1) backwards;
}
.marca{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.05rem, .95rem + .5vw, 1.35rem);
  letter-spacing:-.02em;
}
.marca svg{ width:24px; height:24px; flex:none; }
.marca b{ font-weight:800; color:var(--carta); }
.marca i{ font-style:normal; color:var(--coral); }
.marca span{
  font-size:.62em; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:color-mix(in srgb, var(--fundo) 66%, transparent);
}
.topo-dir{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.ao-vivo{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:color-mix(in srgb, var(--fundo) 78%, transparent);
  padding:.34rem .7rem;
  border:1px solid color-mix(in srgb, var(--fundo) 16%, transparent);
  border-radius:999px; background:color-mix(in srgb, var(--petroleo-escuro) 40%, transparent);
}
.ao-vivo::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--coral);
  animation:pulso 1.9s ease-out infinite;
}
@keyframes pulso{
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 60%, transparent);   transform:scale(1); }
  70%  { box-shadow:0 0 0 12px color-mix(in srgb, var(--coral) 0%, transparent); transform:scale(1.18); }
  100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 0%, transparent);    transform:scale(1); }
}

/* botão do giroscópio — só aparece onde o aparelho tem sensor */
.btn-giro{
  display:none; align-items:center; gap:.4rem;
  min-height:44px; padding:.5rem .9rem;
  font:700 .84rem/1 var(--display); color:var(--carta);
  background:color-mix(in srgb, var(--coral) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--coral) 50%, transparent);
  border-radius:999px; cursor:pointer;
  scale:var(--aperto,1);
  transition:scale .12s ease, background .2s ease;
}
.btn-giro[data-mostrar]{ display:inline-flex; }
.btn-giro:active{ --aperto:.94; }
.btn-giro .ico{ width:17px; height:17px; }

/* CONVITE — enquanto a inclinação não está ligada, é este botão que a liga.
   Se ele passar despercebido, a pessoa nunca vê o efeito: então ele se impõe. */
.btn-giro[data-mostrar="convite"]{
  color:var(--texto);
  background:linear-gradient(180deg, var(--coral) 0%, var(--coral-escuro) 260%);
  border-color:color-mix(in srgb, var(--carta) 30%, transparent);
  animation:chama 2.4s ease-in-out infinite;
}
.btn-giro[data-mostrar="convite"] .ico{ stroke:var(--texto); }
@keyframes chama{
  0%,100%{ box-shadow:0 10px 22px -10px color-mix(in srgb, var(--coral-escuro) 90%, transparent), 0 0 0 0  color-mix(in srgb, var(--coral) 55%, transparent); }
  55%    { box-shadow:0 10px 22px -10px color-mix(in srgb, var(--coral-escuro) 90%, transparent), 0 0 0 13px color-mix(in srgb, var(--coral) 0%, transparent); }
}
/* LIGADO — confirma e sossega */
.btn-giro[data-mostrar="ligado"]{
  background:color-mix(in srgb, var(--coral) 28%, transparent);
  animation:respira 2.2s ease-in-out infinite;
}
@keyframes respira{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 50%, transparent); }
  55%    { box-shadow:0 0 0 10px color-mix(in srgb, var(--coral) 0%, transparent); }
}

/* =========================================================
   2. MOSAICO — bento assimétrico com profundidade real
   ========================================================= */

.palco{
  position:relative; z-index:2;
  flex:1 1 auto; min-height:0;
  perspective:2600px; perspective-origin:50% 44%;
}
.mosaico{
  height:100%;
  display:grid; gap:var(--gap);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  will-change:transform;

  /* CELULAR PRIMEIRO — 2 colunas, peças de alturas diferentes.
     Linhas POUCAS e grandes: cada linha a mais é mais uma calha, e era
     isso que espremia as peças umas contra as outras. */
  grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(0,3.1fr) minmax(0,2.5fr) minmax(0,1.7fr) minmax(0,1.95fr);
  grid-template-areas:
    "h h"
    "c g"
    "c r"
    "n n";
}

.peca{
  position:relative; overflow:clip;
  border-radius:var(--raio);
  padding:14px;
  background:linear-gradient(158deg,
    color-mix(in srgb, var(--carta) 11.5%, transparent) 0%, color-mix(in srgb, var(--carta) 3.5%, transparent) 46%, color-mix(in srgb, var(--petroleo-escuro) 30%, transparent) 100%);
  border:1px solid color-mix(in srgb, var(--fundo) 15%, transparent);
  box-shadow:var(--sombra-longe);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  transform-style:preserve-3d;

  /* PROFUNDIDADE: cada peça mora num Z próprio E anda uma quantidade própria
     (--prof) quando o painel inclina. É a diferença entre elas que o olho lê.
     `translate` não tem transição: a resposta ao gesto é imediata.
     `scale` tem: é só o aperto do toque. */
  translate:
    calc(var(--tx) * var(--prof, .3))
    calc(var(--ty) * var(--prof, .3) + var(--entrada-y))
    calc(var(--z, 0px) + var(--entrada));
  scale:var(--aperto, 1);
  transition:scale .12s ease, border-color .25s ease, box-shadow .25s ease;
  animation:entra .7s cubic-bezier(.2,.85,.25,1) backwards; /* backwards, NUNCA both */
}
.peca::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--carta) 40%, transparent), transparent);
}
@keyframes entra{ from{ opacity:0; --entrada:-560px; } }
@keyframes sobe { from{ opacity:0; transform:translateY(-14px); } }

.rotulo{
  display:flex; align-items:center; gap:.4rem;
  margin:0 0 .5rem;
  font-size:.72rem; font-weight:700; line-height:1.3;
  letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--fundo) 60%, transparent);
}
.rotulo svg{ width:11px; height:11px; flex:none; }

/* ---- posições e camadas no CELULAR ---- */
/* As peças ficam no MESMO plano (--z: 0). Z diferente + rotação encavala:
   a placa gira e as peças de Z diferente se aproximam até comer a calha.
   A profundidade vem do --prof (o quanto cada uma anda) em degraus PEQUENOS
   entre vizinhas, e da rotação da placa — essa nunca fecha calha nenhuma. */
.p-hero     { grid-area:h; --z:0px; --prof: .30; box-shadow:var(--sombra-perto); }
/* "A IA faz sozinha" (rótulo aprovado em 18/09) ocupa no painel a área que era do
   "O nosso jeito" — a grade não muda em largura nenhuma. O jeito continua inteiro na
   seção "O que é a Manda IA", logo abaixo, que é onde ele já morava no celular.
   Para desfazer: devolver `grid-area:a` ao .p-acoes e tirar o .p-saltos daqui. */
.p-acoes    { display:none; --z:0px; --prof: .22; }
.p-saltos   { grid-area:a; --z:0px; --prof: .22; }
.p-conversa { grid-area:c; --z:0px; --prof: .16; box-shadow:var(--sombra-perto); }
.p-grafico  { grid-area:g; --z:0px; --prof: .16; }
.p-relogio  { grid-area:r; --z:0px; --prof: .10; }
.p-canais   { grid-area:n; --z:0px; --prof: .02; }
.p-marca    { display:none; --z:0px; --prof: .06; }
.p-destaques{ display:none; --z:0px; --prof: .12; }

.p-hero{ animation-delay:.05s; } .p-saltos{ animation-delay:.12s; }
.p-conversa{ animation-delay:.18s; } .p-grafico{ animation-delay:.26s; }
.p-relogio{ animation-delay:.32s; } .p-destaques{ animation-delay:.36s; }
.p-marca{ animation-delay:.40s; } .p-canais{ animation-delay:.46s; }

/* =========================================================
   3. PEÇA GRANDE — a frase + a secretária
   ========================================================= */

.p-hero{
  container-type:size;           /* a tipografia passa a medir a PEÇA, não a janela */
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:clamp(16px, 3vw, 32px);
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--coral) 22%, transparent) 0%, color-mix(in srgb, var(--coral) 0%, transparent) 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--carta) 14%, transparent) 0%, color-mix(in srgb, var(--carta) 4%, transparent) 44%, color-mix(in srgb, var(--petroleo-escuro) 36%, transparent) 100%);
}
.hero-texto{ position:relative; z-index:2; width:100%; }
.p-hero h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.3rem, min(11.5cqh, 6.6cqw), 3.4rem);
  line-height:1.02; letter-spacing:-.035em;
  color:var(--carta); text-wrap:balance;
}
.p-hero h1 em{ font-style:normal; color:var(--coral); }
.hero-sub{
  margin:.45rem 0 0; max-width:40ch;
  font-size:clamp(.82rem, min(4.4cqh, 2.2cqw), 1.12rem);
  color:color-mix(in srgb, var(--fundo) 86%, transparent);
  text-wrap:pretty;
}
.hero-assina{
  display:none; margin:.6rem 0 0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1rem,.9rem + .45vw,1.35rem);
  letter-spacing:-.025em; line-height:1.15; color:var(--carta);
}
.hero-assina em{ font-style:normal; color:var(--coral); }
.hero-botoes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:.8rem; }

/* botões */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:52px; padding:.85rem 1.3rem;
  font:700 clamp(.98rem,.94rem + .2vw,1.06rem)/1 var(--display);
  letter-spacing:-.01em; color:var(--texto); text-decoration:none;
  background:linear-gradient(180deg, var(--coral) 0%, var(--coral-escuro) 260%);
  border:1px solid color-mix(in srgb, var(--carta) 28%, transparent);
  border-radius:999px;
  box-shadow:0 14px 28px -12px color-mix(in srgb, var(--coral-escuro) 85%, transparent);
  scale:var(--aperto,1);
  transition:scale .12s ease, box-shadow .25s ease, filter .25s ease;
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ --aperto:.955; }
.btn .ico{ stroke:var(--texto); width:19px; height:19px; }
.btn .ico.marca-rede{ stroke:none; }
.btn-linha{
  color:var(--carta); background:none; border:1px solid color-mix(in srgb, var(--fundo) 34%, transparent); box-shadow:none;
}
.btn-linha:hover{ background:color-mix(in srgb, var(--fundo) 10%, transparent); filter:none; }
.btn-linha .ico{ stroke:var(--coral); }

/* =========================================================
   4. PÍLULAS DE AÇÃO
   ========================================================= */

.p-saltos{ display:none; flex-direction:column; }
/* O QUE A IA FAZ — quatro pílulas em 2x2, no molde das outras listas do painel */
.saltos{
  flex:1; display:grid; gap:8px;
  /* 2 em 2 onde cabe; na coluna estreita do computador vira 1 por linha, sem cortar */
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  align-content:stretch; grid-auto-rows:minmax(max-content,1fr);
}
.saltos li{
  display:flex; align-items:center; gap:.45rem;
  padding:8px 10px; border-radius:12px;
  font-size:.86rem; font-weight:600; line-height:1.25;
  color:color-mix(in srgb, var(--fundo) 88%, transparent);
  background:color-mix(in srgb, var(--carta) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--fundo) 12%, transparent);
}
.saltos .ico{ width:17px; height:17px; flex:none; }
.pilulas{
  display:flex; flex-wrap:wrap; align-content:center; gap:8px;
  flex:1 1 auto; min-height:0;
}
.pilula{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:.45rem;
  min-height:36px; padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--coral) 34%, transparent);
  background:color-mix(in srgb, var(--petroleo-escuro) 38%, transparent);
  font-family:var(--display); font-weight:600;
  font-size:.84rem; letter-spacing:-.01em; color:var(--carta);
  /* a luz caminha de pílula em pílula, sem parar */
  animation:acende 9s ease-in-out infinite;
  animation-delay:calc(var(--i) * 1.8s);
}
.pilula .ico{ width:17px; height:17px; }
@keyframes acende{
  0%, 82%, 100%{ border-color:color-mix(in srgb, var(--coral) 34%, transparent); background:color-mix(in srgb, var(--petroleo-escuro) 38%, transparent); }
  6%, 14%      { border-color:color-mix(in srgb, var(--coral) 95%, transparent); background:color-mix(in srgb, var(--coral) 16%, transparent); }
}
.pilula::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--coral-claro) 22%, transparent) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:brilha 9s ease-in-out infinite;
  animation-delay:calc(var(--i) * 1.8s);
}
@keyframes brilha{
  0%, 4%  { transform:translateX(-120%); }
  16%,100%{ transform:translateX(120%); }
}

/* O NOSSO JEITO — três linhas curtas, o que a marca É */
.jeito{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:space-evenly; gap:6px;
}
.jeito li{ display:flex; align-items:flex-start; gap:.55rem; }
.jeito .ico{ width:19px; height:19px; margin-top:2px; }
.jeito b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(.88rem,.82rem + .3vw,1.05rem); line-height:1.2;
  letter-spacing:-.02em; color:var(--carta);
}
.jeito i{
  display:block; font-style:normal; line-height:1.3;
  font-size:clamp(.76rem,.73rem + .18vw,.9rem);
  color:color-mix(in srgb, var(--fundo) 70%, transparent);
}

/* MISSÃO e VISÃO — frase grande, sem enfeite */
.frase-grande{
  font-family:var(--display); font-weight:600;
  font-size:clamp(.82rem, min(1.35vw, 1.9vh), 1.08rem);
  line-height:1.32; letter-spacing:-.015em;
  color:color-mix(in srgb, var(--fundo) 88%, transparent);
  text-wrap:pretty;
}
.frase-grande em{ font-style:normal; color:var(--coral); }

/* =========================================================
   5. O CELULAR — a Recepção se mostrando
   ========================================================= */

.p-conversa{ display:flex; flex-direction:column; padding:12px; }
.aparelho{
  position:relative;
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; width:100%;
  border-radius:16px; overflow:clip;
  background:linear-gradient(180deg, color-mix(in srgb, var(--petroleo-escuro) 86%, transparent), color-mix(in srgb, var(--petroleo-escuro) 62%, transparent));
  border:1px solid color-mix(in srgb, var(--fundo) 12%, transparent);
}
.tela{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.notch, .status{ display:none; }

.fala-topo{
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .55rem;
  background:color-mix(in srgb, var(--petroleo-escuro) 90%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--fundo) 10%, transparent);
}
.fala-av{
  width:29px; height:29px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:color-mix(in srgb, var(--coral) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--coral) 45%, transparent);
}
.fala-av .ico{ width:18px; height:18px; }
.fala-nome{
  display:block; font-family:var(--display); font-weight:700;
  font-size:.86rem; line-height:1.2; color:var(--carta);
}
.fala-online{
  display:flex; align-items:center; gap:.3rem;
  font-size:.7rem; color:color-mix(in srgb, var(--coral-claro) 74%, transparent);
}
.fala-online::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--coral);
  animation:pulso 1.9s ease-out infinite;
}
.fala{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  overflow:hidden; padding:8px;
  background:
    radial-gradient(color-mix(in srgb, var(--fundo) 6%, transparent) 1px, transparent 1px) 0 0/16px 16px,
    linear-gradient(180deg, color-mix(in srgb, var(--petroleo-escuro) 55%, transparent), color-mix(in srgb, var(--petroleo-escuro) 25%, transparent));
  /* a mensagem que sai por cima some suave, em vez de ser fatiada */
  mask-image:linear-gradient(180deg, transparent 0, var(--texto) 26px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, var(--texto) 26px);
}
.balao{
  max-width:92%; padding:.45rem .65rem; border-radius:13px;
  font-size:clamp(.8rem,.76rem + .2vw,.93rem);
  line-height:1.34; word-break:break-word;
  animation:balao-entra .3s ease backwards;
}
@keyframes balao-entra{ from{ opacity:0; transform:translateY(8px) scale(.97); } }
.balao.cliente{
  align-self:flex-start; background:color-mix(in srgb, var(--fundo) 93%, transparent); color:var(--texto);
  border-bottom-left-radius:4px;
}
.balao.ia{
  align-self:flex-end; background:var(--coral); color:var(--texto);
  font-weight:600; border-bottom-right-radius:4px;
}
.cursor{
  display:inline-block; width:2px; height:1em;
  vertical-align:-.15em; margin-left:1px; background:currentColor;
  animation:pisca .85s steps(1) infinite;
}
@keyframes pisca{ 50%{ opacity:0; } }
.digitando{
  align-self:flex-end;
  display:flex; gap:4px; align-items:center;
  padding:.5rem .65rem; border-radius:13px; border-bottom-right-radius:4px;
  background:color-mix(in srgb, var(--coral-claro) 20%, transparent);
}
.digitando i{
  width:6px; height:6px; border-radius:50%; background:var(--coral-claro);
  animation:bolinha 1.1s ease-in-out infinite;
}
.digitando i:nth-child(2){ animation-delay:.16s; }
.digitando i:nth-child(3){ animation-delay:.32s; }
@keyframes bolinha{
  0%,100%{ transform:translateY(0);    opacity:.45; }
  40%    { transform:translateY(-5px); opacity:1; }
}
.fala-barra{
  display:flex; align-items:center; gap:.45rem;
  padding:.35rem .45rem;
  background:color-mix(in srgb, var(--petroleo-escuro) 90%, transparent);
  border-top:1px solid color-mix(in srgb, var(--fundo) 10%, transparent);
}
.fala-campo{
  flex:1 1 auto; min-width:0; overflow:clip;
  padding:.3rem .65rem; border-radius:999px;
  background:color-mix(in srgb, var(--fundo) 8%, transparent);
  font-size:.74rem; color:color-mix(in srgb, var(--fundo) 50%, transparent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fala-mic{
  width:27px; height:27px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--coral);
}
.fala-mic .ico{ width:14px; height:14px; stroke:var(--texto); }

/* =========================================================
   6. GRÁFICO + número que conta
   ========================================================= */

.p-grafico{ display:flex; flex-direction:column; padding:12px; }
.numerao{
  display:flex; align-items:baseline; gap:.2rem;
  font-family:var(--display); font-weight:800;
  letter-spacing:-.045em; color:var(--carta); line-height:.92;
  font-size:clamp(1.75rem, 1.1rem + 3vw, 3rem);
}
.numerao u{ text-decoration:none; font-size:.42em; color:var(--coral); font-weight:700; }
.p-grafico small{
  display:block; margin:.15rem 0 .4rem;
  font-size:clamp(.74rem,.72rem + .18vw,.86rem);
  color:color-mix(in srgb, var(--fundo) 72%, transparent); line-height:1.3;
}
.grafico{ flex:1 1 0; min-height:42px; width:100%; overflow:visible; }
.barra{
  fill:color-mix(in srgb, var(--fundo) 26%, transparent);
  transform-box:fill-box; transform-origin:center bottom;
  transform:scaleY(var(--v,.3));
  transition:transform .95s cubic-bezier(.24,.9,.3,1), fill .95s ease;
}
.barra.alta{ fill:color-mix(in srgb, var(--coral) 85%, transparent); }
.linha{
  fill:none; stroke:var(--coral); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:var(--traco,0);
  filter:drop-shadow(0 3px 7px color-mix(in srgb, var(--coral) 50%, transparent));
}
.ponta{
  fill:var(--carta); stroke:var(--coral); stroke-width:3;
  transition:cx .95s cubic-bezier(.24,.9,.3,1), cy .95s cubic-bezier(.24,.9,.3,1);
}
.ponta-halo{
  fill:color-mix(in srgb, var(--coral) 40%, transparent);
  transition:cx .95s cubic-bezier(.24,.9,.3,1), cy .95s cubic-bezier(.24,.9,.3,1);
  animation:halo 1.8s ease-out infinite;
  transform-box:fill-box; transform-origin:center;
}
@keyframes halo{
  0%  { transform:scale(.7);  opacity:.85; }
  75% { transform:scale(2.2); opacity:0; }
  100%{ transform:scale(2.2); opacity:0; }
}

/* =========================================================
   7. ANEL 24h
   ========================================================= */

.p-relogio{ display:flex; align-items:center; gap:10px; padding:12px; }
.anel{ width:clamp(44px, min(8.6vw, 11vh), 76px); height:clamp(44px, min(8.6vw, 11vh), 76px); flex:none; }
.anel-trilho{ fill:none; stroke:color-mix(in srgb, var(--fundo) 16%, transparent); stroke-width:6; }
.anel-arco{
  fill:none; stroke:var(--coral); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:70 190; transform-origin:50% 50%;
  animation:gira 5.5s linear infinite;
}
.anel-arco2{
  fill:none; stroke:color-mix(in srgb, var(--coral-claro) 55%, transparent); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:22 150; transform-origin:50% 50%;
  animation:gira-tras 8.5s linear infinite;
}
@keyframes gira{      to{ transform:rotate(360deg); } }
@keyframes gira-tras{ to{ transform:rotate(-360deg); } }
.anel-texto{
  font-family:var(--display); font-weight:800; font-size:26px;
  fill:var(--carta); letter-spacing:-.04em;
}
.p-relogio p{
  font-size:clamp(.76rem,.73rem + .2vw,.9rem); line-height:1.3;
  color:color-mix(in srgb, var(--fundo) 82%, transparent);
}
.p-relogio strong{ display:block; color:var(--carta); font-family:var(--display); font-weight:700; }

/* =========================================================
   8. DESTAQUES QUE GIRAM (só onde há espaço)
   ========================================================= */

.p-destaques{ flex-direction:column; justify-content:center; gap:.3rem; }
.giro{ position:relative; flex:1 1 auto; min-height:0; }
.giro li{
  position:absolute; inset:0;
  display:flex; align-items:center; gap:.7rem;
  opacity:0;
  animation:passa 20s ease-in-out infinite;
  animation-delay:calc(var(--i) * 4s);
}
.giro .bolha{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--coral) 42%, transparent);
  background:color-mix(in srgb, var(--coral) 12%, transparent);
}
.giro .ico{ width:24px; height:24px; }
.giro b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(1rem,.9rem + .4vw,1.2rem); letter-spacing:-.02em; color:var(--carta);
}
.giro span{ display:block; font-size:.92rem; color:color-mix(in srgb, var(--fundo) 76%, transparent); line-height:1.3; }
.passos{
  display:flex; gap:6px; margin-top:.5rem; flex-wrap:wrap;
}
.passos li{
  flex:1 1 0; min-width:0;
  padding:.28rem .4rem; border-radius:999px; text-align:center;
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  color:color-mix(in srgb, var(--fundo) 55%, transparent);
  border:1px solid color-mix(in srgb, var(--fundo) 12%, transparent);
  background:color-mix(in srgb, var(--petroleo-escuro) 35%, transparent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  animation:passo-aceso 20s ease-in-out infinite;
  animation-delay:calc(var(--i) * 4s);
}
@keyframes passo-aceso{
  0%, 21%, 100%{ color:color-mix(in srgb, var(--fundo) 55%, transparent); border-color:color-mix(in srgb, var(--fundo) 12%, transparent); background:color-mix(in srgb, var(--petroleo-escuro) 35%, transparent); }
  3%, 18%      { color:var(--carta); border-color:color-mix(in srgb, var(--coral) 75%, transparent); background:color-mix(in srgb, var(--coral) 16%, transparent); }
}
@keyframes passa{
  0%  { opacity:0; transform:translateY(14px); }
  3%  { opacity:1; transform:translateY(0); }
  18% { opacity:1; transform:translateY(0); }
  21% { opacity:0; transform:translateY(-14px); }
  100%{ opacity:0; transform:translateY(-14px); }
}

/* =========================================================
   9. MARCA DA RECEPÇÃO
   ========================================================= */

.p-marca{
  flex-direction:column; justify-content:center; gap:.3rem;
  padding:clamp(16px,2vw,26px);
  background:
    radial-gradient(80% 120% at 8% 100%, color-mix(in srgb, var(--coral) 20%, transparent) 0%, color-mix(in srgb, var(--coral) 0%, transparent) 62%),
    linear-gradient(150deg, color-mix(in srgb, var(--carta) 12%, transparent) 0%, color-mix(in srgb, var(--petroleo-escuro) 40%, transparent) 100%);
}
.marca-recepcao{ width:min(100%, 330px); height:auto; }
.p-marca .assina{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.05rem,.9rem + .55vw,1.45rem);
  letter-spacing:-.025em; line-height:1.14; color:var(--carta);
}
.p-marca .assina em{ font-style:normal; color:var(--coral); display:block; }
.selo-24h{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.38rem .75rem; border-radius:999px;
  background:color-mix(in srgb, var(--coral) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--coral) 40%, transparent);
  font-size:.84rem; font-weight:600; color:var(--carta);
}

/* =========================================================
   10. CANAIS
   ========================================================= */

/* O canal é SÓ o símbolo oficial, clicável: nem número, nem arroba, nem nome de rede. */
.p-canais{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:10px; }
.canais-titulo{
  font-family:var(--display); font-weight:700; text-align:center;
  font-size:clamp(.95rem,.9rem + .3vw,1.15rem); line-height:1.2;
  letter-spacing:-.02em; color:var(--carta);
}
.canais-fila{ display:flex; align-items:center; justify-content:center; gap:clamp(14px, 4vw, 26px); }
.canal{
  display:grid; place-items:center; flex:none;
  width:56px; height:56px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--fundo) 18%, transparent);
  background:color-mix(in srgb, var(--petroleo-escuro) 42%, transparent);
  text-decoration:none;
  scale:var(--aperto,1);
  transition:scale .12s ease, background .2s ease, border-color .2s ease;
}
.canal:hover{ background:color-mix(in srgb, var(--fundo) 10%, transparent); border-color:color-mix(in srgb, var(--fundo) 34%, transparent); }
.canal:active{ --aperto:.93; }

/* =========================================================
   11. O SALTO — os dois produtos e as suas funções
   ========================================================= */

.produtos{
  position:relative;
  padding:clamp(52px, 8vw, 100px) clamp(14px, 4vw, 40px) clamp(40px, 7vw, 80px);
  /* a perspectiva do salto mora em CADA cartão (no JS), não na seção: com o ponto
     de fuga da seção inteira, no celular o cartão de baixo era puxado para cima
     do de cima enquanto vinha do fundo */
}
.produtos::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:120px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--petroleo-escuro) 14%, transparent), color-mix(in srgb, var(--petroleo-escuro) 0%, transparent));
  pointer-events:none;
}
.faixa{ max-width:1180px; margin:0 auto clamp(24px, 3.4vw, 40px); }
.faixa h2{
  margin:0 0 .5rem;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.65rem, 1.1rem + 2.4vw, 2.9rem);
  letter-spacing:-.035em; line-height:1.04;
  color:var(--petroleo); text-wrap:balance;
}
.faixa .risca{
  display:block; width:64px; height:5px; margin-bottom:1rem;
  border-radius:999px;
  background:linear-gradient(90deg, var(--coral), var(--coral-escuro));
}
/* a frase que separa os dois — o cliente não pode confundir */
.separa{
  display:grid; gap:10px; max-width:1180px; margin:0 auto clamp(24px,3vw,40px);
}
@media (min-width:760px){ .separa{ grid-template-columns:1fr 1fr; } }
.separa div, .separa a{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:1rem 1.1rem; border-radius:16px;
  background:var(--carta);
  border:1px solid color-mix(in srgb, var(--petroleo) 10%, transparent);
  font-size:1.0625rem; color:color-mix(in srgb, var(--texto) 85%, transparent);
}
.separa b{ color:var(--petroleo); }
.separa .ico{ margin-top:2px; }
.separa a{ text-decoration:none; scale:var(--aperto,1); transition:scale .12s ease, border-color .2s ease; }
.separa a:hover{ border-color:color-mix(in srgb, var(--coral) 60%, transparent); }
.separa a:active, .produto-mais:active{ --aperto:.97; }

.pilha{
  max-width:1180px; margin:0 auto;
  display:grid; gap:clamp(18px, 2.6vw, 28px);
  grid-template-columns:1fr;          /* celular: uma coluna */
  align-items:start;
  transform-style:preserve-3d;
}
/* --colunas vem do JS pela QUANTIDADE de produtos: nunca sobra peça
   sozinha numa linha, com 2 ou com 6 */
@media (min-width:760px){
  .pilha{ grid-template-columns:repeat(min(var(--colunas,2), 2), 1fr); }
}
@media (min-width:1180px){
  .pilha{ grid-template-columns:repeat(var(--colunas,2), 1fr); max-width:1400px; }
}
.salto{ transform-style:preserve-3d; }
.produto{
  position:relative; overflow:clip; height:auto;
  display:flex; flex-direction:column; gap:.75rem;
  padding:clamp(20px, 2.8vw, 32px);
  border-radius:24px;
  background:var(--carta);
  border:1px solid color-mix(in srgb, var(--petroleo) 10%, transparent);
  box-shadow:0 30px 60px -34px color-mix(in srgb, var(--petroleo-escuro) 50%, transparent);
  transform-style:preserve-3d;
  background-image:radial-gradient(120% 80% at 110% 115%,
    color-mix(in srgb, var(--coral) 15%, transparent) 0%,
    color-mix(in srgb, var(--coral) 0%, transparent) 62%);
}

.produto--destaque{
  background:linear-gradient(162deg, var(--petroleo) 0%, var(--petroleo-escuro) 100%);
  color:var(--fundo); border-color:color-mix(in srgb, var(--fundo) 14%, transparent);
}
/* O LUGAR DO QUE AINDA VEM — o cartão do "em breve" (COPY.md, regra 4 do catálogo).
   Ocupa a linha inteira: com 2 ou com 6 produtos ele nunca sobra órfão numa coluna.
   Traço picotado = lugar reservado, sem inventar nome de produto que não existe. */
.salto--breve{ grid-column:1 / -1; }
.produto--breve{
  gap:.55rem;
  border-style:dashed;
  border-color:color-mix(in srgb, var(--coral) 45%, transparent);
  background-image:radial-gradient(110% 90% at 0% 0%,
    color-mix(in srgb, var(--coral) 13%, transparent) 0%,
    color-mix(in srgb, var(--coral) 0%, transparent) 62%);
}
.produto--breve h3{ font-size:clamp(1.3rem, 1rem + 1.2vw, 1.85rem); }
.produto--breve .oque{ max-width:62ch; }

.produto-logo{ width:min(100%, 250px); height:auto; }
.selo{
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  padding:.36rem .8rem .36rem .55rem; border-radius:999px;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--coral-claro); color:var(--coral-escuro);
}
.selo .ico{ width:18px; height:18px; stroke:var(--coral-escuro); }
.produto h3{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.45rem, 1.05rem + 1.6vw, 2.15rem);
  letter-spacing:-.035em; line-height:1.05;
}
.produto .oque{
  font-size:clamp(1.0625rem,1rem + .3vw,1.18rem);
  color:color-mix(in srgb, var(--texto) 82%, transparent); text-wrap:pretty;
}
.produto--destaque .oque{ color:color-mix(in srgb, var(--fundo) 88%, transparent); }
.quem{
  padding:.75rem .95rem;
  border-left:4px solid var(--coral); border-radius:0 12px 12px 0;
  background:color-mix(in srgb, var(--coral) 9%, transparent);
  font-size:1.0625rem; color:color-mix(in srgb, var(--texto) 85%, transparent);
}
.produto--destaque .quem{ background:color-mix(in srgb, var(--coral) 12%, transparent); color:color-mix(in srgb, var(--fundo) 90%, transparent); }
.quem b{
  display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral-escuro); margin-bottom:.15rem;
}
.produto--destaque .quem b{ color:var(--coral-claro); }

/* AS FUNÇÕES, em pílula — mesmo molde para todo produto */
.rotulo-funcoes{
  margin-top:.2rem;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--texto) 55%, transparent);
}
.produto--destaque .rotulo-funcoes{ color:color-mix(in srgb, var(--fundo) 55%, transparent); }
/* a função vem inteira (promessa + explicação, do COPY): a pílula passa a ter duas
   linhas, então o canto deixa de ser redondo total e a letra é de corpo (17px) */
.funcoes{ display:grid; gap:7px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.funcoes li{
  padding:.5rem .8rem; border-radius:14px;
  font-size:1.0625rem; line-height:1.35;
  color:color-mix(in srgb, var(--texto) 82%, transparent);
  background:color-mix(in srgb, var(--coral) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--coral) 28%, transparent);
}
.produto--destaque .funcoes li{
  color:var(--fundo);
  background:color-mix(in srgb, var(--coral) 14%, transparent);
  border-color:color-mix(in srgb, var(--coral) 40%, transparent);
}
.funcoes b{ color:var(--petroleo); }
.produto--destaque .funcoes b{ color:var(--carta); }
.escopo{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:1.0625rem; line-height:1.35;
  color:color-mix(in srgb, var(--texto) 62%, transparent);
}
.produto--destaque .escopo{ color:color-mix(in srgb, var(--fundo) 66%, transparent); }
.escopo .ico{ margin-top:2px; }

.valor{
  margin-top:auto;
  display:flex; align-items:flex-start; gap:.6rem;
  padding-top:.4rem;
  font-size:1.0625rem; color:color-mix(in srgb, var(--texto) 70%, transparent);
}
.produto--destaque .valor{ color:color-mix(in srgb, var(--fundo) 72%, transparent); }
.btn-fantasma{
  color:var(--petroleo); background:var(--coral-claro);
  border-color:color-mix(in srgb, var(--coral-escuro) 25%, transparent); box-shadow:none;
}
.btn-fantasma .ico{ stroke:var(--petroleo); }
.no-ar{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8rem; font-weight:600; color:color-mix(in srgb, var(--fundo) 75%, transparent);
}
.no-ar::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--coral);
  animation:pulso 1.9s ease-out infinite;
}
.produto .btn{ align-self:flex-start; }
/* do cartão para a página do produto */
.produto-mais{
  display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start;
  min-height:44px; font-weight:700; color:var(--coral-escuro); text-underline-offset:.22em;
  scale:var(--aperto,1); transition:scale .12s ease;
}
.produto--destaque .produto-mais{ color:var(--coral-claro); }
.produto-mais .ico{ width:18px; height:18px; stroke:currentColor; }

/* QUEM SOMOS */
.quem-somos{ padding:clamp(48px,7vw,90px) clamp(14px,4vw,40px) clamp(20px,3vw,34px); }
.dupla{
  max-width:1180px; margin:0 auto;
  display:grid; gap:clamp(14px,2vw,22px);
}
@media (min-width:860px){ .dupla{ grid-template-columns:1fr 1fr; } }
.dupla article{
  padding:clamp(18px,2.4vw,28px); border-radius:20px;
  background:var(--carta);
  border:1px solid color-mix(in srgb, var(--petroleo) 12%, transparent);
}
.dupla p:last-child{ color:color-mix(in srgb, var(--texto) 80%, transparent); text-wrap:pretty; }
.rotulo-escuro{
  margin-bottom:.35rem;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral-escuro);
}

/* as três linhas do jeito, na abertura */
.rotulo-lista{ max-width:1180px; margin:0 auto .6rem; }
.jeito-aberto--curto{ margin-bottom:clamp(20px,3vw,30px); }
.jeito-aberto--curto li{ align-items:center; }
.jeito-aberto{
  max-width:1180px; margin:0 auto clamp(16px,2.4vw,26px);
  display:grid; gap:10px;
}
@media (min-width:860px){ .jeito-aberto{ grid-template-columns:repeat(3,1fr); } }
.jeito-aberto li{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.85rem 1rem; border-radius:16px;
  background:var(--carta);
  border:1px solid color-mix(in srgb, var(--petroleo) 12%, transparent);
  font-size:1.0625rem; line-height:1.4;
  color:color-mix(in srgb, var(--texto) 78%, transparent);
}
.jeito-aberto b{ color:var(--petroleo); }
.jeito-aberto .ico{ margin-top:2px; }

/* COMO COMEÇA */
.passo-a-passo{
  padding:0 clamp(14px,4vw,40px) clamp(40px,6vw,70px);
  background:var(--fundo);
}
.degraus{
  max-width:1180px; margin:0 auto;
  display:grid; gap:clamp(14px,2vw,22px);
}
@media (min-width:860px){ .degraus{ grid-template-columns:repeat(3,1fr); } }
.degraus li{
  display:flex; flex-direction:column; gap:.3rem;
  padding:clamp(18px,2.4vw,26px);
  border-radius:20px; background:var(--carta);
  border:1px solid color-mix(in srgb, var(--petroleo) 12%, transparent);
}
.degrau-n{
  width:38px; height:38px; margin-bottom:.3rem;
  display:grid; place-items:center; border-radius:50%;
  font-family:var(--display); font-weight:800;
  background:color-mix(in srgb, var(--coral) 16%, transparent);
  color:var(--coral-escuro);
}
.degraus b{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.05rem,1rem + .4vw,1.25rem); color:var(--petroleo);
}
.degraus i{ font-style:normal; color:color-mix(in srgb, var(--texto) 76%, transparent); }

/* FECHAMENTO */
.fecho{
  padding:clamp(44px,6vw,80px) clamp(14px,4vw,40px);
  background:var(--petroleo-escuro); color:var(--fundo);
  text-align:center;
}
.fecho h1, .fecho h2{
  max-width:20ch; margin:0 auto clamp(20px,3vw,30px);
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.6rem,1.1rem + 2.4vw,2.9rem);
  letter-spacing:-.035em; line-height:1.06; text-wrap:balance;
}
.fecho em{ font-style:normal; color:var(--coral); }
.fecho .btn{ margin:0 auto; }
/* página curta (404, leitura): o miolo estica e o rodapé encosta no fim da tela */
.pagina-cheia{ min-height:100svh; display:flex; flex-direction:column; }
.pagina-cheia > main{ flex:1 0 auto; width:100%; }
.fecho-tela{ display:flex; flex-direction:column; justify-content:center; }
.faixa-sub{ max-width:56ch; color:color-mix(in srgb, var(--texto) 72%, transparent); }
.faixa-sub + .faixa-sub{ margin-top:.7rem; }
.faixa-sub b{ color:var(--petroleo); }

/* =========================================================
   12. Rodapé
   ========================================================= */
.rodape{
  padding:clamp(28px,5vw,54px) clamp(14px,4vw,40px) calc(34px + env(safe-area-inset-bottom));
  background:var(--petroleo-escuro); color:color-mix(in srgb, var(--fundo) 78%, transparent);
}
.rodape-in{
  max-width:1180px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center;
}
.rodape p{ font-size:1.0625rem; }
.rodape nav{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; }
.rodape a, .leitura-volta{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem .95rem;
  border-radius:999px; border:1px solid color-mix(in srgb, var(--fundo) 20%, transparent);
  color:var(--carta); text-decoration:none; font-weight:600; font-size:.92rem;
  scale:var(--aperto,1);
  transition:scale .12s ease, background .2s ease;
}
.rodape nav a{ width:48px; height:48px; padding:0; justify-content:center; border-radius:50%; }
.rodape nav .ico{ width:22px; height:22px; }
.rodape-legal{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:10px; }
.rodape a:hover, .leitura-volta:hover{ background:color-mix(in srgb, var(--fundo) 10%, transparent); }
.rodape a:active, .leitura-volta:active, a.marca:active{ --aperto:.95; }

/* =========================================================
   12a. LEITURA — privacidade e termos (geradas por ferramentas/gerar-legais.py).
        A mesma marca e o mesmo rodapé da home; no meio, uma coluna de texto.
   ========================================================= */
.leitura-topo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(clamp(14px,4vw,40px) + env(safe-area-inset-right))
    12px
    calc(clamp(14px,4vw,40px) + env(safe-area-inset-left));
  background:var(--petroleo-escuro); color:var(--fundo);
}
a.marca{
  min-height:44px; text-decoration:none;
  scale:var(--aperto,1); transition:scale .12s ease;
}
.leitura{
  max-width:70ch; margin:0 auto;
  padding:clamp(28px,5vw,56px) clamp(14px,4vw,40px) clamp(44px,6vw,80px);
}
.leitura h1{
  font-family:var(--display); font-weight:800; color:var(--petroleo);
  font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);
  letter-spacing:-.035em; line-height:1.06; text-wrap:balance;
}
.leitura-data{ margin-top:.6rem; font-size:.92rem; color:color-mix(in srgb, var(--texto) 72%, transparent); }
.leitura h2{
  margin-top:clamp(28px,4vw,44px); padding-top:clamp(16px,2vw,24px);
  border-top:1px solid color-mix(in srgb, var(--petroleo) 12%, transparent);
  font-family:var(--display); font-weight:700; color:var(--petroleo);
  font-size:clamp(1.2rem,1.1rem + .6vw,1.5rem);
  letter-spacing:-.02em; line-height:1.15;
}
.leitura p, .leitura ul{ margin-top:.9rem; }
.leitura ul{ padding-left:1.15em; list-style:disc; }
.leitura li + li{ margin-top:.45em; }
.leitura li::marker{ color:var(--coral); }
.leitura code{ font-family:inherit; font-weight:600; }
/* link no meio do texto também é alvo de dedo: 44px de altura */
.leitura a{
  display:inline-block; padding-block:.7rem; overflow-wrap:anywhere;
  color:color-mix(in srgb, var(--coral-escuro) 80%, var(--texto));
}

/* =========================================================
   12b. CELULAR — o que não cabe em 390×844 sai, sem perder conteúdo:
        os rótulos são enfeite (o conteúdo das peças fala sozinho) e
        as funções inteiras moram na seção dos produtos, logo abaixo.
   ========================================================= */
@media (max-width:679.98px){
  /* no celular "o nosso jeito" mora na abertura, não no painel:
     sem isso ele vira uma linha fantasma na grade e espreme todo o resto */
  .p-saltos{ display:none; }
  .marca span{ display:none; }        /* senão o topo quebra em duas linhas */
  /* no celular quem vale no topo é o botão do gesto, não o enfeite */
  .ao-vivo{ display:none; }
  .peca .rotulo{ display:none; }
  .hero-sub{ margin-top:.35rem; }
  .hero-assina{ display:block; margin-top:.5rem; }
  .hero-botoes .btn-linha{ display:none; }   /* a seção das soluções está logo abaixo */
  .hero-botoes{ margin-top:.7rem; }
}
/* celular estreito: a linha do anel 24h ficou mais comprida (texto do COPY) */
@media (max-width:379.98px){
  .p-relogio{ padding:10px; gap:8px; }
  .p-relogio p{ font-size:.7rem; line-height:1.22; }
}
/* celular baixo (tela de 667): a frase de abertura ganhou uma linha — o botão e o respiro cedem */
@media (max-width:679.98px) and (max-height:700px){
  .hero-sub{ font-size:.76rem; line-height:1.45; }
  .hero-botoes{ margin-top:.5rem; }
  .hero-botoes .btn{ min-height:46px; padding:.6rem 1.1rem; }
}

/* =========================================================
   13. TABLET — 6 colunas
   ========================================================= */
@media (min-width:680px){
  :root{ --gap:26px; }
  .mosaico{
    grid-template-columns:repeat(6, minmax(0,1fr));
    grid-template-rows:2.7fr 1.45fr 1.05fr 1.4fr;
    grid-template-areas:
      "h h h h c c"
      "a a g g c c"
      "a a r r c c"
      "m m m n n n";
  }
  .p-hero{ grid-area:h; } .p-saltos{ grid-area:a; display:flex; } .p-conversa{ grid-area:c; }
  .p-grafico{ grid-area:g; } .p-relogio{ grid-area:r; }
  .p-marca{ grid-area:m; display:flex; } .p-canais{ grid-area:n; }

  .pilulas{ flex-direction:column; flex-wrap:nowrap; justify-content:center; }
  .pilula{ width:100%; min-height:44px; font-size:.9rem; }
  .aparelho{ border-radius:22px; }
}

/* =========================================================
   14. COMPUTADOR — 12 colunas; o celular vira aparelho de verdade
   ========================================================= */
@media (min-width:1080px){
  :root{ --gap:30px; --raio:22px; }
  .sala{ padding:16px 20px 18px; gap:12px; }
  .mosaico{
    grid-template-columns:repeat(12, minmax(0,1fr));
    grid-template-rows:1.3fr 1fr 1fr 1.15fr 1.5fr;
    grid-template-areas:
      "h h h h h c c c a a g g"
      "h h h h h c c c a a g g"
      "h h h h h c c c a a r r"
      "d d d d d c c c a a r r"
      "m m m m m c c c n n n n";
  }
  .p-destaques{ grid-area:d; display:flex; }
  .peca{ padding:18px; }
  .p-conversa{ padding:16px; }
  .hero-assina{ display:block; }
  /* o botão secundário só entra onde cabe na mesma linha do principal;
     abaixo disso ele viraria uma segunda linha e estouraria o herói */
  .hero-botoes .btn{ min-height:46px; padding:.7rem 1.05rem; font-size:.95rem; }
  .hero-botoes .btn-linha{ display:none; }
  .canal{ width:64px; height:64px; }
  .canal .marca-rede{ width:32px; height:32px; }

  /* as pílulas dividem a altura da peça — sem sobra no meio */
  .pilulas{ gap:10px; }
  .pilula{ flex:1 1 0; min-height:44px; }

  /* o anel cresce até encher a peça */
  .p-relogio{ flex-direction:column; justify-content:center; text-align:center; gap:8px; }
  .anel{ width:clamp(64px, min(8.4vw, 13vh), 150px); height:clamp(64px, min(8.4vw, 13vh), 150px); }

  /* o destaque que gira ocupa a faixa inteira */
  .giro .ico{ width:28px; height:28px; }
  .giro b{ font-size:clamp(1.05rem,.85rem + .6vw,1.35rem); }
  .giro span{ font-size:.97rem; }

  .marca-recepcao{ width:min(100%, clamp(150px, 26vh, 210px)); }
  .p-marca{ gap:.4rem; }
  /* respiros menores: nesta altura cada pixel do herói conta */
  .hero-sub{ margin-top:.25rem; }
  .hero-assina{ margin-top:.3rem; }
  .hero-botoes{ margin-top:.5rem; }
  .p-hero{ gap:.2rem; }
  .p-hero .rotulo{ margin-bottom:.25rem; }
  .hero-botoes .btn{ min-height:44px; }
  .p-marca{ padding:16px; }

  /* o aparelho, em perspectiva */
  .aparelho{
    align-self:center;
    width:min(100%, 340px);
    height:100%;
    border-radius:34px; padding:9px;
    background:linear-gradient(160deg, color-mix(in srgb, var(--fundo) 22%, transparent), color-mix(in srgb, var(--petroleo-escuro) 92%, transparent) 52%);
    border:1px solid color-mix(in srgb, var(--fundo) 22%, transparent);
    box-shadow:0 40px 70px -30px color-mix(in srgb, var(--petroleo-escuro) 90%, transparent), 0 0 0 1px color-mix(in srgb, var(--petroleo-escuro) 60%, transparent) inset;
    transform:rotateY(-9deg) rotateX(2deg);
  }
  .tela{ position:relative; border-radius:26px; overflow:clip; background:color-mix(in srgb, var(--petroleo-escuro) 96%, transparent); }
  .notch{
    display:block; position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:84px; height:17px; border-radius:999px; background:color-mix(in srgb, var(--petroleo-escuro) 96%, transparent); z-index:3;
  }
  .status{
    display:flex; align-items:center; justify-content:space-between;
    padding:.3rem .8rem .15rem;
    font-size:.66rem; font-weight:600; color:color-mix(in srgb, var(--fundo) 80%, transparent);
  }
  .status .ico{ width:13px; height:13px; stroke:color-mix(in srgb, var(--fundo) 80%, transparent); }
  .status-dir{ display:flex; align-items:center; gap:4px; }
  .fala-mic{ width:31px; height:31px; }
  .fala-campo{ font-size:.78rem; }
}

/* tela baixa: o painel inteiro tem que caber, então o que repete sai */
@media (min-width:1080px) and (max-height:790px){
  .p-marca .selo-24h{ display:none; }
}

@media (min-width:1500px){
  .hero-botoes .btn-linha{ display:inline-flex; }
  .pilula{ font-size:.97rem; min-height:52px; padding:.5rem .9rem; }
  .pilula .ico{ width:21px; height:21px; }
  .marca-recepcao{ width:min(100%, clamp(150px, 26vh, 300px)); }
  .giro .bolha{ width:54px; height:54px; }
  .giro .ico{ width:27px; height:27px; }
  .p-marca .assina{ line-height:1.2; }
}

/* =========================================================
   15. prefers-reduced-motion — desliga só o movimento GRANDE.
       Regra de 18/09/2026: o Windows dela (e o de muito cliente com PC modesto) está com
       "Efeitos de animação" desligado sem ninguém lembrar de ter desligado — e o site
       aparecia MORTO. Movimento é o que esta marca vende; configuração esquecida do
       aparelho não apaga o site inteiro. O que SAI aqui é o que pode dar enjoo: a placa que
       gira, a luz que varre a tela toda, as peças que chegam voando de longe e o salto no
       rolar (os dois últimos no sala.js). O que FICA é pequeno e parado no lugar: gráfico,
       conversa do celular, anel, pulsos. A página continua completa e legível.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  .sala::after{ display:none; }          /* a luz que varre o painel inteiro */
  .mosaico{ transform:none; }            /* a placa não gira */
  .peca{ animation:none; }               /* as peças não chegam voando de 560 px */
}