/* Estilos generales para Magia Cafetera */
:root {
  --color-primary: #5D4037; /* Marrón café */
  --color-secondary: #8D6E63; /* Marrón más claro */
  --color-accent: #A1887F; /* Tono terracota */
  --color-highlight: #C8E6C9; /* Verde claro (plantas de café) */
  --color-dark: #3E2723; /* Café oscuro */
  --color-light: #EFEBE9; /* Beige claro */
  --color-white: #FFFFFF;
  --color-text: #212121;
  --color-text-light: #757575;
  --font-main: 'Lato', sans-serif;
  --font-headings: 'Cinzel', serif;
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --radius: 8px;
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-light);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.8rem;
}

h2 {
  font-size: 2.2rem;
  text-align: center;
  margin: 2rem 0;
  position: relative;
}

h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background-color: var(--color-accent);
  margin: 0.5rem auto;
}

h3 {
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--color-accent);
}

/* Sistema unificado de botones */
.btn {
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0);
  opacity: 0;
  border-radius: inherit;
  transition: transform 0.5s, opacity 0.3s;
}

.btn:hover::after {
  transform: scale(1.5);
  opacity: 0;
}

.btn:active::after {
  transform: scale(0);
}

.btn-primario, .btn-pago, .btn-reservar, .btn-descargar {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
}

.btn-primario:hover, .btn-pago:hover, .btn-reservar:hover, .btn-descargar:hover {
  background-color: var(--color-secondary);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-secundario, .btn-modificar {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-secundario:hover, .btn-modificar:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Eliminar estilos duplicados para garantizar consistencia */
.btn-pago {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.destino button {
  margin: 0 1.5rem 1.5rem;
  width: calc(100% - 3rem);
  border-radius: var(--radius);
  transition: all 0.3s ease;
  letter-spacing: 1px;
  font-family: var(--font-main);
  position: relative;
  overflow: hidden;
  padding: 0.8rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.destino button::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0);
  opacity: 0;
  border-radius: inherit;
  transition: transform 0.5s, opacity 0.3s;
}

.destino button:hover::after {
  transform: scale(1.5);
  opacity: 0;
}

.destino button:first-of-type {
  background-color: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.destino button:first-of-type:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

input, select, textarea {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-size: 1rem;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(161, 136, 127, 0.2);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

section {
  padding: 4rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header y Navegación */
header {
  background-color: var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 4%;
  max-width: 1400px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
}

.logo h1 {
  color: var(--color-white);
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: 0.5px;
}

.nav-links {
  display: flex;
  justify-content: center;
  flex-grow: 1;
}

nav ul {
  display: flex;
  gap: 1.2rem;
}

nav ul li a {
  color: var(--color-white);
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  transition: all 0.2s ease;
  opacity: 0.9;
}

nav ul li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  opacity: 1;
}

/* Estilos para redes sociales en header */
.redes-header {
  display: flex;
  gap: 0.8rem;
}

.redes-header .red-social {
  color: var(--color-white);
  font-size: 1rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: var(--transition);
}

.redes-header .red-social:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
  color: var(--color-white);
}

/* Sección de Inicio */
#inicio {
  background-color: var(--color-white);
  padding-top: 0; /* Elimina el espacio superior */
}

.banner-principal {
  /* Solo imagen de fondo aquí */
  background-image: url('img/PDC.jpg');
  background-size: cover;
  background-position: center;
  /* background-blend-mode: overlay; <-- Removido */
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color-white);
  padding: 0 1rem;
  position: relative; /* Necesario para ::before */
  overflow: hidden; /* Para contener el ::before */
}

/* Pseudo-elemento para el degradado oscuro */
.banner-principal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(62, 39, 35, 0.75), /* var(--color-dark) con más opacidad */
    rgba(62, 39, 35, 0.75)
  );
  z-index: 1; /* Detrás del contenido, sobre la imagen implícita */
}

.banner-principal h2 {
  font-size: 3rem;
  color: var(--color-white);
  margin-bottom: 2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra más oscura para mejor legibilidad */
  position: relative; /* Asegura que el texto esté por encima del degradado */
  z-index: 2; /* Mayor que el ::before */
  max-width: 800px; /* Limita el ancho para mejor legibilidad */
}

/* Estilo del botón del banner alineado con .btn y .btn-primario */
.banner-principal button {
  /* Hereda algunos estilos de .btn si se aplica la clase en HTML, pero definimos aquí para especificidad */
  padding: 1rem 2rem; /* Padding específico más grande */
  font-size: 1.1rem; /* Tamaño de fuente específico */
  font-family: var(--font-main);
  font-weight: 600;
  color: var(--color-white);
  background-color: var(--color-primary); /* Color primario */
  border: none;
  border-radius: var(--radius); /* Bordes redondeados */
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: var(--transition);
  position: relative; /* Para z-index y efectos */
  z-index: 2; /* Sobre el ::before */
  box-shadow: var(--shadow);
}

.banner-principal button:hover {
  background-color: var(--color-secondary);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.video-promocional {
  max-width: 800px;
  margin: 3rem auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video-promocional video {
  width: 100%;
  display: block;
}

/* Sección de Destinos */
#destinos {
  background-color: var(--color-light);
}

/* Estilos para el sidebar de filtros */
.sidebar {
  background-color: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--color-primary);
}

.sidebar h4 {
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--color-accent);
  font-size: 1.3rem;
}

