/* =========================================================
   PrecNet — LP Parceiros: os elementos da apresentação
   "PrecNet + Advogados: uma parceria que gera valor".

   Ladrilhos diagonais (slides 1 e 8), colunas em escada e faixa de destaque
   (slide 5), propósitos em degradê (slide 3) e a escada de pilares (slide 6)
   — recriados em CSS/SVG sobre o design system escuro das LPs credor e
   antecipe — mais o painel da EC 136 e o quadro "Esperar x Antecipar" da
   secao "Para o seu cliente". Usa os tokens de styles.css.

   Contraste, medido (WCAG 2.1): texto branco só sobre verde até
   --green-500 (#3D853B, 4,55:1). Sobre --green-400 (#50A250) e tons mais
   claros, o texto é --on-green (#06210A, 5,4:1 ou mais).
   ========================================================= */

:root{
  --green-50:  #D9EDD9;
  --on-green:  #06210A;
  --on-dark-soft: #DCEBDC;
}

/* ---------- Ladrilhos (slides 1 e 8) ---------- */
.tiles{
  position:absolute; z-index:0; pointer-events:none;
  height:auto; display:block;
}
.tiles .lt1{ fill:var(--green-600); }
.tiles .lt2{ fill:var(--green-500); }
.tiles .lt3{ fill:var(--green-400); }
.tiles .lt4{ fill:var(--green-200); }

.hero-parceiro .tiles-hero{
  top:0; right:0; width:min(50%,720px);
  opacity:.5;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 50%);
  mask-image:linear-gradient(to right, transparent, #000 50%);
}

.cta .tiles-cta{
  top:0; left:0; width:min(15%,200px);
  opacity:.4;
  -webkit-mask-image:linear-gradient(to left, transparent, #000 50%);
  mask-image:linear-gradient(to left, transparent, #000 50%);
}

/* ---------- Hero ---------- */
.hero-parceiro h1{ max-width:17ch; }
.h1-marca{ display:block; font-weight:700; color:var(--white); }

/* ---------- Formulário: telefone e e-mail lado a lado ---------- */
.campo-duplo{
  display:grid; gap:0 14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.form-sucesso:focus{ outline:none; }

.em-breve{
  margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.22);
}
.selo-em-breve{
  display:inline-block; margin-right:6px; padding:3px 12px 3px 9px;
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:var(--green-100); color:var(--on-green);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);
  vertical-align:1px;
}

/* ---------- Colunas em escada: vantagens (slide 5) ----------
   Grid com altura igual por linha (stretch) e margin-top crescente: os topos
   descem em degraus e as bases ficam alinhadas, como no slide. Tres colunas:
   a quarta ("Mais fidelizacao, menos pressao") virou a faixa .destaque. */
.stair{
  display:grid; gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.stair-col{
  --c:30px;
  padding:32px 28px 30px;
  clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c));
}
.stair-col:nth-child(1){ background:var(--green-900); }
.stair-col:nth-child(2){ background:var(--green-600); margin-top:40px; }
.stair-col:nth-child(3){ background:var(--green-400); margin-top:80px; }

.stair-col h3{ font-size:1.12rem; margin-bottom:12px; }
.stair-col p{ font-size:.93rem; }
.stair-col p:last-child{ margin-bottom:0; }
.stair-col:nth-child(-n+2) h3{ color:var(--white); }
.stair-col:nth-child(-n+2) p{ color:var(--on-dark-soft); }
.stair-col:nth-child(-n+2) p strong{ color:var(--white); }
.stair-col:nth-child(n+3) h3,
.stair-col:nth-child(n+3) p,
.stair-col:nth-child(n+3) p strong{ color:var(--on-green); }
.stair-col:nth-child(3) .em-breve{ border-top-color:rgba(6,33,10,.25); }
.stair-col:nth-child(3) .selo-em-breve{ background:var(--on-green); color:var(--green-100); }

/* ---------- Para o seu cliente: EC nº 136/2025 ----------
   O tema que antes era uma linha numa faixa, agora em destaque: painel verde
   com as duas mudancas e, abaixo, o quadro "Esperar x Antecipar". */
