/* Getix Translate /hotels v3 (2026-10-31). The page is a copy of the main page (index.html), built from the
   /clinics flagship: same sections, same markup, same pictures. Only the copy and the people change. Loaded after
   styles.css and niche.css, only on /hotels. This file holds only what the main page and niche.css do not have:
     .ht-hero-scene ...... hero picture: the reception desk from above (.desk, .desk-phone, .desk-mid from niche.css,
                           no tags) in place of the laptop of the main page; .ht-arms-guest (Jonas, olive travel
                           jacket) and .ht-arms-staff (Lucía, navy uniform with a white shirt cuff) colour the arms
     .ht-voice ........... faint sound rings behind the flat phone (.voice from niche.css)
     .pp-carmen .pp-pieter .pp-nadia .pp-front .pp-dining .pp-house ... hotel people (colours for the sprite
                           symbols ht-host, ht-uniform, p-earbuds)
     .ht-slide ........... mode 03 slide: a guest arrival in three steps (welcome, key card, room) */

/* ---------- hero ---------- */
.ht-hero-scene .desk{margin-top:14px}
.ht-desk .panes.face .pane:first-child{transform:rotate(180deg)}
.ht-arms-guest{--sleeve:#6b7550;--cuff:#3f4636;--skin:#f1d2b8;--skin-dk:#dcb394}
.ht-arms-staff{--sleeve:#2c4068;--cuff:#e9edf2;--skin:#d6a27c;--skin-dk:#bf8b65}
.ht-voice{--vs:74%}
.ht-voice i{border-width:1.5px;border-color:rgba(54,204,255,.34)}

/* ---------- modes ---------- */
/* hotel people: Carmen (navy blazer, white shirt, dark hair in a bun, headset), Pieter (light sweater, earbuds),
   Nadia (burgundy blazer, headset), the training team in reception navy, restaurant burgundy and housekeeping grey */
.tile .pp-carmen{--skin:#d6a27c;--skin-dk:#bf8b65;--hair:#2b1f17;--jacket:#24365a;--jacket-dk:#16223a;--shirt-in:#e9edf2;--gear:#2a3140}
.tile .pp-pieter{--skin:#f1d2b8;--skin-dk:#dcb394;--hair:#c9a26a;--shirt:#d9d2c3}
.ctile.u1 .pp.pp-nadia{--skin:#e8bf9c;--skin-dk:#d2a580;--hair:#5a3a28;--jacket:#7a2e3a;--jacket-dk:#5a1f29;--shirt-in:#f1ece4;--gear:#2a3140}
.ctile.u2 .pp.pp-front{--shirt:#1f2f4d;--collar:#e9edf2}
.ctile.u3 .pp.pp-dining{--shirt:#7a2e3a;--collar:#f1ece4}
.ctile.u4 .pp.pp-house{--shirt:#8c96a3;--collar:#e9edf2}

/* mode 03 slide: a guest arrival in three steps (welcome, key card, room) instead of the bar chart */
.slide.ht-slide{container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-start;gap:8px}
.ht-slide-t{display:block;font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:5.4cqw;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:#10151d}
.ht-steps{display:block;flex:none;width:100%;height:auto}
.ht-steps .bubble path{fill:#e2e8f1}
.ht-steps .dots circle{fill:#1c81e3}
.ht-steps .sleeve rect{fill:#e2e8f1}
.ht-steps .card rect{fill:#fff;stroke:#1c81e3;stroke-width:2.6}
.ht-steps .stripe rect{fill:#8a97ab}
.ht-steps .bed rect{fill:#c3cddb}
.ht-steps .pillow rect{fill:#fff}
.ht-steps .blanket{fill:#e2e8f1;stroke:#1c81e3;stroke-width:2.6;stroke-linejoin:round}
.ht-steps .fold{fill:none;stroke:#1c81e3;stroke-width:2;stroke-linecap:round;opacity:.55}
.ht-steps .arrow path{fill:none;stroke:#1c81e3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ht-steps .lbl text{font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:13px;font-weight:700;fill:#4a5568;text-anchor:middle}