/* Óptica Confiança — estilos compartilhados por todas as páginas do site.
   v5 (18/09/2026): migrado para a linguagem visual do template "Eyewear"
   (TemplatesJungle, gratuito) que o cliente aprovou — tipografia serifada
   (Marcellus) + sans geométrica (Jost), base preto/branco, vermelho/amarelo
   da marca só em detalhes (botão, destaque, pontinhos). JS continua vanilla,
   sem jQuery/Swiper/AOS do template original — só a CSS foi adaptada. */

/* Fontes servidas pelo próprio site (antes vinham do Google Fonts: cada visita enviava o IP do
   visitante ao Google). Subconjunto "latin" cobre todo o português. Licença: SIL OFL 1.1. */
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Marcellus'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/marcellus-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --vermelho:#B31217; --vermelho-escuro:#7A0C10;
  --amarelo:#F5B400; --amarelo-escuro:#B37E00;
  --preto:#141110; --branco:#ffffff;
  --texto:#1c1c1c; --texto-suave:#747474; --borda:#e8e6e3; --fundo-claro:#faf9f7;
  --raio:4px; --sombra:0 20px 50px rgba(20,17,16,.10);
  --fonte-corpo:'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  --fonte-titulo:'Marcellus', Georgia, serif;
  /* Alturas fixas usadas para o hero + faixa caberem exatamente na primeira tela. */
  --h-cab:96px; --h-faixa:66px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  margin:0; font-family:var(--fonte-corpo); font-weight:400;
  color:var(--texto-suave); background:var(--branco); line-height:1.8; overflow-x:hidden;
  letter-spacing:.01em;
}
img{max-width:100%; display:block}
a{color:inherit}
.container{max-width:1200px; margin:0 auto; padding:0 24px}
h1,h2,h3{
  font-family:var(--fonte-titulo); font-weight:600; color:var(--preto);
  line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em;
}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.eyebrow{
  text-transform:uppercase; letter-spacing:.18em; font-size:.75rem; font-weight:600;
  color:var(--vermelho); margin-bottom:.9em; display:block; font-family:var(--fonte-corpo);
}
.destaque{color:var(--amarelo-escuro)}

