@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");



html,

body {

  font-family: "Montserrat", sans-serif;

}



/* Estilos base */

:root {

  --primary-color: #2c3e50;

  --secondary-color: #e74c3c;

  --light-color: #ecf0f1;

  --dark-color: #2c3e50;

}



body {

  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;

  color: #333;

  line-height: 1.6;

  padding-top: 0;

}



/* Navbar mejorada */

.navbar-custom {

  background-color: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(10px);

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  transition: all 0.3s ease;

}



.navbar-custom .navbar-brand {

  font-weight: 600;

  color: var(--primary-color);

}



.navbar-custom .nav-link {

  color: var(--dark-color);

  font-weight: 500;

  margin: 0 5px;

  position: relative;

}



.navbar-custom .nav-link:hover,

.navbar-custom .nav-link:focus {

  color: var(--secondary-color);

}



.navbar-custom .nav-link::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 2px;

  background-color: var(--secondary-color);

  transition: width 0.3s ease;

}



.navbar-custom .nav-link:hover::after,

.navbar-custom .nav-link:focus::after {

  width: 100%;

}



.navbar-custom .nav-link.active {

  color: var(--secondary-color);

  font-weight: 600;

}



/* Secciones hero con imagen completa */

.section-img {

  position: relative;

  width: 100%;

  margin: 0;

  padding: 0;

  background-color: #f8f9fa;

  overflow: hidden;

}



/* En móvil, se controla la altura vía imagen */

.section-img img {

  display: block;

  width: 100%;

  height: auto;

  margin: 0;

  padding: 0;

  object-fit: cover;

}



.img-container {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.section-img img {

  width: 100%;

  height: auto;

  max-height: 100vh;

  object-fit: contain;

}



/* Para las imágenes del grid */

.img-container-grid {

  height: 200px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #ffffff;

}



.img-container-grid img {

  width: 100%;

  height: auto;

  max-height: 200px;

  object-fit: contain;

}



/* Overlay */

.hero-overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);

  color: white;

  padding: 1.5rem;

  text-align: center;

}



.hero-overlay h2 {

  font-size: 2rem;

  font-weight: 700;

  margin-bottom: 1rem;

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

}



.hero-overlay p {

  font-size: 1rem;

  margin-bottom: 1.5rem;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

}



/* Cards */

.card {

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  border-radius: 8px;

}



.card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;

}



.card-img-top {

  border-radius: 8px 8px 0 0;

  padding: 10%;

}



/* Botones */

.btn {

  border-radius: 50px;

  padding: 0.5rem 1.5rem;

  font-weight: 500;

  transition: all 0.3s ease;

}



.btn-outline-light:hover {

  background-color: rgba(255, 255, 255, 0.2);

}



.btn-primary {

  background-color: var(--secondary-color);

  border-color: var(--secondary-color);

}



.btn-primary:hover {

  background-color: #c0392b;

  border-color: #c0392b;

}



/* Footer */

footer {

  background-color: var(--dark-color);

}



footer a {

  text-decoration: none;

  transition: color 0.3s ease;

}



footer a:hover {

  color: var(--secondary-color) !important;

}

.footer-custom {

  background-color: #831942; /* mismo tinto que usas */

  color: #fff;

  padding-bottom: 2rem;

}



.footer-logo {

  max-width: 180px;

  height: auto;

}



.footer-links {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 1.2rem;

}



.footer-links a {

  color: #f9c84b;

  text-decoration: none;

  font-weight: 600;

  transition: color 0.3s ease;

  font-size: 0.95rem;

}



.footer-links a:hover {

  color: #fff;

}



.footer-links .haz-click {

  display: block;

  font-size: 0.75rem;

  font-weight: 400;

  color: #fff;

}



/* Responsive */

/* Ajuste específico para las secciones principales en móvil */

