@font-face {
    font-family: Angelina;
    src: url(/fonts/Angelina.ttf) format("truetype"); /* Safari, Android, iOS */
    src: url(/fonts/Angelina.woff2) format('woff2'), url(/fonts/Angelina.woff) format('woff'); /* Modern Browsers */
    font-display: swap;
}

@font-face {
    font-family: Arima Madurai;
    src: url(/fonts/ArimaMadurai-Regular.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: Star wars;
    src: url(/fonts/DeathStar-VmWB.ttf) format('truetype');
    font-display: swap;
}

body {
    display: block;
    margin: 0px;
}

[class*="col-"] {
    float: left;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 24.5%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

.col-12_5{
    width:12.5%;
}

body {
    background-color: #fff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: black;
    /*background-color: rgb(245, 245, 245);*/
}

.contenedor {
    width: 1552px;
    margin-left: auto;
    margin-right: auto;
    display: inherit;
    float: initial;
}

body {
}

.body-content {
    font-family: Arima Madurai;
    margin-top: 80px;
}

.contenedor {
    width: 1300px;
    margin: 0 auto;
    float: initial;
    display: flow-root;
    padding: 0;
    top: 0;
}

/*CABECERA*/

.icono_cabecera {
    padding-top: 5px;
}

.icono_cabecera img{
    width:200px;
}

.icono_cabecera a {
    font-size: 27px;
    color: red;
}

.toda_cabecera {
    width: 100%;
    height: 80px;
    background-color: black;
    color: white;
    float: left;
    height: 80px;
    background-color: black;
    color: white;
    float: left;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.toda_cabecera li {
    list-style: none;
    float: left;
    margin-left: 20px;
}

.menudecuatro ul {
    padding-top: 0px;
    top: 0px;
    float: left;
    margin-top:0px;
}

.toda_cabecera a {
    color: white;
    text-decoration: none;
    float: left;
    font-family: Arima Madurai;
}

.menudecuatro a {
    padding-top: 30px;
}

.menudecuatro{
    /*width:477px;*/
    float:right;
    display:block;
}


/*HOME*/
.contenedor_home {
    height: 200px;
    float: left;
    display: block;
    width: 100%;
}

.contenedor_home p {
    padding-right: 10px;
    padding-left: 10px;
}

.contenedor_home, .contenedor_detective, .contenedor_canciones, .contenedor_wikifamosos {
    min-height: 120px;
    height:auto;
    padding-top:20px;
    padding-bottom:10px;
}

.quieneselasesino img {
    width: 310px;
    margin-left: auto;
    margin-right: auto;
    float: initial;
    display: inherit;
    margin-top:0px;
}

.contenedor_home_col p{
    margin-bottom:0px;
}

.quieneselasesino {
    background-color: white;
}

.quieneselasesino p {
    margin-top: 20px;
    text-align: center;
    font-size: 28px;
    margin-bottom: 0px;
}

.email a,
.email a:visited,
.email a:hover,
.email a:active {
    color: white;
    text-decoration: none;
}

.barra_info {
    background-color: #ebe7e7;
    color:white;
    height: 50px;
    margin-top: 20px;
}

.barra_info p {
    text-align: center;
    color: black;
    font-weight: bold;
}

.personaje p{
    text-align:center;    
    margin-bottom:0px;
    margin-top:0px;
}

.contenedor_wikifamosos .personaje {
    width: 33.33%;
    float: left;
}

.foto {
    height: 140px; /* ajusta esto */
    background-size: cover;
    background-position: center;
    transition: 0.3s;
    cursor:pointer;
}

.textobarrainfo{
    display:none;
}

.oculto {
    display: none;
}

/* IMÁGENES BN */
.lucia .foto {
    background-image: url("/images/personajes/lucia_bn.jpg");
}

.rafael .foto {
    background-image: url("/images/personajes/rafael_bn.jpg");
}

.alvarito .foto {
    background-image: url("/images/personajes/alvarito_bn.jpg");
}

.manuela .foto {
    background-image: url("/images/personajes/manuela_bn.jpg");
}

.rocio .foto {
    background-image: url("/images/personajes/rocio_bn.jpg");
}

.diego .foto {
    background-image: url("/images/personajes/diego_bn.jpg");
}

.vicente .foto {
    background-image: url("/images/personajes/vicente_bn.jpg");
}

.julian .foto {
    background-image: url("/images/personajes/julian_bn.jpg");
}

.angela .foto {
    background-image: url("/images/personajes/angela_bn.jpg");
}

.tomas .foto {
    background-image: url("/images/personajes/tomas_bn.jpg");
}

.lourdes .foto {
    background-image: url("/images/personajes/lourdes_bn.jpg");
}

.juanjo .foto {
    background-image: url("/images/personajes/juanjo_bn.jpg");
}

.gines .foto {
    background-image: url("/images/personajes/gines_bn.jpg");
}

.antonito .foto {
    background-image: url("/images/personajes/antonito_bn.jpg");
}

.joanna .foto {
    background-image: url("/images/personajes/joanna_bn.jpg");
}

.olga .foto {
    background-image: url("/images/personajes/olga_bn.jpg");
}

/*personajes hover*/

.lucia:hover .foto {
    background-image: url("/images/personajes/lucia.jpg");
}

.rafael:hover .foto {
    background-image: url("/images/personajes/rafael.jpg");
}

.alvarito:hover .foto {
    background-image: url("/images/personajes/alvarito.jpg");
}

.manuela:hover .foto {
    background-image: url("/images/personajes/manuela.jpg");
}

.rocio:hover .foto {
    background-image: url("/images/personajes/rocio.jpg");
}

.diego:hover .foto {
    background-image: url("/images/personajes/diego.jpg");
}

.vicente:hover .foto {
    background-image: url("/images/personajes/vicente.jpg");
}

.julian:hover .foto {
    background-image: url("/images/personajes/julian.jpg");
}

.angela:hover .foto {
    background-image: url("/images/personajes/angela.jpg");
}

.tomas:hover .foto {
    background-image: url("/images/personajes/tomas.jpg");
}

.lourdes:hover .foto {
    background-image: url("/images/personajes/lourdes.jpg");
}

.juanjo:hover .foto {
    background-image: url("/images/personajes/juanjo.jpg");
}

.gines:hover .foto {
    background-image: url("/images/personajes/gines.jpg");
}

.antonito:hover .foto {
    background-image: url("/images/personajes/antonito.jpg");
}

.joanna:hover .foto {
    background-image: url("/images/personajes/joanna.jpg");
}

.olga:hover .foto {
    background-image: url("/images/personajes/olga.jpg");
}


/* IMÁGENES COLOR PERSONAJES */
.pag_personajes .lucia .foto {
    background-image: url("/images/personajes/lucia.jpg");
}

.pag_personajes .rafael .foto {
    background-image: url("/images/personajes/rafael.jpg");
}

.pag_personajes .alvarito .foto {
    background-image: url("/images/personajes/alvarito.jpg");
}

.pag_personajes .manuela .foto {
    background-image: url("/images/personajes/manuela.jpg");
}

.pag_personajes .rocio .foto {
    background-image: url("/images/personajes/rocio.jpg");
}

.pag_personajes .diego .foto {
    background-image: url("/images/personajes/diego.jpg");
}

.pag_personajes .vicente .foto {
    background-image: url("/images/personajes/vicente.jpg");
}

.pag_personajes .julian .foto {
    background-image: url("/images/personajes/julian.jpg");
}

.pag_personajes .angela .foto {
    background-image: url("/images/personajes/angela.jpg");
}

.pag_personajes .tomas .foto {
    background-image: url("/images/personajes/tomas.jpg");
}

.pag_personajes .lourdes .foto {
    background-image: url("/images/personajes/lourdes.jpg");
}

.pag_personajes .juanjo .foto {
    background-image: url("/images/personajes/juanjo.jpg");
}

.pag_personajes .gines .foto {
    background-image: url("/images/personajes/gines.jpg");
}

.pag_personajes .antonito .foto {
    background-image: url("/images/personajes/antonito.jpg");
}

.pag_personajes .joanna .foto {
    background-image: url("/images/personajes/joanna.jpg");
}

.pag_personajes .olga .foto {
    background-image: url("/images/personajes/olga.jpg");
}




/*WIKI FAMOSOS*/
.personaje {
    float: left;
    display: block;
    margin-top: 25px;
}

.personaje img {
    height: 140px;
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: initial;
    border: 3px solid black;
    border-radius:5px;
    display: inherit;
}

.personaje .nombre {
    float: left;
    display: block;
    margin: 0px;
    width:100%;
}

.personaje .descripcion {
    float: left;
    display: block;
    margin: 0px;
    width: 100%;
}

/*FOOTER*/
footer {
    background-color: black;
    height: auto;
    font-family: Arima Madurai;
    float: left;
    width: 100%;
    margin-top:20px;
}

.textofooter {
    color: white;
    text-align: center;
    padding-top: 0px;
    font-family: Arima Madurai;
    font-size:18px;
}

.cancionlibro {
    width: 33.33%;
    float:left;
}

.cancionlibro iframe {
    margin-left: auto;
    margin-right: auto;
    float: initial;
    display: inherit;
}

.cancionlibro p {
    text-align: center;
    margin-bottom: 5px;
}

.imagenmenudespliegue {
    width: 50px;
    background-repeat: no-repeat;
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
    position: absolute;
    z-index: 9999;
}

.filtrar {
    display: none;
    position: absolute;
}

.lipersonajes{
    display:none;
}

.contenedor_detective #opciones{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    float:initial;
    display:inherit;
}

#pantallaJuego {
    float: left;
    width: 100%;
}

#cabeceraJugador {
    width: 250px;
    float: left;
    margin-top: 20px;
    border: 2px solid black;
    background-color: #eee;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    float: initial;
    display: inherit;
}

