/* Outfit empaquetado localmente (OFL, ver landing/fonts/OFL.txt) para que la
   landing cargue rápido y no dependa de Google Fonts. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/outfit-100.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/outfit-700.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/outfit-800.woff2') format('woff2'); }

:root {
  --bg: #04050a;
  --glass-bg: rgba(13, 17, 30, 0.56);
  --glass-border: rgba(255, 255, 255, 0.1);
  --border: #252c3b;
  --text: #ffffff;
  --text-primary: #f3f3f3;
  --text-secondary: #8e9bb0;
  --accent: #00f5ff;
  --accent-ink: #04050a;
  --font-display: 'Outfit', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Outfit', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Beats the UA `[hidden]{display:none}` rule against same-specificity
   `display` declarations (e.g. `.link-action{display:inline-flex}`) that
   would otherwise win by source order and show a `hidden` element. */
[hidden] { display: none !important; }

/* ---------- Liquid glass ----------
   Apple's "Liquid Glass" (WWDC 2025) refracts whatever sits behind the panel
   and catches a specular highlight at the top edge, as if lit from above.
   The refraction itself (feTurbulence + feDisplacementMap as a
   `backdrop-filter: url(#liquidGlass)`) isn't in the CSS spec and, tested
   live, it doesn't just fail to degrade gracefully on non-Chromium engines —
   it corrupted the compositor here even in Chromium (whole sections went
   solid black and stayed that way after the filter was removed). Given that,
   this sticks to the part that's actually stable everywhere: blur + saturate
   + a bright top rim to read as glass catching light from above. */
.glass-panel {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 50%),
    rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 20px 40px rgba(0, 0, 0, 0.35);
}

img { max-width: 100%; display: block; }

/* `absolute`, not `fixed` — this is a long scrolling page and the 4 blobs
   are spread down its full height (top up to 2820px). A `fixed` wrapper is
   pinned to one viewport-tall box, so anything past that height gets clipped
   by `overflow: hidden` and never shows at any scroll position — `absolute`
   scrolls with the document like everything else. No explicit height/
   overflow here: with only absolutely-positioned children an explicit
   height wouldn't auto-size anyway, and body's own overflow-x already
   clips the horizontal overhang. */
.bg-glow { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; }

/* Motion lives entirely in script.js: a continuous sine-wave wander per axis
   (never stops, never jumps) plus a same-polarity repulsion from the cursor,
   summed into one `transform: translate()` per frame. Nothing here animates
   `left`/`top` — those only set each blob's base position; script.js reads
   it once via getBoundingClientRect (with the transform reset) and re-reads
   it on resize. */
.glow {
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Size follows viewport width (80vw, square) instead of a fixed px, so the
   blobs scale with the window. `top` stays in px — it's each blob's depth
   down the long page (scroll position), not related to width. `left`/
   `right` are in vw too, at the same ratio to width they had before, so the
   fraction that bleeds off-screen stays the same at any width. */
.glow-1 { left: -22.6vw; top: -260px; width: 80vw; height: 80vw; background-image: url(images/ambient-glow-cyan.webp); opacity: .7; }
.glow-2 { right: -24.8vw; top: 620px; width: 80vw; height: 80vw; background-image: url(images/ambient-glow-purple.webp); opacity: .7; }
.glow-3 { left: -20.5vw; top: 1720px; width: 80vw; height: 80vw; background-image: url(images/ambient-glow-blue.webp); opacity: .7; }
.glow-4 { right: -22.4vw; top: 2820px; width: 80vw; height: 80vw; background-image: url(images/ambient-glow-cyan.webp); opacity: .7; }

.wrap { position: relative; z-index: 1; max-width: 1512px; margin: 0 auto; padding: 0 160px; }

/* ---------- Navegación ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 0 18px;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 44px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link { font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--text-primary); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 16px 24px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn-outline:hover { background: rgba(0, 245, 255, 0.08); }

.link-action {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-action:hover { color: var(--text); }

/* ---------- Hero ---------- */
.hero {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 88px 0;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 460px; flex-shrink: 0; }
.eyebrow { margin: 0; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.hero-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.03; letter-spacing: -0.03em; color: var(--text); }
.hero-title .accent { color: var(--accent); }
.hero-desc { margin: 0; font-size: 17px; line-height: 1.45; color: var(--text-secondary); max-width: 440px; }
.hero-note { margin: 0; font-size: 12px; color: var(--text-secondary); }
.hero-visual { flex: 1; min-width: 0; display: flex; justify-content: center; }
.hero-visual img { width: 100%; max-width: 694px; height: auto; border-radius: 32px; }

/* ---------- Formatos compatibles ---------- */
.formats-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  background: var(--glass-bg);
  border-radius: 24px;
  padding: 24px;
  max-width: 917px;
  margin: 0 0 88px;
}
.formats-label { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 11px; color: var(--text-secondary); flex-basis: 100%; max-width: 310px; }
.formats-bar .format { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--text); }