.ec136{
  --c:24px;
  position:relative;
  padding:clamp(24px,3.5vw,38px) clamp(22px,3.5vw,40px);
  background:linear-gradient(135deg, var(--green-800) 0%, var(--green-900) 60%, #062F06 100%);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  margin-bottom:clamp(22px,3vw,32px);
}
.ec136-selo{
  display:inline-block; margin:0 0 18px; padding:5px 16px 5px 12px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:var(--green-100); color:var(--on-green);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);
}
.ec136-itens{
  display:grid; gap:18px clamp(24px,4vw,48px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.ec136-item h3{ font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--white); margin-bottom:8px; }
.ec136-item p{ margin:0; color:var(--on-dark-soft); font-size:.97rem; }
.ec136-item p strong{ color:var(--green-100); }

.comparativo-bloco{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.comparativo{
  width:100%;
  border-collapse:separate; border-spacing:0 8px;
  font-size:.94rem; line-height:1.5;
}
/* A legenda nomeia a tabela para leitor de tela; na tela, o cabecalho (e, no
   celular, o rotulo de cada celula) ja diz o mesmo. Visivel, ela espremia
   numa coluna estreita quando a tabela vira cartoes. */
.comparativo caption{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.comparativo th,
.comparativo td{ padding:16px 20px; text-align:left; vertical-align:top; }
.comparativo thead th{
  padding-block:10px;
  font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim);
}
.comparativo thead th.comp-precnet{ background:var(--green-600); color:var(--white); }
.comparativo tbody th{
  width:22%;
  font-weight:600; color:var(--white);
  background:var(--surface);
  border-left:3px solid var(--green-400);
}
.comparativo tbody td{ background:var(--surface); color:var(--text-soft); width:39%; }
.comparativo tbody td.comp-precnet{ background:var(--green-900); color:var(--text); }
.comparativo tbody td.comp-precnet strong{ color:var(--green-100); }
.comparativo tbody td.comp-precnet a{
  color:var(--green-100); text-decoration:underline; text-underline-offset:3px;
  font-size:.86rem; white-space:nowrap;
}
.comparativo-nota{ margin:0; font-size:.86rem; color:var(--text-dim); }

/* ---------- Quem somos + propósitos (slides 2 e 3) ---------- */
.quem-somos{
  display:grid; gap:clamp(32px,5vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:start;
}
.quem-somos-texto p{ max-width:60ch; }
.quem-somos-texto p:last-child{ margin-bottom:0; }

.purpose-titulo{
  margin:0 0 14px;
  font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-200);
}
.purpose-grid{ display:grid; gap:12px; }
/* Canto chanfrado no alto à direita, como os cartões do slide 3. */
.purpose{
  --c:26px;
  padding:24px 28px;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);
}
.purpose:nth-child(1){ background:var(--green-900); }
.purpose:nth-child(2){ background:var(--green-600); }
.purpose:nth-child(3){ background:var(--green-500); }
.purpose p{ margin:0; font-size:.98rem; color:var(--on-dark-soft); }
.purpose:nth-child(3) p{ color:var(--white); }
.purpose p strong{ color:var(--white); }

/* ---------- Pilares: escada de barras (slide 6) ---------- */
.pilares-inner{
  display:grid; gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);
  align-items:start;
}
.pilares-head .h2-lg{ margin:0; }

.pillars{ display:grid; }
.pillars li{
  --c:14px;
  display:flex; align-items:center; gap:18px;
  min-height:66px;
  padding:14px 26px 14px 24px;
  font-size:clamp(1rem,1.4vw,1.14rem); font-weight:500; line-height:1.4;
  clip-path:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c));
}
.pillar-num{
  flex:none; min-width:1.9em;
  font-size:.78rem; font-weight:700; letter-spacing:.1em;
}
.pillars li:nth-child(1){ background:var(--green-800); color:var(--white); }
.pillars li:nth-child(2){ background:var(--green-600); color:var(--white); }
.pillars li:nth-child(3){ background:var(--green-500); color:var(--white); }
.pillars li:nth-child(4){ background:var(--green-400); color:var(--on-green); }
.pillars li:nth-child(5){ background:var(--green-200); color:var(--on-green); }
.pillars li:nth-child(6){ background:var(--green-100); color:var(--on-green); }

/* ---------- Faixa de destaque: "Mais fidelização, menos pressão" (slide 5) ----------
   Uma frase, e nao um card: e o argumento que o advogado leva para o proprio
   negocio. Verde-profundo como a primeira coluna do slide, tipografia grande
   e os ladrilhos saindo pela direita. */
