/* Doco style library — base global. Contiene resets de elementos (body, h1-h6, a, .container). NUNCA cargar en una página que también cargue base_style.css o el bootstrap.min.css local: se pisan. Solo se enlaza desde templates/base_ds.html. */
/* =====================================================================
   base.css — Docokids global base layer.

   Loads AFTER Bootstrap 5 and tokens.css, BEFORE the components/ files.
   Holds only what is global and page-agnostic:
     - body type / color
     - the global element type scale (h1/h2/h3) with NO page-name scope
     - paragraph rhythm
     - link + focus defaults
     - the reusable text primitives (.lead, .eyebrow, .prose, .narrow)
     - the .container cap

   NO component lives here, and NO selector is scoped to a page
   (no `.template-homepage ...`). Every value comes from a var(--token);
   the only literals are the 0/1.x unitless line-heights and the em-based
   letter-spacing, which are intrinsic to the type scale, not brand values.
   ===================================================================== */

/* ---- Base type ---- */
body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--gris-oscuro);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Global element type scale (page-agnostic).
   This is the mockup's generic heading mapping: h1 = display, h2 = h1-size,
   h3 = h3-size. It replaces the old `.template-homepage h1/h2/h3` overrides,
   so any page (Landing, Promotion, Event, …) gets the same scale with zero
   reliance on a page-name ancestor. Components that need a different size set
   their own token via a component title class (.step-title, .pricing-card__name,
   .b2b-track__title, …). ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--gris-oscuro);
  margin: 0;
  /* Natural heading wraps: keep the copy's own flow (so comma-structured
     titles break at the comma) while avoiding orphan last lines. `pretty`
     does greedy wrapping + orphan protection; falls back to normal where
     unsupported. Page-agnostic; improves every heading. */
  text-wrap: pretty;
}
h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.02em;  font-weight: 700; }
h2 { font-size: var(--fs-h1);      line-height: 1.1;  letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3);      line-height: 1.15; letter-spacing: -0.01em;  }

a { color: var(--gris-oscuro); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--p-verde); }

:focus-visible { outline: 2px solid var(--p-verde); outline-offset: 4px; }

/* ---- Paragraph rhythm.
   Bootstrap ships `p { margin: 0 0 1rem }` (== --space-3); the mockup zeroes
   the LAST paragraph in a block, which Bootstrap does not — add it here so the
   final <p> of steps / value props / b2b tracks has no stray trailing 1rem. */
p:last-child { margin-bottom: 0; }

/* ---- Text primitives (shared across components and page types) ---- */
.lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--gris-secundario);
}
.prose  { max-width: var(--measure-prose); }
.narrow { max-width: var(--measure-narrow); margin-left: auto; margin-right: auto; }

/* The eyebrow (small uppercase kicker) lives here ONCE; components reuse it.
   Color variants: rosado (default), verde, ochre. .eyebrow--plum is the
   mockup's name for the teal variant and aliases to verde. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-rosado);
  margin: 0 0 var(--space-3) 0;
  display: block;
}
.eyebrow--verde { color: var(--p-verde); }
.eyebrow--ochre { color: var(--p-naranja); }
.eyebrow--plum  { color: var(--p-verde); }

/* ---- Container cap.
   Bootstrap's .container grows to 1320px at >=1400px; the mockup caps content
   at 1140px (--measure-content). Hold every container variant to that width. */
.container,
.container-lg, .container-md, .container-sm,
.container-xl, .container-xxl {
  max-width: var(--measure-content);
}

/* ---- Mobile type scale.
   Lifted verbatim from the mockup's @media :root block: shrink the display
   tokens on phones so headings don't render desktop-size. Page-agnostic. ---- */
@media (max-width: 991.98px) {
  :root {
    --fs-display: 2.815rem;
    --fs-h1: 2.369rem;
    --fs-h2: 1.777rem;
    --fs-h3: 1.5rem;
  }
}

/* =====================================================================
   base.html default chrome + Bootstrap brand mappings.

   These style the DEFAULT header / footer / section helpers that base.html
   ships for page types which do NOT override the header/footer blocks (the
   home overrides both, so none of this renders on the home). Kept in the base
   layer so every non-home page keeps its current chrome. Brand values come
   from var(--token).
   ===================================================================== */

/* Map Bootstrap's outline-primary onto brand verde (used by non-home pages
   that lean on Bootstrap button variants). The flat brand .btn / .btn-primary
   live in components/button.css. */
.btn-outline-primary {
  --bs-btn-color: var(--p-verde);
  --bs-btn-border-color: var(--p-verde);
  --bs-btn-hover-bg: var(--p-verde);
  --bs-btn-hover-border-color: var(--p-verde);
  --bs-btn-active-bg: var(--p-verde-hover);
  --bs-btn-active-border-color: var(--p-verde-hover);
  font-family: var(--font-sans);
  font-weight: 600;
}

/* Default section helpers */
.doco-section { padding: var(--space-7) 0; }
.doco-section--tint { background-color: var(--gris-claro); }
.doco-hero { padding: var(--space-8) 0 var(--space-7); }

/* Default header / footer (base.html fallback chrome) */
.doco-navbar {
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-3) 0;
}
.doco-navbar .brand { font-weight: 700; font-size: var(--fs-lead); color: var(--gris-oscuro); }
.doco-footer {
  border-top: 1px solid var(--hairline);
  padding: var(--space-5) 0;
  color: var(--gris);
  font-size: var(--fs-small);
}

/* Default stat / card blocks */
.doco-stat { font-size: var(--fs-h2); font-weight: 700; color: var(--p-verde); line-height: 1; }
.doco-card {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: var(--space-4);
  background: var(--paper);
  height: 100%;
}