/* ==========================================================================
   styles.css — Premium Vision Ótica
   Ordem das seções segue specs/site.md §6. Redlines em specs/plano.md §2.
   ========================================================================== */

/* --- 1. Base ------------------------------------------------------------ */
/* Fundo dinâmico (D24): três halos quentes presos à janela, cuja posição acompanha
   a rolagem. Não é animação em loop — só se move quando você rola, então não conflita
   com a proibição da design.md §14. Com movimento reduzido, --rolagem fica em 0. */
body{
  font-family:var(--f-corpo);font-size:var(--t-corpo);
  color:var(--grafite);
  background-color:var(--osso);
  background-image:
    radial-gradient(closest-side, rgba(235,125,42,.16), rgba(235,125,42,0)),
    radial-gradient(closest-side, rgba(235,125,42,.11), rgba(235,125,42,0)),
    radial-gradient(closest-side, rgba(196,97,26,.09), rgba(196,97,26,0));
  background-size:78vw 78vw, 62vw 62vw, 92vw 92vw;
  background-repeat:no-repeat;
  background-attachment:fixed, fixed, fixed;
  background-position:
    calc(-8%  + var(--rolagem) * 34%) calc(6%   + var(--rolagem) * 26%),
    calc(104% - var(--rolagem) * 30%) calc(24%  + var(--rolagem) * 44%),
    calc(46%  + var(--rolagem) * 18%) calc(108% - var(--rolagem) * 52%);
}
h1,h2,h3{font-family:var(--f-titulo);font-weight:400;letter-spacing:-.02em}
strong{font-weight:600}

/* --- 2. Utilitários ----------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.secao{padding-block:var(--secao-y)}
/* âncora não pode parar embaixo do cabeçalho fixo */
section[id],div[id]{scroll-margin-top:var(--offset-topo)}
/* Seções claras não cortam reto contra o degradê da página: o claro nasce
   transparente, firma no meio e volta a sumir. Quando duas seções claras se
   encostam, o encontro fica sólido — senão apareceria uma faixa de fundo entre
   elas, que é justamente a emenda que se quer evitar. */
.secao--branca{
  --claro:rgba(255,255,255,.72);
  --topo:transparent;
  --base:transparent;
  background:linear-gradient(to bottom,
    var(--topo) 0,
    var(--claro) var(--fade-secao),
    var(--claro) calc(100% - var(--fade-secao)),
    var(--base) 100%);
}
.secao--branca + .secao--branca{--topo:var(--claro)}
.secao--branca:has(+ .secao--branca){--base:var(--claro)}
.secao--osso{background:transparent}
.medida{max-width:var(--medida)}

.olho{
  font-size:var(--t-micro);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--laranja-texto);
  display:block;margin-bottom:var(--e-3);
}
/* traço laranja curto antes do olho de seção */
.olho::before{content:"";display:inline-block;width:20px;height:1.5px;
  background:var(--laranja);vertical-align:.28em;margin-right:var(--e-3)}
.titulo-secao{font-size:var(--t-h1);max-width:var(--medida-titulo)}
.titulo-bloco{font-size:var(--t-h2);max-width:var(--medida-titulo)}
.lead{font-size:var(--t-lead);color:var(--cinza-texto);max-width:var(--medida);margin-top:var(--e-4)}
.cabeca-secao{margin-bottom:var(--e-7)}
.cabeca-secao .lead{margin-top:var(--e-5)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pular{position:absolute;left:var(--e-4);top:-100px;z-index:var(--z-gaveta);
  background:var(--grafite);color:var(--osso);padding:var(--e-3) var(--e-5);border-radius:var(--r-pill)}
.pular:focus{top:var(--e-4)}

/* Marcador de informação ainda não fornecida — regra do CLAUDE.md */
.def{
  display:inline-block;background:var(--laranja-claro);color:var(--laranja-texto);
  font-family:var(--f-corpo);font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;
  padding:2px 8px;border-radius:var(--r-pequeno);
}

/* --- 3. Botões (design.md §8) ------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  min-height:48px;padding:14px 28px;border-radius:var(--r-pill);
  font-size:var(--t-botao);font-weight:500;letter-spacing:.02em;white-space:nowrap;
  transition:background var(--t-rapido),color var(--t-rapido),transform var(--t-rapido),border-color var(--t-rapido);
}
.btn--primario{background:var(--laranja);color:var(--grafite)}
.btn--primario:hover{background:var(--laranja-hover);transform:translateY(-1px)}
.btn--primario:active{transform:none}
.btn--secundario{border:1px solid var(--grafite);color:var(--grafite)}
.btn--secundario:hover{background:var(--grafite);color:var(--branco)}
.btn--sobrefoto{background:var(--branco);color:var(--grafite)}
.btn--sobrefoto:hover{background:var(--osso)}
.btn--terciario{
  min-height:44px;padding:10px 0;color:var(--grafite);border-radius:0;white-space:normal;text-align:left;
  font-family:var(--f-corpo);font-size:var(--t-pequeno);font-weight:500;
}
.btn--terciario .seta{transition:transform var(--t-rapido)}
.btn--terciario:hover .seta{transform:translateX(4px)}
.btn--terciario:hover{box-shadow:inset 0 -1px 0 var(--grafite)}

/* --- 4. Barra de topo, header e gaveta ---------------------------------- */
.topo{position:fixed;inset:0 0 auto;z-index:var(--z-header)}
.barra-topo{
  background:var(--grafite);color:var(--osso);height:var(--h-barra-topo);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-micro);letter-spacing:.06em;text-align:center;
}
.barra-topo{overflow:hidden}  /* nunca pode invadir o cabeçalho */
.barra-topo p{padding-inline:var(--e-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a barra só cabe uma linha: a oferta aparece sempre, as cidades entram
   conforme sobra largura */
.barra-topo strong{font-weight:600}


.header{height:var(--h-header);transition:background var(--t-medio),box-shadow var(--t-medio)}
.header.is-solido{background:var(--osso);box-shadow:var(--sombra-flutuante)}
.header__interno{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--e-5)}
.header__logo{display:inline-flex;align-items:center;min-height:44px}
.header__logo img{height:32px;width:auto}
.nav{display:none}
.nav ul{display:flex;gap:var(--e-6);align-items:center}
/* Os itens do topo são de dois tipos: botão, quando abre submenu, e link, quando
   não abre. Botão em inline-flex e link em inline geram caixas de altura
   diferente — 40px contra 34 — e o texto de um descia 7px em relação ao outro.
   Aqui os dois passam a ter a mesma caixa, então as quatro palavras assentam na
   mesma linha de base. */
.nav > ul > li{display:flex;align-items:center}
.nav a{font-size:var(--t-pequeno);color:var(--grafite);padding-block:var(--e-2);
  box-shadow:inset 0 0 0 var(--grafite);transition:box-shadow var(--t-rapido)}
.nav > ul > li > a,.nav__topo{display:inline-flex;align-items:center;line-height:1.5;min-height:44px}
.nav a:hover{box-shadow:inset 0 -1px 0 var(--grafite)}
/* submenu: abre no hover e também no foco pelo teclado (D41) */
.nav__grupo{position:relative}
.nav__topo{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-pequeno);
  color:var(--grafite);font-family:inherit;padding-block:var(--e-2);
  box-shadow:inset 0 0 0 var(--grafite);transition:box-shadow var(--t-rapido)}
