/*
    ======================================
    Hoja de Estilos: Profesional y Divertida
    ======================================
*/

/* --------------------
   Variables CSS
   -------------------- */
:root {
  /* Colores principales */
  --color-fondo: #f0f4f8; /* Un fondo azul claro suave */
  --color-texto-oscuro: #2c3e50; /* Azul oscuro para el texto */
  --color-texto-claro: #ffffff; /* Texto blanco para fondos oscuros */
  --color-fondo-texto: #ffffff;
  
  /* Colores de títulos vibrantes */
  --color-titulo-1: #9b59b6; /* Morado */
  --color-titulo-2: #e67e22; /* Naranja */
  --color-titulo-3: #1abc9c; /* Turquesa */
 

  /* Colores de listas */
  --color-lista-1: #3498db; /* Azul */
  --color-lista-2: #f39c12; /* Naranja oscuro */
  --color-lista-3: #27ae60; /* Verde */

  /* Tipografía */
  --fuente-principal: 'Montserrat', sans-serif;
  --fuente-secundaria: 'Lato', sans-serif;
}

/* --------------------
   Estilos Generales
   -------------------- */
body {
  font-family: var(--fuente-secundaria);
  line-height: 1.6;
  background-color: var(--color-fondo);
  color: var(--color-texto-oscuro);
  margin: 0;
  padding: 40px 20px;
}

div {
  background-color: var(--color-fondo-texto);
  font-size: 1em;
  border-radius: 40px;
  margin-bottom: 20px;
  padding: 0;
}

p {
	margin: 0 40px;
	padding: 20px 0px;
}

/* --------------------
   Estilo de Títulos
   -------------------- */
h1, h2, h3 {
  font-family: var(--fuente-principal);
  font-weight: bold;
  color: var(--color-texto-claro);
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 0px 0 0 0;
  display: inline-block;
}

h1 {
  background-color: var(--color-titulo-1);
  font-size: 1.5em;
  transform: rotate(-2deg); /* Un toque de dinamismo */
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
}

h2 {
  background-color: var(--color-titulo-2);
  font-size: 1.25em;
  transform: rotate(2deg);
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
}

h3 {
  background-color: var(--color-titulo-3);
  font-size: 1.1em;
  transform: rotate(-1deg);
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

/* --------------------
   Estilo de Listas Anidadas
   -------------------- */
ul {
  list-style: none; /* Quita los puntos por defecto */
  padding-left: 20px;
}

li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 25px; /* Espacio para el marcador */
}

/* Primer nivel de lista */
ul > li::before {
  content: '🎉';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2em;
}

/* Segundo nivel de lista */
ul ul > li::before {
  content: '🚀';
  color: var(--color-lista-2);
}

/* Tercer nivel de lista */
ul ul ul > li::before {
  content: '✨';
  color: var(--color-lista-3);
}

/* --------------------
   Adaptación para dispositivos móviles
   -------------------- */
@media (max-width: 768px) {
  h1, h2, h3 {
    transform: rotate(0deg); /* Desactiva la rotación en móviles */
    width: 100%;
    text-align: left;
    padding-left: 10px;
  }
}