@import url("variables.css");

/* Páginas de texto: términos, privacidad, quiénes somos, FAQ, etc. */
.pagina-hero {
  text-align: center;
  /* El menú superior queda fijo sobre la página: dejamos lugar para que el título no se tape */
  padding: calc(var(--navbar-alto, 84px) + var(--space-4, 1.5rem)) var(--space-3, 1rem) var(--space-5, 2.5rem);
  background: var(--gradient-main, linear-gradient(135deg, #ff4fa3, #3fa9f5));
  color: var(--color-white, #fff);
}
.pagina-hero h1 {
  margin: 0 0 .5rem;
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: inherit;
}
.pagina-hero p { margin: 0; opacity: .92; }

.pagina-contenido {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-5, 2.5rem) var(--space-3, 1rem);
  font-family: var(--font-body, 'Nunito Sans', sans-serif);
  color: var(--color-ink, #2a2540);
  line-height: 1.7;
}
.pagina-contenido h2 {
  margin: 2rem 0 .5rem;
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 1.3rem;
  color: var(--color-ink, #2a2540);
}
.pagina-contenido h2:first-child { margin-top: 0; }
.pagina-contenido p { margin: 0 0 1rem; }
.pagina-contenido ul, .pagina-contenido ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.pagina-contenido li { margin-bottom: .5rem; }
.pagina-contenido a {
  color: var(--color-secondary, #3fa9f5);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pagina-contenido a:hover { text-decoration-thickness: 2px; }
.pagina-contenido strong { color: var(--color-ink, #2a2540); }

@media (max-width: 600px) {
  .pagina-hero { padding-top: calc(var(--navbar-alto, 72px) + var(--space-3, 1rem)); }
  .pagina-contenido { padding: var(--space-4, 1.5rem) var(--space-3, 1rem); }
}