/* ==========================================================================
   Store: Programs, the order page, the test payment page, Welcome and the
   withdrawal sheet (design/artboards/Programs-*.dc.html, Checkout.dc.html,
   Welcome.dc.html). Built on app.css: tokens and classes only, no colors,
   shadows or motion values of its own; radii are the two tokens, and 50%
   for the canvas's numbered circles and the ways to buy's radio marks.
   ========================================================================== */

/* Page text the store pages share */

.store-narrow {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 640px;
  margin-inline: auto;
}

.store-lead {
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-500);
}

.store-fine {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A text toggle on a details summary: 'Start sooner?'. */
.store-toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: var(--target);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--navy-800);
  text-decoration-line: underline;
  text-decoration-color: var(--ink-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  list-style: none;
}

.store-toggle::-webkit-details-marker {
  display: none;
}

.store-toggle:hover {
  text-decoration-color: currentColor;
}

[data-ground="dark"] .store-toggle {
  color: var(--white);
  text-decoration-color: var(--white-40);
}

[data-ground="dark"] .store-toggle:hover {
  text-decoration-color: var(--white);
}

details[open] > .store-toggle .icon {
  transform: rotate(180deg);
}

/* Programs (design/artboards/Programs-Main.dc.html, Programs-NextLevel.dc.html, Programs-Mobile.dc.html, approved
   2026-10-05; reordered for the decision on 2026-10-22, the owner's Programs critique). The page's first screen is the
   decision: a compact head, the level switch and the dark panel, whose side box holds the price and the one gold
   button. How it works, the offers below the panel and the answers come after a light scroll. The canvas's top bars,
   circles and gold badge are the owner's approved page; its shadows are left out (no shadows anywhere), and a
   selected card shows its 2px navy ring instead.
   Heights the fold is built on (1366 x 768, the top bar 64 and the page's 48 above): the head 102 (the eyebrow's row
   16, the H1 46, the lead 24, 8 between), 20, the switch 72, 20, then the panel's 43 above the side box, its 24, the
   two ways to buy 203 (each row 44, the checked one's detail 114, a 1px rule), 16 and the gold button 48: its foot at
   112 + 102 + 20 + 72 + 20 + 43 + 24 + 203 + 16 + 48 = 660. Since the levels' discount badges (2026-10-27) a new
   client's switch is about 98 tall (every card's tag and badge on a row under its name), 126 in Spanish (Beginner's
   tag and badge a row each), so the foot is at about 685, 713 in Spanish, both still on the first screen (checked in
   headless Chrome after the review of 2026-10-27). */

.programs {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.programs-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The head: the eyebrow, with the formal offer at the end of its row (the link follows the lead in the markup), the
   H1 by the client's state and one line. */
.programs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  min-width: 0;
}

.programs-head > * {
  grid-column: 1 / -1;
}

.programs-head > .programs-eyebrow {
  grid-column: 1;
  grid-row: 1;
}

/* A quiet compact link: its 44 px target reaches over the row's 16 px without making the row taller. */
.programs-head > .programs-offer {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin-block: -14px;
}

.programs-eyebrow,
.path-title {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.programs-title {
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -0.015em;
}

.programs-lead {
  max-width: 880px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-700);
}

/* How it works: three steps in one row under the decision, for a client on no level yet; the title is for screen
   readers until the phone layout. */

.how-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.how-steps {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.how-step {
  display: flex;
  flex: 1 1 200px;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
}

.how-step + .how-step {
  border-left: 1px solid var(--ink-200);
}

.how-num,
.path-step {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--navy-800);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-800);
  font-family: var(--font-mono);
}

.how-num {
  width: 28px;
  height: 28px;
  font-size: 13px;
  line-height: 16px;
}

.how-num-on {
  background: var(--navy-800);
  color: var(--white);
}

.how-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.how-name {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink-900);
}

.how-line {
  font-size: 13px;
  line-height: 19px;
  color: var(--ink-500);
}

/* The certificate line of a finished level, in its panel. */

.record-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-700);
}

.record-line .icon {
  color: var(--navy-800);
}

[data-ground="dark"] .record-line,
[data-ground="dark"] .record-line .icon {
  color: var(--white);
}

