/* ═══════════════════════════════════════════════════════════════
   UpGames · Liquid Glass Design Layer (v5)
   ───────────────────────────────────────────────────────────────
   Se carga DESPUÉS de biblioteca.css. Unifica el lenguaje visual:
   superficies de vidrio translúcido, tipografía limpia, colores
   sobrios y movimiento fluido (curvas tipo resorte, sin rebotes
   bruscos). Las superficies con blur se limitan a capas flotantes
   (header, nav, hojas, chips) para mantener el rendimiento alto.
═══════════════════════════════════════════════════════════════ */

:root {
  --glass-bg:        rgba(28, 31, 40, .55);
  --glass-bg-strong: rgba(22, 25, 32, .78);
  --glass-tint:      rgba(255, 255, 255, .045);
  --glass-bd:        rgba(255, 255, 255, .10);
  --glass-bd-hi:     rgba(255, 255, 255, .18);
  --glass-hi:        inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 .5px rgba(255, 255, 255, .04);
  --glass-shadow:    0 10px 30px -12px rgba(0, 0, 0, .55), 0 2px 8px -2px rgba(0, 0, 0, .35);
  --glass-blur:      blur(22px) saturate(170%);

  /* Movimiento fluido — curvas inspiradas en sistemas móviles modernos */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);     /* desaceleración larga y suave */
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.25, .64, 1);  /* resorte leve, sin rebote exagerado */
  --dur-1: .16s;
  --dur-2: .28s;
  --dur-3: .42s;
  --dur-4: .6s;

  /* Sin fuente monoespaciada en la interfaz: tipografía única y limpia */
  --ff-mono: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%,
      1.108 26%, 1.1, 1.077 30.6%, 1.012 35.8%, .995 39.5%, .987 43.6%, 1.003 55.6%, 1);
  }
}

/* ── Fondo ambiental: le da al vidrio algo que "refractar" ── */
html { background: var(--bg); }
body { background: transparent; text-rendering: optimizeLegibility; font-variant-ligatures: no-common-ligatures; }
body::before {
  content: '';
  position: fixed; inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 32% at 12% 8%,  rgba(var(--g-rgb), .10), transparent 70%),
    radial-gradient(36% 30% at 92% 18%, rgba(var(--cy-rgb), .09), transparent 70%),
    radial-gradient(45% 35% at 70% 96%, rgba(139, 124, 246, .07), transparent 70%),
    var(--bg);
}
::selection { background: rgba(var(--g-rgb), .3); color: #fff; }

/* Tipografía — se retira la fuente "gamer" condensada */
.hdr-logo, .pl-logo, .ob-eco-logo, .ob-title,
.stat-val, .profile-stat-val, .pf-saldo-val, .pf-eco-stat-val, .pf-item-stat-val,
.eco-hero-saldo, .eco-kpi-val, .eco-gauge-val, .eco-ring-pct, .eco-lb-dl, .eco-table-dl,
.eco-topbar-brand, .autoplay-countdown {
  font-family: var(--ff) !important;
  font-weight: 800;
  letter-spacing: -.02em !important;
}

/* Logo: wordmark limpio */
.hdr-logo, .pl-logo, .ob-eco-logo { text-shadow: none !important; }
.hdr-logo { font-size: 1.12rem; gap: 0; }
.hdr-logo .up, .pl-logo .up, .ob-eco-logo .ob-eco-up { color: var(--g); text-shadow: none !important; }
.hdr-logo .gm, .pl-logo .gm { color: var(--txt); font-weight: 700; }
.pl-logo { font-size: 2.2rem; gap: 0; }
.pl-glow { opacity: .6; }
.pl-sub { letter-spacing: .3em; }

/* ═══════════ Primitiva de vidrio reutilizable ═══════════ */
.ug-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--glass-hi), var(--glass-shadow);
}

/* ═══════════ HEADER ═══════════ */
#app-header {
  background: rgba(var(--bg-rgb), .55);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
