/* ============================================================
   WJR FIXER — pages/solucoes.css
   Estilos exclusivos da página Soluções (solucoes.html).
   ============================================================ */

/* ── Shared tokens ───────────────────────────────────────── */
/* Soluções usa a vinheta um pouco mais suave (.07 em vez de .08) */
:root{
  --wjr-veil:
    radial-gradient(ellipse 120% 90% at 72% 15%, rgba(245,239,232,.07), transparent 52%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(8,8,8,.38), transparent 58%),
    linear-gradient(165deg, rgba(8,8,8,.22) 0%, transparent 40%, transparent 60%, rgba(8,8,8,.28) 100%);
}

/* ── PAGE HERO ───────────────────────────────────────────── */
.page-hero{
  padding-top:clamp(8rem,16vw,12rem);
  padding-bottom:clamp(3.5rem,7vw,5.5rem);
  position:relative; overflow:hidden; background:var(--ink);
}
.page-hero-bg{
  position:absolute; inset:-1%; z-index:0;
  background:url("../../img/bg-fundo-4.jpg") center/cover no-repeat;
}
.page-hero-veil{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg, rgba(12,12,12,.88) 0%, rgba(12,12,12,.5) 45%, rgba(12,12,12,.82) 100%),
    linear-gradient(180deg, rgba(12,12,12,.45) 0%, transparent 35%, rgba(12,12,12,.55) 100%);
}
.page-hero-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.12; mix-blend-mode:soft-light;
  background-image:var(--wjr-grain); background-size:180px 180px;
}
.page-hero-wjf{
  position:absolute; right:clamp(8rem,18vw,15rem); top:50%;
  transform:translateY(-50%);
  width:clamp(210px,20vw,260px); height:auto;
  opacity:1; z-index:1; pointer-events:none;
}
.page-hero-symbol{
  position:absolute; left:var(--gut); bottom:clamp(1.5rem,3vw,2.2rem);
  width:clamp(22px,2.2vw,32px); height:auto;
  opacity:.28; z-index:2; pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .lead{ max-width:52ch; margin-top:1.8rem; color:var(--off-70); font-size:clamp(.9rem,1.1vw,1rem); font-weight:300; }
.page-hero .lead + .lead{ margin-top:1.25rem; }

/* Título hero com pesos misturados */
.sol-title{
  font-size:clamp(1.95rem,3.7vw,3.25rem); line-height:1.2;
  letter-spacing:-.022em; margin-top:1.6rem;
}
.sol-title span{ display:block; }
.sol-title .a{ font-weight:300; color:var(--off-90); }
.sol-title .b{ font-weight:800; color:var(--sand); }
.sol-title .c{ font-weight:300; color:var(--off-55); }

/* ── STICKY SUBNAV ───────────────────────────────────────── */
.subnav{
  position:sticky; top:0; z-index:500; border-block:1px solid var(--line);
  background:rgba(18,18,18,.82); backdrop-filter:blur(14px) saturate(1.2);
}
.subnav-in{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none;
}
.subnav-in::-webkit-scrollbar{ display:none; }
.subnav a{
  padding:1rem 1.1rem; font-size:.84rem; font-weight:500;
  color:var(--off-55); white-space:nowrap; position:relative;
  transition:color .3s; display:flex; align-items:center; gap:.55rem;
}
.subnav a .d{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.45; flex:none; }
.subnav a:hover{ color:var(--off); }
.subnav a.active{ color:var(--off); }
.subnav a.active .d{ opacity:1; }
.subnav a.active::after{ content:""; position:absolute; left:1.1rem; right:1.1rem; bottom:0; height:2px; background:var(--ac); }

/* ── SOLUTION BLOCKS ─────────────────────────────────────── */
.solb{
  --acc: var(--sand);
  padding-block: 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 60px;
  position: relative; overflow: hidden;
}

/* Accent glow on text side */
.solb-aura{
  position:absolute; top:0; left:0; width:50%; height:100%; z-index:0;
  background:radial-gradient(ellipse 80% 60% at 20% 40%, color-mix(in srgb,var(--acc) 14%, transparent), transparent 70%);
  opacity:.3; pointer-events:none;
}
.solb-body.rev ~ .solb-aura,
.solb-body.rev + .solb-aura{ left:auto; right:0; }

/* Full-bleed split grid */
.solb-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:clamp(320px,40vh,560px);
  align-items:stretch;
}

