. */
.cv-banner-link {
position: absolute;
inset: 0;
display: block;
}
/* ==========================================================================
CONHECA CIDA VENTURA (ancorada a esquerda, 1544px)
========================================================================== */
.cv-conheca {
display: flex;
align-items: flex-start;
height: 834px;
padding-top: 41px;
/* linha-titulo-1-v2 (1593px) traz o emblema inteiro; a de 1545px o cortava.
A 2a camada estende a faixa branca por toda a largura da tela, dos dois
lados da imagem (as fotos cobrem a parte da esquerda). */
background:
url(/imagens/linha-titulo-1-v2.jpg) 0 80px no-repeat,
linear-gradient(#fff, #fff) 0 80px / 100% 107px no-repeat;
}
/* fotos.png tem 766px de altura e a caixa 691px: a imagem fica centralizada
e cortada ~37px em cima e embaixo, igual ao fatiado. */
.cv-conheca-fotos {
flex: none;
width: 818px;
height: 691px;
background: url(/imagens/fotos.png) right center no-repeat;
background-image: image-set(url(/imagens_webp/fotos.webp) type("image/webp"), url(/imagens/fotos.png) type("image/png"));
}
.cv-conheca-texto {
flex: none;
width: 726px;
padding-left: 80px;
}
.cv-conheca-titulo {
display: flex;
align-items: flex-end;
height: 116px;
}
/* flow-root: contem as margens dos (no fatiado a celula da tabela faz o
mesmo papel). Sem isso a margem do 1o paragrafo vazaria para fora. */
.cv-conheca-corpo {
display: flow-root;
margin-top: 65px;
font-size: 22px;
line-height: 24px;
color: #062345;
text-align: justify;
}
/* As quebras manuais do layout impedem o justificado (linha que termina em
para a pagina da especialidade. Hover: sobe, ganha sombra que
acompanha o contorno arredondado do PNG (drop-shadow, nao box-shadow),
icone cresce e o nome fica dourado. A sombra parte de um valor "zero"
para a transicao interpolar (de none ela nao anima). */
.cv-espec-item {
display: block;
width: 202px;
height: 202px;
padding-top: 26.5px;
background: url(/imagens/a0.png) no-repeat;
filter: drop-shadow(0 0 0 rgba(6, 35, 69, 0));
transition: transform .35s var(--cv-ease), filter .35s var(--cv-ease);
}
.cv-espec-item:hover {
transform: translateY(-8px);
filter: drop-shadow(0 16px 18px rgba(6, 35, 69, .22));
}
.cv-espec-ico img {
transition: transform .35s var(--cv-ease);
}
.cv-espec-item:hover .cv-espec-ico img {
transform: scale(1.1);
}
.cv-espec-ico {
display: flex;
align-items: flex-start;
justify-content: center;
height: 94px;
}
.cv-espec-nome {
font-weight: 700;
font-size: 26px;
line-height: 26px;
text-align: center;
color: #062345;
transition: color .25s var(--cv-ease);
}
.cv-espec-item:hover .cv-espec-nome {
color: #b8922f;
}
/* ==========================================================================
NOSSOS DESTAQUES (fundo branco)
========================================================================== */
.cv-destaques {
height: 1985px;
background: #fff;
}
.cv-destaques-titulo {
display: flex;
align-items: center;
justify-content: center;
width: 860px;
height: 204px;
margin: 0 auto;
}
/* space-around reproduz as duas tabelas de 448px centralizadas em celulas
de 478,5px: colunas em x=497 e x=975 (a 1920px). */
.cv-destaques-grid {
display: flex;
justify-content: space-around;
width: 957px;
margin: 0 auto;
}
.cv-destaques-col {
width: 448px;
}
.cv-destaques-col--dir {
padding-top: 121px;
}
/* overflow hidden: o zoom da foto no hover fica contido na moldura. */
.cv-destaque-img {
display: block;
overflow: hidden;
}
.cv-destaque-img img {
transition: transform .5s var(--cv-ease);
}
.cv-destaque-img:hover img {
transform: scale(1.03);
}
.cv-destaque-img--728 { height: 728px; }
.cv-destaque-img--726 { height: 726px; }
.cv-destaque-img--721 { height: 721px; }
.cv-destaque-img--711 { height: 711px; }
.cv-destaque-info--103 { height: 103px; }
.cv-destaque-info--102 { height: 102px; }
.cv-destaque-row {
display: flex;
align-items: center;
height: 44px;
}
.cv-destaque-row--73 {
height: 73px;
}
.cv-destaque-nome {
width: 223px;
font: 400 44px/44px 'Afterglow', Georgia, serif;
color: #0b294d;
}
.cv-destaque-link {
display: flex;
align-items: center;
width: 225px;
height: 100%;
font-size: 19px;
line-height: 19px;
color: #062345;
}
/* Nomes de destaque e descricoes da vitrine sao links de detalhe. */
.cv-destaque-nome a {
transition: opacity .25s var(--cv-ease);
}
.cv-destaque-nome a:hover {
opacity: .7;
}
/* Links com setinha: deslizam 3px e clareiam (padrao .link-dark do web4). */
.cv-destaque-link,
.cv-saiba,
.cv-connect-saiba {
transition: opacity .25s var(--cv-ease), transform .25s var(--cv-ease);
}
.cv-destaque-link:hover,
.cv-saiba:hover,
.cv-connect-saiba:hover {
opacity: .65;
transform: translateX(3px);
}
/* A seta do fatiado e preenche o resto. */
.cv-banner {
background-color: #0b294d;
}
.cv-banner-img {
width: auto;
max-width: 100%;
margin: 0 auto;
object-fit: contain;
}
}
/* ---- 1200 a 1919 ---- */
@media (min-width: 1200px) and (max-width: 1919px) {
/* Area da colagem encolhe: escala (contain) em vez de cortar a foto. */
.cv-conheca-fotos {
background-size: contain;
}
.cv-espec-lista {
max-width: 100%;
}
.cv-espec-cel {
flex: 1 1 0;
width: auto;
min-width: 0;
}
}
/* ---- <= 1199 (tablet) ---- */
@media (max-width: 1199px) {
/* Banner desktop com cover: a 400px de altura a escala e 0,78 e o texto
(x 890-1520 na imagem) continua inteiro ate 992px de largura. */
.cv-banner {
height: 400px;
}
/* Conheca empilhado: colagem centralizada sobre o texto. */
.cv-conheca {
display: block;
height: auto;
padding: 40px 0 50px;
background-image: none;
}
.cv-conheca-fotos {
width: calc(100% - 40px);
max-width: 816px;
height: auto;
aspect-ratio: 816 / 766;
margin: 0 auto;
background-size: contain;
background-position: center;
}
.cv-conheca-texto {
width: auto;
padding: 0 20px;
}
/* A faixa branca com o emblema vira fundo do proprio titulo, escalada
para a altura dele (auto 100%) para o emblema nao ser cortado. */
.cv-conheca-titulo {
height: auto;
margin: 20px -20px 0;
padding: 24px 20px;
background: #fff url(/imagens/linha-titulo-1-v2.jpg) right center / auto 100% no-repeat;
}
.cv-conheca-corpo {
margin-top: 20px;
font-size: 20px;
line-height: 26px;
}
.cv-conheca-corpo br {
display: none;
}
.cv-conheca-corpo p {
margin: 16px 0;
}
/* Especialidades: 3 circulos por linha, depois 2 centralizados. */
.cv-espec-band {
background-position: left center;
}
.cv-espec-lista {
flex-wrap: wrap;
justify-content: center;
width: auto;
height: auto;
margin: 0 20px;
padding: 50px 0 20px;
}
.cv-espec-cel {
flex: 0 0 33.333%;
width: auto;
margin-bottom: 30px;
}
/* Destaques: duas colunas percentuais; as fotos guardam 448:707. */
.cv-destaques {
height: auto;
padding-bottom: 30px;
}
.cv-destaques-titulo {
width: auto;
height: 150px;
padding: 0 20px;
}
.cv-destaques-grid {
justify-content: space-between;
width: auto;
margin: 0 20px;
}
.cv-destaques-col {
width: 48%;
}
.cv-destaques-col--dir {
padding-top: 12.6%;
}
.cv-destaque-img--728,
.cv-destaque-img--726,
.cv-destaque-img--721,
.cv-destaque-img--711 {
height: auto;
margin-bottom: 20px;
}
.cv-destaque-img img {
width: 100%;
height: auto;
}
.cv-destaque-info--103,
.cv-destaque-info--102 {
height: auto;
padding-bottom: 30px;
}
.cv-destaque-row,
.cv-destaque-row--73 {
flex-wrap: wrap;
height: auto;
}
.cv-destaque-nome {
width: auto;
margin-right: 20px;
font-size: 36px;
line-height: 40px;
}
.cv-destaque-link {
width: auto;
height: auto;
padding: 6px 0;
}
.cv-destaque-link .cv-seta,
.cv-destaque-row--73 .cv-destaque-link .cv-seta {
align-self: center;
margin-top: 0;
}
/* Ventura Connect: foto + texto fluido. */
.cv-connect {
width: auto;
height: auto;
margin: 0 20px;
padding: 50px 0;
}
.cv-connect-foto {
padding-top: 0;
}
.cv-connect-texto {
flex: 1 1 auto;
width: auto;
min-width: 0;
padding-top: 30px;
}
.cv-connect-titulo {
height: auto;
margin-bottom: 20px;
font-size: 48px;
line-height: 52px;
}
.cv-connect-desc {
height: auto;
margin-bottom: 20px;
font-size: 22px;
line-height: 28px;
}
.cv-connect-desc br {
display: none;
}
/* Depoimentos: carrossel com 2 cards por pagina; setas encostadas nas
bordas (36px) e a faixa recuada para nao ficar embaixo delas. */
.cv-depo-titulo {
width: auto;
height: auto;
padding: 40px 20px 30px;
}
/* Newsletter empilhada e centralizada. */
.cv-linha-ouro {
width: auto;
margin: 0 20px;
}
.cv-news {
flex-direction: column;
width: auto;
height: auto;
padding: 40px 20px;
}
.cv-news-titulo {
width: auto;
margin-bottom: 24px;
text-align: center;
}
.cv-news-campo {
width: 413px;
height: 56px;
margin-bottom: 20px;
background-position: left top;
}
.cv-news-linha {
width: 100%;
}
.cv-news-input {
flex: 1 1 auto;
width: auto;
min-width: 0;
margin-right: 24px;
}
.cv-news-enviar {
justify-content: center;
width: auto;
}
}
/* ---- <= 991 (celular e tablet vertical): hamburguer e banner quadrado ---- */
@media (max-width: 991px) {
/* PONTOS visiveis a partir daqui: no toque a navegacao e por swipe, e os
pontos sao o unico indicador de quantas paginas existem e em qual se
esta. No computador ficam escondidos (regra base, mais acima).
991px e o mesmo limite em que o menu vira hamburguer e o banner vira
quadrado -- e a fronteira de "celular/tablet" no projeto inteiro. */
.cv-slider-pontos {
display: flex;
}
/* Celular: banner QUADRADO. A troca de arquivo agora e feita pelo
do , no index.php -- aqui
fica so a forma da caixa. */
.cv-banner {
height: auto;
aspect-ratio: 1 / 1;
}
}
/* ---- <= 767: uma coluna ---- */
@media (max-width: 767px) {
.cv-conheca {
padding: 30px 0 40px;
}
.cv-conheca-titulo {
padding: 20px;
}
.cv-conheca-corpo {
font-size: 18px;
line-height: 26px;
}
.cv-conheca-acoes {
flex-wrap: wrap;
height: auto;
}
.cv-social {
align-self: center;
margin: 0 0 0 30px;
}
/* Faixa de Especialidades escalada para 120px (emblema junto). */
.cv-espec-band {
height: 120px;
background-size: auto 100%;
}
.cv-espec-band .cv-container {
height: 120px;
padding-left: 80px;
}
/* Circulos escalados: 2 por linha, ate 42vw cada (134px a 320). */
.cv-espec-cel {
flex: 0 0 50%;
margin-bottom: 20px;
}
.cv-espec-item {
width: min(202px, 42vw);
height: min(202px, 42vw);
padding-top: 13%;
background-size: 100% 100%;
}
.cv-espec-ico {
height: 46%;
}
.cv-espec-ico img {
width: auto;
height: auto;
max-width: 55%;
max-height: 85%;
}
.cv-espec-nome {
font-size: 20px;
line-height: 22px;
}
.cv-destaques-titulo {
height: 120px;
}
.cv-destaques-grid {
display: block;
}
.cv-destaques-col {
width: 100%;
max-width: 448px;
margin: 0 auto;
}
.cv-destaques-col--dir {
padding-top: 0;
}
.cv-destaque-nome {
font-size: 32px;
line-height: 36px;
}
.cv-connect {
display: block;
padding: 40px 0;
}
.cv-connect-foto {
width: auto;
}
.cv-connect-foto img {
margin: 0 auto;
}
.cv-connect-texto {
padding-top: 24px;
}
.cv-connect-titulo {
font-size: 36px;
line-height: 40px;
}
.cv-connect-desc {
font-size: 18px;
line-height: 26px;
}
.cv-news-titulo {
font-size: 30px;
line-height: 34px;
}
.cv-news-campo {
width: 100%;
max-width: 413px;
}
}
/* ---- <= 479 (320 a 479px) ---- */
@media (max-width: 479px) {
.cv-connect-titulo {
font-size: 30px;
line-height: 34px;
}
.cv-destaque-nome {
font-size: 28px;
line-height: 32px;
}
.cv-espec-nome {
font-size: 18px;
line-height: 20px;
}
/* Card de depoimento: fundo esticado (100% 100%) para caber em 280px;
avatar menor para sobrar largura de texto. */
.cv-depo-card {
width: 100%;
height: auto;
min-height: 174px;
padding: 22px 12px 20px;
background-size: 100% 100%;
}
.cv-depo-avatar-wrap {
width: 78px;
}
.cv-depo-avatar {
width: 66px;
height: 66px;
padding: 3px 0 0 3px;
background-size: 100% 100%;
}
/* O monograma acompanha a moldura reduzida (66 - 3 de padding). */
.cv-depo-iniciais {
width: 60px;
height: 60px;
font-size: 21px;
}
.cv-depo-avatar img {
width: 60px;
height: 60px;
}
.cv-depo-conteudo {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
.cv-depo-texto {
height: auto;
font-size: 15px;
line-height: 18px;
}
.cv-depo-texto br {
display: none;
}
.cv-depo-rodape {
flex-wrap: wrap;
height: auto;
margin-top: 10px;
}
.cv-depo-nome {
width: auto;
margin-right: 10px;
}
.cv-news-campo {
background-size: 100% 100%;
}
.cv-news-ico {
width: 40px;
}
.cv-news-input {
margin-left: 10px;
margin-right: 16px;
}
}
/* ==========================================================================
SLIDER (Vitrine de Oportunidades e Depoimentos) - motor unico, index.js
Faixa com scroll-snap DENTRO do container de 1170 (alinhada ao topo/rodape);
setas redondas 100px fora do container; pontos de paginacao abaixo.
A folga de 8px em cima e nas laterais (padding + margem negativa, que nao
muda a posicao dos slides) deixa o hover -- card sobe 4px, foto cresce 5%
-- aparecer sem ser cortado pelo overflow da faixa.
========================================================================== */
.cv-slider-corpo {
position: relative;
}
/* Folga so em cima e a ESQUERDA: a direita o slide ja tem padding interno,
e uma folga ali deixaria aparecer uma lasca do proximo slide na borda. */
.cv-slider-faixa {
display: flex;
margin: -8px 0 0 -8px;
padding: 8px 0 0 8px;
overflow: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: 8px;
scroll-behavior: smooth;
scrollbar-width: none;
}
.cv-slider-faixa::-webkit-scrollbar {
display: none;
}
.cv-slider-faixa:focus-visible {
outline: 2px solid #d2aa4c;
outline-offset: 2px;
}
.cv-slider-slide {
flex: none;
scroll-snap-align: start;
}
.cv-slider-seta {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
/* SETA DISCRETA: so o chevron, sem circulo branco nem borda.
Antes era um botao de 44px com fundo branco e contorno azul, que
competia com as fotos dos cards. Agora e o traco do chevron em cinza
claro, que so ganha cor quando o mouse chega perto.
A CAIXA continua com 44px: e a area de toque (o minimo acessivel e
24px), e mante-la evita que o carrossel mude de largura. O que encolheu
foi o desenho, nao o alvo do clique. */
width: 44px;
height: 44px;
margin-top: -22px;
border: 0;
background: none;
color: #9aa3ad;
cursor: pointer;
transition: color .25s var(--cv-ease), transform .25s var(--cv-ease);
}
.cv-slider-seta svg {
width: 26px;
height: 26px;
/* Traco fino: o peso 1.5 e o que faz a seta parecer discreta. */
stroke-width: 1.5;
}
.cv-slider-seta:hover,
.cv-slider-seta:focus-visible {
color: #062345;
}
/* O deslocamento lateral (em vez de aumentar a seta) reforca a direcao. */
.cv-slider-seta--prev:hover,
.cv-slider-seta--prev:focus-visible {
transform: translateX(-3px);
}
.cv-slider-seta--next:hover,
.cv-slider-seta--next:focus-visible {
transform: translateX(3px);
}
.cv-slider-seta--prev {
left: -100px;
}
.cv-slider-seta--next {
right: -100px;
}
/* FAIXA DE 1200 A 1369px: a seta de 44px a 100px FORA do container de 1170
chega a 585 + 100 + 44 = 729px do centro, ou seja, exige 1458px de janela.
Entre 1200 e 1369 ela passava da borda direita e o documento inteiro
ganhava rolagem horizontal -- medido: 85px de sobra a 1200px, 5px a 1360px.
O recuo de 44px so existia a partir de 1199px para baixo, entao a faixa
mais comum de notebook ficava descoberta.
A folga real ao lado do container e (janela - 1170) / 2: a 1200px sao
apenas 15px de cada lado, menos que a propria seta. Por isso aqui ela entra
PARA DENTRO do container (right/left positivos), sobreposta a borda da
faixa, como e usual em carrossel estreito. De 1370px em diante a folga ja
comporta os 100px originais e nada muda no desktop largo. */
@media (min-width: 1200px) and (max-width: 1369px) {
.cv-slider-seta--prev {
left: 2px;
}
.cv-slider-seta--next {
right: 2px;
}
/* TENTATIVA DESCARTADA (nao repetir): dar padding lateral na faixa para o
slide nao passar por baixo da seta, cancelando o padding com margem
negativa. A margem negativa devolve a faixa para FORA do container e a
rolagem horizontal volta (medido: 30px de sobra a 1200px), que e
exatamente o problema que este bloco existe para resolver.
A seta sobreposta e aceitavel aqui: ela e redonda, opaca e fica na
borda da foto circular do primeiro/ultimo item da pagina, nao sobre o
texto do card. */
}
.cv-slider-ponto {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(6, 35, 69, .22);
cursor: pointer;
transition: background-color .25s var(--cv-ease), transform .25s var(--cv-ease);
}
.cv-slider-ponto:hover {
background: rgba(6, 35, 69, .45);
}
.cv-slider-ponto.is-ativo {
background: #d2aa4c;
transform: scale(1.25);
}
/* ---- Vitrine de Oportunidades: 4 slides iguais por pagina ---- */
.cv-vitrine {
padding-bottom: 36px;
background: #f9f9f9;
}
.cv-vitrine-titulo {
display: flex;
align-items: center;
height: 96px;
font: 400 28px/28px 'Afterglow', Georgia, serif;
color: #0b294d;
}
.cv-vitrine-titulo a {
transition: opacity .25s var(--cv-ease);
}
.cv-vitrine-titulo a:hover {
opacity: .7;
}
.cv-vitrine-item {
display: flex;
align-items: center;
gap: 14px;
width: 25%;
padding: 12px 14px 12px 0;
}
/* A moldura RECORTA a foto num circulo.
As imagens do layout (b1.png...) ja vinham recortadas em circulo pelo
proprio arquivo. As fotos que vem do cadastro sao retangulares, entao o
recorte passou a ser feito aqui -- senao a vitrine mistura circulo com
quadrado conforme a origem da imagem.
O overflow tambem contem o zoom do hover (a foto cresce 5% dentro da
moldura, em vez de invadir o texto ao lado). */
.cv-vitrine-foto {
flex: none;
display: block;
width: 132px;
height: 134px;
overflow: hidden;
border-radius: 50%;
}
/* object-fit: cover recorta pelo centro em vez de espremer a foto -- uma
imagem deitada nao pode sair achatada dentro do circulo. */
.cv-vitrine-foto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s var(--cv-ease);
}
.cv-vitrine-item:hover .cv-vitrine-foto img {
transform: scale(1.05);
}
.cv-vitrine-info {
flex: 1 1 auto;
min-width: 0;
}
/* ALTURA FIXA de 4 linhas (4 x 17px de line-height).
Os titulos vem do cadastro e variam de 2 a 5 linhas, entao o "Saiba Mais"
de cada card parava numa altura diferente e a fileira ficava desalinhada.
Com altura fixa o botao cai sempre no mesmo lugar.
O -webkit-line-clamp corta o que passar de 4 linhas com reticencias (e
suportado em todos os navegadores atuais, apesar do prefixo). O `height`
junto do clamp e proposital: o clamp sozinho encurta o card quando o texto
e CURTO, e e justamente o caso curto que desalinhava. */
.cv-vitrine-desc {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
height: 68px;
margin-bottom: 8px;
font-weight: 400;
font-size: 14px;
line-height: 17px;
color: #000;
}
.cv-vitrine-desc a {
transition: opacity .25s var(--cv-ease);
}
.cv-vitrine-desc a:hover {
opacity: .7;
}
/* ---- Depoimentos: 3 cards por pagina (colunas de 390 = 1170/3) ---- */
.cv-depo-slider {
padding-bottom: 66px;
}
.cv-depo-col {
display: flex;
justify-content: center;
width: 33.333%;
}
/* ---- Responsivo dos sliders ---- */
@media (max-width: 1199px) {
/* setas dentro do container, na faixa de 44px reservada por padding */
.cv-slider {
padding: 0 44px;
}
.cv-slider-seta {
width: 40px;
height: 40px;
margin-top: -20px;
}
.cv-slider-seta--prev {
left: -44px;
}
.cv-slider-seta--next {
right: -44px;
}
.cv-vitrine {
padding-bottom: 30px;
}
.cv-vitrine-item {
width: 50%;
}
.cv-depo-slider {
padding-bottom: 40px;
}
.cv-depo-col {
width: 50%;
}
}
@media (max-width: 991px) {
/* swipe nativo no touch (a barra de rolagem continua escondida) */
.cv-slider-faixa {
overflow-x: auto;
overflow-y: hidden;
}
.cv-depo-col {
width: 100%;
}
}
@media (max-width: 767px) {
.cv-vitrine-item {
flex-direction: column;
width: 100%;
padding: 12px 0;
text-align: center;
}
.cv-vitrine-item .cv-saiba {
justify-content: center;
}
}
@media (max-width: 479px) {
/* sem setas: pontos + swipe bastam e o card ganha a largura toda */
.cv-slider {
padding: 0;
}
.cv-slider-seta {
display: none;
}
}
/* ==========================================================================
MOBILE - ajustes pedidos em 09/09/2026 (so ate 767px; desktop intacto)
1. titulos com altura relativa ao texto 2. redes a direita do CRECI
3. circulo de especialidade centralizado 4. link do destaque menor, abaixo
do nome 5. depoimentos 2 por pagina empilhados, so pontos 6. setas da
vitrine menores (e visiveis ate 320px)
========================================================================== */
@media (max-width: 767px) {
/* 1 */
.cv-conheca-titulo {
padding: 16px 20px;
}
.cv-espec-band {
height: auto;
}
.cv-espec-band .cv-container {
height: auto;
padding: 18px 0 18px 80px;
}
.cv-destaques-titulo {
height: auto;
padding: 28px 20px 20px;
}
.cv-vitrine-titulo {
height: auto;
padding: 22px 0 14px;
}
.cv-depo-titulo {
padding: 28px 20px 18px;
}
/* 2. redes logo a direita do CRECI, na MESMA linha (sem quebra): a 320px
CRECI 166 + 16 + icones 26+8+26 = 242 cabem nos 280 uteis. */
.cv-conheca-acoes {
flex-wrap: nowrap;
justify-content: flex-start;
}
.cv-creci {
flex: none;
}
.cv-social {
flex: none;
gap: 8px;
margin-left: 16px;
}
/* celulas de 29/84px do desktop viram o tamanho do icone */
.cv-social-face,
.cv-social-insta {
width: auto;
}
.cv-social svg {
width: 26px;
height: 26px;
}
/* 3 */
.cv-espec-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 0;
}
.cv-espec-ico {
height: auto;
margin-bottom: 10px;
}
.cv-espec-ico img {
max-height: 44px;
}
/* 4 */
.cv-destaque-row,
.cv-destaque-row--73 {
flex-direction: column;
align-items: flex-start;
}
.cv-destaque-nome {
margin-right: 0;
}
.cv-destaque-link {
padding: 6px 0 0;
font-size: 16px;
line-height: 16px;
}
.cv-destaque-link .cv-seta svg {
width: 13px;
height: 15px;
}
/* O padding de baixo mantem os pontos afastados da linha dourada. */
.cv-depo-slider {
padding: 0 0 36px;
}
/* Depoimentos: so pontos (as setas somem, o swipe assume). */
#sliderDepo .cv-slider-seta {
display: none;
}
.cv-depo-lista {
display: grid;
grid-auto-flow: column;
grid-template-rows: auto auto;
grid-auto-columns: 100%;
row-gap: 14px;
}
.cv-depo-col {
width: 100%;
}
/* 6 */
.cv-slider {
padding: 0 36px;
}
.cv-slider-seta {
width: 32px;
height: 32px;
margin-top: -16px;
}
.cv-slider-seta svg {
width: 16px;
height: 16px;
}
.cv-slider-seta--prev {
left: -36px;
}
.cv-slider-seta--next {
right: -36px;
}
}
@media (max-width: 479px) {
/* setas da Vitrine continuam (pequenas); as dos Depoimentos ficam ocultas */
.cv-slider {
padding: 0 36px;
}
.cv-depo-slider {
padding: 0 0 36px;
}
#sliderVitrine .cv-slider-seta {
display: flex;
}
}
@media (max-width: 767px) {
/* caixa do icone ocupa a largura do circulo: o max-width % do svg/png
volta a ser relativo ao circulo, nao a propria imagem (ficava 25px) */
.cv-espec-ico {
width: 100%;
}
.cv-espec-ico img {
width: auto;
height: auto;
max-width: 60%;
max-height: 48px;
}
}