/* =========================================================
   CYCLO — Estilos globais
   Identidade: o ciclo sol → painel → bomba → água.
   Gradiente da marca: azul → verde → amarelo.
   ========================================================= */
/* Saira (fonte variável, pesos 100 a 900), hospedada no próprio site. Licença OFL. */
@font-face {
  font-family: 'Saira';
  src: url("../fonts/saira.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --azul: #1E6BFF;
  --azul-fundo: #0A2A66;
  --azul-noite: #071B44;
  --verde: #12B886;
  --verde-escuro: #0B8F68;
  --amarelo: #FFC21A;
  --amarelo-escuro: #E9A800;
  /* Céu: valores do dia. O js/ceu.js troca estes conforme a hora */
  --fundo: #F4F7FB;
  --superficie: #FFFFFF;
  --img-fundo: #EAF0F7;
  --ceu: #FFFFFF;
  --vidro: rgba(255,255,255,.82);
  --titulo: #0A2A66;
  --brilho1: #CFE0FF;
  --brilho2: #C6F1E2;
  --brilho3: #FFEBB0;
  --tinta: #0E1B2E;
  --tinta-suave: #5B6B80;
  --linha: #E3EAF3;
  --gelo: var(--fundo);
  --logo-cor: #00005F;
  --branco: #FFFFFF;
  --vermelho: #E5484D;

  --grad: linear-gradient(110deg, #1E6BFF 0%, #12B886 55%, #FFC21A 100%);
  --grad-suave: linear-gradient(110deg, rgba(30,107,255,.10), rgba(18,184,134,.10) 55%, rgba(255,194,26,.14));
  --grad-noite: linear-gradient(135deg, #071B44 0%, #0A2A66 45%, #0B5A57 100%);

  --raio-p: 3px;
  --raio: 5px;
  --raio-g: 8px;
  /* chanfro: cantos cortados na diagonal, como as pontas do Y da logo */
  --chanfro: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --chanfro-p: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  --largura: 1240px;
  --fonte-titulo: 'Saira', system-ui, sans-serif;
  --fonte: 'Saira', system-ui, sans-serif;
  --suave: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--gelo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.container { max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Linha de energia: gradiente que corre continuamente */
.linha-energia {
  height: 2px;
  background: linear-gradient(90deg, #1E6BFF, #12B886, #FFC21A, #12B886, #1E6BFF);
  background-size: 300% 100%;
  animation: correr 9s linear infinite;
}
@keyframes correr { to { background-position: 300% 0; } }

/* ---------- Faixa superior ---------- */
.topbar { background: var(--azul-noite); color: #B8C7DD; font-size: 13px; }
.topbar .container {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; min-height: 34px;
}
.topbar-links { display: flex; gap: 22px; }
.topbar-links a:hover { color: #fff; }

/* ---------- Logo CYCLO ----------
   Loop de 6 s: uma luz percorre o traço do L ao O (o ciclo) e,
   ao chegar no fim, o triângulo verde dá um pulso. */
.logo-cyclo { display: block; height: 30px; width: auto; color: var(--logo-cor); overflow: visible; }
html[data-escuro="sim"] { --logo-cor: #EEF3FB; }
.lc-l {
  opacity: 0;
  animation: letra-surge 7s var(--suave) infinite;
}
.lc-l:nth-of-type(1) { animation-delay: 0s; }
.lc-l:nth-of-type(2) { animation-delay: .12s; }
.lc-l:nth-of-type(3) { animation-delay: .24s; }
.lc-l:nth-of-type(4) { animation-delay: .36s; }
.lc-l:nth-of-type(5) { animation-delay: .6s; }
@keyframes letra-surge {
  0%       { opacity: 0; transform: translateY(70px); filter: blur(6px); }
  9%       { opacity: 1; transform: none; filter: blur(0); }
  86%      { opacity: 1; transform: none; filter: blur(0); }
  94%, 100% { opacity: 0; transform: translateY(-40px); filter: blur(4px); }
}
.lc-varre { animation: varre-gradiente 7s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes varre-gradiente {
  0%, 22%  { transform: translateX(0); }
  52%, 100% { transform: translateX(2400px); }
}
.lc-gota {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: pulso-gota 7s var(--suave) infinite;
}
@keyframes pulso-gota {
  0%, 50%  { transform: none; }
  57%      { transform: translateY(-18%) scale(1.3); }
  66%, 100% { transform: none; }
}
.rodape .logo-cyclo { color: #fff; height: 34px; }
.rodape-endereco { font-style: normal; margin-top: 18px; }
.rodape-endereco a, .rodape-insta { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; transition: color .2s; }
.rodape-endereco a:hover, .rodape-insta:hover { color: var(--amarelo); }
.rodape-endereco svg, .rodape-insta svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--amarelo); }
.rodape-insta { margin-top: 12px; align-items: center; }
.rodape-insta svg { margin-top: 0; }

/* ---------- Céu: selo da hora e simulador ---------- */
.ceu { position: relative; margin-left: auto; }
.topbar-links { margin-left: 22px; }
.selo-ceu {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #DCE6F3;
  padding: 3px 11px 3px 8px; border-radius: var(--raio-p); border: 1px solid rgba(255,255,255,.16);
  transition: background .2s, border-color .2s;
}
.selo-ceu:hover, .selo-ceu[aria-expanded="true"] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.selo-ceu-ic { width: 16px; height: 16px; color: var(--amarelo); }
html[data-fase="noite"] .selo-ceu-ic { color: #C9D6FF; }
.painel-ceu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120;
  width: min(320px, calc(100vw - 32px)); padding: 18px;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: 0 24px 60px -20px rgba(7,27,68,.45);
  font-size: 13.5px; line-height: 1.45;
  animation: subir .3s var(--suave);
}
.painel-ceu strong { color: var(--titulo); }
.painel-ceu label { display: block; font-weight: 700; margin: 14px 0 8px; color: var(--titulo); }
.painel-ceu input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(90deg, #07142E 0%, #07142E 19%, #FFC3A0 27%, #CFE0FF 36%, #CFE0FF 64%, #FF9A6B 73%, #6B4BC4 78%, #07142E 84%, #07142E 100%);
}
.painel-ceu input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--amarelo); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(7,27,68,.4);
}
.painel-ceu input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--amarelo); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(7,27,68,.4);
}
.painel-ceu-marcas { display: flex; justify-content: space-between; font-size: 11px; color: var(--tinta-suave); margin-top: 6px; }
.voltar-agora { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--verde-escuro); text-decoration: underline; }

/* À noite e no crepúsculo, os verdes de texto ficam mais claros para manter a leitura */
html[data-escuro="sim"] { --verde-escuro: #3DDBA6; --tinta-sombra: rgba(0,0,0,.5); }
html[data-escuro="sim"] .card-produto:hover,
html[data-escuro="sim"] .card-categoria:hover { box-shadow: 0 0 0 1.5px rgba(18,184,134,.6), 0 24px 50px -24px rgba(0,0,0,.7); }
html[data-escuro="sim"] .busca button, html[data-escuro="sim"] .btn-comprar { box-shadow: 0 0 20px -6px rgba(255,194,26,.55); }

/* O anel do ciclo acompanha as cores do céu */
.ciclo circle[fill="#fff"] { fill: var(--superficie); stroke: var(--linha); }
.ciclo circle[stroke="#D7E2F0"], .ciclo circle[stroke="#E6EDF6"] { stroke: var(--linha); }

/* Troca suave quando a hora é simulada */
html.ceu-mudando body, html.ceu-mudando .hero, html.ceu-mudando .header,
html.ceu-mudando .como-funciona, html.ceu-mudando .frete-box {
  transition: background-color .4s, color .4s;
}

/* ---------- Cabeçalho (vidro) ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--vidro);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
}
.header-main { display: flex; align-items: center; gap: 28px; min-height: 72px; }

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-marca { width: 38px; height: 38px; }
.logo-anel { transform-origin: 24px 24px; animation: girar 14s linear infinite; }
.logo-texto {
  font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600;
  letter-spacing: -.6px; color: var(--titulo); line-height: 1;
}
.logo-texto b {
  font-weight: 600; background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.busca {
  flex: 1; min-width: 0; max-width: 600px; display: flex; align-items: center; gap: 10px;
  background: var(--gelo); border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: 5px 5px 5px 18px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.busca:focus-within { background: var(--superficie); border-color: var(--azul); box-shadow: 0 0 0 4px rgba(30,107,255,.12); }
.busca > svg { width: 18px; height: 18px; color: var(--tinta-suave); flex-shrink: 0; }
.busca input { flex: 1; width: 100%; border: none; outline: none; background: transparent; font-size: 15px; min-width: 0; padding: 7px 0; }
.busca button {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--amarelo); color: var(--azul-noite); font-weight: 700; font-size: 14px;
  padding: 9px 20px; border-radius: var(--raio-p); transition: background .2s;
}
.busca button:hover { background: var(--amarelo-escuro); }

.header-acoes { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.acao {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--raio-p); font-size: 14px; font-weight: 600;
  color: var(--tinta); transition: background .2s;
}
.acao:hover { background: var(--gelo); }
.acao svg { width: 24px; height: 24px; color: var(--titulo); }
.acao-cesto { position: relative; }
.cesto-badge {
  position: absolute; top: 3px; left: 26px;
  background: var(--amarelo); color: var(--azul-noite);
  font-size: 11px; font-weight: 700;
  min-width: 19px; height: 19px; border-radius: 10px;
  display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--superficie);
}
.cesto-badge.pulou { animation: pular .5s var(--suave); }
@keyframes pular { 40% { transform: scale(1.45); } }

/* ---------- Barra de categorias ---------- */
.nav-categorias { border-top: 1px solid var(--linha); }
.nav-categorias > .container > ul { display: flex; list-style: none; justify-content: space-between; }
.nav-item { position: relative; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; color: var(--tinta);
  font-weight: 600; font-size: 14.5px; white-space: nowrap;
  transition: color .2s;
}
.nav-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: var(--grad); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--suave);
}
.nav-item:hover .nav-link::after, .nav-item:focus-within .nav-link::after { transform: scaleX(1); }
.nav-link svg.ic { width: 19px; height: 19px; color: var(--verde); }
.nav-link .seta { width: 11px; height: 11px; opacity: .55; transition: transform .25s; }
.nav-item:hover .seta { transform: rotate(180deg); }
.nav-link.destaque { color: var(--titulo); }
.nav-link.destaque svg.ic { color: var(--amarelo-escuro); }

.dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 270px; list-style: none; padding: 8px;
  background: var(--superficie);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: 0 24px 60px -20px rgba(10,42,102,.35);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top left;
  transition: opacity .2s, transform .25s var(--suave), visibility .2s; z-index: 60;
}
.dropdown.colunas { columns: 2; min-width: 470px; column-gap: 4px; }
/* ponte invisível: o menu não fecha no caminho do mouse até as opções */
.dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
/* fecha com um pequeno atraso, para não sumir se o mouse escapar por um instante */
.nav-item .dropdown { transition: opacity .2s .12s, transform .25s .12s var(--suave), visibility 0s .32s; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { transition: opacity .2s, transform .25s var(--suave), visibility 0s; }
.nav-item:nth-last-child(-n+2) .dropdown { left: auto; right: 0; transform-origin: top right; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown li { break-inside: avoid; }
.dropdown a {
  display: block; padding: 9px 12px; border-radius: var(--raio-p);
  font-size: 14px; color: var(--tinta); transition: background .15s, padding .2s;
}
.dropdown a:hover { background: var(--grad-suave); padding-left: 16px; }
.dropdown .ver-todos { font-weight: 700; color: var(--verde-escuro); }

/* ---------- Botões ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--raio-p);
  font-weight: 700; font-size: 15px; transition: transform .2s var(--suave), box-shadow .3s, background-position .5s;
}
/* Todo botão clicável é amarelo; o brilho que atravessa é o toque futurista */
.btn-grad, .btn-sol, .btn-verde {
  overflow: hidden; isolation: isolate;
  color: var(--azul-noite); background: var(--amarelo);
  box-shadow: 0 10px 24px -12px rgba(233,168,0,.8);
}
.btn-grad::after, .btn-sol::after, .btn-verde::after, .btn-comprar::after, .busca button::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-20deg); transition: left .6s var(--suave);
}
.btn-grad:hover::after, .btn-sol:hover::after, .btn-verde:hover::after,
.btn-comprar:hover::after, .busca button:hover::after { left: 120%; }
.btn-grad:hover, .btn-sol:hover, .btn-verde:hover {
  background: #FFCB3D; transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(233,168,0,.9);
}
.btn-linha { color: var(--titulo); border: 1.5px solid var(--amarelo); background: rgba(255,194,26,.08); }
.btn-linha:hover { background: var(--amarelo); }

.link-grad {
  font-weight: 700; font-size: 15px; white-space: nowrap; color: var(--verde-escuro);
  border-bottom: 1.5px solid rgba(18,184,134,.35); padding-bottom: 2px; transition: border-color .2s;
}
.link-grad:hover { border-color: var(--verde); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--ceu); }
.hero-foto {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("../img/hero-solar.webp");
  background-image: image-set(url("../img/hero-solar.avif") type("image/avif"), url("../img/hero-solar.webp") type("image/webp"));
  background-size: cover; background-position: 60% 45%;
  opacity: .34; filter: saturate(.85) contrast(1.05);
  animation: aproximar 24s ease-out both;
}
/* penumbra: o fundo do céu cobre a foto do lado do texto e escurece as bordas */
.hero-foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ceu) 18%, color-mix(in srgb, var(--ceu) 55%, transparent) 55%, color-mix(in srgb, var(--ceu) 25%, transparent) 100%),
    linear-gradient(180deg, transparent 55%, var(--ceu) 100%);
}
html[data-escuro="sim"] .hero-foto { opacity: .5; }
@keyframes aproximar { from { transform: scale(1.08); } }
.hero-brilho { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
html[data-escuro="sim"] .hero-brilho { mix-blend-mode: screen; }
.hero-brilho i {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6;
  animation: flutuar 18s ease-in-out infinite alternate;
}
.hero-brilho i:nth-child(1) { width: 460px; height: 460px; background: var(--brilho1); left: -140px; top: -120px; }
.hero-brilho i:nth-child(2) { width: 380px; height: 380px; background: var(--brilho2); right: 6%; bottom: -160px; animation-delay: -6s; }
.hero-brilho i:nth-child(3) { width: 300px; height: 300px; background: var(--brilho3); right: 18%; top: -80px; animation-delay: -12s; }
@keyframes flutuar { to { transform: translate(40px, 30px) scale(1.08); } }

.hero-grade {
  position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
  align-items: center; gap: 48px; padding-top: 56px; padding-bottom: 64px;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--verde-escuro);
  background: rgba(18,184,134,.08); border: 1px solid rgba(18,184,134,.22);
  padding: 7px 14px; border-radius: var(--raio-p); margin-bottom: 26px;
}
.pulso { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.pulso::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--verde);
  animation: pulsar 1.8s ease-out infinite;
}
@keyframes pulsar { to { transform: scale(3); opacity: 0; } }