.filtro {
  margin-bottom: 1.5rem;
}

.filtro label {
  display: block;
  margin-bottom: 0.7rem;
  font-weight: 500;
  color: #3E2723;
  font-family: var(--font-main);
}

.filtro select,
.filtro input[type="range"] {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #EFEBE9;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
  font-family: var(--font-main);
  font-size: 0.9rem;
}

.filtro select:focus,
.filtro input[type="range"]:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(161, 136, 127, 0.2);
}

/* Estilo para las opciones dentro del select */
.filtro select option {
  font-family: var(--font-main);
  font-size: 0.85rem;
  color: var(--color-text);
  background-color: white;
  padding: 8px 12px;
}

/* Estilo para el placeholder (primera opción) */
.filtro select option:first-child {
  color: #777;
  font-style: italic;
}

.form-check {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.form-check-input {
  margin-right: 0.5rem;
  cursor: pointer;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-primary);
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  position: relative;
  transition: all 0.2s ease;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input:checked::after {
  content: '✓';
  position: absolute;
  color: white;
  font-size: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-check-label {
  font-size: 0.95rem;
  color: var(--color-text);
  font-family: var(--font-main);
  padding-left: 0.3rem;
  margin-bottom: 0;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-check:hover .form-check-label {
  color: var(--color-primary);
}

.form-check:hover .form-check-input {
  border-color: var(--color-accent);
}

.form-switch {
  padding-left: 2.5rem;
}

.btn-block {
  width: 100%;
  display: block;
  margin-bottom: 0.75rem;
}

.alert {
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.alert-info {
  background-color: rgba(200, 230, 201, 0.5);
  border: 1px solid var(--color-highlight);
  color: var(--color-dark);
}

/* Media queries para responsividad */
@media (max-width: 767px) {
  /* Mejoras para el header y navegación */
  nav {
    padding: 0.6rem;
    flex-wrap: wrap;
  }
  
  .logo {
    flex-basis: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  
  .nav-links {
    order: 2;
    margin: 0 auto;
    width: 100%;
  }
  
  nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.2rem 0;
  }
  
  nav ul li a {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
  }
  
  .redes-header {
    order: 1;
    margin: 0 auto 0.5rem;
  }
  
  /* Mejoras para el manejo de la estructura sidebar + contenido */
  .container {
    padding: 0 1rem;
  }
  
  .row {
    flex-direction: column;
  }
  
  /* Hacer que el sidebar sea desplegable */
  .col-md-3 {
    order: 1;
    width: 100%;
  }
  
  .col-md-9 {
    order: 2;
    width: 100%;
  }
  
  /* Estilos para hacer el sidebar colapsable */
  .sidebar-toggle {
    display: block;
    width: 100%;
    padding: 0.8rem;
    background-color: var(--color-primary);
    color: white;
    text-align: center;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    position: relative;
  }
  
  .sidebar-toggle:before {
    content: '⚙️ Filtros';
    display: inline-block;
  }
  
  .sidebar-toggle:after {
    content: '▼';
    display: inline-block;
    margin-left: 0.5rem;
    transition: transform 0.3s;
  }
  
  .sidebar-toggle.active:after {
    transform: rotate(180deg);
  }
  
  /* Por defecto, ocultar el sidebar en móvil */
  .sidebar {
    display: none;
  }
  
  /* Mostrar cuando está activo */
  .sidebar.active {
    display: block;
    animation: slideDown 0.3s ease;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Mejoras para listas de destinos */
  .lista-destinos {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 0.5rem;
  }
  
  .destino {
    max-width: 100%;
  }
  
  .destino-fotos {
    height: 150px;
  }
  
  /* Ajustes para el mapa interactivo */
  .mapa-interactivo {
    padding: 0;
  }
  
  #mapa-google {
    height: 250px;
  }
}

/* Estilos originales de filtros-destinos (mantener para compatibilidad) */
.filtros-destinos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.lista-destinos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.destino {
  background-color: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.destino:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.1);
}

.destino h3 {
  padding: 1.5rem 1.5rem 0;
}

.destino p {
  padding: 0 1.5rem 1.5rem;
  color: var(--color-text-light);
}

.destino-fotos {
  height: 180px; 
  border-radius: var(--radius); 
  overflow: hidden;
  margin: 0 auto; 
}

.destino-fotos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.5s ease;
}

.destino:hover .destino-fotos img {
  transform: scale(1.05);
}

.destino button {
  margin: 0 1.5rem 1.5rem;
  width: calc(100% - 3rem);
}

.destino button:first-of-type {
  background-color: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.destino button:first-of-type:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.mapa-interactivo {
  max-width: 900px;
  margin: 3rem auto 0;
  padding: 0 1.5rem;
}

#mapa-google {
  height: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Sección Planificador */
#planificador {
  background-color: var(--color-white);
}

.pasos-planificador {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.paso {
  background-color: var(--color-light);
  padding: 2rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
}

.paso h3 {
  color: var(--color-dark);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.info-clima, .eventos-especiales {
  background-color: var(--color-white);
  padding: 1rem;
  border-radius: var(--radius);
  margin: 1.5rem 0;
}

.botones-navegacion {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  gap: 15px;
}

.botones-navegacion button {
  padding: 12px 25px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  border-radius: 25px;
  font-family: 'Montserrat', var(--font-main);
  position: relative;
  overflow: hidden;
}

.botones-navegacion button::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0);
  opacity: 0;
  border-radius: inherit;
  transition: transform 0.5s, opacity 0.3s;
}

.botones-navegacion button:hover::after {
  transform: scale(1.5);
  opacity: 0;
}

.botones-navegacion button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.1);
}

