/* =============================================================================
   Empuje a la reserva (portada).

   El huésped entraba al index, no tocaba nada y preguntaba el precio por chat.
   La causa no era pereza: en la primera pantalla solo había un formulario que
   pide fechas, y los precios quedaban un scroll más abajo. Esta capa pone los
   precios —tocables— en la primera pantalla y hace visible el botón de reservar
   en cada tarjeta. Los datos se leen de .rooms-grid (nudge-reserva.js): no se
   duplica ninguna tarifa.

   Capa independiente a propósito: para llevarla a otro hotel basta copiar los
   dos archivos y enlazarlos en su index. Usa las variables de color del hotel.
   ============================================================================= */

@media (max-width: 768px) {

  /* ------------------------------------ Precios dentro del hero (móvil) --- */
  .nr-precios { margin: 0 0 10px; }
  .nr-precios__t {
    margin: 0 0 7px; text-align: center;
    font-size: .68rem; font-weight: 650; letter-spacing: .05em;
    color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.55);
  }
  .nr-precios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .nr-chip {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 44px; min-width: 0; padding: 0 12px 0 13px;
    border-radius: 12px; background: rgba(255,255,255,.95);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    color: var(--text-primary, #0f172a); text-decoration: none;
    transition: transform .13s cubic-bezier(.2,.7,.3,1);
  }
  .nr-chip:active { transform: scale(.97); }
  .nr-chip__n {
    min-width: 0; font-size: .78rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nr-chip__p {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
    font-size: .95rem; font-weight: 750; color: var(--hotel-primary, #252525);
  }
  .nr-chip__p::after { content: "\203A"; font-size: 1.05rem; line-height: 1; opacity: .55; }

  /* ------------------------- Botón visible en las tarjetas de la franja --- */
  /* La tarjeta entera ya era un enlace, pero nada lo decía: parecía una ficha
     informativa. Un botón con verbo deja claro qué pasa al tocar. */
  .nr-rate-cta {
    display: flex; align-items: center; justify-content: center;
    min-height: 36px; margin-top: 8px; border-radius: 999px;
    background: var(--hotel-primary, #252525); color: #fff;
    font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .nr-chip { transition: none; }
}

/* -------------------------------------- Texto rotativo del botón principal --- */
/* nowrap + ancho fijo del botón: si el texto más largo saltara a dos líneas, el
   botón cambiaría de alto cada 3 s y el hero entero bailaría con él. */
.nr-rot {
  display: inline-block; white-space: nowrap; text-align: center;
  transition: opacity .2s ease;
}
.nr-rot.is-out { opacity: 0; }
@media (max-width: 768px) {
  .booking-widget__submit { letter-spacing: .08em; }
  .booking-widget__submit .nr-rot { font-size: clamp(.72rem, 3.5vw, .9rem); }
}
@media (prefers-reduced-motion: reduce) {
  .nr-rot { transition: none; }
}

/* ------------------------------------------- Botón principal «con vida» --- */
/* Un destello dorado que cruza el botón y una respiración mínima. Solo
   transform y opacity (regla de mobile-experience.css): en gama baja no pesa.
   Pausas largas entre destellos: si parpadea seguido se lee como publicidad. */
.booking-widget__submit { position: relative; overflow: hidden; isolation: isolate; }
.booking-widget__submit::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(183,147,83,.0) 20%,
    rgba(232,208,170,.55) 50%, rgba(183,147,83,.0) 80%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  animation: nr-destello 3.6s cubic-bezier(.4,0,.2,1) infinite;
}
.booking-widget__submit:not(.mx-pulsado) {
  animation: nr-respira 3.6s ease-in-out infinite;
}
@keyframes nr-destello {
  0%, 55% { transform: translateX(-130%) skewX(-18deg); }
  100%    { transform: translateX(330%) skewX(-18deg); }
}
@keyframes nr-respira {
  0%, 55%, 100% { transform: scale(1); }
  78%           { transform: scale(1.022); }
}
@media (prefers-reduced-motion: reduce) {
  .booking-widget__submit, .booking-widget__submit::after { animation: none; }
  .booking-widget__submit::after { display: none; }
}

/* ------------------------------------------ Móvil: solo precios + botón --- */
/* Entrada, Salida, Adultos y Niños eran decorado: tocarlos solo llevaba a
   reservas.html, igual que el botón (ver el script de index.html), y allí se
   eligen de verdad. Ocupaban media pantalla y pedían trabajo antes de dar nada.
   El formulario sigue en el DOM —el submit manda adults=2&kids=0 como siempre—;
   aquí solo se deja de pintar la tarjeta y sus campos. */
@media (max-width: 768px) {
  body.hotel-home .booking-widget .booking-field { display: none; }
  body.hotel-home .booking-widget__form {
    display: block; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.hotel-home .booking-widget__submit {
    /* A todo el ancho y con el texto centrado en el botón, por decisión del
       dueño. La burbuja del chat pisa la esquina derecha; el texto más largo
       mide ~196 px y, centrado, termina justo antes de ella. */
    width: 100%; min-height: 52px; margin: 4px 0 0;
    padding-inline: 10px; border-radius: 16px; letter-spacing: .05em;
    box-shadow: 0 10px 26px rgba(0,0,0,.32);
  }
  body.hotel-home .booking-widget__submit .nr-rot { font-size: clamp(.66rem, 3.2vw, .84rem); letter-spacing: .03em; }
  /* La lupa sobraba —ya no hay buscador— y sin ella cabe el texto más largo. */
  body.hotel-home .booking-widget__submit .material-symbols-outlined { display: none; }
}
/* mobile-experience.css fija el hero en 800 px por debajo de 740 de alto, con lo
   que el bloque —anclado al fondo del hero— caía fuera de la pantalla. Sin el
   formulario todo cabe en una pantalla desde 560 px. */
@media (max-width: 768px) and (min-height: 560px) and (max-height: 740px) and (orientation: portrait) {
  body.hotel-home .hero { min-height: 100svh; }
}

/* ------------------------------------------- Precios en escritorio / tablet --- */
/* Una fila de píldoras de cristal justo encima de la barra de fechas. Va en
   position:absolute sobre el buscador (que ya es absolute en index.css): así no
   cambia su altura y no hay que tocar ni el translate(-50%,50%) ni el spacer. */
@media (min-width: 769px) {
  .nr-precios {
    position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 14px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px 16px;
  }
  .nr-precios__t {
    margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255,255,255,.92);
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
  }
  .nr-precios__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .nr-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: .5rem 1rem; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(26,26,26,.55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: #fff; text-decoration: none; font-size: .8rem; font-weight: 500;
    letter-spacing: .02em; white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
  }
  .nr-chip__p { font-weight: 700; color: #e8d0aa; transition: color .2s ease; }
  .nr-chip__p::after { content: "›"; margin-left: 6px; opacity: .6; }
  .nr-chip:hover, .nr-chip:focus-visible {
    background: rgba(255,255,255,.96); border-color: #fff;
    color: var(--hotel-primary, #252525); transform: translateY(-2px);
  }
  .nr-chip:hover .nr-chip__p, .nr-chip:focus-visible .nr-chip__p { color: var(--hotel-primary, #252525); }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .nr-chip { transition: none; }
}

/* ------------------------------------------------ Rótulo en dos líneas --- */
.nr-precios__l1, .nr-precios__l2 { display: block; }
.nr-precios__l2 { margin-top: 3px; color: #f0dcb8; font-weight: 750; }
.nr-precios__l2 small { font-size: .88em; font-weight: 500; color: rgba(255,255,255,.85); }
@media (max-width: 768px) {
  .nr-precios__t { line-height: 1.35; letter-spacing: .02em; text-wrap: balance; }
}
@media (min-width: 769px) {
  /* Con dos líneas el rótulo ya no cabe al lado de las píldoras: fila propia. */
  .nr-precios__t { flex: 0 0 100%; text-align: center; line-height: 1.5; }
}

/* ------------------------------------- «Habitación» sobre el nombre --- */
.nr-chip__k {
  font-size: .45rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; opacity: .62;
}
@media (max-width: 768px) {
  /* Encima del nombre, no al lado: al lado le roba ancho a «Doble King». */
  .nr-chip__k { display: block; line-height: 1.1; margin-bottom: 1px; }
  .nr-chip__n { line-height: 1.15; }
}
@media (min-width: 769px) {
  .nr-chip__k { margin-right: 2px; opacity: .75; }
}

/* ------------------------------------------ Precios que entran y salen --- */
/* Fijo, el bloque tapaba la foto y a los pocos segundos dejaba de verse: lo
   que no se mueve, el ojo lo descarta. Ahora entra deslizándose, se queda lo
   suficiente para leer y tocar (~8,5 s), sale ~2 s y vuelve. El hueco se conserva
   (solo transform/opacity/visibility): nada salta en la página. Mientras está
   fuera no se puede tocar por error (visibility), y si el puntero está encima
   se queda quieto. */
.nr-precios__t, .nr-chip { animation: nr-ciclo 12s cubic-bezier(.22,.8,.3,1) infinite; }
.nr-precios__t { --nr-x: 0px; --nr-y: -8px; }
.nr-chip:nth-child(1) { animation-delay: .08s; }
.nr-chip:nth-child(2) { animation-delay: .16s; }
.nr-chip:nth-child(3) { animation-delay: .24s; }
.nr-chip:nth-child(4) { animation-delay: .32s; }
.nr-precios:hover .nr-precios__t, .nr-precios:hover .nr-chip,
.nr-precios:focus-within .nr-precios__t, .nr-precios:focus-within .nr-chip {
  animation-play-state: paused;
}
@media (max-width: 768px) {
  /* Columna izquierda entra por la izquierda y la derecha por la derecha. */
  .nr-chip:nth-child(odd)  { --nr-x: -46px; --nr-y: 0px; }
  .nr-chip:nth-child(even) { --nr-x: 46px;  --nr-y: 0px; }
}
@media (min-width: 769px) {
  .nr-chip { --nr-x: 0px; --nr-y: 16px; }
}
/* El ciclo EMPIEZA visible: si el navegador congela las animaciones (pestaña en
   segundo plano, ahorro de batería), los precios se quedan a la vista, que es
   el fallo bueno. */
@keyframes nr-ciclo {
  0%, 72%   { opacity: 1; visibility: visible; transform: none; }
  77%       { opacity: 0; visibility: visible; transform: translate3d(var(--nr-x,0), var(--nr-y,0), 0); }
  78%, 94%  { opacity: 0; visibility: hidden;  transform: translate3d(var(--nr-x,0), var(--nr-y,0), 0); }
  95%       { opacity: 0; visibility: visible; transform: translate3d(var(--nr-x,0), var(--nr-y,0), 0); }
  100%      { opacity: 1; visibility: visible; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nr-precios__t, .nr-chip { animation: none; }
}