/* ============================================================================
   PREMICS · landing page stylesheet  (CSS only — the page ships ZERO JavaScript)
   ============================================================================
   The public front door: first impressions, the five service categories, and a
   log-in link. Interaction is deliberately limited to what CSS alone provides —
   the themed glow on hover/focus IS the whole behaviour. Anything that needs
   state (the assigned/verified visitor id, forms, routing) belongs to the web
   app behind this page, never here: adding a <script> to this file's page is a
   decision, not a fix (see docs/12-premics-charter.md §3).

   Design lineage: the Aurora → Sunny calm system — same palette tokens, cream
   canvas, lowercase voice, soft cards, gentle motion. Each category carries one
   family colour; the glow takes the tile's own `--c`, so adding/renaming a
   category is an HTML-only edit (set `--c` inline on the tile, nothing here).

   Layout strategy (the Aurora rule): one centered column; FIXED-size tiles that
   WRAP — tiles never shrink, so touch targets stay full-size on phones.
   LIGHT ONLY, deliberately: the app behind this door is light by construction
   (app/globals.css pins color-scheme:light), so a dark front door would flash
   to cream on the first click into the app. The device-preference variant is
   gone and index.html's meta says `light` — bringing one back is a decision,
   not a fix. Honours prefers-reduced-motion.
   ========================================================================== */

/* ── tokens — the family palette, verbatim from the Sunny deck ── */
:root {
  --lavender:#AEA1CF;   /* the house's lavender (NeuroP wears --svc1 since PAL-1) */
  --sky:#9DBBD2;        /* the house's sky (NeuroIMG wears --svc2)               */
  --sage:#8FB3A6;       /* the house's sage (NeuroFis wears --svc3)              */
  --sun:#E7B873;        /* the house's amber: the focus ring (four wears --svc4) */
  --blush:#DDA39D;      /* the house's blush (five wears --svc5)                 */
  --wood:#CBB7A2;
  --gold:#9A7430;
  --teal:#9DD2CF;       /* the "agendar" button at rest (LL-1); the hive's colour until PAL-1 made the hive mint */
  /* the services' own colours (PAL-1, the owner 2026-10-08: "dont have to be the same colours just look
     nice together"): soft pastels, each beside its logo's hue, one chroma for all. The tiles and the
     glow after a pick wear these; the colour-named tokens above stay the house's. */
  --svc1:#E2A4B0;       /* NeuroP   · pink, from its logo's frame         */
  --svc2:#8DAFDE;       /* NeuroIMG · periwinkle, beside its logo's blue  */
  --svc3:#CCBAEC;       /* NeuroFis · lilac, beside its logo's purple     */
  --svc4:#E9CB98;       /* category four (tbd) · sun, softened            */
  --svc5:#94DDEC;       /* category five (tbd) · aqua                     */
  /* the "agendar" button's colour (LL-1, the owner 2026-10-08): teal at rest; once a service is
     picked, that service's own colour — set by the :has() rules under .cats */
  --go:var(--teal);

  --ink:#3A3442;
  --muted:#6F6878;
  --card:#FCFBFE;
  --panel:#F3EEE4;
  --hair:#E7DECB;

  --ease-calm:cubic-bezier(.4,0,.2,1);
  /* the canvas (LL-1, the owner's pick 2026-10-08: "cool mist"): white to a pale grey-blue, the
     tints the family's cool ones — teal above, sky at the right, lavender at the foot; the cream
     with its warm sun and blush washes is what left */
  --page: radial-gradient(1100px 500px at 50% -10%, rgba(157,210,207,.20), transparent 62%),
          radial-gradient(900px 520px at 100% 0%,  rgba(157,187,210,.16), transparent 58%),
          radial-gradient(1100px 600px at 0% 100%, rgba(174,161,207,.14), transparent 60%),
          linear-gradient(180deg,#FCFBFE,#F6F7FA 55%,#F1F4F7);
}

* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }   /* the Sunny lesson: the attribute must win */

html { overflow-x:hidden; }
body {
  font-family:"Avenir Next","Nunito","Quicksand","Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:var(--page); background-attachment:fixed;
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  padding:clamp(14px,2.5vw,24px) clamp(14px,4vw,28px) clamp(30px,5vw,52px);
}
.mono { font-family:"SF Mono",ui-monospace,Menlo,monospace; }

/* ── header: brand + log in ── */
.top {
  width:100%; max-width:1020px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:10px; }
