/* ==========================================================================
   /pricing · views/pages/public/pricing.ejs (25-oct-2026)

   NI UN #RRGGBB: todo sale de public/css/brand.css (var(--sn-*) y
   rgb(var(--sn-accent-rgb) / a)). Si la marca cambia de azul, esto lo hereda.

   1 · la página    2 · las piezas    3 · el movimiento (solo con main.rv-on y
   sin movimiento reducido; sin JS se ve todo, quieto).
   ========================================================================== */

/* ---- 1 · LA PÁGINA ------------------------------------------------------ */

/* La cabecera es translúcida: sin fondo en body, deja ver el gris del navegador. */
body { background: var(--sn-bg); color: var(--sn-text); }

/* Se usan también en /founding (las tarjetas, los botones y el movimiento). */
:root { --pr-ease: cubic-bezier(0.22, 1, 0.36, 1); }

main.pr {
  background: var(--sn-bg);
  color: var(--sn-text);
  font-family: var(--sn-font);
  overflow-x: clip;
}
.pr-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; }
.pr-wrap--narrow { max-width: 760px; }
.pr section { position: relative; }
/* El pie va pegado al cierre: su luz se funde con la del final. */
main.pr ~ .site-footer { margin-top: 0; }
.pr-plans-head .pr-provisional { margin-bottom: 14px; }

.pr-kicker {
  font-family: var(--sn-font-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sn-accent); margin: 0 0 18px;
}
.pr-kicker--quiet { color: var(--sn-text-muted); }

.pr-h1 {
  font-size: clamp(42px, 7vw, 84px); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 700; margin: 0 0 24px; max-width: 14ch;
}
.pr-h1 > span { display: block; }
.pr-h1-b {
  background: linear-gradient(100deg, var(--sn-accent) 0%, var(--sn-text) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pr-h2 {
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.028em;
  font-weight: 700; margin: 0 0 16px; text-wrap: balance;
}
.pr-h3 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; font-weight: 700; margin: 0 0 12px; }
.pr-sub { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; color: var(--sn-text-muted); max-width: 46ch; margin: 0 0 36px; }
.pr-lede { font-size: 17px; line-height: 1.65; color: var(--sn-text-muted); max-width: 62ch; margin: 0 0 40px; }
.pr-lede--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Botones */
.pr-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.pr-ctas--center { justify-content: center; }
.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 16px;
  color: var(--sn-bg); background: var(--sn-accent); text-decoration: none;
  box-shadow: 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.5), 0 10px 34px rgb(var(--sn-accent-rgb) / 0.35);
  transition: transform 220ms var(--pr-ease), box-shadow 220ms var(--pr-ease);
}
@media (hover: hover) { .pr-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.7), 0 16px 44px rgb(var(--sn-accent-rgb) / 0.45); } }
.pr-btn:focus-visible { outline: 2px solid var(--sn-text); outline-offset: 3px; }
.pr-btn--big { padding: 19px 34px; font-size: 18px; }
.pr-btn--ghost { color: var(--sn-text); background: transparent; box-shadow: inset 0 0 0 1px var(--sn-line); }
.pr-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--sn-accent); }
/* El enlace secundario: texto con subrayado fino, y 44 px de alto para el dedo. */
.pr-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--sn-accent); text-decoration: none; font-weight: 600;
  background: linear-gradient(rgb(var(--sn-accent-rgb) / 0.4), rgb(var(--sn-accent-rgb) / 0.4)) left calc(50% + 0.75em) / 100% 1px no-repeat;
  transition: background-size 220ms var(--pr-ease);
}
.pr-link:hover { background-image: linear-gradient(var(--sn-accent), var(--sn-accent)); }
.pr-link:focus-visible, .pr-card-cta:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 3px; border-radius: 8px; }

.pr .icon, .pr-cards .icon, .pr-trust .icon { width: 20px; height: 20px; flex: none; }

/* ---- 2 · LAS PIEZAS ----------------------------------------------------- */

