/* regra (prefixo rg-) · a única seção clara: a pedra da mesa dele, a parte "junto" */

.rg{overflow:hidden;padding-top:calc(var(--respiro) + 18px);padding-bottom:calc(var(--respiro) + 18px)}

/* ───────── as bordas: a noite termina, a pedra começa num degrau ───────── */
.rg::before,.rg::after{
  content:"";position:absolute;left:0;right:0;z-index:1;height:18px;
}
/* em cima: a face do degrau (mais escura) e, nela, o fio de luz que a noite deixa */
.rg::before{top:0;background:linear-gradient(180deg,#d9c5a2 0 50%,var(--claro-sombra) 50% 100%);box-shadow:inset 0 1px 0 rgb(159 211 230 / .5)}
/* embaixo: o tampo termina e a face do degrau cai para a noite */
.rg::after{bottom:0;background:linear-gradient(180deg,var(--claro-sombra) 0 50%,#d9c5a2 50% 100%);box-shadow:inset 0 -1px 0 rgb(4 27 32 / .5)}

/* ───────── a malha morna: pedra e luz âmbar da sala, respirando ───────── */
.rg-malha{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--claro-fundo)}
.rg-malha i{position:absolute;display:block;border-radius:50%;filter:blur(28px);will-change:transform}
/* a luz clara, do alto à esquerda */
.rg-malha i:nth-child(1){
  left:-16vmax;top:-22vmax;width:72vmax;height:58vmax;
  background:radial-gradient(closest-side in oklab,#f9f1e3 0%,rgb(246 234 214 / .7) 46%,rgb(239 231 218 / 0) 100%);
  animation:rg-r1 34s ease-in-out infinite alternate;
}
/* a sombra da pedra, embaixo à direita */
.rg-malha i:nth-child(2){
  right:-22vmax;bottom:-26vmax;width:78vmax;height:62vmax;
  background:radial-gradient(closest-side in oklab,#e0cba8 0%,rgb(231 214 187 / .72) 46%,rgb(239 231 218 / 0) 100%);
  animation:rg-r2 38s ease-in-out infinite alternate;
}
/* a luminária: um calor âmbar muito baixo, no alto à direita */
.rg-malha i:nth-child(3){
  right:2vmax;top:-28vmax;width:46vmax;height:64vmax;
  background:radial-gradient(closest-side in oklab,rgb(255 206 140 / .36) 0%,rgb(250 214 164 / .16) 48%,rgb(239 231 218 / 0) 100%);
  animation:rg-r3 26s ease-in-out infinite alternate;
}
@keyframes rg-r1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vmax,3vmax,0) scale(1.1)}}
@keyframes rg-r2{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-5vmax,-3vmax,0) scale(.95)}}
@keyframes rg-r3{from{transform:translate3d(0,0,0) scale(.96)}to{transform:translate3d(-3vmax,3vmax,0) scale(1.08)}}
.rg-malha.wf-pausa i{animation-play-state:paused}
@media (max-width:820px){.rg-malha i{filter:blur(18px)}}

/* ───────── a grade: título e colunas à esquerda, o retrato alto à direita ───────── */
.rg-grade{
  display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,4fr) minmax(0,3.4fr);
  grid-template-areas:"cabeca cabeca retrato" "junto sozinho retrato" "acoes acoes acoes";
  gap:0 clamp(32px,4.2vw,64px);align-items:start;
}
.rg-grade > *{min-width:0}
.rg-cabeca{grid-area:cabeca}
.rg-retrato{grid-area:retrato}
.rg-junto{grid-area:junto}
.rg-sozinho{grid-area:sozinho}
.rg-acoes{grid-area:acoes}
.rg-junto,.rg-sozinho{margin-top:clamp(40px,6vh,64px)}

/* na pedra, a legenda em tinta-baixa (3,2:1) não passa AA: aqui sobe para tinta-media */
.rg .wf-legenda{color:var(--claro-tinta-media)}

/* ───────── cabeça ───────── */
.rg-cabeca .wf-titulo{max-width:9.2em}
.rg-t1,.rg-t2{display:block}
.rg-t2{color:var(--petroleo-vivo)}

