/* Social Media Icons */
.social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Circular */
  color: white !important;
  text-decoration: none;
  transition: transform 0.3s ease, filter 0.3s ease;
  font-size: 1.25rem; /* Ajustar tamaño del icono */
}

.social-icon:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

/* Official Colors */
.bg-facebook { background-color: #1877F2; }
.bg-instagram { 
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
}
.bg-tiktok { background-color: #000000; }
.bg-whatsapp { background-color: #25D366; }
.bg-twitter { background-color: #1DA1F2; }
.bg-linkedin { background-color: #0A66C2; }
.bg-youtube { background-color: #FF0000; }

body{background: linear-gradient(270deg, #e49759, #e49759, #27214e, #27214e, #ff6b3e, #f7c16a, #00f9ff, #00f9ff, #00f9ff, #e49759, #e49759);
    background-size: 14200% auto;

    -webkit-animation: AnimationName 10s linear infinite;
    -moz-animation: AnimationName 10s linear infinite;
    animation: AnimationName 10s linear infinite;
}

@-webkit-keyframes AnimationName {
     0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}
@-moz-keyframes AnimationName {
     0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}

header{
  background-color: #004aad;
}
/* Compensación para header fijo */
body {
  padding-top: 290px; /* Altura estimada móvil (stack vertical) */
}
@media (min-width: 992px) {
  body {
    padding-top: 140px; /* Altura estimada escritorio (incluye redes y teléfonos) */
  }
}
.pt-6{
  padding-top: 6rem;
}
.pb-6{
  padding-bottom: 250px;
}
header img { max-height: 64px; }
/* Hero carousel */
.hero-carousel .carousel-item { height: 70vh; min-height: 420px; }
.hero-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; }
.hero-carousel .overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.hero-carousel .caption-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hero-carousel h1, .hero-carousel p { text-shadow: 0 2px 8px rgba(0,0,0,.6); }
/* Destinos populares */
#destinos-populares h2 {
  color: #000;
  text-shadow: 0 0 4px #fff;
}
.dest-card { position: relative; border-radius: .75rem; overflow: hidden; height: 100%; min-height: 240px; }
.dest-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest-card .overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.45)); }
.dest-card .caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
/* Grid para distribución exacta en desktop */
#destinos-populares .dest-grid { display: grid; gap: 1rem; }
@media (min-width: 992px) {
  /* === Destinos Populares (Grid) === */
  #destinos-populares .dest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas: 50% + 50% */
    grid-template-rows: 1fr 1fr;    /* 2 filas: 50% + 50% de la altura del contenedor */
    gap: 1.5rem; /* separaciones como g-4 */
    height: clamp(520px, 70vh, 740px); /* asegura altura del contenedor para que 100%/50% funcionen */
  }
  
  /* Item 1 ocupa toda la primera columna y ambas filas: 50% ancho x 100% alto */
  #destinos-populares .item-1 {
    grid-column: 1 / 2; /* primera columna */
    grid-row: 1 / 3;    /* ocupa 2 filas */
  }

  /* Item 2 arriba derecha: 50% ancho x 50% alto */
  #destinos-populares .item-2 {
    grid-column: 2 / 3; /* segunda columna */
    grid-row: 1 / 2;    /* fila superior */
  }

  /* Contenedor para items 3 y 4 ocupa la celda inferior derecha */
  #destinos-populares .item-3-4 {
    grid-column: 2 / 3; /* segunda columna */
    grid-row: 2 / 3;    /* fila inferior */
    display: grid;
    grid-template-columns: 1fr 1fr; /* dos columnas iguales => 25% + 25% del total */
    gap: 1.5rem;
  }

  #destinos-populares .item-3,
  #destinos-populares .item-4 {
    min-height: 220px; /* altura mínima para mantener proporción visual */
  }

  /* Ajustes de tarjetas reutilizando estilos existentes */
  #destinos-populares .dest-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
  }

  #destinos-populares .dest-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  #destinos-populares .dest-card:hover img { transform: scale(1.04); }

  #destinos-populares .dest-card .overlay {
    position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
  }

  #destinos-populares .dest-card .caption { position: absolute; z-index: 2; color: #fff; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

  /* Responsive: en <= 991px, volver a una sola columna vertical para mejor lectura */
  @media (max-width: 991.98px) {
    #destinos-populares .dest-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }
    #destinos-populares .item-1,
    #destinos-populares .item-2,
    #destinos-populares .item-3-4 { grid-column: 1 / -1; grid-row: auto; }
    #destinos-populares .item-3-4 { grid-template-columns: 1fr; }
    #destinos-populares .item-3, #destinos-populares .item-4 { min-height: 200px; }
  }
}