/* ==========================================================================
   Pedê Música - Design System
   Identidade extraída da logo oficial (img/logo.png): "PEDÊ" em violeta
   vivo → ciano, "MÚSICA" em amarelo → laranja, sobre fundo quase preto
   com brilho índigo. Tipografia forte, cantos generosos, microinterações
   discretas.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* ------------------------------------------------------------------
       Tema CLARO por padrão (fundo branco). O tema escuro original vira
       opt-in: em `html.dark`, em `@media (prefers-color-scheme: dark)` e
       sempre em `body.cliente` / `body.tela` (usados no escuro). Só os
       tokens abaixo mudam entre os temas - o resto do CSS referencia
       token, não cor literal. */

    /* Superfícies (a escala "noite" manteve o nome; no claro é uma rampa
       de cinzas quase-brancos) */
    --noite-900: #FFFFFF;
    --noite-800: #F7F7FB;
    --noite-700: #FFFFFF;
    --noite-600: #EEECF5;
    --noite-500: #E6E3F0;
    --superficie:       rgba(17, 12, 34, .04);
    --superficie-forte: rgba(17, 12, 34, .08);
    --superficie-alta:  #FFFFFF;
    --vidro:            rgba(255, 255, 255, .82);
    --campo-bg:         #FFFFFF;
    --campo-bg-foco:    #FFFFFF;
    --overlay:          rgba(16, 10, 30, .45);
    --linha:       rgba(17, 12, 34, .10);
    --linha-forte: rgba(17, 12, 34, .16);

    /* Marca - sampleada da logo: violeta (#8501FF) → ciano pálido (#ABEDFB)
       no "PEDÊ", amarelo (#FFC900) → laranja (#FE7700) no "MÚSICA". */
    --roxo:      #7C3AED;
    --roxo-vivido: #8B1AFF;
    --roxo-claro:#A855F7;
    --ciano:     #22D3EE;
    --laranja:   #F97316;
    --rosa:      #EC4899;
    --verde:     #22C55E;
    --amarelo:   #FACC15;
    --vermelho:  #F43F5E;

    --gradiente-marca: linear-gradient(135deg, var(--roxo-vivido) 0%, var(--ciano) 48%, var(--laranja) 100%);
    /* Cor de acao - roxo solido da marca, usada em botoes, controles, barras e graficos.
       Segue var(--roxo), entao o tema por estabelecimento continua valendo.
       O degrade --gradiente-marca fica reservado ao simbolo/wordmark da logo. */
    --cor-acao: var(--roxo);
    --gradiente-quente: linear-gradient(120deg, var(--amarelo) 0%, var(--laranja) 60%, #EF4444 100%);
    --gradiente-frio:  linear-gradient(135deg, var(--ciano) 0%, var(--roxo-vivido) 100%);
    --gradiente-fundo: radial-gradient(900px 600px at 12% -8%, rgba(139, 26, 255, .07), transparent 60%),
                       radial-gradient(760px 560px at 92% 4%, rgba(34, 211, 238, .06), transparent 62%);

    /* Texto */
    --texto:        #17121F;
    --texto-suave:  #4A4458;
    --texto-fraco:  #6B6480;

    /* Etiquetas (o -bg funciona nos dois temas; só o texto muda) */
    --etq-marca-bg: rgba(124,58,237,.12);  --etq-marca-tx: #6D28D9;
    --etq-sucesso-bg: rgba(34,197,94,.14); --etq-sucesso-tx: #15803D;
    --etq-alerta-bg: rgba(234,179,8,.16);  --etq-alerta-tx: #A16207;
    --etq-perigo-bg: rgba(244,63,94,.12);  --etq-perigo-tx: #BE123C;
    --etq-info-bg: rgba(6,182,212,.14);    --etq-info-tx: #0E7490;

    /* Métricas */
    --raio-sm: 10px;
    --raio:    16px;
    --raio-lg: 24px;
    --raio-xl: 32px;
    --sombra:      0 18px 44px -24px rgba(20, 12, 40, .30);
    --sombra-neon: 0 10px 40px -12px rgba(124, 58, 237, .35);
    --transicao: 180ms cubic-bezier(.22, .61, .36, 1);
    --container: 1180px;
    color-scheme: light;
}

