/* patriciacangas.com - v7
   Direction: white, confident, specialist. Two sans typefaces, no serif anywhere.
   Display: Plus Jakarta Sans at 600. Text: Inter. Fallback stacks are sans only.

   Colour rule, verified against WCAG on a white ground:
     --ink        #0b1512  16.5:1  body, headings, primary buttons
     --accent     #037a52   5.4:1  ANY coloured text, links, eyebrows, icon strokes
     --accent-lit #12c88a   2.2:1  FILLS AND EDGES ONLY, never text, never a stroke
     --pink       #dd015a   5.0:1  text-safe, reserved for the money moment
     --yellow     #ffda02   1.4:1  FILL ONLY, and only behind a dark glyph
   The bright green and the yellow cannot carry text on white. That is not a
   preference, it is the reason this palette is split into text and fill roles. */

/* ---------- Typefaces, served from this domain ----------
 *
 * These used to come from fonts.googleapis.com. That is a privacy problem in
 * the EU, not just a performance one: every visitor's browser hands their IP
 * address to Google before a single word renders, and a German court has
 * already ruled against exactly that. Self-hosting removes the third party
 * altogether, which is why the privacy page can now say there is no one else.
 *
 * Both families are variable (100-900), so one file per subset covers every
 * weight the site uses. font-display: swap keeps text readable while they load.
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB;
}

:root {
  --ground: #ffffff;
  --surface: #f7faf9;
  --ink: #0b1512;
  --ink-2: #566661;
  --line: #e4ece8;
  --line-strong: #cadbd3;
  --accent: #037a52;
  --accent-hover: #026042;
  --accent-soft: #eef7f2;
  --accent-lit: #12c88a;
  --pink: #dd015a;
  --pink-soft: #fdeaf1;
  --yellow: #ffda02;
  --yellow-soft: #fff9d6;
  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(11, 21, 18, .04);
  --shadow: 0 2px 4px rgba(11, 21, 18, .04), 0 12px 32px rgba(11, 21, 18, .07);
  --shadow-accent: 0 6px 18px rgba(11, 21, 18, .16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 80;
  background: var(--ground);
  padding: .6rem 1rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
}

/* The secure-payment card. Two things it has to get right.

   It must NOT stretch. It sits in a .grid-2 beside the money timeline, which is
   ~640px tall on a desktop, and grid items stretch by default: with three lines
   of content that left half a grey panel empty and she said so. It stacks on a
   phone, which is why the phone looked fine and the desktop did not.

   And the marks are deliberately generic outlines, not the Visa and Mastercard
   logos. Those are trademarks that need their official files to look right, and
   a hand-drawn approximation reads as a fake badge, which is the opposite of
   what a payment reassurance is for. Mastercard's mark is also red, and red is
   banned anywhere near a price on this site. */
.pay-safe {
  align-self: start;
}

.pay-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pay-marks li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-2);
}

.pay-marks svg {
  width: 44px;
  height: 29px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One line under the submit button, not the four-sentence block that was there
   before. She cut that as friction and she was right about three of its
   sentences, but one was load-bearing: nothing else on the site tells a person
   that half-finished answers are saved before they press anything. That fact
   and the link to the notice are what the law asks for at the point of
   collection. A consent tickbox is NOT what it asks for here: the basis for
   this processing is the contract, and asking for consent instead would be
   both unnecessary and weaker, since consent can be withdrawn at will. */
.fine-note {
  margin: .9rem 0 0;
  font-size: .875rem;
  color: var(--ink-2);
  max-width: 34rem;
}

/* The consent tick. It lives HERE and not at Stripe checkout, because the
   checkout's terms link is an account-wide setting pointing at
   pixelparenting.org, and that account will eventually take Pixel Parenting's
   own payments too. One URL cannot serve two businesses that must not look
   related, so the acceptance is collected where the wording is ours.

   Required, so the form cannot be submitted without it, and its VALUE is the
   version of the terms on the page, which is what gets stored. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 1.75rem 0 1.25rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}

.consent input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: .15rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.consent a {
  color: var(--ink);
}

/* ---------- Type ---------- */
h1,
h2,
h3 {
  font-family: var(--display);
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.03em;
  /* Plus Jakarta Sans ships a narrow space glyph; negative tracking eats it.
     Compensate so word gaps stay readable at display sizes. */
  word-spacing: .06em;
  line-height: 1.08;
}

h1 {
  font-size: clamp(2.05rem, 4.2vw, 3rem);
}

h2 {
  font-size: clamp(1.65rem, 3.3vw, 2.3rem);
}

h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.015em;
  word-spacing: .1em;
  line-height: 1.3;
  margin-bottom: .45rem;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: 1.175rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 1.75rem;
  max-width: 34rem;
}

