/* ============================================================
   DESAFIO SAP NA LOGÍSTICA — tokens & base
   ============================================================ */
:root{
  --bg-deep:   #070c16;
  --bg-panel:  #0d1730;
  --bg-panel-2:#111d3d;
  --ink:       #05070d;

  --blue-electric:#2f6fed;
  --blue-deep:    #12306e;
  --blue-glow:    #4c8dff;

  --amber:   #ffb020;
  --amber-2: #ffd166;

  --white:   #f8f9fc;
  --line:    rgba(248,249,252,.12);
  --line-strong: rgba(248,249,252,.22);
  --muted:   rgba(248,249,252,.72);
  --muted-2: rgba(248,249,252,.52);

  --display: "Sora", "Inter", sans-serif;
  --body: "Inter", sans-serif;
  --mono: "IBM Plex Mono", monospace;

  --radius: 10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--white);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}
:focus-visible{outline:2px solid var(--amber-2); outline-offset:3px;}

.eyebrow{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.12em;
  font-weight:600;
  color:var(--blue-electric);
  margin:0 0 10px;
}
.eyebrow--dark{color:var(--blue-deep);}
.eyebrow--gold{color:var(--amber);}

.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(26px,3.4vw,38px);
  line-height:1.18;
  margin:0 0 14px;
  color:var(--ink);
  max-width:20ch;
}
.h2--light{color:var(--white);}

.section{padding:88px 0;}
.section__lead{
  font-size:18px;
  color:rgba(5,7,13,.62);
  max-width:52ch;
  margin:0 0 44px;
}
.section__lead--light{color:var(--muted);}

.tag-code{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--amber);
  border:1px solid var(--line-strong);
  padding:6px 12px;
  border-radius:999px;
  white-space:nowrap;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--body);
  font-weight:700;
  font-size:17px;
  padding:15px 26px;
  border-radius:8px;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
  border:none;
  cursor:pointer;
}
.cta--gold{
  background:linear-gradient(180deg,var(--amber-2),var(--amber));
  color:#211404;
  box-shadow:0 8px 22px rgba(255,176,32,.28);
}
.cta--gold:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,176,32,.38);}
.cta--lg{padding:18px 34px; font-size:18px; width:100%; max-width:420px;}

/* ============================================================
   HERO — must fit in one fold, desktop 15" and mobile
   ============================================================ */
.hero{
  position:relative;
  background:var(--bg-deep);
  overflow:hidden;
  padding:0;
}
.hero__bg{position:absolute; inset:0; z-index:0;}
.hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(6,10,20,.55) 0%, rgba(6,10,20,.4) 20%, rgba(6,10,20,.12) 34%, transparent 46%);
}
.hero__inner{
  position:relative; z-index:2;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:3.2% 8.5%;
}

@media (min-width:781px){
  .hero{aspect-ratio:1133 / 538;}
}

.hero__top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:40px;
}
.logo{display:flex; align-items:center; gap:10px;}
.logo__mark{width:34px; height:34px; flex:none;}
.logo__text{display:flex; flex-direction:column; line-height:1.05;}
.logo__line1{
  font-family:var(--display); font-weight:800; font-size:19px;
  letter-spacing:.02em; color:var(--white);
}
.logo__line2{
  font-family:var(--display); font-weight:700; font-size:13px;
  color:var(--amber); letter-spacing:.02em;
}

.hero__grid{
  display:block;
}
.hero__copy{max-width:560px;}
.hero__headline{
  font-family:var(--body);
  font-weight:700;
  font-size:clamp(21px,2.35vw,26px);
  line-height:1.42;
  color:var(--white);
  margin:0 0 30px;
}

.hero__meta{
  list-style:none; margin:0 0 10px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:16px; color:var(--white);
}
.hero__meta--single{margin-bottom:34px;}
.hero__meta li{display:flex; align-items:center; gap:7px;}

.price-box{
  display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  border:1.5px solid var(--blue-glow);
  box-shadow:0 0 0 4px rgba(76,141,255,.08), 0 8px 25px rgba(0,0,0,.4);
  border-radius:12px;
  padding:26px 26px 28px;
  background:rgba(6,10,20,.72);
  backdrop-filter:blur(1px);
  max-width:400px;
}
.price-box__label{font-size:10px; color:var(--muted); letter-spacing:.01em; line-height:1.3;}
.price-box__new{font-family:var(--display); font-weight:800; font-size:16px; color:var(--white);}
.price-box__seats{font-size:8.5px; color:var(--amber-2);}
.hero__fine{font-size:10px; color:var(--muted-2); margin:14px 0 0;}