.video-card h4 {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--color-primary);
  font-size: 1.4rem;
}

.video-card .embed-responsive {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

/* Ajustes responsivos para videos */
@media (max-width: 767px) {
  .videos-destinos h3 {
    font-size: 1.6rem;
  }
  
  .video-card h4 {
    font-size: 1.2rem;
  }
}

/* Estilos para el sidebar de filtros - Contenido de sidebar-styles.css */
.sidebar {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-left: 4px solid #5D4037;
}

.sidebar h4 {
  color: #5D4037;
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #A1887F;
  font-size: 1.3rem;
}

.filtro {
  margin-bottom: 1.8rem;
}

.filtro label {
  display: block;
  margin-bottom: 0.7rem;
  font-weight: 500;
  color: #3E2723;
}

.filtro select,
.filtro input[type="range"] {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #EFEBE9;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
}

.filtro select:focus,
.filtro input[type="range"]:focus {
  border-color: #A1887F;
  outline: none;
  box-shadow: 0 0 0 2px rgba(161, 136, 127, 0.2);
}

.form-check {
  margin-bottom: 0.8rem;
  position: relative;
  display: flex;
  align-items: center;
}

.form-check-input {
  margin-right: 0.8rem;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.form-check-input:checked {
  border-color: #5D4037;
  background-color: #5D4037;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25);
}

.form-check-label {
  font-size: 0.95rem;
  color: #212121;
  padding-left: 0.3rem;
  margin-bottom: 0;
  line-height: 1.4;
  font-family: var(--font-main);
}

.form-check:hover .form-check-label {
  color: #5D4037;
}

.form-switch {
  padding-left: 2.5rem;
}

.btn-block {
  width: 100%;
  display: block;
  margin-bottom: 0.75rem;
}

.alert {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.alert-info {
  background-color: rgba(200, 230, 201, 0.5);
  border: 1px solid #C8E6C9;
  color: #3E2723;
}

/* Media queries para responsividad */
@media (max-width: 767px) {
  /* En pantallas pequeñas, convertir sidebar en acordeón desplegable */
  .sidebar {
    border-left: none;
    border-top: 4px solid #5D4037;
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
  }
  
  .sidebar h4 {
    cursor: pointer;
    position: relative;
    margin-bottom: 0;
    font-size: 1.1rem;
    padding-bottom: 0.6rem;
  }
  
  .sidebar h4::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.3rem;
  }
  
  .sidebar.active h4::after {
    content: '-';
  }
  
  .filtros-destinos {
    display: none;
    padding-top: 1rem;
  }
  
  .sidebar.active .filtros-destinos {
    display: block;
    margin-top: 1rem;
  }
  
  .col-md-3, .col-md-9 {
    width: 100%;
  }
  
  /* Ajustes específicos para los form-check en móvil */
  .form-check {
    padding: 0.4rem 0;
  }
  
  .form-check-input {
    min-width: 20px;
  }
  
  /* Reajustar la cuadrícula de destinos */
  .lista-destinos {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* En pantallas medianas, ajustar el tamaño de columnas */
  .col-md-3 {
    width: 35%;
  }
  
  .col-md-9 {
    width: 65%;
  }
}

/* Estilos para redes sociales - Contenido de social-icons.css */
/* Estilos para redes sociales en header */
.redes-header {
    display: flex;
    gap: 0.8rem;
}

.redes-header .red-social {
    color: #FFFFFF;
    font-size: 1rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.redes-header .red-social:hover {
    background-color: #A1887F;
    transform: translateY(-2px);
    color: #FFFFFF;
}

/* Estilos para redes sociales en footer */
.footer-redes {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
}

.footer-redes .red-social {
    color: #EFEBE9;
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.footer-redes .red-social:hover {
    background-color: #A1887F;
    transform: translateY(-3px);
}

/* Estilos para botones sociales en la sección de contacto */
.btn-social {
    display: inline-flex;
    align-items: center;
    background-color: #5D4037;
    color: #FFFFFF;
    font-family: var(--font-main);
    padding: 0.7rem 1.2rem;
    border-radius: 8px;
    margin: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-social i {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.btn-social:hover {
    background-color: #A1887F;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Iconos de contacto en el footer */
.footer-contacto p i {
    width: 20px;
    margin-right: 0.5rem;
    color: #A1887F;
}

/* Mejoras responsivas para redes sociales */
@media (max-width: 992px) {
    .redes-header {
        margin-top: 1rem;
        margin-left: 0;
        justify-content: center;
    }
    
    .iconos-redes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .btn-social {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
        margin: 0.5rem;
    }
}

@media (max-width: 576px) {
    .redes-header .red-social {
        font-size: 1rem;
        width: 28px;
        height: 28px;
    }
    
    .footer-redes {
        justify-content: center;
    }
    
    .btn-social {
        width: 100%;
        justify-content: center;
        margin: 0.3rem 0;
    }
}

/* Mejoras para el resumen del viaje e itinerario */
.resumen-viaje {
  background-color: var(--color-white);
  border-radius: var(--radius);
  padding: 1.8rem;
  margin-bottom: 2rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--color-primary);
}

.resumen-viaje h4 {
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--color-accent);
  font-size: 1.4rem;
}

.resumen-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  align-items: center;
}

.resumen-item strong {
  color: var(--color-dark);
  font-weight: 600;
  font-size: 1.05rem;
  font-family: var(--font-main);
}

.resumen-item span {
  padding: 0.7rem;
  background-color: var(--color-light);
  border-radius: 6px;
  font-size: 1.05rem;
}

.resumen-item.resumen-costo span {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.2rem;
  background-color: rgba(200, 230, 201, 0.3);
}

.itinerario-container {
  background-color: var(--color-white);
  border-radius: var(--radius);
  padding: 1.8rem;
  margin-top: 2rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  border-left: 4px solid var(--color-accent);
}

.itinerario-container h4 {
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--color-accent);
  font-size: 1.4rem;
}

.dia-itinerario {
  margin-bottom: 2rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px dashed var(--color-accent);
}

.dia-itinerario:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dia-itinerario h5 {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  display: inline-block;
  margin-bottom: 1.2rem;
  font-size: 1.15rem;
}

.franja-horaria {
  margin-bottom: 1.5rem;
  padding-left: 1.2rem;
  border-left: 3px solid var(--color-light);
}

.franja-horaria h6 {
  color: var(--color-dark);
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
}

.franja-horaria ul {
  list-style: disc;
  margin-left: 1.5rem;
}

.franja-horaria ul li {
  margin-bottom: 0.5rem;
  color: var(--color-text);
  line-height: 1.6;
  font-size: 1.05rem;
}

.notas-itinerario {
  background-color: var(--color-highlight);
  padding: 1.2rem;
  border-radius: var(--radius);
  margin-top: 1.5rem;
}

.notas-itinerario p {
  margin-bottom: 0.8rem;
}

.notas-itinerario ul {
  list-style: disc;
  margin-left: 1.5rem;
}

.notas-itinerario ul li {
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.acciones-itinerario {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.btn-descargar, .btn-compartir {
  min-width: 200px;
}

/* Estilos responsivos para el resumen */
@media (max-width: 768px) {
  .resumen-item {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  
  .resumen-item strong {
    margin-bottom: 0.3rem;
  }
  
  .franja-horaria {
    padding-left: 1rem;
  }
  
  .acciones-itinerario {
    flex-direction: column;
  }
  
  .btn-descargar, .btn-compartir {
    width: 100%;
  }
}

/* Estilo para el botón modificar desde el resumen */
.btn-modificar-desde-resumen {
    display: block;
    background-color: var(--color-primary);
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: var(--radius);
    margin-top: 15px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

.btn-modificar-desde-resumen:hover {
    background-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Mejorar los estilos para el comparador de precios */
.comparador-precios {
    margin-top: 30px;
    padding: 20px;
    background-color: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.comparador-precios h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-accent);
}

.comparador-precios table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.comparador-precios th, 
.comparador-precios td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid #eee;
    font-family: var(--font-main);
}

.comparador-precios th {
    background-color: var(--color-light);
    color: var(--color-dark);
    font-weight: 600;
}

.comparador-precios tr:hover {
    background-color: #f9f9f9;
}

.comparador-precios tr:last-child td {
    border-bottom: none;
}

/* Destacar la celda personalizada actualizada */
.comparador-precios td.precio-personalizado {
    font-weight: bold;
    color: var(--color-primary);
    transition: all 0.3s ease;
}

.comparador-precios td.precio-personalizado-actualizado {
    animation: highlight 2s ease;
}

@keyframes highlight {
    0% { background-color: rgba(var(--color-primary-rgb), 0.2); }
    100% { background-color: transparent; }
}

/* Resaltar filas al pasar el mouse */
.comparador-precios tbody tr {
    transition: all 0.2s ease;
}

.comparador-precios tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Estilos específicos para Modales (para asegurar consistencia sobre Bootstrap) */
.modal-body p,
.modal-body li,
.modal-body td,
.modal-body th {
  font-family: var(--font-main);
}

.modal-body h6 {
  font-family: var(--font-headings);
}

.modal-title {
  font-family: var(--font-headings);
}

/* Asegurar scroll en modales con mucho contenido */
.modal-body {
    max-height: calc(100vh - 210px); /* Altura máxima antes de necesitar scroll (ajustable) */
    overflow-y: auto; /* Habilitar scroll vertical si el contenido excede max-height */
}

/* Footer font consistency */
footer p,
footer li,
footer input,
footer button {
    font-family: var(--font-main);
}

/* --- Estilos para la sección Paquetes --- */
#paquetes {
    background-color: var(--color-white);
}

#paquetes h2, #blog h2, #opiniones h2, #contacto h2, #politicas h2 {
    margin-bottom: 2.5rem; /* Más espacio debajo de los títulos principales de sección */
}

.como-funciona {
    text-align: center;
    margin-bottom: 2rem;
    background-color: var(--color-light);
    padding: 1.5rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--color-accent);
}

.como-funciona h3 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.lista-paquetes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.paquete {
    background-color: var(--color-white);
    border: 1px solid #eee;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.paquete:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.paquete h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    text-align: center;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
}

.paquete .actividades h4 {
    font-size: 1.1rem;
    color: var(--color-secondary);
    margin-bottom: 0.8rem;
}

.paquete .actividades ul {
    padding-left: 0;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Hace que la lista ocupe el espacio */
}

.paquete .actividades li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.paquete .actividades input[type="checkbox"] {
    margin-right: 0.5rem;
    width: auto; /* Ancho automático para checkbox */
    margin-bottom: 0; /* Quitar margen inferior */
    cursor: pointer;
}

.paquete .actividades label {
    font-size: 0.95rem;
    color: var(--color-text-light);
    cursor: pointer;
    flex-grow: 1;
}

.paquete .precio {
    margin-top: auto; /* Empuja el precio hacia abajo */
    text-align: center;
    border-top: 1px dashed #ddd;
    padding-top: 1rem;
    margin-bottom: 1.5rem;
}

.paquete .precio .monto {
    font-weight: bold;
    color: var(--color-primary);
    font-size: 1.4rem;
}

.paquete .precio .descuento {
    font-size: 0.85rem;
    color: var(--color-secondary);
    display: block;
    margin-top: 0.3rem;
}

.paquete button {
    width: calc(50% - 0.5rem); /* Dos botones por fila con espacio */
    margin: 0.5rem 0.25rem 0;
    padding: 0.7rem 1rem; /* Ajuste padding */
}

.paquete .modificar { /* Hereda de .btn-secundario */
    /* Estilos específicos si son necesarios */
}

.paquete .reservar { /* Hereda de .btn-primario */
    /* Estilos específicos si son necesarios */
}

/* Comparador de precios */
.comparador-precios {
    background-color: var(--color-light);
    padding: 2rem;
    border-radius: var(--radius);
    margin-top: 3rem;
}

.comparador-precios h3 {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.comparador-precios table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-white);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    overflow: hidden; /* Para que el radius afecte a th/td */
}

.comparador-precios th,
.comparador-precios td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

.comparador-precios th {
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-family: var(--font-main);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comparador-precios tbody tr:hover {
    background-color: #f9f9f9;
}

.comparador-precios td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--color-primary);
}

.comparador-precios td {
    color: var(--color-text-light);
}

.comparador-precios td:not(:first-child) {
    font-weight: 500;
}

/* --- Estilos para la sección Blog --- */
#blog {
    background-color: var(--color-light);
}

/* Estilos para el carrusel del blog */
#carouselBlog .carousel-item {
    padding: 0 15%; /* Mantener espacio a los lados */
    min-height: 250px; /* Mantener altura mínima */
    /* display: flex; <-- Eliminado */
    /* align-items: center; <-- Eliminado */
    /* justify-content: center; <-- Eliminado */
    /* El item vuelve a ser un bloque normal */
}

