/* Landing pública de Bloopy (dirección rosa). Los colores salen de tokens.css (--ap-* y los
   --lp-* de la landing); aquí solo hay composición. Portada en campo rosa con un cuadro tramado,
   «Cómo funciona» en franja de tinta, contenido en papel con títulos en serifa y cierre tramado.
   El papel pasa a noche de tinta en oscuro. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.landing {
  margin: 0;
  background: var(--ap-bg);
  font-size: var(--ap-text-body);
  line-height: var(--ap-leading-body);
  overflow-x: clip;
}
/* Sin la capa de esferas de la app: la portada pinta las suyas detrás de la maqueta. */
body.landing::before { content: none; }
/* Papel de los apuntes (página de ejemplo y maquetas): un solo valor por tema. */
body.landing { --paper: color-mix(in srgb, var(--ap-bg) 30%, white); }
@media (prefers-color-scheme: dark) { body.landing { --paper: var(--ap-paper-dark); } }
img { max-width: 100%; display: block; }
a { color: var(--ap-accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* El contorno usa el rosa oscuro de texto: el rosa de marca no llega a 3:1 sobre crema. */
:focus-visible { outline: 2.5px solid var(--ap-accent); outline-offset: 3px; }
::selection { background: var(--ap-selection); color: var(--ap-ink); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--ap-glass-3); border-radius: var(--ap-radius-xs); }
.skip-link:focus { left: 8px; }

h1, h2, h3, h4 { margin: 0; font-family: var(--ap-font-display); text-wrap: balance; letter-spacing: var(--ap-tracking-title); line-height: 1.05; font-weight: 800; }
h2 { font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -0.04em; line-height: 0.98; }
h3 { font-size: 20px; letter-spacing: -0.02em; }
p { margin: 0; }

.ap-wordmark { font-family: var(--ap-font-display); font-weight: 800; font-size: var(--ap-text-section); line-height: 1; letter-spacing: -0.045em; color: var(--ap-ink); }
.ap-wordmark i { font-style: normal; color: var(--ap-brand); }

/* Ancho común de las secciones de contenido. */
.notes, .features, .pricing, .faq, .foot-inner {
  width: min(1180px, 100% - 2 * var(--ap-gutter));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- Vidrio líquido
   Desenfoque + saturación, un reflejo diagonal y un borde luminoso que se
   enciende arriba y se tiñe de rosa abajo. */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--ap-glass-1);
  border: 1px solid var(--ap-glass-edge);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--ap-glass-sheen), var(--ap-shadow-2);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, var(--ap-glass-sheen) 0%, var(--ap-glass-sheen-soft) 38%, transparent 60%, var(--ap-glass-sheen-soft) 100%);
}
.glass::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg, var(--ap-glass-rim), transparent 35%, transparent 70%, var(--ap-glass-rim-tint));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ap-space-2);
  min-height: 44px;
  padding: 0 var(--ap-space-5);
  border-radius: var(--ap-radius-pill);
  border: 1px solid transparent;
  font-family: var(--ap-font);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--ap-dur-base) var(--ap-ease-spring), box-shadow var(--ap-dur-base) var(--ap-ease), background-color var(--ap-dur-fast) var(--ap-ease);
}
/* «Crear cuenta gratis» de la barra: el texto y su «gratis» van en dos nodos; sin gap no sale doble espacio. */
.nav-actions .btn-primary { gap: 0; }
/* Un hijo de flex pierde su espacio inicial: «pre» lo conserva («Crear cuenta gratis», no «cuentagratis»). */
.nav-cta-extra { white-space: pre; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }
a.btn-primary, .btn-primary {
  color: var(--ap-on-brand);
  background: var(--ap-brand);
  box-shadow: inset 0 1px 0 var(--ap-glass-sheen), inset 0 -8px 16px -8px color-mix(in srgb, var(--ap-accent-deep) 70%, transparent), 0 12px 24px -10px color-mix(in srgb, var(--ap-brand) 70%, transparent);
}
a.btn-ghost, .btn-ghost {
  color: var(--ap-ink);
  background: var(--ap-glass-2);
  border-color: var(--ap-glass-edge);
  backdrop-filter: var(--ap-glass-blur);
  -webkit-backdrop-filter: var(--ap-glass-blur);
  box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1);
}
.btn-ghost:hover { background: var(--ap-glass-3); }
.btn-lg { min-height: 54px; padding-inline: 26px; font-size: var(--ap-text-body); }

