/* ============================================================
   HUB DE SOLUÇÕES — página de catálogo, não de contexto. Lista as
   4 soluções reais da Logos (Telemetria, Videotelemetria, Gestão de
   Frotas, Temperatura e Umidade) + a camada de escalada Enterprise/
   Geotab, cada uma levando para sua página própria.

   Identidade: grafite/aço (#6E7483) — mesma cor estrutural usada em
   "O que você precisa". Decisão deliberada: as duas são páginas de
   arquitetura/roteamento do ecossistema, não verticais de produto,
   então compartilham a mesma linguagem "neutra" — sinaliza hub, não
   compete com a cor de nenhuma solução individual. Cada card do
   grid carrega a cor real da sua própria solução via --card-accent
   (inline), então a página continua rica em cor apesar do tom
   estrutural do fundo/hero.
   ============================================================ */
:root{
  --v-accent:#6E7483;
  --v-accent-soft:#E5E6E9;
  --v-accent-deep:#373940;
  --v-accent-rgb:110,116,131;
}

/* ---------- BREADCRUMB ---------- */
.sol-breadcrumb{font-size:13px; color:rgba(255,255,255,.55); margin-bottom:26px;}
.sol-breadcrumb a{color:rgba(255,255,255,.55); transition:color .2s ease;}
.sol-breadcrumb a:hover{color:#fff;}

/* ---------- 1. HERO ---------- */
.sol-hero{position:relative; background:var(--chumbo); color:#fff; padding:170px 0 110px 0; overflow:hidden;}
.sol-hero-arc{position:absolute; inset:0; width:100%; height:100%; opacity:.4; z-index:0;}
.sol-hero-inner{position:relative; z-index:1; max-width:760px;}
.sol-hero-kicker{font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--v-accent); text-transform:uppercase; margin-bottom:22px;}
.sol-hero h1{font-size:40px; font-weight:800; letter-spacing:-1px; line-height:1.24; margin-bottom:22px;}
.sol-hero-lead{font-size:17px; line-height:1.65; color:rgba(255,255,255,.78); max-width:580px; margin-bottom:40px;}
.sol-hero-cue{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.65); transition:color .2s ease, gap .2s ease;}
.sol-hero-cue svg{animation:solCueBounce 2.2s ease-in-out infinite;}
.sol-hero-cue:hover{color:#fff; gap:13px;}
@keyframes solCueBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* ---------- 2. GRID DE SOLUÇÕES ---------- */
.sol-grid-section{background:var(--offwhite); padding:110px 0;}
.sol-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.sol-card{
  display:flex; flex-direction:column; gap:14px; background:#fff; border-radius:22px; padding:34px 32px;
  border:1px solid rgba(36,36,48,.08); border-top:3px solid var(--card-accent, var(--v-accent));
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
}
.sol-card:hover{transform:translateY(-4px); box-shadow:0 26px 48px -28px rgba(36,36,48,.26);}
.sol-card-top{display:flex; align-items:center; justify-content:space-between;}
.sol-card-tag{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:var(--card-accent); background:var(--card-accent-soft); border-radius:999px; padding:6px 13px;
}
.sol-card-arrow{color:rgba(36,36,48,.3); transition:transform .25s ease, color .25s ease;}
.sol-card:hover .sol-card-arrow{transform:translateX(4px); color:var(--card-accent);}
.sol-card h3{font-size:20px; font-weight:800; letter-spacing:-.4px; line-height:1.3; color:var(--chumbo);}
.sol-card p{font-size:14px; color:var(--ink); line-height:1.65;}
.sol-card-highlights{display:flex; flex-direction:column; gap:8px; margin-top:4px; padding-top:16px; border-top:1px solid rgba(36,36,48,.08);}
.sol-card-highlights li{position:relative; padding-left:18px; font-size:13px; font-weight:600; color:var(--chumbo);}
.sol-card-highlights li::before{content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:999px; background:var(--card-accent);}

/* ---------- 3. ESCALADA — ENTERPRISE / GEOTAB ---------- */
.sol-escalada{background:#fff; padding:0 0 110px 0;}
.sol-escalada-inner{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  background:var(--chumbo); border-radius:28px; padding:48px 52px; color:#fff;
}
.sol-escalada-copy{max-width:640px;}
.sol-escalada-kicker{display:block; font-size:12.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:10px;}
.sol-escalada-copy h2{font-size:24px; font-weight:800; letter-spacing:-.5px; margin-bottom:10px;}
.sol-escalada-copy p{font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.75);}
.sol-escalada-cta{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0; font-size:13.5px; font-weight:700; color:var(--chumbo);
  background:#fff; border-radius:999px; padding:13px 22px; transition:gap .2s ease, transform .2s ease;
}
.sol-escalada-cta:hover{gap:12px; transform:translateY(-2px);}

/* ---------- 4. CTA FINAL ---------- */
.sol-ctafinal{background:var(--chumbo); padding:100px 0; text-align:center;}
.sol-ctafinal .wrap{max-width:620px;}
.sol-ctafinal h2{color:#fff; font-weight:800; font-size:32px; letter-spacing:-.8px; margin-bottom:16px;}
.sol-ctafinal p{color:rgba(255,255,255,.75); font-size:16px; line-height:1.65; margin-bottom:32px;}
.sol-ctafinal-actions{justify-content:center;}

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
  .sol-hero{padding:140px 0 90px 0;}
  .sol-hero h1{font-size:30px;}
  .sol-grid-section{padding:80px 0;}
  .sol-cards{grid-template-columns:1fr;}
  .sol-escalada{padding:0 0 80px 0;}
  .sol-escalada-inner{padding:38px 32px;}
}
@media (max-width:640px){
  .sol-hero h1{font-size:26px;}
  .sol-card{padding:28px 24px;}
  .sol-escalada-inner{flex-direction:column; align-items:flex-start;}
}

/* =====================================================================
   CIDADE MASTER — hero explorável do hub de Soluções
   Entrada: a cena acende (luz, cor, escala), uma varredura de luz passa
   uma vez, e só então os pontos aparecem, um a um. Parallax discreto
   (imagem e pontos juntos, pela mesma variável) e congelado quando um
   painel está aberto. Sem rótulos permanentes: o contexto aparece na
   interação (rótulo efêmero no hover + Floating Glass no clique).
   ===================================================================== */
.sol-city{padding:0; min-height:clamp(640px, 58vw, 100vh); display:flex; align-items:flex-end; background:#0A1015; isolation:isolate;}
.sol-city .sol-hero-arc{display:none;}
.sol-city-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; z-index:0;
  scale:1.12; translate:var(--px,0px) var(--py,0px); opacity:0; filter:brightness(.55) saturate(.7);
  transition:opacity 1.2s ease, filter 2.2s ease, scale 2.8s cubic-bezier(.16,1,.3,1), translate .9s cubic-bezier(.22,1,.36,1);}
.sol-city.is-live .sol-city-img{opacity:1; filter:none; scale:1.04;}
.sol-city-wash{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,16,21,.78) 0%, rgba(10,16,21,0) 22%),
    linear-gradient(90deg, rgba(10,16,21,.86) 0%, rgba(10,16,21,.62) 26%, rgba(10,16,21,0) 52%),
    linear-gradient(0deg, rgba(10,16,21,.55) 0%, rgba(10,16,21,0) 30%);}
