/* =============================================================================
   Experiencia móvil compartida — inspirada en el patrón responsive de Maiquetía.
   Se aplica a: THE VIP Caracas, Plaza La Habana, Dorado Suites y Hotel Alcalá.

   Principios portados desde Maiquetía:
     · Dock inferior fijo de 5 accesos con CTA central elevado.
     · Safe-area (env(safe-area-inset-*)) en cabecera, dock, drawer y footer.
     · Alturas dinámicas (100svh/100dvh) en lugar de 100vh.
     · Objetivos táctiles de 44px mínimo (WCAG 2.5.5).
     · Inputs a 16px para impedir el zoom automático de iOS al enfocar.
     · Carruseles con scroll-snap en lugar de rejillas comprimidas.
     · Respeto de prefers-reduced-motion y foco visible para teclado.
   ============================================================================= */

:root {
  --mobile-dock-height: 74px;
  /* Espacio total que ocupa el dock incluyendo el área segura del dispositivo. */
  --mobile-dock-space: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom, 0px));
  /* Separación de los botones flotantes respecto al dock. */
  --mobile-float-gap: 12px;
}

/* Los componentes de la capa móvil no deben aparecer en escritorio: se
   insertan en el DOM y sólo el media query de abajo les da forma. */
.mobile-hotel-dock,
.mx-rates,
.mx-from,
.mx-dots,
.mx-more,
.site-nav__link--whatsapp,
.mx-sonido { display: none; }

