/* /renda-extra-para-clt — o que o kit não cobre no artigo de notícias da a referência (/tmp/la-37/ref/a referência-news-artigo): a data
   pequena e a peça embaixo do título, o corpo numa coluna estreita (~620 px) com intertítulos de 20–24 px, a citação da lei, a
   figura no meio do texto, "Compartilhar" com três botões quadrados de contorno, "Outras notícias" com três cartões (imagem,
   rótulo, título, texto, "Saiba mais") e o cartão do app no fim.
   Celular copia a composição do computador: os três cartões ficam lado a lado em 360px com o texto escondido (.p-clt-so-pc),
   o cartão do app segue imagem ao lado do texto, a tabela leva as duas respostas lado a lado. Só transform/opacity na
   animação; menos movimento no fim. */

/* ---------- hero: a data e o medalhão com os três lembretes de vidro ---------- */
#topo .lp-sub{display:grid;justify-items:center;gap:clamp(8px,1.5vw,16px);width:100%;margin-top:4px;font-size:1rem;color:var(--lp-mut2)}
.p-clt-data{font-size:.875rem;line-height:1.3;color:var(--lp-mut)}
/* a foto (3:2) ocupa o quadro inteiro e some nas bordas em degradê reto; o rosto fica em x 40–58% e y 5–50%, o celular nas
   mãos em x 48–60% e y 64–85%, então os lembretes ficam nas paredes dos lados, longe dos dois */
.p-clt-hm{position:relative;width:min(100%,640px)}
.p-clt-hm-img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 10%,#000 74%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(transparent,#000 10%,#000 74%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.p-clt-hc{position:absolute;top:calc(8% + var(--n)*28%);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:16px;text-align:left;color:#fff;
  background:linear-gradient(160deg,rgba(40,40,40,.72),rgba(14,14,14,.6));box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 18px 40px -16px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:p-clt-boia 6s ease-in-out calc(var(--n)*-2s) infinite}