/* ---- Tema ESCURO: opt-in por classe, por preferência do SO, e fixo na
        tela do salão (a tela de pedir do cliente agora é clara) -------- */
:root.dark,
body.tela {
    color-scheme: dark;
    --noite-900: #07040F;
    --noite-800: #0C0718;
    --noite-700: #130B22;
    --noite-600: #1B1030;
    --noite-500: #241640;
    --superficie:       rgba(255, 255, 255, .05);
    --superficie-forte: rgba(255, 255, 255, .12);
    --superficie-alta:  #130B22;
    --vidro:            rgba(7, 4, 15, .82);
    --campo-bg:         rgba(10, 6, 20, .65);
    --campo-bg-foco:    rgba(10, 6, 20, .9);
    --overlay:          rgba(4, 2, 10, .74);
    --linha:       rgba(255, 255, 255, .09);
    --linha-forte: rgba(255, 255, 255, .16);
    --gradiente-fundo: radial-gradient(900px 600px at 12% -8%, rgba(139, 26, 255, .38), transparent 60%),
                       radial-gradient(760px 560px at 92% 4%, rgba(34, 211, 238, .30), transparent 62%),
                       radial-gradient(800px 700px at 60% 100%, rgba(249, 115, 22, .18), transparent 60%);
    --texto:        #F5F3FF;
    --texto-suave:  #C4B9DE;
    --texto-fraco:  #8E82AD;
    --etq-marca-tx: #E9D5FF;
    --etq-sucesso-tx: #BBF7D0;
    --etq-alerta-tx: #FEF08A;
    --etq-perigo-tx: #FECDD3;
    --etq-info-tx: #A5F3FC;
    --sombra:      0 18px 50px -20px rgba(0, 0, 0, .85);
    --sombra-neon: 0 10px 40px -12px rgba(124, 58, 237, .65);
}

