/* ==========================================================================
   LCA Lions Trans — stiluri
   Industrial dark. Un singur fișier, scris de mână, fără build step.

   Cuprins
   01 Tokeni          07 Cifre            13 Contact
   02 Reset & bază    08 Servicii         14 CTA
   03 Utilitare       09 Produse          15 Prose & WP
   04 Butoane         10 Pași & avantaje  16 Subsol
   05 Antet & meniu   11 Acoperire        17 Reveal
   06 Hero            12 Galerie          18 Breakpoints
   ========================================================================== */


/* 01 · TOKENI ============================================================== */

:root {
	/* Suprafețe — dark stratificat, nu un singur negru */
	--s-000: #08090b;
	--s-100: #0d0f13;
	--s-200: #12151a;
	--s-300: #181c23;
	--s-400: #20252e;
	--s-500: #2a303a;

	--linie:      rgba(255, 255, 255, .09);
	--linie-tare: rgba(255, 255, 255, .17);

	/* Brand — roșul din LCALOGO.svg */
	--rosu:        #c81018;
	--rosu-viu:    #e6252f;
	--rosu-inchis: #8f0a10;
	--rosu-slab:   rgba(200, 16, 24, .14);
	--rosu-glow:   rgba(200, 16, 24, .34);

	/* Text */
	--text:      #f4f6f8;
	--text-mut:  rgba(244, 246, 248, .68);
	--text-slab: rgba(244, 246, 248, .44);

	/* Tipografie */
	--display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--t-hero: clamp(2.9rem, 8vw, 6.5rem);
	--t-h1:   clamp(2.3rem, 5.5vw, 4.2rem);
	--t-h2:   clamp(1.85rem, 3.8vw, 2.9rem);
	--t-h3:   clamp(1.25rem, 2vw, 1.55rem);
	--t-lead: clamp(1.04rem, 1.5vw, 1.22rem);

	/* Înălțimea antetului. Hero-urile se trag în sus cu exact valoarea asta ca să
	   intre pe sub antetul transparent — schimb-o într-un singur loc. */
	--h-antet: 118px;

	/* Spațiu & formă */
	--wrap: 1200px;
	--pas:  clamp(4rem, 8vw, 7.5rem);
	--gut:  clamp(1.25rem, 3vw, 2rem);

	--r-s:    4px;
	--r-m:    12px;
	--r-l:    20px;
	--r-xl:   28px;
	--r-pill: 999px;

	/* Elevație */
	--e-1: 0 1px 2px rgba(0, 0, 0, .4);
	--e-2: 0 14px 34px -10px rgba(0, 0, 0, .62);
	--e-3: 0 30px 72px -18px rgba(0, 0, 0, .78);

	/* Mișcare */
	--ease: cubic-bezier(.22, 1, .36, 1);
	--dur:  .45s;
	--dur-s: .22s;

	/* Straturi */
	--z-antet: 60;
	--z-drawer: 70;
	--z-bara: 65;
	--z-lightbox: 90;

	/* Granulație — rupe benzile din gradienți pe fundal închis */
	--grain: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* 02 · RESET & BAZĂ ======================================================== */

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

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

/* Antetul e sticky, deci un link cu ancoră (#margaritar) ar duce ținta exact
   sub el și i-ar acoperi titlul. Lăsăm loc cât antetul, plus puțin aer. */
[id] { scroll-margin-top: calc(var(--h-antet) + 1.75rem); }

body.admin-bar [id] { scroll-margin-top: calc(var(--h-antet) + 32px + 1.75rem); }

@media screen and (max-width: 782px) {
	body.admin-bar [id] { scroll-margin-top: calc(var(--h-antet) + 46px + 1.75rem); }
}

@media screen and (max-width: 600px) {
	body.admin-bar [id] { scroll-margin-top: calc(var(--h-antet) + 1.75rem); }
}

body {
	margin: 0;
	background: var(--s-100);
	color: var(--text);
	font-family: var(--body);
	font-size: 1rem;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Granulația globală, peste tot fundalul, sub conținut. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--grain);
	opacity: .038;
}

body > * { position: relative; z-index: 1; }

body.nav-blocat { overflow: hidden; }

img,
svg,
iframe { display: block; max-width: 100%; }

img { height: auto; }

a { color: var(--rosu-viu); }

button { font: inherit; }

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.015em;
	text-transform: uppercase;
	text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection {
	background: var(--rosu);
	color: #fff;
}

/* Accesibilitate */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 200;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	padding: .8rem 1.2rem;
	background: var(--rosu);
	color: #fff;
	border-radius: var(--r-s);
	text-decoration: none;
}

:focus-visible {
	outline: 3px solid var(--rosu-viu);
	outline-offset: 3px;
}

.ico {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}


/* 03 · UTILITARE ========================================================== */

.wrap {
	width: min(100% - (var(--gut) * 2), var(--wrap));
	margin-inline: auto;
}

.wrap--narrow { --wrap: 760px; }
.wrap--lat    { --wrap: 1400px; }

.sectiune {
	padding-block: var(--pas);
	position: relative;
}

.sectiune--strans { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.sectiune--alt    { background: var(--s-200); }
.sectiune--adanc  { background: var(--s-000); }

/* Linie fină de separare între secțiuni de aceeași culoare */
.sectiune--linie { border-top: 1px solid var(--linie); }

.eyebrow {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 1rem;
	font-family: var(--display);
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rosu-viu);
}

.eyebrow::before {
	content: "";
	width: 2.2rem;
	height: 2px;
	background: var(--rosu);
	flex: none;
}

.eyebrow--centru { justify-content: center; }

