/* ==========================================
   bases y cosas principales (FRUTIGER AERO - Windows Vista/7 Aesthetic)
   ========================================== */

body {
  background-color: #6a3b5a;
  color: #fff6ea;
  /* Usamos fuentes más redondas y limpias típicas de la época, harvest de fallback */
  font-family: "Segoe UI", "Calibri", "harvest", sans-serif;
  
  /* Capa 1: Brillo superior diagonal estilo cristal Aero.
     Capa 2: Gradiente de fondo suave.
     Capa 3: Estampado original. */
  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(
      to bottom, 
      rgba(208, 172, 168, 0) 0%,   
      rgba(153, 111, 127, 0.65) 35%, 
      #6a3b5a 75%                    
    ),
    url("/images/bgstamp3.png");
    
  background-size: 100% 100%, 100% auto, 8% auto;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Sutil sombra de texto para legibilidad Aero */
}

.contenedor {
  width: 90%;
  max-width: 1000px;
  margin: 30px auto;
  
  /* Efecto Cristal Espejo (Skeuomorphic Glass) con tu #6a3b5a */
  background: linear-gradient(180deg, 
    rgba(129, 84, 82, 0.7) 0%,    /* Brillo superior #815452 */
    rgba(106, 59, 90, 0.8) 25%,   /* Tu base #6a3b5a */
    rgba(74, 39, 62, 0.9) 75%,    /* Corte satinado central */
    rgba(106, 59, 90, 0.8) 100%
  );
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.3); /* Borde de cristal fino */
  border-radius: 25px; /* Bordes muy redondeados y orgánicos */
  
  /* Efecto Aero Glass: Sombra suave + Brillo de contorno + Sombra interna profunda */
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.5), /* Sombra externa */
    0 0 15px rgba(254, 161, 159, 0.2), /* Resplandor neón suave */
    inset 0 0 25px rgba(255, 255, 255, 0.15); /* Brillo interno de volumen */
    
  
}

.contenedor .titulado {
  width: 90%;
  max-width: 900px;
  margin: 10px auto;
  
  /* Degradado líquido satinado extremo con tu #fea19f */
  background: linear-gradient(180deg, 
    #ffc8c6 0%,     /* Brillo extremo */
    #ffb8b6 45%,    
    
    #ffb8b6 55%, 
    #ffc8c6 100%
  );
  padding: 8px;
  border: 1px solid #ffffff; /* Borde sólido blanco Aero */
  border-radius: 18px;
  
  /* Volumen líquido extrema */
  box-shadow: 
    0 6px 15px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.8), /* Reflejo especular superior */
    inset 0 -2px 0 rgba(0, 0, 0, 0.2); /* Sombra interna inferior */
  text-align: center;
}

.contenedor .titulado h1 {
  width: 90%;
  max-width: 700px;
  margin: 5px auto;
  
  /* Botón líquido metálico profundo Vista Style */
  background: linear-gradient(180deg, 
    #522c45 0%, 
    #6a3b5a 45%, 
    
    #6a3b5a 55%, 
    #522c45 100%
  );
  padding: 8px;
  border: 2px solid rgba(129, 84, 82, 0.5); /* Tu #815452 semi-transparente */
  border-radius: 12px;
  
  box-shadow: 
    inset 0 3px 5px rgba(255, 255, 255, 0.2), /* Reflejo líquido central */
    inset 0 -3px 5px rgba(0, 0, 0, 0.4); /* Sombra central */
  font-weight: bold; /* Más Aero en negrita */
  text-shadow: 0 2px 3px rgba(0,0,0,0.8);
}

.contenedor .titulado h1::before,
.contenedor .titulado h1::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("/images/gato2.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 (Efecto Cristal Líquido Glossy - Windows 7 Style)
   ========================================== */

.boton {
  display: inline-block;
  /* Degradado cristalino extremo líquido con tu #a193ff */
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.8) 0%, /* Reflejo especular puro */
    rgba(196, 187, 255, 0.9) 10%, 
    rgba(161, 147, 255, 0.8) 50%, /* Tu base #a193ff */
    rgba(125, 110, 220, 0.9) 100%
  );
  color: #1a0f21; /* Texto oscuro para contraste en cristal Aero */
  border: 1px solid #ffffff;
  border-radius: 20px; /* Muy redondeados */
  padding: 8px 20px;
  font-family: "Segoe UI", "comic sans MS", monospace;
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;
  
  /* Volumen líquido extremo */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.8), /* Reflejo superior */
    inset 0 -1px 3px rgba(0, 0, 0, 0.2), /* Sombra inferior */
    0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra proyectada suave */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); /* Contorno de texto para legibilidad Aero */
  transition: all 0.2s ease-in-out;
}

