:root {

  --bg: #ffffff;

  --text: #2b2b2b;

  --muted: #6b6b6b;

  --accent: #c97a7a;

  --accent-dark: #b56868;

  --line: #e0e0e0;

  --card: #ffffff;

}



* {

  box-sizing: border-box;

}



body {

  margin: 0;

  font-family: "Georgia", "Times New Roman", serif;

  color: var(--text);

  background: var(--bg);

  line-height: 1.65;

}



img {

  max-width: 100%;

  display: block;

}



a {

  color: inherit;

}



.container {

  width: min(1100px, 92%);

  margin: 0 auto;

}



.site-header {

  background: #fff;

  border-bottom: 1px solid transparent;

}



.site-header .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  padding: 18px 0;

}



.brand {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  font-weight: 700;

}



.brand img {

  width: 70px;

  height: auto;

}



.brand span {

  font-size: 1rem;

  letter-spacing: 0.02em;

  color: var(--muted);

}



.nav {

  display: flex;

  gap: 22px;

  flex-wrap: wrap;

}



.nav a {

  text-decoration: none;

  font-weight: 600;

  color: #a3a3a3;

  letter-spacing: 0.1em;

  font-size: 0.85rem;

  text-transform: uppercase;

}



.nav a[aria-current="page"],

.nav a:hover,

.nav a:focus {

  color: var(--accent);

}



.menu-toggle {

  display: none;

  border: 1px solid var(--line);

  background: #fff;

  padding: 8px 14px;

  border-radius: 999px;

  font: inherit;

  font-size: 0.85rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--muted);

}



.hero {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 32px;

  padding: 36px 0 16px;

  align-items: center;

}



.hero h1 {

  margin: 0 0 16px;

  font-size: clamp(2rem, 4vw, 2.8rem);

}



.heading-kdo {

  color: #63b8d1;

  font-weight: 300;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.hero p {

  margin: 0 0 18px;

  color: var(--muted);

}



.hero-text {

  padding-right: 28px;

  max-width: 560px;

}



.kdo-hero-text {

  max-width: none;

  width: 100%;

}



.kdo-photo {

  border: none;

  max-width: 300px;

  width: 100%;

  height: auto;

}



.kdo-intro {

  display: flex;

  gap: 20px;

  align-items: flex-start;

  margin-bottom: 12px;

}



.kdo-text {

  flex: 1;

}



@media (max-width: 760px) {

  .kdo-intro {

    flex-direction: column;

  }

}



.hero-card {

  background: var(--card);

  border-radius: 18px;

  border: 1px solid var(--line);

  padding: 22px;

}



.hero-card--plain {

  border: none;

  padding: 0;

  background: transparent;

}



.section {

  padding: 24px 0;

}



.section h2 {

  margin: 0 0 14px;

  font-size: clamp(1.6rem, 3vw, 2.2rem);

}



.media-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 18px;

}



.media-grid img {

  border-radius: 16px;

  border: 1px solid var(--line);

  background: #fff;

}



.callout {

  background: var(--card);

  border-radius: 16px;

  padding: 20px;

  border: 1px solid var(--line);

}



.makeup {

  display: grid;

  gap: 10px;

  margin-top: 10px;

}



.makeup p {

  margin: 0;

  font-size: 0.95rem;

  font-weight: 600;

}



.makeup-strong {

  color: #1f1f1f;

}



.makeup-item--green {

  color: #6bb83a;

}



.makeup-item--blue {

  color: #2f4fd6;

}



.makeup-item--orange {

  color: #f08a1f;

}



.makeup-item--red {

  color: #e5532a;

}



.makeup-item--muted {

  color: #9f9f9f;

}



.makeup-item--teal {

  color: #1aa6a0;

}



.cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 10px 22px;

  border-radius: 999px;

  border: 1px solid var(--accent);

  background: var(--accent);

  color: #fff;

  text-decoration: none;

  font-weight: 600;

  letter-spacing: 0.02em;

  font-size: 0.9rem;

}



.cta:hover,

