/*
 * DJ Mario Brasov
 *
 * Registru: lumina, hartie, cerneala. Inversarea deliberata a nisei, unde toti trei
 * concurentii sunt fundal intunecat cu lumini colorate saturate.
 * Motivatia completa: _design/analiza-si-directie.md
 *
 * Un singur fisier, zero import-uri externe, fonturi gazduite local.
 */

/* ============================================================
   FONTURI
   Self-hosted. Bugetul interzice apelurile HTTP externe, deci
   Google Fonts CDN e exclus. 76 KB total, din 447 KB disponibili.
   ============================================================ */

@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/instrument-serif-400-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/instrument-serif-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Public Sans";
	src: url("../fonts/public-sans-var-latin-ext.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Public Sans";
	src: url("../fonts/public-sans-var-latin.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   SIMBOLURI
   ============================================================ */

:root {
	/* Hartie, cerneala, sigiliu. Trei culori, nu mai multe. */
	--hartie: #F7F3EC;
	--hartie-2: #EDE7DC;   /* o treapta mai adanca, pentru suprafete */
	--cerneala: #17130E;
	--cerneala-2: #57503F; /* text secundar */
	--linie: #D2C9B8;
	--sigiliu: #8C1C2B;       /* accentul: butoane, cifre cheie, ancora */
	--sigiliu-adanc: #6E1522; /* fundalul ancorei */
	--sigiliu-clar: #B8455A;  /* pe fundal de sigiliu */

	--serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--lat: 1440px;
	--ingust: 720px;
	--gutiera: clamp(1.25rem, 4.5vw, 4rem);

	/* Ritm vertical. Sectiunile difera deliberat in densitate.
	   Valorile sunt mai mici decat par necesare: doua sectiuni alaturate isi
	   aduna spatiile, iar regula de mai jos taie dublarea. */
	--rasuflare: clamp(3rem, 6vw, 5.5rem);
	--rasuflare-mica: clamp(2.25rem, 4vw, 3.5rem);
}

/* ============================================================
   BAZA
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

/* Granulatia hartiei.
   "Hartie, cerneala, sigiliu" ramane o vorba goala daca fundalul e un beige plat.
   Zgomotul e generat dintr-un filtru SVG, in data URI: cateva sute de octeti,
   zero cereri HTTP, si transforma suprafata din culoare in material. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.42;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: no-preference) {
	body::before { will-change: auto; }
}

body {
	margin: 0;
	background: var(--hartie);
	color: var(--cerneala);
	font-family: var(--sans);
	font-size: 1.0625rem;
	font-weight: 380;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, picture, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 400;
	/* 1.12, nu 1.04: virgulele de sub s si t descind mult in Instrument Serif
	   si ating randul urmator la titlurile mari. Romana are nevoie de aerul asta. */
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.75rem); }
h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }

p { margin: 0 0 1.1em; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--sigiliu); }

:focus-visible {
	outline: 2px solid var(--sigiliu);
	outline-offset: 3px;
}

.ecran-doar {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sari-la-continut {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--cerneala); color: var(--hartie);
	padding: 0.85rem 1.4rem; font-weight: 600;
}
.sari-la-continut:focus { left: 0; }

/* ============================================================
   STRUCTURA
   ============================================================ */

.invelis {
	width: 100%;
	max-width: var(--lat);
	margin-inline: auto;
	padding-inline: var(--gutiera);
}

.invelis--ingust { max-width: var(--ingust); }

.sectiune { padding-block: var(--rasuflare); }
.sectiune--stramta { padding-block: var(--rasuflare-mica); }

/* Doua sectiuni pe acelasi fundal nu au nevoie de spatiu dublu intre ele.
   Fara asta, golul dintre ele e cat o jumatate de ecran si ritmul se pierde. */
.sectiune + .sectiune { padding-top: 0; }

/* Sectiunile pe fundal inchis isi pastreaza respiratia proprie. */
.plata + .sectiune,
.zone + .sectiune,
.sectiune + .plata,
.sectiune + .zone { padding-top: var(--rasuflare); }

/* Eticheta de sectiune: mica, spatiata, cu o linie deasupra.
   Inlocuieste titlul centrat de sectiune, care e reflexul de template. */
.eticheta {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cerneala-2);
	padding-top: 0.9rem;
	border-top: 1px solid var(--cerneala);
	margin-bottom: 2.5rem;
	display: block;
}

.sectiune__titlu { max-width: 20ch; margin-bottom: 0.5em; }

.sectiune__intro {
	max-width: 54ch;
	color: var(--cerneala-2);
	font-size: 1.125rem;
}

/* ============================================================
   BUTOANE
   ============================================================ */

