/* Diez Anti-aging Aesthetics - DESIGNUL. Paleta: marmura gri a postarilor lor (media #565658) pentru blocurile inchise,
   piatra deschisa calda ca fond, nudul buzelor din rezultatele Signature Lips ca accent. Fontul postarilor: Italiana.
   Ideea: "the fine line" - seringa care trece prin D-ul din logo = linia fina care traseaza planul pe fata.
   Forma: discul (highlight-urile lor sunt discuri de marmura). Fara vh brut: calc(var(--vh) * N). */
:root {
  --c-fond: #efece8;
  --c-fond-2: #e6e2dd;
  --c-text: #2c2b2d;
  --c-text-2: #736d68;
  --c-accent: #3b3a3d;
  --c-accent-text: #fff;
  --c-linie: rgba(44, 43, 45, .13);
  --c-pret: #9b6a5c;
  --c-stele: #b98a6f;
  --marmura: #5c5d61;
  --marmura-2: #3f4044;
  --nud: #9b6a5c;
  --nud-des: #d9b7a9;
  --f-titlu: "Italiana", "Didot", Georgia, serif;
  --f-text: "DM Sans", system-ui, sans-serif;
  --raza: 22px;
  --raza-mare: 30px;
  --raza-btn: 999px;
  --c-cortina: var(--c-fond);
}

h1, h2, h3, .mare { font-family: var(--f-titlu); font-weight: 400; letter-spacing: -.005em; line-height: 1.04; }
h2 { font-size: clamp(2.3rem, 5vw, 3.7rem); }
h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
em { font-style: normal; color: var(--nud); }
.eticheta { font-family: var(--f-text); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .7rem; color: var(--c-text-2); }
.sec { padding-block: clamp(64px, 9vw, 124px); }
.btn { font-family: var(--f-text); font-weight: 500; letter-spacing: .01em; }
.aviz { font-size: .76rem; color: var(--c-text-2); line-height: 1.5; max-width: 72ch; margin-top: 22px; }

/* marmura: fondul real al reels-urilor lor (tema/marmura.jpg), cu o umbra usoara pentru contrast */
.rec-sec, .final, .contur__card, .disc__m {
  background: linear-gradient(rgba(40, 40, 44, .28), rgba(40, 40, 44, .28)), url(/t/marmura.jpg) center / cover, var(--marmura);
}

/* ---------- bara: logo-ul lor real (seringa prin D) ---------- */
.bara__logo img { height: 46px; width: auto; }

/* ---------- hero: piatra deschisa, portretul intr-un disc, linia seringii trece prin el ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(26px, 5vw, 70px) 0 clamp(54px, 7vw, 100px); }
.hero__grid { display: grid; gap: 34px; align-items: center; }
.hero__h1 { font-size: clamp(3.3rem, 9.4vw, 7.4rem); line-height: .96; margin: .22em 0 .3em; }
.hero__h1 > span { display: block; }
.hero__sub { color: var(--c-text-2); max-width: 34ch; font-size: 1.08rem; line-height: 1.55; }
.hero .acciones { margin-top: 26px; }
.hero__nota { margin-top: 22px; font-size: .84rem; color: var(--c-text-2); display: flex; align-items: center; gap: 8px; }
.hero__nota svg { color: var(--c-stele); width: 16px; height: 16px; }
.hero__disc { position: relative; width: min(100%, 560px); justify-self: center; aspect-ratio: 1; }
.hero__foto { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--c-fond-2); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* acul: o linie fina care iese din disc spre stanga, ca seringa prin D */
.hero__ac { position: absolute; top: 50%; left: -14%; right: 50%; height: 1px; background: var(--c-text); opacity: .4; z-index: 0; }
.hero__foto { z-index: 1; }
.hero__ac::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-text); }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .hero__disc { justify-self: end; }
  .hero__ac { left: -24%; }
}
@media (max-width: 899px) {
  .hero__disc { width: min(86%, 420px); order: -1; }
  .hero__ac { left: -10%; }
}

