:root {
  --ground:    #F2F1EE;
  --raised:    #FBFAF8;
  --band:      #EBE9E4;
  --edge:      #DFDDD6;
  --ink:       #14171A;
  --ink-soft:  #545C5E;
  --ink-faint: #8B9394;
  --mint:      #1E9B77;
  --glow:      #5CCCA8;
  --ember:     #C9453B;
  --sand:      #8C857A;
  --violet:    #6E6BE0;
  --lift:      0 2px 6px rgba(20,30,28,.05), 0 26px 60px -24px rgba(20,30,28,.22);
  --veil:      rgba(242,241,238,.72);
  --noise:     .035;

  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #0E0F11;
    --raised:    #17191C;
    --band:      #131518;
    --edge:      #272B2F;
    --ink:       #EDEFEE;
    --ink-soft:  #A6AFB0;
    --ink-faint: #6E7779;
    --mint:      #5CCCA8;
    --glow:      #5CCCA8;
    --ember:     #ED6B61;
    --sand:      #B8B3A8;
    --violet:    #8B87F0;
    --lift:      0 2px 6px rgba(0,0,0,.5), 0 26px 60px -24px rgba(0,0,0,.8);
    --veil:      rgba(14,15,17,.72);
    --noise:     .05;
  }
}
:root[data-theme="dark"] {
  --ground:    #0E0F11;
  --raised:    #17191C;
  --band:      #131518;
  --edge:      #272B2F;
  --ink:       #EDEFEE;
  --ink-soft:  #A6AFB0;
  --ink-faint: #6E7779;
  --mint:      #5CCCA8;
  --glow:      #5CCCA8;
  --ember:     #ED6B61;
  --sand:      #B8B3A8;
  --violet:    #8B87F0;
  --lift:      0 2px 6px rgba(0,0,0,.5), 0 26px 60px -24px rgba(0,0,0,.8);
  --veil:      rgba(14,15,17,.72);
  --noise:     .05;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Grano finísimo sobre todo: es lo que separa un plano de color de una
   superficie. Se ve sin mirarlo. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: var(--noise);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.038em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 7vw, 4.8rem); line-height: .98; font-variation-settings: "opsz" 84; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.65rem); line-height: 1.05; }
h3 { font-family: var(--display); font-weight: 600; font-size: 1.02rem; margin: 0 0 .3rem; letter-spacing: -0.012em; }
p  { margin: 0; }
a  { color: inherit; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }

.shell { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 1.5rem; }
.prose { max-width: 40rem; }
.wrap  { width: 100%; max-width: 46rem; margin: 0 auto; padding-inline: 1.5rem; }
section { padding-block: clamp(4.5rem, 10vw, 8rem); position: relative; }
.band { background: var(--band); border-block: 1px solid var(--edge); }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--ink-soft); text-wrap: balance; }
.fine { font-size: .82rem; color: var(--ink-faint); }
.eyebrow {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .17em; color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
.head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }

/* ── Barra de arriba ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--veil); backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  border-bottom: 1px solid var(--edge);
}
.nav-in { display: flex; align-items: center; gap: 1.4rem; height: 3.6rem; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.02em; margin-right: auto; }
.brand svg { width: 20px; height: 20px; display: block; }
.nav-links { display: flex; gap: 1.4rem; }
.nav-links a { text-decoration: none; font-size: .88rem; font-weight: 500; color: var(--ink-soft); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 640px) { .nav-links { display: none; } }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .95rem; font-weight: 600; font-family: var(--body);
  padding: .8rem 1.55rem; border-radius: 999px;
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .22s, border-color .22s;
}
.btn-primary { background: var(--mint); color: var(--ground); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--mint) 90%, transparent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--mint) 95%, transparent); }
.btn-quiet { border-color: var(--edge); color: var(--ink); background: color-mix(in srgb, var(--raised) 70%, transparent); }
.btn-quiet:hover { background: var(--raised); border-color: var(--ink-faint); transform: translateY(-1px); }
.btn-sm { padding: .48rem 1.05rem; font-size: .86rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.actions.mid { justify-content: center; }

/* ── Portada ── */
.hero { padding-top: clamp(3.5rem, 8vw, 5.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; overflow: hidden; }
/* La misma malla de color que la app pinta detrás del vidrio. Aquí es lo
   único que hay de fondo, así que va muy diluida: tiene que notarse sin
   que se pueda señalar. */
.hero::before {
  content: ""; position: absolute; inset: -25% -15% auto -15%; height: 105%;
  background:
    radial-gradient(38rem 26rem at 20% 14%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 68%),
    radial-gradient(32rem 24rem at 82% 6%,  color-mix(in srgb, var(--violet) 18%, transparent), transparent 68%),
    radial-gradient(30rem 22rem at 62% 72%, color-mix(in srgb, var(--sand) 22%, transparent), transparent 68%);
  filter: blur(26px); z-index: 0; pointer-events: none;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 2%, 0) scale(1.06); }
}
.hero > .shell { position: relative; z-index: 1; display: grid; gap: 1.5rem; justify-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 500; color: var(--ink-soft);
  border: 1px solid var(--edge); border-radius: 999px;
  padding: .34rem .85rem; background: color-mix(in srgb, var(--raised) 65%, transparent);
  backdrop-filter: blur(8px);
}
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }
/* El PNG lleva un 10% de margen transparente, así que ni border-radius ni
   box-shadow valen aquí: dibujarían el rectángulo del lienzo, separado del
   icono. drop-shadow sigue el canal alfa, o sea la silueta de verdad. */
