/* Página de inicio y páginas legales de Zky. Usa las variables de /static/css/tokens.css. */

:root {
  --sub-yellow: #FFE03A;
  --container: 1180px;
  --gutter: 16px;
  --header-h: 64px;
}
@media (min-width: 720px) { :root { --gutter: 24px; } }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { font-size: 16px; line-height: 1.6; overflow-x: clip; }
img, svg { display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { text-decoration: none; }
strong { font-weight: 650; color: var(--text); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.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; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--text); color: var(--bg); font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center;
  cursor: pointer; transition: background-color .2s, border-color .2s, filter .2s, transform .2s;
}
.btn--primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 8px 28px rgba(255, 79, 216, .22), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn--primary:hover { filter: brightness(1.08) saturate(1.05); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: rgba(255, 255, 255, .04); border-color: var(--border); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: #3a3a4a; }
.btn--sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }
.btn--lg { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.btn--block { width: 100%; }

/* ---------- Encabezado ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 15, .72);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--border); background: rgba(11, 11, 15, .86); }
.site-header__inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { border-radius: 9px; }
.brand__name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; gap: 4px; }
.site-nav__list a {
  display: block; padding: 8px 14px; border-radius: var(--r-pill);
  color: var(--text-2); font-size: 15px; font-weight: 500; transition: color .2s, background-color .2s;
}
.site-nav__list a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.site-nav__list a[aria-current="page"] { color: var(--text); }
.site-nav__login { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.menu-btn {
  display: none; width: 40px; height: 40px; padding: 0; place-items: center;
  border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, .04); cursor: pointer;
}
.menu-btn svg path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .25s, opacity .2s; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .menu-btn__top { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__mid { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bot { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 859px) {
  .site-header__login { display: none; }
  .site-header__actions { margin-left: auto; }
  .site-nav { order: 3; width: 100%; margin: 0; }
  .site-header__inner { flex-wrap: wrap; row-gap: 0; }
  /* Sin JavaScript el menú queda visible como una fila de enlaces. */
  .site-nav__list { flex-wrap: wrap; padding-bottom: 8px; }
  .js .menu-btn { display: grid; }
  .js .site-nav { display: none; padding: 4px 0 16px; }
  .js .site-nav.is-open { display: block; animation: nav-in .2s ease-out; }
  .js .site-nav__list { flex-direction: column; gap: 2px; padding-bottom: 0; }
  .js .site-nav__list a { padding: 12px 12px; font-size: 17px; border-radius: 14px; }
  .js .site-nav__login { display: flex; width: 100%; margin-top: 10px; }
}
@media (max-width: 359px) { .brand__name { display: none; } }
@keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 40px 0 72px; overflow: clip; isolation: isolate; }
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(80px);
}
.hero::before { width: 560px; height: 560px; right: -160px; top: 40px; background: radial-gradient(circle, rgba(124, 92, 255, .38), transparent 68%); }
.hero::after { width: 420px; height: 420px; right: 180px; top: 300px; background: radial-gradient(circle, rgba(255, 79, 216, .18), transparent 70%); }
.hero__grid { display: grid; gap: 48px; align-items: center; }
.hero__title {
  font-size: clamp(2.6rem, 1.7rem + 4.4vw, 4.6rem); line-height: 1; font-weight: 800; letter-spacing: -.045em;
  max-width: 11ch; text-wrap: balance;
}
.hero__lead { margin-top: 22px; max-width: 34em; color: var(--text-2); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.55; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__note { margin-top: 16px; color: var(--text-3); font-size: 14px; }
@media (max-width: 559px) {
  .hero__ctas .btn { width: 100%; }
}
@media (min-width: 980px) {
  .hero { padding: 72px 0 96px; }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; }
}

/* ---------- Demo animada ---------- */
.demo { position: relative; width: 100%; max-width: 480px; margin-inline: auto; }
.demo::before {
  content: ""; position: absolute; inset: 8% -6% -4%; z-index: -1; border-radius: 40px;
  background: var(--brand); opacity: .22; filter: blur(60px);
}
.demo__window {
  position: relative; display: flex; flex-direction: column; height: 580px; overflow: hidden;
  background: #101016; border: 1px solid var(--border); border-radius: 26px;
  box-shadow: var(--glow), 0 30px 80px rgba(0, 0, 0, .5);
  font-size: 14px; line-height: 1.45; transition: opacity .45s;
}

