wagtail-enap-designsystem 1.2.1.203__py3-none-any.whl → 1.2.1.205__py3-none-any.whl

enap_designsystem/static/enap_designsystem/blocks/capsulas.css

@@ -278,21 +278,6 @@
     margin-top: 3rem;
 }
 
-.btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 0.8rem 1.5rem;
-    border-radius: 6px;
-    text-decoration: none;
-    font-weight: 600;
-    transition: all 0.2s ease;
-    cursor: pointer;
-    border: none;
-    font-family: inherit;
-    font-size: 1rem;
-}
-
 
 /* Responsividade */
 @media (max-width: 768px) {
@@ -478,15 +463,7 @@
   }
   
   /* Menu e cabeçalho */
-  .menu {
-    display: flex;
-    align-items: center;
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 0.5rem 1rem;
-    gap: 1.5rem;
-    color: white;
-  }
+
   
   .menu a {
     color: white;
@@ -665,14 +642,7 @@
     display: flex;
     align-items: center;
   }
-  
-  /* Estilização moderna dos checkboxes */
-  .checkbox-item input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
+
   
   .checkbox-label {
     position: relative;
@@ -698,22 +668,7 @@
     transition: all 0.15s ease;
   }
   
-  .checkbox-item input[type="checkbox"]:checked + .checkbox-label:before {
-    background-color: #024248;
-    border-color: var(--primary-color);
-  }
-  
-  .checkbox-item input[type="checkbox"]:checked + .checkbox-label:after {
-    content: '';
-    position: absolute;
-    left: 0.35rem;
-    top: 0.45rem;
-    width: 0.35rem;
-    height: 0.6rem;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-  }
+
   
   .checkbox-item:hover .checkbox-label:before {
     border-color: var(--primary-color);
@@ -1030,11 +985,7 @@
       padding: 2rem 0;
     }
     
