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

html,
body {
  width: 100%;
  overflow-x: hidden;
}

img,
video,
iframe,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none; /* Eliminar subrayado por defecto */
  color: inherit; /* Heredar color del padre */
}

:root {
    --brand-blue-dark: #0A122A;
    --brand-yellow: #FFD700;
    --brand-green: #36B37E;
    --brand-red: #FF5630;
    --text-primary: #FFFFFF;
    --text-secondary: #B0C4DE;
    --surface-glass: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-3xl: 1.875rem;
    --font-size-5xl: 3rem;
    --font-size-base: 1rem;
    
    /* ================================================================
     * TOKENS DE MICROINTERACCIONES Y ACCESIBILIDAD
     * ================================================================ */
    --glow-hover: 0 0 24px 0 rgba(255, 215, 0, 0.25);
    --border: var(--border-subtle);
    --accent-strong: var(--brand-yellow);
    --accent-light: #FFFBEB;
    --focus-outline: var(--brand-yellow);
    --row-zebra: rgba(255, 255, 255, 0.03);
    --row-hover: rgba(255, 255, 255, 0.06);
    --transition-micro: 180ms ease;
    --transition-standard: 220ms ease;
}

html { 
    scroll-behavior: smooth; 
    font-size: 16px; /* Base font size for rem calculations */
}

/* ================================================================
 * FOCUS VISIBLE GLOBAL (A11Y)
 * ================================================================ */
*:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
    transition: outline var(--transition-micro);
}

/* ================================================================
 * PATRÓN DE SPOTLIGHT PARA LECTURA ASISTIDA
 * ================================================================ */
.spotlight:hover .spot-target,
.spotlight:focus-within .spot-target {
    color: var(--accent-strong);
    transition: color var(--transition-micro);
}

/* ================================================================
 * MICROINTERACCIONES DE CARDS Y PILLS
 * ================================================================ */

/* ================================================================
 * PATRÓN DE TABLAS RESPONSIVAS Y ACCESIBLES
 * ================================================================ */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--border);
}

table.table-elevated {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
    font-size: 0.95rem;
    background: var(--surface-glass);
}

.table-elevated thead th {
    position: sticky;
    top: 0;
    backdrop-filter: blur(4px);
    background: rgba(10, 18, 42, 0.9);
    color: var(--accent-strong);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--border);
}

.table-elevated th,
.table-elevated td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.table-elevated tbody tr:nth-child(odd) {
    background: var(--row-zebra);
}

.table-elevated tbody tr:hover {
    background: var(--row-hover);
    transition: background var(--transition-micro);
}

.table-elevated caption {
    caption-side: top;
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--accent-strong);
    border-bottom: 1px solid var(--border);
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 1rem; /* Inherit from html, ensures consistent rem calculations */
    line-height: 1.6;
    background: linear-gradient(135deg, var(--brand-blue-dark) 0%, #1B2951 100%);
    color: var(--text-primary);
    margin: 0;
}

h1, h2, h3, h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

/* Header */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background-color: rgba(10, 18, 42, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
    z-index: 1000;
    transition: all 0.3s;
}

/* Ensure main content starts below fixed header */
main {
    padding-top: 70px;
}

/* ================================================================
 * ESTILOS PARA PÁGINA DE COMUNIDAD
 * ================================================================ */

/* Progress bar styles */
.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-yellow), #FFA500);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Card header with avatar */
.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-avatar {
    position: relative;
    flex-shrink: 0;
}

.card-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.card-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--brand-yellow);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.card-info {
    flex: 1;
}

.card-role {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.25rem 0;
}

.card-specialty {
    color: var(--brand-yellow);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Card stats */
.card-stats {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.card-stats .stat-item {
    text-align: center;
    flex: 1;
}

.card-stats .stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-yellow);
}

.card-stats .stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Card expertise */
.card-expertise {
    margin: 1rem 0;
}

.expertise-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Card actions */
.card-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Card author for testimonials */
.card-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-author .author-avatar {
    flex-shrink: 0;
}

.card-author .author-info {
    display: flex;
    flex-direction: column;
}

/* ================================================================
 * HEADER ACTIONS Y MOBILE MENU BUTTON
 * ================================================================ */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.3s;
}

.mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.campus-btn {
    display: none;
}

.email-link {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    transition: color 0.3s;
}

.email-link:hover {
    color: var(--brand-yellow);
}

/* Responsive header */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
    }
    
    .nav-links-container {
        display: none;
    }
    
    .campus-btn {
        display: inline-flex;
    }
    
    .header-actions {
        gap: 1rem;
    }
}

/* ================================================================
 * FIXED BOTTOM BUTTON
 * ================================================================ */
.fixed-bottom-btn {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 1001 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.fixed-bottom-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .fixed-bottom-btn {
        bottom: 1rem !important;
        right: 1rem !important;
        padding: 0.75rem;
    }
    
    .fixed-bottom-btn span:not([data-lucide]) {
        display: none;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-stats {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .card-stats .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .card-stats .stat-number {
        font-size: 1.25rem;
    }
    
    .card-actions {
        flex-direction: column;
    }
    
    .card-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================================
 * MOBILE HEADER FINE-TUNING
 * ================================================================ */
@media (max-width: 480px) {
    #main-header .header-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    #main-header .header-actions {
        gap: 0.5rem;
    }
    
    #mobile-menu-btn {
        padding: 0.5rem;
        margin-right: 0.5rem;
    }
    
    #main-header .tooltip-container {
        display: none;
    }
    
    #main-header .tooltip-container a {
        display: none;
    }
}

#main-header .header-content {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

#main-header .logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#main-header .logo-img {
    height: 2.5rem;
    border-radius: 0.5rem;
}

#main-header .logo-text {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.125rem;
}

#main-header .nav-links-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Hide navigation on mobile for subpages */
@media (max-width: 768px) {
    #main-header .nav-links-container {
        display: none;
    }
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
    font-size: 0.9rem;
}

.nav-link:hover {
    color: var(--text-primary);
}

.btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: 50px;
    transition: all var(--transition-standard);
    position: relative;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-2xl);
    text-decoration: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-yellow) 0%, #FFA500 100%);
    color: var(--brand-blue-dark);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-hover);
    transition: all var(--transition-standard);
}

.btn-secondary {
    background: transparent;
    color: var(--brand-yellow);
    border: 1px solid var(--brand-yellow);
}

.btn-secondary:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-1px);
    transition: all var(--transition-standard);
}

/* ================================================================ */
/* MODAL COMPONENT (Atomic: atom/modal, molecule/modal-dialog)      */
/* ================================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity .25s ease;
}

.modal-overlay[aria-hidden="false"] {
    display: flex;
    opacity: 1;
}

.modal-dialog {
    background: linear-gradient(135deg, rgba(10, 18, 42, 0.96) 0%, rgba(27, 41, 81, 0.94) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    max-width: 720px;
    width: calc(100% - 2rem);
    color: var(--text-primary);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    transform: translateY(20px) scale(.98);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}

.modal-overlay[aria-hidden="false"] .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal-header,
.modal-footer {
    padding: var(--space-lg) var(--space-xl);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--brand-yellow);
    font-size: 1.125rem;
}

.modal-close {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
}

.modal-body {
    padding: var(--space-xl);
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Microinteraction: subtle hover lift on info-cards */
.info-card {
    transition: transform .25s ease, box-shadow .25s ease;
}
.info-card:focus-within,
.info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
}

/* Slides */
.slide {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 120px var(--space-xl) 60px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-bottom: 1px solid var(--border-subtle);
}

.slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 18, 42, 0.92) 0%, rgba(27, 41, 81, 0.88) 100%);
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
}

.slide-title {
    font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
    margin-bottom: var(--space-lg);
    background: linear-gradient(135deg, var(--text-primary) 0%, #FFF3A0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.slide-subtitle {
    font-size: clamp(var(--font-size-lg), 2vw, var(--font-size-xl));
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
}

.punchline {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(var(--font-size-lg), 1.8vw, 1.75rem);
    color: var(--brand-yellow);
    text-align: center;
    margin-top: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.text-highlight {
    color: var(--brand-yellow);
}

/* Info Cards */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    width: 100%;
    margin-top: var(--space-2xl);
    position: relative;
}

/* ================================================================
 * DISTRIBUCIÓN SIMÉTRICA PARA 4 ELEMENTOS
 * ================================================================ */
.info-grid.centrar-ultima:has(.info-card:last-child) {
    grid-template-columns: repeat(2, 1fr);
}

/* Distribución 2x2 para 4 elementos */
.info-grid.centrar-ultima:has(.info-card:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--space-xl);
    justify-items: center;
    align-items: start;
}

/* Distribución 3+1 para elementos impares */
.info-grid.centrar-ultima .info-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 400px;
}

/* Distribución 2x2 para 4 elementos - todos centrados */
.info-grid.centrar-ultima .info-card:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}

/* Asegurar que todas las infocards tengan el mismo ancho en distribución 2x2 */
.info-grid.centrar-ultima:has(.info-card:nth-child(4)) .info-card {
    width: 100%;
    max-width: 350px;
    justify-self: center;
}

@media (max-width: 900px) {
    .info-grid.centrar-ultima {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        justify-items: stretch;
    }
    .info-grid.centrar-ultima .info-card:last-child:nth-child(odd) {
        grid-column: auto;
        grid-row: auto;
        max-width: 100%;
        justify-self: stretch;
    }
    
    .info-grid.centrar-ultima .info-card:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
        max-width: 100%;
        justify-self: stretch;
    }
    
    .info-grid.centrar-ultima:has(.info-card:nth-child(4)) .info-card {
        max-width: 100%;
        justify-self: stretch;
    }
}

