/* ----------------------------------------------------------------
   Custom CSS – FINAL OPTIMIZADO (sin duplicados ni conflictos) 
-----------------------------------------------------------------*/

/* ===================== HERO con video ===================== */
.hero-video{ position:relative; overflow:hidden; }
.hero-video__media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:1;
}
.hero-video__overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
.hero-video__content{ position:relative; z-index:3; padding-top:6rem; padding-bottom:6rem; color:#fff; }
@media (max-width:768px){
  .hero-video__media{ display:none; }
  .hero-video{ background:url("images/video/cover-1280.jpg") center/cover no-repeat; }
}

/* ===================== Parallax de sección ===================== */
.parallax-hero{
  position:relative; padding:140px 0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.parallax-hero__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
}
.parallax-hero .container{ position:relative; z-index:2; }
@media (max-width:991.98px){ .parallax-hero{ padding:96px 0; } }
@media (prefers-reduced-motion:reduce){ .parallax-hero{ background-attachment:scroll !important; } }

/* ===================== HERO 9:16 – BASE (todas las cards) ===================== */
.card-hero{
  --content-band:30%; /* altura base de la franja inferior (se ajusta por sección) */
  position:relative; overflow:hidden; aspect-ratio:9/16;
  border-radius:16px; background:#000; box-shadow:0 10px 24px rgba(0,0,0,.10);
  transform:translateZ(0);
}
.card-hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  transform:scale(1.02); transition:transform .35s ease; z-index:0;
}
.card-hero:hover .card-hero__img{ transform:scale(1.06); }

/* Degradado base (pensado para contenido ABAJO). La banda se activa por sección */
.card-hero__grad{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) calc(100% - var(--content-band)), rgba(0,0,0,.65) 100%);
}
.card-hero::after{ display:none; } /* desactivada por defecto */

.card-hero__content{
  position:absolute; left:16px; right:16px; bottom:16px; top:auto; /* base = abajo */
  display:flex; flex-direction:column; justify-content:flex-end; gap:12px;
  color:#fff; z-index:2;
}
.card-hero__title{
  color:#fff; text-transform:uppercase; letter-spacing:.03em;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.card-hero__sub{
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
  margin-bottom:0; /* evita empujar el botón/CTA */
}

/* Clamp (evita saltos con textos largos) */
.card-hero__title,
.card-hero__sub{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Fallback sin aspect-ratio */
@supports not (aspect-ratio:1){
  .card-hero::before{ content:""; display:block; padding-top:177.78%; }
  .card-hero__img,.card-hero__grad,.card-hero__content{ position:absolute; inset:0; }
}

/* ===================== Controles de carrusel ===================== */
.card-hero__carousel,
.card-hero__carousel .carousel-inner,
.card-hero__carousel .carousel-item{ height:100%; }

.card-hero__ctrl{
  width:42px; height:42px; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.28);
  border-radius:999px; box-shadow:0 4px 10px rgba(0,0,0,.35);
  z-index:3; transition:background-color .2s, border-color .2s, opacity .2s, transform .2s;
  backdrop-filter:saturate(120%) blur(1.5px);
}
.card-hero__ctrl:hover{ background:rgba(0,0,0,.75); border-color:rgba(255,255,255,.4); transform:translateY(-50%) scale(1.03); }
.card-hero .carousel-control-prev.card-hero__ctrl{ left:10px; }
.card-hero .carousel-control-next.card-hero__ctrl{ right:10px; }
.card-hero__ctrl .carousel-control-prev-icon,
.card-hero__ctrl .carousel-control-next-icon{
  width:16px; height:16px; background-size:16px 16px; filter:none !important; mix-blend-mode:normal;
}
.card-hero__ctrl .carousel-control-prev-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 2.5 5.5 9l6 6.5'/%3E%3C/svg%3E");
}
.card-hero__ctrl .carousel-control-next-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 2.5 12.5 9l-6 6.5'/%3E%3C/svg%3E");
}

/* ===================== Botón ghost invertido (hover dorado) ===================== */
:root{ --brand-gold:#D4AF37; --brand-gold-deep:#BFA034; }
.btn-ghost-invert{
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.45);
  padding:.5rem 1rem; border-radius:.35rem;
  transition:background-color .2s, border-color .2s, color .2s, transform .15s;
}
.btn-ghost-invert:hover{ background:var(--brand-gold); border-color:#B38F1D; color:#111; transform:translateY(-1px); }
.btn-ghost-invert:active{ background:var(--brand-gold-deep); border-color:#9A7F1A; color:#111; }
.btn-ghost-invert:focus-visible{ outline:0; box-shadow:0 0 0 .2rem rgba(212,175,55,.35); }

/* =================================================================
   OVERRIDES POR SECCIÓN (NO TOCAR EL HTML)
   Destinos y Experiencias = mismo comportamiento
   (banda negra inferior + contenido anclado abajo)
   ================================================================= */
#experiencias-recomendadas .card-hero,
#mapa-section .card-hero{
  --content-band:32%;
}
#experiencias-recomendadas .card-hero::after,
#mapa-section .card-hero::after{
  content:""; display:block; position:absolute; left:0; right:0; bottom:0;
  height:var(--content-band); background:rgba(0,0,0,.5); z-index:1;
}
#experiencias-recomendadas .card-hero__content,
#mapa-section .card-hero__content{
  top:auto !important; bottom:16px !important; left:16px; right:16px;
  justify-content:flex-end !important; gap:12px; z-index:2;
}
#experiencias-recomendadas .card-hero__title,
#experiencias-recomendadas .card-hero__sub,
#mapa-section .card-hero__title,
#mapa-section .card-hero__sub{
  color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* Centrar CTA si alguna card lo trae en un contenedor flex diferente */
.card-hero__content .d-flex{ justify-content:center; }

/* Ajuste móvil (opcional): un poco más de aire visual si lo necesitás */
/* @media (max-width:575.98px){
  #experiencias-recomendadas .card-hero__content,
  #mapa-section .card-hero__content{ bottom:14px !important; }
} */

/* =================================================================
   PARA EL SECTOR DE ALOJAMIENTO HOME
   ================================================================= */

.section-split h1,
    .section-split h2,
    .section-split h3 { font-family: "Inter", sans-serif !important; }

    @media (min-width: 576px) {
      .section-split {
        --section-width: 50%;
        --hover-width: 65%;
        --less-width: calc(100% - var(--hover-width));
        --hover-speed: 1s;
        --bg-opacity: 0.7;

        position: absolute;
        left: 0;
        top: 0;
        width: var(--section-width);
        background-repeat: no-repeat;
          background-size: auto 100%;
          background-position: center center;
        transition: width var(--hover-speed) ease;
      }

      .section-split.split-right {
        left: auto;
        right: 0;
      }

.section-split .btn {
  display: inline-flex;      /* o inline-block */
  width: auto;
}
      .section-split:hover ~ .section-split {
        width: var(--less-width);
      }

      .section-split:hover {
        width: var(--hover-width);
      }
    }