/* The hero lead is three short blocks now: the aim, how much fits, and the
 * shape of the work. They are one thought broken for breath, so the blocks
 * that have another block after them get a paragraph gap; only the last one
 * keeps the lead's full space before the buttons. Done with an explicit class
 * rather than a sibling selector, because a sibling selector here would also
 * have to know which of the three is last. */
.lead-tight {
  margin-bottom: .75rem;
}

.lead-how {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 1.75rem;
  max-width: 34rem;
}

.lead-how b {
  color: var(--ink);
}

/* The hero eyebrow carries the "what is this and who is it for" job, so it is
 * bigger than the section eyebrows. Three readers in a row understood the page
 * as personal task management before reaching the jobs cards; this line is the
 * first thing that says "negocio". Only the hero one grows: making every
 * eyebrow this size changes the rhythm of the whole page. */
.hero .eyebrow {
  font-size: 1.0625rem;
  letter-spacing: .06em;
}

/* The first number on the page used to be the tool cost, at screen 7.8 of 17.8,
 * and her own first step at 11.7. Three readers asked the same question and none
 * of them asked "how much": they asked WHEN money happens. This line answers
 * that right after the jobs cards, so value still comes before price, six
 * screens earlier than the price section. */
.first-step {
  margin: 1.5rem 0 0;
  max-width: 46rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 1rem;
}

.eyebrow {
  font-family: var(--text);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .75rem;
}

.muted {
  color: var(--ink-2);
}

.small {
  font-size: .9375rem;
}

.fine {
  font-size: .875rem;
  color: var(--ink-2);
}

strong {
  font-weight: 600;
}

