/* ============================================================= MN — Dra. Marcela Noronha · sistema visual base.css · tokens, superfícies, tipografia, cabeçalho, rodapé ============================================================= */ @font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url('../fonts/newsreader.woff2') format('woff2')} @font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/newsreader-italic.woff2') format('woff2')} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/inter-tight.woff2') format('woff2')} :root{ /* paleta */ --tinta:#0D0D0D; --breu:#1E1D1B; /* segundo escuro, quente — batida visível contra o #0D0D0D */ --grafite:#2A2927; --cinza:#77736D; --papel:#F2F0EC; --papel-2:#E8E5DF; /* segundo claro, para o claro não virar monotonia */ --branco:#FFFFFF; --zap:#25D366; /* grão: mata o banding do gradiente e é o que separa uma superfície escura "cara" de um preto chapado. Fica em background-image, não em pseudo-elemento — assim não há disputa de empilhamento com o conteúdo. */ --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.062'/%3E%3C/svg%3E"); --grao-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.038'/%3E%3C/svg%3E"); /* papéis semânticos — reescritos por [data-fundo] */ --fundo:var(--papel); --texto:var(--tinta); --texto-2:#4A4741; --linha:rgba(13,13,13,.2); --linha-forte:rgba(13,13,13,.4); --realce:rgba(13,13,13,.05); --textura:var(--grao-claro); --atmosfera:radial-gradient(115% 80% at var(--luz,14% 0%),rgba(13,13,13,.045),rgba(13,13,13,0) 60%); --fantasma-op:.05; /* tipografia */ --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --t-display:clamp(2.6rem,6.6vw,5.6rem); --t-h2:clamp(2.05rem,4.6vw,3.7rem); --t-h3:clamp(1.3rem,2.1vw,1.8rem); --t-lead:clamp(1.0625rem,1.3vw,1.25rem); --t-corpo:1.0625rem; --t-micro:.6875rem; /* medidas */ --wrap:1240px; --pad:clamp(1.25rem,5vw,4.5rem); /* --vw vem do script no (documentElement.clientWidth) porque 100vw INCLUI a barra de rolagem: a foto sangrava ~7px além da borda, e o overflow-x:hidden recortava esses pixels em silêncio. */ --bleed:calc(max(0px,(var(--vw,100vw) - var(--wrap)) / 2) + var(--pad)); --sec:clamp(4.25rem,9vw,8rem); --alt-cab:clamp(72px,7.6vw,98px); --mola:cubic-bezier(.16,.84,.28,1); --suave:cubic-bezier(.4,0,.2,1); } [data-fundo="escuro"], [data-fundo="escuro-2"]{ --fundo:var(--tinta); --texto:var(--papel); --texto-2:rgba(242,240,236,.74); --linha:rgba(242,240,236,.19); --linha-forte:rgba(242,240,236,.44); --realce:rgba(242,240,236,.06); --textura:var(--grao); --atmosfera:radial-gradient(120% 85% at var(--luz,82% 0%),rgba(242,240,236,.06),rgba(242,240,236,0) 62%); --fantasma-op:.055; } [data-fundo="escuro-2"]{--fundo:var(--breu)} [data-fundo="claro-2"]{--fundo:var(--papel-2)} *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--alt-cab) + 1rem); } body{ margin:0; background:var(--papel); color:var(--tinta); font-family:var(--sans); font-size:var(--t-corpo); font-weight:400; line-height:1.74; letter-spacing:.002em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } body.sem-rolagem{overflow:hidden} img,picture,svg{display:block;max-width:100%} img{height:auto} h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-.019em; margin:0; text-wrap:balance; } h1{font-size:var(--t-display)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.011em} p{margin:0} a{color:inherit;text-decoration:none} :focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:1px; } ::selection{background:var(--tinta);color:var(--papel)} [data-fundo="escuro"] ::selection, [data-fundo="escuro-2"] ::selection{background:var(--papel);color:var(--tinta)} /* pular para o conteúdo — só aparece no foco por teclado */ .pula{ position:fixed; top:.7rem;left:.7rem; z-index:300; background:var(--papel); color:var(--tinta); font-size:.8125rem; font-weight:500; letter-spacing:.06em; padding:.85em 1.2em; border:1px solid var(--tinta); transform:translateY(-180%); transition:transform .35s var(--mola); } .pula:focus{transform:none} /* ---------- superfícies ---------- */ .secao{ background-color:var(--fundo); background-image:var(--atmosfera),var(--textura); background-repeat:no-repeat,repeat; background-size:100% 100%,180px 180px; color:var(--texto); padding-block:var(--sec); position:relative; } /* filete no alto da seção, largura inteira — em camada de fundo, para não precisar de pseudo-elemento posicionado disputando empilhamento */ .secao--filete{ background-image: linear-gradient(to bottom,var(--linha) 0,var(--linha) 1px,transparent 1px), var(--atmosfera),var(--textura); background-repeat:no-repeat,no-repeat,repeat; background-size:100% 100%,100% 100%,180px 180px; } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:1; } /* moldura editorial: dois filetes verticais nos limites do wrap */ .secao--enquadrada > .wrap{ border-inline:1px solid var(--linha); } /* numeral gigante ao fundo — preenche o vazio com estrutura, não com enfeite */ .fantasma{ position:absolute; font-family:var(--serif); font-weight:400; font-size:clamp(8rem,22vw,20rem); line-height:.76; letter-spacing:-.045em; color:var(--texto); opacity:var(--fantasma-op); pointer-events:none; user-select:none; z-index:0; } /* ---------- cabeçalho de seção ---------- */ .secao__topo{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem 2rem; padding-bottom:clamp(1.5rem,2.8vw,2.2rem); border-bottom:1px solid var(--linha); margin-bottom:clamp(2.6rem,5.5vw,4.4rem); } .secao__conta{ font-variant-numeric:tabular-nums; white-space:nowrap; opacity:.72; } /* ---------- microtipografia ---------- */ .micro{ font-size:var(--t-micro); font-weight:500; letter-spacing:.2em; text-transform:uppercase; line-height:1.5; color:var(--texto-2); margin:0; } .micro--forte{color:var(--texto)} .micro .num{ font-variant-numeric:tabular-nums; color:var(--texto); margin-right:1.1em; position:relative; } .micro .num::after{ content:""; position:absolute; top:50%;right:-.62em; width:.34em;height:1px; background:var(--linha-forte); } /* h1/h2 têm margin 0 e line-height apertado; sem isto o rótulo micro encosta no título (as ascendentes da serifada sobem por cima dele). `.surge` entra na lista porque envolver o título em `.surge` desfaz o irmão adjacente: o vizinho do rótulo passa a ser a moldura, não o h1. */ .micro + h1, .micro + h2, .micro + h3{margin-top:clamp(1.5rem,2.4vw,1.85rem)} .micro + .surge{margin-top:clamp(1.5rem,2.4vw,1.85rem)} /* mesma razão do outro lado: o parágrafo de abertura encostava no título */ h1 + .olho, h1 + .corpo, h2 + .olho, h2 + .corpo, h3 + .corpo{margin-top:clamp(1.7rem,2.8vw,2.1rem)} .surge + .olho{margin-top:clamp(1.7rem,2.8vw,2.1rem)} .olho{ font-family:var(--serif); font-size:var(--t-lead); line-height:1.64; font-weight:400; color:var(--texto); } .corpo{color:var(--texto-2);max-width:58ch} .corpo + .corpo{margin-top:1.2em} .regua{height:1px;background:var(--linha);border:0;margin:0} /* ---------- botões ---------- */ .btn{ display:inline-flex; align-items:center; gap:.85em; font-family:var(--sans); font-size:.8125rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; line-height:1; padding:1.22em 1.8em; border:1px solid var(--texto); background:transparent; color:var(--texto); cursor:pointer; position:relative; overflow:hidden; isolation:isolate; transition:color .55s var(--suave),border-color .55s var(--suave); } .btn::before{ content:""; position:absolute;inset:0;z-index:-1; background:var(--texto); transform:translateY(101%); transition:transform .58s var(--mola); } .btn:hover::before,.btn:focus-visible::before{transform:translateY(0)} .btn:hover,.btn:focus-visible{color:var(--fundo)} .btn--cheio{background:var(--texto);color:var(--fundo);border-color:var(--texto)} .btn--cheio::before{background:var(--fundo)} .btn--cheio:hover,.btn--cheio:focus-visible{color:var(--texto)} .btn--fantasma{border-color:var(--linha-forte)} .btn--fantasma:hover,.btn--fantasma:focus-visible{border-color:var(--texto)} .btn .seta{ width:1.05em;height:1.05em; flex:none; transition:transform .5s var(--mola); } .btn:hover .seta,.btn:focus-visible .seta{transform:translateX(.32em)} /* elo com sublinhado que cresce */ .elo{ display:inline-block; position:relative; padding-bottom:.14em; color:var(--texto); } .elo::after{ content:""; position:absolute; left:0;bottom:0; width:100%;height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .55s var(--mola); } .elo:hover::after,.elo:focus-visible::after{transform:scaleX(1)} .elo--fixo::after{transform:scaleX(1)} .elo--fixo:hover::after,.elo--fixo:focus-visible::after{transform:scaleX(0);transform-origin:right} /* ---------- marca ---------- */ .marca{display:block;color:currentColor} .marca svg{width:auto;height:100%;display:block} /* ---------- cabeçalho ---------- */ .cabecalho{ position:fixed; inset:0 0 auto; z-index:60; height:var(--alt-cab); display:flex; align-items:center; color:var(--papel); transition:color .55s var(--suave),border-color .55s var(--suave); border-bottom:1px solid transparent; } .cabecalho::before{ content:""; position:absolute;inset:0; background:var(--tinta); opacity:0; transition:opacity .55s var(--suave),background-color .55s var(--suave); } .cabecalho.fixo::before{opacity:.97;backdrop-filter:saturate(140%) blur(9px)} .cabecalho.fixo{border-bottom-color:rgba(242,240,236,.13)} .cabecalho.claro{color:var(--tinta)} .cabecalho.fixo.claro{border-bottom-color:rgba(13,13,13,.11)} .cabecalho.claro::before{background:var(--papel)} /* progresso da leitura — um filete que cresce na base do cabeçalho */ .cabecalho__progresso{ position:absolute; left:0;bottom:-1px; width:100%;height:1px; background:currentColor; opacity:0; transform:scaleX(var(--prog,0)); transform-origin:left; transition:opacity .5s var(--suave); } .cabecalho.fixo .cabecalho__progresso{opacity:.5} .cabecalho__grade{ position:relative; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); display:flex; align-items:center; justify-content:space-between; gap:2rem; } .cabecalho__identidade{ display:flex; align-items:center; gap:clamp(.75rem,1.5vw,1.1rem); min-width:0; } .cabecalho .marca{height:clamp(29px,2.8vw,37px);flex:none} .cabecalho .marca svg{transition:transform .6s var(--mola)} .cabecalho__identidade:hover .marca svg{transform:translateY(-2px)} .cabecalho__nome{ display:flex; flex-direction:column; gap:.34rem; line-height:1; min-width:0; } .cabecalho__nome b{ font-family:var(--serif); font-weight:500; font-size:clamp(.97rem,1.35vw,1.2rem); letter-spacing:.058em; text-transform:uppercase; white-space:nowrap; } .cabecalho__nome i{ font-family:var(--sans); font-style:normal; font-size:.5625rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; opacity:.66; white-space:nowrap; } .nav{display:flex;align-items:center;gap:clamp(1.3rem,2.5vw,2.5rem)} .nav a{ font-size:.8125rem; font-weight:400; letter-spacing:.055em; position:relative; padding-block:.45em; white-space:nowrap; } .nav a::after{ content:""; position:absolute;left:0;bottom:.1em; width:100%;height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--mola); } .nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)} .nav a[aria-current="page"]::after{transform:scaleX(1);opacity:.42} .cabecalho__dir{display:flex;align-items:center;gap:clamp(1rem,2vw,1.6rem)} .cabecalho__risco{ width:1px;height:1.5rem; background:currentColor; opacity:.24; flex:none; } .cabecalho__cta{ display:inline-flex;align-items:center;gap:.7em; font-size:.75rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase; padding:1em 1.4em; border:1px solid currentColor; position:relative; overflow:hidden; isolation:isolate; white-space:nowrap; transition:color .5s var(--suave); } .cabecalho__cta::before{ content:""; position:absolute;inset:0;z-index:-1; background:currentColor; transform:translateY(101%); transition:transform .55s var(--mola); } .cabecalho__cta:hover::before,.cabecalho__cta:focus-visible::before{transform:translateY(0)} .cabecalho__cta:hover,.cabecalho__cta:focus-visible{color:var(--tinta)} .cabecalho.claro .cabecalho__cta:hover, .cabecalho.claro .cabecalho__cta:focus-visible{color:var(--papel)} .cabecalho__cta .seta{width:.95em;height:.95em;flex:none;transition:transform .5s var(--mola)} .cabecalho__cta:hover .seta{transform:translateX(.3em)} /* botão do menu (mobile) */ .hamburguer{ display:none; width:44px;height:44px; margin-right:-11px; border:0;background:transparent;color:inherit; cursor:pointer; align-items:center;justify-content:center; position:relative;z-index:2; } .hamburguer i{ display:block;position:absolute; left:10px;width:24px;height:1px; background:currentColor; transition:transform .5s var(--mola); } .hamburguer i:nth-child(1){transform:translateY(-4px)} .hamburguer i:nth-child(2){transform:translateY(4px)} [data-menu="aberto"] .hamburguer i:nth-child(1){transform:rotate(45deg)} [data-menu="aberto"] .hamburguer i:nth-child(2){transform:rotate(-45deg)} /* ---------- menu inteiro (mobile) ---------- */ .menu{ position:fixed;inset:0;z-index:55; background:var(--tinta); background-image: radial-gradient(110% 70% at 84% 4%,rgba(242,240,236,.08),rgba(242,240,236,0) 60%), var(--grao); background-repeat:no-repeat,repeat; background-size:100% 100%,180px 180px; color:var(--papel); display:flex;flex-direction:column; justify-content:center; padding:calc(var(--alt-cab) + 1.6rem) var(--pad) 2.2rem; clip-path:inset(0 0 100% 0); transition:clip-path .82s var(--mola),visibility .82s; visibility:hidden; overflow-y:auto; } [data-menu="aberto"] .menu{clip-path:inset(0 0 0 0);visibility:visible} .menu__nav{display:flex;flex-direction:column;gap:0} .menu__nav a{ font-family:var(--serif); font-size:clamp(1.85rem,9vw,2.8rem); line-height:1.2; letter-spacing:-.018em; display:flex;align-items:baseline;gap:.9rem; padding-block:.3em; border-bottom:1px solid rgba(242,240,236,.13); opacity:0;transform:translateY(18px); transition:opacity .6s var(--suave),transform .7s var(--mola),color .4s var(--suave); } .menu__nav a:first-child{border-top:1px solid rgba(242,240,236,.13)} .menu__nav a .n{ font-family:var(--sans); font-size:.625rem;font-weight:500;letter-spacing:.2em; color:rgba(242,240,236,.45); flex:none; } .menu__nav a .seta{ width:.62em;height:.62em; margin-left:auto; align-self:center; opacity:0; transform:translateX(-.4em); transition:opacity .45s var(--suave),transform .5s var(--mola); } .menu__nav a:hover .seta,.menu__nav a:focus-visible .seta{opacity:.7;transform:none} [data-menu="aberto"] .menu__nav a{opacity:1;transform:none} [data-menu="aberto"] .menu__nav a:nth-child(1){transition-delay:.20s} [data-menu="aberto"] .menu__nav a:nth-child(2){transition-delay:.26s} [data-menu="aberto"] .menu__nav a:nth-child(3){transition-delay:.32s} [data-menu="aberto"] .menu__nav a:nth-child(4){transition-delay:.38s} [data-menu="aberto"] .menu__nav a:nth-child(5){transition-delay:.44s} .menu__pe{ margin-top:auto;padding-top:2.4rem; display:flex;flex-direction:column;gap:1.2rem; opacity:0;transform:translateY(14px); transition:opacity .6s var(--suave) .48s,transform .7s var(--mola) .48s; } [data-menu="aberto"] .menu__pe{opacity:1;transform:none} .menu__pe .btn{width:100%;justify-content:center;--texto:var(--papel);--fundo:var(--tinta)} .menu__pe .micro{color:rgba(242,240,236,.55)} /* ---------- whatsapp flutuante ---------- */ .zap-flutua{ position:fixed; right:clamp(1rem,2.4vw,1.9rem); bottom:clamp(1rem,2.4vw,1.9rem); z-index:50; width:54px;height:54px; display:grid;place-items:center; border-radius:50%; background:var(--zap); color:#04170B; box-shadow:0 8px 26px rgba(0,0,0,.28); opacity:0;transform:translateY(14px) scale(.92); pointer-events:none; transition:opacity .6s var(--suave),transform .6s var(--mola); } .zap-flutua.visivel{opacity:1;transform:none;pointer-events:auto} .zap-flutua svg{width:26px;height:26px} .zap-flutua.visivel:hover,.zap-flutua.visivel:focus-visible{transform:scale(1.07)} [data-menu="aberto"] .zap-flutua{opacity:0;pointer-events:none} /* ---------- rodapé ---------- */ .rodape{ background-color:var(--tinta); background-image: radial-gradient(100% 120% at 88% 0%,rgba(242,240,236,.07),rgba(242,240,236,0) 62%), var(--grao); background-repeat:no-repeat,repeat; background-size:100% 100%,180px 180px; color:var(--papel); --texto:var(--papel); --texto-2:rgba(242,240,236,.62); --linha:rgba(242,240,236,.16); --linha-forte:rgba(242,240,236,.34); padding-block:clamp(3.6rem,7.5vw,6rem) 2.4rem; position:relative; } .rodape__chamada{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1.6rem 2.5rem; padding-bottom:clamp(2.6rem,5.5vw,4rem); border-bottom:1px solid var(--linha); margin-bottom:clamp(2.8rem,5.5vw,4.2rem); } .rodape__chamada p{ font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.14; letter-spacing:-.02em; max-width:22ch; } .rodape__chamada em{font-style:italic} .rodape__topo{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.78fr) minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,4vw,3.4rem); align-items:start; } .rodape .marca{height:52px;margin-bottom:1.8rem} .rodape__nome{ font-family:var(--serif); font-size:1.32rem;line-height:1.36; letter-spacing:-.011em; } .rodape__nome span{ display:block; font-family:var(--sans); font-size:var(--t-micro); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-2); margin-top:.8rem; } .rodape__onde{ margin-top:1.5rem; font-size:.875rem; line-height:1.72; color:var(--texto-2); max-width:30ch; } .rodape__col h2{ font-family:var(--sans); font-size:var(--t-micro); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-2); margin-bottom:1.4rem; line-height:1.5; padding-bottom:.9rem; border-bottom:1px solid var(--linha); } .rodape__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem} .rodape__lista a{font-size:.9375rem} .rodape__contato{font-size:.9375rem;line-height:1.8;color:var(--texto-2);font-style:normal} .rodape__contato strong{color:var(--texto);font-weight:500} .rodape__contato p + p{margin-top:1rem} .rodape__base{ margin-top:clamp(2.8rem,6vw,4.4rem); padding-top:1.8rem; border-top:1px solid var(--linha); display:flex;flex-wrap:wrap;gap:1rem 2rem; justify-content:space-between;align-items:center; } .rodape__base p{font-size:.75rem;letter-spacing:.04em;color:var(--texto-2)} .social{display:flex;gap:.55rem;align-items:center} .social a{ width:40px;height:40px; display:grid;place-items:center; border:1px solid var(--linha); transition:border-color .5s var(--suave),background-color .5s var(--suave), color .5s var(--suave),transform .5s var(--mola); } .social a:hover,.social a:focus-visible{ border-color:var(--papel);background:var(--papel);color:var(--tinta); transform:translateY(-2px); } .social a.zap{color:var(--zap)} .social a.zap:hover,.social a.zap:focus-visible{background:var(--zap);border-color:var(--zap);color:#04170B} .social svg{width:18px;height:18px} /* ---------- revelações ---------- */ [data-revela] .sobe{ opacity:0; transform:translateY(24px); transition:opacity .95s var(--suave),transform 1.05s var(--mola); transition-delay:var(--d,0s); } [data-revela].dentro .sobe{opacity:1;transform:none} [data-revela] .cresce{ transform:scaleX(0); transform-origin:left; transition:transform 1.15s var(--mola); transition-delay:var(--d,0s); } [data-revela].dentro .cresce{transform:scaleX(1)} /* o bloco sobe de trás de uma máscara — o gesto editorial clássico. O padding/margin compensados evitam que a máscara corte descendentes. */ [data-revela] .surge{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; } [data-revela] .surge > *{ display:block; transform:translateY(104%); transition:transform 1.15s var(--mola); transition-delay:var(--d,0s); } [data-revela].dentro .surge > *{transform:none} /* rótulos micro assentando o entreletras */ [data-revela] .letras{ opacity:0; letter-spacing:.44em; transition:opacity .85s var(--suave),letter-spacing 1.35s var(--mola); transition-delay:var(--d,0s); } [data-revela].dentro .letras{opacity:1;letter-spacing:.2em} /* Duas regras que precisam andar juntas: 1. o corte vai sempre no FILHO — clip-path no elemento observado zera o intersectionRatio e a revelação nunca dispara; 2. o seletor é filho direto (`>`) e a moldura recorta. Sem isso o scale cai em `picture` E em `img`, compondo 1,055² = 1,11, e o transform estoura a viewport (getBoundingClientRect conta transform). */ [data-revela] .abre{overflow:hidden} [data-revela] .abre > picture, [data-revela] .abre > img{ clip-path:inset(0 0 100% 0); transform:scale(1.055); transition:clip-path 1.35s var(--mola),transform 1.9s var(--suave); transition-delay:var(--d,0s); } [data-revela].dentro .abre > picture, [data-revela].dentro .abre > img{ clip-path:inset(0 0 0 0); transform:none; } /* paralaxe discreta: o transform fica no img, e a revelação no picture — elementos diferentes, então não disputam a mesma propriedade */ .paralaxe{overflow:hidden} .paralaxe img{ transform:translate3d(0,var(--py,0px),0); will-change:transform; } /* Sem JS nada pode ficar invisível: a classe .dentro nunca chegaria. */ html:not(.js) [data-revela] .sobe{opacity:1;transform:none} html:not(.js) [data-revela] .cresce{transform:scaleX(1)} html:not(.js) [data-revela] .surge > *{transform:none} html:not(.js) [data-revela] .letras{opacity:1;letter-spacing:.2em} html:not(.js) [data-revela] .abre > picture, html:not(.js) [data-revela] .abre > img{clip-path:none;transform:none} /* ---------- entrada do hero (encadeada depois da abertura) ---------- */ .entra{ opacity:0; transform:translateY(26px); transition:opacity 1.05s var(--suave),transform 1.15s var(--mola); transition-delay:var(--d,0s); } html.aberto .entra, html:not(.js) .entra{opacity:1;transform:none} .abre-baixo > picture, .abre-baixo > img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.5s var(--mola); transition-delay:var(--d,0s); } html.aberto .abre-baixo > picture, html.aberto .abre-baixo > img, html:not(.js) .abre-baixo > picture, html:not(.js) .abre-baixo > img{clip-path:inset(0 0 0 0)} /* ---------- abertura (a logo se desenhando) ---------- */ /* Não usar [hidden] aqui: `[hidden]{display:none!important}` venceria o display da abertura e ela nunca apareceria. A classe .js entra por script no , antes do primeiro paint, então não há piscada de conteúdo. */ html:not(.js) .abertura{display:none} .abertura{ position:fixed;inset:0;z-index:200; display:grid;place-items:center; background-color:var(--tinta); background-image: radial-gradient(90% 70% at 50% 42%,rgba(242,240,236,.075),rgba(242,240,236,0) 62%), var(--grao); background-repeat:no-repeat,repeat; background-size:100% 100%,180px 180px; transition:opacity .85s var(--suave),visibility .85s; } .abertura__marca{ width:clamp(112px,17vw,190px); color:var(--papel); opacity:0; animation:ab-entra .7s var(--suave) .16s forwards; } .abertura__marca path{ stroke-dasharray:100; stroke-dashoffset:100; animation:ab-desenha var(--dur,.9s) var(--suave) var(--del,0s) forwards; } .abertura__marca path:nth-child(1){--dur:1.05s;--del:.28s} .abertura__marca path:nth-child(2){--dur:.95s;--del:.92s} .abertura__marca path:nth-child(3){--dur:.5s;--del:1.62s} .abertura__marca path:nth-child(4){--dur:.5s;--del:1.70s} .abertura__rotulo{ position:absolute; left:0;right:0; bottom:clamp(2rem,7vh,4.4rem); text-align:center; color:rgba(242,240,236,.42); opacity:0; animation:ab-entra .9s var(--suave) 1.55s forwards; } @keyframes ab-desenha{to{stroke-dashoffset:0}} @keyframes ab-entra{to{opacity:1}} html.aberto .abertura{opacity:0;visibility:hidden} html.abertura-fim .abertura{display:none} /* o conteúdo entra por baixo da abertura */ html.js.antes-abrir .cabecalho, html.js.antes-abrir main{opacity:0} html.js.aberto .cabecalho, html.js.aberto main{opacity:1;transition:opacity .8s var(--suave)} /* ---------- responsivo ---------- */ @media (max-width:1100px){ .rodape__topo{grid-template-columns:1fr 1fr;gap:2.6rem} .rodape__marca{grid-column:1 / -1} } @media (max-width:900px){ .secao--enquadrada > .wrap{border-inline:0} } @media (max-width:860px){ .nav,.cabecalho__cta{display:none} .cabecalho__dir .cabecalho__risco{display:none} .hamburguer{display:flex} /* no toque, 44px é o mínimo confortável */ .social a{width:44px;height:44px} .social svg{width:20px;height:20px} } @media (max-width:520px){ .cabecalho__nome i{display:none} .cabecalho__nome b{font-size:.9rem;letter-spacing:.05em} } @media (max-width:640px){ :root{--t-corpo:1rem} .rodape__topo{grid-template-columns:1fr;gap:2.4rem} .rodape__base{flex-direction:column;align-items:flex-start;gap:1.4rem} .secao__topo{flex-direction:column;align-items:flex-start;gap:.55rem} .fantasma{font-size:clamp(6.5rem,32vw,11rem)} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } [data-revela] .sobe{opacity:1;transform:none} [data-revela] .cresce{transform:scaleX(1)} [data-revela] .surge > *{transform:none} [data-revela] .letras{opacity:1;letter-spacing:.2em} [data-revela] .abre > picture, [data-revela] .abre > img{clip-path:none;transform:none} .entra{opacity:1;transform:none} .abre-baixo > picture, .abre-baixo > img{clip-path:none} .paralaxe img{transform:none} .hero__rolar i{animation:none;transform:scaleY(1)} } @media print{ .cabecalho,.menu,.zap-flutua,.abertura{display:none!important} body{background:#fff;color:#000} .secao,.rodape{background-image:none} }