@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');


html, body {
  max-width: 100%;
  overflow-x: hidden; /* evita scroll lateral */
}

/* =========================
   CARRUSEL TIPO XBOX STORE
========================= */
/* Carrusel más corto en pantallas grandes */
.xbox-carrusel {
  max-width: 1600px;
  margin: 40px auto 30px auto;
  aspect-ratio: 16/7;   /* más ancho que alto */
  border-radius: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;  /* importante para las flechas y dots */
}


.xbox-carrusel-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.xbox-carrusel-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  z-index: 0;
}

.xbox-carrusel-img.active {
  opacity: 1;
  z-index: 1;
}

.xbox-carrusel-info {
  position: absolute;
  left: 8%;
  top: 5%;
  background: rgba(20,20,20,0.7);
  color: #fff;
  padding: 24px;
  border-radius: 18px;
  max-width: 400px;
  z-index: 3;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xbox-carrusel-label {
  background: #00bfff;
  color: #222;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 18px;
  font-size: 1.5rem;
  display: inline-block;
}

.xbox-carrusel-price {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}

.xbox-carrusel-title {
  font-size: 2.2rem;
  font-weight: 800;
}

.xbox-carrusel-desc {
  font-size: 1.2rem;
}

.xbox-carrusel-btn {
  background: linear-gradient(90deg, #00bfff, #1976D2);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,191,255,0.18);
  transition: background 0.2s;
}

.xbox-carrusel-btn:hover {
  background: linear-gradient(90deg, #1976D2, #00bfff);
}

.xbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: none;
  font-size: 2.5rem;
  padding: 0 16px;
  border-radius: 12px;
  cursor: pointer;
  z-index: 10;
  opacity: 0.7;
  transition: background 0.2s, color 0.2s;
}

.xbox-arrow:hover {
  background: rgba(0,191,255,0.18);
  color: #00bfff;
  opacity: 1;
}

.xbox-arrow-left { left: 20px; }
.xbox-arrow-right { right: 20px; }

.xbox-carrusel-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 20;
}

.xbox-carrusel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  cursor: pointer;
  border: 2px solid #00bfff;
  transition: opacity 0.2s, background 0.2s;
}

.xbox-carrusel-dot.active {
  opacity: 1;
  background: #00bfff;
}

/* =========================
   BARRA MORADA PRINCIPAL
========================= */
.barra-morada {
  position: relative;
  width: 100%;
  margin: 40px 0 30px 0;
  background: linear-gradient(90deg, #021091, #1507d3, #0b66ee, #021091);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  padding: 32px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.barra-morada-content {
  text-align: center;
}

.barra-morada h2 {
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
  text-shadow: none;
}

.barra-morada p {
  color: #ede7f6;
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0;
  opacity: 0.9;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1800px) {
  .xbox-carrusel {
    max-width: 90vw;
     aspect-ratio: 16/8;
    margin: 50px 70px 30px 70px;
  }

  
 
}

@media (max-width: 480px) {
  .xbox-carrusel {
    max-width: 95vw;
    aspect-ratio: 4/3;
    margin: 40px auto 25px auto;
  }

  .xbox-carrusel-desc{

    display: none;
  }
  .xbox-carrusel-info {
    left: 17%;
    top: 3%;
    padding: 10px;
    max-width: 120px;
  }
  .xbox-carrusel-title { font-size: 0.8rem; }
  .xbox-carrusel-label { font-size: 0.8rem; }
  .xbox-carrusel-price { font-size: 0.7rem; }
  .xbox-carrusel-btn { font-size: 0.75rem; padding: 5px 14px; }

  .barra-morada h2 { font-size: 1.3rem; }
  .barra-morada p { font-size: 0.9rem; }
  .barra-morada { padding: 16px 10px; }

.xbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: none;
  font-size: 1.8rem;      /* más pequeño que 2.5rem */
  padding: 0 10px;         /* reduce el ancho clicable */
  border-radius: 10px;     /* ligeramente más pequeño */
  cursor: pointer;
  z-index: 10;
  opacity: 0.7;
  transition: background 0.2s, color 0.2s;
}

.xbox-arrow:hover {
  background: rgba(0,191,255,0.18);
  color: #00bfff;
  opacity: 1;
}
  
}