/*DETECTIVES*/

.contenedor_detective {
    text-align: center;
    padding: 10px;
}

.pregunta {
    font-size: 20px;
    margin-bottom: 20px;
}

.opcion {
    display: block;
    margin: 10px;
    padding: 10px;
    background: #eee;
    cursor: pointer;
}

.opcion:hover {
    background: #ddd;
}

/* NUEVO */
#selectorDetective {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.detective-img {
    width: 100px;
    margin: 10px;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 10px;
}

    .detective-img.seleccionado {
        border: 3px solid black;
    }

#nickDetective {
    padding: 10px;
    width: 75px;
    text-align: center;
    margin-bottom: 0px;
}

/* CABECERA JUGADOR */
.cabecera_jugador {
    text-align: center;
    margin-bottom: 0px;
    height: 120px;
}

#imgDetective {
    width: 120px;
    margin-bottom: 10px;
    float: left;
    margin-left: 15px;
}

#textoBienvenida, #textoBienvenida2 {
    font-size: 18px;
    padding: 10px;
    font-size: 15px;
}

/*PERSONAJES*/
.opcion-asesinato {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin: 8px;
  width: 81px;
  height: 111px;
  overflow: hidden;
  border-radius: 8px;
}

.opcion-asesinato img {
  width: 25px;
  height: auto;
  margin-top: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

#cabeceraJugador p {
    margin: 0px;
    padding: 0px;
}

