): sem veu — a superficie e conteudo, nao um
controle. So a elevacao, que ja diz "isto vai a algum lugar".
.pc-card-favorito e .pc-notificacao ficam de fora de proposito: sao , o
clicavel deles e o botao interno. */
@media (hover: hover) {
:where(.pc-card-servico, .pc-cat-card):hover {
transform: translateY(-2px);
}
}
:where(.pc-card-servico, .pc-cat-card) {
transition: transform 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
:where(.pc-botao, .pc-chip, .pc-card-servico, .pc-cat-card) {
transition: none;
transform: none;
}
}
h1, h2, h3 {
font-family: var(--pc-fonte-titulo);
font-weight: 600;
}
h2 {
font-size: var(--pc-tamanho-h2);
}
h3 {
font-size: var(--pc-tamanho-h3);
}
/* Largura do shell. O mock do Figma é uma tela de 375px com respiro de 20,5px
de cada lado (a bottom nav fica em x=20,5 com 334 de largura) => o conteúdo
ocupa ~89% da tela. A régua aqui é essa RAZÃO, não os 375px literais: o
shell acompanha a janela até --pc-largura-shell e o conteúdo fica sempre em
~89% dela, como no desenho.
O respiro é proporcional (5,5% de cada lado) com piso de 16px, para não
virar um fio de cabelo em telas pequenas.
content-box para o padding NÃO descontar da largura (com o border-box
global, o padding comia o miolo — era o aspecto "magro" das telas). */
:root {
/* Teto do shell mobile-first. Acima disso o app continua centrado, mas
não faz sentido esticar um layout de celular indefinidamente. */
/* O shell acompanha a janela. O teto de 560px valia para o corpo das telas,
mas era ele que segurava a coluna estreita enquanto a bottom nav — que usa
100vw como referencia — enchia a largura: o form ficava magro e a barra
larga na MESMA tela. Agora os dois partem da mesma base. */
--pc-largura-shell: min(100vw, 760px);
/* Razao exata do Figma: shell 375 com conteudo 335 => respiro de 20px por lado
= 5,333%, e o miolo fica em 89,33% do shell. Teto de 24px para o respiro nao
virar uma faixa larga quando a janela cresce. */
--pc-respiro-lateral: clamp(16px, calc(var(--pc-largura-shell) * 0.05333), 24px);
--pc-largura-conteudo: calc(var(--pc-largura-shell) - var(--pc-respiro-lateral) * 2);
/* Respiro interno de blocos de largura cheia (hero, CTA, cards de destaque). */
--pc-hero-respiro: clamp(16px, calc(var(--pc-largura-conteudo) * 0.06), 28px);
}
/* border-box + width no shell inteiro: o padding é o próprio respiro lateral,
então o miolo resultante é exatamente --pc-largura-conteudo (~89%). */
.pc-container {
box-sizing: border-box;
width: var(--pc-largura-shell);
max-width: 100%;
margin-inline: auto;
padding-inline: var(--pc-respiro-lateral);
}
/* O respiro lateral vale uma vez por tela: quem aplica e o .pc-container mais
externo ( do tema). Elementor e o .pc-container aninhado ficam neutros. */
.elementor-element.e-con:has(.pc-container),
.elementor-element.e-con-boxed:has(.pc-container),
.elementor-widget-shortcode:has(.pc-container) {
--content-width: 100%;
--container-max-width: 100%;
--padding-left: 0px;
--padding-right: 0px;
--padding-inline-start: 0px;
--padding-inline-end: 0px;
--padding-top: 0px;
--padding-bottom: 0px;
--padding-block-start: 0px;
--padding-block-end: 0px;
padding-inline: 0;
padding-block: 0;
}
.elementor-element.e-con:has(.pc-container) > .e-con-inner {
max-width: 100%;
width: 100%;
padding-inline: 0;
padding-block: 0;
}
.pc-container .pc-container,
.elementor .elementor-shortcode > .pc-container,
.elementor .elementor-widget-shortcode .pc-container {
width: 100%;
max-width: 100%;
padding-inline: 0;
}
.pc-card {
background: var(--pc-branco);
border-radius: var(--pc-radius-card);
box-shadow: var(--pc-sombra-card);
}
.pc-btn-pill {
border-radius: var(--pc-radius-pill);
font-family: var(--pc-fonte-corpo);
font-weight: 600;
border: none;
cursor: pointer;
}