.btn{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:16px 34px; border-radius:999px; font-weight:600; text-decoration:none;
  font-size:.85rem; text-transform:uppercase; letter-spacing:.1em;
  border:1.5px solid transparent; cursor:pointer; transition:all .3s ease;
  font-family:var(--fonte-corpo);
}
.btn--principal{background:#1fa855; color:#fff}
.btn--principal:hover{background:#178a45}
.btn--amarelo{background:var(--preto); border-color:var(--preto); color:#fff}
.btn--amarelo:hover{background:transparent; color:var(--preto)}
.btn--fantasma{background:transparent; border-color:rgba(255,255,255,.7); color:#fff}
.btn--fantasma:hover{border-color:#fff; background:rgba(255,255,255,.12)}
.btn--escura{background:var(--preto); color:#fff; border-color:var(--preto)}
.btn--escura:hover{background:transparent; color:var(--preto)}

/* Cabeçalho */
.cabecalho{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--borda);
}
.cabecalho__barra{display:flex; align-items:center; justify-content:space-between; height:var(--h-cab); gap:24px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
/* logo-com-telefone.png: a logo aqui tem a mesma largura (~261px) da logo do rodapé */
.marca img{height:85px; width:auto; flex:none}
.cabecalho__direita{display:flex; align-items:center; gap:28px}
.cabecalho__acoes{display:flex; align-items:center; gap:16px}
.cabecalho__whats{padding:12px 22px; font-size:.72rem}
.menu{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0}
.menu a{
  text-decoration:none; font-weight:500; color:var(--preto); font-size:.82rem;
  text-transform:uppercase; letter-spacing:.1em; font-family:var(--fonte-corpo); white-space:nowrap;
}
.menu a:hover{color:var(--vermelho)}
.menu__cta{display:none}
.menu__hamburguer{display:none; background:none; border:0; padding:8px; cursor:pointer}
.menu__hamburguer span, .menu__hamburguer span::before, .menu__hamburguer span::after{
  content:''; display:block; width:24px; height:1.5px; background:var(--preto); position:relative; transition:.2s;
}
.menu__hamburguer span::before{position:absolute; top:-8px}
.menu__hamburguer span::after{position:absolute; top:8px}
.menu__fechar{display:none}
/* Notebook pequeno / tablet deitado: logo larga + menu completo não cabem juntos com o botão. */
@media (max-width:1200px){ .cabecalho__whats{display:none} }
@media (min-width:961px) and (max-width:1060px){ .marca img{height:68px} .menu{gap:20px} }

/* Hero — tela cheia com foto real, no estilo "billboard" do template */
.hero{
  position:relative; display:flex;
  padding:0; /* o respiro vertical já vem de .hero__conteudo — o padding global de section somava mais 100px em cima e embaixo */
  /* cabeçalho + hero + faixa = 1 tela (svh = altura visível no celular, sem a barra do navegador) */
  min-height:calc(100vh - var(--h-cab) - var(--h-faixa) - 1px);
  min-height:calc(100svh - var(--h-cab) - var(--h-faixa) - 1px);
  align-items:center; overflow:hidden; color:#fff}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero__bg::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,17,16,.82) 0%, rgba(20,17,16,.55) 48%, rgba(20,17,16,.25) 100%)}
.hero__conteudo{position:relative; z-index:1; max-width:640px; padding:80px 0}
.hero h1{
  font-size:clamp(2.6rem,5.6vw,4.2rem); color:#fff; letter-spacing:-.03em; margin-bottom:.25em;
  text-transform:uppercase;
}
.hero h1 em{font-style:normal; color:var(--amarelo)}
.hero p{font-size:1.1rem; color:#ece7e2; max-width:44ch; line-height:1.7}
.hero__ctas{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap}
/* Selo "Desde 1993": só em tela larga (ao lado do texto, sem cobri-lo); no celular o selo é a faixa "Desde 1993" logo abaixo. */
.hero__selo{
  position:absolute; z-index:1; right:clamp(24px,6vw,120px); top:50%; transform:translateY(-50%);
  width:clamp(150px,13vw,230px); height:auto; pointer-events:none; filter:drop-shadow(0 12px 28px rgba(0,0,0,.5));
}
@media (max-width:1099px){ .hero__selo{display:none} }
/* Tela baixa (notebook pequeno, janela reduzida): folga menor para o texto caber sem empurrar a faixa. */
@media (max-height:720px){ .hero__conteudo{padding:40px 0} }

/* Faixa de estatísticas */
.fatos{background:var(--preto); color:#fff; overflow:hidden; border-top:1px solid rgba(255,255,255,.08)}
.fatos__trilho{display:flex; gap:60px; padding:18px 0; white-space:nowrap; animation:rolar 26s linear infinite}
.fatos__item{
  display:flex; align-items:center; gap:10px; font-weight:500; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.12em; font-family:var(--fonte-corpo);
}
.fatos__item b{color:var(--amarelo); font-family:var(--fonte-titulo); font-size:1rem; letter-spacing:0; text-transform:none}
@keyframes rolar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .fatos__trilho{animation:none; flex-wrap:wrap; justify-content:center} }

/* Seções gerais */
section{padding:100px 0}
.secao--clara{background:var(--fundo-claro)}
.cabecalho-secao{text-align:center; max-width:620px; margin:0 auto 56px}
.cabecalho-secao p{color:var(--texto-suave)}
.trilha{max-width:1200px; margin:24px auto 0; padding:0 24px; font-size:.8rem; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.08em}
.trilha a{color:var(--vermelho); text-decoration:none; font-weight:600}
.trilha a:hover{text-decoration:underline}

/* Categorias / Linhas — cartão com zoom no hover, no estilo product-item do template */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.cards.cards--3{grid-template-columns:repeat(3,1fr); max-width:860px; margin:0 auto}
.card{text-decoration:none; color:inherit; display:block}
.card__foto{aspect-ratio:4/5; overflow:hidden; background:var(--fundo-claro); position:relative}
.card__foto img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.card:hover .card__foto img{transform:scale(1.08)}
.card__icone-only{aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; background:var(--fundo-claro)}
.card__corpo{padding:20px 4px; text-align:center}
.card b{
  display:block; font-family:var(--fonte-titulo); font-size:1.2rem; color:var(--preto);
  margin-bottom:4px; font-weight:600;
}
.card span{color:var(--texto-suave); font-size:.85rem}

/* Grade de produtos (páginas de categoria) */
.produtos{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.produto-card{text-align:center; display:flex; flex-direction:column}
.produto-card__icone{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--fundo-claro);
  transition:background .3s ease;
}
.produto-card:hover .produto-card__icone{background:#f1ede6}
.produto-card__corpo{padding:20px 6px; flex:1; display:flex; flex-direction:column; gap:6px}
.produto-card__marca{font-family:var(--fonte-titulo); font-weight:600; color:var(--preto); font-size:1.15rem}
.produto-card__tipo{color:var(--texto-suave); font-size:.85rem; flex:1}
.produto-card__preco{font-size:.72rem; color:var(--vermelho); font-weight:600; text-transform:uppercase; letter-spacing:.12em}
.produtos-nota{
  max-width:640px; margin:50px auto 0; text-align:center; background:var(--fundo-claro);
  border-radius:var(--raio); padding:30px;
}
.produtos-nota b{display:block; font-family:var(--fonte-titulo); color:var(--preto); margin-bottom:6px; font-size:1.1rem}
.produtos-nota span{color:var(--texto-suave); font-size:.92rem}

/* Marcas — carrossel escuro */
.marcas-secao{background:var(--preto); padding:100px 0; text-align:center}
.marcas-secao .eyebrow{color:var(--amarelo)}
.marcas-secao h2{color:#fff}
.marcas-secao__intro{color:#a89f98; max-width:520px; margin:0 auto}
.marcas-carrossel{max-width:860px; margin:48px auto 0; overflow:hidden}
.marcas-carrossel__trilho{display:flex; transition:transform .5s ease}
.marcas-carrossel__pagina{
  flex:0 0 100%; display:grid; grid-template-columns:repeat(3,1fr); gap:56px 32px; align-items:center; justify-items:center;
}
/* Logos oficiais em branco sobre o fundo preto: brightness(0)+invert(1) unifica qualquer cor original */
.marcas-carrossel__logo{width:var(--w); max-width:100%; height:auto; filter:brightness(0) invert(1); opacity:.8; transition:opacity .25s ease}
.marcas-carrossel__logo:hover{opacity:1}
.marcas-carrossel__nome{
  font-family:var(--fonte-titulo); font-size:1.5rem; color:#fff; opacity:.85; letter-spacing:.01em;
}
.marcas-carrossel__pontos{display:flex; gap:10px; justify-content:center; margin-top:40px}
.marcas-carrossel__ponto{
  width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.25); cursor:pointer;
}
.marcas-carrossel__ponto.ativo{background:var(--amarelo); width:24px; border-radius:4px; transition:width .25s ease}
.marcas__nota{text-align:center; color:#a89f98; font-size:.85rem; margin-top:30px}
.marcas__aviso{text-align:center; color:#7d756e; font-size:.75rem; max-width:560px; margin:14px auto 0; line-height:1.5}
@media (max-width:600px){
  .marcas-carrossel__pagina{grid-template-columns:repeat(2,1fr); gap:44px 20px}
  .marcas-carrossel__logo{width:calc(var(--w) * .8)}
  .marcas-carrossel__nome{font-size:1.3rem}
}
@media (max-width:480px){
  .marcas-carrossel__pagina{grid-template-columns:1fr; gap:36px}
}

/* Galeria da loja */
.galeria{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.galeria a{overflow:hidden; aspect-ratio:3/4; display:block; position:relative}
.galeria img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.galeria a:hover img{transform:scale(1.08)}

/* Como funciona */
.passos{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; counter-reset:passo}
.passo{text-align:center; position:relative; padding:0 12px}
.passo::before{
  counter-increment:passo; content:counter(passo, decimal-leading-zero); display:block;
  font-family:var(--fonte-titulo); font-size:2.4rem; color:var(--borda); margin-bottom:8px;
}
.passo h3{font-size:1.15rem; margin-bottom:.4em}
.passo p{color:var(--texto-suave); margin:0}

/* Pagamento */
.pagamento{
  display:flex; align-items:center; justify-content:center; gap:16px; border:1px solid var(--borda);
  border-radius:var(--raio); padding:26px; max-width:520px; margin:50px auto 0;
}
.pagamento svg{flex:none; color:var(--vermelho)}
.pagamento b{display:block; font-family:var(--fonte-titulo); color:var(--preto); font-size:1.05rem}
.pagamento span{color:var(--texto-suave); font-size:.9rem}

/* Localização */
.local{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.local__mapa{position:relative; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--borda); background:var(--fundo-claro)}
.local__mapa iframe{width:100%; height:100%; border:0}
.local__mapa-btn{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:24px 24px 56px; background:none; border:0; cursor:pointer; font:inherit; color:var(--texto-suave); text-align:center;
}
.local__mapa-btn svg{color:var(--vermelho)}
.local__mapa-btn b{font-family:var(--fonte-titulo); font-size:1.4rem; font-weight:600; color:var(--preto)}
.local__mapa-btn:hover b{color:var(--vermelho)}
.local__mapa-btn span{font-size:.8rem; line-height:1.5; max-width:34ch}
.local__mapa-link{position:absolute; left:0; right:0; bottom:16px; text-align:center; font-size:.85rem; color:var(--vermelho); text-decoration:underline}
.local__lista{list-style:none; margin:0; padding:0; display:grid; gap:22px}
.local__lista li{display:flex; gap:16px; align-items:flex-start}
.local__lista svg{flex:none; margin-top:2px; color:var(--vermelho)}
.local__lista b{display:block; font-family:var(--fonte-titulo); color:var(--preto); font-size:1.05rem}
.local__lista span{color:var(--texto-suave)}

/* CTA final */
.cta-final{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(245,180,0,.14), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(179,18,23,.18), transparent 50%),
    var(--preto);
}
.cta-final h2{color:#fff}
.cta-final p{color:#c7bfb8; max-width:56ch; margin:0 auto 34px}
.cta-final__ctas{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap}
.cta-final .cta-final__nota{margin:28px auto 0; font-size:.85rem; max-width:52ch}
.cta-final__nota a{color:var(--amarelo); text-decoration:underline}

/* Passos do orçamento por receita (seção "Fale com a gente") */
.receita-passos{list-style:none; margin:0 auto 38px; padding:0; max-width:860px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:left}
.receita-passos li{display:flex; gap:14px; align-items:flex-start}
.receita-passos__n{
  flex:none; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--amarelo); color:var(--amarelo);
  display:flex; align-items:center; justify-content:center; font-family:var(--fonte-titulo); font-size:1.15rem; line-height:1;
}
.receita-passos b{display:block; color:#fff; font-family:var(--fonte-titulo); font-weight:600; font-size:1.1rem; line-height:1.3; margin-bottom:2px}
.receita-passos li > div > span{display:block; color:#c7bfb8; font-size:.88rem; line-height:1.5}
@media (max-width:760px){ .receita-passos{grid-template-columns:1fr; gap:18px; max-width:340px} }

/* Rodapé */
/* padding-bottom maior: o botão flutuante do WhatsApp (60px + 20px de margem) não pode cobrir o último texto/link do rodapé */
footer{background:var(--branco); color:var(--texto-suave); padding:60px 0 96px; font-size:.85rem; border-top:1px solid var(--borda)}
.rodape__topo{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid var(--borda); align-items:center}
.rodape__marca{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.rodape__marca img{height:64px; width:auto; display:block}
.rodape__dados{display:flex; flex-direction:column; gap:2px}
.rodape__desde{color:var(--vermelho); font-weight:500}
.rodape__contato{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.rodape__contato-item{display:flex; align-items:center; gap:8px}
.rodape__contato-item svg{flex:none; color:var(--vermelho)}
.rodape__contato-item a{text-decoration:none}
.rodape__contato-item a:hover{text-decoration:underline}
.rodape__base{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:24px; text-transform:uppercase; letter-spacing:.05em; font-size:.75rem}
footer a{color:var(--vermelho); text-decoration:none}
footer a:hover{text-decoration:underline}

/* Botão flutuante WhatsApp + balão de saudação */
.wa-widget{position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:14px}
.whats-flutuante{
  width:60px; height:60px; border-radius:50%; flex:none; border:0; padding:0; cursor:pointer;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25); text-decoration:none;
}
.wa-bubble{
  background:#fff; border-radius:8px; box-shadow:0 20px 50px rgba(20,17,16,.2); padding:20px;
  width:280px; max-width:calc(100vw - 40px); position:relative;
  opacity:0; transform:translateY(12px) scale(.96); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.wa-bubble.mostrar{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.wa-bubble::after{
  content:''; position:absolute; bottom:-8px; right:26px; width:16px; height:16px;
  background:#fff; transform:rotate(45deg);
}
.wa-bubble__fechar{
  position:absolute; top:8px; right:10px; background:none; border:0; font-size:1.3rem; line-height:1;
  color:var(--texto-suave); cursor:pointer; padding:4px;
}
.wa-bubble__msg{font-size:.9rem; color:var(--texto); margin:6px 20px 16px 0; font-family:var(--fonte-corpo)}
.wa-bubble__abrir{
  display:flex; align-items:center; justify-content:center; gap:8px; background:#25D366; color:#fff;
  text-decoration:none; font-weight:600; font-size:.85rem; padding:12px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.06em;
}
.wa-bubble__abrir:hover{background:#1fa855}

/* Mobile */
@media (max-width:960px){
  .hero__bg::after{background:linear-gradient(180deg, rgba(20,17,16,.55) 0%, rgba(20,17,16,.85) 75%)}
  .hero__conteudo{max-width:100%; padding:60px 24px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.cards--3{grid-template-columns:1fr; max-width:480px}
  .cabecalho__whats{display:none}
  .produtos{grid-template-columns:repeat(2,1fr)}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .passos{grid-template-columns:1fr}
  .local{grid-template-columns:1fr}
  section{padding:70px 0}
  .menu{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:#fff; flex-direction:column;
    align-items:flex-start; padding:100px 30px 28px; gap:26px; transform:translateX(100%);
    transition:transform .25s ease; box-shadow:-8px 0 24px rgba(0,0,0,.12); visibility:hidden;
    z-index:2;
  }
  .menu.aberto{transform:translateX(0); visibility:visible}
  .menu__cta{display:inline-flex}
  .menu__hamburguer{display:block}
  .menu__fechar{display:block; position:absolute; top:30px; right:30px; background:none; border:0; font-size:1.6rem; cursor:pointer; color:var(--preto)}
  .veu{position:fixed; inset:0; background:rgba(10,20,30,.4); z-index:45; opacity:0; pointer-events:none; transition:opacity .25s ease}
  .veu.aberto{opacity:1; pointer-events:auto}
  html.menu-aberto, html.menu-aberto body{overflow:hidden}
  /* backdrop-filter no .cabecalho vira bloco de contenção de filho position:fixed
     (achado real no site da Ecoliptus) — sem isso o menu fica preso na altura do
     cabeçalho em vez de cobrir a tela toda. */
  .cabecalho{backdrop-filter:none}
}
@media (max-width:600px){
  :root{--h-cab:72px}
  .marca img{height:46px}
  /* Hero compacto no celular: com as barras do navegador a tela útil fica em ~660px e ainda precisa caber a faixa. */
  .hero__conteudo{padding:28px 24px}
  .hero h1{font-size:2.3rem}
  .hero p{font-size:1rem}
  .hero__ctas{margin-top:22px}
  .cards{grid-template-columns:1fr 1fr}
  .produtos{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:1fr 1fr}
  /* Rodapé centralizado no celular, como a seção "Fale com a gente" logo acima. */
  .rodape__base{flex-direction:column; align-items:center; text-align:center}
  .rodape__topo{flex-direction:column; align-items:center; text-align:center}
  .rodape__marca{align-items:center}
  .rodape__contato{justify-content:center}
  /* No celular a logo já traz os telefones (logo-com-telefone.png); o texto fica só para leitores de tela. */
  .rodape__marca img{height:auto; width:min(100%,320px); margin:0 auto}
  .rodape__contato-item--tel{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}
@media (max-width:400px){
  .hero__conteudo{padding:20px 24px}
  .hero h1{font-size:2.1rem}
  .hero p{font-size:.95rem; line-height:1.6}
  .hero__ctas{gap:12px; margin-top:18px}
  .hero__ctas .btn{padding:14px 28px}
}

/* Calculadora óptica — seção embutida na home (era página separada, calculadora.php) */
.calc-secao{
  position:relative; overflow:hidden; padding:100px 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(245,180,0,.14), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(179,18,23,.18), transparent 50%),
    linear-gradient(180deg, #2a1810, var(--preto));
}
.calc-secao .cabecalho-secao h2{color:#fff}
.calc-secao .cabecalho-secao p{color:#e7d9c8}
.calc-secao .txt-highlight{color:var(--amarelo); font-weight:800}
.calc-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.calc-card{
  border-radius:20px; overflow:hidden; border:1px solid rgba(245,180,0,.22);
  background:rgba(255,255,255,.06); backdrop-filter:blur(16px);
  box-shadow:0 25px 60px rgba(0,0,0,.45); transition:transform .35s ease, box-shadow .35s ease;
}
.calc-card:hover{transform:translateY(-6px); box-shadow:0 30px 70px rgba(179,18,23,.28)}
.calc-card__topo{
  padding:14px 18px; font-weight:800; letter-spacing:.3px; color:#fff8ea;
  background:linear-gradient(135deg, rgba(245,180,0,.28), rgba(179,18,23,.22));
  border-bottom:1px solid rgba(255,255,255,.1);
}
.calc-card__corpo{padding:22px; display:grid; gap:14px}
.calc-label{font-size:.75rem; font-weight:800; letter-spacing:.03em; color:rgba(255,255,255,.9)}
.calc-input{
  width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#fff; border-radius:12px; padding:12px 14px; font-size:1rem;
}
.calc-input::placeholder{color:rgba(230,220,205,.6)}
.calc-input:focus{outline:none; border-color:var(--amarelo); box-shadow:0 0 0 3px rgba(245,180,0,.2)}
.calc-input[readonly]{background:rgba(245,180,0,.08); border-color:rgba(245,180,0,.3); font-weight:800}
.calc-btn{
  background:linear-gradient(135deg, var(--amarelo), var(--vermelho)); border:0; padding:13px 18px;
  border-radius:999px; color:#fff; font-weight:800; letter-spacing:.03em; cursor:pointer; width:100%;
  box-shadow:0 0 20px rgba(245,180,0,.35); transition:transform .2s ease, box-shadow .2s ease;
}
.calc-btn:hover{transform:translateY(-2px); box-shadow:0 0 28px rgba(245,180,0,.5)}
.calc-msg{padding:12px 14px; border-radius:12px; font-size:.85rem; color:rgba(255,255,255,.85); background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.1)}
.calc-msg.ok{border-color:rgba(245,180,0,.35); background:rgba(245,180,0,.08); color:#fff8ea}
.calc-msg.warn{border-color:rgba(255,138,0,.35); background:rgba(255,138,0,.12); color:#fff}
.calc-nota{text-align:center; color:#cbb9a5; font-size:.85rem; margin-top:30px}
.calc-receita{text-align:center; color:#e7d9c8; margin:18px 0 0}
.calc-receita a{color:var(--amarelo); font-weight:500; text-decoration:underline}
@media (max-width:960px){ .calc-cards{grid-template-columns:1fr} }