/* o retrato: recorte reto com fio, e a fala dele embaixo */
.rg-retrato{margin:0;align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) auto}
/* a caixa toma a altura que o título e as colunas dão; a foto preenche por dentro, sem empurrar nada */
.rg-retrato-caixa{position:relative;min-height:0;border:1px solid var(--claro-fio)}
.rg-retrato picture{position:absolute;inset:0;display:block}
.rg-retrato img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.rg-retrato figcaption{margin-top:16px;padding-left:14px;border-left:1px solid var(--claro-fio)}
.rg-fala-dele{font-style:italic;font-size:1.3125rem;line-height:1.3;color:var(--claro-tinta);max-width:14em}

/* os títulos de coluna: letra de escala, com a marca */
.rg-h3{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding-bottom:10px;border-bottom:1px solid var(--claro-fio);
}
.rg-h3-nome{font:500 1.5rem/1 var(--f-titulo);letter-spacing:.09em;text-transform:uppercase;color:var(--claro-tinta)}
.rg-h3-sub{font-size:var(--t-mini);letter-spacing:.12em;text-transform:uppercase;color:var(--claro-tinta-media)}
.rg-sozinho .rg-h3-nome{color:var(--petroleo-vivo)}

/* junto: palavras grandes e calmas */
.rg-lista{margin-top:clamp(18px,3vh,28px)}
.rg-lista li{
  font:500 clamp(1.875rem,2.75vw,2.625rem)/1.04 var(--f-titulo);letter-spacing:-.002em;color:var(--claro-tinta);
  padding:9px 0;border-top:1px solid var(--claro-fio);
}
.rg-lista li:first-child{border-top:0;padding-top:0}
.rg-grifo{background:none;color:var(--petroleo-vivo);font-style:italic;box-shadow:inset 0 -1px 0 rgb(11 77 87 / .45)}
.rg-junto .wf-apoio{margin-top:clamp(16px,2.6vh,24px);max-width:30em}
.rg-prova{margin-top:clamp(18px,3vh,26px);padding-left:14px;border-left:1px solid var(--claro-fio)}
.rg-prova blockquote{max-width:28em}

/* sozinho: a lista de conferência como marcas numa escala vertical */
.rg-escala{position:relative;margin-top:clamp(18px,3vh,28px);padding-left:64px}
.rg-escala svg{position:absolute;left:0;top:0;display:block;overflow:visible;pointer-events:none}
.rg-itens li{position:relative;padding:4px 0 18px}
.rg-itens li:last-child{padding-bottom:4px}
.rg-itens strong{display:block;font-weight:600;font-size:1.0625rem;line-height:1.3;color:var(--claro-tinta)}
.rg-itens span{display:block;margin-top:2px;font-size:.9375rem;line-height:1.5;color:var(--claro-tinta-media);text-wrap:pretty}
.rg-itens .rg-limite strong{color:var(--petroleo-vivo)}
.rg-itens .rg-limite span{color:var(--claro-tinta)}
.rg-fecho{margin-top:clamp(22px,3.5vh,32px);padding-top:18px;border-top:1px solid var(--claro-fio)}

