/* ============================================================
   SERENZA · landing.css — "El entorno de trabajo"
   La página es el entorno de trabajo de la planner visto desde
   arriba: seis instrumentos numerados, desmontados pieza a
   pieza y reensamblados en una sola cuenta.
   Topbar, botones y wrap están en components/topbar.css.
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(180,154,110,.28); }
img, svg { display: block; }
section[id] { scroll-margin-top: 84px; }

/* ---------- shared type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--gold);
  display: inline-block;
}
.display {
  font-family: var(--serif); font-weight: 400; color: var(--forest);
  font-size: clamp(44px, 6.6vw, 92px); line-height: 1.02;
  letter-spacing: -0.02em; margin: 0;
}
.display .accent { color: var(--gold); font-style: italic; }
.serif-2 {
  font-family: var(--serif); font-weight: 400; color: var(--forest);
  font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.01em; margin: 0;
}

/* ============================================================
   GENERIC BANDS
   ============================================================ */
.band { padding: clamp(80px, 13vh, 160px) 0; border-top: 1px solid var(--paper-deep); position: relative; }
@media (max-width: 560px) { .band { padding: 56px 0; } }
.band.alt { background: var(--paper-soft); }
.band.dark { background: var(--forest); border-top: 1px solid var(--forest); color: var(--paper); }
.band.dark .serif-2, .band.dark .display { color: var(--paper); }
.band.dark .eyebrow { color: var(--sand); }
.band.dark .eyebrow::before { background: var(--sand); }
.section-head { max-width: 46ch; margin: 0 0 clamp(44px, 6vw, 72px); }
@media (max-width: 560px) { .section-head { margin-bottom: 36px; } }
.section-head p { font-family: var(--sans); font-weight: 300; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.65; color: var(--ink-soft); margin: 20px 0 0; }

/* ---------- statement ---------- */
.statement { text-align: center; max-width: 1000px; margin: 0 auto; }
.statement .serif-2 { font-size: clamp(28px, 5.4vw, 70px); max-width: 14em; margin: 0 auto; }
@media (max-width: 560px) {
  .statement .serif-2 { max-width: 100%; padding: 0 8px; }
}
.statement .mute { color: var(--ink-faint); }
.band.dark .statement .mute { color: var(--sand); }

/* ============================================================
   HERO — copy centrada arriba, la mesa debajo
   ============================================================ */
.hero { padding: clamp(110px, 16vh, 180px) 0 0; }
.hero-copy { max-width: 840px; margin: 0 auto; text-align: center; }
.hero-eyebrow-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.hero .eyebrow::after {
  content: ""; width: 34px; height: 1px; background: var(--gold);
  display: inline-block;
}
.hero-sub {
  font-family: var(--sans); font-weight: 300; font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65; color: var(--ink-soft); max-width: 56ch; margin: 26px auto 0;
}
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.hero-note {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
  width: 100%; text-align: center;
}
@media (max-width: 560px) {
  .hero { padding-top: 104px; }
  .hero-cta { gap: 14px; }
  .hero-note { font-size: 12px; }
  /* un CTA largo (o una traducción más larga) envuelve en vez de recortarse */
  .hero-cta .btn--lg { max-width: 100%; white-space: normal; text-align: center; }
}

/* ============================================================
   EL ENTORNO — campo de artefactos sobre papel
   ============================================================ */
.workspace-zone { margin-top: clamp(48px, 7vh, 84px); }
.workspace-field {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  height: 520px;
  padding: 0 var(--gutter);
}
/* vignette de lino: el papel respira sin texturas planas */
.workspace-field::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 8%, rgba(250,247,242,0) 40%, rgba(234,226,214,.6) 100%);
}
/* grano de papel, sutilísimo */
.workspace-field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* props de atrezo: línea y nada más */
.workspace-props span { position: absolute; pointer-events: none; z-index: 0; }
.prop-clip { left: 31%; top: -20px; width: 22px; opacity: .75; transform: rotate(9deg); }
.prop-ring { right: 2.5%; top: 24%; width: 96px; height: 96px; border: 1.5px solid var(--sand); border-radius: 50%; opacity: .38; }
.prop-pencil { left: 6%; bottom: 4%; width: 112px; opacity: .65; transform: rotate(-13deg); }

.workspace-item {
  position: absolute;
  left: var(--x); top: var(--y);
  width: clamp(240px, 24vw, 310px);
  z-index: var(--z, 1);
  transform: rotate(var(--r, 0deg));
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  text-decoration: none;
  display: block;
}
.workspace-item:hover,
.workspace-item:focus-visible {
  transform: rotate(0deg) translateY(-7px);
  z-index: 6;
}
.workspace-item__art { display: block; transition: box-shadow .45s, border-color .45s; }
.workspace-item:hover .workspace-item__art,
.workspace-item:focus-visible .workspace-item__art {
  box-shadow: 0 24px 50px -30px rgba(31, 42, 36, .40);
}
.workspace-item__no,
.stage-part__no {
  position: absolute; top: -15px; left: -13px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1;
}

