/* ═══════════════════════════════════════════════════
   ABL COSMOS v7.2 — MOBILE-FIRST DEFINITIVE FIX
   
   ESTRATEGIA:
   - Desktop/Tablet: esfera 3D (igual que siempre)
   - Mobile (<600px): ESFERA 360° táctil — misma esfera, cards pequeñas
     Cards organizadas en filas, giran con el dedo
     Mucho más usable, más moderno, más rápido
   
   TODOS los estilos usan !important donde hay
   conflicto con temas WP (eso explica los botones azules)
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,400;1,700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

:root{
  --R:#ff3b30;
  --W:rgba(255,255,255,.93);
  --W2:rgba(255,255,255,.56);
  --W3:rgba(255,255,255,.26);
}

/* ── APP SHELL ── */
#abl-cosmos-app{
  position:relative !important;
  width:100% !important;
  height:100vh !important;
  height:100svh !important;
  overflow:hidden !important;
  font-family:'Inter',system-ui,sans-serif !important;
  color:rgba(255,255,255,.93) !important;
  background:#04040a !important;
}

/* ── BG ── */
#abl-cosmos-app #bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 110% 75% at 12% 32%,rgba(90,0,0,.26) 0%,transparent 52%),radial-gradient(ellipse 80% 60% at 88% 65%,rgba(0,12,68,.20) 0%,transparent 52%),radial-gradient(ellipse 55% 85% at 50% -5%,rgba(255,59,48,.055) 0%,transparent 44%),#04040a;}
#abl-cosmos-app #grid{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,59,48,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,59,48,.016) 1px,transparent 1px);background-size:88px 88px;opacity:.8;}
#abl-cosmos-app #aurora{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 65% 55% at 18% 38%,rgba(90,0,0,.13) 0%,transparent 62%),radial-gradient(ellipse 55% 45% at 82% 62%,rgba(0,12,65,.11) 0%,transparent 58%);animation:auroraS 28s ease-in-out infinite alternate;will-change:opacity;}
@keyframes auroraS{0%{opacity:.55}50%{opacity:1}100%{opacity:.65}}
#abl-cosmos-app #stars{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
#abl-cosmos-app .st{position:absolute;border-radius:50%;animation:stk var(--sd,5s) ease-in-out infinite var(--sdl,0s);}
@keyframes stk{0%,100%{opacity:var(--so,.5)}50%{opacity:calc(var(--so,.5)*.08)}}

/* ══════════════════════════════════════════════════
   TOPBAR — pill flotante con prefijo #abl-cosmos-app
   para ganar especificidad sobre el tema WP
══════════════════════════════════════════════════ */
#abl-cosmos-app #topbar{
  position:absolute !important;
  top:12px !important;left:12px !important;right:12px !important;
  z-index:600 !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:7px 9px !important;
  background:rgba(6,6,14,.90) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:100px !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 28px rgba(0,0,0,.50) !important;
  /* Reset any theme styles */
  margin:0 !important;
  list-style:none !important;
  float:none !important;
}

#abl-cosmos-app .brand{display:flex !important;align-items:center !important;gap:7px !important;flex-shrink:0 !important;padding-left:2px !important;}
#abl-cosmos-app .blogo{
  width:28px !important;height:28px !important;border-radius:50% !important;flex-shrink:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:rgba(255,59,48,.22) !important;
  border:1px solid rgba(255,59,48,.35) !important;
  font-family:'Playfair Display',serif !important;font-size:12px !important;
  font-weight:700 !important;color:#ff3b30 !important;
  box-shadow:none !important;text-decoration:none !important;
}
#abl-cosmos-app .blogo img{width:100% !important;height:100% !important;object-fit:contain !important;border-radius:50% !important;}
#abl-cosmos-app .bname{
  font-size:11px !important;font-weight:700 !important;letter-spacing:.06em !important;
  white-space:nowrap !important;line-height:1 !important;
  background:linear-gradient(115deg,rgba(255,255,255,.95) 30%,rgba(255,100,90,.88)) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;
  background-clip:text !important;
  border:none !important;padding:0 !important;margin:0 !important;
}
#abl-cosmos-app .bsub{display:none !important;}
#abl-cosmos-app .sep{width:1px !important;height:18px !important;background:rgba(255,255,255,.09) !important;flex-shrink:0 !important;border:none !important;margin:0 !important;padding:0 !important;}