.buton {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1rem 1.75rem;
	min-height: 52px;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 1px solid var(--cerneala);
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.buton--principal {
	background: var(--sigiliu);
	border-color: var(--sigiliu);
	color: var(--hartie);
}
.buton--principal:hover {
	background: var(--sigiliu-adanc);
	border-color: var(--sigiliu-adanc);
	color: var(--hartie);
}

.buton--secundar {
	background: transparent;
	color: var(--cerneala);
}
.buton--secundar:hover {
	background: var(--cerneala);
	color: var(--hartie);
}

/* ============================================================
   ANTET
   ============================================================ */

.antet {
	border-bottom: 1px solid var(--linie);
	background: var(--hartie);
}

.antet__interior {
	display: flex;
	align-items: baseline;
	gap: 2rem;
	min-height: 78px;
	padding-block: 1.25rem;
}

.marca {
	font-family: var(--serif);
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.antet__navigatie { margin-left: auto; }

.meniu {
	display: flex;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.meniu a {
	font-size: 0.9375rem;
	font-weight: 450;
	color: var(--cerneala-2);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}
.meniu a:hover,
.meniu .current-menu-item > a {
	color: var(--cerneala);
	border-bottom-color: var(--cerneala);
}

.antet__telefon {
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid var(--sigiliu);
	padding-bottom: 2px;
	color: var(--sigiliu);
}

.antet__comutator {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--cerneala);
	padding: 0.6rem 0.9rem;
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}

@media (max-width: 1000px) {
	.antet__navigatie {
		display: none;
		width: 100%;
		order: 3;
		margin-left: 0;
	}
	.antet__navigatie--deschis { display: block; }
	.antet__interior { flex-wrap: wrap; }
	.meniu { flex-direction: column; gap: 0; padding-block: 1rem 0.5rem; }
	.meniu a { display: block; padding-block: 0.7rem; }
	.antet__comutator { display: block; }
	.antet__telefon { display: none; }
}

/* ============================================================
   EROU
   Asimetric, aliniat la stanga. Nimic centrat.
   ============================================================ */

.erou { padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(2.5rem, 6vw, 4rem); }

.erou__grila {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.erou__supratitlu {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cerneala-2);
	margin-bottom: 1.75rem;
}

.erou__titlu { margin-bottom: 0.35em; }

/* Fraza care poarta diferentiatorul. Italicul o desprinde de restul titlului
   fara sa adauge o culoare in plus. */
.erou__titlu em {
	font-style: italic;
	color: var(--sigiliu);
}

.erou__text {
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	color: var(--cerneala-2);
	max-width: 46ch;
	margin-bottom: 2.25rem;
}

.erou__actiuni {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

.erou__program {
	font-size: 0.875rem;
	color: var(--cerneala-2);
	margin-top: 1.5rem;
	margin-bottom: 0;
}

/* Coloana din dreapta a eroului: cifrele, ca date, nu ca badge-uri. */
.erou__lateral {
	display: grid;
	gap: 1.75rem;
	justify-items: end;
}

@media (max-width: 900px) {
	.erou__grila { grid-template-columns: 1fr; }
	.erou__lateral { justify-items: start; }
}

/* ============================================================
   DATE — cifrele clientului ca material tipografic
   ============================================================ */

.data__valoare {
	font-family: var(--serif);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1;
	display: block;
}

.data__valoare .unitate {
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	margin-left: 0.35rem;
	color: var(--cerneala-2);
}

.data__eticheta {
	display: block;
	font-size: 0.8125rem;
	color: var(--cerneala-2);
	margin-top: 0.4rem;
	max-width: 22ch;
}

/* ============================================================
   ANCORA — linia platii
   Singurul lucru din nisa pe care niciun concurent nu-l poate desena,
   pentru ca toti au un punct de plata in plus, la inceput.
   ============================================================ */

/* Ancora e cel mai important element al paginii, deci primeste culoarea,
   nu doar contrastul. Un bloc plin de sigiliu, intre doua suprafete de hartie. */
.plata {
	background: var(--sigiliu-adanc);
	color: var(--hartie);
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	position: relative;
	z-index: 2;
}

.plata__titlu {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.16;
	max-width: 24ch;
	margin-bottom: 3.5rem;
	color: var(--hartie);
}

.plata__titlu em { font-style: italic; }

.plata__axa {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	padding-top: 2.75rem;
}

/* Linia propriu-zisa */
.plata__axa::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(247, 243, 236, 0.35);
}

.moment { position: relative; }

/* Punctul de pe axa. Al doilea sta la capatul din dreapta, nu la mijlocul
   grilei: axa trebuie sa se termine acolo unde se termina si plata. */
.moment::before {
	content: "";
	position: absolute;
	top: -2.5rem;
	left: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--hartie);
}

.moment--dupa::before { left: auto; right: 0; }

.moment--acum::before {
	background: transparent;
	border: 1px solid var(--hartie);
}

.moment__cand {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(247, 243, 236, 0.65);
	display: block;
	margin-bottom: 0.75rem;
}

.moment__suma {
	font-family: var(--serif);
	font-size: clamp(2.5rem, 5.5vw, 4rem);
	line-height: 1;
	display: block;
	margin-bottom: 0.6rem;
}

.moment--acum .moment__suma { color: var(--hartie); }

.moment__ce {
	color: rgba(247, 243, 236, 0.78);
	max-width: 30ch;
	margin: 0;
	font-size: 1rem;
}

.plata__nota {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(247, 243, 236, 0.25);
	font-size: 0.9375rem;
	color: rgba(247, 243, 236, 0.7);
	max-width: 58ch;
	margin-bottom: 0;
}

@media (max-width: 700px) {
	.plata__axa { grid-template-columns: 1fr; gap: 3rem; }
	.plata__axa::before { display: none; }
	.moment { padding-left: 1.75rem; }
	.moment::before { top: 0.45rem; left: 0; }
	.moment::after {
		content: "";
		position: absolute;
		left: 5px;
		top: 1.4rem;
		bottom: -2.4rem;
		width: 1px;
		background: rgba(247, 243, 236, 0.35);
	}
	.moment:last-child::after { display: none; }
}

/* ============================================================
   INDEX DE SERVICII
   Nu carduri. Un index editorial cu linii.
   ============================================================ */

.index { border-top: 1px solid var(--cerneala); }

.index__rand {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
	gap: clamp(1rem, 4vw, 3rem);
	align-items: baseline;
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
	border-bottom: 1px solid var(--linie);
	text-decoration: none;
	transition: padding-left 220ms cubic-bezier(0.2, 0, 0, 1), background 220ms ease;
}

.index__rand:hover {
	background: var(--hartie-2);
	padding-left: 1.25rem;
	color: inherit;
}

.index__nume {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
}

.index__descriere {
	color: var(--cerneala-2);
	font-size: 1rem;
	margin: 0;
}

.index__pret {
	font-size: 0.9375rem;
	color: var(--cerneala-2);
	white-space: nowrap;
	text-align: right;
}

.index__pret strong {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.5rem;
	color: var(--cerneala);
	line-height: 1.2;
}

@media (max-width: 760px) {
	.index__rand {
		grid-template-columns: 1fr auto;
		row-gap: 0.5rem;
	}
	.index__descriere { grid-column: 1 / -1; }
}

/* ============================================================
   RUNDOWN — fisa de eveniment
   Al doilea mecanism. Fiecare tip de eveniment are alt program,
   deci cele patru pagini de serviciu nu mai arata identic.
   ============================================================ */

.rundown { border-top: 1px solid var(--cerneala); max-width: 720px; }

.rundown__rand {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 1.5rem;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--linie);
	align-items: baseline;
}

