/* LOJA ELETROTEL — o estilo SÓ da página inicial (17/10: saiu do loja.css; só a página inicial carrega este arquivo, com versão própria).
   ═════════ PÁGINA INICIAL DA MISTURA (16/10, ele: "vamos com a mistura") ═════════
   Carrossel com o chip do logo de 1981, cartões de confiança e departamentos — proposta-mistura (site-visual-mix/fonte/proposta.css).
   Regra do movimento: o estilo-base de cada peça é o estado FINAL (aceso); as animações só partem do apagado ("from"). Com menos
   movimento (animation: none, lá em cima) tudo aparece pronto. Movimento contínuo: só o "pulso" de corrente nas trilhas, só no banner
   ativo, e para quando o carrossel sai da tela, com a aba escondida, na pausa e com menos movimento (.quieto, posta pelo inicio.js).
   Sem desfoque em SVG. Os banners e os cartões de produto são verdes/brancos nos DOIS temas (as fotos têm fundo branco).
   17/10 (conserto da verificação): a PAUSA do visitante mostra o banner pronto e parado (.pronto, posta pelo inicio.js: os pinos e o contador
   não seguem andando); o pulso de corrente só roda com o inicio.js vivo (.vivo) e para também com o foco do teclado dentro; os cartões de
   cada banner ficam numa fileira com a mesma altura; duas colunas só com o texto em pelo menos 320 px. */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ───────── carrossel ───────── */