/* the company's lockup: the file has no empty border, so its height IS the
   hexagon's height (30px, the old mark's size); the width follows the file */
.brand .lockup { display:block; height:30px; width:auto; }
.login {
  font-size:clamp(12.5px,2.2vw,13.5px); color:var(--ink); text-decoration:none;
  background:var(--card); border:1px solid var(--hair); border-radius:999px;
  padding:8px 18px; box-shadow:0 2px 10px -6px rgba(120,100,60,.35);
  transition:box-shadow .3s var(--ease-calm), transform .3s var(--ease-calm);
}
.login:hover, .login:focus-visible {
  outline:none; transform:translateY(-1px);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sun) 40%, transparent),
             0 10px 24px -12px color-mix(in srgb, var(--sun) 60%, transparent);
}

/* ── two languages, one file (PLAN-logos.md §9) ──
   Every text is a lang="es" / lang="en" pair; the server sets <html lang>,
   and these rules show that language only. The switch links are the one
   exception: each names the OTHER language, so only it shows. */
html[lang="es"] body [lang="en"]:not(.langswitch),
html[lang="en"] body [lang="es"]:not(.langswitch) { display:none !important; }
html[lang="es"] .langswitch[hreflang="es"],
html[lang="en"] .langswitch[hreflang="en"] { display:none !important; }
.top nav { display:flex; align-items:center; gap:6px; }
.langswitch {
  font-size:clamp(12px,2.1vw,13px); color:var(--muted); text-decoration:none;
  padding:8px 10px; border-radius:999px;
}
.langswitch:hover, .langswitch:focus-visible { outline:none; color:var(--ink); text-decoration:underline; }

/* ── hero — owner copy slots ── */
.hero { text-align:center; margin-top:clamp(34px,7vw,66px); max-width:660px; }
.hero h1 { font-size:clamp(23px,4.6vw,33px); font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.hero .lead { margin-top:12px; color:var(--muted); font-size:clamp(13px,2.4vw,15px); line-height:1.65; }

/* ── the five categories — the page's centrepiece ──
   Fixed-size tiles that wrap; each <a> carries its own --c inline. */
.cats {
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(14px,2.6vw,22px); margin-top:clamp(30px,6vw,54px);
  width:100%; max-width:1020px;
}
.cat {
  --c:var(--wood);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:178px; min-height:196px; padding:20px 14px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent 46%), var(--card);
  border:1px solid var(--hair); border-radius:22px; text-decoration:none; color:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px -18px rgba(120,100,60,.35);
  transition:box-shadow .32s var(--ease-calm), transform .32s var(--ease-calm), border-color .32s var(--ease-calm);
}
/* the hint (LL-1, the owner: "a very gentle glow to the service cards after 2 second … hinting
   to choose"): 2 s after the page opens every tile breathes slowly in ITS OWN colour, on a glow
   layer under the tile — never the tile's own box-shadow, so hover, focus and the pick keep
   theirs — and it stops the moment anything is picked (the :has() rule under .cats) */
.cat { isolation:isolate; }
.cat::before {
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; opacity:0;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 32%, transparent),
             0 16px 38px -14px color-mix(in srgb, var(--c) 66%, transparent);
  animation:hint 4s var(--ease-calm) 2s infinite;
}
@keyframes hint { 0%, 100% { opacity:0; } 50% { opacity:.9; } }

/* the gentle themed glow — hover and keyboard focus are the SAME state, so the
   glow doubles as the focus ring (never remove it without replacing it) */
.cat:hover, .cat:focus-visible {
  outline:none; transform:translateY(-3px); border-color:color-mix(in srgb, var(--c) 45%, var(--hair));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent),
             0 16px 38px -16px color-mix(in srgb, var(--c) 62%, transparent);
}
.cat .disc {
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink); background:color-mix(in srgb, var(--c) 26%, var(--card));
  border:1px solid color-mix(in srgb, var(--c) 40%, var(--hair));
  transition:background .32s var(--ease-calm);
}
.cat:hover .disc, .cat:focus-visible .disc { background:color-mix(in srgb, var(--c) 40%, var(--card)); }
.cat .disc svg { width:32px; height:32px; }
.cat .name { margin-top:12px; font-weight:600; font-size:15px; letter-spacing:.02em; }
/* the one-sentence scope, just below the icon + name */
.cat .desc { margin-top:6px; color:var(--muted); font-size:11.8px; line-height:1.5; }