/* ── SEARCH ── */
#abl-cosmos-app #sw{position:relative !important;flex:1 !important;display:flex !important;align-items:center !important;min-width:0 !important;}
#abl-cosmos-app .sico{position:absolute !important;left:10px !important;top:50% !important;transform:translateY(-50%) !important;color:rgba(255,255,255,.35) !important;font-size:13px !important;pointer-events:none !important;z-index:1 !important;}
#abl-cosmos-app #si{
  width:100% !important;height:30px !important;
  border-radius:100px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.10) !important;
  padding:0 30px 0 30px !important;
  /* CRITICAL: explicit colors for iOS Safari */
  color:#f3f1ed !important;
  -webkit-text-fill-color:#f3f1ed !important;
  caret-color:#ff3b30 !important;
  font-family:'Inter',-apple-system,system-ui,sans-serif !important;
  font-size:16px !important; /* prevents iOS zoom */
  font-weight:400 !important;
  outline:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  box-shadow:none !important;
  transition:border-color .18s,background .18s !important;
}
#abl-cosmos-app #si::placeholder{
  color:rgba(243,241,237,.38) !important;
  -webkit-text-fill-color:rgba(243,241,237,.38) !important;
}
#abl-cosmos-app #si:focus{
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,59,48,.38) !important;
  outline:none !important;
  box-shadow:none !important;
}
#abl-cosmos-app #sc{position:absolute !important;right:8px !important;top:50% !important;transform:translateY(-50%) !important;width:16px !important;height:16px !important;border-radius:50% !important;border:none !important;background:rgba(255,255,255,.14) !important;color:rgba(255,255,255,.5) !important;font-size:10px !important;cursor:pointer !important;display:none !important;align-items:center !important;justify-content:center !important;}
#abl-cosmos-app #sc.v{display:flex !important;}
#abl-cosmos-app #sc:hover{background:rgba(255,255,255,.22) !important;color:#fff !important;}

/* ══════════════════════════════════════════════════
   TABS + NAV — círculos, !important para ganar a WP
   Estos son los que aparecían azules por el tema
══════════════════════════════════════════════════ */
#abl-cosmos-app #tabs{display:flex !important;gap:4px !important;flex-shrink:0 !important;}
#abl-cosmos-app .tab{
  width:30px !important;height:30px !important;padding:0 !important;
  border-radius:50% !important;
  /* OVERRIDE del tema WP que los pone azules */
  border:1px solid rgba(255,255,255,.11) !important;
  background:rgba(255,255,255,.07) !important;
  font-size:12px !important;font-weight:700 !important;
  cursor:pointer !important;
  color:rgba(255,255,255,.55) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  transition:background .15s,color .15s,border-color .15s,transform .12s !important;
  flex-shrink:0 !important;
  font-family:'Playfair Display',serif !important;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:none !important;
  line-height:1 !important;
}
#abl-cosmos-app .tab:hover{background:rgba(255,255,255,.13) !important;color:rgba(255,255,255,.93) !important;border-color:rgba(255,255,255,.20) !important;transform:scale(1.06) !important;}
/* Tab ABL activo — rojo */
#abl-cosmos-app .tab.on.abl{background:rgba(255,59,48,.22) !important;color:#ff8a82 !important;border-color:rgba(255,59,48,.40) !important;box-shadow:0 0 8px rgba(255,59,48,.15) !important;}
/* Tab no-abl activo — sutil, no azul tosco */
#abl-cosmos-app .tab.on:not(.abl){background:rgba(255,255,255,.13) !important;color:rgba(255,255,255,.93) !important;border-color:rgba(255,255,255,.22) !important;}

