/* V022 - RODAPE +20% - ICONE TITULO +20% - ZOOM -10% (1.30 ao inves de 1.40) - CARTOES -15% - CORES NORMAIS - ICONES 2X */
* { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; overflow:hidden; }
body.no-scroll-auto { height:100%; height:100dvh; width:100vw; overflow:hidden; position:fixed; inset:0; font-family:'Inter', sans-serif; background:#040D1E; display:flex; flex-direction:column; perspective:1400px; }
::-webkit-scrollbar { display:none; width:0; height:0; }
* { scrollbar-width:none; -ms-overflow-style:none; }

.bg-escuro-3d { position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(130% 130% at 50% 0%, #0A1E3A 0%, #040D1E 50%, #020814 100%); transition: filter .6s cubic-bezier(.2,.8,.2,1); }
.bg-escuro-3d.led-active { filter: brightness(1.28) saturate(1.35); }
.bg-layer { position:absolute; border-radius:50%; filter: blur(80px) brightness(1.35) saturate(1.45); mix-blend-mode: screen; }
.bg-layer.l1 { width:120vw; height:120vw; max-width:1400px; max-height:1400px; background: radial-gradient(circle, rgba(0,212,255,0.13) 0%, transparent 70%); top:-20%; left:-20%; }
.bg-layer.l2 { width:80vw; height:80vw; max-width:1100px; max-height:1100px; background: radial-gradient(circle, rgba(124,77,255,0.11) 0%, transparent 70%); top:5%; right:-15%; }
.bg-layer.l3 { width:70vw; height:70vw; max-width:900px; max-height:900px; background: radial-gradient(circle, rgba(0,255,136,0.07) 0%, transparent 70%); bottom:-10%; left:10%; }
.bg-depth { position:absolute; inset:0; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.38) 100%), radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.58) 100%); }

