/* ============================================================ ROSTOK — Landing · styles.css Themeable via [data-theme] on : devocional | institucional | editorial Language via [data-lang] on : pt | en ============================================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Archivo:wght@400;500;600;700;800&display=swap'); /* ---------- Theme tokens ---------- */ :root{ /* default = devocional */ --bg:#0b0b0d; --bg-2:#141318; --bg-3:#1c1a20; --ink:#ece6d7; --ink-strong:#fbf7ec; --muted:#9a9486; --gold:#c9a24b; --gold-soft:#e3c87f; --gold-deep:#8a6b2e; --crimson:#b22633; --crimson-soft:#d9505c; --line:rgba(201,162,75,.22); --line-soft:rgba(236,230,215,.10); --flame-1:#ffd27a; --flame-2:#ff8a2a; --hero-glow:rgba(201,162,75,.20); --card:rgba(255,255,255,.025); --card-border:rgba(201,162,75,.16); --shadow:0 30px 70px -30px rgba(0,0,0,.8); --display:'Cormorant', Georgia, serif; --sans:'Archivo', system-ui, sans-serif; --maxw:1220px; --pad:clamp(20px,5vw,64px); --sect-y:clamp(72px,9vw,140px); --radius:16px; --display-scale:1; --display-weight:600; --ornament:1; /* 1 shows filigree, 0 hides */ --hairline-only:0; /* editorial / institucional rules */ --eyebrow-color:var(--gold); color-scheme:dark; } /* ---------- INSTITUCIONAL (light, corporate) ---------- */ [data-theme="institucional"]{ --bg:#f4efe5; --bg-2:#ffffff; --bg-3:#efe8da; --ink:#26241d; --ink-strong:#16140f; --muted:#6f6a5c; --gold:#9a7724; --gold-soft:#b8923a; --gold-deep:#7a5d18; --crimson:#9e2230; --crimson-soft:#b53a47; --line:rgba(122,93,24,.24); --line-soft:rgba(38,36,29,.10); --flame-1:#ffcf6e; --flame-2:#f08a23; --hero-glow:rgba(154,119,36,.14); --card:rgba(255,255,255,.7); --card-border:rgba(122,93,24,.18); --shadow:0 30px 60px -34px rgba(60,48,18,.45); --display-scale:.96; --display-weight:600; --ornament:0; --hairline-only:1; color-scheme:light; } /* ---------- EDITORIAL (dark, oversized, magazine) ---------- */ [data-theme="editorial"]{ --bg:#0c0b0a; --bg-2:#131110; --bg-3:#1a1714; --ink:#e8e2d5; --ink-strong:#fdfbf4; --muted:#8c8578; --gold:#d8b25c; --gold-soft:#f0d590; --gold-deep:#9a7a32; --crimson:#c6303d; --crimson-soft:#e0606b; --line:rgba(216,178,92,.28); --line-soft:rgba(232,226,213,.10); --hero-glow:rgba(216,178,92,.16); --card:rgba(255,255,255,.02); --card-border:rgba(216,178,92,.14); --display-scale:1.16; --display-weight:500; --ornament:0; --hairline-only:1; --eyebrow-color:var(--gold); } /* ---------- Reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; font-weight:400; letter-spacing:.005em; overflow-x:hidden; transition:background .5s ease,color .5s ease; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} ::selection{background:var(--gold);color:#15120a} /* ---------- Language switching ---------- */ [data-lang="pt"] .l-en{display:none!important} [data-lang="en"] .l-pt{display:none!important} /* ---------- Typography ---------- */ .display{ font-family:var(--display); font-weight:var(--display-weight); line-height:1.06; letter-spacing:-.01em; color:var(--ink-strong); text-wrap:balance; } h1.display{font-size:calc(clamp(2.6rem,5.6vw,4.7rem)*var(--display-scale));line-height:1.08} h2.display{font-size:calc(clamp(2.1rem,4.4vw,3.5rem)*var(--display-scale))} h3.display{font-size:calc(clamp(1.5rem,2.4vw,2.1rem)*var(--display-scale))} .eyebrow{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--eyebrow-color); display:inline-flex; align-items:center; gap:.7em; } .eyebrow::before{ content:"";width:26px;height:1px;background:currentColor;opacity:.6; } .eyebrow.center{justify-content:center} .lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink);opacity:.9;max-width:54ch} .muted{color:var(--muted)} /* ---------- Layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} section{padding-top:var(--sect-y);padding-bottom:var(--sect-y);position:relative} .section-head{max-width:62ch;margin-bottom:clamp(34px,4vw,56px)} .section-head .display{margin-top:14px} .section-head .lead{margin-top:20px} /* ---------- Filigree / dividers ---------- */ .filigree{ display:flex;align-items:center;justify-content:center;gap:18px; color:var(--gold);opacity:calc(.9*var(--ornament) + .001); margin:0 auto; } .filigree svg{height:26px;width:auto;overflow:visible} .filigree .rule{height:1px;width:min(120px,18vw);background:linear-gradient(90deg,transparent,var(--gold));opacity:.5} .filigree .rule.r{background:linear-gradient(270deg,transparent,var(--gold))} .divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0} /* ---------- Candle flame (signature motif) ---------- */ .flame{position:relative;display:inline-block;vertical-align:middle} .flame .glow{ position:absolute;left:50%;top:50%;transform:translate(-50%,-58%); width:300%;height:300%;border-radius:50%; background:radial-gradient(circle,var(--hero-glow),transparent 65%); filter:blur(2px);pointer-events:none; } .flame .body{ position:relative;width:1em;height:1.5em;margin:0 auto; background:radial-gradient(ellipse at 50% 75%,#fff7e0 0%,var(--flame-1) 32%,var(--flame-2) 72%,rgba(255,90,20,0) 100%); border-radius:50% 50% 50% 50%/60% 60% 40% 40%; transform-origin:50% 90%; box-shadow:0 0 18px 2px rgba(255,150,40,.45); animation:flicker 2.4s ease-in-out infinite; } .flame .body::after{ content:"";position:absolute;left:50%;top:58%;transform:translateX(-50%); width:.42em;height:.7em;border-radius:50%; background:radial-gradient(ellipse at 50% 70%,#aef 0%,#7fb6ff 60%,transparent 100%); opacity:.55;mix-blend-mode:screen; } .flame .wick{position:absolute;left:50%;bottom:-0.12em;transform:translateX(-50%);width:.1em;height:.3em;background:#3a2a18;border-radius:2px} @keyframes flicker{ 0%,100%{transform:scaleY(1) scaleX(1) rotate(-1deg);opacity:1} 25%{transform:scaleY(1.06) scaleX(.97) rotate(1.2deg);opacity:.94} 50%{transform:scaleY(.96) scaleX(1.03) rotate(-1.4deg);opacity:1} 75%{transform:scaleY(1.04) scaleX(.98) rotate(.8deg);opacity:.92} } @media (prefers-reduced-motion:reduce){.flame .body{animation:none}} /* flame as a bullet */ .flame-bullet{width:.7em;height:1.05em;flex:none} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.01em; padding:.92em 1.6em;border-radius:999px;border:1px solid transparent; transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .25s,color .25s; white-space:nowrap; } .btn .arr{transition:transform .25s} .btn:hover .arr{transform:translateX(3px)} .btn-primary{ background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#1c1407; box-shadow:0 10px 30px -12px rgba(201,162,75,.6),inset 0 1px 0 rgba(255,255,255,.4); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(201,162,75,.7),inset 0 1px 0 rgba(255,255,255,.5)} .btn-ghost{border-color:var(--line);color:var(--ink-strong);background:transparent} .btn-ghost:hover{border-color:var(--gold);background:var(--card);transform:translateY(-2px)} .btn-crimson{background:var(--crimson);color:#fff;box-shadow:0 10px 30px -14px var(--crimson)} .btn-crimson:hover{transform:translateY(-2px);background:var(--crimson-soft)} /* ---------- Header ---------- */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:120; transition:background .35s,backdrop-filter .35s,border-color .35s,padding .35s; border-bottom:1px solid transparent; } .site-header.scrolled{ background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line-soft); } .header-inner{ max-width:var(--maxw);margin:0 auto;padding:18px var(--pad); display:flex;align-items:center;justify-content:space-between;gap:24px; transition:padding .35s; } .scrolled .header-inner{padding-top:12px;padding-bottom:12px} .brand{display:flex;align-items:center;gap:12px} .brand img{height:42px;width:auto;transition:height .35s} .scrolled .brand img{height:36px} .brand-light{display:var(--logo-dark,block)} .brand-dark{display:var(--logo-light,none)} [data-theme="institucional"]{--logo-dark:none;--logo-light:block} .nav{display:flex;align-items:center;gap:30px} .nav a.navlink{ font-size:.86rem;font-weight:500;letter-spacing:.02em;color:var(--ink);opacity:.82; position:relative;padding:4px 0;transition:opacity .2s,color .2s;white-space:nowrap; } .nav a.navlink::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gold);transition:width .25s} .nav a.navlink:hover{opacity:1;color:var(--ink-strong)} .nav a.navlink:hover::after{width:100%} .header-actions{display:flex;align-items:center;gap:16px} .lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:.74rem;font-weight:700;letter-spacing:.04em} .lang-switch button{background:transparent;color:var(--muted);padding:6px 11px;border:0;transition:background .2s,color .2s} .lang-switch button.on{background:var(--gold);color:#1c1407} .menu-btn{display:none;background:transparent;border:0;color:var(--ink-strong);padding:6px} .menu-btn svg{width:26px;height:26px} /* mobile nav drawer */ .mobile-nav{ position:fixed;inset:0;z-index:115;background:color-mix(in srgb,var(--bg) 96%,#000); backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:center; gap:8px;padding:var(--pad);transform:translateY(-100%);transition:transform .4s cubic-bezier(.6,0,.2,1); } .mobile-nav.open{transform:translateY(0)} .mobile-nav a{font-family:var(--display);font-size:2rem;color:var(--ink-strong);padding:10px 0;border-bottom:1px solid var(--line-soft)} /* ---------- Hero ---------- */ .hero{padding-top:clamp(120px,16vh,180px);overflow:hidden;position:relative} /* cinematic full-bleed hero */ .hero.hero-cinematic{padding:0;min-height:clamp(620px,93vh,960px);display:flex;align-items:flex-start} .hero-cinematic .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-cinematic .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:32% center} .hero-cinematic .hero-scrim{position:absolute;inset:0;background: radial-gradient(96% 132% at 57% 44%,rgba(6,5,5,.82) 0%,rgba(6,5,5,.5) 38%,rgba(6,5,5,.12) 62%,transparent 78%), linear-gradient(180deg,rgba(6,5,5,.42),transparent 26%), linear-gradient(0deg,rgba(6,5,5,.5),transparent 32%)} .hero-cinematic .wrap{position:relative;z-index:1;width:100%} .hero-cinematic .hero-copy{max-width:560px;margin-left:clamp(0px,30vw,400px);padding:clamp(128px,17vh,196px) 0 clamp(48px,8vh,96px)} @media (max-width:760px){ .hero-cinematic .hero-copy{margin-left:0} .hero-cinematic .hero-bg img{object-position:60% center} .hero-cinematic .hero-scrim{background:linear-gradient(0deg,rgba(6,5,5,.92) 8%,rgba(6,5,5,.62) 48%,rgba(6,5,5,.55) 100%)} } .hero-glow{ position:absolute;z-index:0;pointer-events:none; width:80vw;height:80vw;max-width:900px;max-height:900px; right:-12%;top:-18%;border-radius:50%; background:radial-gradient(circle,var(--hero-glow),transparent 62%); filter:blur(8px); } .hero-grid{ position:relative;z-index:1; display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center; } .hero-copy .eyebrow{margin-bottom:22px} .hero h1{margin-bottom:30px} .hero h1 em{font-style:italic;color:var(--gold);font-weight:inherit} .hero .lead{margin-bottom:34px} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .hero-stats{ display:flex;gap:clamp(20px,3vw,40px);margin-top:48px;padding-top:30px; border-top:1px solid var(--line-soft);flex-wrap:wrap; } .hero-stats .stat .n{font-family:var(--display);font-size:2.4rem;font-weight:600;color:var(--gold);line-height:1} .hero-stats .stat .l{font-size:.82rem;color:var(--muted);margin-top:6px;letter-spacing:.02em} /* hero product frame */ .hero-visual{position:relative} .product-frame{ position:relative;border-radius:20px;overflow:hidden; border:1px solid var(--card-border); box-shadow:var(--shadow); background:#0a0a0c; } .product-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.93) contrast(1.03) brightness(.99)} .product-frame.tall{aspect-ratio:4/5} .product-frame .scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(125% 95% at 50% 38%,transparent 44%,rgba(0,0,0,.36) 100%),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.3))} .product-frame .corner{position:absolute;width:34px;height:34px;border:2px solid var(--gold);opacity:calc(.85*var(--ornament))} .product-frame .corner.tl{top:14px;left:14px;border-right:0;border-bottom:0} .product-frame .corner.tr{top:14px;right:14px;border-left:0;border-bottom:0} .product-frame .corner.bl{bottom:14px;left:14px;border-right:0;border-top:0} .product-frame .corner.br{bottom:14px;right:14px;border-left:0;border-top:0} .hero-badge{ position:absolute;left:-18px;bottom:34px;z-index:3; background:var(--bg-2);border:1px solid var(--card-border);border-radius:14px; padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow); } .hero-badge .flame{font-size:18px} .hero-badge .t{font-size:.78rem;line-height:1.3} .hero-badge .t b{color:var(--ink-strong);font-weight:700} .hero-badge .t span{color:var(--muted);display:block} /* ---------- Marquee tagline strip ---------- */ .strip{ border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); padding:18px 0;overflow:hidden;white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .strip-track{display:inline-flex;gap:48px;align-items:center;animation:marquee 32s linear infinite} .strip-track span{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--muted);display:inline-flex;align-items:center;gap:48px} .strip-track span::after{content:"✦";color:var(--gold);font-size:.8rem;font-style:normal} @keyframes marquee{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.strip-track{animation:none}} /* ---------- About ---------- */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center} .about-grid--solo{grid-template-columns:1fr;max-width:78ch} .values{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px} .value-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.86rem;font-weight:500;color:var(--ink-strong)} .value-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)} .about-figure{position:relative} .about-figure .product-frame{aspect-ratio:3/4} .figure-caption{margin-top:14px;font-size:.8rem;color:var(--muted);font-style:italic;font-family:var(--display);font-size:1rem} /* ---------- Product feature ---------- */ .product-section{background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .product-layout{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:clamp(36px,6vw,80px);align-items:start} .product-media{position:relative} .product-media .main-frame{aspect-ratio:2/3;border-radius:20px;max-width:330px;margin:0 auto} .product-media .price-tag{margin:18px auto 0;max-width:330px} .spec-list{list-style:none;display:grid;gap:2px;margin-top:30px} .spec-list li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line-soft)} .spec-list li:first-child{border-top:1px solid var(--line-soft)} .spec-list .ic{flex:none;width:30px;height:30px;display:grid;place-items:center;color:var(--gold);margin-top:1px} .spec-list .ic svg{width:22px;height:22px} .spec-list .tx b{display:block;color:var(--ink-strong);font-weight:600;font-size:1.02rem} .spec-list .tx span{font-size:.92rem;color:var(--muted)} .price-tag{ margin-top:28px;display:inline-flex;align-items:center;gap:16px; background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:14px 20px; } .price-tag .pix{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--gold);font-size:.9rem} .price-tag .sep{width:1px;height:30px;background:var(--line)} .price-tag .desc{font-size:.86rem;color:var(--muted)} .price-tag .desc b{color:var(--ink-strong);font-weight:600;display:block} /* product mini gallery */ .mini-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} .mini-gallery .product-frame{aspect-ratio:1/1} /* product context frame */ .context-frame{margin-top:14px} .context-frame .product-frame{aspect-ratio:16/10;border-radius:18px} /* news typographic card head */ .post .post-top{display:flex;align-items:center;gap:12px;padding:24px 22px 0} .post .post-top .tag{background:var(--bg);border:1px solid var(--card-border);color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px} .post .post-top::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.45} .post .post-top + .pbody{padding-top:16px} /* ---------- How it works ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step} .step{ position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius); padding:30px 24px 28px;overflow:hidden; transition:transform .3s,border-color .3s,background .3s; } .step:hover{transform:translateY(-4px);border-color:var(--gold)} .step .num{font-family:var(--display);font-size:3.4rem;font-weight:600;color:var(--gold);line-height:.9;opacity:.9} .step h3{font-family:var(--sans);font-size:1.08rem;font-weight:700;color:var(--ink-strong);margin:14px 0 8px} .step p{font-size:.92rem;color:var(--muted)} .step .line{position:absolute;top:46px;right:-9px;color:var(--line);z-index:2} .step:last-child .line{display:none} /* ---------- Benefits (parceiro) ---------- */ .benefits-section{position:relative} .bg-filigree{position:absolute;inset:0;opacity:calc(.05*var(--ornament));pointer-events:none;background-repeat:repeat;background-size:340px} .benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .benefit{ background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius); padding:30px 26px;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative; } .benefit:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow)} .benefit .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);margin-bottom:20px} .benefit .ic svg{width:26px;height:26px} .benefit h3{font-family:var(--sans);font-size:1.12rem;font-weight:700;color:var(--ink-strong);margin-bottom:9px} .benefit p{font-size:.93rem;color:var(--muted)} /* ---------- Environments gallery ---------- */ .env-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .env-card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--card-border);box-shadow:var(--shadow);background:#0a0a0c;aspect-ratio:5/4;margin:0} .env-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.02);transition:transform .6s ease} .env-card:hover img{transform:scale(1.04)} .env-card .env-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.8))} .env-card .env-cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff} .env-card .env-cap b{display:block;font-family:var(--sans);font-weight:700;font-size:1.06rem;letter-spacing:.2px} .env-card .env-cap span{display:block;margin-top:3px;font-size:.86rem;color:rgba(255,255,255,.82)} .env-card .corner{position:absolute;width:30px;height:30px;border:2px solid var(--gold);opacity:calc(.85*var(--ornament));z-index:2} .env-card .corner.tl{top:14px;left:14px;border-right:0;border-bottom:0} .env-card .corner.br{bottom:14px;right:14px;border-left:0;border-top:0} .env-card.soon{display:grid;place-items:center;background:var(--card);border-style:dashed;border-color:var(--line)} .env-card.soon .inner{text-align:center;color:var(--muted);padding:20px} .env-card.soon .inner .ic{color:var(--gold);margin-bottom:10px;opacity:.85} .env-card.soon .inner .ic svg{width:34px;height:34px} .env-card.soon .inner b{display:block;color:var(--ink-strong);font-family:var(--sans);font-size:1.02rem} .env-card.soon .inner span{display:block;margin-top:5px;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em} @media (max-width:820px){.env-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.env-grid{grid-template-columns:1fr}} /* big CTA band */ .cta-band{position:relative;overflow:hidden;border-radius:24px; background:radial-gradient(120% 150% at 50% -25%,color-mix(in srgb,var(--gold) 11%,transparent),transparent 58%),linear-gradient(160deg,var(--bg-3),var(--bg-2)); border:1px solid var(--card-border);box-shadow:var(--shadow); padding:clamp(46px,6vw,80px) clamp(24px,5vw,64px);text-align:center;margin-top:clamp(40px,6vw,80px)} .cta-band::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.65} .cta-band .glow2{position:absolute;left:50%;top:-45%;transform:translateX(-50%);width:72%;height:125%;background:radial-gradient(circle,var(--hero-glow),transparent 62%);pointer-events:none} .cta-band .corner{position:absolute;width:26px;height:26px;border:2px solid var(--gold);opacity:calc(.65*var(--ornament));z-index:2} .cta-band .corner.tl{top:16px;left:16px;border-right:0;border-bottom:0} .cta-band .corner.tr{top:16px;right:16px;border-left:0;border-bottom:0} .cta-band .corner.bl{bottom:16px;left:16px;border-right:0;border-top:0} .cta-band .corner.br{bottom:16px;right:16px;border-left:0;border-top:0} .cta-band .inner{position:relative;z-index:1;max-width:56ch;margin:0 auto;display:flex;flex-direction:column;align-items:center} .cta-band .flame{margin-top:16px} .cta-band h2{margin:14px 0 0} .cta-band .lead{margin:14px auto 0;max-width:48ch} .cta-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px} .cta-chips>span{font-size:.78rem;letter-spacing:.03em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 15px;background:color-mix(in srgb,var(--gold) 6%,transparent)} .cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px} /* ---------- Team ---------- */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .member{text-align:center} .member .avatar{ aspect-ratio:1/1;border-radius:18px;overflow:hidden;position:relative; display:grid;place-items:center; background:linear-gradient(160deg,var(--bg-3),var(--bg-2));border:1px solid var(--card-border); margin-bottom:16px;transition:transform .3s,border-color .3s; } .member:hover .avatar{transform:translateY(-4px);border-color:var(--gold)} .member .avatar .initials{font-family:var(--display);font-size:2.6rem;font-weight:600;color:var(--gold)} .member .avatar .ring{position:absolute;inset:14px;border:1px solid var(--line);border-radius:12px;opacity:calc(1*var(--ornament))} .member h3{font-family:var(--sans);font-size:1.05rem;font-weight:700;color:var(--ink-strong)} .member .role{font-size:.86rem;color:var(--gold);margin-top:3px;font-weight:500} .member .bio{font-size:.84rem;color:var(--muted);margin-top:8px} /* ---------- News / blog ---------- */ .news-section{background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .post{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;border:1px solid var(--card-border);background:var(--card);transition:transform .3s,border-color .3s} .post:hover{transform:translateY(-5px);border-color:var(--gold)} .post .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--bg-3)} .post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s;filter:saturate(.9) contrast(1.03)} .post:hover .thumb img{transform:scale(1.05)} .post .thumb .tag{position:absolute;left:14px;top:14px;background:var(--bg);border:1px solid var(--card-border);color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px} .post .pbody{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .post .date{font-size:.76rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px} .post h3{font-family:var(--display);font-size:1.42rem;font-weight:600;color:var(--ink-strong);line-height:1.15;margin-bottom:10px} .post p{font-size:.9rem;color:var(--muted);flex:1} .post .more{margin-top:16px;font-size:.82rem;font-weight:600;color:var(--gold);display:inline-flex;align-items:center;gap:.5em} .post .more .arr{transition:transform .25s} .post:hover .more .arr{transform:translateX(3px)} /* ---------- Contact ---------- */ .contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:start} .contact-info .lead{margin:20px 0 32px} .contact-channels{display:grid;gap:16px} .channel{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--card-border);border-radius:14px;background:var(--card);transition:border-color .25s,transform .25s} .channel:hover{border-color:var(--gold);transform:translateX(4px)} .channel .ic{flex:none;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)} .channel .ic svg{width:22px;height:22px} .channel .t b{display:block;color:var(--ink-strong);font-weight:600} .channel .t span{font-size:.88rem;color:var(--muted)} .form{background:var(--bg-2);border:1px solid var(--card-border);border-radius:20px;padding:clamp(26px,3vw,38px);box-shadow:var(--shadow)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{margin-bottom:16px} .field.full{grid-column:1/-1} .field label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:7px} .field input,.field select,.field textarea{ width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px; padding:12px 14px;color:var(--ink-strong);font-family:var(--sans);font-size:.95rem; transition:border-color .2s,box-shadow .2s; } [data-theme="institucional"] .field input,[data-theme="institucional"] .field select,[data-theme="institucional"] .field textarea{background:var(--bg-3)} .field textarea{resize:vertical;min-height:96px} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 20%,transparent)} .form .btn{width:100%;justify-content:center;margin-top:6px} .form-note{font-size:.78rem;color:var(--muted);text-align:center;margin-top:14px} .form-success{display:none;text-align:center;padding:30px 10px} .form-success.show{display:block} .form-success .flame{font-size:34px;margin-bottom:14px} .form-success h3{font-family:var(--display);font-size:1.8rem;color:var(--ink-strong);margin-bottom:8px} .form-success p{color:var(--muted)} /* ---------- Footer ---------- */ .site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding-top:clamp(56px,7vw,84px)} .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:48px;border-bottom:1px solid var(--line-soft)} .footer-brand img{height:50px;margin-bottom:18px} .footer-brand p{font-size:.92rem;color:var(--muted);max-width:34ch} .footer-brand .tagline{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--gold);margin-top:14px} .fcol h4{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-strong);margin-bottom:16px;font-weight:700} .fcol a{display:block;font-size:.92rem;color:var(--muted);padding:5px 0;transition:color .2s} .fcol a:hover{color:var(--gold)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:26px 0 34px;flex-wrap:wrap} .footer-bottom p{font-size:.82rem;color:var(--muted)} .social{display:flex;gap:12px} .social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:color .2s,border-color .2s,transform .2s} .social a:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-2px)} .social svg{width:18px;height:18px} /* ---------- Reveal animation ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* ---------- Responsive ---------- */ @media (max-width:1000px){ .hero-grid,.about-grid,.contact-layout{grid-template-columns:1fr} .hero-visual{order:-1;max-width:460px;margin:0 auto} .about-figure{max-width:440px;margin:0 auto} .steps{grid-template-columns:1fr 1fr} .benefit-grid{grid-template-columns:1fr 1fr} .team-grid{grid-template-columns:1fr 1fr} .news-grid{grid-template-columns:1fr} .step .line{display:none} .footer-top{grid-template-columns:1fr 1fr} } @media (max-width:720px){ .product-layout{grid-template-columns:1fr;justify-items:center} .product-media{width:100%;max-width:360px} } @media (max-width:680px){ body{font-size:16px} .nav,.header-actions .lang-switch{display:none} .menu-btn{display:block} .steps,.benefit-grid,.team-grid,.form-row{grid-template-columns:1fr} .footer-top{grid-template-columns:1fr} .hero-badge{left:0} .hero-stats{gap:24px} } /* ============================================================ CINEMATIC INTRO · "Acenda sua intenção" ============================================================ */ body.intro-lock{overflow:hidden} .intro-replay{ display:grid;place-items:center;width:40px;height:40px;border-radius:999px; background:transparent;border:1px solid var(--line);color:var(--gold); transition:border-color .25s,background .25s,transform .25s; } .intro-replay svg{width:19px;height:19px} .intro-replay:hover{border-color:var(--gold);background:var(--card);transform:translateY(-1px)} .intro{ position:fixed;inset:0;z-index:9999; background:radial-gradient(120% 120% at 50% 42%,#15110c 0%,#0a0809 45%,#050406 100%); display:grid;place-items:center;overflow:hidden; opacity:1;transition:opacity 1s ease; } .intro.done{opacity:0;pointer-events:none} /* warm bloom — blooms in act 1, swells again behind the product in act 2 */ .intro-glow{ position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.2); width:min(92vw,920px);height:min(92vw,920px);border-radius:50%; background:radial-gradient(circle,rgba(255,176,80,.34),rgba(201,140,60,.12) 38%,transparent 66%); filter:blur(8px);opacity:0;pointer-events:none;transition:opacity 1.2s ease,transform 1.4s ease; } .intro.run .intro-glow{animation:introBloom 2.4s cubic-bezier(.2,.7,.25,1) forwards} @keyframes introBloom{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 55%{opacity:1} 100%{opacity:.9;transform:translate(-50%,-50%) scale(1)} } .intro.act-product .intro-glow{animation:none;opacity:.7;transform:translate(-50%,-50%) scale(1.15)} /* faint film grain / vignette frame */ .intro-grain{ position:absolute;inset:0;pointer-events:none; background:radial-gradient(130% 100% at 50% 45%,transparent 50%,rgba(0,0,0,.72) 100%); } /* drifting embers */ .intro-embers{position:absolute;inset:0;pointer-events:none;z-index:1} .intro-embers .ember{ position:absolute;bottom:-6%;width:4px;height:4px;border-radius:50%; background:radial-gradient(circle,var(--flame-1),rgba(255,138,42,.2) 70%,transparent); opacity:0;filter:blur(.3px); } .intro.run .ember{animation:emberRise linear infinite} .intro-embers .ember:nth-child(1){left:18%;animation-duration:7.5s;animation-delay:1.2s;width:3px;height:3px} .intro-embers .ember:nth-child(2){left:30%;animation-duration:9s;animation-delay:2.4s} .intro-embers .ember:nth-child(3){left:42%;animation-duration:6.5s;animation-delay:.8s;width:5px;height:5px} .intro-embers .ember:nth-child(4){left:54%;animation-duration:8.2s;animation-delay:3s} .intro-embers .ember:nth-child(5){left:63%;animation-duration:7s;animation-delay:1.8s;width:3px;height:3px} .intro-embers .ember:nth-child(6){left:72%;animation-duration:9.4s;animation-delay:.4s} .intro-embers .ember:nth-child(7){left:80%;animation-duration:6.8s;animation-delay:2.8s;width:5px;height:5px} .intro-embers .ember:nth-child(8){left:48%;animation-duration:10s;animation-delay:4s;width:3px;height:3px} .intro-embers .ember:nth-child(9){left:26%;animation-duration:8.6s;animation-delay:3.6s} .intro-embers .ember:nth-child(10){left:36%;animation-duration:7.8s;animation-delay:5s;width:3px;height:3px} .intro-embers .ember:nth-child(11){left:66%;animation-duration:9.2s;animation-delay:5.6s} .intro-embers .ember:nth-child(12){left:58%;animation-duration:8s;animation-delay:4.6s;width:5px;height:5px} @keyframes emberRise{ 0%{opacity:0;transform:translateY(0) translateX(0)} 12%{opacity:.85} 80%{opacity:.6} 100%{opacity:0;transform:translateY(-86vh) translateX(22px)} } /* stage holds two cross-faded scenes in the same centered space */ .intro-stage{position:relative;z-index:2;width:min(92vw,560px);min-height:62vh;display:grid;place-items:center} .scene{grid-area:1/1;text-align:center;padding:0 12px;width:100%} /* ---- ACT 1: Intention ---- */ .scene-intention{transition:opacity .9s ease,transform 1s cubic-bezier(.5,0,.2,1),filter .9s ease} .intro.act-product .scene-intention{opacity:0;transform:translateY(-46px) scale(.96);filter:blur(3px);pointer-events:none} .intro-flame{position:relative;height:150px;display:grid;place-items:center;margin-bottom:18px} .intro-flame .spark{ position:absolute;top:62%;left:50%;width:8px;height:8px;border-radius:50%; background:radial-gradient(circle,#fff7e0,var(--flame-1) 60%,transparent); opacity:0;transform:translate(-50%,-50%) scale(.4); } .intro.run .intro-flame .spark{animation:sparkFlash 1s ease-out forwards} @keyframes sparkFlash{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.3)} 18%{opacity:1;transform:translate(-50%,-50%) scale(1.6)} 60%{opacity:.5} 100%{opacity:0;transform:translate(-50%,-50%) scale(.4)} } .intro-flame .flame{font-size:112px;opacity:0;transform-origin:50% 92%} .intro.run .intro-flame .flame{animation:flameIgnite 1.5s cubic-bezier(.2,.8,.25,1) .25s forwards} @keyframes flameIgnite{ 0%{opacity:0;transform:scaleY(.05) scaleX(.6) translateY(20px)} 45%{opacity:1;transform:scaleY(1.12) scaleX(.92) translateY(0)} 70%{transform:scaleY(.96) scaleX(1.04)} 100%{opacity:1;transform:scaleY(1) scaleX(1)} } .intro-eyebrow{ display:block;font-family:var(--sans);font-size:.78rem;font-weight:700; letter-spacing:.42em;text-transform:uppercase;color:var(--gold); margin-bottom:14px;padding-left:.42em;opacity:0; } .intro-tagline{ font-family:var(--display);font-style:italic;font-weight:500; font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.04;color:var(--ink-strong); letter-spacing:-.01em;opacity:0;text-wrap:balance; } .intro-sub{ margin:16px auto 0;max-width:34ch;font-family:var(--sans);font-size:clamp(.95rem,1.6vw,1.12rem); color:var(--muted);letter-spacing:.02em;opacity:0; } .intro.run .intro-eyebrow{animation:introUp .9s cubic-bezier(.2,.7,.25,1) 1.35s forwards} .intro.run .intro-tagline{animation:introUp 1s cubic-bezier(.2,.7,.25,1) 1.65s forwards} .intro.run .intro-sub{animation:introUp 1s cubic-bezier(.2,.7,.25,1) 2.15s forwards} @keyframes introUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* ---- ACT 2: The product ---- */ .scene-product{ display:flex;flex-direction:column;align-items:center;gap:24px; opacity:0;transform:translateY(54px) scale(.94);pointer-events:none; transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1); } .intro.act-product .scene-product{opacity:1;transform:none} .intro-reveal-frame{ position:relative;width:clamp(220px,52vw,310px);aspect-ratio:4/5; border-radius:16px;overflow:hidden;background:#0a0a0c; box-shadow:0 40px 90px -34px rgba(0,0,0,.9),0 0 0 1px var(--card-border); } .intro-reveal-frame img{width:100%;height:100%;object-fit:cover; transform:scale(1.12);transition:transform 4.5s ease-out} .intro.act-product .intro-reveal-frame img{transform:scale(1)} .intro-reveal-scrim{position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 36%,transparent 46%,rgba(0,0,0,.4) 100%)} .intro-reveal-frame .corner{position:absolute;width:30px;height:30px;border:2px solid var(--gold);opacity:0;transition:opacity .6s ease .5s} .intro.act-product .intro-reveal-frame .corner{opacity:.85} .intro-reveal-frame .corner.tl{top:13px;left:13px;border-right:0;border-bottom:0} .intro-reveal-frame .corner.tr{top:13px;right:13px;border-left:0;border-bottom:0} .intro-reveal-frame .corner.bl{bottom:13px;left:13px;border-right:0;border-top:0} .intro-reveal-frame .corner.br{bottom:13px;right:13px;border-left:0;border-top:0} .intro-reveal-meta{display:flex;flex-direction:column;align-items:center;gap:10px; opacity:0;transform:translateY(16px);transition:opacity .9s ease .45s,transform .9s ease .45s} .intro.act-product .intro-reveal-meta{opacity:1;transform:none} .intro-reveal-flame{font-size:26px} .intro-reveal-name{font-family:var(--display);font-weight:600;font-size:clamp(2rem,5vw,2.8rem); color:var(--ink-strong);line-height:1;letter-spacing:.01em} .intro-reveal-cap{font-family:var(--sans);font-size:clamp(.9rem,1.5vw,1.04rem);color:var(--muted); max-width:30ch;letter-spacing:.01em} /* progress timeline */ .intro-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(201,162,75,.14);z-index:3;opacity:0} .intro-progress > i{display:block;height:100%;width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));box-shadow:0 0 12px rgba(201,162,75,.6)} .intro.run .intro-progress{opacity:1;transition:opacity .5s ease .4s} .intro.run .intro-progress > i{width:100%;transition:width 7s linear .2s} .intro-skip{ position:absolute;bottom:30px;right:30px;z-index:4; display:inline-flex;align-items:center;gap:.5em; background:rgba(10,8,6,.4);border:1px solid var(--line-soft);border-radius:999px; padding:.6em 1.2em;font-family:var(--sans);font-size:.82rem;font-weight:600; letter-spacing:.04em;color:var(--muted);opacity:0;white-space:nowrap;backdrop-filter:blur(4px); transition:color .25s,border-color .25s,transform .25s,background .25s; } .intro-skip .arr{transition:transform .25s} .intro-skip:hover{color:var(--ink-strong);border-color:var(--gold);background:rgba(10,8,6,.7)} .intro-skip:hover .arr{transform:translateX(3px)} .intro.run .intro-skip{animation:introUp .6s ease .6s forwards} @media (prefers-reduced-motion:reduce){ .intro-glow,.intro-flame .flame,.intro-eyebrow,.intro-tagline,.intro-sub,.intro-skip, .scene-product,.intro-reveal-meta,.intro-reveal-frame .corner{opacity:1!important;animation:none!important;transform:none!important;transition:none!important} .scene-intention{display:none} .intro-reveal-frame img{transform:none!important;transition:none!important} .ember{display:none} .intro.run .intro-progress > i{transition:width 2.4s linear} } @media (max-width:680px){ .intro-stage{min-height:70vh} .intro-skip{bottom:22px;right:22px} .intro-flame{height:118px} .intro-flame .flame{font-size:74px} }