/* =====================================================================
   Genuo · site · /vendedor v3 (calibragem S8 a S12)
   Carregado depois de site.css e de pagina-comprador.css, que traz as
   peças comuns às duas páginas de lado (hero, dobra que invade, trilho do
   catálogo, linha do tempo, perguntas, chamada). Aqui ficam só os dois
   desenhos próprios de quem vende. Só tokens do sistema.
   Ordem: 1 hero (um cadastro, três compradores) · 2 resultado da cotação ·
          3 responsivo · 4 movimento reduzido
   A v1 destes estilos está em _legado/pagina-vendedor_v1.css.
   ===================================================================== */

/* ---------- 1. HERO · um cadastro ligado a três compradores ---------- */
.pl-v .hero-vis{margin-right:0;padding:0 0 0 24px}
/* no desktop o fio de "cadastro" para na coluna do texto, como na home ele para na tela:
   solto, ele atravessaria os vãos do diagrama e pareceria um conector a mais */
@media (min-width:1101px){.pl-v .hero-txt{overflow-x:clip}}
.pl-cad{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) 56px minmax(0,1fr);align-items:center;padding:24px 0}
.pl-cad-et{--dx:10px}
.pl-cad-et .et,.pl-cad-et .et-bd{--cf:36px}
.pl-cad-et .et{padding:24px 52px 24px 24px}
.pl-cad-et .cd.tx{font-size:clamp(26px,2.4vw,34px);margin-top:10px}
.pl-cad-et .ln{font-family:var(--f-display);font-size:15px;font-weight:650;margin-top:16px}
.pl-cad-haste{height:2px;background:var(--navy);transform-origin:left center}
.pl-cad-lado{position:relative}
.pl-cad-esp{position:absolute;left:0;top:37px;bottom:37px;width:2px;background:var(--navy);transform-origin:center center}
.pl-cad-comp{display:flex;flex-direction:column;gap:22px}
.pl-cad-comp li{display:flex;align-items:center}
.pl-cad-ramo{position:relative;flex:0 0 40px;height:2px;background:var(--navy);margin-right:16px}
.pl-cad-ramo::after{content:"";position:absolute;right:-4px;top:-6px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid var(--navy)}
.pl-cad-comp .et-w{flex:1 1 auto;--dx:7px}
.pl-cad-comp .et,.pl-cad-comp .et-bd{--cf:20px}
.pl-cad-comp .et{height:74px;display:flex;align-items:center;padding:0 36px 0 18px}
.pl-cad-t{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2}

/* ---------- 2. RESULTADO DA COTAÇÃO · 5/7, a etiqueta girada invade a dobra do catálogo ---------- */
.pl-res-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;margin-top:56px;align-items:start}
.pl-res-grid .lead{color:var(--navy);max-width:36ch;padding-top:6px}
.pl-res-w{justify-self:start;width:min(100%,580px)}
.pl-res{transform:rotate(1.2deg);transform-origin:left top;--dx:10px}
.pl-res .et,.pl-res .et-bd{--cf:44px}
.pl-res .et{padding:28px 64px 30px 30px}
.pl-res-item{font-size:clamp(24px,2.2vw,30px);font-weight:850;letter-spacing:-.03em;line-height:1.1;margin-top:8px}
.pl-res dl{margin-top:22px;border-top:2px solid var(--navy)}
.pl-res dl > div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;align-items:center;padding:17px 0;border-bottom:1px solid var(--linha)}
.pl-res dt{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cz-t)}
.pl-res dd{font-size:clamp(18px,1.5vw,21px);font-weight:750;color:var(--navy);line-height:1.3}
.pl-pos{display:flex;align-items:center;gap:16px}
.pl-pos ol{display:flex;gap:6px}
.pl-pos li{width:30px;height:30px;box-shadow:inset 0 0 0 2px var(--navy);background:var(--folha)}
.pl-pos li.v{background:repeating-linear-gradient(135deg,var(--navy) 0 3px,var(--cz-claro) 3px 6px)}
.pl-pos li.eu{background:var(--navy)}
.pl-pos .mono{font-size:17px;font-weight:700}

/* ---------- 3. RESPONSIVO ---------- */
@media (max-width:1100px){
  .pl-v .hero-vis{padding:0;max-width:640px}
  .pl-res-grid{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:600px){
  .pl-v .hero-vis{margin:4px 0 0;padding:0 0 8px}
  .pl-cad{grid-template-columns:minmax(0,1.15fr) 20px minmax(0,1fr);padding:4px 0 0}
  .pl-cad-et{--dx:7px}
  .pl-cad-et .et,.pl-cad-et .et-bd{--cf:22px}
  .pl-cad-et .et{padding:14px 26px 14px 14px}
  .pl-cad-et .lb{font-size:11px}
  .pl-cad-et .cd.tx{font-size:21px;margin-top:6px}
  .pl-cad-et .ln{font-size:12.5px;margin-top:10px;padding-top:8px}
  .pl-cad-esp{top:24px;bottom:24px}
  .pl-cad-comp{gap:10px}
  .pl-cad-ramo{flex-basis:18px;margin-right:10px}
  .pl-cad-ramo::after{top:-5px;border-top-width:6px;border-bottom-width:6px;border-left-width:9px}
  .pl-cad-comp .et-w{--dx:5px}
  .pl-cad-comp .et,.pl-cad-comp .et-bd{--cf:12px}
  .pl-cad-comp .et{height:48px;padding:0 20px 0 12px}
  .pl-cad-t{font-size:15px}
  .pl-res-grid{margin-top:32px}
  .pl-res{transform:rotate(1deg)}
  .pl-res .et,.pl-res .et-bd{--cf:28px}
  .pl-res .et{padding:22px 22px 22px 20px}
  .pl-res dl > div{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 0}
  .pl-pos li{width:26px;height:26px}
}

/* ---------- 4. MOVIMENTO REDUZIDO ---------- */
/* as peças usam só .a-up, .a-lista, .a-cx e .a-cy, que site.css §12 já devolve ao estado final */