/* Orchard: o site (direção E · papel e tinta).
   As classes or-* vêm do design system do app (botão, ícone, vidro, cartão, etiqueta, pontos). As classes e-* são do site.
   Cores: papel #F5F1E8, tinta #111111, azul #2F5BFF, laranja #FF6B1A, azul do rodapé #1C3578. */

/* as fontes só trazem as letras do português e os pesos usados aqui (ver LEIA-ME) */
@font-face{font-family:'Overused Grotesk';src:url('fonts/OverusedGrotesk.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Libre Caslon Condensed';src:url('fonts/LibreCaslonCondensed.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Libre Caslon Condensed';src:url('fonts/LibreCaslonCondensed-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono.woff2') format('woff2');font-weight:400 500;font-display:swap}

/* do design system do app (só o que o site usa) */
.or-icone{display:inline-flex;flex:none;width:16px;height:16px}
.or-icone svg{width:100%;height:100%;overflow:visible}
.or-icone--vivo rect{transform-box:fill-box;transform-origin:center}
*:hover>.or-icone--vivo rect,.or-icone--vivo:hover rect{animation:or-onda 420ms cubic-bezier(.4,0,.2,1);animation-delay:calc(var(--i,0) * 14ms)}
*:active>.or-icone--vivo,.or-icone--vivo:active{transform:scale(.88);transition:transform 160ms}
@keyframes or-onda{0%,100%{transform:translateY(0)}40%{transform:translateY(-1.5px) scale(1.25)}}
.or-botao{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:999px;font:inherit;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;transition:transform 160ms cubic-bezier(.2,.8,.2,1),background-color 160ms,color 160ms}
.or-botao:before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background-image:radial-gradient(circle,currentColor 1px,transparent 1.5px);background-size:6px 6px;background-position:0 0;transition:opacity 420ms,background-position 640ms cubic-bezier(.2,.8,.2,1)}
.or-botao:hover{transform:translateY(-1px)}
.or-botao:hover:before{opacity:.16;background-position:3px -3px}
.or-botao:active{transform:translateY(0) scale(.97)}
.or-botao:hover .or-icone rect:nth-child(4n+1){fill:#2F5BFF}
.or-botao:hover .or-icone rect:nth-child(4n+2){fill:#8BBEFF}
.or-botao:hover .or-icone rect:nth-child(4n+3){fill:#FFC98A}
.or-botao:hover .or-icone rect:nth-child(4n){fill:#FF6B1A}
.or-botao--m{height:48px;padding:0 22px;font-size:15px}
.or-botao--primario{background:#0B0B0B;color:#FFFFFF}
.or-botao--primario:hover{background:#2B2A26}
.or-botao--cor{background:#2F5BFF;color:#FFFFFF}
.or-botao--cor:hover{background:#1E46D6}
.or-botao--cor:hover .or-icone rect{fill:#FFFFFF!important}
.or-botao--cor:hover .or-icone rect:nth-child(3n){fill:#FFC98A!important}
.or-botao--secundario{background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(#CFD6E2,#CFD6E2) border-box;color:#0B0B0B}
.or-botao--secundario:hover{background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(120deg,#2F5BFF,#8BBEFF 38%,#FFC98A 64%,#FF6B1A) border-box}
.or-botao:disabled{opacity:.45;cursor:not-allowed;transform:none}
.or-botao:disabled:before{display:none}
.or-status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 2px;border-radius:7px;box-sizing:border-box;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;flex:none}
.or-status__ponto{width:6px;height:6px;border-radius:999px;flex:none}
.or-status--cliente{background:#E8EEFF;color:#1E46D6}
.or-status--cliente .or-status__ponto{background:#2F5BFF}
.or-status--agencia{background:#F0F1F3;color:#0B0B0B}
.or-status--agencia .or-status__ponto{background:#0B0B0B}
.or-status--pronta{background:#FFEDE0;color:#B4470A}
.or-status--pronta .or-status__ponto{width:12px;background:#FF6B1A}
.or-pontos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.or-pontos__grupo{display:inline-flex;align-items:center;gap:7px}
.or-pontos__fila{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.or-pontos__ponto{width:10px;height:10px;border-radius:999px;box-sizing:border-box;flex:none}
.or-pontos__ponto--entregue{width:18px;background:#FF6B1A}
.or-pontos__ponto--cliente{background:#2F5BFF}
.or-pontos__ponto--agencia{background:#0B0B0B}
.or-pontos__texto{font-size:13px;white-space:nowrap}
.or-pontos__texto--entregue{font-weight:500;color:#B4470A}
.or-pontos__texto--cliente{font-weight:500;color:#1E46D6}
.or-pontos__texto--agencia{color:#0B0B0B}
.or-vidro{position:relative;box-sizing:border-box;background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.62);box-shadow:0 10px 30px rgba(10,24,60,.12)}
.or-vidro--painel{padding:6px;border-radius:22px}
.or-vidro__dentro{height:100%;box-sizing:border-box;border-radius:17px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);overflow:hidden}
.or-vidro--halo{padding:9px;border-radius:27px}
.or-vidro--halo>.or-cartao{box-shadow:none}
.or-cartao{position:relative;box-sizing:border-box;padding:0 6px 6px;border-radius:18px;background:rgba(246,247,249,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 28px rgba(10,24,60,.10);color:#17181B}
.or-cartao__cab{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 8px 8px 10px;box-sizing:border-box}
.or-cartao__titulo{flex:1;min-width:0;margin:0;font-family:'Libre Caslon Condensed',Georgia,serif;font-weight:400;font-size:23px;line-height:1.05}
.or-cartao__selo{width:30px;height:30px;flex:none;border-radius:9px;background:#FFFFFF;box-shadow:0 1px 2px rgba(16,24,40,.08);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.or-cartao__miolo{position:relative;background:#FFFFFF;border:1px solid #ECECEE;border-radius:13px;box-shadow:0 1px 2px rgba(16,24,40,.04);overflow:hidden}
/* cada ponto e cada cápsula da ilustração é um <i> posicionado; contain deixa o navegador redesenhar só a figura a cada quadro */
.or-ilustracao{position:relative;display:inline-block;flex:none;overflow:hidden;contain:layout paint}
.or-ilustracao i{position:absolute;border-radius:999px}

*{box-sizing:border-box}
html{scroll-padding-top:100px}
html.lenis,html.lenis body{height:auto}
.e-hero h1>div,.e-hero h1 em>div,[data-titulo]>div{padding-bottom:.16em;margin-bottom:-.16em}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.e-so-leitor{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body{margin:0;background:#F5F1E8 url('img/textura-papel.webp') 0 0/740px auto;color:#111111;font-family:'Overused Grotesk',system-ui,sans-serif;font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%}
picture{display:contents}
:focus-visible{outline:2px solid #2F5BFF;outline-offset:2px}
[hidden]{display:none!important}
.pular{position:absolute;left:16px;top:-60px;z-index:20;padding:10px 16px;border-radius:10px;background:#111111;color:#FFFFFF}
.pular:focus{top:12px}
.w{position:relative;width:100%;max-width:1312px;margin:0 auto;padding:0 32px}
.sf{font-family:'Libre Caslon Condensed',Georgia,serif;font-weight:400}
.sf em{font-style:italic;color:#2F5BFF}
h1,h2,h3{text-wrap:balance}
.mono{font-family:'Geist Mono',ui-monospace,monospace}
.trama{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;background:#2F5FB3}
.e-sec{position:relative;padding:136px 0}
.e-sec--junto{padding-top:24px}
.e-titulo{margin:0;max-width:900px;font-size:72px;line-height:.96;letter-spacing:-.01em}
/* topo */
.e-barra{position:fixed;left:0;right:0;top:0;z-index:50;padding-top:14px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.e-barra.is-escondida{transform:translateY(calc(-100% - 6px))}
/* o menu mora num vidro de cantos redondos, que deixa ler sobre a pintura do topo */
.e-barra__vidro{padding:0 12px 0 22px;border-radius:22px;background:rgba(250,247,240,.7);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.78);box-shadow:0 10px 30px rgba(40,30,10,.10);transition:background-color .4s,box-shadow .4s}
.e-barra.is-rolada .e-barra__vidro{background:rgba(250,247,240,.84);box-shadow:0 14px 36px rgba(40,30,10,.14)}
.e-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:64px}
.e-nav__logo{display:block;width:max-content}
.e-logo{display:block;height:26px;width:auto;overflow:visible}
/* o logo: passando o mouse, os galhos encolhem em ponto e esticam de novo, um atrás do outro, e as laranjas pulam */
.e-logo__arvore path{transform-box:fill-box;transform-origin:center}
.e-nav__logo:hover .e-logo__arvore path{animation:e-galho .95s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 60ms)}
.e-nav__logo:hover .e-logo__arvore path[fill="#FF6B1A"]{animation-name:e-fruta}
@keyframes e-galho{0%,100%{transform:none}35%{transform:scaleX(.16)}70%{transform:scaleX(1.1)}}
@keyframes e-fruta{0%,100%{transform:none}40%{transform:translateY(-70%) scaleX(.6)}70%{transform:translateY(10%)}}
.e-links{display:flex;gap:30px;font-size:14px;color:#3A3935}
/* links do menu e do rodapé: o ponto estica. Nasce no começo da palavra e vira uma fileira do logo, azul com a laranja na ponta */
.e-links a,.e-cols a{position:relative;display:inline-block}
.e-links a:after,.e-cols a:after,.e-links a:before,.e-cols a:before{content:"";position:absolute;bottom:-7px;height:4px;border-radius:999px;opacity:0}
.e-links a:after,.e-cols a:after{left:0;width:4px;background:#2F5BFF;transition:width .55s cubic-bezier(.2,.8,.2,1),opacity .2s}
.e-links a:before,.e-cols a:before{right:0;width:4px;background:#FF6B1A;scale:0;transition:scale .3s cubic-bezier(.3,1.5,.5,1),opacity .15s}
.e-links a:hover:after,.e-cols a:hover:after,.e-links a:focus-visible:after,.e-cols a:focus-visible:after{width:calc(100% - 8px);opacity:1}
.e-links a:hover:before,.e-cols a:hover:before,.e-links a:focus-visible:before,.e-cols a:focus-visible:before{scale:1;opacity:1;transition-delay:.32s}
.e-nav__cta{justify-self:end}
.e-hero{padding-top:150px;text-align:center}
.e-hero h1{margin:16px auto;font-size:88px;line-height:.94;letter-spacing:-.012em}
.e-hero__lead{margin:0 auto 26px;max-width:500px;font-size:17px;line-height:26px;color:#55524C}
.e-botoes{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
/* --sobe é a entrada (GSAP); --cresce e --desce vêm da rolagem (main.js, desceTopo) */
.e-palco{--sobe:0px;position:relative;display:flow-root;margin-top:16px;padding:0 32px 72px;translate:0 var(--sobe);scale:calc(.93 + var(--cresce,1) * .07)}
/* a pintura do topo começa no alto da página, atrás do menu e do título, e some no papel embaixo do painel */
#topo{position:relative}
.e-cena{position:absolute;left:0;right:0;top:0;height:1500px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 68%,transparent 100%)}
.e-cena__img{--abre:1;display:block;width:100%;height:118%;object-fit:cover;object-position:68% top;scale:var(--abre);translate:0 calc(var(--desce,0) * 12% - 12%)}
/* um véu de papel bem leve atrás do título, para ler bem sobre o céu */
.e-cena:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 48% 22% at 50% 22%,rgba(245,241,232,.86),rgba(245,241,232,.5) 45%,rgba(245,241,232,0) 82%),linear-gradient(180deg,rgba(245,241,232,.62) 0,rgba(245,241,232,0) 150px)}
.e-janela{position:relative;z-index:3;max-width:1114px;margin:120px auto 0;padding:10px;border-radius:26px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(17,17,17,.08);box-shadow:0 40px 100px rgba(40,30,10,.18);transition:scale .9s cubic-bezier(.2,.8,.2,1),box-shadow .9s cubic-bezier(.2,.8,.2,1)}
.e-janela__corte{position:relative;overflow:hidden;border-radius:17px}
@media (hover:hover){.e-palco .e-janela:hover{scale:1.035;box-shadow:0 60px 140px rgba(40,30,10,.24)}}
.e-janela img{display:block;width:100%;height:auto}


/* a fileira de pontos entre as seções */
.e-divisa{position:relative;height:7px;background:radial-gradient(circle,#B9B1A0 1.2px,transparent 1.6px) 0 0/10px 7px repeat-x;overflow:hidden}
.e-divisa i{position:absolute;top:0;left:0;width:60px;height:7px;background:radial-gradient(circle,#FF6B1A 2px,transparent 2.4px) 0 0/10px 7px}

/* a faixa em ASCII: as 9 etapas desenhadas em caracteres, com uma lente que segue o mouse */
.e-ascii{position:relative;padding:8px 0 0}
.e-ascii__tela{display:block;width:100%;height:230px;cursor:crosshair}

/* o manifesto: a laranjeira em pontos, grande */
.e-manifesto__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.e-manifesto h2{margin:0;font-size:80px;line-height:.94;letter-spacing:-.012em}
.e-manifesto__txt{margin:26px 0 0;max-width:480px;font-size:19px;line-height:29px;color:#55524C}
.e-manifesto__arvore{display:flex;justify-content:center}
.e-manifesto__arvore .or-ilustracao{max-width:100%}

/* o problema */
.e-dores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:64px;border-top:1px solid #111111}
.e-dor{display:flex;flex-direction:column;gap:16px;padding:36px 36px 12px 0}
.e-dor+.e-dor{padding-left:36px;border-left:1px solid #E1DACB}
.e-dor__ilu{height:150px;display:flex;align-items:flex-end}
.e-dor h3{margin:8px 0 0;font-size:34px;line-height:1}
.e-dor>p{margin:0;font-size:16px;line-height:24px;color:#55524C}
.e-dor__orchard{margin-top:auto;padding-top:16px;border-top:1px solid #E1DACB}
.e-dor__orchard b{font-size:13px;font-weight:600;color:#1E46D6}
.e-dor__orchard p{margin:6px 0 0;font-size:16px;line-height:24px}

/* uma seção só, parada na tela: a parte A (passos) e a parte B (abas) ficam uma sobre a outra.
   Cada parte usa um pedaço da rolagem (data-de, data-ate) e, no meio, a virada troca os lados (--vira, de 0 a 1, no main.js). */
.e-rolo{position:relative;height:calc(100vh + 9 * 70vh)}
.e-rolo__fixo{position:sticky;top:0;height:100vh;overflow:hidden}
.e-parte{position:absolute;inset:0;display:flex;align-items:center}
.e-duplo{--vira:0}
.e-parte--a{opacity:clamp(0,calc(1 - var(--vira) * 1.8),1)}
.e-parte--b{opacity:clamp(0,calc(var(--vira) * 1.8 - .8),1)}
/* tudo anda para a direita: a parte A sai por ali e a parte B chega da esquerda */
.e-parte--a .e-rolo__texto{translate:calc(var(--vira) * 28vw) 0}
.e-parte--a .e-rolo__palco{translate:calc(var(--vira) * 18vw) 0}
.e-parte--a .e-rolo__fundo{translate:calc(var(--vira) * 10vw) 0}
.e-parte--b .e-telas__lado{translate:calc((var(--vira) - 1) * 28vw) 0}
.e-parte--b .e-telas__janela{translate:calc((var(--vira) - 1) * 18vw) 0}
.e-parte--b .e-rolo__fundo{translate:calc((var(--vira) - 1) * 10vw) 0}
.e-duplo.is-b .e-parte--a,.e-duplo:not(.is-b) .e-parte--b{pointer-events:none}
/* a pintura de cada passo, atrás de tudo, sumindo no papel nas bordas */
.e-rolo__fundo{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 50% 82% at 80% 52%,#000 30%,transparent 82%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 50% 82% at 80% 52%,#000 30%,transparent 82%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-composite:intersect}
.e-rolo__fundo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.07;transition:opacity 1s,scale 1.8s cubic-bezier(.2,.8,.2,1)}
.e-rolo__fundo img.is-ativo{opacity:1;scale:1}
.e-parte>.w{z-index:1}
.e-rolo__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.e-rolo__texto h2,.e-telas__lado h2{margin:0 0 36px;font-size:64px;line-height:.96;letter-spacing:-.01em}
.e-passos,.e-abas{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.e-passo{position:relative}
.e-passo__cab{display:flex;align-items:center;gap:18px;width:100%;min-height:62px;padding:16px 0;border:0;background:transparent;font:inherit;font-size:20px;line-height:26px;font-weight:500;color:#9A958A;text-align:left;cursor:pointer;transition:color .3s}
.e-passo__cab .mono{flex:none;width:26px;font-size:13px;font-weight:400}
.e-passo.is-ativo .e-passo__cab{color:#111111}
.e-passo__barra{position:absolute;left:0;right:0;top:-2px;height:4px;background:linear-gradient(#E1DACB,#E1DACB) 0 50%/100% 1px no-repeat}
.e-passo__barra i{position:absolute;inset:0;background:linear-gradient(90deg,#2F5BFF,#8BBEFF 38%,#FFC98A 64%,#FF6B1A);-webkit-mask:radial-gradient(circle,#000 1.5px,transparent 2px) 0 0/6px 4px;mask:radial-gradient(circle,#000 1.5px,transparent 2px) 0 0/6px 4px;clip-path:inset(0 100% 0 0)}
.e-passo__corpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.e-passo__corpo>p{overflow:hidden;margin:0;padding-left:44px;max-width:470px;font-size:16px;line-height:25px;color:#55524C}
.e-passo.is-ativo .e-passo__corpo{grid-template-rows:1fr}
.e-passo.is-ativo .e-passo__corpo>p{padding-bottom:20px}
.e-rolo__palco{position:relative;display:flex;flex-direction:column;align-items:center}
.e-rolo__cartoes{position:relative;width:min(480px,100%);height:320px}
.e-cartao{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(30px);pointer-events:none;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.e-cartao.is-ativo{opacity:1;transform:none;pointer-events:auto}
.e-linha{display:flex;align-items:center;gap:12px;padding:12px 16px}
.e-linha+.e-linha{border-top:1px solid #F0F1F3}
.e-linha .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.e-linha .txt b{font-size:14px;font-weight:500;line-height:19px}
.e-linha .txt small{font-size:12px;line-height:17px;color:#6B7280}
.e-pe-card{padding:10px 16px;border-top:1px solid #F0F1F3;font-size:12px;line-height:17px;color:#4B5160}
.e-etapas{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;padding:20px 16px 8px}
.e-etapas i{display:block;height:12px;border-radius:999px;transition:width .5s cubic-bezier(.2,.8,.2,1),background-color .3s}
.e-etapa-nome{margin:0;padding:6px 16px 16px;font-size:14px;color:#4B5160}
.e-cliente{padding:16px}
.e-cliente__tipo{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#1E46D6}
.e-cliente__tipo:before{content:"";width:7px;height:7px;border-radius:999px;background:#2F5BFF}
.e-cliente b{display:block;margin-top:6px;font-size:18px;font-weight:500;line-height:24px}
.e-cliente p{margin:6px 0 14px;font-size:14px;line-height:21px;color:#4B5160}
.e-cliente__par{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.e-cliente__par .or-botao{padding:0 12px}

/* as cenas da seção parada: o que tem e-vez entra e sai conforme o passo anda (data-liga e data-desliga, no main.js) */
.e-vez{transition:opacity .4s,translate .6s cubic-bezier(.2,.8,.2,1)}
.e-vez:not(.is-ligado){opacity:0;translate:0 8px;pointer-events:none}
.e-troca{display:inline-grid}
.e-troca>*{grid-area:1/1}
.or-cartao__cab .e-troca{justify-items:end}
/* passo 01: o documento cai no cartão, a barra enche e as peças aparecem */
.e-importa{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;background:#FFFFFF;font-size:13px;color:#4B5160;text-align:center}
.e-arquivo{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:1px solid #E6E8EE;border-radius:12px;background:#FFFFFF;box-shadow:0 10px 26px rgba(16,24,40,.10);text-align:left;transition:opacity .4s,translate .7s cubic-bezier(.3,1.4,.5,1),rotate .7s cubic-bezier(.3,1.4,.5,1)}
.e-arquivo:not(.is-ligado){translate:0 -30px;rotate:-5deg}
.e-arquivo b{display:block;font-size:14px;font-weight:600;color:#111111}
.e-arquivo small{font-size:12px;color:#6B7280}
.e-importa__barra,.e-subida{position:relative;display:block;width:min(260px,80%);height:4px;border-radius:9px;background:#ECEEF3;overflow:hidden}
.e-importa__barra i,.e-subida i,.e-capa__barra i{position:absolute;inset:0;background:linear-gradient(90deg,#2F5BFF,#8BBEFF 38%,#FFC98A 64%,#FF6B1A);transform-origin:0 50%;scale:var(--enche,0) 1}
.e-subida{width:100%;margin-top:6px}
/* passo 03: o cliente aprova uma peça, ela sai e a próxima chega */
.e-fila__trilho{display:flex;width:200%;transition:translate .8s cubic-bezier(.7,0,.2,1)}
.e-fila__trilho>*{width:50%;box-sizing:border-box}
.e-fila__trilho.is-ligado{translate:-50% 0}
.e-mini{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.e-mini__pontos{display:flex;gap:4px}
.e-mini__pontos i{width:7px;height:7px;border-radius:9px;background:#ECEEF3;box-shadow:inset 0 0 0 1px #CFD6E2;transition:width .5s cubic-bezier(.2,.8,.2,1),background-color .3s,box-shadow .3s}
.e-mini__pontos i:nth-child(1){--c:#3D7DFF}.e-mini__pontos i:nth-child(2){--c:#4F92FF}.e-mini__pontos i:nth-child(3){--c:#2F5BFF}.e-mini__pontos i:nth-child(4){--c:#8BBEFF}.e-mini__pontos i:nth-child(5){--c:#FFC98A}.e-mini__pontos i:nth-child(6){--c:#FFB066}.e-mini__pontos i:nth-child(7){--c:#2F5BFF}.e-mini__pontos i:nth-child(8){--c:#FF8030}.e-mini__pontos i:nth-child(9){--c:#FF6B1A}
.e-mini__pontos i.f,.e-mini.is-ligado i.p{width:16px;background:var(--c);box-shadow:none}
.e-mini small{font-size:12px;color:#4B5160}
.e-aprova{position:relative;overflow:hidden;transition:background-color .4s}
.e-aprova.is-ligado{background:#FF6B1A}
.e-toque{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.5)}
.e-toque.is-ligado{animation:e-toque .7s ease-out forwards}
@keyframes e-toque{from{scale:.2;opacity:1}to{scale:2.6;opacity:0}}

/* visto por dentro */
.e-telas{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:center}
.e-telas__lado{order:2}
.e-parte--b .e-rolo__fundo{-webkit-mask-image:radial-gradient(ellipse 50% 82% at 22% 52%,#000 30%,transparent 82%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:radial-gradient(ellipse 50% 82% at 22% 52%,#000 30%,transparent 82%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.e-aba{position:relative}
.e-aba button{display:flex;align-items:flex-start;gap:14px;width:100%;padding:16px 0;border:0;background:transparent;font:inherit;color:#9A958A;text-align:left;cursor:pointer;transition:color .3s}
.e-aba.is-ativo button{color:#111111}
.e-aba__icone{flex:none;width:32px;height:32px;border-radius:10px;background:#FFFDF8;border:1px solid #E6DFD0;display:flex;align-items:center;justify-content:center;transition:background-color .3s,border-color .3s,color .3s}
.e-aba.is-ativo .e-aba__icone{background:#EEF3FF;border-color:#D6E0FF;color:#1E46D6}
.e-aba b{display:block;font-size:17px;line-height:23px;font-weight:600}
.e-aba small{display:block;margin-top:3px;font-size:14px;line-height:20px}
.e-telas__janela{margin:0;max-width:none}
.e-rolo__legenda{display:none}
.e-rolo__legenda b{display:block;font-size:18px;line-height:24px;font-weight:600}
.e-rolo__legenda p{margin:6px 0 0;font-size:15px;line-height:22px;color:#55524C}
.e-telas__janela .e-janela__corte{aspect-ratio:2400/1500;container-type:inline-size}
/* as telas do app: cada uma anda com a rolagem da sua aba. A câmera chega perto, o cursor clica e a tela responde (main.js, CAMERAS).
   O que fica por cima da foto usa medidas em % da foto e letras em cqw, para crescer junto com ela. */
.e-tela{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.e-tela.is-ativo{opacity:1}
.e-tela__cam{position:absolute;left:0;top:0;width:100%;container-type:inline-size;transform-origin:0 0}
.e-telas__janela .e-tela__cam img{width:100%;max-width:none}
.e-tela__cam>span{position:absolute;box-sizing:border-box}
.e-tela__cam .or-icone{width:1.2cqw;height:1.2cqw}
.e-capa{display:flex;align-items:center;justify-content:center;background:#FFFFFF;clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.e-capa:not(.is-ligado){clip-path:inset(100% 0 0 0)}
.e-capa__zona{display:flex;flex-direction:column;align-items:center;gap:.9cqw;width:52%;padding:2.6cqw 2cqw;border:.15cqw dashed #C3CEE8;border-radius:1.4cqw;background:#F7F9FD;font-size:1.05cqw;color:#4B5160;text-align:center}
.e-capa__zona>b{font-size:1.45cqw;font-weight:600;color:#111111}
.e-capa__icone{display:flex;flex:none;align-items:center;justify-content:center;width:2.8cqw;height:2.8cqw;border-radius:.8cqw;background:#FFFFFF;box-shadow:0 .1cqw .3cqw rgba(16,24,40,.12)}
.e-capa__arquivo{display:flex;align-items:center;gap:.8cqw;margin-top:.6cqw;padding:.6cqw 1.4cqw .6cqw .6cqw;border-radius:1cqw;background:#FFFFFF;box-shadow:0 .8cqw 2cqw rgba(16,24,40,.12);text-align:left}
.e-capa__arquivo b{display:block;font-size:1.1cqw;font-weight:600;color:#111111}
.e-capa__arquivo small{font-size:.9cqw}
.e-capa__barra{position:relative;display:block;width:70%;height:.4cqw;border-radius:9px;background:#E3E8F2;overflow:hidden}
.e-anel{border:.18cqw solid #2F5BFF;border-radius:1.2cqw;box-shadow:0 0 0 .45cqw rgba(47,91,255,.16)}
.e-faixa{margin-top:calc(var(--enche,0) * 18%);background:rgba(47,91,255,.08);box-shadow:inset .3cqw 0 0 #2F5BFF}
.e-trilho-foto{display:flex;align-items:center;gap:.5cqw;padding:0 .3cqw;background:#FFFFFF}
.e-trilho-foto i{--f:clamp(0,(var(--enche,0) * 3 - var(--k)) * 4,1);flex:none;width:calc(.8cqw + var(--f) * 1.55cqw);height:.8cqw;border-radius:9px;background:color-mix(in srgb,#2F5BFF calc(var(--f) * 100%),#EEF0F4);box-shadow:inset 0 0 0 .08cqw rgba(196,204,218,calc(1 - var(--f)))}
.e-trilho-foto--p{gap:.25cqw;padding:0}
.e-trilho-foto--p i{width:calc(.5cqw + var(--f) * .7cqw);height:.5cqw}
.e-botao-foto{display:flex;align-items:center;justify-content:center;gap:.4cqw;border-radius:9cqw;background:#FFFFFF;box-shadow:inset 0 0 0 .12cqw #2F5BFF;color:#1E46D6;font-size:1cqw;font-weight:600;white-space:nowrap}
.e-botao-foto--claro{font-size:.9cqw}
.e-nova{display:flex;align-items:center;gap:1.2cqw;padding:0 1.2cqw;background:#FFFFFF;box-shadow:0 .1cqw 0 #F0F1F3;font-size:1.05cqw;color:#111111}
.e-nova:not(.is-ligado){translate:0 -1.6cqw}
.e-nova>i{flex:none;width:1.6cqw;height:1.6cqw;border-radius:50%;background:#FF6B1A}
.e-nova small{display:block;margin-top:.2cqw;font-size:.9cqw;color:#6B7280}
.e-conta-foto{display:flex;align-items:center;justify-content:center;border-radius:.6cqw;background:#FFEDE0;color:#B4470A;font-size:.95cqw;font-weight:600}
/* o cursor da cena: anda pelos quadros de CAMERAS e não cresce com o zoom */
.e-mira{z-index:3;width:1.5cqw;transform-origin:0 0;scale:calc(1 / var(--zoom,1))}
.e-mira svg{display:block;width:100%;height:auto;filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.3));transition:scale .2s}
.e-mira:before{content:"";position:absolute;left:-1.3cqw;top:-1.3cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;background:rgba(47,91,255,.4);opacity:0}
.e-mira.is-clicando:before{animation:e-clique .6s ease-out}
.e-mira.is-clicando svg{scale:.84}
@keyframes e-clique{from{opacity:1;scale:.3}to{opacity:0;scale:1.7}}
.e-mira__carga{position:absolute;left:1.3cqw;top:1.8cqw;display:flex;align-items:center;gap:.5cqw;padding:.5cqw .9cqw;border-radius:.7cqw;background:#FFFFFF;box-shadow:0 .6cqw 1.6cqw rgba(16,24,40,.2);font-size:1cqw;font-weight:600;color:#111111;white-space:nowrap}
/* o aviso que a tela mostra depois do clique; fica parado, fora da câmera */
.e-aviso{position:absolute;left:0;right:0;bottom:5%;z-index:4;display:flex;align-items:center;gap:8px;width:max-content;max-width:88%;margin:0 auto;padding:10px 16px;border-radius:14px;background:rgba(17,17,17,.9);color:#FFFFFF;font-size:clamp(11px,1.3cqw,14px);font-weight:500;line-height:1.3;box-shadow:0 12px 30px rgba(0,0,0,.25)}

/* faixas de pintura (portal e preços) */
.e-banda{position:relative;margin:0 14px;padding:120px 0;border-radius:32px;overflow:hidden;color:#111111}
.e-banda h2{margin:0 auto;max-width:1000px;font-size:72px;line-height:.96;letter-spacing:-.01em}
/* a pintura fica limpa: o texto vai num cartão translúcido */
.e-portal__topo,.e-precos__topo{box-sizing:border-box;width:fit-content;max-width:100%;margin:0 auto;padding:36px 44px;border-radius:28px;background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.62)}
.e-banda .w>*{position:relative}

/* portal: um celular no meio e o que ele faz em volta */
.e-portal__topo{text-align:center}
.e-portal__topo p{margin:18px auto 0;max-width:520px;font-family:'Libre Caslon Condensed',Georgia,serif;font-size:24px;line-height:31px}
.e-portal__palco{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:40px;align-items:center;margin-top:64px}
.e-notas{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:56px;color:#111111}
.e-nota{position:relative;padding:5px;border-radius:20px}
.e-nota .or-vidro__dentro{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:15px;font-size:15px;line-height:22px;color:#4B5160}
.e-nota b{display:block;font-size:16px;font-weight:600;color:#111111}
.e-nota:hover .or-icone--vivo rect{animation:or-onda 420ms cubic-bezier(.4,0,.2,1);animation-delay:calc(var(--i,0) * 14ms)}
/* o fio de pontos que liga cada nota ao celular */
.e-nota:after{content:"";position:absolute;pointer-events:none;top:50%;width:40px;height:4px;margin-top:-2px;background:radial-gradient(circle,#FFFFFF 1.6px,transparent 2px) 0 0/8px 4px repeat-x}
.e-notas--esq .e-nota:after{right:-40px}
.e-notas--dir .e-nota:after{left:-40px}
.e-notas--esq .e-nota:nth-child(2){margin-left:48px}
.e-notas--dir .e-nota:nth-child(1){margin-right:48px}
/* no portal, o vidro não desfoca a pintura de trás: o desfoque falhava no Chrome e deixava faixas nos cartões */
.e-portal .or-vidro{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.5)}
.e-cel{padding:10px;border-radius:50px}
.e-cel img{display:block;width:340px;height:auto;border-radius:40px}

/* você aprova, o orchard lembra */
.e-lembra__cab{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.e-lembra__cab h2{margin:0;font-size:72px;line-height:.96;letter-spacing:-.01em}
.e-lembra{display:grid;grid-template-columns:minmax(0,1fr) 500px minmax(0,1fr);gap:40px;align-items:center;margin-top:64px}
.e-lembra__bloco h3{margin:0 0 10px;font-size:32px;line-height:1}
.e-lembra__bloco p{margin:0;max-width:340px;font-size:16px;line-height:25px;color:#55524C}
.e-lembra__bloco--dir{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.e-selo{justify-self:center;filter:drop-shadow(0 18px 30px rgba(40,30,10,.18));transform:rotate(-3deg)}
/* o selo deitado, no formato das pinturas: a foto cabe inteira */
.e-selo__papel{position:relative;width:480px;height:288px;padding:16px;background:#FFFFFF;-webkit-mask:radial-gradient(circle at center,transparent 5px,#000 5.5px) -8px -8px/16px 16px,linear-gradient(#000,#000) center/calc(100% - 20px) calc(100% - 20px) no-repeat;mask:radial-gradient(circle at center,transparent 5px,#000 5.5px) -8px -8px/16px 16px,linear-gradient(#000,#000) center/calc(100% - 20px) calc(100% - 20px) no-repeat}
.e-selo__img{position:relative;height:100%;overflow:hidden}
.e-selo__img .trama{object-position:center;scale:1.04;translate:calc(var(--nx,0) * -6px) calc(var(--ny,0) * -6px);transition:translate .6s cubic-bezier(.2,.8,.2,1)}
/* o selo segue o mouse: inclina para o lado do cursor e a pintura anda ao contrário, como se tivesse fundo */
.e-selo__papel{transform:perspective(900px) rotateX(calc(var(--ny,0) * -10deg)) rotateY(calc(var(--nx,0) * 12deg)) scale(var(--selo-escala,1));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.e-selo:hover{--selo-escala:1.03}
.e-selo{cursor:pointer;outline-offset:10px}
.e-selo.is-trocando .e-selo__papel{animation:e-vira .7s cubic-bezier(.2,.8,.2,1)}
.e-selo.is-trocando .e-selo__img .trama{animation:e-revela .8s ease-out}
@keyframes e-vira{0%{scale:1;rotate:0deg}35%{scale:.93;rotate:-4deg}100%{scale:1;rotate:0deg}}
@keyframes e-revela{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
.e-selo__img small{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;font-size:11px;color:#FFFFFF;text-shadow:0 1px 6px rgba(6,14,40,.7)}

/* origem */
.e-origem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:440px;border-radius:28px;overflow:hidden;background:#FFFDF8;border:1px solid #E6DFD0}
.e-origem__img{position:relative;min-height:300px}
.e-origem__img .trama{object-position:center 85%}
.e-origem__txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding:48px 56px}
.e-carroca{display:block;width:190px;height:auto;overflow:visible}
/* passando o mouse no cartão, a carroça anda: as rodas giram, a caixa sacode e as laranjas pulam */
.e-origem:hover .e-carroca{animation:e-anda 2.4s ease-in-out infinite alternate}
.e-origem:hover .e-carroca__roda{animation:e-roda 1.1s linear infinite}
.e-origem:hover .e-carroca__caixa{animation:e-sacode .34s ease-in-out infinite alternate}
.e-origem:hover .e-carroca__laranjas rect{animation:e-pula .34s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -41ms)}
@keyframes e-anda{from{translate:0 0}to{translate:18px 0}}
@keyframes e-roda{to{transform:rotate(360deg)}}
@keyframes e-sacode{from{transform:translateY(0) rotate(-.5deg)}to{transform:translateY(-5px) rotate(.5deg)}}
@keyframes e-pula{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.e-origem__txt h2{margin:0;font-size:48px;line-height:1}
.e-origem__txt p{margin:0;font-size:17px;line-height:27px;color:#55524C}

/* preços: cartões de vidro sobre a pintura */
.e-precos__topo{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.e-precos__topo p{margin:0;max-width:640px;font-size:19px;line-height:28px;text-wrap:balance}
.e-seg{display:inline-flex;gap:2px;margin-top:8px;padding:4px;border-radius:999px;background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.62)}
.e-seg button{height:38px;padding:0 18px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:#111111;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s}
.e-seg button:hover{background:rgba(255,255,255,.7)}
.e-seg button[aria-pressed="true"]{background:#1E46D6;color:#FFFFFF}
.e-planos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:56px;color:#17181B}
.e-plano{display:flex;flex-direction:column}
.e-plano:hover,.e-plano:focus-within{--sobe:-12px;scale:1.025;z-index:1}
.e-planos:hover .e-plano:not(:hover){opacity:.78;scale:.985}
.e-plano>.or-cartao{flex:1;display:flex;flex-direction:column}
.e-plano__miolo{flex:1;display:flex;flex-direction:column;gap:14px;padding:22px 18px 18px}
.e-preco{margin:0;white-space:nowrap}
.e-preco .sf{font-size:56px;line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums}
.e-preco__outro{margin:-4px 0 4px;font-size:14px;line-height:20px;color:#4B5160}
.e-fundadora{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:12px;background:#EEF3FF;color:#1E46D6;font-size:14px;line-height:20px;font-weight:500}
.e-fundadora:before{content:"";flex:none;width:7px;height:7px;margin-top:7px;border-radius:999px;background:#2F5BFF}
.e-itens{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:21px}
.e-itens li{display:flex;align-items:flex-start;gap:10px}
.e-itens li:before{content:"";flex:none;width:12px;height:7px;margin-top:7px;border-radius:999px;background:#FF6B1A}
.e-plano .or-botao{width:100%;margin-top:auto}
.e-teste{margin-top:12px;padding:5px;border-radius:22px;color:#111111}
.e-teste .or-vidro__dentro{display:flex;align-items:center;gap:20px;padding:16px 16px 16px 22px;border-radius:17px}
.e-teste__txt{flex:1;min-width:0}
.e-teste__txt b{display:block;font-size:17px;line-height:24px;font-weight:600}
.e-teste__txt span{display:block;margin-top:2px;font-size:15px;line-height:22px;color:#4B5160}


/* perguntas: uma grade com fios, como a da Heron */
.e-faq__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:64px;align-items:start}
.e-faq__lado{position:sticky;top:120px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.e-faq__lado h2{margin:0;padding-bottom:14px;font-size:96px;line-height:.9;letter-spacing:-.015em}
.e-faq__lado p{margin:0;max-width:300px;font-size:17px;line-height:26px;color:#55524C}
.e-faq__ilu{display:block;width:100%;margin-top:72px}
.e-perguntas{margin:0;padding:0;list-style:none;border-top:1px solid #111111}
.e-pergunta{border-bottom:1px solid #E1DACB}
.e-pergunta h3{margin:0}
.e-pergunta button{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:26px 4px;border:0;background:transparent;font:inherit;color:#111111;text-align:left;cursor:pointer}
.e-pergunta button .sf{font-size:32px;line-height:1.08;transition:transform .5s cubic-bezier(.2,.8,.2,1),color .3s}
.e-pergunta button:hover .sf{transform:translateX(10px);color:#1E46D6}
.e-pergunta button i{flex:none;width:12px;height:12px;border-radius:999px;background:#111111;transition:width .5s cubic-bezier(.2,.8,.2,1),background-color .3s}
.e-pergunta button:hover i{width:22px;background:#2F5BFF}
.e-pergunta button[aria-expanded="true"] i{width:40px;background:#FF6B1A}
.e-pergunta__resposta{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}
.e-pergunta__resposta p{overflow:hidden;margin:0;max-width:640px;padding:0 4px;font-size:17px;line-height:27px;color:#55524C}
.e-pergunta.is-aberta .e-pergunta__resposta{grid-template-rows:1fr}
.e-pergunta.is-aberta .e-pergunta__resposta p{padding-bottom:28px}

/* a lista de espera: um convite com canhoto */
.e-convite{display:grid;grid-template-columns:minmax(0,1fr) 340px;border-radius:32px;filter:drop-shadow(0 30px 60px rgba(40,30,10,.14));translate:calc(var(--nx,0) * 16px) calc(var(--ny,0) * 10px + var(--sobe,0px));transform:perspective(1600px) rotateX(calc(var(--ny,0) * -3deg)) rotateY(calc(var(--nx,0) * 4deg));transition:translate .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .7s}
/* o convite acende quando a pessoa chega nele, e mais um pouco a cada campo preenchido (main.js) */
.e-convite.is-quente{--sobe:-10px;filter:drop-shadow(0 46px 72px rgba(47,91,255,.22)) drop-shadow(0 12px 26px rgba(255,107,26,.16))}
.e-convite__canhoto:after{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-14deg);opacity:0;pointer-events:none}
.e-convite.is-quente .e-convite__canhoto:after{animation:e-brilho 1.5s cubic-bezier(.2,.8,.2,1)}
@keyframes e-brilho{0%{opacity:1;translate:0 0}100%{opacity:1;translate:560% 0}}
.e-convite[data-cheio="1"] .e-convite__canhoto{background:linear-gradient(165deg,#2F5BFF 45%,#6F8CFF)}
.e-convite[data-cheio="2"] .e-convite__canhoto{background:linear-gradient(165deg,#2F5BFF 30%,#FF8A4C)}
.e-convite[data-cheio="2"] .e-convite__desconto{animation:e-carimbo .6s cubic-bezier(.2,.8,.2,1)}
/* a cada campo preenchido, o canhoto se solta mais no pontilhado, de cima para baixo, como papel rasgando */
.e-convite__canhoto{transform-origin:0 100%;transition:translate .8s cubic-bezier(.3,1.5,.5,1),rotate .8s cubic-bezier(.3,1.5,.5,1),background .6s}
.e-convite[data-cheio="1"] .e-convite__canhoto{translate:5px 0;rotate:1.2deg}
.e-convite[data-cheio="2"] .e-convite__canhoto{translate:14px 6px;rotate:3.2deg}
@keyframes e-carimbo{0%{scale:1}40%{scale:1.12}100%{scale:1}}
.e-convite__corpo,.e-convite__canhoto{position:relative}
.e-convite__corpo{padding:44px 56px 48px;border-radius:32px 0 0 32px;background:#FFFDF8;-webkit-mask:radial-gradient(circle 16px at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 16px at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 16px at 100% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 16px at 100% 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.e-convite__topo{display:flex;justify-content:space-between;gap:16px;margin:0 0 30px;padding-bottom:14px;border-bottom:1px dashed #D9D1BF;font-size:13px;font-weight:500;letter-spacing:.04em;color:#6E6A60}
.e-convite h2{margin:0;font-size:76px;line-height:.94;letter-spacing:-.012em}
.e-convite__txt{margin:18px 0 30px;max-width:520px;font-size:17px;line-height:26px;color:#55524C}
.e-lista__campos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.e-campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.e-campo label{font-size:13px;font-weight:600}
.e-campo input{width:100%;height:50px;padding:0 16px;border:1.5px solid transparent;border-radius:999px;font:inherit;font-size:15px;color:#111111;background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(#CFD6E2,#CFD6E2) border-box;transition:box-shadow .42s}
.e-campo input:hover,.e-campo input:focus{outline:0;background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(120deg,#2F5BFF,#8BBEFF 38%,#FFC98A 64%,#FF6B1A) border-box}
.e-campo input:focus{box-shadow:0 6px 24px rgba(47,91,255,.14)}
.e-campo input[aria-invalid="true"]{background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(#F23A2F,#F23A2F) border-box}
.e-campo .erro{margin:0;padding-left:16px;font-size:13px;line-height:18px;font-weight:600;color:#C81E14}
.e-lista__pe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:16px}
.e-lista__nota{margin:0;max-width:300px;font-size:13px;line-height:19px;color:#6B7280}
.e-lista button:disabled{opacity:.6;cursor:wait}
.e-lista__aviso{min-height:20px;margin:12px 0 0;font-size:14px;font-weight:600;color:#C81E14}
.e-armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.e-ok{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:20px;background:#FFFFFF;border:1px solid #E6DFD0}
.e-ok b{display:block;font-size:18px}
.e-ok p{margin:2px 0 0;font-size:14px;color:#4B5160}
.e-convite__canhoto{overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 28px;border-radius:0 32px 32px 0;background:#2F5BFF;color:#FFFFFF;text-align:center;-webkit-mask:radial-gradient(circle 16px at 0 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 16px at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 16px at 0 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 16px at 0 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.e-convite__canhoto:before{content:"";position:absolute;left:0;top:28px;bottom:28px;border-left:2px dashed rgba(255,255,255,.55)}
.e-convite__desconto{margin:14px 0 0;font-size:60px;line-height:.95}
.e-convite__para{margin:0;max-width:220px;font-size:16px;line-height:23px}
.e-convite__selo{margin:18px 0 0;padding:6px 14px;border:1px solid rgba(255,255,255,.6);border-radius:999px;font-size:13px;font-weight:500}

/* rodapé: o papel e, embaixo, o céu de verão subindo do papel */
.e-pe{position:relative;padding:120px 0 0;color:#1C3578}
.e-pe>.w{position:relative;z-index:1}
.e-pe__pintura{height:clamp(460px,52vw,860px);margin-top:-250px;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 20%,#000 56%);mask-image:linear-gradient(180deg,transparent 0,transparent 20%,#000 56%)}
.e-pe__pintura img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.e-pe__topo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px}
.e-pe__topo img{display:block;height:36px;width:auto}
.e-pe__frase{margin:24px 0 0;max-width:420px;font-size:34px;line-height:1.05;text-wrap:balance}
.e-cols{display:grid;grid-template-columns:repeat(2,auto);gap:80px}
.e-cols h2{margin:0 0 20px;font-size:15px;font-weight:600}
.e-cols ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;font-size:16px;color:#34508F}
.e-cols a:hover{color:#0C31A0}
.e-pe__linha{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin:64px 0 0;padding-top:22px;border-top:1px solid rgba(28,53,120,.35);font-size:13px;line-height:20px}

/* o cursor da marca: um ponto que estica quando o mouse corre (main.js, só com mouse) */
.e-cursor{position:fixed;left:0;top:0;z-index:90;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:999px;background:#FF6B1A;pointer-events:none;transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background-color .3s,opacity .3s}
.e-cursor.is-sobre{width:8px;height:8px;margin:-4px 0 0 -4px;background:#2F5BFF}
.e-cursor.is-fora{opacity:0}

/* a borda que gira em azul e laranja nos cartões, quando o mouse passa */
@property --e-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.e-nota:before,.e-plano:before{content:"";position:absolute;inset:-1px;z-index:2;border-radius:inherit;padding:2px;background:conic-gradient(from var(--e-ang),#2F5BFF,#8BBEFF,#FFC98A,#FF6B1A,#FFC98A,#8BBEFF,#2F5BFF);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;pointer-events:none;transition:opacity .45s}
.e-nota:hover:before,.e-plano:hover:before,.e-plano:focus-within:before{opacity:1;animation:e-gira 2.6s linear infinite}
@keyframes e-gira{to{--e-ang:360deg}}
/* os cartões seguem o cursor um pouquinho (--nx e --ny vêm do main.js) */
.e-nota,.e-plano{translate:calc(var(--nx,0) * 8px) calc(var(--ny,0) * 6px + var(--sobe,0px));transition:translate .55s cubic-bezier(.2,.8,.2,1),scale .55s cubic-bezier(.2,.8,.2,1),opacity .4s}
.e-nota:hover{--sobe:-5px}

/* telas médias */
@media (max-width:1180px){
  .e-hero h1{font-size:74px}
  .e-manifesto h2,.e-titulo,.e-banda h2,.e-lembra__cab h2{font-size:60px}
  .e-faq__lado h2{font-size:76px}
  .e-rolo__texto h2,.e-telas__lado h2{font-size:52px}
  .e-planos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e-notas--esq .e-nota:nth-child(2),.e-notas--dir .e-nota:nth-child(1){margin:0}
  /* o selo deitado não cabe entre os dois textos: vai para cima deles */
  .e-lembra{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e-lembra .e-selo{grid-column:1/-1;order:-1}
  .e-cel img{width:290px}
  .e-convite{grid-template-columns:minmax(0,1fr) 280px}
  .e-convite h2{font-size:60px}
}

/* celular */
@media (max-width:760px){
  .w{padding:0 16px}
  .e-sec{padding:80px 0}
  .e-sec--junto{padding-top:8px}
  .e-titulo,.e-manifesto h2,.e-banda h2,.e-lembra__cab h2{font-size:44px;line-height:.98}
  .e-ascii__tela{height:150px}
  .e-barra{padding-top:8px}
  .e-barra__vidro{padding:0 8px 0 16px;border-radius:18px}
  .e-nav{grid-template-columns:1fr auto;height:58px}
  .e-logo{height:22px}
  .e-links{display:none}
  .e-nav__cta.or-botao--m{height:42px;padding:0 16px;font-size:14px}
  .e-hero{padding-top:110px}
  .e-hero h1{font-size:52px}
  .e-hero__lead{font-size:16px;line-height:24px}
  .e-palco{padding:0 12px 40px}
  .e-cena{height:1000px}
  .e-cena__img{object-position:66% top}
  /* no celular o texto do topo cai sobre a vila; o véu desce mais para ler bem */
  .e-cena:after{background:linear-gradient(180deg,rgba(245,241,232,.62) 0,rgba(245,241,232,.84) 30%,rgba(245,241,232,0) 56%)}
  .e-janela{margin-top:96px;padding:6px;border-radius:18px}
  .e-janela__corte{height:300px;border-radius:13px}
  .e-janela__corte img{width:820px;max-width:none}
  .e-manifesto__grade{grid-template-columns:minmax(0,1fr);gap:28px}
  .e-manifesto__txt{font-size:17px;line-height:26px}
  .e-manifesto__arvore{overflow:hidden}
  .e-dores{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .e-dor,.e-dor+.e-dor{padding:28px 0 20px;border-left:0}
  .e-dor+.e-dor{border-top:1px solid #E1DACB}
  .e-dor__ilu{height:auto;min-height:100px}
  .e-dor h3{font-size:30px}
  /* no celular a seção parada mostra só o passo da vez */
  .e-rolo{height:calc(100svh + 9 * 62svh)}
  .e-rolo__fixo{height:100svh}
  .e-parte{align-items:flex-start;padding-top:88px}
  /* no celular a virada é de cima para baixo: a parte A sobe e sai, a parte B chega por baixo */
  .e-parte--a .e-rolo__texto,.e-parte--a .e-rolo__palco{translate:0 calc(var(--vira) * -12vh)}
  .e-parte--b .e-telas__lado,.e-parte--b .e-telas__janela{translate:0 calc((1 - var(--vira)) * 12vh)}
  .e-parte--a .e-rolo__fundo,.e-parte--b .e-rolo__fundo{translate:none}
  .e-rolo__grade,.e-telas{grid-template-columns:minmax(0,1fr);gap:14px}
  .e-rolo__texto h2,.e-telas__lado h2{margin-bottom:16px;font-size:34px}
  .e-passos,.e-abas{flex-direction:row;flex-wrap:wrap;gap:0 6px}
  .e-passo,.e-aba{flex:1 1 0}
  .e-passo__barra{top:auto;bottom:0}
  .e-passo__cab{min-height:44px;padding:8px 0;font-size:0;justify-content:center}
  .e-passo__cab .mono{width:auto;font-size:13px}
  .e-passo__corpo{display:none}
  .e-rolo__legenda{display:block;min-height:96px;margin-top:14px}
  .e-rolo__cartoes{height:300px}
  .e-aba button{justify-content:center;padding:8px 0 10px}
  .e-aba button>span:last-child{display:none}
  .e-aba__icone{width:40px;height:40px}
  .e-telas__lado{position:relative;padding-bottom:4px}
  .e-telas__lado .e-rolo__legenda{min-height:70px}
  .e-telas__janela .e-janela__corte{aspect-ratio:auto;height:330px}
  .e-tela__cam{width:860px}
  .e-banda{margin:0 8px;padding:72px 0;border-radius:24px}
  .e-portal__topo p{font-size:19px;line-height:26px}
  .e-portal__palco{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px}
  .e-portal__palco .e-cel{order:-1;justify-self:center}
  .e-notas{gap:12px}
  .e-nota:after{display:none}
  .e-cel img{width:280px}
  .e-lembra{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:40px}
  .e-lembra__bloco--dir{align-items:flex-start;text-align:left}
  .e-selo__papel{width:min(320px,calc(100vw - 40px));height:auto;aspect-ratio:5/3}
  .e-lembra .e-selo{order:0}
  .e-origem{grid-template-columns:minmax(0,1fr)}
  .e-origem__img{min-height:220px}
  .e-origem__txt{padding:28px 22px 30px}
  .e-origem__txt h2{font-size:34px}
  .e-planos{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(282px,86%);overflow-x:auto;margin:36px -16px 0;padding:10px 16px 12px;scroll-snap-type:x mandatory;scroll-padding:0 16px}
  .e-plano{scroll-snap-align:start}
  .e-plano:hover,.e-plano:focus-within{--sobe:0px;scale:none}
  .e-planos:hover .e-plano:not(:hover){opacity:1;scale:none}
  .e-telas__lado{order:0}
  .e-rolo__fundo,.e-parte--b .e-rolo__fundo{-webkit-mask-image:radial-gradient(ellipse 90% 52% at 50% 74%,#000 30%,transparent 78%),linear-gradient(180deg,transparent 0,#000 18%,#000 86%,transparent 100%);mask-image:radial-gradient(ellipse 90% 52% at 50% 74%,#000 30%,transparent 78%),linear-gradient(180deg,transparent 0,#000 18%,#000 86%,transparent 100%)}
  .e-teste .or-vidro__dentro{flex-direction:column;align-items:flex-start;padding:20px}
  .e-teste .or-botao{width:100%}
  .e-faq__grade{grid-template-columns:minmax(0,1fr);gap:32px}
  .e-faq__lado{position:static}
  .e-faq__lado h2{font-size:60px}
  .e-faq__ilu{display:none}
  .e-pergunta button{padding:20px 2px}
  .e-pergunta button .sf{font-size:24px}
  .e-pergunta__resposta p{font-size:16px;line-height:25px}
  .e-convite{grid-template-columns:minmax(0,1fr)}
  .e-convite__corpo{padding:28px 22px 30px;border-radius:26px 26px 0 0;-webkit-mask:radial-gradient(circle 14px at 0 100%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 100%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 14px at 0 100%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 100%,transparent 98%,#000) right/51% 100% no-repeat}
  .e-convite__topo{flex-direction:column;gap:2px}
  .e-convite h2{font-size:46px}
  .e-lista__campos{grid-template-columns:minmax(0,1fr)}
  .e-lista__pe .or-botao{width:100%}
  .e-convite__canhoto{padding:30px 22px 34px;border-radius:0 0 26px 26px;-webkit-mask:radial-gradient(circle 14px at 0 0,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 0,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 14px at 0 0,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 0,transparent 98%,#000) right/51% 100% no-repeat}
  .e-convite__canhoto{transform-origin:100% 0}
  .e-convite[data-cheio="1"] .e-convite__canhoto{translate:0 5px;rotate:-1deg}
  .e-convite[data-cheio="2"] .e-convite__canhoto{translate:4px 14px;rotate:-2.6deg}
  .e-convite__canhoto:before{left:22px;right:22px;top:0;bottom:auto;border-left:0;border-top:2px dashed rgba(255,255,255,.55)}
  .e-convite__desconto{margin-top:0;font-size:46px}
  .e-pe{padding:56px 0 0}
  .e-pe__pintura{height:440px;margin-top:-130px}
  .e-pe__topo{grid-template-columns:minmax(0,1fr);gap:40px}
  .e-pe__frase{font-size:28px}
  .e-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .e-pe__linha{margin:40px 0 0;flex-direction:column;font-size:12px;line-height:18px}
}

/* celular pequeno: o e-mail do rodapé não cabe em duas colunas iguais */
@media (max-width:380px){
  .e-cols{grid-template-columns:auto minmax(0,1fr);gap:32px 16px}
}

/* no celular, o painel do topo usa um recorte da foto, na mesma escala dos 820 px da foto inteira */
@media (max-width:480px){
  .e-palco .e-janela__corte img{width:444.17px}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}

/* Aviso de cookies: só aparece com o número do Pixel no index.html. Os dois botões são iguais de propósito. */
.e-cookies{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:20px;max-width:760px;margin:0 auto;padding:16px 20px;border:1px solid #E1DACB;border-radius:22px;background:#FFFFFF;box-shadow:0 12px 40px rgba(17,17,17,.14);font-size:15px;line-height:22px;color:#111111}
.e-cookies p{margin:0}
.e-cookies a{color:#1E46D6;text-decoration:underline}
.e-cookies__botoes{flex:none;display:flex;gap:8px}
@media (max-width:760px){
  .e-cookies{flex-direction:column;align-items:stretch;gap:12px}
  .e-cookies__botoes .or-botao{flex:1}
}