/* Písma hostovaná přímo na tomto webu — žádné volání na Google Fonts.
   Při načtení z fonts.googleapis.com odejde IP adresa návštěvníka Googlu do USA
   bez jeho souhlasu; za to přiznal Zemský soud v Mnichově v roce 2022 odškodné
   (3 O 17493/20). Vlastní hosting je navíc rychlejší — odpadne spojení na cizí
   doménu. Vygenerováno skripty\fonty-lokalne.mjs. */
@font-face{font-family:'Gilda Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonty/GildaDisplay-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Gilda Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonty/GildaDisplay-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonty/Mulish-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonty/Mulish-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ===================================================================
   Zina Petříková — Masáže a léčebné terapie, Říčany
   Sdílený stylopis návrhu.

   JEDEN návrh (rozhodnuto majitelem 2026-09-02): rozvržení „Proporce" —
   lišta fixně nahoře, nadpisy sekcí na střed s glyfem kruh-v-čtverci
   (homo ad quadratum), vzdušné karty se zlatým prstencem na hover.
   Nosný motiv je Leonardova kresba ze současného webu klientky.

   TŘI barevné motivy, všechny v teplé zlaté řadě — klientka výslovně
   odmítla fialovou, růžovou i černou:
     pergamen (VÝCHOZÍ) · slonovina (světlejší) · sepie (tmavá)
   =================================================================== */

/* ---------- společné tokeny ---------- */
:root{
  --maxw:1180px; --nav-h:72px; --ease:cubic-bezier(.2,.7,.2,1);
  --display:'Gilda Display',Georgia,'Times New Roman',serif;
  --body:'Mulish',system-ui,'Segoe UI',sans-serif;
  /* homo ad quadratum — kruh v čtverci, podpisový glyf webu */
  --glyf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='1' y='1' width='30' height='30' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Ccircle cx='16' cy='16' r='12.4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}

/* PERGAMEN — list pergamenu a stará zlatá (VÝCHOZÍ) */
:root,html[data-theme="pergamen"]{
  --bg:#faf4e6; --bg-2:#eee0c1; --text:#2f2418; --muted:#6b5943;
  --acc:#8a6110; --acc-2:#8a6110;
  --grad:linear-gradient(135deg,#8a6110,#8a6110);
  --acc-svit:#c39433;              /* jen pro linky a záře, nikdy pod text */
  --on-acc:#fdf8ec;
  --line:rgba(138,97,16,.20); --line-2:rgba(138,97,16,.46);
  --card:#fffdf6; --card-2:#f6ecd6;
  --ring:rgba(138,97,16,.85); --ring-soft:rgba(138,97,16,.10);
  --shadow:0 16px 44px rgba(88,62,14,.12);
  --papir:.42;                     /* síla pergamenové textury */
}
/* SLONOVINA — čistší a světlejší, táž zlatá */
html[data-theme="slonovina"]{
  --bg:#fefcf7; --bg-2:#f3ead6; --text:#231c12; --muted:#67583f;
  --acc:#8a6110; --acc-2:#8a6110;
  --grad:linear-gradient(135deg,#8a6110,#8a6110);
  --acc-svit:#c39433;
  --on-acc:#fffdf7;
  --line:rgba(138,97,16,.16); --line-2:rgba(138,97,16,.42);
  --card:#ffffff; --card-2:#faf3e4;
  --ring:rgba(138,97,16,.85); --ring-soft:rgba(138,97,16,.08);
  --shadow:0 16px 44px rgba(88,62,14,.10);
  --papir:.16;
}
/* SÉPIE — sépiový inkoust na tmavém listu */
html[data-theme="sepie"]{
  --bg:#20180f; --bg-2:#2f2418; --text:#efe3cd; --muted:#b5a288;
  --acc:#d9ab5c; --acc-2:#d9ab5c;
  --grad:linear-gradient(135deg,#d9ab5c,#d9ab5c);
  --acc-svit:#f0c983;
  --on-acc:#241b12;
  --line:rgba(217,171,92,.22); --line-2:rgba(217,171,92,.52);
  --card:#2f2418; --card-2:#392c1d;
  --ring:rgba(217,171,92,.85); --ring-soft:rgba(217,171,92,.12);
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --papir:.20;
}

/* ---------- základ ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Stabilita mobilního viewportu — Android WebView jinak při rychlém
   ťukání spustí double-tap zoom a stránka „ujíždí do stran". */
html,body{overflow-x:clip;touch-action:manipulation}
body{background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:1.02rem;line-height:1.74;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .5s var(--ease),color .5s var(--ease)}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ring-soft);color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
.sec{padding-block:clamp(3.4rem,7vw,6rem);position:relative}
.sec.alt{background:var(--bg-2);
  box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.14;
  letter-spacing:.005em}
/* Displejový serif sedí spodkem pod účařím — bez rezervy se velké
   nadpisy ořežou o spodní hranu line-boxu. */
h1{font-size:clamp(2.1rem,5.6vw,3.5rem);line-height:1.08;padding-bottom:.08em}
h2{font-size:clamp(1.68rem,3.6vw,2.5rem);padding-bottom:.06em}
h3{font-size:1.14rem;font-family:var(--body);font-weight:700;line-height:1.4}
p{color:var(--muted)}
b,strong{color:var(--text);font-weight:700}
h1 b,h2 b{color:var(--acc);font-weight:400}

.oci{display:inline-block;font-family:var(--body);font-size:.66rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc);margin-bottom:.7rem}

/* ---------- textura pergamenu ----------
   Jemné vlákno papíru pod celým webem. Nekreslí se obrázkem, aby to
   nestálo žádný požadavek navíc. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--papir);
  background:
    radial-gradient(1200px 700px at 12% -10%,rgba(160,120,40,.16),transparent 60%),
    radial-gradient(900px 620px at 92% 8%,rgba(150,110,35,.13),transparent 62%),
    repeating-linear-gradient(102deg,rgba(120,88,30,.045) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(6deg,rgba(120,88,30,.035) 0 1px,transparent 1px 7px);
  transition:opacity .5s var(--ease)}
body>*{position:relative;z-index:1}

/* ---------- tlačítka ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:15px 32px;border-radius:999px;border:1px solid transparent;
  font-family:var(--body);font-size:.82rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
    background .3s,color .3s,border-color .3s}
.btn-1{background:var(--grad);color:var(--on-acc);
  box-shadow:0 10px 26px var(--ring-soft)}
.btn-1:hover{transform:translateY(-3px);
  box-shadow:0 16px 38px var(--ring-soft),0 0 0 1px var(--ring)}
.btn-2{border-color:var(--line-2);color:var(--text);background:transparent}
.btn-2:hover{transform:translateY(-3px);border-color:var(--acc);
  color:var(--acc);box-shadow:0 12px 30px var(--ring-soft)}

/* ===================================================================
   LIŠTA — fixně nahoře
   =================================================================== */
.jeviste{position:relative;padding-top:var(--nav-h)}

.lista{position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.lista-in{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto;
  height:var(--nav-h);display:flex;align-items:center;gap:1rem}
.lista.pin{box-shadow:var(--shadow);
  background:color-mix(in srgb,var(--bg) 97%,transparent)}

.mk{display:flex;align-items:center;gap:.7rem;flex-shrink:0;min-height:44px}
.mk .znak{width:38px;height:38px;flex-shrink:0}
.mk span{display:grid;line-height:1.16}
.mk b{font-family:var(--display);font-weight:400;font-size:1.06rem;
  letter-spacing:.03em;color:var(--text)}
.mk small{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.mk:hover b{color:var(--acc)}

/* značka: kruh v čtverci (Leonardo, homo ad quadratum) */
.znak{display:block;color:var(--acc)}

.menu{display:none;margin-left:auto;gap:2px}
.menu a{position:relative;padding:10px 14px;border-radius:999px;
  font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);transition:color .3s,background .3s}
.menu a:hover,.menu a.zde{color:var(--acc);background:var(--ring-soft)}

.tel-btn{display:none;align-items:center;gap:.5rem;margin-left:.6rem;
  padding:12px 22px;border-radius:999px;background:var(--grad);
  color:var(--on-acc);font-size:.78rem;font-weight:700;letter-spacing:.06em;
  box-shadow:0 8px 20px var(--ring-soft);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tel-btn svg{width:15px;height:15px;fill:currentColor;stroke:none}
.tel-btn:hover{transform:translateY(-2px);
  box-shadow:0 14px 30px var(--ring-soft),0 0 0 1px var(--ring)}

.burger{margin-left:auto;width:46px;height:46px;display:grid;
  place-items:center;gap:5px;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--text);
  transition:transform .35s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Panel mobilního menu musí být NEPRŮHLEDNÝ — přes průsvitný by
   prosvítala kresba v úvodní sekci a menu by bylo nečitelné. */
.m-menu{position:absolute;left:0;right:0;top:var(--nav-h);background:var(--bg);
  display:none;flex-direction:column;padding:.4rem 1.2rem 1.1rem;
  border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.m-menu.open{display:flex}
/* <a> je inline — bez display:flex končí linka na konci textu
   a menu vypadá, jako by mu chybělo CSS. */
.m-menu a{display:flex;align-items:center;min-height:52px;
  border-bottom:1px solid var(--line);font-size:.94rem;font-weight:600;
  letter-spacing:.06em;color:var(--text);transition:color .25s,padding-left .25s}
.m-menu a:hover,.m-menu a.zde{color:var(--acc);padding-left:6px}
.m-menu .tel-radek{border-bottom:0;margin-top:.5rem;justify-content:center;
  background:var(--grad);color:var(--on-acc);border-radius:999px;font-weight:700}
.m-menu .tel-radek:hover{padding-left:0;color:var(--on-acc)}

/* ===================================================================
   ÚVODNÍ SEKCE — kruh v čtverci a Leonardova kresba
   =================================================================== */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-u{padding-block:clamp(2.4rem,5vw,3.8rem)}
.hero-u .hero-in{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto;
  display:grid;gap:clamp(2rem,4vw,3.2rem);align-items:center}
/* Jemný nádech světla za úvodní sekcí — aby nebyla plochá jako zbytek. */
.hero-u::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:radial-gradient(1000px 620px at 76% 34%,var(--ring-soft),transparent 66%)}
.hero-txt{position:relative;z-index:2}
.pr-titul{margin-bottom:1.1rem}
.pr-veta{font-size:1.08rem;max-width:34rem;margin-bottom:1.6rem}
.pr-cit{font-family:var(--display);font-size:1.18rem;line-height:1.5;
  color:var(--text);max-width:32rem;margin-bottom:1.9rem;
  padding-left:1.1rem;border-left:2px solid var(--acc)}
.pr-cta{display:flex;flex-direction:column;align-items:stretch;gap:.7rem}

/* MEDAILON — kresba i geometrie mají vlastní pole a NIC přes ně nejde.
   Dřív ležely pod celým textem a obojí bylo nečitelné. */
.medaile{position:relative;z-index:1;width:min(100%,400px);aspect-ratio:1;
  justify-self:center;display:grid;place-items:center}
.medaile::before{content:"";position:absolute;width:86%;aspect-ratio:1;
  border-radius:50%;background:var(--card);
  box-shadow:0 24px 60px var(--ring-soft)}
.med-geo{position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;color:var(--acc)}
.med-geo .kres{fill:none;stroke:currentColor;stroke-width:1.1;
  stroke-linecap:round;opacity:.6}
.med-geo .kres-s{stroke-width:.7;opacity:.32}
.medaile img{position:relative;width:64%;height:auto}
html[data-theme="sepie"] .medaile img{filter:brightness(3.3) saturate(1.25)}
.medaile figcaption{position:absolute;bottom:-.2rem;left:50%;
  transform:translateX(-50%);white-space:nowrap;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}

/* Pruh tří čísel přes celou šířku úvodní sekce */
.pr-cisla{grid-column:1/-1;display:grid;gap:0;
  border-top:1px solid var(--line-2);position:relative;z-index:2}
.pr-cisla div{display:flex;align-items:baseline;gap:.9rem;
  padding:1.05rem .4rem;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease),background .3s}
.pr-cisla div:hover{padding-left:1rem;background:var(--ring-soft)}
.pr-cisla b{flex:0 0 auto;font-family:var(--display);font-size:1.9rem;
  font-weight:400;color:var(--acc);line-height:1.05;padding-bottom:.08em;
  white-space:nowrap;min-width:4.9rem;text-align:right;
  font-variant-numeric:tabular-nums}
.pr-cisla span{flex:1 1 auto;min-width:0;text-align:left;
  font-size:.85rem;letter-spacing:.03em;color:var(--muted)}

/* ---------- menší úvodní pruh podstránky ---------- */
.hero-mensi{padding-top:clamp(2.4rem,5.5vw,4rem);
  padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line);
  text-align:center}
.hero-mensi h1{max-width:22ch;margin-inline:auto}
.uvod-veta{margin:1rem auto 0;font-size:1.04rem;max-width:44rem}
/* Kresba jako vodoznak úvodního pruhu podstránky */
.hero-mensi::after{content:"";position:absolute;right:-3%;top:-14%;
  width:min(320px,40vw);aspect-ratio:721/793;pointer-events:none;
  background:url(img/vitruvius-linka.png) center/contain no-repeat;
  opacity:.1}
html[data-theme="sepie"] .hero-mensi::after{opacity:.16;filter:brightness(3.4)}
@media(max-width:700px){.hero-mensi::after{display:none}}

/* ===================================================================
   HLAVIČKY SEKCÍ — na střed, s glyfem kruh-v-čtverci
   =================================================================== */
.sec-head{margin:0 auto clamp(1.8rem,3.5vw,2.8rem);max-width:44rem;
  text-align:center}
.sec-head p{margin-top:.7rem}
/* Glyf musí být JEDEN pseudoprvek: ::before a ::after jsou první a POSLEDNÍ
   dítě bloku, takže kolečko z ::after nesedne na čtverec, ale spadne
   až pod odstavec. Kresba jde přes masku, aby brala barvu z tokenu. */
.sec-head::before{content:"";display:block;
  width:30px;height:30px;margin:0 auto 1.2rem;
  background:var(--acc);opacity:.7;
  -webkit-mask:var(--glyf) center/contain no-repeat;
  mask:var(--glyf) center/contain no-repeat}

/* ---------- karty ---------- */
.mriz{display:grid;gap:1.1rem;text-align:left}
.karta{position:relative;background:var(--card);padding:1.7rem 1.6rem;
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 3px 14px rgba(88,62,14,.07);
  transition:transform .35s var(--ease),border-color .35s var(--ease),
    box-shadow .35s var(--ease),background .35s}
.karta h3{margin:.9rem 0 .5rem}
.karta p{font-size:.94rem}
.karta p+p{margin-top:.7rem}
.karta:hover{transform:translateY(-5px);border-color:var(--acc);
  box-shadow:0 0 0 1px var(--ring),0 22px 54px var(--ring-soft)}

.ico{width:46px;height:46px;display:grid;place-items:center;color:var(--acc);
  border:1px solid var(--line-2);border-radius:50%;padding:9px;
  transition:transform .4s var(--ease),border-color .4s}
.ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round}
.karta:hover .ico{transform:scale(1.08) rotate(-4deg);border-color:var(--acc)}

/* Karta, která je zároveň odkaz */
a.karta{display:block}
a.karta h3{margin-top:0}
a.karta:hover h3{color:var(--acc)}
.karta-vic{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);transition:gap .3s var(--ease)}
.karta-vic::after{content:"";width:20px;height:1px;background:var(--acc);
  transition:width .3s var(--ease)}
.karta:hover .karta-vic{gap:.8rem}
.karta:hover .karta-vic::after{width:32px}

/* ===================================================================
   PRACOVNA — dvě fotky vedle sebe (nikdy přes sebe) a pod nimi pruh
   praktických údajů o místě.
   =================================================================== */
.pracovna{display:grid;gap:1.1rem}
/* Vlastní řádek pro popisku: `height:100%` na obrázku ji dřív vytlačil
   z boxu s overflow:hidden a popiska se ořezala. Sloupce jsou různě
   široké, ale obě fotky se natáhnou na stejnou výšku (stretch), takže
   popisky sedí na jedné lince. */
.pr-foto{position:relative;margin:0;display:grid;grid-template-rows:1fr auto;
  border:1px solid var(--line);
  background:var(--card);border-radius:16px;overflow:hidden;
  box-shadow:0 6px 22px rgba(88,62,14,.08);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
    border-color .4s}
.pr-foto img{width:100%;height:100%;object-fit:cover;
  min-height:clamp(200px,25vw,340px)}
.pr-foto figcaption{padding:.7rem .95rem .85rem;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pr-foto:hover{transform:translateY(-5px);border-color:var(--acc);
  box-shadow:0 24px 54px var(--ring-soft)}

/* Pruh údajů o místě — stejný rytmus jako tři čísla v úvodní sekci. */
.pr-fakta{display:grid;gap:0;margin-top:1.8rem;
  border-top:1px solid var(--line-2)}
.pr-fakta div{display:grid;gap:.2rem;padding:1.05rem .4rem 1.05rem 1.9rem;
  position:relative;border-bottom:1px solid var(--line);text-align:left;
  transition:padding-left .3s var(--ease),background .3s}
.pr-fakta div::before{content:"";position:absolute;left:.3rem;top:1.6rem;
  width:9px;height:9px;border-radius:50%;border:1px solid var(--acc);
  background:radial-gradient(circle,var(--acc) 0 42%,transparent 43%)}
.pr-fakta div:hover{padding-left:2.4rem;background:var(--ring-soft)}
.pr-fakta b{font-size:.96rem;color:var(--text);line-height:1.4}
.pr-fakta span{font-size:.86rem;color:var(--muted);line-height:1.6}

.doplnit{font-size:.8rem;color:var(--muted);font-style:italic;
  border-left:2px solid var(--line-2);padding-left:.9rem;text-align:left}

/* ===================================================================
   DÁRKOVÝ POUKAZ — překreslený do webu, ostrý na jakémkoli displeji
   Předloha: Darkovy_poukaz.png ze současného webu (jen 253×119 px,
   na dnešní displeje nepoužitelně malý). Kresba je čistě CSS, takže
   drží ostrost v každé velikosti a nestojí žádný požadavek navíc.
   =================================================================== */
.poukaz-blok{display:grid;gap:1.8rem;align-items:center;text-align:left}
.poukaz{position:relative;aspect-ratio:2.13/1;overflow:hidden;
  container-type:inline-size;
  border-radius:6px;box-shadow:0 20px 54px rgba(120,80,10,.24);
  background:
    radial-gradient(circle at 18% 32%,rgba(255,238,170,.85) 0 6%,transparent 6.5%),
    radial-gradient(circle at 34% 68%,rgba(255,246,200,.7) 0 9%,transparent 9.5%),
    radial-gradient(circle at 62% 24%,rgba(255,240,180,.6) 0 12%,transparent 12.5%),
    radial-gradient(circle at 76% 70%,rgba(255,232,150,.55) 0 14%,transparent 14.5%),
    radial-gradient(circle at 8% 78%,rgba(255,244,190,.6) 0 8%,transparent 8.5%),
    radial-gradient(circle at 48% 46%,rgba(255,250,215,.5) 0 16%,transparent 16.5%),
    linear-gradient(118deg,#e8702a 0%,#f2a01f 22%,#f8c631 52%,#fadf72 78%,#fbe9a0 100%);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.poukaz:hover{transform:translateY(-6px) rotate(-.5deg);
  box-shadow:0 30px 70px rgba(120,80,10,.34)}
/* jiskry */
.poukaz::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(circle at 21% 30%,rgba(255,255,255,.95) 0 .7%,transparent 2.6%),
    radial-gradient(circle at 71% 42%,rgba(255,255,255,.9) 0 .6%,transparent 2.4%),
    radial-gradient(circle at 39% 72%,rgba(255,255,255,.85) 0 .5%,transparent 2%),
    radial-gradient(circle at 57% 84%,rgba(255,255,255,.8) 0 .45%,transparent 1.8%)}
/* perforované pruhy nahoře i dole — jako na předloze */
.pk-pas{position:absolute;left:0;right:0;height:4.5%;z-index:3;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.8) 0 3px,rgba(206,154,44,.55) 3px 6px)}
.pk-pas.h{top:0}
.pk-pas.d{bottom:0}
.pk-in{position:absolute;inset:0;padding:9% 6% 6%;z-index:2;
  display:grid;align-content:start;color:#4a2f06}
.pk-nadpis{font-family:var(--display);font-weight:400;
  font-size:clamp(1.2rem,7.4cqw,3rem);letter-spacing:.2em;
  line-height:1.12;padding-bottom:.08em;color:#4a2f06}
.pk-text{margin-top:3.5%;font-size:clamp(.54rem,2.4cqw,.98rem);
  line-height:1.5;max-width:55%;color:#63400a;font-style:italic}
.pk-radky{position:absolute;left:6%;right:42%;bottom:10%;z-index:2;
  display:flex;gap:7%;font-size:clamp(.46rem,1.9cqw,.76rem);
  letter-spacing:.03em;color:#63400a}
.pk-radky span{flex:1;border-bottom:1px solid rgba(99,64,10,.45);
  padding-bottom:2px;white-space:nowrap;overflow:hidden}
/* krémový výsek s kontakty vpravo dole */
.pk-adresa{position:absolute;right:0;bottom:0;width:39%;height:44%;z-index:2;
  background:#fdf3d8;border-top-left-radius:96% 86%;
  display:grid;align-content:end;justify-items:end;text-align:right;
  padding:0 6% 9% 0;font-size:clamp(.42rem,1.6cqw,.7rem);line-height:1.55;
  color:#7a5411}
.pk-adresa b{display:block;color:#5d3d07;font-weight:700}
/* Vitruviánský muž jako vodoznak vpravo nahoře — jako na předloze */
.pk-vitr{position:absolute;right:6%;top:7%;width:15%;opacity:.42;z-index:2;
  pointer-events:none}

.poukaz-txt h3{font-size:1.34rem;font-family:var(--display);font-weight:400;
  margin-bottom:.7rem}
.poukaz-txt ul{list-style:none;display:grid;gap:.65rem;margin:1.1rem 0 1.6rem}
.poukaz-txt li{display:flex;gap:.75rem;font-size:.94rem;color:var(--muted)}
.poukaz-txt li::before{content:"";flex-shrink:0;width:15px;height:15px;
  margin-top:.44rem;border:1px solid var(--acc);border-radius:50%;
  background:radial-gradient(circle,var(--acc) 0 42%,transparent 43%)}
.poukaz-cta{display:flex;flex-direction:column;align-items:stretch;gap:.7rem}

/* ===================================================================
   CENÍK
   =================================================================== */
.cen-skup{text-align:left}
.cen-skup h3{font-family:var(--display);font-weight:400;font-size:1.36rem;
  color:var(--acc);margin-bottom:1rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--line-2)}
.cen-skup h3+h3,.cen+h3{margin-top:2.2rem}
.cen{display:grid;grid-template-columns:1fr auto;gap:.15rem 1.2rem;
  align-items:baseline;padding:.85rem .4rem;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease),background .3s}
.cen:hover{padding-left:.9rem;background:var(--ring-soft)}
.cen-n{grid-column:1;grid-row:1;font-weight:600;color:var(--text);font-size:.98rem}
.cen-d{grid-column:1;grid-row:2;font-size:.82rem;color:var(--muted);letter-spacing:.03em}
.cen-c{grid-column:2;grid-row:1/3;align-self:center;justify-self:end;
  font-family:var(--display);
  font-size:1.24rem;font-weight:400;color:var(--acc);white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-bottom:.06em}
/* Poznámky leží POD oběma sloupci cen, ne uvnitř pravého — jinak pravý
   sloupec přeteče a ceníky se přestanou zarovnávat. */
.cen-pozn-blok{display:grid;gap:1.2rem;margin-top:2.6rem;text-align:left}
.cen-pozn{padding:1.3rem 1.4rem;background:var(--card);
  border:1px solid var(--line);border-left:2px solid var(--acc);
  border-radius:14px;font-size:.9rem}
.cen-pozn h3{font-size:1rem;margin-bottom:.4rem;font-family:var(--body);
  font-weight:700;color:var(--text)}

/* ===================================================================
   FAQ
   =================================================================== */
.faq{display:grid;gap:.7rem;max-width:48rem;margin-inline:auto;text-align:left}
.ot{background:var(--card);border:1px solid var(--line);overflow:hidden;
  border-radius:14px;
  transition:border-color .35s,box-shadow .35s var(--ease)}
.ot[open]{border-color:var(--acc);box-shadow:0 14px 34px var(--ring-soft)}
.ot summary{list-style:none;cursor:pointer;padding:1.05rem 3.4rem 1.05rem 1.3rem;
  position:relative;font-weight:700;font-size:.99rem;color:var(--text);
  transition:color .3s}
.ot summary::-webkit-details-marker{display:none}
.ot summary:hover{color:var(--acc)}
.ot summary::after{content:"";position:absolute;right:1.2rem;top:50%;
  width:22px;height:22px;margin-top:-11px;border-radius:50%;
  border:1px solid var(--line-2);
  background:
    linear-gradient(var(--acc),var(--acc)) center/9px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) center/1px 9px no-repeat;
  transition:transform .35s var(--ease),border-color .3s}
.ot[open] summary::after{transform:rotate(135deg);border-color:var(--acc)}
.ot .odp{padding:0 1.3rem 1.25rem;font-size:.95rem;color:var(--muted)}

/* ===================================================================
   KONTAKT + FORMULÁŘ
   =================================================================== */
.kont{display:grid;gap:1.8rem;text-align:left}
.ku{display:grid;gap:.15rem;padding:1rem .4rem;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease),background .3s}
.ku:hover{padding-left:.9rem;background:var(--ring-soft)}
.ku dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.ku dd{font-size:1.02rem;color:var(--text);font-weight:600}
.ku dd a:hover{color:var(--acc)}
.mapa{border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.mapa iframe{width:100%;height:290px;border:0;filter:sepia(.16) saturate(1.05)}

.form{display:grid;gap:1rem}
.pole{display:grid;gap:.4rem}
.pole label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
/* Písmo pod 16 px nutí iOS Safari zoomnout při kliknutí do pole
   — a zpátky už nezoomne. */
.pole input,.pole textarea{font-family:var(--body);font-size:16px;
  padding:13px 15px;background:var(--card);color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  transition:border-color .3s,box-shadow .3s}
.pole textarea{min-height:130px;resize:vertical}
.pole input:focus,.pole textarea:focus{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--ring-soft)}
.souhlas{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;
  color:var(--muted);cursor:pointer}
.souhlas input{width:19px;height:19px;flex-shrink:0;margin-top:.22rem;
  accent-color:var(--acc)}
.souhlas a{color:var(--acc);text-decoration:underline}

/* ===================================================================
   MŮJ PŘÍBĚH (podstránka)
   =================================================================== */
.pribeh-blok{display:grid;gap:2.4rem;align-items:start;text-align:left}
.pribeh-text{max-width:40rem}
.pribeh-text h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2.2rem 0 .8rem}
.pribeh-text h2:first-child{margin-top:0}
.pribeh-text p{margin-bottom:1rem}
.cit-velky{font-family:var(--display);font-size:clamp(1.14rem,2.2vw,1.42rem);
  line-height:1.48;color:var(--text);border-left:2px solid var(--acc);
  padding:.2rem 0 .2rem 1.2rem;margin:1.6rem 0}

.pribeh-bok{display:grid;gap:1.2rem;position:sticky;
  top:calc(var(--nav-h) + 1.2rem)}
.portret{margin:0;border:1px solid var(--line-2);background:var(--card);
  padding:10px;border-radius:16px;box-shadow:var(--shadow);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.portret:hover{transform:translateY(-4px);
  box-shadow:0 22px 50px var(--ring-soft)}
.portret img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  object-position:center 30%;border-radius:10px}
.portret figcaption{padding:.8rem .3rem .1rem;font-family:var(--display);
  font-size:1.06rem;color:var(--acc);line-height:1.3}
.portret figcaption span{display:block;font-family:var(--body);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-top:.25rem}
.bok-fakta{display:grid;border-top:1px solid var(--line)}
.bok-fakta div{display:flex;align-items:baseline;gap:.8rem;padding:.7rem .3rem;
  border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease),background .3s}
