/* Seção 02 · "Eu também" · prefixo eu- */
.eu-sec{overflow:clip}
/* a base corta com clip-path o que entrou; aqui a sombra e a luz saem da caixa */
.eu-sec [data-wf="sobe"].wf-visto,.eu-sec [data-wf="surge"].wf-visto{clip-path:none}
.eu-dentro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);align-items:start}

/* título: a frase é uma só; a palavra do meio é a letra de metal */
.eu-topo{grid-column:1/10;grid-row:1;position:relative;z-index:1}
.eu-titulo{margin:0;font-family:var(--wf-f-titulo);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:var(--wf-t-titulo);line-height:1.22}
.eu-batida{display:block}
.eu-batida-eu{margin-bottom:.1em}
.eu-letreiro{display:block;line-height:.86;margin:.02em 0 .1em -.045em;white-space:nowrap}
.eu-letreiro-metal{display:inline-block;filter:drop-shadow(.012em .02em .008em rgba(59,43,32,.55)) drop-shadow(.05em .08em .07em rgba(59,43,32,.24));font-size:clamp(4.4rem,14.4vw,12.95rem);letter-spacing:.01em;padding:.06em .04em .02em 0}
.eu-batida-2{font-style:normal;color:var(--wf-ouro-tinta);max-width:16em;text-wrap:balance}

/* ela, em tamanho de figura, na frente da palavra */
.eu-ela{grid-column:8/13;grid-row:1/3;justify-self:end;position:relative;z-index:2;margin:clamp(-3rem,-3vw,-1rem) 0 0;width:min(100%,520px)}
.eu-ela-luz{position:absolute;z-index:-1;left:-12%;right:-18%;top:2%;bottom:14%;border-radius:50%;background:radial-gradient(closest-side in oklab,var(--wf-gelo-2) 0%,transparent 100%);opacity:.9}
.eu-ela-foto{display:block;width:100%;height:auto;filter:drop-shadow(-1.2rem 1.4rem 1.6rem rgba(59,43,32,.16))}
.eu-ela-etiqueta{position:absolute;right:0;bottom:1.5%;width:13.5rem;padding-top:.8rem;border-top:1px solid var(--wf-ouro-fundo);font-size:var(--wf-t-mini);line-height:1.45;color:var(--wf-cafe-suave)}
.eu-ela-etiqueta b{display:block;margin-bottom:.25rem;font-family:var(--wf-f-titulo);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--wf-cafe)}

/* a fala: os três receios são a própria frase dela, e se riscam */
.eu-fala{grid-column:1/8;grid-row:2;margin:clamp(2rem,3.4vw,3.2rem) 0 0;max-width:38rem}
.eu-fala p{margin:0}
.eu-fala-abre{font-style:italic;font-size:var(--wf-t-lead);line-height:1.5;color:var(--wf-cafe-suave);text-wrap:pretty}
.eu-medos{list-style:none;margin:clamp(1.3rem,2.2vw,2rem) 0;padding:0 0 0 clamp(1rem,2vw,1.8rem);border-left:1px solid var(--wf-ouro-fundo)}
.eu-medos li{font-style:italic;font-weight:300;font-size:clamp(1.18rem,1rem + .9vw,1.7rem);line-height:1.36;color:var(--wf-cafe)}
.eu-medos li + li{margin-top:.35em}
.eu-risco{text-decoration-line:line-through;text-decoration-thickness:.07em;text-decoration-color:transparent;transition:text-decoration-color 1s var(--wf-ease) var(--eu-r,0s),color 1s var(--wf-ease) var(--eu-r,0s)}
.wf-visto .eu-risco,.wf-semjs .eu-risco{text-decoration-color:var(--wf-ouro);color:var(--wf-cafe-suave)}
.eu-fala-vira{font-style:italic;font-weight:300;font-size:clamp(1.3rem,1.05rem + 1.25vw,2.05rem);line-height:1.32;color:var(--wf-cafe);text-wrap:pretty;max-width:19em}
.eu-fala-origem{margin-top:1rem;font-size:var(--wf-t-mini);color:var(--wf-cafe-suave)}
.eu-fala-origem cite{font-style:normal;font-family:var(--wf-f-titulo);letter-spacing:.12em;text-transform:uppercase;color:var(--wf-cafe)}

