/*
 * Typography v2: legibilidad universal para blog y contenido largo de
 * landings. Escala fluida, line-height 1.75 en body, max-width 68ch en
 * parrafos y listas.
 *
 * Aplicado a `.prose` y `article.blog-content` (wrappers de blog), y
 * selectivamente a `.pagina-body p` / `.pagina-body ul` / etc (solo
 * elementos de texto dentro de landings, NO al wrapper completo, para
 * no romper grids / tablas / cards que requieren ancho completo).
 */

:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --leading-body: 1.75;
  --leading-heading: 1.2;
}

.prose,
article.blog-content {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  max-width: 68ch;
  color: #2D2D2D;
}

.prose p,
article.blog-content p {
  margin-bottom: 1.5rem;
}

.prose h2,
article.blog-content h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-heading);
  margin: 3rem 0 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.prose h3,
article.blog-content h3 {
  font-size: var(--text-2xl);
  margin: 2rem 0 1rem;
  font-weight: 600;
}

.prose a,
article.blog-content a {
  color: #E91E8C;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: all 0.15s ease;
}

.prose a:hover,
article.blog-content a:hover {
  text-decoration-thickness: 2px;
}

.prose blockquote,
article.blog-content blockquote {
  border-left: 4px solid #E91E8C;
  padding: 1rem 1.5rem;
  background: #FFF5FA;
  margin: 2rem 0;
  font-style: italic;
  border-radius: 0 8px 8px 0;
}

.prose img,
article.blog-content img {
  border-radius: 12px;
  margin: 2rem 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/*
 * Landings (.pagina-body): mejoras de legibilidad sobre parrafos y
 * listas unicamente. El wrapper conserva su ancho (max-w-5xl definido
 * en template) para no romper grids, tablas y cards de las landings.
 */

.pagina-body p {
  line-height: var(--leading-body);
  color: #2D2D2D;
}

.pagina-body a:not(.btn-premium):not([class*="bg-"]) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.15s ease;
}

.pagina-body a:not(.btn-premium):not([class*="bg-"]):hover {
  text-decoration-thickness: 2px;
}

/*
 * Bloques universales de answer_first y resumen: funcionan en blog y
 * landings por igual. No dependen del wrapper.
 */

.quick-answer,
.answer-first {
  background: linear-gradient(135deg, #FFF5FA 0%, #FFE8F3 100%);
  border-left: 4px solid #E91E8C;
  padding: 1.5rem 2rem;
  border-radius: 0 12px 12px 0;
  margin: 2rem 0;
  font-size: var(--text-lg);
}

.tldr-bullets {
  background: #F9F9F9;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin: 1.5rem 0;
}

@media (max-width: 768px) {
  .prose,
  article.blog-content {
    font-size: var(--text-base);
  }
  .prose h2,
  article.blog-content h2 {
    font-size: var(--text-2xl);
  }
}