/* 1 · La promesa */
.pr-hero { padding: clamp(120px, 16vh, 180px) 0 clamp(80px, 12vh, 140px); isolation: isolate; }
.pr-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgb(var(--sn-accent-rgb) / 0.16), transparent 70%);
  z-index: -1; pointer-events: none;
}
.pr-thread {
  position: absolute; right: max(0px, calc(50% - 660px)); top: 110px; width: min(46vw, 560px); height: auto;
  z-index: -1; overflow: visible; pointer-events: none;
}
.pr-thread-path { fill: none; stroke: var(--sn-accent); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(var(--sn-accent-rgb) / 0.6)); }
.pr-node { fill: var(--sn-bg); stroke: var(--sn-accent); stroke-width: 2; filter: drop-shadow(0 0 8px rgb(var(--sn-accent-rgb) / 0.8)); }
.pr-node--4 { fill: var(--sn-accent); }
.pr-trust { list-style: none; padding: 0; margin: 44px 0 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.pr-trust li { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--sn-text-muted); }
.pr-trust .icon { color: var(--sn-accent); }

/* 2 · La historia */
.pr-story { padding: clamp(80px, 12vh, 140px) 0; border-top: 1px solid var(--sn-line); }
.pr-steps { list-style: none; margin: 56px 0 0; padding: 0 0 0 44px; position: relative; display: grid; gap: clamp(48px, 8vh, 96px); }
.pr-steps::before, .pr-steps::after {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
}
.pr-steps::before { background: var(--sn-line); }
.pr-steps::after {
  background: linear-gradient(var(--sn-accent), rgb(var(--sn-accent-rgb) / 0.4));
  box-shadow: 0 0 12px rgb(var(--sn-accent-rgb) / 0.6);
  transform-origin: top; transform: scaleY(var(--pr-rail, 1));
}
.pr-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.pr-step::before {
  content: ""; position: absolute; left: -39px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--sn-bg); border: 2px solid var(--sn-accent); box-shadow: 0 0 0 6px var(--sn-bg), 0 0 14px rgb(var(--sn-accent-rgb) / 0.7);
}
.pr-step-k { font-family: var(--sn-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sn-accent); margin: 0 0 10px; }
.pr-step-t { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px; font-weight: 700; }
.pr-step-p { color: var(--sn-text-muted); font-size: 16px; line-height: 1.6; margin: 0; max-width: 44ch; }

.pr-step-vis {
  position: relative; min-height: 220px; border-radius: 20px; padding: 28px;
  background: var(--sn-card-gradient), var(--sn-surface);
  border: 1px solid rgb(var(--sn-accent-rgb) / 0.22);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(var(--sn-accent-rgb) / 0.12);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}

/* momento 1: dos tarjetas que se encuentran */
.pr-vis-swap { gap: 18px; }
.pr-minicard {
  width: 160px; min-height: 104px; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px;
  background: var(--sn-bg); border: 1px solid var(--sn-line); font-size: 13px;
}
.pr-minicard .icon { color: var(--sn-accent); width: 24px; height: 24px; }
.pr-minicard b { font-size: 14px; }
.pr-minicard span { color: var(--sn-text-muted); font-size: 12px; }
.pr-minicard--her { border-color: rgb(var(--sn-accent-rgb) / 0.5); box-shadow: 0 0 24px rgb(var(--sn-accent-rgb) / 0.18); }
.pr-mc-l { display: block; height: 7px; width: 80%; border-radius: 4px; background: var(--sn-line); }
.pr-mc-l--s { width: 50%; }

/* momento 2: la voz */
.pr-vis-voice { flex-direction: column; gap: 22px; }
.pr-wave { display: flex; align-items: center; gap: 5px; height: 48px; }
.pr-wave i { display: block; width: 5px; height: 100%; border-radius: 3px; background: var(--sn-accent); transform-origin: center; transform: scaleY(0.35); box-shadow: 0 0 10px rgb(var(--sn-accent-rgb) / 0.5); }
.pr-wave i:nth-child(3n) { transform: scaleY(0.7); }
.pr-wave i:nth-child(4n+1) { transform: scaleY(0.5); }
.pr-quote { margin: 0; font-size: 17px; line-height: 1.5; text-align: center; max-width: 34ch; color: var(--sn-text); }