.articulo-blog-card {
    background-color: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem; 
    margin: 1rem auto; /* Centrar la tarjeta horizontalmente */
    text-align: center; 
    /* width: 100%; <-- No necesario si usamos margin auto */
    max-width: 90%; /* Limitar ancho de la tarjeta */
    border-left: 5px solid var(--color-accent);
}

.articulo-contenido h3 {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 0.8rem;
}

.articulo-contenido p {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.articulo-contenido .btn {
    /* Estilos heredados de .btn y .btn-secundario */
    margin-top: 0.5rem;
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
}

/* Estilos para los controles del carrusel del blog */
.blog-control .carousel-control-prev-icon,
.blog-control .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    border-radius: 50%;
    padding: 15px; /* Más padding para hacerlos más grandes */
    background-size: 60%, 60%; /* Icono más pequeño dentro */
}

/* Posicionar controles más adentro */
#carouselBlog .carousel-control-prev {
    left: 10%;
}
#carouselBlog .carousel-control-next {
    right: 10%;
}

/* Indicadores del blog */
.blog-indicators {
    bottom: -10px; /* Posición debajo del carrusel */
}

.blog-indicators li {
    background-color: var(--color-secondary); /* Color indicador */
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.blog-indicators .active {
    background-color: var(--color-primary); /* Color indicador activo */
}

/* Galería se mantiene igual */
.galeria {
    margin-top: 3rem;
    text-align: center;
}

.galeria h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.contenedor-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.contenedor-galeria img {
    width: 100%;
    height: 200px; /* Altura fija */
    object-fit: cover; /* Mantiene la proporción y recorta */
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.contenedor-galeria img:hover {
    transform: scale(1.05);
}

/* --- Estilos para la sección Opiniones --- */
#opiniones {
    background-color: var(--color-white);
}

.testimonios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.testimonio {
    background-color: var(--color-light);
    padding: 2rem;
    border-radius: var(--radius);
    border-left: 5px solid var(--color-accent);
    position: relative;
}

.testimonio::before { /* Elemento decorativo tipo comillas */
    content: '\201C'; /* Comilla izquierda grande */
    font-family: serif;
    font-size: 4rem;
    color: var(--color-accent);
    opacity: 0.3;
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    line-height: 1;
}


.testimonio p {
    font-style: italic;
    color: var(--color-text);
    margin-bottom: 1rem;
    position: relative; /* Para que esté sobre ::before */
    z-index: 1;
}

.testimonio .autor {
    font-weight: bold;
    color: var(--color-primary);
    text-align: right;
    margin-bottom: 0.5rem;
}

.testimonio .estrellas {
    text-align: right;
    color: #FFC107; /* Amarillo estrella */
    font-size: 1.2rem;
}

.calificacion {
    background-color: var(--color-light);
    padding: 2.5rem;
    border-radius: var(--radius);
    max-width: 700px;
    margin: 2rem auto 0;
    box-shadow: var(--shadow);
}

.calificacion h3 {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.calificacion form div {
    margin-bottom: 1rem;
}

.calificacion label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-secondary);
}

