/* The Join Link — <org>/lealtad. Its own stylesheet because it has its own
   layout: `customer_auth` is shared by ten controllers and this is the only
   marketing surface among them.

   Mobile-first, not as a courtesy. This page is opened by scanning a QR at a
   counter, one-handed, with somebody waiting behind you. The wide view is the
   afterthought. */

/* This stylesheet stands alone — the page no longer loads the `customer_auth`
   layout or the prototype chrome that used to bring a reset. Without this the
   card's `width: min(100%, 25rem)` added its 40px of padding on top and the
   document scrolled sideways on a 390px phone. */
.cc-body *,
.cc-body *::before,
.cc-body *::after {
  box-sizing: border-box;
}

.cc-body {
  --cc-paper: #fefce8;
  --cc-ink: #422a0f;
  --cc-mark: #78350f;
  --cc-stamp: #fcc000;
  --cc-hole: #fef9c3;
  --cc-kraft: #f4e8d0;
  --cc-card: #fff;
  --cc-rule: rgb(66 42 15 / 16%);
  --cc-cond: "Outfit", sans-serif;
  --cc-body-font: "Plus Jakarta Sans", sans-serif;
  --cc-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Several of these views set colours inline off theme variables that no
     longer have a stylesheet defining them — `rgba(var(--t-primary-rgb), .35)`
     resolves to nothing and the element silently loses its border or its
     background. Defining the handful they reference means a view nobody has
     looked at degrades to the card palette rather than to browser defaults.
     Comma-separated on purpose: the call sites use the legacy rgba() form. */
  --t-primary-rgb: 120, 53, 15;
  --t-bg-surface: #fff;
  --t-bg-section-alt: #fef9c3;
  --t-border: rgb(66 42 15 / 16%);
  --t-text-body: #422a0f;
  --t-text-heading: #422a0f;
  --t-text-muted: rgb(66 42 15 / 70%);

  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12px 12px, rgb(66 42 15 / 8%) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
    var(--cc-paper);
  color: var(--cc-ink);
  font-family: var(--cc-body-font);
  -webkit-font-smoothing: antialiased;

  /* The card carries a shadow and the stamps rotate; neither may put a
     sideways scrollbar on a page opened one-handed. */
  overflow-x: clip;
}

.cc-body input,
.cc-body button {
  font-family: inherit;
}

.cc-body input:focus-visible,
.cc-body button:focus-visible {
  outline: 3px solid var(--cc-mark);
  outline-offset: 2px;
}

.cc__stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 4.5rem 1rem 2rem;
  perspective: 1200px;
}

.cc__card {
  width: min(100%, 25rem);
  padding: 1.4rem 1.25rem 1.1rem;
  background: var(--cc-card);
  box-shadow: 0 28px 50px -24px rgb(66 42 15 / 40%);
}