/* ---------- Icons ---------- */
.ic {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic-lg {
  width: 1.625rem;
  height: 1.625rem;
}

/* ---------- Header ---------- */
.band {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.band-inner {
  max-width: 76rem;
  margin: 0 auto;
  min-height: 4rem;
  padding: .6rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}

.brand:hover {
  color: var(--ink);
}

.mark {
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  /* Ink, not green. The rule on this site is that colour appears only where it
     tells you something: a tick that means "you get this", a step marker, the
     arrow that turns raw material into finished work. A monogram tells you
     nothing, it identifies. It was the only decorative use of the accent on the
     whole site, and it made the header the loudest green on the page. */
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.wordmark {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.015em;
  word-spacing: .1em;
  white-space: nowrap;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 1.6rem;
  margin-left: auto;
  font-size: .9375rem;
  font-weight: 500;
}

.nav-desktop a {
  color: var(--ink-2);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav-desktop a:hover {
  color: var(--ink);
}

.band-tools {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-left: auto;
}

.lang {
  display: flex;
  align-items: center;
  gap: .1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border-radius: 999px;
  padding: .2rem;
}

.lang a {
  color: var(--ink-2);
  text-decoration: none;
  min-height: 34px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.lang a[aria-current="page"] {
  background: var(--ground);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.lang a:hover {
  color: var(--ink);
}

/* ---------- Buttons ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .7rem 1.5rem;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-family: var(--text);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .01em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-accent);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(3, 122, 82, .26);
}

.cta:active {
  transform: translateY(0);
}

.cta-ghost {
  background: var(--ground);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.cta-ghost:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}

.band .cta {
  min-height: 44px;
  padding: .4rem 1.1rem;
  font-size: .9375rem;
  box-shadow: none;
}

.band .cta:hover {
  box-shadow: var(--shadow-accent);
}

/* ---------- Layout ---------- */
.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.narrow {
  max-width: 48rem;
}

.section {
  padding: 4rem 0 0;
}

.band-tint {
  background: var(--surface);
  padding: 4rem 0;
  margin-top: 4.5rem;
}

.section-head {
  max-width: 42rem;
  margin-bottom: 2rem;
}

.section-head p {
  color: var(--ink-2);
  font-size: 1.0625rem;
  margin: .75rem 0 0;
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.hero-grid > *,
.plans > *,
.about > * {
  min-width: 0;
}

/* ---------- Cards ---------- */
.card {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}

.band-tint .card {
  box-shadow: none;
}

.card.plain {
  background: var(--surface);
  border-color: transparent;
  box-shadow: none;
}

.band-tint .card.plain {
  background: var(--ground);
}

.card-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .75rem;
}

.card-head .ic {
  color: var(--accent);
}

.card-head h3 {
  margin: 0;
}

.icon-chip {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ---------- Task cards (entrada / salida / quién) ---------- */
.task {
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--shadow-sm);
}

.band-tint .task {
  box-shadow: none;
}

.task .sector {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .5rem;
}

.task h3 {
  font-size: 1.05rem;
  margin-bottom: .7rem;
}

/* ---------- Lists ---------- */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin: 0 0 .7rem;
}

.list li:last-child {
  margin-bottom: 0;
}

.list .ic {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .25rem;
  color: var(--accent);
}

/* ---------- Hero ---------- */
.hero {
  padding: 3.5rem 0 1rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.hero h1 {
  max-width: 15ch;
}

@media (max-width: 979px) {
  .hero h1 {
    max-width: none;
  }
}

.hero h1 {
  margin-bottom: 1.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.under-cta {
  font-size: .9375rem;
  color: var(--ink-2);
  margin: 0 0 1.5rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: var(--surface);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
}

.chip .ic {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--accent);
}

.shot {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.shot figcaption {
  font-size: .9375rem;
  color: var(--ink-2);
  padding: .85rem 1.15rem;
  background: var(--ground);
  border-top: 1px solid var(--line);
}

/* ---------- Sessions ---------- */
.step-num {
  font-family: var(--display);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .05em;
  word-spacing: .1em;
  color: var(--accent);
  margin: 0 0 .8rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.step-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.dur {
  font-family: var(--text);
  font-weight: 600;
  font-size: .875rem;
  color: var(--ink-2);
  background: var(--surface);
  border-radius: 999px;
  padding: .12rem .55rem;
  letter-spacing: 0;
}

.band-tint .dur {
  background: var(--ground);
}

.tag {
  display: inline-block;
  margin-top: .85rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: .25rem .6rem;
  border-radius: 6px;
}

/* ---------- Money timeline ---------- */
.money {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.money li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0 0 1.35rem;
  position: relative;
}

.money li::before {
  content: "";
  width: .7rem;
  height: .7rem;
  margin-top: .5rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.money li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .3rem;
  top: 1.4rem;
  bottom: .2rem;
  width: 1px;
  background: var(--line-strong);
}

.money li:last-child {
  padding-bottom: 0;
}

.money b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  word-spacing: .1em;
  margin-bottom: .15rem;
}

.money p {
  margin: 0;
  font-size: .9375rem;
  color: var(--ink-2);
}

/* ---------- Two lines ---------- */
.plans {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.plan {
  border-radius: var(--r-lg);
  position: relative;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.9rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow);
}

.plan h3 {
  font-size: 1.3rem;
  margin-bottom: .3rem;
}

.plan-when {
  color: var(--accent);
  font-size: .9375rem;
  font-weight: 600;
  margin: 0 0 1.1rem;
}

.plan-price {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.035em;
  word-spacing: .04em;
  line-height: 1;
  margin: 0 0 .35rem;
}

.plan-deposit {
  font-size: .9375rem;
  color: var(--ink-2);
  margin: 0 0 1.25rem;
}

.plan-body {
  flex: 1;
  margin-bottom: 1.5rem;
}

.plan-body p {
  font-size: .9375rem;
  color: var(--ink-2);
}

.plan .cta {
  width: 100%;
}

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.portrait {
  margin: 0;
  width: min(100%, 17rem);
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}

.facts {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}

.facts li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-size: .9375rem;
}

.facts .ic {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .22rem;
  color: var(--accent);
}

/* ---------- FAQ ---------- */
.faq h3 {
  font-size: 1.05rem;
}

.faq p {
  font-size: .9375rem;
  color: var(--ink-2);
}

/* ---------- Closing ---------- */
.close {
  margin-top: 4.5rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 2.5rem 1.75rem;
}

.close h2 {
  color: #fff;
  margin-bottom: .75rem;
}

.close p {
  color: rgba(255, 255, 255, .74);
}

/* The primary button in here was ink on ink: a black button on a black box,
 * visible only by its border until you hovered it, which on a phone means
 * never. Green at rest instead. This is the one place on the site where the
 * accent carries a solid fill behind white text, and it earns it - it is the
 * closing call to action and it has to be the loudest thing in the box.
 * White on #037a52 is 5.4:1, so it clears AA as normal text, not just large. */
.close .cta:not(.cta-ghost) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}

.close .cta:not(.cta-ghost):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.close .cta-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
  box-shadow: none;
}

.close .cta-ghost:hover {
  background: rgba(255, 255, 255, .09);
  border-color: #fff;
  color: #fff;
}

.steps {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.15rem;
}

.steps li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .9rem;
  align-items: start;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
}

.steps h3 {
  font-size: 1.0625rem;
  color: #fff;
  margin-bottom: .2rem;
}

.steps p {
  font-size: .9375rem;
  color: rgba(255, 255, 255, .72);
}

/* ---------- Footer ---------- */
/* The footer is two bands, not one row.
 *
 * Five links of equal weight in a single row read as a navigation bar, and
 * once Privacy joined Setup terms that is exactly what happened: the legal
 * pages were competing with the email address. Patricia: "those links now are
 * too important visually." So the legal pages get their own quieter band on
 * the soft ground, below the real footer, at the 14px floor. They are still
 * one tap away and still underlined - demoted, not hidden. */
.foot {
  margin-top: 4rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .9375rem;
}

.foot-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 2rem;
  display: grid;
  gap: .65rem;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
}

.foot .wordmark {
  color: var(--ink);
}

.foot-legal {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.foot-legal-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .45rem 1.5rem;
  font-size: .875rem;
  color: var(--ink-2);
}

.foot-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.25rem;
  margin: 0;
}

/* Underlined, but in the line colour rather than the text colour: still
 * unmistakably a link without shouting, and not colour alone. */
.foot-legal a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: .2em;
}

