/* AmigoSmart — dois mundos num arquivo só. PÚBLICO (body.site): "Instrumento de medição". O contrato da direção está comentado no topo do , em app/views/layout.php. PAINEL (/admin): continua claro e de trabalho. O admin.css depende dos tokens herdados (--papel, --tinta, --linha, --bordo-*, --ouro-*…) e das regras neutras de formulário deste arquivo: nada aqui pode escurecê-lo. */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } :root { /* ---- mundo público: o instrumento ---- */ --vacuo: #07090c; /* fundo: dentro do aparelho */ --painel: #0b1117; /* superfície */ --painel-2: #101a22; /* superfície erguida */ --aco: #1b2b3a; /* fio de 1px */ --aco-claro: #2c4356; --leitura: #eef4f7; /* texto */ --nevoa: #96abb9; /* texto secundário — 6,9:1 no painel */ --sinal: #f2c53d; /* a leitura: preço, prazo, resposta */ --traco: #3fd9c9; /* o traço de medição */ --falha: #f4705f; /* o defeito */ --canto: 2px; /* canto de instrumento, não de cartão */ /* ---- herdados: o painel /admin depende destes ---- */ --grafite-950: #090d10; --grafite-900: #10161b; --grafite-800: #172028; --grafite-700: #213039; --grafite-600: #2e404b; --ciano-100: #d7f7f2; --ciano-300: #7ce8dc; --ciano-400: #3fd9c9; --ciano-500: #14c0ae; --ciano-700: #0a7a70; --laranja: #ff9447; --papel: #f3f6f7; --papel-2: #e7edef; --branco: #ffffff; --tinta: #0f171d; --tinta-2: #4a5963; --linha: #dbe3e6; --erro: #c0392b; --bordo-950: var(--grafite-950); --bordo-900: var(--grafite-900); --bordo-800: var(--grafite-800); --bordo-700: var(--grafite-700); --bordo-600: var(--grafite-600); --ouro-100: var(--ciano-100); --ouro-300: var(--ciano-300); --ouro-500: var(--ciano-500); --ouro-700: var(--ciano-700); --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display: "Archivo", "Inter", system-ui, sans-serif; --serif: var(--display); --topo-h: 72px; --raio: 14px; --sombra: 0 1px 2px rgb(9 13 16 / 6%), 0 18px 40px -20px rgb(9 13 16 / 30%); --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23ffffff' stroke-opacity='.045'/%3E%3C/svg%3E"); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.65; color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; } /* height: auto é essencial: sem ele, o atributo height="…" do HTML vence a proporção do CSS e a foto estica. */ img, svg { max-width: 100%; height: auto; display: block; } p { margin: 0 0 1em; } h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; } .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); } .wrap--estreito { max-width: 860px; } .visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .icone { width: 1.25em; height: 1.25em; flex-shrink: 0; } .centro { text-align: center; } /* ============================================================ MUNDO PÚBLICO — instrumento de medição ============================================================ */ body.site { color-scheme: dark; background: var(--vacuo); color: var(--leitura); /* dígito tabular em todo o site: número é leitura de instrumento */ font-variant-numeric: tabular-nums; scrollbar-color: var(--aco-claro) var(--vacuo); } .site a { color: var(--traco); text-decoration-thickness: 1px; text-underline-offset: .25em; } /* A marca é um link, e a regra acima a pintava inteira de ciano: só o "Smart" é ciano. */ .site .marca, .site .marca:hover { color: var(--leitura); } .site .menu-btn { color: var(--leitura); } .site a:hover { color: var(--sinal); } .site :focus-visible { outline: 2px solid var(--sinal); outline-offset: 3px; } .site ::selection { background: var(--sinal); color: var(--vacuo); } .site { caret-color: var(--traco); } .site ::placeholder { color: #6d8391; opacity: 1; } .pular { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--sinal); color: var(--vacuo); padding: .75rem 1rem; font-weight: 700; border-radius: var(--canto); } .pular:focus { top: 1rem; } /* Rótulo do instrumento: versais estreitas com um tique antes. (Não é sobrelinha de título: só rotula campos, colunas e eixos.) */ .rotulo { display: inline-flex; align-items: baseline; gap: .5rem; font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nevoa); } .rotulo::before { content: ""; align-self: center; width: 10px; height: 1px; background: var(--aco-claro); } .site .titulo-secao { font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: var(--leitura); margin: 0 0 .8rem; } .site .titulo-secao--menor { font-size: clamp(1.4rem, 2.2vw, 1.85rem); } .site .cabecalho { max-width: 62ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); } .site .cabecalho__lead { font-size: 1.05rem; color: var(--nevoa); margin: 0; max-width: 68ch; } .site .cabecalho--linha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; max-width: none; } .site .secao { padding-block: clamp(3rem, 7vw, 5rem); background: var(--vacuo); } .site .secao--papel { background: var(--painel); } .site .secao--escura { background: var(--painel-2); } .site .secao + .secao { border-top: 1px solid var(--aco); } /* Elo: em vez do glifo →, um tique desenhado que anda ao passar o mouse */ .link-seta { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 600; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ciano-700); text-decoration: none; } /* O ciano claro só serve sobre fundo escuro: no painel ele fica ilegível. */ .site .link-seta { color: var(--traco); } .site .link-seta:hover { color: var(--sinal); } /* O tique estica no hover por transform (animar width sacode o layout). */ .link-seta::after { content: ""; width: 34px; height: 1px; background: currentColor; transform: scaleX(.65); transform-origin: left; transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .link-seta:hover { color: var(--grafite-800); } .link-seta:hover::after { transform: none; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.5rem; font: 700 .92rem/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; text-align: center; border: 1px solid transparent; border-radius: var(--canto); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } .btn--ouro { background: var(--sinal); color: var(--vacuo); } .btn--ouro:hover { background: #ffd964; color: var(--vacuo); box-shadow: 0 0 0 3px rgb(242 197 61 / 22%); } /* Padrão = fundo claro (painel). O mundo escuro sobrescreve logo abaixo. */ .btn--linha { border-color: var(--linha); color: var(--grafite-900); background: transparent; } .btn--linha:hover { border-color: var(--ciano-500); color: var(--ciano-700); } .site .btn--linha { border-color: var(--aco-claro); color: var(--leitura); } .site .btn--linha:hover { border-color: var(--traco); color: var(--traco); } .btn--bordo { background: var(--grafite-900); color: #fff; } .btn--bordo:hover { background: var(--grafite-700); color: #fff; } .btn--sm { padding: .6rem 1rem; font-size: .8rem; } .btn--grande { padding: 1.1rem 1.9rem; font-size: .98rem; } .btn--bloco { width: 100%; } .btn .icone { width: 1.1em; height: 1.1em; } a.btn.btn--ouro, a.btn.btn--ouro:hover { color: var(--vacuo); } a.btn.btn--bordo, a.btn.btn--bordo:hover { color: #fff; } .site a.btn.btn--linha { color: var(--leitura); } .site a.btn.btn--linha:hover { color: var(--traco); } .btn-texto { padding: 0; border: 0; background: none; font: inherit; color: var(--ciano-700); text-decoration: underline; cursor: pointer; } .site .btn-texto { color: var(--nevoa); } .site .btn-texto:hover { color: var(--sinal); } /* ---------- Topo ---------- */ .site .topo { position: sticky; top: 0; z-index: 50; background: rgb(7 9 12 / 92%); backdrop-filter: blur(6px); border-bottom: 1px solid var(--aco); } .site .topo.is-rolado { border-bottom-color: var(--aco-claro); } .topo__in { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; height: var(--topo-h); } /* Cor padrão = painel /admin (fundo claro). O site público sobrescreve em .site; sem isso a marca fica branca sobre branco no login e some o "Amigo". */ .marca { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--grafite-900); flex-shrink: 0; } .marca:hover { color: var(--grafite-900); } .marca__simbolo { width: 34px; height: 34px; color: currentColor; } .marca__simbolo .pulso { stroke: var(--ciano-700); } .marca__txt { display: flex; flex-direction: column; } .marca__nome { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; } .marca__nome b { font-weight: 700; color: var(--ciano-700); } .marca__sub { margin-top: .3rem; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); } .site .marca__simbolo .pulso { stroke: var(--traco); } .site .marca__nome b { color: var(--traco); } .site .marca__sub { color: var(--nevoa); } .nav { display: flex; align-items: center; gap: 1.6rem; } .nav__lista { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } /* Classe compartilhada: o PAINEL CLARO é o padrão, o mundo escuro sobrescreve em `.site` (logo abaixo). O contrário deixava o menu do /admin em branco sobre papel claro — 1,03:1, só legível no hover. */ .nav__link { position: relative; display: block; padding: .4rem 0; font-size: .88rem; font-weight: 500; color: var(--tinta-2); text-decoration: none; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s cubic-bezier(.2, .8, .2, 1); } .nav__link:hover, .nav__link.is-ativo { color: var(--tinta); } .site .nav__link { color: var(--leitura); } .site .nav__link:hover, .site .nav__link.is-ativo { color: var(--traco); } .nav__link:hover::after, .nav__link.is-ativo::after { transform: none; } .nav__grupo { position: relative; } .nav__sub { list-style: none; margin: 0; padding: .35rem; position: absolute; top: 100%; left: -.8rem; min-width: 290px; background: var(--painel-2); border: 1px solid var(--aco-claro); border-radius: var(--canto); box-shadow: 0 24px 40px -18px rgb(0 0 0 / 80%); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .nav__grupo:hover .nav__sub, .nav__grupo:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .nav__sub a { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: var(--canto); color: var(--leitura); text-decoration: none; font-size: .9rem; } .nav__sub a .icone { color: var(--traco); } .nav__sub a:hover, .nav__sub a[aria-current] { background: rgb(63 217 201 / 10%); color: var(--traco); } .menu-btn { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--aco-claro); border-radius: var(--canto); cursor: pointer; position: relative; color: var(--grafite-900); } .menu-btn__barra, .menu-btn__barra::before, .menu-btn__barra::after { position: absolute; left: 11px; width: 20px; height: 1px; background: currentColor; transition: transform .3s ease, opacity .2s ease; } .menu-btn__barra { top: 50%; } .menu-btn__barra::before, .menu-btn__barra::after { content: ""; left: 0; } .menu-btn__barra::before { top: -6px; } .menu-btn__barra::after { top: 6px; } .menu-btn[aria-expanded="true"] .menu-btn__barra { background: transparent; } .menu-btn[aria-expanded="true"] .menu-btn__barra::before { transform: translateY(6px) rotate(45deg); } .menu-btn[aria-expanded="true"] .menu-btn__barra::after { transform: translateY(-6px) rotate(-45deg); } /* ---------- Escala graduada: a lei de composição da página ---------- Fio de 1px com tiques a cada 40px. É o eixo do instrumento: separa o topo da leitura e volta como divisor entre as seções. */ .escala { position: relative; height: 13px; border-top: 1px solid var(--aco-claro); background-image: repeating-linear-gradient(to right, var(--aco-claro) 0 1px, transparent 1px 40px); background-size: 40px 6px; background-repeat: repeat-x; } .escala__traco { position: absolute; top: -1px; left: 0; height: 1px; width: 100%; background: linear-gradient(to right, transparent, var(--traco) 60%, var(--sinal)); transform-origin: left; } @media (prefers-reduced-motion: no-preference) { /* O único momento autoral do site: a varredura do traço, uma vez. */ .escala__traco { animation: varredura 1.5s cubic-bezier(.16, 1, .3, 1) both; } @keyframes varredura { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } } } /* ---------- Primeira tela ---------- */ .site .hero { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; background: var(--vacuo); } .hero__grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .hero__titulo { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; color: var(--leitura); margin: 0 0 1.1rem; } .hero__titulo em { font-style: normal; color: var(--traco); } .hero__lead { max-width: 46ch; font-size: 1.06rem; color: var(--nevoa); margin-bottom: 2rem; } .hero__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } .hero__acoes--centro { justify-content: center; } /* O mostrador: as três perguntas de quem está com o aparelho quebrado, cada uma com a sua leitura. É a resposta do site, em forma de instrumento. */ .mostrador { margin: 0; border-top: 1px solid var(--aco-claro); } .mostrador__canal { display: grid; grid-template-columns: 13.5rem 1fr; align-items: baseline; gap: .2rem 1.5rem; padding: 1.1rem 0 1.15rem; border-bottom: 1px solid var(--aco); } .mostrador__pergunta { font-family: var(--display); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nevoa); } .mostrador__leitura { grid-column: 2; margin: 0; font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--leitura); } .mostrador__leitura--sinal { color: var(--sinal); } .mostrador__leitura small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nevoa); margin-bottom: .2rem; } .mostrador__nota { grid-column: 2; margin: .3rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--nevoa); max-width: 46ch; } /* A foto como espécime sob o instrumento: mira com linha-guia até o rótulo. */ .especime { position: relative; margin: 0; background: var(--painel); border: 1px solid var(--aco); border-radius: var(--canto); } .especime__quadro { position: relative; overflow: hidden; } .especime__quadro img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: center 42%; } /* O instrumento atende a um ponto: o resto da foto recua para a mira aparecer. */ .especime__foco { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 150px at 44% 34%, transparent 0 58px, rgb(7 9 12 / 30%) 72%, rgb(7 9 12 / 62%) 100%); } .especime__mira { position: absolute; top: 34%; left: 44%; width: 96px; height: 96px; color: var(--sinal); transform: translate(-50%, -50%); filter: drop-shadow(0 0 5px rgb(7 9 12 / 95%)); } /* Linha-guia: desce da mira até o rótulo, como cota de desenho técnico. */ .especime__guia { position: absolute; left: 44%; top: calc(34% + 48px); bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--sinal), rgb(242 197 61 / 15%)); pointer-events: none; } .especime__legenda { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .6rem 1.2rem; padding: .95rem 1.1rem; border-top: 1px solid var(--aco); } .especime__valor { display: block; font-family: var(--display); font-size: .95rem; font-weight: 700; letter-spacing: .02em; color: var(--leitura); } .especime__nota { display: block; margin-top: .25rem; font-size: .86rem; line-height: 1.45; color: var(--nevoa); max-width: 44ch; } .especime__cota { font-family: var(--display); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sinal); white-space: nowrap; } /* ---------- Canais: os serviços como linhas de leitura ---------- Substitui a grade de cartões iguais. Cada área é uma linha do instrumento. */ .canais { border-top: 1px solid var(--aco-claro); } .canal { display: grid; grid-template-columns: 1.15fr 1fr 220px; align-items: start; gap: 1rem 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--aco); transition: background-color .25s ease; } .canal:hover { background: rgb(63 217 201 / 4%); } .canal__nome { display: flex; align-items: center; gap: .7rem; font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .4rem; } .canal__nome a { color: var(--leitura); text-decoration: none; } .canal__nome a:hover { color: var(--traco); } .canal__nome .icone { width: 1.5rem; height: 1.5rem; color: var(--traco); } .canal__resumo { margin: 0; font-size: .94rem; color: var(--nevoa); max-width: 40ch; } .canal__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .92rem; } .canal__lista a { display: inline-flex; align-items: baseline; gap: .55rem; color: var(--leitura); text-decoration: none; } .canal__lista a:not(.link-seta)::before { content: ""; width: 6px; height: 1px; background: var(--traco); transform: translateY(-.3em); } .canal__lista .link-seta { margin-top: .5rem; } .canal__lista a:hover { color: var(--traco); } .canal__foto { overflow: hidden; border: 1px solid var(--aco); border-radius: var(--canto); } .canal__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.85) contrast(1.05); transition: filter .3s ease; } .canal:hover .canal__foto img { filter: none; } .canal__acao { grid-column: 1 / -1; } /* ---------- Eixo do atendimento: pontos marcados numa régua ---------- */ .eixo { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; border-top: 1px solid var(--aco-claro); } .eixo__ponto { position: relative; padding: 1.6rem 1.2rem 0 0; } .eixo__ponto::before { content: ""; position: absolute; top: -1px; left: 0; width: 1px; height: 13px; background: var(--traco); } .eixo__titulo { font-size: 1.05rem; margin: 0 0 .45rem; color: var(--leitura); } .eixo__ponto p { margin: 0; font-size: .92rem; color: var(--nevoa); max-width: 34ch; } /* ---------- Leituras: pares rótulo/valor (bancada, contato, provas) ---------- */ .leituras { list-style: none; margin: 1.4rem 0 1.8rem; padding: 0; border-top: 1px solid var(--aco); } .leituras li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .2rem .9rem; padding: .85rem 0; border-bottom: 1px solid var(--aco); } .leituras .icone { color: var(--traco); align-self: center; } .leituras strong { display: block; font-family: var(--display); font-size: .98rem; color: var(--leitura); } .leituras span { font-size: .92rem; color: var(--nevoa); } .leituras li > span { grid-column: 2; } /* ---------- Bancada (prova) ---------- */ .bancada { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .mosaico { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; aspect-ratio: 5 / 4; background: var(--aco-claro); border: 1px solid var(--aco-claro); border-radius: var(--canto); overflow: hidden; } .mosaico img { width: 100%; height: 100%; object-fit: cover; } .mosaico img:first-child { grid-row: span 2; } /* ---------- Faixa da OS ---------- */ .faixa-os { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2.5rem; padding: clamp(1.3rem, 3vw, 1.8rem); background: var(--painel-2); border: 1px solid var(--aco-claro); border-left: 1px solid var(--sinal); border-radius: var(--canto); } .faixa-os p { margin: 0; color: var(--nevoa); } .faixa-os strong { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--leitura); } /* ---------- Soluções para empresas ---------- */ .solucoes-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--aco); border: 1px solid var(--aco); border-radius: var(--canto); } .solucao { display: flex; flex-direction: column; padding: 1.6rem 1.4rem; background: var(--painel); } .solucao:hover { background: var(--painel-2); } .solucao__icone { color: var(--traco); margin-bottom: .9rem; } .solucao__icone .icone { width: 1.7rem; height: 1.7rem; } .solucao h3 { font-size: 1.15rem; color: var(--leitura); margin-bottom: .5rem; } .solucao h3 a { color: inherit; text-decoration: none; } .solucao h3 a:hover { color: var(--traco); } .solucao p { color: var(--nevoa); font-size: .93rem; flex: 1; } .solucao ul { list-style: none; margin: 0 0 1.2rem; padding: 0; font-size: .88rem; color: var(--nevoa); } .solucao li { padding: .2rem 0 .2rem 1.1rem; position: relative; } .solucao li::before { content: ""; position: absolute; left: 0; top: .85em; width: 6px; height: 1px; background: var(--traco); } /* ---------- Marcas ---------- */ .marcas { display: flex; flex-wrap: wrap; gap: 0 1.6rem; list-style: none; margin: 0; padding: 0; font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: .02em; color: var(--leitura); } .marcas li { padding: .5rem 0; } .marcas li + li { position: relative; } .marcas li + li::before { content: ""; position: absolute; left: -.8rem; top: 50%; width: 1px; height: 12px; background: var(--aco-claro); transform: translateY(-50%); } .marcas__nota { margin-top: 1.2rem; font-size: .85rem; color: var(--nevoa); max-width: 70ch; } /* ---------- Selos ---------- */ .selos { display: flex; flex-wrap: wrap; gap: 0 1.4rem; list-style: none; margin: 1.6rem 0 0; padding: 0; } .selos li { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 0; font-size: .86rem; color: var(--nevoa); } .selos .icone { color: var(--traco); } .selos strong { color: var(--leitura); font-weight: 600; } /* ---------- Perguntas ---------- */ .faq { border-top: 1px solid var(--aco-claro); } .faq__item { border-bottom: 1px solid var(--aco); } .site .faq__pergunta { position: relative; list-style: none; cursor: pointer; padding: 1.15rem 3rem 1.15rem 0; font-family: var(--display); font-size: 1.08rem; font-weight: 600; color: var(--leitura); } .faq__pergunta::-webkit-details-marker { display: none; } .faq__pergunta::before, .faq__pergunta::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 13px; height: 1px; background: var(--traco); transition: transform .25s ease; } .faq__pergunta::after { transform: rotate(90deg); } .faq__item[open] .faq__pergunta::after { transform: rotate(0); } .site .faq__resposta { padding: 0 3rem 1.3rem 0; color: var(--nevoa); } .faq__resposta p { margin: 0; max-width: 70ch; } /* ---------- Contato ---------- */ .contato__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contato__lista { margin: 1.3rem 0 0; border-top: 1px solid var(--aco); } .contato__lista > div { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--aco); } .site .contato__lista dt { font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nevoa); padding-top: .2em; } .contato__lista dd { margin: 0; } .site .contato__cartao { padding: clamp(1.6rem, 4vw, 2.4rem); background: var(--painel-2); border: 1px solid var(--aco-claro); border-radius: var(--canto); } .contato__cartao-titulo { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--leitura); margin: 0 0 .9rem; } .site .contato__cartao p:not([class]) { color: var(--nevoa); } .contato__acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; } /* ---------- Rodapé ---------- */ .site .rodape { padding-top: clamp(2.8rem, 6vw, 4rem); font-size: .92rem; background: var(--painel); border-top: 1px solid var(--aco-claro); color: var(--nevoa); } .site .rodape a { color: var(--nevoa); text-decoration: none; } .site .rodape a:hover { color: var(--traco); } .rodape__grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 2rem; } .rodape__sub { margin-top: 1rem; max-width: 26em; } .rodape__social { font-weight: 600; } .rodape__titulo { font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--leitura); margin-bottom: 1rem; } .rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; line-height: 1.45; } .rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 2.5rem; padding-block: 1.4rem; border-top: 1px solid var(--aco); font-size: .78rem; color: #7c919e; } .rodape__base p { margin: 0; max-width: 80ch; } .rodape__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; } .rodape__botao { padding: 0; background: none; border: 0; font: inherit; color: var(--nevoa); cursor: pointer; } .rodape__botao:hover { color: var(--traco); } /* ---------- Páginas internas ---------- */ .site .hero-pagina { position: relative; padding-block: clamp(2.2rem, 5vw, 3.6rem); background: var(--vacuo); border-bottom: 1px solid var(--aco); } .hero-pagina--centro { text-align: center; } .hero-pagina--centro .migalhas ol { justify-content: center; } .hero-pagina__grade { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.5rem; align-items: center; } .hero-pagina__foto { margin: 0; } .hero-pagina__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--aco); border-radius: var(--canto); } .hero-pagina__icone { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--aco); border-radius: var(--canto); background: var(--painel); color: var(--traco); } .hero-pagina__icone .icone { width: 34%; height: 34%; stroke-width: 1.1; } .migalhas ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1.3rem; padding: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--nevoa); } .migalhas li + li::before { content: "/"; margin-right: .4rem; color: var(--aco-claro); } .site .migalhas a { color: var(--nevoa); text-decoration: none; } .site .migalhas a:hover { color: var(--traco); } .hero-pagina__numeral { font-family: var(--display); font-size: 2.6rem; font-weight: 700; color: var(--sinal); line-height: 1; margin: 0 0 .4rem; } .hero-pagina__titulo { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -.035em; color: var(--leitura); } .hero-pagina__local { margin: 1rem 0 0; color: var(--nevoa); font-size: 1.04rem; max-width: 60ch; } .hero-pagina--centro .hero-pagina__local { margin-inline: auto; } .hero-pagina .hero__acoes { margin-top: 1.6rem; } .nao-encontrada__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 2rem; } .area-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .area-indice { position: sticky; top: calc(var(--topo-h) + 24px); } .area-indice__titulo { font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nevoa); margin-bottom: .8rem; } .area-indice ul { list-style: none; margin: 0 0 1.5rem; padding: 0; border-left: 1px solid var(--aco); } .site .area-indice a { display: block; margin-left: -1px; padding: .45rem 0 .45rem 1rem; border-left: 1px solid transparent; font-size: .9rem; line-height: 1.35; color: var(--nevoa); text-decoration: none; } .site .area-indice a:hover { color: var(--traco); border-left-color: var(--traco); } .site .area-intro p { color: var(--nevoa); font-size: 1.02rem; } .site .area-intro__lead { font-size: 1.18rem !important; color: var(--leitura) !important; font-weight: 400; } .servico { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.2rem; padding-block: 1.7rem; border-top: 1px solid var(--aco); } .site .servico__num { display: block; width: auto; height: auto; background: none; border-radius: 0; font-family: var(--display); font-size: .82rem; font-weight: 600; letter-spacing: .1em; color: var(--sinal); padding-top: .35rem; margin: 0; } .site .servico__titulo { font-size: 1.25rem; color: var(--leitura); margin-bottom: .5rem; } .site .servico p { color: var(--nevoa); } .area-faq { margin-top: 2rem; padding-top: 2.4rem; border-top: 1px solid var(--aco-claro); } .outras-areas__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--aco); border: 1px solid var(--aco); border-radius: var(--canto); margin-top: 1.2rem; } .site .outra-area { display: flex; gap: .9rem; align-items: flex-start; padding: 1.15rem; background: var(--painel); text-decoration: none; color: var(--nevoa); } .site .outra-area:hover { background: var(--painel-2); color: var(--nevoa); } .outra-area .icone { width: 1.5rem; height: 1.5rem; color: var(--traco); } .site .outra-area__nome { display: block; font-family: var(--display); font-weight: 700; color: var(--leitura); } .outra-area__resumo { display: block; font-size: .85rem; color: var(--nevoa); } /* Sobre */ .sobre-grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .sobre-grade img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--aco); border-radius: var(--canto); } .galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--aco); border: 1px solid var(--aco); border-radius: var(--canto); } .galeria figure { margin: 0; background: var(--painel); } .galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; } .galeria figcaption { font-size: .8rem; color: var(--nevoa); padding: .55rem .7rem; } /* Números: leitura de instrumento em linha, não bloco de métrica */ .site .numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid var(--aco-claro); } .site .numeros li { padding: 1rem 1rem 1rem 0; border-radius: 0; background: none; border-right: 1px solid var(--aco); } .site .numeros li:last-child { border-right: 0; } .site .numeros strong { display: block; font-family: var(--display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; color: var(--sinal); line-height: 1.05; } .site .numeros span { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nevoa); } .site .texto-longo h2 { font-size: 1.35rem; color: var(--leitura); margin: 2.2rem 0 .7rem; } .texto-longo h2:first-child { margin-top: 0; } .site .texto-longo p { color: var(--nevoa); max-width: 70ch; } /* ---------- Dicas (artigos) ---------- */ .artigos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--aco); border: 1px solid var(--aco); border-radius: var(--canto); } .site .artigo-card { background: var(--painel); border: 0; border-radius: 0; } .site .artigo-card:hover { background: var(--painel-2); } .artigo-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .artigo-card__link:hover { color: inherit; } .artigo-card__capa { aspect-ratio: 16 / 9; overflow: hidden; background: var(--painel-2); border-bottom: 1px solid var(--aco); } .artigo-card__capa img { width: 100%; height: 100%; object-fit: cover; } .artigo-card__sem-capa { display: grid; place-items: center; height: 100%; color: var(--traco); } .artigo-card__marca { width: 20%; } .artigo-card__marca .pulso { stroke: var(--traco); } .artigo-card__corpo { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.2rem 1.3rem; } .artigo-card__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .6rem; font-family: var(--display); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nevoa); } .site .artigo-card__titulo { font-size: 1.14rem; color: var(--leitura); margin-bottom: .5rem; } .site .artigo-card__resumo { color: var(--nevoa); font-size: .91rem; flex: 1; } .paginacao { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 2.5rem; font-size: .92rem; color: var(--nevoa); } .paginacao a { font-weight: 600; text-decoration: none; } .vazio-publico { text-align: center; font-size: 1.05rem; color: var(--nevoa); } .hero-artigo__titulo { font-size: clamp(1.8rem, 3.8vw, 2.7rem); margin-top: .4rem; } .hero-artigo__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.2rem 0 0; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--nevoa); } .artigo-corpo { padding-top: 2.4rem; } .artigo-capa { margin: 0 0 2.2rem; } .artigo-capa img { width: 100%; height: auto; border: 1px solid var(--aco); border-radius: var(--canto); } .site .artigo-texto { font-size: 1.06rem; line-height: 1.75; color: #cfdde5; max-width: 70ch; } .artigo-texto p { margin-bottom: 1.2em; } .site .artigo-texto h2 { font-size: 1.5rem; color: var(--leitura); margin: 2.2rem 0 .8rem; } .site .artigo-texto h3 { font-size: 1.2rem; color: var(--leitura); margin: 1.8rem 0 .7rem; } .artigo-texto ul, .artigo-texto ol { padding-left: 1.3rem; margin: 0 0 1.3em; } .artigo-texto li { margin-bottom: .4em; } .artigo-texto li::marker { color: var(--traco); } .site .artigo-texto blockquote { margin: 1.8rem 0; padding: .1rem 0 .1rem 1.2rem; border-left: 1px solid var(--sinal); background: none; border-radius: 0; color: var(--leitura); } .artigo-texto blockquote p { margin: 0; } .artigo-texto figure { margin: 2rem 0; } .artigo-texto figure img { width: 100%; height: auto; border: 1px solid var(--aco); border-radius: var(--canto); } .artigo-texto figcaption { margin-top: .5rem; font-size: .84rem; color: var(--nevoa); } .site .artigo-aviso { margin-top: 2.4rem; padding: 1rem 1.2rem; background: var(--painel-2); border: 1px solid var(--aco); border-radius: var(--canto); font-size: .88rem; color: var(--nevoa); } .artigo-compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin: 1.8rem 0; font-size: .9rem; font-weight: 600; } .artigo-compartilhar span { color: var(--nevoa); font-weight: 500; } /* ---------- Acompanhar OS ---------- */ .site .acomp-intro { max-width: 60ch; color: var(--nevoa); } .acomp-form { display: grid; grid-template-columns: 1fr 11rem auto; gap: 1rem; align-items: end; margin: 1.5rem 0 1rem; } .acomp-form .campo { margin: 0; } .site .acomp-ajuda { font-size: .92rem; color: var(--nevoa); } .site .acomp-cartao { margin-top: 1.4rem; padding: 1.4rem; background: var(--painel); border: 1px solid var(--aco); border-radius: var(--canto); } .acomp-topo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .site .acomp-rotulo { display: block; font-family: var(--display); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nevoa); } .acomp-numero { font-family: var(--display); font-size: 1.55rem; letter-spacing: .02em; color: var(--sinal); } .site .acomp-status { padding: .3rem .8rem; border-radius: var(--canto); font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; background: rgb(63 217 201 / 12%); color: var(--traco); border: 1px solid rgb(63 217 201 / 35%); } .site .acomp-status--pronto { background: rgb(63 217 201 / 18%); color: var(--traco); } .site .acomp-status--aguardando_aprovacao, .site .acomp-status--aguardando_peca { background: rgb(242 197 61 / 14%); color: var(--sinal); border-color: rgb(242 197 61 / 35%); } .site .acomp-status--cancelado, .site .acomp-status--devolvido { background: rgb(244 112 95 / 14%); color: var(--falha); border-color: rgb(244 112 95 / 35%); } .acomp-linha { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; list-style: none; margin: 1.4rem 0; padding: 0; } .site .acomp-linha li { padding-top: .7rem; border-top: 1px solid var(--aco); font-size: .78rem; letter-spacing: .04em; color: var(--nevoa); } .site .acomp-linha li.is-feito { border-top-color: var(--traco); color: var(--leitura); } .site .acomp-linha li.is-atual { border-top-color: var(--sinal); border-top-width: 2px; padding-top: calc(.7rem - 1px); color: var(--sinal); font-weight: 700; } .acomp-dados { display: grid; grid-template-columns: 8.5rem 1fr; gap: .55rem 1rem; margin: 0; } .site .acomp-dados dt { font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nevoa); padding-top: .3em; } .acomp-dados dd { margin: 0; } .acomp-h2 { margin: 0 0 .6rem; font-size: 1.12rem; } .acomp-tabela { width: 100%; margin: .6rem 0; border-collapse: collapse; font-size: .95rem; } .site .acomp-tabela th, .site .acomp-tabela td { padding: .55rem .3rem; border-bottom: 1px solid var(--aco); text-align: left; } .site .acomp-tabela th { font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nevoa); } .acomp-tabela th:last-child, .acomp-tabela td:last-child { text-align: right; white-space: nowrap; } .site .acomp-total td { font-weight: 700; color: var(--sinal); border-bottom: 0; } .acomp-decisao { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1rem; } .acomp-historico { list-style: none; margin: 0; padding: 0; } .site .acomp-historico li { padding: .7rem 0; border-bottom: 1px solid var(--aco); } .site .acomp-historico small { color: var(--nevoa); } .acomp-acoes { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-top: 1.5rem; } .site .acomp-ok { margin-top: 1rem; padding: .9rem 1.1rem; border: 1px solid rgb(63 217 201 / 40%); border-radius: var(--canto); background: rgb(63 217 201 / 10%); color: var(--traco); font-weight: 600; } /* ---------- Formulários ---------- As regras sem .site são as do painel /admin (claras). O mundo público recebe a versão escura logo abaixo. */ .campo { margin-top: 1.1rem; min-width: 0; } .campo__rotulo { display: block; margin: 0 0 .4rem; font-size: .88rem; font-weight: 600; color: var(--tinta); } .campo__opcional { font-weight: 400; color: var(--tinta-2); } .campo__erro { color: var(--erro); font-size: .86rem; margin: .4rem 0 0; } .campo__dica { color: var(--tinta-2); font-size: .84rem; margin: .4rem 0 0; } input:not([type="radio"], [type="checkbox"], [type="file"]), select, textarea { width: 100%; padding: .8rem .95rem; font: inherit; font-size: 1rem; color: var(--tinta); background: #fff; border: 1.5px solid #cfd9dd; border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; } textarea { resize: vertical; min-height: 110px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ciano-500); box-shadow: 0 0 0 3px rgb(20 192 174 / 18%); } [aria-invalid="true"] { border-color: var(--erro) !important; } .alerta { margin-bottom: 1.6rem; padding: .95rem 1.15rem; background: #fdeeec; border: 1px solid rgb(192 57 43 / 40%); border-radius: 8px; color: #7a2016; } .site .campo__rotulo { font-family: var(--display); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nevoa); } .site .campo__opcional { letter-spacing: .06em; text-transform: none; color: #7c919e; } .site .campo__dica { color: var(--nevoa); } .site .campo__erro { color: var(--falha); } .site input:not([type="radio"], [type="checkbox"], [type="file"]), .site select, .site textarea { color: var(--leitura); background: var(--painel-2); border: 1px solid var(--aco-claro); border-radius: var(--canto); } .site select { background-image: linear-gradient(45deg, transparent 50%, var(--nevoa) 50%), linear-gradient(135deg, var(--nevoa) 50%, transparent 50%); } .site input:focus, .site select:focus, .site textarea:focus { border-color: var(--traco); box-shadow: 0 0 0 3px rgb(63 217 201 / 20%); } .site .alerta { background: rgb(244 112 95 / 10%); border: 1px solid rgb(244 112 95 / 40%); border-left-width: 1px; border-radius: var(--canto); color: var(--falha); } /* ---------- Agendamento / orçamento ---------- */ .agenda-layout { display: grid; grid-template-columns: 1fr 300px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .site .agenda-form { background: var(--painel); border: 1px solid var(--aco); border-radius: var(--canto); padding: clamp(1.25rem, 4vw, 2.4rem); } .etapa-form { border: 0; margin: 0 0 2.4rem; padding: 0; min-width: 0; } .etapa-form[hidden] { display: none; } .site .etapa-form__titulo { display: flex; align-items: center; gap: .75rem; padding: 0; margin-bottom: 1.2rem; font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: var(--leitura); } .site .etapa-form__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--canto); background: none; border: 1px solid var(--sinal); color: var(--sinal); font-size: .85rem; flex-shrink: 0; } .site .grupo-rotulo { margin: 1.2rem 0 .5rem; font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nevoa); } .opcoes-area { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; } .opcoes-area--3 { grid-template-columns: repeat(3, 1fr); } .site .opcao-area { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: .95rem; border: 1px solid var(--aco-claro); border-radius: var(--canto); background: var(--painel-2); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .site .opcao-area:hover { border-color: var(--traco); } .opcao-area input, .pilula input { position: absolute; opacity: 0; pointer-events: none; } .site .opcao-area:has(input:checked) { border-color: var(--sinal); background: rgb(242 197 61 / 10%); } .opcao-area:has(input:focus-visible), .pilula:has(input:focus-visible) span { outline: 2px solid var(--sinal); outline-offset: 2px; } .site .opcao-area .icone { width: 1.5rem; height: 1.5rem; color: var(--traco); } .site .opcao-area:has(input:checked) .icone { color: var(--sinal); } .site .opcao-area__nome { font-family: var(--display); font-weight: 600; font-size: .9rem; line-height: 1.25; color: var(--leitura); } .pilulas { display: flex; flex-wrap: wrap; gap: .5rem; } .pilula { position: relative; cursor: pointer; } .site .pilula span { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border: 1px solid var(--aco-claro); border-radius: var(--canto); font-size: .9rem; background: var(--painel-2); color: var(--leitura); transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .site .pilula:hover span { border-color: var(--traco); } .site .pilula:has(input:checked) span { background: var(--sinal); border-color: var(--sinal); color: var(--vacuo); font-weight: 600; } .grade-campos { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1.1rem; } .grade-campos .campo--largo { grid-column: 1 / -1; } .campo-mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .aceite { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.5rem; font-size: .92rem; color: var(--tinta-2); cursor: pointer; } .site .aceite { color: var(--nevoa); } .aceite input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--ciano-500); flex-shrink: 0; } .site .aceite input { accent-color: var(--sinal); } .fotos-envio { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: .4rem; } .fotos-envio input[type="file"] { font: inherit; font-size: .9rem; } .fotos-previa { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .6rem 0 0; padding: 0; } .site .fotos-previa img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--canto); border: 1px solid var(--aco-claro); } .site .agenda-envio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.7rem; border-top: 1px solid var(--aco); } .site .agenda-resumo { margin: 0; font-family: var(--display); font-weight: 700; color: var(--sinal); } .agenda-nativo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; } .agenda-nativo .campo { margin-top: 0; } .agenda-js { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.3rem; } .agenda-js[hidden], .agenda-nativo[hidden] { display: none; } .site .calendario { border: 1px solid var(--aco); border-radius: var(--canto); padding: 1rem; background: var(--painel-2); } .cal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; } .site .cal-mes { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--leitura); text-transform: capitalize; margin: 0; } .site .cal-nav { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 1px solid var(--aco-claro); border-radius: var(--canto); color: var(--leitura); cursor: pointer; } .cal-nav:disabled { opacity: .35; cursor: default; } .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .site .cal-dow { text-align: center; font-family: var(--display); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nevoa); padding-bottom: .3rem; } .site .cal-dia { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; font: inherit; font-size: .88rem; background: transparent; border: 1px solid transparent; border-radius: var(--canto); color: #6d8391; cursor: default; } .site .cal-dia.is-livre { color: var(--leitura); background: var(--painel); border-color: var(--aco-claro); cursor: pointer; font-weight: 600; } .cal-dia.is-livre::after { content: ""; position: absolute; bottom: 4px; width: 3px; height: 3px; background: var(--traco); } .site .cal-dia.is-livre:hover { border-color: var(--traco); } .site .cal-dia.is-selecionado { background: var(--sinal); border-color: var(--sinal); color: var(--vacuo); } .cal-dia.is-selecionado::after { background: var(--vacuo); } .site .cal-legenda { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 0; font-size: .76rem; color: var(--nevoa); } .cal-legenda::before { content: ""; width: 5px; height: 5px; background: var(--traco); } .site .horarios__titulo { font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--leitura); margin: .2rem 0 .9rem; } .horarios__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; } .site .horario { padding: .65rem 0; font: inherit; font-size: .92rem; font-weight: 600; background: var(--painel); border: 1px solid var(--aco-claro); border-radius: var(--canto); color: var(--leitura); cursor: pointer; } .site .horario:hover { border-color: var(--traco); } .site .horario[aria-checked="true"] { background: var(--sinal); border-color: var(--sinal); color: var(--vacuo); } .site .horarios__vazio { grid-column: 1 / -1; color: var(--nevoa); font-size: .9rem; margin: 0; } .agenda-lateral { position: sticky; top: calc(var(--topo-h) + 24px); } .site .lateral-cartao { padding: 1.4rem; margin-bottom: 1rem; background: var(--painel); border: 1px solid var(--aco); border-radius: var(--canto); color: var(--nevoa); } .site .lateral-cartao--escuro { background: var(--painel-2); border-color: var(--aco-claro); } .site .lateral-cartao a { color: var(--traco); } .site .lateral-cartao__titulo { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--leitura); margin-bottom: .6rem; } .lateral-cartao p { margin-bottom: .4rem; } .lateral-passos { counter-reset: p; list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .8rem; } .lateral-passos li { counter-increment: p; display: grid; grid-template-columns: 22px 1fr; gap: .6rem; font-size: .92rem; color: var(--tinta-2); line-height: 1.45; } .site .lateral-passos li { color: var(--nevoa); } .lateral-passos li::before { content: counter(p); display: block; font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--ciano-700); } .site .lateral-passos li::before { color: var(--sinal); } .site .lateral-sigilo { font-size: .8rem; color: var(--nevoa); } .site .recibo { background: var(--painel); border: 1px solid var(--aco); border-top: 1px solid var(--sinal); border-radius: var(--canto); padding: clamp(1.4rem, 4vw, 2.4rem); } .site .recibo__protocolo { font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nevoa); } .site .recibo__protocolo strong { display: block; margin-top: .3rem; font-family: var(--display); font-size: 1.55rem; letter-spacing: .04em; text-transform: none; color: var(--sinal); } .recibo__dados { margin: 1.4rem 0; border-top: 1px solid var(--aco); } .site .recibo__dados > div { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--aco); } .site .recibo__dados dt { font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nevoa); padding-top: .3em; } .recibo__dados dd { margin: 0; } .site .recibo__nota { color: var(--nevoa); } .recibo__acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 0; } .fuso { margin: -.6rem 0 1rem; } /* ---------- WhatsApp flutuante e cookies ---------- */ .wa-flutuante { position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 60; display: flex; align-items: center; gap: .7rem; text-decoration: none; } .wa-flutuante__icone { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #1f9e55; color: #fff; box-shadow: 0 12px 28px -8px rgb(0 0 0 / 60%); transition: transform .25s ease; } .wa-flutuante__icone > svg { width: 30px; height: 30px; } .wa-flutuante__icone img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .wa-flutuante__selo { position: absolute; right: -4px; bottom: -4px; width: 26px !important; height: 26px !important; padding: 4px; border-radius: 50%; background: #1f9e55; border: 2px solid var(--vacuo); } .wa-flutuante__balao { padding: .5rem .9rem; background: var(--painel-2); border: 1px solid var(--aco-claro); border-radius: var(--canto); color: var(--leitura); font-size: .84rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .25s ease, transform .25s ease; } .wa-flutuante:hover .wa-flutuante__icone { transform: scale(1.05); } .wa-flutuante:hover .wa-flutuante__balao, .wa-flutuante:focus-visible .wa-flutuante__balao { opacity: 1; transform: none; } .cookies { position: fixed; left: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 70; max-width: 430px; padding: 1.2rem 1.3rem; color: var(--leitura); background: var(--painel-2); border: 1px solid var(--aco-claro); border-radius: var(--canto); box-shadow: 0 24px 50px -20px rgb(0 0 0 / 80%); font-size: .9rem; } .cookies a { color: var(--traco); } .cookies p { margin-bottom: 1rem; } .cookies__acoes { display: flex; gap: .6rem; justify-content: flex-end; } /* ---------- Responsivo ---------- */ @media (max-width: 1080px) { .nav { gap: 1rem; } .nav__lista { gap: 1rem; } .marca__sub { display: none; } .canal { grid-template-columns: 1fr 1fr; } .canal__foto { grid-column: 1 / -1; max-width: 340px; } .eixo { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; } } @media (max-width: 960px) { :root { --topo-h: 66px; } .marca__sub { display: block; } .menu-btn { display: block; } /* Menu fechado cobre a tela inteira (fixed + z-index 49). `opacity: 0` NÃO desliga o clique, e um descendente que force `visibility: visible` fura o `hidden` do pai. Então o clique é barrado aqui, no próprio contêiner. */ .site .nav { position: fixed; inset: var(--topo-h) 0 auto 0; z-index: 49; flex-direction: column; align-items: stretch; gap: 1rem; max-height: calc(100vh - var(--topo-h)); overflow-y: auto; padding: 1rem clamp(1rem, 4vw, 2.5rem) 1.5rem; background: var(--painel); border-bottom: 1px solid var(--aco-claro); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; } .nav.is-aberto { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; } .nav__lista { flex-direction: column; gap: 0; } .nav__lista > li { border-bottom: 1px solid var(--aco); } .nav__link { padding: .9rem 0; } .nav__link::after { display: none; } /* `inherit`, nunca `visible`: no celular o submenu já vem aberto dentro do menu, e forçar `visible` o tornava clicável mesmo com o menu fechado. */ .nav__sub { position: static; opacity: 1; visibility: inherit; transform: none; background: transparent; border: 0; box-shadow: none; padding: 0 0 .6rem; min-width: 0; } .hero__grade, .hero-pagina__grade, .bancada, .contato__grade, .sobre-grade, .area-layout, .agenda-layout, .agenda-js { grid-template-columns: 1fr; } .solucoes-grade, .outras-areas__grade { grid-template-columns: repeat(2, 1fr); } .rodape__grade { grid-template-columns: 1fr 1fr; } .area-indice, .agenda-lateral { position: static; } .area-indice ul, .area-indice__titulo { display: none; } .area-indice .btn { display: none; } .opcoes-area { grid-template-columns: repeat(2, 1fr); } .artigos-grade { grid-template-columns: repeat(2, 1fr); } .galeria { grid-template-columns: repeat(3, 1fr); } /* A foto do serviço volta no celular: a página não pode ficar só texto. */ .hero-pagina__foto, .hero-pagina__icone { display: block; } .hero-pagina__foto img { aspect-ratio: 16 / 10; max-height: 32vh; object-position: center 40%; } .hero-pagina__icone { aspect-ratio: 16 / 6; } .hero-pagina__grade { gap: 1.4rem; } } @media (max-width: 620px) { .marca__simbolo { width: 30px; height: 30px; } .marca__nome { font-size: 1.12rem; } .hero__acoes .btn { flex: 1 1 100%; } .solucoes-grade, .outras-areas__grade, .rodape__grade, .artigos-grade, .grade-campos, .agenda-nativo { grid-template-columns: 1fr; } .eixo { grid-template-columns: 1fr; gap: 0; } .eixo__ponto { padding: 1.1rem 0 1.1rem 1rem; border-left: 1px solid var(--aco); } .eixo__ponto::before { top: 1.45rem; left: -1px; width: 12px; height: 1px; } .galeria { grid-template-columns: repeat(2, 1fr); } .site .numeros { grid-template-columns: 1fr 1fr 1fr; } .site .numeros li { padding: .8rem .6rem .8rem 0; } .site .numeros strong { font-size: 1.45rem; } .servico { grid-template-columns: 1fr; gap: .4rem; } .agenda-envio .btn, .acomp-form .btn { width: 100%; } .acomp-form { grid-template-columns: 1fr; } .acomp-linha { grid-template-columns: repeat(3, 1fr); row-gap: 1rem; } .contato__lista > div, .recibo__dados > div, .acomp-dados { grid-template-columns: 1fr; gap: .15rem; } .acomp-dados dt { margin-top: .5rem; } .wa-flutuante__balao { display: none; } .cookies { right: 1rem; max-width: none; } /* Canais: o nome, o resumo e a foto empilham; a lista de serviços continua. */ .canal { grid-template-columns: 1fr; gap: .7rem; padding: 1.3rem 0; } .canal__foto { max-width: none; order: -1; } .canal__foto img { aspect-ratio: 16 / 9; max-height: 30vh; } /* Mostrador: o rótulo sobe e a leitura fica embaixo, em coluna única. */ .mostrador__canal { grid-template-columns: 1fr; gap: .15rem; padding: .95rem 0 1rem; } .mostrador__leitura, .mostrador__nota { grid-column: 1; } .mostrador__leitura { font-size: 1.22rem; } .especime__mira { width: 66px; height: 66px; } .especime__legenda { grid-template-columns: 1fr; } } @media print { .topo, .rodape, .agenda-lateral, .btn, .wa-flutuante, .escala, .cookies { display: none !important; } body.site { background: #fff; color: #000; } .site .hero, .site .hero-pagina, .site .secao, .site .secao--papel, .site .secao--escura { background: #fff; } .site .hero__titulo, .site .titulo-secao, .site .hero-pagina__titulo, .site h1, .site h2, .site h3 { color: #000; } .site p, .site li, .site dd, .site dt { color: #111; } }