/* ===== ventana de chat flotante + ilustraciones del inicio y de la renta + página quieta ===== */

/* reservar el espacio del showroom para que la página no salte al cargarse */
#showroom{min-height:620px}
.band-track{animation-duration:44s}

/* chat flotante */
.chat-fab{position:fixed;left:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:10px;height:62px;padding:0 22px 0 18px;border-radius:999px;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);font:800 1rem var(--display);cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:transform .2s,opacity .2s}
.chat-fab:hover{transform:translate(-2px,-2px)}
.chat-fab svg{width:28px;height:28px;flex:none}
.chat-fab.away{opacity:0;pointer-events:none;transform:translateY(20px)}
.chat-fab.tip::before{content:"";position:absolute;inset:-9px;border-radius:999px;border:3px solid var(--yellow);animation:chatPing 1.4s ease-out 3}
@keyframes chatPing{from{transform:scale(.96);opacity:1}to{transform:scale(1.16);opacity:0}}
.chat-drawer{position:fixed;left:18px;bottom:18px;z-index:70;width:min(410px,calc(100vw - 36px));height:min(680px,calc(100dvh - 36px));opacity:0;transform:translateY(24px) scale(.97);transform-origin:bottom left;transition:opacity .22s,transform .22s}
.chat-drawer.on{opacity:1;transform:none}
.chat-drawer[hidden]{display:none}
.chat-dock{height:100%;border-radius:36px;box-shadow:0 24px 60px -10px rgba(0,0,0,.55)}
.chat-drawer .phone{height:100%;max-width:none;width:100%;margin:0;box-shadow:none}
.chat-x{position:absolute;top:-14px;right:-10px;z-index:3;width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);font:900 1.1rem var(--display);cursor:pointer}
.open-chat{margin-top:20px}
@media (max-width:760px){
  .chat-fab{left:14px;bottom:14px;height:56px;padding:0 18px 0 14px;box-shadow:4px 4px 0 var(--ink)}
  .chat-fab span{font-size:.92rem}
  .chat-drawer{left:0;right:0;bottom:0;width:100%;height:86dvh;transform:translateY(40px)}
  .chat-dock{border-radius:26px 26px 0 0}
  .chat-drawer .phone{border-radius:26px 26px 0 0;border-width:8px 8px 0}
  .chat-x{top:-18px;right:14px}
}

/* ilustración del inicio: carretera con palmeras y un carro que cruza (movimiento por tiempo, no por scroll) */
.hero-road{position:absolute;left:0;right:0;bottom:0;z-index:1;line-height:0;pointer-events:none}
.hero-road svg{width:100%;height:clamp(100px,13vw,190px);display:block}
.hr-dash{animation:hrDash 1s linear infinite}
@keyframes hrDash{to{stroke-dashoffset:-54}}
.hr-car{animation:hrDrive 22s linear infinite}
@keyframes hrDrive{from{transform:translateX(-160px)}to{transform:translateX(1360px)}}
.hr-wheel{animation:turn .6s linear infinite}
.hero-in{padding-bottom:140px}

/* renta: sol, palmera y olas detrás del encabezado; íconos en las tarifas */
.rent{position:relative}
.rent>.wrap{position:relative}
.rent-art{position:absolute;right:0;top:-40px;width:clamp(170px,17vw,230px);height:auto;opacity:.95;pointer-events:none}
.rent .sec-head h2{max-width:13ch}
.ra-sun{transform-origin:212px 86px;animation:turn 40s linear infinite}
.ra-palm{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5.5s ease-in-out infinite alternate}
.rate-ico{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.rate-dark .rate-ico{color:var(--yellow)}
@media (max-width:980px){.rent-art{display:none}.hero-in{padding-bottom:120px}}
@media (prefers-reduced-motion:reduce){.hr-dash,.hr-car,.hr-wheel,.ra-sun,.ra-palm,.chat-fab.tip::before{animation:none}.hr-car{transform:translateX(560px)}}