/* The level switch: three compact cards and the Full Program in one row, each a link to its panel: its number, its
   name, its tag and discount, then one line, the price while it is on offer, else where the client stands. 72 tall:
   12 + 24 + 2 + 20 + 12 and its 1px border (the selected card's 2px ring takes 1px of padding, so nothing moves). At
   1240 px four cards leave 231 px beside the number: the name in 18 px keeps 'Full Program' and '10% discount' on one
   row (230). The tag and the discount are one group (.path-marks, owner request 2026-10-27, the levels' '20% discount'
   beside the Full Program's '10%'). While a card of the row carries a discount every card's group takes a row of its
   own under the name, so the badges line up across the row (review of 2026-10-27: 'Beginner', 'Start here' and '20%
   discount' need about 300 px, so some groups wrapped and others sat at the right edge), the badge under the tag if
   that row is still too narrow; the row grows to about 100 (128 in Spanish). With no discount in the row (sales
   paused, or nothing left to buy) a tag stays beside the name. The foot keeps to the card's bottom, so the cards of a
   row still line up their price lines. Its title and note are for screen readers; the panel's chips say the same. */

.path {
  min-width: 0;
}

.path-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.path-list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 12px;
}

.path-item {
  display: flex;
  min-width: 0;
}

.path-card {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 12px 16px;
  overflow: hidden;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
  color: var(--ink-700);
  text-decoration: none;
}

.path-card:hover {
  border-color: var(--navy-800);
  color: var(--ink-700);
}

/* The 3px bar on top: navy on the selected card and on levels the client is in or finished. */
.path-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--ink-200);
}

.path-card[aria-current="true"]::before,
.path-card-done::before,
.path-card-current::before {
  background: var(--navy-800);
}

.path-card[aria-current="true"] {
  border-width: 2px;
  border-color: var(--navy-800);
  padding: 11px 15px;
}

.path-card-done {
  background: var(--ink-50);
}

.path-step {
  width: 24px;
  height: 24px;
  border-color: var(--ink-300);
  font-size: 12px;
  line-height: 16px;
}

.path-card[aria-current="true"] .path-step,
.path-card-done .path-step,
.path-card-current .path-step {
  border-color: var(--navy-800);
  background: var(--navy-800);
  color: var(--white);
}

.path-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: stretch;
  gap: 2px;
  min-width: 0;
}

.path-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 8px;
  min-height: 24px;
}

/* The tag and the discount badge, one group that wraps as a whole under the name and inside itself when it must. */
.path-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}

/* While a card of the row carries a discount, every card's group takes its own row under the name, so the badges of a
   row line up rather than sitting beside one name and under the next (review of 2026-10-27). */
.path-list:has(.path-badge) .path-marks {
  flex-basis: 100%;
}

.path-tag,
.path-badge {
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--navy-800);
  border-radius: var(--radius-control);
  background: var(--navy-800);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.path-tag-outline {
  background: transparent;
  color: var(--navy-800);
}

.path-name {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--navy-800);
}

.path-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: auto;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-500);
}

.path-count,
.path-sep,
.path-end {
  white-space: nowrap;
}

.path-price {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
}

.path-vat {
  font-weight: 400;
  color: var(--ink-500);
}

.path-was {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-500);
  white-space: nowrap;
}

/* The rest of the program on the Full Program's card (2026-10-24): the line naming the levels it orders, under the
   name, wrapping inside the card;
   under 768 px its lead ('The rest of the program: ') is left out (.path-rest-lead), so it names the levels only. */
.path-rest {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-700);
  overflow-wrap: anywhere;
}

.path-full-rest .path-top {
  min-height: 24px;
}

/* The Full Program's card: three upright bars in the number's place (not a progress mark, so no slant; the canvas
   rounds them by 1px at this size). */

.path-full-mark {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 24px;
}

.path-full-mark span {
  display: block;
  width: 6px;
  height: 16px;
  border-radius: 1px;
  background: var(--navy-800);
}

.path-full-mark span:nth-child(2) {
  background: var(--navy-700);
}

.path-full-mark span:nth-child(3) {
  background: var(--navy-900);
}