.cta--green{
  width:100%;
  background:linear-gradient(180deg,#2fce6b,#1fae59);
  color:#06210f;
  box-shadow:0 0 0 3px rgba(76,141,255,.25), 0 8px 20px rgba(31,174,89,.35);
  text-align:center;
  line-height:1.35;
  font-size:10.5px;
  padding:12px 20px;
  margin-top:4px;
}
.cta--green:hover{transform:translateY(-2px);}

.hero__photo-tag{
  position:absolute; z-index:1; right:25px; bottom:30px;
  background:rgba(7,12,22,.78);
  border:1px solid var(--line-strong);
  border-radius:8px;
  padding:7px 14px;
  font-family:var(--mono);
  font-size:12px;
  text-align:right;
  white-space:nowrap;
  color:var(--white);
}
.hero__photo-tag small{color:var(--muted-2); font-size:10.5px;}

/* ============================================================
   PROBLEMA
   ============================================================ */
.problema{background:var(--white);}
.problema__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.problema__card{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff;
  border:1px solid rgba(5,7,13,.1);
  border-left:3px solid var(--blue-electric);
  border-radius:8px;
  padding:20px 22px;
}
.problema__card p{margin:0; color:var(--ink); font-size:16px;}
.problema__mark{font-family:var(--mono); color:var(--blue-electric); font-size:14px; margin-top:2px;}

/* ============================================================
   ROTA (antes/depois)
   ============================================================ */
.rota{background:var(--bg-panel);}
.rota__grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:24px;
  align-items:stretch;
}
.rota__col{
  border-radius:12px;
  padding:26px 26px 30px;
  border:1px solid var(--line);
}
.rota__col--before{background:rgba(255,255,255,.03);}
.rota__col--after{background:linear-gradient(160deg, rgba(255,176,32,.1), rgba(255,176,32,.02)); border-color:rgba(255,176,32,.35);}
.rota__tag{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--muted-2); margin-bottom:14px;
}
.rota__tag--gold{color:var(--amber);}
.rota__col ul{margin:0; padding-left:18px; color:var(--muted); font-size:15.5px;}
.rota__col ul li{margin-bottom:8px;}
.rota__col--after ul{color:var(--white);}
.rota__arrow{
  display:flex; align-items:center; justify-content:center;
  font-size:28px; color:var(--amber);
}

/* ============================================================
   CONSTRÓI
   ============================================================ */
.constroi{background:var(--white);}
.constroi__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.constroi__card{
  background:#fff; border:1px solid rgba(5,7,13,.1); border-radius:10px;
  padding:26px 20px;
}
.constroi__icon{font-size:26px; display:block; margin-bottom:12px;}
.constroi__card h3{font-family:var(--display); font-size:18px; margin:0 0 8px; color:var(--ink);}
.constroi__card p{margin:0; font-size:14.5px; color:rgba(5,7,13,.65);}

/* ============================================================
   MANIFESTO — signature element (schedule as shipping manifest)
   ============================================================ */
.manifesto{background:var(--bg-deep);}
.manifesto__sheet{
  border:1px solid var(--line-strong);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}
