/* ============================================================
   institucional.css — Urafiki Pay · página inicial (index.php)
   ------------------------------------------------------------
   Depende de estilos.css: usa os mesmos tokens do checkout
   (tema claro "Marfim Quente") para a apresentação e o
   pagamento parecerem o mesmo produto.
   ============================================================ */
.wrap-site{ position:relative; z-index:2; width:100%; max-width:min(74rem,94vw); margin:0 auto; padding:1.4rem 1.1rem 0; }
body{ display:block; }               /* a página institucional rola, não centra */

.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.2rem 0 1.6rem; }
.nav-links{ display:flex; align-items:center; gap:1.4rem; font-size:.9rem; }
.nav-links a{ color:var(--txt-2); font-weight:600; }
.nav-links a:hover{ color:var(--txt); }
.btn-mini{ display:inline-block; width:auto; padding:.6rem 1.1rem; font-size:.88rem; border-radius:.8rem;
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b)); color:#fff; font-family:'Space Grotesk';
  font-weight:700; box-shadow:0 8px 18px rgba(14,147,132,.22); }
.btn-mini.fantasma{ background:transparent; color:var(--txt); border:1.5px solid var(--border-forte); box-shadow:none; }
/* no telemóvel a barra de topo transbordava; ficam só o logótipo e o botão */
@media (max-width:760px){
  .nav{ padding-bottom:1rem; }
  .nav-links a:not(.btn-mini){ display:none; }
}

.heroi{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.4rem; align-items:center; padding:1.6rem 0 3.4rem; }
@media (max-width:900px){ .heroi{ grid-template-columns:1fr; gap:2rem; } }
.pilula{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-b); background:rgba(14,147,132,.10);
  border:1px solid rgba(14,147,132,.22); border-radius:100px; padding:.4rem .85rem; }
h1{ font-family:'Space Grotesk'; font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.1; margin:1rem 0 .9rem; letter-spacing:-.02em; }
h1 em{ font-style:normal; color:var(--accent-a); }
.chamada{ font-size:1.05rem; line-height:1.65; color:var(--txt-2); max-width:34rem; }
.accoes{ display:flex; gap:.7rem; flex-wrap:wrap; margin:1.6rem 0 1rem; }
.accoes .btn-mini{ padding:.85rem 1.4rem; font-size:.95rem; }
.micro{ font-size:.8rem; color:var(--txt-3); }

/* cartão de demonstração do checkout, dentro do heroi */
.demo{ position:relative; }
.demo .glass{ padding:1.25rem; }
.demo-etiqueta{ position:absolute; top:-.8rem; left:1.2rem; z-index:3; font-size:.66rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; background:var(--surface); border:1px solid var(--border);
  color:var(--txt-2); border-radius:100px; padding:.3rem .7rem; }
.demo .tiles{ grid-template-columns:repeat(5,1fr); gap:.4rem; margin:.8rem 0 .9rem; }
.demo .tile{ padding:.55rem .2rem; }
.demo .tile .ic{ width:2rem; height:2rem; }
.demo .tile .nm{ font-size:.62rem; }
.demo .btn{ padding:.75rem; font-size:.9rem; }

/* faixa de canais */
.canais{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  padding:1.5rem 1.2rem; background:var(--surface); border:1px solid var(--border);
  border-radius:1.35rem; box-shadow:var(--sombra); }
.canais img{ height:2.4rem; width:auto; max-width:7rem; object-fit:contain; border-radius:.5rem; }
.canais .chip{ display:grid; place-items:center; height:3.4rem; min-width:5rem; padding:0 .8rem;
  background:#fff; border:1px solid var(--border); border-radius:.9rem; }
.canais .rot{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-2); width:100%; text-align:center; margin-bottom:-.4rem; }

