body{
      background:#f5f5f5;
      font-family: "Noto Sans";
    }

    /* =========================
       HEADER
    ========================== */

    .topbar{
      background:#7a0026;
      padding: 1rem 0;
    }
	  
	  /* BARRA GOB DE MEXICO */
.bar-header {
	background-color: #611332;
	padding: 5px;
}

.logo-Gob {
	height: 50px;
}
	  
.logo-SC {
	height: 80px;
}

.bot-gob {
	color: white;
	font-size: 14px;
	padding: .5rem 1rem!important;
	align-content: center;
}

.bot-gob:hover {
	background-color: #7B3851;
	color: #D4C19B;
}

    .logo-inbal{
      width: 150px;
      background:transparent;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:bold;
      overflow:hidden;
    }

    .logo-inbal img{
      width:100%;
      height:100%;
      object-fit:contain;
    }
	  
	  .sticky {
	position: sticky;
	top: 0;
	z-index: 1020;
}
	  .gray {
  color: #555;
}
	  .rojo {
		  color:#7a0026!important;
	  }

  .red {
		  color:red!important;
	  }

.smaller {
  font-size: 75%;
  color: darkgreen;
}

.grid a {
  color: black!important;
  text-decoration: underline;
}

.grid .link:hover {
  color: #7a0026;
  text-decoration: underline;
}
	  
    .navbar-custom{
      background:#3A0B1F;
    }
	  
    .navbar-custom .nav-link,
    .navbar-custom .dropdown-toggle{
      color: white;
      font-weight:500;
    }

.dropdown-item:hover {
  color: #7a0026;
}

@media (width: 1024px) {
	.navbar-custom .nav-link,
	.navbar-custom .dropdown-toggle{
      max-width: 150px;  
      white-space: normal;  
	  line-height: 1.2;

	  text-align: right;

	  padding-left: .8rem;
	  padding-right: .8rem;
  }
  .navbar-custom .navbar-nav {
		 gap: 1rem;
	  }
}

	  
@media (min-width: 1025px) {
	.navbar-custom .nav-link,
	.navbar-custom .dropdown-toggle{

	  max-width: 180px;     
	  white-space: normal;  
	  line-height: 1.2;

	  text-align: right;

	  padding-left: 1rem;
	  padding-right: 1rem;
		  }
	
	.navbar-custom .navbar-nav {
		 gap: 1.7rem;
	  }
	  }
	
    .navbar-custom .nav-link:hover,
    .navbar-custom .dropdown-toggle:hover{
      color:#ffd9e6;
    }
	
	  .navbar-custom .nav-link.show,
.navbar-custom .dropdown-toggle.show{
  color:#ffd9e6 !important;
}

    /* =========================
       HERO
    ========================== */

    .hero{
      background:url('../images/zarraga.jpg') center/cover;
      min-height:400px;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .hero::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.45);
    }

    .hero-content{
      position:relative;
      z-index:2;
      text-align:center;
      color:white;
    }

    .hero-title{
		font-family: "Raleway";
      font-size:clamp(2rem, 5vw, 4rem);
      font-weight:700;
      margin-bottom:.5rem;
    }

    /* =========================
       TARJETAS
    ========================== */

    .activity-card{
      border:none;
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 8px 25px rgba(0,0,0,.08);
      transition:.3s ease;
      height:100%;
      cursor: pointer;
    }

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

    .activity-card img{
      height:240px;
      object-fit:cover;
    }

    .museum{
      font-size:.95rem;
      font-weight:700;
      color:#7a0026;
      margin-bottom:.4rem;
    }

    .activity-title{
      font-style:italic;
      font-size:1.2rem;
      color:#222;
      text-decoration:none;
      transition:.2s;
      display:inline-block;
      margin-bottom:.8rem;
    }

    .activity-card:hover .activity-title{
      text-decoration:underline;
    }

    .activity-date{
      color:#555;
      font-size:.95rem;
    }

.card-ruta {
  background-color: white;
    border:none;
    border-radius: 15px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    height:auto;
}

.card-ruta img{
      height:240px;
      width: 100%;
      object-fit:cover;
      object-position: top;
     
    }

  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }

@media (max-width: 512px) {
  .grid, .grid-3 {
    grid-template-columns: 1fr;
  }
}

    /* =========================
       MODAL
    ========================== */

    .modal-content{
      border-radius:22px;
      overflow:hidden;
      border:none;
    }

    .modal-image{
      width:100%;
      height:320px;
      object-fit:cover;
    }
	
.custom-close{
  background-color: black;
  border-radius: 25px;
  padding: .8rem;
  opacity: 1;
  background-size: 14px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293A1 1 0 01.293 14.293L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
transition: all 0.3s ease 0s;
	  }

.custom-close:hover{
  filter: invert(1);
  opacity: 1;
}
	  
.map-container{
  height: 200px;
}

.map-container iframe{
  width:100%;
  height:100%;
  border:0;
}