body.ug-scrolled #app-header {
  background: rgba(var(--bg-rgb), .72);
  border-bottom-color: var(--glass-bd);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .8);
}
#buscador {
  background: var(--glass-tint);
  border: 1px solid var(--glass-bd);
  border-radius: 999px;
  height: 40px;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
#buscador:focus {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(var(--g-rgb), .45);
  box-shadow: 0 0 0 4px rgba(var(--g-rgb), .10);
}
#autocomplete-dropdown {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--r-md) !important;
  margin-top: 6px;
  box-shadow: var(--glass-hi), var(--glass-shadow) !important;
}
.hdr-btn {
  border-radius: 50%;
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.hdr-btn:active { transform: scale(.9); background: rgba(255, 255, 255, .08); }

/* ═══════════ CHIPS DE CATEGORÍA ═══════════ */
#category-row { padding: 10px 16px 12px; gap: 8px; scroll-padding: 16px; scroll-behavior: smooth; }
.chip {
  padding: 8px 16px;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  background: var(--glass-tint);
  border: 1px solid var(--glass-bd);
  color: var(--txt2);
  box-shadow: var(--glass-hi);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.chip:active { transform: scale(.94); background: rgba(255, 255, 255, .08); border-color: var(--glass-bd-hi); color: var(--txt); }
.chip.active {
  background: var(--txt);
  border-color: var(--txt);
  color: #0B0C10;
  box-shadow: 0 6px 18px -8px rgba(255, 255, 255, .35);
}
.chip--video { background: rgba(var(--cy-rgb), .06); border-color: rgba(var(--cy-rgb), .22); color: var(--cy); }
.chip--video.active { background: var(--cy); border-color: var(--cy); color: #04131c; }

/* ═══════════ GRID + TARJETAS ═══════════ */
#output { gap: 12px; padding-left: 14px; padding-right: 14px; padding-bottom: calc(var(--nav-h) + 40px); }
@media (min-width: 900px)  { #output, #favs-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 1280px) { #output, #favs-grid { grid-template-columns: repeat(5, 1fr) !important; } }
@media (min-width: 900px)  { #output, #favs-view, #profile-view > *, #category-row { max-width: 1400px; margin-left: auto; margin-right: auto; } }

.game-tile {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--card-r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform var(--dur-3) var(--ease-spring), border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out), background var(--dur-2) var(--ease-out);
  contain: layout paint;
}
.game-tile:active { transform: scale(.965); border-color: var(--glass-bd-hi); }
@media (hover: hover) {
  .game-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 36px -18px rgba(0, 0, 0, .8);
  }
  .game-tile:hover .thumb-wrap img { transform: scale(1.04); }
}
.game-tile .thumb-wrap { margin: 6px 6px 0; border-radius: calc(var(--card-r) - 6px); background: var(--bg2); }
.game-tile .thumb-wrap img, .game-tile .thumb-wrap video { transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
.tile-info { padding: 10px 12px 12px; gap: 6px; }
.tile-cat { font-size: .62rem; letter-spacing: .06em; font-weight: 700; }
.tile-title { font-size: .86rem; font-weight: 700; letter-spacing: -.01em; }
.tile-avatar { background: linear-gradient(135deg, rgba(var(--g-rgb), .9), rgba(var(--cy-rgb), .9)); }

/* Badges sobre la imagen: vidrio oscuro discreto */
.tile-status {
  background: rgba(10, 11, 15, .55) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .12) !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}
.tile-status.online   { color: var(--g); }
.tile-status.revision { color: #FFD60A; }
.tile-status.caido    { color: #FF6B6B; }
.tile-fav-quick {
  background: rgba(10, 11, 15, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .14);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.tile-fav-quick:active { transform: scale(.85); }
.tile-fav-quick.active { color: #FF5C7A; }
.tile-extra-badge { border-radius: 8px; }

/* ROM — rosa */
.game-tile--rom .tile-cat { color: #fd79a8; }
.game-tile--rom .tile-extra-badge { border-color: rgba(253, 121, 168, .2); color: #fd79a8; }
.game-tile--rom .tile-extra-badge ion-icon { color: #fd79a8; }

/* Aparición escalonada de tarjetas (la activa upgames-motion.js) */
.ug-reveal { opacity: 0; transform: translateY(14px) scale(.985); }
.ug-reveal.ug-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms);
}

.section-header { grid-column: 1 / -1; padding: 14px 2px 2px; }
.section-title { font-weight: 800; letter-spacing: -.01em; text-transform: none; }

/* Skeleton más suave */
.skeleton-card { border-radius: var(--card-r); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05); }

/* ═══════════ HERO ═══════════ */
#hero-carousel {
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .9);
}
.hero-track { transition: transform .7s var(--ease-out); }
.hero-badge {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .2);
  letter-spacing: .02em;
  text-transform: none;
}
.hero-title { font-size: 1.25rem; letter-spacing: -.02em; }
.hero-dot { transition: width var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out), opacity var(--dur-3); }
.hero-arrow {
  background: rgba(10, 11, 15, .45) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .14) !important;
}

/* ═══════════ NAVEGACIÓN INFERIOR — cápsula flotante ═══════════ */
#bottom-nav {
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  height: 64px;
  padding: 0 6px;
  border-radius: 26px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--glass-hi), 0 16px 40px -14px rgba(0, 0, 0, .75);
  max-width: 560px;
  margin: 0 auto;
}
.nav-tab {
  position: relative;
  z-index: 1;
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  transition: color var(--dur-3) var(--ease-out);
}
.nav-tab ion-icon { font-size: 1.35rem; transition: transform var(--dur-3) var(--ease-spring); }
.nav-tab.active ion-icon { transform: translateY(-1px) scale(1.06); }
.nav-tab:active ion-icon { transform: scale(.86); }
.nav-tab.active { color: var(--txt); }
.nav-dot { display: none; }
.ug-nav-pill {
  position: absolute;
  top: 7px; bottom: 7px; left: 0;
  width: 60px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  z-index: 0;
  pointer-events: none;
  transition: transform .55s var(--ease-spring), width .55s var(--ease-spring), opacity var(--dur-2);
  will-change: transform, width;
}
.nav-nexus-ring {
  width: 44px; height: 44px;
  background: linear-gradient(145deg, rgba(var(--g-rgb), .22), rgba(var(--cy-rgb), .14));
  border: 1px solid rgba(var(--g-rgb), .45);
  border-bottom-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 20px -8px rgba(var(--g-rgb), .55);
  animation: none;
  transition: transform var(--dur-3) var(--ease-spring);
}
.nav-nexus:active .nav-nexus-ring { transform: scale(.9); }
.nav-nexus span { color: var(--txt2); text-transform: none; letter-spacing: 0; font-weight: 650; }

