/* ============================================================================ cine-ui.css — Sistema visual do Cine Alameda (layout inspirado no CineLaser, cores e tipografia do brand book Estação das Artes). REGRA: nenhuma cor fixa aqui. Tudo sai dos tokens de includes/tema.php, para o painel Aparência continuar mandando e os modos claro/escuro funcionarem. Prefixo .cx- para não colidir com o CSS legado das páginas. ========================================================================= */ /* ─── Compatibilidade Safari ──────────────────────────────────────────── Safari antigo (< 15) não entende `aspect-ratio`: sem isto os pôsteres colapsam para altura zero e a página "quebra". O truque do padding-top reserva a proporção e só é aplicado quando aspect-ratio NÃO existe. Também evitamos `inset` (Safari < 14.1) usando top/right/bottom/left. */ @supports not (aspect-ratio: 2 / 3) { .cx-card__poster, .cx-film__poster { height:0; padding-top:150%; } /* 2:3 */ .cx-card__img { height:0; padding-top:56.25%; } /* 16:9 */ .cx-card__poster > img, .cx-card__poster > span, .cx-film__poster > img, .cx-film__poster > span, .cx-card__img > img, .cx-card__img > span { position:absolute; top:0; left:0; width:100%; height:100%; } } /* Altura ocupada pelo menu flutuante (afastamento do topo + altura + borda). Usada para puxar a vitrine para trás dele. */ :root { --cx-header-h:78px; --cx-header-h-mob:66px; } /* Menu aberto: a página congela onde está e só o painel rola. NÃO usar `position:fixed` no body aqui. Já foi assim e quebrava: o cabeçalho é `position:sticky` e, dentro de um body fixo, perde a referência de rolagem — o painel ia parar no topo do documento, fora da tela, e tudo parecia travado. `overflow:hidden` segura no desktop e no Android. No iOS ele não basta sozinho: quem realmente impede o arrasto é `touch-action:none`, e por isso o painel precisa reabilitar `pan-y` para continuar rolando por dentro. */ /* Trava da página com o menu aberto. Duas armadilhas já custaram caro aqui: 1) `position:fixed` no body e `overflow:hidden` no html — os dois tiram do o papel de caixa de rolagem, e sem ela o `position:sticky` do cabeçalho deixa de valer: a faixa volta ao topo do documento e leva o painel junto. NÃO usar nenhum dos dois. 2) `touch-action` NÃO é herdado. Pô-lo no body só bloqueia o toque que começa no próprio body — arrastar a partir de um card continuava rolando a página. Por isso quem trava é o VÉU: ele cobre a viewport inteira, então todo toque fora do menu cai nele, e nele o arrasto está desligado. O cabeçalho e o painel ficam acima do véu (z-index maior) e seguem funcionando. */ html.cx-menu-aberto { overscroll-behavior:none; } html.cx-menu-aberto .cx-nav { touch-action:pan-y; overscroll-behavior:contain; /* o arrasto não vaza para a página atrás */ } /* ─────────────────────────── Base de página ─────────────────────────── */ /* box-sizing:border-box é OBRIGATÓRIO aqui. O projeto não tem o reset global `*{box-sizing:border-box}`, então no padrão do CSS (content-box) o padding SOMA à largura: `width:100%` + `padding:0 24px` dava 100% + 48px e a página ficava mais larga que a tela em todo tamanho de janela. Ninguém via barra de rolagem porque o header aplica `html{overflow-x:clip}`, que esconde o sintoma — mas o conteúdo era cortado à direita e a margem daquele lado desaparecia. Medido: 798px de conteúdo numa tela de 750px. Mesma coisa vale para os containers institucionais logo abaixo. */ .cx-wrap { box-sizing:border-box; width:100%; max-width:1360px; margin:0 auto; padding:0 24px; } /* Páginas institucionais: mesma margem lateral do resto do site em cada tela. Os containers antigos tinham padding fixo de 20px e ficavam apertados no celular — aqui eles passam a acompanhar o padrão. */ .container-institucional, .container-sobre, .container-atendimento, .container-projetos, .ev-wrap { box-sizing:border-box; /* mesmo motivo do .cx-wrap acima */ width:100%; margin:40px auto; padding:0 24px; min-height:60vh; } .container-institucional, .container-atendimento { max-width:1000px; } .container-sobre, .container-projetos, .ev-wrap { max-width:1200px; } @media (max-width:900px){ .container-institucional, .container-sobre, .container-atendimento, .container-projetos, .ev-wrap { margin:30px auto; padding:0 16px; } } @media (max-width:640px){ .container-institucional, .container-sobre, .container-atendimento, .container-projetos, .ev-wrap { margin:22px auto; padding:0 14px; } } .cx-section { padding:48px 0; } .cx-section--tight { padding:36px 0; } /* Cabeçalho de seção: "#HOJENOSCINEMAS" + "FILMES EM CARTAZ" */ .cx-kicker { display:block; font-family:var(--fonte-titulo); font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-3); margin:0 0 6px; } .cx-title { font-family:var(--fonte-titulo); font-weight:700; text-transform:uppercase; font-size:clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem); line-height:1.04; /* --titulo, não --texto: a identidade dá aos títulos o navy institucional enquanto o corpo do texto fica em chumbo. São dois papéis distintos. */ letter-spacing:.01em; margin:0; color:var(--titulo); } .cx-title em { font-style:normal; color:var(--destaque-texto); } /* 2ª palavra colorida */ .cx-head { margin-bottom:26px; } .cx-head--center { text-align:center; } .cx-head--center .cx-kicker { color:var(--texto-3); } /* ─────────────────────────── Botões ─────────────────────────── */ .cx-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 22px; border:none; border-radius:var(--raio-total); font-family:var(--fonte-texto); font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform var(--transicao), filter var(--transicao), background-color var(--transicao); } .cx-btn:hover { transform:translateY(-1px); filter:brightness(1.06); } .cx-btn:active { transform:translateY(0); } .cx-btn--primaria { background:var(--primaria); color:var(--primaria-txt); } .cx-btn--destaque { background:var(--destaque-botao); color:var(--destaque-botao-txt); } .cx-btn--claro { background:var(--superficie); color:var(--texto); border:1px solid var(--borda); } .cx-btn--linha { background:transparent; color:var(--texto); border:1.5px solid var(--borda-forte); } .cx-btn--linha:hover { border-color:var(--primaria); color:var(--primaria-texto); } .cx-btn--sm { height:36px; padding:0 16px; font-size:13px; } .cx-btn__txt { display:inline; } /* ─────────────────────────── Cabeçalho do site ─────────────────────────── */ /* Menu FLUTUANTE: cartão arredondado que "solta" da borda da página e acompanha a rolagem. Cor própria (--menu-fundo), independente do tema. */ .cx-header { position:sticky; top:var(--faixa-mt); z-index:900; /* Mesma margem e mesmo raio da vitrine (ver --faixa-* acima) */ margin:var(--faixa-mt) var(--faixa-mx) 0; width:auto; /* Vidro. O fundo sólido anulava o backdrop-filter que já existia aqui — sem alfa não há o que desfocar atrás. A saturação alta evita que o desfoque lave a cor por trás. Usa --vidro-alfa-MENU, não o alfa geral: com os mesmos 38% das demais superfícies, o marinho da marca composto sobre a página clara resultava em #9599BA — um lavanda em que a cor escolhida no painel não se reconhecia, e sobre o qual o texto do menu media 1.16:1. O menu tem controle próprio na Aparência justamente por ser o único vidro que precisa preservar a identidade da cor. */ background:rgba(var(--menu-fundo-rgb, 10,15,92), var(--vidro-alfa-menu, .82)); color:var(--menu-texto); border:1px solid var(--menu-borda); border-radius:var(--faixa-raio); box-shadow:var(--sombra-2); backdrop-filter:var(--vidro-menu-blur, blur(22px) saturate(180%)); -webkit-backdrop-filter:var(--vidro-menu-blur, blur(22px) saturate(180%)); transition:background var(--transicao); } /* Ao rolar, fecha um pouco mais para o conteúdo não competir com o menu. */ .cx-header.is-scrolled { /* Ao rolar fecha mais: soma 0.17 ao valor configurado, limitado a 1 — assim o ajuste do painel move os dois estados juntos, mantendo a diferença entre eles. */ background:rgba(var(--menu-fundo-rgb, 10,15,92), calc(var(--vidro-alfa-menu, .82) + .12)); /* Segue o desfoque do painel, so que um grau acima do repouso. Antes era blur(26px) saturate(200%) fixo: baixar o desfoque na Aparencia nao tinha efeito nenhum depois que a pagina rolava dois dedos. */ backdrop-filter:var(--vidro-blur-forte, blur(26px) saturate(200%)); -webkit-backdrop-filter:var(--vidro-blur-forte, blur(26px) saturate(200%)); } /* Sem suporte a backdrop-filter, volta ao fundo sólido: melhor opaco que um menu semitransparente com o texto da página aparecendo por baixo. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .cx-header, .cx-header.is-scrolled { background:var(--menu-fundo); } } .cx-header__inner { display:flex; align-items:center; gap:22px; min-height:68px; padding:8px 22px; max-width:none; margin:0; } /* Dentro do menu tudo lê a cor do próprio menu, não a da página */ .cx-header .cx-nav__link { color:var(--menu-texto); } .cx-header .cx-nav__link:hover { color:var(--menu-destaque); } .cx-header .cx-nav__link.is-active { color:var(--menu-destaque); } .cx-header .cx-select select { background:transparent; color:var(--menu-texto); border-color:var(--menu-borda); } .cx-header .cx-select select option { background:var(--menu-fundo); color:var(--menu-texto); } .cx-header .cx-select::after { border-top-color:var(--menu-texto-2); } .cx-header .cx-burger { color:var(--menu-texto); border-color:var(--menu-borda); } .cx-header .cx-nav { border-top-color:var(--menu-borda); } .cx-header .cx-nav__drop { background:var(--menu-fundo); border-color:var(--menu-borda); } .cx-header .cx-nav__drop a { color:var(--menu-texto); } .cx-header .cx-brand__txt { color:var(--menu-texto); } /* A logo ganha uma área própria e fica centralizada dentro dela — assim não cola na borda do menu nem "encosta" na navegação. */ .cx-brand { display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none; min-width:330px; padding:0 20px; } .cx-brand img { height:var(--logo-altura,48px); width:auto; max-width:100%; object-fit:contain; display:block; } .cx-brand__txt { font-family:var(--fonte-titulo); font-weight:700; font-size:21px; text-transform:uppercase; color:var(--primaria-texto); letter-spacing:.02em; } /* Navegação central — espaçamento e peso iguais aos da referência */ .cx-nav { display:flex; align-items:center; gap:10px; margin:0 auto; } .cx-nav__link { position:relative; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--raio-p); font-size:15px; font-weight:700; color:var(--texto); text-decoration:none; transition:color var(--transicao); white-space:nowrap; } .cx-nav__link:hover { color:var(--menu-destaque); } /* Item ativo: ponto colorido + texto colorido (como na referência) */ .cx-nav__link.is-active { color:var(--menu-destaque); } .cx-nav__link.is-active::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--destaque); flex-shrink:0; } /* Submenu */ .cx-nav__item { position:relative; } /* Grupos cadastrados no painel aparecem também no desktop como submenu. */ .cx-nav__mais { display:block; } .cx-nav__drop { position:absolute; top:calc(100% + 6px); left:0; min-width:230px; background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio-m); box-shadow:var(--sombra-2); padding:6px; list-style:none; margin:0; opacity:0; visibility:hidden; transform:translateY(8px); transition:all var(--transicao); z-index:20; } .cx-nav__item:hover .cx-nav__drop, .cx-nav__item:focus-within .cx-nav__drop { opacity:1; visibility:visible; transform:translateY(0); } .cx-nav__drop a { display:block; padding:10px 14px; border-radius:var(--raio-p); font-size:14px; font-weight:500; color:var(--texto); text-decoration:none; } .cx-nav__drop a:hover { background:rgba(var(--primaria-rgb, 0,181,200),.10); color:var(--primaria-texto); } /* Extras dentro do menu: Clube + alternar claro/escuro. No desktop ficam no fim da barra de navegação; no celular, dentro do menu aberto pelo hambúrguer. */ .cx-nav__extras { display:flex; align-items:center; gap:12px; margin-left:8px; padding-left:14px; border-left:1px solid var(--menu-borda); } /* Ações à direita */ .cx-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; } .cx-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--raio-total); border:1px solid var(--borda); background:transparent; color:var(--texto-2); font-size:15px; cursor:pointer; transition:all var(--transicao); } .cx-icon-btn:hover { color:var(--primaria-texto); border-color:var(--primaria); background:rgba(var(--primaria-rgb, 0,181,200),.10); } /* Alternador de tema no cabeçalho: ícone limpo, sem moldura (igual à referência) */ .cx-header .cine-tema-btn { width:auto; height:auto; padding:6px 4px; margin:0; border:none !important; background:none !important; /* --menu-ouro, não --marca-mostarda: o botão fica sobre a faixa do menu, e o ouro puro sobre uma faixa clara mede ~1.9:1. O fallback antigo apontava para --mostarda, que nunca existiu em lugar nenhum. */ color:var(--menu-ouro,var(--marca-mostarda)); font-size:20px; line-height:1; cursor:pointer; } .cx-header .cine-tema-btn:hover { filter:brightness(1.15); transform:none; } /* Botões "Login" (claro) e "Clube" (destaque) */ .cx-login { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 22px; border-radius:var(--raio-p); background:var(--superficie-inv); color:var(--texto-inv); font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap; border:1px solid transparent; transition:filter var(--transicao), transform var(--transicao); } .cx-login:hover { filter:brightness(.94); transform:translateY(-1px); } .cx-clube { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:76px; height:40px; padding:0 14px; border-radius:var(--raio-p); background:var(--destaque-botao); color:var(--destaque-botao-txt); text-decoration:none; font-family:var(--fonte-titulo); font-weight:700; line-height:1; transition:filter var(--transicao), transform var(--transicao); } .cx-clube:hover { filter:brightness(1.08); transform:translateY(-1px); } .cx-clube__t { font-size:17px; letter-spacing:.02em; text-transform:uppercase; } .cx-clube__s { font-size:8px; letter-spacing:.08em; text-transform:uppercase; opacity:.92; margin-top:2px; } /* Select da unidade (arredondado, seta desenhada — nunca background-image) */ .cx-select { position:relative; min-width:190px; } .cx-select select { width:100%; height:42px; padding:0 38px 0 16px; border:1px solid var(--borda-forte); border-radius:var(--raio-m); background:var(--superficie); color:var(--texto); font-family:var(--fonte-texto); font-size:14px; font-weight:600; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; text-overflow:ellipsis; } .cx-select select:focus { outline:none; border-color:var(--primaria); box-shadow:0 0 0 3px rgba(var(--primaria-rgb, 0,181,200),.18); } .cx-select::after { content:""; position:absolute; right:16px; top:50%; margin-top:-2px; width:0; height:0; pointer-events:none; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--texto-2); } .cx-select option { background:var(--superficie); color:var(--texto); } /* Botão do menu (mobile) */ .cx-burger { display:none; width:42px; height:42px; border-radius:var(--raio-m); border:1px solid var(--borda); background:transparent; color:var(--texto); font-size:19px; cursor:pointer; } /* ══════════════ DESTAQUES — vitrine estilo streaming ══════════════ DESKTOP: imagem preenchendo, degradê da esquerda/base e as informações sobrepostas à esquerda. CELULAR: imagem vertical e as informações centralizadas embaixo. O texto usa --sobre-midia (sempre claro) porque fica sobre o degradê escuro nos dois modos. */ /* Ocupa quase toda a largura do site (sem max-width), com margem lateral 3x a vertical. O cabeçalho flutua POR CIMA dela: a margem negativa puxa a vitrine para trás do menu, e o padding devolve o espaço para o conteúdo não subir. */ /* ── Faixa: cabeçalho e vitrine usam a MESMA margem e o MESMO raio ────────── Antes cada um tinha o seu valor, repetido em três breakpoints diferentes (900px, 960px, 640px), e eles foram divergindo: em telas médias o header ficava com 12px e a vitrine com 16px, e no celular a vitrine ia de ponta a ponta sem cantos. Com as variáveis, mudar aqui move os dois juntos. */ :root { --faixa-mx:24px; --faixa-mt:8px; --faixa-raio:26px; } @media (max-width:960px){ :root { --faixa-mx:12px; --faixa-mt:6px; --faixa-raio:18px; } } .cx-destaques { position:relative; margin:var(--faixa-mt) var(--faixa-mx) 0; width:auto; border-radius:var(--faixa-raio); overflow:hidden; background:var(--superficie-2); min-height:clamp(460px, 46vw, 660px); } /* A vitrine NÃO passa mais por trás do cabeçalho: fica logo abaixo dele, com o mesmo respiro que a faixa usa em volta (--faixa-mt). Antes havia uma margem negativa da altura do cabeçalho para ele flutuar sobre a arte. A classe continua no HTML só para não mexer em quem a referencia. */ .cx-destaques--sobheader { margin-top:var(--faixa-mt); } /* Slides: só o ativo existe no layout — assim nunca empilham um sob o outro */ .cx-dest { display:none; } .cx-dest.is-active { display:flex; align-items:flex-end; position:absolute; top:0; right:0; bottom:0; left:0; animation:cxDestEntra .5s ease; } @keyframes cxDestEntra { from{opacity:0} to{opacity:1} } .cx-dest__bg { position:absolute; top:0; right:0; bottom:0; left:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; } .cx-dest__bg--mob { display:none; } /* Degradê: escurece a esquerda e a base para o texto ficar legível */ .cx-dest::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; background: linear-gradient(to right, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.20) 62%, transparent 88%), linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.30) 34%, transparent 66%), /* leve escurecida no topo: o menu flutua aqui e precisa de contraste */ linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 22%); } .cx-dest__corpo { position:relative; z-index:2; padding:0 0 62px 46px; max-width:min(560px, 82%); color:var(--sobre-midia); } .cx-dest__logo { display:block; max-width:100%; max-height:150px; object-fit:contain; margin-bottom:14px; filter:drop-shadow(0 3px 14px rgba(0,0,0,.6)); } .cx-dest__titulo { font-family:var(--fonte-titulo); font-weight:700; line-height:1.03; font-size:clamp(1.8rem, 1.1rem + 2.6vw, 3.1rem); margin:0 0 8px; color:var(--sobre-midia); text-transform:none; } .cx-dest__sub { font-size:14.5px; font-weight:700; color:var(--sobre-midia); margin:0 0 8px; letter-spacing:.01em; } /* Linha de informações (classificação · gêneros · ano · duração · nota) */ .cx-dest__meta { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:10px; } .cx-dest__class { display:inline-flex; align-items:center; justify-content:center; min-width:30px; padding:3px 8px; border-radius:4px; font-size:12px; font-weight:800; color:#fff; line-height:1.3; } .cx-dest__infos { font-size:14px; font-weight:600; color:var(--sobre-midia-2); } .cx-dest__nota { display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:700; color:var(--sobre-midia); } .cx-dest__nota i { color:var(--aviso-texto); font-size:12px; } .cx-dest__sinopse { font-size:15px; line-height:1.6; color:var(--sobre-midia-2); margin:0 0 20px; max-width:520px; } /* Botões: principal claro (como no exemplo) + secundário em contorno */ .cx-dest__acoes { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .cx-dest__cta { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:50px; padding:0 30px; border-radius:var(--raio-p); background:var(--sobre-midia); color:#0D0D0D; font-size:15.5px; font-weight:700; text-decoration:none; white-space:nowrap; transition:transform var(--transicao), filter var(--transicao); } .cx-dest__cta:hover { transform:translateY(-1px); filter:brightness(.93); } .cx-dest__cta2 { display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 22px; border-radius:var(--raio-p); border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.10); color:var(--sobre-midia); font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap; transition:all var(--transicao); } .cx-dest__cta2:hover { background:rgba(255,255,255,.20); border-color:var(--sobre-midia); color:var(--sobre-midia); } /* Navegação da vitrine: setas + pontinhos + contador (2/6) */ .cx-dest__nav { position:absolute; left:0; right:0; bottom:18px; z-index:5; display:flex; align-items:center; justify-content:center; gap:14px; padding:0 18px; } .cx-dest__seta { width:34px; height:34px; flex-shrink:0; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.34); background:rgba(0,0,0,.42); color:var(--sobre-midia); font-size:13px; padding:0; display:inline-flex; align-items:center; justify-content:center; transition:background var(--transicao), border-color var(--transicao); } .cx-dest__seta:hover { background:rgba(0,0,0,.68); border-color:var(--sobre-midia); } .cx-dest__dots { display:flex; gap:8px; align-items:center; flex-shrink:0; } /* Dimensões travadas: sem isto o botão herda altura de outras regras e os pontinhos viram barras verticais. */ .cx-dest__dot { width:9px; height:9px; min-height:0; min-width:0; flex:0 0 9px; border-radius:50%; border:none; padding:0; margin:0; cursor:pointer; background:rgba(255,255,255,.42); transition:all var(--transicao); -webkit-appearance:none; appearance:none; line-height:0; font-size:0; } .cx-dest__dot.is-active { background:var(--sobre-midia); width:26px; flex-basis:26px; border-radius:5px; } .cx-dest__conta { font-family:var(--fonte-titulo); font-size:13.5px; font-weight:700; color:var(--sobre-midia-2); letter-spacing:.04em; flex-shrink:0; text-shadow:0 1px 6px rgba(0,0,0,.6); } .cx-dest__conta strong { color:var(--sobre-midia); font-size:15px; } @media (max-width:900px){ .cx-destaques { min-height:clamp(420px, 62vw, 520px); } .cx-dest__corpo { padding:0 0 54px 30px; max-width:74%; } .cx-dest__logo { max-height:110px; } } @media (max-width:640px){ /* Celular: MESMA leitura do desktop (imagem preenchendo, degradê e texto alinhado à esquerda na base) — só que num bloco mais alto, porque a tela é estreita e o conteúdo precisa de espaço. A margem e os cantos vêm de --faixa-*, iguais aos do cabeçalho. */ .cx-destaques { min-height:0; aspect-ratio:4/5; max-height:76vh; } /* Havendo imagem vertical, ela substitui a horizontal no celular. Feito por classe no PHP (.cx-dest--temmob) em vez de :has(), que o Safari antigo não entende. */ .cx-dest__bg--mob { display:block; } .cx-dest--temmob > .cx-dest__bg:not(.cx-dest__bg--mob) { display:none; } .cx-dest__bg { object-position:center top; } /* Degradê da base bem mais forte: no celular o texto ocupa metade do bloco e a arte costuma ser clara/movimentada — sem isto não dá para ler. */ .cx-dest::after { background: linear-gradient(to top, #000 0%, rgba(0,0,0,.96) 30%, rgba(0,0,0,.80) 46%, rgba(0,0,0,.30) 68%, transparent 88%), linear-gradient(to bottom, rgba(0,0,0,.50) 0%, transparent 18%); } /* O botão precisa TERMINAR acima da navegação (setas + pontinhos + 1/5), senão os dois se sobrepõem e os pontinhos aparecem atrás do botão. Navegação ocupa ~30px + 14px da base = 44px; deixamos 68px de folga. */ .cx-dest__corpo { padding:0 18px 68px; max-width:100%; text-align:left; margin:0; min-width:0; } .cx-dest__logo { margin-left:0; margin-right:0; max-height:86px; max-width:74%; } .cx-dest__titulo { font-size:1.7rem; } .cx-dest__sub { font-size:13px; } .cx-dest__meta { justify-content:flex-start; gap:9px; margin-bottom:9px; } .cx-dest__infos { font-size:13px; } .cx-dest__sinopse { font-size:13.5px; line-height:1.55; margin:0 0 16px; max-width:none; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* flex-wrap + max-width: com título longo os botões quebram para a linha de baixo em vez de vazar para fora do bloco. */ .cx-dest__acoes { justify-content:flex-start; gap:9px; flex-wrap:wrap; } .cx-dest__cta, .cx-dest__cta2 { max-width:100%; overflow:hidden; text-overflow:ellipsis; } .cx-dest__cta { height:42px; padding:0 18px; font-size:14px; border-radius:var(--raio-p); } .cx-dest__cta2 { height:42px; padding:0 15px; font-size:13.5px; } /* Pontinhos à esquerda, acompanhando o texto */ /* Navegação alinhada à esquerda, acompanhando o texto */ .cx-dest__nav { bottom:14px; justify-content:flex-start; gap:10px; padding:0 18px; } .cx-dest__seta { width:30px; height:30px; font-size:12px; } .cx-dest__conta { font-size:12.5px; margin-left:auto; } } /* Banner da home: cantos arredondados + margem em volta (como na referência) */ /* Desktop: volta ao tamanho antigo (centralizado, com largura máxima) */ .banner-principal { border-radius:var(--raio-g); overflow:hidden; margin:26px auto 10px; max-width:1360px; width:calc(100% - 56px); } .banner-principal .item img { border-radius:var(--raio-g); } /* Bolinhas do banner — mesma posição e cores de antes (canto superior esquerdo). Trocaram de nome ao sair do Owl Carousel: .owl-dots/.owl-dot → .bn-dots/.bn-dot. */ .banner-principal .bn-dots { position:absolute; left:20px; top:14px; z-index:2; display:flex; gap:7px; padding:0; margin:0; } .banner-principal .bn-dot { width:9px; height:9px; min-height:0; flex:0 0 9px; padding:0; margin:0; border:0; /* font-size/line-height zerados: sem isso, a regra global que dá 16px a todo