/* The level panel: ink-900 under a 3px gold edge, the one dark ground of the page. One panel per level is rendered;
   the selected one shows (store.js swaps them in place, the hidden attribute does the rest). It clips its corners
   without becoming a scroll container (overflow: clip, never hidden), so the order bar can stick above the tab bar on a
   phone. Side by side: what the level is (its head, format and what it covers), its sessions, then the side box. */

.level-stage {
  position: relative;
  overflow: clip;
  border-radius: var(--radius-card);
  background: var(--ink-900);
  color: var(--white);
}

.level-stage::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--gold-500);
}

.lp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(272px, 320px);
  grid-template-areas: "info days side";
  align-items: start;
  gap: 40px;
  padding: 43px 40px 40px;
}

.lp-info {
  grid-area: info;
}

.lp-days {
  grid-area: days;
}

.lp-side {
  grid-area: side;
}

.lp-info,
.lp-head,
.lp-covers {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lp-info,
.lp-head {
  gap: 16px;
}

.lp-covers {
  gap: 16px;
  margin-top: 12px;
}

.lp-days {
  min-width: 0;
}

.lp-step,
.lp-status,
.lp-intro-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.lp-name {
  font-size: 44px;
  line-height: 50px;
  letter-spacing: -0.015em;
}

.lp-tagline {
  font-size: 17px;
  line-height: 26px;
  color: var(--ink-300);
}

.lp-format {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.lp-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--white-16);
  border-radius: var(--radius-control);
  font-size: 13px;
  line-height: 18px;
  color: var(--white);
}

.lp-chip .icon,
.lp-line .icon {
  color: var(--gold-400);
}

.lp-label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.lp-covers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-covers-list li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 23px;
  color: var(--white);
}

.lp-covers-list .icon {
  margin-top: 3px;
  color: var(--gold-500);
}

/* The sessions: a details element, open as sent; store.js folds it on a phone. Its summary is the column's label, a
   44 px target (the only way to open the folded list on a phone) that reaches 10 px over and under its 24 px row, so
   the column does not move. */

.lp-days-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--target);
  margin-block: -10px;
  list-style: none;
  cursor: pointer;
}

.lp-days-head::-webkit-details-marker {
  display: none;
}

.lp-days-icon {
  flex: none;
  color: var(--ink-300);
}

.lp-days[open] .lp-days-icon {
  transform: rotate(180deg);
}

.lp-days-list {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border-top: 1px solid var(--white-8);
}

.lp-days-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--white-8);
  font-size: 15px;
  line-height: 21px;
  color: var(--white);
}

.lp-code {
  flex: none;
  min-width: 40px;
  padding: 3px 6px;
  border-radius: var(--radius-control);
  background: var(--white-8);
  color: var(--gold-400);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

/* The side box: the ways to buy and the gold button, the reassurance line and the first open session; on a level the
   client does not hold, the introductory call's card (owner request 2026-10-27); then, on a level the client holds,
   its progress and Book a session. */

.lp-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--white-16);
  border-radius: var(--radius-card);
  background: var(--navy-800);
}

/* The stepper's form holds only its hidden fields; its buttons sit in the order form (the form attribute). */
.lp-steps {
  display: none;
}

.lp-order,
.lp-choose {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lp-choose {
  position: relative;
}

/* The ways to buy (2026-10-22): radio rows, 44 tall, the checked one's detail under it. The radios come first in the
   fieldset, so the checked one's row, detail, total and label follow it in CSS alone (sibling selectors, no script). */

.lp-opt-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.lp-opt {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: var(--target);
  padding: 10px 0;
  color: var(--white);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  cursor: pointer;
}

.lp-opt + .lp-opt-detail + .lp-opt {
  border-top: 1px solid var(--white-16);
}

.lp-opt-mark {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid var(--white-40);
  border-radius: 50%;
}

.lp-opt-mark::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--white);
}

.lp-opt-name {
  min-width: 0;
}

.lp-opt-price {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ink-300);
  white-space: nowrap;
}

.lp-opt:hover .lp-opt-mark {
  border-color: var(--white);
}

