/* =============================================================================
   IARacional — Tienda de apps
   -----------------------------------------------------------------------------
   Tokens en :root COPIADOS LITERALMENTE desde index.php. index.php es la
   fuente de la verdad; si alli se cambia un color, hay que cambiarlo aqui.
   No se inventa ni un valor fuera de esa paleta.

   Identidad propia de tienda: las tarjetas comparten el lenguaje de las
   service-card (radio, borde, transicion, fondo) pero se distinguen en:
     - el logo de la app manda, no un icono generico
     - el precio vive en una pastilla, en monoespaciada, arriba a la derecha
     - el borde tiene tinte de acento en reposo: son objetos accionables
       (las tarjetas de servicio son informacion pasiva)
     - glow de acento al hover, con --shadow-glow ya definido en el sitio
   ========================================================================== */

:root {
  --bg: #050607;
  --surface: #0E1317;
  --text: #F4F8FB;
  --text-secondary: #AFC9D6;
  --text-muted: #AFC9D6;
  --border: rgba(244, 248, 251, 0.06);
  --accent: #00D9FF;
  --accent2: #55D9FF;
  --blue: #2EA9FF;
  --blue-dark: #1677D9;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', monospace;
  --shadow-glow: 0 0 30px rgba(0, 217, 255, 0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* === Rejilla y secciones (mismas medidas que index.php) ==================== */
.section { padding: 6rem 1rem; position: relative; z-index: 10; }
.section-border { border-top: 1px solid rgba(244, 248, 251, .05); }
.section-inner { max-width: 72rem; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
@media (min-width: 640px) { .section-title { font-size: 2.25rem; } }
.section-subtitle { margin-top: .75rem; color: var(--text-muted); }

.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* === Texto y animaciones (identicas al sitio) ============================= */
.gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-balance { text-wrap: balance; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }

/* === Cabecera ============================================================== */
.header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(244, 248, 251, .08);
  background: rgba(5, 6, 7, .8);
  backdrop-filter: blur(12px);
}
.header-inner {
  max-width: 72rem; margin: 0 auto;
  padding: 1rem; display: flex; align-items: center; justify-content: space-between;
}
.nav-desktop { display: flex; gap: 2rem; align-items: center; }
@media (max-width: 767px) { .nav-desktop { display: none; } }
.nav-link { font-size: .875rem; color: var(--text-muted); transition: color .2s; }
.nav-link:hover { color: var(--text); }
.nav-link-active { color: var(--accent); }

/* Logo del sitio: se mantiene identico al de index.php */
.logo { display: flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: -.02em; }
.logo-mark {
  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--blue-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; color: var(--bg);
}

/* === Cabecera de la tienda ================================================= */
.store-hero { padding: 9rem 1rem 3rem; position: relative; z-index: 10; text-align: center; }
.store-hero .eyebrow {
  display: inline-block; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
  padding: .375rem .75rem; border-radius: 999px;
  border: 1px solid rgba(0, 217, 255, .25);
  background: rgba(0, 217, 255, .06);
}
.store-hero h1 {
  font-size: 2.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
@media (min-width: 640px) { .store-hero h1 { font-size: 3rem; } }
.store-hero p { margin: 1rem auto 0; max-width: 34rem; color: var(--text-muted); line-height: 1.7; }

/* === Tarjeta de app: identidad de tienda =================================== */
.app-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  /* Tinte de acento en reposo: esta tarjeta es un objeto accionable. */
  border: 1px solid rgba(0, 217, 255, .14);
  background: rgba(244, 248, 251, .02);
  padding: 1.5rem;
  overflow: hidden;
  transition: all .3s;
}
.app-card:hover {
  border-color: rgba(0, 217, 255, .45);
  background: rgba(244, 248, 251, .04);
  box-shadow: var(--shadow-glow);
}
/* Solo el enlace "levanta" la tarjeta. Un div que sube al hover promete un
   click que no existe. */
a.app-card { cursor: pointer; }
a.app-card:hover { transform: translateY(-2px); }

/* Pastilla de precio: monoespaciada, esquina superior derecha */
.app-price {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 500;
  padding: .25rem .5rem; border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 217, 255, .16), rgba(85, 217, 255, .16));
  color: var(--accent2);
  border: 1px solid rgba(0, 217, 255, .25);
  white-space: nowrap;
}

