/* Déniv’Café - DESIGNUL. Paleta: peretele caramiziu din sala, fresca lui Noa (piersica, salvie), lemnul.
   Ideea: dénivelé - profilul de urcare se deseneaza, cafeneaua e varful. Fara vh brut: calc(var(--vh) * N). */
:root {
  --c-fond: #f7efe6;
  --c-fond-2: #efe1d3;
  --c-text: #3a1c16;
  --c-text-2: #7b5d52;
  --c-accent: #b4472e;
  --c-accent-text: #fff;
  --c-linie: rgba(58, 28, 22, .13);
  --c-pret: #b4472e;
  --c-stele: #e08a5c;
  --brique: #3a1c16;
  --piersica: #eba680;
  --salvie: #8fa89b;
  --salvie-2: #6f8a7e;
  --f-titlu: "Cabinet Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --f-text: "Hanken Grotesk", system-ui, sans-serif;
  --raza: 18px;
  --raza-mare: 28px;
  --raza-btn: 999px;
  --c-cortina: var(--brique);
}

h1, h2, h3, .fresque__h { font-family: var(--f-titlu); font-weight: 800; letter-spacing: -.025em; line-height: 1.02; }
.eticheta { font-family: var(--f-text); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .74rem; color: var(--c-accent); }

/* ---------- logo ---------- */
.logo-dc { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-titlu); font-weight: 800; font-size: 1.32rem; letter-spacing: -.03em; color: var(--c-text); }
.logo-dc b { color: var(--c-accent); font-weight: 800; }
.logo-dc svg { width: 30px; height: 17px; fill: none; stroke: var(--c-accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- hero: caramiziu, portretul intr-un varf de munte ---------- */
.hero { position: relative; background: var(--brique); color: #fff; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 clamp(120px, 14vw, 190px); }
.hero__grid { position: relative; z-index: 2; display: grid; gap: 34px; align-items: center; }
.hero__et { color: var(--piersica); }
.hero__h1 { font-size: clamp(2.9rem, 8.4vw, 6.4rem); margin: .2em 0 .3em; color: #fff; }
.hero__h1 span { display: inline-block; }
.hero__accent { color: var(--piersica); }
.hero__sub { color: rgba(255, 255, 255, .78); max-width: 34ch; font-size: 1.08rem; }
.hero .link-sageata { color: #fff; }
.hero__foto { position: relative; justify-self: center; width: min(100%, 460px); }
.hero__foto picture, .hero__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  clip-path: polygon(0 16%, 26% 4%, 44% 12%, 66% 0, 100% 14%, 100% 100%, 0 100%); border-radius: 0 0 var(--raza-mare) var(--raza-mare); }
.hero__sommet { position: absolute; top: -2px; left: 66%; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 6px;
  background: var(--piersica); color: var(--brique); font-weight: 600; font-size: .8rem; padding: 7px 13px; border-radius: 999px; white-space: nowrap; }
.hero__sommet svg { width: 15px; height: 15px; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
  .hero__foto { justify-self: end; }
}

/* profilul de dénivelé */
.profil { display: block; width: 100%; height: clamp(90px, 13vw, 170px); overflow: visible; }
.profil__umplere { fill: var(--piersica); opacity: .14; }
.profil__linie { fill: none; stroke: var(--piersica); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.profil__pct { fill: var(--piersica); }
.hero__profil { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }

/* deschiderea (body.intro ramane pe body; animatii cu both): profilul se descopera de la stanga la varf,
   portretul iese din munte, steguletul apare pe varf, titlul urca */
body.intro .hero__profil { animation: urcare 1.8s cubic-bezier(.55, .1, .3, 1) .1s both; }
body.intro .hero__profil .profil__pct { transform-box: fill-box; transform-origin: center; animation: pct .5s cubic-bezier(.3, 1.6, .5, 1) 1.8s both, puls 2.4s ease-in-out 2.6s infinite; }
body.intro .hero__foto img { animation: munte 1.2s cubic-bezier(.7, 0, .2, 1) .45s both; }
body.intro .hero__sommet { animation: steag .6s cubic-bezier(.3, 1.4, .5, 1) 1.6s both; }
body.intro .hero__et, body.intro .hero__h1 span, body.intro .hero__sub, body.intro .hero .acciones { animation: urca .8s cubic-bezier(.2, .8, .2, 1) both; }
body.intro .hero__et { animation-delay: .15s; }
body.intro .hero__h1 span:nth-child(1) { animation-delay: .25s; }
body.intro .hero__h1 span:nth-child(2) { animation-delay: .4s; }
body.intro .hero__h1 span:nth-child(3) { animation-delay: .55s; }
body.intro .hero__sub { animation-delay: .8s; }
body.intro .hero .acciones { animation-delay: .95s; }
@keyframes urcare { from { clip-path: inset(-20px 100% -20px 0); } to { clip-path: inset(-20px -20px -20px 0); } }
@keyframes pct { from { opacity: 0; transform: scale(0); } }
@keyframes puls { 50% { transform: scale(1.5); } }
@keyframes munte { from { clip-path: polygon(0 100%, 26% 100%, 44% 100%, 66% 100%, 100% 100%, 100% 100%, 0 100%); } }
@keyframes steag { from { opacity: 0; transform: translate(-50%, -40%); } }
@keyframes urca { from { opacity: 0; transform: translateY(26px); } }

/* ---------- Derriere 2 cles ---------- */
.cle { display: grid; gap: 30px; align-items: center; }
.cle__foto img { border-radius: var(--raza-mare); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.cle__txt h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); margin: .25em 0 .4em; }
.cle__txt p { color: var(--c-text-2); max-width: 46ch; font-size: 1.06rem; }
.cle__txt b { color: var(--c-text); }
@media (min-width: 900px) { .cle { grid-template-columns: .8fr 1fr; gap: 70px; } .cle__foto { max-width: 400px; } }

/* ---------- momentul: straturile frescei ---------- */
.fresque { position: relative; overflow: hidden; background: #f3d6c2; min-height: clamp(420px, 52vw, 640px); display: grid; align-items: start; margin-block: clamp(30px, 5vw, 70px); }
.munte { position: absolute; left: -4%; right: -4%; bottom: -2px; height: 62%; }
.munte svg { width: 100%; height: 100%; display: block; }
.munte--3 path { fill: var(--piersica); }
.munte--2 path { fill: var(--salvie); }
.munte--1 { height: 40%; }
.munte--1 path { fill: var(--brique); }
.fresque__txt { position: relative; z-index: 2; padding-top: clamp(50px, 8vw, 100px); text-align: center; }
.fresque__h { font-size: clamp(2.2rem, 6.4vw, 5.2rem); color: var(--brique); margin: .3em 0 .35em; }
.fresque__sub { color: var(--c-text-2); }

/* ---------- carusel de poze (pielea arc) ---------- */
.poze-sec .cap { margin-bottom: 24px; }

/* ---------- recenziile: banda continua, lipita, linii fine ---------- */
.avize .banda__sina { gap: 0; }
.avis { margin: 0; width: clamp(280px, 30vw, 380px); padding: 22px 28px; border-left: 1px solid var(--c-linie); display: flex; flex-direction: column; gap: 12px; }
.avis__dplus { font-family: var(--f-titlu); font-weight: 800; color: var(--c-accent); font-size: .9rem; letter-spacing: .04em; }
.avis blockquote { margin: 0; font-size: 1.04rem; line-height: 1.5; }
.avis figcaption { font-weight: 600; font-size: .9rem; }
.avis figcaption span { color: var(--c-text-2); font-weight: 400; }

/* ---------- blocul final ---------- */
.final { position: relative; overflow: hidden; background: var(--brique); color: #fff; padding-bottom: clamp(110px, 12vw, 160px); }
.final h2 { color: #fff; font-size: clamp(2.2rem, 5.4vw, 4rem); }
.final p { color: rgba(255, 255, 255, .78); }
.final .eticheta { color: var(--piersica); }
.final .btn--plin { background: var(--piersica); color: var(--brique); }
.final > *:not(.profil) { position: relative; z-index: 1; }
.final__profil { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- capul paginilor ---------- */
.page-cap { position: relative; background: var(--brique); color: #fff; padding: clamp(46px, 7vw, 96px) 0 clamp(96px, 11vw, 150px); overflow: hidden; }
.page-cap h1 { color: #fff; font-size: clamp(3rem, 8vw, 6rem); margin: .15em 0 .2em; }
.page-cap p { color: rgba(255, 255, 255, .78); max-width: 48ch; }
.page-cap a { color: var(--piersica); }
.page-cap .eticheta { color: var(--piersica); }
.page-cap .container { position: relative; z-index: 1; }
.page-cap__profil { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- carta ---------- */
.onglet { display: grid; gap: 26px; align-items: center; }
.onglet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raza-mare); }
@media (min-width: 800px) { .onglet { grid-template-columns: 340px 1fr; gap: 50px; } }
.carte-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.carte-l li { display: flex; flex-direction: column; gap: 2px; padding: 15px 0; border-bottom: 1px solid var(--c-linie); }
.carte-l li:last-child { border-bottom: 0; }
.carte-l b { font-family: var(--f-titlu); font-weight: 800; font-size: 1.32rem; letter-spacing: -.015em; }
.carte-l span { color: var(--c-text-2); }
.carte-l--mic b { font-size: 1.05rem; }
.parfums { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.parfums li { background: var(--c-fond); padding: 9px 15px; border-radius: 999px; font-weight: 500; font-size: .95rem; }
.rubrique__pied { color: var(--c-text-2); font-size: .95rem; margin-top: 16px; }

/* ---------- le lieu ---------- */
.lieu { display: grid; gap: 30px; align-items: end; }
.lieu__mare img { width: 100%; border-radius: var(--raza-mare); }
.lieu__txt h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0 0 .4em; }
.lieu__txt p { color: var(--c-text-2); max-width: 44ch; }
@media (min-width: 900px) { .lieu { grid-template-columns: 1.4fr 1fr; gap: 56px; } }
.grila-lieu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grila-lieu img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raza); }
@media (min-width: 900px) { .grila-lieu { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.noa { display: grid; gap: 22px; align-items: center; }
.noa__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raza-mare); }
.noa__txt h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); margin: .3em 0 .45em; }
.noa__txt p { color: var(--c-text-2); }
@media (min-width: 900px) { .noa { grid-template-columns: 1.1fr 1fr; gap: 40px; } }
.equipe img { width: 100%; border-radius: var(--raza-mare); }
.equipe__leg { color: var(--c-text-2); margin-top: 14px; text-align: center; }

/* ---------- infos ---------- */
.infos { display: grid; gap: 18px; }
.infos h2 { font-size: 1.6rem; margin: 0 0 .5em; }
.infos h2:not(:first-child) { margin-top: 1.4em; }
.infos__adr, .infos__tel { font-size: 1.3rem; font-weight: 600; }
.infos__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raza-mare); }
@media (min-width: 900px) { .infos { grid-template-columns: 1fr 1fr .8fr; } }

/* ---------- subsol ---------- */
.subsol__logo { font-family: var(--f-titlu); font-weight: 800; font-size: 2rem; letter-spacing: -.03em; color: var(--piersica); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  body.intro .hero__profil .profil__pct { animation: pct .5s ease 1s both; }
}

/* taburile carti: pe telefon pe doua randuri, nu ies din ecran */
.taburi__lista { flex-wrap: wrap; overflow: visible; }
.taburi__tab[aria-selected="true"] { background: var(--c-accent); color: #fff; }
@media (max-width: 699px) {
  .fresque { min-height: 540px; }
  .munte { height: 46%; }
  .munte--1 { height: 28%; }
}
.equipe { max-width: 920px; }
.equipe img { aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 899px) { .hero__foto { margin-top: 26px; } }
.cle { margin-bottom: clamp(24px, 4vw, 40px); }
.bara__nav { gap: 2px; }
.bara__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 500; transition: background-color .2s; }
.bara__nav a:hover, .bara__nav a[aria-current="page"] { background: var(--c-fond-2); text-decoration: none; }