/* Sem bloco @media (prefers-color-scheme: dark): o claro é o tema principal
   para todos, como no padrão RestPro. O escuro é sempre opt-in explícito
   (html.dark) - e permanente em body.tela acima. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100dvh;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--noite-900);
    background-image: var(--gradiente-fundo);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; color: var(--texto-suave); }
::selection { background: var(--roxo); color: #fff; }

/* --------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.container-estreito { max-width: 760px; }
.secao { padding: clamp(56px, 9vw, 110px) 0; }
.grade { display: grid; gap: 20px; }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.flex { display: flex; gap: 12px; align-items: center; }
.flex-entre { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.flex-coluna { display: flex; flex-direction: column; gap: 12px; }
.centro { text-align: center; }
.esconder { display: none !important; }
@media (max-width: 720px) { .esconder-mobile { display: none !important; } }
@media (min-width: 721px) { .so-mobile { display: none !important; } }

/* --------------------------------------------------------------- marca */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.03em; }
.marca-icone {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--gradiente-marca); box-shadow: var(--sombra-neon); flex: none;
}
.marca-icone svg { width: 20px; height: 20px; }
.marca-texto { font-size: 1.15rem; }
.marca-texto span { background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Wordmark horizontal usada nas navbars (landing + dashboards). */
.marca-navbar { display: inline-flex; align-items: center; }
.marca-navbar img { display: block; }

/* Botão de troca de tema: lua no claro, sol no escuro. */
.tema-toggle svg { width: 18px; height: 18px; }
.tema-toggle .tema-sol { display: none; }
:root.dark .tema-toggle .tema-lua { display: none; }
:root.dark .tema-toggle .tema-sol { display: block; }

/* --------------------------------------------------------------- botões */
.botao {
    --bg: var(--cor-acao);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border: 0; border-radius: 999px; cursor: pointer;
    font-weight: 600; font-size: .97rem; letter-spacing: .01em; white-space: nowrap;
    background: var(--bg); color: #fff; box-shadow: var(--sombra-neon);
    transition: transform var(--transicao), box-shadow var(--transicao), opacity var(--transicao), background var(--transicao);
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 16px 46px -12px rgba(124, 58, 237, .8); }
.botao:active { transform: translateY(0) scale(.985); }
.botao:disabled, .botao[aria-busy="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.botao-secundario { --bg: var(--superficie); box-shadow: none; border: 1px solid var(--linha-forte); backdrop-filter: blur(8px); color: var(--texto); }
.botao-secundario:hover { --bg: var(--superficie-forte); box-shadow: none; }
.botao-fantasma { --bg: transparent; box-shadow: none; color: var(--texto-suave); padding-inline: 14px; }
.botao-fantasma:hover { --bg: var(--superficie); color: var(--texto); box-shadow: none; }
.botao-perigo { --bg: linear-gradient(135deg, #f43f5e, #b91c1c); box-shadow: 0 10px 30px -12px rgba(244,63,94,.7); }
.botao-sucesso { --bg: linear-gradient(135deg, #22c55e, #059669); box-shadow: 0 10px 30px -12px rgba(34,197,94,.6); }
.botao-bloco { width: 100%; }
.botao-pequeno { padding: 8px 16px; font-size: .86rem; }
.botao-icone { padding: 10px; width: 42px; height: 42px; border-radius: 14px; }
.botao svg { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------- cartões */
.cartao {
    background: var(--superficie-alta);
    border: 1px solid var(--linha);
    border-radius: var(--raio-lg);
    padding: 22px;
    box-shadow: var(--sombra);
    backdrop-filter: blur(14px);
}
.cartao-plano { position: relative; display: flex; flex-direction: column; transition: transform var(--transicao), border-color var(--transicao); }
.cartao-plano:hover { transform: translateY(-6px); border-color: var(--linha-forte); }
.cartao-destaque { border-color: rgba(168,85,247,.55); box-shadow: 0 24px 70px -28px rgba(124,58,237,.9); }
.cartao-destaque::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
    background: var(--gradiente-marca); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

.etiqueta {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    background: var(--superficie-forte); border: 1px solid var(--linha); color: var(--texto-suave);
}
.etiqueta-marca { background: var(--etq-marca-bg); border-color: rgba(168,85,247,.45); color: var(--etq-marca-tx); }
.etiqueta-sucesso { background: var(--etq-sucesso-bg); border-color: rgba(34,197,94,.4); color: var(--etq-sucesso-tx); }
.etiqueta-alerta { background: var(--etq-alerta-bg); border-color: rgba(234,179,8,.4); color: var(--etq-alerta-tx); }
.etiqueta-perigo { background: var(--etq-perigo-bg); border-color: rgba(244,63,94,.4); color: var(--etq-perigo-tx); }
.etiqueta-info { background: var(--etq-info-bg); border-color: rgba(6,182,212,.4); color: var(--etq-info-tx); }

/* --------------------------------------------------------------- formulários */
.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.campo label { font-size: .85rem; font-weight: 600; color: var(--texto-suave); }
.campo .ajuda { font-size: .78rem; color: var(--texto-fraco); }
.entrada, select.entrada, textarea.entrada {
    width: 100%; padding: 13px 16px; border-radius: var(--raio);
    background: var(--campo-bg); border: 1px solid var(--linha-forte); color: var(--texto);
    transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
    appearance: none;
}
.entrada::placeholder { color: var(--texto-fraco); }
.entrada:focus { outline: 0; border-color: var(--roxo-claro); box-shadow: 0 0 0 4px rgba(124,58,237,.22); background: var(--campo-bg-foco); }
select.entrada {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6480' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px;
}
textarea.entrada { min-height: 110px; resize: vertical; }

/* ------------------------------------------------------------ custom select
   Mesmo padrão de select do RestPro: um <input type="hidden"> com o valor
   de verdade (ganha o id/name/data-* do campo) + um botão que mostra o
   rótulo + uma lista de opções portada pro <body> enquanto está aberta
   (evita cortar em containers com overflow/scroll). Handler global em
   js/app.js - nunca criar JS de abrir/fechar por select. */
.custom-select { position: relative; width: 100%; }
.custom-select.select-compacto { width: auto; min-width: 84px; }
.select-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 13px 16px; border-radius: var(--raio); text-align: left;
    background: var(--campo-bg); border: 1px solid var(--linha-forte); color: var(--texto);
    cursor: pointer; font: inherit;
    transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.select-compacto .select-trigger { padding: 9px 12px; font-size: .88rem; }
.select-trigger:hover { background: var(--superficie-forte); }
.custom-select.aberto .select-trigger { outline: 0; border-color: var(--roxo-claro); box-shadow: 0 0 0 4px rgba(124,58,237,.22); }
.select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-seta { width: 16px; height: 16px; flex: none; color: var(--texto-fraco); transition: transform var(--transicao); }
.custom-select.aberto .select-seta { transform: rotate(180deg); }

.select-options {
    background: var(--superficie-alta); border: 1px solid var(--linha-forte); border-radius: var(--raio);
    box-shadow: var(--sombra); max-height: 264px; overflow-y: auto; padding: 6px;
    /* portada pro <body>: garante que nada do container original a corte */
    overscroll-behavior: contain;
}
/* No tema escuro o painel flutuante precisa se destacar do fundo quase
   preto - a superfície elevada e a sombra preta praticamente somem. */
:root.dark .select-options {
    background: var(--noite-500);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .4);
}
.select-options .option {
    padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: .93rem; color: var(--texto-suave);
    transition: background var(--transicao), color var(--transicao);
}
.select-options .option:hover { background: var(--superficie-forte); color: var(--texto); }
.select-options .option.selecionado { background: rgba(124, 58, 237, .18); color: var(--texto); font-weight: 600; }
:root.dark .select-options .option.selecionado { background: rgba(139, 26, 255, .32); }

.interruptor { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor .trilho {
    width: 50px; height: 28px; border-radius: 999px; background: var(--superficie-forte);
    border: 1px solid var(--linha-forte); position: relative; transition: background var(--transicao); flex: none;
}
.interruptor .trilho::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform var(--transicao);
}
.interruptor input:checked + .trilho { background: var(--cor-acao); border-color: transparent; }
.interruptor input:checked + .trilho::after { transform: translateX(22px); }
.interruptor input:focus-visible + .trilho { box-shadow: 0 0 0 4px rgba(124,58,237,.3); }

/* --------------------------------------------------------------- listas de música */
.faixa {
    display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--raio);
    border: 1px solid transparent; transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.faixa:hover { background: var(--superficie); border-color: var(--linha); }
.faixa-capa {
    width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none;
    background: var(--noite-600); box-shadow: 0 8px 22px -12px rgba(0,0,0,.9);
}
.faixa-info { min-width: 0; flex: 1; }
.faixa-titulo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-artista { font-size: .86rem; color: var(--texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-meta { font-size: .8rem; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.posicao-fila {
    width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none;
    background: var(--superficie-forte); border: 1px solid var(--linha); font-size: .82rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--texto-suave);
}

.barra-progresso { height: 6px; border-radius: 999px; background: var(--superficie-forte); overflow: hidden; }
.barra-progresso span { display: block; height: 100%; border-radius: inherit; background: var(--cor-acao); transition: width 1s linear; }

/* Equalizador animado (indicador de "tocando agora") */
.equalizador { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.equalizador i { width: 3px; border-radius: 2px; background: var(--ciano); animation: pulo .9s ease-in-out infinite; }
.equalizador i:nth-child(1) { height: 60%; animation-delay: -.2s; }
.equalizador i:nth-child(2) { height: 100%; animation-delay: -.5s; }
.equalizador i:nth-child(3) { height: 45%; animation-delay: -.8s; }
.equalizador i:nth-child(4) { height: 80%; animation-delay: -.3s; }
@keyframes pulo { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* --------------------------------------------------------------- estados */
.skeleton {
    background: linear-gradient(90deg, var(--superficie) 25%, var(--superficie-forte) 37%, var(--superficie) 63%);
    background-size: 400% 100%; animation: brilho 1.4s ease infinite; border-radius: var(--raio-sm);
}
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-faixa { display: flex; align-items: center; gap: 14px; padding: 10px; }
.skeleton-capa { width: 54px; height: 54px; border-radius: 12px; flex: none; }
.skeleton-linha { height: 12px; border-radius: 6px; }

.vazio { text-align: center; padding: 44px 20px; color: var(--texto-fraco); }
.vazio-icone {
    width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 22px; display: grid; place-items: center;
    background: var(--superficie); border: 1px solid var(--linha); color: var(--roxo-claro);
}
.vazio h3 { color: var(--texto); }

.girando { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- avisos (toasts) */
#avisos {
    position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
    bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px;
    width: min(440px, calc(100vw - 32px)); pointer-events: none;
}
.aviso {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--raio);
    background: var(--superficie-alta); border: 1px solid var(--linha-forte); box-shadow: var(--sombra);
    backdrop-filter: blur(16px); animation: aviso-entra .3s cubic-bezier(.22,.61,.36,1);
    font-size: .93rem; pointer-events: auto;
}
.aviso.saindo { animation: aviso-sai .25s ease forwards; }
.aviso-icone { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.aviso-success .aviso-icone { background: rgba(34,197,94,.2); color: #4ADE80; }
.aviso-error .aviso-icone   { background: rgba(244,63,94,.2); color: #FB7185; }
.aviso-info .aviso-icone    { background: rgba(34,211,238,.2); color: #67E8F9; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes aviso-sai { to { opacity: 0; transform: translateY(10px) scale(.97); } }

/* --------------------------------------------------------------- modal
   Mesmo padrão de modal do RestPro: wrapper com [data-modal], um "fundo"
   que fecha ao clicar e um `.modal-panel` que entra em cena. Abrir/fechar
   é sempre via `command="show-modal|close" commandfor="idDaModal"`,
   controlado pelo handler global central em js/app.js (empilhamento de
   modais, Esc, overflow-hidden no body e pausa do blur da modal coberta).
   Não criar JS de abrir/fechar por modal - ver AGENTS.md do RestPro. */
.modal {
    position: fixed; inset: 0; z-index: 55; align-items: center; justify-content: center; padding: 20px;
}
.modal-fundo { position: absolute; inset: 0; background: var(--overlay); }
.modal-panel {
    position: relative; width: min(520px, 100%); max-height: 88dvh; overflow: auto; padding: 26px;
    background: var(--superficie-alta); border: 1px solid var(--linha-forte); border-radius: var(--raio-lg);
    box-shadow: var(--sombra); margin: auto;
    /* Mesma animação do RestPro (`transition-all duration-200` no .modal-panel):
       o Tailwind v4 aqui anima a propriedade `scale` (não `transform`), então
       `scale` PRECISA estar na lista - sem ela o scale-95 -> scale-100 era seco. */
    transition: scale 200ms cubic-bezier(.22,.61,.36,1),
                transform 200ms cubic-bezier(.22,.61,.36,1),
                opacity 200ms cubic-bezier(.22,.61,.36,1);
}
.modal-cabecalho {
    display: flex; align-items: center; justify-content: space-between;
    margin: -26px -26px 18px; padding: 18px 22px; border-bottom: 1px solid var(--linha);
}
.modal-cabecalho .modal-titulo { font-weight: 700; color: var(--texto); }

/* hidden/flex/scale-95/opacity-0/scale-100/opacity-100/overflow-hidden/
   backdrop-blur-sm usados pelo handler global de modal (js/app.js) agora
   vêm do Tailwind de verdade (css/output.css) - mesmo mecanismo do
   RestPro, sem duplicar utilitário aqui. `.flex` continua definido embaixo
   com gap+align-items (atalho usado no projeto inteiro): por ser CSS sem
   camada, ele sempre vence o `.flex` do Tailwind no cascade, então os dois
   convivem sem conflito. */

/* --------------------------------------------------------------- utilitários */
.texto-gradiente { background: var(--gradiente-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.texto-gradiente-quente { background: var(--gradiente-quente); -webkit-background-clip: text; background-clip: text; color: transparent; }
.texto-suave { color: var(--texto-suave); }
.texto-fraco { color: var(--texto-fraco); }
.subtotal { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); }
.texto-pequeno { font-size: .85rem; }
.texto-mini { font-size: .78rem; }
.negrito { font-weight: 700; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.divisor { height: 1px; background: var(--linha); margin: 20px 0; border: 0; }
.rolagem-fina::-webkit-scrollbar { width: 8px; height: 8px; }
.rolagem-fina::-webkit-scrollbar-thumb { background: var(--superficie-forte); border-radius: 999px; }
.rolagem-fina::-webkit-scrollbar-track { background: transparent; }

/* Scroll-reveal da landing page (ver js/landing.js): o elemento nasce com
   utilitários Tailwind (opacity-0/translate-y-*) e ganha `.is-revelado`
   quando entra na viewport - a transição em si fica aqui para não
   depender de trocar classe por classe via JS. */
[data-reveal] { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
[data-reveal].is-revelado { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}