/* ==================================
   PORTADA PRINCIPAL
================================== */

.portada-home {

    width: 100%;
    min-height: 650px;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 20%,
            rgba(255,255,255,.15) 45%,
            rgba(255,255,255,.90) 75%,
            rgba(255,255,255,.98) 100%
        ),
        url("../img/portada.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.portada-contenido {
  min-height: 650px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.portada-texto {
  width: 620px;
  max-width: 100%;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  text-align: right;
}

.portada-texto h1 {
  margin: 0;

  color: var(--negro);

  font-size: clamp(25px, 3vw, 46px);
  font-weight: 400;

  line-height: 1.35;
}

.portada-texto strong {
  color: var(--verde-principal);
  font-weight: 900;
  font-style: italic;
}
.portada-texto strong {
  display: inline;

  color: var(--verde-principal);

  font-weight: 900;
  font-style: italic;
}

/* BOTÓN DE REGISTRO */

.boton-registro {
  min-width: 315px;
  min-height: 64px;

  margin-top: 42px;
  padding: 15px 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 3px solid var(--verde-principal);

  color: var(--verde-principal);
  background-color: rgba(255, 255, 255, 0.35);

  font-size: 17px;
  font-weight: 900;

  text-transform: uppercase;

  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.boton-registro:hover {
  color: var(--blanco);
  background-color: var(--verde-principal);
}

/* ==================================
   IMPORTANCIA DEL RECICLAJE
================================== */

.importancia {
  width: 100%;

  padding: 70px 0 75px;

  background-color: var(--blanco);
}

.importancia-contenido {
  display: grid;

  grid-template-columns: 1fr 1.05fr;

  gap: 90px;

  align-items: center;
}

.importancia-texto {
  padding-left: 30px;

  color: var(--negro);

  font-size: 20px;
  line-height: 1.25;

  text-align: justify;
}

.importancia-texto p + p {
  margin-top: 3px;
}

.importancia-imagen img {
  width: 100%;
  height: 330px;

  object-fit: cover;
}

/* ==================================
   PREGUNTAS FRECUENTES
================================== */

.preguntas-frecuentes {
  width: 100%;

  padding: 45px 0 60px;

  color: var(--blanco);
  background-color: var(--verde-principal);
}

.preguntas-frecuentes .titulo-seccion {
  margin-bottom: 32px;
}

.preguntas-contenido {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px 55px;
}

.pregunta h3 {
  padding: 9px 12px;

  color: var(--blanco);
  background-color: var(--verde-oscuro);

  font-size: 15px;
  font-weight: 800;
}

.pregunta p {
  padding: 8px 12px 0;

  color: var(--crema);

  font-size: 14px;
  line-height: 1.25;

  text-align: left;
}

/* ==================================
   RESPONSIVE PARA TABLET
================================== */

@media (max-width: 950px) {

  .portada-home {
    min-height: 560px;

    background-image:
      linear-gradient(
        rgba(255, 255, 255, 0.72),
        rgba(255, 255, 255, 0.72)
      ),
      url("../img/home/portada-home.jpg");

    background-position: center;
  }

  .portada-contenido {
    justify-content: flex-start;
  }

  .portada-texto {
    width: min(650px, 100%);

    align-items: flex-start;

    text-align: left;
  }

  .importancia-contenido {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .importancia-texto {
    padding-left: 0;
  }

  .importancia-imagen img {
    height: auto;
  }

  .preguntas-contenido {
    grid-template-columns: 1fr;
  }

}

/* ==================================
   RESPONSIVE PARA CELULAR
================================== */

@media (max-width: 600px) {

  .portada-home {
    min-height: 500px;
    padding: 60px 0;
  }

  .portada-texto h1 {
    font-size: 37px;
  }

  .boton-registro {
    width: 100%;
    min-width: 0;

    margin-top: 30px;

    font-size: 15px;
  }

  .importancia {
    padding: 55px 0;
  }

  .importancia-texto {
    font-size: 17px;
  }

  .preguntas-frecuentes {
    padding: 50px 0;
  }

  .pregunta h3 {
    font-size: 14px;
  }

  .pregunta p {
    font-size: 13px;
  }

}