/* =========================================================
   KIVRA COMPANY — Landing Page
   Layout/copy: referência Figma "Landing page ajax digital"
   Cores: manual da marca UNIVERSO_VISUAL_KIVRA.ai
   ---------------------------------------------------------
   Paleta digital (RGB extraída do manual)
     #1C4EFF  azul Kivra (primário)
     #153ABF  azul médio
     #081241  azul profundo / navy
     #0D0D0D  preto
     #F2F2F2  cinza claro
   Equivalentes de impressão (Pantone, manual):
     2126 C #243CB3 · 2131 C #2B5BBF · 2768 C #011C48 · 663 C #E4E1E8
   ========================================================= */

:root{
  --kv-blue:      #1C4EFF;
  --kv-blue-600:  #153ABF;
  --kv-blue-300:  #4E7BFF;
  --kv-navy:      #081241;
  --kv-black:     #0D0D0D;
  --kv-grey:      #F2F2F2;
  --kv-white:     #FFFFFF;

  /* tons de apoio herdados da referência */
  --txt-on-dark:  #DEE6F8;
  --txt-mute:     #A8B0C4;
  --txt-dark:     #081241;

  --container: 1160px;
  --radius-btn: 4.32px;
  --radius-card: 16px;

  --ff-head: 'Sora', system-ui, sans-serif;
  --ff-body: 'Sora', system-ui, sans-serif;
  --ff-card: 'Barlow', system-ui, sans-serif;
  --ff-btn:  'DM Sans', system-ui, sans-serif;
  --ff-legal:'Montserrat', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--kv-black);
  color:var(--kv-white);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* foco de teclado visível em qualquer fundo (o azul claro contrasta tanto
   sobre o preto quanto sobre o cinza das seções claras) */
:focus-visible{
  outline:3px solid var(--kv-blue-300);
  outline-offset:3px;
  border-radius:2px;
}

.container{width:min(100% - 48px, var(--container));margin-inline:auto}
.center{text-align:center}
.nowrap{white-space:nowrap}

/* Respiro vertical calibrado seção a seção a partir dos vãos medidos no
   render do Figma — padding uniforme deixava as junções largas demais.
   O vão entre duas seções é --pb da anterior + --pt da seguinte. */
.sec{position:relative;--pt:112px;--pb:112px;padding:var(--pt) 0 var(--pb)}
.sec--black{background:var(--kv-black)}
.sec--light{background:var(--kv-grey);color:var(--txt-dark)}

/* Régua: 72px acima do eyebrow e 128px entre seções — mais enxuta que os
   ~200px da referência do Figma, por decisão do cliente. As exceções são
   intencionais: hero→clientes 72, nacional→depo 112, método→serviços 108
   (blocos que já vinham colados na referência) e quali→rodapé 88. */
.clientes {--pt:72px;  --pb:56px}    /* hero→clientes 72 · clientes→nacional 128 */
.nacional {--pt:72px;  --pb:40px}    /* nacional→depo 112 */
.depo     {--pt:72px;  --pb:56px}    /* depo→método 128 */
.metodo   {--pt:72px;  --pb:56px}    /* método→serviços 108 */
.servicos {--pt:52px;  --pb:56px}    /* serviços→portfólio 128 */
.portfolio{--pt:72px;  --pb:88px}    /* portfólio→time 128 */
.time     {--pt:40px;  --pb:88px}    /* time→operação 128 */
.operacao {--pt:40px;  --pb:56px}    /* operação→qualificações 128 */
.quali    {--pt:72px;  --pb:88px}    /* qualificações→rodapé 88 */

/* ---------- tipografia ---------- */
.eyebrow{
  font-family:var(--ff-head);
  font-weight:300;
  font-size:18px;
  letter-spacing:8.82px;
  text-align:center;
  color:var(--kv-white);
  margin:0 0 6px;
}
.eyebrow--dark{color:var(--txt-dark)}
.eyebrow--left{text-align:left}
.eyebrow--sm{font-size:15px;letter-spacing:5.5px}

.h2{
  font-family:var(--ff-head);
  font-weight:400;
  font-size:45px;
  line-height:57px;
  letter-spacing:-.01em;
  color:#000;
  margin:0 0 24px;
}
.h2 strong{font-weight:700}
.h2--light{color:var(--txt-on-dark)}
.h2--center{text-align:center;font-weight:700;max-width:760px;margin-inline:auto}
.h2__arrow{
  display:inline-block;width:47px;height:31px;margin-left:12px;
  vertical-align:middle;color:var(--kv-blue);
}