/* Marco del logo: mismo lenguaje que service-card-icon, mas grande */
.app-logo {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 217, 255, .12), rgba(85, 217, 255, .12));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem; overflow: hidden; flex-shrink: 0;
}
.app-logo img { width: 100%; height: 100%; object-fit: cover; }
.app-logo-monogram {
  font-size: 1.25rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase;
}

.app-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; margin-bottom: .375rem; padding-right: 5rem; }
.app-tagline { font-size: .8125rem; color: var(--accent2); margin-bottom: .5rem; line-height: 1.5; }
.app-desc { font-size: .8125rem; line-height: 1.6; color: var(--text-muted); }

/* Badge del modelo de cobro: pago unico vs suscripcion */
/* El badge NO lleva margin-top:auto: si lo llevara, competiria con .app-buy
   por el espacio libre de la tarjeta y los botones de cada tarjeta se
   alinearían a alturas distintas. El auto va solo en .app-buy. */
.app-badge {
  display: inline-flex; align-items: center; gap: .375rem;
  align-self: flex-start; padding-top: 1.25rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.app-badge::before {
  content: ''; width: .375rem; height: .375rem; border-radius: 999px;
  background: var(--accent);
}
.app-badge-suscripcion::before { background: var(--blue); }

.app-version {
  font-family: var(--font-mono); font-size: .6875rem;
  color: rgba(175, 201, 214, .55); margin-left: .625rem;
}

/* === Compra ================================================================ */
.app-buy {
  margin-top: auto; padding-top: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
}

.btn-comprar {
  width: 100%; padding: .625rem 1rem; cursor: pointer;
  border: none; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--blue));
  color: #050607;
  font-family: var(--font-sans); font-size: .8125rem; font-weight: 700;
  transition: filter .2s;
}
.btn-comprar:hover { filter: brightness(1.12); }

/* La variante secundaria debe leerse como menos principal que "Comprar",
   no como un boton primario mas. */
.btn-comprar-alt {
  background: transparent;
  border: 1px solid rgba(0, 217, 255, .35);
  color: var(--accent);
}
.btn-comprar-alt:hover { background: rgba(0, 217, 255, .08); filter: none; }

.app-email, .app-periodo {
  width: 100%; padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(244, 248, 251, .12);
  background: rgba(244, 248, 251, .03);
  color: var(--text);
  font-family: var(--font-sans); font-size: .75rem;
}
.app-email::placeholder { color: rgba(175, 201, 214, .5); }
.app-email:focus, .app-periodo:focus {
  outline: none; border-color: rgba(0, 217, 255, .5);
}
.app-periodo { cursor: pointer; }

/* === Estado vacio ========================================================== */
.store-empty {
  text-align: center; padding: 4rem 1rem;
  border: 1px dashed rgba(244, 248, 251, .12); border-radius: var(--radius-lg);
}
.store-empty h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: .5rem; }
.store-empty p { color: var(--text-muted); font-size: .875rem; }

/* === Aviso de Ticket/NOTICES en pagina de tienda =========================== */
.store-notice {
  display: flex; gap: .75rem; align-items: flex-start;
  margin-top: 3rem; padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(244, 248, 251, .08);
  background: rgba(244, 248, 251, .02);
  font-size: .8125rem; color: var(--text-muted); line-height: 1.6;
}

/* === Pie ================================================================== */
/* La .section ya aporta 6rem de aire abajo; un margin-top extra aqui
   dejaba ~10rem de negro muerto entre el contenido y el pie. */
.footer { border-top: 1px solid rgba(244, 248, 251, .06); padding: 3rem 1rem; }
.footer-inner { max-width: 72rem; margin: 0 auto; text-align: center; }
.footer p { font-size: .8125rem; color: var(--text-muted); }
.footer nav { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.footer nav a { font-size: .8125rem; color: var(--text-muted); transition: color .2s; }
.footer nav a:hover { color: var(--text); }