.info-card {
    background: var(--surface-glass);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--space-xl);
    text-align: left;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.info-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.2);
}

.card-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-md);
}

.card-description {
    color: var(--text-secondary);
    flex-grow: 1;
}

/* Disclaimer Box */
.disclaimer-box {
    background: rgba(255, 215, 0, 0.05);
    border-left: 4px solid var(--brand-yellow);
    padding: var(--space-lg);
    margin-top: var(--space-2xl);
    border-radius: 8px;
    text-align: left;
}

.disclaimer-box h4 {
    color: var(--brand-yellow);
    margin-bottom: var(--space-md);
    font-size: 1.1rem;
}

.disclaimer-box p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Tooltip */
.tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Contact button styling for all screen sizes */
.tooltip-container a {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.tooltip-container a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.tooltip-container:hover::after {
    content: 'contacto@metodologia.info';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-glass);
    color: var(--brand-yellow);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    z-index: 1000;
}

/* Resets and Normalizations */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Hamburger Menu Styles */
.hamburger-icon {
    width: 24px;
    height: 18px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger-icon.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-icon.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-icon.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Menu */
.mobile-nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: linear-gradient(135deg, rgba(10, 18, 42, 0.98) 0%, rgba(27, 41, 81, 0.96) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-subtle);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    overflow-y: auto;
    display: none; /* Hidden by default on all devices */
    visibility: hidden; /* Ensure it's completely hidden */
    opacity: 0; /* Start fully transparent */
}

/* Mobile menu should only be visible when active */
.mobile-nav-menu.active {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}



.mobile-nav-content {
    display: flex;
    flex-direction: column;
    padding: var(--space-2xl) var(--space-xl);
    gap: var(--space-lg);
    min-height: 100%;
}

.mobile-nav-link {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    padding: var(--space-lg);
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    background: var(--surface-glass);
    text-align: center;
}

.mobile-nav-link:hover {
    color: var(--brand-yellow);
    border-color: var(--brand-yellow);
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Tablet Adaptations */
@media (max-width: 1024px) and (min-width: 769px) {
    .slide {
        padding: 80px var(--space-lg) 40px;
    }

    .slide-title {
        font-size: 2.5rem;
    }

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

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }

    .info-card {
        padding: var(--space-lg);
    }

    .btn {
        font-size: 0.95rem;
        padding: var(--space-lg) var(--space-xl);
    }
}

/* Mobile Adaptations */
@media (max-width: 768px) {
    .slide {
        padding: 60px var(--space-lg) 30px;
        min-height: auto;
    }

    .slide-title {
        font-size: var(--font-size-3xl);
    }

    .slide-subtitle {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-xl);
    }

    /* Force single column layout for mobile infocards */
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl);
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Override centering behavior for mobile */
    .info-grid.centrar-ultima {
        grid-template-columns: 1fr !important;
    }

    .info-grid.centrar-ultima .info-card:last-child:nth-child(odd) {
        grid-column: auto;
        justify-self: stretch;
        max-width: 100%;
    }

    .info-card {
        padding: var(--space-xl);
        min-height: auto;
        width: 100%;
        max-width: 100%;
    }

    .card-title {
        font-size: 1.375rem;
        margin-bottom: var(--space-lg);
        line-height: 1.3;
    }

    .card-description {
        font-size: 1rem;
        line-height: 1.6;
    }

    .btn {
        font-size: 0.9rem;
        padding: var(--space-md) var(--space-lg);
        white-space: nowrap;
        appearance: none;
        -webkit-appearance: none;
    }

    /* Eliminado estilo conflictivo que afectaba el botón flotante */

    .disclaimer-box {
        padding: var(--space-md);
        margin-top: var(--space-lg);
    }

    .disclaimer-box h4 {
        font-size: 1rem;
    }

    .disclaimer-box p {
        font-size: 0.8rem;
    }

    #main-header {
        height: 70px;
    }

    .mobile-nav-menu {
        top: 70px;
        height: calc(100vh - 70px);
    }

    .tooltip-container:hover::after {
        display: none;
    }

    .punchline {
        font-size: 1.125rem;
        padding: var(--space-lg);
        margin-top: var(--space-lg);
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    /* Header content padding already defined above */

    .slide {
        padding: 60px var(--space-md) 30px;
    }

    .slide-title {
        font-size: 1.75rem;
        margin-bottom: var(--space-md);
    }

    .slide-subtitle {
        font-size: 1rem;
        margin-bottom: var(--space-lg);
    }

    .info-grid {
        gap: var(--space-lg);
        max-width: 100%;
        padding: 0 var(--space-md);
    }

    .info-card {
        padding: var(--space-lg);
        border-radius: 16px;
    }

    .card-title {
        font-size: 1.25rem;
        margin-bottom: var(--space-md);
    }

    .card-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .btn {
        font-size: 0.875rem;
        padding: 0.75rem 1.25rem;
    }

    .mobile-nav-content {
        padding: var(--space-xl) var(--space-md);
        gap: var(--space-md);
    }

    .mobile-nav-link {
        font-size: 1rem;
        padding: var(--space-md);
    }

    .punchline {
        font-size: 1rem;
        padding: var(--space-md);
        margin-top: var(--space-md);
    }
}

/* ================================================================ */
/* COMPONENTES MODULARES ADICIONALES */
/* ================================================================ */

/* Philosophy Cards */
.philosophy-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.philosophy-card {
    text-align: center;
    padding: var(--space-xl);
}

.philosophy-card .card-icon {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
    display: block;
}

/* Tabs System */
.arsenal-tabs, .solutions-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
    margin-top: var(--space-lg);
}

.tab-button {
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-subtle);
    background: var(--surface-glass);
    color: var(--text-secondary);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.tab-button:hover {
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.05);
}

.tab-button.active {
    background: var(--brand-yellow);
    color: var(--brand-blue-dark);
    border-color: var(--brand-yellow);
    font-weight: 600;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Resources Grid */
.resources-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.resource-card {
    padding: var(--space-lg);
    border-left: 4px solid var(--brand-yellow);
}

.resource-link {
    display: inline-block;
    margin-top: var(--space-md);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Solutions Grid */
.solution-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
}

.solution-card {
    padding: var(--space-xl);
    text-align: left;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.solution-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-4px);
}

/* ================================================================
 * SISTEMA DE BADGES SIMÉTRICO Y ORDENADO
 * ================================================================ */

/* ================================================================
 * LAYOUT CON ICONOS AL LADO DE TÍTULOS
 * ================================================================ */
.solution-header-with-icon {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.solution-header-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.solution-header-content {
    flex: 1;
}

.solution-header-content .card-title {
    margin-bottom: 0.75rem;
    font-size: 1.4rem;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .solution-header-with-icon {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }
    
    .solution-header-icon {
        font-size: 2rem;
        width: 50px;
        height: 50px;
    }
    
    .solution-header-content .card-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .solution-header-with-icon {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .solution-header-icon {
        font-size: 1.75rem;
        width: 45px;
        height: 45px;
    }
    
    .solution-header-content .card-title {
        font-size: 1.1rem;
        margin-bottom: 0.4rem;
    }
}
.solution-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2.5rem;
    margin-bottom: var(--space-lg);
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.badge {
    background: rgba(255, 215, 0, 0.1);
    color: var(--brand-yellow);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(255, 215, 0, 0.2);
    white-space: nowrap;
    text-align: center;
    min-width: fit-content;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Tipos específicos de badges para mejor organización */
.badge.duration,
.badge.audience,
.badge.investment,
.badge.type,
.badge.scope,
.badge.intensity,
.badge.level,
.badge.complexity {
    order: 0;
    flex: 1 0 auto;
    min-width: 80px;
    max-width: 100px;
}

/* Badge de duración (siempre primero) */
.badge.duration {
    order: 1;
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.3);
}

/* Badge de audiencia/scope (segundo) */
.badge.audience,
.badge.scope {
    order: 2;
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.25);
}

/* Badge de inversión/tipo (tercero) */
.badge.investment,
.badge.type,
.badge.level,
.badge.complexity {
    order: 3;
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.2);
}

.solution-benefits {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-lg);
}

.solution-benefits li {
    padding: 4px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.solution-benefits li::before {
    content: '✓';
    color: var(--brand-green);
    font-weight: bold;
    margin-right: 8px;
}

/* Community Section */
.community-subsections {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.community-section {
    text-align: center;
    padding: var(--space-xl);
}

.community-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
}

.stat-card {
    text-align: center;
    padding: var(--space-md);
    background: rgba(255, 215, 0, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    min-width: 80px;
}

.stat-card h3 {
    font-size: 2rem;
    color: var(--brand-yellow);
    margin-bottom: 4px;
    font-weight: 700;
}

.stat-card p {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Team Grid */
.team-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.team-member {
    text-align: center;
    padding: var(--space-xl);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.team-member:hover {
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-4px);
}

.team-member .card-title {
    margin-bottom: var(--space-md);
    font-size: 1.2rem;
}

.team-member .role {
    margin-bottom: var(--space-lg);
    font-size: 1rem;
}

/* Contact Section */
.cta-section {
    text-align: center;
}

.contact-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    margin-top: 2rem;
}

.btn-large {
    font-size: 1.1rem;
    padding: var(--space-lg) var(--space-2xl);
    min-width: 300px;
    margin-top: 1rem;
}

.contact-alternatives {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
}

.contact-alt {
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* ================================================================ */
/* SITEMAP MEGA STRUCTURE */
/* ================================================================ */

.sitemap-section {
    text-align: left;
}

.sitemap-mega-structure {
    margin: var(--space-2xl) 0;
}

.sitemap-level {
    margin-bottom: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.sitemap-level-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-yellow);
    margin-bottom: var(--space-lg);
    text-align: center;
    border-bottom: 2px solid var(--brand-yellow);
    padding-bottom: var(--space-md);
}

/* Cards Grid for Main Pages */
.sitemap-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.sitemap-mega-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: var(--space-lg);
    transition: all 0.3s ease;
}

.sitemap-mega-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.sitemap-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-lg);
}

