/* =====================================================================
   MiLaser — TEMA (redesign 2026-10-03, "atacado limpo tipo Coconut")
   Carregado por último em todas as páginas. Redefine os tokens e o visual
   dos componentes comuns; as páginas herdam pelo mesmo nome de token.
   Mundo: fundo branco + faixas areia, tinta navy, verde de economia,
   âmbar da faísca, Archivo (títulos/rótulos) + Figtree (texto).
   ===================================================================== */
:root {
  --navy: #0B2A4A;      /* tinta da marca: títulos, botões, rodapé */
  --navy-800: #16406B;
  --ink: #15202B;       /* texto corrido */
  --slate: #4A5764;
  --slate-600: #66717C;
  --areia: #F7F3EC;     /* faixas e painéis */
  --areia-2: #EFE8DC;
  --gray-50: #F7F3EC;
  --ice: #EFE9DF;
  --border: #E5DED2;    /* bordas quentes */
  --border-2: #D6CDBE;
  --verde: #1B8A4B;     /* preço, economia, faixa ativa */
  --verde-700: #146B3A;
  --verde-50: #EAF5EE;
  --ambar: #F2A516;     /* faísca: estrelas, traços de destaque */
  /* tokens antigos remapeados (as páginas usam estes nomes) */
  --cyan: var(--verde);
  --cyan-50: var(--verde-50);
  --cyan-700: var(--navy);  /* foco: sempre navy */
  --cyan-800: var(--verde-700);
  --green: #25D366;     /* só WhatsApp */
  --white: #FFFFFF;

  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(60, 45, 20, .06);
  --shadow-md: 0 6px 18px rgba(60, 45, 20, .08);
  --shadow-lg: 0 18px 44px rgba(30, 30, 40, .14);
}

/* ---------- base ---------- */
body { font-family: var(--body); color: var(--ink); background: var(--white); font-size: 16px; }
h1, h2, h3 { font-family: var(--display); color: var(--navy); letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: 36px; font-weight: 800; line-height: 1.04; }
h2 { font-size: 30px; font-weight: 800; line-height: 1.08; }
h3 { font-weight: 700; }
h1 em, h2 em, .contador em { font-style: italic; font-weight: 600; color: inherit; }
.banner-tit em { color: var(--verde); }
#preco h2 em { color: var(--ciano-700); }
@media (min-width: 768px) { h1 { font-size: 48px; } h2 { font-size: 38px; } }
@media (min-width: 1024px) { h1 { font-size: 58px; } h2 { font-size: 44px; } }
::selection { background: var(--verde); color: var(--white); }
html { accent-color: var(--navy); caret-color: var(--navy); scrollbar-color: var(--border-2) var(--areia); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--areia); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 3px solid var(--areia); }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.estrelas, .estrelas svg { color: var(--ambar) !important; fill: var(--ambar); }

/* rótulo pequeno espaçado (usado dentro de componentes, nunca acima de título de seção) */
.rotulo, .card-nome, .menu-link, .btn, .sug-titulo, .aval-quem span {
  font-feature-settings: "ss01";
}