.foot-legal a:hover,
.foot-legal a:focus-visible {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.foot-legal .fine {
  margin: 0;
}

/* ---------- Sticky phone CTA ---------- */
.sticky-book {
  display: none;
}

/* ---------- Sub pages ---------- */
/* padding-top, NOT the shorthand.
 *
 * Every sub page is <section class="page wrap narrow">, so .page and .wrap land
 * on the SAME element. The shorthand that used to be here set the horizontal
 * padding to 0, and because .page is defined later in this file with equal
 * specificity it beat .wrap's `padding: 0 1.5rem` and every one of those pages
 * ran edge to edge on a phone. Patricia saw it on the intake form.
 * The homepage was fine throughout, which is what made it hard to spot: there
 * .wrap sits on its own div and nothing competes with it. */
.page {
  padding-top: 3rem;
}

.page h1 {
  font-size: clamp(1.85rem, 4.2vw, 2.6rem);
  margin-bottom: 1rem;
}

.calendly-inline-widget {
  min-width: 320px;
  height: 760px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ground);
}

/* The terms page is 1,129 words that someone forwards to a partner or a
   gestoría, and it used to be nine numbered headings each followed by ONE
   paragraph: 6.7 phone screens with nothing to hold on to. Nothing here
   changes a single word of what it says. What it adds is a way in: an index,
   a rule above each section so the nine blocks read as nine, and the long
   paragraphs split at sentence boundaries they already had. */
.terms h2 {
  font-size: 1.2rem;
  margin: 2.75rem 0 .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 5rem;      /* the sticky header must not eat the heading */
}

.terms h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.terms-index {
  margin: 2rem 0 0;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.terms-index-title {
  font-family: var(--text);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .75rem;
}

.terms-index ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}

.terms-index li {
  margin: 0 0 .4rem;
  break-inside: avoid;
}

.terms-index a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: .9375rem;
  border-bottom: 1px solid transparent;
}

.terms-index a:hover,
.terms-index a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}

@media (max-width: 599px) {
  .terms-index ol { columns: 1; }
}

.terms ul,
.terms ol {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
  color: var(--ink-2);
}

.terms li {
  margin-bottom: .45rem;
}

.terms p {
  color: var(--ink-2);
}

.notice {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r);
  padding: 1.1rem 1.25rem;
  font-size: .9375rem;
}

/* ---------- Breakpoints ---------- */
@media (min-width: 700px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plans.plans-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 2.5rem;
  }

  .card {
    padding: 1.75rem;
  }

  .close {
    padding: 3rem 2.75rem;
  }
}

@media (min-width: 980px) {
  .nav-desktop {
    display: flex;
  }

  .band-tools {
    margin-left: 0;
  }

  .hero {
    padding: 5rem 0 1.5rem;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 3.25rem;
  }

  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .section {
    padding-top: 5rem;
  }

  .band-tint {
    padding: 5rem 0;
    margin-top: 5.5rem;
  }
}