.hero h1 {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(36px, 5vw, 66px); line-height: 1.02; letter-spacing: -1.5px;
  color: var(--titulo); max-width: 16ch; text-wrap: balance;
}
.hero-sub { font-size: 18px; color: var(--tinta-suave); margin: 22px 0 32px; max-width: 46ch; }
.hero-botoes { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-fatos {
  list-style: none; display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--linha);
  font-size: 14px; color: var(--tinta-suave);
}
.hero-fatos strong {
  display: block; font-family: var(--fonte-titulo); font-weight: 200; font-size: 34px;
  color: var(--titulo); letter-spacing: -1px; line-height: 1.1;
}

/* Entrada orquestrada do hero (uma vez, ao carregar) */
.hero-texto > * { animation: subir .9s var(--suave) both; }
.hero-texto > :nth-child(2) { animation-delay: .08s; }
.hero-texto > :nth-child(3) { animation-delay: .16s; }
.hero-texto > :nth-child(4) { animation-delay: .24s; }
.hero-texto > :nth-child(5) { animation-delay: .32s; }
.ciclo { animation: aparecer 1.2s .2s var(--suave) both; }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes aparecer { from { opacity: 0; transform: scale(.92) rotate(-8deg); } }

/* O ciclo */
.ciclo { position: relative; width: 100%; max-width: 500px; margin-left: auto; aspect-ratio: 1; }
.ciclo svg { width: 100%; height: 100%; overflow: visible; }
.ciclo-fluxo { stroke-dasharray: 60 22; animation: fluir 3s linear infinite; }
@keyframes fluir { to { stroke-dashoffset: -82; } }
.ciclo-girar-lento { transform-origin: 260px 260px; animation: girar 60s linear infinite; }
.ciclo-halo { transform-origin: 260px 260px; animation: respirar 4s ease-in-out infinite; }
@keyframes respirar { 50% { transform: scale(1.18); opacity: .7; } }
@keyframes girar { to { transform: rotate(360deg); } }
.ciclo-ponto { filter: drop-shadow(0 0 6px rgba(255,194,26,.9)); }
.ciclo-num { font-family: var(--fonte-titulo); font-weight: 600; font-size: 22px; fill: var(--titulo); }
.ciclo-leg { font-family: var(--fonte); font-size: 12.5px; fill: var(--tinta-suave); }
.ciclo-rotulos text { font-family: var(--fonte); font-size: 13px; font-weight: 700; fill: var(--tinta-suave); paint-order: stroke; stroke: var(--superficie); stroke-width: 6px; stroke-linejoin: round; }

