/* Espaço Facial Freguesia - DESIGNUL. Paleta: brandul lor monocrom (cerneala + hartie gri-calda din story-uri),
   bronzul stins pentru detalii. Ideea: "ninguém sabe dizer o que mudou" - axa de simetrie din iconitele lor = glisorul.
   Fara vh brut: calc(var(--vh) * N). */
@property --poz { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
:root {
  --c-fond: #f1eeea;
  --c-fond-2: #e7e2dc;
  --c-text: #161514;
  --c-text-2: #6d665f;
  --c-accent: #161514;
  --c-accent-text: #fff;
  --c-linie: rgba(22, 21, 20, .12);
  --c-pret: #8a6a4c;
  --c-stele: #c49a62;
  --cerneala: #161514;
  --cerneala-2: #24221f;
  --bronz: #c9a77e;
  --f-titlu: "Red Hat Display", system-ui, sans-serif;
  --f-text: "Red Hat Text", system-ui, sans-serif;
  --f-it: "Newsreader", Georgia, serif;
  --raza: 16px;
  --raza-mare: 26px;
  --raza-btn: 10px;
  --c-cortina: var(--cerneala);
}

h1, h2, h3 { font-family: var(--f-titlu); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
em, .it { font-family: var(--f-it); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.eticheta { font-family: var(--f-text); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; color: var(--c-text-2); }
.sec { padding-block: clamp(64px, 9vw, 120px); }

/* ---------- bara: logo-ul lor real ---------- */
.bara__logo img { height: 30px; }

/* ---------- hero: cerneala, before/after-ul real matuirat de axa ---------- */
.hero { background: var(--cerneala); color: #fff; overflow: hidden; padding: clamp(34px, 6vw, 84px) 0 clamp(48px, 7vw, 96px); position: relative; }
.hero__grid { display: grid; gap: 36px; align-items: center; }
.hero .eticheta { color: var(--bronz); }
.hero__h1 { font-size: clamp(2.75rem, 7.6vw, 6.1rem); color: #fff; margin: .25em 0 .35em; }
.hero__h1 > span { display: block; }
.hero__h1 em { color: var(--bronz); }
.hero__sub { color: rgba(255, 255, 255, .74); max-width: 36ch; font-size: 1.08rem; line-height: 1.55; }
.hero .acciones { margin-top: 26px; }
.hero .link-sageata { color: #fff; }
.hero .btn--plin { background: #fff; color: var(--cerneala); }
.hero__ba { position: relative; width: min(100%, 520px); justify-self: center; }
.hero__ba .ba { border-radius: var(--raza-mare); }
.hero__nota { margin-top: 12px; font-size: .78rem; color: rgba(255, 255, 255, .5); line-height: 1.45; }
.hero__ax { position: absolute; left: 50%; top: -18px; bottom: -18px; width: 1px; background: rgba(255, 255, 255, .22); pointer-events: none; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; gap: 56px; }
  .hero__ba { justify-self: end; }
}

/* glisorul = axa de simetrie: linie fina, maner mic cu doua sageti */
.ba__linie { width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.ba__linie::after { content: "\2039\00a0\203a"; width: 40px; height: 40px; font: 600 1.1rem/1 var(--f-text); background: #fff; color: var(--cerneala); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.ba__et { background: rgba(22, 21, 20, .62); font-family: var(--f-text); font-weight: 500; }

/* deschiderea: axa se deseneaza de sus in jos, apoi matura poza de la dreapta la mijloc; titlul urca.
   --poz animat doar cu fill backwards: dupa animatie glisorul ramane al vizitatorului */
body.intro .hero__ax { animation: ax 1s cubic-bezier(.6, 0, .2, 1) .1s both; }
body.intro .hero__ba .ba { animation: matura 1.5s cubic-bezier(.65, 0, .25, 1) .9s backwards, apare .7s ease .2s both; }
body.intro .hero .eticheta, 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 .eticheta { animation-delay: .1s; }
body.intro .hero__h1 > span:nth-child(1) { animation-delay: .22s; }
body.intro .hero__h1 > span:nth-child(2) { animation-delay: .9s; }

body.intro .hero__sub { animation-delay: 1.05s; }
body.intro .hero .acciones { animation-delay: 1.2s; }
@keyframes ax { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes matura { from { --poz: 100%; } to { --poz: 50%; } }
@keyframes apare { from { opacity: 0; } }
@keyframes urca { from { opacity: 0; transform: translateY(24px); } }

/* ---------- "Fez alguma coisa?" - replicile ca bule de mesaj ---------- */
.bule { display: grid; gap: 40px; align-items: center; }
.bule__lista { display: flex; flex-direction: column; gap: 12px; }
.bula { max-width: 88%; padding: 14px 20px; border-radius: 22px 22px 22px 6px; background: #fff; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-family: var(--f-it); font-style: italic; box-shadow: 0 1px 0 var(--c-linie); width: fit-content; }
.bula:nth-child(2) { align-self: center; }
.bula--ea { align-self: flex-end; background: var(--cerneala); color: #fff; border-radius: 22px 22px 6px 22px; }
.bula small { display: block; font: 500 .7rem/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); margin-bottom: 4px; font-style: normal; }
.bula--ea small { color: var(--bronz); }
.bule__txt h2 { margin: .3em 0 .4em; }
.bule__txt p { color: var(--c-text-2); max-width: 40ch; }
@media (min-width: 900px) { .bule { grid-template-columns: .95fr 1.05fr; gap: 80px; } }

/* ---------- semnatura: "Onde te incomoda?" - iconitele lor desenate ca taburi ---------- */
.zone .taburi__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex-wrap: wrap; overflow: visible; margin-bottom: 26px; }
.zone .taburi__tab { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px 14px; border-radius: var(--raza); background: transparent; border: 1px solid var(--c-linie); color: var(--c-text); font: 600 .84rem/1.2 var(--f-text); min-height: 0; height: auto; text-align: center; }
.zone .taburi__tab img { width: auto; height: clamp(54px, 9vw, 84px); background: none; opacity: .55; transition: opacity .25s; }
.zone .taburi__tab[aria-selected="true"] { background: #fff; border-color: var(--cerneala); }
.zone .taburi__tab[aria-selected="true"] img { opacity: 1; }
.zona { display: grid; gap: 28px; align-items: center; }
.zona__ba { display: grid; grid-template-columns: 1fr; gap: 14px; }
.zona__ba--2 { grid-template-columns: 1fr 1fr; }
.zona__txt h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .4em; }
.zona__txt p { color: var(--c-text-2); max-width: 42ch; }
.zona__txt .acciones { margin-top: 20px; }
.zona__por { font-size: .82rem; color: var(--c-text-2); margin-top: 10px; }
.aviso { font-size: .76rem; color: var(--c-text-2); margin-top: 22px; line-height: 1.5; max-width: 70ch; }
@media (min-width: 900px) { .zona { grid-template-columns: 1.3fr .7fr; gap: 56px; } }
@media (max-width: 899px) {
  .zone .taburi__lista { gap: 6px; }
  .zone .taburi__tab { padding: 12px 4px 10px; font-size: .74rem; }
}

/* ---------- moment: cortina dubla pe cabinet ---------- */
.cabinet { position: relative; }
.cabinet .moment__media { height: min(118vw, calc(var(--vh) * 78)); border-radius: var(--raza-mare); overflow: hidden; }
.cabinet .moment__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cabinet__txt { margin-top: 26px; display: grid; gap: 10px; }
.cabinet__txt p.mare { font-family: var(--f-titlu); font-weight: 600; letter-spacing: -.03em; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.08; max-width: 22ch; }
.cabinet__txt p.mare em { color: var(--c-pret); }
@media (min-width: 900px) {
  .cabinet { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
  .cabinet .moment__media { height: calc(var(--vh) * 74); max-height: 760px; }
  .cabinet__txt { margin-top: 0; gap: 22px; }
  .a-cl .cabinet { display: block; } .a-cl .cabinet .moment__media { max-width: 680px; margin-inline: auto; }
}

/* ---------- echipa ---------- */
.echipa { display: grid; gap: 34px; align-items: center; }
.echipa__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--raza-mare); }
.echipa__lista { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 0; }
.echipa__lista li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--c-linie); }
.echipa__lista li span { color: var(--c-text-2); font-size: .9rem; text-align: right; }
.echipa__lista b { font-weight: 600; }
@media (min-width: 900px) { .echipa { grid-template-columns: .8fr 1.2fr; gap: 72px; } .echipa__foto { max-width: 440px; } }

/* ---------- perechi antes|depois in banda ---------- */
.pp { background: #fff; border-radius: var(--raza); overflow: hidden; }
.pp__img { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #fff; }
.pp__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.pp__t { display: flex; justify-content: space-between; padding: 10px 14px; font-size: .8rem; color: var(--c-text-2); }
.pp__t b { color: var(--c-text); font-weight: 600; }

/* ---------- recenzii: banda continua lipita pe cerneala ---------- */
.rec-sec { background: var(--cerneala); color: #fff; }
.rec-sec .nota-mare__n { color: #fff; }
.rec-sec .nota-mare__d span, .rec-sec .link-sageata { color: rgba(255, 255, 255, .78); }
.rec-sec .banda { --banda-gap: 0px; border-block: 1px solid rgba(255, 255, 255, .12); margin-top: 30px; }
.rec { margin: 0; padding: 26px 30px; border-right: 1px solid rgba(255, 255, 255, .12); height: 100%; }
.rec blockquote { margin: 0; font-family: var(--f-it); font-style: italic; font-size: 1.12rem; line-height: 1.45; color: #fff; }
.rec figcaption { margin-top: 12px; font-size: .8rem; color: var(--bronz); letter-spacing: .04em; }

/* ---------- final ---------- */
.final h2 em { color: var(--bronz); }

/* ---------- pagini interioare ---------- */
.cap-pag { padding: clamp(40px, 7vw, 90px) 0 clamp(18px, 3vw, 30px); }
.cap-pag h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); margin: .2em 0 .25em; }
.cap-pag h1 em { color: var(--c-pret); }
.cap-pag p.lead { color: var(--c-text-2); max-width: 46ch; font-size: 1.08rem; }
.trat { display: grid; gap: 18px; }
.trat__grup { background: #fff; border-radius: var(--raza-mare); padding: clamp(22px, 3.4vw, 38px); }
.trat__grup header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.trat__grup header img { height: 52px; width: auto; background: none; }
.trat__grup h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.trat__grup ul { list-style: none; margin: 0; padding: 0; }
.trat__grup li { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--c-linie); }
.trat__grup li:first-child { border-top: 0; }
.trat__grup li span { color: var(--c-text-2); font-size: .88rem; text-align: right; }
.trat__nota { color: var(--c-text-2); margin-top: 18px; }
@media (min-width: 900px) { .trat { grid-template-columns: 1fr 1fr; } }
.res-grila { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.res-grila figure { margin: 0; }
.res-grila figcaption { padding-top: 10px; font-size: .88rem; color: var(--c-text-2); }
.res-grila figcaption b { color: var(--c-text); font-weight: 600; display: block; font-size: 1rem; }
.rede { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.rede div { background: #fff; border-radius: var(--raza); padding: 22px; }
.rede b { display: block; font-family: var(--f-titlu); font-size: 2rem; letter-spacing: -.03em; font-weight: 600; }
.rede span { color: var(--c-text-2); font-size: .9rem; }
.contact { display: grid; gap: 18px; }
.contact .panou h2 { font-size: 1.5rem; margin-bottom: .5em; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }

.res-grila .ba { aspect-ratio: 4 / 5; }
.sec:has(+ .sectiune) { padding-bottom: clamp(24px, 4vw, 48px); }
@media (min-width: 900px) { .trat__grup:last-child:nth-child(odd) { grid-column: 1 / -1; } }