.workspace-legend {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin: clamp(30px, 4.5vh, 48px) auto 0; padding: 0 var(--gutter);
}
.workspace-legend__rule { height: 1px; width: clamp(44px, 8vw, 110px); background: var(--gold); opacity: .55; flex: 0 0 auto; }
.workspace-legend p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(17px, 1.8vw, 21px); color: var(--forest-80);
  margin: 0; text-align: center;
}
.workspace-caption { margin: 18px auto 0; max-width: 1280px; padding: 0 var(--gutter); text-align: right; }

/* el entorno en móvil / tablet: carril horizontal con snap */
@media (max-width: 1023px) {
  .workspace-field {
    height: auto; display: flex; gap: 18px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 12px var(--gutter) 20px;
    -webkit-overflow-scrolling: touch;
  }
  .workspace-field::before, .workspace-field::after { inset: 0; }
  .workspace-props { display: none; }
  .workspace-item {
    position: static; flex: 0 0 auto; width: 270px;
    scroll-snap-align: center;
  }
}
@media (max-width: 560px) {
  .workspace-item { width: 246px; }
}

/* ============================================================
   ARTEFACTOS — los instrumentos de la mesa
   Cada artefacto es papel marfil, plano en reposo; la sombra
   solo aparece como respuesta al hover en la mesa.
   ============================================================ */
.art {
  background: var(--paper-soft);
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  width: 100%;
  text-align: left;
}
.art__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.art__label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.art__label--gold { color: var(--gold-deep); }
.art__meta {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.art__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sage-deep);
  white-space: nowrap;
}
.art__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); animation: art-pulse 2.6s ease-in-out infinite; }
@keyframes art-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.art__foot {
  font-family: var(--sans); font-size: 11.5px; font-weight: 300; color: var(--ink-faint);
  border-top: 1px solid var(--paper-deep); padding-top: 10px; margin-top: auto;
  display: flex; align-items: center; gap: 7px; line-height: 1.4;
}
.art__foot--ok { color: var(--sage-deep); }

/* --- 01 · cronograma del día B --- */
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl__row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-top: 1px solid var(--paper-deep);
}
.tl__row:first-child { border-top: 0; }
.tl__time { font-family: var(--serif); font-size: 17px; color: var(--forest); width: 46px; flex: 0 0 auto; line-height: 1; }
.tl__what { font-family: var(--sans); font-size: 13px; color: var(--ink); flex: 1; min-width: 0; line-height: 1.3; }
.tl__what small { display: block; font-size: 11px; font-weight: 300; color: var(--ink-faint); margin-top: 1px; }
.tl__row--now { background: rgba(180,154,110,.12); border-radius: var(--radius); border-color: transparent; }
.tl__row--now + .tl__row { border-top: 0; }
.tl__row--now .tl__time { color: var(--gold-deep); }
.tl__now {
  flex: 0 0 auto;
  font-family: var(--sans); font-size: 9.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid rgba(180,154,110,.5);
  background: rgba(180,154,110,.12);
  padding: 3px 9px; border-radius: 100px;
}

/* --- 02 · RFQ --- */
.art__link {
  font-family: var(--sans); font-size: 12px; color: var(--gold-deep);
  background: var(--paper); border: 1px solid var(--paper-deep);
  border-radius: 100px; padding: 5px 12px; align-self: flex-start;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rfq-reply {
  background: var(--paper); border: 1px solid var(--paper-deep);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.rfq-reply__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rfq-reply__who { font-family: var(--serif); font-size: 15.5px; color: var(--forest); line-height: 1.1; }
.rfq-reply__when { font-family: var(--sans); font-size: 11px; font-weight: 300; color: var(--ink-faint); white-space: nowrap; }
.rfq-reply__price { font-family: var(--serif); font-size: 25px; color: var(--forest); line-height: 1; }
.rfq-reply__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mini-btn {
  font-family: var(--sans); font-size: 11px; letter-spacing: .03em;
  padding: 5px 12px; border-radius: var(--radius); line-height: 1;
  border: 1px solid var(--paper-deep); color: var(--ink-soft);
}
.mini-btn--primary { background: var(--forest); color: var(--paper); border-color: var(--forest); }

/* --- 03 · portal --- */
.portal-names { font-family: var(--serif); font-size: 25px; color: var(--forest); line-height: 1.05; margin-top: 2px; }
.portal-date { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--gold-deep); }
.portal-progress { display: flex; align-items: center; gap: 10px; }
.portal-progress__track { flex: 1; height: 4px; background: var(--paper-deep); border-radius: 100px; overflow: hidden; }
.portal-progress__track i { display: block; height: 100%; background: var(--sage); border-radius: 100px; }
.portal-progress__pc { font-family: var(--sans); font-size: 11px; color: var(--sage-deep); white-space: nowrap; }

/* --- 04 · presupuesto y pagos --- */
.money-bar { height: 5px; background: var(--paper-deep); border-radius: 100px; overflow: hidden; }
.money-bar i { display: block; height: 100%; background: var(--sage); border-radius: 100px; }
.pay { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pay__row { display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 12.5px; color: var(--ink); }
.pay__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.pay__dot--pending { background: var(--gold); }
.pay__dot--paid { background: var(--sage); color: var(--paper-soft); font-size: 6.5px; width: 12px; height: 12px; }
.pay__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay__date { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.pay__amt { font-family: var(--serif); font-size: 14.5px; color: var(--forest); white-space: nowrap; }

/* --- 05 · documentos --- */
.docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.docs__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius);
  font-family: var(--sans); font-size: 12.5px; color: var(--ink);
  border: 1px solid transparent;
}
.docs__row--active { background: var(--paper); border-color: var(--paper-deep); }
.docs__ext {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--paper-deep); color: var(--forest);
  font-size: 8.5px; font-weight: 600; letter-spacing: .04em;
}
.docs__ext--gold { background: var(--gold); color: var(--paper); }
.docs__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs__tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 500; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(180,154,110,.14); color: var(--gold-deep); white-space: nowrap;
}