.sec-cap {
	max-width: 42rem;
	margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.sec-cap--centru {
	margin-inline: auto;
	text-align: center;
}

.sec-cap--lat { max-width: 54rem; }

.sec-titlu {
	font-size: var(--t-h2);
	margin: 0;
}

.sec-lead {
	margin: 1.1rem 0 0;
	font-size: var(--t-lead);
	color: var(--text-mut);
	max-width: 46rem;
}

.sec-cap--centru .sec-lead { margin-inline: auto; }

/* Rând cap de secțiune cu link în dreapta */
.sec-bara {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.sec-bara .sec-cap { margin-bottom: 0; }

.nota {
	color: var(--text-slab);
	font-size: .95rem;
}


/* 04 · BUTOANE ============================================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .95rem 1.85rem;
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	font-family: var(--display);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--dur-s) var(--ease),
	            border-color var(--dur-s) var(--ease),
	            color var(--dur-s) var(--ease),
	            transform var(--dur-s) var(--ease),
	            box-shadow var(--dur-s) var(--ease);
}

.btn .ico { width: 1.15em; height: 1.15em; }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primar {
	background: var(--rosu);
	border-color: var(--rosu);
	color: #fff;
	box-shadow: 0 8px 26px -10px var(--rosu-glow);
}

.btn--primar:hover {
	background: var(--rosu-viu);
	border-color: var(--rosu-viu);
	box-shadow: 0 14px 34px -10px var(--rosu-glow);
}

.btn--fantoma {
	border-color: var(--linie-tare);
	color: var(--text);
	background: rgba(255, 255, 255, .03);
}

.btn--fantoma:hover {
	border-color: var(--text);
	background: rgba(255, 255, 255, .08);
}

.btn--alb {
	background: var(--text);
	border-color: var(--text);
	color: var(--s-000);
}

.btn--alb:hover {
	background: #fff;
	border-color: #fff;
}

.btn--mic {
	padding: .6rem 1.2rem;
	font-size: .95rem;
}

.btn--bloc { width: 100%; }

/* Link cu săgeată */
.link-sageata {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text);
	transition: color var(--dur-s) var(--ease), gap var(--dur-s) var(--ease);
}

.link-sageata .ico {
	width: 1.1em;
	height: 1.1em;
	color: var(--rosu-viu);
	transition: transform var(--dur-s) var(--ease);
}

.link-sageata:hover {
	color: var(--rosu-viu);
	gap: .85rem;
}


/* 05 · ANTET & MENIU ====================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-antet);
	background: transparent;
	transition: background var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
	border-bottom: 1px solid transparent;
}

/* Bara de administrare WordPress e fixată peste pagină. Fără decalajul ăsta,
   ea acoperă partea de sus a antetului sticky când derulezi. */
body.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

@media screen and (max-width: 600px) {
	/* Sub 600px bara de admin nu mai e fixată — derulează odată cu pagina. */
	body.admin-bar .site-header { top: 0; }
}

/* IMPORTANT: fundalul cu blur stă pe ::before, NU pe .site-header.
   `backdrop-filter` pe un element creează un containing block pentru
   descendenții `position: fixed` — iar meniul mobil (.site-nav) e fixed.
   Dacă blur-ul ar sta pe antet, drawer-ul s-ar raporta la antet, nu la ecran,
   și s-ar desena ca o dungă de câțiva pixeli, adică invizibil. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(11, 13, 16, .94);
	backdrop-filter: saturate(150%) blur(16px);
	-webkit-backdrop-filter: saturate(150%) blur(16px);
	border-bottom: 1px solid var(--linie);
	box-shadow: var(--e-2);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.site-header--solid::before,
.site-header.is-scrolled::before { opacity: 1; }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	min-height: var(--h-antet);
}

/* Antetul NU își schimbă înălțimea la scroll, intenționat.
   Fiind `position: sticky`, el stă în fluxul paginii: dacă s-ar micșora, pagina
   s-ar scurta, conținutul ar urca, scrollY ar coborî sub prag, clasa s-ar
   scoate, antetul ar crește la loc — și tot așa, la nesfârșit. Rezultatul e un
   pâlpâit vizibil. La scroll schimbăm doar fundalul, care nu afectează layout-ul. */

.brand {
	display: flex;
	align-items: center;
	margin-right: auto;
	text-decoration: none;
	flex: none;
	min-width: 0;
}

/* Logo-ul e aproape pătrat (1,9:1), nu lung ca un wordmark — ca să aibă aceeași
   prezență pe orizontală ca un logo lat, are nevoie de mai multă înălțime. */
.brand__logo,
.brand .custom-logo {
	width: auto;
	height: clamp(62px, 7.5vw, 96px);
	transition: opacity var(--dur-s) var(--ease), height var(--dur) var(--ease);
}

.site-header.is-scrolled .brand__logo,
.site-header.is-scrolled .custom-logo { height: clamp(50px, 5.5vw, 66px); }

.brand:hover .brand__logo,
.brand:hover .custom-logo { opacity: .82; }

.brand__text {
	font-family: var(--display);
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--text);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	position: relative;
	display: block;
	padding-block: .45rem;
	font-family: var(--display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text-mut);
	text-decoration: none;
	transition: color var(--dur-s) var(--ease);
}

.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--rosu);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-s) var(--ease);
}

.site-nav__list a:hover,
.site-nav__list a.is-current { color: var(--text); }

.site-nav__list a:hover::after,
.site-nav__list a.is-current::after { transform: scaleX(1); }

/* Butoanele din drawer există doar pe mobil. */
.site-nav__actiuni { display: none; }

/* Peste drawer, altfel butonul de închidere ajunge sub overlay și nu se poate apăsa. */
.antet-actiuni {
	position: relative;
	z-index: calc(var(--z-drawer) + 1);
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: none;
}

/* Logo-ul rămâne vizibil peste drawer-ul deschis. */
.brand {
	position: relative;
	z-index: calc(var(--z-drawer) + 1);
}

.tel-cap {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--display);
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-s) var(--ease);
}