.bok-fakta div:hover{padding-left:.8rem;background:var(--ring-soft)}
.bok-fakta b{font-family:var(--display);font-size:1.32rem;font-weight:400;
  color:var(--acc);min-width:4.2rem;padding-bottom:.06em;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bok-fakta span{font-size:.82rem;color:var(--muted);line-height:1.45}

/* ---------- patička ---------- */
.pata{border-top:1px solid var(--line);background:var(--bg-2);
  padding-block:2.8rem 1.8rem;text-align:left}
.pata-in{display:grid;gap:1.8rem}
.pata p{font-size:.9rem}
.pata h3{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:.8rem;font-family:var(--body)}
.pata-menu{display:grid;gap:.15rem}
/* Dotykový cíl aspoň 40 px — samotný řádek textu měl 24. */
.pata-menu a{font-size:.88rem;color:var(--muted);
  display:flex;align-items:center;min-height:40px;
  transition:color .25s,padding-left .25s}
.pata-menu a:hover{color:var(--acc);padding-left:5px}
.pata-spod{margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--line);
  display:grid;gap:.5rem;font-size:.8rem;color:var(--muted)}
.pata-spod a{color:var(--acc);display:inline-block;
  padding:10px 2px;margin:-10px -2px}
.pata-spod a:hover{text-decoration:underline}