/* Barra morada principal */
.barra-morada {
  position: relative;
  left: 0;
  width: 100vw;
  min-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 38px;
  background: linear-gradient(90deg, #021091, #1507d3, #0b66ee, #021091);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  padding: 32px 0 22px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  border-radius: 16px;
  /* Se quita el hover */
}

/* Contenido centrado */
.barra-morada-content {
  text-align: center;
}

/* Título sin animación ni efecto */
.barra-morada h2 {
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
  color: #fff; /* título blanco fijo */
  -webkit-text-fill-color: #fff;
  text-shadow: none; /* sin glow */
}

/* Texto descriptivo */
.barra-morada p {
  color: #ede7f6;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0;
  opacity: 0.9;
}

/* Animación de fondo */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Responsivo */
@media (max-width: 900px) {
  .barra-morada h2 {
    font-size: 1.6rem;
  }
  .barra-morada p {
    font-size: 1.1rem;
  }
  .barra-morada {
    padding: 20px 0 16px 0;
  }
}




.barra-info {
  width: 100%;
  background: #ffcc00;
  color: #000;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  padding: 5px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 1000;
}

.scroll-text {
  display: inline-flex;
  white-space: nowrap;
  animation: scroll-text 23s linear infinite;
}

/* Párrafos del scroll */
.scroll-text p {
  margin: 0;
  display: flex;
  gap: 400px; /* 🔹 controlas el espaciado entre frases desde aquí */
  font-size: 16px;
}

/* Cada frase */
.scroll-text p span {
  display: inline-block;
}

/* Animación continua */
@keyframes scroll-text {
  0% {
    transform: translateX(30%);
  }
  100% {
    transform: translateX(-50%);
  }
}







.barra-telefono {
  width: 100%;
  background: linear-gradient(90deg, #0066cc, #3399ff);
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  position: relative;
  z-index: 10;   /* más bajo */
}


.barra-telefono p {
  display: inline-block;  /* se mantiene centrado */
  margin: 0;              /* elimina márgenes extra */
  font-size: 25px;
}

.barra-telefono i {
  margin-right: 8px;      /* espacio entre icono y texto */
  color: white;           /* icono en blanco */
}


/* ===== Responsivo Barra Telefónica ===== */

/* Tablets (pantallas medianas) */
@media (max-width: 992px) {
  .barra-telefono {
    padding: 8px 0;
  }

  .barra-telefono p {
    font-size: 20px; /* un poco más pequeño */
  }

  .barra-telefono i {
    margin-right: 6px;
    font-size: 20px;
  }
}

/* Móviles (pantallas pequeñas) */
@media (max-width: 480px) {
  .barra-telefono {
    padding: 6px 0;
    text-align: center;
  }

  .barra-telefono p {     /* se apila verticalmente si hay poco espacio */
    font-size: 16px;
    line-height: 1.3;
  }

  .barra-telefono i {
     /* ícono encima del texto */
    margin: 0 auto 4px;  /* centrado y con espacio debajo */
    font-size: 22px;
  }
}






/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Barra de navegación */
.navbar {
  width: 100%;
  background: linear-gradient(90deg, #0066cc, #3399ff);
  padding: 10px 50px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1000;
 
  margin: 0;
}



/* Contenido interno */
.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

/* Logo */
.navbar-logo img {
    width: 120px; /* ajusta al tamaño que quieras */
  height: auto;
  transform-style: preserve-3d; /* habilita 3D */
  animation: giro3d 5s linear infinite; /* animación continua */
}

@keyframes giro3d {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.navbar-logo img:hover {
  transform: scale(1.4);
}

/* Menú principal */
.navbar-menu {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
}


.navbar-menu li a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

/* Línea animada debajo de los enlaces */
.navbar-menu li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: -4px;
  left: 50%;
  background-color: #00ffff;
  transition: width 0.3s ease;
  border-radius: 2px;
  transform: translateX(-50%);
}

/* Hover en enlaces: ilumina fondo y expande línea */
.navbar-menu li a:hover {
  background-color: rgba(0, 0, 255, 0.2); /* azul claro semitransparente */
}
.navbar-menu li a:hover::after {
  width: 100%;
}

/* Botones estilo azul fuerte con línea azul neón */
.navbar-menu li a.button {
  position: relative;
  background: linear-gradient(90deg, #004080, #1e3c72);
  color: #fff;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 10px;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Línea azul neón para botones */
.navbar-menu li a.button::after {
  content: '';
  position: absolute;
  width: 0;               /* inicia en 0 */
  height: 3px;
  bottom: 0;
  left: 50%;
  background: #00f0ff;    /* azul neón */
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s ease;
  opacity: 0.9;
}

/* Hover de los botones */
.navbar-menu li a.button:hover {
  background: linear-gradient(90deg, #1e3c72, #003366);
  box-shadow: 0 6px 20px rgba(30,60,114,0.5);
}
.navbar-menu li a.button:hover::after {
  width: 100%; /* se expande al 100% */
}

/* Contenido principal */
body {
  margin-top: 90px; /* Para que no quede debajo de la navbar fija */
  padding: 20px;
}

/* Responsivo: tablets y móviles */
@media (max-width: 1024px) {
  .navbar {
    padding: 10px 30px;
  }
  .navbar-menu {
    gap: 15px;
  }
  .navbar-logo img {
    height: 55px;
  }
}

@media (max-width: 768px) {
  .navbar-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar-menu {
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
  }
  .navbar-menu li a {
    width: 100%;
    text-align: center;
  }
}

/* Responsive para móviles muy pequeños */
@media (max-width: 480px) {
  .navbar {
    padding: 10px 15px;
  }
  .navbar-logo img {
    height: 50px;
  }
  .navbar-menu li a {
    font-size: 14px;
    padding: 6px 10px;
  }
}






/* =========================
   HAMBURGUESA
========================= */
.hamburger {
  position: absolute;      /* sacarlo del flujo normal */
  top: 50%;                /* centrar verticalmente dentro de la navbar */
  right: 20px;             /* siempre pegado al borde derecho */
  transform: translateY(-50%); /* centrar exacto vertical */
  width: 40px;
  height: 40px;
  display: none;           /* solo en responsive */
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  padding: 8px;
  user-select: none;
  z-index: 1001;           /* encima del menú */
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.25s ease;
}

/* Estado activo (X) */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(11px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-11px);
}

/* =========================
   RESPONSIVE
========================= */

/* Tablet y down: logo más pequeño */
@media (max-width: 1100px) {
  .navbar-logo img { width: 70px; }

  /* El menú se convierte en panel deslizante desde la derecha */
  .navbar-menu {
    position: absolute;
    top: 105px;
    right: -260px;               /* oculto fuera de la pantalla */
    background: #001f3f;
    flex-direction: column;
    align-items: flex-start;
    width: 240px;
    padding: 18px;
    gap: 30px;
    border-radius: 12px 0 0 12px;
    box-shadow: -6px 8px 20px rgba(0,0,0,0.35);
    transition: right 0.35s ease;  /* animación deslizante */
    z-index: 1000;
    display: none;  
  }

  .navbar-menu.active {
     display: flex; 
    right: 0;                     /* entra visible desde la derecha */
  }

  /* enlaces dentro del panel */
  .navbar-menu li a {
    width: 100%;
    padding: 12px 12px;
    border-radius: 8px;
    font-size: 16px;
  }
  .navbar-menu li a::after {
    bottom: -2px;
  }

  /* Mostrar hamburguesa */
  .hamburger { display: flex; }

  /* Submenú en móvil/tablet: ocupa ancho completo y baja en bloque */
  .submenu-items {
    position: static;
    width: 100%;
    margin-top: 16px;
    background: #003a78;
    box-shadow: none;
    border-radius: 8px;
    overflow: hidden;
  }
}

/* Móvil chico */
@media (max-width: 768px) {
  .navbar-logo img { width: 78px; }
  .navbar { padding: 10px 20px; }
}

/* Muy chico */
@media (max-width: 420px) {
  .navbar-logo img { width: 68px; }
  .navbar-menu { width: 86vw; } /* panel un poco más estrecho que la pantalla */
}










/* Contenedor de características */
.caracteristicas-empresa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  padding: 80px 100px;
  background: #f5f9ff;
  text-align: center;
}

/* Tarjetas */
.caracteristica-card {
  background: #ffffff;
  border-radius: 25px;
  padding: 50px 30px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Línea azul animada debajo */
.caracteristica-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 5px;
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  border-radius: 0 0 25px 25px;
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

/* Fondo con sombreado azul al hover */
.caracteristica-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(42, 82, 152, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 25px;
  z-index: 0;
}

/* Hover */
.caracteristica-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 18px 35px rgba(30, 60, 114, 0.25);
}

.caracteristica-card:hover::after {
  width: 80%;
}

.caracteristica-card:hover::before {
  opacity: 1;
}

/* Contenido por encima de los efectos */
.caracteristica-icon,
.caracteristica-titulo,
.caracteristica-desc {
  position: relative;
  z-index: 1;
}

/* Iconos */
.caracteristica-icon {
  font-size: 55px;
  color: #2a5298;
  margin-bottom: 20px;
}

/* Títulos */
.caracteristica-titulo {
  font-size: 22px;
  font-weight: 700;
  color: #1e3c72;
  margin-bottom: 15px;
}

/* Texto */
.caracteristica-desc {
  font-size: 22px;
  color: #555;
  line-height: 1.6;
  max-width: 320px;
}

/* ====== MEDIA QUERIES ====== */

/* Ventanas medianas (tablets y pantallas < 1024px) */
@media (max-width: 1024px) {
  .caracteristicas-empresa {
    grid-template-columns: repeat(2, 1fr);
    padding: 60px 50px;
    gap: 25px;
  }

  .caracteristica-card {
    padding: 40px 20px;
    min-height: 350px;
  }

  .caracteristica-icon {
    font-size: 50px;
  }

  .caracteristica-titulo {
    font-size: 20px;
  }

  .caracteristica-desc {
    font-size: 20px;
    max-width: 280px;
  }
}

/* Móviles (pantallas < 768px) */
@media (max-width: 768px) {
  .caracteristicas-empresa {
    grid-template-columns: 1fr;
    padding: 40px 30px;
    gap: 20px;
  }

  .caracteristica-card {
    padding: 30px 20px;
    min-height: 300px;
  }

  .caracteristica-icon {
    font-size: 45px;
  }

  .caracteristica-titulo {
    font-size: 18px;
  }

  .caracteristica-desc {
    font-size: 18px;
    max-width: 250px;
  }
}

/* Móviles muy pequeños (pantallas < 480px) */
@media (max-width: 480px) {
  .caracteristicas-empresa {
    padding: 30px 15px;
    gap: 15px;
  }

  .caracteristica-card {
    padding: 25px 15px;
    min-height: 280px;
  }

  .caracteristica-icon {
    font-size: 40px;
  }

  .caracteristica-titulo {
    font-size: 16px;
  }

  .caracteristica-desc {
    font-size: 16px;
    max-width: 220px;
  }
}







.destinos-cruceros {
  text-align: center;
  margin-top: 10px;
}

.destinos-titulo {
  font-size: 2.3rem;         /* Más grande */
  font-style: italic;      /* En cursiva */
  color: #003366;
  margin-bottom: 0px;
}

.destinos-desc {
  font-size: 1.6rem;
  color: #444;
  max-width: 700px;
  margin: 30px auto 40px auto;
  line-height: 1.6;
}


.destinos-collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 180px);
  gap: 15px;
  margin: 20px auto;       
  max-width: 1600px;       /* Más ancho que antes */
  padding: 0 25px;          /* Padding lateral ligeramente mayor */
}

/* Distribución estética de los 6 destinos con ajustes específicos */
.destino-card:nth-child(1) { /* Caribe */
  grid-column: span 3;
  grid-row: span 2;
}

.destino-card:nth-child(2) { /* Mediterráneo */
  grid-column: span 2;
  grid-row: span 1.8;
}

.destino-card:nth-child(3) { /* Alaska - más alto */
  grid-column: span 1;
  grid-row: span 4;
}

.destino-card:nth-child(4) { /* Hawái */
  grid-column: span 2;
  grid-row: span 3;
}

.destino-card:nth-child(5) { /* Fiordos Noruegos - más ancho */
  grid-column: span 1;
  grid-row: span 2;
}

.destino-card:nth-child(6) { /* Dubái - un poco más estrecho */
  grid-column: span 2;
  grid-row: span 2;
}

.destino-card {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}


.destino-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  border-radius: 15px;
}

.destino-card:hover img {
  transform: scale(1.1);
}

.destino-texto {
  position: absolute;
  top: 10px;      /* Separación desde arriba */
  left: 10px;     /* Separación desde la izquierda */
  font-size: 1.9rem;      
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 5px rgba(0,0,0,0.7);  
  text-align: left; /* Alineación del texto */
}



/* =========================
   COLLAGE DE DESTINOS RESPONSIVO
   Manteniendo tamaños y formas específicas
========================= */

/* Pantallas medianas */
@media (max-width: 1200px) {
  .destinos-collage {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 150px);
    gap: 12px;
  }

  .destino-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .destino-card:nth-child(2) { grid-column: span 2; grid-row: span 1.5; }
  .destino-card:nth-child(3) { grid-column: span 1; grid-row: span 3; }
  .destino-card:nth-child(4) { grid-column: span 2; grid-row: span 2; }
  .destino-card:nth-child(5) { grid-column: span 1; grid-row: span 2; }
  .destino-card:nth-child(6) { grid-column: span 2; grid-row: span 2; }

  .destino-texto { font-size: 1.5rem; }
}

