/* ========================================================================== Sistema de design do site. As cores, fontes, raio e largura vêm do painel (injetados como variáveis CSS no ), então nunca escreva um valor de cor fixo aqui — use var(--...). Layout mobile-first: o padrão é uma coluna, e os breakpoints só ampliam. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !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; } h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; } h1 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); } h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); } p { margin: 0 0 1em; } img, video, iframe, svg { max-width: 100%; height: auto; display: block; } a { color: var(--cor-primaria); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { padding-left: 1.2em; } hr.divisor { border: 0; border-top: 1px solid rgba(0,0,0,.1); } :focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 2px; border-radius: 4px; } .pular { position: absolute; left: -9999px; } .pular:focus { left: 1rem; top: 1rem; z-index: 999; background: #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: 760px; } .centro { text-align: center; } /* ---------------------------------------------------------------- seções */ .secao { position: relative; background-size: cover; background-position: center; } .espaco-normal { padding: clamp(3rem, 7vw, 5.5rem) 0; } .espaco-compacto { padding: clamp(1.75rem, 4vw, 3rem) 0; } .espaco-amplo { padding: clamp(4.5rem, 10vw, 8rem) 0; } .espaco-nenhum { padding: 0; } .fundo-claro { background-color: var(--cor-fundo); } .fundo-alt { background-color: var(--cor-fundo-alt); } .fundo-escuro { background-color: var(--cor-escuro); color: #fff; } .fundo-primaria { background-color: var(--cor-primaria); color: #fff; } .fundo-escuro a:not(.botao), .fundo-primaria a:not(.botao) { color: #fff; text-decoration: underline; } .fundo-imagem { color: #fff; } .fundo-imagem::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65)); } .fundo-imagem > .container { position: relative; z-index: 1; } .secao__cabecalho { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; } .secao__cabecalho h2 { margin-bottom: .35em; } .secao__sub { opacity: .78; font-size: 1.05em; margin: 0; } /* ---------------------------------------------------------------- botões */ .botoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } .botoes--centro { justify-content: center; } .botao { --btn-bg: var(--cor-primaria); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.6rem; border: 2px solid transparent; border-radius: calc(var(--raio) * .7); font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; min-height: 48px; /* alvo de toque confortável no celular */ } .botao:hover { text-decoration: none; transform: translateY(-2px); } .botao--primario { background: var(--btn-bg); color: #fff; box-shadow: 0 6px 20px -8px var(--btn-bg); } .botao--primario:hover { background: var(--cor-primaria-escura); } .botao--secundario { background: transparent; color: currentColor; border-color: currentColor; } .botao--secundario:hover { background: rgba(127,127,127,.12); } .botao--texto { padding-left: 0; padding-right: 0; color: var(--cor-primaria); } .botao--texto::after { content: "→"; } /* ---------------------------------------------------------------- topo */ .topo { position: sticky; top: 0; z-index: 50; /* Fallback opaco primeiro: em navegador sem color-mix a regra seguinte é ignorada e o topo continua legível em vez de ficar transparente. */ background: var(--cor-fundo); background: color-mix(in srgb, var(--cor-fundo) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid rgba(0,0,0,.07); } .topo__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; } .topo__logo { display: flex; align-items: center; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem; color: var(--cor-secundaria); } .topo__logo img { max-height: 46px; width: auto; } .topo__logo:hover { text-decoration: none; } .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; } .topo__menu-btn span { display: block; height: 2px; background: var(--cor-secundaria); 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: fixed; inset: 72px 0 auto 0; display: none; flex-direction: column; gap: .5rem; padding: 1rem clamp(1rem, 4vw, 2rem) 2rem; background: var(--cor-fundo); border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: 0 20px 40px -24px rgba(0,0,0,.4); max-height: calc(100dvh - 72px); 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-weight: 600; color: var(--cor-secundaria); border-bottom: 1px solid rgba(0,0,0,.06); } .submenu { padding-left: 1rem; } .submenu a { display: block; padding: .6rem .25rem; opacity: .85; } .topo__cta { margin-top: 1rem; } @media (min-width: 900px) { .topo__menu-btn { display: none; } .topo__nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 1.75rem; padding: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; } .topo__nav ul { flex-direction: row; align-items: center; gap: 1.5rem; } .topo__nav > ul > li > a { padding: .5rem 0; border: 0; } .topo__nav > ul > li { position: relative; } .submenu { position: absolute; top: 100%; left: -1rem; min-width: 220px; display: none; flex-direction: column; padding: .5rem; background: var(--cor-fundo); border-radius: var(--raio); box-shadow: 0 18px 40px -18px rgba(0,0,0,.35); border: 1px solid rgba(0,0,0,.07); } .tem-filhos:hover .submenu, .tem-filhos:focus-within .submenu { display: flex; } .topo__cta { margin-top: 0; } } /* ---------------------------------------------------------------- hero */ .hero { display: grid; gap: 2.5rem; align-items: center; background-size: cover; background-position: center; } .hero--com-imagem { padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem); border-radius: var(--raio); color: #fff; position: relative; isolation: isolate; } .hero--com-imagem::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.66)); } .hero--centro .hero__texto { text-align: center; margin: 0 auto; max-width: 780px; } .hero--centro .botoes { justify-content: center; } .hero--cheia { min-height: min(82vh, 780px); align-content: center; } .hero--compacta { min-height: 0; } .hero__sobre { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; color: var(--cor-primaria); margin-bottom: .75rem; } .hero--com-imagem .hero__sobre { color: #fff; opacity: .9; } /* Em seção escura a cor principal do site não tem contraste suficiente para texto pequeno; o destaque claro (Aparência → Cor de destaque) resolve. */ .fundo-escuro .hero__sobre, .fundo-primaria .hero__sobre { color: var(--cor-calculadora); } .hero h1 { margin-bottom: .4em; } .hero__sub { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); opacity: .88; max-width: 60ch; } .hero--centro .hero__sub { margin-left: auto; margin-right: auto; } .hero__imagem img { border-radius: var(--raio); box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); 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 { justify-content: flex-start; } } /* ---------------------------------------------------------------- grades */ .grade { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); 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); } } .card { display: block; padding: clamp(1.4rem, 3vw, 2rem); background: var(--cor-fundo); color: inherit; border: 1px solid rgba(0,0,0,.08); border-radius: var(--raio); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } a.card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(0,0,0,.45); border-color: var(--cor-primaria); text-decoration: none; } .card h2, .card h3 { margin-bottom: .4em; } .card p { margin: 0; opacity: .82; } .card__icone { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 1rem; font-size: 1.6rem; border-radius: 14px; background: rgba(127,127,127,.12); background: color-mix(in srgb, var(--cor-primaria) 12%, transparent); } .card__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: calc(var(--raio) * .7); margin-bottom: 1.1rem; } .fundo-escuro .card, .fundo-primaria .card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); } /* ------------------------------------------------------- texto + imagem */ .texto-img { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .texto-img .botoes { margin-bottom: 0; } .texto-img__img img { width: 100%; border-radius: var(--raio); box-shadow: 0 28px 56px -32px rgba(0,0,0,.5); } @media (min-width: 900px) { .texto-img--direita, .texto-img--esquerda { grid-template-columns: 1fr 1fr; } .texto-img--esquerda .texto-img__texto { order: 2; } } .conteudo > :last-child { margin-bottom: 0; } .conteudo img { border-radius: calc(var(--raio) * .6); margin: 1rem 0; } .conteudo blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 4px solid var(--cor-primaria); font-style: italic; } .conteudo table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .conteudo th, .conteudo td { padding: .6rem .75rem; border: 1px solid rgba(0,0,0,.12); text-align: left; } /* ---------------------------------------------------------------- números */ .numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); text-align: center; } @media (min-width: 820px) { .numeros { grid-template-columns: repeat(var(--colunas, 4), 1fr); } } .numeros__valor { display: block; font-family: var(--fonte-titulo); font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); line-height: 1; color: var(--cor-primaria); } .fundo-escuro .numeros__valor, .fundo-primaria .numeros__valor, .fundo-imagem .numeros__valor { color: #fff; } .numeros__rotulo { display: block; margin-top: .5rem; opacity: .8; font-size: .95rem; } /* ---------------------------------------------------------------- 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); } .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); opacity: .65; transition: filter .2s, opacity .2s; } .logos img:hover { filter: none; opacity: 1; } /* ------------------------------------------------------------ depoimentos */ .depoimentos { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; } @media (min-width: 900px) { .depoimentos { grid-template-columns: repeat(3, 1fr); } } .depoimento { margin: 0; padding: clamp(1.4rem, 3vw, 2rem); background: var(--cor-fundo); border: 1px solid rgba(0,0,0,.08); border-radius: var(--raio); } .fundo-alt .depoimento { background: #fff; } .depoimento blockquote { margin: 0 0 1.25rem; font-size: 1.02rem; } .depoimento blockquote::before { content: "“"; font-size: 2.5rem; line-height: 0; vertical-align: -.35em; color: var(--cor-primaria); margin-right: .1em; } .depoimento figcaption { display: flex; align-items: center; gap: .75rem; } .depoimento figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .depoimento figcaption strong { display: block; } .depoimento figcaption small { opacity: .7; } .estrelas { color: #f5a623; letter-spacing: .12em; margin-bottom: .75rem; } /* ---------------------------------------------------------------- planos */ .plano { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--cor-fundo); border: 1px solid rgba(0,0,0,.1); border-radius: var(--raio); } .plano--destaque { border-color: var(--cor-primaria); border-width: 2px; box-shadow: 0 26px 50px -30px var(--cor-primaria); } .plano__selo { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); 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: 800; margin: .25em 0 1em; } .plano__preco small { font-size: .95rem; font-weight: 500; opacity: .65; } .plano__itens { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; } .plano__itens li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px solid rgba(0,0,0,.06); } .plano__itens li .ic { flex: 0 0 auto; margin-top: .25em; color: var(--cor-primaria); } /* ---------------------------------------------------------------- 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); font-weight: 600; margin-bottom: .5rem; } /* ---------------------------------------------------------------- FAQ */ .faq { max-width: 780px; margin: 0 auto; } .faq__item { border: 1px solid rgba(0,0,0,.1); border-radius: var(--raio); margin-bottom: .75rem; background: var(--cor-fundo); } .faq__item summary { padding: 1.1rem 1.25rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--cor-primaria); } .faq__item[open] summary::after { content: "−"; } .faq__item .conteudo { padding: 0 1.25rem 1.25rem; } /* ---------------------------------------------------------------- CTA */ .cta { text-align: center; max-width: 720px; margin: 0 auto; } .cta .botoes { justify-content: center; } .fundo-primaria .botao--primario { background: #fff; color: var(--cor-primaria); box-shadow: none; } /* ---------------------------------------------------------------- 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: 1rem; } .form__campo label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .92rem; } .form__campo .req { color: #d33; } .form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea { width: 100%; padding: .8rem 1rem; font: inherit; color: inherit; background: var(--cor-fundo); border: 1px solid rgba(0,0,0,.18); border-radius: calc(var(--raio) * .55); min-height: 48px; } .form textarea { resize: vertical; } .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; width: 1px; height: 1px; overflow: hidden; } .aviso { padding: .9rem 1.1rem; border-radius: calc(var(--raio) * .55); margin-bottom: 1rem; } .aviso--ok { background: #e7f6ec; color: #145c2e; border: 1px solid #b7e0c5; } .aviso--erro { background: #fdecec; color: #8c1c1c; border: 1px solid #f2b8b8; } .lista-contato { list-style: none; padding: 0; margin: 0; } .lista-contato li { display: flex; gap: .6rem; padding: .5rem 0; align-items: flex-start; } .mapa { margin-top: 1.5rem; border-radius: var(--raio); overflow: hidden; } .mapa iframe { width: 100%; height: 280px; border: 0; } /* ---------------------------------------------------------------- rodapé */ .rodape { background: var(--cor-escuro); color: rgba(255,255,255,.82); margin-top: auto; } .rodape a { color: rgba(255,255,255,.82); } .rodape a:hover { color: #fff; } .rodape__inner { display: grid; gap: 2.5rem; padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: 2.5rem; } @media (min-width: 820px) { .rodape__inner { grid-template-columns: 1.4fr 1fr 1fr; } } .rodape h3 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; } .rodape ul { list-style: none; padding: 0; margin: 0; } .rodape li { padding: .35rem 0; } .rodape__logo { display: block; max-height: 52px; width: auto; margin-bottom: 1rem; color: #fff; font-size: 1.25rem; } .redes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-size: .9rem; } .rodape__base { border-top: 1px solid rgba(255,255,255,.12); padding: 1.25rem 0; font-size: .85rem; } .rodape__base .container { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; } .rodape__base p { margin: 0; } /* ---------------------------------------------------------------- extras */ .zap { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: grid; place-items: center; width: 56px; height: 56px; background: #25d366; color: #fff; border-radius: 50%; box-shadow: 0 12px 28px -10px rgba(37,211,102,.9); } .zap:hover { transform: scale(1.06); } .migalhas { font-size: .85rem; opacity: .7; margin-bottom: 1rem; } .erro-codigo { font-family: var(--fonte-titulo); font-size: clamp(4rem, 12vw, 8rem); font-weight: 800; line-height: 1; color: var(--cor-primaria); margin: 0; } .campo-publico { margin-bottom: 1.75rem; } .campo-publico img { border-radius: var(--raio); } /* 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,.88); } .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; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .revelar.visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; transform: none; } } @media print { .topo, .rodape, .zap, .botoes { display: none !important; } body { color: #000; background: #fff; } } /* ---------------------------------------------------------------- ícones SVG inline com traço; herdam a cor do contexto via currentColor. O `flex: 0 0 auto` impede que o ícone encolha quando o texto ao lado é longo, que é o defeito clássico de ícone dentro de flex. */ .ic { flex: 0 0 auto; vertical-align: -.15em; } .ic--conteudo { color: var(--cor-primaria); } .fundo-escuro .ic--conteudo, .fundo-primaria .ic--conteudo, .fundo-imagem .ic--conteudo { color: currentColor; } /* Emoji salvo antes da troca por SVG continua aparecendo, só que contido. */ .ic-legado { font-size: 1.5rem; line-height: 1; font-style: normal; } .card__icone { color: var(--cor-primaria); } .fundo-escuro .card__icone, .fundo-primaria .card__icone { color: #fff; background: rgba(255,255,255,.12); } .lista-contato li .ic { margin-top: .28em; color: var(--cor-primaria); } .fundo-escuro .lista-contato li .ic, .fundo-primaria .lista-contato li .ic { color: currentColor; } .estrelas { display: flex; gap: .15rem; color: #f5a623; margin-bottom: .75rem; letter-spacing: 0; } .estrelas .ic--estrela { vertical-align: 0; } /* ============================================================ CALCULADORA 3D O painel da calculadora é escuro de propósito: é uma ferramenta, e o contraste alto separa a área de trabalho do resto do site. As cores saem das variáveis do painel (Aparência → Cores), então o cliente continua no controle. Nada de largura fixa: no celular vira uma coluna só, com alvos de toque grandes o bastante para o dedo. */ .calc { --calc-fundo: #0b1220; --calc-fundo-2: #0f1a2c; --calc-superficie: rgba(255, 255, 255, .045); --calc-borda: rgba(255, 255, 255, .11); --calc-borda-forte: rgba(255, 255, 255, .2); --calc-texto: #e8eef7; --calc-suave: #93a4bd; --calc-acento: var(--cor-calculadora, #22d3ee); position: relative; isolation: isolate; overflow: hidden; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--calc-borda); border-radius: var(--raio); background: var(--calc-fundo); color: var(--calc-texto); box-shadow: 0 40px 80px -50px rgba(2, 6, 23, .9); } /* Toda a tipografia de dentro herda daqui — por isso nenhuma regra abaixo precisa repetir a cor do texto, só as exceções (rótulo apagado, destaque). */ /* Brilho de fundo — herdado do visual do app antigo, agora sem custo de imagem. */ .calc::before { content: ""; position: absolute; z-index: -1; inset: -40% -20% auto -20%; height: 70%; background: radial-gradient(45% 60% at 20% 0%, color-mix(in srgb, var(--calc-acento) 22%, transparent), transparent 70%), radial-gradient(40% 55% at 85% 10%, rgba(59, 130, 246, .22), transparent 70%); pointer-events: none; } /* --------------------------------------------------------------- barra topo */ .calc__barra { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--calc-borda); } .calc__tecnologia { display: flex; gap: .25rem; padding: .25rem; background: var(--calc-superficie); border: 1px solid var(--calc-borda); border-radius: 999px; } .calc__tec { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .5rem .95rem; font: inherit; font-size: .85rem; font-weight: 600; color: var(--calc-suave); background: none; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease; } .calc__tec:hover { color: var(--calc-texto); } .calc__tec.esta-ativo { color: #06202b; background: var(--calc-acento); box-shadow: 0 6px 18px -8px var(--calc-acento); } .calc__barra-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; } .calc__perfil { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--calc-suave); } .calc__perfil > span { white-space: nowrap; } .calc__perfil select, .calc__acao { min-height: 40px; padding: .45rem .8rem; font: inherit; font-size: .82rem; color: var(--calc-texto); background: var(--calc-superficie); border: 1px solid var(--calc-borda); border-radius: 10px; cursor: pointer; } .calc__perfil select option { color: #111a26; background: #fff; } .calc__acao { display: inline-flex; align-items: center; gap: .4rem; color: var(--calc-suave); white-space: nowrap; } .calc__acao:hover { color: var(--calc-acento); border-color: var(--calc-borda-forte); } /* Até uns 620px a barra não comporta os dois grupos lado a lado: cada um passa a ocupar a linha inteira, e os botões dividem a largura em partes iguais. */ @media (max-width: 620px) { .calc__tecnologia { flex: 1 1 100%; } .calc__tec { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; padding: .5rem .55rem; } .calc__barra-acoes { width: 100%; margin-left: 0; } .calc__perfil { flex: 1 1 100%; } .calc__perfil select { flex: 1 1 auto; min-width: 0; } .calc__acao { flex: 1 1 auto; min-width: 0; min-height: 44px; justify-content: center; } .calc__perfil select { min-height: 44px; } } /* ------------------------------------------------------------------ colunas */ .calc__grid { display: grid; gap: 1.25rem; align-items: start; } @media (min-width: 900px) { .calc__grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 1.75rem; } .calc__resultado { position: sticky; top: 92px; } } .calc__campos { display: grid; gap: 1rem; min-width: 0; } /* ------------------------------------------------------------------- grupos */ .calc-grupo { padding: 1rem clamp(.85rem, 2.5vw, 1.25rem); background: var(--calc-superficie); border: 1px solid var(--calc-borda); border-radius: calc(var(--raio) * .85); } .calc-grupo__titulo { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-family: var(--fonte-titulo); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--calc-acento); } .calc-grupo__titulo .ic { color: var(--calc-acento); } .calc-grupo__titulo small { margin-left: auto; font-size: .68rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--calc-suave); } details.calc-grupo > summary { cursor: pointer; list-style: none; min-height: 44px; } details.calc-grupo > summary::-webkit-details-marker { display: none; } details.calc-grupo > summary::after { content: "+"; margin-left: .5rem; font-size: 1.1rem; line-height: 1; color: var(--calc-suave); } details.calc-grupo[open] > summary::after { content: "−"; } details.calc-grupo:not([open]) > summary { margin-bottom: 0; } .calc-grupo__campos { display: grid; gap: .9rem 1rem; grid-template-columns: 1fr; } @media (min-width: 560px) { .calc-grupo__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calc-grupo--material .calc-grupo__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------- campos */ .calc-campo { min-width: 0; } .calc-campo > label { display: block; margin-bottom: .35rem; font-size: .78rem; font-weight: 600; color: var(--calc-suave); } .calc-campo__caixa { display: flex; align-items: center; gap: .3rem; padding: 0 .7rem; background: rgba(2, 6, 23, .5); border: 1px solid var(--calc-borda); border-radius: 10px; transition: border-color .18s ease, box-shadow .18s ease; } .calc-campo__caixa:focus-within { border-color: var(--calc-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--calc-acento) 28%, transparent); } .calc-campo__caixa input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; padding: 0; font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--calc-texto); background: none; border: 0; outline: none; } /* As setinhas do input number roubam espaço e não servem para nada aqui. */ .calc-campo__caixa input::-webkit-outer-spin-button, .calc-campo__caixa input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc-campo__caixa input[type=number] { -moz-appearance: textfield; appearance: textfield; } .calc-campo__afixo { flex: 0 0 auto; font-size: .82rem; font-weight: 600; color: var(--calc-suave); } .calc-campo__afixo--fim { padding-left: .1rem; } .calc-campo__ajuda { display: block; margin-top: .35rem; font-size: .74rem; line-height: 1.45; color: #8496b0; } .calc--sem-dicas .calc-campo__ajuda { display: none; } /* ------------------------------------------------------- painel de resultado */ .calc-painel { padding: clamp(1rem, 3vw, 1.4rem); background: linear-gradient(160deg, var(--calc-fundo-2), rgba(8, 47, 73, .55)); border: 1px solid var(--calc-borda-forte); border-radius: calc(var(--raio) * .85); } .calc-painel__titulo { margin: 0 0 1rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--calc-suave); } .calc-painel__grafico { position: relative; display: grid; place-items: center; margin-bottom: .9rem; } .calc-painel__grafico .donut { width: min(190px, 60%); height: auto; } .calc-painel__centro { position: absolute; text-align: center; line-height: 1.2; } .calc-painel__centro small { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--calc-suave); } .calc-painel__centro strong { font-family: var(--fonte-titulo); font-size: 1.05rem; font-variant-numeric: tabular-nums; } .calc-legenda { display: grid; gap: .3rem; margin: 0 0 1.1rem; padding: 0; list-style: none; font-size: .78rem; } .calc-legenda li { display: flex; align-items: center; gap: .45rem; color: var(--calc-suave); } .calc-legenda i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; } .calc-legenda b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--calc-texto); } .calc-linhas { margin: 0 0 1rem; } .calc-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .38rem 0; font-size: .84rem; } .calc-linha dt { color: var(--calc-suave); } .calc-linha dd { margin: 0; font-variant-numeric: tabular-nums; } .calc-linha.esta-zerado { opacity: .38; } .calc-linha--total { margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--calc-borda); font-size: .95rem; font-weight: 700; } .calc-linha--total dt { color: var(--calc-texto); } .calc-linha--fraca { font-size: .8rem; } .calc-preco { margin: 1rem 0; padding: 1rem; text-align: center; background: rgba(2, 6, 23, .45); border: 1px solid color-mix(in srgb, var(--calc-acento) 35%, transparent); border-radius: calc(var(--raio) * .7); } .calc-preco small { display: block; margin-bottom: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--calc-acento); } .calc-preco strong { display: block; font-family: var(--fonte-titulo); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .calc-preco span { display: block; margin-top: .35rem; font-size: .8rem; color: var(--calc-suave); } .calc-preco span b { color: var(--calc-texto); } .calc-indicadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; } .calc-indicadores li { padding: .55rem .7rem; background: var(--calc-superficie); border: 1px solid var(--calc-borda); border-radius: 10px; } .calc-indicadores--largo { grid-column: 1 / -1; } .calc-indicadores small { display: block; font-size: .68rem; color: var(--calc-suave); } .calc-indicadores strong { font-size: .95rem; font-variant-numeric: tabular-nums; } .calc-painel__acoes { display: grid; gap: .5rem; } .calc-painel__botao { width: 100%; } .calc-painel__acoes .botao { justify-content: center; width: 100%; } .calc-painel__acoes .botao--secundario { color: var(--calc-texto); border-color: var(--calc-borda-forte); } .calc-painel__acoes .botao--secundario:hover { background: rgba(255, 255, 255, .08); } .calc-painel__acoes .botao--primario { background: var(--calc-acento); color: #06202b; } .calc-painel__acoes .botao--primario:hover { background: color-mix(in srgb, var(--calc-acento) 80%, #fff); } .calc-painel__nota { margin: 1rem 0 0; font-size: .74rem; line-height: 1.5; color: var(--calc-suave); } /* --------------------------------------------------------- salvar orçamento */ .calc-salvar { margin-top: 1.25rem; background: var(--calc-superficie); border: 1px solid var(--calc-borda); border-radius: calc(var(--raio) * .85); } .calc-salvar__titulo { display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .75rem 1rem; font-size: .88rem; font-weight: 600; cursor: pointer; list-style: none; } .calc-salvar__titulo::-webkit-details-marker { display: none; } .calc-salvar__titulo .ic { color: var(--calc-acento); } .calc-salvar__campos { padding: 0 1rem 1.15rem; } .calc-salvar__texto { margin: 0 0 1rem; font-size: .8rem; line-height: 1.55; color: var(--calc-suave); } .calc-salvar__grade { display: grid; gap: .8rem; grid-template-columns: 1fr; margin-bottom: 1rem; } @media (min-width: 640px) { .calc-salvar__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .calc-salvar__largo { grid-column: 1 / -1; } } .calc-salvar__grade label { display: block; font-size: .78rem; font-weight: 600; color: var(--calc-suave); } .calc-salvar__grade :is(input, textarea) { width: 100%; min-height: 44px; margin-top: .3rem; padding: .6rem .75rem; font: inherit; font-size: .92rem; color: var(--calc-texto); background: rgba(2, 6, 23, .5); border: 1px solid var(--calc-borda); border-radius: 10px; } .calc-salvar__grade :is(input, textarea):focus { outline: none; border-color: var(--calc-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--calc-acento) 25%, transparent); } .calc-salvar__grade textarea { resize: vertical; } .calc-salvar .botao--primario { background: var(--calc-acento); color: #06202b; } /* Aviso de erro dentro da seção escura precisa de contraste próprio. */ .secao--calculadora .aviso--erro { max-width: 46rem; margin: 0 auto 1.25rem; } /* ================================================= página pública do orçamento */ .orcamento__cabecalho { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .orcamento__cabecalho h1 { margin: .2em 0 .15em; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); } .orcamento__codigo { margin: 0; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-primaria); } .orcamento__codigo strong { font-family: var(--fonte-titulo); letter-spacing: .18em; } .orcamento__data { margin: 0; font-size: .88rem; opacity: .72; } .orcamento__cliente { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; background: var(--cor-fundo); border: 1px solid rgba(0, 0, 0, .1); border-radius: var(--raio); } .orcamento__cliente p { margin: 0; } .orcamento__cliente small { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; } .orcamento__destaque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: 2rem; color: #fff; background: linear-gradient(150deg, var(--cor-escuro), #0b2b3a); border-radius: var(--raio); } .orcamento__destaque small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cor-calculadora, #22d3ee); } .orcamento__destaque strong { display: block; font-family: var(--fonte-titulo); font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .orcamento__destaque span { display: block; margin-top: .3rem; font-size: .9rem; opacity: .8; } .orcamento__grafico .donut { width: 130px; height: auto; } .orcamento h2 { margin: 2rem 0 .75rem; font-size: 1.2rem; } /* Tabela larga não pode empurrar a página no celular: rola dentro da caixa. */ .tabela-rolagem { overflow-x: auto; border: 1px solid rgba(0, 0, 0, .1); border-radius: var(--raio); background: var(--cor-fundo); } .tabela-orcamento { width: 100%; border-collapse: collapse; font-size: .92rem; } .tabela-orcamento th, .tabela-orcamento td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, .07); } .tabela-orcamento th { font-weight: 500; } .tabela-orcamento td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tabela-orcamento tr:last-child :is(th, td) { border-bottom: 0; } .tabela-orcamento .destaque :is(th, td) { font-weight: 700; background: var(--cor-fundo-alt); } .tabela-orcamento .destaque--forte :is(th, td) { color: var(--cor-primaria); font-size: 1.05rem; } .orcamento__obs { padding: 1rem 1.25rem; background: var(--cor-fundo); border-left: 4px solid var(--cor-primaria); border-radius: calc(var(--raio) * .4); } .orcamento__rodape { margin-top: 2rem; font-size: .8rem; opacity: .65; } .orcamento__voltar { margin-top: 1.5rem; } /* -------------------------------------------------------------- impressão */ @media print { .calc__barra, .calc-painel__acoes, .calc-salvar, .orcamento__imprimir, .orcamento__voltar { display: none !important; } .calc, .calc-painel, .orcamento__destaque { color: #000 !important; background: none !important; border-color: #999 !important; box-shadow: none !important; } .calc::before { display: none !important; } .calc :is(dt, small, label, .calc-campo__ajuda) { color: #333 !important; } .calc__grid { display: block; } .calc__campos { margin-bottom: 1rem; } .orcamento__destaque small, .tabela-orcamento .destaque--forte :is(th, td) { color: #000 !important; } .tabela-rolagem { overflow: visible; } }