.nav__grupo:hover .nav__topo,.nav__topo[aria-expanded="true"]{box-shadow:inset 0 -1px 0 var(--grafite)}
.nav__seta{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;
  transition:transform var(--t-rapido)}
.nav__grupo:hover .nav__seta,.nav__topo[aria-expanded="true"] .nav__seta{transform:rotate(180deg)}
.nav ul.nav__sub{position:absolute;top:100%;left:calc(var(--e-4) * -1);z-index:5;
  display:flex;flex-direction:column;gap:0;min-width:172px;margin-top:var(--e-3);
  padding:var(--e-2) 0;background:var(--branco);border:var(--borda);
  border-radius:var(--r-medio);box-shadow:var(--sombra-flutuante);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--t-rapido),transform var(--t-rapido),visibility var(--t-rapido)}
.nav__grupo:hover .nav__sub,.nav__grupo:focus-within .nav__sub,
.nav__topo[aria-expanded="true"] + .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{display:block;padding:var(--e-3) var(--e-4);box-shadow:none}
.nav__sub a:hover{background:var(--osso);box-shadow:none}
/* o menu some quando o cursor sai; um vão invisível evita que ele feche no caminho */
.nav__grupo::after{content:"";position:absolute;top:100%;left:0;right:0;height:var(--e-3)}
.header__acao{display:none}

.menu-btn{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px}
.menu-btn span{display:block;width:22px;height:1.5px;background:var(--grafite);
  position:relative;transition:background var(--t-rapido)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;
  background:var(--grafite);transition:transform var(--t-medio)}
.menu-btn span::before{top:-7px}.menu-btn span::after{top:7px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

.gaveta-fundo{position:fixed;inset:0;background:rgba(20,18,16,.45);z-index:var(--z-gaveta-fundo);
  opacity:0;transition:opacity var(--t-medio)}
.gaveta-fundo.is-aberta{opacity:1}
.gaveta{
  position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:var(--osso);
  z-index:var(--z-gaveta);transform:translateX(100%);transition:transform 280ms var(--ease);
  padding:var(--e-7) var(--e-5) var(--e-5);display:flex;flex-direction:column;gap:var(--e-5);
  overflow-y:auto;
}
.gaveta.is-aberta{transform:translateX(0)}
.gaveta ul{display:flex;flex-direction:column;gap:var(--e-1)}
.gaveta a{display:block;padding:var(--e-3) 0;font-size:var(--t-lead);font-family:var(--f-titulo)}
.gaveta .btn{margin-top:var(--e-4)}
.gaveta__fechar{align-self:flex-end;width:44px;height:44px;font-size:24px;line-height:1;color:var(--grafite)}
.gaveta__titulo{margin-top:var(--e-4);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--cinza-texto);font-weight:600}
.gaveta__titulo:first-child{margin-top:0}
.gaveta__titulo + li a{padding-top:var(--e-2)}
.gaveta__divisor{margin-top:var(--e-4);padding-top:var(--e-3);border-top:var(--borda)}

/* --- 5. Hero (site.md §6.3) --------------------------------------------- */
.hero{padding-top:var(--offset-topo);background:transparent}
.hero__grade{display:grid;gap:var(--e-6)}
.hero__midia{position:relative;height:var(--h-hero-midia);width:100%;overflow:hidden;background:var(--cinza-fundo)}
.hero__midia img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* o vídeo cobre a foto por cima, no mesmo enquadramento, e aparece em fusão */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 38%;opacity:0;transition:opacity 600ms var(--ease);pointer-events:none}
.hero__video.is-visivel{opacity:1}
.hero__texto{padding-block:var(--e-7) var(--e-8)}
.hero h1{font-size:var(--t-display);line-height:1.05;max-width:14ch}
.hero .lead{margin-top:var(--e-5)}
.hero__acoes{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-6)}

/* --- 6. Faixa de categorias (site.md §6.4) ------------------------------ */
.categorias{background:rgba(255,255,255,.72);padding-block:var(--e-7)}
.categorias__lista{
  display:flex;gap:var(--e-6);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);align-items:flex-start;
  scrollbar-width:none;-ms-overflow-style:none;
}
.categorias__lista::-webkit-scrollbar{display:none}
.cat{scroll-snap-align:start;flex:0 0 auto;text-align:center;width:120px;align-self:flex-start}
.cat__img{display:block;width:120px;height:120px;border-radius:var(--r-medio);overflow:hidden;
  background:var(--cinza-fundo);border:var(--borda);transition:border-color var(--t-rapido)}