/* Pantallas pequeñas */
@media (max-width: 900px) {
  .destinos-collage {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 120px);
    gap: 10px;
  }

  .destino-card:nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .destino-card:nth-child(2) { grid-column: span 3; grid-row: span 1; }
  .destino-card:nth-child(3) { grid-column: span 1; grid-row: span 2; }
  .destino-card:nth-child(4) { grid-column: span 2; grid-row: span 2; }
  .destino-card:nth-child(5) { grid-column: span 1; grid-row: span 1; }
  .destino-card:nth-child(6) { grid-column: span 2; grid-row: span 1; }

  .destino-texto { font-size: 1.3rem; }
}

/* Pantallas muy pequeñas (móviles) */
@media (max-width: 600px) {
  .destinos-collage {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(12, 100px);
    gap: 8px;
    padding: 0 10px;
  }

  .destino-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .destino-card:nth-child(2) { grid-column: span 2; grid-row: span 2; }
  .destino-card:nth-child(3) { grid-column: span 2; grid-row: span 2; }
  .destino-card:nth-child(4) { grid-column: span 2; grid-row: span 2; }
  .destino-card:nth-child(5) { grid-column: span 2; grid-row: span 2; }
  .destino-card:nth-child(6) { grid-column: span 2; grid-row: span 2; }

  .destino-texto { font-size: 1rem; }
}

@media (max-width: 400px) {
  .destinos-collage {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 100px); /* menos filas y altura menor */
    gap: 6px;
    padding: 0 8px; /* un poco menos de padding lateral */
  }

  .destino-card:nth-child(1),
  .destino-card:nth-child(2),
  .destino-card:nth-child(3),
  .destino-card:nth-child(4),
  .destino-card:nth-child(5),
  .destino-card:nth-child(6) {
    grid-column: span 1;  /* todas ocupan toda la fila */
    grid-row: span 1;     /* altura uniforme */
  }

  .destino-texto { font-size: 0.85rem; }  /* texto un poco más pequeño */
}






/* Sección */
.opiniones-cruceros {
  margin: 40px auto;
  text-align: center;
  color: #333;
}

