/* ==========================================================================
   HERO VIDEO-NAVEGACIÓN («hvn») — markup en includes/hero-video-nav.php
   Páginas generales (Hospedaje, Inicio, Experiencias…): video de fondo desde que
   carga, título y fichas que llevan a cada sección. Sin scroll-world.
   Identidad: Playfair con itálicas, dorado, café. Tokens en styles.css.
   ========================================================================== */
.hvn {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-primary-dark);
  color: var(--color-white);
  isolation: isolate;
}
/* Fondo: el póster (imagen real, carga primero) debajo y el video encima cuando llega */
.hvn__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-primary-dark);
}
.hvn__poster,
.hvn__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 1.1s ease;        /* fundido cruzado entre las dos copias al cerrar el loop */
}
/* Oscurece lo justo: más al pie (fichas) y una sombra suave detrás del título */
.hvn__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 62% 56% at 50% 46%, rgba(46, 26, 10, 0.5), rgba(46, 26, 10, 0.22) 55%, transparent 80%),
    linear-gradient(180deg, rgba(10, 5, 2, 0.34) 0%, rgba(10, 5, 2, 0.18) 38%, rgba(10, 5, 2, 0.5) 100%);
}
.hvn__content {
  position: relative;
  z-index: 2;
  width: min(1100px, 100% - 2rem);
  margin: 0 auto;
  padding: 6.5rem 0 5rem;
  text-align: center;
}
.hvn__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  text-shadow: 0 1px 8px rgba(20, 10, 4, 0.5);
}
.hvn__title {
  margin: 0.9rem 0 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--color-white);
  text-shadow: 0 3px 18px rgba(20, 10, 4, 0.55), 0 1px 3px rgba(20, 10, 4, 0.5);
}
.hvn__line {
  width: 56px;
  height: 2px;
  margin: 1rem auto;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.hvn__sub {
  margin: 0 auto;
  max-width: 34em;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
}

/* Fichas: como el menú de Hospedaje abierto, en vidrio oscuro */
.hvn__cards {
  display: grid;
  grid-template-columns: repeat(var(--hvn-cols, 4), minmax(0, 1fr));
  gap: 0.9rem;
  width: min(1040px, 100%);
  margin: 1.6rem auto 0.4rem;
}
.hvn--cols-8 { --hvn-cols: 4; }   /* 8 fichas: dos filas de cuatro */
.hvn--cols-8 .hvn__cards { gap: 0.7rem; }
.hvn--cols-8 .hvn-card__img { aspect-ratio: 16 / 9; }
/* Ficha estática: solo foto y nombre, sin enlace ni «ver»; no se levanta al pasar el ratón */
.hvn-card--static { cursor: default; text-align: center; }
.hvn-card--static:hover { transform: none; border-color: rgba(196, 162, 101, 0.35); box-shadow: 0 18px 44px rgba(10, 5, 2, 0.35); }
.hvn-card--static:hover .hvn-card__img img { transform: scale(1.015); }
.hvn-card--static .hvn-card__txt { padding: 0.55rem 0.6rem 0.65rem; align-items: center; }
.hvn-card--static .hvn-card__title { font-size: 0.98rem; }
.hvn--cols-7 { --hvn-cols: 7; }
.hvn--cols-6 { --hvn-cols: 6; }
.hvn--cols-5 { --hvn-cols: 5; }
/* Con más de 4 fichas: compactas en una sola fila (pantallas anchas) */
.hvn--cols-5 .hvn__cards, .hvn--cols-6 .hvn__cards, .hvn--cols-7 .hvn__cards { width: min(1240px, 100%); gap: 0.7rem; }
.hvn--cols-5 .hvn-card__img, .hvn--cols-6 .hvn-card__img, .hvn--cols-7 .hvn-card__img { aspect-ratio: 4 / 3; }
.hvn--cols-5 .hvn-card__txt, .hvn--cols-6 .hvn-card__txt, .hvn--cols-7 .hvn-card__txt { padding: 0.6rem 0.65rem 0.7rem; }
.hvn--cols-5 .hvn-card__cat, .hvn--cols-6 .hvn-card__cat, .hvn--cols-7 .hvn-card__cat { font-size: 0.54rem; letter-spacing: 0.14em; }
.hvn--cols-5 .hvn-card__title, .hvn--cols-6 .hvn-card__title, .hvn--cols-7 .hvn-card__title { font-size: 0.95rem; }
.hvn--cols-5 .hvn-card__meta, .hvn--cols-6 .hvn-card__meta, .hvn--cols-7 .hvn-card__meta { font-size: 0.64rem; }
.hvn--cols-5 .hvn-card__cta, .hvn--cols-6 .hvn-card__cta, .hvn--cols-7 .hvn-card__cta { display: none; }
@media (max-width: 1299.98px) {
  .hvn--cols-5 .hvn__cards, .hvn--cols-6 .hvn__cards, .hvn--cols-7 .hvn__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1040px, 100%); }
}
.hvn--cols-3 { --hvn-cols: 3; }
.hvn--cols-2 { --hvn-cols: 2; }
.hvn--cols-1 { --hvn-cols: 1; }
.hvn-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(20, 10, 4, 0.55);
  border: 1px solid rgba(196, 162, 101, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--color-white);
  text-decoration: none;
  text-align: left;
  box-shadow: 0 18px 44px rgba(10, 5, 2, 0.35);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.3s ease, box-shadow 0.45s ease;
}
.hvn-card:hover,
.hvn-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(196, 162, 101, 0.8);
  box-shadow: 0 26px 56px rgba(10, 5, 2, 0.45);
  color: var(--color-white);
  outline: none;
}
.hvn-card__img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.hvn-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}
.hvn-card:hover .hvn-card__img img { transform: scale(1.06); }
.hvn-card__txt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem 0.9rem;
}
.hvn-card__cat {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  line-height: 1.5;
}
.hvn-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.15;
}
.hvn-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.82);
}
.hvn-card__meta i { font-size: 0.62rem; opacity: 0.85; }
.hvn-card__cta {
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.3s ease;
}
.hvn-card__cta i { font-size: 0.55rem; margin-left: 2px; transition: transform 0.2s ease; }
.hvn-card:hover .hvn-card__cta { color: var(--color-gold); }
.hvn-card:hover .hvn-card__cta i { transform: translateX(3px); }

