/* =============================================================================
   Webfront da Uheya — modelo FrontApp · Edu Smart, paleta Farma App
   =============================================================================
   Clonagem do template "edu-smart" do frontapp-modelo (Studio Bitkamba) para
   Blade servido pelo servidor. O modelo é Next.js + React + Tailwind; aqui
   reproduz-se a MESMA anatomia sem framework, porque o webfront da Uheya tem
   de continuar a ser HTML feito no servidor — é o que o Google e o WhatsApp
   leem, e é o que mantém o painel Inertia/Vue e a API das apps intactos.

   Anatomia reproduzida (edu-smart.tsx):
     · header fixo, translúcido, com desfoque
     · hero repartido: pílula com ponto a pulsar, título com SUBLINHADO
       ONDULADO na última palavra, botões de loja, chips, e uma PILHA DE
       CARTÕES EM LEQUE (-8° / -2° / +6°) com mancha rodada por trás
     · grelhas de cartões com imagem 16:9, selo, e seta que avança no hover
     · percurso em ESCADINHA (0 / +40px / +80px) sobre banda clara, ligado por
       uma linha PONTILHADA curva, com número em círculo sobreposto à imagem
     · faixa de chamada em tinta clara com rabisco ondulado
     · fecho sobre a cor da marca com marquee de cartões

   TOKENS: o bloco :root abaixo foi GERADO pelo próprio motor do modelo
   (src/lib/content.ts + src/lib/mode.ts, paleta "farma-app"), não escrito à
   mão — inclui os derivados de vidro, scrim e on-tint, e os modos claro/escuro
   derivados em OKLCH. Nenhuma cor deste ficheiro é decisão tomada aqui.

   MOTION: a curva não é inventada. Foi AMOSTRADA do spring real do
   motion-dom 12.42.2 que o modelo usa, com os parâmetros do Edu Smart
   (bounce 0.35, duration 0.5s) — 41 pontos, overshoot medido de 6,81%.
   ========================================================================== */

/* --- Tipos de letra do tema (variáveis, subset latin, servidas daqui) ------ */

