e a título, e dentro de cartão isso vira altura que o layout não previu */ .hero-apoio p, .hero-nap p, .barra-campanha p { margin: 0; } .hero-loja-txt .elementor-heading-title { margin: 0; display: block; } .hero-loja-seta { line-height: 0; } .barra-fone .elementor-button { padding: 0; } .barra-fone .elementor-widget-container { line-height: 1.35; } /* altura de botão: no HTML quem manda na altura é o ícone de 20px, e o .btn tem 1px de borda transparente que também conta */ .btn--acao .elementor-button, .btn--claro .elementor-button { border-width: 1px; border-style: solid; } .btn--acao .elementor-button { border-color: transparent; } .btn--acao .elementor-button-icon svg, .btn--acao .elementor-button-icon i { width: 20px; height: 20px; font-size: 20px; } /* o invólucro do widget herda entrelinha 1.65 do corpo e inflava a barra */ .barra-fone { line-height: 0; } .barra-fone .elementor-button { line-height: 1.5; } /* O Astra encolhe a raiz no celular (14,59px em 375). Todo o sistema desta página foi calculado sobre raiz de 16px — com a raiz móvel, cada rem chegava 8,8% menor e o H1 do hero caía de 54,4px para 49,6px. */ html { font-size: 100%; } /* ============================ 02b · barra reduzida ==================== */ /* Entra depois de 200px de rolagem, com logo e ação apenas. Fixa por CSS: as âncoras de posição do Elementor pedem deslocamento em px e não seguram left e right ao mesmo tempo. */ .cabecalho-fixo { position: fixed; top: 0; left: 0; right: 0; z-index: 60; backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 1px 0 var(--linha), 0 8px 28px rgba(28, 20, 24, .07); transform: translateY(-102%); visibility: hidden; transition: transform .38s var(--ease), visibility .38s var(--ease); } .cabecalho-fixo.aparece { transform: none; visibility: visible; } /* o menu também vive aqui, em variante clara: sobre o papel o vidro escuro do hero viraria um borrão preto no meio da página */ .cabecalho-fixo .menu { backdrop-filter: none; -webkit-backdrop-filter: none; } .cabecalho-fixo .menu-lista .elementor-item:hover { background: var(--branco); } /* ---- cabeçalho interno: as telas sem hero ---- Portado do `internas.css`, que ficou de fora quando eu trouxe só a parte de catálogo. Aqui não há foto atrás, então o cabeçalho é claro desde o começo E OCUPA ESPAÇO — é ele que impede o conteúdo de nascer debaixo da barra fixa. A barra fixa continua entrando depois de 200px, igual à home. Na home ele não existe: o cabeçalho já vive dentro do hero. Um template só com as duas barras evita a barra fixa em duplicata, que em 97 lojas é o começo de dois sistemas para manter. */ .cabecalho-interno { padding-block: clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--linha); background: var(--papel); } body.home .cabecalho-interno { display: none; } .menu--claro { background: var(--papel-2); border-color: var(--linha); -webkit-backdrop-filter: none; backdrop-filter: none; } .menu--claro .menu-lista a { color: var(--tinta-70); } .menu--claro .menu-lista a:hover { background: var(--branco); color: var(--tinta); } /* abaixo de 620 o CTA sai do cabeçalho interno: ele já está na gaveta e na barra fixa, e três botões iguais na mesma tela viram ruído */ @media (max-width: 620px) { .cabecalho-interno .btn--acao { display: none; } } /* ---- hambúrguer: só abaixo de 940, que é onde o menu some */ .hamburguer { display: none; } @media (max-width: 940px) { .hamburguer { display: block; } } .hamburguer .elementor-icon { width: 44px; height: 44px; border-width: 1px; border-radius: 50%; font-size: 18px; cursor: pointer; /* o ícone nasce inline-block com 9px de padding, e caixa em linha ainda reserva o espaço da base do texto: o traço ficava 6px abaixo e à direita do centro do círculo. Grade centra sem depender de padding. */ display: grid; place-items: center; place-content: center; padding: 0; line-height: 0; } .cabecalho-hero .hamburguer .elementor-icon { border-color: rgba(255, 255, 255, .3); background: rgba(30, 0, 12, .42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .cabecalho-fixo .hamburguer .elementor-icon { background: var(--papel-2); border-color: var(--linha-forte); } /* Abaixo de 430px a linha não fecha: logo, botão com rótulo e hambúrguer somam mais que a tela. O rótulo sai e a ação vira o ícone redondo — some da vista, não da árvore de acessibilidade. */ @media (max-width: 430px) { .cabecalho-fixo .btn--acao .elementor-button { width: 44px; height: 44px; padding: 0; } .cabecalho-fixo .btn--acao .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cabecalho-fixo .btn--acao .elementor-button-content-wrapper { gap: 0; } .barra-fixa-wrap { gap: 16px; } } /* cumprido o aviso de rolagem, ele sai de cena */ .hero-role-wrap { transition: opacity .5s var(--ease), transform .5s var(--ease); } .hero-role-wrap.cumprido { opacity: 0; transform: translateY(12px); pointer-events: none; } /* ============================ gaveta · menu mobile =================== */ /* Pop-up do Elementor entrando pela direita. O desenho é o da landing: papel, sombra para a esquerda, elos com fio embaixo e o pé colado no fim. */ .gaveta .dialog-message { box-shadow: -12px 0 40px rgba(28, 20, 24, .18); overflow-y: auto; } .gaveta .dialog-widget-content { border-radius: 0; } .gaveta-corpo { min-height: 100%; } .gaveta-topo img { width: 138px; height: auto; } .gaveta-pe { margin-top: auto; } .gaveta-lista .elementor-nav-menu--main .elementor-item { border-bottom: 1px solid var(--linha); justify-content: flex-start; } .gaveta-lista .elementor-nav-menu--main .elementor-item:focus { background: transparent; } .gaveta-tel .elementor-button { padding: 0; } .gaveta-tel .elementor-button-icon svg, .gaveta-tel .elementor-button-icon i { width: 17px; height: 17px; font-size: 17px; } .gaveta .btn--acao .elementor-button { width: 100%; } /* o véu da gaveta, com o mesmo desfoque da landing */ /* O ID do pop-up muda em cada site da rede, então o véu é alcançado pelo conteúdo e não pelo ID — assim o mesmo Kit serve as 97 lojas. */ .elementor-popup-modal:has(.gaveta-corpo) { background: rgba(30, 0, 12, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ==================== elo · link de texto com seta ==================== */ .elo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .98rem; color: var(--vinho); text-decoration: none; border-bottom: 1px solid rgba(145, 0, 57, .3); padding-bottom: 2px; transition: border-color .2s var(--ease), gap .2s var(--ease); } .elo svg { width: 17px; height: 17px; } .elo:hover { border-color: var(--vinho); gap: 12px; } /* ==================== 04 · faixa de confiança ==================== */ .confianca { border-bottom: 1px solid var(--linha); } .confianca-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .confianca-item { display: flex; align-items: flex-start; gap: var(--s4); padding: clamp(28px, 3.2vw, 44px) clamp(18px, 2.4vw, 32px); border-left: 1px solid var(--linha); } .confianca-item:first-child { border-left: 0; padding-left: 0; } .confianca-item svg { width: 28px; height: 28px; flex: none; color: var(--vinho); margin-top: 1px; } .confianca-item span { font-size: 1.06rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.022em; } @media (max-width: 860px) { .confianca-lista { grid-template-columns: repeat(2, 1fr); } .confianca-item:nth-child(odd) { border-left: 0; padding-left: 0; } .confianca-item:nth-child(n+3) { border-top: 1px solid var(--linha); } } @media (max-width: 460px) { .confianca-lista { grid-template-columns: 1fr; } .confianca-item { border-left: 0; padding-left: 0; } .confianca-item + .confianca-item { border-top: 1px solid var(--linha); } } /* ==================== 06 · bento, texto e números ==================== */ /* As duas dobras dividem a mesma superfície, sem corte de cor entre elas. O bloco 06 é um bento: carrossel em retrato à esquerda, texto à direita, números embaixo. É a composição da referência Scalefy, com a diferença de que a imagem alta aqui é o próprio carrossel das quatro fotos da loja, o que preserva os eventos slider_next e slider_prev. */ .loja-bento { background: var(--papel-2); } /* As duas colunas têm a mesma altura, e é o cartão de texto que manda: com align-items:start o carrossel em 4/5 terminava 110px abaixo do fim do texto e a dobra ficava com um degrau. Agora o trilho estica e a foto se recorta na altura da coluna vizinha, com um piso para não achatar quando a unidade escrever um texto curto. */ .bento { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 1.8vw, 26px); align-items: stretch; } /* a faixa de números atravessa as duas colunas: presa só à direita, ela deixava um vazio embaixo do carrossel */ .numeros { grid-column: 1 / -1; } .bento-texto { padding: clamp(26px, 3vw, 44px); border-radius: var(--r-card); background: var(--branco); border: 1px solid var(--linha); } .bento-texto h2 { max-width: 12em; } .bento-texto .lead { margin-top: var(--s5); color: var(--tinta); } .bento-texto p + p { margin-top: var(--s4); } .bento-texto p:not(.lead):not(.nota-exemplo) { color: var(--tinta-70); } .bento-texto .elo { margin-top: var(--s5); } .nota-exemplo { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--linha); font-size: .84rem; line-height: 1.5; color: var(--tinta-45); } .nota-exemplo b { color: var(--tinta-70); font-weight: 600; } /* Números: só fatos que já estão declarados em outro ponto da página. Antes era uma faixa vinho de 3 colunas com o número em 3,2rem e uma legenda de 12px sobrando à direita — muita superfície para pouca informação. Agora cada fato é um cartão com a mesma anatomia: rótulo do assunto em cima, número grande embaixo e uma frase que fecha o sentido. A cor de marca saiu da superfície e ficou só no rótulo; quem carrega o vinho nesta dobra agora é o cristal. */ .numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(10px, 1vw, 16px); margin: clamp(16px, 1.8vw, 26px) 0 0; } .numero { display: flex; flex-direction: column; min-height: clamp(186px, 16vw, 232px); padding: clamp(20px, 2.1vw, 30px); border-radius: var(--r-card); background: var(--branco); border: 1px solid var(--linha); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .numero:hover { transform: translateY(-5px); border-color: var(--linha-forte); box-shadow: var(--sombra-baixa); } .numero dt { flex: 1; display: flex; flex-direction: column; } .numero-rotulo { font-size: .69rem; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: .13em; color: var(--vinho); } /* tabular-nums para o contador não sacudir a linha a cada quadro */ .numero-valor { margin-top: auto; padding-top: var(--s5); font-size: clamp(2.9rem, 4.4vw, 4.05rem); font-weight: 600; line-height: .9; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; } .numero dd { margin: 14px 0 0; font-size: .92rem; line-height: 1.4; color: var(--tinta-70); max-width: 26ch; } @media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .bento-foto { grid-row: auto; } .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .numeros { grid-template-columns: 1fr; } .numero { min-height: 0; } .numero-valor { padding-top: var(--s4); } } /* ==================== carrossel da loja ==================== */ /* carrossel da loja, agora em retrato dentro do bento */ .galeria { position: relative; display: flex; flex-direction: column; } /* O trilho toma a altura que sobra da coluna, e é isso que iguala o carrossel ao cartão de texto. O piso existe para o caso de a unidade escrever um texto curto: sem ele, a foto colapsaria junto. */ .galeria-trilho { display: flex; flex: 1 1 auto; min-height: clamp(340px, 34vw, 470px); gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--r-img); scrollbar-width: none; } .galeria-trilho::-webkit-scrollbar { display: none; } .galeria-item { flex: 0 0 100%; scroll-snap-align: start; border-radius: var(--r-img); overflow: hidden; background: var(--linha); margin: 0; } .galeria-item img { width: 100%; height: 100%; object-fit: cover; } .galeria-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); } .galeria-legenda { font-size: .88rem; color: var(--tinta-45); margin: 0; } .galeria-nav { display: flex; align-items: center; gap: var(--s3); } .galeria-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha-forte); background: var(--branco); color: var(--tinta); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), opacity .2s var(--ease); } .galeria-btn svg { width: 17px; height: 17px; } .galeria-btn:hover:not(:disabled) { border-color: var(--tinta); background: var(--papel-2); } .galeria-btn:disabled { opacity: .3; cursor: default; } .galeria-pontos { display: flex; gap: 6px; align-items: center; } /* O ponto cresce por transform, não por width: largura anima layout e a barra do carrossel inteira recalcula a cada quadro. */ .galeria-ponto { width: 22px; height: 16px; padding: 0; display: grid; align-items: center; border: 0; background: transparent; cursor: pointer; } .galeria-ponto::before { content: ""; height: 7px; border-radius: var(--r-pill); background: var(--linha-forte); transform: scaleX(.318); transform-origin: left center; transition: transform .28s var(--ease), background-color .2s var(--ease); } .galeria-ponto:hover::before { background: var(--tinta-45); } .galeria-ponto[aria-current="true"]::before { background: var(--vinho); transform: scaleX(1); } @media (max-width: 900px) { .galeria-trilho { min-height: 0; } .galeria-item img { aspect-ratio: 4 / 3; height: auto; } } /* ==================== cristal da marca ==================== */ /* ---- cristal da marca, flutuando sobre o carrossel ---- Um bloco de vidro cor de granada com o lockup da marca preso dentro. Nada de asset novo e nada de render 3D: o volume sai de quatro facetas de bisel, uma mesa recuada, o brilho preso no miolo e um especular que segue o ponteiro. Duas medidas mandam no realismo. O bisel é derivado da largura (--w) e não de %, porque padding em % se resolve sempre pela largura e sairia torto num retângulo. E as facetas são conic-gradient de PARADA DURA, com as viradas no ângulo real dos cantos: com transição macia o bisel vira borrão e o cristal parece adesivo brilhante. Ele fica no canto de cima, mordendo a borda do cartão de texto — a sobreposição é o que dá profundidade à dobra, e é ele quem devolve o vinho que saiu da faixa de números. pointer-events:none para não roubar o clique das setas do carrossel. */ .cristal { --w: clamp(148px, 15vw, 212px); --bisel: calc(var(--w) * .085); --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 16%; position: absolute; z-index: 3; top: clamp(-40px, -2.4vw, -20px); right: clamp(-56px, -3.5vw, -22px); width: var(--w); perspective: 700px; pointer-events: none; } .cristal-corpo { position: relative; aspect-ratio: 3 / 2; border-radius: calc(var(--w) * .17); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .45s var(--ease); /* O corpo não é opaco: deixa 10% do fundo passar e o desfoca. É esse resto de refração que separa vidro de plástico esmaltado — sem ele o bloco fica com cara de adesivo. A opacidade sobe para baixo, porque a parte funda do cristal transmite menos luz. */ background: linear-gradient(158deg, rgba(165, 6, 66, .86) 0%, rgba(122, 0, 48, .9) 34%, rgba(92, 0, 36, .95) 64%, rgba(61, 0, 24, .97) 100%); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 14px 24px rgba(61, 0, 24, .28), 0 38px 70px rgba(61, 0, 24, .34); } /* a mesa: o plano fundo, recuado do bisel. O degrau entre os dois é o que faz o olho ler espessura de vidro, e não uma borda desenhada. */ .cristal-corpo::after { content: ""; position: absolute; inset: var(--bisel); border-radius: calc(var(--w) * .1); background: radial-gradient(70% 90% at 32% 118%, rgba(250, 230, 192, .3), rgba(250, 230, 192, 0) 60%), radial-gradient(80% 100% at 50% 46%, rgba(255, 140, 180, .22), rgba(255, 140, 180, 0) 62%), linear-gradient(158deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .4)); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), inset 0 -2px 2px rgba(255, 255, 255, .22), inset 2px 0 3px rgba(0, 0, 0, .3); } /* bisel: quatro facetas de parada dura, recortadas em anel pela máscara. As viradas caem na diagonal dos cantos de um retângulo 3/2 (56,3°). */ .cristal-facetas { position: absolute; inset: 0; border-radius: inherit; padding: var(--bisel); background: conic-gradient(from 0deg, rgba(255, 255, 255, .52) 0 56.3deg, /* face de cima, a que pega a luz */ rgba(0, 0, 0, .40) 56.3deg 123.7deg, /* face da direita, na sombra */ rgba(0, 0, 0, .55) 123.7deg 236.3deg, /* face de baixo, a mais fechada */ rgba(250, 230, 192, .42) 236.3deg 303.7deg, /* face da esquerda, com o dourado */ rgba(255, 255, 255, .52) 303.7deg 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* o fio de luz na quina viva, que é o que faz o vidro parecer lapidado */ .cristal-facetas::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .72), inset 1.5px 0 0 rgba(250, 230, 192, .4), inset -1.5px 0 0 rgba(0, 0, 0, .3), inset 0 -1.5px 0 rgba(0, 0, 0, .55); } /* brilho especular: acompanha o ponteiro pelas variáveis --mx e --my */ .cristal-luz { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: radial-gradient(34% 44% at var(--mx) var(--my), rgba(255, 255, 255, .5), rgba(255, 255, 255, .08) 46%, rgba(255, 255, 255, 0) 72%); mix-blend-mode: screen; } /* a lasca de luz que atravessa o vidro */ .cristal-luz::before { content: ""; position: absolute; top: -60%; bottom: -60%; left: calc(var(--mx) - 20%); width: 8%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); transform: rotate(17deg); filter: blur(5px); } .cristal-marca { position: absolute; top: 50%; left: 18%; width: 64%; transform: translateY(-50%) translateZ(20px); filter: drop-shadow(0 1px 1px rgba(61, 0, 24, .75)) drop-shadow(0 0 16px rgba(255, 255, 255, .3)); } /* a sombra é elemento à parte porque encolhe quando o cristal sobe */ .cristal-sombra { position: absolute; left: 15%; right: 15%; bottom: -18px; height: 22px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(61, 0, 24, .36), rgba(61, 0, 24, 0) 70%); filter: blur(5px); } @media (prefers-reduced-motion: no-preference) { .cristal { animation: cristal-flutua 7.5s var(--ease) infinite; } .cristal-sombra { animation: cristal-pousa 7.5s var(--ease) infinite; } } @keyframes cristal-flutua { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -15px, 0); } } @keyframes cristal-pousa { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(.86); opacity: .5; } } @media (max-width: 900px) { .cristal { --w: clamp(112px, 28vw, 152px); top: -26px; right: -10px; } } /* ==================== 14 · rodapé ==================== */ /* A foto entra no topo do rodapé e se apaga em degradê até o vinho, por máscara, não por sobreposição de gradiente: assim a transição é do próprio pixel da imagem e não sobra uma borda dura em nenhuma largura. A assinatura sobe ao entrar na tela. */ .rodape { position: relative; isolation: isolate; background: var(--vinho-950); color: rgba(255, 255, 255, .74); padding-block: clamp(200px, 26vw, 340px) var(--s6); font-size: .96rem; overflow: hidden; } .rodape-foto { position: absolute; top: 0; left: 0; right: 0; height: clamp(300px, 40vw, 520px); z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.82) 34%, rgba(0,0,0,.42) 62%, rgba(0,0,0,0) 96%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.82) 34%, rgba(0,0,0,.42) 62%, rgba(0,0,0,0) 96%); } .rodape-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; /* dessaturada e mais escura: entra como atmosfera, não como fotografia disputando atenção com a assinatura */ filter: saturate(.55) brightness(.62) contrast(1.05); } /* escurecimento direto, sem mistura de camada: multiply sobre uma foto quente devolvia um lavado magenta em vez de vinho */ .rodape-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(61, 0, 24, .5) 0%, rgba(61, 0, 24, .68) 46%, rgba(61, 0, 24, .88) 100%); } .rodape-grade { position: relative; display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: clamp(32px, 4vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); } /* ---- voltar ao topo, no canto de cima do rodapé ---- Faz par com o aviso de rolagem do banner: lá a seta desce no fim da primeira dobra, aqui ela sobe no começo da última. O par de setas é o mesmo recurso, só que movido por hover — no rodapé um laço infinito competiria com a assinatura. */ .rodape-topo-caixa { justify-self: end; } .rodape-topo { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; font-size: .92rem; color: rgba(255, 255, 255, .74); transition: color .25s var(--ease); } .rodape-topo-olho { flex: none; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); display: grid; place-items: center; transition: border-color .25s var(--ease), background-color .25s var(--ease); } /* +13,5px deixa a primeira seta centrada no recorte e a segunda inteira embaixo, fora dele; o hover leva o par para -13,5px e a troca acontece subindo, que é o sentido do gesto */ .rodape-topo-setas { display: grid; gap: 12px; color: #fff; transform: translateY(13.5px); } .rodape-topo-setas svg { width: 15px; height: 15px; transform: rotate(-90deg); } .rodape-topo:hover { color: #fff; } .rodape-topo:hover .rodape-topo-olho { border-color: rgba(255, 255, 255, .68); background: rgba(255, 255, 255, .1); } @media (prefers-reduced-motion: no-preference) { .rodape-topo-setas { transition: transform .5s var(--ease); } .rodape-topo:hover .rodape-topo-setas { transform: translateY(-13.5px); } } /* abaixo de 1150 a quarta coluna espremia o horário: ela desce para uma linha só dela, ainda encostada à direita */ @media (max-width: 1150px) { .rodape-grade { grid-template-columns: 1.2fr 1fr 1fr; } .rodape-topo-caixa { grid-column: 1 / -1; } } @media (max-width: 820px) { .rodape-grade { grid-template-columns: 1fr; gap: var(--s6); } .rodape-topo-caixa { justify-self: start; } } .rodape strong { color: #fff; font-weight: 600; } .rodape h4 { font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .5); margin-bottom: var(--s4); letter-spacing: .06em; text-transform: uppercase; } .rodape-elos { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; } .rodape-elos a { text-decoration: none; opacity: .84; transition: opacity .2s var(--ease); } .rodape-elos a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } /* Assinatura: o nome da marca ocupando a largura da grade, encerrando a rolagem. 28,05cqw sai da TINTA do lettering: "Orthocrin" em Asap 600 com tracking -0.07em mede 3,6061em de caixa, e descontando o espaçamento que sobra depois da última letra o texto preenche exatamente a largura do contêiner, em qualquer tela. O movimento saiu da linha do tempo de rolagem e voltou para o mesmo observador que revela as outras seções: a assinatura fica no fim do documento, e ali não sobra rolagem para a faixa entry se completar, então o efeito ficava preso no meio do caminho. */ /* A caixa é o contêiner de medida. Precisa ser própria e sem padding: a assinatura acompanha a largura da GRADE, que tem teto de 1400px, enquanto vw acompanharia a janela e estouraria a partir daí. */ .rodape-assinatura-caixa { container-type: inline-size; } .rodape-assinatura { position: relative; display: block; margin: 0 -0.07em clamp(20px, 2.6vw, 34px) -0.0492em; font-size: clamp(3.4rem, 25vw, 23rem); /* reserva, sem unidade de contêiner */ line-height: .76; letter-spacing: -0.07em; font-weight: 600; color: rgba(255, 255, 255, .14); user-select: none; white-space: nowrap; } @supports (font-size: 1cqw) { .rodape-assinatura { font-size: 28.05cqw; } } @media (prefers-reduced-motion: no-preference) { .js .rodape-assinatura.sobe { transform: translateY(38%); } .js .rodape-assinatura.sobe.dentro { transform: none; transition: opacity 1s var(--ease), transform 1.15s var(--ease); } } .rodape-legal { position: relative; padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .14); font-size: .82rem; line-height: 1.6; color: rgba(255, 255, 255, .5); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between; } .rodape-legal a { text-decoration: none; } .rodape-legal a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ==================== rodapé · legal, políticas e assinatura DP ==================== */ .rodape-legal { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4) var(--s5); } .rodape-copy { margin: 0; } .rodape-copy span { color: rgba(255, 255, 255, .4); } .rodape-politicas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s4); } .rodape-politicas a { text-decoration: none; } .rodape-politicas a:hover { text-decoration: underline; text-underline-offset: 3px; } .rodape-dp { display: inline-flex; align-items: center; gap: 10px; justify-self: end; text-decoration: none; color: rgba(255, 255, 255, .4); transition: color .2s var(--ease), opacity .2s var(--ease); } /* Estas quatro linhas ficaram de fora quando portei o rodapé, e sem a primeira o "Feito por" herda line-height: 0 e nasce com altura zero: o texto pintava por cima do que estivesse ao lado. No desktop passava despercebido porque a altura da linha vinha das outras colunas. */ .rodape-dp span { font-size: .74rem; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; } .rodape-dp img { width: 108px; height: auto; opacity: .62; transition: opacity .2s var(--ease); } .rodape-dp:hover { color: rgba(255, 255, 255, .8); } .rodape-dp:hover img { opacity: 1; } /* Abaixo de 820 as três colunas não cabem: a do meio pede 280px e sobram 7 para cada ponta, o que picotava o copyright letra por letra e cortava a assinatura fora da tela. Uma coluna só, como no desenho. */ @media (max-width: 820px) { .rodape-legal { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s5); } .rodape-legal > * { width: 100%; align-items: center; } .rodape-politicas { justify-content: center; } .rodape-dp { justify-self: center; } /* a assinatura carrega align-self: flex-end do próprio widget, que vence o align-items do container — na coluna única isso a jogava para a direita enquanto o resto ficava centrado */ .rodape-legal .rodape-dp-wrap { align-self: center; text-align: center; } } .rodape-dp span { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; } .rodape-dp img { width: 108px; height: auto; opacity: .62; transition: opacity .2s var(--ease); } .rodape-dp:hover { color: rgba(255, 255, 255, .8); } .rodape-dp:hover img { opacity: 1; } /* ==================== ponte: DOM do Elementor → seletores do desenho ==== O CSS acima veio de lp.css sem retoque. Isto aqui só liga a marcação que o Elementor produz aos mesmos seletores, e zera as margens que o Astra dá a
e a título dentro de cartão. */ /* ---- 04 · faixa de confiança (widget icon-box) */ .confianca-item .elementor-icon-box-wrapper { display: flex; align-items: flex-start; gap: 16px; text-align: left; } .confianca-item .elementor-icon-box-icon { margin: 0; flex: none; } .confianca-item .elementor-icon-box-icon .elementor-icon { line-height: 0; } .confianca-item .elementor-icon-box-icon svg { width: 28px; height: 28px; margin-top: 1px; } .confianca-item .elementor-icon-box-title { margin: 0; } .confianca-item .elementor-icon-box-description { display: none; } .confianca-item { padding: clamp(28px, 3.2vw, 44px) clamp(18px, 2.4vw, 32px); border-left: 1px solid var(--linha); } .confianca-lista > .confianca-item:first-child { border-left: 0; padding-left: 0; } @media (max-width: 860px) { .confianca-lista > .confianca-item:nth-child(odd) { border-left: 0; padding-left: 0; } .confianca-lista > .confianca-item:nth-child(n+3) { border-top: 1px solid var(--linha); } } @media (max-width: 460px) { .confianca-lista > .confianca-item { border-left: 0; padding-left: 0; } .confianca-lista > .confianca-item + .confianca-item { border-top: 1px solid var(--linha); } } /* ---- 06 · o cartão de texto */ .bento-texto p { margin: 0; } .bento-h2 .elementor-heading-title { margin: 0; max-width: 12em; } .lead { margin-top: var(--s5); } .bento-p { margin-top: var(--s4); } .nota-exemplo { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--linha); } .nota-exemplo b { color: var(--tinta-70); font-weight: 600; } /* o elo é botão do Elementor vestido de link de texto */ .elo { margin-top: var(--s5); } .elo .elementor-button { padding: 0 0 2px; border-bottom: 1px solid rgba(145, 0, 57, .3); border-radius: 0; gap: 8px; transition: border-color .2s var(--ease), gap .2s var(--ease); } .elo .elementor-button:hover { border-color: var(--vinho); gap: 12px; } .elo .elementor-button-icon svg { width: 17px; height: 17px; } /* ---- 06 · os números */ .numeros { grid-column: 1 / -1; } .numero .elementor-widget-heading .elementor-heading-title, .numero p { margin: 0; } .numero-valor { margin-top: auto; padding-top: var(--s5); font-variant-numeric: tabular-nums; } .numero-frase { margin-top: 14px; max-width: 26ch; } @media (max-width: 520px) { .numero { min-height: 0 !important; } .numero-valor { padding-top: var(--s4); } } /* ---- 06 · carrossel. Nesta versão o Elementor não gera .elementor-widget-container no widget e as setas e os pontos são filhos do próprio swiper. Como o swiper é position:static, o bloco de posicionamento deles é .bento-foto — então escapam do overflow:hidden e dá para montar a barra embaixo da foto, como no desenho, sem tocar na marcação. */ .bento-foto { position: relative; } .galeria { flex: 1 1 auto; min-height: clamp(340px, 34vw, 470px); padding-bottom: 56px; /* o vão da barra de navegação */ } .galeria .swiper, .galeria .elementor-main-swiper { width: 100%; min-width: 0; height: 100%; min-height: 0; border-radius: var(--r-img); overflow: hidden; } .galeria .swiper-slide { height: 100%; } .galeria .swiper-slide figure, .galeria .swiper-slide .swiper-slide-inner { height: 100%; margin: 0; } .galeria .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } /* as duas setas, encostadas na direita da barra */ /* !important porque o post-6.css do Kit é enfileirado ANTES do CSS do widget de carrossel: no empate de especificidade quem vem depois ganha, e quem vem depois é o Elementor. É override de posição, nada além disso. */ .galeria.elementor-widget .elementor-swiper-button { top: auto !important; bottom: 0 !important; left: auto !important; transform: none !important; margin: 0 !important; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha-forte); background: var(--branco); opacity: 1; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); } .galeria.elementor-widget .elementor-swiper-button-prev { right: 52px !important; left: auto !important; } .galeria.elementor-widget .elementor-swiper-button-next { right: 0 !important; left: auto !important; } /* O Elementor pinta a seta de `rgba(237,237,237,.9)` — quase branco, para funcionar em cima de foto. Aqui o botão é branco, então a seta ficava invisível: só se via o círculo. E ele declara `display: inline-flex` sem `justify-content`, o que jogava o glifo para a esquerda. As duas regras dele são 0,3,0, iguais às minhas e carregadas depois — daí o seletor de quatro classes, que cobre a seta como filha do swiper e como irmã dele. */ .galeria.elementor-widget .swiper .elementor-swiper-button, .galeria.elementor-widget .swiper ~ .elementor-swiper-button { display: flex; align-items: center; justify-content: center; color: var(--tinta); } .galeria.elementor-widget .swiper .elementor-swiper-button svg, .galeria.elementor-widget .swiper ~ .elementor-swiper-button svg { width: 17px; height: 17px; fill: currentColor; } .galeria.elementor-widget .elementor-swiper-button:hover { border-color: var(--tinta); background: var(--papel-2); } .galeria .swiper-button-disabled { opacity: .3; } /* os pontos, à esquerda da mesma barra */ .galeria.elementor-widget .swiper-pagination { position: absolute !important; bottom: 17px !important; top: auto !important; left: 0 !important; right: auto !important; width: auto !important; display: flex; gap: 6px; align-items: center; } .galeria.elementor-widget .swiper-pagination-bullet { background: var(--linha-forte); opacity: 1; width: 7px; height: 7px; margin: 0; transition: width .28s var(--ease), background-color .2s var(--ease); } .galeria .swiper-pagination-bullet:hover { background: var(--tinta-45); } .galeria.elementor-widget .swiper-pagination-bullet-active { background: var(--vinho); width: 22px; border-radius: 999px; } /* ---- o cristal e a foto do rodapé são decorativos e não ocupam linha */ .cristal-wrap, .rodape-foto-wrap, .rodape-topo-wrap, .rodape-dp-wrap { line-height: 0; } /* o Elementor deixa o widget position:relative, e aí o filho absoluto se ancora no widget em vez de na seção — a foto do rodapé ia parar no meio */ .rodape-foto-wrap, .rodape-foto-wrap .elementor-widget-container { position: static; } .rodape-foto-wrap { height: 0; } .cristal-wrap, .cristal-wrap .elementor-widget-container { position: static; } /* o widget não pode ocupar linha na coluna da foto */ .cristal-wrap { height: 0; } /* ---- 14 · rodapé */ .rodape { position: relative; isolation: isolate; } .rodape p { margin: 0; } .rodape-h4 .elementor-heading-title { margin: 0; } .rodape-elo .elementor-button { padding: 0; opacity: .84; transition: opacity .2s var(--ease); } .rodape-elo .elementor-button:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } .rodape-assinatura .elementor-heading-title { display: block; margin: 0 -0.07em 0 0; white-space: nowrap; user-select: none; } @supports (font-size: 1cqw) { .rodape-assinatura .elementor-heading-title { font-size: 28.05cqw; } } .e-con .rodape-assinatura.elementor-widget.elementor-widget { /* O Pro zera o respiro de todo widget dentro de container, com .e-con .elementor-widget.elementor-widget { margin-block-end: 0 }. Uma classe a mais para a assinatura ter o respiro do desenho. */ margin-block-end: clamp(20px, 2.6vw, 34px); } .rodape-copy span { color: rgba(255, 255, 255, .4); } @media (max-width: 1150px) { .rodape-topo-caixa { grid-column: 1 / -1; justify-self: end; } } @media (max-width: 820px) { .rodape-topo-caixa { justify-self: start; } } /* ==================== estrutura · wrap, bloco, cabeca, lead, miudo, divide ==================== */ .wrap { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); } /* A grade sem respiro proprio. `.wrap` resolve largura E gutter, e serve para bloco que nasce colado na borda. Container que ja tem padding proprio — ou que vive dentro de uma secao que ja deu o respiro — precisa so da largura, senao o gutter entra duas vezes e o conteudo fica mais estreito que os vizinhos. Existe porque o controle do Elementor nao resolve isto: `boxed_width` igual ao padrao do Kit nao vira CSS nenhum, e container FILHO nasce com `--width: 100%`. Ou seja, pedir 1400 no painel num filho nao faz nada — ele sai com a largura cheia do pai. */ .grade { width: 100%; max-width: var(--largura); margin-inline: auto; } /* Ritmo: as dobras não têm todas a mesma altura. Uma passagem densa ganha uma folgada depois, e a declaração respira mais que todas. */ .bloco { padding-block: clamp(52px, 6vw, 88px); } .bloco--apertado { padding-block: clamp(34px, 3.6vw, 52px); } .bloco--largo { padding-block: clamp(68px, 8.5vw, 120px); } .bloco--sem-topo { padding-top: 0; } .bloco--sem-base { padding-bottom: 0; } .bloco--papel2 { background: var(--papel-2); } /* a medida do título é em em, não em ch: ch se apoia no tamanho do corpo e deixaria um H2 de 45px quebrando a cada duas palavras */ .cabeca { max-width: 780px; margin-bottom: clamp(26px, 3.2vw, 44px); } .cabeca h2 { max-width: 13em; } .cabeca p { margin-top: var(--s4); color: var(--tinta-70); max-width: 52ch; font-size: 1.05rem; } .lead { font-size: clamp(1.06rem, 1.35vw, 1.22rem); line-height: 1.55; color: var(--tinta-70); max-width: 60ch; } .miudo { font-size: .875rem; line-height: 1.5; color: var(--tinta-45); } .medida { max-width: 68ch; } /* Duas colunas para o formulário (10) e a dobra do mapa (12). Estava definida junto do bloco 06 antigo e sumiu quando aquele bloco virou bento: as duas dobras empilharam em coluna única sem ninguém pedir. */ .divide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; } .divide--topo { align-items: start; } @media (max-width: 900px) { .divide { grid-template-columns: 1fr; gap: var(--s7); } } /* ==================== 08 · avaliações ==================== */ /* -------------------------------------------- 08 · avaliações -- */ /* A nota abre a dobra ao lado do título; seis avaliações em duas linhas de três. Sem filtro por assunto, o que também retira o evento filter_reviews desta tela. */ .nota-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding-bottom: clamp(24px, 3vw, 40px); margin-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--linha); } .nota-numero { display: flex; align-items: flex-end; gap: var(--s4); flex: none; } .nota-numero > span { font-size: clamp(3.6rem, 7.5vw, 6.4rem); font-weight: 600; line-height: .82; letter-spacing: -0.06em; color: var(--vinho); } .nota-numero .miudo { margin-top: 6px; white-space: nowrap; } .nota-topo h2 { max-width: 11em; justify-self: end; text-align: right; } .estrelas { display: inline-flex; gap: 3px; color: var(--laranja); vertical-align: middle; } .estrelas svg { width: 17px; height: 17px; } .depoimentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .depoimento { display: flex; flex-direction: column; gap: var(--s5); padding: clamp(22px, 2.2vw, 30px); border-radius: var(--r-card); background: var(--branco); border: 1px solid var(--linha); } .depoimento blockquote { margin: 0; font-size: 1.04rem; line-height: 1.45; letter-spacing: -0.014em; } .depoimento footer { display: flex; align-items: center; gap: var(--s3); margin-top: auto; font-size: .82rem; color: var(--tinta-45); } /* A fala. Estava declarada no widget, e quando o cartão virou Listing Item o widget mudou e a tipografia foi junto. Aqui ela sobrevive à troca de widget, que é onde ela deveria estar desde o começo. */ .depoimento-fala { color: var(--tinta); font-size: 1.04rem; line-height: 1.45; letter-spacing: -0.014em; font-weight: 400; } /* O cartão em destaque saiu. O desenho antigo pintava o primeiro de vinho para a fileira não virar seis retângulos idênticos; com o texto vindo de avaliação real, o cartão vinho ficou pesado e a fala perdeu legibilidade. Decisão dele em 26/08: os seis brancos, o mesmo corpo em todos, e o que distingue um cartão do outro passa a ser o texto — não a cor. A altura fixa da fala é o que substitui aquele contraste: a fileira fica regular sozinha, sem cartão de 170px ao lado de um de 480px, e avaliação longa não obriga a encurtar o que a pessoa escreveu. */ .depoimento-fala { height: 10.2em; /* ~7 linhas na entrelinha 1,45 */ overflow-y: auto; padding-right: 14px; /* o texto não encosta na barra */ overscroll-behavior: contain; /* rolar até o fim do cartão não rola a página */ scrollbar-width: thin; scrollbar-color: var(--vinho) var(--papel-2); } /* A barra, desenhada. O padrão do sistema operacional é cinza grosso e aparece por cima do texto no Windows. */ .depoimento-fala::-webkit-scrollbar { width: 6px; } .depoimento-fala::-webkit-scrollbar-track { background: var(--papel-2); border-radius: 999px; } .depoimento-fala::-webkit-scrollbar-thumb { background: var(--vinho); border-radius: 999px; } /* Altura igual na fileira. O item da grade é flex e o cartão precisa ocupá-lo inteiro, senão cada cartão fica do tamanho do próprio texto e a fileira vira escada — que é o que o desenho não faz. */ .depoimentos-lista .jet-listing-grid__item { display: flex; } .depoimentos-lista .jet-listing-grid__item > .elementor { display: flex; width: 100%; } .depoimentos-lista .depoimento { width: 100%; } @media (max-width: 900px) { .depoimentos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .depoimentos { grid-template-columns: 1fr; } .nota-topo { grid-template-columns: 1fr; align-items: start; gap: var(--s5); } .nota-topo h2 { justify-self: start; text-align: left; } } /* ==================== 09 · consultores ==================== */ /* ------------------------------------------- 09 · consultores -- */ /* Foto ocupando o painel inteiro, texto à frente. O recorte lateral antigo deixava a consultora espremida numa coluna e o creme sobrando. */ .consultores { padding: var(--inset); } .consultores-painel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-panel); min-height: min(660px, 78vh); display: flex; align-items: center; background: var(--vinho-950); } .consultores-foto { position: absolute; inset: 0; z-index: -2; } .consultores-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; } /* véu vindo da esquerda, que é onde o texto cai */ .consultores-painel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(24, 0, 10, .92) 0%, rgba(24, 0, 10, .84) 26%, rgba(24, 0, 10, .5) 54%, rgba(24, 0, 10, .18) 78%, rgba(24, 0, 10, .1) 100%), linear-gradient(to top, rgba(24, 0, 10, .4), rgba(24, 0, 10, 0) 42%); } .consultores-conteudo { position: relative; width: 100%; max-width: var(--largura); margin-inline: auto; padding: clamp(44px, 6vw, 88px) var(--gutter); color: #fff; } .consultores-conteudo h2 { color: #fff; max-width: 9em; } .consultores-conteudo .lead { margin-top: var(--s5); color: rgba(255, 255, 255, .92); max-width: 34ch; } .consultores-conteudo p:not(.lead) { margin-top: var(--s4); color: rgba(255, 255, 255, .78); max-width: 42ch; } .consultores-conteudo .btn { margin-top: clamp(24px, 3vw, 36px); } @media (max-width: 720px) { .consultores-painel { min-height: 0; } .consultores-foto img { object-position: 58% 34%; } .consultores-painel::after { background: linear-gradient(to top, rgba(24, 0, 10, .95) 0%, rgba(24, 0, 10, .86) 42%, rgba(24, 0, 10, .58) 72%, rgba(24, 0, 10, .42) 100%); } .consultores-conteudo { padding-block: clamp(220px, 52vw, 300px) clamp(36px, 9vw, 56px); } .consultores-conteudo .btn { width: 100%; } } /* ==================== 10 · formulário ==================== */ /* ----------------------------------------------- 10 · formulário -- */ .form-cartao { padding: clamp(28px, 3.2vw, 40px); border-radius: var(--r-card); background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-baixa); } .campo { margin-bottom: var(--s4); } .campo label { display: block; margin-bottom: 7px; font-size: .9rem; font-weight: 600; letter-spacing: -0.005em; } .campo input, .campo select { width: 100%; padding: 14px 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-field); background: var(--branco); font: inherit; font-size: 1rem; color: var(--tinta); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .campo input::placeholder { color: var(--tinta-45); } .campo input:hover, .campo select:hover { border-color: var(--tinta-45); } .campo input:focus, .campo select:focus { outline: 0; border-color: var(--vinho); box-shadow: 0 0 0 3px rgba(145, 0, 57, .13); } .campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5257' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; } .campo-erro { display: none; margin-top: 6px; font-size: .84rem; font-weight: 500; color: #B4102F; } .campo.tem-erro input, .campo.tem-erro select { border-color: #B4102F; } .campo.tem-erro .campo-erro { display: block; } .aceite { display: flex; align-items: flex-start; gap: 11px; margin: var(--s5) 0; font-size: .88rem; line-height: 1.45; color: var(--tinta-70); cursor: pointer; } .aceite input { flex: none; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--vinho); cursor: pointer; } .form-ok { display: none; align-items: flex-start; gap: var(--s3); padding: var(--s4); margin-top: var(--s4); border-radius: var(--r-field); background: #F0F7F1; border: 1px solid #C8E2CC; font-size: .92rem; line-height: 1.45; color: #235C2C; } .form-ok svg { width: 20px; height: 20px; flex: none; margin-top: 1px; } .form-ok.aparece { display: flex; } .btn.carregando { pointer-events: none; opacity: .75; } .btn.carregando .btn-rotulo { visibility: hidden; } .btn.carregando::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; } .btn { position: relative; } @keyframes gira { to { transform: rotate(360deg); } } /* ==================== 12 · visita e mapa ==================== */ /* --------------------------------------------------- 12 · visita -- */ .nap p { font-size: 1.05rem; } .nap strong { font-weight: 600; } .nap-linha { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--linha); } .nap-linha:last-of-type { border-bottom: 1px solid var(--linha); margin-bottom: var(--s5); } .nap-linha svg { width: 20px; height: 20px; flex: none; color: var(--vinho); margin-top: 3px; } .nap-linha div { font-size: 1rem; line-height: 1.5; } .nap-linha .miudo { margin-top: 2px; } .mapa-cartao { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--papel-2); border: 1px solid var(--linha); min-height: 340px; display: grid; place-items: center; padding: var(--s6); text-align: center; } /* grade discreta: sugere mapa sem carregar 900 kB de iframe antes da hora */ .mapa-cartao::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px); background-size: 48px 48px; opacity: .55; mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 72%); } .mapa-conteudo { position: relative; max-width: 34ch; } .mapa-conteudo svg { width: 30px; height: 30px; color: var(--vinho); margin: 0 auto var(--s3); } .mapa-conteudo .miudo { margin: var(--s2) 0 var(--s5); } .mapa-cartao iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ==================== 13 · perguntas frequentes ==================== */ /* ------------------------------------------------------ 13 · FAQ -- */ /* O bloco ocupa a grade inteira. A medida de leitura é resolvida no parágrafo da resposta, não estreitando a seção: encolher o bloco dentro de um container de 1240px lê como desalinhamento, não como intenção. */ .faq { width: 100%; } .faq-item { border-top: 1px solid var(--linha); } .faq-item:last-child { border-bottom: 1px solid var(--linha); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5) 0; border: 0; background: transparent; font: inherit; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; text-align: left; color: var(--tinta); cursor: pointer; transition: color .2s var(--ease); } .faq-q:hover { color: var(--vinho); } .faq-sinal { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha-forte); transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .faq-sinal svg { width: 15px; height: 15px; } .faq-q[aria-expanded="true"] .faq-sinal { transform: rotate(45deg); background: var(--vinho); border-color: var(--vinho); color: #fff; } /* a resposta sai no HTML mesmo fechada: acordeão que injeta no clique não é indexado, e a marcação FAQPage precisa do texto servido */ /* O botão vive dentro do h3, então a resposta não é irmã adjacente dele. O estado mora no item: :has() cobre o aberto por padrão sem JavaScript e a classe cobre o clique. */ .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .faq-item:has(.faq-q[aria-expanded="true"]) .faq-a, .faq-item.aberto .faq-a { grid-template-rows: 1fr; } .faq-a > div { overflow: hidden; } /* sem JavaScript e sem :has(), tudo fica aberto e legível */ .no-js .faq-a { grid-template-rows: 1fr; } .faq-a p { padding-bottom: var(--s5); color: var(--tinta-70); max-width: 62ch; } /* ============ ponte das dobras 4 a 8 · DOM do Elementor → desenho ======= */ /* ---- 08 · depoimentos */ .estrelas .elementor-star-rating { display: inline-flex; gap: 3px; line-height: 1; } .estrelas .elementor-star-rating i { color: var(--laranja); } .estrelas .elementor-star-rating i:before { color: var(--laranja); } .estrelas .elementor-widget-container { line-height: 0; } .depoimento-fala blockquote, .depoimento-fala p { margin: 0; } .depoimento-fonte p, .miudo p, .nap-texto p { margin: 0; } .depoimento-pe { color: var(--tinta-45); } .nota-titulo { justify-self: end; } .nota-titulo .elementor-heading-title { max-width: 11em; margin: 0 0 0 auto; text-align: right; } @media (max-width: 720px) { .nota-titulo { justify-self: start; } .nota-titulo .elementor-heading-title { text-align: left; margin-left: 0; } } /* ---- 09 · consultores: o véu vem da esquerda, que é onde o texto cai. São dois gradientes empilhados, e controle de sobreposição do Elementor só entrega um. */ .consultores-painel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(100deg, rgba(24,0,10,.92) 0%, rgba(24,0,10,.84) 26%, rgba(24,0,10,.5) 54%, rgba(24,0,10,.18) 78%, rgba(24,0,10,.1) 100%), linear-gradient(to top, rgba(24,0,10,.4), rgba(24,0,10,0) 42%); } .consultores-painel > * { position: relative; z-index: 1; } .co-h2 .elementor-heading-title { max-width: 9em; } .consultores-conteudo .lead { margin-top: var(--s5); } .consultores-conteudo .lead p { max-width: 34ch; margin: 0; } .co-p { margin-top: var(--s4); } .co-p p { max-width: 42ch; margin: 0; } .co-btn { margin-top: clamp(24px, 3vw, 36px); } @media (max-width: 720px) { .consultores-painel::before { background: linear-gradient(to top, rgba(24,0,10,.95) 0%, rgba(24,0,10,.86) 42%, rgba(24,0,10,.58) 72%, rgba(24,0,10,.42) 100%); } .co-btn .elementor-button { width: 100%; } } /* ---- 10 · formulário: o widget do Pro vestido de cartão */ .form-cartao { padding: clamp(28px, 3.2vw, 40px); border-radius: var(--r-card); background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-baixa); } .form-cartao .elementor-field-group > label { margin-bottom: 7px; font-size: .9rem; font-weight: 600; letter-spacing: -0.005em; color: var(--tinta); } .form-cartao .elementor-field-textual { padding: 14px 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-field); background: var(--branco); font-size: 1rem; color: var(--tinta); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .form-cartao .elementor-field-textual::placeholder { color: var(--tinta-45); } .form-cartao .elementor-field-textual:hover { border-color: var(--tinta-45); } .form-cartao .elementor-field-textual:focus { outline: 0; border-color: var(--vinho); box-shadow: 0 0 0 3px rgba(145, 0, 57, .13); } .form-cartao .elementor-field-type-acceptance .elementor-field-subgroup { align-items: flex-start; gap: 11px; font-size: .88rem; line-height: 1.45; color: var(--tinta-70); } .form-cartao input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--vinho); } .form-cartao .elementor-button { font-weight: 600; letter-spacing: -0.01em; } .form-cartao .elementor-message-success { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--s4); padding: 14px 16px; border-radius: var(--r-field); background: rgba(10, 124, 58, .08); border: 1px solid rgba(10, 124, 58, .3); color: var(--zap-700); } /* ---- 12 · como chegar */ .lo-lead { margin: var(--s5) 0 var(--s6); } .nap-icone .elementor-icon { line-height: 0; margin-top: 3px; } .nap-icone .elementor-icon svg, .nap-icone .elementor-icon i { width: 20px; height: 20px; font-size: 20px; } .nap-texto strong { font-weight: 600; } .nap-texto .miudo { margin-top: 2px; color: var(--tinta-45); font-size: .875rem; } /* grade discreta: sugere mapa sem carregar 900 kB de iframe antes da hora */ .mapa-cartao::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px); background-size: 48px 48px; opacity: .55; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 72%); pointer-events: none; } .mapa-cartao { position: relative; } .mapa-conteudo { position: relative; z-index: 1; text-align: center; } .mapa-icone .elementor-icon { line-height: 0; } .mapa-h3 .elementor-heading-title { margin: 0; } .mapa-p { margin: var(--s2) 0 var(--s5); } .mapa-cartao iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; } .mapa-cartao.carregado .mapa-conteudo, .mapa-cartao.carregado::before { display: none; } /* ---- 13 · perguntas frequentes (widget accordion) */ .faq .elementor-accordion { width: 100%; } .faq .elementor-accordion-item { border: 0; border-top: 1px solid var(--linha); } .faq .elementor-accordion-item:last-child { border-bottom: 1px solid var(--linha); } .faq .elementor-tab-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5) 0; background: transparent; border: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; color: var(--tinta); transition: color .2s var(--ease); } .faq .elementor-tab-title:hover { color: var(--vinho); } .faq .elementor-tab-title a { color: inherit; } /* o sinal de mais, no círculo, virando x quando abre */ .faq .elementor-accordion-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha-forte); transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .faq .elementor-accordion-icon svg, .faq .elementor-accordion-icon i { width: 15px; height: 15px; font-size: 15px; } .faq .elementor-tab-title.elementor-active .elementor-accordion-icon { background: var(--vinho); border-color: var(--vinho); color: #fff; } .faq .elementor-tab-content { padding: 0 0 var(--s5); border: 0; background: transparent; color: var(--tinta-70); font-size: 1rem; line-height: 1.6; } .faq .elementor-tab-content p { margin: 0; max-width: 68ch; } /* ---- correções depois da primeira renderização */ /* o Astra desenha aspas com barra à esquerda e itálico; o desenho não tem */ .depoimento-fala blockquote { border: 0; padding: 0; margin: 0; font-style: normal; quotes: none; } .depoimento-fala blockquote::before, .depoimento-fala blockquote::after { content: none; } /* o select nasce com altura fixa e cortava o rótulo da opção */ .form-cartao select.elementor-field-textual { height: auto; line-height: 1.4; } .form-cartao .elementor-field-type-acceptance { margin: var(--s5) 0; } .form-cartao .elementor-field-group { margin-bottom: var(--s4); } /* acordeão: sinal à direita e pergunta à esquerda */ .faq .elementor-tab-title { flex-direction: row; text-align: left; } .faq .elementor-tab-title .elementor-accordion-title { flex: 1 1 auto; } .faq .elementor-accordion-icon-opened, .faq .elementor-accordion-icon-closed { display: grid; place-items: center; } .faq .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon-opened { display: none; } .faq .elementor-tab-title.elementor-active .elementor-accordion-icon-closed { display: none; } .faq .elementor-accordion-icon svg { fill: currentColor; } .faq .elementor-tab-content { padding-top: 0; } /* o acordeão sempre desenha o ícone antes do título; row-reverse joga o sinal para a direita sem tocar na marcação */ .faq .elementor-tab-title { flex-direction: row-reverse; justify-content: space-between; } .faq .elementor-accordion-icon { align-self: center; margin: 0; } /* aberto, o mais gira e vira x — é o gesto do desenho e dispensa um segundo glifo que pode faltar na fonte */ .faq .elementor-tab-title.elementor-active .elementor-accordion-icon { transform: rotate(45deg); } /* O sinal: um "+" só, sempre o mesmo elemento. O estado aberto do widget troca de span e o segundo vinha vazio — deixando um círculo cheio sem desenho. Mantendo só o fechado, a rotação de 45° faz o x. */ .faq .elementor-accordion-icon-opened { display: none !important; } .faq .elementor-accordion-icon-closed { display: grid !important; place-items: center; } .faq .elementor-accordion-icon i, .faq .elementor-accordion-icon svg { line-height: 1; font-size: 15px; width: 15px; height: 15px; display: block; } /* Mesma história do carrossel: o CSS do widget é enfileirado depois do Kit, então empate de especificidade é derrota. `.faq .elementor-accordion .x` dá 0,3,0 e ganha sem precisar de !important. */ .faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; align-self: center; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--linha-forte); color: var(--tinta); transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon-closed { display: grid; place-items: center; } .faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon-opened { display: none; } .faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg { width: 15px; height: 15px; display: block; fill: currentColor; } .faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon { transform: rotate(45deg); background: var(--vinho); border-color: var(--vinho); color: #fff; } /* aberto, o widget esconde o span do "+" para mostrar o do estado ativo — que aqui não usamos. Mantém o mesmo "+" em cena, girado. */ .faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-closed { display: grid; } .faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-opened { display: none; } /* O tab_active_color do widget pinta pergunta E sinal de vinho. A pergunta em vinho é o desenho; o sinal, sobre o círculo vinho, sumia. O !important é contra uma regra que o Elementor gera com a classe do elemento, que não dá para superar por especificidade. */ .faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg { fill: #fff !important; } /* ==================== 11 · novidades · cartão do JetEngine ============ */ /* O cartão é um Listing Item do JetEngine e a esteira é o Listing Grid em modo carrossel. O desenho de origem usava marquise em CSS puro com a fileira duplicada; aqui quem anda é o slider do JetEngine, com autoplay infinito e pausa no ponteiro. O gesto é o mesmo, a mecânica não. */ .esteira { position: relative; width: 100%; overflow: hidden; } /* as pontas se apagam para o corte não parecer defeito */ .esteira .jet-listing-grid__slider, .esteira .jet-listing-grid__items { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .esteira .jet-listing-grid__item { padding-inline: clamp(7px, .8vw, 11px); } .post-cartao { position: relative; aspect-ratio: 4 / 5; isolation: isolate; color: #fff; transition: transform .4s var(--ease); } .jet-listing-grid__item:hover .post-cartao { transform: translateY(-4px); } .post-cartao-foto { position: absolute; inset: 0; z-index: -2; line-height: 0; } .post-cartao-foto .jet-engine-listing-dynamic-image, .post-cartao-foto .jet-listing-dynamic-image, .post-cartao-foto a { display: block; height: 100%; } .post-cartao-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); } .jet-listing-grid__item:hover .post-cartao-foto img { transform: scale(1.05); } /* o véu que segura o texto na base, sem lavar a foto inteira */ .post-cartao::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(28, 8, 16, .88) 0%, rgba(28, 8, 16, .64) 26%, rgba(28, 8, 16, .22) 52%, rgba(28, 8, 16, 0) 74%); } .post-cartao-txt { position: relative; } .post-cartao-data { color: rgba(255, 255, 255, .78); } .post-cartao-titulo h3, .post-cartao-titulo .jet-listing-dynamic-field__content { margin: 0; color: #fff; } /* o slider do JetEngine não tem altura própria: sem isto os slides ficam com a altura do maior e o cartão perde a proporção 4/5 */ .esteira .slick-track { display: flex; align-items: stretch; } .esteira .slick-slide { height: auto; } .esteira .slick-slide > div { height: 100%; } /* ==================== single do post ==================== */ .post-cabeca .sp-h1 .elementor-heading-title { margin: 0; } .post-autor { color: var(--tinta-70); } /* O bloco do autor era campo do post — nome, cargo e iniciais escritos à mão, ou seja, autoria inventada. Agora é o widget nativo, que lê o usuário que publicou de verdade. Estas regras só trazem o visual de volta ao desenho: retrato redondo, nome com peso e a biografia como linha de apoio. O "cargo" não tem equivalente no WordPress. O lugar dele é a Informação biográfica do perfil do usuário — um campo por pessoa, editável por ela, em vez de um texto repetido em cada post. */ .post-autor-box .elementor-author-box { display: flex; align-items: center; } .post-autor-box .elementor-author-box__avatar { line-height: 0; } .post-autor-box .elementor-author-box__avatar img { width: 40px; height: 40px; border-radius: 50%; display: block; } .post-autor-box .elementor-author-box__text { display: flex; flex-direction: column; gap: 2px; } .post-autor .post-autor-box .elementor-author-box__name { font-size: .94rem; font-weight: 600; line-height: 1.25; color: var(--tinta); } .post-autor .post-autor-box .elementor-author-box__bio { margin: 0; font-size: .84rem; line-height: 1.35; color: var(--tinta-45); } .post-autor-box .elementor-author-box__bio p { margin: 0; } /* perfil sem biografia não deixa uma linha vazia empurrando o nome */ .post-autor-box .elementor-author-box__bio:empty { display: none; } .post-data { margin-left: auto; } @media (max-width: 620px) { .post-data { margin-left: 0; width: 100%; } } .post-destaque .sp-img img { width: 100%; height: auto; display: block; } /* índice: gruda na lateral no desktop e vira caixa recolhida no tablet */ .post-indice { position: sticky; top: 96px; } @media (max-width: 1024px) { .post-indice { position: static; } } .sp-toc .elementor-toc__header { padding: 0 0 12px; border-bottom: 1px solid var(--linha); } .sp-toc .elementor-toc__header-title { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .sp-toc .elementor-toc__body { padding: 12px 0 0; } .sp-toc .elementor-toc__list-item { margin-bottom: 8px; } /* o corpo do post: medida de leitura resolvida no parágrafo */ .post-corpo .sp-conteudo p { margin: 0 0 var(--s5); max-width: 68ch; } .post-corpo .sp-conteudo h2 { margin: var(--s7) 0 var(--s4); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; color: var(--tinta); } .post-corpo .sp-conteudo h3 { margin: var(--s6) 0 var(--s3); font-size: clamp(1.16rem, 1.6vw, 1.36rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--tinta); } .post-corpo .sp-conteudo > *:first-child { margin-top: 0; } .post-share .miudo p { margin: 0; } .post-share .sp-share-btn .elementor-share-btn { width: 40px; height: 40px; border-radius: 50%; } .relacionados-lista .jet-listing-grid__item { padding-inline: clamp(7px, .8vw, 11px); } /* O Astra ainda embrulha o conteúdo do post no container dele, e o template do Elementor já traz a própria grade. Sem isto a single fica numa coluna de 700px dentro de um cartão branco. */ .single-post .site-content > .ast-container { max-width: none; padding: 0; display: block; } .single-post #primary, .single-post .site-main { margin: 0; padding: 0; width: 100%; max-width: none; } .single-post .ast-article-single { padding: 0; border: 0; background: transparent; } .single-post .entry-content { margin: 0; } /* o título do índice é rótulo, não título de seção */ .sp-toc .elementor-toc__header-title { font-size: .8rem !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-45); line-height: 1.3; } .sp-toc .elementor-toc__spinner-container { display: none; } .sp-toc.elementor-widget-table-of-contents .elementor-widget-container { border: 0; background: transparent; } /* A foto destacada é a mesma do cartão, que é retrato 4/5. Na single ela entra recortada em 16/9. O certo mesmo é a unidade cadastrar duas fotos — retrato para o cartão, paisagem para o topo do post e para o compartilhamento — em campos separados. */ .post-destaque .sp-img img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 42%; } /* o índice não é caixa: o desenho tem só o fio embaixo do rótulo */ .sp-toc.elementor-widget-table-of-contents .elementor-toc__body, .sp-toc.elementor-widget-table-of-contents .elementor-widget-container, .sp-toc .elementor-toc__header { border: 0; background: transparent; } .sp-toc .elementor-toc__header { border-bottom: 1px solid var(--linha); padding: 0 0 10px; } .sp-toc .elementor-toc__body { padding: 14px 0 0; max-height: none; } .sp-toc .elementor-toc__list-wrapper { padding-left: 0; } /* o widget do índice desenha a moldura por regra gerada com a classe do elemento; não dá para vencer por especificidade */ /* a moldura fica no próprio invólucro do widget, não num filho */ .sp-toc.elementor-widget { border: 0 !important; border-radius: 0 !important; } .sp-toc .elementor-toc__body, .sp-toc .elementor-toc__header, .sp-toc .elementor-widget-container { border: 0 !important; background: transparent !important; } .sp-toc .elementor-toc__header { border-bottom: 1px solid var(--linha) !important; } /* -------------------------------------------- 07 · categorias -- A dobra não mostra produto: mostra seis portas. Cada cartão é link para /produtos/{categoria}, e é essa navegação que distribui autoridade — por isso não é filtro, que viraria query string e sairia do índice. Doze colunas, seis células e nenhum buraco: 7+5, 5+7, 6+6. O ritmo alterna de linha para linha em vez de repetir a mesma fatia. */ .cat-topo h2 { max-width: 12em; } .cat-topo .cat-sub p { margin: 0; color: var(--tinta-70); max-width: 34ch; font-size: 1.02rem; } /* O JetEngine entrega os itens numa fila de flex com largura em porcentagem. Quatro classes no seletor para vencer a dele sem !important: o CSS do Kit entra ANTES do CSS dos widgets, então empate de especificidade é derrota. */ .cat-grade .jet-listing-grid .jet-listing-grid__items { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.6vw, 20px); /* o JetEngine alarga a fila em calc(100% + gap) e compensa com margem negativa, que é como ele faz sarjeta em flex. Numa grade isso vira estouro: no celular o cartão comia os 20px de respiro da direita. */ width: 100%; margin: 0; } .cat-grade .jet-listing-grid .jet-listing-grid__items > .jet-listing-grid__item { width: auto; padding: 0; min-height: 260px; display: flex; } .cat-grade .jet-listing-grid .jet-listing-grid__items > .jet-listing-grid__item:nth-child(1) { grid-column: span 7; min-height: 320px; } .cat-grade .jet-listing-grid .jet-listing-grid__items > .jet-listing-grid__item:nth-child(2) { grid-column: span 5; min-height: 320px; } .cat-grade .jet-listing-grid .jet-listing-grid__items > .jet-listing-grid__item:nth-child(3) { grid-column: span 5; } .cat-grade .jet-listing-grid .jet-listing-grid__items > .jet-listing-grid__item:nth-child(4) { grid-column: span 7; } .cat-grade .jet-listing-grid .jet-listing-grid__items > .jet-listing-grid__item:nth-child(5) { grid-column: span 6; } .cat-grade .jet-listing-grid .jet-listing-grid__items > .jet-listing-grid__item:nth-child(6) { grid-column: span 6; } /* a altura da célula precisa atravessar os invólucros do JetEngine até o cartão, senão o cartão nasce do tamanho do texto */ /* `> *` pega TAMBÉM o