/* ==========================================================
   03 · REDESENHO (versão do Claude, outubro/2026)
   Menu que nasce só com a logo, seção viva do perfil, portfólio
   em movimento, planos e formulário no fim.
   Fica num arquivo próprio de propósito: tirar a linha dele do
   index.html (e a do vida.js) volta o visual anterior.
   ========================================================== */

/* ---------- menu do topo ----------
   Simétrico como a primeira tela, que é centralizada: Serviços e Portfólio à
   esquerda, a logo no centro (na linha do meio do título), Dúvidas e WhatsApp
   à direita. Como o da On, fica parado no topo da página e sai de vista com a
   rolagem; o WhatsApp continua no botão flutuante. */
.nav{position:absolute;top:0;left:0;right:0;transform:none;z-index:100;
  width:auto;max-width:none;gap:0;display:block;
  padding:0;border-radius:0;border:0;background:transparent;box-shadow:none}
.nav-dentro{max-width:var(--maxw);margin:0 auto;padding:30px 22px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
.nav .brand{grid-column:2}
.nav-esq{grid-column:1;justify-self:start}
.nav-dir{grid-column:3;justify-self:end;align-items:center}
.nav .marca{font-size:34px}
.nav-links{display:flex;gap:40px}
.nav-links a{font:var(--t-label);letter-spacing:.22em;text-transform:uppercase;font-size:11.5px;
  color:var(--muted);text-decoration:none;transition:color .2s ease}
.nav-links a:hover{color:var(--text)}

/* WhatsApp no fim do menu */
.nav-wa{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;
  border:1px solid rgba(var(--lamp-rgb),.35);color:var(--lamp);transition:background .2s ease,color .2s ease}
.nav-wa svg{width:19px;height:19px;fill:currentColor}
.nav .nav-wa{background:var(--lamp);border-color:var(--lamp);color:#0b0d0b}
.nav .nav-wa:hover{color:#0b0d0b;filter:brightness(1.08)}
/* no computador o botão diz "Contato"; no celular fica só o ícone */
.nav .nav-wa{display:inline-flex;align-items:center;gap:8px;width:auto;padding:0 18px 0 14px;border-radius:999px;
  font:var(--t-label);letter-spacing:.18em;text-transform:uppercase;font-size:11.5px;font-weight:700;text-decoration:none}

@media(max-width:900px){
  .nav{width:auto}
  /* Celular: WhatsApp à esquerda, logo no centro, menu à direita */
  .nav-esq,.nav-dir>a:not(.nav-wa){display:none}
  .nav-dir{display:contents}
  .nav-wa{grid-column:1;grid-row:1;justify-self:start}
  .nav .nav-wa{width:40px;padding:0;justify-content:center}
  .nav-wa span{display:none}
  .nav .menu-btn{grid-column:3;grid-row:1;justify-self:end}
  .nav-dentro{gap:12px}
  .nav-dentro{padding:20px 18px}
  .nav .marca{font-size:28px}
}

/* ---------- títulos sem o rótulo pequeno em cima ---------- */
.section-head h2 em,#planos h2 em{font-style:italic;color:var(--lamp)}
.port-sub{font:var(--t-h2);letter-spacing:var(--t-h2-ls);margin:84px 0 26px}

/* ---------- abertura: texto de apoio, menor que o subtítulo ---------- */
.hero .hero-apoio{max-width:58ch;margin:14px auto 0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.55)}
@media(max-width:620px){.hero .hero-apoio{font-size:14px}}

/* ---------- abertura: PÓDIO de fundo ----------
   A mesma arte do bloco final (.final-mark): a palavra só em contorno, bem
   apagada, atrás do título. z-index -1 dentro do .wrap isolado, então nunca
   passa por cima do texto. */
.hero .wrap{position:relative;isolation:isolate}
.hero-mark{position:absolute;z-index:-1;top:-10px;left:50%;transform:translateX(-50%);
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.02em;line-height:1;
  font-size:clamp(110px,24vw,340px);white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);
  pointer-events:none;user-select:none}
@media(max-width:620px){.hero-mark{top:20px;font-size:clamp(84px,27vw,140px)}}

/* ---------- seção viva: o perfil se completando ----------
   A seção é alta (o tempo de rolagem) e o palco fica parado no meio da tela.
   O vida.js toca um vídeo de cenas quando a seção aparece: troca data-passo
   (0 a 3, o texto da esquerda) e data-cena (o que o celular mostra).
   Daqui para baixo cada passo e cada cena só acende o que é dele. */
/* Sem trava: a seção tem a altura de uma tela e rola como as outras; o vídeo
   toca sozinho enquanto ela aparece (vida.js). */
.vida{padding:0;position:relative;height:auto}
.vida-palco{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;
  display:flex;align-items:center;padding:110px 0 70px}
.vida-grade{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:center;position:relative}

/* A palavra grande que troca atrás de tudo */
.vida-fundo{position:absolute;inset:0;margin:0;pointer-events:none;user-select:none;
  display:grid;place-items:center;overflow:hidden}
.vida-fundo span{grid-area:1/1;font-family:var(--serif);font-style:italic;line-height:1;
  font-size:clamp(90px,17vw,250px);letter-spacing:-.03em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(var(--lamp-rgb),.16);
  opacity:0;transform:translateY(60px) scale(.96);
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.vida[data-passo="0"] .vida-fundo span:nth-child(1),
.vida[data-passo="1"] .vida-fundo span:nth-child(2),
.vida[data-passo="2"] .vida-fundo span:nth-child(3),
.vida[data-passo="3"] .vida-fundo span:nth-child(4){opacity:1;transform:none}

.vida-textos h2{margin-bottom:34px;max-width:20ch}
.vida-textos h2 em{font-style:italic;color:var(--lamp);display:block;white-space:nowrap}
.vida-passos{display:grid}
.vida-passo{grid-area:1/1;opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.vida-passo h3{font:var(--t-h1);letter-spacing:var(--t-h1-ls);font-size:clamp(26px,2.8vw,36px);margin-bottom:14px}
.vida-passo p{max-width:46ch}
.vida[data-passo="0"] .vida-passo[data-p="0"],
.vida[data-passo="1"] .vida-passo[data-p="1"],
.vida[data-passo="2"] .vida-passo[data-p="2"],
.vida[data-passo="3"] .vida-passo[data-p="3"]{opacity:1;transform:none;pointer-events:auto}
.vida-dica{margin-top:26px;font:var(--t-label);letter-spacing:.2em;text-transform:uppercase;font-size:11px;color:var(--lamp)}
.vida-dica::after{content:'';display:block;width:1px;height:38px;margin:12px 0 0 6px;
  background:linear-gradient(var(--lamp),transparent);animation:dica 1.8s ease-in-out infinite}
@keyframes dica{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* Passo 2: a linha do botão que está sendo tocado acende */
.vida-acoes{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.vida-acoes li{color:var(--muted);padding:12px 16px;border-radius:14px;border:1px solid transparent;
  transition:color .3s ease,background .3s ease,border-color .3s ease}
.vida-acoes b{color:var(--text);font-weight:600;margin-right:4px}
.vida[data-acao="rota"] .vida-acoes [data-a="rota"],
.vida[data-acao="ligar"] .vida-acoes [data-a="ligar"],
.vida[data-acao="site"] .vida-acoes [data-a="site"]{color:var(--text);
  background:rgba(var(--lamp-rgb),.08);border-color:rgba(var(--lamp-rgb),.35)}
.vida[data-acao="rota"] .vida-acoes [data-a="rota"] b,
.vida[data-acao="ligar"] .vida-acoes [data-a="ligar"] b,
.vida[data-acao="site"] .vida-acoes [data-a="site"] b{color:var(--lamp)}

/* ---- o celular: inclina de leve seguindo o mouse (--rx/--ry vêm do vida.js) ---- */
.vida-cel{perspective:1200px}
.cel{width:320px;height:640px;border-radius:46px;padding:12px;margin:0 auto;
  background:linear-gradient(160deg,#2a2e2a,#0d0f0d);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 40px 90px -30px rgba(0,0,0,.95),
             0 0 120px -40px rgba(var(--lamp-rgb),.45);
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cel-tela{width:100%;height:100%;border-radius:35px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;
  background:#F6F7F5;color:#1D211D;font:400 12.5px/1.4 var(--sans)}
.cel-tela img{display:block;width:100%;height:100%;object-fit:cover}

.g-topo{padding:38px 12px 10px;background:#F6F7F5;position:relative;z-index:2}
.g-busca{padding:10px 14px;border-radius:100px;background:#fff;height:40px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);display:flex;align-items:center;gap:8px;color:#3d443d;font-size:12.5px}
.g-busca svg{width:16px;height:16px;flex:none;fill:none;stroke:#6b736b;stroke-width:2}
.g-digita{white-space:nowrap;overflow:hidden}
.g-cursor{width:1.5px;height:16px;background:#1A73E8;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.vida:not([data-cena="hoje"]) .g-cursor{display:none}

.g-janela{flex:1;overflow:hidden;position:relative}
.g-rolo{transform:translateY(var(--rolo,0px));transition:transform .9s cubic-bezier(.45,0,.25,1)}

.g-fotos{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;
  height:136px;margin:0 12px;border-radius:14px;overflow:hidden}
.g-foto{position:relative;background:#E3E6E2;overflow:hidden}
.g-foto.f1{grid-row:1/3}
.g-foto img{transition:opacity .7s ease,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.g-foto.f3 b{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);
  color:#fff;font:600 13px/1 var(--sans);transition:opacity .5s ease}
/* Perfil cru: só a primeira foto */
.vida[data-passo="0"] :is(.f2,.f3) img,.vida[data-passo="0"] .f3 b{opacity:0}
.vida[data-passo="0"] :is(.f2,.f3) img{transform:scale(1.2)}

.g-corpo{padding:10px 14px 18px}
.g-nome{font:400 20px/1.15 var(--serif);color:#141814;margin-bottom:4px}
.g-linha{font-size:12px;color:#5a625a;margin-bottom:2px}
.verde{color:#1E8E3E;font-weight:600}
.azul{color:#1A73E8}
.g-qtd{font-weight:400}

/* Cada item tem a versão crua e a pronta; o passo escolhe qual aparece */
.so-pronto{display:none!important}
.vida:not([data-passo="0"]) .so-pronto{display:revert!important;animation:surge .5s ease both}
.vida:not([data-passo="0"]) .so-cru{display:none}
span.so-pronto,b.so-pronto{display:none}
.vida:not([data-passo="0"]) .g-abas .so-pronto{display:inline-block!important}
.falta{color:#9AA19A;font-style:italic}
.vida:not([data-passo="0"]) .g-info li.so-pronto{display:flex!important}
@keyframes surge{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.g-abas{display:flex;gap:14px;margin:10px -14px 0;padding:0 14px;border-bottom:1px solid #E1E4E0;
  font-size:11.5px;color:#5a625a;white-space:nowrap;overflow:hidden}
.g-abas span{padding:7px 0 8px}
.g-abas .ativa{color:#1A73E8;border-bottom:2px solid #1A73E8;font-weight:600}

.g-acoes{display:flex;justify-content:space-between;margin:12px 0 10px}
.g-acao{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;color:#1A73E8;width:50px;
  transition:opacity .4s ease}
.g-acao i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #C6DAFC;background:#E8F0FE;transition:background .25s ease,transform .25s ease}
.g-acao svg{width:17px;height:17px;fill:none;stroke:#1A73E8;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.g-acao.a-rota i{background:#1A73E8;border-color:#1A73E8}
.g-acao.a-rota svg{stroke:#fff}
/* Perfil cru: sem telefone e sem site, os dois botões nem existem */
.vida[data-passo="0"] :is(.a-ligar,.a-site){display:none}
.vida[data-passo="0"] .g-acoes{justify-content:flex-start;gap:14px}

.g-info{list-style:none;margin:0;padding:10px 0 0;border-top:1px solid #E4E7E3;display:grid;gap:9px;font-size:11.5px;color:#3d443d}
.g-info li{display:flex;align-items:center;gap:10px}
.g-info svg{width:15px;height:15px;flex:none;fill:none;stroke:#5f6b5f;stroke-width:1.8}
.g-bloco{margin-top:14px;padding-top:10px;border-top:1px solid #E4E7E3}
.g-bt{font:600 12px/1.3 var(--sans);color:#1D211D;margin-bottom:7px}
.g-chips{display:flex;flex-wrap:wrap;gap:5px}
.g-chips i{font-style:normal;font-size:10.5px;padding:4px 9px;border-radius:100px;border:1px solid #D3D8D2;color:#3d443d}
.g-post p:not(.g-bt){font-size:11.5px;color:#3d443d}
.g-aval{padding:9px 11px;border-radius:12px;background:#fff;border:1px solid #E4E7E3;font-size:11px;margin-top:7px}
.g-aval p{color:#2c322c;margin:0}
.g-aval .g-resp{margin-top:5px;padding-left:8px;border-left:2px solid #1A73E8;color:#5a625a;font-size:10.5px}
.g-selo{font:600 9.5px/1 var(--sans);color:#fff;background:#1E8E3E;padding:2px 6px;border-radius:100px;vertical-align:1px}

.estrelas{display:inline-block;width:62px;height:11px;vertical-align:-1px;margin:0 2px;
  background:linear-gradient(90deg,#F5B400 var(--n),#D6D9D5 var(--n));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 11'%3E%3Cg%3E%3Cpath id='s' d='M5.5 0l1.6 3.6 3.9.4-2.9 2.6.9 3.9-3.5-2.1-3.5 2.1.9-3.9L0 4l3.9-.4z'/%3E%3Cuse href='%23s' x='12.6'/%3E%3Cuse href='%23s' x='25.2'/%3E%3Cuse href='%23s' x='37.8'/%3E%3Cuse href='%23s' x='50.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 11'%3E%3Cg%3E%3Cpath id='s' d='M5.5 0l1.6 3.6 3.9.4-2.9 2.6.9 3.9-3.5-2.1-3.5 2.1.9-3.9L0 4l3.9-.4z'/%3E%3Cuse href='%23s' x='12.6'/%3E%3Cuse href='%23s' x='25.2'/%3E%3Cuse href='%23s' x='37.8'/%3E%3Cuse href='%23s' x='50.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.estrelas.e5{--n:100%}

/* ---- o dedo: um círculo que o vida.js põe em cima do botão tocado ---- */
.toque{position:absolute;left:var(--tx,50%);top:var(--ty,50%);width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:rgba(26,115,232,.22);border:2px solid rgba(26,115,232,.75);
  opacity:0;transform:scale(1.6);pointer-events:none;z-index:20}
.toque.on{animation:toque .6s ease forwards}
@keyframes toque{0%{opacity:0;transform:scale(1.6)}40%{opacity:1;transform:scale(.9)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}

/* ---- telas que abrem por cima do perfil ---- */
.ov{position:absolute;inset:0;z-index:10;opacity:0;visibility:hidden;transform:translateY(24px) scale(.98);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.3,1),visibility 0s linear .5s}
.vida[data-cena="mapa"] .ov-mapa,
.vida[data-cena="ligar"] .ov-ligar,
.vida:is([data-cena="site"],[data-cena="site-toque"],[data-cena="site-zap"]) .ov-site,
.vida[data-cena="site-zap"] .ov-zap,
.vida[data-cena="nfc"] .ov-nfc,
.vida:is([data-cena="avaliar"],[data-cena="avals"]) .ov-avaliar{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* Mapa: zoom até o pino e a rota se desenhando */
.ov-mapa{background:#E9EBE6;overflow:hidden}
.mapa-ruas{position:absolute;inset:-20%;
  background:
    linear-gradient(90deg,transparent 46%,#fff 46% 54%,transparent 54%) 0 0/110px 110px,
    linear-gradient(0deg,transparent 46%,#fff 46% 54%,transparent 54%) 0 0/110px 110px,
    linear-gradient(35deg,transparent 48%,#FDE293 48% 52%,transparent 52%) 0 0/100% 100%,
    radial-gradient(circle at 70% 25%,#C8E6C9 0 9%,transparent 9.5%),
    radial-gradient(circle at 20% 70%,#BBDEFB 0 7%,transparent 7.5%);
  transform:scale(1.9);transform-origin:78% 34%;transition:transform 1.6s cubic-bezier(.2,.7,.3,1)}
.vida[data-cena="mapa"] .mapa-ruas{transform:scale(1)}
.mapa-rota{position:absolute;inset:0;width:100%;height:100%}
.mapa-rota path{fill:none;stroke:#1A73E8;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:600;stroke-dashoffset:600}
.vida[data-cena="mapa"] .mapa-rota path{transition:stroke-dashoffset 1.4s ease .6s;stroke-dashoffset:0}
.mapa-voce{position:absolute;left:52px;top:552px;width:16px;height:16px;border-radius:50%;
  background:#1A73E8;border:3px solid #fff;box-shadow:0 0 0 8px rgba(26,115,232,.2)}
.mapa-pino{position:absolute;left:216px;top:168px;width:34px;height:42px}
.mapa-pino svg{width:100%;height:100%;fill:#EA4335;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3))}
.vida[data-cena="mapa"] .mapa-pino{animation:pino .6s cubic-bezier(.3,1.6,.5,1) .3s both}
@keyframes pino{from{transform:translateY(-30px);opacity:0}to{transform:none;opacity:1}}
.mapa-cartao{position:absolute;left:12px;right:12px;bottom:14px;padding:12px 14px;border-radius:16px;background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:12px;color:#3d443d;display:flex;align-items:center;gap:6px}
.mapa-cartao b{color:#1E8E3E;white-space:nowrap}
.mapa-cartao span{margin-left:auto;background:#1A73E8;color:#fff;font-weight:600;padding:7px 12px;border-radius:100px}

/* Ligar: chamada no WhatsApp */
.ov-ligar{background:linear-gradient(180deg,#0B5E4F,#063B32);color:#fff;text-align:center;padding-top:70px}
.lig-marca{font-size:11px;color:rgba(255,255,255,.7);letter-spacing:.04em}
.lig-foto{display:block;width:92px;height:92px;border-radius:50%;overflow:hidden;margin:34px auto 14px;
  box-shadow:0 0 0 6px rgba(255,255,255,.08)}
.vida[data-cena="ligar"] .lig-foto{animation:chama 1.2s ease-in-out infinite}
@keyframes chama{50%{box-shadow:0 0 0 16px rgba(255,255,255,.04)}}
.lig-nome{font:400 24px/1.2 var(--serif);color:#fff}
.lig-estado{font-size:12px;color:rgba(255,255,255,.75);margin-top:4px}
.lig-botoes{position:absolute;left:18px;right:18px;bottom:44px;display:flex;justify-content:space-between;
  padding:14px 16px;border-radius:26px;background:rgba(0,0,0,.22)}
.lig-botoes i{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
.lig-botoes svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lig-botoes .desliga{background:#E53935}
.lig-botoes .desliga svg{fill:#fff;stroke:none}

/* Site: a página da academia, com o botão que leva ao WhatsApp */
.ov-site{background:linear-gradient(170deg,#16243a,#0b1220);color:#fff;padding:40px 18px 18px}
.s-topo{font:500 10px/1 var(--mono);color:rgba(255,255,255,.6);padding:7px 11px;border-radius:100px;
  background:rgba(255,255,255,.08);display:inline-block}
.s-foto{display:block;height:150px;border-radius:16px;overflow:hidden;margin:16px 0 14px}
.s-tit{font:400 23px/1.12 var(--serif);color:#fff;margin-bottom:8px}
.s-txt{font-size:11.5px;color:rgba(255,255,255,.72);margin-bottom:16px}
.s-btn{display:inline-block;padding:11px 16px;border-radius:100px;background:#25D366;color:#06260f;font:600 12px/1 var(--sans)}
.s-grade{margin-top:18px;font-size:11px;color:rgba(255,255,255,.6);padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.s-grade b{color:#fff;margin-right:6px}

/* WhatsApp: a conversa chega */
.ov-zap{background:#EFE7DE url(../img/fundo-whatsapp.svg) 0 0/300px;display:flex;flex-direction:column}
.z-topo{background:#075E54;color:#fff;padding:40px 14px 12px;display:flex;align-items:center;gap:10px}
.z-topo i{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none}
.z-topo p{font:600 13px/1.2 var(--sans);color:#fff;margin:0}
.z-topo span{display:block;font-weight:400;font-size:10.5px;color:rgba(255,255,255,.75)}
.z-chat{padding:16px 12px;display:grid;gap:8px;align-content:start}
.z-msg{max-width:82%;padding:8px 11px;border-radius:10px;font-size:12px;color:#1a2a1a;margin:0;
  box-shadow:0 1px 1px rgba(0,0,0,.12);opacity:0;transform:translateY(10px)}
.z-eu{justify-self:end;background:#DCF8C6;border-top-right-radius:2px}
.z-eles{justify-self:start;background:#fff;border-top-left-radius:2px}
.vida[data-cena="site-zap"] .z-eu{animation:surge .4s ease .4s both}
.vida[data-cena="site-zap"] .z-eles{animation:surge .4s ease 1.8s both}
/* Do WhatsApp para a placa: site e conversa saem de uma vez, sem misturar as três telas */
.vida[data-cena="nfc"] :is(.ov-site,.ov-zap){transition:none}

/* NFC: o celular encosta na placa do balcão */
.ov-nfc{background:radial-gradient(circle at 50% 60%,#2b2f2b,#111311);display:grid;place-items:center}
.nfc-placa{width:200px;padding:22px 18px;border-radius:20px;background:#fff;text-align:center;color:#1D211D;
  box-shadow:0 20px 40px rgba(0,0,0,.5);position:relative}
.nfc-tit{font:400 22px/1.1 var(--serif);color:#141814}
.nfc-sub{font-size:11px;color:#5a625a;margin:6px 0 14px}
.nfc-ondas{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:50%;background:#E8F0FE}
.nfc-sub{margin-bottom:14px}
.nfc-ondas svg{width:28px;height:28px;fill:none;stroke:#1A73E8;stroke-width:2;stroke-linecap:round}
.vida[data-cena="nfc"] .nfc-ondas{animation:ondas 1s ease-in-out .9s infinite}
@keyframes ondas{50%{box-shadow:0 0 0 14px rgba(26,115,232,.15)}}
.nfc-cel{position:absolute;left:50%;top:28px;width:116px;height:220px;margin-left:-58px;border-radius:18px;
  background:linear-gradient(160deg,#3a3f3a,#151715);border:2px solid rgba(255,255,255,.25)}
.vida[data-cena="nfc"] .nfc-cel{animation:encosta 1.4s cubic-bezier(.4,0,.2,1) both}
/* O celular para com a ponta em cima do ícone do NFC, sem cobrir o texto.
   Anima o top (e não translate) para o dedo achar a notificação no lugar certo. */
@keyframes encosta{0%{top:-150px;transform:rotate(-8deg);opacity:0}55%,100%{top:28px;transform:none;opacity:1}}
/* Quando encosta, a notificação do Google aparece na tela dele; o dedo toca nela */
.nfc-notif{position:absolute;left:5px;right:5px;top:16px;display:flex;align-items:center;gap:5px;
  padding:5px;border-radius:9px;background:rgba(246,247,246,.97);color:#141814;text-align:left;
  box-shadow:0 4px 12px rgba(0,0,0,.4);opacity:0}
.nfc-notif svg{flex:none;width:16px;height:16px;padding:2px;border-radius:4px;background:#fff}
.nfc-notif b{display:block;font-size:8.5px;line-height:1.2;white-space:nowrap}
.nfc-notif small{display:block;font-size:7px;line-height:1.25;color:#5a625a;white-space:nowrap}
.vida[data-cena="nfc"] .nfc-notif{animation:notif .4s cubic-bezier(.2,.9,.3,1.15) .85s both}
@keyframes notif{from{opacity:0;transform:translateY(-6px) scale(.9)}to{opacity:1;transform:none}}

/* Avaliar: as estrelas enchem uma a uma */
.ov-avaliar{background:#fff;padding:70px 20px 20px;text-align:center}
.av-nome{font:400 20px/1.2 var(--serif);color:#141814}
.av-sub{font-size:11.5px;color:#5a625a;margin:4px 0 24px}
.av-estrelas{display:flex;justify-content:center;gap:8px;margin-bottom:22px}
.av-estrelas i{width:32px;height:32px;background:#D6D9D5;
  clip-path:polygon(50% 0,61.8% 35%,98% 35%,68.5% 57%,79.4% 91%,50% 70%,20.6% 91%,31.5% 57%,2% 35%,38.2% 35%)}
.vida[data-cena="avaliar"] .av-estrelas i{animation:estrela .3s ease both}
.vida[data-cena="avaliar"] .av-estrelas i:nth-child(1){animation-delay:.3s}
.vida[data-cena="avaliar"] .av-estrelas i:nth-child(2){animation-delay:.45s}
.vida[data-cena="avaliar"] .av-estrelas i:nth-child(3){animation-delay:.6s}
.vida[data-cena="avaliar"] .av-estrelas i:nth-child(4){animation-delay:.75s}
.vida[data-cena="avaliar"] .av-estrelas i:nth-child(5){animation-delay:.9s}
@keyframes estrela{from{background:#D6D9D5;transform:scale(.8)}to{background:#F5B400;transform:scale(1)}}
.av-texto{text-align:left;font-size:12px;color:#2c322c;padding:12px;border-radius:10px;border:1px solid #D3D8D2;min-height:70px;
  opacity:0}
.vida[data-cena="avaliar"] .av-texto{animation:surge .5s ease 1.3s both}
.av-btn{display:inline-block;margin-top:18px;padding:10px 26px;border-radius:100px;background:#1A73E8;color:#fff;font:600 12px/1 var(--sans)}
/* Depois de Postar: o formulário sobe e some, e três avaliações descem de cima */
.av-form{transition:opacity .35s ease,transform .35s ease}
.vida[data-cena="avals"] .av-form{opacity:0;transform:translateY(-18px)}
.av-cards{position:absolute;left:14px;right:14px;top:58px;display:grid;gap:12px;text-align:left}
.av-card{padding:14px 14px 13px;border-radius:16px;background:#fff;border:1px solid #E4E7E3;
  box-shadow:0 12px 26px rgba(20,24,20,.13);opacity:0}
.av-card:first-child{border-color:#1E8E3E;box-shadow:0 0 0 3px rgba(30,142,62,.15),0 12px 26px rgba(20,24,20,.13)}
.vida[data-cena="avals"] .av-card{animation:cai .6s cubic-bezier(.2,.9,.3,1.15) both}
.vida[data-cena="avals"] .av-card:nth-child(1){animation-delay:.35s}
.vida[data-cena="avals"] .av-card:nth-child(2){animation-delay:.75s}
.vida[data-cena="avals"] .av-card:nth-child(3){animation-delay:1.15s}
@keyframes cai{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:none}}
.av-quem{display:flex;align-items:center;gap:8px;margin:0 0 7px;font:600 12.5px/1.2 var(--sans);color:#141814}
.av-quem i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--sans);color:#fff;background:#1A73E8}
.av-card:nth-child(2) .av-quem i{background:#E37400}
.av-card:nth-child(3) .av-quem i{background:#8E24AA}
.av-quem span{margin-left:auto;font:600 10px/1 var(--sans);padding:4px 8px;border-radius:100px;background:#1E8E3E;color:#fff}
.av-card .estrelas{width:78px;height:14px;margin:0}
.av-c-txt{font-size:13px;line-height:1.4;color:#2c322c;margin:6px 0 0}
.av-c-resp{margin:9px 0 0;padding-left:9px;border-left:2px solid #1A73E8;font-size:11px;line-height:1.4;color:#5a625a}

@media(max-width:900px){
  .vida-palco{align-items:flex-start;padding:44px 0 56px}
  .vida-grade{grid-template-columns:1fr;gap:14px}
  .vida-textos h2{margin-bottom:18px;font-size:28px;max-width:none}
  /* a palavra grande do fundo passava por trás dos botões */
  .vida-fundo{display:none}
  .vida-textos h2 em{display:inline;white-space:normal}
  .vida-passo p,.vida-acoes li{font-size:14px}
  .vida-acoes{gap:4px}
  .vida-acoes li{padding:5px 10px}
  .vida-passo h3{font-size:23px;margin-bottom:6px}
  .vida-dica{display:none}
  /* O celular encolhe inteiro (o desenho foi feito em 320×640) para
     280×560, o mesmo tamanho do celular da demonstração do site */
  /* min-width:0 para o desenho de 320px não alargar a coluna em telas estreitas */
  .vida-textos,.vida-cel{min-width:0}
  .vida-cel{height:560px;margin-top:44px;display:flex;justify-content:center}
  .cel{flex:none;transform:scale(.875);transform-origin:top center}
}


/* Selo em cima do celular: diz se o perfil é o de hoje ou o completo */
.vida-cel{position:relative}
.vida-selo{position:absolute;left:50%;top:-16px;transform:translateX(-50%);z-index:5;margin:0;
  display:grid;white-space:nowrap}
.vida-selo span{grid-area:1/1;justify-self:center;padding:7px 15px;border-radius:100px;
  font:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-size:10.5px;
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.vida-selo .s-hoje{background:#3a2a22;color:#FFB59E;border:1px solid rgba(255,140,110,.4)}
.vida-selo .s-podio{background:var(--grad);color:var(--ink);box-shadow:0 10px 26px -10px rgba(var(--warm-rgb),.8);
  opacity:0;transform:translateY(8px) scale(.9)}
.vida:not([data-passo="0"]) .vida-selo .s-hoje{opacity:0;transform:translateY(-8px) scale(.9)}
.vida:not([data-passo="0"]) .vida-selo .s-podio{opacity:1;transform:none}

/* Barrinha de progresso, como a dos stories: um segmento por passo */
.vida-progresso{position:absolute;top:14px;left:26px;right:26px;z-index:30;display:flex;gap:4px;pointer-events:none}
.vida-progresso i{flex:1;height:3px;border-radius:3px;background:rgba(0,0,0,.14);overflow:hidden;position:relative}
.vida-progresso i::after{content:'';position:absolute;inset:0;background:#1A73E8;
  transform:scaleX(var(--cheio,0));transform-origin:left;transition:transform var(--dur,0ms) linear}
.vida:is([data-cena="ligar"],[data-cena="site"],[data-cena="site-toque"],[data-cena="site-zap"],[data-cena="nfc"]) .vida-progresso i{background:rgba(255,255,255,.22)}
.vida:is([data-cena="ligar"],[data-cena="site"],[data-cena="site-toque"],[data-cena="site-zap"],[data-cena="nfc"]) .vida-progresso i::after{background:#fff}
@media(max-width:900px){.vida-selo{top:-12px}}


/* Capítulos do vídeo: mostram em que parte está e pulam para outra */
.vida-capitulos{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.vida-capitulos button{font:600 12.5px/1 var(--sans);color:var(--muted);cursor:pointer;
  padding:9px 15px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid var(--glass-line);
  transition:color .25s ease,background .25s ease,border-color .25s ease}
.vida-capitulos button:hover{color:var(--text);background:rgba(255,255,255,.1)}
.vida-capitulos button[aria-current="true"]{color:var(--ink);background:var(--lamp);border-color:var(--lamp)}
/* O texto de cada parte tem altura diferente: reservo a maior para os
   capítulos não pularem de lugar a cada troca */
.vida-passos{min-height:230px;align-items:start}
@media(max-width:900px){
  .vida-passos{min-height:150px}
  .vida-capitulos{margin-top:12px;gap:6px}
  .vida-capitulos button{padding:7px 11px;font-size:11.5px}
}

/* ---------- portfólio: o site rolando dentro do celular ---------- */
.port{display:grid;gap:28px}
.port-item{display:grid;grid-template-columns:300px minmax(0,520px);gap:56px;align-items:center;justify-content:center}
.port-cel{width:280px;height:560px;border-radius:42px;padding:11px;margin:0 auto;
  background:linear-gradient(160deg,#2a2e2a,#0d0f0d);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),0 40px 90px -30px rgba(0,0,0,.95)}
.port-tela{width:100%;height:100%;border-radius:32px;overflow:hidden;position:relative;background:#0b1220}
.port-tela img{display:block;width:100%;height:auto;
  animation:portRola 16s cubic-bezier(.45,0,.35,1) infinite;animation-play-state:paused}
/* Desce o site até o fim da imagem, para no botão e a conversa aparece */
@keyframes portRola{0%,8%{transform:translateY(0)}62%,100%{transform:translateY(calc(-100% + 538px))}}
.port-toque{position:absolute;left:50%;top:62%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);opacity:0;animation:portToque 16s ease infinite;animation-play-state:paused}
@keyframes portToque{0%,66%{opacity:0;transform:scale(1.6)}70%{opacity:1;transform:scale(1)}76%,100%{opacity:0;transform:scale(.8)}}
.port-zap{position:absolute;left:12px;right:12px;bottom:18px;padding:11px 13px;border-radius:12px 12px 2px 12px;
  background:#DCF8C6;color:#1a2a1a;font:400 12.5px/1.4 var(--sans);box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0;animation:portZap 16s ease infinite;animation-play-state:paused}
@keyframes portZap{0%,72%{opacity:0;transform:translateY(14px)}77%,96%{opacity:1;transform:none}100%{opacity:0}}
.port.in :is(img,.port-toque,.port-zap){animation-play-state:running}
.port-texto h3{font:var(--t-h1);letter-spacing:var(--t-h1-ls);margin-bottom:6px}
.port-meta{font:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--lamp);margin-bottom:18px}
.port-texto p{max-width:48ch}
.port-link{display:inline-block;margin-top:20px;color:var(--text);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(var(--lamp-rgb),.6);padding-bottom:2px}
.port-link:hover{color:var(--lamp)}
@media(max-width:860px){
  .port-item{grid-template-columns:1fr;gap:30px;text-align:center}
  .port-texto p{margin:0 auto}
}

/* ---------- soluções: três cards altos (referência: base.digital) ----------
   Parado, só o título. No hover (ou foco), o véu escurece, a cena se mexe e
   o texto e o botão sobem: a altura do .sol-mais vai de 0fr a 1fr.
   No celular viram uma fileira que desliza para o lado, com o texto aberto. */
.sols{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sol{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;isolation:isolate;
  border:1px solid var(--glass-line);background:var(--sea)}
.sol-cena{position:absolute;inset:0;z-index:-2;transition:opacity .5s,filter .5s,transform .8s cubic-bezier(.2,.7,.3,1)}
/* Com o texto aberto, a cena apaga e desfoca, como a foto nos cards da Base:
   o texto nunca briga com o que está atrás. */
.sol:is(:hover,:focus-within) .sol-cena{opacity:.28;filter:blur(3px);transform:scale(1.05)}
.sol::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(var(--ink-rgb),.95) 0%,rgba(var(--ink-rgb),.55) 38%,rgba(var(--ink-rgb),0) 65%);
  transition:background-color .5s}
.sol-texto{position:absolute;left:0;right:0;bottom:0;padding:24px}
.sol h3{font:var(--t-h1);letter-spacing:var(--t-h1-ls);font-size:clamp(24px,2.1vw,30px)}
.sol-mais{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.3,1)}
.sol-mais>div{overflow:hidden;opacity:0;transition:opacity .4s}
.sol:is(:hover,:focus-within) .sol-mais{grid-template-rows:1fr}
.sol:is(:hover,:focus-within) .sol-mais>div{opacity:1;transition-delay:.12s}
.sol-mais p{color:rgba(255,255,255,.86);margin:14px 0 22px;max-width:36ch}
.sol-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid rgba(255,255,255,.75);
  border-radius:10px;color:var(--text);font-weight:600;font-size:15px;text-decoration:none;transition:background .3s,color .3s}
.sol-btn:hover{background:#fff;color:#0b0d0b}
.sol-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.sol-btn[data-wa] svg{width:18px;height:18px;fill:var(--lamp);stroke:none}
.sol-btn[data-wa]:hover svg{fill:#1f8f4e}
.sol-breve{position:absolute;top:20px;left:20px;font:var(--t-label);letter-spacing:var(--t-label-ls);text-transform:uppercase;
  color:#0b0d0b;background:var(--lamp);padding:7px 11px;border-radius:999px}

/* cena 1: mapa com pino e o card do perfil */
.sol-google .sol-cena{background:
  radial-gradient(circle at 50% 30%,rgba(var(--lamp-rgb),.16),transparent 55%),
  linear-gradient(28deg,transparent 47.5%,rgba(255,255,255,.09) 48%,rgba(255,255,255,.09) 52%,transparent 52.5%),
  linear-gradient(-62deg,transparent 47.6%,rgba(255,255,255,.06) 48%,rgba(255,255,255,.06) 50.5%,transparent 51%),
  repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,255,255,.035) 46px 47px),
  repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.035) 46px 47px),#121512}
.sol-pino{position:absolute;left:50%;top:15%;width:34px;height:34px;margin-left:-17px;border-radius:50% 50% 50% 0;
  background:var(--lamp);transform:rotate(-45deg);box-shadow:0 0 0 10px rgba(var(--lamp-rgb),.14)}
.sol-pino::after{content:'';position:absolute;inset:11px;border-radius:50%;background:#0b0d0b}
.sol-gcard{position:absolute;left:12%;right:12%;top:30%;background:#fff;color:#202124;border-radius:14px;padding:16px 16px 14px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);font-size:13px;line-height:1.45}
.sg-nome{font-size:16px;font-weight:600;margin-bottom:2px}
.sg-nota{color:#5f6368}
.sg-linha{color:#5f6368}
.sg-linha b{color:#188038;font-weight:500}
.sg-botoes{display:flex;gap:6px;margin-top:10px}
.sg-botoes span{flex:1;text-align:center;font-size:12px;color:#0b57d0;border:1px solid #dadce0;border-radius:999px;padding:5px 0}

/* cena da placa: a placa do balcão emitindo o NFC e o celular que chega perto */
.sol-placa .sol-cena{background:radial-gradient(circle at 50% 34%,rgba(var(--lamp-rgb),.15),transparent 58%),#121512}
.sp-placa{position:absolute;left:25%;right:25%;top:8%;aspect-ratio:3/4;border-radius:14px;padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  background:linear-gradient(160deg,#1f231f,#0c0e0c);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 22px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.sp-g{width:30px;height:30px;border-radius:50%;background:#fff;color:#4285F4;font:700 18px/30px var(--sans)}
.sp-tit{font:600 13px/1.2 var(--sans);color:#fff}
.sp-est{color:#FBBC04;letter-spacing:2px;font-size:13px;line-height:1}
.sp-nfc{position:relative;width:30px;height:30px;margin-top:2px}
.sp-nfc b{position:absolute;inset:0;border:2px solid var(--lamp);border-radius:50%;opacity:0;animation:sp-onda 2.4s ease-out infinite}
.sp-nfc b:nth-child(2){animation-delay:.8s}
.sp-nfc b:nth-child(3){animation-delay:1.6s}
@keyframes sp-onda{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.sp-dica{font:var(--t-label);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--lamp)}
.sp-cel{position:absolute;right:9%;top:38%;width:20%;aspect-ratio:9/18;border-radius:12px;border:4px solid #2a2e2a;
  background:linear-gradient(160deg,#1a1d1a,#070807);box-shadow:0 14px 30px rgba(0,0,0,.5);animation:sp-toca 3.2s ease-in-out infinite}
@keyframes sp-toca{0%,100%{transform:translate(0,0) rotate(14deg)}45%,62%{transform:translate(-30%,-12%) rotate(6deg)}}

/* cena 2: celular com o site da CT MTK, que rola no hover */
.sol-site .sol-cena{background:radial-gradient(circle at 50% 35%,rgba(var(--lamp-rgb),.13),transparent 60%),#121512}
.sol-cel{position:absolute;left:50%;top:8%;width:46%;aspect-ratio:9/19;margin-left:-23%;border-radius:24px;overflow:hidden;
  border:6px solid #1c1f1c;box-shadow:0 22px 50px rgba(0,0,0,.55);transform:rotate(-5deg);background:#000}
.sol-cel img{display:block;width:100%;height:auto}

/* cena 3: conversa no WhatsApp (mesmo fundo do vídeo) */
.sol-zap .sol-cena{background:#EFE7DE url(../img/fundo-whatsapp.svg) 0 0/300px;padding:22% 16px 0;display:flex;flex-direction:column;gap:10px}
.sol-bolha{max-width:78%;padding:9px 12px;border-radius:10px;font-size:13.5px;line-height:1.4;color:#111b21;
  box-shadow:0 1px 1px rgba(0,0,0,.12)}
.sol-bolha.eles{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.sol-bolha.nos{align-self:flex-end;background:#D9FDD3;border-top-right-radius:2px}

@media(hover:none){
  .sol-mais{grid-template-rows:1fr}
  .sol-mais>div{opacity:1}
  .sol .sol-cena{opacity:.45;filter:none;transform:none}
}
@media(max-width:1100px){
  .sols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78%,340px);overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none}
  .sols::-webkit-scrollbar{display:none}
  .sol{scroll-snap-align:start;aspect-ratio:3/4.4}
}
@media(prefers-reduced-motion:reduce){.sol *,.sol::after{transition:none!important}.sp-nfc b,.sp-cel{animation:none}}

/* ---------- clientes: cases grandes (referência: base.digital) ----------
   Foto em cima, com logo no canto e o botão que sobe no hover; nome, título
   e uma linha de texto embaixo. A foto fica num ::before para poder crescer
   no hover sem mexer na borda do card. */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.case-foto{position:relative;display:block;aspect-ratio:3/2;border-radius:20px;overflow:hidden;isolation:isolate;
  background:var(--sea);border:1px solid var(--glass-line)}
.case-foto::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--foto) var(--pos,center)/cover no-repeat;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.case-foto::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(var(--ink-rgb),.82) 0%,rgba(var(--ink-rgb),.2) 55%,rgba(var(--ink-rgb),.3) 100%);
  transition:opacity .5s}
.case-foto:hover::before{transform:scale(1.06)}
.case-logo{position:absolute;top:20px;left:20px;width:60px;height:60px;border-radius:14px;object-fit:contain;background:#fff;padding:4px}
.case-btn{position:absolute;left:24px;bottom:24px;display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border:1px solid rgba(255,255,255,.75);border-radius:10px;color:var(--text);font-weight:600;font-size:15px;
  background:rgba(var(--ink-rgb),.25);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s cubic-bezier(.2,.7,.3,1)}
.case-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.case-foto:hover .case-btn,.case-foto:focus-visible .case-btn{opacity:1;transform:none}
@media(hover:none){.case-btn{opacity:1;transform:none}}
.case-cliente{font:var(--t-label);letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
.case h3{font:var(--t-h1);letter-spacing:var(--t-h1-ls);font-size:clamp(26px,2.6vw,34px);margin-bottom:10px}
.case-desc{color:var(--muted);max-width:52ch}
.cases-extra{margin-top:44px}
.cases-extra[hidden]{display:none}
.cases-mais{margin-top:44px;text-align:center}
@media(max-width:760px){.cases{grid-template-columns:1fr;gap:40px}}
@media(prefers-reduced-motion:reduce){.case-foto::before,.case-btn{transition:none}}

/* ---------- clientes: foto de cada card ---------- */
.caso-mtk{--foto:url('../img/clientes/mtk-foto.webp')}
.caso-barrafit{--foto:url('../img/clientes/barrafit-marca.webp')}
.caso-gracie{--foto:url('../img/clientes/gracie-barra-foto.webp');--pos:center 30%}
.caso-tati{--foto:url('../img/clientes/tati-foto.webp')}

/* ---------- dúvidas: entram em ordem ----------
   A lista inteira é o gatilho (.faq.rv recebe .in do config.js); cada
   pergunta entra com um atraso pela sua posição, então aparecem e somem
   sempre de cima para baixo, nunca fora de ordem. */
.faq.rv{opacity:1;transform:none}
.faq details{opacity:0;transform:translateY(18px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.faq.in details{opacity:1;transform:none}
.faq details:nth-child(1){transition-delay:0ms}
.faq details:nth-child(2){transition-delay:70ms}
.faq details:nth-child(3){transition-delay:140ms}
.faq details:nth-child(4){transition-delay:210ms}
.faq details:nth-child(5){transition-delay:280ms}
.faq details:nth-child(6){transition-delay:350ms}
.faq details:nth-child(7){transition-delay:420ms}
@media(prefers-reduced-motion:reduce){.faq details{opacity:1;transform:none;transition:none}}

/* ---------- planos ----------
   Um cartão por vez: as abas trocam a frente e, enquanto a seção está na
   tela e ninguém clicou, passam sozinhas (a barrinha da aba mostra o tempo).
   Ao trocar, o cartão entra de lado, o ícone se mexe e os itens chegam um a
   um com o visto se desenhando. Uma luz percorre a borda e outra segue o
   mouse (--mx/--my, vida.js). */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
/* as abas são os cards ilustrados (as cenas de cada serviço, em escala
   menor); a escolhida acende, as outras ficam apagadas */
.pl-abas{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.pl-card{position:relative;isolation:isolate;overflow:hidden;height:190px;padding:0;border-radius:18px;cursor:pointer;
  text-align:left;font:inherit;color:var(--text);border:1px solid var(--glass-line);background:#121512;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.pl-card .sol-cena{zoom:.6;opacity:.5;filter:saturate(.5);transition:opacity .3s ease,filter .3s ease}
:where(.pl-card .sol-cena span){display:block}
.pl-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(var(--ink-rgb),.96) 0%,rgba(var(--ink-rgb),.5) 38%,transparent 62%)}
.pl-card-nome{position:absolute;left:14px;right:14px;bottom:13px;font:600 15px/1.25 var(--sans);text-wrap:balance;transition:color .25s ease}
.pl-card:hover{transform:translateY(-3px);border-color:rgba(var(--lamp-rgb),.4)}
.pl-card:is(:hover,[aria-selected="true"]) .sol-cena{opacity:1;filter:none}
.pl-card[aria-selected="true"]{border-color:var(--lamp);box-shadow:0 0 0 1px var(--lamp),0 14px 34px rgba(var(--lamp-rgb),.16)}
.pl-card[aria-selected="true"] .pl-card-nome{color:var(--lamp)}
/* cena do acompanhamento: o gráfico do mês subindo */
.sol-acomp .sol-cena{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(var(--lamp-rgb),.15),transparent 60%),#121512}
.sol-acomp svg{width:88%;margin-top:-18%}
.sol-acomp .l{fill:var(--lamp)}.sol-acomp .ls{stroke:var(--lamp)}
.pl-cartao{position:relative;isolation:isolate;overflow:hidden;padding:40px;min-height:360px}
/* setas dos lados: encostadas na borda do cartão; com espaço, ficam fora dele */
.pl-palco{position:relative}
.pl-seta{position:absolute;z-index:2;top:50%;display:grid;place-items:center;width:46px;height:46px;margin-top:-23px;
  border-radius:50%;border:1px solid var(--glass-line);background:rgba(18,20,18,.82);color:var(--text);cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease}
.pl-seta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pl-seta:hover{color:var(--lamp);border-color:rgba(var(--lamp-rgb),.6);background:rgba(var(--lamp-rgb),.1)}
/* metade fora do cartão, sem passar do respiro de 22px da .wrap */
.pl-volta{left:-18px}.pl-vai{right:-18px}
.pl-volta:hover{transform:translateX(-3px)}.pl-vai:hover{transform:translateX(3px)}
@media(min-width:1280px){.pl-volta{left:-74px}.pl-vai{right:-74px}}
.pl-painel{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.pl-painel[hidden]{display:none}
.pl-painel.entra{animation:pl-entra .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes pl-entra{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.pl-icone{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;margin-bottom:18px;
  background:rgba(var(--lamp-rgb),.10);border:1px solid rgba(var(--lamp-rgb),.28)}
.pl-icone svg{width:32px;height:32px;fill:none;stroke:var(--lamp);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pl-icone .ic-anda{animation:ic-anda 2.4s ease-in-out infinite}
#pl-google .ic-anda{transform-origin:24px 40px;animation-name:ic-pula}
#pl-zap .ic-anda circle{fill:var(--lamp);stroke:none;animation:ic-digita 1.2s ease-in-out infinite}
#pl-zap .ic-anda circle:nth-child(2){animation-delay:.15s}
#pl-zap .ic-anda circle:nth-child(3){animation-delay:.3s}
#pl-zap .ic-anda{animation:none}
#pl-acomp .ic-anda{stroke-dasharray:44;animation-name:ic-sobe}
@keyframes ic-anda{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ic-pula{0%,100%{transform:none}30%{transform:translateY(-4px)}55%{transform:none}}
@keyframes ic-digita{0%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@keyframes ic-sobe{0%{stroke-dashoffset:44}55%,100%{stroke-dashoffset:0}}
.pl-cabeca .plano-tipo{margin:0 0 8px}
.pl-cabeca h3{font:var(--t-h1);letter-spacing:var(--t-h1-ls);font-size:clamp(28px,3vw,40px)}
.pl-frase{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.55}
.pl-acoes{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:26px}  /* "Ver a demonstração" sempre embaixo do botão */
.pl-nota{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.pl-link{color:var(--text);font-weight:600;font-size:14px;border-bottom:1px solid rgba(var(--lamp-rgb),.6)}
.pl-link:hover{color:var(--lamp)}
button.pl-link{background:none;border:0;border-bottom:1px solid rgba(var(--lamp-rgb),.6);padding:0 0 2px;cursor:pointer;font-family:inherit}
/* "Ver a demonstração": continua texto, não botão, mas em verde, com um
   ponto que pulsa e um brilho leve no texto para chamar o clique. Para de
   pulsar quando a demonstração está aberta. */
button.pl-link[data-demo]{display:inline-flex;align-items:center;gap:10px;padding:4px 0;border:0;color:var(--lamp);font-weight:700;font-size:15px;
  text-decoration:underline;text-decoration-color:rgba(var(--lamp-rgb),.5);text-underline-offset:5px;animation:demo-brilho 2.4s ease-in-out infinite}
button.pl-link[data-demo]::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--lamp);animation:demo-pulso 1.6s ease-out infinite}
button.pl-link[data-demo]:hover{text-decoration-color:var(--lamp)}
button.pl-link[data-demo][aria-expanded="true"]{color:var(--text);animation:none}
button.pl-link[data-demo][aria-expanded="true"]::before{animation:none;background:rgba(255,255,255,.35)}
@keyframes demo-pulso{0%{box-shadow:0 0 0 0 rgba(var(--lamp-rgb),.75)}70%{box-shadow:0 0 0 10px rgba(var(--lamp-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--lamp-rgb),0)}}
@keyframes demo-brilho{0%,100%{text-shadow:none}50%{text-shadow:0 0 14px rgba(var(--lamp-rgb),.55)}}
@media (prefers-reduced-motion:reduce){button.pl-link[data-demo],button.pl-link[data-demo]::before{animation:none}}
/* demonstração aberta pelo link do painel, logo abaixo do cartão */
.demo{border-block:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.015)}
.demo:not([hidden]){animation:demo-abre .5s cubic-bezier(.2,.7,.3,1)}
@keyframes demo-abre{from{opacity:0;transform:translateY(12px)}}
.demo-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:28px}
.demo-topo .plano-tipo{margin:0}
.demo-fechar{font:600 14px/1 var(--sans);color:var(--text);cursor:pointer;padding:11px 16px;border-radius:999px;
  border:1px solid var(--glass-line);background:rgba(255,255,255,.04);transition:border-color .2s ease,color .2s ease}
.demo-fechar:hover{color:var(--lamp);border-color:rgba(var(--lamp-rgb),.5)}
#precos .est{margin-top:0}
.plano-tipo{font:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:var(--lamp)}
.pl-painel ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.pl-painel li{position:relative;padding:14px 16px 14px 44px;border-radius:14px;color:var(--text);font-size:15px;line-height:1.45;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
  transition:border-color .25s ease,background .25s ease,transform .25s ease}
.pl-painel li:hover{border-color:rgba(var(--lamp-rgb),.35);background:rgba(var(--lamp-rgb),.06);transform:translateX(4px)}
.pl-painel li::before{content:'';position:absolute;left:18px;top:1.25em;width:10px;height:6px;
  border-left:2px solid var(--lamp);border-bottom:2px solid var(--lamp);transform:rotate(-45deg)}
.pl-painel.entra li{animation:pl-item .45s cubic-bezier(.2,.7,.3,1) both}
.pl-painel.entra li::before{animation:pl-visto .35s cubic-bezier(.3,1.6,.5,1) both}
.pl-painel.entra li:nth-child(1),.pl-painel.entra li:nth-child(1)::before{animation-delay:.15s}
.pl-painel.entra li:nth-child(2),.pl-painel.entra li:nth-child(2)::before{animation-delay:.25s}
.pl-painel.entra li:nth-child(3),.pl-painel.entra li:nth-child(3)::before{animation-delay:.35s}
.pl-painel.entra li:nth-child(4),.pl-painel.entra li:nth-child(4)::before{animation-delay:.45s}
.pl-painel.entra li:nth-child(5),.pl-painel.entra li:nth-child(5)::before{animation-delay:.55s}
.pl-painel.entra li:nth-child(6),.pl-painel.entra li:nth-child(6)::before{animation-delay:.65s}
@keyframes pl-item{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pl-visto{from{transform:rotate(-45deg) scale(0)}to{transform:rotate(-45deg) scale(1)}}
/* Luz que percorre a borda do cartão */
.plano-borda{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ang),transparent 0 62%,rgba(var(--lamp-rgb),.9) 76%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:borda 6s linear infinite}
@keyframes borda{to{--ang:360deg}}
/* Luz que segue o mouse dentro do cartão */
.plano-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;transition:opacity .4s ease;
  background:radial-gradient(520px circle at var(--mx,80%) var(--my,0%),rgba(var(--lamp-rgb),.10),transparent 60%)}
.pl-cartao:hover .plano-luz{opacity:1}
.pl-preco{margin-top:10px;font:var(--t-h1);font-size:clamp(26px,2.4vw,32px);color:var(--lamp)}
.pl-preco small{font:500 15px/1 var(--sans);color:var(--muted)}
/* Monte a estrutura: dois andares de cartões marcáveis. Em cima os
   serviços pagos uma vez, como produto de loja (ilustração, nome, preço);
   embaixo as mensalidades, mais discretas até serem escolhidas. O resumo
   ao lado soma os dois separados, com o desconto por quantidade, e o
   desconto pisca quando muda (vida.js). */
.est{margin-top:64px}
.est-head h3{font:var(--t-h1);letter-spacing:var(--t-h1-ls);font-size:clamp(28px,3vw,40px)}
.est-head h3 em{font-style:italic;color:var(--lamp)}
.est-head p{margin-top:8px;color:var(--muted);font-size:16px}
.est-corpo{display:grid;grid-template-columns:1fr minmax(280px,310px);gap:24px;margin-top:26px;align-items:start}
.est-andares{display:grid;gap:30px;min-width:0}
.est-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.est-grade-mais{grid-template-columns:1fr}
/* ilustração do serviço, como foto de produto */
.est-foto{display:block;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(var(--lamp-rgb),.14),transparent 70%),rgba(255,255,255,.025)}
.est-foto svg{display:block;width:100%;height:100%;transition:transform .45s cubic-bezier(.2,.7,.3,1),filter .3s ease}
.est-foto .l{fill:var(--lamp)}.est-foto .ls{stroke:var(--lamp)}
.est-item:hover .est-foto svg{transform:scale(1.05)}
.est-info{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;flex:1;min-width:0}
.est-item.est-prod,.est-item.est-mais{padding:0;overflow:hidden;gap:0}
.est-item.est-prod{display:flex;flex-direction:column}
.est-prod .est-foto svg{box-sizing:border-box;padding:12px 8px 8px}
.est-prod .est-foto{aspect-ratio:16/10;border-bottom:1px solid rgba(255,255,255,.06)}
.est-prod .est-valor{margin-top:auto;font:var(--t-h1);font-size:24px;font-weight:400}
.est-prod .est-valor small{display:block;margin-top:4px;font:500 12px/1.2 var(--sans);color:var(--muted)}
.est-prod .est-info{padding:14px 14px 16px}
.est-prod .est-check,.est-mais .est-check{position:absolute;top:12px;right:12px;background:rgba(10,11,10,.55)}
.est-item.est-mais{grid-template-columns:116px 1fr;align-items:stretch}
.est-mais .est-foto{border-right:1px solid rgba(255,255,255,.06)}
.est-mais .est-info{padding-right:44px}
/* mensalidades apagadas até serem escolhidas */
.est-mais:not(:has(input:checked)){opacity:.7}
.est-mais:not(:has(input:checked)) .est-foto svg{filter:grayscale(.8)}
.est-mais:not(:has(input:checked)):hover{opacity:1}
/* a configuração do WhatsApp só aparece com o chatbot marcado */
.est-nome .est-junto{display:none;color:var(--lamp)!important;font-weight:600!important}
.est-item:has(input:checked) .est-nome .est-junto{display:block}
.est-col{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}
.est-col legend{padding:0;margin-bottom:12px}
.est-obs{margin:-6px 0 4px;color:var(--muted);font-size:13px;line-height:1.4}
.est-item{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;cursor:pointer;
  padding:16px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  transition:border-color .25s ease,background .25s ease,transform .25s cubic-bezier(.2,.7,.3,1)}
.est-item:hover{transform:translateY(-2px);border-color:rgba(var(--lamp-rgb),.35)}
.est-item input{position:absolute;opacity:0;pointer-events:none}
.est-item:has(input:checked){background:rgba(var(--lamp-rgb),.08);border-color:rgba(var(--lamp-rgb),.55)}
.est-item:has(input:focus-visible){outline:2px solid var(--lamp);outline-offset:2px}
.est-check{width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;
  transition:background .2s ease,border-color .2s ease}
.est-check::after{content:'';width:9px;height:5px;border-left:2px solid #0A0B0A;border-bottom:2px solid #0A0B0A;
  transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.est-item input:checked~.est-check{background:var(--lamp);border-color:var(--lamp)}
.est-item input:checked~.est-check::after{transform:rotate(-45deg) scale(1)}
.est-nome{font-size:15px;font-weight:600;color:var(--text);line-height:1.3}
.est-nome small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.est-valor{font-size:15px;color:var(--muted);white-space:nowrap}
.est-valor small{font-size:12px}
.est-item:has(input:checked) .est-valor{color:var(--text)}
.est-resumo{position:sticky;top:100px;isolation:isolate;padding:26px;display:flex;flex-direction:column}
.est-resumo .plano-tipo{margin-bottom:14px}
.est-linha{display:grid;grid-template-columns:1fr auto;grid-template-areas:"rot de" "total off";align-items:baseline;
  gap:2px 10px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}
.est-rot{grid-area:rot;color:var(--text);font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.est-rot small{display:block;margin-top:3px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);font-size:12px}
.est-linha.est-mes{border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.est-mes .est-total:not(.vazio){color:var(--text)}
/* acompanhamento bloqueado até ter Perfil ou Site */
.est-item:has(input:disabled),.est-mais:has(input:disabled):hover{opacity:.45;cursor:not-allowed}
.est-item:has(input:disabled):hover{transform:none;border-color:rgba(255,255,255,.08)}
.pl-painel li b{color:var(--lamp);font-weight:600}
.est-de{grid-area:de;justify-self:end;color:var(--muted);font-size:13px}
.est-total{grid-area:total;white-space:nowrap;font-variant-numeric:tabular-nums;font:var(--t-h1);font-size:clamp(28px,2.6vw,36px);color:var(--text);font-weight:400}
.est-linha:first-of-type .est-total{color:var(--lamp)}
.est-total small{font:500 14px/1 var(--sans);color:var(--muted)}
.est-total.vazio{font:500 15px/1.4 var(--sans);color:var(--muted)}
.est-off{grid-area:off;justify-self:end;font-style:normal;font:700 12px/1 var(--sans);color:#0A0B0A;background:var(--lamp);
  padding:5px 9px;border-radius:999px}
.est-off:empty{display:none}
.est-off.pisca{animation:est-pisca .6s cubic-bezier(.3,1.6,.5,1)}
.est-total.troca,.est-soma b.troca{animation:est-troca .35s ease-out}
@keyframes est-troca{from{opacity:.25}to{opacity:1}}
@keyframes est-pisca{0%{transform:scale(.6)}100%{transform:scale(1)}}
.est-soma{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;margin-top:4px;padding:16px 18px;
  border-radius:14px;background:rgba(var(--lamp-rgb),.10);border:1px solid rgba(var(--lamp-rgb),.35)}
.est-soma{grid-template-areas:"rot val" "obs val"}
.est-soma .est-rot{grid-area:rot;color:var(--text)}
.est-soma b{grid-area:val;white-space:nowrap;font-variant-numeric:tabular-nums;font:var(--t-h1);font-size:clamp(30px,2.8vw,40px);font-weight:400;color:var(--lamp)}
.est-soma-obs{grid-area:obs;color:var(--muted);font-size:12px}
.est-eco{margin-top:12px;color:var(--lamp);font-weight:700;font-size:14px;min-height:1.4em}
.est-dica{margin:4px 0 18px;color:var(--muted);font-size:13px;line-height:1.45;min-height:2.9em}
.est-resumo .btn{margin-top:auto;justify-content:center;text-align:center}
.est-resumo .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
@media(max-width:1060px){
  .est-corpo{grid-template-columns:1fr}
  .est-grade{grid-template-columns:repeat(2,1fr)}
  .est-resumo{position:relative;top:auto}
}
/* no celular os serviços também ficam deitados: ilustração à esquerda */
@media(max-width:640px){
  .est-grade{grid-template-columns:1fr}
  .est-item.est-prod{display:grid;grid-template-columns:116px 1fr;align-items:stretch}
  .est-prod .est-foto{aspect-ratio:auto;border-bottom:0;border-right:1px solid rgba(255,255,255,.06)}
  .est-prod .est-info{padding-right:44px}
  .est-prod .est-valor{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.est-off.pisca,.est-total.troca,.est-soma b.troca{animation:none}.est-item,.est-check::after{transition:none}}
.planos-nota{max-width:860px;margin:32px auto 0;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 22px 20px 26px;border:1px solid rgba(var(--lamp-rgb),.35);border-radius:18px;background:rgba(var(--lamp-rgb),.06)}
.planos-nota p{margin:0;color:var(--muted);font-size:15.5px}
.planos-nota strong{color:var(--text);font-weight:600}
.planos-nota .btn{flex:none;border-color:rgba(var(--lamp-rgb),.55)}
@media (max-width:640px){
  .planos-nota{flex-direction:column;text-align:center;padding:20px}
  .planos-nota .btn{width:100%}
}
@media(max-width:860px){
  .pl-abas{display:flex;overflow-x:auto;margin:0 -16px 16px;padding:4px 16px 6px;scrollbar-width:none}
  .pl-abas::-webkit-scrollbar{display:none}
  .pl-card{flex:none;width:150px;height:160px}
  .pl-card-nome{font-size:14px}
  .pl-cartao{padding:26px 22px;min-height:0}
  /* no celular as setas ficam embaixo do cartão, lado a lado */
  .pl-palco{padding-bottom:62px}
  .pl-seta{top:auto;bottom:0;margin-top:0}
  .pl-volta{left:calc(50% - 54px)}.pl-vai{right:calc(50% - 54px)}
  .pl-painel{grid-template-columns:1fr;gap:24px}
  .pl-acoes{order:3}
}
@media(prefers-reduced-motion:reduce){
  .pl-painel.entra,.pl-painel.entra li,.pl-painel.entra li::before,.pl-icone .ic-anda,
  #pl-zap .ic-anda circle,.plano-borda{animation:none}
}

/* ---------- formulário do fim ---------- */
.form-diag{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;max-width:820px;margin:0 auto;text-align:left}
.form-diag label{display:grid;gap:7px;font:600 13px/1.2 var(--sans);color:var(--text)}
.form-diag input{font:400 15px/1.3 var(--sans);color:var(--text);padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid var(--glass-line);outline:none;
  transition:border-color .2s ease,background .2s ease}
.form-diag input::placeholder{color:rgba(255,255,255,.35)}
.form-diag input:focus{border-color:rgba(var(--lamp-rgb),.7);background:rgba(255,255,255,.09)}
.form-diag input[aria-invalid="true"]{border-color:var(--alert)}
.form-diag .btn{grid-column:1/-1;justify-self:center;margin-top:10px}
.final .form-diag p{margin:0 auto;text-align:center;grid-column:1/-1;font-size:13px}
.form-erro{color:var(--alert)!important}
.form-erro:empty{display:none}
@media(max-width:760px){.form-diag{grid-template-columns:1fr}}

/* ---------- menos movimento: mostra tudo pronto, sem rolagem presa ---------- */
@media(prefers-reduced-motion:reduce){
  .vida{height:auto}
  .vida-palco{position:static;height:auto;padding:96px 0}
  .vida{height:auto}
  .vida-passos{gap:26px}
  .vida-passo{grid-area:auto;opacity:1;transform:none}
  .vida-passo[data-p="0"]{display:none}
  .port-tela img{animation:none}
}

/* ---------- botão de WhatsApp no fim de cada parte ----------
   Mesmo botão de "Ver o portfólio" (btn-ghost), com o ícone do WhatsApp em verde. */
.wa-btn svg{width:18px;height:18px;flex:none;fill:var(--lamp)}
.vida-textos .wa-btn{margin-top:24px}
.wa-fim{text-align:center;margin:34px 0 0}

/* ---------- atendimento no WhatsApp (BLOCO 05a) ----------
   Usa o palco, os textos, os capítulos e o celular da seção do perfil (vida-*).
   Aqui fica só o que é desta seção: a conversa, as agendas e a tela de bloqueio.
   O atende.js troca data-passo, data-cena (o que o celular mostra), data-ate
   (quantas mensagens já apareceram) e data-dig (o "digitando…"). */
.at-nota{margin-top:18px;font-size:13px;color:var(--muted);max-width:46ch}

/* Selo em cima do celular: de quem é o celular na cena */
.at-selo .s-aluno{background:#123826;color:#9FF0C2;border:1px solid rgba(37,211,102,.4)}
.at-selo .s-academia{background:var(--grad);color:var(--ink);box-shadow:0 10px 26px -10px rgba(var(--warm-rgb),.8);
  opacity:0;transform:translateY(8px) scale(.9)}
.atende[data-cena="academia"] .at-selo .s-aluno{opacity:0;transform:translateY(-8px) scale(.9)}
.atende[data-cena="academia"] .at-selo .s-academia{opacity:1;transform:none}
/* Quinta parte, só desta seção: a academia recebe a aula no fim do vídeo */
.atende[data-passo="4"] .vida-passo[data-p="4"]{opacity:1;transform:none;pointer-events:auto}
.atende[data-passo="4"] .vida-fundo span:nth-child(5){opacity:1;transform:none}

/* A conversa */
.at-zap{position:absolute;inset:0;display:flex;flex-direction:column;
  background:#EFE7DE url(../img/fundo-whatsapp.svg) 0 0/300px}
.at-topo{background:#075E54;color:#fff;padding:36px 14px 10px;display:flex;align-items:center;gap:10px;flex:none}
.at-topo i{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none}
.at-topo p{font:600 13px/1.2 var(--sans);color:#fff;margin:0;display:grid}
.at-topo span{grid-area:2/1;font-weight:400;font-size:10.5px;color:rgba(255,255,255,.75)}
.at-digita{opacity:0}
.atende[data-dig] .at-online{opacity:0}
.atende[data-dig] .at-digita{opacity:1}
.at-janela{flex:1;overflow:hidden;position:relative}
.at-rolo{padding:12px 10px 10px;display:grid;gap:6px;align-content:start;
  transform:translateY(var(--rolo,0px));transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.at-msg{display:none;max-width:86%;margin:0;padding:6px 9px 5px;border-radius:8px;
  font:400 11.5px/1.38 var(--sans);color:#111b21;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.at-msg.on{display:block;animation:surge .35s ease both}
.at-msg b{font-weight:600}
.at-msg small{float:right;margin:6px 0 -3px 10px;font-size:9.5px;color:#667781}
.at-msg.eu{justify-self:end;background:#D9FDD3;border-top-right-radius:2px}
.at-msg.eu small::after{content:' ✓✓';color:#53bdeb;letter-spacing:-.15em}
.at-msg.eles{justify-self:start;background:#fff;border-top-left-radius:2px}
.at-msg.at-dia{justify-self:center;background:#fff;color:#54656f;font-size:10.5px;padding:4px 10px;margin:6px 0}
.at-link{color:#027eb5}
.at-nb{white-space:nowrap}
.at-campo{flex:none;display:flex;align-items:center;gap:6px;padding:6px 8px 12px}
.at-campo span{flex:1;background:#fff;border-radius:100px;padding:9px 14px;color:#8696a0;font-size:12px}
.at-campo i{width:36px;height:36px;border-radius:50%;background:#00A884;display:grid;place-items:center;flex:none}
.at-campo svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2}

/* Telas que abrem por cima da conversa (mesmo movimento das do perfil) */
.at-ov{position:absolute;inset:0;z-index:10;opacity:0;visibility:hidden;transform:translateY(24px) scale(.98);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.3,1),visibility 0s linear .5s}
.atende[data-cena="salvar"] .at-ov-salvar,
.atende[data-cena="aluno"] .at-ov-alunocal,
.atende[data-cena="academia"] .at-ov-academia,
.atende[data-cena="bloqueio"] .at-ov-bloqueio{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* Salvar na agenda do aluno */
.at-ov-salvar{background:#fff;color:#1f1f1f;padding:40px 18px 0}
.at-sv-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.at-x{font-size:16px;color:#444746}
.at-btn-salvar{background:#0B57D0;color:#fff;font:600 12.5px/1 var(--sans);padding:9px 18px;border-radius:100px}
.at-sv-tit{font:400 19px/1.3 var(--sans);color:#1f1f1f;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid #E3E3E3}
.at-sv-campos{list-style:none;margin:0;padding:0;display:grid;gap:16px;font-size:12.5px;line-height:1.45;color:#1f1f1f}
.at-sv-campos li{display:flex;gap:14px;align-items:flex-start}
.at-sv-campos svg{width:18px;height:18px;flex:none;fill:none;stroke:#444746;stroke-width:1.8;margin-top:1px}

/* Agenda do dia (do aluno e da academia) */
.at-cal{background:#fff;color:#1f1f1f;display:flex;flex-direction:column}
.at-cal-topo{padding:40px 16px 8px;border-bottom:1px solid #E3E3E3}
.at-cal-quem{margin:0 0 10px;font:600 13px/1.2 var(--sans);color:#444746}
.at-cal-dia{margin:0;display:grid;justify-items:start;font-size:11px;color:#0B57D0;font-weight:600;width:max-content;text-align:center}
.at-cal-dia b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0B57D0;color:#fff;
  font:500 18px/1 var(--sans);margin-bottom:3px;justify-self:center}
.at-horas{position:relative;padding:6px 12px 0 54px}
.at-horas p{margin:0;height:52px;border-top:1px solid #EDEDED;position:relative}
.at-horas p span{position:absolute;left:-44px;top:-7px;font-size:10px;color:#70757a}
.at-evento{position:absolute;left:58px;right:14px;top:59px;height:50px;overflow:hidden;border-radius:6px;padding:5px 8px;
  background:#039BE5;color:#fff;font:600 11px/1.25 var(--sans);box-shadow:0 4px 12px -4px rgba(3,155,229,.6)}
.at-evento small{display:block;font-weight:400;font-size:10.5px;opacity:.9}
.atende:is([data-cena="aluno"],[data-cena="academia"]) .at-evento{animation:pula .5s cubic-bezier(.3,1.5,.5,1) .35s both}
@keyframes pula{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.at-ov-academia .at-evento{background:#0B8043;box-shadow:0 4px 12px -4px rgba(11,128,67,.6)}
.at-toast{position:absolute;left:0;right:0;bottom:26px;width:max-content;margin:0 auto;white-space:nowrap;
  background:#303030;color:#fff;font-size:12px;padding:9px 16px;border-radius:8px}
.atende[data-cena="aluno"] .at-toast{animation:surge .4s ease .2s both}

/* Avisos (do dono, na agenda da academia, e o lembrete na tela de bloqueio) */
.at-notif{position:absolute;left:8px;right:8px;top:30px;display:flex;gap:10px;align-items:flex-start;
  padding:10px 12px;border-radius:16px;background:rgba(246,246,246,.97);color:#1f1f1f;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.35);font-size:11.5px;line-height:1.4}
.at-notif i{width:28px;height:28px;border-radius:8px;background:#25D366;display:grid;place-items:center;flex:none}
.at-notif svg{width:17px;height:17px;fill:#fff}
.at-notif p{margin:0;color:#1f1f1f}
.at-ov-academia .at-notif{top:auto;bottom:18px}
.at-notif p>span:not(.at-nb){float:right;color:#70757a;font-size:10px}
.atende[data-cena="academia"] .at-ov-academia .at-notif{animation:sobe .5s cubic-bezier(.2,.7,.3,1) .6s both}
@keyframes sobe{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes desce{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}

/* Tela de bloqueio */
.at-ov-bloqueio{background:radial-gradient(circle at 30% 20%,#2f5a43,transparent 60%),linear-gradient(160deg,#173326,#070b09);
  color:#fff;text-align:center;padding-top:70px}
.at-hora{margin:0;color:#fff;font:200 64px/1 var(--sans);letter-spacing:-.02em}
.at-data{margin:8px 0 0;font-size:13px;color:rgba(255,255,255,.85)}
.at-notif-bloq{top:190px;text-align:left;background:rgba(255,255,255,.88)}
.atende[data-cena="bloqueio"] .at-notif-bloq{animation:desce .5s cubic-bezier(.2,.7,.3,1) .35s both}

/* Barrinha: nas telas escuras ou com topo verde, fica branca */
.atende:is([data-cena="chat"],[data-cena="bloqueio"]) .vida-progresso i{background:rgba(255,255,255,.22)}
.atende:is([data-cena="chat"],[data-cena="bloqueio"]) .vida-progresso i::after{background:#fff}
@media(prefers-reduced-motion:reduce){.atende .vida-passo[data-p="0"]{display:block}}
/* celular: fica depois das regras de cima, que valem para todas as telas */
@media(max-width:900px){
  .vida-textos .wa-btn{margin-top:22px}
  .at-nota{margin-top:14px;font-size:12px}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.vida-palco{padding:44px 0 56px}}