@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(fontes/bodoni-moda-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(fontes/bodoni-moda-latin-opsz-italic.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fontes/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fontes/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(fontes/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fontes/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fontes/barlow-condensed-latin-700-normal.woff2) format("woff2")}

/* A paleta «Relvado» da aplicação (web/src/index.css). O ouro é o único acento e só entra sobre o verde. */
:root{
  color-scheme:dark;
  --topo:oklch(.25 .055 165);
  --emblema-ouro:#e3cb90;
  --emblema-costura:#2d6647;
  --relvado-fundo:oklch(.19 .045 165);
  --ouro:oklch(.74 .1 85);
  --ouro-claro:oklch(.82 .09 85);
  --cal:oklch(.97 .008 165);
  --cal-suave:oklch(.97 .008 165 / .76);
  --cal-linha:oklch(.97 .008 165 / .22);
  --tinta:oklch(.22 .02 165);
  --tinta-suave:oklch(.22 .02 165 / .7);
  --relva:oklch(.36 .08 165);
  --relva-claro:oklch(.95 .025 165);
  --papel:oklch(.972 .005 165);
  --superficie:oklch(.995 .002 165);
  --linha:oklch(.22 .02 165 / .1);
  --alerta:oklch(.47 .16 30);
  --letra-marca:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --margem:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;background:var(--relvado-fundo)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;color:var(--cal);font:400 1.0625rem/1.55 Barlow,system-ui,sans-serif;font-kerning:normal}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:4px}
.a-carregar{overflow:hidden}

/* A folha cobre o rodapé, que fica por baixo à espera (técnica do rodapé revelado). */
.folha{position:relative;z-index:1;background:var(--topo);border-radius:0 0 clamp(20px,3vw,36px) clamp(20px,3vw,36px);box-shadow:0 30px 60px oklch(.1 .03 165 / .45)}
.percurso{position:relative;border-radius:inherit}
.topo,.abertura,.historia-palco{position:relative;z-index:1}