/* Botón de ayuda flotante: por encima de la cápsula */
#tut-fab {
  bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)) !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd) !important;
  box-shadow: var(--glass-hi), var(--glass-shadow);
}

/* El contenido no queda tapado por la cápsula */
#toast-container { bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }

/* ═══════════ HOJAS / MODALES ═══════════ */
#detail-overlay, .modal-overlay, .pf-modal-overlay {
  background: rgba(4, 5, 8, .5) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3) !important;
}
#detail-sheet, .modal-sheet, .pf-modal-sheet {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-bd);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -20px 60px -20px rgba(0, 0, 0, .7);
  transition: transform .58s var(--ease-spring) !important;
}
.sheet-handle, .modal-handle, .pf-modal-handle { background: rgba(255, 255, 255, .22) !important; width: 40px; height: 5px; }
.sheet-media { border-radius: var(--r-lg); }
@media (min-width: 720px) {
  #detail-sheet { max-width: 720px; margin: 0 auto; }
}

/* ═══════════ FORMULARIOS ═══════════ */
.pf-input, .pf-textarea, .pf-select {
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--r-sm) !important;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.pf-input:focus, .pf-textarea:focus, .pf-select:focus {
  background: rgba(255, 255, 255, .065) !important;
  border-color: rgba(var(--g-rgb), .5) !important;
  box-shadow: 0 0 0 4px rgba(var(--g-rgb), .10);
}
.pf-input.invalid { border-color: rgba(255, 92, 92, .7) !important; }
.pf-label { letter-spacing: .02em; text-transform: none; font-weight: 650; }
.ug-autofilled { animation: ugFillFlash .9s var(--ease-out); }
@keyframes ugFillFlash {
  0%   { box-shadow: 0 0 0 0 rgba(var(--g-rgb), .45); border-color: rgba(var(--g-rgb), .8) !important; }
  100% { box-shadow: 0 0 0 10px rgba(var(--g-rgb), 0); }
}

