/* ============================================================
   POTENCIÁL – brand kit
   Petra Veselá · Human Design & Genové klíče
   potencial.petra-vesela.cz

   Barvy vychází z oficiálního hologenetického profilu Gene Keys
   (zlatá #AD6300, krémové odstíny). Každá sekvence má vlastní akcent:
   Aktivační = zlatá, Venušina = růžová, Perlová = petrolejová.
   ============================================================ */

:root{
  /* základ */
  --papir:        #FBF7F1;
  --papir-tmavy:  #F3E9DA;
  --papir-hluboky:#EADCC7;
  --inkoust:      #2B2620;
  --inkoust-mekky:#5F564C;
  --linka:        #E0D2BC;

  /* akcenty sekvencí */
  --zlata:        #AD6300;   /* Aktivační sekvence */
  --zlata-jasna:  #C98B33;
  --zlata-svetla: #F6E7CE;
  /* Oficiální barvy sekvencí – změřené z ikonek v hologenetickém profilu
     Gene Keys (Génius / Láska / Prosperita). Nepoužívají se na obarvení
     celé stránky, jen jako malý znak u nadtitulku, aby ženy poznaly,
     ve které sekvenci jsou. Hlas webu zůstává zlato-krémový.            */
  --sekv-aktivacni: #3D5D38;   /* Génius   – zelená */
  --sekv-venusina:  #812020;   /* Láska    – vínová */
  --sekv-perlova:   #666699;   /* Prosperita – modrofialová */

  /* tmavá sekce */
  --noc:          #231D17;
  --noc-mekka:    #C9BCA9;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --sirka: 1120px;
  --sirka-text: 720px;
}

/* znak sekvence – barevný bod před nadtitulkem */
.znak{
  display:inline-block;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--sekv, var(--sekv-aktivacni));
  margin-right:.7em;
  vertical-align:.08em;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papir);
  color:var(--inkoust);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.18;
  margin:0 0 .6em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.1rem, 5vw, 3.5rem); }
h2{ font-size:clamp(1.7rem, 3.6vw, 2.6rem); }
h3{ font-size:clamp(1.15rem, 2vw, 1.45rem); }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--zlata); }

strong{ font-weight:600; }

em.zvyraz{
  font-style:normal;
  background:linear-gradient(transparent 62%, var(--zlata-svetla) 62%);
  padding:0 .1em;
}

/* ---------- layout ---------- */

.obal{ width:100%; max-width:var(--sirka); margin:0 auto; padding:0 24px; }
.uzky{ max-width:var(--sirka-text); margin-left:auto; margin-right:auto; }

section{ padding:clamp(56px, 8vw, 104px) 0; }

.tmava{ background:var(--noc); color:var(--noc-mekka); }
.tmava h2,.tmava h3{ color:var(--papir); }
.tmava strong{ color:var(--papir); }

.tepla{ background:var(--papir-tmavy); }

/* ---------- drobné prvky ---------- */

.nadtitulek{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--zlata);
  margin:0 0 1.1em;
  font-weight:600;
}
.tmava .nadtitulek{ color:var(--zlata-jasna); }

.perex{
  font-size:clamp(1.05rem, 1.6vw, 1.22rem);
  color:var(--inkoust-mekky);
  line-height:1.7;
}
.tmava .perex{ color:var(--noc-mekka); }

.stred{ text-align:center; }

/* hexagram I-ťingu – šest linií, motiv značky */
.hexagram{ display:block; margin:0 auto 2rem; width:46px; opacity:.85; }
.hexagram line{ stroke:var(--zlata); stroke-width:3; stroke-linecap:round; }

.delic{
  height:1px; background:var(--linka); border:0;
  max-width:var(--sirka-text); margin:0 auto;
}

/* ---------- tlačítka ---------- */

.tlacitko{
  display:inline-block;
  background:var(--zlata);
  color:#FFF9EF;
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.04em;
  padding:19px 42px;
  border-radius:2px;
  transition:background .18s ease, transform .18s ease;
  border:0;
  cursor:pointer;
  text-align:center;
}
.tlacitko:hover{ background:var(--inkoust); transform:translateY(-1px); }

.tlacitko-linka{
  display:inline-block;
  background:transparent;
  color:var(--zlata);
  border:1px solid var(--zlata);
  text-decoration:none;
  font-weight:600;
  padding:18px 40px;
  border-radius:2px;
  transition:background .18s ease, color .18s ease;
}
.tlacitko-linka:hover{ background:var(--zlata); color:#FFF9EF; }

.pod-tlacitkem{
  font-size:.92rem;
  color:var(--inkoust-mekky);
  margin-top:1.1em;
}
.tmava .pod-tlacitkem{ color:var(--noc-mekka); }

/* ---------- hero ---------- */

.hero{ padding:clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 96px); }
.hero-mriz{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}
.hero h1{ margin-bottom:.5em; }
.hero .perex{ max-width:34em; }
.hero-akce{ margin-top:2.2rem; }