/* categories four & five are unnamed placeholders until the owner names them —
   the dashed treatment is deliberate: it must LOOK undecided, not broken */
.cat.tbd { border-style:dashed; }
.cat.tbd .disc { border-style:dashed; background:color-mix(in srgb, var(--c) 14%, var(--card)); }
.cat.tbd .name { color:var(--muted); font-style:italic; font-weight:500; }

/* ── round 3: the tiles are SELECTORS (charter §12 R4) — still zero JS ──
   The checkbox is visually hidden but real: :has(:checked) draws the picked
   state, keyboard reaches it (:focus-visible inside lights the tile), and the
   plain GET form posts every picked value to /start. When lib/landing.ts
   serves the inert variants it strips the inputs — a label with no input is
   just a display card, so these rules simply stop matching. */
.pick { display:flex; flex-direction:column; align-items:center; width:100%; }
.pickbox {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.cat { cursor:pointer; position:relative; }
.cat:has(.pickbox:checked) {
  border-color:color-mix(in srgb, var(--c) 70%, var(--hair));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent),
             0 16px 38px -16px color-mix(in srgb, var(--c) 70%, transparent);
}
.cat:has(.pickbox:checked) .disc { background:color-mix(in srgb, var(--c) 52%, var(--card)); }
.cat:has(.pickbox:checked)::after {
  content:"✓"; position:absolute; top:10px; right:12px;
  font-size:13px; font-weight:700; color:color-mix(in srgb, var(--c) 80%, var(--ink));
}
.cat:has(.pickbox:focus-visible) {
  transform:translateY(-3px); border-color:color-mix(in srgb, var(--c) 45%, var(--hair));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent),
             0 16px 38px -16px color-mix(in srgb, var(--c) 62%, transparent);
}

/* a pick (LL-1): the hint stops, and the picked service's colour reaches the button — one rule per
   tile in the HTML's order, the last picked in that order wins when several are picked */
.pick:has(.pickbox:checked) .cat::before { animation:none; }
.pick:has(.cats > li:nth-child(1) .pickbox:checked) .continue { --go:var(--svc1); }
.pick:has(.cats > li:nth-child(2) .pickbox:checked) .continue { --go:var(--svc2); }
.pick:has(.cats > li:nth-child(3) .pickbox:checked) .continue { --go:var(--svc3); }
.pick:has(.cats > li:nth-child(4) .pickbox:checked) .continue { --go:var(--svc4); }
.pick:has(.cats > li:nth-child(5) .pickbox:checked) .continue { --go:var(--svc5); }

/* the continue bar under the tiles */
.go { margin-top:clamp(18px,3vw,26px); display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
/* the "agendar" button (LL-1): a soft pill in --go — teal at rest, the picked service's colour after
   a pick — with ink text; the gold left (the palette's rule: never brown). The glow after a pick
   lives on a layer under the button, so the hover ring stays what it was */
.continue {
  font:inherit; font-weight:650; font-size:14.5px; letter-spacing:.02em; position:relative; isolation:isolate;
  color:var(--ink); background:linear-gradient(180deg, rgba(255,255,255,.55), transparent 60%), color-mix(in srgb, var(--go) 38%, var(--card));
  border:1px solid color-mix(in srgb, var(--go) 70%, var(--hair));
  border-radius:999px; padding:11px 30px; cursor:pointer; text-decoration:none;
  box-shadow:0 10px 24px -14px color-mix(in srgb, var(--go) 70%, transparent);
  transition:transform .32s var(--ease-calm), box-shadow .32s var(--ease-calm), background .32s var(--ease-calm), border-color .32s var(--ease-calm);
}
.continue:hover, .continue:focus-visible {
  outline:none; transform:translateY(-2px);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--go) 35%, transparent),
             0 14px 30px -14px color-mix(in srgb, var(--go) 80%, transparent);
}
.continue::after {
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1; pointer-events:none; opacity:0;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--go) 40%, transparent),
             0 14px 34px -10px color-mix(in srgb, var(--go) 85%, transparent);
}
.pick:has(.pickbox:checked) .continue::after { animation:glow 2.6s var(--ease-calm) infinite; }
@keyframes glow { 0%, 100% { opacity:.25; } 50% { opacity:1; } }
.gohint { color:var(--muted); font-size:12px; }

