/* ============================================================
   SOBRE — página institucional. Não é uma vertical de solução, mas
   usa o mesmo contrato de tokens (--v-accent/-soft/-deep/-rgb) para
   herdar de graça os componentes compartilhados (.journey-*,
   .hotspot, .glass-panel) definidos em motion.css.

   Identidade: lavanda (#9F8CE9) — a mesma cor que já aparece no
   próprio gradiente da logomarca e que, em todo componente de
   jornada do ecossistema, marca por padrão o nó final ("evolução").
   Não é uma cor nova: é a cor que o sistema já usa pra falar de
   continuidade — a mais coerente com uma página sobre por que a
   Logos trabalha em ciclo, não em venda pontual.
   ============================================================ */
:root{
  --v-accent:#9F8CE9;
  --v-accent-soft:#ECE7FB;
  --v-accent-deep:#453583;
  --v-accent-rgb:159,140,233;
}

.ab-kicker{font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--v-accent-deep); text-transform:uppercase;}

/* ---------- 1. HERO ---------- */
.ab-hero{position:relative; background:var(--chumbo); color:#fff; padding:170px 0 110px 0; overflow:hidden;}
.ab-hero-arc{position:absolute; inset:0; width:100%; height:100%; opacity:.4; z-index:0;}
.ab-hero-inner{position:relative; z-index:1; max-width:760px;}
.ab-hero-kicker{font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--v-accent); text-transform:uppercase; margin-bottom:22px;}
.ab-hero h1{font-size:44px; font-weight:800; letter-spacing:-1px; line-height:1.18; margin-bottom:22px;}
.ab-hero-lead{font-size:17px; line-height:1.65; color:rgba(255,255,255,.78); max-width:560px; margin-bottom:40px;}
.ab-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;}
.ab-hero-cue svg{animation:abCueBounce 2.2s ease-in-out infinite;}
.ab-hero-cue:hover{color:#fff; gap:13px;}
@keyframes abCueBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* ---------- 2. A LÓGICA ---------- */
.ab-logic{background:var(--offwhite); padding:120px 0;}
.ab-sec-head{max-width:640px; margin:0 auto 56px auto; text-align:center;}
.ab-sec-head h2{font-weight:800; font-size:32px; letter-spacing:-.8px; line-height:1.28; margin:14px 0 0 0;}
.ab-sec-head p{font-size:16px; color:rgba(255,255,255,.75); line-height:1.6; margin-top:14px;}
.ab-sec-head--dark .ab-kicker{color:var(--v-accent);}
.ab-sec-head--dark h2{color:#fff;}
/* Três decisões como uma trajetória: 01 → 02 → 03 sobre uma linha contínua
   (o mesmo arco de marca do hero), sem caixas. "Na prática" é uma camada
   secundária, marcada só por um filete, não uma caixa dentro da caixa. */
.ab-logic-grid{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0 56px; counter-reset:none;}
.ab-logic-grid::before{content:""; position:absolute; left:27px; right:0; top:27px; height:1px;
  background:linear-gradient(90deg, rgba(var(--v-accent-rgb),.9), rgba(236,26,94,.55) 55%, rgba(252,61,19,.35) 90%, rgba(252,61,19,0));}
.ab-logic-card{position:relative; display:flex; flex-direction:column; gap:14px; padding:0; background:none; border:0;}
.ab-logic-num{position:relative; z-index:1; display:inline-grid; place-items:center; width:54px; height:54px; border-radius:50%;
  font-family:'Switzer',sans-serif; font-weight:700; font-size:15px; letter-spacing:.5px; color:var(--v-accent-deep);
  background:var(--offwhite); border:1px solid rgba(var(--v-accent-rgb),.55); box-shadow:0 0 0 6px var(--offwhite); margin-bottom:14px;}
.ab-logic-num::after{content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(var(--v-accent-rgb),.16);}
.ab-logic-card h3{font-size:21px; font-weight:800; letter-spacing:-.4px; line-height:1.28; max-width:300px;}
.ab-logic-belief{font-size:15px; color:var(--ink); line-height:1.7;}
.ab-logic-consequence{margin-top:8px; padding:2px 0 2px 16px; border-left:1px solid rgba(var(--v-accent-rgb),.5);
  font-size:13.5px; line-height:1.65; color:rgba(36,36,48,.62); background:none; border-radius:0;}
.ab-logic-consequence b{display:block; margin-bottom:4px; font-size:11px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--v-accent-deep);}

/* ---------- 4. ATERRISSAGEM NO MUNDO REAL ---------- */
.ab-real{background:#fff; padding:0;}
.ab-real-grid{display:grid; grid-template-columns:1.05fr 1fr; min-height:600px;}
.ab-real-img{position:relative; overflow:hidden;}
.ab-real-img img{width:100%; height:100%; object-fit:cover; object-position:center 35%;}
.ab-real-copy{display:flex; flex-direction:column; justify-content:center; padding:80px; background:#fff;}
.ab-real-copy span.kicker{font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--v-accent-deep); text-transform:uppercase;}
.ab-real-copy h2{font-weight:800; font-size:30px; letter-spacing:-.7px; line-height:1.28; margin:16px 0 18px 0; max-width:420px;}
.ab-real-copy p{font-size:15.5px; color:var(--ink); line-height:1.65; max-width:420px; margin-bottom:14px;}
.ab-real-copy p:last-child{margin-bottom:0;}

/* ---------- 5. GEOTAB EM CONTEXTO (reveal — 2ª ocorrência do padrão) ---------- */
.ab-reveal{background:var(--chumbo); padding:110px 80px; position:relative; overflow:hidden;}
.ab-reveal::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 85% 50%, rgba(var(--reveal-rgb),.16) 0%, rgba(var(--reveal-rgb),0) 70%);
}
.ab-reveal-wrap{max-width:680px; margin:0 auto; position:relative; z-index:1; text-align:center;}
.ab-reveal-kicker{color:rgb(var(--reveal-rgb)); font-size:13px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; margin-bottom:16px;}
.ab-reveal-wrap h2{color:#fff; font-size:30px; font-weight:700; letter-spacing:-.5px; line-height:1.28; margin-bottom:18px;}
.ab-reveal-wrap p{color:rgba(255,255,255,.75); font-size:15.5px; line-height:1.65; margin-bottom:26px;}
.ab-reveal-link{display:inline-flex; align-items:center; gap:8px; color:rgb(var(--reveal-rgb)); font-weight:700; font-size:14.5px; transition:gap .2s ease;}
.ab-reveal-link:hover{gap:12px;}

/* ---------- 6. PORTAS DE DESCOBERTA ---------- */
.ab-doors{background:var(--offwhite); padding:120px 0;}
/* Caminhos: quatro colunas leves sobre um filete, sem caixas */
.ab-doors-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0 32px;}
.ab-door{position:relative; display:flex; flex-direction:column; gap:12px; padding:26px 0 6px; background:none; border:0; border-top:1px solid rgba(36,36,48,.14); border-radius:0;
  transition:border-color .28s ease;}
