/* ============================================ AURAS - Páginas institucionais (apresentação, privacidade, termos, contato) Paleta própria da AURAS (magenta/roxo), mesma estrutura de layout de leitura das páginas institucionais da BARBIO (Bebas Neue + Inter). ============================================ */ :root { --preto-absoluto: #0C001B; --carvao: #170B2B; --carvao-claro: #221238; --linha: rgba(200, 140, 255, 0.08); --linha-forte: rgba(200, 140, 255, 0.14); --gold-claro: #FEA981; --gold: #D63EA3; --gold-bronze: #62099A; --foil: linear-gradient(155deg, var(--gold-claro) 0%, var(--gold) 55%, var(--gold-bronze) 100%); --prata: #E9DCEF; --aco: #9C8BAE; --aco-escuro: #5E4E70; --branco: #F7F3FB; --erro: #f1706a; --sucesso: #7bc596; --sobre-dourado: #2A0E24; --fundo-cabecalho: rgba(12, 0, 27, 0.85); --raio: 18px; --raio-pequeno: 12px; --sombra-premium: 0 24px 48px -24px rgba(0, 0, 0, 0.8); --sombra-gold: 0 10px 26px -8px rgba(214, 62, 163, 0.45); --fonte-corpo: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --fonte-display: 'Bebas Neue', 'Inter', sans-serif; } /* ---------- Tema claro ---------- Mesmas variáveis, valores invertidos pra fundo claro. --sobre-dourado fica de fora de propósito: texto sobre dourado precisa continuar escuro nos dois temas. Ativado via data-tema="claro" no (public/js/tema.js). */ html[data-tema="claro"] { --preto-absoluto: #FBF7FE; --carvao: #FFFFFF; --carvao-claro: #F3EAFA; --linha: rgba(98, 9, 154, 0.09); --linha-forte: rgba(98, 9, 154, 0.16); --gold-claro: #D97D4A; --gold: #B22D86; --gold-bronze: #4A0770; --prata: #4A3D5C; --aco: #6E6078; --aco-escuro: #B7A8C4; --branco: #1E1229; --erro: #D6453D; --sucesso: #2F9E5B; --fundo-cabecalho: rgba(251, 247, 254, 0.85); --sombra-premium: 0 20px 40px -22px rgba(98, 9, 154, 0.16); --sombra-gold: 0 8px 22px -6px rgba(178, 45, 134, 0.35); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Barra de rolagem do navegador (desktop) — mesma paleta neutra usada nos scrolls internos do sistema, em vez do cinza padrão do SO. scrollbar-color cobre Firefox; os pseudo-elementos ::-webkit-scrollbar-* logo abaixo cobrem WebKit/Blink (Chrome, Edge, Safari, Opera, Brave). */ scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--linha-forte); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--aco-escuro); } ::-webkit-scrollbar-corner { background: transparent; } body { font-family: var(--fonte-corpo); background: var(--preto-absoluto); color: var(--branco); min-height: 100vh; position: relative; -webkit-font-smoothing: antialiased; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 1000px 600px at 50% -10%, rgba(214, 62, 163, 0.08), transparent 60%); } a { color: inherit; } .container-inst { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 6vw, 28px); position: relative; z-index: 1; } /* ---------- Cabeçalho ---------- */ .inst-cabecalho { border-bottom: 1px solid var(--linha); background: var(--fundo-cabecalho); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; } .inst-cabecalho-linha { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; gap: 16px; position: relative; } .inst-cabecalho-acoes { display: flex; align-items: center; gap: 8px; } .inst-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; } .inst-marca img { height: 26px; width: auto; } /* Tema claro usa a versão escura da logo (mais legível em fundo claro) — a troca do src é feita via JS em tema.js (não usar content:url() aqui: quebra o cálculo de proporção da imagem trocada). */ .inst-marca span { font-family: var(--fonte-display); font-size: 20px; letter-spacing: 1px; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; } .inst-nav { display: flex; align-items: center; gap: 4px; scrollbar-width: none; -ms-overflow-style: none; } .inst-nav::-webkit-scrollbar { display: none; } .inst-nav a { text-decoration: none; color: var(--aco); font-size: 13px; font-weight: 500; padding: 10px 12px; border-radius: 8px; transition: all 0.15s ease; white-space: nowrap; flex-shrink: 0; } .inst-nav a:hover { color: var(--branco); background: var(--carvao-claro); } .inst-nav a.ativo { color: var(--gold-claro); } .inst-nav-entrar { margin-left: 6px; padding: 10px 16px !important; background: var(--carvao-claro); border: 1px solid var(--linha-forte); color: var(--branco) !important; flex-shrink: 0; } .botao-tema { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 6px; padding: 0; border: 1px solid var(--linha); border-radius: 50%; background: transparent; color: var(--aco); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .botao-tema:hover { border-color: var(--gold); color: var(--gold-claro); } .botao-menu-mobile { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--linha); border-radius: 10px; background: transparent; color: var(--branco); font-size: 16px; cursor: pointer; flex-shrink: 0; } /* ---------- Hero ---------- */ .inst-hero { padding: clamp(40px, 9vw, 64px) 0 clamp(28px, 6vw, 40px); text-align: center; } .inst-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); background: rgba(214, 62, 163, 0.1); border: 1px solid rgba(214, 62, 163, 0.25); padding: 6px 14px; border-radius: 100px; margin-bottom: 20px; } .inst-titulo { font-family: var(--fonte-display); font-size: clamp(30px, 8.5vw, 58px); letter-spacing: 0.5px; line-height: 1.08; text-transform: uppercase; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; } .inst-subtitulo { color: var(--aco); font-size: clamp(15px, 3.6vw, 17px); max-width: 600px; margin: 0 auto; line-height: 1.6; } .inst-atualizado { display: inline-block; margin-top: 18px; font-size: 12px; color: var(--aco-escuro); font-family: 'Space Mono', monospace; } /* ---------- Corpo de leitura (prosa) ---------- */ .inst-corpo { padding: 12px 0 80px; } .inst-prosa { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%), var(--carvao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-premium); padding: clamp(26px, 5vw, 44px) clamp(20px, 5.5vw, 48px); position: relative; } .inst-prosa::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, var(--gold-bronze) 15%, var(--gold-claro) 50%, var(--gold-bronze) 85%, transparent); } .inst-prosa h2 { font-family: var(--fonte-display); font-size: 24px; letter-spacing: 0.5px; color: var(--gold-claro); margin: 36px 0 14px; text-transform: uppercase; } .inst-prosa h2:first-child { margin-top: 0; } .inst-prosa h3 { font-size: 16px; font-weight: 700; color: var(--branco); margin: 22px 0 10px; } .inst-prosa p { color: var(--prata); font-size: 15px; line-height: 1.75; margin-bottom: 14px; } .inst-prosa ul, .inst-prosa ol { color: var(--prata); font-size: 15px; line-height: 1.75; margin: 0 0 14px 22px; } .inst-prosa li { margin-bottom: 6px; } .inst-prosa strong { color: var(--branco); font-weight: 600; } .inst-prosa a.link-inst { color: var(--gold-claro); text-decoration: underline; text-decoration-color: rgba(240, 207, 139, 0.4); text-underline-offset: 3px; } .inst-prosa a.link-inst:hover { text-decoration-color: var(--gold-claro); } .inst-prosa hr { border: none; border-top: 1px solid var(--linha); margin: 32px 0; } .inst-placeholder { background: rgba(241, 112, 106, 0.08); border: 1px dashed rgba(241, 112, 106, 0.4); color: #f0a49f; padding: 1px 6px; border-radius: 5px; font-size: 13.5px; font-family: 'Space Mono', monospace; } /* Sumário / índice, usado nas páginas legais */ .inst-sumario { background: var(--carvao-claro); border: 1px solid var(--linha); border-radius: var(--raio-pequeno); padding: 22px 26px; margin-bottom: 32px; } .inst-sumario p { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--aco); margin-bottom: 12px; } /* Bloco "em resumo, pra você que está agendando" — fica no TOPO das páginas de Termos e Privacidade. Existe porque essas duas páginas agora são abertas direto do fluxo de agendamento: quem clica ali é a cliente final marcando um horário, não a dona do salão contratando o sistema. Ela não vai ler 15 seções sobre planos, cobrança e propriedade intelectual pra descobrir as 4 coisas que valem pra ela. O documento completo continua logo abaixo, inteiro — este bloco não substitui nada. (mesmo bloco existe em /public/css/institucional.css, do BARBIO) */ .inst-resumo-cliente { background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: var(--raio-pequeno); padding: clamp(20px, 4vw, 26px); margin-bottom: 32px; } .inst-resumo-cliente > p:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-claro); font-weight: 700; margin: 0 0 14px; } .inst-resumo-cliente ul { margin: 0; padding-left: 20px; } .inst-resumo-cliente li { margin-bottom: 10px; } .inst-resumo-cliente li:last-child { margin-bottom: 0; } .inst-sumario ol { margin: 0; /* Sem marcador automático de propósito: o número de cada item já está escrito no próprio texto do link ("1. Aceitação dos termos"), porque ele precisa casar exatamente com o título da seção lá embaixo — inclusive em subseções como "4.1", que a numeração automática do
    não sabe gerar (ela contaria 5). Sem isto, cada linha aparecia com o número duplicado: "1. 1. Aceitação dos termos". */ list-style: none; padding-left: 0; columns: 2; column-gap: 24px; } .inst-sumario li { margin-bottom: 7px; font-size: 13.5px; } .inst-sumario a { color: var(--prata); text-decoration: none; } .inst-sumario a:hover { color: var(--gold-claro); } /* ---------- Cards (usados na página Sobre) ---------- */ .inst-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(12px, 3vw, 16px); margin: 28px 0 8px; } .inst-card { background: var(--preto-absoluto); border: 1px solid var(--linha); border-radius: var(--raio-pequeno); padding: clamp(18px, 4vw, 22px); transition: border-color 0.2s ease, transform 0.2s ease; } .inst-card:hover, .inst-card:active { border-color: var(--linha-forte); transform: translateY(-2px); } .inst-card i { font-size: 20px; color: var(--gold); margin-bottom: 12px; display: block; } .inst-card h3 { margin: 0 0 6px; font-size: 15px; } .inst-card p { font-size: 13.5px; margin: 0; line-height: 1.6; } /* Linha do tempo (Sobre) */ .inst-linha-tempo { margin: 24px 0; } .inst-etapa { display: flex; gap: clamp(12px, 3vw, 18px); padding-bottom: 26px; position: relative; } .inst-etapa:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 20px; bottom: 0; width: 1px; background: var(--linha-forte); } .inst-etapa-ponto { flex-shrink: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--foil); margin-top: 5px; box-shadow: 0 0 0 4px rgba(214, 62, 163, 0.12); } .inst-etapa h3 { margin-bottom: 4px; } .inst-etapa p { margin-bottom: 0; } /* ---------- Contato ---------- */ .inst-contato-grade { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; } @media (max-width: 760px) { .inst-contato-grade { grid-template-columns: 1fr; } } .inst-canal { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--linha); } .inst-canal:last-child { border-bottom: none; } .inst-canal i { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--carvao-claro); border: 1px solid var(--linha); border-radius: 10px; color: var(--gold); font-size: 15px; } .inst-canal h3 { font-size: 14px; margin-bottom: 3px; } .inst-canal p { font-size: 13.5px; margin-bottom: 0; } .inst-canal a.link-inst { font-size: 13.5px; } .campo-inst { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .campo-inst label { font-size: 13px; color: var(--prata); font-weight: 500; } .campo-inst input, .campo-inst textarea, .campo-inst select { padding: 13px 14px; background: var(--preto-absoluto); border: 1px solid var(--linha); border-radius: var(--raio-pequeno); color: var(--branco); font-family: var(--fonte-corpo); font-size: 14.5px; transition: all 0.2s ease; resize: vertical; } .campo-inst input:focus, .campo-inst textarea:focus, .campo-inst select:focus { outline: none; border-color: var(--gold); box-shadow: var(--sombra-gold); } .campo-inst-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .botao-inst-enviar { width: 100%; padding: 14px; border: none; border-radius: var(--raio-pequeno); background: var(--foil); color: var(--sobre-dourado); font-weight: 700; font-size: 15px; font-family: var(--fonte-corpo); cursor: pointer; box-shadow: var(--sombra-gold); transition: transform 0.2s ease, opacity 0.2s ease; margin-top: 4px; } .botao-inst-enviar:hover { transform: translateY(-2px); } .botao-inst-enviar:active { transform: scale(0.98); } .botao-inst-enviar:disabled { opacity: 0.6; cursor: default; transform: none; } .inst-msg-form { display: none; align-items: center; gap: 8px; padding: 11px 13px; border-radius: var(--raio-pequeno); font-size: 13px; margin-bottom: 16px; } .inst-msg-form.mostrar { display: flex; } .inst-msg-form.erro { background: rgba(241, 112, 106, 0.12); border: 1px solid rgba(241, 112, 106, 0.35); color: var(--erro); } .inst-msg-form.sucesso { background: rgba(123, 197, 150, 0.12); border: 1px solid rgba(123, 197, 150, 0.35); color: var(--sucesso); } /* ---------- Rodapé ---------- */ .inst-rodape { border-top: 1px solid var(--linha); padding: 48px 0 calc(28px + env(safe-area-inset-bottom)); position: relative; z-index: 1; } .inst-rodape::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-bronze) 15%, var(--gold-claro) 50%, var(--gold-bronze) 85%, transparent); } .inst-rodape-topo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; padding-bottom: 32px; } .inst-rodape-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 320px; } .inst-rodape-marca img { height: 22px; width: auto; } /* Tema claro usa a versão escura da logo — troca de src via JS em tema.js, não mais com content:url() (quebrava o cálculo de proporção da imagem). */ .inst-rodape-marca p { font-size: 13.5px; line-height: 1.65; color: var(--aco); margin: 0; } .inst-rodape-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .inst-rodape-titulo { display: block; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--aco-escuro); margin-bottom: 12px; } .inst-rodape-coluna .inst-rodape-links { display: flex; flex-direction: column; gap: 2px; } .inst-rodape-links a { font-size: 13.5px; color: var(--aco); text-decoration: none; padding: 5px 0; width: fit-content; transition: color 0.15s ease; } .inst-rodape-links a i { color: var(--gold); margin-right: 4px; } .inst-rodape-links a:hover { color: var(--gold-claro); } .inst-rodape-base { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid var(--linha); } .inst-copyright { font-size: 12px; color: var(--aco-escuro); margin: 0; } .inst-rodape-topo-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--aco); text-decoration: none; transition: color 0.15s ease; } .inst-rodape-topo-link:hover { color: var(--gold-claro); } @media (max-width: 640px) { .inst-rodape-topo { grid-template-columns: 1fr; gap: 28px; } .inst-rodape-marca { max-width: none; align-items: center; text-align: center; } .inst-rodape-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; } .inst-rodape-coluna .inst-rodape-links { align-items: center; } .inst-rodape-links a { width: auto; } .inst-rodape-base { justify-content: center; text-align: center; } } /* ---------- Responsivo ---------- */ @media (max-width: 680px) { .inst-nav { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--carvao); border-bottom: 1px solid var(--linha); padding: 10px clamp(20px, 6vw, 28px) 18px; box-shadow: var(--sombra-premium); max-width: none; overflow-x: visible; } .inst-nav.aberto { display: flex; } .inst-nav a { padding: 13px 12px; font-size: 15px; border-radius: 10px; } .inst-nav-entrar { margin-left: 0; margin-top: 6px; justify-content: center; } .botao-menu-mobile { display: inline-flex; } } @media (max-width: 760px) { .inst-prosa { padding: 30px 22px; } .inst-sumario ol { columns: 1; } } @media (max-width: 560px) { .inst-grade { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .inst-card, .botao-inst-enviar, .botao-tema { transition: none; } }