/* Enlace secundario bajo las fichas */
.hvn__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding: 0.6rem 0.2rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(20, 10, 4, 0.5);
  transition: color 0.3s ease, gap 0.3s ease;
}
.hvn__cta::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);   /* apunta hacia abajo: el enlace lleva a la sección de abajo */
}
.hvn__cta:hover { color: var(--color-gold); gap: 0.9rem; }
.hvn__cta:hover::after { animation: hvn-flecha 1.1s ease-in-out infinite; }
@keyframes hvn-flecha { 50% { transform: rotate(45deg) translate(1px, 1px); } }
.hvn__cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(196, 162, 101, 0.4); border-radius: 4px; }


/* Entrada al cargar: todo sube y se enfoca, escalonado (sin JS) */
@keyframes hvn-in {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.hvn__tag, .hvn__title, .hvn__line, .hvn__sub, .hvn-card, .hvn__cta {
  animation: hvn-in 1s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.hvn__tag   { animation-delay: 0.15s; }
.hvn__title { animation-delay: 0.25s; }
.hvn__line  { animation-delay: 0.4s; }
.hvn__sub   { animation-delay: 0.45s; }
.hvn-card   { animation-delay: calc(0.6s + var(--i, 0) * 0.09s); }
.hvn__cta   { animation-delay: 1.05s; }
/* La ficha anima su entrada; el hover usa transition. Al terminar la animación, suelta el transform */
.hvn-card { animation-fill-mode: backwards; }

/* Tableta: dos columnas */
@media (max-width: 991.98px) {
  .hvn__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; width: min(560px, 100%); }
  /* Con 3 fichas (Romance, Experiencias) la tercera quedaba sola a la izquierda: se centra */
  .hvn--cols-3 .hvn-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 0.35rem); justify-self: center; }
  .hvn--cols-5 .hvn__cards, .hvn--cols-6 .hvn__cards, .hvn--cols-7 .hvn__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(640px, 100%); }
  .hvn--cols-8 .hvn__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(640px, 100%); gap: 0.5rem; }
  .hvn--cols-8 .hvn-card--static .hvn-card__title { font-size: 0.8rem; }
  .hvn--cols-7 .hvn-card__img { aspect-ratio: 16 / 10; }
  .hvn-card__txt { padding: 0.6rem 0.7rem 0.7rem; }
  .hvn-card__title { font-size: 0.98rem; }
  .hvn-card__img { aspect-ratio: 16 / 10; }
}
/* Teléfono */
@media (max-width: 575.98px) {
  .hvn__content { padding: 4.9rem 0 3.4rem; }
  .hvn__tag { font-size: 0.6rem; letter-spacing: 0.22em; }
  .hvn__title { margin-top: 0.6rem; font-size: 2.2rem; }
  .hvn__line { margin: 0.7rem auto; }
  .hvn__sub { font-size: 0.95rem; line-height: 1.5; }
  .hvn__cards { gap: 0.55rem; margin-top: 1rem; }
  .hvn--cols-5 .hvn__cards, .hvn--cols-6 .hvn__cards, .hvn--cols-7 .hvn__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .hvn--cols-7 .hvn-card__title { font-size: 0.86rem; }
  .hvn--cols-8 .hvn__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .hvn--cols-8 .hvn-card--static .hvn-card__title { font-size: 0.66rem; line-height: 1.15; }
  .hvn--cols-8 .hvn-card--static .hvn-card__txt { padding: 0.35rem 0.3rem 0.45rem; }
  .hvn--cols-7 .hvn-card__meta { display: none; }
  .hvn-card__txt { padding: 0.5rem 0.6rem 0.6rem; }
  .hvn__cta { margin-top: 0.8rem; font-size: 0.66rem; }
  .hvn-card__cta { display: none; }
  .hvn-card__cat { font-size: 0.56rem; }
  .hvn-card__meta { font-size: 0.64rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hvn__bg video { display: none; }                 /* queda el póster fijo */
  .hvn__tag, .hvn__title, .hvn__line, .hvn__sub, .hvn-card, .hvn__cta { animation: none; }
  .hvn-card, .hvn-card__img img, .hvn__cta { transition: none; }
}


/* ==========================================================================
   Fichas ESTÁTICAS como medallones: foto redonda con aro dorado y el nombre debajo.
   Se ven distintas a las tarjetas de navegación para que nadie intente hacer clic.
   (Cenote: «lo que incluye el parque»)
   ========================================================================== */
.hvn-card--static,
.hvn-card--static:hover {
  background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
  backdrop-filter: none; -webkit-backdrop-filter: none; transform: none;
}
.hvn-card--static .hvn-card__img,
.hvn--cols-8 .hvn-card--static .hvn-card__img {
  width: clamp(84px, 8.2vw, 124px); aspect-ratio: 1 / 1; margin: 0 auto;
  border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, rgba(227, 178, 62, 0.95), rgba(196, 162, 101, 0.55));
  box-shadow: 0 12px 30px rgba(10, 5, 2, 0.45);
}
.hvn-card--static .hvn-card__img img { border-radius: 50%; transform: none; }
.hvn-card--static:hover .hvn-card__img img { transform: none; }
.hvn-card--static .hvn-card__txt,
.hvn--cols-8 .hvn-card--static .hvn-card__txt { padding: 0.6rem 0 0; align-items: center; }
.hvn-card--static .hvn-card__title,
.hvn--cols-8 .hvn-card--static .hvn-card__title {
  font-size: 0.92rem; font-weight: 500; line-height: 1.2; color: var(--color-white);
  text-shadow: 0 2px 10px rgba(20, 10, 4, 0.7);
}
/* Ocho medallones: una sola fila en pantallas anchas */
.hvn--cols-8 .hvn__cards { grid-template-columns: repeat(8, minmax(0, 1fr)); width: min(1120px, 100%); gap: 0.6rem; margin-top: 2rem; }
@media (max-width: 1199.98px) { .hvn--cols-8 .hvn__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(640px, 100%); row-gap: 1.2rem; } }
@media (max-width: 575.98px) {
  .hvn--cols-8 .hvn__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; row-gap: 0.9rem; }
  .hvn-card--static .hvn-card__img, .hvn--cols-8 .hvn-card--static .hvn-card__img { width: 66px; padding: 2px; }
  .hvn-card--static .hvn-card__title, .hvn--cols-8 .hvn-card--static .hvn-card__title { font-size: 0.68rem; }
  .hvn-card--static .hvn-card__txt, .hvn--cols-8 .hvn-card--static .hvn-card__txt { padding: 0.4rem 0 0; }
}