@media (max-width: 768px) {

  /* ---------------------------------------------------------------- Base --- */
  html, body { max-width: 100%; overflow-x: clip; }
  body { padding-bottom: var(--mobile-dock-space); }

  /* Los anclajes internos no deben quedar bajo la barra fija. */
  [id] { scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px)); }

  /* --------------------------------------------- Escala tipográfica --- */
  /* En 390 px el hero llegaba a 46,8 px y los títulos de sección a 39, con el
     cuerpo a 16/26. Se leía como una web de escritorio encogida: mucho scroll
     para poca información. Esta escala está calculada para el ancho real del
     teléfono, no heredada del diseño grande.
     Los campos de formulario quedan fuera: siguen a 16 px para que iOS no
     amplíe la página al enfocarlos. */
  body { font-size: 15px; }

  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; }

  /* Títulos de sección */
  .section .section-title,
  .section-title { font-size: clamp(1.68rem, 7.4vw, 2.05rem); line-height: 1.14; }
  .section-lead { font-size: .95rem; line-height: 1.55; }
  .eyebrow { font-size: .68rem; }

  /* Cabeceras de páginas interiores. Se excluyen las que ya llevan clase
     propia: si no, este selector gana por especificidad y las encoge. */
  main h1:not([class]), .page-hero h1 { font-size: clamp(1.7rem, 7.8vw, 2.1rem); line-height: 1.16; }
  main h2:not([class]), .section h2:not([class]) { font-size: 1.35rem; line-height: 1.25; }
  main h3:not([class]), .section h3:not([class]) { font-size: 1.08rem; line-height: 1.3; }

  /* Cuerpo de texto */
  .hotel-intro__text p,
  .section p,
  main p,
  .contact-list li,
  .site-footer__list li { font-size: .94rem; line-height: 1.55; }

  /* Tarjetas de habitación */
  .room-card h3 { font-size: 1.16rem; line-height: 1.25; }
  .room-card__meta { font-size: .8rem; }

  /* Pie: es informativo, no protagonista */
  .site-footer p,
  .site-footer li,
  .site-footer__list a { font-size: .86rem; line-height: 1.5; }
  .site-footer h4 { font-size: .78rem; }
  .site-footer__bottom { font-size: .76rem; line-height: 1.6; }

  /* Menos aire entre secciones: el mismo contenido en menos pantallas. */
  .section { padding-top: 44px; padding-bottom: 44px; }

  /* Con viewport-fit=cover la página llega a los bordes físicos: todo lo que
     lleva contenido tiene que respetar la muesca y el indicador de inicio.
     En vertical estos valores son 0, así que no cambia nada; sólo protege en
     horizontal y en pantallas con recorte. */
  .container,
  .site-footer__grid,
  .booking-portal {
    padding-left: max(var(--margin-mobile, 20px), env(safe-area-inset-left));
    padding-right: max(var(--margin-mobile, 20px), env(safe-area-inset-right));
  }

  /* Sin destello azul al tocar; respuesta táctil inmediata. */
  a, button, [role="button"], summary, .btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* --------------------------------------------------------- Cabecera --- */
  .site-nav { padding-top: env(safe-area-inset-top, 0px); }
  /* La cabecera transparente llevaba su propio degradado oscuro y un
     backdrop-filter. Ambos terminaban de golpe en su borde inferior y ese corte
     se veia como una linea negra cruzando la pantalla bajo el logotipo, con la
     foto velada encima y nitida debajo.

     Se retiran los dos mientras la barra no este posada. El contraste que el
     logotipo y el menu necesitan lo da ahora el velo del hero, que cubre la
     portada entera y por tanto no tiene borde donde cortar. Al desplazar, la
     barra se vuelve solida y ahi el desenfoque si tiene sentido: se conserva. */
  .site-nav:not(.is-scrolled):not(.is-open) {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }

  /* -------------------------------------------- Titulo de la portada --- */
  /* .hero__content llevaba la animacion heroTextCycle, que lo deja en opacidad
     0 desde el 33 % hasta el 97 % del ciclo: el nombre del hotel y su promesa
     principal estaban INVISIBLES casi dos tercios del tiempo. En un telefono,
     donde la portada es toda la primera pantalla, lo mas probable era caer
     justo en ese tramo y ver una foto sin un solo texto.

     Parece pensado para un hero con dos textos que se relevan; solo hay uno.
     Se fija visible. */
  body.hotel-home .hero__content {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ------------------------------------------------------ Velo del hero --- */
  /* Estaba desactivado en movil. Sin el, el titulo blanco desaparecia sobre las
     fotos claras —el techo del lobby, la fachada al sol— y la portada quedaba
     ilegible justo en la pantalla que decide si el huesped se queda. Cubre la
     portada completa, asi que no crea ningun borde visible, y se le quita la
     animacion: un velo que late distrae y gasta bateria. */
  body.hotel-home .hero__overlay {
    display: block;
    animation: none;
    background: linear-gradient(180deg,
      rgba(10, 18, 30, .62) 0%,
      rgba(10, 18, 30, .34) 34%,
      rgba(10, 18, 30, .30) 62%,
      rgba(10, 18, 30, .58) 100%);
  }
  .site-nav__inner {
    min-height: 56px;
    padding: .45rem max(16px, env(safe-area-inset-left)) .45rem max(16px, env(safe-area-inset-right));
  }
  .site-nav__brand,
  .site-nav.is-scrolled .site-nav__brand,
  .site-nav.is-open .site-nav__brand { opacity: 1; pointer-events: auto; }

  /* Al hacer scroll, la flecha de volver pasaba a posicion absoluta de golpe
     mientras se desvanecia en 0,3 s: durante ese lapso la marca saltaba encima
     y se leia «<ORADO SUITES». Se queda en el flujo, ocupando su sitio, y solo
     se atenua: la cabecera deja de moverse. */
  .site-nav.is-scrolled .site-nav__back { position: static !important; }
  .site-nav__brand {
    display: flex; align-items: center; justify-content: center;
    max-width: min(56vw, 200px); min-height: 38px; padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.34); border-radius: 12px;
    background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(15,23,42,.14);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    /* Marcas escritas en texto (Dorado Suites): se ajustan al ancho real
       de la cápsula en lugar de quedar cortadas por los lados. */
    font-size: clamp(.8rem, 4vw, 1.05rem);
    letter-spacing: .12em;
    white-space: nowrap;
  }
  /* El logotipo se escala completo dentro de la cápsula: nunca se recorta. */
  .site-nav__brand img {
    width: auto; height: 28px; max-width: 100%;
    object-fit: contain; object-position: left center;
  }
  .site-nav__whatsapp, .site-nav__toggle { min-width: 44px; min-height: 44px; }
  .site-nav__whatsapp { flex-basis: 44px; width: 44px; height: 44px; margin-left: auto; }
  .site-nav__whatsapp svg { width: 20px; height: 20px; }
  .site-nav__toggle { width: 44px; height: 44px; margin-left: 4px; }

  /* ------------------------------------------------- Menú desplegable --- */
  .site-nav__links {
    width: min(88vw, 350px); height: 100dvh; gap: .25rem;
    padding: calc(78px + env(safe-area-inset-top)) 22px calc(100px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .site-nav__link, .site-nav__cta {
    width: 100%; min-height: 48px; display: flex; align-items: center;
    margin: 0; padding: 12px 4px; border-bottom: 1px solid var(--border-color);
  }
  /* El menú de escritorio va a 0.72rem porque es una fila horizontal apretada.
     Aquí es una lista a pantalla completa: a ese tamaño se lee con esfuerzo. */
  .site-nav__link, .site-nav__cta { font-size: .86rem; letter-spacing: .1em; }
  .site-nav__cta { justify-content: center; margin-top: 12px; border: 0; }

  /* ---------------------------------------------------- Botones --- */
  /* «Reservar ahora» aparecia tres veces en el mismo sitio con dos formas
     distintas: pildora a todo lo ancho en el buscador del hero, y rectangulo
     a media anchura en el pie y en las paginas interiores. En movil todos los
     botones comparten ahora una sola forma. */
  /* .btn-ghost queda fuera: no es un boton con caja sino un enlace con linea
     inferior, y redondearlo curvaba el subrayado en una U. */
  .btn:not(.btn-ghost), .btn-primary, .btn-outline { border-radius: 999px; }
  .site-footer .btn-primary {
    display: flex; width: 100%; min-height: 48px; font-size: .78rem;
  }

  /* Fondo atenuado mientras el menú está abierto. */
  body.mx-nav-open::after {
    content: ''; position: fixed; inset: 0; z-index: 80;
    background: rgba(8, 14, 22, .45);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }

  /* ------------------------------------------------------------- Hero --- */
  /* Normaliza el hero: algunos hoteles definen .hero__slides en flujo normal,
     lo que dejaba media pantalla vacía bajo la imagen. Aquí siempre cubre. */
  body.hotel-home .hero {
    position: relative; min-height: 100svh;
    padding-bottom: calc(var(--mobile-hero-pad, 230px) + var(--mobile-dock-space) + 14px);
    isolation: isolate;
  }
  body.hotel-home .hero__slides {
    position: absolute; inset: 0;
    width: auto; height: auto; min-height: 0; max-height: none;
    border: 0; overflow: hidden;
  }
  body.hotel-home .hero__slide { position: absolute; inset: 0; height: auto; }
  body.hotel-home .hero__overlay { display: block; position: absolute; inset: 0; }
  body.hotel-home .hero__content {
    position: relative; z-index: 2;
    width: 100%; padding: calc(82px + env(safe-area-inset-top)) 20px 24px;
    /* Dorado traía el subtítulo alineado a la izquierda mientras los otros
       cuatro lo centraban: el mismo bloque se leía descolgado. El hero es un
       eje centrado en toda la flota. */
    text-align: center;
  }
  body.hotel-home .hero__title,
  body.hotel-home .hero__subtitle { text-align: center; }
  body.hotel-home .hero__title {
    max-width: 13ch; margin-inline: auto; font-size: clamp(2.1rem, 9.6vw, 3.1rem);
    line-height: 1.06; letter-spacing: .02em; text-wrap: balance;
  }
  body.hotel-home .hero__subtitle {
    max-width: 33ch; margin: 16px auto 0; font-size: clamp(.78rem, 3.3vw, 1rem);
    line-height: 1.55; letter-spacing: .14em; text-wrap: balance;
  }

  /* Cuando el texto del hero y el buscador no caben juntos en la pantalla, el
     bloque de texto se compacta para que el CTA quede siempre a la vista.
     mobile-experience.js activa la clase tras medir. */
  body.hotel-home .hero.is-compact .hero__content {
    padding-top: calc(64px + env(safe-area-inset-top)); padding-bottom: 12px;
  }
  body.hotel-home .hero.is-compact .hero__title {
    max-width: 15ch; font-size: clamp(1.85rem, 9vw, 3rem);
  }
  body.hotel-home .hero.is-compact .hero__subtitle {
    max-width: 36ch; margin-top: 10px; font-size: clamp(.68rem, 2.9vw, .84rem);
    line-height: 1.45; letter-spacing: .1em;
  }

  /* --------------------------------------------------- Buscador rápido --- */
  body.hotel-home .booking-widget {
    position: absolute; right: 0;
    bottom: calc(var(--mobile-dock-space) + 14px);
    left: 0; width: 100%; max-width: none; margin: 0; padding: 0 16px; z-index: 12; transform: none;
  }
  body.hotel-home .booking-widget__form {
    gap: .55rem .6rem; padding: 14px; border: 1px solid rgba(255,255,255,.5);
    border-radius: 22px; background: rgba(255,255,255,.93);
    box-shadow: 0 20px 52px rgba(15,23,42,.24);

    /* Rejilla única para los cinco hoteles. Cada uno traía la suya y el
       buscador de Dorado acababa midiendo 440 px frente a los 257 px del
       resto: el mismo formulario ocupaba casi el doble de pantalla.
       Orden común: Entrada · Salida · Adultos · Niños · Habitación · acciones. */
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  /* Entrada y Salida, media fila cada una. */
  body.hotel-home .booking-widget__form > :nth-child(1),
  body.hotel-home .booking-widget__form > :nth-child(2) { grid-column: span 6; }
  /* Adultos y Niños se reparten la segunda fila. */
  body.hotel-home .booking-widget__form > :nth-child(3),
  body.hotel-home .booking-widget__form > :nth-child(4) { grid-column: span 6; }

  /* El tipo de habitación depende de la disponibilidad real, que no se conoce
     hasta la reserva: elegirlo aquí prometía algo que el buscador no puede
     garantizar. La casilla se retira y el campo sigue enviando «cualquiera»,
     así que el portal recibe lo mismo que antes y allí se decide el tipo. */
  body.hotel-home .booking-widget__form > :nth-child(5) { display: none; }
  /* Botones de acción, siempre a lo ancho. */
  body.hotel-home .booking-widget__form > :nth-child(n+6) { grid-column: span 12; }

  /* Dentro de la casilla: etiqueta y valor alineados a la izquierda, en una
     sola línea y sin que el valor se monte sobre el icono del calendario. */
  body.hotel-home .booking-field { min-width: 0; }
  body.hotel-home .booking-field label {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.hotel-home .booking-field select { max-width: 100%; }
  body.hotel-home .date-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
  }
  body.hotel-home .date-trigger > span:first-child {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* La etiqueta iba a 9,8 px y el valor a 16: un salto de 1,64x que hacia que
     «Seleccionar» y los numeros de huespedes se leyeran enormes al lado de
     «ENTRADA». Los 16 px del valor no se tocan —por debajo, iOS amplia la
     pagina al enfocar un desplegable— asi que se sube la etiqueta, que ademas
     estaba en el limite de lo legible. */
  body.hotel-home .booking-field label { font-size: .7rem; letter-spacing: .08em; }
  body.hotel-home .booking-field select,
  body.hotel-home .date-trigger { min-height: 44px; padding: 7px 0; }

  /* Los 16 px venian de evitar que iOS ampliara la pagina al enfocar un campo,
     pero rompian el diseno: cada hotel habia elegido ~13,5 px y a 16 px el
     «Seleccionar» y los numeros se veian enormes al lado de sus etiquetas.

     iOS decide si amplia mirando el tamano de letra EN EL MOMENTO DEL FOCO, asi
     que se puede tener las dos cosas: el tamano del diseno en reposo y 16 px
     justo al enfocar. El salto no se percibe porque el desplegable abre su
     propio selector encima.

     Ademas el texto va centrado: alineado a la izquierda quedaba flotando en
     una caja ancha, con todo el hueco a la derecha. */
  body.hotel-home .date-trigger,
  body.hotel-home .booking-field select {
    font-size: .86rem !important;
  }
  body.hotel-home .date-trigger:focus,
  body.hotel-home .booking-field select:focus {
    font-size: 16px !important;
  }
  body.hotel-home .date-trigger {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    text-align: center;
  }
  body.hotel-home .booking-field select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
  }

  /* Un desplegable tiene que parecerlo: sin la flecha, el huésped no sabe que
     puede tocar ahí para cambiar los huéspedes o el tipo de habitación. */
  body.hotel-home .booking-field select {
    appearance: none; -webkit-appearance: none;
    /* Mismo hueco a los dos lados: si solo se reserva a la derecha para el
       chevron, el texto «centrado» queda descentrado hacia la izquierda. */
    padding-left: 20px; padding-right: 20px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e6e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 15px 15px;
  }
  body.hotel-home .booking-widget__submit,
  body.hotel-home .booking-widget__flights {
    min-height: 48px; border-radius: 999px; font-size: .78rem; touch-action: manipulation;
  }
  body.hotel-home .booking-spacer { display: none; }

  /* iOS amplía la página al enfocar campos de menos de 16px y después no la
     devuelve a su sitio. Lleva !important porque cada hotel fija en su
     index.css un tamaño menor con más especificidad. */
  /* Los desplegables del buscador quedan fuera: alli el tamano lo pone el
     diseno de cada hotel y los 16 px se aplican solo al enfocar, que es cuando
     iOS decide si amplia. Ver «Casillas del buscador» mas abajo. */
  input:not([type="checkbox"]):not([type="radio"]),
  select:not(.booking-field select),
  textarea { font-size: 16px !important; }
  .booking-field select:focus { font-size: 16px !important; }

  /* ---------------------------------------------------------- Secciones --- */
  .section-title { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.08; text-wrap: balance; }
  .section-lead { font-size: 1rem; line-height: 1.65; }
  .hotel-intro__media, .hotel-intro__media img, .hotel-intro__slides { border-radius: 24px; }

  /* Rejillas convertidas en carruseles con scroll-snap. */
  body.hotel-home .rooms-grid,
  body.hotel-home .services-grid,
  body.hotel-home .home-gallery__grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: minmax(82%, 1fr); gap: 16px; margin-inline: -20px;
    padding: 4px 20px 18px; overflow-x: auto; scroll-padding-inline: 20px;
    scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none;
  }
  body.hotel-home .rooms-grid::-webkit-scrollbar,
  body.hotel-home .services-grid::-webkit-scrollbar,
  body.hotel-home .home-gallery__grid::-webkit-scrollbar { display: none; }
  body.hotel-home .rooms-grid > *,
  body.hotel-home .services-grid > *,
  body.hotel-home .home-gallery__grid > * { min-width: 0; height: 100%; scroll-snap-align: center; }
  body.hotel-home .home-gallery__item { height: 300px; }

  /* --------------------------------------------- Objetivos táctiles 44px --- */
  /* Controles que se quedaban por debajo del mínimo accesible (WCAG 2.5.5). */
  .site-nav__back {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }
  .site-nav__brand { min-height: 44px; }
  .gallery-overlay__close { min-width: 44px; min-height: 44px; }
  .faq-tab-btn,
  .vuelos-subnav-btn,
  .fids-btn { min-height: 44px; }
  select { min-height: 44px; }
  /* El CTA principal de reserva no puede quedar en 35 px de alto. */
  body.hotel-home .booking-widget__submit,
  body.hotel-home .booking-widget__flights {
    min-height: 48px !important;
    font-size: .78rem !important;
  }

  /* Tablas más anchas que la pantalla: se desplazan solas, no la página.
     mobile-experience.js les añade este contenedor. */
  .mx-table-scroll {
    max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain;
  }

  /* ============================================================ TARIFAS ===
     Franja de tipos de habitación y precios inmediatamente bajo el hero.
     Responde en la primera pantalla lo que antes obligaba a abrir el chat.
     ====================================================================== */
  .mx-rates {
    display: block;
    padding: 22px 0 26px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary, #fff);
  }
  .mx-rates__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 0 20px 14px;
  }
  .mx-rates__title {
    margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
    color: var(--text-primary);
  }
  .mx-rates__all {
    flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center;
    font-size: .8rem; font-weight: 600; color: var(--hotel-primary);
    text-decoration: none;
  }
  .mx-rates__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(63%, 1fr);
    gap: 12px; padding: 2px 20px 6px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    overscroll-behavior-inline: contain; scrollbar-width: none;
  }
  .mx-rates__track::-webkit-scrollbar { display: none; }
  .mx-rate {
    display: flex; min-width: 0; flex-direction: column; scroll-snap-align: start;
    overflow: hidden; border: 1px solid var(--border-color); border-radius: 16px;
    background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,.06);
    color: inherit; text-decoration: none;
  }
  .mx-rate:active { transform: scale(.985); }
  .mx-rate__img {
    display: block; width: 100%; height: 96px; object-fit: cover;
    background: var(--bg-secondary, #f1f2f4);
  }
  .mx-rate__body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; flex: 1 1 auto; }
  .mx-rate__name {
    font-size: .84rem; font-weight: 650; line-height: 1.25;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Dos líneas fijas: en una sola se perdía información real («Máx 2 huéspedes
     · 25 m² · Cafeterí…») y con altura libre las tarjetas quedaban desiguales. */
  .mx-rate__meta {
    font-size: .68rem; line-height: 1.3; color: var(--text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* El precio se apoya en el borde inferior: asi las cifras quedan alineadas
     entre tarjetas sin reservar una segunda linea de texto que casi nunca se
     usa y que dejaba un hueco visible bajo la descripcion. */
  .mx-rate__price {
    margin-top: auto; padding-top: 6px;
    font-size: 1.02rem; font-weight: 750; color: var(--hotel-primary);
  }
  .mx-rate__price small { font-size: .6rem; font-weight: 600; opacity: .7; }

  /* ------------------------------------------------- Franja de ventajas --- */
  /* Al apilarse, cada linea se centraba por su cuenta: como los textos miden
     distinto, los iconos quedaban en zigzag y la lista no tenia eje. Ahora el
     bloque entero se centra y las cuatro filas comparten el borde izquierdo,
     de modo que los iconos caen en una sola columna. */
  .trust-bar__grid {
    display: flex; flex-direction: column; gap: 10px;
    width: fit-content; max-width: 100%; margin-inline: auto;
  }
  .trust-bar__grid .trust-item { justify-content: flex-start; width: 100%; }

  /* Tarifa mínima dentro de la tarjeta del buscador, sin salir del hero. */
  .mx-from {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 8px 0 0; padding: 0 4px;
    font-size: .72rem; font-weight: 600; letter-spacing: .04em;
    color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45);
  }
  .mx-from b { font-size: .92rem; font-weight: 750; }

  /* ------------------------------------------------ Carrusel: indicadores --- */
  .mx-dots {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 2px; padding: 0 20px;
  }
  .mx-dots__dot {
    width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
    background: var(--border-color); transition: width .2s ease, background .2s ease;
  }
  .mx-dots__dot.is-active {
    width: 20px; border-radius: 999px; background: var(--hotel-primary);
  }
  .mx-dots__count {
    margin-left: 8px; font-size: .68rem; font-weight: 600; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ------------------------------------------------- Intro plegable --- */
  .mx-collapsed {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mx-more {
    /* En su propia línea: si no, se pega al enlace que ya hay debajo. */
    display: flex; align-items: center;
    width: fit-content; min-height: 44px; margin: 2px 0 10px;
    padding: 0; border: 0; background: none;
    font: inherit; font-size: .82rem; font-weight: 650; color: var(--hotel-primary);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }

  /* ------------------------------------------- Chat: aparece después --- */
  /* Mientras la respuesta (tarifas y habitaciones) sigue en pantalla, el chat
     no compite con ella. Reaparece al pasar las habitaciones o a los 25 s. */
  body.mx-chat-hidden .mx-chat-launcher,
  body.mx-chat-hidden .whatsapp-float:not(.site-nav__whatsapp) {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
  }

  .site-footer__list a,
  .site-footer__social a {
    display: inline-flex; align-items: center;
    min-height: 44px; min-width: 44px;
  }
  .site-footer__social a { justify-content: center; }
  /* Iconos del pie en SVG: mismo tamaño óptico que los glifos de la fuente. */
  .site-footer__social .mx-ico { width: 20px; height: 20px; display: block; }
  /* Los 13 px de relleno vertical inflaban la caja de linea y partian el aviso
     legal en dos renglones separados por un hueco que parecia un error. La
     norma de area tactil exceptua los enlaces incrustados en un texto corrido,
     que es justo este caso: se recupera un interlineado legible. */
  .site-footer__bottom { line-height: 2; }
  .site-footer__bottom a { display: inline-block; padding: 2px 5px; }


  /* El pie se llevaba 1.207 px de los 4.642 del documento: más que el hero.
     Los 44 px de área táctil ya bastan, el margen extra de cada elemento sólo
     sumaba scroll. Se quita el margen y se recorta el aire del bloque. */
  .site-footer__list li { margin-bottom: 0; }
  .site-footer__list { gap: 0; }
  .site-footer { padding-top: 40px; }
  .site-footer__grid { gap: 26px; }
  .site-footer__brand { margin-bottom: .6rem; }
  .btn-ghost { min-height: 44px; display: inline-flex; align-items: center; }
  /* 34 px dejaban el aviso legal justo debajo del lanzador del chat, que flota
     sobre la barra inferior y tapaba «Términos». Se le deja su altura libre. */
  .site-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* ----------------------------------------------- Botones flotantes --- */
  /* WhatsApp y el chat en vivo se apilan sobre el dock, nunca encima de él
     ni tapando el hero como ocurría con la posición superior derecha. */
  /* Un solo canal flotante en móvil: el chat en vivo. Dos círculos verdes de
     distinto tono y tamaño en la misma esquina no se leían como un sistema.
     WhatsApp no desaparece: pasa a ser una opción explícita del menú y de la
     ficha de contacto, donde se lee como una decisión y no como un adorno. */
  .whatsapp-float:not(.site-nav__whatsapp),
  .site-nav__whatsapp { display: none !important; }

  /* WhatsApp dentro del menú, con su icono real para que se reconozca. */
  .site-nav__link--whatsapp {
    display: flex; align-items: center; gap: 10px;
  }
  .site-nav__link--whatsapp svg {
    width: 22px; height: 22px; flex: 0 0 auto; color: #25d366;
  }
  /* Lanzador de Tawk.to (su id es aleatorio; mobile-experience.js lo etiqueta). */
  .mx-chat-launcher {
    bottom: calc(var(--mobile-dock-space) + var(--mobile-float-gap)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 110 !important;
  }

  /* ------------------------------------------------------------- Dock --- */
  .mobile-hotel-dock {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 120; display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    height: var(--mobile-dock-space);
    padding: 7px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left));
    border-top: 1px solid rgba(var(--hotel-primary-rgb),.16); background: rgba(255,255,255,.96);
    box-shadow: 0 -14px 42px rgba(15,23,42,.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .mobile-dock__item {
    position: relative; display: flex; min-width: 0; min-height: 58px; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; padding: 4px 2px;
    border: 0; background: transparent; color: var(--text-muted); font: inherit;
    font-size: .61rem; font-weight: 650; line-height: 1; text-align: center;
    text-decoration: none; cursor: pointer; touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, transform .12s ease;
  }
  .mobile-dock__item > span:last-child {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mobile-dock__item svg {
    width: 21px; height: 21px; fill: none; stroke: currentColor;
    stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8;
    transition: transform .2s ease;
  }
  .mobile-dock__item:active { transform: scale(.94); }

  /* Página actual: color de marca, trazo más grueso e indicador superior. */
  .mobile-dock__item[aria-current="page"] { color: var(--hotel-primary); }
  .mobile-dock__item[aria-current="page"] svg { stroke-width: 2.2; transform: translateY(-1px); }
  .mobile-dock__item[aria-current="page"]:not(.mobile-dock__item--reserve)::before {
    content: ''; position: absolute; top: 2px; left: 50%; width: 18px; height: 3px;
    border-radius: 999px; background: var(--hotel-primary); transform: translateX(-50%);
  }

  .mobile-dock__item--reserve { color: var(--hotel-primary); font-weight: 750; }
  .mobile-dock__reserve-icon {
    display: grid; width: 54px; height: 54px; place-items: center; margin-top: -22px;
    border: 3px solid #fff; border-radius: 50%; background: var(--hotel-primary); color: #fff;
    box-shadow: 0 9px 24px rgba(var(--hotel-primary-rgb),.34);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .mobile-dock__item--reserve:active .mobile-dock__reserve-icon {
    transform: scale(.93); box-shadow: 0 5px 16px rgba(var(--hotel-primary-rgb),.34);
  }
  .mobile-dock__item--reserve > span:last-child { margin-top: -1px; }

  /* Con el menú abierto el dock sobra: la navegación ya está en pantalla. */
  body.mx-nav-open .mobile-hotel-dock { display: none; }

  /* Con el teclado abierto el dock estorba: se oculta y se libera el espacio. */
  .mobile-hotel-dock.is-keyboard-open { display: none; }
  body.mx-keyboard-open { padding-bottom: 0; }
  body.mx-keyboard-open .whatsapp-float,
  body.mx-keyboard-open .mx-chat-launcher { display: none !important; }

  .scroll-indicator, .scroll-down, .hero__scroll { display: none !important; }

  /* ------------------------------------------------------ Accesibilidad --- */
  a:focus-visible,
  button:focus-visible,
  select:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  [role="button"]:focus-visible {
    outline: 3px solid var(--hotel-primary);
    outline-offset: 2px;
    border-radius: 6px;
  }
  :focus:not(:focus-visible) { outline: none; }
}

/* Pantallas cortas: el hero completo no cabe, se le da una altura mínima fija. */
@media (max-width: 768px) and (max-height: 740px) {
  body.hotel-home .hero { min-height: 800px; }
}

/* Horizontal en móvil: el hero a pantalla completa deja el contenido inaccesible. */
/* Mismo umbral que el resto de la capa: fuera de 768px manda el diseño de
   escritorio y estas reglas no deben colarse en tablets apaisadas. */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  body.hotel-home .hero { min-height: 620px; }
  body.hotel-home .hero__content { padding-top: calc(64px + env(safe-area-inset-top)); }
  body.hotel-home .hero__title { font-size: clamp(2rem, 7vh, 3rem); }
}

/* =============================================================================
   Movimiento y respuesta al dedo.

   Regla unica: solo transform y opacity. Son las dos propiedades que el
   navegador puede animar en el compositor, sin recalcular la maqueta ni
   repintar. En un telefono de gama baja —la mayoria del parque en Venezuela y
   Cuba— la diferencia entre animar esto y animar un ancho o una sombra es la
   diferencia entre fluido y a tirones.

   Todo lo de aqui se apaga por completo con prefers-reduced-motion, en el
   bloque que viene justo despues.
   ============================================================================= */
@media (max-width: 768px) {

  /* --------------------------------------------------------- Pulsacion --- */
  /* La clase la pone feedback-movil.js en pointerdown, no en click: el clic
     llega unos 120 ms tarde y para entonces el dedo ya se levanto. */
  .mobile-dock__item,
  .mx-rate,
  .room-card,
  .btn,
  .site-nav__link,
  .site-nav__cta,
  .date-trigger,
  .booking-widget__submit {
    transition: transform .13s cubic-bezier(.2, .7, .3, 1);
  }
  .mx-pulsado { transform: scale(.972); }
  /* En la barra inferior el gesto es de paso, no de compromiso: menos hundido. */
  .mobile-dock__item.mx-pulsado { transform: scale(.9); }
  .mobile-dock__item--reserve.mx-pulsado { transform: scale(.93); }
  /* Las tarjetas son grandes: una escala fuerte las deforma. */
  .room-card.mx-pulsado,
  .mx-rate.mx-pulsado { transform: scale(.986); }

  /* ---------------------------------------------------- Entrada suave --- */
  /* 10 px de recorrido. Mas es mareo, y en una lista larga se nota. */
  .mx-entra {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity .42s ease, transform .42s cubic-bezier(.22, .8, .3, 1);
  }
  .mx-visible {
    opacity: 1;
    transform: none;
  }
  /* Las tarjetas de una misma fila entran escalonadas: la vista sigue el orden
     de lectura en lugar de recibirlas todas de golpe. */
  .mx-rate.mx-entra { transition-delay: 0ms; }
  .mx-rate:nth-child(2).mx-entra { transition-delay: 60ms; }
  .mx-rate:nth-child(3).mx-entra { transition-delay: 120ms; }
  .mx-rate:nth-child(4).mx-entra { transition-delay: 180ms; }

  /* ------------------------------------------------- Barra inferior --- */
  /* El indicador de pagina actual crece desde el centro en lugar de aparecer. */
  .mobile-dock__item[aria-current="page"]:not(.mobile-dock__item--reserve)::before {
    animation: mx-marca .26s cubic-bezier(.22, .8, .3, 1) both;
  }
  @keyframes mx-marca {
    from { transform: translateX(-50%) scaleX(0); }
    to   { transform: translateX(-50%) scaleX(1); }
  }

  /* ------------------------------------------------------------ Menu --- */
  /* El cajon entra con su propia curva: rapido al empezar, frenando al final.
     Los enlaces lo siguen escalonados, que es lo que da la sensacion de que el
     menu se despliega en vez de aparecer entero. */
  .site-nav__links {
    transition: transform .3s cubic-bezier(.22, .8, .3, 1), opacity .22s ease;
  }
  body.mx-nav-open .site-nav__links > * {
    animation: mx-entrada-menu .34s cubic-bezier(.22, .8, .3, 1) both;
  }
  body.mx-nav-open .site-nav__links > :nth-child(1) { animation-delay: .04s; }
  body.mx-nav-open .site-nav__links > :nth-child(2) { animation-delay: .07s; }
  body.mx-nav-open .site-nav__links > :nth-child(3) { animation-delay: .10s; }
  body.mx-nav-open .site-nav__links > :nth-child(4) { animation-delay: .13s; }
  body.mx-nav-open .site-nav__links > :nth-child(5) { animation-delay: .16s; }
  body.mx-nav-open .site-nav__links > :nth-child(6) { animation-delay: .19s; }
  body.mx-nav-open .site-nav__links > :nth-child(7) { animation-delay: .22s; }
  body.mx-nav-open .site-nav__links > :nth-child(n+8) { animation-delay: .25s; }
  @keyframes mx-entrada-menu {
    from { opacity: 0; transform: translate3d(14px, 0, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* ------------------------------------------- Interruptor de sonido --- */
  .mx-sonido {
    display: flex; align-items: center;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    gap: 10px;
  }
  .mx-sonido__ico { flex: 0 0 auto; }
  /* Silenciado: se tacha la onda. Un solo icono para los dos estados. */
  .mx-sonido[aria-pressed="true"] .mx-sonido__tacha { display: none; }
  .mx-sonido[aria-pressed="false"] .mx-sonido__onda { display: none; }
  .mx-sonido[aria-pressed="false"] { opacity: .62; }

  /* En el portal no hay menu lateral: el interruptor va suelto en la cabecera,
     solo con el icono. */
  .mx-sonido--cabecera {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto;
    padding: 0; border: 0; border-radius: 999px;
    background: none; color: inherit; cursor: pointer;
    transition: transform .13s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
  }
  .mx-sonido--cabecera.mx-pulsado { transform: scale(.9); }

  /* ------------------------------------------------------- Carrusel --- */
  .mx-dots__dot { transition: width .22s cubic-bezier(.22,.8,.3,1), background .22s ease; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .mobile-hotel-dock, .whatsapp-float, .mx-chat-launcher { display: none !important; }
}