/* K-Snag · página de inicio */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: 40px 72px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hero { padding-block: 72px 112px; }
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(640px 420px at 12% -8%, rgb(99 102 241 / 0.26), transparent 70%),
    radial-gradient(560px 400px at 88% 0%, rgb(139 92 246 / 0.2), transparent 70%),
    radial-gradient(480px 320px at 70% 92%, rgb(249 115 98 / 0.1), transparent 70%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 80%);
  opacity: 0.6;
}
.hero-grid {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr); gap: 56px; }
}
.hero-copy { text-align: center; }
@media (min-width: 1024px) {
  .hero-copy { text-align: left; }
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgb(255 255 255 / 0.03);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  font-size: clamp(2.625rem, 1.6rem + 4.6vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
/* Con line-height 1.02 el fondo del degradado terminaba antes de la cola de la «g» y se cortaba:
   se alarga hacia abajo con padding y se compensa con margen negativo. */
.hero-title-sub {
  display: block;
  max-width: 22em;
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text);
}
.hero-title .gradient-text {
  display: inline-block;
  white-space: nowrap;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.hero-logo {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 12px 28px rgb(99 102 241 / 0.45));
}
@media (min-width: 1024px) {
  .hero-title { flex-direction: row; gap: 16px; font-size: clamp(2.75rem, 1rem + 3.4vw, 4rem); }
  .hero-logo { width: 56px; height: 56px; }
}
@media (min-width: 1024px) {
  /* El subtítulo del H1 va en su propia línea, debajo del logo y el nombre. */
  .hero-title { flex-wrap: wrap; }
  .hero-title-sub { flex-basis: 100%; }
}
.hero-lead {
  margin: 20px auto 0;
  max-width: 34em;
  color: var(--text-muted);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
}
.hero-lead strong { color: var(--text); font-weight: 650; }
@media (min-width: 1024px) {
  .hero-lead { margin-inline: 0; }
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .hero-actions { justify-content: flex-start; }
}
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.hero-link:hover { color: var(--text); text-decoration: underline; }
/* Invita a bajar a la guía: no es un botón de descarga (ese está al final de la guía). */
.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 650;
  text-decoration: none;
}
.hero-scroll:hover { color: var(--accent-text); }
.hero-scroll-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--accent-text);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-arrow { animation: hero-bob 1.8s var(--ease) infinite; }
}
@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin-top: 20px;
  color: var(--text-faint);
  font-size: 0.875rem;
  font-weight: 550;
}
.hero-meta a { color: var(--accent-text); }
.hero-meta-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.hero-note {
  margin-top: 8px;
  color: var(--text-faint);
  font-size: 0.875rem;
}
.hero-note code { color: var(--text-muted); }
@media (min-width: 1024px) {
  .hero-meta { justify-content: flex-start; }
}

/* ---------- Maqueta animada de la app ---------- */
@property --pct {
  syntax: "<integer>";
  inherits: true;
  initial-value: 64;
}

.mock-wrap {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  max-width: 620px;
  margin-inline: auto;
}
.mock-glow {
  position: absolute;
  inset: 10% -2% -4% 6%;
  z-index: -1;
  border-radius: 48px;
  background: var(--brand-gradient);
  filter: blur(56px);
  opacity: 0.32;
}
.mock {
  --mock-cycle: 10s;
  font-size: clamp(10px, 2.45cqi, 14px);
  line-height: 1.35;
  text-align: left;
  border-radius: 1.1em;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 1024px) {
  .mock { transform: perspective(1600px) rotateY(-4deg) rotateX(2deg); }
}
.mock .icon { width: 1.15em; height: 1.15em; }
.mock-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.7em;
  padding: 0 1em;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.86em;
}
.mock-app {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--text);
  font-weight: 600;
}
.mock-app img { width: 1.3em; height: 1.3em; }
.mock-winctl { display: flex; gap: 1.7em; }
.mock-winctl .icon { width: 1em; height: 1em; }

.mock-body { display: flex; }
.mock-rail {
  flex: none;
  width: 4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 0;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
}
.mock-rail-item {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.65em;
  color: var(--text-faint);
}
.mock-rail-item.is-active { background: var(--accent-soft); color: var(--accent-text); }
.mock-rail-end { margin-top: auto; }

.mock-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  padding: 1.15em;
}
.mock-url {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 3em;
  padding: 0 0.4em 0 0.9em;
  border-radius: 0.65em;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-faint);
}
.mock-url-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 0.95em;
}
.mock-paste {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: 2.25em;
  padding: 0 0.85em;
  border-radius: 0.45em;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.88em;
  font-weight: 600;
}

