/* Página Técnicas Vocais: cores das capas (rosa, dourado, verde-água) + animações */
.vx{--pink:#ff4fa3;--gold:#ffb938;--teal:#27c4b0;--violet:#8b5cff}
.vx-hero{position:relative;padding:150px 0 70px;overflow:hidden;isolation:isolate}
.vx-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.vx-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 50% at 15% 10%,rgba(255,79,163,.28),transparent 70%),radial-gradient(50% 50% at 90% 20%,rgba(255,185,56,.22),transparent 70%),radial-gradient(60% 60% at 60% 100%,rgba(39,196,176,.22),transparent 70%);animation:hue 14s ease-in-out infinite alternate}
@keyframes hue{to{filter:hue-rotate(35deg) saturate(1.2)}}
.vx-hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;align-items:center}
.vx-hero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;letter-spacing:-.04em;margin:14px 0 18px;font-weight:800}
.vx-grad{background:linear-gradient(100deg,var(--pink),var(--gold) 55%,var(--teal));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.vx-hero p.sub{color:#cfd3df;font-size:1.15rem;max-width:520px;margin:0 0 28px}
.vx-btn{display:inline-block;background:linear-gradient(100deg,var(--pink),var(--gold));color:#1a0b14;font-weight:700;padding:15px 30px;border-radius:999px;box-shadow:0 14px 44px -12px var(--pink);transition:.25s}
.vx-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 56px -12px var(--pink)}
.vx-btn.alt{background:rgba(255,255,255,.07);color:#fff;border:1px solid var(--line);box-shadow:none;margin-left:10px}
.vx-stats{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap}
.vx-stats b{display:block;font-size:2.3rem;letter-spacing:-.03em;background:linear-gradient(100deg,var(--gold),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.vx-stats span{color:var(--muted);font-size:.9rem}
/* capas flutuando */
.vx-covers{position:relative;height:500px}
.vx-covers img{position:absolute;width:44%;border-radius:12px;box-shadow:0 40px 70px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);animation:flt 7s ease-in-out infinite}
.vx-covers img:nth-child(1){left:0;top:70px;transform:rotate(-9deg);animation-delay:-1s;filter:brightness(.78)}
.vx-covers img:nth-child(2){left:24%;top:-14px;width:52%;z-index:3;animation-delay:-3s;transform:rotate(0);box-shadow:0 50px 90px -20px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.14),0 0 70px -6px rgba(255,79,163,.55)}
.vx-covers img:nth-child(3){right:0;top:80px;transform:rotate(9deg);animation-delay:-5s;filter:brightness(.78)}
@keyframes flt{50%{translate:0 -16px}}
/* marquee de palavras */
.vx-tape{overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(255,79,163,.1),rgba(255,185,56,.1),rgba(39,196,176,.1));margin-top:20px}
.vx-tape div{display:flex;gap:46px;width:max-content;padding:14px 0;animation:scroll 40s linear infinite;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;color:#d8dbe6}
.vx-tape i{font-style:normal;color:var(--pink)}
/* cards */
.vx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;perspective:1200px}
.vx-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;padding:26px;overflow:hidden;background:#0f1116;transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .3s}
.vx-card::before{content:"";position:absolute;inset:0;z-index:0;opacity:.75;background:radial-gradient(80% 60% at 80% 0,var(--c),transparent 70%)}
.vx-card>*{position:relative;z-index:1}
.vx-card:hover{box-shadow:0 40px 90px -30px var(--c)}
.vx-card .cv{width:58%;max-width:230px;margin:6px auto 20px;display:block;border-radius:10px;box-shadow:0 26px 50px -16px rgba(0,0,0,.9);transform:translateZ(40px) rotate(-2deg);transition:transform .4s}
.vx-card:hover .cv{transform:translateZ(60px) rotate(0) scale(1.05)}
.vx-ribbon{position:absolute;top:18px;right:-34px;z-index:2;background:linear-gradient(100deg,var(--pink),var(--gold));color:#1a0b14;font-weight:800;font-size:.78rem;padding:5px 40px;transform:rotate(38deg);letter-spacing:.06em}
.vx-card h3{margin:0 0 4px;font-size:1.45rem;letter-spacing:-.02em}
.vx-card small{color:var(--c2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
.vx-card p{color:#b9bfcc;font-size:.95rem;margin:8px 0 14px}
.vx-price{margin-top:auto;display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.vx-price s{color:var(--muted)}.vx-price b{font-size:1.9rem;letter-spacing:-.02em}
.vx-go{display:inline-block;text-align:center;border-radius:999px;padding:12px 22px;font-weight:700;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);transition:.25s}
.vx-card:hover .vx-go{background:linear-gradient(100deg,var(--pink),var(--gold));color:#1a0b14;border-color:transparent}
/* passos */
.vx-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;position:relative}
.vx-step{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px}
.vx-step .n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.2rem;color:#1a0b14;background:linear-gradient(135deg,var(--c),var(--c2));margin-bottom:14px;animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(255,255,255,0)}0%{box-shadow:0 0 0 0 var(--c)}}
.vx-step b{display:block;font-size:1.1rem;margin-bottom:4px}.vx-step span{color:var(--muted);font-size:.95rem}
/* quem ensina */
.vx-about{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;background:linear-gradient(135deg,rgba(255,79,163,.12),rgba(39,196,176,.1));border:1px solid var(--line);border-radius:28px;padding:44px}
.vx-big{font-size:clamp(5rem,12vw,9rem);font-weight:800;letter-spacing:-.06em;line-height:.9;background:linear-gradient(160deg,var(--gold),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.vx-about p{color:#c3c8d4;font-size:1.1rem;margin:0}.vx-about strong{color:#fff}
/* faq */
.vx-faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:12px;transition:.25s}
.vx-faq details[open]{border-color:rgba(255,79,163,.5);background:linear-gradient(100deg,rgba(255,79,163,.08),var(--panel))}
.vx-faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.vx-faq summary::after{content:"+";color:var(--pink);font-size:1.4rem;line-height:1;transition:.3s}.vx-faq details[open] summary::after{transform:rotate(45deg)}
.vx-faq p{color:var(--muted);margin:10px 0 0}
.vx-cta{text-align:center;border-radius:28px;padding:56px 22px;background:linear-gradient(120deg,rgba(255,79,163,.25),rgba(255,185,56,.2),rgba(39,196,176,.22));background-size:200% 200%;animation:bg 10s ease-in-out infinite alternate;border:1px solid var(--line)}
@keyframes bg{to{background-position:100% 100%}}
.vx-cta h2{margin:0 0 10px}.vx-cta p{color:#d3d7e2;margin:0 0 24px}
@media(max-width:850px){.vx-hero-in{grid-template-columns:1fr}.vx-covers{height:340px}.vx-about{grid-template-columns:1fr;padding:30px}.vx-btn.alt{margin:10px 0 0}}
@media(prefers-reduced-motion:reduce){.vx-covers img,.vx-grad,.vx-tape div,.vx-step .n,.vx-cta,.vx-hero::before{animation:none!important}}