/* --- 06 · cola de atención --- */
.attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.attn__row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 11px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--paper-deep);
}
.attn__row--urgent { border-color: rgba(156,75,63,.4); }
.attn__glyph {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1;
  background: rgba(156,75,63,.12); color: var(--status-urgent);
}
.attn__glyph--gold { background: rgba(180,154,110,.16); color: var(--gold-deep); }
.attn__glyph--soft { background: var(--paper-deep); color: var(--ink-soft); }
.attn__what { font-family: var(--sans); font-size: 12.5px; color: var(--ink); flex: 1; min-width: 0; line-height: 1.35; }
.attn__what small { display: block; font-size: 11px; font-weight: 300; color: var(--ink-faint); margin-top: 2px; }

/* ============================================================
   TEARDOWN — el entorno desmontado, pieza a pieza
   Escenario sticky a la izquierda, registro que avanza a la
   derecha; solo la pieza activa se ve (el resto se oculta:
   a .35 de opacidad se apilaban y volvían el texto ilegible).
   ============================================================ */
.teardown__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 84px);
  align-items: start;
}
.teardown__stage { position: sticky; top: 92px; }
.stage {
  position: relative;
  aspect-ratio: 3 / 4;
}
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.stage-part {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  transform: rotate(var(--r, 0deg));
  /* solo la pieza activa se ve: las demás se ocultan por completo —
     atenuarlas (.35) apilaba texto sobre texto en un stage 3:4 */
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  display: block; text-decoration: none;
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1),
              visibility 0s linear .55s;
}
.stage-part .art { pointer-events: none; transition: box-shadow .55s, border-color .55s; }
.stage-part__no { width: 30px; height: 30px; top: -12px; left: -10px; font-size: 13.5px; }

.stage[data-active="01"] .stage-part[data-part="01"],
.stage[data-active="02"] .stage-part[data-part="02"],
.stage[data-active="03"] .stage-part[data-part="03"],
.stage[data-active="04"] .stage-part[data-part="04"],
.stage[data-active="05"] .stage-part[data-part="05"],
.stage[data-active="06"] .stage-part[data-part="06"] {
  opacity: 1;
  visibility: visible;
  transform: rotate(0deg) translateY(-5px);
  z-index: 4;
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1),
              visibility 0s;
}
.stage[data-active="01"] .stage-part[data-part="01"] .art,
.stage[data-active="02"] .stage-part[data-part="02"] .art,
.stage[data-active="03"] .stage-part[data-part="03"] .art,
.stage[data-active="04"] .stage-part[data-part="04"] .art,
.stage[data-active="05"] .stage-part[data-part="05"] .art,
.stage[data-active="06"] .stage-part[data-part="06"] .art {
  box-shadow: 0 24px 50px -30px rgba(31, 42, 36, .40);
  border-color: var(--sand);
}
.stage-caption {
  font-family: var(--sans); font-weight: 300; font-size: 12.5px;
  color: var(--ink-faint); text-align: center; margin: 20px auto 0; max-width: 40ch;
  line-height: 1.5;
}

/* registro (ledger) */
.teardown__ledger { display: flex; flex-direction: column; gap: min(30vh, 260px); padding: 6vh 0 16vh; }
.entry { scroll-margin-top: 120px; opacity: .42; transition: opacity .55s cubic-bezier(.2,.8,.2,1); }
.entry.is-active { opacity: 1; }
.entry__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.entry__no { font-family: var(--serif); font-style: italic; font-size: 34px; color: var(--gold-deep); line-height: 1; }
.entry__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px); color: var(--forest);
  line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 16px;
}
.entry__scene {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--forest-80);
  margin: 0 0 20px; max-width: 46ch;
}
.entry__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.entry__points li {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--sans); font-weight: 300; font-size: 15px;
  color: var(--ink-soft); line-height: 1.5;
}
.entry__points li::before { content: "—"; color: var(--sage); flex: 0 0 auto; }
.entry__artifact { display: none; margin-top: 28px; max-width: 420px; }

/* chips de plan */
.plan-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px 5px 10px; border-radius: 100px; border: 1px solid;
  white-space: nowrap;
}
.plan-chip i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.plan-chip--all { color: var(--sage-deep); border-color: rgba(94,107,90,.4); background: rgba(94,107,90,.08); }
.plan-chip--all i { background: var(--sage); }
.plan-chip--adv { color: var(--gold-deep); border-color: rgba(180,154,110,.45); background: rgba(180,154,110,.10); }
.plan-chip--adv i { background: var(--gold); }
.plan-chip--pro { color: var(--forest); border-color: rgba(31,42,36,.32); background: rgba(31,42,36,.06); }
.plan-chip--pro i { background: var(--forest); }