.destinos-titulo {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.destinos-desc {
  font-size: 1.4rem;
  color: #555;
  margin-bottom: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}







/* Carrusel */
.opiniones-carrusel {
  position: relative;
  overflow: hidden;
  padding: 10px 20px;
}

.opiniones-track-wrapper {
  overflow: hidden;
  width: 100%;
}

.opiniones-track {
  display: flex;
  gap: 16px; /* espacio entre tarjetas más pequeño en móviles */
  transition: transform 0.5s ease;
  justify-content: flex-start;
  padding-left: 10px;  /* pequeño padding inicial */
  padding-right: 10px; /* pequeño padding final */
}

/* Tarjetas */
.opiniones-card {
  min-width: 220px;  /* tamaño inicial desktop */
  max-width: 240px;
  min-height: 320px;
  background: #ffffff;
  padding: 20px;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.opiniones-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.opiniones-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  border-radius: 0 0 18px 18px;
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

.opiniones-card:hover::after {
  width: 85%;
}

.opiniones-card p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #444;
}

.opiniones-card span {
  font-weight: 700;
  color: #2a5298;
}

/* Flechas */
.opiniones-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 2px solid rgba(42, 82, 152, 0.35);
  color: #1e3c72;
  font-size: 1.6rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 12px;
  z-index: 5;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, background 0.25s ease;
}

.opiniones-arrow:hover {
  color: #2a5298;
  border-color: #2a5298;
  background: rgba(30, 60, 114, 0.08);
  transform: translateY(-50%) scale(1.08);
}

.opiniones-arrow.left {
  left: 10px;
}

.opiniones-arrow.right {
  right: 10px;
}