@font-face{
    font-family: "Inter";
    src: url(/fonts/inter-var.woff2) format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face{
    font-family: "DM Sans";
    src: url(/fonts/dm-sans-var.woff2) format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
}

/* --- Tokens da paleta Farma App (gerados) --------------------------------- */

:root{
    --sf-primary:#047857;--sf-on-primary:#ffffff;--sf-tint:#ecfdf5;--sf-tint-strong:#d1fae5;
    --sf-bg:#06110d;--sf-surface:#0c1a14;--sf-surface2:#14261e;--sf-line:#2c4438;
    --sf-text:#f4faf7;--sf-muted:#74907f;--sf-danger:#dc2626;
    --sf-light-bg:#f5faf7;--sf-light-surface:#ffffff;--sf-light-ink:#0b1712;
    --sf-light-muted:#5a7163;--sf-light-line:#dce9e0;
    --sf-font-heading:'DM Sans',sans-serif;--sf-font-body:'Inter',sans-serif;
    --sf-radius-card:20px;--sf-radius-control:12px;

    --sf-glass:rgba(255,255,255,.05);--sf-glass-2:rgba(255,255,255,.09);
    --sf-glass-strong:rgba(255,255,255,.14);--sf-glass-line:rgba(255,255,255,.12);
    --sf-glass-deep:rgba(0,0,0,.25);
    --sf-on-image:#ffffff;--sf-on-image-muted:rgba(255,255,255,.78);
    --sf-scrim:rgba(5,8,14,.45);--sf-scrim-strong:rgba(5,8,14,.78);--sf-scrim-soft:rgba(5,8,14,.22);
    --sf-on-tint:#16181d;--sf-on-tint-muted:#454a52;
    color-scheme:dark;

    /* Curva do spring do Edu Smart, amostrada do motor real. */
    --sf-spring: linear(0, 0.0301, 0.1067, 0.2122, 0.3323, 0.4560, 0.5753, 0.6845,
        0.7804, 0.8613, 0.9269, 0.9779, 1.0155, 1.0415, 1.0577, 1.0659, 1.0681,
        1.0657, 1.0603, 1.0530, 1.0448, 1.0364, 1.0283, 1.0209, 1.0145, 1.0090,
        1.0047, 1.0013, 0.9988, 0.9971, 0.9960, 0.9955, 0.9954, 0.9955, 0.9959,
        0.9964, 0.9970, 0.9976, 0.9981, 0.9986, 1);
    --sf-spring-dur: .5s;

    --env: 1120px;
}

:root[data-theme="light"]{
    --sf-bg:#f1fef8;--sf-surface:#fbfffd;--sf-surface2:#e5f5ed;--sf-line:#d0e4d9;
    --sf-text:#1c201e;--sf-muted:#476252;--sf-tint:#def3eb;--sf-tint-strong:#cbe9de;
    --sf-light-bg:#06110d;--sf-light-surface:#0c1a14;--sf-light-ink:#f4faf7;
    --sf-light-muted:#74907f;--sf-light-line:#2c4438;
    --sf-glass:rgba(10,14,22,.045);--sf-glass-2:rgba(10,14,22,.08);
    --sf-glass-strong:rgba(10,14,22,.13);--sf-glass-line:rgba(10,14,22,.14);
    --sf-glass-deep:rgba(10,14,22,.10);
    color-scheme:light;
}
:root[data-theme="dark"]{
    --sf-bg:#06110d;--sf-surface:#0c1a14;--sf-surface2:#14261e;--sf-line:#2c4438;
    --sf-text:#f4faf7;--sf-muted:#74907f;--sf-tint:#ecfdf5;--sf-tint-strong:#d1fae5;
    --sf-light-bg:#f5faf7;--sf-light-surface:#ffffff;--sf-light-ink:#0b1712;
    --sf-light-muted:#5a7163;--sf-light-line:#dce9e0;
    --sf-glass:rgba(255,255,255,.05);--sf-glass-2:rgba(255,255,255,.09);
    --sf-glass-strong:rgba(255,255,255,.14);--sf-glass-line:rgba(255,255,255,.12);
    --sf-glass-deep:rgba(0,0,0,.25);
    color-scheme:dark;
}

/* --- Base ----------------------------------------------------------------- */

*,*::before,*::after{ box-sizing: border-box; }

/* clip e não hidden: as entradas laterais do hero não podem criar rolagem
   horizontal, mas o clip preserva a rolagem vertical e o sticky. */
html{ overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.uf{
    margin: 0;
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: var(--sf-font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

.uf img{ max-width: 100%; height: auto; }
.uf h1,.uf h2,.uf h3,.uf h4{ font-family: var(--sf-font-heading); letter-spacing: -0.02em; margin: 0; }
.uf a{ color: inherit; }

.uf-env{ width: 100%; max-width: var(--env); margin-inline: auto; padding-inline: 20px; }
.uf-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.uf :focus-visible{ outline: 3px solid var(--sf-primary); outline-offset: 3px; border-radius: 4px; }

/* --- Header --------------------------------------------------------------- */

.uf-topo{
    position: fixed; inset-inline: 0; top: 0; z-index: 50;
    border-bottom: 1px solid color-mix(in srgb, var(--sf-line) 30%, transparent);
    background: color-mix(in srgb, var(--sf-bg) 70%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.uf-topo__int{
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; height: 64px;
    max-width: var(--env); margin-inline: auto; padding-inline: 20px;
}
.uf-marca{ display: flex; align-items: center; gap: 10px; text-decoration: none; }
.uf-marca span{ font-family: var(--sf-font-heading); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }

/* Logótipo por polaridade do fundo. O `--p-escuro` é o que se vê SOBRE fundo
   escuro (ou seja, a arte clara) — o nome diz onde assenta, não a sua cor.
   Medido: o do painel para cabeçalho tem luminância 48, o de rodapé 254. */
.uf-logo{ display: block; width: auto; }
.uf-logo--p-claro{ display: none; }
:root[data-theme="light"] .uf-logo--p-escuro{ display: none; }
:root[data-theme="light"] .uf-logo--p-claro{ display: block; }
/* Sobre a cor da marca a polaridade é sempre escura, seja qual for o modo. */
.uf-fecho .uf-logo--p-escuro, :root[data-theme="light"] .uf-fecho .uf-logo--p-escuro{ display: block; }
.uf-fecho .uf-logo--p-claro, :root[data-theme="light"] .uf-fecho .uf-logo--p-claro{ display: none; }

.uf-nav{ display: none; align-items: center; gap: 28px; }
.uf-nav a{
    font-size: 14px; font-weight: 500; color: var(--sf-muted);
    text-decoration: none; transition: color .2s ease;
}
.uf-nav a:hover, .uf-nav a[aria-current]{ color: var(--sf-text); }

.uf-topo__accoes{ display: flex; align-items: center; gap: 10px; }

/* --- Botões --------------------------------------------------------------- */

.uf-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 24px;
    border-radius: 999px; border: 1px solid transparent;
    font-family: var(--sf-font-body); font-size: 14px; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
}
.uf-btn--principal{
    background: var(--sf-primary); color: var(--sf-on-primary);
    box-shadow: 0 10px 25px -10px color-mix(in srgb, var(--sf-primary) 70%, transparent);
}
.uf-btn--principal:hover{ transform: scale(1.04); }
.uf-btn--principal:active{ transform: scale(.96); }
.uf-btn--texto{ background: transparent; color: var(--sf-muted); padding: 0 16px; }
.uf-btn--texto:hover{ color: var(--sf-text); }
.uf-btn--claro{ background: var(--sf-bg); color: var(--sf-text); }
.uf-btn--claro:hover{ opacity: .9; transform: scale(1.04); }

/* Botões de loja: rótulo pequeno em cima, acção forte em baixo. */
.uf-lojas{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.uf-loja{
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 10px 20px;
    border-radius: 999px; text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--sf-line) 60%, transparent);
    background: color-mix(in srgb, var(--sf-surface) 60%, transparent);
    color: var(--sf-text);
    transition: background-color .2s ease, transform .2s ease;
}
.uf-loja:hover{ background: var(--sf-surface2); }
.uf-loja:active{ transform: scale(.97); }
.uf-loja svg{ width: 24px; height: 24px; flex: none; }
.uf-loja__txt{ display: flex; flex-direction: column; line-height: 1.15; }
.uf-loja__txt b{ font-size: 14px; font-weight: 600; }
.uf-loja__txt small{ font-size: 11px; color: var(--sf-muted); }
.uf-lojas--claro .uf-loja{ border-color: transparent; background: var(--sf-bg); color: var(--sf-text); }

/* --- Pílulas e chips ------------------------------------------------------ */

.uf-pilula{
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 999px; background: var(--sf-tint); color: var(--sf-primary);
    padding: 6px 16px; font-size: 12px; font-weight: 600;
}
.uf-pilula__ponto{
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    animation: uf-pulso 2s ease-in-out infinite;
}
.uf-chips{ display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.uf-chips li{
    border-radius: 999px; background: var(--sf-tint); color: var(--sf-primary);
    padding: 8px 16px; font-size: 12px; font-weight: 600;
}

/* --- Hero ----------------------------------------------------------------- */

.uf-hero{ position: relative; overflow: hidden; padding: 112px 0 64px; }
.uf-hero__brilho{
    pointer-events: none; position: absolute; inset-inline: 0; top: 0; height: 480px; opacity: .25;
    background: radial-gradient(55% 60% at 25% 0%, var(--sf-primary) 0%, transparent 70%);
}
.uf-hero__int{
    position: relative; display: grid; gap: 56px; align-items: center;
    max-width: var(--env); margin-inline: auto; padding-inline: 20px;
}
.uf-hero__txt{ text-align: center; }
.uf-hero h1{
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.08; font-weight: 800; text-wrap: balance;
    margin-bottom: 8px;
}
/* O modelo foi desenhado para títulos de 5 ou 6 palavras. O do painel tem 10 e
   a 3,75rem enchia seis linhas de ecrã antes de se ver mais alguma coisa —
   a escala desce com o comprimento em vez de o texto ser cortado. */
.uf-hero h1.e-longo{ font-size: clamp(1.75rem, 4.2vw, 2.75rem); }
.uf-hero h1.e-muito-longo{ font-size: clamp(1.55rem, 3.4vw, 2.25rem); line-height: 1.15; }
/* Sublinhado ondulado sob a última palavra — a assinatura do Edu Smart. */
.uf-onda{ position: relative; display: inline-block; white-space: nowrap; }
.uf-onda svg{
    position: absolute; left: 0; bottom: -6px; width: 100%; height: 10px;
    color: var(--sf-primary);
}
.uf-hero__lead{
    margin: 20px auto 0; max-width: 36rem;
    font-size: clamp(1rem, 2vw, 1.125rem); color: var(--sf-muted); text-wrap: pretty;
}
.uf-hero__lojas{ margin-top: 32px; justify-content: center; }
.uf-hero__chips{ margin-top: 32px; justify-content: center; }

/* Pilha de cartões em leque */
.uf-leque{ position: relative; width: 100%; max-width: 24rem; margin-inline: auto; }
.uf-leque__mancha{
    position: absolute; inset: -20px; border-radius: 3rem;
    background: color-mix(in srgb, var(--sf-primary) 10%, transparent);
    transform: rotate(6deg);
}
.uf-leque__carta{
    border-radius: 1.8rem; border: 1px solid color-mix(in srgb, var(--sf-line) 40%, transparent);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.55);
    display: block; width: 100%; object-fit: cover; aspect-ratio: 3/4; background: var(--sf-surface2);
}
.uf-leque__esq{ position: absolute; left: 0; top: 40px; width: 56%; }
.uf-leque__dir{ position: absolute; right: 0; top: 64px; width: 56%; z-index: 10; }
.uf-leque__meio{ position: relative; z-index: 20; width: 64%; margin-inline: auto; }
.uf-leque__meio .uf-leque__carta{ border-radius: 2rem; }

/* Cartão flutuante com número */
/* Medido a 390px: com `left:-8px` o cartão saía do ecrã pela esquerda. Fica
   dentro por omissão e só sai para fora da pilha onde há espaço (≥1024px). */
.uf-selo{
    position: absolute; left: 8px; bottom: 24px; z-index: 30;
    width: 10rem; padding: 16px; text-align: left;
    border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--sf-line) 50%, transparent);
    background: color-mix(in srgb, var(--sf-surface) 90%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.4);
}
.uf-selo b{ font-family: var(--sf-font-heading); font-size: 24px; font-weight: 700; display: block; }
.uf-selo small{ display: block; margin-top: 2px; font-size: 11px; color: var(--sf-muted); }

/* --- Cabeçalho de secção -------------------------------------------------- */

.uf-sec{ padding: 80px 0; }
.uf-sec__cab{
    display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px;
}
.uf-sec__cab h2{
    font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; line-height: 1.1;
    max-width: 36rem; text-wrap: balance;
}
.uf-sec__aside{ font-size: 14px; color: var(--sf-muted); max-width: 14rem; }
.uf-sec__cab .uf-pilula{ margin-bottom: 16px; align-self: flex-start; }
.uf-sec--centro .uf-sec__cab{ align-items: center; text-align: center; max-width: 42rem; margin-inline: auto; }
.uf-sec--centro .uf-sec__cab .uf-pilula{ align-self: center; }
.uf-sec--centro .uf-sec__cab p{ color: var(--sf-muted); font-size: 15px; }

/* --- Grelha de cartões ---------------------------------------------------- */

.uf-grelha{ display: grid; gap: 24px; grid-template-columns: 1fr; }
.uf-grelha--2{ grid-template-columns: 1fr; }

.uf-carta{
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    border-radius: var(--sf-radius-card);
    border: 1px solid color-mix(in srgb, var(--sf-line) 40%, transparent);
    background: var(--sf-surface);
    transition: transform .3s ease, box-shadow .3s ease;
}
.uf-carta:hover{ transform: translateY(-6px); box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.uf-carta__img{ position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--sf-surface2); }
.uf-carta__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.uf-carta:hover .uf-carta__img img{ transform: scale(1.05); }
.uf-carta__corpo{ display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 24px; }
.uf-carta__corpo h3{ font-size: 18px; font-weight: 700; }
.uf-carta__corpo p{ margin: 0; font-size: 14px; color: var(--sf-muted); }
.uf-carta__selo{
    align-self: flex-start; border-radius: 999px; background: var(--sf-tint); color: var(--sf-primary);
    padding: 4px 12px; font-size: 11px; font-weight: 600;
}
.uf-carta__pe{
    margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid color-mix(in srgb, var(--sf-line) 30%, transparent);
}
.uf-carta__pe .uf-num{ font-family: var(--sf-font-heading); font-size: 13px; font-weight: 700; color: var(--sf-primary); }
.uf-seta{ width: 20px; height: 20px; color: var(--sf-primary); transition: transform .2s ease; }
.uf-carta:hover .uf-seta{ transform: translateX(4px); }

/* --- Percurso em escadinha (banda clara) ---------------------------------- */

.uf-banda{ background: var(--sf-light-bg); color: var(--sf-light-ink); padding: 80px 0; }
.uf-banda .uf-sec__aside{ color: var(--sf-light-muted); }
.uf-banda .uf-pilula{ background: var(--sf-tint); color: var(--sf-primary); }

.uf-escada{ position: relative; }
.uf-escada__linha{
    pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; display: none;
}
.uf-escada__grelha{ position: relative; display: grid; gap: 24px; grid-template-columns: 1fr; }

.uf-passo{
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    border-radius: var(--sf-radius-card);
    border: 1px solid var(--sf-light-line);
    background: var(--sf-light-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.uf-passo__topo{ position: relative; }
.uf-passo__img{ aspect-ratio: 16/10; overflow: hidden; background: var(--sf-light-bg); }
.uf-passo__img img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }
.uf-passo__n{
    position: absolute; left: 24px; bottom: -20px;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--sf-primary); color: var(--sf-on-primary);
    font-family: var(--sf-font-heading); font-size: 14px; font-weight: 700;
    box-shadow: 0 0 0 4px var(--sf-light-surface);
}
.uf-passo__corpo{ display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 28px 28px 28px; padding-top: 36px; }
.uf-passo__corpo h3{ font-size: 20px; font-weight: 700; }
.uf-passo__corpo p{ margin: 0; font-size: 14px; color: var(--sf-light-muted); }
.uf-passo__sem-img .uf-passo__corpo{ padding-top: 28px; }
.uf-passo__sem-img .uf-passo__n{ position: static; margin-bottom: 4px; box-shadow: none; }

.uf-checks{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.uf-checks li{ display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.uf-check{
    margin-top: 2px; flex: none; display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--sf-tint); color: var(--sf-primary);
}
.uf-check svg{ width: 12px; height: 12px; }

/* --- Faixa de chamada ----------------------------------------------------- */

.uf-faixa{
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 24px;
    align-items: flex-start; justify-content: space-between;
    border-radius: var(--sf-radius-card);
    background: var(--sf-tint); color: var(--sf-on-tint);
    padding: 32px;
}
.uf-faixa h2{ font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 800; text-wrap: balance; }
.uf-faixa p{ margin: 8px 0 0; max-width: 36rem; font-size: 15px; color: var(--sf-on-tint-muted); }
.uf-faixa__rabisco{
    pointer-events: none; position: absolute; right: 40px; top: 24px;
    width: 80px; height: 24px; color: color-mix(in srgb, var(--sf-primary) 30%, transparent); display: none;
}
.uf-faixa__bolha{
    pointer-events: none; position: absolute; left: -48px; bottom: -48px;
    width: 144px; height: 144px; border-radius: 50%;
    background: color-mix(in srgb, var(--sf-primary) 10%, transparent);
}
/* O conteúdo sobe acima dos decorativos — mas sem os arrastar consigo: uma
   regra sobre TODOS os filhos punha o rabisco e a bolha em `relative` e
   atirava-os para dentro do fluxo, no meio do texto. */
.uf-faixa > *:not(.uf-faixa__rabisco):not(.uf-faixa__bolha){ position: relative; z-index: 1; }

/* --- Fecho sobre a cor da marca ------------------------------------------- */

.uf-fecho{ overflow: hidden; background: var(--sf-primary); color: var(--sf-on-primary); padding-top: 80px; }
.uf-fecho__int{ max-width: 48rem; margin-inline: auto; padding-inline: 20px; text-align: center; }
.uf-fecho img.uf-fecho__logo{ margin: 0 auto 24px; height: 64px; width: auto; border-radius: 16px; }
.uf-fecho h2{ font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; line-height: 1.12; text-wrap: balance; }
.uf-fecho p{ margin-top: 16px; color: color-mix(in srgb, var(--sf-on-primary) 85%, transparent); }
.uf-fecho .uf-lojas{ margin-top: 32px; justify-content: center; }

.uf-marquee{ margin-top: 56px; overflow: hidden; }
.uf-marquee__pista{ display: flex; width: max-content; gap: 24px; animation: uf-marquee 40s linear infinite; }
.uf-marquee__pista > *{ flex: none; width: 10rem; }
.uf-marquee img{
    width: 100%; border-radius: 1.8rem 1.8rem 0 0; display: block;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.45); aspect-ratio: 3/4; object-fit: cover;
}
.uf-marquee__pista > *:nth-child(odd){ transform: translateY(40px); }
.uf-marquee__pista > *:nth-child(even){ transform: translateY(24px); }

/* --- Prosa (páginas legais vindas do editor do painel) -------------------- */

.uf-prosa{ font-size: 16px; line-height: 1.75; color: var(--sf-text); }
.uf-prosa h2,.uf-prosa h3{ font-family: var(--sf-font-heading); font-weight: 700; margin: 2.2em 0 .7em; }
.uf-prosa h2{ font-size: 1.5rem; } .uf-prosa h3{ font-size: 1.2rem; }
.uf-prosa h2:first-child,.uf-prosa h3:first-child{ margin-top: 0; }
.uf-prosa p{ margin: 1em 0; color: color-mix(in srgb, var(--sf-text) 88%, var(--sf-muted)); }
.uf-prosa a{ color: var(--sf-primary); text-decoration: underline; text-underline-offset: 3px; }
.uf-prosa strong{ font-weight: 700; color: var(--sf-text); }
.uf-prosa ul,.uf-prosa ol{ margin: 1em 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: .45em; }
.uf-prosa ul{ list-style: disc; } .uf-prosa ol{ list-style: decimal; }
.uf-prosa li::marker{ color: var(--sf-primary); }
.uf-prosa blockquote{ margin: 1.4em 0; border-left: 3px solid var(--sf-primary); padding: .4em 0 .4em 1.2em; color: var(--sf-muted); }
.uf-prosa img{ border-radius: var(--sf-radius-card); margin: 1.6em 0; }
.uf-prosa table{ width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.uf-prosa th,.uf-prosa td{ border: 1px solid var(--sf-line); padding: .6em .8em; text-align: left; }

/* --- Formulário ----------------------------------------------------------- */

.uf-campo{ display: flex; flex-direction: column; gap: 8px; }
.uf-campo label{ font-size: 13px; font-weight: 600; color: var(--sf-muted); }
.uf-campo input,.uf-campo textarea{
    width: 100%; min-height: 48px; padding: 12px 16px;
    border-radius: var(--sf-radius-control);
    border: 1px solid color-mix(in srgb, var(--sf-line) 70%, transparent);
    background: var(--sf-surface); color: var(--sf-text);
    font-family: inherit; font-size: 15px;
}
.uf-campo textarea{ min-height: 140px; resize: vertical; }
.uf-campo input::placeholder,.uf-campo textarea::placeholder{ color: color-mix(in srgb, var(--sf-muted) 80%, transparent); }
.uf-alerta{
    border-radius: var(--sf-radius-control); padding: 14px 18px; font-size: 14px;
    background: var(--sf-tint); color: var(--sf-primary); font-weight: 600;
}

/* --- Rodapé --------------------------------------------------------------- */

.uf-rodape{
    border-top: 1px solid color-mix(in srgb, var(--sf-line) 40%, transparent);
    background: var(--sf-surface); padding: 64px 0 24px; margin-top: 0;
}
.uf-rodape__grelha{ display: grid; gap: 40px; grid-template-columns: 1fr; }
.uf-rodape h2{ font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--sf-text); margin-bottom: 16px; font-family: var(--sf-font-body); font-weight: 700; }
.uf-rodape ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.uf-rodape a{ color: var(--sf-muted); text-decoration: none; font-size: 14px; }
.uf-rodape a:hover{ color: var(--sf-text); }
.uf-rodape p{ color: var(--sf-muted); font-size: 14px; }
.uf-rodape img{ height: 40px; width: auto; margin-bottom: 16px; }
.uf-rodape__fim{
    margin-top: 40px; padding-top: 24px; font-size: 13px; color: var(--sf-muted);
    border-top: 1px solid color-mix(in srgb, var(--sf-line) 40%, transparent);
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
}
.uf-redes{ display: flex; gap: 10px; }
.uf-redes a{
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--sf-line) 50%, transparent); color: var(--sf-muted);
    transition: color .2s ease, border-color .2s ease;
}
.uf-redes a:hover{ color: var(--sf-primary); border-color: var(--sf-primary); }
.uf-redes svg{ width: 18px; height: 18px; }

