/* ============================================================
DIC · CASO 02 — "SISTEMA E CIDADE"
Multi-color vibrante · gradient roxo/magenta · pulso cientifico
(Design system multi-edição TUÁ; identidade 100% DIC/SBC)
============================================================ */
@import "fonts.css";
:root{
/* Base — roxo profundo (espinha dorsal) */
--black:#1a0d33; --black-2:#231245; --panel:#2a1855;
/* Accents DIC (pele urbana — cores do KV canônico) */
--primary:#E63E7C; /* magenta DIC — cor-tese */
--primary-soft:rgba(230,62,124,.16);
--rose:#E63E7C; /* alias — reaproveita CSS portado do Afonso */
--rose-deep:#B22A5E; /* magenta escuro pra hover/active */
--secondary:#F5A821; /* amarelo mostarda — highlights quentes */
--tertiary:#4EBFB2; /* teal — chips, tags, status */
--blue-dic:#0F5FBB; /* azul institucional */
--purple-glow:#7E1F5E; /* magenta-vinho pro gradient */
/* Legado do sistema TUÁ (mapeamento de tokens) */
--gold:var(--secondary); --gold-lift:#F8C560; --gold-bright:#FFD880;
--posca:#f5f3ee; --azul:var(--blue-dic); --urucum:var(--primary);
/* Textos */
--t-hi:rgba(255,255,255,.98); --t-mid:rgba(255,255,255,.68); --t-low:rgba(255,255,255,.42);
/* Glass sobre gradient */
--glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.09);
--stroke:rgba(230,62,124,.24); --stroke-soft:rgba(255,255,255,.10);
--serif:"Qlassy", Georgia, serif;
--sans:"Inter", system-ui, sans-serif;
--r:24px; --r-sm:16px;
--gut:40px; --maxw:1600px;
--ease:cubic-bezier(.16,1,.3,1);
/* Vermelho TUÁ (só scroll indicator) */
--red:#e11d2e;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
background: #050818;
background: linear-gradient(180deg, #050818 0%, #0a0f2e 30%, #0d1338 55%, #0a0f2e 80%, #050818 100%);
background-attachment: fixed;
color:var(--t-hi); font-family:var(--sans);
font-size:clamp(16.5px,1.1vw,18.5px); line-height:1.7; -webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* Bolhas decorativas de fundo (assinatura visual do DIC) */
body::before, body::after {
content: '';
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(100px);
opacity: .18;
}
body::before {
width: 700px; height: 700px;
background: var(--primary);
top: -250px; right: -250px;
}
body::after {
width: 500px; height: 500px;
background: #F5A821;
bottom: -150px; left: -150px;
opacity: .1;
}
img,video{display:block;max-width:100%;}
::selection{background:var(--gold);color:#070605;}
a{color:inherit;text-decoration:none;}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);}
@media (max-width:640px){:root{--gut:22px;}}
.serif{font-family:var(--serif);}
.gold{color:var(--gold-bright);}
.uru{color:var(--urucum);}
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:90;background:linear-gradient(90deg,var(--gold),var(--gold-bright));box-shadow:0 0 14px rgba(181,154,99,.6);}
/* ---------- NAV ---------- */
.nav{position:fixed;top:84px;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
padding:12px var(--gut);}
@media(max-width:880px){.nav{top:64px;}}
.nav__logo{font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:.01em;display:flex;align-items:center;gap:10px;}
.nav__logo .dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--urucum),#7a160d);box-shadow:0 0 14px rgba(225,29,46,.6);}
.nav__menu{display:none;gap:4px;padding:6px;border-radius:100px;background:var(--glass);border:1px solid var(--stroke-soft);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
@media(min-width:880px){.nav__menu{display:flex;}}
.nav__menu a{padding:9px 16px;border-radius:100px;font-size:.82rem;font-weight:500;color:var(--t-mid);transition:.3s var(--ease);}
.nav__menu a:hover{color:var(--t-hi);}
.nav__menu a.active{background:var(--urucum);color:#fff;}
.nav__cta{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:100px;background:var(--glass-2);border:1px solid var(--stroke);font-size:.78rem;font-weight:600;letter-spacing:.04em;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.3s var(--ease);}
.nav__cta:hover{background:var(--gold);color:#070605;}
/* ---------- shared bits ---------- */
.pill{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:100px;background:#1a1716;border:1px solid var(--stroke-soft);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lift);transition:.3s var(--ease);}
.pill:hover{border-color:var(--gold-bright);background:var(--glass-2);}
.pill--pulse{animation:pillpulse 2.4s ease-in-out infinite;}
@keyframes pillpulse{0%,100%{box-shadow:0 0 0 0 rgba(225,29,46,.32);}50%{box-shadow:0 0 0 10px rgba(225,29,46,0);}}
@media(prefers-reduced-motion:reduce){.pill--pulse{animation:none;}}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--urucum);box-shadow:0 0 10px var(--urucum);}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);display:inline-block;margin-bottom:clamp(20px,3vh,32px);}
.btn{display:inline-flex;align-items:center;gap:11px;padding:15px 26px;border-radius:100px;font-size:.82rem;font-weight:600;letter-spacing:.03em;transition:.35s var(--ease);cursor:pointer;}
.btn--ghost{background:var(--glass-2);border:1px solid var(--stroke);color:var(--t-hi);}
.btn--ghost:hover{border-color:var(--gold);}
.btn--fill{background:var(--urucum);color:#fff;border:1px solid var(--urucum);}
.btn--fill:hover{background:#ec3a2c;box-shadow:0 12px 40px -10px rgba(225,29,46,.6);}
.btn--gold{background:var(--gold);color:#070605;border:1px solid var(--gold);}
.btn--gold:hover{background:var(--gold-bright);}
.btn .arr{transition:transform .35s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}
.glass{background:var(--glass);border:1px solid var(--stroke-soft);border-radius:var(--r);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.sec{padding-block:clamp(96px,13vh,180px);}
.sec-head{display:flex;flex-wrap:wrap;gap:16px;align-items:end;justify-content:space-between;margin-bottom:clamp(34px,5vh,64px);}
.sec-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,5.5vw,4.6rem);line-height:1.02;letter-spacing:-.01em;}
.sec-title em{font-style:italic;color:var(--gold-bright);}
/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;padding-top:120px;overflow:hidden;display:flex;align-items:center;}
.hero__glow{position:absolute;z-index:0;width:80vw;height:80vw;max-width:1100px;max-height:1100px;top:-15%;right:-8%;
background:radial-gradient(circle,rgba(225,29,46,.38) 0%,rgba(225,29,46,.14) 35%,transparent 65%);filter:blur(22px);pointer-events:none;}
.hero__media{position:absolute;z-index:1;top:0;right:0;bottom:0;width:62vw;max-width:1200px;overflow:hidden;opacity:.92;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 6%, rgba(0,0,0,.35) 18%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.92) 42%, #000 55%, #000 78%, rgba(0,0,0,.6) 96%, rgba(0,0,0,.3) 100%),
linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.85) 52%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.18) 80%, transparent 92%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 6%, rgba(0,0,0,.35) 18%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.92) 42%, #000 55%, #000 78%, rgba(0,0,0,.6) 96%, rgba(0,0,0,.3) 100%),
linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.85) 52%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.18) 80%, transparent 92%);
mask-composite:intersect;}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
@media(max-width:1000px){.hero__media{width:100vw;opacity:.55;
-webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 18%, #000 50%, #000 100%);
mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 18%, #000 50%, #000 100%);}}
.hero__vign{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg, var(--black) 0%, var(--black) 22%, rgba(7,6,5,.55) 42%, rgba(7,6,5,.18) 65%, transparent 88%);}
@media(max-width:1000px){.hero__vign{background:linear-gradient(180deg, var(--black) 0%, rgba(7,6,5,.45) 55%, transparent 100%);}}
.hero__inner{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:1fr;gap:40px;align-items:center;}
@media(min-width:1000px){.hero__inner{grid-template-columns:1.15fr .85fr;gap:28px;}}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.7rem,6.6vw,6.4rem);line-height:.98;letter-spacing:-.02em;margin:18px 0 16px;max-width:13ch;text-wrap:balance;}
.hero h1 em{font-style:italic;color:var(--gold-bright);}
.hero__sub{color:var(--t-mid);font-size:1.08rem;max-width:40ch;}
.hero__sub b{color:var(--t-hi);font-weight:500;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.hero__side{display:flex;flex-direction:column;gap:16px;transform:scale(1.1);transform-origin:100% 0;}
@media(max-width:1000px){.hero__side{transform:none;}}
/* floating stat panel */
.statpanel{padding:30px 28px;}
.statpanel .top{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-low);}
.statpanel .big{font-family:var(--serif);font-style:italic;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;margin:20px 0 10px;color:var(--gold-bright);}
.statpanel .lbl{font-size:.96rem;line-height:1.5;color:var(--t-hi);font-weight:500;}
.statpanel .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:22px;border-top:1px solid var(--stroke-soft);}
.statpanel .chip{font-size:.7rem;padding:7px 13px;border-radius:100px;border:1px solid var(--stroke-soft);color:var(--t-mid);transition:.3s var(--ease);cursor:default;}
.statpanel .chip:hover{border-color:var(--gold-bright);color:var(--gold-bright);transform:translateY(-1px);}
.hero__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;}
.mcard{padding:22px 18px;border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--stroke-soft);}
.mcard .k{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-low);margin-bottom:10px;}
.mcard .v{font-family:var(--serif);font-style:normal;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1;color:var(--gold-bright);}
/* ---------- STATEMENT ---------- */
.statement{position:relative;padding-block:clamp(70px,10vh,130px);overflow:hidden;text-align:center;}
.statement::before{content:"";position:absolute;top:-10%;right:-12%;width:72vw;max-width:1200px;height:128%;background-image:url("img/presunto.webp");background-size:cover;background-position:center;opacity:.32;
-webkit-mask-image:radial-gradient(ellipse at 60% 50%, #000 38%, rgba(0,0,0,.65) 58%, rgba(0,0,0,.2) 78%, transparent 92%);
mask-image:radial-gradient(ellipse at 60% 50%, #000 38%, rgba(0,0,0,.65) 58%, rgba(0,0,0,.2) 78%, transparent 92%);
pointer-events:none;}
.statement::after{content:"";position:absolute;top:0;right:0;bottom:0;width:62vw;
background:linear-gradient(90deg, var(--black) 0%, var(--black) 14%, rgba(7,6,5,.6) 38%, transparent 70%);
pointer-events:none;}
.statement .wrap, .statement > p{position:relative;z-index:2;}
.statement p{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,5.5vw,4.6rem);line-height:1.08;letter-spacing:-.02em;text-wrap:pretty;max-width:24ch;margin:0 auto;}
.statement .hl{color:var(--urucum);}
.statement .hg{color:var(--urucum);font-style:italic;}
/* ---------- DESAFIO CARDS ---------- */
.cards-2{display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:900px){.cards-2{grid-template-columns:1fr 1fr;}}
.feature{position:relative;overflow:hidden;border-radius:var(--r);padding:34px;display:flex;flex-direction:column;justify-content:space-between;min-height:480px;transition:transform .5s var(--ease);}
.feature:hover{transform:translateY(-2px) !important;box-shadow:0 12px 28px -10px rgba(0,0,0,.42);border-color:var(--gold-bright);}
.feature__bg{position:absolute;inset:-10%;z-index:-2;will-change:transform;transition:transform .25s ease-out;}
.feature__bg img{width:100%;height:100%;object-fit:cover;opacity:.55;}
.feature:hover .feature__bg{transform:scale(1.05);}
.feature::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,6,5,.4),rgba(7,6,5,.92));}
.feature h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.08;}
.feature h3 .uru{font-style:italic;}
.colstack{display:flex;flex-direction:column;gap:18px;}
.bigstat{padding:30px;display:flex;flex-direction:column;justify-content:center;gap:14px;flex:1;}
.bigstat .v{font-family:var(--serif);font-size:clamp(3rem,8vw,6rem);line-height:.85;color:var(--gold-bright);}
.bigstat .v small{font-size:.32em;color:var(--gold-lift);vertical-align:super;}
.bigstat .k{color:var(--t-mid);max-width:30ch;}
.quotecard{padding:32px;display:flex;flex-direction:column;gap:18px;}
.quotecard .qm{display:none;}
.quotecard p{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.1;}
.quotecard .who{display:flex;align-items:center;gap:12px;margin-top:4px;}
.quotecard .who .ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--black-2));display:grid;place-items:center;font-family:var(--serif);color:#070605;font-size:1.1rem;}
.quotecard .who .n{font-size:.84rem;font-weight:600;}
.quotecard .who .r{font-size:.72rem;color:var(--t-low);}
/* ---------- MARQUEE escopo ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--stroke-soft);padding-block:22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee__track{display:flex;gap:48px;width:max-content;animation:scrollx 32s linear infinite;}
.marquee span{font-family:var(--serif);font-size:clamp(1.1rem,2.4vw,1.7rem);color:var(--t-mid);white-space:nowrap;display:inline-flex;align-items:center;gap:48px;}
.marquee span::after{content:"·";color:var(--gold);}
@keyframes scrollx{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.marquee__track{animation:none;}}
/* ---------- BRAND OS accordion ---------- */
.os-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.acc{overflow:hidden;border-radius:var(--r);background:var(--glass);border:1px solid var(--stroke-soft);transition:border-color .4s var(--ease);}
.acc.open{border-color:var(--stroke);}
.acc__head{display:flex;align-items:center;gap:20px;padding:26px 28px;cursor:pointer;}
.acc__num{font-family:var(--serif);color:var(--gold-lift);font-size:1.05rem;min-width:2.4em;}
.acc__t{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.05;flex:1;}
.acc__de{font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lift);}
.acc__ico{width:34px;height:34px;border-radius:50%;border:1px solid var(--stroke);display:grid;place-items:center;color:var(--gold-bright);transition:transform .4s var(--ease);flex-shrink:0;}
.acc.open .acc__ico{transform:rotate(45deg);background:var(--gold);color:#070605;border-color:var(--gold);}
.acc__body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease);}
.acc.open .acc__body{max-height:360px;}
.acc__inner{padding:0 28px 28px 28px;display:grid;grid-template-columns:1fr;gap:18px;}
@media(min-width:760px){.acc__inner{grid-template-columns:1.3fr 1fr;}}
.acc__inner p{color:var(--t-mid);font-size:1.02rem;}
.acc__tags{display:flex;flex-wrap:wrap;gap:8px;align-content:start;}
.acc__tags .tg{font-size:.72rem;padding:8px 13px;border-radius:100px;border:1px solid var(--stroke-soft);color:var(--t-mid);}
/* ---------- RESULTADO ---------- */
.resband{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:clamp(30px,5vh,56px);}
@media(min-width:760px){.resband{grid-template-columns:repeat(3,1fr);}}
.rescard{padding:32px;border-radius:var(--r);background:var(--glass);border:1px solid var(--stroke-soft);transition:.35s var(--ease);}
.rescard:hover{border-color:var(--gold-bright);background:var(--glass-2);transform:translateY(-4px);}
.rescard .pre{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-low);margin-bottom:16px;}
.rescard .v{font-family:var(--serif);font-style:italic;font-size:clamp(3rem,6.5vw,4.6rem);line-height:.92;color:var(--gold-bright);}
.rescard .k{color:var(--t-mid);margin-top:12px;font-size:.94rem;}
.layers-grid{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:680px){.layers-grid{grid-template-columns:1fr 1fr;}}
.lchip{display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--stroke-soft);transition:.35s var(--ease);}
.lchip:hover{border-color:var(--gold);background:var(--glass-2);}
.lchip .n{font-family:var(--serif);font-style:italic;color:var(--gold-bright);font-size:1.1rem;}
/* .lchip .t — ver regra completa abaixo com light weight */
/* ---------- CTA / MANIFESTO ---------- */
.cta{position:relative;overflow:hidden;text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-block:clamp(80px,12vh,140px);}
.cta__glow{position:absolute;z-index:0;width:130vw;height:130vh;left:50%;top:50%;transform:translate3d(-50%,-50%,0);background:radial-gradient(ellipse at center, rgba(137,118,75,.28) 0%, rgba(137,118,75,.16) 20%, rgba(137,118,75,.07) 42%, rgba(137,118,75,.02) 62%, transparent 80%);pointer-events:none;filter:blur(24px);contain:paint;will-change:opacity;}
.cta__inner{position:relative;z-index:2;}
.cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6.8vw,5.8rem);line-height:1.02;letter-spacing:-.02em;max-width:20ch;margin-inline:auto;}
.cta h2 em{font-style:italic;color:var(--gold-bright);}
.cta .mantra{margin-top:26px;color:var(--t-mid);font-style:italic;font-family:var(--serif);font-size:clamp(1.1rem,2.4vw,1.7rem);}
.cta .mantra b{color:var(--gold-bright);font-style:normal;}
footer{border-top:0;margin-top:clamp(40px,6vh,80px);}
.foot{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;padding-block:48px;}
.foot .l{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-low);margin-bottom:8px;}
.foot .v{font-family:var(--serif);font-size:1rem;}
.foot .v.s{font-family:var(--sans);font-size:.9rem;color:var(--t-mid);}
/* ---------- reveals ---------- */
@media (prefers-reduced-motion: no-preference){
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal][data-d="1"]{transition-delay:.08s;}
[data-reveal][data-d="2"]{transition-delay:.16s;}
[data-reveal][data-d="3"]{transition-delay:.24s;}
[data-reveal][data-d="4"]{transition-delay:.32s;}
}
/* ============================================================
GALERIA DINÂMICA DE OCASIÕES (repertório vivo)
============================================================ */
.gallery{margin-top:clamp(48px,7vh,90px);}
.gallery__head{display:grid;grid-template-columns:1fr;gap:14px 48px;align-items:end;margin-bottom:clamp(22px,4vh,38px);}
@media(min-width:860px){.gallery__head{grid-template-columns:1.1fr .9fr;}}
.gallery__head .eyebrow{display:inline-flex;align-items:center;gap:10px;}
.gallery__t{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.04;margin-top:14px;}
.gallery__t em{font-style:italic;color:var(--gold-bright);}
.gallery__note{color:var(--t-mid);font-size:1.04rem;line-height:1.55;max-width:60ch;}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--urucum);display:inline-block;box-shadow:0 0 0 0 rgba(225,29,46,.5);animation:livepulse 2.2s infinite;}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(225,29,46,.55);}70%{box-shadow:0 0 0 9px rgba(225,29,46,0);}100%{box-shadow:0 0 0 0 rgba(225,29,46,0);}}
@media (prefers-reduced-motion: reduce){.livedot{animation:none;}}
.gallery__grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:560px){.gallery__grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.gallery__grid{grid-template-columns:repeat(4,1fr);}}
.gcard{background:var(--glass);border:1px solid var(--stroke-soft);border-radius:var(--r);overflow:hidden;transition:border-color .4s var(--ease),transform .4s var(--ease);}
.gcard:hover{border-color:var(--gold-bright) !important;transform:translateY(-2px) !important;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);}
.gcard__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0c0a08;}
.gcard__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transform:scale(1.05);transition:opacity .9s var(--ease),transform 7s linear;}
.gcard__layer.show{opacity:1;transform:scale(1.12);}
.gcard__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 42%,rgba(7,6,5,.82));}
.gcard__bar{position:absolute;top:0;left:0;right:0;height:2px;z-index:3;background:rgba(255,255,255,.09);}
.gcard__bar i{display:block;height:100%;width:0;background:var(--gold-bright);}
.gcard__b{padding:18px 18px 20px;}
.gcard__txt{transition:opacity .35s var(--ease),transform .35s var(--ease);}
.gcard__txt.flip{opacity:0;transform:translateY(9px);}
.gcard__p{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lift);margin-bottom:10px;font-weight:600;}
.gcard__n{font-family:var(--serif);font-style:italic;font-size:1.42rem;line-height:1.12;min-height:2.6em;color:var(--t-hi);}
.gcard__f{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:.78rem;letter-spacing:.04em;color:var(--t-mid);}
.gcard__f .gcard__sub{transition:opacity .35s var(--ease);}
/* ============================================================
CURSOR CUSTOMIZADO — circulo "Case Hans"
============================================================ */
.case-cursor{
position:fixed; top:0; left:0; z-index:9999;
width:92px; height:92px; border-radius:50%;
background:rgba(230,62,124,.95); color:#fff;
display:grid; place-items:center;
font-family:'Qlassy', Georgia, serif; font-weight:400; font-style:italic;
font-size:15px; letter-spacing:-.005em;
pointer-events:none;
transform:translate(-50%,-50%) scale(0);
transition:transform .35s cubic-bezier(.16,1,.3,1), background .25s ease;
text-align:center; line-height:1.05;
box-shadow:0 12px 32px -8px rgba(230,62,124,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
padding:0 8px;
}
.case-cursor.is-on{ transform:translate(-50%,-50%) scale(1); }
.case-cursor.is-link{ background:rgba(179,42,94,1); transform:translate(-50%,-50%) scale(1.15); }
@media(hover:none){ .case-cursor{ display:none; } }
@media(prefers-reduced-motion:reduce){ .case-cursor{ transition:none; } }
/* ============================================================
REVEAL-MORE — Botão expansível pra textos complementares
============================================================ */
.reveal-more{
display:inline-flex; align-items:center; gap:12px;
padding:11px 22px 11px 14px;
background:var(--glass); border:1px solid var(--stroke-soft);
border-radius:100px;
font-family:var(--sans); font-size:.78rem; font-weight:600;
letter-spacing:.06em; text-transform:uppercase;
color:var(--t-hi); cursor:pointer;
transition:.35s var(--ease);
margin-top:18px;
}
.reveal-more:hover{ border-color:var(--gold-bright); background:var(--glass-2); }
.reveal-more--pulse{ animation:rmpulse 2.6s ease-in-out infinite; }
@keyframes rmpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(225,29,46,.28); } 50%{ box-shadow:0 0 0 12px rgba(225,29,46,0); } }
@media(prefers-reduced-motion:reduce){ .reveal-more--pulse{ animation:none; } }
.reveal-more__icon{
width:26px; height:26px; border-radius:50%;
background:var(--urucum); color:#fff;
display:grid; place-items:center;
font-family:var(--serif); font-size:1.05rem; line-height:1;
transition:transform .35s var(--ease);
flex-shrink:0;
}
.reveal-more.is-open .reveal-more__icon{ transform:rotate(45deg); }
.reveal-detail{
overflow:hidden; max-height:0;
transition:max-height .55s var(--ease), margin .35s var(--ease), opacity .35s ease;
opacity:0;
}
.reveal-detail.is-open{ max-height:1200px; margin-top:22px; opacity:1; }
.reveal-detail p{ color:var(--t-mid); margin-bottom:14px; font-size:1.02rem; line-height:1.65; }
.reveal-detail p:last-child{ margin-bottom:0; }
.reveal-detail p strong{ color:var(--t-hi); font-weight:400; font-family:var(--serif); font-style:italic; }
/* ============================================================
RESULTADO HEAD — split copy + video editorial
============================================================ */
.resultado-head{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vh,48px);align-items:start;margin-bottom:clamp(28px,4vh,46px);}
@media(min-width:1000px){.resultado-head{grid-template-columns:1fr 1.05fr;gap:clamp(48px,6vw,90px);}}
.resultado-head__copy{display:flex;flex-direction:column;gap:0;}
.resultado-head__body{margin-top:clamp(28px,4vh,52px);max-width:64ch;}
.resultado-head__body p{color:var(--t-mid);font-size:1.05rem;line-height:1.7;margin-bottom:18px;}
.resultado-head__body p:last-child{margin-bottom:0;}
.resultado-head__video{position:relative;border-radius:var(--r);overflow:hidden;background:var(--glass);border:1px solid var(--stroke-soft);aspect-ratio:16/10;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);}
.resultado-head__video video{width:100%;height:100%;object-fit:cover;display:block;}
.resultado-head__video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 0%, transparent 65%, rgba(7,6,5,.45) 100%);pointer-events:none;}
/* ============================================================
HERO STATPANEL — entrada zoom-in tecnológica
============================================================ */
@media(prefers-reduced-motion:no-preference){
.statpanel{
animation:statpanelIn 1.85s cubic-bezier(.19,1.08,.32,1) .4s both;
transform-origin:center center;
perspective:1200px;
}
@keyframes statpanelIn{
0%{ opacity:0; transform:scale(2.4) translateY(60px); filter:blur(16px); }
18%{ opacity:.45; filter:blur(10px); }
50%{ opacity:1; filter:blur(3px); }
100%{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}
.hero__metrics .mcard{ animation:mcardIn 1.4s cubic-bezier(.19,1.08,.32,1) both; transform-origin:center; }
.hero__metrics .mcard:nth-child(1){ animation-delay:1.3s; }
.hero__metrics .mcard:nth-child(2){ animation-delay:1.5s; }
.hero__metrics .mcard:nth-child(3){ animation-delay:1.7s; }
@keyframes mcardIn{
0%{ opacity:0; transform:scale(1.85) translateY(36px); filter:blur(10px); }
25%{ opacity:.5; filter:blur(6px); }
100%{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}
}
/* ============================================================
IMAGE BRIDGE — presunto entre Statement e Sinopse
============================================================ */
.image-bridge{display:none !important;}
.image-bridge img{
position:absolute;
inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center 35%;
opacity:.72;
-webkit-mask-image:radial-gradient(ellipse at center, #000 38%, rgba(0,0,0,.7) 62%, rgba(0,0,0,.25) 82%, transparent 96%);
mask-image:radial-gradient(ellipse at center, #000 38%, rgba(0,0,0,.7) 62%, rgba(0,0,0,.25) 82%, transparent 96%);
}
/* Remover o ::before do statement já que agora a imagem está fora */
.statement::before{display:none !important;}
.statement::after{display:none !important;}
/* ============================================================
KARINE QUOTE — pin scroll travando no centro
============================================================ */
.karine-zone{display:none;
position:relative;
min-height:140vh;
margin-top:clamp(100px,14vh,180px);
margin-bottom:clamp(60px,9vh,120px);
padding-block:10vh;
}
.karine-pin{
position:sticky;
top:50%;
transform:translateY(-50%);
z-index:5;
padding-inline:var(--gut);
}
.karine-quote-old{
max-width:920px;
margin:0 auto;
transition:transform .9s cubic-bezier(.23,1.1,.32,1), box-shadow 1s cubic-bezier(.23,1.1,.32,1), border-color .6s ease;
}
.karine-quote-old.is-pinned{
transform:scale(1.06);
box-shadow:0 60px 140px rgba(0,0,0,.72);
border-color:var(--gold-bright);
}
/* ============================================================
RESULTADO HEAD — video alinhado ao topo do título
============================================================ */
.resultado-head{align-items:start !important;}
.resultado-head__video{aspect-ratio:4/3;}
/* Rescard valores -2pts (Voz própria, 8 camadas, Mensal) */
.rescard .v{font-size:clamp(2.4rem,5.5vw,3.7rem) !important;}
/* Lchips: número em serif italic gold, texto em SANS */
.lchip .t{font-family:var(--sans) !important; font-weight:300 !important; font-size:clamp(1.05rem,1.8vw,1.3rem) !important; line-height:1.32 !important; color:var(--t-hi); letter-spacing:.01em;}
/* Diminuir gap entre lchips grid e título de manifesto */
.layers-grid{margin-bottom:0 !important;margin-top:clamp(24px,4vh,40px);}
section.cta{padding-block-start:clamp(60px,10vh,140px) !important;}
/* ============================================================
NAV scroll spy — animação suave do indicador
============================================================ */
.nav__menu a{position:relative;}
.nav__menu a.active{background:var(--urucum);color:#fff;transform:scale(1.02);}
.nav__menu a{transition:background .5s var(--ease), color .4s ease, transform .4s var(--ease);}
/* ============================================================
FOOTER TUÁ no fim do case — espelha o site oficial
============================================================ */
.tua-site-footer{
position:relative;z-index:6;
background:var(--black);border-top:1px solid var(--stroke-soft);
padding:clamp(80px,12vh,140px) var(--gut) 32px;
}
.tua-site-footer__statement em{font-family:var(--serif);font-style:italic;color:var(--urucum);}
.tua-site-footer__giant{
font-family:'Inter',sans-serif;
font-weight:900;
font-size:clamp(5rem,22vw,22rem);
color:var(--urucum);
line-height:.78;
letter-spacing:-.045em;
text-align:center;
margin-top:clamp(60px,10vh,140px);
margin-bottom:clamp(20px,3vh,40px);
user-select:none;
}
.tua-site-footer__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr;gap:48px;}
@media(min-width:880px){.tua-site-footer__inner{grid-template-columns:1.3fr 1fr 1fr 1fr;}}
.tua-site-footer__logo{margin-bottom:14px;}
.tua-site-footer__logo img{height:36px;width:auto;display:block;}
.tua-site-footer__statement{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--t-hi);line-height:1.2;margin-top:18px;}
.tua-site-footer__statement b{font-style:normal;font-weight:400;color:var(--gold-bright);}
.tua-site-footer__col-title{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--t-low);margin-bottom:18px;}
.tua-site-footer__col ul{list-style:none;padding:0;margin:0;}
.tua-site-footer__col li{margin-bottom:10px;}
.tua-site-footer__col a{color:var(--t-mid);font-size:.92rem;transition:color .3s ease;}
.tua-site-footer__col a:hover{color:var(--gold-bright);}
.tua-site-footer__line{color:var(--t-mid);font-size:.92rem;margin-bottom:10px;}
.tua-site-footer__line a{color:var(--t-mid);}
.tua-site-footer__line a:hover{color:var(--gold-bright);}
.tua-site-footer__bottom{max-width:var(--maxw);margin:40px auto 0;padding-top:24px;border-top:1px solid var(--stroke-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--t-low);}
.tua-site-footer__bottom a{color:var(--t-low);}
.tua-site-footer__bottom a:hover{color:var(--gold-bright);}
/* ============================================================
LIFT EFFECT — elevation hover em todos os boxes
============================================================ */
.glass.bigstat,.glass.quotecard{transition:transform .45s cubic-bezier(.23,1.1,.32,1), box-shadow .55s ease, border-color .35s ease;}
.glass.bigstat:hover,.glass.quotecard:hover{transform:translateY(-3px) !important;box-shadow:0 14px 32px -12px rgba(0,0,0,.42) !important;border-color:var(--gold-bright) !important;}
.acc{transition:transform .45s cubic-bezier(.23,1.1,.32,1), box-shadow .55s ease, border-color .35s ease;}
.acc:hover{transform:translateY(-2px) !important;box-shadow:0 10px 24px -10px rgba(0,0,0,.38) !important;border-color:var(--gold-lift) !important;}
.lchip{transition:transform .45s cubic-bezier(.23,1.1,.32,1), background .35s ease, border-color .35s ease, box-shadow .55s ease;}
.lchip:hover{transform:translateY(-2px) !important;box-shadow:0 10px 22px -8px rgba(0,0,0,.4) !important;border-color:var(--gold-bright);}
.rescard{transition:transform .45s cubic-bezier(.23,1.1,.32,1), background .35s ease, border-color .35s ease, box-shadow .55s ease;}
.rescard:hover{transform:translateY(-3px) !important;box-shadow:0 14px 32px -12px rgba(0,0,0,.42) !important;border-color:var(--gold-bright);}
/* ============================================================
KARINE — FULL-SCREEN POPUP ao centralizar
============================================================ */
.karine-backdrop{
position:fixed;inset:0;
background:rgba(7,6,5,.92);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
opacity:0;visibility:hidden;pointer-events:none;
z-index:150;
transition:opacity .65s var(--ease), visibility .65s ease;
}
.karine-backdrop.show{opacity:1;visibility:visible;}
.karine-quote.is-fullscreen{
position:fixed !important;
top:50% !important; left:50% !important;
width:min(92vw, 1100px) !important;
max-height:88vh;
transform:translate(-50%,-50%) scale(1) !important;
z-index:200;
padding:clamp(48px,7vh,90px) clamp(40px,5vw,72px) !important;
border-color:var(--gold-bright) !important;
box-shadow:0 60px 160px rgba(0,0,0,.85) !important;
background:rgba(20,16,12,.92) !important;
}
.karine-quote.is-fullscreen p{
font-size:clamp(2rem,4.4vw,3.6rem) !important;
line-height:1.12 !important;
max-width:30ch !important;
}
.karine-quote.is-fullscreen .who{
margin-top:clamp(28px,4vh,48px) !important;
font-size:1.1em;
}
.karine-quote.is-fullscreen .ava{
width:64px !important; height:64px !important;
}
@media(prefers-reduced-motion:reduce){
.karine-backdrop{transition:none;}
.karine-quote.is-fullscreen{transform:translate(-50%,-50%) !important;}
}
/* Karine avatar com foto da Karine (sobrescreve background) */
.quotecard .who .ava.has-photo{
background:url('img/karine.jpg') center/cover !important;
color:transparent !important;
font-size:0;
}
/* ============================================================
LIFT EXTRA — hero boxes (statpanel + mcards)
============================================================ */
.statpanel{transition:transform .5s cubic-bezier(.23,1.1,.32,1), box-shadow .55s ease, border-color .35s ease;}
.statpanel:hover{transform:translateY(-3px) !important;box-shadow:0 16px 36px -14px rgba(0,0,0,.45) !important;border-color:var(--gold-bright) !important;}
.mcard{transition:transform .45s cubic-bezier(.23,1.1,.32,1), background .35s ease, border-color .35s ease, box-shadow .55s ease;}
.mcard:hover{transform:translateY(-2px) !important;box-shadow:0 12px 28px -10px rgba(0,0,0,.4) !important;border-color:var(--gold-bright) !important;background:var(--glass-2) !important;}
/* ============================================================
STATEMENT — entrada cinematográfica (blur + scale + reveal)
============================================================ */
@media(prefers-reduced-motion:no-preference){
.statement p[data-reveal]{
opacity:0 !important;
filter:blur(18px);
transform:scale(.94) translateY(24px) !important;
transition:opacity 1.6s cubic-bezier(.19,1.08,.32,1),
filter 1.8s cubic-bezier(.19,1.08,.32,1),
transform 1.8s cubic-bezier(.19,1.08,.32,1);
}
.statement p[data-reveal].in{
opacity:1 !important;
filter:blur(0);
transform:scale(1) translateY(0) !important;
}
/* Highlight words com pulse sutil pós-entrada */
.statement .hl, .statement .hg{
display:inline-block;
animation:statementGlow 4s ease-in-out infinite 3s;
}
@keyframes statementGlow{
0%, 100%{ text-shadow:0 0 0 transparent; }
50%{ text-shadow:0 0 28px rgba(225,29,46,.32), 0 0 50px rgba(225,29,46,.18); }
}
}
/* ============================================================
SINOPSE — split layout com imagem fundindo no fundo
============================================================ */
.sinopse-section{position:relative;overflow:hidden;padding-block:clamp(96px,13vh,180px);}
.sinopse-bg{
position:absolute;
top:4%; right:-6%; bottom:14%;
width:62vw; max-width:1080px;
background-image:url("img/presunto.webp");
background-size:115% auto;
background-position:55% 42%;
background-repeat:no-repeat;
opacity:.75;
-webkit-mask-image:
radial-gradient(ellipse at 62% center, #000 30%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.18) 80%, transparent 96%);
mask-image:
radial-gradient(ellipse at 62% center, #000 30%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.18) 80%, transparent 96%);
pointer-events:none;
z-index:0;
will-change:background-position,transform;
animation:kenBurnsHans 22s ease-in-out infinite;
}
@keyframes kenBurnsHans{
0%, 100%{ background-position:55% 42%; }
50%{ background-position:50% 48%; }
}
@media(prefers-reduced-motion:reduce){
.sinopse-bg{ animation:none; }
}
.sinopse-content{position:relative;z-index:2;}
/* Mobile: imagem menor e fade mais agressivo pra não atrapalhar leitura */
@media(max-width:1000px){
.sinopse-bg{
width:100vw; right:0;
height:60%;
top:auto; bottom:-10%;
transform:none;
opacity:.35;
-webkit-mask-image:radial-gradient(ellipse at center, #000 20%, rgba(0,0,0,.4) 50%, transparent 85%);
mask-image:radial-gradient(ellipse at center, #000 20%, rgba(0,0,0,.4) 50%, transparent 85%);
}
}
/* ============================================================
KARINE SECTION — sessão editorial dedicada
============================================================ */
.karine-section{
position:relative;
min-height:68vh;
padding:clamp(80px,12vh,150px) var(--gut);
display:flex;align-items:center;justify-content:center;
overflow:hidden;
background:linear-gradient(180deg, var(--black) 0%, #100c08 100%);
border-block:1px solid var(--stroke-soft);
}
.karine-section__bg{
display:none;
position:absolute;inset:0;z-index:0;
background-image:url("img/karine.jpg");
background-size:cover;background-position:center;
opacity:.18;
-webkit-mask-image:radial-gradient(ellipse at 30% 50%, #000 25%, rgba(0,0,0,.5) 55%, transparent 88%);
mask-image:radial-gradient(ellipse at 30% 50%, #000 25%, rgba(0,0,0,.5) 55%, transparent 88%);
filter:grayscale(60%) contrast(1.05);
animation:karineBgDrift 26s ease-in-out infinite;
}
@keyframes karineBgDrift{
0%,100%{ background-position:30% 50%; }
50%{ background-position:36% 54%; }
}
.karine-section__inner{
position:relative;z-index:2;
max-width:1100px;
width:100%;
display:flex;flex-direction:column;gap:clamp(40px,6vh,80px);
}
.karine-section__quote{
font-family:var(--serif);
font-weight:400;
font-size:clamp(2rem,4.6vw,4rem);
line-height:1.12;
letter-spacing:-.012em;
color:var(--t-hi);
max-width:30ch;
text-wrap:pretty;
}
.karine-section__break{ display:block; height:.55em; }
.karine-hl{
color:var(--gold-bright);
font-style:italic;
}
.karine-section__who{
display:flex;align-items:center;gap:18px;
}
.karine-section__ava{
width:72px;height:72px;border-radius:50%;
background:url("img/karine.jpg") center/cover;
border:1px solid var(--stroke);
flex-shrink:0;
filter:grayscale(100%) contrast(1.05);
}
.karine-section__name{
font-family:var(--serif);font-style:italic;
font-size:1.2rem;color:var(--t-hi);margin-bottom:4px;
}
.karine-section__role{
font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--t-mid);font-weight:500;
}
/* Entrada cinematográfica */
@media(prefers-reduced-motion:no-preference){
.karine-section__quote[data-reveal]{
opacity:0 !important;
filter:blur(18px);
transform:scale(.94) translateY(24px) !important;
transition:opacity 1.6s cubic-bezier(.19,1.08,.32,1),
filter 1.8s cubic-bezier(.19,1.08,.32,1),
transform 1.8s cubic-bezier(.19,1.08,.32,1);
}
.karine-section__quote[data-reveal].in{
opacity:1 !important;
filter:blur(0);
transform:scale(1) translateY(0) !important;
}
.karine-hl{
animation:karineGlow 4.5s ease-in-out infinite 2.5s;
}
@keyframes karineGlow{
0%,100%{ text-shadow:0 0 0 transparent; }
50%{ text-shadow:0 0 22px rgba(205,179,122,.32), 0 0 44px rgba(205,179,122,.18); }
}
}
/* ============================================================
KARINE STICKY + RESULTADO PASSANDO POR CIMA
============================================================ */
.karine-resultado-stack{position:relative;}
.karine-resultado-stack > .karine-section{
position:sticky;
top:0;
z-index:1;
}
.karine-resultado-stack > .resultado-section{
position:relative;
z-index:2;
background:var(--black);
border-top:1px solid var(--stroke-soft);
}
/* ============================================================
RESULTADO redesign — vídeo lateral + dark vign
============================================================ */
.resultado-section{padding-block:0;}
.resultado__head{
position:relative;
overflow:hidden;
min-height:88vh;
padding:clamp(110px,16vh,200px) var(--gut) clamp(24px,4vh,48px);
}
.resultado__media{
position:absolute;top:0;right:0;bottom:0;
width:60vw;max-width:1200px;
overflow:hidden;opacity:.92;
z-index:1;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 6%, rgba(0,0,0,.35) 18%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.92) 42%, #000 55%, #000 78%, rgba(0,0,0,.6) 96%, rgba(0,0,0,.3) 100%),
linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.85) 52%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.18) 80%, transparent 92%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 6%, rgba(0,0,0,.35) 18%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.92) 42%, #000 55%, #000 78%, rgba(0,0,0,.6) 96%, rgba(0,0,0,.3) 100%),
linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.85) 52%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.18) 80%, transparent 92%);
mask-composite:intersect;
}
.resultado__media video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.resultado__vign{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(90deg, var(--black) 0%, var(--black) 22%, rgba(7,6,5,.55) 42%, rgba(7,6,5,.18) 65%, transparent 88%);
}
.resultado__head-inner{
position:relative;z-index:3;
max-width:1600px;margin:0 auto;
display:flex;flex-direction:column;gap:clamp(20px,3vh,32px);
}
.resultado__title{
max-width:14ch !important;
font-size:clamp(2.6rem,6vw,5.2rem) !important;
line-height:1.02 !important;
}
.resultado__title em{font-style:italic;color:var(--gold-bright);}
.resultado-body{max-width:60ch;}
.resultado-body p{color:var(--t-mid);font-size:1.06rem;line-height:1.64;margin-bottom:14px;}
.resultado-body p:last-child{margin-bottom:0;}
.resultado__bottom{
position:relative;z-index:3;
padding:0 var(--gut) clamp(40px,6vh,80px);
margin-top:clamp(-32px,-4vh,-8px);
background:var(--black);
}
/* Mobile: vídeo vai pro fundo, texto ocupa largura */
@media(max-width:1000px){
.resultado__media{width:100vw;opacity:.55;
-webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 18%, #000 50%, #000 100%);
mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 18%, #000 50%, #000 100%);}
.resultado__vign{background:linear-gradient(180deg, var(--black) 0%, rgba(7,6,5,.55) 60%, transparent 100%);}
}
/* Esconder os estilos antigos do resultado-head (substituídos) */
.resultado-head{display:none !important;}
/* Rescard .v menor */
.rescard .v{font-size:clamp(2.1rem,4.6vw,3.3rem) !important;}
/* Lchips: cor + corpo do body text */
.lchip .t{
font-family:var(--sans) !important;
font-weight:400 !important;
font-size:1.06rem !important;
line-height:1.5 !important;
color:var(--t-mid) !important;
letter-spacing:0 !important;
}
/* ============================================================
RESCARD — entrada dramática igual ao statpanel do hero
============================================================ */
@media(prefers-reduced-motion:no-preference){
.rescard[data-reveal]{
opacity:0 !important;
transform:scale(2.2) translateY(50px) !important;
filter:blur(14px);
transition:opacity 1.7s cubic-bezier(.19,1.08,.32,1),
filter 1.9s cubic-bezier(.19,1.08,.32,1),
transform 1.9s cubic-bezier(.19,1.08,.32,1);
}
.rescard[data-reveal].in{
opacity:1 !important;
transform:scale(1) translateY(0) !important;
filter:blur(0);
}
/* Stagger entre os 3 cards */
.rescard[data-reveal][data-d="1"]{transition-delay:.15s;}
.rescard[data-reveal][data-d="2"]{transition-delay:.3s;}
}
/* ============================================================
CTA: layout — inner centered, footer/video stacked depois
============================================================ */
.cta__glow{flex-shrink:0;}
.cta__inner{flex-grow:0;margin:auto 0;}
.cta > footer{margin-top:auto;width:100%;}
/* ============================================================
MANIFESTO VIDEO — banner vertical depois dos créditos
============================================================ */
.manifesto-video{
position:relative;
width:100%;
max-width:none;
margin:clamp(40px,6vh,80px) 0 0;
border-radius:0;
overflow:hidden;
background:#0a0908;
}
.manifesto-video video{
width:100%;
height:auto;
display:block;
}
/* ============================================================
CTA H2 — entrada cinematográfica
============================================================ */
@media(prefers-reduced-motion:no-preference){
.cta h2[data-reveal]{
opacity:0 !important;
filter:blur(18px);
transform:scale(.94) translateY(28px) !important;
transition:opacity 1.7s cubic-bezier(.19,1.08,.32,1),
filter 1.9s cubic-bezier(.19,1.08,.32,1),
transform 1.9s cubic-bezier(.19,1.08,.32,1);
}
.cta h2[data-reveal].in{
opacity:1 !important;
filter:blur(0);
transform:scale(1) translateY(0) !important;
}
.cta h2 em{
display:inline-block;
animation:ctaGlow 4.5s ease-in-out infinite 3s;
}
@keyframes ctaGlow{
0%,100%{ text-shadow:0 0 0 transparent; }
50%{ text-shadow:0 0 26px rgba(205,179,122,.32), 0 0 50px rgba(205,179,122,.18); }
}
}
/* ============================================================
MOBILE — refinamentos pré-deploy
Objetivo: mais simples, mais leve, sem perder identidade
============================================================ */
/* Tablet / small laptop */
@media(max-width:1000px){
.sec{padding-block:clamp(64px,9vh,110px);}
.hero{padding-top:96px;}
.hero__glow{width:90vw;height:90vw;filter:blur(14px);}
.resultado__head{padding:clamp(70px,10vh,120px) var(--gut) clamp(20px,3vh,36px);min-height:auto;}
.karine-section{min-height:auto;padding:clamp(60px,9vh,110px) var(--gut);}
.cta{min-height:auto;padding-block:clamp(60px,9vh,110px);}
.cta__glow{width:120vw;height:120vh;filter:blur(18px);}
}
/* Phone */
@media(max-width:680px){
:root{ --gut:clamp(20px,5vw,32px); }
.sec{padding-block:clamp(48px,7vh,80px);}
.nav{padding:8px var(--gut);top:56px;}
.nav__logo{font-size:1.1rem;}
/* Hero compacto */
.hero{padding-top:80px;min-height:92svh;}
.hero h1{font-size:clamp(2.4rem,9vw,3.6rem);margin:14px 0 12px;}
.hero__sub{font-size:.98rem;}
.hero__ctas{margin-top:22px;gap:10px;}
.hero__ctas .btn{padding:13px 20px;font-size:.76rem;}
.hero__side{gap:12px;}
.statpanel{padding:22px 20px;}
.statpanel .big{font-size:1.95rem;margin:14px 0 8px;}
.statpanel .lbl{font-size:.88rem;}
.hero__metrics{grid-template-columns:1fr 1fr;gap:8px;}
.hero__metrics .mcard:nth-child(3){grid-column:1 / -1;}
.mcard{padding:16px 14px;}
.mcard .v{font-size:1.5rem;}
/* Statement */
.statement{padding-block:clamp(80px,11vh,130px);}
.statement p{font-size:clamp(2rem,8vw,3rem);}
/* Sinopse */
.sinopse-section{padding-block:clamp(60px,8vh,90px);}
.sec-title{font-size:clamp(2rem,8vw,3rem);}
.sinopse-section p{font-size:1rem !important;}
/* Marquee */
.marquee{padding-block:14px;}
.marquee span{font-size:1.05rem;}
/* Desafio */
.feature{padding:24px;min-height:380px;}
.feature h3{font-size:1.55rem;}
.bigstat{padding:24px;}
.bigstat .v{font-size:3.2rem;}
.quotecard{padding:24px;}
.quotecard p{font-size:1.25rem;}
/* Reveal-more */
.reveal-more{padding:10px 18px 10px 12px;font-size:.72rem;}
.reveal-more__icon{width:22px;height:22px;font-size:.95rem;}
/* Pills */
.pill{padding:8px 14px;font-size:.68rem;}
/* Método: gallery */
.gallery__t{font-size:1.5rem;}
.gallery__note{font-size:.95rem;}
.gcard__media{aspect-ratio:1/1;}
.gcard__n{font-size:1.2rem;min-height:2.2em;}
.gcard__b{padding:14px 14px 16px;}
/* Accordion */
.acc__head{padding:20px 22px;gap:14px;}
.acc__t{font-size:1.15rem;}
.acc.open .acc__body{max-height:520px;}
.acc__inner{padding:0 22px 22px;}
.acc__inner p{font-size:.96rem;}
/* Karine */
.karine-section__quote{font-size:clamp(1.7rem,7vw,2.4rem);max-width:24ch;}
.karine-section__ava{width:56px;height:56px;}
.karine-section__name{font-size:1.05rem;}
.karine-section__role{font-size:.68rem;}
/* Resultado */
.resultado__title{font-size:clamp(2.2rem,8vw,3.2rem) !important;}
.resultado-body p{font-size:.98rem;}
.resultado__media{opacity:.4;}
.rescard{padding:24px;}
.rescard .v{font-size:clamp(2rem,9vw,3rem) !important;}
.rescard .k{font-size:.88rem;}
.lchip{padding:18px 20px;gap:14px;}
.lchip .t{font-size:1rem !important;}
.lchip .n{font-size:1rem;}
/* CTA */
.cta h2{font-size:clamp(2rem,8.5vw,3.4rem);max-width:18ch;}
.cta .mantra{font-size:1.1rem;margin-top:18px;}
.cta__glow{width:110vw;height:110vh;filter:blur(14px);background:radial-gradient(ellipse at center, rgba(137,118,75,.32) 0%, rgba(137,118,75,.14) 28%, rgba(137,118,75,.04) 55%, transparent 78%);}
.cta .btn--gold{padding:14px 26px !important;font-size:.78rem;}
/* Foot */
.foot{padding-block:32px;gap:18px 32px;}
.foot .l{font-size:.58rem;}
.foot .v.s{font-size:.84rem;}
/* Touch targets garantidos */
.nav__menu a, .btn, .reveal-more, .pill, .acc__head{min-height:44px;}
.btn, .reveal-more{touch-action:manipulation;}
}
}
/* Pausar parallax via JS dataset não acontece aqui — só CSS pra reduzir custo de transform a cada scroll */
@media(max-width:680px){
[data-parallax]{transform:none !important;}
}
/* ============================================================
MÉTODO — imagem joelho de fundo (mesmo efeito da Sinopse)
============================================================ */
.metodo-section{position:relative;overflow:hidden;}
.metodo-bg{
position:absolute;
top:0; right:5%;
height:78vh; min-height:580px;
width:55vw; max-width:1000px;
background-image:url("img/joe.webp");
background-size:cover;
background-position:30% 50%;
background-repeat:no-repeat;
opacity:.6;
-webkit-mask-image:
radial-gradient(ellipse at 30% 50%, #000 18%, rgba(0,0,0,.65) 48%, rgba(0,0,0,.2) 75%, transparent 92%),
linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 10%, #000 25%, #000 72%, rgba(0,0,0,.45) 90%, transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
radial-gradient(ellipse at 30% 50%, #000 18%, rgba(0,0,0,.65) 48%, rgba(0,0,0,.2) 75%, transparent 92%),
linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 10%, #000 25%, #000 72%, rgba(0,0,0,.45) 90%, transparent 100%);
mask-composite:intersect;
pointer-events:none;
z-index:0;
will-change:background-position,transform;
animation:kenBurnsHans 24s ease-in-out infinite;
}
.metodo-content{position:relative;z-index:2;}
@media(max-width:1000px){
.metodo-bg{
width:100vw; right:0;
height:55%;
top:auto; bottom:-8%;
transform:none;
opacity:.3;
-webkit-mask-image:radial-gradient(ellipse at center, #000 20%, rgba(0,0,0,.4) 50%, transparent 85%);
mask-image:radial-gradient(ellipse at center, #000 20%, rgba(0,0,0,.4) 50%, transparent 85%);
}
}
/* Reduzir gap entre Desafio e Método (estavam dobrando padding) */
#desafio{padding-block-end:clamp(40px,6vh,80px);}
.metodo-section{padding-block-start:clamp(40px,6vh,80px);}
/* Reduzir gap entre o botão "Do feed à gôndola" e os rescards (mesmo padrão Desafio→Método) */
.resultado__head{min-height:auto !important;padding-block-end:clamp(40px,6vh,80px) !important;}
.resultado__bottom{margin-top:0 !important;}
/* ============================================================
TUÁ SHELL v2 — nav + footer-rich (com @media queries preservados)
============================================================ */
:root{
--red: #e11d2e;
--green: #34c759;
--fg: #f5f3ee;
--bg: #0b0b0d;
}
/* ============ FOOTER ENRIQUECIDO (v5) ============ */
.footer-rich {
position: relative;
background: var(--bg, #0b0b0f);
border-top: 1px solid var(--line, rgba(245,243,238,0.12));
padding: 96px 40px 36px;
color: var(--fg-muted, #8a8680);
font-family: var(--sans, 'Helvetica Neue', sans-serif);
font-size: 14px; line-height: 1.6;
overflow: hidden;
}
.footer-rich::before {
content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(225,29,46,.55), transparent);
}
.footer-rich__inner { max-width: 1600px; margin: 0 auto; position: relative; z-index: 1; }
/* Cabeçalho editorial */
.footer-rich__head {
display: flex; flex-direction: column; gap: 22px;
padding-bottom: 60px; border-bottom: 1px solid var(--line, rgba(245,243,238,0.12));
}
.footer-rich__eyebrow {
display: flex; align-items: center; gap: 12px;
font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: rgba(245,243,238,.45);
}
.footer-rich__pulse {
width: 7px; height: 7px; border-radius: 50%; background: var(--red, #e11d2e); flex: 0 0 auto;
box-shadow: 0 0 0 0 rgba(225,29,46,.6); animation: fPulse 2.8s ease-out infinite;
}
@keyframes fPulse {
0% { box-shadow: 0 0 0 0 rgba(225,29,46,.55); }
70% { box-shadow: 0 0 0 11px rgba(225,29,46,0); }
100% { box-shadow: 0 0 0 0 rgba(225,29,46,0); }
}
.footer-rich__statement {
font-family: var(--serif); font-weight: 400;
font-size: clamp(29px, 4.4vw, 61px); line-height: 1.06; letter-spacing: -.015em;
color: var(--fg, #f5f3ee); max-width: 24ch;
}
.footer-rich__statement em { font-style: italic; color: var(--red, #e11d2e); }
/* Grid utilitário */
.footer-rich__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;
padding: 56px 0 64px;
}
.footer-rich__col-title {
font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
color: rgba(245,243,238,.4); margin-bottom: 22px;
display: flex; align-items: center; gap: 12px;
}
.footer-rich__col-title::before { content: ''; width: 20px; height: 1px; background: rgba(245,243,238,.28); }
.footer-rich__col ul { list-style: none; }
.footer-rich__col li { margin-bottom: 13px; }
.footer-rich__col a, .footer-rich__line a {
position: relative; color: rgba(245,243,238,.82); text-decoration: none;
font-size: 15px; letter-spacing: .01em; transition: color .25s ease;
}
.footer-rich__col ul li a::after, .footer-rich__line a::after {
content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
background: var(--red, #e11d2e); transform: scaleX(0); transform-origin: left;
transition: transform .35s var(--ease, ease);
}
.footer-rich__col ul li a:hover::after, .footer-rich__line a:hover::after { transform: scaleX(1); }
.footer-rich__col a:hover, .footer-rich__line a:hover { color: var(--fg, #f5f3ee); }
.footer-rich__line { margin-bottom: 12px; }
.footer-rich__muted { color: rgba(245,243,238,.5); margin-bottom: 8px; line-height: 1.55; }
/* Logotipo oficial gigante (estático, sem ação) — full-width */
.footer-rich__logo { margin: 8px 0 40px; pointer-events: none; }
.footer-rich__logo img {
display: block; width: 100%; max-width: 100%; height: auto;
}
.footer-rich__bottom {
padding-top: 28px; border-top: 1px solid var(--line, rgba(245,243,238,0.12));
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 16px;
font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245,243,238,.45);
}
.footer-rich__legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-rich__legal a {
color: rgba(245,243,238,.55);
border-bottom: 1px solid rgba(245,243,238,.18); padding-bottom: 2px;
transition: color .25s ease, border-color .25s ease;
}
.footer-rich__legal a:hover { color: var(--red, #e11d2e); border-color: var(--red, #e11d2e); }
.footer-rich__copyright { color: rgba(245,243,238,.45); }
@media (max-width: 980px) {
.footer-rich__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
.footer-rich { padding: 64px 24px 28px; }
.footer-rich__grid { grid-template-columns: 1fr; gap: 36px; }
.footer-rich__logo img { max-width: 100%; }
.footer-rich__bottom { flex-direction: column; align-items: flex-start; }
}
/* ---------- nav ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 28px 40px;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
color: var(--fg);
}
/* só os textos invertem pra ficar legíveis em fundo claro/escuro; o logo fica intacto (vermelho) */
/* nav legibility — text-shadow em vez de mix-blend-mode (mais previsível) */
.nav__brand { font-family: var(--serif); font-size: 20px; font-style: italic; letter-spacing: -.01em; display: inline-flex; align-items: center; }
.nav__brand img { height: 30px; width: auto; display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(0,0,0,.25)); }
.nav__menu { display: flex; gap: 40px; justify-content: center; }
.nav__menu a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; position: relative; padding: 6px 2px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5), 0 0 12px rgba(0,0,0,.28); transition: color .3s ease; }
.nav__menu a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .5s var(--ease); }
.nav__menu a:hover::after { right: 0; }
.nav__meta { display: flex; justify-content: flex-end; gap: 24px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; align-items: center; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5), 0 0 12px rgba(0,0,0,.28); }
.nav__clock { font-variant-numeric: tabular-nums; }
.nav__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s ease-in-out infinite; box-shadow: 0 0 12px var(--green); }
@keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (max-width: 860px) {
.nav { padding: 20px; grid-template-columns: 1fr auto; }
.nav__menu { display: none; }
}
@media (max-width: 860px) {
.nav { padding: 20px; grid-template-columns: 1fr auto; }
.nav__menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.nav__brand::before, .nav__brand::after { transition: none; }
}
@media (max-width: 860px) {
.nav__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
position: fixed; right: 18px; top: 16px; width: 42px; height: 42px; padding: 10px;
background: none; border: 0; cursor: pointer; z-index: 120; mix-blend-mode: difference; }
.nav__burger span { display: block; width: 100%; height: 1.5px; background: var(--fg, #f5f3ee);
transition: transform .4s cubic-bezier(0.22,1,0.36,1), opacity .3s ease; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
}
@media (min-width: 861px) { .nav-mobile, .nav__burger { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nav-mobile, .nav-mobile a, .nav__burger span { transition: none; } }
@media (max-width: 980px) {
.footer-rich__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
.footer-rich { padding: 64px 24px 28px; }
.footer-rich__grid { grid-template-columns: 1fr; gap: 36px; }
.footer-rich__logo img { max-width: 100%; }
.footer-rich__bottom { flex-direction: column; align-items: flex-start; }
}
/* ============================================================
FIX nav: garantir visibilidade do menu (Estúdio/Serviços/etc)
Override de mix-blend-mode + cores + display
============================================================ */
.nav{padding:20px clamp(28px,4vw,52px);grid-template-columns:auto 1fr auto;display:grid;gap:32px;align-items:center;background:transparent;}
.nav__brand img{height:28px;}
.nav__menu, .nav__meta{mix-blend-mode:normal !important;}
.nav__menu{
display:flex !important;
justify-content:center;
gap:32px !important;
padding:0 !important;
background:transparent !important;
border:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.nav__menu a{
color:rgba(248,245,238,.7) !important;
font-size:12px !important;
letter-spacing:.16em;
text-transform:uppercase;
padding:6px 2px !important;
font-weight:500;
}
.nav__menu a:hover{ color:rgba(248,245,238,1) !important; }
.nav__menu a::after{ background:currentColor !important; }
.nav__meta{
display:flex;
justify-content:flex-end;
gap:18px;
align-items:center;
color:rgba(248,245,238,.65);
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
}
.nav__clock{font-variant-numeric:tabular-nums;}
.nav__dot{
width:8px;height:8px;border-radius:50%;
background:rgb(52,199,89) !important;
box-shadow:0 0 12px rgba(52,199,89,.65);
animation:tuaDotPulse 2s ease-in-out infinite;
}
@keyframes tuaDotPulse{
0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.55);}
70%{box-shadow:0 0 0 10px rgba(52,199,89,0);}
}
@media (max-width:880px){
.nav{grid-template-columns:auto 1fr;}
.nav__menu, .nav__meta{display:none !important;}
}
/* ============================================================
MOBILE LITE — versão simplificada (≤880px)
Vídeos: 1 por card, sem rotação. Boxes: zero efeitos.
============================================================ */
@media (max-width: 880px){
/* === Vídeos ON, mas sem rotação na galeria (lógica no JS) === */
.gcard__layer{ transition: none !important; transform: none !important; animation: none !important; }
.gcard__layer{ opacity: 1 !important; }
.gcard__bar{ display: none; }
.gcard__txt{ transition: none !important; }
/* === Animações infinitas: OFF === */
.sinopse-bg, .metodo-bg, .karine-section__bg{ animation: none !important; }
.pill--pulse, .reveal-more--pulse, .livedot, .pill .dot, .nav__logo .dot{ animation: none !important; }
.statement .hl, .statement .hg, .karine-hl, .cta h2 em{ animation: none !important; text-shadow: none !important; }
.karine-section__quote, .cta h2{ filter: none !important; }
.marquee__track{ animation-duration: 60s; }
/* === Animações de ENTRADA dos boxes: OFF (apareciam com blur+scale+translate) === */
[data-reveal]{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.statpanel, .hero__metrics .mcard, .rescard, .karine-section__quote{
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
/* === Hovers nos boxes: TUDO OFF === */
.feature:hover, .mcard:hover, .statpanel:hover, .acc:hover,
.lchip:hover, .rescard:hover, .gcard:hover, .chip:hover,
.glass:hover, .quotecard:hover, .bigstat:hover, .pill:hover,
.reveal-more:hover, .btn:hover, .case-ready__card:hover{
transform: none !important;
box-shadow: none !important;
border-color: inherit !important;
background: inherit !important;
}
.feature:hover .feature__bg{ transform: none !important; }
.case-ready__card:hover .case-ready__media img{ transform: none !important; }
.gcard:hover{ animation: none !important; }
/* Transições dos boxes: OFF (tirar lift/cursor effect) */
.feature, .mcard, .statpanel, .acc, .lchip, .rescard, .gcard,
.glass, .quotecard, .bigstat, .pill, .reveal-more, .btn{
transition: none !important;
}
/* === Filters/blurs pesados: simplificar === */
.cta__glow{
width: 100vw !important; height: 100vh !important;
filter: none !important;
background: radial-gradient(circle at center, rgba(137,118,75,.18) 0%, transparent 70%) !important;
}
.karine-backdrop{
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: rgba(7,6,5,.96) !important;
}
.glass, .pill, .nav__menu, .reveal-more{
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* === Karine sticky → relative (sticky é caro em mobile) === */
.karine-resultado-stack > .karine-section{ position: relative !important; }
}
/* ============================================================
RETINA / PERFORMANCE — mantém o visual, reduz o CUSTO de renderizar
Aplicado em 2026-06-30 (estratégia idêntica ao case-afonso).
============================================================ */
/* 1. content-visibility: pula render fora da viewport */
#sinopse, #metodo, #resultado, #peca-01, #peca-02, #peca-03,
.cta, .metodo-section{
content-visibility:auto;
contain-intrinsic-size:auto 900px;
}
/* 2. Containment: isola repaint de cards pesados */
.glass, .gcard, .mcard, .gallery__t, .pcard, .pcardE{
contain:layout paint style;
}
/* 3. GPU layer promotion pros vídeos */
.hero__media video, .gcard__media video, .manifesto-video video,
video{
transform:translate3d(0,0,0);
backface-visibility:hidden;
}
/* 4. Marquee force layer */
.marquee__track{
transform:translate3d(0,0,0);
backface-visibility:hidden;
}
/* 5. Pointer-events none em decorações */
.hero__glow, .hero__vign, .cta__glow{
pointer-events:none;
}
/* 6. Isolation em hero e cards de vídeo */
.hero, .gcard, .manifesto-video{
isolation:isolate;
}
/* Override 2026-06-30: cards .glass que NÃO ficam sobre vídeo viram sólido
(statpanel fica sobre vídeo do hero — mantém blur). */
.glass.bigstat, .glass.quotecard{
background:#161312 !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
/* ============================================================
Override 2026-06-30: entrada MAIS LEVE dos 3 mcards do hero
Translação menor (8px), duração curta (0.4s), sem delay
============================================================ */
.hero__metrics[data-reveal]{
transition:opacity .45s var(--ease), transform .45s var(--ease) !important;
transform:translateY(8px) !important;
}
.hero__metrics[data-reveal].in{
transform:none !important;
}
/* Se cada mcard for individualmente reveal, mesma regra */
.hero__metrics .mcard[data-reveal]{
transition:opacity .4s var(--ease), transform .4s var(--ease) !important;
transform:translateY(6px) !important;
}
.hero__metrics .mcard[data-reveal].in{
transform:none !important;
}
/* ============================================================
Override 2026-06-30: rescards e lchips com entrada LEVE
(igual ao tratamento dos mcards do hero)
============================================================ */
.rescard[data-reveal],
.lchip[data-reveal]{
transition:opacity .4s var(--ease), transform .4s var(--ease) !important;
transform:translateY(6px) !important;
}
.rescard[data-reveal].in,
.lchip[data-reveal].in{
transform:none !important;
}
/* ============================================================
TIPOGRAFIA EDITORIAL — Helvetica Light caixa alta (config Home)
Aplicado em .acc__t (títulos dos accordions) e .rescard .v (métricas)
============================================================ */
.acc__t,
.rescard .v {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-weight: 300 !important;
font-style: normal !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
line-height: 1.02 !important;
}
/* Ajuste de tamanho pro .acc__t (caixa alta fica mais "pesado" visualmente) */
.acc__t {
font-size: clamp(1.1rem, 2.2vw, 1.7rem) !important;
}
/* Ajuste tamanho .rescard .v (era italic gigante, agora caixa alta médio) */
.rescard .v {
font-size: clamp(2rem, 4.6vw, 3.2rem) !important;
}
/* ============================================================
BRAND BOOK CINEMA (herdado do case-afonso.css)
============================================================ */
/* ============================================================
GALERIA BRAND BOOK — Horizontal Cinema + lightbox cinemático
============================================================ */
.bbhead{margin-bottom:clamp(28px,4vh,52px);}
.bbhead__row{display:grid;grid-template-columns:1fr;gap:24px;align-items:end;}
@media(min-width:880px){.bbhead__row{grid-template-columns:1.3fr 1fr;gap:60px;}}
.bbhead h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3.6vw,2.8rem);letter-spacing:-.01em;margin:14px 0 0;line-height:1.04;max-width:22ch;}
.bbhead h2 em{font-style:italic;color:var(--rose-deep);}
.bbhead__col{display:flex;flex-direction:column;gap:14px;}
/* Brand Book — eyebrow em rosa (não amarelo) */
.bbhead .eyebrow{color:var(--rose-deep);}
/* Lead e CTA — sans, mesmo tamanho do corpo de texto padrão (1.08rem) */
.bbhead__lead{color:var(--ink-soft);font-size:1.08rem;line-height:1.6;max-width:52ch;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
.bbhead__lead strong{color:var(--ink);font-weight:600;}
.bbhead__cta{color:var(--ink-soft);font-size:1.08rem;line-height:1.6;max-width:52ch;margin-top:14px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;}
.bbhead__cta strong{color:var(--rose-deep);font-weight:600;}
/* CINEMA — full-bleed track horizontal */
.cin{position:relative;}
.cin__track{
display:flex;gap:clamp(16px,2vw,28px);
overflow-x:auto;scroll-snap-type:x mandatory;
padding:24px var(--gut) 44px;
scrollbar-width:none;-ms-overflow-style:none;
scroll-behavior:smooth;
}
.cin__track::-webkit-scrollbar{display:none;}
.cin__item{
position:relative;
flex:0 0 78vw;max-width:1100px;
aspect-ratio:16/9;
border-radius:14px;overflow:hidden;
scroll-snap-align:center;
cursor:zoom-in;border:0;padding:0;margin:0;background:rgba(255,255,255,.32);
font-family:inherit;text-align:left;color:#fff;
box-shadow:0 24px 60px -30px rgba(48,46,38,.4);
transition:transform .65s var(--ease),box-shadow .65s ease;
}
@media(min-width:1100px){.cin__item{flex-basis:64vw;}}
@media(max-width:760px){.cin__item{flex-basis:88vw;}}
.cin__item:hover{
transform:translateY(-6px);
box-shadow:0 38px 90px -32px rgba(48,46,38,.55),0 8px 24px -12px rgba(165,113,106,.24);
}
.cin__item:focus-visible{outline:2px solid var(--rose);outline-offset:4px;}
.cin__item img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.6s cubic-bezier(.33,.5,.4,.95);
}
.cin__item:hover img{transform:scale(1.025);}
.cin__item::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(40,42,33,.6) 100%);
opacity:0;transition:opacity .45s ease;pointer-events:none;
}
.cin__item:hover::after{opacity:1;}
.cin__item__meta{
position:absolute;left:0;right:0;bottom:0;z-index:2;
display:flex;flex-direction:column;gap:4px;
padding:20px 24px;color:#fff;
transform:translateY(10px);opacity:0;
transition:transform .55s cubic-bezier(.19,1.08,.32,1),opacity .35s ease;
}
.cin__item:hover .cin__item__meta{transform:none;opacity:1;}
.cin__item__num{font-family:var(--serif);font-style:italic;font-size:.95rem;color:rgba(255,255,255,.82);}
.cin__item__lbl{font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,1.6vw,1.45rem);letter-spacing:-.005em;line-height:1.15;}
/* Indicador (dots) */
.cin__indicator{
display:flex;gap:10px;justify-content:center;align-items:center;
margin-top:8px;padding:0 var(--gut);
}
.cin__dot{
width:36px;height:3px;border-radius:100px;border:0;
background:rgba(57,55,56,.18);cursor:pointer;padding:0;
transition:background .35s ease,transform .35s var(--ease);
}
.cin__dot:hover{background:rgba(57,55,56,.36);}
.cin__dot.is-active{background:var(--rose);transform:scaleX(1.4);}
.cin__dot:focus-visible{outline:2px solid var(--rose);outline-offset:4px;}
/* ===== LIGHTBOX cinemático ===== */
.bblightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;visibility:hidden;pointer-events:none;}
.bblightbox.is-open{visibility:visible;pointer-events:auto;}
.bblightbox__backdrop{position:absolute;inset:0;background:rgba(247,242,237,.78);backdrop-filter:blur(24px) saturate(1.15);-webkit-backdrop-filter:blur(24px) saturate(1.15);opacity:0;transition:opacity .55s cubic-bezier(.65,.02,.3,1);cursor:zoom-out;}
.bblightbox.is-open .bblightbox__backdrop{opacity:1;}
.bblightbox__stage{position:relative;z-index:1;max-width:min(92vw,1600px);max-height:82vh;display:flex;align-items:center;justify-content:center;margin:0;padding:0;}
.bblightbox__img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 40px 100px -30px rgba(48,46,38,.55),0 12px 32px -16px rgba(48,46,38,.28);opacity:0;transform:scale(.85) translateY(20px);transition:transform .65s cubic-bezier(.65,.02,.3,1),opacity .45s ease;}
.bblightbox.is-open .bblightbox__img{opacity:1;transform:none;}
.bblightbox__bar{position:absolute;top:24px;left:24px;right:24px;z-index:3;display:flex;align-items:center;gap:18px;font-family:var(--sans);opacity:0;transform:translateY(-12px);transition:opacity .55s ease .15s, transform .55s cubic-bezier(.65,.02,.3,1) .15s;}
.bblightbox.is-open .bblightbox__bar{opacity:1;transform:none;}
.bblightbox__count{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink);letter-spacing:.02em;}
.bblightbox__count [data-bb-current]{color:var(--rose-deep);}
.bblightbox__sep{color:var(--ink-faint);margin:0 4px;}
.bblightbox__label{flex:1;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.bblightbox__close{margin-left:auto;width:42px;height:42px;border-radius:50%;border:1px solid rgba(57,55,56,.22);background:rgba(255,255,255,.66);color:var(--ink);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .3s ease,border-color .3s ease,transform .35s var(--ease);}
.bblightbox__close:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(90deg);}
.bblightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:56px;height:56px;border-radius:50%;border:1px solid rgba(57,55,56,.22);background:rgba(255,255,255,.7);color:var(--ink);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);opacity:0;transition:opacity .55s ease .25s,background .3s ease,border-color .3s ease;box-shadow:0 12px 32px -16px rgba(48,46,38,.3);}
.bblightbox.is-open .bblightbox__nav{opacity:1;}
.bblightbox__nav:hover{background:var(--rose);color:#fff;border-color:var(--rose);}
.bblightbox__nav--prev{left:clamp(16px,3vw,40px);}
.bblightbox__nav--next{right:clamp(16px,3vw,40px);}
/* Página afunda quando lightbox aberto */
body.bb-locked{overflow:hidden;}
@media (max-width:680px){
.bblightbox__bar{top:14px;left:14px;right:14px;}
.bblightbox__nav{width:46px;height:46px;}
.bblightbox__nav--prev{left:10px;}
.bblightbox__nav--next{right:10px;}
.bblightbox__img{max-height:74vh;}
.bcard__meta{padding:10px 14px;}
}
/* ============================================================
HERO EDITORIAL — DIC (redesign 2026-07-01)
Vídeo fullscreen com parallax + tipografia gigante caixa alta
+ elementos gráficos DIC + fade pra fundo
============================================================ */
/* Container: 100vh fullscreen */
.hero-ed {
position: relative;
min-height: 100vh;
height: 100vh;
overflow: hidden;
isolation: isolate;
}
/* Vídeo de fundo */
.hero-ed__video {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-ed__video video {
width: 100%;
height: 120%; /* extra pro parallax */
object-fit: cover;
will-change: transform;
transform: translate3d(0, 0, 0);
}
/* Overlay grain sutil pro cinema look */
.hero-ed__grain {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(ellipse at 30% 40%, rgba(26,13,51,.15) 0%, rgba(26,13,51,.55) 90%);
pointer-events: none;
}
/* Fade bottom pra dissolver no fundo roxo */
.hero-ed__fade {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(180deg,
rgba(26,13,51,0) 0%,
rgba(26,13,51,0) 50%,
rgba(26,13,51,.5) 78%,
rgba(26,13,51,.9) 92%,
#1a0d33 100%);
pointer-events: none;
}
/* Círculos decorativos DIC — assinatura visual */
.hero-ed__deco {
position: absolute;
border-radius: 50%;
filter: blur(60px);
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
opacity: .55;
}
.hero-ed__deco--1 {
width: 40vw; height: 40vw;
background: #E63E7C; /* magenta */
top: -10vh; right: -10vw;
animation: hero-float 20s ease-in-out infinite;
}
.hero-ed__deco--2 {
width: 30vw; height: 30vw;
background: #F5A821; /* amarelo */
bottom: 5vh; left: -5vw;
animation: hero-float 26s ease-in-out infinite reverse;
opacity: .35;
}
.hero-ed__deco--3 {
width: 22vw; height: 22vw;
background: #4EBFB2; /* teal */
top: 40vh; right: 25vw;
animation: hero-float 30s ease-in-out infinite;
opacity: .28;
}
@keyframes hero-float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px, 30px) scale(1.08); }
}
/* Grid do conteúdo */
.hero-ed__grid {
position: relative;
z-index: 3;
height: 100%;
padding-top: 120px;
padding-bottom: 60px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr auto;
gap: 40px;
}
@media (max-width: 900px) {
.hero-ed__grid { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; padding-top: 100px; }
}
/* Eyebrow superior */
.hero-ed__eyebrow {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
gap: 24px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: var(--fg);
}
.hero-ed__num {
font-weight: 300;
font-size: 32px;
letter-spacing: 0.02em;
color: var(--primary);
}
.hero-ed__eyebrow-txt {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255,255,255,.65);
max-width: 60ch;
line-height: 1.4;
}
/* Título gigante editorial */
.hero-ed__title {
grid-column: 1;
grid-row: 2;
align-self: end;
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: clamp(56px, 9.5vw, 168px);
line-height: 0.86;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--fg);
display: flex;
flex-direction: column;
}
.hero-ed__title-line {
display: block;
transition: transform .8s cubic-bezier(.19,1.08,.32,1), opacity .8s ease;
}
.hero-ed__title-line--accent { color: var(--primary); font-style: italic; font-family: 'Qlassy', Georgia, serif; text-transform: none; font-weight: 400; }
.hero-ed__title-line--accent-2 { color: var(--secondary); font-style: italic; font-family: 'Qlassy', Georgia, serif; text-transform: none; font-weight: 400; }
.hero-ed__title-line--big {
font-size: 1.15em;
color: var(--fg);
margin-top: 8px;
}
/* Side stats direita */
.hero-ed__side {
grid-column: 2;
grid-row: 2;
align-self: end;
display: flex;
flex-direction: column;
gap: 28px;
max-width: 220px;
padding-left: 24px;
border-left: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 900px) {
.hero-ed__side { grid-column: 1; grid-row: 3; flex-direction: row; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0 0; max-width: none; overflow-x: auto; }
}
.hero-ed__stat {
display: flex;
flex-direction: column;
gap: 6px;
}
.hero-ed__stat-num {
font-family: 'Qlassy', Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: clamp(42px, 4.2vw, 62px);
line-height: 1;
color: var(--fg);
letter-spacing: -.01em;
}
.hero-ed__stat-lbl {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
line-height: 1.3;
}
/* Bottom: sub + CTAs */
.hero-ed__bottom {
grid-column: 1 / -1;
grid-row: 3;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 40px;
align-items: end;
max-width: 1400px;
}
@media (max-width: 900px) {
.hero-ed__bottom { grid-template-columns: 1fr; gap: 24px; }
}
.hero-ed__sub {
font-family: 'Qlassy', Georgia, serif;
font-size: clamp(15px, 1.3vw, 20px);
line-height: 1.5;
color: rgba(255,255,255,.82);
max-width: 54ch;
font-style: italic;
}
.hero-ed__sub em {
color: var(--primary);
font-style: italic;
}
.hero-ed__ctas {
display: flex;
gap: 14px;
align-items: center;
justify-content: flex-start;
}
@media (min-width: 901px) {
.hero-ed__ctas { justify-content: flex-end; }
}
.hero-ed__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 26px;
border-radius: 100px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
transition: all .35s var(--ease);
border: 1px solid transparent;
}
.hero-ed__cta--fill {
background: var(--primary);
color: #fff;
}
.hero-ed__cta--fill:hover {
background: #FF5089;
transform: translateY(-2px);
box-shadow: 0 12px 32px -12px rgba(230,62,124,.6);
}
.hero-ed__cta--ghost {
border-color: rgba(255,255,255,.28);
color: var(--fg);
}
.hero-ed__cta--ghost:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.hero-ed__cta .arr {
transition: transform .3s ease;
}
.hero-ed__cta:hover .arr {
transform: translateX(4px);
}
/* Scroll indicator embaixo à direita */
.hero-ed__scroll {
position: absolute !important;
bottom: 30px;
right: 40px;
left: auto !important;
transform: none !important;
z-index: 4;
}
/* Esconder o hero antigo do Hans (segurança) */
.hero {
display: none !important;
}
/* ============================================================
HERO MAGAZINE EDITORIAL — DIC (redesign v3 2026-07-01)
Retrato dominante com halo + tipografia gigante serifa italic
Vibe: Marianav.design + Vogue Editorial
============================================================ */
.hero-mag {
position: relative;
min-height: 100vh;
padding-top: 120px;
padding-bottom: 60px;
overflow: hidden;
isolation: isolate;
color: var(--fg);
}
/* Camada 1: fundo — gradient roxo + textura sutil */
.hero-mag__bg {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse at 70% 30%, rgba(230,62,124,.12) 0%, transparent 60%),
radial-gradient(ellipse at 20% 80%, rgba(245,168,33,.08) 0%, transparent 55%),
linear-gradient(135deg, #1a0d33 0%, #2a1855 40%, #3a1a55 70%, #1a0d33 100%);
}
/* Noise sobreposto pra dar granulação premium */
.hero-mag__bg::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: .5;
mix-blend-mode: overlay;
pointer-events: none;
}
/* Camada 2: vídeo com opacity baixa (movimento sutil) */
.hero-mag__video-layer {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
opacity: 0.28;
mix-blend-mode: screen;
pointer-events: none;
}
.hero-mag__video-layer video {
width: 100%;
height: 110%;
object-fit: cover;
filter: saturate(1.15) contrast(.9) blur(2px);
will-change: transform;
}
/* Círculos decorativos flutuantes */
.hero-mag__deco {
position: absolute;
border-radius: 50%;
filter: blur(90px);
z-index: 2;
pointer-events: none;
mix-blend-mode: screen;
}
.hero-mag__deco--magenta {
width: 42vw; height: 42vw;
background: #E63E7C;
top: -12vh; right: -10vw;
opacity: .45;
animation: mag-float 22s ease-in-out infinite;
}
.hero-mag__deco--yellow {
width: 30vw; height: 30vw;
background: #F5A821;
bottom: -5vh; left: -8vw;
opacity: .32;
animation: mag-float 28s ease-in-out infinite reverse;
}
.hero-mag__deco--teal {
width: 22vw; height: 22vw;
background: #4EBFB2;
top: 45vh; right: 35vw;
opacity: .22;
animation: mag-float 34s ease-in-out infinite;
}
@keyframes mag-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-30px, 40px) scale(1.1); }
66% { transform: translate(20px, -20px) scale(.95); }
}
/* Topbar: eyebrow superior */
.hero-mag__topbar {
position: relative;
z-index: 4;
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255,255,255,.10);
margin-bottom: clamp(40px, 8vh, 90px);
}
.hero-mag__eyebrow-l, .hero-mag__eyebrow-r {
display: flex;
align-items: center;
gap: 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255,255,255,.65);
}
.hero-mag__num {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: 24px;
letter-spacing: 0;
color: var(--secondary);
text-transform: none;
}
.hero-mag__eyebrow-line {
width: 40px;
height: 1px;
background: rgba(255,255,255,.35);
}
.hero-mag__eyebrow-tx {
max-width: 42ch;
line-height: 1.4;
}
.hero-mag__badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #34c759;
box-shadow: 0 0 12px rgba(52,199,89,.65);
animation: mag-pulse 2s ease-in-out infinite;
}
@keyframes mag-pulse {
0%, 100% { opacity: .5; }
50% { opacity: 1; }
}
@media (max-width: 900px) {
.hero-mag__topbar { flex-direction: column; align-items: flex-start; gap: 14px; }
.hero-mag__eyebrow-tx { display: none; }
}
/* Main grid: 55% título + 45% retrato */
.hero-mag__main {
position: relative;
z-index: 4;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
min-height: 68vh;
}
@media (max-width: 900px) {
.hero-mag__main { grid-template-columns: 1fr; gap: 60px; }
}
/* Coluna esquerda: texto */
.hero-mag__col-l {
display: flex;
flex-direction: column;
gap: clamp(24px, 3vh, 40px);
}
.hero-mag__title {
margin: 0;
padding: 0;
font-family: 'Qlassy', Georgia, serif;
font-weight: 400;
font-size: clamp(48px, 7.8vw, 138px);
line-height: 0.94;
letter-spacing: -0.02em;
color: var(--fg);
}
.hero-mag__t-line {
display: block;
}
.hero-mag__t-line--upper {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 0.68em;
color: rgba(255,255,255,.92);
margin-bottom: 8px;
}
.hero-mag__t-line--italic {
font-style: italic;
color: var(--fg);
}
.hero-mag__t-line--accent {
color: var(--primary);
padding-left: 0.15em;
}
.hero-mag__sub {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(16px, 1.35vw, 22px);
line-height: 1.5;
color: rgba(255,255,255,.82);
max-width: 46ch;
}
.hero-mag__sub em {
color: var(--secondary);
font-style: italic;
}
/* Assinatura estilo escrita à mão */
.hero-mag__signature {
display: flex;
align-items: center;
gap: 14px;
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: 14px;
color: rgba(255,255,255,.55);
letter-spacing: 0.01em;
}
.hero-mag__sig-line {
width: 40px;
height: 1px;
background: var(--secondary);
opacity: .6;
}
/* CTAs */
.hero-mag__ctas {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-top: 4px;
}
.hero-mag__cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 15px 28px;
border-radius: 100px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
text-decoration: none;
transition: all .4s var(--ease);
border: 1px solid transparent;
}
.hero-mag__cta--fill {
background: var(--secondary);
color: #1a0d33;
font-weight: 500;
}
.hero-mag__cta--fill:hover {
background: #FFC444;
transform: translateY(-2px);
box-shadow: 0 14px 34px -12px rgba(245,168,33,.7);
}
.hero-mag__cta--ghost {
border-color: rgba(245,168,33,.5);
color: var(--secondary);
}
.hero-mag__cta--ghost:hover {
background: rgba(245,168,33,.08);
border-color: var(--secondary);
}
.hero-mag__cta-arr { transition: transform .3s ease; }
.hero-mag__cta:hover .hero-mag__cta-arr { transform: translateX(6px); }
/* Coluna direita: retrato com halo */
.hero-mag__col-r {
display: flex;
justify-content: center;
align-items: center;
}
.hero-mag__portrait {
position: relative;
width: 100%;
max-width: 540px;
aspect-ratio: 4/5;
isolation: isolate;
}
.hero-mag__halo {
position: absolute;
inset: -8%;
width: 116%;
height: 116%;
z-index: 1;
animation: mag-rotate 60s linear infinite;
}
@keyframes mag-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hero-mag__img-wrap {
position: relative;
z-index: 2;
width: 88%;
height: 88%;
margin: 6% auto;
border-radius: 50%;
overflow: hidden;
box-shadow:
0 40px 100px -30px rgba(230,62,124,.4),
0 0 0 1px rgba(245,168,33,.25) inset;
}
.hero-mag__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
filter: saturate(1.1) contrast(1.02);
}
/* Badge circular assinatura (canto inferior direito do retrato) */
.hero-mag__badge {
position: absolute;
z-index: 3;
bottom: 2%;
right: -8%;
width: 168px;
height: 168px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 720px) {
.hero-mag__badge { width: 130px; height: 130px; right: -4%; }
}
.hero-mag__badge-svg {
position: absolute;
inset: 0;
animation: mag-badge-rotate 30s linear infinite;
}
@keyframes mag-badge-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.hero-mag__badge-center {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 20px;
background: #1a0d33;
border-radius: 50%;
width: 74px;
height: 74px;
justify-content: center;
box-shadow: 0 0 0 1px rgba(245,168,33,.4);
}
.hero-mag__badge-num {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: 24px;
color: var(--secondary);
line-height: 1;
}
.hero-mag__badge-lbl {
font-family: 'Helvetica Neue', sans-serif;
font-size: 7.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255,255,255,.6);
margin-top: 4px;
}
/* Scroll indicator */
.hero-mag__scroll {
position: absolute !important;
bottom: 30px;
right: 40px;
left: auto !important;
transform: none !important;
z-index: 5;
}
/* Esconder hero-ed antigo (segurança) */
.hero-ed { display: none !important; }
/* ============================================================
MAGAZINE EDITORIAL — SEÇÕES DIC (redesign v3)
Sem textura marble, sem sparkles. Só linha, respiro, tipografia.
Cores DIC (magenta/amarelo/teal) na estética Vogue Editorial.
============================================================ */
/* Seção genérica magazine */
.mag-sec {
position: relative;
padding: clamp(80px, 12vh, 160px) 0;
z-index: 3;
}
/* Esconde seções antigas do Hans */
.sec.wrap.sinopse-section,
.sec.wrap.metodo-section,
.resultado-section,
.statement,
.karine-section,
.cta {
display: none !important;
}
/* Mostrar o marquee/escopo (mantém) */
.marquee { z-index: 4; }
/* ============================================================
DIVISOR EDITORIAL — usado no head de cada seção
============================================================ */
.mag-divider {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: clamp(60px, 8vh, 110px);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.mag-divider--center {
justify-content: center;
text-align: center;
}
.mag-divider__num {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: 32px;
color: var(--secondary);
line-height: 1;
}
.mag-divider__line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(230,62,124,.4), rgba(245,168,33,.35), rgba(78,191,178,.3), transparent);
}
.mag-divider__label {
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
white-space: nowrap;
}
/* ============================================================
SINOPSE — magazine 2 colunas + grid de cidades
============================================================ */
.mag-sinopse {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: start;
margin-bottom: clamp(80px, 10vh, 140px);
}
@media (max-width: 900px) {
.mag-sinopse { grid-template-columns: 1fr; gap: 40px; }
}
.mag-sinopse__title {
margin: 0;
font-family: 'Qlassy', Georgia, serif;
font-weight: 400;
font-size: clamp(40px, 5.6vw, 88px);
line-height: 0.98;
letter-spacing: -0.015em;
color: var(--fg);
}
.mag-sinopse__title-line {
display: block;
}
.mag-sinopse__title-line--italic {
font-style: italic;
color: rgba(255,255,255,.88);
}
.mag-sinopse__title-line--em {
font-style: italic;
color: var(--primary);
}
.mag-sinopse__right {
display: flex;
flex-direction: column;
gap: 22px;
padding-top: 12px;
}
.mag-sinopse__lead {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(18px, 1.5vw, 24px);
line-height: 1.55;
color: var(--fg);
}
.mag-sinopse__lead strong {
color: var(--secondary);
font-weight: 400;
font-style: normal;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.88em;
}
.mag-sinopse__lead em {
color: var(--primary);
}
.mag-sinopse__body {
font-size: clamp(14px, 1vw, 17px);
line-height: 1.7;
color: rgba(255,255,255,.72);
max-width: 48ch;
}
.mag-sinopse__body strong {
color: var(--fg);
font-weight: 500;
}
.mag-sinopse__body em {
color: var(--secondary);
font-style: italic;
}
/* Grid 5 cidades */
.mag-cities {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 900px) { .mag-cities { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .mag-cities { grid-template-columns: 1fr; } }
.mag-city {
background: rgba(26,13,51,.72);
padding: clamp(28px, 3.5vh, 48px) clamp(20px, 2.5vw, 32px);
display: flex;
flex-direction: column;
gap: 10px;
transition: background .45s ease;
cursor: default;
}
.mag-city:hover {
background: rgba(74,21,96,.85);
}
.mag-city__num {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(28px, 2.6vw, 40px);
color: var(--tertiary);
line-height: 1;
letter-spacing: -0.01em;
}
.mag-city__name {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: clamp(16px, 1.4vw, 22px);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--fg);
}
.mag-city__meta {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
}
.mag-city--current .mag-city__num { color: var(--primary); }
.mag-city--current { background: rgba(74,21,96,.9); position: relative; }
.mag-city--current::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
}
/* ============================================================
MÉTODO — CAPABILITIES list minimalista
============================================================ */
.mag-method {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: clamp(50px, 6vw, 110px);
align-items: start;
}
@media (max-width: 900px) {
.mag-method { grid-template-columns: 1fr; gap: 50px; }
}
.mag-method__title {
margin: 0 0 32px;
font-family: 'Qlassy', Georgia, serif;
font-weight: 400;
font-size: clamp(38px, 5.2vw, 78px);
line-height: 0.98;
letter-spacing: -0.015em;
color: var(--fg);
}
.mag-method__title-line { display: block; }
.mag-method__title-line--italic { font-style: italic; color: rgba(255,255,255,.85); }
.mag-method__title-line--em { font-style: italic; color: var(--primary); }
.mag-method__body {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(15px, 1.2vw, 19px);
line-height: 1.6;
color: rgba(255,255,255,.75);
margin-bottom: 20px;
max-width: 42ch;
}
.mag-method__body strong {
color: var(--secondary);
font-weight: 400;
font-style: normal;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.85em;
}
.mag-method__body em { color: var(--primary); }
.mag-caps {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid rgba(255,255,255,.12);
}
.mag-cap {
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
padding: clamp(24px, 3vh, 38px) 0;
border-bottom: 1px solid rgba(255,255,255,.12);
transition: padding-left .5s var(--ease);
}
.mag-cap:hover { padding-left: 12px; }
.mag-cap__num {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(24px, 2.2vw, 32px);
color: var(--secondary);
line-height: 1;
min-width: 3ch;
}
.mag-cap__name {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: clamp(20px, 1.8vw, 30px);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--fg);
margin: 0 0 10px;
}
.mag-cap__desc {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(14px, 1vw, 17px);
line-height: 1.55;
color: rgba(255,255,255,.65);
margin: 0;
max-width: 50ch;
}
/* ============================================================
RESULTADO — head + metrics + trusted + award
============================================================ */
.mag-result__head {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(40px, 5vw, 90px);
align-items: end;
margin-bottom: clamp(60px, 8vh, 110px);
}
@media (max-width: 900px) { .mag-result__head { grid-template-columns: 1fr; gap: 32px; } }
.mag-result__title {
margin: 0;
font-family: 'Qlassy', Georgia, serif;
font-weight: 400;
font-size: clamp(42px, 6vw, 96px);
line-height: 0.96;
letter-spacing: -0.015em;
color: var(--fg);
}
.mag-result__title-line { display: block; }
.mag-result__title-line--italic { font-style: italic; color: rgba(255,255,255,.88); }
.mag-result__title-line--em { font-style: italic; color: var(--primary); }
.mag-result__lead {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 1.08rem;
line-height: 1.6;
color: rgba(255,255,255,.82);
padding-bottom: 20px;
max-width: 62ch;
}
.mag-result__lead em { font-style: normal; font-weight: 500; }
.mag-result__lead em { color: var(--primary); }
/* Métricas */
.mag-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: clamp(60px, 8vh, 100px);
}
@media (max-width: 900px) { .mag-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .mag-metrics { grid-template-columns: 1fr; } }
.mag-metric {
background: var(--glass);
border: 1px solid var(--stroke-soft);
border-radius: var(--r);
padding: clamp(28px, 4vh, 44px) clamp(22px, 2.4vw, 34px);
display: flex;
flex-direction: column;
gap: 12px;
transition: transform .45s cubic-bezier(.23,1.1,.32,1), background .35s ease, border-color .35s ease, box-shadow .55s ease;
}
.mag-metric:hover {
background: var(--glass-2);
border-color: rgba(230,62,124,.55);
transform: translateY(-3px);
box-shadow: 0 14px 32px -12px rgba(0,0,0,.42);
}
.mag-metric__num {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(2.4rem, 5.5vw, 3.7rem);
color: var(--primary);
line-height: 0.92;
letter-spacing: -0.02em;
}
.mag-metric__plus {
color: var(--primary);
font-style: italic;
}
.mag-metric__label {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: .64rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
line-height: 1.3;
margin-bottom: 6px;
order: -1; /* label fica em cima do número (padrão .rescard .pre) */
}
.mag-metric__sub {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
font-size: .94rem;
color: rgba(255,255,255,.68);
line-height: 1.5;
margin-top: 6px;
}
/* TRUSTED BY (escopo entregue) */
.mag-trusted {
margin-bottom: clamp(80px, 10vh, 130px);
}
.mag-trusted__head {
margin-bottom: 40px;
}
.mag-trusted__eyebrow {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
display: block;
margin-bottom: 16px;
}
.mag-trusted__title {
margin: 0;
font-family: 'Qlassy', Georgia, serif;
font-weight: 400;
font-size: clamp(24px, 2.6vw, 42px);
line-height: 1.15;
color: var(--fg);
}
.mag-trusted__title em {
font-style: italic;
color: var(--primary);
}
.mag-trusted__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 680px) { .mag-trusted__grid { grid-template-columns: 1fr; } }
.mag-trusted__item {
background: var(--glass);
border: 1px solid var(--stroke-soft);
border-radius: var(--r-sm);
padding: 22px 26px;
display: flex;
flex-direction: row;
align-items: center;
gap: 18px;
transition: transform .45s cubic-bezier(.23,1.1,.32,1), background .35s ease, border-color .35s ease, box-shadow .55s ease;
}
.mag-trusted__item:hover {
background: var(--glass-2);
border-color: rgba(230,62,124,.55);
transform: translateY(-2px);
box-shadow: 0 10px 22px -8px rgba(0,0,0,.4);
}
.mag-trusted__n {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: 1.1rem;
color: var(--primary);
flex-shrink: 0;
}
.mag-trusted__t {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 1.06rem;
line-height: 1.32;
color: var(--fg);
letter-spacing: .01em;
}
/* AWARD block */
.mag-award {
display: grid;
grid-template-columns: auto 1fr;
gap: 40px;
align-items: center;
padding: clamp(32px, 4vh, 56px);
border: 1px solid rgba(245,168,33,.35);
background: linear-gradient(135deg, rgba(245,168,33,.05), rgba(230,62,124,.05));
}
@media (max-width: 700px) { .mag-award { grid-template-columns: 1fr; gap: 20px; text-align: center; } }
.mag-award__badge {
width: 120px;
height: 120px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--secondary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
flex-shrink: 0;
margin: 0 auto;
}
.mag-award__badge-num {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: 42px;
color: var(--secondary);
line-height: 1;
}
.mag-award__badge-lbl {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,.6);
}
.mag-award__title {
margin: 0 0 10px;
font-family: 'Qlassy', Georgia, serif;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 34px);
color: var(--fg);
}
.mag-award__title em {
font-style: italic;
color: var(--secondary);
}
.mag-award__desc {
margin: 0;
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(14px, 1.05vw, 18px);
line-height: 1.55;
color: rgba(255,255,255,.7);
max-width: 56ch;
}
/* ============================================================
CTA / MANIFESTO — Let's Create style
============================================================ */
.mag-cta {
position: relative;
padding: clamp(100px, 15vh, 200px) 0 clamp(60px, 8vh, 100px);
z-index: 3;
text-align: center;
}
.mag-cta__head {
max-width: 900px;
margin: 0 auto clamp(60px, 8vh, 100px);
}
.mag-cta__title {
margin: 0 0 32px;
font-family: 'Qlassy', Georgia, serif;
font-weight: 400;
font-size: clamp(46px, 6.8vw, 118px);
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--fg);
}
.mag-cta__title-line { display: block; }
.mag-cta__title-line--em { font-style: italic; color: var(--primary); }
.mag-cta__mantra {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(18px, 1.6vw, 26px);
line-height: 1.5;
color: rgba(255,255,255,.82);
margin: 0 0 32px;
}
.mag-cta__mantra strong {
color: #fff;
font-weight: 500;
}
.mag-cta__signature {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: 15px;
color: rgba(255,255,255,.55);
line-height: 1.6;
margin: 0;
}
.mag-cta__sig-mark {
display: inline-block;
margin-top: 8px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--secondary);
font-style: normal;
}
.mag-cta__nav {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
max-width: 800px;
margin: 0 auto clamp(70px, 10vh, 120px);
}
.mag-cta__next {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 24px;
align-items: center;
padding: clamp(24px, 4vh, 44px);
text-decoration: none;
border: 1px solid rgba(255,255,255,.12);
border-radius: 4px;
transition: all .5s var(--ease);
text-align: left;
}
@media (max-width: 700px) {
.mag-cta__next { grid-template-columns: 1fr auto; gap: 12px; }
.mag-cta__next-label, .mag-cta__next-sub { grid-column: 1 / -1; }
}
.mag-cta__next:hover {
border-color: var(--primary);
background: rgba(230,62,124,.05);
transform: translateY(-2px);
}
.mag-cta__next-label {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255,255,255,.45);
padding-right: 24px;
border-right: 1px solid rgba(255,255,255,.15);
}
.mag-cta__next-title {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(22px, 2.4vw, 34px);
color: var(--fg);
}
.mag-cta__next-sub {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: 14px;
color: rgba(255,255,255,.55);
padding: 0 24px;
border-left: 1px solid rgba(255,255,255,.15);
}
.mag-cta__next-arr {
font-size: 24px;
color: var(--primary);
transition: transform .35s ease;
}
.mag-cta__next:hover .mag-cta__next-arr { transform: translateX(6px); }
.mag-cta__back {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0 auto;
padding: 14px 28px;
border: 1px solid rgba(255,255,255,.2);
border-radius: 100px;
text-decoration: none;
color: rgba(255,255,255,.75);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
transition: all .35s var(--ease);
justify-self: center;
width: fit-content;
}
.mag-cta__back:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.mag-cta__back-arr {
transition: transform .3s ease;
}
.mag-cta__back:hover .mag-cta__back-arr {
transform: translateY(-3px);
}
/* Créditos — regra original removida, ver bloco no fim do arquivo (padrão Hans .foot) */
/* ==========================
Vídeo de fundo com vignette
========================== */
.hero-v4__video {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}
.hero-v4__video video {
width: 100%;
height: 100%;
object-fit: cover;
will-change: transform;
filter: brightness(.65) contrast(1.05) saturate(1.1);
}
/* Vignette: mask radial que dissolve nas bordas */
.hero-v4__vignette {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
/* Shadow inset gigante cria a vignette */
box-shadow: inset 0 0 200px 60px rgba(5,8,24,.85),
inset 0 0 400px 120px rgba(5,8,24,.6);
background: radial-gradient(ellipse at 65% 45%, transparent 20%, rgba(5,8,24,.4) 60%, rgba(5,8,24,.95) 100%);
}
/* Gradient adicional pra dissolver no fundo do body */
.hero-v4__grad {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
linear-gradient(180deg,
rgba(5,8,24,.6) 0%,
rgba(5,8,24,.15) 15%,
rgba(5,8,24,.15) 65%,
rgba(5,8,24,.85) 88%,
#050818 100%),
linear-gradient(90deg,
rgba(5,8,24,.7) 0%,
transparent 35%,
transparent 65%,
rgba(5,8,24,.7) 100%);
}
/* ==========================
Bokehs com parallax mouse
========================== */
.hero-v4__bokehs {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.bokeh {
position: absolute;
border-radius: 50%;
filter: blur(3px);
transform: translate(-50%, -50%);
transition: transform .8s cubic-bezier(.16,1,.3,1);
will-change: transform;
}
/* Bokeh WARM (amarelo dourado luminoso) */
.bokeh--warm {
width: 22px; height: 22px;
background: radial-gradient(circle at 30% 30%, #fff2c8 0%, #F5C94E 40%, rgba(245,168,33,.7) 70%, transparent 100%);
box-shadow: 0 0 20px rgba(245,201,78,.5),
0 0 40px rgba(245,168,33,.3);
opacity: .85;
}
.bokeh--warm.bokeh--sm { width: 14px; height: 14px; }
.bokeh--warm.bokeh--lg { width: 34px; height: 34px; opacity: .7; }
.bokeh--warm.bokeh--xs { width: 8px; height: 8px; opacity: .9; }
/* Bokeh COOL (azul claro luminoso) */
.bokeh--cool {
width: 18px; height: 18px;
background: radial-gradient(circle at 30% 30%, #d0e4ff 0%, #7ba3d9 50%, rgba(64,120,200,.4) 100%);
box-shadow: 0 0 18px rgba(128,168,224,.4);
opacity: .7;
}
.bokeh--cool.bokeh--sm { width: 12px; height: 12px; opacity: .8; }
/* Bokeh MAGENTA (assinatura DIC) */
.bokeh--magenta {
width: 20px; height: 20px;
background: radial-gradient(circle at 30% 30%, #ffdbe8 0%, #E63E7C 50%, rgba(230,62,124,.4) 100%);
box-shadow: 0 0 22px rgba(230,62,124,.5);
opacity: .75;
}
.bokeh--magenta.bokeh--sm { width: 12px; height: 12px; opacity: .85; }
/* Animação flutuante sutil (além do parallax) */
@keyframes bokeh-float {
0%, 100% { transform: translate(-50%, -50%) translateY(0); }
50% { transform: translate(-50%, -50%) translateY(-10px); }
}
.bokeh { animation: bokeh-float 6s ease-in-out infinite; }
.bokeh:nth-child(2n) { animation-duration: 8s; animation-delay: -2s; }
.bokeh:nth-child(3n) { animation-duration: 10s; animation-delay: -4s; }
/* ==========================
Cursor custom "Case DIC"
========================== */
.hero-v4__cursor { display: none !important;
position: fixed;
top: 0; left: 0;
z-index: 9999;
pointer-events: none;
width: 92px;
height: 92px;
border-radius: 50%;
background: var(--primary);
color: #fff;
display: grid;
place-items: center;
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: 15px;
letter-spacing: -0.005em;
line-height: 1.05;
text-align: center;
transform: translate(-50%, -50%) scale(0);
transition: transform .35s cubic-bezier(.16,1,.3,1), background .25s ease;
box-shadow: 0 12px 32px -8px rgba(230,62,124,.55),
0 0 0 1px rgba(255,255,255,.08) inset;
opacity: 0;
}
.hero-v4__cursor.is-on {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.hero-v4__cursor.is-active {
background: #b32a5e;
transform: translate(-50%, -50%) scale(1.15);
}
.hero-v4__cursor span {
display: block;
}
@media (hover: none) {
.hero-v4 { cursor: auto; }
.hero-v4__cursor { display: none !important; display: none; }
}
/* ==========================
Conteúdo (grid)
========================== */
.hero-v4__content {
position: relative;
z-index: 5;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 120px 0 100px;
max-width: 900px;
}
.hero-v4__pill {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 9px 18px;
border-radius: 100px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.14);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
width: fit-content;
margin-bottom: 32px;
}
.hero-v4__pill-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 10px var(--primary);
animation: pill-pulse 2.2s ease-in-out infinite;
}
@keyframes pill-pulse {
0%,100% { opacity: .55; }
50% { opacity: 1; }
}
/* Título vibe Hans — grande, serifa italic accent */
.hero-v4__title {
margin: 0 0 26px;
font-family: 'Qlassy', Georgia, serif;
font-weight: 400;
font-size: clamp(44px, 6.4vw, 108px);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--fg);
max-width: 15ch;
text-wrap: balance;
}
.hero-v4__title em {
font-style: italic;
color: var(--primary);
}
/* Sub vibe Hans */
.hero-v4__sub {
font-family: 'Qlassy', Georgia, serif;
font-style: italic;
font-size: clamp(16px, 1.35vw, 22px);
line-height: 1.55;
color: rgba(255,255,255,.82);
max-width: 56ch;
margin: 0 0 34px;
}
.hero-v4__sub b {
color: var(--fg);
font-weight: 400;
font-style: normal;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.85em;
letter-spacing: 0.02em;
}
/* CTAs */
.hero-v4__ctas {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.hero-v4__cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 15px 28px;
border-radius: 100px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
transition: all .35s var(--ease);
border: 1px solid transparent;
}
.hero-v4__cta--fill {
background: var(--primary);
color: #fff;
}
.hero-v4__cta--fill:hover {
background: #f65290;
transform: translateY(-2px);
box-shadow: 0 14px 34px -10px rgba(230,62,124,.55);
}
.hero-v4__cta--ghost {
border-color: rgba(255,255,255,.28);
color: var(--fg);
}
.hero-v4__cta--ghost:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.hero-v4__cta .arr { transition: transform .3s ease; }
.hero-v4__cta:hover .arr { transform: translateX(5px); }
/* Scroll bottom-right */
.hero-v4__scroll {
position: absolute !important;
bottom: 30px;
right: 40px;
left: auto !important;
transform: none !important;
z-index: 6;
}
/* Mobile */
@media (max-width: 900px) {
.hero-v4__content { padding: 100px 0 80px; }
.hero-v4__title { font-size: clamp(38px, 8vw, 56px); }
.hero-v4__cursor { display: none !important; display: none; }
.hero-v4 { cursor: auto; }
}
/* ==========================
Vídeo: deslocar pra direita + descer + máscara suave
========================== */
.hero-v4__video video {
object-position: 65% 45%; /* mais pra direita, um pouco pra baixo */
filter: brightness(.6) contrast(1.08) saturate(1.15);
}
/* Vignette mais forte nas laterais (favorece o texto à esquerda) */
.hero-v4__vignette {
box-shadow: inset 0 0 240px 80px rgba(5,8,24,.9),
inset 0 0 480px 140px rgba(5,8,24,.65),
inset 260px 0 200px -40px rgba(5,8,24,.55);
background: radial-gradient(ellipse at 68% 55%, transparent 15%, rgba(5,8,24,.35) 55%, rgba(5,8,24,.95) 100%);
}
/* Conteúdo respeita margens padrão TUÁ */
.hero-v4__content {
padding-left: var(--gut);
padding-right: var(--gut);
max-width: min(52%, 780px);
}
@media (max-width: 900px) {
.hero-v4__content { max-width: 100%; }
}
/* ==========================
BOKEHS FOTOGRÁFICOS REAIS
Aparência: círculos champagne com gradient soft, sombras naturais
========================== */
/* Override do bokeh anterior — SEM filter blur, SEM animation antiga */
.hero-v4__bokehs .bokeh {
position: absolute;
border-radius: 50%;
transform: translate(-50%, -50%);
will-change: transform;
animation: none !important; /* remove animação anterior */
filter: none !important; /* remove blur anterior */
transition: transform .4s cubic-bezier(.16,1,.3,1);
}
/* Bokeh WARM (champagne dourado — como a referência) */
.bokeh--warm {
width: 28px; height: 28px;
background:
radial-gradient(circle at 42% 38%,
rgba(255, 248, 232, 0.98) 0%,
rgba(250, 232, 200, 0.92) 20%,
rgba(240, 218, 178, 0.85) 45%,
rgba(215, 190, 155, 0.65) 70%,
rgba(180, 155, 125, 0.25) 90%,
rgba(150, 125, 95, 0) 100%);
box-shadow:
inset -2px -3px 6px rgba(120, 90, 60, 0.22),
inset 2px 2px 4px rgba(255, 245, 220, 0.4),
0 4px 14px rgba(0, 0, 0, 0.28),
0 0 20px rgba(255, 220, 170, 0.25);
opacity: 0.95;
}
.bokeh--warm.bokeh--sm {
width: 18px; height: 18px;
box-shadow:
inset -1px -2px 4px rgba(120, 90, 60, 0.2),
inset 1px 1px 3px rgba(255, 245, 220, 0.4),
0 2px 8px rgba(0, 0, 0, 0.25),
0 0 14px rgba(255, 220, 170, 0.25);
}
.bokeh--warm.bokeh--lg {
width: 42px; height: 42px;
opacity: 0.75;
box-shadow:
inset -3px -4px 10px rgba(120, 90, 60, 0.22),
inset 3px 3px 6px rgba(255, 245, 220, 0.35),
0 6px 20px rgba(0, 0, 0, 0.3),
0 0 28px rgba(255, 220, 170, 0.22);
}
.bokeh--warm.bokeh--xs {
width: 12px; height: 12px;
opacity: 1;
box-shadow:
inset -1px -1px 2px rgba(120, 90, 60, 0.2),
0 1px 4px rgba(0, 0, 0, 0.22),
0 0 8px rgba(255, 220, 170, 0.3);
}
/* Bokeh COOL (bege-rosé — tom quente frio) */
.bokeh--cool {
width: 24px; height: 24px;
background:
radial-gradient(circle at 42% 38%,
rgba(255, 240, 235, 0.98) 0%,
rgba(245, 220, 215, 0.9) 25%,
rgba(230, 200, 195, 0.75) 55%,
rgba(205, 175, 170, 0.4) 85%,
rgba(180, 150, 145, 0) 100%);
box-shadow:
inset -2px -2px 5px rgba(130, 100, 95, 0.2),
inset 1px 1px 3px rgba(255, 240, 235, 0.45),
0 3px 10px rgba(0, 0, 0, 0.24),
0 0 18px rgba(230, 200, 195, 0.22);
opacity: 0.9;
}
.bokeh--cool.bokeh--sm {
width: 15px; height: 15px;
box-shadow:
inset -1px -1px 3px rgba(130, 100, 95, 0.2),
inset 1px 1px 2px rgba(255, 240, 235, 0.4),
0 2px 6px rgba(0, 0, 0, 0.22),
0 0 12px rgba(230, 200, 195, 0.22);
}
/* Bokeh MAGENTA (accent DIC — mais raro) */
.bokeh--magenta {
width: 22px; height: 22px;
background:
radial-gradient(circle at 42% 38%,
rgba(255, 235, 245, 0.98) 0%,
rgba(250, 210, 225, 0.88) 30%,
rgba(240, 175, 200, 0.72) 60%,
rgba(220, 140, 175, 0.35) 90%,
rgba(180, 100, 140, 0) 100%);
box-shadow:
inset -2px -2px 5px rgba(140, 60, 90, 0.22),
inset 1px 1px 3px rgba(255, 235, 245, 0.45),
0 3px 10px rgba(0, 0, 0, 0.24),
0 0 22px rgba(240, 175, 200, 0.28);
opacity: 0.88;
}
.bokeh--magenta.bokeh--sm {
width: 14px; height: 14px;
box-shadow:
inset -1px -1px 3px rgba(140, 60, 90, 0.22),
inset 1px 1px 2px rgba(255, 235, 245, 0.4),
0 2px 6px rgba(0, 0, 0, 0.22),
0 0 15px rgba(240, 175, 200, 0.25);
}
/* Animação flutuante MUITO sutil (respirar, não pular) */
@keyframes bokeh-breathe {
0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); opacity: var(--o, 0.95); }
50% { transform: translate(-50%, -50%) translateY(-6px) scale(1.02); opacity: calc(var(--o, 0.95) * 1.08); }
}
.hero-v4__bokehs .bokeh { animation: bokeh-breathe 8s ease-in-out infinite !important; }
.hero-v4__bokehs .bokeh:nth-child(2n) { animation-duration: 10s !important; animation-delay: -3s !important; }
.hero-v4__bokehs .bokeh:nth-child(3n) { animation-duration: 12s !important; animation-delay: -5s !important; }
.hero-v4__bokehs .bokeh:nth-child(5n) { animation-duration: 14s !important; animation-delay: -7s !important; }
/* JS parallax usa 'translate' individual - compoe com 'transform' da animation */
.hero-v4__bokehs .bokeh {
translate: 0 0;
transition: translate .6s cubic-bezier(.16,1,.3,1);
}
/* ============================================================
DESAFIO — Layout boxes editorial + animações modernas
============================================================ */
/* --- SECTION WRAPPER --- */
/* --- PILL HEADER --- */
/* --- SECTION HEAD --- */
/* --- BOXES GRID — grid-template-rows garante alinhamento TOP e BOTTOM --- */
/* Box grande stretch mesmo altura da coluna */
/* --- BOX BASE --- */
/* --- BOX BIG (video) --- */
/* --- BOX STAT --- */
/* --- BOX QUOTE --- */
/* --- ENTRADA REVEAL — mais elegante, stagger --- */
/* --- MOBILE --- */
@media (max-width: 900px) {
}
/* Ajuste: vídeo do box big com opacidade bem reduzida */
/* ============================================================
TAMANHOS FONT = HANS/AFONSO
============================================================ */
/* Section title: mesmo padrão do Hans .sec-title (2.3rem→4.6rem) */
/* Eyebrow: mesmo padrão .eyebrow (0.72rem) */
.sec-desafio__eyebrow,
.dsfbox__label,
.dsfbox__footer,
/* Box title (dsfbox__title): mesmo padrão .feature h3 (1.7rem→2.5rem) */
.dsfbox__title,
/* Desc/parágrafos: mesmo padrão hero__sub (1.08rem) */
/* Num "3": mesmo padrão .bigstat .v (3rem→6rem) */
/* Quote: entre h3 e sub (Hans .acc__t 1.3→2rem) */
/* ============================================================
BOX STAT — fix altura + bullets
============================================================ */
/* Lista de bullets no lugar do texto corrido */
/* Vertical do "Simultâneas" */
/* ============================================================
DESAFIO — REESCRITO DO ZERO (nomenclatura .desa-*, zero herança)
============================================================ */
.desa {
padding: clamp(80px, 12vh, 140px) 0;
background: transparent;
}
.desa__wrap {
max-width: var(--maxw, 1600px);
margin: 0 auto;
padding: 0 var(--gut, 40px);
}
/* Pill */
.desa__pill {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 26px;
border: 1px solid rgba(245, 243, 238, 0.14);
border-radius: 100px;
background: rgba(15, 10, 30, 0.5);
backdrop-filter: blur(12px);
margin-bottom: 32px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(245, 243, 238, 0.85);
transition: all .4s cubic-bezier(.16,1,.3,1);
}
.desa__pill:hover { border-color: rgba(230,62,124,.35); background: rgba(230,62,124,.05); }
.desa__pill-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #E63E7C;
box-shadow: 0 0 8px #E63E7C;
animation: desaDotPulse 2.5s ease-in-out infinite;
}
@keyframes desaDotPulse {
0%, 100% { box-shadow: 0 0 8px #E63E7C; }
50% { box-shadow: 0 0 16px #E63E7C, 0 0 24px rgba(230,62,124,.4); }
}
/* Title */
.desa__title {
font-family: 'Qlassy', 'Playfair Display', Georgia, serif;
font-weight: 400;
font-size: clamp(2.3rem, 5.5vw, 4.6rem);
line-height: 1.02;
letter-spacing: -0.015em;
color: #f5f3ee;
margin: 0 0 48px;
max-width: 22ch;
}
.desa__title em {
font-style: italic;
background: linear-gradient(135deg, #ff6ba8 0%, #E63E7C 40%, #d63175 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Grid */
.desa__grid {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: 24px;
align-items: stretch;
}
.desa__col {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 24px;
}
/* Box base */
.desa__box {
position: relative;
border-radius: 32px;
overflow: hidden;
background: #0f0a1e;
padding: 40px;
color: #f5f3ee;
border: 1px solid rgba(245,243,238,.06);
transition: transform .6s cubic-bezier(.16,1,.3,1),
box-shadow .6s cubic-bezier(.16,1,.3,1),
border-color .4s ease;
display: flex;
flex-direction: column;
}
.desa__box:hover {
transform: translateY(-4px);
border-color: rgba(230,62,124,.2);
box-shadow:
0 20px 60px -20px rgba(230,62,124,.2),
0 8px 24px -8px rgba(0,0,0,.4);
}
/* MAIN box */
.desa__box--main {
min-height: 640px;
height: 100%;
justify-content: flex-end;
gap: 24px;
background: #000;
}
.desa__video {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 35%;
z-index: 0;
opacity: 0.72;
filter: brightness(0.85) saturate(1.08) contrast(1.02);
transition: opacity .8s ease, filter .8s ease, transform 8s ease;
}
.desa__box--main:hover .desa__video {
opacity: 0.85;
filter: brightness(0.95) saturate(1.15) contrast(1.05);
transform: scale(1.03);
}
.desa__overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 90% 60% at 30% 55%, rgba(230,62,124,.12) 0%, transparent 65%),
linear-gradient(180deg, rgba(13,8,25,.2) 0%, transparent 30%, rgba(13,8,25,.55) 100%);
}
.desa__box-body {
position: relative;
z-index: 3;
margin-top: auto;
}
.desa__box-title {
font-family: 'Qlassy', 'Playfair Display', Georgia, serif;
font-weight: 400;
font-size: clamp(1.7rem, 3.4vw, 2.5rem);
line-height: 1.05;
letter-spacing: -0.015em;
color: transparent;
background: linear-gradient(135deg, #ff6ba8 0%, #E63E7C 45%, #d63175 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 18px;
}
.desa__box-desc {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: rgba(245,243,238,.78);
max-width: 46ch;
margin: 0;
}
.desa__box-foot {
position: relative;
z-index: 3;
display: flex;
justify-content: space-between;
padding-top: 24px;
margin-top: 28px;
border-top: 1px solid rgba(245,243,238,.14);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(245,243,238,.55);
}
/* STAT box */
.desa__box--stat {
background: linear-gradient(135deg, #1a0a2e 0%, #12081f 60%, #0f0619 100%);
justify-content: flex-start;
gap: 18px;
min-height: 400px;
}
.desa__label {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(245,243,238,.55);
margin: 0;
}
.desa__num-wrap {
height: clamp(90px, 10vw, 150px);
display: flex;
align-items: flex-start;
overflow: visible;
margin: 8px 0 12px;
}
.desa__num {
font-family: 'Qlassy', 'Playfair Display', Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: clamp(4rem, 9vw, 7rem);
line-height: 1;
color: transparent;
background: linear-gradient(135deg, #ff6ba8 0%, #E63E7C 60%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
padding-bottom: 20px;
}
.desa__vertical {
position: absolute;
top: 50%; right: 22px;
writing-mode: vertical-rl;
transform: translateY(-50%) rotate(180deg);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.62rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: rgba(245,243,238,.15);
transition: color .4s ease;
}
.desa__box--stat:hover .desa__vertical { color: rgba(230,62,124,.5); }
.desa__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.desa__list li {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.92rem;
line-height: 1.5;
color: rgba(245,243,238,.78);
padding-left: 20px;
position: relative;
}
.desa__list li::before {
content: '';
position: absolute;
left: 0;
top: 0.62em;
width: 6px; height: 6px;
border-radius: 50%;
background: #E63E7C;
}
/* QUOTE box */
.desa__box--quote {
background: #0f0a1e;
justify-content: space-between;
gap: 24px;
min-height: 260px;
}
.desa__box--quote::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(230,62,124,.15) 0%, transparent 65%);
pointer-events: none;
transition: transform 1s ease, opacity .6s ease;
opacity: .7;
}
.desa__box--quote:hover::before { transform: scale(1.15); opacity: 1; }
.desa__quote {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(1.1rem, 1.55vw, 1.4rem);
line-height: 1.4;
letter-spacing: -0.005em;
color: #f5f3ee;
margin: 12px 0 0;
position: relative;
z-index: 1;
}
.desa__source {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(245,243,238,.35);
padding-top: 20px;
border-top: 1px solid rgba(245,243,238,.08);
margin: 0;
position: relative;
z-index: 1;
}
/* Reveal button wrap */
.desa__reveal-wrap { margin-top: 32px; }
/* Entrada com blur */
.desa [data-reveal] {
opacity: 0;
transform: translateY(24px) scale(0.98);
filter: blur(4px);
transition: opacity 1.2s cubic-bezier(.19,1,.32,1),
transform 1.4s cubic-bezier(.19,1,.32,1),
filter 1.4s cubic-bezier(.19,1,.32,1);
}
.desa [data-reveal].in {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
.desa [data-reveal][data-d="1"] { transition-delay: .12s; }
.desa [data-reveal][data-d="2"] { transition-delay: .28s; }
.desa [data-reveal][data-d="3"] { transition-delay: .44s; }
/* Mobile */
@media (max-width: 900px) {
.desa__grid { grid-template-columns: 1fr; }
.desa__col { grid-template-rows: auto auto; }
.desa__box--main { min-height: 500px; }
.desa__num-wrap { height: 100px; }
}
/* ============================================================
DCBOX — Desafio Cinemagram Box (nomenclatura NOVA, zero conflito)
============================================================ */
.dcbox {
position: relative;
border-radius: 32px;
overflow: hidden;
min-height: 640px;
height: 100%;
padding: 40px;
background: #050311;
border: 1px solid rgba(245,243,238,.06);
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #f5f3ee;
transition: transform .6s cubic-bezier(.16,1,.3,1),
box-shadow .6s cubic-bezier(.16,1,.3,1),
border-color .4s ease;
}
.dcbox:hover {
transform: translateY(-4px);
border-color: rgba(230,62,124,.22);
box-shadow: 0 20px 60px -20px rgba(230,62,124,.2),
0 8px 24px -8px rgba(0,0,0,.4);
}
.dcbox__vid {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 35%;
z-index: 0;
opacity: 0.8;
filter: brightness(0.85) saturate(1.1) contrast(1.02);
display: block;
transition: opacity .8s ease, filter .8s ease, transform 8s ease;
}
.dcbox:hover .dcbox__vid {
opacity: 0.92;
filter: brightness(0.95) saturate(1.15) contrast(1.05);
transform: scale(1.03);
}
.dcbox__overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 90% 60% at 30% 55%, rgba(230,62,124,.15) 0%, transparent 65%),
linear-gradient(180deg, rgba(5,3,17,.2) 0%, transparent 30%, rgba(5,3,17,.6) 100%);
}
.dcbox__body {
position: relative;
z-index: 3;
margin-top: auto;
}
.dcbox__title {
font-family: 'Qlassy', 'Playfair Display', Georgia, serif;
font-weight: 400;
font-size: clamp(1.7rem, 3.4vw, 2.5rem);
line-height: 1.05;
letter-spacing: -0.015em;
color: transparent;
background: linear-gradient(135deg, #ff6ba8 0%, #E63E7C 45%, #d63175 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 18px;
}
.dcbox__text {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: rgba(245,243,238,.85);
max-width: 46ch;
margin: 0;
}
.dcbox__foot {
position: relative;
z-index: 3;
display: flex;
justify-content: space-between;
padding-top: 24px;
margin-top: 28px;
border-top: 1px solid rgba(245,243,238,.18);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(245,243,238,.6);
}
/* Reveal entrada */
.dcbox[data-reveal] {
opacity: 0;
transform: translateY(24px) scale(0.98);
filter: blur(4px);
transition: opacity 1.2s cubic-bezier(.19,1,.32,1),
transform 1.4s cubic-bezier(.19,1,.32,1),
filter 1.4s cubic-bezier(.19,1,.32,1),
box-shadow .6s ease,
border-color .4s ease;
transition-delay: 0.12s;
}
.dcbox[data-reveal].in {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
/* Opacidade do vídeo pela metade */
.dcbox__vid {
opacity: 0.4 !important;
filter: brightness(0.75) saturate(1) contrast(1) !important;
}
.dcbox:hover .dcbox__vid {
opacity: 0.55 !important;
filter: brightness(0.85) saturate(1.05) contrast(1.02) !important;
}
/* Opacidade ainda menor */
.dcbox__vid {
opacity: 0.2 !important;
filter: brightness(0.7) saturate(0.95) contrast(1) !important;
}
.dcbox:hover .dcbox__vid {
opacity: 0.32 !important;
filter: brightness(0.8) saturate(1) contrast(1.02) !important;
}
/* ============================================================
Diminuir altura dos boxes em 30% + padding reduzido
============================================================ */
.dcbox {
min-height: 450px !important; /* 640 → 450 (-30%) */
padding: 32px !important; /* 40 → 32 pra respiro extra */
}
.desa__box--stat {
min-height: 280px !important; /* 400 → 280 (-30%) */
padding: 32px !important;
gap: 12px !important;
}
.desa__box--quote {
min-height: 180px !important; /* 260 → 180 (-30%) */
padding: 32px !important;
gap: 18px !important;
}
/* Num "3" um pouco menor pra caber com os bullets */
.desa__num {
font-size: clamp(3.5rem, 7.5vw, 6rem) !important;
line-height: 1.3 !important;
}
.desa__num-wrap {
margin: 6px 0 12px !important;
}
/* Título do dcbox um pouco menor */
.dcbox__title {
font-size: clamp(1.5rem, 2.8vw, 2.15rem) !important;
margin-bottom: 14px !important;
}
.dcbox__text {
font-size: 0.94rem !important;
line-height: 1.55 !important;
}
.dcbox__foot {
padding-top: 18px !important;
margin-top: 20px !important;
font-size: 0.62rem !important;
}
/* Quote também um pouco menor */
.desa__quote {
font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
line-height: 1.4 !important;
margin-top: 10px !important;
}
.desa__source {
padding-top: 14px !important;
font-size: 0.62rem !important;
}
/* ============================================================
Specs de margem/padding — mesmos do case Hans (.sec)
============================================================ */
/* Seção Desafio — padding-block igual a Hans */
.desa {
padding-block: clamp(96px, 13vh, 180px) !important;
}
/* Marquee — padding e borders igual a Hans */
.marquee {
padding-block: 22px !important;
border-block: 1px solid rgba(245, 243, 238, 0.08) !important;
margin-block: 0 !important;
}
/* Tablet */
@media (max-width: 900px) {
.desa {
padding-block: clamp(48px, 7vh, 80px) !important;
}
.marquee {
padding-block: 14px !important;
}
}
/* Mobile */
@media (max-width: 680px) {
.desa {
padding-block: clamp(48px, 7vh, 80px) !important;
}
}
/* Também aplicar padding padrão em outras sec do case-dic */
.sec,
section[id="sinopse"],
section[id="metodo"],
section[id="brandbook"],
section[id="resultado"],
section[id="manifesto"] {
padding-block: clamp(96px, 13vh, 180px);
}
@media (max-width: 900px) {
.sec, section[id="sinopse"], section[id="metodo"],
section[id="brandbook"], section[id="resultado"], section[id="manifesto"] {
padding-block: clamp(64px, 9vh, 110px);
}
}
@media (max-width: 680px) {
.sec, section[id="sinopse"], section[id="metodo"],
section[id="brandbook"], section[id="resultado"], section[id="manifesto"] {
padding-block: clamp(48px, 7vh, 80px);
}
}
/* ============================================================
SINOPSE — sub sem serifa + tirar amarelo
============================================================ */
.mag-sinopse__sub-pink {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-style: normal !important;
font-weight: 500 !important;
color: #E63E7C !important;
background: none !important;
-webkit-text-fill-color: #E63E7C !important;
}
/* Tirar cor amarela dos strong/em na sinopse — tudo branco/fg */
.mag-sinopse__lead strong,
.mag-sinopse__body strong,
.mag-sinopse__lead em,
.mag-sinopse__body em {
color: #f5f3ee !important;
background: none !important;
-webkit-text-fill-color: #f5f3ee !important;
font-style: normal !important;
font-weight: 500 !important;
}
/* ============================================================
CARROSSEL DE ANOS — stack sobreposto up-and-down
Inspiração: Coinflect (números empilhados, ativo em foco)
============================================================ */
/* Estado inativo — outline sutil, deslocado horizontalmente */
/* Estado ativo — sólido magenta, maior, empurrado */
/* Info panel do lado direito */
@media (max-width: 900px) {
}
/* ============================================================
DESAFIO — Hover elegante UP + entrada mais interessante
============================================================ */
/* Boxes com UP + glow mais forte no hover */
.dcbox,
.desa__box--stat,
.desa__box--quote {
transition:
transform 0.7s cubic-bezier(.19, 1, .32, 1),
box-shadow 0.7s cubic-bezier(.19, 1, .32, 1),
border-color 0.5s ease,
background-color 0.5s ease !important;
}
.dcbox:hover,
.desa__box--stat:hover,
.desa__box--quote:hover {
transform: translateY(-10px) scale(1.006) !important;
border-color: rgba(230, 62, 124, 0.4) !important;
box-shadow:
0 40px 100px -30px rgba(230, 62, 124, 0.35),
0 20px 40px -15px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
/* Micro-interação no título ao hover */
.dcbox:hover .dcbox__title {
letter-spacing: -0.008em;
}
.desa__box--stat:hover .desa__num {
transform: translateX(8px);
filter: drop-shadow(0 0 20px rgba(230, 62, 124, 0.35));
transition: transform 0.6s cubic-bezier(.19, 1, .32, 1), filter 0.5s ease;
}
.desa__box--quote:hover .desa__quote {
color: #fff;
transition: color 0.4s ease;
}
/* Entrada mais interessante — stagger com clip-path reveal */
.desa [data-reveal] {
opacity: 0;
transform: translateY(40px) scale(0.97);
filter: blur(8px);
clip-path: inset(0 0 100% 0);
transition:
opacity 1.4s cubic-bezier(.19, 1, .32, 1),
transform 1.6s cubic-bezier(.19, 1, .32, 1),
filter 1.6s cubic-bezier(.19, 1, .32, 1),
clip-path 1.8s cubic-bezier(.19, 1, .32, 1) !important;
}
.desa [data-reveal].in {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
clip-path: inset(0 0 0 0);
}
.desa [data-reveal][data-d="1"] { transition-delay: 0.18s !important; }
.desa [data-reveal][data-d="2"] { transition-delay: 0.36s !important; }
.desa [data-reveal][data-d="3"] { transition-delay: 0.54s !important; }
/* Título ganha entrada especial — scale + slide */
.desa__title[data-reveal] {
transform: translateY(60px) scale(0.92);
}
.desa__title[data-reveal].in {
transform: translateY(0) scale(1);
}
/* ============================================================
SINOPSE — Sub sem serifa + mesmo tamanho do body
============================================================ */
.mag-sinopse__lead {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: clamp(17px, 1.15vw, 20px) !important; /* alinhado com body */
line-height: 1.6 !important;
color: rgba(255,255,255,.88) !important;
}
/* Consistência: strong e span-pink também sem serifa */
.mag-sinopse__lead strong {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 1em !important;
color: #f5f3ee !important;
}
.mag-sinopse__sub-pink {
font-size: 1em !important;
}
/* Body — mesmo tamanho */
.mag-sinopse__body {
font-size: clamp(17px, 1.15vw, 20px) !important;
line-height: 1.6 !important;
}
/* ============================================================
Info panel — tudo SANS, sem italic, tamanhos = Sinopse
============================================================ */
/* Meta label — padrão sinopse */
/* Highlight — sans bold magenta, sem italic serifa */
/* Body — mesmo tamanho do Sinopse body */
.years-roulette__body em,
/* Mobile ajuste */
@media (max-width: 900px) {
}
/* ============================================================
CITY CARDS — galerias verticais WE/ARE style
5 cards lado a lado com video em loop + expand no click
============================================================ */
.city-cards {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-top: clamp(60px, 8vh, 100px);
padding-top: clamp(60px, 8vh, 100px);
border-top: 1px solid rgba(245, 243, 238, 0.08);
}
/* Card individual */
.city-card {
position: relative;
aspect-ratio: 9/16;
overflow: hidden;
border-radius: 4px;
cursor: pointer;
transition: transform 0.6s cubic-bezier(.22, 1, .32, 1), box-shadow 0.6s ease;
background: #0a0714;
}
.city-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}
/* Video de fundo */
.city-card__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.city-card__media video {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(0.25) brightness(0.75) contrast(1.05);
transition: filter 0.7s ease, transform 8s ease;
}
.city-card:hover .city-card__media video,
.city-card.is-expanded .city-card__media video {
filter: grayscale(0.15) brightness(0.85) contrast(1.08);
transform: scale(1.04);
}
/* Overlay gradient dark */
.city-card__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg,
rgba(13, 8, 25, 0.15) 0%,
transparent 30%,
transparent 60%,
rgba(13, 8, 25, 0.85) 100%);
pointer-events: none;
transition: background 0.5s ease;
}
/* Meta info — bottom-left do card */
.city-card__meta {
position: absolute;
bottom: 24px;
left: 20px;
right: 20px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 6px;
color: #f5f3ee;
transition: transform 0.5s cubic-bezier(.22, 1, .32, 1), opacity 0.4s ease;
}
.city-card__num {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(245, 243, 238, 0.75);
}
.city-card__name {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: clamp(1.15rem, 1.5vw, 1.6rem);
line-height: 1.1;
letter-spacing: -0.01em;
color: #f5f3ee;
}
.city-card__year {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(245, 243, 238, 0.55);
}
/* Toggle button — top right */
.city-card__toggle {
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(245, 243, 238, 0.1);
border: 1px solid rgba(245, 243, 238, 0.25);
color: #f5f3ee;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight: 300;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: all 0.4s cubic-bezier(.22, 1, .32, 1);
backdrop-filter: blur(10px);
}
.city-card__toggle:hover {
background: rgba(230, 62, 124, 0.4);
border-color: rgba(230, 62, 124, 0.6);
transform: rotate(90deg);
}
.city-card__toggle span {
display: block;
transition: transform 0.4s ease;
}
/* Panel — box expansível por trás com conteúdo */
.city-card__panel {
position: absolute;
inset: 0;
z-index: 4;
background: linear-gradient(180deg,
rgba(13, 8, 25, 0.72) 0%,
rgba(13, 8, 25, 0.9) 100%);
backdrop-filter: blur(14px);
opacity: 0;
visibility: hidden;
transform: translateY(100%);
transition:
opacity 0.5s cubic-bezier(.22, 1, .32, 1),
transform 0.65s cubic-bezier(.22, 1, .32, 1),
visibility 0.5s;
pointer-events: none;
}
.city-card.is-expanded .city-card__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.city-card.is-expanded .city-card__meta {
opacity: 0;
transform: translateY(20px);
}
.city-card.is-expanded .city-card__toggle span {
transform: rotate(45deg); /* + vira × */
}
.city-card__panel-inner {
padding: 32px 20px 24px;
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
overflow-y: auto;
color: #f5f3ee;
}
.city-card__logo {
width: 100%;
max-width: 180px;
height: auto;
margin: 0 auto 8px;
opacity: 0.9;
}
.city-card__panel-meta {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #E63E7C;
font-weight: 500;
}
.city-card__panel-hl {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
font-style: normal;
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
line-height: 1.2;
letter-spacing: -0.01em;
color: #f5f3ee;
margin: 0;
}
.city-card__panel-body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.9rem;
line-height: 1.55;
color: rgba(245, 243, 238, 0.85);
margin: 0;
}
/* Card current — Curitiba/2026 (destaque sutil) */
.city-card--current {
outline: 1px solid rgba(230, 62, 124, 0.5);
outline-offset: -1px;
}
/* Reveal entrance */
.city-cards[data-reveal] .city-card {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.9s cubic-bezier(.19, 1, .32, 1), transform 1s cubic-bezier(.19, 1, .32, 1);
}
.city-cards[data-reveal].in .city-card { opacity: 1; transform: translateY(0); }
.city-cards[data-reveal].in .city-card:nth-child(1) { transition-delay: 0.05s; }
.city-cards[data-reveal].in .city-card:nth-child(2) { transition-delay: 0.15s; }
.city-cards[data-reveal].in .city-card:nth-child(3) { transition-delay: 0.25s; }
.city-cards[data-reveal].in .city-card:nth-child(4) { transition-delay: 0.35s; }
.city-cards[data-reveal].in .city-card:nth-child(5) { transition-delay: 0.45s; }
/* Mobile */
@media (max-width: 900px) {
.city-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.city-card:nth-child(5) { grid-column: span 2; aspect-ratio: 16/9; }
}
@media (max-width: 520px) {
.city-cards { grid-template-columns: 1fr; }
.city-card, .city-card:nth-child(5) { aspect-ratio: 4/5; grid-column: auto; }
}
/* ============================================================
HERO — título menor + botões em linha
============================================================ */
.hero-v4__title {
font-size: clamp(38px, 4.2vw, 62px) !important;
line-height: 1 !important;
max-width: 18ch !important;
letter-spacing: -0.015em !important;
}
/* CTAs em row, mesma linha */
.hero-v4__ctas {
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 12px !important;
margin-top: 8px !important;
align-items: center !important;
}
@media (max-width: 900px) {
.hero-v4__title { font-size: clamp(30px, 6.5vw, 42px) !important; }
.hero-v4__ctas { gap: 10px !important; }
}
/* ============================================================
HERO — LAYOUT PILL 2 COLUNAS (diagrama do user)
============================================================ */
/* Content vira pill horizontal com bordas MUITO arredondadas */
.hero-v4__content {
position: absolute !important;
left: 50% !important;
bottom: 8% !important;
top: auto !important;
right: auto !important;
transform: translateX(-50%) !important;
width: min(1400px, 92vw) !important;
max-width: none !important;
z-index: 10 !important;
padding: 52px 72px !important;
border-radius: 300px !important; /* pill total */
background: rgba(15, 10, 30, 0.28) !important;
border: 1px solid rgba(245, 243, 238, 0.10) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
align-items: stretch !important;
justify-content: center !important;
margin: 0 !important;
}
/* Pill topo à esquerda */
.hero-v4__pill-wrap {
display: flex;
justify-content: flex-start;
}
/* Grid 2 colunas: esquerda título, direita sub + ctas */
.hero-v4__cols {
display: grid !important;
grid-template-columns: 1.15fr 1fr !important;
gap: 48px !important;
align-items: center !important;
}
.hero-v4__left { display: flex; align-items: center; }
.hero-v4__right {
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-start;
}
/* Título — proporcionado pra caber em 4 linhas */
.hero-v4__title {
font-size: clamp(28px, 3.3vw, 48px) !important;
line-height: 1.02 !important;
letter-spacing: -0.015em !important;
max-width: 100% !important;
margin: 0 !important;
}
/* Sub direita */
.hero-v4__sub {
font-size: clamp(13px, 0.95vw, 15.5px) !important;
line-height: 1.55 !important;
max-width: 100% !important;
margin: 0 !important;
}
/* CTAs em row abaixo do sub */
.hero-v4__ctas {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
margin: 0 !important;
align-items: center;
}
.hero-v4__cta {
padding: 12px 24px !important;
font-size: 10.5px !important;
letter-spacing: 0.2em !important;
}
/* Mobile: content vai pra cima, colunas empilham */
@media (max-width: 900px) {
.hero-v4__content {
width: 92vw !important;
padding: 32px 28px !important;
border-radius: 32px !important;
bottom: 5% !important;
}
.hero-v4__cols {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.hero-v4__title { font-size: clamp(26px, 6vw, 36px) !important; }
}
/* ============================================================
HERO — PILL compacta pousada sobre o video (v final)
============================================================ */
.hero-v4__content {
/* Pill compacta e pousada */
height: auto !important;
min-height: 260px !important;
max-height: 320px !important;
width: min(1300px, 90vw) !important;
padding: 40px 60px !important;
bottom: 8% !important;
left: 50% !important;
transform: translateX(-50%) !important;
border-radius: 200px !important;
/* Background mais transparente pro video respirar */
background: rgba(13, 8, 25, 0.32) !important;
backdrop-filter: blur(8px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
border: 1px solid rgba(245, 243, 238, 0.10) !important;
/* Content centralizado vertical */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 16px !important;
box-shadow:
0 20px 60px -20px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Pill topo mais discreta */
.hero-v4__pill-wrap {
display: flex !important;
justify-content: flex-start !important;
margin-bottom: 4px !important;
}
/* Grid 2 colunas ajustadas */
.hero-v4__cols {
display: grid !important;
grid-template-columns: 1.15fr 1fr !important;
gap: 56px !important;
align-items: center !important;
}
/* Título compacto — 4 linhas cabendo */
.hero-v4__title {
font-size: clamp(24px, 2.6vw, 36px) !important;
line-height: 1.05 !important;
letter-spacing: -0.012em !important;
max-width: 100% !important;
margin: 0 !important;
}
/* Sub direita */
.hero-v4__right {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
align-items: flex-start !important;
}
.hero-v4__sub {
font-size: clamp(12.5px, 0.9vw, 14.5px) !important;
line-height: 1.55 !important;
max-width: 100% !important;
margin: 0 !important;
}
/* CTAs compactos row */
.hero-v4__ctas {
display: flex !important;
flex-direction: row !important;
gap: 10px !important;
margin: 0 !important;
}
.hero-v4__cta {
padding: 10px 22px !important;
font-size: 10px !important;
letter-spacing: 0.18em !important;
}
/* Mobile */
@media (max-width: 900px) {
.hero-v4__content {
width: 92vw !important;
height: auto !important;
max-height: none !important;
padding: 28px 32px !important;
border-radius: 28px !important;
bottom: 5% !important;
gap: 20px !important;
}
.hero-v4__cols {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.hero-v4__title { font-size: clamp(22px, 5.5vw, 30px) !important; }
}
/* ============================================================
HERO — Título FORA do box, sub+CTAs dentro (v final v2)
Diagrama: título acima esquerda, box pill compacta abaixo
============================================================ */
/* Título block fora do box */
.hero-v4__title-block {
position: absolute !important;
bottom: calc(8% + 260px + 32px) !important; /* acima do box (8% + altura + gap) */
left: 50% !important;
transform: translateX(-50%) !important;
width: min(1300px, 90vw) !important;
z-index: 10 !important;
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
align-items: flex-start !important;
}
/* Título estilo Hans hero — GRANDE */
.hero-v4__title-block .hero-v4__title {
font-family: 'Qlassy', 'Playfair Display', Georgia, serif !important;
font-weight: 400 !important;
font-size: clamp(2.7rem, 6.6vw, 6.4rem) !important; /* MESMO Hans */
line-height: 1 !important;
letter-spacing: -0.018em !important;
color: #f5f3ee !important;
margin: 0 !important;
max-width: 100% !important;
}
.hero-v4__title-block .hero-v4__title em {
font-style: italic !important;
background: linear-gradient(135deg, #ff6ba8 0%, #E63E7C 45%, #d63175 80%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* Pill topo acima do título */
.hero-v4__title-block .hero-v4__pill {
align-self: flex-start !important;
}
/* Content (pill) — só sub + CTAs alinhados à esquerda */
.hero-v4__content {
height: auto !important;
min-height: 180px !important;
max-height: 220px !important;
bottom: 8% !important;
padding: 32px 60px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important; /* alinhado esquerda */
gap: 16px !important;
text-align: left !important;
}
/* Sub esquerda */
.hero-v4__content .hero-v4__sub {
text-align: left !important;
align-self: flex-start !important;
max-width: 68ch !important;
font-size: clamp(13px, 0.95vw, 15px) !important;
line-height: 1.55 !important;
margin: 0 !important;
}
/* CTAs esquerda em row */
.hero-v4__content .hero-v4__ctas {
display: flex !important;
flex-direction: row !important;
gap: 10px !important;
align-items: center !important;
align-self: flex-start !important;
margin: 0 !important;
}
/* Neutralizar grid antigo (não usado mais) */
.hero-v4__cols { display: contents !important; }
.hero-v4__left, .hero-v4__right { display: contents !important; }
.hero-v4__pill-wrap { display: none !important; }
/* Mobile */
@media (max-width: 900px) {
.hero-v4__title-block {
width: 92vw !important;
bottom: auto !important;
top: 20% !important;
left: 4% !important;
transform: none !important;
}
.hero-v4__title-block .hero-v4__title {
font-size: clamp(2rem, 8vw, 3rem) !important;
}
.hero-v4__content {
width: 92vw !important;
min-height: auto !important;
max-height: none !important;
padding: 24px 28px !important;
border-radius: 28px !important;
}
}
/* ============================================================
HERO — título sem box + sub padrão Hans body
============================================================ */
/* Title-block SEM background/blur/box */
.hero-v4__title-block {
background: none !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
/* Distância maior do box abaixo */
bottom: calc(8% + 240px + 48px) !important;
}
/* Content (box) — mantém glass, um pouco maior pra caber sub maior */
.hero-v4__content {
min-height: 200px !important;
max-height: 260px !important;
padding: 36px 60px !important;
}
/* Sub: PADRÃO Hans body (hero__sub = 1.08rem) — aumentado */
.hero-v4__content .hero-v4__sub {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 1.08rem !important; /* ← igual Hans hero sub */
line-height: 1.6 !important;
color: rgba(245, 243, 238, 0.9) !important;
max-width: 62ch !important;
font-weight: 400 !important;
}
.hero-v4__content .hero-v4__sub b,
.hero-v4__content .hero-v4__sub strong {
font-weight: 500 !important;
color: #f5f3ee !important;
}
/* CTAs um pouco maiores pra acompanhar sub */
.hero-v4__content .hero-v4__cta {
padding: 12px 26px !important;
font-size: 11px !important;
letter-spacing: 0.2em !important;
}
/* Mobile */
@media (max-width: 900px) {
.hero-v4__content .hero-v4__sub { font-size: 0.98rem !important; }
.hero-v4__title-block { bottom: auto !important; }
}
/* ============================================================
BOKEHS HERO — versão final (restaurado)
============================================================ */
.hero-v4 .hero-bokehs {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.hero-v4 .hero-bokehs .bokeh-css {
position: absolute;
width: var(--size, 60px);
height: var(--size, 60px);
border-radius: 50%;
pointer-events: none;
animation: bokehBreathe 10s cubic-bezier(.4, 0, .3, 1) infinite;
}
.hero-v4 .hero-bokehs .bokeh-css[data-tone="warm"] {
background: radial-gradient(circle at 40% 40%,
rgba(255, 220, 170, 0.55) 0%,
rgba(255, 200, 130, 0.42) 45%,
rgba(230, 170, 100, 0.15) 75%,
transparent 100%);
box-shadow:
0 0 40px rgba(255, 210, 165, 0.14),
0 0 80px rgba(255, 195, 145, 0.06);
}
.hero-v4 .hero-bokehs .bokeh-css:nth-child(1) { animation-duration: 11s; animation-delay: -1s; }
.hero-v4 .hero-bokehs .bokeh-css:nth-child(2) { animation-duration: 13s; animation-delay: -4s; }
.hero-v4 .hero-bokehs .bokeh-css:nth-child(3) { animation-duration: 9s; animation-delay: -7s; }
.hero-v4 .hero-bokehs .bokeh-css:nth-child(4) { animation-duration: 12s; animation-delay: -3s; }
.hero-v4 .hero-bokehs .bokeh-css:nth-child(5) { animation-duration: 14s; animation-delay: -6s; }
@keyframes bokehBreathe {
0%, 100% { transform: scale(1) translateY(0); opacity: 0.85; filter: blur(2px); }
50% { transform: scale(1.15) translateY(-8px); opacity: 0.4; filter: blur(8px); }
}
/* ============================================================
HERO — clarear + tirar box do título + abrir content
============================================================ */
/* Video mais claro */
.hero-v4__video video {
filter: brightness(0.92) saturate(1.08) contrast(1) !important;
object-position: 68% 45% !important;
}
/* Vignette mais suave */
.hero-v4__vignette {
background:
radial-gradient(ellipse 100% 90% at 65% 45%, transparent 0%, transparent 60%, rgba(15,8,30,.25) 90%, rgba(15,8,30,.35) 100%),
linear-gradient(90deg, rgba(20,8,38,.32) 0%, rgba(20,8,38,.12) 30%, transparent 60%, transparent 85%, rgba(20,8,38,.2) 100%) !important;
}
.hero-v4__grad {
background: linear-gradient(180deg, rgba(13,8,25,.22) 0%, transparent 30%, transparent 70%, rgba(13,8,25,.35) 100%) !important;
}
/* Title-block TOTALMENTE sem box */
.hero-v4__title-block {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
outline: none !important;
}
/* Content pill mais largo — abrir a caixa */
.hero-v4__content {
width: min(1500px, 94vw) !important;
padding: 32px 72px !important;
min-height: 190px !important;
max-height: 240px !important;
}
/* Sub com mais respiro */
.hero-v4__content .hero-v4__sub {
max-width: 78ch !important;
}
/* ============================================================
HERO — FIX ALTURA + isolar próxima seção
============================================================ */
/* Header precisa ter altura própria (bem definida) */
.hero-v4 {
position: relative !important;
height: 100vh !important;
min-height: 720px !important;
max-height: 1080px !important;
overflow: hidden !important;
isolation: isolate !important;
}
/* Video/vignette/bokehs preenchem o hero inteiro */
.hero-v4__video,
.hero-v4__vignette,
.hero-v4__grad,
.hero-v4 .hero-bokehs {
position: absolute !important;
inset: 0 !important;
}
/* Garantir que próxima seção NÃO se sobreponha ao hero */
.hero-v4 + section,
.hero-v4 + .desa,
.hero-v4 + .mag-sec {
position: relative !important;
z-index: 1 !important;
}
/* ============================================================
NUKE — remover TODO box atrás do título
============================================================ */
/* title-block e TODOS descendants sem qualquer container visual */
.hero-v4__title-block,
.hero-v4__title-block *,
.hero-v4__title-block::before,
.hero-v4__title-block::after {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
outline: none !important;
border-radius: 0 !important;
filter: none !important;
}
/* Exceção: pill pode ter background pill discreta */
.hero-v4__title-block .hero-v4__pill {
background: rgba(255,255,255,.05) !important;
background-color: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 100px !important;
}
/* Título mantém o gradient text nas */
.hero-v4__title-block .hero-v4__title,
.hero-v4__title-block .hero-v4__title em {
background: none !important;
}
.hero-v4__title-block .hero-v4__title em {
background: linear-gradient(135deg, #ff6ba8 0%, #E63E7C 45%, #d63175 80%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* Sub: todo texto no mesmo corpo (sem bold) */
.hero-v4__content .hero-v4__sub,
.hero-v4__content .hero-v4__sub * {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-weight: 400 !important;
font-style: normal !important;
font-size: 1.08rem !important;
line-height: 1.6 !important;
color: rgba(245,243,238,.9) !important;
}
/* ============================================================
HERO — alinhar título e conteúdo do box na mesma margem
============================================================ */
.hero-v4__title-block {
padding-left: 72px !important;
padding-right: 72px !important;
}
/* Content mantém padding 72px — texto e CTAs alinham com título */
.hero-v4__content {
padding-left: 72px !important;
padding-right: 72px !important;
}
/* Mobile mantém padding reduzido em ambos */
@media (max-width: 900px) {
.hero-v4__title-block,
.hero-v4__content {
padding-left: 28px !important;
padding-right: 28px !important;
}
}
/* ============================================================
HERO — margens padrão Hans (--maxw 1600px, --gut 40px)
============================================================ */
.hero-v4__title-block {
width: 100% !important;
max-width: var(--maxw, 1600px) !important;
padding-left: var(--gut, 40px) !important;
padding-right: var(--gut, 40px) !important;
}
.hero-v4__content {
width: calc(100% - 40px) !important;
max-width: calc(var(--maxw, 1600px) - 40px) !important;
padding-left: var(--gut, 40px) !important;
padding-right: var(--gut, 40px) !important;
}
/* Responsive Hans */
@media (max-width: 900px) {
.hero-v4__title-block,
.hero-v4__content {
padding-left: clamp(20px, 5vw, 32px) !important;
padding-right: clamp(20px, 5vw, 32px) !important;
}
}
/* ============================================================
HERO — content com mais respiro + hero full tela
============================================================ */
/* Hero full-screen */
.hero-v4 {
height: 100vh !important;
min-height: 100vh !important;
max-height: none !important;
}
/* Content: mais padding interno pra texto+CTAs afastarem da borda */
.hero-v4__content {
padding: 40px 80px !important;
min-height: 210px !important;
max-height: 280px !important;
}
/* Title-block mantém padding gut Hans */
.hero-v4__title-block {
padding-left: var(--gut, 40px) !important;
padding-right: var(--gut, 40px) !important;
}
@media (max-width: 900px) {
.hero-v4__content {
padding: 28px clamp(24px, 5vw, 40px) !important;
}
}
/* ============================================================
HERO — centralizar conteúdo verticalmente
============================================================ */
/* Hero vira flex column pra centralizar */
.hero-v4 {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 40px !important;
}
/* Background layers seguem absolute (video, vignette, bokehs) */
.hero-v4__video,
.hero-v4__vignette,
.hero-v4__grad,
.hero-v4 .hero-bokehs {
position: absolute !important;
inset: 0 !important;
}
/* Title-block e content: FLUXO normal (não mais absolute) */
.hero-v4__title-block,
.hero-v4__content {
position: relative !important;
bottom: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
margin-inline: auto !important;
z-index: 10 !important;
}
.hero-v4__title-block { z-index: 11 !important; }
/* Remover linha divisora entre sinopse texto e galeria city-cards */
.city-cards {
border-top: none !important;
padding-top: 0 !important;
margin-top: clamp(40px, 5vh, 60px) !important;
}
/* ============================================================
CITY CARDS — hover overlay com textos + logo
============================================================ */
/* Meta base — some no hover */
.city-card__meta {
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22, 1, .32, 1);
}
.city-card:hover .city-card__meta {
opacity: 0;
transform: translateY(20px);
}
/* Toggle + também some no hover (overlay do hover substitui) */
.city-card__toggle {
transition: opacity 0.4s ease;
}
.city-card:hover .city-card__toggle {
opacity: 0;
}
/* Panel — vira o overlay de hover */
.city-card__panel {
position: absolute !important;
inset: 0 !important;
z-index: 4 !important;
background: linear-gradient(180deg,
rgba(13, 8, 25, 0.72) 0%,
rgba(13, 8, 25, 0.88) 100%) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
opacity: 0 !important;
visibility: hidden !important;
transform: none !important;
transition: opacity 0.55s cubic-bezier(.22, 1, .32, 1),
visibility 0.55s !important;
pointer-events: none !important;
}
/* HOVER — mostra o overlay */
.city-card:hover .city-card__panel {
opacity: 1 !important;
visibility: visible !important;
}
/* Estado is-expanded mantido pra click (opcional) */
.city-card.is-expanded .city-card__panel {
opacity: 1 !important;
visibility: visible !important;
}
/* Panel inner: layout centralizado com logo em cima e textos embaixo */
.city-card__panel-inner {
padding: 24px 20px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 14px !important;
height: 100% !important;
text-align: center !important;
transform: translateY(15px);
transition: transform 0.55s cubic-bezier(.22, 1, .32, 1);
}
.city-card:hover .city-card__panel-inner {
transform: translateY(0);
}
/* Logo destacado */
.city-card__logo {
max-width: 140px !important;
margin: 0 auto 8px !important;
opacity: 0.95 !important;
filter: brightness(1.05) drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
/* Meta panel (label edição) */
.city-card__panel-meta {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 0.62rem !important;
letter-spacing: 0.28em !important;
text-transform: uppercase !important;
color: rgba(230, 62, 124, 0.9) !important;
font-weight: 500 !important;
margin: 0 !important;
}
/* Highlight — nome do card */
.city-card__panel-hl {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-weight: 700 !important;
font-size: clamp(1rem, 1.3vw, 1.25rem) !important;
line-height: 1.15 !important;
color: #f5f3ee !important;
margin: 0 !important;
}
/* Body — texto curto */
.city-card__panel-body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 0.82rem !important;
line-height: 1.5 !important;
color: rgba(245, 243, 238, 0.85) !important;
max-width: 90% !important;
margin: 4px auto 0 !important;
}
/* Hover no card: leve UP */
.city-card {
transition: transform 0.5s cubic-bezier(.22, 1, .32, 1), box-shadow 0.5s ease !important;
}
.city-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6) !important;
}
/* ============================================================
CITY CARDS PANEL — textos padrão Hans + alinhados à esquerda
============================================================ */
.city-card__panel-inner {
padding: 28px 24px !important;
justify-content: flex-end !important; /* conteúdo pousa embaixo */
align-items: flex-start !important; /* esquerda */
text-align: left !important;
gap: 12px !important;
}
/* Logo: PNG oficial, mais generoso, alinhado à esquerda */
.city-card__logo {
max-width: 130px !important;
width: 65% !important;
margin: 0 0 8px 0 !important;
align-self: flex-start !important;
opacity: 1 !important;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
/* Meta (label) — padrão Hans .eyebrow */
.city-card__panel-meta {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 0.72rem !important;
letter-spacing: 0.28em !important;
text-transform: uppercase !important;
color: rgba(230, 62, 124, 0.9) !important;
font-weight: 500 !important;
margin: 0 !important;
text-align: left !important;
}
/* Highlight — nome/frase do card, maior */
.city-card__panel-hl {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-weight: 700 !important;
font-size: clamp(1.1rem, 1.5vw, 1.45rem) !important;
line-height: 1.15 !important;
color: #f5f3ee !important;
margin: 0 !important;
text-align: left !important;
letter-spacing: -0.005em !important;
}
/* Body — padrão Hans body 1.08rem */
.city-card__panel-body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 1.02rem !important;
line-height: 1.55 !important;
color: rgba(245, 243, 238, 0.88) !important;
max-width: 100% !important;
margin: 0 !important;
text-align: left !important;
font-weight: 400 !important;
}
@media (max-width: 900px) {
.city-card__panel-hl { font-size: 1.1rem !important; }
.city-card__panel-body { font-size: 0.95rem !important; }
.city-card__logo { max-width: 100px !important; }
}
/* ============================================================
SINOPSE — galeria centralizada vertical na seção
============================================================ */
section[id="sinopse"], .mag-sec {
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
section[id="sinopse"] > .wrap,
.mag-sec > .wrap {
width: 100% !important;
}
/* City-cards com margem simétrica pro centro visual */
.city-cards {
margin-top: clamp(30px, 4vh, 50px) !important;
margin-bottom: clamp(30px, 4vh, 50px) !important;
}
/* ============================================================
SINOPSE — margens padronizadas Hans + tirar 100vh forçado
============================================================ */
/* Voltar padding-block padrão Hans (não force 100vh) */
section[id="sinopse"], .mag-sec {
min-height: auto !important;
height: auto !important;
display: block !important;
padding-block: clamp(64px, 9vh, 120px) !important; /* mais harmônico — reduzido do padrão Hans que ficava grande demais */
}
@media (max-width: 900px) {
section[id="sinopse"], .mag-sec {
padding-block: clamp(64px, 9vh, 110px) !important;
}
}
/* City-cards: margem simétrica menor pro respiro justo */
.city-cards {
margin-top: clamp(48px, 6vh, 72px) !important;
margin-bottom: 0 !important;
}
/* Tirar os botões + e − dos city-cards */
.city-card__toggle {
display: none !important;
}
/* ============================================================
MÉTODO — sem serifas (exceto título+num), sem amarelo, animações
============================================================ */
/* Body do intro: tirar serifa/italic */
.mag-method__body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: 1.05rem !important;
line-height: 1.6 !important;
color: rgba(245, 243, 238, 0.85) !important;
}
.mag-method__body strong {
color: #E63E7C !important; /* magenta em vez de amarelo */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 1em !important;
background: none !important;
}
.mag-method__body em {
color: #E63E7C !important;
font-style: normal !important;
font-weight: 500 !important;
}
/* Divider label: sans */
.mag-divider__label {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
color: rgba(245, 243, 238, 0.55) !important;
}
/* Description dos pilares: SANS, sem italic */
.mag-cap__desc {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: 0.98rem !important;
line-height: 1.55 !important;
color: rgba(245, 243, 238, 0.72) !important;
}
/* Título mag-method: MANTÉM serifa Qlassy. Só troca "em" pra magenta */
.mag-method__title-line--em { color: #E63E7C !important; }
/* Numero: MANTÉM serifa italic, cor magenta em vez de amarelo */
.mag-cap__num {
color: #E63E7C !important;
transition: transform 0.6s cubic-bezier(.19, 1, .32, 1), text-shadow 0.4s ease;
}
/* Nome do pilar: sans (já é) — só reforçar */
.mag-cap__name {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
transition: color 0.4s ease, letter-spacing 0.5s cubic-bezier(.19, 1, .32, 1);
}
/* ============================================================
ANIMAÇÕES — entrada + hover
============================================================ */
/* Cada .mag-cap tem entrada com stagger */
.mag-cap {
opacity: 0;
transform: translateX(-20px);
filter: blur(4px);
transition:
opacity 0.9s cubic-bezier(.19, 1, .32, 1),
transform 1s cubic-bezier(.19, 1, .32, 1),
filter 1s cubic-bezier(.19, 1, .32, 1),
background 0.4s ease,
padding 0.5s cubic-bezier(.19, 1, .32, 1);
padding: 20px 0 !important;
border-bottom: 1px solid rgba(245, 243, 238, 0.08);
position: relative;
overflow: hidden;
}
.mag-cap::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleY(0);
transform-origin: center;
width: 3px;
height: 60%;
background: #E63E7C;
transition: transform 0.5s cubic-bezier(.19, 1, .32, 1);
}
/* Reveal quando pai entra na viewport */
.mag-caps.in .mag-cap { opacity: 1; transform: translateX(0); filter: blur(0); }
.mag-caps.in .mag-cap:nth-child(1) { transition-delay: 0.06s; }
.mag-caps.in .mag-cap:nth-child(2) { transition-delay: 0.14s; }
.mag-caps.in .mag-cap:nth-child(3) { transition-delay: 0.22s; }
.mag-caps.in .mag-cap:nth-child(4) { transition-delay: 0.30s; }
.mag-caps.in .mag-cap:nth-child(5) { transition-delay: 0.38s; }
/* Hover: item destaca com barra magenta + push right + glow no número */
.mag-cap:hover {
padding-left: 18px !important;
background: linear-gradient(90deg, rgba(230, 62, 124, 0.05) 0%, transparent 70%);
}
.mag-cap:hover::before {
transform: translateY(-50%) scaleY(1);
}
.mag-cap:hover .mag-cap__num {
transform: translateX(-4px);
text-shadow: 0 0 20px rgba(230, 62, 124, 0.5);
}
.mag-cap:hover .mag-cap__name {
color: #f5f3ee;
letter-spacing: 0.05em;
}
.mag-cap:hover .mag-cap__desc {
color: rgba(245, 243, 238, 0.88);
transition: color 0.4s ease;
}
/* Título com reveal por linha */
.mag-method__title-line {
display: block;
opacity: 0;
transform: translateY(24px);
filter: blur(6px);
transition:
opacity 1s cubic-bezier(.19, 1, .32, 1),
transform 1.1s cubic-bezier(.19, 1, .32, 1),
filter 1.1s cubic-bezier(.19, 1, .32, 1);
}
.mag-method__title.in .mag-method__title-line { opacity: 1; transform: translateY(0); filter: blur(0); }
.mag-method__title.in .mag-method__title-line:nth-child(1) { transition-delay: 0.05s; }
.mag-method__title.in .mag-method__title-line:nth-child(2) { transition-delay: 0.15s; }
.mag-method__title.in .mag-method__title-line:nth-child(3) { transition-delay: 0.25s; }
/* ============================================================
CICLO — nova seção, padrão Hans + big numbers centralizados
============================================================ */
.ciclo {
padding-block: clamp(96px, 13vh, 180px);
padding-inline: var(--gut, 40px);
position: relative;
z-index: 2;
}
.ciclo > .wrap {
max-width: var(--maxw, 1600px);
margin: 0 auto;
}
.ciclo__head {
max-width: 900px;
margin-bottom: clamp(60px, 8vh, 100px);
}
.ciclo__eyebrow {
display: flex; align-items: center; gap: 14px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(245,243,238,.55);
margin-bottom: 24px;
font-weight: 400;
}
.ciclo__eyebrow strong { color: #E63E7C; font-weight: 500; }
/* Título: padrão Hans .sec-title */
.ciclo__title {
font-family: 'Qlassy', 'Playfair Display', Georgia, serif;
font-weight: 400;
font-size: clamp(2.3rem, 5.5vw, 4.6rem);
line-height: 1.02;
letter-spacing: -0.018em;
color: #f5f3ee;
margin: 0 0 32px;
max-width: 20ch;
}
.ciclo__title em {
font-style: italic;
background: linear-gradient(135deg, #ff6ba8 0%, #E63E7C 45%, #d63175 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Lead: padrão Hans hero__sub */
.ciclo__lead {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1.08rem;
line-height: 1.6;
color: rgba(245,243,238,.85);
max-width: 62ch;
margin: 0;
}
.ciclo__lead strong { color: #E63E7C; font-weight: 500; }
/* Timeline · feixe de luz scroll-linked */
.ciclo__tl {
position: relative;
margin-top: 40px;
padding: 60px 0 40px;
}
/* wrapper do SVG — alinhado no centro dos markers (padding-top 60 + wrap 56/2 = 88) */
.ciclo__tl-svg-wrap {
position: absolute;
top: 88px;
left: 5%; right: 5%;
height: 4px;
transform: translateY(-2px);
pointer-events: none;
z-index: 1;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.ciclo__tl-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ciclo__tl-base { stroke: rgba(245,243,238,.05); stroke-width: 1; fill: none; }
.ciclo__tl-beam-outer {
stroke: rgba(230,62,124,.22);
stroke-width: 6;
fill: none;
stroke-linecap: round;
filter: blur(3px);
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset .4s ease-out;
}
.ciclo__tl-beam-core {
stroke: #E63E7C;
stroke-width: 1.4;
fill: none;
stroke-linecap: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset .4s ease-out;
filter: drop-shadow(0 0 2px rgba(230,62,124,.5));
}
/* grid — markers centralizados na linha */
.ciclo__tl-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
position: relative;
z-index: 2;
}
.ciclo__phase {
position: relative;
padding-top: 0;
text-align: center;
}
/* marker centralizado — sem borda, background do bg pra "cortar" a linha */
.ciclo__marker-wrap {
position: relative;
height: 56px;
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.ciclo__marker {
position: relative;
top: auto; left: auto;
transform: none;
width: 56px; height: 56px;
border-radius: 50%;
background: transparent;
border: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Qlassy', 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 15px;
color: rgba(230,62,124,.55);
z-index: 3;
transition: transform .7s cubic-bezier(.34,1.56,.64,1), color .4s ease, background .4s ease;
will-change: transform;
}
/* ripple ring — dispara uma vez quando o feixe passa */
.ciclo__marker::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
border: 1.5px solid #E63E7C;
opacity: 0;
transform: scale(.85);
pointer-events: none;
}
.ciclo__phase.is-lit .ciclo__marker {
color: #fff;
background: #E63E7C;
transform: scale(1.08);
}
.ciclo__phase.is-lit .ciclo__marker::after {
animation: ciclo-ripple .95s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes ciclo-ripple {
0% { opacity: .6; transform: scale(.85); border-width: 1.5px; }
60% { opacity: .25; }
100% { opacity: 0; transform: scale(2.1); border-width: 0.5px; }
}
/* texto ganha lift ao acender */
.ciclo__phase-name {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
color: #f5f3ee;
margin: 0 0 10px;
transition: transform .55s cubic-bezier(.34,1.56,.64,1), color .4s ease;
}
.ciclo__phase.is-lit .ciclo__phase-name { transform: translateY(-2px); }
.ciclo__phase-period {
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #E63E7C;
margin: 0 0 20px;
font-weight: 500;
}
.ciclo__phase-body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.92rem;
line-height: 1.55;
color: rgba(245,243,238,.72);
text-align: center;
margin: 0;
}
/* Big numbers centralizados */
.ciclo__metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin-top: clamp(80px, 10vh, 120px);
padding-top: clamp(48px, 6vh, 72px);
border-top: 1px solid rgba(245,243,238,.08);
}
.ciclo__metric {
text-align: center; /* ← centralizado como pediste */
}
.ciclo__metric-num {
font-family: 'Qlassy', 'Playfair Display', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: clamp(3rem, 6vw, 5.5rem); /* padrão Hans .bigstat aproximado */
line-height: 0.9;
color: #E63E7C;
margin-bottom: 12px;
text-align: center;
}
.ciclo__metric-label {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(245,243,238,.72);
font-weight: 500;
margin: 0;
text-align: center;
}
/* Entrada com stagger */
.ciclo [data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.9s cubic-bezier(.19, 1, .32, 1), transform 1s cubic-bezier(.19, 1, .32, 1);
}
.ciclo [data-reveal].in { opacity: 1; transform: translateY(0); }
.ciclo [data-reveal][data-d="1"] { transition-delay: 0.1s; }
.ciclo [data-reveal][data-d="2"] { transition-delay: 0.25s; }
.ciclo [data-reveal][data-d="3"] { transition-delay: 0.4s; }
/* Mobile */
@media (max-width: 900px) {
.ciclo__tl { padding: 0; }
.ciclo__tl-svg-wrap { display: none; }
.ciclo__tl-grid { grid-template-columns: 1fr; gap: 32px; }
.ciclo__phase { padding-left: 68px; text-align: left; }
.ciclo__marker-wrap { position: absolute; top: 0; left: 0; margin: 0; height: auto; }
.ciclo__marker { width: 48px; height: 48px; font-size: 14px; color: #fff; background: #E63E7C; }
.ciclo__phase-name, .ciclo__phase-period, .ciclo__phase-body { text-align: left; }
.ciclo__metrics { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
/* ============================================================
PADRÃO HANS — tipografia global das seções (case DIC)
Padroniza todas as seções nas specs do Hans
============================================================ */
/* Section titles: clamp(2.3rem, 5.5vw, 4.6rem) — Hans .sec-title */
.mag-sinopse__title,
.desa__title,
.mag-method__title,
.ciclo__title,
.mag-result__title {
font-family: 'Qlassy', 'Playfair Display', Georgia, serif !important;
font-weight: 400 !important;
font-size: clamp(2.3rem, 5.5vw, 4.6rem) !important;
line-height: 1.02 !important;
letter-spacing: -0.018em !important;
}
/* Eyebrows: 0.72rem letter-spacing 0.32em uppercase */
.mag-divider__label,
.ciclo__eyebrow,
.mag-result__eyebrow,
.desa__pill span:not(.desa__pill-dot) {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 0.72rem !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
font-weight: 400 !important;
}
/* Lead/sub principal: 1.08rem (Hans hero__sub) */
.mag-sinopse__lead,
.desa__box-desc,
.dcbox__text,
.ciclo__lead,
.mag-result__body,
.mag-method__body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 1.08rem !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
/* Body/desc secundário: 1rem line-height 1.55 */
.mag-sinopse__body,
.mag-cap__desc,
.ciclo__phase-body,
.city-card__panel-body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 1rem !important;
line-height: 1.55 !important;
font-weight: 400 !important;
}
/* Subtítulos/nomes: clamp(1.7rem, 3.4vw, 2.5rem) — Hans feature h3 */
.dcbox__title,
.desa__quote,
.mag-cap__name,
.ciclo__phase-name {
font-size: clamp(1.15rem, 1.6vw, 1.5rem) !important;
line-height: 1.15 !important;
}
.dcbox__title { font-size: clamp(1.7rem, 3.4vw, 2.5rem) !important; }
/* Big numbers: clamp(3rem, 8vw, 6rem) — Hans .bigstat .v */
.ciclo__metric-num,
.rescard .v,
.desa__num,
.mag-result__stat-num {
font-size: clamp(3rem, 8vw, 6rem) !important;
line-height: 0.9 !important;
}
/* Labels de stat: 0.72rem uppercase */
.ciclo__metric-label,
.rescard__label,
.mag-result__stat-label {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 0.72rem !important;
letter-spacing: 0.28em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
}
/* Padding-block padrão Hans .sec em TODAS as sections do case */
.mag-sec,
.desa,
.ciclo {
padding-block: clamp(96px, 13vh, 180px) !important;
padding-inline: var(--gut, 40px) !important;
}
@media (max-width: 900px) {
.mag-sec, .desa, .ciclo {
padding-block: clamp(64px, 9vh, 110px) !important;
}
}
/* ============================================================
PADRÃO HANS — reforço final tipografia (specs padronizadas)
Máxima especificidade pra vencer cascades antigos
============================================================ */
/* LEADS/SUBS - 1.08rem (Hans hero__sub) */
section.mag-sec .mag-sinopse__lead,
section#sinopse .mag-sinopse__lead,
.mag-sinopse .mag-sinopse__lead,
.desa .dcbox__text,
.desa .desa__box-desc,
.ciclo .ciclo__lead,
.mag-result__body,
.mag-method .mag-method__body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 1.08rem !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
/* BODY (parágrafos menores) - 1rem */
section.mag-sec .mag-sinopse__body,
.desa .desa__list li,
.mag-method .mag-cap__desc,
.ciclo .ciclo__phase-body,
.city-card__panel-body,
.reveal-detail p {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 1rem !important;
line-height: 1.6 !important;
}
/* SECTION TITLES - clamp(2.3, 5.5vw, 4.6rem) */
section .mag-sinopse__title,
section .desa__title,
section .mag-method__title,
section .ciclo__title,
section .mag-result__title {
font-size: clamp(2.3rem, 5.5vw, 4.6rem) !important;
line-height: 1.02 !important;
}
/* CITY CARD HL - 1.15rem (era 0.9rem menor) */
.city-card .city-card__panel-hl,
.city-cards .city-card__panel-hl {
font-size: clamp(1.15rem, 1.5vw, 1.45rem) !important;
line-height: 1.15 !important;
font-weight: 700 !important;
}
/* PILL da eyebrow (não misturar com pill hero) */
.mag-divider__label,
.desa__pill,
.ciclo__eyebrow,
.mag-result__eyebrow {
font-size: 0.72rem !important;
letter-spacing: 0.32em !important;
}
/* Cap name (pilar método) */
.mag-method .mag-cap__name {
font-size: clamp(1.25rem, 1.8vw, 1.65rem) !important;
line-height: 1.15 !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
}
/* Timeline phase name */
.ciclo .ciclo__phase-name {
font-size: 0.95rem !important;
letter-spacing: 0.06em !important;
font-weight: 700 !important;
}
/* ============================================================
AJUSTES FINOS — Hero pill dot, hover box, Marquee, Desafio
============================================================ */
/* 1. HERO — bolinha rosa na pill do title-block */
.hero-v4__title-block .hero-v4__pill {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 20px !important;
}
.hero-v4__title-block .hero-v4__pill-dot {
display: inline-block !important;
width: 8px;
height: 8px;
border-radius: 50%;
background: #E63E7C !important;
box-shadow: 0 0 10px #E63E7C !important;
animation: heroPillPulse 2.2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes heroPillPulse {
0%, 100% { box-shadow: 0 0 8px #E63E7C; }
50% { box-shadow: 0 0 18px #E63E7C, 0 0 28px rgba(230,62,124,.4); }
}
/* 2. HERO — UP no hover do box */
.hero-v4__content {
transition: transform 0.5s cubic-bezier(.22, 1, .32, 1), background 0.4s ease !important;
}
.hero-v4__content:hover {
transform: translateY(-6px) !important;
background: rgba(15, 10, 30, 0.42) !important;
box-shadow: 0 24px 60px -20px rgba(230, 62, 124, 0.15) !important;
}
/* 3. MARQUEE — tudo em uma cor só (creme), tirar amarelo dos separadores */
.marquee span::after,
.marquee__track span::after {
color: rgba(245, 243, 238, 0.55) !important;
}
.marquee span,
.marquee__track span {
color: rgba(245, 243, 238, 0.85) !important;
}
/* 4. DESAFIO título 2x */
.desa .desa__title {
font-size: clamp(3.5rem, 8vw, 7rem) !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
}
/* 5. BOX "3 frentes" — num 3 maior + caixa aberta + counter */
.desa .desa__box--stat {
padding: 44px 40px !important;
min-height: 460px !important;
overflow: visible !important;
}
.desa .desa__num-wrap {
min-height: 180px !important;
overflow: visible !important;
display: flex !important;
align-items: flex-start !important;
margin: 8px 0 24px !important;
}
.desa .desa__num {
font-size: clamp(5rem, 12vw, 10rem) !important; /* 1x maior */
line-height: 1 !important;
padding-bottom: 20px !important;
overflow: visible !important;
display: inline-block !important;
}
/* 6. BULLETS — UP no hover */
.desa .desa__list li {
transition: transform 0.4s cubic-bezier(.22, 1, .32, 1), color 0.3s ease !important;
cursor: default;
}
.desa .desa__list li:hover {
transform: translateY(-3px) translateX(3px) !important;
color: #f5f3ee !important;
}
.desa .desa__list li:hover::before {
transform: scale(1.35) !important;
box-shadow: 0 0 12px rgba(230, 62, 124, 0.6) !important;
transition: transform 0.3s cubic-bezier(.22, 1, .32, 1), box-shadow 0.3s ease !important;
}
.desa .desa__list li::before {
transition: transform 0.3s cubic-bezier(.22, 1, .32, 1), box-shadow 0.3s ease !important;
}
/* 7. BOX diagnóstico — título centralizado no box */
.desa .desa__box--quote {
text-align: center !important;
justify-content: center !important;
align-items: center !important;
}
.desa .desa__box--quote > div {
text-align: center !important;
width: 100% !important;
}
.desa .desa__box--quote .desa__quote {
text-align: center !important;
margin: 0 auto !important;
max-width: 90% !important;
}
.desa .desa__box--quote .desa__label {
text-align: center !important;
}
.desa .desa__box--quote .desa__source {
text-align: center !important;
}
/* ============================================================
AJUSTES FINOS v2 — pill dot circular, título box big, num, quote
============================================================ */
/* 1. Hero pill dot: forçar CÍRCULO 8x8 */
.hero-v4__title-block .hero-v4__pill-dot {
display: inline-block !important;
width: 8px !important;
height: 8px !important;
min-width: 8px !important;
min-height: 8px !important;
max-width: 8px !important;
max-height: 8px !important;
border-radius: 50% !important;
background: #E63E7C !important;
box-shadow: 0 0 10px #E63E7C !important;
padding: 0 !important;
margin: 0 !important;
flex-shrink: 0 !important;
border: none !important;
}
/* 2. Título da SEÇÃO Desafio: VOLTAR tamanho anterior */
.desa .desa__title {
font-size: clamp(2.3rem, 5.5vw, 4.6rem) !important; /* padrão Hans .sec-title */
line-height: 1.02 !important;
}
/* 2b. Título do BOX GRANDE (dcbox): 2x maior */
.desa .dcbox .dcbox__title,
.dcbox .dcbox__title {
font-size: clamp(2.4rem, 5.5vw, 4rem) !important;
line-height: 1.02 !important;
margin-bottom: 20px !important;
}
/* 3. Box 3 frentes — número 3 com container grande o suficiente pra não cortar */
.desa .desa__box--stat {
overflow: visible !important;
min-height: 480px !important;
}
.desa .desa__num-wrap {
height: auto !important;
min-height: 220px !important;
overflow: visible !important;
display: flex !important;
align-items: flex-start !important;
padding: 0 !important;
margin: 12px 0 32px !important;
}
.desa .desa__num {
overflow: visible !important;
display: inline-block !important;
padding: 0 8px 30px 0 !important;
line-height: 1 !important;
}
/* 4. Box diagnóstico — VOLTAR alinhamento esquerda, só centralizar VERTICAL */
.desa .desa__box--quote {
text-align: left !important;
align-items: stretch !important;
justify-content: center !important; /* centralizar VERTICAL */
}
.desa .desa__box--quote > div {
text-align: left !important;
width: 100% !important;
}
.desa .desa__box--quote .desa__quote,
.desa .desa__box--quote .desa__label,
.desa .desa__box--quote .desa__source {
text-align: left !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ============================================================
BOX DIAGNÓSTICO — cravar referência
Label topo | quote logo abaixo | source no rodapé separado por linha
============================================================ */
.desa .desa__box--quote {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important; /* topo e rodapé nas pontas */
align-items: stretch !important;
text-align: left !important;
gap: 0 !important;
padding: 36px 40px !important;
min-height: 340px !important;
}
/* Grupo topo (label + quote) */
.desa .desa__box--quote > div:first-of-type {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
align-items: flex-start !important;
width: 100% !important;
text-align: left !important;
}
/* Label DIAGNÓSTICO */
.desa .desa__box--quote .desa__label {
text-align: left !important;
margin: 0 !important;
}
/* Quote — Helvetica bold branca 3 linhas via
*/
.desa .desa__box--quote .desa__quote {
text-align: left !important;
margin: 0 !important;
max-width: 100% !important;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-weight: 500 !important;
font-style: normal !important;
font-size: clamp(1.15rem, 1.6vw, 1.5rem) !important;
line-height: 1.35 !important;
color: #f5f3ee !important;
letter-spacing: -0.005em !important;
}
/* Source rodapé — colado embaixo com linha divisória */
.desa .desa__box--quote .desa__source {
text-align: left !important;
margin-top: auto !important; /* empurra pro fundo */
padding-top: 20px !important;
border-top: 1px solid rgba(245, 243, 238, 0.12) !important;
width: 100% !important;
color: rgba(245, 243, 238, 0.45) !important;
}
/* Texto do dcbox — abrir mais pra direita */
.dcbox .dcbox__text,
.desa .dcbox .dcbox__text {
max-width: 62ch !important;
}
/* Num "3" — respiro TOTAL pra não cortar em nada */
.desa .desa__box--stat {
overflow: visible !important;
min-height: 520px !important;
}
.desa .desa__num-wrap {
height: auto !important;
min-height: 260px !important;
overflow: visible !important;
display: block !important;
padding: 20px 0 40px !important;
margin: 8px 0 20px !important;
line-height: 1 !important;
}
.desa .desa__num {
display: inline-block !important;
overflow: visible !important;
padding: 0 12px 20px 0 !important;
margin: 0 !important;
line-height: 1.25 !important;
vertical-align: baseline !important;
}
.desa .desa__num em {
overflow: visible !important;
display: inline-block !important;
padding: 6px 0 20px 0 !important;
line-height: 1.15 !important;
}
/* Título desafio — espaço pra descenders (g, p, j) não cortarem */
.desa .desa__title {
line-height: 1.08 !important;
padding-bottom: 12px !important;
overflow: visible !important;
margin-bottom: 32px !important;
}
.desa .desa__title em {
padding-bottom: 6px !important;
display: inline-block !important;
line-height: 1.15 !important;
}
/* Sinopse lead — caixa mais fechada */
.mag-sinopse .mag-sinopse__lead,
section#sinopse .mag-sinopse__lead {
max-width: 44ch !important;
}
/* Sinopse lead - abrir um pouco */
.mag-sinopse .mag-sinopse__lead,
section#sinopse .mag-sinopse__lead {
max-width: 52ch !important;
}
/* Sinopse lead - tiquinho a mais */
.mag-sinopse .mag-sinopse__lead,
section#sinopse .mag-sinopse__lead {
max-width: 56ch !important;
}
/* Sinopse body — tiquinho a mais */
.mag-sinopse .mag-sinopse__body,
section#sinopse .mag-sinopse__body {
max-width: 52ch !important;
}
/* Método body - tirar rosa strong/em + abrir 8ch */
.mag-method .mag-method__body,
section#metodo .mag-method__body {
max-width: 50ch !important; /* era ~42ch, +8ch */
}
.mag-method .mag-method__body strong,
.mag-method .mag-method__body em {
color: #f5f3ee !important;
background: none !important;
-webkit-text-fill-color: #f5f3ee !important;
font-weight: 500 !important;
font-style: normal !important;
}
/* ============================================================
CICLO — círculos harmoniosos + hover UP nos big numbers
============================================================ */
/* Círculos da timeline: purple médio (harmoniza com bg navy-purple) */
.ciclo .ciclo__marker { /* override neutralizada — nova timeline usa .ciclo__marker próprio */ }
.ciclo .ciclo__phase:hover .ciclo__marker { /* override neutralizada — hover não é usado na nova timeline */ }
/* Big numbers hover — UP + glow */
.ciclo .ciclo__metric {
transition: transform 0.5s cubic-bezier(.22, 1, .32, 1) !important;
cursor: default;
}
.ciclo .ciclo__metric:hover {
transform: translateY(-6px) !important;
}
.ciclo .ciclo__metric:hover .ciclo__metric-num {
filter: drop-shadow(0 8px 20px rgba(230, 62, 124, 0.4)) !important;
transition: filter 0.4s ease !important;
}
.ciclo .ciclo__metric-num {
transition: filter 0.4s ease !important;
}
/* ============================================================
Brand Book · cursor lupa custom (portado do Afonso)
============================================================ */
.bb-cursor{
position:fixed;top:0;left:0;z-index:9999;
width:74px;height:74px;border-radius:50%;
background:var(--rose);color:#fff;
display:grid;place-items:center;
pointer-events:none;
transform:translate(-50%,-50%) scale(0);
transition:transform .35s cubic-bezier(.16,1,.3,1), background .25s ease;
box-shadow:0 12px 32px -8px rgba(165,113,106,.55);
}
.bb-cursor.is-on{ transform:translate(-50%,-50%) scale(1); }
.bb-cursor.is-active{ background:var(--rose-deep); transform:translate(-50%,-50%) scale(1.12); }
.bb-cursor svg{ width:26px;height:26px; }
@media(hover:none){ .bb-cursor{display:none;} }
/* Esconder cursor padrão quando hover na galeria (desktop) */
@media(hover:hover){
.cin__item, .cin__item *{ cursor:none !important; }
}
/* Esconder o cursor Case DIC quando o hover está na galeria (deixa a lupa livre) */
.case-cursor.is-off-gallery{ transform:translate(-50%,-50%) scale(0) !important; }
/* nav backdrop scrim — gradient sutil no topo pra reforçar legibilidade em fundos claros */
body::before{
content:'';
position:fixed;top:0;left:0;right:0;height:88px;
background:linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.06) 55%, transparent 100%);
pointer-events:none;z-index:99;
}
/* Award reveal (Doctalks) — mesmo espaçamento do desa reveal */
.mag-award__reveal { margin-top: clamp(28px, 4vh, 44px); }
/* ============================================================
CTA / MANIFESTO — padrão Hans (limpo, centralizado)
============================================================ */
.mag-cta__head { text-align: center; }
.mag-cta__title { text-align: center; margin-inline: auto; }
.mag-cta__mantra { text-align: center; margin-inline: auto; max-width: 42ch; }
.mag-cta__topbtn-wrap {
margin-top: clamp(56px, 8vh, 100px);
margin-bottom: clamp(56px, 8vh, 100px);
display: flex; justify-content: center;
}
.mag-cta__topbtn {
display: inline-flex; align-items: center; gap: 12px;
padding: 18px 36px; border-radius: 100px;
background: var(--primary); color: #fff;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: .82rem; font-weight: 600; letter-spacing: .04em;
text-decoration: none;
box-shadow: 0 12px 32px -12px rgba(230,62,124,.55);
transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .4s ease;
}
.mag-cta__topbtn:hover {
background: #b8305e;
transform: translateY(-2px);
box-shadow: 0 18px 42px -14px rgba(230,62,124,.7);
}
.mag-cta__topbtn .arr { transition: transform .35s var(--ease); }
.mag-cta__topbtn:hover .arr { transform: translateY(-3px); }
/* Credits — cópia 1:1 do .foot Hans (block simples, herda text-align center do .mag-cta) */
.mag-cta__credits {
display: flex !important;
flex-wrap: wrap;
gap: 24px 48px;
justify-content: space-between;
padding-block: 48px;
padding-top: 48px; /* reset padding-top da rule antiga */
margin-top: clamp(40px, 6vh, 80px);
margin-inline: 0; /* reset margin auto da rule antiga */
max-width: none; /* reset max-width 1200px */
border-top: 0; /* remover border-top da rule antiga */
text-align: center; /* garante centralização (Hans herda do .cta) */
}
@media (max-width: 900px) { .mag-cta__credits { padding-block: 32px; gap: 18px 32px; } }
.mag-credit {
display: block; /* mesmo comportamento do Hans .foot > div — herda text-align center do parent */
}
.mag-credit__l {
display: block !important;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: .62rem !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.42) !important;
margin: 0 0 8px !important;
}
.mag-credit__v {
display: block !important;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-style: normal !important;
font-size: .9rem !important;
color: rgba(255,255,255,.68) !important;
line-height: 1.4 !important;
}
@media (max-width: 600px) {
.mag-credit__l { font-size: .58rem !important; }
.mag-credit__v { font-size: .84rem !important; }
}
/* ============================================================
MOBILE AUDIT — DIC · refinos responsivos por seção
Aplicado após auditoria (viewport < 760px)
============================================================ */
@media (max-width: 760px){
/* Nav mais enxuto (já feito no Afonso, replica aqui) */
.nav__meta { display: none; }
/* Desafio: título grande estoura → reduzir + padding */
.desa__title { font-size: clamp(2rem, 8.5vw, 3.2rem) !important; line-height: 1.02 !important; }
.desa__wrap { padding-inline: 20px !important; }
.desa__grid { grid-template-columns: 1fr !important; gap: 16px !important; }
.desa__pill { font-size: .68rem !important; letter-spacing: .12em !important; padding: 8px 14px !important; }
.dcbox { min-height: 280px !important; }
.dcbox__title { font-size: clamp(1.3rem, 6vw, 1.9rem) !important; }
.box.stat { padding: 24px 20px !important; }
.box.stat .num { font-size: clamp(3.4rem, 18vw, 5.4rem) !important; }
.box.quote { padding: 24px 20px !important; min-height: auto !important; }
.desa__quote { font-size: .96rem !important; line-height: 1.5 !important; }
/* Sinopse: cities cards + lead */
.mag-sinopse { padding-inline: 20px !important; }
.mag-sinopse__title { font-size: clamp(2.2rem, 9vw, 3.4rem) !important; line-height: 1.02 !important; }
.mag-sinopse__body p { font-size: 1rem !important; }
.city-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
.city-card { min-height: 240px !important; }
/* Método: título gigante estoura */
.mag-method__title { font-size: clamp(2rem, 8.5vw, 3.4rem) !important; line-height: 1.02 !important; }
.mag-method { grid-template-columns: 1fr !important; gap: 32px !important; padding-inline: 20px !important; }
.mag-method__body p { font-size: 1rem !important; }
/* Ciclo: título + big numbers */
.ciclo__title { font-size: clamp(2rem, 8.5vw, 3.4rem) !important; line-height: 1.02 !important; }
.ciclo__lead { font-size: 1rem !important; }
.ciclo__metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
.ciclo__metric { padding: 20px 16px !important; }
.ciclo__metric-num { font-size: clamp(2.4rem, 12vw, 3.6rem) !important; }
/* Resultado: título + boxes já tratados na task 27, reforçar */
.mag-result__title { font-size: clamp(2rem, 8.5vw, 3.4rem) !important; line-height: 1.02 !important; }
.mag-result__lead { font-size: 1rem !important; padding-inline: 20px !important; }
.mag-metrics { grid-template-columns: 1fr !important; gap: 12px !important; padding-inline: 20px !important; }
.mag-trusted__grid { grid-template-columns: 1fr !important; padding-inline: 20px !important; }
/* CTA/Manifesto: já centralizado + botão pill */
.mag-cta__title { font-size: clamp(2.2rem, 10vw, 3.6rem) !important; }
.mag-cta__mantra { font-size: 1rem !important; padding-inline: 20px !important; }
.mag-cta__topbtn { padding: 14px 26px !important; font-size: .76rem !important; }
/* Brand Book: galeria já é horizontal scroll, ajustar só título */
.bbhead h2 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; line-height: 1.05 !important; }
/* CTAs pill dot uniform */
.hero-v4__pill { padding: 8px 14px !important; font-size: .62rem !important; letter-spacing: .12em !important; line-height: 1.3 !important; }
/* Marquee escopo: reduzir gap */
.marquee { padding-block: 10px !important; }
}
/* Telas ultra-estreitas (< 380px) */
@media (max-width: 380px){
.desa__title, .mag-sinopse__title, .mag-method__title, .ciclo__title, .mag-result__title { font-size: clamp(1.7rem, 9vw, 2.6rem) !important; }
.mag-cta__title { font-size: clamp(1.9rem, 10vw, 2.8rem) !important; }
.box.stat .num { font-size: clamp(2.8rem, 15vw, 4.2rem) !important; }
.ciclo__metric-num { font-size: clamp(2rem, 11vw, 2.8rem) !important; }
}
/* MANTRA sans light unificado (DIC) — padrão sem serif italic */
.mag-cta__mantra {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-style: normal !important;
font-weight: 300 !important;
font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
line-height: 1.4 !important;
color: rgba(255,255,255,.72) !important;
letter-spacing: .005em !important;
max-width: 42ch !important;
margin: 22px auto 0 !important;
}
.mag-cta__mantra strong {
color: #fff !important;
font-weight: 500 !important;
}
/* ============================================================
MOBILE SIMPLIFIED — DIC (viewport <= 900px)
Filosofia: desktop-first · mobile = versão leve pra performar
Ocultar: bokehs, vídeos autoplay, mouse-parallax, feixe SVG animado, cursor custom
Manter: conteúdo semântico (títulos, textos, boxes, galeria estática)
============================================================ */
@media (max-width: 900px){
/* --- HERO --- */
/* Video de fundo desabilitado — poster estático apenas */
.hero-v4__video video { display: none !important; }
.hero-v4__video { background-image: url('case-dic-assets/img/hero-poster.webp'); background-size: cover; background-position: center; }
.hero-v4__video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,13,51,.35) 0%, rgba(26,13,51,.75) 100%); }
/* Bokehs desabilitados (16 elementos com blur pesado) */
.hero-bokehs, .bokeh-css, [data-mouse-parallax] { display: none !important; }
/* Cursor custom já é hover-none */
.case-cursor, .bb-cursor { display: none !important; }
/* --- MARQUEE animado — pausar em mobile pra reduzir CPU --- */
.marquee__track { animation: none !important; }
.marquee { overflow: hidden !important; }
.marquee__track { transform: none !important; justify-content: flex-start !important; padding-left: 20px; }
/* --- DESAFIO --- */
/* Cinemagram video → poster estático */
.dcbox__vid { display: none !important; }
.dcbox { background-image: url('case-dic-assets/img/desafio-cinemagram-poster.webp'); background-size: cover; background-position: center; }
.dcbox__overlay { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%) !important; }
/* --- CICLO Timeline feixe de luz — versão estática vertical --- */
.ciclo__tl-svg-wrap { display: none !important; }
.ciclo__tl { padding: 0 !important; }
.ciclo__tl-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
.ciclo__phase { text-align: left !important; padding-left: 60px !important; position: relative; }
.ciclo__marker-wrap { position: absolute !important; top: 0 !important; left: 0 !important; height: auto !important; margin: 0 !important; }
.ciclo__marker { width: 44px !important; height: 44px !important; font-size: 13px !important; background: var(--primary) !important; color: #fff !important; border: 0 !important; }
.ciclo__marker::after { display: none !important; } /* sem ripple */
.ciclo__phase-name { text-align: left !important; }
.ciclo__phase-body { text-align: left !important; }
/* --- RESULTADO --- */
/* Video resultado se houver — desabilita */
.resultado-head__video video, .resultado__media video { display: none !important; }
.resultado-head__video { background: rgba(26,13,51,.55) !important; }
/* --- BRAND BOOK galeria --- */
/* Horizontal scroll ok, mas remove animações complexas */
.cin__item:hover img { transform: none !important; }
.cin__item::after { display: none !important; }
/* --- Reveals — mais rápidas em mobile (menos delay) --- */
[data-reveal] { transition-duration: .5s !important; }
[data-reveal][data-d="1"] { transition-delay: 0s !important; }
[data-reveal][data-d="2"] { transition-delay: .1s !important; }
[data-reveal][data-d="3"] { transition-delay: .2s !important; }
/* --- Text-shadow do nav — reforça legibilidade sobre poster --- */
.nav__menu a, .nav__meta { text-shadow: 0 1px 6px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.4) !important; }
}