/* deschiderea: acul se traseaza de la stanga, discul se deschide din linie, randurile urca */
body.intro .hero__ac { animation: ac 1s cubic-bezier(.6, 0, .2, 1) .1s both; }
body.intro .hero__foto { animation: disc 1.3s cubic-bezier(.7, 0, .2, 1) .75s both; }
body.intro .hero__foto img { animation: zoom 2s cubic-bezier(.2, .7, .2, 1) .75s both; }
body.intro .hero .eticheta, body.intro .hero__h1 > span, body.intro .hero__sub, body.intro .hero .acciones, body.intro .hero__nota { animation: urca .9s cubic-bezier(.2, .8, .2, 1) both; }
body.intro .hero .eticheta { animation-delay: .2s; }
body.intro .hero__h1 > span:nth-child(1) { animation-delay: .35s; }
body.intro .hero__h1 > span:nth-child(2) { animation-delay: .55s; }
body.intro .hero__h1 > span:nth-child(3) { animation-delay: 1.15s; }
body.intro .hero__sub { animation-delay: 1.3s; }
body.intro .hero .acciones { animation-delay: 1.42s; }
body.intro .hero__nota { animation-delay: 1.55s; }
@keyframes ac { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes disc { from { clip-path: ellipse(50% 0% at 50% 50%); } to { clip-path: ellipse(75% 75% at 50% 50%); } }
@keyframes zoom { from { transform: scale(1.12); } }
@keyframes urca { from { opacity: 0; transform: translateY(22px); } }

/* ---------- semnatura: discurile de marmura (highlight-urile lor) ---------- */
.discuri__rand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin: 8px 0 34px; }
.disc { min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.disc__m { width: 100%; max-width: 150px; min-width: 0; overflow: hidden; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; padding: 10px; color: #fff; font: 400 clamp(.98rem, 1.6vw, 1.3rem)/1.05 var(--f-titlu); text-align: center; outline: 1px solid transparent; outline-offset: 5px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), outline-color .3s, opacity .3s; opacity: .78; }
.disc:hover .disc__m { opacity: 1; }
.disc[aria-selected="true"] .disc__m { opacity: 1; outline-color: var(--c-text); transform: scale(1.04); }
.disc:focus-visible { outline: none; }
.disc:focus-visible .disc__m { outline: 2px solid var(--nud); }
.disc__panou { display: grid; gap: 26px; align-items: center; background: #fff; border-radius: var(--raza-mare); padding: clamp(18px, 3vw, 34px); }
.disc__panou[hidden] { display: none; }
.disc__panou:not([hidden]) { animation: apare .45s ease both; }
.disc__txt h3 { margin: .2em 0 .35em; }
.disc__txt > p:not(.eticheta):not(.disc__pret) { color: var(--c-text-2); max-width: 46ch; }
.disc__pret { font: 500 1.35rem/1 var(--f-text); letter-spacing: -.01em; color: var(--c-pret); margin-top: 18px; }
.disc__txt .acciones { margin-top: 20px; }
.disc__panou--fara { grid-template-columns: 1fr; }
.disc__panou--fara .disc__txt { max-width: 640px; }
@media (max-width: 599px) { .disc__m { font-size: .84rem; padding: 6px; } }
@media (min-width: 900px) {
  .discuri__rand { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .disc__panou { grid-template-columns: minmax(0, 360px) 1fr; gap: 56px; }
  .disc__panou--fara { grid-template-columns: 1fr; padding-inline: 56px; }
}
@keyframes apare { from { opacity: 0; transform: translateY(10px); } }

/* capsula before | after (ca postarile lor: doua jumatati lipite) */
.caps { margin: 0; }
.caps__img { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 999px; overflow: hidden; background: #fff; aspect-ratio: 5 / 6; }
.caps__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caps__et { position: absolute; bottom: 9%; left: 25%; transform: translateX(-50%); font: 600 .62rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(44, 43, 45, .55); padding: 6px 9px; border-radius: 999px; }
.caps__et--d { left: 75%; }
.caps figcaption { text-align: center; padding-top: 12px; font-size: .84rem; color: var(--c-text-2); display: grid; gap: 2px; }
.caps figcaption b { color: var(--c-text); font-weight: 500; font-size: .95rem; }
.disc__poza .caps__img { aspect-ratio: 5 / 6; }
.caps-banda { --banda-card: clamp(220px, 62vw, 300px); --banda-gap: 22px; margin-top: 18px; }
.caps-banda .caps__img img { width: 100%; }

/* ---------- harta de proportii: profilul real, liniile fine spre zonele tratate ---------- */
.proportii { background: #fff; }
.proportii__grid { display: grid; gap: 36px; align-items: center; }
.proportii__txt h2 { margin: .3em 0 .45em; }
.proportii__txt > p:not(.eticheta) { color: var(--c-text-2); max-width: 42ch; }
.proportii__mic { font-size: .82rem; margin-top: 16px; }
.harta { display: grid; gap: 22px; }
.harta__foto { position: relative; width: min(100%, 460px); justify-self: center; border-radius: 230px 230px var(--raza-mare) var(--raza-mare); overflow: hidden; aspect-ratio: 540 / 837; background: var(--c-fond-2); }
.harta__foto picture, .harta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.harta__p { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 0; padding: 0; background: none; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
.harta__p i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(44, 43, 45, .35), 0 2px 8px rgba(0, 0, 0, .25); transition: transform .3s; }
.harta__p i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .85); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s; }
.harta__p span { position: absolute; top: 50%; white-space: nowrap; font: 500 .74rem/1 var(--f-text); letter-spacing: .06em; color: var(--c-text); background: #fff; padding: 7px 11px; border-radius: 999px; transform: translateY(-50%); opacity: 0; transition: opacity .3s; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.harta__p span::before { content: ""; position: absolute; top: 50%; height: 1px; width: 26px; background: #fff; transform-origin: inherit; }
.harta__p--dreapta span { right: 52px; }
.harta__p--dreapta span::before { left: 100%; }
.harta__p--stanga span { left: 52px; }
.harta__p--stanga span::before { right: 100%; }
.harta__p.activ i { transform: scale(1.15); background: var(--nud); }
.harta__p.activ i::after { opacity: 1; transform: scale(1); }
.harta__p.activ span { opacity: 1; }
.harta__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; counter-reset: p; }
.harta__lista li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0; border-top: 1px solid var(--c-linie); cursor: pointer; transition: color .25s; }
.harta__lista b { font: 400 1.25rem/1.1 var(--f-titlu); }
.harta__lista span { grid-column: 1 / -1; font-size: .78rem; color: var(--c-text-2); }
.harta__lista em { grid-column: 2; grid-row: 1; font: 500 .95rem/1.2 var(--f-text); color: var(--c-pret); }
.harta__lista li.activ b { color: var(--nud); }
.harta__lista li.activ { border-top-color: var(--nud); }
@media (min-width: 900px) {
  .proportii__grid { grid-template-columns: .85fr 1.15fr; gap: 64px; }
  .harta { grid-template-columns: minmax(0, 420px) minmax(0, 260px); gap: 40px; align-items: center; justify-content: end; }
  .harta__lista { grid-template-columns: 1fr; }
}

/* ---------- Diez Contour: pachetul lor, mililitrii ca o scara ---------- */
.contur { padding-top: 0; }
.contur__card { color: #fff; border-radius: var(--raza-mare); padding: clamp(28px, 5vw, 64px); display: grid; gap: 10px; }
.contur__card .eticheta { color: var(--nud-des); }
.contur__card h2 em { color: var(--nud-des); }
.contur__card > p:not(.eticheta) { color: rgba(255, 255, 255, .74); max-width: 44ch; }
.contur__ml { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; }
.contur__ml li { display: grid; justify-items: center; gap: 6px; text-align: center; }
.contur__ml li::before { content: ""; width: 100%; border-radius: 14px 14px 6px 6px; background: rgba(255, 255, 255, .14); height: calc(26px + var(--i, 0) * 18px); }
.contur__ml li:nth-child(1) { --i: 0; } .contur__ml li:nth-child(2) { --i: 1; } .contur__ml li:nth-child(3) { --i: 2; } .contur__ml li:nth-child(4) { --i: 3; } .contur__ml li:nth-child(5) { --i: 4; }
.contur__ml b { font: 400 clamp(1.25rem, 2.6vw, 1.9rem)/1 var(--f-titlu); }
.contur__ml span { font-size: .7rem; color: rgba(255, 255, 255, .6); }
.contur__ml em { font: 500 .92rem/1 var(--f-text); color: var(--nud-des); }
@media (min-width: 900px) { .contur__card { grid-template-columns: 1fr 1.1fr; column-gap: 64px; align-items: end; } .contur__card > * { grid-column: 1; } .contur__ml { grid-column: 2; grid-row: 1 / span 4; margin: 0; } }

/* ---------- moment: discul se deschide spre clinica ---------- */
.cerc-sec .moment__media { width: min(100% - 2 * var(--gut), 560px); aspect-ratio: 4 / 5; margin-inline: auto; }
.cerc-sec .moment__media img { object-position: 50% 45%; }
.cerc-sec__txt { text-align: center; display: grid; justify-items: center; gap: 12px; margin-top: 30px; }
.cerc-sec__txt .mare { font-size: clamp(2rem, 4.6vw, 3.4rem); }
@media (min-width: 900px) {
  .cerc-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 520px)); justify-content: center; gap: 72px; align-items: center; }
  .cerc-sec .moment__media { width: 100%; margin: 0; }
  .cerc-sec__txt { text-align: left; justify-items: start; margin: 0; padding: 0; width: auto; }
}

/* ---------- recenzii: banda continua lipita pe marmura ---------- */
.rec-sec { color: #fff; }
.rec-sec .nota-mare__n { color: #fff; font-family: var(--f-titlu); }
.rec-sec .nota-mare__d span, .rec-sec .link-sageata { color: rgba(255, 255, 255, .78); }
.rec-sec .banda { --banda-gap: 0px; --banda-card: clamp(280px, 80vw, 420px); border-block: 1px solid rgba(255, 255, 255, .14); margin-top: 30px; }
.rec { margin: 0; padding: 26px 30px; border-right: 1px solid rgba(255, 255, 255, .14); height: 100%; }
.rec blockquote { margin: 0; font-family: var(--f-titlu); font-size: 1.28rem; line-height: 1.38; color: #fff; }
.rec figcaption { margin-top: 12px; font-size: .78rem; color: var(--nud-des); letter-spacing: .06em; }

/* ---------- final + subsol ---------- */
.final { color: #fff; }
.final h2 { font-size: clamp(2.5rem, 6vw, 4.6rem); }
.final h2 em { color: var(--nud-des); }
.final__logo { width: 132px; margin: 0 auto 22px; }
.final__logo img { width: 100%; height: auto; background: transparent; }
.final .btn--plin { background: #fff; color: var(--marmura-2); }
.final .btn--contur { color: #fff; border-color: rgba(255, 255, 255, .4); }
.subsol { background: var(--marmura-2); color: rgba(255, 255, 255, .82); }
.subsol a { color: #fff; }
.subsol .subsol__logo, .subsol__logo img { width: 150px; height: auto; background: transparent; }
.subsol .subsol__logo { display: block; margin-bottom: 18px; }
.subsol .btn { color: #fff; border-color: rgba(255, 255, 255, .35); }
.subsol__firma { border-top-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .6); }

/* ---------- pagini interioare ---------- */
.cap-pag { padding: clamp(40px, 7vw, 92px) 0 clamp(18px, 3vw, 30px); }
.cap-pag h1 { font-size: clamp(3rem, 8vw, 6rem); margin: .18em 0 .22em; }
.cap-pag p.lead { color: var(--c-text-2); max-width: 46ch; font-size: 1.08rem; }
.cap-pag .acciones { margin-top: 22px; }
.sar { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 8px 30px; }
.sar a { padding: 10px 16px; border-radius: 999px; background: #fff; text-decoration: none; font-size: .88rem; color: var(--c-text); border: 1px solid var(--c-linie); }
.trat { display: grid; gap: 40px; padding-bottom: 30px; }
.trat__grup { display: grid; gap: 18px; scroll-margin-top: calc(var(--bara-h) + 20px); }
.trat__grup header h2 { margin-bottom: .2em; }
.trat__grup header p { color: var(--c-text-2); max-width: 44ch; }
@media (min-width: 900px) { .trat__grup { grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; } }
.res__grila { display: grid; gap: 34px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.res__late { display: grid; gap: 34px; margin-top: 34px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
.lata { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: var(--raza-mare); overflow: hidden; background: #fff; }
.res__late .lata { grid-template-columns: 1fr; }
.lata__img { position: relative; }
.lata__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res__grila .lata__img img { aspect-ratio: 4 / 5; }
.res__late .lata__img img { aspect-ratio: 1080 / 330; }
.lata__et { position: absolute; left: 14px; top: 14px; font: 600 .62rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(44, 43, 45, .55); padding: 6px 10px; border-radius: 999px; }
.lata figcaption { grid-column: 1 / -1; padding: 14px 18px 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .86rem; color: var(--c-text-2); }
.lata figcaption b { color: var(--c-text); font-weight: 500; }
.despre { display: grid; gap: 34px; align-items: center; }
.despre__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: 220px 220px var(--raza-mare) var(--raza-mare); }
.despre__txt .mare { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: .6em; }
.despre__txt > p:not(.mare) { color: var(--c-text-2); max-width: 50ch; }
.cifre-mici { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cifre-mici li { background: #fff; border-radius: var(--raza); padding: 18px 16px; display: grid; gap: 4px; }
.cifre-mici b { font: 400 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--f-titlu); }
.cifre-mici span { font-size: .76rem; color: var(--c-text-2); line-height: 1.35; }
@media (min-width: 900px) { .despre { grid-template-columns: .8fr 1.2fr; gap: 72px; } .despre__foto { max-width: 440px; } }
.clinica__grila { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.clinica__grila img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raza-mare); }
.contact { display: grid; gap: 18px; }
.contact .panou h2 { font-size: 1.9rem; margin: 0 0 .35em; }
.contact .panou h2:not(:first-child) { margin-top: 1.2em; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }
.sec:has(+ .sectiune) { padding-bottom: clamp(24px, 4vw, 48px); }
@media (max-width: 599px) { .cifre-mici { grid-template-columns: 1fr; } }
.bara__nav a { padding-block: 10px; min-width: 44px; text-align: center; }