/* =========================================================
   landing.css - Estilos específicos da landing page (index.html)
   Carregar por último: tokens → base → header → footer → landing
   Secções: Hero · Quem Somos · Princípios · Como Aderir ·
            Diagrama · Documentação · Plataforma · FAQs
   ========================================================= */

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:flex-end;
  color:var(--white);
  overflow:hidden;
  isolation:isolate;
  padding:120px 0 110px;
}
.hero .bg{
  position:absolute;inset:0;z-index:-2;
  background:#13100D;
}
.hero .bg img{
  width:100%;height:100%;object-fit:cover;object-position:center center;
  display:block;
}
.hero .vignette{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,7,4,.55) 0%, rgba(10,7,4,.15) 22%, rgba(10,7,4,0) 45%, rgba(10,7,4,.35) 85%, rgba(10,7,4,.75) 100%);
}

.hero .container{position:relative;z-index:1;width:100%;margin-top:26vh}
.hero-stack{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hero-wordmark{
  font-family:"Inter",sans-serif;font-weight:800;line-height:.85;
  letter-spacing:-.04em;font-size:clamp(88px,13vw,172px);
  color:var(--white);display:inline-flex;align-items:flex-end;gap:0;
  margin:0 0 4px -0.04em; /* nudge otico: alinha o "GIG" com o texto por baixo */
}
.hero-wordmark .wm-g,.hero-wordmark .wm-g2,.hero-wordmark .wm-i{color:var(--white)}

.hero-tagpill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:var(--radius-pill);
  border:1.5px solid var(--green-400);
  background:rgba(140,198,62,.08);backdrop-filter:blur(6px);
  font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--white);
}
.hero-tagpill .dot{width:6px;height:6px;border-radius:50%;background:var(--green-400)}

.hero-h1{
  color:var(--white);font-size:clamp(20px,2vw,24px);
  font-weight:700;line-height:1.17;margin:0;max-width:760px;
}
.hero-sub{
  color:rgba(255,255,255,.9);font-size:18px;line-height:1.5;font-weight:400;
  margin:0;max-width:800px;  /* 2 linhas a largura a que o site e visto (~1440-1520px) */
}

/* Indicador de scroll - duplo chevron animado */
.hero-scroll{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:-8px;
  color:var(--white);pointer-events:none;z-index:2;
}
.hero-scroll svg{
  width:18px;height:18px;display:block;
  animation:chevBob 1.8s ease-in-out infinite;
  margin-top:-14px;
}
.hero-scroll svg:nth-child(2){animation-delay:.25s;opacity:.55}
@keyframes chevBob{
  0%  {transform:translateY(-6px);opacity:0}
  50% {transform:translateY(0);   opacity:1}
  100%{transform:translateY(6px); opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-scroll svg{animation:none;opacity:.7}
}
.hero .hero-meta{display:flex;align-items:center;gap:16px;margin-top:40px;flex-wrap:wrap}
.hero .hero-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--green-500)}
.hero .hero-meta .tag-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.35);
  font-size:13px;font-weight:500;color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.05);backdrop-filter:blur(6px);
}

/* ---------------------------------------------------------
   LAYOUT 2 COLUNAS (Quem Somos · Como Aderir · Plataforma)
   --------------------------------------------------------- */
.twocol{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}
@media (min-width:960px){.twocol{grid-template-columns:1fr 1fr;gap:80px}}

