/* Fase 30: carga percibida, estabilidad móvil y recuperación de errores */
.experience-network-status{
  position:fixed;
  z-index:260;
  right:18px;
  bottom:18px;
  max-width:min(390px,calc(100% - 36px));
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  color:#fff;
  background:#111318;
  box-shadow:0 18px 54px rgba(16,17,20,.28);
  font:700 11px/1.45 Manrope,Arial,sans-serif;
  opacity:0;
  pointer-events:none;
  transform:translateY(18px);
  transition:opacity .3s ease,transform .3s ease,background-color .3s ease;
}
.experience-network-status::before{width:9px;height:9px;flex:0 0 auto;border-radius:50%;content:"";background:#ff646c;box-shadow:0 0 0 5px rgba(229,9,20,.14)}
.experience-network-status.is-visible{opacity:1;transform:none}
.experience-network-status.is-restored{background:#126b42}
.experience-network-status.is-restored::before{background:#6be5a8;box-shadow:0 0 0 5px rgba(107,229,168,.14)}

[data-experience-media]{position:relative;isolation:isolate}
[data-experience-image]{opacity:0;transform:scale(.985);transition:opacity .48s ease,transform .65s cubic-bezier(.22,1,.36,1)}
[data-experience-image].is-image-ready{opacity:1;transform:none}
[data-experience-media].is-image-loading{background-color:#ecece7;background-image:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.72) 47%,transparent 62%);background-size:220% 100%;animation:experience-shimmer 1.35s linear infinite}
[data-experience-media].is-image-ready,[data-experience-media].is-image-error{animation:none;background-image:none}
[data-experience-media].is-image-error{background:#ecece7}
.experience-image-fallback{position:relative;z-index:3;width:78px;height:78px;display:grid;place-items:center;margin:auto;border-radius:22px;color:#fff;background:linear-gradient(145deg,#e50914,#720008);box-shadow:0 14px 30px rgba(16,17,20,.17);font:800 22px/1 Manrope,Arial,sans-serif}

.experience-skeleton-card{min-width:0;overflow:hidden;border:1px solid #e0e0da;border-radius:21px;background:#fff;box-shadow:0 10px 32px rgba(16,17,20,.07)}
.experience-skeleton-media,.experience-skeleton-line{position:relative;overflow:hidden;background:#e7e7e1}
.experience-skeleton-media::after,.experience-skeleton-line::after{position:absolute;inset:0;content:"";transform:translateX(-105%);background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.82) 48%,transparent 76%);animation:experience-skeleton 1.35s ease-in-out infinite}
.experience-skeleton-media{width:100%;aspect-ratio:4/3}
.experience-skeleton-body{display:grid;gap:10px;padding:17px}
.experience-skeleton-line{height:11px;border-radius:999px}
.experience-skeleton-line.title{width:78%;height:18px}
.experience-skeleton-line.short{width:48%}
.experience-category-skeleton{min-height:314px}
.experience-category-skeleton .experience-skeleton-media{aspect-ratio:auto;height:165px}
.experience-category-skeleton .experience-skeleton-body{padding:20px}
.experience-inline-error{grid-column:1/-1;display:grid;justify-items:center;gap:8px;min-height:150px;padding:28px;border:1px dashed #c9cac4;border-radius:20px;background:#fff;text-align:center}
.experience-inline-error strong{font-size:18px;letter-spacing:-.03em}
.experience-inline-error span{max-width:52ch;color:#6d7077;font-size:11px}
.experience-retry{min-height:44px;display:inline-flex;align-items:center;justify-content:center;margin-top:8px;padding:10px 16px;border:0;border-radius:12px;color:#fff;background:#101114;box-shadow:0 10px 24px rgba(16,17,20,.16);font:800 10px/1 Manrope,Arial,sans-serif;cursor:pointer}
.error-card .experience-retry{margin-right:6px;margin-left:6px}

.experience-touch{touch-action:manipulation}
@media(hover:none),(pointer:coarse){
  .experience-touch:active{transform:scale(.975)!important;transition-duration:.08s!important}
}

@keyframes experience-shimmer{to{background-position:-120% 0}}
@keyframes experience-skeleton{to{transform:translateX(105%)}}

@media(max-width:800px){
  .experience-network-status{right:12px;bottom:88px;left:12px;max-width:none;justify-content:center;text-align:center}
  .experience-skeleton-card{border-radius:16px}
  .experience-skeleton-body{gap:8px;padding:12px 10px}
  .experience-skeleton-line.title{height:14px}
  .experience-category-skeleton{min-height:258px}
  .experience-category-skeleton .experience-skeleton-media{height:108px}
  .experience-category-skeleton .experience-skeleton-body{padding:14px 11px}
  .experience-image-fallback{width:62px;height:62px;border-radius:18px;font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  [data-experience-image],.experience-network-status,.experience-touch{transition:none!important}
  [data-experience-media].is-image-loading,.experience-skeleton-media::after,.experience-skeleton-line::after{animation:none!important}
}