/* =========================
   Responsive optimizado para móviles
========================= */
@media (max-width: 768px) {
  /* Carrusel */
  .opiniones-carrusel {
    padding: 10px 10px; /* margen reducido */
  }

  .opiniones-track {
    gap: 40px; /* más margen lateral entre tarjetas */
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Tarjetas más pequeñas y cuadradas */
  .opiniones-card {
    min-width: 120px;   /* más pequeñas */
    max-width: 120px;
    min-height: 120px;  /* formato cuadrado */
    padding: 10px;      /* padding más compacto */
    border-radius: 12px;
    font-size: 0.8rem;  /* texto más pequeño */
  }

  .opiniones-card p {
    font-size: 0.8rem;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .opiniones-card span {
    font-size: 0.75rem;
  }

  /* Flechas: mantener tamaño original */
  .opiniones-arrow {
    width: 29px;
    height: 29px;
    font-size: 1.2rem;
  }
}










/* ====== Formulario de Opiniones ====== */
.form-opinion {
  margin: 70px auto;
  max-width: 1200px; /* aumenté el ancho máximo */
  padding: 0 30px;   /* más espacio lateral */
  text-align: center;
}

.opinion-form {
  margin-top: 40px; /* un poco más de separación */
  display: flex;
  flex-direction: column;
  gap: 22px; /* más espacio entre campos */
}

.form-row {
  display: flex;
  gap: 20px; /* mayor separación entre inputs */
  flex-wrap: wrap;
}

.opinion-form input,
.opinion-form textarea {
  flex: 1;
  padding: 18px 20px; /* inputs más grandes */
  border-radius: 14px;
  border: 1.5px solid #ccc;
  font-size: 1.1rem; /* texto un poco más grande */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.opinion-form input:focus,
.opinion-form textarea:focus {
  border-color: #2a5298;
  box-shadow: 0 0 8px rgba(42, 82, 152, 0.25); /* sombra más visible */
  outline: none;
}

.opinion-form textarea {
  resize: none;
  min-height: 160px; /* mayor altura para el textarea */
}

.form-btn {
  position: relative; /* necesario para el pseudo-elemento */
  align-self: center;
  padding: 16px 40px;
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden; /* para que la línea no sobresalga */
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.form-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px; /* distancia desde el texto */
  width: 100%;
  height: 3px; /* grosor de la línea */
  background-color: #00ffff;
  transform: scaleX(0);
  transform-origin: center; /* inicia desde el centro */
  transition: transform 0.3s ease;
}

.form-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(30, 60, 114, 0.35);
}

.form-btn:hover::after {
  transform: scaleX(1); /* crece hacia los lados desde el centro */
}

.form-aviso {
  font-style: italic;       /* cursiva */
  color: #777;              /* gris */
  font-size: 0.95rem;       /* ligeramente más pequeño */
  margin-top: 12px;         /* separación del botón */
  line-height: 1.4;
  text-align: center;
}











.visitanos {
  margin: 80px auto;
  max-width: 1200px; /* más ancho que antes */
  padding: 0 20px;
  text-align: center;
}

.visitanos-titulo {
  font-size: 2rem;
  color: #1e3c72;
  margin-bottom: 16px;
  font-style: italic; /* cursiva */
}

.visitanos-subtitulo {
  font-size: 1.4rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 40px;
}

.mapa-container {
  width: 100%;
  max-width: 1100px; /* un poco más pequeño */
  height: 500px;      /* menos alto */     
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 25px rgba(0,0,0,0.2);
  position: relative;

}



/* pseudo-elemento para la línea animada debajo */
.mapa-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px; /* grosor de la línea */
  background: linear-gradient(90deg, #1e3c72, #2a5298);
  transform: scaleX(0);
  transform-origin: center; /* inicia desde el centro */
  transition: transform 0.4s ease;
}

.mapa-container:hover::after {
  transform: scaleX(1); /* crece hacia los lados desde el centro */
}

.mapa-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}





/* ====== Reset básico ====== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* ====== Footer principal ====== */
.footer {
  background: linear-gradient(90deg, #0066cc, #3399ff);
  color: #fff;
  text-align: center;
  padding: 60px 0;       /* solo vertical */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;             /* espacio entre bloques */
  width: 100vw;          /* ocupa todo el ancho */
  margin: 0;             /* sin márgenes externos */
  position: relative;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
}

.footer-siguenos h2 {
  color: #fff;
  font-size: 2rem;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  margin-bottom: 15px;
  letter-spacing: 1px;
  font-weight: 600;
}

/* ====== Redes sociales ====== */
.footer-redes {
  display: flex;
  gap: 25px;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
}

.footer-link svg {
  width: 54px;
  height: 54px;
  transition: transform 0.3s ease, fill 0.3s ease;
  cursor: pointer;
}

.footer-link:hover svg {
  transform: scale(1.4);
  fill: #00ffff;
}

/* ====== Línea animada debajo de íconos ====== */
.footer-line {
  width: 100%;
  max-width: 200px;
  height: 4px;
  background-color: #fff;
  margin: 20px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}

.footer-redes:hover + .footer-line {
  transform: scaleX(1);
}

/* ====== Texto del footer ====== */
.footer-texto {
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: 20px;
}

.footer-texto p {
  font-size: 1.3rem;
  margin: 10px 0;
  line-height: 1.6;
}

/* ====== Enlaces del footer ====== */
.footer-links {
  display: inline-block; 
  margin-top: 12px;
  line-height: 1.8;
}

.footer-links a {
  color: #fff;
  text-decoration: underline;
  margin: 0 8px;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #00ffff;
}

.footer-links br {
  content: "";
  margin: 10px 0;
  display: block;
}

/* ============================
   SECCIÓN DE LOGOS
============================ */

/* Logo principal (solo arriba, centrado) */
.footer-logo1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo1 img {
  width: 250px;
  height: auto;
  
  transition: transform 0.3s ease;
  cursor: pointer;
}

.footer-logo1 img:hover {
  transform: scale(1.2);
}

/* Contenedor para los dos logos en línea */
.footer-logos-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;          /* separación entre las dos imágenes */
  flex-wrap: wrap;    /* para pantallas pequeñas */
}

/* Imagen "mascotas" */
.footer-logo2 img {
  width: 200px;
  height: auto;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.footer-logo2 img:hover {
  transform: scale(1.2);
}

/* Imagen circular (huella) */
.footer-logo3 img {
  width: 140px;      /* 🔹 tamaño más grande */
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.footer-logo3 img:hover {
  transform: scale(1.2);
}

.footer-logo4 img {
  width: 140px;      /* 🔹 tamaño más grande */
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
  cursor: pointer;
  margin-right: 35px;
}

.footer-logo4 img:hover {
  transform: scale(1.2);
}




/* ===============================
   RESPONSIVO FOOTER
=============================== */

/* Tablets (pantallas medianas) */
@media (max-width: 992px) {
  .footer {
    padding: 45px 0;
    gap: 25px;
  }

  .footer-siguenos h2 {
    font-size: 1.7rem;
  }

  .footer-link svg {
    width: 46px;
    height: 46px;
  }

  .footer-texto p {
    font-size: 1.1rem;
  }

  .footer-links a {
    font-size: 1.1rem;
  }

  .footer-logo1 img {
    width: 200px;
  }

  .footer-logo2 img {
    width: 160px;
  }

  .footer-logo3 img,
  .footer-logo4 img {
    width: 110px;
    height: 110px;
  }
}

/* Móviles (pantallas pequeñas) */
@media (max-width: 600px) {
  .footer {
    padding: 35px 15px;
    gap: 20px;
  }

  .footer-siguenos h2 {
    font-size: 1.4rem;
  }

  .footer-redes {
    gap: 18px;
    flex-wrap: wrap;
  }

  .footer-link svg {
    width: 38px;
    height: 38px;
  }

  .footer-line {
    max-width: 120px;
    height: 3px;
  }

  .footer-texto p {
    font-size: 1rem;
    line-height: 1.4;
  }

  .footer-links a {
    font-size: 1rem;
    display: inline-block;
    margin: 4px 6px;
  }

  .footer-logo1 img {
    width: 160px;
  }

  .footer-logos-row {
    gap: 20px;
  }

  .footer-logo2 img {
    width: 130px;
  }

  .footer-logo3 img,
  .footer-logo4 img {
    width: 90px;
    height: 90px;
    margin-right: 0;
  }
}











/* -------- SECCIÓN NOSOTROS -------- */
.nosotros {
  padding: 0px 10%;
  background-color: #ffffff;
}

.nosotros .titulo-seccion {
  font-size: 3rem;
  font-style: italic;   /* cursiva */
  color: #1e3c72;      /* azul */
  text-align: left;
  margin-bottom: 20px;
  margin-top: -35px;
}

.nosotros-contenido {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.nosotros-texto {
  flex: 1;
}

.nosotros-texto p {
  font-size: 1.4rem;
  line-height: 1.0;               /* ajustado para acercar el texto al borde */
  color: #333333;
  background-color: #f9f9f9;      
  padding: 12px 15px;             /* padding reducido para acercar el texto al borde */
  border-radius: 15px;
  position: relative;             
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: default;
}

.nosotros-texto p::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #1e3c72;               
  transition: width 0.4s ease, left 0.4s ease;
}

/* Sombra flotante estática */
.nosotros-texto p {
  transform: translateY(-5px);
}

/* Animación de la línea al pasar el cursor */
.nosotros-texto p:hover::after {
  width: 100%;
  left: 0;
}

.nosotros-imagen {
  flex: 1;
  position: relative; 
  overflow: hidden;   
  border-radius: 20px; 
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.nosotros-imagen img {
  width: 100%;
  border-radius: 20px;
  transition: transform 0.5s ease;
  display: block;
}

/* Línea animada debajo de la imagen */
.nosotros-imagen::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #1e3c72;
  transition: width 0.4s ease, left 0.4s ease;
}

/* Efecto zoom suave */
.nosotros-imagen:hover img {
  transform: scale(1.1); 
}

.nosotros-imagen:hover::after {
  width: 100%;
  left: 0;
}



/* Ajuste general para la sección */
.nosotros-contenido {
  display: flex;
  text-align: right;
  justify-content: space-between;
  align-items: center;
  gap: 50px; /* espacio entre imagen y texto */
  margin-top: 30px;
  margin-bottom: 40px; /* espacio superior para bajar el bloque */
}

/* Imagen con margen superior adicional */
.nosotros-imagen {
  flex: 1;
  margin-top: 40px; /* baja la imagen un poco */
}

.nosotros-imagen img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s ease;
}

.nosotros-imagen img:hover {
  transform: scale(1.1);
}

/* Texto con margen superior adicional */
.nosotros-texto {
  flex: 1;
  margin-top: 40px; /* baja el texto */
}

.nosotros-texto .titulo-subseccion {
  font-size: 3rem;
  font-style: italic;
  color: #1e3c72;
  margin-bottom: 20px;
}

.nosotros-texto p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #333333;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 15px;
  position: relative;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: default;
  transform: translateY(-5px);
  text-align: left;
}

/* Línea animada debajo del recuadro */
.nosotros-texto p::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #1e3c72;
  transition: width 0.4s ease, left 0.4s ease;
}

.nosotros-texto p:hover::after {
  width: 100%;
  left: 0;
}



