/* clientesfelices.app merchant landing — La estampita. */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

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

html {
  scroll-behavior: smooth;
}

.cf-page {
  min-height: 100vh;
}

.hidden {
  display: none !important;
}

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

  .a-hole,
  .a-hole__mark,
  .a-card {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   A · La estampita · punch card
   ═══════════════════════════════════════════════════════════ */

.cf-body {
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;

  --font-cond: "Outfit", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --a-paper: #fef08a;
  --a-ink: #422a0f;
  --a-mark: #78350f;
  --a-stamp: #fcc000;
  --a-stamp-wet: #eab308;
  --a-hole: #fef9c3;
  --a-rule: rgb(66 42 15 / 16%);
  --a-card: #fff;
  --a-kraft: #f4e8d0;
  --a-plus: #123f4a;
  --a-sibling: #1a1210;
  --a-sibling-ink: #fde7ef;
  --a-pide: #f9a8d4;

  background:
    radial-gradient(circle at 12px 12px, rgb(66 42 15 / 8%) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
    linear-gradient(180deg, #fef08a 0%, #fefce8 22rem, #fefce8 100%);
  color: var(--a-ink);
  font-family: var(--font-body);
}

.cf-body a {
  color: inherit;
}

.a-flash {
  margin: 0 0 0.4rem;
  padding: 0.75rem 0.85rem;
  background: var(--a-ink);
  color: var(--a-stamp);
  font-family: var(--font-cond);
  font-weight: 700;
  text-align: center;
}

.a-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  max-width: 72rem;
  margin: 0 auto;
}

.a-wordmark {
  margin: 0;
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.a-wordmark__logo {
  display: block;
  height: 3.75rem;
  width: auto;
}

a.a-top__join {
  font-family: var(--font-cond);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--a-ink);
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

a.a-top__join:hover {
  color: var(--a-mark);
}

.a-main {
  margin: 0;
}

.a-stage {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.5rem 1.25rem 3.25rem;
  display: grid;
  gap: 2rem;
}

.a-kicker {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a-mark);
}

.a-hero h1 {
  margin: 0;
  font-family: var(--font-cond);
  font-size: clamp(3rem, 10vw, 5.6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  max-width: 11ch;
}

.a-lede {
  margin: 1.2rem 0 0;
  max-width: 36ch;
  font-size: 1.15rem;
  line-height: 1.4;
  font-weight: 400;
}

.a-lede-stamp {
  display: block;
  width: fit-content;
  margin: 1.15rem 0 0;
  padding: 0.28rem 0.55rem;
  border: 2.5px solid var(--a-ink);
  background: var(--a-stamp);
  color: var(--a-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-1.4deg);
}

.a-card,
.a-blank {
  position: relative;
  background: var(--a-card);
  color: var(--a-ink);
}

.a-card {
  padding: 1.6rem 1.4rem 1.3rem;
  transform: rotate(-1.4deg);
  box-shadow: 0 28px 50px -24px rgb(66 42 15 / 35%);
}

.a-card__brand,
.a-card__serial {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.a-card__biz {
  margin: 0.7rem 0 0.15rem;
  font-family: var(--font-cond);
  font-size: clamp(1.7rem, 6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.a-card__rule {
  margin: 0 0 1.4rem;
  font-size: 1.05rem;
}

.a-card__holes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.7rem 0.55rem;
}

.a-hole {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed var(--a-rule);
  background: var(--a-hole);
  display: grid;
  place-items: center;
  position: relative;
}

.a-hole__n {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.55;
}

.a-hole__mark {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 40%, var(--a-ink) 0 8.5%, transparent 9%),
    radial-gradient(circle at 66% 40%, var(--a-ink) 0 8.5%, transparent 9%),
    var(--a-stamp);
  box-shadow: inset 0 0 0 2px rgb(66 42 15 / 18%);
  opacity: 0;
  transform: scale(0.6) rotate(-18deg);
  transition: opacity 0.35s var(--ease-out-expo), transform 0.45s var(--ease-out-expo);
}

.a-hole__mark::after {
  content: "";
  position: absolute;
  width: 42%;
  height: 26%;
  left: 29%;
  bottom: 22%;
  border: 2px solid var(--a-ink);
  border-top: 0;
  border-radius: 0 0 50% 50%;
}

.a-hole.is-punched .a-hole__n {
  opacity: 0;
}

.a-hole.is-punched .a-hole__mark {
  opacity: 1;
  transform: scale(1) rotate(-12deg);
}

.a-card__serial {
  margin-top: 1.1rem;
}

.a-signup {
  display: flex;
  justify-content: center;
  padding: 3.25rem 1.25rem 2.5rem;
  scroll-margin-top: 1.25rem;
}

.a-blank {
  width: min(100%, 34rem);
  padding: 1.6rem 1.25rem 1.5rem;
}

.a-blank__brand {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.55;
}

.a-blank h2 {
  margin: 0.45rem 0 0;
  font-family: var(--font-cond);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
}

.a-blank__note {
  margin: 0.3rem 0 1.25rem;
  text-align: center;
  font-size: 0.95rem;
}

.a-form {
  display: grid;
  gap: 0.9rem;
}

.a-form__errors {
  margin: 0 0 0.4rem;
  padding: 0.75rem 0.85rem;
  background: var(--a-hole);
  color: #78350f;
}

.a-form__errors p {
  margin: 0 0 0.35rem;
  font-weight: 700;
}

.a-form__errors ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.a-form__rule {
  margin: 0.4rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--a-rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-mark);
}

.a-field {
  display: grid;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.a-field input[type="text"],
.a-field input[type="email"],
.a-field input[type="password"] {
  min-height: 2.85rem;
  width: 100%;
  border: 0;
  border-bottom: 2px dashed rgb(66 42 15 / 45%);
  background: transparent;
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--a-ink);
  padding: 0.35rem 0;
  border-radius: 0;
}

.a-field input:focus {
  outline: none;
  border-bottom-color: var(--a-stamp);
}

.a-field input:focus-visible {
  outline: 2px solid var(--a-stamp);
  outline-offset: 3px;
}

.a-field__row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
}

.a-field__row input {
  flex: 1;
  min-width: 0;
}

.a-field__row:has(.a-eye) input {
  padding-right: 2.75rem;
}

.a-field__suffix {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  opacity: 0.55;
  white-space: nowrap;
}

.a-eye {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--a-ink);
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.a-form__hint {
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-family: var(--font-cond);
}

.a-form__hint li {
  font-size: 0.75rem;
}

.a-form .text-green-600 { color: oklch(45% 0.12 145deg); }
.a-form .text-red-600 { color: var(--a-mark); }
.a-form .text-xs { font-size: 0.75rem; }

.a-check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-family: var(--font-cond);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  min-height: 2.75rem;
}

.a-check input {
  margin-top: 0.35rem;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  accent-color: var(--a-ink);
}

.a-check a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.a-submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-height: 3.25rem;
  padding: 0.7rem 1.2rem;
  background: var(--a-stamp);
  color: var(--a-ink);
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.a-submit:hover {
  background: var(--a-stamp-wet);
}

.a-submit:focus-visible {
  outline: 2px solid var(--a-ink);
  outline-offset: 3px;
}

.a-blank__fine {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  text-align: center;
}

.a-blank__fine a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.a-how,
.a-ways,
.a-prize,
.a-compare {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 0;
}

.a-how h2,
.a-ways h2,
.a-prize h2,
.a-compare h2 {
  margin: 0;
  font-family: var(--font-cond);
  font-size: clamp(1.85rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

/* Uncapped on purpose. Every one of these introduces a full-width row of
   cards, and at 46ch they broke around half the container: the section read
   as two different widths stacked on each other, with the last two or three
   words orphaned on a line of their own. The hero's `.a-lede` keeps its 36ch
   because it sits beside the estampita in a two-column stage. */
.a-how__lede,
.a-ways__lede,
.a-compare__lede {
  margin: 0.7rem 0 0;
  font-size: 1.1rem;
  line-height: 1.4;
}

.a-compare__grid {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
}

.a-col {
  padding: 1.15rem 1.1rem 1.2rem;
}

.a-col__kicker {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.a-col h3 {
  margin: 0;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.a-col p {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
}

.a-col__price {
  margin-top: 0.85rem;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.a-col--carton {
  background: var(--a-kraft);
  border: 2px dashed rgb(66 42 15 / 28%);
  opacity: 0.92;
}

.a-col--renta {
  background: var(--a-card);
  box-shadow: inset 0 0 0 1px var(--a-rule);
  background-image: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 1.55rem,
    rgb(66 42 15 / 8%) 1.55rem,
    rgb(66 42 15 / 8%) 1.57rem
  );
}

.a-col--ours {
  background: var(--a-stamp);
  color: var(--a-ink);
}

.a-col__price--free {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border: 2.5px solid var(--a-ink);
  transform: rotate(-1.4deg);
}

/* The paid column. Deep petrol rather than --a-ink: the ink is the page's
   text colour, so a card painted in it read as a block of type rather than a
   plan, and brown-on-gold went muddy next to Inicial. Petrol is the one cool
   note on a warm page, which is what an upgrade should be. */
.a-col--paid {
  background: var(--a-plus);
  color: var(--a-hole);
  box-shadow: inset 0 0 0 3px var(--a-stamp);
}

.a-col--paid .a-col__price {
  color: var(--a-stamp);
}

/* ── The two plan cards ──────────────────────────────────────────────── */

/* The checklist takes the slack so the price sits on the baseline in both
   cards. Without this the prices float at the height their own list ends,
   and the row's one comparable number is the hardest thing to compare. */
.a-compare__grid--plans .a-col {
  display: flex;
  flex-direction: column;
}

.a-compare__grid--plans .a-col__list {
  flex: 1;

  /* The list is a grid, so growing it to take the slack grew the gaps between
     its rows rather than the space under them: two items drifted apart while
     three stayed tight. Pack the rows and let the leftover fall below. */
  align-content: start;
}

/* Both plan prices are stamped. $0 already was, and a bare bold $49 next to
   it lost every time — on a page whose whole metaphor is a sello, the price
   is the thing to stamp. */
.a-compare__grid--plans .a-col__price {
  align-self: flex-start;
  display: inline-block;

  /* A floor under the gap, not just whatever the flex slack leaves. The
     longer card spends its slack on the checklist, so without this the price
     crowds the last line on Esencial while floating free on Inicial. Both
     cards take the same margin, so the baseline stays shared. */
  margin-top: 1.6rem;
  padding: 0.15rem 0.5rem;
  border: 2.5px solid currentcolor;
  font-size: 1.5rem;
  transform: rotate(-1.4deg);
}

/* Column checklists come from the plans' own labelled grants, so they are as
   long as the plan is. */
.a-col__list {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.a-col__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.95rem;
  line-height: 1.35;
}

.a-col__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* "Todo lo de Inicial" is carried, not gained. */
.a-col__list li.is-carried {
  opacity: 0.7;
}

.a-col__list li.is-carried::before {
  content: "+";
  opacity: 0.55;
}

.a-col__foot {
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.8;
}

/* ── The three modes, and what happens at the threshold ──────────────── */

.a-ways__grid {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
}

/* Quieter than the compare cards on purpose: this section explains, it does
   not sell, and three more filled blocks would compete with the price list
   sitting above it. */
.a-col--way {
  background: var(--a-card);
  box-shadow: inset 0 0 0 1px var(--a-rule);
}

.a-ways__note {
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.8;
}

.a-prize__list {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: prize;
  background: var(--a-kraft);
}

.a-prize__list li {
  position: relative;
  padding: 1.15rem 1.25rem 1.2rem 3.4rem;
  counter-increment: prize;
}

.a-prize__list li + li {
  border-top: 2px dashed rgb(66 42 15 / 22%);
}

/* Numbered like a receipt rather than with the round stamps `a-how` uses, so
   the two step lists on this page do not read as the same list twice. */
.a-prize__list li::before {
  content: counter(prize);
  position: absolute;
  top: 1.15rem;
  left: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.55;
}

.a-prize__list h3 {
  margin: 0;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.a-prize__list p {
  margin: 0.3rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
}

.a-compare__note {
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.8;
}

.a-how__steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.a-how__steps li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.9rem;
  align-items: start;
}

.a-how__n {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--a-stamp);
  color: var(--a-ink);
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 1.15rem;

  /* `place-items: center` centres the line box, not the glyph, so the
     inherited line-height left the digit sitting high in the circle.
     Tabular figures give 1, 2 and 3 the same advance width, which is what
     stops the 1 reading off-axis against the other two. */
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}

.a-how__steps h3 {
  margin: 0;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.a-how__steps p {
  margin: 0.25rem 0 0;
  font-size: 1.02rem;
  line-height: 1.4;
}

.a-also {
  margin: 3.5rem 0 0;
  padding: 2.75rem 1.25rem 3.25rem;
  background: var(--a-sibling);
  color: var(--a-sibling-ink);
}

.a-also__inner {
  max-width: 72rem;
  margin: 0 auto;
}

.a-also__kicker {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a-pide);
}

.a-also h2 {
  margin: 0;
  font-family: var(--font-cond);
  font-size: clamp(1.85rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.a-also__lede {
  margin: 1rem 0 0;
  font-size: 1.1rem;
  line-height: 1.45;
}

.a-also__link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  margin-top: 0.65rem;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--a-pide);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.a-also__link:hover {
  color: var(--a-stamp);
}

.a-foot {
  margin-top: 0;
  padding: 1.5rem 1.25rem 2.5rem;
  border-top: 2px dashed var(--a-rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a-mark);
}

.a-foot p {
  margin: 0;
  max-width: 72rem;
  margin-inline: auto;
}

.a-foot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (width < 480px) {
  .a-wordmark__logo {
    height: 3.15rem;
  }

  .a-field__suffix {
    font-size: 0.65rem;
  }
}

@media (width >= 860px) {
  .a-stage {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
    gap: 3rem;
    padding-top: 1.5rem;
    padding-bottom: 4.5rem;
  }

  .a-card {
    position: sticky;
    top: 1.25rem;
    transform: rotate(-2.2deg);
  }

  .a-signup {
    padding: 4.5rem 1.25rem 3rem;
  }

  .a-blank {
    padding: 1.85rem 1.6rem 1.7rem;
  }

  .a-how__steps,
  .a-ways__grid,
  .a-compare__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 2rem;
  }

  .a-compare__grid {
    gap: 1rem;
    align-items: stretch;
  }

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

  .a-how__steps li {
    grid-template-columns: 1fr;
    gap: 0.75rem;

    /* Stacked here, the item stretches to the tallest step and its two auto
       rows split the slack — so the shortest step pushed its heading furthest
       down and the three titles never lined up. `align-items: start` does not
       cover this: it aligns an item inside its row, not the rows inside the
       item. */
    align-content: start;
  }

  .a-how__steps li + li {
    border-left: 2px dashed var(--a-rule);
    padding-left: 1.5rem;
  }
}