.cat__img img{width:100%;height:100%;object-fit:cover}
.cat__rotulo{display:block;margin-top:var(--e-3);min-height:calc(1.4em * 2);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cinza-texto);transition:color var(--t-rapido)}
.cat[aria-pressed="true"] .cat__img{border-color:var(--laranja);box-shadow:0 0 0 2px var(--laranja)}
.cat[aria-pressed="true"] .cat__rotulo{color:var(--laranja-texto)}
.cat:hover .cat__img{border-color:var(--cinza-texto)}

/* --- 7. Vitrine e card de produto (site.md §6.5, design.md §9) ---------- */
/* branco sólido: as duas filas de recortes pedem fundo limpo, e o degradê
   dinâmico atrás sujava a borda das armações claras (D46) */
.vitrine.secao--branca,#lentes-contato.secao--branca{--claro:var(--branco)}

/* Carrossel horizontal: 12 produtos em grid davam 3 fileiras de altura.
   Sem autoplay — a design.md §14 proíbe. Arrasto no celular, setas no desktop. */
.vitrine__cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e-6)}
/* só o botão de pausa mora aqui agora (D21). Visível em todo tamanho: no celular
   não existe hover, então ele é o único jeito de parar o movimento. */
.carrossel__setas{display:flex;flex:0 0 auto;gap:var(--e-3)}
.seta-btn{
  width:48px;height:48px;border:1px solid var(--cinza-borda);border-radius:var(--r-pill);
  display:grid;place-items:center;background:var(--branco);color:var(--grafite);
  transition:border-color var(--t-rapido),background var(--t-rapido),opacity var(--t-rapido);
}
.seta-btn:hover:not(:disabled){border-color:var(--grafite)}
.seta-btn:disabled{opacity:.3;cursor:default}
.seta-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}

.grade-produtos{
  display:flex;gap:var(--grid-gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  /* sem scroll-snap e sem scroll-behavior:smooth aqui — os dois brigam com a
     esteira contínua. O passo suave das setas é pedido no JS, por chamada. */
  scroll-padding-inline:var(--gutter);
  padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);
  padding-block:2px var(--e-4);
  scrollbar-width:none;-ms-overflow-style:none;
  transition:opacity var(--t-medio);
}
.grade-produtos::-webkit-scrollbar{display:none}
.grade-produtos.is-trocando{opacity:0}
.grade-produtos .card{flex:0 0 clamp(190px,52vw,240px)}
/* segunda fila: só o espaçamento muda, o sentido do giro é decidido no JS */
.grade-produtos--volta{padding-block:0 var(--e-4);margin-top:calc(var(--e-3) * -1)}

/* barra de progresso do carrossel */
.carrossel__setas .seta-btn--pausa{font-size:var(--t-micro)}

/* Card sem moldura (D21): nada de fundo, borda ou raio — o óculos flutua direto
   sobre o fundo da seção. Só nome e características embaixo. */
.card{display:flex;flex-direction:column;text-align:center;background:none;border:0}
.card__foto{aspect-ratio:4/3;background:none;overflow:visible}
.card__foto img{width:100%;height:100%;object-fit:contain;
  transition:transform 400ms var(--ease)}
/* no hover o óculos sobe e cresce um pouco: dá a sensação de pegar na mão.
   focus-within cobre quem chega pelo teclado, que não tem hover. */
.card:hover .card__foto img,.card:focus-within .card__foto img{transform:translateY(-10px) scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .card__foto img{transition:none}
  .card:hover .card__foto img,.card:focus-within .card__foto img{transform:none}
}
/* lupa: cobre a foto inteira, mas só aparece no hover ou no foco (D43) */
.card__foto{position:relative}
.card__lupa{position:absolute;inset:0;display:grid;place-items:center;
  background:none;border:0;cursor:zoom-in;color:var(--grafite);opacity:0;
  transition:opacity var(--t-rapido)}
.card__lupa svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.4;
  background:rgba(255,255,255,.86);border-radius:50%;padding:8px;
  box-shadow:var(--sombra-flutuante)}
.card:hover .card__lupa,.card__lupa:focus-visible{opacity:1}
/* No toque a lupa ficava acesa em cima de todos os óculos ao mesmo tempo e
   poluía a vitrine. O botão continua cobrindo a foto — tocar amplia — só o
   ícone some. */