.calificacion input[type="text"],
.calificacion select,
.calificacion textarea {
    background-color: var(--color-white);
    border: 1px solid #ccc; /* Borde más sutil */
}

.calificacion textarea {
    resize: vertical; /* Permitir redimensionar verticalmente */
}

.calificacion button[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    /* Hereda estilos de .btn-primario */
}

/* --- Estilos para la sección Contacto --- */
#contacto {
    background-color: var(--color-white);
}

/* Estilo para la información de contacto mejorada (Grid) */
.info-contacto-mejorada {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adaptable */
    gap: 2rem; /* Espacio entre ítems */
    margin-bottom: 3rem;
    text-align: center;
}

.info-item {
    background-color: var(--color-light);
    padding: 2rem 1.5rem; /* Más padding vertical */
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
    border-top: 4px solid var(--color-primary); /* Borde superior destacado */
}

.info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.info-item i.fas, /* Iconos FontAwesome sólidos */
.info-item i.fab { /* Iconos FontAwesome de marcas */
    color: var(--color-primary);
    margin-bottom: 1rem; /* Espacio debajo del ícono */
    /* fa-2x ya define el tamaño, no se necesita font-size aquí */
}

.info-item h3 {
    color: var(--color-dark); /* Título más oscuro */
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.info-item p {
    color: var(--color-text-light);
    font-size: 1rem;
    margin-bottom: 0;
}

.info-item a {
    color: var(--color-primary); /* Enlaces en color primario */
    text-decoration: underline; /* Subrayado sutil */
}

.info-item a:hover {
    color: var(--color-accent);
}

.info-item .iconos-redes {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.info-item .iconos-redes .red-social {
    color: var(--color-primary);
    font-size: 1.5rem; /* Tamaño de iconos redes sociales */
    transition: var(--transition);
}

.info-item .iconos-redes .red-social:hover {
    color: var(--color-accent);
    transform: scale(1.1);
}

/* Estilo para el formulario de contacto mejorado */
.formulario-contacto-mejorado {
    background-color: var(--color-light);
    padding: 2.5rem 3rem; /* Más padding horizontal */
    border-radius: var(--radius);
    max-width: 800px;
    margin: 0 auto;
    box-shadow: var(--shadow);
    border-left: 5px solid var(--color-primary);
}

.formulario-contacto-mejorado h3 {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 2rem; /* Más espacio debajo del título */
    font-size: 1.6rem;
}

/* Usar clases de Bootstrap form-group para margen */
.formulario-contacto-mejorado .form-group {
    margin-bottom: 1.5rem; /* Espacio entre campos */
}

.formulario-contacto-mejorado label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.95rem;
}

/* Estilos para inputs (heredados de bootstrap form-control, pero podemos ajustar) */
.formulario-contacto-mejorado .form-control {
    background-color: var(--color-white);
    border: 1px solid #ced4da;
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    font-size: 1rem;
}

.formulario-contacto-mejorado .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(93, 64, 55, 0.25); /* Sombra de foco Bootstrap adaptada */
}

