@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
/*COLORES*/
:root{
      --negro-claro: #111111;
      --blanco: #ffffff;
      --rojo: #E50914;
      --colorado: #c30811;
      --verde: #11DA45;
      --naranja: #f1722d;
      --negro: #000000;
      --link-footer: #03A9F4;
      --link: #03A9F4;
     }
/*GENERALES*/
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;

 }

body{
     font-family: 'Poppins', sans-serif;
     background: var(--negro);
    }

a{
  text-decoration: none;
  font-weight: 400;
  font-size: 1rem;
}

.contenedor{
            width: 100%;
            margin: auto;
            float: left;
           }

h2{
   text-align: center;
   margin-top: 50px;
  }

/*CABECERA*/
header{
       width: 100%;
       float: left;
       background: var(--negro-claro);
       padding: 10px 0px;
      }

.menu ul{
         width: 100%;
         height: auto;
         float: left;
        }

.menu ul li{
            text-decoration: none;
            list-style: none;
           }

.menu ul li.logotipo{
                     margin-left: 5%;
                     float: left;
                    }

.menu ul .logotipo img{
                       width: 150px;
                       height: auto;
                      }

header .menu{
             display: flex;
             justify-content: space-between;
             align-items: center;
            }

.menu ul li.boton-login{
  background: transparent;
  text-decoration: none;
  margin-right: 10px;
  line-height: normal;
  padding: 8px 10px;
  font-weight: 400;
  font-size: 1rem;
  float: right;
  border-radius: 4px;
  margin-top: 10px;
  border: 1px solid var(--blanco);
  text-transform: uppercase;
            }

.menu ul li.boton-login:hover{
                   background: var(--link);
                   cursor: pointer;
                  }

.boton-login a{
  font-weight: bold;
  color: var(--blanco);
}

                  .menu ul li.boton-registro{
                              background: transparent;
                              text-decoration: none;
                              margin-right: 10px;
                              line-height: normal;
                              padding: 8px 10px;
                              font-weight: 400;
                              font-size: 1rem;
                              float: right;
                              border-radius: 4px;
                              margin-top: 10px;
                              border: 1px solid var(--blanco);
                              text-transform: uppercase;
                              }

.menu ul li.boton-registro:hover{
                                 background: var(--link);
                                 cursor: pointer;
                                }

.boton-registro a{
  font-weight: bold;
  color: var(--blanco);
}