/* =========================
   SECCIÓN NOSOTROS - RESPONSIVE
========================= */
@media (max-width: 1024px) {
  .nosotros {
    padding: 40px 8% 15px 8%;  /* más margen arriba */
  }
  .nosotros-contenido {
    gap: 40px; /* más espacio entre texto e imagen */
    flex-direction: row; /* texto + imagen lado a lado */
    align-items: flex-start;
    text-align: left;
  }
  .nosotros-texto p {
    font-size: 1.3rem;
    padding: 18px;
  }
  .nosotros-texto .titulo-subseccion {
    font-size: 2.5rem;
  }
  .nosotros-imagen {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .nosotros {
    padding: 50px 6% 50px 6%; /* margen arriba y abajo mayor */
  }

  .nosotros-contenido {
    display: flex;
    flex-direction: column; /* se apilan */
    gap: 25px; /* espacio vertical entre bloques */
    align-items: stretch;
    text-align: left;
  }

  /* Mantener patrón texto → imagen */
  .nosotros-contenido:nth-of-type(odd) .nosotros-texto,
  .nosotros-contenido:nth-of-type(even) .nosotros-texto {
    order: 1;
  }
  .nosotros-contenido:nth-of-type(odd) .nosotros-imagen,
  .nosotros-contenido:nth-of-type(even) .nosotros-imagen {
    order: 2;
  }

  .nosotros-texto {
    width: 100%;
    margin-top: 0;
  }

  .nosotros-texto p {
    font-size: 1.25rem;
    padding: 16px;
  }

  .nosotros-texto .titulo-subseccion {
    font-size: 2.2rem;
    margin-bottom: 15px;
  }

  .nosotros-imagen {
    width: 100%;
    margin-top: 0;
    margin-bottom: 35px; /* más margen abajo */
  }
}

@media (max-width: 480px) {
  .nosotros {
    padding: 25px 4% 15px 4%; /* aún más margen arriba y abajo */
  }

  .nosotros-contenido {
    gap: 20px;
  }

  .nosotros-texto p {
    font-size: 1.1rem;
    padding: 12px;
  }

  .nosotros-texto .titulo-subseccion {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }

  .nosotros-imagen {
    margin-top: 0;
    margin-bottom: 20px; /* margen extra abajo en móviles */
  }
}







/* ====== Sección Destinos ====== */
.destinos-cruceros {
  padding: 40px 80px; /* Más margen lateral */
  background: #f8fbff;
  text-align: center;
}

.destinos-titulo {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: #003366;
}

.destinos-intro {
  max-width: 750px;
  margin: 0 auto 45px;
  font-size: 1.4rem;
  color: #555;
}

.destinos-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px; /* Separación más amplia entre destinos */
}

/* Cada destino */
.destino {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
  position: relative;
}

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

/* Imagen con zoom interno */
.destino img {
  width: 100%;
  height: 350px; /* Imagen más grande */
  object-fit: cover;
  border-radius: 15px 15px 0 0;
  transition: transform 0.5s ease;
}

.destino:hover img {
  transform: scale(1.1);
}

/* Texto debajo */
.destino figcaption {
  padding: 20px;
  position: relative;
}

.destino h3 {
  font-size: 1.5rem;
  color: #003366;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

/* Línea animada debajo del título */
.destino h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: #1e3c72;
  transition: width 0.4s ease, left 0.4s ease;
}

.destino:hover h3::after {
  width: 100%;
  left: 0;
}

.destino p {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.6; /* Línea un poco más amplia para mejor lectura */
}

/* ====== Responsivo ====== */
@media (max-width: 1200px) {
  .destinos-cruceros {
    padding: 60px 50px;
  }
}

@media (max-width: 992px) {
  .destinos-galeria {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .destinos-galeria {
    grid-template-columns: 1fr;
  }

  .destinos-cruceros {
    padding: 25px 15px; /* menos padding en móviles */
  }

  .destinos-titulo {
    font-size: 2rem;     /* un poco más chico en móviles */
    margin-top: 0px;    /* reduce el margen superior */
    margin-bottom: 10px; /* reduce el margen inferior */
  }

  .destinos-intro {
    font-size: 1.1rem;   /* texto más compacto */
    margin-bottom: 25px; /* menos espacio antes de la galería */
  }
}





.navieras-cruceros {
  padding: 0px 100px 60px 100px; /* margen lateral aumentado */
  background: #f0f4f8;
  text-align: center;
}

.titulo-navieras {
  font-size: 2.5rem;
  color: #003366;
  font-style: italic;
  margin-bottom: 20px;
  margin-top: 40px;
}

.subtitulo-navieras {
  max-width: 950px;
  margin: 0 auto 60px;
  font-size: 1.5rem;
  color: #555;
  line-height: 1.6;
}

.tarjetas-navieras {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 tarjetas por fila */
  gap: 70px; /* espacio entre tarjetas */
  justify-content: center;
  align-items: stretch;
}

.tarjeta {
  background: #fff;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 550px; /* más alargadas hacia abajo */
}

.tarjeta img {
  width: 100%;
  height: 300px; /* imagen más grande y extendida */
  object-fit: cover;
  display: block;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-bottom: 15px;
}

.tarjeta h3.linea-animada {
  font-weight: bold;
  font-size: 1.1rem;
  color: #003366;
  text-align: center;
  margin: 10px 0;
  position: relative;
}

.tarjeta h3.linea-animada::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 3px;
  background: #00f0ff;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.5s ease;
}

.tarjeta:hover h3.linea-animada::after {
  width: 60%;
}

.tarjeta p {
  font-size: 1.2rem;
  color: #555;
  text-align: center;
  padding: 0 15px 15px 15px;
}

.tarjeta a.ver-mas {
  display: inline-block;
  text-decoration: none;
  background: #003366;
  color: #fff;
  font-weight: 700;
  padding: 8px 20px;
  margin-top: auto;
  margin-bottom: 15px;
  border-radius: 8px;
  transition: background 0.3s ease;
  position: relative;
}

.tarjeta a.ver-mas::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 0;
  height: 3px;
  background: #00f0ff;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.4s ease;
}

.tarjeta a.ver-mas:hover::after {
  width: 80%;
}

.tarjeta:hover {
  transform: scale(1.08);
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}


.clasificacion-navieras {
  text-align: center;
  margin-top: 50px; /* Margen superior para separarlo de las tarjetas */
}

.titulo-clasificacion {
  font-size: 2.5rem;
  color: #003366;
  margin-bottom: 15px;
  font-style: italic; /* letra cursiva */
}

.subtitulo-clasificacion {
  font-size: 1.4rem;
  color: #555;
  max-width: 800px;
  margin: 0 auto 30px auto;
}

.imagen-clasificacion {
  width: 100%;
  max-width: 1300px;
  height: auto;
  border-radius: 20px; /* Bordes redondeados */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}




/* ====== Responsivo ====== */
@media (max-width: 1200px) {
  .tarjetas-navieras {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
  }
}

@media (max-width: 900px) {
  .tarjetas-navieras {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  
  .navieras-cruceros {
    padding: 0px 40px 60px 40px;  /* 👈 aquí está el problema */
  }
.subtitulo-clasificacion {
    margin: auto 40px 30px 40px;  
  }

  
}






/* ====== Contactos ====== */
.contactos {
  padding: 40px 100px 80px 100px;
  background: #f0f4f8;
  text-align: center;
}

.titulo-contactos {
  font-size: 2.5rem; /* título más grande */
  color: #003366;
  margin-bottom: 25px;
  font-style: italic;
}

.subtitulo-contactos {
  max-width: 950px;
  margin: 0 auto 70px;
  font-size: 1.35rem;
  color: #555;
  line-height: 1.6;
}

.contactos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px; /* más separación entre tarjetas */
  justify-content: center;
  align-items: stretch;
}