.sitemap-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

.sitemap-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.sitemap-url {
    font-size: 0.8rem;
    color: var(--brand-yellow);
    background: rgba(255, 215, 0, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
}

.sitemap-sections > * + * {
    margin-top: var(--space-md);
}

.sitemap-section-item {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sitemap-section-item strong {
    color: var(--brand-yellow);
    font-weight: 600;
}

.sitemap-section-group {
    margin: var(--space-md) 0;
    padding: var(--space-sm);
    background: rgba(255, 215, 0, 0.02);
    border-radius: 8px;
    border-left: 3px solid var(--brand-yellow);
}

.sitemap-section-group strong {
    color: var(--brand-yellow);
    font-size: 0.95rem;
    display: block;
    margin-bottom: var(--space-sm);
}

.sitemap-sublist {
    list-style: none;
    padding-left: var(--space-md);
    margin: 0;
}

.sitemap-sublist li {
    padding: 2px 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    position: relative;
}

.sitemap-sublist li::before {
    content: "•";
    color: var(--brand-yellow);
    font-weight: bold;
    position: absolute;
    left: -12px;
}

/* External Links Grid */
.sitemap-external-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

.sitemap-external-card {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    padding: var(--space-lg);
    text-align: center;
    transition: all 0.3s ease;
}

.sitemap-external-card:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}

.external-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-md);
}

.sitemap-external-card h4 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.external-link {
    color: var(--brand-yellow);
    text-decoration: none;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    display: block;
    margin-bottom: var(--space-sm);
    word-break: break-all;
}

.external-link:hover {
    text-decoration: underline;
}

.external-desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Meta Information Grid */
.sitemap-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
}

.meta-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: var(--space-lg);
}

.meta-section h4 {
    color: var(--brand-yellow);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.meta-list li {
    padding: 4px 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    position: relative;
    padding-left: var(--space-md);
}

.meta-list li::before {
    content: "✓";
    color: var(--brand-green);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Footer Enhancements */
.sitemap-footer {
    text-align: center;
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-2xl);
}

.sitemap-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.sitemap-note {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    padding: var(--space-lg);
    max-width: 600px;
    margin: 0 auto;
}

/* Legacy Support */
.sitemap-tree {
    margin: var(--space-2xl) 0;
}

.sitemap-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
}

.sitemap-branch {
    padding: var(--space-lg);
}

.sitemap-list {
    list-style: none;
    padding: 0;
    margin-top: var(--space-md);
}

.sitemap-list li {
    padding: 2px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Responsive Sitemap */
@media (max-width: 768px) {
    .sitemap-cards-grid,
    .sitemap-external-grid,
    .sitemap-meta-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .sitemap-level {
        padding: var(--space-lg);
        margin-bottom: var(--space-lg);
    }
    
    .sitemap-level-title {
        font-size: 1.3rem;
    }
    
    .sitemap-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .sitemap-actions .btn {
        width: 100%;
        max-width: 250px;
    }
}

/* Hero Enhancements */
.hero-section .punchline {
    font-size: 1.1rem;
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-2xl) auto;
    max-width: 600px;
}

.hero-ctas {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-2xl);
}

/* ================================================================ */
/* NAVEGACIÓN ACTIVA Y ACCESIBILIDAD */
/* ================================================================ */

/* Active navigation state */
.nav-active {
    color: var(--brand-yellow) !important;
    font-weight: 600;
    position: relative;
}

.nav-active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--brand-yellow);
    border-radius: 1px;
}

/* Header transition - already defined above */

/* Skip link for accessibility */
.skip-link:focus {
    outline: 2px solid var(--brand-yellow);
    outline-offset: 2px;
}

/* Focus styles for better accessibility */
.tab-button:focus,
.btn:focus,
.nav-link:focus,
.mobile-nav-link:focus {
    outline: 2px solid var(--brand-yellow);
    outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .tab-button,
    .info-card,
    .solution-card,
    .team-member,
    #main-header {
        transition: none;
    }
    
    .solution-card:hover,
    .team-member:hover,
    .info-card:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tab-button {
        border-width: 2px;
    }
    
    .tab-button.active {
        border-width: 3px;
    }
    
    .info-card,
    .solution-card,
    .team-member {
        border-width: 2px;
    }
}

/* ================================================================ */
/* CAMPUS VIRTUAL BUTTON STYLES */
/* ================================================================ */

/* ================================================================
 * CAMPUS BUTTON STYLES (UNIFIED)
 * ================================================================ */
.campus-btn,
.mobile-nav-campus {
    background: linear-gradient(135deg, var(--brand-yellow) 0%, #FFA500 100%);
    color: var(--brand-blue-dark);
    font-weight: 600;
    padding: 0.625rem 1.125rem;
    border-radius: 1.5625rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    box-shadow: 0 0.125rem 0.5rem rgba(255, 215, 0, 0.2);
    white-space: nowrap;
    min-width: fit-content;
}

.campus-btn:hover,
.mobile-nav-campus:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(255, 215, 0, 0.3);
    text-decoration: none;
    color: var(--brand-blue-dark);
}

/* Mobile navigation enhancements */
.mobile-nav-separator {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-md) 0;
    width: 100%;
}

.mobile-nav-campus {
    margin: var(--space-md) 0;
    justify-content: center;
    width: 100%;
    max-width: 200px;
}

/* Header balance and symmetry */
/* ================================================================
 * HEADER RESPONSIVE ADJUSTMENTS
 * ================================================================ */

/* Desktop navigation positioning */
@media (min-width: 769px) {
    #main-header .nav-links-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Tablet adjustments */
@media (max-width: 1200px) and (min-width: 769px) {
    #main-header .header-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    #main-header .nav-links-container {
        position: static;
        transform: none;
        margin: 0 auto;
        gap: 1rem;
    }
    
    .campus-btn span {
        display: none; /* Hide text, keep icon only */
    }
    
    .campus-btn {
        padding: 0.625rem;
        min-width: 2.75rem;
        justify-content: center;
        position: relative;
    }
    
    .campus-btn::after {
        content: "Entrar al Campus";
        position: absolute;
        bottom: -2.1875rem;
        left: 50%;
        transform: translateX(-50%);
        background: var(--brand-blue-dark);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1000;
    }
    
    .campus-btn:hover::after {
        opacity: 1;
    }
}

/* Small desktop adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
    #main-header .nav-links-container {
        gap: 0.75rem;
    }
    
    .nav-link {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Hide desktop navigation elements */
    .campus-btn {
        display: none !important;
    }
    
    /* Hide desktop navigation completely */
    #main-header .nav-links-container {
        display: none !important;
    }
    
    /* Hide desktop contact email icon */
    .tooltip-container {
        display: none !important;
    }
    
    /* Ensure mobile navigation is properly displayed */
    .mobile-nav-content {
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    /* Mobile header adjustments */
    #main-header .header-actions {
        justify-content: flex-end;
        gap: 0;
    }
    
    /* Mobile header should only show hamburger and logo */
    #main-header .header-content {
        padding: 0 1rem;
    }
    
    /* Logo centered on mobile */
    #main-header .logo-link {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Hamburger on the left */
    #mobile-menu-btn {
        z-index: 1001;
        position: relative;
    }
}

/* Dynamic content updates via config.js */
.stat-card h3[id] {
    transition: all 0.3s ease;
}

.stat-card h3[id]:hover {
    transform: scale(1.05);
    color: var(--brand-yellow);
}

/* ================================================================ */
/* ESTILOS PARA MICROSITIO DE RECURSOS */
/* ================================================================ */

/* Breadcrumbs */
.breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Navigation Cards Enhanced */
.navigation-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.navigation-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.navigation-card:hover {
    border-color: var(--brand-yellow);
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(255, 215, 0, 0.2);
}

/* Layout optimizado para infocards de navegación */
.navigation-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.navigation-card .card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    text-align: center;
    width: 100%;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.navigation-card .card-title {
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
    line-height: 1.3;
    width: 100%;
}

.navigation-card .card-description {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    width: 100%;
}

.navigation-card .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    width: 100%;
}

.resource-stats {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.stat-mini {
    background: rgba(255, 215, 0, 0.1);
    color: var(--brand-yellow);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

/* Prompts Categories */
.prompts-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
}

.prompt-category-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--space-2xl);
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
}

.prompt-category-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.category-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.category-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-grow: 1;
}

.category-count {
    background: var(--brand-yellow);
    color: var(--brand-blue-dark);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.category-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

.prompt-examples {
    margin: var(--space-lg) 0;
}

.prompt-preview {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.prompt-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    font-size: 1rem;
}

.prompt-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
}

.prompt-tag {
    background: rgba(255, 215, 0, 0.2);
    color: var(--brand-yellow);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

.category-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    align-items: center;
}

.category-actions .btn {
    width: auto;
    min-width: 140px;
    max-width: 200px;
    justify-content: center;
}

.category-actions .btn-primary {
    order: 1;
}

.category-actions .btn-secondary {
    order: 2;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    min-height: 2.5rem;
}

.access-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
}

