﻿.hs-cta-img{width:100%;height:auto;}

body {
  font-family: 'Raleway', sans-serif;
}

/* Opcional: puedes ajustar el peso base si quieres un texto más fino o más marcado */
p, span, a, li, button {
  font-weight: 400;
}
.quehidden{display:none!important;}

/* --- NAVBAR CUSTOM --- */
.navbar {
  font-size: 0.95rem;
  z-index: 1030;
}

.navbar .nav-link {
  color: #000;
  font-weight: 400;
  margin: 0 0.5rem;
  transition: color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .dropdown-item:hover {
  color: #009FE3 !important; /* azul suave */
}

.btn-primary {
  background-color: #0d9ed9;
  border: none;
  padding: 0.5rem 1.25rem;
}

.btn-primary:hover {
  background-color: #0b8bc0;
}

/* Evitar que el contenido quede oculto tras el navbar fijo */
body {
  padding-top: 71px;
}

/* --- HERO SECTION --- */
.hero {
  position: relative;
  min-height: 92vh;
  background: url('img/fondo-cabecera.jpg') center center / cover no-repeat;
  color: #fff;
  padding: 0 2rem;
}

/* Capa oscura para mejorar contraste del texto */
/*.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /*background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.1));
  z-index: 0;
}*/

/* Contenido superpuesto */
.hero .container {
  position: relative;
  z-index: 1;
  /*max-width: 900px;*/
}

/* Texto superior pequeño */
.hero p.lead {
  font-size: 1.1rem;
  font-weight: 400;
  color: #fff;
}

/* Botón principal */
.hero .btn-primary {
  background-color: #0d9ed9;
  border: none;
}
.hero .btn-primary:hover {
  background-color: #0b8bc0;
}

/* Bloques inferiores */
.hero-info .info-block {
  max-width: 300px;
}

.hero-info .info-line {
  height: 2px;
  width: 100%;
  background-color: rgba(255,255,255,0.5);
}

.hero-info .info-line-blue {
  background-color: #0d9ed9;
}

.hero-info h6 {
  font-size: 1rem;
  color: #fff;
}

.hero-info p {
  font-size: 0.9rem;
  line-height: 1.4;
}

.hero-info .info-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.hero-info .info-link:hover {
  color: #009FE3;
}

/* Responsivo */
@media (max-width: 767px) {
  .hero {
    text-align: center;
    padding: 4rem 1rem;
  }
  .hero .container {
    max-width: 100%;
  }
  .hero-info {
    margin-top: 2rem;
  }
}

/* --- AGENDA SECTION --- */
.agenda-section {
  background-color: #fdfbf8;
}

/* Cabecera */
.agenda-header a {
  white-space: nowrap;
}

/* Tarjeta */
.agenda-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.agenda-card:hover {
  transform: translateY(-3px);
}

/* Imagen */
.agenda-image {
  background-size: cover;
  background-position: center;
  position: relative;
  height: 500px; /* altura fija igual en todas las pantallas */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Fecha flotante */
.agenda-date {
  position: absolute;
  top: 12px;
  right: 12px;
  text-align: center;
  font-weight: 600;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.agenda-date .month {
  background-color: #009FE3;
  color: #fff;
  font-size: 0.8rem;
  padding: 2px 8px;
}
.agenda-date .day {
  background-color: #fff;
  color: #000;
  font-size: 1.25rem;
  padding: 4px 8px;
}

/* Caja de información (flotante inferior) */
.agenda-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 1rem;
  min-height:136px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  background-color: rgba(255, 255, 255, 0.90);
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  
}

.agenda-info h6 {
  font-size: 1rem;
  color: #000;
}

.agenda-info p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.agenda-link {
  color: #009FE3;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.agenda-link:hover {
  text-decoration: underline;
}

/* Carrusel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 2rem;
  height: 2rem;
  background-size: 50%;
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;
}

/* Responsive */
@media (max-width: 767px) {
  .agenda-header {
    text-align: center;
  }
  .agenda-header a {
    margin-top: 0.5rem;
  }
  .agenda-card {
    max-width: 400px;
    margin: 0 auto;
  }
.agenda-image {
  height: 360px;
}
}


/* --- PLANIFICA TU VIAJE --- */
.planifica-section {
  background-color: #fff;
}

.icon-box {
  width: 40px;
  height: 40px;
  background-color: #009FE3;
  border-radius: 12px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover */
.planifica-box:hover .icon-box {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 159, 227, 0.4);
}

.planifica-box h5 {
  margin-bottom: 0.5rem;
}

.planifica-box p {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Responsivo */
@media (max-width: 767px) {
  .planifica-box {
    max-width: 350px;
    margin: 0 auto;
  }
}


/* --- DESCUBRE LO MEJOR DE LA REGIÓN --- */
.descubre-section {
  background-color: #fff;
  color: #000;
}

/* Botones personalizados */
.btn-discover {
  background-color: #f9fafb;
  color: #9a9b9c;
  border: none;
  border-radius: 2rem;
  padding: 0.5rem 1.25rem;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  transition: all 0.25s ease;
  font-size: 0.9rem;
  text-decoration:none;
}

.btn-discover i {
  font-size: 0.9rem;
}

/* Hover */
.btn-discover:hover {
  color: #000;
  box-shadow: inset 0 -3px 0 0 #7cc9e9;
  background-color: #f9fafb;
}

/* Botón activo */
.btn-discover.active {
  color: #000;
  box-shadow: inset 0 -3px 0 0 #7cc9e9;
}

/* Responsive */
@media (max-width: 768px) {
  .descubre-section h2,
  .descubre-section p {
    text-align: center;
  }

  .d-flex.flex-wrap.gap-3 {
    justify-content: center;
  }
}


/* --- CARRUSEL DE LUGARES --- */
.lugar-card {
  background-color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}

.lugar-card:hover {
  transform: translateY(-3px);
}

/* Imagen cuadrada */
.lugar-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.lugar-img img {
  object-fit: cover;
  height: 100%!important;
  width: 100%;
}

/* Badge */
.badge-lugar {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fff;
  color: #555;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Info */
.lugar-info {
  background-color: #fff;
  padding-top: 1rem;
  padding-bottom: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.lugar-info-white {
  padding-top: 1rem;
  padding-bottom: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.lugar-info h6 {
  font-size: 1rem;
}

.lugar-info p {
  font-size: 0.9rem;
}

.lugar-link {
  color: #009FE3;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  margin-top: auto;
}

.lugar-link:hover {
  text-decoration: underline;
}

/* Carrusel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 2rem;
  height: 2rem;
  background-size: 50%;
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;
}

/* Botones del carrusel */
.btn-carousel {
  background-color: #0d9ed9;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.btn-carousel:hover {
  background-color: #0b8bc0;
}

.btn-carousel i {
  font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 767px) {
  .lugar-card {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* --- PERSONALIZA TU EXPERIENCIA --- */
.experiencia-section {
}

.experiencia-box {
  background-color: #fdfbf8;
  text-align: center;
}

/* Selects */
.form-select {
  border: 1px solid #e1e1e1;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
}

/* Botón buscar */
.btn-buscar {
  background-color: #f8f9fc;
  border: 1px solid #b4dfef;
  color: #000;
  transition: all 0.3s ease;
}

.btn-buscar:hover {
  background-color: #e7f5fb;
  border-color: #7cc9e9;
}

/* Responsive */
@media (max-width: 767px) {
  .experiencia-box {
    text-align: left;
    padding: 2rem 1.5rem;
  }
  form {
    flex-direction: column;
  }
  .btn-buscar {
    width: 100%;
  }
  .mapa{width:380px;}
}

.actividades-section {
  background: #fdfbf8;
}

.blog-section {
  background: #f9fafb;
}


/* --- SECCIÓN EXPLORA LA REGIÓN --- */
.explora-section {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 25%, #fdfbf8 75%, #fdfbf8 100%);
}

/* Mapa SVG */
.mapa-svg-container {
  position: relative;
  max-width: 500px;
}

/* Zonas del mapa */
.zona {
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Efecto hover */
.zona:hover {
  fill: #0d9ed9;
  stroke: #0d9ed9;
  filter: drop-shadow(0 0 6px rgba(13,158,217,0.4));
}

/* Tooltip */
.mapa-tooltip {
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  font-size: 0.9rem;
  white-space: nowrap;
  display: none;
  pointer-events: none;
  transform: translate(-50%, -120%);
  z-index: 10;
}

/* --- SECCIÓN VIDEO --- */
.video-section {
  background-color: #111827;
  color: #fff;
}

/* Botón Play circular centrado */
.btn-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.btn-play i {
  font-size: 2rem;
  color: #fff;
}

.btn-play:hover {
  background-color: rgba(13, 158, 217, 0.9);
}

/* Botones del carrusel */
.btn-carousel {
  background-color: #0d9ed9;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.btn-carousel:hover {
  background-color: #0b8bc0;
}

.btn-carousel i {
  font-size: 1.2rem;
}

/* Modal oscuro */
.modal-content {
  background-color: #000;
}

.btn-ver-restaurantes {
  background-color: #f8f9fc;
  color: #636465;
  border: 1px solid #0d9ed9;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration:none;
}

/* Efecto hover */
.btn-ver-restaurantes:hover {
  background-color: #e7f5fb;
  color: #000;
  border-color: #7cc9e9;
}

.modal-content img {
  max-height: 90vh;
  object-fit: contain;
}

/* --- PIE DE TARJETA --- */
.lugar-footer {
  padding-top: 0.75rem;
}

.lugar-icon {
  background-color: #0d9ed9;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lugar-icon img {
  width: 22px;
  height: 22px;
}

.lugar-meta p {
  font-size: 0.9rem;
  color: #333;
}

.lugar-meta small {
  font-size: 0.8rem;
  color: #888;
}

/* --- FOOTER SUSCRIPCIÓN --- */
.footer-suscripcion {
  background-color: #2a2a2a;
}

/* Input */
.input-suscripcion {
  max-width: 250px;
  border: none;
  outline: none;
  padding: 0.5rem 1rem;
}

.input-suscripcion:focus {
  box-shadow: 0 0 0 2px #0d9ed9;
}

/* Botón */
.btn-suscripcion {
  background-color: #0d9ed9;
  color: #fff;
  border: none;
  transition: background-color 0.3s ease;
}

.btn-suscripcion:hover {
  background-color: #0b8bc0;
  color: #fff;
}

/* Ajuste responsive */
@media (max-width: 767.98px) {
  .footer-suscripcion form {
    flex-direction: column;
  }

  .input-suscripcion {
    max-width: 100%;
    margin-bottom: 10px;
  }

  .btn-suscripcion {
    width: 100%;
  }
}

/* --- FOOTER PRINCIPAL --- */
.footer-principal {
  background-color: #191919;
  color: #fff;
  font-family: "Raleway", sans-serif;
}

.footer-logo {
  height: 100px;
  max-width: 100%;
}

.footer-text {
  font-size: 0.9rem;
  color: #ccc;
  line-height: 1.4;
}

/* Titulares de las columnas */
.footer-title {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Enlaces */
.footer-links a {
  display: block;
  color: #bfbfbf;
  font-size: 0.9rem;
  text-decoration: none;
  margin-bottom: 0.3rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #0d9ed9;
}

/* Responsivo */
@media (max-width: 767.98px) {
  .footer-title {
    margin-top: 1rem;
  }

  .footer-logos {
    justify-content: flex-start;
  }
}

/* --- FOOTER INFERIOR --- */
.footer-bottom {
  background-color: #191919;
  color: #fff;
}

.footer-separator {
  border: 0;
  border-top: 1px solid #848385;
  opacity: 1;
}

/* Texto y enlaces */
.footer-copy small {
  font-size: 0.85rem;
}

.footer-legal {
  color: #fff;
  font-size: 0.85rem;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.footer-legal:hover {
  color: #0d9ed9;
}

/* Redes sociales */
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, transform 0.2s ease;
}

.footer-social a:hover {
  color: #0d9ed9;
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 767.98px) {
  .footer-copy {
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }
}

/* Flecha animada */
.transition {
  transition: transform 0.3s ease;
}

.flecha-activa {
  transform: rotate(180deg);
}

/* Ocultar la flecha predeterminada de Bootstrap */
.navbar .dropdown-toggle::after {
  display: none !important;
}

/* Flechas uniformes */
.navbar .bi-chevron-down {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

/* Rotación al abrir dropdown */
.nav-item .show .bi-chevron-down {
  transform: rotate(180deg);
}


/* --- PANEL MEGA MENU "QUE HACER" --- */
.panel-que-hacer {
  display: none;
  position: fixed;
  top: 71px; /* ajusta según la altura del navbar */
  left: 0;
  width: 100%;
  /*height: calc(100vh - 66px);*/
  /*background-color: #fff;*/
  border-top: 1px solid #0d9ed9;
  /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);*/
  z-index: 999;
  overflow-y: auto;
}

/* Mostrar panel */
.panel-que-hacer.activo {
  display: block;
}

/* Bloque derecho */
.bg-lateral {
  background-color: #f9fafb;
  /*border-left: 1px solid #eee;*/
}
.bg-lateral-2 {
  background-color: #ffffff;
  /*border-left: 1px solid #eee;*/
}

/* Enlaces laterales */
.link-lateral {
  color: #b3b3b3!important;
  font-weight: 500;
  padding: 0.4rem 0;
  transition: color 0.3s ease;
  font-size: 1.5rem;
}

.link-lateral:hover {
  color: #000!important;
  font-weight: 500;
}

.link-lateral.active {
  color: #009FE3!important;
  font-weight: 500;
}

/* Capas de contenido */
.bloque-contenido {
  display: none;
  animation: fadeIn 0.3s ease;
}

.bloque-contenido.active {
  display: block;
}

/* Animación de transición suave */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 767.98px) {
  .panel-que-hacer {
    height: auto;
  }
  .bg-lateral {
    border-left: none;
    border-top: 1px solid #eee;
  }
}

.text-primary{color:#2baadd!important;}

#contenido-inicio .text-primary {
  color: #2baadd !important;
}

#contenido-inicio .d-flex i {
  flex-shrink: 0;
  margin-top: 2px;
}
/* Enlaces dentro de los títulos del panel "Qué hacer" */
.link-titulo, .link-titulo2 {
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease;
}

.link-titulo:hover, .link-titulo2:hover {
  color: #0d9ed9;
  text-decoration: none;
}

/* Scroll interno en el contenido del panel (solo móvil) */
@media (max-width: 767.98px) {
  .bloque-contenido {
    max-height: 70vh; /* altura máxima relativa a la pantalla */
    overflow-y: auto;
    padding-right: 0.5rem; /* deja un poco de espacio al scroll */
  }

  /* Personalización opcional del scroll */
  .bloque-contenido::-webkit-scrollbar {
    width: 6px;
  }

  .bloque-contenido::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
  }

  .bloque-contenido::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.25);
  }
}

/* Imágenes miniatura en los bloques de agenda */
.thumb-agenda {
  width: 120px;
  height: 80px;
  object-fit: cover;
}

.thumb-agenda2 {
  width: 170px;
  height: 130px;
  object-fit: cover;
}

/* Enlaces de título (reutiliza la clase anterior) */
.link-titulo, .link-titulo2 {
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease;
}

.link-titulo:hover, .link-titulo2:hover {
  color: #0d9ed9;
  text-decoration: none;
}

/* Espaciado adicional para versión móvil */
@media (max-width: 767.98px) {
  #contenido-agenda .col-md-4 {
    margin-bottom: 2rem;
  }

  .thumb-agenda {
    width: 100px;
    height: 70px;
  }

  .thumb-agenda2 {
    width: 130px;
    height: 100px;
  }

  .bloque-contenido {
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* Fondo de la parte izquierda */
.bg-light-404 {
  background-color: #f9f8f6;
}

/* Ajustes generales de la sección */
.error-404 {
  /*height: 100vh; /* ocupa toda la altura de la pantalla */
  overflow: hidden;
}

/* Imagen del lado derecho */
.object-fit-cover {
  object-fit: cover;
}

/* Botón azul reutilizable */
.btn-azul {
  background-color: #0d9ed9;
  border: none;
  color: #fff;
  border-radius: 50px;
  padding: 10px 24px;
  transition: all 0.3s ease;
}

.btn-azul:hover {
  background-color: #0b8bc0;
  color: #fff;
}

/* Versión móvil: bloques apilados */
@media (max-width: 767.98px) {
  .error-404 {
    flex-direction: column;
    height: auto;
  }

  .error-404 .col-md-6 {
    width: 100%;
  }

  .error-404 img {
    height: 250px;
  }
}

/* Fondo y colores */
.bloque-texto-legal {
  background-color: #fdfbf8;
  color: #000;
}

/* Ajuste del texto y espaciado */
.bloque-texto-legal p {
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Enlaces dentro del texto */
.bloque-texto-legal a {
  color: #0d9ed9;
  text-decoration: none;
}

.bloque-texto-legal a:hover {
  text-decoration: underline;
}

/* Encabezados */
.bloque-texto-legal h1 {
  font-size: 2.5rem;
}

.bloque-texto-legal h5 {
  font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 767.98px) {
  .bloque-texto-legal h1 {
    font-size: 2rem;
  }

  .bloque-texto-legal {
    padding: 2rem 1rem;
  }
}

.imagen-grande {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #000; /* por si sobran márgenes */
}

.imagen-fondo {
  width: 100%;
  height: auto; /* ajusta la altura según proporción */
  display: block;
  object-fit: contain; /* muestra la imagen completa */
}

/* Capa de nubes superpuesta */
.nubes-superpuestas {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%; /* un poco más ancha para que al moverse no se note el borde */
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* no bloquea clics */
  animation: moverNubes 60s linear infinite; /* animación continua */
}

/* Animación del movimiento de las nubes */
@keyframes moverNubes {
  0% {
    transform: translateX(-10%);
  }
  50% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(-10%);
  }
}

/* Ajuste responsive */
@media (max-width: 767.98px) {
  .nubes-superpuestas {
    animation-duration: 40s; /* un poco más rápido en móvil */
  }
}

/* Fondo general del bloque */
.paginador {
  background-color: #f9fafb;
}

/* Línea superior */
.paginador-linea {
  border: none;
  border-top: 2px solid #e5e6e6;
}

/* Botones redondos */
.pag-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.3s ease;
}

/* Botón anterior (izquierda) */
.pag-btn-prev {
  background-color: #a9dcf2;
  color: #fff;
}

/* Botón siguiente (derecha) */
.pag-btn-next {
  background-color: #0d9ed9;
  color: #fff;
}

/* Hover — se vuelven transparentes con borde azul */
.pag-btn:hover {
  background-color: transparent !important;
  color: #0d9ed9;
  border: 1px solid #0d9ed9;
  transform: scale(1.05);
}

/* Números de paginación */
.pagination {
  gap: 10px;
}

.pagination .page-link {
  border: none;
  background-color: transparent;
  color: #6c757d;
  font-weight: 500;
  border-radius: 10px;
  padding: 8px 16px;
}

.pagination .page-item.active .page-link {
  background-color: #fff;
  color: #000;
}

.pagination .page-link:hover {
  color: #0d9ed9;
  background-color: #fff;
}

/* Responsive */
@media (max-width: 767.98px) {
  .paginador .container {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Contenedor general */
.hero-cabecera {
  position: relative;
  height: 50vh; /* altura media, puedes ajustarla */
  min-height: 350px;
  overflow: hidden;
}

/* Imagen de fondo */
.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Capa oscura semitransparente */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2;
}

/* Contenido centrado */
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  padding: 0 20px;
}

.hero-category {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.5px;
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
}

.hero-meta {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Responsivo */
@media (max-width: 768px) {
  .hero-cabecera {
    height: 40vh;
  }
  .hero-title {
    font-size: 1.8rem;
  }
}

.articulo {
  color: #000;
  background-color: #fff;
  font-family: "Raleway", sans-serif;
}

.breadcrumb {
  background: none;
  padding: 0;
}

/* separador normal entre los ítems (esto se queda igual) */
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding: 0 0.4rem;
}

/* ✅ Añadir el separador justo después del icono de la casa */
.breadcrumb-item:first-child i::after {
  content: "›";
  padding: 0 0.4rem;
}

/* Opcional: neutralizar el margen del icono si usas .me-1 en el HTML */
.breadcrumb-item:first-child .bi-house-door {
  margin-right: 0 !important;
}




/* Iconos sociales */
.social-icons a {
  color: #0d9ed9;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #000;
}

/* Pie de foto */
.pie-foto {
  font-size: 0.9rem;
  color: #000;
  border-left: 2px solid #000;
  padding-left: 0.5rem;
  margin-bottom: 1rem;
}

/* Cita destacada */
.cita {
  border-left: 3px solid #000;
  padding-left: 1rem;
  font-size: 1.1rem;
  color: #000;
}

/* Línea separadora final */
.separador {
  border: none;
  border-top: 1px solid #d1d1d1;
  width: 100%;
}

/* Icono circular del autor */
.autor-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #0d9ed9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
}

/* Responsivo */
@media (max-width: 768px) {
  .breadcrumb {
    flex-wrap: wrap;
  }
  .social-icons {
    justify-content: center;
    margin-top: 0.5rem;
  }
}

/* Fondo general */
.contacto {
  background-color: #f9fafb;
  color: #000;
  font-family: "Raleway", sans-serif;
}

/* Íconos e información */
.contacto-info i {
  color: #0d9ed9;
  font-size: 1.2rem;
}

.contacto-info a {
  color: #000;
  text-decoration: none;
}

.contacto-info a:hover {
  text-decoration: underline;
}

/* Formularios */
.contacto-form .form-label {
  color: #000;
  font-weight: 500;
}

.contacto-form .form-control {
  border-radius: 20px;
  border: 1px solid #dee2e6;
  box-shadow: none;
  padding: 10px 14px;
}

.contacto-form .form-control:focus {
  border-color: #0d9ed9;
  box-shadow: 0 0 0 0.2rem rgba(13, 158, 217, 0.25);
}

/* Checkbox */
.form-check-input:checked {
  background-color: #0d9ed9;
  border-color: #0d9ed9;
}

.text-link {
  color: #0d9ed9;
  text-decoration: underline;
}

.text-link:hover {
  color: #000;
}

/* Botón enviar */
.btn-enviar {
  background-color: #0d9ed9;
  border: none;
  color: white;
  font-weight: 500;
  border-radius: 20px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.btn-enviar:hover {
  background-color: #0b8bc0;
  transform: scale(1.02);
  color:#ffffff;
}

/* Responsive */
@media (max-width: 768px) {
  .contacto {
    text-align: center;
  }
  .contacto-form {
    text-align: left;
  }
  .contacto-info {
    justify-content: center!important;
	/*display:flex;*/
  }
}

.cookie-consent {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  border-radius: 25px;
  padding: 25px 30px;
  width: 340px;
  max-width: 90%;
  z-index: 9999;
  font-family: "Raleway", sans-serif;
  color: #000;
  border: 1px solid #e0e0e0;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

/* Logo */
.cookie-logo {
  width: 40px;
  height: auto;
}

/* Botón de cerrar */
.btn-close-cookie {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #000;
  cursor: pointer;
  line-height: 1;
}

/* Texto */
.cookie-body p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Botones */
.btn-aceptar {
  background-color: #0d9ed9;
  border: none;
  color: #fff;
  border-radius: 25px;
  padding: 10px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-aceptar:hover {
  background-color: #0b8bc0;
  color: #ffffff;
}

.btn-rechazar {
  background-color: #f8f9fc;
  color: #636465;
  border: 1px solid #0d9ed9;
  color: #6c757d;
  border-radius: 25px;
  padding: 10px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-rechazar:hover {
  background-color: #e7f5fb;
  color: #000;
  border-color: #7cc9e9;
}

/* Enlace final */
.link-rechazar {
  display: block;
  text-align: center;
  color: #000;
  text-decoration: none;
  font-weight: 500;
}

.link-rechazar:hover {
  text-decoration: underline;
}

/* Animación de entrada */
.cookie-consent {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s forwards ease;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.popup-suscripcion {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  border-radius: 25px;
  padding: 25px 30px;
  width: 340px;
  max-width: 90%;
  z-index: 9999;
  font-family: "Raleway", sans-serif;
  color: #000;
  border: 1px solid #e0e0e0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s forwards ease;
}

/* Logo */
.popup-logo {
  width: 40px;
  height: auto;
}

/* Botón cerrar */
.btn-close-popup {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #000;
  cursor: pointer;
  line-height: 1;
}

/* Input */
.popup-suscripcion .form-control {
  background-color: #f8f9fa;
  border: none;
  border-radius: 20px;
  padding: 12px 16px;
  font-size: 0.95rem;
  color: #000;
}

.popup-suscripcion .form-control:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13, 158, 217, 0.25);
}

/* Botón suscribir */
.btn-suscribir {
  background-color: #0d9ed9;
  border: none;
  color: #fff;
  border-radius: 25px;
  padding: 10px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-suscribir:hover {
  background-color: #0b8bc0;
  transform: scale(1.02);
  color: #fff;
}

/* Animación */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  background: transparent;
}

.hero-breadcrumb .breadcrumb {
  background: none;
  margin: 0;
  font-size: 0.95rem;
}

.hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #fff;
  content: "›";
  font-weight: 300;
  padding: 0 0.4rem;
}

.hero-breadcrumb .breadcrumb a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s;
}

.hero-breadcrumb .breadcrumb a:hover {
  opacity: 0.8;
}

.hero-breadcrumb .breadcrumb-item.active {
  color: #fff;
  opacity: 0.9;
}

/* Fondo */
.buscador {
  background-color: #f9fafb;
}

/* Alineación y proporciones */
.buscador-form {
  flex-wrap: nowrap;
  gap: 0.5rem;
}

/* Ajuste proporcional entre campos */
.flex-grow-2 {
  flex: 2; /* El input será el doble de ancho que un select */
}

.flex-grow-1 {
  flex: 1;
}

/* Input con icono */
.buscador-input .input-group-text {
  border-radius: 30px 0 0 30px;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #aaa;
  font-size: 1.1rem;
  padding: 0.6rem 0.8rem;
}

.buscador-input .form-control {
  border-left: none;
  border: 1px solid #ddd;
  border-radius: 0 30px 30px 0;
  background-color: #fff;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  color: #333;
}

/* Selects */
.buscador-select .form-select {
  border-radius: 30px;
  border: 1px solid #ddd;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  color: #333;
  background-color: #fff;
  background-position: right 1rem center;
  min-width: 150px;
}

/* Botón */
.btn-buscar {
  background-color: #0d9ed9;
  color: #fff;
  border-radius: 30px;
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  white-space: nowrap;
  transition: 0.3s ease;
}

.btn-buscar:hover {
  background-color: #0b8bc0;
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .buscador-form {
    flex-direction: column;
    align-items: stretch;
  }

  .buscador-input,
  .buscador-select,
  .btn-buscar {
    width: 100%;
    margin-right: 0 !important;
  }
}


/* Fondo general */
.resultados {
  background-color: #fff;
}

/* Tarjeta */
.resultado-card {
  background-color: #fdfbf8;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resultado-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Imagen */
.resultado-card img {
  object-fit: cover;
  height: 300px;
  /*border-bottom: 1px solid #eee;*/
}

/* Texto */
.resultado-body h6 {
  font-size: 1rem;
}

.resultado-body p {
  font-size: 0.9rem;
}

/* Iconos de certificaciones */
.resultado-iconos img {
  height: 24px;
}

/* Iconos de contacto */
.icono-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background-color: #e5f2f7;
  color: #0d9ed9;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.icono-link:hover {
  background-color: #0d9ed9;
  color: #fff;
}

/* Enlace "Ver más" */
.ver-mas {
  color: #0d9ed9;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.ver-mas:hover {
  color: #0b8bc0;
}

/* Responsive */
@media (max-width: 992px) {
  .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 576px) {
  .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.ficha {
  background-color: #fdfbf8;
}

/* Breadcrumb */
.ficha .breadcrumb {
  background: none;
  padding: 0;
}

.ficha .breadcrumb-item a {
  color: #000;
  text-decoration: none;
  font-size: 0.95rem;
}

.ficha .breadcrumb-item.active {
  color: #000;
  font-weight: 600;
}

/* Iconos de contacto */
.icono-contacto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #d9c7a1;
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.icono-contacto:hover {
  background-color: #c4b18c;
}

/* Enlaces de documentos */
.link-doc {
  color: #6c757d;
  text-decoration: underline;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.link-doc:hover {
  color: #0d9ed9;
}

/* Botón principal */
.btn-ficha {
  background-color: #0d9ed9;
  color: #fff;
  border-radius: 25px;
  padding: 0.6rem 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn-ficha:hover {
  background-color: #0b8bc0;
  color: #fff;
}

/* Imagen derecha */
.ficha img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 768px) {
  .ficha .row {
    /*flex-direction: column-reverse;*/
  }

  .ficha .text-end {
    text-align: left !important;
  }

  .ficha img {
    margin-bottom: 2rem;
  }
}

.listado-personas {
  background-color: #fff;
}

/* Tarjeta general */
.persona-card {
  background-color: #fdfbf8;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.persona-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Foto redonda */
.persona-foto {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
}

/* Texto azul */
.text-azul {
  color: #0d9ed9;
  font-size: 0.95rem;
}

/* Iconos redes */
.persona-card a i {
  font-size: 1.1rem;
  color: #a8a7aa;
  transition: color 0.3s ease;
}

.persona-card a:hover i {
  color: #0d9ed9;
}

/* Enlace "Ver más" */
.ver-mas {
  color: #0d9ed9;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.ver-mas:hover {
  color: #0b8bc0;
}

/* Responsive */
@media (max-width: 992px) {
  .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 576px) {
  .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Fondo general */
.listado-agencias {
  background-color: #fff;
}

/* Tarjetas */
.agencia-card {
  background-color: #fdfbf8;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agencia-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Columna izquierda (info) */
.agencia-info h6 {
  font-size: 1rem;
}

.agencia-info p {
  font-size: 0.9rem;
}

/* Enlace "Ver más" */
.ver-mas {
  color: #0d9ed9;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.ver-mas:hover {
  color: #0b8bc0;
}

/* Iconos */
.icono-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background-color: #e5f2f7;
  color: #0d9ed9;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.icono-link:hover {
  background-color: #0d9ed9;
  color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
  .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 576px) {
  .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.mapa-section {
  width: 100%;
  margin: 0;
  padding: 0;
}

#mapa {
  width: 100%;
  height: 400px;
  border: none;
}

.faq-section {
  background-color: #fff;
}

.faq-item {
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-header {
  background: none;
  border: none;
  text-align: left;
  padding: 1rem 1.5rem;
  border-radius: 12px 0 0 0;
  background-color: #fff;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* color de fondo al pasar el ratón */
.faq-header:hover {
  background-color: #f9fafb;
}

/* cuando el elemento está activo (abierto) */
.faq-item.active .faq-header {
  background-color: #f9fafb;
}

/* icono */
.faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #0d9ed9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0d9ed9;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: #fff;
}

/* cuando está abierto, el fondo del icono también cambia */
.faq-item.active .faq-icon {
  background-color: #f9fafb;
  border-color: #0d9ed9;
  color: #0d9ed9;
}

/* contenido desplegable */
.faq-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 1.5rem;
  background-color: #f9fafb;
  border-radius: 0 0 12px 12px;
  transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.3s ease;
}

/* mostrar contenido al abrir */
.faq-item.active .faq-content {
  display: block;
}

/* cambiar icono de + a - */
.faq-item.active .faq-icon i::before {
  content: "\f2ea"; /* icono "dash" de Bootstrap Icons */
  font-family: "bootstrap-icons";
}
.faq-item.active .faq-content {
  max-height: 300px; /* suficiente para la mayoría de textos */
  opacity: 1;
  padding: 0 1.5rem 1rem 1.5rem;
}

.card-profesional {
  background-color: #fdfbf8;
  border: none;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.3s ease;
  height: 100%; /* 🔹 asegura que todas las tarjetas sean iguales */
}

.card-profesional:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.text-info {
  color: #0d9ed9 !important;
}

/* Sección superior gris */
.seccion-smart {
  background-color: #f9fafb;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

/* Contenedor blanco con la imagen */
.smart-imagen-container {
  margin-top: -70px; /* Hace que suba sobre el bloque gris */
  position: relative; /* 🔹 La hace posicionable */
  z-index: 2; /* 🔹 Asegura que quede por encima del bloque gris */
  padding-top: 0;
}


/* Imagen dentro del container */
.smart-imagen {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* Hero general */
.hero-bono {
  min-height: 73vh;
  position: relative;
  overflow: hidden;
}

/* Breadcrumb fijo arriba */
.hero-breadcrumb {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 3; /* 🔹 Asegura que quede encima de la imagen y overlay */
}

.hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #fff;
  padding: 0 0.4rem;
}

/* Overlay oscuro */
.hero-overlay {
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

/* Imagen */
.hero-bg {
  object-fit: cover;
  z-index: 0;
}

/* Contenido centrado */
.hero-bono .container {
  position: relative;
  z-index: 2;
}

/* Fondo imagen */
.hero-bono .hero-bg {
  object-fit: cover;
  z-index: 0;
}

/* Overlay oscuro */
.hero-bono .hero-overlay {
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}


/* Tarjeta bono */
.tarjeta-bono {
  max-width: 340px;
  position: relative;
  z-index: 2;
}

/* Logotipo */
.logo-bono {
  width: 70px;
}

/* Línea azul */
.linea-azul {
  border: none;
  border-top: 2px solid #0d9ed9;
  margin: 0 auto;
}

/* Línea discontinua */
.linea-discontinua {
  border: none;
  border-top: 2px dashed #ccc;
}

/* Código de barras */
.codigo-barras {
  max-width: 200px;
}

/* Alineación del texto blanco */
.hero-bono p,
.hero-bono h1 {
  position: relative;
  z-index: 2;
}

@media (max-width: 992px) {
.hero-bono {
  min-height: 93vh;
}
}

.bono-info {
  background-color: #fdfbf8;
}

.bono-info h2, 
.bono-info h5, 
.bono-info h6 {
  color: #000;
}

.bono-info p, 
.bono-info li, 
.bono-info ol {
  color: #6c757d; /* text-muted */
}

.btn-primary {
  background-color: #0d9ed9;
  border: none;
}

.btn-primary:hover {
  background-color: #0b8bc0;
}

.bono-info .shadow-sm {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.faq-section {
  background-color: #fff;
}

/* Estilo general del acordeón */
.faq-accordion .accordion-item {
  border: none;
  background-color: transparent;
}

.faq-accordion .accordion-button {
  background-color: #fff;
  color: #000;
  font-weight: 500;
  border-radius: 12px 0 0 0;
  box-shadow: none;
  transition: all 0.3s ease;
}

.faq-accordion .accordion-button::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: bold;
  color: #0d9ed9;
  background: none;
  transform: none !important;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #0d9ed9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  background-color: #fff;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  content: '−';
  color: #0d9ed9;
}

.faq-accordion .accordion-button:not(.collapsed) {
  background-color: #f9fafb;
  color: #000;
}

.faq-accordion .accordion-body {
  background-color: #f9fafb;
  color: #6c757d;
  border-radius: 12px 0 0 0;
  border-radius: 0 0 10px 10px;
  transition: all 0.3s ease;
}

/* Transición suave al desplegar */
.accordion-collapse {
  transition: all 0.4s ease-in-out;
}

.adhesion-section {
  background-color: #f9fafb;
}

/* Tarjetas */
.adhesion-card {
  border-radius: 1rem;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.adhesion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Icono superior */
.adhesion-icon {
  width: 50px;
  height: 50px;
  background-color: #0d9ed9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border-radius: 12px;
}

.adhesion-icon {
  margin: 0 auto 1rem auto; /* ✅ centra horizontalmente el icono dentro de la tarjeta */
}

.contacto-bono {
  background-color: #fff;
}

/* Tarjetas */
.info-card {
  background-color: #f9fafb;
  border-radius: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Icono superior */
.info-icon {
  width: 60px;
  height: 60px;
  background-color: #0d9ed9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 12px;
  line-height: 1;
  flex-shrink: 0;
}

.hero-bottom-bar {
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 1rem 0;
  z-index: 3;
}

.hero-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding-bottom: 4px;
  transition: all 0.3s ease;
}

.hero-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #0d9ed9;
  transition: width 0.3s ease;
}

.hero-link:hover::after {
  width: 100%;
}

.hero-bottom-bar .container {
  flex-wrap: wrap; /* permite que pasen a otra línea */
  text-align: center;
}

/* Versión móvil */
@media (max-width: 768px) {
  .hero-bottom-bar .container {
    gap: 1rem 2rem!important; /* espacio entre filas y columnas */
    justify-content: center;
  }

  .hero-bottom-bar .hero-link {
    flex: 1 1 40%; /* dos enlaces por fila */
  }
}

.conexion-section {
  background-color: #fdfbf8;
}

.conexion-card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.conexion-card img {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  object-fit: cover;
  height: 200px;
}

.conexion-card .card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.conexion-card a {
  color: #0d9ed9;
  font-weight: 500;
  transition: color 0.2s ease;
}

.conexion-card a:hover {
  color: #0b7fb1;
}

.hero-carousel {
  background-color: #fff;
}

.carousel-item img {
  object-fit: cover;
  /*height: 70vh; /* ocupa parte de la pantalla, no toda */
}

.carousel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

/* Centramos el texto vertical y horizontalmente */
.carousel-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
}

.btn-outline-light-translucent {
  color: #fff;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  padding: 0.6rem 1.5rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.btn-outline-light-translucent:hover {
  background-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* Botones laterales */
.carousel-control-icon {
  background-color: #0d9ed9;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  color: #fff;
  transition: all 0.3s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.custom-prev {
  left: -25px; /* mitad fuera, mitad dentro */
}

.custom-next {
  right: -25px;
}

.carousel-control-icon:hover {
  background-color: #0b7fb1;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

/* Imagen del carrusel */
.consejo-img {
  height: 450px;
  object-fit: cover;
}

/* Capa superior translúcida */
.overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  z-index: 2;
}

/* Pie de foto translúcido */
.overlay-bottom {
  bottom: 15px;
  right: 15px;
  z-index: 3;
  border-radius:10px;
}

/* Eliminamos los controles del carrusel */
#consejosCarousel .carousel-control-prev,
#consejosCarousel .carousel-control-next {
  display: none;
}

@media (max-width: 992px) {
.consejo-img {
  height: 350px!important;
}
}

/* Icono superior redondo */
.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f4ebff;
  border: 6px solid #f9f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d9ed9;
  font-size: 1.2rem;
}

/* Icono circular de la lista */
.tick-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #fff;
  color: #0d9ed9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Espaciado general */
.info-section img {
  max-width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 767px) {
  .info-section .row {
    text-align: center;
  }

  /* Centramos títulos y párrafos */
  .info-section h3,
  .info-section p {
    text-align: center;
  }

  /* Centramos el icono en móvil */
  .info-icon {
    display: inline-block;
    justify-content: center;
  }

  /* La lista mantiene alineación izquierda */
  .info-section ul {
    text-align: left;
    display: inline-block;
  }

  .list-unstyled li {
    justify-content: flex-start;
  }
}


/* Icono circular */
.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f4ebff;
  border: 6px solid #f9f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d9ed9;
  font-size: 1.5rem;
}

/* Texto */
.info-item h5 {
  font-size: 1.05rem;
}

.info-item p {
  font-size: 0.9rem;
  max-width: 90%;
  margin: 0 auto;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 767px) {
  .info-item p {
    max-width: 100%;
  }
}

/* ===== Breadcrumb centrado debajo del H1 ===== */
.hero-cabecera .hero-content {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 100%;
}

.hero-cabecera .hero-breadcrumb-centered {
  display: inline-block;
  background: none;
}

.hero-cabecera .hero-breadcrumb-centered .breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
}

.hero-cabecera .hero-breadcrumb-centered .breadcrumb-item {
  color: #fff;
  font-weight: 500;
}

.hero-cabecera .hero-breadcrumb-centered .breadcrumb-item a {
  color: #fff;
  text-decoration: none;
}

.hero-cabecera .hero-breadcrumb-centered .breadcrumb-item a:hover {
  text-decoration: underline;
}

.hero-cabecera .hero-breadcrumb-centered .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: rgba(255, 255, 255, 0.8);
  padding: 0 0.4rem;
}

/* Responsive ajustes */
@media (max-width: 768px) {
  .hero-cabecera .hero-title {
    font-size: 1.8rem;
  }
  .hero-cabecera .hero-breadcrumb-centered {
    font-size: 0.9rem;
  }
}

/* ===== Hero Tiempo ===== */
.hero-tiempo {
  height: 75vh;
  overflow: hidden;
  position: relative;
}

.hero-tiempo .hero-bg {
  object-fit: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.hero-tiempo .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.hero-tiempo .container {
  position: relative;
  z-index: 2;
}

/* ===== Breadcrumb ===== */
.breadcrumb-tiempo .breadcrumb {
  background: none;
  padding: 0;
}

.breadcrumb-tiempo .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: rgba(255, 255, 255, 0.8);
  padding: 0 0.4rem;
}

.breadcrumb-tiempo a {
  color: #fff;
  text-decoration: none;
}

.breadcrumb-tiempo a:hover {
  text-decoration: underline;
}

/* ===== Tarjeta del tiempo ===== */
.weather-card {
  max-width: 530px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  border-radius: 12px;
}

.weather-card p {
  color: #fff;
}

.weather-card .form-select {
  background-color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.weather-card .btn-primary {
  background-color: #0d9ed9;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .weather-card {
    max-width: 90%;
    padding: 1.5rem;
  }
  .weather-card .d-flex {
    flex-direction: column;
    gap: 0.5rem;
  }
  .weather-card .btn-primary,
  .weather-card .form-select {
    width: 100%;
  }
}

/* ===== Hero ===== */
.hero-reservas {
  height: 92vh;
  overflow: hidden;
  position: relative;
}

.hero-reservas .hero-bg {
  object-fit: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-reservas .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1; /* Aseguramos que esté debajo de todo el contenido */
}

/* Hero content centrado y visible */
.hero-content {
  z-index: 2;
  text-align: center;
}

/* Breadcrumb por encima del overlay */
.breadcrumb-hero {
  position: relative;
  z-index: 3;
}

/* ===== Miga de pan ===== */
.breadcrumb-hero .breadcrumb {
  background: none;
  padding: 0;
}

.breadcrumb-hero .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: rgba(255, 255, 255, 0.8);
  padding: 0 0.4rem;
}

/* Pestañas */
.nav-tabs {
  border: none;
}

.nav-tabs .nav-link {
  border: 1px solid #ccc;
  background: #fff;
  color: #9e9e9e;
  border-radius: 6px;
  margin-right: 0.5rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.nav-tabs .nav-link.active {
  background: #0d9ed9;
  color: #fff;
  border-color: #0d9ed9;
}

/* Inputs */
.form-label {
  font-size: 0.9rem;
  font-weight: 600;
}

.form-control, .form-select {
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.9rem;
  padding: 0.6rem 0.75rem;
  background-color: #fff;
}

/* Botón */
.btn-primary {
  background: #0d9ed9;
  border: none;
  border-radius: 8px;
  font-weight: 500;
}

.btn-primary:hover {
  background: #0b8bc0;
}

/* Responsive */
@media (max-width: 768px) {
  .form-box {
    padding: 1rem;
  }
  .nav-tabs {
    flex-direction: column;
  }
  .nav-tabs .nav-link {
    margin-bottom: 0.5rem;
    width: 100%;
  }
}

.hero-content .info-box,
.hero-content .form-box {
  width: 100%;
  max-width: 100%;
}

/* Ajuste visual: mantener centrado el texto pero expandir el fondo */
.hero-content .info-box {
  background: rgba(33, 33, 33, 0.5);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  text-align: center;
}

/* Caja blanca con pestañas */
.hero-content .form-box {
  background: #fff;
  border: 8px solid #b2b2a6;
  border-radius: 12px;
  text-align: left;
}

.galeria-item {
  overflow: hidden;
  position: relative;
  height: 280px;
}

.galeria-item img {
  transition: transform 0.5s ease;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Capa oscura */
.galeria-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.4s ease;
}

/* Título */
.galeria-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}

/* Hover efecto */
.galeria-item:hover img {
  transform: scale(1.05);
}

.galeria-item:hover .galeria-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* Responsivo */
@media (max-width: 768px) {
  .galeria-item {
    height: 200px;
  }
}

.card-inspiracion {
  height: 320px;
}

.card-inspiracion img {
  transition: transform 0.5s ease;
  height: 100%;
  object-fit: cover;
}

/* Capa negra translúcida */
.card-overlay {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.6) 0%,     /* negro translúcido a la izquierda */
    rgba(0, 0, 0, 0) 50%,      /* transparente en el centro */
    rgba(0, 0, 0, 0.6) 100%    /* negro translúcido a la derecha */
  );
  transition: background 0.4s ease;
}

/* Hover efecto */
.card-inspiracion:hover img {
  transform: scale(1.05);
}

.card-inspiracion:hover .card-overlay {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* Enlace hover */
.card-overlay a:hover {
  color: #0d9ed9;
}

/* Responsivo */
@media (max-width: 768px) {
  .card-inspiracion {
    height: 250px;
  }
}

/* Alinear texto dentro de las tarjetas a la izquierda */
.card-inspiracion .card-overlay {
  text-align: left;
}



.actividades-section {
  background-color: #fdfbf8;
}

.cards-scroll-container {
  max-height: 750px;      /* altura visible */
  overflow-y: auto;       /* solo scroll vertical */
  overflow-x: hidden;     /* oculta scroll horizontal */
  padding-right: 8px;     /* pequeño espacio para el scroll */
  margin-right: -8px;     /* compensa el padding para alinear bien */
  scrollbar-width: thin;  /* opcional - Firefox */
  scrollbar-color: #ccc transparent; /* opcional - Firefox */
}


.actividad-card {
  height: 100%;
}

.img-wrapper img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.price-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fff;
  color: #000;
  font-weight: 600;
  border-radius: 50px;
  padding: 5px 12px;
  font-size: 0.85rem;
}

.leaflet-map {
  width: 100%;
  height: 750px; /* igual que el contenedor izquierdo */
}

/* Responsivo */
@media (max-width: 768px) {
	.img-wrapper img {
	  height: 150px;
	}
	.leaflet-map {
	  height: 400px; /* igual que el contenedor izquierdo */
	}
	.cards-scroll-container {
    max-height: none;      /* elimina límite de altura */
    overflow: visible;     /* muestra todo el contenido */
    padding-right: 0;
    margin-right: 0;
  }
}



.vuelos-section {
  background-color: #fdfbf8;
}

#mapa-vuelos {
  width: 100%;
  height: 400px;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
}

/* Panel lateral */
.vuelos-panel {
  background: #fff;
  border-radius: 0 12px 12px 0;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
}

.vuelos-panel select {
  border: 1px solid #ccc;
  color: #333;
}

/* Botón azul */
.vuelos-panel .btn-primary {
  background-color: #0d9ed9;
  border: none;
  font-weight: 500;
  border-radius: 25px;
  transition: background-color 0.3s ease;
}

.vuelos-panel .btn-primary:hover {
  background-color: #0b8bc0;
}

/* Responsive */
@media (max-width: 991.98px) {
  #mapa-vuelos {
	border-radius: 12px;
    height: 300px;
    margin-bottom: 1rem;
  }
  .vuelos-panel {
	border-radius: 12px;
  }
}

.c-primary {
  color: #0d9ed9!important;
}

.c-primary:hover {
  color: #ffffff!important;
}

.articulo .breadcrumb a {
  color: #212121!important;
  text-decoration:none;
}

/* === BOTÓN PERSONALIZADO === */
.custom-toggler {
  border: none;
  background-color: #0d9ed9; /* Azul corporativo */
  padding: 10px;
  border-radius: 12px;
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 45px;
  height: 40px;
  color:transparent;
}

.custom-toggler:hover {
  background-color: #0b8bc0;
}

/* === BARRAS === */
.toggler-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
  transition: all 0.3s ease-in-out;
}

/* === ANIMACIÓN: CONVERTIR EN “X” === */
.custom-toggler:not(.collapsed) .top-bar {
  transform: translateY(7px) rotate(45deg);
}

.custom-toggler:not(.collapsed) .middle-bar {
  opacity: 0;
}

.custom-toggler:not(.collapsed) .bottom-bar {
  transform: translateY(-7px) rotate(-45deg);
}

/*
.text-muted {
    color: #9e9e9e !important;
}*/

.bip{
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: currentColor;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	font-size:1.5rem;
}
.bi-lupa {
	background-image: url("img/lupa.svg");
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: currentColor;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.bi-lg {
  width: 1.3em;
  height: 1.3em;
}


.bi-tripadvisor {background-image: url("img/tripadvisor.svg");}
.bi-cama {background-image: url("img/cama.svg");}
.bi-oficina {background-image: url("img/oficina.svg");}
.bi-mapas {background-image: url("img/mapas.svg");}
.bi-apps {background-image: url("img/apps.svg");}
.bi-restaurantes {background-image: url("img/restaurantes.svg");}
.bi-como {background-image: url("img/como.svg");}
.bi-transportes {background-image: url("img/transportes.svg");}
.bi-infinito {background-image: url("img/infinito.svg");}
.bi-playa {background-image: url("img/playa.svg");} 
.bi-naturaleza {background-image: url("img/naturaleza.svg");}
.bi-rutas {background-image: url("img/rutas.svg");}
.bi-gastronomia {background-image: url("img/gastronomia.svg");}
.bi-cultura {background-image: url("img/cultura.svg");}
.bi-buceo {background-image: url("img/buceo.svg");}
.bi-golf {background-image: url("img/golf.svg");}
.bi-interes {background-image: url("img/interes.svg");}
.bi-visitas {background-image: url("img/visitas.svg");}
.bi-patrimonio {background-image: url("img/patrimonio.svg");}
.bi-salud {background-image: url("img/salud.svg");}
.bi-doc {background-image: url("img/doc.svg");}
.bi-carta {background-image: url("img/carta.svg");}
.bi-telefono {background-image: url("img/telefono.svg");}
.bi-avion {background-image: url("img/avion.svg");}
.bi-tren {background-image: url("img/tren.svg");}
.bi-coche {background-image: url("img/coche.svg");}
.bi-transfer {background-image: url("img/transfer.svg");}
.bi-taxis {background-image: url("img/taxis.svg");}
.bi-tranvia {background-image: url("img/tranvia.svg");}
.bi-ferris {background-image: url("img/ferris.svg");}
.bi-turisticos {background-image: url("img/turisticos.svg");}
.bi-bicis {background-image: url("img/bicis.svg");}
.bi-autocar {background-image: url("img/autocar.svg");}
.bi-puertos {background-image: url("img/puertos.svg");}
.bi-patinete {background-image: url("img/patinetes.svg");}
.bi-sanidad {background-image: url("img/sanidad.svg");}
.bi-seguridad {background-image: url("img/seguridad.svg");}
.bi-documentos {background-image: url("img/documentos.svg");}
.bi-euros {background-image: url("img/euros.svg");}
.bi-reloj {background-image: url("img/reloj.svg");}
.bi-llamada {background-image: url("img/llamada.svg");}
.bi-reclamacion {background-image: url("img/reclamacion.svg");}
.bi-datos {background-image: url("img/datos.svg");}
.bi-senderista {background-image: url("img/senderista.svg");}
.bi-hoja {background-image: url("img/hoja.svg");}
.bi-pies {background-image: url("img/pies.svg");}
.bi-copa {background-image: url("img/copa.svg");}
.bi-playas {background-image: url("img/playas.svg");}
.bi-retrato {background-image: url("img/retrato.svg");}
.bi-entrada {background-image: url("img/entrada.svg");}
.bi-bandera {background-image: url("img/bandera.svg");}
.bi-comer {background-image: url("img/comer.svg");}
.bi-hacer {background-image: url("img/hacer.svg");}
.bi-llegar {background-image: url("img/llegar.svg");}
.bi-infotur {background-image: url("img/infotur.svg");}
.bi-topten {background-image: url("img/topten.svg");}
.bi-festival {background-image: url("img/festival.svg");}

.bi-naturaleza-w {background-image: url("img/naturaleza-w.svg");}
.bi-naturaleza-b {background-image: url("img/naturaleza-b.svg");}
.bi-playa-b {background-image: url("img/playa-b.svg");}
.bi-ocio-b {background-image: url("img/ocio-b.svg");}
.bi-golf-b {background-image: url("img/golf-b.svg");}
.bi-buceo-b {background-image: url("img/buceo-b.svg");}
.bi-senderos-b {background-image: url("img/senderos-b.svg");}
.bi-ciudad-b {background-image: url("img/ciudad-b.svg");}
.bi-vinos-b {background-image: url("img/vinos-b.svg");}
.bi-teatro-b {background-image: url("img/teatro-b.svg");}
.bi-family-b {background-image: url("img/family.svg");}
.bi-nature-b {background-image: url("img/nature.svg");}
.bi-beer-b {background-image: url("img/beer.svg");}
.bi-festival-b {background-image: url("img/festival.svg");}

/* === Agenda del megamenú (colocación imagen IZQ + texto DER) === */
#contenido-agenda .col-md-4 {
  display: flex;
  flex-direction: column;
  gap: 14px;               /* separación vertical entre tarjetas */
}

/* Tarjeta */
#contenido-agenda .evento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border-radius: 8px;
  padding: 10px 8px;
  /*height: 100%;*/
  min-height: 92px;         /* misma altura visual para todas */
  box-sizing: border-box;
}

