/* Hero E aprovado — "Sua pele, com direção." (classes e-) */
.e-hero{position:relative;height:calc(100svh - var(--nav-h));min-height:640px;max-height:980px;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.62fr) minmax(0,.86fr);gap:clamp(18px,3vw,56px);align-items:center;padding:0 var(--gutter)}
.e-texto{max-width:560px}
.e-olho{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ameixa-texto);display:flex;align-items:center;gap:12px;margin-bottom:20px}
.e-sep{width:28px;height:1px;background:currentColor;opacity:.6}
.e-titulo{font-family:var(--serifa);font-weight:300;font-size:clamp(44px,5.4vw,82px);line-height:.98;letter-spacing:-.015em;color:var(--petroleo);font-variation-settings:"opsz" 72}
.e-titulo .e-l1{display:block;color:var(--ameixa);font-weight:300;font-style:italic}
.e-titulo .e-l2{display:inline-block;position:relative;font-weight:400;padding-bottom:.14em}
.e-regua{position:absolute;left:.04em;right:.1em;bottom:0;height:.17em;width:auto;overflow:visible}
.e-apoio{font-size:clamp(15.5px,1.2vw,18px);line-height:1.55;color:var(--tinta-suave);margin:22px 0 28px;max-width:48ch}
.e-acoes{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.e-btn{display:inline-flex;align-items:center;gap:10px;background:var(--petroleo);color:var(--papel);font-weight:600;font-size:15px;padding:15px 24px;border-radius:999px;box-shadow:0 12px 30px -14px color-mix(in oklab, var(--petroleo) 70%, transparent);transition:transform .3s, box-shadow .3s}
.e-btn svg{width:18px;height:18px}
.e-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px color-mix(in oklab, var(--petroleo) 80%, transparent)}
.e-link{font-size:14.5px;color:var(--petroleo);border-bottom:1px solid var(--ameixa-clara);padding-bottom:2px}
.e-prova{display:flex;align-items:center;gap:10px;margin-top:32px;font-size:14px;color:var(--tinta-suave)}
.e-prova strong{font-family:var(--serifa);font-size:26px;font-weight:400;color:var(--petroleo);letter-spacing:-.02em}
.e-estrelas{color:var(--caramelo);letter-spacing:.08em;font-size:13px}
.e-cred{margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--tinta-suave);opacity:.85}