/* ---------- Ciclo em 3D ---------- */
.ciclo--3d > svg { display: none; }
.ciclo-3d, .ciclo-rotulos-3d {
  position: absolute; left: -16%; top: -12%; width: 132%; height: 124%;
}
.ciclo-3d { display: block; pointer-events: none; }
.ciclo-rotulos-3d { pointer-events: none; }
.ciclo-rotulos-3d span {
  position: absolute; left: 0; top: 0; transform-origin: 50% 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; color: var(--titulo);
  padding: 4px 10px; white-space: nowrap;
  background: var(--vidro); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  clip-path: var(--chanfro-p); will-change: transform, opacity;
}
.ciclo-centro-3d {
  position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 10px; white-space: nowrap;
  text-align: center; color: var(--titulo); pointer-events: none;
}
.ciclo-centro-3d strong { display: block; font-weight: 200; font-size: 30px; line-height: 1; letter-spacing: -.5px; text-transform: none; }
.ciclo-centro-3d small { display: block; margin-top: 0; font-size: 10.5px; font-weight: 600; letter-spacing: 2px; color: var(--tinta-suave); }

/* ---------- Seções ---------- */
.secao { padding: 80px 0; }
.secao-topo { margin-bottom: 36px; max-width: 780px; }
.secao-topo h2, .frete-texto h2, .faixa-cta h2 { text-wrap: balance; }
.secao-topo-linha { display: flex; justify-content: space-between; align-items: end; gap: 16px; max-width: none; }
.secao-topo h2, .faixa-cta h2, .frete-texto h2 {
  font-family: var(--fonte-titulo); font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -1px; line-height: 1.08; color: var(--titulo);
}
.secao-topo h2 strong, .faixa-cta h2 strong, .frete-texto h2 strong { font-weight: 700; }
/* detalhe dos títulos: um traço do gradiente com um ponto na ponta */
.secao-topo h2::before, .frete-texto h2::before, .faixa-cta h2::before {
  content: ''; display: block; width: 44px; height: 2px; margin-bottom: 18px;
  background: var(--grad);
  -webkit-mask: linear-gradient(90deg, #000 0 34px, transparent 34px 38px, #000 38px);
          mask: linear-gradient(90deg, #000 0 34px, transparent 34px 38px, #000 38px);
}
.secao-topo p { color: var(--tinta-suave); margin-top: 8px; font-size: 16.5px; }

/* Revelar ao rolar */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--suave), transform .8s var(--suave); }
.revelar.visivel { opacity: 1; transform: none; }

