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

.portada-puntos {
  width: 100%;
  min-height: 560px;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.15)
    ),
    url("../img/Persona entregando reciclaje.png");

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

.portada-contenido-puntos {
  min-height: 560px;

  display: flex;
  align-items: center;
}

.texto-portada-puntos {
  width: 650px;
  max-width: 100%;
}

.texto-portada-puntos h1 {
  color: var(--blanco);

  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 1.25;
}

.texto-portada-puntos strong {
  display: block;

  color: #79ef7e;

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

/* ==================================
   SECCIÓN GENERAL
================================== */

.seccion-puntos {
  width: 100%;

  padding: 65px 0 80px;

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

.contenedor-puntos {
  width: 100%;

  padding: 48px 45px;

  border-radius: 45px;

  background-color: #edf8ee;
}

.titulo-puntos {
  margin-bottom: 35px;

  color: var(--verde-principal);

  font-size: clamp(30px, 4vw, 44px);
  font-weight: 900;

  text-align: center;
  text-transform: uppercase;
}

/* ==================================
   BUSCADOR
================================== */

.buscador-contenedor {
  width: min(720px, 100%);

  margin: 0 auto 35px;

  display: flex;
  align-items: center;

  position: relative;
}

.icono-busqueda {
  position: absolute;

  top: 50%;
  left: 18px;

  transform: translateY(-50%);

  z-index: 3;

  font-size: 16px;

  pointer-events: none;
}

.buscador-sector {
  width: 100%;
  height: 52px;

  padding: 0 115px 0 50px;

  border: none;
  border-radius: 40px;

  color: #ffffff;
  background-color: var(--verde-principal);

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

  outline: none;
}

.buscador-sector::placeholder {
  color: #d6e7d8;
}

.buscador-sector:focus {
  box-shadow: 0 0 0 4px rgba(140, 175, 125, 0.3);
}

.boton-buscar {
  height: 40px;

  padding: 0 20px;

  position: absolute;
  right: 6px;

  border: none;
  border-radius: 25px;

  color: var(--verde-principal);
  background-color: #ffffff;

  font-weight: 800;

  cursor: pointer;
}

.boton-buscar:hover {
  background-color: #dcebdc;
}

/* ==================================
   SUGERENCIAS
================================== */

.menu-sectores {
  width: 100%;

  display: none;

  position: absolute;

  top: calc(100% + 8px);
  left: 0;

  z-index: 100;

  border-radius: 14px;

  overflow: hidden;

  background-color: #ffffff;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.menu-sectores.activo {
  display: block;
}

.opcion-sector {
  width: 100%;

  padding: 15px 20px;

  border: none;

  color: var(--verde-principal);
  background-color: #ffffff;

  font-size: 15px;
  font-weight: 800;
  text-align: left;

  cursor: pointer;
}

.opcion-sector:hover {
  background-color: #e8f3e9;
}

.opcion-sector[hidden] {
  display: none;
}

/* ==================================
   MENSAJE DE ERROR
================================== */

.mensaje-sin-resultados {
  margin: 0 0 25px;
  padding: 18px;

  border-radius: 15px;

  color: var(--verde-principal);
  background-color: #ffffff;

  font-weight: 700;
  text-align: center;
}

.mensaje-sin-resultados[hidden] {
  display: none;
}

/* ==================================
   MAPA
================================== */

.mapa-contenedor {
  width: 100%;
  height: 480px;

  border: 2px solid var(--verde-principal);
  border-radius: 28px;

  overflow: hidden;

  background-color: #dcebdc;
}

#mapa-recoleccion {
  display: block;

  width: 100%;
  height: 100%;

  border: none;
}

/* ==================================
   PANEL DESPLEGABLE
================================== */

.panel-sector {
  width: 100%;

  margin-top: 25px;

  border-radius: 28px;

  overflow: hidden;

  color: #ffffff;
  background-color: var(--verde-principal);
}

.panel-sector[hidden] {
  display: none;
}

.encabezado-sector {
  width: 100%;

  padding: 15px 22px;

  border: none;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #ffffff;
  background-color: #285732;

  font-size: 17px;
  font-weight: 900;
  text-align: left;

  cursor: pointer;
}

.encabezado-sector:hover {
  background-color: #204829;
}

.flecha-sector {
  display: inline-block;

  transition: transform 0.3s ease;
}

.flecha-sector.abierta {
  transform: rotate(180deg);
}

/* CONTENIDO CERRADO */

.contenido-sector {
  max-height: 0;

  padding: 0 35px;

  overflow: hidden;

  opacity: 0;

  transition:
    max-height 0.45s ease,
    padding 0.35s ease,
    opacity 0.3s ease;
}

/* CONTENIDO ABIERTO */

.contenido-sector.abierto {
  max-height: 650px;

  padding: 25px 35px 35px;

  opacity: 1;
}

.subtitulo-puntos {
  margin-bottom: 25px;

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

.lista-puntos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 30px;
}

.tarjeta-punto {
  text-align: center;
}

.direccion-punto {
  min-height: 45px;

  margin-bottom: 12px;

  font-size: 14px;
  font-weight: 600;
}

.tarjeta-punto img {
  display: block;

  width: 90px;
  height: 90px;

  margin: 0 auto 14px;

  object-fit: contain;
}

.tarjeta-punto h3 {
  color: #ffffff;

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

/* ==================================
   TABLET
================================== */

@media (max-width: 900px) {

  .portada-puntos,
  .portada-contenido-puntos {
    min-height: 500px;
  }

  .contenedor-puntos {
    padding: 38px 28px;
  }

  .mapa-contenedor {
    height: 380px;
  }

  .lista-puntos {
    grid-template-columns: 1fr;
  }

  .contenido-sector.abierto {
    max-height: 1200px;
  }

  .direccion-punto {
    min-height: auto;
  }

}

/* ==================================
   CELULAR
================================== */

@media (max-width: 600px) {

  .portada-puntos,
  .portada-contenido-puntos {
    min-height: 440px;
  }

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

  .seccion-puntos {
    padding: 45px 0;
  }

  .contenedor-puntos {
    padding: 28px 18px;

    border-radius: 28px;
  }

  .titulo-puntos {
    font-size: 28px;
  }

  .buscador-sector {
    padding-right: 100px;
  }

  .boton-buscar {
    padding: 0 14px;
  }

  .mapa-contenedor {
    height: 320px;

    border-radius: 18px;
  }

  .panel-sector {
    border-radius: 20px;
  }

  .contenido-sector.abierto {
    max-height: 1300px;

    padding: 22px 18px 30px;
  }

}