/* ============================================================
   DLAB — Laboratório de Lentes Digitais
   Sistema de design · claro, técnico, precisão óptica
   ------------------------------------------------------------
   Índice
     1. Fontes
     2. Tokens (:root)
     3. Base / reset
     4. Tipografia
     5. Layout (wrap, seções)
     6. Componentes
        6.1 Botões
        6.2 Header e menu
        6.3 Footer
        6.4 CTA Web Pedidos (faixa)
        6.5 CTA de seção ("ver mais")
        6.6 Linha do tempo do processo
        6.7 Estrelas de classificação
        6.8 Reveal ao rolar (fica no fim da 9.2, por causa da cascata)
        6.9 Botão flutuante de WhatsApp
     7. Home
        7.1 Hero clássico
        7.2 Hero cinematográfico
        7.3 Trilha social, ações flutuantes, seta de rolar
        7.4 Faixa de números
     8. Seções de conteúdo
        8.1 Linhas (cards)
        8.2 Especiais (cards com foto)
        8.3 Tecnologia (comparador, espectro)
        8.4 TransLux
        8.5 Laboratório e unidades
        8.6 Contato
     9. Páginas internas
        9.1 Page hero e sub-navegação
        9.2 Produtos (fichas, spec, cores, tratamentos)
        9.3 Comparativo das progressivas (tabela + tecnologias)
        9.4 Índice / espessura da lente
    10. Responsivo (breakpoints do maior para o menor)
    11. Movimento reduzido (acessibilidade)
   ============================================================ */


/* ============================================================
   1. FONTES
   ============================================================ */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/archivo-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/archivo-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/archivo-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2")}


/* ============================================================
   2. TOKENS
   ============================================================ */
:root{
  --navy:#00246d;
  --royal:#0740b6;
  --blue:#0060c7;
  --sky:#38b6ff;
  --ink:#0e1c33;
  --gray:#5b6a80;
  --faint:#5c6d86;   /* texto secundário: contraste 5,3:1 sobre branco e 4,9:1 sobre o azul-claro (WCAG AA) */
  --line:#dce5f0;
  --mist:#f3f7fc;
  --paper:#ffffff;
  --radius:18px;
  --shadow:0 24px 60px -28px rgba(0,36,109,.18);
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --wrap:1200px;
}


/* ============================================================
   3. BASE / RESET
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* destinos de links (#...) param abaixo do cabeçalho fixo; em Produtos também abaixo do menu de seções */
[id]{scroll-margin-top:96px}
body[data-page="produtos"] [id]{scroll-margin-top:150px}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
/* trava a rolagem lateral no celular.
   No body usa "clip" (não "hidden"): "hidden" no body quebra o position:sticky
   (ex.: submenu da página Produtos deixava de grudar no topo). */
html{overflow-x:hidden;max-width:100%}
body{overflow-x:clip;max-width:100%}
img{max-width:100%;height:auto;display:block}   /* height:auto: os <img> têm width/height (reservam espaço ao carregar) sem distorcer */
a{color:var(--blue);text-decoration:none}
/* atalho para quem navega pelo teclado ou leitor de tela: aparece ao receber foco */
.pular{position:absolute;left:12px;top:-80px;z-index:1000;padding:10px 18px;border-radius:10px;background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:600;transition:top .2s}
.pular:focus{top:12px}
main:focus{outline:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}


/* ============================================================
   4. TIPOGRAFIA
   ============================================================ */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy);line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem);font-weight:700}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700}
h3{font-size:1.35rem;font-weight:600;letter-spacing:-.01em}
p.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--gray);max-width:56ch}
h1,h2,h3,p,a{overflow-wrap:break-word}

.eyebrow{
  flex-wrap:nowrap;   /* texto longo quebra ao lado do traço (o traço não fica sozinho numa linha) */
  font-family:var(--font-display);
  font-size:.78rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);
  display:flex;align-items:center;gap:12px;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--sky);flex:none}
.eyebrow.light{color:#eaf3ff}
.eyebrow.light::before{background:var(--sky)}


/* ============================================================
   5. LAYOUT
   ============================================================ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
@media (min-width:1500px){:root{--wrap:min(1520px,88vw)}}

.section{padding:clamp(80px,10vw,130px) 0}
.section.alt{background:var(--mist)}
.section-head{max-width:720px;margin-bottom:clamp(40px,5vw,64px)}
.section-head p{color:var(--gray);margin-top:16px}


/* ============================================================
   6. COMPONENTES
   ============================================================ */

/* ---------- 6.1 Botões ---------- */
.btn{
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn svg{flex:none}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 14px 30px -12px rgba(0,96,199,.55)}
.btn-primary:hover{background:var(--royal);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--sky);color:var(--blue)}
.btn-big{padding:17px 36px;font-size:1.05rem}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.5);backdrop-filter:blur(4px)}
.btn-glass:hover{border-color:var(--sky);color:var(--sky);background:rgba(255,255,255,.04)}

/* ---------- 6.2 Header e menu (injetado por components.js) ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s;
}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 30px -20px rgba(0,36,109,.25)}
.header-in{display:flex;align-items:center;gap:32px;height:78px;max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* logo duplo (troca claro/escuro) */
.brand{position:relative;display:inline-flex;align-items:center}
.brand img{height:40px;width:auto;transition:opacity .3s}
.brand .brand-light{position:absolute;inset:0;opacity:0}