@media (hover:none){ .card__lupa{opacity:0} }
.card__corpo{display:flex;flex-direction:column;align-items:center;flex:1;padding:var(--e-4) var(--e-2) 0}
.card__nome{
  font-family:var(--f-titulo);font-size:1.0625rem;line-height:1.25;
  min-height:calc(1.25em * 2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card__desc{
  font-size:var(--t-micro);color:var(--cinza-texto);margin-top:var(--e-2);line-height:1.45;
  min-height:calc(1.45em * 3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.vazio{flex:1 0 100%;text-align:center;padding:var(--e-8) 0;color:var(--cinza-texto)}
.vazio .btn{margin-top:var(--e-5)}

/* --- 8. Blocos de marca (site.md §6.6 e §6.7) --------------------------- */
.bloco-marca{display:grid;background:var(--branco)}
/* a foto é retrato; 16/9 no celular cortava o modelo pela metade */
.bloco-marca__midia{aspect-ratio:4/5;overflow:hidden;background:var(--cinza-fundo)}
.bloco-marca__midia img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.bloco-marca__texto{padding:var(--e-8) var(--gutter)}
.bloco-marca__texto>*{max-width:var(--medida)}
.bloco-marca .btn{margin-top:var(--e-6)}
.bloco-marca--escuro{background:var(--grafite);color:var(--osso)}
.bloco-marca--escuro .olho,.bloco-marca--escuro .lead{color:#B9B2AA}

/* --- 9. Lentes e lentes de contato (site.md §6.8) ----------------------- */
.duplo{display:grid;gap:var(--grid-gap);grid-template-columns:1fr}
.painel{background:var(--branco);border:var(--borda);border-radius:var(--r-grande);overflow:hidden;
  display:flex;flex-direction:column}
.painel__midia{aspect-ratio:3/2;background:var(--cinza-fundo);overflow:hidden}
.painel__midia img{width:100%;height:100%;object-fit:cover}
.painel__corpo{padding:var(--e-5);display:flex;flex-direction:column;flex:1}
.painel__corpo h3{font-size:var(--t-h3)}
.painel__corpo p{margin-top:var(--e-3);color:var(--cinza-texto);font-size:var(--t-pequeno)}
.painel__corpo .btn{margin-top:auto;padding-top:var(--e-4);align-self:flex-start}
.lista-marcada{margin-top:var(--e-4);display:flex;flex-direction:column;gap:var(--e-2)}
.lista-marcada li{display:flex;gap:var(--e-3);font-size:var(--t-pequeno);color:var(--cinza-texto)}
.lista-marcada li::before{content:"";flex:0 0 6px;height:6px;margin-top:.55em;border-radius:50%;
  background:var(--laranja)}

/* Ray-Ban: formato de banner contido, diferente do bloco dividido do Varilux */
.rayban__banner{margin:0}
/* no celular o 2:1 deixa a foto com ~175px e o rosto some. Recorta para 3:2 e desloca
   o enquadramento para a esquerda, para a assinatura da marca não ser cortada. */
.rayban__banner img{width:100%;height:100%;display:block;border-radius:var(--r-grande);
  aspect-ratio:3/2;object-fit:cover;object-position:10% 50%}
.rayban__conteudo{display:grid;gap:var(--e-5);margin-top:var(--e-7)}
.rayban__conteudo .titulo-secao{max-width:16ch}
.rayban__conteudo .lead + .lead{margin-top:var(--e-4)}

/* --- 9b. Crizal Natural Look (D27) --------------------------------------- */
.crizal{--claro:var(--branco);border-block:var(--borda)}
.crizal__topo{display:grid;gap:var(--e-5);margin-bottom:var(--e-7)}
.crizal__topo .titulo-secao{font-size:var(--t-display);line-height:1}
.crizal__logo{height:34px;width:auto;margin-top:var(--e-4);opacity:.9}
.crizal__chamada{font-family:var(--f-titulo);font-size:var(--t-h2);line-height:1.2;
  max-width:16ch;color:var(--grafite);padding-left:var(--e-5);border-left:2px solid var(--laranja)}

.crizal__comparacao{margin:0 auto var(--e-8);max-width:880px}
.crizal__par{position:relative}
.crizal__par img{width:100%;height:auto;display:block;border-radius:var(--r-grande)}
/* Um rótulo por metade da imagem, os dois centrados na sua metade e na mesma
   altura. Antes ficavam em cantos opostos, um em cima e outro embaixo, e o olho
   não entendia que era uma comparação lado a lado. */
.crizal__rotulo{position:absolute;bottom:var(--e-3);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grafite);white-space:nowrap;
  background:rgba(255,255,255,.94);padding:5px 10px;border-radius:var(--r-pill);
  transform:translateX(-50%)}
.crizal__rotulo--a{left:25%}
.crizal__rotulo--b{left:75%;background:var(--laranja)}
@media (max-width:479px){
  .crizal__rotulo{font-size:9px;padding:4px 8px;letter-spacing:.04em}
}
@media (min-width:600px){
  /* sobrou da versão em cantos opostos e jogava o rótulo da esquerda para fora
     da sua metade; o posicionamento por porcentagem já vale em toda largura */
  .crizal__rotulo{font-size:var(--t-micro);padding:8px 14px;letter-spacing:.08em;
    bottom:var(--e-5)}
}

.crizal__grade{display:grid;gap:var(--e-7);grid-template-columns:1fr;align-items:start}
.crizal__texto p{color:var(--cinza-texto);max-width:52ch}
.crizal__texto p + p{margin-top:var(--e-4)}
.crizal__texto strong{color:var(--grafite)}
.crizal__tech{padding-left:var(--e-5);border-left:2px solid var(--cinza-borda)}

.numeros{display:grid;gap:var(--e-5)}
.numeros li{display:grid;gap:var(--e-2);padding-top:var(--e-4);border-top:2px solid var(--laranja)}
.numeros strong{font-family:var(--f-titulo);font-size:var(--t-h1);line-height:.95;
  letter-spacing:-.03em;color:var(--laranja-texto);
  background:linear-gradient(180deg,var(--laranja-vivo) 0%,var(--laranja-fundo-num) 88%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.numeros span{font-size:var(--t-pequeno);color:var(--cinza-texto);line-height:1.5}

/* vídeo do YouTube com fachada: só carrega o player quando alguém clica.
   Um iframe do YouTube puxa ~1 MB de scripts e cookies de terceiro antes mesmo
   de a pessoa dar play — isso estouraria o orçamento de specs/site.md §13. */
.video-yt{margin-top:var(--e-8)}
.video-yt__abrir{position:relative;display:block;width:100%;padding:0;border:0;
  border-radius:var(--r-grande);overflow:hidden;background:var(--cinza-fundo);
  aspect-ratio:16/9;cursor:pointer}
.video-yt__abrir img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 500ms var(--ease),filter var(--t-medio)}
.video-yt__abrir:hover img{transform:scale(1.02);filter:brightness(.92)}
.video-yt__play{position:absolute;inset:0;display:grid;place-items:center}
.video-yt__play svg{width:76px;height:76px;padding:24px;border-radius:var(--r-pill);
  background:var(--laranja);fill:var(--grafite);
  box-shadow:0 10px 30px rgba(20,18,16,.28);
  transition:transform var(--t-rapido)}
.video-yt__abrir:hover .video-yt__play svg{transform:scale(1.07)}
.video-yt iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-grande);display:block}
.video-yt__legenda{margin-top:var(--e-3);font-size:var(--t-micro);color:var(--cinza-texto)}

.nota-fabricante{margin-top:var(--e-6);font-size:var(--t-micro);color:var(--cinza-texto);max-width:78ch}
.bloco-marca--escuro .nota-fabricante{color:#9C948B}

/* marcas parceiras — texto por enquanto, entra o logo oficial quando chegar */
.marcas{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-4)}
.marcas__item{border:var(--borda);border-radius:var(--r-pill);padding:7px 16px;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.04em;color:var(--grafite);
  background:var(--branco)}
.lista-marcada--clara li{color:#CFC7BE}
.lista-marcada--clara li::before{background:var(--laranja)}

.icone-social{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:6px;
  fill:none;stroke:currentColor;stroke-width:1.6}

.bloco-marca__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-6);
  margin-top:var(--e-6)}
.bloco-marca .bloco-marca__acoes .btn{margin-top:0}

/* destaque Transitions: foto vertical de campanha + texto */
.destaque{display:grid;gap:0;grid-template-columns:minmax(0,1fr);align-items:center;
  background:var(--branco);border:var(--borda);border-radius:var(--r-grande);
  padding:var(--e-4)}
/* a 320px uma palavra longa segurava a coluna em 269px dentro de um espaço de
   246, e a foto saía do cartão. minmax(0,1fr) solta a coluna e a quebra de
   palavra evita que o texto vaze no lugar dela. */
.destaque__texto{overflow-wrap:break-word}
/* a foto é vertical: no fluxo ela estica a linha do grid e o bloco passa de 870px.
   Fora do fluxo, quem manda na altura é o texto. */
/* a foto é vertical (618x1100). Quanto mais baixa a moldura, mais o corte come as
   modelos. Em 0.70 sobra cerca de 80% da altura — cabe a logo, os dois rostos e o
   tronco — e a foto ainda ocupa a maior parte do bloco. */
.destaque__midia{position:relative;background:var(--cinza-fundo);aspect-ratio:.70;
  border-radius:var(--r-medio);overflow:hidden}
.destaque__midia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 0;display:block}
.destaque__texto{padding:var(--e-6)}
.destaque__texto h3{font-size:var(--t-h2);margin-top:var(--e-2);max-width:18ch}
.destaque__texto > p{margin-top:var(--e-4);color:var(--cinza-texto);max-width:48ch}
.destaque__texto .lista-marcada{margin-top:var(--e-5)}
.destaque__texto .lista-marcada strong{color:var(--grafite)}
.destaque__texto .nota-fabricante{margin-top:var(--e-5)}
.destaque__texto .btn{margin-top:var(--e-5)}

/* painéis só de texto, sem a foto genérica */
.duplo--texto{margin-top:var(--e-8)}
.painel--simples{background:transparent;border:0;border-top:2px solid var(--laranja);
  border-radius:0;padding-top:var(--e-5)}
.painel--simples h3{font-size:var(--t-h3)}
.painel--simples > p{margin-top:var(--e-3);color:var(--cinza-texto);font-size:var(--t-pequeno)}
.painel--simples .btn{margin-top:var(--e-5);align-self:flex-start}

/* faixa de marcas de lente */
.faixa-marcas{margin-top:var(--e-9);padding-top:var(--e-7);border-top:var(--borda);text-align:center}
.faixa-marcas h3{font-size:var(--t-h3)}
.faixa-marcas p{margin:var(--e-3) auto 0;max-width:52ch;font-size:var(--t-pequeno);color:var(--cinza-texto)}
.faixa-marcas__lista{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--e-6) var(--e-8);margin-top:var(--e-7)}
/* altura tunada por marca: normalizar só pela altura faz a logo larga e baixa
   (HOYA) dominar a fileira e a compacta (Eyezen) sumir. Isto equilibra o peso visual. */