.demo__bar {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; height: 50px; padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--border); background: rgba(21, 21, 28, .7);
}
.demo__bar img { border-radius: 7px; }
.demo__title { font-weight: 600; font-size: 14px; }
.demo__tokens {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 5px 11px;
  border-radius: var(--r-pill); background: var(--elevated); border: 1px solid var(--border);
  color: var(--text-2); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.demo__tokens [data-demo-tokens] { color: var(--text); font-weight: 650; }
.demo__tokens-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }

.demo__body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
  padding: 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  transition: opacity .45s;
}
.demo.is-resetting .demo__body { opacity: 0; }
.demo__empty { display: none; flex-direction: column; align-items: center; gap: 14px; margin-block: auto; text-align: center; animation: msg-in .5s ease-out both; }
.demo[data-step="compose"] .demo__empty { display: flex; }
.demo__empty img { border-radius: 16px; box-shadow: 0 0 40px rgba(255, 79, 216, .45), 0 0 90px rgba(124, 92, 255, .3); }
.demo__empty-title { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.demo__ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 330px; }
.demo__ideas span { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12.5px; transition: color .3s, border-color .3s; }
.demo.has-text .demo__ideas .is-picked { color: var(--text); border-color: rgba(255, 79, 216, .55); }
.demo__msg { display: none; gap: 10px; animation: msg-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.demo[data-step="sent"] .demo__msg--user,
.demo[data-step="working"] .demo__msg--user,
.demo[data-step="done"] .demo__msg--user,
.demo[data-step="working"] .demo__msg--status,
.demo[data-step="done"] .demo__msg--ai { display: flex; }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px); } }

.demo__msg--user { justify-content: flex-end; }
.demo__bubble {
  max-width: 80%; padding: 7px 7px 11px; border-radius: var(--r-bubble) var(--r-bubble) 8px var(--r-bubble);
  background: var(--bubble);
}
.demo__bubble p { padding: 0 8px; }
.demo__thumb { position: relative; width: 168px; aspect-ratio: 16 / 9; margin-bottom: 9px; border-radius: 15px; overflow: hidden; }
.demo__thumb svg { width: 100%; height: 100%; }
.demo__dur, .demo__chip-dur { font-variant-numeric: tabular-nums; }
.demo__dur {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .6); font-size: 11.5px; font-weight: 600;
}
.demo__avatar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; }

.demo__status {
  position: relative; width: min(260px, 100%); padding: 12px 14px 14px; overflow: hidden;
  background: var(--elevated); border: 1px solid var(--border); border-radius: 16px;
}
.demo__status::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .07) 48%, rgba(255, 79, 216, .07) 52%, transparent 70%);
  background-size: 250% 100%; animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.demo__status-label { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.demo__status-track { display: block; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--border); overflow: hidden; }
.demo__status-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand); transition: width .5s ease; }

.demo__ai { min-width: 0; flex: 1; }
.demo__ai > p { color: var(--text); max-width: 32em; }
.demo__video {
  position: relative; width: min(180px, 58%); aspect-ratio: 9 / 16; margin-top: 10px;
  border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 40px rgba(0, 0, 0, .45);
}
.demo__scene, .demo__scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo__scene svg { transition: transform .45s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 46%; }
.demo__scene.is-zoom svg { transform: scale(1.16); }
.demo[data-step="done"] .demo__mouth { animation: talk .32s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes talk { from { transform: scaleY(.5); } to { transform: scaleY(1.7); } }
.demo__subs {
  position: absolute; left: 4px; right: 4px; top: 71%; text-align: center;
  font-size: 18px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .8), 0 0 10px rgba(0, 0, 0, .55);
  -webkit-text-stroke: 1px rgba(0, 0, 0, .55); paint-order: stroke fill;
}
.demo__subs span { display: inline-block; margin: 0 .14em; transition: color .12s, transform .12s; }
.demo__subs span.is-on { color: var(--sub-yellow); transform: scale(1.12); }
.demo__subs.is-pop { animation: sub-pop .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sub-pop { from { transform: scale(.82); opacity: .4; } }
.demo__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .22); }
.demo__progress span { display: block; width: 0; height: 100%; background: #fff; transition: width .38s linear; }
.demo__meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: var(--text-3); font-size: 12.5px; }
.demo__dl {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--text); font-weight: 600;
}

