/* ============================================================================
   PAGINI STATICE — Contact, Suport tehnic, Despre noi
   Sursa de adevăr: design/v3/{Contact,Suport,Despre}.dc.html (stiluri inline).
   Toate valorile de mai jos sunt copiate 1:1 din machetă — nu se rotunjesc.

   Prefix propriu `.dpp-`. Clasele vechi `.dp-contact` / `.dp-suport` / `.dp-despre`
   din `style.css` NU se mai folosesc în conținutul acestor pagini (design v2),
   deci nu se bat cu nimic de aici.
   ========================================================================== */

/* ---------------------------------------------------------------- cadrul
   Blocksy pune conținutul într-un container de 1280px cu margine automată
   (⇒ x = 80) și adaugă 60px de spațiu vertical. Macheta cere ca fiecare bloc
   să-și poarte singur containerul `.dp-wrap` (1280 + 32 padding ⇒ x = 112,
   exact ca antetul și subsolul). Deci pe aceste pagini scoatem constrângerea
   de la `.entry-content` și o punem pe blocurile mele.                       */

body.dpp-pagina .ct-container-full[data-vertical-spacing] { padding-top: 0; padding-bottom: 8px; }
/* Despre nu are încă banda globală de CTA (e scoasă din conținut, urmează să
   fie pornită din `diagpro-cta.php`). Până atunci ține spațiul machetei;
   când banda apare, ea aduce propriile 44px sus ⇒ spațiul de aici dispare. */
body.dpp-p-despre .ct-container-full[data-vertical-spacing] { padding-bottom: 52px; }
body.dpp-p-despre:has(.dph-banda-globala) .ct-container-full[data-vertical-spacing] { padding-bottom: 0; }

body.dpp-pagina .entry-content.is-layout-constrained {
	max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
}
body.dpp-pagina .entry-content.is-layout-constrained > * {
	max-width: none; margin-left: 0; margin-right: 0;
}
body.dpp-pagina .entry-content > .dpp { margin-top: 0; margin-bottom: 0; }