/* proveta */
.e-escala{position:relative;display:grid;grid-template-columns:48px 1fr;column-gap:22px;height:min(62vh,560px);align-self:center}
.e-proveta{position:relative;height:100%;width:48px}
.e-pipeta{position:absolute;left:50%;top:-64px;width:30px;height:90px;transform:translateX(-50%) rotate(8deg);transform-origin:50% 10%;opacity:0}
.e-gota{position:absolute;left:50%;top:18px;width:9px;height:12px;margin-left:-4.5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--ameixa);opacity:0}
.e-tubo{position:absolute;inset:0 0 10px 0;border-radius:8px 8px 20px 20px;background:var(--vidro);box-shadow:var(--vidro-borda);overflow:hidden}
.e-tubo::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:8px 8px 0 0;background:rgba(13,50,70,.1);box-shadow:inset 0 -1px 0 rgba(13,50,70,.25)}
.e-liquido{position:absolute;left:3px;right:3px;bottom:3px;height:0%;border-radius:0 0 18px 18px;background:var(--liquido);transition:height 2.4s cubic-bezier(.3,.8,.2,1);overflow:hidden}
.e-liquido::after{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:6px;border-radius:4px;background:rgba(255,255,255,.35)}
.e-ticks-dentro{position:absolute;left:-3px;right:-3px;bottom:-3px;height:var(--altura-tubo,560px);width:auto;pointer-events:none}
.e-ticks-dentro line{stroke:#fff;stroke-opacity:.7}
.e-aqui{position:absolute;left:-14px;top:var(--aqui-top,78%);transform:translate(-100%,-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ameixa-texto);white-space:nowrap;opacity:0;transition:opacity .6s 1.6s}
.e-aqui::after{content:"";position:absolute;right:-12px;top:50%;width:10px;height:1px;background:var(--ameixa)}
.e-pronto .e-aqui{opacity:1}
.e-menisco{position:absolute;left:-2px;right:-2px;top:-5px;height:10px;z-index:1;border-radius:50%;background:color-mix(in oklch, var(--ameixa-clara) 75%, white);opacity:.95;box-shadow:0 1px 0 rgba(255,255,255,.7)}
.e-ticks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.e-brilho{position:absolute;left:5px;top:10px;bottom:16px;width:5px;border-radius:4px;background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.2));filter:blur(.6px)}
.e-pe{position:absolute;left:50%;bottom:0;width:84px;height:10px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(13,50,70,.12));box-shadow:0 1px 0 rgba(13,50,70,.25), 0 10px 18px -8px rgba(13,50,70,.35)}
.e-marcas{list-style:none;position:relative;height:100%}
.e-marcas li{position:absolute;left:0;top:calc(var(--p) * 100%);transform:translateY(-50%);display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;opacity:0;translate:-8px 0;transition:opacity .6s, translate .6s}
.e-marcas li::before{content:"";position:absolute;left:-30px;top:50%;width:18px;height:1px;background:var(--petroleo);opacity:.45}
.e-marcas b{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--ameixa);letter-spacing:.08em}
.e-marcas span{font-family:var(--serifa);font-size:clamp(16px,1.3vw,20px);color:var(--petroleo);font-weight:400;white-space:nowrap}
.e-marcas small{grid-column:2;font-size:12px;color:var(--tinta-suave);line-height:1.35;max-width:24ch}
.e-marcas .e-ativa span{font-weight:500}
.e-marcas .e-ativa::after{content:"";position:absolute;left:-36px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--ameixa);transform:translate(-2px,-50%);box-shadow:0 0 0 4px color-mix(in oklab, var(--ameixa) 20%, transparent);opacity:0;transition:opacity .5s 1.6s}
.e-pronto .e-marcas .e-ativa::after{opacity:1;animation:e-pulsa 2.6s 2.2s ease-in-out infinite}
@keyframes e-pulsa{0%,100%{box-shadow:0 0 0 4px color-mix(in oklab, var(--ameixa) 20%, transparent)}50%{box-shadow:0 0 0 9px color-mix(in oklab, var(--ameixa) 8%, transparent)}}
.e-voz{position:absolute;left:0;right:-10px;top:calc(100% + 22px);font-family:var(--serifa);font-style:italic;font-size:14.5px;color:var(--tinta-suave);line-height:1.4}
.e-voz em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ameixa-texto);display:block;margin-top:4px}

/* retrato */
.e-retrato{position:relative;align-self:end;justify-self:center;width:min(100%,440px);margin-bottom:0}
.e-retrato img{width:100%;height:auto;position:relative;z-index:1;max-height:calc(100svh - var(--nav-h) - 6vh);object-fit:contain;object-position:bottom}
.e-halo{position:absolute;left:50%;top:-6%;width:125%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle, color-mix(in oklch, var(--ameixa-clara) 55%, var(--papel)) 0%, color-mix(in oklab, var(--greige-2) 60%, transparent) 45%, transparent 70%);filter:blur(22px);z-index:0}
.e-chao{position:absolute;left:10%;right:2%;bottom:-8px;height:34px;border-radius:50%;background:radial-gradient(ellipse at center, rgba(13,50,70,.3), rgba(13,50,70,.1) 50%, transparent 72%);z-index:0}