/* Miniatura con tamaño fijo */
#contenido-agenda .thumb-agenda {
  width: 128px;             /* ancho fijo de la miniatura */
  height: 80px;             /* alto fijo de la miniatura */
  flex: 0 0 128px;          /* no crecer/encoger, ocupa 128px */
  object-fit: cover;        /* recorta sin deformar */
}

/* Contenido textual */
#contenido-agenda .evento-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;         /* para alinear con la miniatura */
  flex: 1;
}

/* Título: máximo 2 líneas para uniformidad */
#contenido-agenda .link-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* recorta a 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  font-size: .95rem;
  color: #000;
  margin-bottom: 6px;
  min-height: calc(1.25em * 2); /* reserva alto de 2 líneas */
}

#contenido-agenda .link-titulo2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* recorta a 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  font-size: .95rem;
  color: #000;
  margin-bottom: 6px;
}

/* Localidad */
#contenido-agenda .evento-body .text-muted {
  font-size: .85rem;
  color: #6c757d !important;
  margin: 0;
}

#contenido-actividades .col-md-4 {
  display: flex;
  flex-direction: column;
  gap: 14px;               /* separación vertical entre tarjetas */
}

/* Tarjeta */
#contenido-actividades .evento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border-radius: 8px;
  padding: 10px 8px;
  height: 100%;
  min-height: 92px;         /* misma altura visual para todas */
  box-sizing: border-box;
}