.demo__composer {
  flex-shrink: 0; margin: 0 12px 12px; padding: 8px; border-radius: var(--r-input);
  background: var(--elevated); border: 1px solid var(--border);
}
.demo__chip {
  display: none; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: 2px 2px 8px; padding: 5px 10px 5px 5px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px;
  animation: msg-in .35s ease-out both;
}
.demo[data-step="compose"] .demo__chip { display: flex; }
.demo__chip-thumb { width: 40px; height: 26px; border-radius: 7px; overflow: hidden; flex-shrink: 0; }
.demo__chip-thumb svg { width: 100%; height: 100%; }
.demo__chip-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__chip-dur { color: var(--text-3); }
.demo__row { display: flex; align-items: center; gap: 8px; }
.demo__plus, .demo__send { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; }
.demo__plus { color: var(--text-2); background: rgba(255, 255, 255, .05); }
.demo__send { color: #fff; background: var(--brand); opacity: .45; transition: opacity .2s; }
.demo.has-text .demo__send { opacity: 1; }
.demo__input { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__placeholder { color: var(--text-3); }
.demo.has-text .demo__placeholder { display: none; }
.demo__caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -.18em; background: var(--text); animation: caret 1s steps(1) infinite; }
.demo:not([data-step="compose"]) .demo__caret { display: none; }
@keyframes caret { 50% { opacity: 0; } }

@media (max-width: 559px) {
  .demo__window { height: 560px; border-radius: 22px; }
  .demo__video { width: min(164px, 56%); }
  .demo__ideas span:nth-child(n+3) { display: none; }
  .demo__thumb { width: 140px; }
}

/* ---------- Formatos ---------- */
.formats { border-block: 1px solid var(--border); background: rgba(21, 21, 28, .5); }
.formats__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; padding-block: 22px; }
.formats__lead { color: var(--text-3); font-size: 14px; }
.formats__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.formats__list li { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.ratio { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; opacity: .7; }
.ratio--v { width: 10px; height: 17px; }
.ratio--h { width: 20px; height: 12px; }
.ratio-wave { opacity: .7; }

/* ---------- Secciones ---------- */
.section { padding-block: 80px; }
.section--alt { background: linear-gradient(to bottom, rgba(21, 21, 28, .55), rgba(21, 21, 28, .2)); border-block: 1px solid rgba(42, 42, 54, .6); }
.section__head { max-width: 640px; margin-bottom: 40px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.section__lead { margin-top: 14px; color: var(--text-2); font-size: 1.075rem; }
@media (min-width: 980px) { .section { padding-block: 112px; } }

/* ---------- Video con IA (foto → video) ---------- */
.hero__new {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 14px 6px 6px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 14.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 79, 216, .12), 0 8px 26px rgba(124, 92, 255, .18);
  transition: border-color .2s, transform .2s;
}
.hero__new:hover { border-color: rgba(255, 79, 216, .55); transform: translateY(-1px); }
.hero__new svg { color: var(--text-2); }
.hero__new-tag {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); background: var(--brand);
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}

.ai-show { position: relative; overflow: clip; isolation: isolate; }
.ai-show::before {
  content: ""; position: absolute; z-index: -1; inset: 10% -10% auto auto; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 79, 216, .2), transparent 65%); filter: blur(70px); pointer-events: none;
}
.ai-show__grid { display: grid; gap: 44px; align-items: center; }
.ai-show__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--text-2); font-weight: 650; font-size: 15px; }
.ai-show .section__lead strong { color: var(--text); font-weight: 650; }
@media (max-width: 559px) { .ai-show__buy .btn { width: 100%; } }