/* ---------- Barra: píldora de vidrio flotando sobre la página ---------- */
.nav {
  position: fixed;
  z-index: 30;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 0;
  right: 0;
  pointer-events: none;
}
.nav-inner {
  position: relative;
  pointer-events: auto;
  width: min(1180px, 100% - 24px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--ap-space-4);
  padding: 7px 7px 7px 16px;
  border-radius: var(--ap-radius-pill);
  /* Más opaca que el vidrio general: la barra pasa sobre todo el contenido y su texto tiene que leerse siempre. */
  background: var(--ap-glass-3);
}
.brand { display: inline-flex; flex: none; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border-radius: var(--ap-radius-pill);
  color: var(--ap-ink-2);
  font-size: var(--ap-text-ui);
  font-weight: 600;
  text-decoration: none;
}
.nav-links a:hover { color: var(--ap-ink); background: var(--ap-glass-2); }
/* La sección que se está leyendo: la píldora gooey va debajo (landing.js) y el texto se invierte. */
.nav-links.has-goo a { transition: color 320ms var(--ap-ease); }
.nav-links.has-goo a[aria-current],
.nav-links.has-goo a[aria-current]:hover { color: var(--ap-bg); background: transparent; }
.nav-actions { display: flex; align-items: center; gap: 4px; }
.nav-actions .btn { min-height: 44px; padding-inline: 18px; font-size: var(--ap-text-ui); }
.nav-menu-btn { display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ap-ink); cursor: pointer; }
.nav-menu-btn:hover { background: var(--ap-glass-2); }
.nav-menu-btn path { transition: transform var(--ap-dur-base) var(--ap-ease); transform-origin: 12px 12px; }
.menu-open .nav-menu-btn .menu-line-a { transform: translateY(4px) rotate(45deg); }
.menu-open .nav-menu-btn .menu-line-b { transform: translateY(-4px) rotate(-45deg); }
/* Por debajo de 860 px los enlaces se pliegan tras el botón de menú, en un panel bajo la barra. */
@media (max-width: 860px) {
  .nav-actions { margin-left: auto; }
  .nav-menu-btn:not([hidden]) { display: grid; }
  .nav-links { display: none; }
  .menu-open .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    gap: 2px;
    padding: 8px;
    border-radius: 24px;
    border: 1px solid var(--ap-glass-edge);
    background: var(--ap-bg);
    box-shadow: var(--ap-shadow-3);
    animation: menu-in 260ms var(--ap-ease) both;
  }
  .menu-open .nav-links a { display: flex; align-items: center; min-height: 48px; padding-inline: 16px; font-size: var(--ap-text-body); color: var(--ap-ink); }
  /* Plegado, el menú no lleva píldora: la sección actual lleva un fondo suave. */
  .nav-links .goo-layer { display: none; }
  .menu-open .nav-links.has-goo a[aria-current] { color: var(--ap-ink); background: var(--ap-bg-deep); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
/* En el móvil «Entrar» sigue visible: quien ya tiene cuenta entra desde aquí. */
@media (max-width: 560px) {
  .nav-inner { gap: var(--ap-space-2); padding-left: 12px; }
  .nav-actions .btn { padding-inline: 14px; }
  .nav-cta-extra { display: none; }
}
/* En pantallas estrechas el logotipo se queda en el icono (el enlace ya tiene aria-label):
   así la marca, «Beta», «Entrar», «Crear cuenta» y el menú caben sin pisarse. */
@media (max-width: 420px) { .brand .ap-wordmark { display: none; } }

/* ---------- Portada: campo rosa, letra estrecha y un cuadro tramado ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-block: calc(env(safe-area-inset-top, 0px) + 120px) clamp(56px, 7vw, 104px);
  padding-inline: max(var(--ap-gutter), (100% - 1180px) / 2);
  background: var(--lp-rosa);
  color: var(--lp-blanco);
}
.hero-copy { display: grid; gap: 24px; justify-items: start; animation: copy-in 0.9s var(--ap-ease) 0.1s both; }
@keyframes copy-in { from { opacity: 0; transform: translateY(14px); } }
.kicker { font: 600 12.5px/1.2 var(--lp-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ap-accent); }
.hero .kicker { color: var(--lp-tinta); }
.hero h1 {
  max-width: 9.6em;
  font-family: var(--lp-font-ancha);
  font-size: clamp(54px, 7.4vw, 112px);
  font-weight: 300;
  font-variation-settings: "wdth" 75, "opsz" 96;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--lp-blanco);
}
.hero h1 b { font-weight: 760; color: var(--lp-tinta); }
.hero-lead { max-width: 40ch; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.5; color: var(--lp-tinta); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-note { font: 500 13px/1.3 var(--lp-font-mono); color: var(--lp-tinta); }
/* Botones de las franjas de color: tinta maciza y contorno. */
a.btn-ink, .btn-ink { color: var(--lp-blanco); background: var(--lp-tinta); box-shadow: 0 14px 28px -14px var(--lp-tinta); }
a.btn-line, .btn-line { color: var(--lp-tinta); background: transparent; border-color: var(--lp-tinta); }
.btn-line:hover { background: var(--lp-tinta); color: var(--lp-blanco); }
.chip-time { font-size: var(--ap-text-label); font-weight: 700; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--ap-accent); }

/* El cuadro va tramado en el propio PNG (tres tintas); se amplía sin suavizar para que el grano se vea. */
.hero-art { position: relative; margin: 0; }
.hero-painting { width: 100%; height: auto; aspect-ratio: 380 / 316; image-rendering: pixelated; border-radius: 4px; }
/* Portada (landing.js, mountHeroReveal): la tramada se forma por cuadraditos en un lienzo y luego
   se enseña la <img>. Hasta entonces está oculta; si el JavaScript no llega, sale a los 3 s.
   Con ratón, una lupa pequeña deja ver el cuadro en color bajo el cursor, con una estela corta. */
.hero-reveal { --reveal-r: 0px; position: relative; border-radius: 4px; overflow: hidden; transition: --reveal-r 0.25s ease; }
.hero-reveal .hero-painting { display: block; }
@media (scripting: enabled) {
  .hero-reveal:not(.is-built) .hero-painting { opacity: 0; animation: hero-fallback 0s 3s forwards; }
}
@keyframes hero-fallback { to { opacity: 1; } }
.hero-build,
.hero-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-reveal.is-revealing { --reveal-r: 26px; }
.hero-color {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--reveal-r) at var(--reveal-x, 50%) var(--reveal-y, 50%), #000 72%, transparent 100%);
  mask-image: radial-gradient(circle var(--reveal-r) at var(--reveal-x, 50%) var(--reveal-y, 50%), #000 72%, transparent 100%);
}
/* Registrada para que el radio de la lupa se pueda animar al entrar y salir. */
@property --reveal-r { syntax: "<length>"; inherits: true; initial-value: 0px; }
.hero-art figcaption { margin-top: 12px; font: 500 12px/1.4 var(--lp-font-mono); color: var(--lp-tinta); }
/* Corrección de Bloop: un bloque de tinta en la esquina, como el pie de una lámina. */
.hero-fix { position: absolute; right: -14px; bottom: 44px; display: grid; gap: 7px; padding: 13px 16px 14px; background: var(--lp-tinta); color: var(--lp-blanco); font: 500 12px/1.35 var(--lp-font-mono); }
.hero-fix b { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-rosa-claro); }
.fix-years { display: flex; align-items: baseline; gap: 10px; font: 300 clamp(30px, 3.4vw, 44px)/1 var(--lp-font-ancha); font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: -0.02em; }
.fix-years s { opacity: 0.55; text-decoration-color: var(--lp-rosa); text-decoration-thickness: 2px; }
.fix-years i { font-style: normal; color: var(--lp-rosa); }
.fix-years ins { text-decoration: none; font-weight: 700; color: var(--lp-rosa-claro); }
.fix-why { max-width: 30ch; opacity: 0.78; text-wrap: pretty; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: calc(env(safe-area-inset-top, 0px) + 104px); }
  .hero-art { max-width: 620px; }
  .hero-fix { right: 10px; }
}
@media (max-width: 560px) {
  .hero { gap: 32px; padding-top: calc(env(safe-area-inset-top, 0px) + 96px); }
  .hero-copy { gap: 18px; }
  .hero h1 { font-size: clamp(46px, 14vw, 64px); }
  .cta .btn-lg { min-height: 50px; padding-inline: 20px; font-size: 15px; }
  .hero-fix { right: 8px; bottom: 36px; padding: 9px 11px; font-size: 12px; }
  .fix-years { font-size: 26px; }
}
@media (max-width: 420px) { .cta .btn-line { display: none; } }