/* Miniatura con tamaño fijo */
#contenido-actividades .thumb-agenda {
  width: 128px;             /* ancho fijo de la miniatura */
  height: 80px;             /* alto fijo de la miniatura */
  flex: 0 0 128px;          /* no crecer/encoger, ocupa 128px */
  object-fit: cover;        /* recorta sin deformar */
}

/* Contenido textual */
#contenido-actividades .evento-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;         /* para alinear con la miniatura */
  flex: 1;
}

/* Título: máximo 2 líneas para uniformidad */
#contenido-actividades .link-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* recorta a 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  font-size: .95rem;
  color: #000;
  margin-bottom: 6px;
  min-height: calc(1.25em * 2); /* reserva alto de 2 líneas */
}

/* Localidad */
#contenido-actividades .evento-body .text-muted {
  font-size: .85rem;
  color: #6c757d !important;
  margin: 0;
}

/* Modal limpio y elegante */
#searchModal .modal-content {
  border-radius: 1rem;
  background: #fff;
}

#searchModal .form-control {
  border-radius: 0.75rem;
  border: 1px solid #ddd;
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
}

#searchModal .form-control:focus {
  border-color: #0d9ed9;
  box-shadow: 0 0 0 0.25rem rgba(13, 158, 217, 0.25);
}