.cc__brand {
  margin: 0;
  font-family: var(--cc-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

.cc__offer {
  margin: 0.5rem 0 1rem;
  font-family: var(--cc-cond);
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.cc__holes {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;

  /* `1fr` is `minmax(auto, 1fr)`, so a track can refuse to shrink below its
     min-content and blow the grid past its parent — which is what put a
     sideways scroll on a 390px viewport. `minmax(0, 1fr)` lets them shrink. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem 0.45rem;
}

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

.cc__n {
  font-family: var(--cc-mono);
  font-size: 0.62rem;
  opacity: 0.5;
}

.cc__mark {
  position: absolute;
  inset: 8%;
  border-radius: 50%;

  /* The same smiley the hero estampita stamps: two eyes as radial-gradient
     dots over the gold, and the mouth as a bottom-half ellipse in ::after.
     Geometry copied from `.a-hole__mark` so it is the same face, not a
     second drawing of one. */
  background:
    radial-gradient(circle at 34% 40%, var(--cc-ink) 0 8.5%, transparent 9%),
    radial-gradient(circle at 66% 40%, var(--cc-ink) 0 8.5%, transparent 9%),
    var(--cc-stamp);
  box-shadow: inset 0 0 0 2px rgb(66 42 15 / 20%);
  opacity: 0;
  transform: scale(0.5) rotate(-20deg);
}

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

.cc__hole.is-punched .cc__mark {
  opacity: 1;
  transform: scale(1) rotate(-10deg);
}

.cc__hole.is-punched .cc__n {
  opacity: 0;
}

/* The stamp for the step you are on lands rather than simply being there. */
.cc__hole.is-landing .cc__mark {
  animation: cc-press 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cc-press {
  0% { opacity: 0; transform: scale(2.2) rotate(-28deg); }
  60% { opacity: 1; transform: scale(0.92) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-10deg); }
}

.cc__slot {
  padding-top: 1rem;
  border-top: 2px dashed var(--cc-rule);
}

.cc__step {
  margin: 0;
  font-family: var(--cc-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-mark);
}

.cc__heading {
  margin: 0.35rem 0 0.9rem;
  font-family: var(--cc-cond);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cc__field {
  display: grid;
  gap: 0.3rem;
  font-family: var(--cc-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cc__field input {
  min-height: 2.9rem;
  border: 0;
  border-bottom: 2px dashed rgb(66 42 15 / 45%);
  background: transparent;
  font-family: var(--cc-body-font);
  font-size: 1.05rem;
  color: var(--cc-ink);
}

.cc__field--code input {
  font-family: var(--cc-mono);
  font-size: 1.6rem;
  letter-spacing: 0.4em;
}

.cc__hint {
  margin: 0.85rem 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.35;
  opacity: 0.75;
}

.cc__go {
  background: var(--cc-ink);
  color: var(--cc-stamp);
  font-family: var(--cc-cond);
  font-weight: 800;
  font-size: 1.05rem;
}

.cc__or {
  margin: 0.75rem 0;
  text-align: center;
  font-family: var(--cc-mono);
  font-size: 0.7rem;
  opacity: 0.5;
}

.cc__google,
.lj-b__google,
.lj-c__google,
.lj-d__google {
  min-height: 3rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid var(--cc-ink);
  background: var(--cc-card);
  color: var(--cc-ink);
  font-weight: 700;
  cursor: pointer;
}

.cc__foot {
  margin: 1rem 0 0;
  font-family: var(--cc-mono);
  font-size: 0.62rem;
  line-height: 1.5;
  opacity: 0.6;
}


/* Every primary action clears the 44px tap target. */
.cc__go,
.cc__google,
.join-plain-cta {
  min-height: 3.25rem;
  width: 100%;
  border: 0;
  cursor: pointer;
}

.cc-skip {
  position: absolute;
  left: -9999px;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.cc-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--cc-ink);
  color: var(--cc-stamp);
}

/* The org has a printed QR that outlives its program, so this URL has to
   answer even when there is nothing to join. Ported out of the old layout's
   inline \3c style>, which this page no longer loads. */
.join-plain {
  width: min(100%, 25rem);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  background: var(--cc-card);
  box-shadow: 0 22px 44px -26px rgb(66 42 15 / 40%);
  text-align: center;
}

.join-plain-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.join-plain-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 2px dashed var(--cc-rule);
  background: var(--cc-hole);
  font-size: 1.25rem;
  color: var(--cc-mark);
}

.join-plain h1 {
  margin: 0 0 0.5rem;
  font-family: var(--cc-cond);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.join-plain p {
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.8;
}

.join-plain-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--cc-ink);
  color: var(--cc-stamp);
  font-family: var(--cc-cond);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
}

/* The org's own logo, when it has one. */
.cc__logo {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.6rem;
}

.cc__err {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.8rem;
  background: var(--cc-hole);
  border-left: 4px solid var(--cc-mark);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* One treatment for both secondary actions, so "Cambiar" beside the address
   and "Reenviar" under the button read as the same kind of thing. */
.cc__inline {
  display: inline-block;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--cc-mark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.cc__sep {
  padding: 0 0.15rem;
  opacity: 0.5;
}

/* Centred under the primary action, with the tap target the inline link
   inside it cannot carry on its own. */
.cc__aux {
  margin-top: 0.5rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
}

.cc__already {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: center;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .cc__hole.is-landing .cc__mark {
    animation: none;
  }
}

/* Wider screens get a slightly larger card and nothing else: the design is
   the phone one. */
@media (width >= 30rem) {
  .cc__card {
    padding: 1.75rem 1.6rem 1.4rem;
  }

  .cc__offer {
    font-size: 2.1rem;
  }
}

/* `customers/shared/_google_button` brings its own markup. It used to be
   styled by the `customer_auth` layout's inline \3c style>, which this page no
   longer loads — without these it renders as a 27px default browser button. */
.auth-or {
  margin: 0.85rem 0;
  text-align: center;
  font-family: var(--cc-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}

.auth-google {
  min-height: 3rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 2px solid var(--cc-ink);
  background: var(--cc-card);
  color: var(--cc-ink);
  font-family: var(--cc-body-font);
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
}

/* The two notes at the foot are legal-ish and long; they should not compete
   with the field above them on a phone. */
.cc__slot .auth-hint,
.cc__already {
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.7;
}

.cc__slot .auth-hint {
  margin: 0.8rem 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   The shared customer-auth vocabulary.

   /iniciar-sesion, /registrarme, the password and confirmation screens and
   the unsubscribe pages are full of `auth-*` and `theme-*` classes that used
   to be coloured by the organization's theme through the `customer_auth`
   layout. Restyling that vocabulary here converts all of them at once, with
   no change to a single view — and `theme_stylesheet_tag` is gone, so this is
   now the only thing defining them.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tailwind is still loaded for the utility classes those views use, so every
   rule below has to out-specify it. */
.cc-body .auth-card {
  width: min(90%, 25rem) !important;
  margin: 0 auto;
  padding: 1.6rem 1.4rem 1.4rem !important;
  border-radius: 0 !important;
  background: var(--cc-card);
  box-shadow: 0 28px 50px -24px rgb(66 42 15 / 40%) !important;
}

/* Two blurred blobs behind a login form. They were the house style of the
   thing this replaced. */
.cc-body .auth-blob-1,
.cc-body .auth-blob-2 {
  display: none !important;
}

.cc-body .auth-brand-icon {
  background: var(--cc-hole) !important;
  border: 2px dashed var(--cc-rule) !important;
  color: var(--cc-mark);
}

.cc-body .auth-org-name {
  font-family: var(--cc-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.cc-body .theme-heading {
  font-family: var(--cc-cond);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--cc-ink);
}

.cc-body .theme-body,
.cc-body .theme-muted {
  color: var(--cc-ink);
}

.cc-body .theme-muted,
.cc-body .auth-hint {
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.7;
}

/* The field's underline is a dashed rule, so a hint sitting straight under it
   reads as part of the input rather than as a note about it. */
.cc-body .auth-hint {
  margin-top: 0.85rem;
}

.cc-body .theme-form-label,
.cc-body .auth-otp label,
.cc-body label {
  font-family: var(--cc-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-ink);
}

.cc-body .theme-input {
  width: 100%;
  min-height: 2.9rem;
  border: 0 !important;
  border-bottom: 2px dashed rgb(66 42 15 / 45%) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--cc-body-font);
  font-size: 1.05rem;
  color: var(--cc-ink) !important;
  box-shadow: none !important;
}

.cc-body .auth-otp .theme-input {
  font-family: var(--cc-mono);
  font-size: 1.6rem;
  letter-spacing: 0.4em;
}

.cc-body .theme-btn-primary {
  /* The field and its button were touching: the stack's gap sits between
     forms, not inside one. */
  margin-top: 0.9rem;
  min-height: 3.25rem;
  width: 100%;
  border: 0;
  border-radius: 0 !important;
  background: var(--cc-ink) !important;
  color: var(--cc-stamp) !important;
  font-family: var(--cc-cond);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
}

.cc-body .theme-surface-raised {
  background: var(--cc-hole);
  border-radius: 0;
}

.cc-body .theme-divider {
  border-color: var(--cc-rule);
}

.cc-body .theme-link,
.cc-body .theme-accent-text,
.cc-body .auth-peer,
.cc-body .auth-linkbtn {
  color: var(--cc-mark) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Secondary doors — "entrar con contraseña", "regístrate", "¿olvidaste?".
   They were pill buttons; here they are links with a real tap target. */
.cc-body .auth-peer,
.cc-body .auth-linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  width: auto;
  padding: 0.5rem 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.cc-body .auth-step-stack {
  display: grid;
  gap: 0.9rem;
}

.cc-body .auth-otp-mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem;
  background: var(--cc-hole);
  font-size: 0.85rem;
}

/* "¿Prefieres no escribirlo?" — the magic-link nudge under the code field. */
.cc-body .auth-couch {
  padding: 0.85rem 0.9rem;
  background: var(--cc-kraft);
  font-size: 0.85rem;
  line-height: 1.4;
}

.cc-body .auth-couch h3 {
  margin: 0 0 0.2rem;
  font-family: var(--cc-cond);
  font-weight: 800;
  font-size: 1rem;
}

.cc-body .auth-couch p {
  margin: 0;
  opacity: 0.75;
}

.cc-body .auth-links-section {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 2px dashed var(--cc-rule);
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.75;
}

.cc-body .auth-returnto {
  margin: 0 auto 0.75rem;
  max-width: 25rem;
  font-family: var(--cc-mono);
  font-size: 0.72rem;
  text-align: center;
  opacity: 0.7;
}

.cc-body .theme-alert-error {
  padding: 0.7rem 0.8rem;
  background: var(--cc-hole);
  border-left: 4px solid var(--cc-mark);
  border-radius: 0;
  color: var(--cc-ink);
}

.cc-body .auth-eye-btn {
  min-height: 2.75rem;
  min-width: 2.75rem;
  color: var(--cc-mark);
}

/* The page these views sit on. They bring their own centring wrapper, so this
   only has to supply the ground and the breathing room. */
.cc-body .theme-page,
.cc-body > main {
  min-height: 100vh;
}

/* Several of these views set colours inline off theme variables that no
   longer have a stylesheet defining them — `rgba(var(--t-primary-rgb), .35)`
   resolves to nothing and the element loses its border, or its background.
   Defining the handful they reference means a view nobody has looked at
   degrades to the card palette instead of to whatever the browser defaults
   to. Comma-separated on purpose: the call sites use the legacy rgba() form. */

/* `_links` renders pills with inline border and background. Inline styles beat
   a stylesheet, so these have to shout to become plain links — which is what
   they should be, matching "Entrar con contraseña" above them. */
.cc-body a.theme-link.rounded-full {
  min-height: 2.75rem;
  padding: 0.5rem 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}