/* ---------- postupné nabíhání ---------- */
.nabeh{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.nabeh.videt{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;
    transition-duration:.01ms!important}
  .nabeh{opacity:1;transform:none}
  .geo .kres{stroke-dashoffset:0!important}
}

/* ===================================================================
   OD 620 px
   =================================================================== */
@media(min-width:620px){
  .pr-cta{flex-direction:row}
  .pr-fakta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-fakta div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .pr-fakta div:nth-child(2n){border-left:1px solid var(--line);
    padding-left:2.5rem}
  .pr-fakta div:nth-child(2n)::before{left:1.1rem}
  .poukaz-cta{flex-direction:row}
  .mriz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pata-in{grid-template-columns:1.5fr 1fr 1fr}
  .pata-spod{grid-template-columns:1fr auto;align-items:center}
  .cen-pozn-blok{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===================================================================
   OD 940 px — počítač
   =================================================================== */
@media(min-width:940px){
  .menu{display:flex}
  .tel-btn{display:inline-flex}
  .burger,.m-menu{display:none!important}

  .hero-u .hero-in{grid-template-columns:1.04fr .96fr;
    row-gap:clamp(2.2rem,4vw,3.4rem)}
  .medaile{justify-self:end}
  .pr-cisla{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:0}
  .pr-cisla div{border-bottom:0;padding:1.2rem 1.4rem 1.2rem 0;align-items:baseline}
  .pr-cisla div+div{border-left:1px solid var(--line);padding-left:1.4rem}
  .pr-cisla b{min-width:0}
  .pr-cisla div{flex-direction:column;gap:.25rem;align-items:flex-start}
  .pr-cisla b{text-align:left}
  .mriz-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .poukaz-blok{grid-template-columns:1.15fr .85fr;gap:2.8rem}
  .kont{grid-template-columns:1fr 1fr;gap:2.8rem;align-items:start}
  .mapa iframe{height:340px}
  .cen-dva{display:grid;grid-template-columns:1fr 1fr;gap:2.8rem;
    align-items:start}
  .pribeh-blok{grid-template-columns:minmax(0,1fr) 300px;gap:3.2rem}
  .pracovna{grid-template-columns:1.32fr 1fr;gap:1.4rem}
  .pr-fakta{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));
    border-bottom:0;margin-top:2.4rem}
  .pr-fakta div{border-bottom:0;padding:1.2rem 1.3rem 1.2rem 1.7rem}
  .pr-fakta div+div{border-left:1px solid var(--line);padding-left:2.5rem}
  .pr-fakta div+div::before{left:1.1rem}
}