.contacto-tarjeta {
  background: #fff;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  height: 420px; /* más alto para aspecto cuadrado */
  width: 100%;
}

.contacto-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}

.contacto-tarjeta h3 {
  font-weight: bold;
  font-size: 1.4rem;
  color: #003366;
  text-align: center;
  margin-bottom: 12px;
  position: relative;
}

.contacto-foto {
  display: flex;
  justify-content: center; /* centra horizontal */
}

.foto-contacto {
  width: 120px;   
  height: 120px;  
  border-radius: 50%; 
  object-fit: cover; 
  margin-bottom: 15px; /* espacio debajo */
}

.contacto-tarjeta p {
  font-size: 1.3rem;
  color: #555;
  margin: 6px 0;
  text-align: center;
}

.contacto-tarjeta .icono-telefono,
.contacto-tarjeta .icono-correo {
  margin-right: 5px;
  color: #1e3c72;
}

/* Línea animada en el nombre */
.contacto-tarjeta h3::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 3px;
  background: #00ffff; /* azul neón */
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.5s ease;
}

.contacto-tarjeta:hover h3::after {
  width: 60%;
}

.contacto-tarjeta:hover {
  transform: scale(1.08);
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

/* ===========================
   SECCIÓN DE SUSCRIPCIÓN (ajustada)
=========================== */
.suscripcion {
  background: #fff;
  color: #222;
  text-align: center;
  padding: 80px 20px 60px 20px;
  margin-top: 0;                /* ❌ elimina el salto entre secciones */
  border-top: none;             /* ❌ quita la línea divisoria */
  border-radius: 20px 20px 0 0; /* 🎨 bordes suaves arriba para transición natural */
  box-shadow: 0 -5px 25px rgba(0,0,0,0.05); /* sombra ligera para fusión visual */
}

.suscripcion h2 {
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 15px;
  color: #004aad;
}

.suscripcion p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 25px auto;
  line-height: 1.6;
}

/* ====== FORMULARIO ====== */
.form-suscripcion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.form-suscripcion input[type="email"] {
  padding: 12px 18px;
  width: 300px;
  max-width: 90%;
  border: 1px solid #ccc;
  border-radius: 30px;
  outline: none;
  font-size: 1rem;
  color: #333;
  transition: box-shadow 0.3s ease;
}

.form-suscripcion input[type="email"]:focus {
  box-shadow: 0 0 8px rgba(0, 74, 173, 0.3);
}

/* ====== BOTÓN ====== */
.form-suscripcion button {
  background-color: #004aad;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-suscripcion button:hover {
  background-color: #007bff;
  transform: scale(1.05);
}

/* ====== CONDICIONES ====== */
.condiciones {
  font-size: 0.85rem;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.4;
}

.condiciones a {
  color: #004aad;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.condiciones a:hover {
  color: #007bff;
}


.mensaje-confirmacion {
  display: none;
  opacity: 0;
  margin-top: 15px;
  color: #28a745;
  font-weight: bold;
  text-align: center;
  transition: opacity 0.6s ease;
}


/* ====== Responsivo ====== */
@media (max-width: 1200px) {
  .contactos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
  }
}

@media (max-width: 900px) {
  .contactos-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .contactos {
    padding: 40px 20px 60px 20px;
  }
}











/* ===== SUBMENÚ PROMOCIONES ===== */
.navbar-menu .submenu {
  position: relative;
}

.navbar-menu .submenu-items {
  position: absolute;
  top: 130%; /* 👈 Ahora queda más abajo */
  left: 0;
  background: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 220px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;

  /* Animación */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.35s ease;
}

.navbar-menu .submenu-items li {
  width: 100%;
}

.navbar-menu .submenu-items li a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #0056b3; /* Azul corporativo */
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
}

/* Hover en las opciones */
.navbar-menu .submenu-items li a:hover {
  background: #0056b3;
  color: #fff;
}

/* Mostrar menú con animación */
.navbar-menu .submenu:hover .submenu-items {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===== Línea animada neon en hover ===== */
.navbar-menu .submenu-items li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  height: 2px;
  width: 0;
  background: #00eaff; /* Color neón */
  transition: all 0.4s ease;
  transform: translateX(-50%);
  box-shadow: 0 0 6px #00eaff, 0 0 12px #00eaff;
}

.navbar-menu .submenu-items li a:hover::after {
  width: 100%;
}











.promociones {
  padding: 40px 140px; /* más margen superior e lateral */
  background-color: #f9f9f9;
  text-align: center;
}

.promociones-header h2 {
  font-style: italic;
  color:  #003366; /* azul marino */
  font-size: 2.5rem;
  margin-bottom: 30px; /* más espacio debajo del título */
}

.promociones-header p {
  font-size: 1.4rem;
  color: #333;
  max-width: 950px; /* más ancho para que respire el texto */
  margin: 0 auto 60px auto; /* más margen inferior */
  line-height: 1.6;
}

.promociones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px; /* espacio entre tarjetas */
}

.promocion-card {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden; /* importante para que la imagen no se salga */
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
  padding-bottom: 30px; 
}


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

.promocion-card img {
  width: 100%;
  height: 505px; 
  object-fit: cover;
  transition: transform 0.5s ease; /* transición suave */
}



.promocion-card button {
  position: relative;
  margin: 25px 0 0 0;
  padding: 14px 28px;
  background-color: #001f3f; /* azul marino */
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  overflow: hidden; /* para que la línea animada no se salga */
  transition: background-color 0.3s ease;
  font-weight: 700;
}

.promocion-card button::after {
  content: "";
  position: absolute;
  height: 3px; /* grosor de la línea */
  width: 0%;
  left: 50%;
  bottom: 0;
  background-color: #00ffff; /* azul neón */
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

.promocion-card button:hover::after {
  width: 100%; /* la línea se expande al 100% */
  left: 50%;
  transform: translateX(-50%);
}

.promocion-card button:hover {
  background-color: #003366; /* cambio de fondo al pasar el cursor */
}

/* Responsivo */
@media (max-width: 1024px) {
  .promociones {
    padding: 80px 60px;
  }
  .promociones-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 700px) {
  .promociones {
    padding: 30px 30px;
  }
  .promociones-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}











/* Estilos generales para la sección */
#terminos-condiciones {
  width: 90%;
  margin: 150px auto 50px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  text-align: justify;
  font-family: Arial, sans-serif;
}

