/* Denisa Body Care — spolecny styl */

:root{
  --krem:#FBF7F1;
  --pisek:#EFE3D4;
  --pisek-tmavy:#E2D2BE;
  --oliva:#6E7355;
  --oliva-tmava:#4B4F3A;
  --hneda:#5A4639;
  --hneda-svetla:#8A7264;
  --ruzova:#D8A99B;
  --ruzova-svetla:#F1DDD5;
  --text:#3E332C;
  --radius:2px;
  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--krem);
  color:var(--text);
  font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.75;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

h1,h2,h3{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-weight:500;
  font-variation-settings:"opsz" 96,"SOFT" 20;
  line-height:1.16;
  margin:0 0 .6em;
  color:var(--hneda);
  letter-spacing:-.005em;
}
h1{font-size:clamp(2.3rem,5.6vw,3.7rem);font-weight:600;}
h2{font-size:clamp(1.8rem,3.8vw,2.7rem);}
h3{font-size:1.32rem;}
p{margin:0 0 1.1em;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.uzky{max-width:760px;margin:0 auto;padding:0 28px;}

.stitek{
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--oliva);
  font-weight:400;
  margin-bottom:1.1rem;
  display:block;
}

/* ---------- hlavicka ---------- */
.hlavicka{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,241,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pisek);
}
.hlavicka .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:14px;padding-bottom:14px;
}
.znacka{display:flex;align-items:center;gap:12px;text-decoration:none;}
.znacka svg{width:50px;height:auto;color:var(--hneda);flex:none;}
.znacka-text{
  font-family:"Fraunces",Georgia,serif;font-weight:500;
  font-size:1.02rem;letter-spacing:.13em;text-transform:uppercase;color:var(--hneda);
  line-height:1.25;
}
nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
nav a{
  text-decoration:none;font-size:.82rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--hneda-svetla);padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
nav a:hover{color:var(--oliva);}
nav a.aktivni{color:var(--hneda);border-bottom-color:var(--ruzova);}