.tel-cap .ico { color: var(--rosu-viu); }
.tel-cap:hover { color: var(--rosu-viu); }

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--linie);
	border-radius: var(--r-s);
	color: var(--text);
	cursor: pointer;
	transition: background var(--dur-s) var(--ease);
}

.nav-toggle:hover { background: rgba(255, 255, 255, .1); }
.nav-toggle .ico { width: 24px; height: 24px; }
.nav-toggle__inchide { display: none; }

.nav-toggle[aria-expanded="true"] .nav-toggle__deschide { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__inchide { display: block; }


/* 06 · HERO =============================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 92vh, 900px);
	margin-top: calc(var(--h-antet) * -1);
	padding-top: var(--h-antet);
	overflow: hidden;
	isolation: isolate;
}

/* Cadrul e împins spre dreapta ca subiectul (și livreaua de pe remorcă) să nu
   intre sub titlu — coloana din stânga rămâne pentru text. */
.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--foto);
	background-size: cover;
	background-position: 68% center;
}

/* Pe ecran îngust și înalt, un cadru panoramic taie prin mijlocul remorcii și
   rămâne doar o suprafață neagră. Mutăm încadrarea pe cabină și pe apus:
   subiectul se recunoaște, iar lumina caldă dă contrast textului de deasupra. */
@media (max-width: 860px) {
	.hero__media { background-position: 80% center; }
}

/* Scrim: întunecă stânga pentru text, și baza pentru banda de cifre. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, var(--s-100) 2%, rgba(13, 15, 19, .55) 34%, rgba(13, 15, 19, .12) 62%),
		linear-gradient(to right, rgba(8, 9, 11, .92) 0%, rgba(8, 9, 11, .68) 38%, rgba(8, 9, 11, .18) 72%, rgba(8, 9, 11, .34) 100%);
}

.hero__inner {
	width: min(100% - (var(--gut) * 2), var(--wrap));
	margin-inline: auto;
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.hero__titlu {
	max-width: 15ch;
	margin: 0 0 1.4rem;
	font-size: var(--t-hero);
	font-weight: 800;
	line-height: .94;
	letter-spacing: -.025em;
}

.hero__titlu em {
	font-style: normal;
	color: var(--rosu-viu);
}

.hero__lead {
	max-width: 44ch;
	margin: 0 0 2.2rem;
	font-size: var(--t-lead);
	color: var(--text-mut);
}

.hero__actiuni {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
}

/* Hero-ul paginilor interioare */
.page-hero {
	position: relative;
	margin-top: calc(var(--h-antet) * -1);
	padding-top: calc(var(--h-antet) + clamp(3rem, 7vw, 5.5rem));
	padding-bottom: clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	isolation: isolate;
}

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--foto);
	background-size: cover;
	background-position: center 55%;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, var(--s-100) 1%, rgba(13, 15, 19, .72) 40%, rgba(13, 15, 19, .42) 100%),
		linear-gradient(to right, rgba(8, 9, 11, .9), rgba(8, 9, 11, .45));
}

/* Fără fotografie: fundal plat, dar cu o urmă de roșu în colț. */
.page-hero--plat::before {
	background:
		radial-gradient(60rem 30rem at 8% 0%, var(--rosu-slab), transparent 62%),
		linear-gradient(to bottom, var(--s-000), var(--s-100));
}

.page-hero__titlu {
	max-width: 18ch;
	margin: 0;
	font-size: var(--t-h1);
	font-weight: 800;
	letter-spacing: -.022em;
}

.page-hero__lead {
	max-width: 52ch;
	margin: 1.2rem 0 0;
	font-size: var(--t-lead);
	color: var(--text-mut);
}


/* 07 · CIFRE ============================================================== */

.cifre {
	position: relative;
	margin-top: calc(clamp(2.5rem, 5vw, 4rem) * -1);
	z-index: 2;
}

.cifre__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	background: var(--s-300);
	border: 1px solid var(--linie);
	border-radius: var(--r-l);
	box-shadow: var(--e-3);
	overflow: hidden;
}

.cifra {
	padding: clamp(1.6rem, 3vw, 2.4rem) 1.5rem;
	text-align: center;
	border-right: 1px solid var(--linie);
}

.cifra:last-child { border-right: 0; }

.cifra__nr {
	display: block;
	font-family: var(--display);
	font-size: clamp(2.5rem, 5vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--rosu-viu);
}

.cifra__et {
	display: block;
	margin-top: .55rem;
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--text-slab);
	/* Cuvinte lungi ca „AUTOBASCULANTE" nu trebuie tăiate de overflow-ul grilei. */
	overflow-wrap: break-word;
	hyphens: auto;
}


/* 08 · SERVICII =========================================================== */

.servicii {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
}

.serviciu {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--s-200);
	border: 1px solid var(--linie);
	border-radius: var(--r-l);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}

.serviciu:hover {
	transform: translateY(-6px);
	border-color: var(--linie-tare);
	box-shadow: var(--e-2);
}

.serviciu__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--s-300);
}

.serviciu__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease);
}

.serviciu:hover .serviciu__media img { transform: scale(1.06); }

.serviciu__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(18, 21, 26, .96) 4%, rgba(18, 21, 26, .35) 45%, transparent 75%);
}

.serviciu__numar {
	position: absolute;
	top: 1rem;
	left: 1.25rem;
	z-index: 2;
	font-family: var(--display);
	font-size: 3.4rem;
	font-weight: 800;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .42);
}

.serviciu__icon {
	position: absolute;
	right: 1.25rem;
	bottom: 1.1rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--r-m);
	background: var(--rosu);
	color: #fff;
	box-shadow: 0 10px 26px -10px var(--rosu-glow);
}

.serviciu__icon .ico { width: 25px; height: 25px; }

.serviciu__corp {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.5rem, 2.5vw, 2rem);
}