/* ---------- botões: pílulas; primário navy; secundário contornado em caixa alta ---------- */
.btn {
  border-radius: 999px; min-height: 50px; padding: 0 24px; gap: 10px;
  font: 700 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.btn-primario, .btn-navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-primario:hover, .btn-navy:hover { background: var(--navy-800); box-shadow: none; }
.btn-contorno { background: var(--white); color: var(--navy); border: 1.5px solid var(--navy); }
.btn-contorno:hover { background: var(--navy); color: var(--white); }
.btn-whats { background: var(--green); color: #063A1C; border-color: var(--green); }
.btn-whats:hover { background: #3DDC78; box-shadow: none; }
.btn-branco { background: var(--white); color: var(--navy); border: 1.5px solid var(--white); }
.btn-g { min-height: 56px; font-size: 15px; }
.link-btn { color: var(--verde-700); font-weight: 600; }

/* ---------- barra de avisos (gira sozinha; ícone + frase) ---------- */
.avisos { background: var(--areia); border-bottom: 1px solid var(--border); color: var(--navy); }
.avisos-in { min-height: 40px; }
.avisos-lista { list-style: none; margin: 0; padding: 0; display: grid; flex: 1; }
.aviso {
  grid-area: 1 / 1; position: static; inset: auto; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 0; font: 600 14px/1.3 var(--body); opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); pointer-events: none;
}
.aviso.ativo { opacity: 1; transform: none; position: static; pointer-events: auto; }
.aviso.ativo { transition-delay: .18s; }
.aviso.saindo { opacity: 0; transform: translateY(-10px); transition-duration: .25s; transition-delay: 0s; }
.aviso svg { color: var(--verde-700); }
.ponto.ativo::before { background: var(--verde); }
@media (min-width: 768px) {
  .aviso { font: 700 12.5px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
  .avisos-pontos { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .aviso { transition: none; transform: none; } }

/* ---------- cabeçalho ---------- */
.header-main { border-bottom: 1px solid var(--border); }
.header-grid { column-gap: 12px; }
.logo img { width: auto; height: 38px; }
.busca input {
  border-radius: 12px; border: 1.5px solid var(--border-2); background: var(--white); min-height: 50px;
  padding: 0 56px 0 18px; font-size: 16px; color: var(--ink);
}
.busca input::placeholder { color: var(--slate-600); }
.busca input:hover { border-color: #C8B99F; }
.busca input:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(11, 42, 74, .10); }
.busca-btn, .site-header.busca-aberta .busca-btn {
  top: 4px; right: 4px; width: 46px; height: 42px; padding: 0; display: grid; place-items: center;
  border-radius: 9px; background: transparent; color: var(--navy);
}
.busca-btn:hover { background: var(--areia); }
.busca-sugestoes { border-radius: var(--r-md); border-color: var(--border); }
.sug:hover, .sug[aria-selected="true"] { background: var(--areia); }
.sug-preco { color: var(--verde-700); font-weight: 600; }

.acoes { gap: 0; }
.acao { gap: 10px; }
.acao:hover { background: var(--areia); }
.acao-central { display: none; }
.acao-ico { position: relative; display: inline-flex; }
.acao-orc .orc-n { top: -7px; right: -10px; min-width: 19px; height: 19px; padding: 0 5px; font: 700 12px/19px var(--display); }
.orc-n { background: var(--verde); color: var(--white); }
.orc-n[data-zero] { background: var(--areia-2); color: var(--slate); }
.acao-txt { font-family: var(--display) !important; }
.acao-txt small { font-family: var(--body) !important; font-size: 13px !important; color: var(--slate) !important; }
.acao-conta.com-dados .acao-txt span { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) {
  .header-grid { min-height: 104px; column-gap: 36px; }
  .logo img { height: 50px; }
  .busca { max-width: 600px; }
  .busca input { min-height: 54px; }
  .busca-btn, .site-header.busca-aberta .busca-btn { top: 5px; height: 44px; }
  .acoes { gap: 18px; }
  .acao-central { display: inline-flex; }
  .acao { padding: 0 8px; }
  .acao-txt { font: 700 15px/1.15 var(--display) !important; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .acao-central .acao-txt { display: none; } .acoes { gap: 6px; } }

/* menu de categorias: ícone + caixa alta, centralizado no desktop */
.header-nav { border-bottom: 1px solid var(--border); background: var(--white); }
.menu-link { gap: 8px; font: 700 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; border-color: var(--border); }
.menu-link > svg:first-child { color: var(--verde-700); }
.menu-link:hover { border-color: var(--navy); }
.menu-produtos .menu-link[aria-expanded="true"] svg { transform: none; }
.menu-produtos .menu-link[aria-expanded="true"] .menu-chev { transform: rotate(180deg); }
.menu-chev { margin-left: -2px; }
@media (min-width: 1024px) {
  .nav-grid { justify-content: center; }
  .menu { gap: clamp(16px, 3.2vw, 56px); }
  .menu-link { position: relative; min-height: 60px; padding: 0 6px; font: 800 14px/1 var(--display); letter-spacing: .1em; border-radius: 0; }
  .menu-link::after {
    content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--verde); transform: scaleX(0); transition: transform .25s var(--ease-out);
  }
  .menu-link:hover { background: transparent; color: var(--navy); }
  .menu-link:hover::after, .menu-link[aria-expanded="true"]::after, .menu-link[aria-current="page"]::after { transform: scaleX(1); }
  .painel-produtos { border-radius: var(--r-md); min-width: 280px; }
  .painel-produtos a { justify-content: flex-start; gap: 12px; }
  .painel-produtos a strong { flex: 1; font-family: var(--display); }
  .painel-produtos a svg { color: var(--verde-700); }
  .painel-produtos a:hover { background: var(--areia); }
  .painel-produtos .painel-todos { justify-content: space-between; }
}

/* janela "Seus dados" (Entrar ou cadastrar) */
.conta { border: 0; padding: 0; width: min(440px, calc(100vw - 32px)); border-radius: var(--r-lg, 18px); box-shadow: var(--shadow-lg); color: var(--ink); }
.conta::backdrop { background: rgba(11, 42, 74, .45); }
.conta-in { padding: 24px; display: grid; gap: 14px; }
.conta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conta-topo h2 { font-size: 26px; }
.conta-nota { font-size: 15px; color: var(--slate); line-height: 1.5; }
.conta .campo input { width: 100%; }
.conta-ok { display: none; align-items: center; gap: 8px; color: var(--verde-700); font-weight: 600; font-size: 15px; }
.conta.salvo .conta-ok { display: flex; }

/* ---------- seções (ritmo) ---------- */
section { padding: 56px 0; }
@media (min-width: 1024px) { section { padding: 88px 0; } }
.sec-topo { margin-bottom: 24px; align-items: flex-end; }
.sec-topo h2 { max-width: 20ch; }
.apoio { color: var(--slate); font-size: 16px; margin-top: 8px; }
.sec-link { font: 700 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1.5px solid var(--navy); }
.sec-link:hover { color: var(--verde-700); border-color: var(--verde-700); }

/* ---------- 1. banner: vitrine de ponta a ponta ---------- */
/* Cada slide é uma cena: fundo de estúdio, pedestais, peças recortadas (img/banner, gerado por tools/banner-assets.py)
   e fotos de pedidos reais. O texto fica alinhado ao container; a cena vai até a borda direita. */
.banner {
  --borda: max(var(--gutter), calc((100vw - var(--container)) / 2));
  position: relative; padding: 0; overflow: hidden; isolation: isolate; background: var(--areia); border-bottom: 1px solid var(--border);
}
.banner-trilho { display: grid; }
.banner-slide {
  --tinta: var(--navy); --texto: var(--slate); --destaque: var(--verde);
  --fundo-a: #FCFAF6; --fundo-b: #F1E9DD; --chao-a: #E9DECD; --chao-b: #E2D5C1;
  --ped-a: #E3D7C5; --ped-b: #F7F1E7; --ped-c: #D9CBB6; --ped-topo: #FBF8F2;
  --sombra: 11, 42, 74;
  grid-area: 1 / 1; position: relative; display: grid; grid-template-rows: auto auto; opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease-out), visibility 0s linear .7s;
}
.banner-slide.ativo { opacity: 1; visibility: visible; transition: opacity .7s var(--ease-out); z-index: 1; }
.banner-slide.escura {
  --tinta: #fff; --texto: rgba(255, 255, 255, .84); --destaque: #6FD39A;
  --fundo-a: #15406A; --fundo-b: #0B2A4A; --chao-a: #0A2540; --chao-b: #071C33;
  --ped-a: #0F3459; --ped-b: #1D4F80; --ped-c: #0C2C4D; --ped-topo: #2A6198;
  --sombra: 0, 0, 0;
}

/* fundo de estúdio: luz suave atrás da cena + chão */
.cena-fundo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(42% 70% at 74% 34%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--fundo-a), var(--fundo-b));
}
.escura .cena-fundo {
  background:
    radial-gradient(40% 65% at 72% 36%, rgba(111, 211, 154, .16), rgba(111, 211, 154, 0) 70%),
    radial-gradient(30% 40% at 92% 92%, rgba(242, 165, 22, .14), rgba(242, 165, 22, 0) 70%),
    linear-gradient(180deg, var(--fundo-a), var(--fundo-b));
}
.cena-fundo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
  background: linear-gradient(180deg, var(--chao-a), var(--chao-b)); box-shadow: 0 -1px 0 rgba(var(--sombra), .06);
}
/* o círculo aberto da logo, gigante e quase invisível, atrás da cena */
.cena-fundo::before {
  content: ""; position: absolute; right: -8vw; top: 50%; width: min(78vw, 860px); aspect-ratio: 1; translate: 0 -50%;
  border-radius: 50%; border: 2px solid rgba(var(--sombra), .07);
}
.escura .cena-fundo::before { border-color: rgba(255, 255, 255, .08); }