@media (max-width: 1023px) {
  .teardown__grid { grid-template-columns: 1fr; }
  .teardown__stage { display: none; }
  .teardown__ledger { gap: 76px; padding: 0; }
  .entry { opacity: 1; }
  .entry__artifact { display: block; }
}

/* ============================================================
   INVENTARIO — el resto del entorno
   ============================================================ */
.inv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 64px); border-top: 1px solid var(--paper-deep); }
.inv__row {
  display: flex; align-items: center; gap: 14px;
  padding: 19px 6px; border-bottom: 1px solid var(--paper-deep);
}
.inv__name { font-family: var(--serif); font-size: 19px; color: var(--forest); flex: 0 0 33%; min-width: 0; line-height: 1.15; }
.inv__desc { font-family: var(--sans); font-weight: 300; font-size: 14px; color: var(--ink-soft); flex: 1; min-width: 0; line-height: 1.45; }
.inv__row .plan-chip { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 880px) { .inv { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .inv__row { flex-wrap: wrap; gap: 8px 12px; }
  .inv__name { flex: 1 0 auto; }
  .inv__desc { flex: 1 0 100%; order: 3; }
  .inv__row .plan-chip { margin-left: 0; }
}

/* ============================================================
   LA CUENTA — calculadora honesta de tiempo y dinero
   ============================================================ */
.cuenta-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px); align-items: start;
}
.calc {
  background: var(--paper-soft); border: 1px solid var(--paper-deep);
  border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px);
}
.calc__label {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 12px;
}
.calc__input {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--paper-deep);
  border-radius: var(--radius); padding: 12px 15px;
  transition: border-color .2s, box-shadow .2s;
}
.calc__input:focus-within {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(94,107,90,.12);
}
.calc__sym { font-family: var(--serif); font-size: 18px; color: var(--gold-deep); line-height: 1; }
.calc__input input {
  border: 0; background: none; outline: none; width: 100%;
  font-family: var(--sans); font-size: 17px; font-weight: 400; color: var(--ink);
  padding: 0;
}
.calc__input input::-webkit-inner-spin-button,
.calc__input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc__input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.calc__rows { margin: 26px 0 0; }
.calc__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--paper-deep);
}
.calc__row dt { font-family: var(--sans); font-weight: 300; font-size: 14.5px; color: var(--ink-soft); }
.calc__row dd { margin: 0; font-family: var(--sans); font-size: 15px; color: var(--forest); white-space: nowrap; }
.calc__row--big dd { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); color: var(--forest); line-height: 1; }
.calc__close { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--forest-80); margin: 24px 0 0; line-height: 1.4; }
.calc__note { font-family: var(--sans); font-weight: 300; font-size: 12px; color: var(--ink-faint); margin: 14px 0 0; line-height: 1.55; }
@media (max-width: 880px) {
  .cuenta-grid { grid-template-columns: 1fr; }
  .calc { max-width: 560px; }
}

/* ============================================================
   PRICING
   ============================================================ */

/* section heading override (replaces inline styles) */
.pricing-head {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(40px, 5vw, 56px);
}

/* ============================================================
   PRICING CONTROLS — cycle toggle + currency selector
   Two controls for the same block, sharing one row. The cycle
   toggle leads (it changes the figure); the currency menu is
   the quiet escape hatch on the right.
   ============================================================ */
.pricing-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  max-width: 1060px;
  margin: 0 auto clamp(20px, 2.6vw, 28px);
  flex-wrap: wrap;
}
/* On narrow screens both controls center under the headline. */
@media (max-width: 880px) {
  .pricing-controls {
    justify-content: center;
    flex-direction: column;
    gap: 14px;
  }
}

/* Currency control — a rare escape hatch. The currency is auto-detected, so
   switching is a small, quiet action: a discreet trigger top-right that opens
   a paper-card menu. Scales to any number of currencies and is fully keyboard
   accessible. */
.currency-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The prefix (symbol + "Precios en") is a quiet label, decorative. */
.currency-control__lead {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.currency-control__sym {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1;
  color: var(--gold-deep);
}
.currency-control__label {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: .02em;
}

/* Trigger — a quiet control (4px corners per the subtle-corner rule). The gold
   chevron and the serif accent in the menu carry the warmth. */
.currency-menu { position: relative; }
.currency-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--forest);
  background: var(--paper-soft);
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius);
  padding: 7px 13px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.band.alt .currency-menu__trigger { background: var(--paper); }