.boton:hover {
  /* Brillo más intenso y efecto pulsado */
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(216, 210, 255, 0.9) 10%, 
    rgba(179, 167, 255, 0.9) 50%, 
    rgba(143, 129, 232, 0.9) 100%
  );
  color: #1a0f21;
  transform: translateY(-1px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 15px rgba(161, 147, 255, 0.6), /* Resplandor neón Aero */
    0 6px 15px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.boton:active {
  /* Botón presionado líquido */
  background: linear-gradient(180deg, 
    #4a4ca6 0%, 
    #6062d1 100%
  );
  box-shadow: 
    inset 0 3px 5px rgba(0, 0, 0, 0.5),
    0 2px 5px rgba(0, 0, 0, 0.3);
  transform: translateY(1px);
}


/* ==========================================
   dialogos de personajes (Cajas Líquidas Glossy Frutiger Aero)
   ========================================== */

/* Mixin Aero aplicado a todos los diálogos */
.nereD, .miaD, .roseD, .aliceD, .dartD, .dsusD, .thornD, .danD {
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 18px;
  text-align: center;
  border-radius: 20px; /* Orgánicos y redondos */
  padding: 12px 18px;
  margin: 15px 0;
  
  /* Volumen eskeuomórfico aplicado a todas las cajas */
  box-shadow: 
    inset 0 2px 3px rgba(255, 255, 255, 0.6), /* Reflejo especular superior */
    inset 0 -2px 3px rgba(0, 0, 0, 0.3), /* Sombra inferior */
    0 5px 12px rgba(0, 0, 0, 0.4); /* Sombra proyectada */
    
  transition: transform 0.2s;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.nereD:hover, .miaD:hover, .roseD:hover, .aliceD:hover, .dartD:hover, .dsusD:hover, .thornD:hover, .danD:hover {
  transform: scale(1.02); /* Efecto Aero de 'hover' orgánico */
}

/* Aplicando degradados líquidos específicos de color */

.nereD {
  color: #e7d7fe;
  /* Degradado líquido de tu #9684c4 */
  background: linear-gradient(180deg, #c3b7e7 0%, #a795d3 10%, #9684c4 50%, #8372b0 90%, #70619a 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.nereD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  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.5)); /* Sombra de icono Aero */
}

.miaD {
  color: #ffe0cd;
  /* Degradado líquido de tu #815452 */
  background: linear-gradient(180deg, #ae8381 0%, #936a68 10%, #815452 50%, #6e4846 90%, #5c3c3a 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.miaD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  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.5));
}

.roseD {
  color: #a46654;
  /* Degradado líquido de tu #764447 */
  background: linear-gradient(180deg, #a46e71 0%, #8a575a 10%, #764447 50%, #61383a 90%, #4e2e2f 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.roseD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  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.5));
}

.aliceD {
  color: #dae8f9;
  /* Degradado líquido de tu #a2afe4 */
  background: linear-gradient(180deg, #ced7f1 0%, #b3bee9 10%, #a2afe4 50%, #8e9dd3 90%, #7b8bc1 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.aliceD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  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.5));
}

.dartD {
  color: #ffb6a6;
  /* Degradado líquido de tu #d86c5d */
  background: linear-gradient(180deg, #e9a399 0%, #e08376 10%, #d86c5d 50%, #c15b4d 90%, #ab4b3f 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dartD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  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.5));
}

.dsusD {
  color: #ff6565;
  /* Degradado líquido de tu #d53665 */
  background: linear-gradient(180deg, #e67699 0%, #e0547e 10%, #d53665 50%, #b82c55 90%, #9e2348 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dsusD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  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.5));
}

.thornD {
  color: #a76e6a;
  /* Degradado líquido de tu #764549 */
  background: linear-gradient(180deg, #a46f73 0%, #8a585d 10%, #764549 50%, #61393d 90%, #4e2f31 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.thornD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  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.5));
}

.danD {
  color: #f3c5ae;
  /* Degradado líquido de tu #3f8f78 */
  background: linear-gradient(180deg, #6bb8a2 0%, #52a18b 10%, #3f8f78 50%, #367c68 90%, #2d6958 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.danD::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  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.5));
}