/* Seção "A palavra certa" (id reparadora). Uma palavra recua, a outra fica. */

.re-secao{
  --re-palida:#868ca4;            /* a tinta que sobra em "estética" (3,1:1 sobre o papel, só em corpo grande) */
  --re-vao:clamp(2rem,6vw,6rem);
  --re-col:minmax(0,3.4fr) minmax(0,8.6fr);
}

/* a luz da manhã do hero, bem diluída, para o papel não ficar chapado */
.re-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vmax 44vmax at 96% 24% in oklab,rgb(201 204 217 / .5),rgb(201 204 217 / 0) 70%),
    radial-gradient(38vmax 30vmax at 74% 30% in oklab,rgb(122 43 60 / .07),rgb(122 43 60 / 0) 70%),
    radial-gradient(70vmax 50vmax at 0% 100% in oklab,rgb(230 232 239 / .9),rgb(230 232 239 / 0) 70%);
}

/* título: "estética." perde a tinta, da esquerda para a direita */
.re-titulo{max-width:15.5em}
.re-fica{display:block}
.re-sai{color:var(--re-palida)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wf-js .re-sai{
    color:transparent;
    background-image:linear-gradient(90deg in oklab,var(--re-palida) 0,var(--re-palida) 44%,var(--tinta) 56%,var(--tinta) 100%);
    background-size:230% 100%;background-position:100% 0;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    padding:.08em .04em .16em 0;margin:-.08em -.04em -.16em 0;
  }
  .wf-js .wf-visto .re-sai{background-position:0 0;transition:background-position 1.9s var(--lento) .9s}
}

/* as duas definições, lado a lado */
.re-par{
  display:grid;grid-template-columns:var(--re-col);column-gap:var(--re-vao);align-items:start;
  margin-top:clamp(3.5rem,8vw,7rem);
  font-size:clamp(2.1rem,4.7vw,4.5rem);   /* corpo da definição que fica; o resto mede a partir dele */
}
.re-def blockquote{font-family:var(--serifa);font-style:italic}
.re-def-est{padding-top:.2em}
.re-def-est blockquote{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.35;color:var(--tinta-apagada);max-width:15em}
.re-def-rep{position:relative}
.re-def-rep blockquote{font-size:1em;line-height:1.02;letter-spacing:-.014em;color:var(--vinho);text-wrap:balance;max-width:14em;margin-left:-.03em}
/* o fio sai da definição apagada e chega, com o ponto, à que fica */
.re-def-rep::before{content:"";position:absolute;right:calc(100% + 1.25rem);top:.56em;width:calc(var(--re-vao) - 1.25rem);height:1px;background:linear-gradient(to right in oklab,var(--fio),var(--vinho))}
.re-def-rep::after{content:"";position:absolute;right:calc(100% + 1.25rem - 3px);top:calc(.56em - 3px);width:7px;height:7px;border-radius:50%;background:var(--vinho)}
.re-def-rep .wf-dele-quem{margin-top:1.6rem}

/* por quê: aqui a frase grande vem para a esquerda, para a página não repetir o mesmo desenho três vezes */
.re-porque{
  display:grid;grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr);column-gap:var(--re-vao);align-items:end;
  margin-top:clamp(4rem,9vw,8rem);padding-top:clamp(2rem,4vw,3.25rem);border-top:1px solid var(--fio);
}
.re-margem{font-size:.875rem;font-weight:500;letter-spacing:.04em;color:var(--tinta-suave);margin-bottom:1.5rem}
.re-etapa .wf-dele{color:var(--tinta);font-style:normal;font-size:clamp(1.6rem,3vw,2.75rem);line-height:1.08;letter-spacing:-.01em;max-width:16.5em;text-wrap:balance}
.re-nb{font-style:italic;color:var(--vinho);white-space:nowrap}
.re-explica{display:grid;gap:1.9rem;padding-bottom:.3rem}
.re-nota figcaption{position:relative;padding-left:.95rem;font-size:.875rem;font-weight:500;letter-spacing:.04em;color:var(--tinta-suave);margin-bottom:.45rem}
.re-nota figcaption::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--vinho)}
.re-nota blockquote{font-family:var(--serifa);font-style:italic;font-size:clamp(1.1875rem,1.5vw,1.3125rem);line-height:1.32;color:var(--tinta-suave)}

/* a culpa e o caminho: o mesmo desenho das definições; a culpa recua, o caminho fica */
.re-fecho{
  display:grid;grid-template-columns:var(--re-col);column-gap:var(--re-vao);align-items:start;
  margin-top:clamp(4.5rem,10vw,9rem);
  font-size:clamp(1.8rem,3.7vw,3.5rem);
}
.re-culpa{font-size:var(--t-texto);line-height:1.6;color:var(--tinta-apagada);max-width:19em;padding-top:.25rem}
.re-culpa q{quotes:"“" "”";display:block;margin-top:.5rem;font-family:var(--serifa);font-style:italic;font-size:clamp(1.1875rem,1.5vw,1.3125rem);line-height:1.32;text-wrap:balance}
.re-caminho{position:relative}
.re-caminho blockquote{font-family:var(--serifa);font-size:1em;line-height:1.05;letter-spacing:-.012em;color:var(--tinta);text-wrap:balance;max-width:16em}
.re-caminho em{font-style:italic;color:var(--vinho);white-space:nowrap}
.re-caminho::before{content:"";position:absolute;right:calc(100% + 1.25rem);top:.56em;width:calc(var(--re-vao) - 1.25rem);height:1px;background:linear-gradient(to right in oklab,var(--fio),var(--vinho))}
.re-caminho::after{content:"";position:absolute;right:calc(100% + 1.25rem - 3px);top:calc(.56em - 3px);width:7px;height:7px;border-radius:50%;background:var(--vinho)}
.re-caminho .wf-dele-quem{margin-top:1.3rem}
.re-link{grid-column:2;margin-top:1.4rem;gap:.5rem;font-size:1rem;font-weight:500;justify-self:start}
.re-link span{transition:transform .35s var(--suave)}
.re-link:hover span{transform:translateY(3px)}

@media (max-width:900px){
  .re-par,.re-porque,.re-fecho{grid-template-columns:minmax(0,1fr)}
  /* no celular o fio desce: passa ao lado da frase apagada e para, com o ponto, em cima da que fica */
  .re-def-est,.re-culpa{position:relative;padding:0 0 0 1.25rem}
  .re-def-est::before,.re-culpa::before{content:"";position:absolute;left:2px;top:.3rem;bottom:-2.3rem;width:1px;background:linear-gradient(to bottom in oklab,var(--fio) 55%,var(--vinho))}
  .re-def-rep,.re-caminho{margin-top:3.2rem}
  .re-def-rep::before,.re-caminho::before{display:none}
  .re-def-rep::after,.re-caminho::after{right:auto;left:-1px;top:-.9rem}
  .re-link{grid-column:1}
  .re-porque{align-items:start}
  .re-explica{margin-top:2.4rem;padding-bottom:0}
  .re-culpa{max-width:24em}
}
@media (min-width:601px) and (max-width:900px){
  .re-explica{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}
}
@media (max-width:380px){
  .re-titulo{font-size:2rem}   /* "O nome é reparadora." inteiro numa linha em 360 px */
}