.lp-opt-input[data-option="package"]:checked ~ .lp-opt[data-for="package"] .lp-opt-mark,
.lp-opt-input[data-option="complete"]:checked ~ .lp-opt[data-for="complete"] .lp-opt-mark,
.lp-opt-input[data-option="singles"]:checked ~ .lp-opt[data-for="singles"] .lp-opt-mark {
  border-color: var(--white);
}

.lp-opt-input[data-option="package"]:checked ~ .lp-opt[data-for="package"] .lp-opt-mark::after,
.lp-opt-input[data-option="complete"]:checked ~ .lp-opt[data-for="complete"] .lp-opt-mark::after,
.lp-opt-input[data-option="singles"]:checked ~ .lp-opt[data-for="singles"] .lp-opt-mark::after {
  display: block;
}

.lp-opt-input[data-option="package"]:checked ~ .lp-opt[data-for="package"],
.lp-opt-input[data-option="complete"]:checked ~ .lp-opt[data-for="complete"],
.lp-opt-input[data-option="singles"]:checked ~ .lp-opt[data-for="singles"] {
  font-weight: 600;
}

.lp-opt-input[data-option="package"]:focus-visible ~ .lp-opt[data-for="package"],
.lp-opt-input[data-option="complete"]:focus-visible ~ .lp-opt[data-for="complete"],
.lp-opt-input[data-option="singles"]:focus-visible ~ .lp-opt[data-for="singles"] {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* The checked way shows its detail, total and button label; the others' are left out. A row's own price shows while
   another is checked, so each price is said once. */
.lp-opt-input[data-option="package"]:checked ~ .lp-opt[data-for="package"] .lp-opt-price,
.lp-opt-input[data-option="complete"]:checked ~ .lp-opt[data-for="complete"] .lp-opt-price,
.lp-opt-input[data-option="singles"]:checked ~ .lp-opt[data-for="singles"] .lp-opt-price,
.lp-opt-input[data-option="package"]:checked ~ .lp-opt-detail:not([data-for="package"]),
.lp-opt-input[data-option="complete"]:checked ~ .lp-opt-detail:not([data-for="complete"]),
.lp-opt-input[data-option="singles"]:checked ~ .lp-opt-detail:not([data-for="singles"]),
.lp-opt-input[data-option="package"]:checked ~ .lp-bar .lp-for:not([data-for="package"]),
.lp-opt-input[data-option="complete"]:checked ~ .lp-bar .lp-for:not([data-for="complete"]),
.lp-opt-input[data-option="singles"]:checked ~ .lp-bar .lp-for:not([data-for="singles"]) {
  display: none;
}

/* A detail is 114 tall whichever way is checked, so the gold button stays put: a price block (the badge row 24, the
   figure 48, the note 20) or the count (44), its total (24) and the price of one (20), 4 between and 14 under. Under
   1024 px the package's is 84 and the other two 108 (below). */
.lp-opt-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0 0 14px 30px;
}

.lp-choose-one > .lp-opt-detail {
  padding: 0;
}

.lp-deal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 24px;
}

.lp-deal .path-badge {
  border-color: var(--gold-500);
  background: var(--gold-500);
  color: var(--navy-800);
  font-weight: 500;
}

.lp-deal .path-was {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-300);
}

.lp-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.lp-figure {
  font-family: var(--font-serif);
  font-size: 44px;
  line-height: 48px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
}

.lp-unit {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-300);
}

.lp-note {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-300);
}

/* The single sessions' count: 'Number of sessions' and a stepper (minus, the count, plus), 44 tall. */
.lp-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--target);
  margin-bottom: 4px;
}

.lp-count-label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--white);
}

/* The frame sits outside the 44 x 44 buttons and reaches 1 px over and under the 44 px row, so the row stays 44. */
.lp-stepper {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin-block: -1px;
  border: 1px solid var(--white-40);
  border-radius: var(--radius-control);
}

.lp-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--white);
}

.lp-stepper-btn:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--white-8);
}

/* An end of the count: disabled as sent, aria-disabled once store.js counts (so the focus stays on it). */
.lp-stepper-btn:disabled,
.lp-stepper-btn[aria-disabled="true"] {
  color: var(--white-24);
  cursor: not-allowed;
}

.lp-stepper-btn:focus-visible {
  outline-offset: -2px;
}

.lp-stepper-count {
  min-width: 32px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: var(--white);
  text-align: center;
}

