/* ══════════════════════════════════════════════════════════ NexiaLabs — Site Institucional — Tema Claro Compartilhado entre index.html, nexialaw.html, nexiahealth.html, portfolio.html ══════════════════════════════════════════════════════════ */ /* ══ FONTES SELF-HOSTED (variáveis — 1 arquivo por família) ══ */ @font-face{ font-family:'Space Grotesk'; src:url('../fonts/space-grotesk-var.woff2') format('woff2'); font-weight:300 800; font-style:normal; font-display:swap; } @font-face{ font-family:'Inter'; src:url('../fonts/inter-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink-soft);overflow-x:hidden;-webkit-font-smoothing:antialiased} :root{ --bg: #ffffff; --bg-soft: #fafafb; --ink: #0e0e12; --ink-soft: #3a3a44; --ink-3: #686874; /* cinza de apoio com contraste AA (antes #8b8b96, ilegível no celular) */ --card: rgba(255,255,255,.7); --card-solid: #ffffff; --card-border:rgba(0,0,0,.06); --card-border-h:rgba(0,0,0,.12); --radius: 14px; --radius-lg:20px; --labs-1:#4f7cff; --labs-2:#7c3aed; --labs-rgb:79,124,255; --law-1:#e8c97e; --law-2:#c9a96e; --law-rgb:201,169,110; --health-1:#5eead4;--health-2:#2dd4bf;--health-rgb:45,212,191; --hotel-rgb:124,58,237; /* accent padrão = labs; cada página sobrescreve via classe no */ --accent-1: var(--labs-1); --accent-2: var(--labs-2); --accent-rgb: var(--labs-rgb); } body.theme-labs {--accent-1:var(--labs-1); --accent-2:var(--labs-2); --accent-rgb:var(--labs-rgb);} body.theme-law {--accent-1:var(--law-1); --accent-2:var(--law-2); --accent-rgb:var(--law-rgb);} body.theme-health{--accent-1:var(--health-1);--accent-2:var(--health-2);--accent-rgb:var(--health-rgb);} /* ══ TYPOGRAPHY ══ */ .f-display{font-family:'Space Grotesk',sans-serif} .f-body {font-family:'Inter',sans-serif} .g-accent{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .g-labs {background:linear-gradient(135deg,var(--labs-1),var(--labs-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .g-law {background:linear-gradient(135deg,var(--law-1),var(--law-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .g-health{background:linear-gradient(135deg,var(--health-1),var(--health-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;color:var(--ink);line-height:1.1;letter-spacing:-.02em} p{line-height:1.75;color:var(--ink-soft)} /* ══ LAYOUT ══ */ .container{max-width:1200px;margin:0 auto;padding:0 32px} .section {padding:100px 0;border-top:1px solid var(--card-border)} /* Rótulo de seção: texto escuro legível + linha de gradiente da marca. Nunca voltar ao padrão de span minúsculo (11px) em cor clara: ilegível e sem contraste. */ .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:18px} .eyebrow::before{content:'';width:28px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));flex-shrink:0} /* ══ NAVBAR — barra escura flutuante (logos com "NEXIA" branco ficam legíveis) ══ */ #nav{position:fixed;top:14px;left:14px;right:14px;z-index:200; /* redefine os tokens dentro do header: todo estilo inline var(--ink...) vira claro */ --ink:#ffffff;--ink-soft:rgba(255,255,255,.78);--ink-3:rgba(255,255,255,.55); --bg-soft:rgba(255,255,255,.08);--card-border:rgba(255,255,255,.1);--card-border-h:rgba(255,255,255,.2); background:rgba(12,12,18,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.09);border-radius:16px; box-shadow:0 12px 40px rgba(10,10,16,.16);transition:background .3s,box-shadow .3s} #nav.scrolled{background:rgba(12,12,18,.93);box-shadow:0 16px 48px rgba(10,10,16,.3)} .nav-inner{max-width:1200px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;height:62px} .nav-link{font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink-soft);text-decoration:none;transition:color .2s} .nav-link:hover,.nav-link.active{color:var(--ink)} .nav-link.active{position:relative} .nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2))} /* Menu mobile */ #nav-mobile{display:none;position:fixed;inset:92px 0 0 0;z-index:190;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s} #nav-mobile.open{display:block;transform:translateY(0);opacity:1;pointer-events:auto} #nav-mobile .container{padding-top:32px;display:flex;flex-direction:column;gap:4px} #nav-mobile a{padding:16px 4px;font-size:17px;font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--card-border)} #nav-burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--card-border);background:var(--bg-soft);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} #nav-burger svg{pointer-events:none} /* ══ BUTTONS ══ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;border-radius:10px;text-decoration:none;cursor:pointer;border:none;transition:all .25s;white-space:nowrap;min-height:44px} .btn-primary{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;padding:13px 26px} .btn-primary:hover{box-shadow:0 8px 28px rgba(var(--accent-rgb),.35);transform:translateY(-1px)} .btn-outline{background:transparent;color:var(--ink-soft);padding:12px 22px;border:1px solid var(--card-border-h)} .btn-outline:hover{border-color:var(--accent-2);color:var(--accent-2)} .btn-whatsapp{background:#25d366;color:#fff} .btn-whatsapp:hover{box-shadow:0 8px 24px rgba(37,211,102,.35);transform:translateY(-1px)} /* ══ CARDS / GLASS ══ */ .card{border:1px solid var(--card-border);background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius);transition:border-color .3s,box-shadow .3s,transform .3s} .card:hover{border-color:var(--card-border-h);box-shadow:0 16px 44px rgba(14,14,18,.06)} /* ══ TAG ══ */ .tag{display:inline-block;font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:14px;font-weight:600} .tag-labs {color:#3b5fe0;background:rgba(79,124,255,.1); border:1px solid rgba(79,124,255,.2)} .tag-law {color:#8a6f36;background:rgba(201,169,110,.14);border:1px solid rgba(201,169,110,.28)} .tag-health{color:#0f8f7e;background:rgba(45,212,191,.12); border:1px solid rgba(45,212,191,.26)} .tag-hotel {color:#6b3fc9;background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.2)} /* ══ PORTFOLIO CARDS ══ */ .p-card{border:1px solid var(--card-border);background:var(--card-solid);border-radius:var(--radius);overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s;display:flex;flex-direction:column;text-decoration:none;position:relative} .p-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(14,14,18,.1)} .p-card--labs:hover{border-color:rgba(79,124,255,.35)} .p-card--law:hover{border-color:rgba(201,169,110,.4)} .p-card--health:hover{border-color:rgba(45,212,191,.35)} .p-card--hotel:hover{border-color:rgba(124,58,237,.35)} .p-card-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-soft)} .p-card-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s} .p-card:hover .p-card-thumb img{transform:scale(1.04)} .p-card-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:2.6rem;color:#fff} .p-card--labs .p-card-thumb-fallback{background:linear-gradient(135deg,var(--labs-1),var(--labs-2))} .p-card--law .p-card-thumb-fallback{background:linear-gradient(135deg,var(--law-1),var(--law-2))} .p-card--health .p-card-thumb-fallback{background:linear-gradient(135deg,var(--health-1),var(--health-2))} .p-card--hotel .p-card-thumb-fallback{background:linear-gradient(135deg,#a78bfa,#7c3aed)} .p-card-body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1} .p-card-body h3{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:2px} .p-card-sub{font-size:11.5px;color:var(--ink-3);margin-bottom:10px;letter-spacing:.02em} .p-card-desc{font-size:13.5px;line-height:1.68;color:var(--ink-soft);flex:1;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .p-card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px} .p-card-tag{font-size:10px;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:var(--bg-soft);color:var(--ink-3);border:1px solid var(--card-border);white-space:nowrap} .p-card-footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--card-border);display:flex;align-items:center;justify-content:space-between} .pf-link{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:gap .2s,color .2s} .p-card--labs .pf-link{color:#3b5fe0} .p-card--law .pf-link{color:#8a6f36} .p-card--health .pf-link{color:#0f8f7e} .p-card--hotel .pf-link{color:#6b3fc9} .p-card:hover .pf-link{gap:7px} /* ══ PORTFOLIO TABS ══ */ .pf-tab{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:9px 20px;border-radius:20px;border:1px solid var(--card-border-h);background:transparent;color:var(--ink-soft);cursor:pointer;transition:all .2s;min-height:44px} .pf-tab.active{background:var(--ink);border-color:var(--ink);color:#fff} .pf-panel{display:none} .pf-panel.active{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px} /* ══ FORM ══ */ .f-input{width:100%;background:var(--bg-soft);border:1px solid var(--card-border-h);color:var(--ink);font-family:'Inter',sans-serif;font-size:14px;padding:13px 16px;border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s} .f-input:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)} .f-input::placeholder{color:var(--ink-3)} label.f-label{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:7px;font-family:'Inter',sans-serif;font-weight:600} /* ══ REVEAL / ANIMATIONS ══ */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:translateY(0)} .rd1{transition-delay:.05s}.rd2{transition-delay:.12s}.rd3{transition-delay:.19s}.rd4{transition-delay:.26s} @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .fu{animation:fadeUp .85s cubic-bezier(.16,1,.3,1) forwards;opacity:0} .fu1{animation-delay:.06s}.fu2{animation-delay:.18s}.fu3{animation-delay:.30s}.fu4{animation-delay:.42s}.fu5{animation-delay:.54s} @keyframes halo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}} @keyframes shimmer{0%{left:-120%}60%,100%{left:160%}} @keyframes fab-pulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.35),0 0 0 0 rgba(37,211,102,.3)}70%{box-shadow:0 4px 20px rgba(37,211,102,.35),0 0 0 14px rgba(37,211,102,0)}} .logo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;margin:0 0 32px} .logo-wrap::before{content:'';position:absolute;inset:-50px -70px;background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(var(--accent-rgb),.16) 0%,rgba(var(--accent-rgb),.06) 45%,transparent 70%);filter:blur(28px);animation:halo 4.5s ease-in-out infinite;border-radius:50%;pointer-events:none} .logo-shimmer{position:absolute;top:0;bottom:0;width:60px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:shimmer 6s ease-in-out infinite;animation-delay:2s;pointer-events:none;z-index:3} .hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(var(--accent-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 40%,black 0%,transparent 75%);mask-image:radial-gradient(ellipse 75% 80% at 50% 40%,black 0%,transparent 75%)} /* ══ FOOTER ══ */ footer.site-footer{border-top:1px solid var(--card-border);padding:56px 0 32px;background:var(--bg-soft)} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px} .footer-col p.f-heading{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:18px} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .footer-col a{font-size:13.5px;color:var(--ink-soft);text-decoration:none;transition:color .2s} .footer-col a:hover{color:var(--ink)} .footer-bottom{border-top:1px solid var(--card-border);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px} .footer-bottom p{font-size:12px;color:var(--ink-3)} /* ══ WHATSAPP FAB ══ */ #fab-whatsapp{position:fixed;bottom:24px;right:24px;z-index:500;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;text-decoration:none;animation:fab-pulse 2.5s ease-in-out infinite;transition:transform .2s,background .2s} #fab-whatsapp:hover{transform:scale(1.08);background:#20be5c} /* ══ LOCK / ADMIN LINK ══ */ .lock-link{width:36px;height:36px;border-radius:50%;border:1px solid var(--card-border-h);background:var(--bg-soft);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .2s;flex-shrink:0} .lock-link:hover{border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.08)} /* ══ HERO EDITORIAL (home) ══ */ .hero-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:20px;border:1px solid var(--card-border-h);background:var(--card);backdrop-filter:blur(8px);font-size:12.5px;font-weight:500;color:var(--ink-soft)} .hero-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--pill-dot,#3ABF6A);flex-shrink:0;animation:pill-pulse 2s ease-in-out infinite} @keyframes pill-pulse{0%,100%{box-shadow:0 0 0 0 var(--pill-glow,rgba(58,191,106,.45))}60%{box-shadow:0 0 0 7px transparent}} .hero-proof{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--ink-3)} .hero-proof span strong{color:var(--ink);font-weight:600} /* Parede de trabalhos reais — galeria 3D com 2 colunas rolando em sentidos opostos. Pausa no hover; cada card destaca e é clicável (tabindex=-1: fora do fluxo de teclado, o caminho acessível é o link "Ver projetos" do hero). */ .hero-wall{position:relative;height:620px;display:flex;gap:18px; transform:perspective(1400px) rotateX(12deg) rotateZ(-7deg) scale(1.14); -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)} .wall-col{display:flex;flex-direction:column;gap:18px;flex:1;animation:wall-up 26s linear infinite;will-change:transform} .wall-col--down{animation-name:wall-down;animation-duration:30s} .hero-wall:hover .wall-col{animation-play-state:paused} @keyframes wall-up{to{transform:translateY(-50%)}} @keyframes wall-down{from{transform:translateY(-50%)}to{transform:translateY(0)}} .wall-item{display:block;border-radius:12px;border:1px solid var(--card-border);box-shadow:0 14px 36px rgba(14,14,18,.12);overflow:hidden;background:var(--card-solid);flex-shrink:0;transition:transform .3s,border-color .3s,box-shadow .3s} .wall-item:hover{transform:scale(1.05) translateZ(0);border-color:rgba(var(--accent-rgb),.55);box-shadow:0 20px 48px rgba(var(--accent-rgb),.28);z-index:2} .wall-item img{display:block;width:100%;height:auto} /* Faixa horizontal de trabalhos (hero do portfólio) */ .shot-strip{overflow:hidden;margin-top:44px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .shot-strip-track{display:flex;gap:16px;width:max-content;animation:marquee 38s linear infinite} .shot-strip:hover .shot-strip-track{animation-play-state:paused} .shot-strip-track a{display:block;width:240px;border-radius:10px;border:1px solid var(--card-border);overflow:hidden;box-shadow:0 10px 26px rgba(14,14,18,.1);flex-shrink:0;transition:transform .3s,border-color .3s} .shot-strip-track a:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.5)} .shot-strip-track img{display:block;width:100%;height:auto} @media (prefers-reduced-motion: reduce){ .wall-col,.wall-col--down,.shot-strip-track{animation:none} .hero-pill-dot{animation:none} } /* Mobile: a parede vira faixa horizontal rolante (mesmo markup, só a 1ª coluna) */ @media (max-width: 960px){ .hero-editorial{grid-template-columns:1fr!important;text-align:center;gap:36px!important} .hero-editorial .hero-proof,.hero-editorial .hero-ctas{justify-content:center} .hero-wall{transform:none;height:auto;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .wall-col{flex-direction:row;width:max-content;flex:none;gap:14px;animation:wall-left 30s linear infinite} .wall-col--down{display:none} .wall-item{width:216px} .wall-item:hover{transform:none} } @keyframes wall-left{to{transform:translateX(-50%)}} /* Toque: CTAs em largura total pro polegar */ @media (max-width: 480px){ .hero-ctas{flex-direction:column;align-items:stretch} .hero-ctas .btn{width:100%} .hero-pill{font-size:11.5px;padding:7px 13px} } /* Seção de marcas: tiles uniformes (180×72) com o fundo da própria marca. A ordem visual vem da geometria idêntica; a cor varia por cliente de propósito. */ .brands{padding:44px 0 48px;border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);background:var(--bg-soft)} .marquee-wrap{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .marquee-track{display:flex;align-items:center;gap:20px;width:max-content;animation:marquee 48s linear infinite} .marquee-wrap:hover .marquee-track{animation-play-state:paused} .marquee-logos img{width:180px;height:72px;border-radius:14px;border:1px solid rgba(14,14,18,.1);box-shadow:0 4px 14px rgba(14,14,18,.06);flex-shrink:0;transition:transform .3s,box-shadow .3s} .marquee-logos img:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(14,14,18,.14)} @keyframes marquee{to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}} @media (max-width:768px){.marquee-logos img{width:150px;height:60px}} /* ══ COUNTER STATS STRIP ══ */ .stats-strip{border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);background:var(--card);backdrop-filter:blur(8px)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)} .stat-item{padding:36px 0;text-align:center;border-right:1px solid var(--card-border)} .stat-item:last-child{border-right:none} .stat-num{font-weight:800;font-size:2.4rem;line-height:1;display:block} .stat-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-top:6px} /* ══ EM BREVE BADGE ══ */ .badge-soon{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:var(--ink);color:#fff} /* ══ FORMULÁRIO — ESTADOS DE ENVIO ══ */ .form-sucesso{text-align:center;padding:28px 8px;display:flex;flex-direction:column;align-items:center;gap:8px} .form-sucesso-check{width:52px;height:52px;border-radius:50%;background:rgba(58,191,106,.12);border:1px solid rgba(58,191,106,.3);color:#2a9d54;font-size:24px;display:flex;align-items:center;justify-content:center;margin-bottom:6px} .form-sucesso h3{font-size:19px;font-weight:700;color:var(--ink)} .form-sucesso p{font-size:14px;line-height:1.7} .form-erro{font-size:13px;line-height:1.6;color:#a83232;background:rgba(208,80,80,.08);border:1px solid rgba(208,80,80,.22);border-radius:10px;padding:12px 16px} .form-erro a{color:#a83232;font-weight:600} /* ══ FLAG DE SISTEMA/ACESSO RESTRITO (canto do thumb do card) ══ */ .p-card-flag{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:rgba(14,14,18,.78);color:#fff;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} /* View Transitions entre páginas foi testada e removida: no Chromium testado (headless E com interface), a página de destino chegava com rendering congelado (zero frames de rAF) após a navegação com @view-transition{navigation:auto}. Reavaliar em versões futuras. */ /* ══ RENDER PERF — cards fora da tela não são renderizados ══ */ .p-card{content-visibility:auto;contain-intrinsic-size:auto 420px} /* ══ ACESSIBILIDADE — respeita quem desativa animação no sistema ══ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} .fu{opacity:1} } /* ══ MOBILE ══ */ @media(max-width:768px){ .container{padding:0 20px} .hide-mobile{display:none!important} #nav{top:10px;left:10px;right:10px} .nav-inner{height:54px;padding:0 12px} .nav-inner>a img{height:30px!important} #nav-mobile{inset:76px 0 0 0} /* Grades bento (12 colunas com span) empilham no celular */ .grid-12{grid-template-columns:1fr!important} .grid-12>*{grid-column:auto!important} /* Legibilidade: textos de apoio maiores no celular */ .hero-proof{font-size:14px} .stat-label{font-size:12.5px;letter-spacing:.06em} .p-card-sub{font-size:13px} .p-card-desc{font-size:14.5px} .p-card-tag{font-size:11px} .eyebrow{font-size:12px} .marquee-track span{font-size:14.5px} .footer-bottom p{font-size:13px} .footer-col a,.footer-col span{font-size:14.5px!important} .two-col{grid-template-columns:1fr!important} .three-col{grid-template-columns:1fr!important} .footer-grid{grid-template-columns:1fr 1fr!important} .stats-grid{grid-template-columns:1fr 1fr!important} .stat-item{border-right:none;border-bottom:1px solid var(--card-border)} .nav-links-desktop{display:none!important} #nav-burger{display:flex!important} h1{font-size:clamp(32px,8vw,52px)!important} .section{padding:64px 0} } @media(min-width:769px){.show-mobile{display:none!important}} @media(max-width:480px){.footer-grid{grid-template-columns:1fr!important}}