/* ══ RESERVAS COM METRICAS CASADAS · correcoes/perf-fonte-cls.php ═════════ Nao sao fontes novas: sao Arial esticada ate ocupar a MESMA largura que Sora e Inter. Servem so no intervalo entre o primeiro paint e a chegada da fonte do Google. Sem elas o H1 do hero pula de 125px para 187px e empurra a pagina inteira (CLS 0,665 medida pelo PageSpeed no desktop). ⚠ `ascent-override` e relativo ao em-box JA esticado pelo `size-adjust`, por isso e ascent/size-adjust e nao o ascent cru. ⚠ Fatores medidos com canvas.measureText, nao estimados. Trocar a fonte da marca obriga a medir de novo. */ @font-face{font-family:'Sora fb';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:107.7%;ascent-override:90%;descent-override:26.9%;line-gap-override:0%;font-display:swap} @font-face{font-family:'Inter fb';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:105.5%;ascent-override:91.9%;descent-override:22.7%;line-gap-override:0%;font-display:swap} /* Branding - auto-gerado pelo CMS */ /* Fontes: carregadas por no (Branding::googleFontsUrl()) */ :root { --brand-primary: #B4915E; --brand-secondary: #101C35; --brand-accent: #7B5E32; --brand-bg: #F6F3EE; --font-body: 'Inter','Inter fb', sans-serif; --font-heading: 'Sora','Sora fb', sans-serif; --font-h2: 'Sora','Sora fb', sans-serif; --font-h3: 'Sora','Sora fb', sans-serif; --font-menu: 'Inter','Inter fb', sans-serif; --font-accent: 'Inter','Inter fb', cursive; } /* ── Tipografia ── */ body { font-family: 'Inter','Inter fb', sans-serif; background: #F6F3EE; } h1 { font-family: 'Sora','Sora fb', sans-serif; font-weight: 400; color: #7B5E32; } h2 { font-family: 'Sora','Sora fb', sans-serif; font-weight: 400; } h3 { font-family: 'Sora','Sora fb', sans-serif; font-weight: 500; } nav, header { font-family: 'Inter','Inter fb', sans-serif; font-weight: 500; } a { color: #7B5E32; } a:hover { color: #101C35; } /* ── Botão global ── */ .btn-brand { display: inline-flex; align-items: center; justify-content: center; background: #B4915E; color: #101C35; border-radius: 3px; padding: 14px 30px; font-family: 'Inter','Inter fb', sans-serif; font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: 0.01em; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(16,28,53,.06),0 2px 8px -4px rgba(16,28,53,.10); cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; } .btn-brand:hover { background: #C8A874; box-shadow: 0 4px 12px -6px rgba(16,28,53,.14),0 12px 32px -20px rgba(16,28,53,.22); transform: translateY(-2px); } /* ── Botão principal premium ── */ .btn-princal{ --btn-orange:#B4915E; --btn-gold:#101c35; --btn-gold2:#E1D9CC; --btn-teal:#101c35; 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(16,28,53,.18), 0 10px 26px rgba(16,28,53,.30), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(16,28,53,.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(16,28,53,.30),rgba(225,217,204,.22)); -webkit-mask:linear-gradient(#101c35 0 0) content-box,linear-gradient(#101c35 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(16,28,53,.22), 0 0 0 6px rgba(16,28,53,.13), 0 16px 34px rgba(16,28,53,.33), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -12px 20px rgba(16,28,53,.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(16,28,53,.18),inset 0 6px 18px rgba(16,28,53,.22); } .btn-princal:focus-visible{ box-shadow: 0 18px 52px rgba(16,28,53,.22), 0 0 0 3px rgba(16,28,53,.28), 0 0 0 7px rgba(16,28,53,.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(16,28,53,.98) !important; background: radial-gradient(140% 220% at 20% 10%,rgba(16,28,53,.12),rgba(16,28,53,0) 45%), rgba(255,255,255,.80); border:1px solid rgba(16,28,53,.22); box-shadow:0 10px 26px rgba(16,28,53,.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%,#101c35 60%,rgba(16,28,53,.96) 120%); border-color:rgba(255,255,255,.30); box-shadow: 0 18px 52px rgba(16,28,53,.22), 0 0 0 6px rgba(16,28,53,.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,#101c35 0%,#101c35 62%,#101c35 120%); box-shadow: 0 14px 34px rgba(16,28,53,.18), 0 10px 26px rgba(16,28,53,.28), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -10px 18px rgba(16,28,53,.14); } .btn-princal.btn-princal-wa:hover{ box-shadow: 0 18px 52px rgba(16,28,53,.22), 0 0 0 6px rgba(16,28,53,.12), 0 16px 34px rgba(16,28,53,.30), inset 0 1px 0 rgba(255,255,255,.50), inset 0 -12px 20px rgba(16,28,53,.16); } @media(max-width:768px){ .btn-princal{ width:100%; padding:13px 22px; font-size:14px; } }