#searchModal h5 {
  font-weight: 600;
  color: #333;
}

/* Modal base */
#newsletterModal .modal-content {
  border-radius: 1rem;
  background-color: #fff;
}

#newsletterModal .modal-title {
  color: #000;
}

/* Campos obligatorios destacados */
#newsletterModal .form-control.required,
#newsletterModal .form-select.required {
  padding-right: 1.5rem;
}

#newsletterModal .form-control.required::placeholder,
#newsletterModal .form-select.required option:first-child {
  color: #6c757d;
}

#newsletterModal .form-control.required:invalid,
#newsletterModal .form-select.required:invalid {
  border-color: #dc3545; /* rojo tenue */
}

/* Pequeño asterisco interno */
#newsletterModal .form-control.required::after,
#newsletterModal .form-select.required::after {
  content: '*';
  color: #dc3545;
  position: absolute;
  right: 10px;
  top: 10px;
  font-weight: bold;
}

/* Estilo de foco */
#newsletterModal .form-control:focus,
#newsletterModal .form-select:focus {
  border-color: #0d9ed9;
  box-shadow: 0 0 0 0.25rem rgba(13, 158, 217, 0.25);
}

/* Botón */
#newsletterModal .btn-primary {
  background-color: #0d9ed9;
  border: none;
  transition: background-color 0.3s ease;
}
#newsletterModal .btn-primary:hover {
  background-color: #0b8cc0;
}