/* Photo on left for .rev */
.solb-body.rev .solb-content{ order:2; }
.solb-body.rev .solb-photo  { order:1; }

/* Text column */
.solb-content{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,4vw,3.5rem)
          clamp(2rem,4vw,4rem)
          clamp(2rem,4vw,3.5rem)
          max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  position:relative; z-index:1;
}
.solb-body.rev .solb-content{
  padding-top: clamp(2rem,4vw,3.5rem);
  padding-bottom: clamp(2rem,4vw,3.5rem);
  padding-left: clamp(2rem,4vw,4rem);
  padding-right: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
}

/* Eyebrow: icon + label */
.solb-eyebrow{
  display:flex; align-items:center; gap:.75rem; margin-bottom:1.2rem;
}
.solb-k{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--acc);
}
.solb-icon-sm{
  height:16px; width:auto; max-width:26px;
  object-fit:contain; opacity:.85;
}

/* Section h2 — mesmo tamanho do título hero */
.solb-content h2{
  font-size:clamp(1.95rem,3.7vw,3.25rem); font-weight:700;
  letter-spacing:-.022em; line-height:1.1;
  margin-bottom:2rem; color:var(--off);
}

/* Q&A blocks */
.qa + .qa{ margin-top:1.75rem; }
.qa h4{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--off-40); font-weight:600; margin-bottom:.7rem;
}
.qa p{ color:var(--off-70); font-weight:300; font-size:1.02rem; max-width:44ch; line-height:1.7; }

/* Texto justificado nas soluções 01 a 03 (Gênesis Club segue alinhado à esquerda).
   hyphens:auto é essencial aqui: numa coluna de 44ch a justificação sem hifenização
   abre "rios" de espaço em branco entre as palavras. Depende do lang="pt-BR". */
#advisory .qa p,
#palestras .qa p,
#consultoria .qa p,
#consultoria .frentes p{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto; hyphens:auto;
}
/* No celular a coluna cai para ~34 caracteres por linha e a justificação abre
   vãos enormes entre as palavras (o Chrome não hifeniza pt-BR). Abaixo de 560px
   volta ao alinhamento à esquerda. Para justificar em toda tela, remova este bloco. */
@media(max-width:560px){
  #advisory .qa p,
  #palestras .qa p,
  #consultoria .qa p,
  #consultoria .frentes p{ text-align:left; }
}

/* Manifesto quote */
.solb-manifesto{
  font-size:clamp(.9rem,1.1vw,.98rem); font-style:italic; font-weight:300;
  color:var(--off-55); padding-left:1.1rem; margin-top:1.8rem;
  line-height:1.65; max-width:42ch; position:relative;
}
.solb-manifesto::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--acc), color-mix(in srgb,var(--acc) 30%,transparent));
}

/* List card — now inside text column */
.list-card{
  background:var(--ink-1); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1.4rem,2.4vw,1.8rem);
  margin-top:1.8rem;
}
.list-card h4{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acc); font-weight:600; margin-bottom:1.1rem;
}
.checklist{ list-style:none; }