/* ---------- Como funciona ---------- */
.como-funciona { background: var(--superficie); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.passos {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.passos::before {
  content: ''; position: absolute; top: 21px; left: 22px; right: 22px; height: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s .2s var(--suave);
}
.como-funciona.visivel .passos::before { transform: scaleX(1); }
.passos li { position: relative; }
.passo-num {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 16px; color: var(--titulo);
  background: var(--superficie); border: 2px solid var(--linha); margin-bottom: 20px;
  transition: border-color .4s, background .4s, color .4s;
}
.como-funciona.visivel .passo-num { border-color: var(--superficie); background: var(--grad); color: #fff; }
.como-funciona.visivel li:nth-child(1) .passo-num { transition-delay: .3s; }
.como-funciona.visivel li:nth-child(2) .passo-num { transition-delay: .7s; }
.como-funciona.visivel li:nth-child(3) .passo-num { transition-delay: 1.1s; }
.como-funciona.visivel li:nth-child(4) .passo-num { transition-delay: 1.5s; }
.passos h3 { font-size: 17px; font-weight: 700; color: var(--titulo); margin-bottom: 6px; }
.passos p { color: var(--tinta-suave); font-size: 15px; max-width: 30ch; }

/* ---------- Categorias ---------- */
.grade-categorias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.card-categoria {
  position: relative; display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: 8px 8px 20px; overflow: hidden;
  transition: transform .35s var(--suave), box-shadow .35s, border-color .35s;
}
.card-categoria:hover {
  transform: translateY(-6px); border-color: transparent;
  box-shadow: 0 0 0 1.5px rgba(18,184,134,.5), 0 24px 50px -24px rgba(10,42,102,.4);
}
.card-categoria-foto {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--raio); overflow: hidden;
  background: var(--grad-noite);
}
.card-categoria-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7,27,68,.45));
}
.card-categoria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--suave); }
.card-categoria:hover .card-categoria-foto img { transform: scale(1.07); }
.card-categoria-ic {
  position: relative; z-index: 1;
  width: 46px; height: 46px; border-radius: var(--raio); margin: -23px 0 12px 12px;
  display: grid; place-items: center; color: #fff;
  background: var(--grad); box-shadow: 0 8px 18px -8px rgba(18,184,134,.8);
  border: 3px solid var(--superficie);
}
.card-categoria-ic svg { width: 24px; height: 24px; }
.card-categoria h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; letter-spacing: -.4px; color: var(--titulo); padding: 0 12px; }
.card-categoria p { font-size: 13.5px; color: var(--tinta-suave); margin: 6px 0 14px; padding: 0 12px; }
.card-categoria .qtd { margin-top: auto; padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--verde-escuro); }

