:root {
  /* Tells the browser this page is dark-themed, so native controls it draws itself —
     <select> option popups, checkboxes, date pickers — use dark OS colors instead of the
     light-mode default (white background, barely-visible light text). */
  color-scheme: dark;
  --bg: #050712;
  --bg-soft: #0b1020;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-strong: rgba(255, 255, 255, 0.09);
  --text: #f7f7fb;
  --muted: #a9b0c3;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #8b5cf6;
  --accent-2: #22d3ee;
  --purple: #8b5cf6;
  --blue: #22d3ee;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { scroll-padding-top: 6rem; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top left, rgba(139, 92, 246, 0.24), transparent 32rem),
              radial-gradient(circle at top right, rgba(34, 211, 238, 0.16), transparent 28rem),
              var(--bg);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 75%);
}
.orb {
  position: fixed;
  width: 28rem;
  height: 28rem;
  border-radius: 999px;
  filter: blur(80px);
  opacity: .35;
  pointer-events: none;
}
.orb-one { left: -8rem; top: 8rem; background: var(--accent); }
.orb-two { right: -8rem; top: 26rem; background: var(--accent-2); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: .9rem 1.25rem;
  backdrop-filter: blur(18px);
}
.brand, .nav, .language-links { display: flex; align-items: center; }
.brand { gap: .7rem; font-weight: 800; letter-spacing: -.02em; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.nav { gap: 1rem; color: var(--muted); font-size: .95rem; }
.nav a:hover, .language-links a:hover { color: var(--text); }
.language-links { gap: .5rem; color: var(--muted); font-size: .82rem; }
.language-links a { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); }

.section { position: relative; max-width: 1120px; margin: 0 auto; padding: 3.6rem 1.25rem; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr); gap: 3rem; align-items: center; min-height: 68vh; padding-top: 4.2rem; }
.eyebrow { margin: 0 0 .8rem; color: var(--accent-2); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.55rem, 6.5vw, 5.5rem); line-height: .92; letter-spacing: -.07em; margin-bottom: 1.1rem; }
.hero-copy h1 { font-size: clamp(2.3rem, 5.4vw, 4.8rem); }
.hero > .eyebrow { grid-column: 1 / -1; margin-bottom: .4rem; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.045em; margin-bottom: 1rem; }
h3 { margin-bottom: .45rem; }
p { color: var(--muted); line-height: 1.7; }
.hero-text { font-size: 1.16rem; max-width: 660px; }
.actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 1.45rem 0 .85rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .85rem 1.15rem; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-weight: 800; transition: transform .2s ease, border-color .2s ease, opacity .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: white; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 18px 45px rgba(34, 211, 238, .18); }
.btn-secondary { background: rgba(255,255,255,.05); color: var(--text); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.note { font-size: .94rem; }

.hero-card, .panel, .video-card, details {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  box-shadow: var(--shadow);
  border-radius: 32px;
}
.hero-card { padding: 1.6rem; min-height: 390px; display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; overflow: hidden; }
.logo-stage { display: grid; place-items: center; min-height: 235px; border-radius: 28px; background: radial-gradient(circle, rgba(139,92,246,.18), rgba(34,211,238,.08), transparent 68%); }
.logo-stage img { width: min(72%, 270px); height: auto; filter: drop-shadow(0 25px 55px rgba(139, 92, 246, .28)); }
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.steps span { padding: .7rem .75rem; border-radius: 18px; background: rgba(255,255,255,.06); color: var(--muted); text-align: center; font-size: .88rem; }
.step-features { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.step-features span { padding: .3rem .65rem; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); color: var(--muted); font-size: .82rem; }
.panel { padding: 2rem; }
/* Cuando .panel va en el propio <section> (no anidado dentro), su padding (2rem)
   sustituye al de .section (3.6rem) por venir después en la cascada con la misma
   especificidad — dos secciones .section.panel consecutivas quedan con sus cajas
   tocándose sin hueco visible entre ellas. Separación explícita para ese caso. */
.section.panel { margin-bottom: 1.75rem; }
/* #download is the only section that IS a .panel itself (others nest a .panel
   inside a plain .section), so its visible border/background box sits flush
   with the viewport/max-width edge instead of inset by the section's 1.25rem
   side padding like every other boxed panel. Padding alone can't fix that —
   it only pads the inside of a box, not how wide the box itself is — so we
   shrink the box (and re-center it) by that same 1.25rem on each side. */
#download.panel {
  width: calc(100% - 2.5rem);
  max-width: calc(1120px - 2.5rem);
  margin: 0 auto;
  padding: 2rem;
}
.split-panel, .support-grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.section-head { max-width: 780px; margin-bottom: 2rem; }
.section-head h2 { text-wrap: balance; }
.video-list { display: grid; gap: 1rem; }
.video-card { display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; align-items: center; padding: 1rem; transition: transform .2s ease, border-color .2s ease; }
.video-card:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, .4); }
/* La tarjeta entera es el enlace (ver recorrido-completo) — "Ver la guía completa" ya
   no es un <a> propio (no puede haber un enlace dentro de otro enlace), solo el trozo
   de texto que sigue pareciendo la llamada a la acción dentro de la tarjeta. */