#abl-cosmos-app #nav{display:flex !important;gap:4px !important;flex-shrink:0 !important;}
#abl-cosmos-app .nb{
  width:30px !important;height:30px !important;padding:0 !important;
  border-radius:50% !important;
  /* OVERRIDE del tema WP */
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.06) !important;
  font-size:13px !important;
  cursor:pointer !important;
  color:rgba(255,255,255,.55) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  transition:background .15s,color .15s,border-color .15s,transform .12s !important;
  flex-shrink:0 !important;
  font-family:'Inter',sans-serif !important;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:none !important;
  line-height:1 !important;
}
#abl-cosmos-app .nb:hover{background:rgba(255,255,255,.12) !important;color:rgba(255,255,255,.93) !important;border-color:rgba(255,255,255,.18) !important;transform:scale(1.06) !important;}
#abl-cosmos-app .nb.on{color:#ff3b30 !important;border-color:rgba(255,59,48,.30) !important;background:rgba(255,59,48,.10) !important;}

/* ── HUD ── */
#abl-cosmos-app #hud{position:absolute;left:14px;top:68px;z-index:500;display:flex;gap:5px;flex-wrap:wrap;pointer-events:none;}
#abl-cosmos-app .chip{display:flex;align-items:center;gap:5px;padding:4px 11px;border-radius:100px;font-size:10px;font-weight:500;letter-spacing:.03em;background:rgba(5,5,14,.92) !important;border:1px solid rgba(255,255,255,.09) !important;color:rgba(255,255,255,.56);}
#abl-cosmos-app .chip.m{background:rgba(28,4,2,.92) !important;border-color:rgba(255,59,48,.22) !important;color:#ff8e86 !important;}
#abl-cosmos-app .hdot{width:5px;height:5px;border-radius:50%;background:#ff3b30;box-shadow:0 0 5px #ff3b30;animation:hdp 2.5s ease-in-out infinite;flex-shrink:0;}
@keyframes hdp{0%,100%{opacity:1}50%{opacity:.22}}
#abl-cosmos-app .spin{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1.5px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.93);animation:spn .6s linear infinite;}
@keyframes spn{to{transform:rotate(360deg)}}

/* ── STAGE ── */
#abl-cosmos-app #stage{position:absolute;inset:0;z-index:10;cursor:grab;outline:none;contain:layout style size;overflow:hidden;touch-action:none;-ms-touch-action:none;}
#abl-cosmos-app #stage:active{cursor:grabbing;}

/* Focal */
#abl-cosmos-app #focal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:11;width:140px;height:140px;}
#abl-cosmos-app .fr{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(255,59,48,.09);transform:translate(-50%,-50%);animation:forb var(--fs,18s) linear infinite var(--fd,normal);will-change:transform;}
#abl-cosmos-app .fr:nth-child(1){width:36px;height:36px;border-color:rgba(255,59,48,.20);--fs:8s;}
#abl-cosmos-app .fr:nth-child(2){width:78px;height:78px;--fs:15s;--fd:reverse;}
#abl-cosmos-app .fr:nth-child(3){width:134px;height:134px;--fs:24s;}
#abl-cosmos-app .fc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.42);box-shadow:0 0 10px rgba(255,59,48,.30);}
@keyframes forb{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ══════════════════════════════════════════════════
   CARDS — DESKTOP (2D projection, same as v7)
══════════════════════════════════════════════════ */
#abl-cosmos-app .card{
  position:absolute;left:0;top:0;
  border-radius:20px;overflow:hidden;
  cursor:pointer;color:rgba(255,255,255,.93);
  user-select:none;-webkit-user-select:none;
  will-change:transform,opacity;
  background:rgba(15,15,26,.94);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 8px 28px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.07);
  animation:cIn .44s cubic-bezier(.34,1.4,.64,1) both;
  animation-delay:var(--cd,0s);
  transition:border-color .2s,box-shadow .2s;
}
@keyframes cIn{from{opacity:0;transform:var(--bt,translate(-50%,-50%)) scale(.18);}to{opacity:1;}}
#abl-cosmos-app .card:hover{border-color:rgba(255,255,255,.24);box-shadow:0 14px 40px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.12);}
#abl-cosmos-app .card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);pointer-events:none;}

