/* =========================================================================
   Catálogo de mobilidade elétrica, Recondiciona.
   Tema escuro alinhado à marca (slate + azul elétrico + cian). Motion só
   transform/opacity, ease-out, <=280ms. Mantém todos os nomes de classe
   usados pelo catalogo.php e pelo main.js (filtros, lightbox, is-hidden).
   ========================================================================= */
:root{
  --cx-bg:#0a0f17; --cx-bg2:#0d1420; --cx-card:#111b2c; --cx-card2:#0f1829;
  --cx-line:rgba(255,255,255,.08); --cx-line-2:rgba(255,255,255,.14);
  --cx-txt:#eef3fb; --cx-mut:#9fb0c6; --cx-mut2:#7c8aa0;
  --cx-blu:#3b9dff; --cx-cyan:#38bdf8; --cx-grn:#2fd27a; --cx-amb:#ff9d2e;
  --cx-money:#7ef0b0;
  --cx-ease:cubic-bezier(.22,.61,.36,1);
  --cx-maxw:1320px;
}

/* largura unificada da página (header é full-bleed no desktop; alinhamos
   main + rodapé na mesma medida para não dar a sensação de faixa morta) */
.cat-wrap{
  background:
    radial-gradient(120% 60% at 85% -10%, rgba(59,157,255,.10), transparent 60%),
    radial-gradient(90% 50% at 0% 0%, rgba(56,189,248,.06), transparent 55%),
    var(--cx-bg);
  color:var(--cx-txt); min-height:60vh; padding:94px 0 84px;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}
@media(min-width:861px) and (max-width:1100px){.cat-wrap{padding-top:112px}}
@media(min-width:1101px){.cat-wrap{padding-top:148px}}
.cat-wrap .container{max-width:var(--cx-maxw);margin:0 auto;padding-inline:clamp(16px,3vw,40px)}
body.pg-catalogo .footer .container{max-width:var(--cx-maxw)}

/* ---------- cabeçalho da seção ---------- */
.cat-head{margin:4px 0 26px;max-width:860px}
.cat-head .eyebrow{
  display:inline-flex;align-items:center;gap:9px;color:var(--cx-cyan);
  font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;
}
.cat-head .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(120deg,var(--cx-blu),var(--cx-cyan))}
.cat-head h1{
  font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;
  font-size:clamp(1.9rem,1.1rem+2.6vw,3rem);line-height:1.06;letter-spacing:-.03em;
  margin:0 0 12px;text-wrap:balance;
}
.cat-head h1 .el{
  background:linear-gradient(100deg,#38bdf8 0%,#27e0a0 52%,#ffc21a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cat-head p{color:var(--cx-mut);max-width:62ch;margin:0;font-size:clamp(.98rem,.95rem+.2vw,1.1rem);line-height:1.6}

/* ---------- filtros ---------- */
.cat-filters{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  background:linear-gradient(180deg,var(--cx-card),var(--cx-card2));
  border:1px solid var(--cx-line);border-radius:16px;padding:16px 18px;margin:22px 0 8px;
}
@media(max-width:800px){.cat-filters{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cat-filters{grid-template-columns:1fr}}
.cat-filters label{display:block;font-size:.68rem;color:var(--cx-mut2);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.cat-filters select{
  width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--cx-line);
  background:#0b1422;color:var(--cx-txt);font-size:.95rem;cursor:pointer;
  transition:border-color .18s var(--cx-ease),box-shadow .18s var(--cx-ease);
}
.cat-filters select:hover{border-color:var(--cx-line-2)}
.cat-filters select:focus-visible{outline:none;border-color:var(--cx-cyan);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
.cat-count{color:var(--cx-mut);font-size:.85rem;margin:14px 2px 18px;font-variant-numeric:tabular-nums}

/* ---------- grade de cards ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:clamp(16px,1.6vw,26px)}
@media(max-width:620px){.cat-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}}
@media(max-width:420px){.cat-grid{grid-template-columns:1fr}}

.cat-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,var(--cx-card) 0%,var(--cx-card2) 100%);
  border:1px solid var(--cx-line);border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 34px -24px rgba(4,9,20,.9);
  transition:transform .22s var(--cx-ease),border-color .22s var(--cx-ease),box-shadow .22s var(--cx-ease);
}
.cat-card::before{ /* fio de luz no topo, revela no hover */
  content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cx-cyan),transparent);
  opacity:0;transition:opacity .22s var(--cx-ease);z-index:3;
}
.cat-card:hover{
  transform:translateY(-4px);border-color:rgba(56,189,248,.34);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 26px 44px -22px rgba(56,189,248,.28),0 18px 40px -26px rgba(4,9,20,.95);
}
.cat-card:hover::before{opacity:1}

.cat-card__img{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#0b1422}
.cat-card__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--cx-ease)}
.cat-card:hover .cat-card__img img{transform:scale(1.05)}
.cat-card__img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,15,23,.46) 0%,transparent 26%,transparent 62%,rgba(10,15,23,.5) 100%)}