/* ---------- Así quedan: página de apuntes ---------- */
.notes { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--ap-line); }
.notes-head { display: grid; gap: 14px; max-width: 640px; margin-bottom: clamp(36px, 5vw, 64px); }
.notes-head p { font-size: var(--ap-text-subtitle); color: var(--ap-ink-2); }
.notes-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.page-stack { position: relative; }
.page-sheet {
  position: absolute;
  z-index: 0;
  border-radius: 6px;
  background: var(--ap-glass-2);
  border: 1px solid var(--ap-glass-edge);
  box-shadow: var(--ap-shadow-1);
  inset: 14px 18px -10px 28px;
}
.page-sheet-b { inset: 20px 28px -16px 14px; }
.page {
  position: relative;
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 52px);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ap-ink);
  box-shadow: 0 1px 0 var(--ap-line), var(--ap-shadow-3);
  z-index: 1;
  transform: rotate(-0.6deg);
  font-size: var(--ap-text-body);
  line-height: 1.6;
}
.page-meta { font: 700 12px/1 var(--ap-font); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--ap-muted); margin-bottom: 18px; }
.page-title { font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.035em; margin-bottom: 6px; }
.page-sub { margin-bottom: 20px; color: var(--ap-ink-2); font-size: var(--ap-text-ui); }
.page h4 { font-size: var(--ap-text-subtitle); letter-spacing: -0.02em; margin: 22px 0 8px; }
.page p + p { margin-top: 10px; }
.page b { font-weight: 700; }
.page-steps { margin: 0; padding-left: 22px; }
.page-steps li + li { margin-top: 6px; }
.page-steps li::marker { font-weight: 700; color: var(--ap-accent-deep); }
.page-steps { font-size: 15.5px; }
.dg { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.86em; color: var(--ap-muted); }
/* Párrafo con nota al margen: la nota se alinea con su párrafo, no con una altura fija. */
.anno { position: relative; }
.page p + .anno, .anno + p { margin-top: 10px; }
.page mark { white-space: nowrap; background: linear-gradient(color-mix(in srgb, var(--lp-rosa-claro) 70%, transparent), color-mix(in srgb, var(--lp-rosa-claro) 70%, transparent)) no-repeat 0 0 / 100% 100%; color: inherit; padding: 0 3px; border-radius: 3px; }
.page-fig { margin: 22px 0 0; padding: 14px 16px 12px; border-radius: 6px; background: var(--ap-bg-deep); }
.page-fig svg { display: block; width: 100%; height: auto; }
.page-fig .ring { stroke: var(--lp-rosa); stroke-width: 3; }
.page-fig .ring-arrow, .page-fig .entry { stroke: var(--ap-brand); stroke-width: 2.5; }
.page-fig .node { fill: var(--ap-brand); }
.page-fig text { fill: var(--ap-ink-2); font: 600 10.5px/1 var(--ap-font); }
.page-fig .strong { fill: var(--ap-ink); font-weight: 700; }
.page-fig .center { fill: var(--ap-muted); font-size: 10px; }
.page-fig figcaption { margin-top: 6px; font-size: 12.5px; color: var(--ap-muted); }

/* Margen de cuaderno a la derecha, con las notas a mano. */
.page::after { content: ""; position: absolute; top: 0; bottom: 0; right: 190px; width: 1px; background: color-mix(in srgb, var(--ap-brand) 35%, transparent); }
.page { padding-right: calc(190px + clamp(24px, 3vw, 40px)); }
.margin {
  position: absolute;
  top: 0;
  right: calc(18px - 190px - clamp(24px, 3vw, 40px));
  width: 156px;
  font-family: var(--ap-font-hand);
  font-size: 21px;
  line-height: 1.05;
  color: var(--ap-accent);
  transform: rotate(-3deg);
}
.m2 { transform: rotate(2deg); }
@media (max-width: 1100px) {
  .page { padding-right: clamp(24px, 4vw, 56px); }
  .page::after { display: none; }
  .margin { position: static; width: auto; margin-top: 16px; transform: none; font-size: 20px; }
  .m1 { display: none; }
}

.notes-points { position: sticky; top: 110px; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 28px); }
.notes-points li { display: grid; gap: 6px; padding-top: var(--ap-space-4); border-top: 1px solid var(--ap-line); }
.notes-points p { color: var(--ap-ink-2); }
@media (max-width: 900px) {
  .notes-grid { grid-template-columns: 1fr; }
  .notes-points { position: static; }
  .page { transform: none; }
}

/* ---------- Bloop: franja compacta con la escena 3D y sus estados ---------- */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  width: min(1180px, 100% - 2 * var(--ap-gutter));
  margin-inline: auto;
  padding-block: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--ap-line);
}
.showcase-side { display: grid; gap: 14px; }
.showcase-side > p { font-size: var(--ap-text-subtitle); color: var(--ap-ink-2); max-width: 46ch; }
.stage {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: clamp(300px, 32vw, 400px);
  border-radius: 32px;
  border: 1px solid var(--ap-glass-edge);
  background: var(--ap-bg);
  box-shadow: var(--ap-shadow-2);
}
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity 600ms var(--ap-ease); }
.stage-canvas:active { cursor: grabbing; }
.stage.is-live .stage-canvas { opacity: 1; }
.stage-fallback { position: absolute; left: 50%; top: 48%; width: min(60%, 300px); height: auto; translate: -50% -50%; filter: drop-shadow(0 18px 18px color-mix(in srgb, var(--ap-accent-deep) 20%, transparent)); transition: opacity 400ms var(--ap-ease); }
.stage.is-live .stage-fallback { opacity: 0; visibility: hidden; }
.stage-hint { position: absolute; z-index: 2; left: 16px; top: 16px; max-width: 240px; margin: 0; padding: 8px 12px; border-radius: var(--ap-radius-md); font-size: var(--ap-text-meta); color: var(--ap-ink-2); }
.stage.no-webgl .stage-hint { display: none; }
.bubble { position: absolute; z-index: 2; left: 60%; top: 14%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: 800 26px/1 var(--ap-font-display); color: var(--ap-accent-deep); opacity: 0; transform: scale(0.4); transition: opacity 350ms, transform 450ms var(--ap-ease-spring); pointer-events: none; }
.bubble-sleep { left: 62%; top: 18%; width: auto; height: auto; padding: 8px 14px; border-radius: 20px; font-size: 20px; letter-spacing: 0.1em; }
.stage[data-bloop-state="doubt"] .bubble-doubt,
.stage[data-bloop-state="sleep"] .bubble-sleep { opacity: 1; transform: scale(1); }
.states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ap-space-2); margin-top: var(--ap-space-2); }
.state {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--ap-space-3);
  align-items: center;
  min-height: 64px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--ap-line);
  border-radius: 20px;
  background: var(--ap-glass-1);
  color: var(--ap-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ap-dur-fast) var(--ap-ease), background-color var(--ap-dur-fast) var(--ap-ease);
}
.state:hover { background: var(--ap-glass-2); }
.state img { grid-row: 1 / span 2; width: 48px; height: 42px; object-fit: contain; }
.state b { font-family: var(--ap-font-display); font-size: 16px; line-height: 1.15; letter-spacing: -0.01em; }
.state span { font-size: var(--ap-text-meta); line-height: 1.35; color: var(--ap-ink-2); }
.state[aria-pressed="true"] { border-color: var(--ap-accent); background: var(--ap-glass-3); box-shadow: var(--ap-shadow-1); }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } .showcase-side { order: -1; } }
@media (max-width: 420px) { .states { grid-template-columns: 1fr; } }