/* Section */
#abl-cosmos-app .cs{width:220px;}
#abl-cosmos-app .cs-accent{position:absolute;top:-18px;right:-18px;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,var(--ac,#ff3b30),transparent 70%);opacity:.48;pointer-events:none;animation:acglow 3.5s ease-in-out infinite;}
@keyframes acglow{0%,100%{opacity:.36}50%{opacity:.70}}
#abl-cosmos-app .cs-body{padding:18px 17px 0;}
#abl-cosmos-app .cs-tag{display:inline-flex;align-items:center;gap:4px;margin-bottom:9px;font-size:8px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;color:rgba(255,100,90,.88);}
#abl-cosmos-app .cs-tag::before{content:'';width:3px;height:3px;border-radius:50%;background:#ff3b30;flex-shrink:0;}
#abl-cosmos-app .cs-title{font-family:'Playfair Display',serif;font-size:23px;line-height:1.06;font-weight:700;font-style:italic;margin:0 0 8px;color:rgba(255,255,255,.93);}
#abl-cosmos-app .cs-desc{font-size:10.5px;line-height:1.56;color:rgba(255,255,255,.56);font-weight:300;margin:0;}
#abl-cosmos-app .cs-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 17px 14px;margin-top:11px;border-top:1px solid rgba(255,255,255,.07);}
#abl-cosmos-app .cs-cnt{font-size:9px;color:rgba(255,255,255,.26);font-weight:500;}
#abl-cosmos-app .cs-ent{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,100,90,.92);padding:4px 11px;border-radius:100px;background:rgba(255,59,48,.10);border:1px solid rgba(255,59,48,.20);transition:background .15s;}
#abl-cosmos-app .cs-ent::after{content:'→';}
#abl-cosmos-app .card:hover .cs-ent{background:rgba(255,59,48,.18);}

/* Post */
#abl-cosmos-app .cp{width:245px;}
#abl-cosmos-app .cpthumb{position:relative;height:138px;overflow:hidden;background:var(--cg,#0c0c18);}
#abl-cosmos-app .cpthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
#abl-cosmos-app .cpno{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:48px;font-style:italic;font-weight:700;color:rgba(255,255,255,.06);}
#abl-cosmos-app .cpov{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 18%,rgba(13,13,24,.82) 100%);pointer-events:none;}
#abl-cosmos-app .cpcat{position:absolute;top:9px;left:9px;padding:3px 8px;border-radius:100px;background:rgba(5,5,15,.84);border:1px solid rgba(255,255,255,.12);font-size:7.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.56);}
#abl-cosmos-app .cpweb{position:absolute;top:9px;right:9px;padding:3px 8px;border-radius:100px;background:rgba(0,100,170,.22);border:1px solid rgba(0,180,255,.22);font-size:7.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(100,210,255,.92);}
#abl-cosmos-app .cp-body{padding:12px 14px 14px;}
#abl-cosmos-app .cp-body h3{font-family:'Playfair Display',serif;font-size:14.5px;line-height:1.28;font-weight:700;margin:0 0 5px;color:rgba(255,255,255,.93);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#abl-cosmos-app .cp-body p{font-size:10px;line-height:1.56;color:rgba(255,255,255,.56);font-weight:300;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#abl-cosmos-app .cp-foot{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid rgba(255,255,255,.07);}
#abl-cosmos-app .cp-dom{font-size:8.5px;color:rgba(255,255,255,.26);}
#abl-cosmos-app .cp-open{display:inline-flex;align-items:center;gap:3px;font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,100,90,.92);padding:3px 10px;border-radius:100px;background:rgba(255,59,48,.08);border:1px solid rgba(255,59,48,.18);transition:background .15s;}
#abl-cosmos-app .cp-open::after{content:'↗';}
#abl-cosmos-app .card:hover .cp-open{background:rgba(255,59,48,.16);}
#abl-cosmos-app .card.cw .cp-open{color:rgba(100,200,255,.92);background:rgba(0,150,220,.08);border-color:rgba(0,180,255,.18);}