/* ===================================================================
   DO 939 px — mobil a tablet
   =================================================================== */
@media(max-width:939px){
  /* Když se schová telefon v hlavičce, zmizí i margin-left:auto na něm
     a burger by sedl doprostřed vedle jména. */
  .burger{margin-left:auto}
  /* Kresba patří na 390 px NAD text — pod ním by z ní vykukoval
     na první obrazovce jen okraj. Zmenšená tak, aby nadpis zůstal vidět. */
  .medaile{order:-1;width:min(66%,250px);margin-bottom:-.6rem}
  .medaile figcaption{font-size:.56rem}
}
@media(max-width:520px){
  .pk-text{max-width:76%}
  .pk-adresa{width:46%;height:48%}
  .pk-radky{right:48%}
}

/* ===================================================================
   VRSTVA „OSLNIT" (2026-10-05) — revize designu na pokyn majitele.
   Identita zůstává: zlatá řada, Gilda Display + Mulish, Leonardo.
   Mění se atmosféra (papír, světlo, geometrie v pozadí), úvodní
   moment (kresba se dokreslí, prstenec se otáčí) a místa, kde web
   prozrazoval malé podklady (fotky 304 px, portrét 161 px).
   =================================================================== */

/* ---------- zrno papíru a konstrukční geometrie ----------
   Pruhy (repeating-linear-gradient) působily jako milimetrový papír.
   Skutečné zrno dělá SVG šum — jeden data URI, žádný požadavek navíc. */