-    .menu {
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-  
+
     .logo {
       margin-right: 0;
       margin-bottom: 0.5rem;
@@ -1500,14 +1451,6 @@
     font-size: 1.125rem;
   }
   
-  /* Menu GovBR */
-  .menu {
-    display: flex;
-    align-items: center;
-    padding: 0.75rem 2rem;
-    color: white;
-  }
-  
   .menu a {
     color: white;
     text-decoration: none;
@@ -1553,11 +1496,7 @@
     .acoes-resultado {
       flex-direction: column;
     }
-    
-    .menu {
-      flex-wrap: wrap;
-      gap: 0.5rem;
-    }
+
     
     .separator {
       display: none;
@@ -2421,6 +2360,16 @@
         position: relative;
         overflow: hidden;
     }
+
+    .card-rota {
+        background-color: var(--cor-fundo);
+        border-radius: var(--borda-raio-grande);
+        box-shadow: var(--sombra-suave);
+        overflow: hidden;
+        transition: var(--transicao-media);
+        border: 1px solid rgba(0, 0, 0, 0.05);
+        margin-bottom: var(--espacamento-grande);
+    }
     
     .recurso-card-botao::before {
         content: '';
@@ -3307,4 +3256,3956 @@ nav a:hover, nav a:focus {
         width: 32px;
         height: 32px;
     }
-}
+}
+
+
+
+
+
+
+
+/* ============================================
+   LAYOUT GERAL - Estilo W3C/WCAG
+   ============================================ */
+
+   .wrapper-capsulas-page {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+    background-color: #fff;
+}
+
+/* ============================================
+   BREADCRUMB E NAVEGAÇÃO SUPERIOR
+   ============================================ */
+
+.capsulas-header-bar {
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #dee2e6;
+    padding: 1rem 0;
+}
+
+.capsulas-breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.capsulas-back-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #006969;
+    text-decoration: none;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.capsulas-back-btn:hover {
+    background-color: #e9ecef;
+    text-decoration: underline;
+}
+
+.capsulas-back-btn i {
+    font-size: 0.85rem;
+}
+
+.capsulas-separator {
+    color: #6c757d;
+}
+
+.capsulas-current {
+    color: #495057;
+    font-weight: 700;
+}
+
+/* ============================================
+   LAYOUT PRINCIPAL: SIDEBAR + CONTEÚDO
+   ============================================ */
+
+.capsulas-layout {
+    display: grid;
+    grid-template-columns: 250px 1fr;
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+    position: relative;
+}
+
+@media (max-width: 992px) {
+    .capsulas-layout {
+        grid-template-columns: 200px 1fr;
+        gap: 1.5rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .capsulas-layout {
+        grid-template-columns: 1fr;
+    }
+    
+    .capsulas-sidebar {
+        position: fixed;
+        width: 100%;
+        border-right: none;
+        border-bottom: 1px solid #dee2e6;
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+        top: 90vh;
+        background-color: white;
+    }
+}
+
+/* ============================================
+   SIDEBAR COM ÍNDICE FIXO
+   ============================================ */
+
+.capsulas-sidebar {
+    position: relative;
+    top: 1rem;
+    height: fit-content;
+    border-right: 1px solid #dee2e6;
+    padding-right: 1.5rem;
+}
+
+.capsulas-sidebar-content {
+    padding: 0;
+    position: fixed;
+}
+
+.capsulas-sidebar-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #495057;
+    margin: 0 0 1rem 0;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.capsulas-index ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.capsulas-index li {
+  padding-left: 0;
+}
+
+.capsulas-index-link {
+    display: block;
+    padding: 0.5rem 0.75rem;
+    color: #007D7A;
+    font-weight: 600;
+    text-decoration: none;
+    border-left: 3px solid transparent;
+    font-size: 0.95rem;
+    transition: all 0.2s;
+}
+
+.capsulas-index-link:hover {
+    background-color: #f8f9fa;
+    border-left-color: #006969;
+    padding-left: 1rem;
+}
+
+.capsulas-index-link.active {
+    background-color: #024248;
+    font-weight: 600;
+    color: white;
+    border-radius: 20px;
+    border-left: none;
+}
+
+/* ============================================
+   CONTEÚDO PRINCIPAL
+   ============================================ */
+
+.capsulas-main-content {
+    max-width: 800px;
+}
+
+/* Cabeçalho da página */
+.capsulas-page-header {
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 2px solid #dee2e6;
+}
+
+.capsulas-priority-badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    background-color: #d1ecf1;
+    color: #0c5460;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+}
+
+.capsulas-page-header h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #212529;
+    margin: 0.5rem 0;
+    line-height: 1.2;
+}
+
+.capsulas-summary {
+    font-size: 1.1rem;
+    color: #495057;
+    margin: 1rem 0 0 0;
+    line-height: 1.6;
+}
+
+/* ============================================
+   SEÇÕES DE CONTEÚDO
+   ============================================ */
+
+.capsulas-section {
+    margin-bottom: 3rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.capsulas-section:last-child {
+    border-bottom: none;
+}
+
+.capsulas-section h2 {
+    font-size: 1.75rem;
+    font-weight: 600;
+    color: #024248;
+    margin: 0 0 1rem 0;
+    padding-bottom: 0.5rem;
+}
+
+.capsulas-section-content {
+    font-size: 1rem;
+    line-height: 1.7;
+    color: #333;
+}
+
+.header-bg{
+    background-color: #F5F7FA;
+   
+}
+
+.capsulas-section-content p {
+    margin-bottom: 1rem;
+}
+
+.capsulas-section-content ul,
+.capsulas-section-content ol {
+    margin: 1rem 0;
+}
+
+.capsulas-section-content li {
+    margin-bottom: 0.5rem;
+}
+
+.capsulas-section-content a {
+    color: #0056b3;
+    text-decoration: underline;
+}
+
+.capsulas-section-content a:hover {
+    color: #006969;
+}
+
+.capsulas-section-content code {
+    background-color: #f8f9fa;
+    padding: 0.2rem 0.4rem;
+    border-radius: 3px;
+    font-family: "Courier New", monospace;
+    font-size: 0.9em;
+    color: #e83e8c;
+}
+
+.capsulas-section-content pre {
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    padding: 1rem;
+    overflow-x: auto;
+    margin: 1rem 0;
+}
+
+.capsulas-section-content pre code {
+    background: none;
+    padding: 0;
+    color: #212529;
+}
+
+/* ============================================
+   DETAILS/ACCORDION (Nativo HTML)
+   ============================================ */
+
+.capsulas-details {
+    margin: 1.5rem 0;
+    border: 1px solid #dee2e6;
+    border-radius: 10px;
+    background-color: #f8f9fa;
+}
+
+.capsulas-details summary {
+    padding: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    user-select: none;
+    list-style: none;
+    color: #007D7A;
+    transition: background-color 0.2s;
+}
+
+.capsulas-details summary::-webkit-details-marker {
+    display: none;
+}
+
+.capsulas-details summary::before {
+    content: "▶ ";
+    display: inline-block;
+    margin-right: 0.5rem;
+    transition: transform 0.2s;
+}
+
+.capsulas-details[open] summary::before {
+    transform: rotate(90deg);
+}
+
+.capsulas-details summary:hover {
+    background-color: #e9ecef;
+}
+
+.capsulas-details-content {
+    padding: 1rem;
+    background-color: #fff;
+    border-top: 1px solid #dee2e6;
+}
+
+/* ============================================
+   LISTA DE CÁPSULAS RELACIONADAS
+   ============================================ */
+
+.capsulas-related-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.capsulas-related-list li {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background-color: #f8f9fa;
+    border-left: 4px solid #007D7A;
+    border-radius: 4px;
+}
+
+.capsulas-related-list a {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #007D7A;
+    text-decoration: none;
+}
+
+.capsulas-related-list a:hover {
+    text-decoration: underline;
+}
+
+.capsulas-related-list p {
+    margin: 0.5rem 0 0 0;
+    color: #495057;
+    font-size: 0.95rem;
+}
+
+/* ============================================
+   BOTÃO VOLTAR AO TOPO
+   ============================================ */
+
+.capsulas-back-to-top {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    width: 50px;
+    height: 50px;
+    background-color: #0056b3;
+    color: #fff;
+    border: none;
+    border-radius: 50%;
+    font-size: 1.2rem;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+}
+
+.capsulas-back-to-top:hover {
+    background-color: #004085;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+.capsulas-back-to-top.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* ============================================
+   UTILITÁRIOS E ACESSIBILIDADE
+   ============================================ */
+
+.capsulas-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+/* Skip link para leitores de tela */
+.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 visível para navegação por teclado */
+a:focus,
+button:focus,
+summary:focus,
+.capsulas-index-link:focus {
+    outline: 2px solid #0056b3;
+    outline-offset: 2px;
+}
+
+/* ============================================
+   RESPONSIVIDADE
+   ============================================ */
+
+@media (max-width: 768px) {
+    .capsulas-page-header h1 {
+        font-size: 1.5rem;
+    }
+    
+    .capsulas-section h2 {
+        font-size: 1.5rem;
+    }
+
+    .capsulas-sidebar-content {
+      padding: 0;
+      position: relative;
+  }
+    
+    .capsulas-back-to-top {
+        bottom: 1rem;
+        right: 1rem;
+        width: 45px;
+        height: 45px;
+        font-size: 1rem;
+    }
+
+    .capsulas-sidebar {
+      position: fixed;
+      width: 100%;
+      padding: 1rem 0 1rem 1rem;
+      top: 90vh;
+      background-color: #d1ecf1;
+      z-index: 9999;
+      box-shadow:1px solid #dee2e6      ;
+  }
+}
+
+
+
+
+
+
+/* Sistema de Cápsulas de Acessibilidade - Rota page
+ */
+
+ :root {
+    /* Cores principais */
+    --cor-primaria: #024248;
+    --cor-primaria-clara: rgba(2, 66, 72, 0.8);
+    --cor-primaria-muito-clara: rgba(2, 66, 72, 0.1);
+    --cor-secundaria: #EBEFF5;
+    --cor-fundo: #FFFFFF;
+    --cor-texto: #212B36;
+    --cor-texto-secundario: #637381;
+    --cor-texto-invertido: #FFFFFF;
+    
+    /* Cores de apoio */
+    --cor-amarelo: #FFB100;
+    --cor-verde: #36B37E;
+    --cor-azul: #2684FF;
+    --cor-roxo: #9D7BDA;
+    
+    /* Cores de estado */
+    --cor-foco: #0066CC;
+    --cor-erro: #CF2A2A;
+    --cor-sucesso: #287D3C;
+    
+    /* Espaçamentos */
+    --espacamento-xs: 0.25rem;
+    --espacamento-pequeno: 0.5rem;
+    --espacamento-medio: 1rem;
+    --espacamento-grande: 1.5rem;
+    --espacamento-xl: 2rem;
+    --espacamento-xxl: 3rem;
+    
+    /* Bordas e sombras */
+    --borda-raio-sm: 4px;
+    --borda-raio: 8px;
+    --borda-raio-grande: 12px;
+    --borda-raio-xl: 20px;
+    --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.05);
+    --sombra-media: 0 8px 16px rgba(0, 0, 0, 0.08);
+    --sombra-forte: 0 12px 24px rgba(0, 0, 0, 0.12);
+    
+    /* Transições */
+    --transicao-rapida: 0.2s ease-in-out;
+    --transicao-media: 0.3s ease-in-out;
+  
+    /* Tipografia */
+    --fonte-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
+    --fonte-tamanho-base: 16px;
+    --fonte-tamanho-pequeno: 0.875rem;
+    --fonte-tamanho-medio: 1rem;
+    --fonte-tamanho-grande: 1.25rem;
+    --fonte-tamanho-xl: 1.5rem;
+    --fonte-tamanho-xxl: 2rem;
+    --linha-altura: 1.6;
+  }
+  
+  
+  .container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 var(--espacamento-medio);
+  }
+  
+  /* Acessibilidade - Foco */
+  :focus {
+    outline: 3px solid var(--cor-foco);
+    outline-offset: 2px;
+  }
+  
+  /* Cards e Layout moderno */
+  .card {
+    background-color: var(--cor-fundo);
+    border-radius: var(--borda-raio-grande);
+    box-shadow: var(--sombra-suave);
+    overflow: hidden;
+    transition: var(--transicao-media);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    margin-bottom: var(--espacamento-grande);
+  }
+  
+  .card:hover {
+    box-shadow: var(--sombra-media);
+    transform: translateY(-2px);
+  }
+  
+  .card-header {
+    padding: var(--espacamento-grande);
+    border-bottom: 1px solid var(--cor-secundaria);
+  }
+  
+  .card-body-rota {
+    padding: var(--espacamento-grande);
+  }
+
+  .fa-universal-access {
+    color: var(--cor-primaria);
+    font-size: 60px;
+    margin-bottom: 10px;
+  }
+  
+  .card-footer {
+    padding: var(--espacamento-grande);
+    border-top: 1px solid var(--cor-secundaria);
+  }
+  
+  /* Layout da página principal */
+  .main-layout {
+    display: grid;
+    grid-template-columns: 68px 1fr;
+    min-height: 100vh;
+  }
+  
+  .main-content-capsulas {
+    padding: var(--espacamento-xl);
+    background-color: #EBEFF5;
+    min-height: 100vh;
+  }
+  
+  /* Cabeçalho principal */
+  .main-header {
+    background-color: var(--cor-fundo);
+    box-shadow: var(--sombra-suave);
+    padding: var(--espacamento-grande);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-radius: var(--borda-raio-grande);
+    margin-bottom: var(--espacamento-grande);
+  }
+  
+  .main-header__title {
+    font-size: var(--fonte-tamanho-xl);
+    font-weight: 700;
+    color: var(--cor-texto);
+    margin: 0;
+  }
+  
+  .main-header__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--espacamento-medio);
+  }
+  
+  /* Barra lateral */
+  .sidebar {
+    background-color: var(--cor-fundo);
+    border-right: 1px solid rgba(0, 0, 0, 0.05);
+    padding: var(--espacamento-grande) 0;
+    height: 100vh;
+    position: sticky;
+    top: 0;
+    overflow-y: auto;
+  }
+  
+  .sidebar__header {
+    padding: 0 var(--espacamento-grande);
+    margin-bottom: var(--espacamento-grande);
+  }
+  
+  .sidebar__logo {
+    height: 40px;
+  }
+  
+  .sidebar__nav {
+    margin-top: var(--espacamento-xl);
+  }
+  
+  .sidebar__nav-group {
+    margin-bottom: var(--espacamento-grande);
+  }
+  
+  .sidebar__nav-title {
+    color: var(--cor-texto-secundario);
+    font-size: var(--fonte-tamanho-pequeno);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 0 var(--espacamento-grande);
+    margin-bottom: var(--espacamento-pequeno);
+  }
+  
+  .sidebar__nav-item {
+    display: flex;
+    align-items: center;
+    padding: var(--espacamento-pequeno) var(--espacamento-grande);
+    color: var(--cor-texto);
+    text-decoration: none;
+    font-weight: 500;
+    border-left: 3px solid transparent;
+    transition: var(--transicao-rapida);
+    position: relative;
+    gap: var(--espacamento-pequeno);
+  }
+  
+  .sidebar__nav-item svg {
+    width: 18px;
+    height: 18px;
+    opacity: 0.7;
+    flex-shrink: 0;
+  }
+  
+  .sidebar__nav-item:hover {
+    background-color: var(--cor-secundaria);
+    color: var(--cor-primaria);
+  }
+  
+  .sidebar__nav-item:hover svg {
+    opacity: 1;
+  }
+  
+  .sidebar__nav-item.active {
+    border-left-color: var(--cor-primaria);
+    background-color: var(--cor-primaria-muito-clara);
+    color: var(--cor-primaria);
+    font-weight: 600;
+  }
+  
+  .sidebar__nav-item.active svg {
+    opacity: 1;
+    color: var(--cor-primaria);
+  }
+  
+  
+  
+  .btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--borda-raio);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: var(--transicao-rapida);
+    color: var(--cor-texto);
+    background-color: transparent;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .btn-icon:hover {
+    background-color: var(--cor-secundaria);
+    color: var(--cor-primaria);
+  }
+  
+  .btn-icon:active::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 5px;
+    height: 5px;
+    background-color: rgba(2, 66, 72, 0.2);
+    opacity: 1;
+    border-radius: 100%;
+    transform: scale(20, 20) translate(-50%, -50%);
+    transform-origin: 50% 50%;
+    transition: transform 0.3s, opacity 0.3s;
+  }
+  
+  /* Badges */
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    border-radius: 20px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    line-height: 1;
+  }
+  
+  .badge-primary {
+    background-color: var(--cor-primaria-muito-clara);
+    color: var(--cor-primaria);
+  }
+  
+  /* Tabs modernas */
+  .tabs {
+    display: flex;
+    border-bottom: 1px solid var(--cor-secundaria);
+    margin-bottom: var(--espacamento-grande);
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--cor-primaria) var(--cor-secundaria);
+  }
+  
+  .tabs::-webkit-scrollbar {
+    height: 4px;
+  }
+  
+  .tabs::-webkit-scrollbar-track {
+    background: var(--cor-secundaria);
+  }
+  
+  .tabs::-webkit-scrollbar-thumb {
+    background-color: var(--cor-primaria);
+    border-radius: 4px;
+  }
+  
+  .tabs__item {
+    padding: var(--espacamento-medio) var(--espacamento-grande);
+    font-weight: 500;
+    color: var(--cor-texto-secundario);
+    position: relative;
+    cursor: pointer;
+    transition: var(--transicao-rapida);
+    white-space: nowrap;
+  }
+  
+  .tabs__item:hover {
+    color: var(--cor-primaria);
+  }
+  
+  .tabs__item.active {
+    color: var(--cor-primaria);
+    font-weight: 600;
+  }
+  
+  .tabs__item.active::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--cor-primaria);
+  }
+  
+  /* Página de cápsulas - estilo moderno */
+  .rota-page__header {
+    background-color: var(--cor-fundo);
+    position: relative;
+    color: var(--cor-texto);
+    overflow: hidden;
+    padding: var(--espacamento-grande);
+    border-radius: var(--borda-raio-grande);
+  }
+  
+  .rota-page__header-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--espacamento-grande);
+  }
+  
+  .rota-page__icon {
+    background-color: var(--cor-primaria-muito-clara);
+    border-radius: var(--borda-raio);
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--cor-primaria);
+    flex-shrink: 0;
+  }
+  
+  .rota-page__icon svg {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .rota-page__title-group {
+    flex: 1;
+  }
+  
+  .rota-page__title {
+    margin: 0 0 var(--espacamento-pequeno) 0;
+    font-size: var(--fonte-tamanho-xxl);
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--cor-texto);
+  }
+  
+  .rota-page__description {
+    font-size: var(--fonte-tamanho-medio);
+    color: var(--cor-texto-secundario);
+    margin: 0;
+    max-width: 800px;
+  }
+  
+  /* Navegação da rota moderna */
+  .rota-page__nav {
+    background-color: var(--cor-fundo);
+    position: sticky;
+    top: 0;
+    box-shadow: var(--sombra-suave);
+    z-index: 100;
+    border-radius: var(--borda-raio-grande);
+    margin-bottom: var(--espacamento-grande);
+  }
+  
+  .rota-page__nav-container {
+    display: flex;
+    gap: var(--espacamento-medio);
+    padding: var(--espacamento-medio) var(--espacamento-grande);
+    scrollbar-width: thin;
+    scrollbar-color: var(--cor-primaria) var(--cor-secundaria);
+    overflow-x: auto;
+  }
+  
+  .rota-page__nav-container::-webkit-scrollbar {
+    height: 4px;
+  }
+  
+  .rota-page__nav-container::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .rota-page__nav-container::-webkit-scrollbar-thumb {
+    background-color: var(--cor-primaria);
+    border-radius: 4px;
+  }
+  
+  .rota-page__nav-link {
+    color: var(--cor-texto-secundario);
+    text-decoration: none;
+    padding: var(--espacamento-pequeno) var(--espacamento-medio);
+    border-radius: var(--borda-raio);
+    white-space: nowrap;
+    transition: var(--transicao-rapida);
+    position: relative;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  
+  .rota-page__nav-link:hover {
+    color: var(--cor-primaria);
+    background-color: var(--cor-primaria-muito-clara);
+  }
+  
+  .rota-page__nav-link.active {
+    color: var(--cor-primaria);
+    font-weight: 600;
+    background-color: var(--cor-primaria-muito-clara);
+  }
+  
+  .rota-page__nav-link svg {
+    width: 18px;
+    height: 18px;
+  }
+  
+  /* Seções da rota moderna */
+  .rota-page__section {
+    background-color: var(--cor-fundo);
+    border-radius: var(--borda-raio-grande);
+    box-shadow: var(--sombra-suave);
+    margin-bottom: var(--espacamento-xl);
+    overflow: hidden;
+    transition: var(--transicao-media);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+  
+  .rota-page__section:target {
+    box-shadow: var(--sombra-media);
+    border-color: rgba(2, 66, 72, 0.2);
+    animation: highlight-section 1s ease-out;
+  }
+  
+  @keyframes highlight-section {
+    0% {
+      transform: translateY(-5px);
+      box-shadow: var(--sombra-forte);
+    }
+    100% {
+      transform: translateY(0);
+      box-shadow: var(--sombra-media);
+    }
+  }
+  
+  .rota-page__section-header {
+    padding: var(--espacamento-grande);
+    border-bottom: 1px solid var(--cor-secundaria);
+    background-color: rgba(2, 66, 72, 0.02);
+  }
+
+  .rota-page__section-header-dark {
+    background-color: #024248;
+    color: white;
+    padding: 2rem;
+  }
+  
+  .rota-page__section-title {
+    color: var(--cor-primaria);
+    font-size: var(--fonte-tamanho-grande);
+    font-weight: 600;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--espacamento-pequeno);
+  }
+
+  .rota-page__capsulas-intro p{
+    color: #024248;
+  }
+
+  .rota-page__section-title-white {
+    color: white;
+    font-size: var(--fonte-tamanho-grande);
+    font-weight: 600;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--espacamento-pequeno);
+  }
+  
+  .rota-page__section-title-icon {
+    width: 24px;
+    height: 24px;
+    color: var(--cor-primaria);
+    flex-shrink: 0;
+  }
+
+  .rota-page__section-icon-white {
+    width: 24px;
+    height: 24px;
+    color: var(--cor-primaria);
+    flex-shrink: 0;
+    color: white;
+  }
+  
+  .rota-page__section-body {
+    padding: var(--espacamento-grande);
+  }
+  
+  .rota-page__content {
+    max-width: 800px;
+    line-height: 1.7;
+  }
+  
+  .rota-page__content h3 {
+    color: var(--cor-texto);
+    margin-top: var(--espacamento-xl);
+    margin-bottom: var(--espacamento-medio);
+    font-size: var(--fonte-tamanho-grande);
+    font-weight: 600;
+  }
+  
+  .rota-page__content p {
+    margin-top: 0;
+    margin-bottom: var(--espacamento-grande);
+    color: var(--cor-texto);
+  }
+  
+  .rota-page__content ul, .rota-page__content ol {
+    padding-left: var(--espacamento-xl);
+    margin-bottom: var(--espacamento-grande);
+  }
+  
+  .rota-page__content li {
+    margin-bottom: var(--espacamento-pequeno);
+  }
+  
+  .rota-page__content a {
+    color: var(--cor-primaria);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: var(--transicao-rapida);
+  }
+  
+  .rota-page__content a:hover {
+    border-bottom-color: var(--cor-primaria);
+  }
+  
+  /* Cards de cápsulas estilo moderno */
+  .rota-capsulas__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: var(--espacamento-grande);
+  }
+  
+  .rota-capsula-card {
+    background-color: var(--cor-fundo);
+    border-radius: var(--borda-raio);
+    overflow: hidden;
+    box-shadow: var(--sombra-suave);
+    transition: var(--transicao-media);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    border: 1px solid var(--cor-secundaria);
+    position: relative;
+  }
+  
+  .rota-capsula-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--sombra-media);
+    border-color: rgba(2, 66, 72, 0.2);
+  }
+  
+  .rota-capsula-card:focus-visible {
+    outline: 2px solid var(--cor-foco);
+    outline-offset: 2px;
+  }
+  
+  .rota-capsula-card--destaque::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background-color: var(--cor-amarelo);
+    z-index: 1;
+  }
+  
+  .rota-capsula-card__image {
+    height: 160px;
+    overflow: hidden;
+    position: relative;
+  }
+  
+  .rota-capsula-card__image::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40px;
+    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent);
+    z-index: 1;
+  }
+  
+  .rota-capsula-card__image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: var(--transicao-media);
+  }
+  
+  .rota-capsula-card:hover .rota-capsula-card__image img {
+    transform: scale(1.05);
+  }
+  
+  .rota-capsula-card__content {
+    padding: var(--espacamento-grande);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+    z-index: 2;
+    justify-content: space-between;
+  }
+  
+  .rota-capsula-card__tag {
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--cor-primaria-muito-clara);
+    color: var(--cor-primaria);
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 4px 8px;
+    border-radius: 20px;
+    margin-bottom: var(--espacamento-pequeno);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    line-height: 1;
+    max-width: fit-content;
+    gap: 4px;
+  }
+
+  .rota-capsula-card__description p{
+    color: var(--cor-texto);
+  }
+  
+  .rota-capsula-card__tag svg {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+  }
+  
+  .rota-capsula-card__title {
+    font-size: 22px;
+    font-weight: 600;
+    margin: 0 0 var(--espacamento-pequeno) 0;
+    color: var(--cor-texto);
+  }
+  
+  .rota-capsula-card__context {
+    color: var(--cor-texto-secundario);
+    font-size: var(--fonte-tamanho-pequeno);
+    margin-bottom: var(--espacamento-medio);
+    flex: 1;
+  }
+  
+  .rota-capsula-card__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    background-color: var(--cor-secundaria);
+    color: var(--cor-texto);
+    text-decoration: none;
+    padding: 0.75rem 1rem;
+    border-radius: var(--borda-raio);
+    font-weight: 500;
+    transition: var(--transicao-rapida);
+    border: none;
+    margin-top: auto;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .rota-capsula-card__button:hover {
+    background-color: var(--cor-primaria);
+    color: var(--cor-texto-invertido);
+  }
+  
+  .rota-capsula-card__button:focus-visible {
+    outline: 2px solid var(--cor-foco);
+    outline-offset: 2px;
+  }
+  
+  .rota-capsula-card__button::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 5px;
+    height: 5px;
+    background-color: rgba(255, 255, 255, 0.5);
+    opacity: 0;
+    border-radius: 100%;
+    transform: scale(1, 1) translate(-50%, -50%);
+    transform-origin: 50% 50%;
+  }
+  
+  .rota-capsula-card__button:active::after {
+    opacity: 0.3;
+    transform: scale(60, 60) translate(-50%, -50%);
+    transition: transform 0.6s, opacity 0.6s;
+  }
+  
+  .rota-capsula-card__button svg {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    transition: transform var(--transicao-rapida);
+  }
+  
+  .rota-capsula-card__button:hover svg {
+    transform: translateX(4px);
+  }
+  
+  /* Elementos de rotas estilo QuizKwik */
+  .routes-container {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: var(--espacamento-grande);
+    margin-top: var(--espacamento-xl);
+  }
+  
+  .routes-sidebar {
+    background-color: var(--cor-primaria);
+    color: var(--cor-texto-invertido);
+    padding: var(--espacamento-grande);
+    border-radius: var(--borda-raio-grande);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .routes-sidebar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
+    z-index: 0;
+  }
+  
+  .routes-sidebar__title {
+    font-size: var(--fonte-tamanho-xl);
+    font-weight: 700;
+    margin-bottom: var(--espacamento-pequeno);
+    position: relative;
+    z-index: 1;
+  }
+  
+  .routes-sidebar__subtitle {
+    opacity: 0.8;
+    margin-bottom: var(--espacamento-xl);
+    font-size: 0.875rem;
+    position: relative;
+    z-index: 1;
+  }
+  
+  .routes-list {
+    background-color: var(--cor-fundo);
+    border-radius: var(--borda-raio-grande);
+    padding: var(--espacamento-grande);
+    display: flex;
+    flex-direction: column;
+    gap: var(--espacamento-medio);
+  }
+  
+  .route-option {
+    display: flex;
+    align-items: center;
+    padding: var(--espacamento-grande);
+    border-radius: var(--borda-raio);
+    transition: var(--transicao-rapida);
+    text-decoration: none;
+    color: var(--cor-texto);
+    border: 1px solid transparent;
+  }
+  
+  .route-option:hover {
+    background-color: var(--cor-secundaria);
+    border-color: rgba(2, 66, 72, 0.1);
+    transform: translateY(-2px);
+    box-shadow: var(--sombra-suave);
+  }
+  
+  .route-option--featured {
+    background-color: var(--cor-primaria-muito-clara);
+    border: 1px solid rgba(2, 66, 72, 0.1);
+  }
+  
+  .route-option--featured:hover {
+    background-color: rgba(2, 66, 72, 0.15);
+    box-shadow: var(--sombra-media);
+  }
+  
+  .route-option__icon {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin-right: var(--espacamento-grande);
+    flex-shrink: 0;
+    transition: var(--transicao-rapida);
+  }
+  
+  .route-option:hover .route-option__icon {
+    transform: scale(1.05);
+  }
+  
+  .route-option__icon svg {
+    width: 24px;
+    height: 24px;
+  }
+  
+  .route-option__icon--green {
+    background-color: rgba(54, 179, 126, 0.1);
+    color: var(--cor-verde);
+  }
+  
+  .route-option__icon--yellow {
+    background-color: rgba(255, 177, 0, 0.1);
+    color: var(--cor-amarelo);
+  }
+  
+  .route-option__icon--blue {
+    background-color: rgba(38, 132, 255, 0.1);
+    color: var(--cor-azul);
+  }
+  
+  .route-option__icon--purple {
+    background-color: rgba(157, 123, 218, 0.1);
+    color: var(--cor-roxo);
+  }
+  
+  .route-option__content {
+    flex: 1;
+  }
+  
+  .route-option__title {
+    font-size: var(--fonte-tamanho-grande);
+    font-weight: 600;
+    margin: 0 0 var(--espacamento-xs) 0;
+  }
+  
+  .route-option__description {
+    color: var(--cor-texto-secundario);
+    font-size: var(--fonte-tamanho-pequeno);
+    margin: 0;
+  }
+  
+  .route-option__action {
+    color: var(--cor-primaria);
+    display: flex;
+    align-items: center;
+    transition: var(--transicao-rapida);
+  }
+  
+  .route-option:hover .route-option__action svg {
+    transform: translateX(4px);
+  }
+  
+  /* Stats e métricas */
+  .stats-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--espacamento-grande);
+    margin-bottom: var(--espacamento-xl);
+  }
+  
+  .stat-card {
+    background-color: var(--cor-fundo);
+    border-radius: var(--borda-raio);
+    padding: var(--espacamento-grande);
+    box-shadow: var(--sombra-suave);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    transition: var(--transicao-rapida);
+    border: 1px solid var(--cor-secundaria);
+  }
+  
+  .stat-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--sombra-media);
+    border-color: rgba(2, 66, 72, 0.1);
+  }
+  
+  .stat-card__label {
+    font-size: var(--fonte-tamanho-pequeno);
+    color: var(--cor-texto-secundario);
+    margin-bottom: var(--espacamento-pequeno);
+    display: flex;
+    align-items: center;
+    gap: var(--espacamento-pequeno);
+  }
+  
+  .stat-card__label svg {
+    width: 16px;
+    height: 16px;
+    opacity: 0.7;
+  }
+  
+  .stat-card__value {
+    font-size: var(--fonte-tamanho-xl);
+    font-weight: 700;
+    color: var(--cor-texto);
+    margin: 0;
+  }
+  
+  .stat-card__chart {
+    width: 100%;
+    margin-top: var(--espacamento-pequeno);
+  }
+  
+  .progress-bar {
+    height: 8px;
+    width: 100%;
+    background-color: var(--cor-secundaria);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-top: var(--espacamento-pequeno);
+  }
+  
+  .progress-bar__fill {
+    height: 100%;
+    background-color: var(--cor-primaria);
+    border-radius: 4px;
+    transition: width 1s ease-out;
+  }
+  
+  /* Responsividade */
+  @media (max-width: 992px) {
+    .main-layout {
+      grid-template-columns: 1fr;
+    }
+    
+    .sidebar {
+      display: flex;
+    }
+    
+    .routes-container {
+      grid-template-columns: 1fr;
+    }
+    
+    .routes-sidebar {
+      margin-bottom: var(--espacamento-grande);
+      text-align: center;
+      align-items: center;
+    }
+
+    .sidebar__header {
+        display: none;
+      }
+
+      .sidebar__nav {
+        display: flex;
+      }
+
+      .sidebar__nav-group{
+        display: flex;
+      }
+  }
+  
+  @media (max-width: 768px) {
+    .main-content-capsulas {
+      padding: var(--espacamento-medio);
+    }
+  
+    .rota-capsulas__grid {
+      grid-template-columns: 1fr;
+    }
+    
+    .stats-container {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .rota-page__header-content {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    
+    .rota-page__icon {
+      margin-bottom: var(--espacamento-medio);
+    }
+  }
+  
+  @media (max-width: 576px) {
+    .stats-container {
+      grid-template-columns: 1fr;
+    }
+  
+    .card-body-rota {
+      padding: var(--espacamento-medio);
+    }
+  
+    .rota-page__section-body,
+    .rota-page__section-header {
+      padding: var(--espacamento-medio);
+    }
+  
+    .rota-capsula-card__content {
+      padding: var(--espacamento-medio);
+    }
+    .capsulas-main-content {
+      max-width: 90vw;
+    }
+
+    .capsulas-sidebar-title {
+      display: none;
+    }
+  }
+  
+  /* Melhorias de acessibilidade */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  
+  .skip-to-content {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: var(--cor-primaria);
+    color: var(--cor-texto-invertido);
+    padding: 8px;
+    z-index: 9999;
+    transition: top 0.3s;
+  }
+  
+  .skip-to-content:focus {
+    top: 0;
+  }
+  
+  /* Modo de alto contraste */
+  body.using-keyboard :focus {
+    outline: 3px solid var(--cor-foco) !important;
+    outline-offset: 2px !important;
+  }
+  
+  /* Media queries para acessibilidade */
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.001s !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.001s !important;
+      scroll-behavior: auto !important;
+    }
+    
+    .rota-capsula-card:hover {
+      transform: none;
+    }
+    
+    .rota-capsula-card:hover .rota-capsula-card__image img {
+      transform: none;
+    }
+  
+    .rota-capsula-card__button:hover svg {
+      transform: none;
+    }
+  
+    .route-option:hover {
+      transform: none;
+    }
+  
+    .route-option:hover .route-option__icon {
+      transform: none;
+    }
+  
+  
+    .stat-card:hover {
+      transform: none;
+    }
+  
+    .card:hover {
+      transform: none;
+    }
+  }
+
+
+
+
+
+
+
+
+
+/* Estilos específicos para o Gerador de Rotas
+ * Compatível com o design hightech do Sistema de Cápsulas de Acessibilidade
+ */
+
+/* Importando as variáveis do design principal */
+.gerador-rotas {
+    --cor-primaria: #024248;
+    --cor-primaria-clara: rgba(2, 66, 72, 0.8);
+    --cor-primaria-muito-clara: rgba(2, 66, 72, 0.1);
+    --cor-secundaria: #EBEFF5;
+    --cor-fundo: #FFFFFF;
+    --cor-texto: #212B36;
+    --cor-texto-secundario: #637381;
+    --cor-texto-invertido: #FFFFFF;
+    --cor-amarelo: #FFB100;
+    --cor-verde: #36B37E;
+    --cor-azul: #2684FF;
+    --cor-roxo: #9D7BDA;
+    --borda-raio-sm: 4px;
+    --borda-raio: 8px;
+    --borda-raio-grande: 12px;
+    --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.05);
+    --sombra-media: 0 8px 16px rgba(0, 0, 0, 0.08);
+    --transicao-rapida: 0.2s ease-in-out;
+    --transicao-media: 0.3s ease-in-out;
+    --espacamento-pequeno: 0.5rem;
+    --espacamento-medio: 1rem;
+    --espacamento-grande: 1.5rem;
+    --espacamento-xl: 2rem;
+    --espacamento-xxl: 3rem;
+  
+    background-color: var(--cor-secundaria);
+    padding: var(--espacamento-xl) 0;
+    min-height: 100vh;
+  }
+  
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--espacamento-medio);
+  }
+  
+  /* Cabeçalho do gerador de rotas */
+  .gerador-rotas__header {
+    background-color: var(--cor-fundo);
+    border-radius: var(--borda-raio-grande);
+    padding: var(--espacamento-grande);
+    margin-bottom: var(--espacamento-xl);
+    box-shadow: var(--sombra-suave);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .gerador-rotas__header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background-color: var(--cor-primaria);
+  }
+  
+  .gerador-rotas__header h1 {
+    color: var(--cor-primaria);
+    font-size: 2rem;
+    margin-top: 0;
+    margin-bottom: var(--espacamento-medio);
+    font-weight: 700;
+  }
+  
+  .gerador-rotas__intro {
+    max-width: 800px;
+    margin: 0 auto;
+    color: var(--cor-texto-secundario);
+  }
+  
+  .gerador-rotas__intro p {
+    margin-bottom: var(--espacamento-medio);
+    line-height: 1.6;
+  }
+  
+  .gerador-rotas__intro p:last-child {
+    margin-bottom: 0;
+  }
+  
+  /* Conteúdo do gerador */
+  .gerador-rotas__content {
+    background-color: var(--cor-fundo);
+    border-radius: var(--borda-raio-grande);
+    padding: var(--espacamento-grande);
+    box-shadow: var(--sombra-suave);
+  }
+  
+  .gerador-rotas__question {
+    text-align: center;
+    margin-bottom: var(--espacamento-grande);
+  }
+  
+  .gerador-rotas__question h2 {
+    color: #024248;
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0;
+  }
+  
+  /* Opções de rota */
+  .gerador-rotas__options {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--espacamento-grande);
+    margin-bottom: var(--espacamento-grande);
+    margin-top: 2rem;
+  }
+  
+  .rotas-option {
+    cursor: pointer;
+    transition: var(--transicao-rapida);
+  }
+  
+  .rotas-option:focus {
+    outline: none;
+  }
+  
+  .rotas-option:focus-visible {
+    outline: 3px solid var(--cor-foco);
+    outline-offset: 2px;
+    border-radius: var(--borda-raio);
+  }
+  
+  .rotas-option__label {
+    display: block;
+    cursor: pointer;
+  }
+  
+  .rotas-option__content {
+    background-color: var(--cor-fundo);
+    border: 1px solid var(--cor-secundaria);
+    border-radius: var(--borda-raio);
+    padding: var(--espacamento-grande);
+    transition: var(--transicao-rapida);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--espacamento-medio);
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .rotas-option:hover .rotas-option__content {
+    border-color: var(--cor-primaria-clara);
+    box-shadow: var(--sombra-suave);
+    transform: translateY(-4px);
+  }
+  
+  .rotas-option__radio {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  .rotas-option__radio:checked + .rotas-option__content {
+    border-color: var(--cor-primaria);
+    background-color: var(--cor-primaria-muito-clara);
+    box-shadow: var(--sombra-media);
+  }
+  
+  .rotas-option__radio:checked + .rotas-option__content::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background-color: var(--cor-primaria);
+    border-radius: var(--borda-raio) 0 0 var(--borda-raio);
+  }
+  
+  .rotas-option__icon {
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--cor-primaria-muito-clara);
+    color: var(--cor-primaria);
+    border-radius: var(--borda-raio);
+    flex-shrink: 0;
+    transition: var(--transicao-rapida);
+  }
+  
+  /* Ícones específicos por opção */
+  .rotas-option:nth-child(1) .rotas-option__icon {
+    background-color: rgba(54, 179, 126, 0.1);
+    color: var(--cor-verde);
+  }
+  
+  .rotas-option:nth-child(2) .rotas-option__icon {
+    background-color: rgba(255, 177, 0, 0.1);
+    color: var(--cor-amarelo);
+  }
+  
+  .rotas-option:nth-child(3) .rotas-option__icon {
+    background-color: rgba(38, 132, 255, 0.1);
+    color: var(--cor-azul);
+  }
+  
+  .rotas-option:nth-child(4) .rotas-option__icon {
+    background-color: rgba(157, 123, 218, 0.1);
+    color: var(--cor-roxo);
+  }
+  
+  .rotas-option:hover .rotas-option__icon {
+    transform: scale(1.05);
+  }
+  
+  .rotas-option__radio:checked ~ .rotas-option__icon {
+    transform: scale(1.1);
+  }
+  
+  .rotas-option__text {
+    flex: 1;
+  }
+  
+  .rotas-option__text p {
+    margin: 0;
+    color: var(--cor-texto);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+  
+  /* Botão de ação */
+  .gerador-rotas__action {
+    text-align: center;
+    margin-top: var(--espacamento-xl);
+    display: flex;
+    justify-content: center;
+  }
+  
+  /* Indicador de seleção customizado */
+  .rotas-option__radio + .rotas-option__content::after {
+    content: '';
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--cor-secundaria);
+    border-radius: 50%;
+    transition: var(--transicao-rapida);
+  }
+  
+  .rotas-option__radio:checked + .rotas-option__content::after {
+    border-color: var(--cor-primaria);
+    background-color: var(--cor-primaria);
+    box-shadow: 0 0 0 2px var(--cor-primaria-muito-clara);
+  }
+  
+  /* Efeito de check mark */
+  .rotas-option__radio:checked + .rotas-option__content::after {
+    content: '';
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 22px;
+    height: 22px;
+    background-color: var(--cor-primaria);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .rotas-option__radio:checked + .rotas-option__content::after {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 12px;
+  }
+  
+  /* Responsividade */
+  @media (max-width: 768px) {
+    .gerador-rotas__options {
+      grid-template-columns: 1fr;
+    }
+    
+    .gerador-rotas__header {
+      padding: var(--espacamento-medio);
+    }
+    
+    .gerador-rotas__content {
+      padding: 30px;
+    }
+    
+    .gerador-rotas__header h1 {
+      font-size: 1.5rem;
+    }
+    
+    .gerador-rotas__question h2 {
+      font-size: 22px;
+    }
+  }
+  
+  /* Acessibilidade - preferência por movimento reduzido */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition-duration: 0.001s !important;
+      animation-duration: 0.001s !important;
+    }
+    
+    .rotas-option:hover .rotas-option__content {
+      transform: none;
+    }
+    
+    .rotas-option:hover .rotas-option__icon {
+      transform: none;
+    }
+    
+    .btn-primary:hover:not(:disabled) {
+      transform: none;
+    }
+  }
+  
+  /* Acessibilidade - foco via teclado */
+  body.using-keyboard .rotas-option:focus-visible {
+    outline: 3px solid var(--cor-foco);
+    outline-offset: 2px;
+  }
+
+
+
+  /* Estilos de navegação responsiva acessível para o Sistema de Cápsulas de Acessibilidade
+ * Inclui barra de navegação fixa inferior para dispositivos móveis
+ */
+
+/* Menu móvel fixado na parte inferior */
+.mobile-nav {
+    display: none; /* Oculto por padrão (apenas visível em mobile) */
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: var(--cor-fundo);
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    padding: 8px 0;
+    border-top: 1px solid var(--cor-secundaria);
+  }
+  
+  .mobile-nav__list {
+    display: flex;
+    justify-content: space-around;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .mobile-nav__item {
+    flex: 1;
+    text-align: center;
+  }
+  
+  .mobile-nav__link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--cor-texto-secundario);
+    text-decoration: none;
+    padding: 8px;
+    border-radius: var(--borda-raio);
+    transition: var(--transicao-rapida);
+    font-size: 0.75rem;
+  }
+  
+  .mobile-nav__link:hover,
+  .mobile-nav__link:focus {
+    color: var(--cor-primaria);
+    background-color: var(--cor-primaria-muito-clara);
+  }
+  
+  .mobile-nav__link.active {
+    color: var(--cor-primaria);
+    font-weight: 600;
+  }
+  
+  .mobile-nav__icon {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 4px;
+  }
+  
+  .mobile-nav__text {
+    display: block;
+    font-size: 0.7rem;
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+  
+  /* Botão de expansão para submenu móvel */
+  .mobile-nav__more-btn {
+    background: none;
+    border: none;
+    color: var(--cor-texto-secundario);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: var(--transicao-rapida);
+  }
+  
+  .mobile-nav__more-btn:focus {
+    outline: none;
+    color: var(--cor-primaria);
+    background-color: var(--cor-primaria-muito-clara);
+  }
+  
+  /* Drawer para menu expandido */
+  .mobile-drawer {
+    position: fixed;
+    bottom: 60px; /* Altura da barra de navegação móvel */
+    left: 0;
+    width: 100%;
+    background-color: var(--cor-fundo);
+    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
+    transform: translateY(100%);
+    transition: transform 0.3s ease-in-out;
+    z-index: 999;
+    border-top-left-radius: var(--borda-raio-grande);
+    border-top-right-radius: var(--borda-raio-grande);
+    overflow: hidden;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+  
+  .mobile-drawer.open {
+    transform: translateY(0);
+  }
+  
+  .mobile-drawer__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    border-bottom: 1px solid var(--cor-secundaria);
+  }
+  
+  .mobile-drawer__title {
+    font-size: 1.1rem;
+    margin: 0;
+    color: var(--cor-texto);
+  }
+  
+  .mobile-drawer__close {
+    background: none;
+    border: none;
+    color: var(--cor-texto-secundario);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: var(--transicao-rapida);
+  }
+  
+  .mobile-drawer__close:hover,
+  .mobile-drawer__close:focus {
+    background-color: var(--cor-secundaria);
+    color: var(--cor-texto);
+  }
+  
+  .mobile-drawer__content {
+    padding: 16px;
+  }
+  
+  .mobile-drawer__section {
+    margin-bottom: 24px;
+  }
+  
+  .mobile-drawer__section-title {
+    font-size: 0.8rem;
+    color: var(--cor-texto-secundario);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+  }
+  
+  .mobile-drawer__nav-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .mobile-drawer__nav-item {
+    margin-bottom: 2px;
+  }
+  
+  .mobile-drawer__nav-link {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    color: var(--cor-texto);
+    text-decoration: none;
+    border-radius: var(--borda-raio);
+    transition: var(--transicao-rapida);
+  }
+  
+  .mobile-drawer__nav-link:hover,
+  .mobile-drawer__nav-link:focus {
+    background-color: var(--cor-secundaria);
+  }
+  
+  .mobile-drawer__nav-link.active {
+    background-color: var(--cor-primaria-muito-clara);
+    color: var(--cor-primaria);
+    font-weight: 500;
+  }
+  
+  .mobile-drawer__nav-icon {
+    margin-right: 12px;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+  }
+  
+  /* Ajustes para o layout principal em dispositivos móveis */
+  /* Correção para sidebar móvel fixa */
+@media (max-width: 991px) {
+    /* Esconder a sidebar padrão e configurar corretamente para dispositivos móveis */
+    .sidebar {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      position: fixed;
+      top: 90vh;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: auto;
+      max-height: 70px;
+      padding: 10px 15px;
+      background-color: #fff;
+      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+      z-index: 1000;
+      overflow-x: auto; /* Permite rolagem horizontal se necessário */
+    }
+    
+    /* Ajustar os itens de navegação para exibição móvel */
+    .sidebar__nav {
+      display: flex;
+      width: 100%;
+      overflow-x: auto;
+    }
+    
+    .sidebar__nav-group {
+      display: flex;
+      flex-direction: row;
+      margin-right: 10px;
+      align-items: center;
+    }
+    
+    /* Esconder os títulos das seções no mobile */
+    .sidebar__nav-title {
+      display: none;
+    }
+    
+    /* Ajustar os itens do menu */
+    .sidebar__nav-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 8px 12px;
+      font-size: 12px;
+      text-align: center;
+      white-space: nowrap;
+      border-radius: 8px;
+    }
+    
+    .sidebar__nav-item svg {
+      width: 20px;
+      height: 20px;
+      margin-bottom: 4px;
+    }
+    
+    /* Ajustar o layout principal para remover a coluna da sidebar */
+    .main-layout {
+      grid-template-columns: 1fr;
+    }
+    
+    /* Ajustar todos os conteúdos principais para evitar que sejam escondidos pelo menu fixo */
+    .main-content, .main-content-capsulas {
+      padding-bottom: calc(var(--espacamento-xl) + 80px);
+      max-width: 100vw;
+    }
+    
+    /* Esconder o logo na versão mobile ou reduzir seu tamanho */
+    .sidebar__header {
+      display: none;
+    }
+    
+    /* Garantir que o menu móvel tenha boa aparência */
+    .mobile-nav {
+      display: none; /* Estamos usando a sidebar adaptada, não um componente separado */
+    }
+  }
+  
+  /* Fix para iOS e Safari que às vezes tem problemas com elementos fixos */
+  @supports (-webkit-touch-callout: none) {
+    @media (max-width: 991px) {
+      .sidebar {
+        position: -webkit-sticky;
+        position: sticky;
+      }
+    }
+  }
+  
+  /* Melhorias de acessibilidade */
+  /* Focus visível em dispositivos táteis */
+  .mobile-nav__link:focus-visible,
+  .mobile-drawer__nav-link:focus-visible,
+  .mobile-nav__more-btn:focus-visible,
+  .mobile-drawer__close:focus-visible {
+    outline: 3px solid var(--cor-foco);
+    outline-offset: -2px;
+  }
+  
+  /* Ajustes para dispositivos com telas pequenas */
+  @media (max-width: 320px) {
+    .mobile-nav__text {
+      font-size: 0.6rem;
+    }
+    
+    .mobile-nav__icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  
+  /* Melhorias para modo escuro */
+  @media (prefers-color-scheme: dark) {
+    .mobile-nav {
+      background-color: #121212;
+      border-top-color: #2A2A2A;
+    }
+    
+    .mobile-drawer {
+      background-color: #121212;
+    }
+  }
+  
+  /* Redução de movimento para usuários com vestibular motion triggers */
+  @media (prefers-reduced-motion: reduce) {
+    .mobile-drawer {
+      transition: none;
+    }
+  }
+  
+  /* Overlay de fundo quando o drawer está aberto */
+  .drawer-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease;
+    z-index: 998;
+  }
+  
+  .drawer-overlay.active {
+    opacity: 1;
+    visibility: visible;
+  }
+
+
+
+  
+  .rotas-option.ativo {
+    border-color: #2196F3;
+    background-color: rgba(33, 150, 243, 0.08);
+  }
+  
+  .rotas-option.ativo .rotas-option__icon {
+    background-color: #2196F3;
+    color: white;
+  }
+  
+  #btn-gerar-rota.ativo {
+    background-color: #2196F3;
+    cursor: pointer;
+    color: white;
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* Estilo personalizado para a página de Cápsulas de Acessibilidade */
+/* Usando prefixo 'acess-' para evitar conflitos com outras classes CSS */
+
+:root {
+    --acess-primary: #024248; /* Azul principal */
+    --acess-secondary: #1351B4; /* Azul secundário */
+    --acess-accent: #2670E8; /* Azul destaque */
+    --acess-light: #F8F8F8;
+    --acess-border: #E0E0E0;
+    --acess-text: #333333;
+    --acess-visual: #AB3FDD; /* Cor para deficiência visual */
+    --acess-hearing: #F7B500; /* Cor para deficiência auditiva */
+    --acess-motor: #E52E4D; /* Cor para deficiência motora */
+    --acess-cognitive: #33B679; /* Cor para deficiência cognitiva */
+}
+
+/* Container principal */
+.acess-hero {
+    background: linear-gradient(rgba(12, 50, 111, 0.03), rgba(12, 50, 111, 0.05));
+    padding: 80px 20px 30px 20px; 
+    text-align: center;
+    margin-bottom: 0;
+    position: relative;
+}
+
+/* Ícone de acessibilidade */
+.acess-icon {
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 20px;
+    display: block;
+}
+
+/* Estilos de texto */
+.acess-subtitle {
+    color: var(--acess-primary);
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+}
+
+.acess-title-large {
+    font-size: 42px;
+    font-weight: 800;
+    margin: 10px 0 20px;
+    color: #024248;
+    line-height: 1.1;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.acess-description {
+    font-size: 18px;
+    color: #666;
+    max-width: 600px;
+    margin: 0 auto 30px;
+    line-height: 1.6;
+}
+
+/* Container dos filtros */
+.acess-filter-container {
+    background-color: white;
+    border-radius: 16px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.381);
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px 30px;
+    position: relative;
+    top: -30px;
+    z-index: 10;
+}
+
+/* Dropdown filters */
+.acess-filter-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    justify-content: center;
+}
+
+.acess-dropdown {
+    position: relative;
+    min-width: 220px;
+}
+
+.acess-dropdown-btn {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 1px solid #E2E8F0;
+    background-color: white;
+    color: #334155;
+    font-size: 15px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+}
+
+.acess-dropdown-btn:hover {
+    border-color: #CBD5E1;
+    background-color: #F8FAFC;
+}
+
+.acess-dropdown-btn i {
+    margin-left: 10px;
+}
+
+.acess-counter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-left: 8px;
+    background-color: var(--acess-primary);
+    color: white;
+    border-radius: 50%;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.acess-dropdown-content {
+    position: absolute;
+    top: calc(100% + 5px);
+    left: 0;
+    width: 260px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+    z-index: 100;
+    border: 1px solid #E2E8F0;
+    display: none; /* Inicialmente oculto */
+}
+
+.acess-dropdown-inner {
+    padding: 16px;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+/* Estilo de checkbox moderno */
+.acess-options {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+}
+
+.acess-check-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.acess-checkbox {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.acess-check-label {
+    position: relative;
+    padding-left: 30px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #475569;
+    display: flex;
+    align-items: center;
+    min-height: 24px;
+}
+
+.acess-check-label:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 18px;
+    height: 18px;
+    border: 2px solid #CBD5E1;
+    border-radius: 4px;
+    background-color: #fff;
+    transition: all 0.2s ease;
+}
+
+.acess-checkbox:checked + .acess-check-label:before {
+    background-color: var(--acess-primary);
+    border-color: var(--acess-primary);
+}
+
+.acess-check-label:after {
+    content: '';
+    position: absolute;
+    left: 6px;
+    top: 50%;
+    transform: translateY(-70%) rotate(45deg);
+    width: 6px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    opacity: 0;
+    transition: all 0.2s ease;
+}
+
+.acess-checkbox:checked + .acess-check-label:after {
+    opacity: 1;
+}
+
+.acess-checkbox:focus + .acess-check-label:before {
+    box-shadow: 0 0 0 3px rgba(12, 50, 111, 0.1);
+}
+
+/* Container de conteúdo principal */
+.acess-content {
+    max-width: 1200px;
+    margin: -20px auto 60px;
+    padding: 20px;
+}
+
+/* Título da seção */
+.acess-section-title {
+    font-size: 36px;
+    font-weight: 800;
+    text-align: center;
+    margin: 60px 0 20px;
+    text-transform: uppercase;
+}
+
+.acess-section-subtitle {
+    font-size: 18px;
+    text-align: center;
+    color: #666;
+    margin: 0 auto 40px;
+    max-width: 700px;
+}
+
+/* Grid de cápsulas */
+.acess-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 25px;
+    margin-top: 40px;
+}
+
+/* Card de cápsula */
+.acess-capsula-card {
+    background-color: white;
+    border-radius: 12px;
+    padding: 20px;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
+    border: 1px solid #EEE;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+/* Adicione isso ao seu CSS */
+.rota-section {
+  display: block !important; /* Força todas as seções a ficarem visíveis */
+  margin-bottom: 2rem; /* Espaçamento entre seções */
+}
+.acess-capsula-link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+    height: 100%;
+}
+
+.acess-capsula-card:hover {
+    box-shadow: 0 10px 24px rgba(0,0,0,0.1);
+    border-color: #DDD;
+}
+
+.acess-capsula-icon {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+    color: var(--acess-primary);
+}
+
+.acess-capsula-titulo {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0 0 8px;
+    color: var(--acess-primary);
+}
+
+.acess-capsula-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.acess-capsula-descricao {
+    color: #666;
+    margin-bottom: 16px;
+    line-height: 1.5;
+    font-size: 15px;
+}
+
+/* Tags de deficiência */
+.acess-capsula-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 16px;
+}
+
+.acess-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    border-radius: 100px;
+    font-size: 13px;
+    font-weight: 600;
+    gap: 6px;
+}
+
+.acess-tag.visual {
+    background-color: rgba(171, 63, 221, 0.1);
+    color: var(--acess-visual);
+}
+
+.acess-tag.auditiva {
+    background-color: rgba(247, 181, 0, 0.1);
+    color: var(--acess-hearing);
+}
+
+.acess-tag.motora {
+    background-color: rgba(229, 46, 77, 0.1);
+    color: var(--acess-motor);
+}
+
+.acess-tag.cognitiva {
+    background-color: rgba(51, 182, 121, 0.1);
+    color: var(--acess-cognitive);
+}
+
+.acess-tag-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.acess-tag.visual .acess-tag-dot {
+    background-color: var(--acess-visual);
+}
+
+.acess-tag.auditiva .acess-tag-dot {
+    background-color: var(--acess-hearing);
+}
+
+.acess-tag.motora .acess-tag-dot {
+    background-color: var(--acess-motor);
+}
+
+.acess-tag.cognitiva .acess-tag-dot {
+    background-color: var(--acess-cognitive);
+}
+
+/* Tipos de recursos */
+.acess-capsula-recursos {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 16px;
+    margin-top: auto;
+}
+
+.acess-recurso-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    background-color: #F1F5F9;
+    color: #475569;
+    gap: 6px;
+}
+
+.acess-capsula-btn {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: var(--acess-primary);
+    color: white;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 14px;
+    transition: all 0.2s ease;
+    text-align: center;
+    border: none;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.acess-capsula-btn:hover {
+    background-color: #0A2A5E;
+}
+
+/* Filtros ativos wrapper */
+.acess-active-filters-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin: 30px 0;
+    justify-content: flex-start;
+}
+
+/* Filtros ativos */
+.acess-active-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.acess-filter-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    background-color: #F1F5F9;
+    border-radius: 100px;
+    font-size: 14px;
+    color: #475569;
+    font-weight: 500;
+}
+
+.acess-remove-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    margin-left: 6px;
+    color: #64748B;
+    border-radius: 50%;
+}
+
+.acess-remove-btn:hover {
+    color: #E11D48;
+    background-color: rgba(225, 29, 72, 0.1);
+}
+
+.acess-clear-all {
+    background: none;
+    border: none;
+    color: #007D7A;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    padding: 8px 16px;
+    border-radius: 100px;
+    transition: all 0.2s ease;
+}
+
+.acess-clear-all:hover {
+    background-color: #006969;
+    color: white;
+}
+
+/* Contagem e ordenação */
+.acess-results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.acess-results-count {
+    font-size: 14px;
+    color: #64748B;
+}
+
+.acess-sort-btn {
+    background: none;
+    border: 1px solid #E0E0E0;
+    padding: 8px 16px;
+    border-radius: 100px;
+    font-size: 14px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    color: #64748B;
+}
+
+/* Mensagem vazia */
+.acess-empty {
+    text-align: center;
+    padding: 60px 20px;
+    background-color: #F9FAFB;
+    border-radius: 12px;
+    margin-top: 40px;
+}
+
+.acess-empty-icon {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+    color: #94A3B8;
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+    .acess-title-large {
+        font-size: 36px;
+    }
+    
+    .acess-filter-container {
+        padding: 15px;
+        top: -20px;
+    }
+    
+    .acess-dropdown {
+        width: 100%;
+        min-width: 100%;
+    }
+    
+    .acess-dropdown-content {
+        width: 100%;
+        min-width: 100%;
+    }
+    
+    .acess-hero {
+        padding: 60px 20px;
+    }
+    
+    .acess-section-title {
+        font-size: 28px;
+    }
+    
+    .acess-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .acess-filter-group {
+        flex-direction: column;
+        gap: 8px;
+    }
+}
+
+
+
+
+
+
+
+/* Nova Rota Temática CSS - Design Moderno e Acessível */
+
+:root {
+    /* Cores principais */
+    --rota-primary: #006969;
+    --rota-primary-light: #006969;
+    --rota-secondary: #025257;
+    --rota-secondary-light: #006969;
+    --rota-accent: #70E0DF;
+    
+    /* Cores de deficiências */
+    --rota-visual: #AB3FDD;
+    --rota-auditiva: #F7B500;
+    --rota-motora: #E52E4D;
+    --rota-cognitiva: #33B679;
+    
+    /* Cores neutras */
+    --rota-text: #1e293b;
+    --rota-text-light: #64748b;
+    --rota-border: #e2e8f0;
+    --rota-background: #f8fafc;
+    --rota-card: #ffffff;
+    
+    /* Sombras */
+    --rota-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
+    --rota-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --rota-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
+    
+    /* Arredondamentos */
+    --rota-radius-sm: 8px;
+    --rota-radius: 12px;
+    --rota-radius-lg: 16px;
+    
+    /* Espaçamentos */
+    --rota-space-xs: 4px;
+    --rota-space-sm: 8px;
+    --rota-space: 16px;
+    --rota-space-md: 24px;
+    --rota-space-lg: 32px;
+    --rota-space-xl: 48px;
+    
+    /* Transições */
+    --rota-transition: all 0.2s ease;
+    --rota-transition-slow: all 0.3s ease;
+  }
+  
+  /* Reset e base */
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+  
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    color: var(--rota-text);
+    background-color: var(--rota-background);
+    line-height: 1.5;
+  }
+  
+  a {
+    color: var(--rota-secondary);
+    text-decoration: none;
+    transition: var(--rota-transition);
+  }
+  
+  a:hover {
+    color: var(--rota-primary);
+  }
+  
+  /* Layout principal */
+  .rota-layout {
+    display: flex;
+    min-height: 100vh;
+  }
+  
+  /* Sidebar minimalista */
+  .rota-sidebar {
+    background-color: var(--rota-card);
+    border-right: 1px solid var(--rota-border);
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    position: sticky;
+    top: 0;
+    width: 70px;
+    z-index: 100;
+  }
+  
+  .rota-sidebar__logo {
+    align-items: center;
+    border-bottom: 1px solid var(--rota-border);
+    display: flex;
+    height: 70px;
+    justify-content: center;
+    padding: var(--rota-space-sm);
+  }
+  
+  .rota-sidebar__logo img {
+    height: auto;
+    max-height: 32px;
+    max-width: 36px;
+  }
+  
+  .rota-sidebar__nav {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: var(--rota-space) 0;
+  }
+  
+  .rota-sidebar__nav-item {
+    align-items: center;
+    color: var(--rota-text-light);
+    display: flex;
+    height: 60px;
+    justify-content: center;
+    position: relative;
+    transition: var(--rota-transition);
+    width: 100%;
+  }
+  
+  .rota-sidebar__nav-item svg {
+    height: 20px;
+    width: 20px;
+  }
+  
+  .rota-sidebar__nav-item:hover, 
+  .rota-sidebar__nav-item.active {
+    color: var(--rota-secondary);
+  }
+  
+  .rota-sidebar__nav-item.active::before {
+    background-color: var(--rota-secondary);
+    content: '';
+    height: 60%;
+    left: 0;
+    position: absolute;
+    top: 20%;
+    width: 3px;
+  }
+  
+  .rota-sidebar__tooltip {
+    background-color: var(--rota-text);
+    border-radius: var(--rota-radius-sm);
+    color: white;
+    font-size: 12px;
+    left: 100%;
+    margin-left: var(--rota-space);
+    opacity: 0;
+    padding: 6px 10px;
+    pointer-events: none;
+    position: absolute;
+    transform: translateX(-10px);
+    transition: var(--rota-transition);
+    white-space: nowrap;
+    z-index: 10;
+  }
+  
+  .rota-sidebar__tooltip::before {
+    border-color: transparent var(--rota-text) transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 5px 0;
+    content: '';
+    height: 0;
+    left: -5px;
+    position: absolute;
+    top: calc(50% - 5px);
+    width: 0;
+  }
+  
+  .rota-sidebar__nav-item:hover .rota-sidebar__tooltip {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  
+  .rota-sidebar__user {
+    border-top: 1px solid var(--rota-border);
+    display: flex;
+    justify-content: center;
+    padding: var(--rota-space-sm) 0;
+  }
+  
+  .rota-sidebar__user-button {
+    background: none;
+    border: none;
+    color: var(--rota-text-light);
+    cursor: pointer;
+    height: 40px;
+    padding: 0;
+    transition: var(--rota-transition);
+    width: 40px;
+  }
+  
+  .rota-sidebar__user-button:hover {
+    color: var(--rota-secondary);
+  }
+  
+  .rota-sidebar__user-button svg {
+    height: 20px;
+    width: 20px;
+  }
+  
+  /* Conteúdo principal */
+  .rota-main {
+    flex: 1;
+    max-width: calc(100vw - 70px);
+    background-color: #EBEFF5;
+  }
+  
+  /* Barra de navegação superior */
+  .rota-header {
+    align-items: center;
+    background-color: var(--rota-card);
+    border-bottom: 1px solid var(--rota-border);
+    display: flex;
+    height: 70px;
+    justify-content: space-between;
+    padding: 0 var(--rota-space-lg);
+    position: sticky;
+    top: 0;
+    z-index: 50;
+  }
+  
+  .rota-breadcrumb {
+    align-items: center;
+    display: flex;
+    font-size: 14px;
+    gap: var(--rota-space-sm);
+  }
+  
+  .rota-breadcrumb__link {
+    color: var(--rota-secondary);
+    font-weight: 500;
+  }
+  
+  .rota-breadcrumb__link:hover {
+    text-decoration: underline;
+  }
+  
+  .rota-breadcrumb svg {
+    color: var(--rota-text-light);
+  }
+  
+  .rota-actions {
+    display: flex;
+    gap: var(--rota-space-sm);
+  }
+  
+  .rota-action-btn {
+    align-items: center;
+    background-color: transparent;
+    border: 1px solid var(--rota-border);
+    border-radius: var(--rota-radius-sm);
+    color: var(--rota-text);
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    font-weight: 500;
+    gap: var(--rota-space-sm);
+    padding: 8px var(--rota-space);
+    transition: var(--rota-transition);
+  }
+  
+  .rota-action-btn:hover {
+    background-color: var(--rota-background);
+    border-color: var(--rota-secondary);
+    color: var(--rota-secondary);
+  }
+  
+  /* Hero da rota */
+  .rota-hero {
+    background-color: var(--rota-card);
+    border-radius: 0 0 var(--rota-radius-lg) var(--rota-radius-lg);
+    box-shadow: var(--rota-shadow);
+    margin-bottom: var(--rota-space-lg);
+    overflow: hidden;
+    position: relative;
+  }
+  
+  .rota-hero__background {
+    height: 240px;
+    overflow: hidden;
+    position: relative;
+  }
+  
+  .rota-hero__img {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+  
+  .rota-hero__gradient {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+  }
+  
+  .rota-hero__content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin-top: -80px;
+    padding: 0 var(--rota-space-lg) var(--rota-space-lg);
+    position: relative;
+    text-align: center;
+    z-index: 3;
+  }
+  
+  .rota-hero__icon-wrap {
+    margin-bottom: var(--rota-space);
+  }
+  
+  .rota-hero__icon {
+    align-items: center;
+    background: linear-gradient(135deg, var(--rota-primary) 0%, var(--rota-primary-light) 100%);
+    border-radius: 50%;
+    box-shadow: var(--rota-shadow);
+    color: white;
+    display: flex;
+    height: 100px;
+    justify-content: center;
+    width: 100px;
+  }
+  
+  .rota-hero__icon img,
+  .rota-hero__icon svg {
+    height: 50px;
+    width: 50px;
+  }
+  
+  .rota-hero__title {
+    color: #024248;
+    font-size: 32px;
+    font-weight: 700;
+    margin: 0 0 var(--rota-space-sm);
+  }
+  
+  .rota-hero__description {
+    color: #333840;
+    font-size: 16px;
+    margin: 0 0 var(--rota-space-md);
+    max-width: 700px;
+  }
+  
+  .rota-hero__meta {
+    background-color: var(--rota-card);
+    border-radius: var(--rota-radius);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--rota-space-md);
+    justify-content: center;
+    padding: var(--rota-space);
+  }
+  
+  .rota-hero__stat {
+    align-items: center;
+    color: var(--rota-text-light);
+    display: flex;
+    font-size: 14px;
+    gap: var(--rota-space-sm);
+  }
+  
+  .rota-hero__stat svg {
+    color: var(--rota-secondary);
+  }
+  
+  /* Tabs de navegação */
+  .rota-tabs {
+    background-color: var(--rota-card);
+    border-radius: 0 0 var(--rota-radius-lg) var(--rota-radius-lg);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    margin-top: var(--rota-space-md);
+    position: sticky;
+    top: 70px;
+    z-index: 40;
+  }
+  
+  .rota-tabs__nav {
+    display: flex;
+    padding: 0 var(--rota-space-lg);
+    position: relative;
+    justify-content: center;
+    gap: 10px;
+    padding-bottom: 10px;
+  }
+  
+  .rota-tabs__link {
+    align-items: center;
+    color: white;
+    display: flex;
+    font-size: 14px;
+    font-weight: 500;
+    gap: var(--rota-space-sm);
+    padding: var(--rota-space) var(--rota-space-md);
+    position: relative;
+    text-decoration: none;
+    transition: var(--rota-transition);
+    white-space: nowrap;
+    z-index: 1;
+    background: #007D7A;
+    border-radius: 20px;
+  }
+  
+  .rota-tabs__link:hover {
+    color: white;
+    background-color: #006969;
+  }
+  
+  .rota-tabs__link.active {
+    background: #024248;
+    color: white;
+    border-radius: 20px;
+  }
+  
+  .rota-tabs__link svg {
+    height: 18px;
+    width: 18px;
+  }
+  
+  .rota-tabs__indicator {
+    background-color: var(--rota-secondary-light);
+    border-radius: var(--rota-radius) var(--rota-radius) 0 0;
+    bottom: 0;
+    height: 3px;
+    position: absolute;
+    transition: var(--rota-transition-slow);
+  }
+  
+  /* Container de conteúdo */
+  .rota-content {
+    padding: var(--rota-space-lg);
+  }
+  
+  /* Seções */
+  .rota-section {
+    background-color: var(--rota-card);
+    border-radius: var(--rota-radius-lg);
+    box-shadow: var(--rota-shadow);
+    display: none;
+    margin-bottom: var(--rota-space-lg);
+    overflow: hidden;
+  }
+  
+  .rota-section--active {
+    display: block;
+  }
+  
+  .rota-section__header {
+    border-bottom: 1px solid var(--rota-border);
+    padding: var(--rota-space-md) var(--rota-space-lg);
+  }
+  
+  .rota-section__header--accent {
+    background: linear-gradient(135deg, var(--rota-primary) 0%, var(--rota-primary-light) 100%);
+    border-bottom: none;
+  }
+  
+  .rota-section__title {
+    align-items: center;
+    color: var(--rota-text);
+    display: flex;
+    font-size: 22px;
+    font-weight: 600;
+    gap: var(--rota-space);
+    margin: 0;
+  }
+  
+  .rota-section__title--light {
+    color: white;
+  }
+  
+  .rota-section__icon {
+    color: var(--rota-primary);
+    height: 24px;
+    width: 24px;
+  }
+  
+  .rota-section__icon--light {
+    color: white;
+  }
+  
+  .rota-section__content {
+    padding: var(--rota-space-lg);
+  }
+  
+  .rota-section__intro {
+    margin-bottom: var(--rota-space-lg);
+  }
+  
+  /* Conteúdo rico */
+  .rota-section__content h2 {
+    color: var(--rota-text);
+    font-size: 20px;
+    font-weight: 600;
+    margin: var(--rota-space-lg) 0 var(--rota-space);
+  }
+  
+  .rota-section__content h3 {
+    color: var(--rota-text);
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;margin-bottom: 10px;
+  }
+  
+  .rota-section__content p {
+    color: var(--rota-text-light);
+    line-height: 1.6;
+    margin: 0 0 var(--rota-space);
+  }
+  
+
+  
+  .rota-section__content ul, 
+  .rota-section__content ol {
+    color: var(--rota-text-light);
+    line-height: 1.6;
+    margin: 0 0 var(--rota-space);
+    padding-left: var(--rota-space-lg);
+  }
+  
+  .rota-section__content li {
+    margin-bottom: var(--rota-space-sm);
+  }
+  
+  /* Citação */
+  .rota-quote {
+    background-color: var(--rota-background);
+    border-radius: var(--rota-radius);
+    margin: var(--rota-space-lg) 0;
+    padding: var(--rota-space-lg);
+    position: relative;
+  }
+  
+  .rota-quote__icon {
+    color: var(--rota-primary-light);
+    left: var(--rota-space-lg);
+    opacity: 0.2;
+    position: absolute;
+    top: var(--rota-space-lg);
+  }
+  
+  .rota-quote__text {
+    color: var(--rota-text);
+    font-size: 18px;
+    font-style: italic;
+    line-height: 1.6;
+    margin: 0;
+    padding-left: var(--rota-space-xl);
+    position: relative;
+    z-index: 1;
+  }
+  
+  /* Etapas */
+  .rota-steps {
+    counter-reset: step;
+    margin: var(--rota-space-lg) 0;
+  }
+  
+  .rota-steps__item {
+    border-left: 2px solid var(--rota-border);
+    display: flex;
+    margin-bottom: var(--rota-space-md);
+    padding-bottom: var(--rota-space-md);
+    padding-left: var(--rota-space-lg);
+    position: relative;
+  }
+  
+  .rota-steps__item:last-child {
+    border-left: 2px dashed var(--rota-border);
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+  
+  .rota-steps__number {
+    align-items: center;
+    background-color: var(--rota-secondary);
+    border-radius: 50%;
+    color: white;
+    display: flex;
+    font-weight: 600;
+    height: 36px;
+    justify-content: center;
+    left: -18px;
+    position: absolute;
+    top: 0;
+    width: 36px;
+  }
+  
+  .rota-steps__content {
+    padding-left: var(--rota-space);
+  }
+  
+  .rota-steps__title {
+    color: var(--rota-text);
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 var(--rota-space-sm);
+  }
+  
+  .rota-steps__text {
+    color: var(--rota-text-light);
+    margin: 0;
+  }
+  
+  /* Cápsulas */
+  .rota-capsulas {
+    display: grid;
+    gap: var(--rota-space-lg);
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+  
+  .rota-capsula {
+    background-color: var(--rota-card);
+    border: 1px solid var(--rota-border);
+    border-radius: var(--rota-radius);
+    box-shadow: var(--rota-shadow-sm);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    transition: var(--rota-transition);
+  }
+  
+  .rota-capsula:hover {
+    box-shadow: var(--rota-shadow);
+    transform: translateY(-4px);
+  }
+  
+  .rota-capsula--destaque {
+    border: 2px solid var(--rota-secondary);
+  }
+  
+  .rota-capsula__header {
+    position: relative;
+  }
+  
+  .rota-capsula__image {
+    height: 160px;
+    overflow: hidden;
+    position: relative;
+  }
+  
+  .rota-capsula__image img {
+    height: 100%;
+    object-fit: cover;
+    transition: var(--rota-transition-slow);
+    width: 100%;
+  }
+  
+  .rota-capsula:hover .rota-capsula__image img {
+    transform: scale(1.05);
+  }
+  
+  .rota-capsula__overlay {
+    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
+    bottom: 0;
+    height: 50%;
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+  
+  .rota-capsula__icon {
+    align-items: center;
+    background: linear-gradient(135deg, var(--rota-primary) 0%, var(--rota-primary-light) 100%);
+    color: white;
+    display: flex;
+    height: 120px;
+    justify-content: center;
+    width: 100%;
+  }
+  
+  .rota-capsula__icon svg {
+    height: 48px;
+    width: 48px;
+  }
+  
+  .rota-capsula__labels {
+    display: flex;
+    justify-content: space-between;
+    left: 0;
+    padding: var(--rota-space);
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+  }
+  
+  .rota-capsula__ribbon {
+    background-color: var(--rota-secondary);
+    border-radius: var(--rota-radius-sm);
+    box-shadow: var(--rota-shadow-sm);
+    color: white;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 4px var(--rota-space-sm);
+  }
+  
+  .rota-capsula__category {
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: var(--rota-radius-sm);
+    box-shadow: var(--rota-shadow-sm);
+    color: var(--rota-text-light);
+    display: flex;
+    font-size: 12px;
+    font-weight: 500;
+    gap: 4px;
+    padding: 4px var(--rota-space-sm);
+  }
+  
+  .rota-capsula__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: var(--rota-space);
+  }
+  
+  .rota-capsula__title {
+    color: var(--rota-text);
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 var(--rota-space);
+  }
+  
+  .rota-capsula__description {
+    color: var(--rota-text-light);
+    display: -webkit-box;
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: var(--rota-space);
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+  
+  .rota-capsula__accessibility-types {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--rota-space-sm);
+    margin-bottom: var(--rota-space);
+    margin-top: auto;
+  }
+  
+  .rota-capsula__type {
+    align-items: center;
+    border-radius: var(--rota-radius-sm);
+    display: flex;
+    font-size: 12px;
+    gap: 4px;
+    padding: 4px var(--rota-space-sm);
+  }
+  
+  .rota-capsula__type--visual {
+    background-color: rgba(171, 63, 221, 0.1);
+    color: var(--rota-visual);
+  }
+  
+  .rota-capsula__type--auditiva {
+    background-color: rgba(247, 181, 0, 0.1);
+    color: var(--rota-auditiva);
+  }
+  
+  .rota-capsula__type--motora {
+    background-color: rgba(229, 46, 77, 0.1);
+    color: var(--rota-motora);
+  }
+  
+  .rota-capsula__type--cognitiva {
+    background-color: rgba(51, 182, 121, 0.1);
+    color: var(--rota-cognitiva);
+  }
+  
+  .rota-capsula__footer {
+    padding: var(--rota-space);
+  }
+  
+  .rota-capsula__button {
+    align-items: center;
+    background-color: var(--rota-primary);
+    border: none;
+    border-radius: var(--rota-radius-sm);
+    color: white;
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    font-weight: 600;
+    gap: var(--rota-space-sm);
+    justify-content: center;
+    padding: var(--rota-space);
+    text-align: center;
+    transition: var(--rota-transition);
+    width: 100%;
+  }
+  
+  .rota-capsula__button:hover {
+    background-color: var(--rota-secondary);
+    color: white;
+    transform: translateY(-2px);
+  }
+  
+  /* Estado vazio */
+  .rota-empty {
+    align-items: center;
+    background-color: var(--rota-background);
+    border-radius: var(--rota-radius);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--rota-space-xl) var(--rota-space-lg);
+    text-align: center;
+  }
+  
+  .rota-empty__icon {
+    color: var(--rota-text-light);
+    margin-bottom: var(--rota-space);
+  }
+  
+  .rota-empty__title {
+    color: var(--rota-text);
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 var(--rota-space-sm);
+  }
+  
+  .rota-empty__text {
+    color: var(--rota-text-light);
+    margin: 0;
+    max-width: 400px;
+  }
+  
+  /* Materiais extras */
+  .rota-materiais {
+    display: grid;
+    gap: var(--rota-space);
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+  
+  .rota-material {
+    background-color: var(--rota-background);
+    border-radius: var(--rota-radius);
+    box-shadow: var(--rota-shadow-sm);
+    padding: var(--rota-space);
+    transition: var(--rota-transition);
+  }
+  
+  .rota-material:hover {
+    box-shadow: var(--rota-shadow);
+    transform: translateY(-2px);
+  }
+  
+  /* Rodapé */
+  .rota-footer {
+    background-color: var(--rota-card);
+    border-top: 1px solid var(--rota-border);
+    margin-top: var(--rota-space-xl);
+    padding: var(--rota-space-lg);
+  }
+  
+  .rota-footer__content {
+    display: grid;
+    gap: var(--rota-space-lg);
+    grid-template-columns: 1fr 1fr;
+  }
+  
+  .rota-footer__title {
+    color: var(--rota-text);
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 var(--rota-space);
+  }
+  
+  .rota-footer__nav,
+  .rota-footer__links {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rota-space-sm);
+  }
+  
+  .rota-footer__link {
+    color: var(--rota-text-light);
+    font-size: 14px;
+    transition: var(--rota-transition);
+  }
+  
+  .rota-footer__link:hover {
+    color: var(--rota-secondary);
+    padding-left: var(--rota-space-sm);
+  }
+  
+  /* Botão para voltar ao topo */
+  .rota-back-to-top {
+    align-items: center;
+    background-color: var(--rota-primary);
+    border: none;
+    border-radius: 50%;
+    bottom: var(--rota-space-lg);
+    box-shadow: var(--rota-shadow);
+    color: white;
+    cursor: pointer;
+    display: flex;
+    height: 50px;
+    justify-content: center;
+    opacity: 0;
+    position: fixed;
+    right: var(--rota-space-lg);
+    transform: translateY(20px);
+    transition: var(--rota-transition);
+    visibility: hidden;
+    width: 50px;
+    z-index: 100;
+  }
+  
+  .rota-back-to-top.visible {
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+  
+  .rota-back-to-top:hover {
+    background-color: var(--rota-secondary);
+    transform: translateY(-4px);
+  }
+  
+  .rota-back-to-top svg {
+    height: 20px;
+    width: 20px;
+  }
+  
+  /* Acessibilidade */
+  .skip-to-content {
+    background-color: var(--rota-secondary);
+    border-radius: 0 0 var(--rota-radius-sm) var(--rota-radius-sm);
+    color: white;
+    left: var(--rota-space);
+    padding: var(--rota-space-sm) var(--rota-space);
+    position: absolute;
+    top: -100px;
+    transition: var(--rota-transition);
+    z-index: 1000;
+  }
+  
+  .skip-to-content:focus {
+    top: 0;
+  }
+  
+  .visually-hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+  
+  /* Responsividade */
+  @media (max-width: 1024px) {
+    .rota-footer__content {
+      grid-template-columns: 1fr;
+    }
+    
+    .rota-hero__title {
+      font-size: 28px;
+    }
+    
+    .rota-capsulas {
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .rota-header {
+      padding: 0 var(--rota-space);
+    }
+    
+    .rota-content {
+      padding: var(--rota-space);
+    }
+    
+    .rota-section__header,
+    .rota-section__content {
+      padding: var(--rota-space);
+    }
+
+    .rota-tabs__nav {
+      justify-content: normal;
+    }
+
+    .rota-tabs {
+      padding-bottom: 20px;
+    }
+
+    .capsulas-index ul {
+      display: flex;
+      flex-direction: row;
+      overflow-x: scroll; 
+      white-space: nowrap; 
+      flex-wrap: nowrap;
+      width: 100%; 
+      -webkit-overflow-scrolling: touch; 
+      scrollbar-width: none; 
+      -ms-overflow-style: none; 
+      scroll-snap-type: x mandatory; 
+      padding: 0; 
+      margin: 0 -15px; 
+      padding: 0 0 15px 15px; 
+      list-style: none; 
+    }
+    
+
+    .rota-steps__number {
+      margin-left: 20px;
+    }
+
+    .rota-steps__item{
+      border: none;
+    }
+    
+    .rota-hero__content {
+      padding: 0 var(--rota-space) var(--rota-space);
+    }
+    
+    .rota-tabs__nav {
+      overflow-x: auto;
+      padding: 0 var(--rota-space);
+    }
+    
+    .rota-capsulas {
+      grid-template-columns: 1fr;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    .rota-sidebar {
+      display: none;
+    }
+    
+    .rota-main {
+      max-width: 100%;
+    }
+    
+    .rota-hero__title {
+      font-size: 24px;
+    }
+    
+    .rota-hero__meta {
+      flex-direction: column;
+      gap: var(--rota-space-sm);
+    }
+  }