/* * SISTEMA DE VARIABLES */
        :root {
            /* Marca */
            --color-titulo: #06008f;
            --color-texto: #2c2c2c;
            --color-interactivo: #18aaf4;
            --color-acento: #1974e1;
            
            /* Estados */
            --color-exito: #28a745;
            --color-advertencia: #ffc107;
            --color-error: #dc3545;
            --color-inactivo: #94a3b8; 

            /* Degradados */
            --gradient-qanty: linear-gradient(135deg, #665fee, #27c2de, #05f2db);
            --gradient-btn: linear-gradient(90deg, #18aaf4 0%, #1974e1 100%); /* Nuevo gradiente para botones */
            
            /* UI */
            --bg-body: #f8fafc;
            --bg-sidebar: #ffffff;
            --bg-card: rgba(255, 255, 255, 0.7); /* Fondo base para glassmorphism */
            --bg-card-hover: #f1f5f9;
            --bg-grid-example: #e2e8f0; 
            --border-color: #e2e8f0;
            --text-main: #334155;
            --text-muted: #64748b;
            
            /* Sombras & Elevaciones */
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
            --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.05); /* Sombra específica glass */
            
            /* Radios - SISTEMA UNIFICADO */
            --radius-sm: 4px;   /* Etiquetas pequeñas, inputs simples */
            --radius-md: 8px;   /* Enlaces nav, elementos internos pequeños */
            --radius-element: 12px; /* Botones, Iconos, Cajas internas, Badges grandes */
            --radius-lg: 16px;  /* Tarjetas estándar */
            --radius-container: 24px; /* Contenedores grandes (Hero, Banners, Secciones destacadas) */

            /* Tipografía */
            --font-display: 'Plus Jakarta Sans', sans-serif;
            --font-body: 'Inter', sans-serif;
        }

        /* Modo Oscuro */
        html.dark {
            --color-titulo: #ffffff;
            --color-texto: #e2e8f0;
            --bg-body: #0f172a;
            --bg-sidebar: #1e293b;
            --bg-card: rgba(30, 41, 59, 0.6); /* Glass oscuro */
            --bg-card-hover: #334155;
            --bg-grid-example: #334155;
            --border-color: rgba(255, 255, 255, 0.1);
            --text-main: #f1f5f9;
            --text-muted: #94a3b8;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
            --color-inactivo: #475569;
        }

        /* RESET & BASE */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body {
            font-family: var(--font-body);
            background-color: var(--bg-body);
            color: var(--text-main);
            line-height: 1.6;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-display);
            color: var(--color-titulo);
            line-height: 1.2;
        }

        a { text-decoration: none; color: inherit; }

        /* LAYOUT PRINCIPAL */
        .app-container { display: flex; height: 100vh; }

        .sidebar {
            width: 280px;
            background-color: var(--bg-sidebar);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            transition: background-color 0.3s ease;
            flex-shrink: 0;
            z-index: 20;
        }

        .sidebar-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .brand-logo {
            width: 32px;
            height: 32px;
            background: var(--gradient-btn); /* Logo con gradiente también */
            color: white;
            border-radius: var(--radius-md); /* Unificado a 8px */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-family: var(--font-display);
        }

        .sidebar-nav { flex: 1; padding: 1.5rem; overflow-y: auto; }

        .nav-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            font-weight: 600;
            margin: 1.5rem 0 0.5rem 0.75rem;
        }
        .nav-label:first-child { margin-top: 0; }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0.75rem;
            border-radius: var(--radius-md); /* Unificado a 8px */
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-muted);
            transition: all 0.2s;
        }

        .nav-link:hover {
            background-color: var(--bg-card-hover);
            color: var(--color-titulo);
        }

        .nav-link.active {
            background-color: rgba(24, 170, 244, 0.1);
            color: var(--color-interactivo);
        }

        .sidebar-footer {
            padding: 1.5rem;
            border-top: 1px solid var(--border-color);
        }

        .main-content {
            flex: 1;
            overflow-y: auto;
            position: relative;
            padding: 3rem 4rem;
            background-color: var(--bg-body);
            
            /* Fondo sutil para resaltar el glassmorphism */
            background-image: 
                radial-gradient(circle at 0% 0%, rgba(24, 170, 244, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, rgba(102, 95, 238, 0.03) 0%, transparent 50%);
        }

        /* SEPARADOR DE SECCIONES PRINCIPALES */
        .main-divider {
            margin: 6rem 0 3rem 0;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .main-divider span {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-titulo);
            background: transparent; /* Transparente para ver el fondo sutil */
            padding-right: 1rem;
        }

        /* GRID SYSTEM */
        .grid-row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -1rem;
            margin-left: -1rem;
        }
        
        [class*="col-"] {
            position: relative;
            width: 100%;
            padding-right: 1rem;
            padding-left: 1rem;
        }

        .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
        .col-6 { flex: 0 0 50%; max-width: 50%; }
        .col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
        .col-12 { flex: 0 0 100%; max-width: 100%; }

        @media (max-width: 768px) {
            .col-4, .col-6, .col-8 { 
                flex: 0 0 100%; 
                max-width: 100%; 
                margin-bottom: 1rem; 
            }
        }

        .grid-demo-container {
            background-color: var(--bg-card-hover);
            border: 1px dashed var(--border-color);
            padding: 1rem;
            border-radius: var(--radius-md); /* 8px */
            margin-bottom: 1rem;
        }
        .grid-demo-col {
            background-color: var(--bg-grid-example);
            padding: 1.5rem;
            border-radius: var(--radius-sm); /* 4px */
            text-align: center;
            font-size: 0.85rem;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .grid-demo-col strong { color: var(--color-titulo); display: block; margin-bottom: 0.25rem; }

 /* ESTILOS NUEVOS PARA TARJETAS SOLICITADAS */
        .seccion-tarjetas, 
        .manual-container {
            margin-bottom: 4rem;
        }

        .encabezado-intro {
            margin-bottom: 3rem;
            text-align: left; /* O center si prefieres */
        }

        .encabezado-intro .lead {
            font-size: 1.15rem;
            color: var(--text-muted);
            max-width: 800px;
            line-height: 1.7;
        }

        /* Tarjeta Estándar con Icono y Header */
        .card-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--border-color); /* Opcional */
            padding-bottom: 0.75rem; /* Opcional */
        }

        /* Ajuste genérico de card-icon para imágenes */
        .card-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
        }
        
        /* Icono en header más pequeño */
        .card-header .card-icon {
            width: 48px;
            height: 48px;
            background: transparent; /* El img ya tiene fondo si es placeholder */
            flex-shrink: 0;
            padding: 0;
        }

        .card-header h3 {
            margin: 0;
            font-size: 1.15rem;
            font-weight: 700;
        }

        /* Tarjeta de Secuencia (Numerada) */
        .card--secuencia {
            position: relative;
            overflow: hidden;
            height: 100%; /* Para igualar alturas en grid */
            border-left: 4px solid var(--color-interactivo); /* Detalle visual */
            padding-top: 2.5rem; /* Espacio para el número */
        }

        .card-secuencia__numero {
            position: absolute;
            top: -10px;
            right: 10px;
            font-size: 4rem;
            font-weight: 800;
            color: var(--border-color);
            opacity: 0.5;
            font-family: var(--font-display);
            line-height: 1;
            z-index: 0;
        }

        .card--secuencia h3 {
            position: relative;
            z-index: 1;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
            font-size: 1.25rem;
        }
        
        .card--secuencia .card-icon {
             width: 60px;
             height: 60px;
             background: transparent;
             margin-bottom: 0;
             position: relative;
             z-index: 1;
        }
        
        .card--secuencia p {
            position: relative;
            z-index: 1;
            color: var(--text-muted);
        }

        /* Tarjeta Destacada (Features Centradas) */
        .card--destacado {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 1.5rem; /* Gap vertical para grid */
        }

        .card--destacado:hover {
            transform: translateY(-5px);
            border-color: var(--color-interactivo);
        }

        .card-icono-destacado {
            width: 80px;
            height: 80px;
            margin-bottom: 1.5rem;
            border-radius: 50%;
            overflow: hidden;
            background: var(--bg-card-hover);
            padding: 10px; /* Padding interno */
            box-shadow: var(--shadow-sm);
        }
        
        .card-icono-destacado img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .card--destacado h3 {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            color: var(--color-titulo);
        }

        /* --- FIN ESTILOS NUEVOS --- */

        .grid-demo-container {
            background-color: var(--bg-card-hover);
            border: 1px dashed var(--border-color);
            padding: 1rem;
            border-radius: var(--radius-md); /* 8px */
            margin-bottom: 1rem;
        }
        .grid-demo-col {
            background-color: var(--bg-grid-example);
            padding: 1.5rem;
            border-radius: var(--radius-sm); /* 4px */
            text-align: center;
            font-size: 0.85rem;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .grid-demo-col strong { color: var(--color-titulo); display: block; margin-bottom: 0.25rem; }


        /* COMPONENTES: BOTONES */
        .btn, .demo-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-element); /* Unificado a 12px */
            font-weight: 600;
            font-size: 0.95rem;
            font-family: var(--font-body); /* Asegura consistencia tipográfica */
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid transparent;
            gap: 8px;
            text-decoration: none;
        }
        /* Tamaños */
        .btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
        .btn-lg { padding: 1rem 2rem; font-size: 1.1rem; }

        /* Variantes - BOTÓN PRIMARIO CON GRADIENTE */
        .btn-primary, .demo-button {
            background-image: var(--gradient-btn); /* Gradiente izq-der */
            background-size: 110% auto;
            color: white;
            box-shadow: 0 4px 14px 0 rgba(24, 170, 244, 0.39);
            border: none;
        }
        .btn-primary:hover:not(:disabled), .demo-button:hover { 
            background-position: right center; /* Movimiento sutil del gradiente */
            transform: translateY(-2px); 
            box-shadow: 0 6px 20px rgba(24, 170, 244, 0.23);
            color: white;
        }

        .btn-secondary {
            background-color: var(--bg-card-hover);
            color: var(--text-main);
            border-color: var(--border-color);
        }
        .btn-secondary:hover:not(:disabled) {
            background-color: var(--border-color);
            color: var(--color-titulo);
        }

        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-main);
        }
        .btn-outline:hover:not(:disabled) { 
            border-color: var(--color-interactivo); 
            color: var(--color-interactivo); 
        }

        .btn-ghost {
            background-color: transparent;
            color: var(--text-muted);
        }
        .btn-ghost:hover:not(:disabled) {
            background-color: var(--bg-card-hover);
            color: var(--color-interactivo);
        }

        /* Estados */
        .btn:disabled, .btn.disabled {
            opacity: 0.6;
            cursor: not-allowed;
            pointer-events: none;
            background: var(--bg-card-hover); /* Override gradient */
            color: var(--color-inactivo);
            box-shadow: none;
            border-color: transparent;
        }

        .btn-loading {
            position: relative;
            color: transparent !important;
            pointer-events: none;
        }
        .btn-loading::after {
            content: "";
            position: absolute;
            width: 1rem;
            height: 1rem;
            border: 2px solid white;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 0.8s linear infinite;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

        .btn-toggle-theme { width: 100%; background-color: var(--bg-card-hover); color: var(--text-main); }

        /* COMPONENTES: TARJETAS (GLASSMORPHISM) */
        .card {
            background: var(--bg-card);
            /* Propiedades clave Glassmorphism */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5); /* Borde sutil blanco */
            
            border-radius: var(--radius-lg); /* Unificado a 16px */
            padding: 1.5rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-glass);
        }
        
        /* Ajuste de borde para modo oscuro */
        html.dark .card {
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: var(--color-interactivo); /* Highlight sutil */
        }
        
        /* Estilos específicos para demo de cards */
        .card-image-top {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: var(--radius-element); /* Unificado a 12px (antes hardcoded) */
            margin-bottom: 1rem;
            background-color: var(--bg-card-hover);
        }
        .card-meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }
        .card-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--color-titulo);
        }
        .card-text {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }

        /* COMPONENTES: PROMO BANNER (NUEVO) */
        .app-promo-banner {
            display: flex;
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: var(--radius-container); /* Unificado a 24px */
            overflow: hidden;
            box-shadow: var(--shadow-glass);
            margin-top: 2rem;
            margin-bottom: 2rem;
            position: relative;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        html.dark .app-promo-banner { border-color: rgba(255, 255, 255, 0.1); }

        .app-promo-banner:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .app-promo-content {
            flex: 1;
            padding: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            z-index: 2;
        }

        .app-promo-content h3 {
            font-size: 1.75rem;
            margin-bottom: 1rem;
            color: var(--color-titulo);
            line-height: 1.2;
        }

        .app-promo-content p {
            color: var(--text-muted);
            margin-bottom: 2rem;
            font-size: 1.1rem;
            line-height: 1.6;
            max-width: 90%;
        }

        .app-promo-image {
            flex: 1;
            min-height: 300px;
            position: relative;
            overflow: hidden;
        }

        .app-promo-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .app-promo-banner:hover .app-promo-image img {
            transform: scale(1.05);
        }

        @media (max-width: 768px) {
            .app-promo-banner {
                flex-direction: column-reverse; /* Imagen arriba en móvil */
            }
            .app-promo-image {
                min-height: 200px;
                max-height: 250px;
            }
            .app-promo-content {
                padding: 2rem;
            }
        }

        /* TABLAS */
        .table-responsive { overflow-x: auto; }
        .manual-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
        .manual-table th {
            text-align: left; padding: 1rem 1.5rem; background-color: rgba(241, 245, 249, 0.5); /* Glass-ish header */
            color: var(--text-muted); font-weight: 700; text-transform: uppercase;
            font-size: 0.75rem; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-color);
        }
        .manual-table td { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color); color: var(--text-main); vertical-align: top; }
        .manual-table tr:last-child td { border-bottom: none; }
        .manual-table code {
            display: inline-block; background-color: var(--bg-card-hover); padding: 2px 6px;
            border-radius: var(--radius-sm); /* Unificado a 4px */
            font-family: monospace; font-size: 0.85rem;
            color: var(--text-muted); border: 1px solid var(--border-color);
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95rem;
            margin-bottom: 1rem;
        }
        .table th, 
        .table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        .table th {
            font-weight: 700;
            color: var(--color-titulo);
            background-color: rgba(241, 245, 249, 0.5);
            border-bottom: 2px solid var(--border-color);
        }
        html.dark .table th { background-color: rgba(30, 41, 59, 0.5); }
        
        .table tr:hover td {
            background-color: rgba(24, 170, 244, 0.05); /* Hover tint */
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0,0,0,0.02);
        }
        html.dark .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(255,255,255,0.02);
        }

        /* HERO & SECTIONS */
        .hero-section {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-container); /* Unificado a 24px */
            padding: 3rem;
            margin-bottom: 4rem;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-md);
            /* Glassmorphism para Hero también */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .hero-bg-glow {
            position: absolute; top: -50px; right: -50px; width: 300px; height: 300px;
            background: var(--gradient-qanty); opacity: 0.15; filter: blur(80px); border-radius: 50%;
        }

        .section-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
        .section-icon {
            width: 48px; height: 48px; border-radius: var(--radius-element); /* Unificado a 12px */
            background-color: rgba(24, 170, 244, 0.1); color: var(--color-interactivo);
            display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
        }

        .grid-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
        .color-swatch-box { height: 120px; border-radius: var(--radius-element); /* Unificado a 12px */ margin-bottom: 1rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
        .color-specs {
            margin-top: 0.75rem; margin-bottom: 0.75rem; font-size: 0.8rem;
            color: var(--text-muted); background: var(--bg-card-hover); padding: 10px;
            border-radius: var(--radius-md); /* Unificado a 8px */
            border: 1px solid var(--border-color);
        }
        .color-specs div { display: flex; justify-content: space-between; font-family: monospace; margin-bottom: 4px; }
        .code-pill {
            display: block; background-color: transparent; padding: 8px; border-radius: 6px; /* Pill shape específica */
            font-family: monospace; font-size: 0.8rem; color: var(--text-muted); cursor: pointer;
            border: 1px dashed var(--border-color); text-align: center; transition: all 0.2s;
        }
        .code-pill:hover { border-color: var(--color-interactivo); color: var(--color-interactivo); background-color: rgba(24, 170, 244, 0.05); }

        pre {
            background-color: #1e1e1e; color: #d4d4d4; padding: 1.25rem; border-radius: var(--radius-md); /* Unificado a 8px */
            overflow-x: auto; font-family: monospace; font-size: 0.85rem; margin-top: 1rem;
            border: 1px solid var(--border-color);
        }

        /* Typography & List Styles */
        .typography-example h1, 
        .typography-example h2, 
        .typography-example h3 { 
            margin-top: 2rem; 
            margin-bottom: 0.75rem; 
        }
        .typography-example h1:first-child { margin-top: 0; }
        .typography-example p { margin-bottom: 1.5rem; color: var(--text-main); line-height: 1.7; }
        
        .typography-example a { 
            color: var(--color-interactivo); 
            text-decoration: underline; 
            text-decoration-thickness: 2px; 
            text-underline-offset: 4px; 
            font-weight: 500; 
            transition: color 0.2s; 
        }
        .typography-example a:hover { 
            color: var(--color-acento); 
            text-decoration-color: var(--color-acento);
        }
        
        .link-disabled {
            color: var(--color-inactivo) !important;
            text-decoration: none !important;
            cursor: not-allowed;
            pointer-events: none;
        }

        .typo-list { padding-left: 0; margin-bottom: 2rem; list-style: none; }
        .typo-list li { margin-bottom: 0.75rem; position: relative; padding-left: 1.5rem; }
        ul.typo-list li::before {
            content: "•"; color: var(--color-interactivo); font-weight: bold;
            display: inline-block; position: absolute; left: 0; width: 1em; font-size: 1.2em; line-height: 1;
        }
        ol.typo-list { counter-reset: qanty-counter; }
        ol.typo-list li { padding-left: 2rem; }
        ol.typo-list li::before {
            counter-increment: qanty-counter;
            content: counter(qanty-counter) ".";
            color: var(--color-interactivo);
            font-weight: 700;
            font-family: var(--font-display);
            position: absolute;
            left: 0;
        }

        .typo-quote {
            border-left: 4px solid var(--color-interactivo);
            background: linear-gradient(to right, var(--bg-card-hover), transparent);
            padding: 1.5rem 2rem; border-radius: 0 var(--radius-element) var(--radius-element) 0; /* Unificado 12px */
            color: var(--text-main); margin: 2rem 0; position: relative;
        }
        .typo-quote::before {
            content: '"';
            position: absolute;
            top: 0;
            left: 10px;
            font-size: 4rem;
            color: var(--color-interactivo);
            opacity: 0.1;
            font-family: serif;
            line-height: 1;
        }

        /* --- ESTILOS DE COMPONENTES DEL BLOG (AGREGADO) --- */
        .Lead-inicial { font-size: 1.25rem; font-weight: 500; color: var(--color-titulo); border-left: 4px solid var(--color-interactivo); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; }
        .resumen-introductorio { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-container); /* Unificado a 24px */ padding: 2rem; margin-bottom: 2rem; backdrop-filter: blur(10px); }
        .card-icon-container { display: flex; justify-content: center; align-items: center; height: 100%; }
        .icon-circle { width: 80px; height: 80px; background: var(--gradiente-qanty); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); }
        .resumen-introductorio__icono-animado img { width: 40px; height: 40px; object-fit: contain; filter: brightness(0) invert(1); }
        .contenido-texto p.lead { font-size: 1.1rem; line-height: 1.6; margin: 0; color: var(--text-main); }
        
        /* Corrección de clase: .Snippet-destacado en lugar de .Sniped-destacado */
        .Snippet-destacado { background: rgba(255, 193, 7, 0.1); border-left: 4px solid var(--color-advertencia); padding: 1.5rem; border-radius: 0 var(--radius-element) var(--radius-element) 0; /* Unificado 12px */ margin: 2rem 0; color: var(--text-main); }
        
        /* BANNER CONTAINER ACTUALIZADO - EFECTO CRISTAL TRANSLÚCIDO */
        .banner-container {
            /* FIX MODO OSCURO: Forzamos colores oscuros locales porque el fondo siempre es claro */
            --color-titulo: #06008f;
            --text-main: #334155;
            --text-muted: #64748b;
            --color-interactivo: #18aaf4;

            /* Fondo Cristal: Degradado blanco con transparencia */
            background: linear-gradient(
                120deg, 
                rgba(255, 255, 255, 0.8) 0%, 
                rgba(255, 255, 255, 0.4) 100%
            );
            
            /* Efecto de desenfoque de fondo (Frosted Glass) */
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            
            /* COHERENCIA: Radio de 16px igual que las tarjetas estándar */
            border-radius: var(--radius-lg); 
            
            /* Borde Cristalino */
            border: 1px solid rgba(255, 255, 255, 0.6);
            
            /* Sombra suave y elevada para separar del fondo */
            box-shadow: 
                0 8px 32px 0 rgba(31, 38, 135, 0.05),
                inset 0 0 0 1px rgba(255, 255, 255, 0.4); /* Luz interna */
            
            /* Padding para mantenerlo angosto pero elegante */
            padding: 2rem 3rem;
            
            text-align: left;
            color: var(--text-main);
            margin: 3rem 0;
            position: relative;
            overflow: hidden;
        }

        /* Destello de luz suave (Reflejo de cristal) */
        .banner-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(
                90deg, 
                transparent, 
                rgba(255, 255, 255, 0.6), 
                transparent
            );
            transform: skewX(-25deg);
            animation: shimmer 7s infinite ease-in-out;
            pointer-events: none;
            mix-blend-mode: overlay;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            20% { left: 200%; }
            100% { left: 200%; }
        }

        .banner-content {
            position: relative;
            z-index: 2;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 2.5rem;
        }

        .logo-animation {
            flex: 0 0 auto;
            padding-right: 2rem;
            /* Separador más sutil para cristal */
            border-right: 1px solid rgba(0,0,0,0.05);
            margin-right: 0.5rem;
            display: flex;
            align-items: center;
        }

        .logo-animation img {
            height: 56px; /* Grande y protagonista */
            width: auto;
            margin-bottom: 0;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
        }

        .text-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Badge estilo cristal pulido */
        .text-content h3 {
            display: inline-flex;
            align-items: center;
            font-family: var(--font-body);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.35rem;
            font-weight: 700;
            color: var(--color-interactivo);
            background: rgba(255, 255, 255, 0.5);
            padding: 3px 10px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.8);
            width: fit-content;
        }

        .banner-h2 {
            font-family: var(--font-display);
            font-size: 1.4rem; /* Reducido para que no se vea tosco */
            font-weight: 800;
            color: var(--color-titulo) !important;
            margin: 0 0 0.25rem 0;
            line-height: 1.2;
        }
        
        .banner-h2 strong {
            background: var(--gradient-btn);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .text-content .subtitle {
            font-size: 1.05rem;
            /* AJUSTE DE CONTRASTE: Texto Slate-800 para lectura nítida sobre cristal */
            color: #1e293b; 
            margin-bottom: 0;
            font-weight: 600;
            line-height: 1.5;
        }

        .botones-cta {
            flex: 0 0 auto;
            padding-left: 1rem;
            padding-bottom: 2rem;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .banner-container { padding: 2rem; text-align: center; }
            .banner-content { flex-direction: column; gap: 1.5rem; }
            .logo-animation { border-right: none; padding-right: 0; margin-right: 0; }
            .text-content { align-items: center; }
            .botones-cta { padding-left: 0; width: 100%; display: flex; justify-content: center; }
            .botones-cta .btn { width: 100%; }
        }

        /* ESTILOS DE LA CAJA INFORMATIVA - CRISTAL MODERNO */
        .caja-informativa { 
            display: flex; 
            gap: 1.5rem; 
            
            /* Glassmorphism Puro */
            background: rgba(255, 255, 255, 0.65); /* Más transparencia */
            backdrop-filter: blur(20px); /* Blur intenso */
            -webkit-backdrop-filter: blur(20px);
            
            /* Borde brillante sutil */
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-top: 1px solid rgba(255, 255, 255, 0.9); /* Luz superior */
            
            box-shadow: 
                0 4px 6px -1px rgba(0, 0, 0, 0.02), 
                0 20px 40px -4px rgba(24, 170, 244, 0.08), /* Glow azulado de fondo */
                inset 0 0 20px rgba(255, 255, 255, 0.5); /* Resplandor interno */
                
            padding: 2rem; 
            border-radius: var(--radius-lg); /* 16px */
            margin: 2rem 0; 
            align-items: flex-start; 
            position: relative;
            overflow: hidden;
        }
        
        /* Brillo diagonal en la caja informativa */
        .caja-informativa::before {
            content: '';
            position: absolute;
            top: 0;
            left: -50%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
            transform: skewX(-20deg);
            opacity: 0.3;
            pointer-events: none;
        }
        
        html.dark .caja-informativa {
            background: rgba(30, 41, 59, 0.6);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .caja-informativa__icono { 
            font-size: 3rem; 
            color: var(--color-interactivo);
            background: transparent;
            width: auto;
            height: auto;
            border-radius: 0;
            display: block;
            box-shadow: none;
            flex-shrink: 0;
            filter: drop-shadow(0 4px 12px rgba(24, 170, 244, 0.3)); /* Sombra del icono flotante */
            margin-top: -0.25rem;
            border: none;
        }
        .caja-informativa__contenido {
            flex: 1;
            position: relative;
            z-index: 1;
        }
        .caja-informativa__pregunta { 
            font-weight: 700; 
            color: var(--color-titulo); 
            margin-bottom: 0.5rem !important; 
            font-family: var(--font-display);
            font-size: 1.15rem;
            line-height: 1.3;
        }
        .caja-informativa__respuesta { 
            margin: 0; 
            color: var(--text-main);
            font-size: 1rem;
            line-height: 1.6;
        }
        
        .qanty-destacado-banner__titulo { color: var(--color-titulo); margin-bottom: 1rem; }
        .seccion-llamada-accion { text-align: center; background: var(--bg-card); padding: 4rem 2rem; border-radius: var(--radius-container); /* Unificado a 24px */ margin-top: 4rem; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
        
        /* ESTILOS FAQ (PREGUNTAS FRECUENTES) - CRISTAL FLOTANTE */
        .schema-faq {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }
        
        .schema-faq-section { 
            /* Cristal Base */
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: var(--radius-lg); /* 16px */
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            box-shadow: 
                0 4px 6px -1px rgba(0, 0, 0, 0.02),
                0 2px 4px -1px rgba(0, 0, 0, 0.02);
            cursor: pointer;
        }
        
        /* Efecto Hover: Elevación y Glow */
        .schema-faq-section:hover {
            background: rgba(255, 255, 255, 0.9);
            border-color: var(--color-interactivo);
            transform: translateY(-4px) scale(1.01);
            box-shadow: 
                0 15px 35px -5px rgba(24, 170, 244, 0.15),
                0 5px 15px -5px rgba(0, 0, 0, 0.05);
            z-index: 10;
        }
        
        html.dark .schema-faq-section {
            background: rgba(30, 41, 59, 0.6);
            border-color: rgba(255, 255, 255, 0.05);
        }
        html.dark .schema-faq-section:hover {
            background: rgba(30, 41, 59, 0.9);
            border-color: var(--color-interactivo);
            box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.5);
        }

        .schema-faq-question { 
            font-family: var(--font-display);
            font-size: 1.15rem; 
            color: var(--color-titulo); 
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 0.75rem;
            font-weight: 700;
        }
        
        .schema-faq-question::before {
            content: "?";
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(240,249,255,0.5));
            color: var(--color-interactivo);
            border-radius: 50%;
            font-size: 1.1rem;
            font-weight: 800;
            flex-shrink: 0;
            transition: all 0.3s ease;
            border: 1px solid rgba(24, 170, 244, 0.2);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }

        .schema-faq-section:hover .schema-faq-question::before {
            background: var(--gradient-btn);
            color: white;
            border-color: transparent;
            box-shadow: 0 6px 15px rgba(24, 170, 244, 0.4);
            transform: rotate(10deg) scale(1.1);
        }
        
        .schema-faq-answer {
            font-size: 1rem;
            color: var(--text-main);
            line-height: 1.6;
            margin: 0;
            padding-left: 52px;
            border-left: 2px solid rgba(24, 170, 244, 0.1); 
            margin-left: 17px;
            padding-top: 4px;
            padding-bottom: 4px;
            transition: border-color 0.3s;
        }
        
        .schema-faq-section:hover .schema-faq-answer {
            border-left-color: var(--color-interactivo);
        }

        /* ESTILOS CONCLUSIÓN (DESTACADO BANNER) - TRUE GLASSMORPHISM */
        .qanty-destacado-banner { 
            position: relative;
            
            /* MODO CLARO: Cristal Blanco Luminoso */
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            
            /* Borde Cristalino */
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-top: 1px solid rgba(255, 255, 255, 0.9); /* Luz cenital */
            
            /* Sombra suave para elevación */
            box-shadow: 
                0 15px 35px -5px rgba(24, 170, 244, 0.1),
                inset 0 0 20px rgba(255, 255, 255, 0.5);
            
            border-radius: var(--radius-lg); /* 16px */
            margin: 4rem 0; 
            padding: 3.5rem 2.5rem;
            text-align: center;
            overflow: hidden;
            
            /* Usamos las variables globales de color para que el texto cambie automáticamente */
            color: var(--text-main);
        }

        /* MODO OSCURO: Cristal Ahumado (Dark Glass) */
        html.dark .qanty-destacado-banner {
            background: rgba(30, 41, 59, 0.6); /* Fondo oscuro semitransparente */
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 
                0 20px 50px -10px rgba(0, 0, 0, 0.5),
                inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        }

        /* Brillo sutil en movimiento (Shimmer Glass) */
        .qanty-destacado-banner::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 70%;
            height: 100%;
            background: linear-gradient(
                90deg, 
                transparent, 
                rgba(255, 255, 255, 0.4), 
                transparent
            );
            transform: skewX(-25deg);
            animation: glassShimmer 8s infinite ease-in-out;
            pointer-events: none;
            mix-blend-mode: overlay;
        }
        
        /* Ajuste del brillo en modo oscuro */
        html.dark .qanty-destacado-banner::before {
            background: linear-gradient(
                90deg, 
                transparent, 
                rgba(255, 255, 255, 0.1), 
                transparent
            );
        }

        @keyframes glassShimmer {
            0% { left: -100%; }
            20% { left: 200%; }
            100% { left: 200%; }
        }

        .qanty-destacado-banner__contenido {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }

        .qanty-destacado-banner__header {
            display: flex;
            flex-direction: row; /* Alineación horizontal */
            justify-content: center;
            align-items: center;
            gap: 1.5rem; /* Espacio entre título y logo */
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        /* Contenedor del Logo: LIMPIO (Sin círculos ni cápsulas) */
        .qanty-destacado-banner__logo {
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            box-shadow: none;
            width: auto;
            height: auto;
            margin: 0;
            transition: transform 0.3s ease;
        }
        
        html.dark .qanty-destacado-banner__logo {
            background: transparent;
            border: none;
            box-shadow: none;
        }

        .qanty-destacado-banner__logo:hover {
            transform: scale(1.05);
        }

        .qanty-destacado-banner__logo img {
            height: 56px; /* Tamaño grande y legible */
            width: auto;
            object-fit: contain;
            /* Filtro natural */
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }
        
        /* CORRECCIÓN: Logo mantiene sus colores originales en modo oscuro */
        html.dark .qanty-destacado-banner__logo img {
            filter: none; /* Sin inversión de colores */
            opacity: 1;
        }

        .qanty-destacado-banner__titulo { 
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--color-titulo); 
            margin-bottom: 0;
            line-height: 1.2;
            font-weight: 800;
            letter-spacing: -0.01em;
            text-align: left; /* Alineado a la izquierda (junto al logo que ahora está a la izq) */
        }
        
        @media (max-width: 768px) {
            .qanty-destacado-banner__header {
                flex-direction: column; /* Logo arriba en móvil */
            }
            .qanty-destacado-banner__titulo {
                text-align: center;
            }
        }

        .qanty-destacado-banner__parrafo {
            font-size: 1.1rem;
            /* Usa variable global para cambiar de color según el modo */
            color: var(--text-main); 
            line-height: 1.7;
            font-weight: 400;
        }

        .toast {
            visibility: hidden; min-width: 250px; background-color: #333; color: #fff;
            text-align: center; border-radius: var(--radius-md); /* Unificado a 8px */ padding: 12px; position: fixed;
            z-index: 100; right: 30px; bottom: 30px; font-size: 14px; opacity: 0;
            transition: opacity 0.3s, bottom 0.3s; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .toast.show { visibility: visible; opacity: 1; bottom: 30px; }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        html.dark ::-webkit-scrollbar-thumb { background: #334155; }

        @media (max-width: 768px) {
            .app-container { flex-direction: column; }
            .sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border-color); }
            .sidebar-nav { display: none; }
            .main-content { padding: 1.5rem; }
        }
		
		/* --- COMPONENTE: RESUMEN INTRODUCTORIO (DISEÑO PREMIUM ÚNICO) --- */
        .resumen-introductorio {
            position: relative;
            background: var(--bg-card); /* Usa la variable con transparencia */
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: var(--radius-container); /* Corregido a 24px (era 28px) */
            padding: 2.5rem;
            margin-bottom: 3rem;
            box-shadow: var(--shadow-glass);
            overflow: hidden;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .resumen-introductorio:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.1);
        }

        /* Decoración interna sutil */
        .resumen-introductorio::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(24, 170, 244, 0.03) 0%, transparent 70%);
            pointer-events: none;
        }

        .card-icon-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            perspective: 1000px;
        }

        .icon-circle {
            position: relative;
            width: 110px;
            height: 110px;
            background: var(--gradient-qanty);
            border-radius: 35% 65% 65% 35% / 35% 35% 65% 65%; /* Forma orgánica tipo "blob" */
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(102, 95, 238, 0.3);
            padding: 24px;
            animation: morphIcon 8s ease-in-out infinite, floatIcon 4s ease-in-out infinite;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Resplandor externo del icono */
        .icon-circle::after {
            content: '';
            position: absolute;
            inset: -4px;
            background: var(--gradient-qanty);
            border-radius: inherit;
            opacity: 0.3;
            filter: blur(12px);
            z-index: -1;
        }

        @keyframes morphIcon {
            0% { border-radius: 35% 65% 65% 35% / 35% 35% 65% 65%; }
            50% { border-radius: 65% 35% 35% 65% / 65% 65% 35% 35%; }
            100% { border-radius: 35% 65% 65% 35% / 35% 35% 65% 65%; }
        }

        @keyframes floatIcon {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(2deg); }
        }

        .resumen-introductorio__icono-animado {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
        }

        .resumen-introductorio__icono-animado img {
            width: 100%;
            height: auto;
            filter: brightness(0) invert(1);
            transform: scale(1.1);
        }

        .contenido-texto p.lead {
            font-size: 1.15rem;
            line-height: 1.7;
            margin: 0;
            color: var(--text-main);
            position: relative;
            z-index: 1;
        }

        .contenido-texto p.lead strong {
            color: var(--color-titulo);
            font-weight: 700;
            background: linear-gradient(to bottom, transparent 65%, rgba(24, 170, 244, 0.15) 65%);
        }
		/* NUEVOS ESTILOS UNIFICADOS DE GUÍA Y TOC */
        
        /* 1. CLASE MAESTRA PARA TARJETAS DE GUÍA */
        .guidance-card {
            background-color: var(--bg-card-hover);
            border: 1px dashed var(--color-interactivo); /* Borde unificado con color marca */
            border-radius: var(--radius-element); /* AJUSTADO: De 8px a 12px para consistencia */
            padding: 1.5rem;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .guidance-card h4 {
            margin-top: 0;
            margin-bottom: 1rem;
            color: var(--color-titulo);
            font-size: 0.95rem; /* Tamaño unificado */
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* Asegura que los iconos dentro de H4 tengan el color correcto */
        .guidance-card h4 i {
            font-size: 1.2rem;
            color: var(--color-interactivo);
        }

        .guidance-card ul, 
        .guidance-card ol {
            margin: 0;
            padding-left: 1.25rem;
            font-size: 0.9rem; /* Tamaño cuerpo unificado */
            color: var(--text-main);
        }

        .guidance-card li {
            margin-bottom: 0.5rem;
            line-height: 1.5;
        }

        .guidance-card p {
            font-size: 0.9rem; /* Tamaño cuerpo unificado */
            color: var(--text-main);
            line-height: 1.5;
            margin-bottom: 0.75rem;
        }
        .guidance-card p:last-child {
            margin-bottom: 0;
        }
        
        /* 2. TABLA DE CONTENIDOS MEJORADA */
        .tabla-de-contenidos {
            background: linear-gradient(to bottom right, var(--bg-sidebar), var(--bg-card));
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg); /* 16px */
            padding: 2rem;
            margin: 2rem 0;
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
        }

        /* Tira decorativa izquierda */
        .tabla-de-contenidos::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--color-interactivo);
        }

        .toc-title {
            font-family: var(--font-display);
            font-size: 1.1rem;
            color: var(--color-titulo);
            margin-top: 0;
            margin-bottom: 1.25rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .tabla-de-contenidos ol {
            padding-left: 0;
            list-style: none;
            counter-reset: toc-counter;
        }

        .tabla-de-contenidos li {
            margin-bottom: 0.75rem;
            counter-increment: toc-counter;
            display: flex;
            align-items: center;
        }

        /* Números estilizados tipo "badge" */
        .tabla-de-contenidos li::before {
            content: counter(toc-counter, decimal-leading-zero);
            font-family: monospace;
            font-size: 0.85rem;
            color: var(--color-interactivo);
            background: rgba(24, 170, 244, 0.1);
            padding: 2px 6px;
            border-radius: var(--radius-sm); /* Unificado a 4px */
            margin-right: 12px;
            font-weight: 600;
            min-width: 28px;
            text-align: center;
        }

        .tabla-de-contenidos a {
            color: var(--text-main);
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s;
            border-bottom: 1px solid transparent;
        }

        .tabla-de-contenidos a:hover {
            color: var(--color-interactivo);
            border-bottom-color: var(--color-interactivo);
            padding-left: 4px;
        }
		/* SECCIÓN LLAMADA A LA ACCIÓN (Diseño Limpio) */
        .seccion-llamada-accion { text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 249, 255, 0.95) 100%); padding: 5rem 3rem; border-radius: var(--radius-container); margin-top: 5rem; border: 1px solid rgba(24, 170, 244, 0.25); box-shadow: 0 20px 50px -15px rgba(24, 170, 244, 0.15); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .seccion-llamada-accion:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -15px rgba(24, 170, 244, 0.25); }
        .seccion-llamada-accion::before { content: ''; position: absolute; top: -20%; left: 0; width: 100%; height: 140%; background: radial-gradient(circle at 50% 50%, rgba(24, 170, 244, 0.08) 0%, transparent 60%); z-index: 0; pointer-events: none; }
        html.dark .seccion-llamada-accion { background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%); border-color: rgba(24, 170, 244, 0.2); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.4); }
        .seccion-llamada-accion h2 { font-family: var(--font-display); background: var(--gradient-btn); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 2.25rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.1; position: relative; z-index: 1; letter-spacing: -0.02em; }
        .seccion-llamada-accion p { color: var(--text-main); font-size: 1.2rem; max-width: 650px; margin: 0 auto 2.5rem auto; line-height: 1.6; position: relative; z-index: 1; font-weight: 400; }
        .seccion-llamada-accion .botones-cta { position: relative; z-index: 1; }
        .seccion-llamada-accion .demo-button { padding: 1rem 2.5rem; font-size: 1.1rem; box-shadow: 0 10px 25px -5px rgba(24, 170, 244, 0.4); }
		
		/* =========================================
           8. SECTION 6: CONTACT FORM (WPFORMS OVERRIDES - GRID SYSTEM 12 - AGNOSTIC)
           ========================================= */
        
        /* Contenedor principal usando clase genérica para Glassmorphism y Ancho */
        .form-wrapper {
            max-width: 700px !important;
            margin: 0 auto !important;
            background: rgba(255, 255, 255, 0.02) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border-radius: 20px !important;
            padding: 3rem !important;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
            position: relative !important;
            z-index: 2 !important;
        }

        /* USAMOS CSS GRID PARA LA DISPOSICIÓN DE CAMPOS - SISTEMA DE 12 COLUMNAS REAL */
        .form-wrapper .wpforms-field-container {
            display: grid !important;
            grid-template-columns: repeat(12, 1fr) !important; /* 12 Columnas Reales */
            gap: 20px !important; /* Mismo gap que el resto del sitio */
            clear: both !important;
        }

        /* Campos individuales (Por defecto ocupan todo el ancho, es decir, 12 columnas) */
        .form-wrapper .wpforms-field {
            grid-column: span 12 !important; /* Ocupar 12 columnas */
            width: 100% !important;
            margin-bottom: 0 !important;
            text-align: left !important;
            float: none !important;
            clear: none !important;
            padding: 0 !important;
        }

        /* Columnas 50% (Nombre, Apellido) - AHORA USAN GRID SPAN 6 */
        .form-wrapper .wpforms-one-half {
            grid-column: span 6 !important; /* Ocupar 6 de 12 columnas (50%) */
            width: 100% !important; /* El ancho lo controla el grid */
            display: block !important; /* Reset display */
            margin: 0 !important; /* Reset margenes */
        }

        /* En movil - Todo a 12 columnas (stack) */
        @media (max-width: 768px) {
            .form-wrapper .wpforms-one-half {
                grid-column: span 12 !important;
            }
        }

        /* Etiquetas (Labels) */
        .form-wrapper .wpforms-field-label {
            display: block !important;
            color: var(--color-text-subtle) !important;
            margin-bottom: 0.5rem !important;
            font-size: 0.9rem !important;
            font-weight: 600 !important;
        }

        /* Inputs y Textareas - GLASSMORPHISM + !IMPORTANT */
        .form-wrapper input[type=text],
        .form-wrapper input[type=email],
        .form-wrapper input[type=number],
        .form-wrapper input[type=url],
        .form-wrapper textarea,
        .form-wrapper select {
            width: 100% !important;
            background: rgba(0, 0, 0, 0.3) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 10px !important;
            padding: 14px 16px !important;
            color: #fff !important;
            font-family: var(--font-sans) !important;
            font-size: 1rem !important;
            transition: all 0.3s ease !important;
            box-sizing: border-box !important;
            max-width: 100% !important;
            height: auto !important;
        }

        /* Placeholder Styles */
        .form-wrapper ::placeholder {
            color: rgba(255, 255, 255, 0.5) !important;
            opacity: 1;
        }

        /* Estado Focus */
        .form-wrapper input:focus, 
        .form-wrapper textarea:focus,
        .form-wrapper select:focus {
            outline: none !important;
            border-color: var(--color-accent) !important;
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.2) !important;
            background: rgba(0, 0, 0, 0.5) !important;
        }

        /* Botón de Submit */
        .form-wrapper .wpforms-submit-container {
            width: 100% !important;
            margin-top: 10px !important;
            text-align: center !important;
            grid-column: span 12 !important; /* Asegurar que el botón ocupe todo el ancho en grid */
        }

        .form-wrapper button.wpforms-submit {
            width: 100% !important;
            padding: 18px 18px 36px !important;
            background: linear-gradient(90deg, var(--color-accent), var(--color-primary)) !important;
            border: none !important;
            border-radius: 50px !important;
            color: white !important;
            font-weight: 700 !important;
            font-size: 1.1rem !important;
            cursor: pointer !important;
            transition: transform 0.2s, box-shadow 0.2s !important;
            margin-top: 1rem !important;
            text-transform: none !important;
        }

        .form-wrapper button.wpforms-submit:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 10px 25px rgba(6, 182, 212, 0.4) !important;
        }
        
        /* Ocultar elementos de sistema de WPForms */
        .wpforms-hidden, .wpforms-error-noscript {
            display: none !important;
        }
        /* Ocultar campos hidden/trampa */
        div[id*="field_10-container"], div[id*="field_2-container"] {
             display: none !important;
        }
		/* CONTENEDOR PRINCIPAL - Refinado y Sutil */