/* Asistentes Grid */
.asistentes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
}

.asistente-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--space-2xl);
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.asistente-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.asistente-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.asistente-avatar {
    position: relative;
    flex-shrink: 0;
}

.avatar-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--brand-yellow) 0%, #FFA500 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--brand-blue-dark);
    font-weight: bold;
}

.status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--brand-blue-dark);
}

.status-indicator.active {
    background: var(--brand-green);
}

.asistente-info {
    flex-grow: 1;
}

.asistente-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.asistente-specialty {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: var(--space-sm);
}

.availability-badge {
    background: var(--brand-green);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.asistente-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.capabilities-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    font-size: 1rem;
}

.capabilities-list {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-lg);
}

.capabilities-list li {
    padding: 4px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    position: relative;
    padding-left: var(--space-lg);
}

.capabilities-list li::before {
    content: "⚡";
    position: absolute;
    left: 0;
    color: var(--brand-yellow);
}

.asistente-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-number {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-yellow);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.asistente-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    align-items: center;
}

.asistente-actions .btn {
    width: 100%;
    max-width: 250px;
    justify-content: center;
}

/* Contenido Educativo */
.contenido-sections {
    margin-top: var(--space-2xl);
}

.contenido-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
    margin-bottom: var(--space-2xl);
    padding: var(--space-2xl);
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    backdrop-filter: blur(15px);
}

.contenido-feature:nth-child(even) {
    grid-template-columns: 1fr 1fr;
}

.contenido-feature:nth-child(even) .feature-media {
    order: -1;
}

.feature-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.feature-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.podcast-player {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: var(--space-xl);
    color: white;
    text-align: center;
}

.player-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}

.player-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.player-subtitle {
    opacity: 0.9;
    margin-bottom: var(--space-lg);
}

.player-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
}

.player-stats .stat {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.recent-episodes {
    margin-top: var(--space-lg);
}

.episodes-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.episode-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.episode-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.episode-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.episode-number {
    background: var(--brand-yellow);
    color: var(--brand-blue-dark);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.episode-info {
    flex-grow: 1;
}

.episode-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.episode-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.episode-duration {
    color: var(--text-secondary);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* ================================================================
 * EPISODIOS CLICKEABLES
 * ================================================================ */
.episode-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: block;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.episode-link:hover {
    border-color: var(--brand-yellow);
    background: rgba(255, 215, 0, 0.05);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.15);
}

.episode-link:focus-visible {
    outline: 2px solid var(--brand-yellow);
    outline-offset: 2px;
    border-color: var(--brand-yellow);
}

.episode-link .episode-title {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.episode-link:hover .episode-title {
    color: var(--brand-yellow);
}

.episode-link .episode-desc {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.episode-link:hover .episode-desc {
    color: var(--text-primary);
}

.episode-link .episode-duration {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.episode-link:hover .episode-duration {
    color: var(--brand-yellow);
    font-weight: 600;
}

/* ================================================================
 * ESPACIADO PARA BOTÓN DE PODCAST
 * ================================================================ */
.podcast-actions {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ================================================================
 * REPRODUCTOR DE VIDEO EMBEBIDO
 * ================================================================ */
.video-player-container {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ================================================================
 * CASOS DE ESTUDIO
 * ================================================================ */
.case-studies-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.case-study-item {
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    transition: all 0.3s ease;
}

.case-study-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
    border-color: var(--brand-yellow);
}

.case-meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.case-industry,
.case-size {
    background: var(--brand-yellow);
    color: var(--brand-blue-dark);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.case-study-title {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.case-summary {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* ================================================================
 * ESPACIADO PARA BOTÓN DE CASOS DE ESTUDIO
 * ================================================================ */
.casos-actions {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.video-iframe {
    width: 100%;
    height: 315px;
    border: none;
    border-radius: 16px 16px 0 0;
    background: #000;
    transition: all 0.3s ease;
}

.video-iframe:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.15);
}

.video-player-container .video-info {
    padding: var(--space-lg);
    background: var(--surface-glass);
    backdrop-filter: blur(10px);
}

.video-player-container .video-title {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.video-player-container .video-stats {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Video Categories */
.video-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.video-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.category-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.video-count {
    background: var(--brand-yellow);
    color: var(--brand-blue-dark);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Herramientas Grid */
.herramientas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
}

.herramienta-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--space-2xl);
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
}

.herramienta-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.herramienta-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.herramienta-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.herramienta-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-grow: 1;
}

.herramienta-type {
    background: rgba(255, 215, 0, 0.2);
    color: var(--brand-yellow);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.herramienta-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.herramienta-features {
    margin-bottom: var(--space-lg);
}

.features-list {
    list-style: none;
    padding: 0;
}

.features-list li {
    padding: 4px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    position: relative;
    padding-left: var(--space-lg);
}

.features-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand-green);
    font-weight: bold;
}

.herramienta-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.usage-stat, .rating-stat, .time-stat, .accuracy-stat, .impact-stat, .efficiency-stat, .satisfaction-stat {
    text-align: center;
    flex: 1;
}

.usage-stat .stat-number, .time-stat .time-number, .accuracy-stat .accuracy-number, 
.impact-stat .impact-number, .efficiency-stat .efficiency-number {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-yellow);
}

.usage-stat .stat-label, .rating-stat .rating-number, .time-stat .time-label, 
.accuracy-stat .accuracy-label, .impact-stat .impact-label, .efficiency-stat .efficiency-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.stars {
    color: var(--brand-yellow);
    font-size: 0.9rem;
}

/* Access Paths */
.access-paths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-2xl);
    margin: var(--space-2xl) 0;
}

.access-path-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--space-2xl);
    backdrop-filter: blur(15px);
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.access-path-card.featured {
    border-color: var(--brand-yellow);
    background: rgba(255, 215, 0, 0.05);
}

.access-path-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.featured-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--brand-yellow);
    color: var(--brand-blue-dark);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.path-icon {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
}

.path-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.path-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

.path-benefits {
    text-align: left;
    margin-bottom: var(--space-lg);
}

.benefits-list {
    list-style: none;
    padding: 0;
}

.benefits-list li {
    padding: 4px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    position: relative;
    padding-left: var(--space-lg);
}

.benefits-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand-green);
    font-weight: bold;
}

.path-cta {
    text-align: center;
}

/* Responsive enhancements for mobile navigation */
@media (max-width: 768px) {
    .philosophy-grid,
    .resources-grid,
    .solution-grid,
    .community-subsections,
    .team-grid,
    .sitemap-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .arsenal-tabs,
    .solutions-tabs {
        flex-direction: column;
        align-items: center;
        margin-top: var(--space-md);
    }
    
    /* Responsive adjustments for recursos micrositio */
    .navigation-grid,
    .prompts-categories,
    .asistentes-grid,
    .herramientas-grid,
    .access-paths {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .contenido-feature {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .contenido-feature:nth-child(even) .feature-media {
        order: 0;
    }
    
    .video-categories {
        grid-template-columns: 1fr;
    }
    
    .asistente-stats,
    .herramienta-stats {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .asistente-actions {
        gap: var(--space-sm);
        margin-top: var(--space-md);
    }
    
    .asistente-actions .btn {
        max-width: 200px;
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }
    
    .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-sm);
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }
    
    .access-path-card .featured-badge {
        top: -5px;
        right: 10px;
        font-size: 0.7rem;
        padding: 6px 12px;
    }
    
    .category-actions {
        gap: var(--space-sm);
    }
    
    .category-actions .btn {
        min-width: 120px;
        max-width: 180px;
        font-size: 0.85rem;
        padding: 0.5rem 0.875rem;
    }
    
    /* Responsive adjustments for clickable episodes */
    .episode-link {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
    
    .episode-link:hover {
        transform: translateX(2px);
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.1);
    }
    
    .episode-link .episode-title {
        font-size: 0.9rem;
    }
    
    .episode-link .episode-desc {
        font-size: 0.8rem;
    }
    
    .episode-link .episode-duration {
        font-size: 0.75rem;
    }
    
    /* Responsive adjustments for podcast actions */
    .podcast-actions {
        margin-top: var(--space-xl);
        padding-top: var(--space-md);
    }
    
    /* Responsive adjustments for video player */
    .video-player-container {
        margin-top: var(--space-lg);
    }
    
    /* Responsive adjustments for case studies */
    .case-studies-list {
        gap: var(--space-md);
        margin: var(--space-lg) 0;
    }
    
    .case-study-item {
        padding: var(--space-md);
    }
    
    .case-study-title {
        font-size: 1rem;
    }
    
    .case-summary {
        font-size: 0.85rem;
    }
    
    .casos-actions {
        margin-top: var(--space-xl);
        padding-top: var(--space-md);
    }
    
    .video-iframe {
        height: 200px;
    }
    
    .video-player-container .video-info {
        padding: var(--space-md);
    }
    
    .video-player-container .video-title {
        font-size: 1rem;
    }
    
    .video-player-container .video-stats {
        font-size: 0.85rem;
    }
}

/* ================================================================ */
/* ESTILOS PARA MICROSITIO DE EQUIPO */
/* ================================================================ */

/* Philosophy Principles */
.philosophy-principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
}

.principle-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--space-2xl);
    backdrop-filter: blur(15px);
    text-align: center;
    transition: all 0.3s ease;
}

.principle-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.principle-icon {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
}

.principle-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.principle-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.principle-quote {
    background: rgba(255, 215, 0, 0.1);
    border-left: 4px solid var(--brand-yellow);
    padding: var(--space-lg);
    border-radius: 8px;
    font-style: italic;
    color: var(--text-primary);
}