.serviciu__titlu {
	font-size: var(--t-h3);
	margin: 0 0 .6rem;
}

.serviciu__text {
	margin: 0 0 1.4rem;
	color: var(--text-mut);
	font-size: .97rem;
}

.serviciu__corp .link-sageata { margin-top: auto; }

/* Bloc mare, alternant — pagina Servicii */
.serv-bloc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.serv-bloc + .serv-bloc { margin-top: var(--pas); }

.serv-bloc--invers .serv-bloc__media { order: 2; }

.serv-bloc__media {
	position: relative;
	border-radius: var(--r-l);
	overflow: hidden;
	box-shadow: var(--e-2);
}

.serv-bloc__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Pereche de fotografii decalate, legate de o ramă roșie.
   Rama stă DEDESUBT și e decalată față de poze, așa că din ea rămân vizibile
   doar colțurile — sus-dreapta și jos-stânga. Așa se leagă cele două fotografii
   într-o compoziție, în loc să pară două poze lipite una peste alta. */
.serv-bloc__media--duo {
	aspect-ratio: 1 / 1;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

.serv-bloc__foto {
	display: block;
	border-radius: var(--r-l);
	overflow: hidden;
}

.serv-bloc__media--duo .serv-bloc__foto {
	position: absolute;
	box-shadow: var(--e-3);
}

.serv-bloc__media--duo .serv-bloc__foto img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

.serv-bloc__media--duo .serv-bloc__foto--principal {
	z-index: 1;
	left: 0;
	top: 0;
	width: 70%;
	aspect-ratio: 4 / 3;
}

.serv-bloc__media--duo .serv-bloc__foto--secundar {
	z-index: 2;
	right: 0;
	bottom: 0;
	width: 64%;
	aspect-ratio: 4 / 3;
	/* Chenarul în culoarea paginii desprinde poza de cea de dedesubt. */
	border: 6px solid var(--s-100);
}

.serv-bloc__rama {
	position: absolute;
	z-index: 0;
	left: 17%;
	top: 16%;
	right: 3%;
	bottom: 3%;
	border: 2px solid var(--rosu);
	border-radius: var(--r-xl);
	pointer-events: none;
}

/* Blocurile inversate oglindesc compoziția, ca poza mare să rămână spre text. */
.serv-bloc--invers .serv-bloc__media--duo .serv-bloc__foto--principal { left: auto; right: 0; }
.serv-bloc--invers .serv-bloc__media--duo .serv-bloc__foto--secundar  { right: auto; left: 0; }
.serv-bloc--invers .serv-bloc__rama { left: 3%; right: 17%; }

/* Numărul uriaș stă în spate, în colțul din dreapta sus, ca să nu treacă
   peste text. `isolation` pe părinte îl ține în interiorul blocului. */
.serv-bloc__numar {
	position: absolute;
	right: -.04em;
	top: -.38em;
	z-index: -1;
	font-family: var(--display);
	font-size: clamp(5rem, 11vw, 9.5rem);
	font-weight: 800;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--linie);
	pointer-events: none;
	user-select: none;
}

.serv-bloc__corp {
	position: relative;
	isolation: isolate;
}

.serv-bloc__titlu {
	font-size: var(--t-h2);
	margin: 0 0 1rem;
}

.serv-bloc__text {
	color: var(--text);
	font-size: var(--t-lead);
	margin-bottom: .9rem;
}

.serv-bloc__nota {
	color: var(--text-mut);
	margin-bottom: 1.75rem;
}

/* Listă cu bife */
.lista-check {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .75rem;
}

.lista-check li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	color: var(--text-mut);
}

.lista-check .ico {
	width: 1.15em;
	height: 1.15em;
	margin-top: .3em;
	color: var(--rosu-viu);
	stroke-width: 2.4;
}


/* 09 · PRODUSE ============================================================ */

/* Flex, nu grid, tocmai pentru ultimul rând.
   Produsele sunt 11, deci ultimul rând rămâne mereu incomplet. Pe grid,
   `justify-content: center` centrează setul de coloane, dar orfanii tot se
   lipesc de marginea din stânga. Pe flex, fiecare rând se centrează separat. */
.produse-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
}

.produs {
	flex: 0 1 165px;
	max-width: 190px;
	display: grid;
	grid-template-rows: auto auto auto;
	align-content: start;
	justify-items: center;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.produs__cerc {
	position: relative;
	width: 100%;
	max-width: 190px;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--s-300);
	box-shadow: 0 0 0 3px var(--s-100), 0 0 0 5px var(--linie-tare);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.produs__cerc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease);
}

.produs:hover .produs__cerc {
	transform: translateY(-5px);
	box-shadow: 0 0 0 3px var(--s-100), 0 0 0 5px var(--rosu), 0 18px 40px -16px rgba(0, 0, 0, .8);
}

.produs:hover .produs__cerc img { transform: scale(1.08); }

.produs__nume {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Două rânduri rezervate, în unitățile ACESTUI text: numele scurte ocupă
	   aceeași înălțime ca „Piatră pentru gabioane", deci granulațiile roșii
	   rămân aliniate pe tot rândul. */
	min-height: 2.24em;
	margin: 1.1rem 0 .3rem;
	font-family: var(--display);
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: -.005em;
	text-wrap: balance;
}

.produs__gran {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rosu-viu);
	line-height: 1.3;
}

/* Pe touch, apăsarea lungă pe textul cardului nu trebuie să pornească
   selecția nativă a browserului. Pe desktop textul rămâne selectabil. */
@media (hover: none) and (pointer: coarse) {
	.produs,
	.produs * {
		-webkit-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
	}
}

/* Rândurile detaliate de pe pagina Produse */
.produs-rand {
	display: grid;
	grid-template-columns: minmax(0, 280px) 1fr;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	padding-block: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--linie);
}