.header-auto { flex:0 0 auto; height:clamp(60px, 6.8vh, 76px); background: rgba(8,20,42,0.90); backdrop-filter: blur(80px) saturate(1.8) brightness(1.22); border-bottom:1px solid rgba(255,255,255,0.08); position:relative; z-index:10; }
.rainbow-line { height:3px; width:100%; background: linear-gradient(90deg, #FF5A2E 0%, #FFB100 20%, #7ED957 40%, #00B7EB 60%, #6A5AF9 80%, #FF3D9A 100%); position:absolute; top:0; left:0; }
.header-inner { display:flex; justify-content:space-between; align-items:center; height:100%; padding:0 clamp(14px, 2vw, 24px); gap:1vw; }
.h-left { display:flex; align-items:center; gap:0; flex-shrink:0; }
.logo { width:clamp(36px, 4vh, 44px); height:clamp(36px, 4vh, 44px); border:1px solid rgba(0,212,255,0.24); border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:clamp(16px, 2vh, 19px); background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 100%); backdrop-filter: blur(80px); box-shadow: 0 0 18px rgba(0,212,255,0.14), inset 0 1px 0 rgba(255,255,255,0.14); }
.glass-div { width:1px; height:clamp(24px, 4vh, 32px); background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%); margin:0 clamp(10px, 1.1vw, 14px); flex-shrink:0; }
.title-block { display:flex; flex-direction:column; line-height:1.08; }
.title { color:#fff; font-weight:900; font-size:clamp(13px, 1.6vh, 16px); letter-spacing:0.02em; text-transform:uppercase; }
.subtitle { color:#7ED8FF; font-weight:700; font-size:clamp(9px, 1.15vh, 11px); letter-spacing:0.06em; text-transform:uppercase; margin-top:4px; opacity:0.95; }

.h-center { display:flex; gap:6px; flex-shrink:1; }
.gbtn { background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:6px 14px; color:#C8D8EA; font-size:clamp(9.5px, 1.1vh, 11.5px); font-weight:800; cursor:default; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.gbtn.frozen { background: rgba(0,212,255,0.14); border-color: rgba(0,212,255,0.28); color:#8AEFFF; }
.h-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.dt { display:flex; align-items:center; gap:8px; background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:6px 14px; }
.dt div { display:flex; flex-direction:column; line-height:1.1; }
.t { font-family:'JetBrains Mono', monospace; font-weight:700; font-size:clamp(10.5px, 1.2vh, 12.5px); color:#fff; }
.da { font-size:clamp(7px, 0.9vh, 8px); color:#8CC8FF; letter-spacing:0.06em; font-weight:600; }
.d { width:5px; height:5px; border-radius:50%; display:inline-block; flex-shrink:0; }
.d.c { background:#00D4FF; box-shadow:0 0 7px #00D4FF; } .d.g { background:#00FF88; box-shadow:0 0 7px #00FF88; }
.d.led { animation: ledPulse 2s ease-in-out infinite; }
@keyframes ledPulse { 0%,100% { opacity:1; transform: scale(1); } 50% { opacity:0.6; transform: scale(1.15); } }

.hero-auto { flex:0 0 auto; height:clamp(52px, 7.2vh, 70px); display:flex; flex-direction:column; align-items:center; justify-content:center; background: rgba(255,255,255,0.018); backdrop-filter: blur(80px); border-bottom:1px solid rgba(255,255,255,0.06); z-index:5; position:relative; gap:3px; }
.hero-line-glass { position:absolute; top:0; left:50%; transform:translateX(-50%); width:clamp(140px, 24vw, 320px); height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 20%, rgba(0,212,255,0.36) 50%, rgba(255,255,255,0.18) 80%, transparent); }
.hero-auto h1 { font-size:clamp(22px, 3.6vh, 36px); font-weight:900; letter-spacing:-0.02em; background: linear-gradient(90deg, #fff 0%, #8AEFFF 35%, #B07CFF 75%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height:1; }
.hero-sub { font-size:clamp(9px, 1.15vh, 11px); color:rgba(160,210,255,0.78); letter-spacing:0.08em; font-weight:700; text-transform:uppercase; text-align:center; padding:0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:96vw; }

.main-auto { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:clamp(8px, 1.1vh, 14px) clamp(12px, 1.6vw, 20px); overflow:visible; z-index:1; min-height:0; perspective: 1200px; }
.grid-auto { display:grid; gap:clamp(9px, 1.2vh, 14px) clamp(9px, 1.2vw, 14px); width:100%; max-width:960px; height:100%; max-height:calc(100dvh - 60px - 52px - 38px - 14px); align-content:center; overflow:visible; transform: scale(0.85); transform-origin: center center; }
.grid-auto.grid-9 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

.card { position:relative; background: radial-gradient(130% 130% at 35% 25%, var(--card-color) 0%, rgba(10,35,66,0.88) 45%, rgba(4,13,30,0.96) 100%); backdrop-filter: blur(80px) saturate(1.8) brightness(1.18); -webkit-backdrop-filter: blur(80px) saturate(1.8) brightness(1.18); border-radius:clamp(15px, 1.9vh, 21px); padding:clamp(8px, 1vh, 12px) clamp(10px, 1.2vh, 14px); cursor:default; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:0; overflow:visible; transform-style: preserve-3d; will-change: transform, box-shadow, filter; transition: transform .48s cubic-bezier(.175,.885,.32,1.275), box-shadow .48s cubic-bezier(.2,.8,.2,1), filter .48s cubic-bezier(.2,.8,.2,1), background .48s; border:1px solid var(--card-border); box-shadow: inset 0 2px 0 rgba(255,255,255,0.14), inset 0 -3px 8px rgba(0,0,0,0.40), inset 0 8px 20px rgba(255,255,255,0.06), 0 8px 20px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.22), 0 0 24px var(--card-glow); }
.card::before { content:''; position:absolute; top:1px; left:6%; right:6%; height:36%; background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 30%, transparent 100%); pointer-events:none; border-radius:clamp(14px, 1.8vh, 20px) clamp(14px, 1.8vh, 20px) 50% 50%; }
.card::after { content:''; position:absolute; left:0; top:0; bottom:0; width:clamp(4px, 0.45vw, 5px); background:var(--card-accent); box-shadow: 0 0 10px var(--card-accent), 0 0 20px var(--card-accent); border-radius: 0 2px 2px 0; z-index:1; }
.card.new-bottom { box-shadow: inset 0 2px 0 rgba(255,255,255,0.14), inset 0 -3px 8px rgba(0,0,0,0.40), inset 0 8px 20px rgba(255,255,255,0.06), 0 8px 20px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.22), 0 0 24px var(--card-glow), 0 4px 12px rgba(0,0,0,0.25); }
.card.new-bottom::after { content:''; position:absolute; bottom:-5px; left:12%; right:12%; height:10px; background: radial-gradient(ellipse, rgba(0,0,0,0.40) 0%, transparent 70%); filter: blur(5px); z-index:-1; pointer-events:none; transition: all .48s; }

.card-light { position:absolute; inset:-26px; background: radial-gradient(circle at 50% 30%, var(--glow) 0%, transparent 68%); opacity:0; filter: blur(20px) brightness(0.9); transform: scale(0.65); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.175,.885,.32,1.275), filter .6s; pointer-events:none; z-index:-1; border-radius:50%; }
.card-led-core { position:absolute; top:50%; left:50%; width:7px; height:7px; background: var(--card-accent); border-radius:50%; transform: translate(-50%, -50%) scale(0); box-shadow: 0 0 14px var(--card-accent), 0 0 28px var(--card-accent); opacity:0; transition: all .48s cubic-bezier(.2,.8,.2,1); pointer-events:none; z-index:2; }

.card-icon { width:clamp(56px, 7.6vh, 84px); height:clamp(56px, 7.6vh, 84px); margin-bottom:clamp(5px, 0.9vh, 10px); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform .48s cubic-bezier(.175,.885,.32,1.275), filter .48s; transform-style: preserve-3d; }
.card-icon svg { width:100%; height:100%; stroke:var(--card-icon); stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; filter: drop-shadow(0 0 10px var(--card-glow)) drop-shadow(0 0 18px var(--glow)); }

.card:hover { transform: scale(1.30) translateY(-14px) translateZ(70px) rotateX(-5deg) rotateY(2.5deg); background: radial-gradient(130% 130% at 35% 25%, var(--card-color-bright) 0%, rgba(16,48,90,0.92) 45%, rgba(6,18,40,0.98) 100%); backdrop-filter: blur(90px) saturate(2.0) brightness(1.35); -webkit-backdrop-filter: blur(90px) saturate(2.0) brightness(1.35); box-shadow: inset 0 3px 0 rgba(255,255,255,0.20), inset 0 -4px 12px rgba(0,0,0,0.50), inset 0 12px 28px rgba(255,255,255,0.10), 0 28px 64px rgba(0,0,0,0.55), 0 14px 28px rgba(0,0,0,0.40), 0 0 48px var(--card-glow), 0 0 72px var(--card-accent); filter: brightness(1.16) saturate(1.18); z-index:100; border-color: rgba(255,255,255,0.22); }
.card:hover .card-light { opacity:1; transform: scale(1.5); filter: blur(26px) brightness(1.9) saturate(1.4); }
.card:hover .card-led-core { opacity:1; transform: translate(-50%, -50%) scale(2.8); box-shadow: 0 0 20px var(--card-accent), 0 0 40px var(--card-accent), 0 0 60px var(--glow); }
.card:hover .card-icon { transform: translateZ(40px) scale(1.08); filter: drop-shadow(0 0 18px var(--card-accent)) drop-shadow(0 0 32px var(--card-glow)); }
.card:hover .card-title { transform: translateZ(26px); text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 0 18px var(--card-glow); color:#fff; }
.card.new-bottom:hover::after { bottom:-12px; left:6%; right:6%; height:18px; background: radial-gradient(ellipse, rgba(0,0,0,0.48) 0%, transparent 70%); filter: blur(8px); }

.card-title { color:#fff; font-weight:900; font-size:clamp(13px, 1.75vh, 17px); letter-spacing:0.02em; text-transform:uppercase; line-height:1.15; transition: transform .48s, color .48s, text-shadow .48s; transform-style: preserve-3d; text-shadow: 0 1.5px 9px rgba(0,0,0,0.68), 0 0 14px rgba(0,0,0,0.38); margin-top:4px; }

.card.c1 { --card-color: rgba(16,185,129,0.20); --card-color-bright: rgba(16,185,129,0.32); --card-border: rgba(16,185,129,0.30); --card-accent: #10B981; --card-glow: rgba(16,185,129,0.14); --card-icon: #6EE7B7; --glow: rgba(16,185,129,0.60); }
.card.c2 { --card-color: rgba(249,115,22,0.20); --card-color-bright: rgba(249,115,22,0.32); --card-border: rgba(249,115,22,0.30); --card-accent: #F97316; --card-glow: rgba(249,115,22,0.14); --card-icon: #FDBA74; --glow: rgba(249,115,22,0.60); }
.card.c3 { --card-color: rgba(59,130,246,0.20); --card-color-bright: rgba(59,130,246,0.32); --card-border: rgba(59,130,246,0.30); --card-accent: #3B82F6; --card-glow: rgba(59,130,246,0.14); --card-icon: #93C5FD; --glow: rgba(59,130,246,0.60); }
.card.c4 { --card-color: rgba(239,68,68,0.20); --card-color-bright: rgba(239,68,68,0.32); --card-border: rgba(239,68,68,0.30); --card-accent: #EF4444; --card-glow: rgba(239,68,68,0.14); --card-icon: #FCA5A5; --glow: rgba(239,68,68,0.60); }
.card.c5 { --card-color: rgba(6,182,212,0.20); --card-color-bright: rgba(6,182,212,0.32); --card-border: rgba(6,182,212,0.30); --card-accent: #06B6D4; --card-glow: rgba(6,182,212,0.14); --card-icon: #67E8F9; --glow: rgba(6,182,212,0.60); }
.card.c6 { --card-color: rgba(139,92,246,0.20); --card-color-bright: rgba(139,92,246,0.32); --card-border: rgba(139,92,246,0.30); --card-accent: #8B5CF6; --card-glow: rgba(139,92,246,0.14); --card-icon: #C4B5FD; --glow: rgba(139,92,246,0.60); }
.card.c7 { --card-color: rgba(234,179,8,0.18); --card-color-bright: rgba(234,179,8,0.30); --card-border: rgba(234,179,8,0.28); --card-accent: #EAB308; --card-glow: rgba(234,179,8,0.14); --card-icon: #FDE047; --glow: rgba(234,179,8,0.60); }
.card.c8 { --card-color: rgba(168,85,247,0.18); --card-color-bright: rgba(168,85,247,0.30); --card-border: rgba(168,85,247,0.28); --card-accent: #A855F7; --card-glow: rgba(168,85,247,0.14); --card-icon: #D8B4FE; --glow: rgba(168,85,247,0.60); }
.card.c9 { --card-color: rgba(14,165,233,0.18); --card-color-bright: rgba(14,165,233,0.30); --card-border: rgba(14,165,233,0.28); --card-accent: #0EA5E9; --card-glow: rgba(14,165,233,0.14); --card-icon: #7DD3FC; --glow: rgba(14,165,233,0.60); }

.footer-auto { flex:0 0 auto; height:clamp(38px, 4.8vh, 50px); background: rgba(8,20,42,0.88); backdrop-filter: blur(56px) saturate(1.9); border-top:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(14px, 1.8vw, 22px); z-index:10; position:relative; }
.footer-auto::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, rgba(0,212,255,0.32) 50%, transparent); }
.foot-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.foot-dot { width:7px; height:7px; border-radius:50%; background:#00FF88; box-shadow:0 0 10px #00FF88; flex-shrink:0; }
.foot-dot.led { animation: ledPulse 2s ease-in-out infinite; }
.foot-file { font-family:'JetBrains Mono', monospace; font-size:clamp(11px, 1.35vh, 13.5px); font-weight:800; color:rgba(255,255,255,0.88); letter-spacing:0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.foot-center { display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0 12px; }
.foot-glass-line { width:clamp(50px, 10vw, 120px); height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20) 50%, transparent); display:block; }
.foot-right { display:flex; align-items:center; justify-content:flex-end; flex:1; min-width:0; }
.foot-info { font-family:'JetBrains Mono', monospace; font-size:clamp(10px, 1.2vh, 12px); font-weight:700; color:rgba(140,200,255,0.78); letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; }

@media (max-width:900px) { .grid-auto { max-width:90vw; transform: scale(0.80); } .card-icon { width:clamp(48px, 6.5vh, 72px); height:clamp(48px, 6.5vh, 72px); } .card-title { font-size:clamp(12px, 1.5vh, 14px); } .card:hover { transform: scale(1.22) translateY(-10px) translateZ(55px) rotateX(-4deg); } .footer-auto { height:clamp(36px, 4.5vh, 44px); } }
@media (max-width:600px) { .grid-auto { grid-template-columns: 1fr; grid-template-rows: repeat(9, 1fr); gap:7px; max-width:94vw; transform: scale(0.88); } .card { flex-direction:row; gap:16px; padding:12px 16px; } .card-icon { margin-bottom:0; width:clamp(46px, 6.2vh, 58px); height:clamp(46px, 6.2vh, 58px); } .card-title { font-size:clamp(12px, 1.6vh, 14px); text-align:left; } .card:hover { transform: scale(1.08) translateY(-3px) translateZ(28px); } .foot-file { font-size:clamp(9px, 1.1vh, 11px); } .foot-info { font-size:clamp(8px, 1vh, 10px); } }