.ab-door::before{content:""; position:absolute; left:0; top:-1px; height:2px; width:0; background:linear-gradient(90deg, var(--v-accent), var(--pink)); transition:width .45s cubic-bezier(.22,1,.36,1);}
.ab-door:hover::before,.ab-door:focus-visible::before{width:100%;}
.ab-door-dest{order:-1; font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--v-accent-deep);}
.ab-door-q{font-size:19px; font-weight:800; letter-spacing:-.35px; line-height:1.32; color:var(--chumbo);}
.ab-door-d{font-size:14px; color:var(--ink); line-height:1.6; flex:1;}
.ab-door-go{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--v-accent-deep); transition:gap .2s ease;}
.ab-door:hover .ab-door-go{gap:10px;}

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

/* ---------- 2. 20 ANOS — o número como elemento editorial ---------- */
.ab-kicker--light{color:var(--v-accent);}
.ab-20{position:relative; background:#14121F; color:#fff; padding:130px 0 140px; overflow:hidden; border-top:1px solid rgba(255,255,255,.06);}
.ab-20-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:center;}
.ab-20-num{position:relative; line-height:.8; user-select:none;}
.ab-20-num span{display:block; font-family:'Switzer',sans-serif; font-weight:800; font-size:clamp(180px,24vw,360px); letter-spacing:-.06em;
  background:linear-gradient(135deg, var(--v-accent) 0%, #EC1A5E 55%, #FC3D13 100%); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.92;}
.ab-20-num small{display:block; margin-top:18px; padding-left:10px; font-size:13px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.5);}
.ab-20-copy h2{font-weight:800; font-size:38px; letter-spacing:-1px; line-height:1.16; margin:14px 0 26px; max-width:560px;}
.ab-20-copy p{font-size:16px; line-height:1.75; color:rgba(255,255,255,.74); max-width:560px; margin-bottom:16px;}
.ab-20-copy .ab-20-close{margin-top:12px; padding-left:18px; border-left:2px solid var(--v-accent); font-size:19px; font-weight:600; line-height:1.5; color:#fff;}

/* ---------- 5. REPERTÓRIO DE SEGMENTOS ---------- */
.ab-segs{background:var(--offwhite); padding:120px 0;}
.ab-segs-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:72px; align-items:start;}
.ab-segs-copy h2{font-weight:800; font-size:32px; letter-spacing:-.8px; line-height:1.22; margin:14px 0 18px;}
.ab-segs-copy p{font-size:15.5px; line-height:1.7; color:var(--ink);}
.ab-segs-list{list-style:none; display:flex; flex-direction:column; border-top:1px solid rgba(36,36,48,.14);}
.ab-segs-list li{border-bottom:1px solid rgba(36,36,48,.14);}
.ab-segs-list a{position:relative; display:flex; justify-content:space-between; align-items:center; padding:15px 4px; font-size:21px; font-weight:700; letter-spacing:-.4px; color:var(--chumbo); text-decoration:none; transition:padding .3s ease, color .2s ease;}
.ab-segs-list a::after{content:"→"; font-weight:400; color:var(--v-accent-deep); opacity:.45; transition:opacity .2s ease, transform .3s ease;}
.ab-segs-list a:hover,.ab-segs-list a:focus-visible{padding-left:14px; color:var(--v-accent-deep);}
.ab-segs-list a:hover::after,.ab-segs-list a:focus-visible::after{opacity:1; transform:translateX(4px);}
.ab-reveal-strong{color:#fff !important; font-weight:600; font-size:17px !important;}

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
  .ab-hero{padding:140px 0 90px 0;}
  .ab-hero h1{font-size:34px;}
  .ab-logic-grid{grid-template-columns:1fr; gap:44px; padding-left:76px;}
  .ab-logic-grid::before{left:27px; right:auto; top:27px; bottom:40px; width:1px; height:auto;
    background:linear-gradient(180deg, rgba(var(--v-accent-rgb),.9), rgba(236,26,94,.5) 60%, rgba(252,61,19,0));}
  .ab-logic-num{position:absolute; left:-76px; top:0; margin:0;}
  .ab-real-grid{grid-template-columns:1fr;}
  .ab-20{padding:90px 0 100px;}
  .ab-20-grid,.ab-segs-grid{grid-template-columns:1fr; gap:36px;}
  .ab-20-copy h2{font-size:30px;}
  .ab-segs{padding:90px 0;}
  .ab-real-img{height:320px;}
  .ab-real-copy{padding:56px 40px;}
  .ab-real-copy h2,.ab-real-copy p{max-width:none;}
  .ab-reveal{padding:90px 24px;}
  .ab-doors-grid{grid-template-columns:1fr 1fr; gap:12px 28px;}
}
@media (max-width:640px){
  .navbar,.ab-real-copy{padding-left:24px; padding-right:24px;}
  .ab-hero h1{font-size:28px;}
  .ab-20-num span{font-size:150px;}
  .ab-segs-list a{font-size:18px;}
  .ab-doors-grid{grid-template-columns:1fr;}
  .ab-logic-grid{padding-left:68px;}
  .ab-logic-num{left:-68px; width:48px; height:48px;}
  .ab-logic-grid::before{left:24px;}
}