/* momento 3: la tarjeta que cambia sola */
.pr-bigcard {
  position: relative; width: min(320px, 100%); padding: 22px 22px 22px 86px; border-radius: 16px; min-height: 104px;
  background: var(--sn-bg); border: 1px solid rgb(var(--sn-accent-rgb) / 0.45); display: flex; flex-direction: column; justify-content: center; gap: 6px;
  box-shadow: 0 0 34px rgb(var(--sn-accent-rgb) / 0.16);
}
.pr-bc-avatar { position: absolute; left: 20px; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sn-accent-soft); color: var(--sn-accent); }
.pr-bc-name { font-size: 17px; }
.pr-bc-role { position: relative; display: grid; font-size: 14px; }
.pr-bc-role > span { grid-area: 1 / 1; }
.pr-bc-old { color: var(--sn-text-muted); opacity: 0; }
.pr-bc-new { color: var(--sn-accent); font-weight: 600; }
.pr-bc-pulse { position: absolute; right: 16px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--sn-accent); box-shadow: 0 0 0 4px rgb(var(--sn-accent-rgb) / 0.2); }

/* momento 4: tu IA */
.pr-vis-chat { flex-direction: column; align-items: stretch; gap: 14px; }
.pr-bubble { margin: 0; padding: 14px 16px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; max-width: 92%; }
.pr-bubble--you { align-self: flex-end; background: var(--sn-accent-soft); border: 1px solid rgb(var(--sn-accent-rgb) / 0.3); border-bottom-right-radius: 4px; }
.pr-bubble--ai { align-self: flex-start; background: var(--sn-bg); border: 1px solid var(--sn-line); border-bottom-left-radius: 4px; display: grid; }
.pr-bubble--ai > span { grid-area: 1 / 1; }
.pr-typing { display: none; gap: 5px; align-items: center; height: 22px; }
.pr-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--sn-text-muted); }

.pr-story-close { margin: 64px 0 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.015em; max-width: 30ch; }

/* 3 · c-dissolve, con un borde arriba para separarlo de la historia */
.pr-dissolve { border-top: 1px solid var(--sn-line); }