/* Leadership Grid */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
}

.leader-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--space-2xl);
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
    position: relative;
}

.leader-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.leader-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.leader-avatar {
    position: relative;
    flex-shrink: 0;
}

.avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--brand-yellow);
}

.role-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--brand-yellow);
    color: var(--brand-blue-dark);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid var(--brand-blue-dark);
}

.leader-info {
    flex-grow: 1;
}

.leader-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.leader-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-yellow);
    margin-bottom: 4px;
}

.leader-specialty {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}

.leader-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.leader-expertise,
.leader-philosophy,
.leader-achievements {
    margin-bottom: var(--space-lg);
}

.expertise-title,
.philosophy-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    font-size: 0.95rem;
}

.expertise-tags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.expertise-tag {
    background: rgba(255, 215, 0, 0.2);
    color: var(--brand-yellow);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1.3;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expertise-tag:hover {
    background: rgba(255, 215, 0, 0.3);
    transform: translateY(-1px);
}

.philosophy-quote {
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--brand-yellow);
    padding: var(--space-md);
    border-radius: 8px;
    font-style: italic;
    color: var(--text-primary);
    margin: 0;
}

.leader-achievements {
    display: flex;
    justify-content: space-between;
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.achievement-item {
    text-align: center;
    flex: 1;
    padding: var(--space-sm);
    margin: var(--space-xs);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.achievement-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
}

.achievement-number {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-yellow);
}

.achievement-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Working Principles */
.working-principles {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
}

.working-principle-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    transition: all 0.3s ease;
}

.working-principle-card:hover {
    transform: translateX(8px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.principle-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-yellow);
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--brand-yellow);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.principle-content {
    flex-grow: 1;
}

.principle-example {
    background: rgba(255, 255, 255, 0.05);
    padding: var(--space-md);
    border-radius: 8px;
    margin-top: var(--space-md);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.principle-example strong {
    color: var(--text-primary);
}

/* Team Metrics */
.team-metrics {
    margin-top: var(--space-2xl);
    padding: var(--space-2xl);
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    text-align: center;
}

.metrics-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2xl);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-xl);
}

.metric-item {
    text-align: center;
}

.metric-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-yellow);
    margin-bottom: var(--space-sm);
}

.metric-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.metric-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Join Opportunities */
.join-opportunities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-2xl);
    margin: var(--space-2xl) 0;
}

.opportunity-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: var(--space-2xl);
    backdrop-filter: blur(15px);
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.opportunity-card.featured {
    border-color: var(--brand-yellow);
    background: rgba(255, 215, 0, 0.05);
}

.opportunity-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.opportunity-icon {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
}

.opportunity-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.opportunity-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.opportunity-areas {
    text-align: left;
    margin-bottom: var(--space-lg);
}

.areas-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    font-size: 0.95rem;
}

.area-tags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}

.area-tag {
    background: rgba(255, 215, 0, 0.2);
    color: var(--brand-yellow);
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(255, 215, 0, 0.3);
    text-align: center;
    line-height: 1.3;
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opportunity-action {
    text-align: center;
}

/* ================================================================
 * ESTILOS PARA BOTONES DE SOLUCIONES
 * ================================================================ */
.solution-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.solution-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 3rem;
}

.solution-cta .btn-primary {
    order: 1;
    background: linear-gradient(135deg, var(--brand-yellow) 0%, #FFA500 100%);
    color: var(--brand-blue-dark);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
}

.solution-cta .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(255, 215, 0, 0.4);
}

.solution-cta .btn-secondary {
    order: 2;
    background: rgba(255, 255, 255, 0.05);
    color: var(--brand-yellow);
    border: 1px solid rgba(255, 215, 0, 0.4);
    backdrop-filter: blur(10px);
}

.solution-cta .btn-secondary:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--brand-yellow);
    transform: translateY(-2px);
}

.solution-cta .text-sm {
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ================================================================
 * ESTILOS PARA CENTRAR SECCIONES ESPECÍFICAS
 * ================================================================ */
.consulting-card {
    text-align: left;
}

.consulting-card .card-title,
.consulting-card .card-description,
.consulting-card h4,
.consulting-card p {
    text-align: left;
}

.consulting-card .solution-meta {
    justify-content: flex-start;
}

.consulting-card .coaching-elements,
.consulting-card .solution-benefits {
    text-align: left;
    width: 100%;
}

.consulting-card .coaching-element,
.consulting-card .solution-benefits li {
    text-align: left;
    margin-bottom: 0.75rem;
}

.consulting-card .solution-cta {
    text-align: left;
}

/* Team Values */
.team-values {
    margin-top: var(--space-2xl);
    text-align: center;
}

.values-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2xl);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xl);
}

.value-item {
    text-align: center;
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.value-item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.1);
}

.value-icon {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.value-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.value-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Responsive adjustments for equipo micrositio */
@media (max-width: 768px) {
    .philosophy-principles,
    .leadership-grid,
    .join-opportunities,
    .values-grid,
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .working-principle-card {
        flex-direction: column;
        text-align: center;
        gap: var(--space-lg);
    }
    
    .leader-achievements,
    .team-metrics .metrics-grid {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .achievement-item,
    .metric-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-sm);
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }
    
    .tab-button {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    
    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-ctas .btn {
        width: 100%;
        max-width: 280px;
    }
    
    .contact-alternatives {
        flex-direction: column;
        text-align: center;
    }
    
    .community-stats {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .btn-large {
        width: 100%;
        max-width: 300px;
        font-size: 1rem;
    }
    
    /* Leader cards responsive fixes */
    .leader-card {
        padding: var(--space-lg);
        margin-bottom: var(--space-lg);
    }
    
    .leader-actions {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: stretch;
    }
    
    .leader-actions .btn {
        width: 100%;
        justify-content: center;
        margin: 0;
    }
    
    .expertise-tags {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-top: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .expertise-tag {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
        min-height: 2.25rem;
    }
    
    .area-tags {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-top: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .area-tag {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
        min-height: 2rem;
    }
    
    .achievement-item {
        min-width: 70px;
        margin: var(--space-xs) 2px;
        padding: var(--space-xs);
    }
    
    .achievement-number {
        font-size: 1.1rem;
    }
    
    .achievement-label {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    
    .solution-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
        padding-top: 1.25rem;
    }
    
    .badge {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
        min-width: 70px;
        max-width: 90px;
    }
    
    .solution-cta {
        gap: 0.75rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
    }
    
    .solution-cta .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
        min-height: 2.8rem;
    }
    
    .navigation-card .card-icon {
        font-size: 2rem;
        padding: 0.75rem;
    }
    
    .navigation-card .card-title {
        font-size: 1.2rem;
    }
    
    .solution-cta .text-sm {
        margin-top: 0.4rem;
        padding: 0.4rem;
        font-size: 0.75rem;
    }
    
    .consulting-card .coaching-elements,
    .consulting-card .solution-benefits {
        max-width: 100%;
        text-align: left;
    }
    
    .consulting-card .coaching-element,
    .consulting-card .solution-benefits li {
        text-align: left;
    }
    
    .solution-meta {
        gap: 0.3rem;
        justify-content: center;
        margin-top: 1.75rem;
        padding-top: 1rem;
    }
    
    .badge {
        padding: 0.35rem 0.5rem;
        font-size: 0.65rem;
        min-width: 60px;
        max-width: 80px;
    }
}

/* ================================================================
   ENHANCED MICROINTERACTIONS & ANIMATIONS
   ================================================================ */

/* Smart Microinteractions */
@keyframes smart-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes smart-bounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
    40%, 43% { transform: translate3d(0, -8px, 0); }
    70% { transform: translate3d(0, -4px, 0); }
    90% { transform: translate3d(0, -2px, 0); }
}

@keyframes smart-wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}

@keyframes smart-glow {
    0% { box-shadow: 0 0 5px var(--brand-yellow); }
    50% { box-shadow: 0 0 20px var(--brand-yellow), 0 0 30px var(--brand-yellow); }
    100% { box-shadow: 0 0 5px var(--brand-yellow); }
}

@keyframes floating {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.animate-smart-pulse {
    animation: smart-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-smart-bounce {
    animation: smart-bounce 1s;
}

.animate-smart-wiggle {
    animation: smart-wiggle 1s ease-in-out;
}

.animate-smart-glow {
    animation: smart-glow 2s ease-in-out infinite;
}

.animate-floating {
    animation: floating 3s ease-in-out infinite;
}

/* Enhanced Hover Effects */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Fixed calendar emoji visibility */
.btn [data-lucide="calendar-check"],
.btn-primary [data-lucide="calendar-check"],
.fixed .btn [data-lucide="calendar-check"] {
    display: inline-block !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.5rem;
}

/* Ensure emoji in buttons stays visible */
.btn::before,
.btn-primary::before {
    content: none;
}

/* Calendar icon specifically for fixed buttons */
.fixed .btn [data-lucide="calendar-check"] {
    flex-shrink: 0;
    min-width: 1.25rem;
}

/* Microinteracciones mejoradas para cards */
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glow-hover);
    transition: all var(--transition-standard);
}

/* Spotlight de lectura en cards */
.card:hover .card-title,
.card:focus-within .card-title {
    color: var(--accent-strong);
    transition: color var(--transition-micro);
}

.card:hover .card-description,
.card:focus-within .card-description {
    color: var(--accent-light);
    transition: color var(--transition-micro);
}

/* Philosophy cards spotlight */
.philosophy-card:hover .card-title,
.philosophy-card:focus-within .card-title {
    color: var(--accent-strong);
    transition: color var(--transition-micro);
}

/* Interactive Focus Styles */
.btn:focus-visible, 
.nav-link:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.1);
}