/* ---------- Secciones genéricas ---------- */
section { padding-bottom: 88px; }
.section-eyebrow { margin: 0 0 20px; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--accent); }
.section-title { margin: 0 0 20px; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.2; color: var(--text); }
.section-desc { margin: 0 0 20px; font-size: 17px; line-height: 1.45; color: var(--text-secondary); }

/* ---------- Beneficios ---------- */
.benefits-title { margin: 0 0 28px; font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1.2; color: var(--text); }
.benefit-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.benefit-card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
.benefit-card img { width: 32px; height: 32px; }
.benefit-tag { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 11px; color: var(--accent); }
.benefit-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--text); }
.benefit-desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* ---------- Comparación real ---------- */
.compare-upload { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 8px; }
.compare-upload-btn { cursor: pointer; }
.compare-upload-status { font-size: 13px; color: var(--text-secondary); }
.compare-upload-note { margin: 0 0 24px; font-size: 12px; color: var(--text-secondary); }

.compare-files { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.compare-files .before { color: var(--text); }
.compare-files .after { color: var(--accent); text-align: right; }

.compare-frame {
  position: relative;
  width: 100%;
  padding-top: 45.3020134228%; /* 540 / 1192 */
  border-radius: 20px;
  overflow: hidden;
  background: #0a0d16;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}
.compare-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-frame .after-layer { clip-path: inset(0 0 0 var(--split, 50%)); }
.compare-divider { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; background: var(--accent); transform: translateX(-1px); pointer-events: none; }
.compare-handle {
  position: absolute;
  top: 50%;
  left: var(--split, 50%);
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #042328;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  pointer-events: none;
}
.compare-caption { margin: 20px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }

/* ---------- Casos de uso ---------- */
.usecase-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.usecase-card {
  flex: 1 1 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 32px;
}
.usecase-tag { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 11px; color: var(--accent); }
.usecase-scene { position: relative; width: 100%; height: 270px; border-radius: 18px; overflow: hidden; }
.usecase-scene.designer { background: linear-gradient(90deg, #331f57, #080d17); }
.usecase-scene.store { background: linear-gradient(90deg, #0f4745, #080d17); }

.poster-card {
  position: absolute;
  left: 38px;
  top: 20px;
  width: 240px;
  height: 290px;
  border-radius: 8px;
  overflow: hidden;
  transform: rotate(-7deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
}
.poster-card img { width: 100%; height: 100%; object-fit: cover; }
.poster-card span {
  position: absolute;
  left: 18px;
  top: 17px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 33px;
  line-height: .95;
  color: #fff;
}
.exports-panel {
  position: absolute;
  left: 266px;
  top: 57px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 12px;
  background: #17182b;
  border: 1px solid #635a82;
}
.exports-panel .label { margin: 0; font-size: 10px; color: #bcadd8; }
.exports-panel .file { margin: 0; font-size: 18px; color: #fff; }
.exports-panel .status { margin: 0; font-size: 11px; color: var(--accent); }

.catalog-panel {
  position: absolute;
  left: 34px;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 12px;
  background: #e9f2ed;
}
.catalog-panel .label { margin: 0; font-size: 12px; color: #173732; white-space: pre; }
.catalog-thumbs { display: flex; gap: 10px; }
.catalog-thumbs img { width: 96px; height: 106px; border-radius: 5px; object-fit: cover; }
.catalog-panel .caption { margin: 0; font-size: 11px; color: #173732; }
.catalog-badge {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 12px 18px;
  border-radius: 20px;
  background: var(--accent);
  color: #042328;
  font-size: 12px;
}

.usecase-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--text); }
.usecase-desc { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.usecase-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text); }

/* ---------- Cómo funciona ---------- */
.howto { display: flex; gap: 56px; flex-wrap: wrap; }
.howto-title { flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.howto-title h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 1.2; color: var(--text); }
.howto-title p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.howto-steps { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 28px; }
.howto-step h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--text); }
.howto-step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* ---------- Tu flujo, a tu manera ---------- */
.quality-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.quality-card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
.quality-card .num { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 11px; color: var(--accent); }
.quality-card h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--text); }
.quality-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* ---------- Preguntas frecuentes ---------- */
.faq { display: flex; gap: 48px; flex-wrap: wrap; }
.faq-title { flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; max-width: 352px; }
.faq-title h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 1.2; color: var(--text); }
.faq-title p { margin: 0; font-size: 16px; color: var(--text-secondary); }
.faq-list { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 24px; }
.faq-item { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-item h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text); }
.faq-item p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

/* ---------- Descarga ---------- */
.cta-download { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 48px 0 88px; }
.cta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 420px; }
.cta-copy h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 4.6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.cta-copy .lede { margin: 0; font-size: 17px; color: #b0bdd0; }
.cta-copy .fine { margin: 0; font-size: 12px; color: #b0bdd0; }
.cta-visual { flex: 1; min-width: 280px; display: flex; justify-content: center; }
.cta-visual img { width: 100%; max-width: 630px; height: auto; }

/* ---------- Pie de página ---------- */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 32px 0 64px; }
.site-footer p { margin: 0; font-size: 12px; color: var(--text-secondary); }
.footer-link { font-size: 13px; color: var(--accent); text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

/* ---------- Soporte ---------- */
.support-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 88px 0 56px; max-width: 850px; }
.support-hero .hero-title { width: auto; }
.support-hero .hero-desc { max-width: 850px; }

.steps-title { margin: 0 0 28px; font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--text); }
.steps-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.step-card { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.step-num { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--accent); }
.step-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--text); }
.step-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

