/* ============================================================
OFTALMESTET v3 — 1:1 rebuild
Light/Dark theme • Effects • Marquee • Counters
============================================================ */
/* ============================================================
Fonturi LOCALE — Bitter + Inter, variabile (regula 5).
Inlocuiesc `@import url(fonts.googleapis.com)`, care era dependenta
externa si serializa lantul de incarcare.
Doar subseturile latin si latin-ext; diacriticele romanesti (ăâîșț)
sunt in latin-ext, deci nu se poate scoate.
Generat de scratchpad/fonturi.py, 2026-08-26.
============================================================ */
/* latin-ext */
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/fonts/bitter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/fonts/bitter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(/assets/fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--navy:#0B1C35; --navy2:#162B4A;
--gold:#B8974A; --gold-lt:#D4B472;
--primary:#3652f5; --primary-hover:#2842e0;
--btn-border:#E5E7EB; --link-dark:#171a1f;
--bg:#FCFCFC; --bg-alt:#FFFFFF; --bg-card:#FFFFFF;
--text:#171a1f; --muted:#565D69; --border:#D8D8D8;
--hd-solid-bg:#FFFFFF; --hd-solid-text:#333;
--ff-disp:'Bitter',Georgia,serif;
--ff-body:'Inter',system-ui,sans-serif;
--shadow:0 6px 28px rgba(11,28,53,.14);
--trans:.35s cubic-bezier(.4,0,.2,1);
/* antet lipit + fundal subsol, masurate pe original */
--gray-dark:#242424;
--hd-lipit-bg:rgba(255,255,255,.8);
--hd-text:#171a1f;
}
[data-theme="dark"]{
--bg:#161616; --bg-alt:#1C1C1C; --bg-card:#242424;
/* --muted era rgba(255,255,255,.7); originalul are
--color-body-color-dark: #d8d8d8. Masurat pe live. */
--text:#FFFFFF; --muted:#D8D8D8; --border:#363636;
--hd-solid-bg:#242424; --hd-solid-text:#FFFFFF;
--shadow:0 6px 28px rgba(0,0,0,.5);
/* Fara asta linkurile pe --link-dark raman #171a1f pe fundal #161616,
adica invizibile. Masurat pe original: alb curat pe tema inchisa. */
--link-dark:#FFFFFF;
--hd-lipit-bg:#242424;
--hd-text:#FFFFFF;
}
html{scroll-behavior:smooth}
/* Originalul: body { font-family: Inter; font-weight: 300 }. Aveam 400. */
body{font-family:var(--ff-body);font-weight:300;color:var(--text);background:var(--bg);font-size:16px;line-height:1.65;transition:background .4s ease,color .4s ease}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
/* Containerul originalului, masurat: latimi in trepte, padding-inline 16px.
Valorile vin din CSS-ul live (_next/static/chunks/1aa326703baf95e0.css):
.container{margin-inline:auto;padding-inline:1rem} + treptele de mai jos. */
.container{width:100%;margin-inline:auto;padding-inline:16px}
@media(min-width:450px){.container{max-width:450px}}
@media(min-width:575px){.container{max-width:575px}}
@media(min-width:768px){.container{max-width:768px}}
@media(min-width:992px){.container{max-width:992px}}
@media(min-width:1200px){.container{max-width:1200px}}
@media(min-width:1400px){.container{max-width:1400px}}
.gold-rule{display:block;width:48px;height:2px;background:var(--gold);margin-bottom:20px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:block}
/* BUTTONS */
/* Butoane — masurat pe original: Inter 500 16px/24px, padding 16px 32px,
radius 0, cutia primara 213x56. Fara majuscule si fara letter-spacing. */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-body);font-size:16px;font-weight:500;line-height:24px;letter-spacing:normal;text-transform:none;padding:16px 32px;border:none;border-radius:0;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-lt);transform:translateY(-2px)}
.btn-navy{background:var(--primary);color:#fff;border:1px solid var(--primary)}
[data-theme="dark"] .btn-navy{background:var(--bg-card);border-color:var(--gold)}
.btn-navy:hover{background:var(--primary-hover)}
/* Secundar — masurat: 1px rgba(255,255,255,.3), fundal rgba(22,22,22,.5),
hover = fundal alb + text negru. Cutia iese 189x58 (56 + 2 de bordura). */
.btn-outline{background:rgba(22,22,22,.5);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-outline:hover,.btn-outline:focus-visible,.btn-outline:active{background:#fff;color:#000;border-color:rgba(255,255,255,.3)}
.btn-outline-dark{background:transparent;color:var(--link-dark);border:1.5px solid rgba(0,0,0,.2)}
.btn-outline-dark:hover{background:var(--link-dark);color:#fff;border-color:var(--link-dark)}
[data-theme="dark"] .btn-outline-dark:hover{background:#FFFFFF;color:#161616;border-color:#FFFFFF}
/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.12s}.reveal-d2{transition-delay:.24s}.reveal-d3{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* ============ HERO ============ */
.home-hero{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.38);transform:scale(1.06);animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:130px 32px 90px;width:100%;display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:center}
.hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:18px;display:block}
.hero-title{font-family:var(--ff-disp);font-size:clamp(48px,5.5vw,80px);font-weight:700;color:#fff;line-height:1.05;margin-bottom:22px}
.hero-title em{font-style:italic;color:var(--gold-lt)}
.hero-text{font-size:17px;color:rgba(255,255,255,.75);line-height:1.75;margin-bottom:38px;max-width:480px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px)}
.stat{padding:22px 14px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.stat:last-child{border-right:0}
.stat-num{font-family:var(--ff-disp);font-size:34px;font-weight:700;color:var(--gold-lt);display:block}
.stat-lbl{font-size:10.5px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.09em;margin-top:4px}
.hero-card{background:rgba(11,28,53,.7);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);overflow:hidden}
.hero-card-img{width:100%;aspect-ratio:3/3.6;object-fit:cover;object-position:top}
.hero-card-body{padding:22px 28px 10px}
.hero-card-body h3{font-family:var(--ff-disp);font-size:20px;color:#fff;font-weight:700}
.hero-card-body p{font-size:12.5px;color:var(--gold-lt);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.hero-card-features{padding:16px 28px 24px;display:flex;flex-direction:column;gap:9px}
.hero-feature{font-size:13px;color:rgba(255,255,255,.78);display:flex;gap:8px}
.hero-feature::before{content:'✦';color:var(--gold);font-size:9px;margin-top:4px;flex-shrink:0}
/* ============ SECTIONS ============ */
.section{padding:100px 0}
.section-alt{background:var(--bg-alt)}
.section-navy{background:var(--navy);color:#fff}
[data-theme="dark"] .section-navy{background:#101010}
.section-title{font-family:var(--ff-disp);font-size:clamp(28px,3.5vw,46px);font-weight:700;line-height:1.18;color:var(--text);margin-bottom:14px}
.section-navy .section-title{color:#fff}
.section-sub{font-size:16px;color:var(--muted);max-width:600px;line-height:1.75;margin-bottom:52px}
.section-navy .section-sub{color:rgba(255,255,255,.62)}
/* ============ HOME QUICK CARDS (Despre/Servicii/Preturi/Contact) ============ */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.quick-card{position:relative;height:340px;overflow:hidden;display:block}
.quick-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.quick-card:hover img{transform:scale(1.08)}
.quick-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(11,28,53,.88))}
.quick-card-label{position:absolute;bottom:0;left:0;right:0;padding:26px;z-index:2}
.quick-card-label h3{font-family:var(--ff-disp);font-size:24px;font-weight:700;color:#fff;margin-bottom:6px}
.quick-card-label span{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);opacity:0;transform:translateX(-8px);transition:all var(--trans);display:inline-block}
.quick-card:hover .quick-card-label span{opacity:1;transform:none}
/* ============ DOCTOR / COUNTER ============ */
.doctor-wrap{display:grid;grid-template-columns:430px 1fr;gap:72px;align-items:center}
.doctor-img-wrap{position:relative}
.doctor-img{width:100%;aspect-ratio:3/3.8;object-fit:cover;object-position:top}
.doctor-badge{position:absolute;bottom:28px;left:28px;right:28px;background:var(--navy);padding:20px 24px;border-top:3px solid var(--gold)}
[data-theme="dark"] .doctor-badge{background:#101010}
.doctor-badge-num{font-family:var(--ff-disp);font-size:38px;font-weight:700;color:var(--gold-lt)}
.doctor-badge-lbl{font-size:11.5px;color:rgba(255,255,255,.62);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.doctor-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin:26px 0}
.doc-stat{background:var(--bg-alt);padding:18px 20px}
.doc-stat-num{font-family:var(--ff-disp);font-size:28px;font-weight:700;color:var(--text)}
.doc-stat-lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.membership-list li{font-size:14.5px;color:var(--text);opacity:.85;padding:8px 0;border-bottom:1px solid var(--border);display:flex;gap:8px}
.membership-list li::before{content:'✦';color:var(--gold);font-size:10px;margin-top:4px;flex-shrink:0}
/* ============ QUOTE ============ */
/* ============ SERVICES CARDS ============ */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.service-card{background:var(--bg-card);overflow:hidden;transition:transform var(--trans),box-shadow var(--trans);border:1px solid var(--border);display:block}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.service-card-img{width:100%;height:280px;object-fit:cover;transition:transform .7s ease}
.service-card:hover .service-card-img{transform:scale(1.05)}
.service-card-imgwrap{overflow:hidden}
.service-card-body{padding:28px 32px 32px}
.service-card-body h3{font-family:var(--ff-disp);font-size:23px;color:var(--text);font-weight:700;margin-bottom:10px}
.service-card-body p{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:18px}
.service-link{font-size:12px;font-weight:700;color:var(--link-dark);letter-spacing:.1em;text-transform:uppercase}
/* ============ SPLIT ============ */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split-img{width:100%;height:100%;min-height:520px;object-fit:cover}
.split-content{padding:80px 64px;display:flex;flex-direction:column;justify-content:center}
.split-content.bg-navy{background:var(--navy);color:#fff}
[data-theme="dark"] .split-content.bg-navy{background:#101010}
.split-content.bg-navy .section-title{color:#fff}
/* ============ TEAM ============ */
/* ============ EQUIPMENT ============ */
.equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.equip-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:30px;transition:background var(--trans),transform var(--trans)}
.equip-card:hover{background:rgba(184,151,74,.12);transform:translateY(-3px)}
.equip-card h4{font-family:var(--ff-disp);font-size:18px;font-weight:600;color:var(--gold-lt);margin-bottom:10px}
.equip-card p{font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.65}
/* ============ TESTIMONIALS CAROUSEL ============ */
.testi-scroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.testi-scroll::-webkit-scrollbar{height:6px}
.testi-scroll::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.testi-card{min-width:340px;max-width:340px;scroll-snap-align:start;padding:28px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);transition:border-color var(--trans)}
.testi-card:hover{border-color:var(--gold)}
.testi-stars{color:var(--gold);font-size:13px;margin-bottom:12px;letter-spacing:2px}
.testi-text{font-size:14px;color:rgba(255,255,255,.78);line-height:1.7;font-style:italic;margin-bottom:18px}
.testi-author-wrap{display:flex;align-items:center;gap:12px}
.testi-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.testi-name{font-weight:700;font-size:13.5px;color:var(--gold-lt)}
/* light version pt pagina pacienti */
.testi-light .testi-card{background:var(--bg-card);border-color:var(--border);min-width:0;max-width:none}
.testi-light .testi-text{color:var(--text);opacity:.85}
.testi-light .testi-name{color:var(--gold)}
.testi-grid-static{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* ============ GALLERY ============ */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.gallery-item{overflow:hidden;aspect-ratio:1}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .6s ease}
.gallery-item:hover img{transform:scale(1.07);filter:brightness(1.08)}
.gallery-item.wide{grid-column:span 2;aspect-ratio:2/1}
/* ============ BRAND MARQUEE ============ */
/* Banda de parteneri — 1:1 cu originalul (corectata 2026-08-28).
Ce era gresit: logourile stateau direct pe fundal, iar pe tema inchisa aveau
`filter:brightness(0) invert(1)`, care le facea SILUETE ALBE PLINE — de aici
„dreptunghiuri albe in loc de logouri". Originalul nu are niciun filtru: pune
fiecare logo pe un CARD ALB si il lasa asa cum e.
Valorile sunt ale originalului: `.brand-scroll-track{gap:1rem;width:max-content}`,
animatie 72s liniara, deplasare `calc(-33.333% - .67rem)` (pista e repetata 3x),
card `h-[64px] md:h-[88px]`, `p-1.5 md:p-2`, `bg-white`, `object-contain`.
Masca in gradient de pe margini era o adaugire a noastra — scoasa. */
/* Cele doua benzi sunt intr-un container cu `space-y-4` in original, adica
16px intre ele. Le lipiseram — de aici randurile care par ca se incaleca.
Tot de acolo vine si padding-ul lateral: `px-4 md:px-10`. */
.marquee{overflow:hidden}
.marquee + .marquee{margin-top:16px}
.marquee-track{display:flex;gap:16px;width:max-content;will-change:transform;
animation:marquee 72s linear infinite}
.marquee-rev .marquee-track{animation-direction:reverse}
@keyframes marquee{from{transform:translate(0)}to{transform:translate(calc(-33.333% - .67rem))}}
.marquee-card{position:relative;height:64px;flex-shrink:0;overflow:hidden;
background:#fff;padding:6px}
.marquee-card img{position:absolute;left:0;top:0;right:0;bottom:0;
height:100%;width:100%;object-fit:contain;object-position:center}
@media(min-width:768px){.marquee-card{height:88px;padding:8px}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* ============ PRICING ============ */
.price-table{width:100%;border-collapse:collapse}
.price-table th,.price-table td{padding:14px 18px;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--text)}
.price-table th{background:var(--navy);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;text-align:left}
.price-table td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.price-table tr:nth-child(even) td{background:var(--bg-alt)}
.price-table tr:hover td{background:rgba(184,151,74,.1)}
/* ============ CNAS ============ */
.cnas-banner{background:var(--navy);color:#fff;padding:28px 36px;display:flex;gap:20px;align-items:flex-start;border-left:4px solid var(--gold)}
[data-theme="dark"] .cnas-banner{background:#101010}
.cnas-icon{font-size:32px;flex-shrink:0;margin-top:2px}
.cnas-title{font-family:var(--ff-disp);font-size:18px;font-weight:700;color:var(--gold-lt);margin-bottom:6px}
.cnas-text{font-size:14px;color:rgba(255,255,255,.72);line-height:1.65}
/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-item{display:flex;gap:14px;margin-bottom:24px}
.contact-icon{width:44px;height:44px;background:var(--bg-alt);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.contact-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:700;margin-bottom:4px}
.contact-value{font-size:15px;color:var(--text);line-height:1.6}
.contact-value a{font-weight:600}
.contact-value a:hover{color:var(--gold)}
.map-frame{width:100%;height:440px;border:0}
[data-theme="dark"] .map-frame{filter:invert(.88) hue-rotate(180deg)}
/* ============ FORM ============ */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-full{grid-column:1/-1}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text)}
.form-group input,.form-group select,.form-group textarea{border:1.5px solid var(--border);padding:12px 14px;font-family:var(--ff-body);font-size:14.5px;color:var(--text);background:var(--bg-card);outline:none;transition:border-color var(--trans);width:100%}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold)}
.form-group textarea{min-height:120px;resize:vertical}
/* ============ BLOG ============ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:var(--bg-card);border:1px solid var(--border);overflow:hidden;transition:transform var(--trans),box-shadow var(--trans)}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.blog-card-imgwrap{overflow:hidden;height:200px}
.blog-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.blog-card:hover img{transform:scale(1.06)}
.blog-card-body{padding:24px}
.blog-date{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:block}
.blog-card h3{font-family:var(--ff-disp);font-size:19px;font-weight:700;color:var(--text);line-height:1.35;margin-bottom:10px}
.blog-card p{font-size:13.5px;color:var(--muted);line-height:1.65}
/* PAGE HERO INTERIOR */
.page-hero{position:relative;height:420px;overflow:hidden;margin-top:74px}
.page-hero img{width:100%;height:100%;object-fit:cover;filter:brightness(.35)}
.page-hero-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:32px}
.page-hero-txt h1{font-family:var(--ff-disp);font-size:clamp(36px,5vw,60px);font-weight:700;margin:10px 0 14px;line-height:1.1}
.page-hero-txt p{font-size:17px;color:rgba(255,255,255,.74);max-width:560px}
/* ============ RESPONSIVE ============ */
@media(max-width:1100px){
.hero-inner{grid-template-columns:1fr}
.hero-card{display:none}
.quick-grid{grid-template-columns:repeat(2,1fr)}
.doctor-wrap{grid-template-columns:1fr}
.split{grid-template-columns:1fr}
.split-img{min-height:320px;max-height:420px}
.split-content{padding:56px 36px}
}
@media(max-width:820px){
/* SCOS 2026-08-26: `.container{padding:0 20px}` — ramasita din redesign-ul
abandonat. Suprascria cei 16px de la linia 40 pe tot ce e sub 820px, deci
containerul iesea gresit exact la 375 si 768. Originalul are
`padding-inline:1rem` la TOATE breakpoint-urile (PRELUARE.md §5). */
.services-grid{grid-template-columns:1fr}
.equip-grid{grid-template-columns:1fr 1fr}
.contact-grid{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
.gallery-grid{grid-template-columns:repeat(2,1fr)}
.blog-grid{grid-template-columns:1fr}
.testi-grid-static{grid-template-columns:1fr}
}
@media(max-width:480px){
.hero-stats{grid-template-columns:1fr}
.stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
.quick-grid{grid-template-columns:1fr}
.equip-grid{grid-template-columns:1fr}
}
/* ============ v4 PHP — logo imagine, crossfade doctor, harta ============ */
/* doctor — doua poze crossfade ca pe original */
.doctor-img-stack{position:relative;aspect-ratio:3/3.8}
.doctor-img-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.doctor-img-stack img:last-child{opacity:0;animation:docFade 9s ease-in-out infinite}
@keyframes docFade{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.doctor-img-stack img:last-child{animation:none}}
/* butoane harta cu iconite ca pe original */
.map-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.btn-map{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border:1.5px solid var(--border);background:var(--bg-card);font-size:14px;font-weight:600;color:var(--text);transition:all var(--trans)}
.btn-map:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-map img{width:26px;height:26px;object-fit:contain}
.map-embed{width:100%;height:430px;border:0;display:block}
[data-theme="dark"] .map-embed{filter:invert(.88) hue-rotate(180deg)}
/* lindberg card cu logo svg suprapus */
.lindberg-logo-overlay{position:absolute;top:20px;left:24px;height:26px;width:auto;z-index:2;filter:brightness(0) invert(1);opacity:.95}
/* casa regala standalone */
/* Logoul Casei Regale, in capul sectiunii de parteneri (`mb-10 flex justify-center`).
Latime maxima 140px, ca in original; fara filtru de inversare pe dark — acela
era o adaugire a noastra. */
.casa-regala-loc{margin-bottom:40px;display:flex;justify-content:center}
.casa-regala-loc img{height:auto;width:100%;max-width:140px;object-fit:contain}
/* ============ v6 — HERO 1:1 (imagine plina, titlu jos-stanga) ============ */
/* HERO — masurat pe original la 1440x900:
h1 x=45 (container 12.5 + 16 padding + 16 px-4), 96px/120px, Bitter 400, w=900
p x=45, 20px/32.5px, Inter 300, alb .9
sectiunea = min-height:100vh, continutul lipit jos (items-end) */
.oft-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
.oft-hero-pic,.oft-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.oft-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.9) 100%);z-index:1}
.oft-hero-content{position:relative;z-index:2;width:100%;padding-top:132px;padding-bottom:48px}
.oft-hero-box{max-width:900px;text-align:left;margin-inline:16px}
.oft-hero-title{font-family:var(--ff-disp);font-size:60px;line-height:1.25;font-weight:400;color:#fff;margin-bottom:20px;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.oft-hero-text{font-size:16px;line-height:1.625;font-weight:300;color:rgba(255,255,255,.9);margin-bottom:48px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.oft-hero-btns{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
@media(min-width:640px){
.oft-hero-title{font-size:72px}
.oft-hero-text{font-size:18px}
.oft-hero-btns{flex-direction:row;align-items:center}
}
@media(min-width:768px){
.oft-hero-content{padding-top:150px;padding-bottom:64px}
.oft-hero-title{font-size:96px}
.oft-hero-text{font-size:20px}
}
@media(min-width:1024px){.oft-hero-content{padding-top:168px;padding-bottom:80px}}
/* ============ FEAT ROWS — Despre/Servicii/Preturi/Contact (randuri mari alternate) ============ */
/* Masurat pe original la 1440x900 (dark):
sectiune: margin-top 12px / 40px de la 1024, fara padding
grila: row-gap 40px / 56px de la 1024
rand: articolul e cat sectiunea; scale+opacity se aplica PE ARTICOL
caseta: w = calc(100vw*.58), h = w*0.75 (raport 0.75, nu 0.63)
gap: 24 / 40 (640) / 64 (768) / 128 (1024)
titlu: Bitter 400, 36 / 48 (640) / 60 (768), line-height 1
text: rand PAR = stanga, rand IMPAR = dreapta (era invers) */
.feat-rows{margin-top:12px;padding:0}
.feat-rows-wrap{display:grid;grid-template-columns:1fr;row-gap:40px;width:100%;margin:0 auto}
.feat-row{position:relative;transform:scale(.84);opacity:.15;will-change:transform,opacity}
.feat-row-line{display:flex;align-items:center;gap:24px}
.feat-row-rev .feat-row-line{flex-direction:row-reverse}
.feat-row-img{position:relative;flex:0 0 auto;width:calc(100vw * 0.58);height:calc(100vw * 0.58 * 0.75);overflow:hidden}
.feat-row-shade{position:absolute;inset:0;background:rgba(0,0,0,.15)}
.feat-row-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left}
.feat-row-rev .feat-row-body{align-items:flex-end;text-align:right}
.feat-row-title{font-family:'Bitter',Georgia,serif;font-size:36px;font-weight:400;color:var(--text);line-height:1;margin-bottom:14px}
@media(min-width:640px){.feat-row-line{gap:40px}.feat-row-title{font-size:48px}}
@media(min-width:768px){.feat-row-line{gap:64px}.feat-row-title{font-size:60px}}
@media(min-width:1024px){
.feat-rows{margin-top:40px}
.feat-rows-wrap{row-gap:56px}
.feat-row-line{gap:128px}
.feat-row-img{width:calc((100vw - 4rem) * 0.58);height:calc((100vw - 4rem) * 0.58 * 0.75)}
}
.feat-row-link{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:1px solid rgba(0,0,0,.2);font-size:16px;font-weight:300;line-height:18px;color:var(--link-dark);transition:all .3s ease}
[data-theme="dark"] .feat-row-link{border-color:rgba(255,255,255,.3)}
.feat-row-link i{font-style:normal;transition:transform .3s ease}
.feat-row-link:hover{gap:14px;border-color:var(--link-dark);background:rgba(0,0,0,.03)}
[data-theme="dark"] .feat-row-link:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.5)}
.feat-row-link:hover i{transform:translateX(4px)}
/* Originalul NU trece randul pe coloana la mobil: la 375 randul e 315x137,
cu imaginea si textul tot alaturi. Directia ramane pe rand la orice latime. */
/* ============ BENZI full-width: Despre ochi / Lindberg / Medicina ============ */
/* Cele trei benzi — in original sunt trei sectiuni SEPARATE, cu cardul
inset (nu pe toata latimea) si spatiu intre ele. Masurat la 2560: card
2150x958 (raport 2.24), latime 84% din fereastra, sectiune 797px cu
padding 112px. Reprodus proportional. */
.band-stack{display:block;padding:112px 0}
.band{
position:relative;
width:min(84vw,1210px); margin:0 auto;
aspect-ratio:2.24; min-height:0;
display:flex; align-items:flex-end; overflow:hidden;
}
.band + .band{margin-top:145px}
.band img:first-of-type{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1s ease}
.band:hover img:first-of-type{transform:scale(1.05)}
.band-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.72) 100%);z-index:1}
.band-txt{position:relative;z-index:3;padding-top:60px;padding-bottom:60px;color:#fff;width:100%}
.band-txt h3{font-family:var(--ff-disp);font-size:clamp(30px,4.2vw,60px);font-weight:400;margin-bottom:8px;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.band-txt p{font-size:clamp(15px,1.4vw,19px);color:rgba(255,255,255,.88);margin-bottom:14px}
.band-link{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.9);transition:letter-spacing .3s ease}
.band-link:hover{letter-spacing:.18em}
.band-logo{position:absolute;top:36px;left:50%;transform:translateX(-50%);height:34px;width:auto;z-index:3;filter:brightness(0) invert(1)}
.band-blazon{position:absolute;top:32px;right:6vw;height:110px;width:auto;z-index:3;opacity:.92}
@media(max-width:600px){.band-blazon{height:70px;top:24px}}
/* badge doctor — „Peste [N] operatii reusite" pe 3 randuri, cifra aurie */
.doctor-badge-pre{font-size:15px;font-weight:500;color:rgba(255,255,255,.85);letter-spacing:.03em}
.doctor-badge-num{font-family:var(--ff-disp);font-size:clamp(40px,5vw,64px);font-weight:700;color:#F2DC9A;line-height:1.1}
.doctor-badge .doctor-badge-lbl{font-size:15px;font-weight:500;color:rgba(255,255,255,.85);text-transform:none;letter-spacing:.03em}
/* card-grid-3 + info-card (parteneri) */
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.info-card{background:var(--bg-card);border:1px solid var(--border);padding:32px 26px;transition:transform .4s ease,box-shadow .4s ease}
.info-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,28,53,.1)}
.info-card h3{font-family:var(--ff-disp);font-size:20px;color:var(--text);margin-bottom:10px}
.info-card p{font-size:14px;color:var(--muted);line-height:1.7}
@media(max-width:820px){.card-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.card-grid-3{grid-template-columns:1fr}}
/* ============ v7 — corectii: butoane navy, harta full, logo parteneri, scroll-zoom ============ */
/* Butoane in ton cu logoul (navy), nu auriu */
/* Primar — masurat: fara bordura, 213x56, hover doar pe fundal (bg-primary/80). */
.btn-primary{background:var(--primary);color:#fff;border:none;transition:background .3s ease-in-out}
.btn-primary:hover{background:rgba(54,82,245,.8)}
[data-theme="dark"] .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
[data-theme="dark"] .btn-primary:hover{background:var(--primary-hover)}
/* buton alb (pentru sectiuni cu fundal navy) — ton albastru la text */
.btn-white{background:#fff;color:var(--primary);border:1px solid #fff;transition:background .3s ease,transform .3s ease}
.btn-white:hover{background:#E9EEF5;transform:translateY(-2px)}
/* Harta lata cat pagina (full-bleed, iese din container).
`100vw` e INTENTIONAT, nu o scapare: originalul foloseste `w-screen` pe
iframe (`lg:left-1/2 ... w-screen`) si masoara x=-7.5, w=1440 pe un continut
de 1425 — adica depaseste 7.5px de fiecare parte, exact ca aici.
Masurat pe www.oftalmestet.ro la 1440x900, 2026-08-26.
⚠️ Nu se "repara" in width:100%. Bara de derulare orizontala de 8px de pe
homepage exista si in original (scrollWidth 1433 vs clientWidth 1425), unde
vine din wrapperele `w-screen` ale sectiunilor full-bleed. S-a incercat o
data corectura si a produs abatere de la original, nu aliniere. */
.map-fullwidth{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.map-embed{width:100%;height:430px;border:0;display:block} /* masurat pe original */
/* Logo parteneri mai mari + carduri mai aerisite */
.info-card .partner-logo-wrap{height:110px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.info-card .partner-logo-wrap img{max-height:88px;max-width:210px;width:auto;object-fit:contain}
/* SCROLL-ZOOM pe randuri — 3 niveluri imbricate, ca in bundle-ul originalului:
.feat-row scale .84->1 + opacity .15->1 (pe ARTICOL, nu pe imagine)
.feat-row-inner clip-path .72->1 + scale .9->1, origine stanga/dreapta
.feat-row-parallax translate3d(0, -60..60px, 0), casetat -64px sus/jos */
.feat-row-img{position:relative;overflow:hidden}
.feat-row-inner{position:absolute;inset:0;transform:scale(.9);transform-origin:left center;clip-path:inset(0 28% 0 0);will-change:clip-path,transform}
.feat-row-rev .feat-row-inner{transform-origin:right center;clip-path:inset(0 0 0 28%)}
.feat-row-parallax{position:absolute;top:-64px;bottom:-64px;left:0;right:0;will-change:transform}
.feat-row-parallax img{width:100%;height:100%;object-fit:cover;object-position:center}
@media(prefers-reduced-motion:reduce){
.feat-row{transform:scale(1)!important;opacity:1!important}
.feat-row-inner{transform:scale(1)!important;clip-path:none!important}
.feat-row-parallax{transform:none!important}
}
/* Footer logo — comuta cu tema (inchis pe light, alb pe dark) */
.footer-logo-w{display:none}
.footer-logo-d{display:block}
[data-theme="dark"] .footer-logo-w{display:block}
[data-theme="dark"] .footer-logo-d{display:none}
.footer-logo-img{height:40px;width:auto;margin-bottom:14px}
/* ============ DR. SCHMITZER — hero full-bleed (identic cu oftalmestet.ro) ============ */
/* In original nu e full-bleed: e un card inset, la fel ca cele trei benzi.
Masurat la 2560: 2150x1399 (raport 1.537), x=197 — adica 84% din latime. */
.doctor-hero{position:relative;width:min(84vw,1210px);margin:78px auto;aspect-ratio:1.537;min-height:0;display:flex;align-items:flex-end;overflow:hidden}
.doctor-hero-pic,.doctor-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.doctor-hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.9) 100%)}
.doctor-hero-content{position:relative;z-index:2;width:100%;padding-bottom:64px;padding-top:120px}
.doctor-hero-box{max-width:640px;text-align:left}
.doctor-hero-name{font-family:'Bitter',Georgia,serif;font-size:clamp(40px,5.6vw,72px);font-weight:400;color:#fff;line-height:1.08;margin-bottom:24px;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.doctor-hero-stat{font-family:'Bitter',Georgia,serif;font-size:clamp(44px,5.6vw,72px);font-weight:400;color:#F2DC9A;line-height:1;margin-bottom:4px}
.doctor-hero-statlbl{font-family:var(--ff-body);font-size:16px;font-weight:500;color:rgba(255,255,255,.9);letter-spacing:.02em;margin-bottom:32px}
/* buton glass: border alb 30%, fundal negru 50%, fara radius */
.doctor-hero-btn{display:inline-block;padding:16px 32px;font-family:var(--ff-body);font-size:14px;font-weight:600;color:#fff;
background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);transition:background .3s ease,border-color .3s ease}
.doctor-hero-btn:hover{background:rgba(0,0,0,.7);border-color:rgba(255,255,255,.6)}
@media(max-width:600px){
.doctor-hero{min-height:80vh}
.doctor-hero-content{padding-bottom:44px}
}
/* ============ TESTIMONIALE — 1 card centrat, cross-fade automat, fundal alb ============ */
.testi-sec{background:#fff;padding:80px 0 64px} /* masurat pe original */
[data-theme="dark"] .testi-sec{background:var(--bg)}
/* original: blocul de titlu + spatiul pana la stiva = 522px */
/* Steaua e un bloc de 96px: intr-un container cu `text-align:center` NU se
centreaza singura, trebuie `margin:0 auto`. Fara asta fugea in coltul din
stanga-sus. Golul de sub titlu: masurat pe original 146px (titlu jos → card
sus); aveam 294, adica dublu. */
.testi-head{text-align:center;margin-bottom:56px}
.testi-head .pac-stea{margin:0 auto}
@media (min-width:768px){.testi-head{margin-bottom:146px}}
.testi-rating{font-size:18px;color:#F2B01E;letter-spacing:2px;margin-bottom:16px}
.testi-rating span{color:var(--text);font-weight:600;font-family:var(--ff-body);margin-left:6px}
.testi-eyebrow{display:block;font-family:var(--ff-body);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.testi-title{font-family:'Bitter',Georgia,serif;font-size:clamp(28px,3.6vw,36px);font-weight:400;color:#1A1C20;line-height:1.2}
[data-theme="dark"] .testi-title{color:var(--text)}
/* scena — carduri stivuite absolut, cross-fade */
/* Scena. Masurat pe original la 1440: latimea e 992px, nu 680 — clasa
`max-w-none` de pe acelasi element o bate pe `max-w-[680px]` de la 1024 in sus.
Inaltimea e FIXA (460 / 500 / 520), nu `min-height`: de asta cardurile din
spate ies mereu la fel in original, indiferent de cat de lung e textul. */
.testi-stage{position:relative;max-width:680px;margin:0 auto;height:460px}
@media (min-width:640px){.testi-stage{height:500px}}
@media (min-width:768px){.testi-stage{height:520px}}
/* Latimea reala a scenei vine de la containerul ei din original:
`w-[calc(100vw-2rem)] md:w-[54rem] lg:w-[62rem]` — adica 864px de la 768 si
992px de la 1024. `max-w-none` doar deblocheaza plafonul de 680. */
@media (min-width:768px){.testi-stage{max-width:864px}}
@media (min-width:1024px){.testi-stage{max-width:992px}}
/* Carduri stivuite — geometria e pusa din JS prin --s si --ty (formula
masurata pe original). Aici doar forma cardului si tranzitia de 700ms.
Cardurile sunt albe in AMBELE teme, ca in original. */
/* Cardul: `inset:0` cu inaltime fixa de la scena, NU `height:max-content`.
Cu inaltime variabila, cardurile din spate ieseau imprevizibil — la unele
testimoniale deloc, la altele cu 93px. Originalul are card de inaltime fixa
si text trunchiat la 5 randuri.
`transform-origin` e 50% 50% in original, nu 50% 0. */
.testi-slide{
position:absolute; inset:0; margin:0; height:auto;
display:flex; flex-direction:column; align-items:center; text-align:center;
background:#fff; color:#171a1f;
padding:20px;
transform:scale(var(--s,1)) translateY(var(--ty,0px));
transform-origin:50% 50%;
transition:transform .7s cubic-bezier(0,0,.2,1), opacity .7s cubic-bezier(0,0,.2,1);
will-change:transform,opacity;
pointer-events:none;
}
.testi-slide.active{pointer-events:auto}
@media(min-width:640px){.testi-slide{padding:24px}}
@media(min-width:768px){.testi-slide{padding:32px}}
.testi-stage{cursor:pointer}
/* Cardul de testimonial — corectat 2026-08-28, dupa MASURARE pe originalul
live (tema dark), nu dupa memorie. Comentariul de dinainte spunea „cardurile
sunt albe in AMBELE teme, ca in original" — fals: originalul are `bg-white`
pe light si `dark:bg-dark` pe dark.
Masurat pe www.oftalmestet.ro, tema dark:
card #1C1C1C, bordura #363636 la 80%, padding 32px
nume Inter 24px / 600 / alb
citat Inter 16px / 300 / #d8d8d8 / line-height 26px, drept (nu italic)
poza 150px, 170px de la 640, rotunda, cu inel subtire
Ce era la noi: card alb pe fundal inchis, citatul sus in Bitter italic
19-26px, poza dedesubt la 72px. Ordinea din markup e acum cea a originalului:
poza, nume, rol, apoi textul. */
.testi-slide{border:1px solid rgba(0,0,0,.1);box-shadow:0 5px 15px rgba(6,8,15,.05)}
[data-theme="dark"] .testi-slide{background:var(--bg-alt);color:#fff;
border-color:rgba(54,54,54,.8);box-shadow:0 5px 10px rgba(6,8,15,.1)}
.testi-cap{display:flex;flex-direction:column;align-items:center;text-align:center;
margin-bottom:16px}
@media(min-width:640px){.testi-cap{margin-bottom:20px}}
.testi-poza{position:relative;display:block;width:150px;height:150px;margin-bottom:16px;
overflow:hidden;border-radius:9999px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
[data-theme="dark"] .testi-poza{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.testi-poza img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(min-width:640px){.testi-poza{width:170px;height:170px}}
.testi-name{font-family:var(--ff-body);font-size:20px;font-weight:600;
letter-spacing:-.015em;color:var(--text)}
@media(min-width:640px){.testi-name{font-size:24px}}
.testi-role{font-family:var(--ff-body);font-size:14px;margin-top:8px;color:var(--muted)}
/* Originalul are `text-body-color dark:text-white/70` pe rol: pe dark e alb la
70%, nu #d8d8d8 opac. Masurat, nu presupus. */
[data-theme="dark"] .testi-role{color:rgba(255,255,255,.7)}
.testi-quote{font-family:var(--ff-body);font-size:15px;font-weight:300;font-style:normal;
line-height:1.625;color:var(--muted);margin:4px 0 0;max-width:none;
/* cardul are inaltime fixa: textul lung se taie la 5 randuri, ca in original */
display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:640px){.testi-quote{font-size:16px}}
.testi-foot{text-align:center;margin-top:clamp(40px,5vw,56px)}
.btn-testi{display:inline-block;padding:12px 32px;font-family:var(--ff-body);font-size:14px;font-weight:500;
color:var(--text);background:transparent;border:1px solid rgba(0,0,0,.2);transition:all .3s ease}
.btn-testi:hover{background:var(--text);color:#fff;border-color:var(--text)}
[data-theme="dark"] .btn-testi{border-color:rgba(255,255,255,.25)}
/* ===== Panou-citat — aliniat 1:1 la original =====
Original masurat la 1440x900: 756px inaltime, fundal #3652f5 (albastrul
paletei), titlu serif ~60px alb centrat, trei straturi animate suprapuse.
Valorile de transform si opacitate sunt cele masurate — referinta/efecte.md §1.
Albastrul e identic in ambele teme, deci panoul nu se schimba la comutare. */
.quote-band{
position:relative; isolation:isolate; overflow:hidden;
/* Originalul e `min-h-screen`, adica 100vh. Cei "84vh" masurati inainte erau
rezultatul DUPA scale(0.84) — inaltimea proprie a sectiunii e 100vh, iar
scalarea o duce la 84vh pe ecran. Vezi referinta/efecte-formule.md F2. */
min-height:100vh;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:110px 32px; text-align:center;
background:var(--primary);
}
.quote-mesh,.quote-mesh-2,.quote-grain{position:absolute;inset:0;z-index:-1;pointer-events:none}
.quote-mesh{
background:
radial-gradient(60% 55% at 22% 28%, rgba(255,255,255,.28), transparent 62%),
radial-gradient(55% 50% at 78% 70%, rgba(0,0,0,.22), transparent 60%);
animation:quote-mesh 24s ease-in-out infinite alternate;
}
.quote-mesh-2{
opacity:.95;
background:
radial-gradient(70% 60% at 70% 22%, rgba(159,185,255,.30), transparent 66%),
radial-gradient(50% 45% at 30% 82%, rgba(0,0,0,.18), transparent 58%);
animation:quote-mesh-2 31s ease-in-out infinite alternate;
}
.quote-grain{
opacity:.43; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
animation:quote-grain 19s steps(6,jump-none) infinite alternate;
}
@keyframes quote-mesh{from{transform:scale(1) rotate(0)}to{transform:scale(1.064) rotate(.86deg)}}
@keyframes quote-mesh-2{from{transform:scale(1.097) rotate(.02deg)}to{transform:scale(1) rotate(-.4deg)}}
@keyframes quote-grain{from{transform:translate(0,0)}to{transform:translate(3.1px,-3.1px)}}
.quote-band blockquote{
font-family:var(--ff-disp); font-style:normal;
font-size:clamp(30px,4.2vw,60px); font-weight:400;
color:#fff; max-width:900px; margin:0 auto 24px; line-height:1.15;
}
.quote-band cite{
font-family:var(--ff-body); font-style:normal;
font-size:clamp(15px,1.4vw,20px); font-weight:300; letter-spacing:normal;
text-transform:none; color:rgba(255,255,255,.8);
}
@media (prefers-reduced-motion:reduce){
.quote-mesh,.quote-mesh-2,.quote-grain{animation:none}
}
/* Sectiunea hartii — paddingul din original (64 sus / 32 jos), nu cel generic
de 100/100. Override local ca sa nu atingem .section, folosit pe tot site-ul. */
.sec-harta{padding:64px 0 32px}
/* =========================================================================
Aliniere 1:1 pe latimi — valori masurate pe original la 1440 / 768 / 375.
Regula de baza e mobile-first; blocurile de mai jos suprascriu ce difera.
========================================================================= */
/* ---------- sub 1024px: cardurile devin mai inalte, gap-urile scad ---------- */
@media (max-width:1023px){
/* grila: rand 36.5vw (masurat 281/768 si 137/375), row-gap 40px */
.feat-row-img{height:36.5vw}
.feat-row{margin-bottom:40px}
.feat-rows-wrap{padding:106px 2rem}
.feat-rows{padding:0}
/* doctorul: sectiunea 995px la 768 -> card 835 + 2x80 marja */
.doctor-hero{aspect-ratio:.772;margin:80px auto}
/* benzile: sectiune 2048 la 768 -> 3x576 + 2x80 gap + 2x80 padding */
.band{aspect-ratio:1.12}
.band + .band{margin-top:80px}
.band-stack{padding:80px 0}
/* testimoniale: 64/48, stiva 520 */
.testi-sec{padding:64px 0 48px}
/* parteneri: sectiune 439 = 28+56 padding + 2 piste de (88 logo + 2x45) */
/* harta */
.sec-harta{padding:56px 0 28px}
}
/* ---------- sub 640px ---------- */
@media (max-width:639px){
.feat-rows-wrap{padding:52px 1rem}
/* doctorul: sectiunea 790 -> card 662 + 2x64 */
.doctor-hero{aspect-ratio:.476;margin:64px auto}
/* benzile: 1635 -> 3x460 + 2x64 + 2x64 */
.band{aspect-ratio:.685}
.band + .band{margin-top:64px}
.band-stack{padding:64px 0}
/* testimoniale: 56/40, stiva 460 */
.testi-sec{padding:56px 0 40px}
.testi-stage{min-height:460px}
.testi-head{margin-bottom:56px}
/* parteneri: 24/48, logo 64px */
.sec-harta{padding:48px 0 24px}
}
/* Banda de parteneri — paddingul masurat pe original la fiecare latime. */
/* Originalul: `pt-6 pb-12 md:pt-7 md:pb-14 lg:pt-8 lg:pb-16`, cu `px-4 md:px-10`
pe containerul interior. */
.sec-parteneri{padding:24px 16px 48px}
@media(min-width:768px){.sec-parteneri{padding:28px 40px 56px}}
@media(min-width:1024px){.sec-parteneri{padding:32px 40px 64px}}
/* ---------- corectii masurate la 375 ---------- */
@media (max-width:639px){
/* Grila: in original randul are exact inaltimea imaginii (137px la 375),
deci textul trebuie sa incapa langa ea, nu sub. Coloana de text devine
flexibila si tipografia scade. */
.feat-row{align-items:center}
.feat-row-body{width:auto;flex:1 1 0;min-width:0}
.feat-row-title{font-size:22px;line-height:1.15;margin-bottom:8px}
.feat-row-link{padding:6px 12px;font-size:13px}
/* Testimoniale: 1020 = 56+40 padding + bloc titlu + stiva 460 */
.testi-head{margin-bottom:120px}
/* Banda: 379 = 24+48 padding + 2 piste de 154 (64 logo + 2x45) */
.sec-harta{padding:32px 0 16px}
}
/* Harta: 430px de la 1024 in sus, 360px sub 640 (masurat pe original la 375). */
@media (max-width:639px){
.map-embed{height:360px}
.sec-harta{padding:48px 0 24px}
}
/* ============ PAGINI CU FORMULAR (/programare) ============
Valorile vin din clasele Tailwind ale originalului, convertite:
sectiune pt-28 pb-16 / md pt-32 pb-20 / lg pt-36 pb-28 = 112/64, 128/80, 144/112
h1 text-4xl sm:text-5xl font-bold, mb-6 = 36 / 48px, 700, 24px
lead text-base leading-relaxed mb-10 = 16px/1.625, 40px
grupuri space-y-10 = 40px
h2 text-2xl font-bold mb-4 = 24px, 700, 16px
grid gap-4, md:grid-cols-2 = 16px
eticheta text-sm mb-2 = 14px, 8px
camp px-4 py-3, border black/15 (dark white/20) = 12px 16px
buton bg-primary px-8 py-4 text-base font-medium = 16px 32px, 16px/500 */
.pg-form{padding:112px 0 64px}
.pg-form-inner{padding-inline:16px}
.pg-form-title{font-family:var(--ff-body);font-size:36px;line-height:1.2;font-weight:700;color:var(--text);margin-bottom:24px}
.pg-form-lead{font-size:16px;line-height:1.625;color:var(--muted);margin-bottom:40px;max-width:70ch}
@media(min-width:640px){.pg-form-title{font-size:48px}}
@media(min-width:768px){.pg-form{padding:128px 0 80px}}
@media(min-width:1024px){.pg-form{padding:144px 0 112px}}
.frm{display:flex;flex-direction:column;gap:40px}
.frm-grup{display:block}
.frm-h2{font-family:var(--ff-body);font-size:24px;line-height:1.3;font-weight:700;color:var(--text);margin-bottom:16px}
.frm-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.frm-grid-2{grid-template-columns:1fr 1fr}.frm-span2{grid-column:span 2}}
.frm-min0{min-width:0}
.frm-eticheta{display:block;font-size:14px;line-height:1.4;color:var(--text);margin-bottom:8px}
.frm-camp{box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;
padding:12px 16px;font-family:var(--ff-body);font-size:16px;line-height:24px;color:var(--text);
background:transparent;border:1px solid rgba(0,0,0,.15);border-radius:0;outline:none;
transition:border-color .2s ease}
[data-theme="dark"] .frm-camp{border-color:rgba(255,255,255,.2)}
.frm-camp:focus{border-color:var(--primary)}
.frm-camp:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.frm-textarea{resize:none;min-height:120px}
.frm-bloc{margin-top:24px}
@media(min-width:768px){.frm-bloc{margin-top:32px}}
.frm-optiuni{display:flex;align-items:center;gap:24px}
.frm-optiune{display:inline-flex;align-items:center;gap:8px;color:var(--text);cursor:pointer}
.frm-contact{margin-top:24px;display:flex;flex-direction:column;gap:12px;
font-size:16px;line-height:1.625;font-weight:500;color:var(--muted)}
@media(min-width:768px){.frm-contact{margin-top:32px}}
.frm-contact-rand{display:flex;align-items:flex-start;gap:12px}
.frm-icon{margin-top:2px;width:20px;height:20px;flex-shrink:0;color:rgba(0,0,0,.7)}
[data-theme="dark"] .frm-icon{color:rgba(255,255,255,.7)}
.frm-link{color:var(--primary)}
.frm-link:hover{text-decoration:underline}
.frm-trimite{display:inline-block;width:100%;padding:16px 32px;border:none;border-radius:0;
font-family:var(--ff-body);font-size:16px;line-height:24px;font-weight:500;color:#fff;
background:var(--primary);cursor:pointer;transition:background .3s ease}
.frm-trimite:hover{background:rgba(54,82,245,.9)}
.frm-trimite:disabled{cursor:not-allowed;opacity:.6}
@media(min-width:768px){.frm-trimite{width:auto}}
/* Stari de validare — server-side, deci se vad si fara JS. */
.frm-invalid{border-color:#e40014}
[data-theme="dark"] .frm-invalid{border-color:#ff6568}
.frm-eroare{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:#e40014}
[data-theme="dark"] .frm-eroare{color:#ff6568}
.frm-eroare-sus{margin-bottom:24px;padding:14px 16px;font-size:16px;line-height:1.5;
color:#e40014;border:1px solid #e40014;background:rgba(228,0,20,.06)}
[data-theme="dark"] .frm-eroare-sus{color:#ff6568;border-color:#ff6568;background:rgba(255,101,104,.08)}
.frm-ok{margin-bottom:24px;padding:14px 16px;font-size:16px;line-height:1.5;
color:#008138;border:1px solid #00a544;background:rgba(0,165,68,.08)}
[data-theme="dark"] .frm-ok{color:#7bf1a8;border-color:#00a544;background:rgba(0,165,68,.12)}
/* Honeypot — scos din flux, invizibil, netabulabil. Nu contine text. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* =========================================================================
ANTET + SUBSOL — refacute 1:1, 2026-08-26
Toate valorile sunt MASURATE pe www.oftalmestet.ro (Chrome DevTools),
nu estimate. Detaliile si sursa fiecarei cifre: verificare-2026-08-26.md.
========================================================================= */
/* ---------- ANTET ---------- */
/* In repaus: absolute + transparent, inaltime 154.8px (padding 40 pe logo).
Lipit la scrollY >= 80: fixed, 98.8px (padding 12), fundal #242424 pe dark
sau alb 80% pe light, backdrop-blur(4px). */
.site-header{position:absolute;top:0;left:0;width:100%;z-index:40;background:transparent;
transition:background .3s ease,backdrop-filter .3s ease}
.site-header.lipit{position:fixed;z-index:9999;background:var(--hd-lipit-bg);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* Paginile fara hero propriu au primit un timp fundal OPAC, ca antetul alb sa
nu dispara peste continut deschis. Masurat pe 2026-08-28, asta taia 11px din
varful lui
: originalul pune titlul la y=144, iar antetul are 155px si e
`absolute` — deci in original titlul TRECE PE SUB antet, care e transparent.
Cu fundal opac, la noi era acoperit.
Acum fundalul e transparent, ca in original. Ramane doar partea din abaterea
deliberata care tine de legibilitate: logoul si controalele trec pe varianta
inchisa (regula de mai jos, comuna cu antetul lipit). */
.site-header.fara-hero{background:transparent}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hdr-logo-box{width:233px;max-width:100%;flex-shrink:0}
.hdr-logo{display:block;width:100%;padding:40px 0;transition:padding .3s ease}
.site-header.lipit .hdr-logo{padding:12px 0}
.hdr-logo-img{width:210px;height:auto;max-width:100%}
/* Logourile din antet si din overlay-ul „Pagini" NU se comuta din CSS: sunt
cate UN singur , cu `src` schimbat din JS (`actualizeazaLogouri` in
site.js) — exact ca originalul, unde React face acelasi lucru la hidratare.
Motivul e regula 3: doua comutate din CSS ar face pagina sa aiba mai
multe imagini decat originalul. Subsolul, in schimb, chiar are doua
in original, deci acolo comutarea ramane in CSS. */
.hdr-ctrl{display:flex;align-items:center;gap:10px}
/* „Pagini" — 66x40, 16px/300, doar pe desktop. Chevron 16px, gap 4px. */
.hdr-pagini{display:none;align-items:center;gap:4px;height:40px;padding:8px 0;
background:none;border:0;cursor:pointer;font-family:var(--ff-body);
font-size:16px;font-weight:300;line-height:24px;color:#fff;transition:color .3s ease}
.site-header.lipit .hdr-pagini,.site-header.fara-hero .hdr-pagini{color:var(--hd-text)}
.hdr-pagini .ic-chevron{transition:transform .3s ease}
.hdr-pagini[aria-expanded="true"] .ic-chevron{transform:rotate(180deg)}
/* comutator tema: 40x40 sub 768, 48x48 peste; iconita 28x28 */
.hdr-tema{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
padding:0;background:none;border:0;cursor:pointer;color:#fff;transition:color .3s ease}
.site-header.lipit .hdr-tema,.site-header.fara-hero .hdr-tema{color:var(--hd-text)}
.hdr-tema .ic-soare{display:none}
.hdr-tema .ic-luna{display:block}
[data-theme="dark"] .hdr-tema .ic-soare{display:block}
[data-theme="dark"] .hdr-tema .ic-luna{display:none}
.hdr-hamb{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
padding:0;background:none;border:0;cursor:pointer;color:#fff;transition:color .3s ease}
.site-header.lipit .hdr-hamb,.site-header.fara-hero .hdr-hamb{color:var(--hd-text)}
@media(min-width:640px){ .hdr-logo-img{width:250px} }
@media(min-width:768px){ .hdr-tema{width:48px;height:48px} }
@media(min-width:1024px){
.hdr-logo-box{width:368px}
.hdr-logo-img{width:380px}
.hdr-ctrl{gap:12px}
.hdr-pagini{display:flex}
.hdr-hamb{display:none}
}
/* ---------- meniul mobil (sub 1024px) ---------- */
.nav-mobil{position:absolute;top:100%;left:0;width:100%;height:calc(100dvh - 7rem);
background:var(--bg-alt);padding:0 24px;overflow-y:auto;z-index:30;
opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
[data-theme="dark"] .nav-mobil{background:var(--gray-dark)}
.nav-mobil.deschis{opacity:1;visibility:visible}
.nav-mobil-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:100%;padding:48px 0;text-align:center}
.nav-mobil-lista{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:384px}
.nav-mobil-link{display:flex;padding:8px 0;font-size:16px;font-weight:300;line-height:24px;
color:var(--text);opacity:.7;transition:opacity .3s ease,color .3s ease}
.nav-mobil-link:hover{opacity:1;color:var(--primary)}
.nav-mobil-link.activ{color:var(--primary);opacity:1;text-decoration:underline;
text-decoration-thickness:2px;text-underline-offset:8px}
@media(min-width:1024px){ .nav-mobil{display:none} }
/* ---------- overlay „Pagini" ---------- */
.pagini-overlay{position:fixed;inset:0;z-index:50;overflow-y:auto;
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
.pagini-overlay.deschis{opacity:1;visibility:visible;pointer-events:auto}
.pagini-fundal{position:fixed;inset:0;background:rgba(255,255,255,.95);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
[data-theme="dark"] .pagini-fundal{background:rgba(0,0,0,.9)}
.pagini-continut{position:relative;z-index:10;display:flex;min-height:100%;
align-items:center;justify-content:center;padding-top:96px;padding-bottom:96px}
/* stranse odata cu meniul compact: 56/48 → 32/26 */
.pagini-logo{margin-bottom:32px;display:flex;justify-content:center}
.pagini-logo .hdr-logo-img{width:250px}
.pagini-linie-box{margin-bottom:26px}
/* linia in gradient, pe toata latimea ferestrei */
.pagini-linie{position:relative;left:50%;height:1px;width:100vw;transform:translateX(-50%);
background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.7),rgba(0,0,0,0))}
[data-theme="dark"] .pagini-linie{
background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0))}
/* Meniul compact cu numerotare — cerut de client pe 2026-08-28.
Inainte: 11 linkuri unul sub altul, 48px, gap 40 → overlay de 885px, care se
derula. Acum: 6 intrari principale numerotate + un rand secundar.
Forma vine din varianta veche (inc/header.php.bak), dar culorile NU: aceea
folosea paleta bleumarin/auriu, abandonata. Numerele si starea activa merg pe
`--primary`, culoarea reala a site-ului. */
.pagini-principal{display:flex;flex-direction:column;gap:2px;width:100%;max-width:620px;margin:0 auto}
.pagini-link{display:flex;align-items:baseline;gap:18px;padding:8px 0;
font-family:var(--ff-disp);font-size:28px;font-weight:400;line-height:1.15;
color:var(--text);transition:color .3s ease,padding-left .3s ease;
opacity:0;transform:translateY(24px)}
.pagini-overlay.deschis .pagini-link{opacity:1;transform:none;
transition:opacity .6s ease var(--d),transform .6s ease var(--d),color .3s ease,padding-left .3s ease}
.pagini-link:hover,.pagini-link:focus-visible{color:var(--primary);padding-left:14px}
.pagini-link.activ{color:var(--primary)}
[data-theme="dark"] .pagini-link{color:rgba(255,255,255,.85)}
[data-theme="dark"] .pagini-link:hover{color:#fff}
.pagini-nr{font-family:var(--ff-body);font-size:13px;font-weight:500;letter-spacing:.1em;
color:var(--primary);opacity:.75;flex-shrink:0;min-width:32px}
.pagini-sep{height:1px;width:100%;max-width:620px;margin:20px auto 22px;
background:rgba(0,0,0,.14)}
[data-theme="dark"] .pagini-sep{background:rgba(255,255,255,.14)}
.pagini-secundar{display:flex;flex-wrap:wrap;gap:10px 26px;width:100%;max-width:620px;margin:0 auto}
.pagini-slink{font-family:var(--ff-body);font-size:14px;font-weight:500;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);transition:color .3s ease;
opacity:0;transform:translateY(16px)}
.pagini-overlay.deschis .pagini-slink{opacity:1;transform:none;
transition:opacity .5s ease var(--d),transform .5s ease var(--d),color .3s ease}
.pagini-slink:hover,.pagini-slink:focus-visible,.pagini-slink.activ{color:var(--primary)}
body.pagini-deschis{overflow:hidden}
/* Fara animatie de intrare pentru cine a cerut miscare redusa — altfel meniul
ramane invizibil daca tranzitiile nu ruleaza. */
@media(prefers-reduced-motion:reduce){
.pagini-link,.pagini-slink{opacity:1!important;transform:none!important;
transition:color .3s ease!important}
}
@media(min-width:640px){
.pagini-logo .hdr-logo-img{width:280px}
.pagini-link{font-size:34px}
}
@media(min-width:1024px){
.pagini-logo .hdr-logo-img{width:320px}
.pagini-link{font-size:40px}
.pagini-principal,.pagini-sep,.pagini-secundar{max-width:680px}
}
/* ---------- SUBSOL ---------- */
/* Masurat: 1425x469.9, fundal #242424 pe dark, padding-top 96px la >=1024. */
.site-footer{position:relative;z-index:10;background:var(--bg-alt);padding:64px 0 0;overflow:hidden}
[data-theme="dark"] .site-footer{background:var(--gray-dark)}
@media(min-width:768px){ .site-footer{padding-top:80px} }
@media(min-width:1024px){ .site-footer{padding-top:96px} }
/* `-mx-4` din original: randul iese cu 16px in fiecare parte, iar coloanele isi
pun la loc `px-4`. Fara asta continutul incepe la x=44.5 in loc de 28.5, iar
coloanele ies 196px in loc de 201.3 — destul cat „Politica de
confidențialitate" (199px) sa se rupa pe doua randuri si subsolul sa creasca
cu ~14px. Masurat. */
.footer-rand{display:flex;flex-wrap:wrap;margin-inline:-16px}
.footer-col-brand{width:100%;padding:0 16px}
.footer-col{width:100%;padding:0 16px}
.footer-brand-box{margin-bottom:48px;max-width:360px}
.footer-col-box{margin-bottom:48px}
@media(min-width:640px){ .footer-col{width:50%} }
@media(min-width:768px){ .footer-col-brand{width:50%} .footer-col{width:50%} }
@media(min-width:1024px){
.footer-col-brand{width:33.333333%}
.footer-col{width:16.666667%}
.footer-brand-box,.footer-col-box{margin-bottom:64px}
}
@media(min-width:1280px){
.footer-col-brand{width:41.666667%}
.footer-col{width:16.666667%}
}
/* Originalul are `mb-8 inline-block`, deci 32px marja PLUS spatiul de linie de
sub un inline-block. Masurat pe original: eticheta incepe la y=194.9, adica
96 (logo) + 60.9 (inaltime logo) + 38. La noi strutul liniei e alt numar,
fiindca body-ul are alt line-height — asa ca il facem `block` si scriem cei
38px explicit, ca pozitia sa nu depinda de metricile fontului. */
.footer-logo-link{display:block;margin-bottom:38px}
.footer-logo-img{width:300px;max-width:100%;height:auto}
/* subsolul comuta logoul cu tema — asa e si in original */
.footer-logo-link .logo-pe-light{display:block}
.footer-logo-link .logo-pe-dark{display:none}
[data-theme="dark"] .footer-logo-link .logo-pe-light{display:none}
[data-theme="dark"] .footer-logo-link .logo-pe-dark{display:block}
.footer-tagline{margin-bottom:36px;font-size:16px;font-weight:300;line-height:1.625;color:var(--muted)}
.footer-social{display:flex;align-items:center}
.footer-social-link{color:var(--muted);transition:color .3s ease}
.footer-social-link:hover{color:var(--primary)}
.footer-social-link + .footer-social-link{margin-left:24px}
.footer-col-titlu{margin-bottom:40px;font-family:var(--ff-disp);font-size:20px;
font-weight:500;line-height:1.4;color:var(--text)}
/* `line-height:0` pe
: linkul e inline-block, iar altfel strutul liniei din
(mostenit de la body, 1.65) adauga 1px per rand. Originalul are exact
40px intre randuri (164 / 204 / 244). */
.footer-col-box li{line-height:0}
.footer-link{display:inline-block;margin-bottom:16px;font-size:16px;font-weight:300;
line-height:1.5;color:var(--muted);transition:color .3s ease;
background:none;border:0;padding:0;font-family:var(--ff-body);cursor:pointer;text-align:left}
.footer-link:hover{color:var(--primary)}
.footer-linie{height:1px;width:100%;
background:linear-gradient(to right,transparent,#D2D8E183,transparent)}
[data-theme="dark"] .footer-linie{
background:linear-gradient(to right,transparent,#959CB183,transparent)}
.footer-jos{padding:32px 0}
.footer-jos p{text-align:center;font-size:16px;font-weight:300;line-height:1.5;color:var(--muted)}
/* cele doua ornamente SVG, z-index -1 ca in original */
.footer-orn{position:absolute;z-index:-1;line-height:0}
.footer-orn-sus{right:0;top:56px}
.footer-orn-jos{left:0;bottom:96px}
/* =========================================================================
ECHIPA — /despre-noi
Valori masurate pe original; singura abatere e numarul de coloane:
3 in loc de 4, decizie client 2026-08-26 (9 oameni, 3 randuri egale,
in loc de 4 + 4 + 1 cu ultimul singur pe rand).
========================================================================= */
.sec-echipa{padding:0 0 64px}
@media(min-width:768px){ .sec-echipa{padding-bottom:80px} }
@media(min-width:1024px){ .sec-echipa{padding-bottom:112px} }
/* „Echipa Oftalmestet" — al doilea cuvant mai gros, ca in original */
.echipa-titlu{margin-bottom:40px;font-family:var(--ff-disp);font-size:30px;
font-weight:500;line-height:1.2;color:var(--text)}
.echipa-titlu span{font-weight:700}
@media(min-width:640px){ .echipa-titlu{font-size:36px} }
@media(min-width:768px){ .echipa-titlu{font-size:45px} }
.echipa-grila{display:grid;grid-template-columns:1fr;gap:24px}
/* 3 pe rand — decizia clientului: 9 oameni, 3 randuri egale.
Originalul are 2 coloane de la 380 si 4 de la 1024, adica 4+4+1 pe desktop
si 2+2+2+2+1 pe tableta — in ambele cazuri unul singur pe ultimul rand.
Trecem la 3 coloane de la 768, unde inca incap (ccard ~224px, cerc 128px).
Sub 768 raman 2 coloane: la 380-767 trei coloane ar da carduri de ~113px,
mai inguste decat cercul. Acolo ramane 2+2+2+2+1. */
@media(min-width:380px){ .echipa-grila{grid-template-columns:repeat(2,1fr)} }
@media(min-width:768px){ .echipa-grila{grid-template-columns:repeat(3,1fr)} }
.echipa-card{height:100%;width:100%;will-change:transform}
.echipa-card-inner{height:100%;background:var(--bg-alt);padding:24px;text-align:center;
box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}
[data-theme="dark"] .echipa-card-inner{background:var(--gray-dark);
box-shadow:0 2px 8px rgba(0,0,0,.35)}
.echipa-poza{position:relative;margin:0 auto 16px;width:112px;height:112px;
overflow:hidden;border-radius:9999px}
.echipa-poza img{width:100%;height:100%;object-fit:cover;object-position:center}
@media(min-width:640px){ .echipa-poza{width:128px;height:128px} }
.echipa-nume{font-family:var(--ff-disp);font-size:20px;font-weight:500;
line-height:1.4;color:var(--text);margin-bottom:0}
.echipa-rol{font-family:var(--ff-body);font-size:14px;font-weight:300;
line-height:1.5;color:var(--muted)}
/* butonul apare doar pe primul card, ca in original */
.echipa-cv{display:inline-block;margin-top:16px}
/* 8 + 24 + 8 = 40px, cat masoara butonul in original. `line-height:1.2` dadea
32.7px — inaltimea butonului nu se lasa pe seama metricilor fontului. */
.echipa-cv span{display:block;background:var(--primary);color:#fff;
padding:8px 16px;font-size:14px;font-weight:500;line-height:24px;
transition:background .3s ease}
.echipa-cv:hover span{background:var(--primary-hover)}
/* ============ v7 — HERO DE PAGINA INTERIOARA (1:1 cu originalul) ============
Componenta comuna a tuturor paginilor interioare. Structura si valorile:
referinta/efecte-lindberg.md, sectiunea „Heroul paginii".
Diferentele fata de heroul de acasa (.oft-hero): min-height 58vh in loc de
100vh, wrapper de parallax ±96px in loc de ±128px, si un wrapper cu
py-16/20/28 peste tot.
Titlul: text-5xl/6xl/7xl = 48/60/72px cu line-height 1. `.font-semibold` din
Tailwind-ul originalului e suprascris cu `font-weight:400!important`, deci
greutatea reala e 400, nu 600 — citit din CSS-ul live, nu presupus. */
.hero-int{position:relative}
.hero-int-wrap{position:relative;z-index:10;overflow:hidden;padding-top:64px;padding-bottom:64px}
@media(min-width:768px){.hero-int-wrap{padding-top:80px;padding-bottom:80px}}
@media(min-width:1024px){.hero-int-wrap{padding-top:112px;padding-bottom:112px}}
.hero-int-bleed{position:absolute;inset:0;left:50%;width:100vw;transform:translateX(-50%)}
.hero-int-parallax{position:absolute;top:-96px;bottom:-96px;left:0;right:0;will-change:transform}
.hero-int-parallax img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-int-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.9) 100%)}
.hero-int-ct{position:relative;z-index:10}
.hero-int-flex{display:flex;min-height:58vh;align-items:flex-end;justify-content:center;padding-top:132px;padding-bottom:48px}
@media(min-width:768px){.hero-int-flex{padding-top:150px;padding-bottom:64px}}
@media(min-width:1024px){.hero-int-flex{padding-top:168px;padding-bottom:80px}}
.hero-int-col{width:100%;padding-left:16px;padding-right:16px}
.hero-int-box{max-width:900px;text-align:left}
/* varianta centrata a componentei (prop, nu pagina): items-center + text-center,
fara pt/pb — exact ca ramura conditionala din original */
.hero-int-centrat .hero-int-flex{align-items:center;text-align:center;padding-top:0;padding-bottom:0}
.hero-int-centrat .hero-int-col{width:auto}
.hero-int-centrat .hero-int-box{max-width:none}
.hero-int-logo{margin-bottom:24px}
.hero-int-logo-in{position:relative;width:96px;height:96px}
.hero-int-logo-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left}
@media(min-width:640px){.hero-int-logo-in{width:112px;height:112px}}
@media(min-width:768px){.hero-int-logo-in{width:128px;height:128px}}
@media(min-width:1024px){.hero-int-logo-in{width:144px;height:144px}}
.hero-int-titlu{font-family:var(--ff-disp);font-weight:400;font-size:48px;line-height:1;
color:#fff;white-space:pre-line;margin:0;
text-shadow:0 1px 2px rgba(0,0,0,.22),0 5px 14px rgba(0,0,0,.16)}
.hero-int-titlu.are-mb{margin-bottom:20px}
@media(min-width:640px){.hero-int-titlu{font-size:60px}}
@media(min-width:768px){.hero-int-titlu{font-size:72px}}
.hero-int-btn{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.3);
background:rgba(0,0,0,.5);padding:16px 32px;font-size:16px;font-weight:500;color:#fff;
transition:all .3s ease-in-out}
.hero-int-btn:hover,.hero-int-btn:focus-visible{background:#fff;color:#000}
.hero-int-btn i{font-style:normal;margin-left:8px;position:relative;top:1px;font-size:25px;line-height:1}
.hero-int-centrat .hero-int-btn{margin-top:24px}
.hero-int-para{margin-top:48px;padding-bottom:64px}
@media(min-width:768px){.hero-int-para{padding-bottom:80px}}
@media(min-width:1024px){.hero-int-para{padding-bottom:112px}}
.hero-int-para p{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625}
@media(min-width:640px){.hero-int-para p{font-size:18px}}
/* ============ v7 — LINDBERG: textul introductiv cu „Citește tot" ============
Originalul randeaza pe server doar primele 3 paragrafe; restul de 5 apar la
apasarea butonului. Le punem pe toate in DOM si le ascundem cu `hidden` —
altfel textul lipseste din pagina pentru Google si pentru cine are JS oprit
(fara JS butonul e ascuns si textul ramane vizibil). */
.lind-intro{padding-top:48px;padding-bottom:64px}
@media(min-width:768px){.lind-intro{padding-top:64px;padding-bottom:80px}}
@media(min-width:1024px){.lind-intro{padding-top:80px;padding-bottom:112px}}
.lind-intro-txt{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625}
@media(min-width:640px){.lind-intro-txt{font-size:18px}}
/* `space-y-5` al originalului = 20px intre TOATE elementele fratesti, indiferent
de tip. Regula pe perechi de taguri sarea peste butonul de dupa blocul ascuns
si scurta sectiunea cu 20px. */
.lind-intro-txt > * + *{margin-top:20px}
.lind-mai-mult > * + *{margin-top:20px}
/* `pt-2` pe blocul butonului, ca in original */
.lind-buton-loc{padding-top:8px}
.lind-buton{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);
background:rgba(255,255,255,.7);padding:8px 20px;font-size:14px;line-height:20px;font-weight:500;
color:var(--muted);cursor:pointer;transition:background-color .2s ease}
.lind-buton:hover{background:#fff}
[data-theme="dark"] .lind-buton{background:rgba(255,255,255,.05)}
[data-theme="dark"] .lind-buton:hover{background:rgba(255,255,255,.1)}
/* ============ v7 — LINDBERG: stiva „Color stack reveal" ============
16 panouri `sticky top-0`, inalte cat fereastra, suprapuse prin z-index
crescator. Opacitatile si culoarea de fundal le calculeaza JS-ul dupa
formulele din referinta/efecte-lindberg.md. Aici e doar geometria. */
.lind-stack{position:relative;background-color:#000}
.lind-panou{position:sticky;top:0;height:100vh;width:100%;overflow:hidden}
.lind-panou-in{position:absolute;inset:0}
.lind-img{position:absolute;inset:0;opacity:0}
.lind-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.lind-float{will-change:transform;animation:lindbergFloat 7s ease-in-out infinite}
@keyframes lindbergFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* asezarea imaginilor, exact ca in original */
.lind-img-jos img{transform:translateY(32px)}
.lind-img-rotit img{transform:translateY(32px) scale(.7) rotate(45deg)}
@media(min-width:640px){
.lind-img-jos img{transform:translateY(40px)}
.lind-img-rotit img{transform:translateY(40px) scale(.7) rotate(45deg)}
}
@media(min-width:1024px){
.lind-img-jos img{transform:translateY(48px)}
.lind-img-mic img{transform:scale(.5)}
.lind-img-mic.lind-img-jos img{transform:translateY(48px) scale(.5)}
.lind-img-rotit img{transform:translateY(48px) scale(.7) rotate(45deg)}
}
.lind-titlu{position:absolute;left:0;right:0;top:112px;z-index:10;padding:0 20px;text-align:center;opacity:0}
@media(min-width:640px){.lind-titlu{top:128px;padding:0 32px}}
@media(min-width:768px){.lind-titlu{top:144px}}
@media(min-width:1024px){.lind-titlu{padding:0 48px}}
.lind-titlu h2{font-family:var(--ff-disp);font-weight:400;font-size:36px;line-height:1;
white-space:pre-line;color:#fff;margin:0;
text-shadow:0 1px 2px rgba(0,0,0,.22),0 5px 14px rgba(0,0,0,.16)}
@media(min-width:640px){.lind-titlu h2{font-size:48px}}
@media(min-width:768px){.lind-titlu h2{font-size:60px}}
@media(min-width:1024px){.lind-titlu h2{font-size:72px}}
/* de la panoul 10 in sus fundalul e deschis: titlurile trec pe inchis */
.lind-panou-deschis .lind-titlu h2{color:#1f2328;text-shadow:none}
.lind-subs{position:absolute;inset:0;z-index:10;padding:0 20px;opacity:0}
@media(min-width:640px){.lind-subs{padding:0 32px}}
@media(min-width:1024px){.lind-subs{padding:0 48px}}
.lind-sub{position:absolute;font-size:14px;line-height:1.375;font-weight:500;
white-space:pre-line;color:rgba(255,255,255,.5);margin:0}
@media(min-width:640px){.lind-sub{font-size:16px}}
@media(min-width:1024px){.lind-sub{font-size:20px}}
.lind-sub-stanga{top:208px;left:20px;max-width:42%;text-align:left}
.lind-sub-dreapta{top:208px;right:20px;max-width:42%;text-align:right}
.lind-sub-jos{left:0;right:0;bottom:200px;margin:0 auto;max-width:36rem;padding:0 20px;text-align:center}
@media(min-width:640px){
.lind-sub-stanga{top:240px;left:32px}
.lind-sub-dreapta{top:240px;right:32px}
.lind-sub-jos{bottom:56px}
}
@media(min-width:1024px){
.lind-sub-stanga{left:48px}
.lind-sub-dreapta{right:48px}
.lind-sub-jos{bottom:64px}
}
/* panoul 0 — un singur subtitlu, centrat jos */
.lind-subs-unu{position:absolute;left:0;right:0;top:208px;z-index:10;padding:0 20px;opacity:0}
@media(min-width:640px){.lind-subs-unu{top:auto;bottom:64px;padding:0 32px}}
@media(min-width:768px){.lind-subs-unu{bottom:80px}}
@media(min-width:1024px){.lind-subs-unu{padding:0 48px}}
/* panoul 9 — un singur subtitlu, sub titlu */
.lind-subs-sub-titlu{position:absolute;left:0;right:0;top:208px;z-index:10;padding:0 20px;opacity:0}
@media(min-width:640px){.lind-subs-sub-titlu{top:240px;padding:0 32px}}
@media(min-width:768px){.lind-subs-sub-titlu{top:256px}}
@media(min-width:1024px){.lind-subs-sub-titlu{padding:0 48px}}
.lind-subs-unu .lind-sub,.lind-subs-sub-titlu .lind-sub{position:static;max-width:36rem;
margin:0 auto;text-align:center}
/* panourile 10–15 — continut propriu */
.lind-strat{position:absolute;left:0;right:0;z-index:10;opacity:0}
.lind-strat-diamante{top:224px}
@media(min-width:640px){.lind-strat-diamante{top:256px}}
@media(min-width:768px){.lind-strat-diamante{top:288px}}
@media(min-width:1024px){.lind-strat-diamante{top:320px}}
.lind-strat-mina{top:224px}
@media(min-width:640px){.lind-strat-mina{top:256px}}
@media(min-width:768px){.lind-strat-mina{top:288px}}
@media(min-width:1024px){.lind-strat-mina{top:0}}
.lind-strat-craft{top:72px}
@media(min-width:1024px){.lind-strat-craft{top:0}}
.lind-strat-coarne{top:112px}
@media(min-width:640px){.lind-strat-coarne{top:128px}}
@media(min-width:1024px){.lind-strat-coarne{top:104px}}
.lind-strat-plin{position:absolute;inset:0;z-index:10;opacity:0}
.lind-strat-plin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.lind-precious-logo{margin:0 auto;display:block;width:230px;height:auto}
@media(min-width:640px){.lind-precious-logo{width:320px}}
@media(min-width:768px){.lind-precious-logo{width:420px}}
@media(min-width:1024px){.lind-precious-logo{width:520px}}
.lind-lat{display:block;height:auto;width:100%}
.lind-diamante-mob{display:block}
.lind-diamante-desk{display:none}
@media(min-width:1024px){.lind-diamante-mob{display:none}.lind-diamante-desk{display:block}}
.lind-coarne{margin:0 auto;display:block;height:auto;width:48%}
@media(min-width:640px){.lind-coarne{width:42%}}
@media(min-width:1024px){.lind-coarne{width:20%}}
@media(min-width:1280px){.lind-coarne{width:16%}}
.lind-legenda{margin:24px auto 0;max-width:72rem;padding:0 20px}
@media(min-width:640px){.lind-legenda{margin-top:32px;padding:0 32px}}
@media(min-width:1024px){.lind-legenda{padding:0 48px}}
.lind-legenda p{text-align:center;font-size:14px;line-height:1.625;color:rgba(31,35,40,.9);margin:0}
@media(min-width:640px){.lind-legenda p{font-size:16px}}
@media(min-width:768px){.lind-legenda p{font-size:18px}}
@media(min-width:1024px){.lind-legenda p{font-size:20px}}
.lind-precious-txt{margin:0 auto;max-width:72rem}
.lind-precious-txt-in{text-align:center;font-size:14px;line-height:1.625;color:rgba(31,35,40,.9)}
.lind-precious-txt-in p + p{margin-top:16px}
@media(min-width:640px){.lind-precious-txt-in{font-size:16px}}
@media(min-width:768px){.lind-precious-txt-in{font-size:18px}.lind-precious-txt-in p + p{margin-top:20px}}
@media(min-width:1024px){.lind-precious-txt-in{font-size:20px}}
/* ============ v7 — /blog: lista de articole (1:1) ============
Originalul NU are imagini in cardurile de blog si nu are hero — doar un titlu
„Blog" si 16 carduri text. Aveam grila cu poze: 17 imagini inventate, scoase.
Doua capcane din CSS-ul originalului, citite, nu presupuse:
`.font-bold{font-weight:500!important}` si `.font-semibold{font-weight:400!important}`
— deci „bold" inseamna 500 aici, nu 700.
`text-body-color` (#565d69) e folosit pe data articolului FARA varianta de
dark, deci ramane acelasi pe ambele teme. Tokenul `--body-color` exista tocmai
ca sa nu punem literala in sectiune (regula 4). */
.blog-titlu-sec{padding-top:112px}
@media(min-width:768px){.blog-titlu-sec{padding-top:128px}}
@media(min-width:1024px){.blog-titlu-sec{padding-top:144px}}
.blog-titlu-sec h1{font-family:var(--ff-disp);font-size:36px;font-weight:500;line-height:1;
color:var(--text);margin:0 0 32px}
@media(min-width:640px){.blog-titlu-sec h1{font-size:48px}}
.blog-lista-sec{padding-bottom:64px}
@media(min-width:768px){.blog-lista-sec{padding-bottom:80px}}
@media(min-width:1024px){.blog-lista-sec{padding-bottom:112px}}
.blog-lista > * + *{margin-top:24px}
@media(min-width:768px){.blog-lista > * + *{margin-top:32px}}
.blog-item{display:block}
.blog-item article{border:1px solid rgba(0,0,0,.1);background:var(--bg-alt);padding:16px;
box-shadow:0 5px 15px rgba(6,8,15,.05);transition:box-shadow .3s ease}
.blog-item:hover article{box-shadow:0 5px 10px rgba(6,8,15,.1)}
[data-theme="dark"] .blog-item article{border-color:rgba(255,255,255,.1);background:var(--gray-dark);
box-shadow:0 5px 10px rgba(6,8,15,.1)}
@media(min-width:640px){.blog-item article{padding:20px}}
.blog-item-in{min-width:0}
.blog-data{font-size:14px;line-height:1.4286;color:var(--muted);margin:0 0 8px}
.blog-item h2{font-family:var(--ff-disp);font-size:24px;font-weight:500;line-height:1.3333;
color:var(--text);margin:0 0 12px}
.blog-rezumat{font-size:16px;line-height:1.625;color:var(--muted);white-space:pre-line;margin:0}
/* ============ v7 — SECTIUNE-CARD (benzile mari cu imagine de fundal) ============
Folosita pe /servicii (4 benzi) si, cand se rescrie, pe promourile de acasa.
Reutilizeaza `.hero-int-bleed/-parallax/-grad/-flex/-col/-box` — identice la
valoare cu ale heroului. Difera doar padding-ul exterior si tipografia. */
.sec-card{position:relative;z-index:10;overflow:hidden;will-change:transform;
transform:scale(.84)}
.sec-card-wrap{position:relative;padding-top:48px;padding-bottom:48px}
@media(min-width:768px){.sec-card-wrap{padding-top:64px;padding-bottom:64px}}
@media(min-width:1024px){.sec-card-wrap{padding-top:80px;padding-bottom:80px}}
.sec-card-titlu{font-family:var(--ff-disp);font-weight:400;font-size:36px;line-height:1;
color:#fff;white-space:pre-line;margin:0 0 20px;
text-shadow:0 1px 2px rgba(0,0,0,.22),0 5px 14px rgba(0,0,0,.16)}
@media(min-width:640px){.sec-card-titlu{font-size:48px}}
@media(min-width:768px){.sec-card-titlu{font-size:60px}}
.sec-card-text{font-size:16px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.95);
margin:0 0 48px;text-shadow:0 1px 2px rgba(0,0,0,.22),0 5px 14px rgba(0,0,0,.16)}
@media(min-width:640px){.sec-card-text{font-size:18px;line-height:1.5556}}
@media(min-width:768px){.sec-card-text{font-size:20px;line-height:1.4}}
/* `space-y-3 lg:space-y-10` al originalului, pe lista de benzi */
.sec-card-lista > * + *{margin-top:12px}
@media(min-width:1024px){.sec-card-lista > * + *{margin-top:40px}}
/* ============ v7 — /preturi (1:1) ============
Titlul si intro-ul, apoi doua carduri intr-o grila de 2 coloane de la 768.
Ornamentele SVG din colturi vin din inc/preturi-ornamente.php. */
.pret-titlu-sec{padding-top:112px}
@media(min-width:768px){.pret-titlu-sec{padding-top:128px}}
@media(min-width:1024px){.pret-titlu-sec{padding-top:144px}}
.pret-titlu-sec h1{font-family:var(--ff-disp);font-size:36px;font-weight:500;line-height:1;
color:var(--text);margin:0 0 32px}
@media(min-width:640px){.pret-titlu-sec h1{font-size:48px}}
.pret-intro{color:var(--muted);max-width:64rem;margin-bottom:40px;
font-size:16px;font-weight:500;line-height:1.625}
@media(min-width:640px){.pret-intro{font-size:18px}}
.pret-intro > * + *{margin-top:16px}
.pret-intro p{margin:0}
.pret-grila-sec{position:relative;z-index:10;padding-top:8px;padding-bottom:64px}
@media(min-width:768px){.pret-grila-sec{padding-top:16px;padding-bottom:80px}}
@media(min-width:1024px){.pret-grila-sec{padding-top:24px;padding-bottom:112px}}
.pret-grila{display:grid;grid-template-columns:1fr;column-gap:32px;row-gap:40px}
@media(min-width:768px){.pret-grila{grid-template-columns:1fr 1fr}}
.pret-card{position:relative;z-index:10;background:var(--bg-alt);padding:40px 32px;
box-shadow:0 5px 15px rgba(6,8,15,.05)}
[data-theme="dark"] .pret-card{background:var(--gray-dark);box-shadow:0 5px 10px rgba(6,8,15,.1)}
.pret-card h3{font-family:var(--ff-disp);font-size:24px;font-weight:500;line-height:1.3333;
color:var(--text);margin:0 0 8px}
.pret-card-poza{margin-bottom:28px;overflow:hidden}
.pret-card-poza img{display:block;height:auto;width:100%;object-fit:cover}
.pret-card-buton{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid rgba(86,93,105,.1)}
[data-theme="dark"] .pret-card-buton{border-bottom-color:rgba(255,255,255,.1)}
.pret-card-buton a{display:block}
.pret-card-buton span{display:flex;width:100%;align-items:center;justify-content:center;
background:rgba(54,82,245,.8);padding:12px;font-size:16px;font-weight:500;color:#fff;
transition:box-shadow .3s ease-in-out}
.pret-card-buton a:hover span{box-shadow:0 8px 20px rgba(54,82,245,.35)}
.pret-bifa{display:flex;align-items:center;margin-bottom:12px}
.pret-bifa i{margin-right:16px;display:flex;align-items:center;justify-content:center;
color:var(--primary);flex-shrink:0}
.pret-bifa p{margin:0;font-size:16px;font-weight:500;line-height:1.5;color:var(--muted)}
.pret-ornament{position:absolute;right:0;bottom:0;z-index:-1;pointer-events:none}
.pret-ornament-sec{position:absolute;left:0;bottom:0;z-index:-1;pointer-events:none}
/* ============ v7 — /contact (1:1) ============ */
.ct-titlu-sec{padding-top:112px}
@media(min-width:768px){.ct-titlu-sec{padding-top:128px}}
@media(min-width:1024px){.ct-titlu-sec{padding-top:144px}}
.ct-titlu-sec h1{font-family:var(--ff-disp);font-size:36px;font-weight:500;line-height:1;
color:var(--text);margin:0 0 32px}
@media(min-width:640px){.ct-titlu-sec h1{font-size:48px}}
.ct-sec{padding-top:24px;padding-bottom:64px}
@media(min-width:768px){.ct-sec{padding-top:32px;padding-bottom:80px}}
@media(min-width:1024px){.ct-sec{padding-top:40px;padding-bottom:112px}}
.ct-stiva > * + *{margin-top:48px}
.ct-grila{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:1024px){.ct-grila{grid-template-columns:1fr 1fr}}
.ct-grila-1{display:grid;grid-template-columns:1fr;gap:48px}
.ct-articol{position:relative;padding:0}
.ct-articol h2{font-family:var(--ff-disp);font-size:24px;font-weight:500;line-height:1.3333;
color:var(--text);margin:0 0 16px}
.ct-lista{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625}
.ct-lista > * + *{margin-top:24px}
.ct-rand{display:flex;align-items:flex-start;gap:12px}
.ct-rand p{margin:0}
.ct-rand a{color:var(--primary)}
.ct-rand a:hover{text-decoration:underline}
/* clasa care inlocuieste `mt-0.5 h-5 w-5 shrink-0 text-black/70 dark:text-white/70` */
.ct-icon{margin-top:2px;height:20px;width:20px;flex-shrink:0;color:rgba(0,0,0,.7)}
[data-theme="dark"] .ct-icon{color:rgba(255,255,255,.7)}
.ct-text{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625}
.ct-text ul{list-style:disc;padding-left:24px;margin:0}
.ct-text li + li{margin-top:12px}
.ct-harta{height:360px;width:100%;border:0;display:block}
@media(min-width:1024px){.ct-harta{height:430px}}
.ct-butoane{margin:16px 0;display:flex;flex-direction:column;gap:12px}
@media(min-width:1024px){.ct-butoane{flex-direction:row}.ct-butoane .ct-btn{flex:1}}
.ct-btn{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;
padding:12px 20px;font-size:16px;font-weight:500;border:0;cursor:pointer;
box-shadow:0 4px 6px rgba(0,0,0,.1);transition:opacity .2s ease}
.ct-btn:hover{opacity:.9}
.ct-btn img{display:block;width:30px;height:30px}
.ct-btn-maps{background:#fff;color:#000}
.ct-btn-waze{background:#31ccfe;color:#fff}
.ct-doar-mic{display:block}
.ct-doar-mare{display:none}
@media(min-width:1024px){.ct-doar-mic{display:none}.ct-doar-mare{display:block}}
/* ============ v7 — /parteneri (1:1) ============
Grila de 2 coloane cu carduri de logo. Logoul e `object-contain` intr-o
caseta de 80px inaltime, plafonata la 200px latime si centrata. */
.prt-titlu-sec{padding-top:112px}
@media(min-width:768px){.prt-titlu-sec{padding-top:128px}}
@media(min-width:1024px){.prt-titlu-sec{padding-top:144px}}
.prt-titlu-sec h1{font-family:var(--ff-disp);font-size:36px;font-weight:500;line-height:1;
color:var(--text);margin:0 0 32px}
@media(min-width:640px){.prt-titlu-sec h1{font-size:48px}}
.prt-sec{padding-bottom:64px}
@media(min-width:768px){.prt-sec{padding-bottom:80px}}
@media(min-width:1024px){.prt-sec{padding-bottom:112px}}
.prt-grila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:640px){.prt-grila{gap:24px}}
.prt-card{border:1px solid rgba(0,0,0,.1);background:var(--bg-alt);padding:24px;
box-shadow:0 5px 15px rgba(6,8,15,.05)}
[data-theme="dark"] .prt-card{border-color:rgba(255,255,255,.1);background:var(--gray-dark);
box-shadow:0 5px 10px rgba(6,8,15,.1)}
.prt-logo{position:relative;margin:0 auto;height:80px;width:100%;max-width:200px}
.prt-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
/* ============ v7 — /media (1:1) ============
Carduri video: 1 / 2 / 3 coloane. Miniatura are voal negru 25% care se
inchide la 35% pe hover, si un buton de redare alb 90% de 56px in centru. */
.md-titlu-sec{padding-top:112px}
@media(min-width:768px){.md-titlu-sec{padding-top:128px}}
@media(min-width:1024px){.md-titlu-sec{padding-top:144px}}
.md-titlu-sec h1{font-family:var(--ff-disp);font-size:36px;font-weight:500;line-height:1;
color:var(--text);margin:0 0 32px}
@media(min-width:640px){.md-titlu-sec h1{font-size:48px}}
.md-sec{padding-bottom:64px}
@media(min-width:768px){.md-sec{padding-bottom:80px}}
@media(min-width:1024px){.md-sec{padding-bottom:112px}}
.md-grila{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.md-grila{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.md-grila{grid-template-columns:1fr 1fr 1fr}}
.md-card{border:1px solid rgba(0,0,0,.1);background:var(--bg-alt);padding:16px;
box-shadow:0 5px 15px rgba(6,8,15,.05)}
[data-theme="dark"] .md-card{border-color:rgba(255,255,255,.1);background:var(--gray-dark);
box-shadow:0 5px 10px rgba(6,8,15,.1)}
.md-poza{position:relative;display:block;overflow:hidden}
.md-poza img{display:block;height:auto;width:100%;object-fit:cover}
.md-voal{position:absolute;inset:0;background:rgba(0,0,0,.25);transition:background-color .3s ease}
.md-poza:hover .md-voal{background:rgba(0,0,0,.35)}
.md-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.md-play-cerc{display:inline-flex;height:56px;width:56px;align-items:center;justify-content:center;
border-radius:9999px;background:rgba(255,255,255,.9);color:#000;box-shadow:0 4px 6px rgba(0,0,0,.1)}
.md-card h2{font-family:var(--ff-disp);font-size:20px;font-weight:500;line-height:1.4;
color:var(--text);margin:16px 0 0}
.sec-card-titlu-singur{margin-bottom:48px}
/* ============ v7 — /doctor-speranta-schmitzer (1:1) ============
Banda de sus e cat ecranul (min-height:100vh, ca heroul de acasa), nu 58vh
ca benzile obisnuite, dar are wrapperul py-16/20/28 si scalarea F2. */
.dr-hero{position:relative;z-index:10;overflow:hidden;will-change:transform;transform:scale(.84)}
.dr-hero-wrap{position:relative;padding-top:64px;padding-bottom:64px}
@media(min-width:768px){.dr-hero-wrap{padding-top:80px;padding-bottom:80px}}
@media(min-width:1024px){.dr-hero-wrap{padding-top:112px;padding-bottom:112px}}
.dr-hero-flex{display:flex;min-height:100vh;align-items:flex-end;justify-content:center;
padding-top:132px;padding-bottom:48px}
@media(min-width:768px){.dr-hero-flex{padding-top:150px;padding-bottom:64px}}
@media(min-width:1024px){.dr-hero-flex{padding-top:168px;padding-bottom:80px}}
.dr-nume{font-family:var(--ff-disp);font-weight:400;font-size:48px;line-height:1;color:#fff;
margin:0 0 20px;text-shadow:0 1px 2px rgba(0,0,0,.22),0 5px 14px rgba(0,0,0,.16)}
@media(min-width:640px){.dr-nume{font-size:60px}}
@media(min-width:768px){.dr-nume{font-size:72px}}
.dr-nume2{font-family:var(--ff-disp);font-weight:500;font-size:24px;line-height:1.3333;
color:rgba(255,255,255,.95);margin:12px 0 0;
text-shadow:0 1px 2px rgba(0,0,0,.22),0 5px 14px rgba(0,0,0,.16)}
@media(min-width:640px){.dr-nume2{font-size:30px;line-height:1.2}}
/* Umbra alba din original: `[text-shadow:0_0_4px_rgba(255,255,255,0.2),0_0_10px_rgba(255,255,255,0.12)]` */
.dr-contor{margin:24px 0 48px;color:#fff;
text-shadow:0 0 4px rgba(255,255,255,.2),0 0 10px rgba(255,255,255,.12)}
.dr-contor-txt{font-size:20px;font-weight:500;line-height:1.4;letter-spacing:.03em;margin:0}
@media(min-width:640px){.dr-contor-txt{font-size:24px;line-height:1.3333}}
.dr-contor-nr{font-family:var(--ff-disp);font-size:48px;font-weight:500;line-height:1.25;
color:#F2DC9A;margin:0}
@media(min-width:640px){.dr-contor-nr{font-size:60px}}
@media(min-width:768px){.dr-contor-nr{font-size:72px}}
.dr-cv{display:inline-flex;align-items:center;border:1px solid var(--primary);
background:var(--primary);padding:16px 32px;font-size:16px;font-weight:500;color:#fff;
transition:all .3s ease-in-out}
.dr-cv:hover{border-color:var(--primary-hover);background:var(--primary-hover)}
.dr-cv i{font-style:normal;margin-left:8px;position:relative;top:1px;line-height:1}
.dr-articol-sec{padding-top:48px;padding-bottom:48px}
@media(min-width:768px){.dr-articol-sec{padding-top:56px;padding-bottom:56px}}
@media(min-width:1024px){.dr-articol-sec{padding-top:64px;padding-bottom:64px}}
/* `container max-w-4xl` = 56rem peste containerul obisnuit */
.dr-articol{max-width:56rem}
.dr-articol h1{font-family:var(--ff-disp);font-size:30px;font-weight:500;line-height:1.2;
color:var(--text);margin:0 0 32px}
@media(min-width:640px){.dr-articol h1{font-size:36px;line-height:1.1111}}
.dr-text{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625}
@media(min-width:640px){.dr-text{font-size:18px}}
.dr-text > * + *{margin-top:24px}
.dr-text p{margin:0}
.dr-text h2{font-family:var(--ff-disp);font-size:24px;font-weight:500;line-height:1.3333;
color:var(--text);margin:0}
/* varianta mare a logoului din hero (vezi inc/hero.php, cheia `mare`) */
.hero-int-logo-mare{width:230.4px;height:230.4px}
@media(min-width:640px){.hero-int-logo-mare{width:268.8px;height:268.8px}}
@media(min-width:768px){.hero-int-logo-mare{width:307.2px;height:307.2px}}
@media(min-width:1024px){.hero-int-logo-mare{width:384px;height:384px}}
/* ============ v7 — /medicina-ca-traditie-in-familie (1:1) ============ */
.med-sec{position:relative;margin-top:48px;padding-bottom:64px}
@media(min-width:768px){.med-sec{margin-top:56px;padding-bottom:80px}}
@media(min-width:1024px){.med-sec{margin-top:64px;padding-bottom:112px}}
/* gradient auriu pe toata latimea ferestrei, de jos in sus */
.med-gradient{pointer-events:none;position:absolute;top:0;bottom:0;left:50%;z-index:0;
width:100vw;transform:translateX(-50%);
background:linear-gradient(0deg,rgba(156,115,26,.3) 0%,rgba(156,115,26,0) 100%)}
.med-continut{position:relative;z-index:10}
.med-p{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625;margin:0}
@media(min-width:640px){.med-p{font-size:18px}}
.med-grila{margin:40px 0;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.med-grila{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.med-grila{grid-template-columns:1fr 1fr 1fr}}
.med-portret{position:relative;aspect-ratio:4/5;width:100%;overflow:hidden;
will-change:transform;transform:scale(.84)}
.med-portret img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.med-portret-umbra{position:absolute;right:0;bottom:0;left:0;height:20%;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 100%)}
.med-portret-nume{position:absolute;right:0;bottom:0;left:0;padding:16px}
.med-portret-nume p{margin:0;font-size:16px;font-weight:500;color:#fff;
text-shadow:0 1px 2px rgba(0,0,0,.22),0 5px 14px rgba(0,0,0,.16)}
@media(min-width:640px){.med-portret-nume p{font-size:18px}}
.med-casaregala{margin:40px 0;display:flex;justify-content:center}
.med-casaregala img{height:auto;width:100%;max-width:210px;object-fit:contain}
.med-blazon-jos{margin-top:80px;display:flex;justify-content:center}
@media(min-width:768px){.med-blazon-jos{margin-top:96px}}
@media(min-width:1024px){.med-blazon-jos{margin-top:112px}}
.med-blazon-cutie{position:relative;width:307.2px;height:307.2px;will-change:transform;transform:scale(.84)}
@media(min-width:640px){.med-blazon-cutie{width:384px;height:384px}}
@media(min-width:768px){.med-blazon-cutie{width:537.6px;height:537.6px}}
@media(min-width:1024px){.med-blazon-cutie{width:691.2px;height:691.2px}}
.med-blazon-cutie img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* ============ v7 — /ce-spun-pacientii (1:1) ============
Steaua e un caracter „★" la 104px peste care sta cifra 5. Cardurile sunt pe o
coloana, scalate 0.84 → 1 la scroll (F2), cu poza rotunda de 150/170px. */
.pac-titlu-sec{padding-top:112px}
@media(min-width:768px){.pac-titlu-sec{padding-top:128px}}
@media(min-width:1024px){.pac-titlu-sec{padding-top:144px}}
.pac-titlu-sec h1{font-family:var(--ff-disp);font-size:36px;font-weight:500;line-height:1;
color:var(--text);margin:0 0 32px}
@media(min-width:640px){.pac-titlu-sec h1{font-size:48px}}
.pac-rating-bloc{margin:32px auto 0;display:flex;width:100%;flex-direction:column;
align-items:center;gap:20px}
@media(min-width:768px){.pac-rating-bloc{margin-top:40px}}
.pac-stea{position:relative;margin-bottom:8px;height:96px;width:96px}
.pac-stea-semn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:104px;line-height:1;color:#fbb040}
/* Cifra e in Noto Serif in original; noi folosim Bitter — vezi comentariul din
pacienti.php, abaterea 2. */
.pac-stea-nr{position:absolute;bottom:0;left:50%;transform:translate(-50%,-4px);
font-family:var(--ff-disp);font-size:36px;font-weight:500;color:var(--text)}
.pac-subtitlu-cutie{position:relative;margin-bottom:4px;height:134.4px;
width:calc(100vw - 2rem);max-width:calc(100vw - 2rem)}
@media(min-width:640px){.pac-subtitlu-cutie{height:153.6px}}
@media(min-width:768px){.pac-subtitlu-cutie{height:172.8px;width:1036.8px}}
@media(min-width:1024px){.pac-subtitlu-cutie{height:192px;width:1190.4px}}
.pac-subtitlu-cutie h3{position:absolute;left:0;right:0;top:50%;z-index:10;
transform:translateY(-50%);text-align:center;font-family:var(--ff-disp);
font-size:30px;font-weight:500;line-height:1.2;color:var(--text);margin:0}
@media(min-width:640px){.pac-subtitlu-cutie h3{font-size:36px;line-height:1.1111}}
.pac-sec{padding-bottom:64px}
@media(min-width:768px){.pac-sec{padding-bottom:80px}}
@media(min-width:1024px){.pac-sec{padding-bottom:112px}}
.pac-grila{display:grid;grid-template-columns:1fr;row-gap:40px}
.pac-card-ext{width:100%;will-change:transform;transform:scale(.84)}
.pac-card{background:var(--bg-alt);padding:32px;box-shadow:0 5px 10px rgba(6,8,15,.1);
transition:box-shadow .3s ease}
[data-theme="dark"] .pac-card{background:var(--dark,#171a1f);box-shadow:0 5px 15px rgba(6,8,15,.05)}
@media(min-width:1024px){.pac-card{padding-left:20px;padding-right:20px}}
@media(min-width:1280px){.pac-card{padding-left:32px;padding-right:32px}}
.pac-card-cap{margin-bottom:24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pac-poza{position:relative;margin-bottom:12px;height:150px;width:150px;overflow:hidden;
border-radius:9999px}
@media(min-width:640px){.pac-poza{height:170px;width:170px}}
.pac-poza img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.pac-card-cap h3{font-family:var(--ff-body);font-size:18px;font-weight:500;line-height:1.5;
color:var(--text);margin:0}
@media(min-width:1024px){.pac-card-cap h3{font-size:16px}}
@media(min-width:1280px){.pac-card-cap h3{font-size:18px}}
.pac-citat{font-size:16px;line-height:1.625;text-align:center;color:var(--muted);margin:0}
[data-theme="dark"] .pac-citat{color:#fff}
.pac-buton-loc{margin-top:16px;display:flex;justify-content:center}
.pac-buton{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);
background:rgba(255,255,255,.7);padding:8px 16px;font-size:14px;line-height:20px;
font-weight:500;color:var(--muted);cursor:pointer;transition:background-color .2s ease}
.pac-buton:hover{background:#fff}
[data-theme="dark"] .pac-buton{background:rgba(255,255,255,.05)}
[data-theme="dark"] .pac-buton:hover{background:rgba(255,255,255,.1)}
/* ============ v7 — /despre-noi (1:1) ============ */
.ab-intro-sec{padding-top:0}
.ab-intro-linie{border-bottom:1px solid rgba(86,93,105,.15);padding-bottom:64px}
[data-theme="dark"] .ab-intro-linie{border-bottom-color:rgba(255,255,255,.15)}
@media(min-width:768px){.ab-intro-linie{padding-bottom:80px}}
@media(min-width:1024px){.ab-intro-linie{padding-bottom:112px}}
.ab-banda{position:relative;z-index:10;overflow:hidden;padding-top:64px;padding-bottom:64px}
@media(min-width:768px){.ab-banda{padding-top:80px;padding-bottom:80px}}
@media(min-width:1024px){.ab-banda{padding-top:112px;padding-bottom:112px}}
/* originalul: min-h-[62vh] aici, nu 58vh ca la celelalte benzi */
.ab-banda-flex{display:flex;min-height:62vh;align-items:flex-end;justify-content:center;
padding-top:132px;padding-bottom:48px}
@media(min-width:768px){.ab-banda-flex{padding-top:150px;padding-bottom:64px}}
@media(min-width:1024px){.ab-banda-flex{padding-top:168px;padding-bottom:80px}}
.ab-intro-txt{margin-top:48px}
.ab-intro-txt p{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625;margin:0}
@media(min-width:640px){.ab-intro-txt p{font-size:18px}}
/* cele doua poze art-directed ale doctorului */
.ab-dr-mic{display:block}
.ab-dr-mare{display:none}
@media(min-width:1024px){.ab-dr-mic{display:none}.ab-dr-mare{display:block}}
.ab-cv-sec{padding-top:64px;padding-bottom:64px}
@media(min-width:768px){.ab-cv-sec{padding-top:80px;padding-bottom:80px}}
@media(min-width:1024px){.ab-cv-sec{padding-top:96px;padding-bottom:96px}}
.ab-cv-txt{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625;margin:0}
@media(min-width:640px){.ab-cv-txt{font-size:18px}}
.ab-h2{font-family:var(--ff-disp);font-size:30px;font-weight:500;line-height:1.2;
color:var(--text);margin:0 0 24px}
@media(min-width:640px){.ab-h2{font-size:36px}}
@media(min-width:768px){.ab-h2{font-size:45px}}
.ab-h2-galerie{margin-bottom:40px}
.ab-aparatura-sec,.ab-echip-sec,.ab-galerie-sec{padding-bottom:64px}
@media(min-width:768px){.ab-aparatura-sec,.ab-echip-sec,.ab-galerie-sec{padding-bottom:80px}}
@media(min-width:1024px){.ab-aparatura-sec,.ab-echip-sec,.ab-galerie-sec{padding-bottom:112px}}
.ab-aparatura-txt{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625;margin:0}
@media(min-width:640px){.ab-aparatura-txt{font-size:18px}}
.ab-echip-grila{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:380px){.ab-echip-grila{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.ab-echip-grila{grid-template-columns:1fr 1fr 1fr}}
.ab-echip-ext{height:100%;width:100%;will-change:transform;transform:scale(.84)}
.ab-echip-card{height:100%;overflow:hidden;background:var(--bg-alt);
box-shadow:0 5px 15px rgba(6,8,15,.05)}
[data-theme="dark"] .ab-echip-card{background:var(--gray-dark);box-shadow:0 5px 10px rgba(6,8,15,.1)}
.ab-echip-poza{position:relative;height:176px;width:100%}
.ab-echip-poza img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-echip-corp{padding:20px}
.ab-echip-corp h3{font-family:var(--ff-disp);font-size:20px;font-weight:500;line-height:1.4;
color:var(--text);margin:0 0 8px}
.ab-echip-corp p{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625;margin:0}
/* galeria: carusel nativ pe toata latimea ferestrei */
.ab-galerie{position:relative;left:50%;width:100vw;transform:translateX(-50%);
padding-top:24px;padding-bottom:24px}
.ab-galerie-lista{display:flex;gap:24px;margin:0;padding:0 24px;list-style:none;
overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none}
.ab-galerie-lista::-webkit-scrollbar{display:none}
.ab-galerie-lista > li{flex:0 0 auto;scroll-snap-align:center}
.ab-galerie-lista img{display:block;height:46vh;width:auto;max-width:88vw;object-fit:contain}
@media(min-width:640px){.ab-galerie-lista img{height:52vh}}
@media(min-width:768px){.ab-galerie-lista img{height:58vh}}
/* ============ v7 — paginile de politici (1:1) ============
Text lung, container `max-w-5xl`. Tabelele originalului au min-width 760px,
deci pe telefon se deruleaza pe orizontala in cutia lor, nu impinge pagina. */
.pol-sec{padding-top:112px;padding-bottom:64px}
@media(min-width:768px){.pol-sec{padding-top:128px;padding-bottom:80px}}
@media(min-width:1024px){.pol-sec{padding-top:144px;padding-bottom:112px}}
.pol-container{max-width:64rem}
.pol-container h1{font-family:var(--ff-disp);font-size:36px;font-weight:500;line-height:1;
color:var(--text);margin:0 0 32px}
@media(min-width:640px){.pol-container h1{font-size:48px}}
.pol-text{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625}
@media(min-width:640px){.pol-text{font-size:18px}}
.pol-text > * + *{margin-top:24px}
.pol-text p{margin:0}
.pol-text h2{font-family:var(--ff-disp);font-size:24px;font-weight:500;line-height:1.3333;
color:var(--text);margin:0}
.pol-text h3{font-family:var(--ff-disp);font-size:20px;font-weight:500;line-height:1.4;
color:var(--text);margin:0}
.pol-accent{color:var(--text)}
.pol-link{color:var(--primary);text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:2px}
.pol-tabel-scroll{overflow-x:auto}
.pol-tabel{width:100%;min-width:760px;border:1px solid rgba(0,0,0,.15);text-align:left;
border-collapse:collapse}
[data-theme="dark"] .pol-tabel{border-color:rgba(255,255,255,.2)}
.pol-th,.pol-td{border:1px solid rgba(0,0,0,.15);padding:12px 16px;vertical-align:top}
[data-theme="dark"] .pol-th,[data-theme="dark"] .pol-td{border-color:rgba(255,255,255,.2)}
.pol-td-tare{color:var(--text)}
.pol-td-lista > * + *{margin-top:12px}
/* varianta cu padding mare a benzii-card: py-16/20/28 (benzile de pe acasa) */
.sec-card-wrap-mare{padding-top:64px;padding-bottom:64px}
@media(min-width:768px){.sec-card-wrap-mare{padding-top:80px;padding-bottom:80px}}
@media(min-width:1024px){.sec-card-wrap-mare{padding-top:112px;padding-bottom:112px}}
/* `mt-3 lg:mt-10` — wrapperul dintre benzile de pe acasa */
.sec-card-mt{margin-top:12px}
@media(min-width:1024px){.sec-card-mt{margin-top:40px}}
/* logoul din coltul benzii (Lindberg): top-3 left-3, 112x32 → 176x48 */
.sec-card-colt{pointer-events:none;position:absolute;top:12px;left:12px;z-index:20}
.sec-card-colt-in{position:relative;height:32px;width:112px}
.sec-card-colt-in img{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;object-position:left}
@media(min-width:640px){.sec-card-colt-in{height:40px;width:144px}}
@media(min-width:1024px){.sec-card-colt-in{height:48px;width:176px}}
/* ============ v8 — paginile de nivel 2 (32 de rute, `articol.php`) ============
Trei forme, aceleasi valori ca originalul: sectiune `pt-28 pb-16 md/lg`,
container `max-w-5xl` la paginile de text, card cu bordura la articolele de
blog. Tipografia e a paginilor mari: 16/18px, line-height 1.625, `--muted`. */
.n2-sec{padding-top:112px;padding-bottom:64px}
@media(min-width:768px){.n2-sec{padding-top:128px;padding-bottom:80px}}
@media(min-width:1024px){.n2-sec{padding-top:144px;padding-bottom:112px}}
/* sub un hero, antetul e deja distantat: nu mai punem si padding de sus */
.n2-sec-sub-hero{padding-top:48px}
@media(min-width:768px){.n2-sec-sub-hero{padding-top:56px}}
@media(min-width:1024px){.n2-sec-sub-hero{padding-top:64px}}
.n2-container{max-width:64rem}
.n2-titlu{font-family:var(--ff-disp);font-size:36px;font-weight:500;line-height:1;
color:var(--text);margin:0 0 32px}
@media(min-width:640px){.n2-titlu{font-size:48px}}
.n2-corp{color:var(--muted);font-size:16px;font-weight:500;line-height:1.625}
@media(min-width:640px){.n2-corp{font-size:18px}}
.n2-corp > * + *{margin-top:24px}
.n2-corp p{margin:0}
.n2-corp h2{font-family:var(--ff-disp);font-size:24px;font-weight:500;line-height:1.3333;
color:var(--text);margin:0}
@media(min-width:640px){.n2-corp h2{font-size:30px}}
.n2-corp h3{font-family:var(--ff-disp);font-size:20px;font-weight:500;line-height:1.4;
color:var(--text);margin:0}
/* `whitespace-pre-line` al originalului: randurile din text raman randuri */
.n2-pre{white-space:pre-line}
.n2-link{color:var(--primary)}
.n2-link:hover{text-decoration:underline}
.n2-lista{list-style:disc;padding-left:24px;margin:0}
.n2-lista li + li{margin-top:12px}
.n2-img{display:block;height:auto;max-width:100%;margin:0 auto}
.n2-gol{margin-top:16px}
/* tabelele de tarife */
.n2-tabel-scroll{overflow-x:auto}
.n2-tabel{width:100%;min-width:520px;border-collapse:collapse;text-align:left;
border:1px solid rgba(0,0,0,.15)}
[data-theme="dark"] .n2-tabel{border-color:rgba(255,255,255,.2)}
.n2-th,.n2-td{border:1px solid rgba(0,0,0,.15);padding:12px 16px;vertical-align:top}
[data-theme="dark"] .n2-th,[data-theme="dark"] .n2-td{border-color:rgba(255,255,255,.2)}
.n2-th{color:var(--text);font-weight:600}
/* Pe telefon, `min-width:520px` taia coloana de pret: pe un ecran de 390px se
vedea „grat…", „500…", „600…" — exact informatia pentru care exista pagina.
Derularea laterala exista (`overflow-x:auto`), dar nimic nu-i spunea
utilizatorului ca poate derula, deci pagina parea stricata.
Toate tabelele de tarife au DOUA coloane — denumire si pret — deci incap fara
derulare daca le lasam sa se aseze: lungimea minima cade, textul denumirii se
rupe pe randuri, iar pretul isi ia latimea de care are nevoie.
Masurat pe cele 4 tabele ale site-ului. */
/* Panourile de acordeon. `hidden` le tine inchise fara JavaScript, deci
continutul ramane in pagina pentru motoarele de cautare. */
.n2-panou[hidden]{display:none}
.n2-panou{margin-bottom:48px}
.n2-panou > * + *{margin-top:20px}
.n2-panou p{margin:0}
.n2-panou h3{font-family:var(--ff-disp);font-size:20px;font-weight:500;line-height:1.3;
color:var(--text);margin:32px 0 0}
.n2-panou .n2-img{width:100%;height:auto;display:block;border-radius:0}
.n2-panou .n2-lista{padding-left:20px}
@media(min-width:640px){.n2-panou h3{font-size:24px}}
@media(max-width:700px){
.n2-tabel{min-width:0}
.n2-th,.n2-td{padding:10px 10px}
/* pretul nu se rupe intre cifra si moneda („500" pe un rand, „lei" pe altul) */
.n2-tabel tr > *:last-child{white-space:normal;overflow-wrap:break-word}
.n2-tabel tr > *:last-child{width:1%}
}
/* antetul cu firimituri, la articolele de blog */
.n2-antet{position:relative;z-index:10;overflow:hidden;padding-top:112px}
@media(min-width:1024px){.n2-antet{padding-top:150px}}
.n2-antet-rand{display:flex;flex-direction:column;gap:16px}
@media(min-width:768px){.n2-antet-rand{flex-direction:row;align-items:center;justify-content:space-between}}
.n2-antet-txt{max-width:570px}
.n2-antet-titlu{font-family:var(--ff-disp);font-size:24px;font-weight:500;line-height:1.2;
color:var(--text);margin:0 0 20px}
@media(min-width:640px){.n2-antet-titlu{font-size:30px}}
.n2-antet-sub{font-size:16px;font-weight:500;line-height:1.625;color:var(--muted);margin:0}
.n2-firimituri ol{display:flex;align-items:center;gap:12px;list-style:none;margin:0;padding:0}
@media(min-width:768px){.n2-firimituri ol{justify-content:flex-end}}
.n2-firimituri li{font-size:16px;font-weight:500;color:var(--muted)}
.n2-firimituri li + li::before{content:'\203A';margin-right:12px;color:var(--muted)}
.n2-firimituri li[aria-current] .n2-link{color:var(--primary)}
/* cardul articolului */
.n2-card{background:var(--bg-alt);border:1px solid rgba(0,0,0,.1);padding:24px;
box-shadow:0 5px 15px rgba(6,8,15,.05)}
[data-theme="dark"] .n2-card{background:var(--gray-dark);border-color:rgba(255,255,255,.1);
box-shadow:0 5px 10px rgba(6,8,15,.1)}
@media(min-width:768px){.n2-card{padding:32px}}
.n2-data{font-size:14px;line-height:1.4286;color:var(--muted);margin:0 0 12px}
.n2-titlu-articol{font-family:var(--ff-disp);font-size:30px;font-weight:500;line-height:1.2;
color:var(--text);margin:0 0 24px}
@media(min-width:640px){.n2-titlu-articol{font-size:36px}}
/* ============ v8 — steluțele din spatele titlului de testimoniale ============
Reproducerea animației Lottie a originalului (`Stargazing.json`): 8 stele,
compoziție 325×130, buclă 3.0417s, culoare #FFB347, opacitate 0.45.
Formele și decalajele vin din JSON; aici e doar mișcarea.
Originalul le randează cu un player Lottie (~70 KB de JS). Le desenăm ca SVG
inline — corolarul regulii 5: nu ținem în pagină ce se descarcă degeaba. */
.testi-titlu-cutie{position:relative;height:134.4px;margin:0 auto 4px;
width:calc(100vw - 2rem);max-width:calc(100vw - 2rem)}
@media(min-width:640px){.testi-titlu-cutie{height:153.6px}}
@media(min-width:768px){.testi-titlu-cutie{height:172.8px;width:1036.8px}}
@media(min-width:1024px){.testi-titlu-cutie{height:192px;width:1190.4px}}
.testi-titlu-cutie .testi-title{position:absolute;left:0;right:0;top:50%;z-index:10;
transform:translateY(-50%);margin:0}
.testi-stele{position:absolute;inset:0;z-index:0;opacity:.45;pointer-events:none}
.testi-stele svg{width:100%;height:100%;display:block}
.testi-stea-mica{fill:#FFB347;transform-box:fill-box;transform-origin:center;
animation:testiStea 3.0417s linear infinite}
/* apariție prin mărire + rotație, licărire, apoi stingere — ca în animația lui */
@keyframes testiStea{
0%{opacity:0;scale:.2;rotate:-40deg}
14%{opacity:1;scale:1.08;rotate:0deg}
22%{scale:1}
55%{opacity:.9}
78%{opacity:.35;scale:.9}
100%{opacity:0;scale:.55;rotate:20deg}
}
@media(prefers-reduced-motion:reduce){
.testi-stea-mica{animation:none;opacity:.8}
}
/* Titlu de pagina prezent in cod, dar nevazut. Trei pagini n-au niciun
vizibil in design-ul aprobat — `/despre-noi`, `/servicii`,
`/despre-ochi`. Regula clientului cere cate un
pe fiecare pagina;
asa il avem fara sa atingem un pixel din aspect. Tehnica standard: nu
`display:none`, care ar ascunde titlul si de motoare. */
.doar-pentru-citire{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Butoanele de acordeon din paginile de servicii (Cataractă / Glaucom /
Strabism, respectiv cele 11 de pe „Chirurgia pleoapei").
`normalizeaza()` din gen_nivel2.py scoate TOATE clasele originalului, iar
originalul le stiliza cu `flex w-full items-center justify-between`. Fara
ele, butoanele raman `inline-block` si se stramteaza dupa continut: masurat
pe 375px, cele trei de pe „Chirurgia ochiului" stateau toate pe un rand, in
112/105/106px, cu textul iesit din casete. Pe „Chirurgia pleoapei", 11
butoane se rupeau pe 8 randuri, la latimi intre 87 si 328px.
Regula reface exact ce facea originalul: buton pe toata latimea, titlul in
stanga, „Arată ↓" in dreapta, linie sub el. */
.n2-corp button[aria-controls]{
display:flex;
width:100%;
align-items:center;
justify-content:space-between;
gap:16px;
text-align:left;
background:none;
border:0;
border-bottom:1px solid rgba(86,93,105,.2);
padding:0 0 16px;
margin:0 0 24px;
cursor:pointer;
scroll-margin-top:128px;
}
[data-theme="dark"] .n2-corp button[aria-controls]{border-bottom-color:rgba(255,255,255,.2)}
.n2-corp button[aria-controls] + button[aria-controls]{margin-top:48px}
/* titlul din buton — `h2`, ca in original */
.n2-corp button[aria-controls] h2{
font-family:var(--ff-disp);
font-size:30px;
font-weight:600;
line-height:1.2;
color:var(--text);
margin:0;
}
@media(min-width:640px){.n2-corp button[aria-controls] h2{font-size:36px}}
/* „Arată ↓" din dreapta */
.n2-corp button[aria-controls] > span{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
color:var(--text);
}
.n2-corp button[aria-controls] > span > span:first-child{font-size:14px;font-weight:500}
.n2-corp button[aria-controls] > span > span:last-child{font-size:24px;line-height:1}
.n2-corp button[aria-controls][aria-expanded="true"] > span > span:last-child{transform:rotate(180deg)}
/* Sub 360px antetul nu incapea: cutia logo-ului are 233px cu `flex-shrink:0`,
plus 90px de controale = 323px intr-un spatiu de 273. Rezultatul era ca
TOATE cele 21 de pagini depaseau orizontal cu 50px pe ecrane de 320px
(iPhone SE, Androidul vechi) — masurat, nu presupus.
`max-width:100%` exista deja pe cutie, dar `flex-shrink:0` il impiedica sa
aiba efect. Regula se aplica DOAR sub 360px, deci aspectul aprobat pe
telefoanele obisnuite (375px si peste) ramane neatins. */
@media(max-width:359px){
.hdr-logo-box{width:auto;min-width:0;flex-shrink:1}
.hdr-logo-img{width:170px}
.hdr-ctrl{gap:8px}
}