/* Smart Loading States */
.btn.loading {
    position: relative;
    color: transparent;
}

/* Button text overflow fixes */
.btn-large {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
}

@media (max-width: 480px) {
    .btn-large {
        font-size: 0.9rem;
        padding: 0.8rem 1.2rem;
        white-space: normal;
        text-align: center;
        min-height: 2.8rem;
    }
    
    /* Shorter text for mobile urgency variant */
    .btn-large.ab-test-variant[data-variant="urgency"] {
        font-size: 0.85rem;
        line-height: 1.2;
    }
    
    /* Expertise tags for very small screens */
    .expertise-tags {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-top: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .expertise-tag {
        font-size: 0.8rem;
        padding: 0.6rem 0.75rem;
        min-height: 2.5rem;
    }
    
    .area-tags {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-top: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .area-tag {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
        min-height: 2.25rem;
    }
    
    .solution-cta {
        gap: 0.5rem;
        margin-top: 1rem;
        padding-top: 0.75rem;
    }
    
    .solution-cta .btn {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
        min-height: 2.5rem;
    }
    
    .navigation-card .card-icon {
        font-size: 1.75rem;
        padding: 0.5rem;
    }
    
    .navigation-card .card-title {
        font-size: 1.1rem;
    }
    
    .solution-cta .text-sm {
        margin-top: 0.3rem;
        padding: 0.3rem;
        font-size: 0.7rem;
    }
    
    .consulting-card .coaching-elements,
    .consulting-card .solution-benefits {
        max-width: 100%;
        text-align: left;
    }
    
    .consulting-card .coaching-element,
    .consulting-card .solution-benefits li {
        text-align: left;
        font-size: 0.9rem;
    }
    
    .solution-meta {
        gap: 0.25rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 1.5rem;
        padding-top: 0.75rem;
    }
    
    .badge {
        padding: 0.3rem 0.4rem;
        font-size: 0.6rem;
        min-width: 55px;
        max-width: 75px;
        border-radius: 6px;
    }
    
    /* Video player for very small screens */
    .video-iframe {
        height: 180px;
    }
    
    .video-player-container .video-info {
        padding: var(--space-sm);
    }
    
    .video-player-container .video-title {
        font-size: 0.95rem;
    }
    
    .video-player-container .video-stats {
        font-size: 0.8rem;
    }
    
    /* Case studies for very small screens */
    .case-study-item {
        padding: var(--space-sm);
    }
    
    .case-study-title {
        font-size: 0.95rem;
    }
    
    .case-summary {
        font-size: 0.8rem;
    }
    
    .casos-actions {
        margin-top: var(--space-lg);
        padding-top: var(--space-sm);
    }
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Personalization Indicators */
.personalized-content {
    position: relative;
}

.personalized-content::before {
    content: '✨';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 12px;
    animation: smart-pulse 2s infinite;
    z-index: 10;
}

/* User Journey Progress Indicator */
.journey-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-yellow), var(--accent-blue));
    transition: width 0.3s ease;
    z-index: 1000;
}

/* Enhanced Modal Animations */
.modal-overlay[aria-hidden="false"] {
    animation: modalFadeIn 0.3s ease-out;
}

.modal-overlay[aria-hidden="false"] .modal-dialog {
    animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    from { 
        transform: translateY(50px) scale(0.9);
        opacity: 0;
    }
    to { 
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Smart Scroll Indicators */
.scroll-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.scroll-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.scroll-dot.active {
    background: var(--brand-yellow);
    transform: scale(1.5);
}

/* A/B Testing Visual Indicators (solo en modo debug) */
.ab-test-variant {
    position: relative;
}

.ab-test-variant::after {
    content: attr(data-variant);
    position: absolute;
    top: 0;
    right: 0;
    background: var(--brand-yellow);
    color: var(--text-dark);
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    display: none;
}

.debug-mode .ab-test-variant::after {
    display: block;
}

/* Performance Optimizations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    .animate-smart-pulse,
    .animate-smart-bounce,
    .animate-smart-wiggle,
    .animate-smart-glow,
    .animate-floating {
        animation: none;
    }
    
    .btn:hover,
    .card:hover {
        transform: none;
    }
    
    .modal-overlay[aria-hidden="false"],
    .modal-overlay[aria-hidden="false"] .modal-dialog {
        animation: none;
    }
}

/* ================================================================
 * PATRONES DE MICROINTERACCIONES ADICIONALES
 * ================================================================ */

/* Activity Pills y Task Items con spotlight */
.activity-pill,
.task-item,
.story-item {
    transition: all var(--transition-standard);
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    background: var(--surface-glass);
}

.activity-pill:hover,
.task-item:hover,
.story-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--glow-hover);
}

/* Spotlight en meta/descripción de actividades */
.activity-pill:hover .activity-meta,
.activity-pill:focus-within .activity-meta,
.task-item:hover .task-meta,
.task-item:focus-within .task-meta {
    color: var(--accent-strong);
    transition: color var(--transition-micro);
}

/* Epic Cards (si existen) */
.epic-card:hover .epic-title,
.epic-card:focus-within .epic-title {
    color: var(--accent-strong);
    transition: color var(--transition-micro);
}

.epic-card:hover .epic-meta,
.epic-card:focus-within .epic-meta {
    color: var(--accent-light);
    transition: color var(--transition-micro);
}

/* Task strike-through mejorado */
.task.completed,
.story-item.completed {
    opacity: 0.6;
    text-decoration: line-through;
    text-decoration-color: var(--accent-strong);
    transition: all var(--transition-micro);
}

/* Navegación lateral sticky (si existe) */
.activities-nav {
    position: sticky;
    top: 80px;
    backdrop-filter: blur(6px);
    background: rgba(10, 18, 42, 0.8);
    border-radius: 12px;
    padding: 16px;
}

.activities-nav .nav-item {
    padding: 8px 12px;
    border-radius: 6px;
    transition: all var(--transition-micro);
    margin-bottom: 4px;
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
}

.activities-nav .nav-item:hover,
.activities-nav .nav-item.active {
    background: var(--surface-glass);
    color: var(--accent-strong);
    transform: translateX(4px);
}

/* ================================================================
 * SEPARADOR VISUAL PARA SECCIONES
 * ================================================================ */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 4rem 0;
    padding: 2rem 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
    max-width: 200px;
}

.divider-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    padding: 0 1rem;
}

@media (max-width: 768px) {
    .section-divider {
        flex-direction: column;
        gap: 1rem;
        margin: 3rem 0;
        padding: 1.5rem 0;
    }
    
    .divider-line {
        max-width: 150px;
    }
    
    .divider-text {
        font-size: 0.9rem;
        padding: 0 0.5rem;
    }
}

/* ===============================================================
 * RESPONSIVE FIXES & INFOCARDS
 * ================================================================ */

.card, .card > * {
  min-width: 0;
}

.card {
  overflow: hidden;
  border-radius: 16px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.badge, .chip {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.card p, .card h* {
    word-break: normal;
    overflow-wrap: anywhere;
}

.card .pill-count {
  position: absolute;
  inset-inline-end: clamp(8px, 2vw, 12px);
  inset-block-start: clamp(8px, 2vw, 12px);
  max-width: calc(100% - 24px);
}

@media (max-width: 768px) {
  .info-card {
    display: block;
  }
}

@media (max-width: 1024px) {
  .desktop-nav {
    display: none;
  }

  .mnav {
    position: fixed;
    inset: 0;
    z-index: 1000;
  }

  .mnav[hidden] {
    display: none !important;
  }

  .mnav__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
  }

  .mnav__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(86vw, 420px);
    overflow-y: auto;
    background: var(--surface, #0f172a);
    padding: 1rem 1.25rem 2rem;
    display: flex;
    flex-direction: column;
  }

  .mnav__close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    line-height: 1;
    align-self: flex-end;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem -0.5rem 1rem;
  }

  .mnav__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .mnav__links a {
    color: var(--text-primary, #ffffff);
    text-decoration: none;
    font-size: 1.25rem;
    padding: 0.5rem 0;
  }
  
  body.no-scroll {
    overflow: hidden;
  }
}

.fab-agendar {
  position: fixed !important;
  z-index: 1100 !important;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  right: 1.5rem !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 56px !important;
  min-height: 56px !important;
  padding: 1rem 1.5rem !important;
  border-radius: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  touch-action: manipulation !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .fab-agendar {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    right: 1rem !important;
    padding: 0.75rem !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
  
  .fab-agendar span:not([data-lucide]):not(.sr-only) {
    display: none !important;
  }
}

/* Reset visible/oculto por modo */
.desktop-nav {
  display: none;
}

.nav-toggle {
  display: inline-flex;
}

/* Desktop >=1025px: mostrar nav completa, ocultar hamburguesa y panel móvil */
@media (min-width: 1025px) {
  .desktop-nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  #mnav {
    display: none !important;
    /* evita "menú móvil visible" en desktop */
  }
}

/* Panel móvil (solo aplica en móvil) */
@media (max-width: 1024px) {
  .mnav {
    position: fixed;
    inset: 0;
    z-index: 1000;
  }

  .mnav[hidden] {
    display: none !important;
  }

  .mnav__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
  }

  .mnav__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(86vw, 420px);
    overflow-y: auto;
    background: var(--surface, #0f172a);
    padding: 1rem 1.25rem 2rem;
    display: flex;
    flex-direction: column;
  }

  .mnav__close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    line-height: 1;
    align-self: flex-end;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem -0.5rem 1rem;
  }

  .mnav__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .mnav__links a {
    color: var(--text-primary, #ffffff);
    text-decoration: none;
    font-size: 1.25rem;
    padding: 0.5rem 0;
  }
  
  body.no-scroll {
    overflow: hidden;
  }
}