.icon {
  width: clamp(8.5rem, 20vw, 11rem); height: auto; margin-bottom: -.3rem;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.20)) drop-shadow(0 26px 44px rgba(0,0,0,.34));
  animation: land .8s cubic-bezier(.2,.9,.25,1) both;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon {
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)) drop-shadow(0 26px 50px rgba(0,0,0,.6));
  }
}
:root[data-theme="dark"] .icon {
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)) drop-shadow(0 26px 50px rgba(0,0,0,.6));
}
@keyframes land { from { opacity: 0; transform: translateY(22px) scale(.9); } to { opacity: 1; transform: none; } }
.hero .lede { max-width: 34rem; }
.hero .fine { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.hero .fine span + span::before { content: "·"; margin-right: .55rem; color: var(--edge); }

/* ── Rejilla de fichas ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; }
.tile {
  border: 1px solid var(--edge); border-radius: 20px; padding: 1.5rem 1.4rem;
  background: var(--raised); text-align: left;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.tile p { font-size: .91rem; color: var(--ink-soft); }
.tile .cap { display: block; margin-bottom: .95rem; }
.tile .cap svg { display: block; }

/* ── Banda de una sola frase ── */
.split { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
@media (min-width: 860px) { .split { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }
.stat { font-family: var(--display); font-size: clamp(2.6rem, 5.5vw, 3.6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--mint); }


/* ── Pasos ── */
.steps { counter-reset: s; display: grid; gap: .85rem; max-width: 38rem; }
.step {
  display: grid; grid-template-columns: 1.85rem 1fr; gap: 1rem; align-items: start;
  padding: 1rem 1.15rem; border: 1px solid var(--edge); border-radius: 15px;
  background: var(--raised);
}
.step::before {
  counter-increment: s; content: counter(s);
  font-family: var(--mono); font-size: .74rem;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  border: 1px solid var(--edge); color: var(--ink-faint);
  display: grid; place-items: center;
}
.step p { font-size: .93rem; color: var(--ink-soft); }
.step b { color: var(--ink); font-weight: 600; }
kbd, code { font-family: var(--mono); font-size: .86em; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--edge); border-radius: 5px; padding: .08em .4em; }

/* ── Preguntas ── */
.faq { max-width: 40rem; }
details { border-top: 1px solid var(--edge); }
details:last-child { border-bottom: 1px solid var(--edge); }
summary { cursor: pointer; list-style: none; padding: 1.15rem 0; font-weight: 600; font-size: .97rem; display: flex; justify-content: space-between; gap: 1rem; transition: color .2s; }
summary:hover { color: var(--mint); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--mono); color: var(--ink-faint); font-weight: 400; }
details[open] summary::after { content: "–"; }
details p { padding-bottom: 1.15rem; font-size: .92rem; color: var(--ink-soft); max-width: 34rem; }

/* ── Cierre ── */
.close { text-align: center; display: grid; gap: 1.7rem; justify-items: center; }

footer { border-top: 1px solid var(--edge); padding-block: 2.8rem; color: var(--ink-faint); font-size: .85rem; }
.foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.foot .brand { font-size: .95rem; color: var(--ink); }
.foot-links { display: flex; gap: 1.3rem; margin-left: auto; }
.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; }
.made { display: inline-flex; align-items: center; gap: .38em; }
.made .heart { width: .95em; height: .95em; color: var(--ember); transform-origin: center; animation: beat 2.6s ease-in-out infinite; }
@keyframes beat { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.22); } 86% { transform: scale(1.05); } 92% { transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) { .made .heart { animation: none; } }
footer a { text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--mint); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* La demo se escribió cuando el body entero iba centrado. Ya no lo va, así
   que el centrado se le devuelve aquí — sin tocar ni una regla suya. */