/* Estilo para el título principal */
#terminos-condiciones .titulo-principal {
  color: #003366;
  font-style: italic;
  font-size: 2.6em;
  margin-bottom: 20px;
  text-align: left;
  display: block; /* Cambiado para que la línea solo abarque el texto */
  position: relative;
  cursor: pointer;
}

/* Línea animada para título principal */
#terminos-condiciones .titulo-principal::after {
  content: '';
  display: block;
  height: 2px;
  width: 0%;
  background-color:  #003366;
  transition: width 0.4s ease-in-out;
  margin-top: 5px; /* espacio debajo del texto */
}

#terminos-condiciones .titulo-principal:hover::after {
  width: 100%; /* solo el ancho del texto */
}

/* Estilo para los subtítulos */
#terminos-condiciones .subtitulo {
  color:  #003366;
  font-style: italic;
  font-size: 2.0em;
  margin-top: 35px;
  margin-bottom: 10px;
  text-align: left;
  display: inline-block; /* para que la línea solo cubra el texto */
  position: relative;
  cursor: pointer;
}

/* Línea animada para subtítulos */
#terminos-condiciones .subtitulo::after {
  content: '';
  display: block;
  height: 2px;
  width: 0%;
  background-color: #003366;
  transition: width 0.4s ease-in-out;
  margin-top: 5px;
}

#terminos-condiciones .subtitulo:hover::after {
  width: 100%;
}

/* Estilo para los párrafos */
#terminos-condiciones p {
  line-height: 1.7;
  margin-bottom: 15px;
  font-size: 1.3em;
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
}

/* Estilo para los enlaces dentro del texto */
#terminos-condiciones a {
  color:  #003366;
  text-decoration: none;
}

#terminos-condiciones a:hover {
  text-decoration: underline;
}




/* ===== Estilos de la sección de videos ===== */
.videos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px; /* un poco más de separación entre cada elemento */
  padding: 50px 20px;
  background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.videos h2 {
  margin-top: -10px;    /* menos espacio arriba */
  margin-bottom: -20px; /* reduce el espacio debajo del título */
}

/* Título en cursiva y azul */
.videos h2 em {
  font-style: italic;
  color: #1a3d7c;
  font-size: 2.7rem;
  text-align: center;
  display: block;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.imagen {
  display: block;
  margin-top: -50px;   /* ajusta el valor (antes seguramente tiene más de 20px) */
  margin-bottom: 20px; /* opcional, controla el espacio inferior */
  transition: transform 0.4s ease;
}

.imagen:hover {
  transform: scale(1.01);
  
}

/* Texto introductorio */
.videos .intro-texto {
  max-width: 900px;
  text-align: center;
  font-size: 1.3rem;
  color: #333;
  line-height: 1.8;
  margin-top: -40px;  
  margin-bottom: -20px;
  font-weight: 600;
  padding: 0 10px;
}

/* Contenedor de cada video */
.videos .video-item {
  width: 100%;
  max-width: 1200px; /* videos más grandes */
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Efecto hover en videos */
.videos .video-item:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Imagen debajo de los videos, visible completa */
.video-item .video-imagen {
  width: 100%;          
  max-width: 1200px;    /* ajustado al tamaño del video */
  height: auto;          
  margin-top: 20px;      /* un poquito más de separación */
  border-radius: 15px;   
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  display: block;
}

.video-item .video-texto {
  max-width: 900px;
  margin: 15px auto 0; /* separación del video y centrado */
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  text-align: justify;
  padding: 0 10px;
}


/* Responsivo para móviles */
@media screen and (max-width: 768px) {
  .video-item .video-imagen {
    max-width: 100%;
    margin-top: 10px;
  }
}


/* Video dentro del contenedor */
.videos .video-item video {
  width: 100%;
  height: auto; /* mantiene proporción */
  display: block;
  border-radius: 15px;
}

/* ===== Responsivo para móviles ===== */
@media screen and (max-width: 768px) {
  .videos {
    padding: 30px 15px;
    gap: 30px; /* menos separación en móviles */
  }

  .videos h2 {
  margin-top: -10px;    /* menos espacio arriba */
  margin-bottom: 0px; /* reduce el espacio debajo del título */
}

   .imagen {
    margin-top: -20px;   
    margin-bottom: 15px;
    margin-left: -10px;   /* margen lateral en móviles */
    margin-right: -10px;
    width: calc(100% - 5px); /* evita que se desborde con los márgenes */
  }

  .video-item .video-imagen {
    max-width: 100%;
    margin-top: 10px;
  }

  .video-item .video-texto {
    font-size: 0.95rem;
    padding: 0 5px;
  }

  .videos h2 em {
    font-size: 2rem; /* título más pequeño en móviles */
  }

  .videos .intro-texto {
    font-size: 1rem;
  }

  .videos .video-item {
    max-width: 100%; /* ocupa todo el ancho de la pantalla */
  }
}




/* Estilos del modal de imagen */
.image-modal {
    display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;  /* permite hacer scroll si la imagen es más grande */
  background-color: rgba(0,0,0,0.8);
}

.modal-img {
  display: block;
  max-width: 90%;
  max-height: 90%;
  margin: 5% auto;
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.image-modal-content {
  display: block;
  margin: 5% auto;
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

.image-modal-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.image-modal-close:hover {
  color: #ccc;
}


/* Responsivo para móviles */
@media screen and (max-width: 768px) {
  .image-modal-content {
    max-width: 95%;   /* ocupa casi todo el ancho */
    max-height: 80%;  /* se ajusta a la altura de la pantalla */
    margin: 10% auto; /* más separación superior e inferior */
  }

  .image-modal-close {
    font-size: 30px; /* más pequeño en móviles */
    top: 10px;
    right: 20px;
  }
}







/* ====== Sección Registro Nacional de Turismo ====== */
.registro-turismo {
  text-align: center;
  margin: 60px 80px; /* margen lateral grande para escritorio */
}

.registro-turismo h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  color: #003366;
  font-style: italic; /* título en cursiva */
  margin-bottom: 30px;
}

.registro-turismo .imagen-registro img {
  width: 80%;        /* ancho reducido respecto al contenedor */
  max-width: 1300px; /* limita tamaño máximo */
  height: auto;      /* mantiene proporción */
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  display: block;
  margin: 0 auto;
}

/* ====== Responsividad para móviles ====== */
@media screen and (max-width: 768px) {
  .registro-turismo {
    margin: 40px 20px; /* menos margen lateral en móviles */
  }

  .registro-turismo h2 {
    font-size: 2rem; /* título más pequeño en móviles */
  }

  .registro-turismo .imagen-registro img {
    width: 100%;     /* ocupa todo el ancho disponible en móviles */
    max-width: 100%; /* sin límite para que se ajuste al contenedor */
  }
}