.produs-rand:first-child { border-top: 0; }

/* Pe rândurile inversate schimbăm coloanele, nu doar ordinea: altfel cercul
   ar ajunge pe coloana de 1fr și s-ar întinde peste toată lățimea. */
.produs-rand--invers { grid-template-columns: 1fr minmax(0, 280px); }
.produs-rand--invers .produs-rand__media { order: 2; }
.produs-rand--invers .produs-rand__corp { order: 1; }

.produs-rand__media {
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--s-300);
	box-shadow: 0 0 0 4px var(--s-100), 0 0 0 6px var(--rosu), var(--e-2);
}

.produs-rand__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.produs-rand__titlu {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 .35rem;
}

.produs-rand__gran {
	display: inline-block;
	margin-bottom: 1rem;
	padding: .3rem .85rem;
	border: 1px solid var(--rosu);
	border-radius: var(--r-pill);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rosu-viu);
}

.produs-rand__text {
	color: var(--text-mut);
	margin-bottom: 1.5rem;
	max-width: 56ch;
}

.produs-rand__actiuni {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	align-items: center;
}

/* Card explicativ pentru preț, pe pagina Produse.
   Trei coloane: capul de secțiune, factorii care compun prețul, butonul.
   Înainte, aici stătea un singur paragraf pierdut într-o secțiune de înălțime
   completă — mult gol și nicio informație în plus. */
.pret {
	display: grid;
	grid-template-columns: minmax(0, 15rem) 1fr auto;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	/* Accentul de brand vine dintr-o lumină difuză dinspre buton, nu dintr-o
	   dungă roșie pe margine — se leagă de restul paginii fără să taie cardul. */
	background:
		radial-gradient(38rem 16rem at 100% 100%, var(--rosu-slab), transparent 68%),
		var(--s-200);
	border: 1px solid var(--linie);
	border-radius: var(--r-l);
}

.pret__cap .eyebrow { margin-bottom: .6rem; }

.pret__titlu {
	margin: 0;
	font-size: var(--t-h3);
}

.pret__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pret__factor {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
}

.pret__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--r-m);
	background: var(--rosu-slab);
	color: var(--rosu-viu);
}

.pret__icon .ico { width: 21px; height: 21px; }

.pret__eticheta {
	display: block;
	font-family: var(--display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: .15rem;
}

.pret__text {
	display: block;
	font-size: .93rem;
	color: var(--text-mut);
}

/* Titlu de grupă (Balastieră / Carieră) */
.grupa-titlu {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0 0 .5rem;
	font-size: var(--t-h3);
	color: var(--text);
}

.grupa-titlu::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--linie);
}


/* 10 · PAȘI & AVANTAJE ==================================================== */

.pasi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	counter-reset: pas;
}

.pas {
	position: relative;
	counter-increment: pas;
	padding-top: 2.75rem;
}

/* Linia care leagă pașii */
.pas::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 0;
	right: calc(clamp(1.5rem, 3vw, 2.25rem) * -1);
	height: 1px;
	background: var(--linie);
}

.pas:last-child::before { right: 0; }

.pas__nr {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--s-300);
	border: 1px solid var(--linie-tare);
	font-family: var(--display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--rosu-viu);
}

.pas__nr::after { content: counter(pas, decimal-leading-zero); }

.pas__titlu {
	font-size: 1.22rem;
	margin: 0 0 .5rem;
}

.pas__text {
	margin: 0;
	color: var(--text-mut);
	font-size: .96rem;
}

/* 340px ca să iasă 3 coloane pe desktop — cele 6 avantaje umplu 3+3, fără gol.
   `min(340px, 100%)`: sub ~380px lățime, containerul (lățime ecran - gutter)
   ajunge mai îngust decât 340px — fără protecția asta, grid-ul forța coloana
   la cei 340px oricum, iar cardul ieșea peste marginea dreaptă a paginii. */
.avantaje {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.avantaj {
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: var(--s-200);
	border: 1px solid var(--linie);
	border-radius: var(--r-m);
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.avantaj:hover {
	border-color: var(--linie-tare);
	background: var(--s-300);
}

.avantaj__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1.1rem;
	border-radius: var(--r-m);
	background: var(--rosu-slab);
	color: var(--rosu-viu);
}

.avantaj__icon .ico { width: 24px; height: 24px; }

.avantaj__titlu {
	font-size: 1.2rem;
	margin: 0 0 .5rem;
}

.avantaj__text {
	margin: 0;
	color: var(--text-mut);
	font-size: .96rem;
}

/* Bandă cu foto + listă */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.split--invers .split__media { order: 2; }

.split__media {
	border-radius: var(--r-l);
	overflow: hidden;
	box-shadow: var(--e-2);
}

.split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}


/* 11 · ACOPERIRE ========================================================== */

.acoperire {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.localitati {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.localitati li {
	padding: .4rem .95rem;
	background: var(--s-300);
	border: 1px solid var(--linie);
	border-radius: var(--r-pill);
	font-size: .88rem;
	color: var(--text-mut);
}

.harta {
	border-radius: var(--r-l);
	overflow: hidden;
	border: 1px solid var(--linie-tare);
	box-shadow: var(--e-2);
	background: var(--s-300);
	/* Marginea albă subțire desprinde harta luminoasă de fundalul închis. */
	outline: 4px solid var(--s-300);
	outline-offset: -4px;
}

/* Harta rămâne cu aspectul normal Google — e mai lizibilă și mai ușor de
   recunoscut decât una inversată. O încadrăm doar într-un chenar închis. */
.harta iframe {
	width: 100%;
	height: clamp(300px, 42vw, 440px);
	border: 0;
}


/* 12 · GALERIE ============================================================ */

.filtre {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.filtru {
	padding: .55rem 1.15rem;
	background: transparent;
	border: 1px solid var(--linie);
	border-radius: var(--r-pill);
	font-family: var(--display);
	font-size: .98rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-mut);
	cursor: pointer;
	transition: all var(--dur-s) var(--ease);
}

.filtru:hover {
	color: var(--text);
	border-color: var(--linie-tare);
}

.filtru.is-activ {
	background: var(--rosu);
	border-color: var(--rosu);
	color: #fff;
}

.galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(.75rem, 1.5vw, 1.1rem);
}

.galerie__item {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--r-m);
	overflow: hidden;
	background: var(--s-300);
	border: 1px solid var(--linie);
	cursor: zoom-in;
	padding: 0;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.galerie__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease), opacity var(--dur) var(--ease);
}