.infojugador {
    float: left;
    margin-top: 10px;
}

#numeroPregunta{
    margin:0px;
}

#selectorDetective {
    width: 510px;
    margin-left: auto;
    margin-right: auto;
}

.eligetipo, .eligenick {
    width: 100%;
    float: left;
    margin-bottom: 0px;
}

#btnComenzar {
    height: 40px;
    color: white;
    background: black;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
}

#enviarAsesino {
    height: 35px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
    background-color: black;
    color: white;
    border-radius: 5px;
    cursor:pointer;
}

#motivo {
    width: 94%;
    height: auto;
    margin-left: 20px;
    margin-right: 20px;
}

#contadorMotivo {
    font-size: 13px;
}

.pantalla-final {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mensaje-final h3 {
    color: #333;
    line-height: 1.4;
}

.mensaje-final button {
    margin-top: 15px;
    background: red;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
}

.opcion.seleccionada {
    border: 2px solid black;
}

.redessociales {
    height: 26px;
    width: 99%;
    margin-bottom: 50px;
    float: left;
    bottom: 20px;
    position: relative;
    margin-top: 30px;
}

.compartir {
    width: 310px;
    margin-left: auto;
    margin-right: auto;
    float: initial;
    display: inherit;
    margin-top: 40px;
}

.compartir a {
    color: white;
    float: left;
}

.compartir span {
    float: left;
    font-size: 20px;
    margin-top: 3px;
}

.redfacebook img, .redtwitter img, .redwhatsapp img, .redemail img, .redenlace img {
    width: 32px;
    height: 32px;
    margin-left: 10px;
    cursor: pointer;
}

#enlacecopiado {
    color: black;
    background-color: white;
    border-radius: 5px;
    position: absolute;
    margin-left: 200px;
    margin-top: -35px;
    border: 1px solid black;
    padding: 5px;
    display: none;
    font-size: 18px;
}