@media (max-width: 979px) {
  .sticky-book {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 40;
    padding: .65rem 1.5rem calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }

  .sticky-book .cta {
    width: 100%;
  }

  .band-inner .cta {
    display: none;
  }
}


/* ---------- Colour in the icons and the schemas (v7) ----------
   The page is black and white. Colour appears only where it tells you something:
   a checkmark that means "you get this", a chip that labels a kind of thing,
   the arrow that turns raw material into finished work. Text-safe values only
   for strokes; #ffda02 and #12c88a appear as fills behind a dark glyph, never
   as a line on white, where neither reaches 3:1. */

.list .ic {
  color: var(--accent);
}

.card-head .ic,
.section-head .ic {
  color: var(--accent);
}

/* Icon badges rotate through the three brand tints so a long page of cards
   does not read as one flat colour. The glyph stays ink for contrast. */
.icon-chip {
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}

.grid-3 > *:nth-child(3n + 2) .icon-chip,
.grid-2 > *:nth-child(2n) .icon-chip {
  background: var(--yellow-soft);
  color: #7a5c00;
}

.grid-3 > *:nth-child(3n) .icon-chip {
  background: var(--pink-soft);
  color: #b00147;
}

/* The Entra / Sale pairs are the smallest schema on the site: raw material in,
   finished work out. Colour the two sides so the transformation is visible
   before the words are read. */
/* Step numbers in the how-it-works grid */
.step-num {
  color: var(--accent);
}

.step-num .dur {
  color: var(--ink-2);
}

/* Never colour money in pink or red. Patricia's rule, 25 Aug 2026: an alert
   colour on anything price-related during a sale reads as a warning, and the
   payment is not a hazard. Tags are neutral; pink survives only as one of the
   three icon-badge tints, where it labels rather than alarms. */
