/* ===================================================================== Hormones Mentoring Essentials — sistema visual Neon verde · luz em movimento · paleta por dobra ===================================================================== */ /* ---------- tokens fixos ---------- */ :root{ --maxw:1140px; --gutter:24px; --dur-theme:.85s; --ease:cubic-bezier(.22,.68,.16,1); /* escala reduzida — o cliente achou a anterior grande demais */ --step--2:clamp(13px,.82rem + .05vw,14px); --step--1:clamp(15px,.92rem + .08vw,16px); --step-0:clamp(17px,1.02rem + .12vw,18px); --step-1:clamp(17px,.95rem + .3vw,19px); --step-2:clamp(21px,1.05rem + .8vw,27px); --step-3:clamp(25px,1.2rem + 1.5vw,36px); --step-4:clamp(30px,1.4rem + 2.4vw,50px); --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:32px; --sp-5:48px; --sp-6:72px; --sp-7:106px; } /* ===================================================================== PALETAS Trocadas via data-palette no . Cada uma define também o --glow (cor da luz da dobra) e o --wash (luz de cima) / --shade (sombra). ===================================================================== */ html[data-palette="ink"]{ --bg:#04120b; --bg-2:#08190f; --bg-3:#0c2416; --fg:#eef3ea; --fg-dim:#9fb0a4; --accent:#d8a73a; --accent-hi:#f6d77b; --neon:#3fdc7b; --neon-hi:#8affbd; --glow:rgba(63,220,123,.55); --line:rgba(63,220,123,.2); --card:rgba(63,220,123,.045); --wash:rgba(63,220,123,.09); --shade:rgba(0,0,0,.55); } html[data-palette="forest"]{ --bg:#08251a; --bg-2:#0b2f20; --bg-3:#0f3a28; --fg:#eef7ef; --fg-dim:#a9c4b1; --accent:#d8a73a; --accent-hi:#f6d77b; --neon:#4dff96; --neon-hi:#b6ffd6; --glow:rgba(77,255,150,.6); --line:rgba(77,255,150,.24); --card:rgba(77,255,150,.06); --wash:rgba(77,255,150,.12); --shade:rgba(0,0,0,.5); } html[data-palette="obsidian"]{ --bg:#010603; --bg-2:#050e08; --bg-3:#0a170f; --fg:#f0f5ef; --fg-dim:#9aa89d; --accent:#e8bd4e; --accent-hi:#ffe9a8; --neon:#3fdc7b; --neon-hi:#9dffc6; --glow:rgba(63,220,123,.5); --line:rgba(63,220,123,.22); --card:rgba(255,255,255,.03); --wash:rgba(63,220,123,.08); --shade:rgba(0,0,0,.8); } /* Elite — amarelo e marrom */ html[data-palette="amber"]{ --bg:#15100a; --bg-2:#1e1509; --bg-3:#2a1d0c; --fg:#f8ecd0; --fg-dim:#c3ab84; --accent:#f2c14e; --accent-hi:#ffe9a8; --neon:#f2c14e; --neon-hi:#ffe9a8; --glow:rgba(242,193,78,.55); --line:rgba(242,193,78,.26); --card:rgba(242,193,78,.055); --wash:rgba(242,193,78,.12); --shade:rgba(20,10,0,.7); } /* dobra clara — trabalhada com luz e sombra, não com chapado */ html[data-palette="bone"]{ --bg:#efe9db; --bg-2:#e7dfcd; --bg-3:#ddd3bc; --fg:#0a1c14; --fg-dim:#54635a; --accent:#7d5f16; --accent-hi:#9c7a20; /* dobra clara não tem neon: os tokens de luz viram neutro escuro e marrom-dourado, então nada verde aparece aqui */ --neon:#4a5750; --neon-hi:#7d5f16; --glow:rgba(125,95,22,.16); --line:rgba(10,28,20,.15); --card:rgba(255,255,255,.55); --wash:rgba(255,255,255,.55); --shade:rgba(66,58,38,.14); } /* ---------- reset ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} img{max-width:100%;display:block} a{color:inherit} button{font:inherit} /* a troca de dobra: só props de cor na transição global */ *,*::before,*::after{ transition:background-color var(--dur-theme) var(--ease), color var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease), box-shadow var(--dur-theme) var(--ease), text-shadow var(--dur-theme) var(--ease); } body{ background:var(--bg); color:var(--fg); font-family:'Jost',system-ui,sans-serif; font-weight:300; font-size:var(--step-0); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:clip; } h1,h2,h3,.display{ font-family:'Sora',system-ui,sans-serif;font-weight:600; letter-spacing:-.01em;line-height:1.2; } .script{font-family:'Allura',cursive;font-weight:400} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2} .h2{font-size:var(--step-3);color:var(--fg)} .lead{font-size:var(--step-1);color:var(--fg-dim);max-width:64ch;font-weight:300} .center{text-align:center} .center .lead{margin-left:auto;margin-right:auto} .section-head{margin-bottom:var(--sp-6)} .eyebrow{ font-family:'Sora',sans-serif;font-weight:400;font-size:var(--step--2); letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-2); } .eyebrow.green{ color:var(--neon); text-shadow:0 0 12px var(--glow); } /* ===================================================================== LUZ NAS DOBRAS — opt-in, nunca em todas A luz é um facho que morre bem antes das bordas da seção. Se ela tocasse a borda, apareceria a costura entre uma dobra e a seguinte. Só entra onde tem função: dobra clara, oferta e CTA final. ===================================================================== */ section{padding:var(--sp-7) 0;position:relative;background:var(--bg);isolation:isolate} section[data-lit]::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(62% 42% at 50% 34%,var(--wash),transparent 70%); /* a máscara zera a luz nas duas pontas da seção. Sem ela, a borda do overlay aparece como um corte horizontal de tom. */ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%); } section[data-lit="bone"]::before{ /* na dobra clara: luz difusa em cima, sombra fechando embaixo — o volume que substitui o bege chapado, sem nenhuma aresta visível */ background: radial-gradient(58% 40% at 50% 28%,var(--wash),transparent 70%), radial-gradient(76% 32% at 50% 78%,var(--shade),transparent 74%); } /* ===================================================================== NEON — utilitários ===================================================================== */ /* Texto em neon LEGÍVEL: o contorno escuro é desenhado ATRÁS do preenchimento (paint-order), então ele separa a letra do halo em vez de engordar a fonte. É o que devolve a leitura sem matar a luz. */ .neon,.final em,.preco .por{ paint-order:stroke fill; -webkit-text-stroke:.055em color-mix(in srgb,var(--bg) 82%,#000); } .neon{ color:var(--neon-hi); text-shadow: 0 0 10px color-mix(in srgb,var(--glow) 60%,transparent), 0 0 30px color-mix(in srgb,var(--glow) 32%,transparent); } .neon-soft{color:var(--neon);text-shadow:0 0 10px color-mix(in srgb,var(--glow) 55%,transparent)} /* tubo de neon: contorno fino e claro, halo contido */ .neon-box{ --stroke:color-mix(in srgb,var(--neon-hi) 62%,transparent); box-shadow: inset 0 0 0 1px var(--stroke), inset 0 0 40px -22px var(--glow), 0 0 18px -6px var(--glow), 0 0 60px -26px var(--glow); } /* filete de neon horizontal */ .neon-rule{ height:1px;border:0;background:var(--neon); box-shadow:0 0 8px var(--glow),0 0 24px var(--glow); opacity:.85; } /* ===================================================================== WORDMARK (substitui as imagens de logo) ===================================================================== */ .wordmark{text-align:center;line-height:1} /* logo oficial */ .logo-hero{ width:min(560px,82vw);height:auto;margin:0 auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.55)) drop-shadow(0 0 34px color-mix(in srgb,var(--glow) 40%,transparent)); } .logo-foot{width:190px;height:auto;margin:0 auto 14px;opacity:.85} /* a logo Elite é mais larga e mais clara: halo âmbar e escala própria */ .logo-elite{ width:min(500px,80vw); filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)) drop-shadow(0 0 34px color-mix(in srgb,var(--glow) 45%,transparent)); } .wm-main{ display:block;font-family:'Sora',sans-serif;font-weight:300; font-size:clamp(20px,4.4vw,40px);letter-spacing:.24em;text-transform:uppercase; background:linear-gradient(100deg,#b98a25,#f6d77b 48%,#c99a2e); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 18px rgba(216,167,58,.35)); } .wm-main b{font-weight:600} .wm-script{ display:block;font-family:'Allura',cursive; font-size:clamp(46px,10vw,96px);line-height:.9;margin-top:-.08em; color:var(--neon-hi); text-shadow: 0 0 3px #fff, 0 0 8px var(--neon-hi), 0 0 22px var(--glow), 0 0 48px var(--glow), 0 0 96px var(--glow); } .wm-flank{ display:flex;align-items:center;gap:18px;justify-content:center;margin-top:14px; } .wm-flank .neon-rule{flex:1;max-width:130px} .wm-flank span{ font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.34em; text-transform:uppercase;color:var(--fg-dim); } /* ===================================================================== BOTÕES — luz em movimento ===================================================================== */ .btn{ position:relative;display:inline-block;text-decoration:none; font-family:'Sora',sans-serif;font-weight:600;letter-spacing:.12em; text-transform:uppercase;font-size:var(--step--1); padding:17px 34px;border-radius:2px;text-align:center;min-height:44px;cursor:pointer; transition:transform .3s var(--ease),box-shadow .35s var(--ease), background-color var(--dur-theme) var(--ease),color var(--dur-theme) var(--ease); } /* dourado: brilho líquido varrendo a superfície */ .btn-gold{ color:#1a1301; background-image: linear-gradient(112deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%), linear-gradient(135deg,#a97c1f,#f6d77b 52%,#c1922a); background-size:260% 100%,100% 100%; background-position:210% 0,0 0; background-repeat:no-repeat; box-shadow:0 0 0 1px rgba(246,215,123,.55),0 10px 34px -8px rgba(216,167,58,.5); animation:sheen 5s cubic-bezier(.4,0,.2,1) infinite; } .btn-gold:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(246,215,123,.95),0 16px 46px -8px rgba(216,167,58,.7)} /* neon: luz difusa passeando atrás (sem raio girando) + pulso do tubo */ .btn-neon{ background:transparent;color:var(--neon-hi); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--neon) 75%,transparent), 0 0 20px -10px var(--glow); animation:tube 4.6s ease-in-out infinite; z-index:0; } .btn-neon::before{ content:"";position:absolute;inset:-40% -16%;z-index:-1;pointer-events:none; background: radial-gradient(42% 58% at 32% 50%,color-mix(in srgb,var(--glow) 62%,transparent),transparent 70%), radial-gradient(34% 48% at 70% 50%,color-mix(in srgb,var(--glow) 45%,transparent),transparent 72%); filter:blur(28px);opacity:.4; animation:drift 9s ease-in-out infinite alternate; } .btn-neon:hover{transform:translateY(-2px);background:rgba(77,255,150,.07)} .btn-lg{font-size:var(--step-0);padding:22px 42px;letter-spacing:.14em} .btn-note{display:block;margin-top:12px;font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim)} .cta-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:var(--sp-4)} @keyframes sheen{ 0%{background-position:210% 0,0 0} 58%,100%{background-position:-90% 0,0 0} } @keyframes drift{ 0%{transform:translate3d(-7%,-3%,0) scale(1)} 100%{transform:translate3d(7%,3%,0) scale(1.09)} } @keyframes tube{ 0%,100%{box-shadow:inset 0 0 0 1px var(--neon),0 0 20px -6px var(--glow)} 50%{box-shadow:inset 0 0 0 1px var(--neon-hi),0 0 34px -4px var(--glow),0 0 60px -12px var(--glow)} } /* ===================================================================== CTA FLUTUANTE — canto inferior direito A borda é um conic-gradient girando ATRÁS do painel: o miolo opaco cobre o centro e sobra só o anel de 1,5px, que é a luz correndo. (Aqui o conic pode: ele fica confinado ao anel, não vira raio solto.) ===================================================================== */ .float-cta{ position:fixed;right:18px;bottom:18px;z-index:70; padding:1.5px;border-radius:5px;overflow:hidden; width:min(268px,calc(100vw - 36px)); opacity:0;transform:translateY(150%);pointer-events:none; transition:opacity .55s var(--ease),transform .7s var(--ease); filter:drop-shadow(0 0 26px color-mix(in srgb,var(--glow) 45%,transparent)) drop-shadow(0 20px 40px rgba(0,0,0,.55)); } .float-cta.is-in{opacity:1;transform:none;pointer-events:auto} .float-cta::before{ content:"";position:absolute;inset:-45%; background:conic-gradient(from 0deg, transparent 0 58%, color-mix(in srgb,var(--neon) 55%,transparent) 70%, var(--neon-hi) 80%, color-mix(in srgb,var(--neon) 55%,transparent) 88%, transparent 98%); animation:orbit 4.5s linear infinite; } .fc-inner{ position:relative;border-radius:4px;padding:20px 22px 22px;text-align:center; background:linear-gradient(158deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 50%,transparent), color-mix(in srgb,var(--bg) 88%,#000); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } .fc-tag{ display:block;font-family:'Sora',sans-serif;font-size:11px; letter-spacing:.3em;text-transform:uppercase;color:var(--neon-hi); text-shadow:0 0 12px var(--glow);margin-bottom:8px; } .fc-title{ display:block;font-family:'Sora',sans-serif;font-weight:600; font-size:var(--step-1);letter-spacing:.06em;text-transform:uppercase; color:var(--fg);margin-bottom:16px;line-height:1.2; } .fc-btn{display:block;width:100%;padding:15px 18px;font-size:12px;letter-spacing:.14em} @keyframes orbit{to{transform:rotate(1turn)}} @media(max-width:560px){ .float-cta{right:12px;left:12px;bottom:12px;width:auto} .fc-inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;text-align:left;padding:14px 16px} .fc-tag{margin-bottom:2px} .fc-title{margin-bottom:0;font-size:var(--step-0)} .fc-btn{grid-column:2;grid-row:1 / span 2;width:auto;padding:14px 18px} } @media (prefers-reduced-motion: reduce){ .float-cta::before{animation:none;background:var(--neon)} } /* ===================================================================== HERO ===================================================================== */ .hero{ min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center; padding:120px var(--gutter) var(--sp-7);position:relative;isolation:isolate; background:var(--bg); } /* vídeo de fundo do hero: leve, dessaturado (o verde vem da paleta, não do arquivo) e sem cor própria brigando com o neon. A névoa do shader continua por cima. */ .bg-video{ position:absolute;inset:0;z-index:0;width:100%;height:100%; object-fit:cover;object-position:center top;pointer-events:none; opacity:.7; filter:saturate(1) brightness(.9) contrast(1.08); mix-blend-mode:screen; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%); } /* movimento reduzido: o vídeo não toca, mas continua no ar como imagem (o poster). Escondê-lo tirava a textura inteira do hero. */ @media (prefers-reduced-motion: reduce){ .bg-video{opacity:.5;filter:saturate(.9) brightness(.85)} } .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(50% 38% at 50% 30%,rgba(77,255,150,.13),transparent 70%), radial-gradient(58% 40% at 50% 88%,rgba(216,167,58,.13),transparent 72%); /* zera a luz na saída do hero — senão a borda do overlay vira uma linha de tom contra a dobra seguinte */ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%); } .hero-inner{max-width:900px;margin:0 auto;position:relative;z-index:2} .hero .wordmark{margin-bottom:var(--sp-5)} .tag{ display:inline-block;font-family:'Sora',sans-serif;font-size:var(--step--2); letter-spacing:.26em;text-transform:uppercase;color:var(--neon-hi); padding:8px 16px;border-radius:2px;margin-bottom:var(--sp-3); box-shadow:inset 0 0 0 1px var(--neon),0 0 22px -8px var(--glow); } .hero h1{font-size:var(--step-4);max-width:22ch;margin:0 auto;font-weight:600} .hero .sub{margin:var(--sp-3) auto 0;max-width:58ch;color:var(--fg-dim);font-size:var(--step-1)} .scroll-hint{margin-top:var(--sp-5);font-size:var(--step--2);letter-spacing:.32em;text-transform:uppercase;color:var(--fg-dim)} .scroll-hint::after{ content:"";display:block;width:1px;height:44px;margin:12px auto 0; background:linear-gradient(180deg,var(--neon),transparent); box-shadow:0 0 10px var(--glow); } /* ===================================================================== DOR ===================================================================== */ .dor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px} .dor-card{ background:var(--card);padding:28px 24px;border-radius:3px; box-shadow:inset 1px 0 0 var(--neon),inset 0 0 60px -40px var(--glow); } .dor-card p{font-style:italic;font-size:var(--step-1);color:var(--fg);font-weight:300} .dor-close{ margin-top:var(--sp-5);text-align:center;font-size:var(--step-2); font-family:'Sora',sans-serif;font-weight:400;line-height:1.5;color:var(--fg); } .dor-close b{font-weight:600} /* ===================================================================== PILARES ===================================================================== */ .pil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--line)} .pil{background:var(--bg);padding:34px 26px;position:relative} .pil .n{ font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.28em; text-transform:uppercase;color:var(--neon);margin-bottom:12px;text-shadow:0 0 12px var(--glow); } .pil h3{font-size:var(--step-1);margin-bottom:10px} .pil p{color:var(--fg-dim);font-size:var(--step--1);line-height:1.72} /* ===================================================================== ACCORDIONS (currículo + FAQ) ===================================================================== */ .mod{border-bottom:1px solid var(--line)} .mod summary{display:flex;align-items:center;gap:16px;padding:21px 4px;cursor:pointer;list-style:none;min-height:44px} .mod summary::-webkit-details-marker{display:none} .mod .mnum{ font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.22em; text-transform:uppercase;color:var(--accent);flex:0 0 78px; } .mod .mtitle{font-family:'Sora',sans-serif;font-weight:500;font-size:var(--step-1);flex:1} .mod .chev{font-size:22px;color:var(--neon);transition:transform .3s var(--ease);text-shadow:0 0 10px var(--glow)} .mod[open] .chev{transform:rotate(90deg)} .mod[open] .mtitle{color:var(--fg)} .aulas{padding:0 4px 24px 78px;color:var(--fg-dim);font-size:var(--step--1)} .aulas li{list-style:none;padding:8px 0 8px 20px;position:relative;border-top:1px solid var(--line)} .aulas li::before{ content:"";position:absolute;left:0;top:18px;width:7px;height:7px;border-radius:50%; background:var(--neon);box-shadow:0 0 8px var(--glow); } .mod.heart{background:var(--card)} .mod.heart .mtitle{color:var(--neon-hi);text-shadow:0 0 14px var(--glow)} @media(max-width:640px){ .mod .mnum{flex-basis:100%;margin-bottom:-6px} .mod summary{flex-wrap:wrap} .aulas{padding-left:0} } /* ===================================================================== COMUNIDADE ===================================================================== */ .com-grid{display:grid;grid-template-columns:1.05fr .9fr .75fr;gap:clamp(22px,3.2vw,44px);align-items:start} .com-list{margin-top:var(--sp-3)} .com-list li{list-style:none;padding:13px 0 13px 28px;position:relative;border-bottom:1px solid var(--line);font-size:var(--step--1);color:var(--fg-dim)} .com-list li::before{ content:"";position:absolute;left:0;top:21px;width:10px;height:10px;border-radius:50%; box-shadow:inset 0 0 0 1px var(--neon),0 0 12px -2px var(--glow); } .transp{margin-top:var(--sp-3);font-style:italic;font-size:var(--step-1);color:var(--fg)} .transp a{color:var(--neon-hi);text-shadow:0 0 12px var(--glow)} /* card do meio (dobra em 3 colunas): foto em cima, texto embaixo */ .com-card{ background:var(--card);padding:28px; box-shadow:inset 0 2px 0 var(--neon),inset 0 0 80px -52px var(--glow); display:grid;grid-template-columns:1fr;gap:20px;align-items:start; } /* sem contorno: só profundidade */ .com-foto{ grid-area:1/1;width:min(180px,100%);justify-self:center;height:auto;border-radius:3px; box-shadow:0 18px 40px -26px rgba(0,0,0,.7); } /* duas versões da mesma foto: a clara entra quando a dobra vira clara */ .com-card .com-txt{grid-column:1;grid-row:2} .com-foto-clara{display:none} html[data-palette="bone"] .com-foto-escura{display:none} html[data-palette="bone"] .com-foto-clara{display:block} @media(max-width:520px){ .com-card{grid-template-columns:1fr;gap:18px} .com-foto{width:150px} } .com-card h3{font-size:var(--step-1);margin-top:2px} .com-card .role{font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.22em;text-transform:uppercase;color:var(--neon);margin:7px 0 14px} .com-card p{color:var(--fg-dim);font-size:var(--step--1)} /* currículo do Rafael — 3ª coluna da dobra; mesmo padrão do André: desktop nasce aberto e sem o botão, mobile vira sanfona fechada (regra no bloco 860px) */ .com-crm{font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:7px;line-height:1.7} .com-cv-tit{font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.22em;text-transform:uppercase;color:var(--neon);padding:6px 0 10px;border-bottom:1px solid var(--line)} .com-cv{margin-top:0} .com-cv>summary{ display:none;align-items:center;justify-content:space-between;gap:14px; cursor:pointer;list-style:none;padding:12px 4px;min-height:44px; font-family:'Sora',sans-serif;font-size:var(--step--2);font-weight:500; letter-spacing:.06em;text-transform:uppercase;color:var(--neon-hi); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .com-cv>summary::-webkit-details-marker{display:none} .com-cv[open]>summary .mx-ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .com-creds{margin-top:10px} .com-creds li{list-style:none;padding:7px 0 7px 18px;position:relative;font-size:var(--step--2);line-height:1.5;color:var(--fg-dim);border-bottom:1px solid var(--line)} .com-creds li:last-child{border-bottom:0} .com-creds li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:1px;background:var(--accent)} @media(max-width:860px){ .com-grid{grid-template-columns:1fr} /* em coluna única o card volta a ser foto ao lado do texto */ .com-card{grid-template-columns:150px 1fr} .com-foto{width:100%;justify-self:start} .com-card .com-txt{grid-column:2;grid-row:1} } /* ===================================================================== AUTORIDADE ===================================================================== */ .aut-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,5vw,58px);align-items:center} .aut-crm{ font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.2em; text-transform:uppercase;color:var(--accent);margin-top:10px; } .aut-head{margin-bottom:var(--sp-4)} .aut-head .h2{margin-top:2px} /* currículo em sanfona — no desktop nasce aberto e sem o botão */ .aut-cv{margin-top:var(--sp-3)} .aut-cv>summary{ display:none;align-items:center;justify-content:space-between;gap:14px; cursor:pointer;list-style:none;padding:16px 4px;min-height:44px; font-family:'Sora',sans-serif;font-size:var(--step--1);font-weight:500; letter-spacing:.06em;text-transform:uppercase;color:var(--neon-hi); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .aut-cv>summary::-webkit-details-marker{display:none} .aut-cv[open]>summary .mx-ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .aut-video{ width:100%;height:auto;display:block;border-radius:3px; box-shadow:0 24px 60px -40px #000, 0 0 46px -26px var(--glow); } .aut-creds{margin:var(--sp-3) 0} .aut-creds li{list-style:none;padding:8px 0 8px 20px;position:relative;font-size:var(--step--1);line-height:1.55;color:var(--fg-dim);border-bottom:1px solid var(--line)} .aut-creds li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:1px;background:var(--accent)} @media(max-width:860px){.aut-grid{grid-template-columns:1fr}.aut-head{margin-bottom:var(--sp-4)} .aut-head .h2{margin-top:2px} /* currículo em sanfona — no desktop nasce aberto e sem o botão */ .aut-cv{margin-top:var(--sp-3)} .aut-cv>summary{ display:none;align-items:center;justify-content:space-between;gap:14px; cursor:pointer;list-style:none;padding:16px 4px;min-height:44px; font-family:'Sora',sans-serif;font-size:var(--step--1);font-weight:500; letter-spacing:.06em;text-transform:uppercase;color:var(--neon-hi); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .aut-cv>summary::-webkit-details-marker{display:none} .aut-cv[open]>summary .mx-ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .aut-video{max-width:420px;margin:0 auto}} /* ===================================================================== OFERTA — fundo escuro, CTA dominante, lista em segundo plano ===================================================================== */ .oferta-box{ display:grid;grid-template-columns:.92fr 1.08fr; position:relative;border-radius:5px; background:linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,.015) 46%, color-mix(in srgb,var(--neon) 5%,transparent)); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.10), 0 46px 90px -56px #000, 0 26px 70px -50px var(--glow); } .entrega{padding:clamp(26px,3.4vw,40px)} .entrega-tit{ font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.28em; text-transform:uppercase;color:var(--fg-dim);margin-bottom:16px; } .entrega li{ list-style:none;padding:9px 0 9px 24px;position:relative; font-size:var(--step--1);color:var(--fg-dim);line-height:1.6; } .entrega li::before{ content:"";position:absolute;left:2px;top:16px;width:11px;height:5px; border-left:1px solid var(--neon);border-bottom:1px solid var(--neon); transform:rotate(-45deg);filter:drop-shadow(0 0 5px var(--glow)); } .entrega .todo{ font-style:italic;opacity:.6; border-bottom:1px dashed color-mix(in srgb,var(--fg-dim) 60%,transparent); } .bonus-tag{ display:inline-block;margin-right:8px;font-family:'Sora',sans-serif; font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent); padding:2px 8px;box-shadow:inset 0 0 0 1px var(--line); } /* o painel de preço: vidro fosco + tubo de neon (mesmo tratamento dos pilares) */ .preco{ position:relative;overflow:hidden; padding:calc(clamp(30px,4vw,50px) + 64px) clamp(30px,4vw,50px) clamp(30px,4vw,50px); text-align:center; display:flex;flex-direction:column;justify-content:center;gap:6px; background:linear-gradient(158deg, rgba(255,255,255,.075), rgba(255,255,255,.02) 46%, color-mix(in srgb,var(--neon) 8%,transparent)); -webkit-backdrop-filter:blur(18px) saturate(126%); backdrop-filter:blur(18px) saturate(126%); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--neon-hi) 52%,transparent), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 100px -66px var(--glow), 0 0 22px -12px var(--glow), 0 0 76px -38px var(--glow); } /* luz seguindo o mouse — sem mix-blend-mode, senão o vidro some no hover */ .preco::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0; background:radial-gradient(300px 340px at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--neon-hi) 24%,transparent), color-mix(in srgb,var(--glow) 13%,transparent) 44%, transparent 72%); transition:opacity .55s var(--ease); } .preco:hover::after{opacity:1} .preco>*{position:relative;z-index:1} /* selo da condição especial */ /* faixa da condição especial: atravessa o topo do painel e é ancorada por uma barra de neon de 3px, o elemento mais forte da caixa depois do preço */ .preco-label{ position:absolute;left:0;right:0;top:0;margin:0; padding:15px 18px; font-family:'Sora',sans-serif;font-size:var(--step--2);font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--neon-hi); background:linear-gradient(180deg, color-mix(in srgb,var(--neon) 16%,transparent), color-mix(in srgb,var(--neon) 4%,transparent)); border-top:3px solid var(--neon); box-shadow:0 3px 26px -8px var(--glow),inset 0 -1px 0 color-mix(in srgb,var(--neon) 30%,transparent); text-shadow:0 0 14px var(--glow); } .preco .de{font-size:var(--step--1);color:var(--fg-dim);text-decoration:line-through} .preco .por{ font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(38px,6.4vw,66px); line-height:1.05;color:var(--neon-hi); text-shadow:0 0 12px color-mix(in srgb,var(--glow) 60%,transparent), 0 0 42px color-mix(in srgb,var(--glow) 30%,transparent); } .preco .parc{font-size:var(--step--1);color:var(--fg-dim);margin-bottom:var(--sp-3)} .preco .garantia{margin-top:var(--sp-3);font-size:var(--step--2);line-height:1.65;color:var(--fg-dim)} .preco .vagas{ display:inline-block;align-self:center;margin-top:16px;padding:9px 16px;border-radius:2px; font-family:'Sora',sans-serif;font-size:var(--step--2);font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--neon-hi); text-shadow:0 0 14px var(--glow); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--neon) 60%,transparent), 0 0 30px -12px var(--glow); animation:tube 4.6s ease-in-out infinite; } @media(max-width:900px){ .oferta-box{grid-template-columns:1fr} .preco{order:-1} } /* ===================================================================== ELITE — amarelo e marrom ===================================================================== */ .elite .wordmark{margin-bottom:var(--sp-5)} .tiers{display:grid;grid-template-columns:1fr 1.08fr;gap:18px;margin-top:var(--sp-5);align-items:stretch} .tier{padding:36px 30px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column} .tier .tname{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--step-2);letter-spacing:.12em} .tlogo{ width:min(230px,64%);height:auto;margin:0 auto 4px;display:block; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); } .tier .tsub{font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);margin:9px 0 20px;text-align:center} .tier ul{flex:1;margin-bottom:24px} .tier li{list-style:none;padding:10px 0 10px 20px;position:relative;font-size:var(--step--1);color:var(--fg-dim);border-bottom:1px solid var(--line)} .tier li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:1px;background:var(--accent)} /* O card Essentials é VERDE por inteiro, mesmo dentro da dobra âmbar: borda, fundo, filetes, marcadores, título e botão. É o que separa visualmente os dois produtos lado a lado. */ .tier-ess{ --neon:#3fdc7b; --neon-hi:#9dffc6; --glow:rgba(63,220,123,.5); --accent:#3fdc7b; --accent-hi:#9dffc6; --line:rgba(63,220,123,.26); --card:rgba(63,220,123,.05); --fg-dim:#7fae93; /* texto de apoio em verde escurecido */ background:linear-gradient(168deg,rgba(63,220,123,.10),transparent 58%),var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--neon) 42%,transparent), inset 0 0 110px -72px var(--glow), 0 0 34px -22px var(--glow); } .tier-ess .tname{ color:var(--neon-hi); text-shadow:0 0 6px color-mix(in srgb,var(--glow) 55%,transparent), 0 0 28px color-mix(in srgb,var(--glow) 30%,transparent); } .tier-ess .tsub{color:color-mix(in srgb,var(--neon) 62%,var(--fg-dim))} .tier-ess li::before{background:var(--neon);box-shadow:0 0 7px var(--glow)} .tier-elite{ background:linear-gradient(168deg,rgba(242,193,78,.14),rgba(90,54,10,.1) 55%,transparent),var(--bg-2); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 72%,transparent), inset 0 0 110px -72px var(--glow), 0 0 34px -20px var(--glow); } .tier-elite .tname{ color:var(--accent-hi); text-shadow:0 0 6px var(--accent-hi),0 0 26px var(--glow),0 0 60px var(--glow); } .elite-frase b{font-weight:500;color:var(--accent-hi);text-shadow:0 0 24px var(--glow)} @media(max-width:860px){.tiers{grid-template-columns:1fr}} /* ===================================================================== CTA FINAL ===================================================================== */ .final{text-align:center} .final .final-box{ position:relative;isolation:isolate;overflow:hidden;border-radius:5px; max-width:820px;margin:0 auto;padding:clamp(38px,6vw,72px) clamp(24px,4vw,54px); /* vidro: película translúcida sobre o fundo da dobra */ background: linear-gradient(152deg,rgba(255,255,255,.06),rgba(255,255,255,.018) 44%,rgba(255,255,255,0) 72%), var(--bg-2); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } /* raio de luz diluído entrando pelo canto superior esquerdo */ .final .final-box::before{ content:"";position:absolute;z-index:-1;pointer-events:none; left:-34%;top:-46%;width:130%;height:105%; background:linear-gradient(102deg, transparent 34%, color-mix(in srgb,var(--neon-hi) 26%,transparent) 47%, color-mix(in srgb,var(--neon-hi) 9%,transparent) 53%, transparent 64%); filter:blur(30px); transform:rotate(-13deg); } /* fio de luz na aresta de cima — o "brilho de vidro" */ .final .final-box::after{ content:"";position:absolute;z-index:-1;pointer-events:none; left:12%;right:12%;top:0;height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--neon-hi) 55%,transparent),transparent); } .final h2{font-size:var(--step-3);max-width:26ch;margin:0 auto var(--sp-4);font-weight:600} .final em{ font-style:normal;color:var(--neon-hi); text-shadow:0 0 14px color-mix(in srgb,var(--glow) 55%,transparent), 0 0 40px color-mix(in srgb,var(--glow) 30%,transparent); } /* ===================================================================== RODAPÉ ===================================================================== */ footer{ background:var(--bg-2);border-top:1px solid var(--line); padding:44px var(--gutter);text-align:center;color:var(--fg-dim);font-size:var(--step--2); } footer .brand{font-family:'Sora',sans-serif;letter-spacing:.28em;color:var(--fg-dim);font-size:var(--step--2);margin-bottom:12px} footer .brand b{color:var(--neon);font-weight:400;text-shadow:0 0 10px var(--glow)} /* ===================================================================== FUNDO ANIMADO (WebGL) — a camada fica ATRÁS de tudo na dobra Mesma máscara vertical das dobras: o fundo morre antes da borda, então nunca cria aresta contra a seção seguinte. ===================================================================== */ .bg{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 84%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 84%,transparent 100%); } .bg-canvas{width:100%;height:100%;display:block;opacity:1;mix-blend-mode:screen;transition:opacity .6s var(--ease)} .bg.is-off .bg-canvas{opacity:0} /* sem WebGL: o gradiente do CSS assume e ninguém percebe a ausência */ .bg.bg-fallback{background:radial-gradient(60% 45% at 50% 42%,var(--wash),transparent 72%)} /* ===================================================================== FX — pulso neon na virada de dobra ===================================================================== */ .fx{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0} .fx i{ position:absolute;left:-10%;right:-10%;height:78vh;top:-78vh; background:linear-gradient(180deg,transparent,var(--glow) 52%,transparent); filter:blur(70px); mix-blend-mode:screen; } /* varredura longa e fraca: percebe-se como a luz da dobra chegando, não como um flash */ .fx.fx-on{animation:fxsweep 2.4s cubic-bezier(.36,0,.22,1) forwards} @keyframes fxsweep{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:.3} 70%{opacity:.22} 100%{opacity:0;transform:translateY(186vh)} } /* ===================================================================== REVEAL bidirecional ===================================================================== */ [data-anim]{ opacity:0; transition:opacity .7s var(--ease),transform .8s var(--ease),filter .8s var(--ease), background-color var(--dur-theme) var(--ease),color var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease),box-shadow var(--dur-theme) var(--ease); transition-delay:calc(var(--i,0) * 80ms); } [data-anim="up"]{transform:translateY(34px)} [data-anim="down"]{transform:translateY(-26px)} [data-anim="left"]{transform:translateX(-34px)} [data-anim="right"]{transform:translateX(34px)} [data-anim="scale"]{transform:scale(.96)} [data-anim="blur"]{filter:blur(8px);transform:translateY(20px)} .is-in[data-anim]{opacity:1;transform:none;filter:none} /* ---------- foco / acessibilidade ---------- */ :focus-visible{outline:2px solid var(--neon);outline-offset:3px} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;z-index:99;background:var(--bg);padding:10px 16px;box-shadow:inset 0 0 0 1px var(--neon)} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} /* Corte cirúrgico em vez de "animation:none" geral. Sai o que DESLOCA (paralaxe, varredura, luz orbitando); fica o que só muda luz e cor — essas não disparam desconforto vestibular. */ [data-anim]{transform:none !important;filter:none !important} .btn:hover{transform:none} .fx{display:none} .btn-neon::before{animation:none} /* luz que passeia atrás */ .float-cta::before{animation:none} /* anel girando na moldura */ /* MANTIDOS de propósito: o brilho que varre o botão dourado (sheen), o pulso do tubo de neon e o vídeo de fundo do hero. */ .bg-video{opacity:.55;filter:saturate(.95) brightness(.9)} } /* ===================================================================== AJUSTES DE MOBILE ===================================================================== */ @media(max-width:860px){ /* 1 · hero cabe na primeira tela com o botão dourado à vista */ .hero{min-height:100vh;min-height:100svh;padding:86px var(--gutter) var(--sp-5)} .hero h1{font-size:clamp(26px,6.4vw,34px);max-width:18ch} .hero .sub{font-size:var(--step--1);max-width:44ch} .logo-hero{width:min(400px,74vw)} .hero .wordmark{margin-bottom:var(--sp-3)} .tag{margin-bottom:var(--sp-2)} .cta-row{margin-top:var(--sp-3);gap:10px} .cta-row .btn{width:100%;padding:15px 20px;font-size:12px} .scroll-hint{margin-top:var(--sp-3)} .scroll-hint::after{height:30px} /* 3 · CTA flutuante não entra no celular: a barra roubava a última dobra e competia com o botão principal da própria tela */ .float-cta{display:none !important} /* espaço no fim da página para a barra não cobrir o rodapé */ body{padding-bottom:0} /* 7 · Dr. André: nome, vídeo e currículo fechado em sanfona */ .aut-grid{grid-template-columns:1fr;gap:var(--sp-3)} .aut-video{max-width:none;margin:0} .aut-cv>summary{display:flex} .aut-cv:not([open]) .aut-creds{display:none} .aut-creds{margin-top:var(--sp-2)} /* 7b · Dr. Rafael: currículo fechado em sanfona, igual ao do André */ .com-cv-tit{display:none} .com-cv>summary{display:flex} .com-cv:not([open]) .com-creds{display:none} /* 8 · logo da Elite quase na largura inteira */ .logo-elite{width:min(620px,94vw)} .logo-hero{filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))} } @media(max-width:520px){ /* 6 · Dr. Rafael: foto acima do nome */ .com-card{grid-template-columns:1fr;gap:16px;justify-items:center;text-align:center} .com-foto{grid-column:1;grid-row:1;width:min(190px,52vw);justify-self:center} .com-card .com-txt{grid-column:1;grid-row:2} .com-list li{text-align:left} .com-cv{text-align:left} } /* ===================================================================== DEPOIMENTOS — vídeos verticais locais, carregam só no clique ===================================================================== */ .depoimentos{padding:var(--sp-6) 0} .dep-shell{position:relative;max-width:900px;margin:var(--sp-4) auto 0} .dep-grid{ --dep-gap:clamp(14px,2.4vw,26px); display:flex;gap:var(--dep-gap);overflow-x:auto; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none; } .dep-grid::-webkit-scrollbar{display:none} .dep-card{flex:0 0 calc((100% - var(--dep-gap)*2)/3);scroll-snap-align:start} /* setas do carrossel */ .dep-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:46px;height:46px;border-radius:50%;cursor:pointer;padding:0; border:1px solid var(--line);background:rgba(0,0,0,.5);backdrop-filter:blur(4px); transition:border-color .3s,background .3s; } .dep-nav::after{ content:"";position:absolute;left:50%;top:50%;width:10px;height:10px; border-right:2px solid var(--neon-hi);border-top:2px solid var(--neon-hi); } .dep-prev{left:-23px}.dep-prev::after{transform:translate(-30%,-50%) rotate(-135deg)} .dep-next{right:-23px}.dep-next::after{transform:translate(-70%,-50%) rotate(45deg)} .dep-nav:hover{border-color:var(--neon);background:rgba(0,0,0,.75)} .dep-card{ position:relative;aspect-ratio:9/16;border-radius:3px;overflow:hidden; background:var(--card);border:1px solid var(--line);cursor:pointer; box-shadow:0 24px 60px -40px #000, 0 0 46px -30px var(--glow); display:flex;align-items:center;justify-content:center; } .dep-card video,.dep-card .dep-poster{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; } /* botão de play */ .dep-card .dep-play{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:64px;height:64px;border-radius:50%;border:1px solid var(--neon); background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:2; transition:transform .3s var(--ease),background .3s; } .dep-card .dep-play::after{ content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%); border-style:solid;border-width:11px 0 11px 18px; border-color:transparent transparent transparent var(--neon-hi); } .dep-card:hover .dep-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(0,0,0,.65)} .dep-card.is-playing .dep-play,.dep-card.is-playing .dep-poster{display:none} /* rótulo nome + especialidade */ .dep-card .dep-nome,.dep-card .dep-role{ position:absolute;left:0;right:0;text-align:center;z-index:2; font-family:'Sora',sans-serif;pointer-events:none; } .dep-card .dep-nome{ bottom:34px;font-size:var(--step--1);font-weight:600;color:var(--fg); text-shadow:0 1px 8px rgba(0,0,0,.8); } .dep-card .dep-role{ bottom:14px;font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase; color:var(--neon);text-shadow:0 1px 8px rgba(0,0,0,.8); } .dep-card.is-playing .dep-nome,.dep-card.is-playing .dep-role{display:none} /* véu pra legibilidade do rótulo sobre o pôster */ .dep-card::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1; background:linear-gradient(to top,rgba(0,0,0,.72),transparent);pointer-events:none; } .dep-card.is-playing::after{display:none} /* estado placeholder — só visível em file:// ou ?depoprev */ .dep-card.is-placeholder{ border:1px dashed var(--line);cursor:default;box-shadow:none; } .dep-card.is-placeholder .dep-play{opacity:.35} .dep-card.is-placeholder::before{ content:"vídeo entra aqui";position:absolute;top:38%;left:0;right:0; text-align:center;font-family:'Sora',sans-serif;font-size:var(--step--2); letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim); } @media(max-width:860px){ .dep-nav{display:none} .dep-shell{margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1)} .dep-grid{padding:0 var(--gutter) 10px} /* o card cabe na tela COM o título junto: a largura também é limitada pela altura do viewport (36svh de largura ≈ 64svh de altura no 9:16) */ .dep-card{flex:0 0 min(66vw,36svh,300px);scroll-snap-align:center} .dep-card .dep-play{width:54px;height:54px} .dep-card .dep-play::after{border-width:9px 0 9px 15px} } /* arrasto com mouse no carrossel de depoimentos */ .dep-grid{cursor:grab} .dep-grid.is-dragging{scroll-snap-type:none;cursor:grabbing} .dep-grid.is-dragging .dep-card{cursor:grabbing} /* diagnostico (?diag) */ [style*="9999"]{white-space:pre-wrap}