.main-nav{display:flex;gap:26px;margin-left:auto}
.main-nav a{
  font-family:var(--font-display);font-size:.92rem;font-weight:600;color:var(--ink);
  padding:6px 2px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.main-nav a:hover{color:var(--blue);border-bottom-color:var(--sky)}
.main-nav a.active{color:var(--blue);border-bottom-color:var(--sky)}
/* "Seja cliente" no menu: pílula com contorno, para se destacar das páginas informativas */
.main-nav a.nav-destaque{border:1.5px solid var(--sky);border-radius:999px;padding:5px 14px;color:var(--blue)}
.main-nav a.nav-destaque:hover,.main-nav a.nav-destaque.active{background:var(--mist);border-color:var(--blue)}
body.home .site-header:not(.scrolled) .main-nav a.nav-destaque{color:#fff;border-color:rgba(255,255,255,.6)}
body.home .site-header:not(.scrolled) .main-nav a.nav-destaque:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-cta-mobile{display:none}

.nav-toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;transition:.3s}

/* estado transparente sobre o hero (só na home, no topo) */
body.home .site-header:not(.scrolled){
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;box-shadow:none;
}
body.home .site-header:not(.scrolled) .brand-dark{opacity:0}
body.home .site-header:not(.scrolled) .brand-light{opacity:1}
body.home .site-header:not(.scrolled) .main-nav a{color:#fff}
body.home .site-header:not(.scrolled) .main-nav a:hover{color:var(--sky)}
body.home .site-header:not(.scrolled) .main-nav a.active{color:#fff;border-bottom-color:var(--sky)}
body.home .site-header:not(.scrolled) .nav-toggle span{background:#fff}

/* ---------- 6.3 Footer (injetado por components.js) ---------- */
.site-footer{background:var(--navy);color:#a9bde2;padding:64px 0 40px;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.site-footer img{height:44px;width:auto;margin-bottom:18px}
.site-footer .rodape-tit{font-family:var(--font-display);color:#fff;font-size:.95rem;margin-bottom:14px;letter-spacing:.04em;line-height:1.3}
.site-footer a{color:#c6d8f5}
.site-footer a:hover{color:var(--sky)}
.site-footer ul{list-style:none;display:grid;gap:8px}
.footer-social{display:flex;gap:14px;margin-top:18px}
.footer-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);color:#c6d8f5;transition:transform .2s,background .2s,color .2s}
.footer-social a:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#7d93c4;font-size:.8rem}

/* ---------- 6.4 CTA Web Pedidos — faixa (injetada por components.js) ---------- */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--royal) 60%,var(--blue) 100%);
  color:#fff;text-align:center;padding:clamp(80px,10vw,120px) 0;
}
.cta-band h2{color:#fff;max-width:640px;margin:0 auto 18px}
.cta-band p{color:#c6d8f5;max-width:52ch;margin:0 auto 38px}
.cta-raio{animation:cta-raio 6s ease-in-out infinite alternate}
@keyframes cta-raio{to{transform:translateX(60px)}}
.cta-band .btn-primary{background:#fff;color:var(--navy);box-shadow:0 18px 40px -14px rgba(0,0,0,.4)}
.cta-band .btn-primary:hover{background:var(--sky);color:var(--navy)}
#cta-rays{position:absolute;inset:0;pointer-events:none;opacity:.5}

/* ---------- 6.5 CTA de seção ("ver mais") ---------- */
.sec-cta{text-align:center;margin-top:-26px;padding-bottom:84px}
.sec-cta-in{text-align:center;margin-top:clamp(28px,3.5vw,40px)}

/* ---------- antirreflexo (Tecnologia) ---------- */
.ar-compara{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:34px}
.ar-compara figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--navy);box-shadow:var(--shadow)}
.ar-compara img{width:100%;aspect-ratio:992/408;object-fit:cover}
.ar-compara figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;color:#c6d8f5;font-size:.88rem}
.ar-tag{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px}
.ar-sim{background:var(--sky);color:var(--navy)}
.ar-nao{background:rgba(255,255,255,.14);color:#fff}
.camadas{margin-top:34px}
.camadas h3{font-size:1.15rem;margin-bottom:14px}
.camadas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.camada{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.camada-foto{position:relative}
.camada-foto img{width:100%;aspect-ratio:720/526;object-fit:cover}
.camada-foto .lado{position:absolute;top:10px;font-family:var(--font-display);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.camada-foto .sem{left:10px;background:rgba(0,20,60,.72);color:#fff}
.camada-foto .com{right:10px;background:var(--sky);color:var(--navy)}
.camada figcaption{padding:16px 18px;color:var(--gray);font-size:.9rem}
.camada figcaption strong{display:block;font-family:var(--font-display);color:var(--navy);font-size:1rem;margin-bottom:2px}

/* produção tradicional × digital */
.prod-compara{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.prod-col{padding:28px;border-radius:var(--radius);background:var(--mist);border:1px solid var(--line)}
.prod-col .prod-tag{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:6px}
.prod-col h3{font-size:1.25rem;margin-bottom:16px}
.prod-col ul{list-style:none;display:grid;gap:11px}
.prod-col li{position:relative;padding-left:28px;color:var(--gray);font-size:.95rem}
.prod-col li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:var(--line)}
.prod-col.digital{background:linear-gradient(150deg,var(--navy),var(--royal));border-color:transparent;box-shadow:var(--shadow)}
.prod-col.digital .prod-tag{color:var(--sky)}
.prod-col.digital h3{color:#fff}
.prod-col.digital li{color:#dce8fb}
.prod-col.digital li::before{background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2300246d%27 stroke-width=%273.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center/11px no-repeat}

/* ---------- blocos de informação em duas colunas (Myo Control) ---------- */
.info-duas{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.info-bloco{padding:24px 28px;background:var(--mist);border-radius:var(--radius)}
.info-bloco h3{font-size:1.1rem;margin-bottom:12px}
.info-bloco ul{list-style:none;display:grid;gap:9px}
.info-bloco li{color:var(--gray);font-size:.93rem;padding-left:18px;position:relative}
.info-bloco li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--sky)}

/* ---------- guia "Qual lente indicar?" (Linhas) ---------- */
.guia-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.guia-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:8px}
.guia-card .guia-perfil{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.guia-card h3{font-size:1.2rem}
.guia-card p{color:var(--gray);font-size:.92rem;flex:1}
.guia-card a{font-family:var(--font-display);font-weight:600;font-size:.9rem;display:inline-block;padding:6px 0}
/* .saiba-alvo: links de texto com área de toque de pelo menos 24px */
.linha-card .saiba,.pq-card .saiba{padding:6px 0}
.guia-card.destaque{background:linear-gradient(150deg,var(--navy),var(--royal));border-color:transparent}
.guia-card.destaque h3{color:#fff}
.guia-card.destaque p{color:#c6d8f5}
.guia-card.destaque .guia-perfil,.guia-card.destaque a{color:var(--sky)}

/* distâncias de visão (comparativo e fichas) */
.dist{display:block;font-family:var(--font-body);font-weight:400;font-size:.74rem;color:var(--faint);white-space:normal}

/* ---------- para quem é a TransLux ---------- */
.perfil-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.perfil{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.perfil strong{display:block;font-family:var(--font-display);color:var(--navy);margin:10px 0 4px}
.perfil span{color:var(--gray);font-size:.9rem}
.perfil .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--mist);color:var(--blue)}

/* ---------- Transitions (TransLux) ---------- */
.tr-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.tr-lista{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:26px}
.tr-lista li{color:var(--gray);font-size:.92rem;padding-left:18px;position:relative}
.tr-lista li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--sky)}
.tr-lista li strong{display:block;font-family:var(--font-display);color:var(--navy)}
.tr-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.tr-card-tag{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.tr-cor{display:flex;margin-bottom:14px}
.tr-cor span{width:46px;height:46px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,20,60,.2);margin-right:-10px}
.tr-card h3{margin-bottom:4px}
.tr-card>p{color:var(--gray);font-size:.92rem}
.tr-spec{margin-top:18px;border-top:1px solid var(--line)}
.tr-spec div{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.tr-spec dt{font-family:var(--font-display);font-weight:600;color:var(--navy)}
.tr-spec dd{color:var(--gray)}

/* ---------- texto corrido (Política de Privacidade) ---------- */
.texto-legal{max-width:780px}
.texto-legal h2{font-size:1.3rem;margin:38px 0 12px}
.texto-legal h2:first-child{margin-top:0}
.texto-legal p,.texto-legal li{color:var(--gray);font-size:.98rem}
.texto-legal p{margin-bottom:12px}
.texto-legal ul{margin:0 0 12px 20px;display:grid;gap:8px}
.texto-legal strong{color:var(--ink)}
.texto-legal-data{margin-top:26px;font-size:.88rem;color:var(--faint)}

/* ---------- aviso de cookies (LGPD) — injetado por components.js ---------- */
.cookie-aviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:80;
  width:min(760px,calc(100% - 32px));display:flex;align-items:center;gap:20px;
  padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 60px -20px rgba(0,36,109,.35)}
.cookie-aviso p{margin:0;font-size:.9rem;color:var(--gray);line-height:1.5}
.cookie-aviso p a{font-weight:600}
.cookie-botoes{display:flex;gap:10px;flex:none}
.cookie-botoes .btn{padding:11px 22px;font-size:.9rem}
/* enquanto o aviso está na tela, os botões flutuantes e o chatbot ficam escondidos */
.cookies-aberto .wa-float,.cookies-aberto .wp-float,.cookies-aberto .hero-actions,
.cookies-aberto #blip-chat-container{visibility:hidden}
/* "Preferências de cookies" no rodapé: botão com cara de link */
.link-cookies{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:#c6d8f5;text-align:left}
.link-cookies:hover{color:var(--sky)}

/* chamada de cadastro de novos clientes (Home e Web Pedidos) */
.cadastro-cta{text-align:center;margin-top:40px}
.cadastro-nota{color:var(--gray);font-size:.9rem;margin:16px auto 0;max-width:52ch}
.cadastro-nota strong{color:var(--navy)}

/* ---------- 6.6 Linha do tempo do processo ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.process::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:2px;background:var(--line);z-index:0}
.proc-step{position:relative}
.proc-num{position:relative;z-index:1;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(150deg,var(--navy),var(--blue));color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:1.15rem;margin-bottom:18px;box-shadow:0 14px 30px -14px rgba(0,96,199,.6)}
.proc-step h3{font-size:1.12rem;margin-bottom:6px}
.proc-step p{color:var(--gray);font-size:.94rem;max-width:34ch}

/* ---------- Etapas de produção (laboratorio.html #etapas e web-pedidos.html #acompanhamento) ----------
   Mesmas etapas do acompanhamento do Web Pedidos. --p = progresso da linha (0 a 1), controlado pelo main.js. */
.etapas{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(11,1fr);gap:6px;--p:1;--ic:62px}
.etapas::before,.etapas::after{content:"";position:absolute;top:calc(var(--ic) / 2 - 1.5px);left:calc(100% / 22);height:3px;border-radius:3px}
.etapas::before{right:calc(100% / 22);background:#d3dfee}
.etapas::after{width:calc((100% - 100% / 11) * var(--p));background:var(--navy);transition:width .6s ease}
.etapa{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;outline:none}
.etapa-ic{position:relative;width:var(--ic);height:var(--ic);border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;box-shadow:0 10px 22px -12px rgba(0,36,109,.6);transition:transform .3s,background .4s,color .4s,box-shadow .3s}
.etapa-ok{position:absolute;top:-5px;right:-5px;width:24px;height:24px;border-radius:50%;background:#1e9e4a;color:#fff;display:grid;place-items:center;border:2px solid #fff;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.etapa-opc .etapa-ic{outline:2px dashed #9db4d4;outline-offset:3px}
.etapa-nome{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);line-height:1.25}
.etapa-desc,.etapa-tag{display:none}
/* versão completa com JS: as etapas ainda não alcançadas ficam claras e sem o check */
.etapas-box.anima .etapa:not(.feita) .etapa-ic{background:#dfe8f4;color:#6f86a8;box-shadow:none}
.etapas-box.anima .etapa:not(.feita) .etapa-ok{transform:scale(0)}
.etapas-completo .etapa{cursor:pointer}
.etapas-completo .etapa:hover .etapa-ic{transform:translateY(-3px)}
.etapas-completo .etapa.sel .etapa-ic{transform:scale(1.1);box-shadow:0 0 0 5px rgba(126,200,255,.45),0 12px 24px -12px rgba(0,36,109,.6)}
.etapas-completo .etapa:focus-visible .etapa-ic{outline:3px solid var(--sky);outline-offset:4px}
.etapa-painel{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 26px;display:grid;gap:4px;box-shadow:0 18px 40px -30px rgba(0,36,109,.3)}
.etapa-painel-num{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.etapa-painel-nome{font-family:var(--font-display);font-size:1.2rem;color:var(--navy)}
.etapa-painel-desc{color:var(--gray);font-size:.95rem}
.etapa-painel-tag,.etapa-tag{justify-self:start;margin-top:4px;font-size:.75rem;font-weight:600;color:var(--blue);background:var(--mist);border:1px dashed #9db4d4;border-radius:999px;padding:3px 10px}
.etapas-nota{margin-top:16px;font-size:.88rem;color:var(--gray)}
/* versão "exemplo" (Web Pedidos): janela estilizada do sistema */
.acomp-janela{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:0 26px 22px;overflow:hidden}
.acomp-topo{display:flex;align-items:center;gap:12px;margin:0 -26px 26px;padding:12px 20px;border-bottom:1px solid var(--line);background:#f7faff;font-family:var(--font-display);font-weight:600;font-size:.88rem;color:var(--navy)}
.acomp-pontos{display:flex;gap:6px}
.acomp-pontos i{width:10px;height:10px;border-radius:50%;background:#d3dfee}
.acomp-exemplo{margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--mist);border-radius:999px;padding:3px 10px}
.etapas-exemplo{--ic:50px}
.etapas-exemplo .etapa-ic svg{width:21px;height:21px}
.etapas-exemplo .etapa-ok{width:20px;height:20px;top:-4px;right:-4px}
.etapas-exemplo .etapa-nome{font-size:.62rem}
.etapas-exemplo .etapa:not(.feita):not(.atual) .etapa-ic{background:#dfe8f4;color:#6f86a8;box-shadow:none}
.etapas-exemplo .etapa:not(.feita) .etapa-ok{transform:scale(0)}
.etapas-exemplo .etapa.atual .etapa-ic{animation:etapa-atual 2s ease-out infinite}
@keyframes etapa-atual{0%{box-shadow:0 0 0 0 rgba(0,96,199,.45)}100%{box-shadow:0 0 0 14px rgba(0,96,199,0)}}
.acomp-status{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem;color:var(--gray)}
.acomp-status strong{color:var(--navy)}
.acomp-pulso{width:10px;height:10px;border-radius:50%;background:var(--blue);animation:etapa-atual 2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.etapas-exemplo .etapa.atual .etapa-ic,.acomp-pulso{animation:none}.etapas::after{transition:none}}

/* ---------- 6.7 Estrelas de classificação ---------- */
.stars{display:inline-flex;gap:3px;line-height:1}
.stars .st{width:15px;height:15px;display:inline-block;
  background:var(--line);
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E");
          mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E")}
.stars .st.on{background:linear-gradient(180deg,var(--blue),var(--royal))}

/* 6.8 Reveal ao rolar → ver o fim da seção 9.2 (precisa vir depois dos cards) */

/* ---------- 6.9 Botão flutuante de WhatsApp (injetado por components.js) ----------
   Só no celular/tablet (≤ 900px), onde os botões flutuantes do hero somem.
   Mesmo estilo dos botões .fab do hero. */
.wa-float,.wp-float{display:none}

/* Com o chatbot Blip ativo (classe .tem-blip no <html>, posta pelo components.js):
   o botão da Blip fica no canto (48px, a ~35px da borda). Os outros botões sobem
   e ficam alinhados na mesma coluna, logo acima dele. */
.tem-blip .hero-actions{right:40px;bottom:104px}
/* com a faixa de avisos no topo, o banner desce a altura dela (e os botões junto); a Blip fica fixa no canto da tela */
html.tem-aviso.tem-blip .hero-actions{bottom:calc(104px + var(--aviso-h,0px))}


/* ============================================================
   7. HOME
   ============================================================ */

/* ---------- 7.1 Hero clássico ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:170px 0 90px;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(56,182,255,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(7,64,182,.08), transparent 60%),
    var(--paper);
}
.hero h1 .fade-word{color:var(--blue)}
.hero p.lead{margin:26px 0 36px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}

.hero-badges{
  margin-top:70px;display:flex;align-items:center;gap:clamp(20px,4vw,54px);flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:34px;
}
.hero-badges img{height:44px;width:auto;opacity:.9}
.badge-chip{display:flex;align-items:center;gap:12px;color:var(--gray);font-size:.9rem}
.badge-chip strong{font-family:var(--font-display);color:var(--navy);display:block;font-size:1rem;letter-spacing:0}
.badge-chip svg{flex:none}

/* ---------- 7.2 Hero cinematográfico ---------- */
.hero-cine{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  background:var(--navy);
}
.hero-photo{
  position:absolute;inset:0 0 0 auto;height:100%;width:62%;
  object-fit:cover;object-position:65% center;z-index:-2;
}
.hero-overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg, var(--navy) 0%, rgba(0,36,109,.92) 34%, rgba(0,36,109,.55) 62%, rgba(0,36,109,.15) 100%),
    radial-gradient(1100px 620px at 12% 8%, rgba(56,182,255,.18), transparent 60%);
}
.hero-cine-in{position:relative;width:100%;padding:120px clamp(20px,5vw,48px) 96px}
.hero-copy{max-width:640px}
.hero-cine h1{color:#fff;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.04}
.hero-cine h1 .fade-word{color:var(--sky)}
.hero-cine .lead{color:rgba(233,242,255,.86);margin:26px 0 36px;max-width:52ch}
.hero-selos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:40px;max-width:560px}
.hero-selos .selo{height:100%}
/* telas grandes: os três selos na mesma linha, do mesmo tamanho */
@media (min-width:1400px){.hero-selos{grid-template-columns:repeat(3,minmax(0,1fr));max-width:820px;width:calc(100% + 180px)}}
.hero-selos img{height:56px;width:auto;padding:10px 14px;background:rgba(255,255,255,.94);border-radius:12px;box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
/* selos em vetor + texto (substituem as imagens com texto minúsculo) */
.selo{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px 10px 12px;
  background:rgba(255,255,255,.94);border-radius:12px;box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.selo-ic{flex:none;display:flex;align-items:center;justify-content:center}
.selo-flags{flex-direction:column;gap:3px}
.selo-flags svg{display:block;width:26px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,36,109,.12)}
.selo-br svg{width:30px}
.selo-ia{width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,var(--navy),var(--blue));color:#fff}
.selo-ia svg{width:22px;height:22px}
.selo-txt{display:flex;flex-direction:column;font-family:var(--font-body);font-size:.78rem;line-height:1.3;color:var(--gray)}
.selo-txt strong{font-family:var(--font-display);font-size:.86rem;font-weight:700;color:var(--navy)}

/* ---------- 7.3 Trilha social, ações flutuantes, seta de rolar ---------- */
.social-rail{position:absolute;left:clamp(16px,3vw,40px);bottom:40px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:18px;color:#fff}
.social-rail .rail-tag{writing-mode:vertical-rl;font-family:var(--font-display);font-size:.72rem;letter-spacing:.28em;color:rgba(255,255,255,.7);margin-bottom:6px}
.social-rail a{color:#fff;opacity:.85;transition:transform .2s,opacity .2s;display:grid;place-items:center;width:36px;height:36px;margin:-8px 0}
.social-rail a:hover{opacity:1;transform:scale(1.15);color:var(--sky)}
.social-rail::after{content:"";width:1px;height:46px;background:rgba(255,255,255,.35);margin-top:4px}

.hero-actions{position:absolute;right:clamp(16px,3vw,40px);bottom:40px;z-index:5;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.hero-actions .fab{display:inline-flex;align-items:center;gap:12px;color:#fff;font-family:var(--font-display);font-weight:600;font-size:.82rem}
.hero-actions .fab span{opacity:.92}
.hero-actions .fab i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--blue);color:#fff;box-shadow:0 12px 26px -10px rgba(0,96,199,.8);transition:transform .2s,background .2s}
.hero-actions .fab:hover i{transform:scale(1.08);background:var(--sky)}

.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--blue);color:#fff;box-shadow:0 14px 30px -12px rgba(0,96,199,.8);
  animation:cueBounce 2s ease-in-out infinite}
@keyframes cueBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- 7.4 Faixa de números ---------- */
.stats{background:var(--navy);color:#fff;padding:58px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat{border-left:2px solid rgba(56,182,255,.5);padding-left:22px}
.stat .num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.02em;line-height:1.1;
  color:#fff;
}
.stat .num em{font-style:normal;color:var(--sky)}
.stat .lbl{color:#b9cae9;font-size:.92rem;margin-top:6px}


/* ============================================================
   8. SEÇÕES DE CONTEÚDO
   ============================================================ */

/* ---------- 8.1 Linhas (cards) ---------- */
.linhas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.linha-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.linha-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#c2d4ea}
.linha-card .foto{aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.linha-card .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.linha-card:hover .foto img{transform:scale(1.05)}
.linha-card .body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.linha-card .ia-tag{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  color:var(--blue);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.ia-meter{height:5px;border-radius:99px;background:var(--line);overflow:hidden;flex:1;min-width:40px}
.ia-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--sky));border-radius:99px;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.linha-card h3{font-size:1.25rem}
.linha-card p{color:var(--gray);font-size:.94rem;flex:1}
.linha-card .saiba{font-family:var(--font-display);font-weight:600;font-size:.92rem;display:inline-flex;gap:8px;align-items:center}
.linha-card .saiba::after{content:"→";transition:transform .2s}
.linha-card:hover .saiba::after{transform:translateX(4px)}

/* ---------- 8.2 Especiais (cards com foto) ---------- */
.especiais-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.esp-card{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;
  display:flex;align-items:flex-end;border:1px solid var(--line);
  background:var(--paper);transition:transform .3s,box-shadow .3s;
}
.esp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.esp-card .bg{position:absolute;inset:0}
.esp-card .bg img{width:100%;height:100%;object-fit:cover}
.esp-card .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,10,40,0) 30%,rgba(0,14,45,.88))}
.esp-card .body{position:relative;padding:26px;color:#fff}
.esp-card .body h3{color:#fff;margin-bottom:6px}
.esp-card .body p{color:#cfe0f7;font-size:.93rem;max-width:34ch}
.esp-card .body .saiba{color:var(--sky);font-family:var(--font-display);font-weight:600;font-size:.9rem;display:inline-block;margin-top:12px}
.esp-card.solid{background:linear-gradient(150deg,var(--navy),var(--royal));}
.esp-card.solid .body p{color:#c6d8f5}
.esp-card.solid .cosmetic-dots{margin:0 0 6px}

/* ---------- 8.3 Tecnologia ---------- */
.tec-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,80px);align-items:center}
.tec-points{display:grid;gap:20px;margin-top:34px}
.tec-point{display:flex;gap:16px;align-items:flex-start}
.tec-point .ic{
  flex:none;width:46px;height:46px;border-radius:12px;
  background:var(--mist);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--blue);
}
.tec-point strong{font-family:var(--font-display);color:var(--navy);display:block;margin-bottom:2px}
.tec-point span{color:var(--gray);font-size:.94rem}

.comparador{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3vw,36px);box-shadow:var(--shadow);
}
.comparador .comp-title{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.comparador .comp-title h3{font-size:1.02rem;color:var(--navy)}
.comp-tabs{display:flex;gap:8px;flex-wrap:wrap}
.comp-tab{
  font-family:var(--font-display);font-size:.8rem;font-weight:600;
  padding:8px 15px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--gray);cursor:pointer;transition:.2s;
}
.comp-tab:hover{border-color:var(--sky);color:var(--blue)}
.comp-tab.active{background:var(--blue);border-color:var(--blue);color:#fff}
#campo-visao svg{width:100%;height:auto;display:block}
.comp-legend{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap;font-size:.84rem;color:var(--gray)}
.comp-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px;vertical-align:-1px}

.spectrum-block{margin-top:clamp(48px,6vw,70px)}
.spectrum-block h3{font-size:1.05rem;color:var(--navy);margin-bottom:6px}
.spectrum-block p{color:var(--gray);font-size:.94rem;max-width:70ch;margin-bottom:20px}
#spectrum svg{width:100%;height:auto;display:block}

/* ---------- 8.4 TransLux ---------- */
.translux{background:linear-gradient(180deg,var(--mist),#fff)}
.tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.tl-demo{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3vw,36px);box-shadow:var(--shadow);
}
.tl-demo h2{font-size:1rem;color:var(--navy);margin-bottom:4px}
.tl-demo .hint{font-size:.85rem;color:var(--faint);margin-bottom:16px}
#tl-lens svg{width:100%;height:auto;display:block}
.tl-slider{width:100%;margin-top:18px;accent-color:var(--blue)}
.tl-scale{display:flex;justify-content:space-between;font-size:.8rem;color:var(--faint);font-family:var(--font-display)}
.tl-feats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.tl-feat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:.92rem;color:var(--gray)}
.tl-feat strong{display:block;font-family:var(--font-display);color:var(--navy);margin-bottom:2px}

/* ---------- 8.5 Laboratório e unidades ---------- */
.lab-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px)}
.valores{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.valor{background:var(--mist);border-radius:14px;padding:18px 20px}
.valor strong{font-family:var(--font-display);color:var(--navy);display:block;margin-bottom:4px}
.valor span{color:var(--gray);font-size:.92rem}
.unidades{display:grid;gap:18px}
.unidades-2{grid-template-columns:1fr 1fr;gap:22px}
.unidade{
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;
  background:var(--paper);
}
.unidade .tag{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sky);
  background:var(--navy);padding:5px 12px;border-radius:99px;display:inline-block;margin-bottom:14px;
}
.unidade h3{margin-bottom:6px}
.unidade p{color:var(--gray);font-size:.94rem}
.unidade .cnpj{font-size:.8rem;color:var(--faint);margin-top:10px}
.unidade-nota{margin-top:8px;font-size:.86rem!important;color:var(--navy)!important;font-weight:500}
.unidade-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.unidade-acoes .btn{padding:11px 20px;font-size:.88rem;gap:8px}
.mapa{margin-top:22px;border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:3/1;background:linear-gradient(140deg,var(--navy),var(--royal) 60%,var(--blue));box-shadow:var(--shadow)}
.mapa-capa{position:absolute;inset:0;width:100%;border:0;margin:0;padding:24px;cursor:pointer;background:transparent;color:#fff;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.mapa-capa strong{font-family:var(--font-display);font-size:1.15rem}
.mapa-capa span:last-child{color:#c9d8f2;font-size:.9rem}
.mapa-ic{width:58px;height:58px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;margin-bottom:6px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);transition:transform .3s}
.mapa-capa:hover .mapa-ic{transform:scale(1.08)}
.mapa-capa:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Onde atendemos (laboratorio.html): mapa em SVG com cidades nas coordenadas reais ---------- */
.atend-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.atend-mapa{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 14px;box-shadow:var(--shadow)}
.mapa-atend{display:block;width:100%;height:auto}
#mapa-grade circle{fill:#c9daf0}
.mapa-atend .mar{fill:#e6eff9}
.mapa-atend .uf-area{fill:#fbfcfe;stroke:#a9bfdf;stroke-width:1.1;stroke-linejoin:round}
.mapa-atend .uf-pa{fill:#eef4fc;stroke:#8eabd6;stroke-width:1.3}
.mapa-atend .uf{font-family:var(--font-display);font-weight:700;letter-spacing:.3em;fill:#c3d2e7}
.mapa-atend .oceano{font-family:var(--font-body);font-style:italic;fill:#9db4d4}
.mapa-atend .rota{fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;opacity:.6;stroke-dasharray:900;stroke-dashoffset:900}
.mapa-atend .rota-aerea{stroke:var(--royal);stroke-dasharray:5 6;stroke-dashoffset:0;opacity:0}
.atend-mapa.in .rota{animation:rota-desenha 1.4s cubic-bezier(.2,.65,.3,1) forwards;animation-delay:calc(var(--i) * .07s)}
.atend-mapa.in .rota-aerea{animation:rota-aparece .8s ease forwards;animation-delay:.9s}
@keyframes rota-desenha{to{stroke-dashoffset:0}}
@keyframes rota-aparece{to{opacity:.7}}
.mapa-atend .pt{fill:#8fb0dc}
.mapa-atend .pt-cid{fill:var(--blue);stroke:#fff;stroke-width:2}
.mapa-atend .hub{fill:var(--navy);stroke:#fff;stroke-width:3}
.mapa-atend .hub-pulso{fill:var(--sky);transform-box:fill-box;transform-origin:center;animation:hub-pulso 2.4s ease-out infinite}
@keyframes hub-pulso{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.4);opacity:0}}
.mapa-atend .rot{font-family:var(--font-body);font-weight:600;fill:var(--navy);paint-order:stroke;stroke:#fff;stroke-linejoin:round}
.mapa-atend .rot-hub{font-family:var(--font-display);font-weight:700;fill:var(--blue)}
.atend-legenda{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--gray);margin-top:8px}
.atend-legenda span{display:inline-block;width:22px}
.lg-rota{height:2px;background:var(--blue)}
.lg-aerea{border-top:2px dashed var(--royal);margin-left:12px}
.atend-lista{display:grid;gap:10px}
.atend-reg{padding:13px 18px;background:#fff;border:1px solid var(--line);border-radius:14px}
.atend-reg strong{display:block;font-family:var(--font-display);color:var(--navy);font-size:.98rem;margin-bottom:2px}
.atend-reg span{color:var(--gray);font-size:.9rem;line-height:1.5}
.atend-nota{font-size:.9rem;color:var(--gray);margin-top:6px}
/* mapa interativo: --z é o nível de zoom (main.js); textos e bolinhas dividem por ele para manter o tamanho na tela */
.atend-mapa-in{position:relative}
.mapa-atend{--z:1;touch-action:manipulation}
.mapa-atend .rot{font-size:calc(13.5px / var(--z));stroke-width:calc(4px / var(--z))}
.mapa-atend .rot-hub{font-size:calc(15px / var(--z))}
.mapa-atend .uf{font-size:calc(15px / var(--z))}
.mapa-atend .oceano{font-size:calc(12px / var(--z))}
.mapa-atend .rot-extra{display:none;font-size:calc(12px / var(--z))}
.mapa-atend .rot-extra.mostra{display:inline}
.mapa-atend .rot.sem-espaco{display:none}
.mapa-atend .pt{r:calc(2.6px / var(--z))}
.mapa-atend .pt-cid{r:calc(4.5px / var(--z))}
.mapa-atend .pt-hit{r:calc(12px / var(--z));fill:transparent;cursor:pointer}
.mapa-atend .hub{r:calc(8px / var(--z))}
.mapa-atend .hub-pulso{r:calc(9px / var(--z))}
.mapa-atend .uf-area,.mapa-atend .rota,.mapa-atend .pt-cid,.mapa-atend .hub{vector-effect:non-scaling-stroke}
.mapa-atend .pt-g,.mapa-atend .rot,.mapa-atend .rotas{transition:opacity .3s}
.mapa-atend[data-foco] .pt-g:not(.na-reg){opacity:.28}
.mapa-atend[data-foco] .rot:not(.na-reg){opacity:0}
.mapa-atend[data-foco] .rotas{opacity:.3}
.mapa-atend .pt-g.na-reg .pt{fill:var(--blue)}
.mapa-atend .pt-g.marcado .pt{fill:var(--navy);r:calc(5.5px / var(--z))}
.atend-balao{position:absolute;left:0;top:0;z-index:2;transform:translate(-50%,calc(-100% - 14px));background:var(--navy);color:#fff;padding:8px 12px;border-radius:10px;line-height:1.3;white-space:nowrap;pointer-events:none;box-shadow:0 12px 26px -10px rgba(0,36,109,.55)}
.atend-balao strong{display:block;font-family:var(--font-display);font-size:.92rem}
/* cartão de prazo da cidade tocada no mapa */
.atend-prazo{margin-top:14px;padding:16px 18px;border-radius:var(--radius);background:#fff;border:1.5px solid rgba(56,182,255,.55);box-shadow:var(--shadow)}
.atend-prazo[hidden]{display:none}
.atend-prazo-selo{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--royal);background:rgba(56,182,255,.14);padding:4px 10px;border-radius:999px}
.atend-prazo strong{display:block;margin-top:8px;font-family:var(--font-display);font-size:1.15rem;color:var(--navy)}
.atend-prazo p{margin:6px 0 12px;font-size:.92rem;line-height:1.5;color:var(--gray)}
.atend-prazo .btn{width:100%;justify-content:center}
.atend-balao span{display:block;color:#bcd0f0;font-size:.76rem}
.atend-balao::after{content:"";position:absolute;left:var(--seta,50%);bottom:-5px;width:11px;height:11px;background:var(--navy);transform:translateX(-50%) rotate(45deg)}
.atend-voltar{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;box-shadow:0 10px 24px -14px rgba(0,36,109,.5)}
.atend-voltar:hover{border-color:var(--sky);color:var(--blue)}
.atend-dica{font-size:.8rem;color:var(--faint);margin-top:4px}
.atend-reg{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;position:relative;padding-right:46px!important;transition:border-color .2s,box-shadow .2s,background .2s}
.atend-reg::after{content:"";position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%230060c7%27 stroke-width=%272.4%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%276%27/%3E%3Cpath d=%27M20 20l-4.5-4.5M11 8.5v5M8.5 11h5%27/%3E%3C/svg%3E") center/14px no-repeat;transition:background-color .2s}
.atend-reg:hover{border-color:var(--sky)}
.atend-reg:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.atend-reg[aria-pressed="true"],.atend-reg.destaque{border-color:var(--blue);background:#f6f9ff;box-shadow:0 0 0 3px rgba(0,96,199,.12)}
.atend-reg[aria-pressed="true"]::after{background-color:#dbe8fb}
.atend-convite{display:flex;gap:16px;align-items:flex-start;margin-top:8px;padding:22px 24px;border-radius:var(--radius);background:linear-gradient(140deg,var(--navy),var(--royal) 65%,var(--blue));color:#c9d8f2;box-shadow:var(--shadow)}
.atend-convite-ic{flex:none;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.atend-convite strong{display:block;font-family:var(--font-display);font-size:1.12rem;color:#fff;margin-bottom:4px}
.atend-convite p{font-size:.92rem;line-height:1.55}
.atend-convite-btn{margin-top:14px;background:#fff;color:var(--navy);gap:8px;padding:11px 20px;font-size:.9rem}
.atend-convite-btn svg{color:#25d366}
.atend-convite-btn:hover{background:var(--sky);color:var(--navy);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  .mapa-atend .rota{stroke-dashoffset:0;animation:none!important}
  .mapa-atend .rota-aerea{opacity:.7;animation:none!important}
  .mapa-atend .hub-pulso{display:none}
}

/* ---------- Perguntas frequentes (perguntas-frequentes.html) ---------- */
.faq-wrap{max-width:880px;margin:0 auto}
.faq-cats{display:flex;flex-wrap:wrap;gap:8px}
.faq-cats a{font-family:var(--font-display);font-size:.85rem;font-weight:600;color:var(--navy);padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;transition:border-color .2s,color .2s}
.faq-cats a:hover{border-color:var(--sky);color:var(--blue)}
.faq-grupo{margin-top:clamp(34px,4vw,48px);scroll-margin-top:110px}
.faq-grupo h2{font-size:clamp(1.3rem,2.2vw,1.65rem);margin-bottom:16px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:12px;transition:border-color .3s,box-shadow .3s}
.faq-item[open]{border-color:#c3d4ee;box-shadow:0 18px 40px -30px rgba(0,36,109,.3)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--navy);line-height:1.3}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--mist);color:var(--blue);display:grid;place-items:center;font-size:1.25rem;font-weight:500;line-height:1;transition:transform .3s,background .3s,color .3s}
.faq-item[open] summary::after{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq-item summary:hover{color:var(--blue)}
.faq-item summary:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:14px}
.faq-resp{padding:0 22px 20px;color:var(--gray);font-size:.95rem;line-height:1.65}
.faq-resp p+p,.faq-resp p+ul,.faq-resp ul+p{margin-top:10px}
.faq-resp ul{padding-left:20px;display:grid;gap:6px}
.faq-resp strong{color:var(--navy)}
.faq-mais{margin-top:clamp(40px,5vw,56px);text-align:center;padding:32px 28px;background:var(--mist);border-radius:var(--radius)}
.faq-mais p{color:var(--gray);margin-top:6px}
.faq-mais-botoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}

/* ---------- Por dentro do laboratório (página Laboratório) ----------
   Vídeos curtos sem som: só carregam e tocam quando aparecem na tela (main.js). */
.lab-galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lab-item{position:relative;margin:0;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--navy);box-shadow:var(--shadow)}
.lab-item video,.lab-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lab-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,36,109,0) 55%,rgba(0,36,109,.78));pointer-events:none}
.lab-item figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#fff;font-family:var(--font-display);font-weight:600;font-size:.95rem;line-height:1.25}
.horario{display:flex;gap:26px;margin-top:8px;padding:22px 28px;background:var(--mist);border-radius:var(--radius);flex-wrap:wrap}
.horario div strong{font-family:var(--font-display);color:var(--navy);display:block;font-size:.92rem}
.horario div span{color:var(--gray);font-size:.92rem}

/* ---------- 8.6 Contato ---------- */
.contato-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.contato-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  display:flex;flex-direction:column;gap:8px;background:#fff;
  transition:transform .3s,box-shadow .3s;
}
.contato-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.contato-card .ic{width:46px;height:46px;border-radius:12px;background:var(--mist);display:grid;place-items:center;color:var(--blue);margin-bottom:8px}
.contato-card strong{font-family:var(--font-display);color:var(--navy)}
.contato-card a{font-size:1.02rem}
.contato-card span{color:var(--gray);font-size:.9rem}
/* selo "Canal oficial verificado" (texto no estilo do site, sem imitar o selo da Meta) */
.contato-card .verificado{display:inline-flex;align-items:center;gap:6px;color:var(--blue);
  font-family:var(--font-display);font-size:.78rem;font-weight:600}
.contato-card .verificado svg{flex:none;width:16px;height:16px;padding:2px;border-radius:50%;
  background:var(--blue);color:#fff}


/* ============================================================
   9. PÁGINAS INTERNAS
   ============================================================ */

/* ---------- 9.1 Page hero e sub-navegação ---------- */
.page-hero{
  padding:150px 0 60px;
  background:
    radial-gradient(900px 420px at 90% -20%, rgba(56,182,255,.16), transparent 60%),
    var(--paper);
}
/* primeira seção logo abaixo do topo das páginas internas: sem vão grande */
.page-hero + .section{padding-top:clamp(28px,3.5vw,44px)}

.sub-nav{
  position:sticky;top:78px;z-index:40;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border-block:1px solid var(--line);
}
.sub-nav .in{display:flex;gap:6px;overflow-x:auto;padding:10px clamp(20px,4vw,48px);max-width:var(--wrap);margin:0 auto;scrollbar-width:none}
.sub-nav a{
  flex:none;font-family:var(--font-display);font-size:.84rem;font-weight:600;
  color:var(--gray);padding:8px 15px;border-radius:999px;transition:.2s;
}
.sub-nav a:hover,.sub-nav a.current{background:var(--mist);color:var(--blue)}
/* setas e esmaecimento quando os atalhos passam da largura (main.js liga tem-esq / tem-dir) */
.sub-nav::before,.sub-nav::after{content:"";position:absolute;top:0;bottom:0;width:70px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
.sub-nav::before{left:max(0px,calc((100% - var(--wrap)) / 2));background:linear-gradient(90deg,#fff 35%,rgba(255,255,255,0))}
.sub-nav::after{right:max(0px,calc((100% - var(--wrap)) / 2));background:linear-gradient(270deg,#fff 35%,rgba(255,255,255,0))}
.sub-nav.tem-esq::before,.sub-nav.tem-dir::after{opacity:1}
.sub-nav-seta{position:absolute;top:50%;z-index:2;width:32px;height:32px;margin-top:-16px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);display:none;place-items:center;cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,36,109,.45);transition:color .2s,border-color .2s}
.sub-nav-seta:hover{color:var(--blue);border-color:var(--sky)}
.sub-nav-seta:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.sub-nav-seta-esq{left:max(8px,calc((100% - var(--wrap)) / 2 + 8px))}
.sub-nav-seta-dir{right:max(8px,calc((100% - var(--wrap)) / 2 + 8px))}
.sub-nav.tem-esq .sub-nav-seta-esq,.sub-nav.tem-dir .sub-nav-seta-dir{display:grid}

/* ---------- Filtro do catálogo (produtos.html, main.js) ---------- */
.filtro-prod{margin-top:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:22px 26px;display:grid;gap:14px;box-shadow:0 18px 40px -30px rgba(0,36,109,.25)}
.filtro-linha{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filtro-rot{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);min-width:112px}
.filtro-botoes{display:flex;flex-wrap:wrap;gap:8px}
.filtro-botoes button{font-family:var(--font-display);font-weight:600;font-size:.85rem;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--gray);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.filtro-botoes button:hover{border-color:var(--sky);color:var(--blue)}
.filtro-botoes button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.filtro-botoes button:focus-visible,.filtro-limpar:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.filtro-res{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.88rem;color:var(--gray);border-top:1px solid var(--line);padding-top:12px}
.filtro-limpar{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.filtro-vazio{font-size:.92rem;color:var(--navy)}

/* ---------- Verificador de grade (produtos.html) ---------- */
.vg-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(20px,3vw,32px)}
.vg-olhos{display:grid;grid-template-columns:1fr 1fr .7fr;gap:16px}
.vg-olho{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;padding:16px;border-radius:14px;background:var(--mist)}
.vg-olho > strong{grid-column:1 / -1;font-family:var(--font-display);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.vg-olho-add{grid-template-columns:1fr}
.vg-campo{display:grid;gap:4px}
.vg-campo span{font-size:.78rem;font-weight:600;color:var(--gray)}
.vg-campo input{width:100%;font:inherit;font-size:1rem;color:var(--navy);padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;transition:border-color .2s}
.vg-campo input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,96,199,.12)}
.vg-acoes{display:flex;align-items:center;gap:16px;margin-top:18px}
.vg-limpar{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--gray);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.vg-resultado{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.vg-vazio,.vg-erro{color:var(--gray);font-size:.93rem}
.vg-erro{color:#a33}
.vg-receita{font-size:.85rem;color:var(--gray)}
.vg-titulo{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1.1rem;margin:6px 0 12px}
.vg-lista{display:grid;gap:10px}
.vg-item{display:grid;grid-template-columns:minmax(180px,1.1fr) 2fr auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid #1e9e4a;border-radius:12px}
.vg-item-txt strong{display:block;font-family:var(--font-display);color:var(--navy)}
.vg-item-txt span{display:block;font-size:.8rem;color:var(--gray)}
.vg-indices{display:flex;flex-wrap:wrap;gap:6px}
.vg-ind{font-size:.8rem;font-weight:600;color:var(--blue);background:var(--mist);border-radius:999px;padding:4px 10px}
.vg-ver{font-size:.85rem;font-weight:600;white-space:nowrap}
.vg-nao{margin-top:12px;font-size:.85rem;color:var(--faint)}
.vg-fora{padding:18px 20px;border-radius:14px;background:#fff7e6;border:1px solid #f3d9a4}
.vg-fora strong{font-family:var(--font-display);color:var(--navy)}
.vg-fora p{color:var(--gray);font-size:.92rem;margin:4px 0 12px}
.vg-fora-btn{background:var(--blue);color:#fff;gap:8px;padding:11px 20px;font-size:.9rem}
.vg-aviso{margin-top:16px;font-size:.78rem;color:var(--faint);line-height:1.5}
/* botão "Tirar dúvida sobre esta lente" */
.duvida-produto{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--navy);background:#fff;transition:border-color .2s,color .2s}
.duvida-produto svg{color:#25d366}
.duvida-produto:hover{border-color:#25d366;color:var(--blue)}
.duvida-ao-lado{margin-left:10px}
.duvida-card{margin-top:14px;font-size:.8rem;padding:8px 14px}
[data-tipo][hidden],[data-grupo][hidden],.sub-nav a[hidden]{display:none!important}

/* ---------- 9.2 Produtos ---------- */
.produto{scroll-margin-top:150px}
.produto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.produto-grid.flip > .p-media{order:2}
.p-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative}
.p-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.p-media .logo-overlay{position:absolute;left:22px;bottom:18px;height:34px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.chip{
  font-family:var(--font-display);font-size:.78rem;font-weight:600;
  background:var(--mist);color:var(--navy);border:1px solid var(--line);
  padding:7px 13px;border-radius:999px;
}
/* lista de tecnologias da linha (gerada por main.js a partir do MEMB) */
.chips-titulo{margin:24px 0 -10px;font-family:var(--font-display);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.chip-tec{display:inline-flex;align-items:center;gap:7px;padding-left:6px}
.chip-ic{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(160deg,var(--navy),var(--blue));color:#fff}
.chip-ic svg{width:13px;height:13px}
.desempenho{margin-top:26px;display:grid;gap:10px;max-width:420px}
.desempenho .row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px;font-size:.88rem;color:var(--gray)}
.dots{display:flex;gap:6px}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--blue)}
.spec{
  margin-top:28px;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:.9rem;
}
.spec table{width:100%;border-collapse:collapse}
.spec th{
  font-family:var(--font-display);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:12px 16px;background:var(--mist);font-weight:600;
}
.spec td{padding:12px 16px;border-top:1px solid var(--line);color:var(--ink)}
.spec td:first-child{font-weight:600;color:var(--navy);font-family:var(--font-display);font-size:.86rem}

.cosmetic-dots{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.cosmetic-dots .cd{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,20,60,.25);position:relative}
.cosmetic-dots .cd:hover::after{
  content:attr(data-nome);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-size:.7rem;font-family:var(--font-display);
  padding:4px 10px;border-radius:6px;white-space:nowrap;z-index:5;
}
#myo-viz svg{width:100%;height:auto}

.trat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.trat-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:#fff;transition:transform .3s,box-shadow .3s}
.trat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.trat-card .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(140deg,var(--navy),var(--blue));display:grid;place-items:center;color:#fff;margin-bottom:18px}
.trat-card h3{margin-bottom:8px}
.trat-card p{color:var(--gray);font-size:.93rem}

/* ---------- Home: Por que a DLAB, faixa de lançamento e fechamento ---------- */
.stat .num small{font-size:.5em;font-weight:600;letter-spacing:0}
.pq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pq-card{display:flex;flex-direction:column;padding:26px}
.pq-card p{flex:1}
.pq-card .saiba{margin-top:14px;font-weight:600;font-size:.9rem}
.lanc-faixa{display:flex;align-items:center;gap:22px;margin-top:28px;padding:18px 24px;border-radius:var(--radius);background:linear-gradient(140deg,var(--navy),var(--royal) 65%,var(--blue));color:#c9d8f2;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.lanc-faixa:hover{transform:translateY(-3px)}
.lanc-tag{flex:none;font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--sky);border-radius:999px;padding:5px 12px}
.lanc-faixa img{flex:none;width:150px;height:auto;background:#fff;border-radius:10px;padding:6px}
.lanc-txt{flex:1;font-size:.93rem;line-height:1.5}
.lanc-txt strong{display:block;font-family:var(--font-display);font-size:1.15rem;color:#fff}
.lanc-btn{flex:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--navy);background:#fff;border-radius:999px;padding:10px 18px}
.linhas-mais{margin-top:22px;text-align:center;color:var(--gray);font-size:.92rem;line-height:1.7}
.como-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cadastro-whats{margin-top:10px;font-size:.9rem;color:var(--gray)}
/* ---------- Stories do Instagram (Home): faixa escura própria, aparece só com stories ativos ---------- */
.stories-band{padding:clamp(64px,8vw,104px) 0;background:radial-gradient(120% 90% at 85% 20%,#0b4fb3 0%,var(--navy) 55%,#001640 100%);color:#c9d8f2;overflow:hidden}
.stories-grid{display:grid;grid-template-columns:1.1fr auto;gap:clamp(32px,6vw,90px);align-items:center}
.stories-txt h2{color:#fff;margin:10px 0 16px}
.stories-txt p{font-size:1.02rem;line-height:1.6;max-width:46ch}
.stories-txt strong{color:#fff}
.stories-seguir{margin-top:26px;gap:10px;background:#fff;color:var(--navy)}
.stories-seguir:hover{background:var(--sky);color:var(--navy);transform:translateY(-2px)}
.phone{position:relative;width:min(320px,82vw);aspect-ratio:9/18;padding:11px;border-radius:44px;background:linear-gradient(160deg,#1b2433,#0a0f18);box-shadow:0 40px 80px -30px rgba(0,0,0,.65),inset 0 0 0 2px rgba(255,255,255,.08)}
.phone::before{content:"";position:absolute;top:19px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:999px;background:#05080d;z-index:3}
.phone-tela{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none}
.st-midia{position:absolute;inset:0}
.st-midia img,.st-midia video{width:100%;height:100%;object-fit:contain;display:block;background:#000} /* story inteiro, sem corte (faixas pretas como no app) */
.st-barras{position:absolute;top:48px;left:12px;right:12px;z-index:2;display:flex;gap:4px}
.st-barras span{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.st-barras i{display:block;height:100%;width:0;background:#fff}
.st-topo{position:absolute;top:60px;left:12px;right:12px;z-index:2;display:flex;align-items:center;gap:8px;color:#fff;font-size:.82rem;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.st-topo img{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #fff}
.st-topo strong{font-family:var(--font-display)}
.st-quando{opacity:.8}
.phone-tela::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);pointer-events:none;z-index:1}
.st-zona{position:absolute;top:0;bottom:0;width:38%;z-index:2;background:none;border:0;padding:0;cursor:pointer}
.st-ant{left:0}
.st-prox{right:0;width:62%}
.st-zona:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}
.st-aviso{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);z-index:1;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:.78rem;font-weight:600;white-space:nowrap;backdrop-filter:blur(4px)}
.st-som{position:absolute;top:96px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px)}
.st-som[hidden]{display:none}
.st-som:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
/* anel colorido de "story novo" no ícone do Instagram (lateral do topo da Home) */
.social-rail a.tem-stories{position:relative;opacity:1}
.social-rail a.tem-stories::before{content:"";position:absolute;inset:3px;border-radius:50%;padding:2px;background:conic-gradient(#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:anel-gira 4s linear infinite}
@keyframes anel-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.social-rail a.tem-stories::before{animation:none}}
.st-abrir{position:absolute;left:50%;bottom:18px;z-index:3;transform:translateX(-50%);padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--navy);font-family:var(--font-display);font-weight:600;font-size:.8rem;white-space:nowrap}
.st-abrir:hover{background:#fff}
/* ---------- Seja cliente: botões do topo da página, faixa curta do Início e convites (Web Pedidos, Contato) ---------- */
.sc-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sc-faixa{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,48px);border-radius:var(--radius);background:linear-gradient(140deg,var(--mist),#fff);border:1px solid var(--line)}
.sc-faixa-txt h2{margin:8px 0 12px}
.sc-faixa-txt p:last-child{color:var(--gray)}
.sc-faixa-acoes{display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center;margin:0}
.sc-faixa-acoes .btn{justify-content:center}
.sc-convite{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 16px;margin-top:22px;color:var(--gray);font-size:.95rem}
.sc-convite .btn{gap:8px}
.sc-convite-contato{margin-top:30px;padding:18px 24px;border-radius:var(--radius);background:var(--mist);border:1px solid var(--line);justify-content:space-between}
.sc-convite-contato strong{color:var(--navy)}

/* ---------- Animação "como se cadastrar" (telas reais do Web Pedidos), 9s em loop ----------
   O zoom acontece em torno do link (69,76% x 58,26% da captura), então o cursor mira sempre o mesmo ponto. */
.cad-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:center}
.cad-col .cadastro-cta{text-align:left;margin-top:22px}
.cad-col .cadastro-botoes{justify-content:flex-start}
.cad-passos{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:passo}
.cad-passos li{position:relative;padding-left:52px;color:var(--gray);font-size:.93rem;line-height:1.5;counter-increment:passo}
.cad-passos li::before{content:counter(passo);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,var(--navy),var(--blue));color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700}
.cad-passos strong{display:block;font-family:var(--font-display);color:var(--navy);font-size:1rem}
.cad-demo{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.cad-demo-centro{max-width:680px;margin:28px auto 0}
.cad-demo-barra{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#eef3fa;border-bottom:1px solid var(--line)}
.cad-demo-pts{display:flex;gap:5px}
.cad-demo-pts i{width:9px;height:9px;border-radius:50%;background:#cfdaea}
.cad-demo-url{flex:1;font-size:.72rem;color:var(--gray);background:#fff;border-radius:999px;padding:3px 12px;border:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cad-demo-tela{position:relative;aspect-ratio:16/9;overflow:hidden;background:#00246d}
.cad-demo-cena{position:absolute;inset:0;transform-origin:69.76% 58.26%}
.cad-demo-cena img{width:100%;height:100%;display:block;object-fit:cover}
.cad-demo-login{animation:cad-login 9s ease-in-out infinite}
.cad-demo-form{opacity:0;transform-origin:50% 50%;animation:cad-form 9s ease-in-out infinite}
.cad-demo-alvo{position:absolute;left:58.6%;top:56.1%;width:22.3%;height:4.4%;border:2px solid #ffb800;border-radius:4px;box-shadow:0 0 0 0 rgba(255,184,0,.6);opacity:0;animation:cad-alvo 9s ease-in-out infinite}
.cad-demo-cursor{position:absolute;left:0;top:0;width:30px;height:30px;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));animation:cad-cursor 9s ease-in-out infinite}
.cad-demo-clique{position:absolute;left:69.76%;top:58.26%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,184,0,.55);opacity:0;animation:cad-clique 9s ease-out infinite}
.cad-demo-legenda{position:relative;height:46px;background:#fff;border-top:1px solid var(--line)}
.cad-leg{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 14px;font-size:.85rem;font-weight:600;color:var(--navy);opacity:0}
.cad-leg b{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.75rem}
.cad-leg-1{animation:cad-leg1 9s infinite}
.cad-leg-2{animation:cad-leg2 9s infinite}
.cad-leg-3{animation:cad-leg3 9s infinite}
.cad-demo:hover .cad-demo-tela *,.cad-demo:hover .cad-leg{animation-play-state:paused}
@keyframes cad-login{0%,12%{transform:scale(1);opacity:1}26%,46%{transform:scale(2.4);opacity:1}52%{transform:scale(2.4);opacity:0}96%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes cad-form{0%,46%{opacity:0;transform:scale(1.3)}52%{opacity:1;transform:scale(1.3)}64%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes cad-alvo{0%,27%{opacity:0;box-shadow:0 0 0 0 rgba(255,184,0,.6)}30%{opacity:1}36%{box-shadow:0 0 0 10px rgba(255,184,0,0)}37%{box-shadow:0 0 0 0 rgba(255,184,0,.6)}44%{opacity:1;box-shadow:0 0 0 10px rgba(255,184,0,0)}50%,100%{opacity:0}}
@keyframes cad-cursor{0%,26%{opacity:0;transform:translate(88cqw,92cqh)}29%{opacity:1}38%{transform:translate(calc(69.76cqw - 6px),calc(58.26cqh - 3px));opacity:1}40%{transform:translate(calc(69.76cqw - 6px),calc(58.26cqh - 3px)) scale(.82)}42%,47%{transform:translate(calc(69.76cqw - 6px),calc(58.26cqh - 3px)) scale(1);opacity:1}51%,100%{opacity:0;transform:translate(calc(69.76cqw - 6px),calc(58.26cqh - 3px))}}
@keyframes cad-clique{0%,39%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(.3)}47%{opacity:0;transform:scale(2.6)}100%{opacity:0}}
@keyframes cad-leg1{0%,24%{opacity:1}27%,100%{opacity:0}}
@keyframes cad-leg2{0%,25%{opacity:0}28%,49%{opacity:1}52%,100%{opacity:0}}
@keyframes cad-leg3{0%,50%{opacity:0}53%,97%{opacity:1}100%{opacity:0}}
.cad-demo-tela{container-type:size}
@media (prefers-reduced-motion:reduce){
  .cad-demo-tela *,.cad-leg{animation:none!important}
  .cad-demo-login{opacity:1}.cad-demo-alvo{opacity:1}
  .cad-demo-legenda{height:auto}.cad-leg{position:static;opacity:1;padding:6px 14px}
}

/* ---------- O que as óticas dizem (Home) e selo da nota (Contato) ---------- */
.dep-grid{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:20px;align-items:stretch}
.dep-nota{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3vw,40px);border-radius:var(--radius);background:linear-gradient(150deg,var(--navy),var(--royal) 65%,var(--blue));color:#c9d8f2;box-shadow:var(--shadow)}
.dep-nota-num{font-family:var(--font-display);font-size:clamp(3.6rem,6vw,4.8rem);font-weight:700;line-height:1;color:#fff;letter-spacing:-.03em}
.dep-nota-num span{font-size:.3em;font-weight:600;color:var(--sky);margin-left:8px;letter-spacing:0}
.dep-estrelas{display:inline-flex;gap:3px;color:#ffc93c}
.dep-nota .dep-estrelas{margin:14px 0 10px}
.dep-nota-txt{font-size:.95rem;line-height:1.5}
.dep-nota-linha{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:.95rem}
.dep-nota-linha strong{font-family:var(--font-display);font-size:1.5rem;color:#fff;margin-right:6px}
.dep-nota-fonte{margin-top:10px;font-size:.78rem;color:#9fb6dc}
.dep-nota-google{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:.95rem}
.dep-nota-google[hidden]{display:none}
.dep-nota-google .g{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#1a73e8;font:700 .9rem/1 var(--font-display)}
.dep-nota-google>span:not(.g){flex:1 1 150px;min-width:0}
.dep-nota-google .g{flex:none}
.dep-nota-google strong{font-family:var(--font-display);font-size:1.2rem;color:#fff}
.dep-nota-google a{margin-left:auto;font-size:.82rem;font-weight:600;color:#cfe6ff;text-decoration:underline;text-underline-offset:3px}
.dep-nota-google a:hover{color:#fff}
.dep-card{margin:0;position:relative;flex:none;width:310px;display:flex;flex-direction:column;padding:24px 24px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:transform .3s,box-shadow .3s}
.dep-carrossel{position:relative;min-width:0;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px 10px}
.dep-carrossel .dep-faixas{grid-column:1 / -1}
.dep-faixas{display:grid;gap:20px;align-content:center;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* rolagem feita pelo main.js (automática + setas + arrastar); sem JS, dá para rolar com o dedo/mouse */
.dep-faixa{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y}
.dep-faixa::-webkit-scrollbar{display:none}
.dep-faixa.arrastando{cursor:grabbing;user-select:none}
.dep-trilho{display:flex;gap:20px;width:max-content}
.dep-seta{position:relative;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -12px rgba(0,36,109,.5);transition:color .2s,border-color .2s,transform .2s}
.dep-seta:hover{color:var(--blue);border-color:var(--sky);transform:scale(1.06)}
.dep-seta:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.dep-seta-esq{grid-column:2}
.dep-seta-dir{grid-column:3}

.dep-aspas{color:var(--sky);margin-bottom:10px}
.dep-card blockquote{margin:0;flex:1;font-size:1rem;line-height:1.6;color:var(--navy)}
.dep-card figcaption{margin-top:16px;font-size:.82rem;color:var(--gray)}
.dep-card figcaption strong{display:block;font-family:var(--font-display);font-size:.9rem;color:var(--navy)}
.dep-prot{display:block;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line);font-size:.74rem;color:var(--faint);letter-spacing:.02em}
.dep-nota-fonte{line-height:1.5}
.dep-nota-fonte strong{color:#fff}
.dep-google{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:28px;font-size:.93rem;color:var(--gray);text-align:center}
.dep-google .btn{gap:8px;padding:10px 20px;font-size:.88rem}
.dep-google .btn svg{color:#f4b400}
.dep-selo{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:30px;font-size:.92rem;color:var(--gray);text-align:center}
.dep-selo strong{color:var(--navy)}

/* ---------- Laboratório: quem somos (missão, visão e valores) ---------- */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mv-card{position:relative;overflow:hidden;padding:clamp(28px,3.4vw,44px);border-radius:var(--radius);background:linear-gradient(140deg,var(--navy),var(--royal) 70%,var(--blue));color:#d5e2f7;box-shadow:var(--shadow)}
.mv-card-2{background:linear-gradient(140deg,#031a52,var(--navy) 55%,var(--royal))}
.mv-card::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(126,200,255,.25);box-shadow:0 0 0 30px rgba(126,200,255,.06),0 0 0 62px rgba(126,200,255,.04);pointer-events:none}
.mv-rot{font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:12px}
.mv-txt{position:relative;z-index:1;font-family:var(--font-display);font-size:clamp(1.12rem,1.6vw,1.35rem);font-weight:500;line-height:1.45;color:#fff}
.valores-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.valor-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;background:#fff;transition:transform .3s,box-shadow .3s}
.valor-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.valor-card .ic{width:46px;height:46px;border-radius:13px;background:linear-gradient(140deg,var(--navy),var(--blue));display:grid;place-items:center;color:#fff;margin-bottom:16px}
.valor-card h3{font-size:1.02rem;margin-bottom:6px}
.valor-card p{color:var(--gray);font-size:.9rem}

/* ---------- 6.7b Tutoriais em vídeo (Web Pedidos e Home) ----------
   O vídeo só carrega ao clicar (youtube-nocookie): a página fica leve e sem cookies do YouTube antes disso. */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.video-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.video-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.video-card:has(.tocando):hover{transform:none}
.video-capa{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0;cursor:pointer;overflow:hidden;background:linear-gradient(140deg,var(--navy),var(--blue))}
.video-capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.video-capa:hover img{transform:scale(1.04)}
.video-capa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,36,109,.05) 40%,rgba(0,36,109,.4));pointer-events:none}
.video-capa:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}
.video-play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;z-index:1;box-shadow:0 14px 30px -10px rgba(0,0,0,.55);transition:transform .3s}
.video-play svg{margin-left:3px}
.video-capa:hover .video-play{transform:scale(1.08)}
.video-capa.tocando{cursor:default}
.video-capa.tocando::after{display:none}
.video-capa iframe,.video-inline iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-info{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.video-tag{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.video-info p{color:var(--gray);font-size:.93rem}
.video-link{margin-top:auto;padding-top:10px;font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;align-self:flex-start}
.cadastro-botoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.video-abrir-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;margin-right:2px}
.video-abrir-ic svg{margin-left:2px}
.video-inline{position:relative;aspect-ratio:16/9;max-width:720px;margin:28px auto 0;border-radius:var(--radius);overflow:hidden;background:var(--navy);box-shadow:var(--shadow)}
.video-inline-link{font-size:.88rem;margin-top:12px;color:var(--gray)}

/* ---------- 6.8 Reveal ao rolar ----------
   Fica AQUI, depois de .linha-card, .esp-card, .contato-card e .trat-card:
   esses cards também recebem .reveal e a transição do reveal precisa prevalecer. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.2,.65,.3,1),transform .5s cubic-bezier(.2,.65,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.04s}.reveal.d2{transition-delay:.08s}.reveal.d3{transition-delay:.12s}.reveal.d4{transition-delay:.16s}

/* ---------- 9.3 Comparativo das progressivas ---------- */
.cmp-wrap{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}   /* só a tabela rola; nota e legenda ficam paradas */
/* bloco "Tecnologias de cada linha" com abas: só no celular (no desktop a tabela mostra as tecnologias) */
.tec-abas{display:none;padding:18px 16px 20px;border-top:1px solid var(--line)}
.tec-abas-tit{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1rem;margin-bottom:12px}
.tec-abas-botoes{display:flex;gap:6px;margin-bottom:6px}
.tec-abas-botoes button{flex:1;font-family:var(--font-display);font-weight:600;font-size:.85rem;padding:10px 6px;
  border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--gray);cursor:pointer}
.tec-abas-botoes button[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.tec-abas-conta{font-size:.8rem;color:var(--faint);margin:8px 0 12px}
.tec-abas-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
.tec-item{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:.78rem;line-height:1.2;color:var(--navy)}
.tec-item .tec-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(160deg,var(--navy),var(--blue));color:#fff}
.tec-item .tec-mask{width:36px;height:36px}
.tec-item.off{color:var(--faint);font-weight:500}
.tec-item.off .tec-ic{background:var(--mist);border:1px solid var(--line);color:#b3c1d4}
.cmp-table{width:100%;border-collapse:collapse;min-width:560px}
.cmp-table th,.cmp-table td{padding:16px 14px;text-align:center;border-bottom:1px solid var(--line)}
.cmp-table thead th{
  font-family:var(--font-display);font-size:.92rem;color:var(--navy);font-weight:700;
  border-bottom:2px solid var(--line);vertical-align:bottom;line-height:1.15;
}
.cmp-table thead th span{font-family:var(--font-body);font-weight:600;font-size:.72rem;color:var(--blue);letter-spacing:.06em}
.cmp-table th.hi{background:var(--mist)}
.cmp-table th.best{background:linear-gradient(180deg,var(--navy),var(--royal));color:#fff;border-radius:12px 12px 0 0}
.cmp-table th.best span{color:var(--sky)}
.cmp-table td.cmp-attr,.cmp-table th.cmp-attr{text-align:left;font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:.9rem;white-space:nowrap}
.cmp-table tbody tr:nth-child(even){background:#fafcff}
.cmp-note{color:var(--faint);font-size:.82rem;padding:14px 16px}

/* bolinhas de tecnologia (linha da tabela) */
.cmp-tech-row td{vertical-align:middle;padding-top:18px;padding-bottom:18px}
.cmp-tech-row .cmp-attr{vertical-align:middle}
.techdots{display:inline-grid;grid-template-columns:repeat(3,1fr);gap:6px;justify-items:center}
.td-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--mist);border:1px solid var(--line);color:#b3c1d4;transition:.2s}
.td-ic svg{width:14px;height:14px}
/* ícones originais das tecnologias (máscara PNG de js/tecnologias.js; a cor vem de currentColor) */
.tec-mask{display:block;background:currentColor;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.td-ic .tec-mask{width:31px;height:31px}
.tl-ic .tec-mask{width:42px;height:42px}
.chip-ic .tec-mask{width:22px;height:22px}
.td-ic.on{background:linear-gradient(160deg,var(--blue),var(--royal));border-color:transparent;color:#fff;
  box-shadow:0 6px 14px -8px rgba(0,96,199,.7)}

/* legenda de referência das tecnologias */
.tech-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px;margin-top:26px;
  padding-top:24px;border-top:1px solid var(--line)}
.cmp-wrap .tech-legend{padding:24px 16px 22px}     /* dentro do cartão: mesmo recuo da nota */
.tl-item{display:flex;align-items:center;gap:12px}
.tl-ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--navy),var(--blue));color:#fff}
.tl-ic svg{width:20px;height:20px}
.tl-nome{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--navy);line-height:1.2}

/* ---------- 9.4 Índice / espessura da lente ---------- */
/* figura vetorial (SVG inline, versão atual) */
.esp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.scroll-hint{display:none}                                       /* aviso "arraste", aparece só no celular */
.esp-svg{display:block;width:100%;min-width:900px;height:auto}

/* elementos auxiliares da seção */
.esp-lens{height:auto;display:flex;align-items:flex-end;justify-content:center;margin-bottom:10px}
.esp-lens svg{width:100%;max-width:210px;height:auto;overflow:visible}
.esp-lens svg path{transition:d .8s cubic-bezier(.2,.7,.2,1)}
.esp-lens svg path.lens{transition:d .7s cubic-bezier(.2,.7,.2,1)}
.esp-idx{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--navy);letter-spacing:-.02em}
.esp-sub{color:var(--gray);font-size:.82rem;margin-top:4px;min-height:2.4em}
.esp-metrics{display:flex;justify-content:center;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.esp-metrics .m{display:flex;flex-direction:column;gap:2px}
.esp-metrics .m b{font-family:var(--font-display);color:var(--blue);font-size:1.05rem}
.esp-metrics .m small{color:var(--faint);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.esp-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;flex-wrap:wrap}
.esp-legend{display:inline-flex;align-items:center;gap:10px;color:var(--gray);font-size:.88rem}
.esp-legend i{width:26px;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--sky));flex:none}

/* abas de grau e imagem PNG — versões anteriores, sem uso atual (candidatas a remoção) */
.esp-tabs-lbl{font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--gray);margin-right:4px}
.esp-tab{font-family:var(--font-display);font-size:.85rem;font-weight:700;padding:9px 18px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--gray);cursor:pointer;transition:.2s}
.esp-tab:hover{border-color:var(--sky);color:var(--blue)}
.esp-tab.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 22px -12px rgba(0,96,199,.6)}
.esp-img{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:#eef2f0}
.esp-img img{display:block;width:100%;height:auto}


/* ============================================================
   10. RESPONSIVO
   Breakpoints em uso (do maior para o menor):
   1060 · 900 · 840 · 820 · 640 · 600 · 520
   A ordem abaixo precisa ser mantida: regras de telas menores
   vêm depois para prevalecer sobre as de telas maiores.
   ============================================================ */

/* ---------- ≤ 1060px — tablet paisagem ---------- */
@media (max-width:1060px){
  .main-nav{gap:16px}
  .main-nav a{font-size:.86rem}
  .linhas-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:34px}
  .especiais-grid,.trat-grid,.contato-grid,.video-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .guia-grid{grid-template-columns:repeat(3,1fr)}
  .lab-galeria{grid-template-columns:repeat(3,1fr)}
  .lab-item:nth-child(n+7){display:none}
  .pq-grid{grid-template-columns:1fr 1fr}
  .valores-grid{grid-template-columns:repeat(3,1fr)}
  .lab-galeria-home{grid-template-columns:repeat(4,1fr)}
}

/* ---------- ≤ 900px — hero sem elementos laterais, processo em 2 colunas ---------- */
@media (max-width:900px){
  .stories-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .stories-txt p{margin:0 auto}
  .sc-faixa{grid-template-columns:1fr}
  .cad-grid{grid-template-columns:1fr}
  .cad-demo{max-width:620px;margin:0 auto;width:100%}
  .vg-olhos{grid-template-columns:1fr 1fr}
  .vg-olho-add{grid-column:1 / -1;grid-template-columns:1fr 1fr}
  .vg-item{grid-template-columns:1fr;gap:8px}
  .dep-grid{grid-template-columns:1fr}
  .mv-grid{grid-template-columns:1fr}
  .valores-grid{grid-template-columns:1fr 1fr}
  .lanc-faixa{flex-wrap:wrap;gap:14px}
  .lanc-faixa img{order:-1;width:100%;max-width:260px}
  .lanc-txt{flex-basis:100%}
  .lab-galeria-home{grid-template-columns:1fr 1fr}
  .etapas{grid-template-columns:1fr;gap:0;--ic:52px}
  .etapas::before,.etapas::after{top:calc(var(--ic) / 2);left:calc(var(--ic) / 2 - 1.5px);width:3px;height:auto}
  .etapas::before{bottom:calc(var(--ic) / 2);right:auto}
  .etapas::after{height:calc((100% - var(--ic)) * var(--p));transition:height .6s ease}
  .etapa{display:grid;grid-template-columns:var(--ic) 1fr;column-gap:16px;align-items:start;text-align:left;padding-bottom:18px}
  .etapa:last-child{padding-bottom:0}
  .etapa-ic{grid-row:span 3}
  .etapa-nome{font-size:.8rem;padding-top:6px}
  .etapas-completo .etapa-desc{display:block;color:var(--gray);font-size:.9rem;line-height:1.5;margin-top:2px}
  .etapas-completo .etapa-tag{display:inline-block}
  .etapas-completo .etapa.sel .etapa-ic{transform:none}
  .etapa-painel{display:none}
  .etapas-exemplo{--ic:40px}
  .etapas-exemplo .etapa{padding-bottom:10px;align-items:center}
  .etapas-exemplo .etapa-ic{grid-row:auto}
  .etapas-exemplo .etapa-nome{font-size:.72rem;padding-top:0}
  .etapas-exemplo .etapa-ic svg{width:18px;height:18px}
  .acomp-janela{padding:0 18px 18px}
  .acomp-topo{margin:0 -18px 20px;padding:10px 16px}
  .atend-grid{grid-template-columns:1fr}
  .atend-mapa{max-width:600px;width:100%;margin:0 auto}
  .social-rail,.hero-actions{display:none}
  .hero-photo{width:100%;opacity:.85}
  .hero-overlay{background:linear-gradient(180deg,rgba(0,20,60,.55),rgba(0,26,74,.85) 60%,var(--navy)),radial-gradient(700px 400px at 20% 0,rgba(56,182,255,.2),transparent 60%)}
  .process{grid-template-columns:1fr 1fr;gap:30px}
  .process::before{display:none}
  .perfil-grid{grid-template-columns:1fr 1fr}

  .wa-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:55;
    display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
    background:var(--blue);color:#fff;box-shadow:0 14px 30px -12px rgba(0,96,199,.8);
    transition:transform .2s,background .2s}
  .wa-float:hover,.wa-float:focus-visible{background:var(--royal);transform:scale(1.06)}
  /* Web Pedidos: mesmo botão, logo acima do WhatsApp */
  .wp-float{position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:55;
    display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
    background:var(--blue);color:#fff;box-shadow:0 14px 30px -12px rgba(0,96,199,.8);
    transition:transform .2s,background .2s}
  .wp-float:hover,.wp-float:focus-visible{background:var(--royal);transform:scale(1.06)}
  .tem-blip .wp-float{width:48px;height:48px;right:35px;bottom:calc(155px + env(safe-area-inset-bottom,0px))}
  /* com a Blip: WhatsApp do mesmo tamanho (48px), empilhado logo acima do botão dela */
  .tem-blip .wa-float{width:48px;height:48px;right:35px;bottom:calc(95px + env(safe-area-inset-bottom,0px))}
  .tem-blip .wa-float svg{width:24px;height:24px}
}

/* ---------- ≤ 840px — menu mobile (hambúrguer) e grids em 1 coluna ---------- */
@media (max-width:840px){
  .hero{padding-top:140px}
  .tec-grid,.tl-grid,.lab-grid,.produto-grid,.tr-grid{grid-template-columns:1fr}
  .produto-grid.flip > .p-media{order:0}

  .main-nav{
    position:fixed;top:78px;right:0;left:0;
    background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:14px 22px 22px;
    transform:translateY(-130%);transition:transform .3s;box-shadow:0 30px 40px -30px rgba(0,36,109,.3);
  }
  .main-nav.open{transform:none}
  /* links sempre legíveis (corrige branco-sobre-branco na Home) */
  .main-nav a{padding:15px 4px;border-bottom:1px solid var(--mist);color:var(--ink)!important;font-size:1rem}
  .main-nav a.active{color:var(--blue)!important}
  .main-nav a.nav-destaque{border:0;border-bottom:1px solid var(--mist);border-radius:0;padding:15px 4px;color:var(--blue)!important;font-weight:700}
  .nav-toggle{display:block}
  .header-cta{display:none}
  /* botão Web Pedidos dentro do menu */
  .main-nav a.nav-cta-mobile{display:inline-flex!important;justify-content:center;width:100%;
    margin-top:16px;border-bottom:0!important;color:#fff!important;padding:15px 24px;background:var(--blue)}
  .main-nav a.nav-cta-mobile:hover{background:var(--royal)}

  /* telas de toque (celular e tablet) */
  /* abas do comparador (Single, Select…): mais altas para o toque */
  .comp-tab{padding:11px 15px}
  /* links "Conhecer →" dos cards: área de toque maior, sem mudar a posição do texto */
  .esp-card .body .saiba{padding:10px 0;margin:2px 0 -10px}
}

/* ---------- ≤ 820px — legenda de tecnologias em 2 colunas ---------- */
@media (max-width:820px){
  .tech-legend{grid-template-columns:repeat(2,1fr)}
}

/* ---------- ≤ 640px — unidades empilhadas ---------- */
@media (max-width:640px){
  .unidades-2{grid-template-columns:1fr}
  .mapa{aspect-ratio:4/3}
  .unidade-acoes .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- ≤ 600px — celular ---------- */
@media (max-width:600px){
  .linhas-grid,.especiais-grid,.trat-grid,.contato-grid,.video-grid,.valores,.tl-feats,.footer-grid{grid-template-columns:1fr}
  .video-info{padding:18px 20px 20px}
  .cadastro-botoes{flex-direction:column;align-items:stretch}
  .stats-grid{grid-template-columns:1fr 1fr;gap:26px}
  .stat .num{font-size:1.7rem}

  .hero-cine-in{padding:116px 20px 84px}
  .hero-selos{gap:10px;grid-template-columns:1fr}
  .scroll-cue{display:none}

  .section{padding:60px 0}
  .section.alt{padding:60px 0}
  .section-head{margin-bottom:34px}
  .hero-cine h1{font-size:clamp(2.2rem,8.6vw,3rem)}
  h1{font-size:clamp(2rem,7.6vw,2.6rem)}
  h2{font-size:clamp(1.55rem,6vw,2.1rem)}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%;justify-content:center}
  .btn-big{padding:15px 26px;font-size:1rem}
  .cta-band .btn-big{width:100%;justify-content:center}
  .sec-cta{padding-bottom:60px}
  .sec-cta .btn,.sec-cta-in .btn{width:100%;justify-content:center}
  .cadastro-cta .btn{width:100%;justify-content:center}
  .ar-compara{grid-template-columns:1fr;gap:14px}
  .camadas-grid,.prod-compara,.tr-lista{grid-template-columns:1fr}
  .tr-card{padding:22px}
  .prod-col{padding:22px}
  .info-duas{grid-template-columns:1fr}
  .guia-grid{grid-template-columns:1fr}
  .filtro-prod{padding:18px}
  .vg-olhos{grid-template-columns:1fr}
  .vg-acoes .btn{flex:1;justify-content:center}
  .duvida-ao-lado{margin-left:0}
  .pq-grid{grid-template-columns:1fr}
  .dep-card{width:270px}
  .valores-grid{grid-template-columns:1fr}
  .como-cta .btn{width:100%;justify-content:center}
  .lanc-btn{width:100%;justify-content:center}
  .atend-convite{flex-direction:column;padding:20px}
  .atend-convite-btn{width:100%;justify-content:center}
  .faq-item summary{padding:16px 18px;font-size:.97rem}
  .faq-resp{padding:0 18px 18px}
  .faq-mais{padding:26px 20px}
  .faq-mais-botoes .btn{flex:1 1 auto;justify-content:center}
  .filtro-linha{flex-direction:column;align-items:flex-start;gap:8px}
  .filtro-botoes{gap:6px}
  .filtro-botoes button{font-size:.82rem;padding:7px 13px}
  .lab-galeria{grid-template-columns:1fr 1fr;gap:12px}
  .lab-item figcaption{left:12px;right:12px;bottom:10px;font-size:.85rem}
  .info-bloco{padding:20px}
  .cookie-aviso{flex-direction:column;align-items:stretch;gap:14px;bottom:16px;padding:18px}
  .cookie-botoes .btn{flex:1;justify-content:center}
  .page-hero{padding:120px 0 44px}

  /* tabela comparativa no celular: compacta, as 4 linhas cabem sem arrastar.
     As tecnologias saem da tabela e aparecem no bloco com abas (.tec-abas). */
  .cmp-table{min-width:0;table-layout:fixed}
  .cmp-table th,.cmp-table td{padding:10px 2px}
  .cmp-table thead th{font-size:.74rem;line-height:1.2}
  .cmp-table thead th span{font-size:.6rem;letter-spacing:.02em}
  .cmp-table th.cmp-attr,.cmp-table td.cmp-attr{width:31%;white-space:normal;font-size:.76rem;padding-left:10px;padding-right:4px}
  .cmp-table .dist{font-size:.64rem}
  .cmp-table .stars{gap:1px}
  .cmp-table .stars .st{width:9px;height:9px}
  .cmp-tech-row,.cmp-wrap .tech-legend{display:none}
  .tec-abas{display:block}
  .scroll-hint{display:block;color:var(--faint);font-size:.8rem;margin-bottom:10px}

}

/* ---------- ≤ 340px — celulares muito estreitos (ex.: iPhone SE 1ª geração) ---------- */
@media (max-width:340px){
  .cmp-table .stars .st{width:8px;height:8px}
  .cmp-table th.cmp-attr,.cmp-table td.cmp-attr{padding-left:8px}
}

/* ---------- ≤ 520px — celular pequeno ---------- */
@media (max-width:520px){
  .esp-idx{font-size:1.25rem}
  .tech-legend{grid-template-columns:1fr}
  .td-ic{width:30px;height:30px}
  .td-ic svg{width:12px;height:12px}
  .td-ic .tec-mask{width:27px;height:27px}
  .process{grid-template-columns:1fr}
  .perfil-grid{grid-template-columns:1fr}
}


/* ============================================================
   11. MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .scroll-cue{animation:none}
}

/* ============================================================
   LINKS DA BIO (links.html): página do link na bio do Instagram.
   Feita para o celular (é aberta pelo app do Instagram), sem cabeçalho nem rodapé.
   ============================================================ */
.bio-pagina{min-height:100vh;background:radial-gradient(120% 70% at 50% 0%,#0b4fc4 0%,var(--navy) 55%,#001a52 100%) fixed;color:#fff}
.bio-pagina .wa-float,.bio-pagina .wp-float{display:none!important}
.bio{display:flex;justify-content:center;padding:44px 16px 104px}
.bio-cartao{width:100%;max-width:480px;text-align:center}
.bio-logo{width:170px;height:auto;margin:0 auto 14px;display:block}
.bio-sub{font-size:15px;line-height:1.5;color:rgba(255,255,255,.85);max-width:340px;margin:0 auto}
.bio-nota{display:inline-block;margin:16px auto 26px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.9)}
.bio-nota span{color:#ffc93c;letter-spacing:1px;margin-right:4px}
.bio-links{display:flex;flex-direction:column;gap:12px}
.bio-btn{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 18px 12px 12px;border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;text-align:left;box-shadow:0 14px 30px -18px rgba(0,0,0,.55);transition:transform .2s ease,box-shadow .2s ease}
.bio-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(0,0,0,.6)}
.bio-btn:active{transform:scale(.98)}
.bio-btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.bio-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--mist);color:var(--royal)}
.bio-ic-wa{background:#e8f8ee;color:#1aa34a}
.bio-txt{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.35;color:var(--faint)}
.bio-txt strong{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink)}
.bio-btn-destaque{background:linear-gradient(135deg,var(--sky),var(--blue));color:#fff}
.bio-btn-destaque .bio-ic{background:rgba(255,255,255,.2);color:#fff}
.bio-btn-destaque .bio-txt,.bio-btn-destaque .bio-txt strong{color:#fff}
.bio-btn-site{justify-content:center;min-height:52px;padding:12px 18px;background:transparent;border:1.5px solid rgba(255,255,255,.45);box-shadow:none}
.bio-btn-site .bio-txt strong{color:#fff;font-size:15px}
.bio-btn-site:hover{background:rgba(255,255,255,.08);box-shadow:none}
.bio-redes{display:flex;justify-content:center;gap:12px;margin-top:28px}
.bio-redes a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);transition:background .2s ease}
.bio-redes a:hover{background:rgba(255,255,255,.2)}
.bio-rodape{margin-top:22px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.7)}
.bio-pagina .cookie-aviso{color:var(--ink)}

/* ============================================================
   SELO "SIGA A DLAB NO INSTAGRAM" (preenchido por components.js com api/perfil.php)
   Feito para fundo escuro (faixa dos stories, Links da bio, rodapé).
   ============================================================ */
.ig-selo{display:flex;align-items:center;gap:14px;max-width:400px;margin:22px 0 4px;padding:10px 12px 10px 10px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;text-align:left;transition:background .2s ease}
.ig-selo:hover{background:rgba(255,255,255,.14)}
.ig-anel{flex:none;width:56px;height:56px;border-radius:50%;padding:2px;background:conic-gradient(from 210deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75);display:grid;place-items:center}
.ig-anel img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--navy);background:#fff}
.ig-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.78)}
.ig-txt strong{font-family:var(--font-display);font-size:16px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-txt b{color:#fff;font-weight:700}
.ig-seguir{flex:none;padding:8px 14px;border-radius:999px;background:#fff;color:var(--navy);font-weight:700;font-size:13.5px}
.bio-selo .ig-selo{margin:26px auto 0}
.ig-mini{display:inline-block;margin-top:12px;font-size:13px;color:rgba(255,255,255,.7);text-decoration:none}
.ig-mini:hover{color:#fff;text-decoration:underline}
@media (max-width:340px){.ig-seguir{display:none}}
/* com o selo carregado, o botão "Seguir @dlab.digital" da faixa dos stories sai (ele fica só como reserva se a Meta falhar) */
[data-ig-perfil].ig-ok + .stories-seguir{display:none}

/* ============================================================
   MURAL "ÓTICAS PARCEIRAS" (Seja cliente): posts aprovados no painel privado
   ============================================================ */
.mural{margin-top:56px}
.mural-topo{text-align:center;margin-bottom:22px}
.mural-topo h3{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);color:var(--ink)}
.mural-topo p{color:var(--faint);margin-top:6px}
.mural-grade{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.mural-item{position:relative;display:block;flex:0 1 220px;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--mist);box-shadow:var(--shadow)}
.mural-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.mural-item:hover img{transform:scale(1.04)}
.mural-u{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,20,60,.75));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mural-play{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff}
@media (max-width:520px){.mural-grade{gap:10px}.mural-item{flex-basis:calc(50% - 5px)}}

/* ============================================================
   ATALHO NO CELULAR (botão "Instalar"): Web Pedidos e Links da bio
   ============================================================ */
.instalar{display:flex;align-items:center;gap:14px;max-width:520px;margin:22px auto 0;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);text-align:left}
.instalar[hidden]{display:none}
.instalar img{flex:none;border-radius:12px;border:1px solid var(--line)}
.instalar > span{flex:1;display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.4;color:var(--faint)}
.instalar strong{font-family:var(--font-display);font-size:15.5px;color:var(--ink)}
.instalar .btn{flex:none;padding:10px 18px}
.bio .instalar{margin-top:24px;background:rgba(255,255,255,.96);border:0}
@media (max-width:420px){.instalar{flex-wrap:wrap}.instalar .btn{width:100%}}

/* ============================================================
   AVISO DO LABORATÓRIO (painel > Avisos): faixa dentro do cabeçalho fixo
   ============================================================ */
.aviso-topo{font-size:14px;line-height:1.45}
.aviso-topo[hidden]{display:none}
.aviso-in{max-width:var(--wrap);margin:0 auto;padding:9px clamp(20px,4vw,48px);display:flex;align-items:center;gap:12px}
.aviso-in p{flex:1;margin:0;text-align:center}
.aviso-in a{font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.aviso-info{background:var(--navy);color:#fff}
.aviso-info a{color:#9fdcff}
.aviso-importante{background:#ffd75e;color:#3a2a00}
.aviso-importante a{color:#3a2a00}
.aviso-fechar{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer;opacity:.75}
.aviso-fechar:hover{opacity:1;background:rgba(127,127,127,.18)}
/* o cabeçalho fica mais alto com a faixa: a página desce o mesmo tanto */
html.tem-aviso body > main,html.tem-aviso body > .page-hero{margin-top:var(--aviso-h,0px)}
html.tem-aviso [id]{scroll-margin-top:calc(96px + var(--aviso-h,0px))}
/* página de links: vira um cartão acima dos botões */
.bio .aviso-topo{border-radius:14px;margin:0 0 16px;text-align:left}
.bio .aviso-in{padding:10px 8px 10px 14px}
.bio .aviso-in p{text-align:left}
/* com a faixa: o menu de seções (Lentes), o menu do celular e os destinos de link descem junto */
html.tem-aviso .sub-nav{top:calc(78px + var(--aviso-h,0px))}
html.tem-aviso .main-nav{top:calc(78px + var(--aviso-h,0px))}
html.tem-aviso body[data-page="produtos"] [id],html.tem-aviso .produto{scroll-margin-top:calc(150px + var(--aviso-h,0px))}

/* ============================================================
   MODO BALCÃO (balcao.html): apresentação em telas para o cliente final, no tablet/celular da ótica.
   Sem cabeçalho/rodapé. As telas passam com as setas, os pontos, o teclado ou arrastando o dedo.
   ============================================================ */
.bc-pagina{background:var(--mist);overflow:hidden;height:100vh;height:100dvh}
.bc-pagina .wa-float,.bc-pagina .wp-float{display:none!important}
.bc{position:relative;height:100vh;height:100dvh;overflow:hidden}
.bc-trilho{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1);touch-action:pan-y}
.bc-tela{flex:0 0 100%;height:100%;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:70px clamp(16px,4vw,56px) 96px}
.bc-in{width:100%;max-width:1100px;margin:auto 0}
.bc-eyebrow{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.bc h2{font-family:var(--font-display);font-size:clamp(28px,4.2vw,48px);line-height:1.1;color:var(--navy);margin-bottom:26px;max-width:880px}
.bc-lead{font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:var(--gray);margin-bottom:20px;max-width:620px}
.bc-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bc-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bc-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.bc-card h3{font-family:var(--font-display);font-size:20px;color:var(--navy);margin-bottom:8px}
.bc-card p{font-size:16px;line-height:1.55;color:var(--gray)}
.bc-num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;margin-bottom:14px}
.bc-linha b{display:block;font-family:var(--font-display);font-size:26px;color:var(--navy)}
.bc-linha span{display:block;font-size:13px;font-weight:600;color:var(--blue);margin:4px 0 10px}
.bc-top{border:2px solid var(--sky);background:linear-gradient(180deg,#f2faff,#fff)}
/* capa */
.bc-capa{background:var(--navy);color:#fff;padding:0;position:relative;justify-content:flex-start;overflow:hidden}
.bc-capa-foto{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;object-position:center 20%;opacity:.9}
.bc-capa::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 38%,rgba(0,36,109,.55) 62%,rgba(0,36,109,.1));pointer-events:none}
.bc-capa-txt{position:relative;z-index:1;max-width:620px;padding:0 clamp(20px,6vw,90px)}
.bc-marca{font-family:var(--font-display);font-size:20px;letter-spacing:4px;text-transform:uppercase;color:#9fdcff;margin-bottom:18px}
.bc-marca b{color:#fff}
.bc-capa h1{color:#fff;font-family:var(--font-display);font-size:clamp(36px,5.6vw,66px);line-height:1.05;margin-bottom:18px}
.bc-capa p{font-size:clamp(18px,2vw,22px);color:rgba(255,255,255,.85);margin-bottom:30px}
.bc-capa small{display:block;margin-top:34px;font-size:13px;color:rgba(255,255,255,.6)}
.bc-comecar{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border:0;border-radius:999px;background:#fff;color:var(--navy);font:700 18px var(--font-body);cursor:pointer;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.bc-recomecar{margin-top:22px;background:var(--navy);color:#fff}
/* campo de visão */
.bc-tabela{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:18px}
.bc-tabela table{width:100%;border-collapse:collapse;font-size:16px}
.bc-tabela th,.bc-tabela td{padding:8px 14px;border-bottom:1px solid var(--line);text-align:center}
.bc-tabela tbody th{text-align:left;font-weight:600;color:var(--ink)}
.bc-tabela tbody th small{display:block;font-weight:400;font-size:12.5px;color:var(--faint)}
.bc-tabela thead th{font-family:var(--font-display);color:var(--navy);font-size:17px}
.bc-tabela tr:last-child th,.bc-tabela tr:last-child td{border-bottom:0}
.bc-tabela td::before{letter-spacing:3px;color:var(--blue);font-size:15px}
.bc-tabela td[data-n="3"]::before{content:"●●●○○"}
.bc-tabela td[data-n="4"]::before{content:"●●●●○"}
.bc-tabela td[data-n="5"]::before{content:"●●●●●"}
/* duas colunas */
.bc-2col{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.bc-lista{list-style:none;display:flex;flex-direction:column;gap:12px}
.bc-lista li{position:relative;padding-left:30px;font-size:17px;line-height:1.5;color:var(--gray)}
.bc-lista li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center/12px no-repeat}
.bc-lista b{color:var(--ink)}
/* TransLux: filtro cinza que escurece com o controle */
.bc-tl-cena{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:#d9f0ff}
.bc-tl-cena svg{display:block;width:100%;height:auto}
.bc-tl-lente{opacity:calc(var(--sol,0) * .82);transition:opacity .2s}
.bc-tl-sol{opacity:calc(.35 + var(--sol,0) * .65)}
.bc-tl-ctrl{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:14px;font-weight:600;color:var(--gray)}
.bc-tl-ctrl input{flex:1;accent-color:var(--navy);height:28px}
.bc-dica{font-size:13px;color:var(--faint);text-align:center;margin-top:6px}
/* antirreflexo: comparação deslizante */
.bc-ar{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:992/408}
.bc-ar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bc-ar-com{clip-path:inset(0 0 0 var(--corte))}
.bc-ar input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.bc-ar-linha{position:absolute;top:0;bottom:0;left:var(--corte);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
.bc-ar-linha::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:20px}
.bc-ar-rot{position:absolute;bottom:12px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:600;pointer-events:none}
.bc-ar-rot-sem{left:12px}
.bc-ar-rot-com{right:12px}
/* espessura / Myo / fechamento */
.bc-esp{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;overflow-x:auto}
.bc-esp img{display:block;width:100%;min-width:640px;height:auto}
.bc-foto-redonda img{width:100%;max-width:440px;aspect-ratio:1;object-fit:cover;border-radius:50%;display:block;margin:0 auto;box-shadow:var(--shadow)}
.bc-obs{font-size:14px;color:var(--faint)}
.bc-fim .bc-in{text-align:center}
.bc-fim h2{margin-left:auto;margin-right:auto}
.bc-fim .bc-card{text-align:left}
.bc-final{font-family:var(--font-display);font-size:clamp(22px,3vw,30px);color:var(--navy);margin-top:30px}
/* controles */
.bc-ctrl{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 10px 30px -12px rgba(0,36,109,.35);z-index:5}
.bc-seta{width:48px;height:48px;border:0;border-radius:50%;background:var(--navy);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.bc-seta:disabled{opacity:.3;cursor:default}
.bc-pontos{display:flex;gap:7px}
.bc-pontos button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:width .2s}
.bc-pontos button[aria-selected="true"]{background:var(--navy);width:26px;border-radius:999px}
.bc-topo{position:absolute;top:max(12px,env(safe-area-inset-top));right:14px;left:14px;display:flex;justify-content:space-between;z-index:5;pointer-events:none}
.bc-topo > *{pointer-events:auto;padding:8px 14px;border-radius:999px;border:0;background:rgba(255,255,255,.9);color:var(--navy);font:600 14px var(--font-body);text-decoration:none;cursor:pointer;box-shadow:0 6px 18px -10px rgba(0,36,109,.4)}
@media (max-width:900px){
  .bc-4{grid-template-columns:repeat(2,1fr)}
  .bc-3{grid-template-columns:1fr}
  .bc-2col{grid-template-columns:1fr}
  .bc-capa-foto{width:100%;opacity:.35}
  .bc-capa::after{background:linear-gradient(180deg,rgba(0,36,109,.4),var(--navy) 70%)}
}
@media (max-width:520px){
  .bc-4{grid-template-columns:1fr}
  .bc-card{padding:16px}
  .bc-tela{align-items:flex-start;padding-top:64px}
  .bc-capa{align-items:center}
  .bc-tabela th,.bc-tabela td{padding:9px 8px}
  .bc-tabela td::before{font-size:11px;letter-spacing:1px}
}

.bc-chamada{margin-top:18px}

/* ============================================================
   BALÃO "VEJA NOSSOS STORIES" (Home, só quando há stories nas últimas 24 h)
   ============================================================ */
.st-convite{display:flex;align-items:center;gap:2px;padding:4px 4px 4px 4px;border-radius:999px;background:#fff;box-shadow:0 12px 30px -10px rgba(0,20,60,.45);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease;z-index:20}
.st-convite.on{opacity:1;pointer-events:auto}
.st-convite-ir{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:6px 6px 6px 10px;font:700 13.5px var(--font-body);color:var(--navy);cursor:pointer;white-space:nowrap}
.st-convite-ponto{width:9px;height:9px;border-radius:50%;background:#e8323c;box-shadow:0 0 0 0 rgba(232,50,60,.55);animation:st-pulso 1.6s ease-out infinite}
@keyframes st-pulso{0%{box-shadow:0 0 0 0 rgba(232,50,60,.55)}70%{box-shadow:0 0 0 9px rgba(232,50,60,0)}100%{box-shadow:0 0 0 0 rgba(232,50,60,0)}}
.st-convite-fechar{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--faint);font-size:18px;line-height:1;cursor:pointer}
.st-convite-fechar:hover{background:var(--mist);color:var(--navy)}
/* computador: ao lado do ícone do Instagram, com uma setinha apontando para ele */
.st-convite-lado{position:absolute;left:46px;transform:translate(-8px,-50%)}
.st-convite-lado.on{transform:translate(0,-50%)}
.st-convite-lado::before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;background:#fff;transform:translateY(-50%) rotate(45deg);border-radius:2px}
/* celular: flutuando no canto inferior esquerdo (os botões de WhatsApp/Web Pedidos ficam à direita) */
.st-convite-movel{position:fixed;left:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(12px)}
.st-convite-movel.on{transform:none}
html.cookies-aberto .st-convite-movel{display:none}
@media (prefers-reduced-motion:reduce){.st-convite{transition:none}.st-convite-ponto{animation:none}}

/* ============================================================
   CAMPO DE VISÃO — desenhos originais do folheto Luxy Vision (arquivos do Corel), na cor do site
   ============================================================ */
.campo-svg{display:block;width:100%;height:auto;overflow:visible}
.campo-aro{fill:none;stroke:var(--navy);stroke-miterlimit:10}
.campo-zona{fill:var(--navy);fill-opacity:.62;fill-rule:evenodd}
.campo-pont{fill:none;stroke:var(--navy)}
/* comparador (Tecnologia) */
.campo-lente-box{max-width:520px;margin:10px auto 0;transition:opacity .2s}
.campo-info{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:18px;text-align:center}
.campo-nome{font-family:var(--font-display);font-size:1.6rem;color:var(--navy)}
.campo-sub{font-size:.92rem;color:var(--gray)}
.campo-ia{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:.84rem;color:var(--gray)}
.campo-ia b{font-weight:600;color:var(--navy)}
.campo-ia-barra{width:120px;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.campo-ia-barra i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--sky));transition:width .7s ease}
@media (prefers-reduced-motion:reduce){.campo-lente-box,.campo-ia-barra i{transition:none}}
/* comparativo (Lentes): desenho em cima do nome de cada linha */
.cmp-campo{display:block;width:100%;max-width:140px;margin:0 auto 10px}
.cmp-table th.best .campo-aro,.cmp-table th.best .campo-pont{stroke:#fff}
.cmp-table th.best .campo-zona{fill:#fff;fill-opacity:.55}
/* modo balcão, tela 4 */
.bc-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:8px}
.bc-campos figure{margin:0;text-align:center}
.bc-campos .campo-svg{max-width:240px;margin:0 auto}
.bc-campos figcaption{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--navy);margin-top:8px}
.bc-legenda{font-size:13px;color:var(--faint);text-align:center;margin-bottom:16px}
@media (max-width:520px){.bc-campos{gap:10px}.bc-campos figcaption{font-size:15px}}
/* modo balcão e comparativo: 4 lentes (tradicional + Select, Max, Infinite) */
.bc-campos{grid-template-columns:repeat(4,1fr)}
.bc-campos figure.bc-trad figcaption{color:var(--faint);font-weight:600}
@media (max-width:520px){.bc-campos{grid-template-columns:repeat(2,1fr)}}

/* MYO CONTROL — diagrama das zonas (arquivo original, legendas corrigidas) e o "M" colorido da marca */
.myo-diagrama{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,3vw,28px);box-shadow:var(--shadow)}
.myo-diagrama img{display:block;width:100%;height:auto}
.myo-marca{display:block;width:72px;height:auto;margin-bottom:10px}
.bc .myo-marca{width:84px}

/* ---------- FERRAMENTAS DA ÓTICA (ferramentas.html) ---------- */
.fr-atalhos{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.fr-atalhos a{padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.85rem;font-weight:600;color:var(--navy);text-decoration:none;transition:border-color .2s,color .2s}
.fr-atalhos a:hover{border-color:var(--sky);color:var(--blue)}
.fr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.fr-card{scroll-margin-top:100px}
.fr-tit{font-family:var(--font-display);font-size:1.25rem;color:var(--navy);margin:0}
.fr-desc{font-size:.9rem;color:var(--gray);margin:6px 0 16px}
.fr-campos{display:grid;gap:10px;margin-bottom:10px}
.fr-2{grid-template-columns:repeat(2,minmax(0,1fr))}.fr-3{grid-template-columns:repeat(3,minmax(0,1fr))}.fr-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fr-res{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:10px;min-height:44px}
.fr-linha{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;padding:12px 14px;border-radius:12px;background:var(--mist);border-left:4px solid var(--blue)}
.fr-linha > span{font-size:.8rem;font-weight:600;color:var(--gray)}
.fr-linha strong{font-family:var(--font-display);font-size:1.25rem;color:var(--navy);text-align:right}
.fr-linha em{grid-column:1 / -1;font-style:normal;font-size:.8rem;color:var(--faint)}
.fr-rx{white-space:nowrap}
.fr-nota{font-size:.8rem;color:var(--faint);line-height:1.5}
.fr-link{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:20px 22px;border-radius:var(--radius);background:linear-gradient(150deg,var(--navy),var(--royal) 70%);color:#c9d8f2;text-decoration:none;box-shadow:var(--shadow);transition:transform .25s}
.fr-link:hover{transform:translateY(-2px)}
.fr-link strong{display:block;font-family:var(--font-display);font-size:1.1rem;color:#fff}
.fr-link-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}
.fr-link-seta{font-size:1.4rem;color:var(--sky)}
.fr-aviso{margin-top:22px}
@media (max-width:860px){
  .fr-grid{grid-template-columns:1fr}
  .fr-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .fr-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fr-3 .vg-campo:last-child{grid-column:1 / -1}
}

/* selo "UVA UVB 100%" (assets/img/selo-uv.svg, vetor do arquivo original) e imagem "Transição inteligente" */
.tit-uv{display:flex;align-items:center;justify-content:space-between;gap:16px}
.tit-uv .selo-uv{flex:none;width:68px;height:auto}
.tl-feat-uv{display:flex;align-items:center;gap:14px}
.tl-feat-uv .selo-uv{flex:none;width:52px;height:auto}
.tl-transicao{display:block;width:100%;max-width:760px;height:auto;margin-top:28px}
.bc-lista li.bc-uv{padding-left:44px;min-height:34px}
.bc-lista li.bc-uv::before{width:34px;height:34px;top:-3px;border-radius:0;background:url("../assets/img/selo-uv.svg") center/contain no-repeat}

/* aviso de cookies compacto no modo balcão: uma linha no topo, sem cobrir as setas */
.bc-pagina .cookie-aviso{top:max(78px,calc(env(safe-area-inset-top) + 78px));bottom:auto;width:min(620px,calc(100% - 24px));flex-direction:row;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:14px}
.bc-pagina .cookie-aviso p{font-size:.8rem;line-height:1.35}
.bc-pagina .cookie-botoes{gap:6px}
.bc-pagina .cookie-botoes .btn{flex:none;padding:7px 12px;font-size:.78rem}

/* ---------- CONVITE PARA INSTALAR O APP (celular) ---------- */
.convite-app{position:fixed;inset:0;z-index:2147483000;pointer-events:none}
.ca-fundo{position:absolute;inset:0;background:rgba(0,20,60,.45);opacity:0;transition:opacity .3s}
.ca-janela{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;padding:22px 18px calc(18px + env(safe-area-inset-bottom));background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -18px 50px -20px rgba(0,36,109,.5);transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.75,.3,1)}
.convite-app.aberto{pointer-events:auto}
.convite-app.aberto .ca-fundo{opacity:1}
.convite-app.aberto .ca-janela{transform:none}
.ca-janela::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--line)}
.ca-fechar{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:var(--mist);color:var(--gray);font-size:22px;line-height:1;cursor:pointer}
.ca-video{border-radius:16px;overflow:hidden;background:#f3f7fc;aspect-ratio:340/700}
.ca-video video{display:block;width:100%;height:100%;object-fit:cover}
.ca-tag{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ca-conteudo h2{font-family:var(--font-display);font-size:1.2rem;line-height:1.2;color:var(--navy);margin:4px 30px 10px 0}
.ca-txt{font-size:.88rem;line-height:1.5;color:var(--gray)}
.ca-passos{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.ca-passos li{display:grid;grid-template-columns:22px 1fr 28px;align-items:center;gap:8px;font-size:.84rem;line-height:1.3;color:var(--gray)}
.ca-passos b{color:var(--ink)}
.ca-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font:700 .75rem/22px var(--font-display);text-align:center}
.ca-passos li:nth-child(2) .ca-ic{border-radius:50%}
.ca-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--mist);color:var(--blue);font-style:normal}
.ca-botoes{display:flex;align-items:center;gap:14px;margin-top:14px}
.ca-botoes .btn{padding:11px 20px;font-size:.9rem}
.ca-nao{background:none;border:0;padding:0;font:inherit;font-size:.85rem;font-weight:600;color:var(--gray);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.convite-app-aberto #blip-chat-container,.convite-app-aberto .wa-float,.convite-app-aberto .wp-float{visibility:hidden}
@media (max-width:360px){.ca-janela{grid-template-columns:104px 1fr;gap:12px}}
@media (prefers-reduced-motion:reduce){.ca-janela,.ca-fundo{transition:none}}
.ca-txt-g{margin-bottom:10px}

/* ---------- CONVITE PARA ATIVAR AS NOTIFICAÇÕES (dentro do app instalado): janela no centro ---------- */
.push-convite{position:fixed;inset:0;z-index:2147482000;display:grid;place-items:center;padding:20px;pointer-events:none}
.pc-fundo{position:absolute;inset:0;background:rgba(0,20,60,.62);opacity:0;transition:opacity .3s}
.pc-janela{position:relative;width:min(380px,100%);padding:30px 24px 18px;border-radius:26px;background:#fff;text-align:center;box-shadow:0 30px 80px -20px rgba(0,20,60,.6);transform:translateY(24px) scale(.94);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.3,1.2),opacity .3s}
.push-convite.aberto{pointer-events:auto}
.push-convite.aberto .pc-fundo{opacity:1}
.push-convite.aberto .pc-janela{transform:none;opacity:1}
.pc-sino{position:relative;display:inline-grid;place-items:center;width:78px;height:78px;margin-top:-62px;border-radius:50%;background:linear-gradient(150deg,var(--royal),var(--blue));color:#fff;box-shadow:0 14px 30px -10px rgba(0,64,182,.7);border:5px solid #fff}
.pc-sino svg{animation:pc-balanca 1.6s ease-in-out infinite;transform-origin:50% 8%}
.pc-sino i{position:absolute;top:10px;right:12px;width:14px;height:14px;border-radius:50%;background:#ff3b30;border:2px solid #fff}
@keyframes pc-balanca{0%,55%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}20%{transform:rotate(-14deg)}30%{transform:rotate(10deg)}40%{transform:rotate(-6deg)}}
.pc-janela h2{font-family:var(--font-display);font-size:1.45rem;line-height:1.15;color:var(--navy);margin:14px 0 6px}
.pc-sub{font-size:.9rem;line-height:1.45;color:var(--gray);margin:0 0 16px}
.pc-motivos{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left}
.pc-motivos li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--mist)}
.pc-mic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--blue);box-shadow:0 4px 10px -6px rgba(0,36,109,.4)}
.pc-motivos span:last-child{font-size:.84rem;line-height:1.3;color:var(--gray)}
.pc-motivos strong{display:block;font-family:var(--font-display);font-size:.95rem;color:var(--navy)}
.pc-ativar{width:100%;justify-content:center;padding:15px 20px;font-size:1.02rem;animation:pc-pulso 2.2s ease-in-out infinite}
@keyframes pc-pulso{0%,100%{box-shadow:0 0 0 0 rgba(0,96,199,.45)}50%{box-shadow:0 0 0 10px rgba(0,96,199,0)}}
.pc-nao{margin-top:10px;background:none;border:0;padding:8px;font:inherit;font-size:.84rem;color:var(--faint);cursor:pointer}
@media (prefers-reduced-motion:reduce){.pc-janela,.pc-fundo{transition:none}.pc-sino svg,.pc-ativar{animation:none}}

/* listas de grau (esférico, cilíndrico, adição): roleta do celular, com sinal e de 0,25 em 0,25 */
.vg-campo select.grau{width:100%;font:inherit;font-size:1rem;color:var(--navy);padding:10px 34px 10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2300246d%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") right 10px center/16px no-repeat;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .2s}
.vg-campo select.grau:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,96,199,.12)}

/* etapa opcional "Qual é a sua ótica?" (depois de ativar as notificações) */
.pc-sino.pc-ok{background:linear-gradient(150deg,#12805c,#1aa874)}
.pc-perfil{display:flex;flex-direction:column;gap:12px;text-align:left}
.pc-perfil label{display:flex;flex-direction:column;gap:5px;font-size:.82rem;font-weight:600;color:var(--navy)}
.pc-perfil input,.pc-perfil select{width:100%;font:inherit;font-size:1rem;font-weight:400;color:var(--ink);padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.pc-perfil input:focus,.pc-perfil select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,96,199,.12)}
.pc-linha{display:grid;grid-template-columns:92px 1fr;gap:10px}
.pc-perfil .pc-ativar{margin-top:4px;animation:none}

/* ============================================================
   BUSCA E ACESSIBILIDADE (botões no topo; código em components.js)
   ============================================================ */
.header-tools{display:flex;gap:2px;margin-left:-18px}
.ht-btn{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:999px;background:none;color:var(--navy);cursor:pointer;transition:background .2s,color .2s}
.ht-btn:hover{background:var(--mist);color:var(--blue)}
.ht-btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
body.home .site-header:not(.scrolled) .ht-btn{color:#fff}
body.home .site-header:not(.scrolled) .ht-btn:hover{background:rgba(255,255,255,.14)}
@media (max-width:840px){.header-tools{margin-left:auto;order:2}.nav-toggle{margin-left:2px;order:3}}

.busca{position:fixed;inset:0;z-index:2147483100;background:rgba(0,20,60,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:clamp(16px,10vh,110px) 16px 16px}
.busca[hidden]{display:none}
.busca-caixa{width:100%;max-width:640px;max-height:min(620px,calc(100vh - 32px));display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);box-shadow:0 40px 80px -30px rgba(0,20,60,.55);overflow:hidden;animation:buscaEntra .18s ease-out}
@keyframes buscaEntra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.busca-campo{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 18px;border-bottom:1px solid var(--line);color:var(--faint)}
.busca-campo input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:1.08rem;color:var(--ink)}
.busca-campo input::-webkit-search-cancel-button{display:none}
.busca-fechar{border:1px solid var(--line);background:var(--mist);border-radius:8px;padding:6px 11px;font:600 .8rem var(--font-display);color:var(--faint);cursor:pointer}
.busca-res{overflow-y:auto;padding:8px;overscroll-behavior:contain}
.busca-item{display:block;padding:11px 14px;border-radius:12px;color:var(--ink)}
.busca-item.ativo,.busca-item:hover{background:var(--mist)}
.busca-item b{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.35}
.busca-item small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;color:var(--faint);font-size:.86rem;line-height:1.45}
.busca-item mark{background:rgba(56,182,255,.28);color:inherit;border-radius:3px}
.bi-pag{display:block;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:1px}
.busca-dica{padding:10px 14px 6px;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.busca-pop{display:flex;flex-wrap:wrap;gap:8px;padding:4px 14px 14px}
.busca-pop button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:500 .9rem var(--font-body);color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s}
.busca-pop button:hover{border-color:var(--sky);color:var(--blue)}
.busca-vazio{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:20px 14px}
.busca-vazio span{color:var(--faint)}
.busca-vazio a{margin-top:8px;font-weight:600}
html.busca-aberta{overflow:hidden}
html.busca-aberta #blip-chat-container,html.busca-aberta .wa-float,html.busca-aberta .wp-float{visibility:hidden}
@media (max-width:600px){
  .busca{padding:0}
  .busca-caixa{max-width:none;height:100%;max-height:none;border-radius:0}
}

.acess{position:fixed;right:clamp(12px,3vw,40px);z-index:2147483050;width:min(300px,calc(100vw - 24px));background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -24px rgba(0,36,109,.35);padding:16px 18px 12px}
.acess[hidden]{display:none}
.acess-tit{font:700 1rem var(--font-display);color:var(--navy);margin-bottom:6px}
.acess-linha,.acess-op{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--mist);font-size:.95rem;color:var(--ink)}
.acess-grupo{display:flex;flex:none;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.acess-grupo button{min-width:42px;border:0;background:#fff;padding:6px 8px;font:700 .9rem var(--font-display);color:var(--ink);cursor:pointer}
.acess-grupo button+button{border-left:1px solid var(--line)}
.acess-grupo button[aria-pressed="true"]{background:var(--navy);color:#fff}
.acess-op{cursor:pointer;position:relative}
.acess-op input{position:absolute;opacity:0;width:1px;height:1px}
.acess-op i{flex:none;position:relative;width:40px;height:22px;border-radius:999px;background:var(--line);transition:background .2s}
.acess-op i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.acess-op input:checked+i{background:var(--blue)}
.acess-op input:checked+i::after{transform:translateX(18px)}
.acess-op input:focus-visible+i{outline:2px solid var(--sky);outline-offset:2px}
.acess-padrao{margin-top:10px;border:0;background:none;padding:4px 0;font:600 .88rem var(--font-body);color:var(--blue);cursor:pointer}

/* letra maior: o site usa rem, então aumentar a letra-base aumenta o texto todo */
html.a11y-f1{font-size:112.5%}
html.a11y-f2{font-size:125%}
html.a11y-f1 body,html.a11y-f2 body{font-size:1rem}
@media (min-width:841px){html.a11y-f1 .main-nav a,html.a11y-f2 .main-nav a{font-size:14.7px}}   /* o menu do topo continua cabendo */
/* alto contraste: textos mais escuros, bordas e azuis mais fortes */
html.a11y-contraste{--ink:#000;--gray:#1b2433;--faint:#1b2433;--line:#6b7789;--blue:#0040a0}
html.a11y-contraste body{background:#fff}
html.a11y-contraste ::placeholder{color:#3b4658}
/* destacar links */
html.a11y-links main a:not(.btn),html.a11y-links footer a:not(.btn),html.a11y-links .busca-item b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
html.a11y-links a:focus-visible,html.a11y-links button:focus-visible{outline:3px solid #ffbf00;outline-offset:2px}
/* parar animações */
html.a11y-movimento{scroll-behavior:auto}
html.a11y-movimento *,html.a11y-movimento *::before,html.a11y-movimento *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html.a11y-movimento .reveal{opacity:1!important;transform:none!important}
/* topo com os botões de busca e acessibilidade: nada encolhe nem quebra linha em telas médias */
.brand,.header-tools,.header-cta{flex:none}
.main-nav a,.header-cta{white-space:nowrap}
@media (min-width:841px) and (max-width:1120px){
  .header-in{gap:14px;padding:0 20px}
  .main-nav{gap:12px}
  .main-nav a{font-size:.82rem}
  .main-nav a.nav-destaque{padding:5px 10px}
  .header-tools{margin-left:-4px}
  .ht-btn{width:34px;height:34px}
  .header-cta{padding-left:16px;padding-right:16px}
  .brand img{height:34px}
}

/* ---------- "Quando chega na minha ótica?" (página Laboratório, dados do painel) ---------- */
.prazo-box{margin-top:clamp(28px,4vw,44px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(20px,3vw,32px);scroll-margin-top:96px}
.prazo-cab h3{font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.5rem);color:var(--navy);line-height:1.2}
.prazo-cab p{color:var(--faint);margin-top:6px;max-width:640px}
.prazo-form{display:grid;grid-template-columns:minmax(150px,220px) minmax(200px,380px);gap:14px;margin-top:18px}
.pz-sel{width:100%;font:inherit;font-size:1rem;color:var(--navy);padding:11px 34px 11px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2300246d%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") right 10px center/16px no-repeat;-webkit-appearance:none;appearance:none;cursor:pointer}
.pz-sel:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,96,199,.12)}
.pz-sel:disabled{opacity:.5;cursor:not-allowed}
.prazo-res:empty{display:none}
.prazo-res{margin-top:20px}
.pz-card{border-radius:14px;padding:18px 20px;border:1.5px solid var(--line);background:var(--mist)}
.pz-card.pz-ok{border-color:rgba(19,128,74,.35);background:#f1faf5}
.pz-card.pz-retira,.pz-card.pz-fora{border-color:rgba(56,182,255,.45)}
.pz-selo{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.pz-ok .pz-selo{color:#13804a}
.pz-card h4{font-family:var(--font-display);font-size:1.3rem;color:var(--navy);margin:2px 0 10px}
.pz-card dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pz-card dl div{background:#fff;border-radius:12px;padding:12px 14px;border:1px solid var(--line)}
.pz-card dt{font-size:.78rem;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.05em}
.pz-card dd{margin-top:4px;color:var(--ink);font-weight:500}
.pz-card p{color:var(--ink)}
.pz-obs{margin-top:10px;font-size:.92rem;color:var(--faint)!important}
.pz-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pz-regras{list-style:none;margin-top:14px;display:grid;gap:6px;font-size:.9rem;color:var(--faint)}
.pz-regras li{position:relative;padding-left:18px}
.pz-regras li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--sky)}
@media (max-width:600px){.prazo-form,.pz-card dl{grid-template-columns:1fr}}
.pz-exp{margin:-4px 0 10px;font-size:.95rem}
.pz-exp b{color:var(--navy)}
.pz-exc{margin:0 0 10px;padding:9px 12px;border-radius:10px;background:#fff6e0;border:1px solid #f1d58a;color:#5a4200!important;font-size:.93rem;font-weight:500}
.pz-mini{display:block;margin-top:8px;font-size:.84rem;font-weight:400;color:var(--faint);line-height:1.45}
.pz-mini b{color:var(--ink);font-weight:600}

/* ---------- Como solicitar a coleta do aro (web-pedidos.html#coleta-do-aro) ---------- */
.coleta-grid{display:grid;gap:16px;max-width:1000px;margin:0 auto}
.coleta-passo{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(220px,.75fr) 1.6fr;align-items:center}
.cp-img{position:relative;order:2;border-left:1px solid var(--line);background:#fff}
.cp-img img{width:100%;height:auto}
.cp-anel{position:absolute;width:12%;aspect-ratio:2/1.15;transform:translate(-50%,-50%);border:3px solid #e0262b;border-radius:999px;pointer-events:none}
.cp-faixa{position:absolute;left:.6%;top:69%;width:98.8%;height:24%;border:3px solid #e0262b;border-radius:8px;pointer-events:none}
.coleta-passo figcaption{display:flex;gap:12px;padding:18px 20px}
.cp-num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:700}
.coleta-passo b{display:block;font-family:var(--font-display);color:var(--navy);font-size:1.02rem;line-height:1.3}
.coleta-passo p{margin-top:4px;color:var(--faint);font-size:.93rem}
.coleta-passo p strong{color:#b42318}
.coleta-alt{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1000px;margin:22px auto 0;padding:18px 22px;border-radius:var(--radius);background:#fff;border:1.5px solid rgba(56,182,255,.5)}
.coleta-alt strong{font-family:var(--font-display);color:var(--navy);font-size:1.08rem}
.coleta-alt p{margin-top:2px;color:var(--ink)}
.coleta-alt .btn{flex:none}
.coleta-nota{max-width:1000px;margin:14px auto 0;font-size:.9rem;color:var(--faint)}
@media (max-width:760px){.coleta-passo{grid-template-columns:1fr}.cp-img{order:0;border-left:0;border-bottom:1px solid var(--line)}.coleta-alt{flex-direction:column;align-items:flex-start}}
.pz-feriado{margin:0 0 10px;padding:9px 12px;border-radius:10px;background:#fdecea;border:1px solid #f3b4ad;color:#7a1a12!important;font-size:.93rem}
.pz-feriado b{color:#b42318}

/* ---------- Links / app no COMPUTADOR (tela larga): marca à esquerda, botões em 2 colunas à direita ---------- */
@media (min-width:1000px){
  .bio{min-height:100vh;align-items:center;padding:56px 48px}
  .bio-cartao{max-width:1120px;display:grid;grid-template-columns:340px 1fr;column-gap:64px;align-items:start;text-align:left}
  .bio-cartao > *{grid-column:1}
  .bio-cartao > .bio-links{grid-column:2;grid-row:1 / span 8;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
  .bio-logo{width:210px;margin:8px 0 18px}
  .bio-sub{margin:0;max-width:none;font-size:16px}
  .bio-nota{margin:18px 0 20px}
  .bio-redes{justify-content:flex-start;margin-top:22px}
  .bio-btn{min-height:78px;padding:16px 20px 16px 16px}
  .bio-btn-destaque{grid-column:1 / -1;min-height:92px}
  .bio-btn-destaque .bio-txt strong{font-size:19px}
  .bio-btn-site{grid-column:1 / -1;min-height:54px}
  .bio-cartao .instalar{margin-top:18px}
}

/* ---------- Como liberar as consultas pelo WhatsApp (liberar-whatsapp.html, fora do Google) ---------- */
.lw-video{max-width:960px;margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#e9eff7}
.lw-video video{display:block;width:100%;height:auto}
.lw-legenda{text-align:center;margin:10px 0 34px;font-size:.85rem;color:var(--faint)}
.lw-passos .cp-img{background:#fff}
.lw-b{font-weight:700;color:var(--navy)}