.mock-media {
  display: flex;
  gap: 0.9em;
  padding: 0.75em;
  border-radius: 0.9em;
  background: var(--surface);
  border: 1px solid var(--border);
}
.mock-thumb {
  position: relative;
  flex: none;
  width: 9.6em;
  aspect-ratio: 16 / 9;
  border-radius: 0.55em;
  overflow: hidden;
}
.mock-thumb.sm { width: 4.4em; border-radius: 0.4em; }
/* Miniaturas ilustradas (películas abiertas de Blender, licencia CC BY) */
.thumb-bbb {
  background:
    radial-gradient(22% 30% at 76% 30%, #fff8d6 0 35%, rgb(255 248 214 / 0) 70%),
    radial-gradient(70% 55% at 22% 112%, #4f9e3e 0 97%, rgb(79 158 62 / 0) 100%),
    radial-gradient(80% 60% at 88% 118%, #3a8530 0 97%, rgb(58 133 48 / 0) 100%),
    radial-gradient(14% 16% at 34% 64%, #f4f1ea 0 92%, rgb(244 241 234 / 0) 100%),
    linear-gradient(180deg, #78c0f2 0%, #c9edff 72%);
}
.thumb-sintel {
  background:
    radial-gradient(26% 36% at 70% 36%, #ffd39c 0 30%, rgb(255 211 156 / 0) 70%),
    radial-gradient(85% 55% at 35% 122%, #2c2140 0 97%, rgb(44 33 64 / 0) 100%),
    linear-gradient(180deg, #2b1d48 0%, #9c4560 62%, #ef9f58 100%);
}
.mock-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.mock-play .icon {
  width: 2.2em;
  height: 2.2em;
  padding: 0.6em;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
}
.mock-dur {
  position: absolute;
  right: 0.4em;
  bottom: 0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.3em;
  background: rgb(0 0 0 / 0.72);
  color: #fff;
  font-size: 0.72em;
  font-weight: 650;
}
.mock-media-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3em;
}
.mock-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 1.05em;
  font-weight: 650;
}
.mock-sub { color: var(--text-muted); font-size: 0.86em; }
.mock-badges { display: flex; gap: 0.4em; margin-top: 0.15em; }
.mock-badges span {
  padding: 0.12em 0.5em;
  border-radius: 0.35em;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.72em;
  font-weight: 700;
}
.mock-badges span:first-child { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }

.mock-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6em;
}
.mock-opt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  padding: 0.7em 0.8em;
  border-radius: 0.75em;
  background: var(--surface);
  border: 1.5px solid var(--border);
}
.mock-opt.is-selected {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--brand-gradient) border-box;
  border-color: transparent;
  box-shadow: 0 0 0 0.25em var(--accent-soft);
}
.mock-opt-name, .mock-opt-q {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mock-opt-name { color: var(--text); font-size: 0.95em; font-weight: 650; }
.mock-opt-q { color: var(--text-muted); font-size: 0.82em; }
.mock-opt-size { color: var(--text-faint); font-size: 0.78em; }

.mock-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
}
.mock-save {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-size: 0.82em;
}
.mock-dl {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 2.65em;
  margin-left: auto;
  padding: 0 1.15em;
  border-radius: 0.6em;
  background: var(--button-gradient);
  box-shadow: var(--button-shadow);
  color: #fff;
  font-size: 0.92em;
  font-weight: 650;
  animation: mock-press var(--mock-cycle) var(--ease) infinite;
}
.mock-label {
  margin-top: 0.2em;
  color: var(--text-faint);
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mock-job {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.7em 0.8em;
  border-radius: 0.8em;
  background: var(--surface);
  border: 1px solid var(--border);
}
.mock-job-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.42em;
}
.mock-job-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.mock-job-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 0.92em;
  font-weight: 600;
}
.mock-job-meta {
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.8em;
}
.mock-pct {
  color: var(--text);
  font-size: 0.85em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: mock-pct var(--mock-cycle) linear infinite;
}
.mock-pct::after {
  counter-reset: pct var(--pct);
  content: counter(pct) "%";
}
.mock-done-check {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-left: -2.1em;
  border-radius: 50%;
  background: var(--success);
  color: #0b1a14;
  opacity: 0;
  transform: scale(0);
  animation: mock-check var(--mock-cycle) var(--ease) infinite;
}
.mock-done-check .icon { width: 0.95em; height: 0.95em; stroke-width: 3; }
.mock-bar {
  position: relative;
  height: 0.42em;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}
.mock-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 64%;
  border-radius: inherit;
  background: var(--brand-gradient);
  background-size: 160% 100%;
  overflow: hidden;
  animation: mock-bar var(--mock-cycle) linear infinite;
}
.mock-bar-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--success);
  opacity: 0;
  animation: mock-success var(--mock-cycle) linear infinite;
}
.mock-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.45), transparent);
  transform: translateX(-100%);
  animation: mock-shimmer 1.4s linear infinite;
}
.mock-stages {
  flex: 1;
  min-width: 0;
  display: grid;
}
.mock-stage {
  grid-area: 1 / 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
}
.mock-stage.s1 { opacity: 1; animation: mock-s1 var(--mock-cycle) linear infinite; }
.mock-stage.s2 { animation: mock-s2 var(--mock-cycle) linear infinite; }
.mock-stage.s3 { animation: mock-s3 var(--mock-cycle) linear infinite; }
.mock-stage.s4 { color: var(--success); font-weight: 600; animation: mock-s4 var(--mock-cycle) linear infinite; }
.mock-speed {
  flex: none;
  font-variant-numeric: tabular-nums;
  animation: mock-speed var(--mock-cycle) linear infinite;
}
.mock-ok { display: flex; color: var(--success); }
.mock-ok .icon { width: 1.25em; height: 1.25em; }
.mock-open {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--accent-text);
  font-weight: 600;
  white-space: nowrap;
}
.mock-job-done .mock-job-meta > span:first-child { color: var(--text-muted); }