/* ---------- Testimonios (oculto hasta tener testimonios reales) ---------- */
.voices { width: min(1180px, 100% - 2 * var(--ap-gutter)); margin-inline: auto; padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--ap-line); }
.voices h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.voices-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ap-space-5); }
.voice { margin: 0; display: grid; gap: var(--ap-space-3); }
.voice blockquote { margin: 0; font-family: var(--ap-font-display); font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
.voice figcaption { color: var(--ap-ink-2); font-size: var(--ap-text-ui); }

/* ------------------------------------------------- Todo lo que hace Bloopy
   Dos funciones en grande y dos menús de pestañas («Para estudiar», «Para organizarte»).
   Todas las pantallas son de la app real (landing-app.css, generado con tools/capturas-landing):
   ventanas redondeadas, algo inclinadas, sobre manchas suaves de color. */
.features { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--ap-line); }
.features > .section-head { display: grid; gap: 14px; max-width: 640px; margin-bottom: clamp(24px, 4vw, 48px); }
.features > .section-head p { font-size: var(--ap-text-subtitle); color: var(--ap-ink-2); }
.features .kicker { color: var(--ap-accent); }
.feature { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(36px, 5vw, 64px); }
.feature + .feature { border-top: 1px solid var(--ap-line); }
.feature-flip .feature-copy { order: 2; }
.feature-copy { display: grid; gap: var(--ap-space-3); max-width: 52ch; }
.feature-copy h3 { font-family: var(--lp-font-ancha); font-size: clamp(40px, 4.6vw, 64px); font-weight: 400; font-variation-settings: "wdth" 75, "opsz" 96; line-height: 0.92; letter-spacing: -0.025em; }
.feature-copy p { color: var(--ap-ink-2); }
.feature-copy .feature-note, .study-step .step-copy .feature-note, .steps.is-tabs .step-copy .feature-note { font-family: var(--lp-font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ap-accent); }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature-flip .feature-copy { order: 0; }
}


/* ---------- Cómo funciona: los tres pasos ---------- */
.day { padding-block: clamp(48px, 6vw, 80px); padding-inline: max(var(--ap-gutter), (100% - 1180px) / 2); border-top: 1px solid var(--ap-line); overflow-x: clip; }
.day h2 { margin-bottom: clamp(24px, 3.5vw, 44px); }
/* Sin JavaScript: los tres pasos en fila, con su maqueta en el estado final. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ap-space-4); margin: 0; padding: 0; list-style: none; }
.step { display: grid; align-content: start; gap: var(--ap-space-4); padding: var(--ap-space-5); border-radius: 28px; border: 1px solid var(--ap-glass-edge); background: var(--ap-glass-1); box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1); }
.step:focus-visible { outline-offset: 4px; }
.step-copy { display: grid; align-content: start; justify-items: start; gap: var(--ap-space-2); }
.step-num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: var(--ap-brand); color: var(--ap-on-brand); font-family: var(--ap-font-display); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 22px; }
.steps p { color: var(--ap-ink-2); }
.step-visual { position: relative; display: grid; align-content: center; gap: 10px; min-height: 180px; padding: clamp(16px, 2vw, 24px); border-radius: 22px; background: var(--ap-glass-2); box-shadow: inset 0 1px 0 var(--ap-glass-sheen), var(--ap-shadow-1); font-size: var(--ap-text-meta); }
.file, .download { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ap-glass-3); box-shadow: var(--ap-shadow-1); color: var(--ap-ink); }
.file { flex-wrap: wrap; row-gap: 8px; }
.file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file small { margin-left: auto; color: var(--ap-muted); font-variant-numeric: tabular-nums; }
.file svg, .download svg { color: var(--ap-accent); flex: none; }
.file-bar { position: relative; flex: 1 1 100%; height: 6px; border-radius: 6px; background: var(--ap-line); overflow: hidden; }
.file-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ap-brand), var(--ap-accent)); transform-origin: left; }
.file-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ap-success); font-weight: 700; }
.file-ok::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.download { justify-self: start; background: var(--ap-ink); color: var(--ap-bg); font-weight: 700; }
.download svg { color: inherit; }
.drop { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 10px 14px; border: 2px dashed color-mix(in srgb, var(--ap-accent) 40%, transparent); border-radius: 16px; color: var(--ap-ink-2); font-weight: 700; text-align: center; }
.drop svg { flex: none; color: var(--ap-accent); }
.steps.is-tabs .step-work { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 3vw, 32px); }
.work-bloop { display: grid; justify-items: center; gap: 8px; }
.work-bloop img { width: clamp(96px, 11vw, 140px); height: auto; filter: drop-shadow(0 12px 14px color-mix(in srgb, var(--ap-accent-deep) 20%, transparent)); }
.work-wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.work-wave i { width: 3px; height: var(--h, 45%); border-radius: 3px; background: var(--lp-rosa); }
.work-wave i:nth-child(3n) { --h: 90%; } .work-wave i:nth-child(3n+1) { --h: 60%; } .work-wave i:nth-child(4n) { --h: 100%; }
.work-rows { display: grid; gap: 12px; font-size: var(--ap-text-ui); }
.review-page { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--paper); box-shadow: 0 1px 0 var(--ap-line), var(--ap-shadow-1); line-height: 1.5; }
.review-page b { font-family: var(--ap-font-display); font-size: 16px; letter-spacing: -0.01em; }
.review-page mark { background: color-mix(in srgb, var(--lp-rosa-claro) 70%, transparent); color: inherit; padding: 0 2px; margin: 0 -2px; border-radius: 3px; }
.steps.is-tabs .step-num { display: none; }
.stage-row { display: flex; align-items: center; gap: 8px; color: var(--ap-ink-2); }
.stage-row::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ap-success); background: radial-gradient(circle, var(--ap-success) 0 3px, transparent 3.5px); }
.review-doubt { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--ap-accent-soft); }
.review-fixed { display: inline-flex; align-items: center; gap: 6px; color: var(--ap-success); font-weight: 700; }
.review-fixed::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.ai-note { margin-top: clamp(24px, 3vw, 40px); max-width: 64ch; font-size: var(--ap-text-ui); color: var(--ap-muted); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* Con JavaScript (landing.js): pestañas arriba, un paso a la vista con su maqueta grande. */
.step-head { display: flex; align-items: stretch; gap: var(--ap-space-2); margin-bottom: var(--ap-space-4); }
.step-tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ap-space-2); }
.step-tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px 16px; border: 1px solid var(--ap-line); border-radius: 18px; background: var(--ap-glass-1); color: var(--ap-muted); font: 700 var(--ap-text-ui)/1.2 var(--ap-font); text-align: left; cursor: pointer; overflow: hidden; transition: background-color var(--ap-dur-base) var(--ap-ease), color var(--ap-dur-base) var(--ap-ease), border-color var(--ap-dur-base) var(--ap-ease); }
.step-tab:hover { color: var(--ap-ink); }
.step-tab[aria-selected="true"] { border-color: var(--ap-glass-edge); background: var(--ap-glass-3); color: var(--ap-ink); box-shadow: var(--ap-shadow-1); }
.step-tab-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ap-line-strong); font-variant-numeric: tabular-nums; }
.step-tab[aria-selected="true"] .step-tab-num { border-color: var(--ap-brand); background: var(--ap-brand); color: var(--ap-on-brand); }
.step-tab-bar { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px; border-radius: 3px; background: var(--ap-line); overflow: hidden; }
.step-tab-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--ap-brand); transform: scaleX(0); transform-origin: left; }
.step-tab[aria-selected="true"] .step-tab-bar i { transform: scaleX(1); }
/* La barra de la pestaña activa se llena en 6 s; al acabar, landing.js pasa a la siguiente. */
.is-auto .step-tab[aria-selected="true"] .step-tab-bar i { animation: step-fill 6s linear both; }
/* !important: el atajo «animation» de las reglas de arriba (más específicas) vuelve a poner «running». */
/* Solo con avance automático: elegir una pestaña (que da el foco) no puede congelar su panel. */
.is-auto.is-paused .step-tab-bar i, .is-auto.is-paused .step.is-playing *, .is-auto.is-paused .step.is-playing *::before { animation-play-state: paused !important; }
@keyframes step-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.step-pause { flex: none; display: grid; place-items: center; width: 44px; border: 1px solid var(--ap-line); border-radius: 18px; background: var(--ap-glass-1); color: var(--ap-ink-2); cursor: pointer; }
.step-pause[hidden] { display: none; }
.step-pause:hover { color: var(--ap-ink); }
.step-pause .icon-play, .step-pause[aria-pressed="true"] .icon-pause { display: none; }
.step-pause[aria-pressed="true"] .icon-play { display: inline; }
.steps.is-tabs { display: block; }
.steps.is-tabs .step:not(.is-active) { display: none; }
.steps.is-tabs .step { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; column-gap: clamp(24px, 4vw, 56px); padding: clamp(20px, 3vw, 40px); }
.steps.is-tabs .step-visual { min-height: 260px; }
.steps.is-tabs .step-copy p { font-size: clamp(16px, 1.3vw, 18px); }
.steps.is-tabs .step.is-playing { animation: step-in 420ms var(--ap-ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } }

/* Maquetas de cada paso: se reproducen al entrar (.is-playing) y acaban en el estado final. */
.step.is-playing .file-bar i { animation: bar-fill 1.6s var(--ap-ease) both; }
.step.is-playing .file + .file .file-bar i { animation-delay: 0.5s; }
.step.is-playing .file-ok { animation: pop-in 400ms var(--ap-ease-spring) 1.6s both; }
.step.is-playing .file + .file .file-ok { animation-delay: 2.1s; }
@keyframes bar-fill { from { transform: scaleX(0); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.8); } }
.step.is-playing .work-bloop img { animation: bob 1.4s ease-in-out 3 alternate; }
.step.is-playing .work-wave i { animation: eq 0.9s ease-in-out 4 alternate; }
.step.is-playing .work-wave i:nth-child(2n) { animation-delay: -0.3s; } .step.is-playing .work-wave i:nth-child(3n) { animation-delay: -0.6s; }
@keyframes bob { to { transform: translateY(-6px) rotate(-3deg); } }
.step.is-playing .stage-row { animation: row-in 400ms var(--ap-ease) both; }
.step.is-playing .stage-row::before { animation: row-check 300ms var(--ap-ease) both; }
.step.is-playing .stage-row:nth-of-type(2), .step.is-playing .stage-row:nth-of-type(2)::before { animation-delay: 0.9s; }
.step.is-playing .stage-row:nth-of-type(3), .step.is-playing .stage-row:nth-of-type(3)::before { animation-delay: 1.8s; }
.step.is-playing .stage-row:nth-of-type(4), .step.is-playing .stage-row:nth-of-type(4)::before { animation-delay: 2.7s; }
@keyframes row-in { from { opacity: 0.3; transform: translateX(-6px); } }
@keyframes row-check { from { border-color: var(--ap-line-strong); background: none; } }
.step.is-playing .review-doubt { animation: doubt-ping 1.2s var(--ap-ease) 0.4s 1 both; }
.step.is-playing .review-page mark { animation: mark-in 900ms var(--ap-ease) both; }
@keyframes mark-in { from { background: transparent; } }
.step.is-playing .review-fixed { animation: pop-in 400ms var(--ap-ease-spring) 1.6s both; }
.step.is-playing .download { animation: pop-in 500ms var(--ap-ease-spring) 2.4s both; }

@media (max-width: 900px) {
  .steps.is-tabs .step { grid-template-columns: 1fr; row-gap: var(--ap-space-4); }
  .steps.is-tabs .step-visual { min-height: 0; }
}
@media (max-width: 480px) { .steps.is-tabs .step-work { grid-template-columns: 1fr; justify-items: center; } .work-rows { justify-self: stretch; } }
@media (max-width: 640px) {
  .step-head { gap: 6px; }
  .step-tabs { gap: 6px; }
  .step-tab { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 10px 6px 16px; text-align: center; font-size: 12.5px; }
  .step-pause { width: 40px; }
}

/* Va detrás de «Cómo funciona»: reutiliza sus pestañas y aquí se cambian. */
/* Menús de pestañas: el nombre de la franja en grande y el componente de «Cómo funciona»
   en forma de píldora. Sin JavaScript, todas las funciones en fila. */