.lp-total {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: var(--white);
}

/* The order's bar: the gold button (and on a phone the checked way's total beside it, where the bar sticks). Its label
   is short ('Order Beginner', 'Complete Beginner', 'Order 3 sessions'; the widest, 'Completar Intermediate', about 164
   px of the 192 the 320 px box leaves beside the arrow); one that still does not fit wraps inside the gold, two lines
   in the button's 48 px, never past its edges (.btn never wraps elsewhere). */
.lp-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.lp-bar .lp-cta {
  height: auto;
  min-height: var(--control-h);
  padding-block: 3px;
  text-align: center;
  white-space: normal;
}

.lp-bar-sum {
  display: none;
}

.lp-terms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 19px;
  color: var(--white);
}

.lp-line .icon {
  flex: none;
  margin-top: 1px;
}

a.lp-line {
  align-items: center;
  min-height: var(--target);
}

.lp-soft {
  color: var(--ink-300);
}

/* The introductory call's card (owner request 2026-10-27): a 1px frame inside the box with the product's name in the
   panel's gold micro, then 'Not sure which level fits?', its line and the outline 'Book a free call' (the gold order
   stays the box's one filled button); once booked, the name, the day and times and a quiet link to Home. */
.lp-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--white-16);
  border-radius: var(--radius-card);
}

/* Alone in the box (sales paused, nothing to order), the box is its frame. */
.lp-intro:only-child {
  padding: 0;
  border: 0;
}

.lp-intro-title {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--white);
}

.lp-intro-line {
  font-size: 13px;
  line-height: 19px;
  color: var(--ink-300);
}

/* The card's links wrap inside themselves when they must, as the gold order does (.btn never wraps): a label that
   could not wrap pushed the side box past the panel's edge on a phone (review of 2026-10-27: 'Reservar llamada gratis'
   at 360 px). The card is 236 px inside from 1024 px up and 226 at 360: the button's 16 px sides keep 'Reservar
   llamada gratis' (220) on one line there, and 'Entra o cámbiala desde Inicio' (211) fits as it is; at 320 (188)
   both take two lines. */
.lp-intro .btn {
  height: auto;
  white-space: normal;
}

.lp-intro-cta {
  min-height: var(--control-h);
  margin-top: 4px;
  padding: 3px 16px;
  text-align: center;
}

/* A booked call's line: each part ('Mon 5 Oct', '10:00 New York') kept whole, the dots ending the lines. */
.lp-intro-part {
  white-space: nowrap;
}

/* The link's 44 px target reaches 4 px over the gap above its 20 px row and 8 px into the card's padding under it, so
   its 4 px focus ring (2 px outline, 2 px offset) clears the call's line and the card's frame (review of 2026-10-27:
   12 px each way ran the ring through the line above). Two lines of it still fit the 44. */
.lp-intro-home {
  align-self: flex-start;
  margin-block: -4px -8px;
}