/* Textos */
#newsletterModal p {
  line-height: 1.5;
}

/* Modal de aviso */
#alertModal .modal-content {
  border-radius: 1rem;
  background: #fff;
}

#alertModal p {
  margin: 0;
  line-height: 1.5;
}

#alertModal .btn-primary {
  background-color: #0d9ed9;
  border: none;
  transition: background-color 0.3s ease;
}

#alertModal .btn-primary:hover {
  background-color: #0b8cc0;
}


.texto-recortado {
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* 👈 Número de líneas visibles */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* Opcional: añade "..." al final */
}

.galeria-categorias {
  background-color: #fff;
}

.tarjeta-categoria {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  height: 230px; /* Ajusta la altura de las tarjetas */
}

.tarjeta-categoria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tarjeta-categoria .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease;
}

.tarjeta-categoria .titulo {
  position: absolute;
  bottom: 15px;
  left: 15px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  z-index: 2;
}

/* Efecto hover */
.tarjeta-categoria:hover img {
  transform: scale(1.05);
}

.tarjeta-categoria:hover .overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* Responsive */
@media (max-width: 767px) {
  .tarjeta-categoria {
    height: 180px;
  }
  .tarjeta-categoria .titulo {
    font-size: 1rem;
  }
.hero-carousel .carousel-item img{height:60vh;}
}

