/* =====================================================================
   Genuo · site · páginas de lado v3 (/comprador e /vendedor)
   Calibragem S8 a S12 (DECISOES.md), na régua da home v3 (site.css §13).
   Carregado depois de site.css em /comprador e em /vendedor; /vendedor
   soma pagina-vendedor.css. Usa só os tokens do sistema: nenhuma cor,
   fonte, raio ou curva nova. Prefixo pl- (página de lado).
   Ordem: 1 hero · 2 comparativo (comprador) · 3 dobra que invade ·
          4 catálogo (trilho) · 5 linha do tempo · 6 perguntas ·
          7 chamada · 8 responsivo · 9 movimento reduzido
   A v1 destes estilos está em _legado/pagina-comprador_v1.css.
   ===================================================================== */

/* ---------- 1. HERO (split: texto 1.12 · desenho .88) ---------- */
.pl-hero .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.pl-hero .hero-h1{font-size:clamp(36px,3.9vw,56px);line-height:.98;margin-top:20px}
.pl-hero .hero-sub{max-width:38ch}
.pl-resp{max-width:520px}
.pl-resp td{padding:18px 12px 18px 0}
.pl-resp .pl-resp-ult td{border-top:2px solid var(--navy);border-bottom:0;color:var(--cz-escuro);font-weight:650}

/* título das dobras: largo o bastante para nunca encaixotar */
.pl .h2{max-width:24ch}
.pl .h2.h2-c{max-width:28ch}

/* ---------- 2. COMPARATIVO (comprador · 4/8, a tela sangra a borda direita) ---------- */
.pl-comp-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;margin-top:56px;align-items:start}
.pl-comp-grid .lead{color:var(--navy);max-width:34ch;padding-top:8px}
.pl-comp-tela{margin-right:calc(-1 * (var(--gut) + max(0px,(100vw - var(--largura) - var(--gut) * 2) / 2)));border-radius:var(--r-box) 0 0 var(--r-box);box-shadow:var(--sombra-escura)}
.pl-comp-tela .tela-corpo{padding:30px 48px 26px 32px;background:var(--folha)}
.pl-mz{font-size:16px;max-width:780px}
.pl-mz th{vertical-align:bottom;line-height:1.3}
.pl-mz td{padding:18px 16px 18px 0}
.pl-mz td:first-child{font-weight:700;color:var(--navy)}
.pl-mz .pl-ult{background:var(--gelo);padding-left:16px;padding-right:16px;color:var(--cz-escuro)}
.pl-mz th.pl-ult{color:var(--navy)}
.pl-hom{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-top:6px;font-size:11px;letter-spacing:.06em;color:var(--azul-t)}
.pl-hom::before{content:"";width:8px;height:8px;background:var(--azul-t);flex:0 0 auto}
.pl-esc{position:relative;font-weight:800;color:var(--navy)}
.pl-sel{position:absolute;top:7px;bottom:7px;left:-6px;right:4px;box-shadow:inset 0 0 0 2px var(--navy);pointer-events:none}

/* ---------- 3. DOBRA QUE INVADE A SEGUINTE (desenho atravessa a fronteira) ---------- */
.dobra.pl-invade{position:relative;z-index:2;overflow:visible}
@supports (overflow:clip){.dobra.pl-invade{overflow-x:clip;overflow-y:visible}}
.pl-invade .pl-por-cima{position:relative;z-index:3;margin-bottom:-220px}
.pl-recebe{position:relative;z-index:1;padding-top:calc(var(--e-6) + 120px)}

/* ---------- 4. CATÁLOGO (navy · três etiquetas sobre um traço que sangra as duas bordas) ---------- */
.pl-cat-sub{text-align:center;margin:24px auto 0;max-width:50ch}
.pl-trilho{--g:80px;position:relative;margin-top:88px}
.pl-trilho-l{position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:50%;height:2px;margin-top:-1px;background:var(--gelo-m);transform-origin:left center}
.js .pl-trilho .pl-trilho-l{transition-duration:1100ms}
.pl-trilho ol{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--g);align-items:center}
.pl-trilho li{position:relative}
.pl-trilho .et-w{--dx:8px}
.pl-trilho .et,.pl-trilho .et-bd{--cf:26px}
.pl-trilho .et{min-height:132px;display:flex;align-items:flex-end;padding:22px 48px 24px 22px}
.pl-et-t{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--navy);text-wrap:balance}
.pl-seta{position:absolute;top:50%;left:calc(100% + var(--g) / 2 - 2px);width:0;height:0;margin-top:-7px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid var(--gelo-m)}