.faixa-marcas__lista img{width:auto;max-width:150px;opacity:.92;
  transition:opacity var(--t-rapido),transform var(--t-rapido)}
.m-varilux{height:22px}
.m-crizal{height:32px}
.m-transitions{height:32px}
.m-eyezen{height:38px}
.m-kodak{height:28px}
.m-hoya{height:20px}
.faixa-marcas__lista li:hover img{opacity:1;transform:translateY(-2px)}
.marcas li{display:flex;align-items:center}
.marcas img{height:26px;width:auto}

/* --- 10. Como funciona (site.md §6.9) ----------------------------------- */

/* --- 11. Unidades (site.md §6.10) --------------------------------------- */
.grade-unidades{display:grid;gap:var(--e-6);grid-template-columns:1fr}
.unidade__midia{aspect-ratio:16/9;border-radius:var(--r-grande);overflow:hidden;background:var(--cinza-fundo)}
/* cinco cards empilhados eram quase três telas de rolagem no celular;
   a foto mais baixa corta isso sem tirar nenhuma informação */
@media (max-width:759px){ .unidade__midia{aspect-ratio:2/1} }
.unidade__midia img{width:100%;height:100%;object-fit:cover}
.unidade h3{font-size:var(--t-h3);margin-top:var(--e-4)}
.unidade__dado{margin-top:var(--e-2);font-size:var(--t-pequeno);color:var(--cinza-texto);
  overflow-wrap:anywhere}
.unidade__acoes{margin-top:var(--e-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-5)}
/* com 24px de vão os dois botões somavam 354 numa linha de 350 e quebravam,
   custando 54px de altura em cada um dos cinco cards */
@media (max-width:759px){ .unidade__acoes{gap:var(--e-3) var(--e-4)} }

/* --- 12. Prova social (site.md §6.11) ----------------------------------- */
/* Celular primeiro: cartão compacto. A partir de 600px ele cresce. */
.depoimentos{display:grid;gap:var(--e-3);grid-template-columns:1fr}
.depoimento{display:flex;flex-direction:column;background:var(--branco);border:var(--borda);
  border-radius:var(--r-medio);padding:var(--e-4)}
.estrelas{display:flex;gap:2px;font-size:14px;line-height:1;color:var(--cinza-borda)}
.estrelas .on{color:var(--laranja-texto)}   /* 5,41:1 no branco; o --laranja dava 2,80 */
.depoimento blockquote{margin-top:var(--e-3);font-family:var(--f-titulo);font-size:1rem;
  line-height:1.4}
.depoimento figcaption{display:flex;align-items:center;gap:var(--e-3);margin-top:auto;
  padding-top:var(--e-3)}