/* secções */
.seccao{ padding:3.4rem 0 0; }
.seccao > h2{ font-size:clamp(1.5rem,2.2vw,2rem); letter-spacing:-.01em; }
.seccao > .sub{ color:var(--txt-2); margin:.6rem 0 1.8rem; max-width:42rem; line-height:1.6; }
.cartoes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:860px){ .cartoes{ grid-template-columns:1fr; } }
.cartao{ background:var(--surface); border:1px solid var(--border); border-radius:1.2rem; padding:1.5rem; box-shadow:var(--sombra); }
.cartao h3{ font-size:1.05rem; margin-bottom:.5rem; }
.cartao h3 .em{ margin-right:.45rem; }
.cartao p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--txt-2); }
.destaque-preco{ border-color:var(--accent-a); box-shadow:0 10px 26px rgba(14,147,132,.14); }
.destaque-preco .kicker{ display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-a); margin-bottom:.6rem; }
.destaque-preco h3{ margin-bottom:.7rem; }
.destaque-preco p{ margin-bottom:.8rem; }
.destaque-preco .nota-preco{ font-size:.85rem; color:var(--txt-3); border-top:1px dashed var(--border);
  padding-top:.8rem; margin-bottom:1rem; }
.icone{ width:2.6rem; height:2.6rem; border-radius:.8rem; display:grid; place-items:center; font-size:1.2rem;
  background:rgba(14,147,132,.10); border:1px solid rgba(14,147,132,.20); margin-bottom:.9rem; }

/* duas caixas: cliente vs empresa */
.duas{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:860px){ .duas{ grid-template-columns:1fr; } }
.caixa-cliente{ background:var(--surface-2); border:1px solid var(--border); border-radius:1.2rem; padding:1.5rem; }
.caixa-empresa{ background:var(--surface); border:1.5px solid var(--accent-a); border-radius:1.2rem; padding:1.5rem;
  box-shadow:0 10px 26px rgba(14,147,132,.14); }
.caixa-cliente h3, .caixa-empresa h3{ font-size:1.05rem; margin-bottom:.6rem; }
.caixa-cliente p, .caixa-empresa p{ font-size:.92rem; line-height:1.65; color:var(--txt-2); margin:0 0 .8rem; }

/* passos */
.passos{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; counter-reset:passo; }
@media (max-width:900px){ .passos{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .passos{ grid-template-columns:1fr; } }
.passo{ background:var(--surface); border:1px solid var(--border); border-radius:1.2rem; padding:1.3rem; box-shadow:var(--sombra); }
.passo::before{ counter-increment:passo; content:counter(passo); display:grid; place-items:center;
  width:2rem; height:2rem; border-radius:50%; background:var(--accent-a); color:#fff;
  font-family:'Space Grotesk'; font-weight:700; font-size:.95rem; margin-bottom:.8rem; }
.passo h3{ font-size:.98rem; margin-bottom:.4rem; }
.passo p{ margin:0; font-size:.88rem; line-height:1.6; color:var(--txt-2); }

/* requisitos */
.lista{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.lista li{ position:relative; padding-left:1.5rem; font-size:.95rem; color:var(--txt-2); line-height:1.55; }
.lista li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--ok); font-weight:700; }
.lista li b{ color:var(--txt); }

/* CTA final */
.cta-final{ margin:3.6rem 0 2.4rem; background:linear-gradient(120deg,#0E9384,#0B7C6E); color:#fff;
  border-radius:1.5rem; padding:2.6rem 2rem; text-align:center; box-shadow:0 18px 40px rgba(14,147,132,.28); }
.cta-final h2{ font-size:clamp(1.5rem,2.4vw,2.1rem); margin-bottom:.7rem; }
.cta-final p{ color:rgba(255,255,255,.86); max-width:36rem; margin:0 auto 1.6rem; line-height:1.6; }
.cta-final .btn-mini{ background:#fff; color:#0B7C6E; box-shadow:0 10px 22px rgba(0,0,0,.14); padding:.9rem 1.6rem; }
.cta-final .btn-mini.fantasma{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); }