.p-clt-hc:nth-child(2){left:0}
.p-clt-hc:nth-child(3){right:0}
.p-clt-hc:nth-child(4){left:4%}
.p-clt-hc-i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff}
.p-clt-hc-i .ic{width:15px;height:15px}
.p-clt-hc-t{display:grid;gap:2px;min-width:0}
.p-clt-hc-t small{font-size:.8125rem;line-height:1.2;color:var(--lp-mut2)}
.p-clt-hc-t b{font-size:.9375rem;line-height:1.2;font-weight:600;white-space:nowrap}
@keyframes p-clt-boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- 1. o corpo da notícia: coluna de ~620 px e intertítulos menores que os da casa ---------- */
.p-clt-s-art{padding-top:clamp(24px,4vw,48px)}
.p-clt-art{max-width:620px}
.p-clt-art .lp-cite{margin-bottom:clamp(28px,4vw,40px)}
.p-clt-art h2{margin-top:clamp(28px,4vw,40px);font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);line-height:1.2;letter-spacing:-.01em;scroll-margin-top:96px}
.p-clt-art a{overflow-wrap:break-word}
/* a citação da lei: cartão com a barra vermelha à esquerda */
.p-clt-cit{margin:18px 0;padding:18px 20px 18px 22px;border-radius:18px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,inset 3px 0 0 var(--red-hi)}
.p-clt-cit p{color:#fff;font-size:1.0625rem;line-height:1.55;font-style:italic;text-wrap:pretty}
.p-clt-cit footer{margin-top:10px;font-size:.875rem;line-height:1.4;color:var(--lp-mut)}
/* a figura no meio do texto (o lugar da foto da notícia) */
.p-clt-fig{margin:clamp(24px,4vw,36px) 0}
.p-clt-fig-m{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;border-radius:20px;
  background:radial-gradient(70% 90% at 50% 40%,rgba(217,45,32,.22),rgba(217,45,32,.04) 60%,transparent),#0d0d0d;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.p-clt-fig-m img{display:block;width:min(76%,440px);height:auto;mix-blend-mode:lighten;animation:p-clt-boia 7s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.p-clt-fig figcaption{margin-top:10px;font-size:.875rem;line-height:1.4;color:var(--lp-mut);text-align:center;text-wrap:balance}

/* ---------- "Compartilhar": três botões quadrados de contorno ---------- */
.p-clt-sh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;max-width:620px;margin:clamp(32px,5vw,48px) auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.p-clt-sh-t{font-size:1rem;font-weight:600;color:#fff}
.p-clt-sh ul{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.p-clt-sh a{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.6) inset;transition:transform .18s var(--ease),box-shadow .25s ease,background-color .25s ease}
.p-clt-sh a .ic{width:20px;height:20px}
.p-clt-sh a:active{transform:scale(.96)}
.p-clt-sh a:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.p-clt-sh a:hover{transform:translateY(-2px);background-color:rgba(255,255,255,.06);box-shadow:0 0 0 1.5px #fff inset}}

/* ---------- 2. "Outras notícias": três cartões lado a lado em toda largura ---------- */
/* o vão até o cartão do app mora no padding da seção dele: com o cartão colado na fronteira, no celular e no tablet ele
   cobre mais de 85% da linha e o encontro das seções lia o cinza dele como costura */
.p-clt-s-og{padding-top:clamp(16px,3vw,32px);padding-bottom:0}
.p-clt-og{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,24px);list-style:none;margin:0;padding:0}
.p-clt-og-c{position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start;justify-items:start;gap:10px;min-width:0;transition:transform .18s var(--ease)}
.p-clt-og-img{display:grid;place-items:center;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:18px;
  background:radial-gradient(80% 90% at 50% 45%,rgba(217,45,32,.2),rgba(217,45,32,.03) 60%,transparent),#0f0f0f;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.p-clt-og-img img{display:block;width:92%;height:auto;mix-blend-mode:lighten;transition:transform .5s var(--ease);
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
/* cartão com a foto do hero da guia de destino: a foto preenche o quadro (cover), sem a mistura e a máscara da medalha */
.p-clt-og-img--foto img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
.p-clt-og-r{font-size:.8125rem;line-height:1.2;color:var(--lp-mut)}
.p-clt-og-c h3{font-size:clamp(1.0625rem,.9rem + .7vw,1.5rem);line-height:1.15;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.p-clt-og-c h3 a{color:inherit;text-decoration:none}
/* o cartão inteiro clica pelo título */
.p-clt-og-c h3 a::after{content:"";position:absolute;inset:0;border-radius:18px}
.p-clt-og-c h3 a:focus-visible{outline:none}
.p-clt-og-c:has(h3 a:focus-visible) .p-clt-og-img{outline:2px solid var(--red-hi);outline-offset:3px}
.p-clt-og-c p{font-size:1rem;line-height:1.45;color:var(--lp-mut2);text-wrap:pretty}
.p-clt-og-c .rd-link{margin:-8px 0 -10px}
.p-clt-og-c:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.p-clt-og-c:hover .p-clt-og-img img{transform:scale(1.05)}}
.p-clt-og-todas{display:flex;justify-content:center;margin-top:clamp(20px,3vw,32px)}
.p-clt-og-todas .rd-link{margin:0}

/* ---------- 3. o cartão do app (aqui: o painel no seu celular) ---------- */
.p-clt-app{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(14px,3vw,32px);max-width:720px;margin-inline:auto;padding:clamp(14px,2.5vw,24px) clamp(16px,3vw,32px);
  border:1px solid transparent;border-radius:24px;color:#fff;text-decoration:none;
  background:radial-gradient(120% 140% at 0 0,#1a1a1a 0,#0d0d0d 60%,#0a0a0a 100%) padding-box,linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 45%,rgba(255,255,255,.12)) border-box;
  transition:transform .18s var(--ease)}
.p-clt-app-img{display:block;width:clamp(72px,10vw,112px);aspect-ratio:390/520;overflow:hidden;border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 20px 40px -18px rgba(0,0,0,.95);
  transform:rotate(-4deg)}
.p-clt-app-img img{display:block;width:100%;height:auto}
.p-clt-app-t{display:grid;gap:8px;justify-items:start}
.p-clt-app-t b{font-size:clamp(1.25rem,1rem + 1.2vw,2rem);line-height:1.1;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.p-clt-app-l{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:1rem;font-weight:600;color:var(--red-hi)}
.p-clt-app-l svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.p-clt-app:active{transform:scale(.99)}
.p-clt-app:focus-visible{outline:2px solid var(--red-hi);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.p-clt-app:hover .p-clt-app-l svg{transform:translateX(4px)}}

/* ---------- celular: a mesma composição, com a copy resumida ---------- */
@media (max-width:37.49rem){
  /* no celular o rosto ocupa o meio da foto: o lembrete estreita (até 124px) e o texto quebra em duas linhas, para caber
     na parede ao lado do rosto, como no computador */
  .p-clt-hc{gap:7px;max-width:124px;padding:6px 10px 6px 6px;border-radius:14px}
  .p-clt-hc-t b{white-space:normal}
  .p-clt-hc-i{width:26px;height:26px}
  .p-clt-hc-i .ic{width:13px;height:13px}
  .p-clt-hc-t b{font-size:.8125rem}
  .p-clt-so-pc{display:none}

  .p-clt-cit{padding:14px 16px 14px 18px}
  .p-clt-cit p{font-size:1rem}
  .p-clt-fig-m{border-radius:16px}
  .p-clt-sh{gap:10px}

  .p-clt-og{gap:16px 8px}
  .p-clt-og-c{grid-template-rows:auto auto 1fr auto;gap:8px}
  .p-clt-og-img{border-radius:14px}
  .p-clt-og-c h3{font-size:.875rem;line-height:1.2}
  .p-clt-og-c h3 a::after{border-radius:14px}
  .p-clt-og-c .rd-link{font-size:14px}
  .p-clt-app{border-radius:20px}
}

/* tabela no celular: as duas respostas (por que importa e o que fazer) lado a lado, como as colunas do computador */
@media (max-width:47.99rem){
  #conferir-no-contrato .lp-tab tr{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:8px;padding:16px}
  #conferir-no-contrato .lp-tab tbody th{grid-column:1/-1}
  #conferir-no-contrato .lp-tab td{grid-template-columns:minmax(0,1fr);gap:2px;align-content:start}
  #nao-e .lp-ck li{grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;padding:14px}
}

@media (prefers-reduced-motion:reduce){
  .p-clt-hc,.p-clt-fig-m img{animation:p-clt-some .3s linear both}
  .p-clt-og-img img,.p-clt-app-l svg{transition:opacity .2s linear}
}
@keyframes p-clt-some{from{opacity:0}to{opacity:1}}