/* =====================================================================
   button.css — Docokids buttons (.btn + variants).

   Styles the brand button and its variants on top of Bootstrap's .btn.
   Loads AFTER Bootstrap so these single-class selectors win on source order.

   CASCADE RULE (read before touching):
   base `.btn` sets a TRANSPARENT border; each variant overrides it with its
   own border color. Base and variants share the SAME specificity (one class),
   so plain source order decides — base FIRST, variants AFTER. Do not give a
   variant a higher- or lower-specificity selector or the transparent base
   border can beat the variant's colored border (this is what made the outline
   buttons render borderless before).

   Every value is a var(--token). No page-name scope: a `.btn btn-primary`
   anchor renders identically on any page type.
   ===================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.5;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  text-transform: none;
  box-shadow: none;
}
.btn-primary {
  background-color: var(--p-verde);
  color: var(--paper-pure);
  border-color: var(--p-verde);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--p-verde-hover);
  border-color: var(--paper-pure);
  color: var(--paper-pure);
}
.btn-outline {
  background-color: transparent;
  color: var(--p-verde);
  border: 1px solid var(--p-verde);
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  background-color: var(--p-verde);
  color: var(--paper-pure);
  border-color: var(--p-verde);
}
.btn-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--gris-oscuro);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}
.btn-link:hover { color: var(--p-verde); border-color: var(--p-verde); }

/* Full-width tap target on mobile (≤767.98px). Opt-in modifier for in-content
   conversion CTAs on landings (hero, pricing, closing band): a thumb-sized
   target that matches the section width. Page-agnostic — any CTA that carries
   the class gets it; the nav CTA and sticky bar deliberately do NOT, so they
   keep their own widths. Single class = same specificity as .btn; it sits
   AFTER .btn in source order, so it wins inside the query without raising
   specificity (see CASCADE RULE above). */
@media (max-width: 767.98px) {
  .btn--block-mobile {
    display: block;
    width: 100%;
    text-align: center;
  }
}