/* the logged pill: the home-styled dashboard button (server-substituted) */
.login.home::before { content:"⌂ "; }

/* ── owner information band — replace freely, structure is disposable ── */
.info {
  margin-top:clamp(40px,7vw,72px); width:100%; max-width:1020px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,2.2vw,18px);
}
.info .card {
  flex:1 1 280px; max-width:326px; background:var(--panel); border:1px solid var(--hair);
  border-radius:18px; padding:16px 18px;
}
.info h2 { font-size:14.5px; font-weight:600; }
.info p { margin-top:7px; color:var(--muted); font-size:12.5px; line-height:1.6; }
.info .k { font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:9.5px; letter-spacing:.12em; color:var(--gold); text-transform:uppercase; }

/* ── footer ── */
footer {
  margin-top:clamp(40px,7vw,70px); width:100%; max-width:1020px; text-align:center;
  color:var(--muted); font-size:11.5px; line-height:1.7;
  border-top:1px solid var(--hair); padding-top:18px;
}

@media (prefers-reduced-motion: reduce) {
  .cat, .login, .cat .disc, .continue { transition:none; }
  .cat:hover, .cat:focus-visible, .login:hover, .login:focus-visible { transform:none; }
  .cat::before, .continue::after { animation:none; }
  .pick:has(.pickbox:checked) .continue::after { opacity:1; }   /* the picked state still shows, still */
}

/* sala:start */
/* ── la sala (decor) ─────────────────────────────────────────────────────────────────────────
   A cutaway of the clinic around the tiles: the reading wall (an EEG trace, an MRI on a lightbox) over
   the child's low table, toys on a shelf, the window with a kite, the archive with a brain model; on
   narrow screens one piece beside each tile, in that tile's colour. Decoration only: under everything
   (z-index -1), clipped to the page (no sideways scroll), aria-hidden, no pointer events, no words, no
   motion. Light from the upper right; shadows cool (ink at low alpha); no white, no brown, no maroon, no
   state colours. Generated by scripts/landing-decor/art.py (edit there, not here).
   The layer ships with an inline display:none that only this sheet lifts, so a browser still holding the
   previous premics.css (cached 300 s) shows the page without it; [hidden] on it still wins. */
body { position:relative; }
.sala { display:block !important; position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; user-select:none; }
.sala[hidden] { display:none !important; }
.sala .sa { position:absolute; display:none; overflow:visible; }
.sala .sa-defs { position:absolute; width:0; height:0; }
/* phones, one tile per row: one piece beside each tile, alternating sides, 16 px off the tiles and
   14 px inside the screen, each in that tile's colour (rings + blocks: NeuroPed; the lightbox:
   NeuroIMage; the EEG frame: NeuroPhysiology; crayons + the teddy: the fourth). Below 360 the
   gutters (< 61 px) cannot hold them whole: nothing. The 402.1 edge stays under the two-per-row
   switch (0.92w >= 370 px from 402.17). */
@media (min-width:360px) and (max-width:374.98px) {
  .sala .sa-rings-r { display:block; left:calc(50% + (105px)); top:304px; width:64.2px; height:77.6px; }
  .sala .sa-mri { display:block; left:calc(50% - (105px) - 62.1px); top:504px; width:63.5px; height:77.3px; }
  .sala .sa-eeg-s { display:block; left:calc(50% + (105px)); top:764px; width:61.4px; height:53.1px; }
  .sala .sa-desk-l { display:block; left:calc(50% - (105px) - 64.1px); top:979px; width:64.1px; height:77.6px; }
}
@media (min-width:375px) and (max-width:402.1px) {
  .sala .sa-rings-r { display:block; left:calc(50% + (105px)); top:300px; width:72.2px; height:87.3px; }
  .sala .sa-mri { display:block; left:calc(50% - (105px) - 69.3px); top:500px; width:70.8px; height:86.2px; }
  .sala .sa-eeg-s { display:block; left:calc(50% + (105px)); top:760px; width:69.7px; height:60.3px; }
  .sala .sa-desk-l { display:block; left:calc(50% - (105px) - 72.1px); top:975px; width:72.1px; height:87.3px; }
}
/* tablets, three tiles per row: rings + blocks left of NeuroPed, the EEG frame right of
   NeuroPhysiology, both beside row one (fixed widths). Nothing beside the fourth tile: it shares row
   two with the continue bar, so its place moves with the font (17 px in Verdana). The 832.9 edge
   stays under the four-per-row switch (0.922w >= 768 px from 832.97). */