.tag {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.plan.featured {
  border-color: var(--accent);
  border-width: 2px;
}

.plan.featured .plan-when {
  color: var(--accent);
}

.chip {
  border-radius: 999px;
  padding: .5rem 1rem;
}

.chip .ic {
  color: var(--accent);
}

/* ---------- Form (v7) ----------
   Inputs are 16px minimum: below that iOS zooms the page on focus and a
   non-technical user on a phone loses their place. Labels sit above the
   control and stay visible, because a placeholder-as-label disappears the
   moment the keyboard covers the field. */

.form-card {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.field {
  margin-bottom: 1.9rem;
}

.field:last-child {
  margin-bottom: 0;
}

.field > label,
.field .field-label {
  display: block;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: .3rem;
}

.field .hint {
  display: block;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: .65rem;
}

.field .opt {
  font-weight: 400;
  color: var(--ink-2);
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: .85rem 1rem;
  min-height: 52px;
  scroll-margin-block: 6rem;
}

.field textarea {
  resize: vertical;
  min-height: 6rem;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Chip options: the whole row is the tap target, never just the control */
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opts.stack {
  flex-direction: column;
  gap: .5rem;
}

.opt-item {
  margin: 0;
}

.opt-item label {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .6rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  background: var(--ground);
}

.opts.stack .opt-item label {
  border-radius: 14px;
  align-items: flex-start;
  padding: .8rem 1.05rem;
}

.opt-item input {
  accent-color: var(--accent);
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  margin: 0;
}

.opts.stack .opt-item input {
  margin-top: .12rem;
}

.opt-item input:checked ~ span {
  font-weight: 500;
}

.opt-item:has(input:checked) label {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.opt-item label:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sub-label {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  margin: 0 0 .5rem;
}

.sub-label + .opts {
  margin-bottom: 1.1rem;
}

.field-error {
  display: none;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .9375rem;
  color: #b00147;
}

.field.is-invalid .field-error {
  display: flex;
}

.field.is-invalid input,
.field.is-invalid textarea {
  border-color: #b00147;
}

.form-recap {
  background: var(--surface);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 1.75rem 0 1.25rem;
}

.form-recap b {
  color: var(--ink);
  font-weight: 600;
}

.form-note {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 1.75rem;
}

@media (min-width: 40rem) {
  .form-card {
    padding: 2.5rem;
  }
}

/* ---------- FAQ accordion (v7) ----------
   Eleven questions as eleven scannable lines instead of eleven paragraphs.
   Native details/summary: no JavaScript, keyboard and screen-reader support
   for free, and the answer is still in the DOM for search engines. */

.faq-list {
  border-top: 1px solid var(--line);
  max-width: 46rem;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 60px;
  padding: 1rem 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq-item summary:hover {
  color: var(--accent);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.faq-item p {
  margin: 0 0 1.15rem;
  padding-right: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 42rem;
}

/* ---------- Prose measure ----------
   Long lines are the other half of "hard to scan". Nothing readable runs
   wider than about 70 characters, whatever the viewport. */
.section-head p,
.lead {
  max-width: 40rem;
}

.card p,
.task p,
.plan-body p {
  max-width: 34rem;
}

/* Every prose block obeys the measure, not only the ones that looked wide */
.form-note,
.small,
.fine,
.terms p,
.terms li {
  max-width: 40rem;
}

/* A notice is a sidebar, not an essay. It carries one bold line and at most
   three short points, and the list styling exists so it cannot quietly grow
   back into a wall.

   On width, this went round three times today and the answer is one axis, not
   centring. Capping the box at 46rem left it stranded while the cards ran past
   it; capping only the text left a short column in a wide green field; centring
   the text gave the section two alignments and centring the headings too would
   have given it three, because the card grid below stays left whatever happens
   up here. The box is now exactly the measure of the section lead above it, so
   the heading, the lead, the box and the cards all start on the same left edge
   and the box ends where its own text ends.

   Then she asked three times for it centred, and it is her site. Centred it is.
   46rem rather than 40rem because that is the widest the box can be while its
   text still passes the render audit's 760px measure check, so the empty margin
   either side is as small as it can be. */
.notice {
  max-width: 46rem;
  margin-inline: auto;
}

.notice ul {
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}

.notice ul li {
  position: relative;
  padding-left: 1rem;
  margin: 0 0 .45rem;
}

.notice ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.notice ul li:last-child {
  margin-bottom: 0;
}

.notice > b:first-child {
  display: block;
  margin-bottom: .35rem;
}

.shot figcaption {
  max-width: 40rem;
}

.list li span,
/* Landing under the sticky header is the classic anchor defect: the heading you
   jumped to is the one thing you cannot see. */
section[id],
article[id] {
  scroll-margin-top: 5.5rem;
}


/* ---------- The phone menu ----------
   A horizontal chip row lived here first. It failed for the reason horizontal
   scrollers usually fail on a phone: most of the options are off-screen and
   nothing tells a thumb where to aim. An ordinary menu button is what this
   audience already knows how to use. */

/* A word, not three bars. On a 17-screen page this menu is a table of contents,
   and it has to be found to be used: a labelled control gets found, a bare glyph
   gets guessed at. It also lands 4px SHORTER than the 48px square it replaced,
   so the headline sits a little higher than before rather than lower. */
.nav-word {
  font-family: var(--text);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .85rem;
  margin-right: -.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--ground);
  color: var(--ink);
  cursor: pointer;
}

/* Revealed by the inline <head> script, so a browser with JavaScript off gets
   no menu button rather than a button that does nothing. */
.js .nav-toggle {
  display: inline-flex;
}

.nav-toggle:hover {
  border-color: var(--ink-2);
}

.nav-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .15s ease;
}

.nav-bars span:nth-child(1) { top: 0; }
.nav-bars span:nth-child(2) { top: 6px; }
.nav-bars span:nth-child(3) { top: 12px; }

/* Open, the three bars become the cross that closes it. */
[aria-expanded="true"] .nav-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

[aria-expanded="true"] .nav-bars span:nth-child(2) {
  opacity: 0;
}

[aria-expanded="true"] .nav-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - 4.6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom));
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px rgba(11, 21, 18, .35);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}

.nav-panel.is-open {
  opacity: 1;
  transform: none;
}

.nav-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One full-width row per section, taller than the 44px floor because the
   people using this are often reading in daylight between other jobs. */
.nav-panel a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 .25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
}

.nav-panel li:last-child a {
  border-bottom: 0;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  color: var(--accent);
}

.nav-panel .nav-panel-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: 1rem;
  border-bottom: 0;
  color: #fff;
  font-size: 1rem;
}

.nav-panel .nav-panel-cta:hover {
  color: #fff;
}

/* The page behind the panel must not scroll under it, and it must not compete
   with it either. Without the scrim the hero's buttons and the sticky booking
   bar showed through, so three identical calls to action were on screen at
   once and the menu read as part of the page rather than on top of it. */
body.nav-open {
  overflow: hidden;
}

body.nav-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(11, 21, 18, .42);
  animation: nav-scrim .18s ease both;
}