.currency-menu__trigger:hover { border-color: var(--sand); }
.currency-menu.is-open .currency-menu__trigger {
  border-color: var(--gold);
  background: var(--paper);
}
.currency-menu__trigger:focus-visible {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(94, 107, 90, .18);
}
.currency-menu__chevron {
  color: var(--gold-deep);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.currency-menu.is-open .currency-menu__chevron { transform: rotate(180deg); }

/* Menu — a paper card. Flat by default (hidden); the ambient shadow and the
   tonal lift appear only as a response to opening. */
.currency-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 234px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper-soft);
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(-4px) scale(.985);
  transform-origin: top right;
  visibility: hidden;
  pointer-events: none;
  /* visibility is intentionally NOT transitioned: a discrete property under
     transition stays at its start value for the first half, which would keep
     the list non-focusable right after opening. It flips instantly instead;
     opacity + transform carry the fade. */
  transition: opacity .16s ease-out, transform .16s cubic-bezier(.2, .8, .2, 1);
}
.currency-menu.is-open .currency-menu__list {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}
.currency-menu__option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.currency-menu__option:hover,
.currency-menu__option:focus-visible {
  background: var(--paper-deep);
  outline: none;
}
.currency-menu__option.is-current { color: var(--forest); font-weight: 500; }
.currency-menu__opt-sym {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1;
  color: var(--gold-deep);
  width: 20px;
  text-align: center;
  flex: 0 0 auto;
}
.currency-menu__opt-name {
  flex: 1 1 auto;
  white-space: nowrap;
}
/* The ISO code is a quiet secondary tag, right-aligned beside the check. */
.currency-menu__opt-code {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.currency-menu__check {
  color: var(--gold);
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .currency-menu__chevron,
  .currency-menu__list { transition: none; }
}

/* ============================================================
   CYCLE TOGGLE — Mensual / Anual segmented control
   A pill-shaped group of two buttons; the active one takes the
   forest fill + paper text. Pure client-side: both prices ship
   in the DOM and CSS swaps them by [data-cycle] on #pricing-block.
   ============================================================ */
.cycle-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--paper-deep);
  border-radius: 100px;
  padding: 4px;
  gap: 3px;
}
.cycle-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft);
  padding: 9px 18px;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: background .22s cubic-bezier(.2,.8,.2,1),
              color .22s cubic-bezier(.2,.8,.2,1);
}
.cycle-toggle__btn:hover { color: var(--forest); }
.cycle-toggle__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(94, 107, 90, .22);
}
.cycle-toggle__btn[aria-pressed="true"] {
  background: var(--forest);
  color: var(--paper);
}
.cycle-toggle__btn[aria-pressed="true"]:hover {
  background: var(--forest-80);
  color: var(--paper);
}
/* "2 meses gratis" pill inside the Anual button — a quiet gold-tinted tag
   that turns sand-on-forest when its button is the active one. */
.cycle-toggle__pill {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding: 3px 9px;
  border: 1px solid rgba(180, 154, 110, .38);
  border-radius: 100px;
  background: rgba(180, 154, 110, .08);
  line-height: 1;
  transition: color .22s, border-color .22s, background .22s;
}
.cycle-toggle__btn[aria-pressed="true"] .cycle-toggle__pill {
  color: var(--sand);
  border-color: rgba(201, 183, 156, .45);
  background: rgba(201, 183, 156, .14);
}

.pricing-grid {
  display: grid;
  /* minmax(0,1fr) lets a card shrink below its price's min-content, so a
     long ARS/VND figure can never blow the grid past 100% and clip the last
     card. (The old repeat(3,1fr) used an auto min and overflowed.) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 28px);
  max-width: 1060px;
  margin: 0 auto;
  align-items: stretch;
}

/* Magnitude tiers — the price type scale adapts to the currency's digit count
   (std ≤3 digits / dense 4–5 / ultra 6+), driven from pricing_context so any
   future currency lands in the right tier automatically. */
.pricing-grid { --price-fs: clamp(46px, 5vw, 58px); }
.pricing-grid--dense { --price-fs: clamp(32px, 3.6vw, 44px); }
.pricing-grid--ultra { --price-fs: clamp(26px, 2.8vw, 34px); }

.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 3.5vw, 44px) clamp(24px, 2.5vw, 36px);
  position: relative;
  transition: box-shadow .3s, border-color .3s;
}
.pricing-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--sand);
}

/* featured — gold frame + badge + CTA + a slightly deeper surface carry the
   distinction. No resting shadow (flat-by-default); on desktop the card also
   grows a touch taller via padding so it reads as the obvious choice without
   any depth cue. */
.pricing-card--featured {
  border-color: var(--gold);
  border-width: 2px;
  background: var(--paper-soft);
}
.pricing-card--featured:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--gold-deep);
}
@media (min-width: 881px) {
  .pricing-card--featured {
    padding-top: clamp(40px, 4.4vw, 56px);
    padding-bottom: clamp(40px, 4.4vw, 56px);
  }
}

/* badge — gold-tinted pill; the featured card's premium marker, inside
   the 10% accent budget. */
.pricing-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(180, 154, 110, .14);
  color: var(--gold-deep);
  border: 1px solid rgba(180, 154, 110, .38);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.pricing-card__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}
/* An invisible badge on the non-featured cards reserves the exact same slot,
   so the name/tag/price align across the whole grid regardless of the badge. */
.pricing-card__badge--placeholder {
  visibility: hidden;
}

/* head */
.pricing-card__head {
  text-align: left;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--paper-deep);
}
.pricing-card--featured .pricing-card__head {
  border-bottom-color: var(--sand);
}

.pricing-card__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  color: var(--forest);
  margin: 0;
  line-height: 1.1;
}

.pricing-card__tag {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  color: var(--ink-faint);
  margin: 8px 0 0;
  line-height: 1.4;
}

/* Price block — symbol and digits compose as separate elements so the glyph
   can be sized and placed independently (no floating, no awkward gap), and the
   struck regular price sits on its own line instead of baseline-floating next
   to the big figure. */
