/* =========================================================================
ILIES THEME — main.css (global)
1. Variabile (design tokens) 2. Reset 3. Bază/tipografie
4. Layout (container, grid) 5. Utilitare SPAȚIERE
6. Butoane 7. Primitive comune (media, stars, badge)
8. Header 9. Footer 10. Butoane flotante 11. Accesibilitate
Stilurile specifice paginii Home sunt în assets/css/pages/home.css
========================================================================= */
/* 1. VARIABILE ============================================================ */
:root {
/* Culori — din designul clinicii */
--accent: #009FF9;
--star: #F5A623;
--navy: #10202B; /* text + secțiuni închise */
--navy-2: #17364A;
--navy-3: #0C2434;
--footer: #0B161E;
--bg: #F3F7FA; /* fundal general */
--surface: #ffffff;
--surface-2: #F7FAFC;
--surface-blue: #EAF4FB;
--text: #10202B;
--muted: #55636D;
--muted-2: #6B7680;
--muted-3: #8A939B;
--line: rgba(16, 32, 43, .1);
--line-strong: rgba(16, 32, 43, .16);
/* Tipografie — Poppins self-hosted (vezi assets/css/fonts.css) */
--font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--font-heading: var(--font-body);
--hfont: var(--font-heading); /* alias folosit în markup */
/* SISTEMUL DE SPAȚII — o singură sursă de adevăr, spații egale pe tot site-ul.
Aliniat cu designul (clamp 56→88px), responsive automat. */
--space-section: clamp(3.5rem, 7vw, 5.5rem); /* 56px → 88px */
/* Spații mici (interior componente) */
--space-2xs: .25rem;
--space-xs: .5rem;
--space-sm: .75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
/* Layout */
--container: 1470px;
--gutter: 15px;
--radius: 16px;
--transition: .2s ease;
}
/* 2. RESET =============================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
min-height: 100vh;
margin: 0;
overflow-x: hidden;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: #fff; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
/* 3. BAZĂ / TIPOGRAFIE ================================================== */
h1 { font-weight: 500; font-size: clamp(2rem, 3.9vw, 3.25rem); line-height: 1.2; letter-spacing: -.025em; }
h2 { font-weight: 500; font-size: clamp(1.75rem, 3.4vw, 2.875rem); line-height: 1.2; letter-spacing: -.025em; }
h3 { font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
p { line-height: 1.62; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 4. LAYOUT ============================================================= */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* 5. UTILITARE DE SPAȚIERE (spații egale între blocuri) ================= */
.section { position: relative; }
.section-padding { padding-block: var(--space-section); }
.section-margin { margin-block: var(--space-section); }
.pt-section { padding-top: var(--space-section); }
.pb-section { padding-bottom: var(--space-section); }
/* Fundaluri de secțiune reutilizabile */
.bg-white { background: var(--surface); }
.bg-light { background: var(--bg); }
.bg-navy { background: var(--navy); color: #fff; }
/* Textură + gradient pentru secțiunile navy (din design) */
.navy-gradient::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(150deg, var(--navy-2), var(--navy) 55%, var(--navy-3));
}
.navy-gradient > * { position: relative; z-index: 1; }
/* 6. BUTOANE ============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 15px 26px; border-radius: calc(var(--radius) - 3px);
font-size: 15px; font-weight: 600; text-align: center; white-space: nowrap;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}
.btn svg { flex: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(8,18,26,.6); }
.btn--white { background: #fff; color: var(--navy); border: 1px solid var(--line-strong); }
.btn--white:hover { border-color: var(--accent); transform: translateY(-2px); }
.btn--ghost-light { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.32); }
.btn--ghost-light:hover { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.btn--whatsapp { background: #25D366; color: #fff; }
.btn--whatsapp:hover { background: #1fb856; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(37,211,102,.55); }
/* 7. PRIMITIVE COMUNE =================================================== */
/* Placeholder media (înainte de ACF: casetă cu etichetă; ACF va pune ![]()
) */
.media { position: relative; overflow: hidden; }
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.media--ph, .media--ph-dark {
display: flex; align-items: center; justify-content: center; text-align: center;
font-size: 13px; font-weight: 500; padding: 12px;
}
.media--ph { background: linear-gradient(150deg, #E4EBF1, #D9E3EB); color: #8A939B; }
.media--ph-dark { background: linear-gradient(150deg, var(--navy-2), var(--navy)); color: rgba(255,255,255,.6); }
/* Stele recenzii */
.stars { color: var(--star); font-size: 17px; letter-spacing: 1px; line-height: 1; }
/* Badge / eyebrow */
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
/* Carusel: săgeți circulare reutilizabile */
.nav-arrow {
width: 46px; height: 46px; border-radius: 50%; background: #fff;
border: 1px solid var(--line-strong); color: var(--navy);
display: inline-flex; align-items: center; justify-content: center;
transition: border-color var(--transition), background var(--transition);
}
.nav-arrow:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); }
.nav-arrow:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.nav-arrow--dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.nav-arrow--dark:hover { border-color: var(--accent); background: rgba(255,255,255,.16); }
/* 8. HEADER ============================================================= */
.site-header {
position: sticky; top: 0; z-index: 60;
background: rgba(243, 247, 250, .8);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(16, 32, 43, .08);
}
.site-header__inner {
max-width: var(--container); margin: 0 auto; padding: 15px var(--gutter);
display: flex; align-items: center; justify-content: space-between; gap: 14px 24px;
}
.brand__mark {
width: 36px; height: 36px; border-radius: 11px; background: var(--accent);
display: flex; align-items: center; justify-content: center;
color: #fff; font-family: var(--hfont); font-size: 20px; font-weight: 600;
box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
flex: none;
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
/* Logo din Personalizare temă (the_custom_logo() — clase native WP, nu ale temei). */
.custom-logo-link { display: flex; align-items: center; }
.custom-logo { height: 54px; width: auto; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 32px; font-size: 14.5px; font-weight: 500; }
/* wp_nav_menu() randează fără părinte (items_wrap le scoate mai jos) — reset-ul
global „ul, ol { list-style: none }" nu ajunge la ele, așa că trebuie resetate direct. */
.site-nav li { list-style: none; margin: 0; }
.site-nav a { color: #3B4750; white-space: nowrap; font-size: 15px; }
.site-nav a:hover, .site-nav .current-menu-item > a, .site-nav a[aria-current="page"] { color: var(--accent);}
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.header-phone svg { stroke: var(--accent); flex: none; }
.header-phone:hover { color: var(--navy); }
/* Hamburger (mobil) — buton rotunjit, cu fundal accent și 3 linii asimetrice (jos mai
scurtă) care se transformă lin într-un X alb când meniul e deschis. */
.nav-toggle {
display: none; width: 46px; height: 46px; position: relative; flex: none;
border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent);
transition: background .3s ease, transform .15s ease;
}
.nav-toggle:active { transform: scale(.92); }
/* Linia din mijloc dispare la deschidere — element separat, ca opacity:0 pe ea
să nu tragă după sine (via compositing) și liniile sus/jos, care devin X-ul. */
.nav-toggle span {
position: absolute; left: 50%; top: 50%; width: 20px; height: 2.5px;
background: var(--navy); border-radius: 2px; transform: translate(-50%, -50%);
transition: opacity .2s ease;
}
.nav-open .nav-toggle span { opacity: 0; }
/* Liniile sus/jos — pseudo-elemente ale butonului însuși (nu ale span-ului de mai sus),
ca să rămână independente de fade-ul lui și să se rotească lin într-un X. */
.nav-toggle::before, .nav-toggle::after {
content: ""; position: absolute; left: 13px; width: 20px; height: 2.5px; border-radius: 2px; background: var(--navy);
transition: transform .32s cubic-bezier(.5,-.4,.5,1.4), top .32s cubic-bezier(.5,-.4,.5,1.4), width .25s ease, background .2s ease;
}
.nav-toggle::before { top: 15px; }
.nav-toggle::after { top: 31px; width: 12px; }
.nav-open .nav-toggle { background: var(--navy); }
.nav-open .nav-toggle::before { top: 50%; transform: translateY(-50%) rotate(45deg); background: #fff; }
.nav-open .nav-toggle::after { top: 50%; width: 20px; transform: translateY(-50%) rotate(-45deg); background: #fff; }
/* Buton „Programează-te” în interiorul meniului mobil — dublură a celui din
.header-actions, vizibilă doar sub 1024px, direct în panoul dropdown. */
.site-nav .site-nav__cta, .site-nav .site-nav__cta:hover { color: #fff; }
.site-nav__cta { display: none; }
@media (max-width: 1024px) {
.nav-toggle { display: block; order: 3; }
.header-actions .btn { display: none; }
.site-nav {
position: absolute; left: 0; right: 0; top: 100%;
flex-direction: column; align-items: flex-start; gap: 0;
background: var(--bg); border-bottom: 1px solid var(--line);
border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
box-shadow: 0 28px 44px -30px rgba(8,18,26,.35);
padding: 8px var(--gutter) 16px;
max-height: 0; overflow: hidden; visibility: hidden;
transition: max-height .3s ease, visibility .3s;
}
.nav-open .site-nav { max-height: 80vh; overflow: auto; visibility: visible; }
.site-nav > * {
opacity: 0; transform: translateY(-8px);
transition: opacity .3s ease, transform .3s ease;
}
.nav-open .site-nav > * { opacity: 1; transform: none; }
.site-nav > *:nth-child(1) { transition-delay: .05s; }
.site-nav > *:nth-child(2) { transition-delay: .1s; }
.site-nav > *:nth-child(3) { transition-delay: .15s; }
.site-nav > *:nth-child(4) { transition-delay: .2s; }
.site-nav > *:nth-child(5) { transition-delay: .25s; }
.site-nav > *:nth-child(6) { transition-delay: .3s; }
.site-nav > *:nth-child(7) { transition-delay: .35s; }
.site-nav > *:nth-child(8) { transition-delay: .4s; }
.site-nav a { display: block; width: 100%; padding: 12px 0; }
.site-nav__cta { display: flex; width: 100%; margin-top: 10px; }
}
@media (max-width: 560px) {
/* Telefonul rămâne accesibil prin butonul flotant „Sună acum”. */
.header-phone { display: none; }
}
/* 9. FOOTER ============================================================= */
.site-footer { position: relative; z-index: 2; background: var(--footer); color: #fff; border-top: 1px solid rgba(255,255,255,.09); }
.site-footer__grid {
max-width: var(--container); margin: 0 auto;
padding: 64px var(--gutter) 40px;
display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.3fr; gap: 40px 72px;
}
.footer-about p { font-size: 13.5px; line-height: 1.66; color: rgba(255,255,255,.6); margin: 0 0 18px; max-width: 46ch; }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.footer-brand__logo { height: 50px; width: auto; object-fit: contain; }
.footer-socials { display: flex; align-items: center; gap: 10px; }
.footer-socials a {
width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,.06);
display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8);
transition: background var(--transition);
}
.footer-socials svg {width: 26px}
.footer-socials a:hover { background: rgba(255,255,255,.14); color: #fff; }
.footer-col__title { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
/* wp_nav_menu() randează - fără
părinte (vezi .site-nav li) — reset direct. */
.footer-links li { list-style: none; margin: 0; }
.footer-links a { color: rgba(255,255,255,.72); }
.footer-links a:hover { color: #fff; }
.footer-contact { display: flex; flex-direction: column; gap: 13px; font-size: 14.5px; color: rgba(255,255,255,.72); }
.footer-contact a, .footer-contact div { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.72); }
.footer-contact a:hover { color: #fff; }
.footer-contact svg { stroke: color-mix(in srgb, var(--accent) 55%, #fff); flex: none; margin-top: 1px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }
.footer-bottom__inner {
max-width: var(--container); margin: 0 auto; padding: 22px var(--gutter);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
font-size: 13px; color: rgba(255,255,255,.45);
}
.footer-bottom__links { display: flex; gap: 22px; }
/* wp_nav_menu() randează - fără
părinte (vezi .site-nav li) — reset direct. */
.footer-bottom__links li { list-style: none; margin: 0; }
.footer-bottom__links a { color: rgba(255,255,255,.5); }
.footer-bottom__links a:hover { color: #fff; }
.footer-badges { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.09); }
.footer-badges img { height: 28px; width: auto; border-radius: 6px; transition: opacity var(--transition); }
.footer-badges a:hover img { opacity: .85; }
.all_services a{text-decoration: underline; color: #009ff9}
@media (max-width: 900px) {
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
}
@media (max-width: 560px) {
.site-footer__grid { grid-template-columns: 1fr; }
}
/* 10. BUTOANE FLOTANTE ==================================================== */
/* Widget de contact — bară centrată jos, cu 2 butoane cu text, identică pe
toate dimensiunile de ecran (nu mai există variantă „cerc" doar pt. desktop). */
.floating-cta {
position: fixed; left: 50%; bottom: 15px; z-index: 120;
transform: translateX(-50%);
width: calc(100% - 30px); max-width: 420px;
display: flex; flex-direction: row; justify-content: center; gap: 10px;
}
.floating-cta a {
display: flex; align-items: center; justify-content: center;
flex: 1 1 0; min-width: 0; height: auto; border-radius: 14px; color: #fff;
gap: 8px; padding: 12px 20px; font-size: 14.5px; font-weight: 600;
transition: transform var(--transition), box-shadow var(--transition);
}
.floating-cta a:hover { color: #fff; transform: translateY(-3px); }
.floating-cta__call { background: var(--accent); box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.floating-cta__wa { background: #25D366; box-shadow: 0 14px 30px -10px rgba(37,211,102,.6); }
.floating-cta svg { flex: none; }
.floating-cta__label { display: inline; }
/* 11. FORMULARE (Contact Form 7 — .wpcf7-form, folosit în .cta-form / .contact-formwrap / .svc1-formcard / modal).
Markup-ul (.d-flex > .input_name/.input_phone/.acceptance/.submit_button) vine din câmpul „Form” al
formularelor CF7 (plugin Country/Phone Field pt. telefon) — layout-ul de mai jos i se potrivește. */
.wpcf7-form p { margin: 0; }
.wpcf7-form .d-flex { display: flex; flex-wrap: wrap; gap: 12px; max-width: 780px; margin: 0 auto; text-align: left; }
.wpcf7-form .d-flex > .input_name,
.wpcf7-form .d-flex > .input_phone { flex: 1 1 220px; min-width: 0; }
.wpcf7-form .d-flex > .acceptance { flex: 1 1 100%; }
.wpcf7-form .d-flex > .submit_button { flex: 1 1 100%; display: flex; justify-content: center; margin-top: 4px; text-align: center; }
.wpcf7-form .acceptance p { margin: 0; font-size: 12.5px; line-height: 1.5; opacity: .7; text-align: center; }
.wpcf7-form input.wpcf7-form-control:not(.wpcf7-submit) { width: 100%; padding: 13px 15px; background: #fff; color: var(--navy); border: 1px solid rgba(16,32,43,.14); border-radius: calc(var(--radius) - 6px); font-size: 15px; outline: none; transition: border-color var(--transition); }
.wpcf7-form input.wpcf7-form-control:not(.wpcf7-submit):focus { border-color: var(--accent); }
/* Fundal colorat (.cta-form gradient, .svc1-formcard navy) — input plutitor, fără bordură, cu umbră. */
.cta-form .wpcf7-form input.wpcf7-form-control:not(.wpcf7-submit),
.svc1-formcard .wpcf7-form input.wpcf7-form-control:not(.wpcf7-submit) { border: none; box-shadow: 0 14px 30px -18px rgba(8,18,26,.5); padding: 16px 18px; }
/* Câmpul de telefon (plugin Country/Phone Field) își desenează propriul selector de țară peste input — păstrăm loc pentru el. */
.wpcf7-phonetext.wpcf7-form-control { padding-right: 42px !important; }
.wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; background: var(--navy); color: #fff; border: none; border-radius: calc(var(--radius) - 4px); font-size: 15px; font-weight: 600; cursor: pointer; transition: background var(--transition), transform var(--transition); white-space: nowrap; width: 100%; }
.wpcf7-submit:hover { background: color-mix(in srgb, var(--navy) 85%, #000); transform: translateY(-1px); }
/* Fundal navy (.svc1-formcard) — buton navy s-ar pierde pe fundal navy. */
.svc1-formcard .wpcf7-submit { background: var(--accent); }
.svc1-formcard .wpcf7-submit:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
/* Popup „Solicită Informații" — butonul de trimitere pe toată lățimea. */
#modal-contact .wpcf7-submit { width: 100%; }
.wpcf7-not-valid-tip { display: inline-block; margin-top: 6px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; color: #b3261e; background: #fbe9e7; border-radius: 999px; }
.wpcf7-response-output { margin: 1.4em auto 0 !important; max-width: 780px; padding: 10px 16px; border-radius: calc(var(--radius) - 6px); font-size: 13.5px; font-weight: 600; text-align: center; }
.wpcf7-form.sent .wpcf7-response-output { color: #0f7a4e; background: #e3f6ec; border-color: #0f7a4e !important; }
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output { color: #b3261e; background: #fbe9e7; border-color: #b3261e !important; }
.contact-form__note { font-size: 12px; color: var(--muted-3); text-align: center; line-height: 1.5; }
/* 12. MODAL „Solicită Informații" ====================================== */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__overlay { position: absolute; inset: 0; background: rgba(8,18,26,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; }
.modal__dialog {
position: relative; width: 100%; max-width: 780px; background: #fff;
border-radius: calc(var(--radius) + 6px); padding: clamp(26px, 4vw, 40px);
box-shadow: 0 40px 90px -30px rgba(8,18,26,.6);
transform: translateY(14px) scale(.98); opacity: 0;
transition: transform .25s ease, opacity .25s ease;
max-height: calc(100vh - 40px); overflow-y: auto;
}
.modal__dialog h2, .modal__lead {text-align: center;}
.modal.is-open .modal__overlay { opacity: 1; }
.submit_button {position:relative}
.submit_button,.submit_button p {width: 100%;}
.wpcf7-spinner {position: absolute; left: 15px; top: 12px;}
.modal.is-open .modal__dialog { transform: none; opacity: 1; }
.modal__close {
position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; color: var(--muted);
transition: background var(--transition), color var(--transition);
}
.modal__close:hover { background: var(--surface-2); color: var(--navy); }
.modal__title { font-size: clamp(1.5rem, 3vw, 1.85rem); }
.modal__lead { color: var(--muted); font-size: 14.5px; margin: 10px 0 22px; }
body.modal-lock { overflow: hidden; }
/* Variantă modal video (YouTube în popup) */
.modal--video .modal__dialog { max-width: 900px; padding: 0; background: #000; overflow: hidden; }
.modal--video .modal__close { top: 10px; right: 10px; color: #fff; background: rgba(0,0,0,.5); z-index: 2; }
.modal--video .modal__close:hover { background: rgba(0,0,0,.75); color: #fff; }
.video-modal__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 12b. POARTĂ DE ACCES „Incoming Leads" (templates/incomings.php, vezi inc/leads-guard.php) */
.leads-gate { max-width: 380px; margin: 0 auto; padding-block: clamp(32px,5vw,56px); }
.leads-gate__lead { font-size: 14.5px; line-height: 1.6; color: var(--muted); text-align: center; margin: 0 0 24px; }
.leads-gate__form { display: flex; flex-direction: column; gap: 14px; }
.leads-gate__label { display: block; font-size: 13px; font-weight: 600; color: #3B4750; }
.leads-gate__input { width: 100%; padding: 13px 15px; background: #fff; border: 1px solid rgba(16,32,43,.14); border-radius: calc(var(--radius) - 6px); font-size: 15px; outline: none; transition: border-color var(--transition); }
.leads-gate__input:focus { border-color: var(--accent); }
.leads-gate__error { font-size: 12.5px; font-weight: 600; color: #b3261e; background: #fbe9e7; padding: 8px 12px; border-radius: calc(var(--radius) - 8px); }
.leads-gate__submit { width: 100%; justify-content: center; }
/* 13. SECȚIUNI REUTILIZABILE (folosite pe mai multe pagini) ============ */
/* --- Bento (Home „Beneficii" + Servicii „Avantaje") --- */
.bento-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 175px; gap: 14px; }
.bene { position: relative; border-radius: var(--radius); overflow: hidden; }
.bene--2x2 { grid-column: span 2; grid-row: span 2; }
.bene--1x2 { grid-row: span 2; }
.bene.media { border: 1px solid rgba(16,32,43,.08); }
.bene__overlay { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent, rgba(8,18,26,.82)); padding: 60px 24px 22px; color: #fff; pointer-events: none; }
.bene__overlay strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.bene__overlay span { display: block; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.78); margin-top: 4px; max-width: 52ch; }
.bene--card { padding: 26px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.bene--dark { background: var(--navy); color: #fff; }
.bene--accent { background: var(--accent); color: #fff; }
.bene__icon { width: 48px; height: 48px; border-radius: 13px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex: none; }
.bene--dark .bene__icon { color: color-mix(in srgb, var(--accent) 65%, #fff); }
.bene--card strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.bene--card p { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.75); }
.bene--accent p { color: rgba(255,255,255,.9); }
.bene__grain { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px); pointer-events: none; }
@media (max-width: 860px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; } .bene--2x2, .bene--1x2 { grid-column: auto; grid-row: auto; } }
/* --- Variantă „Avantajele clinicii" (Servicii) — 2 rânduri a câte 2 + 1 rând cu
câte 3, fără iconițe. Toate cardurile identice ca structură (text jos, aliniat
stânga) — diferă doar lățimea. Grid pe 6 coloane: 3/6 = 2 pe rând, 2/6 = 3 pe rând. --- */
.bento-grid--223 { grid-template-columns: repeat(6, minmax(0,1fr)); grid-auto-rows: auto; }
.bento-grid--223 .bene--half { grid-column: span 3; min-height: 400px; }
.bento-grid--223 .bene--third { grid-column: span 2; min-height: 360px; }
.bento-grid--223 .bene--card { justify-content: flex-end; }
/* .media--ph/.media--ph-dark (fundal placeholder, fără fotografie reală) setează
text-align:center pentru eticheta lor — se moștenește nedorit în .bene__overlay. */
.bento-grid--223 .bene__overlay { text-align: left; }
/* Text mai mare (h3/p, nu strong/span) + gradient mai pronunțat, ca titlul/descrierea
să rămână lizibile peste o fotografie reală, nu doar peste fundalul placeholder. */
.bento-grid--223 .bene__overlay,
.bento-grid--223 .bene--card > div { display: flex; flex-direction: column; gap: 8px; }
.bento-grid--223 .bene__overlay h3,
.bento-grid--223 .bene--card h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.bento-grid--223 .bene__overlay p,
.bento-grid--223 .bene--card p { font-size: 15.5px; line-height: 1.6; margin: 0; }
.bento-grid--223 .bene__overlay {
padding: 100px 24px 24px;
background: linear-gradient(180deg, transparent, rgba(6,14,20,.55) 45%, rgba(6,14,20,.94));
}
@media (max-width: 860px) {
.bento-grid--223 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.bento-grid--223 .bene--half, .bento-grid--223 .bene--third { grid-column: span 1; }
}
@media (min-width: 641px) and (max-width: 1023px) {
.bento-grid--223 .bene:first-child { grid-column: 1 / -1; }
}
/* Peste 860px grid-ul rămâne pe 6 coloane (regula de mai sus nu se aplică) —
fără asta, un card „third" (2/6) ar împărți rândul cu un „half" (3/6) și ar
rămâne spațiu gol. Egalizăm lățimile în acest interval, 2 carduri pe rând. */
@media (min-width: 861px) and (max-width: 1023px) {
.bento-grid--223 .bene--third { grid-column: span 3; }
}
@media (max-width: 560px) {
.bento-grid--223 { grid-template-columns: 1fr; }
.bento-grid--223 .bene--half, .bento-grid--223 .bene--third { grid-column: span 1; }
}
/* Fără fotografie reală, ilies_media_inner() scrie titlul ca text simplu, centrat —
se suprapune peste titlul din .bene__overlay. Îl facem invizibil (font-size:0);
.bene__overlay strong/span au deja dimensiune proprie, deci rămân neafectate. */
.bento-grid--223 .bene { font-size: 0; }
/* --- Secțiune Contact (component: template-parts/sections/contact.php) --- */
.contact-section { scroll-margin-top: 80px; }
.contact-section__head { text-align: center; max-width: 1024px; margin: 0 auto 40px; }
.contact-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.contact-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 22px; display: flex; align-items: center; gap: 14px; }
a.contact-card { transition: border-color var(--transition); }
a.contact-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, #fff); }
.contact-card__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--accent) 55%, #fff); flex: none; }
.contact-card__label { font-size: 12.5px; color: rgba(255,255,255,.5); }
.contact-card__value { font-size: 14.5px; font-weight: 600; color: #fff; }
.contact-main { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 14px; align-items: stretch; }
.contact-formwrap { display: flex; background: #fff; color: var(--navy); border: 1px solid rgba(255,255,255,.14); border-radius: calc(var(--radius) + 8px); box-shadow: 0 24px 50px -28px rgba(0,0,0,.5); }
.contact-formwrap__inner { width: 100%; align-self: center; padding: clamp(24px,2.8vw,38px); }
.contact-formwrap__lead { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.4; margin: 0 0 30px; text-align:center;}
/* Cardul e mai îngust (împarte rândul cu harta) — Nume/Telefon stau fiecare pe rândul lui, nu 50/50. */
.contact-formwrap .wpcf7-form .d-flex > .input_name,
.contact-formwrap .wpcf7-form .d-flex > .input_phone { flex: 1 1 100%; }
.contact-map { position: relative; border-radius: calc(var(--radius) + 8px); overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 50px -28px rgba(0,0,0,.5); min-height: 380px; }
.contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.2); }
@media (max-width: 1100px) { .contact-cards { grid-template-columns: 1fr 1fr; } .contact-main { grid-template-columns: 1fr; } .contact-map { min-height: 320px; } }
@media (max-width: 560px) { .contact-cards { grid-template-columns: 1fr; } }
/* --- Grilă carduri servicii (Servicii + Home „Tratamente complete") --- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 22px; }
.svc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s, border-color .25s; }
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -22px rgba(16,32,43,.3); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.svc-card__media { position: relative; aspect-ratio: 16/10; }
.svc-card__num { position: absolute; top: 12px; left: 12px; font-family: var(--hfont); font-size: 13px; font-weight: 600; color: #fff; background: rgba(16,32,43,.55); padding: 5px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
.svc-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc-card__title { font-size: 18.5px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.svc-card__desc { font-size: 14px; line-height: 1.6; color: var(--muted-2); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.svc-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--accent); transition: gap .2s; }
.svc-card:hover .svc-card__link { gap: 12px; }
/* --- Blog (pagina Blog + single.php) — reutilizează .svc-grid/.svc-card --- */
.blog-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card__date { font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted-3); }
.blog-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.blog-pagination .page-numbers {
display: flex; align-items: center; justify-content: center;
min-width: 42px; height: 42px; padding: 0 10px;
border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px);
font-size: 14.5px; font-weight: 600; color: var(--navy);
transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.blog-pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.blog-pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.blog-pagination .page-numbers.dots { border-color: transparent; color: var(--muted-3); }
/* --- Meta articol (single.php) — dată + categorie, sub titlul din hero --- */
.blog-meta { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.6); margin: 0 0 18px; }
.blog-meta__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: none; }
/* Buton centrat sub o secțiune (reutilizabil) */
.center-cta { display: flex; justify-content: center; margin-top: 40px; }
/* --- Titluri de secțiune (reutilizabile) --- */
.home-heading-center { text-align: center; max-width: 1024px; margin-inline: auto; margin-bottom: 36px; }
.home-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.home-heading-row h2 { max-width: 680px; }
.home-heading-center p {margin-top: 15px;}
/* --- Carusel + dots (Diplome, Echipa, Media) --- */
.carousel { overflow: hidden; }
.carousel__track { display: flex; transition: transform .55s cubic-bezier(.16,.8,.24,1); }
.dots { display: flex; align-items: center; gap: 9px; }
.dots button { width: 9px; height: 8px; border-radius: 999px; background: rgba(16,32,43,.2); transition: width .35s ease, background .35s ease; padding: 0; }
.dots button[aria-current="true"] { width: 30px; background: var(--accent); }
/* --- Componentă Diplome (carusel certificate) --- */
.home-certs__track { gap: 16px; }
.home-certs__item { position: relative; flex: 0 0 calc((100% - 48px) / 3.2); aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
/* --- Componentă Recenzii --- */
.home-reviews__badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--muted); }
.home-reviews__badge strong { color: var(--navy); font-weight: 600; }
.home-reviews__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1.4fr); gap: clamp(20px,3vw,32px); align-items: stretch; }
.review-feature { background: var(--surface-blue); border-radius: calc(var(--radius) + 4px); padding: clamp(28px,3vw,44px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.review-feature__quote { font-family: Georgia, serif; font-size: 72px; line-height: .6; color: var(--accent); margin-bottom: 18px; }
.review-feature__text { font-family: var(--hfont); font-size: clamp(19px,1.6vw,24px); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--navy); }
.review-feature__author { display: flex; align-items: center; gap: 14px; }
.review-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; flex: none; }
.review-feature__name { font-size: 15.5px; font-weight: 600; color: var(--navy); }
.review-feature__src { font-size: 13px; color: var(--muted); }
/* Slide-urile se suprapun în aceeași celulă de grid → înălțime stabilă, fără salt. */
.review-slides { display: grid; overflow: hidden; }
.review-slide { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; align-content: start; opacity: 0; visibility: hidden; transition: opacity .5s ease; }
.review-slide.is-active { opacity: 1; visibility: visible; }
.review-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s; }
.review-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(16,32,43,.28); }
.review-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-card__person { display: flex; align-items: center; gap: 12px; }
.review-card__avatar { width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; flex: none; }
.review-card__name { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.review-card__src { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-3); background: var(--bg); padding: 4px 8px; border-radius: 999px; flex: none; }
.review-card__text { font-size: 14px; line-height: 1.6; color: var(--muted); height: 94px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.review-card__text::-webkit-scrollbar { width: 6px; }
.review-card__text::-webkit-scrollbar-track { background: transparent; }
.review-card__text::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.page-template-template-testimoniale .review-card {background-color: white;}
/* --- Recenzii: varianta GRID (3×2 per pagină, slider cu dots) --- */
.home-reviews__scoreline { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--muted); margin-top: 15px; }
.home-reviews__scoreline .stars { color: var(--star); font-size: 18px; letter-spacing: 1px; }
.review-grid { position: relative; }
.review-gtrack { display: grid; overflow: hidden; }
.review-gslide { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-content: start; opacity: 0; visibility: hidden; transition: opacity .5s ease; }
.review-gslide.is-active { opacity: 1; visibility: visible; }
.review-dots { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 32px; }
.review-dot { width: 9px; height: 8px; border-radius: 999px; background: rgba(16,32,43,.2); border: none; padding: 0; cursor: pointer; transition: width .35s ease, background .35s ease; }
.review-dot.is-active { width: 30px; background: var(--accent); }
@media (max-width: 900px) { .review-gslide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .review-gslide { grid-template-columns: 1fr; } }
/* --- Componentă Echipa --- */
.home-team { scroll-margin-top: 80px; }
.home-team__track { gap: 22px; }
.team-card { flex: 0 0 calc((100% - 66px) / 4); background: #fff; border: 1px solid rgba(16,32,43,.09); border-radius: var(--radius); overflow: hidden; transition: transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s; }
.team-card:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -24px rgba(16,32,43,.34); }
.team-card__media { position: relative; height: 410px; }
.team-card__tag { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.88); color: var(--accent); padding: 5px 10px; border-radius: 999px; pointer-events: none; }
.team-card__body { padding: 18px 20px 22px; }
.team-card__name { font-size: 17.5px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.team-card__role { font-size: 13.5px; color: var(--accent); font-weight: 500; margin-top: 3px; }
.home-team__nav { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 32px; }
.home #avantaje .section-padding {padding-top: 0;}
@media (max-width: 1100px) { .home-reviews__grid { grid-template-columns: 1fr; } .home-certs__item { flex-basis: calc((100% - 32px) / 3); } .team-card { flex-basis: calc((100% - 44px) / 3); } }
@media (max-width: 860px) { .home-certs__item { flex-basis: calc((100% - 16px) / 2); } .team-card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 560px) { .home-certs__item { flex-basis: 100%; } .team-card { flex-basis: 100%; } }
/* --- Bifă / liste (folosite de Proteză vs Fixă + puncte pe Home) --- */
.list-check, .list-x { display: flex; flex-direction: column; gap: 13px; }
.tick { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.tick--soft { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.tick--x { background: #FBE4E0; color: #C0503F; }
/* --- Componentă Proteză vs Fixă --- */
.home-vs em { font-style: italic; color: var(--accent); }
.home-vs__card { position: relative; border-radius: calc(var(--radius) + 8px); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -34px rgba(16,32,43,.4); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
.vs-side { padding: clamp(28px,3.5vw,44px); }
.vs-side--cons { background: var(--surface-2); }
.vs-side--pros { background: var(--navy); color: #fff; }
.vs-side__media { position: relative; aspect-ratio: 16/8; border-radius: calc(var(--radius) - 4px); overflow: hidden; border: 1px solid var(--line); margin-bottom: 24px; }
.vs-side--pros .vs-side__media { border-color: rgba(255,255,255,.14); }
.vs-side__title { font-family: var(--hfont); font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 20px; }
.vs-side--pros .vs-side__title { color: #fff; }
.vs-row { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; }
.vs-side--cons .vs-row { color: var(--muted); }
.vs-side--pros .vs-row { color: rgba(255,255,255,.86); }
.vs-row .tick { width: 24px; height: 24px; margin-top: 1px; }
.home-vs__badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 26px -8px rgba(16,32,43,.4); display: flex; align-items: center; justify-content: center; font-family: var(--hfont); font-size: 16px; font-weight: 700; color: var(--accent); pointer-events: none; }
/* 14. ACCESIBILITATE =================================================== */
.screen-reader-text {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--accent); color: #fff; padding: var(--space-sm) var(--space-md); }
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); color: #fff; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* =========================================================================
15. PAGINA HOME
========================================================================= */
/* NB: utilitarele partajate (.home-heading-*, .tick*, .list-*, .carousel, .dots,
componentele recenzii/diplome/echipa/proteza-vs-fixa) sunt în main.css. */
/* ============ 1. HERO ============ */
.home-hero { overflow: hidden; background: var(--navy); }
.home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.home-hero__overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(120deg, rgba(8,18,26,.9), rgba(16,32,43,.72) 45%, rgba(23,54,74,.6)); }
.home-hero__bg { position: absolute; inset: 0; background: linear-gradient(120deg, #0C2434, #10202B 45%, #17364A); background-size: 180% 180%; animation: drift 22s ease-in-out infinite; }
.home-hero__grain { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px); }
@keyframes drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.home-hero__inner { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(32px,4vw,64px); align-items: center; padding-top: clamp(48px,6vw,80px); }
.home-hero__copy { padding-bottom: clamp(48px,6vw,80px); }
.home-hero__copy h1 { color: #fff; margin-bottom: 22px; }
.home-hero__copy h1 em { font-style: italic; color: color-mix(in srgb, var(--accent) 62%, #fff); }
.home-hero__lead { font-size: 17px; line-height: 1.64; color: rgba(255,255,255,.78); max-width: 52ch; margin-bottom: 32px; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.home-hero__rating { display: flex; align-items: center; gap: 14px; }
.home-hero__rating span:last-child { font-size: 14px; color: rgba(255,255,255,.72); }
.home-hero__media { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 14px; padding-bottom: clamp(32px,4vw,56px); }
.home-hero__media .media { border-radius: calc(var(--radius) + 6px); border: 1px solid rgba(255,255,255,.14); }
.home-hero__media .media:first-child { grid-column: 1 / -1; min-height: 320px; box-shadow: 0 40px 80px -34px rgba(0,0,0,.65); }
.home-hero__media .media:not(:first-child) { aspect-ratio: 16/10; border-radius: var(--radius); }
/* Bandă acreditări */
.home-accred { position: relative; z-index: 3; border-top: 1px solid rgba(255,255,255,.12); }
.home-accred__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; padding-block: 26px; }
.home-accred__item { display: flex; align-items: center; gap: 14px; }
.home-accred__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--accent) 60%, #fff); }
.home-accred__name { font-size: 14.5px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.home-accred__desc { font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 2px; }
/* ============ 2. ABORDARE ============ */
.home-approach .container { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); gap: clamp(40px,5vw,80px); align-items: start; }
.home-approach__aside { position: sticky; top: 96px; }
.home-approach__aside h2 { margin-bottom: 28px; }
.home-approach__row { display: grid; grid-template-columns: 88px 1fr; gap: 22px; padding: 30px 8px; border-top: 1px solid var(--line); transition: background .25s; }
.home-approach__row:hover { background: var(--surface-2); }
.home-approach__rows > .home-approach__row:last-of-type { border-bottom: 1px solid var(--line); }
.home-approach__n { font-family: var(--hfont); font-size: 44px; font-weight: 600; line-height: 1; color: color-mix(in srgb, var(--accent) 24%, #fff); letter-spacing: -.02em; }
.home-approach__title { font-size: 19px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; margin-bottom: 8px; }
.home-approach__text { font-size: 15px; line-height: 1.62; color: var(--muted); max-width: 62ch; }
/* ============ 3. TESTIMONIALE VIDEO ============ */
.home-vtest { scroll-margin-top: 80px; }
.home-vtest__grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows: 1fr 1fr; gap: 16px; }
.video-card { position: relative; border-radius: var(--radius); overflow: hidden; background: linear-gradient(150deg, #17364A, #10202B); box-shadow: 0 18px 40px -22px rgba(16,32,43,.4); }
.video-card__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.home-vtest__feature { grid-row: 1 / 3; border-radius: calc(var(--radius) + 4px); min-height: 420px; }
.home-vtest__small { min-height: 200px; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; }
.video-play:hover { background: rgba(0,0,0,.12); }
.video-play__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,18,26,.05), rgba(8,18,26,.6)); }
.video-play__btn { position: relative; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -8px rgba(0,0,0,.55); transition: transform var(--transition); }
.video-play:hover .video-play__btn { transform: scale(1.08); }
.video-play__btn svg { fill: var(--accent); }
.home-vtest__small .video-play__btn { width: 52px; height: 52px; }
.video-play__meta { position: absolute; left: 0; right: 0; bottom: 20px; padding: 0 16px; text-align: center; }
.video-play__eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 65%, #fff); margin-bottom: 6px; }
.video-play__name { display: block; font-size: 20px; font-weight: 600; color: #fff; }
.video-play__role { display: block; font-size: 14px; color: rgba(255,255,255,.75); margin-top: 2px; }
.home-vtest__small .video-play__meta { bottom: 12px; }
.home-vtest__small .video-play__name { font-size: 14px; }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ============ 4. CAZURI CLINICE — BENTO ============ */
.home-cases { scroll-margin-top: 80px; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 220px; gap: 14px; }
.bento .media { border-radius: var(--radius); border: 1px solid rgba(16,32,43,.08); }
.bento__2x2 { grid-column: span 2; grid-row: span 2; }
.bento__2w { grid-column: span 2; }
.bento__2h { grid-row: span 2; }
/* ============ 5. ÎNAINTE / DUPĂ ============ */
.home-ba { overflow: hidden; }
.home-ba__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; }
.home-ba__case { display: flex; flex-direction: column; gap: 14px; }
.ba-card { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 40px -28px rgba(0,0,0,.2); background: #fff; }
.ba-card__slot { position: relative; aspect-ratio: 16/9; }
.ba-card__divider { height: 3px; background: #fff; border-top: 1px solid rgba(16,32,43,.14); border-bottom: 1px solid rgba(16,32,43,.14); }
.ba-tag { position: absolute; left: 14px; bottom: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 7px; pointer-events: none; min-width: 80px; text-align: center; }
.ba-tag--before { color: rgba(255,255,255,.92); background: rgba(16,32,43,.45); }
.ba-tag--after { color: white; background: var(--accent); }
.home-ba__desc { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.68); text-align: center; }
/* Variantă descriere pt. fundal deschis (Cazuri Clinice, Dantură Fixă) — home-ba__desc e pt. fundal navy. */
.ba-desc { font-size: 14px; line-height: 1.4; color: var(--muted); text-align: center; margin: 0; }
/* ============ 6. CTA FORM GRADIENT ============ */
.home-cta-form { scroll-margin-top: 80px; }
.cta-form { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 12px); padding: clamp(40px,5.5vw,72px) clamp(20px,5vw,72px); background: linear-gradient(115deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #10202B)); box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--accent) 60%, transparent); }
.cta-form--has-img { background: var(--navy); }
.cta-form__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta-form__overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 88%, transparent), color-mix(in srgb, var(--accent) 60%, #10202B));opacity:0.9 }
.cta-form__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.cta-form__blob--a { top: -120px; right: -100px; width: 340px; height: 340px; background: rgba(255,255,255,.09); }
.cta-form__blob--b { bottom: -140px; left: -110px; width: 380px; height: 380px; background: rgba(255,255,255,.07); }
.cta-form__grain { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 24px); pointer-events: none; }
.cta-form__inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; text-align: center; color: #fff; }
.cta-form__inner h2 { color: #fff; font-weight: 600; margin-bottom: 14px; }
.cta-form__lead { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0 auto 34px; }
/* ============ 7. BINE AȚI VENIT ============ */
.home-welcome .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: clamp(40px,5vw,80px); align-items: center; }
.home-welcome__visual { position: relative; padding: 0 40px 48px 0; }
.home-welcome__main { position: relative; height: 630px; border-radius: calc(var(--radius) + 6px); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(16,32,43,.5); }
.home-welcome__inset { position: absolute; right: 0; bottom: 0; width: 36%; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; border: 6px solid #fff; box-shadow: 0 24px 50px -24px rgba(16,32,43,.5); }
.home-welcome__badge { position: absolute; left: -14px; top: -14px; width: 108px; height: 108px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.home-welcome__badge strong { font-family: var(--hfont); font-size: 30px; font-weight: 600; line-height: 1; }
.home-welcome__badge span { font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: .9; margin-top: 2px; }
.home-welcome__text h2 { margin-bottom: 22px; }
.home-welcome__paras { display: flex; flex-direction: column; gap: 15px; font-size: 16px; line-height: 1.66; color: var(--muted); margin-bottom: 28px; }
.home-welcome__points { display: flex; flex-direction: column; gap: 13px; }
.home-welcome__point { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--navy); }
.home-welcome__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.home-welcome__point .tick { width: 24px; height: 24px; }
/* Secțiunile 8 Diplome și 9 Recenzii sunt COMPONENTE (template-parts/sections/).
Stilurile lor + .carousel + .dots sunt în main.css (reutilizabile pe alte pagini). */
/* ============ 10. SERVICII ============ */
.home-services { scroll-margin-top: 80px; }
.dantura-panel { position: relative; overflow: hidden; background: var(--navy); color: #fff; border-radius: calc(var(--radius) + 8px); padding: clamp(28px,4vw,52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 44px; align-items: center; scroll-margin-top: 90px; margin-bottom: 56px; }
.dantura-panel__eyebrow { color: color-mix(in srgb, var(--accent) 65%, #fff); background: rgba(255,255,255,.08); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 7px 13px; margin-bottom: 20px; }
.dantura-panel h3 { font-size: clamp(32px,4vw,50px); line-height: 1.2; letter-spacing: -.025em; color: #fff; margin-bottom: 30px; }
.dantura-panel__lead { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.78); margin-bottom: 24px; }
.dantura-panel__points { display: flex; flex-direction: column; gap: 13px; margin-bottom: 30px; }
.dantura-panel__point { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255,255,255,.85); }
.dantura-panel__ba { border-radius: calc(var(--radius) + 2px); overflow: hidden; box-shadow: 0 24px 50px -20px rgba(0,0,0,.5); background: #fff; }
.dantura-panel__ba .ba-card__slot { height: 280px; aspect-ratio: auto; }
/* Grila de servicii de sub panou folosește .svc-grid / .svc-card din main.css. */
/* ============ 11. DE CE SĂ NE ALEGEȚI ============ */
.home-why .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: clamp(40px,5vw,80px); align-items: stretch; }
.home-why__photo { position: relative; min-height: 480px; border-radius: calc(var(--radius) + 6px); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(16,32,43,.5); }
.home-why__caption { position: absolute; left: 18px; bottom: 18px; right: 18px; background: rgba(16,32,43,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: calc(var(--radius) - 4px); padding: 16px 20px; color: #fff; pointer-events: none; text-align: center; }
.home-why__caption strong { display: block; font-size: 14.5px; font-weight: 600; }
.home-why__caption span { display: block; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 2px; }
.home-why__text { display: flex; flex-direction: column; justify-content: center; }
.home-why__text h2 { margin-bottom: 12px; }
.why-item { display: flex; align-items: flex-start; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.why-item__icon { flex: none; width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.why-item__title { font-size: 16.5px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; margin-bottom: 5px; }
.why-item__text { font-size: 14.5px; line-height: 1.58; color: var(--muted-2); }
.home #proteza-vs-fixa .section-padding {
padding: 0;
}
.home-vs__card .media > img {object-position: center;}
/* Secțiunea 12 „Beneficii" folosește bento-ul partajat din main.css
(.bento-grid + .bene*), la fel ca „Avantajele clinicii" de pe Servicii. */
/* Secțiunea 13 „Proteză vs Fixă" e COMPONENTĂ (template-parts/sections/proteza-vs-fixa.php).
Stilurile .home-vs* / .vs-side* / .vs-row sunt în main.css. */
/* ============ 14. IMPLANTURI ============ */
.home-implants__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 20px; }
.implant-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow .25s, transform .25s; }
.implant-card:hover { box-shadow: 0 18px 40px -22px rgba(16,32,43,.35); transform: translateY(-4px); }
.implant-card__media { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: calc(var(--radius) - 4px); overflow: hidden; margin-bottom: 18px; }
.implant-card__name { font-family: var(--hfont); font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--navy); margin-bottom: 8px; }
.implant-card p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.home-implants__cta { display: flex; justify-content: center; margin-top: 44px; }
/* ============ 15. ZÂMBETE REALE — PLAYLIST ============ */
.home-playlist__grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 24px; align-items: start; }
.home-playlist__player { position: relative; height: 520px; border-radius: var(--radius); overflow: hidden; background: linear-gradient(150deg, #17364A, #10202B); box-shadow: 0 22px 46px -24px rgba(16,32,43,.4); }
.home-playlist__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.home-playlist__player .video-play__btn { width: 72px; height: 72px; }
.home-playlist__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.home-playlist__list { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--accent) rgba(16,32,43,.1); }
.pl-item { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px); transition: transform .2s, border-color .2s, background .2s; }
.pl-item:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pl-item[aria-current="true"] { background: color-mix(in srgb, var(--accent) 8%, #fff); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pl-item__thumb { position: relative; flex: none; width: 96px; aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; background: linear-gradient(150deg, #17364A, #10202B); display: flex; align-items: center; justify-content: center; }
.pl-item__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-item__play { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.pl-item__play svg { fill: var(--accent); margin-left: 2px; }
.pl-item__name { display: block; font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.pl-item__role { display: block; font-size: 13px; color: var(--muted-2); margin-top: 2px; }
/* Secțiunea 16 Echipa e COMPONENTĂ (template-parts/sections/echipa.php).
Stilurile .home-team* / .team-card* sunt în main.css. */
/* ============ 17. APARIȚII MEDIA ============ */
.home-media__track { gap: 22px; }
.media-item { flex: 0 0 calc((100% - 44px) / 3); }
.media-item__frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: linear-gradient(150deg, #17364A, #0C2434); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 50px -26px rgba(0,0,0,.6); }
.media-item__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.media-item__frame .video-play__btn { width: 56px; height: 56px; }
.media-item__name { font-size: 15.5px; font-weight: 600; color: #fff; letter-spacing: -.01em; line-height: 1.4; margin-top: 14px; }
.media-item__role { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 3px; }
/* ============ 18. CTA SPLIT ============ */
.cta-split { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 8px); background: linear-gradient(115deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #10202B)); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); align-items: stretch; }
.cta-split__grain { position: absolute; inset: 0; opacity: .5; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px); pointer-events: none; }
.cta-split__text { position: relative; z-index: 1; padding: clamp(36px,4.5vw,64px) clamp(24px,4vw,56px); display: flex; flex-direction: column; justify-content: center; gap: 20px; color: #fff; }
.cta-split__text h2 { color: #fff; font-weight: 600; max-width: 20ch; }
.cta-split__text p { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 48ch; }
.cta-split__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.cta-split__media { position: relative; min-height: 320px; }
.btn--on-accent { background: #fff; color: var(--accent); font-weight: 700; }
.btn--on-accent:hover { color: var(--accent); box-shadow: 0 16px 32px -12px rgba(0,0,0,.35); }
.btn--wa-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn--wa-outline:hover { color: #fff; background: rgba(255,255,255,.14); }
/* Secțiunea 19 „Contacte" e componentă partajată: template-parts/sections/contact.php
(stiluri în main.css: .contact-section*, .contact-card*, .contact-formwrap, .contact-map). */
/* =========================================================================
RESPONSIVE
========================================================================= */
@media (max-width: 1100px) {
.home-hero__inner { grid-template-columns: 1fr; }
.home-hero__media { max-width: 640px; }
.home-approach .container,
.home-playlist__grid { grid-template-columns: 1fr; }
.home-approach__aside { position: static; }
.home-vtest__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.home-vtest__feature { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 860px) {
.home-ba__grid { grid-template-columns: 1fr; margin-inline: auto; }
.bento { grid-template-columns: repeat(2, 1fr); }
.cta-form__row { grid-template-columns: 1fr; }
.media-item { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 560px) {
.home-vtest__grid { grid-template-columns: 1fr; }
.bento { grid-template-columns: 1fr; grid-auto-rows: 200px; }
.bento__2x2, .bento__2w, .bento__2h { grid-column: auto; grid-row: auto; }
.media-item { flex-basis: 100%; }
.home-welcome__visual { padding: 0 0 40px; }
.home-welcome__main { height: 440px; }
}
/* =========================================================================
16. PAGINA SERVICII
========================================================================= */
/* ============ 1. HERO ============ */
.svc-hero { overflow: hidden; }
/* Fundal hero din imaginea reprezentativă a paginii (img + overlay întunecat). */
.svc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.svc-hero__overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(150deg, rgba(23,54,74,.62), rgba(16,32,43,.68) 55%, rgba(12,36,52,.74)); }
.svc-hero__blob { position: absolute; top: -160px; right: -120px; width: 420px; height: 420px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); filter: blur(40px); pointer-events: none; z-index: 1; }
.svc-hero__inner { position: relative; z-index: 2; text-align: center; }
.svc-hero__inner h1 { color: #fff; margin: 0 auto 18px; max-width: 30ch; font-weight: 600; }
.svc-hero__lead { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0 auto 34px; max-width: 70ch; }
.svc-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
/* ============ 2. SERVICIU PRINCIPAL (feature) ============ */
.svc-feature { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 10px); min-height: 520px; display: flex; align-items: stretch; background: var(--navy); box-shadow: 0 40px 80px -40px rgba(16,32,43,.55); margin-bottom: 56px; scroll-margin-top: 90px; }
.svc-feature__media { position: absolute; inset: 0; }
.svc-feature__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(8,18,26,.94) 0%, rgba(8,18,26,.82) 42%, rgba(8,18,26,.28) 70%, rgba(8,18,26,.05) 100%); }
.svc-feature__bar { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: var(--accent); pointer-events: none; }
.svc-feature__watermark { position: absolute; right: clamp(-10px,2vw,40px); top: -30px; font-family: var(--hfont); font-size: clamp(140px,20vw,300px); font-weight: 700; line-height: .8; color: rgba(255,255,255,.05); letter-spacing: -.04em; pointer-events: none; user-select: none; }
.svc-feature__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(34px,5vw,64px); max-width: min(640px, 92%); }
.svc-feature__label { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 62%, #fff); margin-bottom: 10px; }
.svc-feature__title { font-family: var(--hfont); font-weight: 600; font-size: clamp(34px,4.6vw,58px); line-height: 1; letter-spacing: -.03em; color: #fff; }
.svc-feature__text { font-size: 16.5px; line-height: 1.62; color: rgba(255,255,255,.8); max-width: 46ch; }
.svc-feature__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-pill { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.9); }
.svc-pill__tick { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.svc-feature .btn { align-self: flex-start; }
/* Grila de carduri (.svc-grid / .svc-card) e în main.css — partajată cu Home. */
/* ============ Responsive ============ */
@media (max-width: 760px) {
.svc-feature { min-height: 440px; }
.svc-feature__content { max-width: 100%; }
}
/* ============================================================
17. PAGINA TESTIMONIALE
============================================================ */
/* --- Hero: badge-uri (rating + video) — refolosește .svc-hero --- */
.testi-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.testi-badge { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.88); text-decoration: none; }
a.testi-badge { transition: background .2s, border-color .2s, color .2s; }
a.testi-badge:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); color: #fff; }
.testi-badge .stars { color: var(--star); letter-spacing: 1px; }
.testi-badge svg { color: color-mix(in srgb, var(--accent) 70%, #fff); }
/* --- Playlist video --- */
.testi-vids__sub { font-size: 16px; line-height: 1.6; color: #55636D; margin: 0; }
.testi-vids__feat { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-bottom: 24px; }
.testi-vids__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.testi-vcard { display: flex; flex-direction: column; gap: 12px; }
.testi-vcard[hidden] { display: none; } /* atributul hidden trebuie să învingă display:flex */
.testi-vcard__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: linear-gradient(150deg, #17364A, #10202B); box-shadow: 0 14px 30px -18px rgba(16,32,43,.45); transition: transform .2s; }
.testi-vcard--feat .testi-vcard__media { box-shadow: 0 18px 40px -20px rgba(16,32,43,.5); }
.testi-vcard__media:hover { transform: translateY(-3px); }
.testi-vcard__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.testi-vcard__dur { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 600; color: #fff; background: rgba(8,18,26,.65); padding: 4px 10px; border-radius: 6px; pointer-events: none; }
.testi-vcard__name { display: block; padding: 0 4px; font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; line-height: 1.35; text-align: center; }
.testi-vids__grid .testi-vcard__name { font-size: 14px; }
.testi-vids__more { display: flex; justify-content: center; margin-top: 36px; }
.testi-vids__more[hidden] { display: none; }
@media (max-width: 860px) {
.testi-vids__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.testi-vids__feat, .testi-vids__grid { grid-template-columns: 1fr; }
}
/* --- „Ce scriu pacienții" (Facebook) — componentă partajată --- */
.scriu__sub { font-size: 16px; line-height: 1.6; color: #55636D; margin: 0; }
/* Scroll Y — comentariile pot ajunge la zeci de rânduri; blocul nu mai crește nelimitat. */
.scriu__scroll { max-height: 720px; overflow-y: auto; padding-right: 14px; scrollbar-width: thin; scrollbar-color: var(--accent) rgba(16,32,43,.1); }
.scriu__scroll::-webkit-scrollbar { width: 6px; }
.scriu__scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; }
.scriu__scroll::-webkit-scrollbar-track { background: rgba(16,32,43,.1); border-radius: 8px; }
.scriu__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 56px; max-width: 1240px; margin-inline: auto; }
.scriu__col { position: relative; display: flex; flex-direction: column; gap: 28px; padding-bottom: 8px; }
.scriu__col--offset { margin-top: 44px; }
.scriu__line { position: absolute; left: 27px; top: 20px; bottom: 20px; width: 2px; background: color-mix(in srgb, var(--accent) 16%, #fff); }
.scriu__item { position: relative; display: flex; align-items: flex-start; gap: 18px; }
.scriu__ava-wrap { position: relative; flex: none; z-index: 2; }
.scriu__ava { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, #fff); border: 2px solid #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-size: 20px; font-weight: 600; }
.scriu__fb { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: #1877F2; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
.scriu__bubble { position: relative; flex: 1; background: #fff; border: 1px solid rgba(16,32,43,.1); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 16px 36px -22px rgba(16,32,43,.3); }
.scriu__arrow { position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; background: #fff; border-left: 1px solid rgba(16,32,43,.1); border-bottom: 1px solid rgba(16,32,43,.1); transform: rotate(45deg); }
.scriu__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.scriu__name { font-size: 15.5px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.scriu__verif { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, #fff); padding: 4px 10px; border-radius: 999px; flex: none; }
.scriu__stars { color: var(--star); font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; }
.scriu__text { font-size: 14.5px; line-height: 1.65; color: #3B4750; margin: 0; }
@media (max-width: 760px) {
.scriu__cols { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
.scriu__col--offset { margin-top: 28px; }
}
/* ============================================================
18. PAGINA CONTACTE
============================================================ */
/* --- Carduri contact --- */
.contacts-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.contacts-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; transition: transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s; }
a.contacts-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(16,32,43,.28); }
/* Variantă orizontală: icon + text pe același rând (ex. Prețuri — lângă hartă). */
.contacts-card--row { flex-direction: row; align-items: center; padding: 22px 24px; }
.contacts-card__icon { width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 10%, #fff); display: flex; align-items: center; justify-content: center; flex: none; }
.contacts-card__icon--wa { background: rgba(37,211,102,.12); }
.contacts-card__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 5px; }
.contacts-card__value { display: block; font-size: 17px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.contacts-card__sub { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
/* --- Hartă + program --- */
.contacts-map-sect__sub { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }
.contacts-info { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 24px; align-items: stretch; }
.contacts-map { position: relative; min-height: 440px; border-radius: calc(var(--radius) + 4px); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 26px 54px -28px rgba(16,32,43,.4); background: linear-gradient(160deg, #E4EBF1, #D9E3EB); }
.contacts-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contacts-map__btn { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; background: var(--navy); color: #fff; border-radius: calc(var(--radius) - 4px); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(8,18,26,.6); transition: transform .2s; }
.contacts-map__btn:hover { transform: translateY(-2px); color: #fff; }
.contacts-side { display: flex; flex-direction: column; gap: 20px; }
.contacts-hours { flex: 1; background: var(--bg); border: 1px solid rgba(16,32,43,.08); border-radius: var(--radius); padding: 28px 26px; }
.contacts-hours__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.contacts-hours__icon { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, #fff); display: flex; align-items: center; justify-content: center; flex: none; }
.contacts-hours__title { font-family: var(--hfont); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.contacts-hours__row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(16,32,43,.08); font-size: 15px; }
.contacts-hours__row span { color: var(--muted); }
.contacts-hours__row strong { font-weight: 600; color: var(--navy); }
.contacts-hours__row--off strong { color: var(--muted-3); }
.contacts-hours__note { margin-top: 18px; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 7%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: calc(var(--radius) - 5px); font-size: 13.5px; line-height: 1.55; color: var(--muted-2); }
.contacts-hours__note strong { color: var(--navy); }
.contacts-follow { background: var(--bg); border: 1px solid rgba(16,32,43,.08); border-radius: var(--radius); padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.contacts-follow__label { font-size: 15px; font-weight: 600; color: var(--navy); }
.contacts-follow__links { display: flex; align-items: center; gap: 10px; }
.contacts-social { width: 40px; height: 40px; border-radius: 11px; background: #fff; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--muted-2); text-decoration: none; transition: border-color .2s, color .2s; }
.contacts-social:hover { border-color: var(--accent); color: var(--accent); }
.contacts-social--wa:hover { border-color: #25D366; color: #25D366; }
.contacts-social--yt:hover { border-color: #FF0000; color: #FF0000; }
@media (max-width: 980px) {
.contacts-cards { grid-template-columns: 1fr 1fr; }
.contacts-info { grid-template-columns: 1fr; }
.contacts-map { min-height: 340px; }
}
@media (max-width: 560px) {
.contacts-cards { grid-template-columns: 1fr; }
.contacts-follow { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* ============================================================
19. PAGINA CAZURI CLINICE
============================================================ */
/* --- Hero: cifre (sub butoane) — refolosește .svc-hero --- */
.cc-hero__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin-top: 44px; }
.cc-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cc-stat__num { font-family: var(--hfont); font-size: clamp(28px,3vw,40px); font-weight: 600; letter-spacing: -.02em; color: #fff; }
.cc-stat__label { font-size: 13.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
/* --- Cazuri video (mozaic) — refolosește .video-card / .video-play --- */
.cc-video { scroll-margin-top: 80px; }
.cc-video__grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows: 1fr 1fr; gap: 16px; }
.cc-video__feat { grid-row: 1 / 3; border-radius: calc(var(--radius) + 4px); min-height: 420px; }
.cc-video__small { min-height: 200px; }
.cc-video__small .video-play__btn { width: 48px; height: 48px; }
.cc-video__small .video-play__name { font-size: 14px; }
.cc-video__more-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.cc-video__more { display: flex; justify-content: center; margin-top: 36px; }
.cc-video__more[hidden] { display: none; }
/* --- Înainte / După (fundal deschis) — refolosește .ba-card* / .home-ba__grid / .ba-desc --- */
.cc-ba { scroll-margin-top: 80px; }
.home-ba__case[hidden] { display: none; }
/* --- CTA formular — identic cu Home/Testimoniale (.cta-form) --- */
.cc-cta { scroll-margin-top: 80px; }
@media (max-width: 1100px) {
.cc-video__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.cc-video__feat { grid-row: auto; grid-column: 1 / -1; }
.cc-video__more-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
.cc-video__grid { grid-template-columns: 1fr; }
.cc-video__more-grid { grid-template-columns: 1fr; }
}
/* ============================================================
20. PAGINA DANTURA FIXA
============================================================ */
/* --- Hero (split: text + video) --- */
.df-hero { position: relative; overflow: hidden; background: var(--navy); min-height: min(90vh,720px); }
.df-hero__bg { position: absolute; inset: 0; background: linear-gradient(120deg, #0C2434, #10202B 45%, #17364A); background-size: 180% 180%; animation: drift 22s ease-in-out infinite; }
.df-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* fundal hero = imaginea reprezentativă; overlay-ul .df-hero__scrim rămâne deasupra */
.df-hero__grain { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px); }
.df-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(92deg, rgba(8,18,26,.9) 30%, rgba(8,18,26,.5) 58%, rgba(8,18,26,.15)); pointer-events: none; }
.df-hero__video { position: relative; z-index: 1; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--radius) + 8px); box-shadow: 0 40px 80px -34px rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.12); background: linear-gradient(150deg, #17364A, #10202B); }
.df-hero__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* poster pe toată înălțimea cadranului */
.df-hero__video-scrim { position: absolute; inset: 0; background: linear-gradient(92deg, rgba(8,18,26,.55) 0%, rgba(8,18,26,.12) 40%, transparent); pointer-events: none; z-index: 1; }
/* Butonul acoperă TOATĂ coloana (clasa .video-play dă inset:0); cercul e doar vizual. */
.df-hero__video-btn { cursor: pointer; z-index: 2; }
.df-hero__video-circle { width: 78px; height: 78px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 46px -14px rgba(0,0,0,.6); transition: transform .2s; }
.df-hero__video-btn:hover .df-hero__video-circle { transform: scale(1.07); }
.df-hero__video-label { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); pointer-events: none; white-space: nowrap; }
.df-hero__inner { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,44%); gap: clamp(28px,4vw,60px); align-items: center; min-height: min(88vh,720px); padding-block: clamp(48px,6vw,72px); }
.df-hero__copy { max-width: 640px; }
.df-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 55%, #fff); margin-bottom: 22px; }
.df-hero__eyebrow span { width: 26px; height: 1.5px; background: currentColor; }
.df-hero__copy h1 { color: #fff; font-weight: 500; font-size: clamp(32px,3.6vw,50px); line-height: 1.07; letter-spacing: -.025em; margin: 0 0 22px; }
.df-hero__copy h1 em { font-style: italic; color: color-mix(in srgb, var(--accent) 62%, #fff); }
.df-hero__pillars { display: flex; flex-direction: column; gap: 12px; margin: 40px 0 22px; }
.df-hero__pillar { display: flex; align-items: flex-start; gap: 13px; }
.df-hero__pillar-tick { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.df-hero__pillar span:last-child { font-size: 16px; line-height: 1.42; color: rgba(255,255,255,.78); }
.df-hero__note { font-size: 16.5px; font-weight: 600; color: #fff; margin: 0 0 30px; }
.df-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 1100px) {
.df-hero { min-height: 0; }
.df-hero__inner { grid-template-columns: 1fr; gap: clamp(28px,6vw,40px); min-height: 0; padding-block: clamp(48px,8vw,64px); }
.df-hero__copy { max-width: 640px; order: 2; }
.df-hero__video { aspect-ratio: 16 / 10; max-height: 420px; order: 1; } /* videoul primul, apoi content */
}
/* --- Carduri icon (Avantajele danturii fixe / Riscuri amânare) --- */
.df-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.df-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s; }
.df-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -22px rgba(16,32,43,.26); }
.df-card--tint { background: var(--bg); }
.df-card__icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.df-card__icon--danger { background: #FBE4E0; border-color: transparent; color: #C0503F; }
.df-card__title { font-size: 17.5px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; line-height: 1.3; }
.df-card__text { font-size: 14.5px; line-height: 1.6; color: var(--muted-2); }
/* --- Fast & Fixed (video + text) --- */
.df-ff { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: clamp(32px,4vw,56px); align-items: stretch; padding-bottom: 0; }
.df-ff__video { position: relative; min-height: 510px; border-radius: calc(var(--radius) + 4px); overflow: hidden; background: linear-gradient(150deg, #17364A, #10202B); box-shadow: 0 30px 60px -28px rgba(16,32,43,.5); border: 1px solid var(--line); }
.df-ff__video .video-play__btn { width: 72px; height: 72px; }
.df-ff__body { display: flex; flex-direction: column; justify-content: center; }
.df-ff__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.df-ff__body p {margin-top: 30px; margin-bottom: 50px;}
.page-template-template-dantura-fixa #contacte h2 {margin-bottom: 40px;}
.page-template-template-dantura-fixa #echipa .section-padding {
padding-top: 30px;
}
.page-template-template-dantura-fixa .svc-adv .section-padding {padding: 0;}
/* --- Grijă pentru fiecare pacient (marquee) --- */
@keyframes marqL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mq { overflow: hidden; width: 100%; }
.mq:hover .mq-track { animation-play-state: paused; }
.mq-track { display: flex; gap: 14px; width: max-content; animation: marqR 46s linear infinite; }
.mq-item { position: relative; flex: none; width: 320px; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(150deg, #DFE8EE, #CBDEE9); }
/* --- Laborator dentar propriu --- */
.df-lab { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px,1fr)); gap: clamp(36px,4.5vw,64px); align-items: center; }
.df-lab__collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.df-lab__big { grid-column: 1 / -1; aspect-ratio: 16/9; border-radius: calc(var(--radius) + 4px); box-shadow: 0 30px 60px -30px rgba(16,32,43,.4); }
.df-lab__small { aspect-ratio: 4/3; border-radius: calc(var(--radius) + 4px);}
.df-lab__points { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; }
.df-lab__point { display: flex; align-items: flex-start; gap: 12px; }
.df-lab__point-title { font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; line-height: 1.35; }
.df-lab__point-text { font-size: 13.5px; line-height: 1.55; color: var(--muted-2); margin-top: 3px; }
@media (max-width: 560px) { .df-lab__points { grid-template-columns: 1fr; } }
/* --- Etapele tratamentului --- */
.df-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.df-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s cubic-bezier(.16,.8,.24,1), box-shadow .25s; }
.df-step:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -22px rgba(16,32,43,.26); }
.df-step__num { width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--hfont); font-size: 22px; font-weight: 600; flex: none; }
.df-step__title { font-size: 17.5px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; line-height: 1.3; }
.df-step__text { font-size: 14.5px; line-height: 1.6; color: var(--muted-2); }
.df-step__arrow { position: absolute; right: -30px; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -8px rgba(16,32,43,.4); }
@media (max-width: 1100px) { .df-step__arrow { display: none; } }
/* --- Prețuri --- */
.df-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 20px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line-strong); border-radius: calc(var(--radius) + 4px); padding: 30px 26px; box-shadow: 0 18px 40px -26px rgba(16,32,43,.28); }
.plan-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.plan-card__tier { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.plan-card__name { font-family: var(--hfont); font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--navy); margin-bottom: 18px; line-height: 1.2; }
.plan-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.plan-card__price strong { font-family: var(--hfont); font-size: 40px; font-weight: 600; letter-spacing: -.02em; color: var(--navy); line-height: 1; }
.plan-card__price span { font-size: 16px; font-weight: 600; color: var(--muted-3); }
.plan-card__rate { font-size: 13px; color: var(--muted-3); margin-bottom: 22px; }
.plan-card__features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; flex: 1; }
.plan-card__feature { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.plan-card__tick { width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.df-plans__note { text-align: center; font-size: 13px; color: var(--muted-3); margin: 28px auto 0; max-width: 64ch; }
/* Blocul Prețuri pe fundal ÎNCHIS — DOAR pe pagina Dantura Fixă (scope .df-pret-dark). */
.df-pret-dark .home-heading-center h2 { color: #fff; }
.df-pret-dark .home-heading-center p { color: rgba(255,255,255,.72); }
.df-pret-dark .tabs-switch { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); box-shadow: none; }
.df-pret-dark .tab-btn { color: rgba(255,255,255,.72); }
.df-pret-dark .tab-btn.is-active { color: #fff; }
.df-pret-dark .plan-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.df-pret-dark .plan-card__name,
.df-pret-dark .plan-card__price strong { color: #fff; }
.df-pret-dark .plan-card__price span { color: rgba(255,255,255,.6); }
.df-pret-dark .plan-card__rate { color: rgba(255,255,255,.55); }
.df-pret-dark .plan-card__feature { color: rgba(255,255,255,.78); }
.df-pret-dark .plan-card__tier { color: color-mix(in srgb, var(--accent) 65%, #fff); }
.df-pret-dark .plan-card__tick { background: color-mix(in srgb, var(--accent) 25%, transparent); color: #fff; }
.df-pret-dark .df-plans__note { color: rgba(255,255,255,.5); }
/* --- Galerie clinică --- */
.df-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.df-gallery__item { aspect-ratio: 4/3; border-radius: var(--radius); border: 1px solid var(--line); }
/* --- FAQ (acordeon) --- */
.faq-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; align-items: start; }
.faq-col { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); overflow: hidden; }
.faq-item__q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: transparent; border: none; cursor: pointer; text-align: left; }
.faq-item__q-text { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; line-height: 1.4; }
.faq-item__chevron { flex: none; color: var(--accent); display: flex; transition: transform .25s; }
.faq-item__a { padding: 0 24px 22px; }
.faq-item__a p { font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }
/* --- Contacte + hartă (fundal închis, fără formular) --- */
.df-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 40px; align-items: center; }
.df-contact__rows { display: flex; flex-direction: column; gap: 18px; }
.df-contact__row { display: flex; align-items: center; gap: 14px; }
.df-contact__icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--accent) 55%, #fff); flex: none; }
.df-contact__label { font-size: 13px; color: rgba(255,255,255,.5); }
.df-contact__value { font-size: 15.5px; font-weight: 500; }
a.df-contact__value { text-decoration: none; transition: color .2s; }
a.df-contact__value:hover { color: color-mix(in srgb, var(--accent) 60%, #fff); }
.df-contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.df-contact__map { align-self: stretch; display: flex; border-radius: calc(var(--radius) + 6px); overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.df-contact__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: grayscale(.2); }
/* --- Stiluri mutate din template (fost inline) --- */
.scroll-target { scroll-margin-top: 80px; } /* offset pt. header sticky la ancore */
.df-vtest__head { max-width: 720px; }
.df-ctaform-top { padding-top: clamp(40px,5vw,64px); }
.df-ctaform-block { padding-block: clamp(40px,5vw,64px); }
.df-lab__text { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 20px 0 28px; }
.df-contact h2 { color: #fff; }
.df-contact__text { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.74); margin: 0 0 32px; max-width: 46ch; }
@media (max-width: 860px) {
.df-cards__grid { grid-template-columns: 1fr 1fr; }
.df-gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.df-cards__grid { grid-template-columns: 1fr; }
.df-gallery { grid-template-columns: 1fr; }
}
/* ============================================================
21. SINGLE SERVICIU (CPT „serviciu" — template comun tuturor serviciilor)
============================================================ */
/* --- Hero --- */
.svc1-hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.svc1-hero__grain { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px); }
.svc1-hero__blob { position: absolute; top: -160px; right: -120px; width: 420px; height: 420px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); filter: blur(40px); pointer-events: none; }
.svc1-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(32px,4vw,64px); align-items: stretch; }
.svc1-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 22px; }
.svc1-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.svc1-breadcrumb a:hover { color: #fff; }
.svc1-breadcrumb span:last-child { color: color-mix(in srgb, var(--accent) 70%, #fff); font-weight: 500; }
.svc1-hero__grid h1 { font-weight: 600; font-size: clamp(34px,4vw,54px); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 18px; max-width: 18ch; }
.svc1-hero__grid h1 em { font-style: italic; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.svc1-hero__lead { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0 0 30px; max-width: 54ch; }
.svc1-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.svc1-hero__media { position: relative; min-height: 400px; border-radius: calc(var(--radius) + 6px); overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 80px -34px rgba(0,0,0,.6); }
@media (max-width: 900px) { .svc1-hero__grid { grid-template-columns: 1fr; } .svc1-hero__media { min-height: 280px; } }
/* --- Hero articol blog (doar breadcrumb + titlu, centrat — vezi single.php) --- */
.blog-hero__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }
.blog-hero__inner .svc1-breadcrumb { justify-content: center; }
.blog-hero__inner h1 { font-weight: 600; font-size: clamp(30px,4vw,46px); line-height: 1.15; letter-spacing: -.02em; margin: 0; max-width: none; }
/* --- Articol blog: imagine + conținut, fără sidebar --- */
.blog-single { display: flex; justify-content: center; }
.blog-single .blog-single__article { max-width: 1000px; width: 100%; }
.blog-single__media { border-radius: calc(var(--radius) + 6px); overflow: hidden; aspect-ratio: 16/9; margin-bottom: 36px; }
.blog-single__cta {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
margin-top: 48px; padding: 28px 30px; background: var(--navy); color: #fff;
border-radius: calc(var(--radius) + 4px); box-shadow: 0 26px 54px -28px rgba(16,32,43,.5);
}
.blog-single__cta-title { font-family: var(--hfont); font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 6px; }
.blog-single__cta-text { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); margin: 0; max-width: 46ch; }
.blog-single__cta .btn { flex: none; }
@media (max-width: 560px) { .blog-single__cta { padding: 24px; } }
/* --- Conținut SEO + sidebar --- */
.svc1-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: clamp(32px,4vw,64px); align-items: start; }
.svc1-article { max-width: 90%; }
.svc1-article h2 { font-family: var(--hfont); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.02em; margin: 44px 0 24px; scroll-margin-top: 100px; }
.svc1-article h3 { font-family: var(--hfont); font-weight: 600; font-size: 21px; letter-spacing: -.015em; margin: 0 0 14px; }
.svc1-article > p, .svc1-article .entry-content p { font-size: 16px; line-height: 1.75; color: #3B4750; margin: 0 0 18px; }
/* Resetul global „ul, ol { list-style: none }" lasă listele din the_content() fără
niciun marker vizibil — le desenăm noi: cifre pentru ol, iconițe check pentru ul. */
.svc1-article .entry-content ol { list-style: none; counter-reset: svc1-ol; padding-left: 0; }
.svc1-article .entry-content ol > li { counter-increment: svc1-ol; position: relative; padding-left: 22px; }
.svc1-article .entry-content ol > li::before { content: counter(svc1-ol) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--accent); }
.svc1-article .entry-content ul { list-style: none; padding-left: 0; }
.svc1-article .entry-content ul > li { position: relative; padding-left: 30px; }
.svc1-article .entry-content ul > li::before {
content: "✓"; position: absolute; left: 0; top: 4px;
width: 20px; height: 20px; border-radius: 50%;
background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent);
font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.svc1-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.svc1-formcard { background: var(--navy); color: #fff; border-radius: calc(var(--radius) + 4px); padding: 28px 26px; box-shadow: 0 26px 54px -28px rgba(16,32,43,.5); }
.svc1-formcard__title { font-family: var(--hfont); font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 8px; }
.svc1-formcard__lead { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.65); margin: 0 0 20px; }
.svc1-formcard__or { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; }
.svc1-formcard__or span:not(:nth-child(2)) { flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.svc1-formcard__or span:nth-child(2) { font-size: 12px; color: rgba(255,255,255,.5); }
.svc1-formcard__call { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 20px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: calc(var(--radius) - 4px); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .2s; }
.svc1-formcard__call:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 960px) { .svc1-layout { grid-template-columns: 1fr; } .svc1-sidebar { position: static; } }
/* --- Avantaje (grilă 2 coloane) --- */
.svc1-adv { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 0 0 40px; }
.svc1-adv__item { display: block; gap: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: calc(var(--radius) - 3px); padding: 18px 20px; }
.svc1-adv__title { display: block; font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 3px; margin-top: 20px; }
.svc1-adv__text { display: block; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 560px) { .svc1-adv { grid-template-columns: 1fr; } }
/* --- Etapele tratamentului (listă) --- */
.svc1-steps { display: flex; flex-direction: column; margin: 0 0 40px; }
.svc1-step { display: flex; align-items: flex-start; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.svc1-step__num { flex: none; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); display: flex; align-items: center; justify-content: center; font-family: var(--hfont); font-size: 17px; font-weight: 600; color: var(--accent); }
.svc1-step__title { display: block; font-size: 16.5px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; margin-bottom: 5px; }
.svc1-step__text { display: block; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
/* --- FAQ (listă pe o coloană) --- */
.faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
/* --- Recenzii (grilă simplă) --- */
.svc1-reviews { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 860px) { .svc1-reviews { grid-template-columns: 1fr; } }
/* --- Carusel „Alte servicii" (standard — .carousel + .nav-arrow, ca Diplome/Media) --- */
.svc1-others__track { gap: 18px; }
.svc1-others__item { flex: 0 0 calc((100% - 54px) / 4); }
@media (max-width: 1100px) { .svc1-others__item { flex-basis: calc((100% - 36px) / 3); } }
@media (max-width: 760px) { .svc1-others__item { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 560px) { .svc1-others__item { flex-basis: 86%; } }
/* ============================================================
22. PAGINA MULȚUMIM
============================================================ */
/* --- Confirmare (hero cu bifă animată) --- */
.ty-hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; text-align: center; }
.ty-hero__grain { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px); }
.ty-hero__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.ty-hero__blob--a { top: -160px; right: -120px; width: 420px; height: 420px; background: color-mix(in srgb, var(--accent) 22%, transparent); filter: blur(40px); }
.ty-hero__blob--b { bottom: -180px; left: -140px; width: 380px; height: 380px; background: color-mix(in srgb, var(--accent) 12%, transparent); filter: blur(50px); }
.ty-hero__inner { position: relative; z-index: 2; }
.ty-check { position: relative; width: 88px; height: 88px; margin: 0 auto 28px; }
.ty-check__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 60%, #fff); animation: tyRing 1.8s ease-out .5s 2; }
.ty-check__badge { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.96); display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 44px -16px color-mix(in srgb, var(--accent) 55%, transparent); animation: tyPop .55s cubic-bezier(.34,1.4,.44,1) both; }
.ty-check__badge path { animation: tyDraw .5s ease-out .35s both; }
@keyframes tyPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes tyDraw { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@keyframes tyRing { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
.ty-hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, #fff); margin-bottom: 20px; }
.ty-hero__inner h1 { font-weight: 600; font-size: clamp(34px,4.2vw,58px); line-height: 1.08; letter-spacing: -.025em; margin: 0 auto 18px; max-width: 24ch; }
.ty-hero__inner h1 em { font-style: italic; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.ty-hero__lead { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0 auto 36px; max-width: 54ch; }
.ty-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
/* --- Ce urmează (pași) --- */
.ty-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; }
.ty-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; }
.ty-step__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ty-step__icon { width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, #fff); display: flex; align-items: center; justify-content: center; }
.ty-step__num { font-family: var(--hfont); font-size: 40px; font-weight: 600; line-height: 1; color: color-mix(in srgb, var(--accent) 22%, transparent); }
.ty-step__title { font-family: var(--hfont); font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.ty-step__text { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; }
.ty-note { max-width: 1180px; margin: 24px auto 0; padding: 18px 22px; background: color-mix(in srgb, var(--accent) 7%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: var(--radius); display: flex; align-items: center; gap: 14px; font-size: 14.5px; line-height: 1.55; color: #3B4750; }
.ty-note strong { color: var(--navy); }
/* --- Contact rapid --- */
.ty-contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: clamp(32px,5vw,72px); align-items: center; max-width: 1180px; margin: 0 auto; }
.ty-contact__lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }
.ty-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) {
.ty-steps { grid-template-columns: 1fr; }
.ty-contact { grid-template-columns: 1fr; }
.footer-bottom__inner {padding-bottom: 90px}
}
@media (max-width: 560px) {
.ty-contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 1300px) {
.footer-bottom__inner {padding-bottom: 90px}
}
/* ============================================================
23. PAGINA PREȚURI
============================================================ */
/* --- Comutator segmentat (tab-uri) — reutilizabil oriunde e nevoie de 2-3 opțiuni --- */
.tabs-switch { display: inline-flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 10px 26px -18px rgba(16,32,43,.35); max-width: 100%; }
.tab-btn { padding: 12px 28px; border: none; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; background: transparent; color: #3B4750; transition: background .2s, color .2s; }
.tab-btn.is-active { background: var(--accent); color: #fff; }
@media (max-width: 560px) {
.tabs-switch { display: flex; width: 100%; gap: 2px; }
.tab-btn { flex: 1; padding: 10px 6px; font-size: 15.5px; line-height: 1.25; white-space: normal; text-align: center; }
}
/* --- Hero: pastile cu argumente --- */
.pr-hero__badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.pr-hero__badge { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.88); }
/* --- Restul serviciilor (acordeon grupe de prețuri) --- */
.pr-group { background: var(--bg); border: 1.5px solid var(--line); border-radius: calc(var(--radius) + 2px); overflow: hidden; transition: border-color .25s; }
.pr-group[data-open] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pr-group__header { width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: transparent; border: none; cursor: pointer; text-align: left; }
.pr-group__num { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--hfont); font-size: 14px; font-weight: 600; transition: background .25s, color .25s; }
.pr-group[data-open] .pr-group__num { background: var(--accent); color: #fff; }
.pr-group__name { display: block; font-family: var(--hfont); font-size: 18px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.pr-group__chev { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; flex: none; color: #3B4750; transition: transform .25s; }
.pr-group__panel { padding: 4px 24px 24px 24px; }
.pr-group__items { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.pr-group__item { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pr-group__item-name { font-size: 14.5px; color: #3B4750; line-height: 1.45; }
.pr-group__item-dots { flex: 1; border-bottom: 1.5px dotted var(--line-strong); min-width: 24px; transform: translateY(-4px); }
.pr-group__item-price { font-size: 14.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }
/* --- Contacte + hartă (refolosește .contacts-info / .contacts-map / .contacts-card) --- */
.pr-contact__side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 760px) {
.pr-group__panel { padding-left: 24px; }
.pr-group__items { grid-template-columns: 1fr; }
}
/* ============================================================
24. PAGINA 404
============================================================ */
.error-404__code { font-family: var(--hfont); font-weight: 700; font-size: clamp(90px,14vw,180px); line-height: .85; letter-spacing: -.03em; color: rgba(255,255,255,.07); margin: 0 0 -10px; }
.error-404__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 900px; margin: 0 auto; }
.error-404__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 620px; margin: 28px auto 0; }
@media (max-width: 560px) { .error-404__contact { grid-template-columns: 1fr; } }
.intl-tel-input.separate-dial-code .selected-dial-code {
font-size: 14px;
color: var(--muted);
}
.intl-tel-input .country-list .country {color: var(--muted);}
/* ============================================================
25. PAGINĂ GENERICĂ (page.php) — ex. Politica cookies, Termeni și condiții,
Setări GDPR — orice pagină simplă, fără șablon dedicat.
============================================================ */
.section--page-header { position: relative; overflow: hidden; background: var(--navy); text-align: center; margin-bottom: 80px; }
.section--page-header::before {
content: ""; position: absolute; top: -160px; right: -120px; z-index: 0;
width: 420px; height: 420px; border-radius: 50%;
background: color-mix(in srgb, var(--accent) 22%, transparent);
filter: blur(40px); pointer-events: none;
}
.section--page-header .entry-title { position: relative; z-index: 1; color: #fff; max-width: 780px; margin: 0 auto; }
.section--page-content { padding-block: 0 var(--space-section); }
.section--page-content .entry-content { max-width: 780px; }
.entry-content { margin: 0 auto; margin-top: 10px; font-size: 16px; line-height: 1.75; color: #3B4750; }
.entry-content h2 { font-size: clamp(22px,2.4vw,28px); font-weight: 600; letter-spacing: -.015em; margin: 44px 0 16px; color: var(--navy); }
.entry-content h3 { font-size: 19px; font-weight: 600; margin: 30px 0 12px; color: var(--navy); }
.entry-content h2:first-child, .entry-content h3:first-child { margin-top: 0; }
.entry-content p { margin: 0 0 18px; }
.entry-content ul, .entry-content ol { margin: 0 0 18px; padding-left: 22px; }
.entry-content li { margin-bottom: 8px; }
.entry-content li:last-child { margin-bottom: 0; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-wrap: break-word;}
.entry-content a:hover { color: var(--navy); }
.entry-content strong { color: var(--navy); font-weight: 600; }
.entry-content em { color: var(--muted-2); }
.entry-content blockquote { margin: 24px 0; padding: 16px 22px; border-left: 3px solid var(--accent); background: var(--bg); color: var(--muted); font-style: italic; }
.entry-content > *:last-child { margin-bottom: 0; }
.ty-contact h2 {font-size: clamp(1.75rem, 2.4vw, 2.2rem); margin-bottom: 40px;}
@media (min-width: 641px) and (max-width: 1023px) {
.pr-group__panel { padding-left: 24px; }
.entry-content a {word-wrap: break-word;}
.home-ba__grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
.svc1-article {max-width: 100%;}
.entry-content {margin-top: 0px;}
.svc1-hero__media {min-height: 400px;}
.svc1-hero__grid h1,.svc1-hero__lead, .home-hero__media {max-width: 100%;}
.home-hero__copy {text-align: center;}
.home-hero__lead {max-width: 100%;;}
.home-hero__actions, .home-hero__rating {justify-content: center;}
.home-hero__copy {padding-bottom: 10px;}
.home-accred__inner {grid-template-columns: repeat(2, minmax(220px, 1fr));}
.home #cazuri .media:nth-child(5), .home #cazuri .media:nth-child(7) {display: none;}
.home #inainte-dupa .home-ba__case:last-child {display: none;}
.home-welcome .container {grid-template-columns: repeat(1, minmax(320px, 1fr));}
.home-heading-center {margin-bottom: 28px;}
.home-playlist__player {height: 440px;}
.home-playlist__list {max-height: 320px;}
.home-heading-center p {margin-top: 5px;}
.page-template-template-dantura-fixa .home-ba__grid .ba-card:last-child{display: none;}
.df-ff__body p {
margin-top: 10px;
margin-bottom: 10px;
}
.df-ff__video {min-height: 335px;}
.df-lab {
display: block;
}
.df-lab__collage {margin-bottom: 30px;}
.faq-grid {grid-template-columns: repeat(1, minmax(0, 1fr));}
.df-hero__copy,.df-hero__video {max-width: 100%; width: 100%;}
}
@media only screen and (max-width: 640px) {
.contacts-hours__note {font-size: 12.5px;}
.cta-form__lead {font-size: 15px;}
.footer-bottom__inner {padding-bottom: 90px}
.footer-badges {border: 0; margin-top: 0;}
.pr-hero__badge {width: 100%; justify-content: center;}
.error-404__links a, .ty-hero__actions a,
.svc-hero__actions a, .svc-feature .btn {width: 100%;}
.svc1-hero__grid h1,.svc1-hero__lead, .svc1-article {max-width: 100%;}
.entry-content {margin-top: 0px;}
.contact-section__head {margin-bottom: 30px;}
.entry-content h2 {line-height: 1.3;}
.cc-stat__num {font-size: 22px;}
.cc-stat__label {font-size: 12px;}
.cc-hero__stats {gap: 16px}
.home-heading-center {margin-bottom: 28px;}
.home-hero__copy {text-align: center; padding-bottom: 0;}
.home-hero__actions a, .home-welcome__actions a,
.home-approach__aside a {width: 100%;}
.home-vtest__feature {min-height: 330px;}
.home-welcome__main {height: 350px;}
.home-welcome__badge {display: none;}
.home-approach__aside h2 {text-align: center;}
.home-heading-row {justify-content: center;}
.review-slide {grid-template-columns: repeat(1, minmax(0, 1fr));}
.dantura-panel__ba .ba-card__slot {height: 140px;}
.vs-side__title {font-size: 18px;}
.home-playlist__player {height: 340px;}
.home-playlist__list {max-height: 280px;}
.home-heading-row h2 {text-align: center;}
.df-ff__video {min-height: 300px;}
.df-ff__body p {margin: 10px 0;}
.center-cta {margin-top: 30px;}
.center-cta a, .df-ff__actions a, .df-hero__actions a,
.df-contact__actions a {width: 100%;}
.df-lab__points {gap: 15px}
.df-hero__video {aspect-ratio: 16 / 14;}
}