/* ═══════════════════════════════════════════════════
   apps.css — App Store Termifast
   Estilos específicos de la tienda de apps.
   Base (cursor, nav, footer) va inline en index.html.
═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   HERO BANNER
───────────────────────────────────────── */
.apps-hero {
  margin-top: 68px;
  background: linear-gradient(135deg, #101820 0%, #1a2b3c 50%, #101820 100%);
  position: relative;
  overflow: hidden;
}
.apps-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,106,19,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,106,19,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.apps-hero-glow {
  position: absolute; top: 50%; right: -80px;
  transform: translateY(-50%);
  width: 560px; height: 380px;
  background: radial-gradient(ellipse, rgba(255,106,19,.18) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.apps-hero-inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  padding: 52px 24px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 48px;
  flex-wrap: wrap;
}
.apps-hero-left { flex: 1; min-width: 300px; }

.apps-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #ff6a13; margin-bottom: 20px;
}
.apps-eyebrow::before {
  content: ''; display: block;
  width: 20px; height: 2px; background: #ff6a13; flex-shrink: 0;
}

.apps-hero-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 900; color: #fff;
  line-height: 1.05; letter-spacing: -.03em;
  margin: 0 0 20px;
}
.apps-tw-wrap {
  display: block;
  min-height: 1.2em;
  overflow: hidden;
}
#tw-apps { color: #ff6a13; }
#tw-apps-cursor {
  color: #ff6a13; font-weight: 300;
  animation: twBlink 1s step-end infinite;
}
@keyframes twBlink { 0%,100%{opacity:1} 50%{opacity:0} }

.apps-hero-sub {
  font-size: .95rem; color: #a8bdd0;
  line-height: 1.7; max-width: 440px;
  margin: 0 0 32px;
}

