html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
#principal {
  flex: 1;
}
#imagen_principal_table,
.imagen_principal_table {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border-collapse: collapse;
  box-sizing: border-box;
}
.btn-cta {
  background-color: #fdf6ec;
  color: #263238;
  border: none;
  border-radius: 10px;
  padding: 20px 28px;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  transition: background-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-cta:hover,
.btn-cta:focus {
  background-color: #f57c00;
  color: #fdf6ec;
}

/* Mejora de accesibilidad para teclado */
.btn-cta:focus-visible {
  outline: 3px solid rgba(245, 124, 0, 0.18);
  outline-offset: 3px;
}
/*Botones del modulo próximos viajes inicio*/
/* Botón semitransparente y icono blanco */
.slick-prev, .slick-next {
  background: rgba(255,255,255,0.15) !important; /* fondo tenue */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  backdrop-filter: blur(2px); /* opcional, elegante en navegadores compatibles */
}

.slick-prev:before, .slick-next:before {
  color: #ffffff !important; /* icono blanco */
  font-size: 16px;
  line-height: 40px;
  left: 12px;
}
.slick-prev:hover, .slick-next:hover { background: rgba(255,255,255,0.3) !important; }
/*-------------------------------------*/
/*Texto modulo próximos viajes inicio*/

/* Ocultar la etiqueta "Date:" */
.icrounded_eventlist .ic-datetime-label {
  display: none;
}
/* ==========================================================================
   Estilo general: fondo azul y texto blanco
   ========================================================================== */
.icrounded_eventlist .icagenda_events_jt117 {
  background: linear-gradient(180deg, #0b5fa8 0%, #0a4f8f 100%) !important; /* azul degradado */
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(10,75,143,0.12);
}

/* ==========================================================================
   Títulos y texto
   ========================================================================== */
.icrounded_eventlist .iceventlist-title {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 6px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

.icrounded_eventlist .ic-datetime-div {
  color: rgba(255,255,255,0.95) !important;
  background: rgba(255,255,255,0.06) !important;
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
  font-size: 14px;
}

.icrounded_eventlist .iceventlist-desc {
  color: rgba(255,255,255,0.92) !important;
  font-size: 15px;
  line-height: 1.45;
}

/* ==========================================================================
   Imagen: caja y miniatura
   ========================================================================== */
.icrounded_eventlist .ic-date-img-box {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(2,18,40,0.12);
}

.icrounded_eventlist .ic-date-img-box img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Ocultar la caja de fecha que aparece sobre la imagen */
.icrounded_eventlist .ic-date-img-box .ic-date-div {
  display: none !important;
}

/* ==========================================================================
   Accesibilidad y enlaces
   ========================================================================== */
.icrounded_eventlist a {
  color: inherit;
  text-decoration: none;
}

.icrounded_eventlist .icagenda_events_jt117:hover {
  transform: translateY(-2px);
  transition: transform .18s ease;
}

/* ==========================================================================
   Responsive: reglas generales para pantallas pequeñas
   ========================================================================== */
@media (max-width: 720px) {
  .icrounded_eventlist .icagenda_events_jt117 {
    flex-direction: column;
    padding: 12px;
  }

  .icrounded_eventlist .ic-date-img-box {
    width: 100%;
    flex: none;
    margin-bottom: 10px;
  }

  .icrounded_eventlist .iceventlist-title {
    font-size: 16px;
  }
}

/* ==========================================================================
   Centrado de items en pantallas pequeñas (slides)
   ========================================================================== */
@media (max-width: 720px) {
  /* Asegura que cada slide ocupe el ancho disponible y se centre */
  .icrounded_eventlist .icagenda_events_jt117,
  .icrounded_eventlist .slick-slide {
    width: 100% !important;
    max-width: 520px;
    margin: 12px auto !important;
    box-sizing: border-box;
    float: none !important;
    display: block;
  }

  /* Quita float de la caja de imagen y ponla centrada */
  .icrounded_eventlist .ic-date-img-box {
    float: none !important;
    width: 100% !important;
    max-width: 320px;
    margin: 0 auto 12px auto !important;
    display: block;
  }

  .icrounded_eventlist .ic-date-img-box img {
    margin: 0 auto;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
  }

  /* Centra el bloque de texto y ajusta alineación */
  .icrounded_eventlist .ic-title-text-desc {
    text-align: center;
    padding: 0 12px;
  }

  .icrounded_eventlist .iceventlist-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: block;
    margin-left: 0;
    margin-right: 0;
  }

  /* Centra la fecha y la descripción */
  .icrounded_eventlist .ic-datetime-div,
  .icrounded_eventlist .iceventlist-desc {
    display: inline-block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Ajustes para flechas/slider si usas Slick */
  .icrounded_eventlist .slick-list,
  .icrounded_eventlist .slick-track {
    display: block;
  }
}

/* ==========================================================================
   Escritorio: forzar tamaño fijo de la miniatura (142 x 200)
   ========================================================================== */
@media (min-width: 721px) {
  .icrounded_eventlist .ic-date-img-box {
    width: 142px !important;    /* ancho del contenedor */
    flex: 0 0 142px !important;
  }

  .icrounded_eventlist .ic-date-img-box img {
    width: 142px !important;    /* fuerza ancho exacto */
    height: 200px !important;   /* fuerza alto exacto */
    object-fit: cover !important; /* recorta centrado sin deformar */
    display: block;
    max-width: none !important;
  }
}

/* ==========================================================================
   Móvil: usar imagen grande pero escalar proporcionalmente para evitar pixelado
   ========================================================================== */
@media (max-width: 720px) {
  .icrounded_eventlist .ic-date-img-box {
    width: 100% !important;
    max-width: 794px;           /* tamaño máximo de la miniatura grande */
    margin: 0 auto;
    flex: 0 0 auto;
  }

  .icrounded_eventlist .ic-date-img-box img {
    width: 100% !important;     /* escala proporcional */
    height: auto !important;    /* mantiene proporción y evita pixelado */
    object-fit: cover;
    display: block;
  }
}
/*SOBRE NOSOTROS*/



/* Contenedor Principal */
.travel-template-wrapper {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- SECCIÓN HERO --- */
.travel-hero {
    background-color: #00a9b8;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 40px;
    border-radius: 10px 10px 10px 10px;
    gap: 40px;
}

.travel-hero-content {
    flex: 1;
    min-width: 300px;
}

.travel-hero h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
    color: #ffffff;
}

.hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 30px;
    font-weight: 300;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn {
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    display: inline-block;
    transition: opacity 0.3s;
    border: none;
}

.btn:hover {
    opacity: 0.9;
    text-decoration: none;
    color: inherit;
}

.btn-light { background-color: #fdf6e9; color: #333; }
.btn-dark { background-color: #1f3a45; color: #ffffff; }

.travel-hero-image-container {
    flex: 0 0 350px;
    display: flex;
    justify-content: center;
}

/* Imagen grande superior */
.hero-img {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 10px 10px 10px 10px; 
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* --- CONTENIDO --- */
.travel-content { padding: 50px 20px; }

.section-title {
    color: #1f3a45;
    font-size: 3.2rem;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
    line-height: 1.5; 
}


.travel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.travel-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- TARJETAS DE INFORMACIÓN --- */
.info-card {
    padding: 30px;
    border-radius: 8px;
    color: white;
}

.card-teal { background-color: #00a9b8; }
.card-orange { background-color: #ed7d16; }

.card-header { margin-bottom: 15px; }

.info-card h3 {
    margin: 0;
    font-size: 1.5rem;
    color: white;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Listas dentro de las tarjetas */
.card-list {
    margin: 0;
    padding-left: 20px; /* Espacio para los puntos */
}

.card-list li {
    margin-bottom: 12px;
    list-style-type: disc; /* Puntos visibles */
    padding-left: 5px;
}

/* --- BLOQUES DE TEXTO --- */
.text-block h3, .quote-block h3 {
    color: #1f3a45;
    font-size: 1.8rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.text-block p { margin-bottom: 15px; text-align: justify; }

/* --- BLOQUE DE CITA Y FOTO PEQUEÑA --- */
.quote-box {
    background-color: #fafafa;
    border-left: 4px solid #1f3a45;
    padding: 20px;
    text-align: center;
}

.profile-container {
    margin-bottom: 15px;
}

/* Nueva clase para la foto pequeña de abajo */
.profile-img {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Círculo perfecto */
    object-fit: cover;
    border: 3px solid #1f3a45;
}

.quote-box p {
    font-size: 1.2rem;
    font-style: italic;
    color: #333;
    margin-bottom: 15px;
}

.quote-box cite {
    display: block;
    font-weight: bold;
    color: #555;
    font-style: normal;
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 768px) {
    .travel-hero { flex-direction: column; text-align: center; }
    .hero-buttons { justify-content: center; }
    .travel-hero-image-container { flex: auto; width: 100%; }
    .travel-grid { grid-template-columns: 1fr; }
}