/* IV · Ninguém espera sozinho (es) — seção café; a barra de tempo vira a linha da espera */
.es{
  --es-fundo:#2b1f19;
  --es-fundo-2:#3b2a22;
  --es-texto:#f3ede4;
  --es-apoio:#d8c8b8;
  --es-acento:#d2a77f;
  --es-fio:color-mix(in oklab, #f3ede4 14%, transparent);
  --es-f:0;   /* quanto da linha já encheu (0–1) */
  --es-q:0;   /* quanto do texto da Naila já se escreveu (0–1) */
  position:relative;
  margin-top:clamp(72px, 11vh, 140px);
  color:var(--es-texto);
  background:linear-gradient(180deg in oklab, var(--es-fundo), var(--es-fundo-2));
}
.es-trilho{position:relative;height:320svh}
.es-palco{position:sticky;top:0;height:100svh;max-width:1680px;margin:0 auto;overflow:clip;
  padding:clamp(40px,7vh,72px) var(--margem) clamp(32px,6vh,60px);
  display:flex;flex-direction:column;gap:clamp(24px,4.4vh,48px)}

/* luz morna que acompanha a ponta da linha (a malha do hero, agora sanca) */
.es-luz{position:absolute;z-index:0;pointer-events:none;width:90vmax;height:90vmax;left:calc(var(--es-f) * 100% - 45vmax);top:calc(62% - 45vmax);
  background:radial-gradient(circle closest-side in oklab, color-mix(in oklab, #d2a77f 17%, transparent), color-mix(in oklab, #d2a77f 7%, transparent) 42%, transparent);
  transition:left .9s var(--facil)}
.es-cabeca,.es-corpo{position:relative;z-index:1}
.es-nb{white-space:nowrap}

/* grade comum: 30 / 36 / 34 — a mesma da linha e dos marcos */
.es-cabeca,.es-corpo{display:grid;grid-template-columns:30fr 36fr 34fr;column-gap:clamp(16px,2vw,32px)}
.es-cabeca{align-items:end}
.es-cab-titulo{grid-column:1 / 3}
.es-rotulo{margin:0 0 14px;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--es-apoio)}
.es-rom{font-family:var(--f-serifa);font-weight:600;letter-spacing:.04em;color:var(--es-acento)}
.es-titulo{margin:0;font-family:var(--f-serifa);font-weight:500;font-size:clamp(30px,3.4vw,54px);line-height:1.04;letter-spacing:-.018em;color:var(--es-texto)}
.es-tl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.es-tl>span{display:inline-block}
.es-tl2{color:var(--es-acento)}
.es-apoio{grid-column:3;margin:0;color:var(--es-apoio);text-wrap:pretty}

/* corpo */
.es-corpo{flex:1;min-height:0;grid-template-rows:minmax(0,1fr) auto auto}
.es-retrato{grid-column:1;grid-row:1;align-self:end;margin:0;position:relative;width:min(100%, 230px, 26vh);aspect-ratio:4/5;overflow:hidden;background:#2e211a}
.es-retrato::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(243,237,228,.08)}
.es-retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;
  filter:sepia(calc(.55 * (1 - var(--es-q)))) saturate(calc(.62 + .38 * var(--es-q))) brightness(calc(1.04 - .04 * var(--es-q))) contrast(calc(.92 + .08 * var(--es-q)))}
.es-texto{grid-column:2 / 4;grid-row:1;align-self:end;margin:0;position:relative}
.es-frase{margin:0;font-family:var(--f-serifa);font-weight:500;font-size:clamp(20px, min(2vw, 3.4vh), 32px);line-height:1.34;color:var(--es-texto);text-wrap:pretty}
.es-frase::before{content:"“";position:absolute;right:calc(100% + .14em);top:-.06em;font-size:2.4em;line-height:1;color:var(--es-acento)}
.es-fonte{margin-top:12px;font-size:var(--t-mini);color:var(--es-apoio);letter-spacing:.02em}
.es-fonte strong{color:var(--es-texto);font-weight:600}

/* a linha: sai de borda a borda da tela */
.es-linha{grid-column:1 / -1;grid-row:2;position:relative;height:3px;margin:clamp(20px,3.6vh,36px) calc(-1 * var(--margem)) 0;background:var(--es-fio)}
.es-linha i{position:absolute;inset:0;background:var(--es-acento);transform-origin:left;transform:scaleX(var(--es-f))}
/* régua: riscos finos de dias, acesos até a ponta */
.es-linha::before,.es-linha::after{content:"";position:absolute;left:0;right:0;top:9px;height:6px;
  background:repeating-linear-gradient(90deg, var(--es-fio) 0 1px, transparent 1px 22px)}
.es-linha::after{background:repeating-linear-gradient(90deg, color-mix(in oklab, var(--es-acento) 70%, transparent) 0 1px, transparent 1px 22px);
  clip-path:inset(0 calc((1 - var(--es-f)) * 100%) 0 0)}
.es-linha b{position:absolute;top:50%;left:calc(var(--es-f) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#f3d9bf;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--es-acento) 28%, transparent), 0 0 22px 4px color-mix(in oklab, var(--es-acento) 55%, transparent);opacity:0;transition:opacity .4s}
.js .es.es-vivo .es-linha b{opacity:1}
.es.es-chegou .es-linha i{transition:transform .7s var(--facil)}
.es.es-chegou .es-linha b{transition:left .7s var(--facil), opacity .4s}

.es-marco{grid-row:3;position:relative;display:flex;gap:14px;align-items:flex-start;padding-top:26px;transition:opacity .8s ease}
.es-m1{grid-column:1}.es-m2{grid-column:2}.es-m3{grid-column:3}
.es-marco::before{content:"";position:absolute;left:0;top:-7.5px;width:12px;height:12px;border-radius:50%;background:var(--es-fundo);box-shadow:inset 0 0 0 2px var(--es-fio);transition:background .5s, box-shadow .5s}
.es-marco img{flex:none;width:56px;height:56px;object-fit:cover;filter:sepia(.55) saturate(.62) brightness(1.04) contrast(.92);transition:filter 1.2s ease;box-shadow:0 0 0 1px rgba(243,237,228,.08)}
.es-mtxt{min-width:0}
.es-mtxt p{margin:0}
.es-mrot{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--es-acento)}
.es-mrot .es-rom{margin-right:4px}
.es-mtxt .es-mfala{margin:6px 0 4px;font-family:var(--f-serifa);font-size:clamp(15px,1.1vw,17px);line-height:1.32;color:var(--es-texto);text-wrap:pretty}
.es-mquem{font-size:var(--t-mini);font-weight:600;color:var(--es-apoio)}
.es-aspa{color:var(--es-acento)}

/* estados (só com JS) */
.js .es.es-vivo .es-marco{opacity:.42}
.js .es.es-vivo .es-marco.es-on{opacity:1}
.es-marco.es-on::before{background:var(--es-acento);box-shadow:inset 0 0 0 2px var(--es-acento)}
.es-marco.es-on img,.es:not(.es-vivo) .es-marco img{filter:none}
.js .es.es-vivo .es-frase .es-c{opacity:.16;transition:opacity .35s ease}
.js .es.es-vivo .es-frase .es-c.es-on{opacity:1}
.js .es.es-vivo .es-m3 .es-c{opacity:.4}
.js .es.es-chegou .es-m3 .es-c{opacity:1;animation:es-letra .5s ease both;animation-delay:calc(.35s + var(--i) * 26ms)}
@keyframes es-letra{from{opacity:.4}to{opacity:1}}

/* entrada do título (máscara, como no hero) */
.js .es-tl>span{transform:translateY(105%);transition:transform 1.1s var(--facil)}
.js .es-tl2>span{transition-delay:.18s}
.js .es-rotulo,.js .es-apoio{opacity:0;transition:opacity 1s ease .45s}
.js .es.es-visto .es-tl>span{transform:none}
.js .es.es-visto .es-rotulo,.js .es.es-visto .es-apoio{opacity:1}
.es-w{white-space:nowrap}

/* celular e telas baixas: sem prender; linha vertical à esquerda */
@media (max-width:900px), (max-height:680px){
  .es-trilho{height:auto}
  .es-palco{position:static;height:auto;padding-top:clamp(56px,9vh,80px);padding-bottom:clamp(56px,9vh,80px)}
  .es-cabeca{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .es-cab-titulo,.es-apoio{grid-column:1}
  .es-corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:28px;position:relative;padding-left:30px}
  .es-retrato,.es-texto,.es-m1,.es-m2,.es-m3{grid-column:1;grid-row:auto}
  .es-m1{order:1}.es-m2{order:2}.es-retrato{order:3}.es-texto{order:4}.es-m3{order:5}
  .es-retrato{width:min(62%, 240px)}
  .es-frase::before{display:none}
  .es-frase{font-size:clamp(19px,5.2vw,23px)}
  .es-linha{grid-column:auto;grid-row:auto;position:absolute;left:5px;top:6px;bottom:6px;width:2px;height:auto;margin:0}
  .es-linha i{transform-origin:top;transform:scaleY(var(--es-f))}
  .es-linha::before,.es-linha::after{display:none}
  .es-palco{overflow:clip}
  .es-luz{left:-45vmax;top:calc(var(--es-f) * 70% + 15% - 45vmax);transition:top .9s var(--facil)}
  .es-linha b{left:50%;top:calc(var(--es-f) * 100%)}
  .es.es-chegou .es-linha b{transition:top .7s var(--facil), opacity .4s}
  .es-marco{padding-top:0}
  .es-marco::before{left:-30px;top:4px}
}