@media (min-width:730px) and (max-width:767.98px) {
  .sala .sa-rings-l { display:block; left:calc(50% - (267px + 2.6vw + 16px) - 51.3px); top:340px; width:51.3px; height:62.1px; }
  .sala .sa-eeg-s { display:block; left:calc(50% + (267px + 2.6vw + 16px)); top:345px; width:48.9px; height:42.3px; }
}
@media (min-width:768px) and (max-width:832.9px) {
  .sala .sa-rings-l { display:block; left:calc(50% - (267px + 2.6vw + 16px) - 70.6px); top:330px; width:70.6px; height:85.4px; }
  .sala .sa-eeg-s { display:block; left:calc(50% + (267px + 2.6vw + 16px)); top:335px; width:67.6px; height:58.5px; }
}
/* one row of four, narrow margins: the brain model on a wall shelf in the free corner right of the
   headline (anchored to the page centre, so a centred hero would still clear it); rings + blocks
   beside NeuroPed, crayons + the teddy beside the fourth tile */
@media (min-width:930px) and (max-width:1023.98px) {
  .sala .sa-brain-r { display:block; left:calc(50% + 346px); top:128px; width:62.5px; height:92.1px; }
  .sala .sa-rings-l { display:block; left:calc(50% - (405px) - 48.1px); top:340px; width:48.1px; height:58.2px; }
  .sala .sa-desk-r { display:block; left:calc(50% + (405px)); top:360px; width:48.1px; height:58.2px; }
}
/* small laptops: no instrument beside a tile it does not belong to (the reading wall waits for 1240);
   the lab is the archive with its brain model. Left: rings + blocks beside NeuroPed, the table
   under it; right: the window by the headline, the archive (its ball hidden: the band would cut it) */