.galerie__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(200, 16, 24, .5), transparent 55%);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.galerie__item:hover {
	transform: translateY(-4px);
	border-color: var(--rosu);
}

.galerie__item:hover img { transform: scale(1.07); }
.galerie__item:hover::after { opacity: 1; }

.galerie__lupa {
	position: absolute;
	right: .75rem;
	top: .75rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(8, 9, 11, .68);
	backdrop-filter: blur(6px);
	color: #fff;
	opacity: 0;
	transform: scale(.85);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.galerie__item:hover .galerie__lupa {
	opacity: 1;
	transform: scale(1);
}

.galerie__item.is-ascuns { display: none; }

/* Lightbox */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-lightbox);
	display: none;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(6, 7, 9, .95);
	backdrop-filter: blur(8px);
}

.lightbox.is-deschis { display: grid; }

.lightbox__figura {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.lightbox__figura img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	object-fit: contain;
	border-radius: var(--r-m);
	box-shadow: var(--e-3);
}

.lightbox__legenda {
	font-family: var(--display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-mut);
	text-align: center;
}

.lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--linie-tare);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--text);
	cursor: pointer;
	transition: background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}

.lightbox__btn:hover {
	background: var(--rosu);
	border-color: var(--rosu);
}

.lightbox__btn .ico { width: 24px; height: 24px; }

.lightbox__inchide { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev    { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next    { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }


/* 13 · CONTACT ============================================================ */

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 420px) 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.contact-card {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--s-200);
	border: 1px solid var(--linie);
	border-radius: var(--r-l);
}

.contact-tel {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 .35rem;
	font-family: var(--display);
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--text);
	text-decoration: none;
	transition: color var(--dur-s) var(--ease);
}

.contact-tel .ico {
	width: .78em;
	height: .78em;
	color: var(--rosu-viu);
}

.contact-tel:hover { color: var(--rosu-viu); }

.contact-lista {
	display: grid;
	gap: 1.4rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.contact-rand {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.contact-rand__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: var(--r-m);
	background: var(--s-400);
	color: var(--rosu-viu);
}

.contact-rand__icon .ico { width: 21px; height: 21px; }

.contact-eticheta {
	display: block;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-slab);
	margin-bottom: .15rem;
}

.contact-valoare {
	color: var(--text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.contact-valoare:hover { color: var(--rosu-viu); }

.contact-actiuni {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: 2rem;
}


/* 14 · CTA ================================================================ */

.cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(3.5rem, 7vw, 6rem);
}

.cta__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--foto);
	background-size: cover;
	background-position: center;
}

.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right, rgba(8, 9, 11, .95) 10%, rgba(8, 9, 11, .74) 55%, rgba(8, 9, 11, .5));
}

.cta--plat {
	background:
		radial-gradient(50rem 26rem at 85% 110%, var(--rosu-slab), transparent 60%),
		var(--s-200);
	border-top: 1px solid var(--linie);
	border-bottom: 1px solid var(--linie);
}

.cta--plat::before { display: none; }

.cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.cta__titlu {
	font-size: clamp(1.8rem, 3.6vw, 2.7rem);
	margin: 0 0 .5rem;
	max-width: 20ch;
}

.cta__text {
	margin: 0;
	color: var(--text-mut);
	max-width: 46ch;
}

.cta__actiuni {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
}


/* 15 · PROSE & CLASE WORDPRESS ============================================ */

.prose { color: var(--text-mut); }

.prose > * + * { margin-top: 1.2em; }

.prose h2 {
	margin-top: 2.2em;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	color: var(--text);
}

.prose h3 {
	margin-top: 1.8em;
	font-size: 1.3rem;
	color: var(--text);
}

.prose ul,
.prose ol { padding-left: 1.3rem; }

.prose li + li { margin-top: .45rem; }

.prose strong { color: var(--text); }

.prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.prose img { border-radius: var(--r-m); }

.prose blockquote {
	margin: 1.6em 0;
	padding: .3rem 0 .3rem 1.5rem;
	border-left: 3px solid var(--rosu);
	color: var(--text);
	font-size: 1.1rem;
}

.lead {
	font-size: var(--t-lead);
	color: var(--text);
}

.prose table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.prose th,
.prose td {
	padding: .7rem .9rem;
	border: 1px solid var(--linie);
	text-align: left;
}

.prose th {
	background: var(--s-300);
	color: var(--text);
}

.wp-caption,
figure { margin: 0; }

figcaption,
.wp-caption-text {
	margin-top: .6rem;
	font-size: .85rem;
	color: var(--text-slab);
}

.alignleft  { float: left; margin: .4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .4rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }

/* Paginare */
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 3rem;
}

.page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: .75rem;
	border: 1px solid var(--linie);
	border-radius: var(--r-s);
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-mut);
	text-decoration: none;
	transition: all var(--dur-s) var(--ease);
}

.page-numbers:hover {
	color: var(--text);
	border-color: var(--linie-tare);
}

.page-numbers.current {
	background: var(--rosu);
	border-color: var(--rosu);
	color: #fff;
}

/* Carduri generice (index.php) */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}