.support-contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 32px; }
.support-contact-info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 480px; }
.support-contact-info h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 30px; color: var(--text); }
.support-contact-info p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.support-email { color: var(--accent); font-size: 13px; text-decoration: none; }
.support-email:hover { text-decoration: underline; }

/* Same system as the landing's 4 blobs, just repositioned for this
   page's shorter scroll height (see landing's .glow-1..4 comment). */
.glow-s1 { left: -22.6vw; top: -220px; width: 80vw; height: 80vw; background-image: url(images/ambient-glow-cyan.webp); opacity: .7; }
.glow-s2 { right: -24.8vw; top: 680px; width: 80vw; height: 80vw; background-image: url(images/ambient-glow-purple.webp); opacity: .7; }
.glow-s3 { left: -20.5vw; top: 1550px; width: 80vw; height: 80vw; background-image: url(images/ambient-glow-blue.webp); opacity: .7; }

@media (max-width: 1280px) {
  .wrap { padding: 0 64px; }
}

@media (max-width: 860px) {
  .wrap { padding: 0 24px; }
  .nav-links { gap: 16px; }
  .nav-links .nav-link { display: none; }
  .hero { flex-direction: column; align-items: stretch; padding: 56px 0; gap: 40px; }
  .hero-copy { max-width: none; }
  .hero-desc, .hero-title { max-width: none; }
  .compare-files { font-size: 13px; }
  .howto, .faq { gap: 32px; }
  .cta-download { flex-direction: column; text-align: left; }
  .poster-card { left: 16px; width: 190px; height: 230px; }
  .exports-panel { left: 200px; padding: 14px; }
  .usecase-scene { height: 320px; }
  .support-contact { flex-direction: column; align-items: flex-start; gap: 24px; }
}

@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .nav { padding: 24px 0 16px; flex-wrap: wrap; row-gap: 16px; }
  .nav-links .btn { padding: 10px 16px; font-size: 13px; }
  .brand-logo { height: 34px; }
  .usecase-scene.designer .poster-card { position: static; transform: none; width: 100%; height: 200px; }
  .usecase-scene.designer .exports-panel { position: static; margin-top: 12px; }
  .usecase-scene.designer { height: auto; padding: 16px; display: flex; flex-direction: column; }
  .usecase-scene.store { height: auto; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .catalog-panel { position: static; width: 100%; }
  .catalog-panel .label { white-space: normal; }
  .catalog-thumbs { flex-wrap: wrap; }
  .catalog-thumbs img { width: calc(33.333% - 7px); height: auto; aspect-ratio: 122 / 135; }
  .catalog-badge { position: static; align-self: flex-start; }
}