.depoimento__ava{flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  width:36px;height:36px;border-radius:50%;background:var(--laranja-claro);
  color:var(--laranja-texto);font-family:var(--f-titulo);font-size:13px;font-weight:600;
  letter-spacing:.04em}
.depoimento__ava img{width:100%;height:100%;object-fit:cover}
.depoimento__quem{min-width:0;font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--grafite);font-weight:600;line-height:1.3}
.depoimento__quem span{display:block;margin-top:2px;font-weight:400;letter-spacing:.06em;
  color:var(--cinza-texto)}
@media (min-width:600px){
  .depoimentos{gap:var(--grid-gap)}
  .depoimento{padding:var(--e-5)}
  .estrelas{font-size:16px}
  .depoimento blockquote{margin-top:var(--e-4);font-size:var(--t-h3);line-height:1.35}
  .depoimento figcaption{padding-top:var(--e-4)}
  .depoimento__ava{width:44px;height:44px;font-size:14px}
}

/* --- 14. FAQ (site.md §6.13) -------------------------------------------- */
.faq{max-width:820px}
.faq__item{border-bottom:var(--borda)}
.faq__botao{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-4);
  padding:var(--e-5) 0;text-align:left;font-family:var(--f-titulo);font-size:var(--t-h3);line-height:1.3}
.faq__sinal{flex:0 0 20px;height:20px;position:relative;margin-top:.35em}
.faq__sinal::before,.faq__sinal::after{content:"";position:absolute;background:var(--grafite);
  transition:transform var(--t-medio)}
.faq__sinal::before{top:9px;left:0;width:20px;height:1.5px}
.faq__sinal::after{top:0;left:9px;width:1.5px;height:20px}
.faq__botao[aria-expanded="true"] .faq__sinal::after{transform:rotate(90deg)}
/* altura medida em JS: transicionar grid-template-rows de 0fr para 1fr resolve
   para zero quando o contêiner não tem altura definida. */
.faq__resposta{height:0;overflow:hidden;transition:height var(--t-medio) var(--ease)}
.faq__resposta p{padding-bottom:var(--e-5);color:var(--cinza-texto);max-width:var(--medida)}

/* --- 15. CTA final (site.md §6.14) -------------------------------------- */
.cta-final{background:var(--laranja);color:var(--grafite);text-align:center;position:relative;overflow:hidden}
.cta-final__textura{position:absolute;inset:0;opacity:.18;object-fit:cover;width:100%;height:100%;mix-blend-mode:soft-light}
.cta-final__interno{position:relative;padding-block:var(--secao-y)}
.cta-final h2{font-size:var(--t-h1);margin-inline:auto;max-width:16ch}
.cta-final p{margin:var(--e-5) auto 0;max-width:48ch;color:#4A2A0C}
.cta-final .btn{margin-top:var(--e-6)}
.btn--escuro{background:var(--grafite);color:var(--branco)}
.btn--escuro:hover{background:var(--preto-rodape);transform:translateY(-1px)}

/* --- 16. Rodapé (site.md §6.15) ----------------------------------------- */
.rodape{background:var(--preto-rodape);color:#B9B2AA;padding-block:var(--e-8) var(--e-6)}
.rodape__grade{display:grid;gap:var(--e-7);grid-template-columns:1fr}
.rodape__logo img{height:34px;width:auto}
.rodape__marca p{margin-top:var(--e-4);font-size:var(--t-pequeno);max-width:38ch}
/* texto institucional: mais claro e com respiro; a linha de produtos vira apoio */
.rodape__sobre{color:var(--osso);line-height:1.65;hyphens:manual;text-wrap:pretty}
.rodape h3{font-family:var(--f-corpo);font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--osso);margin-bottom:var(--e-4)}
/* os links do rodapé tinham 17px de altura; alvo mínimo é 44 */
.rodape a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-pequeno);transition:color var(--t-rapido)}
.rodape a:hover{color:var(--osso)}
.rodape__base{margin-top:var(--e-8);padding-top:var(--e-5);border-top:1px solid rgba(247,245,241,.12);
  font-size:var(--t-micro);display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-6);justify-content:space-between}

/* --- 15b. Painel laranja da lente de contato (D53) ------------------------ */
/* A seção inteira é laranja para o texto caber dentro do mesmo campo de cor da
   foto. Texto em grafite, que é a única cor permitida sobre o laranja da marca
   (6,20:1). A foto tem um laranja mais queimado que o token, então as bordas
   dela são dissolvidas por máscara — o olho lê como luz, não como emenda. */
/* Seção de lente de contato: fundo branco cheio, como as demais seções claras.
   A foto é a caixa recortada e achatada sobre branco, então ela some no fundo —
   nenhuma borda, nenhuma emenda, o mesmo tratamento dos 43 recortes da vitrine. */

.lc{margin-top:var(--e-6)}
.lc::after{content:"";display:block;clear:both}
.lc__midia{margin:0 0 var(--e-5)}
/* o laranja da foto é mais queimado que o token da marca. Tentei dissolver a
   borda por máscara e a emenda continuou à vista; borda arredondada resolve
   melhor — vira uma foto apoiada no painel, não um fundo que não fecha. */
.lc__midia img{display:block;width:100%;height:auto}
.lc .titulo-secao{margin-top:var(--e-2)}
.lc .lead{margin-top:var(--e-4)}
.lc p + p{margin-top:var(--e-4);color:var(--cinza-texto)}
.lc .btn{margin-top:var(--e-5)}
@media (min-width:760px){
  .lc__midia{float:right;width:min(50%,500px);margin:0 0 var(--e-5) var(--e-6)}
}
@media (min-width:1200px){
  .lc__midia{width:min(48%,580px);margin-left:var(--e-7)}
}

/* --- 16b. Painel de armações (D41) --------------------------------------- */
.painel{position:fixed;inset:0;z-index:var(--z-painel);display:flex;justify-content:center}
.painel__fundo{position:absolute;inset:0;background:rgba(20,18,16,.5);
  opacity:0;transition:opacity var(--t-medio)}