.ai-price { margin-bottom: 30px; }
@media (min-width: 980px) { .ai-price { margin-top: 26px; } }
.ai-price__head { font-weight: 600; color: var(--text-2); }
.ai-price__head strong { color: var(--text); font-size: 1.15em; font-weight: 800; }
.ai-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.ai-pack {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 16px 8px 14px;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--border); text-align: center;
}
.ai-pack.is-best { border-color: rgba(255, 79, 216, .6); box-shadow: 0 10px 30px rgba(255, 79, 216, .14); }
.ai-pack__tag {
  position: absolute; top: -10px; left: 50%; translate: -50% 0; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap;
}
.ai-pack__time { font-size: 1.5rem; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; }
.ai-pack__clips { color: var(--text-2); font-size: 12.5px; }
.ai-pack__price { margin-top: 10px; font-size: 1.05rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.ai-pack__unit { color: var(--text-3); font-size: 12px; }
.ai-price__fine { margin-top: 12px; color: var(--text-3); font-size: 13.5px; line-height: 1.5; }

/* Demo del chat con foto → video (usa el mismo componente que el del inicio) */
.demo--ai::before { background: linear-gradient(135deg, #FF4FD8, #FF8A3D); opacity: .2; }
.demo--ai[data-step="compose"]:not(.has-photo) .demo__chip { display: none; }
.demo--ai .demo__chip-thumb { width: 26px; height: 26px; }
.demo--ai .demo__window { height: 630px; }
.demo--ai .demo__bubble { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; }
.demo--ai .demo__bubble p { padding: 0; }
.demo__photo { flex: none; width: 72px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.demo--ai .demo__video { width: min(170px, 60%); }
@media (max-width: 559px) {
  .demo--ai .demo__window { height: 620px; }
  .demo--ai .demo__video { width: min(150px, 56%); }
}
.demo__photo svg { display: block; width: 100%; height: 100%; }
.demo__label {
  position: absolute; z-index: 1; top: 8px; left: 8px; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(11, 11, 15, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 10.5px; font-weight: 700;
}
.demo--ai .demo__progress span { width: 100%; transform: scaleX(0); transform-origin: left; transition: none; }
.demo--ai[data-step="done"] .demo__progress span { animation: ai-progress 5s linear forwards; }
@keyframes ai-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pa-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 62%; }
.demo--ai[data-step="done"] .pa-svg { animation: pa-push 6s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes pa-push { from { transform: scale(1.14); } to { transform: scale(1); } }
.pa-arm { transform-box: view-box; transform-origin: 136px 312px; }
.demo--ai[data-step="done"] .pa-arm { animation: pa-lick 2.4s ease-in-out .5s infinite; }
@keyframes pa-lick { 0%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(-9deg); } }
.demo--ai[data-step="done"] .pa-birds { animation: pa-fly 6s linear both; }
@keyframes pa-fly { from { transform: translate(-24px, 8px); } to { transform: translate(36px, -8px); } }
.demo--ai[data-step="done"] .pa-clouds { animation: pa-drift 6s linear both; }
@keyframes pa-drift { to { transform: translateX(12px); } }
@media (min-width: 980px) {
  .ai-show__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro demo" "buy demo";
    column-gap: 64px; row-gap: 0;
  }
  .ai-show__intro { grid-area: intro; align-self: end; }
  .ai-show__buy { grid-area: buy; align-self: start; }
  .demo--ai { grid-area: demo; }
}

/* ---------- Funciones (chips) ---------- */
.section--tight { padding-block: 64px; }
@media (min-width: 980px) { .section--tight { padding-block: 88px; } }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; margin-inline: auto; }
.chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border);
  font-size: 15px; font-weight: 600; color: var(--text);
}
@media (max-width: 559px) {
  .chips { gap: 8px; }
  .chip { padding: 8px 13px 8px 10px; font-size: 14px; gap: 7px; }
  .chip svg { width: 18px; height: 18px; }
  .step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 20px 18px; }
  .step__num { grid-row: span 2; }
  .step__title { margin-top: 6px; }
}
.chip svg { width: 20px; height: 20px; flex: none; fill: none; stroke: url(#ic-grad); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cómo funciona ---------- */
.steps { display: grid; gap: 14px; counter-reset: step; }
.step { position: relative; padding: 26px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.step__num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: 0 6px 20px rgba(124, 92, 255, .35);
}
.step__title { margin-top: 18px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.step__text { margin-top: 8px; color: var(--text-2); }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 45px; left: calc(24px + 40px + 12px); right: -14px; height: 1px;
    background: linear-gradient(to right, rgba(255, 79, 216, .5), rgba(42, 42, 54, 0));
  }
}

/* ---------- Precios ---------- */
.plans { display: grid; gap: 14px; align-items: stretch; }
@media (min-width: 680px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
}
.plan.is-popular {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--brand) border-box;
  box-shadow: 0 20px 60px rgba(124, 92, 255, .22);
}
.plan__badge {
  position: absolute; top: -13px; left: 24px; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700;
}
.plan__name { font-size: 1.15rem; font-weight: 700; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.plan__amount { font-size: 2.75rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plan__per { color: var(--text-3); font-size: 15px; }
.plan__features { display: grid; gap: 10px; margin: 24px 0 28px; flex: 1; align-content: start; }
.plan__features li { position: relative; padding-left: 28px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.plan__features li::before {
  content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(61, 220, 151, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DDC97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.plan__features li:first-child { color: var(--text); font-weight: 600; }
.plan__features li.is-limit { color: var(--text-3); }
.plan__features li.is-limit::before {
  background: rgba(154, 154, 168, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.packs {
  display: grid; gap: 20px; margin-top: 14px; padding: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
}
.packs__title { font-size: 1.15rem; font-weight: 700; }
.packs__copy p { margin-top: 6px; color: var(--text-2); font-size: 15px; }
.packs__list { display: grid; gap: 10px; }
.pack {
  display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px;
  border-radius: 16px; background: var(--elevated); border: 1px solid var(--border);
}
.pack__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pack__tokens { font-weight: 700; }
.pack__min { color: var(--text-3); font-size: 13.5px; }
.pack__price { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .packs { grid-template-columns: 1fr 2fr; align-items: center; padding: 24px 28px; gap: 32px; }
  .packs__list { grid-template-columns: 1fr 1fr; }
}
.packs-wrap { margin-top: 18px; }
.packs-wrap > summary {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 14px 18px;
  border-radius: var(--r-card); border: 1px dashed var(--border); color: var(--text); font-weight: 650;
  cursor: pointer; list-style: none; text-align: center;
}
.packs-wrap > summary::-webkit-details-marker { display: none; }
.packs-wrap > summary span { color: var(--text-3); font-weight: 500; }
.packs-wrap > summary span::before { content: "· "; }
@media (max-width: 559px) {
  .packs-wrap > summary span { width: 100%; order: 2; }
  .packs-wrap > summary span::before { content: none; }
}
.packs-wrap > summary::after {
  content: ""; width: 10px; height: 10px; margin-left: 6px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.packs-wrap[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.packs-wrap > summary:hover { border-color: rgba(124, 92, 255, .5); }
.pricing__fine { margin-top: 20px; text-align: center; color: var(--text-3); font-size: 14px; }

/* ---------- Preguntas ---------- */
.faq { max-width: 860px; }
.faq__list { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-size: 1.075rem; font-weight: 600; letter-spacing: -.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F4F6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
  border: 1px solid var(--border); transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: #fff; }
.faq__item summary:focus-visible { border-radius: 10px; }
.faq__body { padding: 0 4px 22px; color: var(--text-2); max-width: 70ch; }
.faq__body p + p { margin-top: 10px; }
.faq__body a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 79, 216, .6); text-underline-offset: 3px; }
.faq__item[open] .faq__body { animation: faq-in .25s ease-out; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Banda final ---------- */
.cta-band { padding-block: 24px 96px; }
.cta-band__inner {
  position: relative; overflow: hidden; isolation: isolate; padding: 56px 24px; text-align: center;
  border-radius: 28px; border: 1px solid rgba(255, 255, 255, .08); background: var(--surface);
}
.cta-band__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 90% at 50% 110%, rgba(255, 79, 216, .35), transparent 70%),
              radial-gradient(60% 80% at 10% -10%, rgba(124, 92, 255, .35), transparent 70%),
              radial-gradient(50% 70% at 100% 0, rgba(255, 138, 61, .2), transparent 70%);
}
.cta-band__title { max-width: 18ch; margin-inline: auto; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.06; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.cta-band__text { margin: 14px auto 28px; color: var(--text-2); font-size: 1.075rem; }
@media (min-width: 720px) { .cta-band__inner { padding: 80px 40px; } }

/* ---------- Pie ---------- */
.site-footer { border-top: 1px solid var(--border); padding-block: 36px; color: var(--text-3); font-size: 14px; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-right: auto; }
.site-footer__brand .brand { color: var(--text); }
.site-footer__brand .brand__name { font-size: 17px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__nav a { color: var(--text-2); transition: color .2s; overflow-wrap: anywhere; }
.site-footer__nav a:hover { color: var(--text); }
@media (max-width: 559px) { .site-footer__copy { width: 100%; } }

/* ---------- Páginas legales ---------- */
.legal-hero { padding: 48px 0 8px; }
.legal-hero__title { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.04em; }
.legal-hero__meta { margin-top: 12px; color: var(--text-3); font-size: 15px; }
.template-note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 14px 16px; max-width: 760px;
  border-radius: 16px; border: 1px solid rgba(255, 194, 75, .4); background: rgba(255, 194, 75, .08);
  color: #FFE2A6; font-size: 15px;
}
.template-note svg { flex-shrink: 0; margin-top: 2px; color: var(--warning); }
.template-note strong { color: var(--warning); }
.ph-inline { font-weight: 600; color: var(--warning); overflow-wrap: anywhere; }

.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 32px 96px; }
.legal-layout > * { min-width: 0; }
@media (min-width: 980px) {
  .legal-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
  .toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; }
}
.toc { padding: 18px 18px 14px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); font-size: 14.5px; }
.toc summary { cursor: pointer; font-weight: 700; color: var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.toc[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.toc ol { margin-top: 12px; display: grid; gap: 2px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--text-2); line-height: 1.35; transition: color .15s, background-color .15s; }
.toc a::before { content: counter(toc) "."; min-width: 1.4em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.toc a:hover, .toc a.is-active { color: var(--text); background: rgba(255, 255, 255, .05); }

.prose { max-width: 72ch; color: #D7D7DE; font-size: 16.5px; line-height: 1.7; }
.prose section + section { margin-top: 44px; }
.prose h2 { font-size: 1.45rem; line-height: 1.25; font-weight: 750; letter-spacing: -.02em; color: var(--text); }
.prose h3 { margin-top: 24px; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.prose p, .prose ul, .prose ol { margin-top: 14px; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--text-3); }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 79, 216, .6); text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose .ph { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 1px 6px; border-radius: 6px; background: rgba(255, 194, 75, .12); color: var(--warning); font-weight: 600; font-size: .95em; overflow-wrap: anywhere; }
.prose .callout { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.prose .caps-legal { text-transform: uppercase; font-size: .92em; letter-spacing: .01em; }
.prose table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { color: var(--text); font-weight: 650; }
.table-wrap { overflow-x: auto; }
@media (max-width: 639px) {
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
  .stack-table tr { padding: 12px 14px; margin-top: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
  .stack-table td { padding: 4px 0; border: 0; }
  .stack-table td::before { content: attr(data-label); display: block; color: var(--text-3); font-size: 13px; font-weight: 600; }
  .stack-table td:first-child { font-weight: 650; color: var(--text); }
  .stack-table td:first-child::before { display: none; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .demo__status::after, .demo__caret { animation: none !important; }
}

/* ---------- Reportar contenido ---------- */
.report-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 28px 96px; max-width: 980px; }
@media (min-width: 860px) { .report-wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.report-form { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.field__input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.field__input:focus { outline: 2px solid var(--brand-1, #7C5CFF); outline-offset: 1px; border-color: transparent; }
textarea.field__input { resize: vertical; min-height: 110px; }
.report-form .btn { align-self: flex-start; }
.report-status { min-height: 1.4em; color: var(--text-2); font-size: 15px; }
.report-note { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 15px; line-height: 1.5; }
.report-note a { color: var(--text); text-decoration: underline; }