@media (max-width: 767.98px) {

  /* Reducir espacio entre secciones específicas */

  #cultura,

  #sabor,

  #aventura,

  #nayarit,

  #rutas {

    margin-bottom: 0.2rem !important; /* Espacio mínimo entre secciones */

    min-height: auto;

    max-height: none;

  }



  /* Ajustar altura de las secciones */

  .section-img {

    min-height: 55vh; /* Altura más compacta */

    max-height: 65vh; /* Límite máximo */

  }



  /* Overlay más compacto */

  .hero-overlay {

    padding: 0.8rem;

    bottom: 0;

  }



  /* Textos más ajustados */

  .hero-overlay h2 {

    font-size: 1.4rem;

    margin-bottom: 0.3rem;

    line-height: 1.3;

  }



  .hero-overlay p {

    font-size: 0.8rem;

    margin-bottom: 0.8rem;

    line-height: 1.2;

    display: -webkit-box;

    -webkit-line-clamp: 2; /* Limitar a 2 líneas */

    -webkit-box-orient: vertical;

    overflow: hidden;

  }



  /* Botón más pequeño */

  .btn-outline-light {

    padding: 0.3rem 0.8rem;

    font-size: 0.8rem;

  }

}

/* Evitar márgenes y paddings verticales innecesarios en secciones principales */

.section-img,

.hero-section {

  margin: 0;

  padding: 0;

}



/* Eliminar espacio entre imágenes (móviles) */

.hero-section + .hero-section,

.section-img + .section-img {

  margin-top: 0;

}



/* Si hay espacio por AOS o Bootstrap */

.img-container,

.img-container img {

  display: block;

  margin: 0;

  padding: 0;

}



/* Opcional: quitar margen inferior del overlay si hay */

.hero-overlay {

  margin-bottom: 0;

}



/* Extra: evitar <p> que agregan margen por defecto */

.hero-overlay p {

  margin-bottom: 0.25rem;

}

/* Botón que envuelve la imagen */

/* Botón con efecto de escala */

.img-button {

  display: block;

  position: relative;

  border: none;

  padding: 0;

  margin: 0;

  background: none;

  width: 100%;

  overflow: hidden;

  transition: transform 0.3s ease;

}



.img-button:hover,

.img-button:focus {

  transform: scale(1.02);

}



.img-button img {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

}



/* Texto overlay por defecto (para PC) */

.hero-info {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);

  color: white;

  padding: 1rem;

  text-align: left;

  z-index: 1;

}



.hero-info h2 {

  font-size: 1.5rem;

  font-weight: 700;

  margin-bottom: 0.3rem;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

}



.hero-info p {

  font-size: 1rem;

  margin: 0;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

}



/* En móvil: texto debajo */

@media (max-width: 767.98px) {

  .hero-info {

    position: static;

    background: #fff;

    color: #222;

    text-shadow: none;

    padding: 0.8rem 1rem;

  }



  .hero-info h2 {

    font-size: 1.2rem;

    color: var(--primary-color);

  }



  .hero-info p {

    font-size: 0.9rem;

    color: #555;

  }

}

/* Ícono encima de la imagen tipo overlay */

.img-icon {

  position: absolute;

  top: 12px;

  right: 12px;

  font-size: 1.5rem;

  background-color: rgba(255, 255, 255, 0.85);

  padding: 4px 8px;

  border-radius: 999px;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

  transition: opacity 0.3s ease;

  opacity: 0;

  z-index: 2;

}



/* Mostrar ícono al pasar el mouse */

.img-button:hover .img-icon {

  opacity: 1;

}



/* En móvil: siempre visible */

@media (max-width: 767.98px) {

  .img-icon {

    opacity: 1;

  }

}

/* Ajustes base del navbar */

.navbar-custom {

  background-color: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(10px);

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  z-index: 1000;

}



.navbar-custom .navbar-brand {

  font-weight: 600;

  color: var(--primary-color);

}



.navbar-custom .nav-link {

  color: var(--dark-color);

  font-weight: 500;

  margin: 0 6px;

  position: relative;

}



.navbar-custom .nav-link:hover,