.lede .label-title{margin-bottom:20px}
.lede .h2{margin-bottom:28px;max-width:560px}
.lede .body-lg{color:#3a3530;max-width:520px;margin-bottom:32px}

/* Cards de benefício (Quem Somos) */
.card-stack{display:flex;flex-direction:column;gap:20px}
.benefit-card{
  background:var(--white);border:1px solid var(--light-grey-200);
  border-radius:var(--radius-lg);padding:32px;
  display:flex;gap:20px;align-items:flex-start;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.benefit-card:hover{border-color:var(--green-300);box-shadow:var(--shadow)}
.icon-circle{
  width:52px;height:52px;border-radius:50%;
  background:var(--green-100);color:var(--green-800);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.icon-circle svg{width:22px;height:22px}
.benefit-card .txt .sub2{margin-bottom:8px}
.benefit-card .txt .body-sm{color:#4a4540}

/* ---------------------------------------------------------
   PRINCÍPIOS
   --------------------------------------------------------- */
.principles-head{text-align:center;max-width:760px;margin:0 auto 56px}
.principles-head .label-title{margin-bottom:16px}
.principles-head .h2{margin-bottom:20px}
.principles-head .body-md{color:#3a3530}
.principles-head a{color:var(--green-700);text-decoration:underline;text-underline-offset:3px;font-weight:600}

.principles-list{max-width:900px;margin:0 auto;border-top:1px solid var(--light-grey-200)}
.principle-row{
  display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:center;
  padding:28px 8px;border-bottom:1px solid var(--light-grey-200);
  transition:background .2s ease;
}
.principle-row:hover{background:rgba(140,198,62,.05)}
.principle-row .num{font-weight:700;font-size:22px;color:var(--green-700);letter-spacing:.02em}
.principle-row .title{font-weight:700;font-size:22px;line-height:1.2;color:var(--black)}
.principle-row .chev{color:var(--green-700);opacity:.5}

/* ---------------------------------------------------------
   COMO ADERIR - resumo
   --------------------------------------------------------- */
.steps-list{list-style:none;padding:0;margin:24px 0 0;counter-reset:step}
.steps-list li{
  counter-increment:step;
  display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--light-grey-200);
}
.steps-list li:last-child{border-bottom:none}
.steps-list li::before{
  content:counter(step,decimal-leading-zero);
  width:40px;height:40px;border-radius:50%;
  background:var(--green-500);color:var(--white);font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;
}
.steps-list li .t{font-weight:600;font-size:18px}

/* Visual da coluna direita - ícones numa linha vertical */
.adesao-visual{
  background:var(--green-50);border-radius:var(--radius-lg);
  padding:40px 32px;position:relative;
}
.adesao-visual .v-step{
  display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:center;
  padding:14px 0;position:relative;
}
.adesao-visual .v-step .ic{
  width:56px;height:56px;border-radius:50%;background:var(--white);
  border:1px solid var(--green-200);
  display:flex;align-items:center;justify-content:center;color:var(--green-700);
  position:relative;z-index:1;
}
.adesao-visual .v-step .ic svg{width:22px;height:22px}
.adesao-visual .v-step .tt{font-weight:600;font-size:16px}
.adesao-visual::before{
  content:"";position:absolute;top:56px;bottom:56px;left:60px;
  width:2px;background:repeating-linear-gradient(180deg, var(--green-400) 0 6px, transparent 6px 12px);
}

/* ---------------------------------------------------------
   DIAGRAMA - processo de adesão (timeline vertical, 8 passos)
   --------------------------------------------------------- */
.swim-wrap{background:var(--green-50);padding:100px 0}
.swim-head{max-width:880px;margin:0 auto 56px;padding:0 32px;text-align:center}
.swim-head .sub1{margin-bottom:16px}
.swim-head .body-md{color:#3a3530}

.flow-legend{
  display:flex;justify-content:center;gap:20px;flex-wrap:wrap;
  margin:0 auto 40px;padding:0 24px;
}
.flow-legend .chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:600;background:var(--white);
  border:1px solid var(--light-grey-200);
}
.flow-legend .chip .sw{width:10px;height:10px;border-radius:3px}
.chip.agente .sw{background:var(--grey-green-dark)}
.chip.gig    .sw{background:var(--green-500)}
.chip.oper   .sw{background:var(--dark-grey)}

.flow-steps{
  max-width:900px;margin:0 auto;padding:0 24px;
  display:flex;flex-direction:column;gap:0;
}
.fstep{
  position:relative;display:grid;
  grid-template-columns:80px 1fr;gap:28px;align-items:flex-start;
  padding:0 0 32px 0;
}
.fstep:last-child{padding-bottom:0}
.fstep .rail{
  position:relative;display:flex;justify-content:center;
}
.fstep .num{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;color:var(--white);
  background:var(--green-500);flex-shrink:0;z-index:2;
  box-shadow:0 0 0 6px var(--green-50);
}
.fstep.decision .num{background:var(--white);color:var(--green-800);border:2px solid var(--green-600)}
.fstep.end .num{background:var(--green-700)}
.fstep .rail::after{
  content:"";position:absolute;top:56px;bottom:-32px;left:50%;
  width:2px;background:repeating-linear-gradient(180deg, var(--green-400) 0 6px, transparent 6px 12px);
  transform:translateX(-50%);
}
.fstep:last-child .rail::after{display:none}

.fstep .body{
  background:var(--white);border:1px solid var(--light-grey-200);
  border-radius:var(--radius);padding:20px 24px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fstep:hover .body{border-color:var(--green-300);box-shadow:var(--shadow-sm)}
.fstep .actor{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey-green-dark);margin-bottom:8px;
}
.fstep .actor .sw{width:8px;height:8px;border-radius:2px;background:currentColor}
.fstep .actor.gig{color:var(--green-700)}
.fstep .actor.oper{color:var(--dark-grey)}
.fstep .t{font-weight:700;font-size:18px;line-height:1.3;color:var(--black);margin:0 0 4px}
.fstep .d{font-size:14px;color:#4a4540;line-height:1.5;margin:0}

.fstep.decision .body{
  background:var(--white);border:1.5px dashed var(--green-600);
}
.fstep.decision .t{color:var(--green-800)}
.branches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:640px){.branches{grid-template-columns:1fr}}
.branch{
  padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--green-50);border:1px solid var(--green-200);
}
.branch .lab{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-700);margin-bottom:6px;
}
.branch.no .lab{color:var(--error)}
.branch.no{background:#fdf4f4;border-color:#f5c8c8}
.branch .bd{font-size:13px;line-height:1.45;color:#3a3530}

@media (max-width:640px){
  .fstep{grid-template-columns:48px 1fr;gap:18px}
  .fstep .num{width:40px;height:40px;font-size:14px}
  .fstep .rail::after{top:40px}
}

/* ---------------------------------------------------------
   DOCUMENTAÇÃO
   --------------------------------------------------------- */
.doc-head{margin-bottom:48px;max-width:840px}  /* intro a 1 linha a largura a que o site e visto (~1440-1520px) */
.doc-head .label-title{margin-bottom:16px}
.doc-head .h2{margin-bottom:16px}
.doc-head .body-md{color:#3a3530}
.doc-list{border-top:1px solid var(--light-grey-200)}
.doc-row{
  display:grid;grid-template-columns:64px 1fr 1.4fr 40px;gap:28px;
  padding:28px 8px;border-bottom:1px solid var(--light-grey-200);
  align-items:center;
  text-decoration:none;color:inherit;
  transition:background .2s ease;
}
.doc-row:hover{background:rgba(140,198,62,.05)}
.doc-row:hover .doc-arrow{background:var(--green-500);color:var(--white);border-color:var(--green-500)}
.doc-row .num{font-weight:700;font-size:22px;color:var(--green-700)}
.doc-row .t{font-weight:700;font-size:22px;line-height:1.2}
.doc-row .d{font-size:15px;color:#4a4540;line-height:1.5}
.doc-arrow{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--light-grey-300);color:var(--black);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
.doc-arrow svg{width:14px;height:14px}
@media (max-width:800px){
  .doc-row{grid-template-columns:48px 1fr 40px;grid-auto-rows:min-content}
  .doc-row .d{grid-column:2 / span 2}
}

/* Documentacao em acordeoes (reutiliza o estilo .faq das FAQs) */
.doc-acc{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0}
.doc-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.doc-links li{margin:0}
.bank-refs{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 20px}
.bank-refs dt{font-weight:700;color:var(--black);margin:0}
.bank-refs dd{margin:0}

/* ---------------------------------------------------------
   Mobile (<=600px): heroi cabe na viewport; documentos e banco empilham
   --------------------------------------------------------- */
@media (max-width:600px){
  /* Heroi: ancora ao topo (flex-start; o texto comprido nunca corta, cresce com o conteudo). min-height:100svh = altura visivel real (small viewport, ja com o chrome do browser) para preencher o primeiro ecra sem o ultrapassar; 100vh contava a zona sob o chrome e ficava alto demais. Browsers sem svh caem no min-height:100vh da regra base. padding-top maior desce o conteudo. */
  .hero{ align-items:flex-start; min-height:100svh; padding:200px 0 72px; }
  .hero .container{ margin-top:0; }
  /* Documentos: cada item numa linha propria, alvo de toque cheio */
  .doc-links a{ display:block; }
  /* Referencias bancarias: coluna unica, rotulo por cima do valor */
  .bank-refs{ grid-template-columns:1fr; gap:2px 0; }
  .bank-refs dt{ margin-top:12px; }
  .bank-refs dt:first-of-type{ margin-top:0; }
}

/* ---------------------------------------------------------
   PLATAFORMA - mockups de browser sobrepostos
   --------------------------------------------------------- */
.plat .lede .body-lg{margin-bottom:28px}
/* Plataforma sem mockups: o texto ocupa a largura mais cheia (fica ~2 linhas) */
.plat .plat-lede{max-width:880px}
.plat .plat-lede .h2,.plat .plat-lede .body-lg{max-width:none}
.mockups{
  position:relative;aspect-ratio: 1.1 / 1;max-width:600px;margin-left:auto;
}
.browser{
  position:absolute;
  background:var(--white);border-radius:14px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;border:1px solid var(--light-grey-200);
}
.browser .chrome{
  height:32px;background:var(--light-grey-50);
  border-bottom:1px solid var(--light-grey-200);
  display:flex;align-items:center;padding:0 12px;gap:6px;
}
.browser .chrome .dot{width:10px;height:10px;border-radius:50%}
.browser .chrome .d1{background:#ff5f57}
.browser .chrome .d2{background:#febc2e}
.browser .chrome .d3{background:#28c840}
.browser .chrome .url{
  margin-left:auto;margin-right:auto;
  background:var(--white);border:1px solid var(--light-grey-200);
  border-radius:6px;padding:3px 12px;font-size:11px;color:var(--dark-grey);
  font-family:ui-monospace,Menlo,monospace;
}

.browser .screen{padding:18px;display:flex;flex-direction:column;gap:14px;min-height:320px}
.screen-top{display:flex;justify-content:space-between;align-items:center}
.screen-title{font-weight:700;font-size:14px}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--green-50);border-radius:8px;padding:10px 12px}
.kpi .lab{font-size:10px;color:var(--green-800);letter-spacing:.1em;text-transform:uppercase}
.kpi .val{font-size:18px;font-weight:700;margin-top:2px}
.chart{
  flex:1;background:linear-gradient(180deg, var(--green-50), var(--white));
  border:1px solid var(--light-grey-200);border-radius:8px;position:relative;overflow:hidden;
  min-height:140px;
}
.chart svg{width:100%;height:100%}

.browser.b1{top:0;left:0;width:78%;transform:rotate(-2deg)}
.browser.b2{bottom:0;right:0;width:62%;transform:rotate(3deg)}

/* ---------------------------------------------------------
   FAQ - acordeões
   --------------------------------------------------------- */
.faq-head{text-align:center;max-width:720px;margin:0 auto 56px}
.faq-head .label-title{margin-bottom:16px}
.faq-grid{
  display:grid;grid-template-columns:1fr;gap:16px;max-width:1040px;margin:0 auto;
  align-items:start;
}
@media (min-width:900px){.faq-grid{grid-template-columns:1fr 1fr;gap:20px}}
.faq{
  background:var(--white);border:1px solid var(--light-grey-200);
  border-radius:var(--radius);padding:24px 28px;cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq[open]{border-color:var(--green-300);box-shadow:var(--shadow-sm)}
.faq summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-weight:700;font-size:18px;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--light-grey-300);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--green-700);font-weight:600;font-size:18px;
  transition:all .2s ease;
}
.faq[open] .plus{background:var(--green-500);color:var(--white);border-color:var(--green-500);transform:rotate(45deg)}
.faq-body{padding-top:14px;color:#3a3530;font-size:15px;line-height:1.6}
.faq-body p{margin:0 0 10px}
.faq-body p:last-child{margin-bottom:0}
.faq-body a{color:var(--green-600,#638d2c);text-decoration:underline;text-underline-offset:2px}
.faq-list{margin:0 0 10px;padding-left:20px}
.faq-list li{margin:4px 0}
.faq-cta{
  margin:48px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.faq-cta p{margin:0;color:var(--dark-grey,#5a5550);font-size:15px}
.faq-cta-link{
  color:var(--green-500);font-weight:700;font-size:16px;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .2s ease;
}
.faq-cta-link:hover{opacity:.75}
.faq-placeholder{
  font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--dark-grey);
  background:var(--cream);border:1px dashed var(--light-grey-300);
  border-radius:6px;padding:10px 12px;margin-top:10px;
}

/* Documentos ainda sem ligacao publicada - marcador inerte */
.is-pending{ cursor:default; opacity:.55; pointer-events:none; }

/* Logotipo omip, s.a. em SVG no /gig (o | GIG ao lado mantem-se em texto). Alturas para bater com o tamanho anterior. */
.header .brand .brand-svg{ height:20px; width:auto; display:block; }
.footer-brand .lockup .wordmark-svg{ height:24px; width:auto; display:block; }