.pricing-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: 22px;
}
/* Dual-cycle support: each card ships BOTH the monthly and yearly figures.
   Only one is visible at a time, driven by [data-cycle] on #pricing-block.
   Default state is monthly so the page is correct before JS hydrates. */
.pricing-card__price--yearly { display: none; }
#pricing-block[data-cycle="yearly"] .pricing-card__price--monthly { display: none; }
#pricing-block[data-cycle="yearly"] .pricing-card__price--yearly  { display: flex; }

/* hero line: [symbol digits] [/ mes] */
.price-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}
.price-fig {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--forest);
  line-height: 1;
  letter-spacing: -0.02em;
}
.price-fig__num {
  font-size: var(--price-fs);
  /* allow the number itself to shrink if a card gets very narrow */
  min-width: 0;
}
/* the symbol rides the number at a smaller optical size (~0.6×) and tightens
   against the digits in both before/after positions. */
.price-fig__sym {
  font-size: calc(var(--price-fs) * 0.6);
  line-height: 1;
  font-weight: 400;
}
.price-fig[data-pos="before"] .price-fig__sym { margin-inline-end: 0.04em; }
.price-fig[data-pos="after"] .price-fig__sym {
  order: 2;
  margin-inline-start: 0.1em;
}
.price-period {
  font-family: var(--sans);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 300;
  color: var(--ink-faint);
  line-height: 1;
}

/* annotation line: struck regular price + when it applies */
.price-old-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}
.price-old {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  line-height: 1.2;
}
.price-old__note {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--ink-faint);
  letter-spacing: .01em;
  line-height: 1.2;
}

/* banner adaptativo — el único elemento centrado sobre la cuadrícula; el
   selector de moneda es la acción discreta, la oferta lidera. Una sola voz
   por ciclo (mensual = promo / anual = 2 meses gratis), conmutada por
   [data-cycle] en #pricing-block. */
.pricing-banner {
  display: block;
  text-align: center;
  margin: 0 auto clamp(24px, 3vw, 32px);
}
.pricing-banner__msg {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  max-width: 620px;
  margin: 0 auto;
  padding: 12px 22px;
  background: rgba(180, 154, 110, .12);
  border: 1px solid rgba(180, 154, 110, .35);
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.4;
}
.pricing-banner__msg strong { font-weight: 500; color: var(--forest); }
.pricing-banner__dia {
  color: var(--gold-deep);
  font-size: 1em;
  line-height: 1;
  flex: 0 0 auto;
}
/* Active voice follows the cycle on #pricing-block. */
#pricing-block[data-cycle="monthly"] .pricing-banner__msg--monthly { display: inline-flex; }
#pricing-block[data-cycle="yearly"]  .pricing-banner__msg--yearly  { display: inline-flex; }
@media (max-width: 480px) {
  .pricing-banner__msg {
    padding: 10px 16px;
    font-size: 12.5px;
    gap: 8px;
  }
  .pricing-banner__dia { font-size: .9em; }
}
@media (prefers-reduced-motion: reduce) {
  .cycle-toggle__btn,
  .cycle-toggle__pill { transition: none; }
}

/* features list */
.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pricing-card__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
}
.pricing-card__list li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sage);
  color: var(--paper-soft);
  font-size: 10.5px;
}
/* The two capacity rows (users / events) lead each card and read as the
   contract of the plan. They use the serif italic for a tonal lift and
   sit slightly apart from the rest. */
.pricing-card__list .pricing-card__limit {
  margin-bottom: 4px;
}
.pricing-card__list .pricing-card__limit span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--forest);
  line-height: 1.2;
}
.pricing-card__list .pricing-card__limit::before {
  background: var(--gold);
  color: var(--paper);
}
/* On the featured card, "ilimitados" earns a slightly louder marker so the
   contrast with the capped siblings lands instantly. */
.pricing-card__list .pricing-card__limit--unlimited::before {
  background: var(--gold-deep);
}
.pricing-card__list .pricing-card__limit--unlimited span {
  color: var(--forest);
}

/* pricing-foot — the quiet line under the grid: trial terms and conditions.
   Sets the page's only second-person "tú" voice to feel direct, calm. */
.pricing-foot {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  margin: clamp(28px, 3.4vw, 40px) auto 0;
  max-width: 60ch;
  line-height: 1.5;
}

/* cta — push to bottom of flex card */
.pricing-card__cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare {
  max-width: 940px;
  margin: clamp(56px, 8vw, 88px) auto 0;
  text-align: center;
}
.compare__title { font-size: clamp(26px, 3.4vw, 38px); }
.compare__limits {
  font-family: var(--sans); font-weight: 300; font-size: 13.5px;
  color: var(--ink-faint); margin: 20px 0 0; text-align: center;
}
.compare__limits a { color: var(--gold-deep); text-decoration: none; }
.compare__limits a:hover { text-decoration: underline; text-underline-offset: 3px; }
.compare__scroll {
  overflow-x: auto;
  margin-top: 32px;
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius-lg);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}
.compare__table {
  width: 100%;
  border-collapse: collapse;
}
.compare__table thead th {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 18px 14px;
  border-bottom: 1px solid var(--paper-deep);
  text-align: center;
}
.compare__table thead .compare__feat-head { text-align: left; }
.compare__table tbody th {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  color: var(--ink);
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--paper-deep);
}
.compare__table tbody td {
  text-align: center;
  padding: 13px 14px;
  border-bottom: 1px solid var(--paper-deep);
  font-family: var(--sans);
  font-size: 15px;
}
.compare__table tbody td[data-l="y"] { color: var(--sage); font-weight: 500; }
.compare__table tbody td[data-l="n"] { color: var(--paper-deep); }
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: 0; }
.compare__group td {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .02em;
  background: var(--paper-soft);
  text-align: left;
  padding: 14px 14px 8px;
  border-bottom: 1px solid var(--paper-deep);
}
.compare__scroll:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* abreviaturas de plan: ocultas en escritorio, visibles en móvil */
.c-abbr { display: none; }

