/* ============================================================
   Aurum Tracker — sitio público (aurumtracker.com)
   v2: dirección "Cinemático oscuro + oro" -- scroll cinemático
   (GSAP+Lenis, ver animations.js), grano de película, tipografía
   cinética, botones magnéticos, cursor custom, tarjetas 3D-tilt.
   Paleta idéntica al tema "Obsidian Gold" de la app de escritorio
   (portfolio_app/core/theme.py).
   ============================================================ */

:root {
  --bg: #0A0B0E;
  --bg2: #121319;
  --bg3: #15161D;
  --bg4: #1C1F27;
  --border: #262A33;
  --border2: #3A3F4C;
  --txt: #F5F6F8;
  --txt2: #C8CBD2;
  --txt3: #8B90A0;
  --gold: #C9A227;
  --gold-dim: #A8861F;
  --gold-txt: #E9CB6C;
  --gold-bg: rgba(201, 162, 39, 0.10);
  --gold-bd: rgba(201, 162, 39, 0.30);
  --green: #34C77B;
  --red: #F0616D;
  --blue: #7FA8E6;
  --purple: #B39DDB;
  --max-width: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html.no-js .reveal { opacity: 1 !important; transform: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
  cursor: default;
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { max-width: 100%; display: block; }
::selection { background: var(--gold-bg); color: var(--gold-txt); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* ── Grano de película -- textura táctil sin costo de WebGL ─────
   Overlay fijo de ruido SVG sobre toda la página, blend "overlay"
   a opacidad muy baja: da profundidad "cinemática" sin pesar nada. */
.grain {
  position: fixed; inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Cursor custom (se oculta solo en touch, ver animations.js) ── */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: var(--gold-txt); }
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid var(--gold-bd);
  transition: width .2s var(--ease), height .2s var(--ease), border-color .2s;
}
.cursor-ring.hover { width: 54px; height: 54px; border-color: var(--gold); }
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button { cursor: none; }

/* ── Header / nav ─────────────────────────────────────────────── */
header.site {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(10, 11, 14, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
header.site.scrolled { border-bottom-color: var(--border); background: rgba(10, 11, 14, 0.92); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.brand .mark { color: var(--gold); font-size: 20px; display: inline-block; }
.brand .mark-img { height: 28px; width: auto; display: inline-block; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { position: relative; color: var(--txt2); font-size: 14px; font-weight: 500; transition: color .15s; padding: 4px 0; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--gold-txt); transition: right .25s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--txt); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; padding: 11px 22px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  transition: opacity .15s, background .15s, border-color .15s, transform .15s;
  position: relative; overflow: hidden;
}
.btn-gold { background: var(--gold); color: #17110A; }
.btn-gold:hover { background: var(--gold-dim); }
.btn-ghost { background: transparent; color: var(--txt2); border-color: var(--border2); }
.btn-ghost:hover { color: var(--txt); border-color: var(--gold-bd); }
.magnetic { will-change: transform; }

.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-toggle { display: none; background: none; border: none; color: var(--txt); font-size: 24px; cursor: pointer; }

/* ── Kinetic typography ──────────────────────────────────────── */
/* BUG (visto en grabación del usuario, ago 2026): títulos .kinetic que
   envuelven a 2 líneas mostraban un espacio vertical enorme entre ellas.
   Causa: .word es inline-block y se alineaba por "baseline" (default),
   y ninguno de los h2 de abajo fijaba su propio line-height, así que
   heredaban el line-height:1.55 del body (pensado para párrafos, no
   para títulos grandes en negritas). Fix: vertical-align:top en la
   palabra + line-height explícito y ajustado en cada título .kinetic. */
.kinetic { overflow: hidden; }
.kinetic .word { display: inline-block; overflow: hidden; vertical-align: top; }
.kinetic .word > span { display: inline-block; will-change: transform; }

.gold-text {
  background: linear-gradient(100deg, var(--gold-txt), var(--gold) 45%, var(--gold-txt));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 190px 0 120px;
  min-height: 92vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.candles-bg { position: absolute; inset: 0; z-index: 0; opacity: .9; }
.hero .container { z-index: 2; }
.hero::after {
  /* FIX (pedido del usuario): esta capa tapaba casi todas las velas --
     antes se volvía bg SÓLIDO al 78% del radio. Ahora el centro queda
     100% transparente hasta más lejos (88%) y el borde exterior se queda
     translúcido (no opaco), así las velas se alcanzan a ver detrás del
     texto en vez de desaparecer. */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 65% 55% at 50% 24%, transparent, rgba(10,11,14,.55) 88%);
  pointer-events: none;
}

.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold-txt); background: var(--gold-bg);
  border: 1px solid var(--gold-bd); border-radius: 999px;
  padding: 6px 14px 6px 10px; font-size: 12px; font-weight: 600; letter-spacing: .3px;
  margin-bottom: 26px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(52,199,123,.18); }

.hero h1 { font-size: 56px; line-height: 1.06; margin: 0 0 22px; font-weight: 800; letter-spacing: -1px; }
.hero p.sub { color: var(--txt2); font-size: 17.5px; max-width: 520px; margin: 0 0 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-stats { display: flex; gap: 32px; margin-top: 52px; }
.hero-stats .stat b { display: block; font-size: 26px; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.hero-stats .stat span { font-size: 12.5px; color: var(--txt3); }

/* ── Mockup card (3D tilt con el mouse) ──────────────────────── */
.mock-wrap { perspective: 1400px; }
.mock {
  position: relative;
  background: linear-gradient(160deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border2);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform-style: preserve-3d;
  will-change: transform;
}
.mock-bar { display: flex; gap: 6px; padding: 4px 6px 12px; }
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border2); }
.mock-body {
  border-radius: 10px; overflow: hidden; border: 1px solid var(--border);
  background: var(--bg4);
  aspect-ratio: 16/10.5;
  position: relative;
}
/* FIX (reportado por el usuario, ago 2026 -- "las imágenes no están a
   buen tamaño, todas están cortadas y no se ve nada"): las capturas
   reales de la app son franjas anchas y bajas (relación ancho/alto de
   ~2:1 hasta ~6:1 según la pantalla -- historial, alertas, velas, etc.),
   muy distintas de las cajas 4:3/16:9 pensadas originalmente para mocks
   genéricos. Con object-fit:cover esas cajas recortaban la mayor parte
   de cada captura, dejando solo una esquina ampliada -- exactamente lo
   reportado. object-fit:contain garantiza que SIEMPRE se vea la captura
   completa (con una franja de fondo arriba/abajo si sobra espacio, en
   vez de perder contenido). */
.mock-body img { width: 100%; height: 100%; object-fit: contain; }
.mock-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  color: var(--txt3); font-size: 12.5px; text-align: center; padding: 20px;
  background: repeating-linear-gradient(135deg, var(--bg4), var(--bg4) 10px, #1a1d26 10px, #1a1d26 20px);
}
.mock-placeholder .ph-icon { font-size: 26px; color: var(--gold-txt); }
.mock-glow {
  position: absolute; width: 60%; height: 60%; left: 20%; top: 10%;
  background: radial-gradient(circle, var(--gold-bg), transparent 70%);
  filter: blur(30px); z-index: -1; transform: translateZ(-40px);
}
.mock-float {
  position: absolute; z-index: 3;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.5);
  font-size: 12.5px; display: flex; align-items: center; gap: 8px;
  transform: translateZ(60px);
}
.mock-float.f1 { top: -18px; right: -22px; }
.mock-float.f2 { bottom: -16px; left: -24px; }
.mock-float b { font-variant-numeric: tabular-nums; }
.mock-float.up b { color: var(--green); }
.mock-float.down b { color: var(--red); }

/* ── Orbes decorativos -- profundidad visual sin fotos de stock ──── */
.orb {
  position: absolute; border-radius: 50%; filter: blur(60px);
  pointer-events: none; z-index: 0;
}
.orb.gold { background: radial-gradient(circle, rgba(201,162,39,.22), transparent 70%); }
.orb.green { background: radial-gradient(circle, rgba(52,199,123,.16), transparent 70%); }
.orb.blue { background: radial-gradient(circle, rgba(127,168,230,.14), transparent 70%); }

/* ── Velas de fondo tenues -- reutilizables en cualquier sección
   (no solo el hero de Inicio) para darle movimiento a toda la página
   sin depender de fotos genéricas. ── */
section.candles-section { overflow: hidden; }
section.candles-section .candles-bg { opacity: .16; }
section.candles-section .container { position: relative; z-index: 1; }

/* ── Showcase -- tarjeta grande para una captura real de la app ──── */
.showcase { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.showcase.reverse { grid-template-columns: 1.15fr .85fr; }
.showcase.reverse .showcase-media { order: 2; }
.showcase-media .mock { padding: 10px; }
.showcase-media .mock-body { aspect-ratio: 16/9; }
.showcase-tag { color: var(--gold-txt); font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; display: block; }
.showcase h2 { font-size: 32px; line-height: 1.15; margin: 0 0 16px; font-weight: 800; letter-spacing: -.5px; }
.showcase p { color: var(--txt2); font-size: 15px; margin: 0 0 22px; }
.showcase ul { list-style: none; margin: 0; padding: 0; }
.showcase li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--txt2); padding: 8px 0; }
.showcase li::before { content: "✓"; color: var(--green); font-weight: 700; }

/* ── Mini mockup -- placeholders más chicos para capturas dentro de
   secciones de contenido (Características). Mismo componente .mock,
   solo más angosto. ── */
.mini-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.mini-mock { text-align: center; }
.mini-mock .mock { padding: 8px; }
/* FIX (2da vuelta -- el usuario reportó que con una sola caja fija
   (2.35/1) + contain, las capturas más extremas (alertas 6.15:1, velas
   5.35:1) quedaban minúsculas con muchísimo espacio vacío arriba/abajo:
   "ahora no se ve nada, se ve horrible". El problema de fondo es que las
   9 capturas reales tienen relaciones de aspecto MUY distintas entre sí
   (2:1 hasta 6.15:1) -- NINGUNA caja fija sirve bien para todas a la vez:
   o se recorta contenido (cover) o sobra espacio (contain en una caja que
   no calza). La solución sin ese compromiso es que cada tarjeta tome la
   relación de aspecto EXACTA de su propia captura (fijada inline en el
   <img>, ver caracteristicas.html) -- así cada imagen llena su caja al
   100%, sin recortar nada y sin dejar espacio vacío, aunque eso signifique
   que las 3 tarjetas de una fila no midan lo mismo de alto (igual que
   cualquier grid de capturas reales de tamaños distintos). */
.mini-mock .mock-body { aspect-ratio: auto; }
.mini-mock .mock-body img { height: auto; }
.mini-mock .mock-placeholder { font-size: 11px; }
.mini-mock span.mini-label { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--txt2); }