/* containerul machetei — aceleași 1280/32 ca antetul și subsolul */
.dpp .dp-wrap { max-width: 1280px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- breadcrumb */
.dpp-brm {
	display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
	padding: 20px 32px 0;
	font-size: 12.5px; line-height: normal; color: #8b97a8;
}
.dpp-brm a { color: #8b97a8; text-decoration: none; }
.dpp-brm a:hover { color: var(--dp-blue); }
.dpp-brm-acum { color: #33415c; font-weight: 600; }

/* ---------------------------------------------------------------- cap de pagină */
.dpp-cap { padding: 0 32px; }
.dpp-titlu {
	margin: 14px 0 6px; font-size: 30px; font-weight: 800; color: #16233d;
	letter-spacing: -0.5px; line-height: normal;
}
.dpp-lead {
	margin: 0; font-size: 15px; color: #4a5568; line-height: 1.55; max-width: 62ch;
}
.dpp-lead--lat { max-width: 70ch; }
.dpp-lead strong { color: #16233d; font-weight: 700; }
.dpp-lead a { color: var(--dp-blue); }

/* ---------------------------------------------------------------- corpul cu 2 coloane */
.dpp-corp {
	padding: 28px 32px 8px;
	display: flex; gap: 32px; align-items: flex-start;
}
.dpp-lat { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }

/* Despărțitorul „SAU PRIN FORMULAR" există DOAR în macheta mobilă: pe desktop
   formularul și cardul de chat stau unul lângă altul, deci n-are ce despărți. */
.dpp-sau { display: none; }

/* ---------------------------------------------------------------- cardul alb al formularului */
.dpp-formcard {
	flex: 1; min-width: 0;
	background: #fff; border: 1px solid #dbe4f2; border-radius: 16px; padding: 32px;
	box-shadow: 0 14px 34px rgba(22, 35, 61, 0.06);
}
/* CF7 pune formularul într-un `<div class="wpcf7">`; coloana cu gap din machetă
   trebuie să cadă pe `<form>`, altfel spațiile ies din marginile lui `<p>`. */
.dpp-formcard .wpcf7 { margin: 0; }
.dpp-formcard .wpcf7-form { display: flex; flex-direction: column; gap: 18px; }
.dpp-formcard .wpcf7-form > .hidden-fields-container,
.dpp-formcard .wpcf7-form > .screen-reader-response { display: none; }
.dpp-formcard .wpcf7-form .wpcf7-response-output {
	margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
	border: 1.5px solid #cdd6e4;
}

/* ---------------------------------------------------------------- câmpuri */
.dpp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dpp-camp { display: flex; flex-direction: column; gap: 7px; }
.dpp-camp--lat { grid-column: 1 / -1; }
/* ⚠️ Blocksy livrează `static/bundle/cf-7.min.css` cu
   `.wpcf7 label:not(.wpcf7-form-control-wrap){display:block;font-size:15px;font-weight:600}`
   (specificitate 0,3,1). De aceea etichetele de aici se scriu cu un selector mai
   greu — altfel macheta (13px/700) e călcată de temă. */
.dpp .dpp-formcard .wpcf7 .dpp-camp > label {
	display: block; font-size: 13px; font-weight: 700; color: #16233d;
	line-height: normal; margin: 0;
}
.dpp-opt { color: #8b97a8; font-weight: 500; }

.dpp-formcard .wpcf7-form-control-wrap { display: block; }
.dpp-formcard input[type="text"],
.dpp-formcard input[type="email"],
.dpp-formcard input[type="tel"],
.dpp-formcard select,
.dpp-formcard textarea {
	width: 100%; box-sizing: border-box; height: auto;
	border: 1.5px solid #cdd6e4; border-radius: 10px;
	padding: 12px 14px; font-size: 14px; font-family: inherit; line-height: normal;
	/* `background-color`, NU `background`: scurtătura ar șterge săgeata pe care
	   Blocksy o pune ca `background-image` pe `<select>` (macheta are săgeată). */
	background-color: #fbfcfe; color: #16233d; outline: none; box-shadow: none;
	margin: 0; min-height: 0;
}
/* săgeata Blocksy stă la `right 10px`, lată de 21px ⇒ îi facem loc (macheta are
   un `<select>` nativ, care își rezervă singur spațiul) */
.dpp-formcard select { cursor: pointer; padding-right: 36px; height: 43px; }
.dpp-formcard textarea { resize: vertical; display: block; }
.dpp-formcard input:focus,
.dpp-formcard select:focus,
.dpp-formcard textarea:focus { border-color: var(--dp-blue); background: #fff; }
.dpp-formcard ::placeholder { color: #93a0b4; opacity: 1; }

/* ---------------------------------------------------------------- acordul GDPR */
.dpp-acord { font-size: 13px; color: #4a5568; line-height: 1.5; }
.dpp-acord .wpcf7-form-control-wrap,
.dpp-acord .wpcf7-acceptance,
.dpp-acord .wpcf7-list-item { display: block; margin: 0; }
.dpp .dpp-formcard .wpcf7 .dpp-acord label {
	display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
	font-size: 13px; font-weight: 400; color: #4a5568; line-height: 1.5; margin: 0;
}
.dpp-acord input[type="checkbox"] {
	accent-color: var(--dp-blue); width: 15px; height: 15px; margin: 2px 0 0; flex-shrink: 0;
}
.dpp-acord a { color: var(--dp-blue); }

/* ---------------------------------------------------------------- rândul de trimitere */
.dpp-trimite { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dpp-nota { font-size: 12.5px; color: #8b97a8; line-height: 1.4; }

.dpp-formcard input.wpcf7-submit {
	float: none;   /* Blocksy pune `float:left` pe butonul CF7 */
	background: var(--dp-blue); color: #fff; border: 0; border-radius: 11px;
	padding: 14px 32px; font-weight: 800; font-size: 15px; line-height: normal;
	font-family: inherit; cursor: pointer; width: auto; margin: 0;
}
.dpp-formcard input.wpcf7-submit:hover:not(:disabled) { background: #234E96; }
@supports (color: oklch(0.43 0.15 260)) {
	.dpp-formcard input.wpcf7-submit:hover:not(:disabled) { background: oklch(0.43 0.15 260); }
}
/* Butonul e blocat până se bifează acordul — comportamentul normal al CF7.
   Nu-l deblocăm; îl facem doar mai clar „de așteptat", nu spălăcit. */
.dpp-formcard input.wpcf7-submit:disabled {
	opacity: 1; background: #cdd6e4; color: #6b7a90; cursor: not-allowed;
}
.dpp-formcard .wpcf7-spinner { margin: 0 0 0 4px; }

/* ---------------------------------------------------------------- pașii 1-2-3 (Suport) */
.dpp-sect { display: flex; flex-direction: column; gap: 14px; }
.dpp-formcard--pasi .wpcf7-form { gap: 26px; }
.dpp-sect--linie { border-top: 1px solid #edf1f7; padding-top: 22px; }
.dpp-pas-cap { display: flex; align-items: center; gap: 12px; }
.dpp-nr {
	width: 28px; height: 28px; border-radius: 50%; background: var(--dp-blue); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 14px; line-height: normal; flex-shrink: 0;
}
.dpp-pas-t { font-size: 17px; font-weight: 800; color: #16233d; line-height: normal; }
.dpp-pas-nota { margin: 0; font-size: 13px; color: #8b97a8; line-height: 1.5; }
.dpp-pas-nota strong { color: #4a5568; }
.dpp-pas-nota a { color: var(--dp-blue); }

/* ---------------------------------------------------------------- zona de atașamente */
.dpp-drop {
	position: relative;
	border: 1.5px dashed #b9c7de; border-radius: 12px; padding: 26px;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	background: #fbfcfe; cursor: pointer; text-align: center;
}
.dpp-drop:hover, .dpp-drop.dpp-drop--activ { border-color: var(--dp-blue); }
.dpp-drop-t { font-size: 14px; font-weight: 700; color: var(--dp-blue); line-height: normal; }
.dpp-drop-s { font-size: 12.5px; color: #8b97a8; line-height: normal; }
/* câmpurile native rămân în pagină (CF7 are nevoie de ele), dar nu se văd */
.dpp-drop-inputs { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.dpp-drop-lista { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; width: 100%; }
.dpp-drop-lista:empty { display: none; }
.dpp-drop-lista li {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 12.5px; color: #4a5568; line-height: normal;
}
.dpp-drop-sterge {
	border: 0; background: none; padding: 0 2px; cursor: pointer;
	font-size: 15px; line-height: 1; color: #8b97a8; font-family: inherit;
}
.dpp-drop-sterge:hover { color: var(--dp-red); }

/* ---------------------------------------------------------------- carduri laterale */
.dpp-card {
	border: 1px solid #e3e8f0; border-radius: 16px; padding: 22px; background: #fff;
	display: flex; flex-direction: column; gap: 8px;
}
.dpp-card--wa { background: #eef3fb; border-color: #dbe4f2; padding: 24px; gap: 10px; }
.dpp-card--pasi { padding: 24px; gap: 14px; }
.dpp-card-t { font-size: 14.5px; font-weight: 800; color: #16233d; line-height: normal; }
.dpp-card-t--mediu { font-size: 15px; }
.dpp-card-t--mare { font-size: 16px; }
.dpp-card-p { font-size: 13.5px; color: #4a5568; line-height: 1.5; }
.dpp-card--wa .dpp-card-p { line-height: 1.55; }
.dpp-card-link { font-size: 13.5px; font-weight: 700; color: var(--dp-blue); text-decoration: none; }
.dpp-card-link:hover { text-decoration: underline; }
.dpp-card-prog {
	font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; color: #7d8a9c;
	text-align: center; line-height: normal;
}
.dpp-card-prog--stanga { text-align: left; }

/* butonul de WhatsApp — verdele machetei, pe toată lățimea cardului */
.dpp .dpp-btn-wa {
	display: block; background: #2A5FB7; color: #fff !important; text-decoration: none;
	font-weight: 800; font-size: 14.5px; padding: 13px 0; border-radius: 11px;
	text-align: center; line-height: normal; border: 0;
}
.dpp .dpp-btn-wa:hover { background: #234E96; color: #fff !important; }
@supports (color: oklch(0.55 0.13 150)) {
	.dpp .dpp-btn-wa { background: oklch(0.5 0.15 260); }
	.dpp .dpp-btn-wa:hover { background: oklch(0.42 0.15 260); }
}
.dpp .dpp-btn-wa--mic { font-size: 14px; padding: 12px 0; }

/* numărul de telefon (cardul „Sună-ne" — în afara machetei v3, vezi CONTACT-SI-NUMAR.md) */
.dpp-tel { margin: 0; }
.dpp-tel a { font-size: 21px; font-weight: 800; color: #16233d; text-decoration: none; line-height: normal; }
.dpp-tel a:hover { color: var(--dp-blue); }

/* cardul „Scrie-ne pe email" (adresa e mai lungă decât un număr de telefon — mărimea mare a
   telefonului nu încape lizibil, deci un modificator mai mic pe același element .dpp-tel).
   07.09.2026 — I2-subsol-si-contact, condiția NETOPIA „date de contact complete". */
.dpp-tel--mail a { font-size: 16px; }

/* cardul „Date firmă" — text mic, două rânduri, ca o notă de subsol (nu un CTA) */
.dpp-card--firma .dp-date-firma {
	font-size: 13.5px;
	color: #4a5568;
	line-height: 1.55;
	margin: 0;
}

/* pașii mici din cardul „Cum funcționează" */
.dpp-pas-mic { display: flex; gap: 12px; align-items: flex-start; }
.dpp-pas-mic span:last-child { font-size: 13.5px; color: #4a5568; line-height: 1.5; }
.dpp-nr-mic {
	width: 24px; height: 24px; border-radius: 50%; background: #eef3fb; color: var(--dp-blue);
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 12px; line-height: normal; flex-shrink: 0;
}

/* ============================================================ DESPRE NOI ==== */
.dpp-despre .dpp-cap { padding: 24px 32px 0; }
.dpp-despre-in { max-width: 760px; }
.dpp-eyebrow {
	font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 2px;
	color: var(--dp-blue); margin: 0 0 12px; line-height: normal; text-transform: none;
	font-weight: 400; display: block;
}
.dpp-despre .dpp-titlu {
	margin: 0 0 14px; font-size: 40px; font-weight: 800; color: #16233d;
	line-height: 1.1; letter-spacing: -1px;
}
.dpp-despre .dpp-lead { font-size: 17px; color: #4a5568; line-height: 1.65; max-width: none; }

.dpp-sec-foto { padding: 32px 32px 0; }
.dpp-sec { padding: 52px 32px 0; }
.dpp-rand { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dpp-rand h2 {
	margin: 0 0 12px; font-size: 27px; font-weight: 800; color: #16233d; letter-spacing: -0.5px;
	line-height: 1.2;
}
.dpp-rand p { margin: 0 0 12px; font-size: 15px; color: #4a5568; line-height: 1.7; }
.dpp-rand p:last-child { margin-bottom: 0; }
.dpp-rand a { color: var(--dp-blue); }

/* ⚠️ 02.09.2026: vechile reguli `.dpp-foto` (înălțime fixă 320px, hașură, `--lat`) au fost
   ȘTERSE de aici. Erau resturi din macheta dinainte de 01.09, când pagina avea trei locuri
   de fotografie scoase odată cu textele-substituent; verificat în baza de date că nici
   `.dpp-foto`, nici `.dpp-rand` nu mai apar în conținutul vreunei pagini. Numele `.dpp-foto`
   e refolosit acum de slotul nou, definit mai sus. */

.dpp-valori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* ⛔⛔ REGULĂ DE DESIGN (Marius, 02.09.2026, cerută de el de mai multe ori):
   **iconița stă pe ACELAȘI RÂND cu titlul**, nu deasupra lui. Varianta veche era
   `flex-direction: column` cu iconița primul copil — exact așezarea reclamată.
   Aici: grilă `auto 1fr`, iconița pe rândul 1 stânga, titlul lângă ea, textul pe rândul 2
   sub titlu (coloana a doua), ca să se citească drept coloană, nu în trepte.
   ⛔ Și iconița NU e o bifă generică: bifa într-un cerc se citește ca loc rezervat. */
.dpp-valoare {
	border: 1px solid #e3e8f0; border-radius: 16px; padding: 24px 26px; background: #fff;
	display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 6px;
	/* `align-items: center` aliniază iconița cu titlul pe rândul 1;
	   `align-content: start` împiedică rândurile să se depărteze când cardul e mai înalt
	   decât conținutul (cardurile din rând au înălțime egală) — altfel apărea un gol
	   de ~20px între titlu și paragraf, care rupea legătura dintre ele. */
	align-items: center; align-content: start;
}
.dpp-valoare-bifa {
	grid-column: 1; grid-row: 1;
	width: 38px; height: 38px; border-radius: 11px; background: #eef3fb; color: var(--dp-blue);
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.dpp-valoare-bifa .dp-icon { width: 21px; height: 21px; display: block; }
.dpp-valoare h3 {
	grid-column: 2; grid-row: 1;
	margin: 0; font-size: 16px; font-weight: 800; color: #16233d; line-height: 1.3; letter-spacing: normal;
}
/* textul sub titlu, aliniat la el — nu sub iconiță */
.dpp-valoare p { grid-column: 2; grid-row: 2; margin: 0; font-size: 13.5px; color: #5a6675; line-height: 1.55; }
.dpp-valoare a { color: var(--dp-blue); }

/* ============================================================ RESPONSIV ==== */
@media (max-width: 1100px) {
	.dpp-corp { flex-wrap: wrap; }
	.dpp-lat { width: 100%; flex-direction: row; flex-wrap: wrap; }
	.dpp-lat > * { flex: 1 1 300px; }
}
@media (max-width: 860px) {

	.dpp-lat { flex-direction: column; }
	.dpp-lat > * { flex: 1 1 auto; }
	.dpp-rand { grid-template-columns: 1fr; gap: 24px; }
	.dpp-rand--invers .dpp-rand-text { order: 2; }
	.dpp-valori { grid-template-columns: 1fr; }
	.dpp-despre .dpp-titlu { font-size: 30px; letter-spacing: -0.5px; }
	.dpp-sec, .dpp-sec-foto { padding-top: 34px; }
}
@media (max-width: 620px) {
	.dpp-grid2 { grid-template-columns: 1fr; }
	.dpp-formcard { padding: 22px 20px; }
	.dpp-trimite { align-items: flex-start; flex-direction: column; gap: 10px; }
	.dpp-formcard input.wpcf7-submit { width: 100%; }
}
@media (max-width: 560px) {
	.dpp-brm, .dpp-cap, .dpp-corp, .dpp-sec, .dpp-sec-foto, .dpp-despre .dpp-cap { padding-left: 20px; padding-right: 20px; }
	.dpp-titlu { font-size: 26px; }
	.dpp-drop { padding: 20px 14px; }
	.dpp-drop-s { font-size: 12px; }
}

/* ============================================================================
   TELEFON (≤767px) — machetele „Mobil Contact.dc.html" și „Mobil Despre.dc.html"
   ⚠️ Săgeata „înapoi" și titlul scurt vin din antetul compact al site-ului
      (diagpro-antet-mobil.php). Aici NU se mai face unul.
   ⛔ Numărul de telefon rămâne codat (`diagpro_telefon_html`), iar adresa de email
      NU se afișează nicăieri — macheta o are, site-ul nu (decizie Marius 17.08).
   ========================================================================== */
@media (max-width: 767px) {
	.dpp-brm, .dpp-cap, .dpp-corp, .dpp-sec, .dpp-sec-foto,
	.dpp-despre .dpp-cap { padding-left: 16px; padding-right: 16px; }

	.dpp-brm { padding-top: 12px; font-size: 12px; }
	.dpp-cap { padding-top: 0; }
	.dpp-titlu { margin: 10px 0 6px; font-size: 21px; letter-spacing: -0.4px; line-height: 1.2; }
	.dpp-lead { font-size: 13.5px; line-height: 1.55; }

	/* ---------------------------------------------------------------- CONTACT
	   Macheta pune întâi cardul de chat, apoi despărțitorul „SAU PRIN FORMULAR",
	   apoi formularul, apoi cardul de tichet, apoi datele de contact.
	   Pe desktop formularul e în stânga și cardurile în dreapta; pe telefon
	   `display: contents` scoate cardurile din coloana lor ca să pot pune ordinea
	   machetei fără să ating marcajul paginii. */
	/* ⚠️ `align-items: stretch` e obligatoriu: regula de desktop pune `flex-start`, iar
	   pe o coloană asta strânge fiecare bloc la lățimea textului lui (cardul „Sună-ne"
	   ieșea de 138px din 358). */
	.dpp-corp { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 16px; }
	.dpp-lat { display: contents; }
	.dpp-lat > .dpp-card { width: auto; }
	.dpp-card--wa { order: 1; }
	.dpp-sau { order: 2; }
	.dpp-formcard { order: 3; }
	/* ⚠️ 07.09.2026 — au apărut 2 carduri noi (email + date firmă, condiția NETOPIA „date de
	   contact complete"), între „Sună-ne" și „Ai deja un produs?" în ordinea din DOM — indicii
	   nth-child de mai jos s-au mutat cu 2 în josul listei. */
	.dpp-lat > .dpp-card:nth-child(5) { order: 4; } /* „Ai deja un produs de la noi?" */
	.dpp-lat > .dpp-card:nth-child(6) { order: 5; } /* „Răspunsuri imediate" */
	.dpp-lat > .dpp-card:nth-child(2) { order: 6; } /* „Sună-ne" = datele de contact, jos */
	.dpp-lat > .dpp-card:nth-child(3) { order: 7; } /* „Scrie-ne pe email" */
	.dpp-lat > .dpp-card:nth-child(4) { order: 8; } /* „Date firmă" */

	/* despărțitorul: linie — text — linie (macheta: 11px/700, #8b97a8) */
	.dpp-sau {
		display: flex; align-items: center; gap: 12px;
		margin: 2px 0;
	}
	.dpp-sau::before, .dpp-sau::after { content: ""; flex: 1; height: 1px; background: #E3E8F0; }
	.dpp-sau span { font-size: 11px; font-weight: 700; color: #8B97A8; letter-spacing: 0.2px; }

	/* formularul: fără ramă de card — pe 358px lățime rama fura 40px de conținut */
	.dpp-formcard { border: 0; box-shadow: none; padding: 0; background: none; border-radius: 0; }
	.dpp-formcard .wpcf7-form { gap: 12px; }
	.dpp-grid2 { grid-template-columns: 1fr; gap: 12px; }
	.dpp-camp { gap: 6px; }
	/* ⚠️ 16px, nu 15px ca în machetă: sub 16px, Safari pe iPhone MĂREȘTE pagina când
	   intri în câmp și clientul rămâne cu ecranul strâmb. Un pixel diferență față de
	   machetă, un bug real mai puțin. */
	.dpp-formcard input[type="text"],
	.dpp-formcard input[type="email"],
	.dpp-formcard input[type="tel"],
	.dpp-formcard select,
	.dpp-formcard textarea { padding: 13px 14px; font-size: 16px; }
	.dpp-formcard select { height: 48px; }
	.dpp-formcard textarea { min-height: 130px; }
	.dpp-acord { font-size: 12px; }
	.dpp .dpp-formcard .wpcf7 .dpp-acord label { font-size: 12px; gap: 9px; }
	.dpp-acord input[type="checkbox"] { width: 17px; height: 17px; }
	.dpp-trimite { gap: 8px; }
	.dpp-formcard input.wpcf7-submit { width: 100%; padding: 15px 0; border-radius: 10px; font-size: 15px; }
	.dpp-nota { font-size: 12px; }

	/* cardurile laterale, la dimensiunile machetei */
	.dpp-card { padding: 16px; border-radius: 14px; gap: 7px; }
	.dpp-card--wa { padding: 14px; gap: 9px; }
	.dpp-card-t, .dpp-card-t--mediu, .dpp-card-t--mare { font-size: 14px; }
	.dpp-card-p { font-size: 12.5px; line-height: 1.5; }
	/* linkurile din carduri își iau propria zonă de atins (erau de 21px) */
	.dpp-card-link { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; }
	.dpp .dpp-btn-wa { font-size: 14px; padding: 13px 0; border-radius: 10px; }
	.dpp-card-prog { font-size: 10.5px; }

	/* datele de contact de jos: macheta le are ca text simplu, fără ramă */
	.dpp-lat > .dpp-card:nth-child(2) {
		border: 0; border-top: 1px solid #EDF1F7; border-radius: 0;
		background: none; padding: 14px 2px 4px; gap: 5px;
	}
	.dpp-tel a { display: inline-flex; align-items: center; min-height: 36px; font-size: 16px; }

	/* ---------------------------------------------------------------- DESPRE */
	.dpp-despre .dpp-cap { padding-top: 6px; }
	.dpp-eyebrow { font-size: 10.5px; letter-spacing: 2px; margin-bottom: 10px; }
	.dpp-despre .dpp-titlu { margin: 0 0 12px; font-size: 26px; letter-spacing: -0.6px; line-height: 1.15; }
	.dpp-despre .dpp-lead { font-size: 14.5px; line-height: 1.65; }

	.dpp-sec-foto { padding-top: 20px; }
	.dpp-sec { padding-top: 26px; }
	.dpp-rand { gap: 16px; }
	.dpp-rand h2 { margin-bottom: 8px; font-size: 19px; letter-spacing: -0.4px; line-height: 1.25; }
	.dpp-rand p { margin-bottom: 10px; font-size: 13.5px; line-height: 1.65; }

	/* ⏳ Cele 3 fotografii lipsesc încă (le dă Marius) — locurile rămân marcate,
	   la înălțimile machetei. Nu se pun poze de umplutură. */

	/* cele 3 valori: bifa la stânga, textul la dreapta (macheta), fără să schimb marcajul */
	.dpp-valori { gap: 10px; }
	.dpp-valoare {
		display: grid; grid-template-columns: 32px minmax(0, 1fr);
		column-gap: 12px; row-gap: 3px;
		padding: 16px; border-radius: 14px;
	}
	.dpp-valoare-bifa { grid-column: 1; grid-row: 1 / span 2; }
	.dpp-valoare h3 { grid-column: 2; grid-row: 1; font-size: 14.5px; }
	.dpp-valoare p { grid-column: 2; grid-row: 2; font-size: 12.5px; line-height: 1.5; }
}

/* 01.09.2026 — „Despre noi": rândurile pe 2 coloane și-au pierdut imaginea
   (pozele propuse erau generate cu AI, nu fotografii reale — DECIZII 103).
   Fără regula asta textul rămâne pe jumătate de lățime, cu un gol în dreapta. */
/* =====================================================================================
   „Despre noi" — text + fotografie pe două coloane  (cerere Marius, 02.09.2026)
   ⭐ `:has()` e ales dinadins: coloana a doua apare DOAR dacă slotul chiar a randat o
   figură. În producție, fără fotografie, scurtătura `[dp_foto]` nu scrie nimic, `:has()`
   nu se potrivește, iar secțiunea rămâne pe toată lățimea — exact cum e azi. Dacă un
   browser vechi n-ar suporta `:has()`, cade tot pe varianta de o coloană: fără stricăciuni.
   ===================================================================================== */
.dpp-despre .dpp-sec-2col { display: block; }
.dpp-despre .dpp-sec-2col:has(> .dpp-foto) {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 38px;
	/* ⚠️ `stretch`, nu `start`: cu raport fix (4/3) caseta ieșea mai înaltă decât textul
	   secțiunii scurte și rămânea un gol de ~200px sub paragrafe. Așa fotografia ia exact
	   înălțimea textului de lângă ea, iar rândul arată intenționat. `min-height` ține totuși
	   o înălțime decentă la secțiunile foarte scurte. */
	align-items: stretch;
}
/* în două coloane, limita de 74ch ar strânge textul a doua oară — coloana o dă deja */
.dpp-despre .dpp-sec-2col:has(> .dpp-foto) .dpp-sec-plin p { max-width: none; }
.dpp-despre .dpp-sec-2col > .dpp-sec-plin { margin-bottom: 0; }

.dpp-foto { margin: 0; min-height: 260px; }
.dpp-foto-img {
	display: block; width: 100%; height: 100%; border-radius: 14px;
	border: 1px solid var(--dp-border); background: var(--dp-bg-soft);
	/* fotografia umple coloana pe înălțimea textului; decupajul e preferabil unui gol */
	object-fit: cover;
}
/* locul rezervat: se vede DOAR pe dev (v. comentariul din diagpro-pagini.php) */
.dpp-foto--gol .dpp-foto-cutie {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; text-align: center; padding: 18px;
	height: 100%;
	border: 2px dashed var(--dp-border); border-radius: 14px;
	background: repeating-linear-gradient(45deg, var(--dp-bg-softer) 0 10px, var(--dp-bg-soft) 10px 20px);
}
.dpp-foto-eticheta {
	font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--dp-text-faint);
}
.dpp-foto-text { font-size: 14px; line-height: 1.55; color: var(--dp-text-soft); max-width: 34ch; }
.dpp-foto-slug { font-size: 11.5px; color: var(--dp-text-faint); background: #fff; padding: 3px 8px; border-radius: 5px; }

.dpp-despre .dpp-sec-plin { display: block; margin: 0 0 44px; }
.dpp-despre .dpp-sec-plin h2 { font-size: 26px; line-height: 1.25; margin: 0 0 14px; }
.dpp-despre .dpp-sec-plin p { margin: 0 0 12px; font-size: 15px; color: #4a5568; line-height: 1.7; max-width: 74ch; }
.dpp-despre .dpp-sec-plin p:last-child { margin-bottom: 0; }
.dpp-despre .dpp-sec-plin a { color: var(--dp-blue); }

/* =====================================================================================
   „Despre noi" pe ecran îngust — fotografia trece SUB text.
   ⚠️ Regula stă la finalul fișierului dinadins: definiția de bază a grilei nu e într-un
   media query, iar la specificitate egală câștigă cea scrisă mai jos. Pusă mai sus, în
   blocul responsiv de la 860px, ar fi fost anulată în tăcere de propria ei definiție.
   ===================================================================================== */
@media (max-width: 860px) {
	.dpp-despre .dpp-sec-2col:has(> .dpp-foto) { grid-template-columns: 1fr; gap: 20px; }
	.dpp-despre .dpp-sec-2col:has(> .dpp-foto) .dpp-sec-plin p { max-width: 74ch; }
}
@media (max-width: 860px) {
	.dpp-foto { min-height: 0; }
	.dpp-foto--gol .dpp-foto-cutie { height: auto; aspect-ratio: 4 / 3; }
	.dpp-foto-img { height: auto; object-fit: initial; }
}
@media (max-width: 560px) {
	/* ⛔ pe telefon NU se pune iconița deasupra ca să se câștige lățime — se micșorează */
	.dpp-valoare { padding: 18px 18px; column-gap: 10px; }
	.dpp-valoare-bifa { width: 32px; height: 32px; border-radius: 9px; }
	.dpp-valoare-bifa .dp-icon { width: 18px; height: 18px; }
	.dpp-valoare h3 { font-size: 15px; }
}

/* ⛔⛔ REPARAT 04.09.2026 — REGULA CASEI: iconița și titlul stau pe ACEEAȘI linie.
   Pe „Garanție", „Cum plătesc" și „Cum returnez", cardurile aveau iconița (44×44, cu
   `margin-bottom:12px`) ca FRATE al lui `<h3>`, fără container flex ⇒ iconița se stivuia
   DEASUPRA titlului. Exact tiparul descris ca greșit în CLAUDE.md, inclusiv capcana:
   „iconița are margin-bottom din șablonul copiat → se stivuiește chiar dacă pui flex".
   Aici nu putem înveli iconița și titlul într-un container (markup-ul stă în conținutul
   paginii), așa că le punem pe un rând cu GRID: iconița coloana 1, titlul coloana 2,
   restul textului dedesubt, pe toată lățimea. */
.pro-gar-card, .pro-pay-card, .pro-ret-card {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 12px;
}
.pro-gar-card-icon, .pro-pay-card-icon, .pro-ret-card-icon {
	margin-bottom: 0 !important;   /* altfel rămâne spațiul din șablonul vechi */
	width: 40px; height: 40px;     /* 44px lângă un titlu de 17px arăta dezechilibrat */
	background-size: 20px;
}
.pro-gar-card > h3, .pro-pay-card > h3, .pro-ret-card > h3 { margin: 0; }
/* tot ce urmează după titlu trece sub el, pe ambele coloane */
.pro-gar-card > *:not(.pro-gar-card-icon):not(h3),
.pro-pay-card > *:not(.pro-pay-card-icon):not(h3),
.pro-ret-card > *:not(.pro-ret-card-icon):not(h3) { grid-column: 1 / -1; }