#stage { text-align: center; }

/* ── El escenario: la mecánica de la app, jugable ── */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 19rem) 1fr;
  align-items: center; justify-items: center;
  gap: clamp(.4rem, 3vw, 2rem);
  padding-bottom: 4.5rem;
}
.rumbo {
  display: grid; justify-items: center; gap: .4rem;
  color: var(--ink-faint); cursor: pointer;
  transition: color .25s, transform .25s;
}
.rumbo svg { width: 30px; height: 30px; }
.rumbo-label { font-size: .76rem; font-weight: 600; }
.key {
  font-family: var(--mono); font-size: .68rem;
  border: 1px solid var(--edge); border-radius: 5px;
  padding: .08rem .38rem; color: var(--ink-faint);
}
.rumbo.lit { transform: scale(1.14); }
.rumbo.lit[data-r="file"]  { color: var(--mint); }
.rumbo.lit[data-r="trash"] { color: var(--ember); }
.rumbo.lit[data-r="keep"]  { color: var(--sand); }
.rumbo[data-r="keep"] { grid-column: 2; grid-row: 2; margin-top: -3rem; }
.deck { grid-column: 2; grid-row: 1; width: 100%; }

.card {
  background: var(--raised); border: 1px solid var(--edge);
  border-radius: 22px; box-shadow: var(--lift);
  padding: 1.15rem; display: grid; gap: .8rem; text-align: left;
  transition: transform .48s cubic-bezier(.22,.9,.28,1), opacity .42s ease;
}
.card.gone { opacity: 0; }
.thumb {
  height: 4.6rem; border-radius: 13px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--edge);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--ink-faint);
}
.nuevo { font-family: var(--mono); font-size: .88rem; font-weight: 500; word-break: break-all; line-height: 1.35; }
.viejo {
  font-family: var(--mono); font-size: .71rem; color: var(--ink-faint);
  text-decoration: line-through; word-break: break-all; margin-top: .2rem;
}
.row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pill {
  font-size: .74rem; font-weight: 600; padding: .28rem .62rem; border-radius: 999px;
  background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--mint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pill.trash { background: color-mix(in srgb, var(--ember) 14%, transparent); color: var(--ember); }
.pill.keep  { background: color-mix(in srgb, var(--sand) 20%, transparent);  color: var(--sand); }
.bars { display: flex; align-items: flex-end; gap: 2.5px; flex-shrink: 0; }
.bars i { width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.bars i:nth-child(1){height:7px} .bars i:nth-child(2){height:9px}
.bars i:nth-child(3){height:11px} .bars i:nth-child(4){height:13px}
.bars i.f { background: var(--mint); }
.why { font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }
.hint { position: absolute; bottom: 1rem; left: 0; right: 0; font-size: .82rem; color: var(--ink-faint); }

/* ══════════════════════════════════════════════════════════════════
   Lo que hace falta saber antes de pagar
   ══════════════════════════════════════════════════════════════════ */

/* ── Requisitos: la lista que evita una devolución ──
   Va con marca de verificación o de aviso, no con viñetas: un requisito es
   algo que se cumple o no se cumple, y la forma del icono ya lo dice. */
.req { display: grid; gap: .1rem; max-width: 40rem; }
.req-row {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .95rem;
  align-items: start; padding: 1.05rem .2rem;
  border-top: 1px solid var(--edge);
}
.req-row:last-child { border-bottom: 1px solid var(--edge); }
.req-row svg { width: 1.15rem; height: 1.15rem; margin-top: .28rem; }
.req-row .must { color: var(--mint); }
.req-row .warn { color: var(--sand); }
.req-row b { display: block; font-weight: 600; font-size: .97rem; margin-bottom: .15rem; }
.req-row p { font-size: .89rem; color: var(--ink-soft); }
.req-row code { font-size: .82em; }

/* ── Recuadro de aviso ──
   Un párrafo con un filo de color a la izquierda. Se usa para lo que costaría
   dinero no leer, así que no puede parecerse a un párrafo normal. */
.note {
  border-left: 3px solid var(--sand);
  background: color-mix(in srgb, var(--sand) 8%, transparent);
  border-radius: 0 13px 13px 0;
  padding: 1.05rem 1.25rem; max-width: 40rem;
  font-size: .9rem; color: var(--ink-soft);
}
.note.good { border-left-color: var(--mint); background: color-mix(in srgb, var(--mint) 8%, transparent); }
.note b { color: var(--ink); }

/* ── Lo que no hace ──
   Dos columnas de frases cortas, cada una con una raya en vez de un tic. La
   raya es deliberada: no es una carencia disfrazada de virtud, es un «no». */
.nots { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .1rem 2.5rem; max-width: 46rem; }
.nots div { border-top: 1px solid var(--edge); padding: .95rem .2rem; }
.nots b { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .1rem; }
.nots p { font-size: .86rem; color: var(--ink-soft); }

/* ── Capturas y vídeo ── */
.shot { margin: 0; display: grid; gap: .8rem; }
.shot img, .shot video {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--edge); border-radius: 18px;
  background: var(--raised); box-shadow: var(--lift);
}
.shot figcaption { font-size: .84rem; color: var(--ink-faint); text-align: center; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.6rem; }

/* ── Números honestos ──
   Cifras que se pueden comprobar, no cifras de marketing. */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.6rem 1rem; }