:root,html[data-theme="pergamen"],html[data-theme="slonovina"]{
  --zrno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --geo-pozadi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='%238a6110' stroke-width='1.1'%3E%3Crect x='120' y='120' width='760' height='760'/%3E%3Ccircle cx='500' cy='500' r='380'/%3E%3Ccircle cx='500' cy='500' r='470' stroke-dasharray='2 9'/%3E%3Cpath d='M500 20v960M20 500h960M120 120l760 760M880 120L120 880' stroke-width='.6'/%3E%3Cpath d='M120 880A760 760 0 0 1 880 120' stroke-width='.8'/%3E%3Cpath d='M120 120A760 760 0 0 0 880 880' stroke-width='.8'/%3E%3C/svg%3E");
  --geo-sila:.075;
}
html[data-theme="sepie"]{
  --zrno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .5 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --geo-pozadi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='%23d9ab5c' stroke-width='1.1'%3E%3Crect x='120' y='120' width='760' height='760'/%3E%3Ccircle cx='500' cy='500' r='380'/%3E%3Ccircle cx='500' cy='500' r='470' stroke-dasharray='2 9'/%3E%3Cpath d='M500 20v960M20 500h960M120 120l760 760M880 120L120 880' stroke-width='.6'/%3E%3Cpath d='M120 880A760 760 0 0 1 880 120' stroke-width='.8'/%3E%3Cpath d='M120 120A760 760 0 0 0 880 880' stroke-width='.8'/%3E%3C/svg%3E");
  --geo-sila:.06;
}
:root,html[data-theme="pergamen"]{--papir:.5}
html[data-theme="slonovina"]{--papir:.28}
html[data-theme="sepie"]{--papir:.55}

body::before{
  background:
    radial-gradient(1100px 760px at 8% -8%,rgba(214,168,72,.20),transparent 62%),
    radial-gradient(900px 700px at 100% 18%,rgba(196,150,58,.15),transparent 64%),
    radial-gradient(1200px 900px at 50% 118%,rgba(150,104,28,.13),transparent 60%),
    var(--zrno);
  background-size:auto,auto,auto,220px 220px}
html[data-theme="sepie"] body::before{
  background:
    radial-gradient(1000px 720px at 78% 6%,rgba(230,170,80,.16),transparent 62%),
    radial-gradient(900px 700px at 4% 60%,rgba(200,140,60,.10),transparent 64%),
    var(--zrno);
  background-size:auto,auto,220px 220px}
/* Leonardova konstrukce — kruh, čtverec, úhlopříčky a oblouky — stojí
   za celým webem jako vodoznak, ne jako dekorace v obsahu. */
body::after{content:"";position:fixed;z-index:0;pointer-events:none;
  width:min(1100px,120vw);aspect-ratio:1;right:-26vw;top:50%;
  transform:translateY(-50%);background:var(--geo-pozadi) center/contain no-repeat;
  opacity:var(--geo-sila)}
@media(max-width:939px){body::after{right:-60vw;width:150vw}}

/* ---------- úvodní sekce: velký moment ---------- */
@media(min-width:940px){
  .hero-u{min-height:calc(100svh - var(--nav-h));display:grid;align-content:center;
    padding-block:clamp(2.6rem,5vw,4.4rem)}
  .hero-u .hero-in{grid-template-columns:1.02fr .98fr}
  .medaile{width:min(100%,500px)}
}
.hero-u::before{background:
  radial-gradient(640px 520px at 76% 40%,var(--ring-soft),transparent 70%),
  radial-gradient(420px 420px at 76% 40%,color-mix(in srgb,var(--acc-svit) 16%,transparent),transparent 72%)}
.pr-titul{font-size:clamp(1.95rem,4vw,2.95rem);letter-spacing:-.005em;line-height:1.04}
/* Na jeden řádek jen tam, kde se vejde — na 320 px by přetekl displej. */
@media(min-width:420px){.pr-titul b{white-space:nowrap}}
/* Kresba má vlastní papírový podklad — na světlých motivech se do desky
   medailonu prolne, takže v kruhu nezůstane obdélník. */
html:not([data-theme="sepie"]) .medaile img{mix-blend-mode:multiply}
.medaile figcaption{bottom:-1.9rem}

/* medailon: deska se světlem, prstenec, kresba */
.medaile::before{width:78%;
  background:radial-gradient(circle at 50% 38%,var(--card) 0 55%,
    color-mix(in srgb,var(--card) 82%,var(--acc-svit)) 100%);
  box-shadow:0 0 0 1px var(--line),0 40px 90px var(--ring-soft),
    0 0 120px color-mix(in srgb,var(--acc-svit) 22%,transparent)}
.medaile img{width:58%}
.med-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  color:var(--acc);transform-origin:50% 50%;animation:prstenec 140s linear infinite}
.med-ring circle{fill:none;stroke:currentColor}
.med-ring .r-tenka{stroke-width:.6;opacity:.35}
.med-ring .r-dilky{stroke-width:6;stroke-dasharray:1 8.948;opacity:.42}
.med-ring .r-hlavni{stroke-width:14;stroke-dasharray:1.4 95.99;opacity:.6}
.med-ring .r-bod{fill:var(--acc-svit);stroke:none}
@keyframes prstenec{to{transform:rotate(360deg)}}

/* Jediná orchestrovaná chvíle webu: geometrie se dokreslí zlatou linkou,
   pak se objeví kresba a text. Nic dalšího se samo nehýbe. */
.med-geo .kres{stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:dokresli 2.4s var(--ease) .2s forwards}
.med-geo .kres-s{animation-delay:.9s}
@keyframes dokresli{to{stroke-dashoffset:0}}
.medaile img,.medaile figcaption{opacity:0;animation:vynor 1.4s var(--ease) 1.1s forwards}
@keyframes vynor{to{opacity:1}}
.hero-txt>*{opacity:0;transform:translateY(14px);
  animation:nastup .9s var(--ease) forwards}
.hero-txt>:nth-child(1){animation-delay:.15s}
.hero-txt>:nth-child(2){animation-delay:.3s}
.hero-txt>:nth-child(3){animation-delay:.5s}
.hero-txt>:nth-child(4){animation-delay:.65s}
.hero-txt>:nth-child(5){animation-delay:.8s}
@keyframes nastup{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .med-geo .kres{stroke-dashoffset:0}
  .medaile img,.medaile figcaption,.hero-txt>*{opacity:1;transform:none}
}

/* ---------- přechody sekcí: zlatá linka s kosočtvercem místo rovné čáry ---------- */
.sec.alt{box-shadow:none;
  background:
    radial-gradient(900px 420px at 50% 0,color-mix(in srgb,var(--acc-svit) 9%,transparent),transparent 70%),
    var(--bg-2)}
.sec.alt::before{content:"";position:absolute;left:50%;top:0;
  width:min(560px,80vw);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line-2) 30%,var(--line-2) 70%,transparent)}
.sec.alt::after{content:"";position:absolute;left:50%;top:0;width:12px;height:12px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--bg);
  border:1px solid var(--acc);opacity:.85}

/* ---------- karty: list papíru se zlatou hranou ---------- */
.karta{border-radius:22px;
  background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 88%,var(--bg-2)));
  box-shadow:0 2px 6px rgba(88,62,14,.05),0 18px 40px rgba(88,62,14,.07)}
.karta::before{content:"";position:absolute;left:1.6rem;right:1.6rem;top:0;height:2px;
  border-radius:2px;background:linear-gradient(90deg,transparent,var(--acc-svit),transparent);
  opacity:.55;transition:opacity .35s,left .35s var(--ease),right .35s var(--ease)}
.karta:hover::before{opacity:1;left:.8rem;right:.8rem}
html[data-theme="sepie"] .karta{box-shadow:0 18px 44px rgba(0,0,0,.35)}
.ico{background:radial-gradient(circle,var(--ring-soft),transparent 70%)}

/* ---------- pracovna: fotky jako tisky položené na papíře ----------
   Podklady mají 304 a 261 px. Roztažené přes půl obrazovky byly rozmazané,
   proto se ukazují menší, s paspartou — velikost odpovídá tomu, co unesou. */
.pr-foto{padding:12px 12px 0;border-radius:6px;background:var(--card);
  border:1px solid var(--line);box-shadow:0 2px 4px rgba(88,62,14,.06),
  0 24px 50px rgba(88,62,14,.13)}
.pr-foto img{border-radius:2px;min-height:0;height:auto;aspect-ratio:3/2;
  filter:saturate(.92) sepia(.08)}
.pr-foto figcaption{text-align:center;font-family:var(--display);
  text-transform:none;letter-spacing:.02em;font-size:.95rem;color:var(--muted);
  padding:.75rem .5rem .85rem}
@media(min-width:940px){
  /* Fotky v prostředních dvou sloupcích, pruh údajů pod nimi přes celou šířku. */
  .pracovna{grid-template-columns:minmax(0,1fr) minmax(0,370px) minmax(0,370px) minmax(0,1fr);
    column-gap:3rem;align-items:start}
  .pracovna .pr-foto:nth-child(1){grid-column:2}
  .pracovna .pr-foto:nth-child(2){grid-column:3}
  .pracovna .pr-foto:nth-child(1){transform:rotate(-1.6deg)}
  .pracovna .pr-foto:nth-child(2){transform:rotate(1.3deg);margin-top:2.2rem}
  .pracovna .pr-foto:hover{transform:rotate(0) translateY(-6px)}
}
@media(max-width:939px){.pr-foto{max-width:400px;justify-self:center;width:100%}}