@container (max-width: 500px) {
  .mock-rail, .mock-save, .mock-speed, .mock-winctl { display: none; }
  .mock-main { padding: 0.9em; gap: 0.7em; }
  .mock-thumb { width: 8em; }
  .mock-opt { padding: 0.6em 0.65em; }
}

@keyframes mock-press {
  0%, 1% { transform: scale(1); filter: none; }
  2% { transform: scale(0.94); filter: brightness(1.2); }
  4%, 100% { transform: scale(1); filter: none; }
}
@keyframes mock-bar {
  0%, 3% { width: 0%; opacity: 1; }
  44% { width: 78%; }
  58% { width: 100%; }
  96% { width: 100%; opacity: 1; }
  99%, 100% { width: 100%; opacity: 0; }
}
@keyframes mock-pct {
  0%, 3% { --pct: 0; opacity: 1; }
  44% { --pct: 78; }
  58% { --pct: 100; opacity: 1; }
  73% { --pct: 100; opacity: 1; }
  75%, 100% { --pct: 100; opacity: 0; }
}
@keyframes mock-success {
  0%, 74% { opacity: 0; }
  77%, 100% { opacity: 1; }
}
@keyframes mock-check {
  0%, 74% { opacity: 0; transform: scale(0); }
  77% { opacity: 1; transform: scale(1.25); }
  80%, 95% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes mock-shimmer {
  to { transform: translateX(100%); }
}
@keyframes mock-s1 {
  0% { opacity: 0; }
  3%, 43% { opacity: 1; }
  45%, 100% { opacity: 0; }
}
@keyframes mock-s2 {
  0%, 44% { opacity: 0; }
  46%, 57% { opacity: 1; }
  59%, 100% { opacity: 0; }
}
@keyframes mock-s3 {
  0%, 58% { opacity: 0; }
  60%, 73% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes mock-s4 {
  0%, 74% { opacity: 0; }
  76%, 95% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@keyframes mock-speed {
  0%, 2% { opacity: 0; }
  4%, 56% { opacity: 1; }
  58%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mock, .mock * { animation: none !important; }
  .mock { transform: none !important; }
}

/* ---------- Secciones alternas ---------- */
.section-alt {
  background: var(--bg-elev);
  border-block: 1px solid var(--border);
}

/* ---------- Cómo funciona: escena animada (js/features.js) ----------
   Sin animación se ven las dos escenas (celular y PC) con el anillo en cada toque. */
.how-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .how-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
}
.how-steps { list-style: none; padding: 0; display: grid; gap: 12px; }
.how-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.how-step strong { color: var(--text); }
.how-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-weight: 750;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
html:not(.fx-anim) .how-num,
.how-step.is-current .how-num { background: var(--button-gradient); border-color: transparent; color: #fff; }
.fx-anim .how-step.is-current { border-color: var(--accent-ring); background: var(--accent-soft); }
.how-stage { display: grid; gap: 32px; justify-items: center; }
.how-scene[hidden] { display: none; }

/* Elementos propios de las escenas */
/* En el celular, las hojas (Compartir, formatos, listo) se superponen al video desde abajo. */
.how-scene.scr-phone .scr-body > * { grid-area: 1 / 1; min-width: 0; }
.how-scene.scr-phone .scr-body > .hw-video { align-self: start; }
.how-scene.scr-phone .scr-body > .a-sheet, .how-scene.scr-phone .scr-body > .a-snack { align-self: end; z-index: 2; }
.hw-video { gap: 8px; }
.hw-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}
.hw-play {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
}
.hw-title { color: var(--text); font-weight: 650; font-size: 13px; }
.hw-channel { font-size: 11px; }
.hw-actions { display: flex; gap: 8px; margin: 4px 0 6px; }
.hw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}
.hw-chip .icon { width: 14px; height: 14px; }
.hw-sheet-title { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 650; font-size: 13px; }
.hw-sheet-title img { width: 20px; height: 20px; }
.hw-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hw-app {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 12px;
  font-size: 10px;
  color: var(--text);
}
.hw-app i { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); }
.hw-app i.is-green { background: #22c55e; }
.hw-app i.is-blue { background: #3b82f6; }
.hw-app img { width: 36px; height: 36px; }
.hw-opt {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 11px;
}
.scr .hw-opt[data-tap] { display: grid; }
.hw-opt strong { grid-column: 1 / -1; color: var(--text); font-size: 12px; }
.hw-opt small { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--text-faint); }
.hw-opt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.hw-formats { gap: 8px; }
.hw-done { gap: 10px; }
.hw-done-icon { display: grid; color: var(--success); }
.hw-done-icon .icon { width: 22px; height: 22px; }
/* PC */
.how-scene.scr-win .scr-bar { position: relative; }
.hw-url { flex: 1; border-radius: 999px; }
.scr .hw-url[data-tap] { display: block; }
.hw-copied {
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--success);
  color: #06281c;
  font-size: 11px;
  font-weight: 700;
}
.hw-desk { gap: 12px; align-content: start; }
.hw-desk > * { min-width: 0; }
.hw-app-head { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; }
.hw-app-head img { width: 18px; height: 18px; }
.hw-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
}
.hw-field > .icon { color: var(--text-faint); }
.hw-field-text { flex: 1; min-width: 0; display: grid; }
.hw-field-text > span { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hw-placeholder { color: var(--text-faint); }
.hw-pasted { color: var(--text); }
.hw-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hw-opts .hw-opt { display: grid; grid-template-columns: 1fr; }
.hw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hw-save { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.hw-job {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
@media (max-width: 480px) {
  .hw-opts .hw-opt { padding: 8px; font-size: 10px; }
  .hw-save { display: none; }
}

/* ---------- Funciones: tarjetas animadas ---------- */
.fx-grid { list-style: none; padding: 0; display: grid; gap: 16px; }
@media (min-width: 640px) {
  .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-wide, .fx-full { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .fx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-wide { grid-column: span 2; }
  .fx-full { grid-column: 1 / -1; }
}
.fx {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.fx-wide { background: radial-gradient(420px 200px at 100% 0%, rgb(139 92 246 / 0.14), transparent 70%), var(--surface); }
.fx-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 130px;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.fx-copy h3 { margin-bottom: 4px; font-size: 1.125rem; }
.fx-copy p { color: var(--text-muted); font-size: 0.9375rem; }
.fx-copy .feature-link { margin-top: 8px; }
.fx-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--button-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.fx-badge .icon { width: 14px; height: 14px; }

/* Calidad */
.fxq { display: flex; align-items: flex-end; gap: 12px; height: 104px; padding-top: 8px; }
.fxq-bar { display: grid; justify-items: center; gap: 6px; align-content: end; height: 100%; }
.fxq-bar i {
  display: block;
  width: 34px;
  border-radius: 8px 8px 4px 4px;
  background: var(--surface-3);
  transform-origin: 50% 100%;
}
.fxq-bar em { color: var(--text-faint); font-size: 11px; font-style: normal; font-weight: 650; }
.fxq-bar.b1 i { height: 22px; }
.fxq-bar.b2 i { height: 36px; }
.fxq-bar.b3 i { height: 52px; }
.fxq-bar.b4 i { height: 66px; }
.fxq-bar.b5 i { height: 80px; background: var(--brand-gradient); }
.fxq-bar.is-top em { color: var(--text); }
/* Audio */
.fxa { display: flex; align-items: center; gap: 6px; height: 80px; }
.fxa i { display: block; width: 8px; height: 64px; border-radius: 4px; background: var(--brand-gradient); transform-origin: 50% 50%; }
html:not(.fx-anim) .fxa i:nth-child(odd) { transform: scaleY(0.45); }
/* Listas */
.fxl { display: grid; gap: 8px; width: min(240px, 86%); }
.fxl-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; background: var(--surface); }
.fxl-row i { width: 34px; height: 20px; border-radius: 4px; background: var(--surface-3); flex: none; }
.fxl-row b { flex: 1; height: 7px; border-radius: 4px; background: var(--surface-3); }
.fxl-row .icon { color: var(--success); width: 18px; height: 18px; }
/* Actualización */
.fxu { display: grid; justify-items: center; gap: 12px; }
.fxu-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.fxu-icon .icon { width: 26px; height: 26px; }
.fxu-ver { display: grid; font-family: var(--font-mono); font-size: 12px; }
.fxu-ver > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 10px; border-radius: 999px; }
.fxu-old { color: var(--text-faint); background: var(--surface); }
.fxu-new { color: var(--success); background: var(--success-soft); }
.fxu-new .icon { width: 14px; height: 14px; }
html:not(.fx-anim) .fxu-old { visibility: hidden; }
/* Errores */
.fxe { display: grid; width: min(270px, 88%); }
.fxe > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 12px; }
.fxe .icon { flex: none; width: 18px; height: 18px; }
.fxe-raw { font-family: var(--font-mono); color: var(--danger-text); background: rgb(248 113 113 / 0.1); border: 1px solid rgb(248 113 113 / 0.3); }
.fxe-nice { color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); }
.fxe-nice .icon { color: var(--accent-text); }
.fxe-ok { color: var(--text); background: var(--success-soft); border: 1px solid rgb(52 211 153 / 0.3); }
.fxe-ok .icon { color: var(--success); }
html:not(.fx-anim) .fxe-raw, html:not(.fx-anim) .fxe-nice { visibility: hidden; }
/* Privacidad */
.fxp { position: relative; display: flex; gap: 10px; align-items: center; }
.fxp-ad {
  padding: 18px 10px;
  border-radius: 8px;
  border: 1px dashed var(--border-strong);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html:not(.fx-anim) .fxp-ad { opacity: 0.25; }
.fxp-shield {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--success);
}
.fxp-shield .icon { width: 56px; height: 56px; filter: drop-shadow(0 6px 18px rgb(52 211 153 / 0.45)); }
/* Código */
.fxc { display: grid; gap: 9px; width: min(320px, 86%); }
.fxc-line { display: block; height: 9px; border-radius: 5px; background: var(--surface-3); transform-origin: 0 50%; }
.fxc-line.l1 { width: 60%; background: rgb(129 140 248 / 0.7); }
.fxc-line.l2 { width: 88%; margin-left: 8%; }
.fxc-line.l3 { width: 72%; margin-left: 8%; background: rgb(52 211 153 / 0.6); }
.fxc-line.l4 { width: 54%; margin-left: 16%; }
.fxc-line.l5 { width: 30%; background: rgb(249 115 98 / 0.65); }
/* Sitios */
.fx-full { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; }
@media (max-width: 639px) {
  .fx-full { grid-template-columns: 1fr; }
}
.fxs { min-height: 0; padding: 12px 0; place-items: start; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fxs-track { display: flex; flex-wrap: wrap; gap: 8px; padding-inline: 12px; }
/* En la cinta animada, el espacio va como margen de cada nombre para que la mitad mida justo una vuelta. */
.fx-anim .fxs-track { flex-wrap: nowrap; width: max-content; gap: 0; padding-inline: 0; }
.fx-anim .fxs-track span { margin-right: 8px; }
.fxs-track span {
  flex: none;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.open-lock { display: inline; vertical-align: -2px; margin-right: 6px; color: var(--success); }

@media (prefers-reduced-motion: reduce) {
  .how-step, .how-num { transition: none; }
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 650;
  text-decoration: none;
}
.feature-link:hover { text-decoration: underline; }

/* ---------- Instalar: guía paso a paso ----------
   Sin JavaScript (o con «reducir movimiento») todo queda visible y quieto: cada pantalla muestra el aviso
   tal como aparece y marca con un anillo lo que hay que tocar. Con animación, js/tour.js agrega
   .tour-anim al <html> y GSAP mueve el puntero, pulsa los botones y cambia de pantalla. */
.tour { overflow: clip; }
.tour .section-head { margin-bottom: 28px; }
.tour-trust {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.tour-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.tour-trust .icon { color: var(--success); }

/* Pestañas Windows / Android (solo con JavaScript) */
.tour-switch { display: flex; justify-content: center; margin-bottom: 40px; }
.tour-switch[hidden] { display: none; }
.tour-tabs {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
}
.tour-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 650;
  font-size: 1rem;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tour-tab:hover { color: var(--text); }
.tour-tab[aria-selected="true"] {
  background: var(--button-gradient);
  color: #fff;
  box-shadow: var(--button-shadow);
}

.tour-panel + .tour-panel { margin-top: 96px; }
.tour.has-tabs .tour-panel + .tour-panel { margin-top: 0; }
.tour-panel[hidden] { display: none; }
.tour-os-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 1.375rem;
}
.tour-os-title .icon { color: var(--accent-text); }
.tour.has-tabs .tour-os-title {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
.tour-elsewhere { max-width: 640px; margin: 0 auto 20px; }
.tour-elsewhere[hidden] { display: none; }

.tour-why {
  max-width: 640px;
  margin: 0 auto 56px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.tour-why summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  list-style: none;
  cursor: pointer;
  font-weight: 650;
}
.tour-why summary::-webkit-details-marker { display: none; }
.tour-why summary > .icon:first-child { color: var(--accent-text); }
.tour-why-chevron { margin-left: auto; color: var(--text-faint); transition: transform var(--dur) var(--ease); }
.tour-why[open] .tour-why-chevron { transform: rotate(180deg); }
.tour-why-body { padding: 0 18px 18px; color: var(--text-muted); font-size: 0.9375rem; }
.tour-why-body p + p { margin-top: 10px; }
.tour-why-body strong { color: var(--text); }

/* Línea de progreso y pasos */
.tour-track { position: relative; }
.tour-rail {
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  border-radius: 2px;
  background: var(--border-strong);
  overflow: hidden;
}
.tour-rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 60%, #f97362 100%);
  transform-origin: 50% 0;
  transform: scaleY(0);
}
html:not(.tour-anim) .tour-rail-fill { display: none; }
.tour-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 64px;
}
.tour-step {
  position: relative;
  display: grid;
  gap: 24px;
  padding-left: 60px;
}
@media (min-width: 900px) {
  .tour-steps { gap: 96px; }
  .tour-step {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 56px;
    padding-left: 76px;
  }
}
.tour-num {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-weight: 750;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease);
}
@media (min-width: 900px) {
  .tour-num { top: 50%; margin-top: -20px; }
}
html:not(.tour-anim) .tour-num,
.tour-step.is-lit .tour-num {
  background: var(--button-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 6px var(--accent-soft);
}
.tour-text h4 { margin-bottom: 10px; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.tour-text > p { color: var(--text-muted); }
.tour-text strong { color: var(--text); }
.tour-text code { color: var(--text); overflow-wrap: anywhere; }
.tour-calm {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--success-soft);
  border: 1px solid rgb(52 211 153 / 0.28);
  color: var(--text);
  font-size: 0.9375rem;
}
.tour-calm > .icon { margin-top: 2px; color: var(--success); }
.tour-facts {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.tour-facts li { display: flex; align-items: flex-start; gap: 10px; }
.tour-facts .icon { margin-top: 3px; color: var(--success); }
.tour-visual { display: flex; justify-content: center; min-width: 0; }

/* ---------- Pantallas de ejemplo ---------- */
.scr {
  --scr-ring: var(--accent-ring);
  position: relative;
  width: 100%;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
  user-select: none;
  -webkit-user-select: none;
}
.scr .icon { width: 1.2em; height: 1.2em; }
.scr-body { position: relative; display: grid; }
.scr-body > .scr-frame { grid-area: 1 / 1; min-width: 0; }
.scr [data-tap] { display: inline-flex; align-items: center; transition: box-shadow 200ms var(--ease); }
html:not(.tour-anim) .scr [data-tap],
.scr [data-tap].is-target { box-shadow: 0 0 0 3px var(--scr-ring); }
html:not(.tour-anim) .scr [data-in]:not([data-in="0"]):not([data-static]) { visibility: hidden; }
.scr-track {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}
.scr-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-gradient);
  transform-origin: 0 50%;
}
/* Puntero (PC) y dedo (celular), creados por tour.js */
.scr-pointer, .scr-ripple {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  visibility: hidden;
}
.scr-cursor { width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.45)); }
.scr-cursor svg { width: 22px; height: 22px; }
.scr-finger {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: rgb(129 140 248 / 0.35);
  border: 2px solid rgb(165 180 252 / 0.95);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
}
.scr-ripple {
  z-index: 4;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--accent-ring);
}