.fig { text-align: left; }
.fig b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -0.04em; line-height: 1;
  color: var(--mint); margin-bottom: .35rem;
}
.fig span { font-size: .86rem; color: var(--ink-soft); }

/* ══════════════════════════════════════════════════════════════════
   Páginas de texto (soporte, privacidad, novedades)
   ══════════════════════════════════════════════════════════════════ */
.page { padding-block: clamp(3rem, 7vw, 5rem); }
.page h1 { font-size: clamp(2.1rem, 5vw, 3rem); margin-bottom: .8rem; }
.page h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-top: 2.8rem; margin-bottom: .7rem; }
.page h3 { font-size: 1rem; margin-top: 1.8rem; }
.page p, .page li { font-size: .95rem; color: var(--ink-soft); }
.page p + p { margin-top: .9rem; }
.page ul { padding-left: 1.15rem; margin: .8rem 0; display: grid; gap: .38rem; }
.page a:not(.btn) { color: var(--mint); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--mint) 35%, transparent); }
.page a:not(.btn):hover { border-bottom-color: var(--mint); }
.page .back { font-size: .87rem; color: var(--ink-faint); display: inline-block; margin-bottom: 1.6rem; text-decoration: none; }
.page .back:hover { color: var(--mint); }
.page time { font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); }

/* ── Una versión del changelog ── */
.rel { border-top: 1px solid var(--edge); padding-block: 1.8rem; }
.rel:last-child { border-bottom: 1px solid var(--edge); }
.rel-head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: .8rem; }
.rel-head h2 { font-size: 1.35rem; margin: 0; }
.rel ul { list-style: none; padding: 0; display: grid; gap: .5rem; margin: 0; }
.rel li { display: grid; grid-template-columns: .55rem 1fr; gap: .8rem; align-items: start; font-size: .93rem; }
.rel li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); margin-top: .62rem; }


/* ══════════════════════════════════════════════════════════════════
   MOVIMIENTO Y BARRA FLOTANTE
   Regla única: nada se mueve porque sí. Cada animación o explica algo
   (el desorden, el renombrado, la baraja) o responde a la mano del
   que mira. Lo decorativo puro se queda fuera.
   ══════════════════════════════════════════════════════════════════ */

/* ── Progreso de lectura ──
   Un hilo en el filo mismo de la ventana, por encima de todo. Va suelto
   de la barra a propósito: metido dentro de la píldora la ensuciaba. */
.prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.prog i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--mint), var(--glow));
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
}

/* ── La barra, flotando ──
   Una píldora despegada del borde en vez de una cinta pegada arriba.
   Se encoge al bajar, se esconde cuando el que lee va hacia abajo y
   vuelve en cuanto sube: la barra estorba mientras se lee y hace
   falta en cuanto se busca. */