.cat-badges{position:absolute;top:12px;left:12px;right:12px;z-index:2;display:flex;gap:7px;flex-wrap:wrap}
.badge{font-size:.68rem;font-weight:700;padding:5px 10px;border-radius:9px;
  letter-spacing:.02em;backdrop-filter:blur(6px);border:1px solid var(--cx-line-2)}
.badge.cat{color:#bfe0ff;background:rgba(10,20,36,.7);border-color:rgba(90,150,220,.45)}
.badge.ok{color:#aef2c8;background:rgba(14,40,26,.7);border-color:rgba(46,120,70,.55)}
.badge.pre{color:#ffd9a0;background:rgba(44,32,14,.72);border-color:rgba(140,100,40,.55)}
.badge.ask{color:#dbe4f0;background:rgba(14,22,38,.7)}

.cat-card__body{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1}
.cat-card__body h3{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;
  font-size:1.06rem;line-height:1.2;letter-spacing:-.01em;margin:0 0 5px;color:var(--cx-txt)}
.cat-card__meta{color:var(--cx-mut);font-size:.82rem;margin-bottom:12px;
  display:flex;align-items:center;gap:7px}
.cat-card__meta::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--cx-cyan);box-shadow:0 0 0 3px rgba(56,189,248,.16);flex:none}

.cat-price{margin-top:auto;padding-top:12px;border-top:1px solid var(--cx-line)}
.cat-price .pix{font-size:.74rem;color:var(--cx-mut2);letter-spacing:.01em}
.cat-price .val{font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;
  font-size:1.5rem;line-height:1.08;color:var(--cx-money);font-variant-numeric:tabular-nums;margin-top:2px}
.val.consulta{font-size:1rem!important;font-weight:600;color:#dbe4f0;line-height:1.35;letter-spacing:.01em}

.cat-card__actions{display:flex;gap:9px;margin-top:14px}
.btnx{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;
  border-radius:11px;padding:12px 14px;font-weight:700;font-size:.9rem;cursor:pointer;
  text-decoration:none;flex:1;text-align:center;white-space:nowrap;
  transition:transform .14s var(--cx-ease),background .2s var(--cx-ease),box-shadow .2s var(--cx-ease),color .2s var(--cx-ease)}
.btnx svg{flex:none}
.btnx.b{background:rgba(59,157,255,.12);color:#bfe0ff;border:1px solid rgba(59,157,255,.3)}
.btnx.b:hover{background:rgba(59,157,255,.2);border-color:rgba(59,157,255,.5)}
.btnx.g{background:#25d366;color:#06310f;box-shadow:0 8px 22px -10px rgba(37,211,102,.6)}
.btnx.g:hover{background:#2be673;box-shadow:0 12px 28px -10px rgba(37,211,102,.7)}
.btnx.o{background:rgba(255,255,255,.05);color:var(--cx-txt);border:1px solid var(--cx-line-2)}
.btnx.o:hover{background:rgba(255,255,255,.1)}
.btnx.sm{padding:10px 12px;font-size:.85rem}
.btnx:active{transform:scale(.97)}
.btnx:focus-visible{outline:2px solid var(--cx-cyan);outline-offset:2px}

/* ---------- detalhe ---------- */
.cat-back{display:inline-flex;align-items:center;gap:7px;color:var(--cx-mut);text-decoration:none;
  font-size:.92rem;margin:2px 0 18px;padding:6px 2px;transition:color .16s var(--cx-ease),gap .16s var(--cx-ease)}
.cat-back:hover{color:var(--cx-cyan);gap:10px}
.cat-detail{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:clamp(24px,3vw,52px);align-items:start}
@media(max-width:860px){.cat-detail{grid-template-columns:1fr}}

.gallery{position:sticky;top:120px}
@media(max-width:860px){.gallery{position:static}}
.gallery__main{position:relative;aspect-ratio:3/4;background:#0b1422;border:1px solid var(--cx-line);
  border-radius:18px;overflow:hidden;cursor:zoom-in;
  box-shadow:0 24px 46px -26px rgba(56,189,248,.3),0 16px 34px -20px rgba(4,9,20,.9)}
.gallery__main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--cx-ease)}
.gallery__main:hover img{transform:scale(1.03)}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:11px}
.gallery__thumbs button{padding:0;border:2px solid var(--cx-line);border-radius:11px;overflow:hidden;
  background:#0b1422;aspect-ratio:1;cursor:pointer;transition:border-color .18s var(--cx-ease),transform .14s var(--cx-ease)}
.gallery__thumbs button:hover{border-color:var(--cx-line-2);transform:translateY(-2px)}
.gallery__thumbs button.active{border-color:var(--cx-cyan)}
.gallery__thumbs button:focus-visible{outline:2px solid var(--cx-cyan);outline-offset:2px}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pend-tag{position:absolute;bottom:10px;left:10px;font-size:.68rem;background:rgba(44,32,14,.85);
  color:#ffd9a0;border:1px solid rgba(140,100,40,.6);padding:4px 9px;border-radius:14px}

.detail__title{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;
  font-size:clamp(1.5rem,1.1rem+1.4vw,2.1rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 10px}
.detail__meta{color:var(--cx-mut);font-size:.86rem;margin-bottom:16px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.detail__meta .badge{position:static}

.pricebox{position:relative;background:linear-gradient(180deg,var(--cx-card),var(--cx-card2));
  border:1px solid var(--cx-line);border-radius:16px;padding:18px 20px 18px 22px;margin:6px 0 18px;overflow:hidden}
.pricebox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--cx-cyan),var(--cx-grn))}
.pricebox .pix{font-size:.82rem;color:var(--cx-mut)}
.pricebox .val{font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:clamp(1.9rem,1.4rem+1.2vw,2.3rem);
  color:var(--cx-money);font-variant-numeric:tabular-nums;line-height:1.05;margin-top:3px}
.pricebox .parc{font-size:.82rem;color:var(--cx-mut2);margin-top:7px}
.detail__actions{display:flex;gap:11px;margin:16px 0 8px;flex-wrap:wrap}
.detail__actions .btnx{flex:1 1 auto;padding:14px 20px;font-size:.98rem}

.sec-title{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;font-size:1.05rem;
  letter-spacing:-.01em;margin:22px 0 8px;display:flex;align-items:center;gap:10px}
.sec-title::after{content:"";height:1px;flex:1;background:var(--cx-line)}
.ficha{width:100%;border-collapse:collapse;margin:6px 0}
.ficha tr{transition:background .15s var(--cx-ease)}
.ficha tr:hover{background:rgba(255,255,255,.025)}
.ficha th{text-align:left;color:var(--cx-mut);font-weight:500;font-size:.86rem;
  padding:11px 10px;border-bottom:1px solid var(--cx-line);width:46%;vertical-align:top}
.ficha td{font-size:.92rem;padding:11px 10px;border-bottom:1px solid var(--cx-line);color:var(--cx-txt);font-weight:500}
.notes{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.notes li{color:var(--cx-mut);font-size:.86rem;padding:0 0 0 20px;position:relative;line-height:1.5}
.notes li::before{content:"";position:absolute;left:4px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--cx-cyan)}
.disc{font-size:.82rem;color:var(--cx-mut);background:var(--cx-card2);border:1px solid var(--cx-line);
  border-radius:12px;padding:11px 14px;margin-top:14px;line-height:1.55}
.aka{color:var(--cx-mut);font-size:.82rem;margin:8px 0 0;line-height:1.7}

/* ---------- lightbox ---------- */
.lbox{position:fixed;inset:0;background:rgba(4,8,16,.94);display:none;align-items:center;
  justify-content:center;z-index:9999;padding:20px}
.lbox.open{display:flex}
.lbox img{max-width:94vw;max-height:88vh;border-radius:12px}
.lbox__close{position:absolute;top:16px;right:20px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;line-height:1}
.lbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);
  border:0;color:#fff;font-size:30px;width:52px;height:52px;border-radius:50%;cursor:pointer;
  transition:background .16s var(--cx-ease),transform .14s var(--cx-ease)}
.lbox__nav:hover{background:rgba(255,255,255,.2)}
.lbox__nav.prev{left:14px}.lbox__nav.next{right:14px}
.is-hidden{display:none!important}

/* ---------- bloco SEO ---------- */
.cat-seo{margin:52px auto 0;max-width:var(--cx-maxw);color:var(--cx-mut);
  border-top:1px solid var(--cx-line);padding-top:30px}
.cat-seo h2{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;font-size:1.18rem;
  color:var(--cx-txt);margin:0 0 10px;letter-spacing:-.01em}
.cat-seo h2:nth-of-type(n+2){margin-top:26px}
.cat-seo p{font-size:.92rem;line-height:1.8;margin:0;max-width:92ch}
.cat-seo strong{color:var(--cx-txt);font-weight:600}

/* ---------- acessibilidade: reduzir movimento ---------- */
@media(prefers-reduced-motion:reduce){
  .cat-card,.cat-card__img img,.gallery__main img,.btnx,.cat-back,.gallery__thumbs button{
    transition-duration:.001ms!important}
  .cat-card:hover{transform:none}
  .cat-card:hover .cat-card__img img,.gallery__main:hover img{transform:none}
}

/* ========================================================================
   Refinamento visual do catálogo: reveal em cascata, botões em degradê
   sólido com brilho, realce de preço. Aditivo, com fallback.
   ======================================================================== */

/* entrada ao rolar (gate .has-reveal) */
html.has-reveal .rv{opacity:0;transform:translateY(20px);
  transition:opacity .65s var(--cx-ease),transform .65s var(--cx-ease);will-change:opacity,transform}
html.has-reveal .rv.rv-in{opacity:1;transform:none}
/* card: entrada suave, mas no fim restaura a transição curta do hover */
html.has-reveal .cat-card.rv{opacity:0;transition:opacity .6s var(--cx-ease)}
html.has-reveal .cat-card.rv.rv-in{opacity:1}

/* botões em degradê sólido (sem opacidade na cor) + glint no hover */
.btnx{position:relative;overflow:hidden}
/* "Ver detalhes": recorte frio da marca (ciano -> azul) */
.btnx.b{background:linear-gradient(118deg,#38bdf8 0%,#2f7bff 100%);color:#042038;border:0;
  box-shadow:0 8px 22px -10px rgba(56,189,248,.6)}
.btnx.b:hover{background:linear-gradient(118deg,#54ccff 0%,#3b9dff 100%);
  box-shadow:0 12px 30px -10px rgba(56,189,248,.74)}
/* "Consultar": degrade completo da marca (ciano -> verde -> ambar), igual a logo/neon */
.btnx.g{background:linear-gradient(110deg,#38bdf8 0%,#27e0a0 50%,#ffc21a 100%);color:#05311f;
  box-shadow:0 10px 26px -10px rgba(39,224,160,.6)}
.btnx.g:hover{background:linear-gradient(110deg,#52ccff 0%,#36efb0 50%,#ffce3a 100%);
  box-shadow:0 14px 34px -10px rgba(39,224,160,.75)}
.btnx.b::after,.btnx.g::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .55s var(--cx-ease)}
.btnx.b:hover::after,.btnx.g:hover::after{left:150%}

/* preço com leve realce */
.cat-price .val,.pricebox .val{font-weight:800;letter-spacing:-.01em}

/* ========================================================================
   Cards 3D flutuantes. Profundidade (sombra em camadas, tingida) + leve
   levitacao continua com inclinacao 3D no desktop. No mobile fica so a
   profundidade (sem movimento perpetuo, para nao repetir o "mobile flutuante").
   Respeita prefers-reduced-motion.
   ======================================================================== */
.cat-grid{perspective:1500px}
.cat-card{
  transform-style:preserve-3d;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 34px 54px -30px rgba(4,9,20,.95),
    0 22px 62px -34px rgba(56,189,248,.20);
}
/* no hover: sobe o brilho e a borda, a sombra cresce (o card "destaca") */
.cat-card:hover{
  border-color:rgba(56,189,248,.42);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 44px 66px -28px rgba(4,9,20,.98),
    0 30px 74px -30px rgba(56,189,248,.34);
}
@keyframes catFloat{
  0%   {transform:translate3d(0,0,0)      rotateX(0deg)   rotateY(0deg)}
  50%  {transform:translate3d(0,-11px,0)  rotateX(1.5deg) rotateY(-1.1deg)}
  100% {transform:translate3d(0,0,0)      rotateX(0deg)   rotateY(0deg)}
}
@media (min-width:861px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .cat-card{animation:catFloat 6s var(--cx-ease) infinite;will-change:transform}
  .cat-card:nth-child(3n+2){animation-duration:6.8s;animation-delay:-1.3s}
  .cat-card:nth-child(3n+3){animation-duration:7.5s;animation-delay:-2.6s}
  .cat-card:nth-child(4n+1){animation-delay:-.7s}
  /* ao passar o mouse, pausa a levitacao para focar o card */
  .cat-card:hover{animation-play-state:paused}
}