/* ---------- tlacitka ---------- */
.tlacitko{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 30px;border-radius:999px;text-decoration:none;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--oliva);background:var(--oliva);color:#fff;
  transition:background .25s,color .25s,border-color .25s;
}
.tlacitko:hover{background:var(--oliva-tmava);border-color:var(--oliva-tmava);}
.tlacitko.obrys{background:transparent;color:var(--hneda);border-color:var(--pisek-tmavy);}
.tlacitko.obrys:hover{background:var(--pisek);color:var(--hneda);border-color:var(--pisek-tmavy);}
.tlacitka{display:flex;flex-wrap:wrap;gap:14px;}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(440px,74vh,660px);display:flex;align-items:flex-end;}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(45,36,30,.22) 0%,rgba(45,36,30,.34) 42%,rgba(45,36,30,.80) 100%);
}
.hero-obsah{position:relative;z-index:2;padding:0 28px 64px;max-width:var(--max);margin:0 auto;width:100%;color:#fff;}
.hero-obsah h1{color:#fff;margin-bottom:.35em;text-shadow:0 2px 24px rgba(38,29,24,.45);}
.hero-obsah .stitek{color:var(--ruzova-svetla);text-shadow:0 1px 12px rgba(38,29,24,.5);}
.hero-obsah p{color:rgba(255,255,255,.94);max-width:40ch;font-size:1.05rem;font-weight:400;margin-bottom:1.8em;text-shadow:0 1px 14px rgba(38,29,24,.4);}
.hero .tlacitko.obrys{color:#fff;border-color:rgba(255,255,255,.55);}
.hero .tlacitko.obrys:hover{background:rgba(255,255,255,.14);color:#fff;}

/* ---------- sekce ---------- */
section{padding:clamp(60px,9vw,110px) 0;}
.pisek{background:var(--pisek);}
.ruzova-pozadi{background:var(--ruzova-svetla);}

.dvojice{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;}
.dvojice .foto{border-radius:var(--radius);overflow:hidden;}
.dvojice .foto img{width:100%;height:100%;object-fit:cover;}

/* ---------- karty sluzeb ---------- */
.karty{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.karta{
  background:var(--krem);border:1px solid var(--pisek-tmavy);
  padding:36px 30px;border-radius:var(--radius);
  display:flex;flex-direction:column;
}
.pisek .karta{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8);}
.karta .cislo{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.7rem;color:var(--ruzova);
  line-height:1;margin-bottom:18px;
}
.karta h3{margin-bottom:.5em;}
.karta p{font-size:.95rem;color:var(--hneda-svetla);margin-bottom:0;}

/* ---------- cenik ---------- */
.cenik{max-width:640px;margin:0 auto;}
.cenik-radek{
  display:flex;align-items:baseline;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--pisek-tmavy);
}
.cenik-radek:last-child{border-bottom:none;}
.cenik-radek .delka{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.3rem;color:var(--hneda);white-space:nowrap;}
.cenik-radek .tecky{flex:1;border-bottom:1px dotted var(--pisek-tmavy);transform:translateY(-4px);}
.cenik-radek .cena{font-size:1.12rem;font-weight:400;color:var(--oliva);white-space:nowrap;letter-spacing:.02em;}
.poznamka{font-size:.88rem;color:var(--hneda-svetla);text-align:center;margin-top:28px;}

/* ---------- detail sluzby ---------- */
.sluzba{
  display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(28px,5vw,64px);
  padding:clamp(40px,6vw,64px) 0;border-top:1px solid var(--pisek-tmavy);
}
.sluzba:first-of-type{border-top:none;padding-top:0;}
.sluzba h3{font-size:clamp(1.6rem,3vw,2.1rem);}
.sluzba ul{margin:0 0 0 0;padding-left:1.1em;color:var(--hneda-svetla);font-size:.95rem;}
.sluzba li{margin-bottom:.45em;}

/* ---------- kontakt ---------- */
.kontakt-mrizka{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:start;}
.udaj{padding:18px 0;border-bottom:1px solid var(--pisek-tmavy);}
.udaj:last-child{border-bottom:none;}
.udaj .popis{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oliva);margin-bottom:6px;}
.udaj .hodnota{font-size:1.08rem;color:var(--hneda);}
.udaj a{text-decoration:none;border-bottom:1px solid var(--ruzova);}
.udaj a:hover{color:var(--oliva);}

.mapa{position:relative;width:100%;aspect-ratio:4/3;border:1px solid var(--pisek-tmavy);border-radius:var(--radius);overflow:hidden;background:var(--pisek);}
.mapa iframe{width:100%;height:100%;border:0;display:block;}

/* ---------- patka ---------- */
.patka{background:var(--hneda);color:rgba(255,255,255,.78);padding:64px 0 34px;font-size:.92rem;}
.patka h4{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.08rem;color:#fff;margin:0 0 .7em;letter-spacing:.06em;}
.patka-mrizka{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;}
.patka a{color:rgba(255,255,255,.78);text-decoration:none;}
.patka a:hover{color:#fff;}
.patka ul{list-style:none;margin:0;padding:0;}
.patka li{margin-bottom:.45em;}
.patka svg{width:52px;height:auto;color:rgba(255,255,255,.85);margin-bottom:14px;}
.patka-spodek{
  margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.8rem;color:rgba(255,255,255,.55);
}

/* ---------- responzivita ---------- */
@media (max-width:860px){
  .karty{grid-template-columns:1fr;}
  .dvojice,.kontakt-mrizka,.sluzba{grid-template-columns:1fr;}
  .dvojice .foto{max-height:420px;}
  .patka-mrizka{grid-template-columns:1fr;gap:30px;}
  .hlavicka .wrap{flex-direction:column;align-items:flex-start;gap:12px;}
  nav ul{gap:22px;flex-wrap:wrap;}
  .sluzba{border-top:1px solid var(--pisek-tmavy);padding-top:40px;}
}
@media (max-width:480px){
  body{font-size:16px;}
  .tlacitko{padding:13px 24px;}
  nav ul{gap:16px;}
}