/* ============================================================================ ALVES GYM — Marketing site Built on the "Alves Gym Design System" (imported from Claude Design). Dark · athletic · terracotta CTA · mustard decoration only. Single stylesheet, mobile-first, no framework — loads fast on any device. ========================================================================== */ /* ---- Fonts: self-hosted (Anton + Outfit). Loaded via to fonts/fonts.css in the HTML , with the critical weights preloaded — no third-party request, no render-blocking @import. -------------------------------------- */ /* ---- Design tokens --------------------------------------------------------*/ :root{ /* Core palette */ --preto-base:#0A0A0A; --off-white:#F4F1EA; --terracota:#D93F2B; --grey-quente:#2E2A26; --mostarda:#F2B341; --terracota-hover:#C3341F; --terracota-08:rgba(217,63,43,0.08); --terracota-10:rgba(217,63,43,0.10); --terracota-20:rgba(217,63,43,0.20); --mostarda-12:rgba(242,179,65,0.12); --off-white-08:rgba(244,241,234,0.08); --off-white-16:rgba(244,241,234,0.16); --off-white-24:rgba(244,241,234,0.24); --off-white-56:rgba(244,241,234,0.56); --off-white-72:rgba(244,241,234,0.72); /* Semantic */ --bg:var(--preto-base); --surface-card:var(--grey-quente); --text-primary:var(--off-white); --text-muted:var(--off-white-72); --text-faint:var(--off-white-56); --brand:var(--terracota); /* decorative identity: borders, icons, deco */ --brand-text:#E45B45; /* AA text/links on dark (5.5:1 on black) */ --cta-bg:#C3341F; /* AA button bg (off-white 4.9:1) */ --cta-bg-hover:#A82C19; --accent:var(--mostarda); --border-card:var(--off-white-08); --border-hairline:var(--off-white-16); /* Type */ --font-display:'Anton',Impact,'Arial Narrow',sans-serif; --font-body:'Outfit',system-ui,-apple-system,sans-serif; --display-tracking:-0.01em; --meta-tracking:0.04em; --leading-body:1.55; /* Spacing / layout */ --content-max:1280px; --margin:clamp(20px,5vw,48px); --section-gap:clamp(64px,10vw,120px); /* Effects */ --radius-card:12px; --radius-sm:8px; --radius-pill:999px; --shadow-card:0 8px 24px rgba(0,0,0,0.35); --shadow-raised:0 20px 60px rgba(0,0,0,0.55); /* Motion */ --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-fast:150ms; --dur-med:300ms; --dur-slow:600ms; } /* ---- Reset ----------------------------------------------------------------*/ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--text-primary); font-family:var(--font-body); font-size:18px; line-height:var(--leading-body); font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} a{color:var(--brand-text);text-decoration:none} button{font-family:inherit} h1,h2,h3{margin:0} :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px} ::selection{background:var(--terracota);color:var(--off-white)} /* ---- Layout helpers -------------------------------------------------------*/ .container{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--margin)} .section{padding-block:var(--section-gap);position:relative} .section--grey{background:var(--grey-quente);border-top:1px solid var(--border-card);border-bottom:1px solid var(--border-card)} /* ---- Typography -----------------------------------------------------------*/ .display{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:var(--display-tracking); line-height:0.92; color:var(--off-white); } .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:14px;font-weight:600;line-height:1; letter-spacing:var(--meta-tracking);text-transform:uppercase; color:var(--accent); } .eyebrow svg{width:16px;height:16px} .meta{ font-size:12px;font-weight:600;line-height:1; letter-spacing:var(--meta-tracking);text-transform:uppercase; color:var(--text-faint); display:inline-flex;align-items:center;gap:6px; } .meta svg{width:14px;height:14px;stroke:var(--off-white-56)} .lead{font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.5;color:var(--text-muted)} .muted{color:var(--text-muted)} .section-head{margin-bottom:clamp(36px,5vw,56px)} .section-head .display{font-size:clamp(2.25rem,6vw,4.5rem);line-height:0.95;margin-top:14px} .section-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .section-head--center{text-align:center;max-width:720px;margin-inline:auto} .section-head--center .eyebrow{justify-content:center} .textlink{ color:var(--brand-text);font-size:14px;font-weight:600; letter-spacing:var(--meta-tracking);text-transform:uppercase; display:inline-flex;align-items:center;gap:8px;white-space:nowrap; transition:gap var(--dur-fast) var(--ease-out); } .textlink svg{width:15px;height:15px;stroke:var(--brand-text)} .textlink:hover{gap:12px} .textlink:hover svg{transform:translateX(2px)} /* ---- Decorative watermark number -----------------------------------------*/ .deco{ position:absolute; font-family:var(--font-display); line-height:0.8;color:var(--off-white); opacity:0.09;pointer-events:none;user-select:none;z-index:0; font-size:clamp(180px,32vw,460px); } .deco--br{bottom:-0.22em;right:-0.02em} .deco--tl{top:-0.22em;left:-0.02em} .deco--tr{top:-0.22em;right:-0.02em} /* ---- Buttons --------------------------------------------------------------*/ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 28px; font-family:var(--font-body);font-weight:600;font-size:16px;line-height:1; letter-spacing:var(--meta-tracking);text-transform:uppercase; border-radius:var(--radius-pill); border:1.5px solid transparent; cursor:pointer;white-space:nowrap; transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn svg{width:18px;height:18px} .btn--primary{background:var(--cta-bg);color:var(--off-white)} .btn--primary:hover{background:var(--cta-bg-hover)} .btn svg{transition:transform var(--dur-fast) var(--ease-out)} .btn--primary:hover svg,.btn--secondary:hover svg{transform:translateX(3px)} .btn--secondary{background:transparent;color:var(--off-white);border-color:var(--brand)} .btn--secondary:hover{background:var(--terracota-10)} .btn--ghost{background:transparent;color:var(--off-white)} .btn--ghost:hover{background:var(--off-white-08)} .btn--lg{padding:18px 40px;font-size:18px;gap:12px} .btn--sm{padding:10px 20px;font-size:14px;gap:8px} .btn--block{width:100%} /* ---- Cards ----------------------------------------------------------------*/ .card{ position:relative; background:var(--surface-card); border:1px solid var(--border-card); border-radius:var(--radius-card); padding:clamp(24px,3vw,32px); transition:border-color var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out); } .card:hover{border-color:var(--border-hairline)} /* ---- Tag ------------------------------------------------------------------*/ .tag{ display:inline-flex;align-items:center;gap:6px; padding:5px 12px;font-size:12px;font-weight:600;line-height:1; letter-spacing:var(--meta-tracking);text-transform:uppercase; border-radius:var(--radius-pill); } .tag--brand{background:var(--cta-bg);color:var(--off-white)} .tag--accent{background:var(--mostarda-12);color:var(--accent);border:1px solid var(--mostarda)} /* ========================================================================= NAV ========================================================================= */ .nav{ position:sticky;top:0;z-index:50; background:rgba(10,10,10,0.72); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:background var(--dur-med) var(--ease-out),border-color var(--dur-med) var(--ease-out); } .nav.is-scrolled{background:rgba(10,10,10,0.9);border-bottom-color:var(--border-card)} .nav__inner{ max-width:var(--content-max);margin-inline:auto; padding:16px var(--margin); display:flex;align-items:center;justify-content:space-between;gap:24px; } .brand{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--display-tracking); font-size:26px;line-height:1;color:var(--off-white);white-space:nowrap; } .brand span{color:var(--brand)} .nav__links{display:flex;gap:30px;align-items:center} .nav__links a{ position:relative; color:var(--text-muted);font-size:14px;font-weight:600; letter-spacing:var(--meta-tracking);text-transform:uppercase; transition:color var(--dur-fast) var(--ease-out); } .nav__links a::after{ content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px; background:var(--brand);transform:scaleX(0);transform-origin:left; transition:transform var(--dur-med) var(--ease-out); } .nav__links a:hover{color:var(--off-white)} .nav__links a:hover::after{transform:scaleX(1)} .nav__cta{display:flex;align-items:center;gap:14px} .nav__toggle{ display:none;background:none;border:none;cursor:pointer;padding:8px; color:var(--off-white); } .nav__toggle svg{width:26px;height:26px;stroke:var(--off-white)} /* ========================================================================= HERO ========================================================================= */ .hero{position:relative;overflow:hidden;background:var(--preto-base);min-height:min(92vh,860px);display:flex;align-items:flex-end} .hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero__bg img{ width:100%;height:100%;object-fit:cover;object-position:center; transform:scale(1.12);will-change:transform; } .hero__scrim{ position:absolute;inset:0;z-index:1; background: linear-gradient(180deg,rgba(10,10,10,0.55) 0%,rgba(10,10,10,0.15) 30%,rgba(10,10,10,0.55) 70%,rgba(10,10,10,0.96) 100%), linear-gradient(90deg,rgba(10,10,10,0.85) 0%,rgba(10,10,10,0.35) 55%,rgba(10,10,10,0) 100%); } .hero__deco{color:var(--off-white);opacity:0.07} .hero__inner{ position:relative;z-index:2;width:100%; max-width:var(--content-max);margin-inline:auto; padding:clamp(120px,18vh,220px) var(--margin) clamp(56px,8vw,96px); } .hero__eyebrow{margin-bottom:22px} .hero h1{ font-size:clamp(3.25rem,10vw,8rem); line-height:0.9;max-width:16ch;margin:0; } .hero__sub{max-width:48ch;margin:26px 0 38px} .hero__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero__stats{ display:flex;gap:clamp(28px,5vw,64px);margin-top:clamp(40px,6vw,64px); flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--border-card); } .stat__num{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,3.5rem);line-height:0.9;color:var(--off-white)} .stat__num span{color:var(--brand)} .stat__label{font-size:13px;font-weight:600;letter-spacing:var(--meta-tracking);text-transform:uppercase;color:var(--text-faint);margin-top:6px} /* ========================================================================= KINETIC GRID (interactive band após o hero) ========================================================================= */ .kgrid{position:relative;overflow:hidden;background:var(--preto-base);border-bottom:1px solid var(--border-card)} .kgrid__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:0;pointer-events:none;touch-action:none} .kgrid__scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(10,10,10,0) 40%,rgba(10,10,10,0.55) 100%)} .kgrid__inner{ position:relative;z-index:2;text-align:center; min-height:clamp(460px,72vh,720px); display:flex;flex-direction:column;align-items:center;justify-content:center; padding-block:clamp(64px,10vw,120px); } .kgrid__inner .eyebrow{justify-content:center} .kgrid__inner .display{font-size:clamp(2.25rem,6vw,4.75rem)} .kgrid__hint{ margin-top:26px;display:inline-flex;align-items:center;gap:8px; color:var(--text-faint);font-size:12px;font-weight:600; letter-spacing:var(--meta-tracking);text-transform:uppercase; } .kgrid__hint svg{width:15px;height:15px;stroke:var(--accent)} /* ========================================================================= SPLIT (image + text) ========================================================================= */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center} .split--reverse .split__media{order:2} .split__body{max-width:52ch} .split__body .display{font-size:clamp(2rem,5vw,3.75rem);line-height:0.98;margin:14px 0 22px} .split__media{position:relative;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border-card)} .split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5} .split--wide .split__media img{aspect-ratio:3/4} /* checklist for pain-points */ .checklist{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:16px} .checklist li{display:flex;gap:14px;align-items:flex-start;font-size:17px;color:var(--text-muted);line-height:1.45} .checklist svg{flex:none;width:22px;height:22px;stroke:var(--brand);margin-top:2px} /* ========================================================================= FEATURE / MODALIDADE CARDS ========================================================================= */ .grid{display:grid;gap:16px} .grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} .grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} .feature{display:flex;flex-direction:column;min-height:230px} .feature__icon{ width:52px;height:52px;border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center; background:var(--terracota-10);border:1px solid var(--terracota-20); margin-bottom:22px; } .feature__icon svg{width:26px;height:26px;stroke:var(--brand)} .feature h3{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:0.02em;font-size:20px;color:var(--off-white);margin-bottom:10px;line-height:1.2} .feature p{font-size:15px;line-height:1.5;color:var(--text-muted);margin:0;flex:1} .modalidade__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px} .modalidade__top svg{width:28px;height:28px;stroke:var(--mostarda)} .modalidade__n{font-family:var(--font-display);font-size:42px;color:var(--off-white-08);line-height:0.8} .modalidade h3{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:0.02em;font-size:21px;color:var(--off-white);margin-bottom:8px;line-height:1.2} .modalidade p{font-size:15px;line-height:1.5;color:var(--text-muted);margin:0 0 20px;flex:1} .modalidade__meta{display:flex;gap:18px;flex-wrap:wrap} /* ========================================================================= TIMETABLE ========================================================================= */ .timetable{overflow-x:auto;-webkit-overflow-scrolling:touch} .timetable__grid{min-width:640px;display:flex;flex-direction:column;gap:8px} .timetable__row{display:grid;grid-template-columns:72px repeat(5,1fr);gap:8px} .timetable__head span{ text-align:center;font-size:12px;font-weight:700;letter-spacing:var(--meta-tracking); text-transform:uppercase;color:var(--text-faint);padding-bottom:4px; } .timetable__time{display:flex;align-items:center;font-size:12px;font-weight:600;color:var(--text-faint)} .cell{ min-height:60px;text-align:left;padding:10px 12px;border-radius:var(--radius-sm); background:var(--preto-base);border:1px solid var(--border-card); color:var(--text-primary); } .section--grey .cell{background:var(--grey-quente)} .cell--empty{background:transparent;border:1px dashed var(--off-white-08)} .cell--active{border:1.5px solid var(--mostarda)} .cell__name{display:block;font-size:15px;font-weight:600;line-height:1.2} .cell__tag{display:block;margin-top:5px;font-size:11px;font-weight:600;letter-spacing:var(--meta-tracking);text-transform:uppercase;color:var(--text-faint)} .cell--active .cell__tag{color:var(--accent)} /* ========================================================================= PLANOS ========================================================================= */ .planos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;align-items:stretch} .plano{display:flex;flex-direction:column;padding:clamp(28px,3vw,36px)} .plano--featured{border-color:var(--brand);border-width:1.5px;box-shadow:var(--shadow-raised)} .plano__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px} .plano__medal{font-size:34px;line-height:1} .plano h3{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:0.03em;font-size:22px;color:var(--off-white);line-height:1.2} .plano__desc{font-size:14px;color:var(--text-muted);margin:6px 0 0} .plano__price{margin:24px 0 4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .plano__price .amount{font-family:var(--font-display);font-size:clamp(3rem,6vw,4.25rem);color:var(--off-white);line-height:0.8} .plano__price .amount small{font-size:0.45em;color:var(--text-faint)} .plano__price .per{font-size:13px;color:var(--text-faint);font-weight:600;letter-spacing:var(--meta-tracking);text-transform:uppercase} .plano__cash{font-size:14px;color:var(--text-muted);margin:0 0 24px} .plano__cash strong{color:var(--off-white);font-weight:600} .plano__feats{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:12px;flex:1} .plano__feats li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text-primary);line-height:1.4} .plano__feats svg{flex:none;width:17px;height:17px;stroke:var(--brand);margin-top:3px} .planos-note{margin-top:24px;font-size:13px;color:var(--text-faint);text-align:center} /* ========================================================================= DEPOIMENTOS ========================================================================= */ .depo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px} .depo{display:flex;flex-direction:column;gap:18px} .stars{display:flex;gap:3px} .stars svg{width:18px;height:18px;fill:var(--mostarda);stroke:none} .depo__quote{font-size:17px;line-height:1.5;color:var(--text-primary);margin:0;flex:1} .depo__author{display:flex;align-items:center;gap:12px;margin-top:4px} .depo__avatar{ width:40px;height:40px;border-radius:var(--radius-pill);flex:none; background:var(--terracota-10);border:1px solid var(--terracota-20); display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-size:18px;color:var(--brand); } .depo__name{font-size:14px;font-weight:600;color:var(--off-white);line-height:1.2} .depo__role{font-size:12px;color:var(--text-faint);letter-spacing:var(--meta-tracking);text-transform:uppercase} /* ========================================================================= CTA FINAL (full-bleed) ========================================================================= */ .cta-final{position:relative;overflow:hidden;isolation:isolate} .cta-final__bg{position:absolute;inset:0;z-index:-2;overflow:hidden} .cta-final__bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:scale(1.12);will-change:transform} .cta-final__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,0.82),rgba(10,10,10,0.72) 50%,rgba(10,10,10,0.9))} .cta-final .container{text-align:center;max-width:820px;position:relative} .cta-final .display{font-size:clamp(2.5rem,8vw,5.5rem);line-height:0.92;margin-bottom:20px} .cta-final__note{margin-top:24px;display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:var(--meta-tracking);text-transform:uppercase} .cta-final__note svg{width:16px;height:16px;stroke:var(--mostarda)} .cta-final__actions{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center} /* ========================================================================= FAQ ========================================================================= */ .faq{max-width:820px;margin-inline:auto} .faq__item{border-bottom:1px solid var(--border-card)} .faq__q{ width:100%;background:none;border:none;cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:20px; padding:26px 4px;text-align:left;color:var(--off-white); font-family:var(--font-body);font-size:clamp(1.05rem,2.4vw,1.35rem);font-weight:600; } .faq__q .icon{flex:none;width:26px;height:26px;position:relative;transition:transform var(--dur-med) var(--ease-out)} .faq__q .icon::before,.faq__q .icon::after{content:'';position:absolute;background:var(--brand);border-radius:2px;top:50%;left:50%;transition:transform var(--dur-med) var(--ease-out)} .faq__q .icon::before{width:16px;height:2px;transform:translate(-50%,-50%)} .faq__q .icon::after{width:2px;height:16px;transform:translate(-50%,-50%)} .faq__item.is-open .icon::after{transform:translate(-50%,-50%) scaleY(0)} .faq__a{overflow:hidden;height:0;transition:height var(--dur-med) var(--ease-out)} .faq__a-inner{padding:0 4px 26px;color:var(--text-muted);font-size:17px;line-height:1.6;max-width:64ch} /* ========================================================================= FOOTER ========================================================================= */ .footer{background:var(--preto-base);border-top:1px solid var(--border-card)} .footer__top{ max-width:var(--content-max);margin-inline:auto;padding:clamp(48px,6vw,72px) var(--margin) 40px; display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap; } .footer__brand{max-width:340px} .footer__brand .brand{font-size:34px} .footer__brand p{color:var(--text-faint);font-size:14px;line-height:1.6;margin-top:14px} .footer__socials{display:flex;gap:12px;margin-top:20px} .footer__socials a{ width:42px;height:42px;border-radius:var(--radius-pill); border:1px solid var(--border-hairline);display:flex;align-items:center;justify-content:center; color:var(--text-muted);transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out); } .footer__socials a:hover{border-color:var(--brand);color:var(--off-white);background:var(--terracota-10)} .footer__socials svg{width:19px;height:19px;stroke:currentColor} .footer__cols{display:flex;gap:clamp(32px,5vw,56px);flex-wrap:wrap} .footer__col h4{font-size:12px;font-weight:700;letter-spacing:var(--meta-tracking);text-transform:uppercase;color:var(--text-faint);margin:0 0 16px} .footer__col a{display:block;color:var(--text-muted);font-size:14px;margin-bottom:11px;transition:color var(--dur-fast) var(--ease-out)} .footer__col a:hover{color:var(--off-white)} .footer__bottom{ border-top:1px solid var(--border-card); max-width:var(--content-max);margin-inline:auto; padding:22px var(--margin); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; color:var(--text-faint);font-size:12px;letter-spacing:var(--meta-tracking);text-transform:uppercase; } /* ========================================================================= FLOATING WHATSAPP ========================================================================= */ .wa-float{ position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:60; width:58px;height:58px;border-radius:var(--radius-pill); background:var(--terracota);color:var(--off-white); display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-raised); transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out); } .wa-float{background:var(--cta-bg)} .wa-float:hover{background:var(--cta-bg-hover)} .wa-float svg{width:28px;height:28px;fill:currentColor} /* ========================================================================= FLOATING ACTION STACK + AI CHAT WIDGET ========================================================================= */ .fab-stack{ position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:60; display:flex;flex-direction:column-reverse;gap:12px;align-items:center; } .fab-stack .wa-float{position:static;right:auto;bottom:auto;width:52px;height:52px} .fab-stack .wa-float svg{width:26px;height:26px} .chat-fab{ position:relative;width:60px;height:60px;border-radius:var(--radius-pill); background:var(--cta-bg);color:var(--off-white);border:none;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-raised); transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out); } .chat-fab:hover{background:var(--cta-bg-hover)} .chat-fab svg{width:28px;height:28px;stroke:currentColor;fill:none} .chat-fab .i-close{display:none} .chat-open .chat-fab .i-open{display:none} .chat-open .chat-fab .i-close{display:block} .chat-fab__dot{ position:absolute;top:-1px;right:-1px;width:14px;height:14px;border-radius:50%; background:var(--mostarda);border:2px solid var(--preto-base); } .chat-open .chat-fab__dot{display:none} .chat-panel{ position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(88px,14vh,104px);z-index:61; width:min(384px,calc(100vw - 32px));height:min(620px,calc(100vh - 150px)); display:flex;flex-direction:column;overflow:hidden; background:var(--preto-base);border:1px solid var(--border-hairline);border-radius:18px; box-shadow:var(--shadow-raised); opacity:0;transform:translateY(16px) scale(.98);transform-origin:bottom right;pointer-events:none; transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out); } .chat-open .chat-panel{opacity:1;transform:none;pointer-events:auto} .chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-card);background:var(--grey-quente);flex:none} .chat-head__avatar{width:40px;height:40px;border-radius:var(--radius-pill);background:var(--cta-bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);color:#fff;font-size:17px;flex:none} .chat-head__meta{flex:1;min-width:0} .chat-head__name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--display-tracking);font-size:18px;color:var(--off-white);line-height:1} .chat-head__status{font-size:12px;color:var(--text-faint);display:flex;align-items:center;gap:6px;margin-top:4px} .chat-head__status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mostarda)} .chat-head__close{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:6px;line-height:0} .chat-head__close svg{width:22px;height:22px;stroke:currentColor;fill:none} .chat-head__close:hover{color:var(--off-white)} .chat-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;gap:10px} .chat-msg{max-width:84%;padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere} .chat-msg--bot{align-self:flex-start;background:var(--grey-quente);color:var(--off-white);border-bottom-left-radius:5px} .chat-msg--user{align-self:flex-end;background:var(--cta-bg);color:var(--off-white);border-bottom-right-radius:5px} .chat-msg a{color:inherit;text-decoration:underline} .chat-typing{align-self:flex-start;display:inline-flex;gap:5px;padding:14px;background:var(--grey-quente);border-radius:14px;border-bottom-left-radius:5px} .chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--text-faint);animation:chat-bounce 1.2s infinite ease-in-out} .chat-typing span:nth-child(2){animation-delay:.15s} .chat-typing span:nth-child(3){animation-delay:.3s} @keyframes chat-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}} .chat-cta{align-self:flex-start} .chat-cta a{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:var(--radius-pill);background:var(--cta-bg);color:#fff;text-decoration:none;font-weight:600;font-size:13px;letter-spacing:var(--meta-tracking);text-transform:uppercase} .chat-cta a:hover{background:var(--cta-bg-hover)} .chat-cta svg{width:16px;height:16px;stroke:currentColor;fill:none} .chat-chips{display:flex;flex-wrap:wrap;gap:8px} .chat-chips button{background:transparent;border:1px solid var(--border-hairline);color:var(--text-muted);padding:8px 13px;border-radius:var(--radius-pill);font-size:13px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .chat-chips button:hover{border-color:var(--brand);color:var(--off-white)} .chat-foot{border-top:1px solid var(--border-card);padding:12px;background:var(--grey-quente);flex:none} .chat-form{display:flex;gap:8px;align-items:flex-end} .chat-input{flex:1;resize:none;max-height:96px;min-height:44px;padding:11px 14px;border-radius:12px;border:1px solid var(--border-hairline);background:var(--preto-base);color:var(--off-white);font-family:var(--font-body);font-size:15px;line-height:1.4;outline:none} .chat-input:focus{border-color:var(--brand)} .chat-input::placeholder{color:var(--text-faint)} .chat-send{flex:none;width:44px;height:44px;border-radius:12px;border:none;background:var(--cta-bg);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center} .chat-send:hover{background:var(--cta-bg-hover)} .chat-send:disabled{opacity:.45;cursor:default} .chat-send svg{width:20px;height:20px;stroke:currentColor;fill:none} .chat-foot__note{margin-top:8px;text-align:center;font-size:11px;color:var(--text-faint)} .chat-foot__note a{color:var(--brand-text)} @media (max-width:900px){ .fab-stack{bottom:calc(72px + 14px + env(safe-area-inset-bottom))} } @media (max-width:520px){ .chat-panel{left:10px;right:10px;width:auto;height:min(64vh,540px);bottom:calc(150px + env(safe-area-inset-bottom))} } /* ========================================================================= SCROLL REVEAL ANIMATION ========================================================================= */ .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)} .reveal.is-visible{opacity:1;transform:none} .deco{opacity:0;transition:opacity var(--dur-slow) var(--ease-out)} .deco.is-visible{opacity:0.09} .hero__deco.is-visible{opacity:0.07} /* Authored motion: line-by-line headline reveal (mask + rise, staggered) */ .reveal-lines .line{display:block;overflow:hidden;padding-block:0.12em;margin-block:-0.12em} .reveal-lines .line__inner{display:block;transform:translateY(114%);transition:transform 0.9s var(--ease-out)} .reveal-lines.is-visible .line__inner{transform:translateY(0)} /* Authored motion: image reveal — vertical wipe + slow settle (not a fade) */ .reveal-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease-out)} .reveal-clip.is-visible{clip-path:inset(0 0 0 0)} .reveal-clip img{transform:scale(1.08);transition:transform 1.3s var(--ease-out)} .reveal-clip.is-visible img{transform:scale(1)} /* Count-up numerals: stable width while animating */ .count{font-variant-numeric:tabular-nums} /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width:900px){ .nav__links,.nav__cta .btn{display:none} .nav__toggle{display:inline-flex} .split{grid-template-columns:1fr;gap:32px} .split--reverse .split__media{order:0} .split__media img{aspect-ratio:4/5} .split--wide .split__media img{aspect-ratio:4/5} } @media (max-width:600px){ body{font-size:17px} .hero{min-height:auto} .hero__stats{gap:28px} } /* Mobile menu panel */ .mobile-menu{ position:fixed;inset:0;z-index:55; background:rgba(10,10,10,0.98);backdrop-filter:blur(6px); display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px; opacity:0;visibility:hidden;transition:opacity var(--dur-med) var(--ease-out),visibility var(--dur-med); } .mobile-menu.is-open{opacity:1;visibility:visible} .mobile-menu a{ color:var(--off-white);font-family:var(--font-display);text-transform:uppercase; letter-spacing:var(--display-tracking);font-size:clamp(2rem,9vw,3rem);padding:10px;line-height:1.1; } .mobile-menu a:hover{color:var(--brand-text)} .mobile-menu .btn{margin-top:24px} .mobile-menu__close{position:absolute;top:22px;right:22px;background:none;border:none;cursor:pointer;color:var(--off-white);padding:8px} .mobile-menu__close svg{width:30px;height:30px;stroke:var(--off-white)} /* ========================================================================= MOBILE — designed, not shrunk Sticky action bar + swipeable card carousels (decisions specific to mobile) ========================================================================= */ .mobile-cta{ position:fixed;left:0;right:0;bottom:0;z-index:58; display:none;align-items:center;gap:12px; padding:12px var(--margin) calc(12px + env(safe-area-inset-bottom)); background:rgba(10,10,10,0.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid var(--border-card); transform:translateY(110%);transition:transform var(--dur-med) var(--ease-out); } .mobile-cta.is-visible{transform:translateY(0)} .mobile-cta__link{ flex:none;color:var(--text-primary);font-size:13px;font-weight:600; letter-spacing:var(--meta-tracking);text-transform:uppercase;white-space:nowrap; } .mobile-cta__btn{flex:1} @media (max-width:900px){ .mobile-cta{display:flex} .wa-float{display:none} /* the bar replaces the round float on mobile */ body{padding-bottom:76px} /* clear the fixed bar */ } /* Swipeable carousels for pricing & testimonials on phones */ .swipe-hint{display:none} /* shown only inside the carousel breakpoint below */ @media (max-width:720px){ .planos-grid,.depo-grid{ display:grid;grid-auto-flow:column;grid-template-columns:none; grid-auto-columns:83%;gap:14px; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-padding-inline:var(--margin); margin-inline:calc(var(--margin) * -1);padding-inline:var(--margin); -webkit-overflow-scrolling:touch;scrollbar-width:none; } .planos-grid::-webkit-scrollbar,.depo-grid::-webkit-scrollbar{display:none} .planos-grid > *,.depo-grid > *{scroll-snap-align:start} .plano--featured{box-shadow:var(--shadow-card)} /* lighter shadow in-scroll */ .swipe-hint{ display:flex;align-items:center;justify-content:center;gap:8px; margin-top:18px;color:var(--text-faint); font-size:11px;font-weight:600;letter-spacing:var(--meta-tracking);text-transform:uppercase; } .swipe-hint svg{width:16px;height:16px;stroke:var(--text-faint)} } /* ========================================================================= REDUCED MOTION ========================================================================= */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} .reveal{opacity:1;transform:none} .reveal-lines .line__inner{transform:none!important} .reveal-clip{clip-path:none!important} .reveal-clip img{transform:none!important} .hero__bg img{transform:scale(1.02)!important} .cta-final__bg img{transform:scale(1.02)!important} }