.transparente{background-color: transparent!important;}

img.blanco {filter: brightness(0) invert(1);}

img.azul {filter: brightness(0) saturate(100%) invert(46%) sepia(68%) saturate(664%) hue-rotate(159deg) brightness(96%) contrast(95%);}

.enlace {
  color: #0d9ed9;
  text-decoration:none;
}

.enlace:hover {
  color: #0b8bc0;
  text-decoration:underline;
  font-weight:bold;
}

.contenedor {
  display: flex;
  flex-direction: column;
}
.pos1 { order: 1; }
.pos2 { order: 2; }

/* CONTENEDOR GENERAL CON PATRÓN 2-3-2-3... */
.grid-tarjetas-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center; /* ⬅ centra la última fila si está incompleta */
}

/* Tarjeta base */
.tarjeta-actividad {
  display: block;
  background-color: #f9fafb;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Por defecto: 2 tarjetas por fila (50%) */
.tarjeta-actividad {
  flex: 0 0 calc(50% - 12px);
}

/* Fila 2, 4, 6… → 3 tarjetas por fila (33.33%) */
/* Elementos 3,4,5 — 8,9,10 — 13,14,15… */
.grid-tarjetas-alt > .tarjeta-actividad:nth-child(5n + 3),
.grid-tarjetas-alt > .tarjeta-actividad:nth-child(5n + 4),
.grid-tarjetas-alt > .tarjeta-actividad:nth-child(5n + 5) {
  flex: 0 0 calc(33.333% - 16px);
}

/* Imagen */
.tarjeta-img-wrapper {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.tarjeta-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texto de la tarjeta */
.tarjeta-titulo {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 12px 16px 4px;
  color: #111;
}

.tarjeta-texto {
  font-size: 0.85rem;
  margin: 0 16px 14px;
  color: #6c757d;
}

/* Hover */
.tarjeta-actividad:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* 📱 Versión móvil: una tarjeta por fila */
@media (max-width: 767.98px) {
  .tarjeta-actividad,
  .grid-tarjetas-alt > .tarjeta-actividad:nth-child(5n + 3),
  .grid-tarjetas-alt > .tarjeta-actividad:nth-child(5n + 4),
  .grid-tarjetas-alt > .tarjeta-actividad:nth-child(5n + 5) {
    flex: 0 0 100%;
  }
}

/* Contenedor principal */
.modal-tarjeta-content {
  border-radius: 24px;
  padding-top: 0;
  overflow: hidden;
  position: relative;
  border: none;
  background:#ffffff;
}

/* Imagen arriba, bordes redondeados */
.modal-img-top {
  width: 100%;
  height: auto;
  border-radius: 20px;
  margin: 20px auto 0;
  display: block;
  max-width: 92%;
}

/* Título */
.modal-titulo {
  font-size: 26px;
  font-weight: 700;
  color: #000;
  margin-bottom: 15px;
}

/* Texto */
.modal-texto {
  color: #6c757d;
  font-size: 17px;
  line-height: 1.55;
  max-width: 85%;
  margin: 0 auto;
}

/* Botón cerrar */
.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 16px;
  background: #ffffff;
  border-radius: 50%;
  padding: 8px 8px;
  z-index: 10;
  border: 1px solid #ddd;
  color: #333;
}

.modal-close-btn:hover {
  background: #fff;
  color: #000;
}


.banner-turismo {
  position: relative;
/*  min-height: 464px;*/
  max-height: 464px;
}

.banner-img {
  height: 100%;
  object-fit: cover;
}

/* capa negra translúcida */
.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* contenedor del contenido */
.banner-inner {
  position: absolute;
  inset: 0;
  padding: 2.5rem 3rem;
}

/* textos */
.banner-title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.banner-subtext {
  color: #f3f3f3;
  font-size: 0.95rem;
  max-width: 40rem;
}

/* botones */
.banner-btn {
  background-color: #0d9ed9;
  color: #fff;
  border-radius: 999px;
  padding: 0.6rem 1.8rem;
  font-weight: 500;
  border: none;
  white-space: nowrap;
}

.banner-btn:hover {
  background-color: #0b8abf;
  color: #fff;
}

/* Responsive: en móvil apilamos texto y botones centrados */
@media (max-width: 767.98px) {
  .banner-inner {
    /*flex-direction: column;*/
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
  }

  .banner-text {
    margin-bottom: 1.5rem;
  }

  .banner-actions {
    align-items: center;
  }
}


.breadcrumb a{color:#000000;}
.breadcrumb a:hover{color:#0d9ed9;}

/* Caja principal */
.agenda-card-calendar {
  border-radius: 1.5rem;
}

/* Columna calendario con separador vertical */
.agenda-calendar-column {
  border-right: 1px solid #e5e7eb;
  padding-right: 1.5rem;
}

@media (max-width: 991.98px) {
  .agenda-calendar-column {
    border-right: 0;
    border-bottom: 1px solid #e5e7eb;
    padding-right: 0;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

/* -------- Flatpickr dentro del calendario -------- */
.agenda-calendar-flatpickr .flatpickr-calendar {
  box-shadow: none;
  border: 0;
  width: 100%;
  font-size: 0.9rem;
}

.agenda-calendar-flatpickr .flatpickr-weekdays {
  margin-bottom: 0.35rem;
}

/* Ocultamos la cabecera de mes propia de flatpickr (usamos la nuestra) */
.agenda-calendar-flatpickr .flatpickr-months {
  display: none;
}

.agenda-calendar-flatpickr .flatpickr-day {
  border-radius: 999px;
  height: 2.35rem;
  width: 2.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.05rem auto;
  color: #111827;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

/* Días de otros meses en gris */
.agenda-calendar-flatpickr .flatpickr-day.prevMonthDay,
.agenda-calendar-flatpickr .flatpickr-day.nextMonthDay {
  color: #9ca3af;
}

/* Hover suave */
.agenda-calendar-flatpickr .flatpickr-day:hover {
  background-color: #e5f4fb;
}

/* Día seleccionado */
.agenda-calendar-flatpickr .flatpickr-day.selected,
.agenda-calendar-flatpickr .flatpickr-day.startRange,
.agenda-calendar-flatpickr .flatpickr-day.endRange {
  background: #0d9ed9;
  color: #ffffff;
  font-weight: 600;
}

/* Días con eventos (además del seleccionado) */
.agenda-calendar-flatpickr .flatpickr-day.agenda-day-hasevent {
  background: #0d9ed9;
  color: #ffffff;
  font-weight: 600;
}

/* Botones de cambio de mes */
.agenda-month-btn {
  border: none;
  border-radius: 999px;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #faf7f0;
  color: #d9c7a1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.agenda-month-btn:hover {
  box-shadow: 0 0 0 3px rgba(217, 199, 161, 0.15);
  transform: translateY(-1px);
}

/* Título listado de eventos */
.agenda-events-title {
  font-weight: 600;
  color: #111827;
}

.agenda-events-underline {
  height: 1px;
  width: 100%;
  background-color: #e5e7eb;
}

/* Scroll eventos */
.agenda-events-scroll {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* Caja de cada evento */
.agenda-event-item {
  background-color: #f9fafb;
  border-radius: 0.75rem 0 0 0.75rem;
  padding: 0;
}

.agenda-event-image-wrapper {
  width: 200px;
  height: 200px;
  border-radius: 0.75rem 0 0 0.75rem;
  overflow: hidden;
}

.agenda-event-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Textos evento */
.agenda-event-title {
  font-size: 0.97rem;
  font-weight: 600;
  color: #111827;
}

.agenda-event-meta {
  font-size: 0.8rem;
  color: #6b7280;
}

/* Etiqueta tipo de evento */
.agenda-event-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background-color: #e0eff6;
  border: 1px solid #0d9ed9;
  color: #0d9ed9;
  white-space: nowrap;
}

/* Enlace "Descubrir más" */
.agenda-event-link {
  font-weight: 500;
  text-decoration: none;
  color: #0d9ed9;
}

.agenda-event-link:hover {
  text-decoration: underline;
}

.agenda-tag {
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background-color: #e0eff6;
  border: 1px solid #0d9ed9;
  color: #0d9ed9;
  white-space: nowrap;
  max-width: 50%;
  text-align: center;
}
.flatpickr-calendar, .flatpickr-rContainer, .flatpickr-days, .dayContainer{width:100%;font-size:1.2rem;}
.dayContainer{min-width: 100%;}
.flatpickr-day{max-width: unset;margin:3px 1px;width:13.285714%;flex-basis:13.285714%;}
.flatpickr-prev-month, .flatpickr-next-month,.flatpickr-months{display:none;}
.flatpickr-calendar{padding:1rem;}

.agenda-day-hasevent {
  background: #0d9ed9;
  color: #ffffff;
  font-weight: 600;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #0d9ed9;
    border-color: #0d9ed9;
}


@media (max-width: 767.98px) {
.agenda-event-image-wrapper {
  width: 150px;
  height: 150px;
}
.agenda-tag {
  max-width: 90%;
}
}

/* Scroll rojo para el listado de eventos */
.agenda-events-scroll::-webkit-scrollbar {
  width: 8px;
}

.agenda-events-scroll::-webkit-scrollbar-track {
  background: #f0f0f0;      /* color del fondo de la pista */
  border-radius: 10px;
}

.agenda-events-scroll::-webkit-scrollbar-thumb {
  background: #0d9ed9;           /* color del scroll */
  border-radius: 10px;
}

.agenda-events-scroll::-webkit-scrollbar-thumb:hover {
  background: #0d9ed9;       /* tono más oscuro en hover */
}

.flatpickr-calendar {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.flatpickr-calendar {
padding:0;
}

/* Fondo general */
.acordeon-section {
}

/* Contenedor de las 4 tarjetas */
.acordeon-wrapper {
  display: flex;
  gap: 1rem;
}

/* Tarjeta base */
.acordeon-card {
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  flex: 1; /* por defecto pequeña */
  cursor: pointer;
  transition:
    flex 0.35s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

/* La tarjeta “grande” ocupa más espacio */
.acordeon-card.is-large {
  flex: 3;
}

/* Efecto visual al pasar el ratón */
.acordeon-card:hover {
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
  transform: translateY(-3px);
}

/* Imagen */
.acordeon-card-image {
  flex: 0 0 auto;
  height: 400px;
  padding:1.5rem 1.5rem 0 1.5rem;
}

.acordeon-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contenido */
.acordeon-card-body {
  flex: 1 1 auto;
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
}


/* Texto descriptivo (gris) */
.acordeon-card-text {
  margin-top: 0.75rem;
}

/* --- Diferencias entre tarjeta grande y pequeñas --- */

/* En las tarjetas pequeñas el texto no se ve y el título baja abajo */
.acordeon-card:not(.is-large) .acordeon-card-body {
  justify-content: flex-end;
}

.acordeon-card:not(.is-large) .acordeon-card-text {
  display: none;
}

/* En la grande el contenido se comporta normal (título + texto) */
.acordeon-card.is-large .acordeon-card-body {
  justify-content: flex-start;
}

/* Responsive: en móvil se apilan, sin efecto acordeón visual forzado */
@media (max-width: 991.98px) {
  .acordeon-wrapper {
    flex-direction: column;
  }
  .acordeon-card,
  .acordeon-card.is-large {
    flex: 1;
    min-height: 360px;
  }
 }

@media (max-width: 767.98px) {
.acordeon-card-image {
  height: 260px;
}
}

.hero-bg-car {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.hero-bg-car {
  object-fit: cover;
  z-index: 0;
}

@media (max-width: 767.98px) {
.hero-bg-car {
  height:50vh;
}
}

.hero-bg-list {
  width: 100%;
  height: 50vh;
  object-fit: cover;
  object-position: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.hero-bg-list {
  object-fit: cover;
  z-index: 0;
}

@media (max-width: 767.98px) {
.hero-bg-list {
  height:50vh;
}
.lugar-img {
  position: relative;
  aspect-ratio: auto;
  overflow: hidden;
}
}



/* Altura completa y posición */
.hero-carousel {
  min-height: 92vh;
}

/* Cada slide usa imagen de fondo */
.hero-slide {
  position: relative;
  min-height: 92vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Contenido */
.hero-content {
  position: relative;           /* por encima del overlay */
    text-align: left;
}

.hero-control-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background-color: #0d9ed9;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  color: #fff;
  font-size: 1.4rem;
}

/* Mitad dentro, mitad fuera del hero */
.hero-carousel .carousel-control-prev  {
  left:40px;
  width: 52px;
  height: 52px;
  top:50%;
}

.hero-carousel .carousel-control-next {
  right:40px;
  width: 52px;
  height: 52px;
  top:50%;
}

/* Responsive: centramos un poco mejor en móvil */
@media (max-width: 767.98px) {
  .hero-content {
    text-align: left;
  }
.hero-carousel .carousel-control-prev  {
  width:auto;
  top:80%;
}

.hero-carousel .carousel-control-next {
  width:auto;
  top:80%;
}
.link-lateral {
  font-size: 1rem;
}

}

.slide-inner {
  position: relative;
  height: 100vh;
}

.icono-ficha img {
  display: inline-flex;
  height: 28px;
}

.iqh{background-color:#e6f5fc;width:40px;height:40px;border-radius: 50% !important;padding: .5rem !important;}
.ibull{font-size: 0.5rem !important;color:#0d9ed9;}

.cal2-section{
  background:#f9fafb;
}

/* Contenedor blanco redondeado */
.cal2-card{
  background:#fff;
  border-radius:28px;
  padding:28px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* Top bar */
.cal2-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

/* Pastilla con días 1..31 */
.cal2-days-pill{
  background:#f7f7f7;
  border-radius:999px;
  padding:12px 18px;
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow:hidden;
  /*max-width: 72%;*/
}

.cal2-days-pill span{
  font-size:.95rem;
  color:#111827;
  line-height:1;
  white-space:nowrap;
}

.cal2-month{
  color:#0d9ed9;
  font-weight:600;
  font-size:1.25rem;
  white-space:nowrap;
}

/* Wrapper para que en móvil haya scroll horizontal */
.cal2-grid-wrap{
  overflow-x:auto;
  padding-bottom:6px;
}

/* Grid de 7 columnas */
.cal2-grid{
  min-width: 980px; /* fuerza aspecto de escritorio */
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  border-left:1px solid #e0e0e0;
  border-top:1px solid #e0e0e0;
}

/* Celdas */
.cal2-cell{
  border-right:1px solid #e0e0e0;
  border-bottom:1px solid #e0e0e0;
  background:#fff;
  position:relative;
}

/* Primera fila (cabecera de cada día) */
.cal2-head{
  height:72px;
  padding:10px 12px;
}

.cal2-dayname{
  font-size:.72rem;
  color:#111827;
  opacity:.85;
}

.cal2-daynum{
  margin-top:2px;
  font-size:1.2rem;
  font-weight:500;
  color:#111827;
}

/* Filas de “contenido” (rejilla alta) */
.cal2-slot{
  min-height: 84px;   /* altura mínima visual */
  padding:10px;
  height: auto;       /* CLAVE */
}

/* Fondos por columna */
.cal2-col-fri{
  background:#f9fafb;
}

.cal2-col-sun{
  background:#fdfbf8;
}

/* Evento */
.cal2-event{
  background:#d8eff9;
  border-radius:6px;
  padding:10px 12px;
  /*height:100%;*/
  position:relative;
  border-left:4px solid #0d9ed9;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.cal2-event-time{
  color:#0d9ed9;
  font-size:.95rem;
  font-weight:700;
  line-height:1.1;
}

.cal2-event-title{
  margin-top:2px;
  color:#0d9ed9;
  font-size:.82rem;
  font-weight:600;
  line-height:1.15;
}

.cal2-event-place{
  color:#0d9ed9;
  font-size:.75rem;
  line-height:1.1;
  opacity:.95;
}

/* Flecha/link */
.cal2-event-link{
  position:absolute;
  right:10px;
  bottom:10px;
  color:#0d9ed9;
  text-decoration:none;
  font-size:1rem;
  line-height:1;
}

.cal2-event-link:hover{
  text-decoration:underline;
}

@media (max-width: 767.98px) {
.cal2-top{
  display:block;
}
.cal2-days-pill {
margin-bottom: 10px; 
max-width: fit-content;
display: inline-flex
}}

/* Modal tarjeta */
.modal-ficha {
  border: 0;
  border-radius: 18px;
  background-color:#ffffff;
}

/* Imagen superior */
.modal-ficha-img img {
  border-radius: 14px;
  object-fit: cover;
  max-height: 320px; /* ajusta si quieres más/menos alto */
}

/* Título */
.modal-ficha-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111827;
}

/* Descripción gris */
.modal-ficha-desc {
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Bloque info */
.modal-ficha-label {
  color: #111827;
  font-weight: 500;
}

.modal-ficha-value {
  color: #111827;
}

.modal-ficha-link {
  color: #0d9ed9;
  text-decoration: none;
  font-weight: 500;
}

.modal-ficha-link:hover {
  text-decoration: underline;
}

/* Nota */
.modal-ficha-note {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Botones iguales (alto y radios como en la captura) */
.modal-ficha-btn {
  border-radius: 999px;
  padding: 0.9rem 1rem;
  font-weight: 500;
}

.blue{color: #0d9ed9;}