.formulario-contacto-mejorado textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* Estilo para el botón de envío (ya tiene clases btn btn-primario) */
.formulario-contacto-mejorado button[type="submit"] {
    /* btn-lg y btn-block aplicados en HTML */
    margin-top: 1rem; /* Espacio sobre el botón */
    font-size: 1.1rem;
    padding: 0.9rem 1.5rem;
}

/* Eliminar estilos anteriores si existen para #contacto */
.info-contacto, .formulario-contacto { /* Clases antiguas */
    /* Podrían eliminarse o dejarse vacías si no interfieren */
}

.info-contacto > div, .formulario-contacto .campo { /* Selectores antiguos */
    /* Podrían eliminarse */
}


/* --- Estilos para la sección Políticas --- */
#politicas {
    background-color: var(--color-light);
    padding-bottom: 2rem; /* Menos padding inferior */
}

.politica-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.politica {
    background-color: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Sombra más sutil */
}

.politica h3 {
    color: var(--color-secondary);
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
}

.politica p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 0;
}

/* --- Estilos para el Footer --- */
footer {
    background-color: var(--color-dark);
    color: rgba(255, 255, 255, 0.8); /* Texto blanco semitransparente */
    padding: 3rem 0 0; /* Padding superior, sin padding inferior inicial */
}

