/* =====================================================================
   pricing.css — Docokids pricing cards (the only place cards are allowed).

   A 3-up grid of plan cards; the "popular" variant gets a teal border and a
   faint teal wash. Fixed-height slots keep the three cards aligned row-by-row.

   Brand colors / spacing come from var(--token). A few sizes are documented
   COMPONENT CONSTANTS, not brand tokens:
     - .pricing-card__price 2rem  : the plan price display size (no brand token
       sits at 2rem; it is specific to this card)
     - the min-height slot values (4.5rem name, 5rem price-block, etc.) and the
       rgba(24,180,176,0.06) popular wash are card-layout constants.
   ===================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 991.98px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: var(--measure-narrow); margin: 0 auto; }
}

/* Two-tier variant (conversion landings show 2 plans, not 3). Additive
   modifier: a centered 2-up grid capped to the narrow measure so the pair
   reads as a focused choice. Does NOT affect the home's 3-up .pricing-grid. */
.pricing-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--measure-narrow);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 991.98px) {
  .pricing-grid--two { grid-template-columns: 1fr; }
}

/* Single-offer variant (tema landings sell ONE entry offer, e.g. the 24h
   trial). Anchored to the page's single LEFT axis (same edge as the eyebrow/h2),
   comfortable width: a single offer doesn't fake being a 3-up grid, and the
   whitespace to the right reads as deliberate breathing room, not a lonely
   floating card. Does NOT affect the home's 3-up or the landing's 2-up grids. */
.pricing-grid--one {
  grid-template-columns: 1fr;
  max-width: var(--measure-narrow);
  margin: 0;
}
.pricing-card {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: var(--space-5);
  background-color: var(--paper-pure);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}
.pricing-card--popular {
  border: 2px solid var(--p-verde);
  background-color: rgba(24, 180, 176, 0.06); /* faint --p-verde wash */
}
.pricing-card__badge-slot {
  min-height: 2rem;
  display: flex;
  align-items: center;
  margin: 0;
}
.pricing-card__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-naranja);
  margin: 0;
}
.pricing-card__name {
  /* line-height (1.15) and letter-spacing (-0.01em) come from the global h3
     rule in base.css; this class owns size, weight, family and card layout. */
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  min-height: 4.5rem;
  display: flex;
  align-items: flex-start;
  margin: 0;
}
.pricing-card__price-block {
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pricing-card__price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2rem; /* plan price display size — component constant */
  color: var(--p-verde);
  line-height: 1.2;
}
.pricing-card__price-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--gris);
}
.pricing-card__submeta-slot {
  min-height: 1.75rem;
}
.pricing-card__submeta {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--p-verde-hover);
}
.pricing-card__lead {
  color: var(--gris-secundario);
  font-size: var(--fs-body);
  min-height: 4rem;
  margin: 0;
}
.pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-body);
  color: var(--gris-secundario);
  flex: 1;
}
.pricing-card__features li {
  padding-left: var(--space-3);
  position: relative;
}
.pricing-card__features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gris);
}
.pricing-card__cta { margin-top: auto; padding-top: var(--space-5); }
.pricing-card__guarantee {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--gris-secundario);
  line-height: 1.5;
  text-align: left;
  margin: var(--space-2) 0 0 0;
}
.pricing-fine {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--gris);
  max-width: var(--measure-narrow);
  margin: var(--space-5) 0 0 0;
  text-align: left;
}