/* Branding - auto-gerado pelo CMS */ /* Fontes: carregadas por no (Branding::googleFontsUrl()) */ :root { --brand-primary: #DBD5CF; --brand-secondary: #142032; --brand-accent: #F9F5F2; --brand-bg: #142032; --font-body: 'Inter', sans-serif; --font-heading: 'Sora', sans-serif; --font-h2: 'Sora', sans-serif; --font-h3: 'Sora', sans-serif; --font-menu: 'Inter', sans-serif; --font-accent: 'Inter', cursive; } /* ── Tipografia ── */ body { font-family: 'Inter', sans-serif; background: #142032; } h1 { font-family: 'Sora', sans-serif; font-weight: 700; color: #DBD5CF; } h2 { font-family: 'Sora', sans-serif; font-weight: 700; } h3 { font-family: 'Sora', sans-serif; font-weight: 600; } nav, header { font-family: 'Inter', sans-serif; font-weight: 500; } a { color: #DBD5CF; } a:hover { color: #F9F5F2; } /* ── Botão global ── */ .btn-brand { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#F9F5F2 0%,#DBD5CF 55%,#8D847C 130%); color: #142032; border-radius: 999px; padding: 14px 30px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: 0.01em; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 12px 30px rgba(20,32,50,.28), inset 0 1px 0 rgba(255,255,255,.45); cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; } .btn-brand:hover { background: linear-gradient(135deg,#F9F5F2 0%,#DBD5CF 55%,#8D847C 130%); box-shadow: 0 18px 44px rgba(20,32,50,.40), inset 0 1px 0 rgba(255,255,255,.50); transform: translateY(-2px); } /* ── Botão principal premium ── */ .btn-princal{ --btn-orange:#DBD5CF; --btn-gold:#142032; --btn-gold2:#DBD5CF; --btn-teal:#142032; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 34px; border-radius:999px; border:1px solid rgba(255,255,255,.38); outline:none; cursor:pointer; text-decoration:none !important; font-size:15px; font-weight:500; letter-spacing:.2px; color:#ffffff !important; background: radial-gradient(120% 200% at 20% 10%,rgba(255,255,255,.32),rgba(255,255,255,0) 42%), linear-gradient(105deg,var(--btn-orange) 0%,var(--btn-gold) 62%,var(--btn-gold2) 120%); box-shadow: 0 14px 34px rgba(20,32,50,.18), 0 10px 26px rgba(20,32,50,.30), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(20,32,50,.14); transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; overflow:hidden; transform:translateZ(0); will-change:transform; } .btn-princal::before{ content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none; background: linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 44%), linear-gradient(90deg,rgba(20,32,50,.30),rgba(219,213,207,.22)); -webkit-mask:linear-gradient(#142032 0 0) content-box,linear-gradient(#142032 0 0); -webkit-mask-composite:xor; mask-composite:exclude; padding:1px; opacity:.95; } .btn-princal::after{ content:""; position:absolute; inset:-60% -40%; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 62%); transform:translateX(-55%) rotate(10deg); opacity:0; transition:opacity .25s ease,transform .55s ease; mix-blend-mode:soft-light; } .btn-princal:hover{ transform:translateY(-2px) scale(1.015); filter:brightness(1.03) saturate(1.02); box-shadow: 0 18px 52px rgba(20,32,50,.22), 0 0 0 6px rgba(20,32,50,.13), 0 16px 34px rgba(20,32,50,.33), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -12px 20px rgba(20,32,50,.16); } .btn-princal:hover::after{ opacity:.9; transform:translateX(20%) rotate(10deg); } .btn-princal:active{ transform:translateY(-1px) scale(.99); filter:brightness(1.01); box-shadow:0 10px 28px rgba(20,32,50,.18),inset 0 6px 18px rgba(20,32,50,.22); } .btn-princal:focus-visible{ box-shadow: 0 18px 52px rgba(20,32,50,.22), 0 0 0 3px rgba(20,32,50,.28), 0 0 0 7px rgba(20,32,50,.18), inset 0 1px 0 rgba(255,255,255,.55); } .btn-princal svg,.btn-princal i{ font-size:16px; transition:transform .22s ease,opacity .22s ease; opacity:.98; } .btn-princal:hover i,.btn-princal:hover svg{ transform:translateX(3px); opacity:1; } .btn-princal.outline{ color:rgba(20,32,50,.98) !important; background: radial-gradient(140% 220% at 20% 10%,rgba(20,32,50,.12),rgba(20,32,50,0) 45%), rgba(255,255,255,.80); border:1px solid rgba(20,32,50,.22); box-shadow:0 10px 26px rgba(20,32,50,.10),inset 0 1px 0 rgba(255,255,255,.65); } .btn-princal.outline::before{ opacity:.65; } .btn-princal.outline:hover{ color:#ffffff !important; background: radial-gradient(120% 220% at 20% 10%,rgba(255,255,255,.22),rgba(255,255,255,0) 45%), linear-gradient(110deg,var(--btn-teal) 0%,#142032 60%,rgba(20,32,50,.96) 120%); border-color:rgba(255,255,255,.30); box-shadow: 0 18px 52px rgba(20,32,50,.22), 0 0 0 6px rgba(20,32,50,.12), inset 0 1px 0 rgba(255,255,255,.28); } .btn-princal.btn-princal-wa{ background: radial-gradient(120% 200% at 20% 10%,rgba(255,255,255,.24),rgba(255,255,255,0) 42%), linear-gradient(105deg,#142032 0%,#142032 62%,#142032 120%); box-shadow: 0 14px 34px rgba(20,32,50,.18), 0 10px 26px rgba(20,32,50,.28), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -10px 18px rgba(20,32,50,.14); } .btn-princal.btn-princal-wa:hover{ box-shadow: 0 18px 52px rgba(20,32,50,.22), 0 0 0 6px rgba(20,32,50,.12), 0 16px 34px rgba(20,32,50,.30), inset 0 1px 0 rgba(255,255,255,.50), inset 0 -12px 20px rgba(20,32,50,.16); } @media(max-width:768px){ .btn-princal{ width:100%; padding:13px 22px; font-size:14px; } }