/* Eliminar bullets accidentales en listas del header */
.desktop-nav .nav-list,
.mnav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.desktop-nav .nav-list {
    gap: 1.5rem;
}

.mnav__links {
    flex-direction: column;
    gap: 1rem;
}

/* Evitar overlays o placeholders colados en header */
.site-header {
  position: relative;
  z-index: 50;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.desktop-nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.desktop-nav .nav-list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem); /* Espaciado fluido */
}

.desktop-nav .nav-list a {
    padding: 0.5rem;
    white-space: nowrap;
    transition: color 0.2s ease-in-out;
    color: var(--text-secondary, #cbd5e1); /* Color por defecto visible */
}

.desktop-nav .nav-list a:hover,
.desktop-nav .nav-list a[aria-current="page"] {
    color: var(--primary, #facc15); /* Color de resaltado */
}

/* Visibilidad responsiva */
@media (max-width: 1024px) {
    .desktop-nav {
        display: none;
    }
    .nav-toggle {
        display: inline-flex;
    }
}

@media (min-width: 1025px) {
    .desktop-nav {
        display: flex; /* Cambiado de block a flex */
    }
    .nav-toggle {
        display: none;
    }
    #mnav {
        display: none !important;
    }
}

/* Estilos del botón hamburguesa */
.nav-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    padding: 0;
    z-index: 1010;
}

.nav-toggle__bar {
    width: 2rem;
    height: 0.25rem;
    background: var(--text-primary, #ffffff);
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

/* Animación del botón hamburguesa a "X" */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: rotate(-45deg);
}

/* ================================================================
 * HEADER & NAVIGATION - REVISED & CORRECTED
 * ================================================================ */

/* --- Base Header Layout --- */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1.5rem; /* Espaciado entre logo, nav y CTAs */
}

.logo-link {
    flex-shrink: 0; /* Evita que el logo se encoja */
}

.header-ctas {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0; /* Evita que los botones se encojan o rompan la línea */
}

/* --- Desktop Navigation (Visible > 1024px) --- */
@media (min-width: 1025px) {
    .desktop-nav {
        display: flex;
        flex-grow: 1; /* Permite que la nav ocupe el espacio central */
        justify-content: center;
    }

    .desktop-nav .nav-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: clamp(1rem, 2.5vw, 2rem); /* Espaciado adaptable */
    }

    .desktop-nav .nav-list a {
        color: var(--text-secondary, #e2e8f0); /* Color claro y visible */
        text-decoration: none;
        padding: 0.5rem;
        white-space: nowrap;
        transition: color 0.2s ease-in-out;
    }

    .desktop-nav .nav-list a:hover,
    .desktop-nav .nav-list a[aria-current="page"] {
        color: var(--primary, #facc15); /* Resaltado al pasar el mouse o en página actual */
    }

    .nav-toggle {
        display: none !important; /* Oculta el menú hamburguesa en desktop */
    }
}

/* --- Mobile Navigation (Visible < 1025px) --- */
@media (max-width: 1024px) {
    .desktop-nav {
        display: none; /* Oculta la navegación de escritorio en móvil */
    }
}

/* --- Hamburger Button & Mobile Panel --- */
.nav-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    padding: 0;
    z-index: 1010; /* Por encima del fondo del panel */
}

.nav-toggle__bar {
    width: 2rem;
    height: 0.25rem;
    background: var(--text-primary, #ffffff);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    position: relative;
    transform-origin: center;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(0.625rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-0.625rem) rotate(-45deg);
}

/* ================================================================
 * HEADER & NAVIGATION - FINAL & CORRECTED IMPLEMENTATION
 * ================================================================ */

/* --- Mobile First: Base Header Layout --- */
#main-header {
    padding: 1rem 1.5rem; /* Padding base para el header */
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Alinea los elementos a los extremos */
    width: 100%;
}

.logo-link {
    z-index: 10; /* Asegura que el logo esté por encima de otros elementos */
}

/* Ocultar la navegación de escritorio y el botón de campus por defecto en móvil */
.desktop-nav,
.header-ctas .campus-btn {
    display: none;
}

/* Contenedor para los iconos de la derecha en móvil */
.header-ctas {
    display: flex;
    align-items: center;
    gap: 1rem; /* Espacio entre el icono de correo y el menú hamburguesa */
}

