/* ============================================================ KOBALTO ACADEMY - Metodo Cards Estilos unificados para las cards de metodología (tema oscuro) ============================================================ *//* ============================================================ BASE STYLES ============================================================ */.metodo-card{background:rgba(255,255,255,0.08);border:1px solid rgba(234,238,255,0.1);border-radius:16px;padding:2rem;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.15);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);border-bottom:4px solid transparent;cursor:pointer;position:relative}.metodo-card h3{font-family:'Quicksand',sans-serif;font-size:1.2rem;font-weight:700;color:var(--blanco);margin-bottom:1rem}.metodo-card > p{color:var(--azul-claro);font-size:0.95rem;line-height:1.5}/* ============================================================ ICON BASE STYLES ============================================================ */.metodo-icon{width:70px;height:70px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),box-shadow 0.4s cubic-bezier(0.4,0,0.2,1)}.metodo-icon i{font-size:1.8rem;transition:color 0.4s cubic-bezier(0.4,0,0.2,1),transform 0.4s cubic-bezier(0.4,0,0.2,1)}/* ============================================================ HINT (Explorar) ============================================================ */.metodo-hint{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);font-size:0.8rem;font-weight:500;opacity:0;transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1)}.metodo-card:hover .metodo-hint{opacity:1}/* ============================================================ HOVER BASE - Comportamiento común ============================================================ */.metodo-card:hover{transform:translateY(-8px);background:rgba(255,255,255,0.12);box-shadow:0 12px 40px rgba(0,0,0,0.25)}.metodo-card:hover .metodo-icon{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 25px rgba(0,0,0,0.3)}.metodo-card:hover .metodo-icon i{color:var(--dorado);transform:scale(1.1)}/* ============================================================ MÉTODO SOCRÁTICO - Azul Navy ============================================================ */.metodo-card.metodo-socratico{border-bottom-color:transparent}.metodo-card.metodo-socratico .metodo-icon{background:linear-gradient(135deg,#0d1a2d 0%,var(--azul-navy) 100%);box-shadow:0 4px 15px rgba(30,58,95,0.4)}.metodo-card.metodo-socratico .metodo-icon i{color:var(--azul-claro)}.metodo-card.metodo-socratico .metodo-hint{color:var(--azul-claro)}/* Socrático Hover */.metodo-card.metodo-socratico:hover{border-bottom-color:var(--azul-claro);background:rgba(30,58,95,0.2)}.metodo-card.metodo-socratico:hover .metodo-icon{box-shadow:0 8px 25px rgba(30,58,95,0.5)}.metodo-card.metodo-socratico:hover .metodo-icon i{color:var(--dorado)}/* ============================================================ MASTERY LEARNING - Dorado ============================================================ */.metodo-card.metodo-mastery{border-bottom-color:transparent}.metodo-card.metodo-mastery .metodo-icon{background:linear-gradient(135deg,#8a6600 0%,var(--dorado) 100%);box-shadow:0 4px 15px rgba(255,199,0,0.3)}.metodo-card.metodo-mastery .metodo-icon i{color:var(--azul-corporativo)}.metodo-card.metodo-mastery .metodo-hint{color:var(--dorado)}/* Mastery Hover */.metodo-card.metodo-mastery:hover{border-bottom-color:var(--dorado);background:rgba(255,199,0,0.1)}.metodo-card.metodo-mastery:hover .metodo-icon{box-shadow:0 8px 25px rgba(255,199,0,0.4)}.metodo-card.metodo-mastery:hover .metodo-icon i{color:var(--blanco)}/* ============================================================ PRINCIPIOS MONTESSORI - Cyan ============================================================ */.metodo-card.metodo-montessori{border-bottom-color:transparent}.metodo-card.metodo-montessori .metodo-icon{background:linear-gradient(135deg,#006066 0%,var(--cyan) 100%);box-shadow:0 4px 15px rgba(0,217,225,0.3)}.metodo-card.metodo-montessori .metodo-icon i{color:var(--azul-corporativo)}.metodo-card.metodo-montessori .metodo-hint{color:var(--cyan)}/* Montessori Hover */.metodo-card.metodo-montessori:hover{border-bottom-color:var(--cyan);background:rgba(0,217,225,0.1)}.metodo-card.metodo-montessori:hover .metodo-icon{box-shadow:0 8px 25px rgba(0,217,225,0.4)}.metodo-card.metodo-montessori:hover .metodo-icon i{color:var(--blanco)}/* ============================================================ RESPONSIVE - Tablet ============================================================ */@media (max-width:1024px){.metodo-card{padding:1.75rem}.metodo-icon{width:60px;height:60px}.metodo-icon i{font-size:1.5rem}.metodo-card h3{font-size:1.1rem}}/* ============================================================ RESPONSIVE - Mobile ============================================================ */@media (max-width:768px){.metodo-card{padding:1.5rem}.metodo-icon{width:55px;height:55px;margin-bottom:1rem}.metodo-icon i{font-size:1.4rem}.metodo-card h3{font-size:1rem}.metodo-card > p{font-size:0.9rem}}