body{
  margin:0;
  font-family: Arial, sans-serif;
  background:#f4f4f4;
}

/* NAV */
nav{
  display:flex;
  justify-content:center;
  background:#000;
  padding:15px 0;
  position:fixed;
  width:100%;
  top:0;
  z-index:9999;
  box-shadow:0 2px 5px rgba(0,0,0,0.15);
}

nav ul{
  list-style:none;
  display:flex;
  gap:25px;
  align-items:center;
  margin:0;
  padding:0;
  flex-wrap:wrap;
  justify-content:center;
}

nav a{
  text-decoration:none;
  font-size:18px;
  color:#fff;
}

/* BUSCADOR */
.search-box input{
  padding:7px 10px;
  border-radius:5px;
  border:1px solid #ccc;
  width:150px;
  font-size:14px;
}
.search-box input:focus{outline:none;border-color:#000;}

/* HERO */
.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-top:60px;
  color:white;
  font-size:40px;
  font-weight:bold;
  background-size:cover;
  background-position:center;
}

/* CONTACTO: buscador grande */
.contacto-page .search-box input{
  width:400px;
  font-size:16px;
  padding:8px 14px;
}

@media(max-width:768px){
  nav ul{flex-direction:column;gap:10px;}
  .search-box input{width:90%;max-width:260px;}
  .contacto-page .search-box input{width:95%;max-width:320px;}
}


/* ==========================
   RESPONSIVE – CELULAR
========================== */
@media (max-width: 768px) {

    /* CONTENEDOR GENERAL */
    body {
        overflow-x: hidden;
    }

    /* IMÁGENES EN GENERAL */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* IMAGEN DE BIENVENIDA / BANNER */
    .hero img,
    .bienvenida img {
        width: 100%;
        max-height: 220px;
        object-fit: cover;
        border-radius: 8px;
    }

    /* TARJETAS (cafeterías, restaurantes, etc.) */
    .card img,
    .categoria img,
    .lugar img {
        width: 100%;
        max-height: 180px;
        object-fit: cover;
        border-radius: 10px;
    }

    /* SEPARACIÓN ENTRE SECCIONES */
    section {
        padding: 20px 15px;
    }

    /* TEXTOS */
    h1 {
        font-size: 26px;
        text-align: center;
    }

    h2 {
        font-size: 20px;
    }

    p {
        font-size: 15px;
        line-height: 1.6;
    }
}

.redes {
    display: flex;
    gap: 14px;
    margin-top: 15px;
}

.redes a img {
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease;
}

.redes a img:hover {
    transform: scale(1.15);
}

.redes {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.redes img {
    width: 28px;
    height: 28px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.redes a:hover img {
    transform: scale(1.15);
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
    .redes {
        justify-content: center;
    }
}