logo a seguir ao . ========================================================================== */ :root{--demo-h:0px;--demo-top:0px} .demo-bar{ position:relative;z-index:110; background:var(--tinta-fundo); color:var(--creme); font-family:var(--sans); padding:.7rem clamp(1.25rem,5vw,4rem); border-bottom:1px solid var(--linha); } .demo-bar-in{ max-width:var(--container);margin:0 auto; display:flex;align-items:center;gap:.9rem 1.4rem;flex-wrap:wrap; } .demo-tag{ flex:none;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--creme);background:var(--vermelho);padding:.3rem .6rem;border-radius:4px; } .demo-txt{flex:1 1 22rem;min-width:0;font-size:.9rem;line-height:1.5;margin:0;color:var(--creme-70)} .demo-txt b{color:var(--creme);font-weight:700} .demo-txt a{color:var(--creme);font-weight:700;text-decoration:none;border-bottom:1px solid var(--linha-forte)} @media (hover:hover) and (pointer:fine){ .demo-txt a:hover{border-color:var(--creme)} } .demo-cta{ flex:none;margin-left:auto; display:inline-flex;align-items:center;gap:.45rem; background:var(--vermelho);color:var(--creme); font-weight:700;font-size:.875rem;line-height:1; padding:.7rem 1.125rem;border-radius:var(--radio); text-decoration:none;white-space:nowrap; transition:background-color .18s ease; } @media (hover:hover) and (pointer:fine){ .demo-cta:hover{background:var(--vermelho-esc)} } @media (hover:none){ .demo-cta{min-height:44px} } /* o .nav do site e' position:fixed;top:0 — a barra, por estar no fluxo normal antes dele, so' abre espaco visual se o .nav for empurrado para baixo dela. --demo-top comeca igual a altura da barra e desce ate 0 a medida que se faz scroll por esse espaco (ver demo-bar.js). */ body.tem-demo-bar .nav{top:var(--demo-top)} @media (max-width:60rem){ /* .nav__painel (menu mobile aberto) assume que o .nav comeca em top:0 (inset:var(--nav-h) 0 auto 0) — com a barra, tem de somar --demo-top. */ body.tem-demo-bar .nav__painel{top:calc(var(--nav-h) + var(--demo-top))} } @media (max-height:520px) and (orientation:landscape){ body.tem-demo-bar .nav{top:var(--demo-h)} } @media(max-width:38rem){ /* empilhado em coluna: evita qualquer risco de overflow horizontal por causa de largura de texto (a barra fica sempre dentro do ecra, mesmo sem medir pixel a pixel cada string) */ .demo-bar{padding-top:.85rem;padding-bottom:.85rem} .demo-bar-in{flex-direction:column;align-items:stretch;gap:.6rem} .demo-tag{align-self:flex-start} .demo-txt{flex:none;font-size:.84rem} .demo-cta{margin-left:0;justify-content:center;font-size:.84rem;padding:.7rem .9rem} }