.form-wrapper {
    /* GRID: Se adapta al 100% del contenedor padre (sistema de grillas) */
    width: 100% !important;
    max-width: 100% !important; 
    
    margin: 0 auto !important;
    
    /* Fondo Glass Moderno */
    background: rgba(255, 255, 255, 0.65) !important;
    
    /* Borde más fino para reducir peso visual */
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
    
    /* Blur para mantener el estilo premium */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Radio ligeramente reducido para verse más técnico */
    border-radius: 20px !important;
    
    /* PADDING REDUCIDO: Menos aire innecesario, aspecto más compacto */
    padding: 2.5rem 2rem !important;
    
    /* Sombra inicial muy suave (No mancha el diseño) */
    box-shadow: 
        0 10px 30px -10px rgba(6, 0, 143, 0.08),
        inset 0 0 20px rgba(255, 255, 255, 0.5) !important;
    
    position: relative !important;
    z-index: 2 !important;
    
    /* Transición ágil */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}


/* --- AJUSTES MODO OSCURO --- */
html.dark .form-wrapper {
    background: rgba(15, 23, 42, 0.6) !important; 
    border-color: rgba(255, 255, 255, 0.1) !important;
    
    box-shadow: 
        0 10px 30px -10px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.03) !important;
}

html.dark .form-wrapper:hover {
    box-shadow: 
        0 20px 50px -10px rgba(0, 0, 0, 0.6),
        inset 0 0 20px rgba(255, 255, 255, 0.03) !important;
}