/* ── Marquee de keywords (reemplaza logos falsos de "as seen in") ── */
.marquee-wrap { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; padding: 22px 0; background: var(--bg2); }
.marquee { display: flex; gap: 48px; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--txt3); white-space: nowrap; }
.marquee span b { color: var(--gold-txt); font-weight: 600; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Sections ─────────────────────────────────────────────────── */
section { padding: 120px 0; position: relative; }
section.alt { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
section.tight { padding-top: 0; }

.section-head { max-width: 640px; margin: 0 0 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: 36px; line-height: 1.15; margin: 0 0 14px; font-weight: 800; letter-spacing: -.5px; }
.section-head p { color: var(--txt2); font-size: 15.5px; margin: 0; }

/* ── Reveal (animado por GSAP ScrollTrigger, ver animations.js) ── */
.reveal { opacity: 0; transform: translateY(28px); }

/* ── Bento grid ───────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bento .card { grid-column: span 2; }
.bento .card.w3 { grid-column: span 3; }
.bento .card.w4 { grid-column: span 4; }
.bento .card.w6 { grid-column: span 6; }

.card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  transition: border-color .25s, transform .25s, background .25s;
  position: relative;
}
.card:hover { border-color: var(--gold-bd); transform: translateY(-4px); }
.card .icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--gold-bg); border: 1px solid var(--gold-bd); color: var(--gold-txt);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  margin-bottom: 16px;
}
.card h3 { font-size: 16.5px; margin: 0 0 8px; font-weight: 700; }
.card p { color: var(--txt2); font-size: 13.5px; margin: 0; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ── Pricing ──────────────────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 18px;
  padding: 30px 26px; display: flex; flex-direction: column;
  transition: transform .25s, border-color .25s;
}
.plan:hover { transform: translateY(-6px); }
.plan.featured {
  border-color: var(--gold-bd);
  background: linear-gradient(180deg, var(--gold-bg), var(--bg3) 45%);
  position: relative;
}
.plan .badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #17110A; font-size: 11px; font-weight: 700;
  padding: 4px 13px; border-radius: 999px;
}
.plan h3 { font-size: 18px; margin: 0 0 4px; font-weight: 700; }
.plan .price { font-size: 32px; font-weight: 800; margin: 10px 0 20px; font-variant-numeric: tabular-nums; }
.plan .price span { font-size: 13px; font-weight: 500; color: var(--txt3); }
.plan ul { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.plan li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--txt2); padding: 7px 0; }
.plan li::before { content: "✓"; color: var(--green); font-weight: 700; }

/* ── FAQ (acordeón) ───────────────────────────────────────────── */
.faq { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--txt); font-size: 15.5px; font-weight: 700; font-family: inherit;
  padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-q .plus { color: var(--gold-txt); font-size: 18px; transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a p { color: var(--txt2); font-size: 14px; margin: 0 0 20px; }

/* ── Contact ──────────────────────────────────────────────────── */
.contact-box {
  max-width: 580px; margin: 0 auto;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 18px;
  padding: 40px 32px; text-align: center;
}
.contact-box .icon-big {
  width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 14px; background: var(--gold-bg); border: 1px solid var(--gold-bd);
  display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--gold-txt);
}
.contact-box h3 { font-size: 19px; margin: 0 0 8px; }
.contact-box p { color: var(--txt2); font-size: 14px; margin: 0 0 22px; }

/* ── CTA banner ───────────────────────────────────────────────── */
.cta-banner {
  background: radial-gradient(ellipse 80% 100% at 50% 0%, var(--gold-bg), var(--bg3) 60%);
  border: 1px solid var(--gold-bd); border-radius: 24px;
  padding: 64px 32px; text-align: center;
}
.cta-banner h2 { font-size: 30px; line-height: 1.2; margin: 0 0 14px; font-weight: 800; }
.cta-banner p { color: var(--txt2); margin: 0 0 28px; font-size: 15.5px; }

/* ── Footer ───────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--border); padding: 40px 0; color: var(--txt3); font-size: 13px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-links { display: flex; gap: 22px; }
.footer-links a:hover { color: var(--gold-txt); }

.disclaimer { color: var(--txt3); font-size: 12px; text-align: center; max-width: 640px; margin: 14px auto 0; }

/* ── Lightbox -- clic en cualquier captura real de la app la amplía
   completa (ver assets/animations.js, sección 16). .zoomable es la
   captura clicable dentro de su tarjeta; .lightbox-overlay es el fondo
   que cubre toda la pantalla mientras está abierta. ── */
.mock-body img.zoomable { cursor: zoom-in; transition: filter .2s ease; }
.mock-body img.zoomable:hover, .mock-body img.zoomable:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 40px;
  background: rgba(8,9,12,.92); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: min(1400px, 92vw); max-height: 80vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px; border: 1px solid var(--border2);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.7);
  cursor: zoom-out;
}
.lightbox-caption { color: var(--txt2); font-size: 13.5px; text-align: center; max-width: 700px; }
.lightbox-close {
  position: absolute; top: 22px; right: 26px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border2); color: var(--txt);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.lightbox-close:hover { background: var(--bg4); transform: scale(1.06); }
body.lightbox-abierto { overflow: hidden; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 150px; }
  .bento, .grid, .pricing-grid { grid-template-columns: 1fr; }
  .bento .card, .bento .card.w3, .bento .card.w4, .bento .card.w6 { grid-column: span 1; }
  .showcase, .showcase.reverse { grid-template-columns: 1fr; }
  .showcase.reverse .showcase-media { order: 0; }
  .mini-mock-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero h1 { font-size: 38px; }
  section { padding: 84px 0; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: fixed; top: 68px; left: 0; right: 0;
    background: var(--bg2); border-bottom: 1px solid var(--border);
    padding: 18px 24px; gap: 18px; z-index: 90;
  }
  .cursor-dot, .cursor-ring { display: none; }
  body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee { animation: none; }
  html { scroll-behavior: auto; }
}