.hero-foto{ position:relative; max-width:440px; margin-left:auto; }
.hero-foto img{
  width:100%;
  height:auto;          /* přirozený poměr fotky – nic se nedeformuje */
  border-radius:3px;
  position:relative;
  z-index:1;
}
.hero-foto::after{
  content:"";
  position:absolute; inset:auto -14px -14px auto;
  width:64%; height:64%;
  border:1px solid var(--zlata);
  border-radius:3px;
  z-index:0;
}

/* ---------- karty ---------- */

.mrizka{ display:grid; gap:22px; }
.mrizka-2{ grid-template-columns:repeat(2, 1fr); }
.mrizka-3{ grid-template-columns:repeat(3, 1fr); }
.mrizka-4{ grid-template-columns:repeat(4, 1fr); }

.karta{
  background:var(--papir);
  border:1px solid var(--linka);
  border-radius:3px;
  padding:30px 28px;
}
.tepla .karta{ background:#FFFCF7; }
.tmava .karta{ background:#2C251E; border-color:#463A2D; }

.karta-cislo{
  font-family:var(--serif);
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--zlata);
  display:block;
  margin-bottom:.9rem;
}
.karta h3{ margin-bottom:.5em; }
.karta p{ font-size:.98rem; color:var(--inkoust-mekky); margin-bottom:0; }
.tmava .karta p{ color:var(--noc-mekka); }

/* ---------- seznam s odrážkou ---------- */

.seznam{ list-style:none; padding:0; margin:0; }
.seznam li{
  position:relative;
  padding-left:34px;
  margin-bottom:1em;
  line-height:1.65;
}
.seznam li::before{
  content:"";
  position:absolute; left:6px; top:.72em;
  width:9px; height:9px;
  border:1px solid var(--zlata);
  border-radius:50%;
}
.seznam li.plna::before{ background:var(--zlata); }

/* ---------- reference ---------- */

.reference{ display:grid; gap:24px; grid-template-columns:repeat(2,1fr); }
.citace{
  background:#FFFCF7;
  border:1px solid var(--linka);
  border-left:2px solid var(--zlata);
  border-radius:3px;
  padding:30px 30px 26px;
}
.tepla .citace{ background:var(--papir); }
.citace p{
  font-family:var(--serif);
  font-size:1.06rem;
  line-height:1.6;
  font-style:italic;
  color:var(--inkoust);
}
.citace .jmeno{
  font-family:var(--sans);
  font-style:normal;
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--zlata);
  margin:1.1em 0 0;
}

/* ---------- cena ---------- */