/* LAYOUT GRID INTERNO */
.form-wrapper .wpforms-field-container {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 20px !important; /* Gap estándar de grilla */
    clear: both !important;
}

/* Campos Full Width */
.form-wrapper .wpforms-field {
    grid-column: span 12 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Campos 50% */
.form-wrapper .wpforms-one-half {
    grid-column: span 6 !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

/* Mobile Stack */
@media (max-width: 768px) {
    .form-wrapper .wpforms-one-half {
        grid-column: span 12 !important;
    }
    .form-wrapper {
        padding: 1.5rem !important; /* Padding compacto en móvil */
    }
}

/* ETIQUETAS (LABELS) */
.form-wrapper .wpforms-field-label {
    display: block !important;
    color: #06008f !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

html.dark .form-wrapper .wpforms-field-label {
    color: #f1f5f9 !important;
}

/* INPUTS - Diseño Limpio */
.form-wrapper input[type=text],
.form-wrapper input[type=email],
.form-wrapper input[type=number],
.form-wrapper input[type=url],
.form-wrapper textarea,
.form-wrapper select {
    width: 100% !important;
    
    /* Fondo sutil */
    background: rgba(241, 245, 249, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important; 
    
    border-radius: 12px !important;
    padding: 12px 16px !important; /* Padding de input equilibrado */
    
    color: #334155 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important; /* Texto ligeramente más compacto */
    font-weight: 500 !important;
    
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    height: auto !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* Inputs Dark Mode */
html.dark .form-wrapper input[type=text],
html.dark .form-wrapper input[type=email],
html.dark .form-wrapper input[type=number],
html.dark .form-wrapper input[type=url],
html.dark .form-wrapper textarea,
html.dark .form-wrapper select {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.form-wrapper ::placeholder {
    color: #64748b !important;
    opacity: 0.7 !important;
}

/* ESTADO FOCUS */
.form-wrapper input:focus, 
.form-wrapper textarea:focus,
.form-wrapper select:focus {
    outline: none !important;
    background: #ffffff !important;
    border-color: #18aaf4 !important;
    box-shadow: 0 0 0 3px rgba(24, 170, 244, 0.15) !important;
    transform: translateY(-1px) !important;
}

html.dark .form-wrapper input:focus, 
html.dark .form-wrapper textarea:focus,
html.dark .form-wrapper select:focus {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: #18aaf4 !important;
}

/* BOTÓN SUBMIT */
.form-wrapper .wpforms-submit-container {
    width: 100% !important;
    margin-top: 1.25rem !important;
    text-align: center !important;
    grid-column: span 12 !important;
}

.form-wrapper button.wpforms-submit {
    width: 100% !important;
    padding: 14px 28px !important; /* Botón menos masivo */
    
    background: linear-gradient(90deg, #18aaf4 0%, #1974e1 100%) !important;
    background-size: 110% auto !important;
    border: none !important;
    border-radius: 12px !important;
    
    color: #ffffff !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1rem !important;
    
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(24, 170, 244, 0.3) !important;
}

.form-wrapper button.wpforms-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(24, 170, 244, 0.4) !important;
    background-position: right center !important;
}
/* 9. RECOMENDACIÓN INTERNA (LECTURA RECOMENDADA) */
.recomendacion-interna {
    display: flex;
    align-items: flex-start; /* Alineación superior para iconos */
    gap: 1.5rem;
    
    /* Glassmorphism y Estilo */
    background: var(--bg-card); 
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--color-interactivo); /* Borde de acento izquierdo */
    
    border-radius: var(--radius-element); /* 12px */
    padding: 1.75rem;
    margin: 2.5rem 0;
    
    /* Sombra y Transición */
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    backdrop-filter: blur(8px);
}

.recomendacion-interna:hover {
    transform: translateX(4px); /* Desplazamiento sutil a la derecha */
    box-shadow: var(--shadow-md);
    background: var(--bg-card-hover);
}

.recomendacion-interna__icono {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md); /* 8px */
    overflow: hidden;
    background: transparent; /* El fondo lo trae la imagen si es placeholder, o transparente */
    display: flex;
    align-items: center;
    justify-content: center;
}

.recomendacion-interna__icono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.recomendacion-interna__contenido {
    flex: 1;
}

.recomendacion-interna__contenido span {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: var(--color-interactivo);
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
}

.recomendacion-interna__contenido h4 {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.35;
    font-weight: 700;
}

.recomendacion-interna__contenido h4 a {
    color: var(--color-titulo);
    text-decoration: none;
    transition: color 0.2s;
    
    /* Efecto de subrayado animado */
    background-image: linear-gradient(to right, var(--color-interactivo), var(--color-interactivo));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease, color 0.3s ease;
}

.recomendacion-interna__contenido h4 a:hover {
    color: var(--color-interactivo);
    background-size: 100% 2px;
}

.recomendacion-interna__contenido p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Modo oscuro específico si es necesario, aunque las vars manejan casi todo */
html.dark .recomendacion-interna {
    background: rgba(30, 41, 59, 0.4); /* Un poco más oscuro */
    border-color: rgba(255, 255, 255, 0.08);
}
/* ESTILOS NUEVOS PARA BLOQUES DE CONTENIDO */
        .seccion-completa, .seccion-dividida {
            padding: 2rem;
            background: var(--bg-card); /* Glass styles consistent with theme */
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            margin-bottom: 2rem;
        }

        .titulo-con-linea {
            position: relative;
            display: inline-block;
            margin-bottom: 1.5rem;
            color: var(--color-titulo);
            font-family: var(--font-display);
            font-weight: 700;
        }
        .titulo-con-linea::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 40px;
            height: 3px;
            background: var(--color-interactivo);
            border-radius: 2px;
        }

        figure {
            margin: 1.5rem 0;
            width: 100%;
        }
        
        figure img {
            width: 100%;
            height: auto;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
        }
        
        figcaption {
            font-size: 0.85rem;
            color: var(--text-muted);
            text-align: center;
            margin-top: 0.5rem;
            font-style: italic;
        }

        .efecto-imagen {
            transition: transform 0.3s ease;
        }
        .efecto-imagen:hover {
            transform: scale(1.01);
        }

/* ESTILOS ARTÍCULOS RELACIONADOS */
        .article-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 0; /* Override default card padding to let image sit flush */
            overflow: hidden; /* Ensure rounded corners for image */
        }

        .article-image {
            width: 100%;
            height: 200px; /* Fixed height for consistency */
            overflow: hidden;
        }

        .article-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .article-card:hover .article-image img {
            transform: scale(1.05);
        }

        .article-card-content {
            padding: 1.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .article-card-content h3 {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            font-weight: 700;
        }

        .article-card-content p {
            font-size: 0.95rem;
            color: var(--text-muted);
            margin-bottom: 1.5rem;
            flex-grow: 1; /* Pushes button to bottom */
        }

        .article-card-content .btn {
            align-self: flex-start;
        }
        
        
        /* --- ESTILOS NEVE POST COVER (CUSTOM QANTY ADAPTATION) --- */
        .nv-post-cover {
            position: relative;
            min-height: 280px; /* Altura considerable para hero */
            max-width: 980px;
            margin: 6rem auto 0;
            border-radius: var(--radius-container);
            overflow: hidden;
            background-image: url('https://images.pexels.com/photos/3183197/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: flex-end; /* Texto abajo */
            margin-bottom: 3rem;
            box-shadow: var(--shadow-lg);
        }

        .nv-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, rgba(6,0,143,0.8) 0%, rgba(6,0,143,0.2) 50%, rgba(0,0,0,0) 100%);
            z-index: 1;
        }

        .nv-title-meta-wrap {
            position: relative;
            z-index: 2;
            padding: 3rem;
            width: 100%;
            color: #ffffff; /* Texto blanco sobre imagen oscura */
        }

        /* Meta List (Categorías) */
        ul.nv-meta-list {
            list-style: none;
            padding: 0;
            margin: 0 0 1rem 0;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        li.meta.category a {
            display: inline-block;
            background-color: var(--color-interactivo);
            color: #ffffff;
            padding: 6px 14px;
            border-radius: 50px; /* Pill shape */
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }
        
        li.meta.category a:hover {
            background-color: var(--color-acento);
        }

        /* Breadcrumbs */
        .nv--yoast-breadcrumb {
            display: block;
            font-family: var(--font-body);
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
            opacity: 0.9;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .nv--yoast-breadcrumb a {
            color: #ffffff;
            text-decoration: none;
            border-bottom: 1px solid rgba(255,255,255,0.3);
        }
        
        .nv--yoast-breadcrumb a:hover {
            border-bottom-color: #ffffff;
        }

        /* Title */
        h1.title.entry-title {
            font-family: var(--font-display);
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1.1;
            margin: 0;
            color: #ffffff; /* Override global h1 color */
            max-width: 900px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nv-title-meta-wrap { padding: 1.5rem; }
            h1.title.entry-title { font-size: 1.75rem; }
            .nv-post-cover { min-height: 350px; }
        }