/* ============================================================ CAZA BRASIL — TEMA (CORES E AJUSTES) ------------------------------------------------------------ 👉 ESTE É O ARQUIVO PARA MUDAR AS CORES DA LOJA. Troque os códigos de cor abaixo e o site inteiro muda. Use um seletor de cor (ex.: htmlcolorcodes.com) para pegar o código no formato #RRGGBB. O arquivo base.css tem a estrutura do tema e não precisa ser alterado. ============================================================ */ :root { /* ---------- COR PRINCIPAL DA MARCA ---------- Usada em botões, preços, badges e destaques. As 3 primeiras são tons da MESMA cor: se trocar a principal, gere as outras duas na mesma família. */ --color-primary: #871EE3; /* roxo Caza Brasil */ --color-primary-dark: #6315A7; /* versão escura (hover dos botões) */ --color-primary-light: #E7CCFF; /* versão clara (fundos suaves) */ --color-primary-contrast: #ffffff; /* texto em cima da cor principal */ /* ---------- COR DE APOIO ---------- */ --color-accent: #009EF7; --color-accent-contrast: #ffffff; /* ---------- CORES DE SITUAÇÃO ---------- */ --color-star: #FFB800; /* estrelas de avaliação */ --color-success: #1BA65B; /* verde: frete grátis, Pix */ --color-success-dark: #158348; --color-sale: #871EE3; /* etiqueta de desconto */ --color-savings: #1BA65B; /* faixa "você economiza" */ /* ---------- TEXTO E FUNDO ---------- */ --color-text: #1A1A1A; /* texto principal */ --color-text-muted: #737373; /* texto secundário, cinza */ --color-background: #FFFFFF; /* fundo do site */ --color-background-alt: #F4F4F4; /* fundo das seções alternadas */ --color-border: #d2d2d2; /* linhas e bordas */ --color-card-border: #E7CCFF; /* borda dos cards de produto */ /* ---------- TIPOGRAFIA ---------- Para trocar a fonte: mude o nome aqui E o link do Google Fonts que fica no das páginas HTML. */ --font-body-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-heading-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-body-weight: 400; --font-heading-weight: 700; /* Aumente para 1.05 / 1.1 se quiser as letras maiores */ --font-body-scale: 1.0; --font-heading-scale: 1.0; /* ---------- MEDIDAS ---------- */ --page-width: 1280px; /* largura máxima do conteúdo */ --card-radius: 10px; /* cantos arredondados dos cards */ --button-radius: 8px; /* cantos dos botões */ --section-inner-padding: 24px; /* respiro entre as seções */ } /* ============================================================ BASE DO DOCUMENTO ------------------------------------------------------------ Regras que na Shopify ficavam soltas no tema e não estão no base.css. Sem elas o layout desalinha e a fonte quebra. Não remova. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body-family); font-style: var(--font-body-style); font-weight: var(--font-body-weight); font-size: calc(1.5rem * var(--font-body-scale)); line-height: 1.6; color: var(--color-text); background-color: var(--color-background); -webkit-font-smoothing: antialiased; } /* ============================================================ COMPONENTES ADICIONAIS (peças que não existiam no tema original) ============================================================ */ /* ---------- SELO "FRETE GRÁTIS" DOS CARDS ---------- No tema original este selo era VERDE. Aqui ele usa o roxo da marca. Para voltar ao verde, troque var(--color-primary) por var(--color-success) nas três linhas abaixo. */ .badge-frete { border-color: var(--color-primary); color: var(--color-primary); background: rgba(var(--color-primary-rgb, 135, 30, 227), .045); } /* ---------- ESTRELAS DE AVALIAÇÃO ---------- */ .avaliacao { display: inline-flex; align-items: center; gap: .6rem; margin-top: .6rem; justify-content: center; width: 100%; } .avaliacao__estrelas { position: relative; display: inline-flex; line-height: 0; } .avaliacao__base { display: flex; gap: .1rem; } .avaliacao__preenchida { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; } .avaliacao__linha { display: flex; gap: .1rem; width: max-content; } .avaliacao__estrela { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; } .avaliacao__base .avaliacao__estrela { fill: #D1D5DB; } .avaliacao__preenchida .avaliacao__estrela { fill: var(--color-star); } .avaliacao__total { font-size: calc(1.3rem * var(--font-body-scale)); color: var(--color-text-muted); font-weight: 500; } .product__rating .avaliacao { justify-content: flex-start; width: auto; margin-top: 0; } .product__rating .avaliacao__estrela { width: 1.9rem; height: 1.9rem; } /* ---------- AVISO DE ESTOQUE (página do produto) ---------- */ .product__estoque { display: inline-flex; align-items: center; font-size: calc(1.35rem * var(--font-body-scale)); font-weight: 600; color: var(--color-primary); } /* ---------- BUSCA RÁPIDA (sugestões enquanto digita) ---------- */ .busca-rapida { list-style: none; margin: 0; padding: 0; } .busca-rapida__item { display: flex; align-items: center; gap: 1.2rem; padding: .8rem; border-radius: var(--card-radius); } .busca-rapida__item:hover { background: var(--color-background-alt); } .busca-rapida__item img { width: 5.6rem; height: 5.6rem; object-fit: contain; border-radius: .6rem; background: var(--color-background-alt); flex-shrink: 0; } .busca-rapida__info { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .busca-rapida__titulo { font-size: calc(1.4rem * var(--font-body-scale)); font-weight: 500; line-height: 1.35; } .busca-rapida__preco { font-size: calc(1.4rem * var(--font-body-scale)); font-weight: 700; color: var(--color-primary); } .busca-rapida__vazio { padding: 1.6rem .8rem; color: var(--color-text-muted); font-size: calc(1.4rem * var(--font-body-scale)); } /* ---------- BOTÃO FLUTUANTE DO WHATSAPP ---------- */ .whatsapp-flutuante { position: fixed; right: 1.8rem; bottom: 1.8rem; z-index: 80; display: flex; align-items: center; justify-content: center; width: 5.4rem; height: 5.4rem; border-radius: 50%; background: #25D366; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); transition: transform .2s ease; } .whatsapp-flutuante:hover { transform: scale(1.08); } .whatsapp-flutuante .icon { width: 2.9rem; height: 2.9rem; fill: #fff; stroke: none; color: #fff; } @media screen and (max-width: 749px) { .whatsapp-flutuante { right: 1.4rem; bottom: 1.4rem; width: 5rem; height: 5rem; } .whatsapp-flutuante .icon { width: 2.6rem; height: 2.6rem; } } /* ---------- PÁGINAS DE CONTEÚDO (políticas, FAQ, contato) ---------- */ .pagina { padding: 3.2rem 0 4.8rem; } .pagina__cabecalho { text-align: center; margin-bottom: 3.2rem; } .pagina__titulo { margin: 0 0 1rem; font-size: calc(3.2rem * var(--font-heading-scale)); } .pagina__subtitulo { color: var(--color-text-muted); max-width: 68rem; margin: 0 auto; font-size: calc(1.55rem * var(--font-body-scale)); } .pagina__conteudo { max-width: 84rem; margin: 0 auto; } .pagina__conteudo h2 { font-size: calc(2rem * var(--font-heading-scale)); margin: 3.2rem 0 1.2rem; } .pagina__conteudo h2:first-child { margin-top: 0; } .pagina__conteudo h3 { font-size: calc(1.65rem * var(--font-heading-scale)); margin: 2.4rem 0 .8rem; } .pagina__conteudo p, .pagina__conteudo li { font-size: calc(1.5rem * var(--font-body-scale)); line-height: 1.75; } .pagina__conteudo ul, .pagina__conteudo ol { padding-left: 2.2rem; } .pagina__conteudo li { margin-bottom: .6rem; } .pagina__conteudo strong { font-weight: 700; } .pagina__aviso { padding: 1.6rem 1.8rem; border-left: 4px solid var(--color-primary); background: var(--color-background-alt); border-radius: 0 var(--card-radius) var(--card-radius) 0; margin: 2rem 0; } /* ---------- CARTÕES DE CONTATO ---------- */ .contato-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1.6rem; margin: 3.2rem 0; list-style: none; padding: 0; } .contato-card { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 2.8rem 2rem; border: 1px solid var(--color-border); border-radius: var(--card-radius); background: var(--color-background); transition: border-color .2s ease, transform .2s ease; } .contato-card:hover { border-color: var(--color-primary); transform: translateY(-3px); } .contato-card .icon { width: 3.4rem; height: 3.4rem; color: var(--color-primary); } .contato-card__titulo { font-weight: 700; font-size: calc(1.6rem * var(--font-body-scale)); } .contato-card__texto { color: var(--color-text-muted); font-size: calc(1.45rem * var(--font-body-scale)); } /* ---------- SANFONA DO FAQ ---------- */ .faq-lista { display: flex; flex-direction: column; gap: .8rem; } .faq-item { border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; } .faq-item__toggle { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; width: 100%; padding: 1.6rem 1.8rem; background: transparent; border: 0; text-align: left; font-family: inherit; font-size: calc(1.5rem * var(--font-body-scale)); font-weight: 600; color: var(--color-text); cursor: pointer; } .faq-item__toggle:hover { background: var(--color-background-alt); } .faq-item__toggle .icon { width: 2rem; height: 2rem; flex-shrink: 0; transition: transform .2s ease; } .faq-item__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); } .faq-item__painel { display: none; padding: 0 1.8rem 1.8rem; } .faq-item__painel.is-open { display: block; } .faq-item__painel p { margin: 0; color: var(--color-text-muted); line-height: 1.7; font-size: calc(1.45rem * var(--font-body-scale)); } /* ---------- BARRA DE FILTROS DA COLEÇÃO ---------- */ .colecao-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--color-border); margin-bottom: 2.4rem; } .colecao-barra__contagem { font-size: calc(1.4rem * var(--font-body-scale)); color: var(--color-text-muted); font-weight: 500; } .colecao-barra__ordenar { display: flex; align-items: center; gap: .8rem; } .colecao-barra__ordenar label { font-size: calc(1.4rem * var(--font-body-scale)); color: var(--color-text-muted); } .colecao-barra__ordenar select { padding: .9rem 1.4rem; border: 1px solid var(--color-border); border-radius: var(--button-radius); font-family: inherit; font-size: calc(1.4rem * var(--font-body-scale)); font-weight: 600; background: var(--color-background); color: var(--color-text); cursor: pointer; } /* ---------- TABELA DE PRODUTOS DO CARRINHO ---------- */ .cart__row { display: grid; grid-template-columns: 11rem 1fr auto auto auto; gap: 1.6rem; align-items: center; padding: 1.8rem 0; border-bottom: 1px solid var(--color-border); } .cart__image { width: 11rem; height: 11rem; object-fit: cover; border-radius: var(--card-radius); background: var(--color-background-alt); } .cart__product-title { font-weight: 600; font-size: calc(1.5rem * var(--font-body-scale)); line-height: 1.4; display: block; } .cart__variant { font-size: calc(1.35rem * var(--font-body-scale)); color: var(--color-text-muted); } .cart__remove { background: none; border: 0; cursor: pointer; color: var(--color-text-muted); padding: .6rem; } .cart__remove:hover { color: var(--color-primary); } .cart__remove .icon { width: 2rem; height: 2rem; } .cart__footer { display: flex; justify-content: flex-end; margin-top: 3.2rem; } .cart__totals { width: 100%; max-width: 40rem; display: flex; flex-direction: column; gap: 1rem; padding: 2.4rem; border: 1px solid var(--color-border); border-radius: var(--card-radius); background: var(--color-background-alt); } .cart__total-row { display: flex; justify-content: space-between; align-items: center; font-size: calc(1.5rem * var(--font-body-scale)); } .cart__total-row--final { padding-top: 1.2rem; border-top: 1px solid var(--color-border); font-size: calc(1.9rem * var(--font-body-scale)); font-weight: 700; } .cart__tax-note { margin: 0 0 .6rem; font-size: calc(1.35rem * var(--font-body-scale)); color: var(--color-text-muted); text-align: center; } .cart-drawer__footer:empty { display: none; } @media screen and (max-width: 749px) { .cart__row { grid-template-columns: 8rem 1fr auto; grid-template-areas: "img info remover" "img qtd total"; row-gap: 1rem; } .cart__image { width: 8rem; height: 8rem; } .cart__cell--image { grid-area: img; } .cart__row > .cart__cell:nth-child(2) { grid-area: info; } .cart__row > .cart__cell:nth-child(3) { grid-area: qtd; } .cart__row > .cart__cell:nth-child(4) { grid-area: total; text-align: right; } .cart__row > .cart__cell:nth-child(5) { grid-area: remover; text-align: right; } .cart__footer { justify-content: stretch; } .cart__totals { max-width: none; } } /* ---------- AJUSTES FINAIS ---------- */ /* garante que o conteúdo injetado pelo layout.js não pule */ [data-layout-topo]:empty { min-height: 76px; } /* faixa de economia no produto */ .product__savings { margin-top: .4rem; } /* ---------- VITRINE COM FUNDO ESCURO (home) ---------- O card continua branco (ele já usa --color-background), então só o que fica POR TRÁS muda. Para trocar o tom, mexa em --fundo-escuro. */ .secao-escura { --fundo-escuro: #17141c; /* preto com um toque do roxo da marca */ background-color: var(--fundo-escuro); border-radius: 1.8rem; } @media screen and (max-width: 749px) { .secao-escura { border-radius: 1.4rem; } } .secao-escura .section-heading__title, .secao-escura .collection-list__heading { color: #fff; } .secao-escura .section-heading__link { color: rgba(255, 255, 255, .72); } .secao-escura .section-heading__link:hover { color: #fff; } /* texto solto dentro da faixa escura (ex.: "nenhum produto") */ .secao-escura .empty-state, .secao-escura .rich-text__text { color: rgba(255, 255, 255, .85); } /* ---------- ESPIADA NO PRÓXIMO CARD ---------- Aparece só a pontinha do card seguinte, mostrando que a faixa rola — é o que substitui as setas que saíram. Cada card perde --espiada de largura, e a soma dessa sobra é o que aparece do próximo. Fica proporcional: no celular, onde só cabem 2 cards, a sobra é menor; no computador, com 4, é maior. Diminuir --espiada deixa os cards maiores e a ponta menor. */ .carousel__track { --espiada: 1.4rem; } .carousel__slide { width: calc((100% - 1.2rem) / 2 - var(--espiada)); } /* No celular não há espiada: entram 2 cards inteiros e quem avisa que tem mais é a seta da direita (bloco "SEM SETAS", mais abaixo). */ @media screen and (max-width: 749px) { .carousel__track { --espiada: 0rem; } } @media screen and (min-width: 750px) { .carousel__slide { width: calc((100% - 3.2rem) / 3 - var(--espiada)); } } @media screen and (min-width: 990px) { .carousel__slide { width: calc((100% - 6rem) / 4 - var(--espiada)); } } /* ---------- SETAS ---------- No computador não há seta nenhuma: a espiada do próximo card já mostra que a faixa rola, e ela rola com a roda do mouse. No celular entram 2 cards inteiros, sem espiada, então nada indicaria que existem mais. Por isso volta UMA seta, só a da direita, por cima da borda do segundo card. O JavaScript já a desabilita sozinho quando a faixa chega ao fim. A setinha redonda de dentro do card continua fora: o card inteiro já é clicável pela foto e pelo nome. */ .carousel__button, .card-product__quick-add { display: none !important; } /* O ".carousel" da frente não é enfeite: o base.css escreve estas setas como ".section-featured-collection .carousel__button", que pesa mais que um seletor de uma classe só. Sem ele, só o display pegaria. */ @media screen and (max-width: 749px) { .carousel .carousel__button--next { display: flex !important; right: .4rem; width: 3.2rem; height: 3.2rem; border: 1px solid rgba(0, 0, 0, .1); background: rgba(255, 255, 255, .96); color: var(--color-text); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); opacity: 1; } .carousel .carousel__button--next .icon { width: 1.7rem; height: 1.7rem; } /* no fim da faixa ela some, em vez de só desbotar */ .carousel .carousel__button--next[disabled] { opacity: 0; } } /* ---------- TOPO EM UMA LINHA ---------- Menu, ícone do logo e busca lado a lado. A busca é quem estica; os outros dois têm tamanho fixo. */ .topo { display: flex; align-items: center; gap: 1rem; max-width: var(--page-width); margin: 0 auto; padding: 1rem 1.6rem; background: var(--color-background); } .topo__menu { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text); cursor: pointer; } .topo__menu:hover { background: var(--color-background-alt); } .topo__menu .icon { width: 2.4rem; height: 2.4rem; } .topo__logo { flex: 0 0 auto; display: flex; align-items: center; } .topo__logo img { display: block; height: 4rem; width: auto; max-width: 18rem; /* segura o logo completo de quem ainda não enviou o ícone */ } /* com ícone quadrado enviado, ele fica redondo e pequeno */ .topo__logo--icone img { width: 4rem; height: 4rem; max-width: none; object-fit: cover; border-radius: 50%; } .topo__busca { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-background); transition: border-color .15s ease, box-shadow .15s ease; } .topo__busca:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .14); } .topo__lupa { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; margin-left: 1.3rem; color: var(--color-text-muted); } .topo__campo { flex: 1; min-width: 0; border: 0; background: transparent; padding: .9rem 1rem; font-family: inherit; font-size: 1.6rem; /* 16px: abaixo disso o iPhone dá zoom sozinho */ color: var(--color-text); } .topo__campo:focus { outline: none; } .topo__campo::-webkit-search-cancel-button { -webkit-appearance: none; } .topo__botao { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; margin-right: .3rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-primary); cursor: pointer; } .topo__botao .icon { width: 1.9rem; height: 1.9rem; } .topo__botao:hover { background: var(--color-primary-light); } /* carrinho de enfeite, à direita da busca */ .topo__carrinho { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; color: var(--color-text); pointer-events: none; /* é decoração: nem cursor de clique */ } .topo__carrinho .icon { width: 2.4rem; height: 2.4rem; } /* resultados instantâneos, por cima do conteúdo */ .topo__resultados { position: absolute; top: calc(100% + .6rem); left: 0; right: 0; z-index: 120; max-height: 62vh; overflow-y: auto; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 1.2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); } @media screen and (max-width: 749px) { .topo { gap: .7rem; padding: .8rem 1.2rem; } .topo__menu { width: 3.8rem; height: 3.8rem; } .topo__logo img { height: 3.4rem; max-width: 12rem; } .topo__logo--icone img { width: 3.4rem; height: 3.4rem; } .topo__lupa { margin-left: 1.1rem; width: 1.7rem; height: 1.7rem; } .topo__campo { padding: .8rem .8rem; } .topo__botao { width: 3.2rem; height: 3.2rem; } .topo__carrinho { width: 3.6rem; height: 3.6rem; } .topo__carrinho .icon { width: 2.2rem; height: 2.2rem; } } /* ---------- BARRA DE ATALHOS (abaixo do topo) ---------- No celular rola de lado com o dedo; no computador fica centralizada. A barra de rolagem some, mas o gesto continua funcionando. */ .atalhos { /* dentro do cabeçalho fixo: a borda de baixo já é a do próprio cabeçalho */ border-top: 1px solid var(--color-border); background: var(--color-background); } .atalhos__trilha { display: flex; align-items: center; gap: 2rem; max-width: var(--page-width); margin: 0 auto; padding: .35rem 1.6rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .atalhos__trilha::-webkit-scrollbar { display: none; } .atalhos__item { flex: 0 0 auto; /* não encolhe: prefere rolar a espremer */ font-size: 1.4rem; font-weight: 600; color: var(--color-text); text-decoration: none; white-space: nowrap; padding: 0; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .atalhos__item:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* o atalho em destaque fica na cor da marca e em negrito */ .atalhos__item--destaque { color: var(--color-primary); font-weight: 800; } @media screen and (min-width: 990px) { .atalhos__trilha { justify-content: center; padding: .35rem 3.2rem; } } @media screen and (max-width: 749px) { .atalhos__trilha { gap: 1.8rem; padding: .3rem 1.2rem; } .atalhos__item { font-size: 1.3rem; } } /* ---------- DEPOIMENTOS (página do produto) ---------- */ .section-avaliacoes { padding: 3.2rem 0 1.6rem; border-top: 1px solid var(--color-border); margin-top: 3.2rem; } .avaliacoes__cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-bottom: 2.4rem; } .avaliacoes__titulo { margin: 0; font-size: calc(2.2rem * var(--font-heading-scale, 1)); } .avaliacoes__resumo { display: flex; align-items: center; gap: .9rem; } .avaliacoes__media { font-size: 2.6rem; font-weight: 700; line-height: 1; } .avaliacoes__quantas { font-size: 1.4rem; color: var(--color-text-muted); } .avaliacoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); gap: 1.6rem; list-style: none; margin: 0; padding: 0; } .avaliacao-item { background: var(--color-background-alt); border-radius: 1.2rem; padding: 1.6rem 1.8rem; } .avaliacao-item__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; } .avaliacao-item__autor { font-weight: 700; font-size: 1.5rem; } .avaliacao-item__data { font-size: 1.2rem; color: var(--color-text-muted); white-space: nowrap; } .avaliacao-item__titulo { margin: .8rem 0 .4rem; font-weight: 600; font-size: 1.5rem; } .avaliacao-item__texto { margin: .6rem 0 0; font-size: 1.4rem; line-height: 1.55; color: var(--color-text-muted); } /* as estrelas dentro do depoimento ficam menores que as do topo */ .avaliacao-item .avaliacao__estrela { width: 1.5rem; height: 1.5rem; } /* fotos que o cliente mandou */ .avaliacao-item__fotos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; } .avaliacao-item__fotos a { display: block; width: 7rem; height: 7rem; border-radius: .8rem; overflow: hidden; background: var(--color-background); transition: transform .18s ease; } .avaliacao-item__fotos a:hover { transform: scale(1.05); } .avaliacao-item__fotos img { width: 100%; height: 100%; object-fit: cover; /* recorta para o quadrado, sem deformar */ display: block; } @media screen and (max-width: 749px) { .section-avaliacoes { padding: 2.4rem 0 1.2rem; margin-top: 2.4rem; } .avaliacoes__titulo { font-size: 1.9rem; } .avaliacoes { grid-template-columns: 1fr; gap: 1.2rem; } .avaliacao-item { padding: 1.4rem 1.5rem; } } /* ---------- BANNERS DE PROMOÇÃO (home) ---------- Dois lado a lado e um largo embaixo. Com um banner só, ele ocupa a linha inteira; no celular os dois empilham. */ .section-promos { padding: 2.4rem 0 .6rem; } .promos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; } /* sempre dois por linha, inclusive no celular: empilhados eles ficariam com a largura toda da tela e altos demais. O max-width existe porque estes banners costumam ser imagens pequenas e em pé. Sem ele, numa tela grande cada um esticaria para quase 600px de largura — a imagem fica borrada e o bloco fica altíssimo. */ .promos__item { flex: 1 1 calc(50% - .8rem); /* metade, menos metade do vão */ max-width: 32rem; min-width: 0; display: block; border-radius: 1.2rem; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .promos__item:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); } .promo-larga { display: block; margin-top: 1.6rem; border-radius: 1.2rem; overflow: hidden; } /* a imagem manda na altura; nada de corte nem de esticar */ .promos__item img, .promo-larga img { display: block; width: 100%; height: auto; } @media screen and (max-width: 749px) { .section-promos { padding: 1.6rem 0 .4rem; } .promos { gap: 1.2rem; } .promos__item { flex-basis: calc(50% - .6rem); } /* vão menor no celular */ .promos__item, .promo-larga { border-radius: 1rem; } .promo-larga { margin-top: 1.2rem; } } /* ---------- FAIXA DE BENEFÍCIOS (logo depois do banner) ---------- Ícone + frase + link, separados por uma linha vertical. No celular rola de lado, porque três colunas não cabem numa tela estreita. */ .beneficios { border-bottom: 1px solid var(--color-border); background: var(--color-background); } .beneficios__trilha { display: flex; align-items: stretch; gap: 2.4rem; max-width: var(--page-width); margin: 0 auto; padding: .7rem 1.6rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .beneficios__trilha::-webkit-scrollbar { display: none; } .beneficios__item { flex: 1 1 0; min-width: 20rem; /* abaixo disso prefere rolar a espremer o texto */ display: flex; align-items: center; gap: 1rem; } .beneficios__icone { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); } .beneficios__icone .icon { width: 1.6rem; height: 1.6rem; } .beneficios__texto { min-width: 0; } .beneficios__frase { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: var(--color-text); } .beneficios__link, .beneficios__apoio { display: inline-block; margin-top: .1rem; font-size: 1rem; color: var(--color-primary); text-decoration: none; } .beneficios__link:hover { text-decoration: underline; } .beneficios__apoio { color: var(--color-text-muted); } .beneficios__linha { flex: 0 0 1px; align-self: stretch; background: var(--color-border); } /* No celular: exatamente 2 blocos por tela, ocupando toda a largura. A conta desconta o vão entre eles e a linha divisória, senão o segundo bloco sairia da tela. Os outros ficam para a rolagem. */ @media screen and (max-width: 989px) { .beneficios__trilha { gap: .7rem; padding: .45rem .9rem; } .beneficios__item { flex: 0 0 calc((100% - 1.5rem) / 2); /* 2 vãos de .7rem + 1px da linha */ min-width: 0; gap: .6rem; } .beneficios__icone { width: 2.5rem; height: 2.5rem; } .beneficios__icone .icon { width: 1.4rem; height: 1.5rem; } .beneficios__frase { font-size: .95rem; line-height: 1.2; } .beneficios__link, .beneficios__apoio { margin-top: -0.5rem; font-size: 1rem; } } /* ---------- CATEGORIAS EM DESTAQUE (home) ---------- Ícone + nome, em grade que quebra sozinha conforme a largura. */ .section-categorias { padding: 2rem 0 1rem; } .categorias__titulo { margin: 0 0 1.4rem; font-size: calc(2rem * var(--font-heading-scale, 1)); text-align: center; } /* flex em vez de grade: com poucas categorias elas ficam centralizadas, com muitas quebram em linhas — sem sobrar um vão de um lado só. A largura sai de uma conta: quantas cabem por linha, descontando os espaços entre elas. Para mudar a quantidade, troque os dois números de --por-linha e o resto se ajusta sozinho. */ .categorias { --por-linha: 8; --vao: 1.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem var(--vao); list-style: none; margin: 0; padding: 0; } .categorias__item { width: calc((100% - (var(--por-linha) - 1) * var(--vao)) / var(--por-linha)); } .categorias__link { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-decoration: none; color: var(--color-text); } /* O max-width é o freio do tamanho: sem ele a figura cresce até ocupar a coluna inteira, e em tela larga cada categoria vira um quadrado enorme. Para aumentar ou diminuir as fotos, mexa só neste número. */ .categorias__figura { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 10rem; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 1.2rem; background: var(--color-background); transition: transform .18s ease, box-shadow .18s ease; } .categorias__figura img { width: 100%; height: 100%; object-fit: contain; /* a foto aparece inteira, sem cortar nas bordas */ } .categorias__link:hover .categorias__figura { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .10); } .categorias__nome { font-size: .95rem; font-weight: 600; line-height: 1.3; text-align: center; /* nome comprido corta em duas linhas em vez de esticar a coluna */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* telas médias: 6 por linha */ @media screen and (max-width: 989px) { .categorias { --por-linha: 6; } } /* celular: 4 por linha. Com 8 aqui cada figura ficaria com ~40px, pequena demais para o dedo e para reconhecer a foto. */ @media screen and (max-width: 749px) { .section-categorias { padding: 1.4rem 0 .5rem; } .categorias__titulo { font-size: 1.7rem; margin-bottom: 1.1rem; } .categorias { --por-linha: 4; --vao: 1rem; gap: 1.1rem var(--vao); } .categorias__figura { border-radius: 1rem; max-width: 6.4rem; } .categorias__nome { font-size: .9rem; } } /* ---------- CLIQUE NO LOGO (celular) ---------- No celular o logo fica centralizado com position:absolute e z-index 1, enquanto os dois blocos das laterais têm z-index 3. Como eles se esticam pela largura toda, ficavam POR CIMA do logo e engoliam o toque: quem tentava voltar para a home tocando no logo não saía do lugar. Conserto em duas frentes, para não depender de uma só: 1. as laterais deixam o toque passar; só os botões dentro delas recebem; 2. o logo sobe acima delas. */ @media screen and (max-width: 989px) { .header__left, .header__icons { pointer-events: none; } .header__left > *, .header__icons > * { pointer-events: auto; } .header__heading { z-index: 4; } } /* ---------- MENU DO CELULAR EM TELA CHEIA ---------- O padrao do tema deixava a gaveta com 88% da largura, entao aparecia uma faixa da loja do lado. No celular ela passa a ocupar tudo. */ @media screen and (max-width: 749px) { .menu-drawer__panel { width: 100%; max-width: none; box-shadow: none; /* sem nada atras, a sombra nao faz sentido */ } } /* ---------- BARRA DE COMPRA FIXA (pagina do produto) ---------- Aparece quando o botao de comprar de cima sai da tela. */ .barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; /* acima do botao do WhatsApp, que usa 80 */ background: var(--color-background); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 18px rgba(0, 0, 0, .10); padding: .9rem 1.6rem; padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .22s ease; } .barra-compra.is-visible { transform: translateY(0); } .barra-compra__interno { max-width: var(--page-width); margin: 0 auto; display: flex; align-items: center; gap: 1.2rem; } .barra-compra__foto { width: 5.2rem; height: 5.2rem; object-fit: cover; border-radius: .8rem; background: var(--color-background-alt); flex: 0 0 auto; } .barra-compra__info { display: flex; flex-direction: column; min-width: 0; /* deixa o titulo cortar em vez de esticar */ flex: 1; } .barra-compra__titulo { font-size: 1.3rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barra-compra__preco { font-size: 1.9rem; font-weight: 700; color: var(--color-text); line-height: 1.2; } .barra-compra__parcela { font-size: 1.2rem; color: var(--color-text-muted); } .barra-compra__parcela strong { color: var(--color-primary); } .barra-compra__botao { flex: 0 0 auto; min-width: 20rem; } /* enquanto a barra esta na tela, o botao do WhatsApp sobe para nao ficar por baixo */ body.barra-compra-ativa .whatsapp-flutuante { bottom: 9.5rem; } /* espaco no fim da pagina para a barra nao tapar o ultimo conteudo */ body.barra-compra-ativa { padding-bottom: 8rem; } @media screen and (max-width: 749px) { .barra-compra { padding-left: 1.2rem; padding-right: 1.2rem; } .barra-compra__interno { gap: 1rem; } .barra-compra__foto { display: none; } /* no celular o espaco e do preco */ .barra-compra__titulo { display: none; } .barra-compra__preco { font-size: 1.8rem; } .barra-compra__botao { min-width: 0; padding-left: 2rem; padding-right: 2rem; } } /* quem prefere menos animacao no sistema nao ve o deslize */ @media (prefers-reduced-motion: reduce) { .barra-compra { transition: none; } } /* ---------- GARANTIAS DA PAGINA DE PRODUTO ---------- */ .garantias { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .8rem; } /* faixa de cima: "Pago seguro y rapido" + as bandeiras */ .garantias__pagamento { background: var(--color-background-alt); border-radius: .9rem; padding: 1.1rem 1rem .9rem; text-align: center; } .garantias__titulo { margin: 0 0 .8rem; font-size: 1.1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); } /* as bandeiras vem de partes/bandeiras.php, entao so ajusto tamanho e alinhamento */ .garantias__pagamento .payment-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; } .garantias__pagamento .payment-icon__svg { width: 4.4rem; height: 2.8rem; display: block; } /* cada linha: icone + texto */ .garantias__item { display: flex; align-items: center; gap: 1rem; background: var(--color-background-alt); border-radius: .9rem; padding: .9rem 1.2rem; } .garantias__icone { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .8rem; background: var(--color-background); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); } .garantias__icone .icon { width: 1.7rem; height: 1.7rem; color: var(--color-primary); } .garantias__texto { display: flex; flex-direction: column; gap: .1rem; font-size: 1.3rem; line-height: 1.35; color: var(--color-text-muted); } .garantias__texto strong { font-size: 1.4rem; font-weight: 700; color: var(--color-text); } .garantias__destaque { font-weight: 600; color: var(--color-primary); } @media screen and (max-width: 749px) { .garantias__item { padding: .8rem 1rem; gap: .9rem; } .garantias__icone { width: 2.8rem; height: 2.8rem; } .garantias__pagamento .payment-icon__svg { width: 4rem; height: 2.5rem; } .garantias__texto { font-size: 1.25rem; } } /* ============================================================ RODAPÉ ------------------------------------------------------------ Quatro andares, de cima para baixo: 1. faixa colorida com o logo e as redes sociais 2. atendimento (telefone, e-mail, WhatsApp) e links legais 3. newsletter à esquerda e colunas de links à direita 4. copyright, letra miúda e bandeiras de pagamento Cada andar some sozinho quando não há o que mostrar. ============================================================ */ .rodape { /* ---------- cor do rodapé ---------- Tudo preto. A diferença entre o rótulo e o dado não vem da cor, e sim do peso e do tamanho: rótulo fino e menor, dado em negrito. Para dar cor a alguma parte de novo, é só mexer aqui. */ --rodape-apoio: var(--color-text); /* rótulos, links e copyright */ --rodape-horario: var(--color-text); /* faixas de horário */ margin-top: 4rem; background: var(--color-background); border-top: 1px solid var(--color-border); } /* ---------- 1. o logo ---------- Sem faixa colorida: o logo fica direto no branco do rodapé, alinhado à esquerda com o resto do conteúdo. */ .rodape__marca-linha { display: flex; align-items: center; justify-content: flex-start; padding-block: 1.8rem 0; } .rodape__logo { display: flex; align-items: center; text-decoration: none; } .rodape__logo img { display: block; height: 3.4rem; width: auto; } .rodape__logo-texto { font-size: 1.8rem; font-weight: 800; letter-spacing: .02em; color: var(--color-text); } /* ---------- 2. atendimento ---------- */ /* Bloco de atendimento: rótulo pequeno em cima, dado em destaque embaixo e os horários por último. No computador ficam lado a lado; no celular viram uma coluna só, um bloco embaixo do outro. */ .rodape__atencao { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2.2rem 4.4rem; padding: 1.8rem 0 2rem; } .rodape__atencao-bloco { display: flex; flex-direction: column; } /* rótulo: fino, pequeno, azul calmo — é só a legenda do dado */ .rodape__rotulo { margin: 0; font-size: 1.15rem; font-weight: 400; line-height: 1.5; color: var(--rodape-apoio); } /* dado: em negrito, é o que a pessoa procura */ .rodape__destaque, .rodape__valor { font-size: 1.3rem; font-weight: 700; line-height: 1.4; color: var(--color-text); text-decoration: none; word-break: break-word; } .rodape__destaque:hover, .rodape__valor:hover { text-decoration: underline; } .rodape__horario { font-size: 1.1rem; line-height: 1.7; color: var(--rodape-horario); opacity: .72; /* preto também, só mais leve que o rótulo */ } /* ---------- links legais ---------- */ .rodape__legais { display: flex; flex-wrap: wrap; gap: 1rem 2.8rem; padding-bottom: 2.2rem; } .rodape__legais a { font-size: 1.15rem; color: var(--rodape-apoio); text-decoration: none; } .rodape__legais a:hover { text-decoration: underline; } .rodape__linha { height: 0; margin: 0; border: 0; border-top: 1px solid var(--color-border); } /* ---------- 3. newsletter e colunas ---------- */ .rodape__meio { display: flex; flex-wrap: wrap; gap: 3.2rem 4rem; padding: 3rem 0; } .rodape__news { flex: 0 0 28rem; max-width: 100%; } .rodape__news-titulo { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 400; color: var(--rodape-apoio); } .rodape__news-form { display: flex; gap: .8rem; } .rodape__news-campo { flex: 1 1 auto; min-width: 0; height: 3.4rem; padding: 0 1.1rem; border: 1px solid var(--color-border); border-radius: .4rem; background: var(--color-background); color: var(--color-text); font-family: inherit; font-size: 1.15rem; } .rodape__news-campo:focus { outline: none; border-color: var(--color-primary); } .rodape__news-botao { flex: 0 0 auto; height: 3.4rem; padding: 0 1.2rem; border: 0; border-radius: .4rem; background: var(--color-primary-dark); color: var(--color-primary-contrast); font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background-color .2s ease; } .rodape__news-botao:hover { background: var(--color-primary-dark); } .rodape__news-botao[disabled] { opacity: .6; cursor: default; } .rodape__news-aviso { margin: .8rem 0 0; font-size: 1.3rem; color: var(--color-success); } .rodape__news-aviso[data-erro="1"] { color: #C0392B; } .rodape__pagamento-titulo { display: block; margin-bottom: 1rem; font-size: 1.4rem; font-weight: 700; color: var(--color-text); } /* ---------- 4. fim ---------- */ .rodape__fim { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem 4rem; padding: 2.4rem 0 3.2rem; } .rodape__fim-texto { flex: 1 1 42rem; min-width: 0; } .rodape__copyright { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--rodape-apoio); } /* razão social e endereço: mesma linha do copyright, mais claro */ .rodape__empresa { opacity: .75; } /* A letra miúda ficava cinza claro a 11,5px. Nesse tamanho o navegador pinta as bordas das letras com franjas coloridas (antialiasing de subpixel) e o texto puxa para o alaranjado. Um pouco maior e no azul do rodapé, isso some. */ .rodape__aviso { margin: 1rem 0 0; font-size: 1.25rem; line-height: 1.7; color: var(--rodape-apoio); opacity: .62; } .rodape__fim-lado { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1.6rem; } /* selos: imagens que a loja enviar pelo painel (ex.: Data Fiscal) */ .rodape__selos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; } .rodape__selos img { display: block; height: 5rem; width: auto; max-width: 12rem; object-fit: contain; } .rodape__pagamento { flex: 0 0 auto; } .rodape__pagamento .payment-icons { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; } /* ---------- celular ---------- */ @media screen and (max-width: 749px) { .rodape { margin-top: 3rem; } .rodape__marca-linha { padding-block: 1.6rem 0; } .rodape__logo img { height: 3rem; } .rodape__logo-texto { font-size: 1.6rem; } /* uma coluna só: cada bloco de contato embaixo do outro, como no celular de qualquer loja grande. Sem isso eles ficam lado a lado e o texto espreme. */ .rodape__atencao { flex-direction: column; flex-wrap: nowrap; gap: 1.8rem; padding: 2rem 0 1.8rem; } .rodape__atencao-bloco { width: 100%; } .rodape__legais { flex-direction: column; gap: 1.4rem; padding-bottom: 2rem; } .rodape__meio { gap: 2rem; padding: 2rem 0; } .rodape__news { flex: 1 1 100%; } .rodape__fim { gap: 1.6rem; padding: 2rem 0 2.8rem; } .rodape__fim-texto { flex: 1 1 100%; } .rodape__fim-lado { flex: 1 1 100%; gap: 1.2rem; } .rodape__selos img { height: 4rem; max-width: 9rem; } } /* ============================================================ DEPOIMENTOS DO PRODUTO ------------------------------------------------------------ Duas partes: 1. o resumo — nota grande à esquerda, barrinhas à direita 2. os cartões, em duas colunas, com a foto em cima As colunas usam "columns" do CSS em vez de grade: assim cada cartão fica com a altura da sua própria foto e as duas colunas se fecham sozinhas, sem buracos. ============================================================ */ .section-avaliacoes { padding: 4rem 0 1rem; } /* ---------- 1. resumo ---------- */ .resumo-notas { display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem 4rem; margin-bottom: 3.2rem; } .resumo-notas__media { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 0 0 auto; } .resumo-notas__numero { font-size: 5.6rem; font-weight: 700; line-height: 1; color: var(--color-text); } .resumo-notas__media .avaliacao { margin-top: 0; } .resumo-notas__media .avaliacao__estrela { width: 2.2rem; height: 2.2rem; } .resumo-notas__media .avaliacao__total { display: none; } .resumo-notas__quantas { font-size: 1.5rem; color: var(--color-text-muted); } .resumo-notas__risco { flex: 0 0 2px; align-self: stretch; background: var(--color-border); } .resumo-notas__barras { flex: 1 1 32rem; display: flex; flex-direction: column; gap: .6rem; max-width: 50rem; } .resumo-notas__linha { display: flex; align-items: center; gap: 1.2rem; } .resumo-notas__estrela { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; min-width: 3rem; font-size: 1.4rem; color: var(--color-text-muted); } .resumo-notas__estrela .avaliacao__estrela { width: 1.5rem; height: 1.5rem; fill: var(--color-star); } .resumo-notas__trilho { position: relative; flex: 1 1 auto; height: 1rem; border-radius: 999px; background: rgba(0, 0, 0, .09); overflow: hidden; } .resumo-notas__preenchido { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--color-star); } .resumo-notas__total { flex: 0 0 5rem; font-size: 1.4rem; color: var(--color-text-muted); } /* ---------- 2. cartões ---------- */ .depoimentos { columns: 2; column-gap: 1.6rem; } .depoimento { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; /* navegadores antigos */ display: inline-block; /* sem isto o Safari corta o cartão */ width: 100%; margin-bottom: 1.6rem; border-radius: var(--card-radius); background: var(--color-background); box-shadow: 0 12px 28px rgba(0, 0, 0, .13), 0 2px 4px rgba(0, 0, 0, .05); overflow: hidden; } /* Faixa de fotos no alto do cartão. Com uma foto só parece uma imagem comum; com várias, desliza de lado e cada uma para no lugar certo. O "stretch" deixa todas com a mesma altura, a da mais alta, então nenhuma sai deformada nem deixa um degrau na faixa. */ .depoimento__fotos { position: relative; display: flex; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .depoimento__fotos::-webkit-scrollbar { display: none; } .depoimento__foto { flex: 0 0 100%; display: block; scroll-snap-align: start; max-height: 40rem; } .depoimento__foto img { display: block; width: 100%; height: 100%; max-height: 40rem; object-fit: cover; } /* aviso discreto de que tem mais de uma foto para deslizar */ .depoimento__conta { position: absolute; top: .8rem; right: .8rem; padding: .2rem .7rem; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.1rem; font-weight: 600; pointer-events: none; } .depoimento__corpo { padding: 1.4rem 1.4rem 2rem; } .depoimento__corpo .avaliacao { justify-content: flex-start; width: auto; margin: 0 0 .8rem; } .depoimento__corpo .avaliacao__estrela { width: 1.7rem; height: 1.7rem; } .depoimento__corpo .avaliacao__total { display: none; } .depoimento__autor { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--color-text); } .depoimento__selo { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; fill: #6B7280; stroke: none; } .depoimento__titulo { margin: .6rem 0 0; font-size: 1.4rem; font-weight: 600; } /* quatro linhas e corta; o botão abre o resto */ .depoimento__texto { margin: .8rem 0 0; font-size: 1.45rem; line-height: 1.5; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .depoimento__texto.is-aberto { -webkit-line-clamp: unset; overflow: visible; } .depoimento__mais { margin-top: .8rem; padding: 0; border: 0; background: none; font-family: inherit; font-size: 1.4rem; color: rgba(0, 0, 0, .5); cursor: pointer; } .depoimento__mais:hover { color: var(--color-text); } @media screen and (min-width: 990px) { .depoimentos { columns: 3; column-gap: 2rem; } .depoimento { margin-bottom: 2rem; } } @media screen and (max-width: 749px) { .section-avaliacoes { padding: 3rem 0 .5rem; } .resumo-notas { gap: 1.8rem 2.4rem; margin-bottom: 2.4rem; } .resumo-notas__numero { font-size: 4.4rem; } .resumo-notas__risco { display: none; } .resumo-notas__barras { flex: 1 1 100%; max-width: none; } /* No celular a nota fica sozinha na linha: ocupando a largura toda ela se centraliza, em vez de ficar encostada na esquerda com um vazio enorme do lado. */ .resumo-notas__media { width: 100%; } .depoimentos { column-gap: 1.2rem; } .depoimento { margin-bottom: 1.2rem; } .depoimento__corpo { padding: 1.2rem 1.2rem 1.6rem; } .depoimento__texto { font-size: 1.3rem; } }