/* 4 · Los planes */
.pr-plans { padding: clamp(40px, 6vh, 72px) 0 clamp(80px, 12vh, 130px); border-top: 1px solid var(--sn-line); }
.pr-plans::before {
  content: ""; position: absolute; left: 50%; top: 30%; width: 900px; height: 600px; translate: -50% 0;
  background: radial-gradient(closest-side, rgb(var(--sn-accent-rgb) / 0.12), transparent 70%); pointer-events: none;
}
.pr-plans-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.pr-provisional { font-family: var(--sn-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sn-text-muted); margin: 0; }
.pr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.pr-card {
  position: relative; display: flex; flex-direction: column; padding: 32px 28px 26px; border-radius: 22px;
  background: var(--sn-surface); border: 1px solid var(--sn-line);
  transition: transform 260ms var(--pr-ease), border-color 260ms var(--pr-ease), box-shadow 260ms var(--pr-ease);
}
@media (hover: hover) { .pr-card:hover { transform: translateY(-4px); border-color: rgb(var(--sn-accent-rgb) / 0.5); box-shadow: 0 24px 50px -24px rgb(var(--sn-accent-rgb) / 0.35); } }
.pr-card--featured {
  background: linear-gradient(170deg, rgb(var(--sn-accent-rgb) / 0.16), rgb(var(--sn-accent-rgb) / 0.02) 55%), var(--sn-surface);
  border-color: rgb(var(--sn-accent-rgb) / 0.6);
  box-shadow: 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.25), 0 30px 70px -30px rgb(var(--sn-accent-rgb) / 0.55);
}
.pr-badge {
  position: absolute; top: -13px; left: 28px; margin: 0; padding: 5px 12px; border-radius: 999px;
  background: var(--sn-accent); color: var(--sn-bg); font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgb(var(--sn-accent-rgb) / 0.45);
}
.pr-card-name { font-family: var(--sn-font-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sn-accent); margin: 0 0 14px; font-weight: 600; }
.pr-price { margin: 0 0 14px; display: flex; align-items: baseline; gap: 4px; }
.pr-price-n { font-size: clamp(46px, 5vw, 60px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.pr-price-u { font-size: 16px; color: var(--sn-text-muted); }
.pr-card-meta { list-style: none; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--sn-line); display: grid; gap: 8px; font-size: 14px; color: var(--sn-text-muted); }
.pr-card-meta li { display: flex; align-items: center; gap: 9px; }
.pr-card-meta .icon { color: var(--sn-accent); width: 17px; height: 17px; }
.pr-card-bill { font-family: var(--sn-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.pr-card-line { font-size: 15px; line-height: 1.6; color: var(--sn-text); margin: 0 0 26px; flex: 1; }
.pr-card-cta {
  display: flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 700;
  color: var(--sn-text); box-shadow: inset 0 0 0 1px var(--sn-line); transition: box-shadow 200ms var(--pr-ease), color 200ms var(--pr-ease);
}
.pr-card-cta:hover { box-shadow: inset 0 0 0 1px var(--sn-accent); color: var(--sn-accent); }
.pr-card-cta.pr-btn { color: var(--sn-bg); box-shadow: 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.5), 0 10px 34px rgb(var(--sn-accent-rgb) / 0.35); }
.pr-card-note { text-align: center; font-size: 12px; color: var(--sn-text-muted); margin: 10px 0 0; }

/* Las garantías, bajo las tarjetas: icono y una palabra, sin párrafo. */
.pr-gs {
  list-style: none; margin: 48px auto 0; padding: 22px 0 0; border-top: 1px solid var(--sn-line);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px;
}
.pr-gs li { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--sn-text-muted); }
.pr-gs .icon { color: var(--sn-accent); width: 18px; height: 18px; }

/* 6 y 7 · rejillas de iconos */
.pr-inc, .pr-al, .pr-faq, .pr-org { padding: clamp(70px, 10vh, 120px) 0; border-top: 1px solid var(--sn-line); }
.pr-grid { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pr-feat { padding: 26px; border-radius: 18px; background: var(--sn-surface); border: 1px solid var(--sn-line); transition: border-color 220ms var(--pr-ease), transform 220ms var(--pr-ease); }
@media (hover: hover) { .pr-feat:hover { border-color: rgb(var(--sn-accent-rgb) / 0.45); transform: translateY(-2px); } }
.pr-feat--quiet { background: transparent; }
.pr-feat-ico {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px; flex: none;
  color: var(--sn-accent); background: var(--sn-accent-soft); box-shadow: inset 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.3);
}
.pr-feat-ico .icon { width: 22px; height: 22px; }
.pr-feat-t { font-size: 18px; margin: 0 0 8px; letter-spacing: -0.01em; font-weight: 700; }
.pr-feat-p { font-size: 14.5px; line-height: 1.6; color: var(--sn-text-muted); margin: 0; }

/* 6 · El valor */
.pr-value { padding: clamp(80px, 12vh, 140px) 0; border-top: 1px solid var(--sn-line); text-align: center; }
.pr-value::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, rgb(var(--sn-accent-rgb) / 0.10), transparent 70%);
}
.pr-value-h { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; max-width: 20ch; margin: 0 auto 18px; text-wrap: balance; }

/* 8 · Los principios */
.pr-al-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 1px; background: var(--sn-line); border-block: 1px solid var(--sn-line); }
.pr-al-list li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 26px 0; background: var(--sn-bg); align-items: start; }
.pr-al-n { font-family: var(--sn-font-mono); font-size: 32px; color: var(--sn-accent); line-height: 1; }
.pr-al-list h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.pr-al-list p { margin: 0; color: var(--sn-text-muted); font-size: 15px; line-height: 1.6; max-width: 64ch; }

