.section-movies {
  /* Para el hover: Permite posicionarlo libremente. */
  /* hijo: position: absolute; */
  position: relative;
  background-image:
  linear-gradient(
    0deg,
    rgba(28, 32, 43, 0) 83%, 
    rgba(28, 32, 43, .8) 97%, 
    rgba(28, 32, 43, 1) 100%),
  linear-gradient(
    180deg,
    rgba(28, 32, 43, 0) 55%, 
    rgba(28, 32, 43, 1) 80%, 
    rgba(28, 32, 43, 1) 100%),

  
  url("/images/jurassic2.jpg"
  );
  background-size: cover;   
  background-position: top;     
  background-repeat: no-repeat;
  
  /*::before  crea un pseudo-elemento que se dibuja antes del contenido real del elemento */
  /* capa extra encima del elemento */
  &::before {
    /* content: Obligatorio para que ::before exista. */
    content: "";

    /* Permite posicionarlo libremente. */
    /* padre debe tener: position: relative; */
    position: absolute;

    /* Hace que el pseudo-elemento ocupe todo el tamaño del elemento padre. */
    inset: 0;

    /* poner la misma configuración que en el padre, para que encajen las capas: */
    background-image: url("/images/jurassic3Light.png"
    );
    background-size: cover;   
    background-position: top;     
    background-repeat: no-repeat;
    
    /*Invisible al inicio. */
    opacity: 0;

    /* El cambio de opoacidad será suave: 
    Durará 0.3 segundos
    Con animación lineal (misma velocidad todo el tiempo) */
    transition: opacity 0.3s linear;
    pointer-events: none;
  }

  /* Cuando el elemento padre recibe hover */
  /* es decir, cuando pasa el ratón por encima: */
  &:hover::before {
    /* cambia la opacidad */
    opacity: .6;
  }

  h1 {
    color: var(--white-color);
    font-size: 5rem;

    @media (width <= 576px) {
      font-size: 2.7rem;
    }
  }
  
  article {
    height: 92vh;
  }

  .join-btn {
    inline-size: 5.7rem;
    block-size: 9rem;
    background-image: url("/images/popcorn.png");
    background-size: contain;     
    background-repeat: no-repeat;
    .btn {
      line-height: 1.2;
      margin: 4.7rem .9rem;
      color: var(--black-color);
      /* background-color: var(--white-color); */
      font-size: 16px;
      font-weight: bold;

      &:hover {
        color: var(--yellow-color);
      } 
    }

    &:hover {
        transform: scale(1.1);
      } 
  }
}



.section-addict {
  .card {
    background-color: var(--white-color);
    max-width: 20rem;
    min-height: 32rem;
    border-radius: 0;
    padding: 1rem;
    box-shadow: -4px 4px 0 3px var(--red-color);
    /* border: 1px solid var(--yellow-color); */

    
    .card-title{
      color: var(--black-color);
    }

    .btn {
      background-color: var(--white-color);
      --bs-btn-hover-border-color: #c6b604;
      color: var(--red-color);
      font-weight: bold;
    }
    .card-img-top {
      border-radius: 0;
      max-height: 16rem;
      object-fit: cover;
    }
  }
}