body {
    margin: 0;
    padding: 0;
}
#map {
    width: 100%;
    height: 700px;
}
#menu{
    background: #000;
}

div.leaflet-popup-content img{
    width: 150px;
    height: 160px;
    overflow: hidden;
    object-fit: cover;
    border-radius: 6px;
}




/* Breadcrumb */
.breadcrumb {
  background: #eee;
  padding: 10px 20px;
  font-size: 14px;
}

.breadcrumb a {
  color: #555;
  text-decoration: none;
}


/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Contenedor principal */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Barra de búsqueda */
.search-bar {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}

.search-input-container {
  display: flex;
  max-width: 500px;
  gap: 10px;
}

.search-input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  outline: none;
}

.search-input:focus {
  border-color: #1c0f23;
}

.search-button {
  background: #99059b;
  color: #fff;
  border: none;
  padding: 0 18px;
  border-radius: 6px;
  cursor: pointer;
}

.search-button:hover {
  background: #1c0f23;
}

/* Layout principal */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  border-radius: 50px;
}

/* Sidebar */
.sidebar {
  width: 340px;
  background: #fff;
  border-right: 1px solid #e5e5e5;
  overflow-y: auto;
  padding: 12px;
}

.results-count {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

/* Tarjetas */
.location-card {
  display: flex;
  gap: 12px;
  padding: 0px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.location-card:hover {
  background: #f7f7f7;
}

.card-image img {
  width: 180px;
  height: 165px;
  object-fit: cover;
  border-radius: 6px;
}

.card-info {
  flex: 1;
}

.card-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.card-status {
  font-size: 13px;
  margin-bottom: 6px;
}

.closed {
  color: #d93025;
  font-weight: bold;
  margin-right: 5px;
}

.opens {
  color: #777;
}

.card-address,
.card-phone,
.card-website {
  font-size: 13px;
  color: #555;
  /* margin-bottom: 2px; */
}

/* Mapa */
.map-container {
  flex: 1;
  position: relative;
  background: #dfeaf3;
}

/* Simulación del mapa */
.map {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Marcadores */
.map-markers {
  position: absolute;
  width: 100%;
  height: 100%;
}

.marker {
  width: 22px;
  height: 22px;
  background: #00a86b;
  border-radius: 50%;
  position: absolute;
}

/* Posiciones ejemplo */
.marker:nth-child(1) {
  top: 40%;
  left: 60%;
}

.marker:nth-child(2) {
  top: 55%;
  left: 70%;
}

.marker:nth-child(3) {
  top: 65%;
  left: 65%;
}

/* Toolbar flotante */
.map-toolbar {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}

.filter-button {
  background: #fff;
  border: 1px solid #ddd;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.filter-button:hover {
  background: #f3f3f3;
}

/* Controles de zoom */
.map-controls {
  position: absolute;
  right: 15px;
  top: 20px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.map-controls button {
  background: #fff;
  border: 1px solid #ddd;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 18px;
}

.map-controls button:first-child {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

.map-controls button:last-child {
  border-radius: 0 0 6px 6px;
}

.map-controls button:hover {
  background: #f3f3f3;
}

/* CARRUSEL */
.carousel {
  position: relative;
  overflow: hidden;
  height: 400px;
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  position: relative;
}

.slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  filter: brightness(70%);
}

.text h1 {
  font-size: 40px;
  margin: 10px 0;
}

button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

/* CATEGORÍAS */
.categories {
  display: flex;
  justify-content: space-around;
  background: #eee;
  padding: 20px 0;
}

.category {
  text-align: center;
}

.category img {
  width: 80px;
  height: auto;
}

.category p {
  margin-top: 10px;
  font-weight: bold;
}

.about {
  padding: 1px 8%;
}

.card-title-map{
  color: #000;
}

.card-status{
  color: #000;
}

/* PARTE SUPERIOR */
.top {
  text-align: center;
  margin-bottom: 60px;
}

.top h1 {
  font-size: 36px;
  font-weight: 700;
  max-width: 800px;
  margin: 0 auto 15px;
}

.top p {
  color: #666;
  font-size: 16px;
}

/* PARTE INFERIOR */
.bottom {
  display: flex;
  align-items: center;
  gap: 60px;
}

.text-title {
  position: absolute;
  top: 30%;
  left: 10%;
  color: white;
}

.text {
  width: 70%;
}

/* .text h2 {
  font-size: 24px;
  margin-bottom: 20px;
} */

.text p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: justify;
}

.image {
  width: 30%;
}

.image img {
  width: 70%;
  border-radius: 10px;
  object-fit: cover;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .bottom {
    flex-direction: column;
  }

  .top h1 {
    font-size: 26px;
  }
}

.contacto{
      width:100%;
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:40px;
    }

    .contacto-container{
      width:100%;
      max-width:2000px;
      border-radius:25px;
      padding:0 60px 60px 60px;
    }

    .contacto-title{
      font-size:50px;
      margin-bottom:15px;
    }

    .contacto-text{
      color:black;
      margin-bottom:50px;
      line-height:1.6;
    }

    .contacto-info{
      display:flex;
      flex-direction:column;
      gap:35px;
    }

    .info-item h3{
      font-size:15px;
      color:black;
      margin-bottom:10px;
      text-transform:uppercase;
      letter-spacing:2px;
    }

    .info-item p,
    .info-item a{
      font-size:24px;
      color:black;
      text-decoration:none;
      transition:0.3s;
    }

    .info-item a:hover{
      color:#b3b3b3;
    }

    /* Redes */

    .sociales{
      display:flex;
      gap:20px;
      margin-top:10px;
    }

    .sociales a{
      width:60px;
      height:60px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      background:#111;
      border:1px solid #333;
      color:white;
      font-size:24px;
      transition:0.3s;
    }

    .sociales a:hover{
      background:white;
      color:black;
      transform:translateY(-5px);
    }

    @media(max-width:768px){

      .contacto-container{
        padding:40px 25px;
      }

      .contacto-title{
        font-size:38px;
      }

      .info-item p,
      .info-item a{
        font-size:18px;
      }

      .sociales a{
        width:50px;
        height:50px;
        font-size:20px;
      }

    }

    

.footer {
  background: #1f0051;
  color: #fff;
  padding: 50px 40px 20px;
  font-family: Arial, sans-serif;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.footer-col h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.footer-col a {
  display: block;
  color: #ddd;
  text-decoration: none;
  margin-bottom: 8px;
  font-size: 14px;
}

.footer-col a:hover {
  color: #6501ad;
}

/* Newsletter */
.newsletter p {
  font-size: 14px;
  margin-bottom: 15px;
  color: #ccc;
}

.subscribe-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.subscribe-box input {
  padding: 10px 15px;
  border-radius: 25px;
  border: none;
  flex: 1;
}

.subscribe-box button {
  padding: 10px 20px;
  border-radius: 25px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.subscribe-box button:hover {
  background: #00d084;
  border-color: #00d084;
}

/* Social icons */
.socials span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #2a3b38;
  margin-right: 10px;
  cursor: pointer;
}

/* Bottom */
.footer-bottom {
  margin-top: 40px;
  font-size: 12px;
  color: #bbb;
}

.footer-bottom a {
  color: #00d084;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-container {
    grid-template-columns: 1fr;
  }
}


    .products{
      width:100%;
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
      gap:30px;
    }

    .card{
      position:relative;
      background:white;
      overflow:hidden;
      transition:0.3s;
    }

    .card:hover{
      transform:translateY(-5px);
    }

    .wishlist{
      position:absolute;
      top:15px;
      right:15px;
      width:42px;
      height:42px;
      border-radius:50%;
      background:white;
      border:1px solid #ddd;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      z-index:2;
      transition:0.3s;
    }

    .wishlist:hover{
      background:black;
      color:white;
    }

    .image-box{
      width:100%;
      height:320px;
      background:#ededed;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .image-box img{
      width:100%;
      height:100%;
      object-fit:contain;
      transition:0.4s;
    }

    .card:hover img{
      transform:scale(1.05);
    }

    .content{
      padding:18px 10px;
      display:flex;
      justify-content:space-between;
      gap:15px;
    }

    .title{
      font-size:16px;
      line-height:1.6;
      font-weight:600;
      color:#111;
      max-width:80%;
    }

    .price{
      font-size:20px;
      color:#111;
      white-space:nowrap;
    }

    @media(max-width:768px){

      body{
        padding:20px;
      }

      .image-box{
        height:250px;
      }

    }