/* Página de un tip (single-flober_consejo.php): una columna de lectura con el estilo de la web. */
.flober-tip-page {
  width: min(100% - 2 * var(--flober-gutter-fluid), 47.5rem);
  margin: 0 auto;
  padding-block: var(--flober-space-8) var(--flober-space-12);
}

.flober-tip-page__eyebrow { margin: 0 0 var(--flober-space-2); font-size: var(--flober-type-small); font-weight: var(--flober-weight-medium); }
.flober-tip-page__eyebrow a { color: var(--flober-primary); text-decoration: none; }
.flober-tip-page h1 { margin: 0; font-size: var(--flober-type-title); font-weight: var(--flober-weight-semibold); line-height: 1.25; letter-spacing: normal; }
.flober-tip-page__lede { margin: var(--flober-space-3) 0 0; color: var(--flober-text-muted); font-size: var(--flober-type-subtitle); line-height: 1.5; }

.flober-tip-page__media {
  aspect-ratio: 16 / 10;
  margin-top: var(--flober-space-6);
  overflow: hidden;
  border-radius: var(--flober-radius-card);
  background: var(--flober-brand-light);
}

.flober-tip-page__content { margin-top: var(--flober-space-8); font-size: var(--flober-type-body); line-height: 1.7; }
.flober-tip-page__content > * { margin: 0 0 var(--flober-space-4); }
.flober-tip-page__content > :last-child { margin-bottom: 0; }
.flober-tip-page__content :is(h2, h3) { margin-top: var(--flober-space-8); font-size: var(--flober-type-subtitle); font-weight: var(--flober-weight-semibold); line-height: 1.35; }
.flober-tip-page__content :is(ul, ol) { padding-left: var(--flober-space-6); }
.flober-tip-page__content a { color: var(--flober-primary); text-decoration: underline; text-underline-offset: 3px; }
.flober-tip-page__content img { height: auto; border-radius: var(--flober-radius-card); }

.flober-tip-page__more { margin-top: var(--flober-space-12); padding-top: var(--flober-space-6); border-top: var(--flober-border-width) solid var(--flober-border); }
.flober-tip-page__more h2 { margin: 0 0 var(--flober-space-3); font-size: var(--flober-type-subtitle); font-weight: var(--flober-weight-semibold); }
.flober-tip-page__more ul { display: grid; gap: var(--flober-space-1); margin: 0; padding: 0; list-style: none; }
.flober-tip-page__more a { display: inline-flex; align-items: center; min-height: var(--flober-control-min); color: var(--flober-primary); font-weight: var(--flober-weight-medium); text-decoration: none; }
.flober-tip-page__more a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .flober-tip-page { padding-block: var(--flober-space-12); }
}