/* o traço (o SVG é desenhado pelo JS na medida da tela) */
.rg-l-base{fill:none;stroke:var(--claro-tinta);stroke-opacity:.22;stroke-width:1}
.rg-l-aceso{fill:none;stroke:var(--petroleo-vivo);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
.rg-l-resto{fill:none;stroke:var(--claro-tinta);stroke-opacity:.38;stroke-width:1}
.rg-l-tick{stroke:var(--claro-tinta);stroke-opacity:.6;stroke-width:1}
.rg-l-tick.menor{stroke-opacity:.28}
.rg-l-tick.fora{stroke-opacity:.3}
.rg-l-num{fill:var(--claro-tinta);fill-opacity:.62;font-family:var(--f-titulo);font-weight:500;font-size:13px;letter-spacing:.06em}
.rg-l-num.limite{fill:var(--petroleo-vivo);fill-opacity:1;font-weight:600}
.rg-l-tick.limite{stroke:var(--ambar);stroke-opacity:1;stroke-width:1.5;stroke-linecap:round}
.rg-l-losango{fill:var(--ambar);stroke:var(--noite);stroke-width:1.25}
.rg-l-halo{fill:var(--ambar);opacity:.6}

/* entrada: a linha se traça, as marcas surgem uma a uma, a âmbar pousa por último. Uma vez só. */
.rg-escala.anim .rg-l-aceso{stroke-dashoffset:1}
.rg-escala.anim .rg-l-tick,.rg-escala.anim .rg-l-num,.rg-escala.anim .rg-l-resto,.rg-escala.anim .rg-g-limite,.rg-escala.anim .rg-itens li{opacity:0}
.rg-escala.anim.on .rg-l-aceso{animation:rg-tracar 1.1s var(--ease-traco) .1s both}
.rg-escala.anim.on .rg-l-tick,.rg-escala.anim.on .rg-l-num{animation:rg-surgir .5s ease both;animation-delay:calc(.25s + var(--i) * .26s)}
.rg-escala.anim.on .rg-itens li{animation:rg-chegar .7s var(--ease) both;animation-delay:calc(.25s + var(--i) * .26s)}
.rg-escala.anim.on .rg-g-limite{animation:rg-pousar .5s var(--ease) both;animation-delay:calc(.45s + var(--n) * .26s)}
.rg-escala.anim.on .rg-l-resto{animation:rg-surgir .8s ease both;animation-delay:calc(.8s + var(--n) * .26s)}
@keyframes rg-tracar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rg-surgir{from{opacity:0}to{opacity:1}}
@keyframes rg-chegar{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes rg-pousar{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}

/* ───────── fecho ───────── */
.rg-acoes{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;
  margin-top:clamp(40px,6vh,64px);padding-top:clamp(22px,3vh,30px);border-top:1px solid var(--claro-fio);
}
.rg-nota{margin-left:auto;font:500 .9375rem/1.4 var(--f-titulo);letter-spacing:.09em;text-transform:uppercase;color:var(--claro-tinta-media)}
.rg-nota i{font-style:normal;color:var(--petroleo-vivo);padding:0 .25em}

/* ───────── telas médias: o retrato ao lado do junto, o sozinho embaixo ───────── */
@media (max-width:1100px){
  .rg-grade{grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-areas:"cabeca cabeca" "retrato junto" "sozinho sozinho" "acoes acoes";gap:0 clamp(28px,4vw,48px)}
  .rg-retrato{margin-top:clamp(40px,6vh,64px);align-self:start}
  .rg-retrato-caixa{aspect-ratio:2/3}
  .rg-sozinho{max-width:44em;margin-top:clamp(36px,6vh,56px)}
}

/* ───────── celular: tudo em coluna ───────── */
@media (max-width:820px){
  .rg{padding-top:calc(var(--respiro) + 8px);padding-bottom:calc(var(--respiro) + 8px)}
  .rg::before,.rg::after{height:12px}
  .rg-cabeca .wf-titulo{max-width:none}
  .rg-grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"cabeca" "retrato" "junto" "sozinho" "acoes";gap:0}
  .rg-retrato{margin-top:28px}
  .rg-retrato-caixa{aspect-ratio:4/3}
  .rg-retrato img{object-position:50% 30%}
  .rg-fala-dele{font-size:1.125rem}
  .rg-h3-sub{font-size:.875rem}
  .rg-junto,.rg-sozinho{margin-top:30px;max-width:none}
  .rg-lista{margin-top:14px}
  .rg-lista li{font-size:1.75rem;padding:6px 0}
  .rg-junto .wf-apoio{margin-top:14px}
  .rg-prova{margin-top:16px}
  .rg-escala{padding-left:50px;margin-top:16px}
  .rg-itens li{padding-bottom:14px}
  .rg-fecho{margin-top:18px;padding-top:14px}
  .rg-acoes{margin-top:32px;padding-top:22px}
  .rg-acoes .wf-botao{width:100%;justify-content:center;height:56px}
  .rg-nota{margin-left:0;width:100%}
}