/* DENUS apps — visor rail + stage (solo apps.html) */
.apps-showcase{display:grid;grid-template-columns:148px minmax(0,1fr);gap:16px;align-items:stretch;margin-top:8px}

/* — Rail izquierda: 4 cuadrados 1:1 con iconos 3D ladeados — */
.apps-rail{display:flex;flex-direction:column;gap:16px;min-width:0}
.app-thumb{appearance:none;border:0px solid rgba(255, 255, 255, 0);cursor:pointer;padding:0;aspect-ratio:1/1;width:100%;border-radius:24px;position:relative;background:radial-gradient(120% 100% at 50% 0%,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0) 60%,rgba(255, 255, 255, 0));backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0),0 16px 44px rgba(0, 0, 0, 0);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s;display:grid;place-items:center;perspective:800px;overflow:visible}
.app-thumb:hover{transform:translateY(-3px);border-color:rgba(255, 0, 0, 0)}
.app-thumb:focus-visible{outline:0px solid #ffffff00;outline-offset:3px}
.app-thumb.is-active{border-color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0),0 0 0 1px rgba(255, 255, 255, 0),0 18px 50px rgba(0, 0, 0, 0)}
.app-thumb.is-active::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0);pointer-events:none}

/* Objeto 3D: la frontal es tu SVG, el canto se genera solo */
.icon-3d{position:relative;width:68%;height:68%;transform-style:preserve-3d;transform:rotateX(24deg) rotateY(-24deg);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.app-thumb:hover .icon-3d,.app-thumb.is-active .icon-3d{transform:rotateX(0deg) rotateY(0deg) translateZ(12px)}
.icon-3d .face{position:relative;z-index:3;width:100%;height:100%;object-fit:cover;display:block;border-radius:19px;border:1px solid rgba(255,255,255,.28);box-shadow:0 18px 40px rgba(0,0,0,.55);transform:translateZ(18px);transition:box-shadow .35s}
.app-thumb:hover .icon-3d .face,.app-thumb.is-active .icon-3d .face{box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 32px var(--sea-glow,rgba(255,255,255,.18))}
.icon-3d .depth{position:absolute;inset:0;border-radius:19px;background:linear-gradient(135deg,var(--edge,var(--sea,#9aa0b4)) 0%,color-mix(in srgb,var(--edge,var(--sea,#9aa0b4)) 38%,#14151c) 100%);filter:brightness(var(--edge-bright,.72));border:1px solid rgba(255,255,255,.08);pointer-events:none}
/* Estado "próximamente": difumina la frontal y muestra chapa SOON */
.app-thumb.is-soon .icon-3d .face,.apps-more-card.is-soon img{filter:blur(7px) grayscale(.35) brightness(.85)}
.app-thumb.is-soon .icon-3d .depth{filter:brightness(.5)}
.soon-badge{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%) translateZ(30px);font-size:10px;font-weight:600;letter-spacing:.22em;padding:7px 12px 7px 14px;border-radius:999px;color:#fff;background:rgba(10,10,14,.55);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap}
.apps-more-card{position:relative;overflow:hidden}
.apps-more-card .soon-badge{transform:translate(-50%,-50%);font-size:11px}
.app-stage.is-soon .app-stage-logo{filter:blur(5px) grayscale(.35) brightness(.9)}
.app-stage.is-soon #appKicker,.app-stage.is-soon #appName,.app-stage.is-soon #appDesc{filter:blur(8px);user-select:none;pointer-events:none}
.apps-more-card.is-soon strong,.apps-more-card.is-soon span{filter:blur(6px);user-select:none;pointer-events:none}
.app-stage.is-soon .card-btn{opacity:.45;pointer-events:none}
/* Sombra en el suelo */
.icon-3d::after{content:"";position:absolute;left:8%;right:8%;bottom:-22%;height:22px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 70%);filter:blur(6px);transform:translateZ(-12px) rotateX(8deg);transition:.55s cubic-bezier(.16,1,.3,1);pointer-events:none}
.app-thumb:hover .icon-3d::after,.app-thumb.is-active .icon-3d::after{transform:translateZ(-12px) scaleX(.82);opacity:.85}
.app-more{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;overflow:visible}
.app-more:hover{background:transparent;border-color:transparent;box-shadow:none}
.app-more span{font-size:52px;font-weight:100;line-height:1;color:rgba(255,255,255,.75);transition:transform .35s cubic-bezier(.16,1,.3,1),color .25s,text-shadow .25s;text-shadow:0 0 28px rgba(255,255,255,.22),0 8px 24px rgba(0,0,0,.6)}
.app-more:hover span{transform:scale(1.12) rotate(90deg);color:#fff;text-shadow:0 0 36px rgba(255,255,255,.4),0 8px 24px rgba(0,0,0,.6)}
.app-more small{position:absolute;bottom:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* — Stage derecha: cuadro grande — */
.app-stage{margin:0;min-height:540px;display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;padding:0}
.app-stage-media{position:relative;min-height:320px;background:#0a0a0d}
.app-stage-media canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.app-stage-media .tag{position:absolute;top:16px;left:16px}
.app-stage-body{padding:36px 36px 32px;display:flex;flex-direction:column;min-width:0}
.app-stage-body .card-label{margin-bottom:14px}
.app-stage-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.app-stage-logo{width:76px;height:76px;aspect-ratio:1/1;object-fit:cover;border-radius:20px;border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 30px rgba(0,0,0,.45);flex-shrink:0;background:#111}
.app-stage-body h3{font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1.02}
.app-stage-body>p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.62);font-weight:300;margin-top:4px}
.app-stage-body .feature-row{margin-top:20px}
.app-stage-body .card-btn{margin-top:28px}
.app-stage-index{margin-top:16px;font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.35)}
.app-switch{will-change:transform,opacity}

/* — Overlay ver demás — */
.apps-more-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .35s}
.apps-more-overlay.open{opacity:1;pointer-events:auto}
.apps-more-panel{width:min(620px,100%);max-height:82vh;overflow:auto;border-radius:22px;padding:20px;background:linear-gradient(135deg,rgba(30,30,34,.92),rgba(12,12,14,.94));border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 120px rgba(0,0,0,.6);transform:translateY(16px) scale(.98);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.apps-more-overlay.open .apps-more-panel{transform:none}
.apps-more-panel h4{font-size:18px;font-weight:500;letter-spacing:-.03em;margin-bottom:2px}
.apps-more-panel>p{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:14px}
.apps-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.apps-more-card{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:16px;padding:10px;cursor:pointer;text-align:left;color:#fff;font-family:inherit;transition:.25s;display:flex;flex-direction:column;gap:8px}
.apps-more-card:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.09);transform:translateY(-3px)}
.apps-more-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:11px}
.apps-more-card strong{font-size:13.5px;letter-spacing:-.02em}
.apps-more-card span{font-size:11px;color:rgba(255,255,255,.55);line-height:1.45}
.apps-more-close{margin-top:14px;width:100%;appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;padding:11px;font-size:13px;cursor:pointer;font-family:inherit}
.apps-more-close:hover{background:rgba(255,255,255,.12)}

/* — Responsive — */
@media(max-width:900px){
  .apps-showcase{grid-template-columns:1fr}
  .apps-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .app-thumb{border-radius:18px}
  .app-more span{font-size:38px}
  .app-stage{grid-template-columns:1fr;min-height:0}
  .app-stage-media{min-height:0;height:240px;position:relative}
  .app-stage-body{padding:26px 22px}
  .app-stage-logo{width:60px;height:60px;border-radius:16px}
  .apps-more-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .apps-showcase{gap:12px}
  .apps-rail{gap:10px}
  .app-stage-media{height:200px}
}
@media(prefers-reduced-motion:reduce){
  .app-thumb,.icon-3d,.icon-3d .face,.apps-more-panel{transition:none}
  .icon-3d{transform:none}
  .icon-3d .depth{display:none}
  .icon-3d::after{display:none}
}