.painel__caixa{position:relative;display:flex;flex-direction:column;width:100%;
  max-width:1240px;background:var(--osso);overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(12px);opacity:0;
  transition:transform var(--t-medio),opacity var(--t-medio)}
.painel.is-aberto .painel__fundo{opacity:1}
.painel.is-aberto .painel__caixa{transform:none;opacity:1}

.painel__topo{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;
  justify-content:space-between;gap:var(--e-5);
  padding:var(--e-6) var(--gutter) var(--e-5);background:var(--osso);
  border-bottom:var(--borda)}
.painel__conta{margin-top:var(--e-2);font-size:var(--t-pequeno);color:var(--cinza-texto)}
.painel__fechar{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;color:var(--grafite);background:var(--branco);border:var(--borda);
  transition:background var(--t-rapido)}
.painel__fechar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.painel__fechar:hover{background:var(--cinza-fundo)}

.painel__grade{display:grid;gap:var(--e-6) var(--grid-gap);grid-template-columns:repeat(2,minmax(0,1fr));
  padding:var(--e-6) var(--gutter)}
.painel__grade .card__foto{aspect-ratio:4/3}
/* na esteira o texto é cortado em 3 linhas para os cards ficarem iguais;
   aqui a grade é estática, então a descrição aparece inteira */
.painel__grade .card__desc{-webkit-line-clamp:none;display:block;overflow:visible;min-height:0}

.painel__base{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--e-4);
  padding:var(--e-5) var(--gutter);background:var(--branco);border-top:var(--borda)}
.painel__base p{font-size:var(--t-pequeno);color:var(--cinza-texto);max-width:40ch}

@media (min-width:600px){ .painel__grade{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:900px){
  .painel{padding:var(--e-6)}
  .painel__caixa{border-radius:var(--r-grande);max-height:100%}
  .painel__grade{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:var(--e-7)}
}
@media (prefers-reduced-motion:reduce){
  .painel__caixa{transition:none;transform:none}
  .painel__fundo{transition:none}
}

/* --- 16c. Ampliação de foto (D43) ---------------------------------------- */
.zoom{position:fixed;inset:0;z-index:var(--z-zoom);display:grid;place-items:center;
  padding:var(--e-5)}
.zoom__fundo{position:absolute;inset:0;background:var(--branco);
  opacity:0;transition:opacity var(--t-medio);cursor:zoom-out}
.zoom__caixa{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:var(--e-4);width:min(600px,100%);
  transform:scale(.96);opacity:0;
  transition:transform var(--t-medio),opacity var(--t-medio)}
.zoom.is-aberto .zoom__fundo{opacity:1}
.zoom.is-aberto .zoom__caixa{transform:none;opacity:1}
/* O recorte nasce em 540px porque o arquivo oficial tem 622. Exibir a 820,
   como estava, era esticar 1,5x e a imagem ficava borrada — sem detalhe novo,
   só interpolação. Agora ela para no tamanho real: continua 2,3x o card e fica
   nítida. Fundo branco, igual ao dos recortes, para não distorcer a cor. */
.zoom__caixa img{width:auto;max-width:min(100%,540px);max-height:64vh;height:auto;
  object-fit:contain}
.zoom__legenda{text-align:center;color:var(--grafite)}
.zoom__legenda h3{font-size:var(--t-h3)}
.zoom__legenda p{margin-top:var(--e-2);font-size:var(--t-pequeno);color:var(--cinza-texto);max-width:52ch}
.zoom__fechar{position:absolute;top:calc(var(--e-6) * -1);right:0;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--osso);border:var(--borda);color:var(--grafite);
  transition:background var(--t-rapido)}
.zoom__fechar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.zoom__fechar:hover{background:var(--cinza-fundo)}
@media (prefers-reduced-motion:reduce){
  .zoom__caixa,.zoom__fundo{transition:none}
  .zoom__caixa{transform:none}
}

/* --- 17. WhatsApp flutuante --------------------------------------------- */
.whats{
  position:fixed;right:20px;bottom:20px;z-index:var(--z-whats);
  width:54px;height:54px;border-radius:var(--r-pill);background:var(--verde-whats);
  display:grid;place-items:center;box-shadow:var(--sombra-flutuante);
  transition:transform var(--t-rapido);
}
.whats:hover{transform:scale(1.05)}
.whats svg{width:28px;height:28px;fill:var(--branco)}

/* --- 17b. Aviso de cookies (D59) ----------------------------------------
   No celular ocupa a largura toda embaixo, e o botão do WhatsApp sobe a altura
   exata dele (--altura-aviso, medida no JS) para não ficar escondido.
   No computador vira um cartão no canto esquerdo, longe do botão verde.
   Fica acima do botão flutuante e abaixo da gaveta, do painel e do zoom. */
.aviso-cookies{position:fixed;left:var(--e-3);right:var(--e-3);bottom:var(--e-3);
  z-index:calc(var(--z-whats) + 1);display:flex;flex-direction:column;gap:var(--e-3);
  padding:var(--e-4);background:var(--branco);border:var(--borda);
  border-radius:var(--r-grande);box-shadow:var(--sombra-flutuante)}
.aviso-cookies p{font-size:var(--t-pequeno);line-height:1.45;color:var(--grafite);hyphens:manual}
.aviso-cookies__acoes{display:flex;gap:var(--e-2)}
.aviso-cookies__acoes .btn{flex:1;min-height:44px;padding:10px 16px}
@media (max-width:759px){
  .tem-aviso-cookies .whats{bottom:calc(var(--altura-aviso, 0px) + var(--e-3) * 2)}
}
@media (min-width:760px){
  .aviso-cookies{left:var(--e-5);right:auto;bottom:var(--e-5);max-width:400px}
}

/* --- 18. Placeholder de imagem ainda não produzida ---------------------- */
.ph{position:relative;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--cinza-fundo),var(--laranja-claro))}
.ph__marca{width:min(38%,150px);opacity:.28}
.ph__cod{position:absolute;left:var(--e-3);bottom:var(--e-3)}