.nav {
  /* Centrada con márgenes automáticos, no con translate. Así `translate`
     queda libre para esconderla, y si el navegador no lo entendiera la
     barra seguiría en su sitio en vez de irse fuera de la pantalla. */
  position: fixed; top: .85rem; left: 0; right: 0; z-index: 50;
  width: min(62rem, calc(100% - 1.6rem));
  margin-inline: auto;
  border: 1px solid var(--edge); border-radius: 999px;
  background: var(--veil);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 12px 34px -20px rgba(0,0,0,.4);
  /* Sin transición hasta que la página se asienta. Al cargar, el navegador
     restaura el scroll y dispara un evento: con la transición ya puesta,
     la barra se encogía y se estiraba sola antes de que nadie tocara nada. */
  transition: none;
}
.nav.viva {
  transition: translate .5s cubic-bezier(.2,.85,.3,1), width .5s cubic-bezier(.2,.85,.3,1),
              box-shadow .4s, background .4s, border-color .4s, top .4s;
}
.nav.stuck {
  width: min(48rem, calc(100% - 1.6rem)); top: .6rem;
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.55);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
}
.nav.oculta { translate: 0 -200%; }
.nav-in { height: 3.15rem; gap: .9rem; padding-inline: 1.15rem; max-width: none; }
.brand svg { transition: transform .5s cubic-bezier(.2,.9,.3,1); }
.brand:hover svg { transform: rotate(-90deg); }

/* ── El indicador que se desliza ──
   En vez de subrayar el enlace de destino, una píldora que viaja hasta
   la sección en la que estás. Dice dónde estás sin que haya que leerlo. */
.nav-links { position: relative; gap: .1rem; }
.nav-links a { padding: .36rem .68rem; border-radius: 999px; position: relative; z-index: 1; }
.nav-links a.aqui { color: var(--ink); }
.nav-links .marca {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 0;
  border-radius: 999px; opacity: 0;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  transition: transform .45s cubic-bezier(.2,.9,.3,1), width .45s cubic-bezier(.2,.9,.3,1), opacity .3s;
}

/* ── Claro y oscuro a mano ──
   La hoja ya sabía pintarse de las dos maneras; lo único que faltaba
   era dejar elegir en vez de obedecer al sistema y punto. */
.tema {
  width: 2rem; height: 2rem; flex-shrink: 0; padding: 0; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 999px; background: transparent;
  color: var(--ink-faint); display: grid; place-items: center;
  transition: color .2s, border-color .2s, rotate .45s cubic-bezier(.2,.9,.3,1);
}
.tema:hover { color: var(--ink); border-color: var(--ink-faint); rotate: -25deg; }
.tema svg { width: 15px; height: 15px; display: block; }
.tema .sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema .sol  { display: block; }
  :root:not([data-theme="light"]) .tema .luna { display: none; }
}
:root[data-theme="dark"]  .tema .sol { display: block; }
:root[data-theme="dark"]  .tema .luna { display: none; }
:root[data-theme="light"] .tema .sol { display: none; }
:root[data-theme="light"] .tema .luna { display: block; }
@media (max-width: 420px) { .tema { display: none; } }

/* La portada arranca más abajo: la píldora flota por encima y el icono
   no puede quedarse debajo de ella. */
.hero { padding-top: clamp(6rem, 11vw, 8rem); }
html { scroll-padding-top: 6rem; }

/* ── Titular que se levanta palabra a palabra ──
   El overflow recorta, así que hace falta sitio para las colas de la
   «y» y la «g»: padding abajo y margen negativo que lo devuelve. */
.rise span { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.rise span > i {
  display: inline-block; font-style: inherit;
  transform: translateY(110%);
  animation: rise .95s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i, 0) * 52ms + 90ms);
}
@keyframes rise { to { transform: none; } }

/* ── La malla de la portada sigue al cursor ──
   El giro lento lo lleva `transform`, así que el desplazamiento del
   cursor va por `translate`: dos propiedades distintas, ninguna pisa
   a la otra. */
.hero::before {
  translate: calc(var(--hx, 0) * 1px) calc(var(--hy, 0) * 1px);
  transition: translate .7s cubic-bezier(.2,.8,.3,1);
}

/* ── Aparecer al entrar en pantalla ── */
.reveal { opacity: 0; transform: translateY(20px); filter: blur(7px); transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1), filter .7s ease; }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ── Botones que se inclinan hacia el cursor ──
   Va por `translate`, no por `transform`: el `transform` ya lo usa el
   :hover para levantar el botón, y dos reglas peleándose por la misma
   propiedad es exactamente lo que hacía que temblara. */