.respuesta_lector {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    float: initial;
}

.detective_lector {
    float: left;
    width: 10%;
}

.img_detective_lector {
    width: 100%;
    margin-top: 5px;
    margin-left: 5px;
}

.nombre_detective_lector {
    font-size: 12px;
}

.motivos_lector {
    width: 78%;
    float: left;
    margin-left: 2%;
}

.motivo_lector1, .motivo_lector2 {
    width:100%;
    float: left;
    font-size: 14px;
    text-align: left;
    margin-top: 5px;
}

 .motivo_lector2 {
    margin-top: 0px;
}

.bloque_respuesta_lector {
    border: 1px solid black;
    background-color: #eee;
    float: left;
    border-radius: 5px;
    margin-top: 5px;
}

.elegido_lector {
    width: 8%;
    float: left;
}

.nombre_elegido {
    font-size: 12px;
}

.img_elegido {
    width: 100%;
    margin-top: 5px;
}

.btnVerOpiniones, .btnVerResenyas, #enviarResenya {
    height: 35px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
    background-color: black;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    width: 262px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
}

#enviarResenya {
    font-size: 15px;
    padding-bottom: 10px;
    width: 184px;
}

#opinion {
    width: 100%;
    margin-top: 20px;
}


.btnVerResenyas {
    display: none;
}

.textoOpiniones, .textoResenyas {
    display: none;
    text-align: center;
    font-weight: bold;
}

#resenyafinal {
    display: none;
    border: 1px solid black;
    border-radius: 10px;
    background-color: #eee;
    margin-top: 20px;
    margin-bottom: 20px;
}

.estrella{
    width:50px;
}

.bloque_resenya_lector {
    border: 1px solid black;
    float: left;
    margin-top: 10px;
    border-radius: 10px;
    background-color: #eee;
}

.estrellasresenyas {
    margin-top:10px;
}

.opiniones_lector {
    float: left;
    width: 90%;
}

.bloque_resenya_lector {
    float: left;
    width: 100%;
}

.bloque_resenya_lector img{
    width:80px;
}

.estrellasresenyas img {
    width: 25px;
}

.valorseleccionado{
    display:none;
}

.buy-container {
    text-align: center;
    margin: 20px;
}

.buy-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #d8a679;
    color: #000;
    padding: 10px 15px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s ease;
    font-family: Arima Madurai;
    border: 1PX solid black;
}

    .buy-button:hover {
        background-color: #e68a00;
    }

    .buy-button img {
        width: 70px;
    }



/*SRQ RESPONSIVE*/
@media (max-width: 1300px) {
    .contenedor {
        width: 100%;
    }
    .icono_cabecera img {
        width: 200px;
        margin-left: 10px;
    }

    .menudecuatro {
        margin-right: 10px;
    }

    .imagentriana img {
        margin-left: 10px;
    }

    .contenedor_wikifamosos .personaje {
        width: 50%;
    }

    .imagentriana img, .imagenportada img {
        width: 180px !important;
    }
}

