/* Hallmark · page: taller-meta-ads.html · extends theme "Signal" (tokens.css) — same Split Studio
 * system as the rest of sumaleads-site. New components only: landing nav, offer/price card,
 * countdown badge, session timeline, comparison table, qualify grid. No new tokens introduced —
 * every colour/font/space below references css/tokens.css.
 */

/* === Landing nav — stripped to wordmark + single CTA, no escape links === */
.nav--landing .nav__inner { justify-content: center; }

/* .nav (main.css) sets backdrop-filter: blur() — that makes it a CSS containing block for any
   position:fixed descendant, so the mobile sticky-offer bar below would anchor to the HEADER's
   box instead of the viewport (it would render pinned near the top, not the bottom). Drop the
   blur here and go fully opaque instead — this header doesn't need the blur-behind effect. */
.nav--landing { backdrop-filter: none; background: var(--color-paper); }

/* === Sticky offer bar — on desktop/tablet it lives inside <header> (already position:sticky
   top:0), riding along with the nav and sitting directly below it. On mobile it detaches to a
   fixed bar pinned to the BOTTOM of the screen instead (thumb-reachable CTA, doesn't fight the
   header for space on a short viewport). Hidden by default, revealed by JS
   (taller-meta-ads.html, IntersectionObserver on #reservar) once the hero price card scrolls
   out of view. === */
.sticky-offer {
  max-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--color-rule);
  background: var(--color-paper);
  transition: max-height 240ms var(--ease-out);
}
.sticky-offer.is-visible { max-height: 140px; }

.sticky-offer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--space-sm) var(--page-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.sticky-offer__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); min-width: 0; }
.sticky-offer__badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.3em 0.55em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sticky-offer__amounts { display: flex; align-items: baseline; gap: var(--space-sm); }
.sticky-offer__old {
  font-family: var(--font-label); font-size: var(--text-sm); color: var(--color-ink-2);
  text-decoration: line-through; text-decoration-color: var(--color-ink-2); white-space: nowrap;
}
.sticky-offer__new {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1; white-space: nowrap;
}
.sticky-offer__new small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: var(--color-ink-2); margin-left: 0.25em; }
.sticky-offer__cta { flex-shrink: 0; }

@media (max-width: 640px) {
  /* Detach from the header and pin to the bottom of the viewport instead — fixed positioning
     is relative to the viewport regardless of the header being its DOM parent, since the header
     doesn't create a new containing block (no transform/filter on it). */
  .sticky-offer {
    position: fixed;
    inset: auto 0 0 0;
    max-height: none;
    overflow: visible;
    border-top: 1px solid var(--color-rule);
    box-shadow: 0 -10px 24px oklch(0% 0 0 / 0.10);
    transform: translateY(100%);
    transition: transform 240ms var(--ease-out);
    z-index: var(--z-sticky);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sticky-offer.is-visible { transform: translateY(0); }

  .sticky-offer__inner { justify-content: center; text-align: center; padding-block: var(--space-md); }
  .sticky-offer__price { justify-content: center; width: 100%; }
  .sticky-offer__cta { width: 100%; justify-content: center; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .sticky-offer { transition: none; }
}

/* === Real logo (raster), replaces the CSS-reconstructed wordmark on this page === */
.wordmark-img { height: 26px; width: auto; display: block; }
.foot .wordmark-img { height: 24px; }

/* === Hero split for the offer page: text left, price card right === */
.offer-hero { align-items: start; min-height: auto; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.offer-hero .hero__display { max-width: 16ch; }

/* === Offer / price card === */
.offer-card {
  border: 2px solid var(--color-ink);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-self: start;
}

.offer-card__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4em;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35em 0.6em;
  font-variant-numeric: tabular-nums;
}

.offer-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.offer-price__old {
  font-family: var(--font-label);
  font-size: var(--text-md);
  color: var(--color-ink-2);
  text-decoration: line-through;
  text-decoration-color: var(--color-ink-2);
}
.offer-price__new {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw + 1rem, 3.2rem);
  line-height: 1;
}
.offer-price__new small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin-left: 0.3em;
}
.offer-price__note { font-size: var(--text-sm); color: var(--color-ink-2); }

.offer-card__cta { justify-content: center; margin-top: var(--space-sm); }
.offer-card__secure {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  text-align: center;
}
.offer-card__policy {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  text-align: center;
  margin-top: var(--space-xs);
}
.offer-card__policy a { text-decoration: underline; }

/* === Calendario de reserva embebido (gracias-taller-meta-ads.html) — sin pago, así que sí puede
   vivir directamente en la página (a diferencia del que lleva el cobro de Stripe). === */
.booking-embed {
  border: 2px solid var(--color-ink);
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}
.booking-embed iframe { display: block; }

@media (max-width: 480px) {
  .booking-embed iframe { height: 600px; }
}

@media (max-width: 900px) {
  .offer-hero { grid-template-columns: minmax(0, 1fr); }
  .offer-card { align-self: stretch; }
}

/* === Session timeline === */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--color-rule);
  margin-top: var(--space-xl);
}
.timeline__step { padding: var(--space-lg); border-left: 1px solid var(--color-rule); }
.timeline__step:first-child { border-left: none; }
.timeline__time {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  display: inline-block;
  padding: 0.15em 0.5em;
  margin-bottom: var(--space-sm);
}
.timeline__step h3 { font-size: var(--text-lg); }
.timeline__step p { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-xs); }

@media (max-width: 860px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline__step:nth-child(3) { border-left: none; }
}
@media (max-width: 560px) {
  .timeline { grid-template-columns: minmax(0, 1fr); }
  .timeline__step { border-left: none; border-top: 1px solid var(--color-rule); }
  .timeline__step:first-child { border-top: none; }
}

/* === Comparison table (agency vs workshop) === */
.compare-table {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
}
.compare-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  align-items: center;
  font-size: var(--text-sm);
}
.compare-table__row > span:first-child { color: var(--color-ink-2); font-weight: 500; }
.compare-table__row--head {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-2);
}
.compare-table__highlight { color: var(--color-ink); font-weight: 600; }
.compare-table__row--head .compare-table__highlight { color: var(--color-ink); }

@media (max-width: 640px) {
  .compare-table__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare-table__row > span:first-child { grid-column: 1 / -1; font-weight: 600; color: var(--color-ink); }
  .compare-table__row--head > span:first-child { display: none; }
}

/* === Qualify grid ("es para ti si / no es para ti si") === */
.qualify-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}
.qualify-col h3 { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.qualify-col--muted h3 { color: var(--color-ink-2); }
.qualify-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.qualify-list li {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  padding-left: 1.4em;
  position: relative;
}
.qualify-col:not(.qualify-col--muted) .qualify-list li::before {
  content: "✓";
  position: absolute; left: 0; color: var(--color-ink);
  font-weight: 700;
}
.qualify-col--muted .qualify-list li::before {
  content: "✕";
  position: absolute; left: 0; color: var(--color-ink-2);
}

@media (max-width: 700px) {
  .qualify-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}