.pf-btn-submit, .pf-btn-save, #btn-accept-terms {
  background: var(--g) !important;
  color: #04120A !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(var(--g-rgb), .7) !important;
  transition: transform var(--dur-2) var(--ease-spring), filter var(--dur-2) !important;
}
.pf-btn-submit::before { display: none !important; }
.pf-btn-submit:active, .pf-btn-save:active, #btn-accept-terms:active { transform: scale(.97); filter: brightness(.95); }

.pf-cat-btn {
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--r-md) !important;
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2) var(--ease-out), border-color var(--dur-2), color var(--dur-2) !important;
}
.pf-cat-btn.active {
  background: rgba(var(--g-rgb), .12) !important;
  border-color: rgba(var(--g-rgb), .5) !important;
  color: var(--g) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.pf-cat-btn-video.active { background: rgba(var(--cy-rgb), .12) !important; border-color: rgba(var(--cy-rgb), .5) !important; color: var(--cy) !important; }
.pf-cat-grid { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 380px) { .pf-cat-grid { grid-template-columns: repeat(2, 1fr) !important; } }

.perfil-tabs { scroll-behavior: smooth; }
.perfil-tab { text-transform: none; letter-spacing: 0; transition: color var(--dur-2) var(--ease-out), border-color var(--dur-3) var(--ease-out); }
.profile-card { background: transparent; border-bottom-color: var(--glass-bd); }
.profile-cover { background: linear-gradient(135deg, rgba(var(--g-rgb), .16), rgba(var(--cy-rgb), .12) 60%, rgba(139, 124, 246, .12)); }

/* ═══════════ TOAST ═══════════ */
.toast {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd) !important;
  box-shadow: var(--glass-hi), var(--glass-shadow);
  font-weight: 650;
}

/* ═══════════ ONBOARDING ═══════════ */
#onboarding-modal { background: rgba(var(--bg-rgb), .96); }
.ob-slide { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out) !important; }
.ob-kicker { text-transform: none !important; letter-spacing: .02em !important; }
.ob-footer { background: linear-gradient(to top, rgba(var(--bg-rgb), 1) 65%, transparent); }
.ob-dot { transition: width var(--dur-3) var(--ease-spring), background var(--dur-3) var(--ease-out); }
.ob-dot.active { background: var(--txt); border-color: var(--txt); }
.ob-btn-next {
  background: var(--glass-tint);
  border: 1px solid var(--glass-bd);
  color: var(--txt);
  box-shadow: var(--glass-hi);
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2);
}
.ob-btn-next:active { transform: scale(.95); }
.ob-nfeat, .ob-rule, .ob-cpm-card {
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-bd) !important;
  border-radius: var(--r-md) !important;
}
.ob-cats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 340px; }
.ob-cats span {
  padding: 6px 12px; border-radius: 999px; font-size: .74rem; font-weight: 650;
  background: var(--glass-tint); border: 1px solid var(--glass-bd); color: var(--txt2);
}
.ob-cert {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(var(--g-rgb), .07); border: 1px solid rgba(var(--g-rgb), .25);
  font-size: .74rem; color: var(--txt2); line-height: 1.45;
}
.ob-cert ion-icon { font-size: 1.5rem; color: var(--g); flex-shrink: 0; }
.ob-cert a { color: var(--g); font-weight: 700; }