.cena-blok{
  background:#FFFCF7;
  border:1px solid var(--zlata);
  border-radius:3px;
  padding:clamp(32px, 5vw, 56px);
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.cena-stitek{
  display:inline-block;
  background:var(--zlata-svetla);
  color:var(--zlata);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:8px 18px;
  border-radius:2px;
  margin-bottom:1.6rem;
}
.cena-hlavni{
  font-family:var(--serif);
  font-size:clamp(2.6rem, 6vw, 3.6rem);
  line-height:1;
  color:var(--inkoust);
  margin:0;
}
.cena-puvodni{
  color:var(--inkoust-mekky);
  font-size:1rem;
  margin:.7em 0 0;
}
.cena-puvodni s{ text-decoration-thickness:1px; }
.cena-blok .seznam{ text-align:left; margin:2.2rem auto; max-width:420px; }

/* ---------- medailonek ---------- */

.medailonek{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
}
.medailonek img{ border-radius:3px; width:100%; height:auto; }

/* ---------- FAQ ---------- */

.otazka{
  border-bottom:1px solid var(--linka);
  padding:22px 0;
}
.otazka summary{
  font-family:var(--serif);
  font-size:1.16rem;
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:34px;
}
.otazka summary::-webkit-details-marker{ display:none; }
.otazka summary::after{
  content:"+";
  position:absolute; right:4px; top:-2px;
  color:var(--zlata);
  font-size:1.5rem;
  font-family:var(--sans);
  font-weight:300;
}
.otazka[open] summary::after{ content:"–"; }
.otazka .odpoved{
  padding-top:14px;
  color:var(--inkoust-mekky);
  font-size:1rem;
}

/* ---------- patička ---------- */

.paticka{
  background:var(--noc);
  color:var(--noc-mekka);
  padding:56px 0 44px;
  font-size:.92rem;
}
.paticka a{ color:var(--zlata-jasna); text-decoration:none; }
.paticka a:hover{ text-decoration:underline; }
.paticka-mriz{
  display:flex;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.paticka .znacka{
  font-family:var(--serif);
  font-size:1.3rem;
  color:var(--papir);
  margin:0 0 .3em;
}

/* ---------- responzivita ---------- */

@media (max-width: 900px){
  .hero-mriz{ grid-template-columns:1fr; }
  .hero-foto{ order:-1; max-width:460px; }
  .hero-foto::after{ display:none; }
  .mrizka-4{ grid-template-columns:repeat(2,1fr); }
  .mrizka-3{ grid-template-columns:1fr; }
  .medailonek{ grid-template-columns:1fr; }
  .medailonek img{ max-width:340px; }
  .reference{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
  body{ font-size:17px; }
  .mrizka-4, .mrizka-2{ grid-template-columns:1fr; }
  .tlacitko, .tlacitko-linka{ display:block; width:100%; }
}

/* ---------- VIP nabídka pod hlavní cenou ---------- */

.vip{
  max-width:640px;
  margin:26px auto 0;
  background:var(--papir);
  border:1px solid var(--linka);
  border-radius:3px;
  padding:32px 34px;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:28px;
  align-items:center;
}
.tepla .vip{ background:var(--papir); }
.vip h3{ margin:.2em 0 .5em; }
.vip p{ font-size:.97rem; color:var(--inkoust-mekky); margin-bottom:0; }
.vip-cena{ text-align:center; }
.vip-castka{
  font-family:var(--serif);
  font-size:2rem;
  line-height:1;
  color:var(--inkoust) !important;
  margin:0;
}
.vip-cena .tlacitko-linka{ padding:13px 26px; font-size:.94rem; }

@media (max-width:640px){
  .vip{ grid-template-columns:1fr; text-align:center; }
  .vip-cena{ border-top:1px solid var(--linka); padding-top:22px; }
}

/* ---------- strohá patička pro prodejní a registrační stránky ---------- */
/* Na stránce, kde má návštěvnice udělat jednu věc, se neodkazuje pryč.
   Zůstává jen kontakt a to, co k prodeji patří.                          */

.paticka.jednoducha{
  background:var(--papir);
  color:var(--inkoust-mekky);
  border-top:1px solid var(--linka);
  padding:34px 0 38px;
  font-size:.94rem;
}
.paticka.jednoducha a{ color:var(--zlata); }

/* ---------- právní stránky (podmínky, zpracování údajů) ---------- */

.pravni{ font-size:1rem; line-height:1.8; }
.pravni h2{
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  margin:2.4em 0 .7em;
  padding-top:1.4em;
  border-top:1px solid var(--linka);
}
.pravni h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.pravni h3{ font-size:1.12rem; margin:1.8em 0 .5em; }
.pravni p{ margin-bottom:1em; color:var(--inkoust-mekky); }
.pravni ul, .pravni ol{ margin:0 0 1.4em; padding-left:1.4em; color:var(--inkoust-mekky); }
.pravni li{ margin-bottom:.55em; }
.pravni strong{ color:var(--inkoust); }
.pravni a{ color:var(--zlata); }
.pravni table{
  width:100%; border-collapse:collapse; margin:0 0 1.6em; font-size:.95rem;
  display:block; overflow-x:auto;
}
.pravni th, .pravni td{
  border:1px solid var(--linka); padding:10px 12px; text-align:left; vertical-align:top;
}
.pravni th{ background:var(--papir-tmavy); font-weight:600; }

/* ---------- právní stránky (podmínky, zpracování údajů) ---------- */

.pravni{ font-size:1rem; line-height:1.8; }
.pravni h2{
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  margin:2.4em 0 .7em;
  padding-top:1.4em;
  border-top:1px solid var(--linka);
}
.pravni h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.pravni h3{ font-size:1.12rem; margin:1.8em 0 .5em; }
.pravni p{ margin-bottom:1em; color:var(--inkoust-mekky); }
.pravni ul, .pravni ol{ margin:0 0 1.4em; padding-left:1.4em; color:var(--inkoust-mekky); }
.pravni li{ margin-bottom:.55em; }
.pravni strong{ color:var(--inkoust); }
.pravni a{ color:var(--zlata); }
.pravni table{
  width:100%; border-collapse:collapse; margin:0 0 1.6em; font-size:.95rem;
  display:block; overflow-x:auto;
}
.pravni th, .pravni td{
  border:1px solid var(--linka); padding:10px 12px; text-align:left; vertical-align:top;
}
.pravni th{ background:var(--papir-tmavy); font-weight:600; }

/* ---------- kreslené schéma mapy a profilu ---------- */
/* Vlastní kresba, ne obrázek z cizího nástroje. Slouží k tomu,
   aby si návštěvnice dokázala představit, o čem je řeč.        */

/* zvýraznění sfér té sekvence, o které stránka je */