/* ---------- Produtos ---------- */
.secao-produtos { padding-top: 0; }
.grade-produtos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card-produto {
  position: relative; display: flex; flex-direction: column;
  background: var(--superficie); border-radius: var(--raio-g); padding: 8px;
  border: 1px solid var(--linha);
  transition: transform .35s var(--suave), box-shadow .35s, border-color .35s;
}
.card-produto:hover {
  transform: translateY(-4px); border-color: transparent;
  box-shadow: 0 0 0 1.5px rgba(30,107,255,.35), 0 24px 50px -24px rgba(10,42,102,.4);
}
.produto-img {
  position: relative; aspect-ratio: 1; border-radius: var(--raio); overflow: hidden;
  background: radial-gradient(circle at 30% 20%, var(--superficie), var(--img-fundo));
  display: grid; place-items: center; color: #9FB2CA;
}
.produto-img svg { width: 38%; }
.produto-img img, .item-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--suave);
}
.card-produto:hover .produto-img img { transform: scale(1.06); }
.selo {
  position: absolute; z-index: 1; top: 12px; left: 12px;
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: var(--raio-p);
  background: rgba(255,255,255,.9); color: #0A2A66;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.selo.oferta { background: var(--vermelho); color: #fff; }
.selo.solar { background: var(--amarelo); color: var(--azul-noite); }
.desconto {
  position: absolute; z-index: 1; top: 12px; right: 12px;
  background: var(--verde); color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: var(--raio-p);
}
.produto-info { padding: 14px 10px 6px; display: flex; flex-direction: column; flex: 1; }
.produto-grupo { font-size: 12.5px; color: var(--verde-escuro); font-weight: 700; }
.produto-nome {
  font-size: 15px; font-weight: 600; margin: 4px 0 12px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px;
}
.produto-precos { margin-top: auto; }
.preco-antigo { font-size: 13px; color: var(--tinta-suave); text-decoration: line-through; }
.preco {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 21px;
  color: var(--titulo); letter-spacing: -.6px; line-height: 1.3;
}
.parcelas { font-size: 12.5px; color: var(--tinta-suave); }
.pix { font-size: 13px; color: var(--verde-escuro); font-weight: 700; margin-top: 2px; }
.btn-comprar {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 14px; width: 100%; padding: 12px; border-radius: var(--raio-p);
  background: var(--amarelo); color: var(--azul-noite); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .25s, color .25s;
}
.btn-comprar:hover { background: #FFCB3D; }
.btn-comprar.adicionado { background: var(--verde); color: #fff; }
.btn-comprar svg { width: 18px; height: 18px; }
.btn-comprar.adicionado { animation: confirmar .45s var(--suave); }
@keyframes confirmar { 40% { transform: scale(.96); } }

/* Faixa de preço de mercado */
.mercado { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--linha); }
.mercado-topo {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--tinta-suave); margin-bottom: 7px;
}
.mercado-topo span:last-child { font-weight: 700; color: var(--tinta); white-space: nowrap; }
.mercado-barra { position: relative; height: 4px; border-radius: 4px; background: var(--grad); opacity: .9; }
.mercado-barra i {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid #0A2A66;
  transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(10,42,102,.3);
}
.card-produto.visivel .mercado-barra i, .card-produto:not(.revelar) .mercado-barra i { animation: deslizar 1s .4s var(--suave) both; }
@keyframes deslizar { from { left: 0; } }

/* ---------- Faixa de especialista ---------- */
.faixa-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px;
  background: var(--grad-noite); border-radius: var(--raio-g); padding: 52px 56px;
}
.faixa-cta-brilho {
  position: absolute; z-index: -1; width: 520px; height: 520px; right: -120px; top: -260px;
  border-radius: 50%; background: conic-gradient(from 0deg, #1E6BFF, #12B886, #FFC21A, #1E6BFF);
  filter: blur(80px); opacity: .45; animation: girar 20s linear infinite;
}
.faixa-cta h2 { color: #fff; }
.faixa-cta p { color: #BFD0E6; margin-top: 10px; max-width: 54ch; }

/* ---------- Frete ---------- */
.frete-box {
  display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-g);
}
.frete-texto { padding: 52px 56px; }
.frete-texto p { color: var(--tinta-suave); margin: 10px 0 26px; max-width: 46ch; }
.form-cep { display: flex; gap: 10px; flex-wrap: wrap; }
.form-cep input {
  flex: 1; min-width: 150px; padding: 13px 20px;
  background: var(--gelo); border: 1px solid var(--linha); border-radius: var(--raio-p);
  font-size: 16px; letter-spacing: 1px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-cep input:focus { background: var(--superficie); border-color: var(--azul); box-shadow: 0 0 0 4px rgba(30,107,255,.12); }
.link-cep { font-size: 13px; color: var(--tinta-suave); text-decoration: underline; display: inline-block; margin-top: 12px; }
.frete-resultado { margin-top: 18px; }
.frete-mapa { background: var(--grad-noite); display: grid; place-items: center; padding: 36px; }
.frete-mapa svg { width: 100%; max-width: 320px; }
.rotas path { stroke-dasharray: 4 7; animation: fluir-rota 1.6s linear infinite; }
@keyframes fluir-rota { to { stroke-dashoffset: -22; } }
.origem-pulso { transform-origin: 92px 96px; animation: onda 2.2s ease-out infinite; }
@keyframes onda { to { transform: scale(4); opacity: 0; } }

.frete-local { font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.frete-local svg { width: 16px; height: 16px; color: var(--verde); }
.opcao-frete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--linha); border-radius: var(--raio);
  font-size: 14px; margin-top: 8px; background: var(--superficie);
  animation: subir .45s var(--suave) both;
}
.opcao-frete + .opcao-frete { animation-delay: .08s; }
.opcao-frete strong { display: block; }
.opcao-frete span { color: var(--tinta-suave); font-size: 12.5px; }
.opcao-frete .valor { font-weight: 700; color: var(--titulo); white-space: nowrap; font-size: 14px; }
.opcao-frete .gratis { color: var(--verde-escuro); }
label.opcao-frete { cursor: pointer; transition: border-color .2s, background .2s; }
label.opcao-frete:has(input:checked) { border-color: var(--verde); background: rgba(18,184,134,.06); }
label.opcao-frete input { accent-color: var(--verde); }
.opcao-frete .opcao-esq { display: flex; align-items: center; gap: 10px; }
.erro-msg { color: var(--vermelho); font-size: 14px; margin-top: 10px; }
.carregando { color: var(--tinta-suave); font-size: 14px; margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.carregando::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--linha); border-top-color: var(--verde); animation: girar .8s linear infinite;
}
.aviso-frete { font-size: 12px; color: var(--tinta-suave); margin-top: 10px; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--azul-noite); color: #9FB2CC; margin-top: 40px; }
.rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 60px 0 44px; }
.rodape .logo-texto { color: #fff; font-size: 22px; }
.rodape p { font-size: 14px; margin-top: 16px; max-width: 36ch; }
.rodape h4 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.rodape ul { list-style: none; display: grid; gap: 9px; font-size: 14px; }
.rodape ul a { transition: color .2s; }
.rodape ul a:hover { color: var(--amarelo); }
.rodape-pag { font-size: 13px; margin-top: 18px; }
.pagamentos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.pagamentos span {
  border: 1px solid rgba(255,255,255,.14); padding: 5px 10px; border-radius: var(--raio-p);
  font-size: 12px; color: #DCE6F3; font-weight: 600;
}
.rodape-base {
  border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; font-size: 13px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- Cesto (gaveta) ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(7,27,68,.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: all .3s; z-index: 90;
}
.overlay.aberto { opacity: 1; visibility: visible; }
.cesto {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  background: var(--superficie); z-index: 100; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .45s var(--suave);
  box-shadow: -30px 0 60px -30px rgba(7,27,68,.35);
}
.cesto.aberto { transform: none; }
.cesto::before { content: ''; height: 3px; background: var(--grad); flex-shrink: 0; }
.cesto-topo { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--linha); }
.cesto-topo h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 20px; letter-spacing: -.5px; color: var(--titulo); }
.cesto-topo h3 small { font-family: var(--fonte); font-size: 14px; color: var(--tinta-suave); font-weight: 500; letter-spacing: 0; }
.btn-fechar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: background .2s, transform .3s; }
.btn-fechar:hover { background: var(--gelo); transform: rotate(90deg); }
.btn-fechar svg { width: 20px; height: 20px; }
.cesto-corpo { flex: 1; overflow-y: auto; padding: 4px 24px; }
.cesto-vazio { text-align: center; padding: 64px 10px; color: var(--tinta-suave); }
.cesto-vazio svg { width: 60px; height: 60px; margin: 0 auto 16px; color: #C9D6E8; }
.cesto-vazio strong { display: block; color: var(--tinta); font-size: 17px; margin-bottom: 4px; }
.item-cesto { display: grid; grid-template-columns: 68px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.item-img {
  position: relative; overflow: hidden; width: 68px; height: 68px; border-radius: var(--raio);
  background: radial-gradient(circle at 30% 20%, var(--superficie), var(--img-fundo));
  display: grid; place-items: center; color: #9FB2CA;
}
.item-img svg { width: 30px; }
.item-nome { font-size: 14px; font-weight: 600; line-height: 1.35; }
.item-linha { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.qtd-controle { display: inline-flex; align-items: center; background: var(--gelo); border-radius: var(--raio-p); padding: 2px; }
.qtd-controle button { width: 28px; height: 28px; border-radius: 50%; font-size: 16px; color: var(--titulo); transition: background .2s; }
.qtd-controle button:hover { background: var(--superficie); }
.qtd-controle span { min-width: 28px; text-align: center; font-size: 14px; font-weight: 700; }
.item-preco { font-weight: 700; color: var(--titulo); }
.btn-remover { font-size: 12px; color: var(--tinta-suave); text-decoration: underline; margin-top: 6px; }
.btn-remover:hover { color: var(--vermelho); }
.cesto-entrega { padding: 18px 0; }
.cesto-entrega h4 { font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.cesto-entrega h4 svg { width: 18px; height: 18px; color: var(--verde); }
.cesto-entrega .form-cep input { padding: 10px 16px; font-size: 15px; }
.cesto-entrega .form-cep .btn { padding: 10px 20px; }
.cesto-rodape { border-top: 1px solid var(--linha); padding: 18px 24px 22px; background: var(--gelo); }
.resumo-linha { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; color: var(--tinta-suave); }
.resumo-total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 4px; font-weight: 700; font-size: 16px; }
.resumo-total .valor { font-family: var(--fonte-titulo); font-weight: 600; font-size: 24px; letter-spacing: -.6px; color: var(--titulo); }
.resumo-pix { text-align: right; font-size: 13px; color: var(--verde-escuro); font-weight: 700; margin-bottom: 14px; }
.cesto-rodape .btn { width: 100%; }
.btn-texto { color: var(--tinta-suave); font-size: 14px; width: 100%; padding: 10px; text-decoration: underline; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 110;
  transform: translate(-50%, 120px); visibility: hidden;
  background: rgba(7,27,68,.92); color: #fff; padding: 13px 20px; border-radius: var(--raio-p);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 14px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 20px 40px -16px rgba(7,27,68,.6);
  transition: transform .45s var(--suave), visibility .45s; max-width: calc(100% - 32px);
}
.toast.visivel { transform: translate(-50%, 0); visibility: visible; }
.toast svg { width: 18px; height: 18px; color: var(--amarelo); flex-shrink: 0; }

/* ---------- WhatsApp ---------- */
.whats {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px -8px rgba(37,211,102,.7); transition: transform .3s var(--suave);
}
.whats:hover { transform: scale(1.08) rotate(-6deg); }
.whats svg { width: 28px; height: 28px; }

/* Cards que entram ao rolar mantêm as transições de hover */
.card-categoria.revelar, .card-produto.revelar {
  transition: opacity .7s var(--suave), transform .5s var(--suave), box-shadow .35s, border-color .35s;
}

/* ---------- Identidade futurista ---------- */
/* Tudo em caixa alta, com um pouco mais de espaço entre as letras para manter a leitura */
body { font-weight: 400; letter-spacing: .5px; text-transform: uppercase; }
input, input::placeholder, button, select, textarea { text-transform: uppercase; letter-spacing: .5px; }
.hero h1, .secao-topo h2, .frete-texto h2, .faixa-cta h2 { letter-spacing: -.5px; }
.hero h1 .h-leve { letter-spacing: 0; }
.hero-sub, .secao-topo p, .passos p, .frete-texto p, .faixa-cta p, .rodape p, .card-categoria p { letter-spacing: .8px; font-size: .94em; line-height: 1.65; }
.btn, .btn-comprar, .busca button { clip-path: var(--chanfro); border-radius: 0; letter-spacing: .3px; }
.btn { font-weight: 600; }
.btn-linha { box-shadow: inset 0 0 0 1.5px var(--amarelo); border: none; }
.card-categoria-ic, .selo, .desconto, .cesto-badge, .hero-tag, .selo-ceu { clip-path: var(--chanfro-p); border-radius: 0; }
.hero-tag { border: none; box-shadow: inset 0 0 0 1px rgba(18,184,134,.3); }
.passo-num { border-radius: 0; clip-path: var(--chanfro-p); font-weight: 300; font-size: 18px; border: none; box-shadow: inset 0 0 0 1.5px var(--linha); }
.como-funciona.visivel .passo-num { box-shadow: none; }
.passos h3 { font-weight: 600; font-size: 18px; }
.card-categoria h3 { font-weight: 600; font-size: 19px; letter-spacing: -.3px; }
.produto-nome { font-weight: 500; }
.preco { font-weight: 700; letter-spacing: -.4px; }
.produto-grupo, .card-categoria .qtd { font-weight: 600; letter-spacing: .2px; }
.nav-link { font-weight: 500; letter-spacing: .2px; }
.hero h1 .h-forte { display: block; font-weight: 700; }
.hero h1 .h-leve { display: block; font-weight: 200; letter-spacing: -1px; }
.hero-sub { font-weight: 300; font-size: 19px; }
.ciclo-num { font-weight: 300; font-size: 26px; }
.resumo-total .valor, .cesto-topo h3 { font-weight: 600; }

/* grade técnica fina no fundo do banner, sumindo nas bordas */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .55;
  -webkit-mask: radial-gradient(ellipse 70% 70% at 70% 45%, #000 0%, transparent 75%);
          mask: radial-gradient(ellipse 70% 70% at 70% 45%, #000 0%, transparent 75%);
}
.hero-grade { z-index: 1; }

/* cantos cortados nos cartões e nas fotos */
.card-produto, .card-categoria, .frete-box, .faixa-cta { border-radius: var(--raio-g); }
.produto-img, .card-categoria-foto { clip-path: var(--chanfro); border-radius: 0; }

/* ---------- Catálogo real: fotos de produto em fundo branco ---------- */
.produto-img, .detalhe-foto { background: #fff; }
.produto-img img, .item-img img, .detalhe-foto img { object-fit: contain; padding: 8%; background: #fff; }
.card-categoria-foto { background: #fff; }
.card-categoria-foto img { object-fit: contain; padding: 10%; }
.card-categoria-foto::after { background: linear-gradient(180deg, transparent 55%, rgba(7,27,68,.12)); }
.preco-consulta { font-size: 18px; font-weight: 600; letter-spacing: .5px; color: var(--titulo); }
.consultar-whats { display: inline-block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--verde-escuro); border-bottom: 1px solid rgba(18,184,134,.35); }
.consultar-whats:hover { border-color: var(--verde); }
.dropdown a small { float: right; margin-left: 12px; font-size: 11px; font-weight: 600; color: var(--tinta-suave); }
.lista-vazia { grid-column: 1 / -1; padding: 48px 20px; text-align: center; color: var(--tinta-suave); border: 1px dashed var(--linha); border-radius: var(--raio-g); }
.lista-vazia strong { display: block; color: var(--titulo); font-size: 18px; margin-bottom: 6px; }
.lista-vazia a { color: var(--verde-escuro); text-decoration: underline; }
.resumo-aviso { font-size: 12.5px; line-height: 1.5; color: var(--tinta-suave); margin: 8px 0 14px; text-transform: none; letter-spacing: .2px; }

/* ---------- Página de categorias ---------- */
.catalogo-topo { position: relative; overflow: hidden; background: var(--ceu); border-bottom: 1px solid var(--linha); padding: 36px 0 30px; }
.catalogo-topo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .5;
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%); mask: linear-gradient(90deg, transparent, #000 60%);
}
.catalogo-topo .container { position: relative; z-index: 1; }
.catalogo-topo h1 { font-weight: 300; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.5px; line-height: 1.05; color: var(--titulo); margin-top: 14px; }
.catalogo-topo h1 strong { font-weight: 700; }
.catalogo-topo p { color: var(--tinta-suave); margin-top: 10px; max-width: 70ch; font-size: .94em; letter-spacing: .8px; }
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1px; color: var(--tinta-suave); }
.migalhas a:hover { color: var(--verde-escuro); }
.migalhas span { color: var(--titulo); font-weight: 600; }
.migalhas i { font-style: normal; opacity: .5; }
.catalogo-corpo { padding-top: 24px; padding-bottom: 72px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .8px;
  color: var(--titulo); background: var(--superficie); border: 1px solid var(--linha);
  clip-path: var(--chanfro-p); transition: background .2s, color .2s, border-color .2s;
}
.chip small { font-size: 11px; font-weight: 500; color: var(--tinta-suave); }
.chip:hover { border-color: var(--verde); }
.chip.no-grupo { border-color: rgba(18,184,134,.5); }
.chip.ativo { background: var(--amarelo); border-color: var(--amarelo); color: var(--azul-noite); }
.chip.ativo small { color: var(--azul-noite); }
.chip-leve { padding: 6px 12px; font-size: 11.5px; font-weight: 500; }
.catalogo-barra { display: flex; align-items: center; gap: 16px; margin: 10px 0 24px; flex-wrap: wrap; }
.contagem { font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--titulo); }
.chips-aplicacao { flex: 1; padding: 0; min-width: 0; }
.ordenar { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1px; color: var(--tinta-suave); margin-left: auto; }
.ordenar select {
  font: inherit; text-transform: uppercase; color: var(--titulo); font-weight: 600;
  background: var(--superficie); border: 1px solid var(--linha); padding: 8px 10px; border-radius: var(--raio-p);
}

/* ---------- Página de produto ---------- */
.pagina-produto { padding: 24px 0 0; }
.produto-detalhe { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; margin-top: 20px; align-items: start; }
.detalhe-foto {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; color: #9FB2CA;
  border: 1px solid var(--linha); clip-path: var(--chanfro); overflow: hidden;
}
.detalhe-foto > svg { width: 30%; }
.detalhe-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.detalhe-info h1 { font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.5px; color: var(--titulo); margin: 10px 0 14px; }
.detalhe-desc { color: var(--tinta-suave); font-size: 15px; line-height: 1.7; letter-spacing: .6px; max-width: 52ch; }
.detalhe-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.detalhe-compra { margin-top: 22px; padding: 22px; background: var(--superficie); border: 1px solid var(--linha); clip-path: var(--chanfro); }
.detalhe-compra .preco-consulta { font-size: 26px; }
.detalhe-acoes { display: flex; gap: 10px; margin-top: 16px; }
.detalhe-acoes .btn-comprar { margin-top: 0; flex: 1; padding: 14px; font-size: 14px; }
.qtd-campo { display: flex; align-items: stretch; border: 1px solid var(--linha); background: var(--fundo); }
.qtd-campo button { width: 40px; font-size: 18px; color: var(--titulo); }
.qtd-campo input { width: 48px; text-align: center; border: none; background: transparent; font-weight: 700; color: var(--titulo); -moz-appearance: textfield; }
.qtd-campo input::-webkit-outer-spin-button, .qtd-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.detalhe-whats { width: 100%; margin-top: 10px; }
.detalhe-garantias { list-style: none; margin-top: 22px; display: grid; gap: 14px; }
.detalhe-garantias li { font-size: 13px; color: var(--tinta-suave); padding-left: 16px; border-left: 2px solid; border-image: var(--grad) 1; line-height: 1.5; letter-spacing: .5px; }
.detalhe-garantias strong { display: block; color: var(--titulo); font-size: 13.5px; }
.detalhe-envio { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--linha); background: var(--superficie); clip-path: var(--chanfro); }
.detalhe-envio h2 { font-size: 13px; letter-spacing: 1.5px; color: var(--titulo); margin-bottom: 12px; }
.detalhe-envio dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.detalhe-envio dt { font-size: 10.5px; letter-spacing: 1px; color: var(--tinta-suave); }
.detalhe-envio dd { font-size: 14px; font-weight: 700; color: var(--titulo); margin-top: 2px; }
.detalhe-envio p { font-size: 11px; color: var(--tinta-suave); margin-top: 12px; letter-spacing: .4px; }
@media (max-width: 380px) { .detalhe-envio dl { grid-template-columns: 1fr; } }
.relacionados { padding-top: 64px; }

/* ---------- Finalizar compra ---------- */
.checkout-corpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; padding-top: 36px; padding-bottom: 80px; align-items: start; }
.checkout-form fieldset { border: 1px solid var(--linha); background: var(--superficie); padding: 22px 22px 18px; margin-bottom: 16px; clip-path: var(--chanfro); }
.checkout-form legend { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: 1px; color: var(--titulo); padding: 0; float: left; width: 100%; margin-bottom: 16px; }
.checkout-form legend span { width: 26px; height: 26px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 13px; clip-path: var(--chanfro-p); }
.campos { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.campo { display: grid; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 1px; color: var(--tinta-suave); }
.campo.largo { grid-column: 1 / -1; }
.campo input {
  font-size: 15px; letter-spacing: .5px; padding: 12px 14px; color: var(--tinta);
  background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio-p); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.campo input:focus { background: var(--superficie); border-color: var(--azul); box-shadow: 0 0 0 4px rgba(30,107,255,.12); }
.campo input[name="email"] { text-transform: none; }
.cep-info { margin: -4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--verde-escuro); min-height: 1em; }
.so-retirada .campo:has(input[name="rua"]), .so-retirada .campo:has(input[name="numero"]),
.so-retirada .campo:has(input[name="complemento"]), .so-retirada .campo:has(input[name="bairro"]) { display: none; }
.opcoes-entrega { clear: both; margin-top: 14px; }
.pagamento-info { clear: both; font-size: 13.5px; line-height: 1.6; color: var(--tinta-suave); letter-spacing: .5px; }
.pagamento-info strong { color: var(--titulo); }
.parcelas-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.parcelas-lista li { font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--titulo); padding: 6px 10px; border: 1px solid var(--linha); background: var(--fundo); }
.btn-pagar { width: 100%; padding: 17px; font-size: 16px; }
.btn-pagar:disabled { opacity: .7; cursor: progress; }
.aviso-seguro { margin-top: 10px; font-size: 12px; text-align: center; color: var(--tinta-suave); letter-spacing: .5px; }
.checkout-resumo { position: sticky; top: 150px; padding: 22px; background: var(--superficie); border: 1px solid var(--linha); clip-path: var(--chanfro); }
.checkout-resumo h2 { font-weight: 600; font-size: 20px; color: var(--titulo); margin-bottom: 14px; }
.resumo-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 13px; }
.resumo-item .item-img { width: 48px; height: 48px; }
.resumo-item-nome { color: var(--titulo); font-weight: 600; line-height: 1.35; }
.checkout-resumo .resumo-linha:first-of-type { margin-top: 14px; }