.btn { translate: var(--mx, 0px) var(--my, 0px); }
.btn.vuelve { transition: transform .18s cubic-bezier(.2,.8,.3,1), translate .45s cubic-bezier(.2,1.2,.4,1), box-shadow .22s, background .22s, border-color .22s; }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-130%);
}
.btn-primary:hover::after { animation: sheen .85s cubic-bezier(.3,.7,.4,1) forwards; }
@keyframes sheen { to { transform: translateX(130%); } }

/* ── El desorden, en movimiento ── */
.mess { padding-block: clamp(2rem, 5vw, 3.2rem) 0; overflow: hidden; position: relative; }
.mess::before, .mess::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(3rem, 12vw, 9rem); z-index: 2; pointer-events: none;
}
.mess::before { left: 0;  background: linear-gradient(90deg, var(--ground), transparent); }
.mess::after  { right: 0; background: linear-gradient(270deg, var(--ground), transparent); }
.lane { display: flex; width: max-content; gap: .55rem; margin-bottom: .55rem; will-change: transform; }
.lane b {
  font-family: var(--mono); font-size: .78rem; font-weight: 400;
  color: var(--ink-faint); white-space: nowrap;
  border: 1px solid var(--edge); border-radius: 9px;
  padding: .42rem .8rem; background: color-mix(in srgb, var(--raised) 55%, transparent);
}
.mess .fine { text-align: center; margin-top: 1.1rem; }

/* ── El renombrado, en directo ── */
.morph {
  display: grid; gap: .55rem; justify-items: center; text-align: center;
  border: 1px solid var(--edge); border-radius: 20px; background: var(--raised);
  padding: clamp(1.4rem, 4vw, 2.1rem); max-width: 34rem; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem);
  box-shadow: var(--lift);
}
.morph .from, .morph .to { font-family: var(--mono); font-size: clamp(.76rem, 2vw, .9rem); word-break: break-all; line-height: 1.5; }
.morph .from { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ember) 70%, transparent); }
.morph .to { color: var(--mint); font-weight: 500; min-height: 1.5em; }
.morph .to::after { content: "▌"; color: var(--mint); animation: caret 1s steps(2) infinite; margin-left: .05em; }
.morph.done .to::after { animation: none; opacity: 0; }
@keyframes caret { 50% { opacity: 0; } }
.morph .arrow svg { display: block; width: 18px; height: 18px; color: var(--ink-faint); animation: nudge 1.9s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ── Fichas con foco ──
   El halo va DETRÁS del texto. Es un position:absolute, y un
   position:absolute sin z-index se pinta por encima de todo lo que no
   esté posicionado: eso es lo que tapaba el contenido al pasar por
   encima. Por eso el halo lleva z-index 0 y el contenido, 1. */
.tile { position: relative; overflow: hidden; }
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .35s;
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--mint) 13%, transparent), transparent 70%);
}
.tile:hover::before { opacity: 1; }
.tile > * { position: relative; z-index: 1; }
.tile .cap svg { transition: transform .35s cubic-bezier(.2,.8,.3,1); }
.tile:hover .cap svg { transform: translateX(3px) scale(1.12); }

/* ── Cifras que se cuentan solas ── */
.fig b { font-variant-numeric: tabular-nums; }


/* ── Preguntas que se abren de verdad ── */
summary { position: relative; align-items: center; }
summary::after { transition: transform .32s cubic-bezier(.2,.8,.3,1), color .2s; display: inline-block; }
details[open] summary::after { content: "+"; transform: rotate(45deg); color: var(--mint); }
.faq .body { overflow: hidden; }
details p { margin: 0; }

/* ── La baraja jugable ── */
.deck { position: relative; }
.ghost {
  position: absolute; inset: 0; border-radius: 22px;
  background: var(--raised); border: 1px solid var(--edge);
  transition: transform .45s cubic-bezier(.2,.8,.3,1), opacity .45s;
  z-index: 0;
}
.ghost.g1 { transform: translateY(10px) scale(.965); opacity: .75; }
.ghost.g2 { transform: translateY(20px) scale(.93);  opacity: .45; }
.deck.empty .ghost { opacity: 0; transform: translateY(30px) scale(.9); }
.card { position: relative; z-index: 1; touch-action: pan-y; cursor: grab; }
.card.drag { cursor: grabbing; transition: none; }
.rumbo { transition: color .25s, transform .25s cubic-bezier(.2,.8,.3,1); }
.rumbo:hover { color: var(--ink-soft); transform: scale(1.06); }
.rumbo.lit { transform: scale(1.18); }
/* La tecla se hunde y se enciende del color del destino: la página
   contesta a la tecla de verdad que se acaba de pulsar. */