.rundown__ora {
	font-size: 0.9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sigiliu);
	white-space: nowrap;
}

.rundown__ora--fara { color: var(--cerneala-2); font-weight: 450; }

.rundown__ce { margin: 0; }

.rundown__detaliu {
	display: block;
	font-size: 0.9375rem;
	color: var(--cerneala-2);
	margin-top: 0.15rem;
}

@media (max-width: 560px) {
	.rundown__rand { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ============================================================
   FISA TEHNICA
   ============================================================ */

.fisa {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
}

.fisa__element {
	background: var(--hartie);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* ============================================================
   PACHETE
   Singurul loc unde cardul ramane: delimiteaza entitati comparabile.
   ============================================================ */

.pachete {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
}

.pachet {
	background: var(--hartie);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pachet--evidentiat { background: var(--hartie-2); }

.pachet__titlu {
	font-family: var(--serif);
	font-size: 1.5rem;
	margin: 0;
}

.pachet__pret { margin: 0; }

.pachet__pret-eticheta {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cerneala-2);
	margin-bottom: 0.25rem;
}

.pachet__pret strong {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2rem, 3vw, 2.5rem);
	line-height: 1;
}

.pachet__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: 0.9375rem;
	color: var(--cerneala-2);
}

.pachet__lista li {
	padding-left: 1.1rem;
	position: relative;
}

/* Linie scurta, nu bifa. Bifa e emoji-ul de care fugim. */
.pachet__lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0.55rem;
	height: 1px;
	background: var(--sigiliu);
}

.pachet .buton { margin-top: auto; align-self: start; }

/* ============================================================
   ECHIPAMENTE
   ============================================================ */

.echipamente {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.echipament__titlu {
	font-family: var(--serif);
	font-size: 1.25rem;
	margin: 0 0 0.4rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--cerneala);
}

.echipament__text {
	color: var(--cerneala-2);
	font-size: 0.9375rem;
	margin: 0;
}

/* ============================================================
   GALERIE
   ============================================================ */

.galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

.galerie__element { margin: 0; }
.galerie__element img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ============================================================
   RECENZII
   ============================================================ */

.recenzii {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
}

.recenzie { margin: 0; }

.recenzie__nota {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	color: var(--sigiliu);
	margin-bottom: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.recenzie__text {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	font-family: var(--serif);
	font-size: 1.25rem;
	line-height: 1.45;
}
.recenzie__text p:last-child { margin-bottom: 0; }

.recenzie__autor {
	font-size: 0.875rem;
	color: var(--cerneala-2);
	padding-top: 0.9rem;
	border-top: 1px solid var(--linie);
}

.recenzie__sursa { display: block; margin-top: 0.15rem; }

/* ============================================================
   INTREBARI FRECVENTE
   Lista de definitii, nu acordeon in carduri.
   ============================================================ */

.faq { border-top: 1px solid var(--cerneala); }

.faq__element { border-bottom: 1px solid var(--linie); }

.faq__intrebare {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding-block: 1.35rem;
	font-family: var(--serif);
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	line-height: 1.35;
	min-height: 52px;
}

.faq__intrebare::-webkit-details-marker { display: none; }

/* Semnul plus/minus, desenat dintr-un singur pseudo-element cu doua gradiente.
   Doua pseudo-elemente separate nu se pot suprapune intr-un flex container:
   fiecare isi ocupa propriul loc in rand. */
.faq__intrebare::after {
	content: "";
	flex-shrink: 0;
	width: 0.85rem;
	height: 0.85rem;
	position: relative;
	top: 0.15em;
	background-image:
		linear-gradient(var(--cerneala), var(--cerneala)),
		linear-gradient(var(--cerneala), var(--cerneala));
	background-size: 100% 1px, 1px 100%;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: background-size 220ms cubic-bezier(0.2, 0, 0, 1), transform 220ms ease;
}

/* Deschis: bara verticala se strange in centru si ramane doar minusul. */
.faq__element[open] .faq__intrebare::after {
	background-size: 100% 1px, 1px 0;
	transform: rotate(180deg);
}

.faq__element[open] .faq__intrebare { color: var(--sigiliu); }

.faq__raspuns {
	color: var(--cerneala-2);
	padding-bottom: 1.5rem;
	max-width: 62ch;
}
.faq__raspuns p:last-child { margin-bottom: 0; }

/* ============================================================
   APEL FINAL
   ============================================================ */

.apel { padding-block: var(--rasuflare); border-top: 1px solid var(--cerneala); }

.apel__titlu { max-width: 18ch; margin-bottom: 0.6em; }
.apel__titlu em { font-style: italic; color: var(--sigiliu); }

.apel__text { color: var(--cerneala-2); max-width: 46ch; font-size: 1.125rem; }

.apel__actiuni {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

/* ============================================================
   CONTINUT EDITORIAL
   ============================================================ */

.proza { max-width: 68ch; }
.proza h2 { margin-top: 1.8em; margin-bottom: 0.5em; }
.proza h3 { margin-top: 1.6em; margin-bottom: 0.4em; }
.proza ul, .proza ol { padding-left: 1.2rem; }
.proza li { margin-bottom: 0.4em; }
.proza img { margin-block: 2rem; }
.proza blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--sigiliu);
	font-family: var(--serif);
	font-size: 1.35rem;
	line-height: 1.35;
}
.proza table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 2rem;
	display: block;
	overflow-x: auto;
}
.proza th, .proza td {
	border-bottom: 1px solid var(--linie);
	padding: 0.7rem 0.9rem 0.7rem 0;
	text-align: left;
}
.proza th { font-weight: 600; }

