/* Getix Translate /students 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 /students. This file holds only what the main page and niche.css do not have:
     .st-hero-scene ...... hero picture: the laptop of the main page, the call turned into an online lecture
                           (#player with data-demo, the replay runs assets/hero-students.json; no voice button)
     .pp-carmen .pp-luca ...................... hero people (sprite symbols st-carmen, st-luca)
     .pp-pablo .pp-mia ........................ mode 01 people (st-pablo, st-mia)
     .pp-elena .pp-teal .pp-lilac .pp-grey .... mode 03 people (st-elena, st-hood, p-earbuds)
     .st-slide ........... mode 03 slide: the Turia, from river to park, in three steps
   Colours avoid orange (the colour of Getix Group). */

/* ---------- hero ---------- */
/* Carmen, the professor: dark green blazer over a light blouse, dark hair in a low bun, headset.
   Luca, an exchange student: blue hoodie with a yellow badge lanyard, earbuds. */
.tile .pp-carmen{--skin:#d9a98a;--skin-dk:#c3926f;--hair:#2b1f17;--jacket:#2f5d50;--jacket-dk:#22463c;--blouse:#efe6d8;--gear:#2a3140}
.tile .pp-luca{--skin:#f0c9a8;--skin-dk:#dcb08f;--hair:#7a5634;--shirt:#3a6ea5;--shirt-dk:#2d5786;--lanyard:#e9c46a}
/* the one grey line under the laptop: the scene already keeps room for the popup below it, so the caption sits
   close (21 to 33 px under the laptop from 375 to 1440 px, measured 31.10, always clear of the popup) */
.st-hero-scene .scene-cap{margin-top:4px}

/* ---------- modes ---------- */
/* mode 01: Pablo, the teacher of an online Spanish class (plum cardigan, round glasses, headset),
   Mia, a student (denim jacket over a white tee, earbuds) */
.tile .pp-pablo{--skin:#c98f6c;--skin-dk:#ad7858;--hair:#3a2a20;--cardigan:#7d5a7f;--cardigan-dk:#5f4461;--tee:#e8edf3;--specs:#1d2433;--gear:#2a3140}
.tile .pp-mia{--skin:#f1d2b8;--skin-dk:#dcb394;--hair:#8a5a2b;--denim:#4a6fa5;--denim-lt:#6d8fc4;--denim-dk:#36598c;--tee:#f3f4f6}

/* mode 03: Elena, the lecturer (navy blazer, short grey hair, headset), listeners in a teal hoodie,
   a lilac sweater and a grey hoodie */
.ctile.u1 .pp.pp-elena{--skin:#f0c9a8;--skin-dk:#dcb08f;--hair:#c9ced6;--jacket:#1f3b63;--jacket-dk:#152a48;--blouse:#e8edf3;--gear:#2a3140}
.ctile.u2 .pp.pp-teal{--skin:#c98f6c;--skin-dk:#ad7858;--hair:#161616;--shirt:#2a9d8f;--shirt-dk:#21857a}
.ctile.u3 .pp.pp-lilac{--skin:#f3d3b5;--skin-dk:#dcb08f;--hair:#8a5a2b;--shirt:#b8a1d9}
.ctile.u4 .pp.pp-grey{--skin:#d9a98a;--skin-dk:#c3926f;--hair:#2b1f17;--shirt:#9aa3ad;--shirt-dk:#808a96}

/* mode 03 slide: the Turia in three steps (river, empty riverbed under the old bridge, park under the same bridge)
   instead of the bar chart; flat shapes in the app's blue and blue greys */
.slide.st-slide{container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-start;gap:8px}
.st-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}
.st-turia{display:block;flex:none;width:100%;height:auto}
.st-turia .bank{fill:#e2e8f1;stroke:#5d6a80;stroke-width:1.8;stroke-linejoin:round}
.st-turia .water{fill:#c4d6f6}
.st-turia .wave{fill:none;stroke:#0841c4;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st-turia .sand{fill:#ead9b4}
.st-turia .park{fill:#acd8bb}
.st-turia .trunk{fill:#7f8ca3}
.st-turia .crown{fill:#3f9b6a}
.st-turia .bridge{fill:#c3cddb;stroke:#5d6a80;stroke-width:1.8;stroke-linejoin:round}
.st-turia .deck{fill:none;stroke:#5d6a80;stroke-width:1.4;stroke-linecap:round}
.st-turia .arrow path{fill:none;stroke:#0841c4;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}