.key { transition: background .16s, color .16s, border-color .16s, transform .16s; }
.rumbo.lit .key { background: currentColor; color: var(--ground); border-color: currentColor; transform: translateY(2px) scale(.94); }
.dots { display: flex; gap: .35rem; justify-content: center; margin-top: 1.1rem; }
.dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  transition: background .3s, transform .3s;
}
.dots i.on { background: var(--mint); transform: scale(1.3); }

/* ── El vídeo entra con peso ── */
.shot video, .shot img { transition: transform .9s cubic-bezier(.16,1,.3,1); }
.shot.reveal video { transform: scale(.97); }
.shot.reveal.in video { transform: none; }

/* ── El icono respira ── */
.icon { animation: land .8s cubic-bezier(.2,.9,.25,1) both, float 7s ease-in-out 1s infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ── Sin movimiento, si así lo pide el sistema ──
   No es un apagado a medias: se quedan los estados finales. */
@media (prefers-reduced-motion: reduce) {
  .rise span > i { transform: none; animation: none; }
  .icon { animation: none; }
  .lane { transform: none !important; }
  .morph .to::after, .morph .arrow svg { animation: none; }
  .btn { translate: none !important; }
  .btn-primary:hover::after { animation: none; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .nav.oculta { translate: none; }
  .hero::before { translate: none; }
}


/* ══════════════════════════════════════════════════════════════════
   ACABADO
   ══════════════════════════════════════════════════════════════════ */

/* ── El horizonte entre secciones ──
   Una línea que se apaga hacia los lados en vez de un borde de lado a
   lado. Separa sin cortar, que es lo que hace un borde recto. */
.band { border-block: 0; }
.band::before, .band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--edge) 18%, var(--edge) 82%, transparent);
}
.band::before { top: 0; }
.band::after  { bottom: 0; }
/* Dos bandas seguidas comparten una sola línea. */
.band + .band::before { display: none; }

/* ── Textura en las bandas ──
   Una cuadrícula tenue detrás del contenido. No se mira, se nota: es la
   diferencia entre un fondo y una superficie. */
.band > .shell { position: relative; z-index: 1; }
.band > *:not(.shell) { position: relative; z-index: 1; }

/* ── Filas que entran de una en una ──
   Los requisitos y los «no hace» son listas largas. Entrando de golpe
   son un muro; entrando escalonadas se leen. */
.req-row, .nots div, .step, .reveal:not(.in) .req-row,
.reveal:not(.in) .nots div,
.reveal:not(.in) .reveal.in .req-row, .reveal.in .nots div, .reveal.in .reveal.in .req-row:nth-child(2),  .reveal.in .nots div:nth-child(2),  .reveal.in .pruebas li:nth-child(2)  { transition-delay: .07s; }
.reveal.in .req-row:nth-child(3),  .reveal.in .nots div:nth-child(3),  .reveal.in .pruebas li:nth-child(3)  { transition-delay: .14s; }
.reveal.in .req-row:nth-child(4),  .reveal.in .nots div:nth-child(4),  .reveal.in .pruebas li:nth-child(4)  { transition-delay: .21s; }
.reveal.in .req-row:nth-child(5),  .reveal.in .nots div:nth-child(5),  .reveal.in .pruebas li:nth-child(5)  { transition-delay: .28s; }
.reveal.in .req-row:nth-child(6),  .reveal.in .nots div:nth-child(6) { transition-delay: .35s; }