/* varredura de luz: passa uma vez, quando a cena acende */
.sol-city::after{content:""; position:absolute; top:0; bottom:0; left:0; width:22%; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, rgba(0,140,222,0) 0%, rgba(108,196,245,.16) 48%, rgba(255,255,255,.28) 50%, rgba(108,196,245,.16) 52%, rgba(0,140,222,0) 100%);
  mix-blend-mode:screen; transform:translateX(-120%);}
.sol-city.is-live::after{animation:cityScan 2.4s cubic-bezier(.45,.05,.25,1) .5s 1 both;}
@keyframes cityScan{0%{opacity:0; transform:translateX(-120%);} 12%{opacity:1;} 85%{opacity:1;} 100%{opacity:0; transform:translateX(560%);}}
.sol-city .sol-hero-inner{z-index:3; max-width:1220px; width:100%; padding-top:150px; padding-bottom:60px;}
.sol-city .sol-hero-inner > *{max-width:460px;}
.sol-city h1{font-size:clamp(34px, 3.3vw, 46px); line-height:1.08; letter-spacing:-1.2px;}
.sol-city .sol-hero-lead{font-size:16.5px; margin-bottom:26px;}
.sol-city .sol-breadcrumb{position:relative;}
/* pontos: entram depois da cena, um a um, e acompanham o parallax da imagem */
.sol-city:not(.is-live) .dsc-point,.sol-city:not(.is-live) .dsc-hud{opacity:0 !important; pointer-events:none;}
.sol-city .dsc-point{translate:var(--px,0px) var(--py,0px);
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease, opacity .4s ease, translate .9s cubic-bezier(.22,1,.36,1);}
/* a entrada progressiva dos pontos só começa quando a cena acendeu */
.sol-city:not(.is-live) .dsc-point{animation:none !important;}
.sol-city.is-live.dsc-in .dsc-point{animation-delay:calc(var(--pi,0) * 190ms + 1250ms);}
.sol-city.is-live.dsc-in .dsc-point::after{animation-delay:calc(var(--pi,0) * 190ms + 2000ms);}
.sol-city.dsc-open{--px:0px !important; --py:0px !important;}
.sol-city[data-dsc]{--dsc-hud-top:104px; --dsc-safe-top:150px; --dsc-band-top:76px; --dsc-recede-bg:#0A1015;}
@media (max-width:1100px){
  .sol-city .sol-hero-inner{padding-left:24px; padding-right:24px;}
}
@media (max-width:760px){
  .sol-city{min-height:0; align-items:stretch;}
  .sol-city .sol-hero-inner{padding:28px 20px 48px;}
  .sol-city-wash{background:linear-gradient(180deg, rgba(10,16,21,.65) 0%, rgba(10,16,21,0) 28%);}
}
@media (prefers-reduced-motion:reduce){
  .sol-city-img{transition:none; scale:1.04;}
  .sol-city::after{display:none;}
}

/* vidro da cidade: mais compacto, para caber inteiro na cena abaixo do contador */
@media (min-width:761px){
  .sol-city .dsc-panel{max-height:calc(100% - 166px);}
  .sol-city .dsc-step{padding:9px 0;}
  .sol-city .dsc-step.is-blind p{font-size:15px;}
  .sol-city .dsc-cta{margin-top:10px;}
}

/* =====================================================================
   HUB COMO PAINEL (15/10): página escura, a cidade domina a experiência,
   texto contido no canto inferior esquerdo, sem grade de cards abaixo.
   ===================================================================== */
body{background:#0A1015;}
.sol-city{align-items:stretch;}
.sol-city-intro{position:absolute; z-index:3; left:clamp(24px, 4vw, 64px); bottom:clamp(28px, 4vw, 56px); max-width:360px;}
.sol-city-intro .sol-breadcrumb{margin-bottom:14px; font-size:12px;}
.sol-city-intro .sol-hero-kicker{margin-bottom:12px; font-size:11.5px; color:rgba(255,255,255,.6);}
.sol-city-intro h1{font-size:clamp(26px, 2.4vw, 34px); line-height:1.12; letter-spacing:-.8px; margin-bottom:12px;}
.sol-city-intro .sol-hero-lead{font-size:15px; line-height:1.55; color:rgba(255,255,255,.75); margin-bottom:16px;}
.sol-city-intro .sol-hero-cue{font-size:12.5px;}
.sol-city-wash{background:
  linear-gradient(180deg, rgba(10,16,21,.7) 0%, rgba(10,16,21,0) 18%),
  radial-gradient(120% 90% at 0% 100%, rgba(10,16,21,.92) 0%, rgba(10,16,21,.55) 30%, rgba(10,16,21,0) 55%),
  linear-gradient(0deg, rgba(10,16,21,.65) 0%, rgba(10,16,21,0) 22%);}
.sol-city .sol-hero-inner{display:none;}

.sol-layers{background:#0A1015; color:#fff; padding:96px 0 72px;}
.sol-layers-head{max-width:640px; margin-bottom:34px;}
.sol-layers-kicker{display:block; font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:12px;}
.sol-layers-head h2{font-size:clamp(24px, 2.4vw, 32px); font-weight:700; letter-spacing:-.6px; line-height:1.2;}
.sol-layer-list{list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.1);}
.sol-layer-list a{display:grid; grid-template-columns:48px minmax(170px, 1.1fr) 2fr minmax(160px, 1.2fr) 24px; align-items:center; gap:24px; padding:26px 8px; border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff; text-decoration:none; position:relative; transition:background .35s ease, padding .35s var(--ease-out);}
.sol-layer-list a::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--c); transition:width .6s var(--ease-out);}
.sol-layer-list a:hover{background:linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); padding-left:18px;}
.sol-layer-list a:hover::before{width:100%;}
.sol-layer-n{font:800 14px 'Switzer',system-ui,sans-serif; color:var(--c);}
.sol-layer-list b{font-size:19px; font-weight:700; letter-spacing:-.3px;}
.sol-layer-list p{font-size:14px; line-height:1.55; color:rgba(255,255,255,.66);}
.sol-layer-in{font-size:12px; color:rgba(255,255,255,.42); line-height:1.5;}
.sol-layer-list .arr{color:rgba(255,255,255,.4); font-size:16px;}
.sol-layer-list a:hover .arr{color:var(--c);}
.sol-escalada{background:#0A1015; padding:24px 0 96px;}
.sol-escalada-inner{background:linear-gradient(120deg, rgba(14,165,233,.10), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1);}
@media (max-width:900px){
  .sol-layer-list a{grid-template-columns:36px 1fr 20px; gap:6px 14px;}
  .sol-layer-list p,.sol-layer-in{grid-column:2 / 3;}
  .sol-layer-list .arr{grid-row:1; grid-column:3;}
}
@media (max-width:760px){
  .sol-city{isolation:auto;}
  .sol-city-intro{position:relative; left:auto; bottom:auto; max-width:none; padding:24px 20px 40px; background:#0A1015;}
  .sol-city .sol-city-wash{background:linear-gradient(180deg, rgba(10,16,21,.55) 0%, rgba(10,16,21,0) 28%);}
}