.lanes { display: grid; gap: clamp(56px, 8vw, 112px); padding-top: clamp(32px, 5vw, 64px); border-top: 1px solid var(--ap-line); }
.lane { display: grid; gap: clamp(20px, 3vw, 32px); }
.lanes > *, .lane > *, .step-head, .step-tabs { min-width: 0; } /* el menú desliza en su sitio: nada ensancha la página */
.lane-title { font-family: var(--lp-font-ancha); font-size: clamp(56px, 9vw, 132px); font-weight: 300; font-variation-settings: "wdth" 75, "opsz" 96; line-height: 0.86; letter-spacing: -0.035em; color: var(--ap-ink); }
.study-steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.study-step { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.study-step .step-copy { gap: 12px; }
.study-step h4 { font-family: var(--lp-font-ancha); font-size: clamp(34px, 3.6vw, 52px); font-weight: 400; font-variation-settings: "wdth" 75, "opsz" 96; line-height: 0.95; letter-spacing: -0.025em; }
.study-step .step-copy p { font-size: clamp(16px, 1.3vw, 18px); }
.study-steps.is-tabs .study-step { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); column-gap: clamp(24px, 4vw, 56px); padding: 0; }
.study-steps.is-tabs .study-step .step-copy { order: 2; }
.lane-tabs .step-head { margin-bottom: 0; }
.lane-tabs .step-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 6px; border: 0; border-radius: var(--ap-radius-pill); background: var(--ap-bg-deep); }
.lane-tabs .step-tab { grid-template-columns: 1fr; justify-items: center; min-height: 46px; padding: 10px 18px 14px; border: 0; border-radius: var(--ap-radius-pill); background: transparent; color: var(--ap-ink-2); font: 600 13px/1.2 var(--lp-font-mono); letter-spacing: 0.06em; text-align: center; text-transform: uppercase; box-shadow: none; }
.lane-tabs .step-tab:hover { color: var(--ap-ink); background: var(--ap-glass-2); }
.lane-tabs .step-tab[aria-selected="true"] { background: var(--ap-ink); color: var(--ap-bg); box-shadow: none; }
.lane-tabs .step-tab-num { display: none; }
.lane-tabs .step-tab-bar { left: 22px; right: 22px; bottom: 6px; height: 2px; background: transparent; }
.lane-tabs .step-tab-bar i { background: var(--lp-rosa); }
.lane-tabs .step-pause { width: 46px; height: 46px; align-self: center; border-radius: 50%; border: 0; background: var(--ap-bg-deep); }

/* GooeyNav (landing.js): la píldora de tinta y sus gotas viven en una capa con el filtro «goo»,
   debajo del texto de cada opción. Con la capa, la opción elegida ya no pinta su propio fondo. */