@media (min-width:1024px) and (max-width:1239.98px) {
  .sala .sa-win { display:block; left:min(50% + 405px, 100% - 116.9px); top:112px; width:104px; height:130px; }
  .sala .sa-lab { display:block; left:min(50% + 405px, 100% - 121.2px); top:581px; width:165px; height:103.4px; }
  .sala .sa-lab .sa-ball { display:none; }
  .sala .sa-rings-l { display:block; left:calc(50% - (405px) - 80.2px); top:318px; width:80.2px; height:97px; }
  .sala .sa-table { display:block; left:max(7.1px, 50% - 574.2px); top:566.6px; width:210px; height:119px; }
}
/* wide screens: the two vignettes, every object whole, never 1-13 px short of the screen edge */
@media (min-width:1240px) and (max-width:1365.98px) {
  .sala .sa-eeg { display:block; left:max(14.3px, 50% - 613.8px); top:389.1px; width:108px; height:72px; }
  .sala .sa-mri { display:block; left:calc(50% - 484.2px); top:389.1px; width:66.2px; height:80.6px; }
  .sala .sa-shelf { display:block; left:max(10.7px, 50% - 621px); top:475.5px; width:216px; height:77.8px; }
  .sala .sa-table { display:block; left:max(6.4px, 50% - 621px); top:563.4px; width:216px; height:122.4px; }
  .sala .sa-win { display:block; left:min(50% + 477px, 100% - 156.1px); top:305.6px; width:144px; height:180px; }
  .sala .sa-lab { display:block; left:calc(50% + 405px); top:550.4px; width:216px; height:135.4px; }
}
@media (min-width:1366px) and (max-width:1439.98px) {
  .sala .sa-eeg { display:block; left:max(14.1px, 50% - 671.8px); top:308.3px; width:138px; height:92px; }
  .sala .sa-mri { display:block; left:calc(50% - 506.2px); top:308.3px; width:84.6px; height:103px; }
  .sala .sa-shelf { display:block; left:max(9.5px, 50% - 681px); top:418.7px; width:276px; height:99.4px; }
  .sala .sa-table { display:block; left:max(4px, 50% - 681px); top:531px; width:276px; height:156.4px; }
  .sala .sa-win { display:block; left:min(50% + 497px, 100% - 195.3px); top:201.6px; width:184px; height:230px; }
  .sala .sa-lab { display:block; left:calc(50% + 405px); top:514.4px; width:276px; height:173px; }
}
@media (min-width:1440px) and (max-width:1679.98px) {
  .sala .sa-eeg { display:block; left:calc(50% - 695px); top:276px; width:150px; height:100px; }
  .sala .sa-mri { display:block; left:calc(50% - 515px); top:276px; width:92px; height:112px; }
  .sala .sa-shelf { display:block; left:calc(50% - 705px); top:396px; width:300px; height:108px; }
  .sala .sa-table { display:block; left:calc(50% - 705px); top:518px; width:300px; height:170px; }
  .sala .sa-win { display:block; left:calc(50% + 505px); top:160px; width:200px; height:250px; }
  .sala .sa-lab { display:block; left:calc(50% + 405px); top:500px; width:300px; height:188px; }
}
@media (min-width:1680px) {
  .sala .sa-eeg { display:block; left:calc(50% - 729.8px); top:277.5px; width:168px; height:112px; }
  .sala .sa-mri { display:block; left:calc(50% - 528.2px); top:277.5px; width:103px; height:125.4px; }
  .sala .sa-shelf { display:block; left:calc(50% - 741px); top:411.9px; width:336px; height:121px; }
  .sala .sa-table { display:block; left:calc(50% - 741px); top:548.6px; width:336px; height:190.4px; }
  .sala .sa-win { display:block; left:calc(50% + 517px); top:147.6px; width:224px; height:280px; }
  .sala .sa-lab { display:block; left:calc(50% + 405px); top:528.4px; width:336px; height:210.6px; }
}
/* if the fifth tile returns (a 978-px row): the window alone up to 1439 px, then the vignettes re-anchored */
@media (min-width:1024px) {
  body:has(.cats > li:nth-child(5)) .sala .sa-shelf, body:has(.cats > li:nth-child(5)) .sala .sa-table, body:has(.cats > li:nth-child(5)) .sala .sa-eeg, body:has(.cats > li:nth-child(5)) .sala .sa-mri, body:has(.cats > li:nth-child(5)) .sala .sa-lab, body:has(.cats > li:nth-child(5)) .sala .sa-rings-l { display:none; }
  body:has(.cats > li:nth-child(5)) .sala .sa-win { display:block; left:auto; right:16px; top:112px; width:110px; height:137.5px; }
}
@media (min-width:1440px) {
  body:has(.cats > li:nth-child(5)) .sala .sa-eeg { display:block; left:max(14.3px, 50% - 713.8px); top:389.1px; width:108px; height:72px; }
  body:has(.cats > li:nth-child(5)) .sala .sa-mri { display:block; left:calc(50% - 584.2px); top:389.1px; width:66.2px; height:80.6px; }
  body:has(.cats > li:nth-child(5)) .sala .sa-shelf { display:block; left:max(10.7px, 50% - 721px); top:475.5px; width:216px; height:77.8px; }
  body:has(.cats > li:nth-child(5)) .sala .sa-table { display:block; left:max(6.4px, 50% - 721px); top:563.4px; width:216px; height:122.4px; }
  body:has(.cats > li:nth-child(5)) .sala .sa-win { display:block; left:min(50% + 577px, 100% - 156.1px); top:305.6px; width:144px; height:180px; }
  body:has(.cats > li:nth-child(5)) .sala .sa-lab { display:block; left:calc(50% + 505px); top:550.4px; width:216px; height:135.4px; }
}
@media (min-width:1680px) {
  body:has(.cats > li:nth-child(5)) .sala .sa-eeg { display:block; left:calc(50% - 795px); top:276px; width:150px; height:100px; }
  body:has(.cats > li:nth-child(5)) .sala .sa-mri { display:block; left:calc(50% - 615px); top:276px; width:92px; height:112px; }
  body:has(.cats > li:nth-child(5)) .sala .sa-shelf { display:block; left:calc(50% - 805px); top:396px; width:300px; height:108px; }
  body:has(.cats > li:nth-child(5)) .sala .sa-table { display:block; left:calc(50% - 805px); top:518px; width:300px; height:170px; }
  body:has(.cats > li:nth-child(5)) .sala .sa-win { display:block; left:calc(50% + 605px); top:160px; width:200px; height:250px; }
  body:has(.cats > li:nth-child(5)) .sala .sa-lab { display:block; left:calc(50% + 505px); top:500px; width:300px; height:188px; }
}
@media print, (forced-colors: active) {
  .sala { display:none !important; }
}
/* sala:end */