/* 9 · Preguntas */
.pr-q { border-bottom: 1px solid var(--sn-line); }
.pr-q summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-size: 18px; font-weight: 600; position: relative;
}
.pr-q summary::-webkit-details-marker { display: none; }
.pr-q summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--sn-accent); border-bottom: 2px solid var(--sn-accent); transform: rotate(45deg);
  transition: transform 220ms var(--pr-ease);
}
.pr-q[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.pr-q summary:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 4px; border-radius: 6px; }
.pr-q p { margin: 0 0 22px; color: var(--sn-text-muted); font-size: 16px; line-height: 1.65; max-width: 64ch; }

/* 10 · Organizadores */
.pr-org-box { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 36px; border-radius: 22px; background: var(--sn-surface); border: 1px solid var(--sn-line); }
.pr-org-box .pr-lede { margin-bottom: 24px; }

/* 11 · Cierre */
.pr-final { padding: clamp(110px, 16vh, 190px) 0; border-top: 1px solid var(--sn-line); text-align: center; overflow: hidden; }
.pr-final::before {
  content: ""; position: absolute; left: 50%; bottom: -40%; width: 1100px; height: 700px; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--sn-accent-rgb) / 0.2), transparent 70%);
}
.pr-final-h { font-size: clamp(40px, 6.4vw, 80px); line-height: 1.03; letter-spacing: -0.035em; font-weight: 700; margin: 0 0 40px; }
.pr-final-h > span { display: block; }
.pr-final-note { margin: 18px 0 0; color: var(--sn-text-muted); font-size: 14px; }

/* ---- Pantallas estrechas ------------------------------------------------- */
@media (max-width: 960px) {
  .pr-cards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 30px; }
  .pr-card--featured { order: -1; }
  .pr-grid, .pr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-step { grid-template-columns: 1fr; gap: 22px; }
  .pr-thread { opacity: 0.35; width: 120vw; right: -30vw; top: 60px; }
}
/* En el móvil la curva cruza el subtítulo y el botón: solo un rastro, para que
   el texto se lea limpio (portada y /organizers usan el mismo hilo). */