.video-card .link-inline { color: var(--accent-2); font-weight: 700; }
.video-placeholder { min-height: 130px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(34,211,238,.14)); border: 1px solid var(--line); }
.video-placeholder--thumb { background: linear-gradient(180deg, rgba(5,7,18,.3), rgba(5,7,18,.78)), url(/assets/escenas/escena-04.webp?v=20261026) center / contain no-repeat, linear-gradient(135deg, rgba(139,92,246,.22), rgba(34,211,238,.14)); }
.video-placeholder--thumb small { position: absolute; left: 0; right: 0; bottom: .9rem; text-align: center; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.video-placeholder span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.12); }

/* Vídeo resumen (home) + landing pages de vídeo individuales */
/* Sin margin-bottom: es lo último dentro de "Tutoriales" en la home, así que ese
   margen solo se sumaba al padding-bottom de .section, dejando el hueco hasta
   "Precios" más grande que entre cualquier otro par de secciones del sitio. */
/* Vídeo a la derecha (order:2) para alternar con la tarjeta de funcionalidades, cuyo móvil va a la izquierda. */
.video-hero { display: grid; grid-template-columns: 1fr minmax(280px, .85fr); gap: 1.75rem; align-items: center; padding: 1.5rem; }
.video-hero .yt-embed { order: 2; }
.video-hero .video-placeholder--hero { min-height: 220px; }
.video-hero-copy .btn { margin-top: .9rem; }
/* Vídeo a la derecha en pantallas anchas; en estrechas, debajo del texto. */
@media (max-width: 820px) {
  .video-hero .yt-embed { order: 0; }
}

/* Botones del hero */
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }

/* Cómo funciona: una escena por paso (texto + fragmentos reales de la app, sin rótulos
   dependientes del idioma). Las escenas se animan al entrar en pantalla (main.js: setupStory);
   sin JS o con "reducir movimiento" se ven directamente. */
