/* Denisse Beauty — foaia de stil a site-ului public (pagina principală, paginile legale, 404).
   Pagina de administrare are stilul ei separat (style.css), ca să nu fie afectată.

   Cuprins: 1. Culori și dimensiuni  2. Bază  3. Butoane  4. Bara de sus  5. Secțiuni
   6. Partea de sus (hero)  7. Banda de încredere  8. Servicii și prețuri  9. Stiluri și genele animate
   10. Înainte și după  11. Despre  12. Galerie  13. Recenzii  14. Programare  15. Instagram
   16. Bine de știut  17. Contact și hartă  18. Subsol  19. Cookie-uri  20. Butonul fix de pe telefon
   21. Paginile legale și 404  22. Animații  23. Tipărire */

/* ---------- 1. Culori și dimensiuni ---------- */
:root {
  --paper: #fbf7f4;      /* fundalul principal */
  --cream: #f5ede7;      /* fundalul secțiunilor alternate */
  --blush: #f3e6e0;
  --line: #ead8cf;
  --line-strong: #d9c1b6;
  --ink: #2f1d22;        /* textul */
  --muted: #75605a;      /* text secundar — contrast AA pe crem */
  --accent: #a3465f;     /* text roz (etichete, linkuri mici) — contrast AA */
  --rose: #e9a9b8;       /* doar decorativ */
  --rose-deep: #d06d88;  /* doar decorativ */
  --burgundy: #7b1d3c;
  --wine: #4a0f24;
  --gold: #b48a45;
  --gold-light: #e9d3a1;
  --ok: #2f7a4f;
  --err: #b3261e;

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Jost', 'Segoe UI', system-ui, sans-serif;

  --radius: 14px;
  --radius-lg: 20px;
  --wrap: 1120px;
  --sec: clamp(64px, 9vw, 112px);
  --antet-h: 66px;
  --umbra: 0 40px 70px -44px rgb(74 15 36 / .6);
  --umbra-mica: 0 18px 36px -26px rgb(74 15 36 / .55);
}

/* ---------- 2. Bază ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--antet-h) + 12px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--burgundy); text-underline-offset: .18em; }
a:hover { color: var(--wine); }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.contact :focus-visible, .subsol :focus-visible { outline-color: var(--paper); }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0; color: var(--wine); text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 5vw, 3.1rem); }
h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--accent); }
address { font-style: normal; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.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;
}
.eyebrow { margin: 0; font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* legătura „Sari la conținut”, vizibilă doar de la tastatură */
.sari {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 18px; border-radius: 999px;
  background: var(--burgundy); color: var(--paper); text-decoration: none; font-weight: 500;
}
.sari:focus { top: 12px; color: var(--paper); }

.demo-banner {
  padding: 8px 20px; text-align: center; font-size: .85rem;
  background: var(--wine); color: var(--blush);
}
.fara-js { margin: 0; padding: 12px 20px; text-align: center; background: var(--blush); color: var(--ink); }

