/* ==========================================
   BASES Y CONFIGURACIÓN GENERAL (YouTube / Windows 7 Glass 2015)
   ========================================== */

body {
  background-color: #1a1a21;
  color: #ffffff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  
  /* 
     Degradado suavizado que cubre el 100% de la altura de la ventana (vh) 
     para que no haga cortes raros ni líneas negras al hacer scroll.
  */
  background-image: 
    linear-gradient(180deg, rgba(136, 192, 246, 0.2) 0%, rgba(148, 50, 91, 0.4) 100%),
    url("/images/bgstamp5.png");
  background-size: 100% 100vh, 10% auto;
  background-repeat: no-repeat, repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

/* MARCO PRINCIPAL (Estilo Cristal Windows 7 Aero) */
.contenedor {
  width: 90%;
  max-width: 1200px;
  margin: 30px auto;
  
  /* Cristal acristalado basado en el color oscuro #94325b */
  background: linear-gradient(180deg, 
    rgba(148, 50, 91, 0.85) 0%, 
    rgba(100, 30, 60, 0.92) 100%
  );
  padding: 25px;
  border: 1px solid rgba(208, 247, 246, 0.6);
  border-radius: 12px;
  
  /* Sombra voluminosa con reflejo interno (Glass Effect) */
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 15px rgba(136, 192, 246, 0.2);
}

/* CABECERA (Estilo Barra de Título / Reproductor YouTube 2015) */
.contenedor .titulado {
  width: 90%;
  max-width: 750px;
  margin: 10px auto;
  
  /* Color resalto azul #b1dbf6 acristalado */
  background: linear-gradient(180deg, 
    #d0f7f6 0%, 
    #b1dbf6 50%, 
    #88c0f6 100%
  );
  padding: 6px;
  border: 1px solid #ffffff;
  border-radius: 8px;
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-align: center;
}

.contenedor .titulado h1 {
  width: 90%;
  max-width: 700px;
  margin: 5px auto;
  
  /* Rojo YouTube brillante con degradado Glossy de 2015 */
  background: linear-gradient(180deg, 
    #f7562d 0%, 
    #db3240 50%, 
    #b2202c 100%
  );
  color: #ffffff;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 5px rgba(0, 0, 0, 0.4),
    0 2px 5px rgba(0, 0, 0, 0.3);
}

.contenedor .titulado h1::before,
.contenedor .titulado h1::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url("/images/sus.gif");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

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

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

.center {
  text-align: center;
}

/* MARCO PARA IMÁGENES (Estilo Miniatura de YouTube 2015) */
.expositor img {
  display: block;
  margin: 15px auto;
  max-width: 100%;
  height: auto;
  border: 3px solid #ffffff;
  outline: 1px solid #88c0f6;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}


/* ==========================================
   BOTONES (Glossy Button - Estilo Windows 7 / YouTube UI)
   ========================================== */

.boton {
  display: inline-block;
  /* Degradado Glossy Celeste/Azul */
  background: linear-gradient(180deg, 
    #ffffff 0%, 
    #d0f7f6 40%, 
    #88c0f6 50%, 
    #6ba8e5 100%
  );
  color: #1a1a21;
  border: 1px solid #5a91c8;
  border-radius: 5px;
  padding: 6px 18px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;
  
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.15s ease-in-out;
}

.boton:hover {
  background: linear-gradient(180deg, 
    #ffffff 0%, 
    #f7562d 40%, 
    #db3240 50%, 
    #b2202c 100%
  );
  color: #ffffff;
  border-color: #f7562d;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 8px rgba(247, 86, 45, 0.6);
  cursor: pointer;
}

.boton:active {
  background: linear-gradient(180deg, 
    #94325b 0%, 
    #db3240 100%
  );
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  transform: translateY(1px);
}


/* ==========================================
   DIÁLOGOS DE PERSONAJES (Cajas Satinadas Aero)
   ========================================== */

.nereD, .miaD, .roseD, .aliceD, .dartD, .dsusD, .thornD, .danD {
  font-family: "Comic Sans MS", "Segoe UI", sans-serif;
  font-size: 17px;
  text-align: center;
  border-radius: 8px;
  padding: 10px 16px;
  margin: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  
  /* Sombra con bisel tridimensional */
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4);
    
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: transform 0.15s ease;
}

.nereD:hover, .miaD:hover, .roseD:hover, .aliceD:hover, .dartD:hover, .dsusD:hover, .thornD:hover, .danD:hover {
  transform: scale(1.01);
}

.nereD {
  color: #ffffff;
  background: linear-gradient(180deg, #b04b77 0%, #94325b 50%, #6d2040 100%);
}

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

.miaD {
  color: #ffffff;
  background: linear-gradient(180deg, #e84c59 0%, #db3240 50%, #a61c28 100%);
}

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

.roseD {
  color: #ffffff;
  background: linear-gradient(180deg, #b04b77 0%, #94325b 50%, #702041 100%);
}

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

.aliceD {
  color: #1a1a21;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, #ffffff 0%, #d0f7f6 40%, #b1dbf6 100%);
  border-color: #88c0f6;
}

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

.dartD {
  color: #ffffff;
  background: linear-gradient(180deg, #ff714d 0%, #f7562d 50%, #cc3710 100%);
}

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

.dsusD {
  color: #ffffff;
  background: linear-gradient(180deg, #e84c59 0%, #db3240 50%, #a61c28 100%);
}

.dsusD::before {
  content: "";
  display: inline-block;
  width: 45px;
  height: 45px;
  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 2px rgba(0,0,0,0.5));
}

.thornD {
  color: #ffffff;
  background: linear-gradient(180deg, #b04b77 0%, #94325b 50%, #6d2040 100%);
}

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

.danD {
  color: #ffffff;
  background: linear-gradient(180deg, #ff714d 0%, #f7562d 50%, #cc3710 100%);
}

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