/* Zoom */
#abl-cosmos-app #zbar{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:200;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;}
#abl-cosmos-app .zlbl{font-size:8px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.26);}
#abl-cosmos-app .ztrack{width:3px;height:70px;border-radius:3px;background:rgba(255,255,255,.08);position:relative;}
#abl-cosmos-app .zt{position:absolute;left:-3.5px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.75);top:50%;will-change:top;}

/* Instructions */
#abl-cosmos-app #inst{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:300;pointer-events:none;display:flex;gap:10px;align-items:center;padding:5px 16px;border-radius:100px;background:rgba(5,5,14,.72);border:1px solid rgba(255,255,255,.08);white-space:nowrap;}
#abl-cosmos-app .ib{display:flex;align-items:center;gap:4px;font-size:9px;color:rgba(255,255,255,.26);}
#abl-cosmos-app .ik{padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);font-size:7.5px;font-weight:600;color:rgba(255,255,255,.56);font-family:monospace;}
#abl-cosmos-app .isep{width:1px;height:10px;background:rgba(255,255,255,.10);}

/* Empty */
#abl-cosmos-app .empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;}
#abl-cosmos-app .empty h3{font-family:'Playfair Display',serif;font-size:30px;font-style:italic;color:rgba(255,255,255,.07);margin-bottom:8px;}
#abl-cosmos-app .empty p{font-size:11px;color:rgba(255,255,255,.26);font-weight:300;}

/* VIEWER */
#abl-cosmos-app #vdim{position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .3s;will-change:opacity;}
#abl-cosmos-app #vglow{position:absolute;z-index:51;top:50%;left:50%;transform:translate(-50%,-50%);width:60vw;height:60vh;border-radius:50%;background:radial-gradient(ellipse,rgba(255,59,48,.07) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s;will-change:opacity;}
#abl-cosmos-app #stage.viewing #vdim{opacity:1;}
#abl-cosmos-app #stage.viewing #vglow{opacity:1;}
#abl-cosmos-app #stage.viewing .card:not(.sel){opacity:0!important;pointer-events:none!important;}
#abl-cosmos-app #viewer{position:absolute;z-index:800;top:50%;left:50%;transform:translate(-50%,-50%) scale(.04);opacity:0;pointer-events:none;width:min(860px,88vw);max-height:min(560px,80vh);display:flex;border-radius:22px;overflow:hidden;background:rgba(10,10,20,.97);border:1px solid rgba(255,255,255,.13);box-shadow:0 40px 90px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.09);transition:transform .46s cubic-bezier(.34,1.4,.64,1),opacity .28s ease;will-change:transform,opacity;}
#abl-cosmos-app #viewer.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all;}
#abl-cosmos-app #viewer.cls{transform:translate(-50%,-50%) scale(.04);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.34,.2,.64,1),opacity .2s ease;}
#abl-cosmos-app #viv{width:42%;flex-shrink:0;position:relative;overflow:hidden;background:#080810;}
#abl-cosmos-app #vimg{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s,transform .6s ease;}
#abl-cosmos-app #viewer.open #vimg{transform:scale(1.03);}
#abl-cosmos-app #vnoimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:88px;font-style:italic;font-weight:700;color:rgba(255,255,255,.05);}
#abl-cosmos-app #vivg{position:absolute;inset:0;background:linear-gradient(to right,transparent 52%,rgba(10,10,20,.78)100%);pointer-events:none;}
#abl-cosmos-app .vcat{position:absolute;top:14px;left:14px;padding:3px 10px;border-radius:100px;background:rgba(5,5,16,.88);border:1px solid rgba(255,255,255,.12);font-size:7.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.56);}
#abl-cosmos-app .vweb{position:absolute;top:14px;right:14px;padding:3px 10px;border-radius:100px;background:rgba(0,110,180,.20);border:1px solid rgba(0,180,255,.20);font-size:7.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(100,210,255,.92);}
#abl-cosmos-app #vinfo{flex:1;display:flex;flex-direction:column;padding:26px 24px 22px;overflow-y:auto;min-height:0;scrollbar-width:thin;}
#abl-cosmos-app .vtag{font-size:8.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,100,90,.88);margin-bottom:12px;display:flex;align-items:center;gap:5px;}
#abl-cosmos-app .vtag::before{content:'';width:3px;height:3px;border-radius:50%;background:#ff3b30;flex-shrink:0;}
#abl-cosmos-app #vtitle{font-family:'Playfair Display',serif;font-size:clamp(16px,2.4vw,24px);line-height:1.22;font-weight:700;margin:0 0 12px;color:rgba(255,255,255,.93);}
#abl-cosmos-app #vexc{font-size:12px;line-height:1.72;color:rgba(255,255,255,.56);font-weight:300;margin:0 0 18px;flex:1;}
#abl-cosmos-app .vmeta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
#abl-cosmos-app .vmc{display:flex;align-items:center;gap:3px;padding:3px 10px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);font-size:9px;font-weight:500;color:rgba(255,255,255,.56);}
#abl-cosmos-app .vbtns{display:flex;gap:8px;flex-wrap:wrap;}
#abl-cosmos-app .vbtn{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 20px;border-radius:100px;border:none !important;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .12s,box-shadow .18s;}
#abl-cosmos-app .vbtn:hover{transform:translateY(-1px);}
#abl-cosmos-app .vbtn-p{background:#ff3b30 !important;color:#fff !important;box-shadow:0 6px 18px rgba(255,59,48,.28);}
#abl-cosmos-app .vbtn-g{background:rgba(255,255,255,.10) !important;color:rgba(255,255,255,.93) !important;border:1px solid rgba(255,255,255,.12) !important;}
#abl-cosmos-app #vcls{position:absolute;top:11px;right:11px;z-index:10;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.13) !important;background:rgba(9,9,18,.92) !important;color:rgba(255,255,255,.56) !important;font-size:15px;cursor:pointer;display:grid;place-items:center;transition:background .16s,color .16s;}
#abl-cosmos-app #vcls:hover{background:rgba(255,59,48,.28) !important;color:#fff !important;}