.destaque{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--green-900) 0%, #0A3B0A 60%, #062F06 100%);
  border-block:1px solid rgba(255,255,255,.07);
  padding-block:clamp(44px,6vw,84px);
}
.destaque .tiles-destaque{
  top:0; right:0; width:min(30%,380px);
  opacity:.35;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 60%);
  mask-image:linear-gradient(to right, transparent, #000 60%);
}
/* mesma margem esquerda das outras secoes (.wrap); a medida fica nos textos */
.destaque-inner{ position:relative; z-index:1; }
.destaque-eyebrow{ color:var(--green-100); }
.destaque-eyebrow .tag-mark{ background:var(--green-400); }
.destaque-frase{
  margin:0 0 20px; max-width:26ch;
  font-size:clamp(1.6rem,3.6vw,2.7rem); font-weight:500; line-height:1.22;
  color:var(--white);
}
.destaque-frase em{ font-style:normal; font-weight:700; color:var(--green-100); }
.destaque-apoio{
  max-width:62ch; margin:0 0 24px;
  font-size:clamp(1rem,1.3vw,1.1rem); color:var(--on-dark-soft);
}
.destaque-apoio strong{ color:var(--white); }
.destaque-link{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; color:var(--white);
  padding-bottom:3px; border-bottom:2px solid rgba(255,255,255,.45);
  transition:border-color .18s var(--ease);
}
.destaque-link svg{ width:18px; height:18px; transition:transform .2s var(--ease); }
.destaque-link:hover{ border-color:var(--white); }
.destaque-link:hover svg{ transform:translateX(4px); }

/* ---------- FAQ: listas e parágrafos múltiplos ---------- */
.faq-a p + p{ margin-top:.8em; }
.faq-lista{ display:grid; gap:8px; margin-top:10px; }
.faq-lista li{
  position:relative; padding-left:18px;
  font-size:.94rem; color:var(--text-soft);
}
.faq-lista li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; background:var(--green-400);
  clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%);
}

/* ---------- Convite (slides 7 e 8) ---------- */
.cta h2{ color:var(--white); max-width:20ch; }
.cta h2 span{ color:var(--green-200); }
.cta .eyebrow{ margin-bottom:14px; }

/* ---------- Responsivo ---------- */
@media (max-width:1040px){
  .hero-parceiro .tiles-hero{ width:min(60%,420px); opacity:.22; }
}

@media (max-width:980px){
  .stair{ grid-template-columns:1fr; }
  .stair-col:nth-child(2),
  .stair-col:nth-child(3){ margin-top:0; }
  /* no empilhado, o degrau vira recuo lateral: a escada do slide continua la */
  .stair-col:nth-child(2){ margin-left:clamp(0px,4vw,32px); }
  .stair-col:nth-child(3){ margin-left:clamp(0px,8vw,64px); }
  .destaque .tiles-destaque{ width:min(40%,260px); opacity:.2; }
}

@media (max-width:900px){
  .quem-somos{ grid-template-columns:1fr; }
  .ec136-itens{ grid-template-columns:1fr; }
}

/* No celular, cada linha do quadro vira um cartao: tema em cima, as duas
   colunas embaixo, cada uma com o rotulo (data-rotulo) na frente. */
@media (max-width:760px){
  .comparativo, .comparativo tbody, .comparativo tr, .comparativo th, .comparativo td{ display:block; }
  .comparativo thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .comparativo{ border-spacing:0; }
  .comparativo tbody tr{ margin-bottom:12px; }
  .comparativo tbody th{ width:auto; padding-block:12px; }
  .comparativo tbody td{ width:auto; padding-block:12px; }
  .comparativo tbody td::before{
    content:attr(data-rotulo);
    display:block; margin-bottom:4px;
    font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-dim);
  }
  .comparativo tbody td.comp-precnet::before{ color:var(--green-200); }
  .comparativo tbody td.comp-precnet a{ white-space:normal; }
  .comparativo-bloco .btn{ width:100%; }
}

@media (max-width:860px){
  .pilares-inner{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .cta .tiles-cta{ opacity:.3; }
}

@media (max-width:520px){
  .campo-duplo{ grid-template-columns:1fr; }
  .stair-col:nth-child(2),
  .stair-col:nth-child(3){ margin-left:0; }
  .pillars li{ padding:14px 18px; gap:12px; min-height:58px; }
}