.footer-contenido {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-logo h2 {
    color: var(--color-white);
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.footer-logo p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

footer h3 {
    color: var(--color-white);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--color-secondary);
    padding-bottom: 0.5rem;
    font-family: var(--font-main); /* Usar font principal para títulos de footer */
}

.footer-navegacion ul,
.footer-contacto p {
    margin-bottom: 0.5rem;
}

.footer-navegacion li {
    margin-bottom: 0.5rem;
}

.footer-navegacion a,
.footer-contacto a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.footer-navegacion a:hover,
.footer-contacto a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.footer-contacto p {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.footer-contacto p i {
    color: var(--color-accent);
    margin-right: 0.8rem;
    width: 20px; /* Ancho fijo para íconos */
    text-align: center;
}

.footer-redes {
    margin-top: 1rem;
    display: flex;
    gap: 0.8rem;
}

.footer-redes .red-social {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.3rem; /* Iconos más grandes en footer */
    transition: var(--transition);
}

.footer-redes .red-social:hover {
    color: var(--color-white);
    transform: scale(1.1);
}

.footer-newsletter form {
    display: flex;
    margin-top: 0.5rem;
}

.footer-newsletter input[type="email"] {
    flex-grow: 1;
    padding: 0.6rem;
    border: none;
    border-radius: var(--radius) 0 0 var(--radius);
    font-size: 0.9rem;
    margin: 0; /* Resetear margen */
}

.footer-newsletter button {
    padding: 0.6rem 1rem;
    background-color: var(--color-accent);
    color: var(--color-white);
    border: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    font-weight: 600;
}

.footer-newsletter button:hover {
    background-color: var(--color-primary);
}

.footer-derechos {
    background-color: var(--color-dark); /* Fondo ligeramente más oscuro o igual */
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-derechos p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Ajustes responsivos adicionales si son necesarios */
@media (max-width: 768px) {
    .lista-paquetes, .testimonios, .info-contacto-mejorada, .politica-container, .footer-contenido {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }
    
    /* ... (otros estilos responsivos existentes) ... */
    
    /* Ajustar padding del carrusel del blog en móvil */
    #carouselBlog .carousel-item {
        padding: 0 5%; 
    }
    
    /* Ajustar controles del carrusel del blog en móvil */
    #carouselBlog .carousel-control-prev {
        left: -5%;
    }
    #carouselBlog .carousel-control-next {
        right: -5%;
    }
}

/* Slider de videos */
.slider-videos {
   max-width: 900px;
   margin: 3rem auto;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow);
}
 
.slider-videos .carousel-indicators {
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   padding: 8px 0;
   margin: 0;
   border-radius: 0 0 var(--radius) var(--radius);
}
 
.slider-videos .carousel-indicators li {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.6);
   margin: 0 5px;
}
 
.slider-videos .carousel-indicators li.active {
   background-color: var(--color-accent);
}
 
.slider-videos .carousel-caption {
   background-color: rgba(93, 64, 55, 0.7);
   border-radius: var(--radius);
   padding: 10px;
   bottom: 50px;
}
 
.slider-videos .carousel-caption h5 {
   color: var(--color-white);
   margin-bottom: 5px;
   font-size: 1.3rem;
}
 
.slider-videos .carousel-caption p {
   color: var(--color-white);
   margin-bottom: 0;
   font-size: 1rem;
}
 
.slider-videos .carousel-control-prev,
.slider-videos .carousel-control-next {
   width: 10%;
   opacity: 0.7;
}
 
.slider-videos .carousel-control-prev:hover,
.slider-videos .carousel-control-next:hover {
   opacity: 1;
}
 
.slider-videos .video-container {
   border-radius: var(--radius);
   overflow: hidden;
}
 
/* Media queries para el slider de videos en dispositivos móviles */
@media (max-width: 767px) {
   .slider-videos {
     margin: 2rem auto;
   }
   
   .slider-videos .carousel-caption {
     position: static;
     background-color: var(--color-primary);
     padding: 10px 15px;
     border-radius: 0;
   }
   
   .slider-videos .carousel-caption h5 {
     font-size: 1.1rem;
     margin-bottom: 2px;
   }
   
   .slider-videos .carousel-caption p {
     font-size: 0.9rem;
   }
   
   .slider-videos .carousel-indicators {
     position: static;
     margin-top: 0;
     background-color: var(--color-primary);
   }
}

/* --- Estilos para el Nuevo Planificador Flexible --- */
.planificador-flexible {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.columna-componentes {
    flex: 3; /* Más espacio para los componentes */
    background-color: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-height: 70vh; /* Altura máxima con scroll */
    overflow-y: auto;
}

.columna-plan {
    flex: 2; /* Menos espacio para el resumen */
    background-color: var(--color-light);
    padding: 1.5rem;
    padding-bottom: 2.5rem; /* Más espacio en la parte inferior */
    border-radius: var(--radius);
    border-left: 4px solid var(--color-primary);
    position: sticky; /* Para que se quede fijo al hacer scroll */
    top: 80px; /* Ajustar según altura del header */
    max-height: calc(100vh - 100px); /* Altura máxima */
    overflow-y: auto; /* Permitir scroll interno si el contenido es muy alto */
}

.columna-componentes h4,
.columna-plan h4 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--color-accent);
}

.categoria-componente {
    margin-bottom: 1.5rem;
}

.categoria-componente h5 {
    color: var(--color-secondary);
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
}

.componente-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.componente-item:hover {
    background-color: #f9f9f9;
}

.componente-info span {
    display: block;
    font-size: 0.95rem;
}

.componente-info small {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.componente-item button {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.componente-item button:hover {
    background-color: var(--color-accent);
}

#lista-plan-seleccionado .componente-seleccionado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    font-size: 0.9rem;
    border-bottom: 1px dashed #ccc;
}

#lista-plan-seleccionado .componente-seleccionado button {
    background-color: transparent;
    color: #dc3545; /* Rojo */
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
}

.costo-total-planificador {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--color-primary);
    text-align: right;
}

.costo-total-planificador h5 {
    color: var(--color-dark);
    margin-bottom: 0.3rem;
}

.costo-total-planificador p {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-primary);
    margin: 0;
}

