do shortcode isso nao acontecia, porque ali o padrao
do CSS ja e nowrap. */
flex-wrap: nowrap;
align-items: stretch;
gap: 15px;
width: auto;
height: auto;
padding: 0 var(--isp-margem);
overflow-x: auto;
scroll-snap-type: x mandatory;
/* Sem isto o encaixe cola o card na borda da tela e come os 24 de
goteira: o scroll-snap alinha pelo inicio da CAIXA de rolagem, e
nao pelo inicio do conteudo. */
scroll-padding-left: var(--isp-margem);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.isp-mb-carrossel [data-isp-trilho]::-webkit-scrollbar {
display: none;
}
.isp-mb-carrossel [data-isp-trilho] > * {
scroll-snap-align: start;
/* Nao encolher: o card do container do Elementor nasce com
flex-shrink 1, e numa esteira de nowrap os sete cards se
espremiam para caber nos 390 (42px cada, e a altura explodia).
O
do shortcode nao tinha esse problema porque a largura
dele vinha so do CSS. */
flex-shrink: 0;
}
.isp-mb-carrossel__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding-top: 8px;
}
.isp-mb-carrossel__btn {
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.06);
color: #ffffff;
cursor: pointer;
}
.isp-mb-carrossel__btn--proximo {
background-color: rgba(255, 255, 255, 0.12);
}
.isp-mb-carrossel__btn svg {
display: block;
width: 24px;
height: 24px;
}
.isp-mb-carrossel__btn--anterior svg {
transform: rotate(180deg);
}
/* No arquivo de 390 NENHUM título usa o degradê recortado no texto: são
todos de cor sólida. Em 342 de largura o degradê chegava ao cinza já
na segunda linha e o fim do título parecia apagado. */
.isp-degrade .elementor-heading-title {
background-image: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: inherit;
padding-bottom: 0;
margin-bottom: 0;
}
/* ---------------------------------------------------------------
BOTAO — Figma, CTA de 242x42,6
Medidas do arquivo:
altura 42,6 fio 0,82 recuo 6,56 (19,68 a esquerda)
vao 8,2 disco 29,5 rotulo Nata Sans Bold 13,12/21,32 alta
No Figma o fio fica DENTRO da caixa, entao os 6,56 de recuo ja o
incluem; no CSS a borda soma por fora do padding. Por isso o recuo
escrito aqui e 5,74 (6,56 menos o fio): 0,82 + 5,74 + 29,5 + 5,74 +
0,82 fecha exatamente 42,6, e a esquerda fecha 19,68.
Este bloco precisa vir DEPOIS da regra base de .isp-btn__ico, la em
cima: as duas tem a mesma especificidade e, no mesmo arquivo, quem
vem por ultimo ganha. Escrito antes, o disco continuava com 36 e o
botao saia 8,5px mais alto que o desenho. */
.isp-btn {
max-width: 100%;
gap: 8.2px;
padding: 5.74px 5.74px 5.74px 18.86px;
border-width: 0.82px;
font-size: 13.12px;
line-height: 21.32px;
white-space: normal;
text-align: left;
}
.isp-btn__ico {
width: 29.5px;
height: 29.5px;
flex: 0 0 29.5px;
}
.isp-btn__ico svg {
width: 24px;
height: 24px;
}
/* O botao e inline-flex, entao a caixa de linha do pai reserva mais uma
descida abaixo dele — 8,5px de sobra que empurravam tudo que vem
depois. Zerar a entrelinha do invólucro do shortcode mata a fresta
sem tirar o botao do fluxo em linha (o que quebraria a centralizacao
por text-align nas seções que centralizam o CTA). */
.elementor-shortcode:has(> .isp-btn),
.isp-btn-caixa:has(> .isp-btn) {
line-height: 0;
}
/* Título e corpo na escala do arquivo de 390. */
.isp-eyebrow .elementor-heading-title,
.isp-eyebrow {
font-size: 12px;
line-height: 16px;
letter-spacing: 1.6px;
}
.isp-h2 .elementor-heading-title,
.isp-h2 {
font-size: 28px;
line-height: 34px;
}
.isp-lead .elementor-heading-title,
.isp-lead,
.isp-lead p {
font-size: 14px;
line-height: 22px;
}
}