/* A level the client holds: its progress. Under the ways to buy it is set apart by the box's rule, its figure smaller. */
.lp-progress {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lp-progress .pips {
  margin: 10px 0 6px;
}

.lp-progress .lp-cta {
  margin-top: 12px;
}

.lp-progress:not(:first-child) {
  padding-top: 14px;
  border-top: 1px solid var(--white-16);
}

.lp-progress:not(:first-child) .lp-figure {
  font-size: 32px;
  line-height: 38px;
}

/* Below the panel: your own work and the course side by side, then the answers. */

.programs-more {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.more {
  display: flex;
  flex: 2 1 560px;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.more-course {
  flex: 1 1 300px;
}

.more-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 24px;
  padding: 18px 20px;
}

.more-row + .more-row {
  border-top: 1px solid var(--ink-200);
}

.more-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.more-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.more-course-card {
  flex: 1;
  gap: 10px;
}

.more-course-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.more-course-form {
  display: flex;
}

.more-state {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--target);
  font-size: 13px;
  line-height: 20px;
  color: var(--navy-800);
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.faq-item {
  display: flex;
  flex: 1 1 250px;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.faq-icon {
  color: var(--navy-800);
}

.faq-answer {
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-500);
}

.programs-fine {
  padding-top: 24px;
  border-top: 1px solid var(--ink-200);
}

/* The order page: one column, top to bottom (the item, the billing details, the price box, the consents,
   the legal lines, the item and its total right before the button), as wide as a form reads well. */

.checkout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
  margin-inline: auto;
}

.checkout-change {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.order-item {
  gap: 4px;
}

/* The rest of the program's levels and its discount in the item card (2026-10-24). */
.order-rest {
  margin: 4px 0;
}

.order-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.checkout-billing {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The count of single sessions of a level (2026-10-21): one select, as wide as a field of the grid's column. */
.order-count {
  max-width: 304px;
}

.checkout-billing > .form-grid {
  margin-top: 8px;
}

.order-notice {
  display: flex;
  flex-direction: column;
}

.order-price {
  gap: 8px;
}

.checkout-consents {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-consents .check-text {
  max-width: 480px;
}

.checkout-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-line {
  color: var(--ink-700);
}

/* The item and its exact total with VAT right before 'Order with obligation to pay', then the next step. */

.order-submit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-due {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-200);
}

.order-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-500);
}

/* An order's money: Price and the VAT line, then the Total (the order page, the test page). */

.money {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.money-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.money-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.money-line dd {
  margin: 0;
}

.money-total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
}

/* The test payment page */

.mockpay-tag {
  display: flex;
}

.mockpay-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Welcome */

.welcome-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.moment-tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 40px;
  height: 40px;
  border: 1px solid var(--navy-900);
  border-radius: var(--radius-card);
  background: var(--white);
  color: var(--navy-900);
}

.moment-tile-wait {
  border-color: var(--ink-200);
}

.welcome-title {
  margin-top: 24px;
}

.welcome-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  margin-top: 12px;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-500);
}

.welcome-pips {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.welcome-setup {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
}

.setup-list {
  margin-top: 12px;
  border-top: 1px solid var(--ink-200);
}

.setup-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-200);
}

.setup-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  color: var(--navy-800);
}

.setup-title {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-900);
}

.setup-title-pending {
  color: var(--ink-700);
}

.setup-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: var(--target);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.setup-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setup-inline {
  display: flex;
  gap: 8px;
}

.setup-inline .input {
  flex: 1;
  min-width: 0;
  height: var(--control-h-compact);
}

.welcome-paper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 24px;
}

.welcome-facts {
  align-self: stretch;
  margin-bottom: 8px;
}

.welcome-withdraw {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}

.welcome-card {
  gap: 24px;
}

