/* ============================================================
   KOBALTO ACADEMY - Indicador de interactividad móvil
   Círculo con "+" que hereda el color de cada tarjeta
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
    
    /* ============================================================
       ESTILO BASE DEL INDICADOR
       ============================================================ */
    
    .metodo-card::after,
    .principio-card::after,
    .stat-card::after,
    .funcionalidad-card::after {
        content: '+';
        position: absolute;
        bottom: 0.75rem;
        right: 0.75rem;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        font-weight: 700;
        opacity: 0.9;
        /* Colores por defecto */
        background: rgba(255, 255, 255, 0.15);
        color: var(--dorado);
    }
    
    /* ============================================================
       PRINCIPIOS - Por categoría
       ============================================================ */
    
    /* Aprendizaje - Azul brillante */
    .principio-card.cat-aprendizaje::after {
        background: rgba(27, 111, 176, 0.2);
        color: #1B6FB0;
    }
    
    /* Autonomía - Turquesa */
    .principio-card.cat-autonomia::after {
        background: rgba(29, 211, 176, 0.2);
        color: #1DD3B0;
    }
    
    /* Tecnología - Morado */
    .principio-card.cat-tecnologia::after {
        background: rgba(168, 85, 247, 0.2);
        color: #A855F7;
    }
    
    /* Ciudadanía - Dorado */
    .principio-card.cat-ciudadania::after {
        background: rgba(255, 199, 0, 0.2);
        color: #FFC700;
    }
    
    /* Comunidad - Azul claro */
    .principio-card.cat-comunidad::after {
        background: rgba(234, 238, 255, 0.2);
        color: #EAEEFF;
    }
    
    /* ============================================================
       PILARES - Por tipo
       Nota: Sobrescribimos completamente el ::after original
       que tiene el efecto de brillo radial
       ============================================================ */
    
    /* Reset del efecto original en móvil */
    .pilar-card::after {
        content: '+' !important;
        position: absolute !important;
        bottom: 0.75rem !important;
        right: 0.75rem !important;
        top: auto !important;
        left: auto !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        opacity: 0.9 !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: var(--dorado) !important;
        /* Anular propiedades del efecto original */
        transform: none !important;
        transition: none !important;
    }
    
    /* Académico - Dorado */
    .pilar-card.pilar-academico::after {
        background: rgba(255, 199, 0, 0.25) !important;
        color: #FFF !important;
    }
    
    /* Tecnológico - Morado */
    .pilar-card.pilar-tech::after {
        background: rgba(168, 85, 247, 0.25) !important;
        color: #FFF  !important;
    }
    
    /* Ciudadanía - Azul cielo */
    .pilar-card.pilar-ciudadania::after {
        background: rgba(59, 130, 246, 0.25) !important;
        color: #FFF  !important;
    }
    
    /* Autosuficiencia - Turquesa */
    .pilar-card.pilar-autosuficiencia::after {
        background: rgba(29, 211, 176, 0.25) !important;
        color: #FFF  !important;
    }
    
    /* ============================================================
       METODOLOGÍA - Por método
       ============================================================ */
    
    /* Socrático - Azul navy / Azul claro */
    .metodo-card.metodo-socratico::after {
        background: rgba(234, 238, 255, 1);
        color: #FFF;
    }
    
    /* Mastery - Dorado */
    .metodo-card.metodo-mastery::after {
        background: rgba(255, 199, 0, 0.25);
        color: #FFC700;
    }
    
    /* Montessori - Cyan */
    .metodo-card.metodo-montessori::after {
        background: rgba(0, 217, 225, 0.25);
        color: #00D9E1;
    }
    
    /* ============================================================
       ESTADÍSTICAS - Por tipo
       ============================================================ */
    
    /* Abandono - Rojo */
    .stat-card.stat-abandono::after {
        background: rgba(231, 76, 60, 0.15);
        color: #e74c3c;
    }
    
    /* Olvido - Morado */
    .stat-card.stat-olvido::after {
        background: rgba(168, 85, 247, 0.15);
        color: #A855F7;
    }
    
    /* Acoso - Navy */
    .stat-card.stat-acoso::after {
        background: rgba(30, 58, 95, 0.2);
        color: #1E3A5F;
    }
    
    /* Finanzas - Dorado */
    .stat-card.stat-finanzas::after {
        background: rgba(255, 199, 0, 0.15);
        color: #b38f00;
    }
    
    /* ============================================================
       FUNCIONALIDADES - Dorado sobre fondo oscuro
       ============================================================ */
    
    .funcionalidad-card::after {
        background: rgba(4, 36, 84, 0.85);
        color: #FFC700;
        bottom: auto;
        top: 0.75rem;
    }
    
    /* ============================================================
       FEEDBACK TÁCTIL
       ============================================================ */
    
    .principio-card:active,
    .pilar-card:active,
    .metodo-card:active,
    .stat-card:active,
    .funcionalidad-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* ============================================================
   FIX FAQs - Solo aumentar max-height
   ============================================================ */

.faq-item.active .faq-answer {
    max-height: 20000px !important;
}