/* ---------- Página institucional ---------- */
.inst-corpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding-top: 40px; padding-bottom: 80px; }
.inst-indice { position: sticky; top: 150px; align-self: start; display: grid; gap: 4px; }
.inst-indice a { padding: 8px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 1px; color: var(--tinta-suave); border-left: 2px solid var(--linha); }
.inst-indice a:hover { color: var(--titulo); border-color: var(--verde); }
.inst-texto section { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--linha); scroll-margin-top: 150px; }
.inst-texto section:last-child { border-bottom: 0; }
.inst-texto h2 { font-weight: 600; font-size: 24px; color: var(--titulo); margin-bottom: 14px; }
.inst-texto p { color: var(--tinta-suave); line-height: 1.75; letter-spacing: .6px; font-size: 14.5px; max-width: 70ch; margin-bottom: 10px; }
.inst-texto p strong, .inst-texto li strong { color: var(--titulo); }
.inst-texto h3 { font-weight: 600; font-size: 15px; letter-spacing: 1.2px; color: var(--titulo); margin: 22px 0 8px; }
.inst-texto ul { margin: 0 0 12px; padding-left: 0; list-style: none; max-width: 70ch; }
.inst-texto li { position: relative; padding-left: 18px; color: var(--tinta-suave); line-height: 1.7; letter-spacing: .6px; font-size: 14.5px; margin-bottom: 6px; }
.inst-texto li::before { content: ''; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; background: var(--grad); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.inst-texto p a, .inst-texto li a { color: var(--titulo); text-decoration: underline; text-underline-offset: 3px; }
.rodape-base a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.inst-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.inst-cartao { display: grid; gap: 4px; padding: 18px; background: var(--superficie); border: 1px solid var(--linha); clip-path: var(--chanfro); transition: border-color .2s; }
.inst-cartao:hover { border-color: var(--verde); }
.inst-cartao strong { font-size: 12px; letter-spacing: 1.2px; color: var(--verde-escuro); }
.inst-cartao span { font-size: 14px; color: var(--titulo); font-weight: 600; }
.pagina-404 { padding: 64px 0; }

/* ---------- Responsivo ---------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav-link { padding: 13px 9px; font-size: 13.5px; gap: 6px; }
  .nav-link::after { left: 9px; right: 9px; }
  .nav-link svg.ic { width: 17px; height: 17px; }
}
@media (max-width: 1100px) {
  .grade-categorias { grid-template-columns: repeat(3, 1fr); }
  .grade-produtos { grid-template-columns: repeat(3, 1fr); }
  .acao-texto { display: none; }
}
@media (max-width: 900px) {
  .topbar-links { display: none; }
  .topbar .container { justify-content: space-between; }
  .header-main { flex-wrap: wrap; gap: 12px; min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  .busca { order: 3; flex-basis: 100%; max-width: none; }
  .busca button { padding: 9px 16px; }

  .nav-categorias { position: relative; }
  .nav-categorias > .container { padding: 0; }
  .nav-categorias > .container > ul {
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; padding: 0 8px; justify-content: flex-start;
  }
  .nav-categorias > .container > ul::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; scroll-snap-align: start; }
  .nav-link { padding: 11px 12px; font-size: 14px; }
  .nav-link .seta, .nav-item .dropdown { display: none; }
  .nav-link::after { bottom: 4px; left: 12px; right: 12px; }
  .nav-categorias::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
    background: linear-gradient(to right, transparent, var(--superficie)); pointer-events: none;
  }

  .hero-grade { grid-template-columns: 1fr; gap: 12px; padding-top: 28px; padding-bottom: 48px; }
  .ciclo { order: -1; max-width: 330px; margin: 0 auto; }
  .hero-foto { background-position: 70% 30%; opacity: .28; }
  .ciclo { max-width: 420px; width: 100%; aspect-ratio: 6 / 5; margin-bottom: 8px; }
  .ciclo-3d, .ciclo-rotulos-3d { left: 0; width: 100%; top: -4%; height: 104%; }
  .ciclo-centro-3d { bottom: 0; }
  .ciclo-rotulos-3d span { font-size: 10px; letter-spacing: 1.2px; padding: 3px 8px; }
  .hero-foto::after { background: linear-gradient(180deg, color-mix(in srgb, var(--ceu) 30%, transparent) 0%, color-mix(in srgb, var(--ceu) 70%, transparent) 45%, var(--ceu) 70%); }
  .hero h1 { max-width: none; }
  .passos { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .passos::before { display: none; }
  .faixa-cta { grid-template-columns: 1fr; padding: 36px 28px; }
  .frete-box { grid-template-columns: 1fr; }
  .frete-mapa { display: none; }
  .produto-detalhe { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .inst-corpo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .checkout-corpo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .checkout-resumo { position: static; order: -1; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .inst-indice { position: static; display: flex; overflow-x: auto; }
  .inst-indice a { white-space: nowrap; border-left: 0; border-bottom: 2px solid var(--linha); }
  .inst-cartoes { grid-template-columns: minmax(0, 1fr); }
  .detalhe-foto { max-height: 70vw; aspect-ratio: auto; height: 70vw; }
  .ordenar { margin-left: 0; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .topbar-aviso { display: none; }
  .ceu { margin: 0 auto; }
  .painel-ceu { right: 50%; transform: translateX(50%); }
  .secao { padding: 56px 0; }
  .grade-categorias, .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mercado-topo span:last-child { white-space: normal; }
  .card-categoria p { display: none; }
  .card-categoria h3 { font-size: 15px; }
  .card-produto { padding: 6px; border-radius: var(--raio-g); }
  .produto-img { border-radius: var(--raio); }
  .produto-info { padding: 12px 6px 4px; }
  .produto-nome { font-size: 13.5px; min-height: 38px; }
  .preco { font-size: 17px; }
  .btn-comprar { font-size: 13px; padding: 11px 8px; white-space: nowrap; }
  .btn-comprar svg { display: none; }
  .mercado-topo { flex-direction: column; gap: 1px; }
  .hero-sub { font-size: 16px; }
  .hero-fatos { gap: 20px; margin-top: 32px; }
  .hero-fatos strong { font-size: 19px; }
  .passos { grid-template-columns: 1fr; }
  .secao-topo-linha { flex-direction: column; align-items: start; }
  .frete-texto { padding: 32px 22px; }
  .rodape-grade { grid-template-columns: 1fr; gap: 28px; }
  .logo-cyclo { height: 24px; }
}

/* Telas estreitas com mouse (janela pequena, tablet com mouse): abre ao passar o mouse */
@media (max-width: 900px) and (hover: hover) and (pointer: fine) {
  .nav-link .seta { display: block; }
  .nav-item .dropdown {
    display: block; position: fixed; top: var(--dd-top, 100%); left: var(--dd-left, 8px); right: auto;
    columns: 1; min-width: 240px; max-width: calc(100vw - 16px);
    max-height: 60vh; overflow-y: auto;
  }
  .nav-item .dropdown.colunas { columns: 2; min-width: 0; width: min(440px, calc(100vw - 16px)); }
  .nav-item:nth-last-child(-n+2) .dropdown { left: var(--dd-left, 8px); right: auto; }
}

@media (max-width: 380px) {
  .btn-comprar { white-space: normal; font-size: 12px; line-height: 1.2; }
  .preco { font-size: 16px; }
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .lc-l { animation: none !important; opacity: 1; transform: none; filter: none; }
  .lc-varre { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .revelar { opacity: 1; transform: none; }
}