/* --- Movimento ------------------------------------------------------------ */
/* A entrada é a do modelo: opacidade + deslocação (+ rotação a assentar), com
   a curva do spring real. O JS só troca a classe quando o elemento entra na
   janela; a física vive toda aqui. */

.uf-rev{
    opacity: 0;
    transform: translate3d(var(--rx, 0), var(--ry, 0), 0) rotate(0deg) scale(var(--rs, 1));
    transition:
        opacity .35s ease var(--rd, 0s),
        transform var(--sf-spring-dur) var(--sf-spring) var(--rd, 0s);
    will-change: opacity, transform;
}
.uf-rev.is-in{
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--rr, 0deg)) scale(1);
}

.uf-flutua{ animation: uf-flutua 5s ease-in-out infinite; }

@keyframes uf-flutua{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-7px); }
}
@keyframes uf-pulso{
    0%,100%{ opacity: 1; transform: scale(1); }
    50%{ opacity: .45; transform: scale(.85); }
}
@keyframes uf-marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}

/* --- Adaptação ------------------------------------------------------------ */

@media (min-width: 640px){
    .uf-grelha--2{ grid-template-columns: repeat(2, 1fr); }
    .uf-rodape__grelha{ grid-template-columns: repeat(2, 1fr); }
    .uf-faixa{ padding: 48px; }
}

