/* ============================================================ KOBALTO ACADEMY - Principios Slider (Mobile Only) Convierte la grid de principios en slider horizontal en mobile ============================================================ *//* ============================================================ SLIDER HINT - Indicador de interacción ============================================================ */.principios-slider-hint{display:none;/* Oculto por defecto en desktop */}/* ============================================================ MOBILE STYLES - Slider horizontal ============================================================ */@media (max-width:768px){/* Indicador de slider */ .principios-slider-hint{display:flex;align-items:center;justify-content:center;gap:0.6rem;padding:0.75rem 1.25rem;margin-bottom:1.25rem;background:rgba(255,199,0,0.15);border:1px solid rgba(255,199,0,0.3);border-radius:50px;color:var(--blanco);font-size:0.85rem;font-weight:500;animation:pulseHint 2s ease-in-out infinite;transition:opacity 0.4s ease,transform 0.4s ease}.principios-slider-hint i{color:var(--dorado);font-size:1.1rem;animation:swipeHint 1.5s ease-in-out infinite}.principios-slider-hint span{opacity:0.95}/* Animación del icono de deslizar */ @keyframes swipeHint{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}/* Animación de pulso suave */ @keyframes pulseHint{0%,100%{opacity:1}50%{opacity:0.7}}/* Ocultar indicador cuando el usuario ha interactuado */ .principios-slider-hint.hidden{opacity:0;transform:translateY(-10px);pointer-events:none}/* Convertir grid en slider horizontal */ .principios-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:1rem;padding-bottom:1rem;margin:0 -1.5rem;padding-left:1.5rem;padding-right:1.5rem}/* Ocultar scrollbar pero mantener funcionalidad */ .principios-grid::-webkit-scrollbar{display:none}.principios-grid{-ms-overflow-style:none;scrollbar-width:none}/* Cards del slider */ .principios-grid .principio-card{flex:0 0 85%;max-width:85%;scroll-snap-align:center;scroll-snap-stop:always}/* Ajuste para pantallas muy pequeñas */ @media (max-width:400px){.principios-grid .principio-card{flex:0 0 90%;max-width:90%}.principios-slider-hint{font-size:0.8rem;padding:0.6rem 1rem}}}/* ============================================================ TABLET - Grid de 2 columnas (sin slider) ============================================================ */@media (min-width:769px) and (max-width:1024px){.principios-grid{grid-template-columns:repeat(2,1fr)}}/* ============================================================ METODO & PILAR CARDS - Botón + en esquina superior derecha (mobile) ============================================================ */@media (hover:none) and (pointer:coarse){.metodo-card::after,.pilar-card::after{bottom:auto !important;top:0.75rem !important}/* Ocultar enlace "Explorar" y "Ver detalles" en mobile */ .metodo-card .metodo-hint,.pilar-card .pilar-hint{display:none !important}/* Método Socrático:+ azul como el fondo */ .metodo-card.metodo-socratico::after{color:var(--azul-navy,#1E3A5F) !important}}/* ============================================================ INDICADORES DE INTERACCIÓN - Click hint (mobile only) ============================================================ */.mobile-click-hint{display:none}@media (max-width:768px){.mobile-click-hint{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.6rem 1rem;margin-bottom:1rem;background:rgba(255,199,0,0.15);border:1px solid rgba(255,199,0,0.3);border-radius:50px;font-size:0.8rem;font-weight:500;animation:pulseHint 2s ease-in-out infinite}.mobile-click-hint i{font-size:0.95rem}/* Variante para sección pilares (fondo blanco) */ .pilares .mobile-click-hint{color:var(--azul-corporativo,#042454);background:rgba(255,199,0,0.2);border-color:rgba(255,199,0,0.4)}.pilares .mobile-click-hint i{color:var(--dorado,#FFC700)}/* Variante para sección metodología (fondo claro) */ .metodologia .mobile-click-hint{background:rgba(255,199,0,0.25);border-color:rgba(255,199,0,0.5)}.metodologia .mobile-click-hint span{color:var(--blanco,#FFFFFF)}.metodologia .mobile-click-hint i{color:var(--dorado,#FFC700)}}/* ============================================================ FAQ - Padding superior en mobile ============================================================ */@media (max-width:768px){.faq-grid{padding-top:1rem}}/* ============================================================ BENEFICIOS LISTA - Texto legible en negro ============================================================ */.beneficios-lista span,.beneficios-lista strong{color:var(--negro,#0a0e27) !important}/* ============================================================ IMAGE MODAL - Header encima de la imagen,sin overlay ============================================================ *//* Ocultar el label antiguo dentro del container */.image-modal-label{display:none !important}/* Ocultar hint de pellizcar (imagen ya ocupa todo el ancho) */.image-modal-hint-mobile{display:none !important}/* Layout vertical del modal */.image-modal-overlay{flex-direction:column !important;padding:1rem !important}/* Nuevo header encima de la imagen */.image-modal-header{text-align:center;margin-bottom:0.75rem;width:100%;flex-shrink:0}.image-modal-header h4{color:var(--blanco,#FFFFFF);font-size:1.25rem;font-weight:600;margin:0 0 0.35rem 0;display:flex;align-items:center;justify-content:center;gap:0.5rem}.image-modal-header h4 i{color:var(--dorado,#FFC700)}.image-modal-header p{color:var(--azul-claro,#EAEEFF);font-size:0.95rem;margin:0;opacity:0.9}/* Hint de expandir - Solo visible en mobile */.image-modal-expand-hint{display:none}@media (hover:none) and (pointer:coarse){.image-modal-expand-hint{display:inline-flex;align-items:center;gap:0.4rem;margin-top:0.6rem;padding:0.4rem 0.8rem;background:rgba(255,199,0,0.2);border:1px solid rgba(255,199,0,0.4);border-radius:50px;color:var(--dorado,#FFC700);font-size:0.8rem;font-weight:500;animation:pulseHint 2s ease-in-out infinite}.image-modal-expand-hint i{font-size:0.75rem}}/* Container de imagen - SOLUCIÓN ROBUSTA */.image-modal-container{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:auto !important;height:auto !important;max-width:95vw !important;max-height:calc(100vh - 120px) !important;background:transparent !important;border:3px solid var(--dorado,#FFC700) !important;box-shadow:0 10px 40px rgba(0,0,0,0.4) !important;padding:0 !important;margin:0 !important;border-radius:12px !important;overflow:hidden !important;aspect-ratio:unset !important;position:relative !important}/* Eliminar pseudo-elementos y fondos internos */.image-modal-container::before,.image-modal-container::after,.image-modal-container .image-modal-label,.image-modal-container .image-modal-hint,.image-modal-container .image-modal-hint-mobile{display:none !important}/* Modal:ocultar thumb completamente */.image-modal-container .img-thumb{display:none !important;position:absolute !important;visibility:hidden !important;width:0 !important;height:0 !important}/* Modal:mostrar solo expanded */.image-modal-container .img-expanded{display:block !important;position:relative !important;opacity:1 !important;max-width:95vw !important;max-height:calc(100vh - 130px) !important;width:auto !important;height:auto !important;margin:0 !important;padding:0 !important;border:none !important}/* Responsive mobile */@media (max-width:768px){.image-modal-overlay{padding:0.75rem !important}.image-modal-header{margin-bottom:0.5rem}.image-modal-header h4{font-size:1rem}.image-modal-header p{font-size:0.85rem}}/* Mobile touch devices - sobrescribir estilos */@media (hover:none) and (pointer:coarse){/* Cards de funcionalidad:SIEMPRE mostrar thumb,nunca expanded */ .funcionalidad-card .img-thumb{opacity:1 !important;display:block !important;position:absolute !important;z-index:2 !important}.funcionalidad-card .img-expanded{opacity:0 !important;z-index:1 !important}/* Anular el efecto in-view para funcionalidad cards */ .funcionalidad-card.in-view .img-thumb{opacity:1 !important}.funcionalidad-card.in-view .img-expanded{opacity:0 !important}/* Fix:Quitar height auto de las imágenes en cards para evitar huecos */ .funcionalidad-card-wrapper .funcionalidad-card .img-thumb img,.funcionalidad-card-wrapper .funcionalidad-card .img-expanded img{height:100% !important;object-fit:cover !important}/* Modal:contenedor ajustado a la imagen */ .image-modal-container{display:inline-flex !important;width:auto !important;height:auto !important;max-width:95vw !important;max-height:calc(100vh - 120px) !important;aspect-ratio:unset !important;overflow:hidden !important;background:transparent !important;touch-action:pan-x pan-y pinch-zoom !important}/* Modal:expanded visible y ajustada - sin width/height 100% para evitar huecos */ .image-modal-container .img-expanded{display:block !important;position:relative !important;opacity:1 !important;width:auto !important;height:auto !important;max-width:95vw !important;max-height:calc(100vh - 140px) !important;object-fit:contain !important}/* Cuando está en modo zoom expandido */ .image-modal-container.zoomed{max-width:none !important;max-height:none !important;overflow:auto !important;-webkit-overflow-scrolling:touch !important}.image-modal-container.zoomed .img-expanded{max-width:none !important;max-height:none !important}}/* Sobrescribir aspect-ratio forzado en móviles pequeños */@media (max-width:480px){.funcionalidad-card{aspect-ratio:auto !important}}