/* ========================================= Sorte7 — Theme tokens alinhados ao novo logo Claro por padrão • Dark via [data-theme="dark"] ========================================= */ :root{ /* Core brand */ --s7-navy:#0B2431; /* fundo do logo (navy esverdeado) */ /* Azul pedido: #2672AA */ --s7-cyan:#2672AA; /* azul principal */ --s7-cyan-600:#1F5E8C; /* azul mais escuro para hover */ --s7-green:#30D06B; /* verde trevo */ --s7-green-700:#22B457; /* verde mais fechado */ --s7-purple:#8B5CF6; /* acento roxo */ --s7-orange:#F59E0B; /* acento laranja */ /* Aliases (mantêm compat c/ seu CSS) */ --s7-blue: var(--s7-cyan); --s7-blue-600: var(--s7-cyan-600); /* Superfícies e tipografia – LIGHT */ --s7-deep:#0F172A; /* neutro profundo p/ sombras */ --s7-text:#0b1220; /* texto principal */ --s7-muted:#637084; /* secundário (slate-500 reajustado) */ --s7-line:#e6e9ef; /* bordas suaves */ /* Fundo principal — azul claro da home */ --s7-bg:#EAF7FF; /* azul bem claro, suave e sem padrão */ --s7-bg-alt:#F3FAFF; /* leve contraste para cards/sections */ /* Raio / Sombra / Gradiente de ação */ --s7-radius:16px; --s7-radius-lg:24px; --s7-shadow:0 8px 28px rgba(2, 6, 23, .10); --s7-shadow-lg:0 20px 50px rgba(2, 6, 23, .15); /* Gradiente solicitado: de #195074 até #0DBFD6 */ --s7-gradient: linear-gradient(135deg, #195074 0%, #0DBFD6 100%); --s7-gradient-alt: linear-gradient(135deg, var(--s7-purple) 0%, #195074 50%, #0DBFD6 100%); /* Animações */ --s7-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --s7-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --s7-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ========================= Tema DARK (igual ao logo) Ative adicionando: ========================= */ :root[data-theme="dark"]{ --s7-text:#E7F3F6; --s7-muted:#A3B1C0; --s7-line:#163849; /* borda no tom do navy */ --s7-bg:#0B2431; /* navy do logo */ --s7-bg-alt:#0E2C3B; /* ligeiro contraste */ --s7-shadow:0 10px 32px rgba(0,0,0,.35); --s7-shadow-lg:0 25px 60px rgba(0,0,0,.45); /* gradiente fica mais vivo no dark */ --s7-gradient: linear-gradient(135deg, #18C8F0 0%, #12B8E4 28%, #2CD86F 100%); --s7-gradient-alt: linear-gradient(135deg, #A78BFA 0%, #18C8F0 50%, #34D399 100%); } /* ===== Base (inalterado, só herda tokens) ===== */ *{box-sizing:border-box; margin:0; padding:0} html{scroll-behavior: smooth} html,body{height:100%} body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif; color:var(--s7-text); background:var(--s7-bg); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x: hidden; } img{max-width:100%; display:block} a{ color:var(--s7-blue); text-decoration:none; transition: var(--s7-transition-base); } a:hover{color:var(--s7-blue-600)} .container{width:min(1200px, 92%); margin-inline:auto} /* ===== Header ===== */ .s7-header{ position:sticky; top:0; z-index:50; /* Volta a navbar para o tom sólido escuro (navy) */ background: var(--s7-navy); border-bottom:1px solid rgba(255,255,255,0.08); transition: all var(--s7-transition-base); box-shadow: 0 2px 12px rgba(0,0,0,0.25); } .s7-header.scrolled { box-shadow: 0 4px 16px rgba(0,0,0,0.08); } .s7-nav{display:flex; align-items:center; justify-content:space-between; padding:6px 0} .s7-nav .s7-brand{ display:inline-flex; align-items:center; gap:12px; transition: transform var(--s7-transition-base); position: relative; } .s7-nav .s7-brand::after { content: ''; position: absolute; inset: -8px; border-radius: 12px; background: var(--s7-gradient); opacity: 0; z-index: -1; filter: blur(20px); transition: opacity var(--s7-transition-base); } .s7-nav .s7-brand:hover{transform: scale(1.05)} .s7-nav .s7-brand:hover::after{opacity: 0.3} /* Menu de navegação principal */ .s7-nav-menu{ display: flex !important; align-items: center !important; gap: 32px !important; margin-left: auto !important; height: 100%; } .s7-nav-link{ color: #FFFFFF !important; font-weight: 500 !important; font-size: 16px !important; text-decoration: none !important; padding: 8px 18px !important; border-radius: 8px !important; transition: all 0.2s !important; position: relative !important; letter-spacing: 0.01em !important; display: flex !important; align-items: center !important; height: 100%; } .s7-nav-link:hover{ color: #D4F0FF; background: rgba(255, 255, 255, 0.12); } .s7-nav-btn{ background: linear-gradient(135deg, var(--s7-cyan), var(--s7-cyan-600)) !important; color: #fff !important; font-weight: 700 !important; font-size: 15px !important; padding: 10px 28px !important; border-radius: 25px !important; text-decoration: none !important; transition: all 0.2s ease !important; box-shadow: 0 2px 8px rgba(17, 194, 232, 0.25) !important; display: flex !important; align-items: center !important; height: 40px !important; border: none !important; cursor: pointer !important; } .s7-nav-btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(17, 194, 232, 0.35); background: linear-gradient(135deg, var(--s7-cyan), #0FA3C7); } .s7-nav-actions{display:flex; align-items:center; gap:20px} .s7-link{ color:color-mix(in lab, var(--s7-text) 86%, #000 14%); font-weight:600; position: relative; padding: 8px 4px; transition: color var(--s7-transition-base); } .s7-link::after{ content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%) scaleX(0); width: 100%; height: 3px; background: var(--s7-gradient); border-radius: 2px; transition: transform var(--s7-transition-base); } .s7-link:hover{color:var(--s7-blue)} .s7-link:hover::after{transform: translateX(-50%) scaleX(1)} .s7-cta,.s7-cta-min{ padding:.7rem 1.2rem; border-radius:999px; font-weight:700; background: linear-gradient(135deg, #30D06B, #22B457); color:#fff; box-shadow:0 10px 26px rgba(48, 208, 107, 0.35); transition: all var(--s7-transition-base); border: 2px solid transparent; position: relative; overflow: hidden; } .s7-cta::before, .s7-cta-min::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #3FE17E, #30D06B); opacity: 0; transition: opacity var(--s7-transition-base); } .s7-cta span, .s7-cta-min span {position: relative; z-index: 1} .s7-cta:hover,.s7-cta-min:hover{ transform: translateY(-3px) scale(1.03); box-shadow:0 16px 36px rgba(48, 208, 107, 0.5); border-color: rgba(255,255,255,0.3); } .s7-cta:hover::before,.s7-cta-min:hover::before{opacity: 1} .s7-cta:active,.s7-cta-min:active{transform: translateY(-1px) scale(1.01)} .s7-cta-min{padding:.55rem .95rem; font-size:.9rem} /* ===== Hero ===== */ .s7-hero{ position:relative; border-bottom:1px solid var(--s7-line); /* Luzes brand que funcionam bem nos dois temas */ background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--s7-green) 22%, transparent) , transparent 50%), radial-gradient(1200px 700px at 110% 10%, color-mix(in srgb, var(--s7-blue) 24%, transparent), transparent 50%), var(--s7-bg); } :root[data-theme="dark"] .s7-hero{ /* no dark, reforça o navy com um véu */ background: radial-gradient(1200px 520px at 0% -20%, color-mix(in srgb, var(--s7-green) 18%, transparent), transparent 55%), radial-gradient(1100px 600px at 100% -10%, color-mix(in srgb, var(--s7-blue) 22%, transparent), transparent 58%), linear-gradient(#0B2431, #0B2431); } .s7-hero-wrap{ display:grid; grid-template-columns: 1.15fr .85fr; gap:32px; padding:64px 0 32px; } .s7-hero-text h1{ font-size: clamp(2rem, 1.25rem + 2.2vw, 3.2rem); line-height:1.1; margin:12px 0 12px; letter-spacing:-.02em; background:var(--s7-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; } .s7-sub{font-size:1.05rem; color:var(--s7-muted); max-width:60ch} .s7-hero-cta{display:flex; gap:12px; margin-top:18px} .s7-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border:0; cursor:pointer; border-radius:12px; padding:14px 24px; font-weight:700; transition: all var(--s7-transition-base); position: relative; overflow: hidden; font-size: 1rem; } .s7-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent); opacity: 0; transition: opacity var(--s7-transition-fast); } .s7-btn:hover::before {opacity: 1} .s7-btn:active {transform: scale(0.98)} .s7-btn-primary{ background: linear-gradient(135deg, #30D06B 0%, #22B457 100%); color:#fff; box-shadow:0 14px 30px rgba(48, 208, 107, 0.35) } .s7-btn-primary:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 18px 38px rgba(48, 208, 107, 0.45) } .s7-btn-secondary{ background: linear-gradient(135deg, var(--s7-cyan) 0%, var(--s7-cyan-600) 100%); color:#fff; box-shadow:0 14px 30px rgba(17, 194, 232, 0.35); } .s7-btn-secondary:hover{ transform:translateY(-2px) scale(1.02); box-shadow: 0 18px 38px rgba(17, 194, 232, 0.45) } .s7-btn-ghost{ border:2px solid var(--s7-green); color:var(--s7-green); background:transparent; transition: all var(--s7-transition-base); } .s7-btn-ghost:hover{ background: var(--s7-green); color: #fff; transform:translateY(-2px); box-shadow: 0 8px 24px rgba(48, 208, 107, 0.35) } .s7-hero-card{ align-self:start; background:var(--s7-bg); border:1px solid var(--s7-line); border-radius:var(--s7-radius); padding:22px; box-shadow:var(--s7-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .s7-hero-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 32px rgba(2, 6, 23, .1); } .s7-hero-card h3{margin:8px 0 10px} .s7-hero-badge{ display:inline-block; font-size:.82rem; font-weight:800; color:#fff; background:#30D06B; border:1px solid #22B457; padding:6px 10px; border-radius:999px; box-shadow: 0 4px 12px rgba(48, 208, 107, 0.3); transition: all 0.3s ease; } .s7-hero-badge:hover{ transform: scale(1.05); box-shadow: 0 6px 16px rgba(48, 208, 107, 0.45); } :root[data-theme="dark"] .s7-hero-badge{ color:#fff; background:#30D06B; border:1px solid #22B457; box-shadow: 0 4px 12px rgba(48, 208, 107, 0.3); } .s7-list{margin:0 0 14px 0; padding-left:18px} .s7-list li{margin:8px 0} /* ===== Seções ===== */ .s7-section{padding:64px 0} .s7-section-alt{background:var(--s7-bg-alt)} .s7-section h2{ font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); margin:0 0 22px; letter-spacing:-.01em; color:var(--s7-text); } /* ===== Utilitário para contraste em fundo gradiente ===== */ .on-gradient{ --s7-text:#FFFFFF; --s7-muted:rgba(255,255,255,0.85); --s7-line:rgba(255,255,255,0.25); } .on-gradient a{color:#fff} .on-gradient a:hover{color:#E0F7FF} .on-gradient .card, .on-gradient .panel, .on-gradient .box{ background: color-mix(in srgb, #FFFFFF 12%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--s7-line); } .on-gradient input, .on-gradient select, .on-gradient textarea{ background: color-mix(in srgb, #FFFFFF 15%, transparent); color:#fff; border:1px solid var(--s7-line); } .on-gradient ::placeholder{color:rgba(255,255,255,0.75)} .on-gradient .s7-nav-link{color:#FFFFFF !important} .on-gradient .s7-nav-link:hover{color:#E0F7FF !important} /* ===== Grades ===== */ .s7-grid-4{display:grid; gap:14px; grid-template-columns:repeat(4,1fr)} .s7-grid-3{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)} .s7-grid-2{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)} @media (max-width: 980px){ .s7-hero-wrap{grid-template-columns:1fr; padding:44px 0} .s7-grid-4{grid-template-columns:1fr 1fr} .s7-grid-3{grid-template-columns:1fr 1fr} } @media (max-width: 640px){ .s7-grid-4,.s7-grid-3,.s7-grid-2{grid-template-columns:1fr} .s7-nav-actions{gap:10px} } /* ===== Cards/Features ===== */ .s7-card, .s7-feature{ background:var(--s7-bg); border:1px solid var(--s7-line); border-radius:var(--s7-radius); padding:24px; box-shadow:0 2px 10px rgba(2,6,23,.06); transition: all var(--s7-transition-base); position: relative; overflow: hidden; } .s7-card::before, .s7-feature::before { content: ''; position: absolute; inset: 0; background: var(--s7-gradient); opacity: 0; transition: opacity var(--s7-transition-base); z-index: 0; } .s7-card > *, .s7-feature > * {position: relative; z-index: 1} .s7-card:hover, .s7-feature:hover{ transform: translateY(-6px); box-shadow: 0 16px 42px rgba(2, 6, 23, .15); border-color: var(--s7-blue); } .s7-card:hover::before, .s7-feature:hover::before{opacity: 0.03} /* ===== Notas & Alerts ===== */ .s7-termo-note{ margin-top:14px; color:var(--s7-muted); font-size:.96rem } .s7-alert{ margin-top:14px; padding:10px 14px; border-radius:12px; font-weight:600 } .s7-alert-success{ background:color-mix(in srgb, #ecfdf5 80%, var(--s7-green) 20%); color:#065f46; border:1px solid color-mix(in srgb, #a7f3d0 70%, var(--s7-green) 30%); } .s7-alert-error{ background:#fef2f2; color:#7f1d1d; border:1px solid #fecaca; } /* ===== Form ===== */ .s7-form-wrap{ display:grid; gap:18px } .s7-form-header p{ color:var(--s7-muted); margin-top:4px } .s7-form{ background:var(--s7-bg); border:1px solid var(--s7-line); border-radius:20px; padding:22px; box-shadow:var(--s7-shadow); } .s7-field{ display:flex; flex-direction:column; gap:6px } .s7-field label{ font-weight:700; font-size:.95rem; color:var(--s7-text) } .s7-field input, .s7-field select, .s7-field textarea{ appearance:none; border:1px solid color-mix(in lab, #d1d5db 80%, var(--s7-navy) 20%); border-radius:12px; padding:12px 14px; font-size:1rem; outline:none; background:var(--s7-bg); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .s7-field textarea{ resize:vertical } .s7-field input:focus, .s7-field select:focus, .s7-field textarea:focus{ border-color: var(--s7-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s7-blue) 20%, transparent); transform: translateY(-1px); } .s7-field input:hover, .s7-field select:hover, .s7-field textarea:hover{ border-color:color-mix(in lab, #cbd5e1 60%, var(--s7-blue) 40%); } :root[data-theme="dark"] .s7-field input, :root[data-theme="dark"] .s7-field select, :root[data-theme="dark"] .s7-field textarea{ background:color-mix(in srgb, var(--s7-bg) 94%, #0c0c0c 6%); } /* Links auxiliares */ .s7-help{display:block; margin-top:6px; color:var(--s7-muted)} /* ===== Micro-interactions ===== */ .s7-link-btn{ padding:0; background:none; border:none; color:var(--s7-blue); cursor:pointer; font-weight:700; transition: color 0.2s ease } .s7-link-btn:hover{ color:var(--s7-blue-600); text-decoration: underline } .s7-consent{ display:flex; flex-direction:column; gap:10px; margin-top:12px } .s7-check{ display:flex; align-items:flex-start; gap:10px; color:var(--s7-muted) } .s7-check input{ margin-top:3px; transform: translateY(1px) } .s7-actions{ display:flex; align-items:center; gap:18px; margin-top:12px; flex-wrap:wrap } .s7-privacy{ color:var(--s7-muted); font-size:.95rem } /* ===== Footer ===== */ .s7-footer{ margin-top:28px; border-top:1px solid var(--s7-line); background:var(--s7-bg) } .s7-footer-grid{ display:flex; align-items:flex-start; justify-content:space-between; padding:24px 0; gap:18px } .s7-foot-note{ color:var(--s7-muted); margin:8px 0 0 } .s7-foot-links{ list-style:none; margin:0; padding:0; display:grid; gap:8px } .s7-foot-links a{ color:var(--s7-text); font-weight:600; transition: color 0.2s ease } .s7-foot-links a:hover{ color:var(--s7-blue); transform: translateX(2px) } .s7-foot-bottom{ border-top:1px solid var(--s7-line); padding:12px 0; color:var(--s7-muted); font-size:.95rem; background:color-mix(in lab, var(--s7-bg) 92%, #fff 8%); } /* ===== Micro-interactions ===== */ .s7-card:hover, .s7-feature:hover, .s7-hero-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(2, 6, 23, .08); } .s7-field input:hover, .s7-field select:hover, .s7-field textarea:hover{ border-color:color-mix(in lab, #cbd5e1 60%, var(--s7-blue) 40%); } /* ===== Utilities ===== */ .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} /* ===== Parceiros Section ===== */ .s7-parceiros-header { text-align: center; margin-bottom: 48px; } .s7-parceiros-header h1 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 12px; background: linear-gradient(135deg, var(--s7-blue) 0%, var(--s7-green) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .s7-parceiros-header p { color: var(--s7-muted); font-size: 1.1rem; } .s7-search-box { max-width: 600px; margin: 0 auto 32px; position: relative; } .s7-search-input { width: 100%; padding: 14px 48px 14px 18px; border: 2px solid var(--s7-line); border-radius: 12px; font-size: 1rem; background: var(--s7-bg); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .s7-search-input:focus { border-color: var(--s7-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--s7-blue) 15%, transparent); outline: none; } .s7-search-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--s7-muted); pointer-events: none; } .s7-filters { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; } .s7-chip { padding: 10px 20px; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: linear-gradient(135deg, #0B2431 0%, #163849 100%); color: #FFFFFF; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.95rem; } .s7-chip:hover { border-color: #0DBFD6; background: linear-gradient(135deg, #163849 0%, #1e4a5f 100%); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13, 191, 214, 0.3); } .s7-chip.active, .s7-chip.is-active { background: linear-gradient(135deg, #195074 0%, #0DBFD6 100%); color: white; border-color: #0DBFD6; box-shadow: 0 6px 16px rgba(13, 191, 214, 0.4); } .s7-parceiros-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; padding: 32px 0; } /* ===== Utilidades Visuais ===== */ .glassmorphism { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .gradient-text { background: var(--s7-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .gradient-border { position: relative; background: var(--s7-bg); border-radius: var(--s7-radius); } .gradient-border::before { content: ''; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: var(--s7-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 100% { left: 100%; } } .float-animation { animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(48, 208, 107, 0.3); } 50% { box-shadow: 0 0 30px rgba(48, 208, 107, 0.6); } } /* ===== Loading States ===== */ .skeleton { background: linear-gradient(90deg, var(--s7-bg-alt) 25%, var(--s7-line) 50%, var(--s7-bg-alt) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: 8px; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .fade-in { animation: fadeIn 0.6s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .scale-in { animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* ===== Melhorias de Acessibilidade ===== */ .focus-visible:focus { outline: 2px solid var(--s7-blue); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Continue grid styles */ .s7-parceiros-grid { gap: 24px; margin-bottom: 48px; } .s7-parceiro-card { background: var(--s7-bg); border: 1px solid var(--s7-line); border-radius: var(--s7-radius); padding: 24px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .s7-parceiro-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--s7-blue) 0%, var(--s7-green) 100%); opacity: 0; transition: opacity 0.3s ease; } .s7-parceiro-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 42px rgba(17, 194, 232, 0.15); border-color: color-mix(in lab, var(--s7-blue) 50%, var(--s7-line) 50%); } .s7-parceiro-card:hover::before { opacity: 1; } .s7-parceiro-logo { width: 100%; height: 180px; object-fit: contain; margin-bottom: 16px; border-radius: 8px; background: color-mix(in srgb, var(--s7-bg-alt) 50%, var(--s7-bg) 50%); padding: 12px; transition: transform 0.3s ease; } .s7-parceiro-card:hover .s7-parceiro-logo { transform: scale(1.05); } .s7-parceiro-card h3 { font-size: 1.3rem; margin-bottom: 8px; color: var(--s7-text); } .s7-parceiro-card .s7-categoria { display: inline-block; padding: 6px 14px; background: color-mix(in srgb, var(--s7-green) 15%, var(--s7-bg)); color: var(--s7-green); border-radius: 999px; font-size: 0.85rem; font-weight: 700; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--s7-green) 30%, transparent); } .s7-parceiro-card p { color: var(--s7-muted); line-height: 1.6; margin-bottom: 16px; } .s7-parceiro-link { display: inline-flex; align-items: center; gap: 6px; color: var(--s7-blue); font-weight: 700; transition: gap 0.3s ease; } .s7-parceiro-link:hover { gap: 10px; } .s7-empty-state { text-align: center; padding: 80px 20px; color: var(--s7-muted); } .s7-empty-state svg { width: 120px; height: 120px; margin-bottom: 24px; opacity: 0.4; } .s7-empty-state h3 { font-size: 1.5rem; color: var(--s7-text); margin-bottom: 8px; } @media (max-width: 768px) { .s7-parceiros-grid { grid-template-columns: 1fr; } .s7-filters { gap: 8px; } .s7-chip { padding: 8px 16px; font-size: 0.9rem; } }