/* ============================================================================ kvoip.com.br — folha de estilo As variáveis, as fontes e os raios vêm do componente "Pacote KVOIP + Woulz" que já existe na home do site (bloco de HTML dentro do Elementor). Não inventei paleta: esta é a do site. ========================================================================== */ :root{ --branco:#FCFCFC; --cinza-bg:#EEF0F6; --ciano:#58C9EA; --ciano-esc:#2fa8cc; --navy:#1A1F36; --azul:#036CE9; /* a cor dos botões do site */ --azul-esc:#0257bb; --texto:#4B5563; --texto-esc:#1A1F36; --wpp:#25D366; --wpp-esc:#1aad55; --borda:rgba(88,201,234,.18); --linha:#e3e7ef; --grafite:#333333; --grafite-2:#353535; --vinho:#2E0000; --r-sm:10px; --r-md:18px; --r-lg:28px; --maxw:1160px; --t:.35s cubic-bezier(.4,0,.2,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.7; color:var(--texto);background:var(--branco);-webkit-font-smoothing:antialiased} img,video{display:block;max-width:100%;height:auto} a{text-decoration:none;color:inherit} ul{list-style:none} h1,h2,h3,h4{font-family:'Roboto',system-ui,sans-serif;color:var(--texto-esc);line-height:1.2;letter-spacing:-.02em} h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:900} h2{font-size:clamp(1.7rem,3.5vw,2.7rem);font-weight:700} h3{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:600} p{font-size:1.05rem} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .centro{text-align:center} .sec{padding:76px 0} .sec-cinza{background:var(--cinza-bg)} .sec-grafite{background:var(--grafite);color:#fff} .sec-grafite h2,.sec-grafite h3{color:#fff} .sec-grafite p{color:rgba(255,255,255,.78)} /* ─── botões ─────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:'Inter',sans-serif;font-weight:600;font-size:.98rem; padding:14px 26px;border-radius:var(--r-sm);border:2px solid transparent; transition:var(--t);cursor:pointer;white-space:normal;text-align:center} .btn-azul{background:var(--azul);color:#fff} .btn-azul:hover{background:var(--azul-esc);transform:translateY(-2px)} .btn-wpp{background:var(--wpp);color:#fff} .btn-wpp:hover{background:var(--wpp-esc);transform:translateY(-2px)} .btn-linha{background:transparent;color:var(--azul);border-color:var(--azul)} .btn-linha:hover{background:var(--azul);color:#fff} .btn-branco{background:#fff;color:var(--navy)} .btn-branco:hover{transform:translateY(-2px)} .btn-lg{padding:16px 32px;font-size:1.02rem} .btn-sm{padding:10px 18px;font-size:.88rem} /* ─── barra de topo (clara, como no site) ────────────────────────────── */ .barra-topo{background:#fff;border-bottom:1px solid var(--linha);font-size:.82rem;color:var(--texto)} .barra-topo .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap; padding-top:9px;padding-bottom:9px} .barra-topo a{color:var(--texto);transition:var(--t);display:inline-flex;align-items:center;gap:6px} .barra-topo a:hover{color:var(--azul)} .barra-rot{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--azul)} .barra-login{display:flex;gap:26px;margin:0 auto} .barra-dir{display:flex;gap:22px;align-items:center} /* ─── cabeçalho ──────────────────────────────────────────────────────── */ .topo{position:sticky;top:0;z-index:60;background:rgba(252,252,252,.96); backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--linha)} .topo .wrap{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px} .marca img{height:38px;width:auto} .menu{display:flex;gap:24px;margin:0 auto;align-items:center} .menu>a,.menu .abre{font-weight:500;font-size:.96rem;color:var(--texto-esc);transition:var(--t); padding:8px 0;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px} .menu>a:hover,.menu .abre:hover, .menu>a[aria-current=page],.menu .abre[aria-current=page]{color:var(--azul);border-bottom-color:var(--azul)} .seta{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor;opacity:.6} /* submenus: abrem no passar do mouse E no foco pelo teclado */ .tem-sub{position:relative} .mega,.sub{position:absolute;top:100%;left:50%;transform:translate(-50%,8px); background:#fff;border:1px solid var(--linha);border-radius:var(--r-md); box-shadow:0 22px 60px rgba(26,31,54,.14);padding:26px 30px; opacity:0;visibility:hidden;transition:var(--t);z-index:70} .tem-sub:hover .mega,.tem-sub:hover .sub, .tem-sub:focus-within .mega,.tem-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)} .mega{width:min(860px,92vw)} .mega-wrap{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:30px} .mega h4,.sub h4{font-family:'Roboto',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--azul);margin-bottom:14px} .mega ul,.sub ul{display:flex;flex-direction:column;gap:11px} .mega a,.sub a{font-size:.94rem;color:var(--texto-esc);transition:var(--t);display:block} .mega a:hover,.sub a:hover{color:var(--azul)} .mega-cta{background:var(--cinza-bg);border-radius:var(--r-sm);padding:20px;margin:-6px -8px} .mega-cta p{font-size:.9rem;margin-bottom:12px} .mega-cta>a{font-weight:600;color:var(--azul)} .sub{width:max-content;min-width:220px;padding:20px 24px} /* ─── redes sociais no cabeçalho ─────────────────────────────────────── */ .menu-mob{display:none} .topo-dir{display:flex;align-items:center;gap:14px} .redes{display:flex;gap:13px;align-items:center} .redes a{color:var(--texto);transition:var(--t);display:grid;place-items:center} .redes a:hover{color:var(--azul);transform:translateY(-2px)} /* ─── hero ───────────────────────────────────────────────────────────── */ .hero{background:linear-gradient(180deg,var(--cinza-bg) 0%,var(--branco) 100%); padding:64px 0 72px;overflow:hidden} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .hero h1{margin-bottom:18px} .hero h1 em{font-style:normal;color:var(--azul)} .hero-lead{font-size:1.14rem;margin-bottom:28px;max-width:52ch} .hero-acoes{display:flex;gap:12px;flex-wrap:wrap} .hero-img img{border-radius:var(--r-lg)} /* ─── faixa de atalhos ───────────────────────────────────────────────── */ .atalhos{background:var(--branco);border-bottom:1px solid var(--linha)} .atalhos .wrap{display:flex;gap:12px;flex-wrap:wrap;justify-content:center; padding-top:26px;padding-bottom:26px} .atalhos .btn{min-width:172px} /* ─── etiqueta ───────────────────────────────────────────────────────── */ .tag{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--ciano-esc); background:rgba(88,201,234,.1);border:1px solid var(--borda); padding:7px 15px;border-radius:999px;margin-bottom:16px} .tag span{width:7px;height:7px;border-radius:50%;background:var(--ciano)} /* ─── grades e cartões ───────────────────────────────────────────────── */ .grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;align-items:center} .grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--r-md); padding:30px 26px;transition:var(--t)} .cartao:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(26,31,54,.09); border-color:var(--borda)} .cartao img{width:58px;height:58px;object-fit:contain;margin-bottom:16px} .cartao h3{margin-bottom:10px} .cartao p{font-size:.98rem} .cartao-claro{background:transparent;border-color:rgba(255,255,255,.14)} .cartao-claro:hover{background:rgba(255,255,255,.04)} .cartao-claro img{margin:0 auto 16px} /* ─── lista com check ────────────────────────────────────────────────── */ .checks{display:flex;flex-direction:column;gap:13px;margin:22px 0} .checks li{display:flex;gap:11px;align-items:flex-start;font-size:1rem} .checks svg{flex:none;margin-top:4px;color:var(--ciano-esc)} /* ─── vídeo ──────────────────────────────────────────────────────────── */ .video-capa{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden; box-shadow:0 20px 56px rgba(26,31,54,.16)} .video-capa img{width:100%} .video-capa::after{content:"";position:absolute;inset:0;background:rgba(26,31,54,.18); transition:var(--t)} .video-capa:hover::after{background:rgba(26,31,54,.05)} .video-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;z-index:2; background:var(--azul);border-radius:50%;display:grid;place-items:center; box-shadow:0 10px 30px rgba(3,108,233,.45);transition:var(--t)} .video-capa:hover .video-play{transform:scale(1.08)} .video-play svg{fill:#fff;margin-left:4px} /* O player que entra no lugar da capa. A proporcao fica travada em 16:9 para a pagina nao dar um pulo quando a capa sai e o video entra. */ .video-caixa{position:relative;width:100%;aspect-ratio:16/9;max-width:100%; border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:var(--sombra-md)} .video-caixa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* ─── certificações ──────────────────────────────────────────────────── */ .selos{display:flex;gap:44px;align-items:center;justify-content:center;flex-wrap:wrap} .selos img{max-height:74px;width:auto;filter:grayscale(.15)} /* ─── perguntas frequentes ───────────────────────────────────────────── */ .faq{max-width:840px;margin:0 auto} .faq details{border-bottom:1px solid rgba(255,255,255,.14)} .faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative; font-family:'Roboto',sans-serif;font-weight:600;font-size:1.06rem;color:#F0F0F0} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%); font-size:1.6rem;font-weight:400;color:var(--ciano);transition:var(--t)} .faq details[open] summary::after{content:"\2212"} .faq-texto{padding:0 0 22px;color:rgba(255,255,255,.76);font-size:.99rem} .faq-texto p{font-size:.99rem;margin-bottom:9px} .faq-texto p:last-child{margin-bottom:0} /* ─── rodapé ─────────────────────────────────────────────────────────── */ .rodape{background:var(--vinho);color:rgba(255,255,255,.72);padding:64px 0 28px} .rodape h3{color:#fff;font-size:1rem;margin-bottom:16px} .rodape a{color:rgba(255,255,255,.72);transition:var(--t)} .rodape a:hover{color:var(--ciano)} .rodape-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px} .rodape-grade ul{display:flex;flex-direction:column;gap:10px;font-size:.94rem} .rodape img{height:40px;width:auto;margin-bottom:18px} .rodape p{font-size:.94rem} .rodape-base{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12); display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem; color:rgba(255,255,255,.5)} /* ─── botão flutuante do WhatsApp ────────────────────────────────────── */ .wpp-flut{position:fixed;right:20px;bottom:20px;z-index:80;width:56px;height:56px; border-radius:50%;background:var(--wpp);color:#fff;display:grid;place-items:center; box-shadow:0 10px 30px rgba(37,211,102,.42);transition:var(--t)} .wpp-flut:hover{transform:scale(1.07)} /* ─── celular ────────────────────────────────────────────────────────── */ @media (max-width:980px){ .hero .wrap{grid-template-columns:1fr;gap:34px} .hero-img{order:-1} .grade-2{grid-template-columns:1fr;gap:28px} .rodape-grade{grid-template-columns:1fr 1fr} } @media (max-width:980px){ .barra-login{display:none} } @media (max-width:760px){ .menu,.topo-dir{display:none} .barra-topo .wrap{justify-content:center} .menu-mob{display:flex;gap:8px;overflow-x:auto;padding:11px 18px; background:var(--navy);scrollbar-width:none} .menu-mob::-webkit-scrollbar{display:none} .menu-mob a{white-space:nowrap;font-size:.86rem;font-weight:500;color:#fff; background:rgba(255,255,255,.1);padding:8px 14px;border-radius:999px} .menu-mob a[aria-current=page]{background:var(--azul)} .grade-3{grid-template-columns:1fr} .rodape-grade{grid-template-columns:1fr} .sec{padding:56px 0} .barra-topo .wrap{gap:14px;font-size:.78rem} } /* nada rola de lado: filho de grid nasce sem poder encolher */ @media (max-width:980px){ .grade-2>*,.grade-3>*,.hero .wrap>*{min-width:0} h1,h2,h3,p,li{overflow-wrap:anywhere} } /* ════════════════════════════════════════════ KVP — Variáveis isoladas (não usa :root global) ════════════════════════════════════════════ */ .kvp-pacote-section { --kvp-white: #FCFCFC; --kvp-gray-bg: #EEF0F6; --kvp-cyan: #58C9EA; --kvp-cyan-dark: #2fa8cc; --kvp-navy: #1A1F36; --kvp-text-main: #4B5563; --kvp-text-dark: #1A1F36; --kvp-whatsapp: #25D366; --kvp-whatsapp-d: #1aad55; --kvp-border: rgba(88,201,234,0.18); --kvp-radius-sm: 10px; --kvp-radius-md: 18px; --kvp-radius-lg: 28px; --kvp-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* ─── Reset escopado ao componente ─── */ .kvp-pacote-section, .kvp-pacote-section *, .kvp-pacote-section *::before, .kvp-pacote-section *::after { box-sizing: border-box; margin: 0; padding: 0; } .kvp-pacote-section { font-family: 'Inter', sans-serif; line-height: 1.7; color: var(--kvp-text-main); } .kvp-pacote-section img { display: block; max-width: 100%; } .kvp-pacote-section a { text-decoration: none; color: inherit; } .kvp-pacote-section ul { list-style: none; } .kvp-pacote-section h2, .kvp-pacote-section h3 { font-family: 'Roboto', sans-serif; color: var(--kvp-text-dark); line-height: 1.2; } .kvp-pacote-section h2 { font-size: clamp(1.7rem, 3.5vw, 2.7rem); font-weight: 700; letter-spacing: -0.02em; } .kvp-pacote-section h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; } .kvp-pacote-section p { font-size: 1.05rem; } /* ─── Container ─── */ .kvp-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } /* ─── Tag label ─── */ .kvp-tag-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kvp-cyan); background: rgba(88,201,234,0.12); border: 1px solid rgba(88,201,234,0.25); border-radius: 40px; padding: 6px 16px; margin-bottom: 20px; } .kvp-tag-label span { width: 6px; height: 6px; border-radius: 50%; background: var(--kvp-cyan); display: inline-block; } /* ─── Buttons ─── */ .kvp-btn { display: inline-flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; border-radius: 50px; padding: 14px 32px; cursor: pointer; border: none; transition: var(--kvp-transition); white-space: nowrap; position: relative; overflow: hidden; } .kvp-btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.15); opacity: 0; transition: opacity 0.2s; } .kvp-btn:hover::after { opacity: 1; } .kvp-btn-primary { background: linear-gradient(135deg, var(--kvp-cyan), var(--kvp-cyan-dark)); color: #fff !important; box-shadow: 0 4px 24px rgba(88,201,234,0.35); } .kvp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(88,201,234,0.45); } .kvp-btn-whatsapp { background: linear-gradient(135deg, var(--kvp-whatsapp), var(--kvp-whatsapp-d)); color: #fff !important; box-shadow: 0 4px 24px rgba(37,211,102,0.35); } .kvp-btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(37,211,102,0.45); } /* ─── Reveal Animations ─── */ /* O conteúdo nasce VISÍVEL. A animação só entra quando o JS confirma que está vivo (html.js). Sem isso, um bloqueador de script ou um erro de rede deixaria a seção inteira com opacidade zero — invisível, sem erro nenhum. */ html.js .kvp-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; } html.js .kvp-reveal.kvp-visible { opacity: 1; transform: none; } html.js .kvp-reveal-delay-1 { transition-delay: 0.1s; } html.js .kvp-reveal-delay-2 { transition-delay: 0.2s; } html.js .kvp-reveal-delay-3 { transition-delay: 0.3s; } /* ════════════════════════════════════════════ PACOTE COMPLETO — Seção principal ════════════════════════════════════════════ */ .kvp-pacote-section { background: linear-gradient(170deg, #0f1421 0%, var(--kvp-navy) 50%, #0e1a2e 100%); padding: 96px 0; position: relative; overflow: hidden; } .kvp-pacote-section::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 900px; height: 400px; background: radial-gradient(ellipse, rgba(88,201,234,0.12) 0%, transparent 70%); pointer-events: none; } .kvp-pacote-section::after { content: ''; position: absolute; bottom: -60px; right: -60px; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgba(37,211,102,0.07) 0%, transparent 70%); pointer-events: none; } .kvp-pacote-header { text-align: center; max-width: 720px; margin: 0 auto 24px; position: relative; z-index: 1; } .kvp-pacote-header .kvp-tag-label { justify-content: center; } .kvp-pacote-header h2 { color: #fff; margin-bottom: 16px; } .kvp-pacote-header h2 em { font-style: normal; color: var(--kvp-cyan); } .kvp-pacote-header p { color: rgba(255,255,255,0.65); font-size: 1.1rem; line-height: 1.8; margin-bottom: 12px; } /* Anchor badge "incluso ao contratar VoIP" */ .kvp-pacote-anchor { display: flex; /* era inline-flex */ width: fit-content; margin: 0 auto 56px; /* centraliza horizontalmente */ align-items: center; gap: 10px; background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.3); border-radius: 40px; padding: 8px 20px; font-size: 0.82rem; font-weight: 600; color: var(--kvp-whatsapp); position: relative; z-index: 1; } .kvp-pacote-anchor svg { flex-shrink: 0; } /* Grid de produtos */ .kvp-pacote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 1; margin-bottom: 48px; } .kvp-pacote-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(88,201,234,0.15); border-radius: var(--kvp-radius-md); padding: 28px 22px; transition: var(--kvp-transition); position: relative; overflow: hidden; } .kvp-pacote-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--kvp-cyan), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s; } .kvp-pacote-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(88,201,234,0.35); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.3); } .kvp-pacote-card:hover::before { transform: scaleX(1); } .kvp-pacote-card-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kvp-whatsapp); background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.25); border-radius: 20px; padding: 3px 10px; margin-bottom: 16px; } .kvp-pacote-card-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--kvp-whatsapp); } .kvp-pacote-card-icon { font-size: 2rem; margin-bottom: 14px; line-height: 1; } .kvp-pacote-card h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.3; } .kvp-pacote-card p { font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.65; } /* Faixa de CTA inferior */ .kvp-pacote-cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: rgba(255,255,255,0.04); border: 1px solid rgba(88,201,234,0.18); border-radius: var(--kvp-radius-md); padding: 28px 36px; position: relative; z-index: 1; justify-content: center; flex-direction: column; text-align: center; } .kvp-pacote-cta-strip-text strong { display: block; font-family: 'Roboto', sans-serif; font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 4px; } .kvp-pacote-cta-strip-text span { font-size: 0.9rem; color: rgba(255,255,255,0.55); } .kvp-pacote-cta-strip-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ════════════════════════════════════════════ RESPONSIVO ════════════════════════════════════════════ */ @media (max-width: 1024px) { .kvp-pacote-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .kvp-pacote-section { padding: 64px 0; } .kvp-pacote-grid { grid-template-columns: 1fr 1fr; } .kvp-pacote-cta-strip { flex-direction: column; text-align: center; } .kvp-pacote-cta-strip-actions { justify-content: center; } } @media (max-width: 480px) { .kvp-pacote-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .kvp-pacote-cta-strip { padding: 24px 18px; } .kvp-pacote-cta-strip-text strong { font-size: 1.05rem; line-height: 1.4; word-break: break-word; overflow-wrap: break-word; } .kvp-pacote-cta-strip-text span { font-size: 0.85rem; line-height: 1.5; } .kvp-pacote-cta-strip-actions { width: 100%; } .kvp-pacote-cta-strip-actions .kvp-btn { width: 100%; justify-content: center; } } /* ─── busca do blog ──────────────────────────────────────────────────── */ .sr-so{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .blog-busca{margin-bottom:30px} .blog-busca input{width:100%;padding:14px 18px;border:1px solid var(--linha); border-radius:var(--r-sm);font:inherit;font-size:1rem;background:#fff;color:var(--texto-esc)} .blog-busca input:focus{outline:2px solid var(--ciano);outline-offset:1px;border-color:var(--ciano)} .blog-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px} .blog-chip{font:inherit;font-size:.86rem;font-weight:500;padding:8px 16px;border-radius:999px; border:1px solid var(--linha);background:#fff;color:var(--texto);cursor:pointer;transition:var(--t)} .blog-chip:hover{border-color:var(--ciano)} .blog-chip.on{background:var(--azul);border-color:var(--azul);color:#fff} .post-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .post-card{background:#fff;border:1px solid var(--linha);border-radius:var(--r-md); overflow:hidden;display:flex;flex-direction:column;transition:var(--t)} .post-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(26,31,54,.09)} .post-card-media img{width:100%;aspect-ratio:16/9;object-fit:cover} .post-card h3{font-size:1.08rem;margin:0 20px 10px;line-height:1.35} .post-card h3 a:hover{color:var(--azul)} .post-card p{font-size:.94rem;margin:0 20px 16px;flex:1} .post-meta{display:block;margin:18px 20px 8px;font-size:.78rem;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--ciano-esc)} .post-meta .tempo{color:var(--texto);font-weight:400;text-transform:none;letter-spacing:0} .link-mais{margin:0 20px 20px;font-weight:600;font-size:.92rem;color:var(--azul)} .blog-vazio{text-align:center;padding:40px 0;color:var(--texto)} @media (max-width:980px){.post-grade{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.post-grade{grid-template-columns:1fr}} /* ============================================================================ PÁGINAS INSTITUCIONAIS — .prosa O texto veio do WordPress em HTML corrido:

,

,

,