.card {
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: var(--s-200);
	border: 1px solid var(--linie);
	border-top: 3px solid var(--rosu);
	border-radius: var(--r-m);
}

.card__title {
	font-size: 1.4rem;
	margin: 0 0 .5rem;
}

.card__title a {
	color: var(--text);
	text-decoration: none;
}

.card__title a:hover { color: var(--rosu-viu); }

.card p {
	margin: 0;
	color: var(--text-mut);
}


/* 16 · SUBSOL ============================================================= */

.site-footer {
	position: relative;
	background: var(--s-000);
	border-top: 3px solid var(--rosu);
	padding-top: clamp(3rem, 6vw, 4.5rem);
	font-size: .95rem;
	color: var(--text-mut);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: clamp(1.75rem, 3.5vw, 3rem);
}

.site-footer a {
	color: var(--text-mut);
	text-decoration: none;
	transition: color var(--dur-s) var(--ease);
}

.site-footer a:hover { color: var(--rosu-viu); }

.site-footer__logo {
	height: 92px;
	width: auto;
	margin-bottom: 1.25rem;
}

.site-footer__desc {
	margin: 0 0 1.25rem;
	max-width: 34ch;
}

.site-footer__titlu {
	margin: 0 0 1.1rem;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .13em;
	color: var(--text);
}

.site-footer__nav,
.site-footer__contact {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .7rem;
}

.site-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
}

.site-footer__contact .ico {
	margin-top: .28em;
	color: var(--rosu-viu);
	width: 1.05em;
	height: 1.05em;
}

.site-footer__zona {
	color: var(--text-slab);
	font-size: .9rem;
	line-height: 1.7;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-block: 1.4rem;
	border-top: 1px solid var(--linie);
	font-size: .85rem;
	color: var(--text-slab);
}

.site-footer__legal p { margin: 0; }

.site-footer__legal-linkuri {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

/* Buton flotant de WhatsApp, doar pe desktop.
   Apare după ce treci de hero, ca să nu concureze cu CTA-urile de acolo.
   Telefonul e deja permanent în antet, deci butonul ăsta adaugă singurul canal
   care lipsea. Intenționat NU e bula verde clasică — ar bate cu roșul brandului. */
.wa-flotant {
	position: fixed;
	right: clamp(1.25rem, 2.5vw, 2.25rem);
	bottom: clamp(1.25rem, 2.5vw, 2.25rem);
	z-index: var(--z-bara);
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1.4rem;
	border: 1px solid var(--linie-tare);
	border-radius: var(--r-pill);
	background: rgba(18, 21, 26, .92);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	box-shadow: var(--e-2);
	color: var(--text);
	font-family: var(--display);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;

	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity var(--dur) var(--ease),
	            transform var(--dur) var(--ease),
	            visibility var(--dur),
	            border-color var(--dur-s) var(--ease),
	            background var(--dur-s) var(--ease);
}

.wa-flotant.is-vizibil {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wa-flotant .ico {
	width: 1.35em;
	height: 1.35em;
	color: #4ade80;
	transition: transform var(--dur-s) var(--ease);
}

.wa-flotant:hover {
	background: rgba(26, 31, 38, .96);
	border-color: #4ade80;
}

.wa-flotant:hover .ico { transform: scale(1.12); }

/* Sub 860px preia bara fixă de jos. */
@media (max-width: 860px) {
	.wa-flotant { display: none; }
}

/* Bara fixă de acțiuni, doar pe mobil.
   Apelul e acțiunea principală, cu numărul la vedere — nu doar „Sună".
   WhatsApp și e-mailul rămân compacte, ca să nu concureze cu el. */
.bara-mobil {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-bara);
	align-items: stretch;
	gap: .5rem;
	padding: .55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom));
	background: rgba(8, 9, 11, .92);
	backdrop-filter: saturate(140%) blur(18px);
	-webkit-backdrop-filter: saturate(140%) blur(18px);
	box-shadow: 0 -14px 34px -18px rgba(0, 0, 0, .95);
}

/* Firul roșu de sus leagă bara de restul identității. */
.bara-mobil::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right, var(--rosu), var(--rosu-viu) 45%, var(--rosu-inchis));
}

/* Cât timp meniul e deschis, bara ar sta peste el. */
body.nav-blocat .bara-mobil { display: none; }

.bara-mobil__tel {
	display: flex;
	flex: 1;
	align-items: center;
	gap: .7rem;
	min-width: 0;
	padding: .6rem 1rem;
	border-radius: var(--r-m);
	background: linear-gradient(135deg, var(--rosu-viu), var(--rosu) 55%, var(--rosu-inchis));
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 20px -8px var(--rosu-glow);
	transition: transform var(--dur-s) var(--ease), filter var(--dur-s) var(--ease);
}

.bara-mobil__tel:active { transform: scale(.985); }

.bara-mobil__tel-ico {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .17);
}

.bara-mobil__tel-ico .ico { width: 20px; height: 20px; }

.bara-mobil__tel-txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.15;
}

.bara-mobil__tel-nr {
	font-family: var(--display);
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}

