/* ============================================================
   protseduri.css — страница-разпределител „Козметични процедури“.
   Три големи карти → obshta.html / estetichna.html / dekorativna.html
   Ползва токените от base.css (светла тема).
   ============================================================ */

.proc-hub{
  display:grid;grid-template-columns:1fr;gap:18px;
}
@media(min-width:980px){
  .proc-hub{grid-template-columns:repeat(3,1fr);}
}

.proc-card{
  display:flex;flex-direction:column;
  background:rgba(224,170,160,.10);
  border:1px solid rgba(224,170,160,.30);
  border-radius:20px;padding:24px;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.proc-card:hover{
  transform:translateY(-4px);
  background:rgba(224,170,160,.16);
  box-shadow:0 18px 36px -24px rgba(80,50,35,.45);
}

.proc-card-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.proc-card-icon{
  width:48px;height:48px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--peach),var(--rose));
  color:#fff;font-size:1.3rem;
  box-shadow:0 6px 14px -6px rgba(224,170,160,.7);
}
.proc-card-title{
  font-family:var(--font-serif);font-weight:500;
  font-size:1.28rem;line-height:1.2;margin:0 0 3px;color:var(--espresso);
}
.proc-card-sub{
  font-size:.82rem;letter-spacing:.03em;color:var(--text-mute);margin:0;
}
.proc-card-text{
  font-size:.93rem;line-height:1.6;color:var(--text-soft);margin:0 0 16px;
}

.proc-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px;}
.proc-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:.89rem;line-height:1.45;color:var(--text);
}
.proc-list .ic{color:var(--gold-dark);font-size:.95rem;flex:none;margin-top:2px;}

.proc-cta{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:100px;
  background:rgba(224,170,160,.26);
  border:1px solid rgba(224,170,160,.5);
  font-size:.9rem;font-weight:500;color:var(--espresso);
  transition:background .18s ease,gap .18s ease;
}
.proc-cta:hover{background:rgba(224,170,160,.42);gap:12px;}
.proc-cta .ic{font-size:.95rem;}

/* лек цветови нюанс за всяко направление */
.proc-card--estetichna{
  background:rgba(74,115,136,.07);
  border-color:rgba(74,115,136,.24);
}
.proc-card--estetichna:hover{background:rgba(74,115,136,.12);}
.proc-card--estetichna .proc-card-icon{
  background:linear-gradient(135deg,var(--blue-l),var(--blue));
}
.proc-card--estetichna .proc-cta{
  background:rgba(74,115,136,.16);border-color:rgba(74,115,136,.34);
}
.proc-card--estetichna .proc-cta:hover{background:rgba(74,115,136,.26);}
.proc-card--estetichna .proc-list .ic{color:var(--blue);}

.proc-card--dekorativna{
  background:rgba(201,168,118,.10);
  border-color:rgba(201,168,118,.32);
}
.proc-card--dekorativna:hover{background:rgba(201,168,118,.17);}
.proc-card--dekorativna .proc-card-icon{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
}
.proc-card--dekorativna .proc-cta{
  background:rgba(201,168,118,.20);border-color:rgba(201,168,118,.42);
}
.proc-card--dekorativna .proc-cta:hover{background:rgba(201,168,118,.34);}

/* долен призив */
.proc-note{
  margin-top:40px;padding:26px 24px;
  border-radius:20px;
  background:var(--surface);
  border:1px solid var(--line-gold);
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
}
.proc-note p{margin:0;font-size:.98rem;color:var(--text-soft);max-width:60ch;}
@media(min-width:760px){
  .proc-note{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;}
}