@keyframes nav-scrim {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The band is 85% white, so the scrim tinted the header through it. While the
   menu is open the header has to be solid, or the thing you are looking at
   looks like it is behind the thing it is in front of. */
body.nav-open .band {
  background: var(--ground);
}

/* And the sticky booking bar goes: dimmed or not, a second "Empieza hoy"
   under the first one is just two of the same button. */
body.nav-open .sticky-book {
  visibility: hidden;
}

@media (min-width: 980px) {
  .js .nav-toggle,
  .nav-panel {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-bars span,
  .nav-panel {
    transition: none;
  }

  body.nav-open::after {
    animation: none;
  }
}

/* ---------- The Entra / Sale pair, rebuilt ----------
   This is the smallest schema on the site: raw material in, finished work out.
   It was built as a two-column table with a 4.5rem label rail, and that rail
   was doing three kinds of damage at once. It squeezed the value text into a
   narrow measure so every line wrapped awkwardly; it made every card a
   different height, so the pain line at the foot of each one landed at a
   different place and the grid read as ragged; and it made a transformation
   look like a spreadsheet.

   Now the label sits above its own line, the value gets the full width of the
   card, and a green chevron between the two carries the meaning the rail was
   failing to carry. */

.flow {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
}

/* The label leads the line rather than sitting in a column beside it. The old
   `flex: 0 0 4.5rem` rail was the whole defect: it squeezed the value into a
   narrow measure so every line wrapped, and it cost two vertical levels per
   card for two words. Inline, the text flows and wraps under itself. */
.flow li {
  margin: 0;
  color: var(--ink-2);
}

.flow b {
  margin-right: .4rem;
  font-weight: 600;
  color: var(--ink-2);
}

.flow li:last-child b {
  color: var(--accent);
}

/* The payoff line carries the weight. It is what they are buying. */
.flow li:last-child {
  color: var(--ink);
}

/* The turn from raw material into finished work, drawn once per card. */
.flow li + li::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: .45rem 0 .5rem .3rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

/* Pinned to the foot of the card, so a row of cards ends on one line however
   long the text above happens to run. */
.task .who {
  margin: auto 0 0;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--ink-2);
}

/* Restored: removed by accident with the old .flow rules, and the audit caught
   it on the very next run. */
.list li span,
.flow span {
  max-width: 38rem;
}

/* ---------- The three-step tracker ----------
   Replaces a "Step 2 of 3" eyebrow, which told you where you were but not
   where you were going. This shows the whole path at once, which is what
   lowers anxiety for someone who has not bought from a stranger online
   before: three steps, visible, finite.

   It is an <ol> so the order is real to a screen reader, and the current
   step carries aria-current="step". Nothing here is a link: you cannot skip
   ahead, and a step that looks clickable and is not is worse than plain text. */
.tracker {
  display: flex;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.tracker li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding-top: 1.9rem;
  font-size: .875rem;
  color: var(--ink-2);
  text-align: center;
}

/* The rail runs between dot centres, so it stops at the first and last. */
.tracker li::before {
  content: "";
  position: absolute;
  top: .53rem;
  left: calc(-50% + 13px);
  width: calc(100% - 26px);
  height: 2px;
  background: var(--line-strong);
}

.tracker li:first-child::before {
  display: none;
}

.tracker li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15px;
  height: 15px;
  margin-left: -7.5px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--ground);
}

/* Done: filled, and the rail leading into the current step is filled too. */
.tracker li.is-done {
  color: var(--ink-2);
}

.tracker li.is-done::after {
  border-color: var(--accent);
  background: var(--accent);
}

.tracker li.is-done + li::before,
.tracker li.is-current::before {
  background: var(--accent);
}

/* Here now: a ring, so it reads as a position rather than an achievement. */
.tracker li.is-current {
  color: var(--ink);
  font-weight: 600;
}

.tracker li.is-current::after {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* An option switched off by an exclusive choice. Disabled inputs already skip
   the tab order; this is so the eye agrees with the keyboard.

   Dimmed with a colour, not with opacity. WCAG exempts disabled controls from
   the contrast floor, but this audience reads in daylight on a phone, and more
   practically: the render audit reads computed colour and is blind to opacity
   on an ancestor, so an opacity-dimmed label is a contrast change that nothing
   measures. #687571 is 4.66:1 on white, so it clears the floor on its own. */
.opt-item.is-off label {
  color: #687571;
  cursor: not-allowed;
}

.opt-item.is-off label span {
  color: inherit;
}

/* A conditional field arriving mid-form. It is a real .field, so it inherits
   the label, hint, input and error styling; this only marks it as an answer to
   the choice above rather than a new question. */
.field.reveal {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-soft);
}