/* ==========================================================================
   Líneas informativas en el hero (texto, no navegación): «Incluido: Cenote · Río…»
   ========================================================================== */
.hvn__lines { margin: 1.4rem auto 0.2rem; max-width: 820px; display: grid; gap: 0.55rem; }
.hvn__line-item {
  margin: 0; font-family: var(--font-body); font-size: 0.86rem; line-height: 1.7;
  color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 8px rgba(20, 10, 4, 0.6);
}
.hvn__line-label {
  display: inline-block; margin-right: 0.6rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold);
}
.hvn__line-txt { white-space: nowrap; }
.hvn__dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--color-gold); margin: 0 0.6rem; vertical-align: middle; opacity: 0.9; }
.hvn__lines + .hvn__cta { margin-top: 1.4rem; }
@media (max-width: 575.98px) {
  .hvn__lines { gap: 0.7rem; margin-top: 1.1rem; }
  .hvn__line-item { font-size: 0.8rem; line-height: 1.75; }
  .hvn__line-label { display: block; margin: 0 0 0.1rem; }
  .hvn__dot { margin: 0 0.45rem; }
}


/* ==========================================================================
   INICIO: logotipo sobre el título y fichas «mini» (el video manda; las habitaciones, discretas)
   ========================================================================== */
.hvn__logo { display: block; width: auto; height: clamp(72px, 9vw, 112px); margin: 0 auto 0.8rem; filter: drop-shadow(0 6px 18px rgba(20, 10, 4, 0.5)); animation: hvn-in 1s cubic-bezier(0.32, 0.72, 0, 1) both; }
.hvn--mini .hvn__title { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
.hvn--mini .hvn__cards { width: min(780px, 100%); gap: 0.6rem; margin-top: 1.5rem; }
.hvn--mini .hvn-card__img { aspect-ratio: 16 / 10; }
.hvn--mini .hvn-card__txt { padding: 0.5rem 0.6rem 0.6rem; gap: 0.1rem; }
.hvn--mini .hvn-card__cat { font-size: 0.5rem; letter-spacing: 0.14em; }
.hvn--mini .hvn-card__title { font-size: 0.86rem; }
.hvn--mini .hvn-card__meta, .hvn--mini .hvn-card__cta { display: none; }
.hvn--mini .hvn-card { background: rgba(20, 10, 4, 0.42); border-color: rgba(196, 162, 101, 0.28); box-shadow: 0 12px 30px rgba(10, 5, 2, 0.3); }
@media (max-width: 991.98px) { .hvn--mini .hvn__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(640px, 100%); gap: 0.5rem; } .hvn--mini .hvn-card__title { font-size: 0.78rem; } }
@media (max-width: 575.98px) {
  .hvn__logo { height: 64px; margin-bottom: 0.5rem; }
  .hvn--mini .hvn__title { font-size: 2rem; }
  .hvn--mini .hvn__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-top: 1rem; }
  .hvn--mini .hvn-card__img { aspect-ratio: 16 / 9; }
  .hvn--mini .hvn-card__title { font-size: 0.8rem; }
  .hvn--mini .hvn-card__txt { padding: 0.4rem 0.5rem 0.5rem; }
}