/* Ventana de Windows / navegador */
.scr-win {
  max-width: 460px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.scr-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  background: var(--surface-2);
}
.scr-dots { display: flex; gap: 6px; }
.scr-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.scr-addr {
  flex: 1;
  min-width: 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-faint);
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scr-title { color: var(--text); font-size: 12px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scr-win .scr-body { padding: 20px; min-height: 210px; }
.w-page { display: grid; align-content: center; justify-items: start; gap: 10px; }
.w-page.is-dim { opacity: 0.45; }
.w-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; }
.w-brand img { width: 18px; height: 18px; }
.w-line { display: block; width: 88%; height: 8px; border-radius: 4px; background: var(--surface-3); }
.w-line.is-short { width: 56%; }
.w-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.w-btn.is-primary { border-color: transparent; background: var(--button-gradient); color: #fff; }
.w-page .w-btn { margin-top: 6px; padding: 8px 14px; }
.w-flyout {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  gap: 10px;
  width: min(270px, calc(100% - 20px));
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
}
.w-flyout-title { color: var(--text); font-weight: 650; font-size: 12px; }
.w-file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.w-file-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.w-file-icon.is-ok { background: var(--success-soft); color: var(--success); }
.w-file-info { flex: 1; min-width: 0; color: var(--text); font-weight: 600; font-size: 12px; overflow-wrap: anywhere; }
.w-file-info small { display: block; color: var(--text-faint); font-weight: 400; }
.w-warn { display: flex; gap: 10px; }
.w-warn > .icon { flex: none; margin-top: 1px; color: var(--warning); }
.w-warn strong { display: block; color: var(--text); overflow-wrap: anywhere; }
.w-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.w-props { display: grid; gap: 12px; }
.w-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
.w-tabs span { padding-bottom: 6px; }
.w-tabs .is-current { color: var(--text); border-bottom: 2px solid var(--accent); }
.w-props-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; font-size: 12px; }
.w-props-row span { color: var(--text-faint); }
.w-check-row {
  justify-self: end;
  gap: 8px;
  padding: 3px 8px 3px 4px;
  border-radius: 6px;
  color: var(--text);
  font-weight: 600;
}
.w-check {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border: 1.5px solid var(--text-faint);
  color: transparent;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.w-check .icon { width: 12px; height: 12px; stroke-width: 3; }
.w-check.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tour-alt { margin-top: 12px; color: var(--text-muted); font-size: 0.9375rem; }
/* Explorador con menú contextual y Control de cuentas de usuario */
.w-explorer { display: grid; align-content: start; gap: 6px; }
.w-file-row { padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); }
.w-menu {
  justify-self: center;
  display: grid;
  gap: 2px;
  min-width: 230px;
  margin-top: 2px;
  padding: 6px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  color: var(--text);
}
.w-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; }
.w-menu-item.is-strong { font-weight: 650; }
.w-menu-item .icon { color: #60a5fa; }
.w-uac {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #1b4f91;
  color: #dbe8ff;
  --scr-ring: rgb(255 255 255 / 0.75);
}
.w-uac-head { font-size: 11px; opacity: 0.85; }
.w-uac-q { color: #fff; font-size: 15px; font-weight: 600; }
.w-uac-app { color: #fff; font-weight: 600; }
.w-uac-app small { display: block; color: #dbe8ff; font-weight: 400; }
.w-uac .w-btn { border-color: rgb(255 255 255 / 0.6); color: #fff; }
.w-uac .w-btn.is-primary { background: #fff; color: #1b4f91; }
/* SmartScreen */
.scr-ss { --scr-ring: rgb(255 255 255 / 0.75); background: #1b4f91; border-color: rgb(255 255 255 / 0.12); }
.scr-ss .scr-body { padding: 22px; }
.w-ss { display: grid; gap: 10px; color: #dbe8ff; }
.w-ss-title { color: #fff; font-size: 18px; font-weight: 600; }
.w-ss-link {
  justify-self: start;
  padding: 1px 3px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.w-ss-details { font-size: 12px; }
.w-ss .w-actions { margin-top: 6px; }
.w-ss-btn {
  padding: 6px 14px;
  border: 1px solid rgb(255 255 255 / 0.85);
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
}
/* Consola del instalador */
.scr-console .scr-body { background: #0c0e13; border-radius: 0 0 14px 14px; }
.w-console {
  display: grid;
  align-content: start;
  gap: 8px;
  color: #c9cfdc;
  font-family: var(--font-mono);
  font-size: 12px;
}
.w-console b { color: #34d399; font-weight: 600; }
.w-app {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--shadow-md);
}
.w-app img { width: 22px; height: 22px; }

/* Celular Android */
.scr-phone {
  --scr-ring: rgb(129 140 248 / 0.8);
  max-width: 248px;
  padding: 9px;
  border-radius: 36px;
  background: #0a0c11;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px #2a2f3d;
}
.scr-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 16.5;
  border-radius: 28px;
  background: var(--bg);
  overflow: hidden;
}
.scr-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 4px; font-size: 11px; color: var(--text-muted); }
.scr-status-icons { display: flex; gap: 4px; }
.scr-status-icons i { width: 12px; height: 8px; border-radius: 2px; background: var(--text-faint); }
.scr-phone .scr-body { flex: 1; min-height: 0; padding: 12px; }
.scr-phone .scr-frame { display: flex; flex-direction: column; }
.scr-gesture { width: 84px; height: 4px; margin: 6px auto 8px; border-radius: 2px; background: var(--text-faint); opacity: 0.6; }
.a-urlbar {
  margin: 4px 12px 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: 11px;
}
.a-page { gap: 10px; padding-top: 6px; }
.a-page .w-line { width: 100%; }
.a-page .w-line.is-short { width: 70%; }
.a-download {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
}
.a-download > .icon { color: var(--accent-text); }
.a-download > span { flex: 1; }
.a-sheet {
  align-self: end;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin: 0 -12px -12px;
  padding: 18px 16px 14px;
  border-radius: 22px 22px 0 0;
  background: var(--surface-2);
  box-shadow: 0 -12px 30px -12px rgb(0 0 0 / 0.5);
}
.a-sheet-file { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 650; font-size: 12px; overflow-wrap: anywhere; }
.a-sheet-file .icon { flex: none; color: var(--accent-text); }
.a-sheet p { font-size: 12px; }
.a-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.a-btn {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--accent-text);
  font-weight: 650;
  font-size: 12px;
  white-space: nowrap;
}
.a-btn.is-filled { background: var(--accent); color: #fff; }
.a-snack {
  align-self: end;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 12px 14px;
  border-radius: 14px;
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
}
.a-snack-text { flex: 1; min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
.a-snack-text strong { display: block; color: var(--text); font-size: 12px; }
.a-center { justify-content: center; }
.a-dialog {
  display: grid;
  gap: 10px;
  padding: 18px 16px 12px;
  border-radius: 24px;
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
.a-dialog p { font-size: 12px; color: var(--text); }
.a-dialog-icon { justify-self: center; color: var(--accent-text); }
.a-dialog-icon .icon { width: 24px; height: 24px; }
.a-dialog-title { justify-self: center; color: var(--text); font-weight: 650; font-size: 15px; }
.a-dialog-app { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; font-size: 15px; }
.a-dialog-app img { width: 28px; height: 28px; }
.a-link {
  justify-self: start;
  gap: 4px;
  padding: 3px 6px;
  margin-left: -6px;
  border-radius: 8px;
  color: var(--accent-text);
  font-weight: 650;
  font-size: 12px;
}
.a-stack { display: grid; gap: 6px; }
.a-stack .a-btn { justify-content: center; text-align: center; }
.a-installing { display: block; font-size: 11px; }
.a-settings { gap: 14px; }
.a-settings-head { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; font-size: 14px; }
.a-settings-app { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
.a-app-dot { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(#ea4335 0 33%, #fbbc04 0 66%, #34a853 0); }
.a-settings-row {
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  margin-inline: -4px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
}
.a-settings-note { font-size: 11px; color: var(--text-faint); }
.a-toggle {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1.5px solid var(--text-faint);
  transition: background-color 200ms, border-color 200ms;
}
.a-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform 220ms var(--ease), background-color 200ms;
}
.a-toggle.is-on { background: var(--accent); border-color: var(--accent); }
.a-toggle.is-on::after { transform: translateX(16px); background: #fff; }
.a-home { justify-content: flex-end; padding-bottom: 12px; }
.a-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; justify-items: center; }
.a-apps > i { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-3); }
.a-app-ksnag {
  flex-direction: column;
  gap: 4px;
  padding: 3px;
  border-radius: 12px;
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
}
.a-app-ksnag img { width: 34px; height: 34px; }

/* ---------- Descarga al final de la guía ---------- */
.tour-finish { position: relative; display: grid; margin-top: 72px; }
.tour-finish > * { grid-area: 1 / 1; }
.tour-cta, .tour-after {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 620px;
  width: 100%;
  margin-inline: auto;
  padding: 40px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(520px 240px at 50% 0%, rgb(99 102 241 / 0.2), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.tour-after[hidden] { display: none; }
.tour-cta-kicker { color: var(--text); font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; }
.btn-xl {
  --btn-h: 64px;
  padding: 0 34px;
  border-radius: 16px;
  font-size: 1.25rem;
  font-weight: 750;
}
.btn-xl .icon { width: 1.35em; height: 1.35em; }
@media (max-width: 420px) {
  .btn-xl { width: 100%; padding: 0 20px; font-size: 1.125rem; }
}
.tour-cta-meta { color: var(--text-muted); font-size: 0.9375rem; }
.tour-cta-meta a { color: var(--accent-text); }
.tour-donate { margin-top: 10px; }
/* GSAP mueve y hace brillar estos botones: una transición de CSS en transform o box-shadow lo frenaría. */
.tour-anim .tour-cta .btn, .tour-anim .tour-after .btn { transition-property: background-color, border-color, filter; }
.tour-donate .icon, .tour-after-donate .icon { color: var(--coral); }
.tour-after-donate .btn-primary .icon { color: #fff; }
.tour-cta-alt { font-size: 0.875rem; }
.tour-inapp { text-align: left; }
.tour-inapp[hidden] { display: none; }
.tour-after:focus { outline: none; }
.tour-after-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}
.tour-after-icon .icon { width: 34px; height: 34px; }
.tour-after h4 { font-size: 1.5rem; }
.tour-after > p { color: var(--text-muted); }
.tour-after strong { color: var(--text); }
.tour-after-donate {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: rgb(249 115 98 / 0.08);
  border: 1px solid rgb(249 115 98 / 0.25);
}
.tour-after-donate p { color: var(--text-muted); font-size: 0.9375rem; }
.tour-after-retry { font-size: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  .tour-num, .tour-tab, .scr [data-tap], .w-check, .a-toggle, .a-toggle::after { transition: none; }
}

/* ---------- Atajos: marcador y "ya tengo la app" ---------- */
.shortcut-grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 900px) {
  .shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.shortcut {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
}
@media (min-width: 640px) {
  .shortcut { padding: 32px; }
}
.shortcut h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
}
.shortcut h3 .icon { color: var(--accent-text); }
.small { font-size: 0.8125rem; }
.bookmarklet-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 22px 16px;
  border-radius: 14px;
  border: 1.5px dashed var(--border-strong);
  background: var(--bg-elev);
}
.bookmarklet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
  cursor: grab;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bookmarklet { white-space: nowrap; }
@media (max-width: 420px) {
  .shortcut { padding: 24px 20px; }
  .bookmarklet-zone { padding: 18px 10px; }
  .bookmarklet { gap: 8px; padding: 9px 14px 9px 10px; font-size: 0.875rem; }
  .bookmarklet-grip { display: none; }
}
.bookmarklet:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.bookmarklet:active { cursor: grabbing; }
.bookmarklet img { width: 20px; height: 20px; }
.bookmarklet-grip { color: var(--text-faint); }
.bookmarklet.is-nudged { animation: nudge 0.5s var(--ease); }
.bookmarklet-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-faint);
  font-size: 0.8125rem;
  font-weight: 600;
}
.bookmarklet-arrow::before { content: "↑"; font-size: 1rem; }
.bookmarklet-hint:empty { display: none; }
.bookmarklet-hint {
  color: var(--accent-text);
  font-size: 0.875rem;
  font-weight: 600;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px) rotate(-2deg); }
  75% { transform: translateX(6px) rotate(2deg); }
}
.mini-steps {
  display: grid;
  gap: 6px;
  padding-left: 1.3em;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.mini-steps li::marker { color: var(--accent-text); font-weight: 700; }
.mini-steps strong { color: var(--text); }

.open-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
@media (min-width: 560px) {
  .open-form { flex-direction: row; }
}
.open-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text-faint);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.open-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.open-field.is-invalid { border-color: var(--danger); }
.open-field input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
}
.open-field input::placeholder { color: var(--text-faint); opacity: 1; }
.open-form .btn { min-height: 50px; }
.open-status:empty { display: none; }
.open-status { font-size: 0.9375rem; }
.open-status .status-line { display: flex; align-items: center; gap: 10px; color: var(--text-muted); }
.open-status .status-line .icon { color: var(--accent-text); }
.open-status .status-error { color: var(--danger-text); }
.open-status .callout { align-items: flex-start; }
.open-status .callout strong { display: block; color: var(--text); }
.open-status .callout-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.open-status .callout-actions a { font-weight: 650; }
.example-line { color: var(--text-muted); font-size: 0.9375rem; }
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-button:hover { text-decoration-thickness: 2px; }
.open-notes {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.open-notes li { display: flex; gap: 12px; }
.open-notes .icon { margin-top: 2px; color: var(--success); }
.spinner {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent-text);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Preguntas frecuentes ---------- */
.faq-layout {
  display: grid;
  gap: 8px;
}
@media (min-width: 960px) {
  .faq-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .faq-layout .section-head { position: sticky; top: calc(var(--header-h) + 32px); }
}
.faq { display: grid; gap: 10px; }
.faq-item {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease);
}
.faq-item[open] { border-color: var(--border-strong); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 14px;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 650;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-text); }
.faq-item summary .icon {
  color: var(--text-faint);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-body { padding: 0 20px 20px; color: var(--text-muted); }
.faq-body p + p { margin-top: 10px; }
.faq-body strong { color: var(--text); }

/* ---------- Llamado final ---------- */
.final-cta { padding-block: 16px 56px; }
@media (min-width: 900px) {
  .final-cta { padding-block: 16px 72px; }
}
.final-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 24px;
  border-radius: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.final-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(500px 260px at 15% 0%, rgb(99 102 241 / 0.22), transparent 70%),
    radial-gradient(500px 260px at 85% 100%, rgb(249 115 98 / 0.14), transparent 70%);
}
.final-card img { width: 56px; height: 56px; filter: drop-shadow(0 10px 24px rgb(99 102 241 / 0.4)); }
.final-card h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 750; }
.final-card p { color: var(--text-muted); }
.final-card .btn { margin-top: 10px; }