@media (max-width: 600px) {
  .pr-thread { opacity: 0.12; }
}
@media (max-width: 600px) {
  .pr-wrap { padding: 0 16px; }
  .pr-hero { padding: 72px 0 64px; }
  .pr-h1 { font-size: clamp(40px, 11vw, 52px); }
  .pr-sub { margin-bottom: 28px; }
  .pr-ctas { gap: 6px 20px; }
  .pr-ctas .pr-btn { width: 100%; }
  .pr-trust { margin-top: 28px; }
  .pr-story, .pr-inc, .pr-al, .pr-faq, .pr-org { padding: 64px 0; }
  .pr-value { padding: 72px 0; }
  .pr-final { padding: 88px 0; }
  .pr-steps { margin-top: 36px; gap: 44px; }
  .pr-story-close { margin-top: 44px; }
  .pr-grid { margin-top: 28px; gap: 12px; }
  .pr-feat { padding: 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
  .pr-feat-ico { margin: 0; grid-row: span 2; width: 42px; height: 42px; }
  .pr-feat-t { font-size: 17px; margin-bottom: 4px; }
  .pr-gs { justify-content: flex-start; flex-direction: column; gap: 12px; margin-top: 36px; }
  .pr-card { padding: 28px 22px 22px; }
  .pr-q summary { font-size: 17px; padding: 18px 36px 18px 0; }
  .pr-final-h { margin-bottom: 28px; }
  .pr-grid, .pr-grid--4 { grid-template-columns: 1fr; }
  .pr-steps { padding-left: 34px; }
  .pr-steps::before, .pr-steps::after { left: 7px; }
  .pr-step::before { left: -33px; }
  .pr-step-vis { min-height: 0; padding: 22px 16px; }
  .pr-minicard { width: 128px; }
  .pr-org-box { grid-template-columns: 1fr; padding: 26px 20px; }
  .pr-al-list li { grid-template-columns: 44px 1fr; gap: 12px; }
  .pr-trust { gap: 10px 20px; }
  .pr-trust li { font-size: 13px; }
}

/* ---- 3 · EL MOVIMIENTO ---------------------------------------------------
   El hilo de la portada se dibuja al cargar (no depende de JS: es CSS puro y
   se queda dibujado). Lo demás solo con main.rv-on, que pone pricing.js si el
   navegador puede animar. La transición va en el estado de llegada (.is-in). */
@media (prefers-reduced-motion: no-preference) {
  .pr-thread-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pr-draw 2.4s var(--pr-ease) 0.3s forwards; }
  .pr-node { opacity: 0; animation: pr-pop 600ms var(--pr-ease) forwards; }
  .pr-node--1 { animation-delay: 0.35s; }
  .pr-node--2 { animation-delay: 1.0s; }
  .pr-node--3 { animation-delay: 1.6s; }
  .pr-node--4 { animation-delay: 2.4s, 3.1s; animation-name: pr-pop, pr-breathe; animation-duration: 600ms, 2.8s; animation-iteration-count: 1, infinite; }
  .pr-hero .pr-wrap > * { animation: pr-rise 900ms var(--pr-ease) both; }
  .pr-hero .pr-wrap > :nth-child(2) { animation-delay: 80ms; }
  .pr-hero .pr-wrap > :nth-child(3) { animation-delay: 180ms; }
  .pr-hero .pr-wrap > :nth-child(4) { animation-delay: 280ms; }
  .pr-hero .pr-wrap > :nth-child(5) { animation-delay: 380ms; }

  .rv-on [data-rv]:not(.is-in) { opacity: 0; transform: translateY(22px); }
  .rv-on [data-rv].is-in { transition: opacity 800ms var(--pr-ease), transform 800ms var(--pr-ease); }
  .rv-on .pr-cards > .is-in:nth-child(2), .rv-on .pr-grid > .is-in:nth-child(3n+2) { transition-delay: 110ms; }
  .rv-on .pr-cards > .is-in:nth-child(3), .rv-on .pr-grid > .is-in:nth-child(3n) { transition-delay: 220ms; }

  /* el carril de la historia se llena con el scroll (--pr-rail lo pone pricing.js) */
  .rv-on .pr-steps::after { transform: scaleY(var(--pr-rail, 0)); transition: transform 120ms linear; }
  .rv-on .pr-step:not(.is-in)::before { border-color: var(--sn-line); box-shadow: 0 0 0 6px var(--sn-bg); }
  .rv-on .pr-step.is-in::before { transition: border-color 400ms, box-shadow 400ms; }

  /* momento 1: las tarjetas se acercan */
  .rv-on .pr-step:not(.is-in) .pr-minicard--you { transform: translateX(-40px) rotate(-6deg); opacity: 0; }
  .rv-on .pr-step:not(.is-in) .pr-minicard--her { transform: translateX(40px) rotate(6deg); opacity: 0; }
  .rv-on .pr-step.is-in .pr-minicard { transition: transform 900ms var(--pr-ease) 250ms, opacity 600ms 250ms; }
  /* momento 2: la onda de voz */
  .rv-on .pr-step.is-in .pr-wave i { animation: pr-wave 1.1s ease-in-out infinite; }
  .rv-on .pr-step.is-in .pr-wave i:nth-child(2n) { animation-delay: -0.3s; }
  .rv-on .pr-step.is-in .pr-wave i:nth-child(3n) { animation-delay: -0.6s; }
  .rv-on .pr-step.is-in .pr-wave i:nth-child(5n) { animation-delay: -0.85s; }
  .rv-on .pr-step:not(.is-in) .pr-quote { opacity: 0; }
  .rv-on .pr-step.is-in .pr-quote { transition: opacity 900ms 700ms; }
  /* momento 3: el cargo viejo se va y entra el nuevo */
  .rv-on .pr-step .pr-bc-old { opacity: 1; }
  .rv-on .pr-step:not(.is-in) .pr-bc-new { opacity: 0; transform: translateY(10px); }
  .rv-on .pr-step.is-in .pr-bc-old { opacity: 0; transform: translateY(-10px); text-decoration: line-through; transition: opacity 500ms 1100ms, transform 500ms 1100ms; }
  .rv-on .pr-step.is-in .pr-bc-new { transition: opacity 600ms 1400ms, transform 600ms var(--pr-ease) 1400ms; }
  .rv-on .pr-step.is-in .pr-bc-pulse { animation: pr-breathe 2.2s ease-in-out 1.4s infinite; }
  /* momento 4: la IA escribe y responde */
  .rv-on .pr-step:not(.is-in) .pr-bubble { opacity: 0; transform: translateY(10px); }
  .rv-on .pr-step.is-in .pr-bubble--you { transition: opacity 500ms 200ms, transform 500ms 200ms; }
  .rv-on .pr-step.is-in .pr-bubble--ai { transition: opacity 500ms 700ms, transform 500ms 700ms; }
  .rv-on .pr-step .pr-typing { display: inline-flex; }
  .rv-on .pr-step.is-in .pr-typing { animation: pr-hide 1ms linear 2.3s forwards; }
  .rv-on .pr-step.is-in .pr-typing i { animation: pr-dot 900ms ease-in-out infinite; }
  .rv-on .pr-step.is-in .pr-typing i:nth-child(2) { animation-delay: 150ms; }
  .rv-on .pr-step.is-in .pr-typing i:nth-child(3) { animation-delay: 300ms; }
  .rv-on .pr-step .pr-answer { opacity: 0; }
  .rv-on .pr-step.is-in .pr-answer { opacity: 1; transition: opacity 700ms 2.3s; }

  .pr-badge { animation: pr-breathe-badge 3s ease-in-out infinite; }
}