/* ---------- 5. LINHA DO TEMPO (folha · 7/5: o desenho à esquerda, o texto à direita) ---------- */
.pl-reg-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;margin-top:64px;align-items:start}
.pl-reg-grid .lead{grid-column:2;grid-row:1;color:var(--navy);max-width:36ch;padding-top:6px}
.pl-tl{grid-column:1;grid-row:1;position:relative;padding-left:56px}
.pl-tl li{position:relative;padding-bottom:44px}
.pl-tl li:last-child{padding-bottom:0}
.pl-tl li:not(:last-child)::before{content:"";position:absolute;left:-48px;top:24px;bottom:-6px;width:2px;background:var(--navy);transform-origin:center top}
.js .pl-tl.cena li::before{transform:scaleY(0);transition:transform var(--d-lista) var(--ease);transition-delay:calc(var(--i,0) * var(--d-stagger) + 260ms)}
.js .pl-tl.cena.in li::before{transform:scaleY(1)}
.pl-tl-no{position:absolute;left:-56px;top:6px;width:18px;height:18px;background:var(--folha);box-shadow:inset 0 0 0 2px var(--navy)}
.pl-tl .hum .pl-tl-no{background:var(--navy)}
.pl-tl-h{display:block;font-size:13px;font-weight:700;color:var(--cz-t);line-height:1.4}
.pl-tl-t{display:block;margin-top:6px;font-size:clamp(24px,2.3vw,34px);font-weight:850;letter-spacing:-.035em;line-height:1.08;color:var(--navy);text-wrap:balance;max-width:20ch}
.pl-tl .hum .pl-tl-t{display:inline-block;background:var(--navy);color:var(--folha);padding:12px 44px 15px 16px;--cf:16px;margin-left:-16px;margin-top:10px}

/* ---------- 6. PERGUNTAS (aço · uma coluna de fios, acordeão nativo) ---------- */
.pl-faq-l{max-width:880px;margin:64px auto 0;border-top:2px solid var(--navy)}
.pl-q{border-bottom:1px solid var(--cz-claro)}
.pl-q summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;cursor:pointer;list-style:none}
.pl-q summary::-webkit-details-marker{display:none}
.pl-q summary:focus-visible{outline:3px solid var(--azul-t);outline-offset:4px}
.pl-q-t{font-size:clamp(20px,1.7vw,24px);font-weight:750;letter-spacing:-.015em;line-height:1.3;color:var(--navy);text-wrap:balance}
.pl-q-i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--navy);color:var(--folha);--cf:10px;transition:background-color var(--d-micro) var(--ease)}
.pl-q-i svg{width:18px;height:18px;transition:transform var(--d-micro) var(--ease)}
.pl-q[open] .pl-q-i svg{transform:rotate(45deg)}
.pl-q-r{padding:0 68px 30px 0}
.pl-q-r .texto{font-size:18px;max-width:60ch}
@media (hover:hover){
  .pl-q summary:hover .pl-q-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
  .pl-q summary:hover .pl-q-i{background:var(--navy-h)}
}

/* ---------- 7. CHAMADA (gelo · abertura centralizada + o perfil já marcado numa etiqueta) ---------- */
.pl-cta-sub{text-align:center;margin:22px auto 0;max-width:46ch}
.pl-perfil{width:min(100%,880px);margin:64px auto 0;--dx:10px}
.pl-perfil .et,.pl-perfil .et-bd{--cf:40px}
.pl-perfil .et{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;padding:30px 64px 32px 30px}
.pl-perfil-nm{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:clamp(22px,2vw,28px);font-weight:850;letter-spacing:-.025em;line-height:1.15;color:var(--navy)}
.pl-perfil-nm::before{content:"";width:14px;height:14px;background:var(--laranja);flex:0 0 auto}

