/* ────────────────────────────────────────────
   TIPOGRAFÍA – UTILIDADES
   Dependen solo de los tokens.css
   ────────────────────────────────────────────*/

/* Colores base (texto y fondo) */
.u-text-black  { color: var(--color-base-black)!important; }
.u-text-white  { color: var(--color-base-white); }
.u-text-neutral-800 { color: var(--color-neutral-800) }
.u-bg-black    { background: var(--color-base-black); }
.u-bg-white    { background: var(--color-base-white); }
.u-text-gray-neutral-800 { color: var(--gray-color-neutral-700); }

/* Familias tipográficas */
.u-font-primary {
    font-family: var(--font-primary);
}
.u-font-secondary { font-family: var(--font-secondary); }

/* Pesos (font-weight) */
.u-fw-regular   { font-weight: var(--font-weight-regular); }
.u-fw-semibold  { font-weight: var(--font-weight-semibold); }
.u-fw-bold      { font-weight: var(--font-weight-bold); }

/* Tamaños aislados (si los necesitas sueltos) */
.u-fs-display { font-size: var(--font-size-display); }
.u-fs-body    { font-size: var(--font-size-body); }
.u-fs-body-lg { font-size: var(--font-size-body-lg); }

/* Alturas de línea aisladas */
.u-lh-display { line-height: var(--line-height-display); }
.u-lh-body    { line-height: var(--line-height-body); }
.u-lh-p       { line-height: var(--line-height-p)}

/* ——— Compuestos “listos-para-usar” ——— */

/* Display: título o headline principal */
.u-text-display {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size:   var(--font-size-display);
  line-height: var(--line-height-display);
  color:       var(--color-base-black);
}

/* Body pequeño (parrafo estándar 16 px) */
.u-text-body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size:   var(--font-size-body);
  line-height: var(--line-height-body);
  color:       var(--color-base-black);
}

/* Body grande (18 px) */
.u-text-body-lg {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size:   var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color:       var(--color-base-black);
}

.u-link {
  color: var(--color-base-black, #000);
  /* Button/Medium */
  font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
  font-style: normal;
  font-weight: var(--font-weight-bold, 700);
  text-decoration: underline !important;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.u-link:hover {
  color: var(--color-base-black, #000);
  font-weight: var(--font-weight-bold, 700);
}

.u-link-blue {
    color: var(--color-accent-500, #0A7287);
}
.u-link-blue:hover {
    color: var(--color-accent-500, #0A7287);
    cursor: pointer;
}

.accordion-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 24px; /* 133.333% */
}

/*font family*/
.font-family-nunito-sans {
  font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
}

.font-family-poppins {
  font-family: var(--font-family-Poppins, Poppins);
}

/*font size*/
.font-size-18 {
    font-size: 18px;
}
.font-size-16 {
    font-size: 16px;
}
.font-size-14{
    font-size: 14px;
}

/*font style*/
.font-style-normal {
    font-style: normal;
}

/*font weight*/
.font-weight-semibold {
  font-weight: var(--font-weight-semibold, 600);
}
.font-weight-bold {
    font-weight: var(--font-weight-bold, 700);
}

.font-weight-regular {
    font-weight: var(--font-weight-regular, 400);
}

/*line height*/
.line-height-24 {
    line-height: 24px;
}

.line-height-20{
    line-height: 20px;
}