/* --- Desktop Styles (> 1024px) --- */
@media (min-width: 1025px) {
    .header-content {
        /* En escritorio, los elementos se distribuyen de manera diferente */
        justify-content: flex-start;
        gap: 2rem;
    }

    .desktop-nav {
        display: flex; /* Mostrar navegación de escritorio */
        flex-grow: 1; /* Ocupa el espacio central */
        justify-content: center; /* Centra los enlaces */
    }

    .desktop-nav .nav-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: clamp(1rem, 2.5vw, 2rem);
    }

    .desktop-nav .nav-list a {
        color: var(--text-secondary, #e2e8f0);
        text-decoration: none;
        padding: 0.5rem;
        transition: color 0.2s ease-in-out;
    }

    .desktop-nav .nav-list a:hover,
    .desktop-nav .nav-list a[aria-current="page"] {
        color: var(--primary, #facc15);
    }

    .header-ctas .campus-btn {
        display: inline-flex; /* Mostrar el botón de campus */
    }

    .header-ctas .icon-mail {
        display: inline-flex; /* Asegura que el icono de mail esté visible */
    }

    .nav-toggle {
        display: none !important; /* Ocultar el menú hamburguesa en escritorio */
    }
}

/* ================================================================
 * ANALYTICS DASHBOARD
 * ================================================================ */
.dashboard-grid {
  /* Dashboard grid styles */
  display: grid;
  gap: 1rem;
}

/* ================================================================
 * LAYOUT & STRUCTURE
 * ================================================================ */

/* ================================================================
 * HEADER & NAVIGATION - DEFINITIVE IMPLEMENTATION
 * ================================================================ */

/* --- Mobile First: Base Header Layout --- */
#main-header {
    background-color: var(--background, #020617);
    padding: 1rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border, #1e293b);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo-link {
    z-index: 10;
}

/* Por defecto en móvil, ocultamos la nav de escritorio y el botón de campus */
.desktop-nav,
.header-ctas .campus-btn {
    display: none;
}

/* Contenedor de iconos de la derecha en móvil */
.header-ctas {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* --- Desktop Styles (> 1024px) --- */
@media (min-width: 1025px) {
    .header-content {
        justify-content: flex-start;
        gap: 2rem;
    }

    .desktop-nav {
        display: flex;
        flex-grow: 1;
        justify-content: center;
    }

    .desktop-nav .nav-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: clamp(1rem, 2.5vw, 2rem);
    }

    .desktop-nav .nav-list a {
        color: var(--text-secondary, #e2e8f0);
        text-decoration: none;
        padding: 0.5rem;
        transition: color 0.2s ease-in-out;
    }

    .desktop-nav .nav-list a:hover,
    .desktop-nav .nav-list a[aria-current="page"] {
        color: var(--primary, #facc15);
    }

    .header-ctas .campus-btn {
        display: inline-flex;
    }

    .nav-toggle {
        display: none !important;
    }
}

/* --- Hamburger Button & Mobile Panel (Siempre presentes en el CSS) --- */
.nav-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    padding: 0;
    z-index: 1010;
}

.nav-toggle__bar {
    width: 2rem;
    height: 0.25rem;
    background: var(--text-primary, #ffffff);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    position: relative;
    transform-origin: center;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(0.625rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-0.625rem) rotate(-45deg);
}

.mnav {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.mnav[hidden] {
    display: none !important;
}

.mnav__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
}

.mnav__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(86vw, 420px);
    overflow-y: auto;
    background: var(--surface, #0f172a);
    padding: 4rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.mnav__close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.mnav__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mnav__links a {
    color: var(--text-primary, #ffffff);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 0.5rem 0;
}

/* --- Video Integrado en Info Card (Móvil) --- */
.video-player-container-integrated {
    margin: 2rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: var(--surface-secondary, #f8fafc);
}

.video-iframe-integrated {
    width: 100%;
    height: 315px;
    border: none;
    display: block;
}

.video-info-integrated {
    padding: 1.5rem;
    background: var(--surface-secondary, #f8fafc);
}

.video-title-integrated {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.video-stats-integrated {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    margin: 0;
    font-weight: 500;
}

/* --- Video Desktop en Feature Media --- */
.video-player-container-desktop {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    background: var(--surface-secondary, #f8fafc);
    height: fit-content;
}

.video-iframe-desktop {
    width: 100%;
    height: 280px;
    border: none;
    display: block;
}

.video-info-desktop {
    padding: 1.5rem;
    background: var(--surface-secondary, #f8fafc);
}

.video-title-desktop {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.video-stats-desktop {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    margin: 0;
    font-weight: 500;
}

/* --- Estilos específicos para Videos y Tutoriales --- */
.videos-tutoriales-feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: flex-start;
}

.videos-tutoriales-feature .feature-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.videos-tutoriales-feature .feature-title {
    margin-bottom: var(--space-md);
}

.videos-tutoriales-feature .feature-description {
    margin-bottom: var(--space-lg);
}

.videos-tutoriales-feature .video-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.videos-tutoriales-feature .video-category {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 140px;
}

.videos-tutoriales-feature .category-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.videos-tutoriales-feature .video-count {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
}

.videos-tutoriales-feature .feature-actions {
    margin-top: auto;
}

/* Responsive para video integrado (móvil) */
@media (max-width: 768px) {
    .video-player-container-integrated {
        margin: 1.5rem 0;
        border-radius: 8px;
    }
    
    .video-iframe-integrated {
        height: 200px;
    }
    
    .video-info-integrated {
        padding: 1rem;
    }
    
    .video-title-integrated {
        font-size: 1.125rem;
    }
    
    .video-stats-integrated {
        font-size: 0.8rem;
    }
    
    /* En móvil, cambiar a layout de una columna */
    .videos-tutoriales-feature {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .videos-tutoriales-feature .feature-media {
        order: -1;
    }
    
    .videos-tutoriales-feature .video-categories {
        flex-direction: column;
    }
    
    .videos-tutoriales-feature .video-category {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .video-iframe-integrated {
        height: 180px;
    }
    
    .video-info-integrated {
        padding: 0.875rem;
    }
    
    .video-title-integrated {
        font-size: 1rem;
    }
    
    .video-iframe-desktop {
        height: 200px;
    }
    
    .video-info-desktop {
        padding: 1rem;
    }
    
    .video-title-desktop {
        font-size: 1rem;
    }
}

/* --- Responsive para Prompt Cards --- */
/* Espaciado entre prompt cards */
.prompt-category-card {
    margin-bottom: var(--space-2xl) !important;
}

.prompt-category-card:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .prompts-categories {
        grid-template-columns: 1fr;
        gap: var(--space-xl) !important;
        padding: 0 var(--space-md);
    }
    
    .prompt-category-card {
        margin-bottom: var(--space-xl) !important;
    }
    
    .prompt-category-card {
        padding: var(--space-xl);
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .category-header {
        flex-wrap: wrap;
        gap: var(--space-md);
    }
    
    .category-icon {
        font-size: 2rem;
    }
    
    .category-title {
        font-size: 1.25rem;
    }
    
    .category-count {
        font-size: 0.75rem;
        padding: 3px 10px;
    }
    
    .prompt-examples {
        margin: var(--space-md) 0;
    }
    
    .prompt-preview {
        padding: var(--space-md);
        margin-bottom: var(--space-sm);
    }
    
    .prompt-title {
        font-size: 0.95rem;
    }
    
    .prompt-desc {
        font-size: 0.85rem;
    }
    
    .category-actions {
        gap: var(--space-sm);
    }
    
    .category-actions .btn {
        min-width: 120px;
        max-width: 180px;
        font-size: 0.85rem;
        padding: 0.5rem 0.875rem;
    }
}

@media (max-width: 480px) {
    .prompts-categories {
        padding: 0 var(--space-sm);
        gap: var(--space-lg) !important;
    }
    
    .prompt-category-card {
        margin-bottom: var(--space-lg) !important;
    }
    
    .prompt-category-card {
        padding: var(--space-lg);
        border-radius: 16px;
    }
    
    .category-header {
        gap: var(--space-sm);
    }
    
    .category-icon {
        font-size: 1.75rem;
    }
    
    .category-title {
        font-size: 1.125rem;
    }
    
    .category-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .prompt-preview {
        padding: var(--space-sm);
    }
    
    .prompt-title {
        font-size: 0.9rem;
    }
    
    .prompt-desc {
        font-size: 0.8rem;
    }
    
    .prompt-tag {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
    
    .category-actions .btn {
        min-width: 100px;
        max-width: 160px;
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
    
    .access-note {
        font-size: 0.75rem;
    }
}

/* --- Espaciado entre secciones de Prompts y Contenido --- */
/* Espaciado específico para secciones de prompts */
#prompts.slide {
    margin-bottom: var(--space-3xl) !important;
    padding-bottom: var(--space-2xl) !important;
}

#prompts .slide-content {
    margin-bottom: var(--space-2xl) !important;
}

.prompts-categories {
    margin-bottom: var(--space-2xl) !important;
}

/* Espaciado específico entre secciones */
#prompts + section,
section + #prompts {
    margin-top: var(--space-3xl) !important;
    padding-top: var(--space-2xl) !important;
}

/* Espaciado entre contenido-feature y prompts */
.contenido-sections {
    margin-top: var(--space-2xl) !important;
}

.contenido-feature {
    margin-bottom: var(--space-2xl) !important;
}

.contenido-feature:last-child {
    margin-bottom: 0 !important;
}

/* Espaciado adicional para secciones específicas */
#contenido.slide {
    margin-top: var(--space-3xl) !important;
    padding-top: var(--space-2xl) !important;
}

#asistentes.slide {
    margin-top: var(--space-3xl) !important;
    padding-top: var(--space-2xl) !important;
}

/* Responsive para espaciado */
@media (max-width: 768px) {
    #prompts.slide {
        margin-bottom: var(--space-2xl) !important;
        padding-bottom: var(--space-xl) !important;
    }
    
    #prompts + section,
    section + #prompts {
        margin-top: var(--space-2xl) !important;
        padding-top: var(--space-xl) !important;
    }
    
    .contenido-sections {
        margin-top: var(--space-xl) !important;
    }
    
    .contenido-feature {
        margin-bottom: var(--space-xl) !important;
    }
    
    #contenido.slide,
    #asistentes.slide {
        margin-top: var(--space-2xl) !important;
        padding-top: var(--space-xl) !important;
    }
}

@media (max-width: 480px) {
    #prompts.slide {
        margin-bottom: var(--space-xl) !important;
        padding-bottom: var(--space-lg) !important;
    }
    
    #prompts + section,
    section + #prompts {
        margin-top: var(--space-xl) !important;
        padding-top: var(--space-lg) !important;
    }
    
    .contenido-sections {
        margin-top: var(--space-lg) !important;
    }
    
    .contenido-feature {
        margin-bottom: var(--space-lg) !important;
    }
    
    #contenido.slide,
    #asistentes.slide {
        margin-top: var(--space-xl) !important;
        padding-top: var(--space-lg) !important;
    }
}

/* ================================================================
 * MOBILE CARD SPACING FIX - SOLUCIÓN LLM
 * ================================================================ */
@media (max-width: 768px) {
    /* Solución general para todas las tarjetas */
    [class*="card"] {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
        box-sizing: border-box !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    [class*="card"] > * {
        margin-bottom: 0.75rem !important;
    }
    
    [class*="card"] > *:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Solución específica para prompt cards */
    .prompt-category-card {
        padding: 1.5rem 1rem !important;
        margin-bottom: 1.5rem !important;
        border-radius: 16px !important;
    }
    
    .prompt-category-card:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Solución específica para info cards */
    .info-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Solución específica para navigation cards */
    .navigation-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Solución específica para solution cards */
    .solution-card {
        padding: 1.5rem 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Solución específica para leader cards */
    .leader-card {
        padding: 1.5rem 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Solución específica para working principle cards */
    .working-principle-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Solución específica para feature cards */
    .feature-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Solución específica para dashboard cards */
    .dashboard-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Solución específica para result cards */
    .result-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Solución específica para score cards */
    .score-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Solución específica para opportunity cards */
    .opportunity-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Solución específica para principle cards */
    .principle-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 480px) {
    /* Solución más compacta para móviles pequeños */
    [class*="card"] {
        padding: 1rem 0.875rem !important;
        margin-bottom: 0.875rem !important;
    }
    
    .prompt-category-card {
        padding: 1.25rem 0.875rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .info-card,
    .navigation-card,
    .solution-card,
    .leader-card,
    .working-principle-card,
    .feature-card,
    .dashboard-card,
    .result-card,
    .score-card,
    .opportunity-card,
    .principle-card {
        padding: 1rem 0.875rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ================================================================
 * SOLUCIÓN INMEDIATA LLM - CSS OVERRIDE DIRECTO
 * ================================================================ */
@media screen and (max-width: 768px) {
    .info-card,
    .feature-card,
    [class*="card"]:not(.card-header):not(.card-footer) {
        padding: 24px 20px !important;
        margin: 16px 0 !important;
        min-height: auto !important;
    }
    
    /* Espaciado interno específico */
    .info-card h3,
    .info-card h4,
    .feature-card h3,
    .feature-card h4 {
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
    }
    
    .info-card p,
    .feature-card p {
        margin: 0 0 20px 0 !important;
        line-height: 1.6 !important;
        padding: 0 !important;
    }
    
    .info-card .btn,
    .info-card button,
    .feature-card .btn,
    .feature-card button {
        margin: 20px 0 8px 0 !important;
        padding: 12px 16px !important;
    }
    
    /* Forzar espaciado entre todos los elementos directos */
    .info-card > *,
    .feature-card > * {
        margin-bottom: 16px !important;
    }
    
    .info-card > *:last-child,
    .feature-card > *:last-child {
        margin-bottom: 0 !important;
    }
}

/* ================================================================
 * SOLUCIÓN DE EMERGENCIA - MÁXIMA PRIORIDAD
 * ================================================================ */
* [class*="card"] {
    padding: 24px 20px !important;
}

* [class*="card"] > * {
    margin-bottom: 16px !important;
}

@media (max-width: 768px) {
    * [class*="card"] {
        padding: 28px 24px !important;
        margin: 20px 0 !important;
    }
}

/* ================================================================
 * CSS ADICIONAL PARA CLASE MOBILE-SPACED
 * ================================================================ */
.mobile-spaced {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 768px) {
    .mobile-spaced {
        padding: 24px 20px !important;
        gap: 20px !important;
    }
    
    .mobile-spaced .card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    .mobile-spaced .card-button {
        margin-top: auto;
    }
}