/* Fichas al PIE del hero (.hvn--bajo): logo, título y subtítulo centrados en el espacio de arriba,
   las fichas abajo para que el video se aprecie. Lo usan Inicio y Hospedaje, en todos los tamaños. */
.hvn--bajo .hvn__content {
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding-top: 5.5rem; padding-bottom: clamp(1.6rem, 3.5vh, 2.6rem);
}
.hvn--bajo .hvn__logo, .hvn--bajo .hvn__tag:first-child { margin-top: auto; }
.hvn--bajo .hvn__cards { margin-top: auto; padding-top: clamp(2rem, 6vh, 4rem); }
.hvn--bajo .hvn__cta { margin-top: 0.9rem; }
@media (max-width: 575.98px) {
  .hvn--bajo .hvn__content { padding-top: 4.6rem; padding-bottom: 1.2rem; }
  .hvn--bajo .hvn__cards { padding-top: 1.6rem; }
  .hvn--bajo .hvn__cta { margin-top: 0.6rem; }
}

/* Hospedaje: fichas «compact» (entre las normales y las mini): foto más baja y sin el «Ver habitación»
   para que, al ir al pie, el video tenga más aire. Mantienen categoría, nombre y capacidad. */
.hvn--compact .hvn__cards { width: min(920px, 100%); gap: 0.7rem; }
.hvn--compact .hvn-card__img { aspect-ratio: 16 / 10; }
.hvn--compact .hvn-card__txt { padding: 0.6rem 0.75rem 0.7rem; gap: 0.1rem; }
.hvn--compact .hvn-card__title { font-size: 0.98rem; }
.hvn--compact .hvn-card__cat { font-size: 0.56rem; }
.hvn--compact .hvn-card__meta { font-size: 0.66rem; margin-top: 0.1rem; }
.hvn--compact .hvn-card__cta { display: none; }
@media (max-width: 991.98px) { .hvn--compact .hvn__cards { width: min(560px, 100%); } }
@media (max-width: 575.98px) { .hvn--compact .hvn-card__img { aspect-ratio: 16 / 9; } .hvn--compact .hvn-card__title { font-size: 0.88rem; } }

/* Botón a otra página + invitación a bajar (Inicio) */
.hvn__btn { margin-top: 1.1rem; padding: 12px 26px; font-size: 0.7rem; letter-spacing: 0.16em; animation: hvn-in 1s cubic-bezier(0.32, 0.72, 0, 1) both; animation-delay: 1.05s; }
.hvn__btn i { font-size: 0.65rem; transition: transform 0.2s ease; }
.hvn__btn:hover i { transform: translateX(3px); }
.hvn__scroll { display: inline-flex; margin-top: 0.9rem; font-size: 0.66rem; color: rgba(255, 255, 255, 0.72); animation-delay: 1.2s; }
.hvn__scroll:hover { color: var(--color-gold); }
.hvn--bajo .hvn__btn { margin-top: 1rem; }
.hvn--bajo .hvn__scroll { margin-top: 0.5rem; }
@media (max-width: 575.98px) { .hvn__btn { padding: 11px 20px; font-size: 0.66rem; } .hvn__scroll { margin-top: 0.4rem; } }

/* Ancla «Conoce más del hotel»: que la barra fija no tape el inicio de la bienvenida */
#bienvenida { scroll-margin-top: 84px; }