/* o aparte do outro vídeo: etiqueta de parede sob a figura */
.eu-aparte{grid-column:9/13;grid-row:2;align-self:end;padding-top:.9rem;border-top:1px solid var(--wf-ouro-fundo)}
.eu-aparte p{margin:0}
.eu-aparte-rotulo{font-family:var(--wf-f-titulo);font-size:var(--wf-t-mini);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.6rem!important}
.eu-aparte-texto{color:var(--wf-cafe-suave);text-wrap:pretty}
.eu-aparte-texto i{color:var(--wf-cafe)}

/* fecho: as duas frases que ficam, no centro da parede */
.eu-final{grid-column:1/13;grid-row:3;margin-top:clamp(4rem,8vw,7.5rem);display:flex;flex-direction:column;align-items:center;text-align:center}
.eu-final p{margin:0}
.eu-final-normal{font-size:clamp(1.3rem,1.05rem + 1.25vw,2.05rem);font-weight:300;line-height:1.32;max-width:22em;text-wrap:balance}
.eu-final-onda{display:block;margin:clamp(1.4rem,2.4vw,2.2rem) 0 clamp(1.2rem,2vw,1.8rem);width:clamp(5.5rem,8vw,7.5rem);aspect-ratio:1170/846;filter:drop-shadow(.12rem .2rem .18rem rgba(59,43,32,.3))}
.eu-final-onda i{display:block;width:100%;height:100%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='370 98 1170 846' preserveAspectRatio='none'%3E%3Cpath d='M370 166 C410 122 470 98 540 98 C650 100 740 170 820 290 C900 410 960 520 1030 620 C1090 706 1140 770 1200 826 C1290 900 1400 912 1540 894 C1420 944 1300 944 1220 912 C1140 880 1080 820 1010 720 C930 600 860 470 780 350 C720 262 650 190 570 160 C500 136 430 142 370 166 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='370 98 1170 846' preserveAspectRatio='none'%3E%3Cpath d='M370 166 C410 122 470 98 540 98 C650 100 740 170 820 290 C900 410 960 520 1030 620 C1090 706 1140 770 1200 826 C1290 900 1400 912 1540 894 C1420 944 1300 944 1220 912 C1140 880 1080 820 1010 720 C930 600 860 470 780 350 C720 262 650 190 570 160 C500 136 430 142 370 166 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.eu-final-lema{font-family:var(--wf-f-titulo);font-size:var(--wf-t-titulo);line-height:1.22;letter-spacing:.04em;text-transform:uppercase}
.eu-final-lema span{display:block}
.eu-final-lema span + span{color:var(--wf-ouro-tinta)}
.eu-final-origem{margin-top:1rem!important;font-size:var(--wf-t-mini);color:var(--wf-cafe-suave);max-width:30em}
.eu-final-link{margin-top:1.4rem}

/* celular e tablet: a frase, ela, a fala */
@media (max-width:820px){
  .eu-dentro{display:block}
  .eu-letreiro-metal{font-size:clamp(3.6rem,20.2vw,10rem)}
  .eu-ela{width:min(78vw,400px);margin:1.2rem -2vw 0 auto}
  .eu-ela-etiqueta{position:relative;right:auto;bottom:auto;width:auto;max-width:17rem;margin:-1.2rem 0 0 auto}
  .eu-fala{margin-top:2.4rem}
  .eu-aparte{margin-top:2.6rem}
  .eu-final{margin-top:3.4rem}
}
.eu-ela-etiqueta span{text-wrap:balance}
/* tablet em pé: ela ao lado da fala, não sozinha embaixo */
@media (min-width:600px) and (max-width:820px){
  .eu-dentro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);column-gap:1.5rem}
  .eu-topo{grid-column:1/3}
  .eu-ela{grid-column:2;grid-row:2/4;width:100%;margin:-1.5rem 0 0}
  .eu-fala{grid-column:1;grid-row:2}
  .eu-aparte{grid-column:1;grid-row:3;align-self:start}
  .eu-final{grid-column:1/3;grid-row:4}
}
@media (max-width:420px){
  .eu-final-lema{font-size:1.36rem;letter-spacing:.03em}
  .eu-aparte-rotulo{letter-spacing:.09em}
}