.carrossel { margin-top: 0; }
.slides { display: grid; border-radius: 18px; overflow: hidden; background: #0B3321; box-shadow: 0 10px 30px var(--sombra); touch-action: pan-y; }
.slide { grid-area: 1 / 1; position: relative; isolation: isolate; display: grid; gap: 18px; align-content: center; padding: 24px 16px 20px; color: #FFFFFF;
  background: radial-gradient(90% 80% at 78% 58%, rgba(60, 192, 125, .16), rgba(60, 192, 125, 0) 62%),
              linear-gradient(150deg, #092A1B 0%, #0E3B25 48%, #12492D 100%);
  opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility 0s linear .55s; }
.slide::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%238FE3B3' stroke-opacity='.10' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M0 36H52L68 52H200'/%3E%3Cpath d='M0 120H90L108 138H200'/%3E%3Cpath d='M150 0V40'/%3E%3Cpath d='M36 60V104'/%3E%3Cpath d='M170 150V200'/%3E%3Cpath d='M170 0V24'/%3E%3Cpath d='M60 200V176L76 160H130'/%3E%3Cpath d='M60 0V20'/%3E%3Cpath d='M120 70H150L162 82V104'/%3E%3C/g%3E%3Cg fill='none' stroke='%238FE3B3' stroke-opacity='.12' stroke-width='1.4'%3E%3Ccircle cx='150' cy='40' r='3.6'/%3E%3Ccircle cx='36' cy='60' r='3.6'/%3E%3Ccircle cx='36' cy='104' r='3.6'/%3E%3Ccircle cx='170' cy='24' r='3.6'/%3E%3Ccircle cx='170' cy='150' r='3.6'/%3E%3Ccircle cx='130' cy='160' r='3.6'/%3E%3Ccircle cx='60' cy='20' r='3.6'/%3E%3Ccircle cx='120' cy='70' r='3.6'/%3E%3Ccircle cx='162' cy='104' r='3.6'/%3E%3C/g%3E%3Cg fill='%238FE3B3' fill-opacity='.08'%3E%3Crect x='96' y='84' width='8' height='12' rx='1'/%3E%3Crect x='110' y='84' width='8' height='12' rx='1'/%3E%3Crect x='14' y='160' width='12' height='8' rx='1'/%3E%3Crect x='14' y='174' width='12' height='8' rx='1'/%3E%3C/g%3E%3C/svg%3E"); }
.slide.ativo { opacity: 1; visibility: visible; transition: opacity .55s ease; }
.slide-txt { max-width: 34em; }
.slide .olho { font: 500 13px/1.3 var(--f-cod); letter-spacing: .08em; text-transform: uppercase; color: #B4F0CD; margin-bottom: 10px; }
.slide h2 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.02; color: #FFFFFF; }
.slide .lead { margin-top: 12px; color: #DCEDE2; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.45; text-wrap: pretty; }
.slide .acoes { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.slide .btn { padding: 11px 18px; border-radius: 10px; line-height: 1.2; }
.slide .btn-claro { color: #12492D; }
.slide .btn-claro:hover { background: #E2F3E7; }
.slide .btn-contorno { border-color: #85DAA7; }
.slide .btn-contorno:hover { background: rgba(133, 218, 167, .14); }
.slide :focus-visible { outline-color: #85DAA7; }
.pinos-info { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pinos-info li { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font: 600 14px/1.15 var(--f-texto); color: #FFFFFF; padding: 7px 11px 7px 9px;
  border: 1px solid rgba(133, 218, 167, .45); border-radius: 8px; background: rgba(8, 40, 25, .55); }
.pinos-info li::before { content: ""; flex: none; width: 6px; height: 14px; border-radius: 1.5px; background: #7CF0A8; }
.pinos-info li.breve { color: #C2D6C9; font-weight: 400; }
.pinos-info li.breve::before { background: #6F857A; }
/* o valor do conjunto no banner do montador: o mesmo preço da vitrine (com o desconto Pix ligado, "R$ X · R$ Y no Pix", na mesma linha) */
.pinos-info .preco { font: inherit; white-space: nowrap; }
.pinos-info .conj { min-width: 0; }
.pinos-info .precos { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pinos-info .preco-cheio { font: 400 14px/1.15 var(--f-texto); color: #C2D6C9; }
.pinos-info .preco-cheio::after { content: " ·"; }
.pinos-info .preco-pix, .pinos-info .preco-pix small { color: #B4F0CD; font: inherit; }
.slide.ativo .pinos-info li:not(.breve)::before { animation: pad .4s ease-out backwards 2.1s; }
@media (max-width: 559px) {
  .so-largo, .pinos-info li.so-largo { display: none; }   /* o li dos chips tem display próprio: precisa do seletor mais forte */
  .slide .btn { padding: 10px 15px; font-size: 15px; }
  .pinos-info li { font-size: 13px; padding: 6px 9px 6px 8px; }
  .pinos-info .preco-cheio { font-size: 13px; }
  /* 17/10: o valor do conjunto na linha de baixo do chip ("Este conjunto:" / "R$ 22,40"): com o Pix, "R$ 22,40 · R$ 21,50 no Pix" cabe na
     MESMA linha de baixo e o banner não cresce quando o preço do Pix chega */
  .pinos-info .conj > .preco, .pinos-info .conj > .precos { display: flex; }
}
@media (min-width: 880px) {
  .slide { grid-template-columns: minmax(320px, 1fr) minmax(0, 560px); align-items: center; align-content: center; padding: 26px 26px 26px 48px; gap: 24px; min-height: 478px; }
}

/* controles: setas, pontos (pinos que carregam no tempo de cada banner) e pausa */
.controles { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.carrossel:not(.vivo) .controles { visibility: hidden; }   /* 17/10: sem o inicio.js não funcionam: invisíveis (o lugar fica, a página não pula) */
.seta, .pausa { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linha); border-radius: 12px;
  background: var(--superficie); color: var(--tinta); cursor: pointer; }
.seta:hover, .pausa:hover { border-color: var(--vivo); }
.seta svg, .pausa svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pausa .ic-play { display: none; fill: currentColor; stroke: none; }
.carrossel.pausado-usuario .pausa .ic-pausa { display: none; }
.carrossel.pausado-usuario .pausa .ic-play { display: block; }
.pontos { display: flex; gap: 0; }
.ponto { position: relative; width: 40px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ponto::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 9px; transform: translate(-50%, -50%); border-radius: 2px;
  background: var(--apagado); transition: width .3s ease, background .3s ease; }
.ponto[aria-current="true"]::before { width: 34px; background: var(--aceso-fundo); box-shadow: inset 0 0 0 1.5px var(--aceso); }   /* contorno: o atual se vê mesmo pausado no começo */
.carga { position: absolute; left: 3px; top: 50%; width: 34px; height: 9px; border-radius: 2px; background: var(--aceso);
  transform: translateY(-50%) scaleX(0); transform-origin: left center; }
.ponto[aria-current="true"] .carga { transform: translateY(-50%) scaleX(1); animation: carga var(--tempo, 7s) linear; }
.carrossel.parado .ponto[aria-current="true"] .carga { animation-play-state: paused; }   /* pausa onde está e continua dali (o inicio.js guarda o tempo que falta) */
@keyframes carga { from { transform: translateY(-50%) scaleX(0); } }

/* ───────── a arte de cada banner (caixa 4:3, tudo em % e cqw) ───────── */
.arte { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3; container-type: inline-size; justify-self: center; margin-inline: auto; }
.placa-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trilha { fill: none; stroke: #2C7451; stroke-opacity: .8; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.trilha-acesa { fill: none; stroke: var(--led); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.trilha.trilha-fina, .trilha-acesa.trilha-fina { stroke-width: 1.6; }
.pulso { fill: none; stroke: #F2FFF7; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 4 96; opacity: 0; }
.via { fill: #0E3B25; stroke: #A9B7AE; stroke-width: 1.6; }
.silk { font: 500 11px var(--f-cod); fill: #E9F2EC; fill-opacity: .75; letter-spacing: .06em; }
.silk-rodape { font-size: 10px; fill-opacity: .7; }
/* no celular a serigrafia viraria risco de 3–6 px: some (fica só o desenho dos componentes) */
@media (max-width: 559px) { .silk, .smd-val, .chip-marca2 { display: none; } }
.silk-q { fill: none; stroke: #E9F2EC; stroke-opacity: .32; stroke-width: 1; }
.smd-val { font: 500 5.5px var(--f-cod); fill: #E9F2EC; fill-opacity: .8; text-anchor: middle; }
.led-luz { fill: var(--led); }
.led-halo { fill: url(#halo); }
/* o chip */
.chip-halo { fill: url(#halo); transform-box: fill-box; transform-origin: center; }
.chip-topo { fill: #34423A; }
.chip-lado { fill: #0A0F0C; }
.chip-frente { fill: url(#epoxi); }
.chip-contorno { fill: none; stroke: var(--led); stroke-width: 1.6; stroke-opacity: .85; stroke-dasharray: 100; stroke-dashoffset: 0; }
.chip-ponto { fill: var(--led); }
.chip-marca { font: 500 16.5px var(--f-cod); fill: #DCE7E0; fill-opacity: .92; }
.chip-marca2 { font: 500 9.5px var(--f-cod); fill: #DCE7E0; fill-opacity: .72; letter-spacing: .12em; }
/* marcação em duas linhas: legível no chip grande no celular e nos chips pequenos no computador */
.chip-marca.chip-g { font-size: 27px; }
.chip-marca.chip-g2 { font-size: 24px; letter-spacing: .12em; }
.chip-grande .chip-g { display: none; }
@media (max-width: 559px) {
  .chip-grande .chip-l { display: none; }
  .chip-grande .chip-g { display: inline; }
  .chip-peq .chip-g { display: none; }   /* chip pequeno no celular: a letra daria 5–6 px */
}
.pino { fill: var(--led); }
.pino-b { fill: var(--led); opacity: .26; }   /* halo do pino SEM desfoque: um retângulo maior e transparente */

.slide.ativo .pino { animation: pino .32s ease-out backwards calc(var(--t0) + var(--i) * 70ms); }
.slide.ativo .pino-b { animation: aparece .32s ease-out backwards calc(var(--t0) + var(--i) * 70ms); }
.slide.ativo .chip-ponto { animation: ponto .3s ease-out backwards calc(var(--t0) - .25s); }
.slide.ativo .chip-contorno { animation: trilha .8s ease-in-out backwards calc(var(--t0) + 1.1s); }
.slide.ativo .chip-marca { animation: marca .6s ease-out backwards calc(var(--t0) + 1.2s); }
.slide.ativo .chip-halo { animation: halo .9s ease-out backwards calc(var(--t0) + 1.15s); }   /* acende uma vez e fica (sem "respirar") */
.slide.ativo .trilha-acesa { animation: trilha .7s ease-in backwards var(--d); }
.carrossel.vivo .slide.ativo .pulso { animation: pulso 2.6s linear infinite var(--d2); }   /* sem o inicio.js (sem pausa), nada corre sem fim */
.carrossel.quieto .pulso { animation: none !important; }
/* a pausa do visitante (e o "?parado"): o banner PRONTO — tudo aceso, o contador no ano atual, nada andando (a entrada de cada peça não segue
   correndo atrás do botão). Ao continuar, este banner fica pronto e o próximo entra com a animação normal. */
.slide.pronto *:not(.pulso):not(.pulso-vento), .slide.pronto *::before, .slide.pronto *::after { animation: none !important; }
.slide.ativo .led-luz { animation: led .4s ease-out backwards var(--d); }
.slide.ativo .led-halo { animation: aparece .5s ease-out backwards var(--d); }
@keyframes pino { from { fill: #A9B7AE; } }
@keyframes ponto { from { fill: #0B100D; } }
@keyframes aparece { from { opacity: 0; } }
@keyframes trilha { from { stroke-dashoffset: 100; } }
@keyframes marca { from { fill-opacity: .25; } }
@keyframes halo { from { opacity: 0; transform: scale(.55); } }
@keyframes pulso { 0% { opacity: 1; stroke-dashoffset: 100; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes led { from { fill: #2A3A31; } }
@keyframes pad { from { background: #A9B7AE; } }

/* cartões de produto em cima da placa: foto real e o preço DA VITRINE (o mesmo .preco[data-preco]; com o desconto Pix ligado o loja.js
   põe os dois preços — o cheio pequeno em cima e o do Pix embaixo). Cartão branco nos dois temas: as cores são fixas. */
/* 17/10: os cartões de um banner ficam numa FILEIRA (.pecas: 2% / 35% / 68%, cada um com 30% da arte) e com a mesma altura — o rótulo de 2
   linhas ou o "no Pix" que desce não deixam mais a fileira torta; o preço fica sempre embaixo. Com 2 cartões, o 1º e o 3º lugar; com 1, o 1º. */
.pecas { position: absolute; left: 2%; right: 2%; top: 50%; z-index: 2; display: flex; justify-content: space-between; align-items: stretch; }
.peca { position: relative; flex: none; width: 31.25%; display: flex; flex-direction: column; background: #FFFFFF; border-radius: clamp(7px, 1.8cqw, 11px);
  padding: clamp(4px, 1.4cqw, 8px); box-shadow: 0 8px 18px rgba(0, 0, 0, .32); color: #1D1D1B; text-decoration: none; transition: transform .2s ease; }
.peca::before { content: ""; position: absolute; top: -5px; left: 50%; width: 22%; height: 8px; transform: translateX(-50%); border-radius: 2px; background: var(--led); }
.peca img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.peca-claro img { background: #E6EAE7; border-radius: clamp(4px, 1cqw, 7px); }   /* produto branco: fundo cinza-claro atrás da foto */
.peca .nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px;
  font: 400 clamp(12px, 2.5cqw, 14px)/1.2 var(--f-texto); color: #3D4741; }
.peca .preco { display: block; margin-top: 1px; font: 700 clamp(16px, 4.6cqw, 26px)/1.05 var(--f-titulo); color: #12492D; white-space: nowrap; }
.peca .precos { display: grid; justify-items: start; gap: 0; margin-top: 1px; }
.peca .preco-cheio { font: 500 clamp(12px, 2.4cqw, 13px)/1.15 var(--f-texto); color: #4A564C; }
/* "R$ 5,70" nunca quebra no meio; se não couber, só o "no Pix" desce para a linha de baixo */
.peca .precos .preco { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .22em; margin-top: 0; color: #0C7D4B; }
.peca .preco-pix small { font: 600 clamp(12px, 2.3cqw, 14px) var(--f-texto); color: #0C7D4B; white-space: nowrap; }
.peca > .preco, .peca > .precos { margin-top: auto; padding-top: 1px; }
/* no celular o "no Pix" vai sempre para a linha de baixo (em uns cartões cabia, em outros não) */
@media (max-width: 559px) { .peca .preco-pix small { flex-basis: 100%; } }
.peca:hover { transform: translateY(-3px); }
.peca:focus-visible { outline: 3px solid #85DAA7; outline-offset: 3px; }
.peca-destaque { box-shadow: 0 0 0 2px var(--led), 0 8px 18px rgba(0, 0, 0, .32); }
.slide.ativo .peca { animation: peca .55s cubic-bezier(.2, .8, .2, 1) backwards var(--d); }
.slide.ativo .peca::before { animation: pad .45s ease-out backwards calc(var(--d) - .1s); }
.slide.ativo .peca .preco { animation: preco .9s ease-out backwards calc(var(--d) + .25s); }
@keyframes peca { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes preco { from { color: #0C7D4B; } }
/* no celular estreito os cartões passam do fim da arte (mais ainda com os dois preços): a arte ganha folga embaixo. 17/10: SEMPRE que o
   banner tem cartões, e não só depois que o preço do Pix chega (o carrossel crescia ~35 px logo depois de abrir e empurrava a página); e só
   do tamanho preciso (de 455 px para cima os cartões cabem na arte: a folga fixa de 40 px deixava o carrossel alto à toa em 560–879 px) */
@media (max-width: 879px) { .slide:has(.pecas) .arte { margin-bottom: clamp(0px, calc(100px - 22vw), 34px); } }   /* 34 px em 300, 21 em 360, 0 de 455 px para cima */

/* [b] montador: a placa recebe os módulos (encaixe) e o chip liga a placa */
.arte-b .mod { position: absolute; background-repeat: no-repeat; }
.f-int { background-image: url(/img/montador/face-int-simples.webp); }
.f-tom { background-image: url(/img/montador/face-tom10.webp); }
.arte-b .real { z-index: 1; background-size: 100% 100%; }
.placa-luz { position: absolute; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 240, 168, .38), rgba(124, 240, 168, 0)); pointer-events: none; }
.placa-img { position: absolute; z-index: 2; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .4)); }
.arte-b .fantasma { z-index: 3; background-size: 128% 128%; background-position: 50% 50%; border-radius: 8% / 15.8%; opacity: 0;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .35); }
.clique { position: absolute; z-index: 4; border-radius: 8% / 15.8%; box-shadow: 0 0 0 2px var(--led); opacity: 0; pointer-events: none; }
.bom { position: absolute; left: 2.5%; top: 6%; width: 38%; z-index: 2; list-style: none; margin: 0; padding: 0;
  font: 400 clamp(12px, 2.9cqw, 16px)/1.25 var(--f-texto); color: #E8F4EC; }
.bom li { display: flex; align-items: center; gap: .5em; padding: .32em 0; border-bottom: 1px dashed rgba(233, 242, 236, .25); }
.bom li::before { content: ""; flex: none; width: .42em; height: .9em; border-radius: 2px; background: var(--led); }
.bom li.bom-led::before { width: .62em; height: .62em; border-radius: 50%; }
.bom b { font: 500 1em var(--f-cod); color: #B4F0CD; min-width: 1.6em; }
.slide.ativo .arte-b .fantasma { animation: encaixe .9s cubic-bezier(.3, .7, .2, 1) backwards var(--d); }
.slide.ativo .arte-b .real { animation: real .9s linear backwards var(--d); }
.slide.ativo .clique { animation: clique .7s ease-out backwards calc(var(--d) + .72s); }
.slide.ativo .placa-luz { animation: aparece 1s ease-out backwards var(--te); }
.slide.ativo .bom li { animation: bom .45s ease-out backwards var(--d); }
.slide.ativo .bom li::before { animation: pad .45s ease-out backwards var(--d); }
.slide.ativo .bom b { animation: bom-b .45s ease-out backwards var(--d); }
@keyframes encaixe {
  0% { opacity: 0; transform: translate(150%, -35%) rotate(6deg) scale(1.1); }
  20% { opacity: 1; }
  70% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1.06); }
  82% { opacity: 1; transform: scale(.97); }
  92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes real { 0%, 91% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes clique { 0% { opacity: 0; transform: scale(1); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.14); } }
@keyframes bom { from { color: rgba(232, 244, 236, .4); } }
@keyframes bom-b { from { color: rgba(155, 232, 188, .4); } }

/* [c] história: a foto do fundador como foto antiga impressa + o chip em linha com um pino por ano (o gera.py põe --n = anos e --ano =
   o ano atual na própria página: aqui não há ano escrito). Os pinos acendem um a cada 200 ms; o contador sobe um ano por pino (steps) e
   chega ao ano atual junto com o último. Sem @property (navegador antigo) o número pula de 1981 para o ano atual no meio. */
.foto-antiga { position: absolute; left: 3%; top: 2.5%; width: 58%; z-index: 2; margin: 0; background: #F3EDDF; padding: 2.1cqw 2.1cqw 0;
  transform: rotate(-2.2deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 10px 20px rgba(0, 0, 0, .42); }
.foto-antiga img { width: 100%; height: auto; aspect-ratio: 720 / 460; object-fit: cover; background: #CDBFA6; }
.foto-antiga figcaption { padding: 1.5cqw 0 1.8cqw; text-align: center; font: 500 clamp(12px, 2.5cqw, 15px)/1.2 var(--f-cod); letter-spacing: .02em; color: #3B3229; }
.cant { position: absolute; width: 5.4cqw; height: 5.4cqw; pointer-events: none;
  background: linear-gradient(135deg, #2A231C 0 47%, #5A4C3E 47% 50%, transparent 50.5%); }
.cant.c1 { left: -.5cqw; top: -.5cqw; }
.cant.c2 { right: -.5cqw; top: -.5cqw; transform: scaleX(-1); }
.cant.c3 { left: -.5cqw; bottom: -.5cqw; transform: scaleY(-1); }
.cant.c4 { right: -.5cqw; bottom: -.5cqw; transform: scale(-1, -1); }
.quarenta { font: 700 176px var(--f-titulo); fill: #FFFFFF; stroke: #7CF0A8; stroke-width: 2; stroke-dasharray: 700; stroke-dashoffset: 0; paint-order: stroke; }
.anos { font: 700 46px var(--f-titulo); letter-spacing: 10px; fill: #B4F0CD; }
.sip { fill: url(#epoxi); stroke: #E9F2EC; stroke-opacity: .22; stroke-width: 1; }
.sip-topo { fill: #34423A; }
.sip-ponto { fill: var(--led); }
.ano-pino { fill: var(--led); }
.ano-pino-b { fill: var(--led); opacity: .24; }
.ano-ini, .ano-fim { position: absolute; top: 90%; font: 500 clamp(13px, 4cqw, 22px)/1 var(--f-cod); color: #E8F4EC; }
.ano-ini { left: 4%; }
.ano-fim { right: 4%; }
@property --ano { syntax: "<integer>"; inherits: false; initial-value: 1981; }
.contador { counter-reset: ano var(--ano); }
.contador::after { content: counter(ano); }
.slide.ativo .foto-antiga { animation: foto-cai .8s cubic-bezier(.2, .8, .2, 1) backwards .15s; }
.slide.ativo .foto-antiga img { animation: revela 1.4s ease-out backwards .55s; }
.slide.ativo .foto-antiga figcaption { animation: aparece .6s ease-out backwards 1.4s; }
.slide.ativo .quarenta { animation: quarenta 1.6s ease-in-out backwards 1.1s; }
.slide.ativo .anos { animation: anos .6s ease-out backwards 2.4s; }
.slide.ativo .sip-ponto { animation: ponto .3s ease-out backwards 1.75s; }
.slide.ativo .ano-pino { animation: pino .6s ease-in-out backwards calc(1.8s + (var(--j) + 1) * 200ms); }
.slide.ativo .ano-pino-b { animation: aparece .6s ease-in-out backwards calc(1.8s + (var(--j) + 1) * 200ms); }
.slide.ativo .contador { animation: conta calc(var(--n) * 200ms) steps(var(--n), end) backwards 1.8s; }
@keyframes foto-cai { from { opacity: 0; transform: translateY(-14px) rotate(-6deg); } }
@keyframes revela { from { opacity: .12; } }
@keyframes quarenta { 0% { fill-opacity: 0; stroke-dashoffset: 700; } 70% { fill-opacity: 0; stroke-dashoffset: 0; } 100% { fill-opacity: 1; stroke-dashoffset: 0; } }
@keyframes anos { from { opacity: 0; transform: translateY(8px); } }
@keyframes conta { from { --ano: 1981; } }

/* [d] cordas: as trilhas do chip viram cordas e vibram uma vez */
.braco { fill: url(#madeira); }
.veio { fill: none; stroke: #2A170E; stroke-opacity: .35; stroke-width: 1.2; }
.traste { fill: #C9D1CC; }
.marcacao { fill: #EDE6D4; fill-opacity: .9; }
.pestana { fill: #EFE8D8; }
.corda { transform-box: fill-box; transform-origin: center; }
.corda-l { stroke: #D7DED9; stroke-linecap: round; }
.corda-enrol { stroke: #76837B; stroke-dasharray: 1.2 1.4; opacity: .8; }
.corda-borrao { stroke: #E9F2EC; opacity: 0; }
.slide.ativo .arte-d .corda { animation: vibra .9s linear calc(var(--te) + .35s + var(--k) * .16s); }
.slide.ativo .arte-d .corda-l { animation: corda-luz 1.1s ease-out calc(var(--te) + .35s + var(--k) * .16s); }
.slide.ativo .arte-d .corda-borrao { animation: borrao .9s ease-out calc(var(--te) + .35s + var(--k) * .16s); }
@keyframes vibra {
  0% { transform: translateY(0); } 6% { transform: translateY(-2.6px); } 14% { transform: translateY(2.2px); } 24% { transform: translateY(-1.7px); }
  36% { transform: translateY(1.3px); } 50% { transform: translateY(-.9px); } 66% { transform: translateY(.5px); } 82% { transform: translateY(-.2px); } 100% { transform: translateY(0); }
}
@keyframes corda-luz { 0% { stroke: #D7DED9; } 8% { stroke: #7CF0A8; } 100% { stroke: #D7DED9; } }
@keyframes borrao { 0% { opacity: 0; } 8% { opacity: .35; } 100% { opacity: 0; } }

/* [e] ventiladores: o chip liga o motor (M1), a hélice gira e o vento sai em trilhas */
.aro { fill: none; stroke: #E9F2EC; stroke-opacity: .42; stroke-width: 1.6; }
.aro2 { fill: none; stroke: #E9F2EC; stroke-opacity: .2; stroke-width: 1.2; stroke-dasharray: 3 5; }
.helice-v { transform-box: view-box; transform-origin: 300px 104px; }
.helice-v path { fill: var(--led); fill-opacity: .9; }
.cubo { fill: #0F1512; stroke: var(--led); stroke-width: 2.2; }
.vento { fill: none; stroke: url(#vento-g); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.pulso-vento { fill: none; stroke: url(#vento-p); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 91; opacity: 0; }
.slide.ativo .helice-v { animation: gira-v 2.4s cubic-bezier(.15, .6, .25, 1) backwards var(--d); }
.slide.ativo .cubo { animation: led .4s ease-out backwards var(--d); }
.slide.ativo .vento { animation: trilha .9s ease-out backwards var(--d); }
.carrossel.vivo .slide.ativo .pulso-vento { animation: pulso 2.2s linear infinite var(--d2); }
.carrossel.quieto .pulso-vento { animation: none !important; }
@keyframes gira-v { from { transform: rotate(-1080deg); } }

/* ───────── cartões de confiança: cada um é um pino que acende ───────── */
.confianca-sec { margin-top: 26px; }
.confianca { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 12px; }
.confianca::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: 22px; width: 4px; border-radius: 2px; background: var(--aceso); }
.pino-card { position: relative; display: flex; gap: 14px; align-items: center; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 1px 2px var(--sombra); }
.pino-card::before { content: ""; position: absolute; left: -21px; top: 50%; width: 21px; height: 10px; margin-top: -5px; border-radius: 2px 0 0 2px; background: var(--aceso); }
.pino-card > div { min-width: 0; flex: 1; }
.pino-card b { display: block; font: 700 21px/1.1 var(--f-titulo); }
.pino-card div > span:not(.ref) { display: block; margin-top: 3px; color: var(--texto2); font-size: 14.5px; line-height: 1.4; }
.pino-card .ref { float: right; margin-left: 8px; font: 500 12px/1.6 var(--f-cod); color: var(--texto2); letter-spacing: .06em; }
.ic-comp { flex: none; width: 64px; height: 40px; overflow: visible; }
.ic-comp .tr { fill: none; stroke: var(--aceso); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-comp .fino { stroke-width: 1.4; }
.ic-comp .faixa-branca { stroke: #8E9490; stroke-width: .6; }
.faixa-cap { stroke: var(--aceso); stroke-width: 5; opacity: .3; }
.ic-selo { fill: none; stroke: var(--aceso); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ic-led .cupula { fill: var(--aceso); fill-opacity: .3; stroke: var(--aceso); stroke-width: 1.8; stroke-linejoin: round; }
.ic-led .raio { fill: none; stroke: var(--aceso); stroke-width: 1.8; stroke-linecap: round; }
@media (min-width: 960px) {   /* em 3 colunas só quando cabe: em 768 px o texto quebrava em 4 linhas de ~14 letras */
  .confianca { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 24px 0 0; }
  .confianca::before { left: 3%; right: 3%; top: 0; bottom: auto; width: auto; height: 4px; }
  .pino-card::before { left: 38px; top: -21px; width: 10px; height: 21px; margin-top: 0; border-radius: 2px 2px 0 0; }
}
/* acendem uma vez ao carregar ... */
.confianca::before { animation: pad .6s ease-out backwards .4s; }
.pino-card::before { animation: pad .45s ease-out backwards calc(.8s + var(--n) * .35s); }
.pino-card .ic-comp { animation: ic-acende .6s ease-out backwards calc(.95s + var(--n) * .35s); }
.ic-led .cupula { animation: cupula .6s ease-out backwards 1.75s; }
@keyframes ic-acende { from { opacity: .3; } }
@keyframes cupula { from { fill-opacity: 0; } }
/* ... ou conforme a rolagem traz os cartões para a tela */
@supports (animation-timeline: view()) {
  .confianca { view-timeline-name: --conf; }
  .confianca::before { animation: pad linear both; animation-timeline: --conf; animation-range: entry 0% entry 45%; }
  .pino-card::before, .pino-card .ic-comp, .ic-led .cupula { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --conf; animation-delay: 0s; }
  .pino-card:nth-child(1)::before { animation-name: pad; animation-range: entry 30% entry 55%; }
  .pino-card:nth-child(2)::before { animation-name: pad; animation-range: entry 45% entry 70%; }
  .pino-card:nth-child(3)::before { animation-name: pad; animation-range: entry 60% entry 85%; }
  .pino-card:nth-child(1) .ic-comp { animation-name: ic-acende; animation-range: entry 35% entry 65%; }
  .pino-card:nth-child(2) .ic-comp { animation-name: ic-acende; animation-range: entry 50% entry 80%; }
  .pino-card:nth-child(3) .ic-comp { animation-name: ic-acende; animation-range: entry 65% entry 95%; }
  .ic-led .cupula { animation-name: cupula; animation-range: entry 75% entry 100%; }
}

/* ───────── departamentos: cada um é um componente na placa, em cartão branco (.dep-card: o .dep é o item do menu) ───────── */
.grade-deps { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .grade-deps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .grade-deps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dep-card { position: relative; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden;
  color: var(--tinta); text-decoration: none; box-shadow: 0 1px 2px var(--sombra); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.dep-foto { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--foto-fundo); padding: 12px 10px 8px; border-bottom: 1px dashed var(--linha); }
.dep-foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.dep-card .ref { position: absolute; left: 8px; top: 6px; font: 500 12px/1 var(--f-cod); color: #5B625C; letter-spacing: .06em; }
.dep-card .pad { position: absolute; right: 8px; top: 7px; width: 10px; height: 10px; border-radius: 2px; background: #C9D2CC; transition: background .2s ease; }
.dep-txt { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic nome" "ic qt"; column-gap: 10px; align-items: start; padding: 10px 12px 12px; }
.dep-txt b { grid-area: nome; }
.dep-txt small { grid-area: qt; }
.dep-ic { grid-area: ic; width: 30px; height: 30px; margin-top: 1px; overflow: visible; }
@media (max-width: 719px) {
  .dep-txt { grid-template-areas: "nome nome" "ic qt"; column-gap: 6px; padding: 9px 10px 11px; }
  .dep-ic { width: 20px; height: 20px; margin-top: 3px; }
  .dep-card small { font-size: 12px; margin-top: 5px; }
}
.dep-tr { fill: none; stroke: var(--vivo); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dep-tr * { stroke-dasharray: 120; stroke-dashoffset: 0; }
.helice { transform-box: view-box; transform-origin: 16px 16px; }
.dep-card b { display: block; font: 700 19px/1.1 var(--f-titulo); }
.dep-card small { display: block; margin-top: 4px; font: 500 12.5px/1.2 var(--f-cod); color: var(--texto2); }
.dep-card:hover, .dep-card:focus-visible { border-color: var(--vivo); box-shadow: 0 8px 22px var(--sombra); transform: translateY(-2px); }
.dep-card:hover .dep-foto img, .dep-card:focus-visible .dep-foto img { transform: scale(1.04); }
.dep-card:hover .pad, .dep-card:focus-visible .pad { background: #0C7D4B; }
.dep-card:hover .dep-tr *, .dep-card:focus-visible .dep-tr * { animation: traco .8s ease-out; }
.dep-card:hover .helice, .dep-card:focus-visible .helice { animation: gira 1.1s linear 2; }
@keyframes traco { from { stroke-dashoffset: 120; } }
@keyframes gira { to { transform: rotate(360deg); } }