/* Frentes numeradas: titulo + descricao (o checklist e' de itens de uma linha) */
.frentes{ list-style:none; }
.frentes li{
  display:grid; grid-template-columns:auto 1fr; gap:.15rem .9rem;
  padding:1.05rem 0; border-top:1px solid var(--line-2);
}
.frentes li:first-child{ border-top:0; padding-top:0; }
.frentes .n{
  grid-row:1 / span 2; align-self:start;
  width:27px; height:27px; border-radius:50%;
  display:grid; place-items:center; margin-top:1px;
  border:1px solid var(--acc); color:var(--acc);
  font-size:.72rem; font-weight:600; font-variant-numeric:tabular-nums;
}
.frentes b{ color:var(--off); font-weight:600; font-size:1rem; line-height:1.4; }
.frentes p{
  color:var(--off-70); font-weight:300; font-size:.94rem; line-height:1.55;
  margin-top:.35rem;
}
.checklist li{
  display:flex; gap:.85rem; align-items:flex-start; padding:.65rem 0;
  border-top:1px solid var(--line-2); font-weight:300; color:var(--off-70);
  font-size:.96rem; line-height:1.55;
}
.checklist li:first-child{ border-top:0; }
.checklist li::before{
  content:""; width:17px; height:17px; flex:none; margin-top:2px; border-radius:50%;
  background:var(--acc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* CTA */
.solb-content .btn{ margin-top:2rem; width:fit-content; }
.solb-content .btn-primary{ background:var(--acc); color:var(--ink); border-color:var(--acc); }
.solb-content .btn-primary:hover{ background:var(--off); border-color:var(--off); }

/* Photo column — full height */
.solb-photo{
  position:relative; overflow:hidden;
}
.solb-photo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 35%;
  filter:saturate(.88) brightness(.88) contrast(1.08);
  transition:transform 1s var(--ease);
  -webkit-mask-image:linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.12) 10%,
    rgba(0,0,0,.45) 24%,
    rgba(0,0,0,.82) 38%,
    #000 52%,
    #000 100%
  );
  mask-image:linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.12) 10%,
    rgba(0,0,0,.45) 24%,
    rgba(0,0,0,.82) 38%,
    #000 52%,
    #000 100%
  );
}
.solb-body.rev .solb-photo img{
  -webkit-mask-image:linear-gradient(to left,
    transparent 0%,
    rgba(0,0,0,.12) 10%,
    rgba(0,0,0,.45) 24%,
    rgba(0,0,0,.82) 38%,
    #000 52%,
    #000 100%
  );
  mask-image:linear-gradient(to left,
    transparent 0%,
    rgba(0,0,0,.12) 10%,
    rgba(0,0,0,.45) 24%,
    rgba(0,0,0,.82) 38%,
    #000 52%,
    #000 100%
  );
}
.solb:hover .solb-photo img{ transform:scale(1.04); }

/* Faixa full-height — dissolve o recorte inteiro no lado do texto */
.solb-photo::before{
  content:""; position:absolute; top:0; bottom:0; left:0; z-index:2;
  width:min(58%,480px); pointer-events:none;
  background:
    radial-gradient(ellipse 130% 95% at 0% 100%,
      var(--ink) 0%,
      rgba(23,23,23,.9) 26%,
      rgba(23,23,23,.45) 48%,
      transparent 76%
    ),
    radial-gradient(ellipse 95% 70% at 0% 0%,
      rgba(23,23,23,.72) 0%,
      rgba(23,23,23,.28) 34%,
      transparent 62%
    ),
    linear-gradient(to right,
      var(--ink) 0%,
      rgba(23,23,23,.96) 12%,
      rgba(23,23,23,.74) 26%,
      rgba(23,23,23,.4) 44%,
      rgba(23,23,23,.12) 58%,
      transparent 100%
    );
}
.solb-body.rev .solb-photo::before{
  left:auto; right:0;
  background:
    radial-gradient(ellipse 130% 95% at 100% 100%,
      var(--ink) 0%,
      rgba(23,23,23,.9) 26%,
      rgba(23,23,23,.45) 48%,
      transparent 76%
    ),
    radial-gradient(ellipse 95% 70% at 100% 0%,
      rgba(23,23,23,.72) 0%,
      rgba(23,23,23,.28) 34%,
      transparent 62%
    ),
    linear-gradient(to left,
      var(--ink) 0%,
      rgba(23,23,23,.96) 12%,
      rgba(23,23,23,.74) 26%,
      rgba(23,23,23,.4) 44%,
      rgba(23,23,23,.12) 58%,
      transparent 100%
    );
}
/* Vinheta leve — base da foto um pouco mais suave que o topo */
.solb-photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to left, rgba(23,23,23,.22) 0%, transparent 16%),
    linear-gradient(180deg,
      rgba(23,23,23,.1) 0%,
      transparent 9%,
      transparent 84%,
      rgba(23,23,23,.28) 100%
    );
}
.solb-body.rev .solb-photo::after{
  background:
    linear-gradient(to right, rgba(23,23,23,.22) 0%, transparent 16%),
    linear-gradient(180deg,
      rgba(23,23,23,.1) 0%,
      transparent 9%,
      transparent 84%,
      rgba(23,23,23,.28) 100%
    );
}