.bara-mobil__tel-et {
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bara-mobil__ico {
	display: grid;
	place-items: center;
	width: 54px;
	flex: none;
	border: 1px solid var(--linie-tare);
	border-radius: var(--r-m);
	background: rgba(255, 255, 255, .06);
	color: var(--text);
	text-decoration: none;
	transition: background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}

.bara-mobil__ico .ico { width: 22px; height: 22px; }
.bara-mobil__ico:active { background: rgba(255, 255, 255, .13); }

/* Doar iconul preia verdele WhatsApp — fără suprafață mare care să bată cu roșul. */
.bara-mobil__ico--wa { color: #4ade80; }

@media (max-width: 380px) {
	.bara-mobil__tel-nr { font-size: 1.15rem; }
	.bara-mobil__ico { width: 48px; }
}


/* 17 · REVEAL ============================================================= */

/* Starea ascunsă se aplică doar dacă JS-ul rulează (clasa .js pe <html>),
   ca să nu rămână conținutul invizibil fără JS. */
.js .reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js .reveal.is-in {
	opacity: 1;
	transform: none;
}

.js .reveal--intarziat { transition-delay: .1s; }


/* 18 · BREAKPOINTS ======================================================== */

@media (max-width: 1080px) {
	.site-footer__inner { grid-template-columns: 1fr 1fr; }

	.contact-grid { grid-template-columns: 1fr; }

	.produs-rand { grid-template-columns: minmax(0, 210px) 1fr; }
	.produs-rand--invers { grid-template-columns: 1fr minmax(0, 210px); }

	/* Butonul coboară sub factori, ca să nu strângă coloana din mijloc. */
	.pret {
		grid-template-columns: minmax(0, 14rem) 1fr;
		align-items: start;
	}

	.pret > .btn { grid-column: 2; justify-self: start; }
}

/* Sub 860px meniul devine drawer. Aceeași valoare e în assets/js/main.js. */
@media (max-width: 860px) {
	.nav-toggle { display: inline-flex; }

	.tel-cap span { display: none; }

	.tel-cap {
		width: 46px;
		height: 46px;
		justify-content: center;
		border: 1px solid var(--linie);
		border-radius: var(--r-s);
		background: rgba(255, 255, 255, .05);
	}

	.tel-cap .ico { width: 22px; height: 22px; }

	.antet-actiuni .btn { display: none; }

	.site-nav {
		position: fixed;
		inset: 0;
		z-index: var(--z-drawer);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: calc(var(--h-antet) + 1.5rem) var(--gut) 2rem;
		background: var(--s-000);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-1.5rem);
		transition: opacity var(--dur) var(--ease),
		            transform var(--dur) var(--ease),
		            visibility var(--dur);
		overflow-y: auto;
	}

	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__list li { border-bottom: 1px solid var(--linie); }

	.site-nav__list a {
		padding-block: 1.15rem;
		font-size: 1.65rem;
		letter-spacing: .04em;
		color: var(--text);
	}

	.site-nav__list a::after { display: none; }

	.site-nav__list a.is-current { color: var(--rosu-viu); }

	.site-nav__actiuni {
		display: flex;
		flex-direction: column;
		gap: .75rem;
		margin-top: 2rem;
	}

	.bara-mobil { display: flex; }

	/* Loc pentru bara fixă, ca să nu acopere subsolul. */
	.site-footer { padding-bottom: 5.5rem; }

	.serv-bloc,
	.split,
	.acoperire { grid-template-columns: 1fr; }

	/* Pe o singură coloană, poza secundară s-ar suprapune prea mult. */
	.serv-bloc__foto--secundar { width: 46%; }

	.pret { grid-template-columns: 1fr; }
	.pret > .btn { grid-column: 1; }

	.serv-bloc--invers .serv-bloc__media,
	.split--invers .split__media { order: 0; }

	.hero { min-height: 78vh; }

	.hero__titlu { max-width: 100%; }

	.cifra { border-right: 0; border-bottom: 1px solid var(--linie); }
	.cifra:nth-last-child(-n+1) { border-bottom: 0; }

	.pas::before { display: none; }
}

@media (max-width: 720px) {
	.site-footer__inner { grid-template-columns: 1fr; }

	/* Pe ecran îngust totul intră pe o coloană, cu cercul deasupra textului. */
	.produs-rand,
	.produs-rand--invers { grid-template-columns: 1fr; }

	.produs-rand--invers .produs-rand__media,
	.produs-rand--invers .produs-rand__corp { order: 0; }

	.produs-rand__media {
		max-width: 220px;
		margin-inline: auto;
	}

	.produs-rand__corp { text-align: center; }

	.produs-rand__text { margin-inline: auto; }

	.produs-rand__actiuni { justify-content: center; }

	.lightbox__prev,
	.lightbox__next { top: auto; bottom: 1rem; transform: none; }
}

@media (max-width: 560px) {
	.produs { flex-basis: 130px; }

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

	.cifre__grid { grid-template-columns: 1fr 1fr; }

	.cifra { border-right: 1px solid var(--linie); }
	.cifra:nth-child(2n) { border-right: 0; }
	.cifra:nth-last-child(-n+2) { border-bottom: 0; }

	/* Pe telefon celulele sunt înguste: mai puțin padding lateral, spațiere mai
	   mică între litere și cifre puțin mai mici, ca etichetele să încapă pe două
	   rânduri fără să fie tăiate. */
	.cifra { padding: 1.5rem .7rem; }
	.cifra__nr { font-size: clamp(2rem, 9vw, 2.6rem); }
	.cifra__et {
		font-size: .74rem;
		letter-spacing: .06em;
		margin-top: .45rem;
	}

	.cta__inner { flex-direction: column; align-items: flex-start; }

	.btn { padding: .85rem 1.5rem; font-size: 1rem; }

	.site-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* Sub ~400px, cele două butoane din hero („Sună" + „Vezi produsele") nu mai
   încap unul lângă altul pe un singur rând de text și `flex-wrap` le trimitea
   unul sub altul. Le forțăm pe coloane egale, ca rândul să nu se rupă
   niciodată — dacă textul tot nu încape, se lasă pe două linii în buton,
   nu împinge butonul următor mai jos. */
@media (max-width: 400px) {
	.hero__actiuni { flex-wrap: nowrap; gap: .6rem; }

	.hero__actiuni .btn {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: .9rem;
		font-size: .88rem;
		letter-spacing: .04em;
		white-space: normal;
		text-align: center;
	}

	.hero__actiuni .btn .ico { width: 1em; height: 1em; flex: none; }
}


/* Mișcare redusă — respectăm preferința sistemului. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.js .reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}