/* ============================================================ KOBALTO ACADEMY - Plataforma Cards Restructure Títulos y descripciones ARRIBA de las cards con colores vinculados ============================================================ *//* ============================================================ CSS VARIABLES - Card Background Colors (12% opacity) ============================================================ */:root{--card-bg-azul-brillante:rgba(27,111,176,0.12);--card-bg-turquesa:rgba(29,211,176,0.12);--card-bg-morado:rgba(168,85,247,0.12);--card-bg-dorado:rgba(255,199,0,0.15);--card-bg-azul-medio:rgba(64,80,134,0.12)}/* ============================================================ WRAPPER - Contenedor unificado para plataforma y funcionalidad ============================================================ */.plataforma-card-wrapper,.funcionalidad-card-wrapper{display:flex;flex-direction:column;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1)}.plataforma-card-wrapper:hover,.funcionalidad-card-wrapper:hover{transform:translateY(-8px)}/* ============================================================ HEADER - Título y descripción ARRIBA de la card ============================================================ */.plataforma-card-header,.funcionalidad-card-header{padding:1rem 1.25rem;border-radius:12px 12px 0 0;text-align:center;transition:all 0.3s ease}.plataforma-card-header h4,.funcionalidad-card-header h4{font-size:1.1rem;font-weight:600;margin:0 0 0.35rem 0;display:flex;align-items:center;justify-content:center;gap:0.5rem}.plataforma-card-header p,.funcionalidad-card-header p{font-size:0.85rem;margin:0;line-height:1.4}/* ============================================================ CARDS - Ajustes para la nueva estructura ============================================================ *//* Plataforma card dentro del wrapper */.plataforma-card-wrapper .plataforma-card{border-radius:0 0 12px 12px;overflow:hidden;transition:box-shadow 0.4s cubic-bezier(0.4,0,0.2,1)}/* Cursor pointer para indicar que es clickable (desktop e iPad) */@media (hover:hover),(min-width:768px){.plataforma-card-wrapper{cursor:pointer}.plataforma-card-wrapper .plataforma-card::after{content:'';position:absolute;top:0.75rem;right:0.75rem;width:32px;height:32px;background:rgba(4,36,84,0.7);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23FFC700'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:14px}.plataforma-card-wrapper:hover .plataforma-card::after{opacity:1}.plataforma-card-wrapper .plataforma-card{position:relative}}.plataforma-card-wrapper:hover .plataforma-card{box-shadow:0 12px 40px rgba(4,36,84,0.2)}/* Ocultar el contenido antiguo dentro de la card */.plataforma-card-wrapper .plataforma-card .plataforma-card-content{display:none}/* Funcionalidad card dentro del wrapper */.funcionalidad-card-wrapper .funcionalidad-card{border-radius:0 0 12px 12px;overflow:hidden;position:relative;cursor:pointer;transition:box-shadow 0.4s cubic-bezier(0.4,0,0.2,1)}.funcionalidad-card-wrapper:hover .funcionalidad-card{box-shadow:0 12px 40px rgba(4,36,84,0.2)}/* Ocultar el label antiguo (overlay) */.funcionalidad-card-wrapper .funcionalidad-card .funcionalidad-label{display:none}/* ============================================================ COLOR VARIANTS - Azul Brillante ============================================================ */.color-azul-brillante .plataforma-card-header,.color-azul-brillante .funcionalidad-card-header{background:var(--card-bg-azul-brillante)}.color-azul-brillante .plataforma-card-header h4,.color-azul-brillante .funcionalidad-card-header h4{color:var(--azul-brillante)}.color-azul-brillante .plataforma-card-header p,.color-azul-brillante .funcionalidad-card-header p{color:var(--azul-corporativo)}.color-azul-brillante .plataforma-card,.color-azul-brillante .funcionalidad-card{border:3px solid var(--azul-brillante);border-top:none}/* ============================================================ COLOR VARIANTS - Turquesa ============================================================ */.color-turquesa .plataforma-card-header,.color-turquesa .funcionalidad-card-header{background:var(--card-bg-turquesa)}.color-turquesa .plataforma-card-header h4,.color-turquesa .funcionalidad-card-header h4{color:#15a085}.color-turquesa .plataforma-card-header p,.color-turquesa .funcionalidad-card-header p{color:var(--azul-corporativo)}.color-turquesa .plataforma-card,.color-turquesa .funcionalidad-card{border:3px solid var(--turquesa);border-top:none}/* ============================================================ COLOR VARIANTS - Morado ============================================================ */.color-morado .plataforma-card-header,.color-morado .funcionalidad-card-header{background:var(--card-bg-morado)}.color-morado .plataforma-card-header h4,.color-morado .funcionalidad-card-header h4{color:var(--morado)}.color-morado .plataforma-card-header p,.color-morado .funcionalidad-card-header p{color:var(--azul-corporativo)}.color-morado .plataforma-card,.color-morado .funcionalidad-card{border:3px solid var(--morado);border-top:none}/* ============================================================ COLOR VARIANTS - Dorado ============================================================ */.color-dorado .plataforma-card-header,.color-dorado .funcionalidad-card-header{background:var(--card-bg-dorado)}.color-dorado .plataforma-card-header h4,.color-dorado .funcionalidad-card-header h4{color:var(--azul-corporativo)}.color-dorado .plataforma-card-header h4 i,.color-dorado .funcionalidad-card-header h4 i{color:#d4a800}.color-dorado .plataforma-card-header p,.color-dorado .funcionalidad-card-header p{color:var(--azul-corporativo)}.color-dorado .plataforma-card,.color-dorado .funcionalidad-card{border:3px solid var(--dorado);border-top:none}/* ============================================================ COLOR VARIANTS - Azul Medio ============================================================ */.color-azul-medio .plataforma-card-header,.color-azul-medio .funcionalidad-card-header{background:var(--card-bg-azul-medio)}.color-azul-medio .plataforma-card-header h4,.color-azul-medio .funcionalidad-card-header h4{color:var(--azul-medio)}.color-azul-medio .plataforma-card-header p,.color-azul-medio .funcionalidad-card-header p{color:var(--azul-corporativo)}.color-azul-medio .plataforma-card,.color-azul-medio .funcionalidad-card{border:3px solid var(--azul-medio);border-top:none}/* ============================================================ FUNCIONALIDAD - Imagen hover swap (desktop) ============================================================ */.funcionalidad-card-wrapper .funcionalidad-card .img-thumb,.funcionalidad-card-wrapper .funcionalidad-card .img-expanded{display:block;width:100%;height:100%}.funcionalidad-card-wrapper .funcionalidad-card .img-thumb{position:relative;z-index:2;transition:opacity 0.3s ease}.funcionalidad-card-wrapper .funcionalidad-card .img-thumb img{width:100%;height:auto;display:block}.funcionalidad-card-wrapper .funcionalidad-card .img-expanded{position:absolute;top:0;left:0;z-index:1;opacity:0;transition:opacity 0.3s ease}.funcionalidad-card-wrapper .funcionalidad-card .img-expanded img{width:100%;height:auto;display:block}.funcionalidad-card-wrapper:hover .funcionalidad-card .img-thumb{opacity:0}.funcionalidad-card-wrapper:hover .funcionalidad-card .img-expanded{opacity:1;z-index:2}/* ============================================================ RESPONSIVE - Tablet (max-width:1024px) ============================================================ */@media (max-width:1024px){.plataforma-card-header h4,.funcionalidad-card-header h4{font-size:1rem}.plataforma-card-header p,.funcionalidad-card-header p{font-size:0.8rem}}/* ============================================================ RESPONSIVE - Small Tablet / Large Phone (max-width:768px) ============================================================ */@media (max-width:768px){.plataforma-card-header,.funcionalidad-card-header{padding:0.875rem 1rem}.plataforma-card-header h4,.funcionalidad-card-header h4{font-size:0.95rem}.plataforma-card-header p,.funcionalidad-card-header p{font-size:0.8rem}}/* ============================================================ RESPONSIVE - Mobile (max-width:480px) ============================================================ */@media (max-width:480px){.plataforma-card-header,.funcionalidad-card-header{padding:0.75rem}.plataforma-card-header h4,.funcionalidad-card-header h4{font-size:0.9rem}.plataforma-card-header p,.funcionalidad-card-header p{font-size:0.75rem}}/* ============================================================ TOUCH DEVICES - Mostrar expanded por defecto (sin hover) ============================================================ */@media (hover:none) and (pointer:coarse){.funcionalidad-card-wrapper .funcionalidad-card .img-thumb{display:none}.funcionalidad-card-wrapper .funcionalidad-card .img-expanded{position:relative;opacity:1;z-index:2}/* Desactivar hover transform en touch */ .plataforma-card-wrapper:hover,.funcionalidad-card-wrapper:hover{transform:none}/* Usar in-view para el efecto en mobile */ .plataforma-card-wrapper.in-view,.funcionalidad-card-wrapper.in-view{transform:translateY(-4px)}.plataforma-card-wrapper.in-view .plataforma-card,.funcionalidad-card-wrapper.in-view .funcionalidad-card{box-shadow:0 8px 30px rgba(4,36,84,0.18)}}