/* Fundos de marca por seção */
#advisory::before{
  content:""; position:absolute; inset:-1%; z-index:0;
  background:url("../../img/bg-fundo-4.jpg") center/cover no-repeat;
  opacity:.08;
}
#palestras::before{
  content:""; position:absolute; inset:-1%; z-index:0;
  background:url("../../img/bg-fundo-1.jpg") center/cover no-repeat;
  opacity:.10;
}
#consultoria::before{
  content:""; position:absolute; inset:-1%; z-index:0;
  background:url("../../img/bg-fundo-2.jpg") center/cover no-repeat;
  opacity:.08;
}
#genesis{
  --acc:#cab196;
  --genesis-text:#f5f3f0;
  --genesis-muted:rgba(235,231,223,.58);
  border-bottom:none;
  padding-block:0;
}
#genesis .solb-aura{ display:none; }

/* Bloco full-bleed — mesmo gradiente do card da home */
.genesis-full{
  position:relative; overflow:hidden;
  min-height:clamp(680px,88vh,960px);
  min-height:clamp(680px,88dvh,960px);
  display:flex; align-items:center;
}
.genesis-full__bg{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,
    #b4c5cc 0%,
    #9aabb2 28%,
    #6d848c 48%,
    #4d636b 65%,
    #243038 82%,
    #080c0e 100%
  );
}
.genesis-full__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 40% at 50% 12%, rgba(180,197,204,.18), transparent 50%);
  pointer-events:none;
}
.genesis-full__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, transparent 42%, rgba(8,12,14,.42) 72%, rgba(8,12,14,.88) 100%);
}
.genesis-full__mark{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2rem,5vw,3rem);
}
.genesis-full__mark img{
  width:min(92%,760px); height:auto; display:block;
  opacity:.13; filter:blur(.5px);
}
.genesis-full__in{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(5rem,11vw,8.5rem) var(--gut);
}
.genesis-full .solb-eyebrow{ margin-bottom:clamp(1.2rem,2.5vw,1.75rem); }
.genesis-full .solb-k{
  color:var(--genesis-text);
  -webkit-text-stroke:0;
  text-shadow:0 2px 16px rgba(8,12,14,.35);
}
.genesis-full .solb-icon-sm{
  opacity:1;
  filter:drop-shadow(0 2px 8px rgba(8,12,14,.28));
}
/*
  Duas colunas de texto ("O que é" | "O que você encontra"), alinhadas pelo
  topo — e é o `align-items:start` que garante o alinhamento dos dois
  rótulos. Com `stretch` (o padrão) as colunas esticam e o rótulo da direita
  desce junto com a lista mais alta.
*/
.genesis-full__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem); align-items:start;
  margin-top:clamp(2rem,4vw,3rem);
}
.genesis-full__head h2{
  font-size:clamp(2.2rem,4.8vw,3.6rem); font-weight:700;
  letter-spacing:-.025em; line-height:1.05;
  color:var(--genesis-text);
  text-shadow:0 2px 20px rgba(8,12,14,.35);
  margin-bottom:1rem;
}
.genesis-full__tagline{
  font-size:clamp(1.05rem,1.55vw,1.25rem); font-weight:300;
  line-height:1.55; color:var(--genesis-muted);
  max-width:34ch; margin-bottom:1.5rem;
}
.genesis-full__lead{
  font-size:clamp(.98rem,1.2vw,1.05rem); font-weight:300;
  line-height:1.65; color:rgba(235,231,223,.72);
  max-width:42ch;
}
/*
  Os tres periodos sao paragrafos separados, nao <br> dentro de um <p>.
  O espaco entre eles vive aqui — sem margem no ultimo, para o pe da coluna
  da esquerda nao criar um degrau em relacao a coluna da direita.
*/
.genesis-full__lead + .genesis-full__lead{ margin-top:1rem; }
.genesis-full__label{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acc); font-weight:600; margin-bottom:.65rem;
  /*
    Os dois rotulos desta secao tem o MESMO tamanho — .68rem, medido em
    10.88px nos dois. O que fazia "O QUE VOCE ENCONTRA" parecer menor era
    contraste: a marca d'agua "GENESIS CLUB" passa atras das colunas, e o
    traco grosso das letras dela cai justamente sob o rotulo da direita.
    A sombra iguala a leitura dos dois, e e a mesma que o h2 e o .solb-k
    desta secao ja usam. Nao troque isto por um font-size diferente: ai
    eles ficariam de fato desiguais.
  */
  text-shadow:0 2px 12px rgba(8,12,14,.55);
}
.genesis-full__label + .genesis-full__list{ margin-top:0; }
.genesis-full__list{
  list-style:none; display:flex; flex-direction:column; gap:.65rem;
  max-width:44ch;
}
/*
  O item da lista usa EXATAMENTE a mesma tipografia do `.genesis-full__lead`
  da coluna ao lado — tamanho, entrelinha e cor. Antes divergia nos tres
  (.95rem contra clamp(.98rem,1.2vw,1.05rem), 1.55 contra 1.65, .68 contra
  .72), e as tres diferencas empurravam para o mesmo lado: o corpo da
  direita lia menor que o da esquerda. As duas colunas sao o mesmo nivel de
  informacao e precisam pesar igual. Mexeu numa, mexa na outra.
*/
.genesis-full__list li{
  display:flex; gap:.75rem; align-items:flex-start;
  font-size:clamp(.98rem,1.2vw,1.05rem); font-weight:300; line-height:1.65;
  color:rgba(235,231,223,.72);
}
.genesis-full__list li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--acc); flex:none; margin-top:.55em;
}

