/* ==========================================
   bases y cosas principales (FRUTIGER AERO & CUTE AESTHETIC)
   ========================================== */

body {
  background-color: #5f2c52;
  color: #e0eefe;
  font-family: "Segoe UI", sans-serif;

  /* 
     Fondo:
     1. Degradado blanco sutil en diagonal (brillo de cristal).
     2. Gradiente que va de color sólido (#5f2c52) en los bordes top/bottom, 
        dejando el centro semi-transparente para ver el estampado.
     3. Imagen de fondo (estampado).
  */
  background-image: 
    linear-gradient(135deg, rgba(224, 238, 254, 0.2) 0%, rgba(224, 238, 254, 0) 40%),
    linear-gradient(
      to bottom, 
      #5f2c52 0%, 
      rgba(95, 44, 82, 0.25) 25%, 
      rgba(95, 44, 82, 0.25) 75%, 
      #5f2c52 100%
    ),
    url("/images/bgstamp4.png");

  background-size: 100% 100%, 100% 100%, 8% auto;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.contenedor {
  width: 90%;
  max-width: 1000px;
  margin: 30px auto;

  /* Cristal suavizado basado en #764447 y #5f2c52 */
  background: linear-gradient(180deg, 
    rgba(118, 68, 71, 0.85) 0%, 
    rgba(95, 44, 82, 0.90) 40%, 
    rgba(95, 44, 82, 0.95) 100%
  );
  padding: 25px;
  border: 2px solid rgba(224, 238, 254, 0.5); /* Borde de cristal claro */
  border-radius: 30px; /* Bordes redondeados más suaves */

  /* Sombra voluminosa con resplandor suave pastel */
  box-shadow: 
    0 15px 30px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(169, 178, 227, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.contenedor .titulado {
  width: 90%;
  max-width: 900px;
  margin: 10px auto;

  /* Marco líquido pastel basado en #a46654 y #84394b */
  background: linear-gradient(180deg, 
    #a46654 0%, 
    #84394b 100%
  );
  padding: 8px;
  border: 2px solid #e0eefe;
  border-radius: 22px;

  box-shadow: 
    0 6px 15px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.contenedor .titulado h1 {
  width: 90%;
  max-width: 700px;
  margin: 5px auto;

  /* Botón central basado en la paleta oscura #5f2c52 con reflejo */
  background: linear-gradient(180deg, 
    #764447 0%, 
    #5f2c52 50%, 
    #4a203f 100%
  );
  color: #e0eefe;
  padding: 8px;
  border: 1px solid rgba(224, 238, 254, 0.4);
  border-radius: 16px;

  box-shadow: 
    inset 0 3px 5px rgba(255, 255, 255, 0.3),
    inset 0 -3px 5px rgba(0, 0, 0, 0.4);
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.contenedor .titulado h1::before,
.contenedor .titulado h1::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("/images/wolf3.gif");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.contenedor .titulado h1::before {
  margin-right: 15px;
}

.contenedor .titulado h1::after {
  margin-left: 15px;
}

.center {
  text-align: center;
}


/* ==========================================
   botones (Glossy Cute - Pastel Aero)
   ========================================== */

.boton {
  display: inline-block;
  /* Degradado basado en los tonos claros #e0eefe y #a9b2e3 */
  background: linear-gradient(180deg, 
    #ffffff 0%, 
    #e0eefe 40%, 
    #a9b2e3 100%
  );
  color: #5f2c52; /* Texto oscuro para buen contraste */
  border: 1px solid #ffffff;
  border-radius: 25px; /* Estilo cápsula cute */
  padding: 8px 22px;
  font-family: "Segoe UI", "Comic Sans MS", sans-serif;
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;

  box-shadow: 
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(132, 57, 75, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease-in-out;
}

.boton:hover {
  background: linear-gradient(180deg, 
    #ffffff 0%, 
    #f0f6ff 40%, 
    #c4cbfa 100%
  );
  color: #84394b;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 
    inset 0 2px 2px rgba(255, 255, 255, 1),
    0 0 12px rgba(224, 238, 254, 0.8),
    0 6px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.boton:active {
  background: linear-gradient(180deg, 
    #a9b2e3 0%, 
    #e0eefe 100%
  );
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}


/* ==========================================
   dialogos de personajes
   ========================================== */

.nereD, .miaD, .roseD, .aliceD, .dartD, .dsusD, .thornD, .danD {
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 17px;
  text-align: center;
  border-radius: 22px;
  padding: 12px 18px;
  margin: 15px 0;

  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 6px 12px rgba(0, 0, 0, 0.3);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.nereD:hover, .miaD:hover, .roseD:hover, .aliceD:hover, .dartD:hover, .dsusD:hover, .thornD:hover, .danD:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.nereD {
  color: #e7d7fe;
  background: linear-gradient(180deg, #c3b7e7 0%, #a795d3 20%, #9684c4 60%, #70619a 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.nereD::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("/images/nere.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.miaD {
  color: #ffe0cd;
  background: linear-gradient(180deg, #ae8381 0%, #936a68 20%, #815452 60%, #5c3c3a 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.miaD::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("/images/mia.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.roseD {
  color: #a46654;
  background: linear-gradient(180deg, #a46e71 0%, #8a575a 20%, #764447 60%, #4e2e2f 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.roseD::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("/images/rose.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.aliceD {
  color: #dae8f9;
  background: linear-gradient(180deg, #ced7f1 0%, #b3bee9 20%, #a2afe4 60%, #7b8bc1 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.aliceD::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("/images/alice.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.dartD {
  color: #ffb6a6;
  background: linear-gradient(180deg, #e9a399 0%, #e08376 20%, #d86c5d 60%, #ab4b3f 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.dartD::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("/images/dart.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.dsusD {
  color: #ff6565;
  background: linear-gradient(180deg, #e67699 0%, #e0547e 20%, #d53665 60%, #9e2348 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.dsusD::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("/images/dan sus.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.thornD {
  color: #a76e6a;
  background: linear-gradient(180deg, #a46f73 0%, #8a585d 20%, #764549 60%, #4e2f31 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.thornD::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("/images/thorn.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.danD {
  color: #f3c5ae;
  background: linear-gradient(180deg, #6bb8a2 0%, #52a18b 20%, #3f8f78 60%, #2d6958 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.danD::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("/images/dan.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}