/* GuestTap — página del Reino Unido (/uk/). Usa /landing.css y aquí solo lo propio: la sección del teléfono
   de la habitación (con su animación), la franja de foto (imagen en vez de video) y el precio sin cifras. */

/* franja a lo ancho: foto en vez de video */
.band img { width: 100%; height: 100%; object-fit: cover; }

/* precio: una sola tarjeta, sin cifras */
.price-grid.one { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.price-grid.one .price-note { margin: 10px 0 0; }
.price-grid.one .btn { white-space: normal; text-align: center; line-height: 1.25; }

/* ---------- el teléfono de la habitación ---------- */
.rp { padding: 100px 0; background: var(--bg); }
.rp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; }
/* la columna derecha queda libre en escritorio: por ahí pasa el teléfono que vuela del inicio al QR */
.rp-copy { min-width: 0; }
.rp .sub b { color: var(--ink); }
.rp .sub a { white-space: nowrap; font-size: 15px; font-weight: 700; }
.rp-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 34px; }
.rp-std { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px; box-shadow: var(--shadow); font-size: 15px; }
.rp-std p { margin: 0 0 8px; color: var(--ink-2); }
.rp-std .rp-std-h { color: var(--ink); font-weight: 800; font-size: 17px; line-height: 1.35; }
.rp-std ol { margin: 0 0 12px; padding-left: 22px; color: var(--ink); }
.rp-std li { margin: 3px 0; }
.rp-std li::marker { color: var(--coral); font-weight: 800; }
.rp-std a { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.rp-std small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.rp-caveat { margin: 26px 0 0; padding: 14px 18px; border-left: 4px solid var(--coral); border-radius: 12px; background: var(--tan-soft); color: #5b3f1c; font-size: 15px; }
.rp-caveat b { color: var(--ink); }
@media (max-width: 959px) { .rp-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .rp { padding: 70px 0; }
  .rp-row { grid-template-columns: 1fr; gap: 20px; }
  .rp-anim { max-width: 280px; margin: 0 auto; width: 100%; }
}

/* animación: suena → "línea desconectada" → sale → entra el celular con la app. Un ciclo de 10 s. */
.rp-stage { position: relative; height: 250px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(180deg, var(--sand) 0%, #ece5d8 100%); }
.rp-table { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: #b88a5c; box-shadow: inset 0 3px 0 #cf9f6d, inset 0 -6px 12px rgba(0, 0, 0, .12); }
.rp-old { position: absolute; left: 50%; bottom: 30px; width: 170px; margin-left: -85px; animation: rpOld 10s ease-in-out infinite; }
.rp-landline { width: 100%; height: auto; overflow: visible; }
.rp-base { fill: #efe4cc; stroke: #b9a682; stroke-width: 2; }
.rp-handset { fill: #f4ead5; stroke: #b9a682; stroke-width: 2; transform-origin: 80px 46px; animation: rpRing 10s linear infinite; }
.rp-dial { fill: #e6d8bb; stroke: #b9a682; stroke-width: 1.6; }
.rp-holes circle { fill: #fbf6ea; stroke: #b9a682; stroke-width: 1; }
.rp-hub { fill: #c9b48c; }
.rp-cord { fill: none; stroke: #b9a682; stroke-width: 2.4; stroke-linecap: round; }
.rp-waves path { fill: none; stroke: var(--coral); stroke-width: 2.6; stroke-linecap: round; opacity: 0; animation: rpWaves 10s linear infinite; }
.rp-off { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); padding: 5px 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; animation: rpOff 10s ease infinite; }
.rp-off::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #e0574a; vertical-align: 1px; }
.rp-new { position: absolute; left: 50%; bottom: 22px; width: 100px; margin-left: -50px; opacity: 0; animation: rpNew 10s cubic-bezier(.2, .8, .2, 1) infinite; }
.rp-new img { width: 100%; height: auto; border-radius: 14px; border: 4px solid #0b0f0e; box-shadow: 0 14px 28px rgba(16, 32, 29, .28); background: #0b0f0e; }
.rp-toast { position: absolute; left: 50%; top: 18px; width: 150px; margin-left: -75px; padding: 7px 9px; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(16, 32, 29, .18); color: var(--ink-2); font-size: 11px; line-height: 1.3; opacity: 0; animation: rpToast 10s ease infinite; }
.rp-toast b { display: block; color: var(--ink); font-size: 11.5px; }
@keyframes rpOld {
  0%, 36% { transform: none; opacity: 1; filter: none; }
  42%, 48% { transform: none; opacity: .75; filter: grayscale(1); }
  60%, 90% { transform: translateX(-160%) rotate(-8deg); opacity: 0; filter: grayscale(1); }
  91% { transform: none; opacity: 0; filter: none; }
  100% { transform: none; opacity: 1; filter: none; }
}
@keyframes rpRing {
  0%, 8% { transform: rotate(0); }
  9% { transform: translateY(-4px) rotate(-6deg); } 10% { transform: translateY(-4px) rotate(6deg); } 11% { transform: translateY(-4px) rotate(-6deg); }
  12% { transform: translateY(-4px) rotate(6deg); } 13% { transform: translateY(-4px) rotate(-6deg); } 14% { transform: translateY(-4px) rotate(6deg); }
  15% { transform: translateY(-4px) rotate(-6deg); } 16% { transform: translateY(-4px) rotate(6deg); } 17%, 22% { transform: rotate(0); }
  23% { transform: translateY(-4px) rotate(-6deg); } 24% { transform: translateY(-4px) rotate(6deg); } 25% { transform: translateY(-4px) rotate(-6deg); }
  26% { transform: translateY(-4px) rotate(6deg); } 27% { transform: translateY(-4px) rotate(-6deg); } 28% { transform: translateY(-4px) rotate(6deg); }
  29% { transform: translateY(-4px) rotate(-6deg); } 30% { transform: translateY(-4px) rotate(6deg); } 31%, 100% { transform: rotate(0); }
}
@keyframes rpWaves {
  0%, 8% { opacity: 0; } 10%, 15% { opacity: 1; } 17%, 22% { opacity: 0; } 24%, 29% { opacity: 1; } 31%, 100% { opacity: 0; }
}
@keyframes rpOff {
  0%, 36% { opacity: 0; transform: translate(-50%, 6px); }
  40%, 52% { opacity: 1; transform: translate(-50%, 0); }
  58%, 100% { opacity: 0; transform: translate(-50%, 0); }
}
@keyframes rpNew {
  0%, 54% { opacity: 0; transform: translateX(170%) rotate(8deg); }
  66%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@keyframes rpToast {
  0%, 70% { opacity: 0; transform: translateY(-6px); }
  74%, 89% { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: none; }
}
/* movimiento reducido: queda la escena final, quieta (el celular con la app y el aviso) */
@media (prefers-reduced-motion: reduce) {
  .rp-old, .rp-handset, .rp-waves path, .rp-off, .rp-new, .rp-toast { animation: none; }
  .rp-old, .rp-off, .rp-waves path { opacity: 0; }
  .rp-new, .rp-toast { opacity: 1; transform: none; }
}

/* celular: junto al QR no hay espacio para el teléfono fijo y su sello (quedaban encima del QR). En la versión UK
   el teléfono ya tiene su propia sección justo antes (#room-phone), así que aquí se quita. En computadora sigue igual. */
@media (max-width: 959px) {
  .scan .landline, .scan .ll-tag, .scan .ll-stamp, .scan .ll-cap { display: none; }
  .scan .nightstand { left: -24px; }
}

/* video de la historia (reemplaza los tres celulares): vertical en celular, horizontal en computadora */
.story-video { margin: 34px auto 0; border-radius: 22px; overflow: hidden; background: #10201d; box-shadow: 0 24px 60px rgba(16, 32, 29, .22); }
.story-video.h { max-width: 1100px; aspect-ratio: 16 / 9; }
.story-video.v { max-width: 460px; aspect-ratio: 9 / 16; max-height: 86vh; }
.story-video video { display: block; width: 100%; height: 100%; object-fit: cover; }