/* /patentes — CSS só desta página (prefixo p-pat-). Clone de a referência
   Celular primeiro. A tabela dos status vira, no celular, as quatro patentes lado a lado (botões de escolha) + as linhas da tocada
   numa faixa da largura toda (doutrina: planos). Nunca trilho, nunca rolagem lateral.
   Movimento só com transform/opacity; "menos movimento" desliga a flutuação da peça e o realce dos ícones. */

:root{--p-pat-bronze:#e39a5c;--p-pat-aco:#c9cfd6;--p-pat-ouro:#f1c45a}
.p-pat-sr,.p-pat-t caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- hero: o título no topo e a peça (os degraus) embaixo, como o "Status" centrado da a referência; dividido no computador ---------- */
.lp-hero--img{--hw:min(84vw,440px);--hb:56px;justify-content:flex-start;padding-top:104px;padding-bottom:calc(var(--hw)*2/3 + var(--hb) + 12px)}
.lp-hero--img::before{display:none}
.lp-hero--img .lp-hero-bg{inset:auto;left:50%;bottom:var(--hb);width:var(--hw);height:calc(var(--hw)*2/3);margin-left:calc(var(--hw)/-2);object-fit:cover;
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .lp-hero--img .lp-hero-bg{animation:p-pat-flutua 7s ease-in-out infinite}
}
@keyframes p-pat-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (min-width:600px){.lp-hero--img{--hw:min(66vw,500px)}}
@media (min-width:1024px){
  .lp-hero--img{--hw:min(46vw,640px);--hx:max(var(--pad),calc(50% - 600px));justify-content:center;padding-top:112px;padding-bottom:96px}
  .lp-hero--img .lp-hero-c{width:min(100%,1200px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-items:start;text-align:left}
  .lp-hero--img .lp-hero-c>*{grid-column:1}
  .lp-hero--img .lp-bc,.lp-hero--img .hero-cta{justify-content:flex-start}
  .lp-hero--img .lp-hero-bg{left:auto;right:var(--hx);bottom:auto;top:50%;margin:calc(var(--hw)/-3 + 20px) 0 0}
  .lp-hero--img .lp-lede{max-width:30em}
}

/* ---------- 1. a tabela dos status (celular primeiro: as quatro lado a lado + a faixa da tocada) ---------- */
.p-pat-tab{position:relative}
.p-pat-r{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.p-pat-t{display:block;width:100%;border-collapse:separate;border-spacing:0}
.p-pat-t thead,.p-pat-t tbody{display:block}
.p-pat-t thead tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.p-pat-k0{display:none}
.p-pat-c{display:block;padding:0;font-weight:400;text-align:center}
.p-pat-c label{display:grid;justify-items:center;align-content:start;gap:8px;min-height:44px;height:100%;padding:12px 2px 12px;border-radius:20px;cursor:pointer;
  background:#0d0d0d;box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .3s,background-color .3s,transform .18s var(--ease)}
.p-pat-c label:active{transform:scale(.97)}
.p-pat-ic{display:block;width:min(56px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px var(--cor,rgba(255,255,255,.3)),0 14px 30px -12px var(--cor,transparent)}
.p-pat-ic img{display:block;width:100%;height:100%;object-fit:cover}
.p-pat-n{display:block;font-size:1rem;line-height:1.15;color:var(--lp-mut)}
.p-pat-n b{font-weight:600;color:#fff;letter-spacing:-.02em}
.p-pat-lg{display:none}
.p-pat-c--bronze{--cor:var(--p-pat-bronze)}
.p-pat-c--prox{--cor:var(--p-pat-aco)}
.p-pat-c--admin{--cor:var(--red-hi)}
.p-pat-c--topo{--cor:var(--p-pat-ouro)}

/* a faixa larga com as linhas da patente tocada */
.p-pat-t tbody{margin-top:12px;padding:4px 16px;border-radius:24px;background:#0d0d0d;box-shadow:0 0 0 1px var(--line) inset}
.p-pat-t tbody tr{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:4px 12px;align-items:start;padding:14px 0}
.p-pat-t tbody tr+tr{border-top:1px solid var(--line)}
.p-pat-t tbody th{font-size:1rem;line-height:1.35;font-weight:400;text-align:left;color:var(--lp-mut)}
.p-pat-t tbody td{display:block;font-size:1rem;line-height:1.4;color:#fff;text-wrap:pretty}
.p-pat-nao td{color:var(--lp-mut2)}
.p-pat-acoes{grid-template-columns:minmax(0,1fr)!important}
.p-pat-acoes td{display:flex}
.p-pat-btn{width:100%}
.p-pat-fim{display:inline-flex;align-items:center;min-height:46px;font-weight:600;color:var(--red-hi)}
.p-pat-fim--topo{color:var(--p-pat-ouro)}

/* só a coluna tocada aparece na faixa (sem :has, as quatro aparecem uma embaixo da outra: o conteúdo nunca some) */
@media (max-width:767.98px){
.p-pat-tab:has(#p-pat-r1:checked) tbody td:not(.p-pat-v--bronze),
.p-pat-tab:has(#p-pat-r2:checked) tbody td:not(.p-pat-v--prox),
.p-pat-tab:has(#p-pat-r3:checked) tbody td:not(.p-pat-v--admin),
.p-pat-tab:has(#p-pat-r4:checked) tbody td:not(.p-pat-v--topo){display:none}
}
.p-pat-tab:has(#p-pat-r1:checked) .p-pat-c--bronze label,
.p-pat-tab:has(#p-pat-r2:checked) .p-pat-c--prox label,
.p-pat-tab:has(#p-pat-r3:checked) .p-pat-c--admin label,
.p-pat-tab:has(#p-pat-r4:checked) .p-pat-c--topo label{background:linear-gradient(170deg,color-mix(in srgb,var(--cor) 22%,#0d0d0d),#0d0d0d 75%);box-shadow:0 0 0 1.5px var(--cor) inset}
.p-pat-tab:has(#p-pat-r1:focus-visible) .p-pat-c--bronze label,
.p-pat-tab:has(#p-pat-r2:focus-visible) .p-pat-c--prox label,
.p-pat-tab:has(#p-pat-r3:focus-visible) .p-pat-c--admin label,
.p-pat-tab:has(#p-pat-r4:focus-visible) .p-pat-c--topo label{outline:2px solid var(--red-hi);outline-offset:3px}

/* ---------- 1. computador e tablet: a tabela da a referência (rótulos à esquerda, faixas alternadas de raio 16, botões no fim) ---------- */
@media (min-width:768px){
  .p-pat-r{display:none}
  .p-pat-t{display:table;table-layout:fixed}
  .p-pat-t thead{display:table-header-group}
  .p-pat-t tbody{display:table-row-group;margin:0;padding:0;border-radius:0;background:none;box-shadow:none}
  .p-pat-t thead tr,.p-pat-t tbody tr{display:table-row;padding:0}
  .p-pat-t tbody tr+tr{border:0}
  .p-pat-k0,.p-pat-c,.p-pat-t tbody th,.p-pat-t tbody td{display:table-cell}
  .p-pat-k0{width:19%;vertical-align:bottom;padding:0 16px 32px;font-size:1rem;color:var(--lp-mut)}
  .p-pat-c{vertical-align:top;padding:0 12px 32px;text-align:left}
  .p-pat-c label{justify-items:start;gap:20px;padding:0;background:none!important;box-shadow:none!important;cursor:default;border-radius:0}
  .p-pat-c label:active{transform:none}
  .p-pat-ic{width:72px}
  .p-pat-n{font-size:1.25rem;line-height:1.1;letter-spacing:-.01em}
  .p-pat-lg{display:inline}
  .p-pat-sm{display:none}
  .p-pat-t tbody th,.p-pat-t tbody td{padding:28px 16px;vertical-align:middle}
  .p-pat-t tbody th{padding-left:20px}
  .p-pat-t tbody tr:nth-child(odd):not(.p-pat-acoes)>*{background:#0f0f0f}
  .p-pat-t tbody tr:nth-child(odd)>:first-child{border-radius:16px 0 0 16px}
  .p-pat-t tbody tr:nth-child(odd)>:last-child{border-radius:0 16px 16px 0}
  .p-pat-acoes th,.p-pat-acoes td{padding-top:24px!important;padding-bottom:0!important}
  .p-pat-btn{width:auto;min-height:48px;border-radius:16px}
}
@media (min-width:1024px){
  .p-pat-k0{width:17%}
  .p-pat-ic{width:80px}
  .p-pat-t tbody th,.p-pat-t tbody td{padding-block:30px}
}
/* os ícones acendem um depois do outro quando a tabela entra (só opacity e transform) */
@media (prefers-reduced-motion:no-preference){
  .js-ok .p-pat-tab .p-pat-ic{opacity:0;transform:translateY(12px) scale(.9);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js-ok .p-pat-tab.in .p-pat-ic{opacity:1;transform:none}
  .js-ok .p-pat-tab.in .p-pat-c:nth-child(3) .p-pat-ic{transition-delay:.08s}
  .js-ok .p-pat-tab.in .p-pat-c:nth-child(4) .p-pat-ic{transition-delay:.16s}
  .js-ok .p-pat-tab.in .p-pat-c:nth-child(5) .p-pat-ic{transition-delay:.24s}
}
@media (hover:hover) and (pointer:fine){
  .p-pat-c label:hover .p-pat-ic{transform:translateY(-3px)}
}

/* ---------- 2. as peças empilhadas (celular com o Perfil real + dois medalhões) e a barra com o botão ---------- */
.p-pat-pf{display:grid;gap:clamp(28px,5vw,48px);align-items:center}
.p-pat-pf-m{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:420/380}
.p-pat-pf-cel{position:absolute;left:50%;top:0;width:44%;margin-left:-22%;z-index:2;
  -webkit-mask:linear-gradient(#000 70%,#0000 100%);mask:linear-gradient(#000 70%,#0000 100%);height:100%;overflow:hidden}
.p-pat-pf-md{position:absolute;display:block;width:46%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px -20px rgba(0,0,0,.9)}
.p-pat-pf-md img{display:block;width:100%;height:100%;object-fit:cover}
.p-pat-pf-md--a{left:0;top:10%;z-index:1;box-shadow:0 0 0 1.5px rgba(227,154,92,.55),0 30px 70px -18px rgba(227,154,92,.45)}
.p-pat-pf-md--a img{object-position:38% 50%}
.p-pat-pf-md--b{right:0;bottom:6%;z-index:3;box-shadow:0 0 0 1.5px rgba(255,84,72,.5),0 0 0 7px rgba(0,0,0,.85),0 30px 70px -18px rgba(217,45,32,.5)}
.p-pat-pf-md--b img{object-position:52% 50%}
@media (prefers-reduced-motion:no-preference){
  .js-ok .p-pat-pf-m .p-pat-pf-md{transition:transform .9s var(--ease) .15s,opacity .9s var(--ease) .15s}
  .js-ok .p-pat-pf-m:not(.in) .p-pat-pf-md--a{transform:translateX(24px) scale(.92);opacity:0}
  .js-ok .p-pat-pf-m:not(.in) .p-pat-pf-md--b{transform:translateX(-24px) scale(.92);opacity:0}
}
.p-pat-pf-x{display:grid;gap:18px;justify-items:center;text-align:center}
.p-pat-pf-x .lp-p{max-width:34em}
.p-pat-barra{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;width:100%;max-width:560px}
.p-pat-barra-ic{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px var(--p-pat-bronze)}
.p-pat-barra-ic img{display:block;width:100%;height:100%;object-fit:cover}
.p-pat-barra-c{position:relative;display:grid;gap:2px;justify-items:start;min-height:56px;padding:9px 16px;border-radius:16px;text-align:left;
  background:#0c0c0c;box-shadow:0 0 0 1px var(--line2) inset}
.p-pat-barra-c small{font-size:.875rem;line-height:1.2;color:var(--lp-mut)}
.p-pat-barra-c b{font-size:1.125rem;line-height:1.2;font-weight:600;color:var(--p-pat-bronze)}
.p-pat-barra-k{display:none}
.p-pat-barra-btn{grid-column:1/-1;width:100%;border-radius:16px}
.p-pat-pf-nota{max-width:34em;font-size:1rem;line-height:1.5;color:var(--lp-mut);text-wrap:pretty}
@media (min-width:600px){
  .p-pat-barra{grid-template-columns:44px minmax(0,1fr) auto}
  .p-pat-barra-btn{grid-column:auto;width:auto}
}
@media (min-width:1024px){
  .p-pat-pf{grid-template-columns:minmax(0,460px) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);max-width:1080px;margin-inline:auto}
  .p-pat-pf-m{width:100%}
  .p-pat-pf-x{justify-items:start;text-align:left}
  .p-pat-pf-x .lp-h2{font-size:2.5rem}
  .p-pat-barra{grid-template-columns:44px minmax(0,1fr) auto;max-width:none}
  .p-pat-barra-c{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:end}
  .p-pat-barra-c small{grid-column:1}
  .p-pat-barra-c b{grid-column:1}
}
@media (prefers-reduced-motion:reduce){.p-pat-c label,.p-pat-ic{transition:none}}