/* Ótica London — "cola" WordPress sobre o CSS verbatim do mockup (ADR-011). Mantido MÍNIMO de propósito: só o que o WordPress introduz e o mockup não previa. */ /* Admin bar do WP: o header sticky do mockup gruda no topo da viewport */ body.admin-bar header{top:32px} @media (max-width:782px){body.admin-bar header{top:46px}} /* Colisão de classe: o WP injeta "single" no BODY dos posts, e o .single do mockup (grid do produto) capturaria o body inteiro. Guard: body volta ao fluxo normal; o componente .single interno segue com o CSS do mockup. */ body.single{display:block;padding:0;gap:normal} /* Carrossel do hero — fotos dentro do círculo .lens (inset 12px preserva o anel dourado do mockup). Crossfade por opacidade; a logo entra com "contain". */ .lens-slides{position:absolute;inset:12px;border-radius:50%;overflow:hidden} .lens-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease} .lens-slide.is-active{opacity:1} .lens-slide img{width:100%;height:100%;object-fit:cover;display:block} .lens-slide--logo{background:var(--ink);display:grid;place-items:center} .lens-slide--logo img{object-fit:contain;padding:22%;width:100%;height:100%} .lens-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2} .lens-dot,.ol-dot{width:7px;height:7px;padding:0;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.45);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:.25s} .lens-dot:hover,.ol-dot:hover{background:rgba(255,255,255,.8)} .lens-dot.is-active,.ol-dot.is-active{background:var(--brass);width:18px;border-radius:999px} @media (prefers-reduced-motion:reduce){.lens-slide,.ol-foto{transition:none}} /* Carrossel da seção "Quem somos" — fotos da loja no card .sobre-visual */ .ol-fotos{position:absolute;inset:0} .ol-foto{position:absolute;inset:0;opacity:0;transition:opacity .9s ease} .ol-foto.is-active{opacity:1} .ol-foto img{width:100%;height:100%;object-fit:cover;display:block} .ol-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2} /* Faixa de marcas (Home) — logos em tons de cinza que ganham cor no hover. Seção compacta entre o catálogo e o "Quem somos". */ .ol-marcas-sec{padding:44px 0;border-block:1px solid var(--line)} .ol-marcas__titulo{margin:0 0 24px;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brass-deep)} .ol-marcas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 44px} .ol-marcas li{display:grid;place-items:center;height:44px} .ol-marcas img{max-height:44px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s} .ol-marcas li:hover img{filter:grayscale(0);opacity:1} @media (max-width:560px){.ol-marcas{gap:20px 28px}.ol-marcas li{height:34px}.ol-marcas img{max-height:34px;max-width:110px}} /* Provador virtual (página Consultoria) — bloco de evolução futura: selo, texto curto e CTA que converte curiosidade em lead pelo WhatsApp. */ .ol-breve{max-width:640px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:38px 30px;box-shadow:var(--shadow)} .ol-breve__selo{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--brass-deep);background:var(--ivory);border:1px solid var(--line);padding:6px 12px;border-radius:999px} .ol-breve__ic{width:56px;height:56px;margin:20px auto 0;display:grid;place-items:center;border-radius:50%;background:var(--ivory);color:var(--brass-deep)} .ol-breve h2{margin:16px 0 0;font-size:26px;font-weight:500;line-height:1.15} .ol-breve p{margin:12px auto 22px;color:var(--muted);max-width:52ch;text-align:justify;hyphens:auto} @media (max-width:560px){.ol-breve{padding:30px 20px}.ol-breve p{text-align:left}} /* Foto do equipamento (página Consultoria) — a imagem inteira sempre aparece. Usa object-fit:contain com dimensões explícitas: em grid/flex, max-height:100% não resolve quando a track é auto, e a imagem acabaria cortada pelo overflow. */ .ol-equip{position:absolute;inset:0;background:#fff;padding:5%} .ol-equip img{width:100%;height:100%;object-fit:contain;object-position:center;display:block} /* Seção "Visite a loja" — card frente e verso: mapa na frente, fachada no verso. O .loc-map do mockup tem overflow:hidden e borda; no modo flip isso passa para as faces (overflow no pai achataria o 3D). */ .loc-map.loc-flip{overflow:visible;border:0;background:transparent;box-shadow:none;perspective:1200px} .loc-flip__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.8,.2,1)} .loc-flip.is-flipped .loc-flip__inner{transform:rotateY(180deg)} .loc-face{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(135deg,#e8eef0,#dfe6df);backface-visibility:hidden;-webkit-backface-visibility:hidden} .loc-face--back{transform:rotateY(180deg);background:var(--ink)} .loc-face--back img{width:100%;height:100%;object-fit:cover;display:block} .loc-face__legenda{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#fff;text-align:center;background:linear-gradient(transparent,rgba(22,36,63,.78))} .loc-flip__btn{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(22,36,63,.22);transition:.2s} .loc-flip__btn:hover{background:var(--ink);color:#fff} .loc-flip__btn svg{transition:transform .5s} .loc-flip.is-flipped .loc-flip__btn svg{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){.loc-flip__inner{transition:none}} /* Hero — texto de apoio justificado (escopo restrito ao .hero) */ .hero .lead{text-align:justify;hyphens:auto} /* Home · seção "O nosso diferencial" — lead justificado e CTA que sinaliza navegação para a página da consultoria (seta avança no hover + microcopy). */ .consult p.lead{text-align:justify;hyphens:auto} .consult-cta{box-shadow:0 10px 26px rgba(176,138,79,.32)} .consult-cta svg{transition:transform .25s} .consult-cta:hover svg{transform:translateX(4px)} .consult-hint{margin:12px 0 0;font-size:12.5px;color:#b9ad96;letter-spacing:.02em} /* Página Consultoria — abre em "Nossa abordagem" (h1 por SEO, mesmo estilo do h2 das demais seções) e "Como funciona" com os 3 passos lado a lado (fundo navy). */ .section-head h1{font-size:clamp(30px,4vw,44px);margin:16px 0 0;letter-spacing:-.01em;line-height:1.08;font-weight:500} .consult .section-head h2{color:#fff} .ol-metodo{grid-template-columns:repeat(3,1fr);gap:20px} @media (max-width:900px){.ol-metodo{grid-template-columns:1fr}} /* Página Consultoria — textos descritivos justificados (escopo próprio: as classes .feat-grid também existem na Home, que não deve ser afetada). */ .ol-abordagem p, .ol-metodo .cstep p{text-align:justify;hyphens:auto} /* Textos longos justificados em todo o site (Quem somos, VISiON OFFICE, depoimentos, endereço da seção Localização e do rodapé, lead do catálogo, descrição do produto). Linhas curtas (horário, telefone) não são afetadas: justify só age em linhas que quebram. */ .sobre p, .depo blockquote, .loc-row p, .page-head p, .single__desc, footer .info{text-align:justify;hyphens:auto} /* Infográfico de lentes (página Consultoria) — 5 óculos SVG dentro dos cards .feat. auto-fit acomoda 5 cards sem deixar órfão em telas intermediárias. A tag reserva 2 linhas para que todos os quadrantes tenham a mesma altura (títulos alinhados entre cards, mesmo com rótulos de tamanhos diferentes). */ .ol-lentes{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:18px} .ol-lentes .feat{padding:22px 18px} .ol-lentes .lente-viz{background:var(--ivory);border:1px solid var(--line);border-radius:14px;padding:16px 10px 11px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;gap:9px} .ol-lentes .lente-viz svg{width:100%;max-width:140px;height:auto} .ol-lentes .lente-tag{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-deep);font-weight:700;text-align:center;line-height:1.35;min-height:2.7em;display:flex;align-items:center;justify-content:center} .ol-lentes h3{font-size:19px} .ol-lentes p{font-size:14px;text-align:justify;hyphens:auto} /* Mapa real (Google embed) dentro do card .loc-map do mockup — no mockup o card era decorativo (sem iframe); a regra de preenchimento é cola do WP. */ .loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Templates com h1 onde o mockup usa h2-base (SEO): mesmo tamanho/peso do h2 */ .orc h1{font-size:26px;font-weight:500;line-height:1.08;color:var(--ink)} /* Orçamento — cartão do Fluent Forms (id=3) com o visual do mockup. Atenção: o seletor de botão é restrito ao SUBMIT — selects enriquecidos (Choices.js) têm