@media (min-width: 768px){
    .uf-nav{ display: flex; }
    .uf-sec{ padding: 96px 0; }
    .uf-banda{ padding: 96px 0; }
    .uf-sec__cab{ flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; }
    .uf-sec__aside{ text-align: right; }
    .uf-sec--centro .uf-sec__cab{ flex-direction: column; align-items: center; }
    .uf-sec--centro .uf-sec__aside{ text-align: center; max-width: 36rem; }
    .uf-grelha{ grid-template-columns: repeat(3, 1fr); }
    .uf-grelha--2{ grid-template-columns: repeat(2, 1fr); }
    .uf-grelha--4{ grid-template-columns: repeat(2, 1fr); }
    .uf-escada__grelha{ grid-template-columns: repeat(3, 1fr); }
    .uf-escada__linha{ display: block; }
    .uf-escada{ padding-bottom: 80px; }
    /* os degraus: o 2.º desce 40px, o 3.º desce 80px */
    .uf-escada__grelha > *:nth-child(3n+2){ transform: translateY(40px); }
    .uf-escada__grelha > *:nth-child(3n+3){ transform: translateY(80px); }
    .uf-faixa{ flex-direction: row; align-items: center; }
    .uf-faixa__rabisco{ display: block; }
    .uf-marquee__pista > *{ width: 13rem; }
    .uf-rodape__grelha{ grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .uf-hero__lead{ margin-inline: 0; }
    .uf-onda svg{ bottom: -10px; height: 12px; }
}

@media (min-width: 1024px){
    .uf-hero{ padding-top: 144px; }
    .uf-hero__int{ grid-template-columns: 1fr 1fr; gap: 40px; }
    .uf-hero__txt{ text-align: left; }
    .uf-hero__lojas, .uf-hero__chips{ justify-content: flex-start; }
    .uf-leque{ max-width: 28rem; }
    .uf-grelha--4{ grid-template-columns: repeat(4, 1fr); }
    .uf-selo{ left: -24px; bottom: 40px; }
    /* O hero já respira com o seu próprio fundo; sem isto o salto até à
       secção seguinte era de quase 200px de vazio. */
    .uf-hero{ padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .uf-rev{ opacity: 1; transform: none; transition: none; }
    .uf-flutua, .uf-marquee__pista, .uf-pilula__ponto{ animation: none; }
    .uf-marquee__pista > *{ transform: none; }
    .uf *{ transition-duration: .01ms !important; }
}