/* tablet y móvil: la tabla cabe siempre sin scroll lateral */
@media (max-width: 880px) {
  .compare__scroll {
    overflow: hidden;
    border: 0;
    border-radius: 0;
    margin: 28px 0 0;
  }
  .compare__table {
    table-layout: fixed;
  }
  .compare__table thead .compare__feat-head { width: 52%; }
  .compare__table thead th:not(.compare__feat-head) { width: 16%; }
  .compare__table thead th { padding: 14px 6px; font-size: 11px; letter-spacing: .04em; word-break: break-word; }
  .compare__table tbody th {
    padding: 12px 10px;
    line-height: 1.25;
    word-break: break-word;
    hyphens: auto;
  }
  .compare__table tbody td { padding: 12px 4px; }
}

/* móvil estrecho: abreviaturas y tamaños compactos */
@media (max-width: 560px) {
  .compare__table thead th { font-size: 11px; letter-spacing: .04em; }
  .compare__table thead .compare__feat-head { letter-spacing: .02em; word-break: break-word; }
  .c-full { display: none; }
  .c-abbr { display: inline; }
  .compare__table tbody th {
    font-size: 12px;
    padding: 11px 8px;
  }
  .compare__table tbody td { padding: 11px 2px; font-size: 14px; }
  .compare__table tbody td[data-l="n"] { font-size: 12px; }
  .compare__group td { font-size: 11px; padding: 12px 8px 6px; }
}

/* responsive — tablet single-column */
@media (max-width: 880px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  /* On touch, both controls center under the headline (see .pricing-controls
     above) and grow to a comfortable ≥40px tap target. */
  .currency-control__label { font-size: 13px; }
  .currency-menu__trigger { font-size: 14px; padding: 12px 16px; }
  .cycle-toggle__btn { padding: 12px 20px; font-size: 14px; }
  /* Featured card grows no taller than its siblings once stacked — the
     resting lift reads as awkward on a single column. */
  .pricing-card--featured { padding-top: clamp(32px, 3.5vw, 44px); padding-bottom: clamp(32px, 3.5vw, 44px); }
}
/* responsive — mobile refinements */
@media (max-width: 560px) {
  .pricing-card {
    padding: 28px 20px;
  }
  .pricing-card__head {
    margin-bottom: 22px;
    padding-bottom: 22px;
  }
  .pricing-card__price {
    margin-top: 18px;
    gap: 6px;
  }
  /* tighten the magnitude scale on small screens */
  .pricing-grid { --price-fs: clamp(40px, 11vw, 52px); }
  .pricing-grid--dense { --price-fs: clamp(28px, 8vw, 38px); }
  .pricing-grid--ultra { --price-fs: clamp(23px, 6.5vw, 30px); }
  .pricing-card__list {
    gap: 10px;
    margin-bottom: 24px;
  }
  .pricing-card__list li {
    font-size: 14px;
  }
  .pricing-card__list li::before {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  /* Limit rows stay italic-serif on mobile but step down a notch. */
  .pricing-card__list .pricing-card__limit span { font-size: 16px; }
  /* On very narrow screens the "2 meses gratis" pill can drop below the label
     inside the Anual button; keep the gap tight so the button doesn't bloat. */
  .cycle-toggle__btn { padding: 11px 16px; gap: 7px; }
  .cycle-toggle__pill { font-size: 10px; padding: 2px 7px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid { display: grid; grid-template-columns: minmax(0,0.7fr) minmax(0,1.3fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; gap: 36px; } }
.faq-list { border-top: 1px solid var(--paper-deep); }
.faq-item { border-bottom: 1px solid var(--paper-deep); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 26px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); color: var(--forest); }
@media (max-width: 560px) {
  .faq-q { padding: 20px 0; font-size: 18px; gap: 16px; }
  .faq-a > div { padding: 0 0 20px; font-size: 15px; }
}
.faq-q .mk { font-size: 18px; color: var(--ink-soft); transition: transform .3s; flex: 0 0 auto; }
.faq-item[data-open="true"] .faq-q .mk { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1); }
.faq-item[data-open="true"] .faq-a { grid-template-rows: 1fr; }
.faq-a > div { padding: 0 0 28px; font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 60ch; overflow: hidden; }
.faq-a a { color: var(--gold-deep); text-decoration: underline; text-decoration-color: var(--paper-deep); text-underline-offset: 3px; }
.faq-a a:hover { text-decoration-color: var(--sage); }

/* ============================================================
   FINAL CTA · REENSAMBLAJE + FOOTER
   ============================================================ */
.final { text-align: center; }
.final .display { font-size: clamp(36px, 7vw, 92px); }
@media (max-width: 560px) {
  .final .display { font-size: clamp(32px, 10vw, 48px); }
  .final p { font-size: 15px; max-width: 100%; padding: 0 8px; }
  .final { padding-bottom: 110px; }
  .final-cta .btn--lg { padding: 15px 28px; font-size: 14px; }
  .final-cta .hero-note { font-size: 12px; }
  .trust-bar { margin-top: 30px; gap: 12px 20px; }
  .trust-bar .dia { font-size: 11px; }
}
.final p { font-family: var(--sans); font-weight: 300; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); margin: 26px auto 0; max-width: 52ch; line-height: 1.6; }