.story-scenes { display: grid; gap: 1.5rem; }
.scene { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 3rem; align-items: center; padding: 1.5rem 0; }
.scene--flip { grid-template-columns: 1fr minmax(240px, 340px); }
.scene--flip .scene-copy { order: 2; }
.scene-copy { max-width: 520px; }
.scene-num { display: inline-block; margin-bottom: .4rem; font-size: 2.6rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scene-copy h3 { margin: 0 0 .5rem; font-size: 1.7rem; }
.scene-copy p { margin: 0; font-size: 1.05rem; }
.flow-more { display: inline-block; margin-top: .9rem; font-size: .9rem; font-weight: 700; color: var(--accent-2); }
.scene-stage { position: relative; display: grid; place-items: center; }
.scene-stage::before { content: ""; position: absolute; inset: 6% 2%; z-index: 0; border-radius: 40px; background: radial-gradient(closest-side, rgba(139,92,246,.22), rgba(34,211,238,.08) 62%, transparent); filter: blur(28px); }
.story-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 40px rgba(0,0,0,.35)); }
.story-svg--narrow { max-width: 520px; }
.story-svg .st-card { filter: drop-shadow(0 16px 30px rgba(0,0,0,.4)); }
.st-hl { fill: rgba(34, 211, 238, .12); stroke: #22d3ee; stroke-width: 3; }
.st-conn { fill: none; stroke: #22d3ee; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; }
.st-warn-box { fill: rgba(245, 158, 11, .08); stroke: #f59e0b; stroke-width: 2.5; stroke-dasharray: 8 6; }
.st-arrow { fill: none; stroke: #22d3ee; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.st-env { color: #22d3ee; }
@media (max-width: 820px) {
  .scene, .scene--flip { grid-template-columns: 1fr; gap: 1.5rem; }
  .scene--flip .scene-copy { order: 0; }
  .scene-copy h3 { font-size: 1.45rem; }
}

/* Estados iniciales de la animación: solo si main.js añade .story-anim (nunca sin JS) */
.story-anim .scene-copy, .story-anim .scene-stage { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.story-anim .scene-stage { transition-delay: .12s; }
.story-anim .scene.is-in .scene-copy, .story-anim .scene.is-in .scene-stage { opacity: 1; transform: none; }
.story-anim .st-fade { opacity: 0; transition: opacity .6s ease var(--d, 0s); }
.story-anim .st-line { stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease var(--d, .6s); }
.story-anim .st-pop { opacity: 0; transform: scale(.7); transform-box: fill-box; transform-origin: center; transition: opacity .45s ease var(--d, 0s), transform .55s cubic-bezier(.2, 1.4, .4, 1) var(--d, 0s); }
.story-anim .scene.is-in .st-fade { opacity: 1; }
.story-anim .scene.is-in .st-line { stroke-dashoffset: 0; }
.story-anim .scene.is-in .st-pop { opacity: 1; transform: none; }
/* Caja de proporción 16:9 — cuando se sustituye video-placeholder por un <iframe> de
   YouTube, el iframe se posiciona absolute dentro de este contenedor para mantener la
   proporción sin que el vídeo cambie de tamaño al cargar. */
.yt-embed { position: relative; width: 100%; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.yt-embed::before { content: ""; display: block; padding-top: 56.25%; }
.yt-embed .video-placeholder { position: absolute; inset: 0; min-height: 0; border-radius: 0; border: none; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-page-hero { max-width: 760px; margin: 0 auto 2rem; text-align: center; }
.video-page-hero .yt-embed { max-width: 860px; margin: 1.75rem auto 0; text-align: left; }
.video-page-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 1.75rem; }
.checklist { display: grid; gap: .65rem; padding: 0; margin: 0; list-style: none; }
/* Antes .checklist li era display:flex con el ✓ como un hijo y el <strong>+texto como
   otros — un <strong> seguido de texto suelto dentro de un flex container se trata
   como DOS flex items independientes, no como un párrafo continuo. Con una etiqueta en
   negrita corta no se nota, pero en cuanto la negrita necesita dos líneas (p. ej. "Se
   adapta al documento:"), el texto que sigue se coloca en su propia "columna" en vez de
   fluir justo después. Position:absolute en el ✓ + padding-left en el <li> deja que todo
   el contenido fluya como un párrafo normal, con sangría francesa correcta al envolver. */
.checklist li { position: relative; padding-left: 2.15rem; color: var(--muted); line-height: 1.6; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 999px; background: rgba(34,211,238,.14); color: var(--accent-2); font-size: .78rem; font-weight: 800; }
.related-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.related-videos a { display: block; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.04); transition: border-color .2s ease, transform .2s ease; }
.related-videos a:hover { border-color: rgba(34, 211, 238, .4); transform: translateY(-2px); }
.related-videos strong { display: block; margin-bottom: .3rem; color: var(--text); }
.related-videos span { font-size: .86rem; color: var(--muted); }

@media (max-width: 820px) {
  .video-hero { grid-template-columns: 1fr; }
}
.support-grid { grid-template-columns: .9fr 1.1fr; }
.support-form { display: grid; gap: .85rem; }
.support-form input, .support-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 18px; background: rgba(5, 7, 18, .54); color: var(--text); padding: 1rem; outline: none; }
.support-form input:focus, .support-form textarea:focus { border-color: rgba(34, 211, 238, .55); }
.form-status { display: none; margin: 0; font-size: .92rem; color: var(--accent-2); }
.form-status.is-visible { display: block; }
.form-status.error { color: #f97316; }
.api-status { display: block; margin-top: .45rem; color: var(--muted); font-size: .86rem; }
.auth-status { display: block; margin-top: .2rem; color: var(--muted); font-size: .82rem; }
.faq { display: grid; gap: .9rem; }
details { padding: 1.15rem 1.25rem; }
summary { cursor: pointer; font-weight: 800; }
details p { margin: .8rem 0 0; }
.footer { max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); border-top: 1px solid var(--line); }
.footer div { display: flex; gap: 1rem; }

.redirect-page { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 1rem; padding: 2rem; text-align: center; }
.redirect-logo { width: 96px; height: auto; }

.legal-page { max-width: 880px; margin: 0 auto; padding: 5rem 1.25rem; }
.legal-page h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.legal-page section { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1.5rem; }
.legal-page a { color: var(--accent-2); }

@media (max-width: 820px) {
  .site-header { flex-wrap: wrap; }
  .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: .25rem; }
  .hero, .split-panel, .support-grid, .video-card { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 3rem; }
  .hero-card { min-height: auto; }
  .footer { flex-direction: column; }
}

/* Admin placeholder */
.admin-page {
  min-height: 100vh;
}
.admin-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 24px;
}
.admin-card {
  text-align: center;
}
.admin-logo {
  width: 84px;
  height: auto;
  margin-bottom: 18px;
}


/* SaaS app/admin mockups v9 */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.app-sidebar { border-right: 1px solid var(--line); background: rgba(255,255,255,.035); padding: 1.1rem; position: sticky; top:0; height:100vh; }
.app-main { padding: 1.25rem; }
.app-topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.app-brand { display:flex; align-items:center; gap:.75rem; font-weight:900; margin-bottom:1.5rem; }
.app-brand img { width:38px; height:38px; object-fit:contain; }
.app-nav { display:grid; gap:.45rem; }
.app-nav a { color:var(--muted); padding:.75rem .85rem; border-radius:16px; border:1px solid transparent; }
.app-nav a:hover, .app-nav a.active { color:var(--text); background:rgba(255,255,255,.065); border-color:var(--line); }
.app-nav-divider { height:1px; background:var(--line); margin:.5rem .3rem; }
.app-nav-label { margin:0 .85rem .1rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); opacity:.7; }
.app-nav a.app-nav-preview { font-size:.88rem; padding:.55rem .85rem; opacity:.75; }
.app-nav a.app-nav-preview:hover, .app-nav a.app-nav-preview.active { opacity:1; }
.app-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:1rem; }
.metric-card, .data-card, .login-card { border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04)); border-radius:28px; box-shadow:var(--shadow); padding:1.25rem; }
.metric-card { grid-column: span 3; }
.data-card { grid-column: span 12; }
.data-card.half { grid-column: span 6; }
.metric-value { font-size:2rem; font-weight:900; letter-spacing:-.04em; margin:.3rem 0 .15rem; color:var(--text); }
.table { width:100%; border-collapse: collapse; overflow:hidden; }
.table th, .table td { text-align:left; padding:.9rem .7rem; border-bottom:1px solid var(--line); color:var(--muted); }
.table th { color:var(--text); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.status-pill { display:inline-flex; padding:.32rem .6rem; border-radius:999px; font-weight:800; font-size:.78rem; border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.06); }
.status-open { background:rgba(34,211,238,.13); border-color:rgba(34,211,238,.32); }
.status-ok { background:rgba(74,222,128,.13); border-color:rgba(74,222,128,.28); }
.status-warn { background:rgba(251,191,36,.13); border-color:rgba(251,191,36,.28); }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:2rem; }
.login-card { width:min(460px,100%); }
.login-card img { width:60px; height:60px; object-fit:contain; margin-bottom:1rem; }
.form-stack { display:grid; gap:.8rem; margin-top:1.2rem; }
.form-stack input, .form-stack textarea, .form-stack select { width:100%; border:1px solid var(--line); border-radius:16px; background:rgba(5,7,18,.56); color:var(--text); padding:.95rem; outline:none; }
.password-field { position:relative; }
.password-field input { padding-right:2.7rem; }
.password-toggle { position:absolute; top:50%; right:.6rem; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; background:none; border:none; padding:.3rem; margin:0; color:var(--muted); cursor:pointer; line-height:0; }
.password-toggle:hover { color:var(--text); }
.placeholder-notice { border:1px dashed rgba(34,211,238,.38); background:rgba(34,211,238,.06); color:var(--muted); padding:1rem; border-radius:20px; margin-top:1rem; }
.ticket-thread { display:grid; gap:.8rem; }
.message-bubble { padding:.75rem 1rem; border-radius:16px; background:rgba(255,255,255,.055); border:1px solid var(--line); min-width:0; max-width:100%; box-sizing:border-box; }
.message-bubble.support { background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.3); }
.table tr[data-code]:hover td { background:rgba(255,255,255,.04); }
.table tr.selected td { background:rgba(139,92,246,.12); }
@media (max-width: 900px){ .app-shell{grid-template-columns:1fr}.app-sidebar{position:relative;height:auto}.metric-card,.data-card.half{grid-column:span 12}.app-grid{grid-template-columns:1fr}.app-topbar{align-items:flex-start; flex-direction:column}.table{font-size:.9rem} }