.navbar-custom .nav-link:focus {

  color: var(--secondary-color);

}



.navbar-custom .nav-link.active {

  color: var(--secondary-color);

  font-weight: 600;

}



/* Dropdown */

.navbar-custom .dropdown-menu {

  background-color: #fff;

  border: 1px solid #eee;

  border-radius: 6px;

  padding: 0.5rem 0;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  margin-top: 0.4rem;

  animation: fadeIn 0.2s ease-in-out;

}



.navbar-custom .dropdown-item {

  padding: 0.5rem 1rem;

  color: var(--dark-color);

  font-size: 0.95rem;

}



.navbar-custom .dropdown-item:hover,

.navbar-custom .dropdown-item:focus {

  background-color: var(--light-color);

  color: var(--secondary-color);

}



@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(4px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Mobile: mejorar espaciado en colapsado */

@media (max-width: 991.98px) {

  .navbar-custom .dropdown-menu {

    position: static;

    float: none;

    box-shadow: none;

    border: none;

    background: transparent;

  }



  .navbar-custom .dropdown-item {

    padding-left: 2rem;

    font-size: 1rem;

  }



  .navbar-custom .dropdown-item:hover {

    background-color: transparent;

    color: var(--secondary-color);

  }

}



/* Encabezado con imagen completa y responsivo */

.encabezado-img {

  background-image: url("https://app.tepic.gob.mx/web/sonrie/img/navbar.jpg");

  background-size: cover;

  background-position: center;

  height: 200px;

  position: relative;

}



/* Texto opcional sobre la imagen (si deseas mostrar algo) */

.encabezado-img h1 {

  color: white;

  font-size: 1.8rem;

  font-weight: 700;

  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);

  margin: 0;

}



/* Para pantallas pequeñas */

@media (max-width: 767.98px) {

  .encabezado-img {

    height: 160px;

    padding: 0.5rem;

  }



  .encabezado-img h1 {

    font-size: 1.4rem;

  }

}



/* Botón flotante arriba a la derecha */

.menu-toggle {

  position: fixed; /* antes estaba absolute */

  top: 1rem;

  right: 1rem;

  z-index: 850; /* más alto que navbar y offcanvas */

  border-radius: 50%;

  width: 44px;

  height: 44px;

  padding: 0;

  font-size: 1.4rem;

  background-color: rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(8px);

  border: 1px solid #ccc;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

}



.btn-ver-mas {

  position: absolute;

  bottom: 1rem;

  right: 4rem;

  background-color: #870038; /* color tinto */

  color: #fff; /* texto blanco */

  padding: 0.4rem 1rem;

  font-size: 0.9rem;

  border-radius: 999px;

  font-weight: bold;

  z-index: 2;

  display: none; /* solo visible en móvil */

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

  border: none;

  transition: all 0.2s ease;

}



.btn-ver-mas:hover {

  background-color: #a30045; /* más claro al pasar el mouse */

  color: #fff;

}



@media (max-width: 767.98px) {

  .btn-ver-mas {

    display: inline-block;

  }

}



.btn-regresar {

  position: fixed;

  bottom: 1.5rem;

  right: 1.5rem;

  z-index: 999;

  padding: 0.4rem 1rem;

  font-size: 0.85rem;

  font-weight: 500;

  color: white;

  background-color: #2c3e50;

  border-radius: 30px;

  text-decoration: none;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  transition: all 0.3s ease;

}



.btn-regresar:hover {

  background-color: #e74c3c;

  color: white;

}

.img-button {

  transition: transform 0.3s ease, filter 0.3s ease;

}



.img-button:active {

  transform: scale(0.97);

  filter: brightness(0.85);

}



/* Estilo general para el offcanvas */

.offcanvas {

  background: rgba(0, 0, 0, 0.6); /* fondo oscuro traslúcido */

  backdrop-filter: blur(12px); /* desenfoque moderno */

  color: white;

  max-width: 300px; /* ancho más amigable en móvil */

  border-left: 1px solid rgba(255, 255, 255, 0.1);

}