/*SERIES Y PELICULAS*/
.categorias {
      margin-top: 30px;
      padding: 20px;
      background-color: #111;
    }

    .categoria {
      margin-bottom: 20px;
    }

    .categoria h3 {
      font-size: 20px;
      margin-bottom: 10px;
      color: #e50914;
    }

    .peliculas {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .pelicula {
      width: calc(33.33% - 10px);
      margin-bottom: 20px;
    }

    .pelicula img {
      width: 100%;
      height: auto;
      cursor: pointer;
    }

    .pelicula img:hover {
      opacity: 0.7;
    }

/*------ Fondo index------*/
.contenedor-index{
  line-height: 1;
width: 100%;
display: block;
overflow: auto;
background-color: transparent;
background-image: url(../img/fondo-winner.jpg);
background-size: cover;
background-position: left top;
background-repeat: no-repeat;
border-width: 0px;
border-style: solid;
border-color: transparent;
border-radius: 0px;
min-height: 30vw;
opacity: 0.8;
padding: calc(0px)
             }

.fondo-index .contenedor{
  width: 70%;
margin: 0 auto;
margin-left: 15%;
margin-right: 15%;
margin-bottom: 6.25em;
margin-top: 6.25em;
background: black;
padding: 15px;
border-radius: 5px;
float: left;
opacity: 0.9;
box-shadow: 7px 5px 4px 0px rgba(0, 0, 0, 0.2);
                         }

.fondo-index .titulo{
                      width: 100%;
                      font-weight: bold;
                      font-size: 2.5em;
                      margin-top: 10px;
                      margin-bottom: 0.4em;
                      text-align: center;
                      color: var(--blanco);
                      float: left;
                      text-align: left;
                     }

.fondo-index .descripcion{
                          width: 100%;
                          font-weight: bold;
                          font-size: 1.62em;
                          max-width: 50%;
                          margin-bottom: 1.25em;
                          text-align: left;
                          color: var(--blanco);
                          }

.fondo-index .registro-index{
                              width: 50%;
                              height: auto;
                              padding: 10px;
                              float: left;
                              border:none;
                              background: linear-gradient(rgba(0, 0, 0, .50) 0%, rgba(0,0,0, .50) 100%);
                              display: block;
                              position: static;
                             }

.fondo-index .precios{
  width: 50%;
  float: left;
  text-align: left;
  font-size: 25px;
  font-weight: bold;
  color: var(--blanco);
  margin-top: 20px;
  margin-bottom: 10px;
                      }

.fondo-index .letras-chicas{
                            width: 100%;
                            float: left;
                            text-align: left;
                            font-size: 10px;
                            color: var(--blanco);
                            margin-top: 10px;
                          }

.fondo-index .contenedor a{
                            width: 50%;
                            background: var(--rojo);
                            color: var(--blanco);
                            border:none;
                            border-radius: 0.31em;
                            padding: 0.93em 1.87em;
                            margin-right: 1.25em;
                            cursor: pointer;
                            transition: .3s ease all;
                            font-size: 1.12em;
                            float: left;
                            text-align: center;
                            margin-left: 25%;
                            margin-right: 25%;
                            margin-top: 5%;
                            margin-bottom: 5%;
                           }

.fondo-index .contenedor a:hover{
                                  background: var(--colorado);
                                 }




/*--Sección contenedor--*/
.seccion-contenedor{
                    color: var(--fondo);
                    font-size: 16px;
                    min-height: 40.62em;
                    background: #f2f2f2;
                    background-position: center center;
                    background-size: cover;
                    margin-bottom: 3.12em;
                    display: flex;
                    align-items: end;
                   }

.seccion-contenedor .contenedor{
                                margin: 0 auto;
                                margin-bottom: 6.25em;
                                margin-top: 6.25em;
                               }

.seccion-contenedor .titulo-frontend{
                                     width: 100%;
                                     font-weight: 600;
                                     font-size: 3.12em;
                                     margin-bottom: 0.4em;
                                     text-align: center;
                                    }

.seccion-contenedor .descripcion-frontend{
                                          width: 100%;
                                          font-weight: normal;
                                          font-size: 1em;
                                          margin-bottom: 1.25em;
                                          text-align: center;
                                         }

section .plan{
  width: 100%;
  height: auto;
  float: left;
}

.plan .contenedor-plan{
  width: 40%;
  margin: 0 auto;
  margin-left: 5%;
  margin-bottom: 6.25em;
  margin-top: 6.25em;
  background: black;
  padding: 15px;
  border-radius: 5px;
  float: left;
  opacity: 0.9;
  box-shadow: 7px 5px 4px 0px rgba(0, 0, 0, 0.2);
}

.contenedor-plan h1{
  width: 100%;
    font-weight: bold;
    font-size: 2.5em;
    margin-top: 50px;
    margin-bottom: 25px;
    margin-bottom: 0.4em;
    text-align: center;
    color: var(--blanco);
    float: left;
    text-align: center;
}


.faq-section {
    max-width: 1920px;
    width: 100%;
    float: left;
    margin-top: 5%;
}

.faq-section h1{
  width: 100%;
    float: left;
    text-align: center;
    font-size: 2.5em;
    font-weight: 700;
    color: #333333;
    margin: 20px 0 0px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding-bottom: 10px;
    position: relative;
    font-family: 'Arial', sans-serif;
    display: inline-block;
}

.faq-item {
  width: 60%;
  float: left;
  background-color: var(--blanco);
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.faq-question {
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.faq-answer {
    display: none;
    padding: 15px;
    border-top: 1px solid #444444;
}

.faq-answer p{
  margin-bottom: 10px;;
}

.faq-toggle {
    font-size: 24px;
}

/*PLANES*/
.pricing-table {
  width: 100%;
  float: left;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.pricing-card {
    background-color: var(--blanco);
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.pricing-card h2 {
    margin-top: 0;
}

.price {
    font-size: 24px;
    margin: 10px 0;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
}

.pricing-card ul li {
    margin: 10px 0;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    color: #ffffff;
    background-color: #e50914;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #f6121d;
}

/*INFO INDEX*/
section.info-index{
                   width: 100%;
                   height: auto;
                   float: left;
                   border-bottom: 5px solid var(--naranja);
                  }

.info-index .index-contenedores{
                                width: 10%;
                                height: auto;
                                float: left;
                                padding: 5px;
                                margin-left: 20%;
                                margin-top: 5%;
                                margin-bottom: 5%;
                                color: var(--naranja);
                                border-radius: 16px;
                                text-align: center;
                               }

.info-index .index-contenedores i{
                                  font-size: 50px;
                                 }

.info-index .index-contenedores a{
                                  color: var(--negro);
                                 }

section.ideas-index{
                    width: 100%;
                    height: auto;
                    float: left;
                    border-bottom: 5px solid var(--naranja);
                   }

.ideas-index .idea{
                   width: 20.33%;
                   height: auto;
                   float: left;
                   margin-left: 10%;
                   background: var(--gris);
                   border: 1px solid var(--gris);
                   margin-top: 5%;
                   margin-bottom: 5%;
                  }

.ideas-index .idea img{
                       width: 100%;
                       height: auto;
                       float: left;
                       padding: 1px;
                      }


.contenedor-descarga-googleplay{
  width: 100%;
  float: left;
}

.descarga-googleplay{
  width: 100%;
  float: left;
  background: var(--blanco);
}

.imagen-googleplay{
                   width: auto;
                   height: 150px;
                   float: left;
                   margin: 0 auto;
                   padding: 5px;
                   margin-left: 5%;
                  }

.imagen-winner{
               width: auto;
               height: 150px;
               margin: 0 auto;
               padding: 5px;
               border-radius: 16px;
               float: right;
               margin-right: 5%;
              }

.descarga-googleplay h3{
  width: 80%;
  margin-top: 2%;
}

.contenedor-imagen-de-chicos{
  width: 100%;
  float: left;
  background-color: transparent;
    background-image: url(../img/chicos.png);
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    border-radius: 0px;
    min-height: 50vw;
    opacity: 0.8;
}

.imagen-de-chicos{
  width: 100%;
  float: left;
  background-color: transparent;
    background-image: url(../img/chicos.png);
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    border-radius: 0px;
    min-height: 30vw;
    opacity: 0.8;
}

/*REGISTRO*/
.formulario-de-registro form{
     max-width: 400px;
     margin: 0 auto;
     padding: 20px;
     background-color: #111;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

.formulario-de-registro img {
        width: 100px;
        height: auto;
        margin-bottom: 1%;
        margin-top: 1%;
    }

.formulario-de-registro{
                        width: 90%;
                        margin: auto;
                        margin-top: 15%;
                        margin-bottom: 15%;
                       }

.formulario-de-registro h1{
                           width: 90%;
                           margin: auto;
                           text-align: center;
                           background-color: #111;
                           max-width: 400px;
                           box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                           color: var(--blanco);
                          }

.formulario-de-registro p{
                          width: 100%;
                          float: left;
                          text-align: center;
                          color: var(--blanco);
                          margin-bottom: 10px;
                         }

.formulario-de-registro p > a{
                              color: var(--link);
                             }

.formulario-de-login{
                     width: 90%;
                     margin: auto;
                     margin-top: 15%;
                     margin-bottom: 15%;
                    }

.formulario-de-login img{
                         width: 100px;
                         height: auto;
                         margin-bottom: 1%;
                         margin-top: 1%;
                        }

.formulario-de-login h1{
                        width: 90%;
                        margin: auto;
                        text-align: center;
                        background-color: #111;
                        max-width: 400px;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                        color: var(--negro);
                        background: var(--blanco);
                       }

a.link-recuperarContraseña{
                           width: 100%;
                           margin: auto;
                           text-align: center;
                           float: left;
                           margin-top: 25px;
                           color: var(--blanco);
                          }

a.link-recuperarContraseña:hover{
                                 cursor: pointer;
                                 color: var(--link);
                                }

  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    border: none;
  }

  input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #e50914;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }

input[type="submit"]:hover{
                           background: var(--link);
                           color: var(--blanco);
                           transition: 0.5s;
                          }

  /* Contenedor para el input con el ícono de ojo */
  .input-contenedor {
      position: relative; /* Contenedor relativo para el posicionamiento absoluto del ícono */
      width: 100%; /* Ancho completo del contenedor */
  }

  /* Campo de entrada de contraseña */
  input[type="password"] {
      width: 100%; /* Ancho completo del input */
      padding-right: 40px; /* Espacio a la derecha para el botón del ojo */
  }

  /* Botón del ícono de ojo */
  .toggle-password {
      position: absolute; /* Posicionamiento absoluto dentro del contenedor */
      right: 10px; /* Alineación a la derecha */
      top: 35%; /* Alineación vertical centrada */
      transform: translateY(-50%); /* Ajuste de centrado vertical */
      background: var(--link);
      border: none; /* Sin borde */
      border-radius: 5px;
      cursor: pointer; /* Cambiar cursor a pointer */
      font-size: 18px; /* Tamaño del ícono */
  }

  .toggle-password:hover {
      color: #e50914; /* Cambiar color del ícono al pasar el mouse */
  }



/*LOGIN*/

   .formulario-de-login form {
     max-width: 400px;
     margin: 0 auto;
     padding: 20px;
     background-color: var(--negro-claro);
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }

   input[type="email"],
   input[type="password"] {
     width: 100%;
     padding: 10px;
     margin-bottom: 10px;
     border-radius: 3px;
     border: none;
   }

   input[type="submit"] {
     width: 100%;
     padding: 10px;
     background-color: var(--blanco);
     color: var(--negro);
     border: none;
     border-radius: 3px;
     cursor: pointer;
     font-weight: bold;
   }

/*SECCIONES*/
.nosotros{
          width: 90%;
          margin: auto;
          margin-top: 5%;
          margin-bottom: 5%;
         }

.nosotros h1{
             width: 90%;
             margin: auto;
             text-align: center;
             background-color: #111;
             max-width: 400px;
             margin-bottom: 50px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
             color: var(--blanco);
            }

.nosotros p{
            width: 100%;
            float: left;
            text-align: justify;
            color: var(--blanco);
           }

.contacto{
          width: 60%;
          margin: auto;
          margin-top: 5%;
          margin-bottom: 5%;
          float: left;
          margin-left: 20%;
          margin-right: 20%;
         }

.contacto h1{
             width: 90%;
             margin: auto;
             text-align: center;
             background-color: #111;
             max-width: 400px;
             float: left;
             margin-bottom: 50px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
             color: var(--blanco);
            }

.contacto h4{
             width: 100%;
             float: left;
             color: var(--blanco);
            }

.contacto h5{
             width: 100%;
             float: left;
             color: var(--blanco);
             border-bottom: 1px solid var(--gris);
            }

.contacto p{
            width: 100%;
            float: left;
            color: var(--blanco);
           }

/*MENSAJES*/
.mensaje-error{
               background:  var(--rojo);
               color: var(--blanco);
               font-size: 1.00em;
               text-align: center;
              }

.mensaje-exitoso{
                 background: var(--fondo);
                 color: var(--blanco);
                 font-size: 1.00em;
                }

.mensaje-advertencia{
                     background: var(--naranja);
                     color: var(--blanco);
                     font-size: 1.00em;
                    }
/*---Footer---*/

footer{
background: linear-gradient(10deg, var(--negro-claro) 58%, var(--blanco) 128%),#000;
float: left;
padding: 10px;
width: 100%;
height: auto;
      }

footer nav{
            width: 100%;
           float: left;
           margin-top: 2%;
           margin-bottom: 2%;
          }

footer nav a{
             width: 20%;
             color: var(--blanco);
             text-align: center;
             text-decoration: none;
             line-height: normal;
             padding: 7px 17px;
             font-size: 14px;
             float: left;
            }

footer nav a:hover{
                   text-decoration: none;
                   cursor: pointer;
                   text-decoration: underline;
                   color: var(--link-footer);
                  }

footer P{
         width: 100%;
         float: left;
         text-align: center;
         font-size: 12px;
         margin-top: 25px;
         margin-bottom: 25px;
         color: var(--blanco);
        }

footer P > a{
             font-size: 12px;
             color: var(--link-footer);
            }

.redes{
       width: 100%;
       float: left;
       padding: 10px;
       display: flex;
       justify-content: center;
       align-items: center;
       margin-top: 2%;
       margin-bottom: 2%;
      }

.redes span{
            color: var(--blanco);
            margin-right: 5px;
           }

.redes span a{
              color: var(--blanco);
              text-decoration: none;
              display: flex;
              justify-content: center;
              align-items: center;
             }

.redes span a:hover{
                    color: var(--link);
                   }

.redes span a img{
                  width: 25px;
                  height: 25px;
                  background: var(--blanco);
                  padding: 1px;
                  border-radius: 5px;
                  margin-right: 5px;
                  margin-left: 5px;
                 }

/*ESTILOS GENERALES*/
.hr-linea{
          width: 100%;
          height: 5px;
          float: left;
          display: block;
          border: none;
          background: var(--naranja);
         }
/*--Media Queries--*/

@media screen and (max-width: 800px){
header .logotipo{
                 margin-bottom: 10px;
                }

.menu ul .logotipo img{
                     width: 100px;
                     height: auto;
                    }

header .contenedor{
                   flex-direction: column;
                   text-align: center;
                  }

.fondo-index{
              font-size: 13px;
              float: left;
             }

.contenedor-plan h1{
                    font-size: 25px;
                   }

.fondo-index .titulo{
                      width: 100%;
                      font-weight: bold;
                      font-size: 2.12em;
                      margin-bottom: 0.4em;
                      text-align: center;
                      color: var(--blanco);
                      float: left;
                      text-align: center;
                     }

.fondo-index .descripcion{
                           max-width: 100%;
                           text-align: center;
                          }

.fondo-index .registro-index .boton{
                                     width: 100%;
                                     margin-top: 5px;
                                    }

.info-index .index-contenedores{
                                width: 100%;
                                margin-left: 0%;
                               }

.info-index .index-contenedores i{
                                  font-size: 25px;
                                 }

.info-index .index-contenedores a{
                                  color: var(--negro);
                                  font-size: 13px;
                                 }

.fondo-index .contenedor{
                         width: 90%;
                         margin-left: 5%;
                         margin-right: 5%;
                        }

.fondo-index .contenedor a{
                           width: 80%;
                           padding: 0.50em 1.0em;
                           font-size: 1.2em;
                           float: left;
                           margin-left: 10%;
                           margin-right: 10%;
                           margin-top: 10px;
                           text-align: center;
                          }

.pricing-card{
              width: 48%;
              margin-left: 1%;
              margin-right: 1%;
             }

.ideas-index .idea{
                    width: 100%;
                    padding: 10px;
                    float: left;
                    margin-left: 0px;
                  }

.imagen-googleplay{
                    width: 90%;
                    height: auto;
                    margin-left: 5%;
                    margin-right: 5%;
                  }

.descarga-googleplay h3{
                        width: 90%;
                        margin-left: 5%;
                        margin-right: 5%;
                        margin-top: 2%;
                        float: left;
                        padding: 5px;
                       }

.descarga-googleplay h4{
                        width: 90%;
                        margin-left: 5%;
                        margin-right: 5%;
                        float: left;
                        padding: 5px;
                       }

                       .imagen-winner{
                                      width: auto;
                                      height: 150px;
                                      margin: 0 auto;
                                      padding: 5px;
                                      border-radius: 16px;
                                      float: none;
                                      display: flex;
                                      justify-content: center;
                                      align-items: center;
                                     }

.faq-item{
           width: 90%;
           margin-left: 5%;
           margin-right: 5%;
         }

.registro{
          width: 80%;
          margin-left: 10%;
          margin-right: 10%;
         }

footer nav a{
             width: 100%;
             font-size: 13px;
             margin-right: 10px;
             padding: 7px 1px;
             float: left;
             text-align: center;
            }
}