/* je · O jeito dela */
.je { background: radial-gradient(ellipse 70% 60% at 85% 10%, var(--ameixa-2), transparent 70%), var(--ameixa); }
.je-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px clamp(32px, 6vw, 96px); align-items: end; }
.je-topo > :not(.je-bilhete) { grid-column: 1; max-width: 760px; }
.je-topo .je-bilhete { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
.je-fio { position: relative; display: block; width: 100%; height: 40px; margin: clamp(40px, 5vw, 72px) 0 0; order: 2; }
.je-fio path { stroke: color-mix(in oklab, var(--manteiga) 55%, transparent); stroke-width: 3; }
.je-intro { margin: clamp(20px, 2.6vw, 32px) 0 0; }

.je-tempos { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1.15fr .95fr 1.1fr 1.4fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.je-cena { position: relative; height: clamp(150px, 15vw, 210px); border-bottom: 2px dashed color-mix(in oklab, var(--creme) 18%, transparent); padding-bottom: 14px; display: flex; align-items: flex-end; margin-bottom: 22px; }
.je-desenho { position: relative; height: 100%; width: auto; max-width: 100%; }
.je-desenho path { stroke: var(--manteiga); stroke-width: 5; }
.je-desenho .je-agua, .je-desenho .je-faixa { stroke-width: 3.5; }
.je-desenho .je-rosa, .je-ponto { stroke: var(--rosa-nevoa); }
.je-ponto { stroke-width: 9 !important; }

.je-nome { margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.3rem, 1rem + .8vw, 1.7rem); color: var(--creme); }
.je-num { font-family: var(--f-titulo); font-weight: 700; font-size: 1.1em; color: var(--ameixa); background: var(--manteiga); width: 1.5em; height: 1.5em; border-radius: 50%; display: inline-grid; place-items: center; line-height: 1; transform: rotate(-6deg); flex: none; }
.je-nome { align-items: center; white-space: nowrap; }
.je-t4 .je-txt { font-family: var(--f-titulo); font-size: 1.2rem; color: var(--creme); }
.je-marca { position: relative; color: var(--rosa-nevoa); }
.je-sub { left: 0; width: 100%; height: .4em; bottom: -.3em; }
.je-sub path { stroke: var(--framboesa); stroke-width: 4; }
.je-porque { margin-bottom: clamp(-40px, -3vw, 0px); }
/* os tempos acendem em sequência: a cena tracejada clareia quando o giz termina */
.js .je-tempo .je-cena { transition: border-color 1s var(--curva); transition-delay: calc(var(--atraso, 0s) + .8s); }
.js .je-tempo.wf-visto .je-cena { border-bottom-color: var(--manteiga); }
.js .je-tempo .giz .tr { animation-delay: calc(var(--d, 0s) + var(--atraso, 0s)); }
.je-txt { margin: 0; font-size: 1rem; line-height: 1.55; color: color-mix(in oklab, var(--creme) 82%, transparent); max-width: 26em; }
.je-fala { margin: 14px 0 0; font-family: var(--f-titulo); font-weight: 450; font-variation-settings: "INFM" 75, "BNCE" 25; font-size: 1.05rem; line-height: 1.4; color: var(--rosa-nevoa); }
.je-fala q { quotes: "“" "”"; }
.je-fala span { display: block; margin-top: 4px; font-family: var(--f-texto); font-size: .875rem; color: color-mix(in oklab, var(--creme) 70%, transparent); }

.je-silaba, .je-palavra { font-family: var(--f-titulo); line-height: .9; letter-spacing: -.02em; }
.je-silaba { font-size: clamp(4rem, 2rem + 5vw, 7rem); font-weight: 500; color: var(--rosa-nevoa); font-variation-settings: "INFM" 100, "BNCE" 100; }
.je-sub3 { left: 0; bottom: -6px; width: 70%; height: 18px; }
.je-sub3 path { stroke: var(--rosa-nevoa); stroke-width: 4; }
.je-palavra { font-size: clamp(4.4rem, 2rem + 6.4vw, 9rem); font-weight: 800; color: var(--manteiga);
  font-variation-settings: "INFM" 100, "BNCE" 100; transition: font-variation-settings 1.4s var(--curva) 2.4s; }
.je-t4.wf-visto .je-palavra { font-variation-settings: "INFM" 0, "BNCE" 0; }
.je-ondas { position: relative; height: 60%; width: auto; margin-left: 6px; align-self: center; }
.je-ondas path { stroke: var(--manteiga); stroke-width: 5.5; }

.je-porque { margin: clamp(72px, 9vw, 120px) auto 0; max-width: 900px; text-align: center; }
.je-porque .wf-texto { margin: 0 auto; max-width: 34em; font-family: var(--f-titulo); font-weight: 500; font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.5; color: var(--creme); }
.je-bilhete { width: min(100%, 340px); }

@media (max-width: 980px) {
  .je-tempos { grid-template-columns: 1fr 1fr; row-gap: 56px; }
}
@media (max-width: 820px) {
  .je-topo { grid-template-columns: minmax(0, 1fr); }
  .je-topo .je-bilhete { grid-column: 1; grid-row: auto; justify-self: center; margin-top: 24px; }
  .je-fio { display: none; }
  .je-tempos { margin-top: 56px; }
}
@media (max-width: 620px) {
  .je-tempos { grid-template-columns: minmax(0, 1fr); row-gap: 36px; border-left: 2px dashed color-mix(in oklab, var(--manteiga) 40%, transparent); padding-left: 18px; }
  .je-tempo:not(.je-t4) { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .je-tempo:not(.je-t4) .je-cena { grid-row: 1 / span 3; height: 110px; margin: 0; border: 0; padding: 0; }
  .je-tempo:not(.je-t4) > :not(.je-cena) { grid-column: 2; }
  .je-silaba { font-size: 3.6rem; }
  .je-cena { height: 140px; }
  .je-porque { text-align: left; }
  .je-nome { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .je-palavra { font-variation-settings: "INFM" 0, "BNCE" 0; } }