/* Hero stats */
.apps-hero-stats {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.apps-stat { text-align: center; }
.apps-stat-n {
  display: block;
  font-size: 1.8rem; font-weight: 900; color: #fff;
  line-height: 1;
}
.apps-stat-l {
  font-size: .72rem; font-weight: 600;
  color: #617d96; text-transform: uppercase; letter-spacing: .08em;
  margin-top: 4px; display: block;
}
.apps-stat-div {
  width: 1px; height: 36px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

/* Hero right: floating app icons */
.apps-hero-right {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  flex-shrink: 0;
}
.apps-float-icons {
  display: flex; gap: 16px; align-items: flex-end;
}
.apps-float-icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transition: transform .3s ease;
  animation: floatIcon 4s ease-in-out infinite;
}
.apps-float-icon:nth-child(2) { animation-delay: 1.3s; width: 88px; height: 88px; border-radius: 24px; }
.apps-float-icon:nth-child(3) { animation-delay: 2.6s; }
@keyframes floatIcon {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.apps-float-icon img { width: 60%; height: 60%; object-fit: contain; }
.apps-float-label {
  font-size: .72rem; font-weight: 600; color: #617d96;
  text-align: center; letter-spacing: .04em;
}

/* ─────────────────────────────────────────
   MAIN CONTENT AREA
───────────────────────────────────────── */
.apps-main {
  max-width: 1280px; margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ─────────────────────────────────────────
   TOOLBAR (filtros + contador)
───────────────────────────────────────── */
.apps-toolbar {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.apps-pills {
  display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.apps-pill {
  padding: 7px 18px;
  border-radius: 100px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  font-size: .8rem; font-weight: 700; color: #617d96;
  cursor: pointer; transition: all .2s;
  white-space: nowrap;
}
.apps-pill:hover { border-color: #ff6a13; color: #ff6a13; }
.apps-pill.active {
  background: #ff6a13; border-color: #ff6a13;
  color: #fff; box-shadow: 0 4px 14px rgba(255,106,19,.3);
}
.apps-count {
  font-size: .82rem; font-weight: 600; color: #7a90a8;
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   APP GRID
───────────────────────────────────────── */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media(max-width:900px) { .apps-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:500px)  { .apps-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────
   APP CARD
───────────────────────────────────────── */
.app-card {
  background: #fff;
  border-radius: 24px;
  border: 1px solid #e8edf2;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.app-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.10);
}

/* Badge */
.app-badge {
  position: absolute; top: 16px; right: 16px;
  font-size: .65rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  color: #fff;
}
.app-badge--popular { background: #ff6a13; }
.app-badge--nuevo   { background: #2563eb; }

/* Card header: icon area */
.app-card-header {
  padding: 28px 28px 0;
  display: flex; align-items: flex-start;
}
.app-icon-wrap {
  width: 72px; height: 72px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  overflow: hidden;
}
.app-icon-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: 20px;
}

/* Card body */
.app-card-body {
  padding: 20px 28px 0;
  flex: 1;
}
.app-name {
  font-size: 1.05rem; font-weight: 800;
  color: #101820; margin: 0 0 4px;
  line-height: 1.2;
}
.app-meta {
  font-size: .75rem; font-weight: 600;
  color: #a8bdd0; margin: 0 0 10px;
}
.app-tagline {
  font-size: .875rem; color: #7a90a8;
  line-height: 1.55; margin: 0 0 16px;
}

/* Platform chips */
.app-platforms {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 0;
}
.app-plat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 700;
  color: #617d96; background: #f4f6f9;
  border-radius: 100px;
  padding: 3px 10px;
}
.app-plat i { font-size: .65rem; }

/* Card footer: buttons */
.app-card-footer {
  padding: 20px 28px 24px;
  display: flex; gap: 10px;
}
.app-btn-detail {
  flex: 1;
  padding: 10px 0;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: .82rem; font-weight: 700;
  color: #101820;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.app-btn-detail:hover {
  border-color: #ff6a13; color: #ff6a13;
  background: #fff4ee;
}
.app-btn-install {
  flex: 1.4;
  padding: 10px 0;
  border: none;
  border-radius: 10px;
  background: #ff6a13;
  font-family: 'Inter', sans-serif;
  font-size: .82rem; font-weight: 700;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .2s, transform .15s;
  box-shadow: 0 4px 14px rgba(255,106,19,.25);
}
.app-btn-install:hover {
  background: #e05500;
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────
   EMPTY STATE
───────────────────────────────────────── */
.apps-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #7a90a8;
  font-weight: 600;
  display: none;
}

/* ─────────────────────────────────────────
   DETAIL DRAWER (overlay + panel)
   Se gestiona desde apps-store.js (Fase 3)
───────────────────────────────────────── */
.ad-overlay {
  position: fixed; inset: 0;
  background: rgba(16,24,32,.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0; transition: opacity .3s;
}
.ad-overlay.ad-open { opacity: 1; }

.ad-panel {
  position: fixed; top: 0; right: 0;
  width: min(520px, 100vw);
  height: 100vh;
  background: #fff;
  z-index: 1001;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
.ad-panel.ad-open { transform: translateX(0); }

.ad-header {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.ad-icon-wrap {
  width: 60px; height: 60px; border-radius: 16px;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.ad-icon-wrap img { width: 100%; height: 100%; object-fit: contain; }
.ad-close {
  margin-left: auto;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid #e5e7eb;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  flex-shrink: 0;
}
.ad-close:hover { background: #f4f6f9; }
.ad-close svg { width: 16px; height: 16px; }

.ad-body { flex: 1; overflow-y: auto; padding: 24px; }

.ad-section-title {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #a8bdd0; margin: 0 0 12px;
}
.ad-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 8px; }
.ad-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .875rem; color: #374151; line-height: 1.5;
}
.ad-features li::before {
  content: '';
  width: 18px; height: 18px;
  background: #fff4ee; border-radius: 50%;
  flex-shrink: 0; margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a13' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Install tabs en drawer */
.ad-install-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ad-tab {
  padding: 6px 14px; border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  font-size: .78rem; font-weight: 700; color: #617d96;
  cursor: pointer; transition: all .2s; background: transparent;
  font-family: 'Inter', sans-serif;
}
.ad-tab.active { background: #ff6a13; border-color: #ff6a13; color: #fff; }
.ad-install-content { display: none; }
.ad-install-content.active { display: block; }
.ad-install-text {
  font-size: .875rem; color: #617d96; line-height: 1.7;
  background: #f8fafc; border-radius: 12px;
  padding: 14px 16px;
  border-left: 3px solid #ff6a13;
}

.ad-footer {
  padding: 20px 24px;
  border-top: 1px solid #f1f5f9;
  display: flex; gap: 12px;
  flex-shrink: 0;
}
.ad-btn-open {
  flex: 1;
  padding: 13px 0;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: .875rem; font-weight: 700; color: #101820;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ad-btn-open:hover { border-color: #ff6a13; color: #ff6a13; }
.ad-btn-install-main {
  flex: 1.6;
  padding: 13px 0;
  border: none; border-radius: 12px;
  background: #ff6a13; color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .875rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s;
  box-shadow: 0 4px 16px rgba(255,106,19,.3);
}
.ad-btn-install-main:hover { background: #e05500; }

/* ─────────────────────────────────────────
   INSTALL MODAL (instrucciones)
───────────────────────────────────────── */
.install-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(16,24,32,.6);
  z-index: 1100;
  display: flex; align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.install-modal-overlay.open {
  opacity: 1; pointer-events: all;
}
.install-modal {
  width: 100%; max-width: 480px;
  background: #fff; border-radius: 24px 24px 0 0;
  padding: 28px 24px 40px;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.install-modal-overlay.open .install-modal {
  transform: translateY(0);
}
.install-modal-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: #e5e7eb; margin: 0 auto 20px;
}
@media(min-width:640px){
  .install-modal-overlay { align-items: center; padding: 20px; }
  .install-modal { border-radius: 24px; transform: scale(.94); }
  .install-modal-overlay.open .install-modal { transform: scale(1); }
}

/* ─────────────────────────────────────────
   CTA SECTION
───────────────────────────────────────── */
.apps-cta {
  background: linear-gradient(135deg, #ff6a13 0%, #e05500 100%);
  padding: 72px 24px;
  text-align: center;
}

/* ─────────────────────────────────────────
   RESPONSIVE HERO
───────────────────────────────────────── */
@media(max-width:768px) {
  .apps-hero-right { display: none; }
  .apps-hero-inner { padding: 40px 20px; }
  .apps-hero-stats { gap: 16px; }
}
@media(max-width:640px) {
  .apps-hero-inner { padding: 32px 16px; }
  .apps-hero-title { font-size: 1.9rem; }
  .apps-main { padding: 32px 16px 60px; }
  .apps-toolbar { gap: 12px; }
  .app-card-footer { padding: 16px 20px 20px; }
  .app-card-header { padding: 22px 20px 0; }
  .app-card-body { padding: 16px 20px 0; }
}