/* ---------- 3. Butoane ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  border: 0; border-radius: 999px;
  background: var(--burgundy); color: var(--paper);
  font-weight: 500; letter-spacing: .02em; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; transition: background .2s, color .2s, box-shadow .2s, transform .15s;
}
.btn:hover { background: var(--wine); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.small { min-height: 40px; padding: 8px 18px; font-size: .9rem; }
.btn.ghost { background: transparent; color: var(--burgundy); box-shadow: inset 0 0 0 1.5px var(--burgundy); }
.btn.ghost:hover { background: var(--blush); color: var(--burgundy); }
.btn.light { background: var(--paper); color: var(--wine); }
.btn.light:hover { background: var(--blush); color: var(--wine); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* ---------- 4. Bara de sus ---------- */
.antet {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgb(251 247 244 / .92);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.antet.umbra { border-bottom-color: var(--line); box-shadow: 0 12px 30px -28px rgb(74 15 36 / .7); }
.antet-in { position: relative; display: flex; align-items: center; gap: 18px; min-height: var(--antet-h); }
.logo {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.5rem;
  color: var(--burgundy); text-decoration: none; white-space: nowrap;
}
.logo:hover { color: var(--burgundy); }
.logo img { width: auto; height: 40px; }
.logo img, .hero-logo { filter: saturate(1.25) contrast(1.15) brightness(.9) drop-shadow(0 1px 1px rgb(74 15 36 / .25)); }
.nav ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav a { position: relative; display: block; padding: 8px 0; color: var(--ink); font-size: .92rem; letter-spacing: .04em; text-decoration: none; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.nav a:hover::after { transform: scaleX(1); }
.antet-cta { white-space: nowrap; }
.meniu-btn { display: none; }
.burger, .burger::before, .burger::after {
  display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--wine);
  transition: transform .25s, background .25s;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.meniu-btn[aria-expanded="true"] .burger { background: transparent; }
.meniu-btn[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
.meniu-btn[aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .meniu-btn {
    display: inline-grid; place-items: center; flex: none;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: var(--paper); cursor: pointer;
  }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -30px rgb(74 15 36 / .6);
    display: none;
  }
  .nav.deschis { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 4px max(20px, env(safe-area-inset-left, 0px)) 18px; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; letter-spacing: .02em; }
  .nav a::after { display: none; }
}
/* pe telefoanele mici bara rămâne doar cu logo și meniu; „Programează-te” e în partea de sus și jos pe ecran */
@media (max-width: 480px) {
  .antet .antet-cta { display: none; }
}
@media (max-width: 360px) {
  .logo { font-size: 1.25rem; gap: 8px; }
  .logo img { height: 34px; }
}

/* ---------- 5. Secțiuni ---------- */
.sec { padding-block: var(--sec); }
.sec-crem { background: var(--cream); }
.section-head { display: grid; gap: 8px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head.centru { justify-items: center; text-align: center; }
.section-head h2::after {
  content: ""; display: block; width: 64px; height: 2px; margin-top: 12px; border-radius: 1px;
  background: linear-gradient(90deg, #c99a45, #f3d991);
}
.section-head.centru h2::after { margin-inline: auto; }
.section-head .sub { margin: 4px 0 0; max-width: 36rem; color: var(--muted); }

/* ---------- 6. Partea de sus (hero) ---------- */
.hero { background: linear-gradient(180deg, var(--cream), var(--paper)); overflow-x: clip; }
.hero-grid { display: grid; gap: 48px; align-items: center; padding-block: clamp(32px, 6vw, 72px) clamp(64px, 8vw, 104px); }
.hero-text { display: grid; gap: 18px; justify-items: start; }
.hero h1 { margin-left: -6px; perspective: 900px; }
.hero-logo { width: min(70vw, 290px); height: auto; }
.tag { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 4vw, 1.7rem); color: var(--wine); }
.hero-desc { margin: 0; max-width: 30rem; color: var(--muted); font-size: 1.02rem; }
.hero .actions { margin-top: 6px; }
.hero-foto { position: relative; isolation: isolate; justify-self: center; width: min(100%, 440px); }
.hero-mare { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 220px 220px 18px 18px; box-shadow: var(--umbra); }
.hero-foto::after { /* arc auriu subțire, decalat față de poză */
  content: ""; position: absolute; inset: -14px -14px 22px 22px; z-index: -1;
  border: 1px solid var(--gold-light); border-radius: 230px 230px 22px 22px;
}
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
@media (max-width: 859px) {
  .hero-text { justify-items: center; text-align: center; }
  .hero h1 { margin-left: 0; }
  .hero .actions { justify-content: center; }
  .hero-foto { width: min(84%, 360px); }
}

/* ---------- 7. Banda de încredere ---------- */
.incredere { border-block: 1px solid var(--line); background: var(--paper); }
.incredere-lista { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0 auto; padding-block: 20px; list-style: none; }
.incredere-item { display: grid; gap: 2px; justify-items: center; align-content: start; padding: 10px 8px; text-align: center; color: inherit; text-decoration: none; }
.incredere-item b { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--wine); }
.incredere-item span { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
a.incredere-item:hover b { text-decoration: underline; text-underline-offset: .18em; }
@media (min-width: 760px) {
  .incredere-lista { grid-template-columns: repeat(4, 1fr); }
  .incredere-lista > li + li { border-left: 1px solid var(--line); }
}

/* ---------- 8. Servicii și prețuri ---------- */
.svc-carduri { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; }
.svc-carduri > li { display: grid; }
.svc-card {
  display: grid; grid-template-rows: auto 1fr; width: 100%; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: 18px; background: #fff; text-align: left;
  box-shadow: 0 20px 40px -34px rgb(74 15 36 / .7);
  transition: transform .3s ease, box-shadow .3s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgb(74 15 36 / .8); }
.svc-foto { display: block; overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--blush); }
.svc-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.svc-card:hover .svc-foto img { transform: scale(1.05); }
.svc-corp { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 18px 18px 20px; }
.svc-titlu { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: var(--wine); }
.svc-text { font-size: .92rem; line-height: 1.55; color: var(--muted); }
.svc-jos { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.svc-pret { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.svc-pret b { font-family: var(--font-display); font-size: 1.25rem; color: var(--burgundy); }
.svc-link { font-size: .82rem; color: var(--accent); white-space: nowrap; }
@media (max-width: 520px) {
  .svc-card { grid-template-rows: none; grid-template-columns: 38% 1fr; }
  .svc-foto { aspect-ratio: auto; height: 100%; }
  .svc-corp { padding: 14px; gap: 6px; }
  .svc-titlu { font-size: 1.25rem; }
  .svc-text { font-size: .85rem; }
}

.preturi {
  margin-top: clamp(40px, 6vw, 64px); padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
}
.preturi-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.preturi-head h3 { font-size: 1.8rem; font-style: italic; }
.taburi, .stil-taburi { display: flex; flex-wrap: wrap; gap: 8px; }
.taburi button, .stil-taburi button {
  min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); cursor: pointer;
  font-size: .88rem; color: var(--ink); transition: background .2s, color .2s, border-color .2s;
}
.taburi button:hover, .stil-taburi button:hover { border-color: var(--burgundy); }
.taburi button[aria-pressed="true"], .stil-taburi button[aria-pressed="true"] { background: var(--burgundy); border-color: var(--burgundy); color: var(--paper); }
.cat { position: relative; }
/* numele categoriei e deja pe buton; titlul rămâne doar pentru cititoarele de ecran */
.cat h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 760px) { .cat { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.svc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline;
  width: 100%; padding: 12px 6px; border: 0; border-bottom: 1px dashed var(--line-strong); border-radius: 0;
  background: none; text-align: left; cursor: pointer;
}
.svc:hover { background: var(--blush); }
.svc .n { font-weight: 500; }
.svc .p { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--burgundy); font-variant-numeric: tabular-nums; }
.svc .d { font-size: .85rem; color: var(--muted); }
.svc .alege { font-size: .8rem; color: var(--accent); text-align: right; }
.note { margin: 18px 0 0; color: var(--muted); font-style: italic; font-size: .92rem; }

/* ---------- 9. Stiluri și genele animate ---------- */
.stil { display: grid; gap: 32px; }
.stil-taburi { justify-content: center; }
.stil-corp { display: grid; gap: 32px; align-items: center; }
.stil-foto {
  position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: var(--radius-lg); background: var(--blush); box-shadow: var(--umbra);
}
.stil-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.2s ease; }
.stil-foto img.on { opacity: 1; transform: none; }
.stil-info { display: grid; gap: 12px; justify-items: start; }
.stil-info h3 { font-size: clamp(2rem, 4vw, 2.6rem); font-style: italic; }
.stil-info p { margin: 0; max-width: 28rem; color: var(--muted); }
.stil-info .stil-pret { font-family: var(--font-display); font-size: 1.3rem; color: var(--burgundy); }
.stil-info .btn { margin-top: 8px; }
@media (min-width: 860px) { .stil-corp { grid-template-columns: 1fr 1fr; gap: 56px; } .stil-foto { justify-self: end; } }
@media (max-width: 859px) { .stil-info { justify-items: center; text-align: center; } }

.gene-scena {
  display: grid; gap: 8px 28px; align-items: center;
  margin-top: clamp(40px, 6vw, 64px); padding: 18px 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: radial-gradient(90% 120% at 35% 30%, #fff, var(--paper));
}
@media (min-width: 720px) { .gene-scena { grid-template-columns: 1.5fr 1fr; } }
.gene-scena canvas { width: 100%; height: 230px; }
@media (max-width: 719px) { .gene-scena canvas { height: 175px; } }
.gene-info { display: grid; gap: 6px; justify-items: start; }
.gene-tip { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 2.2rem; line-height: 1.1; color: var(--wine); }
.gene-pret { color: var(--muted); }
.gene-efect { display: inline-flex; gap: 2px; margin: 4px 0 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.gene-efect button { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: .85rem; cursor: pointer; transition: background .2s, color .2s; }
.gene-efect button[aria-pressed="true"] { background: var(--burgundy); color: var(--paper); }
.gene-volum { width: 100%; max-width: 320px; margin: 6px 0 10px; }
.gene-volum[hidden] { display: block !important; visibility: hidden; } /* păstrează locul, ca butonul de jos să nu sară */
.gene-volum input[type=range] {
  --plin: 0%;
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 32px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
}
.gene-volum input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--rose-deep) var(--plin), var(--line) var(--plin)); }
.gene-volum input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.gene-volum input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--rose-deep); }
.gene-volum input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c9, #c99a45 70%);
  border: 2px solid #fff; box-shadow: 0 2px 8px rgb(74 15 36 / .45);
}
.gene-volum input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c9, #c99a45 70%);
  border: 2px solid #fff; box-shadow: 0 2px 8px rgb(74 15 36 / .45);
}
.gene-trepte { display: flex; justify-content: space-between; margin-top: 2px; }
.gene-trepte button { min-width: 32px; min-height: 32px; padding: 4px 2px; border: 0; background: none; cursor: pointer; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.gene-trepte button.on { color: var(--burgundy); font-weight: 500; }

/* ---------- 10. Înainte și după ---------- */
.id-lista { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 420px)); justify-content: center; }
.id-item { display: grid; gap: 8px; margin: 0; }
.id-item figcaption { color: var(--muted); font-style: italic; text-align: center; }
.id-comp {
  position: relative; overflow: hidden; aspect-ratio: 800 / 945;
  border-radius: var(--radius); background: var(--blush); box-shadow: var(--umbra-mica);
  cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.id-comp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.id-comp .id-inainte { clip-path: inset(0 calc(100% - var(--poz)) 0 0); }
.id-eticheta {
  position: absolute; top: 12px; padding: 3px 10px; border-radius: 999px; pointer-events: none;
  background: rgb(74 15 36 / .75); color: var(--paper); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
}
.id-eticheta.st { left: 12px; }
.id-eticheta.dr { right: 12px; }
.id-linie {
  position: absolute; top: 0; bottom: 0; left: var(--poz); width: 3px; margin-left: -1.5px;
  background: linear-gradient(#f3d991, #c99a45); box-shadow: 0 0 8px rgb(0 0 0 / .35);
}
.id-linie:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.id-maner {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  border: 2px solid #fff; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c9, #c99a45 75%);
  color: var(--wine); font-weight: 600; letter-spacing: 2px; box-shadow: 0 4px 14px rgb(0 0 0 / .3);
}

/* ---------- 11. Despre ---------- */
.despre { display: grid; gap: 40px; align-items: center; }
.despre-foto img {
  width: min(100%, 420px); margin-inline: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 75% 30%;
  border-radius: 220px 220px 18px 18px; box-shadow: var(--umbra);
}
.despre-text { display: grid; gap: 14px; justify-items: start; }
.despre-text h2 { margin-bottom: 4px; }
.despre-text p { margin: 0; max-width: 34rem; }
.despre-text p + p { margin-top: 12px; }
.despre-text .actions { margin-top: 10px; }
@media (min-width: 860px) { .despre { grid-template-columns: .9fr 1.1fr; gap: 72px; } }

/* ---------- 12. Galerie ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--blush); transition: transform .5s ease, filter .5s ease; }
.gallery img:hover { transform: scale(1.02); filter: brightness(1.04); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ---------- 13. Recenzii ---------- */
.carusel { position: relative; }
.reviews {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0; padding: 4px 2px 14px; list-style: none;
  scrollbar-width: thin; scrollbar-color: var(--rose) transparent;
}
.reviews > li { flex: 0 0 min(78vw, 290px); scroll-snap-align: start; }
.review {
  display: grid; gap: 12px; margin: 0; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  box-shadow: 0 10px 30px -22px rgb(74 15 36 / .5);
}
.review img { width: 100%; border-radius: 12px; }
.review blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.35; color: var(--wine); }
.review figcaption { display: flex; align-items: center; gap: 10px; padding-inline: 4px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.review .stars { color: #a87d2e; letter-spacing: .1em; font-size: .95rem; }
.carusel-btn {
  position: absolute; top: 40%; z-index: 2; display: grid; place-items: center;
  width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--burgundy); font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 10px 24px -14px rgb(74 15 36 / .6);
}
.carusel-btn.st { left: -22px; }
.carusel-btn.dr { right: -22px; }
@media (max-width: 760px) { .carusel-btn { display: none; } }

/* ---------- 14. Programare ---------- */
.panel {
  display: grid; gap: 28px; max-width: 780px; margin-inline: auto; padding: clamp(18px, 4vw, 32px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--umbra);
}
.step { display: grid; gap: 12px; min-width: 0; }
.step-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--ink); }
.step-title .nr { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--accent); }
.step-note { font-weight: 400; font-size: .85rem; color: var(--muted); }
select, input, textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid var(--line-strong); border-radius: 10px; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 0; resize: vertical; }
select:focus, input:focus, textarea:focus { border-color: var(--burgundy); box-shadow: 0 0 0 3px rgb(123 29 60 / .15); outline: none; }
::placeholder { color: #8f7b75; opacity: 1; }
label { display: grid; gap: 6px; font-size: .92rem; }
.field-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.day {
  flex: 0 0 auto; display: grid; justify-items: center; width: 70px; padding: 10px 4px;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; cursor: pointer; scroll-snap-align: start;
}
.day:hover:not(:disabled) { border-color: var(--burgundy); }
.day .w { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.day .dd { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.day .m { font-size: .75rem; color: var(--muted); }
.day[aria-pressed="true"] { background: var(--burgundy); border-color: var(--burgundy); color: var(--paper); }
.day[aria-pressed="true"] .w, .day[aria-pressed="true"] .m { color: var(--blush); }
.day:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.slot {
  min-height: 44px; padding: 10px 0; border: 1.5px solid var(--line-strong); border-radius: 10px;
  background: #fff; cursor: pointer; font-variant-numeric: tabular-nums;
}
.slot:hover { border-color: var(--burgundy); }
.slot[aria-pressed="true"] { background: var(--burgundy); border-color: var(--burgundy); color: var(--paper); }
.hint { margin: 0; color: var(--muted); font-size: .92rem; }

.alese { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ales { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--blush); color: var(--wine); font-size: .9rem; }
.ales button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--paper); color: var(--burgundy); cursor: pointer; font-size: 1rem; line-height: 1; }
.alese .total { margin-left: 4px; color: var(--burgundy); font-size: .9rem; font-weight: 500; }

.summary { display: grid; gap: 2px; padding: 4px 0 4px 14px; border-left: 3px solid var(--rose-deep); }
.summary strong { font-family: var(--font-display); font-size: 1.35rem; color: var(--wine); }
.msg { margin: 0; font-size: .95rem; }
.msg.err { color: var(--err); }
.check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; min-height: 0; flex: none; padding: 0; accent-color: var(--burgundy); }
.check-row.regula { align-items: flex-start; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.check-row.regula input { margin-top: 2px; }
.legal-nota { font-size: .85rem; }

.done { justify-items: center; padding-block: 28px; text-align: center; }
.done h3 { font-size: 2rem; font-style: italic; }
.done p { margin: 0; }
.done .actions { justify-content: center; }
.taxa-msg { max-width: 30rem; padding: 10px 14px; border: 1px solid #ecd3a4; border-radius: 10px; background: #fdf3e2; color: #6b4a12; font-size: .95rem; }
.done .check { position: relative; width: 56px; height: 56px; }
.done .check svg { width: 100%; height: 100%; overflow: visible; }
.done .check circle { fill: var(--burgundy); stroke: #c99a45; stroke-width: 2.5; }
.done .check path { fill: none; stroke: #f3d991; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.done .check .sclipici {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--c); opacity: 0; pointer-events: none;
}
.done .check .sclipici:nth-child(3n) { border-radius: 1px; transform: rotate(45deg); }

/* ---------- 15. Instagram ---------- */
.insta { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.insta-item { min-width: 0; }
.insta-item .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: none !important; }
.insta-item blockquote { margin: 0; }
.insta-item blockquote > a { display: block; padding: 40px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--muted); text-align: center; }
.insta-more { margin: 24px 0 0; text-align: center; }

/* ---------- 16. Bine de știut (pregătire, îngrijire, întrebări) ---------- */
.info { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.info-card { padding: 24px 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.info-card h3 { margin-bottom: 10px; font-size: 1.5rem; font-style: italic; }
.info-card ul { margin: 0; padding-left: 1.1em; }
.info-card li + li { margin-top: 6px; }
.info-card li::marker { color: var(--gold); }
.faq { max-width: 780px; margin: clamp(40px, 6vw, 64px) auto 0; }
.faq > h3 { margin-bottom: 8px; font-size: 1.8rem; font-style: italic; text-align: center; }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--accent); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--muted); }

/* ---------- 17. Contact și hartă ---------- */
.contact { background: var(--wine); color: var(--blush); }
.contact h2 { color: var(--paper); }
.contact h2 em { color: var(--rose); }
.contact .eyebrow { color: var(--rose); }
.contact-layout { display: grid; gap: 28px; }
@media (min-width: 860px) { .contact-layout { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.contact-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-content: start; }
.contact-item { display: grid; gap: 4px; }
.contact-item .lbl { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.contact-item a, .contact-item span { color: var(--paper); font-size: 1.1rem; text-decoration: none; overflow-wrap: anywhere; }
.contact-item a:hover { color: var(--paper); text-decoration: underline; }
.install .btn { justify-self: start; }
.install-hint { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--blush); }
.map { display: grid; gap: 12px; width: 100%; }
.map iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius); background: var(--blush); }
.contact .map iframe { box-shadow: 0 0 0 1px rgb(233 169 184 / .35); }
.map .btn { justify-self: start; }
.done-map { width: 100%; max-width: 520px; margin-top: 8px; }
.done-map iframe { aspect-ratio: 16 / 9; border: 1px solid var(--line); }
.done-map .btn { justify-self: center; }