@media (max-width: 1200px) {
    .imagentriana img, .imagenportada img {
        width: 170px !important;
    }

    .cancionlibro p {
        font-size: 15px;
    }
}

@media (max-width: 1100px) {
    .imagentriana img, .imagenportada img {
        width: 150px !important;
    }

    .cancionlibro p {
        font-size: 14px;
    }
}

@media (max-width: 1000px) {

    .contenedor_personajes{
        display:none;
    }

    .lipersonajes {
        display: block;
    }

    .filtrar {
        display: block;
    }

    .menudecuatro {
        display: none;
        z-index: 9999;
        position: absolute;
        margin-top: 76px;
    }

    .contenedor_home_col{
        width:100%;
    }

    .cancionlibro {
        width: 50%;
    }

    .cancionlibro p {
        font-size: 16px;
    }

    .contenedor{
        width:100%;
    }

    .personaje {
        width: 33.33%;
    }

    .contenedor_home_col img {
        width: 287px!important;
        margin-left: auto;
        margin-right: auto;
        float: initial;
        display: inherit; 
    }

    .contenedor_home_col p {
        padding: 20px;
    }

    .quieneselasesino img {
         margin-top: 0px; 
    }

    .personajes .foto {
        width: 100%;
        height: 310px;
    }

    .imagentriana img, .imagenportada img, .quieneselasesino img {
        width: 320px !important;
    }

    .barra_info{
        display:none;
    }

    .toda_cabecera a {
        width: 100%;
    }

    .icono_cabecera img {
        margin-left: auto;
        margin-right: auto;
        float: initial;
        display: inherit;
    }

    .elementosmenu {
        background-color: black;
        width: 200px;
    }

    .elementosmenu li {
        width:100%;
    }

    .menudecuatro ul {
        padding-left: 0px;
    }

    .menudecuatro a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (max-width: 900px) {
    .personaje .descripcion {
        font-size: 14px;
    }

    .contenedor_detective #opciones {
        width: 90%;
    }
}

@media (max-width: 800px) {
    .cancionlibro p {
        font-size: 14px;
    }

    .contenedor_wikifamosos .personaje {
        width: 100%;
    }

    .contenedor_detective #opciones {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .cancionlibro {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .personaje {
        width: 100%;
    }

    .personaje img {
        margin-left: auto;
        margin-right: auto;
        width: 320px;
        float: initial;
        display: inherit;
        height: auto;
    }

    .personaje .nombre {
        text-align: center;
    }

    .personaje .descripcion {
        text-align: center;
    }

    .pag_personajes .foto {
        width: 320px;
        height: 420px;
        margin-left: auto;
        margin-right: auto;
        float: initial;
        display: inherit;
    }

    #selectorDetective {
        width: 100%;
    }

    .compartir span {
        font-size: 18px!important;
    }

    .respuesta_lector {
        width: 480px;
    }

    .bloqueresenyas .detective_lector, .bloqueresenyas .opiniones_lector {
        width: 100%;
    }

    .bloqueresenyas .opinion_lector2 {
        padding: 10px;
    }

    .estrellasresenyas img {
        width: 35px;
    }
}

@media (max-width: 500px) {
    .respuesta_lector {
        width: 430px;
    }
}

@media (max-width: 450px) {
    .respuesta_lector {
        width: 380px;
    }

    .detective_lector {
        width: 15%;
    }

    .motivos_lector {
        width: 70%;
    }

    .elegido_lector {
        width: 12%;
    }
}

@media (max-width: 400px) {
    .respuesta_lector {
        width: 320px;
    }

    .motivo_lector1, .motivo_lector2 {
        font-size: 13px;
        line-height: 1.3;
    }

}

@media (max-width: 350px) {
    .respuesta_lector {
        width: 300px;
    }
}

@media (max-width: 320px) {

}