/** * PIRANOT Institucional — Design System CSS Premium * Baseado no design system da página "Anuncie" * Versão: 1.0.0 */ /* ==========================================  DESIGN TOKENS  ========================================== */ :root {   /* Cores primárias */   --pn-blue-900: #071a52;  --pn-blue-800: #0b2c8f;  --pn-blue-700: #1147d9;  --pn-blue-600: #1a56db;  --pn-cyan: #49c2ff;  --pn-gold: #ffd24a;  /* Cores neutras */   --pn-text: #101828;  --pn-text-light: #667085;  --pn-text-muted: #98a2b3;  --pn-white: #ffffff;  --pn-bg-light: #f6f8fc;  --pn-bg-blue: #f0f7ff;  /* Cores de estado */   --pn-success: #12b76a;  --pn-warning: #f79009;  --pn-error: #f04438;  --pn-info: #0ba5ec;  /* Bordas e sombras */   --pn-border: rgba(16, 24, 40, 0.08);  --pn-border-dark: rgba(16, 24, 40, 0.15);  --pn-shadow: 0 24px 80px rgba(7, 26, 82, 0.16);  --pn-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);  --pn-shadow-hover: 0 18px 44px rgba(7, 26, 82, 0.12);  /* Espaçamentos */   --pn-radius: 24px;  --pn-radius-md: 16px;  --pn-radius-sm: 12px;  --pn-radius-xs: 8px;  --pn-max-width: 1240px;  --pn-max-content: 860px;  --pn-sidebar-width: 280px;  --pn-section-padding: 88px 20px;  /* Tipografia */   --pn-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;  --pn-line-height: 1.5;  --pn-heading-line-height: 1.2;  /* Transições */   --pn-transition: all 0.3s ease;  --pn-transition-fast: all 0.15s ease;} /* ==========================================  RESET BASE  ========================================== */ .pn-institucional-page, .pn-institucional-page *, .pn-institucional-page *::before, .pn-institucional-page *::after {   box-sizing: border-box;} .pn-institucional-page {   margin: 0;  padding: 0;  font-family: var(--pn-font);  font-feature-settings: 'kern' 1, 'liga' 1;  -webkit-font-feature-settings: 'kern' 1, 'liga' 1;  color: var(--pn-text);  background: var(--pn-white);  line-height: var(--pn-line-height);  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-rendering: optimizeLegibility;} /* Prevenir FOUT */ .pn-institucional-page {   font-display: swap;} .pn-institucional-page h1, .pn-institucional-page h2, .pn-institucional-page h3, .pn-institucional-page h4, .pn-institucional-page h5, .pn-institucional-page h6 {   margin: 0;  font-weight: 700;  line-height: var(--pn-heading-line-height);  color: var(--pn-blue-900);} .pn-institucional-page a {   color: var(--pn-blue-700);  text-decoration: none;  transition: var(--pn-transition);} .pn-institucional-page a:hover {   color: var(--pn-cyan);} /* ==========================================  LAYOUT PRINCIPAL  ========================================== */ .pn-institucional-wrapper {   width: 100%;  min-height: 100vh;  display: flex;  flex-direction: column;} /* Container principal com sidebar */ .pn-institucional-container {   display: grid;  grid-template-columns: var(--pn-sidebar-width) 1fr;  gap: 0;  max-width: var(--pn-max-width);  margin: 0 auto;  min-height: calc(100vh - 200px);} @media (max-width: 1024px) {   .pn-institucional-container {     grid-template-columns: 1fr;  } } /* ==========================================  SIDEBAR DE NAVEGAÇÃO  ========================================== */ .pn-institucional-sidebar {   position: sticky;  top: 80px;  height: calc(100vh - 100px);  overflow-y: auto;  background: var(--pn-bg-light);  border-right: 1px solid var(--pn-border);  padding: 40px 0;} @media (max-width: 1024px) {   .pn-institucional-sidebar {     position: relative;    top: 0;    height: auto;    border-right: none;    border-bottom: 1px solid var(--pn-border);    padding: 20px;  } } .pn-sidebar-header {   padding: 0 24px 24px;  border-bottom: 1px solid var(--pn-border);  margin-bottom: 24px;} .pn-sidebar-title {   font-size: 14px;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 1.5px;  color: var(--pn-blue-900);  margin-bottom: 8px;} .pn-sidebar-subtitle {   font-size: 13px;  color: var(--pn-text-light);} /* Menu de navegação */ .pn-nav-menu {   list-style: none;  padding: 0;  margin: 0;} .pn-nav-item {   margin: 0;  padding: 0;} .pn-nav-link {   display: flex;  align-items: center;  gap: 12px;  padding: 14px 24px;  color: var(--pn-text);  font-size: 15px;  font-weight: 500;  text-decoration: none;  transition: var(--pn-transition);  border-left: 3px solid transparent;} .pn-nav-link:hover {   background: rgba(73, 194, 255, 0.08);  color: var(--pn-blue-700);  border-left-color: var(--pn-cyan);} .pn-nav-link.is-active {   background: rgba(73, 194, 255, 0.12);  color: var(--pn-blue-900);  font-weight: 600;  border-left-color: var(--pn-blue-700);} .pn-nav-link.is-active::before {   content: '';  position: absolute;  left: 0;  top: 0;  bottom: 0;  width: 3px;  background: var(--pn-blue-700);} /* Ícones do menu */ .pn-nav-icon {   width: 20px;  height: 20px;  display: flex;  align-items: center;  justify-content: center;  flex-shrink: 0;} .pn-nav-icon svg {   width: 18px;  height: 18px;  fill: currentColor;} /* Separador de seção */ .pn-nav-separator {   padding: 16px 24px 8px;  font-size: 11px;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 1px;  color: var(--pn-text-muted);  margin-top: 16px;  border-top: 1px solid var(--pn-border);} /* ==========================================  CONTEÚDO PRINCIPAL  ========================================== */ .pn-institucional-content {   padding: 60px 60px 80px;  max-width: var(--pn-max-content);} @media (max-width: 768px) {   .pn-institucional-content {     padding: 40px 20px 60px;  } } /* ==========================================  HERO / HEADER DA PÁGINA  ========================================== */ .pn-page-hero {   background: linear-gradient(135deg, var(--pn-blue-900) 0%, var(--pn-blue-800) 100%);  padding: 80px 40px;  margin-bottom: 0;  position: relative;  overflow: hidden;} .pn-page-hero::before {   content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="1200" height="600" fill="url(%23grid)"/></svg>');  pointer-events: none;  opacity: 0.5;} .pn-page-hero-content {   position: relative;  z-index: 1;  max-width: var(--pn-max-width);  margin: 0 auto;} .pn-page-kicker {   display: inline-block;  font-size: 13px;  font-weight: 700;  letter-spacing: 1.5px;  text-transform: uppercase;  color: var(--pn-cyan);  margin-bottom: 16px;} .pn-page-title {   font-size: clamp(32px, 5vw, 56px);  font-weight: 900;  color: var(--pn-white);  margin-bottom: 20px;  line-height: 1.1;} .pn-page-subtitle {   font-size: 18px;  color: rgba(255, 255, 255, 0.9);  max-width: 640px;  line-height: 1.6;} .pn-page-meta {   display: flex;  gap: 24px;  margin-top: 24px;  flex-wrap: wrap;} .pn-page-meta-item {   display: flex;  align-items: center;  gap: 8px;  font-size: 14px;  color: rgba(255, 255, 255, 0.7);} .pn-page-meta-item svg {   width: 16px;  height: 16px;  fill: currentColor;} /* ==========================================  SEÇÕES DE CONTEÚDO  ========================================== */ .pn-section {   padding: 60px 0;  border-bottom: 1px solid var(--pn-border);} .pn-section:last-child {   border-bottom: none;} .pn-section-header {   margin-bottom: 32px;} .pn-section-title {   font-size: clamp(24px, 4vw, 36px);  margin-bottom: 12px;  color: var(--pn-blue-900);} .pn-section-intro {   font-size: 18px;  color: var(--pn-text-light);  max-width: 680px;} /* ==========================================  TIPOGRAFIA DE CONTEÚDO  ========================================== */ .pn-content {   font-size: 16px;  line-height: 1.7;  color: var(--pn-text);} .pn-content p {   margin-bottom: 20px;} .pn-content h2 {   font-size: 28px;  margin: 48px 0 20px;  padding-top: 24px;  border-top: 1px solid var(--pn-border);} .pn-content h2:first-child {   margin-top: 0;  padding-top: 0;  border-top: none;} .pn-content h3 {   font-size: 22px;  margin: 36px 0 16px;  color: var(--pn-blue-800);} .pn-content h4 {   font-size: 18px;  margin: 28px 0 12px;  color: var(--pn-blue-700);} .pn-content ul, .pn-content ol {   margin: 16px 0;  padding-left: 28px;} .pn-content li {   margin-bottom: 10px;  line-height: 1.6;} .pn-content li::marker {   color: var(--pn-cyan);  font-weight: 600;} .pn-content blockquote {   margin: 32px 0;  padding: 24px 28px;  background: var(--pn-bg-blue);  border-left: 4px solid var(--pn-cyan);  border-radius: 0 var(--pn-radius-xs) var(--pn-radius-xs) 0;} .pn-content blockquote p:last-child {   margin-bottom: 0;} .pn-content a {   color: var(--pn-blue-700);  text-decoration: underline;  text-decoration-thickness: 1px;  text-underline-offset: 2px;} .pn-content a:hover {   color: var(--pn-cyan);  text-decoration-color: var(--pn-cyan);} .pn-content strong {   font-weight: 600;  color: var(--pn-blue-900);} .pn-content em {   font-style: italic;  color: var(--pn-text-light);} /* ==========================================  SUMÁRIO DE DOCUMENTO (para páginas jurídicas)  ========================================== */ .pn-document-toc {   position: sticky;  top: 100px;  background: var(--pn-bg-light);  border: 1px solid var(--pn-border);  border-radius: var(--pn-radius-md);  padding: 24px;  margin-bottom: 40px;} .pn-toc-title {   font-size: 14px;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 1px;  color: var(--pn-blue-900);  margin-bottom: 16px;  display: flex;  align-items: center;  gap: 8px;} .pn-toc-title svg {   width: 18px;  height: 18px;  fill: currentColor;} .pn-toc-list {   list-style: none;  padding: 0;  margin: 0;} .pn-toc-item {   margin: 0;  padding: 0;} .pn-toc-link {   display: block;  padding: 10px 0 10px 16px;  color: var(--pn-text-light);  font-size: 14px;  text-decoration: none;  border-left: 2px solid var(--pn-border);  transition: var(--pn-transition);} .pn-toc-link:hover, .pn-toc-link.is-active {   color: var(--pn-blue-700);  border-left-color: var(--pn-cyan);  background: rgba(73, 194, 255, 0.05);} .pn-toc-link.is-active {   font-weight: 600;} /* Indentação para subseções */ .pn-toc-item[data-level="2"] .pn-toc-link {   padding-left: 32px;} .pn-toc-item[data-level="3"] .pn-toc-link {   padding-left: 48px;} /* ==========================================  BLOCOS ESPECIAIS  ========================================== */ /* Bloco de destaque */ .pn-block-highlight {   background: linear-gradient(135deg, var(--pn-bg-blue) 0%, rgba(73, 194, 255, 0.08) 100%);  border: 1px solid rgba(73, 194, 255, 0.2);  border-radius: var(--pn-radius-md);  padding: 28px 32px;  margin: 32px 0;} .pn-block-highlight-title {   font-size: 18px;  font-weight: 700;  color: var(--pn-blue-900);  margin-bottom: 12px;  display: flex;  align-items: center;  gap: 10px;} .pn-block-highlight-content {   color: var(--pn-text);  line-height: 1.6;} /* Bloco de citação */ .pn-block-quote {   background: var(--pn-bg-light);  border-left: 4px solid var(--pn-gold);  padding: 24px 28px;  margin: 32px 0;  border-radius: 0 var(--pn-radius-xs) var(--pn-radius-xs) 0;} .pn-block-quote-text {   font-size: 18px;  font-style: italic;  color: var(--pn-text);  margin-bottom: 12px;} .pn-block-quote-author {   font-size: 14px;  color: var(--pn-text-light);  font-weight: 600;} /* Bloco de informação */ .pn-block-info {   background: rgba(11, 165, 236, 0.08);  border: 1px solid rgba(11, 165, 236, 0.2);  border-radius: var(--pn-radius-sm);  padding: 24px;  margin: 24px 0;} .pn-block-info-icon {   width: 24px;  height: 24px;  fill: var(--pn-info);  margin-right: 12px;  vertical-align: middle;} /* Bloco de aviso */ .pn-block-warning {   background: rgba(247, 144, 9, 0.08);  border: 1px solid rgba(247, 144, 9, 0.2);  border-radius: var(--pn-radius-sm);  padding: 24px;  margin: 24px 0;} .pn-block-warning-icon {   width: 24px;  height: 24px;  fill: var(--pn-warning);  margin-right: 12px;  vertical-align: middle;} /* ==========================================  FAQ ACCORDION  ========================================== */ .pn-faq-section {   margin-top: 48px;} .pn-faq-title {   font-size: 24px;  margin-bottom: 24px;  color: var(--pn-blue-900);} .pn-faq-list {   display: flex;  flex-direction: column;  gap: 12px;} .pn-faq-item {   border: 1px solid var(--pn-border);  border-radius: var(--pn-radius-sm);  overflow: hidden;  transition: var(--pn-transition);} .pn-faq-item:hover {   border-color: var(--pn-cyan);} .pn-faq-item.is-open {   border-color: var(--pn-blue-700);} .pn-faq-question {   display: flex;  align-items: center;  justify-content: space-between;  padding: 20px 24px;  background: var(--pn-white);  cursor: pointer;  font-size: 16px;  font-weight: 600;  color: var(--pn-blue-900);  transition: var(--pn-transition);} .pn-faq-question:hover {   background: var(--pn-bg-light);} .pn-faq-icon {   width: 20px;  height: 20px;  fill: var(--pn-text-light);  transition: transform var(--pn-transition);} .pn-faq-item.is-open .pn-faq-icon {   transform: rotate(180deg);} .pn-faq-answer {   padding: 0 24px 24px;  color: var(--pn-text);  line-height: 1.7;  display: none;} .pn-faq-item.is-open .pn-faq-answer {   display: block;} /* ==========================================  CTA (CALL TO ACTION)  ========================================== */ .pn-cta-block {   background: linear-gradient(135deg, var(--pn-blue-900) 0%, var(--pn-blue-800) 100%);  border-radius: var(--pn-radius);  padding: 48px;  margin: 48px 0;  text-align: center;  position: relative;  overflow: hidden;} .pn-cta-block::before {   content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><defs><pattern id="ctaGrid" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="1200" height="400" fill="url(%23ctaGrid)"/></svg>');  pointer-events: none;} .pn-cta-content {   position: relative;  z-index: 1;} .pn-cta-title {   font-size: 28px;  font-weight: 700;  color: var(--pn-white);  margin-bottom: 12px;} .pn-cta-text {   font-size: 16px;  color: rgba(255, 255, 255, 0.9);  margin-bottom: 24px;} .pn-cta-button {   display: inline-flex;  align-items: center;  gap: 10px;  padding: 16px 32px;  background: var(--pn-cyan);  color: var(--pn-blue-900);  font-size: 16px;  font-weight: 700;  border-radius: var(--pn-radius-sm);  text-decoration: none;  transition: var(--pn-transition);} .pn-cta-button:hover {   background: var(--pn-white);  color: var(--pn-blue-900);  transform: translateY(-2px);  box-shadow: 0 12px 24px rgba(73, 194, 255, 0.4);} /* ==========================================  CONTATO / FORMULÁRIO  ========================================== */ .pn-contact-grid {   display: grid;  grid-template-columns: 1fr 1fr;  gap: 48px;  margin-top: 40px;} @media (max-width: 768px) {   .pn-contact-grid {     grid-template-columns: 1fr;  } } .pn-contact-info {   display: flex;  flex-direction: column;  gap: 24px;} .pn-contact-item {   display: flex;  align-items: flex-start;  gap: 16px;} .pn-contact-icon {   width: 48px;  height: 48px;  background: var(--pn-bg-blue);  border-radius: var(--pn-radius-sm);  display: flex;  align-items: center;  justify-content: center;  flex-shrink: 0;} .pn-contact-icon svg {   width: 24px;  height: 24px;  fill: var(--pn-blue-700);} .pn-contact-label {   font-size: 13px;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 0.5px;  color: var(--pn-text-muted);  margin-bottom: 4px;} .pn-contact-value {   font-size: 16px;  color: var(--pn-text);  font-weight: 500;} .pn-contact-value a {   color: var(--pn-blue-700);} /* ==========================================  CARDS E GRID  ========================================== */ .pn-cards-grid {   display: grid;  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  gap: 24px;  margin: 32px 0;} .pn-card {   background: var(--pn-white);  border: 1px solid var(--pn-border);  border-radius: var(--pn-radius-md);  padding: 28px;  transition: var(--pn-transition);} .pn-card:hover {   border-color: var(--pn-cyan);  box-shadow: var(--pn-shadow-hover);  transform: translateY(-4px);} .pn-card-icon {   width: 48px;  height: 48px;  background: var(--pn-bg-blue);  border-radius: var(--pn-radius-sm);  display: flex;  align-items: center;  justify-content: center;  margin-bottom: 16px;} .pn-card-icon svg {   width: 24px;  height: 24px;  fill: var(--pn-blue-700);} .pn-card-title {   font-size: 18px;  font-weight: 700;  color: var(--pn-blue-900);  margin-bottom: 8px;} .pn-card-text {   font-size: 14px;  color: var(--pn-text-light);  line-height: 1.6;} /* ==========================================  FOOTER DA PÁGINA  ========================================== */ .pn-page-footer {   margin-top: 60px;  padding-top: 32px;  border-top: 1px solid var(--pn-border);} .pn-page-footer-content {   display: flex;  justify-content: space-between;  align-items: center;  flex-wrap: wrap;  gap: 16px;} .pn-page-date {   font-size: 13px;  color: var(--pn-text-muted);} .pn-page-share {   display: flex;  align-items: center;  gap: 12px;} .pn-page-share-label {   font-size: 13px;  color: var(--pn-text-light);} .pn-page-share-links {   display: flex;  gap: 8px;} .pn-share-link {   width: 36px;  height: 36px;  display: flex;  align-items: center;  justify-content: center;  background: var(--pn-bg-light);  border-radius: 50%;  transition: var(--pn-transition);} .pn-share-link:hover {   background: var(--pn-blue-700);} .pn-share-link:hover svg {   fill: var(--pn-white);} .pn-share-link svg {   width: 18px;  height: 18px;  fill: var(--pn-text-light);} /* ==========================================  RESPONSIVIDADE ADICIONAL  ========================================== */ @media (max-width: 640px) {   .pn-page-hero {     padding: 48px 20px;  }   .pn-page-title {     font-size: 28px;  }   .pn-content h2 {     font-size: 22px;  }   .pn-content h3 {     font-size: 18px;  }   .pn-cta-block {     padding: 32px 24px;  }   .pn-cta-title {     font-size: 22px;  }   .pn-page-footer-content {     flex-direction: column;    text-align: center;  } } /* ==========================================  PRINT STYLES  ========================================== */ @media print {   .pn-institucional-sidebar,   .pn-page-share,   .pn-cta-block {     display: none !important;  }   .pn-institucional-container {     grid-template-columns: 1fr;  }   .pn-content {     font-size: 12pt;    line-height: 1.5;  } } /* ==========================================  DARK MODE SUPPORT (opcional)  ========================================== */ @media (prefers-color-scheme: dark) {   .pn-institucional-page.auto-dark {     --pn-text: #f0f0f0;    --pn-text-light: #a0a0a0;    --pn-bg-light: #1a1a2e;    --pn-bg-blue: #0a1628;    --pn-white: #0f172a;    --pn-border: rgba(255, 255, 255, 0.1);  } } /* ==========================================  ACCESSIBILITY  ========================================== */ .pn-sr-only {   position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border: 0;} /* Focus styles */ .pn-institucional-page a:focus, .pn-institucional-page button:focus {   outline: 2px solid var(--pn-cyan);  outline-offset: 2px;} /* Reduced motion */ @media (prefers-reduced-motion: reduce) {   .pn-institucional-page,   .pn-institucional-page * {     transition: none !important;    animation: none !important;  } } /* Skip link */ .pn-skip-link {   position: absolute;  top: -100px;  left: 0;  background: var(--pn-blue-900);  color: var(--pn-white);  padding: 16px 24px;  z-index: 9999;  text-decoration: none;  font-weight: 600;} .pn-skip-link:focus {   top: 0;} /* ==========================================  MELHORIAS CRÍTICAS (Council Review)  ========================================== */ /* Prefixos WebKit para Glassmorphism */ .pn-hero-card, .pn-card, .pn-block-highlight {   -webkit-backdrop-filter: blur(16px);  backdrop-filter: blur(16px);} /* Fallback para navegadores sem backdrop-filter */ @supports not (backdrop-filter: blur(1px)) {   .pn-hero-card {     background: rgba(255, 255, 255, 0.98);  }   .pn-card {     background: var(--pn-white);    box-shadow: var(--pn-shadow-sm);  } } /* ==========================================  PRINT STYLES (Docs Jurídicos)  ========================================== */ @media print {   .pn-institucional-sidebar,   .pn-page-share,   .pn-cta-block,   .pn-skip-link,   .pn-document-toc {     display: none !important;  }   .pn-institucional-container {     display: block !important;  }   .pn-institucional-content {     padding: 0 !important;    max-width: 100% !important;  }   .pn-page-hero {     background: none !important;    padding: 20px 0 !important;  }   .pn-page-hero::before {     display: none !important;  }   .pn-page-title {     color: #000 !important;  }   .pn-page-kicker,   .pn-page-subtitle {     color: #333 !important;  }   .pn-content {     font-size: 11pt !important;    line-height: 1.5 !important;    color: #000 !important;  }   .pn-content h2 {     page-break-before: auto;    page-break-after: avoid;    border-top: 1px solid #ccc !important;    padding-top: 15pt !important;    margin-top: 20pt !important;  }   .pn-content h3 {     page-break-after: avoid;  }   .pn-content a {     color: #000 !important;    text-decoration: underline;  }   .pn-content a[href^="http"]::after {     content: " (" attr(href) ")";    font-size: 9pt;    color: #666;  }   .pn-card,   .pn-block-highlight {     background: #f9f9f9 !important;    border: 1px solid #ccc !important;    box-shadow: none !important;    -webkit-backdrop-filter: none !important;    backdrop-filter: none !important;  } } /* ==========================================  DARK MODE (Sistema)  ========================================== */ @media (prefers-color-scheme: dark) {   .pn-institucional-page {     --pn-text: #f0f0f0;    --pn-text-light: #a0a0a0;    --pn-text-muted: #6b6b6b;    --pn-bg-light: #1a1a2e;    --pn-bg-blue: #0a1628;    --pn-white: #0f172a;    --pn-border: rgba(255, 255, 255, 0.1);    --pn-border-dark: rgba(255, 255, 255, 0.2);  }   .pn-page-hero {     background: linear-gradient(135deg, #0a1628 0%, #071a52 100%);  }   .pn-page-title {     color: #fff;  }   .pn-page-kicker {     color: var(--pn-cyan);  }   .pn-page-subtitle {     color: rgba(255, 255, 255, 0.85);  }   .pn-institucional-sidebar {     background: var(--pn-bg-light);    border-right-color: var(--pn-border);  }   .pn-nav-link {     color: var(--pn-text-light);  }   .pn-nav-link:hover {     background: rgba(73, 194, 255, 0.15);    border-left-color: var(--pn-cyan);  }   .pn-nav-link.is-active {     background: rgba(73, 194, 255, 0.2);    color: #fff;  }   .pn-content {     color: var(--pn-text);  }   .pn-content h2,   .pn-content h3 {     color: #fff;  }   .pn-card {     background: rgba(255, 255, 255, 0.05);    border-color: rgba(255, 255, 255, 0.1);  }   .pn-card:hover {     background: rgba(255, 255, 255, 0.08);    border-color: var(--pn-cyan);  }   .pn-block-highlight {     background: rgba(73, 194, 255, 0.1);    border-color: rgba(73, 194, 255, 0.2);  }   .pn-faq-item {     background: rgba(255, 255, 255, 0.03);    border-color: rgba(255, 255, 255, 0.1);  }   .pn-faq-question {     background: transparent;    color: #fff;  }   .pn-document-toc {     background: rgba(255, 255, 255, 0.03);    border-color: rgba(255, 255, 255, 0.1);  } } /* ==========================================  FAQ NATIVO (details/summary)  ========================================== */ .pn-faq-native {   margin: 32px 0;} .pn-faq-native details {   border: 1px solid var(--pn-border);  border-radius: var(--pn-radius-sm);  margin-bottom: 12px;  background: var(--pn-white);} .pn-faq-native details[open] {   border-color: var(--pn-cyan);} .pn-faq-native summary {   padding: 20px 24px;  font-weight: 600;  color: var(--pn-blue-900);  cursor: pointer;  list-style: none;  display: flex;  justify-content: space-between;  align-items: center;  transition: var(--pn-transition);} .pn-faq-native summary::-webkit-details-marker {   display: none;} .pn-faq-native summary::after {   content: '';  width: 20px;  height: 20px;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23667085'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");  background-size: contain;  transition: transform var(--pn-transition);} .pn-faq-native details[open] summary::after {   transform: rotate(180deg);} .pn-faq-native summary:hover {   background: var(--pn-bg-light);} .pn-faq-native details > div {   padding: 0 24px 24px;  color: var(--pn-text-light);  line-height: 1.7;} /* ==========================================  DATA DE ATUALIZAÇÃO (Docs Jurídicos)  ========================================== */ .pn-last-updated {   display: inline-flex;  align-items: center;  gap: 8px;  padding: 8px 16px;  background: var(--pn-bg-blue);  border-radius: var(--pn-radius-xs);  font-size: 13px;  color: var(--pn-text-light);  margin-bottom: 24px;} .pn-last-updated svg {   width: 16px;  height: 16px;  stroke: currentColor;} .pn-last-updated strong {   color: var(--pn-blue-700);} /* ==========================================  READING PROGRESS BAR  ========================================== */ .pn-reading-progress {   position: fixed;  top: 0;  left: 0;  width: 0%;  height: 3px;  background: linear-gradient(90deg, var(--pn-cyan), var(--pn-blue-700));  z-index: 9999;  transition: width 0.1s ease-out;} /* ==========================================  MOBILE MENU TOGGLE  ========================================== */ .pn-mobile-toggle {   display: none;  position: fixed;  bottom: 20px;  right: 20px;  width: 56px;  height: 56px;  border-radius: 50%;  background: var(--pn-blue-900);  color: #fff;  border: none;  box-shadow: 0 4px 20px rgba(7, 26, 82, 0.3);  z-index: 1000;  cursor: pointer;  align-items: center;  justify-content: center;  transition: var(--pn-transition);} .pn-mobile-toggle:hover {   background: var(--pn-blue-700);  transform: scale(1.05);} .pn-mobile-toggle svg {   width: 24px;  height: 24px;  stroke: currentColor;} @media (max-width: 1024px) {   .pn-mobile-toggle {     display: flex;  }   .pn-institucional-sidebar {     position: fixed;    top: 0;    left: -100%;    width: 280px;    height: 100vh;    z-index: 1001;    transition: transform 0.3s ease;    padding-top: 60px;  }   .pn-institucional-sidebar.is-open {     transform: translateX(100%);  }   .pn-sidebar-overlay {     display: none;    position: fixed;    top: 0;    left: 0;    right: 0;    bottom: 0;    background: rgba(0, 0, 0, 0.5);    z-index: 1000;  }   .pn-sidebar-overlay.is-active {     display: block;  } } /* ==========================================  TIPOGRAFIA ESCALÁVEL (Typography Scale)  ========================================== */ .pn-content {   font-size: clamp(1rem, 1rem + 0.2vw, 1.125rem);} .pn-content h2 {   font-size: clamp(1.5rem, 1.5rem + 1vw, 2rem);} .pn-content h3 {   font-size: clamp(1.25rem, 1.25rem + 0.5vw, 1.5rem);} .pn-content h4 {   font-size: clamp(1.125rem, 1.125rem + 0.3vw, 1.25rem);} /* ==========================================  ACCESSIBILITY IMPROVEMENTS  ========================================== */ @media (prefers-reduced-motion: reduce) {   .pn-institucional-page,   .pn-institucional-page * {     transition: none !important;    animation: none !important;  }   .pn-reading-progress {     transition: none !important;  } } /* Focus visible melhorado */ .pn-institucional-page a:focus-visible, .pn-institucional-page button:focus-visible, .pn-institucional-page summary:focus-visible {   outline: 2px solid var(--pn-cyan);  outline-offset: 3px;  border-radius: 4px;} /* Contraste para links */ .pn-content a:focus {   outline: 2px solid var(--pn-cyan);  outline-offset: 2px;} /* Skip link aprimorado */ .pn-skip-link {   position: absolute;  top: -100px;  left: 50%;  transform: translateX(-50%);  background: var(--pn-blue-900);  color: #fff;  padding: 12px 24px;  border-radius: var(--pn-radius-xs);  font-weight: 600;  text-decoration: none;  z-index: 10000;  transition: top 0.3s ease;} .pn-skip-link:focus {   top: 10px;} /* ==========================================  SCROLL BEHAVIOR (CSS-only)  ========================================== */ .pn-institucional-page {   scroll-behavior: smooth;} /* Scrollbar customizada */ .pn-institucional-sidebar::-webkit-scrollbar {   width: 6px;} .pn-institucional-sidebar::-webkit-scrollbar-track {   background: transparent;} .pn-institucional-sidebar::-webkit-scrollbar-thumb {   background: var(--pn-border-dark);  border-radius: 3px;} .pn-institucional-sidebar::-webkit-scrollbar-thumb:hover {   background: var(--pn-text-muted);}