/* ========================================================================== Sistema de design do site — tema escuro com vidro fosco. Cores de marca, fontes, raio e largura vêm do painel (injetadas como variáveis CSS no por templates/layout.php). Nunca escreva um valor de cor de marca aqui: use var(--...), senão o cliente perde o controle. As únicas cores literais neste arquivo são branco e preto com transparência (linhas, vidros e sombras). Elas não são identidade visual, são a espessura das bordas do tema escuro — e precisam acompanhar qualquer cor de fundo que o cliente escolher, o que um valor fixo do painel não faria. Layout mobile-first: o padrão é uma coluna, e os breakpoints só ampliam. ========================================================================== */ :root { --vidro: rgba(255, 255, 255, .02); --vidro-forte: rgba(255, 255, 255, .04); --vidro-max: rgba(255, 255, 255, .06); --borda: rgba(255, 255, 255, .06); --borda-forte: rgba(255, 255, 255, .12); --sombra: 0 24px 48px -28px rgba(0, 0, 0, .8); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--cor-fundo); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--fonte-corpo); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.65; color: var(--cor-texto); background: var(--cor-fundo); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* O rodapé fica no fim mesmo em páginas curtas (404, post sem conteúdo). */ min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1; } ::selection { background: var(--cor-primaria); color: #fff; } h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 300; /* o site é de peso leve; o destaque vem do .destaque */ line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; color: #fff; } h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1.05; } h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3rem); } h3 { font-size: clamp(1.15rem, 1.05rem + .55vw, 1.5rem); font-weight: 600; } h4 { font-size: 1.05rem; font-weight: 600; } /* Trecho destacado dentro de um título: outra fonte, em negrito, na cor da marca. Escrito no painel como **texto entre asteriscos**. */ .destaque { font-family: var(--fonte-destaque); font-weight: 700; color: var(--cor-primaria-escura); } p { margin: 0 0 1em; } img, video, iframe, svg { max-width: 100%; height: auto; display: block; } a { color: var(--cor-primaria-clara); text-decoration: none; transition: color .2s ease; } a:hover { color: #fff; } ul, ol { padding-left: 1.2em; } strong { color: #fff; font-weight: 600; } small { font-size: .85em; } :focus-visible { outline: 2px solid var(--cor-primaria-clara); outline-offset: 3px; border-radius: 6px; } .pular { position: absolute; left: -9999px; } .pular:focus { left: 1rem; top: 1rem; z-index: 999; background: var(--cor-primaria); color: #fff; padding: .75rem 1rem; border-radius: 8px; } .container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); } .container--estreito { max-width: 880px; } .centro { text-align: center; } .ico { flex: 0 0 auto; } .ico--texto { font-size: 1.5rem; line-height: 1; } /* -------------------------------------------------------- brilhos de fundo */ .brilhos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .brilhos span { position: absolute; border-radius: 50%; opacity: .10; } .brilhos__a { top: -10%; left: -10%; width: 50%; height: 50%; background: var(--cor-primaria); filter: blur(120px); } .brilhos__b { bottom: -10%; right: -10%; width: 40%; height: 40%; background: var(--cor-primaria-clara); filter: blur(100px); } .topo, main, .rodape, .zap, .ao-topo { position: relative; z-index: 1; } /* ---------------------------------------------------------------- seções */ .secao { position: relative; background-size: cover; background-position: center; } .espaco-normal { padding: clamp(3.5rem, 8vw, 6rem) 0; } .espaco-compacto { padding: clamp(2rem, 4vw, 3rem) 0; } .espaco-amplo { padding: clamp(4.5rem, 11vw, 8rem) 0; } .espaco-nenhum { padding: 0; } .fundo-claro { background-color: transparent; } .fundo-alt { background-color: var(--vidro); backdrop-filter: blur(12px); } .fundo-escuro { background-color: var(--cor-escuro); } .fundo-primaria { background-color: var(--cor-primaria); color: #fff; } .fundo-primaria .secao__sub, .fundo-primaria p { opacity: .95; } .fundo-imagem { color: #fff; } .fundo-imagem::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.85)); } .fundo-imagem > .container { position: relative; z-index: 1; } .secao--borda-topo { border-top: 1px solid var(--borda); } /* Mancha de luz dentro de uma seção específica. */ .brilho-centro::after, .brilho-topo::after { content: ""; position: absolute; left: 50%; translate: -50% 0; width: min(600px, 90%); height: 400px; background: var(--cor-primaria); opacity: .05; border-radius: 50%; filter: blur(140px); pointer-events: none; } .brilho-centro::after { top: 50%; translate: -50% -50%; } .brilho-topo::after { top: 0; } .secao > .container { position: relative; z-index: 1; } .secao__cabecalho { max-width: 780px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; } .secao__cabecalho h2 { margin-bottom: .35em; } .secao__sub { color: var(--cor-texto-suave); font-size: 1.02em; line-height: 1.7; margin: 0; } .secao__icone { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.5rem; color: var(--cor-texto-suave); background: var(--vidro); border: 1px solid var(--borda-forte); border-radius: 50%; } /* Selo em pílula com ponto piscante (hero e avaliações). */ .selo { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem; margin: 0 0 1.5rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-primaria-clara); background: color-mix(in srgb, var(--cor-primaria) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cor-primaria) 22%, transparent); border-radius: 999px; } .selo--claro { color: var(--cor-texto); text-transform: none; letter-spacing: 0; font-size: .75rem; padding: .4rem .9rem; background: var(--vidro-forte); border-color: var(--borda-forte); } .selo__ponto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cor-primaria-escura); animation: pulsar 2s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes pulsar { 0%, 100% { opacity: 1 } 50% { opacity: .35 } } /* Linha curta acima do título, com traço azul. */ .sobretitulo { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-primaria-escura); } .sobretitulo__traco { width: 3rem; height: 1px; background: var(--cor-primaria); } /* ---------------------------------------------------------------- botões */ .botoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .botoes--centro { justify-content: center; } .botoes--afastado { margin-top: clamp(2.5rem, 5vw, 4rem); } .botoes--grandes .botao { padding: 1.1rem 2.5rem; font-size: 1.05rem; } .botao { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 2rem; border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; min-height: 48px; /* alvo de toque confortável no celular */ } .botao:hover { transform: translateY(-3px); } .botao--primario { background: var(--cor-primaria); color: #fff; box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--cor-primaria) 60%, transparent); } .botao--primario:hover { background: var(--cor-primaria-escura); color: #fff; } .botao--secundario { background: var(--vidro-forte); color: #fff; border-color: var(--borda-forte); } .botao--secundario:hover { background: var(--vidro-max); color: #fff; } .botao--claro { background: #fff; color: #000; padding: .7rem 1.4rem; min-height: 44px; } .botao--claro:hover { background: rgba(255,255,255,.85); color: #000; transform: none; } .botao--whatsapp { background: var(--cor-whatsapp); color: #fff; box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--cor-whatsapp) 60%, transparent); } .botao--whatsapp:hover { background: color-mix(in srgb, var(--cor-whatsapp) 85%, #000); color: #fff; } /* Link com cara de texto, mas ainda com 44px de altura: no celular o dedo precisa de alvo mesmo quando o elemento não parece um botão. */ .botao--texto { padding: .7rem 0; min-height: 44px; color: var(--cor-primaria-clara); font-weight: 500; border: 0; justify-content: flex-start; } .botao--texto:hover { color: #fff; transform: none; } .fundo-primaria .botao--primario { background: #fff; color: var(--cor-primaria); box-shadow: none; } /* No celular um botão por linha lê melhor do que dois espremidos. */ @media (max-width: 479px) { .botoes { flex-direction: column; } .botoes .botao { width: 100%; } } /* ---------------------------------------------------------------- topo */ .topo { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1.25rem 0; background: transparent; border-bottom: 1px solid transparent; transition: padding .3s ease, background-color .3s ease, border-color .3s ease; } .topo--fixo { padding: .65rem 0; background: color-mix(in srgb, var(--cor-fundo) 90%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--borda); } /* O conteúdo começa abaixo do topo fixo. Páginas internas precisam do respiro; o hero de tela cheia já reserva o seu próprio. */ .is-interna main { padding-top: clamp(6rem, 12vw, 9rem); } .topo__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .topo__logo { display: flex; align-items: center; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem; color: #fff; } .topo__logo img { height: 56px; width: auto; opacity: .9; /* O logo original é colorido; o topo é escuro. Isto o deixa branco sólido. */ filter: brightness(0) invert(1); transition: height .3s ease; } .topo--fixo .topo__logo img { height: 48px; } @media (min-width: 900px) { .topo__logo img { height: 88px; } .topo--fixo .topo__logo img { height: 68px; } } .topo__menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 10px; background: none; border: 0; cursor: pointer; color: var(--cor-texto); } .topo__menu-btn span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .topo__menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .topo__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .topo__menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .topo__nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; padding: .5rem clamp(1rem, 4vw, 2rem) 1.5rem; background: var(--cor-fundo); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); box-shadow: var(--sombra); max-height: calc(100dvh - 100%); overflow-y: auto; } .topo__nav.aberto { display: flex; } .topo__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .topo__nav > ul > li > a { display: block; padding: .85rem .25rem; font-size: 1rem; font-weight: 500; color: var(--cor-texto); border-radius: 8px; } .topo__nav > ul > li > a:hover { color: #fff; background: var(--vidro-forte); padding-left: .75rem; } .submenu { padding-left: 1rem; } .submenu a { display: block; padding: .6rem .25rem; color: var(--cor-texto-suave); } .topo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); } .topo__rede { display: inline-flex; align-items: center; gap: .5rem; color: var(--cor-texto-suave); font-size: .9rem; font-weight: 500; padding: .4rem 0; } .topo__rede:hover { color: #fff; } @media (min-width: 900px) { .topo__menu-btn { display: none; } .topo__nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 2rem; padding: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; } .topo__nav ul { flex-direction: row; align-items: center; gap: 2rem; } .topo__nav > ul > li { position: relative; } .topo__nav > ul > li > a { padding: .35rem 0; font-size: .875rem; font-weight: 500; color: var(--cor-texto-suave); } .topo__nav > ul > li > a:hover { background: none; padding-left: 0; color: #fff; } .submenu { position: absolute; top: 100%; left: -1rem; min-width: 230px; display: none; flex-direction: column; padding: .5rem; background: var(--cor-fundo); border: 1px solid var(--borda); border-radius: calc(var(--raio) * .6); box-shadow: var(--sombra); } .tem-filhos:hover .submenu, .tem-filhos:focus-within .submenu { display: flex; } .topo__acoes { margin: 0; padding: 0 0 0 1.5rem; border-top: 0; border-left: 1px solid var(--borda-forte); gap: 1rem; } .topo__rede-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* ---------------------------------------------------------------- hero */ .secao--hero { padding-top: clamp(8rem, 18vw, 12rem); padding-bottom: clamp(4rem, 9vw, 8rem); } .hero { position: relative; display: grid; gap: 3rem; align-items: center; } .hero--cheia { min-height: min(78vh, 820px); align-content: center; } .hero--compacta { min-height: 0; } /* A imagem de fundo sangra a seção inteira, não só a coluna de texto: ela mora dentro do .container, então sai dele com a largura da janela. O overflow-x escondido do body impede que os 100vw criem barra de rolagem horizontal. */ .hero__fundo { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; z-index: 0; pointer-events: none; } .hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: right; opacity: .10; filter: grayscale(1); } .hero__texto { position: relative; z-index: 1; max-width: 56rem; } .hero--centro .hero__texto { text-align: center; margin: 0 auto; } .hero--centro .selo, .hero--centro .botoes { justify-content: center; } .hero--centro .selo { display: inline-flex; } .hero h1 { margin-bottom: .35em; } .hero__sub { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); color: var(--cor-texto-suave); max-width: 40rem; line-height: 1.7; } .hero--centro .hero__sub { margin-left: auto; margin-right: auto; } .hero__imagem img { border-radius: var(--raio); box-shadow: var(--sombra); width: 100%; } @media (min-width: 900px) { .hero--duplo { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } .hero--duplo .hero__texto { text-align: left; margin: 0; } .hero--duplo .botoes, .hero--duplo .selo { justify-content: flex-start; } } /* ---------------------------------------------------------------- grades */ .grade { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 1fr; } @media (min-width: 640px) { .grade--2, .grade--3, .grade--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .grade--3 { grid-template-columns: repeat(3, 1fr); } .grade--4 { grid-template-columns: repeat(4, 1fr); } } /* ---------------------------------------------------------------- cards */ .card { display: flex; flex-direction: column; color: inherit; background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio); transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease; } .card__corpo { padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; flex: 1; } /* h2 e h3 aparecem no mesmo lugar conforme o card seja ou não o título de uma listagem; o nível muda por semântica, o tamanho não deve mudar junto. */ .card h2, .card h3 { margin-bottom: .4em; color: #fff; font-size: clamp(1.15rem, 1.05rem + .55vw, 1.4rem); font-weight: 600; } .card__sub { color: var(--cor-primaria-clara); font-size: .9rem; font-weight: 500; margin: 0 0 1rem; } .card__texto { color: var(--cor-texto-fraco); font-size: .92rem; line-height: 1.7; margin: 0; } a.card { text-decoration: none; } a.card:hover { background: var(--vidro-forte); border-color: color-mix(in srgb, var(--cor-primaria) 30%, transparent); transform: translateY(-4px); } /* Ícone dentro de quadrado arredondado (bloco "diferenciais"). */ .card__icone { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 2rem; color: var(--cor-primaria-clara); background: color-mix(in srgb, var(--cor-primaria) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cor-primaria) 20%, transparent); border-radius: calc(var(--raio) * .7); transition: transform .3s ease, background-color .3s ease, color .3s ease; } .card--icone:hover .card__icone { transform: scale(1.1); background: var(--cor-primaria); color: #fff; } /* Card com foto grande no topo (bloco "serviços"). */ .card--imagem { background: var(--cor-escuro); border-radius: calc(var(--raio) * 1.25); overflow: hidden; } .card--imagem:hover { box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--cor-primaria) 45%, transparent); } .card__foto { position: relative; overflow: hidden; } .card--imagem .card__foto { aspect-ratio: 4 / 3; } .card--imagem .card__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--cor-escuro), transparent 55%); } .card__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s ease, transform .6s ease; } .card--imagem:hover .card__foto img { filter: none; transform: scale(1.05); } .card--imagem .card__corpo { position: relative; margin-top: -2.5rem; } .card__seta { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1.5rem; color: #fff; background: var(--cor-primaria); border: 4px solid var(--cor-escuro); border-radius: 50%; transition: background-color .25s ease, rotate .25s ease; rotate: -45deg; } .card--imagem:hover .card__seta { background: var(--cor-primaria-escura); rotate: 0deg; } .card__link { margin-top: auto; padding-top: 1.25rem; color: var(--cor-texto-suave); font-size: .9rem; transition: color .25s ease; } .card--imagem:hover .card__link { color: #fff; } /* Card de post do blog. */ .card--card .card__foto { height: 14rem; } .card--card .card__foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.5); mix-blend-mode: multiply; transition: background-color .5s ease; } .card--card:hover .card__foto::after { background: transparent; } .card--card:hover .card__foto img { filter: none; transform: scale(1.05); } .card--card h3 { transition: color .25s ease; } .card--card:hover h3 { color: var(--cor-primaria-clara); } /* Card com foto redonda (blog na home). */ .cards--circular { text-align: center; } .card--circular { align-items: center; border-radius: calc(var(--raio) * 1.25); } .card--circular .card__foto { width: 8rem; height: 8rem; margin: 2rem auto 0; border: 2px solid var(--borda-forte); border-radius: 50%; } .card--circular .card__foto img { border-radius: 50%; filter: grayscale(1); } .card--circular:hover .card__foto img { filter: none; transform: scale(1.05); } .card--circular .card__corpo { align-items: center; } .card--circular:hover h3 { color: var(--cor-primaria-clara); } @media (min-width: 768px) { .card--circular .card__foto { width: 10rem; height: 10rem; } } /* ------------------------------------------------------- texto + imagem */ .texto-img { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; } .texto-img__img { position: relative; } /* Bloco de cor deslocado atrás da foto, como no site anterior. */ .texto-img__img::before { content: ""; position: absolute; inset: 0; z-index: 0; translate: 1rem 1rem; border-radius: var(--raio); background: color-mix(in srgb, var(--cor-primaria) 10%, transparent); } .texto-img__img img { position: relative; z-index: 1; width: 100%; border-radius: var(--raio); border: 1px solid var(--borda); box-shadow: var(--sombra); filter: grayscale(1); transition: filter .7s ease; } .texto-img__img img:hover { filter: none; } @media (min-width: 900px) { .texto-img--direita, .texto-img--esquerda { grid-template-columns: 1fr 1fr; } .texto-img--esquerda .texto-img__texto { order: 2; } .texto-img__img img { aspect-ratio: 1; object-fit: cover; } } /* ------------------------------------------------------ conteúdo redigido */ .conteudo { color: var(--cor-texto-suave); } .conteudo > :last-child { margin-bottom: 0; } .conteudo h2, .conteudo h3, .conteudo h4 { color: #fff; margin-top: 1.75em; } .conteudo h2:first-child, .conteudo h3:first-child { margin-top: 0; } .conteudo a { text-decoration: underline; text-underline-offset: 3px; } .conteudo img { border-radius: calc(var(--raio) * .7); margin: 1.5rem 0; } .conteudo blockquote { margin: 1.75rem 0; padding: 1.25rem 1.5rem; background: var(--vidro); border-left: 4px solid var(--cor-primaria); border-radius: 0 calc(var(--raio) * .5) calc(var(--raio) * .5) 0; } .conteudo blockquote p:last-child { margin-bottom: 0; } .conteudo table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .conteudo th, .conteudo td { padding: .7rem .9rem; border: 1px solid var(--borda); text-align: left; } .conteudo th { color: #fff; background: var(--vidro); } /* Lista com marcador de check — usada nos textos migrados do site anterior. */ .conteudo ul.lista-check { list-style: none; padding: 0; margin: 0 0 1em; } .conteudo ul.lista-check li { position: relative; padding: .3rem 0 .3rem 2rem; } .conteudo ul.lista-check li::before { content: ""; position: absolute; left: 0; top: .55em; width: 1.15rem; height: 1.15rem; background: var(--cor-primaria-escura); /* Check desenhado em máscara: acompanha a cor do painel sem virar imagem. */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; } /* Bloco recuado com barra à esquerda. */ .conteudo .destaque-lateral { padding: .5rem 0 .5rem 1.25rem; border-left: 1px solid var(--borda-forte); margin-bottom: 1em; } .conteudo .destaque-lateral > :last-child { margin-bottom: 0; } /* Caixa de aviso importante. */ .conteudo .caixa-alerta { padding: clamp(1.5rem, 3vw, 2rem); margin: 1.75rem 0; text-align: center; background: rgba(239, 68, 68, .10); border: 1px solid rgba(239, 68, 68, .22); border-radius: calc(var(--raio) * 1.1); color: #fecaca; } .conteudo .caixa-alerta strong, .conteudo .caixa-alerta h3 { color: #f87171; } /* Caixa neutra em vidro. */ .conteudo .caixa { padding: clamp(1.5rem, 3vw, 2rem); margin: 1.75rem 0; background: var(--vidro); border: 1px solid var(--borda); border-radius: calc(var(--raio) * 1.1); } .conteudo .caixa > :last-child { margin-bottom: 0; } /* Grupo de etiquetas em pílula. */ .conteudo .pilulas { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0 0 1em; } .conteudo .pilulas li { padding: .5rem 1rem; font-size: .9rem; font-weight: 500; color: var(--cor-primaria-clara); background: color-mix(in srgb, var(--cor-primaria) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cor-primaria) 20%, transparent); border-radius: 999px; } /* ---------------------------------------------------------------- números */ .numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); } @media (min-width: 900px) { .numeros { grid-template-columns: repeat(var(--colunas, 4), 1fr); } } .numeros__item { padding: clamp(1.5rem, 3vw, 2rem); text-align: center; background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio); transition: background-color .25s ease; } .numeros__item:hover { background: var(--vidro-forte); } .numeros__valor { display: block; margin-bottom: .5rem; font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -.02em; font-size: clamp(2rem, 1.2rem + 3vw, 3rem); line-height: 1; color: #fff; /* Reserva a altura antes de a contagem começar, senão a grade "pula". */ font-variant-numeric: tabular-nums; } .numeros__rotulo { display: block; color: var(--cor-texto-fraco); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; } /* ---------------------------------------------------------------- galeria */ .galeria { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 980px) { .galeria.grade--3 { grid-template-columns: repeat(3, 1fr); } .galeria.grade--4 { grid-template-columns: repeat(4, 1fr); } } .galeria__item { overflow: hidden; border-radius: var(--raio); border: 1px solid var(--borda); } .galeria__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .35s ease; } .galeria__item:hover img { transform: scale(1.06); } .logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); } .logos img { max-height: 46px; width: auto; filter: grayscale(1) brightness(2); opacity: .55; transition: filter .2s, opacity .2s; } .logos img:hover { filter: none; opacity: 1; } /* ------------------------------------------------------------ avaliações */ .avaliacoes__topo { display: flex; flex-direction: column; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .avaliacoes__intro h2 { margin-bottom: .3em; } .avaliacoes__intro .secao__sub { max-width: 38rem; } @media (min-width: 900px) { .avaliacoes__topo { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2.5rem; } .avaliacoes__intro { max-width: 40rem; } } .nota-geral { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; padding: 1.5rem; background: rgba(255,255,255,.03); border: 1px solid var(--borda-forte); border-radius: var(--raio); box-shadow: var(--sombra); } .nota-geral__logo { display: grid; place-items: center; width: 56px; height: 56px; background: var(--vidro-forte); border: 1px solid var(--borda-forte); border-radius: calc(var(--raio) * .6); } .nota-geral__corpo { flex: 1; } .nota-geral__linha { display: flex; align-items: center; gap: .6rem; margin: 0; } .nota-geral__linha strong { font-family: var(--fonte-titulo); font-size: 1.9rem; letter-spacing: -.02em; } .nota-geral__texto { margin: .25rem 0 0; font-size: .78rem; font-weight: 500; color: var(--cor-texto-suave); } .nota-geral__link { display: grid; place-items: center; width: 44px; height: 44px; color: var(--cor-primaria-clara); background: color-mix(in srgb, var(--cor-primaria) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cor-primaria) 22%, transparent); border-radius: calc(var(--raio) * .55); } .nota-geral__link:hover { background: var(--cor-primaria); color: #fff; } .estrelas { display: inline-flex; gap: 1px; color: #fbbf24; } .filtros { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 1rem; margin-bottom: 2rem; scrollbar-width: none; } .filtros::-webkit-scrollbar { display: none; } .filtro { flex: 0 0 auto; padding: .7rem 1.25rem; min-height: 44px; font: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--cor-texto-suave); background: var(--vidro-forte); border: 1px solid var(--borda); border-radius: 999px; cursor: pointer; transition: background-color .25s ease, color .25s ease; } .filtro:hover { background: var(--vidro-max); color: #fff; } .filtro--ativo, .filtro--ativo:hover { background: var(--cor-primaria); border-color: transparent; color: #fff; } .avaliacao { position: relative; overflow: hidden; display: flex; flex-direction: column; margin: 0; padding: clamp(1.5rem, 3vw, 1.75rem); background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio); transition: background-color .3s ease, border-color .3s ease; } .avaliacao:hover { background: var(--vidro-forte); border-color: var(--borda-forte); } .avaliacao__aspas { position: absolute; top: 1rem; right: 1rem; color: rgba(255,255,255,.03); pointer-events: none; transition: color .3s ease; } .avaliacao:hover .avaliacao__aspas { color: rgba(255,255,255,.06); } .avaliacao__pessoa { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .avaliacao__inicial, .avaliacao__foto { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; font-size: .85rem; font-weight: 700; color: #fff; object-fit: cover; } .avaliacao__dados { min-width: 0; } .avaliacao__dados strong { display: flex; align-items: center; gap: .35rem; font-size: .9rem; } .avaliacao__check { display: inline-flex; color: var(--cor-primaria-clara); } .avaliacao__dados small { display: flex; align-items: center; gap: .3rem; margin-top: .1rem; color: var(--cor-texto-fraco); font-size: .75rem; } .avaliacao blockquote { margin: .75rem 0 1.5rem; color: var(--cor-texto); font-size: .92rem; line-height: 1.7; } .avaliacao blockquote::before { content: "\201C"; } .avaliacao blockquote::after { content: "\201D"; } .avaliacao__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--borda); font-size: .75rem; } .etiqueta { padding: .25rem .75rem; border-radius: 999px; font-weight: 500; color: var(--cor-primaria-clara); background: color-mix(in srgb, var(--cor-primaria) 10%, transparent); } .avaliacao__verificado { display: inline-flex; align-items: center; gap: .3rem; color: var(--cor-texto-fraco); } .avaliacao__verificado .ico { color: #10b981; } .avaliacoes__vazio { margin-top: 2rem; text-align: center; color: var(--cor-texto-fraco); } /* ---------------------------------------------------------------- planos */ .plano { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio); } .plano--destaque { border-color: var(--cor-primaria); box-shadow: 0 26px 50px -30px var(--cor-primaria); } .plano__selo { position: absolute; top: -.85rem; left: 50%; translate: -50% 0; padding: .3rem .9rem; font-size: .75rem; font-weight: 700; color: #fff; background: var(--cor-primaria); border-radius: 999px; white-space: nowrap; } .plano__preco { font-family: var(--fonte-titulo); font-size: 2.2rem; font-weight: 700; color: #fff; margin: .25em 0 1em; } .plano__preco small { font-size: .95rem; font-weight: 500; color: var(--cor-texto-fraco); } .plano__itens { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; } .plano__itens li { padding: .45rem 0 .45rem 1.6rem; position: relative; border-bottom: 1px solid var(--borda); } .plano__itens li::before { content: "\2713"; position: absolute; left: 0; color: var(--cor-primaria-clara); font-weight: 700; } /* ---------------------------------------------------------------- pessoa */ .pessoa { text-align: center; color: inherit; } .pessoa__foto { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio); margin-bottom: 1rem; } .pessoa__cargo { color: var(--cor-primaria-clara); font-weight: 600; margin-bottom: .5rem; } /* ---------------------------------------------------------------- FAQ */ .faq { max-width: 880px; margin: 0 auto; } .faq__item { margin-bottom: .75rem; background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio); transition: background-color .3s ease, border-color .3s ease; } .faq__item[open] { background: rgba(255,255,255,.05); border-color: var(--borda-forte); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.1rem, 2.5vw, 1.4rem) clamp(1.25rem, 3vw, 2rem); font-family: var(--fonte-titulo); font-size: clamp(1rem, .95rem + .25vw, 1.12rem); font-weight: 600; color: #fff; cursor: pointer; list-style: none; transition: color .2s ease; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { color: var(--cor-primaria-clara); } .faq__item summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--cor-texto-suave); background: var(--vidro-forte); border-radius: 50%; transition: background-color .25s ease, color .25s ease; } .faq__item[open] summary::after { content: "\2212"; background: var(--cor-primaria); color: #fff; } .faq__item .conteudo { padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.5rem); font-size: .92rem; color: var(--cor-texto-fraco); } /* ---------------------------------------------------------------- CTA */ .cta { max-width: 780px; margin: 0 auto; text-align: center; } .cta__icone { display: inline-grid; place-items: center; margin-bottom: 1.5rem; color: var(--cor-primaria-clara); } .cta__texto { color: var(--cor-texto-suave); font-size: 1.02em; line-height: 1.75; } .cta-caixa { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; padding: clamp(2rem, 5vw, 3rem); background: var(--vidro); border: 1px solid var(--borda-forte); border-radius: calc(var(--raio) * 1.25); transition: background-color .4s ease; } .cta-caixa:hover { background: var(--vidro-forte); } .cta-caixa__icone { display: grid; place-items: center; flex: 0 0 auto; width: 80px; height: 80px; color: #fff; background: var(--cor-primaria); border-radius: 50%; box-shadow: 0 0 30px color-mix(in srgb, var(--cor-primaria) 35%, transparent); } .cta-caixa h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-weight: 600; margin-bottom: .5em; } .cta-caixa p { color: var(--cor-texto-suave); margin: 0; max-width: 46rem; } @media (min-width: 768px) { .cta-caixa { flex-direction: row; text-align: left; } } /* ---------------------------------------------------------------- vídeo */ .video__embed { position: relative; padding-top: 56.25%; border-radius: var(--raio); overflow: hidden; } .video__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video video { width: 100%; border-radius: var(--raio); } /* ------------------------------------------------------- contato / forms */ .contato { display: grid; gap: clamp(1.75rem, 4vw, 3rem); } @media (min-width: 900px) { .contato--duplo { grid-template-columns: 1.15fr .85fr; } } .form__campo { margin-bottom: 1.1rem; } .form__campo label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .9rem; color: var(--cor-texto); } .form__campo .req { color: #f87171; } .form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea { width: 100%; padding: .85rem 1.1rem; font: inherit; color: var(--cor-texto); background: var(--cor-fundo); border: 1px solid var(--borda-forte); border-radius: calc(var(--raio) * .5); min-height: 48px; } .form textarea { resize: vertical; } .form ::placeholder { color: var(--cor-texto-fraco); } .form :is(input, select, textarea):focus { border-color: var(--cor-primaria); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 25%, transparent); } .hp { position: absolute; left: -9999px; } .aviso { padding: .95rem 1.15rem; border-radius: calc(var(--raio) * .5); margin-bottom: 1rem; } .aviso--ok { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.25); } .aviso--erro { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.25); } .lista-contato { list-style: none; padding: 0; margin: 0; } .lista-contato li { display: flex; gap: .75rem; padding: .5rem 0; align-items: flex-start; line-height: 1.6; } .lista-contato .ico { margin-top: .25em; color: var(--cor-primaria-escura); } .mapa { margin-top: 1.5rem; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda); } .mapa iframe { width: 100%; height: 300px; border: 0; } /* ---------------------------------------------------------------- rodapé */ .rodape { margin-top: auto; background: var(--vidro); backdrop-filter: blur(12px); border-top: 2px solid color-mix(in srgb, var(--cor-primaria) 30%, transparent); padding: clamp(3rem, 6vw, 4rem) 0 2rem; } .rodape__grade { display: grid; gap: 3rem; margin-bottom: 3rem; } @media (min-width: 640px) { .rodape__grade { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .rodape__grade { grid-template-columns: repeat(4, 1fr); } } .rodape__titulo { margin: 0 0 1.5rem; padding-left: .75rem; font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #fff; border-left: 2px solid var(--cor-primaria-escura); } .rodape .lista-contato, .rodape__links { font-size: .8rem; color: var(--cor-texto-fraco); } .rodape__links { list-style: none; padding: 0; margin: 0; } .rodape__links li { padding: .35rem 0; } .rodape a { color: inherit; } .rodape a:hover { color: #fff; } .rodape__links a:hover { color: var(--cor-primaria-clara); } .rodape__base { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding-top: 2rem; border-top: 1px solid var(--borda); font-size: .78rem; color: var(--cor-texto-fraco); } .rodape__base p { margin: 0; } .rodape__credito a { color: var(--cor-primaria-clara); } .rodape__credito a:hover { text-decoration: underline; } .rodape__redes { display: flex; gap: 1rem; } @media (min-width: 768px) { .rodape__base { flex-direction: row; justify-content: space-between; text-align: left; } } /* --------------------------------------------------------- flutuantes */ .zap { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60; display: grid; place-items: center; width: 60px; height: 60px; color: #fff; background: var(--cor-whatsapp); border-radius: 50%; box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--cor-whatsapp) 70%, transparent); transition: transform .2s ease; } .zap:hover { transform: scale(1.1); color: #fff; } .ao-topo { position: fixed; right: 1.5rem; bottom: 6.5rem; z-index: 40; display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: var(--cor-secundaria); border: 1px solid var(--borda-forte); border-radius: 50%; box-shadow: var(--sombra); cursor: pointer; opacity: 0; translate: 0 10px; transition: opacity .25s ease, translate .25s ease, background-color .2s ease; } .ao-topo[hidden] { display: none; } .ao-topo--visivel { opacity: 1; translate: 0 0; } .ao-topo:hover { background: var(--cor-primaria); } /* ---------------------------------------------------------------- extras */ .migalhas { font-size: .85rem; color: var(--cor-texto-fraco); margin-bottom: 1.5rem; } .migalhas a { color: var(--cor-texto-suave); } .voltar { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2rem; padding: .6rem 1rem .6rem .75rem; font-size: .875rem; font-weight: 500; color: var(--cor-texto-suave); border-radius: calc(var(--raio) * .4); } .voltar:hover { color: #fff; background: var(--vidro-forte); } .voltar .ico { transition: translate .2s ease; } .voltar:hover .ico { translate: -3px 0; } .erro-codigo { font-family: var(--fonte-titulo); font-size: clamp(4rem, 12vw, 8rem); font-weight: 700; line-height: 1; color: var(--cor-primaria-escura); margin: 0; } .campo-publico { margin-bottom: 1.75rem; } .campo-publico img { border-radius: var(--raio); } .meta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: .875rem; color: var(--cor-texto-suave); } .meta-linha span { display: inline-flex; align-items: center; gap: .45rem; } .meta-linha .etiqueta { border: 1px solid color-mix(in srgb, var(--cor-primaria) 22%, transparent); } /* ------------------------------------------------------------ post do blog */ .card__marca { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .3rem .8rem; font-size: .72rem; font-weight: 600; color: #fff; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); border: 1px solid var(--borda-forte); border-radius: 999px; } .card__meta { display: flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; font-size: .78rem; font-weight: 500; color: var(--cor-texto-fraco); } .card__link--forte { display: flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--borda); color: var(--cor-primaria-escura); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .card--card:hover .card__link--forte { color: var(--cor-primaria-clara); } .post-capa { position: relative; padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; } .post-capa__fundo { position: absolute; inset: 0; z-index: 0; } .post-capa__fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: grayscale(1); } .post-capa__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--cor-fundo), color-mix(in srgb, var(--cor-fundo) 80%, transparent), var(--cor-fundo)); } .post-capa > .container { position: relative; z-index: 1; } .post-capa__resumo { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--cor-texto); line-height: 1.7; margin: 0; } .post-corpo { padding-bottom: clamp(3rem, 7vw, 5rem); } .post-imagem { width: 100%; height: clamp(220px, 45vh, 480px); object-fit: cover; margin-bottom: clamp(2rem, 4vw, 3rem); border: 1px solid var(--borda); border-radius: var(--raio); } .conteudo--artigo { font-size: 1.05rem; line-height: 1.85; color: var(--cor-texto); } .conteudo--artigo p { margin-bottom: 1.5rem; } .compartilhar { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--borda-forte); } .compartilhar__rotulo { margin: 0; font-weight: 500; color: #fff; } .compartilhar__links { display: flex; gap: .75rem; } .compartilhar__links a, .compartilhar__links button { display: grid; place-items: center; width: 44px; height: 44px; color: var(--cor-texto-suave); background: var(--vidro-forte); border: 1px solid var(--borda); border-radius: 50%; cursor: pointer; transition: background-color .2s ease, color .2s ease; } .compartilhar__links a:hover, .compartilhar__links button:hover { background: var(--cor-primaria); color: #fff; } .compartilhar__links .copiado { background: #10b981; color: #fff; } @media (min-width: 640px) { .compartilhar { flex-direction: row; justify-content: space-between; } } .post-nav { display: grid; gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 768px) { .post-nav { grid-template-columns: 1fr 1fr; } } .post-nav__item { display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem; color: var(--cor-texto); background: var(--vidro); border: 1px solid var(--borda); border-radius: calc(var(--raio) * .8); transition: background-color .25s ease; } .post-nav__item:hover { background: var(--vidro-forte); color: var(--cor-texto); } .post-nav__item--fim { align-items: flex-end; text-align: right; } .post-nav__rotulo { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-texto-fraco); transition: color .25s ease; } .post-nav__item:hover .post-nav__rotulo { color: var(--cor-primaria-clara); } .post-nav__item strong { font-weight: 500; } /* ------------------------------------------------------- página de serviço */ .servico-topo { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .servico-topo h1 { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 0; } .servico-topo__nome { color: var(--cor-primaria-escura); font-weight: 700; } .servico-topo__sub { font-family: var(--fonte-destaque); font-weight: 700; font-size: .85em; color: #fff; opacity: .9; } .servico-topo__risco { display: block; width: 5rem; height: 4px; margin: 1.75rem 0 2rem; background: var(--cor-primaria); border-radius: 999px; } .servico-topo__intro { font-size: clamp(1.1rem, 1rem + .55vw, 1.45rem); line-height: 1.65; color: var(--cor-texto-suave); margin: 0; } .servico-corpo > section, .servico-corpo > .caixa { margin-bottom: clamp(2rem, 4vw, 3rem); } .servico-faq { margin-top: clamp(4rem, 9vw, 7rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--borda); } /* ------------------------------------------------------ modo de manutenção */ .manutencao { display: grid; place-items: center; min-height: 100dvh; padding: 2rem 1.25rem; background-size: cover; background-position: center; background-repeat: no-repeat; } .manutencao__veu { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); } .manutencao__caixa { position: relative; z-index: 1; width: 100%; max-width: 42rem; text-align: center; display: flex; flex-direction: column; align-items: center; padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem); background: rgba(255,255,255,.05); border: 1px solid var(--borda-forte); backdrop-filter: blur(12px); border-radius: calc(var(--raio) * 1.25); box-shadow: var(--sombra); } .manutencao__logo { max-height: 80px; width: auto; margin-bottom: 2rem; filter: brightness(0) invert(1); opacity: .9; } .manutencao__caixa h1 { font-family: var(--fonte-destaque); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); } .manutencao__texto { max-width: 32rem; color: var(--cor-texto-suave); font-size: 1.05rem; margin-bottom: 2.5rem; } .manutencao__risco { display: block; width: 5rem; height: 4px; margin-bottom: 2.5rem; background: var(--cor-primaria); border-radius: 999px; } .manutencao__subtitulo { font-size: 1.05rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.5rem; } .manutencao__contatos { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .manutencao__contatos a { display: flex; align-items: center; justify-content: center; gap: .85rem; padding: 1rem 1.5rem; color: var(--cor-texto); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: calc(var(--raio) * .6); transition: background-color .2s ease, transform .2s ease; } .manutencao__contatos a:hover { background: rgba(255,255,255,.18); transform: scale(1.03); color: var(--cor-texto); } .manutencao__contatos .ico { color: var(--cor-primaria-clara); } .manutencao__contatos span { display: flex; flex-direction: column; text-align: left; } .manutencao__contatos small { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-suave); } .manutencao__contatos strong { font-weight: 500; font-size: 1rem; word-break: break-word; } @media (min-width: 640px) { .manutencao__contatos { flex-direction: row; justify-content: center; } } /* Lightbox mínimo (assets/js/site.js) */ .lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 2rem; background: rgba(0,0,0,.9); } .lightbox img { max-width: 92vw; max-height: 88vh; width: auto; border-radius: 8px; } .lightbox button { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 1.5rem; color: #fff; background: rgba(255,255,255,.15); border: 0; border-radius: 50%; cursor: pointer; } /* Revelação suave ao rolar. Sem JS ou com movimento reduzido, tudo aparece. */ .revelar { opacity: 0; translate: 0 18px; transition: opacity .6s ease, translate .6s ease; } .revelar.visivel { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; translate: 0 0; } } @media print { .topo, .rodape, .zap, .ao-topo, .botoes, .brilhos { display: none !important; } body { color: #000; background: #fff; } h1, h2, h3, .destaque { color: #000; } }