/* texto */
.banner-txt { order: 2; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; padding: 22px var(--gutter) 92px; }
.cena-tit { font: 800 31px/1.02 var(--display); text-transform: uppercase; letter-spacing: -0.012em; color: var(--tinta); margin: 0; max-width: 15ch; text-wrap: balance; }
.cena-tit em { font-style: normal; font-weight: 800; color: var(--destaque); }
.cena-fitas { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 2px 0 0 calc(-1 * var(--borda)); }
.fita {
  display: inline-flex; align-items: center; min-height: 38px; padding: 6px 22px 6px var(--borda); border-radius: 0 999px 999px 0;
  background: var(--navy); color: #fff; font: 800 15px/1.15 var(--display); letter-spacing: .04em; text-transform: uppercase;
}
.fita-2 { padding-left: calc(var(--borda) + 36px); background: var(--verde); }
.escura .fita { background: #fff; color: var(--navy); }
.escura .fita-2 { background: var(--verde); color: #fff; }
.cena-sub { font-size: 16px; line-height: 1.5; color: var(--texto); max-width: 42ch; }
.cena-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.cena-cta { gap: 10px; }
.escura .cena-cta { background: #fff; color: var(--navy); }
.escura .cena-cta:hover { background: var(--areia); }
.banner-prova { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--body); color: var(--tinta); }
.banner-prova .estrelas { display: inline-flex; gap: 1px; }

/* no celular o chão fica embaixo da cena (que vem antes do texto) */
.cena-fundo::after { display: none; }
.cena-palco::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 13%; background: linear-gradient(180deg, var(--chao-a), var(--chao-b)); }
/* palco: a cena mantém 4:3 e cresce até a borda */
.cena-palco { order: 1; position: relative; height: clamp(250px, 72vw, 420px); container-type: size; }
.palco-in {
  position: absolute; bottom: 0; left: 50%; translate: -50% 0;
  width: min(100cqw, 133.33cqh); height: min(100cqh, 75cqw);
}
.pedestal {
  position: absolute; left: var(--x); bottom: 0; width: var(--w); height: var(--a);
  background: linear-gradient(90deg, var(--ped-a) 0%, var(--ped-b) 42%, var(--ped-a) 72%, var(--ped-c) 100%);
  border-radius: 0 0 4px 4px;
}
.pedestal::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(12px, 5.5cqh, 30px); translate: 0 -50%;
  border-radius: 50%; background: linear-gradient(180deg, var(--ped-topo), var(--ped-b)); box-shadow: inset 0 -1px 0 rgba(var(--sombra), .06);
}
.pedestal-frente { z-index: 2; }
.peca {
  position: absolute; left: var(--x); bottom: var(--y); height: var(--h); width: auto; max-width: none;
  rotate: var(--r, 0deg); transform-origin: 50% 100%;
  filter: drop-shadow(0 16px 14px rgba(var(--sombra), .20)) drop-shadow(0 3px 3px rgba(var(--sombra), .14));
}
.peca-frente { z-index: 3; }
.cena-foto {
  position: absolute; left: var(--x); bottom: var(--y); width: var(--w); aspect-ratio: 3 / 4; margin: 0; rotate: var(--r, 0deg);
  border: clamp(4px, 1.1cqw, 8px) solid #fff; border-radius: 8px; background: #fff; overflow: hidden;
  box-shadow: 0 18px 40px rgba(var(--sombra), .22), 0 2px 6px rgba(var(--sombra), .12);
}
.cena-foto img { width: 100%; height: 100%; object-fit: cover; }
@container (max-width: 520px) { .cena-foto figcaption { display: none; } }
.cena-foto figcaption {
  position: absolute; left: 6px; bottom: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94);
  font: 700 clamp(10px, 1.9cqw, 14px)/1.2 var(--display); color: var(--navy); white-space: nowrap;
}
.faisca { position: absolute; left: var(--x); top: var(--t); width: var(--s); height: var(--s); color: var(--ambar); }
.escura .faisca { color: #F7C35A; }
.etiqueta {
  position: absolute; left: var(--x); top: var(--t); z-index: 4; display: grid; gap: 1px; padding: 8px 14px 9px;
  background: #fff; border-radius: 14px; box-shadow: 0 12px 26px rgba(var(--sombra), .16); color: var(--navy);
  font-size: clamp(11px, 2.3cqw, 15px); line-height: 1.15;
}
.etiqueta span { font-weight: 600; color: var(--slate); }
.etiqueta b { font: 800 clamp(16px, 4.2cqw, 30px)/1 var(--display); letter-spacing: -0.02em; }
.etiqueta small { font-size: 1em; color: var(--slate); }
.etiqueta-melhor { background: var(--verde); color: #fff; }
.etiqueta-melhor span, .etiqueta-melhor small { color: rgba(255, 255, 255, .88); }

/* movimento: tudo entra quando a cena fica ativa; as peças flutuam de leve */
.banner-slide.ativo .cena-tit { animation: sobe .8s var(--ease-out) both .05s; }
.banner-slide.ativo .fita { animation: fita-entra .7s var(--ease-out) both .25s; }
.banner-slide.ativo .fita-2 { animation-delay: .38s; }
.banner-slide.ativo .cena-sub { animation: sobe .7s var(--ease-out) both .45s; }
.banner-slide.ativo .cena-acoes { animation: sobe .7s var(--ease-out) both .55s; }
.banner-slide.ativo .pedestal { animation: pedestal-sobe .8s var(--ease-out) both calc(var(--d, 0) * 80ms); }
.banner-slide.ativo .peca {
  animation: peca-entra .95s cubic-bezier(.2, .9, .25, 1.15) both calc(var(--d, 0) * 110ms + 200ms),
             flutua 5.5s ease-in-out calc(var(--d, 0) * 400ms + 1.4s) infinite alternate;
}
.banner-slide.ativo .cena-foto { animation: foto-entra 1s var(--ease-out) both calc(var(--d, 0) * 110ms + 250ms); }
.banner-slide.ativo .etiqueta { animation: etiqueta-entra .7s cubic-bezier(.2, .9, .25, 1.3) both calc(var(--d, 0) * 160ms + 300ms),
                                           flutua 4.8s ease-in-out calc(var(--d, 0) * 300ms + 1.6s) infinite alternate; }
.banner-slide.ativo .faisca { animation: brilha 2.6s ease-in-out calc(var(--d, 0) * 350ms) infinite alternate; }
@keyframes sobe { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes fita-entra { from { translate: -100% 0; } to { translate: 0 0; } }
@keyframes pedestal-sobe { from { opacity: 0; translate: 0 40%; } to { opacity: 1; translate: 0 0; } }
@keyframes peca-entra { from { opacity: 0; translate: 0 46px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes foto-entra { from { opacity: 0; translate: 0 30px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes etiqueta-entra { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes flutua { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes brilha { from { opacity: .35; scale: .7; rotate: 0deg; } to { opacity: 1; scale: 1; rotate: 45deg; } }

/* controle: 01 / 05 + barra de progresso */
.banner-ctrl {
  position: absolute; z-index: 5; left: 50%; bottom: 18px; translate: -50% 0; display: flex; align-items: center; gap: 10px;
  padding: 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 8px 24px rgba(11, 42, 74, .14);
}
.banner-seta { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.banner-seta:hover { background: var(--areia); }
.banner-cont { font: 700 14px/1 var(--display); letter-spacing: .06em; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.banner-cont b { color: var(--navy); }
.banner-pontos { display: inline-flex; gap: 5px; align-items: center; }
.banner-pontos i { position: relative; width: 7px; height: 7px; border-radius: 4px; background: var(--border-2); overflow: hidden; transition: width .35s var(--ease-out); }
.banner-pontos i.ativo { width: 40px; background: var(--areia-2); }
.banner-pontos i.ativo::after { content: ""; position: absolute; inset: 0; background: var(--navy); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

@media (min-width: 900px) {
  .banner-slide { grid-template-columns: minmax(0, 45%) minmax(0, 55%); grid-template-rows: none; min-height: 540px; }
  .banner-txt { order: 0; justify-content: center; padding: 48px 16px 108px var(--borda); gap: 20px; }
  .cena-palco { order: 0; height: auto; }
  .cena-tit { font-size: clamp(38px, 3.7vw, 60px); max-width: 13ch; }
  .fita { font-size: clamp(15px, 1.25vw, 19px); min-height: 44px; }
  .cena-sub { font-size: 17px; }
  .cena-fundo::after { display: block; height: 13%; }
  .cena-palco::before { display: none; }
  .banner-ctrl { left: var(--borda); translate: none; bottom: 28px; }
}
@media (min-width: 1280px) { .banner-slide { min-height: 600px; } }

@media (prefers-reduced-motion: reduce) {
  .banner-slide, .banner-slide.ativo { transition: none; }
  .banner-slide.ativo * { animation: none !important; }
}

/* faixa de benefícios */
.beneficios { padding: 0; border-bottom: 1px solid var(--border); background: var(--white); }
.beneficios-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0; list-style: none; padding: 0; margin: 0 auto; }
.beneficios-lista li { display: flex; align-items: flex-start; gap: 12px; padding: 18px 12px 18px 0; font-size: 14px; color: var(--slate); line-height: 1.35; }
.beneficios-lista li:nth-child(odd) { border-right: 1px solid var(--border); }
.beneficios-lista li:nth-child(even) { padding-left: 14px; }
.beneficios-lista li:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.beneficios-lista svg { flex: none; color: var(--navy); fill: none; stroke: currentColor; stroke-width: 1.6; }
.beneficios-lista b { display: block; font: 700 15px/1.25 var(--display); color: var(--navy); margin-bottom: 2px; }
@media (min-width: 1024px) {
  .beneficios-lista { grid-template-columns: repeat(4, 1fr); }
  .beneficios-lista li, .beneficios-lista li:nth-child(even) { padding: 26px 24px; border-bottom: 0 !important; border-right: 1px solid var(--border); }
  .beneficios-lista li:first-child { padding-left: 0; }
  .beneficios-lista li:last-child { border-right: 0; }
}

/* contador do catálogo */
.contador { padding: 20px 0; background: var(--white); border-bottom: 1px solid var(--border); }
.contador-in { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contador p { font: 500 17px/1.35 var(--display); color: var(--slate); }
.contador p b { font: 800 34px/1 var(--display); color: var(--navy); margin-right: 8px; vertical-align: -4px; letter-spacing: -0.02em; }
@media (min-width: 768px) { .contador-in { flex-direction: row; align-items: center; justify-content: center; gap: 28px; } .contador p { font-size: 19px; } .contador p b { font-size: 44px; } }

/* ---------- categorias: fotos 3:4 com nome em caixa alta e traço ---------- */
.tile { border-radius: var(--r-lg); box-shadow: none; }
.tile::after { height: 60%; background: linear-gradient(to top, rgba(6, 18, 32, .86) 0%, rgba(6, 18, 32, .35) 55%, rgba(6, 18, 32, 0) 100%); }
.tile-nome { font: 800 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.tile-nome::after { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--ambar); margin-top: 10px; }
.tile-qtd { order: 3; margin-top: 8px; font-size: 14px; }
@media (min-width: 1024px) { .tile-nome { font-size: 24px; } }

/* ---------- card de produto (anatomia Coconut) ---------- */
.card { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); }
.card-media { padding: 14px 14px 4px; background: var(--white); border-radius: var(--r-md) var(--r-md) 0 0; }
.card-selo { background: var(--navy); color: var(--white); font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; top: 12px; left: 12px; }
.card-corpo { align-items: center; text-align: center; gap: 8px; padding: 6px 12px 0; }
.card-nome { font: 800 14px/1.25 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); min-height: 2.5em; }
.card-cores { justify-content: center; gap: 5px; min-height: 16px; font-size: 13px; color: var(--slate-600); }
.card-cores b { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.card-cores span { font: 600 12px var(--display); color: var(--slate-600); margin-left: 2px; }
.card-cores-vazio { color: var(--slate-600); }
.card-eco { min-height: 30px; display: flex; align-items: center; justify-content: center; }
.card-eco:not(.card-eco-vazio) { align-self: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: var(--verde-50); border: 1px solid #C9E6D3; color: var(--verde-700); font-size: 15px; }
.card-eco em { font-family: var(--display); font-style: italic; font-weight: 500; }
.card-eco b { font: 800 15px var(--display); }
.card-preco { margin: 2px 0 0; line-height: 1; }
.card-preco strong { font: 800 27px/1 var(--display); color: var(--verde); letter-spacing: -0.02em; white-space: nowrap; }
.card-preco .un { font: 500 14px var(--body); color: var(--slate-600); margin-left: 3px; }
.card-min { font-size: 14px; line-height: 1.35; color: var(--slate); }
.card-min b { color: var(--ink); font-weight: 700; }
.card-faixas { width: 100%; border-top: 0; margin-top: 4px; }
.card-faixas summary {
  justify-content: center !important; gap: 8px !important; min-height: 40px; border: 1px solid var(--border); border-radius: 999px;
  font: 700 12px/1 var(--display) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--navy) !important; padding: 0 14px; white-space: nowrap;
}
@media (max-width: 767px) { .card-faixas summary { letter-spacing: .04em; } }
.card-faixas summary svg { color: var(--slate-600); }
.card-faixas[open] summary { background: var(--areia); }
.card-faixas table { margin-top: 8px; }
.card-faixas tr.ativa td { background: var(--verde-50); color: var(--verde-700); }
.card-acoes { padding: 12px; gap: 8px; }
.card-ver { min-height: 46px; font-size: 13px; padding: 0 10px; }
.card-add { border-radius: 999px; border: 1.5px solid var(--border-2); min-height: 46px; width: 46px; min-width: 46px; }
.card-add:hover { border-color: var(--navy); background: var(--areia); }
.card-add.ok { background: var(--verde); border-color: var(--verde); color: var(--white); }
@media (min-width: 1024px) { .card-nome { font-size: 15px; } .card-preco strong { font-size: 30px; } }

/* carrossel de vitrine: barra de progresso e setas redondas */
.carrossel-barra { background: var(--border); }
.carrossel-barra span { background: var(--navy); }
.seta { border-radius: 50%; border: 1.5px solid var(--border-2); background: var(--white); color: var(--navy); }
.seta:hover:not(:disabled) { border-color: var(--navy); background: var(--areia); }

/* ---------- escadinha (#preco): faixa areia, barra ativa verde ---------- */
.escada, #preco { background: var(--areia); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.esc-card { border-color: var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: none !important; }
.esc-abas { background: var(--areia) !important; border-color: var(--border) !important; border-radius: 999px !important; }
.esc-aba { border-radius: 999px !important; font: 700 13px/1 var(--display) !important; letter-spacing: .08em; text-transform: uppercase; }
.esc-aba[aria-selected="true"] { background: var(--navy) !important; }
.esc-cada { font-family: var(--display) !important; font-weight: 800 !important; color: var(--verde) !important; }
.esc-comp { color: var(--verde-700) !important; font-weight: 600 !important; }
.degrau-barra { background: var(--ciano-50) !important; }
.degrau-barra::after { background: linear-gradient(180deg, var(--ciano), #00A9D9) !important; }
.degrau[aria-pressed="true"] .degrau-preco { color: var(--white) !important; }
.degrau-preco { font-family: var(--display) !important; font-weight: 700 !important; }
.degrau-qtd { font-family: var(--display) !important; font-weight: 800 !important; }

/* ---------- 100 nomes ---------- */
.nomes-txt h2 { font-size: 40px; }
@media (min-width: 1024px) { .nomes-txt h2 { font-size: 60px; } }
.extras div { border-color: var(--border); }
.extras dd { color: var(--verde-700); font-weight: 700; }
.exemplo { background: var(--areia); border: 1px solid var(--border); border-radius: var(--r-md); }
.exemplo-nota { color: var(--verde-700) !important; font-weight: 600; }
.nomes-foto img, .quem-foto img { border-radius: var(--r-lg); }

/* ---------- quem grava ---------- */
.quem-nao { background: var(--areia); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--navy); }

/* ---------- como o pedido acontece: linha do tempo com número grande vazado ---------- */
.pedido { background: var(--white); border-color: var(--border); }
.passos li::before {
  width: auto; height: auto; background: none; color: var(--navy); border-radius: 0;
  font: 800 44px/1 var(--display); letter-spacing: -0.03em; -webkit-text-stroke: 0; content: counter(passo, decimal-leading-zero);
}
.passos li { padding-left: 64px; }
.passos li::after { left: 26px; top: 50px; background: var(--border); }
.passos h3 { font: 800 18px/1.25 var(--display); color: var(--navy); }
@media (min-width: 768px) {
  .passos li { padding: 64px 0 0; }
  .passos li::before { top: 0; }
  .passos li::after { left: 72px; top: 22px; height: 2px; background: var(--border); }
}
.pedido-pag { border-color: var(--border); }

/* ---------- avaliações: faixa areia, nota grande + cards brancos com aspas ---------- */
.avaliacoes { background: var(--areia); color: var(--ink); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.avaliacoes h2 { color: var(--navy); }
.aval-num { color: var(--navy); font-family: var(--display); font-weight: 800; }
.aval-sub { color: var(--slate); }
.avaliacoes .btn-branco { border: 1.5px solid var(--navy); }
.avaliacoes .btn-branco:hover { background: var(--navy); color: var(--white); }
.aval-lista { gap: 16px; }
.aval-card { background: var(--white); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; font-size: 16px; line-height: 1.55; position: relative; }
.aval-quem strong { color: var(--navy); }

/* ---------- FAQ ---------- */
.faq-lista details { border-color: var(--border); }
.faq-lista summary { font-family: var(--display); font-weight: 700; color: var(--navy); }
.faq-lista summary:hover { color: var(--verde-700); }

/* ---------- CTA final (no rodapé): navy com foto real ---------- */
.cta-final { background: var(--navy); border-top: 0; padding: 0; color: #D3DFEA; overflow: hidden; }
.cta-final .cta-wrap { display: grid; align-items: center; }
.cta-final .cta-in { padding: 56px 0 48px; max-width: none; align-items: flex-start; text-align: left; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.cta-final h2 { color: var(--white); max-width: 14ch; font-size: 34px; }
.cta-final h2 em { color: #6FD39A; }
.cta-final p { max-width: 46ch; color: #D3DFEA; }
.cta-final .cta-linha { color: #9FB3C6; }
.cta-foto { margin: 0 calc(var(--gutter) * -1); }
.cta-foto img { width: 100%; height: 260px; object-fit: cover; object-position: center 78%; display: block; }
@media (min-width: 900px) {
  .cta-final .cta-wrap { grid-template-columns: 6fr 5fr; gap: 56px; }
  .cta-foto { margin: 0; align-self: stretch; }
  .cta-foto img { height: 100%; min-height: 440px; }
  .cta-final .cta-in { padding: 88px 0; }
  .cta-final h2 { font-size: 48px; }
}

/* ---------- rodapé ---------- */
.rodape { background: #071C33; }
.rodape h3 { font: 700 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--white); }
.rodape-claim { color: var(--ambar); font-style: italic; }

/* ---------- flutuantes e orçamento ---------- */
.orc-topo h2 { font-size: 22px; }
.orc-fim { background: var(--areia); border-color: var(--border); }
.orc-valor strong, .orc-total strong { color: var(--verde-700); }
.barra-orc { background: var(--navy); }
.toast { background: var(--navy); }
.toast .link-btn { color: #6FD39A; }

/* ---------- listagem e produto: herdam tokens; ajustes de família ---------- */
.lista-h1, .p-titulo, [class*="crumb"] a { font-family: var(--display); }

/* ---------- ajustes da 1ª inspeção ---------- */
.nomes-grid { grid-template-columns: minmax(0, 1fr); }
.nomes-txt h2 { font-size: 34px; }
@media (min-width: 768px) { .nomes-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } .nomes-txt h2 { font-size: 46px; } }
@media (min-width: 1024px) { .nomes-txt h2 { font-size: 60px; } }
@media (max-width: 1023px) { .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 10px; max-width: 100%; } }


/* cards estreitos (grade de 2 colunas no celular) */
@media (max-width: 767px) {
  .card-faixas summary { white-space: normal; letter-spacing: .02em; font-size: 11px !important; padding: 0 10px; gap: 4px !important; }
  .card-faixas summary svg { display: none; }
  .card-eco:not(.card-eco-vazio) { padding: 4px 10px; font-size: 13px; gap: 4px; white-space: nowrap; }
  .card-eco b { font-size: 13px; }
  .card-ver { letter-spacing: .02em; padding: 0 8px; font-size: 12px; }
  .card-acoes { padding: 10px; gap: 6px; }
}

/* restos do tema antigo (revisão do DESIGN.md) */
.p-atalho[aria-pressed="true"], .lista-atalhos button[aria-pressed="true"] { color: var(--white); }
.p-incluso svg { color: var(--verde-700); }

/* =====================================================================
   RODADA 4 (2026-10-04): ciano da marca, categorias montadas, cards sem "+",
   escadinha com a peça gravada, prévia do nome, avaliações, CTA e rodapé
   ===================================================================== */
:root {
  --ciano: #00C8FF;        /* o feixe do laser (manual da marca); fundo com texto navy */
  --ciano-claro: #5FDBFF;  /* destaque em fundo navy */
  --ciano-700: #0089B3;    /* texto grande em fundo claro */
  --ciano-800: #006A8C;    /* texto pequeno em fundo claro */
  --ciano-50: #E5F8FF;
}

/* ---------- banner: teste do ciano no lugar do verde (para voltar: apagar este bloco) ---------- */
.banner-slide { --destaque: var(--ciano-700); }
.banner-slide.escura { --destaque: var(--ciano-claro); }
.fita-2, .escura .fita-2 { background: var(--ciano); color: var(--navy); }
.etiqueta-melhor { background: var(--ciano); color: var(--navy); }
.etiqueta-melhor span, .etiqueta-melhor small { color: rgba(11, 42, 74, .78); }
.escura .cena-fundo {
  background:
    radial-gradient(40% 65% at 72% 36%, rgba(0, 200, 255, .20), rgba(0, 200, 255, 0) 70%),
    radial-gradient(30% 40% at 92% 92%, rgba(242, 165, 22, .12), rgba(242, 165, 22, 0) 70%),
    linear-gradient(180deg, var(--fundo-a), var(--fundo-b));
}
.banner-pontos i.ativo::after { background: var(--ciano-700); }

/* ---------- WhatsApp: botões com texto navy e botão flutuante mais limpo ---------- */
.btn-whats { color: var(--navy); }
.btn-whats svg { color: var(--navy); }
.fab {
  right: 18px; bottom: 18px; width: 58px; height: 58px; background: var(--green); color: #fff;
  box-shadow: 0 10px 24px rgba(11, 42, 74, .22), 0 0 0 4px rgba(255, 255, 255, .9);
}
.fab svg { width: 30px; height: 30px; }
.fab::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green); opacity: 0;
  animation: fab-pulso 2.8s ease-out 2s 3;
}
@keyframes fab-pulso { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@media (prefers-reduced-motion: reduce) { .fab::after { animation: none; } }
body.com-orcamento .fab { bottom: 92px; }

/* ---------- 2. categorias: cenas montadas com as peças gravadas ---------- */
.cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cat {
  --c1: #FBF8F3; --c2: #EFE5D5; --tinta: var(--navy); --anel: rgba(11, 42, 74, .08);
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; text-decoration: none; isolation: isolate;
  background: radial-gradient(70% 55% at 50% 62%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%), linear-gradient(170deg, var(--c1), var(--c2));
  box-shadow: 0 1px 0 rgba(11, 42, 74, .04), 0 10px 26px rgba(11, 42, 74, .08);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.cat-navy { --c1: #16426D; --c2: #0B2A4A; --tinta: #fff; --anel: rgba(255, 255, 255, .1); }
.cat-ciano { --c1: #EAFAFF; --c2: #BDEFFF; --anel: rgba(0, 106, 140, .14); }
.cat-noite { --c1: #0F3A5F; --c2: #071C33; --tinta: #fff; --anel: rgba(0, 200, 255, .22); }
.cat-navy, .cat-noite { background: radial-gradient(60% 50% at 50% 64%, rgba(0, 200, 255, .22), rgba(0, 200, 255, 0) 70%), linear-gradient(170deg, var(--c1), var(--c2)); }
.cat-txt { position: absolute; z-index: 3; left: 16px; top: 14px; right: 56px; display: grid; gap: 2px; }
.cat-nome { font: 800 20px/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--tinta); }
.cat-qtd { font: 600 14px/1.3 var(--body); color: var(--tinta); opacity: .78; }
.cat-palco { position: absolute; inset: 0; z-index: 1; }
.cat-anel { position: absolute; left: 50%; top: 60%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px solid var(--anel); }
.cat-peca {
  position: absolute; left: var(--x); bottom: -2%; height: var(--a); width: auto; max-width: none;
  rotate: var(--r, 0deg); transform-origin: 50% 100%;
  filter: drop-shadow(0 12px 12px rgba(11, 42, 74, .22));
  transition: transform .45s cubic-bezier(.2, .9, .25, 1.2) calc(var(--d, 0) * 50ms);
}
.cat-navy .cat-peca, .cat-noite .cat-peca { filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .4)); }
.cat-ir {
  position: absolute; z-index: 3; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--navy); box-shadow: 0 4px 12px rgba(11, 42, 74, .16); transition: background-color .25s, transform .25s var(--ease-out);
}
.cat:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(11, 42, 74, .16); }
.cat:hover .cat-peca { transform: translateY(-10px); }
.cat:hover .cat-ir { background: var(--ciano); transform: translateX(2px); }
.cat:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
@media (min-width: 768px) {
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .cat-txt { left: 20px; top: 18px; }
  .cat-nome { font-size: 24px; }
  .cat-ir { right: 16px; top: 16px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .cat, .cat-peca { transition: none; } .cat:hover .cat-peca { transform: none; } }

/* ---------- 3. mais pedidos: segunda foto no hover, botão único, fim centralizado ---------- */
.card-media { position: relative; }
.card-foto2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: 0; transition: opacity .35s ease; }
@media (hover: hover) { .card:hover .card-foto2 { opacity: 1; } }
.card-acoes { display: block; }
.card-ver { width: 100%; gap: 8px; }
.card-ver:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.vitrine-fim { display: flex; justify-content: center; margin-top: 28px; }
@media (max-width: 767px) { .card-ver { font-size: 12px; padding: 0 6px; } .card-ver svg { display: none; } }

/* ---------- 4. escadinha: identidade (ciano + palco escuro) e a peça gravada a laser ---------- */
.escada .esc-card { border-color: #D7EEF6; box-shadow: 0 20px 50px rgba(11, 42, 74, .10); }
.esc-aba[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: inset 0 -3px 0 var(--ciano); }
.esc-foto {
  position: relative; border: 0; border-radius: 18px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(55% 45% at 50% 58%, rgba(0, 200, 255, .30), rgba(0, 200, 255, 0) 70%),
    linear-gradient(170deg, #15406A, #0B2A4A 60%, #071C33);
}
.esc-foto::before {
  content: ""; position: absolute; left: 50%; top: 52%; width: 86%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 1.5px solid rgba(0, 200, 255, .22); z-index: -1;
}
.esc-pedestal {
  position: absolute; left: 22%; right: 22%; bottom: 0; height: 15%;
  background: linear-gradient(90deg, #0F3459, #1D4F80 45%, #123D66 75%, #0A2744); border-radius: 0 0 4px 4px;
}
.esc-pedestal::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; translate: 0 -50%; border-radius: 50%;
  background: linear-gradient(180deg, #2A6198, #1D4F80);
}
.esc-peca {
  position: absolute; left: 50%; bottom: 11%; height: 72%; translate: -50% 0; display: block; z-index: 1;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .45)); transition: opacity .18s ease, transform .3s var(--ease-out);
}
.esc-foto[data-cat="canetas"] .esc-peca { height: 92%; bottom: 3%; rotate: -24deg; }
.esc-foto[data-cat="chaveiros"] .esc-peca { height: 74%; }
.esc-peca.trocando { opacity: 0; transform: translateY(10px); }
.esc-peca img { display: block; height: 100%; width: auto; max-width: none; mix-blend-mode: normal; }
.esc-grav { position: absolute; left: 0; top: 0; }
.esc-laser {
  position: absolute; left: -14%; right: -14%; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 200, 255, 0), #8FEBFF 20%, #fff 50%, #8FEBFF 80%, rgba(0, 200, 255, 0));
  box-shadow: 0 0 10px 2px rgba(0, 200, 255, .85), 0 0 34px 8px rgba(0, 200, 255, .35);
}
.esc-laser-ponto {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, rgba(143, 235, 255, .9) 45%, rgba(0, 200, 255, 0) 72%);
  box-shadow: 0 0 22px 8px rgba(0, 200, 255, .55);
}
.esc-foto.gravando .esc-grav { animation: grava-revela 1.6s cubic-bezier(.45, 0, .55, 1) .25s both; }
.esc-foto.gravando .esc-laser { animation: laser-varre 1.6s cubic-bezier(.45, 0, .55, 1) .25s both; }
.esc-foto.gravando .esc-laser-ponto { animation: laser-ponto .22s ease-in-out .25s 7 alternate; }
@keyframes grava-revela { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes laser-varre { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes laser-ponto { from { left: 30%; } to { left: 70%; } }
@media (prefers-reduced-motion: reduce) { .esc-foto .esc-grav { clip-path: none; animation: none; } .esc-laser { display: none; } }
.esc-faisca { position: absolute; right: 12%; top: 10%; width: 30px; height: 30px; color: #F7C35A; animation: brilha 2.6s ease-in-out infinite alternate; }
.esc-selo {
  position: absolute; left: 12px; top: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(0, 200, 255, .16);
  border: 1px solid rgba(0, 200, 255, .45); color: #CFF4FF; font: 700 13px/1.2 var(--display); letter-spacing: .04em;
}
.degrau:hover .degrau-barra { background: #CDEFFB !important; }
.degrau-barra::after { background: linear-gradient(180deg, var(--ciano), #00A9D9); }
.degrau[aria-pressed="true"] .degrau-preco { color: var(--navy) !important; }
.esc-comp { color: var(--ciano-800); }
/* ações em grade regular: WhatsApp em cima, duas ações do mesmo tamanho embaixo */
.esc-acoes { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.esc-acoes .esc-wa { grid-column: 1 / -1; width: 100%; min-height: 54px; }
.esc-acoes > .btn-contorno { min-height: 48px; width: 100%; padding: 0 12px; gap: 8px; }
@media (max-width: 379px) { .esc-acoes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .esc-faisca { animation: none; } }

/* ---------- 5. mande a sua logo: conversa de exemplo + copo gravado ---------- */
.logowa { background: var(--areia); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.logowa-grid { display: grid; gap: 36px; align-items: center; }
.logowa-txt { display: flex; flex-direction: column; gap: 16px; }
.logowa-txt h2 { max-width: 16ch; }
.logowa-txt h2 em { display: block; color: var(--ciano-700); font-style: italic; }
.logowa-txt > p { font-size: 17px; color: var(--slate); max-width: 50ch; }
.logowa-passos { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 12px; counter-reset: lw; }
.logowa-passos li { counter-increment: lw; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; }
.logowa-passos li::before {
  content: counter(lw); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font: 800 18px/1 var(--display); box-shadow: inset 0 -3px 0 var(--ciano);
}
.logowa-passos b { font: 700 17px/1.25 var(--display); color: var(--navy); padding-top: 2px; }
.logowa-passos span { font-size: 15px; color: var(--slate); line-height: 1.45; }
.logowa-txt .btn-whats { align-self: flex-start; margin-top: 4px; }
.logowa-extra { font-size: 14px; color: var(--slate); }

/* cena: palco escuro com o celular e o copo */
.logowa-cena {
  position: relative; isolation: isolate; border-radius: 28px; padding: 26px 18px 0; min-height: 600px;
  background: radial-gradient(55% 45% at 70% 60%, rgba(0, 200, 255, .26), rgba(0, 200, 255, 0) 70%), linear-gradient(165deg, #15406A, #0B2A4A 55%, #071C33);
}
.logowa-anel { position: absolute; right: -14%; top: 50%; width: 82%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; border: 1.5px solid rgba(0, 200, 255, .22); z-index: -1; }
.logowa-faisca { position: absolute; right: 8%; top: 7%; width: 34px; height: 34px; color: #F7C35A; animation: brilha 2.6s ease-in-out infinite alternate; }

/* celular com a conversa */
.wa-tel {
  position: relative; z-index: 1; margin: 0; width: min(330px, 86%); border-radius: 30px 30px 0 0; overflow: hidden;
  border: 8px solid #0E1621; border-bottom: 0; background: #EFE7DD; box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  background-image: radial-gradient(rgba(11, 42, 74, .05) 1.2px, transparent 1.3px); background-size: 16px 16px;
}
.wa-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #0B2A4A; color: #fff; }
.wa-topo img { width: 36px; height: 36px; border-radius: 50%; background: #fff; padding: 3px; }
.wa-topo b { display: block; font: 700 15px/1.2 var(--display); }
.wa-topo small { font-size: 13px; color: #B9D9EA; }
.wa-msgs { list-style: none; margin: 0; padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 470px; }
.wa-m {
  position: relative; max-width: 84%; padding: 7px 10px 18px; border-radius: 10px; font-size: 14px; line-height: 1.38; color: #111B21;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.wa-m i { position: absolute; right: 8px; bottom: 4px; font-style: normal; font-size: 11px; color: #667781; }
.wa-eu { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 3px; }
.wa-eu i::after { content: " ✓✓"; color: #53BDEB; letter-spacing: -2px; }
.wa-eles { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.wa-arq, .wa-foto { padding: 4px 4px 20px; }
.wa-arq img { display: block; width: 112px; height: auto; border-radius: 7px; }
.wa-arq-nome { display: block; font-size: 12px; color: #54656F; padding: 4px 4px 0; }
.wa-foto img { display: block; width: 120px; height: auto; border-radius: 7px; background: #F3EEE6; padding: 8px 18px; }
.wa-foto span { display: block; font-size: 12px; color: #54656F; padding: 4px 4px 0; }
.wa-digitando { position: absolute; left: 12px; bottom: 44px; display: none; gap: 4px; padding: 10px 12px; background: #fff; border-radius: 10px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-digitando span { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: digita 1s infinite ease-in-out; }
.wa-digitando span:nth-child(2) { animation-delay: .15s; } .wa-digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes digita { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.wa-tel { display: flex; flex-direction: column; }
.wa-topo { order: 0; } .wa-msgs { order: 2; }
.wa-leg { order: 1; align-self: center; margin: 12px 0 2px; padding: 4px 12px; border-radius: 8px; background: #FFF6D8; color: #54656F; font: 600 12px/1.4 var(--body); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }

/* animação: mensagens chegam uma a uma quando a seção aparece */
.logowa-cena.anima .wa-m { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .35s ease, transform .35s var(--ease-out); }
.logowa-cena.anima .wa-m.vista { opacity: 1; transform: none; }
.logowa-cena.anima .wa-digitando.on { display: flex; }

/* copo gravado em destaque */
.logowa-copo { position: absolute; z-index: 2; right: 2%; bottom: 0; width: 48%; max-width: 270px; }
.logowa-copo img { position: relative; z-index: 1; display: block; width: 74%; height: auto; margin: 0 auto 13%; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .5)); }
.logowa-pedestal { position: absolute; left: 4%; right: 4%; bottom: 0; height: 17%; background: linear-gradient(90deg, #0F3459, #1D4F80 45%, #123D66 75%, #0A2744); }
.logowa-pedestal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; translate: 0 -50%; border-radius: 50%; background: linear-gradient(180deg, #2A6198, #1D4F80); }
.logowa-selo {
  position: absolute; z-index: 2; left: 50%; top: -40px; translate: -50% 0; white-space: nowrap; padding: 5px 12px; border-radius: 999px;
  background: rgba(0, 200, 255, .16); border: 1px solid rgba(0, 200, 255, .5); color: #CFF4FF; font: 700 13px/1.2 var(--display);
}
.logowa-cena.anima .logowa-copo { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .9, .25, 1.15); }
.logowa-cena.anima .logowa-copo.vista { opacity: 1; transform: none; }

@media (max-width: 599px) {
  .logowa-cena { padding: 18px 12px 0; min-height: 0; display: flex; flex-direction: column; align-items: center; }
  .wa-tel { width: 100%; border-radius: 30px; border-bottom: 8px solid #0E1621; }
  .wa-msgs { min-height: 0; }
  .logowa-copo { position: relative; right: auto; width: 62%; margin-top: 56px; }
}
@media (min-width: 900px) {
  .logowa-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
  .logowa-cena { padding: 40px 36px; min-height: 0; display: flex; align-items: center; }
  /* celular com proporção de celular: as mensagens novas entram por baixo e as antigas sobem */
  .wa-tel { width: 330px; height: 620px; border-radius: 36px; border-bottom: 8px solid #0E1621; }
  .wa-msgs { flex: 1; min-height: 0; overflow: hidden; justify-content: flex-end; padding-bottom: 14px; }
  .logowa-cena.anima .wa-m:not(.vista) { display: none; }
  .logowa-copo { right: 4%; bottom: 0; width: 38%; max-width: 270px; }
}
@media (prefers-reduced-motion: reduce) { .logowa-faisca, .wa-digitando span { animation: none; } }

/* ---------- 8. avaliações ---------- */
.aval2 { background: var(--areia); }
.aval2-cab { display: grid; gap: 20px; align-items: end; margin-bottom: 24px; }
.aval2-cab h2 em { color: var(--ciano-700); font-style: italic; }
.aval2-resumo { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: 0 10px 26px rgba(11, 42, 74, .06); }
.aval2-resumo-topo { display: flex; align-items: center; gap: 12px; }
.aval2-resumo-topo small { display: block; font-size: 13px; color: var(--slate); }
.aval2-resumo-topo b { font: 700 16px/1.2 var(--display); color: var(--navy); }
.aval2-nota { display: flex; align-items: center; gap: 12px; }
.aval2-num { font: 800 48px/1 var(--display); color: var(--navy); letter-spacing: -0.03em; }
.aval2-nota small { display: block; font-size: 14px; color: var(--slate); margin-top: 2px; }
.aval2-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font: 700 14px/1 var(--display); color: var(--ciano-800); text-decoration: none; border-top: 1px solid var(--border); padding-top: 10px; }
.aval2-link:hover { color: var(--navy); }
.aval2-trilho {
  list-style: none; margin: 0; padding: 4px 2px 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 84%);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.aval2-trilho::-webkit-scrollbar { display: none; }
.aval2-card {
  scroll-snap-align: start; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px;
  position: relative; box-shadow: 0 6px 18px rgba(11, 42, 74, .05);
}
.aval2-card::before { content: "\201D"; position: absolute; right: 18px; bottom: 6px; font: 800 72px/1 var(--display); color: var(--ciano-50); pointer-events: none; }
.aval2-quem { display: flex; align-items: center; gap: 12px; }
.aval2-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--av); color: #fff; font: 800 18px/1 var(--display); }
.aval2-nome { flex: 1; min-width: 0; }
.aval2-nome b { display: block; font: 700 16px/1.2 var(--display); color: var(--navy); }
.aval2-nome small { font-size: 13px; color: var(--slate); }
.aval2-g { flex: none; }
.aval2-card p { position: relative; font-size: 16px; line-height: 1.55; color: var(--ink); }
.aval2-nav { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
@media (min-width: 768px) {
  .aval2-cab { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .aval2-trilho { grid-auto-columns: calc((100% - 32px) / 3); }
}

/* ---------- 12. CTA final: faixa compacta ---------- */
.cta-final { background: var(--white); padding: 0 0 56px; color: inherit; overflow: visible; }
.cta-caixa {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 18px; align-items: center;
  padding: 28px 22px; border-radius: 24px; color: #D6E2EE;
  background: radial-gradient(45% 90% at 85% 50%, rgba(0, 200, 255, .22), rgba(0, 200, 255, 0) 70%), linear-gradient(120deg, #0B2A4A, #0F3A62);
}
.cta-anel { position: absolute; right: -60px; top: 50%; width: 320px; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; border: 1.5px solid rgba(0, 200, 255, .22); z-index: -1; }
.cta-faisca { position: absolute; right: 22px; top: 18px; width: 28px; height: 28px; color: #F7C35A; animation: brilha 2.6s ease-in-out infinite alternate; }
.cta-fotos { display: flex; }
.cta-fotos img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #0B2A4A; box-shadow: 0 0 0 1.5px rgba(0, 200, 255, .5); }
.cta-fotos img + img { margin-left: -14px; }
.cta-final h2 { color: #fff; font-size: 26px; max-width: 22ch; }
.cta-final h2 em { color: var(--ciano-claro); font-style: italic; }
.cta-txt p { color: #C9D7E4; font-size: 15px; margin-top: 6px; max-width: 48ch; }
.cta-acao { display: grid; gap: 8px; justify-items: start; }
.cta-final .cta-linha { color: #9FB3C6; font-size: 14px; }
@media (min-width: 900px) {
  .cta-final { padding-bottom: 72px; }
  .cta-caixa { grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; padding: 32px 40px; }
  .cta-fotos img { width: 64px; height: 64px; }
  .cta-final h2 { font-size: 30px; }
  .cta-acao { justify-items: end; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .cta-faisca { animation: none; } }

/* ---------- rodapé ---------- */
.rodape { position: relative; background: #071C33; color: #C9D6E2; padding: 0 0 96px; font-size: 15px; }
.rodape-laser { height: 3px; background: linear-gradient(90deg, rgba(0, 200, 255, 0), var(--ciano) 30%, var(--ciano) 70%, rgba(0, 200, 255, 0)); box-shadow: 0 0 18px rgba(0, 200, 255, .55); }
.rodape-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 48px; }
.rodape-marca { grid-column: 1 / -1; display: grid; gap: 14px; justify-items: start; }
.rodape-logo img { height: 46px; width: auto; }
.rodape-marca > p { max-width: 36ch; color: #B7C7D7; }
.rodape-google {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff;
}
.rodape-google b { font: 800 18px/1 var(--display); }
.rodape-google .estrelas { display: inline-flex; gap: 1px; vertical-align: -1px; }
.rodape-google small { display: block; font-size: 13px; color: #B7C7D7; margin-top: 2px; }
.rodape-google:hover { border-color: var(--ciano); }
.rodape-redes { display: flex; gap: 8px; }
.rodape-redes a {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background-color .2s, color .2s, border-color .2s;
}
.rodape-redes a:hover { background: var(--ciano); color: var(--navy); border-color: var(--ciano); }
.rodape h3 { font: 700 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.rodape-col ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.rodape-col a, .rodape-col span { display: inline; color: #C9D6E2; text-decoration: none; line-height: 1.5; min-height: 0; }
.rodape-col a { display: inline-flex; min-height: 32px; align-items: center; }
.rodape-col a:hover { color: var(--ciano-claro); text-decoration: none; }
.rodape-pag li { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; }
.rodape-pag svg { color: var(--ciano-claro); margin: 0; }
.rodape-nota { margin-top: 10px; font-size: 14px; color: #9FB3C6; }
.rodape-fim { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: #8FA6BC; }
.rodape-fim p { padding: 0; border: 0; }
.rodape-topo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; text-decoration: none; font: 700 14px/1 var(--display); }
.rodape-topo svg { rotate: -90deg; }
.rodape-topo:hover { color: var(--ciano-claro); }
@media (min-width: 1024px) {
  .rodape-grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding-top: 64px; }
  .rodape-marca { grid-column: auto; }
}

/* celular: seta das categorias vai para baixo; ações da escadinha empilhadas */
@media (max-width: 767px) {
  .cat-txt { left: 14px; top: 12px; right: 12px; }
  .cat-nome { font-size: 17px; letter-spacing: .01em; }
  .cat-ir { top: auto; bottom: 10px; right: 10px; width: 36px; height: 36px; }
}
@media (max-width: 599px) {
  .esc-acoes { grid-template-columns: 1fr; }
  .esc-acoes .esc-wa { font-size: 14px; letter-spacing: .04em; }
}

.cat-frente { z-index: 2; }
.cat-ciano .cat-peca { bottom: 4%; filter: drop-shadow(0 14px 14px rgba(11, 42, 74, .28)); }

/* card: a segunda foto cobre a primeira por inteiro (sem mistura) */
.card-foto2 { mix-blend-mode: normal !important; box-sizing: border-box; padding: 14px 14px 4px; background: #fff; border-radius: var(--r-md) var(--r-md) 0 0; }
@media (hover: hover) { .card:hover .card-media img:not(.card-foto2) { opacity: 0; transition: opacity .35s ease; } }

/* ---------- WhatsApp: padrão único (verde oficial fechado, ícone e texto brancos) ---------- */
:root { --wa: #1FAF54; --wa-escuro: #189447; }
.btn-whats, .btn-whats:visited {
  background: var(--wa) !important; border-color: var(--wa) !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(31, 175, 84, .28);
}
.btn-whats svg { color: #fff !important; fill: #fff; }
.btn-whats:hover { background: var(--wa-escuro) !important; border-color: var(--wa-escuro) !important; box-shadow: 0 8px 20px rgba(31, 175, 84, .34); }
.btn-whats:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.fab {
  background: var(--wa) !important; color: #fff !important; width: 58px; height: 58px;
  box-shadow: 0 8px 22px rgba(11, 42, 74, .22), 0 3px 8px rgba(31, 175, 84, .35) !important; border: 0;
}
.fab::after { display: none !important; }
.fab svg { width: 30px; height: 30px; color: #fff; fill: #fff; }
.fab:hover { background: var(--wa-escuro) !important; transform: scale(1.05); }
.acao-whats svg, .rodape-redes a svg { fill: currentColor; }