/* Título del menú */

.offcanvas .offcanvas-title {

  color: #fff;

  font-weight: bold;

}



/* Botón de cerrar (X) blanco */

.offcanvas .btn-close {

  filter: invert(1);

}



/* Enlaces del menú */

.offcanvas a {

  color: #fff;

  text-decoration: none;

  display: block;

  padding: 0.4rem 0;

  font-weight: 500;

  transition: color 0.2s ease;

}



.offcanvas a:hover {

  color: #f9c84b; /* amarillo suave */

  text-decoration: underline;

}



/* Subtítulos como "Directorio Turístico", etc. */

.offcanvas ul > li > strong {

  display: block;

  margin: 1rem 0 0.3rem;

  font-size: 1rem;

  color: #f0f0f0;

}



/* Separadores */

.offcanvas hr {

  border-color: rgba(255, 255, 255, 0.2);

}



/* Tamaño y espaciado en móviles */

@media (max-width: 767.98px) {

  .offcanvas {

    width: 85%;

  }



  .offcanvas .offcanvas-body {

    padding: 1rem 1.2rem;

    font-size: 0.95rem;

  }



  .offcanvas .offcanvas-title {

    font-size: 1.1rem;

  }

}



@supports not (backdrop-filter: blur(12px)) {

  .offcanvas {

    background-color: rgba(0, 0, 0, 0.85);

  }

}

@media (max-width: 380px) {

  .menu-toggle {

    width: 38px;

    height: 38px;

    font-size: 1.2rem;

  }

}



/* Forzar color dentro del offcanvas */

.offcanvas {

  background-color: rgba(0, 0, 0, 0.7) !important;

  color: white !important;

}



.offcanvas .offcanvas-title,

.offcanvas ul li a,

.offcanvas ul li strong {

  color: #fff !important;

}



.offcanvas ul li a:hover {

  color: #f9c84b !important;

}



.titulo-grid {

  margin-top: -5%;

  font-size: 1rem;

  font-weight: 500;

  color: #b8751c;

  font-size: 20px;

  font-weight: bold;

  font-family: Montserrat;

  line-height: 1.1;

}



.titulo-grid2 {

  font-size: 18px;

  margin-top: 10px;

  font-weight: bold;

  color: #b8751c;

  line-height: 1.1;

}



.subtitulo-grid {

  margin-top: -10%;

  font-size: 0.9rem;

  font-weight: 400;

  color: #941542;

  font-weight: bold;

  font-family: Montserrat;

  font-size: 17px;

  line-height: 1.1;

}



.testimonial-box {

  background-color: #f1f1f1;

  border-radius: 20px;

  max-width: 600px;

  text-align: center;

  color: #7c7c7c;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

  min-height: 200px; /* Altura uniforme */

  display: flex;

  flex-direction: column;

  justify-content: center;

  font-family: Montserrat;

  font-weight: bold;

  font-style: italic;

}



.testimonial-box p {

  font-size: 1.1rem;

  margin-bottom: 0.5rem;

}



.testimonial-box small {

  font-weight: 500;

  color: #7c7c7c;

  font-family: Montserrat;

}



.icono-cita {

  position: absolute;

  top: 15px;

  left: 15px;

  width: 30px;

  height: auto;

  opacity: 0.7; /* opcional: un poco más sutil */

}



