*,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }

   body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       line-height: 1.6;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       overflow-x: hidden;
       /* Prevenir scroll horizontal */
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
       font-weight: 700;
       line-height: 1.2;
       color: #1f2937;
   }

   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1rem;
       width: 100%;
       /* Importante para móviles */
   }

   /* ============================================
       HEADER - EXACTO COMO EL DISEÑO
       ============================================ */

   .header-bg {
       color: white;
       padding: 8rem 0 5rem;
       position: relative;
       overflow: hidden;
       background: linear-gradient(135deg, var(--hero-primary), var(--hero-secondary));
   }

   .header-bg::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
       pointer-events: none;
   }

   .hero-overlay {
       position: absolute;
       inset: 0;
       background:
           linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0%, transparent 30%),
           linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
   }

   .hero-decorations {
       position: absolute;
       inset: 0;
       pointer-events: none;
   }

   .hero-decoration {
       position: absolute;
       border-radius: 50%;
       opacity: 0.1;
       animation: float 6s ease-in-out infinite;
   }

   .hero-decoration:nth-child(1) {
       top: 10%;
       left: 10%;
       width: 5rem;
       height: 5rem;
       background: white;
       animation-delay: 0s;
   }

   .hero-decoration:nth-child(2) {
       top: 33%;
       right: 20%;
       width: 8rem;
       height: 8rem;
       background: white;
       animation-delay: 1s;
   }

   .hero-decoration:nth-child(3) {
       bottom: 20%;
       left: 25%;
       width: 4rem;
       height: 4rem;
       background: white;
       animation-delay: 2s;
   }

   @keyframes float {

       0%,
       100% {
           transform: translateY(0px);
       }

       50% {
           transform: translateY(-20px);
       }
   }

   .hero-glow {
       position: absolute;
       border-radius: 50%;
       filter: blur(40px);
       pointer-events: none;
   }

   .glow-1 {
       top: 10%;
       left: 30%;
       width: 200px;
       height: 200px;
       background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
       animation: pulse 4s ease-in-out infinite;
   }

   .glow-2 {
       bottom: 20%;
       right: 20%;
       width: 150px;
       height: 150px;
       background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
       animation: pulse 6s ease-in-out infinite reverse;
   }

   @keyframes pulse {

       0%,
       100% {
           transform: scale(1);
           opacity: 0.3;
       }

       50% {
           transform: scale(1.2);
           opacity: 0.6;
       }
   }

   .header-content {
       position: relative;
       z-index: 10;
   }

   .hero-grid {
       display: grid;
       grid-template-columns: 1.5fr 1fr;
       gap: 4rem;
       align-items: center;
   }

   .blog-hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 0.75rem;
       padding: 10px;
       background: rgba(255, 255, 255, 0.15);
       backdrop-filter: blur(15px);
       -webkit-backdrop-filter: blur(15px);
       border-radius: 50px;
       border: 1px solid rgba(255, 255, 255, 0.25);
       font-weight: 600;
       font-size: 0.95rem;
       margin-bottom: 2rem;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   }

   .blog-hero-badge i {
       font-size: 1.1rem;
       background: rgba(255, 255, 255, 0.2);
       padding: 0.5rem;
       border-radius: 50%;
   }

   .header-content h1 {
       font-size: 3.75rem;
       font-weight: 800;
       letter-spacing: -0.02em;
       margin-bottom: 1.5rem;
       background: linear-gradient(45deg, #ffffff 30%, rgba(255, 255, 255, 0.9) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   }

   .hero-subtitle {
       font-size: 1.25rem;
       font-weight: 400;
       opacity: 0.95;
       max-width: 600px;
       margin-bottom: 2rem;
       line-height: 1.7;
   }

   .trust-indicators {
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
   }

   .trust-item {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       background: rgba(255, 255, 255, 0.15);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       padding: 0.5rem 1rem;
       border-radius: 9999px;
       color: white;
       font-size: 0.875rem;
       font-weight: 500;
       border: 1px solid rgba(255, 255, 255, 0.2);
   }

   .trust-item i {
       color: #f59e0b;
       font-size: 1rem;
   }

   .success-rate {
       color: #f59e0b;
       font-weight: 700;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   }

   .hero-illustration {
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
   }

   .hero-icon-circle {
       width: 20rem;
       height: 20rem;
       background: rgba(255, 255, 255, 0.1);
       border: 2px solid rgba(255, 255, 255, 0.2);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       box-shadow:
           0 10px 30px rgba(0, 0, 0, 0.1),
           inset 0 0 40px rgba(255, 255, 255, 0.05);
       animation: iconCirclePulse 3s ease-in-out infinite;
   }

   .hero-rotating-icon {
       font-size: 8rem;
       color: rgba(255, 255, 255, 0.9);
       transition: all 0.5s ease;
       animation: iconRotate 20s linear infinite;
       text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   }

   @keyframes iconCirclePulse {

       0%,
       100% {
           transform: scale(1);
           box-shadow:
               0 10px 30px rgba(0, 0, 0, 0.1),
               inset 0 0 40px rgba(255, 255, 255, 0.05);
       }

       50% {
           transform: scale(1.05);
           box-shadow:
               0 15px 40px rgba(0, 0, 0, 0.15),
               inset 0 0 60px rgba(255, 255, 255, 0.08);
       }
   }

   @keyframes iconRotate {
       0% {
           transform: rotate(0deg) scale(1);
       }

       25% {
           transform: rotate(5deg) scale(1.05);
       }

       50% {
           transform: rotate(0deg) scale(1);
       }

       75% {
           transform: rotate(-5deg) scale(1.05);
       }

       100% {
           transform: rotate(0deg) scale(1);
       }
   }

   /* ============================================
       BREADCRUMB - EXACTO COMO EL DISEÑO
       ============================================ */

   .breadcrumb-container {
       background: rgba(255, 255, 255, 0.95);
       border-bottom: 1px solid #e2e8f0;
       padding: 1rem 0;
       margin-bottom: 2rem;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
   }

   .breadcrumb {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1rem;
       /* Reducido para móviles */
   }

   .breadcrumb-list {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 0.75rem;
       list-style: none;
       margin: 0;
       padding: 0;
   }

   .breadcrumb-item {
       display: flex;
       align-items: center;
   }

   .breadcrumb-link {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 0.75rem;
       border-radius: 12px;
       color: #475569;
       text-decoration: none;
       font-size: 0.875rem;
       font-weight: 500;
       transition: all 0.15s ease;
       background: transparent;
       border: 1px solid transparent;
   }

   .breadcrumb-link:hover {
       color: var(--hero-primary);
       background: rgba(139, 92, 246, 0.05);
       border-color: rgba(139, 92, 246, 0.1);
       transform: translateY(-1px);
   }

   .breadcrumb-link i {
       font-size: 0.75rem;
       opacity: 0.8;
   }

   .breadcrumb-separator {
       color: #94a3b8;
       font-size: 0.75rem;
       margin: 0 0.25rem;
       opacity: 0.6;
   }

   .breadcrumb-separator i {
       font-size: 0.625rem;
   }

   .breadcrumb-current .breadcrumb-text {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 0.75rem;
       background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
       border: 1px solid rgba(139, 92, 246, 0.2);
       border-radius: 12px;
       color: var(--hero-primary);
       font-size: 0.875rem;
       font-weight: 600;
   }

   .breadcrumb-current .breadcrumb-text i {
       font-size: 0.75rem;
       opacity: 0.9;
   }

   /* ============================================
       MATERIAL SECTION
       ============================================ */

   .material-section {
       background: #ffffff;
       overflow-x: hidden;
       /* Prevenir scroll horizontal */
   }

   .section-header {
       text-align: center;
       margin-bottom: 3rem;
       padding: 0 1rem;
       /* Agregar padding en móviles */
   }

   .section-title {
       font-size: 2.5rem;
       font-weight: 800;
       color: #1f2937;
       margin-bottom: 0.5rem;
       word-wrap: break-word;
       /* Prevenir overflow de texto */
   }

   .section-subtitle {
       font-size: 1.125rem;
       color: #6b7280;
       max-width: 600px;
       margin: 0 auto;
       word-wrap: break-word;
   }

   /* FIX CRÍTICO PARA 320PX */
   .materials-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
       gap: 2rem;
       width: 100%;
       max-width: 100%;
   }

   /* ============================================
       RESPONSIVE - CON FIX PARA 320PX
       ============================================ */

   @media (max-width: 1024px) {
       .hero-grid {
           grid-template-columns: 1fr;
           gap: 3rem;
           text-align: center;
       }

       .header-content h1 {
           font-size: 3rem;
       }

       .hero-subtitle {
           max-width: none;
           margin-left: auto;
           margin-right: auto;
       }

       .trust-indicators {
           justify-content: center;
       }

       .hero-icon-circle {
           width: 16rem;
           height: 16rem;
       }

       .hero-rotating-icon {
           font-size: 6rem;
       }
   }

   @media (max-width: 768px) {
       .header-bg {
           padding: 5rem 0 3rem;
       }

       .header-content {
           margin-top: 55px;
       }

       .header-content h1 {
           font-size: 2.25rem;
       }

       .hero-subtitle {
           font-size: 1.125rem;
       }

       .trust-indicators {
           gap: 0.75rem;
       }

       .trust-item {
           font-size: 0.75rem;
           padding: 0.5rem 0.75rem;
       }

       .blog-hero-badge {
           font-size: 0.875rem;
           padding: 8px;
       }

       .hero-illustration {
           display: none !important;
       }

       .materials-grid {
           grid-template-columns: 1fr;
           gap: 1.5rem;
       }

       .section-title {
           font-size: 2rem;
       }

       .section-subtitle {
           font-size: 1rem;
       }
   }

   @media (max-width: 576px) {
       .header-content h1 {
           font-size: 1.875rem;
       }

       .trust-indicators {
           flex-direction: column;
           gap: 0.75rem;
           align-items: stretch;
       }

       .trust-item {
           justify-content: center;
           width: 100%;
       }

       .breadcrumb-container {
           padding: 0.75rem 0;
       }

       .breadcrumb {
           padding: 0 0.75rem;
           /* Reducir padding lateral */
       }

       .breadcrumb-list {
           gap: 0.5rem;
       }

       .breadcrumb-link,
       .breadcrumb-current .breadcrumb-text {
           font-size: 0.75rem;
           padding: 0.25rem 0.5rem;
           gap: 0.25rem;
       }

       .breadcrumb-link span,
       .breadcrumb-current .breadcrumb-text span {
           display: none;
       }

       .breadcrumb-link i,
       .breadcrumb-current .breadcrumb-text i {
           font-size: 0.875rem;
       }

       .breadcrumb-separator {
           margin: 0;
       }

       .materials-grid {
           gap: 1.25rem;
       }

       .section-title {
           font-size: 1.75rem;
       }

       .section-subtitle {
           font-size: 0.9375rem;
       }
   }

   /* ============================================
       FIX ESPECÍFICO PARA 320PX Y PANTALLAS MUY PEQUEÑAS
       ============================================ */
   @media (max-width: 375px) {
       .container {
           padding: 0 0.75rem;
           /* Reducir padding en móviles pequeños */
       }

       .header-bg {
           padding: 4rem 0 2.5rem;
       }

       .header-content h1 {
           font-size: 1.5rem;
           /* Reducir más el título */
           line-height: 1.3;
       }

       .hero-subtitle {
           font-size: 0.9375rem;
           line-height: 1.5;
       }

       .blog-hero-badge {
           font-size: 0.75rem;
           padding: 6px 10px;
           gap: 0.5rem;
       }

       .blog-hero-badge i {
           font-size: 0.9rem;
           padding: 0.375rem;
       }

       .trust-item {
           font-size: 0.6875rem;
           padding: 0.375rem 0.625rem;
       }

       .trust-item i {
           font-size: 0.875rem;
       }

       .breadcrumb {
           padding: 0 0.5rem;
           /* Aún más reducido */
       }

       .section-header {
           padding: 0 0.75rem;
           margin-bottom: 2rem;
       }

       .section-title {
           font-size: 1.5rem;
       }

       .section-subtitle {
           font-size: 0.875rem;
       }

       .materials-grid {
           gap: 1rem;
           padding: 0;
       }

       .material-section {
           padding: 2.5rem 0;
       }

       /* Ocultar decoraciones en móviles muy pequeños para mejorar performance */
       .hero-decoration {
           display: none;
       }

       .hero-glow {
           display: none;
       }
   }

   /* ============================================
       FIX ULTRA ESPECÍFICO PARA 320PX
       ============================================ */
   @media (max-width: 320px) {
       * {
           max-width: 100vw;
       }

       .container {
           padding: 0 0.5rem;
           width: 100%;
       }

       .header-content h1 {
           font-size: 1.375rem;
       }

       .hero-subtitle {
           font-size: 0.875rem;
       }

       .blog-hero-badge {
           font-size: 0.6875rem;
       }

       .section-title {
           font-size: 1.375rem;
       }

       .section-subtitle {
           font-size: 0.8125rem;
       }

       .materials-grid {
           grid-template-columns: 1fr !important;
           /* Forzar 1 columna */
           gap: 0.875rem;
       }
   }

   @media (prefers-reduced-motion: reduce) {

       .hero-decoration,
       .hero-icon-circle,
       .hero-rotating-icon,
       .glow-1,
       .glow-2 {
           animation: none !important;
       }
   }

   button:focus-visible,
   a:focus-visible {
       outline: 2px solid var(--hero-primary);
       outline-offset: 2px;
       border-radius: 8px;
   }

   /* ============================================
   CONTRIBUTE CTA - DISEÑO SIMPLE
   ============================================ */

   /* ============================================
   CONTRIBUTE CTA - DISEÑO UNIFICADO
   ============================================ */

   .contribute-cta {
       margin-top: 3rem;
       padding: 3rem 2rem;
       /* Fondo blanco limpio tipo tarjeta moderna */
       background: #ffffff;
       border: 1px solid #e2e8f0;
       border-radius: 24px;
       /* Radio más grande coincidiendo con el modal */
       text-align: center;
       /* Sombra suave y elegante */
       box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
       position: relative;
       overflow: hidden;
   }

   .contribute-icon {
       width: 64px;
       height: 64px;
       margin: 0 auto 1.5rem;
       /* Azul muy suave de fondo */
       background: #eff6ff;
       border-radius: 16px;
       /* Cuadrado redondeado moderno */
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform 0.3s ease;
   }


   .contribute-icon i {
       font-size: 1.75rem;
       /* Azul primario del tema */
       color: #2563eb;
   }

   .contribute-title {
       font-size: 1.875rem;
       font-weight: 800;
       /* Color oscuro del tema (#1e293b) */
       color: #1e293b;
       margin-bottom: 0.75rem;
       letter-spacing: -0.02em;
   }

   .contribute-description {
       font-size: 1.05rem;
       /* Color gris secundario (#64748b) */
       color: #64748b;
       margin-bottom: 2rem;
       max-width: 540px;
       margin-left: auto;
       margin-right: auto;
       line-height: 1.6;
   }

   /* Disclaimer rediseñado para ser más limpio */
   .contribute-disclaimer {
       padding: 1rem 1.25rem;
       /* Fondo amarillo muy pálido */
       background: #fffbeb;
       border: 1px solid #fef3c7;
       border-radius: 12px;
       margin-bottom: 2rem;
       text-align: left;
       max-width: 600px;
       margin-left: auto;
       margin-right: auto;
       display: flex;
       gap: 1rem;
       align-items: flex-start;
   }

   .contribute-disclaimer i {
       color: #d97706;
       /* Amarillo oscuro legible */
       font-size: 1.25rem;
       margin-top: 2px;
       flex-shrink: 0;
   }

   .contribute-disclaimer p {
       color: #92400e;
       /* Marrón legible */
       font-size: 0.9rem;
       line-height: 1.5;
       margin: 0;
   }

   .contribute-disclaimer strong {
       font-weight: 700;
       color: #78350f;
   }

   /* Botón primario azul sólido */
   .contribute-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.75rem;
       padding: 1rem 2rem;
       /* Azul primario sólido */
       background: #2563eb;
       color: white;
       border-radius: 14px;
       font-weight: 600;
       font-size: 1rem;
       text-decoration: none;
       transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
       border: 1px solid transparent;
   }

   .contribute-btn:hover {
       background: #1d4ed8;
       transform: translateY(-2px);
       box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
   }

   .contribute-btn:active {
       transform: translateY(0);
   }

   .contribute-btn i {
       font-size: 1.25rem;
   }

   .contribute-handle {
       font-size: 0.85rem;
       opacity: 0.8;
       font-weight: 400;
       margin-left: 0.25rem;
       border-left: 1px solid rgba(255, 255, 255, 0.3);
       padding-left: 0.75rem;
   }

   /* ============================================
   RESPONSIVE
   ============================================ */

   @media (max-width: 768px) {
       .contribute-cta {
           padding: 2.5rem 1.5rem;
           margin-top: 2rem;
           border-radius: 20px;
       }

       .contribute-title {
           font-size: 1.5rem;
       }

       .contribute-disclaimer {
           flex-direction: column;
           /* Apilar icono y texto */
           align-items: center;
           text-align: center;
           gap: 0.5rem;
       }

       .contribute-disclaimer i {
           margin-top: 0;
       }
   }

   @media (max-width: 480px) {
       .contribute-cta {
           padding: 2rem 1.25rem;
           /* En móviles muy pequeños, reducir sombra y borde */
           border-radius: 16px;
       }

       .contribute-icon {
           width: 56px;
           height: 56px;
       }

       .contribute-title {
           font-size: 1.35rem;
       }

       .contribute-description {
           font-size: 0.95rem;
       }

       .contribute-btn {
           width: 100%;
           /* Botón full width en móvil */
           padding: 1rem;
           flex-direction: column;
           /* Apilar texto y handle si es necesario */
           gap: 0.25rem;
       }

       .contribute-handle {
           border-left: none;
           padding-left: 0;
           margin-left: 0;
           opacity: 0.9;
           font-size: 0.8rem;
       }
   }

   /* ============================================
   FAQ SECTION - PREMIUM DESIGN
   ============================================ */

   .faq-section {
       padding: 6rem 0;
       background: #f8fafc;
       position: relative;
       overflow: hidden;
   }

   /* Decoración de fondo sutil */
   .faq-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 1px;
       background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
   }

   .faq-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 2rem;
       margin-top: 3rem;
   }

   .faq-card {
       background: #ffffff;
       border-radius: 20px;
       padding: 2rem;
       border: 1px solid rgba(226, 232, 240, 0.6);
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       height: 100%;
       position: relative;
       overflow: hidden;
   }

   .faq-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
       border-color: rgba(139, 92, 246, 0.2);
   }

   /* Línea decorativa superior en hover */
   .faq-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, var(--hero-primary, #3b82f6), var(--hero-secondary, #1d4ed8));
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .faq-card:hover::before {
       opacity: 1;
   }

   .faq-icon {
       width: 48px;
       height: 48px;
       background: #eff6ff;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.5rem;
       color: var(--hero-primary, #3b82f6);
       font-size: 1.25rem;
       transition: all 0.3s ease;
   }

   .faq-card:hover .faq-icon {
       background: var(--hero-primary, #3b82f6);
       color: white;
       transform: rotate(-10deg);
   }

   .faq-question {
       font-size: 1.25rem;
       font-weight: 700;
       color: #1e293b;
       margin-bottom: 1rem;
       line-height: 1.4;
   }

   .faq-answer {
       color: #64748b;
       line-height: 1.7;
       font-size: 0.95rem;
   }

   /* Variante para página interna de clase */
   .class-faq-section {
       margin-top: 5rem;
       padding-top: 4rem;
       border-top: 1px solid #e2e8f0;
   }

   @media (max-width: 768px) {
       .faq-grid {
           grid-template-columns: 1fr;
           gap: 1.5rem;
       }

       .faq-card {
           padding: 1.5rem;
       }

       .faq-question {
           font-size: 1.1rem;
       }
   }

   /* ==================== DARK MODE THEME ==================== */
   [data-theme='dark'] {
       --gray-50: #0f172a;
       --gray-100: #1e293b;
       --gray-200: #334155;
       --gray-300: #475569;
       --gray-400: #64748b;
       --gray-500: #94a3b8;
       --gray-600: #cbd5e1;
       --gray-700: #e2e8f0;
       --gray-800: #f1f5f9;
       --gray-900: #f8fafc;
       --white: #1e293b;
   }

   [data-theme='dark'] body {
       background-color: #0f172a;
       color: #e2e8f0;
   }

   [data-theme='dark'] .material-card {
       background: #1e293b;
       border-color: #334155;
   }

   [data-theme='dark'] .material-title {
       color: #f8fafc;
   }

   [data-theme='dark'] .material-description {
       color: #cbd5e1;
   }

   [data-theme='dark'] .category-card {
       background: #1e293b;
       border-color: #334155;
   }

   /* Dark Mode - Breadcrumb */
   [data-theme='dark'] .breadcrumb-container {
       background: rgba(15, 23, 42, 0.95);
       border-bottom-color: #334155;
   }

   [data-theme='dark'] .breadcrumb-link {
       color: #94a3b8;
   }

   [data-theme='dark'] .breadcrumb-link:hover {
       color: #a78bfa;
       background: rgba(139, 92, 246, 0.1);
       border-color: rgba(139, 92, 246, 0.2);
   }

   [data-theme='dark'] .breadcrumb-current .breadcrumb-text {
       background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
       border-color: rgba(139, 92, 246, 0.3);
       color: #a78bfa;
   }

   /* Dark Mode - Section */
   [data-theme='dark'] .licencias-section {
       background: #0f172a;
   }

   [data-theme='dark'] .section-title {
       color: #f8fafc;
   }

   [data-theme='dark'] .section-subtitle {
       color: #94a3b8;
   }

   /* Dark Mode - FAQ Section */
   [data-theme='dark'] .faq-section {
       background: #1e293b;
   }

   [data-theme='dark'] .faq-card {
       background: #0f172a;
       border-color: #334155;
   }

   [data-theme='dark'] .faq-question {
       color: #f8fafc;
   }

   [data-theme='dark'] .faq-answer {
       color: #94a3b8;
   }

   /* Dark Mode - Contribute CTA */
   [data-theme='dark'] .contribute-cta {
       background: #1e293b;
       border-color: #334155;
   }

   [data-theme='dark'] .contribute-title {
       color: #f8fafc;
   }

   [data-theme='dark'] .contribute-description {
       color: #94a3b8;
   }

   [data-theme='dark'] .contribute-icon {
       background: rgba(37, 99, 235, 0.2);
   }

   [data-theme='dark'] .contribute-disclaimer {
       background: rgba(217, 119, 6, 0.15);
       border-color: rgba(217, 119, 6, 0.3);
   }

   [data-theme='dark'] .contribute-disclaimer p {
       color: #fcd34d;
   }

   [data-theme='dark'] .contribute-disclaimer strong {
       color: #fcd34d;
   }

   /* Dark Mode - Material Section */
   [data-theme='dark'] .material-section {
       background: #0f172a;
   }

   /* Dark Mode - Class FAQ Section */
   [data-theme='dark'] .class-faq-section {
       background: #0f172a;
       padding: 3rem 0;
   }

   [data-theme='dark'] .class-faq-section .section-title {
       color: #f8fafc;
   }

   [data-theme='dark'] .class-faq-section .faq-grid {
       margin-top: 2rem;
   }

   [data-theme='dark'] .class-faq-section .faq-card {
       background: #1e293b;
       border: 1px solid #334155;
       border-radius: 1rem;
       padding: 1.5rem;
   }

   [data-theme='dark'] .class-faq-section .faq-icon {
       color: #a78bfa;
   }

   [data-theme='dark'] .class-faq-section .faq-question {
       color: #f8fafc;
   }

   [data-theme='dark'] .class-faq-section .faq-answer {
       color: #94a3b8;
   }

   /* Dark Mode - Tab Pane */
   [data-theme='dark'] .tab-pane {
       background: transparent;
   }

   [data-theme='dark'] .tab-pane .section-header {
       background: transparent;
   }

   [data-theme='dark'] .tab-pane .section-title {
       color: #f8fafc;
   }

   [data-theme='dark'] .tab-pane .section-subtitle {
       color: #94a3b8;
   }