/*
Theme Name: Porto Child
Version: 1.1
Template: porto
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

  /* Contenedor full */
  .hero {
    position: relative;
    width: 100%;
    height: 75vh; /* Pantalla completa */
    overflow: hidden;
  }

  /* Contenido arriba del video */
  .hero-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
    color: white;
    padding: 20px;
    
  }

  .hero-content h1 {
    font-size: 4rem;
    margin: 0 0 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.6);
  }

  .hero-content p {
    font-size: 1.3rem;
    text-shadow: 0 4px 10px rgba(0,0,0,0.6);
  }

  /* Imagen encima del video */
  .hero-content img {
    width: 50vh;
    margin-top: 10px;
  }

  .hero-home h1 {
    font-size: 4rem;
    color:#333940;
    text-shadow: none;
    margin: 2rem 0 2rem 0;
  }
  .hero-home h4 {
    font-size: 1.2rem;
    color:#333940;
    margin: 2rem 25vh 0 25vh;
  }
  .hero-images {
    margin: 2rem 0;
  }
.rounded-info {
    font-size: 0.85rem;
    font-weight: bold;
    color: #f28a16;
    background-color: #d84a1b00;
    padding: 10px 20px;
    border: #f28a16 solid 1px;
    border-radius: 20px;
}
.ul-info {
    list-style: none;
    display: flex;
    text-align: center;
    align-content: flex-start;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
}
.info {
    font-size: 1rem;
    font-weight: bold;
    color: #f28a16;
    background-color: #d84a1b00;
    padding: 10px 20px;
    margin-top: 2rem;
}
.blue-gradient {
    background: hsla(209, 72%, 40%, 1);
    background: linear-gradient(45deg, hsla(209, 72%, 40%, 1) 0%, hsla(190, 96%, 42%, 1) 100%);
    background: -moz-linear-gradient(45deg, hsla(209, 72%, 40%, 1) 0%, hsla(190, 96%, 42%, 1) 100%);
    background: -webkit-linear-gradient(45deg, hsla(209, 72%, 40%, 1) 0%, hsla(190, 96%, 42%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#1D6AB0", endColorstr="#04B0D1", GradientType=1 );
}
.orange-gradient {
    background: hsla(7, 76%, 46%, 1);
    background: linear-gradient(45deg, hsla(7, 76%, 46%, 1) 0%, hsla(32, 89%, 52%, 1) 100%);
    background: -moz-linear-gradient(45deg, hsla(7, 76%, 46%, 1) 0%, hsla(32, 89%, 52%, 1) 100%);
    background: -webkit-linear-gradient(45deg, hsla(7, 76%, 46%, 1) 0%, hsla(32, 89%, 52%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#d0321c", endColorstr="#f28a16", GradientType=1 );
}

.name-bingo {
 background: -webkit-linear-gradient(45deg, hsla(209, 72%, 40%, 1) 0%, hsla(190, 96%, 42%, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.button-primary {
    background: hsla(7, 76%, 46%, 1);
    background: linear-gradient(45deg, hsla(7, 76%, 46%, 1) 0%, hsla(32, 89%, 52%, 1) 100%);
    background: -moz-linear-gradient(45deg, hsla(7, 76%, 46%, 1) 0%, hsla(32, 89%, 52%, 1) 100%);
    background: -webkit-linear-gradient(45deg, hsla(7, 76%, 46%, 1) 0%, hsla(32, 89%, 52%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#d0321c", endColorstr="#f28a16", GradientType=1 );
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2rem;
    margin: 10px;
    display: inline-block;
  }

  .button-primary:hover {
    background-color: #e65c00;
    color: white;
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }

  .button-secondary {
    background-color: #ffffff00;
    color: #1d6ab0;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2rem;
    margin: 10px;
    display: inline-block;
    border: #0073e6 solid 2px;
  }
  .button-secondary:hover {
    background-color: #0073e6;
    color: white;
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
.button-trasparent {
    background-color: #ffffff00;
    color: #ffffff!important;
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2rem;
    margin: 20px 0 0 0;
    display: inline-block;
    border: white solid 2px;
  }
.button-trasparent:hover {
    background-color: #ffffff;
    color: #d0321c!important;
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }

.transition-280 {
    transition: all 280ms;
    -webkit-transition: all 280ms;
    -moz-transition: all 280ms;
    -o-transition: all 280ms;
}

  
.prox-sorteo {
  padding: 70px 0;
  color: white;
  text-align: center;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
}

.prox-sorteo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 1;
}
.prox-sorteo-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 20px;
}

.prox-sorteo h2 {
  font-size: 3.5rem;
  margin-bottom: 3rem;
  color: white;
}
.prox-sorteo h3 {
  color: white;
}
.prox-sorteo h4 {
  color: white;
}
.counter {
  margin: 3rem 0;
}
.contador{
  font-size: 2.5rem; 
  font-weight: bold;
}
.black {
  color: #333940;
}
.premios {
  padding: 50px 0;
  background-color: #ffffff;
}
.premios h2 {
  font-size: 3.5rem;
  margin-bottom: 3rem;
  color: #000000;
  text-align: center;
}
.premios-img {
  height: 800px;
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
}

.premios-button {
  text-align: center;
  margin-top: 3rem;
}

.menores h2 {
  font-size: 3rem;
  margin: 2rem 0;
  text-align: center;
  color: #333940;
}

.age-warning{
  margin: 2rem 0;
  width: 100%;
  height: 400px;       
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  box-sizing: border-box;
  background: transparent;
}

.age-warning__content{
  max-width: 900px;
  width: 100%;
  height: 100%;       
  background: linear-gradient(90deg,#1f2937,#7c2d12);
  color: #fff;
  border-radius: 14px;
  padding: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.age-warning__icon{
  color: #ffd6a5;
  width: 120px;
  height: 120px;
}

.age-warning__text p{
  margin: 0;
}

.age-warning__message{
  font-size: 1.4rem;
}

.age-warning__sub{
  font-size: .95rem;
  opacity: .9;
  margin-top: .4rem;
}


  .mySlider {
  width: 100%;
  padding: 20px 0;
}

.mySlider .swiper-slide {
  border-radius: 14px;
  overflow: hidden;
}

.mySlider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tamaño mínimo para que las cards no se deformen */
.mySlider .swiper-slide {
  min-height: 300px;
}

.ganadores-semanales{
  margin: 4rem 0;
}
.ganadores-semanales h2 {
  font-size: 3.5rem;
  margin: 2rem 0;
  text-align: center;
  color: #333940;
}

.banner-bingo {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  padding: 5rem;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  margin: 5rem 0 ;
}

/* Capa oscura + blur para texto legible */
.bingo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(1px);
}

.bingo-content {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 0 1rem;
  max-width: 700px;
  z-index: 10;
}
.banner-bingo h2 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  color: white;
  line-height: 1;
}
  .banner-bingo h4 {
  font-size: 1.5rem;
  margin: 2rem 0;
  color: white;
}

.faq-bingo {
  margin: 5rem 0;
}

.faq-bingo h2 {
font-size: 3.5rem;
  margin: 2rem 0;
  text-align: center;
  color: #333940;
}


@media (max-width: 650px) {
  .banner-bingo {
    height: 360px;
  }
}


@media (max-width:700px){
  .age-warning__content{
    flex-direction: column;
    padding: 1.5rem;
  }
  .age-warning__icon{
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 991px){
    .hero {
        height: auto;
        overflow: visible;
    }
    .hero-content {
        top: auto;
        left: auto;
        transform: none;
    }
    .rounded-info {
        font-size: 0.65rem;
    }
    .hero-home h1 {
        font-size: 3rem;
        line-height: 3rem;
    }
    .hero-images img {
        max-width: 300px;
    }
    .hero-home h4 {
        font-size: 1rem;
        margin: 2rem 10vh 0 10vh;
    }

    .prox-sorteo h2 {
        font-size: 2.5rem;
    }
    .prox-sorteo h3 {
        font-size: 1.2rem;
    }
    .contador {
        font-size: 1.5rem;
    }
    .premios h2 {
      font-size: 2.5rem;
    }
    .menores h2 {
      font-size: 1.5rem;
    }
    .ganadores-semanales h2 {
      font-size: 2.5rem;
    }
    .banner-bingo h2 {
      font-size: 2.5rem;
    }
    .faq-bingo h2 {
      font-size: 2.5rem;
    }
}


@media (max-width: 767px){
    .hero-home h1 {
        font-size: 3rem;
        line-height: 3rem;
    }
    .button-primary {
        font-size: 1rem;
    }
    .button-secondary {
       font-size: 1rem;
    }
    .hero-home h4 {
        margin: 0 0 0 0;
    }
    .ul-info {
        display: inline;
    }
    .info {
        font-size: 1.2rem;
        margin-top: 1rem;
    }
    .prox-sorteo h2 {
        font-size: 2rem;
    }
    .prox-sorteo h3 {
        font-size: 1rem;
    }
    .counter {
        margin: 2rem 0;
    }
    .prox-sorteo h4 {
        font-size: 1rem;
    }
    .contador {
        font-size: 1rem;
    }
    .premios h2 {
      font-size: 2rem;
    }
    .premios-img {
      height: 500px;
    }
    .ganadores-semanales {
      margin: 2rem 0; 
    }
    .faq-bingo h2 {
        font-size: 1.5rem;
    }
    .banner-bingo h2 {
        font-size: 1.8rem;
    }
    .banner-bingo {
        height: auto;
    }
    .banner-bingo {
        padding: 5rem 1rem;
        margin: 2rem 0;
    }
    .banner-bingo h4 {
        font-size: 1rem;
        margin: 2rem 0;
    }
    .faq-bingo {
        margin: 2rem 0;
    }
    .menores h2 {
        margin: 1rem 0;
    }
}