.goo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.has-goo { position: relative; isolation: isolate; }
.goo-layer { position: absolute; z-index: 0; top: 0; left: 0; bottom: 0; min-width: 100%; pointer-events: none; filter: url(#lp-goo); }
.goo-pill { position: absolute; top: 0; left: 0; border-radius: var(--ap-radius-pill); background: var(--ap-ink); opacity: 0; transform-origin: center; transition: opacity var(--ap-dur-base) var(--ap-ease); }
.goo-pill.is-on { opacity: 1; }
.goo-drop { position: absolute; top: 0; left: 0; border-radius: 50%; background: var(--ap-ink); }
.goo-drop.is-rosa { background: var(--lp-rosa); }
.has-goo > :not(.goo-layer) { position: relative; z-index: 1; }
.lane-tabs .has-goo .step-tab { transition: color 320ms var(--ap-ease); }
.lane-tabs .has-goo .step-tab[aria-selected="true"],
.lane-tabs .has-goo .step-tab[aria-selected="true"]:hover { background: transparent; color: var(--ap-bg); }

/* Escenario de cada pantalla real: manchas suaves, ventana redondeada e inclinada, y una
   etiqueta que flota. --z escala la captura a su hueco (gen.py); --fit, en pantallas estrechas. */
.shot-stage { position: relative; display: grid; place-items: center; min-height: 440px; padding: clamp(24px, 4vw, 48px); border-radius: 40px; background:
    radial-gradient(42% 52% at 22% 28%, color-mix(in srgb, var(--lp-rosa-claro) 85%, transparent), transparent 72%),
    radial-gradient(40% 50% at 82% 76%, color-mix(in srgb, var(--lp-rosa-claro) 55%, transparent), transparent 72%),
    radial-gradient(30% 40% at 70% 18%, color-mix(in srgb, var(--lp-rosa) 30%, transparent), transparent 70%),
    var(--ap-bg-deep); overflow: hidden; }
.shot-window { zoom: calc(var(--z) * var(--fit, 1)); max-height: 900px; overflow: hidden; background: var(--lp-papel); border-radius: 28px; transform: rotate(-1.6deg); box-shadow: 0 40px 80px -36px var(--lp-tinta); -webkit-mask: linear-gradient(var(--lp-tinta) 82%, transparent); mask: linear-gradient(var(--lp-tinta) 82%, transparent); }
.study-step:nth-child(even) .shot-window { transform: rotate(1.4deg); }
.app-shot { display: block; }
.shot-chip { position: absolute; right: clamp(16px, 4vw, 40px); bottom: clamp(16px, 3vw, 32px); padding: 10px 16px; border-radius: var(--ap-radius-pill); background: var(--lp-rosa); color: var(--lp-tinta); font: 600 13px/1 var(--lp-font-mono); transform: rotate(4deg); box-shadow: 0 14px 28px -14px var(--lp-tinta); }
@media (max-width: 900px) {
  /* En pantallas estrechas el menú se desliza de lado en vez de partirse en filas. */
  .lane-tabs .step-tabs { grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .lane-tabs .step-tab { padding-inline: 14px; }
  .study-steps.is-tabs .study-step { grid-template-columns: 1fr; row-gap: 18px; }
  .study-steps.is-tabs .study-step .step-copy { order: 0; }
  .shot-stage { --fit: 0.9; min-height: 0; }
}
/* En el móvil la captura no se encoge hasta ser ilegible: se ve a un tamaño fijo y sale por
   la derecha, fundida en el borde, como una ventana que continúa fuera del escenario. */
@media (max-width: 560px) {
  .shot-stage { padding: 20px 0 28px 16px; place-items: center start; border-radius: 28px; }
  .shot-window { zoom: 0.58; max-width: calc((100vw - 48px) / 0.58); -webkit-mask: linear-gradient(var(--lp-tinta) 82%, transparent), linear-gradient(to right, var(--lp-tinta) 86%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(var(--lp-tinta) 82%, transparent), linear-gradient(to right, var(--lp-tinta) 86%, transparent); mask-composite: intersect; }
}

/* ---------- Precios: tres tarjetas con selector de periodo ---------- */
.pricing { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--ap-line); }
.pricing .section-head { display: grid; gap: 14px; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.pricing .section-lede { font-size: var(--ap-text-subtitle); color: var(--ap-ink-2); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ap-space-4); align-items: stretch; }
.plans-extra { max-width: 70ch; margin: var(--ap-space-5) auto 0; padding: var(--ap-space-4) var(--ap-space-5); border-radius: 22px; text-align: center; color: var(--ap-ink-2); font-size: var(--ap-text-ui); }
.plans-extra strong { color: var(--ap-ink); }
/* Tarjeta de plan: nombre, precio grande, frase, botón y lo que incluye. El selector
   de periodo va fuera, encima de las tres tarjetas. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-4);
  padding: var(--ap-space-6) var(--ap-space-5) var(--ap-space-5);
  border-radius: 30px;
  border: 1px solid var(--ap-glass-edge);
  background: var(--ap-glass-2);
  box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.plan-pro {
  border-color: var(--lp-rosa);
  background: var(--ap-glass-3);
  box-shadow: inset 0 0 0 1px var(--lp-rosa), var(--ap-shadow-3);
}
.plan-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ap-space-2); }
.plan-head h3 { font-size: 26px; letter-spacing: -0.035em; line-height: 1.1; padding-top: 4px; }
/* Selector de periodo: pastilla con la opción elegida en relieve. */
.period-switch { position: relative; display: inline-flex; flex: none; gap: 0; padding: 3px; border-radius: var(--ap-radius-pill); background: color-mix(in srgb, var(--ap-ink) 7%, transparent); }
.period-goo { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--ap-radius-pill); background: var(--ap-glass-3); box-shadow: var(--ap-shadow-1); pointer-events: none; }
.period-switch:has(.period-goo) button { position: relative; z-index: 1; }
.period-switch:has(.period-goo) button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.period-switch button { min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--ap-radius-pill); background: transparent; color: var(--ap-muted); font: 700 var(--ap-text-meta)/1 var(--ap-font); cursor: pointer; transition: background-color var(--ap-dur-fast) var(--ap-ease), color var(--ap-dur-fast) var(--ap-ease); }
.period-switch button:hover { color: var(--ap-ink); }
.period-switch button[aria-pressed="true"] { background: var(--ap-glass-3); color: var(--ap-ink); box-shadow: var(--ap-shadow-1); }
.plans-period { display: flex; justify-content: center; margin: 0 0 var(--ap-space-5); }
.plans-period .period-switch button { min-height: 44px; padding: 0 var(--ap-space-4); font-size: var(--ap-text-ui); }
.price.price-unavailable { min-height: clamp(40px, 3.96vw, 50px); }
.price.price-unavailable b { font-size: 28px; letter-spacing: -0.02em; color: var(--ap-ink-2); }
.plan-unavailable .plan-lede, .plan-unavailable .plan-tagline { color: var(--ap-ink-2); }
.plan-variant { display: flex; flex-direction: column; gap: var(--ap-space-4); }
.plan-variant[hidden] { display: none; }
.price { display: flex; align-items: flex-end; gap: 10px; margin-top: var(--ap-space-5); }
.price b { font-family: var(--ap-font-display); font-size: clamp(44px, 4.4vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.price small { padding-bottom: 4px; color: var(--ap-muted); font-size: var(--ap-text-meta); line-height: 1.35; }
.plan-tagline { margin-top: var(--ap-space-2); color: var(--ap-ink); font-family: var(--ap-font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.plan-lede { min-height: 1.4em; margin-top: calc(-1 * var(--ap-space-2)); color: var(--ap-ink); font-weight: 700; font-size: var(--ap-text-body); line-height: 1.4; }
.plan-note { min-height: 2.9em; margin-top: calc(-1 * var(--ap-space-2)); color: var(--ap-ink-2); font-size: var(--ap-text-meta); line-height: 1.45; }
.plan .btn { width: 100%; }
.plan-includes { margin-top: var(--ap-space-2); color: var(--ap-ink); font-weight: 700; font-size: var(--ap-text-ui); }
.plan ul { display: grid; gap: 10px; margin: var(--ap-space-1) 0 0; padding: 0; list-style: none; color: var(--ap-ink-2); font-size: var(--ap-text-ui); line-height: 1.45; }
.plan ul li { position: relative; padding-left: 20px; }
.plan ul li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--ap-brand); }
/* SpotlightCard (landing.js): un brillo suave sigue al cursor sobre cada plan. */
.plan.has-spotlight { overflow: hidden; isolation: isolate; }
.plan.has-spotlight::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 0%), color-mix(in srgb, var(--ap-brand) 16%, transparent), transparent 60%); transition: opacity var(--ap-dur-base) var(--ap-ease); }
.plan.has-spotlight:hover::before { opacity: 1; }
/* En el móvil el selector de periodo se queda a la vista mientras se recorren los planes. */
@media (max-width: 1200px) { .plans-period { position: sticky; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 84px); } .plans-period .period-switch { background: var(--ap-glass-3); box-shadow: var(--ap-shadow-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
.fine { max-width: 70ch; margin: var(--ap-space-5) auto 0; color: var(--ap-muted); font-size: var(--ap-text-meta); text-align: center; }
@media (max-width: 1200px) { .plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
@media (max-width: 560px) { .plan { padding-inline: var(--ap-space-4); } .period-switch button { padding: 0 12px; } }

/* ---------- Preguntas frecuentes ---------- */
.faq { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--ap-line); }
.faq h2 { max-width: 22ch; margin-bottom: clamp(28px, 4vw, 48px); }
.faq-list { display: grid; gap: var(--ap-space-3); max-width: 860px; }
.faq details { border-radius: 22px; border: 1px solid var(--ap-glass-edge); background: var(--ap-glass-1); box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-4); min-height: 56px; padding: var(--ap-space-3) var(--ap-space-5); font-family: var(--ap-font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; color: var(--ap-accent-deep); transition: rotate var(--ap-dur-base) var(--ap-ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; border-radius: 22px; }
.faq details p { max-width: 70ch; padding: 0 var(--ap-space-5) var(--ap-space-5); color: var(--ap-ink-2); }
@media (max-width: 560px) { .faq summary { padding-inline: var(--ap-space-4); font-size: 17px; } .faq details p { padding-inline: var(--ap-space-4); } }

/* ---------- Cierre: tramado rosa y tinta detrás y el texto en un bloque limpio ----------
   Sin JavaScript (o con movimiento reducido) el fondo es una trama quieta de puntos; con él,
   landing.js pinta encima el tramado en movimiento. */
.closing {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding-block: clamp(72px, 10vw, 140px);
  padding-inline: max(var(--ap-gutter), (100% - 1180px) / 2);
  background: radial-gradient(circle, var(--lp-rosa) 1.1px, transparent 1.6px) 0 0 / 5px 5px, var(--lp-tinta);
  overflow: hidden;
}
.closing-dither { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; image-rendering: pixelated; }
.closing-slab { display: grid; justify-items: start; gap: 18px; max-width: 640px; padding: clamp(28px, 4vw, 48px); background: var(--lp-rosa); color: var(--lp-tinta); }
.closing h2 { font-family: var(--lp-font-ancha); font-size: clamp(46px, 6.4vw, 88px); font-weight: 300; font-variation-settings: "wdth" 75, "opsz" 96; line-height: 0.92; color: var(--lp-blanco); }
.closing p { max-width: 46ch; font-size: var(--ap-text-subtitle); color: var(--lp-tinta); }

/* ---------- Pie ---------- */
.foot { padding: var(--ap-space-6) 0 var(--ap-space-6); }
.foot-inner { display: grid; gap: var(--ap-space-3); padding-top: var(--ap-space-5); border-top: 1px solid var(--ap-line); color: var(--ap-ink-2); font-size: var(--ap-text-ui); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--ap-space-2) var(--ap-space-4); }
.foot nav a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ap-ink-2); text-decoration: none; }
.foot nav a:hover { color: var(--ap-ink); text-decoration: underline; }
.foot .small { max-width: 75ch; color: var(--ap-muted); font-size: var(--ap-text-meta); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Versión beta: etiqueta junto a la marca y nota al pulsarla. */
.beta-wrap { position: relative; display: inline-flex; flex: none; }
.beta-badge {
  padding: 2px 8px;
  border: 1px solid var(--ap-accent-soft);
  border-radius: var(--ap-radius-pill);
  background: var(--ap-accent-tint);
  color: var(--ap-accent-deep);
  font: var(--ap-weight-strong) 11px/1.4 var(--ap-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}
/* Zona táctil de 44 px sin agrandar la etiqueta. */
.beta-badge::after { content: ""; position: absolute; inset: -12px -4px; }
.beta-badge:hover { background: var(--ap-accent-soft); }
.beta-badge:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }
.beta-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 5;
  width: min(280px, 80vw);
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--ap-radius-sm);
  color: var(--ap-ink);
  font-size: var(--ap-text-meta);
  line-height: 1.45;
  box-shadow: var(--ap-shadow-2);
}