/* v11 visible SaaS prototype refinements */
.app-top-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.mock-note{border:1px solid rgba(139,92,246,.22);background:rgba(139,92,246,.08);border-radius:18px;padding:.9rem 1rem;color:var(--muted);margin-top:1rem}
.timeline{display:grid;gap:.8rem;margin-top:1rem}.timeline-item{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}
.dot{width:10px;height:10px;border-radius:99px;background:linear-gradient(135deg,var(--purple),var(--blue));margin-top:.45rem;box-shadow:0 0 22px rgba(139,92,246,.65)}
.progress{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.08)}.progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--blue))}
.chart-bars{height:160px;display:flex;align-items:end;gap:.7rem;padding-top:1rem;overflow:visible}.chart-bars span{flex:1;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,rgba(106,92,255,.95),rgba(0,212,255,.45));min-height:22px;position:relative;cursor:default}.chart-bars span[data-label]::after{content:attr(data-label);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:rgba(20,20,40,.95);color:#f7f7fb;font-size:.7rem;white-space:nowrap;padding:3px 7px;border-radius:5px;pointer-events:none;opacity:0;transition:opacity .15s}.chart-bars span[data-label]:hover::after{opacity:1}
.action-list{display:grid;gap:.7rem}.action-row{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.85rem;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}
@media(max-width:700px){.action-row{align-items:flex-start;flex-direction:column}.chart-bars{height:120px}}


/* v12 navigable SaaS prototype */
.app-kicker { color: var(--accent-2); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 900; margin: 0 0 .45rem; }
.page-title { font-size: clamp(2rem, 4vw, 3.9rem); line-height: .95; letter-spacing: -.055em; margin: 0 0 .6rem; }
.app-description { max-width: 720px; }
.card-title-row { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1rem; }
.card-title-row h3 { margin:0; }
.toolbar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin: 0 0 1rem; }
.searchbox { flex: 1; min-width: 220px; border:1px solid var(--line); border-radius:999px; padding:.8rem 1rem; background:rgba(5,7,18,.54); color:var(--text); outline:none; }
.kpi-sub { font-size:.88rem; color:var(--muted); margin:0; }
.plan-card { border:1px solid var(--line); background:rgba(255,255,255,.045); border-radius:24px; padding:1rem; }
.plan-card strong { display:block; margin-bottom:.25rem; }
.reads-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.read-rule { border:1px solid var(--line); border-radius:22px; padding:1rem; background:rgba(255,255,255,.04); }
.read-rule .metric-value { font-size:1.7rem; }
.side-panel { grid-column: span 4; }
.main-panel { grid-column: span 8; }
.side-panel.expanded { grid-column: span 12; }
.user-avatar { width:34px; height:34px; border-radius:999px; display:inline-grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; font-weight:900; margin-right:.5rem; }
.sidebar-footer { margin-top: 1.5rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; }
@media(max-width: 900px){ .side-panel,.main-panel{grid-column:span 12}.reads-grid{grid-template-columns:1fr}.card-title-row{align-items:flex-start;flex-direction:column}.toolbar{align-items:stretch}.searchbox{width:100%} }