/* el reensamblaje: las seis piezas vuelven a una sola cuenta */
.assembly {
  position: relative;
  height: 200px;
  display: grid; place-items: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 4vw, 44px);
}
.assembly__chip {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--paper);
  color: var(--gold-deep);
  font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  transform: translate(var(--ox), var(--oy));
}
.assembly__card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--gold);
  border-radius: var(--radius-lg); padding: 28px 48px;
  position: relative; z-index: 2;
}
.assembly__card svg { width: 26px; height: auto; }
.assembly__wm { font-family: var(--serif); font-size: 24px; color: var(--forest); letter-spacing: .04em; }
.assembly.in .assembly__chip { animation: chip-home .9s cubic-bezier(.45, 0, .2, 1) forwards; }
.assembly.in .assembly__chip:nth-child(1) { animation-delay: 0s; }
.assembly.in .assembly__chip:nth-child(2) { animation-delay: .07s; }
.assembly.in .assembly__chip:nth-child(3) { animation-delay: .14s; }
.assembly.in .assembly__chip:nth-child(4) { animation-delay: .21s; }
.assembly.in .assembly__chip:nth-child(5) { animation-delay: .28s; }
.assembly.in .assembly__chip:nth-child(6) { animation-delay: .35s; }
.assembly.in .assembly__card { animation: card-settle .8s .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes chip-home {
  from { transform: translate(var(--ox), var(--oy)); opacity: 1; }
  to   { transform: translate(0, 0); opacity: 0; }
}
@keyframes card-settle {
  from { transform: scale(.965); }
  to   { transform: scale(1); }
}
@media (max-width: 560px) {
  .assembly { height: 170px; }
  .assembly__chip { width: 38px; height: 38px; margin: -19px 0 0 -19px; font-size: 14px; }
  .assembly__card { padding: 22px 34px; }
}

/* final CTA: botón y nota apilados y centrados en todos los viewports */
.final-cta {
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.final-cta .hero-note {
  justify-content: center;
  text-align: center;
  max-width: 40ch;
}

/* trust bar (garantías) */
.trust-bar {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 3vw, 40px);
  margin: 40px auto 0;
  padding: 0;
}
.trust-bar li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.trust-bar .dia { color: var(--ink-soft); font-size: 11px; }

footer.foot { background: var(--forest); color: var(--paper); padding: 64px 0 40px; }
@media (max-width: 560px) { footer.foot { padding: 48px 0 32px; } }
footer.foot .frow { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
footer.foot .brand .wm { color: var(--paper); }
footer.foot .tag { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--sand); margin: 16px 0 0; max-width: 30ch; line-height: 1.3; }
footer.foot nav { display: flex; gap: 40px; flex-wrap: wrap; }
footer.foot nav a { font-family: var(--sans); font-size: 13px; color: rgba(243,238,231,.72); text-decoration: none; transition: color .2s; }
footer.foot nav a:hover { color: var(--sand); }
footer.foot .fbot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(243,238,231,.16); }
footer.foot .fine { font-family: var(--sans); font-size: 12px; color: rgba(243,238,231,.72); letter-spacing: .03em; }
footer.foot .fine-link { color: rgba(243,238,231,.72); text-decoration: none; transition: color .2s; }
footer.foot .fine-link:hover { color: var(--sand); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
/* el entorno revelado no desplaza sus piezas: solo aparece */
.workspace-zone.reveal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .art__pulse { animation: none; }
  .assembly.in .assembly__chip,
  .assembly.in .assembly__card { animation: none; }
  .assembly.in .assembly__chip { opacity: 0; }
  .workspace-item, .workspace-item__art, .stage-part, .stage-part .art, .entry { transition: none; }
}

/* ---------- accessibility: focus + skip link ---------- */
.landing-focus:focus-visible,
.btn:focus-visible,
.faq-q:focus-visible,
.topbar nav a:focus-visible,
.topbar__burger:focus-visible,
footer.foot a:focus-visible,
.trust-bar a:focus-visible,
.workspace-item:focus-visible,
.stage-part:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 2000;
  background: var(--forest);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

/* ---------- visually-hidden (screen-reader only) ---------- */
.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;
}

/* ============================================================
   HARDEN — mock captions, trust links
   ============================================================ */
/* caption marking every faux-app mockup as illustrative */
.mock-caption {
  font-family: var(--sans); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  text-align: center; margin: 16px 0 0;
}

/* trust-bar links (e.g. RGPD → privacy page) */
.trust-bar a {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--paper-deep); text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.trust-bar a:hover { color: var(--forest); text-decoration-color: var(--sage); }