/* Ação, sob as duas colunas */
.genesis-full__acao{
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(.9rem,2vw,1.5rem);
}
.genesis-full__acao .btn-primary{ background:var(--acc); color:#080c0e; border-color:var(--acc); }
.genesis-full__acao .btn-primary:hover{ background:var(--genesis-text); border-color:var(--genesis-text); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:860px){
  .solb-body{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .solb-body.rev .solb-content{ order:1; }
  .solb-body.rev .solb-photo  { order:2; }
  .solb-content{
    padding: clamp(3rem,8vw,5rem) var(--gut);
  }
  .solb-photo{
    height:clamp(280px,56vw,420px);
    position:relative;
  }
  .solb-photo img{
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.12) 10%,
      rgba(0,0,0,.5) 24%,
      rgba(0,0,0,.85) 38%,
      #000 52%,
      #000 100%
    );
    mask-image:linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.12) 10%,
      rgba(0,0,0,.5) 24%,
      rgba(0,0,0,.85) 38%,
      #000 52%,
      #000 100%
    );
  }
  .solb-photo::before{
    top:0; left:0; right:0; bottom:auto;
    width:100%; height:min(56%,320px);
    background:
      radial-gradient(ellipse 120% 85% at 50% 0%,
        var(--ink) 0%,
        rgba(23,23,23,.82) 30%,
        rgba(23,23,23,.35) 52%,
        transparent 78%
      ),
      linear-gradient(180deg,
        var(--ink) 0%,
        rgba(23,23,23,.96) 12%,
        rgba(23,23,23,.72) 28%,
        rgba(23,23,23,.38) 46%,
        transparent 100%
      );
  }
  .solb-body.rev .solb-photo::before{
    left:0; right:0;
    background:
      radial-gradient(ellipse 120% 85% at 50% 0%,
        var(--ink) 0%,
        rgba(23,23,23,.82) 30%,
        rgba(23,23,23,.35) 52%,
        transparent 78%
      ),
      linear-gradient(180deg,
        var(--ink) 0%,
        rgba(23,23,23,.96) 12%,
        rgba(23,23,23,.72) 28%,
        rgba(23,23,23,.38) 46%,
        transparent 100%
      );
  }
  .solb-photo::after,
  .solb-body.rev .solb-photo::after{
    background:linear-gradient(180deg,
      rgba(23,23,23,.1) 0%,
      transparent 10%,
      transparent 82%,
      rgba(23,23,23,.24) 100%
    );
  }
  .page-hero-wjf{ display:none; }
  .genesis-full__grid{ grid-template-columns:1fr; }
  .genesis-full__acao{ flex-direction:column; align-items:stretch; }
  .genesis-full__acao .btn{ justify-content:center; }
  .genesis-full{ min-height:clamp(560px,75vh,820px); }
  .genesis-full__in{ padding-block:clamp(4rem,10vw,6rem); }
}
@media(max-width:560px){
  .page-hero-symbol{ display:none; }
}