/* ── Preguntas: la fila entera responde, no sólo el texto ── */
details { transition: background .25s; border-radius: 10px; }
summary { padding-inline: .75rem; margin-inline: -.75rem; border-radius: 10px; transition: color .2s, background .25s; }
summary:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
details[open] { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
details[open] .body { padding-inline: .75rem; margin-inline: -.75rem; }

/* ── Los pasos de instalación, con vida ── */
.step { transition: border-color .3s, background .3s, transform .3s cubic-bezier(.2,.8,.3,1); }
.step:hover { border-color: color-mix(in srgb, var(--mint) 45%, transparent); transform: translateX(4px); }
.step:hover::before { color: var(--mint); border-color: var(--mint); }
.step::before { transition: color .3s, border-color .3s; }

/* ── Los avisos ── */
.note { transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.note:hover { transform: translateX(3px); }

/* ── Foco visible también en el interruptor de tema ── */
.tema:focus-visible { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .reveal:not(.in) .req-row,
  .reveal:not(.in) .nots div,
  .reveal:not(.in)   .step:hover, .note:hover { transform: none; }
}

/* Las páginas de texto también viven bajo una barra flotante: el
   contenido tiene que arrancar por debajo de ella, no detrás. */
.page { padding-top: clamp(6.5rem, 10vw, 8rem); }


/* ══════════════════════════════════════════════════════════════════
   EL PRECIO
   Se rehízo entero. La versión anterior apilaba una tarjeta, un anillo
   de luz en ::before y un halo que seguía al cursor, y bastaba que uno
   de los tres se pintara en el orden equivocado para tapar la cifra.
   Aquí no hay ni pseudoelementos ni capas absolutas: un número, tres
   pruebas y dos botones. No hay nada que pueda ponerse por delante.
   ══════════════════════════════════════════════════════════════════ */
.tarifa {
  max-width: 33rem; margin-inline: auto; text-align: center;
  display: grid; gap: 1.35rem; justify-items: center;
  background: var(--raised); border: 1px solid var(--edge);
  border-radius: 28px; padding: clamp(2.6rem, 6vw, 3.8rem);
  box-shadow: var(--lift);
}
.tarifa .eyebrow { margin-bottom: 0; }
.cifra {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(4.2rem, 13vw, 6.2rem); line-height: .88;
  letter-spacing: -0.055em; color: var(--ink);
}
.unavez { color: var(--ink-soft); font-size: 1.05rem; margin-top: -.7rem; }
/* Tres pruebas en una fila, no cinco frases en una columna. Lo que hay
   que saber para decidir cabe en una línea; lo demás está más abajo. */
.pruebas {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.1rem;
}
.pruebas li { display: flex; align-items: baseline; gap: .42rem; font-size: .87rem; color: var(--ink-faint); }
.pruebas b {
  font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: -0.03em; color: var(--mint);
}
.tarifa .fine a { color: var(--mint); text-decoration: none; }
.tarifa .fine a:hover { text-decoration: underline; }

/* ── El acabado del precio ──
   Todo lo que se mueve aquí va DETRÁS de la tarjeta o DENTRO de la
   propia cifra. Ni una capa nueva por encima: eso es exactamente lo
   que tapaba el número en la versión anterior. */

/* El aura, en la sección y por debajo de todo. Se centra con el propio
   degradado, no con translate, para que no dependa de nada. */
#precio { overflow: hidden; }
#precio::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(38rem 26rem at 50% 50%, color-mix(in srgb, var(--glow) 15%, transparent), transparent 64%);
  animation: aura 9s ease-in-out infinite alternate;
}
@keyframes aura { from { opacity: .5;  scale: .96; } to { opacity: 1; scale: 1.05; } }
#precio > .shell { position: relative; z-index: 1; }

/* La tarjeta se levanta y el borde se entibia. Sombra y borde, nada más:
   ninguna capa que pueda ponerse delante. */
.tarifa { transition: transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s, border-color .45s; }
.tarifa:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--mint) 42%, transparent);
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 38px 74px -30px color-mix(in srgb, var(--mint) 50%, transparent);
}

/* ── La cifra, cayendo dígito a dígito ──
   Cada carácter en su propia ventana. Es la misma mecánica que el
   titular de la portada, y llega justo después de que la tarjeta se
   pose: primero aterriza el sitio, luego aparece el precio. */
.cifra span { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.cifra span > i {
  display: inline-block; font-style: normal;
  transform: translateY(115%);
  transition: transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 60ms + 160ms);
}
.cifra.va span > i { transform: none; }

/* Las tres pruebas: el número entra con un punto de rebote. */
.pruebas b { display: inline-block; transition: transform .55s cubic-bezier(.2,1.6,.4,1); }
.reveal:not(.in) .pruebas b { transform: scale(.3); }
/* Y el infinito da una vuelta entera cuando alguien se acerca a comprar. */
.inf { transition: rotate .5s ease; }
.tarifa:hover .inf { rotate: 360deg; transition: rotate 1.5s cubic-bezier(.4,0,.2,1); }

@media (prefers-reduced-motion: reduce) {
  #precio::before { animation: none; }
  .cifra span > i { transform: none; transition: none; }
  .reveal:not(.in) .pruebas b { transform: none; }
  .tarifa:hover { transform: none; }
  .tarifa:hover .inf { rotate: none; }
}