/* entrada */
.e-entra .e-olho,.e-entra .e-titulo .e-l1,.e-entra .e-titulo .e-l2,.e-entra .e-apoio,.e-entra .e-acoes,.e-entra .e-prova,.e-entra .e-cred{opacity:0;translate:0 14px;animation:e-sobe .9s cubic-bezier(.2,.7,.2,1) forwards}
.e-entra .e-olho{animation-delay:.1s}
.e-entra .e-titulo .e-l1{animation-delay:.25s}
.e-entra .e-titulo .e-l2{animation-delay:.4s}
.e-entra .e-apoio{animation-delay:.6s}
.e-entra .e-acoes{animation-delay:.75s}
.e-entra .e-prova{animation-delay:.9s}
.e-entra .e-cred{animation-delay:1s}
.e-entra .e-retrato{opacity:0;translate:0 24px;animation:e-sobe 1.2s .3s cubic-bezier(.2,.7,.2,1) forwards}
.e-entra .e-escala{opacity:0;animation:e-sobe 1s .5s forwards}
.e-entra .e-pipeta{animation:e-pipeta 2.2s .9s ease-in-out forwards}
.e-entra .e-gota{animation:e-gota 1.1s 1.5s cubic-bezier(.5,0,.9,.6) forwards}
@keyframes e-sobe{to{opacity:1;translate:0 0}}
@keyframes e-pipeta{0%{opacity:0;transform:translate(-50%,-16px) rotate(8deg)}25%{opacity:1;transform:translate(-50%,0) rotate(8deg)}70%{opacity:1;transform:translate(-50%,0) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-22px) rotate(2deg)}}
@keyframes e-gota{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(calc(var(--queda, 420px))) scale(.9)}}
.e-pronto .e-marcas li{opacity:1;translate:0 0}
.e-pronto .e-liquido{height:var(--nivel)}
.e-regua line{stroke:var(--ameixa);stroke-opacity:.85}
.e-regua{opacity:0;transition:opacity 1s 1.4s}
.e-pronto .e-regua{opacity:1}

@media (max-width:1180px){
  .e-hero{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-areas:"texto retrato" "escala retrato";height:auto;max-height:none;min-height:calc(100svh - var(--nav-h));padding-top:4vh;row-gap:48px}
  .e-texto{grid-area:texto}.e-retrato{grid-area:retrato;align-self:end}.e-escala{grid-area:escala;height:380px;margin-bottom:64px}
}
@media (max-width:760px){
  .e-hero{grid-template-columns:1fr;grid-template-areas:"texto" "escala" "retrato";padding-top:2vh;row-gap:0;min-height:0}
  .e-titulo{font-size:clamp(42px,12.5vw,58px)}
  .e-escala{height:auto;grid-template-columns:1fr;row-gap:16px;margin:36px 0 0}
  .e-proveta{height:34px;width:100%}
  .e-pipeta,.e-gota,.e-pe,.e-brilho{display:none}
  .e-tubo{inset:0;border-radius:17px}
  .e-tubo::before{display:none}
  .e-liquido{left:3px;right:auto;top:3px;bottom:3px;height:auto!important;width:0%;border-radius:14px 0 0 14px;transition:width 2.2s cubic-bezier(.3,.8,.2,1)}
  .e-liquido::after,.e-ticks,.e-ticks-dentro{display:none}
  .e-aqui{left:calc(var(--nivel) - 8px);right:auto;top:auto;bottom:-22px;transform:translate(0,0)}
  .e-aqui::after{display:none}
  .e-pronto .e-liquido{width:var(--nivel)}
  .e-menisco{top:-2px;bottom:-2px;left:auto;right:-6px;width:12px;height:auto}
  .e-marcas{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
  .e-marcas li{position:static;transform:none;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline}
  .e-marcas li::before,.e-marcas .e-ativa::after{display:none}
  .e-marcas span{white-space:normal;font-size:17px}
  .e-marcas small{grid-column:2;font-size:11.5px;max-width:none}
  .e-marcas li:nth-child(1){order:5}.e-marcas li:nth-child(2){order:4}.e-marcas li:nth-child(3){order:3}.e-marcas li:nth-child(4){order:2}.e-marcas li:nth-child(5){order:1}
  .e-voz{position:static;margin-top:6px}
  .e-retrato{width:min(70%,320px);justify-self:end;margin-top:28px}
  .e-retrato img{max-height:none}
  .e-chao{display:none}
}