/* --- 19. Entrada ao rolar (design.md §11) ------------------------------- */
.revelar{opacity:0;transform:translateY(16px)}
.revelar.is-visivel{opacity:1;transform:none;
  transition:opacity var(--t-lento) var(--ease),transform var(--t-lento) var(--ease)}

/* ==========================================================================
   BREAKPOINTS — specs/plano.md §2.1 e §2.2
   ========================================================================== */

@media (min-width:600px){
  /* tablet em pé: estas seções caíam em uma coluna e sobrava metade da largura */
  .grade-produtos .card{flex-basis:280px}
  .duplo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grade-unidades{grid-template-columns:repeat(2,minmax(0,1fr))}
  .depoimentos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat,.cat__img{width:140px}.cat__img{height:140px}
}

@media (min-width:760px){
  /* os blocos de duas colunas já cabem antes do desktop */
  .destaque{grid-template-columns:1.15fr 1fr;padding:var(--e-5)}
  .destaque__texto{padding:var(--e-7)}
  .rayban__conteudo{grid-template-columns:1fr 1.15fr;gap:var(--e-7);align-items:start}
  .crizal__grade{grid-template-columns:1.15fr 1fr;gap:var(--e-7)}
  .crizal__topo{grid-template-columns:1fr 1fr;align-items:end;gap:var(--e-7)}
}

@media (min-width:900px){
  .grade-produtos{padding-inline:0;margin-inline:0;scroll-padding-inline:0}
  .menu-btn{display:none}
  .header__acao{display:inline-flex}
  /* Centrar na página deixava o vão da esquerda maior que o da direita, porque o
     logo é bem mais estreito que o botão. A navegação ocupa todo o espaço livre
     entre os dois e centra o conteúdo dentro dele: vãos iguais dos dois lados. */
  .nav{flex:1;display:flex;justify-content:center}
  .header__logo img{height:38px}

  .hero{padding-top:var(--offset-topo)}
  .hero__grade{grid-template-columns:45% 55%;gap:0;align-items:stretch;
    min-height:clamp(560px,calc(88vh - var(--offset-topo)),900px)}
  /* o texto vem primeiro no desktop; no HTML a mídia vem antes por causa do celular */
  .hero__texto{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;
    padding-block:var(--e-9);padding-right:var(--e-8)}
  /* a imagem é retrato: se ficar no fluxo, a altura intrínseca estica a linha do grid
     e o hero passa dos 88vh. Fora do fluxo, quem manda na altura é o clamp do grid. */
  .hero__midia{grid-column:2;grid-row:1;aspect-ratio:auto;max-height:none;height:100%;
    position:relative;
    margin-right:calc((100vw - min(100vw,var(--container))) / -2 - var(--gutter))}
  .hero__midia img{position:absolute;inset:0}

  .grade-unidades{grid-template-columns:repeat(3,minmax(0,1fr))}
  .crizal__topo{grid-template-columns:1fr 1fr;align-items:end;gap:var(--e-8)}
  .crizal__grade{grid-template-columns:1.2fr 1fr;gap:var(--e-8)}
  .crizal__logo{height:40px}
  .rayban__banner img{aspect-ratio:2/1;object-fit:cover;object-position:50% 50%}
  .rayban__conteudo{grid-template-columns:1fr 1.15fr;gap:var(--e-8);align-items:start}
  .destaque{grid-template-columns:1.2fr 1fr;padding:var(--e-6)}
  .destaque__texto{padding:var(--e-6) var(--e-6) var(--e-6) var(--e-8)}
  .m-varilux{height:26px}
  .m-crizal{height:38px}
  .m-transitions{height:38px}
  .m-eyezen{height:46px}
  .m-kodak{height:33px}
  .m-hoya{height:24px}
  .depoimentos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rodape__grade{grid-template-columns:1.6fr 1fr 1fr}
  .cat,.cat__img{width:160px}.cat__img{height:160px}

  .bloco-marca{grid-template-columns:1fr 1fr;align-items:stretch;min-height:640px}
  .bloco-marca__midia{aspect-ratio:auto;height:100%}
  .bloco-marca__texto{display:flex;flex-direction:column;justify-content:center;
    padding:var(--e-9) clamp(var(--e-7),6vw,var(--e-10))}
  .bloco-marca--inverso .bloco-marca__midia{order:2}

  .whats{right:24px;bottom:24px;width:60px;height:60px}
  .whats svg{width:30px;height:30px}
}

@media (min-width:1200px){
  .grade-produtos{gap:var(--e-6)}
  .grade-produtos .card{flex-basis:320px}   /* D21: sem moldura, o quadro inteiro é do produto */
  /* 6 chips de 160px + 5 intervalos de 32px = 1120px; só cabe na linha de 1184px */
  .categorias__lista{justify-content:center;overflow-x:visible;
    padding-inline:0;margin-inline:0;gap:var(--e-6)}
}

@media (max-width:420px){
  /* com 28px de respiro os dois botões do hero somam 368px numa linha de 350 e
     quebravam, somando 64px de altura. Com 20px cabem lado a lado. */
  .btn{padding-inline:20px}
  .hero__acoes{gap:var(--e-2)}
}

/* Celular: o botão flutuante não pode cobrir o botão do último card */
@media (max-width:899px){
  /* hero mais compacto no celular: a foto ocupa 60vh e o texto vinha com 80px de
     respiro acima e 144px até a próxima seção. */
  .hero__grade{gap:var(--e-5)}
  .hero__texto{padding-block:var(--e-5) var(--e-6)}
  .hero__acoes{margin-top:var(--e-5)}
  .vitrine{padding-bottom:calc(var(--secao-y) + 40px)}
  .hero__grade{grid-template-areas:"midia" "texto"}
  .hero__midia{grid-area:midia;margin-inline:calc(var(--gutter) * -1);width:auto}
  .hero__texto{grid-area:texto}

  /* palavras longas (multifocal, antirreflexo) não podem estourar a coluna */
  p,.card__desc,.unidade__dado{hyphens:auto}
}