/* ---------- portrét: medailon místo velkého čtverce (zdroj 161 px) ---------- */
.portret{text-align:center;padding:1.6rem 1.2rem 1.2rem;border-radius:22px;
  background:radial-gradient(circle at 50% 30%,var(--card) 40%,var(--card-2))}
.portret img{width:168px;height:168px;margin:0 auto;border-radius:50%;
  aspect-ratio:1;box-shadow:0 0 0 6px var(--card),0 0 0 7px var(--acc),
  0 18px 40px var(--ring-soft)}
.portret figcaption{padding-top:1.1rem}

/* ---------- úvodní pruh podstránek ---------- */
.hero-mensi{background:
  radial-gradient(700px 300px at 50% 0,color-mix(in srgb,var(--acc-svit) 12%,transparent),transparent 72%)}
.hero-mensi h1{font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.04}
.hero-mensi::after{opacity:.13;width:min(380px,40vw)}

/* ---------- ceník: skupiny na vlastním listu ---------- */
.cen-skup{background:color-mix(in srgb,var(--card) 70%,transparent);
  border:1px solid var(--line);border-radius:22px;padding:1.6rem 1.4rem 1rem}

/* ---------- patička se zlatou kresbou ---------- */
.pata{position:relative;overflow:hidden}
.pata::before{content:"";position:absolute;right:-60px;bottom:-110px;width:440px;
  aspect-ratio:721/793;background:url(img/vitruvius-linka.png) center/contain no-repeat;
  opacity:.07;pointer-events:none}
html[data-theme="sepie"] .pata::before{filter:brightness(3.4);opacity:.09}
.pata .wrap{position:relative}

@media(max-width:939px){
  .medaile{margin-bottom:1.6rem}
  .medaile figcaption{bottom:-1.5rem}
  .hero-u .oci{letter-spacing:.14em}
}

/* ===================================================================
   VRSTVA „SLUNCE" (2026-10-05) — podle zprávy klientky:
   „teplá žlutá sluneční barva" z jejího dárkového poukazu, poukaz
   blízko začátku webu, vlnka z vizitek a výraznější Leonardo.
   Barvy poukazu (změřeno z jejího PDF): #ee9d27 · #f6ba26 · #fad757
   · #fcf8c7. Žlutá je PLOCHA, nikdy barva textu — text zůstává tmavě
   hnědý, odkazy a tlačítka jantarově hnědé (kontrast 8:1 na krémové).
   =================================================================== */
:root,html[data-theme="slunce"]{
  --bg:#fef8e1; --bg-2:#fdeeb8; --text:#36250a; --muted:#694d1d;
  --acc:#8f5200; --acc-2:#8f5200;
  --grad:linear-gradient(135deg,#8f5200,#8f5200);
  --acc-svit:#f5b622;
  --on-acc:#fffaf0;
  --line:rgba(143,82,0,.18); --line-2:rgba(143,82,0,.42);
  --card:#fffdf4; --card-2:#fff3cc;
  --ring:rgba(143,82,0,.85); --ring-soft:rgba(240,168,30,.17);
  --shadow:0 16px 44px rgba(150,95,10,.14);
  --papir:.42; --geo-sila:.07;
}
:root{
  /* sluneční plocha poukazu: oranžová → žlutá → krémová */
  --slunce:linear-gradient(118deg,#ee9d27 0%,#f4ae24 18%,#f7c42f 42%,#fad757 66%,#fcecaa 88%,#fdf6d2 100%);
  /* bubliny světla jako na poukazu */
  --bokeh:
    radial-gradient(circle at 12% 30%,rgba(255,250,215,.55) 0 4.5%,transparent 5%),
    radial-gradient(circle at 26% 78%,rgba(255,246,200,.42) 0 8%,transparent 8.5%),
    radial-gradient(circle at 44% 18%,rgba(255,244,190,.36) 0 11%,transparent 11.5%),
    radial-gradient(circle at 63% 64%,rgba(255,250,220,.30) 0 13%,transparent 13.5%),
    radial-gradient(circle at 84% 22%,rgba(255,248,210,.40) 0 9%,transparent 9.5%),
    radial-gradient(circle at 92% 82%,rgba(255,250,220,.32) 0 7%,transparent 7.5%),
    radial-gradient(circle at 34% 46%,rgba(255,255,255,.9) 0 .25%,transparent .9%),
    radial-gradient(circle at 71% 34%,rgba(255,255,255,.85) 0 .22%,transparent .8%),
    radial-gradient(circle at 18% 64%,rgba(255,255,255,.8) 0 .2%,transparent .7%);
  --vlna-maska:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v22C1180 0 980 62 720 50S240 4 0 34z'/%3E%3C/svg%3E");
}

/* ---------- menu přes celou šířku stránky ---------- */
.lista-in{width:calc(100% - clamp(2rem,5vw,5.5rem));max-width:none}

/* ---------- Leonardo v pozadí: kresba i konstrukce ---------- */
body::after{background:url(img/vitruvius-linka.png) 50% 46%/58% auto no-repeat,
  var(--geo-pozadi) center/contain no-repeat;opacity:.085}
html[data-theme="sepie"] body::after{filter:brightness(3.2);opacity:.07}

/* ---------- úvod ve slunci ---------- */
html:not([data-theme="sepie"]):not([data-theme="slonovina"]) .hero{
  --acc:#7a3a00; --muted:#4d3510; --text:#2e1d05;
  --line:rgba(90,50,0,.22); --line-2:rgba(90,50,0,.38);
  --ring-soft:rgba(255,250,225,.45);
  background:var(--bokeh),var(--slunce)}
html:not([data-theme="sepie"]):not([data-theme="slonovina"]) .hero .btn-1{
  background:#5a3203;color:#fff8e6;box-shadow:0 12px 30px rgba(110,60,0,.28)}
html:not([data-theme="sepie"]):not([data-theme="slonovina"]) .hero .btn-2{
  border-color:rgba(70,40,0,.45);background:rgba(255,252,235,.35)}
html:not([data-theme="sepie"]):not([data-theme="slonovina"]) .hero .pr-cisla div:hover{
  background:rgba(255,252,235,.35)}
/* Leonardův rukopis v pozadí úvodu — jako na jejím současném webu */
.hero-u::after{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-4%;top:6%;width:min(560px,48vw);aspect-ratio:721/793;
  background:url(img/vitruvius.jpg) center/contain no-repeat;
  mix-blend-mode:multiply;opacity:.13;transform:rotate(-6deg)}
html[data-theme="sepie"] .hero-u::after{display:none}
.hero-u{padding-bottom:clamp(4.5rem,9vw,8rem)}

/* Leonardo výrazněji: větší deska, plná kresba */
@media(min-width:940px){.medaile{width:min(100%,560px)}}
.medaile::before{width:82%}
.medaile img{width:66%}
html:not([data-theme="sepie"]):not([data-theme="slonovina"]) .medaile::before{
  background:radial-gradient(circle at 50% 40%,#fffdf2 0 58%,#fdf0c4 100%);
  box-shadow:0 0 0 10px rgba(255,251,230,.45),0 0 0 11px rgba(122,58,0,.25),
    0 40px 90px rgba(150,80,0,.25)}
html:not([data-theme="sepie"]):not([data-theme="slonovina"]) .med-ring{color:#7a3a00}

/* ---------- vlnka ---------- */
.vlna{position:absolute;left:0;right:0;bottom:-1px;width:100%;
  height:clamp(46px,8vw,120px);z-index:3;pointer-events:none}
.vlna path{fill:var(--bg)}
.vlna .vlna-linka{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2;
  vector-effect:non-scaling-stroke}
html[data-theme="sepie"] .vlna .vlna-linka{stroke:var(--line-2)}
/* sekce na druhém podkladu začíná vlnou, ne rovnou čarou */
.sec.alt::before{left:0;right:0;width:auto;transform:none;top:-1px;
  height:clamp(28px,5vw,64px);background:var(--bg);
  -webkit-mask:var(--vlna-maska) top/100% 100% no-repeat;
  mask:var(--vlna-maska) top/100% 100% no-repeat}
.sec.alt::after{display:none}
.sec.alt{padding-top:clamp(4.6rem,9vw,7.6rem)}

/* úvodní pruh podstránek: slunce a vlnka */
html:not([data-theme="sepie"]):not([data-theme="slonovina"]) .hero-mensi{border-bottom:0}
.hero-mensi{padding-bottom:clamp(4rem,8vw,6.4rem)}
/* Vlnou se úvod OŘÍZNE (maska), nekreslí se přes něj plná barva — plná
   plocha se nepotkala s průsvitnou texturou pozadí a pod vlnou zůstával
   rovný pruh. Maska = obdélník nad vlnou + tvar vlny u spodní hrany. */
:root{--vlna-uvod:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V30C1180 0 970 36 720 78S240 118 0 70Z'/%3E%3C/svg%3E")}
.hero-mensi{--vh:clamp(30px,5vw,70px);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--vh) + 1px) no-repeat,
    var(--vlna-maska) bottom/100% var(--vh) no-repeat;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--vh) + 1px) no-repeat,
    var(--vlna-maska) bottom/100% var(--vh) no-repeat}
.hero-u{--vh:clamp(46px,8vw,120px);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--vh) + 1px) no-repeat,
    var(--vlna-uvod) bottom/100% var(--vh) no-repeat;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--vh) + 1px) no-repeat,
    var(--vlna-uvod) bottom/100% var(--vh) no-repeat}