/* A bola cola ao ecrã durante o início e a história, e sai com eles. */
.cola-caixa{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none;border-radius:inherit}
.cola{position:sticky;top:0;height:100svh}
.bola{--tam:min(84svh,50vw);position:absolute;top:50%;right:.5vw;width:var(--tam);height:var(--tam);margin-top:calc(var(--tam) / -2);overflow:visible;will-change:transform}
.costuras{fill:none;stroke:var(--cal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.3}
.pentagono{fill:none;stroke:var(--ouro);stroke-width:3;stroke-linejoin:round}
/* Só se vê o logótipo sorteado para esta sessão: o preloader e a página usam sempre o mesmo. */
[data-logo="emblema"] .bola-fina,[data-logo="emblema"] .mini-fina,[data-logo="fina"] .bola-emblema,[data-logo="fina"] .mini-emblema{display:none}

/* A bola Emblema tem as cores do vídeo: passa dele para a página sem mudar de logótipo. */
[data-logo="emblema"] .anel{fill:none;stroke:var(--emblema-ouro);stroke-width:10}
[data-logo="emblema"] .costuras{stroke:var(--emblema-costura);stroke-width:5;opacity:1}
[data-logo="emblema"] .pentagono{stroke:var(--emblema-costura);stroke-width:5}
[data-logo="emblema"] .letras{fill:var(--emblema-ouro);stroke-width:20}
/* O contorno da cor do fundo faz a folga à volta das letras, que no logótipo é uma máscara. */
.letras{fill:var(--cal);stroke:var(--topo);stroke-width:14;paint-order:stroke;stroke-linejoin:round}

.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:1320px;margin-inline:auto;padding:18px var(--margem)}
.marca{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;font:600 1.1875rem/1 Barlow,system-ui,sans-serif;letter-spacing:-.005em}
.marca img{width:36px;height:36px;display:block}
.acoes{display:flex;align-items:center;gap:4px}
.lingua{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;text-decoration:none;border-radius:8px;transition:background-color .18s}
/* A bandeira de cada língua (docs/negocio/bandeiras.py), com um contorno fino: o branco da francesa não se perde no verde. */
.lingua .bandeira{width:24px;height:16px;border-radius:2px;box-shadow:0 0 0 1px oklch(.97 .008 165 / .3)}
.lingua:hover{background:oklch(.97 .008 165 / .08)}
/* Com três línguas, o cabeçalho mostra duas ligações de língua: em ecrãs estreitos encolhem para caber, sem ficar abaixo dos 24 px do WCAG 2.2. */
@media (max-width:400px){.topo{gap:8px}.acoes{gap:0}.marca{gap:8px;font-size:1.0625rem}.lingua{min-width:34px}.entrar{padding-inline:12px}}
/* Nos telemóveis mais estreitos o nome sai do cabeçalho e fica só o emblema; o leitor de ecrã ouve-o pelo aria-label da ligação. */
@media (max-width:359px){.marca-nome{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.entrar{display:inline-flex;align-items:center;min-height:44px;padding-inline:16px;white-space:nowrap;font-size:.9375rem;font-weight:500;letter-spacing:.01em;text-decoration:none;border-radius:8px;border:1px solid var(--cal-linha);transition:background-color .18s,border-color .18s}
.entrar:hover{background:oklch(.97 .008 165 / .08);border-color:oklch(.97 .008 165 / .5)}

/* Preloader: o vídeo do logótipo sobre o verde da página. A máscara funde a orla do vídeo no fundo. */
.motion{position:fixed;z-index:3;inset:0;display:grid;place-items:center;overflow:clip;pointer-events:none;background:var(--topo)}
.motion video{display:block;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);mask-image:radial-gradient(closest-side,#000 80%,transparent 100%)}

/* Título: letra de alto contraste como o F e o T do logótipo; o tamanho ótico afina os filetes em grande. */
.abertura{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:1320px;min-height:calc(100svh - 80px);margin-inline:auto;padding:0 var(--margem) clamp(56px,10svh,104px)}
h1,.rodape h2,.passos h2{font-family:var(--letra-marca);font-optical-sizing:none;font-kerning:normal;font-feature-settings:"liga","kern"}
h1{max-width:6.9em;margin:0;font-weight:440;font-variation-settings:"opsz" 26;font-size:clamp(3.125rem,7.4vw,7rem);line-height:1.03;letter-spacing:-.018em}
h1 em,.rodape h2 em{font-style:italic;font-weight:400;letter-spacing:-.012em}
.palavra{display:inline-block;overflow:clip;padding:.08em .07em .2em 0;margin:-.08em -.07em -.2em 0;vertical-align:top}
.palavra>span{display:inline-block}
.resumo{max-width:23em;margin:clamp(20px,3svh,30px) 0 0;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.42;color:var(--cal-suave);text-wrap:pretty}

.chamada{position:relative;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:54px;padding-inline:28px;overflow:clip;background:var(--ouro);color:oklch(.2 .04 165);font-weight:600;letter-spacing:.012em;text-decoration:none;border-radius:8px;transition:transform .12s}
.chamada::before{content:"";position:absolute;inset:0;background:var(--ouro-claro);translate:0 101%;transition:translate .32s cubic-bezier(.23,1,.32,1)}
.chamada:hover::before{translate:0 0}
.chamada:active{transform:translateY(1px) scale(.985)}
.chamada span{position:relative}
.abertura .chamada{margin-top:clamp(24px,4svh,38px)}

/* A história de um pedido. Sem animação lê-se de seguida: passos, depois os três painéis do pedido. */
.historia-palco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center;width:100%;max-width:1320px;margin-inline:auto;padding:clamp(40px,8svh,80px) var(--margem)}
.passos-caixa{position:relative}
.progresso{display:none}
.passos{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,4svh,40px)}
.passos li{position:relative;display:grid;grid-template-columns:22px 1fr;column-gap:18px}
.passos svg{width:20px;height:20px;margin-top:.55em;fill:var(--topo);stroke:var(--ouro);stroke-width:7;stroke-linejoin:round;position:relative}
.passos h2{margin:0;font-weight:440;font-variation-settings:"opsz" 16;font-size:clamp(1.75rem,3.1vw,2.875rem);line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.passos p{grid-column:2;margin:6px 0 0;max-width:27em;color:var(--cal-suave);text-wrap:pretty}

.demo{min-width:0}
.pedido{margin:0;background:var(--papel);color:var(--tinta);border-radius:16px;padding:clamp(16px,2vw,24px);box-shadow:0 1px 1px oklch(.15 .04 165 / .3),0 28px 56px -18px oklch(.12 .04 165 / .65);font-size:.9375rem;line-height:1.4}
.pedido h3,.pedido h4{margin:0;font-family:"Barlow Condensed",Barlow,sans-serif}
.cabeca{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.pedido h3{font-weight:700;font-size:1.625rem;line-height:1.1}
.sub{margin:3px 0 0;color:var(--tinta-suave)}
.paineis{display:grid;gap:16px;margin-top:14px}
.pedido h4{margin:0 0 8px;font-weight:600;font-size:1.0625rem;letter-spacing:.01em}
.pedido ul{list-style:none;margin:0;padding:0}
.linha{background:var(--superficie);border:1px solid var(--linha);border-radius:8px;padding:10px 12px}
.linha+.linha{margin-top:8px}
.cabeca b{font-weight:500;color:var(--relva)}
.dados{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0;background:var(--superficie);border:1px solid var(--linha);border-radius:8px;padding:12px}
.dados dt{color:var(--tinta-suave)}
.dados dd{margin:0;font-weight:500}
.etq{display:inline-block;border-radius:99px;padding:2px 9px;font-size:.75rem;font-weight:500;line-height:1.4;white-space:nowrap}
.mar{background:var(--relva-claro);color:var(--relva)}
.urgente{background:oklch(.47 .16 30 / .1);color:var(--alerta)}
.cinza{background:oklch(.967 .003 264.5);color:oklch(.373 .034 259.7)}
.azul{background:oklch(.97 .014 254.6);color:oklch(.488 .243 264.4)}
.ambar{background:oklch(.987 .022 95.3);color:oklch(.473 .137 46.2)}
.motivos{margin-top:4px!important;font-size:.8125rem}
.motivos span{color:var(--relva)}
.motivos .contra,.motivos .contra span{color:var(--alerta)}
.enviar{display:inline-block;margin-top:8px;padding:6px 12px;border:1px solid oklch(.22 .02 165 / .2);border-radius:8px;background:var(--superficie);font-size:.8125rem;font-weight:500;color:var(--tinta)}
.muda{display:inline-grid;justify-items:end}
.muda>*{grid-area:1/1}
.antes{visibility:hidden}
.historico{margin:6px 0 0;padding:0 0 0 10px;list-style:none;border-left:2px solid var(--linha);font-size:.8125rem;color:var(--tinta-suave)}
.historico strong{font-weight:500;color:var(--tinta)}
.legenda{margin:10px 2px 0;font-size:.8125rem;color:var(--cal-suave)}

.rodape{position:sticky;bottom:0;z-index:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(78svh,720px);background:var(--relvado-fundo);padding:clamp(56px,10svh,104px) var(--margem) 22px}
.rodape-corpo{width:100%;max-width:1224px;margin:0 auto auto}
.rodape h2{margin:0;font-weight:440;font-variation-settings:"opsz" 30;font-size:clamp(3.25rem,10vw,9.5rem);line-height:1;letter-spacing:-.026em}
.rodape .chamada{margin-top:clamp(26px,5svh,44px)}
.confianca{max-width:34em;margin:clamp(22px,4svh,34px) 0 0;color:var(--cal-suave);text-wrap:pretty}
.legal{width:100%;max-width:1224px;margin:clamp(32px,6svh,56px) auto 0;padding-top:14px;border-top:1px solid var(--cal-linha);font-size:.875rem;color:var(--cal-suave)}
.legal p{margin:0}
.rodape-acoes{display:flex;flex-direction:column}

@media (max-width:900px){
  .bola{--tam:min(92vw,58svh);top:auto;bottom:-13svh;right:-12vw;margin-top:0}
  .abertura{justify-content:flex-start;padding-top:clamp(12px,4svh,48px)}
  .historia-palco{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* Com animação: tudo o que entra no carregamento espera pelo GSAP. Se ele falhar, o script no <head> tira a classe. */
.anima:not(.pronto) .bola,.anima:not(.pronto) .topo,.anima:not(.pronto) .abertura>*{visibility:hidden}
.anima .historia{height:440svh}
.anima .historia-palco{position:sticky;top:0;height:100svh;padding-block:clamp(16px,5svh,48px)}
.anima .paineis{display:grid;grid-template-columns:minmax(0,1fr)}
.anima .painel{grid-area:1/1}
.anima .antes{visibility:visible}
.anima .progresso{display:block;position:absolute;left:10px;top:.9em;bottom:1.5em;width:1px;background:var(--cal-linha);transform-origin:top}
.anima .progresso i{display:block;width:100%;height:100%;background:var(--ouro);transform:scaleY(var(--p,0));transform-origin:top}
.anima .pedido{will-change:transform}

@media (max-width:900px){
  /* No telemóvel a história fica presa: um passo de cada vez, por cima do pedido. */
  .anima .historia-palco{display:flex;flex-direction:column;justify-content:center;gap:16px}
  .anima .passos{grid-template-columns:minmax(0,1fr);gap:0}
  .anima .passos li{grid-area:1/1;align-content:start}
  .anima .progresso{position:relative;left:auto;top:auto;bottom:auto;width:100%;height:2px;margin-bottom:14px}
  .anima .progresso i{transform:scaleX(var(--p,0));transform-origin:left}
  .anima .passos h2{font-size:1.875rem}
  .anima .passos svg{margin-top:.5em}
  .anima .pedido{padding:14px}
  .anima .paineis{margin-top:10px}
}
@media (max-width:900px) and (max-height:620px){
  .anima .motivos li:nth-child(3){display:none}
  .anima .passos p{font-size:.9375rem}
}

/* O pop-up do «Entrar» (pagina.js): o login da plataforma num cartão, com a landing desfocada por trás.
   O círculo que abre e fecha é do pagina.js; aqui fica o vidro fosco, que entra e sai em fade. */
.janela-entrar{width:min(440px,calc(100vw - 24px));max-height:calc(100svh - 32px);padding:0;border:1px solid oklch(.82 .09 85 / .45);border-radius:16px;background:var(--topo);color:var(--cal);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 80px -20px oklch(.1 .03 165 / .7)}
.janela-entrar::backdrop{background:oklch(.12 .03 165 / .5);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);opacity:0;transition:opacity .35s cubic-bezier(.22,1,.36,1)}
.janela-entrar.aberta::backdrop{opacity:1}
.janela-corpo{position:relative;height:520px;transition:height .25s cubic-bezier(.22,1,.36,1)}
.janela-corpo iframe{display:block;width:100%;height:100%;border:0;opacity:0;transition:opacity .2s}
.janela-entrar.carregado .janela-corpo iframe{opacity:1}
.abrindo{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--cal-suave);font-size:.9375rem}
.janela-entrar.carregado .abrindo{display:none}
.janela-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 18px;border-bottom:1px solid var(--cal-linha)}
.janela-topo h2{margin:0;font:600 1.0625rem/1.2 "Barlow Condensed",Barlow,sans-serif;letter-spacing:.02em;color:var(--cal-suave)}
.janela-entrar .fechar{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--cal);cursor:pointer;transition:background-color .18s}
.janela-entrar .fechar:hover{background:oklch(.97 .008 165 / .1)}
.janela-entrar .fechar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html:has(.janela-entrar[open]){overflow:hidden}
@media (prefers-reduced-motion:reduce){.janela-entrar::backdrop,.janela-corpo,.janela-corpo iframe{transition:none}}