@keyframes pr-draw { to { stroke-dashoffset: 0; } }
@keyframes pr-pop { from { opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center; } to { opacity: 1; transform: scale(1); transform-box: fill-box; transform-origin: center; } }
@keyframes pr-breathe { 0%, 100% { box-shadow: 0 0 0 4px rgb(var(--sn-accent-rgb) / 0.2); filter: drop-shadow(0 0 8px rgb(var(--sn-accent-rgb) / 0.8)); } 50% { box-shadow: 0 0 0 9px rgb(var(--sn-accent-rgb) / 0.05); filter: drop-shadow(0 0 18px rgb(var(--sn-accent-rgb) / 1)); } }
@keyframes pr-breathe-badge { 0%, 100% { box-shadow: 0 6px 20px rgb(var(--sn-accent-rgb) / 0.45); } 50% { box-shadow: 0 6px 30px rgb(var(--sn-accent-rgb) / 0.75); } }
@keyframes pr-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pr-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes pr-dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes pr-hide { to { visibility: hidden; opacity: 0; } }

/* 27-oct-2026 · UNA PANTALLA POR BLOQUE. Cada sección de las portadas (/ y
   /organizers) ocupa al menos el alto de la ventana menos la barra, con su
   contenido centrado: al cargar se ve el primer bloque entero y nada del
   siguiente, y al bajar la página se asienta al principio de cada bloque
   (scroll-snap de proximidad: un bloque largo se sigue leyendo entero). */
main.pr > section {
  box-sizing: border-box;
  min-height: calc(100svh - var(--header-h, 64px));
  display: flex; flex-direction: column; justify-content: center;
  scroll-snap-align: start; scroll-margin-top: var(--header-h, 64px);
}
main.pr > section > .pr-wrap { width: 100%; }
html:has(main.pr) { scroll-snap-type: y proximity; }
@media (prefers-reduced-motion: reduce) { html:has(main.pr) { scroll-snap-type: none; } }
@media (min-width: 701px) {
  .pr-hero { padding: clamp(32px, 6vh, 96px) 0; }
  .pr-hero .pr-h1 { font-size: min(clamp(42px, 7vw, 84px), 12vh); margin-bottom: clamp(14px, 2.6vh, 24px); }
  .pr-hero .pr-kicker { margin-bottom: clamp(12px, 2vh, 18px); }
  .pr-hero .pr-sub { margin-bottom: clamp(20px, 3.8vh, 36px); font-size: min(clamp(17px, 1.6vw, 21px), 3vh); }
  .pr-hero .pr-trust { margin-top: clamp(20px, 3.4vh, 40px); }
}