/* ═══════════ AUTO-INFO (reconocimiento de título) ═══════════ */
.ug-autoinfo {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out), margin var(--dur-3) var(--ease-out);
}
.ug-autoinfo > * { overflow: hidden; min-height: 0; }
.ug-autoinfo.show { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
.ug-ai-card, .ug-ai-skel {
  display: flex; gap: 12px;
  padding: 10px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  border: 1px solid var(--glass-bd);
  box-shadow: var(--glass-hi);
}
.ug-ai-img { flex: 0 0 112px; border-radius: 10px; overflow: hidden; background: var(--bg2); align-self: flex-start; }
.ug-ai-img img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; animation: ugFade .5s var(--ease-out); }
.ug-ai-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ug-ai-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ug-ai-top ion-icon { color: var(--g); flex-shrink: 0; }
.ug-ai-name { font-weight: 800; font-size: .86rem; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ug-ai-src {
  font-size: .62rem; font-weight: 700; color: var(--txt2);
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--glass-bd); flex-shrink: 0;
}
.ug-ai-desc {
  font-size: .74rem; line-height: 1.45; color: var(--txt2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ug-ai-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ug-ai-note { font-size: .66rem; color: var(--txt3); }
.ug-ai-btn {
  font-size: .72rem; font-weight: 750; padding: 6px 14px; border-radius: 999px;
  background: var(--g); color: #04120A;
  transition: transform var(--dur-2) var(--ease-spring);
}
.ug-ai-btn.ghost { background: transparent; color: var(--txt2); border: 1px solid var(--glass-bd); }
.ug-ai-btn:active { transform: scale(.93); }
.ug-ai-skel-img { flex: 0 0 112px; aspect-ratio: 16 / 10; border-radius: 10px; }
.ug-ai-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ug-ai-skel-lines span { height: 10px; border-radius: 6px; }
.ug-ai-skel-lines span:nth-child(1) { width: 55%; }
.ug-ai-skel-lines span:nth-child(2) { width: 90%; }
.ug-ai-skel-lines span:nth-child(3) { width: 70%; }
.ug-ai-skel-img, .ug-ai-skel-lines span {
  background: linear-gradient(90deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .05) 100%);
  background-size: 200% 100%;
  animation: ugShimmer 1.3s linear infinite;
}
@keyframes ugShimmer { to { background-position: -200% 0; } }
@keyframes ugFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

/* ═══════════ TRANSICIÓN ENTRE VISTAS ═══════════ */
.ug-view-enter { animation: ugViewIn var(--dur-4) var(--ease-out) both; }
@keyframes ugViewIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════ ACCESIBILIDAD / RENDIMIENTO ═══════════ */
:focus-visible { outline: 2px solid rgba(var(--g-rgb), .7); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ug-reveal { opacity: 1; transform: none; }
}
/* Dispositivos sin backdrop-filter: vidrio sólido equivalente */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #app-header, #bottom-nav, #detail-sheet, .modal-sheet, .pf-modal-sheet, .toast { background: var(--bg1) !important; }
}

/* En pantallas táctiles el carrusel se desliza con el dedo: sin flechas que tapen el contenido */
@media (hover: none) { .hero-arrow { display: none !important; } }

/* Carrusel: con margen lateral y proporción contenida en pantallas grandes */
#hero-carousel { margin: 4px 14px 14px; }
@media (min-width: 900px) {
  #hero-carousel { aspect-ratio: 16 / 5; max-width: 1372px; margin: 8px auto 18px; width: calc(100% - 28px); }
  .hero-title { font-size: 1.6rem; }
}
@media (min-width: 900px) { #tut-fab { bottom: calc(22px + env(safe-area-inset-bottom)) !important; } }