.cta:focus {

  filter: brightness(0.95);

}



.cta-wrap {

  text-align: center;

  padding: 16px 0 24px;

}



.cta-index {

  display: inline-block;

  padding: 6px 14px;

  border-radius: 4px;

  border: 1px solid #ff5a5a;

  background: #ffffff;

  color: #ff5a5a;

  font-weight: 500;

  letter-spacing: 0.01em;

  font-size: 0.85rem;

}



.cta-index:hover,

.cta-index:focus {

  filter: none;

  background: #fff2f2;

}



.footer {

  text-align: center;

  padding: 24px 0 50px;

  border-top: 1px solid var(--line);

  color: var(--muted);

  font-size: 0.9rem;

}



.contact-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 24px;

  align-items: start;

}



.schedule {

  display: grid;

  gap: 24px;

  margin-top: 10px;

}



.schedule-row {

  display: grid;

  grid-template-columns: 90px 1fr;

  gap: 18px;

  align-items: start;

}



.schedule-day {

  margin: 0;

  font-size: 0.95rem;

  font-weight: 600;

}



.schedule-day--mon {

  color: #a1a1a1;

}



.schedule-day--tue {

  color: #1d3bb3;

}



.schedule-day--wed {

  color: #d64426;

}



.schedule-day--thu {

  color: #1d3bb3;

}



.schedule-list {

  display: grid;

  gap: 6px;

}



.schedule-item {

  margin: 0;

  font-weight: 600;

  font-size: 0.95rem;

}



.schedule-item--muted {

  color: #9f9f9f;

}



.schedule-item--green {

  color: #6bb83a;

}



.schedule-item--blue {

  color: #2f4fd6;

}



.schedule-item--orange {

  color: #f08a1f;

}



.schedule-item--red {

  color: #e5532a;

}



.schedule-item--teal {

  color: #1aa6a0;

}



.contact-card {

  background: var(--card);

  border-radius: 18px;

  padding: 22px;

  border: 1px solid var(--line);

}



.pricing {

  display: grid;

  gap: 18px;

  margin-top: 10px;

  border: 1px solid #63b8d1;

  padding: 16px;

}



.pricing-item {

  display: grid;

  grid-template-columns: 1fr 200px;

  gap: 18px;

  align-items: start;

}



.pricing-item:not(:last-child) {

  border-bottom: 1px solid #63b8d1;

  padding-bottom: 16px;

}



.pricing-title,

.pricing-note {

  margin: 0;

  font-weight: 600;

  font-size: 0.95rem;

}



.pricing-note {

  font-weight: 600;

  padding-left: 14px;

}



.pricing-meta {

  display: grid;

  gap: 8px;

  text-align: left;

  font-weight: 600;

  font-size: 0.95rem;

  white-space: normal;

}



.pricing-item--green {

  color: #6bb83a;

}



.pricing-item--blue {

  color: #2f4fd6;

}



.pricing-item--orange {

  color: #f08a1f;

}



.pricing-item--red {

  color: #e5532a;

}



.pricing-item--muted {

  color: #9f9f9f;

}



.pricing-item--teal {

  color: #1aa6a0;

}



form {

  display: grid;

  gap: 14px;

}



label {

  display: grid;

  gap: 6px;

  font-weight: 600;

}



input,

textarea {

  font: inherit;

  padding: 10px 12px;

  border-radius: 10px;

  border: 1px solid var(--line);

  background: #fff;

}



textarea {

  min-height: 140px;

  resize: vertical;

}



.captcha-row {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.captcha-question {

  font-weight: 600;

}



.form-actions {

  display: flex;

  align-items: center;

  gap: 12px;

}



.form-status {

  font-weight: 600;

  color: var(--accent-dark);

}



.form-status.is-error {

  color: #b42318;

}



.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



@media (max-width: 760px) {

  .site-header .container {

    flex-direction: row;

    align-items: center;

  }



  .menu-toggle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

  }



  .nav {

    position: absolute;

    top: 72px;

    right: 4%;

    left: 4%;

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 16px;

    padding: 16px;

    flex-direction: column;

    gap: 12px;

    display: none;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

  }



  .nav.is-open {

    display: flex;

  }



  .schedule-row {

    grid-template-columns: 1fr;

    gap: 8px;

  }



  .pricing-item {

    grid-template-columns: 1fr;

  }



  .pricing-meta {

    white-space: normal;

  }

}