.vlna path:first-child{display:none}
html:not([data-theme="sepie"]):not([data-theme="slonovina"]) .hero-mensi::after{
  opacity:.2;mix-blend-mode:multiply}

/* ---------- poukaz hned pod úvodem ---------- */
.poukaz-pas{position:relative;z-index:2;padding-block:clamp(2.4rem,5vw,4rem) clamp(1rem,3vw,2rem)}
.poukaz-pas-in{display:grid;gap:2rem;align-items:center}
.poukaz-karta{display:block;border-radius:6px;overflow:hidden;
  box-shadow:0 2px 4px rgba(120,70,0,.12),0 30px 70px rgba(200,120,10,.32);
  transform:rotate(-1.8deg);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.poukaz-karta img{width:100%;height:auto}
.poukaz-karta:hover{transform:rotate(0) translateY(-6px) scale(1.01);
  box-shadow:0 2px 4px rgba(120,70,0,.12),0 40px 90px rgba(220,140,10,.42)}
.poukaz-pas-txt h2{margin-bottom:.8rem}
.poukaz-pas-txt p{margin-bottom:1.4rem;max-width:30rem}
@media(min-width:940px){.poukaz-pas-in{grid-template-columns:1.15fr .85fr;gap:3.6rem}}

/* ---------- pracovna: velká kompozice dvou fotek ---------- */
.prac-kompo{position:relative;max-width:1000px;margin:0 auto;
  padding-bottom:calc(14% + 2rem)}
.prac-kompo figure{margin:0;position:relative;background:var(--card);
  padding:12px 12px 0;border-radius:6px;border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(120,70,0,.08),0 34px 80px rgba(150,90,10,.20)}
.prac-kompo img{width:100%;height:auto;border-radius:2px;
  filter:saturate(1.05) contrast(1.03)}
.prac-kompo figcaption{font-family:var(--display);font-size:1rem;color:var(--muted);
  text-align:center;padding:.7rem .5rem .8rem}
.prac-hlavni{width:68%;transform:rotate(-1.2deg)}
.prac-vedlejsi{position:absolute!important;right:0;top:9%;width:42%;
  transform:rotate(2.2deg);z-index:2}
.prac-treti{position:absolute!important;right:6%;bottom:0;width:40%;
  transform:rotate(-1.8deg);z-index:2}
.prac-kompo figure{transition:transform .5s var(--ease)}
.prac-kompo figure:hover{transform:rotate(0) translateY(-6px);z-index:3}
.prac-razitko{position:absolute;right:6%;top:-2.2rem;width:clamp(86px,11vw,124px);
  color:var(--acc);z-index:3;animation:prstenec 60s linear infinite}
.prac-razitko svg{width:100%;height:auto;overflow:visible}
.prac-razitko text{font-family:var(--body);font-size:9.4px;font-weight:700;
  letter-spacing:.24em;fill:currentColor}
@media(max-width:620px){
  /* Na úzkém displeji by druhá fotka zakryla popisek první — pod sebe. */
  .prac-hlavni{width:92%}
  .prac-vedlejsi{position:relative!important;top:auto;right:auto;width:80%;margin:.6rem 0 0 auto}
  .prac-treti{position:relative!important;right:auto;bottom:auto;width:80%;margin:.6rem auto 0 0}
  .prac-kompo{padding-bottom:1rem}
  .prac-razitko{top:-1.6rem;right:2%}
}

/* ---------- dlaždice s údaji o místě ---------- */
.prac-dlazdice{display:grid;gap:1rem;margin-top:clamp(1.6rem,4vw,2.6rem)}
.dlazdice{display:grid;gap:.45rem;align-content:start;padding:1.4rem 1.3rem;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 10px 26px rgba(150,95,10,.07);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.dlazdice:hover{transform:translateY(-4px);border-color:var(--acc);
  box-shadow:0 22px 46px rgba(200,130,10,.18)}
.dlazdice .ico{margin-bottom:.4rem}
.dlazdice b{font-size:1rem;color:var(--text);line-height:1.35}
.dlazdice span:not(.ico){font-size:.88rem;color:var(--muted);line-height:1.6}
.dlazdice a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.doplnit-v{font-style:italic}
@media(min-width:620px){.prac-dlazdice{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.prac-dlazdice{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ikony: sluneční kolečko */
html:not([data-theme="sepie"]) .ico{background:radial-gradient(circle at 35% 30%,#fdf0b6,#f7c84a);
  border-color:rgba(143,82,0,.35);color:#6b3a00}

/* ---------- karty „S čím za mnou lidé chodí": světlo pod kurzorem ---------- */
.karta-svetlo{overflow:hidden;padding:2rem 1.8rem 1.8rem;
  --mx:50%;--my:0%}
.karta-svetlo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my),
    rgba(250,206,70,.38),rgba(250,215,87,.10) 40%,transparent 65%);
  opacity:0;transition:opacity .4s var(--ease)}
.karta-svetlo:hover::after{opacity:1}
.karta-svetlo>*{position:relative;z-index:1}
.karta-svetlo .ico{width:58px;height:58px;padding:13px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.karta-svetlo:hover .ico{transform:scale(1.12) rotate(-6deg);
  box-shadow:0 0 0 8px rgba(250,215,87,.28),0 0 34px rgba(245,182,34,.55)}
.karta-svetlo:hover{transform:translateY(-8px);border-color:var(--acc-svit);
  box-shadow:0 0 0 1px var(--acc-svit),0 30px 70px rgba(230,150,10,.28)}
.karta-svetlo h3{font-family:var(--display);font-weight:400;font-size:1.45rem;
  line-height:1.2;margin:1.1rem 0 .6rem}
.sec.alt#potize{background:
  radial-gradient(900px 500px at 50% 10%,rgba(250,215,87,.35),transparent 70%),
  var(--bg-2)}

/* ===================================================================
   TERAPIE — seznam metod a detail
   =================================================================== */
.met-filtr{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.met-f{font-family:var(--body);font-size:.86rem;font-weight:700;letter-spacing:.02em;
  padding:.7rem 1.2rem;border-radius:999px;border:1px solid var(--line-2);
  background:var(--card);color:var(--text);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.met-f:hover{border-color:var(--acc);transform:translateY(-2px)}
.met-f.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}

.met{display:grid;gap:.5rem;text-align:left}
.met-sk{font-family:var(--display);font-size:1.15rem;color:var(--acc);
  padding:1rem .2rem .3rem}
.met-sk:first-child{padding-top:0}
.met[data-filtr="uleva"] #lecebne,.met[data-filtr="bolest"] #relaxacni{display:none}
.met-b{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;
  padding:.75rem .9rem;border-radius:16px;border:1px solid transparent;
  background:transparent;color:var(--text);font-family:var(--body);cursor:pointer;
  transition:background .3s,border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.met-b[hidden]{display:none}
.met-b:hover{background:var(--ring-soft)}
.met-b .ico{width:44px;height:44px;padding:9px;flex-shrink:0}
.met-bt{display:grid;gap:.1rem;min-width:0}
.met-bt b{font-size:.98rem;line-height:1.3}
.met-bt small{font-size:.8rem;color:var(--muted)}
.met-b.on{background:var(--card);border-color:var(--acc-svit);
  box-shadow:0 0 0 1px var(--acc-svit),0 14px 34px rgba(220,140,10,.18)}
.met-b.on .met-bt b{color:var(--acc)}
.met-b::after{content:"";margin-left:auto;flex-shrink:0;width:9px;height:9px;
  border-right:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);
  transform:rotate(-45deg);opacity:.5;transition:transform .3s var(--ease),opacity .3s}
.met-b.on::after{opacity:1}

.met-p{display:none;position:relative;overflow:hidden;background:var(--card);
  border:1px solid var(--line);border-radius:24px;
  padding:clamp(1.5rem,3.4vw,2.6rem);box-shadow:0 24px 60px rgba(150,95,10,.12)}
.met-p.on{display:block;animation:vynor .45s var(--ease)}
.met-p::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:var(--slunce)}
.met-hlava{display:grid;gap:1rem;margin-bottom:1.3rem}
.met-p h2{font-size:clamp(1.55rem,3vw,2.2rem);line-height:1.12}
.met-fakta{display:flex;flex-wrap:wrap;gap:.6rem}
.met-fakta div{padding:.55rem .95rem;border-radius:14px;background:var(--card-2);
  border:1px solid var(--line)}
.met-fakta dt{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.met-fakta dd{font-family:var(--display);font-size:1.15rem;color:var(--acc);line-height:1.25}
.met-lead{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.38rem);
  line-height:1.5;color:var(--text);margin-bottom:1.4rem;max-width:44rem}
.met-tagy{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.6rem}
.met-tt{flex-basis:100%;font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:.15rem}
.met-tagy span:not(.met-tt){font-size:.84rem;padding:.38rem .8rem;border-radius:999px;
  background:linear-gradient(120deg,#fdeaa0,#fef6d6);color:#5a3405;
  border:1px solid rgba(143,82,0,.18)}
html[data-theme="sepie"] .met-tagy span:not(.met-tt){background:var(--card-2);color:var(--text)}
.met-bloky{display:grid;gap:1.2rem 2rem;border-top:1px solid var(--line);padding-top:1.4rem}
.met-bloky h3{font-size:.95rem;margin-bottom:.35rem;color:var(--text)}
.met-bloky p{font-size:.94rem}
.met-pozn{text-align:center;margin-top:2rem}
.met-pozn a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
@media(min-width:760px){.met-bloky{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:940px){
  .met{grid-template-columns:minmax(0,360px) minmax(0,1fr);
    grid-template-rows:repeat(10,auto) 1fr;column-gap:2.4rem;align-items:start}
  .met>.met-sk,.met>.met-b{grid-column:1}
  .met>.met-p{grid-column:2;grid-row:1/12;position:sticky;
    top:calc(var(--nav-h) + 1.4rem)}
  .met-b.on::after{transform:rotate(-45deg) translate(3px,3px)}
}
@media(max-width:939px){
  .met-b.on::after{transform:rotate(45deg)}
  .met-p{margin:.2rem 0 .9rem}
}

/* ===================================================================
   CENÍK — listy s vodítky k ceně
   =================================================================== */
.cl-mriz{display:grid;gap:1.4rem;align-items:start;text-align:left}
.cl{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:0 0 .6rem;box-shadow:0 20px 50px rgba(150,95,10,.10)}
.cl-hlava{padding:1.5rem 1.6rem 1.1rem;background:var(--bokeh),var(--slunce);
  border-bottom:1px solid rgba(143,82,0,.15)}
.cl-hlava h2{font-size:1.6rem;color:#2e1d05}
.cl-hlava p{font-size:.88rem;color:#4d3510;margin-top:.25rem}
.cl-hlava p:empty{display:none}
html[data-theme="sepie"] .cl-hlava{background:var(--card-2)}
html[data-theme="sepie"] .cl-hlava h2,html[data-theme="sepie"] .cl-hlava p{color:var(--text)}
.cr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.7rem;row-gap:.2rem;
  padding:.85rem 1.6rem;transition:background .3s}
.cr:hover{background:var(--ring-soft)}
.cr+.cr{border-top:1px solid var(--line)}
.cr-n{font-weight:600;color:var(--text);font-size:.98rem}
.cr-d{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--muted);
  padding:.16rem .55rem;border-radius:999px;border:1px solid var(--line-2);white-space:nowrap}
.cr-v{flex:1 1 2rem;min-width:1.2rem;border-bottom:1.5px dotted var(--line-2);
  transform:translateY(-.3rem)}
.cr-c{font-family:var(--display);font-size:1.3rem;color:var(--acc);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cr-bal{background:linear-gradient(100deg,rgba(250,215,87,.30),rgba(253,240,190,.15))}
.cr-bal .cr-n{color:var(--acc)}
.cr-usp{flex-basis:100%;text-align:right;font-size:.76rem;font-weight:700;
  color:#3f6b1c;letter-spacing:.02em}
html[data-theme="sepie"] .cr-usp{color:#a8cf86}
@media(max-width:520px){.cr-n{flex-basis:100%}}
@media(min-width:940px){.cl-mriz{grid-template-columns:repeat(2,minmax(0,1fr))}}
.poukaz-foto{margin:0;border-radius:6px;overflow:hidden;transform:rotate(-1.5deg);
  box-shadow:0 2px 4px rgba(120,70,0,.12),0 30px 70px rgba(200,120,10,.32);
  transition:transform .5s var(--ease)}
.poukaz-foto:hover{transform:rotate(0) translateY(-6px)}
.poukaz-foto img{width:100%;height:auto}

/* ---------- srovnání: štítky a filtr v mřížce ----------
   Štítky „s čím přicházejí" v řádcích různé délky působily rozházeně —
   mřížka je srovná do sloupců stejné šířky a výšky. */
.met-tagy{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.5rem}
.met-tt{grid-column:1/-1}
.met-tagy span:not(.met-tt){display:flex;align-items:center;border-radius:12px;
  padding:.5rem .85rem;line-height:1.3}
@media(max-width:599px){
  .met-filtr{display:grid;grid-template-columns:1fr 1fr}
  .met-f{padding:.7rem .6rem}
  .met-f:last-child{grid-column:1/-1}
  .met-fakta{display:grid;grid-template-columns:1fr 1fr}
  .met-fakta div{padding:.55rem .75rem}
  .met-fakta dd{font-size:1.02rem;white-space:nowrap}
  .met-tagy{grid-template-columns:1fr 1fr;gap:.4rem}
  .met-tagy span:not(.met-tt){font-size:.8rem;padding:.5rem .65rem}
}
/* Mobil: čísla v úvodu zarovnaná doleva do jednoho sloupce (85 % přetékalo
   pevnou šířku a každé číslo začínalo jinde) a popisek kresby se zalomí,
   místo aby utekl za pravý okraj displeje. */
@media(max-width:939px){
  .pr-cisla b{min-width:5.4rem;text-align:left}
  .medaile figcaption{white-space:normal;width:min(88vw,340px);text-align:center;
    letter-spacing:.12em;line-height:1.5}
}
/* Ceník: dlouhá cena (kineziotaping) zůstane na řádku jako ostatní */
.cr-c-dl{font-size:1.05rem;white-space:nowrap}
/* Centrování popisku kresby přes samostatné translate — pravidlo pro
   omezené animace nuluje transform a popisek pak utíkal doprava. */
.medaile figcaption{transform:none;translate:-50% 0}

/* Atribut hidden sám neskrývá, když ho přebije autorský display. */
[hidden]{display:none!important}

/* ---------- cookie lišta (souhlas s měřením) ---------- */
.cookies{position:fixed;z-index:9500;left:14px;right:14px;bottom:14px;
  background:var(--card);color:var(--text);border:1px solid var(--line-2);
  border-radius:18px;padding:20px 20px 18px;box-shadow:var(--shadow);
  transform:translateY(140%);visibility:hidden;
  transition:transform .5s var(--ease),visibility 0s .5s}
.cookies.vidno{transform:none;visibility:visible;transition:transform .5s var(--ease)}
.cookies h3{font-family:var(--display);font-weight:400;font-size:1.15rem;margin:0 0 8px}
.cookies p{font-size:.88rem;color:var(--muted);line-height:1.65;margin:0 0 16px}
.cookies p a{color:var(--acc);text-decoration:underline}
.cookies-btn{display:flex;gap:10px;flex-wrap:wrap}
.cookies-btn .btn{flex:1;padding:12px 16px;min-height:44px}
@media(min-width:700px){.cookies{left:auto;right:20px;bottom:20px;max-width:420px}}
@media(prefers-reduced-motion:reduce){.cookies,.cookies.vidno{transition:none}}

/* podpis autora webu v patičce — logotyp </tomas.dev> v písmu a barvách webu */
.pata-spod a.podpis{font-family:var(--display);font-size:1rem;letter-spacing:.02em;
  white-space:nowrap}
.pata-spod a.podpis .zav{color:var(--muted)}
.pata-spod a.podpis:hover{text-decoration:none}
.pata-spod a.podpis:hover .zav{color:var(--acc)}

/* ---------- pomocné třídy — dřív inline style="…", teď tady kvůli CSP bez 'unsafe-inline' ---------- */
.zs-mb09{margin-bottom:.9rem}
.zs-acc{color:var(--acc)}
.zs-w100{width:100%}
.zs-mw44{max-width:44rem}
.zs-mt26{margin-top:2.6rem}
.zs-mt16{margin-top:1.6rem}
.zs-mb11{margin-bottom:1.1rem}