/* ---------- Aviso de cookies (consent.js) en la landing: barra estrecha abajo ----------
   Mismo texto y mismos botones; aquí ocupa una franja, no un cuarto de la primera pantalla. */
body.landing .bc-banner { width: min(1040px, calc(100vw - 24px)); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ap-space-2) var(--ap-space-4); padding: 10px 12px 10px 20px; border-radius: var(--ap-radius-pill); font-size: var(--ap-text-meta); line-height: 1.4; }
body.landing .bc-actions { flex-wrap: nowrap; }
body.landing .bc-button { min-height: 36px; padding-inline: 14px; white-space: nowrap; }
@media (max-width: 760px) {
  body.landing .bc-banner { grid-template-columns: 1fr; bottom: max(8px, env(safe-area-inset-bottom)); padding: 10px 12px; border-radius: 18px; font-size: 12.5px; }
  body.landing .bc-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- Dirección rosa: fuentes, papel, franja de tinta y títulos ----------
   Rosa fuerte y tinta en la portada, la franja de «Cómo funciona» y el cierre; el resto,
   papel claro (o noche de tinta en oscuro) con títulos en serifa. */
@font-face { font-family: "Bricolage Ancha"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("./assets/fonts/bricolage-grotesque-ancho-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/instrument-serif-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("./assets/fonts/instrument-serif-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("./assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); }
body.landing {
  --lp-font-ancha: "Bricolage Ancha", var(--ap-font-display);
  --lp-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --lp-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ap-bg: var(--lp-papel);
  --ap-bg-deep: var(--lp-papel-2);
  --ap-brand: var(--lp-rosa);
  --paper: var(--lp-blanco);
}
/* Noche de tinta: la franja de «Cómo funciona» siempre y toda la página en oscuro. */
.band-ink {
  --ap-bg: var(--lp-tinta);
  --ap-ink: var(--lp-noche-ink); --ap-ink-2: var(--lp-noche-ink-2); --ap-muted: var(--lp-noche-muted);
  --ap-line: var(--lp-noche-line); --ap-line-strong: var(--lp-noche-line-strong);
  --ap-glass-1: var(--lp-noche-glass-1); --ap-glass-2: var(--lp-noche-glass-2); --ap-glass-3: var(--lp-noche-glass-3);
  --ap-glass-edge: var(--lp-noche-edge); --ap-glass-sheen: var(--lp-noche-line); --ap-reflection: var(--lp-noche-line);
  --ap-accent: var(--lp-noche-accent); --ap-accent-deep: var(--lp-noche-accent-deep); --ap-accent-soft: var(--lp-noche-accent-soft);
  --ap-success: var(--lp-noche-success);
  --ap-selection: var(--lp-noche-accent-soft);
  --paper: var(--lp-noche-2);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  body.landing {
    --ap-bg: var(--lp-noche-2); --ap-bg-deep: var(--lp-tinta);
    --ap-ink: var(--lp-noche-ink); --ap-ink-2: var(--lp-noche-ink-2); --ap-muted: var(--lp-noche-muted);
    --ap-line: var(--lp-noche-line); --ap-line-strong: var(--lp-noche-line-strong);
    --ap-glass-1: var(--lp-noche-glass-1); --ap-glass-2: var(--lp-noche-glass-2); --ap-glass-3: var(--lp-noche-glass-3);
    --ap-glass-edge: var(--lp-noche-edge);
    --ap-accent: var(--lp-noche-accent); --ap-accent-deep: var(--lp-noche-accent-deep); --ap-accent-soft: var(--lp-noche-accent-soft);
    --ap-success: var(--lp-noche-success);
    --ap-selection: var(--lp-noche-accent-soft);
    --paper: var(--lp-tinta);
  }
}
.band-ink { position: relative; isolation: isolate; background: var(--ap-bg); color: var(--ap-ink); border-top: 0; }
.words-wave { position: absolute; inset: 0 0 auto; z-index: -1; width: 100%; height: clamp(220px, 26vw, 340px); pointer-events: none; }
.band-ink .kicker { position: relative; color: var(--lp-rosa-claro); margin-top: clamp(80px, 12vw, 160px); margin-bottom: 14px; }
.band-ink h2 { font-family: var(--ap-font-display); font-size: clamp(40px, 6vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; color: var(--ap-ink); }
.band-ink h2 em { display: block; font-family: var(--lp-font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--lp-rosa-claro); }
.band-ink .step-tab[aria-selected="true"] .step-tab-num, .band-ink .step-num { background: var(--lp-rosa); border-color: var(--lp-rosa); color: var(--lp-tinta); }
.band-ink .step-tab-bar i { background: var(--lp-rosa); }
/* Títulos de las secciones de papel: serifa grande, como una revista. */
.notes-head h2, .features .section-head h2, .showcase h2, .pricing .section-head h2, .faq h2 { font-family: var(--lp-font-serif); font-weight: 400; letter-spacing: -0.015em; line-height: 0.98; font-size: clamp(42px, 5.6vw, 76px); }
.btn-primary, a.btn-primary { background: var(--lp-rosa); color: var(--lp-tinta); box-shadow: 0 12px 24px -12px var(--lp-rosa); }
@media (prefers-reduced-motion: reduce) { .closing-dither { display: none; } }

/* Sobre el rosa de la portada y del cierre, el anillo de foco rosa no se ve: va en tinta. */
.hero :focus-visible, .closing-slab :focus-visible { outline-color: var(--lp-tinta); }