/* ============================================================
   PAGINI SI ARTICOLE
   ============================================================ */

.pagina__antet, .articol__antet {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.pagina__titlu, .articol__titlu { max-width: 20ch; margin-bottom: 0.3em; }

.articol__meta {
	font-size: 0.875rem;
	color: var(--cerneala-2);
	margin: 0;
}

.articol__imagine { margin-bottom: 3rem; }
.articol__subsol {
	padding-block: 2.5rem 4rem;
	font-size: 0.875rem;
	color: var(--cerneala-2);
}

.fir {
	font-size: 0.8125rem;
	color: var(--cerneala-2);
	margin-bottom: 1.75rem;
}
.fir ol {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.fir li + li::before { content: "/"; margin-right: 0.5rem; color: var(--linie); }
.fir a { text-decoration: none; border-bottom: 1px solid var(--linie); }

.lista-articole { border-top: 1px solid var(--cerneala); margin-bottom: 4rem; }

.card-articol {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	border-bottom: 1px solid var(--linie);
	align-items: baseline;
}

.card-articol__meta {
	font-size: 0.8125rem;
	color: var(--cerneala-2);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.card-articol__titlu {
	font-family: var(--serif);
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	line-height: 1.2;
	margin: 0 0 0.4rem;
}
.card-articol__titlu a { text-decoration: none; }

.card-articol__rezumat {
	color: var(--cerneala-2);
	margin: 0;
	max-width: 62ch;
	font-size: 0.9375rem;
}

.card-articol__imagine { display: none; }

@media (max-width: 640px) {
	.card-articol { grid-template-columns: 1fr; gap: 0.5rem; }
}

.paginare { padding-bottom: 4rem; }
.paginare .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.paginare .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 46px; min-height: 46px; padding: 0 0.75rem;
	border: 1px solid var(--linie);
	text-decoration: none;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}
.paginare .page-numbers.current {
	background: var(--cerneala); color: var(--hartie); border-color: var(--cerneala);
}

.pagina-404 { padding-block: clamp(4rem, 12vw, 9rem); }
.pagina-404__actiuni { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2.5rem; }

/* ============================================================
   SUBSOL
   ============================================================ */

.subsol {
	border-top: 1px solid var(--cerneala);
	padding-top: clamp(3rem, 6vw, 4.5rem);
	background: var(--hartie);
}

.subsol__interior {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	padding-bottom: 3rem;
}

.subsol__marca {
	font-family: var(--serif);
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

.subsol__titlu {
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cerneala-2);
	margin: 0 0 1.1rem;
}

.subsol__text { font-size: 0.9375rem; color: var(--cerneala-2); }

.subsol__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.subsol__lista li, .subsol__lista a {
	font-size: 0.9375rem;
	color: var(--cerneala-2);
	text-decoration: none;
}
.subsol__lista a:hover { color: var(--sigiliu); }

.subsol__jos {
	border-top: 1px solid var(--linie);
	padding-block: 1.5rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	color: var(--cerneala-2);
}
.subsol__jos p { margin: 0; }

/* ============================================================
   BARA DE ACTIUNE PE MOBIL
   ============================================================ */

.bara-mobil { display: none; }

@media (max-width: 720px) {
	.bara-mobil {
		display: grid;
		grid-template-columns: 1fr auto;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 60;
		background: var(--cerneala);
		border-top: 1px solid var(--cerneala);
	}

	.bara-mobil__actiune {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 58px;
		padding: 0.5rem 1.25rem;
		color: var(--hartie);
		text-decoration: none;
		font-weight: 600;
		font-size: 0.9375rem;
	}

	.bara-mobil__actiune--principala {
		justify-content: flex-start;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.1rem;
		line-height: 1.2;
	}

	.bara-mobil__mic {
		font-size: 0.6875rem;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		opacity: 0.6;
	}

	.bara-mobil__actiune--secundara {
		border-left: 1px solid rgba(247, 244, 239, 0.25);
	}

	body { padding-bottom: 59px; }
}

/* ============================================================
   ELEMENTE DESENATE
   Urma unei maini intr-un site altfel numai din tipografie si linii.
   Se folosesc rar: doua-trei pe pagina, la momentele cheie.
   ============================================================ */

.desen { display: block; overflow: visible; }

/* Sublinierea de sub fraza care poarta diferentiatorul. Se deseneaza singura
   la incarcare, o singura data, ca un stilou care trece pe sub cuvant. */
.desen--subliniere {
	width: 100%;
	height: auto;
	margin-top: -0.22em;
	color: var(--sigiliu);
}

.desen--subliniere path {
	stroke-dasharray: 320;
	stroke-dashoffset: 320;
	animation: djmario-traseaza 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
	animation-delay: 420ms;
}

.desen--subliniere path:nth-child(2) { animation-delay: 620ms; }

@keyframes djmario-traseaza {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.desen--subliniere path {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* Fraza subliniata: containerul care tine desenul sub cuvant. */
.subliniat {
	display: inline-block;
	position: relative;
}

.subliniat .desen--subliniere {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.16em;
	width: 100%;
}

.desen--semn {
	width: 1.6rem;
	height: 1.6rem;
	color: var(--sigiliu);
	flex-shrink: 0;
}

.desen--cerc {
	position: absolute;
	inset: -0.35em -0.6em;
	width: calc(100% + 1.2em);
	height: calc(100% + 0.7em);
	color: var(--sigiliu);
	opacity: 0.9;
	pointer-events: none;
}

/* ============================================================
   DIFERENTIATORI
   Afirmatii numerotate, cu ritm de citit. Nu carduri.
   ============================================================ */

.diferentiatori { border-top: 1px solid var(--linie); }

.diferentiator {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: clamp(1rem, 4vw, 3rem);
	padding-block: clamp(2rem, 4vw, 3.25rem);
	border-bottom: 1px solid var(--linie);
	align-items: start;
}

.diferentiator__numar {
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--sigiliu);
	padding-top: 0.55rem;
	font-variant-numeric: tabular-nums;
}

.diferentiator__mare {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.18;
	margin: 0 0 0.4em;
	max-width: 22ch;
}

.diferentiator__mic {
	color: var(--cerneala-2);
	max-width: 58ch;
	margin: 0;
}

@media (max-width: 640px) {
	.diferentiator { grid-template-columns: 1fr; gap: 0.5rem; }
	.diferentiator__numar { padding-top: 0; }
}

/* ============================================================
   ZONE
   Momentul tipografic al paginii. Fara fotografii, materialul real
   trebuie sa primeasca scara.
   ============================================================ */

.zone {
	background: var(--cerneala);
	color: var(--hartie);
	padding-block: clamp(4rem, 9vw, 7rem);
}

.eticheta--pe-inchis {
	color: rgba(247, 244, 239, 0.55);
	border-top-color: rgba(247, 244, 239, 0.35);
}

.zone__grila {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.zone__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.55em;
	font-family: var(--serif);
	font-size: clamp(1.75rem, 4.2vw, 3.25rem);
	line-height: 1.22;
}

/* Punctul dintre orase: mic, sters, desenat din CSS. */
.zone__lista li + li::before {
	content: "·";
	margin-right: 0.5em;
	color: var(--sigiliu);
}

.zone__cifra {
	margin: 0 0 0.6rem;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.zone__numar {
	font-family: var(--serif);
	font-size: clamp(3rem, 6vw, 4.5rem);
	line-height: 1;
}

.zone__unitate {
	font-size: 1rem;
	font-weight: 500;
	color: rgba(247, 243, 236, 0.65);
}

.zone__text {
	color: rgba(247, 244, 239, 0.7);
	font-size: 0.9375rem;
	max-width: 34ch;
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(247, 244, 239, 0.2);
}

@media (max-width: 860px) {
	.zone__grila { grid-template-columns: 1fr; }
}

/* ============================================================
   FINISAJE
   ============================================================ */

/* Erou: intrarea scenei, o singura data, cu decalaj.
   Un moment orchestrat face mai mult decat zece micro-interactiuni. */
.erou__supratitlu,
.erou__titlu,
.erou__text,
.erou__actiuni,
.erou__program,
.erou__lateral > * {
	animation: djmario-ridica 620ms cubic-bezier(0.2, 0, 0, 1) backwards;
}

.erou__supratitlu { animation-delay: 40ms; }
.erou__titlu      { animation-delay: 110ms; }
.erou__text       { animation-delay: 200ms; }
.erou__actiuni    { animation-delay: 280ms; }
.erou__program    { animation-delay: 350ms; }
.erou__lateral > *:nth-child(1) { animation: none; }
.erou__lateral > *:nth-child(2) { animation-delay: 300ms; }
.erou__lateral > *:nth-child(3) { animation-delay: 380ms; }
.erou__lateral > *:nth-child(4) { animation-delay: 460ms; }

@keyframes djmario-ridica {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.erou__supratitlu,
	.erou__titlu,
	.erou__text,
	.erou__actiuni,
	.erou__program,
	.erou__lateral > * {
		animation: none;
	}
}

/* Butonul principal: sageata apare la hover, nu sta permanent. */
.buton--principal::after {
	content: "";
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width 200ms ease;
}
.buton--principal:hover::after { width: 1.1rem; }

/* Indexul de servicii: numele aluneca putin, pretul se aprinde. */
.index__rand .index__nume { transition: color 200ms ease; }
.index__rand:hover .index__nume { color: var(--sigiliu); }
.index__rand:hover .index__pret strong { color: var(--sigiliu); }

/* Intrebarile frecvente: raspunsul coboara in loc sa apara brusc. */
.faq__element[open] .faq__raspuns {
	animation: djmario-coboara 260ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes djmario-coboara {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.faq__element[open] .faq__raspuns { animation: none; }
}

/* Fisa tehnica: elementul de sub cursor se ridica pe hartie. */
.fisa__element { transition: background 200ms ease; }
.fisa__element:hover { background: var(--hartie-2); }

/* Galerie in masonry, nu grila de patrate egale.
   Ritmul neregulat e ce face o galerie sa nu arate ca un catalog. */
@supports (grid-template-rows: masonry) {
	.galerie { grid-template-rows: masonry; }
}

.galerie__element:nth-child(4n + 1) img { aspect-ratio: 4 / 5; }
.galerie__element:nth-child(4n + 2) img { aspect-ratio: 1 / 1; }
.galerie__element:nth-child(4n + 3) img { aspect-ratio: 3 / 4; }
.galerie__element:nth-child(4n + 4) img { aspect-ratio: 5 / 4; }

/* Metadata pe fotografie, ca eticheta de arhiva.
   Se completeaza cand vin pozele; pana atunci sectiunea nu se afiseaza. */
.galerie__element { position: relative; overflow: hidden; }

.galerie__meta {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 2.5rem 1rem 0.9rem;
	background: linear-gradient(to top, rgba(20, 17, 13, 0.85), transparent);
	color: var(--hartie);
	font-size: 0.8125rem;
	line-height: 1.35;
	opacity: 0;
	transition: opacity 220ms ease;
}

.galerie__element:hover .galerie__meta,
.galerie__element:focus-within .galerie__meta { opacity: 1; }

.galerie__meta strong { display: block; font-weight: 600; }
.galerie__meta span { opacity: 0.75; }

/* ============================================================
   SIGILIUL
   Elementul grafic principal. Fara fotografii, pagina avea nevoie
   de un obiect, nu doar de tipografie asezata bine.
   ============================================================ */

.sigiliu {
	color: var(--sigiliu);
	width: clamp(160px, 17vw, 232px);
	aspect-ratio: 1;
	transform: rotate(-9deg);
	opacity: 0.92;
}

.sigiliu svg { width: 100%; height: 100%; display: block; }

.sigiliu__inel {
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.17em;
}

.sigiliu__cifra {
	font-family: var(--serif);
	font-size: 76px;
}

.sigiliu__jos {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.19em;
}

/* Sigiliul din erou: apasat pe pagina dupa ce restul s-a asezat. */
.sigiliu--erou {
	margin-bottom: 0.5rem;
	margin-left: auto;
	animation: djmario-apasa 520ms cubic-bezier(0.34, 1.4, 0.64, 1) 780ms backwards;
}

@keyframes djmario-apasa {
	from { opacity: 0; transform: rotate(-9deg) scale(1.18); }
	to   { opacity: 0.92; transform: rotate(-9deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.sigiliu--erou { animation: none; }
}

@media (max-width: 900px) {
	.sigiliu--erou { margin-top: 1.5rem; }
}

/* ============================================================
   AJUSTARI DUPA ADANCIREA PALETEI
   ============================================================ */

/* Continutul trebuie sa stea peste stratul de granulatie. */
.antet, .erou, .sectiune, .zone, .apel, .subsol, .bara-mobil,
.pagina__antet, .articol__antet, .lista-articole, .paginare, .pagina-404 {
	position: relative;
	z-index: 2;
}

/* Cifrele din erou, la scara mai mare: sunt argumentul, nu o nota de subsol. */
.data__valoare { font-size: clamp(2.25rem, 3.6vw, 3.1rem); }



/* Eticheta de sectiune primeste accentul, ca sa nu ramana totul gri. */
.eticheta { color: var(--sigiliu); border-top-color: var(--sigiliu); }
.eticheta--pe-inchis {
	color: rgba(247, 243, 236, 0.6);
	border-top-color: rgba(247, 243, 236, 0.4);
}

/* Zona ramane pe cerneala, ca sa nu se ciocneasca cu ancora de sigiliu. */
.zone { background: var(--cerneala); }
.zone__lista li + li::before { color: var(--sigiliu-clar); }

/* Butonul secundar pe fundal de sigiliu. */
.plata .buton--secundar,
.zone .buton--secundar {
	color: var(--hartie);
	border-color: rgba(247, 243, 236, 0.45);
}
.plata .buton--secundar:hover,
.zone .buton--secundar:hover {
	background: var(--hartie);
	color: var(--cerneala);
}

/* Sectiunea de apel final capata o suprafata proprie, ca sa nu se piarda
   in aceeasi hartie ca restul paginii. */
.apel { background: var(--hartie-2); }

/* Pachetul evidentiat: contur de accent, nu doar alt fundal. */
.pachet--evidentiat {
	background: var(--hartie);
	box-shadow: inset 0 3px 0 var(--sigiliu);
}

/* Sigiliul, ajustari dupa refacere */
.sigiliu__cifra { font-size: 62px; }
.sigiliu__jos--mic {
	font-size: 9px;
	letter-spacing: 0.16em;
	opacity: 0.65;
}

/* ============================================================
   BARA UTILITARA + ANTET LIPIT
   ============================================================ */

.bara-utila {
	background: var(--cerneala);
	color: rgba(247, 243, 236, 0.72);
	font-size: 0.8125rem;
	position: relative;
	z-index: 3;
}

.bara-utila__interior {
	display: flex;
	gap: 1.75rem;
	align-items: center;
	min-height: 40px;
	flex-wrap: wrap;
}

.bara-utila__element {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
a.bara-utila__element:hover { color: var(--hartie); }
.bara-utila__element--stins { margin-left: auto; opacity: 0.7; }

@media (max-width: 700px) {
	.bara-utila__element--stins { display: none; }
	.bara-utila__interior { gap: 1.1rem; font-size: 0.75rem; }
}

.antet {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--hartie) 86%, transparent);
	backdrop-filter: saturate(1.2) blur(12px);
	border-bottom: 1px solid var(--linie);
	transition: box-shadow 380ms ease, background 380ms ease;
}

/* Clasa se pune din JS dupa ce pagina a fost derulata. */
.antet--derulat {
	background: color-mix(in srgb, var(--hartie) 96%, transparent);
	box-shadow: 0 10px 30px -22px rgba(23, 19, 14, 0.55);
}

.antet__interior { min-height: 72px; padding-block: 0.9rem; }

.marca {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	line-height: 1;
}

.marca__loc {
	font-family: var(--sans);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--cerneala-2);
	border-left: 1px solid var(--linie);
	padding-left: 0.7rem;
	white-space: nowrap;
}

.antet__actiune .buton {
	padding: 0.65rem 1.25rem;
	min-height: 44px;
	font-size: 0.9375rem;
}

@media (max-width: 1120px) {
	.marca__loc { display: none; }
	.meniu { gap: 1.1rem; }
	.meniu a { font-size: 0.875rem; }
}

@media (max-width: 1000px) {
	.antet__actiune { margin-left: auto; order: 2; }
	.antet__comutator { order: 3; }
}

@media (max-width: 560px) {
	.antet__actiune .buton { padding: 0.6rem 0.9rem; font-size: 0.875rem; }
}

/* Eticheta de sectiune: linie scurta inainte, nu chenar pe toata latimea.
   Detaliu preluat ca mecanism, nu ca estetica: linia scurta ancoreaza
   eticheta fara sa taie pagina in doua. */
.eticheta {
	display: flex;
	align-items: center;
	gap: 0.75em;
	border-top: 0;
	padding-top: 0;
	margin-bottom: 1.75rem;
}

.eticheta::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
	flex-shrink: 0;
}

/* Numarul capitolului, pentru ritmul de parcurgere. */
.eticheta__nr {
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

/* ============================================================
   BANDA DE CIFRE
   ============================================================ */

.cifre {
	background: var(--cerneala);
	color: var(--hartie);
	position: relative;
	z-index: 2;
}

.cifre__grila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cifra {
	padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 2.5vw, 2rem);
	border-left: 1px solid rgba(247, 243, 236, 0.16);
}
.cifra:first-child { border-left: 0; }

.cifra__valoare {
	font-family: var(--serif);
	font-size: clamp(2.75rem, 5vw, 4rem);
	line-height: 1;
	color: var(--hartie);
	display: block;
}

.cifra__valoare .unitate {
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 500;
	margin-left: 0.3rem;
	color: rgba(247, 243, 236, 0.6);
}

.cifra__eticheta {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.875rem;
	color: rgba(247, 243, 236, 0.68);
	max-width: 22ch;
}

@media (max-width: 620px) {
	.cifra { border-left: 0; border-top: 1px solid rgba(247, 243, 236, 0.16); }
	.cifra:first-child { border-top: 0; }
}

/* ============================================================
   LOCURI PENTRU IMAGINI SI VIDEO
   Ocupa exact spatiul final, ca layout-ul sa nu se schimbe cand vin pozele.
   ============================================================ */

.loc-imagine {
	aspect-ratio: var(--raport, 3 / 2);
	width: 100%;
	overflow: hidden;
	background: var(--hartie-2);
}

.loc-imagine--plin img { width: 100%; height: 100%; object-fit: cover; }

.loc-imagine--gol {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	text-align: center;
	padding: 1rem;
	border: 1px dashed var(--linie);
	color: var(--cerneala-2);
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0 11px,
			rgba(23, 19, 14, 0.028) 11px 22px
		),
		var(--hartie-2);
}

.loc-imagine__eticheta {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	max-width: 26ch;
}

.loc-imagine__dim {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}

/* Video: pana la click nu pleaca niciun octet catre YouTube. */
.loc-video { aspect-ratio: 16 / 9; width: 100%; position: relative; }

.loc-video__gol {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	border: 1px dashed var(--linie);
	background: var(--hartie-2);
	color: var(--cerneala-2);
	text-align: center;
	padding: 1rem;
}

.loc-video__buton {
	position: absolute;
	inset: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	border: 0;
	cursor: pointer;
	background: var(--cerneala);
	color: var(--hartie);
	font: inherit;
}

.loc-video__buton img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.loc-video__play {
	position: relative;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	border: 1px solid var(--hartie);
	display: grid;
	place-items: center;
	transition: background 220ms ease, color 220ms ease;
}

.loc-video__play::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 15px solid currentColor;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	margin-left: 4px;
}

.loc-video__buton:hover .loc-video__play {
	background: var(--sigiliu);
	border-color: var(--sigiliu);
}

.loc-video__text {
	position: relative;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.loc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Meniul nu se rupe pe doua randuri: elementele raman pe o linie si dispar
   mai devreme in favoarea comutatorului. */
.meniu a { white-space: nowrap; }

@media (max-width: 1180px) {
	.antet__navigatie {
		display: none;
		width: 100%;
		order: 4;
		margin-left: 0;
	}
	.antet__navigatie--deschis { display: block; }
	.antet__interior { flex-wrap: wrap; }
	.meniu { flex-direction: column; gap: 0; padding-block: 0.75rem 0.5rem; }
	.meniu a { display: block; padding-block: 0.7rem; }
	.antet__comutator { display: block; order: 3; margin-left: 0.6rem; }
	.antet__actiune { margin-left: auto; order: 2; }
}

/* Banda de imagine: latime totala, deschiderea vizuala a paginii.
   Fotografia nu e in erou pentru ca toti trei concurentii au hero cu poza,
   iar eroul tipografic e tocmai ce ne separa de ei. */
.banda-imagine {
	position: relative;
	z-index: 2;
	background: var(--hartie-2);
}

/* Inaltime fixa, nu raport: pe latime totala, 21/9 da un bloc cat un ecran
   intreg si impinge tot restul paginii sub pliu. */
.banda-imagine .loc-imagine {
	aspect-ratio: auto;
	height: clamp(260px, 38vw, 500px);
}

.erou__lateral { align-content: start; }

/* ============================================================
   INDEX DE SERVICII — varianta cu numar, sageata si poza la hover
   ============================================================ */

.index__rand {
	grid-template-columns: 3.5rem minmax(0, 0.85fr) minmax(0, 1.05fr) auto 3.5rem;
	align-items: center;
	position: relative;
	overflow: hidden;
	padding-block: clamp(2rem, 3.5vw, 2.75rem);
}

.index__nr {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--sigiliu);
	font-variant-numeric: tabular-nums;
	transition: opacity 240ms ease;
}

.index__nume {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	transition: transform 320ms cubic-bezier(0.2, 0, 0, 1), color 240ms ease;
}

.index__pret-eticheta {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 0.1rem;
}

.index__pret strong { font-size: 1.625rem; }

/* Sageata: ascunsa la stanga, intra la hover. */
.index__sageata {
	width: 44px;
	color: var(--sigiliu);
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0, 0, 1);
	justify-self: end;
}
.index__sageata svg { width: 100%; height: auto; display: block; }

.index__rand:hover .index__sageata { opacity: 1; transform: none; }
.index__rand:hover .index__nume { transform: translateX(10px); }

/* Poza apare la hover, absolut: nu schimba inaltimea randului. */
.index__poza {
	position: absolute;
	right: 5.5rem;
	top: 50%;
	width: 190px;
	height: 122px;
	transform: translateY(-50%) scale(0.94);
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease, transform 420ms cubic-bezier(0.2, 0, 0, 1);
	overflow: hidden;
}
.index__poza img { width: 100%; height: 100%; object-fit: cover; }

.index__rand:hover .index__poza { opacity: 1; transform: translateY(-50%) scale(1); }

@media (max-width: 900px) {
	.index__rand {
		grid-template-columns: 2.5rem 1fr auto;
		row-gap: 0.4rem;
	}
	.index__descriere { grid-column: 2 / -1; }
	.index__sageata, .index__poza { display: none; }
}

/* ============================================================
   FISA TEHNICA — structura de fisa, nu grila de cutii
   ============================================================ */

.fisa {
	display: block;
	background: none;
	border: 0;
	border-top: 1px solid var(--linie);
}

.fisa__rand {
	display: grid;
	grid-template-columns: minmax(8rem, 12rem) 1fr;
	gap: clamp(1.25rem, 4vw, 3.5rem);
	padding-block: clamp(1.5rem, 2.6vw, 2.1rem);
	border-bottom: 1px solid var(--linie);
	align-items: baseline;
}

.fisa__valoare {
	font-family: var(--serif);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	line-height: 1;
	color: var(--sigiliu);
	white-space: nowrap;
}

.fisa__valoare .unitate {
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 500;
	margin-left: 0.3rem;
	color: var(--cerneala-2);
}

.fisa__titlu {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
	letter-spacing: 0.01em;
}

.fisa__nota {
	margin: 0;
	color: var(--cerneala-2);
	font-size: 0.9375rem;
	max-width: 56ch;
}

@media (max-width: 620px) {
	.fisa__rand { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ============================================================
   INCHIDEREA PAGINII
   ============================================================ */

.apel {
	background: var(--cerneala);
	color: var(--hartie);
	border-top: 0;
	padding-block: clamp(4rem, 8vw, 7rem);
	position: relative;
	z-index: 2;
}

.apel__grila {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.apel__titlu { color: var(--hartie); max-width: 16ch; margin-bottom: 0.5em; }
.apel__titlu em { font-style: italic; color: var(--sigiliu-clar); }

.apel__text {
	color: rgba(247, 243, 236, 0.72);
	max-width: 48ch;
	font-size: 1.125rem;
	margin-bottom: 2rem;
}

/* Numarul de telefon, la scara de titlu: e obiectivul paginii. */
.apel__numar {
	display: inline-block;
	font-family: var(--serif);
	font-size: clamp(2.5rem, 5.5vw, 4.25rem);
	line-height: 1;
	color: var(--hartie);
	text-decoration: none;
	border-bottom: 2px solid rgba(247, 243, 236, 0.25);
	padding-bottom: 0.1em;
	transition: color 220ms ease, border-color 220ms ease;
	font-variant-numeric: tabular-nums;
}
.apel__numar:hover { color: var(--sigiliu-clar); border-bottom-color: var(--sigiliu-clar); }

.apel__program {
	margin-top: 1rem;
	font-size: 0.9375rem;
	color: rgba(247, 243, 236, 0.6);
}

.apel__actiuni { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }

.apel .buton--secundar {
	color: var(--hartie);
	border-color: rgba(247, 243, 236, 0.4);
}
.apel .buton--secundar:hover { background: var(--hartie); color: var(--cerneala); }

.apel__semn { justify-self: center; }
.sigiliu--apel { color: var(--sigiliu-clar); opacity: 0.75; width: clamp(150px, 15vw, 210px); }

@media (max-width: 900px) {
	.apel__grila { grid-template-columns: 1fr; }
	.apel__semn { justify-self: start; }
}

/* Videoul nu ocupa toata latimea: la 1440px, 16:9 da un bloc cat un ecran.
   Latime limitata si aliniat la stanga, ca sa ramana in ritmul paginii. */
.loc-video {
	width: min(100%, 980px);
	max-height: 58vh;
}