.lead{
  font-size:16px;line-height:1.72;color:#3B4252;
  max-width:492px;margin:0 0 34px;
}
.lead--light{color:var(--txt-mute)}
.lead--sm{max-width:420px}

/* ---------- botão ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:15px;
  font-family:var(--ff-btn);font-weight:700;font-size:16.34px;line-height:1;
  color:var(--kv-white);background:var(--kv-blue);
  padding:18px 34px;border:0;border-radius:var(--radius-btn);cursor:pointer;
  transition:background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.btn:hover{background:var(--kv-blue-600);transform:translateY(-2px);box-shadow:0 10px 26px rgba(28,78,255,.35)}
.btn:active{transform:translateY(0)}
.btn__arrow{width:16.34px;height:16.34px;flex:none}

/* ---------- botão circular ---------- */
.circle-btn{
  width:48px;height:48px;flex:none;display:grid;place-items:center;
  border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.08);color:var(--kv-blue-300);
  transition:background .2s ease,color .2s ease;
}
.circle-btn svg{width:24px;height:24px}
.circle-btn:hover{background:var(--kv-blue);color:#fff}
.circle-btn--light{background:rgba(8,18,65,.07);color:var(--kv-blue)}
.circle-btn--light:hover{background:var(--kv-blue);color:#fff}
.circle-btn:disabled{opacity:.35;cursor:default}
.circle-btn:disabled:hover{background:rgba(255,255,255,.08);color:var(--kv-blue-300)}
.circle-btn--light:disabled:hover{background:rgba(8,18,65,.07);color:var(--kv-blue)}
/* sem conteúdo excedente, os controles do carrossel saem de cena */
.carousel.is-static .carousel__nav,
.carousel.is-static .depo__prev,
.carousel.is-static .depo__next{display:none}

/* ---------- prova social ---------- */
.proof{display:flex;align-items:center;gap:14px;margin-top:26px}
.proof__avatars{height:40px;width:auto;flex:none}
.proof__txt{display:flex;flex-direction:column;line-height:1.25}
.proof__txt strong{font-size:13px;font-weight:700;color:#fff}
.proof__txt span{font-size:11px;color:var(--kv-blue-300)}

/* =========================================================
   HERO
   ========================================================= */
/* o bloco do hero é ancorado embaixo, não centralizado: na referência sobram
   60px entre a prova social e o fim da imagem — centralizar dobrava essa folga */
.hero{position:relative;min-height:755px;display:flex;align-items:flex-end;overflow:hidden}
.hero__bg{
  position:absolute;inset:0;
  background:#000 url('../img/hero-bg.jpg') right center/cover no-repeat;
}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#000 22%,rgba(0,0,0,.55) 48%,rgba(0,0,0,0) 72%);
}
.hero__glow{
  position:absolute;left:-338px;top:-106px;width:616px;height:605px;border-radius:50%;
  background:radial-gradient(circle, rgba(28,78,255,.55) 0%, rgba(21,58,191,.22) 45%, rgba(8,18,65,0) 70%);
  filter:blur(24px);
}
/* véu localizado atrás do título — só entra no mobile, onde a arte fica
   por baixo do texto; no desktop o texto tem a área escura à esquerda */
.hero__scrim{display:none}
.hero__inner{position:relative;padding:60px 0}
.hero__title{
  font-family:var(--ff-head);font-weight:600;font-size:40px;line-height:53px;
  max-width:520px;margin:0 0 34px;
  background-image:linear-gradient(118.05deg,#DEE6F8 43.242%,rgba(255,255,255,0) 154.6%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__text{max-width:492px;margin:0 0 42px;color:var(--txt-mute);font-size:16px;line-height:1.72}

/* =========================================================
   CLIENTES
   ========================================================= */
.clientes .h2--center{margin-bottom:112px}
.carousel{position:relative}
.carousel__track{display:flex;overflow:hidden;scroll-behavior:smooth}
.clientes__slide{flex:0 0 100%}
.clientes__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:82px 40px;align-items:center;justify-items:center;
}
.clientes__grid img{max-height:54px;width:auto;opacity:.92}
.cliente-sicoob{display:flex;align-items:center;gap:8px}
.cliente-sicoob img{max-height:34px}
.cliente-sicoob span{display:flex;flex-direction:column;align-items:center;gap:2px}
.cliente-sicoob span img:last-child{max-height:14px}
.carousel__nav{display:flex;justify-content:center;gap:8px;margin-top:56px}

/* =========================================================
   ATUAÇÃO NACIONAL
   ========================================================= */
.nacional__inner{display:grid;grid-template-columns:1fr 570px;gap:40px;align-items:center}
.nacional__col .h2{max-width:520px}
.nacional__map{
  height:540px;
  color:#2B2F3A;
  -webkit-mask:url('../img/mapa-brasil.svg') center/contain no-repeat;
  mask:url('../img/mapa-brasil.svg') center/contain no-repeat;
  background:linear-gradient(160deg,#4A5164 0%, #1F2431 100%);
}
.stats{display:flex;gap:0;list-style:none;margin:48px 0 0;padding:0}
.stats li{padding:0 34px;border-left:1px solid #C9CDD6}
.stats li:first-child{padding-left:0;border-left:0}
.stats b{display:block;font-family:var(--ff-head);font-weight:700;font-size:40px;line-height:1.1;color:#000}
.stats span{font-size:14px;color:#3B4252;display:block;max-width:110px;line-height:1.35;margin-top:8px}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.depo .h2--center{margin-bottom:40px}
.depo__carousel{
  display:flex;align-items:center;gap:22px;
  width:min(100% - 48px, 1220px);margin-inline:auto;
}
.depo__track{flex:1;gap:32px;padding:26px 4px 34px;overflow-x:auto;scrollbar-width:none}
/* cabendo tudo, os cards centralizam; transbordando, voltam ao início
   (senão o primeiro card fica cortado e inalcançável na rolagem) */
.depo__track{justify-content:safe center}
.depo__track::-webkit-scrollbar{display:none}

.card{
  position:relative;flex:0 0 302px;min-height:350px;
  background:#fff;border:1px solid #FAFAFA;border-radius:var(--radius-card);
  box-shadow:0 12px 40px rgba(0,0,0,.04);
  padding:45px 25px 30px;text-align:center;
  font-family:var(--ff-card);color:var(--txt-dark);
}
.card__quote{
  position:absolute;top:-20px;right:25px;width:40px;height:40px;
  color:var(--kv-blue);
}
.card__quote svg{width:40px;height:40px}
.card__avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 12px}
.card__name{font-family:var(--ff-card);font-weight:700;font-size:18px;margin:0}
.card__role{font-size:14px;margin:4px 0 0}
/* amarelo da referência (#FFBD39): é convenção de avaliação, não cor da marca */
.card__stars{color:#FFBD39;letter-spacing:2px;font-size:14px;margin:6px 0 14px}
.card__text{font-size:14px;line-height:1.33;margin:0 auto;max-width:224px}

.depo .center{margin-top:70px}

/* =========================================================
   MÉTODO GD
   ========================================================= */
.metodo .h2--center{margin-bottom:40px}
.venn{
  position:relative;width:980px;height:680px;
  margin-left:50%;transform:translateX(-50%);transform-origin:top center;
  font-family:var(--ff-head);
}
.venn__ring{position:absolute;left:50%;top:30px;transform:translateX(-50%);width:700px;height:620px}
.venn__logo{position:absolute;left:468px;top:313px;width:44px;height:auto}
.venn__label{
  position:absolute;font-weight:700;font-size:13px;color:#fff;text-align:center;line-height:1.4;
}
.venn__label--top{left:50%;top:0;transform:translateX(-50%)}
.venn__label--left{left:16px;top:322px}
.venn__label--right{right:16px;top:314px}
.venn__label--bottom{left:50%;bottom:6px;transform:translateX(-50%)}
.venn__item{
  position:absolute;margin:0;font-weight:700;font-size:15px;line-height:1.4;color:#fff;
}
.venn__item svg{
  display:inline-block;width:32px;height:21px;margin-left:8px;
  color:var(--kv-blue-300);vertical-align:-4px;
}
.venn__item--a{left:298px;top:252px}
.venn__item--b{left:520px;top:248px}
.venn__item--c{left:404px;top:430px}

/* =========================================================
   SERVIÇOS
   ========================================================= */
.servicos__inner{display:grid;grid-template-columns:480px 1fr;gap:80px}
.servicos__col .h2{max-width:420px}
.servicos__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:64px 44px;padding-top:8px}
.servicos__grid article img{margin-bottom:18px}
.servicos__grid h3{
  font-family:var(--ff-head);font-weight:700;font-size:22px;color:var(--txt-on-dark);margin:0 0 14px;
}
.servicos__grid p{font-size:15px;line-height:1.62;color:var(--txt-mute);margin:0}

/* =========================================================
   PORTFÓLIO
   ========================================================= */
.portfolio .h2--center{margin-bottom:80px}
.portfolio__grid{
  width:min(100% - 48px, 1300px);margin-inline:auto;
  columns:3;column-gap:16px;
}
.portfolio__item{
  margin:0 0 16px;overflow:hidden;border-radius:6px;
  break-inside:avoid;-webkit-column-break-inside:avoid;
}
.portfolio__item img{width:100%;height:auto;display:block}
.portfolio__item--wide img{aspect-ratio:4/3;object-fit:cover}
.portfolio__item--brand{background:#FDEEE6;display:grid;place-items:center;padding:56px 40px;aspect-ratio:4/3}
.portfolio__item--brand img{width:72%;height:auto;filter:brightness(0) saturate(100%) invert(22%) sepia(18%) saturate(1400%) hue-rotate(110deg)}

/* =========================================================
   TIME
   ========================================================= */
.time__inner{display:grid;grid-template-columns:1fr 480px;gap:60px;align-items:center}
.time__photos{display:flex;justify-content:center}
/* altura casada com a do bloco de texto ao lado (h2 + lead ≈ 339px), para os
   retratos começarem e terminarem na mesma régua do título */
.time__photos img{
  width:228px;height:334px;object-fit:cover;object-position:top center;
  border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
  margin-left:-34px;
}
.time__photos img:first-child{margin-left:0}
.time__col .h2{font-weight:700;margin-bottom:22px}

/* =========================================================
   OPERAÇÃO ESPECIALIZADA
   ========================================================= */
.operacao__inner{display:grid;grid-template-columns:1fr 640px;gap:60px;align-items:center}
.operacao__col .h2{max-width:420px;font-weight:700;line-height:46px;margin-bottom:22px}
.operacao__logos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:56px 40px;
  align-items:center;justify-items:center;
}
.operacao__logos img{max-height:34px;width:auto;opacity:.9}

/* =========================================================
   QUALIFICAÇÕES
   ========================================================= */
.quali .h2--center{margin-bottom:104px}
.quali__logos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  align-items:center;justify-items:center;margin-bottom:104px;
}
.quali__logos img{max-height:62px;width:auto}
.quali__stack{display:flex;flex-direction:column;align-items:center;gap:6px}
.quali__stack img:first-child{max-height:42px}
.quali__stack img:last-child{max-height:15px}

/* =========================================================
   FOOTER
   ========================================================= */
.footer__band{background:var(--kv-navy);padding:20px 0}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:32px}
.footer__logo img{height:38px;width:auto}
.footer__social{display:flex;gap:4px}
/* o ícone tem 26px, mas a área clicável vai a 44px (mínimo confortável no toque) */
.footer__social a{display:grid;place-items:center;width:44px;height:44px}
.footer__social svg{width:26px;height:26px;color:#fff;transition:color .2s ease}
.footer__social a:hover svg{color:var(--kv-blue-300)}
.footer__legal{background:var(--kv-black);padding:15px 0;text-align:center}
.footer__legal p{
  font-family:var(--ff-legal);font-size:16px;line-height:22.4px;color:#fff;margin:0;
}
.footer__legal a{
  display:inline-block;padding:4px 2px;
  text-decoration:underline;text-underline-offset:3px;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1180px){
  .nacional__inner,
  .servicos__inner,
  .time__inner,
  .operacao__inner{grid-template-columns:1fr;gap:56px}
  .nacional__map{height:420px}
  .operacao__logos,.servicos__grid{max-width:640px}
  .time__col .h2,.operacao__col .h2{max-width:none}
}

/* o diagrama tem geometria fixa: reduz por escala em telas menores */
@media (max-width:1040px){
  .venn{transform:translateX(-50%) scale(.82);margin-bottom:-122px}
}

@media (max-width:900px){
  .sec{padding:calc(var(--pt) * .62) 0 calc(var(--pb) * .62)}
  .h2{font-size:34px;line-height:44px}
  .hero__title{font-size:32px;line-height:43px}
  .eyebrow{font-size:15px;letter-spacing:6px}
  .clientes__grid{grid-template-columns:repeat(2,1fr);gap:44px 28px}
  .quali__logos{grid-template-columns:repeat(2,1fr);gap:48px}
  .operacao__logos{grid-template-columns:repeat(3,1fr);gap:40px 24px}
  .portfolio__grid{columns:2}
  .venn{transform:translateX(-50%) scale(.68);margin-bottom:-218px}
  .time__photos img{width:166px;height:243px;margin-left:-25px}
  /* com dois itens apenas, cabem lado a lado — empilhar triplicava a faixa */
  .footer__inner{gap:16px}
  .footer__band{padding:14px 0}
  .footer__logo img{height:32px}
}

@media (max-width:680px){
  /* a arte tem o astronauta à direita e o lado esquerdo vazio: no estreito da
     tela, enquadra nele e centraliza o texto por cima */
  .hero{min-height:auto;padding:0;text-align:center}
  .hero__bg{background-position:84% center}
  /* véu geral bem mais leve: quem garante a leitura é o scrim atrás do texto */
  .hero__bg::after{background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.34) 45%,rgba(0,0,0,.82) 100%)}
  .hero__scrim{
    display:block;position:absolute;inset:0;
    background:radial-gradient(ellipse 92% 40% at 50% 41%,
      rgba(0,0,0,.92) 0%, rgba(0,0,0,.8) 42%, rgba(0,0,0,.45) 68%, rgba(0,0,0,0) 88%);
  }
  .hero__inner{padding:110px 0 56px}
  .hero__title,.hero__text{margin-inline:auto}
  .proof{justify-content:center}
  .btn{width:100%;padding:18px 16px;gap:10px;font-size:15px}
  /* empilhados, os números ficam centralizados na coluna */
  .stats{flex-direction:column;align-items:center;gap:26px;text-align:center}
  .stats li{padding:0;border-left:0}
  .stats span{max-width:none}
  .servicos__grid{grid-template-columns:1fr;gap:44px}
  .portfolio__grid{columns:1}
  .depo__carousel{gap:0}
  .depo__prev,.depo__next{display:none}
  .depo__track{padding-inline:24px;scroll-snap-type:x mandatory}
  /* abaixo de ~350px o card fixo de 302px não cabia inteiro na tela */
  .card{scroll-snap-align:center;flex:0 0 min(302px, calc(100vw - 48px))}
  /* o diagrama circular não cabe no celular: vira lista na mesma ordem de leitura */
  .venn{
    position:static;width:100%;height:auto;margin:0;transform:none;
    display:flex;flex-direction:column;gap:14px;text-align:center;
  }
  .venn__ring,.venn__logo{display:none}
  .venn__label,.venn__item{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none}
  .venn__label{
    order:5;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--kv-blue-300);font-weight:700;
  }
  .venn__label--top{order:1;font-size:13px;letter-spacing:.2em}
  .venn__label--left{order:5}
  .venn__label--right{order:6}
  .venn__label--bottom{order:7}
  .venn__item{
    order:3;padding:22px 18px;border-radius:14px;font-size:16px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  }
  .venn__item--a{order:2}
  .venn__item--b{order:3}
  .venn__item--c{order:4}
  /* inline, a seta caía no fim de uma linha quebrada e desalinhava o card */
  .venn__item svg{display:block;margin:14px auto 0;vertical-align:baseline}
  .time__photos img{width:118px;height:172px;margin-left:-18px}
}

/* telas muito estreitas (iPhone SE e afins): o rótulo do CTA quebrava em duas
   linhas e os títulos ficavam com linhas curtas demais */
@media (max-width:360px){
  .btn{font-size:14px;padding:16px 12px;gap:8px}
  .hero__title{font-size:28px;line-height:38px}
  .h2{font-size:29px;line-height:38px}
  .eyebrow{font-size:13px;letter-spacing:4.5px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .carousel__track{scroll-behavior:auto}
  .btn:hover{transform:none}
}