/* ---------- 8. RESPONSIVO ---------- */
@media (max-width:1100px){
  .pl-hero .hero-grid{grid-template-columns:minmax(0,1fr)}
  .pl-comp-grid,.pl-reg-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .pl-reg-grid .lead,.pl-tl{grid-column:auto;grid-row:auto}
  .pl-invade .pl-por-cima{margin-bottom:0}
  .pl-recebe{padding-top:var(--e-6)}
  .pl-trilho{--g:48px}
}
@media (max-width:860px){
  .pl-trilho{margin-top:56px}
  .pl-trilho-l{display:none}
  .pl-trilho ol{grid-template-columns:minmax(0,1fr);gap:40px;max-width:460px;margin:0 auto}
  .pl-trilho .et{min-height:0;padding:20px 44px 22px 20px}
  .pl-seta{left:32px;top:calc(100% + 8px);margin:0;width:2px;height:22px;border:0;background:var(--gelo-m);transform-origin:center top}
  .pl-seta::after{content:"";position:absolute;left:-6px;bottom:-10px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid var(--gelo-m)}
}
@media (max-width:600px){
  .pl-hero .hero-h1{margin-top:14px}
  /* 3 linhas no celular: a linha mais longa ("com o comparativo pronto,") mede 11,45em numa coluna de 346px */
  .pl-c .hero-h1{font-size:29.5px}
  .pl-v .hero-h1{font-size:32px}
  .pl .h2,.pl .h2.h2-c{max-width:none}
  .pl-hero .hero-acts .bt{max-width:100%}
  .pl-hero .hero-acts .bt-f{padding-right:26px}
  .pl-comp-grid{margin-top:32px;gap:32px}
  .pl-comp-tela .tela-corpo{padding:16px 14px 10px}
  .pl-mz{font-size:12.5px}
  .pl-mz th{font-size:10.5px;letter-spacing:0;text-transform:none;padding:8px 6px 8px 0}
  .pl-mz td{padding:12px 6px 12px 0}
  .pl-mz .pl-ult{padding-left:6px;padding-right:6px}
  .pl-hom{font-size:10px;gap:5px;letter-spacing:0}
  .pl-hom::before{width:6px;height:6px}
  .pl-resp td{padding:10px 8px 10px 0}
  /* no celular a matriz perde um fornecedor e um item, em vez de encolher: fica Item, A, B e Última compra */
  .pl-mz th:nth-child(4),.pl-mz td:nth-child(4),.pl-mz tbody tr:nth-child(4){display:none}
  .pl-mz td:first-child{width:34%}
  .pl-sel{top:5px;bottom:5px;left:-3px;right:2px}
  .pl-reg-grid{margin-top:32px}
  .pl-tl{padding-left:44px}
  .pl-tl-no{left:-44px}
  .pl-tl li:not(:last-child)::before{left:-36px}
  .pl-tl li{padding-bottom:34px}
  .pl-tl-t{font-size:24px}
  .pl-faq-l{margin-top:40px}
  .pl-q summary{padding:22px 0;gap:16px}
  .pl-q-t{font-size:19px}
  .pl-q-r{padding-right:0}
  .pl-q-r .texto{font-size:17px}
  .pl-perfil{margin-top:48px}
  .pl-perfil .et,.pl-perfil .et-bd{--cf:28px}
  .pl-perfil .et{padding:22px 20px 24px}
  .pl-perfil .bt,.pl-perfil .bt-f{width:100%}
  .pl-perfil .bt-f{padding-right:30px}
}

/* ---------- 9. MOVIMENTO REDUZIDO: tudo no estado final ---------- */
@media (prefers-reduced-motion:reduce){
  .js .pl-tl.cena li::before{transform:none!important;transition:none!important}
  .pl-q-i,.pl-q-i svg{transition:none}
}