/* Transformación Digital — Aplicaciones en acción (player + info + carousel). Behaviour: dist/td-apps.js. */
.td-apps{--apps-ease:cubic-bezier(.2,.7,.2,1);position:relative;padding:clamp(80px,9vw,130px) 0 clamp(90px,10vw,140px)}
.td-apps-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:end}
.td-apps-head h2{margin:0;font-size:clamp(2.1rem,3.4vw,3.2rem);font-weight:400;line-height:1.15;letter-spacing:-.04em;color:#f5f7ff}
.td-apps-head h2 .gradient{display:inline}
.td-apps-intro{margin:0;max-width:480px;color:#a9b6cc;font-size:1rem;line-height:1.85}

/* Stage: player + info on desktop, carousel below */
.td-apps-stage{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);grid-template-areas:"player info" "car car";column-gap:clamp(32px,4vw,56px);row-gap:clamp(40px,4.5vw,56px);align-items:center;margin-top:clamp(44px,4.5vw,60px)}
.td-apps-player{grid-area:player;min-width:0}
.td-apps-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:16px;border:1px solid #ffffff14;background:#000;transition:opacity .24s ease}
.td-apps-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.td-apps-frame:not(.is-playing)::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00010e1a,#00010e4d)}
.td-apps-frame iframe,.td-apps-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.td-apps-backdrop{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(20px) brightness(.4) saturate(.8)}
.td-apps-frame video.td-apps-video{background:transparent;object-fit:contain}
.td-apps-play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:76px;height:76px;margin:-38px 0 0 -38px;border:0;border-radius:50%;background:linear-gradient(135deg,#0095e5,#873cec);box-shadow:0 12px 34px #00010e99;cursor:pointer;transition:transform .25s var(--apps-ease),box-shadow .25s}
.td-apps-play svg{width:26px;height:26px;margin-left:3px;fill:#fff}
.td-apps-play:hover{transform:scale(1.06);box-shadow:0 14px 40px #00010ebf,0 0 0 8px #ffffff10}
.td-apps-play:focus-visible{outline:2px solid #00b0d1;outline-offset:5px}
.td-apps-pending{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;border:1px dashed #294156;border-radius:inherit;color:#8fa1bb;font-size:.85rem}
.td-apps-pending p{margin:0;color:#c9d6ea;font-size:1rem}

/* Info of the selected application */
.td-apps-info{grid-area:info;min-width:0;transition:opacity .24s ease}
.td-apps-badge-row{margin:0 0 14px}
.td-apps-badge-row:empty{display:none}
.td-apps-cat{margin:0;color:#5ec8ff;font-size:.72rem;font-weight:500;letter-spacing:.2em;line-height:1.6}
.td-apps-title{margin:14px 0 0;color:#f5f7ff;font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:400;line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.td-apps-desc{margin:16px 0 0;max-width:460px;color:#a9b6cc;font-size:1rem;line-height:1.8}
.td-apps-badge{display:inline-block;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,#5b6fd8,#873cec);color:#fff;font-size:.6rem;font-weight:600;letter-spacing:.14em;line-height:1.4;white-space:nowrap}
.td-apps-stage.is-switching .td-apps-frame,.td-apps-stage.is-switching .td-apps-info{opacity:0}

/* Carousel */
.td-apps-carousel{grid-area:car;position:relative;min-width:0}
.td-apps-track{--gap:16px;--visible:4.4;display:flex;gap:var(--gap);margin:0;padding:14px 2px 6px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scrollbar-width:none}
.td-apps-track::-webkit-scrollbar{display:none}
.td-apps-slide{flex:0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));scroll-snap-align:start;min-width:0}
.td-apps-card{position:relative;display:grid;gap:10px;width:100%;height:100%;padding:12px 12px 14px;border:1px solid #ffffff14;border-radius:14px;background:#070b1c;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.74;transition:opacity .25s,border-color .25s,background .25s}
.td-apps-card:hover{opacity:.95}
.td-apps-card.is-active{opacity:1;border-color:#00b0d1;background:#0a1430;box-shadow:inset 0 0 0 1px #00b0d133}
.td-apps-card:focus-visible{outline:2px solid #00b0d1;outline-offset:3px}
.td-apps-card .td-apps-badge{position:absolute;top:-11px;left:12px}
.td-apps-card-meta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.8em;color:#5ec8ff;font-size:.64rem;font-weight:500;letter-spacing:.14em;line-height:1.4}
.td-apps-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:linear-gradient(135deg,#0b1430,#060a1c)}
.td-apps-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.td-apps-pending-tag{position:absolute;inset:0;display:grid;place-items:center;color:#8fa1bb;font-size:.72rem;letter-spacing:.06em;background:#03061acc}
.td-apps-card-title{color:#e3eaf7;font-size:.9rem;line-height:1.4}
.td-apps-arrow{position:absolute;top:calc(50% + 4px);z-index:2;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;border:1px solid #ffffff26;border-radius:50%;background:#050816e6;color:#e3eaf7;cursor:pointer;transition:opacity .25s,border-color .25s}
.td-apps-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.td-apps-arrow:hover{border-color:#00b0d1}
.td-apps-arrow:focus-visible{outline:2px solid #00b0d1;outline-offset:3px}
.td-apps-arrow:disabled{opacity:.25;cursor:default}
.td-apps-arrow--prev{left:-58px}
.td-apps-arrow--next{right:-58px}

/* Reveal (td-page.js) */
.td-reveal-ready .td-apps [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .8s var(--apps-ease),transform .8s var(--apps-ease)}
.td-reveal-ready .td-apps [data-reveal].is-revealed{opacity:1;transform:none}

@media (max-width:1340px){
 .td-apps-arrow--prev{left:-14px}
 .td-apps-arrow--next{right:-14px}
}
@media (max-width:1100px){
 .td-apps-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"player" "info" "car";row-gap:28px}
 .td-apps-info{max-width:760px}
 .td-apps-carousel{margin-top:12px}
 .td-apps-track{--visible:3.2}
}
@media (max-width:1000px){
 .td-apps-head{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:700px){
 .td-apps-head h2{font-size:clamp(1.85rem,7.4vw,2.4rem)}
 .td-apps-frame{border-radius:12px}
 .td-apps-play{width:60px;height:60px;margin:-30px 0 0 -30px}
 .td-apps-play svg{width:22px;height:22px}
 .td-apps-track{--visible:1.2;--gap:12px}
 .td-apps-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){
 .td-apps-frame,.td-apps-info,.td-apps-card,.td-apps-play{transition:none}
}