/* ===== Versão de teste: topo escuro, estilo multimídia automotiva =====
   Carregado depois do styles.css, só na página novo.html */
body.novo{--ink:#07090c;--ink2:#0d1117;--glow:#22c8ff;--glow2:#5b8cff}
body.novo h1,body.novo h2,body.novo .logo-text{font-family:"Exo 2","Segoe UI",system-ui,sans-serif}

/* ---- Cabeçalho escuro ---- */
body.novo .header{background:rgba(7,9,12,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
body.novo .logo-img{filter:invert(1);mix-blend-mode:screen}
body.novo .nav{color:#d6dbe3}
body.novo .nav a:hover{color:#fff}
body.novo .nav-cta{background:var(--wa);color:#fff}
body.novo .cart-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
body.novo .cart-btn span{background:var(--glow);color:#04131a}
body.novo .burger{color:#fff}

/* ---- Topo (hero) ---- */
.hero2{position:relative;overflow:hidden;color:#fff;background:linear-gradient(180deg,var(--ink),var(--ink2))}
.hero2-bg{position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(55% 70% at 74% 48%,rgba(34,200,255,.24),transparent 62%),
   radial-gradient(40% 50% at 8% 105%,rgba(91,140,255,.16),transparent 60%),
   repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 46px);
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.hero2-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;padding:64px 20px 72px}
.eyebrow2{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#bfeaff;margin-bottom:16px}
.eyebrow2 .dot{width:9px;height:9px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 4px rgba(34,200,255,.2),0 0 14px var(--glow)}
.hero2 h1{color:#fff;font-style:italic;font-weight:800;text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;font-size:clamp(2.2rem,5.2vw,4rem);margin-bottom:16px}
.hero2 h1 em{font-style:italic;color:var(--glow);text-shadow:0 0 28px rgba(34,200,255,.45)}
.lead2{color:#c4ccd8;font-size:1.1rem;max-width:520px;margin-bottom:24px}
.finder2{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);border-radius:16px;padding:16px;max-width:600px;margin:0 0 18px}
.finder2 label{color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.finder2 select,.finder2 input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.finder2 select option{color:#111;background:#fff}
.finder2 input::placeholder{color:#a9b3c2}
.finder2 .btn{background:var(--glow);color:#04131a;box-shadow:0 8px 28px rgba(34,200,255,.35)}
.finder2 .btn:hover{background:#6fdcff}
.hero2-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#9aa6b6;font-size:.86rem}
.hero2-links a{border:1px solid rgba(255,255,255,.2);padding:5px 12px;border-radius:999px;color:#e6ebf2;font-weight:600}
.hero2-links a:hover{border-color:var(--glow);color:var(--glow)}

/* aparelhos recortados, com brilho */
.hero2-visual{position:relative;min-height:430px}
.hero2-visual .halo{position:absolute;left:50%;top:48%;width:80%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(34,200,255,.35),transparent 65%);filter:blur(10px)}
.hero-device{position:absolute;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.65)) drop-shadow(0 0 34px rgba(34,200,255,.28))}
.hero-device.main{width:86%;right:0;top:6%;animation:float1 7s ease-in-out infinite}
.hero-device.side{width:25%;left:2%;bottom:0;animation:float2 8s ease-in-out infinite}
@keyframes float1{50%{transform:translateY(-10px)}}
@keyframes float2{50%{transform:translateY(8px)}}
.hchip{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:.78rem;font-weight:700;color:#e9f6ff;background:rgba(10,16,24,.7);border:1px solid rgba(34,200,255,.4);backdrop-filter:blur(6px);box-shadow:0 0 18px rgba(34,200,255,.2)}
.hchip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--glow)}
.hchip.c1{right:2%;top:2%}.hchip.c2{left:30%;top:0}.hchip.c3{right:0;bottom:16%}.hchip.c4{left:34%;bottom:2%}

/* ---- Faixa de confiança ---- */
.trust{background:#0b0e13;border-top:1px solid rgba(255,255,255,.07);border-bottom:3px solid #000}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px 20px}
.trust-item{display:flex;align-items:center;gap:12px;color:#dbe2ec;font-size:.88rem;line-height:1.3}
.trust-item b{display:block;color:#fff;font-size:.92rem}
.trust-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(34,200,255,.1);border:1px solid rgba(34,200,255,.3)}
.trust-ic svg{width:22px;height:22px;fill:none;stroke:var(--glow);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- Catálogo: foto sem o branco chapado ---- */
body.novo .prod-img{background:radial-gradient(circle at 50% 35%,#fff,#e6eaf0 85%)}
body.novo .prod-img img{mix-blend-mode:multiply}
body.novo .rec-img{background:radial-gradient(circle at 50% 35%,#fff,#e6eaf0 85%)}
body.novo .rec-img img{mix-blend-mode:multiply}
body.novo .tag{background:#111418;box-shadow:0 0 0 1px rgba(34,200,255,.5)}
.specs{display:flex;flex-wrap:wrap;gap:5px;margin:1px 0 2px}
.specs span{background:#eef1f5;border:1px solid #dfe3e9;border-radius:6px;padding:2px 8px;font-size:.73rem;font-weight:700;color:#27303f}
.specs span.hl{background:#06222d;border-color:#06222d;color:#7fe0ff}
body.novo h2{font-style:italic;font-weight:800;text-transform:uppercase}

@media(max-width:900px){
  .hero2-in{grid-template-columns:1fr;padding:36px 20px 44px}
  .hero2-visual{order:-1;min-height:300px}
  .hero-device.main{width:78%;right:6%}
  .hero-device.side{width:24%;left:4%}
  .hchip.c2,.hchip.c4{display:none}
  .trust-in{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  body.novo .nav{background:#0d1117;border-bottom:1px solid rgba(255,255,255,.1)}
  body.novo .nav a{border-bottom:1px solid rgba(255,255,255,.08);color:#e6ebf2}
}
@media(max-width:480px){.trust-in{grid-template-columns:1fr}}

/* ===== Ajustes: logo transparente, duas telas e painel de destaques organizado ===== */
body.novo .logo-img{filter:none;mix-blend-mode:normal}
.hero2-visual{position:relative;min-height:0;display:flex;flex-direction:column;gap:18px}
.stage{position:relative;height:350px}
.hero-device.main{width:78%;right:0;top:0;animation:float1 9s ease-in-out infinite}
.hero-device.side{width:46%;left:0;bottom:0;animation:float2 10s ease-in-out infinite}
@keyframes float1{50%{transform:translateY(-6px)}}
@keyframes float2{50%{transform:translateY(5px)}}
.hero2-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hero2-feats li{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(34,200,255,.28);color:#eaf6ff;font-weight:700;font-size:.8rem;line-height:1.2;text-align:left}
.hero2-feats svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--glow);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero2-feats li.wide{grid-column:1/-1;background:rgba(34,200,255,.1);font-size:.86rem}
@media(max-width:900px){
  .hero2-visual{order:-1;min-height:0}
  .stage{height:270px}
  .hero-device.main{width:76%;right:2%}
  .hero-device.side{width:44%;left:2%}
  .hero2-feats{grid-template-columns:repeat(2,1fr)}
}

/* ===== Painel de destaques: novos tópicos, em maiúsculas ===== */
.hero2-feats li{text-transform:uppercase;letter-spacing:.05em;font-size:.74rem;font-weight:800}
.hero2-feats li.f-main{grid-column:span 2}
.hero2-feats li.f-wide{grid-column:span 3;background:rgba(34,200,255,.1);font-size:.74rem}
.hero2-feats li.wide{grid-column:auto}
@media(max-width:900px){
  .hero2-feats li.f-main{grid-column:1/-1}
  .hero2-feats li.f-cam{grid-column:1/-1}
  .hero2-feats li.f-wide{grid-column:1/-1}
}
.hero2-feats li{font-size:.7rem;letter-spacing:.03em;padding:11px 7px;white-space:nowrap}
.hero2-feats li.f-wide{font-size:.7rem}
@media(max-width:900px){.hero2-feats li{white-space:normal;font-size:.72rem}}

@media(max-width:1180px){.hero2-feats li{white-space:normal}}

/* ===== Telas com CarPlay: tamanhos ajustados ao recorte ===== */
.stage{height:370px}
.hero-device.main{width:auto;max-width:74%;height:auto;max-height:340px;right:0;top:0}
.hero-device.side{width:auto;max-width:44%;height:auto;max-height:200px;left:0;bottom:6px}
@media(max-width:900px){
  .stage{height:290px}
  .hero-device.main{max-width:76%;max-height:250px;right:2%}
  .hero-device.side{max-width:42%;max-height:150px;left:2%}
}

/* ===== Uma só tela, centralizada (CarPlay + Android Auto na mesma tela) ===== */
.stage{height:400px}
.hero-device.main{left:0;right:0;margin:0 auto;top:6px;width:auto;height:370px;max-width:96%;max-height:none;animation:float1 9s ease-in-out infinite}
@media(max-width:900px){
  .stage{height:290px}
  .hero-device.main{height:262px;right:0}
}

/* ===== Topo escuro nas páginas de categoria e de carros ===== */
body.novo .hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(180deg,#07090c,#0d1117);border-bottom:3px solid #000}
body.novo .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 70% at 80% 40%,rgba(34,200,255,.2),transparent 62%),repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 46px)}
body.novo .hero .hero-in{position:relative}
body.novo .hero h1{color:#fff;font-style:italic;font-weight:800;text-transform:uppercase}
body.novo .hero h1 em{color:var(--glow);font-style:italic;text-shadow:0 0 28px rgba(34,200,255,.4)}
body.novo .hero .lead,body.novo .hero .hero-points{color:#c4ccd8}
body.novo .hero .eyebrow{color:#bfeaff}
body.novo .hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
body.novo .hero .btn-ghost:hover{border-color:var(--glow);color:var(--glow)}
body.novo .hero .yearbox{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
body.novo .hero .yearbox label{color:#fff}
body.novo .hero .yearbox select{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
body.novo .hero .yearbox select option{color:#111;background:#fff}
body.novo .hero .screen{background:#0a1118;border:1px solid rgba(34,200,255,.35);box-shadow:0 0 40px rgba(34,200,255,.25)}
body.novo .hero-card{display:grid;place-items:center}
body.novo .hero-pic{width:100%;max-width:400px;height:auto;filter:drop-shadow(0 22px 36px rgba(0,0,0,.65)) drop-shadow(0 0 34px rgba(34,200,255,.28))}
@media(max-width:900px){body.novo .hero-card{display:none}}