.acciones-plan {
    margin-top: 2.5rem;
    margin-bottom: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    position: relative;
    z-index: 10;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.acciones-plan .btn {
    flex-grow: 1;
    min-width: 120px;
}

#itinerario-flexible-container {
    background-color: var(--color-white);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-top: 4rem;
    position: relative;
    z-index: 5;
    border-left: 5px solid var(--color-primary);
}

#itinerario-flexible-container > h3 { /* Título principal del contenedor */
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--color-accent);
}

.resumen-itinerario-mejorado h5 {
    color: var(--color-primary);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.detalle-general-itinerario {
    background-color: var(--color-light); /* Fondo claro */
    border-radius: var(--radius);
}

.detalle-general-itinerario h5 {
    margin-top: 0; /* Quitar margen superior al título dentro */
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.detalle-general-itinerario p {
    margin-bottom: 0.5rem; /* Menos margen entre párrafos */
    font-size: 1rem;
}

.detalle-general-itinerario p strong i {
    color: var(--color-secondary); /* Color para iconos */
    min-width: 20px; /* Ancho mínimo para alinear iconos */
    display: inline-block; /* Para aplicar ancho */
}

.categoria-itinerario.card {
    border: 1px solid #eee; /* Borde sutil */
}

.categoria-itinerario .card-header {
    background-color: var(--color-light); /* Fondo claro para cabecera */
    font-weight: 600;
    color: var(--color-dark);
    font-size: 1.1rem;
}

.categoria-itinerario .list-group-item {
    padding: 0.8rem 1.25rem; /* Padding en items */
    border-color: #eee; /* Borde sutil */
    display: flex; /* Para alinear precio a la derecha */
    justify-content: space-between;
    align-items: center;
}

.categoria-itinerario .nombre-componente {
    font-weight: 500;
}

.categoria-itinerario .precio-componente {
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap; /* Evitar que el precio se rompa */
    margin-left: 1rem; /* Espacio entre nombre y precio */
}

.costo-total-itinerario {
    border-top: 2px solid var(--color-accent); /* Línea divisoria */
}

.costo-total-itinerario p {
    margin-bottom: 0;
}

/* Ajustes responsivos para el nuevo planificador */
@media (max-width: 992px) {
    .planificador-flexible {
        flex-direction: column;
    }

    .columna-plan {
        position: static; /* Quitar sticky en móvil */
        max-height: none;
        padding-bottom: 2rem;
    }

    .columna-componentes {
         max-height: none; /* Quitar altura máxima */
    }
    
    .acciones-plan {
        margin-top: 2rem;
        margin-bottom: 3.5rem;
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
    }
    
    .acciones-plan .btn {
        width: 100%;
        padding: 0.75rem 1.25rem;
    }
    
    #itinerario-flexible-container {
        margin-top: 3.5rem;
    }
}

/* Standardize container width for specific sections to match #planificador content */
#planificador .container, /* Optional: include for clarity or if needed */
#paquetes .container,
#blog .container,
#opiniones .container,
#contacto .container,
#politicas .container {
    max-width: 900px; /* Match .pasos-planificador width */
}

/* --- Animaciones --- */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Correcciones Adicionales para Modales ---- */

/* Z-index estándar de Bootstrap (sin !important) */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
    overflow-x: hidden; 
    overflow-y: auto; 
    display: none; /* Oculto por defecto */
    position: fixed; /* Asegurar posicionamiento fijo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: 0;
}

/* Asegurar que el modal sea visible cuando tiene la clase .show */
.modal.show {
    display: block !important; /* Forzar display block cuando está activo */
}

/* Dejar que Bootstrap maneje el overflow del body */
/* 
body.modal-open {
    overflow: hidden; 
    padding-right: 0 !important; 
}
*/

/* Asegurar que el contenido del modal sea visible y tenga layout correcto */
.modal-dialog {
    margin: 1.75rem auto; /* Margen estándar de Bootstrap */
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius); /* Usar nuestra variable de radio */
    outline: 0;
}

/* ---- Correcciones Adicionales para Modales (Enfoque: Sin Backdrop) ---- */

/* Ocultar completamente el fondo oscuro */
.modal-backdrop {
    display: none !important; 
}

.modal {
    /* Mantener z-index alto para estar sobre otro contenido */
    z-index: 1050;
    /* Permitir scroll dentro del modal si es necesario */
    overflow-x: hidden; 
    overflow-y: auto; 
    /* Asegurar que esté posicionado */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: 0;
    /* Permitir clics fuera del modal */
    pointer-events: none; /* El modal en sí no captura clics */
}

/* El modal debe ser visible cuando se activa */
.modal.show {
    display: block !important;
}

/* El contenido del modal (dialogo) sí debe capturar clics */
.modal-dialog {
    pointer-events: auto; 
    margin: 5vh auto; /* Margen superior/inferior y centrado horizontal */
    position: relative; /* Para que el z-index del modal lo posicione */
    max-width: 800px; /* Opcional: limitar ancho máximo */
}

/* Asegurar que el body NUNCA pierda el scroll */
body.modal-open {
    overflow: auto !important; /* Forzar scroll visible */
    padding-right: 0 !important; /* Evitar desplazamiento */
}

/* Resto de estilos para .modal-content, .modal-header, .modal-body, .modal-footer se mantienen */
/* ... */

/* Footer font consistency */