.manifesto__head{
  display:grid; grid-template-columns:60px 100px 1fr;
  padding:14px 22px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--muted-2);
  border-bottom:1px solid var(--line-strong);
  background:rgba(255,176,32,.06);
}
.manifesto__row{
  display:grid; grid-template-columns:60px 100px 1fr;
  padding:16px 22px;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.manifesto__row:last-child{border-bottom:none;}
.manifesto__row--break{opacity:.55;}
.manifesto__code{font-family:var(--mono); color:var(--amber); font-size:13px;}
.manifesto__time{font-family:var(--mono); font-size:14.5px; color:var(--white);}
.manifesto__stage strong{display:block; font-size:16px; font-weight:700; color:var(--white); font-family:var(--display);}
.manifesto__stage small{display:block; margin-top:3px; font-size:13.5px; color:var(--muted-2); font-weight:400; font-family:var(--body);}

/* ============================================================
   INCLUSO / OFERTA
   ============================================================ */
.incluso{background:var(--white);}
.incluso__list{display:flex; flex-direction:column; gap:10px; margin-bottom:34px;}
.incluso__item{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border:1px solid rgba(5,7,13,.1);
  border-radius:8px;
  padding:18px 22px;
}
.incluso__text h3{margin:0 0 4px; font-family:var(--display); font-size:16.5px; color:var(--ink);}
.incluso__text p{margin:0; font-size:14px; color:rgba(5,7,13,.6);}
.incluso__value{font-family:var(--mono); font-weight:600; color:var(--blue-electric); white-space:nowrap;}

.oferta__total{font-size:15px; color:rgba(5,7,13,.6); margin-bottom:22px;}
.oferta__card{
  background:var(--ink);
  border-radius:16px;
  padding:40px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.oferta__urg{font-family:var(--mono); font-size:12.5px; color:var(--amber); letter-spacing:.03em;}
.oferta__price{display:flex; flex-direction:column; gap:2px;}
.oferta__old{font-size:15px; color:var(--muted-2); text-decoration:line-through;}
.oferta__new{font-family:var(--display); font-weight:800; font-size:56px; color:var(--amber-2); line-height:1;}
.oferta__parc{font-size:13px; color:var(--muted-2);}
.oferta__fine{font-size:13px; color:var(--muted-2); max-width:44ch; margin:0;}

/* ============================================================
   SOBRE
   ============================================================ */
.sobre{background:var(--bg-panel);}
.sobre__grid{display:grid; grid-template-columns:.7fr 1.3fr; gap:48px; align-items:center;}
.sobre__photo img{border-radius:14px; max-height:420px; margin:0 auto;}
.sobre__text p{color:var(--muted); font-size:15.5px;}
.sobre__stats{list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:8px;}
.sobre__stats li{
  font-family:var(--mono); font-size:13.5px; color:var(--amber-2);
  padding-left:18px; position:relative;
}
.sobre__stats li::before{content:"›"; position:absolute; left:0; color:var(--amber);}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--white);}
.faq__list{display:flex; flex-direction:column; gap:10px; max-width:760px;}
.faq__item{
  border:1px solid rgba(5,7,13,.12); border-radius:8px; padding:6px 22px;
}
.faq__item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; font-weight:700; color:var(--ink); font-family:var(--display); font-size:16px;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item p{margin:0 0 18px; color:rgba(5,7,13,.65); font-size:15px;}
.faq__plus{color:var(--blue-electric); font-size:20px; font-weight:400;}
.faq__item[open] .faq__plus{transform:rotate(45deg);}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{background:linear-gradient(180deg,var(--bg-panel),var(--bg-deep));}
.final__inner{text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px;}
.final .h2{max-width:22ch;}
.final p{color:var(--muted); max-width:56ch; font-size:16px;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink); padding:36px 0;}
.footer__inner{display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center;}
.footer nav{display:flex; gap:18px; flex-wrap:wrap; justify-content:center;}
.footer nav a{font-size:13px; color:var(--muted-2); text-decoration:none;}
.footer__legal{font-size:12px; color:rgba(248,249,252,.35); max-width:60ch; margin:6px 0 0;}
.footer span{font-family:var(--display); font-weight:700; color:var(--white);}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
[data-reveal].is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width:980px){
  .constroi__grid{grid-template-columns:repeat(2,1fr);}
  .rota__grid{grid-template-columns:1fr; gap:14px;}
  .rota__arrow{transform:rotate(90deg); padding:4px 0;}
  .sobre__grid{grid-template-columns:1fr; gap:28px; text-align:center;}
  .sobre__stats{align-items:center;}
  .sobre__stats li{padding-left:0;}
  .sobre__stats li::before{display:none;}
}

/* ============================================================
   RESPONSIVE — mobile hero fold
   ============================================================ */
@media (max-width:780px){
  .section{padding:56px 0;}
  .problema__grid{grid-template-columns:1fr;}
  .constroi__grid{grid-template-columns:1fr;}
  .manifesto__head, .manifesto__row{grid-template-columns:34px 74px 1fr; padding:14px 16px;}

  .hero{
    padding:12px 0 16px;
    min-height:100svh;
    display:flex;
    align-items:center;
  }
  .hero__bg img{object-position:72% 18%;}
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(6,10,20,.55) 0%,
      rgba(6,10,20,.6) 20%,
      rgba(6,10,20,.96) 44%,
      rgba(6,10,20,.99) 100%);
  }
  .hero__inner{width:100%;}
  .hero__top{margin-bottom:8px;}
  .logo__mark{width:24px; height:24px;}
  .logo__line1{font-size:14px;}
  .logo__line2{font-size:10px;}
  .tag-code{display:none;}

  .hero__grid{gap:6px;}
  .hero__photo-tag{
    left:auto; right:16px; bottom:auto; top:44px;
    font-size:9.5px; padding:4px 9px; text-align:right;
  }

  .hero__headline{font-size:11px; text-align:center; margin:52px 0 14px; line-height:1.45; max-width:34ch; margin-left:auto; margin-right:auto;}
  .hero__meta{justify-content:center; font-size:10px; gap:5px 10px; margin-bottom:6px; text-align:center;}
  .hero__meta--single{margin-bottom:16px; justify-content:center;}
  .price-box{width:100%; max-width:none; align-items:center; padding:16px 16px 18px; text-align:center;}
  .price-box__label{text-align:center;}
  .price-box__new{font-size:28px;}
  .cta{width:100%; padding:13px 22px; font-size:14px;}
  .hero__fine{text-align:center; font-size:11.5px; margin-top:8px;}

  .rota__grid{grid-template-columns:1fr;}
  .oferta__card{padding:28px 20px;}
  .oferta__new{font-size:44px;}
}