/* Marketing pricing — matches app/billing aesthetic */
.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
#pricing .plan-card,
#modal-download .plan-card { border-radius:28px; box-shadow:0 4px 24px rgba(0,0,0,.35); padding:1.4rem; display:flex; flex-direction:column; gap:.5rem; border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.04)); }
#pricing .plan-card--featured,
#modal-download .plan-card--featured { border:1.5px solid rgba(129,140,248,.7); background:linear-gradient(180deg,rgba(129,140,248,.1),rgba(129,140,248,.04)); }
.plan-badge { align-self:flex-start; background:linear-gradient(135deg,#818cf8,#6366f1); color:#fff; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; padding:.2rem .7rem; border-radius:20px; margin-bottom:.1rem; }
.plan-icon { font-size:1.4rem; margin:0; line-height:1; }
.plans-cta { margin:1.5rem 0 0; text-align:center; }
.plan-name { margin:0; font-size:1rem; font-weight:700; }
.plan-price { margin:0; font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.plan-period { font-size:.85rem; font-weight:400; color:var(--muted,#888); }
.plan-reads { margin:0; font-size:.85rem; color:var(--muted,#888); }
.plan-desc { margin:0; font-size:.84rem; color:var(--muted,#888); flex:1; }
#pricing .btn-plan, #modal-download .btn-plan { margin-top:.3rem; }
@media(max-width:800px){ .plans-grid{ grid-template-columns:1fr; } }

/* Banner de prueba gratuita — encima de las tarjetas de plan (pricing_trial_*) */
.trial-banner{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem 1.5rem; margin:0 0 1.35rem; padding:1.1rem 1.4rem; border:1.5px solid rgba(129,140,248,.55); border-radius:24px; background:linear-gradient(135deg,rgba(129,140,248,.16),rgba(34,211,238,.08)); }
.trial-banner-title{ margin:0; font-size:1.08rem; font-weight:800; letter-spacing:-.01em; color:var(--text); white-space:nowrap; }
.trial-banner-text{ margin:0; max-width:660px; font-size:.92rem; line-height:1.45; color:var(--muted); }
.trial-banner-cta{ align-self:center; white-space:nowrap; text-align:center; }
@media(max-width:800px){ .trial-banner{ flex-direction:column; align-items:flex-start; gap:.4rem; } .trial-banner-title{ white-space:normal; } }

/* Escenas del vídeo promocional (assets/escenas, generadas con kulram-video/escenas/tools/web.mjs).
   Se ve el WebP fijo; al entrar en pantalla, main.js (setupScenes) carga encima el SVG animado,
   que se reproduce solo y en bucle. Con "reducir movimiento" o sin JS se queda la imagen fija. */
.kscene { position: relative; z-index: 1; margin: 0; width: 100%; aspect-ratio: 16 / 9; }
.kscene img, .kscene object { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* color-scheme: normal = el mismo que el SVG incrustado; si no coinciden, el navegador le pinta un fondo opaco. */
.kscene object { pointer-events: none; opacity: 0; transition: opacity .35s ease; color-scheme: normal; }
.kscene.is-live object { opacity: 1; }
.kscene.is-live img { opacity: 0; transition: opacity .35s ease .15s; }
/* Siempre en una fila: con muchas miniaturas, se encogen en vez de dejar una suelta abajo. */
.kthumbs { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; justify-content: center; gap: .5rem; margin-top: .4rem; }
.kthumb { position: relative; flex: 0 1 92px; min-width: 0; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); cursor: pointer; overflow: hidden; opacity: .6; transition: opacity .2s ease, border-color .2s ease; }
.kthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kthumb:hover, .kthumb.is-active { opacity: 1; border-color: rgba(34, 211, 238, .55); }
.kthumb:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; opacity: 1; }
/* Play: fijo en la miniatura activa (la que se ve en grande) y al pasar por las demás, para que se vea que se pulsan. */
.kthumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%) scale(.8); border-radius: 999px; background: rgba(5,7,18,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%2322d3ee'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 0 0 1.5px rgba(34,211,238,.7); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.kthumb.is-active::after, .kthumb:hover::after, .kthumb:focus-visible::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Pie de la escena grande: lo que se está viendo. Líneas de largo parecido (balance). */
.kscene-cap { position: relative; z-index: 1; max-width: 34rem; min-height: 1.5em; margin: .5rem auto 0; text-align: center; text-wrap: balance; color: var(--text); font-weight: 700; font-size: 1rem; line-height: 1.45; transition: opacity .3s ease; }
.kscene-cap.is-changing { opacity: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Logo de la portada: aparece una sola vez (el halo se enciende, el logo se enfoca) y se queda quieto. */
/* El halo ocupa toda la tarjeta (por detrás del logo y de las pastillas), sin caja propia del logo. */
.hero-card--glow { position: relative; isolation: isolate; }
.logo-stage--live { background: none; }
.hero-card--glow .steps span { position: relative; background: rgba(5,7,18,.35); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); color: var(--text); }
.logo-halo { position: absolute; z-index: -1; left: 50%; top: 40%; translate: -50% -50%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 200deg, rgba(139,92,246,.6), rgba(34,211,238,.28), rgba(139,92,246,.1) 55%, rgba(34,211,238,.22), rgba(139,92,246,.6)); filter: blur(40px); opacity: .45; animation: logo-halo-in 1.4s ease-out both; }
.logo-stage--live img { width: min(56%, 220px); animation: logo-in 1.1s cubic-bezier(.2, .8, .2, 1) .25s both; }
@keyframes logo-halo-in { from { opacity: 0; transform: scale(.55) rotate(-60deg); } }
@keyframes logo-in { from { opacity: 0; transform: scale(.82); filter: blur(10px) drop-shadow(0 25px 55px rgba(139, 92, 246, 0)); } }
@media (prefers-reduced-motion: reduce) {
  .logo-halo, .logo-stage--live img { animation: none; }
}
.steps--six { grid-template-columns: repeat(3, 1fr); }
.scene { grid-template-columns: minmax(240px, 380px) 1fr; }
.scene--flip { grid-template-columns: 1fr minmax(240px, 380px); }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1.25rem; }
.feature-card { display: grid; gap: .55rem; padding: .7rem .7rem .85rem; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(255,255,255,.035); }
/* Sin fondo propio: la escena (WebP transparente) se funde con la tarjeta. */
.feature-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.feature-card span { color: var(--text); font-size: .9rem; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.band { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.band h2, .guide-row h3, .video-page-hero h1 { text-wrap: balance; }
/* Título en dos frases, cada una en su línea (p. ej. precios: "Empieza gratis." / "Pasa a Pro…"). */
.h2-lines span { display: block; }
.band-copy p { font-size: 1.1rem; }
.plans-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin: 0 auto; }
#pricing .plan-card .checklist { margin-top: .6rem; }
.plans-grid--two .plan-desc { flex: none; }
.plans-extra { max-width: 860px; margin: 1.1rem auto 0; text-align: center; }
.plans-extra p { margin: .2rem 0; font-size: .92rem; }
/* Landings de vídeo: la escena ocupa el sitio del vídeo hasta que esté en YouTube. */
.yt-embed--scene { border-color: transparent; box-shadow: none; overflow: visible; }
.yt-embed--scene .kscene { position: absolute; inset: 0; }
.guide-rows { display: grid; gap: 1.5rem; margin-top: 1rem; }
.guide-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.guide-row:nth-child(even) > :first-child { order: 2; }
.guide-row h3 { margin-bottom: .4rem; }
.guide-row p { margin: 0; }
.video-card .scene-stage::before { display: none; }
@media (max-width: 820px) {
  .guide-row { grid-template-columns: 1fr; gap: .6rem; }
  .guide-row:nth-child(even) > :first-child { order: 0; }
  .band { grid-template-columns: 1fr; gap: 1rem; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-grid--two { grid-template-columns: 1fr; }
  .scene, .scene--flip { grid-template-columns: 1fr; }
  .kthumbs { gap: .35rem; }
}