/* ══════════════════════════════════════════════════
   MOBILE < 600px — ESFERA 360° TÁCTIL
   Misma esfera que desktop, optimizada para touch:
   - Cards más pequeñas para ver más en pantalla
   - Topbar en 2 filas para no ocupar espacio
   - touch-action:none ya está en JS
   - Botones más grandes para el dedo
══════════════════════════════════════════════════ */
@media(max-width:599px){

  /* Topbar — 2 filas */
  #abl-cosmos-app #topbar{
    top:8px !important;left:8px !important;right:8px !important;
    border-radius:16px !important;
    flex-wrap:wrap !important;
    gap:5px !important;
    padding:7px 9px !important;
  }
  #abl-cosmos-app .brand{flex-shrink:0 !important;order:1 !important;}
  #abl-cosmos-app #sw{flex:1 !important;min-width:0 !important;order:1 !important;}
  #abl-cosmos-app #tabs{order:2 !important;flex-shrink:0 !important;}
  #abl-cosmos-app #nav{order:2 !important;flex-shrink:0 !important;margin-left:auto !important;}
  #abl-cosmos-app .sep{display:none !important;}
  /* Botones grandes = fáciles de tocar */
  #abl-cosmos-app .tab,
  #abl-cosmos-app .nb{width:38px !important;height:38px !important;font-size:15px !important;}

  #abl-cosmos-app #hud{top:116px !important;left:10px !important;}
  #abl-cosmos-app .chip{font-size:9px !important;padding:3px 9px !important;}

  /* Focal rings más pequeños en mobile */
  #abl-cosmos-app .fr:nth-child(1){width:24px !important;height:24px !important;}
  #abl-cosmos-app .fr:nth-child(2){width:50px !important;height:50px !important;}
  #abl-cosmos-app .fr:nth-child(3){width:86px !important;height:86px !important;}

  /* Cards pequeñas — caben más en la esfera */
  #abl-cosmos-app .cs{width:148px !important;}
  #abl-cosmos-app .cs-title{font-size:15px !important;}
  #abl-cosmos-app .cs-body{padding:13px 12px 0 !important;}
  #abl-cosmos-app .cs-desc{font-size:9px !important;-webkit-line-clamp:2 !important;display:-webkit-box !important;-webkit-box-orient:vertical !important;overflow:hidden !important;}
  #abl-cosmos-app .cs-foot{padding:8px 12px 12px !important;margin-top:8px !important;}
  #abl-cosmos-app .cs-ent{font-size:8px !important;padding:3px 9px !important;}

  #abl-cosmos-app .cp{width:158px !important;}
  #abl-cosmos-app .cpthumb{height:96px !important;}
  #abl-cosmos-app .cp-body{padding:9px 11px 11px !important;}
  #abl-cosmos-app .cp-body h3{font-size:12.5px !important;}
  #abl-cosmos-app .cp-body p{font-size:9px !important;margin-bottom:7px !important;}
  #abl-cosmos-app .cp-open{font-size:8px !important;padding:3px 8px !important;}

  /* Zoom bar oculto en mobile */
  #abl-cosmos-app #zbar{display:none !important;}
  #abl-cosmos-app #inst{display:none !important;}

  /* Hint táctil */
  #abl-cosmos-app #mob-hint{
    position:absolute !important;
    bottom:14px !important;left:50% !important;
    transform:translateX(-50%) !important;
    z-index:300 !important;pointer-events:none !important;
    display:flex !important;align-items:center !important;gap:6px !important;
    padding:6px 16px !important;border-radius:100px !important;
    background:rgba(5,5,14,.75) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    font-size:10px !important;color:rgba(255,255,255,.45) !important;
    white-space:nowrap !important;
  }

  /* Viewer en mobile — apilado vertical */
  #abl-cosmos-app #viewer{
    flex-direction:column !important;max-height:88vh !important;
    width:96vw !important;border-radius:18px !important;
  }
  #abl-cosmos-app #viv{width:100% !important;height:140px !important;flex-shrink:0 !important;}
  #abl-cosmos-app #vivg{background:linear-gradient(to bottom,transparent 35%,rgba(10,10,20,.85) 100%) !important;}
  #abl-cosmos-app #vinfo{padding:16px 16px 14px !important;}
  #abl-cosmos-app #vtitle{font-size:16px !important;margin-bottom:8px !important;}
  #abl-cosmos-app #vexc{font-size:11px !important;margin-bottom:14px !important;}
  #abl-cosmos-app .vbtns{gap:6px !important;}
  #abl-cosmos-app .vbtn{height:36px !important;padding:0 14px !important;font-size:10.5px !important;}
}

/* Tablet */
@media(min-width:600px) and (max-width:1023px){
  #abl-cosmos-app #topbar{top:10px !important;left:10px !important;right:10px !important;}
  #abl-cosmos-app #hud{top:68px;}
  #abl-cosmos-app .cs{width:200px;}#abl-cosmos-app .cs-title{font-size:20px;}
  #abl-cosmos-app .cp{width:220px;}#abl-cosmos-app .cpthumb{height:122px;}
  #abl-cosmos-app #viewer{flex-direction:column;max-height:82vh;}
  #abl-cosmos-app #viv{width:100%;height:158px;flex-shrink:0;}
  #abl-cosmos-app #vivg{background:linear-gradient(to bottom,transparent 36%,rgba(10,10,20,.82)100%);}
  #abl-cosmos-app #inst{display:none;}
}

/* TV */
@media(min-width:1800px){
  #abl-cosmos-app .tab,#abl-cosmos-app .nb{width:34px;height:34px;}
  #abl-cosmos-app .cs{width:270px;}#abl-cosmos-app .cs-title{font-size:30px;}
  #abl-cosmos-app .cp{width:290px;}#abl-cosmos-app .cpthumb{height:162px;}
}