.footer-pagina {

  background-color: #831942;

  color: white;

  width: 100%;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



.footer-cuerpo {

  display: flex;

  position: relative;

  width: 100%;

  padding: 30px 0;

}



.columna {

  width: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 20px 0;

  box-sizing: border-box;

}



.footer-imagen {

  max-width: 80%;

  max-height: 150px;

  object-fit: contain;

}



.separador {

  position: absolute;

  top: 20px;

  bottom: 20px;

  left: 50%;

  width: 2px;

  background-color: white;

  z-index: 1;

}



.columna-derecha {

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  line-height: 1.4;

}



.columna-derecha p {

  margin: 4px 0;

}



.footer-frase {

  width: 100%;

  text-align: center;

  padding: 10px 0;

  background-color: #831942;

  font-size: 14px;

}



/* SOLO PARA MÓVIL: reducir espacios grandes */

@media (max-width: 767.98px) {

  /* Eliminar margen inferior excesivo entre secciones hero */

  .hero-section {

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

    height: auto;

  }



  .hero-section + .hero-section {

    margin-top: 0 !important;

  }



  /* Ajustar la sección de rutas también */

  #rutas {

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

  }



  /* Ajustar padding del contenedor de servicios */

  .container.py-5,

  .container.pb-5 {

    padding-top: 1rem !important;

    padding-bottom: 1rem !important;

  }



  /* Eliminar espacios dobles del grid de servicios */

  .container > .row.g-4 {

    margin-top: 0 !important;

    margin-bottom: 0 !important;

  }



  /* Footer sin espacio extra arriba */

  .footer-pagina {

    margin-top: 0 !important;

    padding-top: 1rem !important;

  }



  /* Asegura que el botón “ver más” no deje hueco extra */

  .btn-ver-mas {

    margin-bottom: 0 !important;

  }

}



.hero-section {

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}

.img-button {

  display: block;

  margin: 0 auto;

}



/* Asegurar que la imagen ocupe el 100% en móvil */

@media (max-width: 767.98px) {

  .section-title {

    width: 100% !important;

    max-width: 100% !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

  }



  /* Eliminar padding del contenedor en móvil */

  .container.py-5,

  .container.py-2 {

    padding-left: 0 !important;

    padding-right: 0 !important;

  }



  /* Ajustar el grid para que no limite el ancho */

  .col-lg-6 {

    flex: 0 0 100% !important;

    max-width: 100% !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

  }

}

/* Estilos específicos para la sección de servicios en móvil */

@media (max-width: 767.98px) {

  /* Contenedor principal sin padding */

  .servicios-container {

    padding: 0 !important;

    margin: 0 !important;

  }



  /* Imagen al 100% sin márgenes */

  .servicios-img {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    display: block !important;

  }



  /* Eliminar espacio superior e inferior */

  .servicios-section {

    padding-top: 0.5rem !important;

    padding-bottom: 0.5rem !important;

  }



  /* Ajustar el texto "Conoce las Rutas" */

  .rutas-link {

    margin-bottom: 0.5rem !important;

  }

}



#rutas {

  margin-top: -16%;

  margin-bottom: 0;

  padding: 0;

}



.servicios-section {

  margin: 30px 0;

}



/* Contenedor principal de servicios */

.servicios-container .row {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 15px;

  max-width: 1000px; /* Más estrecho que el ancho total */

  margin: 0 auto;

}



/* Cada tarjeta de servicio */

.servicios-container .col {

  text-align: center;

  transition: all 0.3s ease;

  padding: 10px;

}



/* Efecto hover - zoom out */

.servicios-container .col:hover {

  transform: scale(0.95); /* Zoom out en lugar de zoom in */

}



@media (min-width: 1024px) {

  .servicios-container .col img {

    height: 120px;

    object-fit: contain;

  }



  .titulo-grid {

    font-size: 0.95rem;

    margin-top: 8px;

  }



  .subtitulo-grid {

    font-size: 0.75rem;

  }

}



/* Textos */

.titulo-grid {

  margin-top: 8px;

  font-weight: bold;

  color: #941542;

  font-size: 1rem; /* Más pequeño */

  line-height: 1.2;

}



.subtitulo-grid {

  font-size: 0.8rem; /* Más pequeño */

  color: #b8751c;

  margin-top: 2px;

}



/* Efecto hover para los textos */

.servicios-container .col:hover .titulo-grid {

  color: #b8751c; /* Cambio de color al hacer hover */

}



.servicios-container .col:hover .subtitulo-grid {

  color: #941542; /* Cambio de color al hacer hover */

}