.start-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.start-sooner-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.welcome-booked {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.welcome-booked-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* The withdrawal sheet */

.withdraw-card {
  gap: 16px;
}

.withdraw-statement {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 29px;
  color: var(--navy-800);
}

.withdraw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

/* Responsive */

@media (max-width: 1023px) {
  /* Welcome on one column: the moment, then the calendar, then the setup list. */
  .welcome-layout {
    display: flex;
    flex-direction: column;
  }

  .welcome-main {
    display: contents;
  }

  .welcome-side {
    order: 1;
    margin-top: 32px;
  }

  .welcome-setup,
  .welcome-paper {
    order: 2;
  }
}

@media (max-width: 767px) {
  .welcome-setup {
    margin-top: 32px;
  }
}

/* Programs under 1024 px: the panel in one column, the side box right under the level's name, then the format, what
   it covers and the sessions (`display: contents` on the info wrapper, `order` on the parts; nothing focusable changes
   order, since the side box comes before the sessions in the markup too). The switch keeps one row, its tags and
   discounts left out (its cards say the price or where the client stands). The order's bar sticks to the foot of the screen while its own
   place in the box is still below it (position: sticky, in flow, so it never covers the box's end and leaves with it):
   the checked way's total and the gold button. */

@media (max-width: 1023px) {
  .path-card {
    gap: 8px;
    padding: 10px 12px;
  }

  .path-card[aria-current="true"] {
    padding: 9px 11px;
  }

  /* A card in progress says what is to book ('1 por reservar'); its held count, too long beside it on a narrow card
     ('6 de 8 realizadas · 1 por reservar' is 176 px, a phone's card leaves 117), is the panel's. The tag and the
     discount (.path-marks, every card's since 2026-10-27) are left out too: the panel's side box shows the badge right
     below. */
  .path-marks,
  .path-foot-priced .path-count,
  .path-foot-priced .path-sep,
  .path-held {
    display: none;
  }

  /* A status that still does not fit its card ('Terminado el 28 sept 2025' at 360 px) wraps rather than being cut off
     by the card's overflow. */
  .path-end {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .path-name {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    color: var(--ink-900);
  }

  .lp {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 27px 20px 24px;
  }

  .lp-info {
    display: contents;
  }

  .lp-head {
    order: 1;
    gap: 4px;
  }

  /* The panel's column keeps the grid's align-items: start, so the box takes the column's width (stretch) rather than
     its content's, whatever it holds. */
  .lp-side {
    order: 2;
    align-self: stretch;
    padding: 16px;
  }

  .lp-intro {
    padding: 14px;
  }

  .lp-format {
    order: 3;
    margin-top: 0;
  }

  .lp-covers {
    order: 4;
    gap: 12px;
    margin-top: 4px;
  }

  .lp-days {
    order: 5;
    margin-top: 4px;
  }

  .lp-name {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.01em;
  }

  .lp-tagline {
    font-size: 15px;
    line-height: 22px;
  }

  /* A price block reads as one row under its badge: the figure, and beside it the package's short note ('8 sessions');
     84 tall. A completion's note ('5 sessions left · €100 each') takes a row of its own, so the figure keeps its width. */
  .lp-opt-detail:not([data-for="singles"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 12px;
    padding-bottom: 12px;
  }

  .lp-opt-detail > .lp-deal {
    grid-column: 1 / -1;
  }

  .lp-opt-detail > .lp-amount {
    grid-column: 1;
  }

  .lp-opt-detail > .lp-note {
    grid-column: 2;
    text-align: right;
  }

  .lp-opt-detail[data-for="complete"] > .lp-note {
    grid-column: 1 / -1;
    text-align: left;
  }

  /* The single sessions' detail is 108 tall here, the completion's height (the count 44, the total 24, the price of
     one 20, 4 between and 12 under), so the bar stays put between those two; beside a package (84) it moves 24 px. */
  .lp-opt-detail[data-for="singles"] {
    padding-bottom: 12px;
  }

  .lp-count {
    margin-bottom: 0;
  }

  .lp-note-lead {
    display: none;
  }

  .lp-figure {
    font-size: 40px;
    line-height: 44px;
  }

  .lp-deal .path-was {
    font-size: 14px;
  }

  /* One row whatever the label (review of 2026-10-22): the total keeps its width and the button takes the rest, its
     label wrapping to two lines inside it when it must ('Complete / Intermediate'), so the bar stays 72 tall: the
     button 48, the 11 px padding and the 1 px border. */
  .lp-bar {
    position: sticky;
    bottom: 8px;
    z-index: 2;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 12px -8px 0;
    padding: 11px;
    border: 1px solid var(--white-16);
    border-radius: var(--radius-card);
    background: var(--navy-800);
  }

  .lp-bar-sum {
    display: flex;
    flex: none;
    flex-direction: column;
  }

  .lp-bar-price {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
  }

  .lp-bar-price .lp-unit {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
  }

  .lp-bar-note {
    font-size: 12px;
    line-height: 16px;
    color: var(--ink-300);
  }

  .lp-bar .lp-cta {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-inline: 14px;
  }

  .lp-bar .lp-cta .icon {
    display: none;
  }

  .lp-progress .pips {
    margin: 4px 0;
  }
}

/* Programs on phones (Programs-Mobile.dc.html): the head (the formal offer staying on the eyebrow's row), the levels as
   a 2 x 2 switch, the panel, then How it works, your own work, the course and the answers. The order's bar sticks above
   the tab bar and the phone's safe area. Heights the first screen is built on (375 x 812, the tab bar 64, so 748 to
   see): the top bar 56 and 24 above the head; the head 132 (the eyebrow's row 16, the H1 34, the lead 66, 8 between),
   16; the switch 124 (two rows of 58, 8 between), 16; the panel's 23 above its name, the name and its line 60, 16; the
   side box's 16, the two ways to buy 173 (the checked package 128, its row 44 and its detail 84; a 1px rule; the other
   row 44); the bar 12 + 72: its foot at 80 + 132 + 16 + 124 + 16 + 23 + 60 + 16 + 16 + 173 + 84 = 740, in flow above
   the tab bar. A head of two lines, or a longer lead, and the bar sticks there instead. The bar is one row whatever
   the label (review of 2026-10-22: it wrapped to two, 116 tall, for 'Order Intermediate' and every longer label), so
   the 740 holds on Intermediate too. A completion's detail is 108, so a client who opens on one has the foot at 764:
   the bar sticks at 668 to 740, the single sessions' row (636 to 680) showing its line (646 to 668) above it. */

@media (max-width: 767px) {
  .programs {
    gap: 28px;
  }

  .programs-top {
    gap: 16px;
  }

  .programs-head {
    column-gap: 12px;
  }

  .programs-eyebrow {
    font-size: 11px;
  }

  .programs-title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.01em;
  }

  .programs-lead {
    font-size: 15px;
    line-height: 22px;
  }

  .how {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .how-title {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .how-steps {
    flex-direction: column;
  }

  .how-step {
    flex: none;
    padding: 14px 16px;
  }

  .how-step + .how-step {
    border-top: 1px solid var(--ink-200);
    border-left: 0;
  }

  .how-num {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .path-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .path-card {
    padding: 8px 10px;
  }

  .path-card[aria-current="true"] {
    padding: 7px 9px;
  }

  .path-card::before {
    display: none;
  }

  .path-step {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .path-full-mark {
    height: 20px;
  }

  .path-full-mark span {
    width: 5px;
    height: 14px;
  }

  .path-top {
    min-height: 20px;
  }

  .path-name {
    line-height: 20px;
  }

  .path-foot,
  .path-price {
    font-size: 12px;
    line-height: 18px;
  }

  .path-rest {
    font-size: 12px;
    line-height: 16px;
  }

  /* On a phone the card names the levels only ('Intermediate and Advanced'): with its lead the line took four lines
     and doubled the grid's second row (2026-10-24 review fix). The panel's tagline still says the whole line. */
  .path-rest-lead {
    display: none;
  }

  .lp {
    padding-top: 23px;
  }

  /* The switch above says which of the three levels this is. */
  .lp-step {
    display: none;
  }

  .lp-name {
    font-size: 28px;
    line-height: 34px;
  }

  .lp-bar {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px);
  }

  .lp-intro {
    gap: 6px;
    padding: 12px;
  }

  /* The gap above is 6 here: 2 px over it leaves the focus ring its 4. */
  .lp-intro-home {
    margin-top: -2px;
  }

  /* 14 px, the compact button's size, keeps 'Order Intermediate' (127 px) on one line beside '€1,184 + VAT' at 375. */
  .lp-bar .lp-cta {
    font-size: 14px;
  }

  .programs-more {
    flex-direction: column;
    gap: 28px;
  }

  .more,
  .more-course {
    flex: none;
  }

  .more-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 14px 16px;
  }

  .more-name {
    grid-column: 1;
  }

  .more-price {
    grid-column: 1;
    justify-content: flex-start;
    gap: 6px;
  }

  .more-action {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .more-course-card {
    padding: 16px;
  }

  .faq {
    gap: 12px;
  }

  .faq-list {
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-card);
    background: var(--white);
  }

  .faq-item {
    flex: none;
    gap: 4px;
    padding: 14px 16px;
    border: 0;
    background: transparent;
  }

  .faq-item + .faq-item {
    border-top: 1px solid var(--ink-200);
  }

  .faq-icon {
    display: none;
  }
}

/* Under 360 px the formal offer's link leaves the eyebrow's row for a row of its own after the lead, and the order's
   bar draws closer (206 px inside at 320: '€1,184 + VAT' 88, 8 between, so the button's label keeps 88 px, its
   longest word 'Intermediate' 85). */
@media (max-width: 359px) {
  .programs-head > .programs-offer {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
    margin-block: 0;
  }

  .lp-bar {
    gap: 8px;
  }

  .lp-bar .lp-cta {
    padding-inline: 10px;
    overflow-wrap: anywhere;
  }
}