/* ---------- The two ways to build, inside the box that prices them ----------
   These lived in a notice under the three cards, written as a comparison in
   bullet form: the reader had to hold one bullet in their head while reading
   the next, then apply the result to whichever card was theirs, and the
   arithmetic (1.100 + 1.000) was never shown. Both prices now sit in the box
   they belong to. */
.plan-modes {
  margin: 0 0 1.25rem;
  padding: .9rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: .9375rem;
}

.plan-modes li {
  display: grid;
  grid-template-columns: 1.15rem 1fr auto;
  align-items: baseline;
  gap: .55rem;
  margin: 0 0 .55rem;
  color: var(--ink-2);
}

.plan-modes li:last-child {
  margin-bottom: 0;
}

.plan-modes .ic {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--accent);
  transform: translateY(.15rem);
}

/* No plus. A plus next to 2.100 € reads as "add 2.100 €" and invites
   1.100 + 2.100, which is exactly how Patricia read it. Both rows now carry a
   full total instead, so there is no arithmetic on offer: two prices, pick one.
   A quiet dot keeps the rows aligned without claiming anything. */
.plan-modes .dot {
  width: 5px;
  height: 5px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--line-strong);
  transform: translateY(-.2rem);
}

.plan-modes li b {
  color: var(--ink);
  white-space: nowrap;
}

.plan-modes li.on b {
  color: var(--ink);
}

.plan-modes li.up span:not(.dot) {
  color: var(--ink);
}

/* The quoted box gets no mode rows, so it needs one plain line saying the same
   choice exists. Without it, the emptiest card reads as the one with fewest
   options rather than the one whose price is not knowable yet. */
.plan-note {
  margin: .9rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--ink-2);
}

/* ---------- Hero: the picture runs to the right edge ----------
   Chosen over the full-bleed version because it holds up better on a phone:
   there the picture is simply full width under the text, with nothing sitting
   on top of it, so no scrim has to be balanced against legibility and the
   photograph is never dimmed to make words readable.

   Every word stays on white, so the contrast the render audit measures is the
   contrast that renders. Nothing here needs the photo-aware checker.

   The left padding reproduces the page gutter: half the space left over once
   the 76rem wrap is taken out, plus the wrap's own 1.5rem, with 1.5rem as the
   floor. Measured equal to the brand mark and the first section heading at
   1440, 1280, 1024 and 390. .hero clips, so a scrollbar's worth of rounding
   cannot turn into a horizontal scroll. */
@media (min-width: 980px) {
  .hero {
    padding: 0 0 1rem;
    overflow: hidden;
  }

  .hero-grid {
    max-width: none;
    padding: 0;
    gap: 0;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hero-grid > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 3rem 4rem max(1.5rem, calc((100vw - 76rem) / 2 + 1.5rem));
  }

  .hero .shot {
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  .hero .shot img {
    height: 100%;
    object-fit: cover;
  }
}

/* On a phone the picture goes edge to edge under the text: a full picture, not
   a card. */
@media (max-width: 979px) {
  .hero .shot {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
}

/* The caption said "The work happens at your desk and in your accounts. I join
   over Zoom." Both halves are already said: the lead says "inside your own
   accounts" and a chip says "Live, in your working hours". The alt text keeps
   the description for a screen reader. Only the hero loses its caption. */
.hero .shot figcaption {
  display: none;
}

/* On a phone the hero was 1,159px of text before the photograph even started,
   so the picture she asked to show sat entirely below an 844px fold. Both are
   said again further down the same page: the Tiendalista line in full in
   "Quién soy", and the two chip claims by the notice in the jobs section
   ("parto de cómo lo haces tú hoy") and by "Cuándo empezamos y en qué idioma"
   ("en español o en inglés"). Nothing is lost to a screen reader either.

   Know the cost before you defend this. Both simulated buyers named the
   Tiendalista line as the thing that settled "is this for my business or for my
   personal life", and on a phone it is not there. That is why the hero eyebrow
   and the lead have to carry that job alone below 979px: they are the only
   copy above the photograph that says negocio. Do not weaken either one
   without putting the Tiendalista line back on the phone. */
@media (max-width: 979px) {
  .hero .under-cta,
  .hero .chips {
    display: none;
  }

  .hero-grid {
    gap: 2rem;
  }
}