/* ---------- 18. Subsol ---------- */
.subsol { background: var(--wine); color: rgb(243 230 224 / .88); font-size: .9rem; border-top: 1px solid rgb(233 169 184 / .25); }
.subsol a { color: var(--paper); }
.subsol a:hover { color: var(--paper); }
.subsol-grid { display: grid; gap: 32px; padding-block: 56px 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.subsol-titlu { margin: 0 0 12px; font-family: var(--font-body); font-weight: 500; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.subsol ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.subsol p, .subsol address { margin: 0 0 10px; line-height: 1.6; }
.subsol-logo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; text-decoration: none; }
.subsol-logo img { width: auto; height: 36px; }
.subsol .link-btn { color: var(--paper); }
/* pictograma oficială SAL de pe anpc.ro, 250 x 50 px (Ordinul ANPC 449/2022, actualizat în 2026) */
.anpc-sal { display: block; width: 250px; height: 50px; border-radius: 4px; background: #fff; }
.anpc-sal img { width: 250px; height: 50px; object-fit: contain; }
.subsol-jos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 18px 22px; border-top: 1px solid rgb(233 169 184 / .25); font-size: .8rem; }
.subsol-jos a { color: var(--rose); }

/* ---------- 19. Cookie-uri ---------- */
.cookie-banner {
  position: fixed; z-index: 60; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: grid; gap: 12px; max-width: 580px; max-height: calc(100vh - 32px); margin-inline: auto; overflow-y: auto;
  padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
  box-shadow: 0 24px 60px -24px rgb(74 15 36 / .6); font-size: .9rem;
}
.cookie-banner h2 { font-size: 1.4rem; }
.cookie-banner p { margin: 0; line-height: 1.55; }
.cookie-optiuni { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.cookie-optiuni legend { padding: 0; margin-bottom: 4px; font-weight: 500; }
.comutator { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.comutator input { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--burgundy); grid-row: span 2; }
.comutator small { grid-column: 2; color: var(--muted); font-size: .8rem; line-height: 1.4; }
/* „Refuz” și „Accept tot” au exact aceeași mărime și același aspect (cerință pentru un acord liber) */
.cookie-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie-btn [data-act="setari"], .cookie-btn [data-act="salvez"] { grid-column: 1 / -1; order: 3; }
@media (min-width: 560px) {
  .cookie-btn { grid-template-columns: 1fr 1fr 1fr; }
  .cookie-btn [data-act="setari"], .cookie-btn [data-act="salvez"] { grid-column: auto; order: 0; }
}
.acord-cutie {
  display: grid; justify-items: center; gap: 12px; padding: 28px 20px; text-align: center;
  border: 1px dashed var(--rose-deep); border-radius: var(--radius); background: rgb(251 247 244 / .92); color: var(--ink);
}
.acord-cutie p { margin: 0; max-width: 26rem; font-size: .9rem; }
.contact .acord-cutie { background: rgb(251 247 244 / .08); color: var(--blush); border-color: rgb(233 169 184 / .6); }
.acord-loc { margin-bottom: 20px; }

/* ---------- 20. Butonul fix de pe telefon ---------- */
.cta-fix { display: none; }
@media (max-width: 760px) {
  .cta-fix {
    position: fixed; z-index: 40; left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px));
    display: inline-flex; transform: translate(-50%, 140%); opacity: 0; visibility: hidden;
    box-shadow: 0 16px 30px -12px rgb(74 15 36 / .6);
    transition: transform .35s ease, opacity .35s ease, visibility 0s .35s;
  }
  /* cât e ascuns are visibility: hidden, ca să nu poată fi atins nici de la tastatură */
  .cta-fix.vizibil { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
}

/* ---------- 21. Paginile legale și 404 ---------- */
.legal { padding-block: clamp(40px, 6vw, 72px) var(--sec); }
.legal article { max-width: 760px; margin-inline: auto; }
.legal h1 { margin-bottom: 6px; font-size: clamp(2.2rem, 5vw, 3rem); }
.legal .actualizat { margin: 0 0 32px; color: var(--muted); font-size: .9rem; }
.legal h2 { margin: 36px 0 10px; font-size: 1.6rem; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal .inapoi { margin-top: 40px; }
.pagina-404 { display: grid; justify-items: center; gap: 16px; padding-block: clamp(64px, 12vw, 140px); text-align: center; }
.pagina-404 .cod { font-family: var(--font-display); font-style: italic; font-size: clamp(4rem, 14vw, 7rem); line-height: 1; color: var(--rose-deep); }
.pagina-404 p { margin: 0; max-width: 30rem; color: var(--muted); }

/* ---------- 22. Animații ---------- */
/* logo-ul 3D: straturile din spate îi dau grosime, luciul trece peste auriu din când în când */
.logo3d { position: relative; display: block; perspective: 900px; }
.logo3d .stiva { position: relative; display: block; transform-style: preserve-3d; will-change: transform; }
.logo3d .hero-logo { position: relative; }
.logo3d .strat {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: translateZ(calc(var(--i) * -1.6px));
  filter: brightness(calc(.78 - var(--i) * .035)) saturate(1.35);
}
.logo3d .luciu {
  position: absolute; inset: 0; pointer-events: none; transform: translateZ(1px);
  -webkit-mask: url('../../poze/logo-site.png') center / 100% 100% no-repeat;
  mask: url('../../poze/logo-site.png') center / 100% 100% no-repeat;
  background: linear-gradient(110deg, transparent 42%, rgb(255 251 238 / .95) 50%, transparent 58%) 150% 0 / 300% 100% no-repeat;
  animation: luciu 7s ease-in-out 1.6s infinite;
}
.logo3d.gata { animation: din-lumina 1.8s cubic-bezier(.2, .7, .2, 1) both; }
.logo3d::before {
  content: ""; position: absolute; inset: -20%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #fff, transparent); opacity: 0; animation: blitz 1.8s ease-out;
}
@keyframes luciu { 0% { background-position: 150% 0; } 35%, 100% { background-position: -50% 0; } }
@keyframes din-lumina { from { opacity: 0; transform: scale(.86) rotateY(-30deg); } }
@keyframes blitz { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

/* bifa aurie după programare */
.done .check.joaca circle { stroke-dasharray: 164; animation: cerc .7s ease-out both; }
.done .check.joaca path { stroke-dasharray: 40; animation: bifa .45s .55s ease-out both; }
.done .check.joaca .sclipici { animation: sclipici 1.1s calc(.6s + var(--d)) cubic-bezier(.15, .7, .3, 1) both; }
@keyframes cerc { from { stroke-dashoffset: 164; fill: transparent; } 70% { fill: transparent; } }
@keyframes bifa { from { stroke-dashoffset: 40; } }
@keyframes sclipici {
  0% { opacity: 1; transform: translate(0, 0) scale(.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}

/* titlurile care urcă la locul lor, cu linia aurie care se desenează */
.titluri-anim .section-head { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.titluri-anim .section-head h2::after { width: 0; transition: width .9s .35s ease-out; }
.titluri-anim .section-head.vazut { opacity: 1; transform: none; }
.titluri-anim .section-head.vazut h2::after { width: 64px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 23. Tipărire ---------- */
@media print {
  .antet, .cookie-banner, .cta-fix, .sari, .meniu-btn { display: none !important; }
  body { background: #fff; }
}