:root{
  --bg1:#f7f7ff;
  --bg2:#f2fbff;
  --card: rgba(255,255,255,.78);
  --border: rgba(120,120,160,.18);

  --title:#2d2a67;
  --text:#3b3b4f;
  --muted:#6b6b82;

  --accent1:#7c5cff; /* lila suave */
  --accent2:#23c6c8; /* turquesa suave */
  --accent3:#ff6fb1; /* rosado suave */
}


.generator{
  width:min(900px, 92vw);
  text-align:center;

  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;

  padding:28px 22px;
  box-shadow:0 18px 50px rgba(25,25,60,.10);
  backdrop-filter: blur(10px);

  margin: auto;
}

/* Título principal */
.generator > h1{
  margin:0 0 18px;
  color:var(--title);
  font-size:clamp(26px, 3.2vw, 40px);
  font-weight:800;
  line-height:1.15;
  display:inline-block;
  position:relative;
}

.generator > h1::after{
  content:"";
  display:block;
  height:4px;
  width:70%;
  margin:10px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));
  opacity:.9;
}

/* Subtítulos */
.generator > h2{
  margin:18px 0 10px;
  font-size:clamp(18px, 2vw, 24px);
  color:var(--title);
  font-weight:750;
}

/* Párrafos */
.generator > p{
  margin:0 auto 10px;
  max-width:70ch;
  line-height:1.6;
  color:var(--muted);
  font-size:1rem;
}

/* Caja suave alrededor de cada bloque (h2 + contenido siguiente) */
.generator > h2{
  padding-top:18px;
}
.generator > h2:first-of-type{
  padding-top:0;
}

/* LISTA (2° contenido) con estrellas (bi-star) SIN modificar el HTML */
.generator > ul{
  list-style:none;      /* quitamos bullets */
  margin:10px auto 0;
  padding:0;
  width:fit-content;    /* se centra */
  text-align:left;      /* lectura cómoda */
}

.generator > ul li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:6px 0;
  color:var(--text);
}

/* Inserta el ícono bi-star antes de cada item */
.generator > ul li::before{
  font-family: "bootstrap-icons";
  content: "\F588";     /* bi-star */
  font-size:1.05rem;
  line-height:1.2;
  margin-top:2px;
  color:var(--accent1);
  filter: drop-shadow(0 6px 10px rgba(124,92,255,.18));
}

/* Suaviza el “card look” del contenido */
.generator > p,
.generator > ul{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(120,120,160,.14);
  border-radius: 16px;
  padding: 14px 16px;
}

/* Ajustes específicos para que la lista no quede “apretada” */
.generator > ul{
  padding: 12px 18px;
}