/* --- MOJE NOVÉ ÚPRAVY --- */



/* 1. Nastavení nového písma a pozadí pro celý web */

body {

    font-family: 'Quicksand', sans-serif !important;

    background-color: #f9fdfd !important;

    color: #333;

    line-height: 1.6;

}



/* 2. Sjednocení nadpisů do tyrkysové */

h1, h2, h3 {

    color: #20b2aa !important;

    font-weight: 700 !important;

}



/* 3. Modernizace informačních boxů (kulaté rohy a stín) */

.makeup-item, .makeup-strong {

    background-color: #ffffff !important; /* Vrátíme čistě bílou */

    border-radius: 15px !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; /* Trošku výraznější stín, aby bílá na bílé byla vidět */

    padding: 20px !important;

    margin-bottom: 20px !important;

    border: 1px solid #f0f0f0 !important; /* Velmi jemná linka pro ohraničení */

}



/* 4. Úprava tlačítka pro stažení (aby ladilo k webu) */

.download-btn {

    background-color: #20b2aa !important; /* Tyrkysová místo modré */

    color: white !important;

    padding: 12px 25px;

    text-decoration: none;

    border-radius: 50px !important; /* Oválné "pilulkové" tlačítko */

    font-weight: bold;

    display: inline-block;

    transition: transform 0.2s ease;

}



/* 1. Nastavení přechodu pro tvou konkrétní třídu */

.kdo-photo {

    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

    display: inline-block; /* Důležité: aby se obrázek mohl točit, nesmí být "inline" */

}



/* 2. Co se stane, když na obrázek najedeš myší */

.kdo-photo:hover {

    transform: scale(1.1) rotate(5deg) !important;

}







/* Toto zamíří na jakýkoliv obrázek uvnitř tvých karet */

.hero-card img, .hero-card--plain img {

    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

    display: block !important;

}



/* Toto spustí animaci, když najedeš myší na celou kartu */

.hero-card:hover img, .hero-card--plain:hover img {

    transform: scale(1.1) rotate(-5deg) !important;

}







/* --- MODERNÍ CENÍK --- */



/* Kontejner pro celý ceník */

.pricing {

    display: grid;

    gap: 20px;

    margin-top: 30px;

}



/* Jednotlivá karta v ceníku */

.pricing-item {

    background: white !important;

    border-radius: 15px !important;

    padding: 20px !important;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;

    border-left: 6px solid #20b2aa !important; /* Tyrkysová linka na kraji */

    transition: transform 0.3s ease, box-shadow 0.3s ease !important;

}



/* Efekt při najetí myší na kartu */

.pricing-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(32, 178, 170, 0.15) !important;

}



/* Název lekce */

.pricing-title {

    font-weight: 700 !important;

    font-size: 1.1rem;

    color: #333;

    margin-bottom: 5px;

}



/* Poznámka (např. hradí se pololetně) */

.pricing-note {

    font-size: 0.9rem;

    color: #666;

    font-style: italic;

}



/* Pravá část s časem a cenou */

.pricing-meta {

    text-align: right;

    min-width: 120px;

    display: flex;

    flex-direction: column;

    gap: 5px;

}



/* Samotná cena */

.pricing-meta span:last-child {

    font-weight: 700;

    color: #20b2aa; /* Zvýrazněná cena */

    font-size: 1.1rem;

}



/* Responzivita pro mobily */

@media (max-width: 600px) {

    .pricing-item {

        flex-direction: column;

        align-items: flex-start;

        text-align: left;

    }

    .pricing-meta {

        text-align: left;

        margin-top: 15px;

        border-top: 1px solid #eee;

        padding-top: 10px;

        width: 100%;

    }

}